fix: rethrow error in ActionButton's onOk callback (#43536)

* test: add unit case

* fix:  `ConfigProvider` form validateMessages nesting error

nesting error: https://github.com/ant-design/ant-design/issues/43210
merge error: 5ce9818401/components/config-provider/__tests__/form.test.tsx (L100-L110)

* test: update case

.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',
 };

.github/workflows/codeball.yml

@@ -1,21 +0,0 @@
-name: Codeball
-on:
-  pull_request: {}
-  pull_request_review_comment:
-    types: [created, edited]
-
-jobs:
-  codeball_job:
-    runs-on: ubuntu-latest
-    name: Codeball
-    steps:
-      # Run Codeball on all new Pull Requests and Review Comments! 🚀
-      # For customizations and more documentation, see https://github.com/sturdy-dev/codeball-action
-      - name: Codeball
-        uses: sturdy-dev/codeball-action@v2
-        with:
-          # Settings for "Codeball Approver"
-          approvePullRequests: "false"
-          labelPullRequestsWhenApproved: "true"
-          labelPullRequestsWhenReviewNeeded: "true"
-          failJobsWhenReviewNeeded: "false"

.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"

.github/workflows/preview-build.yml

@@ -57,6 +57,10 @@ jobs:
       - name: checkout
         uses: actions/checkout@v3
 
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
       - name: restore cache from package-lock.json
         uses: actions/cache@v3
         with:

.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'
-          dingding-token: ${{ secrets.DINGDING_BOT_BIGFISH_TOKEN }} ${{ secrets.DINGDING_BOT_YUNFENGDIE_TOKEN }}
+          branch: 'master, 4.x-stable'
+          tag: '5*, 4*'
+          latest: '5*'
+          dingding-token: ${{ secrets.DINGDING_BOT_BIGFISH_TOKEN }} ${{ secrets.DINGDING_BOT_BIGFISH_2_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'

.github/workflows/site-deploy.yml

@@ -2,7 +2,10 @@
 
 name: Deploy website
 on:
-  create
+  push:
+    tags:
+      - '4.*'
+  workflow_dispatch:
 
 permissions:
   contents: read
@@ -10,7 +13,7 @@ permissions:
 jobs:
   setup:
     runs-on: ubuntu-latest
-    if: github.event.ref_type == 'tag' && (contains(github.event.ref, '-') == false)
+    if: (startsWith(github.ref, 'refs/tags/') && (contains(github.ref_name, '-') == false)) || github.event_name == 'workflow_dispatch'
     steps:
       - name: checkout
         uses: actions/checkout@v3
@@ -48,6 +51,10 @@ jobs:
       - name: checkout
         uses: actions/checkout@v3
 
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
       - name: restore cache from package-lock.json
         uses: actions/cache@v3
         with:
@@ -66,5 +73,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

.github/workflows/size-limit.yml

@@ -1,4 +1,4 @@
-name: 📦 Compressed Size(size-limit)
+name: 📦 Size Limit
 
 on:
   pull_request:
@@ -13,19 +13,53 @@ 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
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - 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

.github/workflows/test.yml

@@ -19,6 +19,10 @@ jobs:
       - name: checkout
         uses: actions/checkout@v3
 
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
       - name: cache package-lock.json
         uses: actions/cache@v3
         with:
@@ -51,6 +55,10 @@ jobs:
       - name: checkout
         uses: actions/checkout@v3
 
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
       - name: restore cache from package-lock.json
         uses: actions/cache@v3
         with:
@@ -73,6 +81,10 @@ jobs:
       - name: checkout
         uses: actions/checkout@v3
 
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
       - name: restore cache from package-lock.json
         uses: actions/cache@v3
         with:
@@ -95,6 +107,10 @@ jobs:
       - name: checkout
         uses: actions/checkout@v3
 
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
       - name: restore cache from package-lock.json
         uses: actions/cache@v3
         with:
@@ -119,6 +135,10 @@ jobs:
       - name: checkout
         uses: actions/checkout@v3
 
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
       - name: restore cache from package-lock.json
         uses: actions/cache@v3
         with:
@@ -151,6 +171,10 @@ jobs:
       - name: checkout
         uses: actions/checkout@v3
 
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
       - name: restore cache from package-lock.json
         uses: actions/cache@v3
         with:
@@ -189,6 +213,10 @@ jobs:
       - name: checkout
         uses: actions/checkout@v3
 
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
       - name: restore cache from package-lock.json
         uses: actions/cache@v3
         with:
@@ -244,6 +272,10 @@ jobs:
       - name: checkout
         uses: actions/checkout@v3
 
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
       - name: restore cache from package-lock.json
         uses: actions/cache@v3
         with:
@@ -323,7 +355,11 @@ jobs:
     runs-on: ubuntu-latest
     needs: [normal-test]
     steps:
-      - uses: actions/checkout@v3
+      - name: checkout
+        uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
       - uses: actions/download-artifact@v3
         with:
           name: coverage-artifacts
@@ -346,6 +382,10 @@ jobs:
       - name: checkout
         uses: actions/checkout@v3
 
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
       - name: restore cache from package-lock.json
         uses: actions/cache@v3
         with:
@@ -393,6 +433,10 @@ jobs:
         if: ${{ github.event_name != 'pull_request' || matrix.module != 'lib' }}
         uses: actions/checkout@v3
 
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
       - name: restore cache from package-lock.json
         # lib only run in master branch not in pull request
         if: ${{ github.event_name != 'pull_request' || matrix.module != 'lib' }}

.gitignore

@@ -59,8 +59,11 @@ site/theme/template/Resources/*.jsx
 site/theme/template/Resources/**/*.jsx
 site/theme/template/NotFound.jsx
 scripts/previewEditor/index.html
-components/version/version.tsx
-components/version/token.tsx
+components/version/
+!components/version/style/index.tsx
+.dumi
+components/version/token-meta.json
+components/version/token.json
 
 # Image snapshot diff
 __diff_output__/
@@ -70,3 +73,6 @@ __image_snapshots__/
 /imageDiffSnapshots
 
 .devcontainer*
+
+# From v5
+locale/

.stylelintrc.json

@@ -39,7 +39,8 @@
     "color-function-notation": "legacy",
     "selector-class-pattern": null,
     "selector-id-pattern": null,
-    "selector-not-notation": null
+    "selector-not-notation": null,
+    "declaration-block-no-redundant-longhand-properties": null
   },
   "ignoreFiles": ["components/style/color/{bezierEasing,colorPalette,tinyColor}.less"]
 }

CHANGELOG.en-US.md

@@ -15,6 +15,114 @@ timeline: true
 
 ---
 
