chore: update snapshot

docs: fix 404
docs: 4.24.4 changelog (#38981 )
2026-02-11 03:49:19 +08:00 · 2022-11-25 16:17:42 +08:00 · 2022-11-25 15:50:56 +08:00 · 2022-11-25 14:35:11 +08:00 · 2022-11-24 20:12:20 +08:00 · 2022-11-23 22:30:26 +08:00
49 changed files with 3367 additions and 457 deletions
--- a/.github/workflows/release-helper.yml
+++ b/.github/workflows/release-helper.yml
@@ -25,7 +25,8 @@ jobs:
        with:
          triger: 'tag'
          changelogs: 'CHANGELOG.en-US.md, CHANGELOG.zh-CN.md'
-          branch: 'master'
+          branch: 'master, 4.x-stable'
+          tag: '5*, 4*'
          dingding-token: ${{ secrets.DINGDING_BOT_TOKEN }}
          dingding-msg: 'CHANGELOG.zh-CN.md'
          msg-title: '# Ant Design {{v}} 发布日志'
@@ -34,27 +35,18 @@ jobs:
          prettier: true
          prerelease-filter: '-, a, b, A, B'

-      - name: notice next
-        uses: actions-cool/release-helper@v2
-        with:
-          triger: 'tag'
-          dingding-token: ${{ secrets.DINGDING_BOT_V5_PRE_TOKEN }}
-          msg-title: '# Ant Design {{v}} 发布日志'
-          msg-poster: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zx7LTI_ECSAAAAAAAAAAAABkARQnAQ'
-          msg-footer: '💬 前往 [**Ant Design Releases**]({{url}}) 查看更新日志'
-          prerelease-filter: '-, a, b, A, B'
-          prerelease-notice: true
-
      - name: notice bigfish
        uses: actions-cool/release-helper@v2
        with:
          triger: 'tag'
          changelogs: 'CHANGELOG.en-US.md, CHANGELOG.zh-CN.md'
-          branch: 'master'
+          branch: 'master, 4.x-stable'
+          tag: '5*, 4*'
          dingding-token: ${{ secrets.DINGDING_BOT_BIGFISH_TOKEN }} ${{ secrets.DINGDING_BOT_YUNFENGDIE_TOKEN }}
          dingding-msg: 'CHANGELOG.zh-CN.md'
          dingding-delay-minute: 10
          release: false
+          conch-tag: 'conch-v5, conch'
          antd-conch-msg: '🐟 当前 Bigfish 内嵌 antd 版本：'
          msg-title: '# Ant Design {{v}} 发布日志'
          msg-poster: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zx7LTI_ECSAAAAAAAAAAAABkARQnAQ'
--- a/.github/workflows/site-deploy.yml
+++ b/.github/workflows/site-deploy.yml
@@ -10,7 +10,7 @@ permissions:
 jobs:
  setup:
    runs-on: ubuntu-latest
-    if: github.event.ref_type == 'tag' && (contains(github.event.ref, '-') == false)
+    if: github.event.ref_type == 'tag' && (contains(github.event.ref, '-') == false || startsWith(github.event.ref, '4.'))
    steps:
      - name: checkout
        uses: actions/checkout@v3
@@ -66,5 +66,6 @@ jobs:
      - name: deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
-          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
+          deploy_key: ${{ secrets.SITE_4X_DEPLOY_KEY }}
+          external_repository: ant-design/4x.ant.design
          publish_dir: ./_site
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -15,6 +15,27 @@ timeline: true

 ---

+## 4.24.4
+
+`2022-11-25`
+
+- Space.Compact
+  - 💄 Optimize Space.Compact style when wrapping a single child component. [#38913](https://github.com/ant-design/ant-design/pull/38913) [@foryuki](https://github.com/foryuki)
+  - 💄 Optimize Space.Compact style when wrapping Modal, Dropdown, Drawer and other components. [#38887](https://github.com/ant-design/ant-design/pull/38887) [@foryuki](https://github.com/foryuki)
+- 🆕 Mentions support `options` prop. [#38876](https://github.com/ant-design/ant-design/pull/38876) [@heiyu4585](https://github.com/heiyu4585)
+- 🐞 Fix ConfigProvider that `componentDisabled` is not work. [#38886](https://github.com/ant-design/ant-design/pull/38886) [@lidianhao123](https://github.com/lidianhao123)
+- 🐞 Fix Message that `onClose` didn't triggered when `duration` is `0`. [#38669](https://github.com/ant-design/ant-design/pull/38669) [@kiner-tang](https://github.com/kiner-tang)
+
+## 4.24.3
+
+`2022-11-17`
+
+- 🐞 Fix Typography config `prefixCls` not working. [#38586](https://github.com/ant-design/ant-design/pull/38586) [@SavelevMatthew](https://github.com/SavelevMatthew)
+- 🐞 Fix Table should not trigger sorter when pressing Enter in filter dropdown. [#38585](https://github.com/ant-design/ant-design/pull/38585)
+- 🆕 Allow Modal pass `mousePosition` to control animation origin position. [#38584](https://github.com/ant-design/ant-design/pull/38584) [@kiner-tang](https://github.com/kiner-tang)
+- 🐞 Fix Input.Search should not trigger `onSearch` while loading. [#38578](https://github.com/ant-design/ant-design/pull/38578) [@JackLiR8](https://github.com/JackLiR8)
+- 🐞 Fix Breadcrumb throw wrong `overlay` deprecated warning. [#38567](https://github.com/ant-design/ant-design/pull/38567) [@li-jia-nan](https://github.com/li-jia-nan)
+
 ## 4.24.2

 `2022-11-12`
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -15,6 +15,27 @@ timeline: true

 ---

+## 4.24.4
+
+`2022-11-25`
+
+- Space.Compact
+  - 💄 优化 Space.Compact 包裹单个子组件时子组件的样式。[#38913](https://github.com/ant-design/ant-design/pull/38913) [@foryuki](https://github.com/foryuki)
+  - 💄 优化 Space.Compact 组件嵌套 Modal，Dropdown，Drawer 等组件时的样式。[#38887](https://github.com/ant-design/ant-design/pull/38887) [@foryuki](https://github.com/foryuki)
+- 🆕 Mentions 支持 `options` 数据驱动。[#38876](https://github.com/ant-design/ant-design/pull/38876) [@heiyu4585](https://github.com/heiyu4585)
+- 🐞 修复 ConfigProvider 组件 `componentDisabled` 失效问题。[#38886](https://github.com/ant-design/ant-design/pull/38886) [@lidianhao123](https://github.com/lidianhao123)
+- 🐞 修复 Message 组件 `duration` 为 `0` 时手动关闭不触发 `onClose` 的问题。[#38669](https://github.com/ant-design/ant-design/pull/38669) [@kiner-tang](https://github.com/kiner-tang)
+
+## 4.24.3
+
+`2022-11-17`
+
+- 🐞 修复 Typography 设置 `prefixCls` 不生效的问题。[#38586](https://github.com/ant-design/ant-design/pull/38586) [@SavelevMatthew](https://github.com/SavelevMatthew)
+- 🐞 修复 Table 在筛选菜单里按回车时会触发排序的问题。[#38585](https://github.com/ant-design/ant-design/pull/38585)
+- 🆕 Modal 允许透传 `mousePosition` 来控制弹框动画原点。[#38584](https://github.com/ant-design/ant-design/pull/38584) [@kiner-tang](https://github.com/kiner-tang)
+- 🐞 修复 Input.Search `loading` 时触发 `onSearch` 的问题。[#38578](https://github.com/ant-design/ant-design/pull/38578) [@JackLiR8](https://github.com/JackLiR8)
+- 🐞 修复 Breadcrumb 报出错误的 `overlay` 警告信息的问题。[#38567](https://github.com/ant-design/ant-design/pull/38567) [@li-jia-nan](https://github.com/li-jia-nan)
+
 ## 4.24.2

 `2022-11-12`
@@ -36,7 +57,7 @@ timeline: true
 - 🐞 修复 Modal.confirm 关闭中确认按钮依旧可能被触发的问题。[#38400](https://github.com/ant-design/ant-design/pull/38400)
 - 🐞 修复在 Drawer `extra` 中使用 Radio.Group 的样式问题。[#38385](https://github.com/ant-design/ant-design/pull/38385)
 - ⌨️ 修复 Table 组件 `aria-label` 出现 `[object Object]` 的问题。[#38389](https://github.com/ant-design/ant-design/pull/38389) [@kiner-tang](https://github.com/kiner-tang)
- ⌨️ Progress 组件增加 `role="progressbar"` 。[#38447](https://github.com/ant-design/ant-design/pull/38447) [@kpustakhod](https://github.com/kpustakhod)
+- ⌨️ Progress 组件增加 `role="progressbar"`。[#38447](https://github.com/ant-design/ant-design/pull/38447) [@kpustakhod](https://github.com/kpustakhod)

 ## 4.24.1

--- a/2
+++ b/2
@@ -1 +1 @@
-ant.design
+4x.ant.design
--- a/components/config-provider/DisabledContext.tsx
+++ b/components/config-provider/DisabledContext.tsx
@@ -12,7 +12,7 @@ export interface DisabledContextProps {
 export const DisabledContextProvider: React.FC<DisabledContextProps> = ({ children, disabled }) => {
  const originDisabled = React.useContext(DisabledContext);
  return (
-    <DisabledContext.Provider value={disabled || originDisabled}>
+    <DisabledContext.Provider value={disabled ?? originDisabled}>
      {children}
    </DisabledContext.Provider>
  );
--- a/components/config-provider/tests/form.test.tsx
+++ b/components/config-provider/tests/form.test.tsx
@@ -4,6 +4,7 @@ import ConfigProvider from '..';
 import { render } from '../../../tests/utils';
 import type { FormInstance } from '../../form';
 import Form from '../../form';
+import Input from '../../input';
 import zhCN from '../../locale/zh_CN';

 describe('ConfigProvider.Form', () => {
@@ -125,4 +126,24 @@ describe('ConfigProvider.Form', () => {
      expect(container.querySelector('.ant-form-item-no-colon')).toBeFalsy();
    });
  });
+
+  describe('form disabled', () => {
+    it('set Input enabled', () => {
+      const { container } = render(
+        <Form disabled>
+          <ConfigProvider componentDisabled={false}>
+            <Form.Item name="input1" label="启用">
+              <Input />
+            </Form.Item>
+          </ConfigProvider>
+          <Form.Item name="input" label="禁用">
+            <Input />
+          </Form.Item>
+        </Form>,
+      );
+
+      expect(container.querySelector('#input1[disabled]')).toBeFalsy();
+      expect(container.querySelector('#input[disabled]')).toBeTruthy();
+    });
+  });
 });
--- a/components/drawer/index.tsx
+++ b/components/drawer/index.tsx
@@ -9,6 +9,7 @@ import { NoFormStyle } from '../form/context';
 import { getTransitionName } from '../_util/motion';
 import { tuple } from '../_util/type';
 import warning from '../_util/warning';
+import { NoCompactStyle } from '../space/Compact';

 const SizeTypes = tuple('default', 'large');
 type sizeType = typeof SizeTypes[number];
@@ -163,7 +164,7 @@ function Drawer(props: DrawerProps) {
    motionDeadline: 500,
  };

-  const panelMotion: RcDrawerProps['motion'] = motionPlacement => ({
+  const panelMotion: RcDrawerProps['motion'] = (motionPlacement) => ({
    motionName: getTransitionName(prefixCls, `panel-motion-${motionPlacement}`),
    motionAppear: true,
    motionEnter: true,
@@ -173,35 +174,37 @@ function Drawer(props: DrawerProps) {

  // =========================== Render ===========================
  return (
-    <NoFormStyle status override>
-      <RcDrawer
-        prefixCls={prefixCls}
-        onClose={onClose}
-        {...rest}
-        open={open || visible}
-        mask={mask}
-        push={push}
-        width={mergedWidth}
-        height={mergedHeight}
-        rootClassName={drawerClassName}
-        getContainer={getContainer}
-        afterOpenChange={isOpen => {
-          afterOpenChange?.(isOpen);
-          afterVisibleChange?.(isOpen);
-        }}
-        maskMotion={maskMotion}
-        motion={panelMotion}
-        rootStyle={style}
-      >
-        <div className={`${prefixCls}-wrapper-body`} style={{ ...drawerStyle }}>
-          {renderHeader()}
-          <div className={`${prefixCls}-body`} style={bodyStyle}>
-            {children}
+    <NoCompactStyle>
+      <NoFormStyle status override>
+        <RcDrawer
+          prefixCls={prefixCls}
+          onClose={onClose}
+          {...rest}
+          open={open || visible}
+          mask={mask}
+          push={push}
+          width={mergedWidth}
+          height={mergedHeight}
+          rootClassName={drawerClassName}
+          getContainer={getContainer}
+          afterOpenChange={(isOpen) => {
+            afterOpenChange?.(isOpen);
+            afterVisibleChange?.(isOpen);
+          }}
+          maskMotion={maskMotion}
+          motion={panelMotion}
+          rootStyle={style}
+        >
+          <div className={`${prefixCls}-wrapper-body`} style={{ ...drawerStyle }}>
+            {renderHeader()}
+            <div className={`${prefixCls}-body`} style={bodyStyle}>
+              {children}
+            </div>
+            {renderFooter()}
          </div>
-          {renderFooter()}
-        </div>
-      </RcDrawer>
-    </NoFormStyle>
+        </RcDrawer>
+      </NoFormStyle>
+    </NoCompactStyle>
  );
 }

--- a/components/drawer/style/index.tsx
+++ b/components/drawer/style/index.tsx
@@ -1,3 +1,3 @@
-// deps-lint-skip: empty, form
+// deps-lint-skip: empty, form, space
 import '../../style/index.less';
 import './index.less';
--- a/components/dropdown/dropdown.tsx
+++ b/components/dropdown/dropdown.tsx
@@ -13,6 +13,7 @@ import { cloneElement } from '../_util/reactNode';
 import { tuple } from '../_util/type';
 import warning from '../_util/warning';
 import DropdownButton from './dropdown-button';
+import { NoCompactStyle } from '../space/Compact';

 const Placements = tuple(
  'topLeft',
@@ -83,7 +84,7 @@ interface DropdownInterface extends React.FC<DropdownProps> {
  Button: typeof DropdownButton;
 }

-const Dropdown: DropdownInterface = props => {
+const Dropdown: DropdownInterface = (props) => {
  const {
    getPopupContainer: getContextPopupContainer,
    getPrefixCls,
@@ -244,7 +245,7 @@ const Dropdown: DropdownInterface = props => {
          );
        }}
      >
-        {overlayNode}
+        <NoCompactStyle>{overlayNode}</NoCompactStyle>
      </OverrideProvider>
    );
  };
--- a/components/image/tests/snapshots/index.test.tsx.snap
+++ b/components/image/tests/snapshots/index.test.tsx.snap
@@ -40,6 +40,146 @@ exports[`Image Default Group preview props 1`] = `
      </div>
    </div>
  </div>
+  <div
+    class="ant-image-preview-operations-wrapper ant-fade-appear ant-fade-appear-start ant-fade"
+  >
+    <ul
+      class="ant-image-preview-operations"
+    >
+      <li
+        class="ant-image-preview-operations-progress"
+      >
+        1 / 1
+      </li>
+      <li
+        class="ant-image-preview-operations-operation ant-image-preview-operations-operation-close"
+      >
+        <span
+          aria-label="close"
+          class="anticon anticon-close ant-image-preview-operations-icon"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="close"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+            />
+          </svg>
+        </span>
+      </li>
+      <li
+        class="ant-image-preview-operations-operation ant-image-preview-operations-operation-zoomIn"
+      >
+        <span
+          aria-label="zoom-in"
+          class="anticon anticon-zoom-in ant-image-preview-operations-icon"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="zoom-in"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"
+            />
+          </svg>
+        </span>
+      </li>
+      <li
+        class="ant-image-preview-operations-operation ant-image-preview-operations-operation-zoomOut ant-image-preview-operations-operation-disabled"
+      >
+        <span
+          aria-label="zoom-out"
+          class="anticon anticon-zoom-out ant-image-preview-operations-icon"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="zoom-out"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M637 443H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h312c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"
+            />
+          </svg>
+        </span>
+      </li>
+      <li
+        class="ant-image-preview-operations-operation ant-image-preview-operations-operation-rotateRight"
+      >
+        <span
+          aria-label="rotate-right"
+          class="anticon anticon-rotate-right ant-image-preview-operations-icon"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="rotate-right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <defs>
+              <style />
+            </defs>
+            <path
+              d="M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-.4-12.6 6.1l-.2 64c-118.6.5-235.8 53.4-314.6 154.2A399.75 399.75 0 00123.5 631h74.9c-.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8z"
+            />
+            <path
+              d="M880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H396V494h440v326z"
+            />
+          </svg>
+        </span>
+      </li>
+      <li
+        class="ant-image-preview-operations-operation ant-image-preview-operations-operation-rotateLeft"
+      >
+        <span
+          aria-label="rotate-left"
+          class="anticon anticon-rotate-left ant-image-preview-operations-icon"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="rotate-left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <defs>
+              <style />
+            </defs>
+            <path
+              d="M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H188V494h440v326z"
+            />
+            <path
+              d="M819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7.4 12.6-6.1v-63.9c12.9.1 25.9.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8a325.95 325.95 0 016.5 140.9h74.9c14.8-103.6-11.3-213-81-302.3z"
+            />
+          </svg>
+        </span>
+      </li>
+    </ul>
+  </div>
  <div>
    <div
      class="ant-image-preview-root"
@@ -88,148 +228,6 @@ exports[`Image Default Group preview props 1`] = `
      </div>
    </div>
  </div>
-  <div>
-    <div
-      class="ant-image-preview-operations-wrapper ant-fade-appear ant-fade-appear-start ant-fade"
-    >
-      <ul
-        class="ant-image-preview-operations"
-      >
-        <li
-          class="ant-image-preview-operations-progress"
-        >
-          1 / 1
-        </li>
-        <li
-          class="ant-image-preview-operations-operation ant-image-preview-operations-operation-close"
-        >
-          <span
-            aria-label="close"
-            class="anticon anticon-close ant-image-preview-operations-icon"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="close"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-              />
-            </svg>
-          </span>
-        </li>
-        <li
-          class="ant-image-preview-operations-operation ant-image-preview-operations-operation-zoomIn"
-        >
-          <span
-            aria-label="zoom-in"
-            class="anticon anticon-zoom-in ant-image-preview-operations-icon"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="zoom-in"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"
-              />
-            </svg>
-          </span>
-        </li>
-        <li
-          class="ant-image-preview-operations-operation ant-image-preview-operations-operation-zoomOut ant-image-preview-operations-operation-disabled"
-        >
-          <span
-            aria-label="zoom-out"
-            class="anticon anticon-zoom-out ant-image-preview-operations-icon"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="zoom-out"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M637 443H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h312c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"
-              />
-            </svg>
-          </span>
-        </li>
-        <li
-          class="ant-image-preview-operations-operation ant-image-preview-operations-operation-rotateRight"
-        >
-          <span
-            aria-label="rotate-right"
-            class="anticon anticon-rotate-right ant-image-preview-operations-icon"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="rotate-right"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <defs>
-                <style />
-              </defs>
-              <path
-                d="M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-.4-12.6 6.1l-.2 64c-118.6.5-235.8 53.4-314.6 154.2A399.75 399.75 0 00123.5 631h74.9c-.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8z"
-              />
-              <path
-                d="M880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H396V494h440v326z"
-              />
-            </svg>
-          </span>
-        </li>
-        <li
-          class="ant-image-preview-operations-operation ant-image-preview-operations-operation-rotateLeft"
-        >
-          <span
-            aria-label="rotate-left"
-            class="anticon anticon-rotate-left ant-image-preview-operations-icon"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="rotate-left"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <defs>
-                <style />
-              </defs>
-              <path
-                d="M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H188V494h440v326z"
-              />
-              <path
-                d="M819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7.4 12.6-6.1v-63.9c12.9.1 25.9.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8a325.95 325.95 0 016.5 140.9h74.9c14.8-103.6-11.3-213-81-302.3z"
-              />
-            </svg>
-          </span>
-        </li>
-      </ul>
-    </div>
-  </div>
 </body>
 `;

--- a/components/input-number/index.tsx
+++ b/components/input-number/index.tsx
@@ -11,7 +11,7 @@ import DisabledContext from '../config-provider/DisabledContext';
 import type { SizeType } from '../config-provider/SizeContext';
 import SizeContext from '../config-provider/SizeContext';
 import { FormItemInputContext, NoFormStyle } from '../form/context';
-import { useCompactItemContext } from '../space/Compact';
+import { NoCompactStyle, useCompactItemContext } from '../space/Compact';
 import { cloneElement } from '../_util/reactNode';
 import type { InputStatus } from '../_util/statusUtils';
 import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
@@ -180,15 +180,19 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
      <div className={mergedGroupClassName} style={props.style}>
        <div className={mergedWrapperClassName}>
          {addonBeforeNode && (
-            <NoFormStyle status override>
-              {addonBeforeNode}
-            </NoFormStyle>
+            <NoCompactStyle>
+              <NoFormStyle status override>
+                {addonBeforeNode}
+              </NoFormStyle>
+            </NoCompactStyle>
          )}
          {cloneElement(element, { style: null, disabled: mergedDisabled })}
          {addonAfterNode && (
-            <NoFormStyle status override>
-              {addonAfterNode}
-            </NoFormStyle>
+            <NoCompactStyle>
+              <NoFormStyle status override>
+                {addonAfterNode}
+              </NoFormStyle>
+            </NoCompactStyle>
          )}
        </div>
      </div>
--- a/components/mentions/tests/index.test.tsx
+++ b/components/mentions/tests/index.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Mentions from '..';
+import Mentions,{ Option } from '..';
 import focusTest from '../../../tests/shared/focusTest';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
@@ -84,4 +84,39 @@ describe('Mentions', () => {
    expect(wrapper.container.querySelectorAll('li.ant-mentions-dropdown-menu-item').length).toBe(1);
    expect(wrapper.container.querySelectorAll('.bamboo-light').length).toBeTruthy();
  });
+  it('do not lose label when use children Option', () => {
+    const wrapper = render( <Mentions
+      style={{ width: '100%' }}
+    >
+      <Mentions.Option value="afc163">Afc163</Mentions.Option>
+      <Mentions.Option value="zombieJ">ZombieJ</Mentions.Option>
+      <Mentions.Option value="yesmeck">Yesmeck</Mentions.Option>
+    </Mentions>);
+    simulateInput(wrapper, '@');
+    const {container} = wrapper
+    fireEvent.mouseEnter(
+      container.querySelector('li.ant-mentions-dropdown-menu-item:last-child')!,
+    );
+    fireEvent.focus(container.querySelector('textarea')!);
+    act(() => {
+      jest.runAllTimers();
+    });
+    expect(
+      wrapper.container.querySelector('.ant-mentions-dropdown-menu-item-active')?.textContent,
+    ).toBe('Yesmeck');
+  });
+  it('warning if use Mentions.Option', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    render(
+      <Mentions style={{ width: '100%' }} defaultValue="@afc163">
+        <Option value="afc163">afc163</Option>
+        <Option value="zombieJ">zombieJ</Option>
+        <Option value="yesmeck">yesmeck</Option>
+      </Mentions>,
+    );
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Mentions] `Mentions.Option` is deprecated. Please use `options` instead.',
+    );
+  });
+
 });
--- a/components/mentions/demo/async.md
+++ b/components/mentions/demo/async.md
@@ -14,11 +14,10 @@ title:
 async

 ```tsx
+import React, { useCallback, useRef, useState } from 'react';
 import { Mentions } from 'antd';
 import debounce from 'lodash/debounce';
-import React, { useCallback, useRef, useState } from 'react';

-const { Option } = Mentions;
 const App: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [users, setUsers] = useState<{ login: string; avatar_url: string }[]>([]);
@@ -52,14 +51,22 @@ const App: React.FC = () => {
  };

  return (
-    <Mentions style={{ width: '100%' }} loading={loading} onSearch={onSearch}>
-      {users.map(({ login, avatar_url: avatar }) => (
-        <Option key={login} value={login} className="antd-demo-dynamic-option">
-          <img src={avatar} alt={login} />
-          <span>{login}</span>
-        </Option>
-      ))}
-    </Mentions>
+    <Mentions
+      style={{ width: '100%' }}
+      loading={loading}
+      onSearch={onSearch}
+      options={users.map(({ login, avatar_url: avatar }) => ({
+        key: login,
+        value: login,
+        className: 'antd-demo-dynamic-option',
+        label: (
+          <>
+            <img src={avatar} alt={login} />
+            <span>{login}</span>
+          </>
+        ),
+      }))}
+    />
  );
 };

--- a/components/mentions/demo/autoSize.md
+++ b/components/mentions/demo/autoSize.md
@@ -14,17 +14,28 @@ title:
 Height autoSize.

 ```tsx
-import { Mentions } from 'antd';
 import React from 'react';
-
-const { Option } = Mentions;
+import { Mentions } from 'antd';

 const App: React.FC = () => (
-  <Mentions autoSize style={{ width: '100%' }}>
-    <Option value="afc163">afc163</Option>
-    <Option value="zombieJ">zombieJ</Option>
-    <Option value="yesmeck">yesmeck</Option>
-  </Mentions>
+  <Mentions
+    autoSize
+    style={{ width: '100%' }}
+    options={[
+      {
+        value: 'afc163',
+        label: 'afc163',
+      },
+      {
+        value: 'zombieJ',
+        label: 'zombieJ',
+      },
+      {
+        value: 'yesmeck',
+        label: 'yesmeck',
+      },
+    ]}
+  />
 );

 export default App;
--- a/components/mentions/demo/basic.md
+++ b/components/mentions/demo/basic.md
@@ -14,17 +14,15 @@ title:
 Basic usage.

 ```tsx
-import { Mentions } from 'antd';
-import type { OptionProps } from 'antd/es/mentions';
 import React from 'react';
-
-const { Option } = Mentions;
+import { Mentions } from 'antd';
+import type { MentionsOptionProps } from 'antd/es/mentions';

 const onChange = (value: string) => {
  console.log('Change:', value);
 };

-const onSelect = (option: OptionProps) => {
+const onSelect = (option: MentionsOptionProps) => {
  console.log('select', option);
 };

@@ -34,11 +32,21 @@ const App: React.FC = () => (
    onChange={onChange}
    onSelect={onSelect}
    defaultValue="@afc163"
-  >
-    <Option value="afc163">afc163</Option>
-    <Option value="zombieJ">zombieJ</Option>
-    <Option value="yesmeck">yesmeck</Option>
-  </Mentions>
+    options={[
+      {
+        value: 'afc163',
+        label: 'afc163',
+      },
+      {
+        value: 'zombieJ',
+        label: 'zombieJ',
+      },
+      {
+        value: 'yesmeck',
+        label: 'yesmeck',
+      },
+    ]}
+  />
 );

 export default App;
--- a/components/mentions/demo/form.md
+++ b/components/mentions/demo/form.md
@@ -14,10 +14,10 @@ title:
 Controlled mode, for example, to work with `Form`.

 ```tsx
-import { Button, Form, Mentions } from 'antd';
 import React from 'react';
+import { Button, Form, Mentions } from 'antd';

-const { Option, getMentions } = Mentions;
+const { getMentions } = Mentions;

 const App: React.FC = () => {
  const [form] = Form.useForm();
@@ -52,11 +52,23 @@ const App: React.FC = () => {
        wrapperCol={{ span: 16 }}
        rules={[{ validator: checkMention }]}
      >
-        <Mentions rows={1}>
-          <Option value="afc163">afc163</Option>
-          <Option value="zombieJ">zombieJ</Option>
-          <Option value="yesmeck">yesmeck</Option>
-        </Mentions>
+        <Mentions
+          rows={1}
+          options={[
+            {
+              value: 'afc163',
+              label: 'afc163',
+            },
+            {
+              value: 'zombieJ',
+              label: 'zombieJ',
+            },
+            {
+              value: 'yesmeck',
+              label: 'yesmeck',
+            },
+          ]}
+        />
      </Form.Item>
      <Form.Item
        name="bio"
@@ -65,11 +77,24 @@ const App: React.FC = () => {
        wrapperCol={{ span: 16 }}
        rules={[{ required: true }]}
      >
-        <Mentions rows={3} placeholder="You can use @ to ref user here">
-          <Option value="afc163">afc163</Option>
-          <Option value="zombieJ">zombieJ</Option>
-          <Option value="yesmeck">yesmeck</Option>
-        </Mentions>
+        <Mentions
+          rows={3}
+          placeholder="You can use @ to ref user here"
+          options={[
+            {
+              value: 'afc163',
+              label: 'afc163',
+            },
+            {
+              value: 'zombieJ',
+              label: 'zombieJ',
+            },
+            {
+              value: 'yesmeck',
+              label: 'yesmeck',
+            },
+          ]}
+        />
      </Form.Item>
      <Form.Item wrapperCol={{ span: 14, offset: 6 }}>
        <Button htmlType="submit" type="primary">
--- a/components/mentions/demo/placement.md
+++ b/components/mentions/demo/placement.md
@@ -14,17 +14,28 @@ title:
 Change the suggestions placement.

 ```tsx
-import { Mentions } from 'antd';
 import React from 'react';
-
-const { Option } = Mentions;
+import { Mentions } from 'antd';

 const App: React.FC = () => (
-  <Mentions style={{ width: '100%' }} placement="top">
-    <Option value="afc163">afc163</Option>
-    <Option value="zombieJ">zombieJ</Option>
-    <Option value="yesmeck">yesmeck</Option>
-  </Mentions>
+  <Mentions
+    style={{ width: '100%' }}
+    placement="top"
+    options={[
+      {
+        value: 'afc163',
+        label: 'afc163',
+      },
+      {
+        value: 'zombieJ',
+        label: 'zombieJ',
+      },
+      {
+        value: 'yesmeck',
+        label: 'yesmeck',
+      },
+    ]}
+  />
 );

 export default App;
--- a/components/mentions/demo/prefix.md
+++ b/components/mentions/demo/prefix.md
@@ -14,10 +14,8 @@ title:
 Customize Trigger Token by `prefix` props. Default to `@`, `Array<string>` also supported.

 ```tsx
-import { Mentions } from 'antd';
 import React, { useState } from 'react';
-
-const { Option } = Mentions;
+import { Mentions } from 'antd';

 const MOCK_DATA = {
  '@': ['afc163', 'zombiej', 'yesmeck'],
@@ -39,13 +37,12 @@ const App: React.FC = () => {
      placeholder="input @ to mention people, # to mention tag"
      prefix={['@', '#']}
      onSearch={onSearch}
-    >
-      {(MOCK_DATA[prefix] || []).map(value => (
-        <Option key={value} value={value}>
-          {value}
-        </Option>
-      ))}
-    </Mentions>
+      options={(MOCK_DATA[prefix] || []).map(value => ({
+        key: value,
+        value,
+        label: value,
+      }))}
+    />
  );
 };

--- a/components/mentions/demo/readonly.md
+++ b/components/mentions/demo/readonly.md
@@ -14,28 +14,31 @@ title:
 Configurate `disabled` and `readOnly`.

 ```tsx
-import { Mentions } from 'antd';
 import React from 'react';
+import { Mentions } from 'antd';

-const { Option } = Mentions;
-
-const getOptions = () =>
-  ['afc163', 'zombiej', 'yesmeck'].map(value => (
-    <Option key={value} value={value}>
-      {value}
-    </Option>
-  ));
+const options = ['afc163', 'zombiej', 'yesmeck'].map(value => ({
+  value,
+  key: value,
+  label: value,
+}));

 const App: React.FC = () => (
  <>
    <div style={{ marginBottom: 10 }}>
-      <Mentions style={{ width: '100%' }} placeholder="this is disabled Mentions" disabled>
-        {getOptions()}
-      </Mentions>
+      <Mentions
+        style={{ width: '100%' }}
+        placeholder="this is disabled Mentions"
+        disabled
+        options={options}
+      />
    </div>
-    <Mentions style={{ width: '100%' }} placeholder="this is readOnly Mentions" readOnly>
-      {getOptions()}
-    </Mentions>
+    <Mentions
+      style={{ width: '100%' }}
+      placeholder="this is readOnly Mentions"
+      readOnly
+      options={options}
+    />
  </>
 );

--- a/components/mentions/index.en-US.md
+++ b/components/mentions/index.en-US.md
@@ -11,14 +11,26 @@ Mention component.

 When you need to mention someone or something.

-## API
+### Usage upgrade after 4.24.4
+
+```__react
+import Alert from '../alert';
+ReactDOM.render(<Alert message="After version 4.24.4, we provide a simpler usage <Mentions options={[...]} />  with better performance and potential of writing simpler code style in your applications. Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 5.0." />, mountNode);
+```

 ```jsx
+// works when >=4.24.4, recommended ✅
+const options = [{ value: 'sample', label: 'sample' }];
+return <Mentions options={options} />;
+
+// works when <4.24.4, deprecated when >=4.24.4 🙅🏻‍♀️
 <Mentions onChange={onChange}>
  <Mentions.Option value="sample">Sample</Mentions.Option>
-</Mentions>
+</Mentions>;
 ```

+## API
+
 ### Mention

 | Property | Description | Type | Default | Version |
@@ -41,6 +53,7 @@ When you need to mention someone or something.
 | onResize | The callback function that is triggered when textarea resize | function({ width, height }) | - |  |
 | onSearch | Trigger when prefix hit | (text: string, prefix: string) => void | - |  |
 | onSelect | Trigger when user select the option | (option: OptionProps, prefix: string) => void | - |  |
+| options | Option Configuration | [Options](#Option) | \[] | 4.24.4 |

 ### Mention methods

@@ -53,5 +66,9 @@ When you need to mention someone or something.

 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
-| children | Suggestion content | ReactNode | - |
 | value | The value of suggestion, the value will insert into input filed while selected | string | - |
+| label | Title of the option | React.ReactNode | - |
+| key | The key value of the option | string | - |
+| disabled | Optional | boolean | - |
+| className | className | string | - |
+| style | The style of the option | React.CSSProperties | - |
--- a/components/mentions/index.tsx
+++ b/components/mentions/index.tsx
@@ -3,6 +3,7 @@ import RcMentions from 'rc-mentions';
 import type {
  MentionsProps as RcMentionsProps,
  MentionsRef as RcMentionsRef,
+  DataDrivenOptionProps as MentionsOptionProps,
 } from 'rc-mentions/lib/Mentions';
 import { composeRef } from 'rc-util/lib/ref';
 import * as React from 'react';
@@ -12,6 +13,7 @@ import { FormItemInputContext } from '../form/context';
 import Spin from '../spin';
 import type { InputStatus } from '../_util/statusUtils';
 import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
+import warning from '../_util/warning';

 export const { Option } = RcMentions;

@@ -21,6 +23,10 @@ function loadingFilterOption() {

 export type MentionPlacement = 'top' | 'bottom';

+export type {
+  DataDrivenOptionProps as MentionsOptionProps,
+} from 'rc-mentions/lib/Mentions';
+
 export interface OptionProps {
  value: string;
  children: React.ReactNode;
@@ -30,6 +36,7 @@ export interface OptionProps {
 export interface MentionProps extends RcMentionsProps {
  loading?: boolean;
  status?: InputStatus;
+  options?: MentionsOptionProps[];
 }

 export interface MentionsRef extends RcMentionsRef {}
@@ -63,6 +70,7 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps
    filterOption,
    children,
    notFoundContent,
+    options,
    status: customStatus,
    ...restProps
  },
@@ -71,6 +79,16 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps
  const [focused, setFocused] = React.useState(false);
  const innerRef = React.useRef<MentionsRef>();
  const mergedRef = composeRef(ref, innerRef);
+
+  // =================== Warning =====================
+  if (process.env.NODE_ENV !== 'production') {
+    warning(
+      !children,
+      'Mentions',
+      '`Mentions.Option` is deprecated. Please use `options` instead.',
+    );
+  }
+
  const { getPrefixCls, renderEmpty, direction } = React.useContext(ConfigContext);
  const {
    status: contextStatus,
@@ -114,6 +132,16 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps
    return children;
  };

+  const mergedOptions = loading
+    ? [
+        {
+          value: 'ANTD_SEARCHING',
+          disabled: true,
+          label: <Spin size="small" />,
+        },
+      ]
+    : options;
+
  const getFilterOption = (): any => {
    if (loading) {
      return loadingFilterOption;
@@ -145,6 +173,7 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps
      onFocus={onFocus}
      onBlur={onBlur}
      ref={mergedRef as any}
+      options={mergedOptions}
    >
      {getOptions()}
    </RcMentions>
@@ -185,7 +214,7 @@ Mentions.getMentions = (value: string = '', config: MentionsConfig = {}): Mentio
    .map((str = ''): MentionsEntity | null => {
      let hitPrefix: string | null = null;

-      prefixList.some(prefixStr => {
+      prefixList.some((prefixStr) => {
        const startStr = str.slice(0, prefixStr.length);
        if (startStr === prefixStr) {
          hitPrefix = prefixStr;
--- a/components/mentions/index.zh-CN.md
+++ b/components/mentions/index.zh-CN.md
@@ -12,14 +12,26 @@ cover: https://gw.alipayobjects.com/zos/alicdn/jPE-itMFM/Mentions.svg

 用于在输入中提及某人或某事，常用于发布、聊天或评论功能。

-## API
+### 4.24.4 用法升级
+
+```__react
+import Alert from '../alert';
+ReactDOM.render(<Alert message="在 4.24.4 版本后，我们提供了 <Mentions options={[...]} /> 的简写方式，有更好的性能和更方便的数据组织方式，开发者不再需要自行拼接 JSX。同时我们废弃了原先的写法，你还是可以在 4.x 继续使用，但会在控制台看到警告，并会在 5.0 后移除。" />, mountNode);
+```

 ```jsx
+// >=4.24.4 可用，推荐的写法 ✅
+const options = [{ value: 'sample', label: 'sample' }];
+return <Mentions options={options} />;
+
+// <4.24.4 可用，>=4.24.4 时不推荐 🙅🏻‍♀️
 <Mentions onChange={onChange}>
  <Mentions.Option value="sample">Sample</Mentions.Option>
-</Mentions>
+</Mentions>;
 ```

+## API
+
 ### Mentions

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -42,6 +54,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/jPE-itMFM/Mentions.svg
 | onResize | resize 回调 | function({ width, height }) | - |  |
 | onSearch | 搜索时触发 | (text: string, prefix: string) => void | - |  |
 | onSelect | 选择选项时触发 | (option: OptionProps, prefix: string) => void | - |  |
+| options | 选项配置 | [Options](#Option) | [] | 4.24.4 |

 ### Mentions 方法

@@ -52,7 +65,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/jPE-itMFM/Mentions.svg

 ### Option

-| 参数     | 说明           | 类型      | 默认值 |
-| -------- | -------------- | --------- | ------ |
-| children | 选项内容       | ReactNode | -      |
-| value    | 选择时填充的值 | string    | -      |
+| 参数      | 说明           | 类型                | 默认值 |
+| --------- | -------------- | ------------------- | ------ |
+| value     | 选择时填充的值 | string              | -      |
+| label     | 选项的标题     | React.ReactNode     | -      |
+| key       | 选项的 key 值  | string              | -      |
+| disabled  | 是否可选       | boolean             | -      |
+| className | css 类名       | string              | -      |
+| style     | 选项样式       | React.CSSProperties | -      |
--- a/components/message/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/message/tests/snapshots/demo-extend.test.ts.snap
@@ -45,14 +45,35 @@ exports[`renders ./components/message/demo/info.md extend context correctly 1`]
 `;

 exports[`renders ./components/message/demo/loading.md extend context correctly 1`] = `
-<button
-  class="ant-btn ant-btn-default"
-  type="button"
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
 >
-  <span>
-    Display a loading indicator
-  </span>
-</button>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px"
+  >
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span>
+        Display a loading indicator
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span>
+        Display a loading and auto hide
+      </span>
+    </button>
+  </div>
+</div>
 `;

 exports[`renders ./components/message/demo/other.md extend context correctly 1`] = `
--- a/components/message/tests/snapshots/demo.test.ts.snap
+++ b/components/message/tests/snapshots/demo.test.ts.snap
@@ -45,14 +45,35 @@ exports[`renders ./components/message/demo/info.md correctly 1`] = `
 `;

 exports[`renders ./components/message/demo/loading.md correctly 1`] = `
-<button
-  class="ant-btn ant-btn-default"
-  type="button"
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
 >
-  <span>
-    Display a loading indicator
-  </span>
-</button>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px"
+  >
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span>
+        Display a loading indicator
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span>
+        Display a loading and auto hide
+      </span>
+    </button>
+  </div>
+</div>
 `;

 exports[`renders ./components/message/demo/other.md correctly 1`] = `
--- a/components/message/tests/type.test.tsx
+++ b/components/message/tests/type.test.tsx
@@ -24,8 +24,16 @@ describe('message.typescript', () => {
    );
  });

-  it('hide', () => {
-    const hide = message.loading('doing...');
+  it('hide', (done) => {
+    const onClose = jest.fn();
+    const onClose2 = jest.fn();
+    const hide = message.loading('doing...', 0, onClose);
    hide();
+    expect(onClose).toHaveBeenCalled();
+    message.loading('doing', 0.1, onClose2);
+    setTimeout(() => {
+      expect(onClose2).toHaveBeenCalled();
+      done();
+    }, 110);
  });
 });
--- a/components/message/demo/loading.md
+++ b/components/message/demo/loading.md
@@ -14,16 +14,29 @@ title:
 Display a global loading indicator, which is dismissed by itself asynchronously.

 ```tsx
-import { Button, message } from 'antd';
+import { Button, message, Space } from 'antd';
 import React from 'react';

 const success = () => {
-  const hide = message.loading('Action in progress..', 0);
+  const hide = message.loading('Action in progress..', 0, () => {
+    message.success('loading had closed');
+  });
  // Dismiss manually and asynchronously
  setTimeout(hide, 2500);
 };

-const App: React.FC = () => <Button onClick={success}>Display a loading indicator</Button>;
+const success2 = () => {
+  message.loading('Action in progress..', 3, () => {
+    message.success('loading had closed');
+  });
+};
+
+const App: React.FC = () => (
+  <Space>
+    <Button onClick={success}>Display a loading indicator</Button>
+    <Button onClick={success2}>Display a loading and auto hide</Button>
+  </Space>
+);

 export default App;
 ```
--- a/components/message/index.tsx
+++ b/components/message/index.tsx
@@ -194,6 +194,7 @@ function notice(args: ArgsProps): MessageType {
  const result: any = () => {
    if (messageInstance) {
      messageInstance.removeNotice(target);
+      args.onClose?.();
    }
  };
  result.then = (filled: ThenableArgument, rejected: ThenableArgument) =>
--- a/components/modal/Modal.tsx
+++ b/components/modal/Modal.tsx
@@ -10,6 +10,7 @@ import type { DirectionType } from '../config-provider';
 import { ConfigContext } from '../config-provider';
 import { NoFormStyle } from '../form/context';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
+import { NoCompactStyle } from '../space/Compact';
 import { getTransitionName } from '../_util/motion';
 import { canUseDocElement } from '../_util/styleChecker';
 import warning from '../_util/warning';
@@ -148,7 +149,7 @@ export interface ModalLocale {
  justOkText: string;
 }

-const Modal: React.FC<ModalProps> = props => {
+const Modal: React.FC<ModalProps> = (props) => {
  const {
    getPopupContainer: getContextPopupContainer,
    getPrefixCls,
@@ -190,7 +191,7 @@ const Modal: React.FC<ModalProps> = props => {

  const defaultFooter = (
    <LocaleReceiver componentName="Modal" defaultLocale={getConfirmLocale()}>
-      {contextLocale => {
+      {(contextLocale) => {
        const { okText, okType = 'primary', cancelText, confirmLoading = false } = props;

        return (
@@ -223,25 +224,29 @@ const Modal: React.FC<ModalProps> = props => {
    [`${prefixCls}-wrap-rtl`]: direction === 'rtl',
  });
  return (
-    <NoFormStyle status override>
-      <Dialog
-        width={width}
-        {...restProps}
-        getContainer={
-          getContainer === undefined ? (getContextPopupContainer as getContainerFunc) : getContainer
-        }
-        prefixCls={prefixCls}
-        wrapClassName={wrapClassNameExtended}
-        footer={footer === undefined ? defaultFooter : footer}
-        visible={open || visible}
-        mousePosition={restProps.mousePosition ?? mousePosition}
-        onClose={handleCancel}
-        closeIcon={closeIconToRender}
-        focusTriggerAfterClose={focusTriggerAfterClose}
-        transitionName={getTransitionName(rootPrefixCls, 'zoom', props.transitionName)}
-        maskTransitionName={getTransitionName(rootPrefixCls, 'fade', props.maskTransitionName)}
-      />
-    </NoFormStyle>
+    <NoCompactStyle>
+      <NoFormStyle status override>
+        <Dialog
+          width={width}
+          {...restProps}
+          getContainer={
+            getContainer === undefined
+              ? (getContextPopupContainer as getContainerFunc)
+              : getContainer
+          }
+          prefixCls={prefixCls}
+          wrapClassName={wrapClassNameExtended}
+          footer={footer === undefined ? defaultFooter : footer}
+          visible={open || visible}
+          mousePosition={restProps.mousePosition ?? mousePosition}
+          onClose={handleCancel}
+          closeIcon={closeIconToRender}
+          focusTriggerAfterClose={focusTriggerAfterClose}
+          transitionName={getTransitionName(rootPrefixCls, 'zoom', props.transitionName)}
+          maskTransitionName={getTransitionName(rootPrefixCls, 'fade', props.maskTransitionName)}
+        />
+      </NoFormStyle>
+    </NoCompactStyle>
  );
 };

--- a/components/modal/style/index.tsx
+++ b/components/modal/style/index.tsx
@@ -1,6 +1,6 @@
 import '../../style/index.less';
 import './index.less';

-// deps-lint-skip: form
+// deps-lint-skip: form, space
 // style dependencies
 import '../../button/style';
--- a/components/space/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/space/tests/snapshots/demo-extend.test.ts.snap
--- a/components/space/tests/snapshots/demo.test.ts.snap
+++ b/components/space/tests/snapshots/demo.test.ts.snap
@@ -2711,6 +2711,7 @@ exports[`renders ./components/space/demo/compact-debug.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
+    style="margin-bottom:8px"
  >
    <div
      class="ant-space-compact"
@@ -2808,6 +2809,517 @@ exports[`renders ./components/space/demo/compact-debug.md correctly 1`] = `
      </button>
    </div>
  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <br />
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <div
+      class="ant-space-compact"
+    >
+      <button
+        class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item ant-btn-compact-last-item"
+        type="button"
+      >
+        <span>
+          debug Modal context
+        </span>
+      </button>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <div
+      class="ant-space-compact"
+    >
+      <div
+        class="ant-space-compact ant-space-compact-block ant-dropdown-button ant-dropdown-button-compact-item ant-dropdown-button-compact-first-item ant-dropdown-button-compact-last-item"
+      >
+        <button
+          class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
+          type="button"
+        >
+          <span>
+            debug Dropdown.Button context
+          </span>
+        </button>
+        <button
+          class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
+          type="button"
+        >
+          <span
+            aria-label="ellipsis"
+            class="anticon anticon-ellipsis"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="ellipsis"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <div
+      class="ant-space-compact"
+    >
+      <button
+        class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item ant-btn-compact-last-item"
+        type="button"
+      >
+        <span>
+          debug Drawer context
+        </span>
+      </button>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <div
+      class="ant-space-compact"
+    >
+      <div
+        class="ant-input-number-group-wrapper"
+      >
+        <div
+          class="ant-input-number-wrapper ant-input-number-group"
+        >
+          <div
+            class="ant-input-number-group-addon"
+          >
+            +
+          </div>
+          <div
+            class="ant-input-number ant-input-number-compact-item ant-input-number-compact-first-item ant-input-number-compact-last-item"
+          >
+            <div
+              class="ant-input-number-handler-wrap"
+            >
+              <span
+                aria-disabled="false"
+                aria-label="Increase Value"
+                class="ant-input-number-handler ant-input-number-handler-up"
+                role="button"
+                unselectable="on"
+              >
+                <span
+                  aria-label="up"
+                  class="anticon anticon-up ant-input-number-handler-up-inner"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="up"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+                    />
+                  </svg>
+                </span>
+              </span>
+              <span
+                aria-disabled="false"
+                aria-label="Decrease Value"
+                class="ant-input-number-handler ant-input-number-handler-down"
+                role="button"
+                unselectable="on"
+              >
+                <span
+                  aria-label="down"
+                  class="anticon anticon-down ant-input-number-handler-down-inner"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="down"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </div>
+            <div
+              class="ant-input-number-input-wrap"
+            >
+              <input
+                aria-valuenow="100"
+                autocomplete="off"
+                class="ant-input-number-input"
+                role="spinbutton"
+                step="1"
+                value="100"
+              />
+            </div>
+          </div>
+          <div
+            class="ant-input-number-group-addon"
+          >
+            $
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <div
+      class="ant-space-compact"
+    >
+      <div
+        class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-compact-last-item ant-select-single ant-select-show-arrow"
+      >
+        <div
+          class="ant-select-selector"
+        >
+          <span
+            class="ant-select-selection-search"
+          >
+            <input
+              aria-activedescendant="undefined_list_0"
+              aria-autocomplete="list"
+              aria-controls="undefined_list"
+              aria-haspopup="listbox"
+              aria-owns="undefined_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              readonly=""
+              role="combobox"
+              style="opacity:0"
+              type="search"
+              unselectable="on"
+              value=""
+            />
+          </span>
+          <span
+            class="ant-select-selection-item"
+            title="Sign Up"
+          >
+            Sign Up
+          </span>
+        </div>
+        <span
+          aria-hidden="true"
+          class="ant-select-arrow"
+          style="user-select:none;-webkit-user-select:none"
+          unselectable="on"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down ant-select-suffix"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <div
+      class="ant-space-compact"
+    >
+      <div
+        class="ant-picker ant-picker-range ant-picker-middle ant-picker-compact-item ant-picker-compact-first-item ant-picker-compact-last-item"
+        style="width:70%"
+      >
+        <div
+          class="ant-picker-input ant-picker-input-active"
+        >
+          <input
+            autocomplete="off"
+            placeholder="Start date"
+            readonly=""
+            size="12"
+            value=""
+          />
+        </div>
+        <div
+          class="ant-picker-range-separator"
+        >
+          <span
+            aria-label="to"
+            class="ant-picker-separator"
+          >
+            <span
+              aria-label="swap-right"
+              class="anticon anticon-swap-right"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="swap-right"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="0 0 1024 1024"
+                width="1em"
+              >
+                <path
+                  d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
+                />
+              </svg>
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-picker-input"
+        >
+          <input
+            autocomplete="off"
+            placeholder="End date"
+            readonly=""
+            size="12"
+            value=""
+          />
+        </div>
+        <div
+          class="ant-picker-active-bar"
+          style="left:0;width:0;position:absolute"
+        />
+        <span
+          class="ant-picker-suffix"
+        >
+          <span
+            aria-label="calendar"
+            class="anticon anticon-calendar"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="calendar"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <div
+      class="ant-space-compact"
+    >
+      <div
+        class="ant-input-number ant-input-number-compact-item ant-input-number-compact-first-item ant-input-number-compact-last-item"
+      >
+        <div
+          class="ant-input-number-handler-wrap"
+        >
+          <span
+            aria-disabled="false"
+            aria-label="Increase Value"
+            class="ant-input-number-handler ant-input-number-handler-up"
+            role="button"
+            unselectable="on"
+          >
+            <span
+              aria-label="up"
+              class="anticon anticon-up ant-input-number-handler-up-inner"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="up"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+                />
+              </svg>
+            </span>
+          </span>
+          <span
+            aria-disabled="false"
+            aria-label="Decrease Value"
+            class="ant-input-number-handler ant-input-number-handler-down"
+            role="button"
+            unselectable="on"
+          >
+            <span
+              aria-label="down"
+              class="anticon anticon-down ant-input-number-handler-down-inner"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="down"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                />
+              </svg>
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-input-number-input-wrap"
+        >
+          <input
+            aria-valuenow="12"
+            autocomplete="off"
+            class="ant-input-number-input"
+            role="spinbutton"
+            step="1"
+            value="12"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <div
+      class="ant-space-compact"
+    >
+      <div
+        class="ant-select ant-cascader ant-select-compact-item ant-select-compact-first-item ant-select-compact-last-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
+        style="width:70%"
+      >
+        <div
+          class="ant-select-selector"
+        >
+          <span
+            class="ant-select-selection-search"
+          >
+            <input
+              aria-autocomplete="list"
+              aria-controls="undefined_list"
+              aria-haspopup="listbox"
+              aria-owns="undefined_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              readonly=""
+              role="combobox"
+              style="opacity:0"
+              type="search"
+              unselectable="on"
+              value=""
+            />
+          </span>
+          <span
+            class="ant-select-selection-placeholder"
+          >
+            Select Address
+          </span>
+        </div>
+        <span
+          aria-hidden="true"
+          class="ant-select-arrow"
+          style="user-select:none;-webkit-user-select:none"
+          unselectable="on"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down ant-select-suffix"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-space-compact ant-space-compact-vertical"
+    >
+      <button
+        class="ant-btn ant-btn-default ant-btn-compact-vertical-item ant-btn-compact-vertical-first-item ant-btn-compact-vertical-last-item"
+        type="button"
+      >
+        <span>
+          vertical compact button
+        </span>
+      </button>
+    </div>
+  </div>
 </div>
 `;

--- a/components/space/tests/space-compact.test.tsx
+++ b/components/space/tests/space-compact.test.tsx
@@ -12,6 +12,9 @@ import DatePicker from '../../date-picker';
 import Select from '../../select';
 import TimePicker from '../../time-picker';
 import TreeSelect from '../../tree-select';
+import Modal from '../../modal';
+import Dropdown from '../../dropdown';
+import Drawer from '../../drawer';

 describe('Space.Compact', () => {
  mountTest(Space.Compact);
@@ -131,7 +134,7 @@ describe('Space.Compact', () => {
        <Space.Compact>{React.createElement(component as any)}</Space.Compact>,
      );
      expect(container.querySelectorAll(`.${targetCls}`).length).toBe(1);
-      ['compact-item', 'compact-first-item', 'compact-last-item'].forEach(suffix => {
+      ['compact-item', 'compact-first-item', 'compact-last-item'].forEach((suffix) => {
        expect(
          container
            .querySelector(`.${targetCls}`)
@@ -182,4 +185,67 @@ describe('Space.Compact', () => {
        ?.classList.contains('ant-btn-compact-vertical-last-item'),
    ).toBe(true);
  });
+
+  it('context for Modal', () => {
+    render(
+      <Space.Compact size="small">
+        <Modal title="Basic Modal" open>
+          <Button>normal button A</Button>
+          <Input />
+        </Modal>
+      </Space.Compact>,
+    );
+    expect(
+      document.body
+        .querySelectorAll('.ant-modal')[0]
+        .querySelector('.ant-btn')
+        ?.classList.contains('ant-btn-compact-item'),
+    ).toBe(false);
+    expect(
+      document.body
+        .querySelectorAll('.ant-modal')[0]
+        .querySelector('.ant-input')
+        ?.classList.contains('ant-input-compact-item'),
+    ).toBe(false);
+  });
+  it('context for Dropdown', () => {
+    render(
+      <Space.Compact size="small">
+        <Dropdown.Button
+          visible
+          menu={{
+            items: [
+              {
+                key: '1',
+                label: <Button>menu button</Button>,
+              },
+            ],
+          }}
+        >
+          debug Dropdown.Button context
+        </Dropdown.Button>
+      </Space.Compact>,
+    );
+    expect(
+      document.body
+        .querySelector('.ant-dropdown')
+        ?.querySelector('.ant-btn')
+        ?.classList.contains('ant-btn-compact-item'),
+    ).toBe(false);
+  });
+  it('context for Drawer', () => {
+    render(
+      <Space.Compact size="small">
+        <Drawer title="Basic Drawer" open>
+          <Button>normal button A</Button>
+        </Drawer>
+      </Space.Compact>,
+    );
+    expect(
+      document.body
+        .querySelector('.ant-drawer')
+        ?.querySelector('.ant-btn')
+        ?.classList.contains('ant-btn-compact-item'),
+    ).toBe(false);
+  });
 });
--- a/components/space/demo/compact-debug.md
+++ b/components/space/demo/compact-debug.md
@@ -17,8 +17,20 @@ Input addon debug.

 ```tsx
 import { SettingOutlined, CopyOutlined, DownloadOutlined } from '@ant-design/icons';
-import { Cascader, Input, Select, Space, Button, Tooltip } from 'antd';
-import React from 'react';
+import {
+  Cascader,
+  Input,
+  Select,
+  Space,
+  Button,
+  Tooltip,
+  Modal,
+  Dropdown,
+  Drawer,
+  InputNumber,
+  DatePicker,
+} from 'antd';
+import React, { useState } from 'react';

 const { Option } = Select;

@@ -37,53 +49,172 @@ const selectAfter = (
  </Select>
 );

-const App: React.FC = () => (
-  <Space direction="vertical">
-    <Space.Compact block>
-      <Button>default Button</Button>
-      <Button danger>danger Button</Button>
-      <Button type="dashed">dashed Button</Button>
-      <Button type="text">text Button</Button>
-      <Button type="link">Link Button</Button>
-      <Tooltip title="Tooltip">
-        <Button icon={<DownloadOutlined />} disabled />
-      </Tooltip>
-    </Space.Compact>
-    <br />
-    <Space.Compact>
-      <Button>Prefix</Button>
-      <Input addonBefore="http://" addonAfter=".com" defaultValue="mysite" />
-      <Button type="primary">Submit</Button>
-    </Space.Compact>
-    <Space.Compact>
-      <Input placeholder="prefix" />
-      <Input addonBefore={selectBefore} addonAfter={selectAfter} defaultValue="mysite" />
-      <Button icon={<CopyOutlined />} />
-    </Space.Compact>
-    <Space.Compact>
-      <Input.Search />
-      <Input.Search />
-      <Button icon={<CopyOutlined />} />
-    </Space.Compact>
-    <Space.Compact>
-      <Input addonAfter={<SettingOutlined />} defaultValue="mysite" />
-      <Button type="primary">Submit</Button>
-      <Input placeholder="suffix" addonAfter={<SettingOutlined />} />
-    </Space.Compact>
-    <Space.Compact>
-      <Input addonBefore="http://" suffix=".com" defaultValue="mysite" />
-      <Button type="primary">Submit</Button>
-    </Space.Compact>
-    <Space.Compact>
-      <Button>Prefix</Button>
-      <Input
-        addonBefore={<Cascader placeholder="cascader" style={{ width: 150 }} />}
-        defaultValue="mysite"
-      />
-      <Button type="primary">Submit</Button>
-    </Space.Compact>
-  </Space>
-);
+const App: React.FC = () => {
+  const [showModal, setShowModal] = useState(false);
+  const [showDrawer, setShowDrawer] = useState(false);
+  return (
+    <Space direction="vertical">
+      <Space.Compact block>
+        <Button>default Button</Button>
+        <Button danger>danger Button</Button>
+        <Button type="dashed">dashed Button</Button>
+        <Button type="text">text Button</Button>
+        <Button type="link">Link Button</Button>
+        <Tooltip title="Tooltip">
+          <Button icon={<DownloadOutlined />} disabled />
+        </Tooltip>
+      </Space.Compact>
+      <br />
+      <Space.Compact>
+        <Button>Prefix</Button>
+        <Input addonBefore="http://" addonAfter=".com" defaultValue="mysite" />
+        <Button type="primary">Submit</Button>
+      </Space.Compact>
+      <Space.Compact>
+        <Input placeholder="prefix" />
+        <Input addonBefore={selectBefore} addonAfter={selectAfter} defaultValue="mysite" />
+        <Button icon={<CopyOutlined />} />
+      </Space.Compact>
+      <Space.Compact>
+        <Input.Search />
+        <Input.Search />
+        <Button icon={<CopyOutlined />} />
+      </Space.Compact>
+      <Space.Compact>
+        <Input addonAfter={<SettingOutlined />} defaultValue="mysite" />
+        <Button type="primary">Submit</Button>
+        <Input placeholder="suffix" addonAfter={<SettingOutlined />} />
+      </Space.Compact>
+      <Space.Compact>
+        <Input addonBefore="http://" suffix=".com" defaultValue="mysite" />
+        <Button type="primary">Submit</Button>
+      </Space.Compact>
+      <Space.Compact>
+        <Button>Prefix</Button>
+        <Input
+          addonBefore={<Cascader placeholder="cascader" style={{ width: 150 }} />}
+          defaultValue="mysite"
+        />
+        <Button type="primary">Submit</Button>
+      </Space.Compact>
+      <br />
+      <Space.Compact>
+        <Button onClick={() => setShowModal(true)}>debug Modal context</Button>
+        {showModal && (
+          <Modal title="Basic Modal" open={showModal} onCancel={() => setShowModal(false)}>
+            <Button>normal button A</Button>
+            <Button>normal button B</Button>
+            <br />
+            <br />
+            <Input />
+            <br />
+            <br />
+            <Space.Compact>
+              <Button>compact button A</Button>
+              <Button>compact button B</Button>
+            </Space.Compact>
+          </Modal>
+        )}
+      </Space.Compact>
+      <Space.Compact>
+        <Dropdown.Button
+          menu={{
+            items: [
+              {
+                key: '1',
+                label: <Button>menu button</Button>,
+              },
+              {
+                key: '2',
+                label: 'normal menu item',
+              },
+            ],
+          }}
+        >
+          debug Dropdown.Button context
+        </Dropdown.Button>
+      </Space.Compact>
+      <Space.Compact>
+        <Button onClick={() => setShowDrawer(true)}>debug Drawer context</Button>
+        {showDrawer && (
+          <Drawer
+            title="Basic Drawer"
+            placement="right"
+            onClose={() => setShowDrawer(false)}
+            open={showDrawer}
+          >
+            <Button>normal button A</Button>
+            <Button>normal button B</Button>
+            <br />
+            <br />
+            <Space.Compact>
+              <Button>compact button A</Button>
+              <Button>compact button B</Button>
+            </Space.Compact>
+          </Drawer>
+        )}
+      </Space.Compact>
+      <Space.Compact>
+        <InputNumber addonBefore="+" addonAfter="$" defaultValue={100} />
+      </Space.Compact>
+      <Space.Compact>
+        <Select defaultValue="Sign Up">
+          <Option value="Sign Up">Sign Up</Option>
+          <Option value="Sign In">Sign In</Option>
+        </Select>
+      </Space.Compact>
+      <Space.Compact>
+        <DatePicker.RangePicker style={{ width: '70%' }} />
+      </Space.Compact>
+      <Space.Compact>
+        <InputNumber defaultValue={12} />
+      </Space.Compact>
+      <Space.Compact>
+        <Cascader
+          style={{ width: '70%' }}
+          options={[
+            {
+              value: 'zhejiang',
+              label: 'Zhejiang',
+              children: [
+                {
+                  value: 'hangzhou',
+                  label: 'Hangzhou',
+                  children: [
+                    {
+                      value: 'xihu',
+                      label: 'West Lake',
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              value: 'jiangsu',
+              label: 'Jiangsu',
+              children: [
+                {
+                  value: 'nanjing',
+                  label: 'Nanjing',
+                  children: [
+                    {
+                      value: 'zhonghuamen',
+                      label: 'Zhong Hua Men',
+                    },
+                  ],
+                },
+              ],
+            },
+          ]}
+          placeholder="Select Address"
+        />
+      </Space.Compact>
+      <Space.Compact direction="vertical">
+        <Button>vertical compact button</Button>
+      </Space.Compact>
+    </Space>
+  );
+};

 export default App;
 ```
--- a/components/style/mixins/compact-item-vertical.less
+++ b/components/style/mixins/compact-item-vertical.less
@@ -3,12 +3,12 @@
    border-radius: 0;
  }

-  &-item&-first-item {
+  &-item&-first-item:not(&-last-item) {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

-  &-item&-last-item {
+  &-item&-last-item:not(&-first-item) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
--- a/components/style/mixins/compact-item.less
+++ b/components/style/mixins/compact-item.less
@@ -5,24 +5,24 @@
      border-radius: 0;
    }

-    &-item.@{prefix-cls}&-first-item:not(&-item-rtl) {
+    &-item.@{prefix-cls}&-first-item:not(&-last-item):not(&-item-rtl) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

-    &-item.@{prefix-cls}&-last-item:not(&-item-rtl) {
+    &-item.@{prefix-cls}&-last-item:not(&-first-item):not(&-item-rtl) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    // ----------rtl for first item----------
-    &-item.@{prefix-cls}&-item-rtl&-first-item {
+    &-item.@{prefix-cls}&-item-rtl&-first-item:not(&-last-item) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    // ----------rtl for last item----------
-    &-item.@{prefix-cls}&-item-rtl&-last-item {
+    &-item.@{prefix-cls}&-item-rtl&-last-item:not(&-first-item) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
@@ -34,24 +34,24 @@
      border-radius: 0;
    }

-    &-item&-first-item.@{prefix-cls}:not(&-item-rtl) > .@{bordered-item-cls} {
+    &-item&-first-item.@{prefix-cls}:not(&-last-item):not(&-item-rtl) > .@{bordered-item-cls} {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

-    &-item&-last-item.@{prefix-cls}:not(&-item-rtl) > .@{bordered-item-cls} {
+    &-item&-last-item.@{prefix-cls}:not(&-first-item):not(&-item-rtl) > .@{bordered-item-cls} {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    // ----------rtl for first item----------
-    &-item.@{prefix-cls}&-first-item&-item-rtl > .@{bordered-item-cls} {
+    &-item.@{prefix-cls}&-first-item&-item-rtl:not(&-last-item) > .@{bordered-item-cls} {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    // ----------rtl for last item----------
-    &-item.@{prefix-cls}&-last-item&-item-rtl > .@{bordered-item-cls} {
+    &-item.@{prefix-cls}&-last-item&-item-rtl:not(&-first-item) > .@{bordered-item-cls} {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
--- a/components/upload/tests/demo-extend.test.ts
+++ b/components/upload/tests/demo-extend.test.ts
@@ -1,3 +1,3 @@
 import { extendTest } from '../../../tests/shared/demoTest';

-extendTest('upload');
+extendTest('upload', { skip: ['crop-image.md'] });
--- a/components/upload/tests/demo.test.ts
+++ b/components/upload/tests/demo.test.ts
@@ -1,3 +1,3 @@
 import demoTest from '../../../tests/shared/demoTest';

-demoTest('upload');
+demoTest('upload', { skip: ['crop-image.md'] });
--- a/components/upload/tests/image.test.ts
+++ b/components/upload/tests/image.test.ts
@@ -1,5 +1,5 @@
 import { imageDemoTest } from '../../../tests/shared/imageTest';

 describe('Upload image', () => {
-  imageDemoTest('upload');
+  imageDemoTest('upload', { skip: ['crop-image.md'] });
 });
--- a/docs/react/customize-theme.en-US.md
+++ b/docs/react/customize-theme.en-US.md
@@ -11,7 +11,7 @@ Ant Design allows you to customize our design tokens to satisfy UI diversity fro

 We are using [Less](http://lesscss.org/) as the development language for styling. A set of less variables are defined for each design aspect that can be customized to your needs.

-There are some major variables below, all less variables could be found in [Default Variables](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less).
+There are some major variables below, all less variables could be found in [Default Variables](https://github.com/ant-design/ant-design/blob/4.x-stable/components/style/themes/default.less).

 ```less
@primary-color: #1890ff; // primary color for all components
--- a/docs/react/customize-theme.zh-CN.md
+++ b/docs/react/customize-theme.zh-CN.md
@@ -11,7 +11,7 @@ Ant Design 设计规范和技术上支持灵活的样式定制，以满足业务

 antd 的样式使用了 [Less](http://lesscss.org/) 作为开发语言，并定义了一系列全局/组件的样式变量，你可以根据需求进行相应调整。

-以下是一些最常用的通用变量，所有样式变量可以在 [这里](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less) 找到。
+以下是一些最常用的通用变量，所有样式变量可以在 [这里](https://github.com/ant-design/ant-design/blob/4.x-stable/components/style/themes/default.less) 找到。

 ```less
@primary-color: #1890ff; // 全局主色
--- a/docs/react/migration-v4.en-US.md
+++ b/docs/react/migration-v4.en-US.md
@@ -59,7 +59,7 @@ This document will help you upgrade from antd `3.x` version to antd `4.x` versio
 - Removed `combobox` mode, please use `AutoComplete` instead.
 - Removed the `rowSelection.hideDefaultSelections` property of Table, please use `SELECTION_ALL` and `SELECTION_INVERT` in `rowSelection.selections` instead, [Custom Selection](/components/table/#components-table-demo-row-selection-custom).
 - Deprecated Button.Group, please use `Space` instead.
- less variables were changed like DatePicker/TimePicker/Calendar related variables or [@btn-padding-base](https://github.com/ant-design/ant-design/issues/28141), please check [3.x variables](https://github.com/ant-design/ant-design/blob/3.x-stable/components/style/themes/default.less) and [4.x variables](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less) for more details.
+- less variables were changed like DatePicker/TimePicker/Calendar related variables or [@btn-padding-base](https://github.com/ant-design/ant-design/issues/28141), please check [3.x variables](https://github.com/ant-design/ant-design/blob/3.x-stable/components/style/themes/default.less) and [4.x variables](https://github.com/ant-design/ant-design/blob/4.x-stable/components/style/themes/default.less) for more details.

 #### Icon upgrade

--- a/docs/react/migration-v4.zh-CN.md
+++ b/docs/react/migration-v4.zh-CN.md
@@ -147,7 +147,7 @@ const Demo = () => (
 - Tabs 重写（[4.3.0](https://github.com/ant-design/ant-design/pull/24552)）
  - Dom 结构变化，如有覆盖样式需要仔细检查。
  - 横向滚动交互变化，`onPrevClick` 和 `onNextClick` 不再工作。
- less 变量变化，如 DatePicker/TimePicker/Calendar 相关变量已全部重构，又如 [@btn-padding-base](https://github.com/ant-design/ant-design/issues/28141) 等进行了重命名，具体变化请自行对比 [3.x 变量](https://github.com/ant-design/ant-design/blob/3.x-stable/components/style/themes/default.less) 和 [4.x 变量](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less)。
+- less 变量变化，如 DatePicker/TimePicker/Calendar 相关变量已全部重构，又如 [@btn-padding-base](https://github.com/ant-design/ant-design/issues/28141) 等进行了重命名，具体变化请自行对比 [3.x 变量](https://github.com/ant-design/ant-design/blob/3.x-stable/components/style/themes/default.less) 和 [4.x 变量](https://github.com/ant-design/ant-design/blob/4.x-stable/components/style/themes/default.less)。

 ```diff
 <Table
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "antd",
-  "version": "4.24.2",
+  "version": "4.24.4",
  "description": "An enterprise-class UI design language and React components implementation",
  "title": "Ant Design",
  "keywords": [
@@ -64,7 +64,7 @@
    "compile": "npm run clean && antd-tools run compile",
    "changelog": "node ./scripts/print-changelog",
    "predeploy": "antd-tools run clean && npm run site && cp CNAME _site && npm run site:test",
-    "deploy": "bisheng gh-pages --push-only --dotfiles",
+    "deploy": "gh-pages -d _site -r git@github.com:ant-design/4x.ant.design.git -b gh-pages",
    "deploy:china-mirror": "git checkout gh-pages && git pull origin gh-pages && git push git@gitee.com:ant-design/ant-design.git gh-pages",
    "dist": "antd-tools run dist",
    "dist:esbuild": "ESBUILD=true npm run dist",
@@ -134,8 +134,8 @@
    "rc-image": "~5.12.0",
    "rc-input": "~0.1.4",
    "rc-input-number": "~7.3.9",
-    "rc-mentions": "~1.11.0",
-    "rc-menu": "~9.7.2",
+    "rc-mentions": "~1.13.1",
+    "rc-menu": "~9.8.0",
    "rc-motion": "^2.6.1",
    "rc-notification": "~4.6.0",
    "rc-pagination": "~3.2.0",
@@ -149,7 +149,7 @@
    "rc-steps": "~5.0.0-alpha.2",
    "rc-switch": "~3.2.0",
    "rc-table": "~7.26.0",
-    "rc-tabs": "~12.3.0",
+    "rc-tabs": "~12.4.1",
    "rc-textarea": "~0.4.5",
    "rc-tooltip": "~5.2.0",
    "rc-tree": "~5.7.0",
@@ -190,6 +190,7 @@
    "@types/warning": "^3.0.0",
    "@typescript-eslint/eslint-plugin": "^5.40.0",
    "@typescript-eslint/parser": "^5.40.0",
+    "antd": "4.x",
    "antd-img-crop": "^4.2.8",
    "array-move": "^4.0.0",
    "babel-plugin-add-react-displayname": "^0.0.5",
--- a/scripts/check-commit.js
+++ b/scripts/check-commit.js
@@ -15,18 +15,27 @@ function exitProcess(code = 1) {
 }

 async function checkVersion() {
-  const { versions } = await fetch('http://registry.npmjs.org/antd').then(res => res.json());
-  if (version in versions) {
-    console.log(chalk.yellow('😈 Current version already exists. Forget update package.json?'));
-    console.log(chalk.cyan(' => Current:'), version);
-    exitProcess();
+  try {
+    const { versions } = await fetch('http://registry.npmjs.org/antd').then((res) => res.json());
+    if (version in versions) {
+      console.log(chalk.yellow('😈 Current version already exists. Forget update package.json?'));
+      console.log(chalk.cyan(' => Current:'), version);
+      exitProcess();
+    }
+  } catch (error) {
+    console.log(chalk.red('🚨 Check version failed. Skip...'));
  }
 }

 async function checkBranch({ current }) {
-  if (version.includes('-alpha.')) {
+  if (
+    version.includes('-alpha.') ||
+    version.includes('-beta.') ||
+    version.includes('-rc.') ||
+    version.includes('-experimental.')
+  ) {
    console.log(chalk.cyan('😃 Alpha version. Skip branch check.'));
-  } else if (current !== 'master' && current !== '4.0-prepare') {
+  } else if (current !== 'master' && current !== '4.0-prepare' && current !== '4.x-stable') {
    console.log(chalk.yellow('🤔 You are not in the master branch!'));
    exitProcess();
  }
@@ -43,12 +52,16 @@ async function checkCommit({ files }) {
 }

 async function checkRemote() {
-  const { remote } = await git.fetch('origin', 'master');
-  if (remote?.indexOf('ant-design/ant-design') === -1) {
-    console.log(
-      chalk.yellow('😓 Your remote origin is not ant-design/ant-design, did you fork it?'),
-    );
-    exitProcess();
+  try {
+    const { remote } = await git.fetch('origin', 'master');
+    if (remote?.indexOf('ant-design/ant-design') === -1) {
+      console.log(
+        chalk.yellow('😓 Your remote origin is not ant-design/ant-design, did you fork it?'),
+      );
+      exitProcess();
+    }
+  } catch (error) {
+    console.log(chalk.red('🚨 Check remote failed. Skip...'));
  }
 }

--- a/scripts/print-changelog.js
+++ b/scripts/print-changelog.js
@@ -73,7 +73,7 @@ async function printLog() {
      type: 'list',
      name: 'toVersion',
      message: `🔀 Please choose branch to compare with ${chalk.magenta(fromVersion)}:`,
-      choices: ['master', '3.x-stable', 'feature', 'custom input ⌨️'],
+      choices: ['master', '4.x-stable', '3.x-stable', 'feature', 'custom input ⌨️'],
    },
  ]);

--- a/site/theme/template/Layout/Header/Navigation.tsx
+++ b/site/theme/template/Layout/Header/Navigation.tsx
@@ -126,39 +126,14 @@ export default ({
          key: 'tech-ui',
        }
      : null,
-    isZhCN &&
-    typeof window !== 'undefined' &&
-    window.location.host !== 'ant-design.antgroup.com' &&
-    window.location.host !== 'ant-design.gitee.io'
+    isZhCN && typeof window !== 'undefined' && window.location.host !== '4x-ant-design.antgroup.com'
      ? {
-          label: '国内镜像',
+          label: (
+            <a href="https://4x-ant-design.antgroup.com" target="__blank" rel="noopener noreferrer">
+              国内镜像
+            </a>
+          ),
          key: 'mirror',
-          children: [
-            {
-              label: <a href="https://ant-design.antgroup.com">官方镜像</a>,
-              icon: (
-                <img
-                  alt="logo"
-                  src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
-                  width={16}
-                  style={{ verticalAlign: 'text-bottom' }}
-                />
-              ),
-              key: 'antgroup',
-            },
-            {
-              label: <a href="https://ant-design.gitee.io">Gitee 镜像</a>,
-              icon: (
-                <img
-                  alt="gitee"
-                  src="https://gw.alipayobjects.com/zos/bmw-prod/9e91e124-9bab-4113-b500-301412f6b370.svg"
-                  width={16}
-                  style={{ verticalAlign: 'text-bottom' }}
-                />
-              ),
-              key: 'gitee',
-            },
-          ],
        }
      : null,
    ...(additional ?? []),
--- a/site/theme/template/Layout/Header/index.tsx
+++ b/site/theme/template/Layout/Header/index.tsx
@@ -42,7 +42,7 @@ const triggerDocSearchImport = () => {
    return Promise.resolve();
  }

-  return import('docsearch.js').then(ds => {
+  return import('docsearch.js').then((ds) => {
    docsearch = ds.default;
  });
 };
@@ -97,7 +97,7 @@ interface HeaderState {
  showTechUIButton: boolean;
 }

-const Header: React.FC<HeaderProps & WrappedComponentProps<'intl'>> = props => {
+const Header: React.FC<HeaderProps & WrappedComponentProps<'intl'>> = (props) => {
  const { intl, router, location, themeConfig, changeDirection } = props;
  const [headerState, setHeaderState] = useState<HeaderState>({
    menuVisible: false,
@@ -109,16 +109,16 @@ const Header: React.FC<HeaderProps & WrappedComponentProps<'intl'>> = props => {
  const pingTimer = useRef<NodeJS.Timeout | null>(null);

  const handleHideMenu = useCallback(() => {
-    setHeaderState(prev => ({ ...prev, menuVisible: false }));
+    setHeaderState((prev) => ({ ...prev, menuVisible: false }));
  }, []);
  const onWindowResize = useCallback(() => {
-    setHeaderState(prev => ({ ...prev, windowWidth: window.innerWidth }));
+    setHeaderState((prev) => ({ ...prev, windowWidth: window.innerWidth }));
  }, []);
  const onTriggerSearching = useCallback((searching: boolean) => {
-    setHeaderState(prev => ({ ...prev, searching }));
+    setHeaderState((prev) => ({ ...prev, searching }));
  }, []);
  const handleShowMenu = useCallback(() => {
-    setHeaderState(prev => ({ ...prev, menuVisible: true }));
+    setHeaderState((prev) => ({ ...prev, menuVisible: true }));
  }, []);
  const onDirectionChange = useCallback(() => {
    changeDirection(direction !== 'rtl' ? 'rtl' : 'ltr');
@@ -129,13 +129,13 @@ const Header: React.FC<HeaderProps & WrappedComponentProps<'intl'>> = props => {
    initDocSearch({ isZhCN: intl.locale === 'zh-CN', router });
    onWindowResize();
    window.addEventListener('resize', onWindowResize);
-    pingTimer.current = ping(status => {
+    pingTimer.current = ping((status) => {
      if (status !== 'timeout' && status !== 'error') {
-        setHeaderState(prev => ({ ...prev, showTechUIButton: true }));
+        setHeaderState((prev) => ({ ...prev, showTechUIButton: true }));
        if (
          process.env.NODE_ENV === 'production' &&
          shouldOpenAntdMirrorModal() &&
-          window.location.host !== 'ant-design.antgroup.com' &&
+          window.location.host !== '4x-ant-design.antgroup.com' &&
          window.location.host.indexOf('surge.sh') === -1
        ) {
          Modal.confirm({
@@ -211,7 +211,7 @@ const Header: React.FC<HeaderProps & WrappedComponentProps<'intl'>> = props => {
          [antdVersion]: antdVersion,
          ...themeConfig?.docVersions,
        };
-        const versionOptions = Object.keys(docVersions).map(version => (
+        const versionOptions = Object.keys(docVersions).map((version) => (
          <Option value={docVersions[version]} key={version}>
            {version}
          </Option>
@@ -264,7 +264,7 @@ const Header: React.FC<HeaderProps & WrappedComponentProps<'intl'>> = props => {
            defaultValue={antdVersion}
            onChange={handleVersionChange}
            dropdownStyle={getDropdownStyle}
-            getPopupContainer={trigger => trigger.parentNode}
+            getPopupContainer={(trigger) => trigger.parentNode}
          >
            {versionOptions}
          </Select>,
@@ -309,7 +309,7 @@ const Header: React.FC<HeaderProps & WrappedComponentProps<'intl'>> = props => {
              placement="right"
              title={null}
              closable={false}
-              onClose={() => setHeaderState(prev => ({ ...prev, menuVisible: false }))}
+              onClose={() => setHeaderState((prev) => ({ ...prev, menuVisible: false }))}
              bodyStyle={{ margin: '0 -23px' }}
              drawerStyle={{ overflowX: 'hidden' }}
              width={260}
--- a/site/theme/template/Layout/index.tsx
+++ b/site/theme/template/Layout/index.tsx
@@ -10,7 +10,7 @@ import { setTwoToneColor } from '@ant-design/icons';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
 import { ConfigProvider } from 'antd';
 import { browserHistory } from 'bisheng/router';
-import zhCN from 'antd/lib/locale/zh_CN';
+import zhCN from 'antd/es/locale/zh_CN';
 import type { DirectionType } from 'antd/es/config-provider';
 import Header from './Header';
 import type { SiteContextProps } from './SiteContext';
@@ -21,8 +21,8 @@ import * as utils from '../utils';
 import 'moment/locale/zh-cn';

 if (typeof window !== 'undefined' && navigator.serviceWorker) {
-  navigator.serviceWorker.getRegistrations().then(registrations => {
-    registrations.forEach(registration => registration.unregister());
+  navigator.serviceWorker.getRegistrations().then((registrations) => {
+    registrations.forEach((registration) => registration.unregister());
  });
 }

@@ -32,6 +32,10 @@ if (typeof window !== 'undefined') {
    location.href = location.href.replace('next.ant.design', 'ant.design');
  }

+  if (!location.pathname.endsWith('/')) {
+    location.pathname += '/';
+  }
+
  // eslint-disable-next-line global-require
  require('../../static/style');

@@ -44,7 +48,7 @@ if (typeof window !== 'undefined') {
  (window as any)['@ant-design/icons'] = require('@ant-design/icons');

  // Error log statistic
-  window.addEventListener('error', e => {
+  window.addEventListener('error', (e) => {
    // Ignore ResizeObserver error
    if (e.message === 'ResizeObserver loop limit exceeded') {
      e.stopPropagation();
Author	SHA1	Message	Date
MadCcc	50ea91a4de	chore: update snapshot	2022-11-25 16:17:42 +08:00
MadCcc	1f0fbd4dcf	docs: fix 404	2022-11-25 15:50:56 +08:00
MadCcc	a44668f355	docs: 4.24.4 changelog (#38981 ) * docs: 4.24.4 changelog * chore: update changelog	2022-11-25 14:35:11 +08:00
Yuki Zhang	3b48ffa247	fix: v4 Space.Compact when wrapping a single child component (#38913 )	2022-11-24 20:12:20 +08:00
Yuki Zhang	3af410ab3f	fix: context issues for Space.Compact (#38887 )	2022-11-23 22:30:26 +08:00
黑雨	066be35de3	feat: support options (#38876 ) * feat: support options * feat: update package * feat: update package * feat: update doc * feat: update doc * feat: update doc * feat: add test case	2022-11-23 21:00:24 +08:00
dainli	6f4b96567b	bugfix(DisabledContextProvider): fix disabled logic (#38886 ) * bugfix(DisabledContextProvider): fix disabled logic * test: add test for ConfigProvider componentDisabled Co-authored-by: dian.li <dian.li@yunzhanghu.com>	2022-11-23 11:04:23 +08:00
MadCcc	428803924f	chore: update host judgement in modal	2022-11-21 10:44:19 +08:00
afc163	755c3c549f	docs: update default.less github url	2022-11-18 22:51:01 +08:00
二货机器人	90a5a9f583	docs: fix site link ref to v4 github link	2022-11-18 17:34:45 +08:00
MadCcc	d3a7119d03	chore: update mirror host (#38674 ) * chore: update host * chore: rm gitee mirror * chore: lint * chore: ignore crop-imgae	2022-11-18 16:39:28 +08:00
kiner-tang(文辉)	934804763a	fix(message): call onClose after removeNotice (#38669 ) * fix: call onClose after removeNotice * feat: update demo and snapshots * feat: update test case	2022-11-18 16:37:24 +08:00
Amumu	95e097b159	fix(site): fix antd/lib lint error (#38678 ) * fix(site): fix antd/lib lint error * chore: remove antd-img-crop * chore: 4.x * Revert "chore: remove antd-img-crop" This reverts commit `29e15ced65`.	2022-11-18 16:18:44 +08:00
xrkffgg	d903bfc28a	ci: add tag for more branch (#38652 ) * Update release-helper.yml * Update release-helper.yml	2022-11-18 10:46:00 +08:00
afc163	c88ea086f2	Update CHANGELOG.zh-CN.md	2022-11-17 23:38:57 +08:00
二货机器人	5d79e8a448	chore: update CNAME	2022-11-17 17:51:24 +08:00
二货机器人	6d9cf9e132	chore: sync script with next	2022-11-17 16:48:50 +08:00
二货爱吃白萝卜	14884fe585	docs: 4.24.3 changelog (#38623 )	2022-11-17 16:41:24 +08:00
MadCcc	17c7526728	Merge pull request #38577 from ant-design/master chore: sync 4.x	2022-11-17 14:50:17 +08:00
MadCcc	bfe8183e1c	chore: update deploy actions & scripts	2022-11-15 10:54:19 +08:00