Merge branch 'master' into feature-merge-master

2024-11-27 20:49:53 +08:00 · 2023-06-04 11:10:56 +08:00 · 2023-06-04 11:10:56 +08:00 · 2de151da7a
commit 2de151da7a
parent 32cca6e5a8 71c155f043
57 changed files with 618 additions and 575 deletions
--- a/.dumi/hooks/useMenu.tsx
+++ b/.dumi/hooks/useMenu.tsx
@ -1,10 +1,10 @@
-import type { ReactNode } from 'react';
-import React, { useMemo } from 'react';
 import type { MenuProps } from 'antd';
-import { useFullSidebarData, useSidebarData } from 'dumi';
 import { Tag, theme } from 'antd';
-import useLocation from './useLocation';
+import { useFullSidebarData, useSidebarData } from 'dumi';
+import type { ReactNode } from 'react';
+import { useMemo } from 'react';
 import Link from '../theme/common/Link';
+import useLocation from './useLocation';

 export type UseMenuOptions = {
  before?: ReactNode;
@ -111,7 +111,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
                      {(item.frontmatter as any).subtitle}
                    </span>
                    {(item.frontmatter as any).tag && (
-                      <Tag color="warning" style={{ marginLeft: token.marginXS }}>
+                      <Tag color="warning" style={{ marginInlineStart: token.marginXS }}>
                        {(item.frontmatter as any).tag}
                      </Tag>
                    )}
--- a/.dumi/theme/layouts/ResourceLayout/AffixTabs.tsx
+++ b/.dumi/theme/layouts/ResourceLayout/AffixTabs.tsx
@ -5,6 +5,8 @@ import * as React from 'react';
 import scrollTo from '../../../../components/_util/scrollTo';
 import useSiteToken from '../../../hooks/useSiteToken';

+const listenerEvents = ['scroll', 'resize'] as const;
+
 const useStyle = () => {
  const { token } = useSiteToken();

@ -105,13 +107,10 @@ const AffixTabs: React.FC = () => {
  }, []);

  React.useEffect(() => {
-    window.addEventListener('scroll', onSyncAffix);
-    window.addEventListener('resize', onSyncAffix);
+    listenerEvents.forEach((event) => window.addEventListener(event, onSyncAffix));
    onSyncAffix();
-
    return () => {
-      window.removeEventListener('scroll', onSyncAffix);
-      window.removeEventListener('resize', onSyncAffix);
+      listenerEvents.forEach((event) => window.removeEventListener(event, onSyncAffix));
    };
  }, []);

--- a/.dumi/theme/slots/Content/index.tsx
+++ b/.dumi/theme/slots/Content/index.tsx
@ -50,10 +50,11 @@ const useStyle = () => {
    tocWrapper: css`
      position: absolute;
      top: 8px;
-      right: 0;
+      inset-inline-end: 0;
      width: 160px;
      margin: 12px 0;
-      padding: 8px 8px 8px 4px;
+      padding: 8px 0;
+      padding-inline: 4px 8px;
      backdrop-filter: blur(8px);
      border-radius: ${token.borderRadius}px;
      box-sizing: border-box;
@ -75,11 +76,6 @@ const useStyle = () => {
        padding-inline: 4px;
      }

-      &.rtl {
-        right: auto;
-        left: 20px;
-      }
-
      @media only screen and (max-width: ${token.screenLG}px) {
        display: none;
      }
@ -209,7 +205,7 @@ const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
    <DemoContext.Provider value={contextValue}>
      <Col xxl={20} xl={19} lg={18} md={18} sm={24} xs={24}>
        <Affix>
-          <section css={styles.tocWrapper} className={classNames({ rtl: isRTL })}>
+          <section css={styles.tocWrapper}>
            <Anchor
              css={styles.toc}
              affix={false}
--- a/.github/workflows/site-deploy.yml
+++ b/.github/workflows/site-deploy.yml
@ -73,7 +73,7 @@ jobs:
      - name: build dist and bundle analyzer report
        run: npm run dist
        env:
-          CI: false
+          ANALYZER: 1

      - name: Get version
        id: publish-version
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -15,6 +15,29 @@ timeline: true

 ---

+## 5.5.2
+
+`2023-05-30`
+
+- 🐞 Fix ColorPicker hover boundary issue. [#42669](https://github.com/ant-design/ant-design/pull/42669) [@RedJue](https://github.com/RedJue)
+- 🐞 Fix Menu that `overflowedIndicatorClassName` should not override origin classes. [#42692](https://github.com/ant-design/ant-design/pull/42692) [@MadCcc](https://github.com/MadCcc)
+- 🐞 Fix Select that in some cases will display the letter `A`. [#42651](https://github.com/ant-design/ant-design/pull/42651) [@895433995](https://github.com/895433995)
+- 🐞 Fix Card when `cover` is set to Image, hover mask does not have rounded corner attribute, resulting in UI exception. [#42642](https://github.com/ant-design/ant-design/pull/42642) [@iNeedToCopy](https://github.com/iNeedToCopy)
+- 🐞 Fix Checkbox align with label. [#42590](https://github.com/ant-design/ant-design/pull/42590) [@MadCcc](https://github.com/MadCcc)
+- 🐞 Fix ConfigProvider makes Form component in the bundle even not use it. [#42604](https://github.com/ant-design/ant-design/pull/42604)
+- 🐞 Fix InputNumber cannot align well by baseline. [#42580](https://github.com/ant-design/ant-design/pull/42580)
+- 🐞 Fix spinning icon animation in Badge. [#42575](https://github.com/ant-design/ant-design/pull/42575) [@MadCcc](https://github.com/MadCcc)
+- 📦 Optimize Form `setFieldsValue` logic to reduce bundle size. [#42635](https://github.com/ant-design/ant-design/pull/42635)
+- 💄 Optimize ImagePreviewGroup style. [#42675](https://github.com/ant-design/ant-design/pull/42675) [@kiner-tang](https://github.com/kiner-tang)
+- 💄 Fix Tag borderless style with `error` and other status. [#42619](https://github.com/ant-design/ant-design/pull/42619) [@li-jia-nan](https://github.com/li-jia-nan)
+- 💄 Fix Table `rowSpan` hover highlight style missing. [#42572](https://github.com/ant-design/ant-design/pull/42572)
+- 💄 Fix Pagination's link icon and ellipsis hover style when disabled. [#42541](https://github.com/ant-design/ant-design/pull/42541) [@qmhc](https://github.com/qmhc)
+- 💄 Fix that global token should be able to override component style. [#42535](https://github.com/ant-design/ant-design/pull/42535) [@MadCcc](https://github.com/MadCcc)
+- 🇱🇹 Add missing i18n for `lt_LT` locale. [#42664](https://github.com/ant-design/ant-design/pull/42664) [@Digital-512](https://github.com/Digital-512)
+- RTL
+  - 💄 Fix ColorPicker style in RTL mode. [#42716](https://github.com/ant-design/ant-design/pull/42716) [@RedJue](https://github.com/RedJue)
+  - 💄 Fix Anchor track position in RTL mode. [#42706](https://github.com/ant-design/ant-design/pull/42706) [@qmhc](https://github.com/qmhc)
+
 ## 5.5.1

 `2023-05-22`
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -15,6 +15,29 @@ timeline: true

 ---

+## 5.5.2
+
+`2023-05-30`
+
+- 🐞 修复 ColorPicker 组件悬停边界问题。[#42669](https://github.com/ant-design/ant-design/pull/42669) [@RedJue](https://github.com/RedJue)
+- 🐞 修复 Menu 组件 `overflowedIndicatorClassName` 覆盖了原本的 class 的问题。[#42692](https://github.com/ant-design/ant-design/pull/42692) [@MadCcc](https://github.com/MadCcc)
+- 🐞 修复 Select 组件在某些情况下显示乱码问题。[#42651](https://github.com/ant-design/ant-design/pull/42651) [@895433995](https://github.com/895433995)
+- 🐞 修复 Card 组件，当 Image 设置 `cover` 属性时，悬停蒙版没有圆角属性，导致 UI 异常。[#42642](https://github.com/ant-design/ant-design/pull/42642) [@iNeedToCopy](https://github.com/iNeedToCopy)
+- 🐞 修复 Checkbox 和 label 不对齐的问题。[#42590](https://github.com/ant-design/ant-design/pull/42590) [@MadCcc](https://github.com/MadCcc)
+- 🐞 修复使用 ConfigProvider 会导致未使用的 Form 组件也被打包的问题。[#42604](https://github.com/ant-design/ant-design/pull/42604)
+- 🐞 修复 InputNumber 和其他组件无法基线对齐的问题。[#42580](https://github.com/ant-design/ant-design/pull/42580)
+- 🐞 修复 Badge 组件中旋转的 `icon` 动画。[#42575](https://github.com/ant-design/ant-design/pull/42575) [@MadCcc](https://github.com/MadCcc)
+- 📦 优化 Form `setFieldsValue` 相关代码以降低打包尺寸。[#42635](https://github.com/ant-design/ant-design/pull/42635)
+- 💄 优化 Image 组件预览组样式。[#42675](https://github.com/ant-design/ant-design/pull/42675) [@kiner-tang](https://github.com/kiner-tang)
+- 💄 修复 Tag 无边框样式在 `error` 等状态下不生效的问题。[#42619](https://github.com/ant-design/ant-design/pull/42619) [@li-jia-nan](https://github.com/li-jia-nan)
+- 💄 修复 Table `rowSpan` 悬浮高亮背景颜色丢失的问题。[#42572](https://github.com/ant-design/ant-design/pull/42572)
+- 💄 修复 Pagination 在禁用状态下 link 图标和 ellipsis hover 时的样式。[#42541](https://github.com/ant-design/ant-design/pull/42541) [@qmhc](https://github.com/qmhc)
+- 💄 修复部分全局 Token 无法覆盖组件样式的问题。[#42535](https://github.com/ant-design/ant-design/pull/42535) [@MadCcc](https://github.com/MadCcc)
+- 🇱🇹 为 `lt_LT` 添加缺失的部分文案。[#42664](https://github.com/ant-design/ant-design/pull/42664) [@Digital-512](https://github.com/Digital-512)
+- RTL
+  - 💄 修复 ColorPicker 组件 RTL 模式样式。[#42716](https://github.com/ant-design/ant-design/pull/42716) [@RedJue](https://github.com/RedJue)
+  - 💄 修复 Anchor RTL 模式下轨道的位置。[#42706](https://github.com/ant-design/ant-design/pull/42706) [@qmhc](https://github.com/qmhc)
+
 ## 5.5.1

 `2023-05-22`
--- a/components/_util/scrollTo.ts
+++ b/components/_util/scrollTo.ts
@ -6,7 +6,7 @@ interface ScrollToOptions {
  /** Scroll container, default as window */
  getContainer?: () => HTMLElement | Window | Document;
  /** Scroll end callback */
-  callback?: () => any;
+  callback?: () => void;
  /** Animation duration, default as 450 */
  duration?: number;
 }
--- a/components/affix/index.en-US.md
+++ b/components/affix/index.en-US.md
@ -45,7 +45,7 @@ Please note that Affix should not cover other content on the page, especially wh

 ### When binding container with `target` in Affix, elements sometimes move out of the container.

-We only listen to container scroll events for performance consideration. You can add custom listeners if you still want to: <https://codesandbox.io/s/2xyj5zr85p>
+We only listen to container scroll events for performance consideration. You can add custom listeners if you still want to: <https://codesandbox.io/s/stupefied-maxwell-ophqnm?file=/index.js>

 Related issues：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120)

--- a/components/affix/index.zh-CN.md
+++ b/components/affix/index.zh-CN.md
@ -46,7 +46,7 @@ group:

 ### Affix 使用 `target` 绑定容器时，元素会跑到容器外。

-从性能角度考虑，我们只监听容器滚动事件。如果希望任意滚动，你可以在窗体添加滚动监听：<https://codesandbox.io/s/2xyj5zr85p>
+从性能角度考虑，我们只监听容器滚动事件。如果希望任意滚动，你可以在窗体添加滚动监听：<https://codesandbox.io/s/stupefied-maxwell-ophqnm?file=/index.js>

 相关 issue：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120)

--- a/components/anchor/style/index.ts
+++ b/components/anchor/style/index.ts
@ -72,10 +72,7 @@ const genSharedAnchorStyle: GenerateStyle<AnchorToken> = (token): CSSObject => {
        [componentCls]: {
          '&::before': {
            position: 'absolute',
-            left: {
-              _skip_check_: true,
-              value: 0,
-            },
+            insetInlineStart: 0,
            top: 0,
            height: '100%',
            borderInlineStart: `${lineWidthBold}px ${lineType} ${colorSplit}`,
@ -84,10 +81,7 @@ const genSharedAnchorStyle: GenerateStyle<AnchorToken> = (token): CSSObject => {

          [`${componentCls}-ink`]: {
            position: 'absolute',
-            left: {
-              _skip_check_: true,
-              value: 0,
-            },
+            insetInlineStart: 0,
            display: 'none',
            transform: 'translateY(-50%)',
            transition: `top ${motionDurationSlow} ease-in-out`,
--- a/components/auto-complete/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/auto-complete/tests/snapshots/demo-extend.test.ts.snap
@ -95,6 +95,53 @@ Array [
 ]
 `;

+exports[`renders components/auto-complete/demo/borderless.tsx extend context correctly 1`] = `
+<div
+  class="ant-select ant-select-borderless ant-select-auto-complete ant-select-single ant-select-show-search"
+  style="width: 200px;"
+>
+  <div
+    class="ant-select-selector"
+  >
+    <span
+      class="ant-select-selection-search"
+    >
+      <input
+        aria-activedescendant="rc_select_TEST_OR_SSR_list_-1"
+        aria-autocomplete="list"
+        aria-controls="rc_select_TEST_OR_SSR_list"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-owns="rc_select_TEST_OR_SSR_list"
+        autocomplete="off"
+        class="ant-select-selection-search-input"
+        id="rc_select_TEST_OR_SSR"
+        role="combobox"
+        type="search"
+        value=""
+      />
+    </span>
+    <span
+      class="ant-select-selection-placeholder"
+    >
+      Borderless
+    </span>
+  </div>
+  <div
+    class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
+    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+  >
+    <div>
+      <div
+        class="ant-select-item-empty"
+        id="rc_select_TEST_OR_SSR_list"
+        role="listbox"
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/auto-complete/demo/certain-category.tsx extend context correctly 1`] = `
 <div
  class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
--- a/components/auto-complete/tests/snapshots/demo.test.ts.snap
+++ b/components/auto-complete/tests/snapshots/demo.test.ts.snap
@ -69,6 +69,40 @@ Array [
 ]
 `;

+exports[`renders components/auto-complete/demo/borderless.tsx correctly 1`] = `
+<div
+  class="ant-select ant-select-borderless ant-select-auto-complete ant-select-single ant-select-show-search"
+  style="width:200px"
+>
+  <div
+    class="ant-select-selector"
+  >
+    <span
+      class="ant-select-selection-search"
+    >
+      <input
+        aria-activedescendant="undefined_list_0"
+        aria-autocomplete="list"
+        aria-controls="undefined_list"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-owns="undefined_list"
+        autocomplete="off"
+        class="ant-select-selection-search-input"
+        role="combobox"
+        type="search"
+        value=""
+      />
+    </span>
+    <span
+      class="ant-select-selection-placeholder"
+    >
+      Borderless
+    </span>
+  </div>
+</div>
+`;
+
 exports[`renders components/auto-complete/demo/certain-category.tsx correctly 1`] = `
 <div
  class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
--- a/components/auto-complete/demo/borderless.md
+++ b/components/auto-complete/demo/borderless.md
@ -0,0 +1,7 @@
+## zh-CN
+
+没有边框。
+
+## en-US
+
+No border.
--- a/components/auto-complete/demo/borderless.tsx
+++ b/components/auto-complete/demo/borderless.tsx
@ -0,0 +1,26 @@
+import { AutoComplete } from 'antd';
+import React, { useState } from 'react';
+
+const mockVal = (str: string, repeat = 1) => ({
+  value: str.repeat(repeat),
+});
+
+const App: React.FC = () => {
+  const [options, setOptions] = useState<{ value: string }[]>([]);
+
+  const getPanelValue = (searchText: string) =>
+    !searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];
+
+  return (
+    <AutoComplete
+      options={options}
+      style={{ width: 200 }}
+      placeholder="Borderless"
+      onSearch={(text) => setOptions(getPanelValue(text))}
+      onSelect={globalThis.console.log}
+      bordered={false}
+    />
+  );
+};
+
+export default App;
--- a/components/auto-complete/index.en-US.md
+++ b/components/auto-complete/index.en-US.md
@ -32,6 +32,7 @@ The differences with Select are:
 <code src="./demo/certain-category.tsx">Lookup-Patterns - Certain Category</code>
 <code src="./demo/uncertain-category.tsx">Lookup-Patterns - Uncertain Category</code>
 <code src="./demo/status.tsx">Status</code>
+<code src="./demo/borderless.tsx">Borderless</code>
 <code src="./demo/form-debug.tsx" debug>Debug in Form</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>

@ -42,6 +43,7 @@ The differences with Select are:
 | allowClear | Show clear button | boolean | false |  |
 | autoFocus | If get focus when component mounted | boolean | false |  |
 | backfill | If backfill selected item the input when using keyboard | boolean | false |  |
+| bordered | Whether has border style | boolean | true |  |
 | children (for customize input element) | Customize input element | HTMLInputElement \| HTMLTextAreaElement \| React.ReactElement&lt;InputProps> | &lt;Input /> |  |
 | children (for dataSource) | Data source to auto complete | React.ReactElement&lt;OptionProps> \| Array&lt;React.ReactElement&lt;OptionProps>> | - |  |
 | defaultActiveFirstOption | Whether active first option by default | boolean | true |  |
--- a/components/auto-complete/index.zh-CN.md
+++ b/components/auto-complete/index.zh-CN.md
@ -33,6 +33,7 @@ demo:
 <code src="./demo/certain-category.tsx">查询模式 - 确定类目</code>
 <code src="./demo/uncertain-category.tsx">查询模式 - 不确定类目</code>
 <code src="./demo/status.tsx">自定义状态</code>
+<code src="./demo/borderless.tsx">无边框</code>
 <code src="./demo/form-debug.tsx" debug>在 Form 中 Debug</code>
 <code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>

@ -43,6 +44,7 @@ demo:
 | allowClear | 支持清除 | boolean | false |  |
 | autoFocus | 自动获取焦点 | boolean | false |  |
 | backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false |  |
+| bordered | 是否有边框 | boolean | true |  |
 | children (自动完成的数据源) | 自动完成的数据源 | React.ReactElement&lt;OptionProps> \| Array&lt;React.ReactElement&lt;OptionProps>> | - |  |
 | children (自定义输入框) | 自定义输入框 | HTMLInputElement \| HTMLTextAreaElement \| React.ReactElement&lt;InputProps> | &lt;Input /> |  |
 | defaultActiveFirstOption | 是否默认高亮第一个选项 | boolean | true |  |
--- a/components/cascader/demo/lazy.tsx
+++ b/components/cascader/demo/lazy.tsx
@ -1,12 +1,11 @@
-import React, { useState } from 'react';
 import { Cascader } from 'antd';
+import React, { useState } from 'react';

 interface Option {
  value?: string | number | null;
  label: React.ReactNode;
  children?: Option[];
  isLeaf?: boolean;
-  loading?: boolean;
 }

 const optionLists: Option[] = [
@ -31,11 +30,9 @@ const App: React.FC = () => {

  const loadData = (selectedOptions: Option[]) => {
    const targetOption = selectedOptions[selectedOptions.length - 1];
-    targetOption.loading = true;

    // load options lazily
    setTimeout(() => {
-      targetOption.loading = false;
      targetOption.children = [
        {
          label: `${targetOption.label} Dynamic 1`,
--- a/components/color-picker/ColorPicker.tsx
+++ b/components/color-picker/ColorPicker.tsx
@ -5,7 +5,7 @@ import type {
 import classNames from 'classnames';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import type { CSSProperties } from 'react';
-import React, { useContext, useState } from 'react';
+import React, { useContext, useRef, useState } from 'react';
 import genPurePanel from '../_util/PurePanel';
 import type { ConfigConsumerProps } from '../config-provider/context';
 import { ConfigContext } from '../config-provider/context';
@ -95,12 +95,14 @@ const ColorPicker: CompoundedComponent = (props) => {
  const prefixCls = getPrefixCls('color-picker', customizePrefixCls);

  const [wrapSSR, hashId] = useStyle(prefixCls);
-  const mergeRootCls = classNames(rootClassName, {
-    [`${prefixCls}-rtl`]: direction,
-  });
+  const rtlCls = { [`${prefixCls}-rtl`]: direction };
+  const mergeRootCls = classNames(rootClassName, rtlCls);
  const mergeCls = classNames(mergeRootCls, className, hashId);
+  const mergePopupCls = classNames(prefixCls, rtlCls);

-  const handleChange = (data: Color, type?: HsbaColorType) => {
+  const popupAllowCloseRef = useRef(true);
+
+  const handleChange = (data: Color, type?: HsbaColorType, pickColor?: boolean) => {
    let color: Color = generateColor(data);
    if (colorCleared) {
      setColorCleared(false);
@ -114,6 +116,10 @@ const ColorPicker: CompoundedComponent = (props) => {
    if (!value) {
      setColorValue(color);
    }
+    // Only for drag-and-drop color picking
+    if (pickColor) {
+      popupAllowCloseRef.current = false;
+    }
    onChange?.(color, color.toHexString());
  };

@ -122,6 +128,10 @@ const ColorPicker: CompoundedComponent = (props) => {
    onClear?.();
  };

+  const handleChangeComplete = () => {
+    popupAllowCloseRef.current = true;
+  };
+
  const popoverProps: PopoverProps = {
    open: popupOpen,
    trigger,
@ -146,11 +156,20 @@ const ColorPicker: CompoundedComponent = (props) => {
  return wrapSSR(
    <Popover
      style={styles?.popup}
-      onOpenChange={setPopupOpen}
+      onOpenChange={(visible) => {
+        if (popupAllowCloseRef.current) {
+          setPopupOpen(visible);
+        }
+      }}
      content={
-        <ColorPickerPanel {...colorBaseProps} onChange={handleChange} onClear={handleClear} />
+        <ColorPickerPanel
+          {...colorBaseProps}
+          onChange={handleChange}
+          onChangeComplete={handleChangeComplete}
+          onClear={handleClear}
+        />
      }
-      overlayClassName={prefixCls}
+      overlayClassName={mergePopupCls}
      {...popoverProps}
    >
      {children || (
--- a/components/color-picker/ColorPickerPanel.tsx
+++ b/components/color-picker/ColorPickerPanel.tsx
@ -10,12 +10,22 @@ import ColorPresets from './components/ColorPresets';
 import type { ColorPickerBaseProps } from './interface';

 interface ColorPickerPanelProps extends ColorPickerBaseProps {
-  onChange?: (value?: Color, type?: HsbaColorType) => void;
+  onChange?: (value?: Color, type?: HsbaColorType, pickColor?: boolean) => void;
+  onChangeComplete?: (type?: HsbaColorType) => void;
  onClear?: () => void;
 }

 const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
-  const { prefixCls, allowClear, presets, onChange, onClear, color, ...injectProps } = props;
+  const {
+    prefixCls,
+    allowClear,
+    presets,
+    onChange,
+    onClear,
+    onChangeComplete,
+    color,
+    ...injectProps
+  } = props;
  const colorPickerPanelPrefixCls = `${prefixCls}-inner-panel`;

  const extraPanelRender = (panel: React.ReactNode) => (
@ -45,8 +55,9 @@ const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
    <RcColorPicker
      prefixCls={prefixCls}
      value={color?.toHsb()}
-      onChange={onChange}
+      onChange={(colorValue, type) => onChange?.(colorValue, type, true)}
      panelRender={extraPanelRender}
+      onChangeComplete={onChangeComplete}
    />
  );
 };
--- a/components/color-picker/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/color-picker/tests/snapshots/demo-extend.test.ts.snap
@ -4351,25 +4351,15 @@ exports[`renders components/color-picker/demo/pure-panel.tsx extend context corr

 exports[`renders components/color-picker/demo/trigger.tsx extend context correctly 1`] = `
 Array [
-  <div
-    class="ant-space ant-space-horizontal ant-space-align-center"
+  <button
+    class="ant-btn ant-btn-primary"
+    style="background-color: rgb(22, 119, 255);"
+    type="button"
  >
-    <div
-      class="ant-space-item"
-      style="margin-right: 8px;"
-    >
-      <div
-        style="width: 20px; height: 20px; border-radius: 4px; background-color: rgb(22, 119, 255);"
-      />
-    </div>
-    <div
-      class="ant-space-item"
-    >
-      <span>
-        #1677ff
-      </span>
-    </div>
-  </div>,
+    <span>
+      open
+    </span>
+  </button>,
  <div
    class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-color-picker ant-popover-placement-bottomLeft"
    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
--- a/components/color-picker/tests/snapshots/demo.test.ts.snap
+++ b/components/color-picker/tests/snapshots/demo.test.ts.snap
@ -245,25 +245,15 @@ exports[`renders components/color-picker/demo/pure-panel.tsx correctly 1`] = `
 `;

 exports[`renders components/color-picker/demo/trigger.tsx correctly 1`] = `
-<div
-  class="ant-space ant-space-horizontal ant-space-align-center"
+<button
+  class="ant-btn ant-btn-primary"
+  style="background-color:#1677ff"
+  type="button"
 >
-  <div
-    class="ant-space-item"
-    style="margin-right:8px"
-  >
-    <div
-      style="width:20px;height:20px;border-radius:4px;background-color:#1677ff"
-    />
-  </div>
-  <div
-    class="ant-space-item"
-  >
-    <span>
-      #1677ff
-    </span>
-  </div>
-</div>
+  <span>
+    open
+  </span>
+</button>
 `;

 exports[`renders components/color-picker/demo/trigger-event.tsx correctly 1`] = `
--- a/components/color-picker/tests/index.test.tsx
+++ b/components/color-picker/tests/index.test.tsx
@ -1,4 +1,5 @@
-import { fireEvent, render } from '@testing-library/react';
+import { createEvent, fireEvent, render } from '@testing-library/react';
+import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
 import React, { useMemo, useState } from 'react';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
@ -6,6 +7,28 @@ import { waitFakeTimer } from '../../../tests/utils';
 import ColorPicker from '../ColorPicker';
 import type { Color } from '../color';

+function doMouseMove(
+  container: HTMLElement,
+  start: number,
+  end: number,
+  element = 'ant-color-picker-handler',
+) {
+  const mouseDown = createEvent.mouseDown(container.getElementsByClassName(element)[0], {
+    pageX: start,
+    pageY: start,
+  });
+  fireEvent(container.getElementsByClassName(element)[0], mouseDown);
+  // Drag
+  const mouseMove: any = new Event('mousemove');
+  mouseMove.pageX = end;
+  mouseMove.pageY = end;
+
+  fireEvent(document, mouseMove);
+
+  const mouseUp = createEvent.mouseUp(document);
+  fireEvent(document, mouseUp);
+}
+
 describe('ColorPicker', () => {
  mountTest(ColorPicker);
  rtlTest(ColorPicker);
@ -251,4 +274,23 @@ describe('ColorPicker', () => {
      container.querySelector('.ant-color-picker-color-block-inner')?.getAttribute('style'),
    ).toEqual('background: rgb(99, 22, 22);');
  });
+
+  it('Should fix hover boundary issues', async () => {
+    spyElementPrototypes(HTMLElement, {
+      getBoundingClientRect: () => ({
+        x: 0,
+        y: 100,
+        width: 100,
+        height: 100,
+      }),
+    });
+    const { container } = render(<ColorPicker trigger="hover" />);
+    fireEvent.mouseEnter(container.querySelector('.ant-color-picker-trigger')!);
+    await waitFakeTimer();
+    doMouseMove(container, 0, 999);
+    expect(container.querySelector('.ant-popover-hidden')).toBeFalsy();
+    fireEvent.mouseLeave(container.querySelector('.ant-color-picker-trigger')!);
+    await waitFakeTimer();
+    expect(container.querySelector('.ant-popover-hidden')).toBeTruthy();
+  });
 });
