Merge branch 'feature' into master-merge-feature

.github/workflows/test.yml

@@ -138,7 +138,7 @@ jobs:
           key: dist-${{ github.sha }}
 
       - name: dist
-        run: npm run dist
+        run: CI=1 npm run dist
         env:
           NODE_OPTIONS: --max_old_space_size=4096
     needs: setup
@@ -236,6 +236,7 @@ jobs:
       matrix:
         react: ['16', '17', '18']
         module: ['dom', 'node', 'dist']
+        shard: ['1/4', '2/4', '3/4', '4/4']
     env:
       REACT: ${{ matrix.react }}
     runs-on: ubuntu-latest
@@ -288,12 +289,11 @@ jobs:
       # dom test
       - name: dom test
         if: ${{ matrix.module == 'dom' }}
-        run: npm test -- -w 1 --coverage
+        run: npm test -- --maxWorkers=2 --shard=${{matrix.shard}} --coverage
 
-      # > 17 only
       - name: coverage
+        uses: codecov/codecov-action@v3
         if: ${{ matrix.module == 'dom' && matrix.react == '17' }}
-        run: bash <(curl -s https://codecov.io/bash)
 
       # node test
       - name: node test
@@ -353,6 +353,7 @@ jobs:
       matrix:
         react: ['16', '17', '18']
         module: [lib, es]
+        shard: ['1/4', '2/4', '3/4', '4/4']
     env:
       REACT: ${{ matrix.react }}
     steps:
@@ -400,7 +401,7 @@ jobs:
       - name: test
         # lib only run in master branch not in pull request
         if: ${{ github.event_name != 'pull_request' || matrix.module != 'lib' }}
-        run: npm test
+        run: npm test -- --maxWorkers=2 --shard=${{matrix.shard}}
         env:
           LIB_DIR: ${{ matrix.module }}
     needs: compile

components/affix/demo/basic.md

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

components/affix/demo/debug.md

@@ -15,8 +15,8 @@ DEBUG
 DEBUG
 
 ```tsx
-import React, { useState } from 'react';
 import { Affix, Button } from 'antd';
+import React, { useState } from 'react';
 
 const App: React.FC = () => {
   const [top, setTop] = useState(10);

components/affix/demo/on-change.md

@@ -14,8 +14,8 @@ title:
 Callback with affixed state.
 
 ```tsx
-import React from 'react';
 import { Affix, Button } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
   <Affix offsetTop={120} onChange={affixed => console.log(affixed)}>

components/affix/demo/target.md

@@ -14,8 +14,8 @@ 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 App: React.FC = () => {
   const [container, setContainer] = useState<HTMLDivElement | null>(null);

components/alert/demo/action.md

@@ -14,8 +14,8 @@ title:
 Custom action.
 
 ```tsx
-import React from 'react';
 import { Alert, Button, Space } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
   <>

components/alert/demo/banner.md

@@ -15,8 +15,8 @@ title:
 Display Alert as a banner at top of page.
 
 ```tsx
-import React from 'react';
 import { Alert } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
   <>

components/alert/demo/basic.md

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

components/alert/demo/closable.md

@@ -14,8 +14,8 @@ title:
 To show close button.
 
 ```tsx
-import React from 'react';
 import { Alert } from 'antd';
+import React from 'react';
 
 const onClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
   console.log(e, 'I was closed.');

components/alert/demo/close-text.md

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

components/alert/demo/custom-icon.md

@@ -15,9 +15,9 @@ title:
 A relevant icon makes information clearer and more friendly.
 
 ```tsx
-import React from 'react';
-import { Alert } from 'antd';
 import { SmileOutlined } from '@ant-design/icons';
+import { Alert } from 'antd';
+import React from 'react';
 
 const icon = <SmileOutlined />;
 

components/alert/demo/description.md

@@ -14,8 +14,8 @@ title:
 Additional description for alert message.
 
 ```tsx
-import React from 'react';
 import { Alert } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
   <>

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 = () => {

components/alert/demo/icon.md

@@ -14,8 +14,8 @@ title:
 A relevant icon will make information clearer and more friendly.
 
 ```tsx
-import React from 'react';
 import { Alert } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
   <>

components/alert/demo/loop-banner.md

@@ -14,10 +14,10 @@ title:
 Show a loop banner by using with [react-text-loop-next](https://npmjs.com/package/react-text-loop-next) or [react-fast-marquee](https://npmjs.com/package/react-fast-marquee).
 
 ```tsx
-import React from 'react';
 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';
 
 const App: React.FC = () => (
   <>

components/alert/demo/smooth-closed.md

@@ -14,8 +14,8 @@ 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);

components/alert/demo/style.md

@@ -14,8 +14,8 @@ title:
 There are 4 types of Alert: `success`, `info`, `warning`, `error`.
 
 ```tsx
-import React from 'react';
 import { Alert } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
   <>

components/anchor/demo/basic.md

@@ -14,8 +14,8 @@ title:
 The simplest usage.
 
 ```tsx
-import React from 'react';
 import { Anchor } from 'antd';
+import React from 'react';
 
 const { Link } = Anchor;
 

components/anchor/demo/customizeHighlight.md

@@ -14,8 +14,8 @@ title:
 Customize the anchor highlight.
 
 ```tsx
-import React from 'react';
 import { Anchor } from 'antd';
+import React from 'react';
 
 const { Link } = Anchor;
 

components/anchor/demo/onChange.md

@@ -14,8 +14,8 @@ title:
 Listening for anchor link change.
 
 ```tsx
-import React from 'react';
 import { Anchor } from 'antd';
+import React from 'react';
 
 const { Link } = Anchor;
 

components/anchor/demo/onClick.md

@@ -14,8 +14,8 @@ title:
 Clicking on an anchor does not record history.
 
 ```tsx
-import React from 'react';
 import { Anchor } from 'antd';
+import React from 'react';
 
 const { Link } = Anchor;
 

components/anchor/demo/static.md

@@ -14,8 +14,8 @@ title:
 Do not change state when page is scrolling.
 
 ```tsx
-import React from 'react';
 import { Anchor } from 'antd';
+import React from 'react';
 
 const { Link } = Anchor;
 

components/anchor/demo/targetOffset.md

@@ -14,8 +14,8 @@ 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;
 

components/auto-complete/demo/basic.md

@@ -14,8 +14,8 @@ 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 = 1) => ({
   value: str.repeat(repeat),

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

@@ -14,9 +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 React from 'react';
-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>

components/auto-complete/demo/custom.md

@@ -14,8 +14,8 @@ title:
 Customize Input Component
 
 ```tsx
-import React, { useState } from 'react';
 import { AutoComplete, Input } from 'antd';
+import React, { useState } from 'react';
 
 const { TextArea } = Input;
 

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

@@ -7,9 +7,9 @@ debug: true
 ---
 
 ```tsx
-import React from 'react';
-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: {

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

@@ -14,8 +14,8 @@ title:
 A non-case-sensitive AutoComplete
 
 ```tsx
-import React from 'react';
 import { AutoComplete } from 'antd';
+import React from 'react';
 
 const options = [
   { value: 'Burns Bay Road' },

components/auto-complete/demo/options.md

@@ -14,8 +14,8 @@ 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;
 

components/auto-complete/demo/status.md

@@ -15,8 +15,8 @@ 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 = 1) => ({
   value: str.repeat(repeat),

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

@@ -14,9 +14,9 @@ title:
 Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns).
 
 ```tsx
-import React, { useState } from 'react';
-import { Input, AutoComplete } from 'antd';
+import { AutoComplete, Input } from 'antd';
 import type { SelectProps } from 'antd/es/select';
+import React, { useState } from 'react';
 
 const getRandomInt = (max: number, min = 0) => Math.floor(Math.random() * (max - min + 1)) + min;
 

components/avatar/demo/badge.md

@@ -14,9 +14,9 @@ title:
 Usually used for reminders and notifications.
 
 ```tsx
-import React from 'react';
-import { Avatar, Badge } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
+import { Avatar, Badge } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
   <>

components/avatar/demo/basic.md

@@ -14,9 +14,9 @@ title:
 Three sizes and two shapes are available.
 
 ```tsx
-import React from 'react';
-import { Avatar } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
+import { Avatar } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
   <>

components/avatar/demo/dynamic.md

@@ -14,8 +14,8 @@ 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'];

components/avatar/demo/fallback.md

@@ -15,8 +15,8 @@ debug: true
 图片不存在时，如果 `src` 本身是个 ReactElement，会尝试回退到 `src`，否则尝试回退到 `icon`，最后回退到显示 `children`。
 
 ```tsx
-import React from 'react';
 import { Avatar } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
   <>

components/avatar/demo/group.md

@@ -14,9 +14,9 @@ title:
 Avatar group display.
 
 ```tsx
-import React from 'react';
+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 App: React.FC = () => (
   <>

components/avatar/demo/responsive.md

@@ -14,9 +14,9 @@ title:
 Avatar size can be automatically adjusted based on the screen size.
 
 ```tsx
-import React from 'react';
-import { Avatar } from 'antd';
 import { AntDesignOutlined } from '@ant-design/icons';
+import { Avatar } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
   <Avatar

components/avatar/demo/toggle-debug.md

@@ -15,8 +15,8 @@ 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;
 

components/avatar/demo/type.md

@@ -14,9 +14,9 @@ title:
 Image, Icon and letter are supported, and the latter two kinds of avatar can have custom colors and background colors.
 
 ```tsx
-import React from 'react';
-import { Avatar, Image } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
+import { Avatar, Image } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
   <>

components/back-top/demo/basic.md

@@ -14,8 +14,8 @@ title:
 The most basic usage.
 
 ```tsx
-import React from 'react';
 import { BackTop } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
   <>

components/back-top/demo/custom.md

@@ -19,8 +19,8 @@ You can customize the style of the button, just note the size limit: no more tha
 > Note: `BackTop` expects a element could accept `onClick` propety as children. If you put a text directly as children the component will not function properly.
 
 ```tsx
-import React from 'react';
 import { BackTop } from 'antd';
+import React from 'react';
 
 const style: React.CSSProperties = {
   height: 40,

components/badge/demo/basic.md

@@ -14,9 +14,9 @@ title:
 Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZero` to show it.
 
 ```tsx
-import React from 'react';
-import { Badge, Avatar } from 'antd';
 import { ClockCircleOutlined } from '@ant-design/icons';
+import { Avatar, Badge } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
   <>

components/badge/demo/change.md

@@ -14,9 +14,9 @@ title:
 The count will be animated as it changes.
 
 ```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;
 

components/badge/demo/colorful.md

@@ -14,8 +14,8 @@ 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.
 
 ```tsx
-import React from 'react';
 import { Badge, Divider } from 'antd';
+import React from 'react';
 
 const colors = [
   'pink',

components/badge/demo/dot.md

@@ -14,9 +14,9 @@ title:
 This will simply display a red badge, without a specific count. If count equals 0, it won't display the dot.
 
 ```tsx
-import React from 'react';
-import { Badge } from 'antd';
 import { NotificationOutlined } from '@ant-design/icons';
+import { Badge } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
   <>

components/badge/demo/link.md

@@ -14,8 +14,8 @@ title:
 The badge can be wrapped with `a` tag to make it linkable.
 
 ```tsx
+import { Avatar, Badge } from 'antd';
 import React from 'react';
-import { Badge, Avatar } from 'antd';
 
 const App: React.FC = () => (
   <a href="#">

components/badge/demo/mix.md

@@ -15,8 +15,8 @@ debug: true
 Using `count/dot` with custom `stauts/color`.
 
 ```tsx
+import { Avatar, Badge } from 'antd';
 import React from 'react';
-import { Badge, Avatar } from 'antd';
 
 const App: React.FC = () => (
   <>

components/badge/demo/no-wrapper.md

@@ -16,9 +16,9 @@ title:
 Used in standalone when children is empty.
 
 ```tsx
-import React, { useState } from 'react';
-import { Badge, Space, Switch } from 'antd';
 import { ClockCircleOutlined } from '@ant-design/icons';
+import { Badge, Space, Switch } from 'antd';
+import React, { useState } from 'react';
 
 const App: React.FC = () => {
   const [show, setShow] = useState(true);

components/badge/demo/offset.md

@@ -14,8 +14,8 @@ 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.
 
 ```tsx
+import { Avatar, Badge } from 'antd';
 import React from 'react';
-import { Badge, Avatar } from 'antd';
 
 const App: React.FC = () => (
   <Badge count={5} offset={[10, 10]}>

components/badge/demo/overflow.md

@@ -14,8 +14,8 @@ title:
 `${overflowCount}+` is displayed when count is larger than `overflowCount`. The default value of `overflowCount` is `99`.
 
 ```tsx
+import { Avatar, Badge } from 'antd';
 import React from 'react';
-import { Badge, Avatar } from 'antd';
 
 const App: React.FC = () => (
   <>

components/badge/demo/ribbbon.md

@@ -14,8 +14,8 @@ title:
 Use ribbon badge.
 
 ```tsx
-import React from 'react';
 import { Badge, Card } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
   <>

components/badge/demo/ribbon-debug.md

@@ -15,8 +15,8 @@ Buggy!
 Buggy!
 
 ```tsx
-import React from 'react';
 import { Badge, Card, Space } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
   <Space direction="vertical" style={{ width: '100%' }}>

components/badge/demo/size.md

@@ -14,8 +14,8 @@ title:
 Set size of numeral Badge.
 
 ```tsx
+import { Avatar, Badge } from 'antd';
 import React from 'react';
-import { Badge, Avatar } from 'antd';
 
 const App: React.FC = () => (
   <>

components/badge/demo/status.md

@@ -14,8 +14,8 @@ title:
 Standalone badge with status.
 
 ```tsx
-import React from 'react';
 import { Badge } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
   <>

components/badge/demo/title.md

@@ -15,8 +15,8 @@ debug: true
 The badge will display `title` when hovered over, instead of `count`.
 
 ```tsx
+import { Avatar, Badge } from 'antd';
 import React from 'react';
-import { Badge, Avatar } from 'antd';
 
 const App: React.FC = () => (
   <>

components/breadcrumb/demo/basic.md

@@ -14,8 +14,8 @@ title:
 The simplest use.
 
 ```tsx
-import React from 'react';
 import { Breadcrumb } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
   <Breadcrumb>

components/breadcrumb/demo/overlay.md

@@ -14,8 +14,8 @@ title:
 Breadcrumbs support drop down menu.
 
 ```tsx
-import React from 'react';
 import { Breadcrumb, Menu } from 'antd';
+import React from 'react';
 
 const menu = (
   <Menu

components/breadcrumb/demo/react-router.md

@@ -16,9 +16,9 @@ title:
 Used together with `react-router@6+`.
 
 ```tsx
+import { Alert, Breadcrumb } from 'antd';
 import React from 'react';
-import { HashRouter, Route, Routes, Link, useLocation } from 'react-router-dom';
-import { Breadcrumb, Alert } from 'antd';
+import { HashRouter, Link, Route, Routes, useLocation } from 'react-router-dom';
 
 const Apps = () => (
   <ul className="app-list">

components/breadcrumb/demo/separator-component.md

@@ -14,8 +14,8 @@ title:
 The separator can be customized by setting the separator property: `Breadcrumb.Separator`.
 
 ```tsx
-import React from 'react';
 import { Breadcrumb } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
   <Breadcrumb separator="">

components/breadcrumb/demo/separator.md

@@ -14,8 +14,8 @@ title:
 The separator can be customized by setting the separator property: `separator=">"`.
 
 ```tsx
-import React from 'react';
 import { Breadcrumb } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
   <Breadcrumb separator=">">

components/breadcrumb/demo/withIcon.md

@@ -14,9 +14,9 @@ title:
 The icon should be placed in front of the text.
 
 ```tsx
-import React from 'react';
-import { Breadcrumb } from 'antd';
 import { HomeOutlined, UserOutlined } from '@ant-design/icons';
+import { Breadcrumb } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
   <Breadcrumb>

components/button/button.tsx

@@ -10,6 +10,7 @@ import { tuple } from '../_util/type';
 import warning from '../_util/warning';
 import type { SizeType } from '../config-provider/SizeContext';
 import SizeContext from '../config-provider/SizeContext';
+import DisabledContext from '../config-provider/DisabledContext';
 import LoadingIcon from './LoadingIcon';
 import { cloneElement } from '../_util/reactNode';
 
@@ -102,6 +103,7 @@ export interface BaseButtonProps {
    */
   shape?: ButtonShape;
   size?: SizeType;
+  disabled?: boolean;
   loading?: boolean | { delay?: number };
   prefixCls?: string;
   className?: string;
@@ -145,6 +147,7 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
     danger,
     shape = 'default',
     size: customizeSize,
+    disabled: customDisabled,
     className,
     children,
     icon,
@@ -157,6 +160,10 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
   } = props;
 
   const size = React.useContext(SizeContext);
+  // ===================== Disabled =====================
+  const disabled = React.useContext(DisabledContext);
+  const mergedDisabled = customDisabled || disabled;
+
   const groupSize = React.useContext(GroupSizeContext);
   const [innerLoading, setLoading] = React.useState<Loading>(!!loading);
   const [hasTwoCNChar, setHasTwoCNChar] = React.useState(false);
@@ -210,9 +217,9 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
   React.useEffect(fixTwoCNChar, [buttonRef]);
 
   const handleClick = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => {
-    const { onClick, disabled } = props;
+    const { onClick } = props;
     // https://github.com/ant-design/ant-design/issues/30207
-    if (innerLoading || disabled) {
+    if (innerLoading || mergedDisabled) {
       e.preventDefault();
       return;
     }
@@ -285,6 +292,7 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
       type={htmlType}
       className={classes}
       onClick={handleClick}
+      disabled={mergedDisabled}
       ref={buttonRef}
     >
       {iconNode}

components/button/demo/basic.md

@@ -14,8 +14,8 @@ title:
 There are `primary` button, `default` button, `dashed` button, `text` button and `link` button in antd.
 
 ```tsx
-import React from 'react';
 import { Button } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
   <>

components/button/demo/block.md

@@ -14,8 +14,8 @@ title:
 `block` property will make the button fit to its parent width.
 
 ```tsx
-import React from 'react';
 import { Button } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
   <>

components/button/demo/danger.md

@@ -14,8 +14,8 @@ title:
 `danger` is a property of button after antd 4.0.
 
 ```tsx
-import React from 'react';
 import { Button } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
   <>

components/button/demo/disabled.md

@@ -14,8 +14,8 @@ title:
 To mark a button as disabled, add the `disabled` property to the `Button`.
 
 ```tsx
-import React from 'react';
 import { Button } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
   <>

components/button/demo/ghost.md

@@ -14,8 +14,8 @@ title:
 `ghost` property will make button's background transparent, it is commonly used in colored background.
 
 ```tsx
-import React from 'react';
 import { Button } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
   <div className="site-button-ghost-wrapper">

components/button/demo/icon.md

@@ -18,9 +18,9 @@ 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.
 
 ```tsx
-import React from 'react';
-import { Button, Tooltip } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
+import { Button, Tooltip } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
   <>

components/button/demo/legacy-group.md

@@ -15,10 +15,10 @@ Debug usage
 Debug usage
 
 ```tsx
-import React from 'react';
-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';
 
 const getGroup = (props?: ButtonGroupProps) => (
   <div>

components/button/demo/loading.md

@@ -14,9 +14,9 @@ title:
 A loading indicator can be added to a button by setting the `loading` property on the `Button`.
 
 ```tsx
-import React, { useState } from 'react';
-import { Button, Space } from 'antd';
 import { PoweroffOutlined } from '@ant-design/icons';
+import { Button, Space } from 'antd';
+import React, { useState } from 'react';
 
 const App: React.FC = () => {
   const [loadings, setLoadings] = useState<boolean[]>([]);

components/button/demo/multiple.md

@@ -14,9 +14,9 @@ title:
 If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into [Dropdown.Button](/components/dropdown/#components-dropdown-demo-dropdown-button).
 
 ```tsx
-import React from 'react';
-import { Button, Menu, Dropdown } from 'antd';
 import type { MenuProps } from 'antd';
+import { Button, Dropdown, Menu } from 'antd';
+import React from 'react';
 
 const onMenuClick: MenuProps['onClick'] = e => {
   console.log('click', e);

components/button/demo/size.md

@@ -18,10 +18,10 @@ 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.
 
 ```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';
 
 const App: React.FC = () => {
   const [size, setSize] = useState<SizeType>('large');

components/calendar/demo/basic.md

@@ -14,10 +14,10 @@ title:
 A basic calendar component with Year/Month switch.
 
 ```tsx
-import React from 'react';
 import { Calendar } from 'antd';
 import type { CalendarMode } from 'antd/lib/calendar/generateCalendar';
 import type { Moment } from 'moment';
+import React from 'react';
 
 const App: React.FC = () => {
   const onPanelChange = (value: Moment, mode: CalendarMode) => {

components/calendar/demo/card.md

@@ -14,10 +14,10 @@ title:
 Nested inside a container element for rendering in limited space.
 
 ```tsx
-import React from 'react';
 import { Calendar } from 'antd';
 import type { CalendarMode } from 'antd/lib/calendar/generateCalendar';
 import type { Moment } from 'moment';
+import React from 'react';
 
 const App: React.FC = () => {
   const onPanelChange = (value: Moment, mode: CalendarMode) => {

components/calendar/demo/customize-header.md

@@ -14,10 +14,10 @@ title:
 Customize Calendar header content.
 
 ```tsx
-import React from 'react';
-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 type { Moment } from 'moment';
+import React from 'react';
 
 const App: React.FC = () => {
   const onPanelChange = (value: Moment, mode: CalendarMode) => {

components/calendar/demo/notice-calendar.md

@@ -14,10 +14,10 @@ title:
 This component can be rendered by using `dateCellRender` and `monthCellRender` with the data you need.
 
 ```tsx
-import React from 'react';
-import { Calendar, Badge } from 'antd';
 import type { BadgeProps } from 'antd';
+import { Badge, Calendar } from 'antd';
 import type { Moment } from 'moment';
+import React from 'react';
 
 const getListData = (value: Moment) => {
   let listData;

components/calendar/demo/select.md

@@ -14,10 +14,10 @@ title:
 A basic calendar component with Year/Month switch.
 
 ```tsx
-import React, { useState } from 'react';
-import { Calendar, Alert } from 'antd';
-import moment from 'moment';
+import { Alert, Calendar } from 'antd';
 import type { Moment } from 'moment';
+import moment from 'moment';
+import React, { useState } from 'react';
 
 const App: React.FC = () => {
   const [value, setValue] = useState(moment('2017-01-25'));

components/calendar/locale/tk_TK.tsx

@@ -0,0 +1,3 @@
+import tkTK from '../../date-picker/locale/tk_TK';
+
+export default tkTK;

components/card/Card.tsx

@@ -2,12 +2,11 @@ import * as React from 'react';
 import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
 import Tabs from '../tabs';
-import Row from '../row';
-import Col from '../col';
 import Grid from './Grid';
 import { ConfigContext } from '../config-provider';
 import SizeContext from '../config-provider/SizeContext';
 import type { TabsProps } from '../tabs';
+import Skeleton from '../skeleton';
 
 export type CardType = 'inner';
 export type CardSize = 'default' | 'small';
@@ -96,34 +95,10 @@ const Card = React.forwardRef((props: CardProps, ref: React.Ref<HTMLDivElement>)
 
   const prefixCls = getPrefixCls('card', customizePrefixCls);
 
-  const loadingBlockStyle =
-    bodyStyle.padding === 0 || bodyStyle.padding === '0px' ? { padding: 24 } : undefined;
-
-  const block = <div className={`${prefixCls}-loading-block`} />;
-
   const loadingBlock = (
-    <div className={`${prefixCls}-loading-content`} style={loadingBlockStyle}>
-      <Row gutter={8}>
-        <Col span={22}>{block}</Col>
-      </Row>
-      <Row gutter={8}>
-        <Col span={8}>{block}</Col>
-        <Col span={15}>{block}</Col>
-      </Row>
-      <Row gutter={8}>
-        <Col span={6}>{block}</Col>
-        <Col span={18}>{block}</Col>
-      </Row>
-      <Row gutter={8}>
-        <Col span={13}>{block}</Col>
-        <Col span={9}>{block}</Col>
-      </Row>
-      <Row gutter={8}>
-        <Col span={4}>{block}</Col>
-        <Col span={3}>{block}</Col>
-        <Col span={16}>{block}</Col>
-      </Row>
-    </div>
+    <Skeleton loading active paragraph={{ rows: 4 }} title={false}>
+      {children}
+    </Skeleton>
   );
 
   const hasActiveTabKey = activeTabKey !== undefined;

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

@@ -430,112 +430,21 @@ Array [
       class="ant-card-body"
     >
       <div
-        class="ant-card-loading-content"
+        class="ant-skeleton ant-skeleton-active"
       >
         <div
-          class="ant-row"
-          style="margin-left:-4px;margin-right:-4px"
+          class="ant-skeleton-content"
         >
-          <div
-            class="ant-col ant-col-22"
-            style="padding-left:4px;padding-right:4px"
+          <ul
+            class="ant-skeleton-paragraph"
           >
-            <div
-              class="ant-card-loading-block"
+            <li />
+            <li />
+            <li />
+            <li
+              style="width:61%"
             />
-          </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>
+          </ul>
         </div>
       </div>
     </div>

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

@@ -430,112 +430,21 @@ Array [
       class="ant-card-body"
     >
       <div
-        class="ant-card-loading-content"
+        class="ant-skeleton ant-skeleton-active"
       >
         <div
-          class="ant-row"
-          style="margin-left:-4px;margin-right:-4px"
+          class="ant-skeleton-content"
         >
-          <div
-            class="ant-col ant-col-22"
-            style="padding-left:4px;padding-right:4px"
+          <ul
+            class="ant-skeleton-paragraph"
           >
-            <div
-              class="ant-card-loading-block"
+            <li />
+            <li />
+            <li />
+            <li
+              style="width:61%"
             />
-          </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>
+          </ul>
         </div>
       </div>
     </div>

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

@@ -19,113 +19,21 @@ exports[`Card should still have padding when card which set padding to 0 is load
     style="padding: 0px;"
   >
     <div
-      class="ant-card-loading-content"
-      style="padding: 24px;"
+      class="ant-skeleton ant-skeleton-active"
     >
       <div
-        class="ant-row"
-        style="margin-left: -4px; margin-right: -4px;"
+        class="ant-skeleton-content"
       >
-        <div
-          class="ant-col ant-col-22"
-          style="padding-left: 4px; padding-right: 4px;"
+        <ul
+          class="ant-skeleton-paragraph"
         >
-          <div
-            class="ant-card-loading-block"
+          <li />
+          <li />
+          <li />
+          <li
+            style="width: 61%;"
           />
-        </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>
+        </ul>
       </div>
     </div>
   </div>

components/card/demo/basic.md

@@ -14,8 +14,8 @@ title:
 A basic card containing a title, content and an extra corner content. Supports two sizes: `default` and `small`.
 
 ```tsx
-import React from 'react';
 import { Card } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
   <>

components/card/demo/border-less.md

@@ -14,8 +14,8 @@ title:
 A borderless card on a gray background.
 
 ```tsx
-import React from 'react';
 import { Card } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
   <div className="site-card-border-less-wrapper">

components/card/demo/flexible-content.md

@@ -14,8 +14,8 @@ title:
 You can use `Card.Meta` to support more flexible content.
 
 ```tsx
-import React from 'react';
 import { Card } from 'antd';
+import React from 'react';
 
 const { Meta } = Card;
 

components/card/demo/grid-card.md

@@ -14,8 +14,8 @@ title:
 Grid style card content.
 
 ```tsx
-import React from 'react';
 import { Card } from 'antd';
+import React from 'react';
 
 const gridStyle: React.CSSProperties = {
   width: '25%',

components/card/demo/in-column.md

@@ -14,8 +14,8 @@ title:
 Cards usually cooperate with grid column layout in overview page.
 
 ```tsx
-import React from 'react';
 import { Card, Col, Row } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
   <div className="site-card-wrapper">

components/card/demo/inner.md

@@ -14,8 +14,8 @@ title:
 It can be placed inside the ordinary card to display the information of the multilevel structure.
 
 ```tsx
-import React from 'react';
 import { Card } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
   <Card title="Card title">

components/card/demo/loading.md

@@ -14,9 +14,9 @@ title:
 Shows a loading indicator while the contents of the card is being fetched.
 
 ```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;
 

components/card/demo/meta.md

@@ -14,9 +14,9 @@ title:
 A Card that supports `cover`, `avatar`, `title` and `description`.
 
 ```tsx
-import React from 'react';
-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;
 

components/card/demo/simple.md

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

components/card/demo/tabs.md

@@ -14,8 +14,8 @@ title:
 More content can be hosted.
 
 ```tsx
-import React, { useState } from 'react';
 import { Card } from 'antd';
+import React, { useState } from 'react';
 
 const tabList = [
   {

components/card/index.tsx

@@ -1,6 +1,5 @@
 import Grid from './Grid';
 import Meta from './Meta';
-
 import InternalCard from './Card';
 
 export { CardGridProps } from './Grid';

components/card/style/index.less

@@ -80,7 +80,6 @@
   }
 
   &-extra {
-    float: right;
     // https://stackoverflow.com/a/22429853/3040605
     margin-left: auto;
     padding: @card-head-padding 0;
@@ -99,13 +98,17 @@
     .clearfix();
   }
 
+  &-contain-grid &-body {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
   &-contain-grid:not(&-loading) &-body {
     margin: -1px 0 0 -1px;
     padding: 0;
   }
 
   &-grid {
-    float: left;
     width: 33.33%;
     padding: @card-padding-base;
     border: 0;
@@ -115,10 +118,6 @@
       0 1px 0 0 @border-color-split inset;
     transition: all 0.3s;
 
-    .@{card-prefix-cls}-rtl & {
-      float: right;
-    }
-
     &-hoverable {
       &:hover {
         position: relative;
@@ -155,6 +154,7 @@
   }
 
   &-actions {
+    display: flex;
     margin: 0;
     padding: 0;
     list-style: none;
@@ -163,15 +163,10 @@
     .clearfix();
 
     & > li {
-      float: left;
       margin: @card-actions-li-margin;
       color: @text-color-secondary;
       text-align: center;
 
-      .@{card-prefix-cls}-rtl & {
-        float: right;
-      }
-
       > span {
         position: relative;
         display: block;
@@ -234,15 +229,14 @@
   }
 
   &-meta {
+    display: flex;
     margin: -4px 0;
     .clearfix();
 
     &-avatar {
-      float: left;
       padding-right: 16px;
 
       .@{card-prefix-cls}-rtl & {
-        float: right;
         padding-right: 0;
         padding-left: 16px;
       }
@@ -277,32 +271,6 @@
   &-loading &-body {
     user-select: none;
   }
-
-  &-loading-content {
-    p {
-      margin: 0;
-    }
-  }
-
-  &-loading-block {
-    height: 14px;
-    margin: 4px 0;
-    background: linear-gradient(90deg, @gradient-min, @gradient-max, @gradient-min);
-    background-size: 600% 600%;
-    border-radius: @card-radius;
-    animation: card-loading 1.4s ease infinite;
-  }
-}
-
-@keyframes card-loading {
-  0%,
-  100% {
-    background-position: 0 50%;
-  }
-
-  50% {
-    background-position: 100% 50%;
-  }
 }
 
 @import './size';

components/card/style/index.tsx

@@ -3,5 +3,4 @@ import './index.less';
 
 // style dependencies
 import '../../tabs/style';
-import '../../row/style';
-import '../../col/style';
+import '../../skeleton/style';

components/carousel/demo/autoplay.md

@@ -14,8 +14,8 @@ title:
 Timing of scrolling to the next card/picture.
 
 ```tsx
-import React from 'react';
 import { Carousel } from 'antd';
+import React from 'react';
 
 const contentStyle: React.CSSProperties = {
   height: '160px',

components/carousel/demo/basic.md

@@ -14,8 +14,8 @@ title:
 Basic usage.
 
 ```tsx
-import React from 'react';
 import { Carousel } from 'antd';
+import React from 'react';
 
 const contentStyle: React.CSSProperties = {
   height: '160px',

components/carousel/demo/fade.md

@@ -14,8 +14,8 @@ title:
 Slides use fade for transition.
 
 ```tsx
-import React from 'react';
 import { Carousel } from 'antd';
+import React from 'react';
 
 const contentStyle: React.CSSProperties = {
   height: '160px',

components/carousel/demo/position.md

@@ -14,10 +14,10 @@ title:
 There are 4 position options available.
 
 ```tsx
-import React, { useState } from 'react';
-import { Carousel, Radio } from 'antd';
 import type { RadioChangeEvent } from 'antd';
+import { Carousel, Radio } from 'antd';
 import type { DotPosition } from 'antd/lib/carousel';
+import React, { useState } from 'react';
 
 const contentStyle: React.CSSProperties = {
   height: '160px',

components/cascader/demo/basic.md

@@ -14,8 +14,8 @@ title:
 Cascade selection box for selecting province/city/district.
 
 ```tsx
-import React from 'react';
 import { Cascader } from 'antd';
+import React from 'react';
 
 interface Option {
   value: string | number;