Merge branch 'master' into feature-merge-master

2025-06-07 09:26:06 +08:00 · 2022-05-12 15:56:18 +08:00 · 2022-05-12 15:56:18 +08:00 · 2d70027f45
commit 2d70027f45
parent 42f91f970f be2b0d8a6e
107 changed files with 1626 additions and 1384 deletions
--- a/.github/workflows/preview-build.yml
+++ b/.github/workflows/preview-build.yml
@ -30,7 +30,7 @@ jobs:
          key: lock-${{ github.sha }}

      - name: create package-lock.json
-        run: npm i --package-lock-only --ignore-scripts
+        run: npm i --package-lock-only --ignore-scripts --legacy-peer-deps

      - name: hack for single file
        run: |
--- a/.github/workflows/site-deploy.yml
+++ b/.github/workflows/site-deploy.yml
@ -22,7 +22,7 @@ jobs:
          key: lock-${{ github.sha }}

      - name: create package-lock.json
-        run: npm i --package-lock-only --ignore-scripts
+        run: npm i --package-lock-only --ignore-scripts --legacy-peer-deps

      - name: hack for single file
        run: |
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@ -26,7 +26,7 @@ jobs:
          key: lock-${{ github.sha }}

      - name: create package-lock.json
-        run: npm i --package-lock-only --ignore-scripts
+        run: npm i --package-lock-only --ignore-scripts --legacy-peer-deps

      - name: hack for single file
        run: |
--- a/.github/workflows/ui.yml
+++ b/.github/workflows/ui.yml
@ -28,7 +28,7 @@ jobs:
          node-version: '16'

      - name: create package-lock.json
-        run: npm i --package-lock-only --ignore-scripts
+        run: npm i --package-lock-only --ignore-scripts --legacy-peer-deps

      - name: hack for single file
        run: |
--- a/.jest.js
+++ b/.jest.js
@ -20,13 +20,13 @@ module.exports = {
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'md'],
  modulePathIgnorePatterns: ['/_site/'],
  moduleNameMapper: {
-    '^dnd-core$': 'dnd-core/dist/cjs',
-    '^react-dnd$': 'react-dnd/dist/cjs',
-    '^react-dnd-html5-backend$': 'react-dnd-html5-backend/dist/cjs',
-    '^react-dnd-touch-backend$': 'react-dnd-touch-backend/dist/cjs',
-    '^react-dnd-test-backend$': 'react-dnd-test-backend/dist/cjs',
-    '^react-dnd-test-utils$': 'react-dnd-test-utils/dist/cjs',
-    '\\.(css|less)$': 'identity-obj-proxy',
+    '/^dnd-core$/': 'dnd-core/dist/cjs',
+    '/^react-dnd$/': 'react-dnd/dist/cjs',
+    '/^react-dnd-html5-backend$/': 'react-dnd-html5-backend/dist/cjs',
+    '/^react-dnd-touch-backend$/': 'react-dnd-touch-backend/dist/cjs',
+    '/^react-dnd-test-backend$/': 'react-dnd-test-backend/dist/cjs',
+    '/^react-dnd-test-utils$/': 'react-dnd-test-utils/dist/cjs',
+    '/\\.(css|less)$/': 'identity-obj-proxy',
  },
  testPathIgnorePatterns: ['/node_modules/', 'dekko', 'node', 'image.test.js', 'image.test.ts'],
  transform: {
@ -52,5 +52,7 @@ module.exports = {
      tsConfig: './tsconfig.test.json',
    },
  },
-  testURL: 'http://localhost',
+  testEnvironmentOptions: {
+    url: 'http://localhost',
+  },
 };
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -15,6 +15,26 @@ timeline: true

 ---