--- a/components/color-picker/demo/trigger-event.md
+++ b/components/color-picker/demo/trigger-event.md
@ -4,4 +4,4 @@

 ## en-US

-Triggers event for customizing color panels.
+Triggers event for customizing color panels, provide options `click` and `hover`.
--- a/components/color-picker/demo/trigger.tsx
+++ b/components/color-picker/demo/trigger.tsx
@ -1,8 +1,8 @@
-import { ColorPicker, Space, theme } from 'antd';
+import { Button, ColorPicker, theme } from 'antd';
 import type { Color } from 'antd/es/color-picker';
 import React, { useMemo, useState } from 'react';

-export default () => {
+const Demo: React.FC = () => {
  const { token } = theme.useToken();
  const [color, setColor] = useState<Color | string>(token.colorPrimary);

@ -11,19 +11,17 @@ export default () => {
    [color],
  );

-  const divStyle: React.CSSProperties = {
-    width: token.sizeMD,
-    height: token.sizeMD,
-    borderRadius: token.borderRadiusSM,
+  const btnStyle: React.CSSProperties = {
    backgroundColor: bgColor,
  };

  return (
    <ColorPicker value={color} onChange={setColor}>
-      <Space>
-        <div style={divStyle} />
-        <span>{bgColor}</span>
-      </Space>
+      <Button type="primary" style={btnStyle}>
+        open
+      </Button>
    </ColorPicker>
  );
 };
+
+export default Demo;
--- a/components/color-picker/index.en-US.md
+++ b/components/color-picker/index.en-US.md
@ -57,12 +57,12 @@ Used when the user needs to customize the color selection.
 <!-- prettier-ignore -->
 | Property | Description | Type | Default |
 | :-- | :-- | :-- | :-- |
-| toHex | Convert to `hex` format characters | `() => string` | - |
-| toHexString | Convert to `hex` format color string | `() => string` | - |
+| toHex | Convert to `hex` format characters, the return type like: `1677ff` | `() => string` | - |
+| toHexString | Convert to `hex` format color string, the return type like: `#1677ff` | `() => string` | - |
 | toHsb | Convert to `hsb` object  | `() => ({ h: number, s: number, b: number, a number })` | - |
-| toHsbString | Convert to `hsb` format color string | `() => string` | - |
+| toHsbString | Convert to `hsb` format color string, the return type like: `hsb(215, 91%, 100%)` | `() => string` | - |
 | toRgb | Convert to `rgb` object  | `() => ({ r: number, g: number, b: number, a number })` | - |
-| toRgbString | Convert to `rgb` format color string | `() => string` | - |
+| toRgbString | Convert to `rgb` format color string, the return type like: `rgb(22, 119, 255)` | `() => string` | - |

 ## FAQ

--- a/components/color-picker/index.zh-CN.md
+++ b/components/color-picker/index.zh-CN.md
@ -58,12 +58,12 @@ group:
 <!-- prettier-ignore -->
 | 参数 | 说明 | 类型 | 默认值 |
 | :-- | :-- | :-- | :-- |
-| toHex | 转换成 `hex` 格式字符 | `() => string` | - |
-| toHexString | 转换成 `hex` 格式颜色字符串 | `() => string` | - |
+| toHex | 转换成 `hex` 格式字符，返回格式如：`1677ff` | `() => string` | - |
+| toHexString | 转换成 `hex` 格式颜色字符串，返回格式如：`#1677ff` | `() => string` | - |
 | toHsb | 转换成 `hsb` 对象  | `() => ({ h: number, s: number, b: number, a number })` | - |
-| toHsbString | 转换成 `hsb` 格式颜色字符串 | `() => string` | - |
+| toHsbString | 转换成 `hsb` 格式颜色字符串，返回格式如：`hsb(215, 91%, 100%)` | `() => string` | - |
 | toRgb | 转换成 `rgb` 对象  | `() => ({ r: number, g: number, b: number, a number })` | - |
-| toRgbString | 转换成 `rgb` 格式颜色字符串 | `() => string` | - |
+| toRgbString | 转换成 `rgb` 格式颜色字符串，返回格式如：`rgb(22, 119, 255)` | `() => string` | - |

 ## FAQ

--- a/components/color-picker/style/index.ts
+++ b/components/color-picker/style/index.ts
@ -26,6 +26,24 @@ export const genActiveStyle = (token: ColorPickerToken) => ({
  outline: 0,
 });

+const genRtlStyle = (token: ColorPickerToken): CSSObject => {
+  const { componentCls } = token;
+  return {
+    '&-rtl': {
+      [`${componentCls}-presets-color`]: {
+        '&::after': {
+          direction: 'ltr',
+        },
+      },
+      [`${componentCls}-clear`]: {
+        '&::after': {
+          direction: 'ltr',
+        },
+      },
+    },
+  };
+};
+
 const genClearStyle = (token: ColorPickerToken, size: number): CSSObject => {
  const { componentCls, borderRadiusSM, lineWidth, colorSplit, red6 } = token;

@ -127,6 +145,7 @@ const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
          ...genClearStyle(token, controlHeightSM),
          ...genColorBlockStyle(token, controlHeightSM),
        },
+        ...genRtlStyle(token),
      },
    },
  ];