+## 4.24.12
+
+`2023-06-30`
+
+- 🐞 Fix Form submit trigger wrong `onFieldsChange` event even all the fields do not config `rules`. [#43292](https://github.com/ant-design/ant-design/pull/43292)
+- 🐞 Fix Form.List nested Form event bubble not correct. [#43292](https://github.com/ant-design/ant-design/pull/43292)
+
+## 4.24.11
+
+`2023-06-27`
+
+- 🆕 Drawer panel support event listener. [#42712](https://github.com/ant-design/ant-design/pull/42712) [@kiner-tang](https://github.com/kiner-tang)
+- 🐞 Fix Upload `onChange` sometime not sync when in React 18. [#43200](https://github.com/ant-design/ant-design/pull/43200)
+- 🐞 Fix Notification cannot hide close icon by `closeIcon={null}`. [#42791](https://github.com/ant-design/ant-design/pull/42791)
+- 🐞 Fix Drawer `id` was passed in incorrectly, and now is always added to the popup panel. [#43124](https://github.com/ant-design/ant-design/pull/43124) [@MuxinFeng](https://github.com/MuxinFeng)
+- 🐞 Fix InputNumber with `prefix` abnormal height under Form.Item of `hasFeedBack`. [#43048](https://github.com/ant-design/ant-design/pull/43048)
+- 🐞 Fix Popover with `getPopupContainer` sometime makes width too narrow. [#42697](https://github.com/ant-design/ant-design/pull/42697)
+- 🐞 Fix Select will display the letter A under some circumstances. [#42654](https://github.com/ant-design/ant-design/pull/42654) [@tchen-l](https://github.com/tchen-l)
+- 🐞 Fix ConfigProvider that import useless modules from `rc-field-form` when importing `FormProvider` . [#42502](https://github.com/ant-design/ant-design/pull/42502) [@BanShan-Alec](https://github.com/BanShan-Alec)
+- 🐞 Fix Popconfirm trigger `onVisibleChange` twice. [#42351](https://github.com/ant-design/ant-design/pull/42351)
+- 🐞 Fix Form `onFieldsChange` missing `validating` status change. [#42263](https://github.com/ant-design/ant-design/pull/42263)
+- 🐞 Fix Popover that display empty `div` when `title` and `content` is null. [19f8505](https://github.com/ant-design/ant-design/commit/19f8505) [@MaHui](https://github.com/MaHui)
+- 🐞 Fix Upload `disabled` logic. [#42143](https://github.com/ant-design/ant-design/pull/42143) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 Fix RangePicker wrong panel position under some circumstances. [#43179](https://github.com/ant-design/ant-design/pull/43179) [@cooljser](https://github.com/cooljser)
+- 🐞 Fix ConfigProvider makes Form component in the bundle even not use it. [#43207](https://github.com/ant-design/ant-design/pull/43207) [@yoyo837](https://github.com/yoyo837)
+- 💄 Optimize Spin style to keep height of container the same as child element. [#42163](https://github.com/ant-design/ant-design/pull/42163) [@cheapCoder](https://github.com/cheapCoder)
+
+## 4.24.10
+
+`2023-05-04`
+
+- 🐞 Fix `version` always shows `5.2.2`. [#42101](https://github.com/ant-design/ant-design/pull/42101)
+- 🐞 Fix Popover width collapse when show on the screen edge. [#41953](https://github.com/ant-design/ant-design/pull/41953)
+
+## 4.24.9
+
+`2023-04-19`
+
+- 🆕 Slider add missing `railStyle` for custom style. [#40942](https://github.com/ant-design/ant-design/pull/40942) [@c01nd01r](https://github.com/c01nd01r)
+- 🐞 Fix Select width becomes 0px when search after select something. [#41646](https://github.com/ant-design/ant-design/pull/41646)
+- 🐞 The `displayRender` prompt cannot be used when deleting `multiple`. [#40940](https://github.com/ant-design/ant-design/pull/40940) [@crazyair](https://github.com/crazyair)
+- 💄 Checkbox should use @border-radius-sm. [#40823](https://github.com/ant-design/ant-design/pull/40823)
+- 🐞 Fix TextArea missing active style when focused. [#41281](https://github.com/ant-design/ant-design/pull/41281) [@MuxinFeng](https://github.com/MuxinFeng)
+- 🛠 Adjust Checkbox to remove `checked` when unchecked. [#41888](https://github.com/ant-design/ant-design/pull/41888)
+- TypeScript
+  - 🤖 Adjust CascaderProps definition which has default generic now. [#40960](https://github.com/ant-design/ant-design/pull/40960) [@crazyair](https://github.com/crazyair)
+
+## 4.24.8
+
+`2023-02-13`
+
+- 🐞 Fix Tabs that throw error in some cases. [df09516](https://github.com/ant-design/ant-design/commit/df09516ee542159eb3fa40927eec8981d4581bd0)
+- 🌐 Add missing translation for `pt_BR`. [#40019](https://github.com/ant-design/ant-design/pull/40019) [@rafaelncarvalho](https://github.com/rafaelncarvalho)
+- TypeScript
+  - 🤖 Fix `CompoundedComponent` type error from external module. [#39058](https://github.com/ant-design/ant-design/pull/39058) [@wangcch](https://github.com/wangcch)
+
+## 4.24.7
+
+`2022-12-30`
+
+- 🐞 Fix Tabs slider that cannot resize. [#39867](https://github.com/ant-design/ant-design/pull/39867)
+- 🐞 Fix Input text is missing when `suffix` is applied in Safari. [#39830](https://github.com/ant-design/ant-design/pull/39830) [@ifujustayup](https://github.com/ifujustayup)
+
+## 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`

CHANGELOG.zh-CN.md

@@ -15,6 +15,114 @@ timeline: true
 
 ---
 
+## 4.24.12
+
+`2023-06-30`
+
+- 🐞 修复 Form 在提交时，字段没有配置 `rules` 时仍会错误触发 `onFieldsChange` 事件的问题。[#43292](https://github.com/ant-design/ant-design/pull/43292)
+- 🐞 修复 Form 嵌套 Form.List 嵌套 Form 的场景下，事件触发不正确的问题。[#43292](https://github.com/ant-design/ant-design/pull/43292)
+
+## 4.24.11
+
+`2023-06-27`
+
+- 🆕 Drawer 组件面板支持事件监听。[#42712](https://github.com/ant-design/ant-design/pull/42712) [@kiner-tang](https://github.com/kiner-tang)
+- 🐞 修复 Upload 在 React 18 下 `onChange` 有时数据不正确的问题。[#43200](https://github.com/ant-design/ant-design/pull/43200)
+- 🐞 修复 Notification 设置 `closeIcon={null}` 时关闭图标没有消失的问题。[#42791](https://github.com/ant-design/ant-design/pull/42791)
+- 🐞 修复 Drawer `id` 传入位置不正确的问题，现在始终会添加至弹出面板上。[#43124](https://github.com/ant-design/ant-design/pull/43124) [@MuxinFeng](https://github.com/MuxinFeng)
+- 🐞 修复 InputNumber 带有 `prefix` 时在 Form.Item `hasFeedBack` 内高度异常的问题。[#43048](https://github.com/ant-design/ant-design/pull/43048)
+- 🐞 修复 Popover 设置 `getPopupContainer` 后，某些时候宽度会过窄的问题。[#42697](https://github.com/ant-design/ant-design/pull/42697)
+- 🐞 修复 Select 在某些情况下会显示字母 A 的问题。[#42654](https://github.com/ant-design/ant-design/pull/42654) [@tchen-l](https://github.com/tchen-l)
+- 🐞 修复 ConfigProvider 引入 `FormProvider` 时，错误引入 'rc-field-form' 其他的无关依赖的问题。[#42502](https://github.com/ant-design/ant-design/pull/42502) [@BanShan-Alec](https://github.com/BanShan-Alec)
+- 🐞 修复 Popconfirm 的 `onVisibleChange` 会重复触发的问题。[#42351](https://github.com/ant-design/ant-design/pull/42351)
+- 🐞 修复 Form `onFieldsChange` 丢失一次 `validating` 状态变更的更新事件。[#42263](https://github.com/ant-design/ant-design/pull/42263)
+- 🐞 修复 Popover 组件当 `title` 和 `content` 都为空时展示空气泡的问题[19f8505](https://github.com/ant-design/ant-design/commit/19f8505) [@MaHui](https://github.com/MaHui)
+- 🐞 修复 Upload 禁用状态逻辑。[#42143](https://github.com/ant-design/ant-design/pull/42143) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 修复 RangePicker 在某些情况下面板打开未知不正确的问题。[#43179](https://github.com/ant-design/ant-design/pull/43179) [@cooljser](https://github.com/cooljser)
+- 🐞 修复使用 ConfigProvider 会导致未使用的 Form 组件也被打包的问题。[#43207](https://github.com/ant-design/ant-design/pull/43207) [@yoyo837](https://github.com/yoyo837)
+- 💄 优化 Spin 样式，保持容器与子元素图标高度一致。[#42163](https://github.com/ant-design/ant-design/pull/42163) [@cheapCoder](https://github.com/cheapCoder)
+
+## 4.24.10
+
+`2023-05-04`
+
+- 🐞 修复 `version` 总是返回 `5.2.2` 的问题。[#42101](https://github.com/ant-design/ant-design/pull/42101)
+- 🐞 修复 Popover 在屏幕边缘时宽度塌缩的问题。[#41953](https://github.com/ant-design/ant-design/pull/41953)
+
+## 4.24.9
+
+`2023-04-19`
+
+- 🆕 Slider 补充丢失的 `railStyle` 属性用于自定义样式。[#40942](https://github.com/ant-design/ant-design/pull/40942) [@c01nd01r](https://github.com/c01nd01r)
+- 🐞 修复 Select 在搜索时宽度变为 `0px` 的问题。[#41646](https://github.com/ant-design/ant-design/pull/41646)
+- 🐞 删除 `multiple` 不能使用 displayRender 提示。[#40940](https://github.com/ant-design/ant-design/pull/40940) [@crazyair](https://github.com/crazyair)
+- 💄 Checkbox 默认使用 `@border-radius-sm` 小号圆角。[#40823](https://github.com/ant-design/ant-design/pull/40823)
+- 🐞 修复 TextArea 在聚焦时丢失高亮样式的问题。[#41281](https://github.com/ant-design/ant-design/pull/41281) [@MuxinFeng](https://github.com/MuxinFeng)
+- 🛠 调整 Checkbox 行为，现在未勾选时不再会添加 `checked` 属性。[#41888](https://github.com/ant-design/ant-design/pull/41888)
+- TypeScript
+  - 🤖 调整 Cascader 的 CascaderProps 定义，为泛型提供默认值。[#40960](https://github.com/ant-design/ant-design/pull/40960) [@crazyair](https://github.com/crazyair)
+
+## 4.24.8
+
+`2023-02-13`
+
+- 🐞 修复 Tabs 组件某些情况下报错的问题。[df09516](https://github.com/ant-design/ant-design/commit/df09516ee542159eb3fa40927eec8981d4581bd0)
+- 🌐 补全 `pt_BR` 国际化。[#40019](https://github.com/ant-design/ant-design/pull/40019) [@rafaelncarvalho](https://github.com/rafaelncarvalho)
+- TypeScript
+  - 🤖 修复部分组件 `CompoundedComponent` 类型报错。[#39058](https://github.com/ant-design/ant-design/pull/39058) [@wangcch](https://github.com/wangcch)
+
+## 4.24.7
+
+`2022-12-30`
+
+- 🐞 修复 Tabs 组件滑块不能自动适应宽度的问题。[#39867](https://github.com/ant-design/ant-design/pull/39867)
+- 🐞 修复 Input 在 Safari 下使用 `suffix` 时文字内容丢失的问题。[#39830](https://github.com/ant-design/ant-design/pull/39830) [@ifujustayup](https://github.com/ifujustayup)
+
+## 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 +144,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
 

CNAME

@@ -1 +1 @@
-ant.design
+4x.ant.design

README-ja_JP.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <a href="https://ant.design">
+  <a href="https://4x.ant.design">
     <img width="200" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
   </a>
 </p>
@@ -8,7 +8,7 @@
 
 <div align="center">
 
-エンタープライズクラスのUI設計言語とReact UIライブラリです。
+エンタープライズクラスの UI 設計言語と React UI ライブラリです。
 
 [![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
 
@@ -45,7 +45,7 @@
 
 </div>
 
-[![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Yl83RJhUE7kAAAAAAAAAAABkARQnAQ)](https://ant.design)
+[![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Yl83RJhUE7kAAAAAAAAAAABkARQnAQ)](https://4x.ant.design)
 
 [English](./README.md) | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md) | 日本語
 
@@ -99,16 +99,16 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
 
 ### TypeScript
 
-`antd` は TypeScript で書かれており、完全な定義がなされています。まずは [TypeScript で使う](https://ant.design/docs/react/use-in-typescript)をチェックしてください。
+`antd` は TypeScript で書かれており、完全な定義がなされています。まずは [TypeScript で使う](https://4x.ant.design/docs/react/use-in-typescript)をチェックしてください。
 
 ## 🌍 国際化対応
 
-数十の言語が `antd` でサポートされています。[i18n](https://ant.design/docs/react/i18n) を参照してください。
+数十の言語が `antd` でサポートされています。[i18n](https://4x.ant.design/docs/react/i18n) を参照してください。
 
 ## 🔗 リンク
 
-- [ホームページ](https://ant.design/)
-- [コンポーネントの概要](https://ant.design/components/overview)
+- [ホームページ](https://4x.ant.design/)
+- [コンポーネントの概要](https://4x.ant.design/components/overview)
 - [Ant Design Pro](http://pro.ant.design/)
 - [変更ログ](CHANGELOG.en-US.md)
 - [rc-components](http://react-component.github.io/)
@@ -122,9 +122,9 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
 - [足場マーケット](http://scaffold.ant.design)
 - [開発者向けインストラクション](https://github.com/ant-design/ant-design/wiki/Development)
 - [バージョン管理リリースノート](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
-- [FAQ](https://ant.design/docs/react/faq)
-- バグレポート用の [CodeSandbox テンプレート](https://u.ant.design/codesandbox-repro)
-- [テーマのカスタマイズ](https://ant.design/docs/react/customize-theme)
+- [FAQ](https://4x.ant.design/docs/react/faq)
+- バグレポート用の [CodeSandbox テンプレート](https://u.ant.design/codesandbox-repro-4x)
+- [テーマのカスタマイズ](https://4x.ant.design/docs/react/customize-theme)
 - [コラボレーターへの応募方法](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
 
 ## ⌨️ 開発

README-pt_BR.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <a href="https://ant.design">
+  <a href="https://4x.ant.design">
     <img width="200" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
   </a>
 </p>
@@ -45,7 +45,7 @@ Uma solução empresarial de design e biblioteca UI para React.
 
 </div>
 
-[![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Yl83RJhUE7kAAAAAAAAAAABkARQnAQ)](https://ant.design)
+[![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Yl83RJhUE7kAAAAAAAAAAABkARQnAQ)](https://4x.ant.design)
 
 [English](./README.md) | Português | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md) | [日本語](./README-ja_JP.md)
 
@@ -60,7 +60,7 @@ Uma solução empresarial de design e biblioteca UI para React.
 
 ## 🖥 Suporte aos ambientes
 
-- Navegadores modernos e Internet Explorer 11 (com [polyfills](https://ant.design/docs/react/getting-started#Compatibility))
+- Navegadores modernos e Internet Explorer 11 (com [polyfills](https://4x.ant.design/docs/react/getting-started#Compatibility))
 - Renderização no lado do servidor (server-side)
 - [Electron](https://www.electronjs.org/)
 
@@ -99,16 +99,16 @@ import 'antd/dist/antd.css'; // ou 'antd/dist/antd.less'
 
 ### TypeScript
 
-Veja [Uso no Typescript](https://ant.design/docs/react/use-in-typescript).
+Veja [Uso no Typescript](https://4x.ant.design/docs/react/use-in-typescript).
 
 ## 🌍 Internacionalização
 
-Veja [i18n](https://ant.design/docs/react/i18n).
+Veja [i18n](https://4x.ant.design/docs/react/i18n).
 
 ## 🔗 Links
 
-- [Página inicial](https://ant.design/)
-- [Componentes](https://ant.design/components/overview)
+- [Página inicial](https://4x.ant.design/)
+- [Componentes](https://4x.ant.design/components/overview)
 - [Ant Design Pro](http://pro.ant.design/)
 - [Ant Design Charts](https://charts.ant.design)
 - [Change Log](CHANGELOG.en-US.md)
@@ -124,10 +124,10 @@ Veja [i18n](https://ant.design/docs/react/i18n).
 - [Mercado de páginas](http://scaffold.ant.design)
 - [Instruções ao desenvolvedor](https://github.com/ant-design/ant-design/wiki/Development)
 - [Versionando as notas de atualização](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
-- [FAQ](https://ant.design/docs/react/faq)
-- [CodeSandbox Template](https://u.ant.design/codesandbox-repro) para relatório de erros
+- [FAQ](https://4x.ant.design/docs/react/faq)
+- [CodeSandbox Template](https://u.ant.design/codesandbox-repro-4x) para relatório de erros
 - [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
-- [Customize Theme](https://ant.design/docs/react/customize-theme)
+- [Customize Theme](https://4x.ant.design/docs/react/customize-theme)
 - [How to Apply for Being A Collaborator](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
 
 ## ⌨️ Desenvolvimento

README-sp_MX.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <a href="https://ant.design">
+  <a href="https://4x.ant.design">
     <img width="200" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
   </a>
 </p>
@@ -45,7 +45,7 @@ Un lenguaje de diseño de interfaz de usuario de clase empresarial y una bibliot
 
 </div>
 
-[![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Yl83RJhUE7kAAAAAAAAAAABkARQnAQ)](https://ant.design)
+[![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Yl83RJhUE7kAAAAAAAAAAABkARQnAQ)](https://4x.ant.design)
 
 [English](./README.md) | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | Spanish | [日本語](./README-ja_JP.md)
 
@@ -68,7 +68,7 @@ Un lenguaje de diseño de interfaz de usuario de clase empresarial y una bibliot
 | --- | --- | --- | --- | --- |
 | IE11, Edge | últimas 2 versiones | últimas 2 versiones | últimas 2 versiones | últimas 2 versiones |
 
-## 📦 Instalar 
+## 📦 Instalar
 
 ```bash
 npm install antd
@@ -99,16 +99,16 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
 
 ### TypeScript
 
-`antd` está escrito en TypeScript con definiciones completas, ver Usar en TypeScript [Usar en TypeScript](https://ant.design/docs/react/use-in-typescript) para comenzar.
+`antd` está escrito en TypeScript con definiciones completas, ver Usar en TypeScript [Usar en TypeScript](https://4x.ant.design/docs/react/use-in-typescript) para comenzar.
 
 ## 🌍 Internacionalización
 
-Docenas de idiomas compatibles en `antd`, ver [i18n](https://ant.design/docs/react/i18n).
+Docenas de idiomas compatibles en `antd`, ver [i18n](https://4x.ant.design/docs/react/i18n).
 
 ## 🔗 Enlaces
 
-- [Página de Inicio](https://ant.design/)
-- [Descripción General de los Componentes](https://ant.design/components/overview)
+- [Página de Inicio](https://4x.ant.design/)
+- [Descripción General de los Componentes](https://4x.ant.design/components/overview)
 - [Ant Design Pro](http://pro.ant.design/)
 - [Cambio de Registro](CHANGELOG.en-US.md)
 - [componentes-rc](http://react-component.github.io/)
@@ -122,9 +122,9 @@ Docenas de idiomas compatibles en `antd`, ver [i18n](https://ant.design/docs/rea
 - [Mercado Scaffold](http://scaffold.ant.design)
 - [Instrucción para Desarrolladores](https://github.com/ant-design/ant-design/wiki/Development)
 - [Nota de la Versión de Control de Versiones](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
-- [FAQ](https://ant.design/docs/react/faq)
-- [Plantilla de CodeSandbox](https://u.ant.design/codesandbox-repro) para reportes de errores
-- [Tema personalizado](https://ant.design/docs/react/customize-theme)
+- [FAQ](https://4x.ant.design/docs/react/faq)
+- [Plantilla de CodeSandbox](https://u.ant.design/codesandbox-repro-4x) para reportes de errores
+- [Tema personalizado](https://4x.ant.design/docs/react/customize-theme)
 - [Cómo Postularse para ser Colaborador](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
 
 ## ⌨️ Desarrollo

README-uk_UA.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <a href="https://ant.design">
+  <a href="https://4x.ant.design">
     <img width="200" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
   </a>
 </p>
@@ -45,7 +45,7 @@
 
 </div>
 
-[![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Yl83RJhUE7kAAAAAAAAAAABkARQnAQ)](https://ant.design)
+[![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Yl83RJhUE7kAAAAAAAAAAABkARQnAQ)](https://4x.ant.design)
 
 [English](./README.md) | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | Українською | [Spanish](./README-sp_MX.md) | [日本語](./README-ja_JP.md)
 
@@ -99,16 +99,16 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
 
 ### TypeScript
 
-`antd` написано на TypeScript із повною типізацією, вибери [Використання у TypeScript](https://ant.design/docs/react/use-in-typescript) щоб розпочати.
+`antd` написано на TypeScript із повною типізацією, вибери [Використання у TypeScript](https://4x.ant.design/docs/react/use-in-typescript) щоб розпочати.
 
 ## 🌍 Інтернаціоналізація
 
-Десятки мов підтримуються в `antd`, дивись [i18n](https://ant.design/docs/react/i18n).
+Десятки мов підтримуються в `antd`, дивись [i18n](https://4x.ant.design/docs/react/i18n).
 
 ## 🔗 Посилання
 
-- [Домашня сторінка](https://ant.design/)
-- [Компоненти](https://ant.design/components/overview)
+- [Домашня сторінка](https://4x.ant.design/)
+- [Компоненти](https://4x.ant.design/components/overview)
 - [Ant Design Pro](http://pro.ant.design/)
 - [Change Log](CHANGELOG.en-US.md)
 - [rc-components](http://react-component.github.io/)
@@ -122,9 +122,9 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
 - [Scaffold Market](http://scaffold.ant.design)
 - [Інструкція розробника](https://github.com/ant-design/ant-design/wiki/Development)
 - [Примітка до випуску версій](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
-- [FAQ](https://ant.design/docs/react/faq)
-- [CodeSandbox темплейт](https://u.ant.design/codesandbox-repro) для звітів про помилки
-- [Кастомізація теми](https://ant.design/docs/react/customize-theme)
+- [FAQ](https://4x.ant.design/docs/react/faq)
+- [CodeSandbox темплейт](https://u.ant.design/codesandbox-repro-4x) для звітів про помилки
+- [Кастомізація теми](https://4x.ant.design/docs/react/customize-theme)
 - [Як подати заявку на участь у програмі Співавторства](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
 
 ## ⌨️ Розробка

README-zh_CN.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <a href="https://ant.design">
+  <a href="https://4x.ant.design">
     <img width="200" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
   </a>
 </p>
@@ -45,7 +45,7 @@
 
 </div>
 
-[![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Ey3wTo-5__QAAAAAAAAAAABkARQnAQ)](https://ant.design/index-cn)
+[![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Ey3wTo-5__QAAAAAAAAAAABkARQnAQ)](https://4x.ant.design/index-cn)
 
 [English](./README.md) | [Português](./README-pt_BR.md) | 简体中文 | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md) | [日本語](./README-ja_JP.md)
 
@@ -60,7 +60,7 @@
 
 ## 🖥 兼容环境
 
-- 现代浏览器和 IE11（需要 [polyfills](https://ant.design/docs/react/getting-started-cn#兼容性)）。
+- 现代浏览器和 IE11（需要 [polyfills](https://4x.ant.design/docs/react/getting-started-cn#兼容性)）。
 - 支持服务端渲染。
 - [Electron](https://www.electronjs.org/)
 
@@ -99,22 +99,22 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
 
 ### 🌈 定制主题
 
-参考 [定制主题](https://ant.design/docs/react/customize-theme-cn) 文档。
+参考 [定制主题](https://4x.ant.design/docs/react/customize-theme-cn) 文档。
 
 ### 🛡 TypeScript
 
-参考 [在 TypeScript 中使用](https://ant.design/docs/react/use-in-typescript-cn)。
+参考 [在 TypeScript 中使用](https://4x.ant.design/docs/react/use-in-typescript-cn)。
 
 ## 🌍 国际化
 
-参考 [国际化文档](https://ant.design/docs/react/i18n-cn)。
+参考 [国际化文档](https://4x.ant.design/docs/react/i18n-cn)。
 
 ## 🔗 链接
 
-- [首页](https://ant.design/)
-- [所有组件](https://ant.design/components/overview-cn)
+- [首页](https://4x.ant.design/)
+- [所有组件](https://4x.ant.design/components/overview-cn)
 - [Ant Design Pro](http://pro.ant.design/)
-- [更新日志](CHANGELOG.en-US.md)
+- [更新日志](CHANGELOG.zh-CN.md)
 - [React 底层基础组件](http://react-component.github.io/)
 - [移动端组件](http://mobile.ant.design)
 - [页面级组件](https://procomponents.ant.design)
@@ -127,10 +127,10 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
 - [设计规范速查手册](https://github.com/ant-design/ant-design/wiki/Ant-Design-%E8%AE%BE%E8%AE%A1%E5%9F%BA%E7%A1%80%E7%AE%80%E7%89%88)
 - [开发者说明](https://github.com/ant-design/ant-design/wiki/Development)
 - [版本发布规则](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
-- [常见问题](https://ant.design/docs/react/faq-cn)
-- [CodeSandbox 模板](https://u.ant.design/codesandbox-repro) for bug reports
-- [定制主题](https://ant.design/docs/react/customize-theme-cn)
-- [国际化](https://ant.design/docs/react/i18n-cn)
+- [常见问题](https://4x.ant.design/docs/react/faq-cn)
+- [CodeSandbox 模板](https://u.ant.design/codesandbox-repro-4x) for bug reports
+- [定制主题](https://4x.ant.design/docs/react/customize-theme-cn)
+- [国际化](https://4x.ant.design/docs/react/i18n-cn)
 - [成为社区协作成员](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
 
 ## ⌨️ 本地开发

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <a href="https://ant.design">
+  <a href="https://4x.ant.design">
     <img width="200" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
   </a>
 </p>
@@ -34,10 +34,10 @@ An enterprise-class UI design language and React UI library.
 [twitter-url]: https://twitter.com/AntDesignUI
 [discussions-image]: https://img.shields.io/badge/discussions-on%20github-blue?style=flat-square
 [discussions-url]: https://github.com/ant-design/ant-design/discussions
-[bundlesize-js-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.js?label=antd.min.js&compression=gzip&style=flat-square
-[bundlesize-css-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.css?label=antd.min.css&compression=gzip&style=flat-square
-[unpkg-js-url]: https://unpkg.com/browse/antd/dist/antd.min.js
-[unpkg-css-url]: https://unpkg.com/browse/antd/dist/antd.min.css
+[bundlesize-js-image]: https://img.badgesize.io/https:/unpkg.com/antd@4.x/dist/antd.min.js?label=antd.min.js&compression=gzip&style=flat-square
+[bundlesize-css-image]: https://img.badgesize.io/https:/unpkg.com/antd@4.x/dist/antd.min.css?label=antd.min.css&compression=gzip&style=flat-square
+[unpkg-js-url]: https://unpkg.com/browse/antd@4.x/dist/antd.min.js
+[unpkg-css-url]: https://unpkg.com/browse/antd@4.x/dist/antd.min.css
 [issues-helper-image]: https://img.shields.io/badge/using-issues--helper-orange?style=flat-square
 [issues-helper-url]: https://github.com/actions-cool/issues-helper
 [renovate-image]: https://img.shields.io/badge/renovate-enabled-brightgreen.svg?style=flat-square
@@ -45,7 +45,7 @@ An enterprise-class UI design language and React UI library.
 
 </div>
 
-[![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Yl83RJhUE7kAAAAAAAAAAABkARQnAQ)](https://ant.design)
+[![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Yl83RJhUE7kAAAAAAAAAAABkARQnAQ)](https://4x.ant.design)
 
 English | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md) | [日本語](./README-ja_JP.md)
 
@@ -99,16 +99,16 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
 
 ### TypeScript
 
-`antd` is written in TypeScript with complete definitions, check [Use in TypeScript](https://ant.design/docs/react/use-in-typescript) to get started.
+`antd` is written in TypeScript with complete definitions, check [Use in TypeScript](https://4x.ant.design/docs/react/use-in-typescript) to get started.
 
 ## 🌍 Internationalization
 
-Dozens of languages supported in `antd`, see [i18n](https://ant.design/docs/react/i18n).
+Dozens of languages supported in `antd`, see [i18n](https://4x.ant.design/docs/react/i18n).
 
 ## 🔗 Links
 
-- [Home page](https://ant.design/)
-- [Components Overview](https://ant.design/components/overview)
+- [Home page](https://4x.ant.design/)
+- [Components Overview](https://4x.ant.design/components/overview)
 - [Ant Design Pro](http://pro.ant.design/)
 - [Change Log](CHANGELOG.en-US.md)
 - [rc-components](http://react-component.github.io/)
@@ -122,9 +122,9 @@ Dozens of languages supported in `antd`, see [i18n](https://ant.design/docs/reac
 - [Scaffold Market](http://scaffold.ant.design)
 - [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development)
 - [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
-- [FAQ](https://ant.design/docs/react/faq)
-- [CodeSandbox Template](https://u.ant.design/codesandbox-repro) for bug reports
-- [Customize Theme](https://ant.design/docs/react/customize-theme)
+- [FAQ](https://4x.ant.design/docs/react/faq)
+- [CodeSandbox Template](https://u.ant.design/codesandbox-repro-4x) for bug reports
+- [Customize Theme](https://4x.ant.design/docs/react/customize-theme)
 - [How to Apply for Being A Collaborator](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
 
 ## ⌨️ Development

components/_util/ActionButton.tsx

@@ -20,7 +20,7 @@ function isThenable(thing?: PromiseLike<any>): boolean {
   return !!(thing && !!thing.then);
 }
 
-const ActionButton: React.FC<ActionButtonProps> = props => {
+const ActionButton: React.FC<ActionButtonProps> = (props) => {
   const clickedRef = React.useRef<boolean>(false);
   const ref = React.useRef<HTMLInputElement>(null);
   const [loading, setLoading] = useState<ButtonProps['loading']>(false);
@@ -55,12 +55,10 @@ const ActionButton: React.FC<ActionButtonProps> = props => {
         clickedRef.current = false;
       },
       (e: Error) => {
-        // Emit error when catch promise reject
-        // eslint-disable-next-line no-console
-        console.error(e);
         // See: https://github.com/ant-design/ant-design/issues/6183
         setLoading(false, true);
         clickedRef.current = false;
+        return Promise.reject(e);
       },
     );
   };

components/alert/index.tsx

@@ -99,11 +99,11 @@ const CloseIcon: React.FC<CloseIconProps> = props => {
   ) : null;
 };
 
-interface AlertInterface extends React.FC<AlertProps> {
+type CompoundedComponent = React.FC<AlertProps> & {
   ErrorBoundary: typeof ErrorBoundary;
-}
+};
 
-const Alert: AlertInterface = ({
+const Alert: CompoundedComponent = ({
   description,
   prefixCls: customizePrefixCls,
   message,

components/anchor/index.tsx

@@ -6,11 +6,11 @@ export { AnchorLinkProps } from './AnchorLink';
 
 type InternalAnchorType = typeof InternalAnchor;
 
-interface AnchorInterface extends InternalAnchorType {
+type CompoundedComponent = InternalAnchorType & {
   Link: typeof AnchorLink;
-}
+};
 
-const Anchor = InternalAnchor as AnchorInterface;
+const Anchor = InternalAnchor as CompoundedComponent;
 
 Anchor.Link = AnchorLink;
 export default Anchor;

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"

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"

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

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);
+  });
 });

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>
   </>
 );
 

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

components/badge/index.tsx

@@ -12,9 +12,9 @@ import { isPresetColor } from './utils';
 
 export { ScrollNumberProps } from './ScrollNumber';
 
-interface CompoundedComponent extends React.FC<BadgeProps> {
+type CompoundedComponent = React.FC<BadgeProps> & {
   Ribbon: typeof Ribbon;
-}
+};
 
 export interface BadgeProps {
   /** Number to show in badge */
@@ -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)) &&

components/breadcrumb/Breadcrumb.tsx

@@ -67,12 +67,12 @@ const addChildPath = (paths: string[], childPath: string, params: any) => {
   return originalPaths;
 };
 
-interface BreadcrumbInterface extends React.FC<BreadcrumbProps> {
+type CompoundedComponent = React.FC<BreadcrumbProps> & {
   Item: typeof BreadcrumbItem;
   Separator: typeof BreadcrumbSeparator;
-}
+};
 
-const Breadcrumb: BreadcrumbInterface = ({
+const Breadcrumb: CompoundedComponent = ({
   prefixCls: customizePrefixCls,
   separator = '/',
   style,

components/breadcrumb/BreadcrumbItem.tsx

@@ -19,10 +19,10 @@ export interface BreadcrumbItemProps {
   /** @deprecated Please use `menu` instead */
   overlay?: DropdownProps['overlay'];
 }
-interface BreadcrumbItemInterface extends React.FC<BreadcrumbItemProps> {
+type CompoundedComponent = React.FC<BreadcrumbItemProps> & {
   __ANT_BREADCRUMB_ITEM: boolean;
-}
-const BreadcrumbItem: BreadcrumbItemInterface = (props) => {
+};
+const BreadcrumbItem: CompoundedComponent = (props) => {
   const {
     prefixCls: customizePrefixCls,
     separator = '/',

components/breadcrumb/BreadcrumbSeparator.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';
 
-interface BreadcrumbSeparatorInterface extends React.FC<{ children?: React.ReactNode }> {
+type CompoundedComponent = React.FC<{ children?: React.ReactNode }> & {
   /** @internal */
   __ANT_BREADCRUMB_SEPARATOR: boolean;
-}
+};
 
-const BreadcrumbSeparator: BreadcrumbSeparatorInterface = ({ children }) => {
+const BreadcrumbSeparator: CompoundedComponent = ({ children }) => {
   const { getPrefixCls } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('breadcrumb');
 

components/button/button.tsx

@@ -128,12 +128,13 @@ export type NativeButtonProps = {
 
 export type ButtonProps = Partial<AnchorButtonProps & NativeButtonProps>;
 
-interface CompoundedComponent
-  extends React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>> {
+type CompoundedComponent = React.ForwardRefExoticComponent<
+  ButtonProps & React.RefAttributes<HTMLElement>
+> & {
   Group: typeof Group;
   /** @internal */
   __ANT_BUTTON: boolean;
-}
+};
 
 type Loading = number | boolean;
 

components/calendar/locale/uz_UZ.tsx

@@ -0,0 +1,3 @@
+import uzUZ from '../../date-picker/locale/uz_UZ';
+
+export default uzUZ;

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

@@ -757,6 +757,7 @@ Array [
             >
               <div
                 class="ant-tabs-tab ant-tabs-tab-active"
+                data-node-key="tab1"
               >
                 <div
                   aria-disabled="false"
@@ -770,6 +771,7 @@ Array [
               </div>
               <div
                 class="ant-tabs-tab"
+                data-node-key="tab2"
               >
                 <div
                   aria-disabled="false"
@@ -893,6 +895,7 @@ Array [
             >
               <div
                 class="ant-tabs-tab"
+                data-node-key="article"
               >
                 <div
                   aria-disabled="false"
@@ -906,6 +909,7 @@ Array [
               </div>
               <div
                 class="ant-tabs-tab ant-tabs-tab-active"
+                data-node-key="app"
               >
                 <div
                   aria-disabled="false"
@@ -919,6 +923,7 @@ Array [
               </div>
               <div
                 class="ant-tabs-tab"
+                data-node-key="project"
               >
                 <div
                   aria-disabled="false"

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

@@ -757,6 +757,7 @@ Array [
             >
               <div
                 class="ant-tabs-tab ant-tabs-tab-active"
+                data-node-key="tab1"
               >
                 <div
                   aria-disabled="false"
@@ -770,6 +771,7 @@ Array [
               </div>
               <div
                 class="ant-tabs-tab"
+                data-node-key="tab2"
               >
                 <div
                   aria-disabled="false"
@@ -874,6 +876,7 @@ Array [
             >
               <div
                 class="ant-tabs-tab"
+                data-node-key="article"
               >
                 <div
                   aria-disabled="false"
@@ -887,6 +890,7 @@ Array [
               </div>
               <div
                 class="ant-tabs-tab ant-tabs-tab-active"
+                data-node-key="app"
               >
                 <div
                   aria-disabled="false"
@@ -900,6 +904,7 @@ Array [
               </div>
               <div
                 class="ant-tabs-tab"
+                data-node-key="project"
               >
                 <div
                   aria-disabled="false"

components/card/style/index.less

@@ -243,6 +243,7 @@
     }
 
     &-detail {
+      flex: 1;
       overflow: hidden;
 
       > div:not(:last-child) {

components/cascader/index.tsx

@@ -101,7 +101,7 @@ type MultipleCascaderProps = Omit<RcMultipleCascaderProps, 'checkable' | 'option
 
 type UnionCascaderProps = SingleCascaderProps | MultipleCascaderProps;
 
-export type CascaderProps<DataNodeType> = UnionCascaderProps & {
+export type CascaderProps<DataNodeType = any> = UnionCascaderProps & {
   multiple?: boolean;
   size?: SizeType;
   disabled?: boolean;
@@ -122,7 +122,7 @@ export interface CascaderRef {
   blur: () => void;
 }
 
-const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<CascaderRef>) => {
+const Cascader = React.forwardRef((props: CascaderProps, ref: React.Ref<CascaderRef>) => {
   const {
     prefixCls: customizePrefixCls,
     size: customizeSize,
@@ -176,12 +176,6 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
     '`dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
   );
 
-  warning(
-    !multiple || !props.displayRender,
-    'Cascader',
-    '`displayRender` not work on `multiple`. Please use `tagRender` instead.',
-  );
-
   // =================== No Found ====================
   const mergedNotFoundContent = notFoundContent || (renderEmpty || defaultRenderEmpty)('Cascader');
 

components/checkbox/__tests__/__snapshots__/checkbox.test.tsx.snap

@@ -10,7 +10,6 @@ exports[`Checkbox rtl render component should be rendered correctly in RTL direc
     <input
       class="ant-checkbox-input"
       type="checkbox"
-      value=""
     />
     <span
       class="ant-checkbox-inner"

components/checkbox/index.tsx

@@ -6,12 +6,13 @@ import Group from './Group';
 export { CheckboxChangeEvent, CheckboxProps } from './Checkbox';
 export { CheckboxGroupProps, CheckboxOptionType } from './Group';
 
-interface CompoundedComponent
-  extends React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>> {
+type CompoundedComponent = React.ForwardRefExoticComponent<
+  CheckboxProps & React.RefAttributes<HTMLInputElement>
+> & {
   Group: typeof Group;
   /** @internal */
   __ANT_CHECKBOX: boolean;
-}
+};
 
 const Checkbox = InternalCheckbox as CompoundedComponent;
 

components/collapse/Collapse.tsx

@@ -48,11 +48,11 @@ interface PanelProps {
   collapsible?: CollapsibleType;
 }
 
-interface CollapseInterface extends React.FC<CollapseProps> {
+type CompoundedComponent = React.FC<CollapseProps> & {
   Panel: typeof CollapsePanel;
-}
+};
 
-const Collapse: CollapseInterface = props => {
+const Collapse: CompoundedComponent = (props) => {
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const {
     prefixCls: customizePrefixCls,

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>
   );

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

@@ -12091,7 +12091,6 @@ exports[`ConfigProvider components Checkbox configProvider 1`] = `
       <input
         class="config-checkbox-input"
         type="checkbox"
-        value=""
       />
       <span
         class="config-checkbox-inner"
@@ -12118,7 +12117,6 @@ exports[`ConfigProvider components Checkbox configProvider componentDisabled 1`]
         class="config-checkbox-input"
         disabled=""
         type="checkbox"
-        value=""
       />
       <span
         class="config-checkbox-inner"
@@ -12144,7 +12142,6 @@ exports[`ConfigProvider components Checkbox configProvider componentSize large 1
       <input
         class="config-checkbox-input"
         type="checkbox"
-        value=""
       />
       <span
         class="config-checkbox-inner"
@@ -12170,7 +12167,6 @@ exports[`ConfigProvider components Checkbox configProvider componentSize middle
       <input
         class="config-checkbox-input"
         type="checkbox"
-        value=""
       />
       <span
         class="config-checkbox-inner"
@@ -12196,7 +12192,6 @@ exports[`ConfigProvider components Checkbox configProvider virtual and dropdownM
       <input
         class="ant-checkbox-input"
         type="checkbox"
-        value=""
       />
       <span
         class="ant-checkbox-inner"
@@ -12222,7 +12217,6 @@ exports[`ConfigProvider components Checkbox normal 1`] = `
       <input
         class="ant-checkbox-input"
         type="checkbox"
-        value=""
       />
       <span
         class="ant-checkbox-inner"
@@ -12248,7 +12242,6 @@ exports[`ConfigProvider components Checkbox prefixCls 1`] = `
       <input
         class="prefix-Checkbox-input"
         type="checkbox"
-        value=""
       />
       <span
         class="prefix-Checkbox-inner"
@@ -17966,18 +17959,22 @@ HTMLCollection [
         class="config-menu config-menu-sub config-menu-inline"
         data-menu-list="true"
         id="rc-menu-uuid-test-bamboo-popup"
+        role="menu"
       >
         <li
           class="config-menu-item-group"
+          role="presentation"
         >
           <div
             class="config-menu-item-group-title"
+            role="presentation"
             title="Item 1"
           >
             Item 1
           </div>
           <ul
             class="config-menu-item-group-list"
+            role="group"
           >
             <li
               class="config-menu-item config-menu-item-only-child"
@@ -18039,18 +18036,22 @@ HTMLCollection [
         class="config-menu config-menu-sub config-menu-inline"
         data-menu-list="true"
         id="rc-menu-uuid-test-bamboo-popup"
+        role="menu"
       >
         <li
           class="config-menu-item-group"
+          role="presentation"
         >
           <div
             class="config-menu-item-group-title"
+            role="presentation"
             title="Item 1"
           >
             Item 1
           </div>
           <ul
             class="config-menu-item-group-list"
+            role="group"
           >
             <li
               class="config-menu-item config-menu-item-only-child"
@@ -18112,18 +18113,22 @@ HTMLCollection [
         class="config-menu config-menu-sub config-menu-inline"
         data-menu-list="true"
         id="rc-menu-uuid-test-bamboo-popup"
+        role="menu"
       >
         <li
           class="config-menu-item-group"
+          role="presentation"
         >
           <div
             class="config-menu-item-group-title"
+            role="presentation"
             title="Item 1"
           >
             Item 1
           </div>
           <ul
             class="config-menu-item-group-list"
+            role="group"
           >
             <li
               class="config-menu-item config-menu-item-only-child"
@@ -18185,18 +18190,22 @@ HTMLCollection [
         class="config-menu config-menu-sub config-menu-inline"
         data-menu-list="true"
         id="rc-menu-uuid-test-bamboo-popup"
+        role="menu"
       >
         <li
           class="config-menu-item-group"
+          role="presentation"
         >
           <div
             class="config-menu-item-group-title"
+            role="presentation"
             title="Item 1"
           >
             Item 1
           </div>
           <ul
             class="config-menu-item-group-list"
+            role="group"
           >
             <li
               class="config-menu-item config-menu-item-only-child"
@@ -18258,18 +18267,22 @@ HTMLCollection [
         class="ant-menu ant-menu-sub ant-menu-inline"
         data-menu-list="true"
         id="rc-menu-uuid-test-bamboo-popup"
+        role="menu"
       >
         <li
           class="ant-menu-item-group"
+          role="presentation"
         >
           <div
             class="ant-menu-item-group-title"
+            role="presentation"
             title="Item 1"
           >
             Item 1
           </div>
           <ul
             class="ant-menu-item-group-list"
+            role="group"
           >
             <li
               class="ant-menu-item ant-menu-item-only-child"
@@ -18331,18 +18344,22 @@ HTMLCollection [
         class="ant-menu ant-menu-sub ant-menu-inline"
         data-menu-list="true"
         id="rc-menu-uuid-test-bamboo-popup"
+        role="menu"
       >
         <li
           class="ant-menu-item-group"
+          role="presentation"
         >
           <div
             class="ant-menu-item-group-title"
+            role="presentation"
             title="Item 1"
           >
             Item 1
           </div>
           <ul
             class="ant-menu-item-group-list"
+            role="group"
           >
             <li
               class="ant-menu-item ant-menu-item-only-child"
@@ -18404,19 +18421,23 @@ HTMLCollection [
         class="prefix-Menu prefix-Menu-sub prefix-Menu-inline"
         data-menu-list="true"
         id="rc-menu-uuid-test-bamboo-popup"
+        role="menu"
       >
         <li
           class="prefix-Menu-item-group"
           prefixcls="prefix-Menu"
+          role="presentation"
         >
           <div
             class="prefix-Menu-item-group-title"
+            role="presentation"
             title="Item 1"
           >
             Item 1
           </div>
           <ul
             class="prefix-Menu-item-group-list"
+            role="group"
           >
             <li
               class="prefix-Menu-item prefix-Menu-item-only-child"
@@ -22364,7 +22385,6 @@ exports[`ConfigProvider components Radio configProvider 1`] = `
           checked=""
           class="config-radio-input"
           type="radio"
-          value=""
         />
         <span
           class="config-radio-inner"
@@ -22388,7 +22408,6 @@ exports[`ConfigProvider components Radio configProvider 1`] = `
           checked=""
           class="config-radio-button-input"
           type="radio"
-          value=""
         />
         <span
           class="config-radio-button-inner"
@@ -22418,7 +22437,6 @@ exports[`ConfigProvider components Radio configProvider componentDisabled 1`] =
           class="config-radio-input"
           disabled=""
           type="radio"
-          value=""
         />
         <span
           class="config-radio-inner"
@@ -22443,7 +22461,6 @@ exports[`ConfigProvider components Radio configProvider componentDisabled 1`] =
           class="config-radio-button-input"
           disabled=""
           type="radio"
-          value=""
         />
         <span
           class="config-radio-button-inner"
@@ -22472,7 +22489,6 @@ exports[`ConfigProvider components Radio configProvider componentSize large 1`]
           checked=""
           class="config-radio-input"
           type="radio"
-          value=""
         />
         <span
           class="config-radio-inner"
@@ -22496,7 +22512,6 @@ exports[`ConfigProvider components Radio configProvider componentSize large 1`]
           checked=""
           class="config-radio-button-input"
           type="radio"
-          value=""
         />
         <span
           class="config-radio-button-inner"
@@ -22525,7 +22540,6 @@ exports[`ConfigProvider components Radio configProvider componentSize middle 1`]
           checked=""
           class="config-radio-input"
           type="radio"
-          value=""
         />
         <span
           class="config-radio-inner"
@@ -22549,7 +22563,6 @@ exports[`ConfigProvider components Radio configProvider componentSize middle 1`]
           checked=""
           class="config-radio-button-input"
           type="radio"
-          value=""
         />
         <span
           class="config-radio-button-inner"
@@ -22578,7 +22591,6 @@ exports[`ConfigProvider components Radio configProvider virtual and dropdownMatc
           checked=""
           class="ant-radio-input"
           type="radio"
-          value=""
         />
         <span
           class="ant-radio-inner"
@@ -22602,7 +22614,6 @@ exports[`ConfigProvider components Radio configProvider virtual and dropdownMatc
           checked=""
           class="ant-radio-button-input"
           type="radio"
-          value=""
         />
         <span
           class="ant-radio-button-inner"
@@ -22631,7 +22642,6 @@ exports[`ConfigProvider components Radio normal 1`] = `
           checked=""
           class="ant-radio-input"
           type="radio"
-          value=""
         />
         <span
           class="ant-radio-inner"
@@ -22655,7 +22665,6 @@ exports[`ConfigProvider components Radio normal 1`] = `
           checked=""
           class="ant-radio-button-input"
           type="radio"
-          value=""
         />
         <span
           class="ant-radio-button-inner"
@@ -22684,7 +22693,6 @@ exports[`ConfigProvider components Radio prefixCls 1`] = `
           checked=""
           class="prefix-Radio-input"
           type="radio"
-          value=""
         />
         <span
           class="prefix-Radio-inner"
@@ -22708,7 +22716,6 @@ exports[`ConfigProvider components Radio prefixCls 1`] = `
           checked=""
           class="prefix-Radio-button-input"
           type="radio"
-          value=""
         />
         <span
           class="prefix-Radio-button-inner"
@@ -26947,7 +26954,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"
                   >
@@ -27070,7 +27077,6 @@ exports[`ConfigProvider components Table configProvider 1`] = `
                                       <input
                                         class="config-checkbox-input"
                                         type="checkbox"
-                                        value=""
                                       />
                                       <span
                                         class="config-checkbox-inner"
@@ -27253,7 +27259,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"
                   >
@@ -27377,7 +27383,6 @@ exports[`ConfigProvider components Table configProvider componentDisabled 1`] =
                                         class="config-checkbox-input"
                                         disabled=""
                                         type="checkbox"
-                                        value=""
                                       />
                                       <span
                                         class="config-checkbox-inner"
@@ -27561,7 +27566,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"
                   >
@@ -27684,7 +27689,6 @@ exports[`ConfigProvider components Table configProvider componentSize large 1`]
                                       <input
                                         class="config-checkbox-input"
                                         type="checkbox"
-                                        value=""
                                       />
                                       <span
                                         class="config-checkbox-inner"
@@ -27867,7 +27871,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"
                   >
@@ -27990,7 +27994,6 @@ exports[`ConfigProvider components Table configProvider componentSize middle 1`]
                                       <input
                                         class="config-checkbox-input"
                                         type="checkbox"
-                                        value=""
                                       />
                                       <span
                                         class="config-checkbox-inner"
@@ -28173,7 +28176,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"
                   >
@@ -28296,7 +28299,6 @@ exports[`ConfigProvider components Table configProvider virtual and dropdownMatc
                                       <input
                                         class="ant-checkbox-input"
                                         type="checkbox"
-                                        value=""
                                       />
                                       <span
                                         class="ant-checkbox-inner"
@@ -28479,7 +28481,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"
                   >
@@ -28602,7 +28604,6 @@ exports[`ConfigProvider components Table normal 1`] = `
                                       <input
                                         class="ant-checkbox-input"
                                         type="checkbox"
-                                        value=""
                                       />
                                       <span
                                         class="ant-checkbox-inner"
@@ -28785,7 +28786,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"
                   >
@@ -28908,7 +28909,6 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
                                       <input
                                         class="ant-checkbox-input"
                                         type="checkbox"
-                                        value=""
                                       />
                                       <span
                                         class="ant-checkbox-inner"
@@ -29080,6 +29080,7 @@ exports[`ConfigProvider components Tabs configProvider 1`] = `
       >
         <div
           class="config-tabs-tab config-tabs-tab-active"
+          data-node-key="Light"
         >
           <div
             aria-controls="rc-tabs-test-panel-Light"
@@ -29169,6 +29170,7 @@ exports[`ConfigProvider components Tabs configProvider componentDisabled 1`] = `
       >
         <div
           class="config-tabs-tab config-tabs-tab-active"
+          data-node-key="Light"
         >
           <div
             aria-controls="rc-tabs-test-panel-Light"
@@ -29258,6 +29260,7 @@ exports[`ConfigProvider components Tabs configProvider componentSize large 1`] =
       >
         <div
           class="config-tabs-tab config-tabs-tab-active"
+          data-node-key="Light"
         >
           <div
             aria-controls="rc-tabs-test-panel-Light"
@@ -29347,6 +29350,7 @@ exports[`ConfigProvider components Tabs configProvider componentSize middle 1`]
       >
         <div
           class="config-tabs-tab config-tabs-tab-active"
+          data-node-key="Light"
         >
           <div
             aria-controls="rc-tabs-test-panel-Light"
@@ -29436,6 +29440,7 @@ exports[`ConfigProvider components Tabs configProvider virtual and dropdownMatch
       >
         <div
           class="ant-tabs-tab ant-tabs-tab-active"
+          data-node-key="Light"
         >
           <div
             aria-controls="rc-tabs-test-panel-Light"
@@ -29525,6 +29530,7 @@ exports[`ConfigProvider components Tabs normal 1`] = `
       >
         <div
           class="ant-tabs-tab ant-tabs-tab-active"
+          data-node-key="Light"
         >
           <div
             aria-controls="rc-tabs-test-panel-Light"
@@ -29614,6 +29620,7 @@ exports[`ConfigProvider components Tabs prefixCls 1`] = `
       >
         <div
           class="prefix-Tabs-tab prefix-Tabs-tab-active"
+          data-node-key="Light"
         >
           <div
             aria-controls="rc-tabs-test-panel-Light"
@@ -38716,7 +38723,6 @@ exports[`ConfigProvider components Transfer configProvider 1`] = `
           <input
             class="config-checkbox-input"
             type="checkbox"
-            value=""
           />
           <span
             class="config-checkbox-inner"
@@ -38876,7 +38882,6 @@ exports[`ConfigProvider components Transfer configProvider 1`] = `
           <input
             class="config-checkbox-input"
             type="checkbox"
-            value=""
           />
           <span
             class="config-checkbox-inner"
@@ -38990,7 +38995,6 @@ exports[`ConfigProvider components Transfer configProvider componentDisabled 1`]
             class="config-checkbox-input"
             disabled=""
             type="checkbox"
-            value=""
           />
           <span
             class="config-checkbox-inner"
@@ -39151,7 +39155,6 @@ exports[`ConfigProvider components Transfer configProvider componentDisabled 1`]
             class="config-checkbox-input"
             disabled=""
             type="checkbox"
-            value=""
           />
           <span
             class="config-checkbox-inner"
@@ -39264,7 +39267,6 @@ exports[`ConfigProvider components Transfer configProvider componentSize large 1
           <input
             class="config-checkbox-input"
             type="checkbox"
-            value=""
           />
           <span
             class="config-checkbox-inner"
@@ -39424,7 +39426,6 @@ exports[`ConfigProvider components Transfer configProvider componentSize large 1
           <input
             class="config-checkbox-input"
             type="checkbox"
-            value=""
           />
           <span
             class="config-checkbox-inner"
@@ -39537,7 +39538,6 @@ exports[`ConfigProvider components Transfer configProvider componentSize middle
           <input
             class="config-checkbox-input"
             type="checkbox"
-            value=""
           />
           <span
             class="config-checkbox-inner"
@@ -39697,7 +39697,6 @@ exports[`ConfigProvider components Transfer configProvider componentSize middle
           <input
             class="config-checkbox-input"
             type="checkbox"
-            value=""
           />
           <span
             class="config-checkbox-inner"
@@ -39810,7 +39809,6 @@ exports[`ConfigProvider components Transfer configProvider virtual and dropdownM
           <input
             class="ant-checkbox-input"
             type="checkbox"
-            value=""
           />
           <span
             class="ant-checkbox-inner"
@@ -39970,7 +39968,6 @@ exports[`ConfigProvider components Transfer configProvider virtual and dropdownM
           <input
             class="ant-checkbox-input"
             type="checkbox"
-            value=""
           />
           <span
             class="ant-checkbox-inner"
@@ -40083,7 +40080,6 @@ exports[`ConfigProvider components Transfer normal 1`] = `
           <input
             class="ant-checkbox-input"
             type="checkbox"
-            value=""
           />
           <span
             class="ant-checkbox-inner"
@@ -40243,7 +40239,6 @@ exports[`ConfigProvider components Transfer normal 1`] = `
           <input
             class="ant-checkbox-input"
             type="checkbox"
-            value=""
           />
           <span
             class="ant-checkbox-inner"
@@ -40356,7 +40351,6 @@ exports[`ConfigProvider components Transfer prefixCls 1`] = `
           <input
             class="ant-checkbox-input"
             type="checkbox"
-            value=""
           />
           <span
             class="ant-checkbox-inner"
@@ -40516,7 +40510,6 @@ exports[`ConfigProvider components Transfer prefixCls 1`] = `
           <input
             class="ant-checkbox-input"
             type="checkbox"
-            value=""
           />
           <span
             class="ant-checkbox-inner"
@@ -40627,7 +40620,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 +40685,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 +40778,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 +40843,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 +40936,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 +41001,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 +41094,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 +41159,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 +41252,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 +41317,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 +41410,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 +41475,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 +41568,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 +41633,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 +41762,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 +41960,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 +42097,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 +42234,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 +42371,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 +42508,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"

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

@@ -1,9 +1,13 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
+import type { ValidateMessages } from 'rc-field-form/es/interface';
 import ConfigProvider from '..';
-import { render } from '../../../tests/utils';
+import { render, waitFakeTimer, fireEvent } from '../../../tests/utils';
 import type { FormInstance } from '../../form';
 import Form from '../../form';
+import Button from '../../button';
+import Input from '../../input';
+import InputNumber from '../../input-number';
 import zhCN from '../../locale/zh_CN';
 
 describe('ConfigProvider.Form', () => {
@@ -81,6 +85,97 @@ describe('ConfigProvider.Form', () => {
       expect(explains[0]).toHaveTextContent('必须');
       expect(explains[explains.length - 1]).toHaveTextContent('年龄必须等于17');
     });
+
+    // copied: https://github.com/ant-design/ant-design/blob/5ce9818401f976fcb665eff2a48e5f05d17acf39/components/config-provider/__tests__/form.test.tsx#L99-L150
+    it('nested description should use the default value of this warehouse first', async () => {
+      const validateMessages: ValidateMessages = {
+        number: {
+          // eslint-disable-next-line no-template-curly-in-string
+          max: '${label} 最大值为 ${max}',
+          /**
+           * Intentionally not filling `range` to test default message
+           * default: https://github.com/ant-design/ant-design/blob/12596a06f2ff88d8a27e72f6f9bac7c63a0b2ece/components/locale/en_US.ts#L123
+           */
+          // range:
+        },
+      };
+
+      const formRef = React.createRef<FormInstance>();
+      const { container } = render(
+        <ConfigProvider form={{ validateMessages }}>
+          <Form ref={formRef} initialValues={{ age: 1, rate: 6 }}>
+            <Form.Item name="rate" rules={[{ type: 'number', max: 5 }]}>
+              <InputNumber />
+            </Form.Item>
+            <Form.Item name="age" rules={[{ type: 'number', max: 99, min: 18 }]}>
+              <InputNumber />
+            </Form.Item>
+          </Form>
+        </ConfigProvider>,
+      );
+
+      await act(async () => {
+        try {
+          await formRef.current?.validateFields();
+        } catch (e) {
+          // Do nothing
+        }
+      });
+
+      await act(async () => {
+        jest.runAllTimers();
+        await Promise.resolve();
+      });
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      expect(container.querySelectorAll('.ant-form-item-explain')).toHaveLength(2);
+      expect(container.querySelectorAll('.ant-form-item-explain')[0]).toHaveTextContent(
+        'rate 最大值为 5',
+      );
+      expect(container.querySelectorAll('.ant-form-item-explain')[1]).toHaveTextContent(
+        'age must be between 18-99',
+      );
+    });
+
+    // https://github.com/ant-design/ant-design/issues/43210
+    it('should merge parent ConfigProvider validateMessages', async () => {
+      const MyForm = () => (
+        <Form>
+          <Form.Item name="name" label="Name" rules={[{ required: true }]}>
+            <Input />
+          </Form.Item>
+          <Button type="primary" htmlType="submit">
+            Submit
+          </Button>
+        </Form>
+      );
+
+      const { container, getAllByRole, getAllByText } = render(
+        <ConfigProvider>
+          <MyForm />
+          <ConfigProvider form={{ validateMessages: { required: 'Required' } }}>
+            <MyForm />
+            <ConfigProvider>
+              <MyForm />
+            </ConfigProvider>
+          </ConfigProvider>
+        </ConfigProvider>,
+      );
+
+      const submitButtons = getAllByRole('button');
+      expect(submitButtons).toHaveLength(3);
+
+      submitButtons.forEach((b) => fireEvent.click(b));
+
+      await waitFakeTimer();
+
+      expect(container.querySelectorAll('.ant-form-item-explain-error')).toHaveLength(3);
+      expect(getAllByText('Please enter Name')).toHaveLength(1);
+      expect(getAllByText('Required')).toHaveLength(2);
+    });
   });
 
   describe('form requiredMark', () => {
@@ -125,4 +220,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();
+    });
+  });
 });

components/config-provider/context.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { ValidateMessages } from 'rc-field-form/lib/interface';
 import type { RequiredMark } from '../form/Form';
 import type { Locale } from '../locale-provider';
 import type { RenderEmptyHandler } from './defaultRenderEmpty';
@@ -45,6 +46,7 @@ export interface ConfigConsumerProps {
   virtual?: boolean;
   dropdownMatchSelectWidth?: boolean;
   form?: {
+    validateMessages?: ValidateMessages;
     requiredMark?: RequiredMark;
     colon?: boolean;
   };

components/config-provider/index.tsx

@@ -1,9 +1,10 @@
 import IconContext from '@ant-design/icons/lib/components/Context';
-import { FormProvider as RcFormProvider } from 'rc-field-form';
 import type { ValidateMessages } from 'rc-field-form/lib/interface';
 import useMemo from 'rc-util/lib/hooks/useMemo';
 import * as React from 'react';
+import { merge } from 'rc-util/lib/utils/set';
 import type { RequiredMark } from '../form/Form';
+import ValidateMessagesContext from '../form/validateMessagesContext';
 import type { Locale } from '../locale-provider';
 import LocaleProvider, { ANT_MARK } from '../locale-provider';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
@@ -224,19 +225,24 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = props => {
   );
 
   let childNode = children;
-  // Additional Form provider
-  let validateMessages: ValidateMessages = {};
 
-  if (locale) {
-    validateMessages =
-      locale.Form?.defaultValidateMessages || defaultLocale.Form?.defaultValidateMessages || {};
-  }
-  if (form && form.validateMessages) {
-    validateMessages = { ...validateMessages, ...form.validateMessages };
-  }
+  const validateMessages = React.useMemo(
+    () =>
+      merge(
+        defaultLocale.Form?.defaultValidateMessages || {},
+        memoedConfig.locale?.Form?.defaultValidateMessages || {},
+        memoedConfig.form?.validateMessages || {},
+        form?.validateMessages || {},
+      ),
+    [memoedConfig, form?.validateMessages],
+  );
 
   if (Object.keys(validateMessages).length > 0) {
-    childNode = <RcFormProvider validateMessages={validateMessages}>{children}</RcFormProvider>;
+    childNode = (
+      <ValidateMessagesContext.Provider value={validateMessages}>
+        {children}
+      </ValidateMessagesContext.Provider>
+    );
   }
 
   if (locale) {

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');

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}
             />
           );
         }}

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}
                 />
               );
             }}

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;

components/date-picker/style/index.less

@@ -318,7 +318,6 @@
   &-range-arrow {
     position: absolute;
     z-index: 1;
-    display: none;
     width: @arrow-size;
     height: @arrow-size;
     margin-left: @input-padding-horizontal-base * 1.5;

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>,
 ]
 `;
 

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>,
 ]
 `;
 

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>
   </>
 );
 

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;
     }
   }

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 |  |

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>
   );
 }
 

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 |  |

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';

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

@@ -6432,15 +6432,18 @@ Array [
       >
         <li
           class="ant-dropdown-menu-item-group"
+          role="presentation"
         >
           <div
             class="ant-dropdown-menu-item-group-title"
+            role="presentation"
             title="Item Group"
           >
             Item Group
           </div>
           <ul
             class="ant-dropdown-menu-item-group-list"
+            role="group"
           >
             <li
               class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
@@ -6577,18 +6580,22 @@ Array [
               <ul
                 class="ant-dropdown-menu ant-dropdown-menu-sub ant-dropdown-menu-vertical"
                 data-menu-list="true"
+                role="menu"
               >
                 <li
                   class="ant-dropdown-menu-item-group"
+                  role="presentation"
                 >
                   <div
                     class="ant-dropdown-menu-item-group-title"
+                    role="presentation"
                     title="Item 1"
                   >
                     Item 1
                   </div>
                   <ul
                     class="ant-dropdown-menu-item-group-list"
+                    role="group"
                   >
                     <li
                       class="ant-dropdown-menu-item ant-dropdown-menu-item-selected ant-dropdown-menu-item-only-child"
@@ -6660,15 +6667,18 @@ Array [
                 </li>
                 <li
                   class="ant-dropdown-menu-item-group"
+                  role="presentation"
                 >
                   <div
                     class="ant-dropdown-menu-item-group-title"
+                    role="presentation"
                     title="Item 2"
                   >
                     Item 2
                   </div>
                   <ul
                     class="ant-dropdown-menu-item-group-list"
+                    role="group"
                   >
                     <li
                       class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
@@ -6809,6 +6819,7 @@ Array [
               <ul
                 class="ant-dropdown-menu ant-dropdown-menu-sub ant-dropdown-menu-vertical"
                 data-menu-list="true"
+                role="menu"
               >
                 <li
                   class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
@@ -6924,6 +6935,7 @@ Array [
                       <ul
                         class="ant-dropdown-menu ant-dropdown-menu-sub ant-dropdown-menu-vertical"
                         data-menu-list="true"
+                        role="menu"
                       >
                         <li
                           class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
@@ -7066,6 +7078,7 @@ Array [
               <ul
                 class="ant-dropdown-menu ant-dropdown-menu-sub ant-dropdown-menu-vertical"
                 data-menu-list="true"
+                role="menu"
               >
                 <li
                   class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
@@ -9342,15 +9355,18 @@ Array [
       >
         <li
           class="ant-dropdown-menu-item-group"
+          role="presentation"
         >
           <div
             class="ant-dropdown-menu-item-group-title"
+            role="presentation"
             title="Group title"
           >
             Group title
           </div>
           <ul
             class="ant-dropdown-menu-item-group-list"
+            role="group"
           >
             <li
               class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
@@ -9468,6 +9484,7 @@ Array [
               <ul
                 class="ant-dropdown-menu ant-dropdown-menu-sub ant-dropdown-menu-vertical"
                 data-menu-list="true"
+                role="menu"
               >
                 <li
                   class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
@@ -9587,6 +9604,7 @@ Array [
               <ul
                 class="ant-dropdown-menu ant-dropdown-menu-sub ant-dropdown-menu-vertical"
                 data-menu-list="true"
+                role="menu"
               >
                 <li
                   class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"

components/dropdown/dropdown-button.tsx

@@ -27,12 +27,12 @@ export interface DropdownButtonProps extends ButtonGroupProps, DropdownProps {
   buttonsRender?: (buttons: React.ReactNode[]) => React.ReactNode[];
 }
 
-interface DropdownButtonInterface extends React.FC<DropdownButtonProps> {
+type CompoundedComponent = React.FC<DropdownButtonProps> & {
   /** @internal */
   __ANT_BUTTON: boolean;
-}
+};
 
-const DropdownButton: DropdownButtonInterface = props => {
+const DropdownButton: CompoundedComponent = (props) => {
   const {
     getPopupContainer: getContextPopupContainer,
     getPrefixCls,

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 */
@@ -79,11 +82,11 @@ export interface DropdownProps {
   onVisibleChange?: (open: boolean) => void;
 }
 
-interface DropdownInterface extends React.FC<DropdownProps> {
+type CompoundedComponent = React.FC<DropdownProps> & {
   Button: typeof DropdownButton;
-}
+};
 
-const Dropdown: DropdownInterface = props => {
+const Dropdown: CompoundedComponent = (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>
     );
   };

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 |  |

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 |  |

components/dropdown/style/index.less

@@ -221,7 +221,7 @@
         background-color: @item-hover-bg;
       }
 
-      &-disabled {
+      &&-disabled {
         color: @disabled-color;
         cursor: not-allowed;
 

components/empty/index.tsx

@@ -23,12 +23,12 @@ export interface EmptyProps {
   children?: React.ReactNode;
 }
 
-interface EmptyType extends React.FC<EmptyProps> {
+type CompoundedComponent = React.FC<EmptyProps> & {
   PRESENTED_IMAGE_DEFAULT: React.ReactNode;
   PRESENTED_IMAGE_SIMPLE: React.ReactNode;
-}
+};
 
-const Empty: EmptyType = ({
+const Empty: CompoundedComponent = ({
   className,
   prefixCls: customizePrefixCls,
   image = defaultEmptyImg,

components/form/Form.tsx

@@ -11,7 +11,8 @@ import type { SizeType } from '../config-provider/SizeContext';
 import SizeContext, { SizeContextProvider } from '../config-provider/SizeContext';
 import type { ColProps } from '../grid/col';
 import type { FormContextProps } from './context';
-import { FormContext } from './context';
+import { FormContext, FormProvider } from './context';
+import ValidateMessagesContext from './validateMessagesContext';
 import useForm, { FormInstance } from './hooks/useForm';
 import type { FormLabelAlign } from './interface';
 
@@ -61,6 +62,8 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
     ...restFormProps
   } = props;
 
+  const contextValidateMessages = React.useContext(ValidateMessagesContext);
+
   const mergedRequiredMark = useMemo(() => {
     if (requiredMark !== undefined) {
       return requiredMark;
@@ -130,16 +133,23 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
   return (
     <DisabledContextProvider disabled={disabled}>
       <SizeContextProvider size={size}>
-        <FormContext.Provider value={formContextValue}>
-          <FieldForm
-            id={name}
-            {...restFormProps}
-            name={name}
-            onFinishFailed={onInternalFinishFailed}
-            form={wrapForm}
-            className={formClassName}
-          />
-        </FormContext.Provider>
+        <FormProvider
+          {...{
+            // This is not list in API, we pass with spread
+            validateMessages: contextValidateMessages,
+          }}
+        >
+          <FormContext.Provider value={formContextValue}>
+            <FieldForm
+              id={name}
+              {...restFormProps}
+              name={name}
+              onFinishFailed={onInternalFinishFailed}
+              form={wrapForm}
+              className={formClassName}
+            />
+          </FormContext.Provider>
+        </FormProvider>
       </SizeContextProvider>
     </DisabledContextProvider>
   );

components/form/FormItem/index.tsx

@@ -83,6 +83,7 @@ function genEmptyMeta(): Meta {
     warnings: [],
     touched: false,
     validating: false,
+    validated: false,
     name: [],
   };
 }
@@ -158,7 +159,7 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
   // >>>>> Collect noStyle Field error to the top FormItem
   const onSubItemMetaChange = (subMeta: Meta & { destroy: boolean }, uniqueKeys: React.Key[]) => {
     // Only `noStyle` sub item will trigger
-    setSubFieldErrors(prevSubFieldErrors => {
+    setSubFieldErrors((prevSubFieldErrors) => {
       const clone = {
         ...prevSubFieldErrors,
       };
@@ -184,7 +185,7 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
     const errorList: string[] = [...meta.errors];
     const warningList: string[] = [...meta.warnings];
 
-    Object.values(subFieldErrors).forEach(subFieldError => {
+    Object.values(subFieldErrors).forEach((subFieldError) => {
       errorList.push(...(subFieldError.errors || []));
       warningList.push(...(subFieldError.warnings || []));
     });
@@ -254,7 +255,7 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
             ? required
             : !!(
                 rules &&
-                rules.some(rule => {
+                rules.some((rule) => {
                   if (rule && typeof rule === 'object' && rule.required && !rule.warningOnly) {
                     return true;
                   }
@@ -294,7 +295,7 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
           warning(
             !hasName,
             'Form.Item',
-            "A `Form.Item` with a render function cannot be a field, and thus cannot have a `name` prop.",
+            'A `Form.Item` with a render function cannot be a field, and thus cannot have a `name` prop.',
           );
         } else if (dependencies && !isRenderProps && !hasName) {
           warning(
@@ -343,7 +344,7 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
             ...toArray(mergedValidateTrigger),
           ]);
 
-          triggers.forEach(eventName => {
+          triggers.forEach((eventName) => {
             childProps[eventName] = (...args: any[]) => {
               mergedControl[eventName]?.(...args);
               children.props[eventName]?.(...args);
@@ -385,11 +386,11 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
 
 type InternalFormItemType = typeof InternalFormItem;
 
-interface FormItemInterface extends InternalFormItemType {
+type CompoundedComponent = InternalFormItemType & {
   useStatus: typeof useFormItemStatus;
-}
+};
 
-const FormItem = InternalFormItem as FormItemInterface;
+const FormItem = InternalFormItem as CompoundedComponent;
 FormItem.useStatus = useFormItemStatus;
 
 export default FormItem;

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"

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

@@ -138,7 +138,6 @@ exports[`Form form should support disabled 1`] = `
                   disabled=""
                   id="disabled"
                   type="checkbox"
-                  value=""
                 />
                 <span
                   class="ant-checkbox-inner"

components/form/index.tsx

@@ -9,7 +9,7 @@ import useFormInstance from './hooks/useFormInstance';
 
 type InternalFormType = typeof InternalForm;
 
-interface FormInterface extends InternalFormType {
+type CompoundedComponent = InternalFormType & {
   useForm: typeof useForm;
   useFormInstance: typeof useFormInstance;
   useWatch: typeof useWatch;
@@ -20,9 +20,9 @@ interface FormInterface extends InternalFormType {
 
   /** @deprecated Only for warning usage. Do not use. */
   create: () => void;
-}
+};
 
-const Form = InternalForm as FormInterface;
+const Form = InternalForm as CompoundedComponent;
 
 Form.Item = Item;
 Form.List = List;

components/form/validateMessagesContext.tsx

@@ -0,0 +1,7 @@
+import type { ValidateMessages } from 'rc-field-form/lib/interface';
+import { createContext } from 'react';
+
+// ZombieJ: We export single file here since
+// ConfigProvider use this which will make loop deps
+// to import whole `rc-field-form`
+export default createContext<ValidateMessages | undefined>(undefined);

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');
+  });
 });

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;
     }

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>
 `;
 

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>

components/input-number/style/affix.less

@@ -45,6 +45,7 @@
     }
 
     &::before {
+      display: inline-block;
       width: 0;
       visibility: hidden;
       content: '\a0';

components/input/ClearableLabeledInput.tsx

@@ -78,6 +78,7 @@ class ClearableLabeledInput extends React.Component<ClearableInputProps> {
       value,
       allowClear,
       className,
+      focused,
       style,
       direction,
       bordered,
@@ -101,6 +102,7 @@ class ClearableLabeledInput extends React.Component<ClearableInputProps> {
         hasFeedback,
       ),
       {
+        [`${prefixCls}-affix-wrapper-focused`]: focused,
         [`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl',
         [`${prefixCls}-affix-wrapper-borderless`]: !bordered,
         // className will go to addon wrapper

components/input/TextArea.tsx

@@ -73,6 +73,8 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
       onCompositionStart,
       onCompositionEnd,
       onChange,
+      onFocus,
+      onBlur,
       status: customStatus,
       ...props
     },
@@ -97,6 +99,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
     const clearableInputRef = React.useRef<ClearableLabeledInput>(null);
 
     const [compositing, setCompositing] = React.useState(false);
+    const [focused, setFocused] = React.useState(false);
     const oldCompositionValueRef = React.useRef<string>();
     const oldSelectionStartRef = React.useRef<number>(0);
 
@@ -163,6 +166,20 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
       resolveOnChange(e.currentTarget, e, onChange, triggerValue);
     };
 
+    const handleBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
+      setFocused(false);
+      onBlur?.(e);
+    };
+
+    const handleFocus = (e: React.FocusEvent<HTMLTextAreaElement>) => {
+      setFocused(true);
+      onFocus?.(e);
+    };
+
+    React.useEffect(() => {
+      setFocused((prev) => !mergedDisabled && prev);
+    }, [mergedDisabled]);
+
     // ============================== Reset ===============================
     const handleReset = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
       handleSetValue('');
@@ -197,6 +214,8 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
         prefixCls={prefixCls}
         onCompositionStart={onInternalCompositionStart}
         onChange={handleChange}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
         onCompositionEnd={onInternalCompositionEnd}
         ref={innerRef}
       />
@@ -213,6 +232,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
     const textareaNode = (
       <ClearableLabeledInput
         disabled={mergedDisabled}
+        focused={focused}
         {...props}
         prefixCls={prefixCls}
         direction={direction}

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

@@ -5943,76 +5943,85 @@ exports[`renders ./components/input/demo/group.md extend context correctly 1`] =
       value="input content"
     />
     <div
-      class="ant-input-number"
+      class="ant-input-number-affix-wrapper"
     >
+      <span
+        class="ant-input-number-prefix"
+      >
+        @
+      </span>
       <div
-        class="ant-input-number-handler-wrap"
+        class="ant-input-number"
       >
-        <span
-          aria-disabled="false"
-          aria-label="Increase Value"
-          class="ant-input-number-handler ant-input-number-handler-up"
-          role="button"
-          unselectable="on"
+        <div
+          class="ant-input-number-handler-wrap"
         >
           <span
-            aria-label="up"
-            class="anticon anticon-up ant-input-number-handler-up-inner"
-            role="img"
+            aria-disabled="false"
+            aria-label="Increase Value"
+            class="ant-input-number-handler ant-input-number-handler-up"
+            role="button"
+            unselectable="on"
           >
-            <svg
-              aria-hidden="true"
-              data-icon="up"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+            <span
+              aria-label="up"
+              class="anticon anticon-up ant-input-number-handler-up-inner"
+              role="img"
             >
-              <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>
+              <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>
-        <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"
+            aria-disabled="false"
+            aria-label="Decrease Value"
+            class="ant-input-number-handler ant-input-number-handler-down"
+            role="button"
+            unselectable="on"
           >
-            <svg
-              aria-hidden="true"
-              data-icon="down"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+            <span
+              aria-label="down"
+              class="anticon anticon-down ant-input-number-handler-down-inner"
+              role="img"
             >
-              <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>
+              <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>
-        </span>
-      </div>
-      <div
-        class="ant-input-number-input-wrap"
-      >
-        <input
-          autocomplete="off"
-          class="ant-input-number-input"
-          role="spinbutton"
-          step="1"
-          value=""
-        />
+        </div>
+        <div
+          class="ant-input-number-input-wrap"
+        >
+          <input
+            autocomplete="off"
+            class="ant-input-number-input"
+            role="spinbutton"
+            step="1"
+            value=""
+          />
+        </div>
       </div>
     </div>
   </span>

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

@@ -1972,76 +1972,85 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
       value="input content"
     />
     <div
-      class="ant-input-number"
+      class="ant-input-number-affix-wrapper"
     >
+      <span
+        class="ant-input-number-prefix"
+      >
+        @
+      </span>
       <div
-        class="ant-input-number-handler-wrap"
+        class="ant-input-number"
       >
-        <span
-          aria-disabled="false"
-          aria-label="Increase Value"
-          class="ant-input-number-handler ant-input-number-handler-up"
-          role="button"
-          unselectable="on"
+        <div
+          class="ant-input-number-handler-wrap"
         >
           <span
-            aria-label="up"
-            class="anticon anticon-up ant-input-number-handler-up-inner"
-            role="img"
+            aria-disabled="false"
+            aria-label="Increase Value"
+            class="ant-input-number-handler ant-input-number-handler-up"
+            role="button"
+            unselectable="on"
           >
-            <svg
-              aria-hidden="true"
-              data-icon="up"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+            <span
+              aria-label="up"
+              class="anticon anticon-up ant-input-number-handler-up-inner"
+              role="img"
             >
-              <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>
+              <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>
-        <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"
+            aria-disabled="false"
+            aria-label="Decrease Value"
+            class="ant-input-number-handler ant-input-number-handler-down"
+            role="button"
+            unselectable="on"
           >
-            <svg
-              aria-hidden="true"
-              data-icon="down"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+            <span
+              aria-label="down"
+              class="anticon anticon-down ant-input-number-handler-down-inner"
+              role="img"
             >
-              <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>
+              <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>
-        </span>
-      </div>
-      <div
-        class="ant-input-number-input-wrap"
-      >
-        <input
-          autocomplete="off"
-          class="ant-input-number-input"
-          role="spinbutton"
-          step="1"
-          value=""
-        />
+        </div>
+        <div
+          class="ant-input-number-input-wrap"
+        >
+          <input
+            autocomplete="off"
+            class="ant-input-number-input"
+            role="spinbutton"
+            step="1"
+            value=""
+          />
+        </div>
       </div>
     </div>
   </span>

components/input/__tests__/__snapshots__/textarea.test.tsx.snap

@@ -34,7 +34,7 @@ exports[`TextArea allowClear should change type when click 1`] = `
 
 exports[`TextArea allowClear should change type when click 2`] = `
 <span
-  class="ant-input-affix-wrapper ant-input-affix-wrapper-textarea-with-clear-btn"
+  class="ant-input-affix-wrapper ant-input-affix-wrapper-textarea-with-clear-btn ant-input-affix-wrapper-focused"
 >
   <textarea
     class="ant-input"

components/input/__tests__/textarea.test.tsx

@@ -574,4 +574,14 @@ describe('TextArea allowClear', () => {
 
     textareaSpy.mockRestore();
   });
+
+  it('should have correct className when onFocus and onBlur', () => {
+    const { container } = render(<TextArea allowClear />);
+
+    fireEvent.focus(container.querySelector('textarea')!);
+    expect(container.querySelector('.ant-input-affix-wrapper-focused')).toBeTruthy();
+
+    fireEvent.blur(container.querySelector('textarea')!);
+    expect(container.querySelector('.ant-input-affix-wrapper-focused')).toBeFalsy();
+  });
 });

components/input/demo/group.md

@@ -122,7 +122,7 @@ const App: React.FC = () => (
         <Option value="Option2">Option2</Option>
       </Select>
       <Input style={{ width: '50%' }} defaultValue="input content" />
-      <InputNumber />
+      <InputNumber prefix="@" />
     </Input.Group>
     <br />
     <Input.Group compact>

components/input/index.tsx

@@ -12,13 +12,14 @@ export { PasswordProps } from './Password';
 export { SearchProps } from './Search';
 export { TextAreaProps } from './TextArea';
 
-interface CompoundedComponent
-  extends React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>> {
+type CompoundedComponent = React.ForwardRefExoticComponent<
+  InputProps & React.RefAttributes<InputRef>
+> & {
   Group: typeof Group;
   Search: typeof Search;
   TextArea: typeof TextArea;
   Password: typeof Password;
-}
+};
 
 const Input = InternalInput as CompoundedComponent;
 

components/input/style/affix.less

@@ -24,7 +24,7 @@
 
     &-disabled {
       .@{ant-prefix}-input[disabled] {
-        background: transparent;
+        background: rgba(255, 255, 255, 0);
       }
     }
 
@@ -43,6 +43,7 @@
     }
 
     &::before {
+      display: inline-block;
       width: 0;
       visibility: hidden;
       content: '\a0';

components/input/style/mixin.less

@@ -336,10 +336,8 @@
       border-radius: 0;
     }
 
-    & > .@{inputClass}-affix-wrapper {
-      display: inline-flex;
-    }
-
+    & > .@{inputClass}-affix-wrapper,
+    & > .@{inputClass}-number-affix-wrapper,
     & > .@{ant-prefix}-picker-range {
       display: inline-flex;
     }

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

@@ -577,6 +577,7 @@ exports[`renders ./components/layout/demo/fixed.md extend context correctly 1`]
             <ul
               class="ant-menu ant-menu-sub ant-menu-vertical"
               data-menu-list="true"
+              role="menu"
             />
           </div>
         </div>
@@ -2107,6 +2108,7 @@ exports[`renders ./components/layout/demo/side.md extend context correctly 1`] =
               <ul
                 class="ant-menu ant-menu-sub ant-menu-inline"
                 data-menu-list="true"
+                role="menu"
               >
                 <li
                   class="ant-menu-item ant-menu-item-only-child"
@@ -2262,6 +2264,7 @@ exports[`renders ./components/layout/demo/side.md extend context correctly 1`] =
               <ul
                 class="ant-menu ant-menu-sub ant-menu-inline"
                 data-menu-list="true"
+                role="menu"
               >
                 <li
                   class="ant-menu-item ant-menu-item-only-child"
@@ -3225,6 +3228,7 @@ exports[`renders ./components/layout/demo/top.md extend context correctly 1`] =
             <ul
               class="ant-menu ant-menu-sub ant-menu-vertical"
               data-menu-list="true"
+              role="menu"
             />
           </div>
         </div>
@@ -3790,6 +3794,7 @@ exports[`renders ./components/layout/demo/top-side.md extend context correctly 1
             <ul
               class="ant-menu ant-menu-sub ant-menu-vertical"
               data-menu-list="true"
+              role="menu"
             />
           </div>
         </div>
@@ -3980,6 +3985,7 @@ exports[`renders ./components/layout/demo/top-side.md extend context correctly 1
                   <ul
                     class="ant-menu ant-menu-sub ant-menu-inline"
                     data-menu-list="true"
+                    role="menu"
                   >
                     <li
                       class="ant-menu-item ant-menu-item-selected ant-menu-item-only-child"
@@ -4123,6 +4129,7 @@ exports[`renders ./components/layout/demo/top-side.md extend context correctly 1
               <ul
                 class="ant-menu ant-menu-sub ant-menu-inline"
                 data-menu-list="true"
+                role="menu"
               >
                 <li
                   class="ant-menu-item ant-menu-item-selected ant-menu-item-only-child"
@@ -4310,6 +4317,7 @@ exports[`renders ./components/layout/demo/top-side.md extend context correctly 1
                   <ul
                     class="ant-menu ant-menu-sub ant-menu-inline"
                     data-menu-list="true"
+                    role="menu"
                   >
                     <li
                       class="ant-menu-item ant-menu-item-only-child"
@@ -4499,6 +4507,7 @@ exports[`renders ./components/layout/demo/top-side.md extend context correctly 1
                   <ul
                     class="ant-menu ant-menu-sub ant-menu-inline"
                     data-menu-list="true"
+                    role="menu"
                   >
                     <li
                       class="ant-menu-item ant-menu-item-only-child"
@@ -5091,6 +5100,7 @@ exports[`renders ./components/layout/demo/top-side-2.md extend context correctly
             <ul
               class="ant-menu ant-menu-sub ant-menu-vertical"
               data-menu-list="true"
+              role="menu"
             />
           </div>
         </div>
@@ -5233,6 +5243,7 @@ exports[`renders ./components/layout/demo/top-side-2.md extend context correctly
                 <ul
                   class="ant-menu ant-menu-sub ant-menu-inline"
                   data-menu-list="true"
+                  role="menu"
                 >
                   <li
                     class="ant-menu-item ant-menu-item-selected ant-menu-item-only-child"
@@ -5376,6 +5387,7 @@ exports[`renders ./components/layout/demo/top-side-2.md extend context correctly
             <ul
               class="ant-menu ant-menu-sub ant-menu-inline"
               data-menu-list="true"
+              role="menu"
             >
               <li
                 class="ant-menu-item ant-menu-item-selected ant-menu-item-only-child"
@@ -5563,6 +5575,7 @@ exports[`renders ./components/layout/demo/top-side-2.md extend context correctly
                 <ul
                   class="ant-menu ant-menu-sub ant-menu-inline"
                   data-menu-list="true"
+                  role="menu"
                 >
                   <li
                     class="ant-menu-item ant-menu-item-only-child"
@@ -5752,6 +5765,7 @@ exports[`renders ./components/layout/demo/top-side-2.md extend context correctly
                 <ul
                   class="ant-menu ant-menu-sub ant-menu-inline"
                   data-menu-list="true"
+                  role="menu"
                 >
                   <li
                     class="ant-menu-item ant-menu-item-only-child"

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

@@ -1915,6 +1915,7 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
               <ul
                 class="ant-menu ant-menu-sub ant-menu-inline"
                 data-menu-list="true"
+                role="menu"
               >
                 <li
                   class="ant-menu-item ant-menu-item-selected ant-menu-item-only-child"
@@ -2227,6 +2228,7 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
             <ul
               class="ant-menu ant-menu-sub ant-menu-inline"
               data-menu-list="true"
+              role="menu"
             >
               <li
                 class="ant-menu-item ant-menu-item-selected ant-menu-item-only-child"

components/layout/index.tsx

@@ -6,14 +6,14 @@ export { SiderProps } from './Sider';
 
 type InternalLayoutType = typeof InternalLayout;
 
-interface LayoutType extends InternalLayoutType {
+type CompoundedComponent = InternalLayoutType & {
   Header: typeof Header;
   Footer: typeof Footer;
   Content: typeof Content;
   Sider: typeof Sider;
-}
+};
 
-const Layout = InternalLayout as LayoutType;
+const Layout = InternalLayout as CompoundedComponent;
 
 Layout.Header = Header;
 Layout.Footer = Footer;

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}>

components/locale-provider/uz_UZ.tsx

@@ -0,0 +1,3 @@
+import locale from '../locale/uz_UZ';
+
+export default locale;

components/locale/pt_BR.tsx

@@ -21,6 +21,7 @@ const localeValues: Locale = {
     filterConfirm: 'OK',
     filterReset: 'Resetar',
     filterEmptyText: 'Sem filtros',
+    filterCheckall: 'Selecionar todos os items',
     emptyText: 'Sem conteúdo',
     selectAll: 'Selecionar página atual',
     selectInvert: 'Inverter seleção',

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;

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.',
+    );
+  });
+
 });

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>
+          </>
+        ),
+      }))}
+    />
   );
 };
 

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;

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;