chore: auto merge branches (#36906)

chore: feature merge master

components/page-header/style/index.less

@@ -29,7 +29,6 @@
     &-button {
       .operation-unit();
       color: @page-header-back-color;
-      cursor: pointer;
     }
   }
 

components/progress/__tests__/index.test.js

@@ -1,121 +1,132 @@
-import { mount } from 'enzyme';
 import React from 'react';
 import Progress from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { handleGradient, sortGradient } from '../Line';
 import ProgressSteps from '../Steps';
+import { render } from '../../../tests/utils';
 
 describe('Progress', () => {
   mountTest(Progress);
   rtlTest(Progress);
 
   it('successPercent should decide the progress status when it exists', () => {
-    const wrapper = mount(<Progress percent={100} success={{ percent: 50 }} />);
-    expect(wrapper.find('.ant-progress-status-success')).toHaveLength(0);
+    const { container: wrapper, rerender } = render(
+      <Progress percent={100} success={{ percent: 50 }} />,
+    );
+    expect(wrapper.querySelectorAll('.ant-progress-status-success')).toHaveLength(0);
 
-    wrapper.setProps({ percent: 50, success: { percent: 100 } });
-    expect(wrapper.find('.ant-progress-status-success')).toHaveLength(1);
+    rerender(<Progress percent={50} success={{ percent: 100 }} />);
+    expect(wrapper.querySelectorAll('.ant-progress-status-success')).toHaveLength(1);
 
-    wrapper.setProps({ percent: 100, success: { percent: 0 } });
-    expect(wrapper.find('.ant-progress-status-success')).toHaveLength(0);
+    rerender(<Progress percent={100} success={{ percent: 0 }} />);
+    expect(wrapper.querySelectorAll('.ant-progress-status-success')).toHaveLength(0);
   });
 
   it('render out-of-range progress', () => {
-    const wrapper = mount(<Progress percent={120} />);
-    expect(wrapper.render()).toMatchSnapshot();
+    const { container: wrapper } = render(<Progress percent={120} />);
+    expect(wrapper.firstChild).toMatchSnapshot();
   });
 
   it('render out-of-range progress with info', () => {
-    const wrapper = mount(<Progress percent={120} showInfo />);
-    expect(wrapper.render()).toMatchSnapshot();
+    const { container: wrapper } = render(<Progress percent={120} showInfo />);
+    expect(wrapper.firstChild).toMatchSnapshot();
   });
 
   it('render negative progress', () => {
-    const wrapper = mount(<Progress percent={-20} />);
-    expect(wrapper.render()).toMatchSnapshot();
+    const { container: wrapper } = render(<Progress percent={-20} />);
+    expect(wrapper.firstChild).toMatchSnapshot();
   });
 
   it('render negative successPercent', () => {
-    const wrapper = mount(<Progress percent={50} success={{ percent: -20 }} />);
-    expect(wrapper.render()).toMatchSnapshot();
+    const { container: wrapper } = render(<Progress percent={50} success={{ percent: -20 }} />);
+    expect(wrapper.firstChild).toMatchSnapshot();
   });
 
   it('render format', () => {
-    const wrapper = mount(
+    const { container: wrapper } = render(
       <Progress
         percent={50}
         success={{ percent: 10 }}
         format={(percent, successPercent) => `${percent} ${successPercent}`}
       />,
     );
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(wrapper.firstChild).toMatchSnapshot();
   });
 
   it('render strokeColor', () => {
-    const wrapper = mount(<Progress type="circle" percent={50} strokeColor="red" />);
-    expect(wrapper.render()).toMatchSnapshot();
-    wrapper.setProps({
-      strokeColor: {
-        from: '#108ee9',
-        to: '#87d068',
-      },
-      type: 'line',
-    });
-    expect(wrapper.render()).toMatchSnapshot();
-    wrapper.setProps({
-      strokeColor: {
-        '0%': '#108ee9',
-        '100%': '#87d068',
-      },
-    });
-    expect(wrapper.render()).toMatchSnapshot();
+    const { container: wrapper, rerender } = render(
+      <Progress type="circle" percent={50} strokeColor="red" />,
+    );
+    expect(wrapper.firstChild).toMatchSnapshot();
+    rerender(
+      <Progress
+        strokeColor={{
+          from: '#108ee9',
+          to: '#87d068',
+        }}
+        percent={50}
+        type="line"
+      />,
+    );
+    expect(wrapper.firstChild).toMatchSnapshot();
+    rerender(
+      <Progress
+        strokeColor={{
+          '0%': '#108ee9',
+          '100%': '#87d068',
+        }}
+        percent={50}
+        type="line"
+      />,
+    );
+    expect(wrapper.firstChild).toMatchSnapshot();
   });
 
   it('render normal progress', () => {
-    const wrapper = mount(<Progress status="normal" />);
-    expect(wrapper.render()).toMatchSnapshot();
+    const { container: wrapper } = render(<Progress status="normal" />);
+    expect(wrapper.firstChild).toMatchSnapshot();
   });
 
   it('render trailColor progress', () => {
-    const wrapper = mount(<Progress status="normal" trailColor="#ffffff" />);
-    expect(wrapper.render()).toMatchSnapshot();
+    const { container: wrapper } = render(<Progress status="normal" trailColor="#ffffff" />);
+    expect(wrapper.firstChild).toMatchSnapshot();
   });
 
   it('render successColor progress', () => {
-    const wrapper = mount(
+    const { container: wrapper } = render(
       <Progress percent={60} success={{ percent: 30, strokeColor: '#ffffff' }} />,
     );
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(wrapper.firstChild).toMatchSnapshot();
   });
 
   it('render successColor progress type="circle"', () => {
-    const wrapper = mount(
+    const { container: wrapper } = render(
       <Progress percent={60} type="circle" success={{ percent: 30, strokeColor: '#ffffff' }} />,
     );
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(wrapper.firstChild).toMatchSnapshot();
   });
 
   it('render successColor progress type="dashboard"', () => {
-    const wrapper = mount(
+    const { container: wrapper } = render(
       <Progress percent={60} type="dashboard" success={{ percent: 30, strokeColor: '#ffffff' }} />,
     );
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(wrapper.firstChild).toMatchSnapshot();
   });
 
   it('render dashboard zero gapDegree', () => {
-    const wrapper = mount(<Progress type="dashboard" gapDegree={0} />);
-    expect(wrapper.render()).toMatchSnapshot();
+    const { container: wrapper } = render(<Progress type="dashboard" gapDegree={0} />);
+    expect(wrapper.firstChild).toMatchSnapshot();
   });
 
   it('render dashboard 295 gapDegree', () => {
-    const wrapper = mount(<Progress type="dashboard" gapDegree={295} />);
-    expect(wrapper.render()).toMatchSnapshot();
+    const { container: wrapper } = render(<Progress type="dashboard" gapDegree={295} />);
+    expect(wrapper.firstChild).toMatchSnapshot();
   });
 
   it('render dashboard 296 gapDegree', () => {
-    const wrapper = mount(<Progress type="dashboard" gapDegree={296} />);
-    expect(wrapper.render()).toMatchSnapshot();
+    const { container: wrapper } = render(<Progress type="dashboard" gapDegree={296} />);
+    expect(wrapper.firstChild).toMatchSnapshot();
   });
 
   it('get correct line-gradient', () => {
@@ -138,74 +149,74 @@ describe('Progress', () => {
   });
 
   it('should show success status when percent is 100', () => {
-    const wrapper = mount(<Progress percent={100} />);
-    expect(wrapper.find('.ant-progress-status-success')).toHaveLength(1);
+    const { container: wrapper } = render(<Progress percent={100} />);
+    expect(wrapper.querySelectorAll('.ant-progress-status-success')).toHaveLength(1);
   });
 
   // https://github.com/ant-design/ant-design/issues/15950
   it('should show success status when percent is 100 and status is undefined', () => {
-    const wrapper = mount(<Progress percent={100} status={undefined} />);
-    expect(wrapper.find('.ant-progress-status-success')).toHaveLength(1);
+    const { container: wrapper } = render(<Progress percent={100} status={undefined} />);
+    expect(wrapper.querySelectorAll('.ant-progress-status-success')).toHaveLength(1);
   });
 
   // https://github.com/ant-design/ant-design/pull/15951#discussion_r273062969
   it('should show success status when status is invalid', () => {
     const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    const wrapper = mount(<Progress percent={100} status="invalid" />);
-    expect(wrapper.find('.ant-progress-status-success')).toHaveLength(1);
+    const { container: wrapper } = render(<Progress percent={100} status="invalid" />);
+    expect(wrapper.querySelectorAll('.ant-progress-status-success')).toHaveLength(1);
     errorSpy.mockRestore();
   });
 
   it('should support steps', () => {
-    const wrapper = mount(<Progress steps={3} />);
-    expect(wrapper.render()).toMatchSnapshot();
+    const { container: wrapper } = render(<Progress steps={3} />);
+    expect(wrapper.firstChild).toMatchSnapshot();
   });
 
   it('steps should be changable', () => {
-    const wrapper = mount(<Progress steps={5} percent={60} />);
-    expect(wrapper.find('.ant-progress-steps-item-active').length).toBe(3);
-    wrapper.setProps({ percent: 40 });
-    expect(wrapper.find('.ant-progress-steps-item-active').length).toBe(2);
+    const { container: wrapper, rerender } = render(<Progress steps={5} percent={60} />);
+    expect(wrapper.querySelectorAll('.ant-progress-steps-item-active').length).toBe(3);
+    rerender(<Progress steps={5} percent={40} />);
+    expect(wrapper.querySelectorAll('.ant-progress-steps-item-active').length).toBe(2);
   });
 
   it('steps should be changable when has strokeColor', () => {
-    const wrapper = mount(<Progress steps={5} percent={60} strokeColor="#1890ff" />);
-    expect(wrapper.find('.ant-progress-steps-item').at(0).getDOMNode().style.backgroundColor).toBe(
+    const { container: wrapper, rerender } = render(
+      <Progress steps={5} percent={60} strokeColor="#1890ff" />,
+    );
+    expect(wrapper.querySelectorAll('.ant-progress-steps-item')[0].style.backgroundColor).toBe(
       'rgb(24, 144, 255)',
     );
-    wrapper.setProps({ percent: 40 });
-    expect(wrapper.find('.ant-progress-steps-item').at(2).getDOMNode().style.backgroundColor).toBe(
-      '',
-    );
-    expect(wrapper.find('.ant-progress-steps-item').at(1).getDOMNode().style.backgroundColor).toBe(
+    rerender(<Progress steps={5} percent={40} strokeColor="#1890ff" />);
+    expect(wrapper.querySelectorAll('.ant-progress-steps-item')[2].style.backgroundColor).toBe('');
+    expect(wrapper.querySelectorAll('.ant-progress-steps-item')[1].style.backgroundColor).toBe(
       'rgb(24, 144, 255)',
     );
   });
 
   it('steps should support trailColor', () => {
-    const wrapper = mount(<Progress steps={5} percent={20} trailColor="#1890ee" />);
-    expect(wrapper.find('.ant-progress-steps-item').at(1).getDOMNode().style.backgroundColor).toBe(
+    const { container: wrapper } = render(<Progress steps={5} percent={20} trailColor="#1890ee" />);
+    expect(wrapper.querySelectorAll('.ant-progress-steps-item')[1].style.backgroundColor).toBe(
       'rgb(24, 144, 238)',
     );
   });
 
   it('should display correct step', () => {
-    const wrapper = mount(<Progress steps={9} percent={22.22} />);
-    expect(wrapper.find('.ant-progress-steps-item-active').length).toBe(2);
-    wrapper.setProps({ percent: 33.33 });
-    expect(wrapper.find('.ant-progress-steps-item-active').length).toBe(3);
-    wrapper.setProps({ percent: 44.44 });
-    expect(wrapper.find('.ant-progress-steps-item-active').length).toBe(4);
+    const { container: wrapper, rerender } = render(<Progress steps={9} percent={22.22} />);
+    expect(wrapper.querySelectorAll('.ant-progress-steps-item-active').length).toBe(2);
+    rerender(<Progress steps={9} percent={33.33} />);
+    expect(wrapper.querySelectorAll('.ant-progress-steps-item-active').length).toBe(3);
+    rerender(<Progress steps={9} percent={44.44} />);
+    expect(wrapper.querySelectorAll('.ant-progress-steps-item-active').length).toBe(4);
   });
 
   it('steps should have default percent 0', () => {
-    const wrapper = mount(<ProgressSteps />);
-    expect(wrapper.render()).toMatchSnapshot();
+    const { container: wrapper } = render(<ProgressSteps />);
+    expect(wrapper.firstChild).toMatchSnapshot();
   });
 
   it('should warnning if use `progress` in success', () => {
     const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    mount(<Progress percent={60} success={{ progress: 30 }} />);
+    render(<Progress percent={60} success={{ progress: 30 }} />);
     expect(errorSpy).toHaveBeenCalledWith(
       'Warning: [antd: Progress] `success.progress` is deprecated. Please use `success.percent` instead.',
     );
@@ -213,7 +224,7 @@ describe('Progress', () => {
 
   it('should warnning if use `progress` in success in type Circle', () => {
     const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    mount(<Progress percent={60} success={{ progress: 30 }} type="circle" />);
+    render(<Progress percent={60} success={{ progress: 30 }} type="circle" />);
     expect(errorSpy).toHaveBeenCalledWith(
       'Warning: [antd: Progress] `success.progress` is deprecated. Please use `success.percent` instead.',
     );
@@ -223,8 +234,10 @@ describe('Progress', () => {
   describe('github issues', () => {
     it('"Rendered more hooks than during the previous render"', () => {
       expect(() => {
-        const wrapper = mount(<Progress percent={60} success={{ percent: 0 }} type="circle" />);
-        wrapper.setProps({ success: { percent: 10 } });
+        const { rerender } = render(
+          <Progress percent={60} success={{ percent: 0 }} type="circle" />,
+        );
+        rerender(<Progress percent={60} success={{ percent: 10 }} type="circle" />);
       }).not.toThrow();
     });
   });

components/style/mixins/operation-unit.less

@@ -1,11 +1,10 @@
 .operation-unit() {
   color: @link-color;
-  text-decoration: none;
   outline: none;
   cursor: pointer;
   transition: color 0.3s;
 
-  &:focus,
+  &:focus-visible,
   &:hover {
     color: @link-hover-color;
   }

components/table/style/index.less

@@ -509,7 +509,6 @@
     background: @table-expand-icon-bg;
     border: @border-width-base @border-style-base @table-border-color;
     border-radius: @border-radius-base;
-    outline: none;
     transform: scale((unit(@checkbox-size) / unit(@expand-icon-size)));
     transition: all 0.3s;
     user-select: none;

components/transfer/style/index.less

@@ -127,9 +127,14 @@
         }
 
         &-remove {
-          .operation-unit();
           position: relative;
           color: @border-color-base;
+          cursor: pointer;
+          transition: all 0.3s;
+
+          &:hover {
+            color: @link-hover-color;
+          }
 
           &::after {
             position: absolute;
@@ -139,10 +144,6 @@
             left: -50%;
             content: '';
           }
-
-          &:hover {
-            color: @link-hover-color;
-          }
         }
       }
 

package.json

@@ -134,7 +134,7 @@
     "rc-image": "~5.7.0",
     "rc-input": "~0.1.2",
     "rc-input-number": "~7.3.5",
-    "rc-mentions": "~1.9.0",
+    "rc-mentions": "~1.9.1",
     "rc-menu": "~9.6.0",
     "rc-motion": "^2.6.1",
     "rc-notification": "~4.6.0",

site/theme/template/IconDisplay/Category.tsx

@@ -17,7 +17,7 @@ const Category: React.FC<CategoryProps> = props => {
   const { icons, title, newIcons, theme, intl } = props;
   const [justCopied, setJustCopied] = React.useState<string | null>(null);
   const copyId = React.useRef<NodeJS.Timeout | null>(null);
-  const onCopied = (type: string, text: string) => {
+  const onCopied = React.useCallback((type: string, text: string) => {
     message.success(
       <span>
         <code className="copied-code">{text}</code> copied 🎉
@@ -27,7 +27,7 @@ const Category: React.FC<CategoryProps> = props => {
     copyId.current = setTimeout(() => {
       setJustCopied(null);
     }, 2000);
-  };
+  }, []);
   React.useEffect(
     () => () => {
       if (copyId.current) {

site/theme/template/IconDisplay/IconPicSearcher.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Upload, Tooltip, Popover, Modal, Progress, message, Spin, Result } from 'antd';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { injectIntl } from 'react-intl';
@@ -73,7 +73,7 @@ const PicSearcher: React.FC<PicSearcherProps> = ({ intl }) => {
       };
     });
 
-  const uploadFile = (file: File) => {
+  const uploadFile = useCallback((file: File) => {
     setState(prev => ({ ...prev, loading: true }));
     const reader = new FileReader();
     reader.onload = () => {
@@ -84,8 +84,9 @@ const PicSearcher: React.FC<PicSearcherProps> = ({ intl }) => {
       }));
     };
     reader.readAsDataURL(file);
-  };
-  const onPaste = (event: ClipboardEvent) => {
+  }, []);
+
+  const onPaste = useCallback((event: ClipboardEvent) => {
     const items = event.clipboardData && event.clipboardData.items;
     let file = null;
     if (items && items.length) {
@@ -99,8 +100,8 @@ const PicSearcher: React.FC<PicSearcherProps> = ({ intl }) => {
     if (file) {
       uploadFile(file);
     }
-  };
-  const toggleModal = () => {
+  }, []);
+  const toggleModal = useCallback(() => {
     setState(prev => ({
       ...prev,
       modalVisible: !prev.modalVisible,
@@ -111,15 +112,15 @@ const PicSearcher: React.FC<PicSearcherProps> = ({ intl }) => {
     if (!localStorage.getItem('disableIconTip')) {
       localStorage.setItem('disableIconTip', 'true');
     }
-  };
+  }, []);
   // eslint-disable-next-line class-methods-use-this
-  const onCopied = (text: string) => {
+  const onCopied = useCallback((text: string) => {
     message.success(
       <span>
         <code className="copied-code">{text}</code> copied 🎉
       </span>,
     );
-  };
+  }, []);
   useEffect(() => {
     const script = document.createElement('script');
     script.onload = async () => {

site/theme/template/IconDisplay/index.tsx

@@ -35,13 +35,19 @@ const IconDisplay: React.FC<IconDisplayProps> = ({ intl }) => {
   });
 
   const newIconNames: string[] = [];
-  const handleSearchIcon = debounce((searchKey: string) => {
-    setDisplayState(prevState => ({ ...prevState, searchKey }));
-  });
-  const handleChangeTheme = (e: RadioChangeEvent) => {
+
+  const handleSearchIcon = React.useCallback(
+    debounce((searchKey: string) => {
+      setDisplayState(prevState => ({ ...prevState, searchKey }));
+    }),
+    [],
+  );
+
+  const handleChangeTheme = React.useCallback((e: RadioChangeEvent) => {
     setDisplayState(prevState => ({ ...prevState, theme: e.target.value as ThemeType }));
-  };
-  const renderCategories = () => {
+  }, []);
+
+  const renderCategories = React.useMemo<React.ReactNode | React.ReactNode[]>(() => {
     const { searchKey = '', theme } = displayState;
 
     const categoriesResult = Object.keys(categories)
@@ -74,9 +80,8 @@ const IconDisplay: React.FC<IconDisplayProps> = ({ intl }) => {
           newIcons={newIconNames}
         />
       ));
-
     return categoriesResult.length === 0 ? <Empty style={{ margin: '2em 0' }} /> : categoriesResult;
-  };
+  }, [displayState.searchKey, displayState.theme]);
   return (
     <>
       <div style={{ display: 'flex', justifyContent: 'space-between' }}>
@@ -106,7 +111,7 @@ const IconDisplay: React.FC<IconDisplayProps> = ({ intl }) => {
           suffix={<IconPicSearcher />}
         />
       </div>
-      {renderCategories()}
+      {renderCategories}
     </>
   );
 };