chore: merge master

.github/workflows/rebase.yml

@@ -20,6 +20,6 @@ jobs:
       with:
         fetch-depth: 0
     - name: Automatic Rebase
-      uses: cirrus-actions/rebase@1.6
+      uses: cirrus-actions/rebase@1.7
       env:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

CHANGELOG.zh-CN.md

@@ -17,7 +17,7 @@ timeline: true
 
 ## 4.20.5
 
-`2022-05-15
+`2022-05-15`
 
 - 🤖 在 TypeScript 定义中废弃 Table `rowSelection.onSelectNone` 和 `rowSelection.onSelectMultiple`。[#35545](https://github.com/ant-design/ant-design/pull/35545)
 - 🐞 InputNumber 当精度为负数时忽略小数部分。[#35520](https://github.com/ant-design/ant-design/pull/35520) [@ty888](https://github.com/ty888)`

components/affix/demo/basic.md

@@ -14,10 +14,10 @@ title:
 The simplest usage.
 
 ```tsx
-import React, { useState } from 'react';
 import { Affix, Button } from 'antd';
+import React, { useState } from 'react';
 
-const Demo: React.FC = () => {
+const App: React.FC = () => {
   const [top, setTop] = useState(10);
   const [bottom, setBottom] = useState(10);
 
@@ -38,5 +38,5 @@ const Demo: React.FC = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```

components/affix/demo/debug.md

@@ -15,11 +15,12 @@ DEBUG
 DEBUG
 
 ```tsx
-import React, { useState } from 'react';
 import { Affix, Button } from 'antd';
+import React, { useState } from 'react';
 
-const Demo: React.FC = () => {
+const App: React.FC = () => {
   const [top, setTop] = useState(10);
+
   return (
     <div style={{ height: 10000 }}>
       <div>Top</div>
@@ -35,5 +36,5 @@ const Demo: React.FC = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```

components/affix/demo/on-change.md

@@ -15,10 +15,13 @@ Callback with affixed state.
 
 ```tsx
 import { Affix, Button } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <Affix offsetTop={120} onChange={affixed => console.log(affixed)}>
     <Button>120px to affix top</Button>
   </Affix>
 );
+
+export default App;
 ```

components/affix/demo/target.md

@@ -14,11 +14,12 @@ title:
 Set a `target` for 'Affix', which is listen to scroll event of target element (default is `window`).
 
 ```tsx
-import React, { useState } from 'react';
 import { Affix, Button } from 'antd';
+import React, { useState } from 'react';
 
-const Demo: React.FC = () => {
+const App: React.FC = () => {
   const [container, setContainer] = useState<HTMLDivElement | null>(null);
+
   return (
     <div className="scrollable-container" ref={setContainer}>
       <div className="background">
@@ -30,7 +31,7 @@ const Demo: React.FC = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
 
 <style>

components/alert/demo/action.md

@@ -14,10 +14,10 @@ title:
 Custom action.
 
 ```tsx
-import React from 'react';
 import { Alert, Button, Space } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Alert
       message="Success Tips"
@@ -71,6 +71,8 @@ export default () => (
     />
   </>
 );
+
+export default App;
 ```
 
 <style>

components/alert/demo/banner.md

@@ -16,8 +16,9 @@ Display Alert as a banner at top of page.
 
 ```tsx
 import { Alert } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Alert message="Warning text" banner />
     <br />
@@ -32,4 +33,6 @@ export default () => (
     <Alert type="error" message="Error text" banner />
   </>
 );
+
+export default App;
 ```

components/alert/demo/basic.md

@@ -15,8 +15,11 @@ The simplest usage for short messages.
 
 ```tsx
 import { Alert } from 'antd';
+import React from 'react';
 
-export default () => <Alert message="Success Text" type="success" />;
+const App: React.FC = () => <Alert message="Success Text" type="success" />;
+
+export default App;
 ```
 
 <style>

components/alert/demo/closable.md

@@ -15,12 +15,13 @@ To show close button.
 
 ```tsx
 import { Alert } from 'antd';
+import React from 'react';
 
 const onClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
   console.log(e, 'I was closed.');
 };
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Alert
       message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
@@ -37,4 +38,6 @@ export default () => (
     />
   </>
 );
+
+export default App;
 ```

components/alert/demo/close-text.md

@@ -15,6 +15,9 @@ Replace the default icon with customized text.
 
 ```tsx
 import { Alert } from 'antd';
+import React from 'react';
 
-export default () => <Alert message="Info Text" type="info" closeText="Close Now" />;
+const App: React.FC = () => <Alert message="Info Text" type="info" closeText="Close Now" />;
+
+export default App;
 ```

components/alert/demo/custom-icon.md

@@ -15,12 +15,13 @@ title:
 A relevant icon makes information clearer and more friendly.
 
 ```tsx
-import { Alert } from 'antd';
 import { SmileOutlined } from '@ant-design/icons';
+import { Alert } from 'antd';
+import React from 'react';
 
 const icon = <SmileOutlined />;
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Alert icon={icon} message="showIcon = false" type="success" />
     <Alert icon={icon} message="Success Tips" type="success" showIcon />
@@ -57,4 +58,6 @@ export default () => (
     />
   </>
 );
+
+export default App;
 ```

components/alert/demo/description.md

@@ -15,8 +15,9 @@ Additional description for alert message.
 
 ```tsx
 import { Alert } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Alert
       message="Success Text"
@@ -40,4 +41,6 @@ export default () => (
     />
   </>
 );
+
+export default App;
 ```

components/alert/demo/error-boundary.md

@@ -14,8 +14,8 @@ title:
 ErrorBoundary Component for making error handling easier in [React](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html).
 
 ```tsx
+import { Alert, Button } from 'antd';
 import React, { useState } from 'react';
-import { Button, Alert } from 'antd';
 
 const { ErrorBoundary } = Alert;
 const ThrowError: React.FC = () => {
@@ -34,9 +34,11 @@ const ThrowError: React.FC = () => {
   );
 };
 