--- a/components/config-provider/tests/snapshots/components.test.tsx.snap
+++ b/components/config-provider/tests/snapshots/components.test.tsx.snap
@ -21737,6 +21737,7 @@ exports[`ConfigProvider components Popover prefixCls 1`] = `

 exports[`ConfigProvider components Progress configProvider 1`] = `
 <div
+  aria-valuenow="0"
  class="config-progress config-progress-line config-progress-status-normal config-progress-show-info config-progress-default"
  role="progressbar"
 >
@ -21764,6 +21765,7 @@ exports[`ConfigProvider components Progress configProvider 1`] = `

 exports[`ConfigProvider components Progress configProvider componentDisabled 1`] = `
 <div
+  aria-valuenow="0"
  class="config-progress config-progress-line config-progress-status-normal config-progress-show-info config-progress-default"
  role="progressbar"
 >
@ -21791,6 +21793,7 @@ exports[`ConfigProvider components Progress configProvider componentDisabled 1`]

 exports[`ConfigProvider components Progress configProvider componentSize large 1`] = `
 <div
+  aria-valuenow="0"
  class="config-progress config-progress-line config-progress-status-normal config-progress-show-info config-progress-default"
  role="progressbar"
 >
@ -21818,6 +21821,7 @@ exports[`ConfigProvider components Progress configProvider componentSize large 1

 exports[`ConfigProvider components Progress configProvider componentSize middle 1`] = `
 <div
+  aria-valuenow="0"
  class="config-progress config-progress-line config-progress-status-normal config-progress-show-info config-progress-default"
  role="progressbar"
 >
@ -21845,6 +21849,7 @@ exports[`ConfigProvider components Progress configProvider componentSize middle

 exports[`ConfigProvider components Progress configProvider componentSize small 1`] = `
 <div
+  aria-valuenow="0"
  class="config-progress config-progress-line config-progress-status-normal config-progress-show-info config-progress-default"
  role="progressbar"
 >
@ -21872,6 +21877,7 @@ exports[`ConfigProvider components Progress configProvider componentSize small 1

 exports[`ConfigProvider components Progress normal 1`] = `
 <div
+  aria-valuenow="0"
  class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
  role="progressbar"
 >
@ -21899,6 +21905,7 @@ exports[`ConfigProvider components Progress normal 1`] = `

 exports[`ConfigProvider components Progress prefixCls 1`] = `
 <div
+  aria-valuenow="0"
  class="prefix-Progress prefix-Progress-line prefix-Progress-status-normal prefix-Progress-show-info prefix-Progress-default"
  role="progressbar"
 >
--- a/components/date-picker/locale/example.json
+++ b/components/date-picker/locale/example.json
@ -28,7 +28,22 @@
    "previousDecade": "Last decade",
    "nextDecade": "Next decade",
    "previousCentury": "Last century",
-    "nextCentury": "Next century"
+    "nextCentury": "Next century",
+    "shortWeekDays": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+    "shortMonths": [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec"
+    ]
  },
  "timePickerLocale": {
    "placeholder": "Select time"
--- a/components/divider/tests/index.test.tsx
+++ b/components/divider/tests/index.test.tsx
@ -1,7 +1,7 @@
 import * as React from 'react';
-import { render } from '../../../tests/utils';
 import Divider from '..';
 import mountTest from '../../../tests/shared/mountTest';
+import { render } from '../../../tests/utils';

 describe('Divider', () => {
  mountTest(Divider);
@ -10,8 +10,19 @@ describe('Divider', () => {
    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});

    const { container } = render(<Divider type="vertical">Bamboo</Divider>);
-    expect(container.querySelector('.ant-divider-inner-text')).toBeFalsy();
+    expect(container.querySelector<HTMLSpanElement>('.ant-divider-inner-text')).toBeFalsy();

    errSpy.mockRestore();
  });
+
+  it('support string orientationMargin', () => {
+    const { container } = render(
+      <Divider orientation="right" orientationMargin="10">
+        test test test
+      </Divider>,
+    );
+    expect(container?.querySelector<HTMLSpanElement>('.ant-divider-inner-text')).toHaveStyle({
+      marginRight: 10,
+    });
+  });
 });
--- a/components/divider/index.en-US.md
+++ b/components/divider/index.en-US.md
@ -34,7 +34,7 @@ A divider line separates different content.
 | className | The className of container | string | - |  |
 | dashed | Whether line is dashed | boolean | false |  |
 | orientation | The position of title inside divider | `left` \| `right` \| `center` | `center` |  |
-| orientationMargin | The margin-left/right between the title and its closest border, while the `orientation` must be `left` or `right` | string \| number | - |  |
+| orientationMargin | The margin-left/right between the title and its closest border, while the `orientation` must be `left` or `right`, If a numeric value of type `string` is provided without a unit, it is assumed to be in pixels (px) by default. | string \| number | - |  |
 | plain | Divider text show as plain style | boolean | true | 4.2.0 |
 | style | The style object of container | CSSProperties | - |  |
 | type | The direction type of divider | `horizontal` \| `vertical` | `horizontal` |  |
--- a/components/divider/index.tsx
+++ b/components/divider/index.tsx
@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import * as React from 'react';
-import { ConfigContext } from '../config-provider';
 import warning from '../_util/warning';
+import { ConfigContext } from '../config-provider';

 import useStyle from './style';

@ -57,9 +57,19 @@ const Divider: React.FC<DividerProps> = (props) => {
    rootClassName,
  );

+  const memoizedOrientationMargin = React.useMemo<string | number>(() => {
+    if (typeof orientationMargin === 'number') {
+      return orientationMargin;
+    }
+    if (/^\d+$/.test(orientationMargin!)) {
+      return Number(orientationMargin);
+    }
+    return orientationMargin!;
+  }, [orientationMargin]);
+
  const innerStyle: React.CSSProperties = {
-    ...(hasCustomMarginLeft && { marginLeft: orientationMargin }),
-    ...(hasCustomMarginRight && { marginRight: orientationMargin }),
+    ...(hasCustomMarginLeft && { marginLeft: memoizedOrientationMargin }),
+    ...(hasCustomMarginRight && { marginRight: memoizedOrientationMargin }),
  };

  // Warning children not work in vertical mode
--- a/components/divider/index.zh-CN.md
+++ b/components/divider/index.zh-CN.md
@ -35,7 +35,7 @@ group:
 | className | 分割线样式类 | string | - |  |
 | dashed | 是否虚线 | boolean | false |  |
 | orientation | 分割线标题的位置 | `left` \| `right` \| `center` | `center` |  |
-| orientationMargin | 标题和最近 left/right 边框之间的距离，去除了分割线，同时 `orientation` 必须为 `left` 或 `right` | string \| number | - |  |
+| orientationMargin | 标题和最近 left/right 边框之间的距离，去除了分割线，同时 `orientation` 必须为 `left` 或 `right`。如果传入 `string` 类型的数字且不带单位，默认单位是 px | string \| number | - |  |
 | plain | 文字是否显示为普通正文样式 | boolean | false | 4.2.0 |
 | style | 分割线样式对象 | CSSProperties | - |  |
 | type | 水平还是垂直类型 | `horizontal` \| `vertical` | `horizontal` |  |
--- a/components/dropdown/dropdown.tsx
+++ b/components/dropdown/dropdown.tsx
@ -16,7 +16,6 @@ import Menu from '../menu';
 import { OverrideProvider } from '../menu/OverrideContext';
 import { NoCompactStyle } from '../space/Compact';
 import theme from '../theme';
-import DropdownButton from './dropdown-button';
 import useStyle from './style';

 const Placements = [
@ -30,7 +29,7 @@ const Placements = [
  'bottom',
 ] as const;

-type Placement = typeof Placements[number];
+type Placement = (typeof Placements)[number];
 type DropdownPlacement = Exclude<Placement, 'topCenter' | 'bottomCenter'>;

 type OverlayFunc = () => React.ReactElement;
@ -88,7 +87,6 @@ export interface DropdownProps {
 }

 type CompoundedComponent = React.FC<DropdownProps> & {
-  Button: typeof DropdownButton;
  _InternalPanelDoNotUseOrYouWillBeFired: typeof WrapPurePanel;
 };

@ -305,8 +303,6 @@ const Dropdown: CompoundedComponent = (props) => {
  );
 };

-Dropdown.Button = DropdownButton;
-
 function postPureProps(props: DropdownProps) {
  return {
    ...props,
--- a/components/dropdown/index.ts
+++ b/components/dropdown/index.ts
@ -1,10 +1,12 @@
-import Dropdown from './dropdown';
+import InternalDropdown from './dropdown';
+import DropdownButton from './dropdown-button';

-export type {
-  DropdownProps,
-  // typo, but we need to support it for backwards compatibility
-  // https://github.com/ant-design/ant-design/pull/35161
-  DropdownProps as DropDownProps,
-} from './dropdown';
+export type { DropdownProps as DropDownProps, DropdownProps } from './dropdown';
 export type { DropdownButtonProps, DropdownButtonType } from './dropdown-button';
+
+const Dropdown = InternalDropdown as typeof InternalDropdown & {
+  Button: typeof DropdownButton;
+};
+Dropdown.Button = DropdownButton;
+
 export default Dropdown;
--- a/components/menu/tests/index.test.tsx
+++ b/components/menu/tests/index.test.tsx
@ -8,12 +8,13 @@ import {
 import React, { useMemo, useState } from 'react';
 import type { MenuProps, MenuRef } from '..';
 import Menu from '..';
+import { TriggerMockContext } from '../../../tests/shared/demoTestContext';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { act, fireEvent, render } from '../../../tests/utils';
-import Layout from '../../layout';
 import initCollapseMotion from '../../_util/motion';
 import { noop } from '../../_util/warning';
+import Layout from '../../layout';

 Object.defineProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT', {
  writable: true,
@ -824,7 +825,7 @@ describe('Menu', () => {
    const onOpen = jest.fn();
    const onClose = jest.fn();
    const Demo: React.FC = () => {
-      const menuProps = useMemo<MenuProps>(() => ({ onOpen, onClose }) as MenuProps, []);
+      const menuProps = useMemo<MenuProps>(() => ({ onOpen, onClose } as MenuProps), []);
      return (
        <Menu
          {...menuProps}
@ -859,7 +860,7 @@ describe('Menu', () => {
  it('should keep selectedKeys in state when collapsed to 0px', () => {
    jest.useFakeTimers();
    const Demo: React.FC<MenuProps> = (props) => {
-      const menuProps = useMemo<MenuProps>(() => ({ collapsedWidth: 0 }) as MenuProps, []);
+      const menuProps = useMemo<MenuProps>(() => ({ collapsedWidth: 0 } as MenuProps), []);
      return (
        <Menu
          mode="inline"
@ -1099,4 +1100,27 @@ describe('Menu', () => {
      '0',
    );
  });
+
+  it('Overflow indicator className should not override menu class', () => {
+    const { container } = render(
+      <TriggerMockContext.Provider value={{ popupVisible: true }}>
+        <Menu
+          items={[
+            { key: '1', label: 'Option 1' },
+            { key: '2', label: 'Option 1' },
+            { key: '3', label: 'Option 1' },
+            { key: '4', label: 'Option 1' },
+            { key: '5', label: 'Option 1' },
+            { key: '6', label: 'Option 1' },
+            { key: '7', label: 'Option 1' },
+            { key: '8', label: 'Option 1' },
+          ]}
+          mode="horizontal"
+          overflowedIndicatorPopupClassName="custom-popover"
+          getPopupContainer={(node) => node.parentElement!}
+        />
+      </TriggerMockContext.Provider>,
+    );
+    expect(container.querySelector('.ant-menu.ant-menu-light.custom-popover')).toBeTruthy();
+  });
 });
--- a/components/menu/menu.tsx
+++ b/components/menu/menu.tsx
@ -1,22 +1,22 @@
+import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined';
+import classNames from 'classnames';
 import type { MenuProps as RcMenuProps, MenuRef as RcMenuRef } from 'rc-menu';
 import RcMenu from 'rc-menu';
+import useEvent from 'rc-util/lib/hooks/useEvent';
+import omit from 'rc-util/lib/omit';
 import * as React from 'react';
 import { forwardRef } from 'react';
-import omit from 'rc-util/lib/omit';
-import useEvent from 'rc-util/lib/hooks/useEvent';
-import classNames from 'classnames';
-import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined';
-import warning from '../_util/warning';
 import initCollapseMotion from '../_util/motion';
 import { cloneElement } from '../_util/reactNode';
-import type { SiderContextProps } from '../layout/Sider';
+import warning from '../_util/warning';
 import { ConfigContext } from '../config-provider';
-import useStyle from './style';
-import OverrideContext from './OverrideContext';
-import useItems from './hooks/useItems';
-import type { ItemType } from './hooks/useItems';
+import type { SiderContextProps } from '../layout/Sider';
+import type { MenuContextProps, MenuTheme } from './MenuContext';
 import MenuContext from './MenuContext';
-import type { MenuTheme, MenuContextProps } from './MenuContext';
+import OverrideContext from './OverrideContext';
+import type { ItemType } from './hooks/useItems';
+import useItems from './hooks/useItems';
+import useStyle from './style';

 export interface MenuProps extends Omit<RcMenuProps, 'items'> {
  theme?: MenuTheme;
@ -59,6 +59,7 @@ const InternalMenu = forwardRef<RcMenuRef, InternalMenuProps>((props, ref) => {
    mode,
    selectable,
    onClick,
+    overflowedIndicatorPopupClassName,
    ...restProps
  } = props;

@ -152,7 +153,11 @@ const InternalMenu = forwardRef<RcMenuRef, InternalMenuProps>((props, ref) => {
        <RcMenu
          getPopupContainer={getPopupContainer}
          overflowedIndicator={<EllipsisOutlined />}
-          overflowedIndicatorPopupClassName={classNames(prefixCls, `${prefixCls}-${theme}`)}
+          overflowedIndicatorPopupClassName={classNames(
+            prefixCls,
+            `${prefixCls}-${theme}`,
+            overflowedIndicatorPopupClassName,
+          )}
          mode={mergedMode}
          selectable={mergedSelectable}
          onClick={onItemClick}
--- a/components/popconfirm/demo/placement.md
+++ b/components/popconfirm/demo/placement.md
@ -1,10 +1,10 @@
 ## zh-CN

-位置有十二个方向。如需箭头指向目标元素中心，可以设置 `arrowPointAtCenter`。
+位置有十二个方向。如需箭头指向目标元素中心，可以设置 `arrow: { pointAtCenter: true }`。

 ## en-US

-There are 12 `placement` options available. Use `arrowPointAtCenter` if you want the arrow to point at the center of target.
+There are 12 `placement` options available. Use `arrow: { pointAtCenter: true }` if you want the arrow to point at the center of target.

 <style>
 #components-popconfirm-demo-placement .ant-btn {
--- a/components/progress/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/progress/tests/snapshots/demo-extend.test.ts.snap
@ -10,6 +10,7 @@ exports[`renders components/progress/demo/circle.tsx extend context correctly 1`
    style="margin-right: 8px; padding-bottom: 8px;"
  >
    <div
+      aria-valuenow="75"
      class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
      role="progressbar"
    >
@ -66,6 +67,7 @@ exports[`renders components/progress/demo/circle.tsx extend context correctly 1`
    style="margin-right: 8px; padding-bottom: 8px;"
  >
    <div
+      aria-valuenow="70"
      class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-default"
      role="progressbar"
    >
@ -139,6 +141,7 @@ exports[`renders components/progress/demo/circle.tsx extend context correctly 1`
    style="padding-bottom: 8px;"
  >
    <div
+      aria-valuenow="100"
      class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default"
      role="progressbar"
    >
@ -213,6 +216,7 @@ exports[`renders components/progress/demo/circle.tsx extend context correctly 1`
 exports[`renders components/progress/demo/circle-dynamic.tsx extend context correctly 1`] = `
 Array [
  <div
+    aria-valuenow="0"
    class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
    role="progressbar"
    style="margin-right: 8px;"
@ -336,6 +340,7 @@ Array [
 exports[`renders components/progress/demo/circle-micro.tsx extend context correctly 1`] = `
 Array [
  <div
+    aria-valuenow="60"
    class="ant-progress ant-progress-inline-circle ant-progress-circle ant-progress-status-normal ant-progress-show-info"
    role="progressbar"
  >
@ -425,6 +430,7 @@ exports[`renders components/progress/demo/circle-mini.tsx extend context correct
    style="margin-right: 8px; padding-bottom: 8px;"
  >
    <div
+      aria-valuenow="30"
      class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
      role="progressbar"
    >
@ -481,6 +487,7 @@ exports[`renders components/progress/demo/circle-mini.tsx extend context correct
    style="margin-right: 8px; padding-bottom: 8px;"
  >
    <div
+      aria-valuenow="70"
      class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info"
      role="progressbar"
    >
@ -554,6 +561,7 @@ exports[`renders components/progress/demo/circle-mini.tsx extend context correct
    style="padding-bottom: 8px;"
  >
    <div
+      aria-valuenow="100"
      class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info"
      role="progressbar"
    >
@ -635,6 +643,7 @@ exports[`renders components/progress/demo/dashboard.tsx extend context correctly
    style="margin-right: 8px; padding-bottom: 8px;"
  >
    <div
+      aria-valuenow="75"
      class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
      role="progressbar"
    >
@ -691,6 +700,7 @@ exports[`renders components/progress/demo/dashboard.tsx extend context correctly
    style="padding-bottom: 8px;"
  >
    <div
+      aria-valuenow="75"
      class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
      role="progressbar"
    >
@ -748,6 +758,7 @@ exports[`renders components/progress/demo/dashboard.tsx extend context correctly
 exports[`renders components/progress/demo/dynamic.tsx extend context correctly 1`] = `
 Array [
  <div
+    aria-valuenow="0"
    class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
    role="progressbar"
  >
@ -850,6 +861,7 @@ exports[`renders components/progress/demo/format.tsx extend context correctly 1`
    style="margin-right: 8px; padding-bottom: 8px;"
  >
    <div
+      aria-valuenow="75"
      class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
      role="progressbar"
    >
@ -906,6 +918,7 @@ exports[`renders components/progress/demo/format.tsx extend context correctly 1`
    style="padding-bottom: 8px;"
  >
    <div
+      aria-valuenow="100"
      class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default"
      role="progressbar"
    >
@ -963,6 +976,7 @@ exports[`renders components/progress/demo/format.tsx extend context correctly 1`
 exports[`renders components/progress/demo/gradient-line.tsx extend context correctly 1`] = `
 Array [
  <div
+    aria-valuenow="99"
    class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
    role="progressbar"
  >
@ -987,6 +1001,7 @@ Array [
    </span>
  </div>,
  <div
+    aria-valuenow="99"
    class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-default"
    role="progressbar"
  >
@ -1019,6 +1034,7 @@ Array [
      style="margin-right: 8px; padding-bottom: 8px;"
    >
      <div
+        aria-valuenow="90"
        class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
        role="progressbar"
      >
@ -1094,6 +1110,7 @@ Array [
      style="padding-bottom: 8px;"
    >
      <div
+        aria-valuenow="100"
        class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default"
        role="progressbar"
      >
@ -1188,6 +1205,7 @@ Array [
 exports[`renders components/progress/demo/line.tsx extend context correctly 1`] = `
 Array [
  <div
+    aria-valuenow="30"
    class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
    role="progressbar"
  >
@ -1212,6 +1230,7 @@ Array [
    </span>
  </div>,
  <div
+    aria-valuenow="50"
    class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-default"
    role="progressbar"
  >
@ -1236,6 +1255,7 @@ Array [
    </span>
  </div>,
  <div
+    aria-valuenow="70"
    class="ant-progress ant-progress-line ant-progress-status-exception ant-progress-show-info ant-progress-default"
    role="progressbar"
  >
@ -1277,6 +1297,7 @@ Array [
    </span>
  </div>,
  <div
+    aria-valuenow="100"
    class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-default"
    role="progressbar"
  >
@ -1318,6 +1339,7 @@ Array [
    </span>
  </div>,
  <div
+    aria-valuenow="50"
    class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default"
    role="progressbar"
  >
@ -1343,6 +1365,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly
  style="width: 170px;"
 >
  <div
+    aria-valuenow="30"
    class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-small"
    role="progressbar"
  >
@ -1367,6 +1390,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly
    </span>
  </div>
  <div
+    aria-valuenow="50"
    class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-small"
    role="progressbar"
  >
@ -1391,6 +1415,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly
    </span>
  </div>
  <div
+    aria-valuenow="70"
    class="ant-progress ant-progress-line ant-progress-status-exception ant-progress-show-info ant-progress-small"
    role="progressbar"
  >
@ -1432,6 +1457,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly
    </span>
  </div>
  <div
+    aria-valuenow="100"
    class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-small"
    role="progressbar"
  >
@ -1478,6 +1504,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly
 exports[`renders components/progress/demo/linecap.tsx extend context correctly 1`] = `
 Array [
  <div
+    aria-valuenow="75"
    class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
    role="progressbar"
  >
@ -1511,6 +1538,7 @@ Array [
      style="margin-right: 8px; padding-bottom: 8px;"
    >
      <div
+        aria-valuenow="75"
        class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
        role="progressbar"
      >
@ -1567,6 +1595,7 @@ Array [
      style="padding-bottom: 8px;"
    >
      <div
+        aria-valuenow="75"
        class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
        role="progressbar"
      >
@ -1625,6 +1654,7 @@ Array [
 exports[`renders components/progress/demo/segment.tsx extend context correctly 1`] = `
 Array [
  <div
+    aria-valuenow="30"
    class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
    role="progressbar"
  >
@ -1680,6 +1710,7 @@ Array [
      style="margin-right: 8px; padding-bottom: 8px;"
    >
      <div
+        aria-valuenow="30"
        class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
        role="progressbar"
      >
@ -1755,6 +1786,7 @@ Array [
      style="padding-bottom: 8px;"
    >
      <div
+        aria-valuenow="30"
        class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
        role="progressbar"
      >
@ -1839,6 +1871,7 @@ Array [
      style="margin-bottom: 8px;"
    >
      <div
+        aria-valuenow="50"
        class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
        role="progressbar"
      >
@ -1868,6 +1901,7 @@ Array [
      style="margin-bottom: 8px;"
    >
      <div
+        aria-valuenow="50"
        class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-small"
        role="progressbar"
      >
@ -1896,6 +1930,7 @@ Array [
      class="ant-space-item"
    >
      <div
+        aria-valuenow="50"
        class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info"
        role="progressbar"
      >
@ -1931,6 +1966,7 @@ Array [
      style="margin-right: 30px;"
    >
      <div
+        aria-valuenow="50"
        class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
        role="progressbar"
      >
@ -1987,6 +2023,7 @@ Array [
      style="margin-right: 30px;"
    >
      <div
+        aria-valuenow="50"
        class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-small"
        role="progressbar"
      >
@ -2042,6 +2079,7 @@ Array [
      class="ant-space-item"
    >
      <div
+        aria-valuenow="50"
        class="ant-progress ant-progress-inline-circle ant-progress-circle ant-progress-status-normal ant-progress-show-info"
        role="progressbar"
      >
@ -2124,6 +2162,7 @@ Array [
      style="margin-right: 30px;"
    >
      <div
+        aria-valuenow="50"
        class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
        role="progressbar"
      >
@ -2180,6 +2219,7 @@ Array [
      style="margin-right: 30px;"
    >
      <div
+        aria-valuenow="50"
        class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-small"
        role="progressbar"
      >
@ -2235,6 +2275,7 @@ Array [
      class="ant-space-item"
    >
      <div
+        aria-valuenow="50"
        class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
        role="progressbar"
      >
@ -2318,6 +2359,7 @@ Array [
      style="margin-right: 30px; padding-bottom: 30px;"
    >
      <div
+        aria-valuenow="50"
        class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
        role="progressbar"
      >
@ -2350,6 +2392,7 @@ Array [
      style="margin-right: 30px; padding-bottom: 30px;"
    >
      <div
+        aria-valuenow="50"
        class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-small"
        role="progressbar"
      >
@ -2382,6 +2425,7 @@ Array [
      style="margin-right: 30px; padding-bottom: 30px;"
    >
      <div
+        aria-valuenow="50"
        class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info"
        role="progressbar"
      >
@ -2414,6 +2458,7 @@ Array [
      style="padding-bottom: 30px;"
    >
      <div
+        aria-valuenow="50"
        class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info"
        role="progressbar"
      >
@ -2448,6 +2493,7 @@ Array [
 exports[`renders components/progress/demo/steps.tsx extend context correctly 1`] = `
 Array [
  <div
+    aria-valuenow="50"
    class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
    role="progressbar"
  >
@ -2476,6 +2522,7 @@ Array [
  </div>,
  <br />,
  <div
+    aria-valuenow="30"
    class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
    role="progressbar"
  >
@ -2512,6 +2559,7 @@ Array [
  </div>,
  <br />,
  <div
+    aria-valuenow="100"
    class="ant-progress ant-progress-steps ant-progress-status-success ant-progress-show-info ant-progress-small"
    role="progressbar"
  >
@ -2565,6 +2613,7 @@ Array [
  </div>,
  <br />,
  <div
+    aria-valuenow="60"
    class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
    role="progressbar"
  >
--- a/components/progress/tests/snapshots/demo.test.ts.snap
+++ b/components/progress/tests/snapshots/demo.test.ts.snap
@ -10,6 +10,7 @@ exports[`renders components/progress/demo/circle.tsx correctly 1`] = `
    style="margin-right:8px;padding-bottom:8px"
  >
    <div
+      aria-valuenow="75"
      class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
      role="progressbar"
    >
@ -66,6 +67,7 @@ exports[`renders components/progress/demo/circle.tsx correctly 1`] = `
    style="margin-right:8px;padding-bottom:8px"
  >
    <div
+      aria-valuenow="70"
      class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-default"
      role="progressbar"
    >
@ -139,6 +141,7 @@ exports[`renders components/progress/demo/circle.tsx correctly 1`] = `
    style="padding-bottom:8px"
  >
    <div
+      aria-valuenow="100"
      class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default"
      role="progressbar"
    >
@ -213,6 +216,7 @@ exports[`renders components/progress/demo/circle.tsx correctly 1`] = `
 exports[`renders components/progress/demo/circle-dynamic.tsx correctly 1`] = `
 Array [
  <div
+    aria-valuenow="0"
    class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
    role="progressbar"
    style="margin-right:8px"
@ -336,6 +340,7 @@ Array [
 exports[`renders components/progress/demo/circle-micro.tsx correctly 1`] = `
 Array [
  <div
+    aria-valuenow="60"
    class="ant-progress ant-progress-inline-circle ant-progress-circle ant-progress-status-normal ant-progress-show-info"
    role="progressbar"
  >
@ -401,6 +406,7 @@ exports[`renders components/progress/demo/circle-mini.tsx correctly 1`] = `
    style="margin-right:8px;padding-bottom:8px"
  >
    <div
+      aria-valuenow="30"
      class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
      role="progressbar"
    >
@ -457,6 +463,7 @@ exports[`renders components/progress/demo/circle-mini.tsx correctly 1`] = `
    style="margin-right:8px;padding-bottom:8px"
  >
    <div
+      aria-valuenow="70"
      class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info"
      role="progressbar"
    >
@ -530,6 +537,7 @@ exports[`renders components/progress/demo/circle-mini.tsx correctly 1`] = `
    style="padding-bottom:8px"
  >
    <div
+      aria-valuenow="100"
      class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info"
      role="progressbar"
    >
@ -611,6 +619,7 @@ exports[`renders components/progress/demo/dashboard.tsx correctly 1`] = `
    style="margin-right:8px;padding-bottom:8px"
  >
    <div
+      aria-valuenow="75"
      class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
      role="progressbar"
    >
@ -667,6 +676,7 @@ exports[`renders components/progress/demo/dashboard.tsx correctly 1`] = `
    style="padding-bottom:8px"
  >
    <div
+      aria-valuenow="75"
      class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
      role="progressbar"
    >
@ -724,6 +734,7 @@ exports[`renders components/progress/demo/dashboard.tsx correctly 1`] = `
 exports[`renders components/progress/demo/dynamic.tsx correctly 1`] = `
 Array [
  <div
+    aria-valuenow="0"
    class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
    role="progressbar"
  >
@ -826,6 +837,7 @@ exports[`renders components/progress/demo/format.tsx correctly 1`] = `
    style="margin-right:8px;padding-bottom:8px"
  >
    <div
+      aria-valuenow="75"
      class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
      role="progressbar"
    >
@ -882,6 +894,7 @@ exports[`renders components/progress/demo/format.tsx correctly 1`] = `
    style="padding-bottom:8px"
  >
    <div
+      aria-valuenow="100"
      class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default"
      role="progressbar"
    >
@ -939,6 +952,7 @@ exports[`renders components/progress/demo/format.tsx correctly 1`] = `
 exports[`renders components/progress/demo/gradient-line.tsx correctly 1`] = `
 Array [
  <div
+    aria-valuenow="99"
    class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
    role="progressbar"
  >
@ -963,6 +977,7 @@ Array [
    </span>
  </div>,
  <div
+    aria-valuenow="99"
    class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-default"
    role="progressbar"
  >
@ -995,6 +1010,7 @@ Array [
      style="margin-right:8px;padding-bottom:8px"
    >
      <div
+        aria-valuenow="90"
        class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
        role="progressbar"
      >
@ -1070,6 +1086,7 @@ Array [
      style="padding-bottom:8px"
    >
      <div
+        aria-valuenow="100"
        class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default"
        role="progressbar"
      >
@ -1164,6 +1181,7 @@ Array [
 exports[`renders components/progress/demo/line.tsx correctly 1`] = `
 Array [
  <div
+    aria-valuenow="30"
    class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
    role="progressbar"
  >
@ -1188,6 +1206,7 @@ Array [
    </span>
  </div>,
  <div
+    aria-valuenow="50"
    class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-default"
    role="progressbar"
  >
@ -1212,6 +1231,7 @@ Array [
    </span>
  </div>,
  <div
+    aria-valuenow="70"
    class="ant-progress ant-progress-line ant-progress-status-exception ant-progress-show-info ant-progress-default"
    role="progressbar"
  >
@ -1253,6 +1273,7 @@ Array [
    </span>
  </div>,
  <div
+    aria-valuenow="100"
    class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-default"
    role="progressbar"
  >
@ -1294,6 +1315,7 @@ Array [
    </span>
  </div>,
  <div
+    aria-valuenow="50"
    class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default"
    role="progressbar"
  >
@ -1319,6 +1341,7 @@ exports[`renders components/progress/demo/line-mini.tsx correctly 1`] = `
  style="width:170px"
 >
  <div
+    aria-valuenow="30"
    class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-small"
    role="progressbar"
  >
@ -1343,6 +1366,7 @@ exports[`renders components/progress/demo/line-mini.tsx correctly 1`] = `
    </span>
  </div>
  <div
+    aria-valuenow="50"
    class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-small"
    role="progressbar"
  >
@ -1367,6 +1391,7 @@ exports[`renders components/progress/demo/line-mini.tsx correctly 1`] = `
    </span>
  </div>
  <div
+    aria-valuenow="70"
    class="ant-progress ant-progress-line ant-progress-status-exception ant-progress-show-info ant-progress-small"
    role="progressbar"
  >
@ -1408,6 +1433,7 @@ exports[`renders components/progress/demo/line-mini.tsx correctly 1`] = `
    </span>
  </div>
  <div
+    aria-valuenow="100"
    class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-small"
    role="progressbar"
  >
@ -1454,6 +1480,7 @@ exports[`renders components/progress/demo/line-mini.tsx correctly 1`] = `
 exports[`renders components/progress/demo/linecap.tsx correctly 1`] = `
 Array [
  <div
+    aria-valuenow="75"
    class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
    role="progressbar"
  >
@ -1487,6 +1514,7 @@ Array [
      style="margin-right:8px;padding-bottom:8px"
    >
      <div
+        aria-valuenow="75"
        class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
        role="progressbar"
      >
@ -1543,6 +1571,7 @@ Array [
      style="padding-bottom:8px"
    >
      <div
+        aria-valuenow="75"
        class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
        role="progressbar"
      >
@ -1601,6 +1630,7 @@ Array [
 exports[`renders components/progress/demo/segment.tsx correctly 1`] = `
 Array [
  <div
+    aria-valuenow="30"
    class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
    role="progressbar"
  >
@ -1637,6 +1667,7 @@ Array [
      style="margin-right:8px;padding-bottom:8px"
    >
      <div
+        aria-valuenow="30"
        class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
        role="progressbar"
      >
@ -1693,6 +1724,7 @@ Array [
      style="padding-bottom:8px"
    >
      <div
+        aria-valuenow="30"
        class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
        role="progressbar"
      >
@ -1758,6 +1790,7 @@ Array [
      style="margin-bottom:8px"
    >
      <div
+        aria-valuenow="50"
        class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
        role="progressbar"
      >
@ -1787,6 +1820,7 @@ Array [
      style="margin-bottom:8px"
    >
      <div
+        aria-valuenow="50"
        class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-small"
        role="progressbar"
      >
@ -1815,6 +1849,7 @@ Array [
      class="ant-space-item"
    >
      <div
+        aria-valuenow="50"
        class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info"
        role="progressbar"
      >
@ -1850,6 +1885,7 @@ Array [
      style="margin-right:30px"
    >
      <div
+        aria-valuenow="50"
        class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
        role="progressbar"
      >
@ -1906,6 +1942,7 @@ Array [
      style="margin-right:30px"
    >
      <div
+        aria-valuenow="50"
        class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-small"
        role="progressbar"
      >
@ -1961,6 +1998,7 @@ Array [
      class="ant-space-item"
    >
      <div
+        aria-valuenow="50"
        class="ant-progress ant-progress-inline-circle ant-progress-circle ant-progress-status-normal ant-progress-show-info"
        role="progressbar"
      >
@ -2019,6 +2057,7 @@ Array [
      style="margin-right:30px"
    >
      <div
+        aria-valuenow="50"
        class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
        role="progressbar"
      >
@ -2075,6 +2114,7 @@ Array [
      style="margin-right:30px"
    >
      <div
+        aria-valuenow="50"
        class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-small"
        role="progressbar"
      >
@ -2130,6 +2170,7 @@ Array [
      class="ant-space-item"
    >
      <div
+        aria-valuenow="50"
        class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
        role="progressbar"
      >
@ -2189,6 +2230,7 @@ Array [
      style="margin-right:30px;padding-bottom:30px"
    >
      <div
+        aria-valuenow="50"
        class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
        role="progressbar"
      >
@ -2221,6 +2263,7 @@ Array [
      style="margin-right:30px;padding-bottom:30px"
    >
      <div
+        aria-valuenow="50"
        class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-small"
        role="progressbar"
      >
@ -2253,6 +2296,7 @@ Array [
      style="margin-right:30px;padding-bottom:30px"
    >
      <div
+        aria-valuenow="50"
        class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info"
        role="progressbar"
      >
@ -2285,6 +2329,7 @@ Array [
      style="padding-bottom:30px"
    >
      <div
+        aria-valuenow="50"
        class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info"
        role="progressbar"
      >
@ -2319,6 +2364,7 @@ Array [
 exports[`renders components/progress/demo/steps.tsx correctly 1`] = `
 Array [
  <div
+    aria-valuenow="50"
    class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
    role="progressbar"
  >
@ -2347,6 +2393,7 @@ Array [
  </div>,
  <br />,
  <div
+    aria-valuenow="30"
    class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
    role="progressbar"
  >
@ -2383,6 +2430,7 @@ Array [
  </div>,
  <br />,
  <div
+    aria-valuenow="100"
    class="ant-progress ant-progress-steps ant-progress-status-success ant-progress-show-info ant-progress-small"
    role="progressbar"
  >
@ -2436,6 +2484,7 @@ Array [
  </div>,
  <br />,
  <div
+    aria-valuenow="60"
    class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
    role="progressbar"
  >
--- a/components/progress/tests/snapshots/index.test.tsx.snap
+++ b/components/progress/tests/snapshots/index.test.tsx.snap
@ -2,6 +2,7 @@

 exports[`Progress render dashboard 295 gapDegree 1`] = `
 <div
+  aria-valuenow="0"
  class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
  role="progressbar"
 >
@ -56,6 +57,7 @@ exports[`Progress render dashboard 295 gapDegree 1`] = `

 exports[`Progress render dashboard 296 gapDegree 1`] = `
 <div
+  aria-valuenow="0"
  class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
  role="progressbar"
 >
@ -110,6 +112,7 @@ exports[`Progress render dashboard 296 gapDegree 1`] = `

 exports[`Progress render dashboard zero gapDegree 1`] = `
 <div
+  aria-valuenow="0"
  class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
  role="progressbar"
 >
@ -164,6 +167,7 @@ exports[`Progress render dashboard zero gapDegree 1`] = `

 exports[`Progress render format 1`] = `
 <div
+  aria-valuenow="10"
  class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
  role="progressbar"
 >
@ -195,6 +199,7 @@ exports[`Progress render format 1`] = `

 exports[`Progress render negative progress 1`] = `
 <div
+  aria-valuenow="-20"
  class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
  role="progressbar"
 >
@ -222,6 +227,7 @@ exports[`Progress render negative progress 1`] = `

 exports[`Progress render negative successPercent 1`] = `
 <div
+  aria-valuenow="-20"
  class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
  role="progressbar"
 >
@ -253,6 +259,7 @@ exports[`Progress render negative successPercent 1`] = `

 exports[`Progress render normal progress 1`] = `
 <div
+  aria-valuenow="0"
  class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
  role="progressbar"
 >
@ -280,6 +287,7 @@ exports[`Progress render normal progress 1`] = `

 exports[`Progress render out-of-range progress 1`] = `
 <div
+  aria-valuenow="120"
  class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-default"
  role="progressbar"
 >
@ -324,6 +332,7 @@ exports[`Progress render out-of-range progress 1`] = `

 exports[`Progress render out-of-range progress with info 1`] = `
 <div
+  aria-valuenow="120"
  class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-default"
  role="progressbar"
 >
@ -368,6 +377,7 @@ exports[`Progress render out-of-range progress with info 1`] = `

 exports[`Progress render strokeColor 1`] = `
 <div
+  aria-valuenow="50"
  class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
  role="progressbar"
 >
@ -422,6 +432,7 @@ exports[`Progress render strokeColor 1`] = `

 exports[`Progress render strokeColor 2`] = `
 <div
+  aria-valuenow="50"
  class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
  role="progressbar"
 >
@ -449,6 +460,7 @@ exports[`Progress render strokeColor 2`] = `

 exports[`Progress render strokeColor 3`] = `
 <div
+  aria-valuenow="50"
  class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
  role="progressbar"
 >
@ -477,6 +489,7 @@ exports[`Progress render strokeColor 3`] = `
 exports[`Progress render strokeWidth of progress 1`] = `
 <div>
  <div
+    aria-valuenow="30"
    class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
    role="progressbar"
  >
@ -532,6 +545,7 @@ exports[`Progress render strokeWidth of progress 1`] = `

 exports[`Progress render successColor progress 1`] = `
 <div
+  aria-valuenow="30"
  class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
  role="progressbar"
 >
@ -563,6 +577,7 @@ exports[`Progress render successColor progress 1`] = `

 exports[`Progress render successColor progress type="circle" 1`] = `
 <div
+  aria-valuenow="30"
  class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
  role="progressbar"
 >
@ -617,6 +632,7 @@ exports[`Progress render successColor progress type="circle" 1`] = `

 exports[`Progress render successColor progress type="dashboard" 1`] = `
 <div
+  aria-valuenow="30"
  class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
  role="progressbar"
 >
@ -671,6 +687,7 @@ exports[`Progress render successColor progress type="dashboard" 1`] = `

 exports[`Progress render trailColor progress 1`] = `
 <div
+  aria-valuenow="0"
  class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
  role="progressbar"
 >
@ -699,6 +716,7 @@ exports[`Progress render trailColor progress 1`] = `

 exports[`Progress rtl render component should be rendered correctly in RTL direction 1`] = `
 <div
+  aria-valuenow="0"
  class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default ant-progress-rtl"
  role="progressbar"
 >
@ -726,6 +744,7 @@ exports[`Progress rtl render component should be rendered correctly in RTL direc

 exports[`Progress should support steps 1`] = `
 <div
+  aria-valuenow="0"
  class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
  role="progressbar"
 >
--- a/components/progress/tests/index.test.tsx
+++ b/components/progress/tests/index.test.tsx
@ -385,4 +385,23 @@ describe('Progress', () => {
    );
    errSpy.mockRestore();
  });
+
+  it('should be accessible', () => {
+    const { container: wrapper, rerender } = render(
+      <Progress percent={70} aria-label="My progress" />,
+    );
+    let progress = wrapper.querySelector('[role="progressbar"]');
+    expect(progress).toHaveAttribute('aria-label', 'My progress');
+    expect(progress).toHaveAttribute('aria-valuenow', '70');
+
+    rerender(
+      <>
+        <span id="progressLabel">My progress</span>
+        <Progress percent={90} aria-labelledby="progressLabel" />
+      </>,
+    );
+    progress = wrapper.querySelector('[role="progressbar"]');
+    expect(progress).toHaveAttribute('aria-labelledby', 'progressLabel');
+    expect(progress).toHaveAttribute('aria-valuenow', '90');
+  });
 });
--- a/components/progress/index.tsx
+++ b/components/progress/index.tsx
@ -1,5 +1,5 @@
 import Progress from './progress';

-export type { ProgressProps } from './progress';
+export type { ProgressAriaProps, ProgressProps } from './progress';

 export default Progress;
--- a/components/progress/progress.tsx
+++ b/components/progress/progress.tsx
@ -15,7 +15,7 @@ import useStyle from './style';
 import { getSize, getSuccessPercent, validProgress } from './utils';

 export const ProgressTypes = ['line', 'circle', 'dashboard'] as const;
-export type ProgressType = typeof ProgressTypes[number];
+export type ProgressType = (typeof ProgressTypes)[number];
 const ProgressStatuses = ['normal', 'exception', 'active', 'success'] as const;
 export type ProgressSize = 'default' | 'small';
 export type StringGradients = { [percentage: string]: string };
@ -29,14 +29,16 @@ export interface SuccessProps {
  strokeColor?: string;
 }

-export interface ProgressProps {
+export type ProgressAriaProps = Pick<React.AriaAttributes, 'aria-label' | 'aria-labelledby'>;
+
+export interface ProgressProps extends ProgressAriaProps {
  prefixCls?: string;
  className?: string;
  rootClassName?: string;
  type?: ProgressType;
  percent?: number;
  format?: (percent?: number, successPercent?: number) => React.ReactNode;
-  status?: typeof ProgressStatuses[number];
+  status?: (typeof ProgressStatuses)[number];
  showInfo?: boolean;
  strokeWidth?: number;
  strokeLinecap?: 'butt' | 'square' | 'round';
@ -79,7 +81,7 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
    );
  }, [percent, props.success, props.successPercent]);

-  const progressStatus = React.useMemo<typeof ProgressStatuses[number]>(() => {
+  const progressStatus = React.useMemo<(typeof ProgressStatuses)[number]>(() => {
    if (!ProgressStatuses.includes(status!) && percentNumber >= 100) {
      return 'success';
    }
@ -175,6 +177,7 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
      ref={ref}
      className={classString}
      role="progressbar"
+      aria-valuenow={percentNumber}
      {...omit(restProps, [
        'trailColor',
        'strokeWidth',
--- a/components/steps/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/steps/tests/snapshots/demo-extend.test.ts.snap
@ -2582,6 +2582,7 @@ Array [
            class="ant-steps-progress-icon"
          >
            <div
+              aria-valuenow="60"
              class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
              role="progressbar"
            >
@ -3348,6 +3349,7 @@ exports[`renders components/steps/demo/progress.tsx extend context correctly 1`]
          class="ant-steps-progress-icon"
        >
          <div
+            aria-valuenow="60"
            class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
            role="progressbar"
          >
@ -3595,6 +3597,7 @@ Array [
            class="ant-steps-progress-icon"
          >
            <div
+              aria-valuenow="0"
              class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
              role="progressbar"
            >
@ -3777,6 +3780,7 @@ Array [
            class="ant-steps-progress-icon"
          >
            <div
+              aria-valuenow="0"
              class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
              role="progressbar"
            >
@ -3959,6 +3963,7 @@ Array [
            class="ant-steps-progress-icon"
          >
            <div
+              aria-valuenow="0"
              class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
              role="progressbar"
            >
@ -4141,6 +4146,7 @@ Array [
            class="ant-steps-progress-icon"
          >
            <div
+              aria-valuenow="0"
              class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
              role="progressbar"
            >
--- a/components/steps/tests/snapshots/demo.test.ts.snap
+++ b/components/steps/tests/snapshots/demo.test.ts.snap
@ -2254,6 +2254,7 @@ Array [
            class="ant-steps-progress-icon"
          >
            <div
+              aria-valuenow="60"
              class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
              role="progressbar"
            >
@ -3020,6 +3021,7 @@ exports[`renders components/steps/demo/progress.tsx correctly 1`] = `
          class="ant-steps-progress-icon"
        >
          <div
+            aria-valuenow="60"
            class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
            role="progressbar"
          >
@ -3267,6 +3269,7 @@ Array [
            class="ant-steps-progress-icon"
          >
            <div
+              aria-valuenow="0"
              class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
              role="progressbar"
            >
@ -3449,6 +3452,7 @@ Array [
            class="ant-steps-progress-icon"
          >
            <div
+              aria-valuenow="0"
              class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
              role="progressbar"
            >
@ -3631,6 +3635,7 @@ Array [
            class="ant-steps-progress-icon"
          >
            <div
+              aria-valuenow="0"
              class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
              role="progressbar"
            >
@ -3813,6 +3818,7 @@ Array [
            class="ant-steps-progress-icon"
          >
            <div
+              aria-valuenow="0"
              class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
              role="progressbar"
            >
--- a/components/table/demo/drag-sorting-handler.tsx
+++ b/components/table/demo/drag-sorting-handler.tsx
@ -1,6 +1,7 @@
 import { MenuOutlined } from '@ant-design/icons';
 import type { DragEndEvent } from '@dnd-kit/core';
 import { DndContext } from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import {
  arrayMove,
  SortableContext,
@ -56,10 +57,7 @@ const Row = ({ children, ...props }: RowProps) => {

  const style: React.CSSProperties = {
    ...props.style,
-    transform: CSS.Transform.toString(transform && { ...transform, scaleY: 1 })?.replace(
-      /translate3d\(([^,]+),/,
-      'translate3d(0,',
-    ),
+    transform: CSS.Transform.toString(transform && { ...transform, scaleY: 1 }),
    transition,
    ...(isDragging ? { position: 'relative', zIndex: 9999 } : {}),
  };
@ -118,7 +116,7 @@ const App: React.FC = () => {
  };

  return (
-    <DndContext onDragEnd={onDragEnd}>
+    <DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>
      <SortableContext
        // rowKey array
        items={dataSource.map((i) => i.key)}
--- a/components/table/demo/drag-sorting.tsx
+++ b/components/table/demo/drag-sorting.tsx
@ -1,5 +1,6 @@
 import type { DragEndEvent } from '@dnd-kit/core';
 import { DndContext } from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import {
  arrayMove,
  SortableContext,
@ -87,7 +88,7 @@ const App: React.FC = () => {
  };

  return (
-    <DndContext onDragEnd={onDragEnd}>
+    <DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>
      <SortableContext
        // rowKey array
        items={dataSource.map((i) => i.key)}
--- a/components/tabs/index.en-US.md
+++ b/components/tabs/index.en-US.md
@ -74,6 +74,7 @@ More option at [rc-tabs tabs](https://github.com/react-component/tabs#tabs)
 | --- | --- | --- | --- |
 | closable | Set tab closable. Only works while `type="editable-card"` | boolean | true |
 | closeIcon | Customize close icon in TabPane's head. Only works while `type="editable-card"` | ReactNode | - |
+| closable | Whether the Tab can be closed, Only works while `type="editable-card"` | boolean | true |
 | disabled | Set TabPane disabled | boolean | false |
 | forceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false |
 | key | TabPane's key | string | - |
--- a/components/tabs/index.zh-CN.md
+++ b/components/tabs/index.zh-CN.md
@ -72,15 +72,15 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。

 ### TabItemType

-| 参数        | 说明                                            | 类型      | 默认值 |
-| ----------- | ----------------------------------------------- | --------- | ------ |
-| closable    | 是否可关闭，`在 type="editable-card"`时有效     | boolean   | true   |
-| closeIcon   | 自定义关闭图标，`在 type="editable-card"`时有效 | ReactNode | -      |
-| disabled    | 禁用某一项                                      | boolean   | false  |
-| forceRender | 被隐藏时是否渲染 DOM 结构                       | boolean   | false  |
-| key         | 对应 activeKey                                  | string    | -      |
-| label       | 选项卡头显示文字                                | ReactNode | -      |
-| children    | 选项卡头显示内容                                | ReactNode | -      |
+| 参数        | 说明                                                     | 类型      | 默认值 |
+| ----------- | -------------------------------------------------------- | --------- | ------ |
+| closeIcon   | 自定义关闭图标，在 `type="editable-card"` 时有效         | ReactNode | -      |
+| closable    | 当前选项卡是否可被关闭，在 `type="editable-card"` 时有效 | boolean   | true   |
+| disabled    | 禁用某一项                                               | boolean   | false  |
+| forceRender | 被隐藏时是否渲染 DOM 结构                                | boolean   | false  |
+| key         | 对应 activeKey                                           | string    | -      |
+| label       | 选项卡头显示文字                                         | ReactNode | -      |
+| children    | 选项卡头显示内容                                         | ReactNode | -      |

 ## Design Token

--- a/components/upload/UploadList/ListItem.tsx
+++ b/components/upload/UploadList/ListItem.tsx
@ -247,7 +247,13 @@ const ListItem = React.forwardRef(
              // show loading icon if upload progress listener is disabled
              const loadingProgress =
                'percent' in file ? (
-                  <Progress {...progressProps} type="line" percent={file.percent} />
+                  <Progress
+                    {...progressProps}
+                    type="line"
+                    percent={file.percent}
+                    aria-label={file['aria-label']}
+                    aria-labelledby={file['aria-labelledby']}
+                  />
                ) : null;

              return (
--- a/components/upload/interface.ts
+++ b/components/upload/interface.ts
@ -1,10 +1,10 @@
 import type {
  RcFile as OriRcFile,
-  UploadProps as RcUploadProps,
  UploadRequestOption as RcCustomRequestOptions,
+  UploadProps as RcUploadProps,
 } from 'rc-upload/lib/interface';
 import type * as React from 'react';
-import type { ProgressProps } from '../progress';
+import type { ProgressAriaProps, ProgressProps } from '../progress';

 export interface RcFile extends OriRcFile {
  readonly lastModifiedDate: Date;
@ -16,7 +16,7 @@ export interface HttpRequestHeader {
  [key: string]: string;
 }

-export interface UploadFile<T = any> {
+export interface UploadFile<T = any> extends ProgressAriaProps {
  uid: string;
  size?: number;
  name: string;
--- a/docs/spec/data-format.zh-CN.md
+++ b/docs/spec/data-format.zh-CN.md
@ -42,7 +42,7 @@ title: 数据格式

 ### 金额

-**小写金额：**规范格式为「货币符号+数字」的格式，例如“CNY1,123.00"。 **货币符号**：表示货币种类的符号代码（[货币符号表](https://baike.baidu.com/item/%E8%B4%A7%E5%B8%81%E4%BB%A3%E7%A0%81/7467182?fr=aladdin)），分为字母和字符两种：
+**小写金额：** 规范格式为「货币符号+数字」的格式，例如“CNY1,123.00"。 **货币符号**：表示货币种类的符号代码（[货币符号表](https://baike.baidu.com/item/%E8%B4%A7%E5%B8%81%E4%BB%A3%E7%A0%81/7467182?fr=aladdin)），分为字母和字符两种：

 | 货币符号 | 如何使用及何时使用                                           | 例子      |
 | -------- | ------------------------------------------------------------ | --------- |
@ -56,7 +56,7 @@ title: 数据格式
 <img class="preview-img bad" alt="不推荐示例" description="金额数字到「元」为止的，在「元」之后，应写「整」字，在「角」之后可以不写「整」字。金额数字有「分」的，「分」后面不写「整」字。" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*adz2QIF8umQAAAAAAAAAAABkARQnAQ">
 </ImagePreview>

-**大写金额：**一般用于银行、公司或个人的重要结算凭证和各种交易票据，需要使用大写数字以确保数据无法涂改，规范格式为「货币名称+金额数字」。
+**大写金额：** 一般用于银行、公司或个人的重要结算凭证和各种交易票据，需要使用大写数字以确保数据无法涂改，规范格式为「货币名称+金额数字」。

 <br />

@ -66,7 +66,7 @@ title: 数据格式
 <img class="preview-img bad" alt="不推荐示例" description="“千”不能以单位的形式展示。" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*iuEARoq_-o0AAAAAAAAAAABkARQnAQ">
 </ImagePreview>

-**大额计量：**如果一个金额很大，那么数值中的“万”“亿”单位可采用汉字。如果一个数值很大，那么数值中的“万”“亿”单位可采用汉字。
+**大额计量：** 如果一个金额很大，那么数值中的“万”“亿”单位可采用汉字。如果一个数值很大，那么数值中的“万”“亿”单位可采用汉字。

 ### 日期时间

@ -74,7 +74,7 @@ title: 数据格式

 针对时间精确度要求较高的用户，强调信息发布的精确时间点，有回顾过去内容并通过绝对时间用来检索信息的诉求。

-**日期格式：**可用如下标准化计法：
+**日期格式：** 可用如下标准化计法：

 | 格式 | 如何使用及何时使用 | 例子 |
 | --- | --- | --- |
--- a/docs/spec/form-page.en-US.md
+++ b/docs/spec/form-page.en-US.md
@ -1,202 +0,0 @@
---
-group: Design Patterns
-type: Template Document
-order: 1
-skip: true
-title: Form Page
---
-
-表单页是一种用于信息添加、录入的页面类型。用来确保用户按照要求录入信息提交给系统使用或引导用户进行应用设置。
-
-## 设计目标
-
-帮助用户明确当前页面任务，快速查找和定位修改目标，轻松准确地理解表单项含义及生效后果，同时简化填写流程，确保用户准确、轻松、快速地完成任务。
-
-## 设计原则
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/qbgluDd7ko/shejiyuanze.png)
-
-### Do & Don't
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/1VLX%24%26lNcF/rule1.png)
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/xQckp2tMMQ/rule2.png)
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/TdU3YwlK0r/rule3.png)
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/hlqQKF2YMA/rule4.png)
-
-## 如何设计
-
-表单类页面模板聚焦于提交一次表单的过程体验。按照任务的复杂度，提供多种解决问题的思路：
-
- [普通布局](#WdpbA)
- [任务拆解和编排](#IzXxO)
- [填写和预览](#00nna)
- [特定场景](#yToPl)
-
-### 普通布局
-
-平铺所有需要填写的信息，适合内容项较少、内容项无法按照相关性分组的表单。
-
-#### [模板 - 基础表单](http://preview-techui.dockerlab.alipay.net/createProject)
-
-**什么时候用**
-
-当需要完成一个简单快速的任务，例如输入少量信息即可完成创建。
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/LZJOdo51Z7/putongbuju.png)
-
-### 任务拆解和编排
-
-将大型、复杂任务拆解为多个部分，并按照相关性分组，减轻用户输入负担。尽管每部分内容单独处理，但最终一起完成提交。适用于大型、复杂表单。通过适当的任务分割，可以降低用户出错率。
-
-#### [模板 - 基础分步表单](http://preview-techui.dockerlab.alipay.net/stepform)
-
-作者：晴风将用户需要填写和确认的信息按照线性流程组织，利用步骤条告知用户完整流程和进度，常常在最后提交前让用户再次确认信息，并在流程结束给与明确的结果反馈。
-
-**什么时候用**
-
-适用于具有明确的线性逻辑的任务。
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/2Oh8jRih71/renwuchaijiehebianpai.png)
-
-#### 模板 - 同页分步表单  (Coming soon...)
-
-**什么时候用**
-
-用户需要在同一页面查看表单的完整上下文，而不是像基础分步表单那样拆解为多个独立任务。
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/a2m8t1K3wj/tongyefenbubiaodan.png)
-
-#### [模板 - 分组表单](http://preview-techui.dockerlab.alipay.net/groupviews)
-
-**什么时候用**
-
-单次任务的表单页中需要填写内容众多，且不同内容之中存在一定可分类归纳性。
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/qALbGC%26UWd/fenzubiaodan.png)
-
-#### 模板 - 分组编辑
-
-**什么时候用**
-
-内容量特别大的表单或常常仅需编辑部分内容的表单，该模式常见于详情页的内容编辑。
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/6T4ATJ08Cx/fenzubianji.png)
-
-#### 模板 - 可编辑列表 (开发中...)
-
-**什么时候用**
-
-适用于页面中需要添加一个或多个对象，且每个对象都需要添加或编辑多组数据的情况。
-
-**选择合适的模板**
-
-A. 动态增减：建议条目表单数 <=3 项，并且每个输入框不需要单独的标题使用。 B. 可编辑表格：建议条目表单数 2 ～ 5 项 时使用，以使得每行内容可被完整呈现。 C. 折叠面板编辑：建议条目表单数在 6 ～ 8 项 时使用。 D. 抽屉编辑：建议条目表单表单数 >8 项 时使用 E. 规则树：应用于规则编辑场景。
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/c90pFAXI29/kebianjiliebiao.png)
-
-#### 模板 -  联动表单 (Coming soon...)
-
-**什么时候用**
-
-一般分为显示联动、数据联动、事件联动，当需要展示联动选项的时候使用。
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/gEk0Lsc48%24/liandongbiaodan.png)
-
-### 填写和预览
-
-填写表单的同时提供信息摘要区或实时效果图，便于在提交前预览和确认重要信息，适用于需要提前预知表单生效后关键信息场景。
-
-#### 模板 - 下单页(Coming soon...)
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/oLIvbWHkLr/xiadanye.png)
-
-### 特定场景模板
-
-#### [模板 - 设置](http://preview-techui.dockerlab.alipay.net/settingform)
-
-**什么时候用**
-
-个人档案、应用配置等设置类页面，使用频率较低，一般用户操作后不会频繁修改。
-
-**使用建议**
-
- 每个页面选择一种设置模式：
-  - **即时生效模式：**用户在修改选项即生效；
-  - 提交生效模式：当设置项之间有关联关系，使用提交生效模式。
- 根据设置项数量确定是否需要分组：
-  - 数量 <7 项，不建议分组；
-  - 数量 7~ 15 个建议分组；
-  - 数量 >15 个建议使用页签分组；
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/jHVAIq%26wAV/shezhi.png)
-
-#### [模板 - 登录](https://preview.pro.ant.design/user/login)
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/PzIlaIzCXP/denglu.png)
-
-#### [模板 - 注册](https://preview.pro.ant.design/user/register)
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/e1%26%264knIYi/zhuce.png)
-
-### 设计建议
-
-#### 前期准备
-
- 表单页的核心由表单项组成，设计前建议先熟悉表单基础规则；
- 梳理用户当前信息录入任务中所涉及的信息类型，并根据 [antd 数据录入规则](/docs/spec/data-entry-cn#header) 确定所使用的组件；
-
-#### 布局方式
-
-在单个表单页中需要根据内容量进行合理地布局，以兼顾页面展示和用户效率。表单页布局可由简到繁划分为 4 个梯度，每一级梯度都兼容前一种布局方式。
-
-**基础布局**
-
-在一个区域内从上到下单列布局，引导用户纵向阅读，据[研究](https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php)这是能够最高效完成任务的布局方式。
-
-> 以下“区域”特指页面、抽屉、弹窗、卡片内或分组标题下。
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/LVM7Wacqsw/jichubuju.png)
-
-**弱分组**
-
-在空间有限时，较短宽度且具有相关性的表单项可多个组合在一行中，形成分组的暗示。
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/5D%24GIinshq/ruofenzu1.png)
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/mCxfEh3T%24B/ruofenzu2.png)
-
-为避免和弱分组布局的阅读顺序混淆，一个区域内禁用多列表单。
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/G78FNhcfYa/ruofenzu3.png)
-
-**区域内分组**
-
-当一个区域中内容较多且存在可分类归纳性时，可通过区分标题来进行区域内分组。
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/ECga%24A1EgS/quyuneifenzu.png)
-
-**卡片分组**
-
-当一个页面中内容众多（通常大于两屏）且存在可分类归纳性时，可通过卡片分组来承载。每个卡片需要包含一个大标题。
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/OM9iaWOM48/qiapianfenzu1.png)
-
-关于使用何种布局方式的判断，和详情页类似，应从信息的复杂度和关联性两个维度去梳理。随后可选择相匹配的模板，进行页面快速搭建。将相关的元素分组到一起。
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/GccgrpeoPm/qiapianfenzu2.png)
-
-## 4. 扩展阅读
-
-### 会用到哪些模块或组件
-
- [数据录入组件](/components/form-cn/#header)
- [步骤条](/components/steps-cn/#header)
-
-### 相关页面
-
- [列表页](/docs/spec/research-list)
- [结果页](/docs/spec/research-result)
- [详情页](/docs/spec/detail-page)
--- a/docs/spec/form-page.zh-CN.md
+++ b/docs/spec/form-page.zh-CN.md
@ -1,202 +0,0 @@
---
-group: 设计模式
-type: 模板文档
-order: 1
-skip: true
-title: 表单页
---
-
-表单页是一种用于信息添加、录入的页面类型。用来确保用户按照要求录入信息提交给系统使用或引导用户进行应用设置。
-
-## 设计目标
-
-帮助用户明确当前页面任务，快速查找和定位修改目标，轻松准确地理解表单项含义及生效后果，同时简化填写流程，确保用户准确、轻松、快速地完成任务。
-
-## 设计原则
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/qbgluDd7ko/shejiyuanze.png)
-
-### Do & Don't
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/1VLX%24%26lNcF/rule1.png)
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/xQckp2tMMQ/rule2.png)
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/TdU3YwlK0r/rule3.png)
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/hlqQKF2YMA/rule4.png)
-
-## 如何设计
-
-表单类页面模板聚焦于提交一次表单的过程体验。按照任务的复杂度，提供多种解决问题的思路：
-
- [普通布局](#WdpbA)
- [任务拆解和编排](#IzXxO)
- [填写和预览](#00nna)
- [特定场景](#yToPl)
-
-### 普通布局
-
-平铺所有需要填写的信息，适合内容项较少、内容项无法按照相关性分组的表单。
-
-#### [模板 - 基础表单](http://preview-techui.dockerlab.alipay.net/createProject)
-
-**什么时候用**
-
-当需要完成一个简单快速的任务，例如输入少量信息即可完成创建。
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/LZJOdo51Z7/putongbuju.png)
-
-### 任务拆解和编排
-
-将大型、复杂任务拆解为多个部分，并按照相关性分组，减轻用户输入负担。尽管每部分内容单独处理，但最终一起完成提交。适用于大型、复杂表单。通过适当的任务分割，可以降低用户出错率。
-
-#### [模板 - 基础分步表单](http://preview-techui.dockerlab.alipay.net/stepform)
-
-作者：晴风将用户需要填写和确认的信息按照线性流程组织，利用步骤条告知用户完整流程和进度，常常在最后提交前让用户再次确认信息，并在流程结束给与明确的结果反馈。
-
-**什么时候用**
-
-适用于具有明确的线性逻辑的任务。
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/2Oh8jRih71/renwuchaijiehebianpai.png)
-
-#### 模板 - 同页分步表单  (Coming soon...)
-
-**什么时候用**
-
-用户需要在同一页面查看表单的完整上下文，而不是像基础分步表单那样拆解为多个独立任务。
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/a2m8t1K3wj/tongyefenbubiaodan.png)
-
-#### [模板 - 分组表单](http://preview-techui.dockerlab.alipay.net/groupviews)
-
-**什么时候用**
-
-单次任务的表单页中需要填写内容众多，且不同内容之中存在一定可分类归纳性。
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/qALbGC%26UWd/fenzubiaodan.png)
-
-#### 模板 - 分组编辑
-
-**什么时候用**
-
-内容量特别大的表单或常常仅需编辑部分内容的表单，该模式常见于详情页的内容编辑。
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/6T4ATJ08Cx/fenzubianji.png)
-
-#### 模板 - 可编辑列表 (开发中...)
-
-**什么时候用**
-
-适用于页面中需要添加一个或多个对象，且每个对象都需要添加或编辑多组数据的情况。
-
-**选择合适的模板**
-
-A. 动态增减：建议条目表单数 <=3 项，并且每个输入框不需要单独的标题使用。 B. 可编辑表格：建议条目表单数 2 ～ 5 项 时使用，以使得每行内容可被完整呈现。 C. 折叠面板编辑：建议条目表单数在 6 ～ 8 项 时使用。 D. 抽屉编辑：建议条目表单表单数 >8 项 时使用 E. 规则树：应用于规则编辑场景。
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/c90pFAXI29/kebianjiliebiao.png)
-
-#### 模板 -  联动表单 (Coming soon...)
-
-**什么时候用**
-
-一般分为显示联动、数据联动、事件联动，当需要展示联动选项的时候使用。
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/gEk0Lsc48%24/liandongbiaodan.png)
-
-### 填写和预览
-
-填写表单的同时提供信息摘要区或实时效果图，便于在提交前预览和确认重要信息，适用于需要提前预知表单生效后关键信息场景。
-
-#### 模板 - 下单页(Coming soon...)
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/oLIvbWHkLr/xiadanye.png)
-
-### 特定场景模板
-
-#### [模板 - 设置](http://preview-techui.dockerlab.alipay.net/settingform)
-
-**什么时候用**
-
-个人档案、应用配置等设置类页面，使用频率较低，一般用户操作后不会频繁修改。
-
-**使用建议**
-
- 每个页面选择一种设置模式：
-  - **即时生效模式：**用户在修改选项即生效；
-  - 提交生效模式：当设置项之间有关联关系，使用提交生效模式。
- 根据设置项数量确定是否需要分组：
-  - 数量 <7 项，不建议分组；
-  - 数量 7~ 15 个建议分组；
-  - 数量 >15 个建议使用页签分组；
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/jHVAIq%26wAV/shezhi.png)
-
-#### [模板 - 登录](https://preview.pro.ant.design/user/login)
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/PzIlaIzCXP/denglu.png)
-
-#### [模板 - 注册](https://preview.pro.ant.design/user/register)
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/e1%26%264knIYi/zhuce.png)
-
-### 设计建议
-
-#### 前期准备
-
- 表单页的核心由表单项组成，设计前建议先熟悉表单基础规则；
- 梳理用户当前信息录入任务中所涉及的信息类型，并根据 [antd 数据录入规则](/docs/spec/data-entry-cn#header) 确定所使用的组件；
-
-#### 布局方式
-
-在单个表单页中需要根据内容量进行合理地布局，以兼顾页面展示和用户效率。表单页布局可由简到繁划分为 4 个梯度，每一级梯度都兼容前一种布局方式。
-
-**基础布局**
-
-在一个区域内从上到下单列布局，引导用户纵向阅读，据[研究](https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php)这是能够最高效完成任务的布局方式。
-
-> 以下“区域”特指页面、抽屉、弹窗、卡片内或分组标题下。
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/LVM7Wacqsw/jichubuju.png)
-
-**弱分组**
-
-在空间有限时，较短宽度且具有相关性的表单项可多个组合在一行中，形成分组的暗示。
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/5D%24GIinshq/ruofenzu1.png)
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/mCxfEh3T%24B/ruofenzu2.png)
-
-为避免和弱分组布局的阅读顺序混淆，一个区域内禁用多列表单。
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/G78FNhcfYa/ruofenzu3.png)
-
-**区域内分组**
-
-当一个区域中内容较多且存在可分类归纳性时，可通过区分标题来进行区域内分组。
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/ECga%24A1EgS/quyuneifenzu.png)
-
-**卡片分组**
-
-当一个页面中内容众多（通常大于两屏）且存在可分类归纳性时，可通过卡片分组来承载。每个卡片需要包含一个大标题。
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/OM9iaWOM48/qiapianfenzu1.png)
-
-关于使用何种布局方式的判断，和详情页类似，应从信息的复杂度和关联性两个维度去梳理。随后可选择相匹配的模板，进行页面快速搭建。将相关的元素分组到一起。
-
-![image.png](https://gw.alipayobjects.com/zos/antfincdn/GccgrpeoPm/qiapianfenzu2.png)
-
-## 4. 扩展阅读
-
-### 会用到哪些模块或组件
-
- [数据录入组件](/components/form-cn/#header)
- [步骤条](/components/steps-cn/#header)
-
-### 相关页面
-
- [列表页](/docs/spec/research-list)
- [结果页](/docs/spec/research-result)
- [详情页](/docs/spec/detail-page)
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "antd",
-  "version": "5.5.1",
+  "version": "5.5.2",
  "packageManager": "^npm@9.0.0",
  "description": "An enterprise-class UI design language and React components implementation",
  "title": "Ant Design",
@ -114,7 +114,7 @@
    "@ant-design/react-slick": "~1.0.0",
    "@babel/runtime": "^7.18.3",
    "@ctrl/tinycolor": "^3.6.0",
-    "@rc-component/color-picker": "~1.1.1",
+    "@rc-component/color-picker": "~1.2.0",
    "@rc-component/mutate-observer": "^1.0.0",
    "@rc-component/tour": "~1.8.0",
    "@rc-component/trigger": "^1.13.0",
@ -126,10 +126,10 @@
    "rc-checkbox": "~3.0.0",
    "rc-collapse": "~3.7.0",
    "rc-dialog": "~9.1.0",
-    "rc-drawer": "~6.1.1",
+    "rc-drawer": "~6.2.0",
    "rc-dropdown": "~4.1.0",
    "rc-field-form": "~1.32.0",
-    "rc-image": "~5.16.0",
+    "rc-image": "~5.17.1",
    "rc-input": "~1.0.4",
    "rc-input-number": "~7.4.0",
    "rc-mentions": "~2.3.0",
@ -163,6 +163,7 @@
    "@argos-ci/core": "^0.8.0",
    "@babel/eslint-plugin": "^7.19.1",
    "@dnd-kit/core": "^6.0.7",
+    "@dnd-kit/modifiers": "^6.0.1",
    "@dnd-kit/sortable": "^7.0.2",
    "@dnd-kit/utilities": "^3.2.1",
    "@emotion/babel-preset-css-prop": "^11.10.0",
--- a/webpack.config.js
+++ b/webpack.config.js
@ -39,7 +39,7 @@ if (process.env.RUN_ENV === 'PRODUCTION') {
      });
    }

-    if (!process.env.CI) {
+    if (!process.env.CI || process.env.ANALYZER) {
      config.plugins.push(
        new BundleAnalyzerPlugin({
          analyzerMode: 'static',