chore: auto merge branchs (#35553)

chore: merge master into next

components/drawer/demo/form-in-drawer.md

@@ -19,37 +19,32 @@ import { PlusOutlined } from '@ant-design/icons';
 
 const { Option } = Select;
 
-class DrawerForm extends React.Component {
+export default () => {
-  state = { visible: false };
+  const [visible, setVisible] = React.useState(false);
 
-  showDrawer = () => {
+  const showDrawer = () => {
-    this.setState({
+    setVisible(true);
-      visible: true,
-    });
   };
 
-  onClose = () => {
+  const onClose = () => {
-    this.setState({
+    setVisible(false);
-      visible: false,
-    });
   };
 
-  render() {
   return (
     <>
-        <Button type="primary" onClick={this.showDrawer} icon={<PlusOutlined />}>
+      <Button type="primary" onClick={showDrawer} icon={<PlusOutlined />}>
         New account
       </Button>
       <Drawer
         title="Create a new account"
         width={720}
-          onClose={this.onClose}
+        onClose={onClose}
-          visible={this.state.visible}
+        visible={visible}
         bodyStyle={{ paddingBottom: 80 }}
         extra={
           <Space>
-              <Button onClick={this.onClose}>Cancel</Button>
+            <Button onClick={onClose}>Cancel</Button>
-              <Button onClick={this.onClose} type="primary">
+            <Button onClick={onClose} type="primary">
               Submit
             </Button>
           </Space>
@@ -153,10 +148,7 @@ class DrawerForm extends React.Component {
       </Drawer>
     </>
   );
-  }
+};
-}
-
-export default () => <DrawerForm />;
 ```
 
 ```css

components/drawer/demo/multi-level-drawer.md

@@ -16,65 +16,54 @@ Open a new drawer on top of an existing drawer to handle multi branch tasks.
 ```jsx
 import { Drawer, Button } from 'antd';
 
-class App extends React.Component {
+export default () => {
-  state = { visible: false, childrenDrawer: false };
+  const [visible, setVisible] = React.useState(false);
+  const [childrenDrawer, setChildrenDrawer] = React.useState(false);
 
-  showDrawer = () => {
+  const showDrawer = () => {
-    this.setState({
+    setVisible(true);
-      visible: true,
-    });
   };
 
-  onClose = () => {
+  const onClose = () => {
-    this.setState({
+    setVisible(false);
-      visible: false,
-    });
   };
 
-  showChildrenDrawer = () => {
+  const showChildrenDrawer = () => {
-    this.setState({
+    setChildrenDrawer(true);
-      childrenDrawer: true,
-    });
   };
 
-  onChildrenDrawerClose = () => {
+  const onChildrenDrawerClose = () => {
-    this.setState({
+    setChildrenDrawer(false);
-      childrenDrawer: false,
-    });
   };
 
-  render() {
   return (
     <>
-        <Button type="primary" onClick={this.showDrawer}>
+      <Button type="primary" onClick={showDrawer}>
         Open drawer
       </Button>
       <Drawer
         title="Multi-level drawer"
         width={520}
         closable={false}
-          onClose={this.onClose}
+        onClose={onClose}
-          visible={this.state.visible}
+        visible={visible}
       >
-          <Button type="primary" onClick={this.showChildrenDrawer}>
+        <Button type="primary" onClick={showChildrenDrawer}>
           Two-level drawer
         </Button>
         <Drawer
           title="Two-level Drawer"
           width={320}
           closable={false}
-            onClose={this.onChildrenDrawerClose}
+          onClose={onChildrenDrawerClose}
-            visible={this.state.childrenDrawer}
+          visible={childrenDrawer}
         >
           This is two-level drawer
         </Drawer>
       </Drawer>
     </>
   );
-  }
+};
-}
-
-export default App;
 ```
 
 <style>

components/drawer/demo/placement.md

@@ -16,39 +16,32 @@ The Drawer can appear from any edge of the screen.
 ```jsx
 import { Drawer, Button, Radio, Space } from 'antd';
 
-class App extends React.Component {
+export default () => {
-  state = { visible: false, placement: 'left' };
+  const [visible, setVisible] = React.useState(false);
+  const [placement, setPlacement] = React.useState('left');
 
-  showDrawer = () => {
+  const showDrawer = () => {
-    this.setState({
+    setVisible(true);
-      visible: true,
-    });
   };
 
-  onClose = () => {
+  const onClose = () => {
-    this.setState({
+    setVisible(false);
-      visible: false,
-    });
   };
 
-  onChange = e => {
+  const onChange = e => {
-    this.setState({
+    setPlacement(e.target.value);
-      placement: e.target.value,
-    });
   };
 
-  render() {
-    const { placement, visible } = this.state;
   return (
     <>
       <Space>
-          <Radio.Group value={placement} onChange={this.onChange}>
+        <Radio.Group value={placement} onChange={onChange}>
           <Radio value="top">top</Radio>
           <Radio value="right">right</Radio>
           <Radio value="bottom">bottom</Radio>
           <Radio value="left">left</Radio>
         </Radio.Group>
-          <Button type="primary" onClick={this.showDrawer}>
+        <Button type="primary" onClick={showDrawer}>
           Open
         </Button>
       </Space>
@@ -56,7 +49,7 @@ class App extends React.Component {
         title="Basic Drawer"
         placement={placement}
         closable={false}
-          onClose={this.onClose}
+        onClose={onClose}
         visible={visible}
         key={placement}
       >
@@ -66,8 +59,5 @@ class App extends React.Component {
       </Drawer>
     </>
   );
-  }
+};
-}
-
-export default App;
 ```

components/drawer/demo/render-in-current.md

@@ -16,27 +16,22 @@ Render in current dom. custom container, check `getContainer`.
 ```jsx
 import { Drawer, Button } from 'antd';
 
-class App extends React.Component {
+export default () => {
-  state = { visible: false };
+  const [visible, setVisible] = React.useState(false);
 
-  showDrawer = () => {
+  const showDrawer = () => {
-    this.setState({
+    setVisible(true);
-      visible: true,
-    });
   };
 
-  onClose = () => {
+  const onClose = () => {
-    this.setState({
+    setVisible(false);
-      visible: false,
-    });
   };
 
-  render() {
   return (
     <div className="site-drawer-render-in-current-wrapper">
       Render in this
       <div style={{ marginTop: 16 }}>
-          <Button type="primary" onClick={this.showDrawer}>
+        <Button type="primary" onClick={showDrawer}>
           Open
         </Button>
       </div>
@@ -44,8 +39,8 @@ class App extends React.Component {
         title="Basic Drawer"
         placement="right"
         closable={false}
-          onClose={this.onClose}
+        onClose={onClose}
-          visible={this.state.visible}
+        visible={visible}
         getContainer={false}
         style={{ position: 'absolute' }}
       >
@@ -53,10 +48,7 @@ class App extends React.Component {
       </Drawer>
     </div>
   );
-  }
+};
-}
-
-export default App;
 ```
 
 ```css

components/drawer/demo/user-profile.md

@@ -23,22 +23,17 @@ const DescriptionItem = ({ title, content }) => (
   </div>
 );
 
-class App extends React.Component {
+export default () => {
-  state = { visible: false };
+  const [visible, setVisible] = React.useState(false);
 
-  showDrawer = () => {
+  const showDrawer = () => {
-    this.setState({
+    setVisible(true);
-      visible: true,
-    });
   };
 
-  onClose = () => {
+  const onClose = () => {
-    this.setState({
+    setVisible(false);
-      visible: false,
-    });
   };
 
-  render() {
   return (
     <>
       <List
@@ -55,7 +50,7 @@ class App extends React.Component {
           <List.Item
             key={item.id}
             actions={[
-                <a onClick={this.showDrawer} key={`a-${item.id}`}>
+              <a onClick={showDrawer} key={`a-${item.id}`}>
                 View Profile
               </a>,
             ]}
@@ -70,13 +65,7 @@ class App extends React.Component {
           </List.Item>
         )}
       />
-        <Drawer
+      <Drawer width={640} placement="right" closable={false} onClose={onClose} visible={visible}>
-          width={640}
-          placement="right"
-          closable={false}
-          onClose={this.onClose}
-          visible={this.state.visible}
-        >
         <p className="site-description-item-profile-p" style={{ marginBottom: 24 }}>
           User Profile
         </p>
@@ -164,10 +153,7 @@ class App extends React.Component {
       </Drawer>
     </>
   );
-  }
+};
-}
-
-export default App;
 ```
 
 ```css

components/dropdown/demo/loading.md

@@ -27,25 +27,23 @@ const menu = (
     ]}
   />
 );
-class App extends React.Component {
+export default () => {
-  state = {
+  const [loadings, setLodings] = React.useState([]);
-    loadings: [],
-  };
 
-  enterLoading = index => {
+  const enterLoading = index => {
-    const newLoadings = [...this.state.loadings];
+    const newLoadings = [...loadings];
     newLoadings[index] = true;
-    this.setState({
+    setLodings(newLoadings);
-      loadings: newLoadings,
+
-    });
     setTimeout(() => {
-      newLoadings[index] = false;
+      setLodings(prevLoadings => {
-      this.setState({ loadings: newLoadings });
+        const temLoadings = [...prevLoadings];
+        temLoadings[index] = false;
+        return temLoadings;
+      });
     }, 6000);
   };
 
-  render() {
-    const { loadings } = this.state;
   return (
     <Space direction="vertical">
       <Dropdown.Button type="primary" loading overlay={menu}>
@@ -58,7 +56,7 @@ class App extends React.Component {
         type="primary"
         loading={loadings[0]}
         overlay={menu}
-          onClick={() => this.enterLoading(0)}
+        onClick={() => enterLoading(0)}
       >
         Submit
       </Dropdown.Button>
@@ -66,13 +64,11 @@ class App extends React.Component {
         icon={<DownOutlined />}
         loading={loadings[1]}
         overlay={menu}
-          onClick={() => this.enterLoading(1)}
+        onClick={() => enterLoading(1)}
       >
         Submit
       </Dropdown.Button>
     </Space>
   );
-  }
+};
-}
-export default App;
 ```

components/dropdown/demo/overlay-visible.md

@@ -17,25 +17,22 @@ The default is to close the menu when you click on menu items, this feature can
 import { Menu, Dropdown, Space } from 'antd';
 import { DownOutlined } from '@ant-design/icons';
 
-class OverlayVisible extends React.Component {
+export default () => {
-  state = {
+  const [visible, setVisible] = React.useState(false);
-    visible: false,
-  };
 
-  handleMenuClick = e => {
+  const handleMenuClick = e => {
     if (e.key === '3') {
-      this.setState({ visible: false });
+      setVisible(false);
     }
   };
 
-  handleVisibleChange = flag => {
+  const handleVisibleChange = flag => {
-    this.setState({ visible: flag });
+    setVisible(flag);
   };
 
-  render() {
   const menu = (
     <Menu
-        onClick={this.handleMenuClick}
+      onClick={handleMenuClick}
       items={[
         {
           label: 'Clicking me will not close the menu.',
@@ -52,12 +49,9 @@ class OverlayVisible extends React.Component {
       ]}
     />
   );
+
   return (
-      <Dropdown
+    <Dropdown overlay={menu} onVisibleChange={handleVisibleChange} visible={visible}>
-        overlay={menu}
-        onVisibleChange={this.handleVisibleChange}
-        visible={this.state.visible}
-      >
       <a onClick={e => e.preventDefault()}>
         <Space>
           Hover me
@@ -66,8 +60,5 @@ class OverlayVisible extends React.Component {
       </a>
     </Dropdown>
   );
-  }
+};
-}
-
-export default () => <OverlayVisible />;
 ```

components/empty/demo/config-provider.md

@@ -36,21 +36,17 @@ const customizeRenderEmpty = () => (
 
 const style = { width: 200 };
 
-class Demo extends React.Component {
+export default () => {
-  state = {
+  const [customize, setCustomize] = React.useState(false);
-    customize: false,
-  };
 
-  render() {
-    const { customize } = this.state;
   return (
     <div>
       <Switch
         unCheckedChildren="default"
         checkedChildren="customize"
         checked={customize}
-          onChange={val => {
+        onChange={value => {
-            this.setState({ customize: val });
+          setCustomize(value);
         }}
       />
 
@@ -93,10 +89,7 @@ class Demo extends React.Component {
       </ConfigProvider>
     </div>
   );
-  }
+};
-}
-
-export default Demo;
 ```
 
 <style>

components/grid/demo/playground.md

@@ -30,27 +30,26 @@ const colCounts = {};
   colCounts[i] = value;
 });
 
-class App extends React.Component {
+export default () => {
-  state = {
+  const [state, setState] = React.useState({
     gutterKey: 1,
     vgutterKey: 1,
     colCountKey: 2,
+  });
+
+  const onGutterChange = gutterKey => {
+    setState({ ...state, gutterKey });
   };
 
-  onGutterChange = gutterKey => {
+  const onVGutterChange = vgutterKey => {
-    this.setState({ gutterKey });
+    setState({ ...state, vgutterKey });
   };
 
-  onVGutterChange = vgutterKey => {
+  const onColCountChange = colCountKey => {
-    this.setState({ vgutterKey });
+    setState({ ...state, colCountKey });
   };
 
-  onColCountChange = colCountKey => {
+  const { gutterKey, vgutterKey, colCountKey } = state;
-    this.setState({ colCountKey });
-  };
-
-  render() {
-    const { gutterKey, vgutterKey, colCountKey } = this.state;
   const cols = [];
   const colCount = colCounts[colCountKey];
   let colCode = '';
@@ -62,6 +61,7 @@ class App extends React.Component {
     );
     colCode += `  <Col span={${24 / colCount}} />\n`;
   }
+
   return (
     <>
       <span>Horizontal Gutter (px): </span>
@@ -70,7 +70,7 @@ class App extends React.Component {
           min={0}
           max={Object.keys(gutters).length - 1}
           value={gutterKey}
-            onChange={this.onGutterChange}
+          onChange={onGutterChange}
           marks={gutters}
           step={null}
           tipFormatter={value => gutters[value]}
@@ -82,7 +82,7 @@ class App extends React.Component {
           min={0}
           max={Object.keys(vgutters).length - 1}
           value={vgutterKey}
-            onChange={this.onVGutterChange}
+          onChange={onVGutterChange}
           marks={vgutters}
           step={null}
           tipFormatter={value => vgutters[value]}
@@ -94,7 +94,7 @@ class App extends React.Component {
           min={0}
           max={Object.keys(colCounts).length - 1}
           value={colCountKey}
-            onChange={this.onColCountChange}
+          onChange={onColCountChange}
           marks={colCounts}
           step={null}
           tipFormatter={value => colCounts[value]}
@@ -110,10 +110,7 @@ class App extends React.Component {
       <pre className="demo-code">{`<Row gutter={[${gutters[gutterKey]}, ${vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
     </>
   );
-  }
+};
-}
-
-export default App;
 ```
 
 ```css

components/input-number/demo/disabled.md

@@ -16,30 +16,22 @@ Click the button to toggle between available and disabled states.
 ```jsx
 import { InputNumber, Button } from 'antd';
 
-class App extends React.Component {
+export default () => {
-  state = {
+  const [disabled, setDisabled] = React.useState(true);
-    disabled: true,
+
+  const toggle = () => {
+    setDisabled(!disabled);
   };
 
-  toggle = () => {
-    this.setState({
-      disabled: !this.state.disabled,
-    });
-  };
-
-  render() {
   return (
     <>
-        <InputNumber min={1} max={10} disabled={this.state.disabled} defaultValue={3} />
+      <InputNumber min={1} max={10} disabled={disabled} defaultValue={3} />
       <div style={{ marginTop: 20 }}>
-          <Button onClick={this.toggle} type="primary">
+        <Button onClick={toggle} type="primary">
           Toggle disabled
         </Button>
       </div>
     </>
   );
-  }
+};
-}
-
-export default App;
 ```

components/input/demo/autosize-textarea.md

@@ -18,18 +18,14 @@ import { Input } from 'antd';
 
 const { TextArea } = Input;
 
-class Demo extends React.Component {
+export default () => {
-  state = {
+  const [value, setValue] = React.useState();
-    value: '',
-  };
 
-  onChange = ({ target: { value } }) => {
+  // eslint-disable-next-line @typescript-eslint/no-shadow
-    this.setState({ value });
+  const onChange = ({ target: { value } }) => {
+    setValue(value);
   };
 
-  render() {
-    const { value } = this.state;
-
   return (
     <>
       <TextArea placeholder="Autosize height based on content lines" autoSize />
@@ -41,14 +37,11 @@ class Demo extends React.Component {
       <div style={{ margin: '24px 0' }} />
       <TextArea
         value={value}
-          onChange={this.onChange}
+        onChange={onChange}
         placeholder="Controlled autosize"
         autoSize={{ minRows: 3, maxRows: 5 }}
       />
     </>
   );
-  }
+};
-}
-
-export default Demo;
 ```

components/input/demo/textarea-resize.md

@@ -22,28 +22,17 @@ const { TextArea } = Input;
 const defaultValue =
   'The autoSize property applies to textarea nodes, and only the height changes automatically. In addition, autoSize can be set to an object, specifying the minimum number of rows and the maximum number of rows. The autoSize property applies to textarea nodes, and only the height changes automatically. In addition, autoSize can be set to an object, specifying the minimum number of rows and the maximum number of rows.';
 
-class Demo extends React.Component {
+export default () => {
-  state = {
+  const [autoResize, setAutoResize] = React.useState(false);
-    autoResize: false,
-  };
-
-  render() {
-    const { autoResize } = this.state;
 
   return (
     <>
-        <Button
+      <Button onClick={() => setAutoResize(!autoResize)} style={{ marginBottom: 16 }}>
-          onClick={() => this.setState({ autoResize: !autoResize })}
-          style={{ marginBottom: 16 }}
-        >
         Auto Resize: {String(autoResize)}
       </Button>
       <TextArea rows={4} autoSize={autoResize} defaultValue={defaultValue} />
       <TextArea allowClear style={{ width: 93 }} />
     </>
   );
-  }
+};
-}
-
-export default Demo;
 ```

components/input/demo/tooltip.md

@@ -20,18 +20,19 @@ function formatNumber(value) {
   return new Intl.NumberFormat().format(value);
 }
 
-class NumericInput extends React.Component {
+const NumericInput = props => {
-  onChange = e => {
+  const { value, onBlur, onChange } = props;
-    const { value } = e.target;
+
+  const handleChange = e => {
+    const inputValue = e.target.value;
     const reg = /^-?\d*(\.\d*)?$/;
-    if ((!isNaN(value) && reg.test(value)) || value === '' || value === '-') {
+    if ((!isNaN(inputValue) && reg.test(inputValue)) || inputValue === '' || inputValue === '-') {
-      this.props.onChange(value);
+      onChange(inputValue);
     }
   };
 
   // '.' at the end or only '-' in the input box.
-  onBlur = () => {
+  const handleBlur = () => {
-    const { value, onBlur, onChange } = this.props;
     let valueTemp = value;
     if (value.charAt(value.length - 1) === '.' || value === '-') {
       valueTemp = value.slice(0, -1);
@@ -42,50 +43,33 @@ class NumericInput extends React.Component {
     }
   };
 
-  render() {
-    const { value } = this.props;
   const title = value ? (
     <span className="numeric-input-title">{value !== '-' ? formatNumber(value) : '-'}</span>
   ) : (
     'Input a number'
   );
   return (
-      <Tooltip
+    <Tooltip trigger={['focus']} title={title} placement="topLeft" overlayClassName="numeric-input">
-        trigger={['focus']}
-        title={title}
-        placement="topLeft"
-        overlayClassName="numeric-input"
-      >
       <Input
-          {...this.props}
+        {...props}
-          onChange={this.onChange}
+        onChange={handleChange}
-          onBlur={this.onBlur}
+        onBlur={handleBlur}
         placeholder="Input a number"
         maxLength={25}
       />
     </Tooltip>
   );
-  }
-}
-
-class NumericInputDemo extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { value: '' };
-  }
-
-  onChange = value => {
-    this.setState({ value });
 };
 
-  render() {
+export default () => {
-    return (
+  const [value, setValue] = React.useState();
-      <NumericInput style={{ width: 120 }} value={this.state.value} onChange={this.onChange} />
-    );
-  }
-}
 
-export default () => <NumericInputDemo />;
+  const onChange = val => {
+    setValue(val);
+  };
+
+  return <NumericInput style={{ width: 120 }} value={value} onChange={onChange} />;
+};
 ```
 
 ```css

components/segmented/__tests__/index.test.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { mount } from 'enzyme';
 import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';
 
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
+import { render, fireEvent } from '../../../tests/utils';
+
 import Segmented from '../index';
 import type { SegmentedValue } from '../index';
-import { render } from '../../../tests/utils';
 
 // Make CSSMotion working without transition
 jest.mock('rc-motion/lib/util/motion', () => ({
@@ -16,6 +16,19 @@ jest.mock('rc-motion/lib/util/motion', () => ({
 
 const prefixCls = 'ant-segmented';
 
+function expectMatchChecked(container: HTMLElement, checkedList: boolean[]) {
+  const inputList = Array.from(
+    container.querySelectorAll<HTMLInputElement>(`.${prefixCls}-item-input`),
+  );
+  expect(inputList).toHaveLength(checkedList.length);
+
+  inputList.forEach((input, i) => {
+    const checked = checkedList[i];
+
+    expect(input.checked).toBe(checked);
+  });
+}
+
 describe('Segmented', () => {
   mountTest(Segmented);
   rtlTest(Segmented);
@@ -29,26 +42,22 @@ describe('Segmented', () => {
   });
 
   it('render empty segmented', () => {
-    const wrapper = mount(<Segmented options={[]} />);
+    const { asFragment } = render(<Segmented options={[]} />);
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(asFragment().firstChild).toMatchSnapshot();
   });
 
   it('render segmented ok', () => {
-    const wrapper = mount(
+    const { asFragment, container } = render(
       <Segmented options={[{ label: 'Daily', value: 'Daily' }, 'Weekly', 'Monthly']} />,
     );
 
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(asFragment().firstChild).toMatchSnapshot();
 
-    expect(
+    expectMatchChecked(container, [true, false, false]);
-      wrapper
-        .find(`.${prefixCls}-item-input`)
-        .map(el => (el.getDOMNode() as HTMLInputElement).checked),
-    ).toEqual([true, false, false]);
   });
 
   it('render label with ReactNode', () => {
-    const wrapper = mount(
+    const { asFragment, container } = render(
       <Segmented
         options={[
           { label: 'Daily', value: 'Daily' },
@@ -58,164 +67,127 @@ describe('Segmented', () => {
       />,
     );
 
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(asFragment().firstChild).toMatchSnapshot();
 
-    expect(
+    expectMatchChecked(container, [true, false, false]);
-      wrapper
-        .find(`.${prefixCls}-item-input`)
-        .map(el => (el.getDOMNode() as HTMLInputElement).checked),
-    ).toEqual([true, false, false]);
 
-    expect(wrapper.find('#weekly').at(0).text()).toContain('Weekly');
+    expect(container.querySelector('#weekly')?.textContent).toContain('Weekly');
-    expect(wrapper.find('h2').at(0).text()).toContain('Monthly');
+    expect(container.querySelectorAll('h2')[0].textContent).toContain('Monthly');
   });
 
   it('render segmented with defaultValue', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Segmented
         options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']}
         defaultValue="Quarterly"
       />,
     );
 
-    expect(
+    expectMatchChecked(container, [false, false, false, true, false]);
-      wrapper
-        .find(`.${prefixCls}-item-input`)
-        .map(el => (el.getDOMNode() as HTMLInputElement).checked),
-    ).toEqual([false, false, false, true, false]);
   });
 
   it('render segmented with string options', () => {
     const handleValueChange = jest.fn();
-    const wrapper = mount(
+    const { asFragment, container } = render(
       <Segmented options={['Daily', 'Weekly', 'Monthly']} onChange={handleValueChange} />,
     );
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(asFragment().firstChild).toMatchSnapshot();
 
+    expectMatchChecked(container, [true, false, false]);
     expect(
-      wrapper
+      container
-        .find(`.${prefixCls}-item-input`)
+        .querySelectorAll(`label.${prefixCls}-item`)[0]
-        .map(el => (el.getDOMNode() as HTMLInputElement).checked),
+        .classList.contains(`${prefixCls}-item-selected`),
-    ).toEqual([true, false, false]);
-    expect(
-      wrapper.find(`label.${prefixCls}-item`).at(0).hasClass(`${prefixCls}-item-selected`),
     ).toBeTruthy();
 
-    wrapper.find(`.${prefixCls}-item-input`).at(2).simulate('change');
+    fireEvent.click(container.querySelectorAll(`.${prefixCls}-item-input`)[2]);
     expect(handleValueChange).toBeCalledWith('Monthly');
 
-    expect(
+    expectMatchChecked(container, [false, false, true]);
-      wrapper
-        .find(`.${prefixCls}-item-input`)
-        .map(el => (el.getDOMNode() as HTMLInputElement).checked),
-    ).toEqual([false, false, true]);
   });
 
   it('render segmented with numeric options', () => {
     const handleValueChange = jest.fn();
-    const wrapper = mount(
+    const { asFragment, container } = render(
       <Segmented options={[1, 2, 3, 4, 5]} onChange={value => handleValueChange(value)} />,
     );
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(asFragment().firstChild).toMatchSnapshot();
-    expect(
+    expectMatchChecked(container, [true, false, false, false, false]);
-      wrapper
-        .find(`.${prefixCls}-item-input`)
-        .map(el => (el.getDOMNode() as HTMLInputElement).checked),
-    ).toEqual([true, false, false, false, false]);
 
-    wrapper.find(`.${prefixCls}-item-input`).last().simulate('change');
+    fireEvent.click(container.querySelectorAll(`.${prefixCls}-item-input`)[4]);
     expect(handleValueChange).toBeCalledWith(5);
 
-    expect(
+    expectMatchChecked(container, [false, false, false, false, true]);
-      wrapper
-        .find(`.${prefixCls}-item-input`)
-        .map(el => (el.getDOMNode() as HTMLInputElement).checked),
-    ).toEqual([false, false, false, false, true]);
   });
 
   it('render segmented with mixed options', () => {
     const handleValueChange = jest.fn();
-    const wrapper = mount(
+    const { asFragment, container } = render(
       <Segmented
         options={['Daily', { label: 'Weekly', value: 'Weekly' }, 'Monthly']}
         onChange={value => handleValueChange(value)}
       />,
     );
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(asFragment().firstChild).toMatchSnapshot();
+    expectMatchChecked(container, [true, false, false]);
 
-    wrapper.find(`.${prefixCls}-item-input`).at(1).simulate('change');
+    fireEvent.click(container.querySelectorAll(`.${prefixCls}-item-input`)[1]);
     expect(handleValueChange).toBeCalledWith('Weekly');
 
-    expect(
+    expectMatchChecked(container, [false, true, false]);
-      wrapper
-        .find(`.${prefixCls}-item-input`)
-        .map(el => (el.getDOMNode() as HTMLInputElement).checked),
-    ).toEqual([false, true, false]);
   });
 
   it('render segmented with options: disabled', () => {
     const handleValueChange = jest.fn();
-    const wrapper = mount(
+    const { asFragment, container } = render(
       <Segmented
         options={['Daily', { label: 'Weekly', value: 'Weekly', disabled: true }, 'Monthly']}
         onChange={value => handleValueChange(value)}
       />,
     );
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(asFragment().firstChild).toMatchSnapshot();
     expect(
-      wrapper.find(`label.${prefixCls}-item`).at(1).hasClass(`${prefixCls}-item-disabled`),
+      container
+        .querySelectorAll(`label.${prefixCls}-item`)[1]
+        .classList.contains(`${prefixCls}-item-disabled`),
     ).toBeTruthy();
-    expect(wrapper.find(`.${prefixCls}-item-input`).at(1).prop('disabled')).toBeTruthy();
+    expect(container.querySelectorAll(`.${prefixCls}-item-input`)[1]).toHaveAttribute('disabled');
 
-    wrapper.find(`.${prefixCls}-item-input`).at(1).simulate('change');
+    fireEvent.click(container.querySelectorAll(`.${prefixCls}-item-input`)[1]);
     expect(handleValueChange).not.toBeCalled();
 
-    expect(
+    expectMatchChecked(container, [true, false, false]);
-      wrapper
-        .find(`.${prefixCls}-item-input`)
-        .map(el => (el.getDOMNode() as HTMLInputElement).checked),
-    ).toEqual([true, false, false]);
 
-    wrapper.find(`.${prefixCls}-item-input`).at(2).simulate('change');
+    fireEvent.click(container.querySelectorAll(`.${prefixCls}-item-input`)[2]);
     expect(handleValueChange).toBeCalledWith('Monthly');
     expect(handleValueChange).toBeCalledTimes(1);
 
-    expect(
+    expectMatchChecked(container, [false, false, true]);
-      wrapper
-        .find(`.${prefixCls}-item-input`)
-        .map(el => (el.getDOMNode() as HTMLInputElement).checked),
-    ).toEqual([false, false, true]);
   });
 
   it('render segmented: disabled', () => {
     const handleValueChange = jest.fn();
-    const wrapper = mount(
+    const { asFragment, container } = render(
       <Segmented
         disabled
         options={['Daily', 'Weekly', 'Monthly']}
         onChange={value => handleValueChange(value)}
       />,
     );
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(asFragment().firstChild).toMatchSnapshot();
-    expect(wrapper.find(`.${prefixCls}`).hasClass(`${prefixCls}-disabled`)).toBeTruthy();
+    expect(
+      container.querySelectorAll(`.${prefixCls}`)[0].classList.contains(`${prefixCls}-disabled`),
+    ).toBeTruthy();
 
-    wrapper.find(`.${prefixCls}-item-input`).at(1).simulate('change');
+    fireEvent.click(container.querySelectorAll(`.${prefixCls}-item-input`)[1]);
     expect(handleValueChange).not.toBeCalled();
 
-    expect(
+    expectMatchChecked(container, [true, false, false]);
-      wrapper
-        .find(`.${prefixCls}-item-input`)
-        .map(el => (el.getDOMNode() as HTMLInputElement).checked),
-    ).toEqual([true, false, false]);
 
-    wrapper.find(`.${prefixCls}-item-input`).at(2).simulate('change');
+    fireEvent.click(container.querySelectorAll(`.${prefixCls}-item-input`)[2]);
     expect(handleValueChange).not.toBeCalled();
 
-    expect(
+    expectMatchChecked(container, [true, false, false]);
-      wrapper
-        .find(`.${prefixCls}-item-input`)
-        .map(el => (el.getDOMNode() as HTMLInputElement).checked),
-    ).toEqual([true, false, false]);
   });
 
   it('render segmented with className and other html attributes', () => {
@@ -234,11 +206,11 @@ describe('Segmented', () => {
 
   it('render segmented with ref', () => {
     const ref = React.createRef<HTMLDivElement>();
-    const wrapper = mount(
+    const { container } = render(
       <Segmented options={['Daily', 'Monthly', 'Weekly']} defaultValue="Weekly" ref={ref} />,
     );
 
-    expect((wrapper.find(Segmented).getElement() as any).ref).toBe(ref);
+    expect(ref.current).toBe(container.querySelector(`.${prefixCls}`));
   });
 
   it('render segmented with controlled mode', async () => {
@@ -249,6 +221,7 @@ describe('Segmented', () => {
 
       render() {
         return (
+          <>
             <Segmented
               options={['Map', 'Transit', 'Satellite']}
               value={this.state.value}
@@ -258,106 +231,114 @@ describe('Segmented', () => {
                 })
               }
             />
+            <div className="value">{this.state.value}</div>
+            <input
+              className="control"
+              onChange={e => {
+                this.setState({ value: e.target.value });
+              }}
+            />
+          </>
         );
       }
     }
 
-    const wrapper = mount<typeof Demo>(<Demo />);
+    const { container } = render(<Demo />);
-    wrapper.find('Segmented').find(`.${prefixCls}-item-input`).at(0).simulate('change');
+    fireEvent.click(container.querySelectorAll(`.${prefixCls}-item-input`)[0]);
-    expect(wrapper.find(Demo).state().value).toBe('Map');
+    expect(container.querySelector('.value')?.textContent).toBe('Map');
 
-    wrapper.find('Segmented').find(`.${prefixCls}-item-input`).at(1).simulate('change');
+    fireEvent.click(container.querySelectorAll(`.${prefixCls}-item-input`)[1]);
-    expect(wrapper.find(Demo).state().value).toBe('Transit');
+    expect(container.querySelector('.value')?.textContent).toBe('Transit');
   });
 
   it('render segmented with options null/undefined', () => {
     const handleValueChange = jest.fn();
-    const wrapper = mount(
+    const { asFragment, container } = render(
       <Segmented
         options={[null, undefined, ''] as any}
         disabled
         onChange={value => handleValueChange(value)}
       />,
     );
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(asFragment().firstChild).toMatchSnapshot();
-    expect(wrapper.find(`.${prefixCls}-item-label`).map(n => n.getDOMNode().textContent)).toEqual([
+    expect(
-      '',
+      Array.from(container.querySelectorAll(`.${prefixCls}-item-label`)).map(n => n.textContent),
-      '',
+    ).toEqual(['', '', '']);
-      '',
-    ]);
   });
 
   it('render segmented with thumb', () => {
     const handleValueChange = jest.fn();
-    const wrapper = mount(
+    const { asFragment, container } = render(
       <Segmented
         options={['Map', 'Transit', 'Satellite']}
         onChange={value => handleValueChange(value)}
       />,
     );
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(asFragment().firstChild).toMatchSnapshot();
 
+    expectMatchChecked(container, [true, false, false]);
     expect(
-      wrapper
+      container
-        .find(`.${prefixCls}-item-input`)
+        .querySelectorAll(`label.${prefixCls}-item`)[0]
-        .map(el => (el.getDOMNode() as HTMLInputElement).checked),
+        .classList.contains(`${prefixCls}-item-selected`),
-    ).toEqual([true, false, false]);
-    expect(
-      wrapper.find(`label.${prefixCls}-item`).at(0).hasClass(`${prefixCls}-item-selected`),
     ).toBeTruthy();
 
-    wrapper.find(`.${prefixCls}-item-input`).at(2).simulate('change');
+    fireEvent.click(container.querySelectorAll(`.${prefixCls}-item-input`)[2]);
     expect(handleValueChange).toBeCalledWith('Satellite');
 
-    expect(
+    expectMatchChecked(container, [false, false, true]);
-      wrapper
-        .find(`.${prefixCls}-item-input`)
-        .map(el => (el.getDOMNode() as HTMLInputElement).checked),
-    ).toEqual([false, false, true]);
 
     // thumb appeared
-    expect(wrapper.find(`.${prefixCls}-thumb`).length).toBe(1);
+    expect(container.querySelectorAll(`.${prefixCls}-thumb`).length).toBe(1);
 
     // change selection again
-    wrapper.find(`.${prefixCls}-item-input`).at(1).simulate('change');
+    fireEvent.click(container.querySelectorAll(`.${prefixCls}-item-input`)[1]);
     expect(handleValueChange).toBeCalledWith('Transit');
 
-    expect(
+    expectMatchChecked(container, [false, true, false]);
-      wrapper
-        .find(`.${prefixCls}-item-input`)
-        .map(el => (el.getDOMNode() as HTMLInputElement).checked),
-    ).toEqual([false, true, false]);
 
     // thumb appeared
-    expect(wrapper.find(`.${prefixCls}-thumb`).length).toBe(1);
+    expect(container.querySelectorAll(`.${prefixCls}-thumb`).length).toBe(1);
   });
 
   it('render segmented with `block`', () => {
-    const wrapper = mount(<Segmented block options={['Daily', 'Weekly', 'Monthly']} />);
+    const { asFragment, container } = render(
+      <Segmented block options={['Daily', 'Weekly', 'Monthly']} />,
+    );
 
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(asFragment().firstChild).toMatchSnapshot();
 
-    expect(wrapper.find(`.${prefixCls}`).at(0).hasClass(`${prefixCls}-block`)).toBeTruthy();
+    expect(
+      container.querySelectorAll(`.${prefixCls}`)[0].classList.contains(`${prefixCls}-block`),
+    ).toBeTruthy();
   });
 
   it('render segmented with `size#small`', () => {
-    const wrapper = mount(<Segmented size="small" options={['Daily', 'Weekly', 'Monthly']} />);
+    const { asFragment, container } = render(
+      <Segmented size="small" options={['Daily', 'Weekly', 'Monthly']} />,
+    );
 
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(asFragment().firstChild).toMatchSnapshot();
 
-    expect(wrapper.find(`.${prefixCls}`).at(0).hasClass(`${prefixCls}-sm`)).toBeTruthy();
+    expect(
+      container.querySelectorAll(`.${prefixCls}`)[0].classList.contains(`${prefixCls}-sm`),
+    ).toBeTruthy();
   });
 
   it('render segmented with `size#large`', () => {
-    const wrapper = mount(<Segmented size="large" options={['Daily', 'Weekly', 'Monthly']} />);
+    const { asFragment, container } = render(
+      <Segmented size="large" options={['Daily', 'Weekly', 'Monthly']} />,
+    );
 
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(asFragment().firstChild).toMatchSnapshot();
 
-    expect(wrapper.find(`.${prefixCls}`).at(0).hasClass(`${prefixCls}-lg`)).toBeTruthy();
+    expect(
+      container.querySelectorAll(`.${prefixCls}`)[0].classList.contains(`${prefixCls}-lg`),
+    ).toBeTruthy();
   });
 
   it('render with icons', () => {
-    const wrapper = mount(
+    const { asFragment, container } = render(
       <Segmented
         options={[
           {
@@ -372,8 +353,12 @@ describe('Segmented', () => {
         ]}
       />,
     );
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(asFragment().firstChild).toMatchSnapshot();
-    expect(wrapper.find(`span.${prefixCls}-item-icon`).length).toBe(2);
+    expect(container.querySelectorAll(`span.${prefixCls}-item-icon`).length).toBe(2);
-    expect(wrapper.find(`div.${prefixCls}-item-label`).at(1).contains('KanbanYes')).toBeTruthy();
+    expect(
+      container
+        .querySelectorAll(`div.${prefixCls}-item-label`)[1]
+        .textContent?.includes('KanbanYes'),
+    ).toBeTruthy();
   });
 });

components/table/index.en-US.md

@@ -214,6 +214,7 @@ Properties for row selection.
 | onSelectAll | Callback executed when select/deselect all rows | function(selected, selectedRows, changeRows) | - |  |
 | onSelectInvert | Callback executed when row selection is inverted | function(selectedRowKeys) | - |  |
 | onSelectNone | Callback executed when row selection is cleared | function() | - |  |
+| onSelectMultiple | Callback executed when row selection is changed by pressing shift | function(selected, selectedRows, changeRows) | - |  |
 
 ### scroll
 

components/table/index.zh-CN.md

@@ -216,6 +216,7 @@ const columns = [
 | onSelectAll | 用户手动选择/取消选择所有行的回调 | function(selected, selectedRows, changeRows) | - |  |
 | onSelectInvert | 用户手动选择反选的回调 | function(selectedRowKeys) | - |  |
 | onSelectNone | 用户清空选择的回调 | function() | - |  |
+| onSelectMultiple | 用户使用键盘 shift 选择多行的回调 | function(selected, selectedRows, changeRows) | - |  |
 
 ### scroll
 

components/table/interface.tsx

@@ -153,11 +153,13 @@ export interface TableRowSelection<T> {
   onChange?: (selectedRowKeys: Key[], selectedRows: T[]) => void;
   getCheckboxProps?: (record: T) => Partial<Omit<CheckboxProps, 'checked' | 'defaultChecked'>>;
   onSelect?: SelectionSelectFn<T>;
+  /** @deprecated This function is deprecated and should use `onChange` instead */
   onSelectMultiple?: (selected: boolean, selectedRows: T[], changeRows: T[]) => void;
-  /** @deprecated This function is meaningless and should use `onChange` instead */
+  /** @deprecated This function is deprecated and should use `onChange` instead */
   onSelectAll?: (selected: boolean, selectedRows: T[], changeRows: T[]) => void;
-  /** @deprecated This function is meaningless and should use `onChange` instead */
+  /** @deprecated This function is deprecated and should use `onChange` instead */
   onSelectInvert?: (selectedRowKeys: Key[]) => void;
+  /** @deprecated This function is deprecated and should use `onChange` instead */
   onSelectNone?: () => void;
   selections?: INTERNAL_SELECTION_ITEM[] | boolean;
   hideSelectAll?: boolean;

docs/resources.zh-CN.md

@@ -122,11 +122,11 @@ ReactDOM.render(<Articles />, mountNode);
 
 ### UI/UE 设计师
 
-简历和作品集请投递：lindong.lld#antgroup.com
+简历和作品集请投递：jiayin.liu#antgroup.com
 
 > 注明简历来自 ant.design 官网
 
-- 岗位级别：P6/P7/P8
+- 岗位级别：P5/P6/P7/P8
 - 岗位地点：杭州
 - 岗位要求：
   - 至少 3-5 年的工作经验，扎实设计功底；
@@ -141,7 +141,6 @@ ReactDOM.render(<Articles />, mountNode);
   - 参与 Ant Design 的打磨，将其建设成全球卓越的设计体系。
   - 参与 AntV 的打磨，将其建设成全球一流的数据可视化体系。
 - One More Thing ❤️ ：
-
   - 你们总是为世界带去美好，但总是忘却你们也需要美好。我们正在努力打造 [🍳 Kitchen：一款为设计师提效的 Sketch 工具集](https://kitchen.alipay.com/)等专属设计师的产品，让设计真正变成财富。期待志同道合的你，一道给设计行业带来「微小而美好的改变」。
 
 ### 前端工程师
@@ -150,21 +149,20 @@ ReactDOM.render(<Articles />, mountNode);
 
 > 注明简历来自 ant.design 官网
 
-- 岗位级别：P6/P7/P8
+- 岗位级别：P5/P6/P7/P8
-- 岗位地点：杭州
+- 岗位地点：杭州/上海
 - 岗位要求：
   - 在 React 技术栈持续耕耘，情有独钟。
   - 热爱开源。
   - 坚持和善于用技术和工具解决其他问题。
   - 丰富的中后台前端研发经验。
-  - 爱 🐱。
 - 岗位职责：
   - 负责 Ant Design 前端基础设施研发。
   - 负责中后台设计/前端工具体系建设。
 
 ### ADI（Artificial Design Intelligence） 工程师
 
-简历和作品集请投递：lindong.lld#alipay.com
+简历和作品集请投递：jiayin.liu#antgroup.com
 
 > 注明简历来自 ant.design 官网
 

package.json

@@ -200,7 +200,7 @@
     "cheerio": "^1.0.0-rc.3",
     "concurrently": "^7.0.0",
     "cross-env": "^7.0.0",
-    "css-minimizer-webpack-plugin": "^3.2.0",
+    "css-minimizer-webpack-plugin": "^1.3.0",
     "dekko": "^0.2.1",
     "docsearch-react-fork": "^0.0.0-alpha.0",
     "docsearch.js": "^2.6.3",
@@ -246,7 +246,7 @@
     "jsonml.js": "^0.1.0",
     "less-vars-to-js": "^1.3.0",
     "lz-string": "^1.4.4",
-    "mini-css-extract-plugin": "^2.4.5",
+    "mini-css-extract-plugin": "^1.6.2",
     "mockdate": "^3.0.0",
     "open": "^8.0.1",
     "prettier": "^2.3.2",
@@ -279,12 +279,11 @@
     "remark-cli": "^10.0.0",
     "remark-lint": "^9.0.0",
     "remark-preset-lint-recommended": "^6.0.0",
-    "remove-files-webpack-plugin": "^1.4.5",
+    "remove-files-webpack-plugin": "1.4.4",
     "rimraf": "^3.0.0",
     "scrollama": "^3.0.0",
     "semver": "^7.3.5",
     "simple-git": "^3.0.0",
-    "string-replace-loader": "^3.0.3",
     "stylelint": "^14.0.0",
     "stylelint-config-prettier": "^9.0.2",
     "stylelint-config-rational-order": "^0.1.2",