chore: auto merge branches (#41731)

feature merge master

components/affix/index.tsx

@@ -21,14 +21,14 @@ function getDefaultTarget() {
 
 // Affix
 export interface AffixProps {
-  /** 距离窗口顶部达到指定偏移量后触发 */
+  /** Triggered when the specified offset is reached from the top of the window */
   offsetTop?: number;
-  /** 距离窗口底部达到指定偏移量后触发 */
+  /** Triggered when the specified offset is reached from the bottom of the window */
   offsetBottom?: number;
   style?: React.CSSProperties;
-  /** 固定状态改变时触发的回调函数 */
+  /** Callback function triggered when fixed state changes */
   onChange?: (affixed?: boolean) => void;
-  /** 设置 Affix 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 */
+  /** Set the element that Affix needs to listen to its scroll event, the value is a function that returns the corresponding DOM element */
   target?: () => Window | HTMLElement | null;
   prefixCls?: string;
   className?: string;

components/alert/index.tsx

@@ -132,7 +132,7 @@ const Alert: CompoundedComponent = ({
     if (type !== undefined) {
       return type;
     }
-    // banner 模式默认为警告
+    // banner mode defaults to 'warning'
     return banner ? 'warning' : 'info';
   };
 
@@ -140,7 +140,7 @@ const Alert: CompoundedComponent = ({
   const isClosable = closeText ? true : closable;
   const type = getType();
 
-  // banner 模式默认有 Icon
+  // banner mode defaults to Icon
   const isShowIcon = banner && showIcon === undefined ? true : showIcon;
 
   const alertCls = classNames(

components/avatar/__tests__/Avatar.test.tsx

@@ -53,7 +53,7 @@ describe('Avatar Render', () => {
 
   it('should handle onError correctly', () => {
     const LOAD_FAILURE_SRC = 'http://error.url/';
-    const LOAD_SUCCESS_SRC = 'https://joesch.moe/api/v1/random';
+    const LOAD_SUCCESS_SRC = 'https://xsgames.co/randomusers/avatar.php?g=pixel';
     const Foo: React.FC = () => {
       const [avatarSrc, setAvatarSrc] = useState<typeof LOAD_FAILURE_SRC | typeof LOAD_SUCCESS_SRC>(
         LOAD_FAILURE_SRC,
@@ -75,7 +75,7 @@ describe('Avatar Render', () => {
 
   it('should show image on success after a failure state', () => {
     const LOAD_FAILURE_SRC = 'http://error.url';
-    const LOAD_SUCCESS_SRC = 'https://joesch.moe/api/v1/random';
+    const LOAD_SUCCESS_SRC = 'https://xsgames.co/randomusers/avatar.php?g=pixel';
 
     const div = global.document.createElement('div');
     global.document.body.appendChild(div);
@@ -172,7 +172,7 @@ describe('Avatar Render', () => {
   });
 
   it('should exist crossorigin attribute', () => {
-    const LOAD_SUCCESS_SRC = 'https://joesch.moe/api/v1/random';
+    const LOAD_SUCCESS_SRC = 'https://xsgames.co/randomusers/avatar.php?g=pixel';
     const crossOrigin = 'anonymous';
     const { container } = render(
       <Avatar src={LOAD_SUCCESS_SRC} crossOrigin={crossOrigin}>
@@ -184,7 +184,7 @@ describe('Avatar Render', () => {
   });
 
   it('should not exist crossorigin attribute', () => {
-    const LOAD_SUCCESS_SRC = 'https://joesch.moe/api/v1/random';
+    const LOAD_SUCCESS_SRC = 'https://xsgames.co/randomusers/avatar.php?g=pixel';
     const { container } = render(<Avatar src={LOAD_SUCCESS_SRC}>crossorigin</Avatar>);
     expect(container.querySelector('img')?.crossOrigin).toBeFalsy();
     expect(container.querySelector('img')?.crossOrigin).toEqual('');

components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap

@@ -140,7 +140,7 @@ exports[`Avatar Render should handle onError correctly 1`] = `
   class="ant-avatar ant-avatar-circle ant-avatar-image"
 >
   <img
-    src="https://joesch.moe/api/v1/random"
+    src="https://xsgames.co/randomusers/avatar.php?g=pixel"
   />
 </span>
 `;
@@ -163,7 +163,7 @@ exports[`Avatar Render should show image on success after a failure state 2`] =
   class="ant-avatar ant-avatar-circle ant-avatar-image"
 >
   <img
-    src="https://joesch.moe/api/v1/random"
+    src="https://xsgames.co/randomusers/avatar.php?g=pixel"
   />
 </span>
 `;

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

@@ -415,7 +415,7 @@ Array [
       class="ant-avatar ant-avatar-circle ant-avatar-image"
     >
       <img
-        src="https://joesch.moe/api/v1/random?key=1"
+        src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=1"
       />
     </span>
     <a
@@ -512,7 +512,7 @@ Array [
       class="ant-avatar ant-avatar-circle ant-avatar-image"
     >
       <img
-        src="https://joesch.moe/api/v1/random?key=2"
+        src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=2"
       />
     </span>
     <span
@@ -638,7 +638,7 @@ Array [
       class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-image"
     >
       <img
-        src="https://joesch.moe/api/v1/random?key=3"
+        src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=3"
       />
     </span>
     <span

components/avatar/__tests__/__snapshots__/demo.test.tsx.snap

@@ -415,7 +415,7 @@ Array [
       class="ant-avatar ant-avatar-circle ant-avatar-image"
     >
       <img
-        src="https://joesch.moe/api/v1/random?key=1"
+        src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=1"
       />
     </span>
     <a
@@ -493,7 +493,7 @@ Array [
       class="ant-avatar ant-avatar-circle ant-avatar-image"
     >
       <img
-        src="https://joesch.moe/api/v1/random?key=2"
+        src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=2"
       />
     </span>
     <span
@@ -530,7 +530,7 @@ Array [
       class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-image"
     >
       <img
-        src="https://joesch.moe/api/v1/random?key=3"
+        src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=3"
       />
     </span>
     <span

components/avatar/avatar.tsx

@@ -36,7 +36,7 @@ export interface AvatarProps {
   crossOrigin?: '' | 'anonymous' | 'use-credentials';
   onClick?: (e?: React.MouseEvent<HTMLElement>) => void;
   /* callback when img load error */
-  /* return false to prevent Avatar show default fallback behavior, then you can do fallback by your self */
+  /* return false to prevent Avatar show default fallback behavior, then you can do fallback by yourself */
   onError?: () => boolean;
 }
 

components/avatar/demo/group.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 const App: React.FC = () => (
   <>
     <Avatar.Group>
-      <Avatar src="https://joesch.moe/api/v1/random?key=1" />
+      <Avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=1" />
       <a href="https://ant.design">
         <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
       </a>
@@ -16,7 +16,7 @@ const App: React.FC = () => (
     </Avatar.Group>
     <Divider />
     <Avatar.Group maxCount={2} maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>
-      <Avatar src="https://joesch.moe/api/v1/random?key=2" />
+      <Avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=2" />
       <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
       <Tooltip title="Ant User" placement="top">
         <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
@@ -29,7 +29,7 @@ const App: React.FC = () => (
       size="large"
       maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
     >
-      <Avatar src="https://joesch.moe/api/v1/random?key=3" />
+      <Avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=3" />
       <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
       <Tooltip title="Ant User" placement="top">
         <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />

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

@@ -601,7 +601,7 @@ exports[`renders components/card/demo/meta.tsx extend context correctly 1`] = `
           class="ant-avatar ant-avatar-circle ant-avatar-image"
         >
           <img
-            src="https://joesch.moe/api/v1/random"
+            src="https://xsgames.co/randomusers/avatar.php?g=pixel"
           />
         </span>
       </div>

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

@@ -601,7 +601,7 @@ exports[`renders components/card/demo/meta.tsx correctly 1`] = `
           class="ant-avatar ant-avatar-circle ant-avatar-image"
         >
           <img
-            src="https://joesch.moe/api/v1/random"
+            src="https://xsgames.co/randomusers/avatar.php?g=pixel"
           />
         </span>
       </div>

components/card/demo/loading.tsx

@@ -16,7 +16,7 @@ const App: React.FC = () => {
       <Switch checked={!loading} onChange={onChange} />
       <Card style={{ width: 300, marginTop: 16 }} loading={loading}>
         <Meta
-          avatar={<Avatar src="https://joesch.moe/api/v1/random?key=1" />}
+          avatar={<Avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=1" />}
           title="Card title"
           description="This is the description"
         />
@@ -31,7 +31,7 @@ const App: React.FC = () => {
       >
         <Skeleton loading={loading} avatar active>
           <Meta
-            avatar={<Avatar src="https://joesch.moe/api/v1/random?key=2" />}
+            avatar={<Avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=2" />}
             title="Card title"
             description="This is the description"
           />

components/card/demo/meta.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { EditOutlined,EllipsisOutlined,SettingOutlined } from '@ant-design/icons';
+import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
-import { Avatar,Card } from 'antd';
+import { Avatar, Card } from 'antd';
 
 const { Meta } = Card;
 
@@ -20,7 +20,7 @@ const App: React.FC = () => (
     ]}
   >
     <Meta
-      avatar={<Avatar src="https://joesch.moe/api/v1/random" />}
+      avatar={<Avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel" />}
       title="Card title"
       description="This is the description"
     />

components/config-provider/__tests__/__snapshots__/components.test.tsx.snap

@@ -14855,7 +14855,7 @@ exports[`ConfigProvider components List configProvider 1`] = `
                 class="config-avatar config-avatar-circle config-avatar-image"
               >
                 <img
-                  src="https://joesch.moe/api/v1/random"
+                  src="https://xsgames.co/randomusers/avatar.php?g=pixel"
                 />
               </span>
             </div>
@@ -14907,7 +14907,7 @@ exports[`ConfigProvider components List configProvider componentDisabled 1`] = `
                 class="config-avatar config-avatar-circle config-avatar-image"
               >
                 <img
-                  src="https://joesch.moe/api/v1/random"
+                  src="https://xsgames.co/randomusers/avatar.php?g=pixel"
                 />
               </span>
             </div>
@@ -14959,7 +14959,7 @@ exports[`ConfigProvider components List configProvider componentSize large 1`] =
                 class="config-avatar config-avatar-circle config-avatar-image"
               >
                 <img
-                  src="https://joesch.moe/api/v1/random"
+                  src="https://xsgames.co/randomusers/avatar.php?g=pixel"
                 />
               </span>
             </div>
@@ -15011,7 +15011,7 @@ exports[`ConfigProvider components List configProvider componentSize middle 1`]
                 class="config-avatar config-avatar-circle config-avatar-image"
               >
                 <img
-                  src="https://joesch.moe/api/v1/random"
+                  src="https://xsgames.co/randomusers/avatar.php?g=pixel"
                 />
               </span>
             </div>
@@ -15063,7 +15063,7 @@ exports[`ConfigProvider components List normal 1`] = `
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joesch.moe/api/v1/random"
+                  src="https://xsgames.co/randomusers/avatar.php?g=pixel"
                 />
               </span>
             </div>
@@ -15115,7 +15115,7 @@ exports[`ConfigProvider components List prefixCls 1`] = `
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joesch.moe/api/v1/random"
+                  src="https://xsgames.co/randomusers/avatar.php?g=pixel"
                 />
               </span>
             </div>

components/config-provider/__tests__/components.test.tsx

@@ -342,7 +342,7 @@ describe('ConfigProvider', () => {
           <List.Item {...props}>
             <List.Item.Meta
               {...props}
-              avatar={<Avatar src="https://joesch.moe/api/v1/random" />}
+              avatar={<Avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel" />}
               title="Ant Design"
               description="Ant Design, a design language for background applications, is refined by Ant UED Team"
             />

components/empty/style/index.ts

@@ -34,6 +34,7 @@ const genSharedEmptyStyle: GenerateStyle<EmptyToken> = (token): CSSObject => {
         },
 
         svg: {
+          maxWidth: '100%',
           height: '100%',
           margin: 'auto',
         },

components/form/FormItem/ItemHolder.tsx

@@ -186,8 +186,8 @@ export default function ItemHolder(props: ItemHolderProps) {
         {/* Label */}
         <FormItemLabel
           htmlFor={fieldId}
-          requiredMark={requiredMark}
           {...props}
+          requiredMark={requiredMark}
           required={required ?? isRequired}
           prefixCls={prefixCls}
         />

components/form/FormItem/index.tsx

@@ -51,7 +51,7 @@ const MemoInput = React.memo(
 );
 
 export interface FormItemProps<Values = any>
-  extends FormItemLabelProps,
+  extends Omit<FormItemLabelProps, 'requiredMark'>,
     FormItemInputProps,
     RcFieldProps<Values> {
   prefixCls?: string;
@@ -106,6 +106,7 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
     trigger = 'onChange',
     validateTrigger,
     hidden,
+    help,
   } = props;
   const { getPrefixCls } = React.useContext(ConfigContext);
   const { name: formName } = React.useContext(FormContext);
@@ -145,7 +146,7 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
     setMeta(nextMeta.destroy ? genEmptyMeta() : nextMeta, true);
 
     // Bump to parent since noStyle
-    if (noStyle && notifyParentMetaChange) {
+    if (noStyle && help !== false && notifyParentMetaChange) {
       let namePath = nextMeta.name;
 
       if (!nextMeta.destroy) {
@@ -322,9 +323,9 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
             childProps.id = fieldId;
           }
 
-          if (props.help || mergedErrors.length > 0 || mergedWarnings.length > 0 || props.extra) {
+          if (help || mergedErrors.length > 0 || mergedWarnings.length > 0 || props.extra) {
             const describedbyArr = [];
-            if (props.help || mergedErrors.length > 0) {
+            if (help || mergedErrors.length > 0) {
               describedbyArr.push(`${fieldId}_help`);
             }
             if (props.extra) {

components/form/FormItemLabel.tsx

@@ -38,6 +38,9 @@ export interface FormItemLabelProps {
   label?: React.ReactNode;
   labelAlign?: FormLabelAlign;
   labelCol?: ColProps;
+  /**
+   * @internal Used for pass `requiredMark` from `<Form />`
+   */
   requiredMark?: RequiredMark;
   tooltip?: LabelTooltipType;
 }

components/form/__tests__/index.test.tsx

@@ -171,6 +171,43 @@ describe('Form', () => {
       await waitFakeTimer(2000, 2000);
       expect(container.querySelector('.ant-form-item-explain-error')).toHaveTextContent('aaa');
     });
+
+    // https://github.com/ant-design/ant-design/issues/41620
+    it('should not throw error when `help=false` and `noStyle=true`', async () => {
+      const App = (props: { help?: boolean | React.ReactNode }) => {
+        const { help = false } = props || {};
+        return (
+          <Form>
+            <Form.Item name="list" label="List" rules={[{ required: true }]}>
+              <Form.Item name={['list', 0]} noStyle help={help} rules={[{ required: true }]}>
+                <Input />
+              </Form.Item>
+              <Form.Item name={['list', 1]} noStyle help={help} rules={[{ required: true }]}>
+                <Input />
+              </Form.Item>
+            </Form.Item>
+            <Form.Item>
+              <button type="submit">submit</button>
+            </Form.Item>
+          </Form>
+        );
+      };
+
+      const { container, getByRole, rerender } = render(<App />);
+
+      // click submit to trigger validate
+      fireEvent.click(getByRole('button'));
+
+      await waitFakeTimer();
+      expect(container.querySelectorAll('.ant-form-item-explain-error')).toHaveLength(1);
+
+      // When noStyle=true but help is not false, help will be displayed
+      rerender(<App help="help" />);
+      await waitFakeTimer();
+      fireEvent.click(getByRole('button'));
+      await waitFakeTimer();
+      expect(container.querySelectorAll('.ant-form-item-explain-error')).toHaveLength(3);
+    });
   });
 
   it('render functions require either `shouldUpdate` or `dependencies`', () => {
@@ -1797,4 +1834,29 @@ describe('Form', () => {
     expect(onChange).toHaveBeenNthCalledWith(idx++, 'validating');
     expect(onChange).toHaveBeenNthCalledWith(idx++, 'success');
   });
+
+  // https://user-images.githubusercontent.com/32004925/230819163-464fe90d-422d-4a6d-9e35-44a25d4c64f1.png
+  it('should not render `requiredMark` when Form.Item has no required prop', () => {
+    // Escaping TypeScript error
+    const genProps = (value: any) => ({ ...value });
+
+    const { container } = render(
+      <Form name="basic" requiredMark="optional">
+        <Form.Item
+          label="First Name"
+          name="firstName"
+          required
+          {...genProps({ requiredMark: false })}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item label="Last Name" name="lastName" required {...genProps({ requiredMark: true })}>
+          <Input />
+        </Form.Item>
+      </Form>,
+    );
+
+    expect(container.querySelectorAll('.ant-form-item-required')).toHaveLength(2);
+    expect(container.querySelectorAll('.ant-form-item-required-mark-optional')).toHaveLength(2);
+  });
 });

components/list/__tests__/Item.test.tsx

@@ -9,7 +9,7 @@ describe('List Item Layout', () => {
       key: 1,
       href: 'https://ant.design',
       title: 'ant design',
-      avatar: 'https://joesch.moe/api/v1/random',
+      avatar: 'https://xsgames.co/randomusers/avatar.php?g=pixel',
       description:
         'Ant Design, a design language for background applications, is refined by Ant UED Team.',
       content:
@@ -230,4 +230,20 @@ describe('List Item Layout', () => {
     rerender(getDom(5));
     expect(loadId).toEqual([1, 3, 5]);
   });
+
+  it('List.Item.Meta title should have no default margin', () => {
+    const { container } = render(
+      <List
+        dataSource={[{ id: 1, title: `ant design` }]}
+        renderItem={(item) => (
+          <List.Item>
+            <List.Item.Meta title={item.title} />
+          </List.Item>
+        )}
+      />,
+    );
+
+    const title = container.querySelector('.ant-list-item-meta-title');
+    expect(title && getComputedStyle(title).margin).toEqual('0px 0px 4px 0px');
+  });
 });

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

@@ -26,7 +26,7 @@ exports[`renders components/list/demo/basic.tsx extend context correctly 1`] = `
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joesch.moe/api/v1/random?key=0"
+                  src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=0"
                 />
               </span>
             </div>
@@ -63,7 +63,7 @@ exports[`renders components/list/demo/basic.tsx extend context correctly 1`] = `
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joesch.moe/api/v1/random?key=1"
+                  src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=1"
                 />
               </span>
             </div>
@@ -100,7 +100,7 @@ exports[`renders components/list/demo/basic.tsx extend context correctly 1`] = `
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joesch.moe/api/v1/random?key=2"
+                  src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=2"
                 />
               </span>
             </div>
@@ -137,7 +137,7 @@ exports[`renders components/list/demo/basic.tsx extend context correctly 1`] = `
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joesch.moe/api/v1/random?key=3"
+                  src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=3"
                 />
               </span>
             </div>
@@ -1360,7 +1360,7 @@ Array [
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random?key=0"
+                    src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=0"
                   />
                 </span>
               </div>
@@ -1397,7 +1397,7 @@ Array [
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random?key=1"
+                    src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=1"
                   />
                 </span>
               </div>
@@ -1434,7 +1434,7 @@ Array [
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random?key=2"
+                    src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=2"
                   />
                 </span>
               </div>
@@ -1471,7 +1471,7 @@ Array [
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random?key=3"
+                    src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=3"
                   />
                 </span>
               </div>
@@ -2079,7 +2079,7 @@ exports[`renders components/list/demo/vertical.tsx extend context correctly 1`]
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random?key=0"
+                    src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=0"
                   />
                 </span>
               </div>
@@ -2245,7 +2245,7 @@ exports[`renders components/list/demo/vertical.tsx extend context correctly 1`]
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random?key=1"
+                    src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=1"
                   />
                 </span>
               </div>
@@ -2411,7 +2411,7 @@ exports[`renders components/list/demo/vertical.tsx extend context correctly 1`]
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random?key=2"
+                    src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=2"
                   />
                 </span>
               </div>

components/list/__tests__/__snapshots__/demo.test.ts.snap

@@ -26,7 +26,7 @@ exports[`renders components/list/demo/basic.tsx correctly 1`] = `
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joesch.moe/api/v1/random?key=0"
+                  src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=0"
                 />
               </span>
             </div>
@@ -63,7 +63,7 @@ exports[`renders components/list/demo/basic.tsx correctly 1`] = `
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joesch.moe/api/v1/random?key=1"
+                  src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=1"
                 />
               </span>
             </div>
@@ -100,7 +100,7 @@ exports[`renders components/list/demo/basic.tsx correctly 1`] = `
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joesch.moe/api/v1/random?key=2"
+                  src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=2"
                 />
               </span>
             </div>
@@ -137,7 +137,7 @@ exports[`renders components/list/demo/basic.tsx correctly 1`] = `
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joesch.moe/api/v1/random?key=3"
+                  src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=3"
                 />
               </span>
             </div>
@@ -1360,7 +1360,7 @@ Array [
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random?key=0"
+                    src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=0"
                   />
                 </span>
               </div>
@@ -1397,7 +1397,7 @@ Array [
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random?key=1"
+                    src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=1"
                   />
                 </span>
               </div>
@@ -1434,7 +1434,7 @@ Array [
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random?key=2"
+                    src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=2"
                   />
                 </span>
               </div>
@@ -1471,7 +1471,7 @@ Array [
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random?key=3"
+                    src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=3"
                   />
                 </span>
               </div>
@@ -2072,7 +2072,7 @@ exports[`renders components/list/demo/vertical.tsx correctly 1`] = `
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random?key=0"
+                    src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=0"
                   />
                 </span>
               </div>
@@ -2238,7 +2238,7 @@ exports[`renders components/list/demo/vertical.tsx correctly 1`] = `
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random?key=1"
+                    src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=1"
                   />
                 </span>
               </div>
@@ -2404,7 +2404,7 @@ exports[`renders components/list/demo/vertical.tsx correctly 1`] = `
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random?key=2"
+                    src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=2"
                   />
                 </span>
               </div>

components/list/demo/basic.tsx

@@ -23,7 +23,7 @@ const App: React.FC = () => (
     renderItem={(item, index) => (
       <List.Item>
         <List.Item.Meta
-          avatar={<Avatar src={`https://joesch.moe/api/v1/random?key=${index}`} />}
+          avatar={<Avatar src={`https://xsgames.co/randomusers/avatar.php?g=pixel&key=${index}`} />}
           title={<a href="https://ant.design">{item.title}</a>}
           description="Ant Design, a design language for background applications, is refined by Ant UED Team"
         />

components/list/demo/pagination.tsx

@@ -70,7 +70,9 @@ const App: React.FC = () => {
         renderItem={(item, index) => (
           <List.Item>
             <List.Item.Meta
-              avatar={<Avatar src={`https://joesch.moe/api/v1/random?key=${index}`} />}
+              avatar={
+                <Avatar src={`https://xsgames.co/randomusers/avatar.php?g=pixel&key=${index}`} />
+              }
               title={<a href="https://ant.design">{item.title}</a>}
               description="Ant Design, a design language for background applications, is refined by Ant UED Team"
             />

components/list/demo/vertical.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 const data = Array.from({ length: 23 }).map((_, i) => ({
   href: 'https://ant.design',
   title: `ant design part ${i}`,
-  avatar: `https://joesch.moe/api/v1/random?key=${i}`,
+  avatar: `https://xsgames.co/randomusers/avatar.php?g=pixel&key=${i}`,
   description:
     'Ant Design, a design language for background applications, is refined by Ant UED Team.',
   content:

components/list/style/index.ts

@@ -187,7 +187,7 @@ const genBaseStyle: GenerateStyle<ListToken> = (token) => {
           },
 
           [`${componentCls}-item-meta-title`]: {
-            marginBottom: token.marginXXS,
+            margin: `0 0 ${token.marginXXS}px 0`,
             color: colorText,
             fontSize: token.fontSize,
             lineHeight: token.lineHeight,

components/locale/th_TH.ts

@@ -21,9 +21,12 @@ const localeValues: Locale = {
     filterConfirm: 'ยืนยัน',
     filterReset: 'รีเซ็ต',
     filterEmptyText: 'ไม่มีตัวกรอง',
+    filterCheckall: 'เลือกรายการทั้งหมด',
+    filterSearchPlaceholder: 'ค้นหาตัวกรอง',
     emptyText: 'ไม่มีข้อมูล',
     selectAll: 'เลือกทั้งหมดในหน้านี้',
     selectInvert: 'กลับสถานะการเลือกในหน้านี้',
+    selectNone: 'ไม่เลือกข้อมูลทั้งหมด',
     selectionAll: 'เลือกข้อมูลทั้งหมด',
     sortTitle: 'เรียง',
     expand: 'แสดงแถวข้อมูล',
@@ -32,6 +35,11 @@ const localeValues: Locale = {
     triggerAsc: 'คลิกเรียงจากน้อยไปมาก',
     cancelSort: 'คลิกเพื่อยกเลิกการเรียง',
   },
+  Tour: {
+    Next: 'ถัดไป',
+    Previous: 'ย้อนกลับ',
+    Finish: 'เสร็จสิ้น',
+  },
   Modal: {
     okText: 'ตกลง',
     cancelText: 'ยกเลิก',
@@ -125,6 +133,13 @@ const localeValues: Locale = {
       },
     },
   },
+  Image: {
+    preview: 'ดูตัวอย่าง',
+  },
+  QRCode: {
+    expired: 'คิวอาร์โค้ดหมดอายุ',
+    refresh: 'รีเฟรช',
+  },
 };
 
 export default localeValues;

components/pagination/style/index.tsx

@@ -98,13 +98,14 @@ const genPaginationDisabledStyle: GenerateStyle<PaginationToken, CSSObject> = (t
       [`${componentCls}-item-link`]: {
         color: token.colorTextDisabled,
         cursor: 'not-allowed',
-
         '&:hover, &:active': {
           backgroundColor: 'transparent',
         },
-
         [`${componentCls}-simple&`]: {
           backgroundColor: 'transparent',
+          '&:hover, &:active': {
+            backgroundColor: 'transparent',
+          },
         },
       },
 
@@ -120,6 +121,15 @@ const genPaginationDisabledStyle: GenerateStyle<PaginationToken, CSSObject> = (t
         color: token.colorTextDisabled,
       },
     },
+    [`&${componentCls}-simple`]: {
+      [`${componentCls}-prev, ${componentCls}-next`]: {
+        [`&${componentCls}-disabled ${componentCls}-item-link`]: {
+          '&:hover, &:active': {
+            backgroundColor: 'transparent',
+          },
+        },
+      },
+    },
   };
 };
 
@@ -224,7 +234,12 @@ const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = (tok
         height: token.paginationItemSizeSM,
         backgroundColor: 'transparent',
         border: 0,
-
+        '&:hover': {
+          backgroundColor: token.colorBgTextHover,
+        },
+        '&:active': {
+          backgroundColor: token.colorBgTextActive,
+        },
         '&::after': {
           height: token.paginationItemSizeSM,
           lineHeight: `${token.paginationItemSizeSM}px`,

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

@@ -6,4 +6,83 @@ exports[`Popconfirm should show overlay when trigger is clicked 1`] = `"<div cla
 
 exports[`Popconfirm should show overlay when trigger is clicked 2`] = `"<div class="ant-popover-arrow" style="position: absolute; bottom: 0px; left: 0px;"></div><div class="ant-popover-content"><div class="ant-popover-inner" role="tooltip"><div class="ant-popover-inner-content"><div class="ant-popconfirm-inner-content"><div class="ant-popconfirm-message"><span class="ant-popconfirm-message-icon"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span></span><div class="ant-popconfirm-message-title">code</div></div><div class="ant-popconfirm-buttons"><button type="button" class="ant-btn ant-btn-default ant-btn-sm"><span>Cancel</span></button><button type="button" class="ant-btn ant-btn-primary ant-btn-sm"><span>OK</span></button></div></div></div></div></div>"`;
 
-exports[`Popconfirm shows content for render functions 1`] = `"<div class="ant-popover-arrow" style="position: absolute; bottom: 0px; left: 0px;"></div><div class="ant-popover-content"><div class="ant-popover-inner" role="tooltip"><div class="ant-popover-inner-content"><div class="ant-popconfirm-inner-content"><div class="ant-popconfirm-message"><span class="ant-popconfirm-message-icon"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span></span><div class="ant-popconfirm-message-title">some-title</div></div><div class="ant-popconfirm-buttons"><button type="button" class="ant-btn ant-btn-default ant-btn-sm"><span>Cancel</span></button><button type="button" class="ant-btn ant-btn-primary ant-btn-sm"><span>OK</span></button></div></div></div></div></div>"`;
+exports[`Popconfirm shows content for render functions 1`] = `
+<div
+  class="ant-popover ant-popconfirm ant-popover-placement-bottom"
+  style="left: 0px; top: 12px; box-sizing: border-box; transform-origin: 50% 12px;"
+>
+  <div
+    class="ant-popover-arrow"
+    style="position: absolute; left: 0px; top: 0px;"
+  />
+  <div
+    class="ant-popover-content"
+  >
+    <div
+      class="ant-popover-inner"
+      role="tooltip"
+    >
+      <div
+        class="ant-popover-inner-content"
+      >
+        <div
+          class="ant-popconfirm-inner-content"
+        >
+          <div
+            class="ant-popconfirm-message"
+          >
+            <span
+              class="ant-popconfirm-message-icon"
+            >
+              <span
+                aria-label="exclamation-circle"
+                class="anticon anticon-exclamation-circle"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="exclamation-circle"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                  />
+                </svg>
+              </span>
+            </span>
+            <div
+              class="ant-popconfirm-message-title"
+            >
+              some-title
+            </div>
+          </div>
+          <div
+            class="ant-popconfirm-buttons"
+          >
+            <button
+              class="ant-btn ant-btn-default ant-btn-sm"
+              type="button"
+            >
+              <span>
+                Cancel
+              </span>
+            </button>
+            <button
+              class="ant-btn ant-btn-primary ant-btn-sm"
+              type="button"
+            >
+              <span>
+                OK
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

components/popconfirm/__tests__/index.test.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import Popconfirm from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { render, fireEvent, act, waitFakeTimer } from '../../../tests/utils';
+import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils';
 import Button from '../../button';
 
 describe('Popconfirm', () => {
@@ -94,7 +94,7 @@ describe('Popconfirm', () => {
 
     expect(popconfirm.container.querySelector('.ant-popover')).not.toBe(null);
     expect(popconfirm.container.querySelector('.ant-popover')?.innerHTML).toContain('some-title');
-    expect(popconfirm.container.querySelector('.ant-popover')?.innerHTML).toMatchSnapshot();
+    expect(popconfirm.container.querySelector('.ant-popover')).toMatchSnapshot();
   });
 
   it('should be controlled by open', () => {

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

@@ -330,7 +330,7 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joesch.moe/api/v1/random"
+                  src="https://xsgames.co/randomusers/avatar.php?g=pixel"
                 />
               </span>
               <div>

components/segmented/__tests__/__snapshots__/demo.test.ts.snap

@@ -330,7 +330,7 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = `
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joesch.moe/api/v1/random"
+                  src="https://xsgames.co/randomusers/avatar.php?g=pixel"
                 />
               </span>
               <div>

components/segmented/demo/custom.tsx

@@ -9,7 +9,7 @@ const App: React.FC = () => (
         {
           label: (
             <div style={{ padding: 4 }}>
-              <Avatar src="https://joesch.moe/api/v1/random" />
+              <Avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel" />
               <div>User 1</div>
             </div>
           ),

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

@@ -7771,7 +7771,6 @@ exports[`renders components/select/demo/responsive.tsx extend context correctly
 exports[`renders components/select/demo/search.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-select-single ant-select-show-arrow ant-select-show-search"
-  style="width: 160px;"
 >
   <div
     class="ant-select-selector"

components/select/__tests__/__snapshots__/demo.test.tsx.snap

@@ -2351,7 +2351,6 @@ exports[`renders components/select/demo/responsive.tsx correctly 1`] = `
 exports[`renders components/select/demo/search.tsx correctly 1`] = `
 <div
   class="ant-select ant-select-single ant-select-show-arrow ant-select-show-search"
-  style="width:160px"
 >
   <div
     class="ant-select-selector"

components/select/demo/search.tsx

@@ -12,7 +12,6 @@ const onSearch = (value: string) => {
 const App: React.FC = () => (
   <Select
     showSearch
-    style={{ width: 160 }}
     placeholder="Select a person"
     optionFilterProp="children"
     onChange={onChange}

components/select/style/dropdown.tsx

@@ -84,16 +84,6 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token) => {
           display: 'none',
         },
 
-        '&-empty': {
-          color: token.colorTextDisabled,
-        },
-
-        // ========================= Options =========================
-        [`${selectItemCls}-empty`]: {
-          ...genItemStyle(token),
-          color: token.colorTextDisabled,
-        },
-
         [`${selectItemCls}`]: {
           ...genItemStyle(token),
           cursor: 'pointer',

components/select/style/single.tsx

@@ -41,7 +41,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
         `]: {
           padding: 0,
           lineHeight: `${selectHeightWithoutBorder}px`,
-          transition: `all ${token.motionDurationSlow}`,
+          transition: `all ${token.motionDurationSlow}, visibility 0s`,
 
           // Firefox inline-block position calculation is not same as Chrome & Safari. Patch this:
           '@supports (-moz-appearance: meterbar)': {

components/skeleton/demo/list.tsx

@@ -11,7 +11,7 @@ interface IconTextProps {
 const listData = Array.from({ length: 3 }).map((_, i) => ({
   href: 'https://ant.design',
   title: `ant design part ${i + 1}`,
-  avatar: `https://joesch.moe/api/v1/random?key=${i}`,
+  avatar: `https://xsgames.co/randomusers/avatar.php?g=pixel&key=${i}`,
   description:
     'Ant Design, a design language for background applications, is refined by Ant UED Team.',
   content:

components/space/style/index.tsx

@@ -38,17 +38,21 @@ const genSpaceStyle: GenerateStyle<SpaceToken> = (token) => {
           alignItems: 'baseline',
         },
       },
-      [`${componentCls}-item`]: {
+      [`${componentCls}-item:empty`]: {
-        '&:empty': {
+        display: 'none',
-          display: 'none',
-        },
       },
     },
   };
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook('Space', (token) => [
+export default genComponentStyleHook(
-  genSpaceStyle(token),
+  'Space',
-  genSpaceCompactStyle(token),
+  (token) => [genSpaceStyle(token), genSpaceCompactStyle(token)],
-]);
+  () => ({}),
+  {
+    // Space component don't apply extra font style
+    // https://github.com/ant-design/ant-design/issues/40315
+    resetStyle: false,
+  },
+);

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

@@ -851,7 +851,7 @@ exports[`renders components/steps/demo/inline.tsx extend context correctly 1`] =
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random?key=0"
+                    src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=0"
                   />
                 </span>
               </div>
@@ -1058,7 +1058,7 @@ exports[`renders components/steps/demo/inline.tsx extend context correctly 1`] =
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random?key=1"
+                    src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=1"
                   />
                 </span>
               </div>
@@ -1265,7 +1265,7 @@ exports[`renders components/steps/demo/inline.tsx extend context correctly 1`] =
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random?key=2"
+                    src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=2"
                   />
                 </span>
               </div>
@@ -1472,7 +1472,7 @@ exports[`renders components/steps/demo/inline.tsx extend context correctly 1`] =
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random?key=3"
+                    src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=3"
                   />
                 </span>
               </div>

components/steps/__tests__/__snapshots__/demo.test.ts.snap

@@ -751,7 +751,7 @@ exports[`renders components/steps/demo/inline.tsx correctly 1`] = `
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random?key=0"
+                    src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=0"
                   />
                 </span>
               </div>
@@ -901,7 +901,7 @@ exports[`renders components/steps/demo/inline.tsx correctly 1`] = `
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random?key=1"
+                    src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=1"
                   />
                 </span>
               </div>
@@ -1051,7 +1051,7 @@ exports[`renders components/steps/demo/inline.tsx correctly 1`] = `
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random?key=2"
+                    src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=2"
                   />
                 </span>
               </div>
@@ -1201,7 +1201,7 @@ exports[`renders components/steps/demo/inline.tsx correctly 1`] = `
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random?key=3"
+                    src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=3"
                   />
                 </span>
               </div>

components/steps/demo/inline.tsx

@@ -45,7 +45,9 @@ const App: React.FC = () => (
       renderItem={(item, index) => (
         <List.Item>
           <List.Item.Meta
-            avatar={<Avatar src={`https://joesch.moe/api/v1/random?key=${index}`} />}
+            avatar={
+              <Avatar src={`https://xsgames.co/randomusers/avatar.php?g=pixel&key=${index}`} />
+            }
             title={<a href="https://ant.design">{item.title}</a>}
             description="Ant Design, a design language for background applications, is refined by Ant UED Team"
           />

components/theme/util/genComponentStyleHook.ts

@@ -41,6 +41,9 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
   getDefaultToken?:
     | OverrideTokenWithoutDerivative[ComponentName]
     | ((token: GlobalToken) => OverrideTokenWithoutDerivative[ComponentName]),
+  options?: {
+    resetStyle?: boolean;
+  },
 ) {
   return (prefixCls: string): UseComponentStyleResult => {
     const [theme, token, hashId] = useToken();
@@ -93,7 +96,10 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
           overrideComponentToken: token[component],
         });
         flush(component, mergedComponentToken);
-        return [genCommonStyle(token, prefixCls), styleInterpolation];
+        return [
+          options?.resetStyle === false ? null : genCommonStyle(token, prefixCls),
+          styleInterpolation,
+        ];
       }),
       hashId,
     ];

components/tree/__tests__/index.test.tsx

@@ -185,4 +185,33 @@ describe('Tree', () => {
       expect(nodeDraggable).toHaveBeenCalledWith(dragTreeData[0]);
     });
   });
+
+  describe('hidden switcherIcon', () => {
+    it('use `switcherIcon={() => null}`', () => {
+      const { container } = render(
+        <Tree defaultExpandAll switcherIcon={() => null}>
+          <TreeNode icon="icon">
+            <TreeNode title="node1" icon="icon" key="0-0-2" />
+            <TreeNode title="node2" key="0-0-3" />
+          </TreeNode>
+        </Tree>,
+      );
+      container.querySelectorAll('.ant-tree-switcher').forEach((el) => {
+        expect(el.children.length).toBe(0);
+      });
+    });
+    it('use `switcherIcon={null}`', () => {
+      const { container } = render(
+        <Tree defaultExpandAll switcherIcon={null}>
+          <TreeNode icon="icon">
+            <TreeNode title="node1" icon="icon" key="0-0-2" />
+            <TreeNode title="node2" key="0-0-3" />
+          </TreeNode>
+        </Tree>,
+      );
+      container.querySelectorAll('.ant-tree-switcher').forEach((el) => {
+        expect(el.children.length).toBe(0);
+      });
+    });
+  });
 });

components/tree/utils/iconUtil.tsx

@@ -64,7 +64,7 @@ const SwitcherIconCom: React.FC<SwitcherIconProps> = (props) => {
     });
   }
 
-  if (switcher) {
+  if (switcher !== undefined) {
     return switcher as unknown as React.ReactElement;
   }
 

docs/react/practical-projects.zh-CN.md

@@ -319,7 +319,7 @@ export default function Layout() {
 }
 ```
 
-这里先用 umi 的 `useAppData` 拿到全局客户端路由 `clientRoutes`，这是一份嵌套结构的路由表，我们把 `clientRoutes[0]` 传给 ProLayout；再通过 `useLocation()` 拿到 location 信息，也传给 ProLayout 来决定哪个菜单应该高亮；同时我们希望点击菜单时做路由跳转，需要需要定制 ProLayout 的 menuItemRender 方法。
+这里先用 umi 的 `useAppData` 拿到全局客户端路由 `clientRoutes`，这是一份嵌套结构的路由表，我们把 `clientRoutes[0]` 传给 ProLayout；再通过 `useLocation()` 拿到 location 信息，也传给 ProLayout 来决定哪个菜单应该高亮；同时我们希望点击菜单时做路由跳转，需要定制 ProLayout 的 menuItemRender 方法。
 
 聪明的你可能已经发现 `src/layouts/index.less` 已经没地方引用他了，为了保持项目文件的整洁，可以选择删掉他。
 

package.json

@@ -140,7 +140,7 @@
     "rc-rate": "~2.10.0",
     "rc-resize-observer": "^1.2.0",
     "rc-segmented": "~2.1.2",
-    "rc-select": "~14.4.0",
+    "rc-select": "~14.4.3",
     "rc-slider": "~10.1.0",
     "rc-steps": "~6.0.0",
     "rc-switch": "~4.0.0",

scripts/generate-cssinjs.js

@@ -14,26 +14,26 @@ module.exports = {
     const EmptyElement = React.createElement('div');
 
     styleFiles.forEach((file) => {
+      const pathArr = file.split('/');
+      const styleIndex = pathArr.lastIndexOf('style');
+      const componentName = pathArr[styleIndex - 1];
       let useStyle = () => {};
       if (file.includes('grid')) {
         // eslint-disable-next-line global-require,import/no-dynamic-require
         const { useColStyle, useRowStyle } = require(file);
-        useStyle = () => {
+        useStyle = (prefixCls) => {
-          useRowStyle();
+          useRowStyle(prefixCls);
-          useColStyle();
+          useColStyle(prefixCls);
         };
       } else {
         // eslint-disable-next-line global-require,import/no-dynamic-require
         useStyle = require(file).default;
       }
       const Component = () => {
-        useStyle(key);
+        useStyle(`${key}-${componentName}`);
         return EmptyElement;
       };
 
-      const pathArr = file.split('/');
-      const styleIndex = pathArr.lastIndexOf('style');
-      const componentName = pathArr[styleIndex - 1];
       beforeRender?.(componentName);
       render(Component);
     });