chore: sync master into next branch

.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: |

.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: |

.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: |

.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: |

.jest.js

@@ -20,13 +20,13 @@ module.exports = {
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'md'],
   modulePathIgnorePatterns: ['/_site/'],
   moduleNameMapper: {
-    '^dnd-core$': 'dnd-core/dist/cjs',
+    '/^dnd-core$/': 'dnd-core/dist/cjs',
-    '^react-dnd$': 'react-dnd/dist/cjs',
+    '/^react-dnd$/': 'react-dnd/dist/cjs',
-    '^react-dnd-html5-backend$': 'react-dnd-html5-backend/dist/cjs',
+    '/^react-dnd-html5-backend$/': 'react-dnd-html5-backend/dist/cjs',
-    '^react-dnd-touch-backend$': 'react-dnd-touch-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-backend$/': 'react-dnd-test-backend/dist/cjs',
-    '^react-dnd-test-utils$': 'react-dnd-test-utils/dist/cjs',
+    '/^react-dnd-test-utils$/': 'react-dnd-test-utils/dist/cjs',
-    '\\.(css|less)$': 'identity-obj-proxy',
+    '/\\.(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',
+  },
 };

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;
+    });
+  });
+});

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();
-  }
-};

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;

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);
+    const spy = jest.spyOn(console, 'error').mockImplementation(() => undefined);
-    expect(() => {
+
-      mount(
+    mount(
-        <AutoComplete dataSource={[() => {}]}>
+      <AutoComplete dataSource={[() => {}]}>
-          <textarea />
+        <textarea />
-        </AutoComplete>,
+      </AutoComplete>,
-      );
+    );
-    }).toThrow();
+
-    // eslint-disable-next-line no-console
+    expect(spy).toHaveBeenCalled();
-    console.error.mockRestore();
   });
 
   it('legacy dataSource should accept react element option', () => {

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 ============================
+  warning(
-  React.useEffect(() => {
+    !('dataSource' in props),
-    devWarning(
+    'AutoComplete',
-      !('dataSource' in props),
+    '`dataSource` is deprecated, please use `options` instead.',
-      'AutoComplete',
+  );
-      '`dataSource` is deprecated, please use `options` instead.',
-    );
 
-    devWarning(
+  warning(
-      !customizeInput || !('size' in props),
+    !customizeInput || !('size' in props),
-      'AutoComplete',
+    'AutoComplete',
-      'You need to control style self instead of setting `size` when using customize input.',
+    'You need to control style self instead of setting `size` when using customize input.',
-    );
+  );
-  }, []);
 
   return (
     <ConfigConsumer>

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';
@@ -127,7 +127,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`,

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 {
+export default () => {
-  state = {
+  const [count, setCount] = useState(5);
-    count: 5,
+  const [show, setShow] = useState(true);
-    show: true,
+
+  const increase = () => {
+    setCount(count + 1);
   };
 
-  increase = () => {
+  const decline = () => {
-    const count = this.state.count + 1;
+    let countValue = count - 1;
-    this.setState({ count });
+    if (countValue < 0) {
-  };
+      countValue = 0;
-
-  decline = () => {
-    let count = this.state.count - 1;
-    if (count < 0) {
-      count = 0;
     }
-    this.setState({ count });
+    setCount(countValue);
   };
 
-  random = () => {
+  const random = () => {
-    const count = Math.floor(Math.random() * 100);
+    const countValue = Math.floor(Math.random() * 100);
-    this.setState({ count });
+    setCount(countValue);
   };
 
-  onChange = show => {
+  const onChange = isShow => {
-    this.setState({ show });
+    setShow(isShow);
   };
 
-  render() {
+  return (
-    return (
+    <>
-      <>
+      <Badge count={count}>
-        <Badge count={this.state.count}>
+        <Avatar shape="square" size="large" />
-          <Avatar shape="square" size="large" />
+      </Badge>
-        </Badge>
+      <ButtonGroup>
-        <ButtonGroup>
+        <Button onClick={decline}>
-          <Button onClick={this.decline}>
+          <MinusOutlined />
-            <MinusOutlined />
+        </Button>
-          </Button>
+        <Button onClick={increase}>
-          <Button onClick={this.increase}>
+          <PlusOutlined />
-            <PlusOutlined />
+        </Button>
-          </Button>
+        <Button onClick={random}>
-          <Button onClick={this.random}>
+          <QuestionOutlined />
-            <QuestionOutlined />
+        </Button>
-          </Button>
+      </ButtonGroup>
-        </ButtonGroup>
+      <Divider />
-        <Divider />
+      <Badge dot={show}>
-        <Badge dot={this.state.show}>
+        <Avatar shape="square" size="large" />
-          <Avatar shape="square" size="large" />
+      </Badge>
-        </Badge>
+      <Switch onChange={onChange} checked={show} />
-        <Switch onChange={this.onChange} checked={this.state.show} />
+    </>
-      </>
+  );
-    );
+};
-  }
-}
-
-export default Demo;
 ```

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),

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';
 import { useToken } from '../_util/theme';
 
 export interface ButtonGroupProps {
@@ -38,7 +38,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(

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 DisabledContext from '../config-provider/DisabledContext';
 import type { SizeType } from '../config-provider/SizeContext';
 import SizeContext from '../config-provider/SizeContext';
@@ -234,13 +234,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.",

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 {
+export default () => {
-  state = {
+  const [loadings, setLoadings] = useState([]);
-    loadings: [],
-  };
 
-  enterLoading = index => {
+  const enterLoading = index => {
-    this.setState(({ loadings }) => {
+    setLoadings(prevLoadings => {
-      const newLoadings = [...loadings];
+      const newLoadings = [...prevLoadings];
       newLoadings[index] = true;
-
+      return newLoadings;
-      return {
-        loadings: newLoadings,
-      };
     });
-    setTimeout(() => {
-      this.setState(({ loadings }) => {
-        const newLoadings = [...loadings];
-        newLoadings[index] = false;
 
-        return {
+    setTimeout(() => {
-          loadings: newLoadings,
+      setLoadings(prevLoadings => {
-        };
+        const newLoadings = [...prevLoadings];
+        newLoadings[index] = false;
+        return newLoadings;
       });
     }, 6000);
   };
 
-  render() {
+  return (
-    const { loadings } = this.state;
+    <>
-    return (
+      <Space style={{ width: '100%' }}>
-      <>
+        <Button type="primary" loading>
-        <Space style={{ width: '100%' }}>
+          Loading
-          <Button type="primary" loading>
+        </Button>
-            Loading
+        <Button type="primary" size="small" loading>
-          </Button>
+          Loading
-          <Button type="primary" size="small" loading>
+        </Button>
-            Loading
+        <Button type="primary" icon={<PoweroffOutlined />} loading />
-          </Button>
+      </Space>
-          <Button type="primary" icon={<PoweroffOutlined />} loading />
-        </Space>
 
-        <Space style={{ width: '100%' }}>
+      <Space style={{ width: '100%' }}>
-          <Button type="primary" loading={loadings[0]} onClick={() => this.enterLoading(0)}>
+        <Button type="primary" loading={loadings[0]} onClick={() => enterLoading(0)}>
-            Click me!
+          Click me!
-          </Button>
+        </Button>
-          <Button
+        <Button
-            type="primary"
+          type="primary"
-            icon={<PoweroffOutlined />}
+          icon={<PoweroffOutlined />}
-            loading={loadings[1]}
+          loading={loadings[1]}
-            onClick={() => this.enterLoading(1)}
+          onClick={() => enterLoading(1)}
-          >
+        >
-            Click me!
+          Click me!
-          </Button>
+        </Button>
-          <Button
+        <Button
-            type="primary"
+          type="primary"
-            icon={<PoweroffOutlined />}
+          icon={<PoweroffOutlined />}
-            loading={loadings[2]}
+          loading={loadings[2]}
-            onClick={() => this.enterLoading(2)}
+          onClick={() => enterLoading(2)}
-          />
+        />
-        </Space>
+      </Space>
-      </>
+    </>
-    );
+  );
-  }
+};
-}
-
-export default App;
 ```

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 {
+export default () => {
-  state = {
+  const [size, setSize] = useState('large');
-    size: 'large',
+  const handleSizeChange = e => {
+    setSize(e.target.value);
   };
 
-  handleSizeChange = e => {
+  return (
-    this.setState({ size: e.target.value });
+    <>
-  };
+      <Radio.Group value={size} onChange={handleSizeChange}>
-
+        <Radio.Button value="large">Large</Radio.Button>
-  render() {
+        <Radio.Button value="default">Default</Radio.Button>
-    const { size } = this.state;
+        <Radio.Button value="small">Small</Radio.Button>
-    return (
+      </Radio.Group>
-      <>
+      <br />
-        <Radio.Group value={size} onChange={this.handleSizeChange}>
+      <br />
-          <Radio.Button value="large">Large</Radio.Button>
+      <Button type="primary" size={size}>
-          <Radio.Button value="default">Default</Radio.Button>
+        Primary
-          <Radio.Button value="small">Small</Radio.Button>
+      </Button>
-        </Radio.Group>
+      <Button size={size}>Default</Button>
-        <br />
+      <Button type="dashed" size={size}>
-        <br />
+        Dashed
-        <Button type="primary" size={size}>
+      </Button>
-          Primary
+      <br />
-        </Button>
+      <Button type="link" size={size}>
-        <Button size={size}>Default</Button>
+        Link
-        <Button type="dashed" size={size}>
+      </Button>
-          Dashed
+      <br />
-        </Button>
+      <Button type="primary" icon={<DownloadOutlined />} size={size} />
-        <br />
+      <Button type="primary" shape="circle" icon={<DownloadOutlined />} size={size} />
-        <Button type="link" size={size}>
+      <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size} />
-          Link
+      <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size}>
-        </Button>
+        Download
-        <br />
+      </Button>
-        <Button type="primary" icon={<DownloadOutlined />} size={size} />
+      <Button type="primary" icon={<DownloadOutlined />} size={size}>
-        <Button type="primary" shape="circle" icon={<DownloadOutlined />} size={size} />
+        Download
-        <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size} />
+      </Button>
-        <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size}>
+    </>
-          Download
+  );
-        </Button>
+};
-        <Button type="primary" icon={<DownloadOutlined />} size={size}>
-          Download
-        </Button>
-      </>
-    );
-  }
-}
-
-export default () => <ButtonSize />;
 ```

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 dayjs from 'dayjs';
 
-class App extends React.Component {
+export default () => {
-  state = {
+  const [calendar, setCalendar] = useState({
     value: dayjs('2017-01-25'),
     selectedValue: dayjs('2017-01-25'),
-  };
+  });
 
-  onSelect = value => {
+  const onSelect = value => {
-    this.setState({
+    setCalendar({
       value,
       selectedValue: value,
     });
   };
 
-  onPanelChange = value => {
+  const onPanelChange = value => {
-    this.setState({ value });
+    setCalendar({
+      ...calendar,
+      value,
+    });
   };
 
-  render() {
+  return (
-    const { value, selectedValue } = this.state;
+    <>
-    return (
+      <Alert
-      <>
+        message={`You selected date: ${
-        <Alert
+          calendar.selectedValue && calendar.selectedValue.format('YYYY-MM-DD')
-          message={`You selected date: ${selectedValue && selectedValue.format('YYYY-MM-DD')}`}
+        }`}
-        />
+      />
-        <Calendar value={value} onSelect={this.onSelect} onPanelChange={this.onPanelChange} />
+      <Calendar value={calendar.value} onSelect={onSelect} onPanelChange={onPanelChange} />
-      </>
+    </>
-    );
+  );
-  }
+};
-}
-
-export default App;
 ```

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 {
+export default () => {
-  state = {
+  const [loading, setLoading] = useState(true);
-    loading: true,
+
+  const onChange = checked => {
+    setLoading(!checked);
   };
 
-  onChange = checked => {
+  return (
-    this.setState({ loading: !checked });
+    <>
-  };
+      <Switch checked={!loading} onChange={onChange} />
 
-  render() {
+      <Card style={{ width: 300, marginTop: 16 }} loading={loading}>
-    const { loading } = this.state;
+        <Meta
+          avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
+          title="Card title"
+          description="This is the description"
+        />
+      </Card>
 
-    return (
+      <Card
-      <>
+        style={{ width: 300, marginTop: 16 }}
-        <Switch checked={!loading} onChange={this.onChange} />
+        actions={[
-
+          <SettingOutlined key="setting" />,
-        <Card style={{ width: 300, marginTop: 16 }} loading={loading}>
+          <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>
+        </Skeleton>
-
+      </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;
 ```

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 = [
         {

components/cascader/demo/custom-trigger.md

@@ -39,29 +39,22 @@ const options = [
   },
 ];
 
-class CitySwitcher extends React.Component {
+export default () => {
-  state = {
+  const [text, setText] = React.useState('Unselect');
-    text: 'Unselect',
+
+  const onChange = (value, selectedOptions) => {
+    const labeText = selectedOptions.map(o => o.label).join(', ');
+    setText(labeText);
   };
 
-  onChange = (value, selectedOptions) => {
+  return (
-    this.setState({
+    <span>
-      text: selectedOptions.map(o => o.label).join(', '),
+      {text}
-    });
+      &nbsp;
-  };
+      <Cascader options={options} onChange={onChange}>
-
+        <a href="#">Change city</a>
-  render() {
+      </Cascader>
-    return (
+    </span>
-      <span>
+  );
-        {this.state.text}
+};
-        &nbsp;
-        <Cascader options={options} onChange={this.onChange}>
-          <a href="#">Change city</a>
-        </Cascader>
-      </span>
-    );
-  }
-}
-
-export default () => <CitySwitcher />;
 ```

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 |

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';
@@ -164,19 +164,17 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
   const mergedStatus = getMergedStatus(contextStatus, customStatus);
 
   // =================== Warning =====================
-  if (process.env.NODE_ENV !== 'production') {
+  warning(
-    devWarning(
+    popupClassName === undefined,
-      popupClassName === undefined,
+    'Cascader',
-      'Cascader',
+    '`popupClassName` is deprecated. Please use `dropdownClassName` instead.',
-      '`popupClassName` is deprecated. Please use `dropdownClassName` instead.',
+  );
-    );
 
-    devWarning(
+  warning(
-      !multiple || !props.displayRender,
+    !multiple || !props.displayRender,
-      'Cascader',
+    'Cascader',
-      '`displayRender` not work on `multiple`. Please use `tagRender` instead.',
+    '`displayRender` not work on `multiple`. Please use `tagRender` instead.',
-    );
+  );
-  }
 
   // =================== No Found ====================
   const mergedNotFoundContent = notFoundContent || renderEmpty('Cascader');

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 |

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';
 import useStyle from './style';
 
 export interface AbstractCheckboxProps<T> {
@@ -68,7 +68,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`?',

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';
 

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 {
+export default () => {
-  state = {
+  const [checked, setChecked] = useState(true);
-    checked: true,
+  const [disabled, setDisabled] = useState(false);
-    disabled: false,
+
+  const toggleChecked = () => {
+    setChecked(!checked);
   };
 
-  toggleChecked = () => {
+  const toggleDisable = () => {
-    this.setState({ checked: !this.state.checked });
+    setDisabled(!disabled);
   };
 
-  toggleDisable = () => {
+  const onChange = e => {
-    this.setState({ disabled: !this.state.disabled });
-  };
-
-  onChange = e => {
     console.log('checked = ', e.target.checked);
-    this.setState({
+    setChecked(e.target.checked);
-      checked: e.target.checked,
-    });
   };
 
-  render() {
+  const label = `${checked ? 'Checked' : 'Unchecked'}-${disabled ? 'Disabled' : 'Enabled'}`;
-    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>
-      </>
-    );
-  }
-}
 
-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>
+    </>
+  );
+};
 ```

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.',

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

components/collapse/demo/extra.md

@@ -39,48 +39,36 @@ const genExtra = () => (
   />
 );
 
-class Demo extends React.Component {
+export default () => {
-  state = {
+  const [expandIconPosition, setExpandIconPosition] = React.useState('left');
-    expandIconPosition: 'left',
+
+  const onPositionChange = position => {
+    setExpandIconPosition(position);
   };
-
+  return (
-  onPositionChange = expandIconPosition => {
+    <>
-    this.setState({ expandIconPosition });
+      <Collapse
-  };
+        defaultActiveKey={['1']}
-
+        onChange={callback}
-  render() {
+        expandIconPosition={expandIconPosition}
-    const { expandIconPosition } = this.state;
+      >
-    return (
+        <Panel header="This is panel header 1" key="1" extra={genExtra()}>
-      <>
+          <div>{text}</div>
-        <Collapse
+        </Panel>
-          defaultActiveKey={['1']}
+        <Panel header="This is panel header 2" key="2" extra={genExtra()}>
-          onChange={callback}
+          <div>{text}</div>
-          expandIconPosition={expandIconPosition}
+        </Panel>
-        >
+        <Panel header="This is panel header 3" key="3" extra={genExtra()}>
-          <Panel header="This is panel header 1" key="1" extra={genExtra()}>
+          <div>{text}</div>
-            <div>{text}</div>
+        </Panel>
-          </Panel>
+      </Collapse>
-          <Panel header="This is panel header 2" key="2" extra={genExtra()}>
+      <br />
-            <div>{text}</div>
+      <span>Expand Icon Position: </span>
-          </Panel>
+      <Select value={expandIconPosition} style={{ margin: '0 8px' }} onChange={onPositionChange}>
-          <Panel header="This is panel header 3" key="3" extra={genExtra()}>
+        <Option value="left">left</Option>
-            <div>{text}</div>
+        <Option value="right">right</Option>
-          </Panel>
+      </Select>
-        </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;
 ```

components/comment/demo/editor.md

@@ -41,32 +41,33 @@ const Editor = ({ onChange, onSubmit, submitting, value }) => (
   </>
 );
 
-class App extends React.Component {
+export default () => {
-  state = {
+  const [state, setState] = React.useState({
     comments: [],
     submitting: false,
     value: '',
-  };
+  });
 
-  handleSubmit = () => {
+  const handleSubmit = () => {
-    if (!this.state.value) {
+    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: dayjs().fromNow(),
           },
         ],
@@ -74,33 +75,28 @@ class App extends React.Component {
     }, 1000);
   };
 
-  handleChange = e => {
+  const handleChange = e => {
-    this.setState({
+    setState({
+      ...state,
       value: e.target.value,
     });
   };
 
-  render() {
+  return (
-    const { comments, submitting, value } = this.state;
+    <>
-
+      {state.comments.length > 0 && <CommentList comments={state.comments} />}
-    return (
+      <Comment
-      <>
+        avatar={<Avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />}
-        {comments.length > 0 && <CommentList comments={comments} />}
+        content={
-        <Comment
+          <Editor
-          avatar={<Avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />}
+            onChange={handleChange}
-          content={
+            onSubmit={handleSubmit}
-            <Editor
+            submitting={state.submitting}
-              onChange={this.handleChange}
+            value={state.value}
-              onSubmit={this.handleSubmit}
+          />
-              submitting={submitting}
+        }
-              value={value}
+      />
-            />
+    </>
-          }
+  );
-        />
+};
-      </>
-    );
-  }
-}
-
-export default App;
 ```

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;
 

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.');
   }
 }

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;
 

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 type { ConfigConsumerProps } from '../../config-provider';
 import { ConfigContext } from '../../config-provider';
 import LocaleReceiver from '../../locale-provider/LocaleReceiver';
@@ -46,7 +46,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
 
       constructor(props: InnerPickerProps) {
         super(props);
-        devWarning(
+        warning(
           picker !== 'quarter',
           displayName!,
           `DatePicker.${displayName} is legacy usage. Please use DatePicker[picker='${picker}'] directly.`,

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);

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 {
+export default () => {
-  state = {
+  const [size, setSize] = React.useState('default');
-    size: 'default',
-  };
 
-  onChange = e => {
+  const onChange = e => {
     console.log('size checked', e.target.value);
-    this.setState({
+    setSize(e.target.value);
-      size: e.target.value,
-    });
   };
 
-  render() {
+  return (
-    return (
+    <div>
-      <div>
+      <Radio.Group onChange={onChange} value={size}>
-        <Radio.Group onChange={this.onChange} value={this.state.size}>
+        <Radio value="default">default</Radio>
-          <Radio value="default">default</Radio>
+        <Radio value="middle">middle</Radio>
-          <Radio value="middle">middle</Radio>
+        <Radio value="small">small</Radio>
-          <Radio value="small">small</Radio>
+      </Radio.Group>
-        </Radio.Group>
+      <br />
-        <br />
+      <br />
-        <br />
+      <Descriptions
-        <Descriptions
+        bordered
-          bordered
+        title="Custom Size"
-          title="Custom Size"
+        size={size}
-          size={this.state.size}
+        extra={<Button type="primary">Edit</Button>}
-          extra={<Button type="primary">Edit</Button>}
+      >
-        >
+        <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
-          <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
+        <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
-          <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
+        <Descriptions.Item label="time">18:00:00</Descriptions.Item>
-          <Descriptions.Item label="time">18:00:00</Descriptions.Item>
+        <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
-          <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
+        <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
-          <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
+        <Descriptions.Item label="Official">$60.00</Descriptions.Item>
-          <Descriptions.Item label="Official">$60.00</Descriptions.Item>
+        <Descriptions.Item label="Config Info">
-          <Descriptions.Item label="Config Info">
+          Data disk type: MongoDB
-            Data disk type: MongoDB
+          <br />
-            <br />
+          Database version: 3.4
-            Database version: 3.4
+          <br />
-            <br />
+          Package: dds.mongo.mid
-            Package: dds.mongo.mid
+          <br />
-            <br />
+          Storage space: 10 GB
-            Storage space: 10 GB
+          <br />
-            <br />
+          Replication factor: 3
-            Replication factor: 3
+          <br />
-            <br />
+          Region: East China 1<br />
-            Region: East China 1<br />
+        </Descriptions.Item>
-          </Descriptions.Item>
+      </Descriptions>
-        </Descriptions>
+      <br />
-        <br />
+      <br />
-        <br />
+      <Descriptions title="Custom Size" size={size} extra={<Button type="primary">Edit</Button>}>
-        <Descriptions
+        <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
-          title="Custom Size"
+        <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
-          size={this.state.size}
+        <Descriptions.Item label="time">18:00:00</Descriptions.Item>
-          extra={<Button type="primary">Edit</Button>}
+        <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
-        >
+        <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
-          <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
+        <Descriptions.Item label="Official">$60.00</Descriptions.Item>
-          <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
+      </Descriptions>
-          <Descriptions.Item label="time">18:00:00</Descriptions.Item>
+    </div>
-          <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;
 ```

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';
@@ -55,7 +55,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.',

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';
@@ -106,7 +106,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.`,
@@ -144,7 +144,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.`,

components/form/FormItem.tsx

@@ -17,7 +17,7 @@ import useStyle from './style';
 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';
@@ -78,7 +78,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);
 }
@@ -391,33 +391,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.',
@@ -453,7 +453,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.',

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);

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.',

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;
 };
 

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';
 
 // CSSINJS
 import useStyle from './style';
@@ -164,7 +164,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`,

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;
 }
 

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: {

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',

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

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 1', key: 'item-1' }, // remember to pass the key prop
-  { label: 'item 2' },
+  { 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} />;

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';
@@ -70,19 +70,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.',

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: '菜单项一', key: 'item-1' }, // 菜单项务必填写 key
-  { label: '菜单项二' },
+  { label: '菜单项二', key: 'item-2' },
   {
     label: '子菜单',
-    children: [{ label: '子菜单项' }],
+    key: 'submenu',
+    children: [{ label: '子菜单项', key: 'submenu-item-1' }],
   },
 ];
 return <Menu items={items} />;

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`,

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(
+  warning(false, 'Modal', 'Modal.config is deprecated. Please use ConfigProvider.config instead.');
-    false,
-    'Modal',
-    'Modal.config is deprecated. Please use ConfigProvider.config instead.',
-  );
   defaultRootPrefixCls = rootPrefixCls;
 }

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';
@@ -104,7 +104,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.',

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.',

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';
 
 import useStyle from './style';
 
@@ -21,9 +21,7 @@ const InternalRadio: React.ForwardRefRenderFunction<HTMLElement, RadioProps> = (
   const mergedRef = composeRef(ref, innerRef);
   const { isFormItemInput } = useContext(FormItemInputContext);
 
-  React.useEffect(() => {
+  warning(!('optionType' in props), 'Radio', '`optionType` is only support in Radio.Group.');
-    devWarning(!('optionType' in props), 'Radio', '`optionType` is only support in Radio.Group.');
-  }, []);
 
   const onChange = (e: RadioChangeEvent) => {
     props.onChange?.(e);

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';
@@ -54,7 +54,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`,

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';

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';
 import useStyle from './style';
 
 export type SwitchSize = 'small' | 'default';
@@ -50,7 +50,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`?',

components/table/Table.tsx

@@ -47,7 +47,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 };
@@ -138,7 +138,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.',
@@ -356,12 +356,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.',

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);

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 = [

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';
 

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`.',

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 (
+      warning(
-        process.env.NODE_ENV !== 'production' &&
+        !('checked' in checkboxProps || 'defaultChecked' in checkboxProps),
-        ('checked' in checkboxProps || 'defaultChecked' in checkboxProps)
+        'Table',
-      ) {
+        'Do not set `checked` or `defaultChecked` in `getCheckboxProps`. Please use `selectedRowKeys` instead.',
-        devWarning(
+      );
-          false,
-          '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') {
+        warning(
-          devWarning(
+          !columns.includes(SELECTION_COLUMN),
-            !columns.includes(SELECTION_COLUMN),
+          'Table',
-            'Table',
+          '`rowSelection` is not config but `SELECTION_COLUMN` exists in the `columns`.',
-            '`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' &&
+      warning(
-        cloneColumns.filter(col => col === SELECTION_COLUMN).length > 1
+        cloneColumns.filter(col => col === SELECTION_COLUMN).length <= 1,
-      ) {
+        'Table',
-        devWarning(false, 'Table', 'Multiple `SELECTION_COLUMN` exist in `columns`.');
+        'Multiple `SELECTION_COLUMN` exist in `columns`.',
-      }
+      );
+
       cloneColumns = cloneColumns.filter(
         (column, index) => column !== SELECTION_COLUMN || index === selectionColumnIndex,
       );

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 | - |  |

components/table/index.zh-CN.md

@@ -129,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 | - |  |

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 useStyle from './style';
 import type { SizeType } from '../config-provider/SizeContext';
@@ -55,7 +55,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.',

components/time-picker/__tests__/index.test.js

@@ -5,7 +5,7 @@ import customParseFormat from 'dayjs/plugin/customParseFormat';
 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';
 
 dayjs.extend(customParseFormat);

components/time-picker/index.tsx

@@ -2,7 +2,7 @@ import type { Dayjs } from 'dayjs';
 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.',

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.',

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';
@@ -92,7 +92,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',

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.',

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)),

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.',

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';
 import useStyle from './style';
 
 export interface TypographyProps {
@@ -36,7 +36,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);
   }
 

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';
 import useStyle from './style';
 
 export const LIST_IGNORE = `__LIST_IGNORE_${Date.now()}__`;
@@ -60,19 +60,17 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
 
   const upload = React.useRef<any>();
 
-  React.useEffect(() => {
+  warning(
-    devWarning(
+    'fileList' in props || !('value' in props),
-      'fileList' in props || !('value' in props),
+    'Upload',
-      'Upload',
+    '`value` is not a valid prop, do you mean `fileList`?',
-      '`value` is not a valid prop, do you mean `fileList`?',
+  );
-    );
 
-    devWarning(
+  warning(
-      !('transformFile' in props),
+    !('transformFile' in props),
-      'Upload',
+    'Upload',
-      '`transformFile` is deprecated. Please use `beforeUpload` directly.',
+    '`transformFile` is deprecated. Please use `beforeUpload` directly.',
-    );
+  );
-  }, []);
 
   // Control mode will auto fill file uid if not provided
   React.useMemo(() => {

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';

package.json

@@ -162,9 +162,9 @@
     "shallowequal": "^1.1.0"
   },
   "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.1.0",
+    "@ant-design/tools": "^15.0.1",
     "@docsearch/css": "^3.0.0",
     "@qixian.cs/github-contributors-list": "^1.0.3",
     "@stackblitz/sdk": "^1.3.0",
@@ -191,7 +191,7 @@
     "antd-img-crop": "^4.0.0",
     "array-move": "^4.0.0",
     "babel-plugin-add-react-displayname": "^0.0.5",
-    "bisheng": "^3.4.0",
+    "bisheng": "^3.5.0",
     "bisheng-plugin-description": "^0.1.4",
     "bisheng-plugin-react": "^1.2.0",
     "bisheng-plugin-toc": "^0.4.4",
@@ -235,10 +235,11 @@
     "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-environment-jsdom": "^28.0.2",
-    "jest-image-snapshot": "^4.5.1",
+    "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",

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',

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

site/theme/template/Layout/Header/Navigation.tsx

@@ -129,8 +129,8 @@ export default ({
       : null,
     isZhCN &&
     typeof window !== 'undefined' &&
-    !window.location.host.includes('ant-design.antgroup.com') &&
+    window.location.host !== 'ant-design.antgroup.com' &&
-    !window.location.host.includes('ant-design.gitee.io')
+    window.location.host !== 'ant-design.gitee.io'
       ? {
           label: '国内镜像',
           key: 'mirror',

site/theme/template/Layout/Header/index.tsx

@@ -121,7 +121,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
         });
         if (
           process.env.NODE_ENV === 'production' &&
-          !window.location.host.includes('ant-design.antgroup.com') &&
+          window.location.host !== 'ant-design.antgroup.com' &&
           shouldOpenAntdMirrorModal()
         ) {
           Modal.confirm({

tests/setup.js

@@ -1,4 +1,6 @@
 const React = require('react');
+const util = require('util');
+
 const { _rs: onLibResize } = require('rc-resize-observer/lib/utils/observerUtil');
 const { _rs: onEsResize } = require('rc-resize-observer/es/utils/observerUtil');
 
@@ -34,6 +36,17 @@ if (typeof window !== 'undefined') {
   // https://github.com/yiminghe/css-animation/blob/a5986d73fd7dfce75665337f39b91483d63a4c8c/src/Event.js#L44
   window.AnimationEvent = window.AnimationEvent || window.Event;
   window.TransitionEvent = window.TransitionEvent || window.Event;
+
+  // ref: https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+  // ref: https://github.com/jsdom/jsdom/issues/2524
+  Object.defineProperty(window, 'TextEncoder', {
+    writable: true,
+    value: util.TextEncoder,
+  });
+  Object.defineProperty(window, 'TextDecoder', {
+    writable: true,
+    value: util.TextDecoder,
+  });
 }
 
 const Enzyme = require('enzyme');

tests/shared/imageTest.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 // Reference: https://github.com/ant-design/ant-design/pull/24003#discussion_r427267386
 // eslint-disable-next-line import/no-unresolved
-import { configureToMatchImageSnapshot } from 'jest-image-snapshot';
+import { configureToMatchImageSnapshot } from '@ant-design/jest-image-snapshot';
 import ReactDOMServer from 'react-dom/server';
 import glob from 'glob';
 import MockDate from 'mockdate';

typings/jest-image-snapshot.d.ts

@@ -0,0 +1,145 @@
+// Type definitions for jest-image-snapshot 4.3
+// Project: https://github.com/americanexpress/jest-image-snapshot#readme
+// Definitions by: Janeene Beeforth <https://github.com/dawnmist>
+//                 erbridge <https://github.com/erbridge>
+//                 Piotr Błażejewicz <https://github.com/peterblazejewicz>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 3.8
+
+/// <reference types="jest" />
+
+declare module '@ant-design/jest-image-snapshot' {
+  import { PixelmatchOptions } from 'pixelmatch';
+  import { Options as SSIMOptions } from 'ssim.js';
+
+  export interface MatchImageSnapshotOptions {
+    /**
+     * If set to true, the build will not fail when the screenshots to compare have different sizes.
+     *
+     * @default false
+     */
+    allowSizeMismatch?: boolean | undefined;
+    /** Custom config passed to 'pixelmatch' or 'ssim' */
+    customDiffConfig?: PixelmatchOptions | Partial<SSIMOptions> | undefined;
+    /**
+     * The method by which images are compared. `pixelmatch` does a pixel by pixel comparison,
+     * whereas `ssim` does a structural similarity comparison.
+     *
+     * @default 'pixelmatch'
+     */
+    comparisonMethod?: 'pixelmatch' | 'ssim' | undefined;
+    /** Custom snapshots directory. Absolute path of a directory to keep the snapshot in. */
+    customSnapshotsDir?: string | undefined;
+    /** A custom absolute path of a directory to keep this diff in */
+    customDiffDir?: string | undefined;
+    /**
+     * A custom name to give this snapshot. If not provided, one is computed automatically. When a
+     * function is provided it is called with an object containing testPath, currentTestName,
+     * counter and defaultIdentifier as its first argument. The function must return an identifier
+     * to use for the snapshot.
+     */
+    customSnapshotIdentifier?:
+      | ((parameters: {
+          testPath: string;
+          currentTestName: string;
+          counter: number;
+          defaultIdentifier: string;
+        }) => string)
+      | string
+      | undefined;
+    /**
+     * Changes diff image layout direction.
+     *
+     * @default 'horizontal'
+     */
+    diffDirection?: 'horizontal' | 'vertical' | undefined;
+    /**
+     * Will output base64 string of a diff image to console in case of failed tests (in addition to
+     * creating a diff image). This string can be copy-pasted to a browser address string to preview
+     * the diff for a failed test.
+     *
+     * @default false
+     */
+    dumpDiffToConsole?: boolean | undefined;
+    /**
+     * Will output the image to the terminal using iTerm's Inline Images Protocol. If the term is
+     * not compatible, it does the same thing as `dumpDiffToConsole`.
+     *
+     * @default false
+     */
+    dumpInlineDiffToConsole?: boolean | undefined;
+    /**
+     * Removes coloring from the console output, useful if storing the results to a file.
+     *
+     * @default false
+     */
+    noColors?: boolean | undefined;
+    /**
+     * Sets the threshold that would trigger a test failure based on the failureThresholdType
+     * selected. This is different to the customDiffConfig.threshold above - the
+     * customDiffConfig.threshold is the per pixel failure threshold, whereas this is the failure
+     * threshold for the entire comparison.
+     *
+     * @default 0
+     */
+    failureThreshold?: number | undefined;
+    /**
+     * Sets the type of threshold that would trigger a failure.
+     *
+     * @default 'pixel'
+     */
+    failureThresholdType?: 'pixel' | 'percent' | undefined;
+    /**
+     * Updates a snapshot even if it passed the threshold against the existing one.
+     *
+     * @default false
+     */
+    updatePassedSnapshot?: boolean | undefined;
+    /**
+     * Applies Gaussian Blur on compared images, accepts radius in pixels as value. Useful when you
+     * have noise after scaling images per different resolutions on your target website, usually
+     * setting its value to 1-2 should be enough to solve that problem.
+     *
+     * @default 0
+     */
+    blur?: number | undefined;
+    /**
+     * Runs the diff in process without spawning a child process.
+     *
+     * @default false
+     */
+    runInProcess?: boolean | undefined;
+  }
+
+  /**
+   * Function to be passed to jest's expect.extend. Example: import { toMatchImageSnapshot } from
+   * 'jest-image-snapshot'; expect.extend({ toMatchImageSnapshot });
+   */
+  export function toMatchImageSnapshot(options?: MatchImageSnapshotOptions): {
+    message(): string;
+    pass: boolean;
+  };
+
+  /**
+   * Configurable function that can be passed to jest's expect.extend. Example: import {
+   * configureToMatchImageSnapshot } from 'jest-image-snapshot'; const toMatchImageSnapshot =
+   * configureToMatchImageSnapshot({ noColors: true }); expect.extend({ toMatchImageSnapshot });
+   */
+  export function configureToMatchImageSnapshot(
+    options: MatchImageSnapshotOptions,
+  ): () => { message(): string; pass: boolean };
+
+  /** Mutates original state with new state */
+  export function updateSnapshotState<TObject, TPartial>(
+    originalSnapshotState: TObject,
+    partialSnapshotState: TPartial,
+  ): TObject & TPartial;
+
+  declare global {
+    namespace jest {
+      interface Matchers<R, T> {
+        toMatchImageSnapshot(options?: MatchImageSnapshotOptions): R;
+      }
+    }
+  }
+}

webpack.config.js

@@ -42,24 +42,6 @@ function addLocales(webpackConfig) {
   webpackConfig.output.filename = '[name].js';
 }
 
-function injectWarningCondition(config) {
-  config.module.rules.forEach(rule => {
-    // Remove devWarning if needed
-    if (rule.test.test('test.tsx')) {
-      rule.use = [
-        ...rule.use,
-        {
-          loader: 'string-replace-loader',
-          options: {
-            search: 'devWarning(',
-            replace: "if (process.env.NODE_ENV !== 'production') devWarning(",
-          },
-        },
-      ];
-    }
-  });
-}
-
 function externalDayjs(config) {
   config.externals.dayjs = {
     root: 'dayjs',
@@ -120,10 +102,6 @@ const webpackVariableConfig = injectLessVariables(getWebpackConfig(false), {
   'root-entry-name': 'variable',
 });
 
-webpackConfig.forEach(config => {
-  injectWarningCondition(config);
-});
-
 if (process.env.RUN_ENV === 'PRODUCTION') {
   webpackConfig.forEach(config => {
     addLocales(config);