docs: changelog v4.24.6 (#39817 )

* docs: changelog v4.24.6 * Update CHANGELOG.en-US.md Co-authored-by: afc163 <afc163@gmail.com> * Update CHANGELOG.zh-CN.md Co-authored-by: afc163 <afc163@gmail.com> Co-authored-by: afc163 <afc163@gmail.com>
chore: Image preview interactive optimization (#39813 )
2026-02-09 10:59:19 +08:00 · 2022-12-26 17:32:05 +08:00 · 2022-12-26 16:21:10 +08:00 · 2022-12-23 10:44:52 +08:00 · 2022-12-23 10:40:11 +08:00 · 2022-12-22 10:59:54 +08:00
115 changed files with 9479 additions and 817 deletions
--- a/.antd-tools.config.js
+++ b/.antd-tools.config.js
@@ -20,7 +20,7 @@ function finalizeCompile() {
    let componentsLessContent = '';
    // Build components in one file: lib/style/components.less
    fs.readdir(componentsPath, (err, files) => {
-      files.forEach(file => {
+      files.forEach((file) => {
        if (fs.existsSync(path.join(componentsPath, file, 'style', 'index.less'))) {
          componentsLessContent += `@import "../${path.posix.join(
            file,
@@ -192,4 +192,5 @@ module.exports = {
  },
  generateThemeFileContent,
  bail: true,
+  tag: 'latest-4',
 };
--- a/.github/workflows/compressed-size.yml
+++ b/.github/workflows/compressed-size.yml
@@ -1,31 +0,0 @@
-name: 📦 Compressed Size
-
-on:
-  pull_request:
-    types: [opened, synchronize]
-
-# Cancel prev CI if new commit come
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
-
-permissions:
-  contents: read
-
-jobs:
-  compressed-size:
-    permissions:
-      contents: read  # for actions/checkout to fetch code
-      pull-requests: write  # for preactjs/compressed-size-action to create PR comments
-    runs-on: ubuntu-latest
-    env:
-      CI_JOB_NUMBER: 1
-
-    steps:
-    - uses: actions/checkout@v3
-    - uses: preactjs/compressed-size-action@v2
-      with:
-        repo-token: "${{ secrets.GITHUB_TOKEN }}"
-        pattern: "./dist/**/*.min.{js,css}"
-        build-script: "dist:esbuild-no-dup-check"
-        clean-script: "clean-lockfiles"
--- a/.github/workflows/release-helper.yml
+++ b/.github/workflows/release-helper.yml
@@ -23,9 +23,11 @@ jobs:
      - name: release antd
        uses: actions-cool/release-helper@v2
        with:
-          triger: 'tag'
+          trigger: 'tag'
          changelogs: 'CHANGELOG.en-US.md, CHANGELOG.zh-CN.md'
-          branch: 'master'
+          branch: 'master, 4.x-stable'
+          tag: '5*, 4*'
+          latest: '5*'
          dingding-token: ${{ secrets.DINGDING_BOT_TOKEN }}
          dingding-msg: 'CHANGELOG.zh-CN.md'
          msg-title: '# Ant Design {{v}} 发布日志'
@@ -34,27 +36,19 @@ 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'
+          trigger: 'tag'
          changelogs: 'CHANGELOG.en-US.md, CHANGELOG.zh-CN.md'
-          branch: 'master'
+          branch: 'master, 4.x-stable'
+          tag: '5*, 4*'
+          latest: '5*'
          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/.github/workflows/size-limit.yml
+++ b/.github/workflows/size-limit.yml
@@ -1,4 +1,4 @@
-name: 📦 Compressed Size(size-limit)
+name: 📦 Size Limit

 on:
  pull_request:
@@ -13,19 +13,49 @@ permissions:
  contents: read

 jobs:
-  compressed-size:
+  size:
    permissions:
-      contents: read  # for actions/checkout to fetch code
-      pull-requests: write  # for preactjs/compressed-size-action to create PR comments
+      contents: read
+      pull-requests: write
    runs-on: ubuntu-latest
    env:
      CI_JOB_NUMBER: 1

    steps:
-    - uses: actions/checkout@v3
-    - uses: andresz1/size-limit-action@v1
-      with:
-        repo-token: "${{ secrets.GITHUB_TOKEN }}"
-        pattern: "./dist/**/*.min.{js,css}"
-        build-script: "dist:esbuild-no-dup-check"
-        clean-script: "clean-lockfiles"
+      - name: checkout
+        uses: actions/checkout@v3
+
+      - name: cache package-lock.json
+        uses: actions/cache@v3
+        with:
+          path: package-temp-dir
+          key: lock-${{ github.sha }}
+
+      - name: create package-lock.json
+        run: npm i --package-lock-only --ignore-scripts
+
+      - name: hack for single file
+        run: |
+          if [ ! -d "package-temp-dir" ]; then
+            mkdir package-temp-dir
+          fi
+          cp package-lock.json package-temp-dir
+      - name: cache node_modules
+        id: node_modules_cache_id
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
+
+      - name: install
+        if: steps.node_modules_cache_id.outputs.cache-hit != 'true'
+        run: npm ci
+
+      - name: size-limit
+        uses: ant-design/size-limit-action@master
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          build_script: dist
+          skip_step: install
+        env:
+          NODE_OPTIONS: --max_old_space_size=4096
--- a/.gitignore
+++ b/.gitignore
@@ -61,6 +61,9 @@ site/theme/template/NotFound.jsx
 scripts/previewEditor/index.html
 components/version/version.tsx
 components/version/token.tsx
+.dumi
+components/version/token-meta.json
+components/version/token.json

 # Image snapshot diff
 __diff_output__/
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -15,6 +15,51 @@ timeline: true

 ---

+## 4.24.6
+
+`2022-12-26`
+
+- 🆕 Dropdown support `autoAdjustOverflow`. [#39741](https://github.com/ant-design/ant-design/pull/39741)
+- 🐞 Fix `justify` and `align` properties are not reactive for Row. [#39706](https://github.com/ant-design/ant-design/pull/39706) [@candy4290](https://github.com/candy4290)
+- 🐞 Fix Drawer that could not be close with `open={false}`. [#39561](https://github.com/ant-design/ant-design/pull/39561)
+- 🐞 Fix Divider `horizontal` align issue in flex layout. [#39334](https://github.com/ant-design/ant-design/pull/39334)
+- 💄 Fix `Dropdown` component dange and disabled style priority issue. [#39434](https://github.com/ant-design/ant-design/pull/39434) [@Wxh16144](https://github.com/Wxh16144)
+- ⌨️ Reset aria-label in Table column. [#39747](https://github.com/ant-design/ant-design/pull/39747) [@kiner-tang](https://github.com/kiner-tang)
+- 🌐 Localization
+  - 🇺🇿 Add uz_UZ locale. [#39353](https://github.com/ant-design/ant-design/pull/39353) [@nodkz](https://github.com/nodkz)
+
+## 4.24.5
+
+`2022-12-05`
+
+- 🐞 Fix Menu.Item with `disabled` not prevent a element clickable. [aa8d7f5](https://github.com/ant-design/ant-design/commit/aa8d7f5) [@二货机器人](https://github.com/二货机器人)
+- 💄 Tweak Popconfirm icon position when `title` have multiple lines. [#39027](https://github.com/ant-design/ant-design/pull/39027) [@justanotheranonymoususer](https://github.com/justanotheranonymoususer)
+- 🐞 Fix Badge the color cannot be customized when `count` is `0`. [#39062](https://github.com/ant-design/ant-design/pull/39062) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 Fix Card.Meta width is not 100%. [#39039](https://github.com/ant-design/ant-design/pull/39039) [@justanotheranonymoususer](https://github.com/justanotheranonymoususer)
+- 🐞 Fix TimePicker pass to 'popupClassName' will display unexpected warning. [#39010](https://github.com/ant-design/ant-design/pull/39010) [@kiner-tang](https://github.com/kiner-tang)
+- 💄 Fix Steps set `size="small"` with progress not fully display. [#39103](https://github.com/ant-design/ant-design/pull/39103) [@Wxh16144](https://github.com/Wxh16144)
+
+## 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,51 @@ timeline: true

 ---

+## 4.24.6
+
+`2022-12-26`
+
+- 🆕 Dropdown 组件支持 `autoAdjustOverflow` 属性。 (#39741)[62cefca](https://github.com/ant-design/ant-design/commit/62cefca)
+- 🐞 修复 Row 组件 `justify` 和 `align` 属性，动态改变不生效的问题。[#39706](https://github.com/ant-design/ant-design/pull/39706) [@candy4290](https://github.com/candy4290)
+- 🐞 修复 Drawer 组件 `open` 为 false 时无法关闭的问题。[#39561](https://github.com/ant-design/ant-design/pull/39561)
+- 🐞 修复 Divider `horizontal` 在 flex 布局下的对齐问题。[#39334](https://github.com/ant-design/ant-design/pull/39334)
+- 💄 修复 `Dropdown` 组件 `danger` 和 `disabled` 属性同时使用样式问题。[#39434](https://github.com/ant-design/ant-design/pull/39434) [@Wxh16144](https://github.com/Wxh16144)
+- ⌨️ 重置 Table 中列的 aria-label 属性值。[#39747](https://github.com/ant-design/ant-design/pull/39747) [@kiner-tang](https://github.com/kiner-tang)
+- 🌐 国际化
+  - 🇺🇿 支持 uz_UZ 语言。[#39353](https://github.com/ant-design/ant-design/pull/39353) [@nodkz](https://github.com/nodkz)
+
+## 4.24.5
+
+`2022-12-05`
+
+- 🐞 修复 Menu.Item 配置 `disabled` 属性时其中的 a 标签仍可以点击的问题。[aa8d7f5](https://github.com/ant-design/ant-design/commit/aa8d7f5) [@二货机器人](https://github.com/二货机器人)
+- 💄 优化 Popconfirm 内容换行时的图标位置。[#39027](https://github.com/ant-design/ant-design/pull/39027) [@justanotheranonymoususer](https://github.com/justanotheranonymoususer)
+- 🐞 修复 Badge `count` 为 `0` 时无法自定义颜色问题。[#39062](https://github.com/ant-design/ant-design/pull/39062) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 修复 Card.Meta 宽度没有默认填满容器的问题。[#39039](https://github.com/ant-design/ant-design/pull/39039) [@justanotheranonymoususer](https://github.com/justanotheranonymoususer)
+- 🐞 解决当 TimePicker 传递 `popupClassName` 属性会显示异常警告的问题。[#39010](https://github.com/ant-design/ant-design/pull/39010) [@kiner-tang](https://github.com/kiner-tang)
+- 💄 修复 Steps `size="small"` 第一项带有进度时，进度条显示不全的问题。[#39103](https://github.com/ant-design/ant-design/pull/39103) [@Wxh16144](https://github.com/Wxh16144)
+
+## 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 +81,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/badge/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/badge/tests/snapshots/demo-extend.test.ts.snap
@@ -1332,6 +1332,78 @@ Array [
      style="background:#fa541c"
    />
  </span>,
+  <span
+    class="ant-badge ant-badge-not-a-wrapper"
+  >
+    <sup
+      class="ant-scroll-number ant-badge-count"
+      data-show="true"
+      title="0"
+    >
+      0
+    </sup>
+  </span>,
+  <span
+    class="ant-badge ant-badge-not-a-wrapper"
+  >
+    <sup
+      class="ant-scroll-number ant-badge-count ant-badge-status-blue"
+      data-show="true"
+      title="0"
+    >
+      0
+    </sup>
+  </span>,
+  <span
+    class="ant-badge ant-badge-not-a-wrapper"
+  >
+    <sup
+      class="ant-scroll-number ant-badge-count"
+      data-show="true"
+      style="background:#f0f"
+      title="0"
+    >
+      0
+    </sup>
+  </span>,
+  <span
+    class="ant-badge"
+  >
+    <span
+      class="ant-avatar ant-avatar-lg ant-avatar-square"
+    >
+      <span
+        class="ant-avatar-string"
+        style="opacity:0"
+      />
+    </span>
+    <sup
+      class="ant-scroll-number ant-badge-count"
+      data-show="true"
+      title="0"
+    >
+      0
+    </sup>
+  </span>,
+  <span
+    class="ant-badge"
+  >
+    <span
+      class="ant-avatar ant-avatar-lg ant-avatar-square"
+    >
+      <span
+        class="ant-avatar-string"
+        style="opacity:0"
+      />
+    </span>
+    <sup
+      class="ant-scroll-number ant-badge-count ant-badge-status-blue"
+      data-show="true"
+      title="0"
+    >
+      0
+    </sup>
+  </span>,
 ]
 `;

@@ -1357,6 +1429,42 @@ exports[`renders ./components/badge/demo/no-wrapper.md extend context correctly
      />
    </button>
  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px"
+  >
+    <span
+      class="ant-badge ant-badge-not-a-wrapper"
+    >
+      <sup
+        class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
+        data-show="true"
+        style="background:#faad14"
+        title="11"
+      >
+        <span
+          class="ant-scroll-number-only"
+          style="transition:none"
+        >
+          <span
+            class="ant-scroll-number-only-unit current"
+          >
+            1
+          </span>
+        </span>
+        <span
+          class="ant-scroll-number-only"
+          style="transition:none"
+        >
+          <span
+            class="ant-scroll-number-only-unit current"
+          >
+            1
+          </span>
+        </span>
+      </sup>
+    </span>
+  </div>
  <div
    class="ant-space-item"
    style="margin-right:8px"
--- a/components/badge/tests/snapshots/demo.test.ts.snap
+++ b/components/badge/tests/snapshots/demo.test.ts.snap
@@ -1332,6 +1332,78 @@ Array [
      style="background:#fa541c"
    />
  </span>,
+  <span
+    class="ant-badge ant-badge-not-a-wrapper"
+  >
+    <sup
+      class="ant-scroll-number ant-badge-count"
+      data-show="true"
+      title="0"
+    >
+      0
+    </sup>
+  </span>,
+  <span
+    class="ant-badge ant-badge-not-a-wrapper"
+  >
+    <sup
+      class="ant-scroll-number ant-badge-count ant-badge-status-blue"
+      data-show="true"
+      title="0"
+    >
+      0
+    </sup>
+  </span>,
+  <span
+    class="ant-badge ant-badge-not-a-wrapper"
+  >
+    <sup
+      class="ant-scroll-number ant-badge-count"
+      data-show="true"
+      style="background:#f0f"
+      title="0"
+    >
+      0
+    </sup>
+  </span>,
+  <span
+    class="ant-badge"
+  >
+    <span
+      class="ant-avatar ant-avatar-lg ant-avatar-square"
+    >
+      <span
+        class="ant-avatar-string"
+        style="opacity:0"
+      />
+    </span>
+    <sup
+      class="ant-scroll-number ant-badge-count"
+      data-show="true"
+      title="0"
+    >
+      0
+    </sup>
+  </span>,
+  <span
+    class="ant-badge"
+  >
+    <span
+      class="ant-avatar ant-avatar-lg ant-avatar-square"
+    >
+      <span
+        class="ant-avatar-string"
+        style="opacity:0"
+      />
+    </span>
+    <sup
+      class="ant-scroll-number ant-badge-count ant-badge-status-blue"
+      data-show="true"
+      title="0"
+    >
+      0
+    </sup>
+  </span>,
 ]
 `;

@@ -1357,6 +1429,42 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
      />
    </button>
  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px"
+  >
+    <span
+      class="ant-badge ant-badge-not-a-wrapper"
+    >
+      <sup
+        class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
+        data-show="true"
+        style="background:#faad14"
+        title="11"
+      >
+        <span
+          class="ant-scroll-number-only"
+          style="transition:none"
+        >
+          <span
+            class="ant-scroll-number-only-unit current"
+          >
+            1
+          </span>
+        </span>
+        <span
+          class="ant-scroll-number-only"
+          style="transition:none"
+        >
+          <span
+            class="ant-scroll-number-only-unit current"
+          >
+            1
+          </span>
+        </span>
+      </sup>
+    </span>
+  </div>
  <div
    class="ant-space-item"
    style="margin-right:8px"
--- a/components/badge/tests/snapshots/index.test.tsx.snap
+++ b/components/badge/tests/snapshots/index.test.tsx.snap
@@ -1,5 +1,58 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

+exports[`Badge Badge should display 0 when count is 0 1`] = `
+<div>
+  <span
+    class="ant-badge ant-badge-not-a-wrapper"
+  >
+    <sup
+      class="ant-scroll-number ant-badge-count"
+      data-show="true"
+      title="0"
+    >
+      0
+    </sup>
+  </span>
+  <span
+    class="ant-badge ant-badge-not-a-wrapper"
+  >
+    <sup
+      class="ant-scroll-number ant-badge-count ant-badge-status-blue"
+      data-show="true"
+      title="0"
+    >
+      0
+    </sup>
+  </span>
+  <span
+    class="ant-badge ant-badge-not-a-wrapper"
+  >
+    <sup
+      class="ant-scroll-number ant-badge-count"
+      data-show="true"
+      style="background: rgb(255, 0, 255);"
+      title="0"
+    >
+      0
+    </sup>
+  </span>
+  <span
+    class="ant-badge"
+  >
+    <div>
+      children
+    </div>
+    <sup
+      class="ant-scroll-number ant-badge-count"
+      data-show="true"
+      title="0"
+    >
+      0
+    </sup>
+  </span>
+</div>
+`;
+
 exports[`Badge render Badge status/color when contains children 1`] = `
 <div>
  <span
--- a/components/badge/tests/index.test.tsx
+++ b/components/badge/tests/index.test.tsx
@@ -185,4 +185,21 @@ describe('Badge', () => {

    expect(container.querySelectorAll('.ant-badge > .ant-badge-status-text')).toHaveLength(0);
  });
+
+  // https://github.com/ant-design/ant-design/issues/38965
+  it('Badge should display 0 when count is 0', () => {
+    const { container } = render(
+      <>
+        <Badge count={0} showZero />
+        <Badge count={0} showZero color="blue" />
+        <Badge count={0} showZero color="#f0f" />
+        <Badge count={0} showZero>
+          <div>children</div>
+        </Badge>
+      </>,
+    );
+
+    expect(container).toMatchSnapshot();
+    expect(container.querySelectorAll('[title="0"]')).toHaveLength(4);
+  });
 });
--- a/components/badge/demo/mix.md
+++ b/components/badge/demo/mix.md
@@ -44,6 +44,15 @@ const App: React.FC = () => (
    <Badge dot color="#fa541c">
      <Avatar shape="square" size="large" />
    </Badge>
+    <Badge count={0} showZero />
+    <Badge count={0} showZero color="blue" />
+    <Badge count={0} showZero color="#f0f" />
+    <Badge count={0} showZero>
+      <Avatar shape="square" size="large" />
+    </Badge>
+    <Badge count={0} showZero color="blue">
+      <Avatar shape="square" size="large" />
+    </Badge>
  </>
 );

--- a/components/badge/demo/no-wrapper.md
+++ b/components/badge/demo/no-wrapper.md
@@ -26,6 +26,7 @@ const App: React.FC = () => {
  return (
    <Space>
      <Switch checked={show} onChange={() => setShow(!show)} />
+      <Badge count={show ? 11 : 0} showZero color="#faad14" />
      <Badge count={show ? 25 : 0} />
      <Badge count={show ? <ClockCircleOutlined style={{ color: '#f5222d' }} /> : 0} />
      <Badge
--- a/components/badge/index.tsx
+++ b/components/badge/index.tsx
@@ -65,7 +65,7 @@ const Badge: CompoundedComponent = ({

  const isZero = numberedDisplayCount === '0' || numberedDisplayCount === 0;

-  const ignoreCount = count === null || isZero;
+  const ignoreCount = count === null || (isZero && !showZero);

  const hasStatus =
    ((status !== null && status !== undefined) || (color !== null && color !== undefined)) &&
--- a/components/calendar/locale/uz_UZ.tsx
+++ b/components/calendar/locale/uz_UZ.tsx
@@ -0,0 +1,3 @@
+import uzUZ from '../../date-picker/locale/uz_UZ';
+
+export default uzUZ;
--- a/components/card/style/index.less
+++ b/components/card/style/index.less
@@ -243,6 +243,7 @@
    }

    &-detail {
+      flex: 1;
      overflow: hidden;

      > div:not(:last-child) {
--- 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/snapshots/components.test.tsx.snap
+++ b/components/config-provider/tests/snapshots/components.test.tsx.snap
@@ -26947,7 +26947,7 @@ exports[`ConfigProvider components Table configProvider 1`] = `
              >
                <tr>
                  <th
-                    aria-label="this column's title is Name,this column is sortable"
+                    aria-label="Name"
                    class="config-table-cell config-table-column-has-sorters"
                    tabindex="0"
                  >
@@ -27253,7 +27253,7 @@ exports[`ConfigProvider components Table configProvider componentDisabled 1`] =
              >
                <tr>
                  <th
-                    aria-label="this column's title is Name,this column is sortable"
+                    aria-label="Name"
                    class="config-table-cell config-table-column-has-sorters"
                    tabindex="0"
                  >
@@ -27561,7 +27561,7 @@ exports[`ConfigProvider components Table configProvider componentSize large 1`]
              >
                <tr>
                  <th
-                    aria-label="this column's title is Name,this column is sortable"
+                    aria-label="Name"
                    class="config-table-cell config-table-column-has-sorters"
                    tabindex="0"
                  >
@@ -27867,7 +27867,7 @@ exports[`ConfigProvider components Table configProvider componentSize middle 1`]
              >
                <tr>
                  <th
-                    aria-label="this column's title is Name,this column is sortable"
+                    aria-label="Name"
                    class="config-table-cell config-table-column-has-sorters"
                    tabindex="0"
                  >
@@ -28173,7 +28173,7 @@ exports[`ConfigProvider components Table configProvider virtual and dropdownMatc
              >
                <tr>
                  <th
-                    aria-label="this column's title is Name,this column is sortable"
+                    aria-label="Name"
                    class="ant-table-cell ant-table-column-has-sorters"
                    tabindex="0"
                  >
@@ -28479,7 +28479,7 @@ exports[`ConfigProvider components Table normal 1`] = `
              >
                <tr>
                  <th
-                    aria-label="this column's title is Name,this column is sortable"
+                    aria-label="Name"
                    class="ant-table-cell ant-table-column-has-sorters"
                    tabindex="0"
                  >
@@ -28785,7 +28785,7 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
              >
                <tr>
                  <th
-                    aria-label="this column's title is Name,this column is sortable"
+                    aria-label="Name"
                    class="prefix-Table-cell prefix-Table-column-has-sorters"
                    tabindex="0"
                  >
@@ -40627,7 +40627,7 @@ exports[`ConfigProvider components Tree configProvider 1`] = `
    <div
      aria-hidden="true"
      class="config-tree-treenode"
-      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
    >
      <div
        class="config-tree-indent"
@@ -40692,7 +40692,7 @@ exports[`ConfigProvider components Tree configProvider 1`] = `
    <div
      aria-hidden="true"
      class="config-tree-treenode"
-      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
    >
      <div
        class="config-tree-indent"
@@ -40785,7 +40785,7 @@ exports[`ConfigProvider components Tree configProvider componentDisabled 1`] = `
    <div
      aria-hidden="true"
      class="config-tree-treenode"
-      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
    >
      <div
        class="config-tree-indent"
@@ -40850,7 +40850,7 @@ exports[`ConfigProvider components Tree configProvider componentDisabled 1`] = `
    <div
      aria-hidden="true"
      class="config-tree-treenode"
-      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
    >
      <div
        class="config-tree-indent"
@@ -40943,7 +40943,7 @@ exports[`ConfigProvider components Tree configProvider componentSize large 1`] =
    <div
      aria-hidden="true"
      class="config-tree-treenode"
-      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
    >
      <div
        class="config-tree-indent"
@@ -41008,7 +41008,7 @@ exports[`ConfigProvider components Tree configProvider componentSize large 1`] =
    <div
      aria-hidden="true"
      class="config-tree-treenode"
-      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
    >
      <div
        class="config-tree-indent"
@@ -41101,7 +41101,7 @@ exports[`ConfigProvider components Tree configProvider componentSize middle 1`]
    <div
      aria-hidden="true"
      class="config-tree-treenode"
-      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
    >
      <div
        class="config-tree-indent"
@@ -41166,7 +41166,7 @@ exports[`ConfigProvider components Tree configProvider componentSize middle 1`]
    <div
      aria-hidden="true"
      class="config-tree-treenode"
-      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
    >
      <div
        class="config-tree-indent"
@@ -41259,7 +41259,7 @@ exports[`ConfigProvider components Tree configProvider virtual and dropdownMatch
    <div
      aria-hidden="true"
      class="ant-tree-treenode"
-      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
    >
      <div
        class="ant-tree-indent"
@@ -41324,7 +41324,7 @@ exports[`ConfigProvider components Tree configProvider virtual and dropdownMatch
    <div
      aria-hidden="true"
      class="ant-tree-treenode"
-      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
    >
      <div
        class="ant-tree-indent"
@@ -41417,7 +41417,7 @@ exports[`ConfigProvider components Tree normal 1`] = `
    <div
      aria-hidden="true"
      class="ant-tree-treenode"
-      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
    >
      <div
        class="ant-tree-indent"
@@ -41482,7 +41482,7 @@ exports[`ConfigProvider components Tree normal 1`] = `
    <div
      aria-hidden="true"
      class="ant-tree-treenode"
-      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
    >
      <div
        class="ant-tree-indent"
@@ -41575,7 +41575,7 @@ exports[`ConfigProvider components Tree prefixCls 1`] = `
    <div
      aria-hidden="true"
      class="prefix-Tree-treenode"
-      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
    >
      <div
        class="prefix-Tree-indent"
@@ -41640,7 +41640,7 @@ exports[`ConfigProvider components Tree prefixCls 1`] = `
    <div
      aria-hidden="true"
      class="prefix-Tree-treenode"
-      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
    >
      <div
        class="prefix-Tree-indent"
@@ -41769,7 +41769,7 @@ exports[`ConfigProvider components TreeSelect configProvider 1`] = `
            <div
              aria-hidden="true"
              class="config-select-tree-treenode"
-              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
            >
              <div
                class="config-select-tree-indent"
@@ -41967,7 +41967,7 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize large
            <div
              aria-hidden="true"
              class="config-select-tree-treenode"
-              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
            >
              <div
                class="config-select-tree-indent"
@@ -42104,7 +42104,7 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize middl
            <div
              aria-hidden="true"
              class="config-select-tree-treenode"
-              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
            >
              <div
                class="config-select-tree-indent"
@@ -42241,7 +42241,7 @@ exports[`ConfigProvider components TreeSelect configProvider virtual and dropdow
            <div
              aria-hidden="true"
              class="ant-select-tree-treenode"
-              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
            >
              <div
                class="ant-select-tree-indent"
@@ -42378,7 +42378,7 @@ exports[`ConfigProvider components TreeSelect normal 1`] = `
            <div
              aria-hidden="true"
              class="ant-select-tree-treenode"
-              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
            >
              <div
                class="ant-select-tree-indent"
@@ -42515,7 +42515,7 @@ exports[`ConfigProvider components TreeSelect prefixCls 1`] = `
            <div
              aria-hidden="true"
              class="prefix-TreeSelect-tree-treenode"
-              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
            >
              <div
                class="prefix-TreeSelect-tree-indent"
--- 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/date-picker/tests/DatePicker.test.tsx
+++ b/components/date-picker/tests/DatePicker.test.tsx
@@ -227,6 +227,12 @@ describe('DatePicker', () => {
      'Warning: [antd: DatePicker] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
    );
  });
+  it('DatePicker should show warning when use popupClassName', () => {
+    render(<DatePicker popupClassName="myCustomClassName" />);
+    expect(errorSpy).not.toHaveBeenCalledWith(
+      'Warning: [antd: DatePicker] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+    );
+  });

  it('RangePicker should show warning when use dropdownClassName', () => {
    render(<DatePicker.RangePicker dropdownClassName="myCustomClassName" />);
@@ -235,6 +241,13 @@ describe('DatePicker', () => {
    );
  });

+  it('RangePicker should show warning when use popupClassName', () => {
+    render(<DatePicker.RangePicker popupClassName="myCustomClassName" />);
+    expect(errorSpy).not.toHaveBeenCalledWith(
+      'Warning: [antd: RangePicker] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+    );
+  });
+
  it('DatePicker.RangePicker with defaultPickerValue and showTime', () => {
    const startDate = moment('1982-02-12');
    const endDate = moment('1982-02-22');
--- a/components/date-picker/generatePicker/generateRangePicker.tsx
+++ b/components/date-picker/generatePicker/generateRangePicker.tsx
@@ -109,7 +109,6 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
              }
              disabled={mergedDisabled}
              ref={innerRef}
-              dropdownClassName={popupClassName || dropdownClassName}
              dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
              placeholder={getRangePlaceholder(picker, locale, placeholder)}
              suffixIcon={suffixNode}
@@ -141,6 +140,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
              generateConfig={generateConfig}
              components={Components}
              direction={direction}
+              dropdownClassName={popupClassName || dropdownClassName}
            />
          );
        }}
--- a/components/date-picker/generatePicker/generateSinglePicker.tsx
+++ b/components/date-picker/generatePicker/generateSinglePicker.tsx
@@ -95,7 +95,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<

        warning(
          !dropdownClassName,
-          'DatePicker',
+          mergedPicker === 'time' ? 'TimePicker' : 'DatePicker',
          '`dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
        );
        // ===================== Size =====================
@@ -128,7 +128,6 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
                  placeholder={getPlaceholder(mergedPicker, locale, placeholder)}
                  suffixIcon={suffixNode}
                  dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
-                  dropdownClassName={popupClassName || dropdownClassName}
                  clearIcon={<CloseCircleFilled />}
                  prevIcon={<span className={`${prefixCls}-prev-icon`} />}
                  nextIcon={<span className={`${prefixCls}-next-icon`} />}
@@ -159,6 +158,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
                  components={Components}
                  direction={direction}
                  disabled={mergedDisabled}
+                  dropdownClassName={popupClassName || dropdownClassName}
                />
              );
            }}
--- a/components/date-picker/locale/uz_UZ.tsx
+++ b/components/date-picker/locale/uz_UZ.tsx
@@ -0,0 +1,27 @@
+import CalendarLocale from 'rc-picker/lib/locale/uz_UZ';
+import TimePickerLocale from '../../time-picker/locale/uz_UZ';
+import type { PickerLocale } from '../generatePicker';
+
+// Merge into a locale object
+const locale: PickerLocale = {
+  lang: {
+    placeholder: 'Sanani tanlang',
+    yearPlaceholder: 'Yilni tanlang',
+    quarterPlaceholder: 'Chorakni tanlang',
+    monthPlaceholder: 'Oyni tanlang',
+    weekPlaceholder: 'Haftani tanlang',
+    rangePlaceholder: ['Bosh sana', 'Oxirigi sana'],
+    rangeYearPlaceholder: ['Yilning boshi', 'Yilning oxiri'],
+    rangeMonthPlaceholder: ['Oyning boshi', 'Oyning oxiri'],
+    rangeWeekPlaceholder: ['Haftaning boshi', 'Haftaning oxiri'],
+    ...CalendarLocale,
+  },
+  timePickerLocale: {
+    ...TimePickerLocale,
+  },
+};
+
+// All settings at:
+// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
+
+export default locale;
--- a/components/divider/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/divider/tests/snapshots/demo-extend.test.ts.snap
@@ -33,6 +33,21 @@ Array [
    role="separator"
    style="height:60px;border-color:#7cb305"
  />,
+  <div
+    style="display:flex;flex-direction:column;height:50px;box-shadow:0 0 1px red"
+  >
+    <div
+      class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
+      role="separator"
+      style="background:rgba(0,255,0,0.05)"
+    >
+      <span
+        class="ant-divider-inner-text"
+      >
+        Text
+      </span>
+    </div>
+  </div>,
 ]
 `;

--- a/components/divider/tests/snapshots/demo.test.ts.snap
+++ b/components/divider/tests/snapshots/demo.test.ts.snap
@@ -33,6 +33,21 @@ Array [
    role="separator"
    style="height:60px;border-color:#7cb305"
  />,
+  <div
+    style="display:flex;flex-direction:column;height:50px;box-shadow:0 0 1px red"
+  >
+    <div
+      class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
+      role="separator"
+      style="background:rgba(0,255,0,0.05)"
+    >
+      <span
+        class="ant-divider-inner-text"
+      >
+        Text
+      </span>
+    </div>
+  </div>,
 ]
 `;

--- a/components/divider/demo/customize-style.md
+++ b/components/divider/demo/customize-style.md
@@ -27,6 +27,12 @@ const App: React.FC = () => (
    </Divider>
    <Divider type="vertical" style={{ height: 60, borderColor: '#7cb305' }} />
    <Divider type="vertical" style={{ height: 60, borderColor: '#7cb305' }} dashed />
+
+    <div style={{ display: 'flex', flexDirection: 'column', height: 50, boxShadow: '0 0 1px red' }}>
+      <Divider style={{ background: 'rgba(0,255,0,0.05)' }} orientation="left">
+        Text
+      </Divider>
+    </div>
  </>
 );

--- a/components/divider/style/index.less
+++ b/components/divider/style/index.less
@@ -29,6 +29,7 @@

  &-horizontal&-with-text {
    display: flex;
+    align-items: center;
    margin: 16px 0;
    color: @heading-color;
    font-weight: 500;
@@ -41,7 +42,6 @@
    &::before,
    &::after {
      position: relative;
-      top: 50%;
      width: 50%;
      border-top: @border-width-base solid transparent;
      // Chrome not accept `inherit` in `border-top`
@@ -54,24 +54,20 @@

  &-horizontal&-with-text-left {
    &::before {
-      top: 50%;
      width: @divider-orientation-margin;
    }

    &::after {
-      top: 50%;
      width: 100% - @divider-orientation-margin;
    }
  }

  &-horizontal&-with-text-right {
    &::before {
-      top: 50%;
      width: 100% - @divider-orientation-margin;
    }

    &::after {
-      top: 50%;
      width: @divider-orientation-margin;
    }
  }
--- a/components/drawer/index.en-US.md
+++ b/components/drawer/index.en-US.md
@@ -33,7 +33,7 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
 | footer | The footer for Drawer | ReactNode | - |  |
 | footerStyle | Style of the drawer footer part | CSSProperties | - |  |
 | forceRender | Prerender Drawer component forcely | boolean | false |  |
-| getContainer | mounted node and display window for Drawer | HTMLElement \| () => HTMLElement \| Selectors \| false | body |  |
+| getContainer | mounted node and display window for Drawer. To match React 18 concurrent requirement, `getContainer` should always return same dom since `4.24.x` | HTMLElement \| () => HTMLElement \| Selectors \| false | body |  |
 | headerStyle | Style of the drawer header part | CSSProperties | - |  |
 | height | Placement is `top` or `bottom`, height of the Drawer dialog | string \| number | 378 |  |
 | keyboard | Whether support press esc to close | boolean | true |  |
--- 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/index.zh-CN.md
+++ b/components/drawer/index.zh-CN.md
@@ -32,7 +32,7 @@ cover: https://img.alicdn.com/imgextra/i4/O1CN019djdZP1OHwXSRGCOW_!!600000000168
 | footer | 抽屉的页脚 | ReactNode | - |  |
 | footerStyle | 抽屉页脚部件的样式 | CSSProperties | - |  |
 | forceRender | 预渲染 Drawer 内元素 | boolean | false |  |
-| getContainer | 指定 Drawer 挂载的节点，**并在容器内展现**，`false` 为挂载在当前位置 | HTMLElement \| () => HTMLElement \| Selectors \| false | body |  |
+| getContainer | 指定 Drawer 挂载的节点，**并在容器内展现**，`false` 为挂载在当前位置。为符合 React 18 concurrent 标准，从 `4.20.x` 起 `getContainer` 需要始终返回唯一 dom 节点 | HTMLElement \| () => HTMLElement \| Selectors \| false | body |  |
 | headerStyle | 用于设置 Drawer 头部的样式 | CSSProperties | - |  |
 | height | 高度, 在 `placement` 为 `top` 或 `bottom` 时使用 | string \| number | 378 |  |
 | keyboard | 是否支持键盘 esc 关闭 | boolean | true |  |
--- 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
@@ -8,11 +8,13 @@ import Menu from '../menu';
 import type { MenuProps } from '../menu';
 import { ConfigContext } from '../config-provider';
 import { OverrideProvider } from '../menu/OverrideContext';
+import type { AdjustOverflow } from '../_util/placements';
 import getPlacements from '../_util/placements';
 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',
@@ -69,6 +71,7 @@ export interface DropdownProps {
  mouseLeaveDelay?: number;
  openClassName?: string;
  children?: React.ReactNode;
+  autoAdjustOverflow?: boolean | AdjustOverflow;

  // Deprecated
  /** @deprecated Please use `menu` instead */
@@ -83,7 +86,7 @@ interface DropdownInterface extends React.FC<DropdownProps> {
  Button: typeof DropdownButton;
 }

-const Dropdown: DropdownInterface = props => {
+const Dropdown: DropdownInterface = (props) => {
  const {
    getPopupContainer: getContextPopupContainer,
    getPrefixCls,
@@ -157,6 +160,7 @@ const Dropdown: DropdownInterface = props => {
    onOpenChange,
    mouseEnterDelay = 0.15,
    mouseLeaveDelay = 0.1,
+    autoAdjustOverflow = true,
  } = props;

  const prefixCls = getPrefixCls('dropdown', customizePrefixCls);
@@ -197,7 +201,7 @@ const Dropdown: DropdownInterface = props => {

  const builtinPlacements = getPlacements({
    arrowPointAtCenter: typeof arrow === 'object' && arrow.pointAtCenter,
-    autoAdjustOverflow: true,
+    autoAdjustOverflow,
  });

  const onMenuClick = React.useCallback(() => {
@@ -244,7 +248,7 @@ const Dropdown: DropdownInterface = props => {
          );
        }}
      >
-        {overlayNode}
+        <NoCompactStyle>{overlayNode}</NoCompactStyle>
      </OverrideProvider>
    );
  };
--- a/components/dropdown/index.en-US.md
+++ b/components/dropdown/index.en-US.md
@@ -51,6 +51,7 @@ return (
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | arrow | Whether the dropdown arrow should be visible | boolean \| { pointAtCenter: boolean } | false |  |
+| autoAdjustOverflow | Whether to adjust dropdown placement automatically when dropdown is off screen | boolean | true | >= 4.24.5 < 5.0.0 \|\| >= 5.2.0 |
 | autoFocus | Focus element in `overlay` when opened | boolean | false | 4.21.0 |
 | disabled | Whether the dropdown menu is disabled | boolean | - |  |
 | destroyPopupOnHide | Whether destroy dropdown when hidden | boolean | false |  |
--- a/components/dropdown/index.zh-CN.md
+++ b/components/dropdown/index.zh-CN.md
@@ -55,6 +55,7 @@ return (
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | arrow | 下拉框箭头是否显示 | boolean \| { pointAtCenter: boolean } | false |  |
+| autoAdjustOverflow | 下拉框被遮挡时自动调整位置 | boolean | true | >= 4.24.5 < 5.0.0 \|\| >= 5.2.0 |
 | autoFocus | 打开后自动聚焦下拉框 | boolean | false | 4.21.0 |
 | disabled | 菜单是否禁用 | boolean | - |  |
 | destroyPopupOnHide | 关闭后是否销毁 Dropdown | boolean | false |  |
--- a/components/dropdown/style/index.less
+++ b/components/dropdown/style/index.less
@@ -221,7 +221,7 @@
        background-color: @item-hover-bg;
      }

-      &-disabled {
+      &&-disabled {
        color: @disabled-color;
        cursor: not-allowed;

--- a/components/form/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/form/tests/snapshots/demo-extend.test.ts.snap
@@ -2764,7 +2764,7 @@ Array [
                          <div
                            aria-hidden="true"
                            class="ant-select-tree-treenode"
-                            style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+                            style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
                          >
                            <div
                              class="ant-select-tree-indent"
@@ -9858,7 +9858,7 @@ exports[`renders ./components/form/demo/size.md extend context correctly 1`] = `
                        <div
                          aria-hidden="true"
                          class="ant-select-tree-treenode"
-                          style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+                          style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
                        >
                          <div
                            class="ant-select-tree-indent"
@@ -24379,7 +24379,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
                        <div
                          aria-hidden="true"
                          class="ant-select-tree-treenode"
-                          style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+                          style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
                        >
                          <div
                            class="ant-select-tree-indent"
--- a/components/grid/tests/index.test.tsx
+++ b/components/grid/tests/index.test.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Col, Row } from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import ResponsiveObserve from '../../_util/responsiveObserve';
 import useBreakpoint from '../hooks/useBreakpoint';
-import { render, act } from '../../../tests/utils';
+import { render, act, fireEvent } from '../../../tests/utils';

 describe('Grid', () => {
  mountTest(Row);
@@ -183,4 +183,26 @@ describe('Grid', () => {
    const { container: container3 } = render(<Row justify={{ lg: 'center' }} />);
    expect(container3.innerHTML).not.toContain('ant-row-center');
  });
+
+  // https://github.com/ant-design/ant-design/issues/39690
+  it('Justify and align properties should reactive for Row', () => {
+    const ReactiveTest = () => {
+      const [justify, setJustify] = useState<any>('start');
+      return (
+        <>
+          <Row justify={justify} align="bottom">
+            <div>button1</div>
+            <div>button</div>
+          </Row>
+          <span onClick={() => setJustify('end')} />
+        </>
+      );
+    };
+    const { container } = render(<ReactiveTest />);
+    expect(container.innerHTML).toContain('ant-row-start');
+    act(() => {
+      fireEvent.click(container.querySelector('span')!);
+    });
+    expect(container.innerHTML).toContain('ant-row-end');
+  });
 });
--- a/components/grid/row.tsx
+++ b/components/grid/row.tsx
@@ -32,6 +32,9 @@ function useMergePropByScreen(oriProp: RowProps['align'] | RowProps['justify'],
  const [prop, setProp] = React.useState(typeof oriProp === 'string' ? oriProp : '');

  const clacMergeAlignOrJustify = () => {
+    if (typeof oriProp === 'string') {
+      setProp(oriProp);
+    }
    if (typeof oriProp !== 'object') {
      return;
    }
--- 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"
@@ -69,12 +209,11 @@ exports[`Image Default Group preview props 1`] = `
            >
              <div
                class="ant-image-preview-img-wrapper"
-                style="transform: translate3d(0px, 0px, 0);"
              >
                <img
                  class="ant-image-preview-img"
                  src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
-                  style="transform: scale3d(1, 1, 1) rotate(0deg);"
+                  style="transform: translate3d(0px, 0px, 0) scale3d(1, 1, 1) rotate(0deg);"
                />
              </div>
            </div>
@@ -88,148 +227,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/locale-provider/tests/snapshots/index.test.tsx.snap
+++ b/components/locale-provider/tests/snapshots/index.test.tsx.snap
--- a/components/locale-provider/tests/index.test.tsx
+++ b/components/locale-provider/tests/index.test.tsx
@@ -80,6 +80,7 @@ import tkTK from '../tk_TK';
 import trTR from '../tr_TR';
 import ukUA from '../uk_UA';
 import urPK from '../ur_PK';
+import uzUZ from '../uz_UZ';
 import viVN from '../vi_VN';
 import zhCN from '../zh_CN';
 import zhHK from '../zh_HK';
@@ -146,6 +147,7 @@ const locales = [
  trTR,
  tkTK,
  ukUA,
+  uzUZ,
  viVN,
  idID,
  lvLV,
@@ -204,7 +206,7 @@ describe('Locale Provider', () => {
    MockDate.reset();
  });

-  locales.forEach(locale => {
+  locales.forEach((locale) => {
    it(`should display the text as ${locale.locale}`, () => {
      const { container } = render(
        <LocaleProvider locale={locale}>
@@ -216,7 +218,7 @@ describe('Locale Provider', () => {
  });

  it('should change locale of Modal.xxx', () => {
-    locales.forEach(locale => {
+    locales.forEach((locale) => {
      const { container } = render(
        <LocaleProvider locale={locale}>
          <Modal title="Locale Modal" visible getContainer={false}>
--- a/components/locale-provider/uz_UZ.tsx
+++ b/components/locale-provider/uz_UZ.tsx
@@ -0,0 +1,3 @@
+import locale from '../locale/uz_UZ';
+
+export default locale;
--- a/components/locale/uz_UZ.tsx
+++ b/components/locale/uz_UZ.tsx
@@ -0,0 +1,133 @@
+/* eslint-disable no-template-curly-in-string */
+
+import Pagination from 'rc-pagination/lib/locale/uz_UZ';
+import Calendar from '../calendar/locale/uz_UZ';
+import DatePicker from '../date-picker/locale/uz_UZ';
+import type { Locale } from '../locale-provider';
+import TimePicker from '../time-picker/locale/uz_UZ';
+
+const typeTemplate: string = '${label} ${type}-ning usulidan emas';
+
+const localeValues: Locale = {
+  locale: 'uz',
+  Pagination,
+  DatePicker,
+  TimePicker,
+  Calendar,
+  global: {
+    placeholder: 'Iltimos tanlang',
+  },
+  Table: {
+    filterTitle: 'Filtr',
+    filterConfirm: 'OK',
+    filterReset: 'Qayta tiklash',
+    filterEmptyText: 'Filtrsiz',
+    emptyText: "Ma'lumot yo'q",
+    selectAll: 'Hammasini tanlash',
+    selectInvert: 'Tanlovni kiritish',
+    selectNone: "Ma'lumotni ochirib tashlash",
+    selectionAll: "Ma'lumotning hammasini tanlash",
+    sortTitle: 'Saralash',
+    expand: 'Satirni kengaytirish',
+    collapse: 'Satirni qisqartirish',
+    triggerDesc: 'Kamayib borish tartibida saralashni bosing',
+    triggerAsc: "Ko'payib borish tartibida saralashni bosing",
+    cancelSort: 'Saralashni yakunlash uchun bosing',
+  },
+  Modal: {
+    okText: 'OK',
+    cancelText: 'Bekor qilish',
+    justOkText: 'OK',
+  },
+  Popconfirm: {
+    okText: 'OK',
+    cancelText: 'Bekor qilish',
+  },
+  Transfer: {
+    titles: ['', ''],
+    searchPlaceholder: 'Qidirish',
+    itemUnit: 'elem.',
+    itemsUnit: 'elem.',
+    remove: "O'chirish",
+    selectAll: "Ma'lumotning hammasini tanlash",
+    selectCurrent: 'Joriy sahifani tanlang',
+    selectInvert: "Kamayib borish tartibida ko'rsatish",
+    removeAll: "Ma'lumotning hammasini ochirish",
+    removeCurrent: 'Joriy sahifani ochirish',
+  },
+  Upload: {
+    uploading: 'Yuklash...',
+    removeFile: 'Faylni ochirish',
+    uploadError: 'Yuklashda xatolik yuz berdi',
+    previewFile: "Faylni oldindan ko'rib chiqish",
+    downloadFile: 'Faylni yuklash',
+  },
+  Empty: {
+    description: "Ma'lumot yo'q",
+  },
+  Icon: {
+    icon: 'belgi',
+  },
+  Text: {
+    edit: 'Tahrirlash',
+    copy: "Kopiya qilish'",
+    copied: 'Kopiya qilingan',
+    expand: 'Ochish',
+  },
+  PageHeader: {
+    back: 'Orqaga',
+  },
+  Form: {
+    defaultValidateMessages: {
+      default: 'Maydonni tekshirish xatosi ${label}',
+      required: 'Iltimos, ${label} kiriting',
+      enum: "${label} [${enum}] dan biri bo'lishi kerak",
+      whitespace: "${label} bo'sh bo'la olmaydi",
+      date: {
+        format: "${label} noto'g'ri sana ko'rinishi",
+        parse: '${label} sanaga aylanmadi',
+        invalid: "${label} noto'g'ri sana hisoblanadi",
+      },
+      types: {
+        string: typeTemplate,
+        method: typeTemplate,
+        array: typeTemplate,
+        object: typeTemplate,
+        number: typeTemplate,
+        date: typeTemplate,
+        boolean: typeTemplate,
+        integer: typeTemplate,
+        float: typeTemplate,
+        regexp: typeTemplate,
+        email: typeTemplate,
+        url: typeTemplate,
+        hex: typeTemplate,
+      },
+      string: {
+        len: "${label} ${len} belgilar bo'lishi kerak",
+        min: "${label} ${min} belgilaridan katta yoki teng bo'lishi kerak",
+        max: "${label} ${max} belgilaridan kam yoki teng bo'lishi kerak",
+        range: "${label} uzunligi ${min} - ${max} belgilar orasida bo'lishi kerak",
+      },
+      number: {
+        len: "${label} ${len}ga teng bo'lishi kerak",
+        min: "${label} ${min} dan katta yoki teng bo'lishi kerak",
+        max: "${label} ${max} dan kam yoki unga teng bo'lishi kerak",
+      },
+      array: {
+        len: "${label} elementlari soni ${len} ga teng bo'lishi kerak",
+        min: "${label} elementlari soni ${min} dan katta yoki teng bo'lishi kerak",
+        max: "${label} elementlari soni ${max} dan kam yoki unga teng bo'lishi kerak",
+        range: "${label} elementlari soni ${min} va ${max} orasida bo'lishi kerak",
+      },
+      pattern: {
+        mismatch: '${label} ${pattern} naqshga mos kelmaydi',
+      },
+    },
+  },
+  Image: {
+    preview: "Oldindan ko'rish",
+  },
+};
+
+export default localeValues;
--- 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/menu/style/index.less
+++ b/components/menu/style/index.less
@@ -665,6 +665,7 @@

    a {
      color: @disabled-color !important;
+      pointer-events: none;
    }

    > .@{menu-prefix-cls}-submenu-title {
--- 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/index.en-US.md
+++ b/components/modal/index.en-US.md
@@ -27,7 +27,7 @@ When requiring users to interact with the application, but without jumping to a
 | focusTriggerAfterClose | Whether need to focus trigger element after dialog is closed | boolean | true | 4.9.0 |
 | footer | Footer content, set as `footer={null}` when you don't need default buttons | ReactNode | (OK and Cancel buttons) |  |
 | forceRender | Force render Modal | boolean | false |  |
-| getContainer | The mounted node for Modal but still display at fullscreen | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body |  |
+| getContainer | The mounted node for Modal but still display at fullscreen. To match React 18 concurrent requirement, `getContainer` should always return same dom since `4.24.x` | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body |  |
 | keyboard | Whether support press esc to close | boolean | true |  |
 | mask | Whether show mask or not | boolean | true |  |
 | maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | boolean | true |  |
--- a/components/modal/index.zh-CN.md
+++ b/components/modal/index.zh-CN.md
@@ -30,7 +30,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg
 | focusTriggerAfterClose | 对话框关闭后是否需要聚焦触发元素 | boolean | true | 4.9.0 |
 | footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer={null}` | ReactNode | (确定取消按钮) |  |
 | forceRender | 强制渲染 Modal | boolean | false |  |
-| getContainer | 指定 Modal 挂载的节点，但依旧为全局展示，`false` 为挂载在当前位置 | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body |  |
+| getContainer | 指定 Modal 挂载的节点，但依旧为全局展示，`false` 为挂载在当前位置。为符合 React 18 concurrent 标准，从 `4.20.x` 起 `getContainer` 需要始终返回唯一 dom 节点 | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body |  |
 | keyboard | 是否支持键盘 esc 关闭 | boolean | true |  |
 | mask | 是否展示遮罩 | boolean | true |  |
 | maskClosable | 点击蒙层是否允许关闭 | boolean | true |  |
--- 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/popover/style/index.less
+++ b/components/popover/style/index.less
@@ -91,7 +91,6 @@

  &-message {
    display: flex;
-    align-items: center;
    padding: 4px 0 12px;
    color: @popover-color;
    font-size: @font-size-base;
--- a/components/select/demo/optgroup.md
+++ b/components/select/demo/optgroup.md
@@ -17,22 +17,29 @@ Using `OptGroup` to group the options.
 import { Select } from 'antd';
 import React from 'react';

-const { Option, OptGroup } = Select;
-
 const handleChange = (value: string) => {
  console.log(`selected ${value}`);
 };

 const App: React.FC = () => (
-  <Select defaultValue="lucy" style={{ width: 200 }} onChange={handleChange}>
-    <OptGroup label="Manager">
-      <Option value="jack">Jack</Option>
-      <Option value="lucy">Lucy</Option>
-    </OptGroup>
-    <OptGroup label="Engineer">
-      <Option value="Yiminghe">yiminghe</Option>
-    </OptGroup>
-  </Select>
+  <Select
+    defaultValue="lucy"
+    style={{ width: 200 }}
+    onChange={handleChange}
+    options={[
+      {
+        label: 'Manager',
+        options: [
+          { label: 'Jack', value: 'jack' },
+          { label: 'Lucy', value: 'lucy' },
+        ],
+      },
+      {
+        label: 'Engineer',
+        options: [{ label: 'yiminghe', value: 'Yiminghe' }],
+      },
+    ]}
+  />
 );

 export default App;
--- 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/steps/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/steps/tests/snapshots/demo-extend.test.ts.snap
@@ -2080,62 +2080,67 @@ exports[`renders ./components/steps/demo/progress.md extend context correctly 1`

 exports[`renders ./components/steps/demo/progress-debug.md extend context correctly 1`] = `
 Array [
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
+  <div
+    class="ant-space-compact ant-space-compact-block"
  >
-    <span>
-      Percentage to undefined
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Percentage +
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Current +
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Status Wait
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Status Process
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Status Finish
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Status Error
-    </span>
-  </button>,
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
+      type="button"
+    >
+      <span>
+        Percentage to undefined
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Percentage +
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Current +
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Status Wait
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Status Process
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Status Finish
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-last-item"
+      type="button"
+    >
+      <span>
+        Status Error
+      </span>
+    </button>
+  </div>,
+  <br />,
  <div
    class="ant-steps ant-steps-horizontal ant-steps-with-progress ant-steps-label-horizontal"
  >
--- a/components/steps/tests/snapshots/demo.test.ts.snap
+++ b/components/steps/tests/snapshots/demo.test.ts.snap
@@ -1936,62 +1936,67 @@ exports[`renders ./components/steps/demo/progress.md correctly 1`] = `

 exports[`renders ./components/steps/demo/progress-debug.md correctly 1`] = `
 Array [
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
+  <div
+    class="ant-space-compact ant-space-compact-block"
  >
-    <span>
-      Percentage to undefined
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Percentage +
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Current +
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Status Wait
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Status Process
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Status Finish
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Status Error
-    </span>
-  </button>,
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
+      type="button"
+    >
+      <span>
+        Percentage to undefined
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Percentage +
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Current +
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Status Wait
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Status Process
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Status Finish
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-last-item"
+      type="button"
+    >
+      <span>
+        Status Error
+      </span>
+    </button>
+  </div>,
+  <br />,
  <div
    class="ant-steps ant-steps-horizontal ant-steps-with-progress ant-steps-label-horizontal"
  >
--- a/components/steps/demo/progress-debug.md
+++ b/components/steps/demo/progress-debug.md
@@ -16,11 +16,11 @@ Buggy!

 ```tsx
 import type { StepsProps } from 'antd';
-import { Button, Steps } from 'antd';
+import { Button, Steps, Space } from 'antd';
 import React, { useState } from 'react';

 const App: React.FC = () => {
-  const [percent, setPercentage] = useState(0);
+  const [percent, setPercentage] = useState<number | undefined>(0);
  const [current, setCurrent] = useState(1);
  const [status, setStatus] = useState<StepsProps['status']>('process');
  const description = 'This is a description.';
@@ -41,20 +41,18 @@ const App: React.FC = () => {
  ];
  return (
    <>
-      <Button onClick={() => setPercentage(0)}>Percentage to undefined</Button>
-      <Button onClick={() => setPercentage((percent + 10) % 100)}>Percentage +</Button>
-      <Button
-        onClick={() => {
-          setCurrent((current + 1) % 3);
-          setPercentage(0);
-        }}
-      >
-        Current +
-      </Button>
-      <Button onClick={() => setStatus('wait')}>Status Wait</Button>
-      <Button onClick={() => setStatus('process')}>Status Process</Button>
-      <Button onClick={() => setStatus('finish')}>Status Finish</Button>
-      <Button onClick={() => setStatus('error')}>Status Error</Button>
+      <Space.Compact block>
+        <Button onClick={() => setPercentage(undefined)}>Percentage to undefined</Button>
+        <Button onClick={() => setPercentage(prev => ((prev ?? 0) + 10) % 100)}>
+          Percentage +
+        </Button>
+        <Button onClick={() => setCurrent(prev => (prev + 1) % 3)}>Current +</Button>
+        <Button onClick={() => setStatus('wait')}>Status Wait</Button>
+        <Button onClick={() => setStatus('process')}>Status Process</Button>
+        <Button onClick={() => setStatus('finish')}>Status Finish</Button>
+        <Button onClick={() => setStatus('error')}>Status Error</Button>
+      </Space.Compact>
+      <br />
      <Steps current={current} percent={percent} status={status} items={items} />
      <Steps current={current} percent={percent} status={status} size="small" items={items} />
      <Steps
--- a/components/steps/style/progress.less
+++ b/components/steps/style/progress.less
@@ -4,18 +4,31 @@
  .@{steps-prefix-cls}-item {
    padding-top: 4px;

-    .@{steps-prefix-cls}-item-tail {
-      top: 4px !important;
+    & > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
+      top: 4px;
+      left: @steps-vertical-tail-width + 3;
    }
  }

-  &.@{steps-prefix-cls}-horizontal {
-    .@{steps-prefix-cls}-item:first-child {
+  &,
+  &.@{steps-prefix-cls}-small {
+    &.@{steps-prefix-cls}-horizontal .@{steps-prefix-cls}-item:first-child {
      padding-bottom: 4px;
      padding-left: 4px;
    }
  }

+  &.@{steps-prefix-cls}-small
+    > .@{steps-prefix-cls}-item
+    > .@{steps-prefix-cls}-item-container
+    > .@{steps-prefix-cls}-item-tail {
+    left: @steps-vertical-tail-width-sm + 3;
+  }
+
+  &.@{steps-prefix-cls}-vertical .@{steps-prefix-cls}-item {
+    padding-left: 4px;
+  }
+
  &.@{steps-prefix-cls}-label-vertical {
    .@{steps-prefix-cls}-item .@{steps-prefix-cls}-item-tail {
      top: 14px !important;
--- a/components/steps/style/rtl.less
+++ b/components/steps/style/rtl.less
@@ -260,12 +260,28 @@
 }

 // RTL Steps with progress
-.@{steps-prefix-cls}-rtl.@{steps-prefix-cls}-with-progress.@{steps-prefix-cls}-horizontal.@{steps-prefix-cls}-label-horizontal {
-  .@{steps-prefix-cls}-item:first-child {
+.@{steps-prefix-cls}-rtl.@{steps-prefix-cls}-with-progress {
+  &.@{steps-prefix-cls}-vertical > .@{steps-prefix-cls}-item {
    padding-right: 4px;
-    padding-left: 0;
-    &.@{steps-prefix-cls}-item-active {
+    > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
+      right: @steps-vertical-tail-width + 3;
+    }
+  }
+
+  &.@{steps-prefix-cls}-small.@{steps-prefix-cls}-vertical > .@{steps-prefix-cls}-item {
+    > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
+      right: @steps-vertical-tail-width-sm + 3;
+    }
+  }
+
+  &.@{steps-prefix-cls}-horizontal.@{steps-prefix-cls}-label-horizontal {
+    .@{steps-prefix-cls}-item:first-child {
      padding-right: 4px;
+      padding-left: 0;
+
+      &.@{steps-prefix-cls}-item-active {
+        padding-right: 4px;
+      }
    }
  }
 }
--- a/components/steps/style/vertical.less
+++ b/components/steps/style/vertical.less
@@ -33,7 +33,7 @@
    > .@{steps-prefix-cls}-item-tail {
    position: absolute;
    top: 0;
-    left: @steps-vertical-tail-width;
+    left: @steps-vertical-tail-width - 1; // line width
    width: 1px;
    height: 100%;
    padding: @steps-icon-size + 6px 0 6px;
@@ -63,7 +63,7 @@
    .@{steps-prefix-cls}-item-tail {
      position: absolute;
      top: 0;
-      left: @steps-vertical-tail-width-sm;
+      left: @steps-vertical-tail-width-sm - 1; // line width
      padding: @steps-small-icon-size + 6px 0 6px;
    }
    .@{steps-prefix-cls}-item-title {
--- 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/table/tests/Table.sorter.test.tsx
+++ b/components/table/tests/Table.sorter.test.tsx
@@ -105,9 +105,7 @@ describe('Table.sorter', () => {

    fireEvent.click(container.querySelector('.ant-table-column-sorters')!);
    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual(null);
-    expect(getNameColumn()?.getAttribute('aria-label')).toEqual(
-      "this column's title is Name,this column is sortable",
-    );
+    expect(getNameColumn()?.getAttribute('aria-label')).toEqual('Name');
  });

  it('sort records', () => {
--- a/components/table/tests/snapshots/Table.sorter.test.tsx.snap
+++ b/components/table/tests/snapshots/Table.sorter.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Table.sorter renders sorter icon correctly 1`] = `
 >
  <tr>
    <th
-      aria-label="this column's title is Name,this column is sortable"
+      aria-label="Name"
      class="ant-table-cell ant-table-column-has-sorters"
      tabindex="0"
    >
--- a/components/table/tests/snapshots/Table.test.tsx.snap
+++ b/components/table/tests/snapshots/Table.test.tsx.snap
@@ -234,7 +234,7 @@ exports[`Table should render title 1`] = `
                >
                  <tr>
                    <th
-                      aria-label="this column is sortable"
+                      aria-label=""
                      class="ant-table-cell ant-table-column-has-sorters"
                      tabindex="0"
                    >
@@ -302,7 +302,7 @@ exports[`Table should render title 1`] = `
                      </div>
                    </th>
                    <th
-                      aria-label="this column is sortable"
+                      aria-label=""
                      class="ant-table-cell ant-table-column-has-sorters"
                      tabindex="0"
                    >
@@ -365,7 +365,7 @@ exports[`Table should render title 1`] = `
                      </div>
                    </th>
                    <th
-                      aria-label="this column is sortable"
+                      aria-label=""
                      class="ant-table-cell ant-table-column-has-sorters"
                      tabindex="0"
                    >
@@ -433,7 +433,7 @@ exports[`Table should render title 1`] = `
                      </div>
                    </th>
                    <th
-                      aria-label="this column's title is color,this column is sortable"
+                      aria-label="color"
                      class="ant-table-cell ant-table-column-has-sorters"
                      tabindex="0"
                    >
@@ -494,7 +494,7 @@ exports[`Table should render title 1`] = `
                      </div>
                    </th>
                    <th
-                      aria-label="this column's title is sex,this column is sortable"
+                      aria-label="sex"
                      class="ant-table-cell ant-table-column-has-sorters"
                      tabindex="0"
                    >
--- a/components/table/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/table/tests/snapshots/demo-extend.test.ts.snap
@@ -35,7 +35,7 @@ exports[`renders ./components/table/demo/ajax.md extend context correctly 1`] =
              >
                <tr>
                  <th
-                    aria-label="this column's title is Name,this column is sortable"
+                    aria-label="Name"
                    class="ant-table-cell ant-table-column-has-sorters"
                    tabindex="0"
                  >
@@ -1546,7 +1546,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md extend context c
                    </div>
                  </th>
                  <th
-                    aria-label="this column's title is Address,this column is sortable"
+                    aria-label="Address"
                    class="ant-table-cell ant-table-column-has-sorters"
                    tabindex="0"
                  >
@@ -3309,7 +3309,7 @@ Array [
                      Name
                    </th>
                    <th
-                      aria-label="this column's title is Age,this column is sortable"
+                      aria-label="Age"
                      class="ant-table-cell ant-table-column-has-sorters"
                      tabindex="0"
                    >
@@ -3620,7 +3620,7 @@ Array [
                      </div>
                    </th>
                    <th
-                      aria-label="this column's title is Action,this column is sortable"
+                      aria-label="Action"
                      class="ant-table-cell ant-table-column-has-sorters"
                      tabindex="0"
                    >
@@ -7257,7 +7257,7 @@ exports[`renders ./components/table/demo/filter-in-tree.md extend context correc
                                <div
                                  aria-hidden="true"
                                  class="ant-tree-treenode"
-                                  style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+                                  style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
                                >
                                  <div
                                    class="ant-tree-indent"
@@ -7578,7 +7578,7 @@ exports[`renders ./components/table/demo/filter-in-tree.md extend context correc
                    </div>
                  </th>
                  <th
-                    aria-label="this column's title is Age,this column is sortable"
+                    aria-label="Age"
                    class="ant-table-cell ant-table-column-has-sorters"
                    tabindex="0"
                  >
@@ -8253,7 +8253,7 @@ exports[`renders ./components/table/demo/filter-search.md extend context correct
                                <div
                                  aria-hidden="true"
                                  class="ant-tree-treenode"
-                                  style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+                                  style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
                                >
                                  <div
                                    class="ant-tree-indent"
@@ -8398,7 +8398,7 @@ exports[`renders ./components/table/demo/filter-search.md extend context correct
                    </div>
                  </th>
                  <th
-                    aria-label="this column's title is Age,this column is sortable"
+                    aria-label="Age"
                    class="ant-table-cell ant-table-column-has-sorters"
                    tabindex="0"
                  >
@@ -12238,7 +12238,7 @@ exports[`renders ./components/table/demo/grouping-columns.md extend context corr
                </tr>
                <tr>
                  <th
-                    aria-label="this column's title is Age,this column is sortable"
+                    aria-label="Age"
                    class="ant-table-cell ant-table-column-has-sorters"
                    rowspan="3"
                    tabindex="0"
@@ -13337,7 +13337,7 @@ exports[`renders ./components/table/demo/head.md extend context correctly 1`] =
              >
                <tr>
                  <th
-                    aria-label="this column's title is Name,this column is sortable"
+                    aria-label="Name"
                    class="ant-table-cell ant-table-column-has-sorters"
                    tabindex="0"
                  >
@@ -14688,7 +14688,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
                    Name
                  </th>
                  <th
-                    aria-label="this column's title is Chinese Score,this column is sortable"
+                    aria-label="Chinese Score"
                    class="ant-table-cell ant-table-column-has-sorters"
                    tabindex="0"
                  >
@@ -14773,7 +14773,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
                    </div>
                  </th>
                  <th
-                    aria-label="this column's title is Math Score,this column is sortable"
+                    aria-label="Math Score"
                    class="ant-table-cell ant-table-column-has-sorters"
                    tabindex="0"
                  >
@@ -14858,7 +14858,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
                    </div>
                  </th>
                  <th
-                    aria-label="this column's title is English Score,this column is sortable"
+                    aria-label="English Score"
                    class="ant-table-cell ant-table-column-has-sorters"
                    tabindex="0"
                  >
@@ -20346,7 +20346,7 @@ Array [
                >
                  <tr>
                    <th
-                      aria-label="this column's title is Name,this column is sortable"
+                      aria-label="Name"
                      class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
                      tabindex="0"
                      title="Name"
@@ -20653,7 +20653,7 @@ Array [
                      </div>
                    </th>
                    <th
-                      aria-label="this column's title is Age,this column is sortable"
+                      aria-label="Age"
                      class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
                      tabindex="0"
                      title="Age"
@@ -20739,7 +20739,7 @@ Array [
                      </div>
                    </th>
                    <th
-                      aria-label="this column's title is Address,this column is sortable"
+                      aria-label="Address"
                      class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
                      tabindex="0"
                      title="Address"
@@ -21281,7 +21281,7 @@ exports[`renders ./components/table/demo/resizable-column.md extend context corr
                    />
                  </th>
                  <th
-                    aria-label="this column's title is Amount,this column is sortable"
+                    aria-label="Amount"
                    class="ant-table-cell ant-table-column-has-sorters react-resizable"
                    tabindex="0"
                  >
--- a/components/table/tests/snapshots/demo.test.ts.snap
+++ b/components/table/tests/snapshots/demo.test.ts.snap
@@ -35,7 +35,7 @@ exports[`renders ./components/table/demo/ajax.md correctly 1`] = `
              >
                <tr>
                  <th
-                    aria-label="this column's title is Name,this column is sortable"
+                    aria-label="Name"
                    class="ant-table-cell ant-table-column-has-sorters"
                    tabindex="0"
                  >
@@ -1138,7 +1138,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
                    </div>
                  </th>
                  <th
-                    aria-label="this column's title is Address,this column is sortable"
+                    aria-label="Address"
                    class="ant-table-cell ant-table-column-has-sorters"
                    tabindex="0"
                  >
@@ -2779,7 +2779,7 @@ Array [
                      Name
                    </th>
                    <th
-                      aria-label="this column's title is Age,this column is sortable"
+                      aria-label="Age"
                      class="ant-table-cell ant-table-column-has-sorters"
                      tabindex="0"
                    >
@@ -2878,7 +2878,7 @@ Array [
                      </div>
                    </th>
                    <th
-                      aria-label="this column's title is Action,this column is sortable"
+                      aria-label="Action"
                      class="ant-table-cell ant-table-column-has-sorters"
                      tabindex="0"
                    >
@@ -5850,7 +5850,7 @@ exports[`renders ./components/table/demo/filter-in-tree.md correctly 1`] = `
                    </div>
                  </th>
                  <th
-                    aria-label="this column's title is Age,this column is sortable"
+                    aria-label="Age"
                    class="ant-table-cell ant-table-column-has-sorters"
                    tabindex="0"
                  >
@@ -6196,7 +6196,7 @@ exports[`renders ./components/table/demo/filter-search.md correctly 1`] = `
                    </div>
                  </th>
                  <th
-                    aria-label="this column's title is Age,this column is sortable"
+                    aria-label="Age"
                    class="ant-table-cell ant-table-column-has-sorters"
                    tabindex="0"
                  >
@@ -9366,7 +9366,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
                </tr>
                <tr>
                  <th
-                    aria-label="this column's title is Age,this column is sortable"
+                    aria-label="Age"
                    class="ant-table-cell ant-table-column-has-sorters"
                    rowspan="3"
                    tabindex="0"
@@ -10325,7 +10325,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
              >
                <tr>
                  <th
-                    aria-label="this column's title is Name,this column is sortable"
+                    aria-label="Name"
                    class="ant-table-cell ant-table-column-has-sorters"
                    tabindex="0"
                  >
@@ -11055,7 +11055,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
                    Name
                  </th>
                  <th
-                    aria-label="this column's title is Chinese Score,this column is sortable"
+                    aria-label="Chinese Score"
                    class="ant-table-cell ant-table-column-has-sorters"
                    tabindex="0"
                  >
@@ -11116,7 +11116,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
                    </div>
                  </th>
                  <th
-                    aria-label="this column's title is Math Score,this column is sortable"
+                    aria-label="Math Score"
                    class="ant-table-cell ant-table-column-has-sorters"
                    tabindex="0"
                  >
@@ -11177,7 +11177,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
                    </div>
                  </th>
                  <th
-                    aria-label="this column's title is English Score,this column is sortable"
+                    aria-label="English Score"
                    class="ant-table-cell ant-table-column-has-sorters"
                    tabindex="0"
                  >
@@ -15364,7 +15364,7 @@ Array [
                >
                  <tr>
                    <th
-                      aria-label="this column's title is Name,this column is sortable"
+                      aria-label="Name"
                      class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
                      tabindex="0"
                      title="Name"
@@ -15459,7 +15459,7 @@ Array [
                      </div>
                    </th>
                    <th
-                      aria-label="this column's title is Age,this column is sortable"
+                      aria-label="Age"
                      class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
                      tabindex="0"
                      title="Age"
@@ -15521,7 +15521,7 @@ Array [
                      </div>
                    </th>
                    <th
-                      aria-label="this column's title is Address,this column is sortable"
+                      aria-label="Address"
                      class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
                      tabindex="0"
                      title="Address"
@@ -15851,7 +15851,7 @@ exports[`renders ./components/table/demo/resizable-column.md correctly 1`] = `
                    />
                  </th>
                  <th
-                    aria-label="this column's title is Amount,this column is sortable"
+                    aria-label="Amount"
                    class="ant-table-cell ant-table-column-has-sorters react-resizable"
                    tabindex="0"
                  >
--- a/components/table/hooks/useSorter.tsx
+++ b/components/table/hooks/useSorter.tsx
@@ -179,7 +179,7 @@ function injectSorter<RecordType>(
            renderSortTitle
          );
        },
-        onHeaderCell: col => {
+        onHeaderCell: (col) => {
          const cell: React.HTMLAttributes<HTMLElement> =
            (column.onHeaderCell && column.onHeaderCell(col)) || {};
          const originOnClick = cell.onClick;
@@ -212,9 +212,7 @@ function injectSorter<RecordType>(
          if (sorterOrder) {
            cell['aria-sort'] = sorterOrder === 'ascend' ? 'ascending' : 'descending';
          } else {
-            cell['aria-label'] = `${
-              displayTitle ? `this column's title is ${displayTitle},` : ''
-            }this column is sortable`;
+            cell['aria-label'] = displayTitle || '';
          }
          cell.className = classNames(cell.className, `${prefixCls}-column-has-sorters`);
          cell.tabIndex = 0;
@@ -314,7 +312,7 @@ export function getSortData<RecordType>(

      return 0;
    })
-    .map<RecordType>(record => {
+    .map<RecordType>((record) => {
      const subRecords = (record as any)[childrenColumnName];
      if (subRecords) {
        return {
@@ -378,7 +376,7 @@ export default function useFilterSorter<RecordType>({
    }

    let multipleMode: boolean | null = null;
-    collectedStates.forEach(state => {
+    collectedStates.forEach((state) => {
      if (multipleMode === null) {
        patchStates(state);

--- a/components/time-picker/tests/index.test.tsx
+++ b/components/time-picker/tests/index.test.tsx
@@ -95,6 +95,13 @@ describe('TimePicker', () => {
    );
  });

+  it('RangePicker should show warning when use popupClassName', () => {
+    render(<TimePicker.RangePicker popupClassName="myCustomClassName" />);
+    expect(errorSpy).not.toHaveBeenCalledWith(
+      'Warning: [antd: RangePicker] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+    );
+  });
+
  it('TimePicker should show warning when use dropdownClassName', () => {
    render(<TimePicker dropdownClassName="myCustomClassName" />);
    expect(errorSpy).toHaveBeenCalledWith(
@@ -102,6 +109,13 @@ describe('TimePicker', () => {
    );
  });

+  it('TimePicker should show warning when use popupClassName', () => {
+    render(<TimePicker popupClassName="myCustomClassName" />);
+    expect(errorSpy).not.toHaveBeenCalledWith(
+      'Warning: [antd: TimePicker] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+    );
+  });
+
  it('should support bordered', () => {
    const { container } = render(
      <TimePicker
--- a/components/time-picker/index.tsx
+++ b/components/time-picker/index.tsx
@@ -26,7 +26,8 @@ const RangePicker = React.forwardRef<any, TimeRangePickerProps>((props, ref) =>
  return (
    <InternalRangePicker
      {...props}
-      dropdownClassName={popupClassName || dropdownClassName}
+      dropdownClassName={dropdownClassName}
+      popupClassName={popupClassName}
      picker="time"
      mode={undefined}
      ref={ref}
@@ -63,15 +64,10 @@ const TimePicker = React.forwardRef<any, TimePickerProps>(
      return undefined;
    }, [addon, renderExtraFooter]);

-    warning(
-      !dropdownClassName,
-      'TimePicker',
-      '`dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
-    );
-
    return (
      <InternalTimePicker
-        dropdownClassName={popupClassName || dropdownClassName}
+        dropdownClassName={dropdownClassName}
+        popupClassName={popupClassName}
        {...restProps}
        mode={undefined}
        ref={ref}
--- a/components/time-picker/locale/uz_UZ.tsx
+++ b/components/time-picker/locale/uz_UZ.tsx
@@ -0,0 +1,8 @@
+import type { TimePickerLocale } from '../index';
+
+const locale: TimePickerLocale = {
+  placeholder: 'Vaqtni tanlang',
+  rangePlaceholder: ['Boshlanish vaqti', 'Yakunlash vaqti'],
+};
+
+export default locale;
--- a/components/transfer/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/transfer/tests/snapshots/demo-extend.test.ts.snap
@@ -7764,7 +7764,7 @@ exports[`renders ./components/transfer/demo/tree-transfer.md extend context corr
          <div
            aria-hidden="true"
            class="ant-tree-treenode"
-            style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+            style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
          >
            <div
              class="ant-tree-indent"
--- a/components/transfer/tests/snapshots/demo.test.ts.snap
+++ b/components/transfer/tests/snapshots/demo.test.ts.snap
@@ -5129,7 +5129,7 @@ exports[`renders ./components/transfer/demo/tree-transfer.md correctly 1`] = `
          <div
            aria-hidden="true"
            class="ant-tree-treenode"
-            style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+            style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
          >
            <div
              class="ant-tree-indent"
--- a/components/tree-select/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/tree-select/tests/snapshots/demo-extend.test.ts.snap
@@ -54,7 +54,7 @@ exports[`renders ./components/tree-select/demo/async.md extend context correctly
            <div
              aria-hidden="true"
              class="ant-select-tree-treenode"
-              style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+              style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
            >
              <div
                class="ant-select-tree-indent"
@@ -275,7 +275,7 @@ exports[`renders ./components/tree-select/demo/basic.md extend context correctly
            <div
              aria-hidden="true"
              class="ant-select-tree-treenode"
-              style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+              style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
            >
              <div
                class="ant-select-tree-indent"
@@ -672,7 +672,7 @@ exports[`renders ./components/tree-select/demo/checkable.md extend context corre
            <div
              aria-hidden="true"
              class="ant-select-tree-treenode"
-              style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+              style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
            >
              <div
                class="ant-select-tree-indent"
@@ -876,7 +876,7 @@ exports[`renders ./components/tree-select/demo/multiple.md extend context correc
            <div
              aria-hidden="true"
              class="ant-select-tree-treenode"
-              style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+              style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
            >
              <div
                class="ant-select-tree-indent"
@@ -1276,7 +1276,7 @@ Array [
              <div
                aria-hidden="true"
                class="ant-select-tree-treenode"
-                style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+                style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
              >
                <div
                  class="ant-select-tree-indent"
@@ -1862,7 +1862,7 @@ exports[`renders ./components/tree-select/demo/suffix.md extend context correctl
            <div
              aria-hidden="true"
              class="ant-select-tree-treenode"
-              style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+              style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
            >
              <div
                class="ant-select-tree-indent"
@@ -2208,7 +2208,7 @@ exports[`renders ./components/tree-select/demo/treeData.md extend context correc
            <div
              aria-hidden="true"
              class="ant-select-tree-treenode"
-              style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+              style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
            >
              <div
                class="ant-select-tree-indent"
@@ -2487,7 +2487,7 @@ exports[`renders ./components/tree-select/demo/treeLine.md extend context correc
                <div
                  aria-hidden="true"
                  class="ant-select-tree-treenode"
-                  style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+                  style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
                >
                  <div
                    class="ant-select-tree-indent"
--- a/components/tree-select/tests/snapshots/index.test.tsx.snap
+++ b/components/tree-select/tests/snapshots/index.test.tsx.snap
@@ -53,7 +53,7 @@ exports[`TreeSelect TreeSelect Custom Icons should \`treeIcon\` work 1`] = `
            <div
              aria-hidden="true"
              class="ant-select-tree-treenode"
-              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
            >
              <div
                class="ant-select-tree-indent"
--- a/components/tree/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/tree/tests/snapshots/demo-extend.test.ts.snap
@@ -16,7 +16,7 @@ exports[`renders ./components/tree/demo/basic.md extend context correctly 1`] =
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
  >
    <div
      class="ant-tree-indent"
@@ -334,7 +334,7 @@ exports[`renders ./components/tree/demo/basic-controlled.md extend context corre
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
  >
    <div
      class="ant-tree-indent"
@@ -873,7 +873,7 @@ exports[`renders ./components/tree/demo/customized-icon.md extend context correc
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
  >
    <div
      class="ant-tree-indent"
@@ -1084,7 +1084,7 @@ exports[`renders ./components/tree/demo/directory.md extend context correctly 1`
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
  >
    <div
      class="ant-tree-indent"
@@ -1512,7 +1512,7 @@ Array [
    <div
      aria-hidden="true"
      class="ant-tree-treenode"
-      style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+      style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
    >
      <div
        class="ant-tree-indent"
@@ -2324,7 +2324,7 @@ exports[`renders ./components/tree/demo/draggable.md extend context correctly 1`
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
  >
    <div
      class="ant-tree-indent"
@@ -2896,7 +2896,7 @@ exports[`renders ./components/tree/demo/dynamic.md extend context correctly 1`]
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
  >
    <div
      class="ant-tree-indent"
@@ -3247,7 +3247,7 @@ exports[`renders ./components/tree/demo/line.md extend context correctly 1`] = `
    <div
      aria-hidden="true"
      class="ant-tree-treenode"
-      style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+      style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
    >
      <div
        class="ant-tree-indent"
@@ -3734,7 +3734,7 @@ exports[`renders ./components/tree/demo/search.md extend context correctly 1`] =
    <div
      aria-hidden="true"
      class="ant-tree-treenode"
-      style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+      style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
    >
      <div
        class="ant-tree-indent"
@@ -3904,7 +3904,7 @@ exports[`renders ./components/tree/demo/switcher-icon.md extend context correctl
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
  >
    <div
      class="ant-tree-indent"
--- a/components/tree/tests/snapshots/demo.test.ts.snap
+++ b/components/tree/tests/snapshots/demo.test.ts.snap
@@ -16,7 +16,7 @@ exports[`renders ./components/tree/demo/basic.md correctly 1`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
  >
    <div
      class="ant-tree-indent"
@@ -334,7 +334,7 @@ exports[`renders ./components/tree/demo/basic-controlled.md correctly 1`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
  >
    <div
      class="ant-tree-indent"
@@ -873,7 +873,7 @@ exports[`renders ./components/tree/demo/customized-icon.md correctly 1`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
  >
    <div
      class="ant-tree-indent"
@@ -1084,7 +1084,7 @@ exports[`renders ./components/tree/demo/directory.md correctly 1`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
  >
    <div
      class="ant-tree-indent"
@@ -1512,7 +1512,7 @@ Array [
    <div
      aria-hidden="true"
      class="ant-tree-treenode"
-      style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+      style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
    >
      <div
        class="ant-tree-indent"
@@ -2324,7 +2324,7 @@ exports[`renders ./components/tree/demo/draggable.md correctly 1`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
  >
    <div
      class="ant-tree-indent"
@@ -2896,7 +2896,7 @@ exports[`renders ./components/tree/demo/dynamic.md correctly 1`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
  >
    <div
      class="ant-tree-indent"
@@ -3148,7 +3148,7 @@ exports[`renders ./components/tree/demo/line.md correctly 1`] = `
    <div
      aria-hidden="true"
      class="ant-tree-treenode"
-      style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+      style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
    >
      <div
        class="ant-tree-indent"
@@ -3635,7 +3635,7 @@ exports[`renders ./components/tree/demo/search.md correctly 1`] = `
    <div
      aria-hidden="true"
      class="ant-tree-treenode"
-      style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+      style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
    >
      <div
        class="ant-tree-indent"
@@ -3805,7 +3805,7 @@ exports[`renders ./components/tree/demo/switcher-icon.md correctly 1`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
  >
    <div
      class="ant-tree-indent"
--- a/components/tree/tests/snapshots/directory.test.tsx.snap
+++ b/components/tree/tests/snapshots/directory.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`Directory Tree DirectoryTree should expend all when use treeData and de
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
  >
    <div
      class="ant-tree-indent"
@@ -250,7 +250,7 @@ exports[`Directory Tree defaultExpandAll 1`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
  >
    <div
      class="ant-tree-indent"
@@ -627,7 +627,7 @@ exports[`Directory Tree defaultExpandParent 1`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
  >
    <div
      class="ant-tree-indent"
@@ -804,7 +804,7 @@ exports[`Directory Tree expand with state control click 1`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
  >
    <div
      class="ant-tree-indent"
@@ -965,7 +965,7 @@ exports[`Directory Tree expand with state control doubleClick 1`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
  >
    <div
      class="ant-tree-indent"
@@ -1126,7 +1126,7 @@ exports[`Directory Tree expandedKeys update 1`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
  >
    <div
      class="ant-tree-indent"
@@ -1403,7 +1403,7 @@ exports[`Directory Tree group select 1`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
  >
    <div
      class="ant-tree-indent"
@@ -1780,7 +1780,7 @@ exports[`Directory Tree group select 2`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
  >
    <div
      class="ant-tree-indent"
@@ -2157,7 +2157,7 @@ exports[`Directory Tree rtl render component should be rendered correctly in RTL
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
  >
    <div
      class="ant-tree-indent"
@@ -2201,7 +2201,7 @@ exports[`Directory Tree rtl render component should be rendered correctly in RTL
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
  >
    <div
      class="ant-tree-indent"
@@ -2245,7 +2245,7 @@ exports[`Directory Tree selectedKeys update 1`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
  >
    <div
      class="ant-tree-indent"
--- a/components/tree/tests/snapshots/index.test.tsx.snap
+++ b/components/tree/tests/snapshots/index.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`Tree icon and switcherIcon of Tree with showLine should render correctl
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
  >
    <div
      class="ant-tree-indent"
@@ -168,7 +168,7 @@ exports[`Tree showLine is object type should render correctly 1`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
  >
    <div
      class="ant-tree-indent"
@@ -511,7 +511,7 @@ exports[`Tree switcherIcon in Tree could be string 1`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
  >
    <div
      class="ant-tree-indent"
@@ -635,7 +635,7 @@ exports[`Tree switcherIcon should be loading icon when loadData 1`] = `
  <div
    aria-hidden="true"
    class="ant-tree-treenode"
-    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
  >
    <div
      class="ant-tree-indent"
--- 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/Show More
+++ b/Show More
Author	SHA1	Message	Date
vagusX	db65137fda	docs: changelog v4.24.6 (#39817 ) * docs: changelog v4.24.6 * Update CHANGELOG.en-US.md Co-authored-by: afc163 <afc163@gmail.com> * Update CHANGELOG.zh-CN.md Co-authored-by: afc163 <afc163@gmail.com> Co-authored-by: afc163 <afc163@gmail.com>	2022-12-26 17:32:05 +08:00
JarvisArt	590c397b12	chore: Image preview interactive optimization (#39813 )	2022-12-26 16:21:10 +08:00
kiner-tang(文辉)	671c6b7e54	fix(table): reset aria-label in table column (#39747 ) * feat: reset aria-label in table column * feat: update snapshots	2022-12-23 10:44:52 +08:00
MadCcc	62cefcae89	feat: Dropdown support autoAdjustOverflow (#39741 ) * feat: Dropdown support autoAdjustOverflow (#39735) * feat: Dropdown support autoAdjustOverflow * docs: api * docs: update api desc * docs: update	2022-12-23 10:40:11 +08:00
ChenXiao	dc6a26f201	fix(grid): fix justify and align properties are not reactive for Row (#39706 ) * fix(grid): fix justify and align properties are not reactive for Row * Update components/grid/__tests__/index.test.tsx Co-authored-by: azro352 <35503478+azro352@users.noreply.github.com> * Update components/grid/__tests__/index.test.tsx Co-authored-by: azro352 <35503478+azro352@users.noreply.github.com>	2022-12-22 10:59:54 +08:00
@linhf2023	c8f4225361	docs: Add FAQ about `@line-height-base` (#39565 )	2022-12-17 15:52:15 +08:00
Wuxh	eb616d479c	fix: fix drop down menu style issue (#39434 ) fix: https://github.com/ant-design/ant-design/issues/39322	2022-12-15 18:36:32 +08:00
MadCcc	00abec4bb3	fix: Drawer should close if open is false (#39561 ) * fix: Drawer should close if open is false * chore: update script * chore: update deps	2022-12-15 12:02:15 +08:00
xrkffgg	aa3bd3f20e	ci: add latest for v5 (#39412 ) * ci: add latest for v5 * Update release-helper.yml	2022-12-09 10:23:15 +08:00
二货爱吃白萝卜	f4d011623e	docs: note for getContainer (#39379 ) * docs: note for getContainer * chore: update gitignore	2022-12-08 00:26:29 +08:00
Paul Damnhorns	c71fece3b1	feat: add uz_UZ locale (#39353 )	2022-12-07 16:59:18 +08:00
afc163	20158b2277	chore: update size-limit.yml (#39338 )	2022-12-07 12:17:30 +08:00
二货爱吃白萝卜	d6ae60cd01	fix: Divider horizontal line align (#39334 ) * fix: divider hor align * test: Update snapshot	2022-12-07 11:42:32 +08:00
二货爱吃白萝卜	5357dedb9e	chore: update limit (#39332 )	2022-12-07 11:10:46 +08:00
二货机器人	50f89ac8a5	chore: tag latest-4	2022-12-06 14:02:33 +08:00
二货机器人	41f506ea65	chore: adjust auto tag	2022-12-06 13:55:46 +08:00
二货爱吃白萝卜	9f0379bd1b	docs: 4.24.5 changelog (#39267 ) * docs: 4.25.5 changelog * test: Update snapshot * chore: fix ci * chore: update script * test: Update snapshot * test: Update snapshot * test: Update snapshot * chore: clean up * chore: clean up bundlesize * chore: back of bundle size	2022-12-06 11:43:45 +08:00
二货机器人	aa8d7f5ca9	fix: MenuItem disabled not block a click	2022-12-01 17:31:28 +08:00
justanotheranonymoususer	c5a4359900	style: popconfirm icon position regression (#39027 )	2022-12-01 14:46:13 +08:00
Wuxh	1da8126123	fix(steps): fix steps style (#39103 ) * docs(steps): update demo * fix(steps): fix steps style fix #39088 * test: update snapshot * fix: update * chore: additional RTL styles	2022-12-01 11:05:42 +08:00
二货爱吃白萝卜	88e360d79d	docs: Update demo (#39127 )	2022-11-30 22:51:06 +08:00
MadCcc	aa1945d9ae	Revert "docs: fix 404" This reverts commit `1f0fbd4dcf`.	2022-11-30 11:27:26 +08:00
Wuxh	647a03af09	fix(badge): fix the color cannot be customized when count is 0 (#39062 ) * test(badge): add case * fix(badge): fix the color cannot be customized when count is 0 * test(badge): update snapshots * docs(badge): update demo * test: update case * test(badge): update snapshots	2022-11-29 09:49:18 +08:00
justanotheranonymoususer	8e8a073c33	fix: Card meta default width (4.x) (#39039 ) * Fix #39025 * Update components/card/style/index.less Co-authored-by: afc163 <afc163@gmail.com> * Update index.less Co-authored-by: afc163 <afc163@gmail.com>	2022-11-28 00:22:17 +08:00
kiner-tang(文辉)	d1ac522d96	fix: TimePicker `popupClassName` unexpect warning (#39010 )	2022-11-27 22:28:29 +08:00
MadCcc	1643cb72b3	chore: add dist-tag v4	2022-11-25 17:09:34 +08:00
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