-export default () => (
+const App: React.FC = () => (
   <ErrorBoundary>
     <ThrowError />
   </ErrorBoundary>
 );
+
+export default App;
 ```

components/alert/demo/icon.md

@@ -15,8 +15,9 @@ A relevant icon will make information clearer and more friendly.
 
 ```tsx
 import { Alert } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Alert message="Success Tips" type="success" showIcon />
     <Alert message="Informational Notes" type="info" showIcon />
@@ -49,4 +50,6 @@ export default () => (
     />
   </>
 );
+
+export default App;
 ```

components/alert/demo/loop-banner.md

@@ -15,10 +15,11 @@ Show a loop banner by using with [react-text-loop-next](https://npmjs.com/packag
 
 ```tsx
 import { Alert } from 'antd';
-import { TextLoop } from 'react-text-loop-next';
+import React from 'react';
 import Marquee from 'react-fast-marquee';
+import { TextLoop } from 'react-text-loop-next';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Alert
       banner
@@ -41,4 +42,6 @@ export default () => (
     />
   </>
 );
+
+export default App;
 ```

components/alert/demo/smooth-closed.md

@@ -14,14 +14,16 @@ title:
 Smoothly unmount Alert upon close.
 
 ```tsx
-import React, { useState } from 'react';
 import { Alert } from 'antd';
+import React, { useState } from 'react';
 
 const App: React.FC = () => {
   const [visible, setVisible] = useState(true);
+
   const handleClose = () => {
     setVisible(false);
   };
+
   return (
     <div>
       {visible ? (

components/alert/demo/style.md

@@ -15,8 +15,9 @@ There are 4 types of Alert: `success`, `info`, `warning`, `error`.
 
 ```tsx
 import { Alert } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Alert message="Success Text" type="success" />
     <Alert message="Info Text" type="info" />
@@ -24,6 +25,8 @@ export default () => (
     <Alert message="Error Text" type="error" />
   </>
 );
+
+export default App;
 ```
 
 <style>

components/anchor/demo/basic.md

@@ -15,10 +15,11 @@ The simplest usage.
 
 ```tsx
 import { Anchor } from 'antd';
+import React from 'react';
 
 const { Link } = Anchor;
 
-export default () => (
+const App: React.FC = () => (
   <Anchor>
     <Link href="#components-anchor-demo-basic" title="Basic demo" />
     <Link href="#components-anchor-demo-static" title="Static demo" />
@@ -28,6 +29,8 @@ export default () => (
     </Link>
   </Anchor>
 );
+
+export default App;
 ```
 
 <style>

components/anchor/demo/customizeHighlight.md

@@ -15,12 +15,13 @@ Customize the anchor highlight.
 
 ```tsx
 import { Anchor } from 'antd';
+import React from 'react';
 
 const { Link } = Anchor;
 
 const getCurrentAnchor = () => '#components-anchor-demo-static';
 
-export default () => (
+const App: React.FC = () => (
   <Anchor affix={false} getCurrentAnchor={getCurrentAnchor}>
     <Link href="#components-anchor-demo-basic" title="Basic demo" />
     <Link href="#components-anchor-demo-static" title="Static demo" />
@@ -30,4 +31,6 @@ export default () => (
     </Link>
   </Anchor>
 );
+
+export default App;
 ```

components/anchor/demo/onChange.md

@@ -15,6 +15,7 @@ Listening for anchor link change.
 
 ```tsx
 import { Anchor } from 'antd';
+import React from 'react';
 
 const { Link } = Anchor;
 
@@ -22,7 +23,7 @@ const onChange = (link: string) => {
   console.log('Anchor:OnChange', link);
 };
 
-export default () => (
+const App: React.FC = () => (
   <Anchor affix={false} onChange={onChange}>
     <Link href="#components-anchor-demo-basic" title="Basic demo" />
     <Link href="#components-anchor-demo-static" title="Static demo" />
@@ -32,4 +33,6 @@ export default () => (
     </Link>
   </Anchor>
 );
+
+export default App;
 ```

components/anchor/demo/onClick.md

@@ -15,6 +15,7 @@ Clicking on an anchor does not record history.
 
 ```tsx
 import { Anchor } from 'antd';
+import React from 'react';
 
 const { Link } = Anchor;
 
@@ -29,7 +30,7 @@ const handleClick = (
   console.log(link);
 };
 
-export default () => (
+const App: React.FC = () => (
   <Anchor affix={false} onClick={handleClick}>
     <Link href="#components-anchor-demo-basic" title="Basic demo" />
     <Link href="#components-anchor-demo-static" title="Static demo" />
@@ -39,4 +40,6 @@ export default () => (
     </Link>
   </Anchor>
 );
+
+export default App;
 ```

components/anchor/demo/static.md

@@ -15,10 +15,11 @@ Do not change state when page is scrolling.
 
 ```tsx
 import { Anchor } from 'antd';
+import React from 'react';
 
 const { Link } = Anchor;
 
-export default () => (
+const App: React.FC = () => (
   <Anchor affix={false}>
     <Link href="#components-anchor-demo-basic" title="Basic demo" />
     <Link href="#components-anchor-demo-static" title="Static demo" />
@@ -28,4 +29,6 @@ export default () => (
     </Link>
   </Anchor>
 );
+
+export default App;
 ```

components/anchor/demo/targetOffset.md

@@ -14,16 +14,18 @@ title:
 Anchor target scroll to screen center.
 
 ```tsx
-import React, { useState, useEffect } from 'react';
 import { Anchor } from 'antd';
+import React, { useEffect, useState } from 'react';
 
 const { Link } = Anchor;
 
-const AnchorExample: React.FC = () => {
+const App: React.FC = () => {
   const [targetOffset, setTargetOffset] = useState<number | undefined>(undefined);
+
   useEffect(() => {
     setTargetOffset(window.innerHeight / 2);
   }, []);
+
   return (
     <Anchor targetOffset={targetOffset}>
       <Link href="#components-anchor-demo-basic" title="Basic demo" />
@@ -36,5 +38,5 @@ const AnchorExample: React.FC = () => {
   );
 };
 
-export default () => <AnchorExample />;
+export default App;
 ```

components/anchor/style/index.less

@@ -56,12 +56,11 @@
 
 // &-link {
 //   padding: @anchor-link-padding;
-//     line-height: 1.143;
 
 //   &-title {
 //     position: relative;
 //     display: block;
-//       margin-bottom: 6px;
+//     margin-bottom: 3px;
 //     overflow: hidden;
 //     color: @text-color;
 //     white-space: nowrap;
@@ -79,8 +78,8 @@
 //   }
 
 //   &-link &-link {
-//     padding-top: 5px;
+//     padding-top: 2px;
-//     padding-bottom: 5px;
+//     padding-bottom: 2px;
 //   }
 // }
 

components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -522,11 +522,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
 >
   <div
     class="ant-row ant-form-item"
-    role="row"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-      role="cell"
     >
       <label
         class=""
@@ -537,7 +535,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
     </div>
     <div
       class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -592,11 +589,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
   </div>
   <div
     class="ant-row ant-form-item"
-    role="row"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-      role="cell"
     >
       <label
         class=""
@@ -607,7 +602,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
     </div>
     <div
       class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -735,11 +729,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
   </div>
   <div
     class="ant-row ant-form-item"
-    role="row"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-      role="cell"
     >
       <label
         class=""
@@ -750,7 +742,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
     </div>
     <div
       class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -924,11 +915,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
   </div>
   <div
     class="ant-row ant-form-item"
-    role="row"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-      role="cell"
     >
       <label
         class=""
@@ -939,7 +928,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
     </div>
     <div
       class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -1021,11 +1009,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
   </div>
   <div
     class="ant-row ant-form-item"
-    role="row"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-      role="cell"
     >
       <label
         class=""
@@ -1036,7 +1022,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
     </div>
     <div
       class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -1237,11 +1222,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
   </div>
   <div
     class="ant-row ant-form-item"
-    role="row"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-      role="cell"
     >
       <label
         class=""
@@ -1252,7 +1235,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
     </div>
     <div
       class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -1462,11 +1444,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
   </div>
   <div
     class="ant-row ant-form-item"
-    role="row"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-      role="cell"
     >
       <label
         class=""
@@ -1477,7 +1457,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
     </div>
     <div
       class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-      role="cell"
     >
       <div
         class="ant-form-item-control-input"

components/auto-complete/__tests__/__snapshots__/demo.test.js.snap

@@ -174,11 +174,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
 >
   <div
     class="ant-row ant-form-item"
-    role="row"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-      role="cell"
     >
       <label
         class=""
@@ -189,7 +187,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     </div>
     <div
       class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -230,11 +227,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
   </div>
   <div
     class="ant-row ant-form-item"
-    role="row"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-      role="cell"
     >
       <label
         class=""
@@ -245,7 +240,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     </div>
     <div
       class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -314,11 +308,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
   </div>
   <div
     class="ant-row ant-form-item"
-    role="row"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-      role="cell"
     >
       <label
         class=""
@@ -329,7 +321,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     </div>
     <div
       class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -430,11 +421,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
   </div>
   <div
     class="ant-row ant-form-item"
-    role="row"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-      role="cell"
     >
       <label
         class=""
@@ -445,7 +434,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     </div>
     <div
       class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -513,11 +501,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
   </div>
   <div
     class="ant-row ant-form-item"
-    role="row"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-      role="cell"
     >
       <label
         class=""
@@ -528,7 +514,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     </div>
     <div
       class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -656,11 +641,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
   </div>
   <div
     class="ant-row ant-form-item"
-    role="row"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-      role="cell"
     >
       <label
         class=""
@@ -671,7 +654,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     </div>
     <div
       class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -808,11 +790,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
   </div>
   <div
     class="ant-row ant-form-item"
-    role="row"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
-      role="cell"
     >
       <label
         class=""
@@ -823,7 +803,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     </div>
     <div
       class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
-      role="cell"
     >
       <div
         class="ant-form-item-control-input"

components/auto-complete/demo/basic.md

@@ -14,26 +14,31 @@ title:
 Basic Usage, set data source of autocomplete with `options` property.
 
 ```tsx
-import React, { useState } from 'react';
 import { AutoComplete } from 'antd';
+import React, { useState } from 'react';
 
-const mockVal = (str: string, repeat: number = 1) => ({
+const mockVal = (str: string, repeat = 1) => ({
   value: str.repeat(repeat),
 });
-const Complete: React.FC = () => {
+
+const App: React.FC = () => {
   const [value, setValue] = useState('');
   const [options, setOptions] = useState<{ value: string }[]>([]);
+
   const onSearch = (searchText: string) => {
     setOptions(
       !searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)],
     );
   };
+
   const onSelect = (data: string) => {
     console.log('onSelect', data);
   };
+
   const onChange = (data: string) => {
     setValue(data);
   };
+
   return (
     <>
       <AutoComplete
@@ -58,5 +63,5 @@ const Complete: React.FC = () => {
   );
 };
 
-export default () => <Complete />;
+export default App;
 ```

components/auto-complete/demo/certain-category.md

@@ -14,8 +14,9 @@ title:
 Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns). Basic Usage, set options of autocomplete with `options` property.
 
 ```tsx
-import { Input, AutoComplete } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
+import { AutoComplete, Input } from 'antd';
+import React from 'react';
 
 const renderTitle = (title: string) => (
   <span>
@@ -63,7 +64,7 @@ const options = [
   },
 ];
 
-const Complete: React.FC = () => (
+const App: React.FC = () => (
   <AutoComplete
     dropdownClassName="certain-category-search-dropdown"
     dropdownMatchSelectWidth={500}
@@ -74,7 +75,7 @@ const Complete: React.FC = () => (
   </AutoComplete>
 );
 
-export default () => <Complete />;
+export default App;
 ```
 
 ```css

components/auto-complete/demo/custom.md

@@ -14,13 +14,14 @@ title:
 Customize Input Component
 
 ```tsx
-import React, { useState } from 'react';
 import { AutoComplete, Input } from 'antd';
+import React, { useState } from 'react';
 
 const { TextArea } = Input;
 
-const Complete: React.FC = () => {
+const App: React.FC = () => {
   const [options, setOptions] = useState<{ value: string }[]>([]);
+
   const handleSearch = (value: string) => {
     setOptions(
       !value ? [] : [{ value }, { value: value + value }, { value: value + value + value }],
@@ -52,5 +53,5 @@ const Complete: React.FC = () => {
   );
 };
 
-export default () => <Complete />;
+export default App;
 ```

components/auto-complete/demo/form-debug.md

@@ -7,8 +7,9 @@ debug: true
 ---
 
 ```tsx
-import { Input, AutoComplete, Form, TreeSelect, Button } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
+import { AutoComplete, Button, Form, Input, TreeSelect } from 'antd';
+import React from 'react';
 
 const formItemLayout = {
   labelCol: {
@@ -21,7 +22,7 @@ const formItemLayout = {
   },
 };
 
-export default () => (
+const App: React.FC = () => (
   <Form style={{ margin: '0 auto' }} {...formItemLayout}>
     <Form.Item label="单独 AutoComplete">
       <AutoComplete />
@@ -69,4 +70,6 @@ export default () => (
     </Form.Item>
   </Form>
 );
+
+export default App;
 ```

components/auto-complete/demo/non-case-sensitive.md

@@ -15,6 +15,7 @@ A non-case-sensitive AutoComplete
 
 ```tsx
 import { AutoComplete } from 'antd';
+import React from 'react';
 
 const options = [
   { value: 'Burns Bay Road' },
@@ -22,7 +23,7 @@ const options = [
   { value: 'Wall Street' },
 ];
 
-const Complete: React.FC = () => (
+const App: React.FC = () => (
   <AutoComplete
     style={{ width: 200 }}
     options={options}
@@ -33,5 +34,5 @@ const Complete: React.FC = () => (
   />
 );
 
-export default () => <Complete />;
+export default App;
 ```

components/auto-complete/demo/options.md

@@ -14,13 +14,14 @@ title:
 You could pass `AutoComplete.Option` as children of `AutoComplete`, instead of using `options`。
 
 ```tsx
-import React, { useState } from 'react';
 import { AutoComplete } from 'antd';
+import React, { useState } from 'react';
 
 const { Option } = AutoComplete;
 
-const Complete: React.FC = () => {
+const App: React.FC = () => {
   const [result, setResult] = useState<string[]>([]);
+
   const handleSearch = (value: string) => {
     let res: string[] = [];
     if (!value || value.indexOf('@') >= 0) {
@@ -30,6 +31,7 @@ const Complete: React.FC = () => {
     }
     setResult(res);
   };
+
   return (
     <AutoComplete style={{ width: 200 }} onSearch={handleSearch} placeholder="input here">
       {result.map((email: string) => (
@@ -41,5 +43,5 @@ const Complete: React.FC = () => {
   );
 };
 
-export default () => <Complete />;
+export default App;
 ```

components/auto-complete/demo/status.md

@@ -15,13 +15,14 @@ title:
 Add status to AutoComplete with `status`, which could be `error` or `warning`.
 
 ```tsx
-import React, { useState } from 'react';
 import { AutoComplete, Space } from 'antd';
+import React, { useState } from 'react';
 
-const mockVal = (str: string, repeat: number = 1) => ({
+const mockVal = (str: string, repeat = 1) => ({
   value: str.repeat(repeat),
 });
-const ValidateInputs: React.FC = () => {
+
+const App: React.FC = () => {
   const [options, setOptions] = useState<{ value: string }[]>([]);
 
   const onSearch = (searchText: string) => {
@@ -38,5 +39,5 @@ const ValidateInputs: React.FC = () => {
   );
 };
 
-export default () => <ValidateInputs />;
+export default App;
 ```

components/auto-complete/demo/uncertain-category.md

@@ -14,13 +14,11 @@ title:
 Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns).
 
 ```tsx
-import React, { useState } from 'react';
+import { AutoComplete, Input } from 'antd';
-import { Input, AutoComplete } from 'antd';
 import type { SelectProps } from 'antd/es/select';
+import React, { useState } from 'react';
 
-function getRandomInt(max: number, min: number = 0) {
+const getRandomInt = (max: number, min = 0) => Math.floor(Math.random() * (max - min + 1)) + min;
-  return Math.floor(Math.random() * (max - min + 1)) + min; // eslint-disable-line no-mixed-operators
-}
 
 const searchResult = (query: string) =>
   new Array(getRandomInt(5))
@@ -53,7 +51,7 @@ const searchResult = (query: string) =>
       };
     });
 
-const Complete: React.FC = () => {
+const App: React.FC = () => {
   const [options, setOptions] = useState<SelectProps<object>['options']>([]);
 
   const handleSearch = (value: string) => {
@@ -77,5 +75,5 @@ const Complete: React.FC = () => {
   );
 };
 
-export default () => <Complete />;
+export default App;
 ```

components/avatar/demo/badge.md

@@ -14,10 +14,11 @@ title:
 Usually used for reminders and notifications.
 
 ```tsx
-import { Avatar, Badge } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
+import { Avatar, Badge } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <span className="avatar-item">
       <Badge count={1}>
@@ -31,6 +32,8 @@ export default () => (
     </span>
   </>
 );
+
+export default App;
 ```
 
 ```css

components/avatar/demo/basic.md

@@ -14,10 +14,11 @@ title:
 Three sizes and two shapes are available.
 
 ```tsx
-import { Avatar } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
+import { Avatar } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <div>
       <Avatar size={64} icon={<UserOutlined />} />
@@ -33,6 +34,8 @@ export default () => (
     </div>
   </>
 );
+
+export default App;
 ```
 
 <style>

components/avatar/demo/dynamic.md

@@ -14,26 +14,29 @@ title:
 For letter type Avatar, when the letters are too long to display, the font size can be automatically adjusted according to the width of the Avatar. You can also use `gap` to set the unit distance between left and right sides.
 
 ```tsx
-import React, { useState } from 'react';
 import { Avatar, Button } from 'antd';
+import React, { useState } from 'react';
 
 const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
 const ColorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
 const GapList = [4, 3, 2, 1];
 
-const Autoset: React.FC = () => {
+const App: React.FC = () => {
   const [user, setUser] = useState(UserList[0]);
   const [color, setColor] = useState(ColorList[0]);
   const [gap, setGap] = useState(GapList[0]);
+
   const changeUser = () => {
     const index = UserList.indexOf(user);
     setUser(index < UserList.length - 1 ? UserList[index + 1] : UserList[0]);
     setColor(index < ColorList.length - 1 ? ColorList[index + 1] : ColorList[0]);
   };
+
   const changeGap = () => {
     const index = GapList.indexOf(gap);
     setGap(index < GapList.length - 1 ? GapList[index + 1] : GapList[0]);
   };
+
   return (
     <>
       <Avatar style={{ backgroundColor: color, verticalAlign: 'middle' }} size="large" gap={gap}>
@@ -53,5 +56,5 @@ const Autoset: React.FC = () => {
   );
 };
 
-export default () => <Autoset />;
+export default App;
 ```

components/avatar/demo/fallback.md

@@ -16,8 +16,9 @@ debug: true
 
 ```tsx
 import { Avatar } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Avatar shape="circle" src="http://abc.com/not-exist.jpg">
       A
@@ -27,4 +28,6 @@ export default () => (
     </Avatar>
   </>
 );
+
+export default App;
 ```

components/avatar/demo/group.md

@@ -14,10 +14,11 @@ title:
 Avatar group display.
 
 ```tsx
+import { AntDesignOutlined, UserOutlined } from '@ant-design/icons';
 import { Avatar, Divider, Tooltip } from 'antd';
-import { UserOutlined, AntDesignOutlined } from '@ant-design/icons';
+import React from 'react';
 
-const Demo = () => (
+const App: React.FC = () => (
   <>
     <Avatar.Group>
       <Avatar src="https://joeschmoe.io/api/v1/random" />
@@ -66,5 +67,5 @@ const Demo = () => (
   </>
 );
 
-export default Demo;
+export default App;
 ```

components/avatar/demo/responsive.md

@@ -14,13 +14,16 @@ title:
 Avatar size can be automatically adjusted based on the screen size.
 
 ```tsx
-import { Avatar } from 'antd';
 import { AntDesignOutlined } from '@ant-design/icons';
+import { Avatar } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <Avatar
     size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}
     icon={<AntDesignOutlined />}
   />
 );
+
+export default App;
 ```

components/avatar/demo/toggle-debug.md

@@ -15,14 +15,16 @@ debug: true
 Text inside Avatar should be set a proper font size when toggle it's visibility.
 
 ```tsx
-import React, { useState } from 'react';
 import { Avatar, Button } from 'antd';
+import React, { useState } from 'react';
 
 type SizeType = 'large' | 'small' | 'default' | number;
+
 const App: React.FC = () => {
   const [hide, setHide] = useState(true);
   const [size, setSize] = useState<SizeType>('large');
   const [scale, setScale] = useState(1);
+
   const toggle = () => {
     setHide(!hide);
   };

components/avatar/demo/type.md

@@ -14,10 +14,11 @@ title:
 Image, Icon and letter are supported, and the latter two kinds of avatar can have custom colors and background colors.
 
 ```tsx
-import { Avatar, Image } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
+import { Avatar, Image } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Avatar icon={<UserOutlined />} />
     <Avatar>U</Avatar>
@@ -28,6 +29,8 @@ export default () => (
     <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
   </>
 );
+
+export default App;
 ```
 
 <style>

components/back-top/demo/basic.md

@@ -13,10 +13,11 @@ title:
 
 The most basic usage.
 
-```jsx
+```tsx
 import { BackTop } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <BackTop />
     Scroll down to see the bottom-right
@@ -24,6 +25,8 @@ export default () => (
     button.
   </>
 );
+
+export default App;
 ```
 
 ```css

components/back-top/demo/custom.md

@@ -14,10 +14,11 @@ title:
 
 You can customize the style of the button, just note the size limit: no more than `40px * 40px`.
 
-```jsx
+```tsx
 import { BackTop } from 'antd';
+import React from 'react';
 
-const style = {
+const style: React.CSSProperties = {
   height: 40,
   width: 40,
   lineHeight: '40px',
@@ -28,7 +29,7 @@ const style = {
   fontSize: 14,
 };
 
-export default () => (
+const App: React.FC = () => (
   <div style={{ height: '600vh', padding: 8 }}>
     <div>Scroll to bottom</div>
     <div>Scroll to bottom</div>
@@ -42,4 +43,6 @@ export default () => (
     </BackTop>
   </div>
 );
+
+export default App;
 ```

components/badge/demo/basic.md

@@ -13,11 +13,12 @@ title:
 
 Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZero` to show it.
 
-```jsx
+```tsx
-import { Badge, Avatar } from 'antd';
 import { ClockCircleOutlined } from '@ant-design/icons';
+import { Avatar, Badge } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Badge count={5}>
       <Avatar shape="square" size="large" />
@@ -30,6 +31,8 @@ export default () => (
     </Badge>
   </>
 );
+
+export default App;
 ```
 
 <style>

components/badge/demo/change.md

@@ -13,14 +13,14 @@ title:
 
 The count will be animated as it changes.
 
-```jsx
+```tsx
-import React, { useState } from 'react';
-import { Badge, Button, Switch, Divider, Avatar } from 'antd';
 import { MinusOutlined, PlusOutlined, QuestionOutlined } from '@ant-design/icons';
+import { Avatar, Badge, Button, Divider, Switch } from 'antd';
+import React, { useState } from 'react';
 
 const ButtonGroup = Button.Group;
 
-export default () => {
+const App: React.FC = () => {
   const [count, setCount] = useState(5);
   const [show, setShow] = useState(true);
 
@@ -29,20 +29,20 @@ export default () => {
   };
 
   const decline = () => {
-    let countValue = count - 1;
+    let newCount = count - 1;
-    if (countValue < 0) {
+    if (newCount < 0) {
-      countValue = 0;
+      newCount = 0;
     }
-    setCount(countValue);
+    setCount(newCount);
   };
 
   const random = () => {
-    const countValue = Math.floor(Math.random() * 100);
+    const newCount = Math.floor(Math.random() * 100);
-    setCount(countValue);
+    setCount(newCount);
   };
 
-  const onChange = isShow => {
+  const onChange = (checked: boolean) => {
-    setShow(isShow);
+    setShow(checked);
   };
 
   return (
@@ -69,4 +69,6 @@ export default () => {
     </>
   );
 };
+
+export default App;
 ```

components/badge/demo/colorful.md

@@ -13,8 +13,9 @@ title:
 
 We preset a series of colorful Badge styles for use in different situations. You can also set it to a hex color string for custom color.
 
-```jsx
+```tsx
 import { Badge, Divider } from 'antd';
+import React from 'react';
 
 const colors = [
   'pink',
@@ -32,7 +33,7 @@ const colors = [
   'lime',
 ];
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Divider orientation="left">Presets</Divider>
     <div>
@@ -54,6 +55,8 @@ export default () => (
     </>
   </>
 );
+
+export default App;
 ```
 
 ```css

components/badge/demo/dot.md

@@ -13,11 +13,12 @@ title:
 
 This will simply display a red badge, without a specific count. If count equals 0, it won't display the dot.
 
-```jsx
+```tsx
-import { Badge } from 'antd';
 import { NotificationOutlined } from '@ant-design/icons';
+import { Badge } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Badge dot>
       <NotificationOutlined style={{ fontSize: 16 }} />
@@ -27,4 +28,6 @@ export default () => (
     </Badge>
   </>
 );
+
+export default App;
 ```

components/badge/demo/link.md

@@ -13,14 +13,17 @@ title:
 
 The badge can be wrapped with `a` tag to make it linkable.
 
-```jsx
+```tsx
-import { Badge, Avatar } from 'antd';
+import { Avatar, Badge } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <a href="#">
     <Badge count={5}>
       <Avatar shape="square" size="large" />
     </Badge>
   </a>
 );
+
+export default App;
 ```

components/badge/demo/mix.md

@@ -14,10 +14,11 @@ debug: true
 
 Using `count/dot` with custom `stauts/color`.
 
-```jsx
+```tsx
-import { Badge, Avatar } from 'antd';
+import { Avatar, Badge } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Badge count={5} status="success">
       <Avatar shape="square" size="large" />
@@ -45,4 +46,6 @@ export default () => (
     </Badge>
   </>
 );
+
+export default App;
 ```

components/badge/demo/no-wrapper.md

@@ -15,12 +15,13 @@ title:
 
 Used in standalone when children is empty.
 
-```jsx
+```tsx
-import { Badge, Space, Switch } from 'antd';
 import { ClockCircleOutlined } from '@ant-design/icons';
+import { Badge, Space, Switch } from 'antd';
+import React, { useState } from 'react';
 
-const Demo = () => {
+const App: React.FC = () => {
-  const [show, setShow] = React.useState(true);
+  const [show, setShow] = useState(true);
 
   return (
     <Space>
@@ -36,5 +37,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```

components/badge/demo/offset.md

@@ -13,12 +13,15 @@ title:
 
 Set offset of the badge dot, the format is `[left, top]`, which represents the offset of the status dot from the left and top of the default position.
 
-```jsx
+```tsx
-import { Badge, Avatar } from 'antd';
+import { Avatar, Badge } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <Badge count={5} offset={[10, 10]}>
     <Avatar shape="square" size="large" />
   </Badge>
 );
+
+export default App;
 ```

components/badge/demo/overflow.md

@@ -13,10 +13,11 @@ title:
 
 `${overflowCount}+` is displayed when count is larger than `overflowCount`. The default value of `overflowCount` is `99`.
 
-```jsx
+```tsx
-import { Badge, Avatar } from 'antd';
+import { Avatar, Badge } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Badge count={99}>
       <Avatar shape="square" size="large" />
@@ -32,4 +33,6 @@ export default () => (
     </Badge>
   </>
 );
+
+export default App;
 ```

components/badge/demo/ribbbon.md

@@ -13,10 +13,11 @@ title:
 
 Use ribbon badge.
 
-```jsx
+```tsx
 import { Badge, Card } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Badge.Ribbon text="Hippies">
       <Card title="Pushes open the window" size="small">
@@ -60,6 +61,8 @@ export default () => (
     </Badge.Ribbon>
   </>
 );
+
+export default App;
 ```
 
 ```css

components/badge/demo/ribbon-debug.md

@@ -14,10 +14,11 @@ Buggy!
 
 Buggy!
 
-```jsx
+```tsx
 import { Badge, Card, Space } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <Space direction="vertical" style={{ width: '100%' }}>
     <Badge.Ribbon text="啦啦啦啦">
       <Card>推开窗户举起望远镜</Card>
@@ -36,4 +37,6 @@ export default () => (
     </Badge.Ribbon>
   </Space>
 );
+
+export default App;
 ```

components/badge/demo/size.md

@@ -13,10 +13,11 @@ title:
 
 Set size of numeral Badge.
 
-```jsx
+```tsx
-import { Badge, Avatar } from 'antd';
+import { Avatar, Badge } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Badge size="default" count={5}>
       <Avatar shape="square" size="large" />
@@ -26,4 +27,6 @@ export default () => (
     </Badge>
   </>
 );
+
+export default App;
 ```

components/badge/demo/status.md

@@ -13,10 +13,11 @@ title:
 
 Standalone badge with status.
 
-```jsx
+```tsx
 import { Badge } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Badge status="success" />
     <Badge status="error" />
@@ -35,4 +36,6 @@ export default () => (
     <Badge status="warning" text="Warning" />
   </>
 );
+
+export default App;
 ```

components/badge/demo/title.md

@@ -14,10 +14,11 @@ debug: true
 
 The badge will display `title` when hovered over, instead of `count`.
 
-```jsx
+```tsx
-import { Badge, Avatar } from 'antd';
+import { Avatar, Badge } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Badge count={5} title="Custom hover text">
       <Avatar shape="square" size="large" />
@@ -27,4 +28,6 @@ export default () => (
     </Badge>
   </>
 );
+
+export default App;
 ```

components/breadcrumb/demo/basic.md

@@ -13,10 +13,11 @@ title:
 
 The simplest use.
 
-```jsx
+```tsx
 import { Breadcrumb } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <Breadcrumb>
     <Breadcrumb.Item>Home</Breadcrumb.Item>
     <Breadcrumb.Item>
@@ -28,4 +29,6 @@ export default () => (
     <Breadcrumb.Item>An Application</Breadcrumb.Item>
   </Breadcrumb>
 );
+
+export default App;
 ```

components/breadcrumb/demo/overlay.md

@@ -13,13 +13,15 @@ title:
 
 Breadcrumbs support drop down menu.
 
-```jsx
+```tsx
 import { Breadcrumb, Menu } from 'antd';
+import React from 'react';
 
 const menu = (
   <Menu
     items={[
       {
+        key: '1',
         label: (
           <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
             General
@@ -27,6 +29,7 @@ const menu = (
         ),
       },
       {
+        key: '2',
         label: (
           <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
             Layout
@@ -34,6 +37,7 @@ const menu = (
         ),
       },
       {
+        key: '3',
         label: (
           <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
             Navigation
@@ -44,7 +48,7 @@ const menu = (
   />
 );
 
-export default () => (
+const App: React.FC = () => (
   <Breadcrumb>
     <Breadcrumb.Item>Ant Design</Breadcrumb.Item>
     <Breadcrumb.Item>
@@ -56,4 +60,6 @@ export default () => (
     <Breadcrumb.Item>Button</Breadcrumb.Item>
   </Breadcrumb>
 );
+
+export default App;
 ```

components/breadcrumb/demo/react-router.md

@@ -15,9 +15,10 @@ title:
 
 Used together with `react-router@6+`.
 
-```jsx
+```tsx
-import { HashRouter, Route, Routes, Link, useLocation } from 'react-router-dom';
+import { Alert, Breadcrumb } from 'antd';
-import { Breadcrumb, Alert } from 'antd';
+import React from 'react';
+import { HashRouter, Link, Route, Routes, useLocation } from 'react-router-dom';
 
 const Apps = () => (
   <ul className="app-list">
@@ -30,16 +31,18 @@ const Apps = () => (
   </ul>
 );
 
-const breadcrumbNameMap = {
+const breadcrumbNameMap: Record<string, string> = {
   '/apps': 'Application List',
   '/apps/1': 'Application1',
   '/apps/2': 'Application2',
   '/apps/1/detail': 'Detail',
   '/apps/2/detail': 'Detail',
 };
-const Home = props => {
+
+const Home = () => {
   const location = useLocation();
   const pathSnippets = location.pathname.split('/').filter(i => i);
+
   const extraBreadcrumbItems = pathSnippets.map((_, index) => {
     const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
     return (
@@ -48,11 +51,13 @@ const Home = props => {
       </Breadcrumb.Item>
     );
   });
+
   const breadcrumbItems = [
     <Breadcrumb.Item key="home">
       <Link to="/">Home</Link>
     </Breadcrumb.Item>,
   ].concat(extraBreadcrumbItems);
+
   return (
     <div className="demo">
       <div className="demo-nav">
@@ -69,11 +74,13 @@ const Home = props => {
   );
 };
 
-export default () => (
+const App: React.FC = () => (
   <HashRouter>
     <Home />
   </HashRouter>
 );
+
+export default App;
 ```
 
 ```css

components/breadcrumb/demo/separator-component.md

@@ -13,10 +13,11 @@ title:
 
 The separator can be customized by setting the separator property: `Breadcrumb.Separator`.
 
-```jsx
+```tsx
 import { Breadcrumb } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <Breadcrumb separator="">
     <Breadcrumb.Item>Location</Breadcrumb.Item>
     <Breadcrumb.Separator>:</Breadcrumb.Separator>
@@ -27,4 +28,6 @@ export default () => (
     <Breadcrumb.Item>An Application</Breadcrumb.Item>
   </Breadcrumb>
 );
+
+export default App;
 ```

components/breadcrumb/demo/separator.md

@@ -13,10 +13,11 @@ title:
 
 The separator can be customized by setting the separator property: `separator=">"`.
 
-```jsx
+```tsx
 import { Breadcrumb } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <Breadcrumb separator=">">
     <Breadcrumb.Item>Home</Breadcrumb.Item>
     <Breadcrumb.Item href="">Application Center</Breadcrumb.Item>
@@ -24,4 +25,6 @@ export default () => (
     <Breadcrumb.Item>An Application</Breadcrumb.Item>
   </Breadcrumb>
 );
+
+export default App;
 ```

components/breadcrumb/demo/withIcon.md

@@ -13,11 +13,12 @@ title:
 
 The icon should be placed in front of the text.
 
-```jsx
+```tsx
-import { Breadcrumb } from 'antd';
 import { HomeOutlined, UserOutlined } from '@ant-design/icons';
+import { Breadcrumb } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <Breadcrumb>
     <Breadcrumb.Item href="">
       <HomeOutlined />
@@ -29,4 +30,6 @@ export default () => (
     <Breadcrumb.Item>Application</Breadcrumb.Item>
   </Breadcrumb>
 );
+
+export default App;
 ```

components/button/demo/basic.md

@@ -13,10 +13,11 @@ title:
 
 There are `primary` button, `default` button, `dashed` button, `text` button and `link` button in antd.
 
-```jsx
+```tsx
 import { Button } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Button type="primary">Primary Button</Button>
     <Button>Default Button</Button>
@@ -26,4 +27,6 @@ export default () => (
     <Button type="link">Link Button</Button>
   </>
 );
+
+export default App;
 ```

components/button/demo/block.md

@@ -13,10 +13,11 @@ title:
 
 `block` property will make the button fit to its parent width.
 
-```jsx
+```tsx
 import { Button } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Button type="primary" block>
       Primary
@@ -30,4 +31,6 @@ export default () => (
     </Button>
   </>
 );
+
+export default App;
 ```

components/button/demo/danger.md

@@ -13,10 +13,11 @@ title:
 
 `danger` is a property of button after antd 4.0.
 
-```jsx
+```tsx
 import { Button } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Button type="primary" danger>
       Primary
@@ -33,4 +34,6 @@ export default () => (
     </Button>
   </>
 );
+
+export default App;
 ```

components/button/demo/disabled.md

@@ -13,10 +13,11 @@ title:
 
 To mark a button as disabled, add the `disabled` property to the `Button`.
 
-```jsx
+```tsx
 import { Button } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Button type="primary">Primary</Button>
     <Button type="primary" disabled>
@@ -67,6 +68,8 @@ export default () => (
     </div>
   </>
 );
+
+export default App;
 ```
 
 ```css

components/button/demo/ghost.md

@@ -13,10 +13,11 @@ title:
 
 `ghost` property will make button's background transparent, it is commonly used in colored background.
 
-```jsx
+```tsx
 import { Button } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <div className="site-button-ghost-wrapper">
     <Button type="primary" ghost>
       Primary
@@ -30,6 +31,8 @@ export default () => (
     </Button>
   </div>
 );
+
+export default App;
 ```
 
 ```css

components/button/demo/icon.md

@@ -17,11 +17,12 @@ title:
 
 If you want specific control over the positioning and placement of the `Icon`, then that should be done by placing the `Icon` component within the `Button` rather than using the `icon` property.
 
-```jsx
+```tsx
-import { Button, Tooltip } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
+import { Button, Tooltip } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Tooltip title="search">
       <Button type="primary" shape="circle" icon={<SearchOutlined />} />
@@ -81,4 +82,6 @@ export default () => (
     <Button icon={<SearchOutlined />} size="large" href="https://www.google.com" />
   </>
 );
+
+export default App;
 ```

components/button/demo/legacy-group.md

@@ -14,12 +14,13 @@ Debug usage
 
 Debug usage
 
-```jsx
+```tsx
-import { Button, Tooltip } from 'antd';
 import { DownloadOutlined } from '@ant-design/icons';
+import { Button, Tooltip } from 'antd';
+import type { ButtonGroupProps } from 'antd/es/button';
+import React from 'react';
 
-function getGroup(props) {
+const getGroup = (props?: ButtonGroupProps) => (
-  return (
   <div>
     <Button.Group {...props}>
       <Button type="primary">Button 1</Button>
@@ -32,10 +33,9 @@ function getGroup(props) {
       </Tooltip>
     </Button.Group>
   </div>
-  );
+);
-}
 
-export default () => (
+const App: React.FC = () => (
   <>
     {getGroup({ size: 'small' })}
     <br />
@@ -44,4 +44,6 @@ export default () => (
     {getGroup({ size: 'large' })}
   </>
 );
+
+export default App;
 ```

components/button/demo/loading.md

@@ -13,15 +13,15 @@ title:
 
 A loading indicator can be added to a button by setting the `loading` property on the `Button`.
 
-```jsx
+```tsx
-import React, { useEffect, useState, useRef } from 'react';
-import { Button, Space } from 'antd';
 import { PoweroffOutlined } from '@ant-design/icons';
+import { Button, Space } from 'antd';
+import React, { useState } from 'react';
 
-export default () => {
+const App: React.FC = () => {
-  const [loadings, setLoadings] = useState([]);
+  const [loadings, setLoadings] = useState<boolean[]>([]);
 
-  const enterLoading = index => {
+  const enterLoading = (index: number) => {
     setLoadings(prevLoadings => {
       const newLoadings = [...prevLoadings];
       newLoadings[index] = true;
@@ -71,4 +71,6 @@ export default () => {
     </>
   );
 };
+
+export default App;
 ```

components/button/demo/multiple.md

@@ -15,7 +15,8 @@ If you need several buttons, we recommend that you use 1 primary button + n seco
 
 ```tsx
 import type { MenuProps } from 'antd';
-import { Button, Menu, Dropdown } from 'antd';
+import { Button, Dropdown, Menu } from 'antd';
+import React from 'react';
 
 const onMenuClick: MenuProps['onClick'] = e => {
   console.log('click', e);
@@ -41,11 +42,13 @@ const menu = (
   />
 );
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Button type="primary">primary</Button>
     <Button>secondary</Button>
     <Dropdown.Button overlay={menu}>Actions</Dropdown.Button>
   </>
 );
+
+export default App;
 ```

components/button/demo/size.md

@@ -17,20 +17,18 @@ Ant Design supports a default button size as well as a large and small size.
 
 If a large or small button is desired, set the `size` property to either `large` or `small` respectively. Omit the `size` property for a button with the default size.
 
-```jsx
+```tsx
-import React, { useState } from 'react';
-import { Button, Radio } from 'antd';
 import { DownloadOutlined } from '@ant-design/icons';
+import { Button, Radio } from 'antd';
+import type { SizeType } from 'antd/es/config-provider/SizeContext';
+import React, { useState } from 'react';
 
-export default () => {
+const App: React.FC = () => {
-  const [size, setSize] = useState('large');
+  const [size, setSize] = useState<SizeType>('large');
-  const handleSizeChange = e => {
-    setSize(e.target.value);
-  };
 
   return (
     <>
-      <Radio.Group value={size} onChange={handleSizeChange}>
+      <Radio.Group value={size} onChange={e => setSize(e.target.value)}>
         <Radio.Button value="large">Large</Radio.Button>
         <Radio.Button value="default">Default</Radio.Button>
         <Radio.Button value="small">Small</Radio.Button>
@@ -61,4 +59,6 @@ export default () => {
     </>
   );
 };
+
+export default App;
 ```

components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -3185,12 +3185,10 @@ exports[`renders ./components/calendar/demo/customize-header.md extend context c
       </h4>
       <div
         class="ant-row"
-        role="row"
         style="margin-left:-4px;margin-right:-4px"
       >
         <div
           class="ant-col"
-          role="cell"
           style="padding-left:4px;padding-right:4px"
         >
           <div
@@ -3239,7 +3237,6 @@ exports[`renders ./components/calendar/demo/customize-header.md extend context c
         </div>
         <div
           class="ant-col"
-          role="cell"
           style="padding-left:4px;padding-right:4px"
         >
           <div
@@ -3690,7 +3687,6 @@ exports[`renders ./components/calendar/demo/customize-header.md extend context c
         </div>
         <div
           class="ant-col"
-          role="cell"
           style="padding-left:4px;padding-right:4px"
         >
           <div

components/calendar/__tests__/__snapshots__/demo.test.js.snap

@@ -1905,12 +1905,10 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
       </h4>
       <div
         class="ant-row"
-        role="row"
         style="margin-left:-4px;margin-right:-4px"
       >
         <div
           class="ant-col"
-          role="cell"
           style="padding-left:4px;padding-right:4px"
         >
           <div
@@ -1959,7 +1957,6 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
         </div>
         <div
           class="ant-col"
-          role="cell"
           style="padding-left:4px;padding-right:4px"
         >
           <div
@@ -2024,7 +2021,6 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
         </div>
         <div
           class="ant-col"
-          role="cell"
           style="padding-left:4px;padding-right:4px"
         >
           <div

components/calendar/demo/basic.md

@@ -13,12 +13,19 @@ title:
 
 A basic calendar component with Year/Month switch.
 
-```jsx
+```tsx
 import { Calendar } from 'antd';
+import type { CalendarMode } from 'antd/lib/calendar/generateCalendar';
+import type { Moment } from 'moment';
+import React from 'react';
 
-function onPanelChange(value, mode) {
+const App: React.FC = () => {
+  const onPanelChange = (value: Moment, mode: CalendarMode) => {
     console.log(value.format('YYYY-MM-DD'), mode);
-}
+  };
 
-export default () => <Calendar onPanelChange={onPanelChange} />;
+  return <Calendar onPanelChange={onPanelChange} />;
+};
+
+export default App;
 ```

components/calendar/demo/card.md

@@ -13,18 +13,25 @@ title:
 
 Nested inside a container element for rendering in limited space.
 
-```jsx
+```tsx
 import { Calendar } from 'antd';
+import type { CalendarMode } from 'antd/lib/calendar/generateCalendar';
+import type { Moment } from 'moment';
+import React from 'react';
 
-function onPanelChange(value, mode) {
+const App: React.FC = () => {
-  console.log(value, mode);
+  const onPanelChange = (value: Moment, mode: CalendarMode) => {
-}
+    console.log(value.format('YYYY-MM-DD'), mode);
+  };
 
-export default () => (
+  return (
     <div className="site-calendar-demo-card">
       <Calendar fullscreen={false} onPanelChange={onPanelChange} />
     </div>
-);
+  );
+};
+
+export default App;
 ```
 
 ```css

components/calendar/demo/customize-header.md

@@ -13,15 +13,18 @@ title:
 
 Customize Calendar header content.
 
-```jsx
+```tsx
-import { Calendar, Select, Radio, Col, Row, Typography } from 'antd';
+import { Calendar, Col, Radio, Row, Select, Typography } from 'antd';
+import type { CalendarMode } from 'antd/lib/calendar/generateCalendar';
 import 'dayjs/locale/zh-cn';
+import React from 'react';
 
-function onPanelChange(value, mode) {
+const App: React.FC = () => {
-  console.log(value, mode);
+  const onPanelChange = (value: Moment, mode: CalendarMode) => {
-}
+    console.log(value.format('YYYY-MM-DD'), mode);
+  };
 
-export default () => (
+  return (
     <div className="site-calendar-customize-header-wrapper">
       <Calendar
         fullscreen={false}
@@ -61,7 +64,11 @@ export default () => (
               <Typography.Title level={4}>Custom header</Typography.Title>
               <Row gutter={8}>
                 <Col>
-                <Radio.Group size="small" onChange={e => onTypeChange(e.target.value)} value={type}>
+                  <Radio.Group
+                    size="small"
+                    onChange={e => onTypeChange(e.target.value)}
+                    value={type}
+                  >
                     <Radio.Button value="month">Month</Radio.Button>
                     <Radio.Button value="year">Year</Radio.Button>
                   </Radio.Group>
@@ -72,7 +79,7 @@ export default () => (
                     dropdownMatchSelectWidth={false}
                     className="my-year-select"
                     onChange={newYear => {
-                    const now = value.clone().year(newYear);
+                      const now = value.clone().year(Number(newYear));
                       onChange(now);
                     }}
                     value={String(year)}
@@ -101,7 +108,10 @@ export default () => (
         onPanelChange={onPanelChange}
       />
     </div>
-);
+  );
+};
+
+export default App;
 ```
 
 ```css

components/calendar/demo/notice-calendar.md

@@ -13,10 +13,13 @@ title:
 
 This component can be rendered by using `dateCellRender` and `monthCellRender` with the data you need.
 
-```jsx
+```tsx
-import { Calendar, Badge } from 'antd';
+import type { BadgeProps } from 'antd';
+import { Badge, Calendar } from 'antd';
+import type { Moment } from 'moment';
+import React from 'react';
 
-function getListData(value) {
+const getListData = (value: Moment) => {
   let listData;
   switch (value.date()) {
     case 8:
@@ -45,28 +48,16 @@ function getListData(value) {
     default:
   }
   return listData || [];
-}
+};
 
-function dateCellRender(value) {
+const getMonthData = (value: Moment) => {
-  const listData = getListData(value);
-  return (
-    <ul className="events">
-      {listData.map(item => (
-        <li key={item.content}>
-          <Badge status={item.type} text={item.content} />
-        </li>
-      ))}
-    </ul>
-  );
-}
-
-function getMonthData(value) {
   if (value.month() === 8) {
     return 1394;
   }
-}
+};
 
-function monthCellRender(value) {
+const App: React.FC = () => {
+  const monthCellRender = (value: Moment) => {
     const num = getMonthData(value);
     return num ? (
       <div className="notes-month">
@@ -74,9 +65,25 @@ function monthCellRender(value) {
         <span>Backlog number</span>
       </div>
     ) : null;
-}
+  };
 
-export default () => <Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />;
+  const dateCellRender = (value: Moment) => {
+    const listData = getListData(value);
+    return (
+      <ul className="events">
+        {listData.map(item => (
+          <li key={item.content}>
+            <Badge status={item.type as BadgeProps['status']} text={item.content} />
+          </li>
+        ))}
+      </ul>
+    );
+  };
+
+  return <Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />;
+};
+
+export default App;
 ```
 
 ```css

components/calendar/demo/select.md

@@ -13,40 +13,31 @@ title:
 
 A basic calendar component with Year/Month switch.
 
-```jsx
+```tsx
-import React, { useState } from 'react';
+import { Alert, Calendar } from 'antd';
-import { Calendar, Alert } from 'antd';
 import dayjs from 'dayjs';
+import React, { useState } from 'react';
 
-export default () => {
+const App: React.FC = () => {
-  const [calendar, setCalendar] = useState({
+  const [value, setValue] = useState(dayjs('2017-01-25'));
-    value: dayjs('2017-01-25'),
+  const [selectedValue, setSelectedValue] = useState(dayjs('2017-01-25'));
-    selectedValue: dayjs('2017-01-25'),
-  });
 
-  const onSelect = value => {
+  const onSelect = (newValue: Moment) => {
-    setCalendar({
+    setValue(newValue);
-      value,
+    setSelectedValue(newValue);
-      selectedValue: value,
-    });
   };
 
-  const onPanelChange = value => {
+  const onPanelChange = (newValue: Moment) => {
-    setCalendar({
+    setValue(newValue);
-      ...calendar,
-      value,
-    });
   };
 
   return (
     <>
-      <Alert
+      <Alert message={`You selected date: ${selectedValue?.format('YYYY-MM-DD')}`} />
-        message={`You selected date: ${
+      <Calendar value={value} onSelect={onSelect} onPanelChange={onPanelChange} />
-          calendar.selectedValue && calendar.selectedValue.format('YYYY-MM-DD')
-        }`}
-      />
-      <Calendar value={calendar.value} onSelect={onSelect} onPanelChange={onPanelChange} />
     </>
   );
 };
+
+export default App;
 ```

components/card/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -233,12 +233,10 @@ exports[`renders ./components/card/demo/in-column.md extend context correctly 1`
 >
   <div
     class="ant-row"
-    role="row"
     style="margin-left:-8px;margin-right:-8px"
   >
     <div
       class="ant-col ant-col-8"
-      role="cell"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -266,7 +264,6 @@ exports[`renders ./components/card/demo/in-column.md extend context correctly 1`
     </div>
     <div
       class="ant-col ant-col-8"
-      role="cell"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -294,7 +291,6 @@ exports[`renders ./components/card/demo/in-column.md extend context correctly 1`
     </div>
     <div
       class="ant-col ant-col-8"
-      role="cell"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -437,10 +433,111 @@ Array [
         class="ant-skeleton ant-skeleton-active"
       >
         <div
+<<<<<<< HEAD
           class="ant-skeleton-content"
         >
           <ul
             class="ant-skeleton-paragraph"
+=======
+          class="ant-row"
+          style="margin-left:-4px;margin-right:-4px"
+        >
+          <div
+            class="ant-col ant-col-22"
+            style="padding-left:4px;padding-right:4px"
+          >
+            <div
+              class="ant-card-loading-block"
+            />
+          </div>
+        </div>
+        <div
+          class="ant-row"
+          style="margin-left:-4px;margin-right:-4px"
+        >
+          <div
+            class="ant-col ant-col-8"
+            style="padding-left:4px;padding-right:4px"
+          >
+            <div
+              class="ant-card-loading-block"
+            />
+          </div>
+          <div
+            class="ant-col ant-col-15"
+            style="padding-left:4px;padding-right:4px"
+          >
+            <div
+              class="ant-card-loading-block"
+            />
+          </div>
+        </div>
+        <div
+          class="ant-row"
+          style="margin-left:-4px;margin-right:-4px"
+        >
+          <div
+            class="ant-col ant-col-6"
+            style="padding-left:4px;padding-right:4px"
+          >
+            <div
+              class="ant-card-loading-block"
+            />
+          </div>
+          <div
+            class="ant-col ant-col-18"
+            style="padding-left:4px;padding-right:4px"
+          >
+            <div
+              class="ant-card-loading-block"
+            />
+          </div>
+        </div>
+        <div
+          class="ant-row"
+          style="margin-left:-4px;margin-right:-4px"
+        >
+          <div
+            class="ant-col ant-col-13"
+            style="padding-left:4px;padding-right:4px"
+          >
+            <div
+              class="ant-card-loading-block"
+            />
+          </div>
+          <div
+            class="ant-col ant-col-9"
+            style="padding-left:4px;padding-right:4px"
+          >
+            <div
+              class="ant-card-loading-block"
+            />
+          </div>
+        </div>
+        <div
+          class="ant-row"
+          style="margin-left:-4px;margin-right:-4px"
+        >
+          <div
+            class="ant-col ant-col-4"
+            style="padding-left:4px;padding-right:4px"
+          >
+            <div
+              class="ant-card-loading-block"
+            />
+          </div>
+          <div
+            class="ant-col ant-col-3"
+            style="padding-left:4px;padding-right:4px"
+          >
+            <div
+              class="ant-card-loading-block"
+            />
+          </div>
+          <div
+            class="ant-col ant-col-16"
+            style="padding-left:4px;padding-right:4px"
+>>>>>>> origin/master
           >
             <li />
             <li />

components/card/__tests__/__snapshots__/demo.test.js.snap

@@ -233,12 +233,10 @@ exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
 >
   <div
     class="ant-row"
-    role="row"
     style="margin-left:-8px;margin-right:-8px"
   >
     <div
       class="ant-col ant-col-8"
-      role="cell"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -266,7 +264,6 @@ exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
     </div>
     <div
       class="ant-col ant-col-8"
-      role="cell"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -294,7 +291,6 @@ exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
     </div>
     <div
       class="ant-col ant-col-8"
-      role="cell"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -437,10 +433,111 @@ Array [
         class="ant-skeleton ant-skeleton-active"
       >
         <div
+<<<<<<< HEAD
           class="ant-skeleton-content"
         >
           <ul
             class="ant-skeleton-paragraph"
+=======
+          class="ant-row"
+          style="margin-left:-4px;margin-right:-4px"
+        >
+          <div
+            class="ant-col ant-col-22"
+            style="padding-left:4px;padding-right:4px"
+          >
+            <div
+              class="ant-card-loading-block"
+            />
+          </div>
+        </div>
+        <div
+          class="ant-row"
+          style="margin-left:-4px;margin-right:-4px"
+        >
+          <div
+            class="ant-col ant-col-8"
+            style="padding-left:4px;padding-right:4px"
+          >
+            <div
+              class="ant-card-loading-block"
+            />
+          </div>
+          <div
+            class="ant-col ant-col-15"
+            style="padding-left:4px;padding-right:4px"
+          >
+            <div
+              class="ant-card-loading-block"
+            />
+          </div>
+        </div>
+        <div
+          class="ant-row"
+          style="margin-left:-4px;margin-right:-4px"
+        >
+          <div
+            class="ant-col ant-col-6"
+            style="padding-left:4px;padding-right:4px"
+          >
+            <div
+              class="ant-card-loading-block"
+            />
+          </div>
+          <div
+            class="ant-col ant-col-18"
+            style="padding-left:4px;padding-right:4px"
+          >
+            <div
+              class="ant-card-loading-block"
+            />
+          </div>
+        </div>
+        <div
+          class="ant-row"
+          style="margin-left:-4px;margin-right:-4px"
+        >
+          <div
+            class="ant-col ant-col-13"
+            style="padding-left:4px;padding-right:4px"
+          >
+            <div
+              class="ant-card-loading-block"
+            />
+          </div>
+          <div
+            class="ant-col ant-col-9"
+            style="padding-left:4px;padding-right:4px"
+          >
+            <div
+              class="ant-card-loading-block"
+            />
+          </div>
+        </div>
+        <div
+          class="ant-row"
+          style="margin-left:-4px;margin-right:-4px"
+        >
+          <div
+            class="ant-col ant-col-4"
+            style="padding-left:4px;padding-right:4px"
+          >
+            <div
+              class="ant-card-loading-block"
+            />
+          </div>
+          <div
+            class="ant-col ant-col-3"
+            style="padding-left:4px;padding-right:4px"
+          >
+            <div
+              class="ant-card-loading-block"
+            />
+          </div>
+          <div
+            class="ant-col ant-col-16"
+            style="padding-left:4px;padding-right:4px"
+>>>>>>> origin/master
           >
             <li />
             <li />

components/card/__tests__/__snapshots__/index.test.js.snap

@@ -22,10 +22,19 @@ exports[`Card should still have padding when card which set padding to 0 is load
       class="ant-skeleton ant-skeleton-active"
     >
       <div
+<<<<<<< HEAD
         class="ant-skeleton-content"
       >
         <ul
           class="ant-skeleton-paragraph"
+=======
+        class="ant-row"
+        style="margin-left: -4px; margin-right: -4px;"
+      >
+        <div
+          class="ant-col ant-col-22"
+          style="padding-left: 4px; padding-right: 4px;"
+>>>>>>> origin/master
         >
           <li />
           <li />
@@ -33,7 +42,103 @@ exports[`Card should still have padding when card which set padding to 0 is load
           <li
             style="width: 61%;"
           />
+<<<<<<< HEAD
         </ul>
+=======
+        </div>
+      </div>
+      <div
+        class="ant-row"
+        style="margin-left: -4px; margin-right: -4px;"
+      >
+        <div
+          class="ant-col ant-col-8"
+          style="padding-left: 4px; padding-right: 4px;"
+        >
+          <div
+            class="ant-card-loading-block"
+          />
+        </div>
+        <div
+          class="ant-col ant-col-15"
+          style="padding-left: 4px; padding-right: 4px;"
+        >
+          <div
+            class="ant-card-loading-block"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-row"
+        style="margin-left: -4px; margin-right: -4px;"
+      >
+        <div
+          class="ant-col ant-col-6"
+          style="padding-left: 4px; padding-right: 4px;"
+        >
+          <div
+            class="ant-card-loading-block"
+          />
+        </div>
+        <div
+          class="ant-col ant-col-18"
+          style="padding-left: 4px; padding-right: 4px;"
+        >
+          <div
+            class="ant-card-loading-block"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-row"
+        style="margin-left: -4px; margin-right: -4px;"
+      >
+        <div
+          class="ant-col ant-col-13"
+          style="padding-left: 4px; padding-right: 4px;"
+        >
+          <div
+            class="ant-card-loading-block"
+          />
+        </div>
+        <div
+          class="ant-col ant-col-9"
+          style="padding-left: 4px; padding-right: 4px;"
+        >
+          <div
+            class="ant-card-loading-block"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-row"
+        style="margin-left: -4px; margin-right: -4px;"
+      >
+        <div
+          class="ant-col ant-col-4"
+          style="padding-left: 4px; padding-right: 4px;"
+        >
+          <div
+            class="ant-card-loading-block"
+          />
+        </div>
+        <div
+          class="ant-col ant-col-3"
+          style="padding-left: 4px; padding-right: 4px;"
+        >
+          <div
+            class="ant-card-loading-block"
+          />
+        </div>
+        <div
+          class="ant-col ant-col-16"
+          style="padding-left: 4px; padding-right: 4px;"
+        >
+          <div
+            class="ant-card-loading-block"
+          />
+        </div>
+>>>>>>> origin/master
       </div>
     </div>
   </div>

components/card/demo/basic.md

@@ -13,10 +13,11 @@ title:
 
 A basic card containing a title, content and an extra corner content. Supports two sizes: `default` and `small`.
 
-```jsx
+```tsx
 import { Card } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Card title="Default size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
       <p>Card content</p>
@@ -30,6 +31,8 @@ export default () => (
     </Card>
   </>
 );
+
+export default App;
 ```
 
 <style>

components/card/demo/border-less.md

@@ -13,10 +13,11 @@ title:
 
 A borderless card on a gray background.
 
-```jsx
+```tsx
 import { Card } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <div className="site-card-border-less-wrapper">
     <Card title="Card title" bordered={false} style={{ width: 300 }}>
       <p>Card content</p>
@@ -25,6 +26,8 @@ export default () => (
     </Card>
   </div>
 );
+
+export default App;
 ```
 
 ```css

components/card/demo/flexible-content.md

@@ -13,12 +13,13 @@ title:
 
 You can use `Card.Meta` to support more flexible content.
 
-```jsx
+```tsx
 import { Card } from 'antd';
+import React from 'react';
 
 const { Meta } = Card;
 
-export default () => (
+const App: React.FC = () => (
   <Card
     hoverable
     style={{ width: 240 }}
@@ -27,4 +28,6 @@ export default () => (
     <Meta title="Europe Street beat" description="www.instagram.com" />
   </Card>
 );
+
+export default App;
 ```

components/card/demo/grid-card.md

@@ -13,15 +13,16 @@ title:
 
 Grid style card content.
 
-```jsx
+```tsx
 import { Card } from 'antd';
+import React from 'react';
 
-const gridStyle = {
+const gridStyle: React.CSSProperties = {
   width: '25%',
   textAlign: 'center',
 };
 
-export default () => (
+const App: React.FC = () => (
   <Card title="Card Title">
     <Card.Grid style={gridStyle}>Content</Card.Grid>
     <Card.Grid hoverable={false} style={gridStyle}>
@@ -34,4 +35,6 @@ export default () => (
     <Card.Grid style={gridStyle}>Content</Card.Grid>
   </Card>
 );
+
+export default App;
 ```

components/card/demo/in-column.md

@@ -13,10 +13,11 @@ title:
 
 Cards usually cooperate with grid column layout in overview page.
 
-```jsx
+```tsx
 import { Card, Col, Row } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <div className="site-card-wrapper">
     <Row gutter={16}>
       <Col span={8}>
@@ -37,6 +38,8 @@ export default () => (
     </Row>
   </div>
 );
+
+export default App;
 ```
 
 <style>

components/card/demo/inner.md

@@ -13,10 +13,11 @@ title:
 
 It can be placed inside the ordinary card to display the information of the multilevel structure.
 
-```jsx
+```tsx
 import { Card } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <Card title="Card title">
     <Card type="inner" title="Inner Card title" extra={<a href="#">More</a>}>
       Inner Card content
@@ -31,4 +32,6 @@ export default () => (
     </Card>
   </Card>
 );
+
+export default App;
 ```

components/card/demo/loading.md

@@ -13,17 +13,17 @@ title:
 
 Shows a loading indicator while the contents of the card is being fetched.
 
-```jsx
+```tsx
-import React, { useState } from 'react';
-import { Skeleton, Switch, Card, Avatar } from 'antd';
 import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
+import { Avatar, Card, Skeleton, Switch } from 'antd';
+import React, { useState } from 'react';
 
 const { Meta } = Card;
 
-export default () => {
+const App: React.FC = () => {
   const [loading, setLoading] = useState(true);
 
-  const onChange = checked => {
+  const onChange = (checked: boolean) => {
     setLoading(!checked);
   };
 
@@ -58,4 +58,6 @@ export default () => {
     </>
   );
 };
+
+export default App;
 ```

components/card/demo/meta.md

@@ -13,13 +13,14 @@ title:
 
 A Card that supports `cover`, `avatar`, `title` and `description`.
 
-```jsx
+```tsx
-import { Card, Avatar } from 'antd';
 import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
+import { Avatar, Card } from 'antd';
+import React from 'react';
 
 const { Meta } = Card;
 
-export default () => (
+const App: React.FC = () => (
   <Card
     style={{ width: 300 }}
     cover={
@@ -41,4 +42,6 @@ export default () => (
     />
   </Card>
 );
+
+export default App;
 ```

components/card/demo/simple.md

@@ -13,14 +13,17 @@ title:
 
 A simple card only containing a content area.
 
-```jsx
+```tsx
 import { Card } from 'antd';
+import React from 'react';
 
-export default () => (
+const App: React.FC = () => (
   <Card style={{ width: 300 }}>
     <p>Card content</p>
     <p>Card content</p>
     <p>Card content</p>
   </Card>
 );
+
+export default App;
 ```

components/card/demo/tabs.md

@@ -13,9 +13,9 @@ title:
 
 More content can be hosted.
 
-```jsx
+```tsx
-import React, { useState } from 'react';
 import { Card } from 'antd';
+import React, { useState } from 'react';
 
 const tabList = [
   {
@@ -28,7 +28,7 @@ const tabList = [
   },
 ];
 
-const contentList = {
+const contentList: Record<string, React.ReactNode> = {
   tab1: <p>content1</p>,
   tab2: <p>content2</p>,
 };
@@ -48,20 +48,20 @@ const tabListNoTitle = [
   },
 ];
 
-const contentListNoTitle = {
+const contentListNoTitle: Record<string, React.ReactNode> = {
   article: <p>article content</p>,
   app: <p>app content</p>,
   project: <p>project content</p>,
 };
 
-const TabsCard = () => {
+const App: React.FC = () => {
-  const [activeTabKey1, setActiveTabKey1] = useState('tab1');
+  const [activeTabKey1, setActiveTabKey1] = useState<string>('tab1');
-  const [activeTabKey2, setActiveTabKey2] = useState('app');
+  const [activeTabKey2, setActiveTabKey2] = useState<string>('app');
 
-  const onTab1Change = key => {
+  const onTab1Change = (key: string) => {
     setActiveTabKey1(key);
   };
-  const onTab2Change = key => {
+  const onTab2Change = (key: string) => {
     setActiveTabKey2(key);
   };
 
@@ -96,5 +96,5 @@ const TabsCard = () => {
   );
 };
 
-export default () => <TabsCard />;
+export default App;
 ```

components/carousel/demo/autoplay.md

@@ -13,10 +13,11 @@ title:
 
 Timing of scrolling to the next card/picture.
 
-```jsx
+```tsx
 import { Carousel } from 'antd';
+import React from 'react';
 
-const contentStyle = {
+const contentStyle: React.CSSProperties = {
   height: '160px',
   color: '#fff',
   lineHeight: '160px',
@@ -24,7 +25,7 @@ const contentStyle = {
   background: '#364d79',
 };
 
-export default () => (
+const App: React.FC = () => (
   <Carousel autoplay>
     <div>
       <h3 style={contentStyle}>1</h3>
@@ -40,4 +41,6 @@ export default () => (
     </div>
   </Carousel>
 );
+
+export default App;
 ```

components/carousel/demo/basic.md

@@ -13,14 +13,11 @@ title:
 
 Basic usage.
 
-```jsx
+```tsx
 import { Carousel } from 'antd';
+import React from 'react';
 
-function onChange(a, b, c) {
+const contentStyle: React.CSSProperties = {
-  console.log(a, b, c);
-}
-
-const contentStyle = {
   height: '160px',
   color: '#fff',
   lineHeight: '160px',
@@ -28,7 +25,12 @@ const contentStyle = {
   background: '#364d79',
 };
 
-export default () => (
+const App: React.FC = () => {
+  const onChange = (currentSlide: number) => {
+    console.log(currentSlide);
+  };
+
+  return (
     <Carousel afterChange={onChange}>
       <div>
         <h3 style={contentStyle}>1</h3>
@@ -43,5 +45,8 @@ export default () => (
         <h3 style={contentStyle}>4</h3>
       </div>
     </Carousel>
-);
+  );
+};
+
+export default App;
 ```

components/carousel/demo/fade.md

@@ -13,10 +13,11 @@ title:
 
 Slides use fade for transition.
 
-```jsx
+```tsx
 import { Carousel } from 'antd';
+import React from 'react';
 
-const contentStyle = {
+const contentStyle: React.CSSProperties = {
   height: '160px',
   color: '#fff',
   lineHeight: '160px',
@@ -24,7 +25,7 @@ const contentStyle = {
   background: '#364d79',
 };
 
-export default () => (
+const App: React.FC = () => (
   <Carousel effect="fade">
     <div>
       <h3 style={contentStyle}>1</h3>
@@ -40,4 +41,6 @@ export default () => (
     </div>
   </Carousel>
 );
+
+export default App;
 ```

components/carousel/demo/position.md

@@ -13,10 +13,13 @@ title:
 
 There are 4 position options available.
 
-```jsx
+```tsx
+import type { RadioChangeEvent } from 'antd';
 import { Carousel, Radio } from 'antd';
+import type { DotPosition } from 'antd/lib/carousel';
+import React, { useState } from 'react';
 
-const contentStyle = {
+const contentStyle: React.CSSProperties = {
   height: '160px',
   color: '#fff',
   lineHeight: '160px',
@@ -24,10 +27,10 @@ const contentStyle = {
   background: '#364d79',
 };
 
-const PositionCarouselDemo = () => {
+const App: React.FC = () => {
-  const [dotPosition, setDotPosition] = React.useState('top');
+  const [dotPosition, setDotPosition] = useState<DotPosition>('top');
 
-  const handlePositionChange = ({ target: { value } }) => {
+  const handlePositionChange = ({ target: { value } }: RadioChangeEvent) => {
     setDotPosition(value);
   };
 
@@ -57,5 +60,5 @@ const PositionCarouselDemo = () => {
   );
 };
 
-export default () => <PositionCarouselDemo />;
+export default App;
 ```

components/cascader/demo/basic.md

@@ -13,10 +13,17 @@ title:
 
 Cascade selection box for selecting province/city/district.
 
-```jsx
+```tsx
 import { Cascader } from 'antd';
+import React from 'react';
 
-const options = [
+interface Option {
+  value: string | number;
+  label: string;
+  children?: Option[];
+}
+
+const options: Option[] = [
   {
     value: 'zhejiang',
     label: 'Zhejiang',
@@ -51,9 +58,13 @@ const options = [
   },
 ];
 
-function onChange(value) {
+const onChange = (value: string[]) => {
   console.log(value);
-}
+};
 
-export default () => <Cascader options={options} onChange={onChange} placeholder="Please select" />;
+const App: React.FC = () => (
+  <Cascader options={options} onChange={onChange} placeholder="Please select" />
+);
+
+export default App;
 ```