+## 4.20.4
+
+`2022-05-11`
+
+- 🐞 Fix broken List.Item type definition. [#35455](https://github.com/ant-design/ant-design/pull/35455) [@rsmeral](https://github.com/rsmeral)
+- 🐞 Fix Checkbox margin in Tree RTL mode. [#35491](https://github.com/ant-design/ant-design/pull/35491) [@miracles1919](https://github.com/miracles1919)
+- 🗑 Remove Cascader `displayRender` warning. [#35417](https://github.com/ant-design/ant-design/pull/35417) [@lalalazero](https://github.com/lalalazero)
+
+## 4.20.3
+
+`2022-05-08`
+
+- 🐞 Fix unnecessary `rowGap: 0` style attribute in Row. [#35409](https://github.com/ant-design/ant-design/pull/35409)
+- 🐞 Fix List.Item `ref` no work problem. [#35321](https://github.com/ant-design/ant-design/pull/35321)
+- 💄 Optimize the style of arrow in Tooltip. [#35401](https://github.com/ant-design/ant-design/pull/35401)
+- 🐞 Fix Table column filter reset is not working. [#35386](https://github.com/ant-design/ant-design/pull/35386) [@lalalazero](https://github.com/lalalazero)
+- 🌍 Add missing localizations for 🇬🇧 en_GB and 🇺🇦 uk_UA. [#35430](https://github.com/ant-design/ant-design/pull/35430) [@velykanov](https://github.com/velykanov)
+- Typescript
+  - 🤖 Fixed an issue where notification `maxCount` attribute was missing. [#35369](https://github.com/ant-design/ant-design/pull/35369) [@cwveysey](https://github.com/cwveysey)
+
 ## 4.20.2

 `2022-04-30`
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -15,6 +15,27 @@ timeline: true

 ---

+## 4.20.4
+
+`2022-05-11`
+
+- 🐞 修复 List.Item 类型错误。[#35455](https://github.com/ant-design/ant-design/pull/35455) [@rsmeral](https://github.com/rsmeral)
+- 🐞 修复 Tree 组件 RTL 模式下 Checkbox 的间距。[#35491](https://github.com/ant-design/ant-design/pull/35491) [@miracles1919](https://github.com/miracles1919)
+- 🗑 删除 Cascader `displayRender` 警告。[#35417](https://github.com/ant-design/ant-design/pull/35417) [@lalalazero](https://github.com/lalalazero)
+
+## 4.20.3
+
+`2022-05-08`
+
+- 🔥 增加 [官方国内镜像](https://ant-design.antgroup.com/index-cn)，享受飞一般的加载速度。
+- 🐞 修复 Row 里不必要的 `rowGap: 0` 样式属性。[#35409](https://github.com/ant-design/ant-design/pull/35409)
+- 🐞 修复 List.Item `ref` 不生效的问题。[#35321](https://github.com/ant-design/ant-design/pull/35321)
+- 💄 优化 Tooltip 箭头的样式。[#35401](https://github.com/ant-design/ant-design/pull/35401)
+- 🐞 修复 Table 筛选的重置功能不生效问题。[#35386](https://github.com/ant-design/ant-design/pull/35386) [@lalalazero](https://github.com/lalalazero)
+- 🌍 为 🇬🇧 en_GB 和 🇺🇦 uk_UA 添加缺失的本地化文案。[#35430](https://github.com/ant-design/ant-design/pull/35430) [@velykanov](https://github.com/velykanov)
+- TypeScript
+  - 🤖 修复 Notification 的 `maxCount` 属性缺失的问题。[#35369](https://github.com/ant-design/ant-design/pull/35369) [@cwveysey](https://github.com/cwveysey)
+
 ## 4.20.2

 `2022-04-30`
--- a/components/_util/tests/warning.test.js
+++ b/components/_util/tests/warning.test.js
@ -0,0 +1,65 @@
+describe('Test warning', () => {
+  let spy: jest.SpyInstance;
+
+  beforeAll(() => {
+    spy = jest.spyOn(console, 'error');
+  });
+
+  afterAll(() => {
+    spy.mockRestore();
+  });
+
+  beforeEach(() => {
+    jest.resetModules();
+  });
+
+  afterEach(() => {
+    spy.mockReset();
+  });
+
+  it('Test noop', async () => {
+    const { noop } = await import('../warning');
+    const value = noop();
+
+    expect(value).toBe(undefined);
+    expect(spy).not.toHaveBeenCalled();
+    expect(() => {
+      noop();
+    }).not.toThrow();
+  });
+
+  describe('process.env.NODE_ENV !== "production"', () => {
+    it('If `false`, exec `console.error`', async () => {
+      const warning = (await import('../warning')).default;
+      warning(false, 'error');
+
+      expect(spy).toHaveBeenCalled();
+    });
+
+    it('If `true`, do not exec `console.error`', async () => {
+      const warning = (await import('../warning')).default;
+      warning(true, 'error message');
+
+      expect(spy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('process.env.NODE_ENV === "production"', () => {
+    it('Whether `true` or `false`, do not exec `console.error`', async () => {
+      const prevEnv = process.env.NODE_ENV;
+      process.env.NODE_ENV = 'production';
+
+      const { default: warning, noop } = await import('../warning');
+
+      expect(warning).toEqual(noop);
+
+      warning(false, 'error message');
+      expect(spy).not.toHaveBeenCalled();
+
+      warning(true, 'error message');
+      expect(spy).not.toHaveBeenCalled();
+
+      process.env.NODE_ENV = prevEnv;
+    });
+  });
+});
--- a/components/_util/devWarning.ts
+++ b/components/_util/devWarning.ts
@ -1,12 +0,0 @@
-import devWarning, { resetWarned } from 'rc-util/lib/warning';
-
-export { resetWarned };
-
-export default (valid: boolean, component: string, message: string): void => {
-  devWarning(valid, `[antd: ${component}] ${message}`);
-
-  // StrictMode will inject console which will not throw warning in React 17.
-  if (process.env.NODE_ENV === 'test') {
-    resetWarned();
-  }
-};
--- a/components/_util/warning.ts
+++ b/components/_util/warning.ts
@ -0,0 +1,21 @@
+import rcWarning, { resetWarned } from 'rc-util/lib/warning';
+
+export { resetWarned };
+export function noop() {}
+
+type Warning = (valid: boolean, component: string, message: string) => void;
+
+// eslint-disable-next-line import/no-mutable-exports
+let warning: Warning = noop;
+if (process.env.NODE_ENV !== 'production') {
+  warning = (valid, component, message) => {
+    rcWarning(valid, `[antd: ${component}] ${message}`);
+
+    // StrictMode will inject console which will not throw warning in React 17.
+    if (process.env.NODE_ENV === 'test') {
+      resetWarned();
+    }
+  };
+}
+
+export default warning;
--- a/components/auto-complete/tests/index.test.js
+++ b/components/auto-complete/tests/index.test.js
@ -42,16 +42,15 @@ describe('AutoComplete', () => {
  });

  it('AutoComplete throws error when contains invalid dataSource', () => {
-    jest.spyOn(console, 'error').mockImplementation(() => undefined);
-    expect(() => {
-      mount(
-        <AutoComplete dataSource={[() => {}]}>
-          <textarea />
-        </AutoComplete>,
-      );
-    }).toThrow();
-    // eslint-disable-next-line no-console
-    console.error.mockRestore();
+    const spy = jest.spyOn(console, 'error').mockImplementation(() => undefined);
+
+    mount(
+      <AutoComplete dataSource={[() => {}]}>
+        <textarea />
+      </AutoComplete>,
+    );
+
+    expect(spy).toHaveBeenCalled();
  });

  it('legacy dataSource should accept react element option', () => {
--- a/components/auto-complete/index.tsx
+++ b/components/auto-complete/index.tsx
@ -20,7 +20,7 @@ import type {
 import Select from '../select';
 import type { ConfigConsumerProps } from '../config-provider';
 import { ConfigConsumer } from '../config-provider';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import { isValidElement } from '../_util/reactNode';
 import type { InputStatus } from '../_util/statusUtils';

@ -95,26 +95,28 @@ const AutoComplete: React.ForwardRefRenderFunction<RefSelectProps, AutoCompleteP
              );
            }
            default:
-              throw new Error('AutoComplete[dataSource] only supports type `string[] | Object[]`.');
+              warning(
+                false,
+                'AutoComplete',
+                '`dataSource` is only supports type `string[] | Object[]`.',
+              );
+              return undefined;
          }
        })
      : [];
  }

-  // ============================ Warning ============================
-  React.useEffect(() => {
-    devWarning(
-      !('dataSource' in props),
-      'AutoComplete',
-      '`dataSource` is deprecated, please use `options` instead.',
-    );
+  warning(
+    !('dataSource' in props),
+    'AutoComplete',
+    '`dataSource` is deprecated, please use `options` instead.',
+  );

-    devWarning(
-      !customizeInput || !('size' in props),
-      'AutoComplete',
-      'You need to control style self instead of setting `size` when using customize input.',
-    );
-  }, []);
+  warning(
+    !customizeInput || !('size' in props),
+    'AutoComplete',
+    'You need to control style self instead of setting `size` when using customize input.',
+  );

  return (
    <ConfigConsumer>
--- a/components/avatar/avatar.tsx
+++ b/components/avatar/avatar.tsx
@ -3,7 +3,7 @@ import classNames from 'classnames';
 import ResizeObserver from 'rc-resize-observer';
 import { composeRef } from 'rc-util/lib/ref';
 import { ConfigContext } from '../config-provider';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import type { Breakpoint } from '../_util/responsiveObserve';
 import { responsiveArray } from '../_util/responsiveObserve';
 import useBreakpoint from '../grid/hooks/useBreakpoint';
@ -126,7 +126,7 @@ const InternalAvatar: React.ForwardRefRenderFunction<unknown, AvatarProps> = (pr
      : {};
  }, [screens, size]);

-  devWarning(
+  warning(
    !(typeof icon === 'string' && icon.length > 2),
    'Avatar',
    `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`,
--- a/components/badge/demo/change.md
+++ b/components/badge/demo/change.md
@ -14,65 +14,59 @@ title:
 The count will be animated as it changes.

 ```jsx
+import React, { useState } from 'react';
 import { Badge, Button, Switch, Divider, Avatar } from 'antd';
 import { MinusOutlined, PlusOutlined, QuestionOutlined } from '@ant-design/icons';

 const ButtonGroup = Button.Group;

-class Demo extends React.Component {
-  state = {
-    count: 5,
-    show: true,
+export default () => {
+  const [count, setCount] = useState(5);
+  const [show, setShow] = useState(true);
+
+  const increase = () => {
+    setCount(count + 1);
  };

-  increase = () => {
-    const count = this.state.count + 1;
-    this.setState({ count });
-  };
-
-  decline = () => {
-    let count = this.state.count - 1;
-    if (count < 0) {
-      count = 0;
+  const decline = () => {
+    let countValue = count - 1;
+    if (countValue < 0) {
+      countValue = 0;
    }
-    this.setState({ count });
+    setCount(countValue);
  };

-  random = () => {
-    const count = Math.floor(Math.random() * 100);
-    this.setState({ count });
+  const random = () => {
+    const countValue = Math.floor(Math.random() * 100);
+    setCount(countValue);
  };

-  onChange = show => {
-    this.setState({ show });
+  const onChange = isShow => {
+    setShow(isShow);
  };

-  render() {
-    return (
-      <>
-        <Badge count={this.state.count}>
-          <Avatar shape="square" size="large" />
-        </Badge>
-        <ButtonGroup>
-          <Button onClick={this.decline}>
-            <MinusOutlined />
-          </Button>
-          <Button onClick={this.increase}>
-            <PlusOutlined />
-          </Button>
-          <Button onClick={this.random}>
-            <QuestionOutlined />
-          </Button>
-        </ButtonGroup>
-        <Divider />
-        <Badge dot={this.state.show}>
-          <Avatar shape="square" size="large" />
-        </Badge>
-        <Switch onChange={this.onChange} checked={this.state.show} />
-      </>
-    );
-  }
-}
-
-export default Demo;
+  return (
+    <>
+      <Badge count={count}>
+        <Avatar shape="square" size="large" />
+      </Badge>
+      <ButtonGroup>
+        <Button onClick={decline}>
+          <MinusOutlined />
+        </Button>
+        <Button onClick={increase}>
+          <PlusOutlined />
+        </Button>
+        <Button onClick={random}>
+          <QuestionOutlined />
+        </Button>
+      </ButtonGroup>
+      <Divider />
+      <Badge dot={show}>
+        <Avatar shape="square" size="large" />
+      </Badge>
+      <Switch onChange={onChange} checked={show} />
+    </>
+  );
+};
 ```
--- a/components/breadcrumb/Breadcrumb.tsx
+++ b/components/breadcrumb/Breadcrumb.tsx
@ -5,7 +5,7 @@ import BreadcrumbItem from './BreadcrumbItem';
 import BreadcrumbSeparator from './BreadcrumbSeparator';
 import Menu from '../menu';
 import { ConfigContext } from '../config-provider';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import { cloneElement } from '../_util/reactNode';

 export interface Route {
@ -119,7 +119,7 @@ const Breadcrumb: BreadcrumbInterface = ({
        return element;
      }

-      devWarning(
+      warning(
        element.type &&
          (element.type.__ANT_BREADCRUMB_ITEM === true ||
            element.type.__ANT_BREADCRUMB_SEPARATOR === true),
--- a/components/button/button-group.tsx
+++ b/components/button/button-group.tsx
@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import type { SizeType } from '../config-provider/SizeContext';
 import { ConfigContext } from '../config-provider';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';

 export interface ButtonGroupProps {
  size?: SizeType;
@ -34,7 +34,7 @@ const ButtonGroup: React.FC<ButtonGroupProps> = props => {
    case undefined:
      break;
    default:
-      devWarning(!size, 'Button.Group', 'Invalid prop `size`.');
+      warning(!size, 'Button.Group', 'Invalid prop `size`.');
  }

  const classes = classNames(
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@ -7,7 +7,7 @@ import Group, { GroupSizeContext } from './button-group';
 import { ConfigContext } from '../config-provider';
 import Wave from '../_util/wave';
 import { tuple } from '../_util/type';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import type { SizeType } from '../config-provider/SizeContext';
 import SizeContext from '../config-provider/SizeContext';
 import DisabledContext from '../config-provider/DisabledContext';
@ -226,13 +226,13 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
    (onClick as React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>)?.(e);
  };

-  devWarning(
+  warning(
    !(typeof icon === 'string' && icon.length > 2),
    'Button',
    `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`,
  );

-  devWarning(
+  warning(
    !(ghost && isUnBorderedButtonType(type)),
    'Button',
    "`link` or `text` button can't be a `ghost` button.",
--- a/components/button/demo/loading.md
+++ b/components/button/demo/loading.md
@ -14,72 +14,61 @@ title:
 A loading indicator can be added to a button by setting the `loading` property on the `Button`.

 ```jsx
+import React, { useEffect, useState, useRef } from 'react';
 import { Button, Space } from 'antd';
 import { PoweroffOutlined } from '@ant-design/icons';

-class App extends React.Component {
-  state = {
-    loadings: [],
-  };
+export default () => {
+  const [loadings, setLoadings] = useState([]);

-  enterLoading = index => {
-    this.setState(({ loadings }) => {
-      const newLoadings = [...loadings];
+  const enterLoading = index => {
+    setLoadings(prevLoadings => {
+      const newLoadings = [...prevLoadings];
      newLoadings[index] = true;
-
-      return {
-        loadings: newLoadings,
-      };
+      return newLoadings;
    });
-    setTimeout(() => {
-      this.setState(({ loadings }) => {
-        const newLoadings = [...loadings];
-        newLoadings[index] = false;

-        return {
-          loadings: newLoadings,
-        };
+    setTimeout(() => {
+      setLoadings(prevLoadings => {
+        const newLoadings = [...prevLoadings];
+        newLoadings[index] = false;
+        return newLoadings;
      });
    }, 6000);
  };

-  render() {
-    const { loadings } = this.state;
-    return (
-      <>
-        <Space style={{ width: '100%' }}>
-          <Button type="primary" loading>
-            Loading
-          </Button>
-          <Button type="primary" size="small" loading>
-            Loading
-          </Button>
-          <Button type="primary" icon={<PoweroffOutlined />} loading />
-        </Space>
+  return (
+    <>
+      <Space style={{ width: '100%' }}>
+        <Button type="primary" loading>
+          Loading
+        </Button>
+        <Button type="primary" size="small" loading>
+          Loading
+        </Button>
+        <Button type="primary" icon={<PoweroffOutlined />} loading />
+      </Space>

-        <Space style={{ width: '100%' }}>
-          <Button type="primary" loading={loadings[0]} onClick={() => this.enterLoading(0)}>
-            Click me!
-          </Button>
-          <Button
-            type="primary"
-            icon={<PoweroffOutlined />}
-            loading={loadings[1]}
-            onClick={() => this.enterLoading(1)}
-          >
-            Click me!
-          </Button>
-          <Button
-            type="primary"
-            icon={<PoweroffOutlined />}
-            loading={loadings[2]}
-            onClick={() => this.enterLoading(2)}
-          />
-        </Space>
-      </>
-    );
-  }
-}
-
-export default App;
+      <Space style={{ width: '100%' }}>
+        <Button type="primary" loading={loadings[0]} onClick={() => enterLoading(0)}>
+          Click me!
+        </Button>
+        <Button
+          type="primary"
+          icon={<PoweroffOutlined />}
+          loading={loadings[1]}
+          onClick={() => enterLoading(1)}
+        >
+          Click me!
+        </Button>
+        <Button
+          type="primary"
+          icon={<PoweroffOutlined />}
+          loading={loadings[2]}
+          onClick={() => enterLoading(2)}
+        />
+      </Space>
+    </>
+  );
+};
 ```
--- a/components/button/demo/size.md
+++ b/components/button/demo/size.md
@ -18,54 +18,47 @@ 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
+import React, { useState } from 'react';
 import { Button, Radio } from 'antd';
 import { DownloadOutlined } from '@ant-design/icons';

-class ButtonSize extends React.Component {
-  state = {
-    size: 'large',
+export default () => {
+  const [size, setSize] = useState('large');
+  const handleSizeChange = e => {
+    setSize(e.target.value);
  };

-  handleSizeChange = e => {
-    this.setState({ size: e.target.value });
-  };
-
-  render() {
-    const { size } = this.state;
-    return (
-      <>
-        <Radio.Group value={size} onChange={this.handleSizeChange}>
-          <Radio.Button value="large">Large</Radio.Button>
-          <Radio.Button value="default">Default</Radio.Button>
-          <Radio.Button value="small">Small</Radio.Button>
-        </Radio.Group>
-        <br />
-        <br />
-        <Button type="primary" size={size}>
-          Primary
-        </Button>
-        <Button size={size}>Default</Button>
-        <Button type="dashed" size={size}>
-          Dashed
-        </Button>
-        <br />
-        <Button type="link" size={size}>
-          Link
-        </Button>
-        <br />
-        <Button type="primary" icon={<DownloadOutlined />} size={size} />
-        <Button type="primary" shape="circle" icon={<DownloadOutlined />} size={size} />
-        <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size} />
-        <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size}>
-          Download
-        </Button>
-        <Button type="primary" icon={<DownloadOutlined />} size={size}>
-          Download
-        </Button>
-      </>
-    );
-  }
-}
-
-export default () => <ButtonSize />;
+  return (
+    <>
+      <Radio.Group value={size} onChange={handleSizeChange}>
+        <Radio.Button value="large">Large</Radio.Button>
+        <Radio.Button value="default">Default</Radio.Button>
+        <Radio.Button value="small">Small</Radio.Button>
+      </Radio.Group>
+      <br />
+      <br />
+      <Button type="primary" size={size}>
+        Primary
+      </Button>
+      <Button size={size}>Default</Button>
+      <Button type="dashed" size={size}>
+        Dashed
+      </Button>
+      <br />
+      <Button type="link" size={size}>
+        Link
+      </Button>
+      <br />
+      <Button type="primary" icon={<DownloadOutlined />} size={size} />
+      <Button type="primary" shape="circle" icon={<DownloadOutlined />} size={size} />
+      <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size} />
+      <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size}>
+        Download
+      </Button>
+      <Button type="primary" icon={<DownloadOutlined />} size={size}>
+        Download
+      </Button>
+    </>
+  );
+};
 ```
--- a/components/calendar/demo/select.md
+++ b/components/calendar/demo/select.md
@ -14,38 +14,39 @@ title:
 A basic calendar component with Year/Month switch.

 ```jsx
+import React, { useState } from 'react';
 import { Calendar, Alert } from 'antd';
 import moment from 'moment';

-class App extends React.Component {
-  state = {
+export default () => {
+  const [calendar, setCalendar] = useState({
    value: moment('2017-01-25'),
    selectedValue: moment('2017-01-25'),
-  };
+  });

-  onSelect = value => {
-    this.setState({
+  const onSelect = value => {
+    setCalendar({
      value,
      selectedValue: value,
    });
  };

-  onPanelChange = value => {
-    this.setState({ value });
+  const onPanelChange = value => {
+    setCalendar({
+      ...calendar,
+      value,
+    });
  };

-  render() {
-    const { value, selectedValue } = this.state;
-    return (
-      <>
-        <Alert
-          message={`You selected date: ${selectedValue && selectedValue.format('YYYY-MM-DD')}`}
-        />
-        <Calendar value={value} onSelect={this.onSelect} onPanelChange={this.onPanelChange} />
-      </>
-    );
-  }
-}
-
-export default App;
+  return (
+    <>
+      <Alert
+        message={`You selected date: ${
+          calendar.selectedValue && calendar.selectedValue.format('YYYY-MM-DD')
+        }`}
+      />
+      <Calendar value={calendar.value} onSelect={onSelect} onPanelChange={onPanelChange} />
+    </>
+  );
+};
 ```
--- a/components/card/demo/loading.md
+++ b/components/card/demo/loading.md
@ -14,55 +14,48 @@ title:
 Shows a loading indicator while the contents of the card is being fetched.

 ```jsx
+import React, { useState } from 'react';
 import { Skeleton, Switch, Card, Avatar } from 'antd';
 import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';

 const { Meta } = Card;

-class App extends React.Component {
-  state = {
-    loading: true,
+export default () => {
+  const [loading, setLoading] = useState(true);
+
+  const onChange = checked => {
+    setLoading(!checked);
  };

-  onChange = checked => {
-    this.setState({ loading: !checked });
-  };
+  return (
+    <>
+      <Switch checked={!loading} onChange={onChange} />

-  render() {
-    const { loading } = this.state;
+      <Card style={{ width: 300, marginTop: 16 }} loading={loading}>
+        <Meta
+          avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
+          title="Card title"
+          description="This is the description"
+        />
+      </Card>

-    return (
-      <>
-        <Switch checked={!loading} onChange={this.onChange} />
-
-        <Card style={{ width: 300, marginTop: 16 }} loading={loading}>
+      <Card
+        style={{ width: 300, marginTop: 16 }}
+        actions={[
+          <SettingOutlined key="setting" />,
+          <EditOutlined key="edit" />,
+          <EllipsisOutlined key="ellipsis" />,
+        ]}
+      >
+        <Skeleton loading={loading} avatar active>
          <Meta
            avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
            title="Card title"
            description="This is the description"
          />
-        </Card>
-
-        <Card
-          style={{ width: 300, marginTop: 16 }}
-          actions={[
-            <SettingOutlined key="setting" />,
-            <EditOutlined key="edit" />,
-            <EllipsisOutlined key="ellipsis" />,
-          ]}
-        >
-          <Skeleton loading={loading} avatar active>
-            <Meta
-              avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
-              title="Card title"
-              description="This is the description"
-            />
-          </Skeleton>
-        </Card>
-      </>
-    );
-  }
-}
-
-export default App;
+        </Skeleton>
+      </Card>
+    </>
+  );
+};
 ```
--- a/components/cascader/tests/index.test.js
+++ b/components/cascader/tests/index.test.js
@ -517,17 +517,6 @@ describe('Cascader', () => {
      errorSpy.mockRestore();
    });

-    it('displayRender & multiple', () => {
-      const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-      mount(<Cascader multiple displayRender={() => null} />);
-
-      expect(errorSpy).toHaveBeenCalledWith(
-        'Warning: [antd: Cascader] `displayRender` not work on `multiple`. Please use `tagRender` instead.',
-      );
-
-      errorSpy.mockRestore();
-    });
-
    it('should support showCheckedStrategy child', () => {
      const multipleOptions = [
        {
--- a/components/cascader/demo/custom-trigger.md
+++ b/components/cascader/demo/custom-trigger.md
@ -39,29 +39,22 @@ const options = [
  },
 ];

-class CitySwitcher extends React.Component {
-  state = {
-    text: 'Unselect',
+export default () => {
+  const [text, setText] = React.useState('Unselect');
+
+  const onChange = (value, selectedOptions) => {
+    const labeText = selectedOptions.map(o => o.label).join(', ');
+    setText(labeText);
  };

-  onChange = (value, selectedOptions) => {
-    this.setState({
-      text: selectedOptions.map(o => o.label).join(', '),
-    });
-  };
-
-  render() {
-    return (
-      <span>
-        {this.state.text}
-        &nbsp;
-        <Cascader options={options} onChange={this.onChange}>
-          <a href="#">Change city</a>
-        </Cascader>
-      </span>
-    );
-  }
-}
-
-export default () => <CitySwitcher />;
+  return (
+    <span>
+      {text}
+      &nbsp;
+      <Cascader options={options} onChange={onChange}>
+        <a href="#">Change city</a>
+      </Cascader>
+    </span>
+  );
+};
 ```
--- a/components/cascader/index.en-US.md
+++ b/components/cascader/index.en-US.md
@ -49,7 +49,6 @@ Cascade selection box.
 | status | Set validation status | 'error' \| 'warning' | - | 4.19.0 |
 | style | The additional style | CSSProperties | - |  |
 | suffixIcon | The custom suffix icon | ReactNode | - |  |
-| tagRender | Customize tag render when `multiple` | (props) => ReactNode | - | 4.17.0 |
 | value | The selected value | string\[] \| number\[] | - |  |
 | onChange | Callback when finishing cascader select | (value, selectedOptions) => void | - |  |
 | onDropdownVisibleChange | Callback when popup shown or hidden | (value) => void | - | 4.17.0 |
--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@ -14,7 +14,7 @@ import RightOutlined from '@ant-design/icons/RightOutlined';
 import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
 import LeftOutlined from '@ant-design/icons/LeftOutlined';
 import { useContext } from 'react';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import type { SizeType } from '../config-provider/SizeContext';
 import SizeContext from '../config-provider/SizeContext';
@ -162,19 +162,17 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
  const mergedStatus = getMergedStatus(contextStatus, customStatus);

  // =================== Warning =====================
-  if (process.env.NODE_ENV !== 'production') {
-    devWarning(
-      popupClassName === undefined,
-      'Cascader',
-      '`popupClassName` is deprecated. Please use `dropdownClassName` instead.',
-    );
+  warning(
+    popupClassName === undefined,
+    'Cascader',
+    '`popupClassName` is deprecated. Please use `dropdownClassName` instead.',
+  );

-    devWarning(
-      !multiple || !props.displayRender,
-      'Cascader',
-      '`displayRender` not work on `multiple`. Please use `tagRender` instead.',
-    );
-  }
+  warning(
+    !multiple || !props.displayRender,
+    'Cascader',
+    '`displayRender` not work on `multiple`. Please use `tagRender` instead.',
+  );

  // =================== No Found ====================
  const mergedNotFoundContent = notFoundContent || renderEmpty('Cascader');
--- a/components/cascader/index.zh-CN.md
+++ b/components/cascader/index.zh-CN.md
@ -50,7 +50,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg
 | status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
 | style | 自定义样式 | CSSProperties | - |  |
 | suffixIcon | 自定义的选择框后缀图标 | ReactNode | - |  |
-| tagRender | 自定义 tag 内容，多选时生效 | (props) => ReactNode | - | 4.17.0 |
 | value | 指定选中项 | string\[] \| number\[] | - |  |
 | onChange | 选择完成后的回调 | (value, selectedOptions) => void | - |  |
 | onDropdownVisibleChange | 显示/隐藏浮层的回调 | (value) => void | - | 4.17.0 |
--- a/components/checkbox/Checkbox.tsx
+++ b/components/checkbox/Checkbox.tsx
@ -5,7 +5,7 @@ import { useContext } from 'react';
 import { FormItemInputContext } from '../form/context';
 import { GroupContext } from './Group';
 import { ConfigContext } from '../config-provider';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';

 export interface AbstractCheckboxProps<T> {
  prefixCls?: string;
@ -67,7 +67,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction<HTMLInputElement, Checkbo

  React.useEffect(() => {
    checkboxGroup?.registerValue(restProps.value);
-    devWarning(
+    warning(
      'checked' in restProps || !!checkboxGroup || !('value' in restProps),
      'Checkbox',
      '`value` is not a valid prop, do you mean `checked`?',
--- a/components/checkbox/tests/checkbox.test.js
+++ b/components/checkbox/tests/checkbox.test.js
@ -2,7 +2,7 @@ import React from 'react';
 import { render, fireEvent } from '../../../tests/utils';
 import Checkbox from '..';
 import focusTest from '../../../tests/shared/focusTest';
-import { resetWarned } from '../../_util/devWarning';
+import { resetWarned } from '../../_util/warning';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';

--- a/components/checkbox/demo/controller.md
+++ b/components/checkbox/demo/controller.md
@ -14,61 +14,44 @@ title:
 Communicated with other components.

 ```jsx
+import React, { useState } from 'react';
 import { Checkbox, Button } from 'antd';

-class App extends React.Component {
-  state = {
-    checked: true,
-    disabled: false,
+export default () => {
+  const [checked, setChecked] = useState(true);
+  const [disabled, setDisabled] = useState(false);
+
+  const toggleChecked = () => {
+    setChecked(!checked);
  };

-  toggleChecked = () => {
-    this.setState({ checked: !this.state.checked });
+  const toggleDisable = () => {
+    setDisabled(!disabled);
  };

-  toggleDisable = () => {
-    this.setState({ disabled: !this.state.disabled });
-  };
-
-  onChange = e => {
+  const onChange = e => {
    console.log('checked = ', e.target.checked);
-    this.setState({
-      checked: e.target.checked,
-    });
+    setChecked(e.target.checked);
  };

-  render() {
-    const label = `${this.state.checked ? 'Checked' : 'Unchecked'}-${
-      this.state.disabled ? 'Disabled' : 'Enabled'
-    }`;
-    return (
-      <>
-        <p style={{ marginBottom: '20px' }}>
-          <Checkbox
-            checked={this.state.checked}
-            disabled={this.state.disabled}
-            onChange={this.onChange}
-          >
-            {label}
-          </Checkbox>
-        </p>
-        <p>
-          <Button type="primary" size="small" onClick={this.toggleChecked}>
-            {!this.state.checked ? 'Check' : 'Uncheck'}
-          </Button>
-          <Button
-            style={{ margin: '0 10px' }}
-            type="primary"
-            size="small"
-            onClick={this.toggleDisable}
-          >
-            {!this.state.disabled ? 'Disable' : 'Enable'}
-          </Button>
-        </p>
-      </>
-    );
-  }
-}
+  const label = `${checked ? 'Checked' : 'Unchecked'}-${disabled ? 'Disabled' : 'Enabled'}`;

-export default App;
+  return (
+    <>
+      <p style={{ marginBottom: '20px' }}>
+        <Checkbox checked={checked} disabled={disabled} onChange={onChange}>
+          {label}
+        </Checkbox>
+      </p>
+      <p>
+        <Button type="primary" size="small" onClick={toggleChecked}>
+          {!checked ? 'Check' : 'Uncheck'}
+        </Button>
+        <Button style={{ margin: '0 10px' }} type="primary" size="small" onClick={toggleDisable}>
+          {!disabled ? 'Disable' : 'Enable'}
+        </Button>
+      </p>
+    </>
+  );
+};
 ```
--- a/components/collapse/CollapsePanel.tsx
+++ b/components/collapse/CollapsePanel.tsx
@ -2,7 +2,7 @@ import * as React from 'react';
 import RcCollapse from 'rc-collapse';
 import classNames from 'classnames';
 import { ConfigContext } from '../config-provider';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';

 export type CollapsibleType = 'header' | 'disabled';

@ -23,7 +23,7 @@ export interface CollapsePanelProps {
 }

 const CollapsePanel: React.FC<CollapsePanelProps> = props => {
-  devWarning(
+  warning(
    !('disabled' in props),
    'Collapse.Panel',
    '`disabled` is deprecated. Please use `collapsible="disabled"` instead.',
--- a/components/collapse/tests/index.test.js
+++ b/components/collapse/tests/index.test.js
@ -2,7 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import { sleep } from '../../../tests/utils';
-import { resetWarned } from '../../_util/devWarning';
+import { resetWarned } from '../../_util/warning';

 describe('Collapse', () => {
  // eslint-disable-next-line global-require
--- a/components/collapse/demo/extra.md
+++ b/components/collapse/demo/extra.md
@ -39,48 +39,36 @@ const genExtra = () => (
  />
 );

-class Demo extends React.Component {
-  state = {
-    expandIconPosition: 'left',
+export default () => {
+  const [expandIconPosition, setExpandIconPosition] = React.useState('left');
+
+  const onPositionChange = position => {
+    setExpandIconPosition(position);
  };
-
-  onPositionChange = expandIconPosition => {
-    this.setState({ expandIconPosition });
-  };
-
-  render() {
-    const { expandIconPosition } = this.state;
-    return (
-      <>
-        <Collapse
-          defaultActiveKey={['1']}
-          onChange={callback}
-          expandIconPosition={expandIconPosition}
-        >
-          <Panel header="This is panel header 1" key="1" extra={genExtra()}>
-            <div>{text}</div>
-          </Panel>
-          <Panel header="This is panel header 2" key="2" extra={genExtra()}>
-            <div>{text}</div>
-          </Panel>
-          <Panel header="This is panel header 3" key="3" extra={genExtra()}>
-            <div>{text}</div>
-          </Panel>
-        </Collapse>
-        <br />
-        <span>Expand Icon Position: </span>
-        <Select
-          value={expandIconPosition}
-          style={{ margin: '0 8px' }}
-          onChange={this.onPositionChange}
-        >
-          <Option value="left">left</Option>
-          <Option value="right">right</Option>
-        </Select>
-      </>
-    );
-  }
-}
-
-export default Demo;
+  return (
+    <>
+      <Collapse
+        defaultActiveKey={['1']}
+        onChange={callback}
+        expandIconPosition={expandIconPosition}
+      >
+        <Panel header="This is panel header 1" key="1" extra={genExtra()}>
+          <div>{text}</div>
+        </Panel>
+        <Panel header="This is panel header 2" key="2" extra={genExtra()}>
+          <div>{text}</div>
+        </Panel>
+        <Panel header="This is panel header 3" key="3" extra={genExtra()}>
+          <div>{text}</div>
+        </Panel>
+      </Collapse>
+      <br />
+      <span>Expand Icon Position: </span>
+      <Select value={expandIconPosition} style={{ margin: '0 8px' }} onChange={onPositionChange}>
+        <Option value="left">left</Option>
+        <Option value="right">right</Option>
+      </Select>
+    </>
+  );
+};
 ```
--- a/components/comment/demo/editor.md
+++ b/components/comment/demo/editor.md
@ -41,32 +41,33 @@ const Editor = ({ onChange, onSubmit, submitting, value }) => (
  </>
 );

-class App extends React.Component {
-  state = {
+export default () => {
+  const [state, setState] = React.useState({
    comments: [],
    submitting: false,
    value: '',
-  };
+  });

-  handleSubmit = () => {
-    if (!this.state.value) {
+  const handleSubmit = () => {
+    if (!state.value) {
      return;
    }

-    this.setState({
+    setState({
+      ...state,
      submitting: true,
    });

    setTimeout(() => {
-      this.setState({
+      setState({
        submitting: false,
        value: '',
        comments: [
-          ...this.state.comments,
+          ...state.comments,
          {
            author: 'Han Solo',
            avatar: 'https://joeschmoe.io/api/v1/random',
-            content: <p>{this.state.value}</p>,
+            content: <p>{state.value}</p>,
            datetime: moment().fromNow(),
          },
        ],
@ -74,33 +75,28 @@ class App extends React.Component {
    }, 1000);
  };

-  handleChange = e => {
-    this.setState({
+  const handleChange = e => {
+    setState({
+      ...state,
      value: e.target.value,
    });
  };

-  render() {
-    const { comments, submitting, value } = this.state;
-
-    return (
-      <>
-        {comments.length > 0 && <CommentList comments={comments} />}
-        <Comment
-          avatar={<Avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />}
-          content={
-            <Editor
-              onChange={this.handleChange}
-              onSubmit={this.handleSubmit}
-              submitting={submitting}
-              value={value}
-            />
-          }
-        />
-      </>
-    );
-  }
-}
-
-export default App;
+  return (
+    <>
+      {state.comments.length > 0 && <CommentList comments={state.comments} />}
+      <Comment
+        avatar={<Avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />}
+        content={
+          <Editor
+            onChange={handleChange}
+            onSubmit={handleSubmit}
+            submitting={state.submitting}
+            value={state.value}
+          />
+        }
+      />
+    </>
+  );
+};
 ```
--- a/components/config-provider/tests/snapshots/components.test.js.snap
+++ b/components/config-provider/tests/snapshots/components.test.js.snap
@ -26546,7 +26546,7 @@ Array [
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -27957,7 +27957,7 @@ Array [
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -29368,7 +29368,7 @@ Array [
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -30779,7 +30779,7 @@ Array [
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -32190,7 +32190,7 @@ Array [
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -33601,7 +33601,7 @@ Array [
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
--- a/components/config-provider/tests/theme.test.ts
+++ b/components/config-provider/tests/theme.test.ts
@ -1,7 +1,7 @@
 import { kebabCase } from 'lodash';
 import canUseDom from 'rc-util/lib/Dom/canUseDom';
 import ConfigProvider from '..';
-import { resetWarned } from '../../_util/devWarning';
+import { resetWarned } from '../../_util/warning';

 let mockCanUseDom = true;

--- a/components/config-provider/cssVariables.tsx
+++ b/components/config-provider/cssVariables.tsx
@ -5,7 +5,7 @@ import canUseDom from 'rc-util/lib/Dom/canUseDom';
 import { TinyColor } from '@ctrl/tinycolor';
 import { generate } from '@ant-design/colors';
 import type { Theme } from './context';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';

 const dynamicStyleMark = `-ant-${Date.now()}-${Math.random()}`;

@ -101,6 +101,6 @@ export function registerTheme(globalPrefixCls: string, theme: Theme) {
  if (canUseDom()) {
    updateCSS(style, `${dynamicStyleMark}-dynamic-theme`);
  } else {
-    devWarning(false, 'ConfigProvider', 'SSR do not support dynamic theme with css variables.');
+    warning(false, 'ConfigProvider', 'SSR do not support dynamic theme with css variables.');
  }
 }
--- a/components/config-provider/demo/direction.md
+++ b/components/config-provider/demo/direction.md
@ -14,6 +14,8 @@ title:
 Components which support rtl direction are listed here, you can toggle the direction in the demo.

 ```jsx
+import React, { useState } from 'react';
+
 import {
  Input,
  Col,
@ -103,23 +105,22 @@ const cascaderOptions = [
  },
 ];

-class Page extends React.Component {
-  state = {
+function Page(props) {
+  const [state, setState] = useState({
    currentStep: 0,
    modalVisible: false,
-
    badgeCount: 5,
    showBadge: true,
-  };
+  });

-  selectBefore = (
+  const selectBefore = (
    <Select defaultValue="Http://" style={{ width: 90 }}>
      <Option value="Http://">Http://</Option>
      <Option value="Https://">Https://</Option>
    </Select>
  );

-  selectAfter = (
+  const selectAfter = (
    <Select defaultValue=".com" style={{ width: 80 }}>
      <Option value=".com">.com</Option>
      <Option value=".jp">.jp</Option>
@ -129,437 +130,438 @@ class Page extends React.Component {
  );

  // ==== Cascader ====
-  cascaderFilter = (inputValue, path) =>
+  const cascaderFilter = (inputValue, path) =>
    path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);

-  onCascaderChange = value => {
+  const onCascaderChange = value => {
    console.log(value);
  };
  // ==== End Cascader ====

  // ==== Modal ====
-  showModal = () => {
-    this.setState({
+  const showModal = () => {
+    setState({
+      ...state,
      modalVisible: true,
    });
  };

-  handleOk = e => {
+  const handleOk = e => {
    console.log(e);
-    this.setState({
+    setState({
+      ...state,
      modalVisible: false,
    });
  };

-  handleCancel = e => {
+  const handleCancel = e => {
    console.log(e);
-    this.setState({
+    setState({
+      ...state,
      modalVisible: false,
    });
  };
+
  // ==== End Modal ====

-  onStepsChange = currentStep => {
+  const onStepsChange = currentStep => {
    console.log('onChange:', currentStep);
-    this.setState({ currentStep });
+    setState({
+      ...state,
+      currentStep,
+    });
  };

  // ==== Badge ====

-  increaseBadge = () => {
-    const badgeCount = this.state.badgeCount + 1;
-    this.setState({ badgeCount });
+  const increaseBadge = () => {
+    const badgeCount = state.badgeCount + 1;
+    setState({
+      ...state,
+      badgeCount,
+    });
  };

-  declineBadge = () => {
-    let badgeCount = this.state.badgeCount - 1;
+  const declineBadge = () => {
+    let badgeCount = state.badgeCount - 1;
    if (badgeCount < 0) {
      badgeCount = 0;
    }
-    this.setState({ badgeCount });
+    setState({
+      ...state,
+      badgeCount,
+    });
  };

-  onChangeBadge = showBadge => {
-    this.setState({ showBadge });
+  const onChangeBadge = showBadge => {
+    setState({
+      ...state,
+      showBadge,
+    });
  };
-  // ==== End Badge ====

-  render() {
-    const { currentStep } = this.state;
-    return (
-      <div className="direction-components">
-        <Row>
-          <Col span={24}>
-            <Divider orientation="left">Cascader example</Divider>
-            <Cascader
-              suffixIcon={<SearchIcon />}
-              options={cascaderOptions}
-              onChange={this.onCascaderChange}
-              placeholder="یک مورد انتخاب کنید"
-              popupPlacement={this.props.popupPlacement}
-            />
-            &nbsp;&nbsp;&nbsp;&nbsp; With search:
-            <Cascader
-              suffixIcon={<SmileOutlined />}
-              options={cascaderOptions}
-              onChange={this.onCascaderChange}
-              placeholder="Select an item"
-              popupPlacement={this.props.popupPlacement}
-              showSearch={this.cascaderFilter}
-            />
-          </Col>
-        </Row>
-        <br />
-        <Row>
-          <Col span={12}>
-            <Divider orientation="left">Switch example</Divider>
-            &nbsp;&nbsp;
-            <Switch defaultChecked />
-            &nbsp;&nbsp;
-            <Switch loading defaultChecked />
-            &nbsp;&nbsp;
-            <Switch size="small" loading />
-          </Col>
-          <Col span={12}>
-            <Divider orientation="left">Radio Group example</Divider>
+  return (
+    <div className="direction-components">
+      <Row>
+        <Col span={24}>
+          <Divider orientation="left">Cascader example</Divider>
+          <Cascader
+            suffixIcon={<SearchIcon />}
+            options={cascaderOptions}
+            onChange={onCascaderChange}
+            placeholder="یک مورد انتخاب کنید"
+            popupPlacement={props.popupPlacement}
+          />
+          &nbsp;&nbsp;&nbsp;&nbsp; With search:
+          <Cascader
+            suffixIcon={<SmileOutlined />}
+            options={cascaderOptions}
+            onChange={onCascaderChange}
+            placeholder="Select an item"
+            popupPlacement={props.popupPlacement}
+            showSearch={cascaderFilter}
+          />
+        </Col>
+      </Row>
+      <br />
+      <Row>
+        <Col span={12}>
+          <Divider orientation="left">Switch example</Divider>
+          &nbsp;&nbsp;
+          <Switch defaultChecked />
+          &nbsp;&nbsp;
+          <Switch loading defaultChecked />
+          &nbsp;&nbsp;
+          <Switch size="small" loading />
+        </Col>
+        <Col span={12}>
+          <Divider orientation="left">Radio Group example</Divider>

-            <Radio.Group defaultValue="c" buttonStyle="solid">
-              <Radio.Button value="a">تهران</Radio.Button>
-              <Radio.Button value="b" disabled>
-                اصفهان
-              </Radio.Button>
-              <Radio.Button value="c">فارس</Radio.Button>
-              <Radio.Button value="d">خوزستان</Radio.Button>
-            </Radio.Group>
-          </Col>
-        </Row>
-        <br />
-        <Row>
-          <Col span={12}>
-            <Divider orientation="left">Button example</Divider>
-            <div className="button-demo">
-              <Button type="primary" icon={<DownloadOutlined />} />
-              <Button type="primary" shape="circle" icon={<DownloadOutlined />} />
-              <Button type="primary" shape="round" icon={<DownloadOutlined />} />
-              <Button type="primary" shape="round" icon={<DownloadOutlined />}>
-                Download
+          <Radio.Group defaultValue="c" buttonStyle="solid">
+            <Radio.Button value="a">تهران</Radio.Button>
+            <Radio.Button value="b" disabled>
+              اصفهان
+            </Radio.Button>
+            <Radio.Button value="c">فارس</Radio.Button>
+            <Radio.Button value="d">خوزستان</Radio.Button>
+          </Radio.Group>
+        </Col>
+      </Row>
+      <br />
+      <Row>
+        <Col span={12}>
+          <Divider orientation="left">Button example</Divider>
+          <div className="button-demo">
+            <Button type="primary" icon={<DownloadOutlined />} />
+            <Button type="primary" shape="circle" icon={<DownloadOutlined />} />
+            <Button type="primary" shape="round" icon={<DownloadOutlined />} />
+            <Button type="primary" shape="round" icon={<DownloadOutlined />}>
+              Download
+            </Button>
+            <Button type="primary" icon={<DownloadOutlined />}>
+              Download
+            </Button>
+            <br />
+            <Button.Group>
+              <Button type="primary">
+                <LeftOutlined />
+                Backward
              </Button>
-              <Button type="primary" icon={<DownloadOutlined />}>
-                Download
+              <Button type="primary">
+                Forward
+                <RightOutlined />
              </Button>
-              <br />
-              <Button.Group>
-                <Button type="primary">
-                  <LeftOutlined />
-                  Backward
-                </Button>
-                <Button type="primary">
-                  Forward
-                  <RightOutlined />
-                </Button>
-              </Button.Group>
-              <Button type="primary" loading>
-                Loading
-              </Button>
-              <Button type="primary" size="small" loading>
-                Loading
-              </Button>
-            </div>
-          </Col>
-          <Col span={12}>
-            <Divider orientation="left">Tree example</Divider>
-            <Tree
-              showLine
-              checkable
-              defaultExpandedKeys={['0-0-0', '0-0-1']}
-              defaultSelectedKeys={['0-0-0', '0-0-1']}
-              defaultCheckedKeys={['0-0-0', '0-0-1']}
-            >
-              <TreeNode title="parent 1" key="0-0">
-                <TreeNode title="parent 1-0" key="0-0-0" disabled>
-                  <TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
-                  <TreeNode title="leaf" key="0-0-0-1" />
-                </TreeNode>
-                <TreeNode title="parent 1-1" key="0-0-1">
-                  <TreeNode title={<span style={{ color: '#1890ff' }}>sss</span>} key="0-0-1-0" />
-                </TreeNode>
+            </Button.Group>
+            <Button type="primary" loading>
+              Loading
+            </Button>
+            <Button type="primary" size="small" loading>
+              Loading
+            </Button>
+          </div>
+        </Col>
+        <Col span={12}>
+          <Divider orientation="left">Tree example</Divider>
+          <Tree
+            showLine
+            checkable
+            defaultExpandedKeys={['0-0-0', '0-0-1']}
+            defaultSelectedKeys={['0-0-0', '0-0-1']}
+            defaultCheckedKeys={['0-0-0', '0-0-1']}
+          >
+            <TreeNode title="parent 1" key="0-0">
+              <TreeNode title="parent 1-0" key="0-0-0" disabled>
+                <TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
+                <TreeNode title="leaf" key="0-0-0-1" />
              </TreeNode>
-            </Tree>
-          </Col>
-        </Row>
-        <br />
-        <Row>
-          <Col span={24}>
-            <Divider orientation="left">Input (Input Group) example</Divider>
-            <InputGroup size="large">
-              <Row gutter={8}>
-                <Col span={5}>
-                  <Input defaultValue="0571" />
-                </Col>
-                <Col span={8}>
-                  <Input defaultValue="26888888" />
+              <TreeNode title="parent 1-1" key="0-0-1">
+                <TreeNode title={<span style={{ color: '#1890ff' }}>sss</span>} key="0-0-1-0" />
+              </TreeNode>
+            </TreeNode>
+          </Tree>
+        </Col>
+      </Row>
+      <br />
+      <Row>
+        <Col span={24}>
+          <Divider orientation="left">Input (Input Group) example</Divider>
+          <InputGroup size="large">
+            <Row gutter={8}>
+              <Col span={5}>
+                <Input defaultValue="0571" />
+              </Col>
+              <Col span={8}>
+                <Input defaultValue="26888888" />
+              </Col>
+            </Row>
+          </InputGroup>
+          <br />
+          <InputGroup compact>
+            <Input style={{ width: '20%' }} defaultValue="0571" />
+            <Input style={{ width: '30%' }} defaultValue="26888888" />
+          </InputGroup>
+          <br />
+          <InputGroup compact>
+            <Select defaultValue="Option1">
+              <Option value="Option1">Option1</Option>
+              <Option value="Option2">Option2</Option>
+            </Select>
+            <Input style={{ width: '50%' }} defaultValue="input content" />
+            <InputNumber />
+          </InputGroup>
+          <br />
+          <Search placeholder="input search text" enterButton="Search" size="large" />
+          <br />
+          <br />
+          <div style={{ marginBottom: 16 }}>
+            <Input addonBefore={selectBefore} addonAfter={selectAfter} defaultValue="mysite" />
+          </div>
+          <br />
+          <Row>
+            <Col span={12}>
+              <Divider orientation="left">Select example</Divider>
+              <Select mode="multiple" defaultValue="مورچه" style={{ width: 120 }}>
+                <Option value="jack">Jack</Option>
+                <Option value="مورچه">مورچه</Option>
+                <Option value="disabled" disabled>
+                  Disabled
+                </Option>
+                <Option value="Yiminghe">yiminghe</Option>
+              </Select>
+              <Select defaultValue="مورچه" style={{ width: 120 }} disabled>
+                <Option value="مورچه">مورچه</Option>
+              </Select>
+              <Select defaultValue="مورچه" style={{ width: 120 }} loading>
+                <Option value="مورچه">مورچه</Option>
+              </Select>
+              <Select
+                showSearch
+                style={{ width: 200 }}
+                placeholder="Select a person"
+                optionFilterProp="children"
+                filterOption={(input, option) =>
+                  option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                }
+              >
+                <Option value="jack">Jack</Option>
+                <Option value="سعید">سعید</Option>
+                <Option value="tom">Tom</Option>
+              </Select>
+            </Col>
+            <Col span={12}>
+              <Divider orientation="left">TreeSelect example</Divider>
+              <div>
+                <TreeSelect
+                  showSearch
+                  style={{ width: '100%' }}
+                  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                  placeholder="Please select"
+                  allowClear
+                  treeDefaultExpandAll
+                >
+                  <TreeNode value="parent 1" title="parent 1" key="0-1">
+                    <TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
+                      <TreeNode value="leaf1" title="my leaf" key="random" />
+                      <TreeNode value="leaf2" title="your leaf" key="random1" />
+                    </TreeNode>
+                    <TreeNode value="parent 1-1" title="parent 1-1" key="random2">
+                      <TreeNode
+                        value="sss"
+                        title={<b style={{ color: '#08c' }}>sss</b>}
+                        key="random3"
+                      />
+                    </TreeNode>
+                  </TreeNode>
+                </TreeSelect>
+              </div>
+            </Col>
+          </Row>
+          <br />
+          <Row>
+            <Col span={24}>
+              <Divider orientation="left">Modal example</Divider>
+              <div>
+                <Button type="primary" onClick={showModal}>
+                  Open Modal
+                </Button>
+                <Modal
+                  title="پنچره ساده"
+                  visible={state.modalVisible}
+                  onOk={handleOk}
+                  onCancel={handleCancel}
+                >
+                  <p>نگاشته‌های خود را اینجا قراردهید</p>
+                  <p>نگاشته‌های خود را اینجا قراردهید</p>
+                  <p>نگاشته‌های خود را اینجا قراردهید</p>
+                </Modal>
+              </div>
+            </Col>
+          </Row>
+          <br />
+          <Row>
+            <Col span={24}>
+              <Divider orientation="left">Steps example</Divider>
+              <div>
+                <Steps progressDot current={state.currentStep}>
+                  <Step title="Finished" description="This is a description." />
+                  <Step title="In Progress" description="This is a description." />
+                  <Step title="Waiting" description="This is a description." />
+                </Steps>
+                <br />
+                <Steps current={state.currentStep} onChange={onStepsChange}>
+                  <Step title="Step 1" description="This is a description." />
+                  <Step title="Step 2" description="This is a description." />
+                  <Step title="Step 3" description="This is a description." />
+                </Steps>
+              </div>
+            </Col>
+          </Row>
+          <br />
+          <Row>
+            <Col span={12}>
+              <Divider orientation="left">Rate example</Divider>
+              <div>
+                <Rate defaultValue={2.5} />
+                <br />
+                <strong>* Note:</strong> Half star not implemented in RTL direction, it will be
+                supported after <a href="https://github.com/react-component/rate">rc-rate</a>{' '}
+                implement rtl support.
+              </div>
+            </Col>
+            <Col span={12}>
+              <Divider orientation="left">Badge example</Divider>
+              <div>
+                <div>
+                  <Badge count={state.badgeCount}>
+                    <a href="#" className="head-example" />
+                  </Badge>
+                  <ButtonGroup>
+                    <Button onClick={declineBadge}>
+                      <MinusOutlined />
+                    </Button>
+                    <Button onClick={increaseBadge}>
+                      <PlusOutlined />
+                    </Button>
+                  </ButtonGroup>
+                </div>
+                <div style={{ marginTop: 10 }}>
+                  <Badge dot={state.showBadge}>
+                    <a href="#" className="head-example" />
+                  </Badge>
+                  <Switch onChange={onChangeBadge} checked={state.showBadge} />
+                </div>
+              </div>
+            </Col>
+          </Row>
+        </Col>
+      </Row>
+
+      <br />
+      <br />
+      <Row>
+        <Col span={24}>
+          <Divider orientation="left">Pagination example</Divider>
+          <Pagination showSizeChanger defaultCurrent={3} total={500} />
+        </Col>
+      </Row>
+      <br />
+      <Row>
+        <Col span={24}>
+          <Divider orientation="left">Grid System example</Divider>
+          <div className="grid-demo">
+            <div className="code-box-demo">
+              <p>
+                <strong>* Note:</strong> Every calculation in RTL grid system is from right side
+                (offset, push, etc.)
+              </p>
+              <Row>
+                <Col span={8}>col-8</Col>
+                <Col span={8} offset={8}>
+                  col-8
+                </Col>
+              </Row>
+              <Row>
+                <Col span={6} offset={6}>
+                  col-6 col-offset-6
+                </Col>
+                <Col span={6} offset={6}>
+                  col-6 col-offset-6
+                </Col>
+              </Row>
+              <Row>
+                <Col span={12} offset={6}>
+                  col-12 col-offset-6
+                </Col>
+              </Row>
+              <Row>
+                <Col span={18} push={6}>
+                  col-18 col-push-6
+                </Col>
+                <Col span={6} pull={18}>
+                  col-6 col-pull-18
                </Col>
              </Row>
-            </InputGroup>
-            <br />
-            <InputGroup compact>
-              <Input style={{ width: '20%' }} defaultValue="0571" />
-              <Input style={{ width: '30%' }} defaultValue="26888888" />
-            </InputGroup>
-            <br />
-            <InputGroup compact>
-              <Select defaultValue="Option1">
-                <Option value="Option1">Option1</Option>
-                <Option value="Option2">Option2</Option>
-              </Select>
-              <Input style={{ width: '50%' }} defaultValue="input content" />
-              <InputNumber />
-            </InputGroup>
-            <br />
-            <Search placeholder="input search text" enterButton="Search" size="large" />
-            <br />
-            <br />
-            <div style={{ marginBottom: 16 }}>
-              <Input
-                addonBefore={this.selectBefore}
-                addonAfter={this.selectAfter}
-                defaultValue="mysite"
-              />
            </div>
-            <br />
-            <Row>
-              <Col span={12}>
-                <Divider orientation="left">Select example</Divider>
-                <Select mode="multiple" defaultValue="مورچه" style={{ width: 120 }}>
-                  <Option value="jack">Jack</Option>
-                  <Option value="مورچه">مورچه</Option>
-                  <Option value="disabled" disabled>
-                    Disabled
-                  </Option>
-                  <Option value="Yiminghe">yiminghe</Option>
-                </Select>
-                <Select defaultValue="مورچه" style={{ width: 120 }} disabled>
-                  <Option value="مورچه">مورچه</Option>
-                </Select>
-                <Select defaultValue="مورچه" style={{ width: 120 }} loading>
-                  <Option value="مورچه">مورچه</Option>
-                </Select>
-                <Select
-                  showSearch
-                  style={{ width: 200 }}
-                  placeholder="Select a person"
-                  optionFilterProp="children"
-                  filterOption={(input, option) =>
-                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-                  }
-                >
-                  <Option value="jack">Jack</Option>
-                  <Option value="سعید">سعید</Option>
-                  <Option value="tom">Tom</Option>
-                </Select>
-              </Col>
-              <Col span={12}>
-                <Divider orientation="left">TreeSelect example</Divider>
-                <div>
-                  <TreeSelect
-                    showSearch
-                    style={{ width: '100%' }}
-                    dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
-                    placeholder="Please select"
-                    allowClear
-                    treeDefaultExpandAll
-                  >
-                    <TreeNode value="parent 1" title="parent 1" key="0-1">
-                      <TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
-                        <TreeNode value="leaf1" title="my leaf" key="random" />
-                        <TreeNode value="leaf2" title="your leaf" key="random1" />
-                      </TreeNode>
-                      <TreeNode value="parent 1-1" title="parent 1-1" key="random2">
-                        <TreeNode
-                          value="sss"
-                          title={<b style={{ color: '#08c' }}>sss</b>}
-                          key="random3"
-                        />
-                      </TreeNode>
-                    </TreeNode>
-                  </TreeSelect>
-                </div>
-              </Col>
-            </Row>
-            <br />
-            <Row>
-              <Col span={24}>
-                <Divider orientation="left">Modal example</Divider>
-                <div>
-                  <Button type="primary" onClick={this.showModal}>
-                    Open Modal
-                  </Button>
-                  <Modal
-                    title="پنچره ساده"
-                    visible={this.state.modalVisible}
-                    onOk={this.handleOk}
-                    onCancel={this.handleCancel}
-                  >
-                    <p>نگاشته‌های خود را اینجا قراردهید</p>
-                    <p>نگاشته‌های خود را اینجا قراردهید</p>
-                    <p>نگاشته‌های خود را اینجا قراردهید</p>
-                  </Modal>
-                </div>
-              </Col>
-            </Row>
-            <br />
-            <Row>
-              <Col span={24}>
-                <Divider orientation="left">Steps example</Divider>
-                <div>
-                  <Steps progressDot current={currentStep}>
-                    <Step title="Finished" description="This is a description." />
-                    <Step title="In Progress" description="This is a description." />
-                    <Step title="Waiting" description="This is a description." />
-                  </Steps>
-                  <br />
-                  <Steps current={currentStep} onChange={this.onStepsChange}>
-                    <Step title="Step 1" description="This is a description." />
-                    <Step title="Step 2" description="This is a description." />
-                    <Step title="Step 3" description="This is a description." />
-                  </Steps>
-                </div>
-              </Col>
-            </Row>
-            <br />
-            <Row>
-              <Col span={12}>
-                <Divider orientation="left">Rate example</Divider>
-                <div>
-                  <Rate defaultValue={2.5} />
-                  <br />
-                  <strong>* Note:</strong> Half star not implemented in RTL direction, it will be
-                  supported after <a href="https://github.com/react-component/rate">rc-rate</a>{' '}
-                  implement rtl support.
-                </div>
-              </Col>
-              <Col span={12}>
-                <Divider orientation="left">Badge example</Divider>
-                <div>
-                  <div>
-                    <Badge count={this.state.badgeCount}>
-                      <a href="#" className="head-example" />
-                    </Badge>
-                    <ButtonGroup>
-                      <Button onClick={this.declineBadge}>
-                        <MinusOutlined />
-                      </Button>
-                      <Button onClick={this.increaseBadge}>
-                        <PlusOutlined />
-                      </Button>
-                    </ButtonGroup>
-                  </div>
-                  <div style={{ marginTop: 10 }}>
-                    <Badge dot={this.state.showBadge}>
-                      <a href="#" className="head-example" />
-                    </Badge>
-                    <Switch onChange={this.onChangeBadge} checked={this.state.showBadge} />
-                  </div>
-                </div>
-              </Col>
-            </Row>
-          </Col>
-        </Row>
-
-        <br />
-        <br />
-        <Row>
-          <Col span={24}>
-            <Divider orientation="left">Pagination example</Divider>
-            <Pagination showSizeChanger defaultCurrent={3} total={500} />
-          </Col>
-        </Row>
-        <br />
-        <Row>
-          <Col span={24}>
-            <Divider orientation="left">Grid System example</Divider>
-            <div className="grid-demo">
-              <div className="code-box-demo">
-                <p>
-                  <strong>* Note:</strong> Every calculation in RTL grid system is from right side
-                  (offset, push, etc.)
-                </p>
-                <Row>
-                  <Col span={8}>col-8</Col>
-                  <Col span={8} offset={8}>
-                    col-8
-                  </Col>
-                </Row>
-                <Row>
-                  <Col span={6} offset={6}>
-                    col-6 col-offset-6
-                  </Col>
-                  <Col span={6} offset={6}>
-                    col-6 col-offset-6
-                  </Col>
-                </Row>
-                <Row>
-                  <Col span={12} offset={6}>
-                    col-12 col-offset-6
-                  </Col>
-                </Row>
-                <Row>
-                  <Col span={18} push={6}>
-                    col-18 col-push-6
-                  </Col>
-                  <Col span={6} pull={18}>
-                    col-6 col-pull-18
-                  </Col>
-                </Row>
-              </div>
-            </div>
-          </Col>
-        </Row>
-      </div>
-    );
-  }
+          </div>
+        </Col>
+      </Row>
+    </div>
+  );
 }

-class App extends React.Component {
-  state = {
-    direction: 'ltr',
-    popupPlacement: 'bottomLeft',
-  };
+export default () => {
+  const [direction, setDirection] = useState('ltr');
+  const [popupPlacement, setPopupPlacement] = useState('bottomLeft');

-  changeDirection = e => {
+  const changeDirection = e => {
    const directionValue = e.target.value;
-    this.setState({ direction: directionValue });
+    setDirection(directionValue);
    if (directionValue === 'rtl') {
-      this.setState({ popupPlacement: 'bottomRight' });
+      setPopupPlacement('bottomRight');
    } else {
-      this.setState({ popupPlacement: 'bottomLeft' });
+      setPopupPlacement('bottomLeft');
    }
  };

-  render() {
-    const { direction, popupPlacement } = this.state;
-    return (
-      <>
-        <div style={{ marginBottom: 16 }}>
-          <span style={{ marginRight: 16 }}>Change direction of components: </span>
-          <Radio.Group defaultValue="ltr" onChange={this.changeDirection}>
-            <Radio.Button key="ltr" value="ltr">
-              LTR
-            </Radio.Button>
-            <Radio.Button key="rtl" value="rtl">
-              RTL
-            </Radio.Button>
-          </Radio.Group>
-        </div>
-        <ConfigProvider direction={direction}>
-          <Page className={direction} popupPlacement={popupPlacement} />
-        </ConfigProvider>
-      </>
-    );
-  }
-}
-
-export default App;
+  return (
+    <>
+      <div style={{ marginBottom: 16 }}>
+        <span style={{ marginRight: 16 }}>Change direction of components: </span>
+        <Radio.Group defaultValue="ltr" onChange={changeDirection}>
+          <Radio.Button key="ltr" value="ltr">
+            LTR
+          </Radio.Button>
+          <Radio.Button key="rtl" value="rtl">
+            RTL
+          </Radio.Button>
+        </Radio.Group>
+      </div>
+      <ConfigProvider direction={direction}>
+        <Page className={direction} popupPlacement={popupPlacement} />
+      </ConfigProvider>
+    </>
+  );
+};
 ```

 ```css
--- a/components/config-provider/demo/locale.md
+++ b/components/config-provider/demo/locale.md
@ -55,84 +55,77 @@ const columns = [
  },
 ];

-class Page extends React.Component {
-  state = {
-    visible: false,
+function Page() {
+  const [visible, setVisible] = React.useState(false);
+
+  const showModal = () => {
+    setVisible(true);
  };

-  showModal = () => {
-    this.setState({ visible: true });
+  const hideModal = () => {
+    setVisible(false);
  };

-  hideModal = () => {
-    this.setState({ visible: false });
+  const info = () => {
+    Modal.info({
+      title: 'some info',
+      content: 'some info',
+    });
  };

-  render() {
-    const info = () => {
-      Modal.info({
-        title: 'some info',
-        content: 'some info',
-      });
-    };
-    const confirm = () => {
-      Modal.confirm({
-        title: 'some info',
-        content: 'some info',
-      });
-    };
-    return (
-      <div className="locale-components">
-        <div className="example">
-          <Pagination defaultCurrent={1} total={50} showSizeChanger />
-        </div>
-        <div className="example">
-          <Select showSearch style={{ width: 200 }}>
-            <Option value="jack">jack</Option>
-            <Option value="lucy">lucy</Option>
-          </Select>
-          <DatePicker />
-          <TimePicker />
-          <RangePicker style={{ width: 200 }} />
-        </div>
-        <div className="example">
-          <Button type="primary" onClick={this.showModal}>
-            Show Modal
-          </Button>
-          <Button onClick={info}>Show info</Button>
-          <Button onClick={confirm}>Show confirm</Button>
-          <Popconfirm title="Question?">
-            <a href="#">Click to confirm</a>
-          </Popconfirm>
-        </div>
-        <div className="example">
-          <Transfer dataSource={[]} showSearch targetKeys={[]} render={item => item.title} />
-        </div>
-        <div className="site-config-provider-calendar-wrapper">
-          <Calendar fullscreen={false} value={moment()} />
-        </div>
-        <div className="example">
-          <Table dataSource={[]} columns={columns} />
-        </div>
-        <Modal title="Locale Modal" visible={this.state.visible} onCancel={this.hideModal}>
-          <p>Locale Modal</p>
-        </Modal>
+  const confirm = () => {
+    Modal.confirm({
+      title: 'some info',
+      content: 'some info',
+    });
+  };
+
+  return (
+    <div className="locale-components">
+      <div className="example">
+        <Pagination defaultCurrent={1} total={50} showSizeChanger />
      </div>
-    );
-  }
+      <div className="example">
+        <Select showSearch style={{ width: 200 }}>
+          <Option value="jack">jack</Option>
+          <Option value="lucy">lucy</Option>
+        </Select>
+        <DatePicker />
+        <TimePicker />
+        <RangePicker style={{ width: 200 }} />
+      </div>
+      <div className="example">
+        <Button type="primary" onClick={showModal}>
+          Show Modal
+        </Button>
+        <Button onClick={info}>Show info</Button>
+        <Button onClick={confirm}>Show confirm</Button>
+        <Popconfirm title="Question?">
+          <a href="#">Click to confirm</a>
+        </Popconfirm>
+      </div>
+      <div className="example">
+        <Transfer dataSource={[]} showSearch targetKeys={[]} render={item => item.title} />
+      </div>
+      <div className="site-config-provider-calendar-wrapper">
+        <Calendar fullscreen={false} value={moment()} />
+      </div>
+      <div className="example">
+        <Table dataSource={[]} columns={columns} />
+      </div>
+      <Modal title="Locale Modal" visible={visible} onCancel={hideModal}>
+        <p>Locale Modal</p>
+      </Modal>
+    </div>
+  );
 }

-class App extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      locale: enUS,
-    };
-  }
+export default () => {
+  const [locale, setLocale] = React.useState(enUS);

-  changeLocale = e => {
+  const changeLocale = e => {
    const localeValue = e.target.value;
-    this.setState({ locale: localeValue });
+    setLocale(localeValue);
    if (!localeValue) {
      moment.locale('en');
    } else {
@ -140,32 +133,27 @@ class App extends React.Component {
    }
  };

-  render() {
-    const { locale } = this.state;
-    return (
-      <div>
-        <div className="change-locale">
-          <span style={{ marginRight: 16 }}>Change locale of components: </span>
-          <Radio.Group value={locale} onChange={this.changeLocale}>
-            <Radio.Button key="en" value={enUS}>
-              English
-            </Radio.Button>
-            <Radio.Button key="cn" value={zhCN}>
-              中文
-            </Radio.Button>
-          </Radio.Group>
-        </div>
-        <ConfigProvider locale={locale}>
-          <Page
-            key={locale ? locale.locale : 'en' /* Have to refresh for production environment */}
-          />
-        </ConfigProvider>
+  return (
+    <div>
+      <div className="change-locale">
+        <span style={{ marginRight: 16 }}>Change locale of components: </span>
+        <Radio.Group value={locale} onChange={changeLocale}>
+          <Radio.Button key="en" value={enUS}>
+            English
+          </Radio.Button>
+          <Radio.Button key="cn" value={zhCN}>
+            中文
+          </Radio.Button>
+        </Radio.Group>
      </div>
-    );
-  }
-}
-
-export default App;
+      <ConfigProvider locale={locale}>
+        <Page
+          key={locale ? locale.locale : 'en' /* Have to refresh for production environment */}
+        />
+      </ConfigProvider>
+    </div>
+  );
+};
 ```

 ```css
--- a/components/date-picker/tests/QuarterPicker.test.js
+++ b/components/date-picker/tests/QuarterPicker.test.js
@ -1,7 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import DatePicker from '..';
-import { resetWarned } from '../../_util/devWarning';
+import { resetWarned } from '../../_util/warning';

 const { QuarterPicker } = DatePicker;

--- a/components/date-picker/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/date-picker/tests/snapshots/demo-extend.test.ts.snap
@ -13927,7 +13927,7 @@ exports[`renders ./components/date-picker/demo/disabled-date.md extend context c
                    type="button"
                  >
                    <span>
-                      Ok
+                      OK
                    </span>
                  </button>
                </li>
@ -16873,7 +16873,7 @@ exports[`renders ./components/date-picker/demo/disabled-date.md extend context c
                    type="button"
                  >
                    <span>
-                      Ok
+                      OK
                    </span>
                  </button>
                </li>
@ -19439,7 +19439,7 @@ exports[`renders ./components/date-picker/demo/extra-footer.md extend context co
                    type="button"
                  >
                    <span>
-                      Ok
+                      OK
                    </span>
                  </button>
                </li>
@ -22634,7 +22634,7 @@ exports[`renders ./components/date-picker/demo/extra-footer.md extend context co
                    type="button"
                  >
                    <span>
-                      Ok
+                      OK
                    </span>
                  </button>
                </li>
@ -28295,7 +28295,7 @@ exports[`renders ./components/date-picker/demo/mode.md extend context correctly
                    type="button"
                  >
                    <span>
-                      Ok
+                      OK
                    </span>
                  </button>
                </li>
@ -33676,7 +33676,7 @@ exports[`renders ./components/date-picker/demo/presetted-ranges.md extend contex
                    type="button"
                  >
                    <span>
-                      Ok
+                      OK
                    </span>
                  </button>
                </li>
@ -36864,7 +36864,7 @@ exports[`renders ./components/date-picker/demo/range-picker.md extend context co
                    type="button"
                  >
                    <span>
-                      Ok
+                      OK
                    </span>
                  </button>
                </li>
@ -45240,7 +45240,7 @@ exports[`renders ./components/date-picker/demo/start-end.md extend context corre
                    type="button"
                  >
                    <span>
-                      Ok
+                      OK
                    </span>
                  </button>
                </li>
@ -47190,7 +47190,7 @@ exports[`renders ./components/date-picker/demo/start-end.md extend context corre
                    type="button"
                  >
                    <span>
-                      Ok
+                      OK
                    </span>
                  </button>
                </li>
@ -57627,7 +57627,7 @@ exports[`renders ./components/date-picker/demo/switchable.md extend context corr
                    type="button"
                  >
                    <span>
-                      Ok
+                      OK
                    </span>
                  </button>
                </li>
@ -59585,7 +59585,7 @@ exports[`renders ./components/date-picker/demo/time.md extend context correctly
                    type="button"
                  >
                    <span>
-                      Ok
+                      OK
                    </span>
                  </button>
                </li>
@ -61037,7 +61037,7 @@ exports[`renders ./components/date-picker/demo/time.md extend context correctly
                    type="button"
                  >
                    <span>
-                      Ok
+                      OK
                    </span>
                  </button>
                </li>
--- a/components/date-picker/demo/mode.md
+++ b/components/date-picker/demo/mode.md
@ -15,65 +15,60 @@ debug: true
 Determing which panel to show with `mode` and `onPanelChange`.

 ```jsx
+import React, { useState } from 'react';
 import { DatePicker, Space } from 'antd';

 const { RangePicker } = DatePicker;

-class ControlledDatePicker extends React.Component {
-  state = { mode: 'time' };
+function ControlledDatePicker() {
+  const [mode, setMode] = useState('time');

-  handleOpenChange = open => {
+  const handleOpenChange = open => {
    if (open) {
-      this.setState({ mode: 'time' });
+      setMode('time');
    }
  };

-  handlePanelChange = (value, mode) => {
-    this.setState({ mode });
+  const handlePanelChange = (value, dateMode) => {
+    setMode(dateMode);
  };

-  render() {
-    return (
-      <DatePicker
-        mode={this.state.mode}
-        showTime
-        onOpenChange={this.handleOpenChange}
-        onPanelChange={this.handlePanelChange}
-      />
-    );
-  }
+  return (
+    <DatePicker
+      mode={mode}
+      showTime
+      onOpenChange={handleOpenChange}
+      onPanelChange={handlePanelChange}
+    />
+  );
 }

-class ControlledRangePicker extends React.Component {
-  state = {
-    mode: ['month', 'month'],
-    value: [],
+function ControlledRangePicker() {
+  const [mode, setMode] = useState(['month', 'month']);
+  const [value, setValue] = useState([]);
+
+  const handlePanelChange = (dateValue, dateMode) => {
+    setValue(dateValue);
+    setMode([
+      dateMode[0] === 'date' ? 'month' : dateMode[0],
+      dateMode[1] === 'date' ? 'month' : dateMode[1],
+    ]);
  };

-  handlePanelChange = (value, mode) => {
-    this.setState({
-      value,
-      mode: [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]],
-    });
+  const handleChange = dateValue => {
+    setValue(dateValue);
  };

-  handleChange = value => {
-    this.setState({ value });
-  };
-
-  render() {
-    const { value, mode } = this.state;
-    return (
-      <RangePicker
-        placeholder={['Start month', 'End month']}
-        format="YYYY-MM"
-        value={value}
-        mode={mode}
-        onChange={this.handleChange}
-        onPanelChange={this.handlePanelChange}
-      />
-    );
-  }
+  return (
+    <RangePicker
+      placeholder={['Start month', 'End month']}
+      format="YYYY-MM"
+      value={value}
+      mode={mode}
+      onChange={handleChange}
+      onPanelChange={handlePanelChange}
+    />
+  );
 }

 export default () => (
--- a/components/date-picker/demo/size.md
+++ b/components/date-picker/demo/size.md
@ -18,32 +18,25 @@ import { DatePicker, Radio, Space } from 'antd';

 const { RangePicker } = DatePicker;

-class PickerSizesDemo extends React.Component {
-  state = {
-    size: 'default',
+export default () => {
+  const [size, setSize] = React.useState('default');
+
+  const handleSizeChange = e => {
+    setSize(e.target.value);
  };

-  handleSizeChange = e => {
-    this.setState({ size: e.target.value });
-  };
-
-  render() {
-    const { size } = this.state;
-    return (
-      <Space direction="vertical" size={12}>
-        <Radio.Group value={size} onChange={this.handleSizeChange}>
-          <Radio.Button value="large">Large</Radio.Button>
-          <Radio.Button value="default">Default</Radio.Button>
-          <Radio.Button value="small">Small</Radio.Button>
-        </Radio.Group>
-        <DatePicker size={size} />
-        <DatePicker size={size} picker="month" />
-        <RangePicker size={size} />
-        <DatePicker size={size} picker="week" />
-      </Space>
-    );
-  }
-}
-
-export default () => <PickerSizesDemo />;
+  return (
+    <Space direction="vertical" size={12}>
+      <Radio.Group value={size} onChange={handleSizeChange}>
+        <Radio.Button value="large">Large</Radio.Button>
+        <Radio.Button value="default">Default</Radio.Button>
+        <Radio.Button value="small">Small</Radio.Button>
+      </Radio.Group>
+      <DatePicker size={size} />
+      <DatePicker size={size} picker="month" />
+      <RangePicker size={size} />
+      <DatePicker size={size} picker="week" />
+    </Space>
+  );
+};
 ```
--- a/components/date-picker/demo/start-end.md
+++ b/components/date-picker/demo/start-end.md
@ -23,80 +23,76 @@ When `RangePicker` does not satisfied your requirements, try to implement simila
 ```jsx
 import { DatePicker, Space } from 'antd';

-class DateRange extends React.Component {
-  state = {
+export default () => {
+  const [state, setState] = React.useState({
    startValue: null,
    endValue: null,
    endOpen: false,
-  };
+  });

-  disabledStartDate = startValue => {
-    const { endValue } = this.state;
+  const disabledStartDate = startValue => {
+    const { endValue } = state;
    if (!startValue || !endValue) {
      return false;
    }
    return startValue.valueOf() > endValue.valueOf();
  };

-  disabledEndDate = endValue => {
-    const { startValue } = this.state;
+  const disabledEndDate = endValue => {
+    const { startValue } = state;
    if (!endValue || !startValue) {
      return false;
    }
    return endValue.valueOf() <= startValue.valueOf();
  };

-  onChange = (field, value) => {
-    this.setState({
+  const onChange = (field, value) => {
+    setState({
+      ...state,
      [field]: value,
    });
  };

-  onStartChange = value => {
-    this.onChange('startValue', value);
+  const onStartChange = value => {
+    onChange('startValue', value);
  };

-  onEndChange = value => {
-    this.onChange('endValue', value);
+  const onEndChange = value => {
+    onChange('endValue', value);
  };

-  handleStartOpenChange = open => {
+  const handleStartOpenChange = open => {
    if (!open) {
-      this.setState({ endOpen: true });
+      setState({ ...state, endOpen: true });
    }
  };

-  handleEndOpenChange = open => {
-    this.setState({ endOpen: open });
+  const handleEndOpenChange = open => {
+    setState({ ...state, endOpen: true });
  };

-  render() {
-    const { startValue, endValue, endOpen } = this.state;
-    return (
-      <Space>
-        <DatePicker
-          disabledDate={this.disabledStartDate}
-          showTime
-          format="YYYY-MM-DD HH:mm:ss"
-          value={startValue}
-          placeholder="Start"
-          onChange={this.onStartChange}
-          onOpenChange={this.handleStartOpenChange}
-        />
-        <DatePicker
-          disabledDate={this.disabledEndDate}
-          showTime
-          format="YYYY-MM-DD HH:mm:ss"
-          value={endValue}
-          placeholder="End"
-          onChange={this.onEndChange}
-          open={endOpen}
-          onOpenChange={this.handleEndOpenChange}
-        />
-      </Space>
-    );
-  }
-}
-
-export default () => <DateRange />;
+  return (
+    <Space>
+      <DatePicker
+        disabledDate={disabledStartDate}
+        showTime
+        format="YYYY-MM-DD HH:mm:ss"
+        value={state.startValue}
+        placeholder="Start"
+        onChange={onStartChange}
+        onOpenChange={handleStartOpenChange}
+      />
+      <DatePicker
+        disabledDate={disabledEndDate}
+        showTime
+        format="YYYY-MM-DD HH:mm:ss"
+        value={state.endValue}
+        placeholder="End"
+        onChange={onEndChange}
+        open={state.endOpen}
+        onOpenChange={handleEndOpenChange}
+      />
+    </Space>
+  );
+};
 ```
--- a/components/date-picker/generatePicker/generateSinglePicker.tsx
+++ b/components/date-picker/generatePicker/generateSinglePicker.tsx
@ -9,7 +9,7 @@ import type { GenerateConfig } from 'rc-picker/lib/generate/index';
 import { forwardRef, useContext } from 'react';
 import enUS from '../locale/en_US';
 import { getPlaceholder, transPlacement2DropdownAlign } from '../util';
-import devWarning from '../../_util/devWarning';
+import warning from '../../_util/warning';
 import { ConfigContext } from '../../config-provider';
 import LocaleReceiver from '../../locale-provider/LocaleReceiver';
 import SizeContext from '../../config-provider/SizeContext';
@ -46,13 +46,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
        ...restProps
      } = props;

-      devWarning(
-        picker !== 'quarter',
-        displayName!,
-        `DatePicker.${displayName} is legacy usage. Please use DatePicker[picker='${picker}'] directly.`,
-      );
-
-      devWarning(
+      warning(
        picker !== 'quarter',
        displayName!,
        `DatePicker.${displayName} is legacy usage. Please use DatePicker[picker='${picker}'] directly.`,
--- a/components/descriptions/tests/index.test.js
+++ b/components/descriptions/tests/index.test.js
@ -3,7 +3,7 @@ import MockDate from 'mockdate';
 import { mount } from 'enzyme';
 import Descriptions from '..';
 import mountTest from '../../../tests/shared/mountTest';
-import { resetWarned } from '../../_util/devWarning';
+import { resetWarned } from '../../_util/warning';

 describe('Descriptions', () => {
  mountTest(Descriptions);
--- a/components/descriptions/demo/size.md
+++ b/components/descriptions/demo/size.md
@ -16,72 +16,60 @@ Custom sizes to fit in a variety of containers.
 ```jsx
 import { Descriptions, Radio, Button } from 'antd';

-class Demo extends React.Component {
-  state = {
-    size: 'default',
-  };
+export default () => {
+  const [size, setSize] = React.useState('default');

-  onChange = e => {
+  const onChange = e => {
    console.log('size checked', e.target.value);
-    this.setState({
-      size: e.target.value,
-    });
+    setSize(e.target.value);
  };

-  render() {
-    return (
-      <div>
-        <Radio.Group onChange={this.onChange} value={this.state.size}>
-          <Radio value="default">default</Radio>
-          <Radio value="middle">middle</Radio>
-          <Radio value="small">small</Radio>
-        </Radio.Group>
-        <br />
-        <br />
-        <Descriptions
-          bordered
-          title="Custom Size"
-          size={this.state.size}
-          extra={<Button type="primary">Edit</Button>}
-        >
-          <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
-          <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
-          <Descriptions.Item label="time">18:00:00</Descriptions.Item>
-          <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
-          <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
-          <Descriptions.Item label="Official">$60.00</Descriptions.Item>
-          <Descriptions.Item label="Config Info">
-            Data disk type: MongoDB
-            <br />
-            Database version: 3.4
-            <br />
-            Package: dds.mongo.mid
-            <br />
-            Storage space: 10 GB
-            <br />
-            Replication factor: 3
-            <br />
-            Region: East China 1<br />
-          </Descriptions.Item>
-        </Descriptions>
-        <br />
-        <br />
-        <Descriptions
-          title="Custom Size"
-          size={this.state.size}
-          extra={<Button type="primary">Edit</Button>}
-        >
-          <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
-          <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
-          <Descriptions.Item label="time">18:00:00</Descriptions.Item>
-          <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
-          <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
-          <Descriptions.Item label="Official">$60.00</Descriptions.Item>
-        </Descriptions>
-      </div>
-    );
-  }
-}
-
-export default Demo;
+  return (
+    <div>
+      <Radio.Group onChange={onChange} value={size}>
+        <Radio value="default">default</Radio>
+        <Radio value="middle">middle</Radio>
+        <Radio value="small">small</Radio>
+      </Radio.Group>
+      <br />
+      <br />
+      <Descriptions
+        bordered
+        title="Custom Size"
+        size={size}
+        extra={<Button type="primary">Edit</Button>}
+      >
+        <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
+        <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
+        <Descriptions.Item label="time">18:00:00</Descriptions.Item>
+        <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
+        <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
+        <Descriptions.Item label="Official">$60.00</Descriptions.Item>
+        <Descriptions.Item label="Config Info">
+          Data disk type: MongoDB
+          <br />
+          Database version: 3.4
+          <br />
+          Package: dds.mongo.mid
+          <br />
+          Storage space: 10 GB
+          <br />
+          Replication factor: 3
+          <br />
+          Region: East China 1<br />
+        </Descriptions.Item>
+      </Descriptions>
+      <br />
+      <br />
+      <Descriptions title="Custom Size" size={size} extra={<Button type="primary">Edit</Button>}>
+        <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
+        <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
+        <Descriptions.Item label="time">18:00:00</Descriptions.Item>
+        <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
+        <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
+        <Descriptions.Item label="Official">$60.00</Descriptions.Item>
+      </Descriptions>
+    </div>
+  );
+};
 ```
--- a/components/descriptions/index.tsx
+++ b/components/descriptions/index.tsx
@ -4,7 +4,7 @@ import classNames from 'classnames';
 import toArray from 'rc-util/lib/Children/toArray';
 import type { Breakpoint, ScreenMap } from '../_util/responsiveObserve';
 import ResponsiveObserve, { responsiveArray } from '../_util/responsiveObserve';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import Row from './Row';
 import DescriptionsItem from './Item';
@ -54,7 +54,7 @@ function getFilledItem(
    clone = cloneElement(node, {
      span: rowRestCol,
    });
-    devWarning(
+    warning(
      span === undefined,
      'Descriptions',
      'Sum of column `span` in a line not match `column` of Descriptions.',
--- a/components/dropdown/dropdown.tsx
+++ b/components/dropdown/dropdown.tsx
@ -4,7 +4,7 @@ import classNames from 'classnames';
 import RightOutlined from '@ant-design/icons/RightOutlined';
 import DropdownButton from './dropdown-button';
 import { ConfigContext } from '../config-provider';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import { tuple } from '../_util/type';
 import { cloneElement } from '../_util/reactNode';
 import getPlacements from '../_util/placements';
@ -105,7 +105,7 @@ const Dropdown: DropdownInterface = props => {
    const overlayProps = overlayNode.props;

    // Warning if use other mode
-    devWarning(
+    warning(
      !overlayProps.mode || overlayProps.mode === 'vertical',
      'Dropdown',
      `mode="${overlayProps.mode}" is not supported for Dropdown's Menu.`,
@ -143,7 +143,7 @@ const Dropdown: DropdownInterface = props => {

    if (placement.includes('Center')) {
      const newPlacement = placement.slice(0, placement.indexOf('Center'));
-      devWarning(
+      warning(
        !placement.includes('Center'),
        'Dropdown',
        `You are using '${placement}' placement in Dropdown, which is deprecated. Try to use '${newPlacement}' instead.`,
--- a/components/form/FormItem.tsx
+++ b/components/form/FormItem.tsx
@ -16,7 +16,7 @@ import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
 import Row from '../grid/row';
 import { ConfigContext } from '../config-provider';
 import { tuple } from '../_util/type';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import type { FormItemLabelProps, LabelTooltipType } from './FormItemLabel';
 import FormItemLabel from './FormItemLabel';
 import type { FormItemInputProps } from './FormItemInput';
@ -77,7 +77,7 @@ export interface FormItemProps<Values = any>

 function hasValidName(name?: NamePath): Boolean {
  if (name === null) {
-    devWarning(false, 'Form.Item', '`null` is passed as `name` property');
+    warning(false, 'Form.Item', '`null` is passed as `name` property');
  }
  return !(name === undefined || name === null);
 }
@ -387,33 +387,33 @@ function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElemen

        let childNode: React.ReactNode = null;

-        devWarning(
+        warning(
          !(shouldUpdate && dependencies),
          'Form.Item',
          "`shouldUpdate` and `dependencies` shouldn't be used together. See https://ant.design/components/form/#dependencies.",
        );
        if (Array.isArray(children) && hasName) {
-          devWarning(false, 'Form.Item', '`children` is array of render props cannot have `name`.');
+          warning(false, 'Form.Item', '`children` is array of render props cannot have `name`.');
          childNode = children;
        } else if (isRenderProps && (!(shouldUpdate || dependencies) || hasName)) {
-          devWarning(
+          warning(
            !!(shouldUpdate || dependencies),
            'Form.Item',
            '`children` of render props only work with `shouldUpdate` or `dependencies`.',
          );
-          devWarning(
+          warning(
            !hasName,
            'Form.Item',
            "Do not use `name` with `children` of render props since it's not a field.",
          );
        } else if (dependencies && !isRenderProps && !hasName) {
-          devWarning(
+          warning(
            false,
            'Form.Item',
            'Must set `name` or use render props when `dependencies` is set.',
          );
        } else if (isValidElement(children)) {
-          devWarning(
+          warning(
            children.props.defaultValue === undefined,
            'Form.Item',
            '`defaultValue` will not work on controlled Field. You should use `initialValues` of Form instead.',
@ -449,7 +449,7 @@ function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElemen
        } else if (isRenderProps && (shouldUpdate || dependencies) && !hasName) {
          childNode = (children as RenderChildren)(context);
        } else {
-          devWarning(
+          warning(
            !mergedName.length,
            'Form.Item',
            '`name` is only used for validate React element. If you are using Form.Item as layout display, please remove `name` instead.',
--- a/components/form/FormList.tsx
+++ b/components/form/FormList.tsx
@ -1,7 +1,7 @@
 import * as React from 'react';
 import { List } from 'rc-field-form';
 import type { ValidatorRule, StoreValue } from 'rc-field-form/lib/interface';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import { FormItemPrefixContext } from './context';

@ -33,7 +33,7 @@ const FormList: React.FC<FormListProps> = ({
  children,
  ...props
 }) => {
-  devWarning(!!props.name, 'Form.List', 'Miss `name` prop.');
+  warning(!!props.name, 'Form.List', 'Miss `name` prop.');

  const { getPrefixCls } = React.useContext(ConfigContext);
  const prefixCls = getPrefixCls('form', customizePrefixCls);
--- a/components/form/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/form/tests/snapshots/demo-extend.test.ts.snap
@ -12877,7 +12877,7 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
                          type="button"
                        >
                          <span>
-                            Ok
+                            OK
                          </span>
                        </button>
                      </li>
@ -16370,7 +16370,7 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
                          type="button"
                        >
                          <span>
-                            Ok
+                            OK
                          </span>
                        </button>
                      </li>
@ -17808,7 +17808,7 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
                          type="button"
                        >
                          <span>
-                            Ok
+                            OK
                          </span>
                        </button>
                      </li>
@ -22073,7 +22073,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
                          type="button"
                        >
                          <span>
-                            Ok
+                            OK
                          </span>
                        </button>
                      </li>
--- a/components/form/index.tsx
+++ b/components/form/index.tsx
@ -4,7 +4,7 @@ import Item, { FormItemProps } from './FormItem';
 import ErrorList, { ErrorListProps } from './ErrorList';
 import List, { FormListProps } from './FormList';
 import { FormProvider } from './context';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import useFormInstance from './hooks/useFormInstance';

 type InternalFormType = typeof InternalForm;
@ -32,7 +32,7 @@ Form.useFormInstance = useFormInstance;
 Form.useWatch = useWatch;
 Form.Provider = FormProvider;
 Form.create = () => {
-  devWarning(
+  warning(
    false,
    'Form',
    'antd v4 removed `Form.create`. Please remove or use `@ant-design/compatible` instead.',
--- a/components/icon/index.tsx
+++ b/components/icon/index.tsx
@ -1,7 +1,7 @@
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';

 const Icon = () => {
-  devWarning(false, 'Icon', 'Empty Icon');
+  warning(false, 'Icon', 'Empty Icon');
  return null;
 };

--- a/components/input/Input.tsx
+++ b/components/input/Input.tsx
@ -12,7 +12,7 @@ import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
 import { ConfigContext } from '../config-provider';
 import { FormItemInputContext, NoFormStatus } from '../form/context';
 import { hasPrefixSuffix } from './utils';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';

 export interface InputFocusOptions extends FocusOptions {
  cursor?: 'start' | 'end' | 'all';
@ -158,7 +158,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
  const prevHasPrefixSuffix = useRef<boolean>(inputHasPrefixSuffix);
  useEffect(() => {
    if (inputHasPrefixSuffix && !prevHasPrefixSuffix.current) {
-      devWarning(
+      warning(
        document.activeElement === inputRef.current?.input,
        'Input',
        `When Input is focused, dynamic add or remove prefix / suffix will make it lose focus caused by dom structure change. Read more: https://ant.design/components/input/#FAQ`,
--- a/components/input/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/input/tests/snapshots/demo-extend.test.ts.snap
@ -2800,7 +2800,7 @@ Array [
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
--- a/components/list/Item.tsx
+++ b/components/list/Item.tsx
@ -63,7 +63,7 @@ export const Meta: FC<ListItemMetaProps> = ({
 };

 export interface ListItemTypeProps
-  extends ForwardRefExoticComponent<ListItemMetaProps & React.RefAttributes<HTMLElement>> {
+  extends ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLElement>> {
  Meta: typeof Meta;
 }

--- a/components/list/tests/pagination.test.js
+++ b/components/list/tests/pagination.test.js
@ -1,6 +1,7 @@
 import React from 'react';
 import { render, mount } from 'enzyme';
 import List from '..';
+import { noop } from '../../_util/warning';

 describe('List.pagination', () => {
  const data = [
@ -65,7 +66,6 @@ describe('List.pagination', () => {

  it('fires change event', () => {
    const handlePaginationChange = jest.fn();
-    const noop = () => {};
    const wrapper = mount(
      createList({
        pagination: {
--- a/components/locale-provider/tests/snapshots/index.test.js.snap
+++ b/components/locale-provider/tests/snapshots/index.test.js.snap
@ -24451,7 +24451,7 @@ exports[`Locale Provider should display the text as by 1`] = `
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -34625,7 +34625,7 @@ exports[`Locale Provider should display the text as cs 1`] = `
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -39712,7 +39712,7 @@ exports[`Locale Provider should display the text as da 1`] = `
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -49886,7 +49886,7 @@ exports[`Locale Provider should display the text as el 1`] = `
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -54973,7 +54973,7 @@ exports[`Locale Provider should display the text as en 1`] = `
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -60060,7 +60060,7 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -61497,7 +61497,7 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
            <div
              class="ant-empty-description"
            >
-              No data
+              No Data
            </div>
          </div>
        </div>
@ -61722,7 +61722,7 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
            <div
              class="ant-empty-description"
            >
-              No data
+              No Data
            </div>
          </div>
        </div>
@ -62794,7 +62794,7 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
                        <div
                          class="ant-empty-description"
                        >
-                          No data
+                          No Data
                        </div>
                      </div>
                    </td>
@ -70234,7 +70234,7 @@ exports[`Locale Provider should display the text as et 1`] = `
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -80408,7 +80408,7 @@ exports[`Locale Provider should display the text as fi 1`] = `
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -85495,7 +85495,7 @@ exports[`Locale Provider should display the text as fr 1`] = `
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -90582,7 +90582,7 @@ exports[`Locale Provider should display the text as fr 2`] = `
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -95669,7 +95669,7 @@ exports[`Locale Provider should display the text as fr 3`] = `
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -121104,7 +121104,7 @@ exports[`Locale Provider should display the text as hr 1`] = `
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -126191,7 +126191,7 @@ exports[`Locale Provider should display the text as hu 1`] = `
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -146539,7 +146539,7 @@ exports[`Locale Provider should display the text as it 1`] = `
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -156713,7 +156713,7 @@ exports[`Locale Provider should display the text as ka 1`] = `
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -197409,7 +197409,7 @@ exports[`Locale Provider should display the text as lv 1`] = `
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -212670,7 +212670,7 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -217757,7 +217757,7 @@ exports[`Locale Provider should display the text as ms-my 1`] = `
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -222844,7 +222844,7 @@ exports[`Locale Provider should display the text as nb 1`] = `
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -227931,7 +227931,7 @@ exports[`Locale Provider should display the text as ne-np 1`] = `
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -233018,7 +233018,7 @@ exports[`Locale Provider should display the text as nl 1`] = `
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -238105,7 +238105,7 @@ exports[`Locale Provider should display the text as nl-be 1`] = `
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -243192,7 +243192,7 @@ exports[`Locale Provider should display the text as pl 1`] = `
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -253366,7 +253366,7 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -258453,7 +258453,7 @@ exports[`Locale Provider should display the text as ro 1`] = `
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -268627,7 +268627,7 @@ exports[`Locale Provider should display the text as sk 1`] = `
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -283888,7 +283888,7 @@ exports[`Locale Provider should display the text as sv 1`] = `
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -304236,7 +304236,7 @@ exports[`Locale Provider should display the text as uk 1`] = `
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -314410,7 +314410,7 @@ exports[`Locale Provider should display the text as vi 1`] = `
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
--- a/components/locale-provider/index.tsx
+++ b/components/locale-provider/index.tsx
@ -1,7 +1,7 @@
 import * as React from 'react';
 import memoizeOne from 'memoize-one';
 import type { ValidateMessages } from 'rc-field-form/lib/interface';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';

 import type { ModalLocale } from '../modal/locale';
 import { changeConfirmLocale } from '../modal/locale';
@ -62,7 +62,7 @@ export default class LocaleProvider extends React.Component<LocaleProviderProps,
    super(props);
    changeConfirmLocale(props.locale && props.locale.Modal);

-    devWarning(
+    warning(
      props._ANT_MARK__ === ANT_MARK,
      'LocaleProvider',
      '`LocaleProvider` is deprecated. Please use `locale` with `ConfigProvider` instead: http://u.ant.design/locale',
--- a/components/locale/en_GB.tsx
+++ b/components/locale/en_GB.tsx
@ -13,11 +13,16 @@ const localeValues: Locale = {
  DatePicker,
  TimePicker,
  Calendar,
+  global: {
+    placeholder: 'Please select',
+  },
  Table: {
    filterTitle: 'Filter menu',
    filterConfirm: 'OK',
    filterReset: 'Reset',
    filterEmptyText: 'No filters',
+    filterCheckall: 'Select all items',
+    filterSearchPlaceholder: 'Search in filters',
    emptyText: 'No data',
    selectAll: 'Select current page',
    selectInvert: 'Invert current page',
@ -40,9 +45,16 @@ const localeValues: Locale = {
    cancelText: 'Cancel',
  },
  Transfer: {
+    titles: ['', ''],
    searchPlaceholder: 'Search here',
    itemUnit: 'item',
    itemsUnit: 'items',
+    remove: 'Remove',
+    selectCurrent: 'Select current page',
+    removeCurrent: 'Remove current page',
+    selectAll: 'Select all data',
+    removeAll: 'Remove all data',
+    selectInvert: 'Invert current page',
  },
  Upload: {
    uploading: 'Uploading...',
@ -52,9 +64,22 @@ const localeValues: Locale = {
    downloadFile: 'Download file',
  },
  Empty: {
-    description: 'No data',
+    description: 'No Data',
+  },
+  Icon: {
+    icon: 'icon',
+  },
+  Text: {
+    edit: 'Edit',
+    copy: 'Copy',
+    copied: 'Copied',
+    expand: 'Expand',
+  },
+  PageHeader: {
+    back: 'Back',
  },
  Form: {
+    optional: '(optional)',
    defaultValidateMessages: {
      default: 'Field validation error for ${label}',
      required: 'Please enter ${label}',
@ -103,6 +128,9 @@ const localeValues: Locale = {
      },
    },
  },
+  Image: {
+    preview: 'Preview',
+  },
 };

 export default localeValues;
--- a/components/locale/uk_UA.tsx
+++ b/components/locale/uk_UA.tsx
@ -1,21 +1,39 @@
+/* eslint-disable no-template-curly-in-string */
 import Pagination from 'rc-pagination/lib/locale/uk_UA';
 import DatePicker from '../date-picker/locale/uk_UA';
 import TimePicker from '../time-picker/locale/uk_UA';
 import Calendar from '../calendar/locale/uk_UA';
 import type { Locale } from '../locale-provider';

+const typeTemplate = '${label} не є типом ${type}';
+
 const localeValues: Locale = {
  locale: 'uk',
  Pagination,
  DatePicker,
  TimePicker,
  Calendar,
+  global: {
+    placeholder: 'Будь ласка, оберіть',
+  },
  Table: {
    filterTitle: 'Фільтрувати',
    filterConfirm: 'OK',
    filterReset: 'Скинути',
-    selectAll: 'Обрати всі',
+    filterEmptyText: 'Фільтри відсутні',
+    filterCheckall: 'Обрати всі',
+    filterSearchPlaceholder: 'Пошук у фільтрах',
+    emptyText: 'Даних немає',
+    selectAll: 'Обрати всі на сторінці',
    selectInvert: 'Інвертувати вибір',
+    selectNone: 'Очистити вибір',
+    selectionAll: 'Обрати всі',
+    sortTitle: 'Сортувати',
+    expand: 'Розгорнути рядок',
+    collapse: 'Згорнути рядок',
+    triggerDesc: 'Сортувати за спаданням',
+    triggerAsc: 'Сортувати за зростанням',
+    cancelSort: 'Відмінити сортування',
  },
  Modal: {
    okText: 'Гаразд',
@ -27,9 +45,16 @@ const localeValues: Locale = {
    cancelText: 'Скасувати',
  },
  Transfer: {
+    titles: ['', ''],
    searchPlaceholder: 'Введіть текст для пошуку',
    itemUnit: 'елем.',
    itemsUnit: 'елем.',
+    remove: 'Видалити',
+    selectCurrent: 'Вибрати поточну сторінку',
+    removeCurrent: 'Скасувати вибір на сторінці',
+    selectAll: 'Вибрати всі дані',
+    removeAll: 'Скасувати вибір',
+    selectInvert: 'Інвертувати поточну сторінку',
  },
  Upload: {
    uploading: 'Завантаження ...',
@ -41,6 +66,71 @@ const localeValues: Locale = {
  Empty: {
    description: 'Даних немає',
  },
+  Icon: {
+    icon: 'іконка',
+  },
+  Text: {
+    edit: 'Редагувати',
+    copy: 'Скопіювати',
+    copied: 'Скопійовано',
+    expand: 'Розширити',
+  },
+  PageHeader: {
+    back: 'Назад',
+  },
+  Form: {
+    optional: '(опціонально)',
+    defaultValidateMessages: {
+      default: 'Помилка валідації для поля ${label}',
+      required: 'Будь ласка, заповніть ${label}',
+      enum: 'Лише одне зі значень [${enum}] доступне для ${label}',
+      whitespace: 'Значення у полі ${label} не може бути пробілом',
+      date: {
+        format: 'Не валідний формат дати у ${label}',
+        parse: 'Значення ${label} не може бути приведене до дати',
+        invalid: 'Не валідна дата у ${label}',
+      },
+      types: {
+        string: typeTemplate,
+        method: typeTemplate,
+        array: typeTemplate,
+        object: typeTemplate,
+        number: typeTemplate,
+        date: typeTemplate,
+        boolean: typeTemplate,
+        integer: typeTemplate,
+        float: typeTemplate,
+        regexp: typeTemplate,
+        email: typeTemplate,
+        url: typeTemplate,
+        hex: typeTemplate,
+      },
+      string: {
+        len: '${label} має містити ${len} символів',
+        min: '${label} має містити не менш, ніж ${min} символів',
+        max: '${label} має містити не більш, ніж ${max} символів',
+        range: '${label} має містити ${min}-${max} символів',
+      },
+      number: {
+        len: '${label} має дорівнювати ${len}',
+        min: '${label} має бути не менш, ніж ${min}',
+        max: '${label} має бути не більш, ніж ${max}',
+        range: '${label} має бути в межах ${min}-${max}',
+      },
+      array: {
+        len: '${label} має містити ${len} елементи',
+        min: '${label} має містити не менш, ніж ${min} елементи',
+        max: '${label} має містити не більш, ніж ${max} елементи',
+        range: 'Кількість елементів в ${label} має бути в межах ${min}-${max}',
+      },
+      pattern: {
+        mismatch: '${label} не відповідає шаблону ${pattern}',
+      },
+    },
+  },
+  Image: {
+    preview: 'Попередній перегляд',
+  },
 };

 export default localeValues;
--- a/components/menu/tests/index.test.js
+++ b/components/menu/tests/index.test.js
@ -15,13 +15,12 @@ import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { render, fireEvent } from '../../../tests/utils';
 import collapseMotion from '../../_util/motion';
+import { noop } from '../../_util/warning';

 globalThis.IS_REACT_ACT_ENVIRONMENT = true;

 const { SubMenu } = Menu;

-const noop = () => {};
-
 describe('Menu', () => {
  function triggerAllTimer() {
    for (let i = 0; i < 10; i += 1) {
--- a/components/menu/index.en-US.md
+++ b/components/menu/index.en-US.md
@ -29,11 +29,12 @@ ReactDOM.render(<Alert message="After version 4.20.0, we provide a simpler usage
 ```jsx
 // works when >=4.20.0, recommended ✅
 const items = [
-  { label: 'item 1' },
-  { label: 'item 2' },
+  { label: 'item 1', key: 'item-1' }, // remember to pass the key prop
+  { label: 'item 2', key: 'item-2' }, // which is required
  {
    label: 'sub menu',
-    children: [{ label: 'item 3' }],
+    key: 'submenu'
+    children: [{ label: 'item 3', key: 'submenu-item-1' }],
  },
 ];
 return <Menu items={items} />;
@ -138,7 +139,7 @@ Define `type` as `group` to make as group:
 const groupItem = {
  type: 'group', // Must have
  label: 'My Group',
-  chidlren: [],
+  children: [],
 };
 ```

--- a/components/menu/index.tsx
+++ b/components/menu/index.tsx
@ -8,7 +8,7 @@ import { forwardRef } from 'react';
 import SubMenu, { SubMenuProps } from './SubMenu';
 import Item, { MenuItemProps } from './MenuItem';
 import { ConfigContext } from '../config-provider';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import type { SiderContextProps } from '../layout/Sider';
 import { SiderContext } from '../layout/Sider';
 import collapseMotion from '../_util/motion';
@ -67,19 +67,19 @@ const InternalMenu = forwardRef<MenuRef, InternalMenuProps>((props, ref) => {
  const mergedChildren = useItems(items) || children;

  // ======================== Warning ==========================
-  devWarning(
+  warning(
    !('inlineCollapsed' in props && props.mode !== 'inline'),
    'Menu',
    '`inlineCollapsed` should only be used when `mode` is inline.',
  );

-  devWarning(
+  warning(
    !(props.siderCollapsed !== undefined && 'inlineCollapsed' in props),
    'Menu',
    '`inlineCollapsed` not control Menu under Sider. Should set `collapsed` on Sider instead.',
  );

-  devWarning(
+  warning(
    !!items && !children,
    'Menu',
    '`children` will be removed in next major version. Please use `items` instead.',
--- a/components/menu/index.zh-CN.md
+++ b/components/menu/index.zh-CN.md
@ -30,11 +30,12 @@ ReactDOM.render(<Alert message="在 4.20.0 版本后，我们提供了 <Menu ite
 ```jsx
 // >=4.20.0 可用，推荐的写法 ✅
 const items = [
-  { label: '菜单项一' },
-  { label: '菜单项二' },
+  { label: '菜单项一', key: 'item-1' }, // 菜单项务必填写 key
+  { label: '菜单项二', key: 'item-2' },
  {
    label: '子菜单',
-    children: [{ label: '子菜单项' }],
+    key: 'submenu',
+    children: [{ label: '子菜单项', key: 'submenu-item-1' }],
  },
 ];
 return <Menu items={items} />;
@ -138,7 +139,7 @@ return <Menu items={items} />;
 const groupItem = {
  type: 'group', // Must have
  label: 'My Group',
-  chidlren: [],
+  children: [],
 };
 ```

--- a/components/modal/ConfirmDialog.tsx
+++ b/components/modal/ConfirmDialog.tsx
@ -3,7 +3,7 @@ import classNames from 'classnames';
 import type { ModalFuncProps } from './Modal';
 import Dialog from './Modal';
 import ActionButton from '../_util/ActionButton';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import ConfigProvider from '../config-provider';
 import { getTransitionName } from '../_util/motion';

@ -44,7 +44,7 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
    focusTriggerAfterClose,
  } = props;

-  devWarning(
+  warning(
    !(typeof icon === 'string' && icon.length > 2),
    'Modal',
    `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`,
--- a/components/modal/confirm.tsx
+++ b/components/modal/confirm.tsx
@ -8,7 +8,7 @@ import { getConfirmLocale } from './locale';
 import type { ModalFuncProps } from './Modal';
 import ConfirmDialog from './ConfirmDialog';
 import { globalConfig } from '../config-provider';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import destroyFns from './destroyFns';

 let defaultRootPrefixCls = '';
@ -159,10 +159,6 @@ export function withConfirm(props: ModalFuncProps): ModalFuncProps {
 }

 export function modalGlobalConfig({ rootPrefixCls }: { rootPrefixCls: string }) {
-  devWarning(
-    false,
-    'Modal',
-    'Modal.config is deprecated. Please use ConfigProvider.config instead.',
-  );
+  warning(false, 'Modal', 'Modal.config is deprecated. Please use ConfigProvider.config instead.');
  defaultRootPrefixCls = rootPrefixCls;
 }
--- a/components/progress/progress.tsx
+++ b/components/progress/progress.tsx
@ -7,7 +7,7 @@ import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
 import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
 import { ConfigContext } from '../config-provider';
 import { tuple } from '../_util/type';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import Line from './Line';
 import Circle from './Circle';
 import Steps from './Steps';
@ -101,7 +101,7 @@ const Progress: React.FC<ProgressProps> = (props: ProgressProps) => {
  const progressStatus = getProgressStatus();
  const progressInfo = renderProcessInfo(prefixCls, progressStatus);

-  devWarning(
+  warning(
    !('successPercent' in props),
    'Progress',
    '`successPercent` is deprecated. Please use `success.percent` instead.',
--- a/components/progress/utils.ts
+++ b/components/progress/utils.ts
@ -1,4 +1,4 @@
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';

 export function validProgress(progress: number | undefined) {
  if (!progress || progress < 0) {
@ -23,7 +23,7 @@ export function getSuccessPercent({
  let percent = successPercent;
  /** @deprecated Use `percent` instead */
  if (success && 'progress' in success) {
-    devWarning(
+    warning(
      false,
      'Progress',
      '`success.progress` is deprecated. Please use `success.percent` instead.',
--- a/components/radio/radio.tsx
+++ b/components/radio/radio.tsx
@ -8,7 +8,7 @@ import type { RadioProps, RadioChangeEvent } from './interface';
 import { ConfigContext } from '../config-provider';
 import RadioGroupContext, { RadioOptionTypeContext } from './context';
 import DisabledContext from '../config-provider/DisabledContext';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';

 const InternalRadio: React.ForwardRefRenderFunction<HTMLElement, RadioProps> = (props, ref) => {
  const groupContext = React.useContext(RadioGroupContext);
@ -19,9 +19,7 @@ const InternalRadio: React.ForwardRefRenderFunction<HTMLElement, RadioProps> = (
  const mergedRef = composeRef(ref, innerRef);
  const { isFormItemInput } = useContext(FormItemInputContext);

-  React.useEffect(() => {
-    devWarning(!('optionType' in props), 'Radio', '`optionType` is only support in Radio.Group.');
-  }, []);
+  warning(!('optionType' in props), 'Radio', '`optionType` is only support in Radio.Group.');

  const onChange = (e: RadioChangeEvent) => {
    props.onChange?.(e);
--- a/components/result/index.tsx
+++ b/components/result/index.tsx
@ -6,7 +6,7 @@ import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
 import WarningFilled from '@ant-design/icons/WarningFilled';

 import { ConfigContext } from '../config-provider';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';

 import noFound from './noFound';
 import serverError from './serverError';
@ -52,7 +52,7 @@ const ExceptionStatus = Object.keys(ExceptionMap);
 const renderIcon = (prefixCls: string, { status, icon }: ResultProps) => {
  const className = classNames(`${prefixCls}-icon`);

-  devWarning(
+  warning(
    !(typeof icon === 'string' && icon.length > 2),
    'Result',
    `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`,
--- a/components/switch/tests/index.test.js
+++ b/components/switch/tests/index.test.js
@ -2,7 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import Switch from '..';
 import focusTest from '../../../tests/shared/focusTest';
-import { resetWarned } from '../../_util/devWarning';
+import { resetWarned } from '../../_util/warning';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { sleep } from '../../../tests/utils';
--- a/components/switch/index.tsx
+++ b/components/switch/index.tsx
@ -7,7 +7,7 @@ import Wave from '../_util/wave';
 import { ConfigContext } from '../config-provider';
 import SizeContext from '../config-provider/SizeContext';
 import DisabledContext from '../config-provider/DisabledContext';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';

 export type SwitchSize = 'small' | 'default';
 export type SwitchChangeEventHandler = (checked: boolean, event: MouseEvent) => void;
@ -49,7 +49,7 @@ const Switch = React.forwardRef<unknown, SwitchProps>(
    },
    ref,
  ) => {
-    devWarning(
+    warning(
      'checked' in props || !('value' in props),
      'Switch',
      '`value` is not a valid prop, do you mean `checked`?',
--- a/components/table/Table.tsx
+++ b/components/table/Table.tsx
@ -46,7 +46,7 @@ import type { SizeType } from '../config-provider/SizeContext';
 import SizeContext from '../config-provider/SizeContext';
 import Column from './Column';
 import ColumnGroup from './ColumnGroup';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import useBreakpoint from '../grid/hooks/useBreakpoint';

 export { ColumnsType, TablePaginationConfig };
@ -137,7 +137,7 @@ function InternalTable<RecordType extends object = any>(
    showSorterTooltip = true,
  } = props;

-  devWarning(
+  warning(
    !(typeof rowKey === 'function' && rowKey.length > 1),
    'Table',
    '`index` parameter of `rowKey` function is deprecated. There is no guarantee that it will work as expected.',
@ -355,12 +355,12 @@ function InternalTable<RecordType extends object = any>(
    }

    const { current = 1, total, pageSize = DEFAULT_PAGE_SIZE } = mergedPagination;
-    devWarning(current > 0, 'Table', '`current` should be positive number.');
+    warning(current > 0, 'Table', '`current` should be positive number.');

    // Dynamic table data
    if (mergedData.length < total!) {
      if (mergedData.length > pageSize) {
-        devWarning(
+        warning(
          false,
          'Table',
          '`dataSource` length is less than `pagination.total` but large than `pagination.pageSize`. Please make sure your config correct data with async mode.',
--- a/components/table/tests/Table.order.test.js
+++ b/components/table/tests/Table.order.test.js
@ -1,7 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import Table from '..';
-import { resetWarned } from '../../_util/devWarning';
+import { resetWarned } from '../../_util/warning';

 describe('Table.order', () => {
  window.requestAnimationFrame = callback => window.setTimeout(callback, 16);
--- a/components/table/tests/Table.pagination.test.js
+++ b/components/table/tests/Table.pagination.test.js
@ -5,7 +5,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import Table from '..';
 import scrollTo from '../../_util/scrollTo';
-import { resetWarned } from '../../_util/devWarning';
+import { resetWarned } from '../../_util/warning';

 describe('Table.pagination', () => {
  const columns = [
--- a/components/table/tests/Table.rowSelection.test.js
+++ b/components/table/tests/Table.rowSelection.test.js
@ -3,7 +3,7 @@ import { act } from 'react-dom/test-utils';
 import { mount } from 'enzyme';
 import Table from '..';
 import Checkbox from '../../checkbox';
-import { resetWarned } from '../../_util/devWarning';
+import { resetWarned } from '../../_util/warning';
 import ConfigProvider from '../../config-provider';
 import { render } from '../../../tests/utils';

--- a/components/table/hooks/useFilter/index.tsx
+++ b/components/table/hooks/useFilter/index.tsx
@ -1,5 +1,5 @@
 import * as React from 'react';
-import devWarning from '../../../_util/devWarning';
+import warning from '../../../_util/warning';
 import type {
  TransformColumns,
  ColumnsType,
@ -226,7 +226,7 @@ function useFilter<RecordType>({
      return filterStates;
    }

-    devWarning(
+    warning(
      filteredKeysIsAllControlled,
      'Table',
      'Columns should all contain `filteredValue` or not contain `filteredValue`.',
--- a/components/table/hooks/useSelection.tsx
+++ b/components/table/hooks/useSelection.tsx
@ -13,7 +13,7 @@ import Checkbox from '../../checkbox';
 import Dropdown from '../../dropdown';
 import Menu from '../../menu';
 import Radio from '../../radio';
-import devWarning from '../../_util/devWarning';
+import warning from '../../_util/warning';
 import type {
  TableRowSelection,
  Key,
@ -171,16 +171,11 @@ export default function useSelection<RecordType>(
      const checkboxProps = (getCheckboxProps ? getCheckboxProps(record) : null) || {};
      map.set(key, checkboxProps);

-      if (
-        process.env.NODE_ENV !== 'production' &&
-        ('checked' in checkboxProps || 'defaultChecked' in checkboxProps)
-      ) {
-        devWarning(
-          false,
-          'Table',
-          'Do not set `checked` or `defaultChecked` in `getCheckboxProps`. Please use `selectedRowKeys` instead.',
-        );
-      }
+      warning(
+        !('checked' in checkboxProps || 'defaultChecked' in checkboxProps),
+        'Table',
+        'Do not set `checked` or `defaultChecked` in `getCheckboxProps`. Please use `selectedRowKeys` instead.',
+      );
    });
    return map;
  }, [flattedData, getRowKey, getCheckboxProps]);
@ -313,7 +308,7 @@ export default function useSelection<RecordType>(

            const keys = Array.from(keySet);
            if (onSelectInvert) {
-              devWarning(
+              warning(
                false,
                'Table',
                '`onSelectInvert` will be removed in future. Please use `onChange` instead.',
@ -349,13 +344,11 @@ export default function useSelection<RecordType>(
    (columns: ColumnsType<RecordType>): ColumnsType<RecordType> => {
      // >>>>>>>>>>> Skip if not exists `rowSelection`
      if (!rowSelection) {
-        if (process.env.NODE_ENV !== 'production') {
-          devWarning(
-            !columns.includes(SELECTION_COLUMN),
-            'Table',
-            '`rowSelection` is not config but `SELECTION_COLUMN` exists in the `columns`.',
-          );
-        }
+        warning(
+          !columns.includes(SELECTION_COLUMN),
+          'Table',
+          '`rowSelection` is not config but `SELECTION_COLUMN` exists in the `columns`.',
+        );

        return columns.filter(col => col !== SELECTION_COLUMN);
      }
@ -504,7 +497,7 @@ export default function useSelection<RecordType>(
          let mergedIndeterminate: boolean;
          if (expandType === 'nest') {
            mergedIndeterminate = indeterminate;
-            devWarning(
+            warning(
              typeof checkboxProps?.indeterminate !== 'boolean',
              'Table',
              'set `indeterminate` using `rowSelection.getCheckboxProps` is not allowed with tree structured dataSource.',
@ -646,12 +639,13 @@ export default function useSelection<RecordType>(

      // Deduplicate selection column
      const selectionColumnIndex = cloneColumns.indexOf(SELECTION_COLUMN);
-      if (
-        process.env.NODE_ENV !== 'production' &&
-        cloneColumns.filter(col => col === SELECTION_COLUMN).length > 1
-      ) {
-        devWarning(false, 'Table', 'Multiple `SELECTION_COLUMN` exist in `columns`.');
-      }
+
+      warning(
+        cloneColumns.filter(col => col === SELECTION_COLUMN).length <= 1,
+        'Table',
+        'Multiple `SELECTION_COLUMN` exist in `columns`.',
+      );
+
      cloneColumns = cloneColumns.filter(
        (column, index) => column !== SELECTION_COLUMN || index === selectionColumnIndex,
      );
--- a/components/table/index.en-US.md
+++ b/components/table/index.en-US.md
@ -128,7 +128,6 @@ One of the Table `columns` prop for describing the table's columns, Column has t
 | defaultFilteredValue | Default filtered values | string\[] | - |  |
 | filterResetToDefaultFilteredValue | click the reset button, whether to restore the default filter | boolean | false |  |
 | defaultSortOrder | Default order of sorted values | `ascend` \| `descend` | - |  |
-| editable | Whether column can be edited | boolean | false |  |
 | ellipsis | The ellipsis cell content, not working with sorter and filters for now.<br />tableLayout would be `fixed` when `ellipsis` is `true` or `{ showTitle?: boolean }` | boolean \| {showTitle?: boolean } | false | showTitle: 4.3.0 |
 | filterDropdown | Customized filter overlay | ReactNode \| (props: [FilterDropdownProps](https://github.com/ant-design/ant-design/blob/ecc54dda839619e921c0ace530408871f0281c2a/components/table/interface.tsx#L79)) => ReactNode | - |  |
 | filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - |  |
@ -317,3 +316,7 @@ Table can not tell what state used in `columns.render`, so it always need fully
 ### How to handle fixed column display over the mask layout?

 Fixed column use `z-index` to make it over other columns. You will find sometime fixed columns also over your mask layout. You can set `z-index` on your mask layout to resolve.
+
+### How to custom render Table Checkbox（For example, adding Tooltip）?
+
+Since `4.1.0`, You can use [`rowSelection.renderCell`](https://ant.design/components/table/#rowSelection) to custom render Table Checkbox. If you want to add Tooltip, please refer to this [demo](https://codesandbox.io/s/table-row-tooltip-v79j2v).
--- a/components/table/index.zh-CN.md
+++ b/components/table/index.zh-CN.md
@ -63,7 +63,6 @@ const columns = [

 ## API

-
 ### Table

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@ -130,7 +129,6 @@ const columns = [
 | defaultFilteredValue | 默认筛选值 | string\[] | - |  |
 | filterResetToDefaultFilteredValue | 点击重置按钮的时候，是否恢复默认筛选值 | boolean | false |  |
 | defaultSortOrder | 默认排序顺序 | `ascend` \| `descend` | - |  |
-| editable | 是否可编辑 | boolean | false |  |
 | ellipsis | 超过宽度将自动省略，暂不支持和排序筛选一起使用。<br />设置为 `true` 或 `{ showTitle?: boolean }` 时，表格布局将变成 `tableLayout="fixed"`。 | boolean \| { showTitle?: boolean } | false | showTitle: 4.3.0 |
 | filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | ReactNode \| (props: [FilterDropdownProps](https://github.com/ant-design/ant-design/blob/ecc54dda839619e921c0ace530408871f0281c2a/components/table/interface.tsx#L79)) => ReactNode | - |  |
 | filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | boolean | - |  |
@ -318,3 +316,7 @@ Table 移除了在 v3 中废弃的 `onRowClick`、`onRowDoubleClick`、`onRowMou
 ### 固定列穿透到最上层该怎么办？

 固定列通过 `z-index` 属性将其悬浮于非固定列之上，这使得有时候你会发现在 Table 上放置遮罩层时固定列会被透过的情况。为遮罩层设置更高的 `z-index` 覆盖住固定列即可。
+
+### 如何自定义渲染可选列的勾选框（比如增加 Tooltip）？
+
+自 `4.1.0` 起，可以通过 [rowSelection](https://ant.design/components/table-cn/#rowSelection) 的 `renderCell` 属性控制，可以参考此处 [Demo](https://codesandbox.io/s/table-row-tooltip-v79j2v) 实现展示 Tooltip 需求或其他自定义的需求。
--- a/components/tabs/index.tsx
+++ b/components/tabs/index.tsx
@ -7,7 +7,7 @@ import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined';
 import PlusOutlined from '@ant-design/icons/PlusOutlined';
 import CloseOutlined from '@ant-design/icons/CloseOutlined';

-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import type { SizeType } from '../config-provider/SizeContext';
 import SizeContext from '../config-provider/SizeContext';
@ -53,7 +53,7 @@ function Tabs({
  }
  const rootPrefixCls = getPrefixCls();

-  devWarning(
+  warning(
    !('onPrevClick' in props) && !('onNextClick' in props),
    'Tabs',
    '`onPrevClick` and `onNextClick` has been removed. Please use `onTabScroll` instead.',
--- a/components/time-picker/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/time-picker/tests/snapshots/demo-extend.test.ts.snap
@ -1314,7 +1314,7 @@ Array [
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -2637,7 +2637,7 @@ Array [
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -3414,7 +3414,7 @@ Array [
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -4838,7 +4838,7 @@ Array [
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -6249,7 +6249,7 @@ Array [
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -7661,7 +7661,7 @@ Array [
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -9115,7 +9115,7 @@ Array [
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -10526,7 +10526,7 @@ Array [
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -11938,7 +11938,7 @@ Array [
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -12828,7 +12828,7 @@ Array [
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -13250,7 +13250,7 @@ Array [
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -14709,7 +14709,7 @@ Array [
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -16144,7 +16144,7 @@ Array [
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -17574,7 +17574,7 @@ Array [
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -19004,7 +19004,7 @@ Array [
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -20422,7 +20422,7 @@ exports[`renders ./components/time-picker/demo/status.md extend context correctl
                    type="button"
                  >
                    <span>
-                      Ok
+                      OK
                    </span>
                  </button>
                </li>
@ -21834,7 +21834,7 @@ exports[`renders ./components/time-picker/demo/status.md extend context correctl
                    type="button"
                  >
                    <span>
-                      Ok
+                      OK
                    </span>
                  </button>
                </li>
@ -23293,7 +23293,7 @@ exports[`renders ./components/time-picker/demo/status.md extend context correctl
                    type="button"
                  >
                    <span>
-                      Ok
+                      OK
                    </span>
                  </button>
                </li>
@ -24751,7 +24751,7 @@ exports[`renders ./components/time-picker/demo/status.md extend context correctl
                    type="button"
                  >
                    <span>
-                      Ok
+                      OK
                    </span>
                  </button>
                </li>
@ -26160,7 +26160,7 @@ Array [
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
@ -27572,7 +27572,7 @@ Array [
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
--- a/components/time-picker/tests/snapshots/index.test.js.snap
+++ b/components/time-picker/tests/snapshots/index.test.js.snap
@ -1467,7 +1467,7 @@ Array [
                  type="button"
                >
                  <span>
-                    Ok
+                    OK
                  </span>
                </button>
              </li>
--- a/components/time-picker/tests/index.test.js
+++ b/components/time-picker/tests/index.test.js
@ -4,7 +4,7 @@ import moment from 'moment';
 import TimePicker from '..';
 import focusTest from '../../../tests/shared/focusTest';
 import mountTest from '../../../tests/shared/mountTest';
-import { resetWarned } from '../../_util/devWarning';
+import { resetWarned } from '../../_util/warning';
 import rtlTest from '../../../tests/shared/rtlTest';

 describe('TimePicker', () => {
--- a/components/time-picker/index.tsx
+++ b/components/time-picker/index.tsx
@ -2,7 +2,7 @@ import type { Moment } from 'moment';
 import * as React from 'react';
 import DatePicker from '../date-picker';
 import type { PickerTimeProps, RangePickerTimeProps } from '../date-picker/generatePicker';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import type { InputStatus } from '../_util/statusUtils';

 const { TimePicker: InternalTimePicker, RangePicker: InternalRangePicker } = DatePicker;
@ -39,7 +39,7 @@ const TimePicker = React.forwardRef<any, TimePickerProps>(
        return renderExtraFooter;
      }
      if (addon) {
-        devWarning(
+        warning(
          false,
          'TimePicker',
          '`addon` is deprecated. Please use `renderExtraFooter` instead.',
--- a/components/transfer/index.tsx
+++ b/components/transfer/index.tsx
@ -10,7 +10,7 @@ import type { ConfigConsumerProps, RenderEmptyHandler } from '../config-provider
 import { ConfigConsumer } from '../config-provider';
 import type { TransferListBodyProps } from './ListBody';
 import type { PaginationType } from './interface';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import { FormItemInputContext } from '../form/context';
 import type { InputStatus } from '../_util/statusUtils';
 import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
@ -136,7 +136,7 @@ class Transfer<RecordType extends TransferItem = TransferItem> extends React.Com
      };
    }

-    devWarning(
+    warning(
      !pagination || !children,
      'Transfer',
      '`pagination` not support customize render list.',
--- a/components/tree-select/index.tsx
+++ b/components/tree-select/index.tsx
@ -7,7 +7,7 @@ import type { BaseOptionType, DefaultOptionType } from 'rc-tree-select/lib/TreeS
 import type { BaseSelectRef } from 'rc-select';
 import { useContext } from 'react';
 import { ConfigContext } from '../config-provider';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import type { AntTreeNodeProps, TreeProps } from '../tree';
 import type { SwitcherIcon } from '../tree/Tree';
 import getIcons from '../select/utils/iconUtil';
@ -90,7 +90,7 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
  } = React.useContext(ConfigContext);
  const size = React.useContext(SizeContext);

-  devWarning(
+  warning(
    multiple !== false || !treeCheckable,
    'TreeSelect',
    '`multiple` will always be `true` when `treeCheckable` is true',
--- a/components/tree/style/rtl.less
+++ b/components/tree/style/rtl.less
@ -56,7 +56,7 @@
  }
  // >>> Checkbox
  &-checkbox {
-    .@{tree-prefix-cls}-rtl& {
+    .@{tree-prefix-cls}-rtl & {
      margin: ((@tree-title-height - @checkbox-size) / 2) 0 0 8px;
    }
  }
--- a/components/typography/Link.tsx
+++ b/components/typography/Link.tsx
@ -1,5 +1,5 @@
 import * as React from 'react';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import type { BlockProps } from './Base';
 import Base from './Base';

@ -13,7 +13,7 @@ const Link: React.ForwardRefRenderFunction<HTMLElement, LinkProps> = (
  { ellipsis, rel, ...restProps },
  ref,
 ) => {
-  devWarning(
+  warning(
    typeof ellipsis !== 'object',
    'Typography.Link',
    '`ellipsis` only supports boolean value.',
--- a/components/typography/Text.tsx
+++ b/components/typography/Text.tsx
@ -1,6 +1,6 @@
 import * as React from 'react';
 import omit from 'rc-util/lib/omit';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import type { BlockProps, EllipsisConfig } from './Base';
 import Base from './Base';

@ -21,7 +21,7 @@ const Text: React.ForwardRefRenderFunction<HTMLSpanElement, TextProps> = (
    return ellipsis;
  }, [ellipsis]);

-  devWarning(
+  warning(
    typeof ellipsis !== 'object' ||
      !ellipsis ||
      (!('expandable' in ellipsis) && !('rows' in ellipsis)),
--- a/components/typography/Title.tsx
+++ b/components/typography/Title.tsx
@ -1,5 +1,5 @@
 import * as React from 'react';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';
 import type { BlockProps } from './Base';
 import Base from './Base';
 import { tupleNum } from '../_util/type';
@ -21,7 +21,7 @@ const Title: React.ForwardRefRenderFunction<HTMLHeadingElement, TitleProps> = (p
  if (TITLE_ELE_LIST.indexOf(level) !== -1) {
    component = `h${level}`;
  } else {
-    devWarning(
+    warning(
      false,
      'Typography.Title',
      'Title only accept `1 | 2 | 3 | 4 | 5` as `level` value. And `5` need 4.6.0+ version.',
--- a/components/typography/Typography.tsx
+++ b/components/typography/Typography.tsx
@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { composeRef } from 'rc-util/lib/ref';
 import { ConfigContext } from '../config-provider';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';

 export interface TypographyProps {
  id?: string;
@ -35,7 +35,7 @@ const Typography: React.ForwardRefRenderFunction<{}, InternalTypographyProps> =

  let mergedRef = ref;
  if (setContentRef) {
-    devWarning(false, 'Typography', '`setContentRef` is deprecated. Please use `ref` instead.');
+    warning(false, 'Typography', '`setContentRef` is deprecated. Please use `ref` instead.');
    mergedRef = composeRef(ref, setContentRef);
  }

--- a/components/upload/Upload.tsx
+++ b/components/upload/Upload.tsx
@ -18,7 +18,7 @@ import { file2Obj, getFileItem, removeFileItem, updateFileList } from './utils';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import defaultLocale from '../locale/default';
 import { ConfigContext } from '../config-provider';
-import devWarning from '../_util/devWarning';
+import warning from '../_util/warning';

 export const LIST_IGNORE = `__LIST_IGNORE_${Date.now()}__`;

@ -59,19 +59,17 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr

  const upload = React.useRef<any>();

-  React.useEffect(() => {
-    devWarning(
-      'fileList' in props || !('value' in props),
-      'Upload',
-      '`value` is not a valid prop, do you mean `fileList`?',
-    );
+  warning(
+    'fileList' in props || !('value' in props),
+    'Upload',
+    '`value` is not a valid prop, do you mean `fileList`?',
+  );

-    devWarning(
-      !('transformFile' in props),
-      'Upload',
-      '`transformFile` is deprecated. Please use `beforeUpload` directly.',
-    );
-  }, []);
+  warning(
+    !('transformFile' in props),
+    'Upload',
+    '`transformFile` is deprecated. Please use `beforeUpload` directly.',
+  );

  // Control mode will auto fill file uid if not provided
  React.useMemo(() => {
--- a/components/upload/tests/upload.test.js
+++ b/components/upload/tests/upload.test.js
@ -8,7 +8,7 @@ import Upload from '..';
 import Form from '../../form';
 import { getFileItem, removeFileItem, isImageUrl } from '../utils';
 import { setup, teardown } from './mock';
-import { resetWarned } from '../../_util/devWarning';
+import { resetWarned } from '../../_util/warning';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { sleep, render, fireEvent } from '../../../tests/utils';
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "antd",
-  "version": "4.20.2",
+  "version": "4.20.4",
  "description": "An enterprise-class UI design language and React components implementation",
  "title": "Ant Design",
  "keywords": [
@ -159,9 +159,9 @@
    "scroll-into-view-if-needed": "^2.2.25"
  },
  "devDependencies": {
-    "@ant-design/bisheng-plugin": "^3.0.1",
+    "@ant-design/bisheng-plugin": "^3.2.0",
    "@ant-design/hitu": "^0.0.0-alpha.13",
-    "@ant-design/tools": "^14.0.2",
+    "@ant-design/tools": "^15.0.1",
    "@docsearch/css": "^3.0.0",
    "@qixian.cs/github-contributors-list": "^1.0.3",
    "@stackblitz/sdk": "^1.3.0",
@ -187,7 +187,7 @@
    "antd-img-crop": "^4.0.0",
    "array-move": "^4.0.0",
    "babel-plugin-add-react-displayname": "^0.0.5",
-    "bisheng": "^3.3.0",
+    "bisheng": "^3.5.0",
    "bisheng-plugin-description": "^0.1.4",
    "bisheng-plugin-react": "^1.2.0",
    "bisheng-plugin-toc": "^0.4.4",
@ -223,17 +223,18 @@
    "full-icu": "^1.3.0",
    "glob": "^8.0.1",
    "http-server": "^14.0.0",
-    "husky": "^7.0.1",
+    "husky": "^8.0.1",
    "identity-obj-proxy": "^3.0.0",
    "immer": "^9.0.1",
    "immutability-helper": "^3.0.0",
    "inquirer": "^8.0.0",
    "intersection-observer": "^0.12.0",
    "isomorphic-fetch": "^3.0.0",
-    "jest": "^27.0.3",
+    "jest": "^28.0.3",
    "jest-axe": "^6.0.0",
-    "jest-environment-node": "^27.4.4",
-    "jest-image-snapshot": "^4.5.1",
+    "jest-environment-jsdom": "^28.0.2",
+    "jest-environment-node": "^28.0.2",
+    "@ant-design/jest-image-snapshot": "^4.5.2",
    "jest-puppeteer": "^6.0.0",
    "jquery": "^3.4.1",
    "jsdom": "^19.0.0",
--- a/site/bisheng.config.js
+++ b/site/bisheng.config.js
@ -162,29 +162,31 @@ module.exports = {
    }

    // Split chunks
-    config.optimization.splitChunks = {
-      ...config.optimization.splitChunks,
-      cacheGroups: {
-        vendors: {
-          test: /[/\\]node_modules[/\\]@ant-design[/\\]icon/,
-          name: 'anticon',
-          chunks: 'initial',
-          maxSize: 1024 * 1024,
-        },
-        components: {
-          test(module) {
-            return (
-              module.resource &&
-              module.resource.includes('ant-design/components') &&
-              !module.resource.includes('demo') &&
-              !module.resource.endsWith('md')
-            );
+    if (config.mode === 'production') {
+      config.optimization.splitChunks = {
+        ...config.optimization.splitChunks,
+        cacheGroups: {
+          vendors: {
+            test: /[/\\]node_modules[/\\]@ant-design[/\\]icon/,
+            name: 'anticon',
+            chunks: 'initial',
+            maxSize: 1024 * 1024,
+          },
+          components: {
+            test(module) {
+              return (
+                module.resource &&
+                module.resource.includes('ant-design/components') &&
+                !module.resource.includes('demo') &&
+                !module.resource.endsWith('md')
+              );
+            },
+            name: 'components',
+            chunks: 'initial',
          },
-          name: 'components',
-          chunks: 'initial',
        },
-      },
-    };
+      };
+    }

    return config;
  },
--- a/site/theme/template/Content/Demo/index.jsx
+++ b/site/theme/template/Content/Demo/index.jsx
@ -223,8 +223,10 @@ class Demo extends React.Component {
          'const { $1 } = ReactRouterDOM;',
        )
        .replace(/([A-Za-z]*)\s+as\s+([A-Za-z]*)/, '$1:$2')
-        .replace(/export default/, 'const Demo =')}\n\n${
-        react18 ? 'createRoot(mountNode).render(<Demo />)' : 'ReactDOM.render(<Demo />, mountNode)'
+        .replace(/export default/, 'const ComponentDemo =')}\n\n${
+        react18
+          ? 'createRoot(mountNode).render(<ComponentDemo />)'
+          : 'ReactDOM.render(<ComponentDemo />, mountNode)'
      };\n`,
      css: prefillStyle,
      editors: '001',
@ -253,8 +255,10 @@ class Demo extends React.Component {
        react18
          ? `import React from 'react';\nimport { createRoot } from 'react-dom/client';\n`
          : ''
-      }${sourceCode.replace(/export default/, 'const Demo =')}\n\n${
-        react18 ? 'createRoot(mountNode).render(<Demo />)' : 'ReactDOM.render(<Demo />, mountNode)'
+      }${sourceCode.replace(/export default/, 'const ComponentDemo =')}\n\n${
+        react18
+          ? 'createRoot(mountNode).render(<ComponentDemo />)'
+          : 'ReactDOM.render(<ComponentDemo />, mountNode)'
      };\n`,
      css: prefillStyle,
      json: JSON.stringify(
--- a/site/theme/template/Icon/index.jsx
+++ b/site/theme/template/Icon/index.jsx
@ -3,7 +3,7 @@ import React from 'react';
 import AntdIcon, { createFromIconfontCN } from '@ant-design/icons';

 import { withThemeSuffix, removeTypeTheme, getThemeFromTypeName } from './utils';
-import warning from '../../../../components/_util/devWarning';
+import warning from '../../../../components/_util/warning';

 const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1329669_t1u72b9zk8s.js',
--- a/site/theme/template/Icon/utils.js
+++ b/site/theme/template/Icon/utils.js
@ -1,4 +1,4 @@
-import warning from '../../../../components/_util/devWarning';
+import warning from '../../../../components/_util/warning';

 // These props make sure that the SVG behaviours like general text.
 // Reference: https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
--- a/Show More
+++ b/Show More