chore: auto merge branches (#41731)

feature merge master
2024-11-25 11:40:04 +08:00 · 2023-04-10 08:25:32 +00:00 · 2023-04-10 08:25:32 +00:00 · 01ca6acd18
commit 01ca6acd18
parent d7bafd4f53 dd60a37f5d
49 changed files with 342 additions and 120 deletions
--- a/components/affix/index.tsx
+++ b/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;
--- a/components/alert/index.tsx
+++ b/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(
--- a/components/avatar/tests/Avatar.test.tsx
+++ b/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('');
--- a/components/avatar/tests/snapshots/Avatar.test.tsx.snap
+++ b/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>
 `;
--- a/components/avatar/tests/snapshots/demo-extend.test.ts.snap
+++ b/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
--- a/components/avatar/tests/snapshots/demo.test.tsx.snap
+++ b/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
--- a/components/avatar/avatar.tsx
+++ b/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;
 }

--- a/components/avatar/demo/group.tsx
+++ b/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 />} />
--- a/components/card/tests/snapshots/demo-extend.test.ts.snap
+++ b/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>
--- a/components/card/tests/snapshots/demo.test.ts.snap
+++ b/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>
--- a/components/card/demo/loading.tsx
+++ b/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"
          />
--- a/components/card/demo/meta.tsx
+++ b/components/card/demo/meta.tsx
@ -1,6 +1,6 @@
 import React from 'react';
-import { EditOutlined,EllipsisOutlined,SettingOutlined } from '@ant-design/icons';
-import { Avatar,Card } from 'antd';
+import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
+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"
    />
--- a/components/config-provider/tests/snapshots/components.test.tsx.snap
+++ b/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>
--- a/components/config-provider/tests/components.test.tsx
+++ b/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"
            />
--- a/components/empty/style/index.ts
+++ b/components/empty/style/index.ts
@ -34,6 +34,7 @@ const genSharedEmptyStyle: GenerateStyle<EmptyToken> = (token): CSSObject => {
        },

        svg: {
+          maxWidth: '100%',
          height: '100%',
          margin: 'auto',
        },
--- a/components/form/FormItem/ItemHolder.tsx
+++ b/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}
        />
--- a/components/form/FormItem/index.tsx
+++ b/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) {
--- a/components/form/FormItemLabel.tsx
+++ b/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;
 }
--- a/components/form/tests/index.test.tsx
+++ b/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);
+  });
 });
--- a/components/list/tests/Item.test.tsx
+++ b/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');
+  });
 });
--- a/components/list/tests/snapshots/demo-extend.test.ts.snap
+++ b/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>
--- a/components/list/tests/snapshots/demo.test.ts.snap
+++ b/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>
--- a/components/list/demo/basic.tsx
+++ b/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"
        />
--- a/components/list/demo/pagination.tsx
+++ b/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"
            />
--- a/components/list/demo/vertical.tsx
+++ b/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:
--- a/components/list/style/index.ts
+++ b/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,
--- a/components/locale/th_TH.ts
+++ b/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;
--- a/components/pagination/style/index.tsx
+++ b/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`,
--- a/components/popconfirm/tests/snapshots/index.test.tsx.snap
+++ b/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>
+`;
--- a/components/popconfirm/tests/index.test.tsx
+++ b/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', () => {
--- a/components/segmented/tests/snapshots/demo-extend.test.ts.snap
+++ b/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>
--- a/components/segmented/tests/snapshots/demo.test.ts.snap
+++ b/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>
--- a/components/segmented/demo/custom.tsx
+++ b/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>
          ),
--- a/components/select/tests/snapshots/demo-extend.test.ts.snap
+++ b/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"
--- a/components/select/tests/snapshots/demo.test.tsx.snap
+++ b/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"
--- a/components/select/demo/search.tsx
+++ b/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}
--- a/components/select/style/dropdown.tsx
+++ b/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',
--- a/components/select/style/single.tsx
+++ b/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)': {
--- a/components/skeleton/demo/list.tsx
+++ b/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:
--- a/components/space/style/index.tsx
+++ b/components/space/style/index.tsx
@ -38,17 +38,21 @@ const genSpaceStyle: GenerateStyle<SpaceToken> = (token) => {
          alignItems: 'baseline',
        },
      },
-      [`${componentCls}-item`]: {
-        '&:empty': {
-          display: 'none',
-        },
+      [`${componentCls}-item:empty`]: {
+        display: 'none',
      },
    },
  };
 };

 // ============================== Export ==============================
-export default genComponentStyleHook('Space', (token) => [
-  genSpaceStyle(token),
-  genSpaceCompactStyle(token),
-]);
+export default genComponentStyleHook(
+  'Space',
+  (token) => [genSpaceStyle(token), genSpaceCompactStyle(token)],
+  () => ({}),
+  {
+    // Space component don't apply extra font style
+    // https://github.com/ant-design/ant-design/issues/40315
+    resetStyle: false,
+  },
+);
--- a/components/steps/tests/snapshots/demo-extend.test.ts.snap
+++ b/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>
--- a/components/steps/tests/snapshots/demo.test.ts.snap
+++ b/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>
--- a/components/steps/demo/inline.tsx
+++ b/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"
          />
--- a/components/theme/util/genComponentStyleHook.ts
+++ b/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,
    ];
--- a/components/tree/tests/index.test.tsx
+++ b/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);
+      });
+    });
+  });
 });
--- a/components/tree/utils/iconUtil.tsx
+++ b/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;
  }

--- a/docs/react/practical-projects.zh-CN.md
+++ b/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` 已经没地方引用他了，为了保持项目文件的整洁，可以选择删掉他。

--- a/package.json
+++ b/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",
--- a/scripts/generate-cssinjs.js
+++ b/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 = () => {
-          useRowStyle();
-          useColStyle();
+        useStyle = (prefixCls) => {
+          useRowStyle(prefixCls);
+          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);
    });