chore: sync master into next

.ncurc.js

@@ -18,17 +18,5 @@ module.exports = {
     return check.some((prefix) => name.startsWith(prefix));
   },
   // https://github.com/raineorshine/npm-check-updates#target
-  target: (name, semver) => {
+  target: () => `semver`,
-    const { operator } = semver[0] ?? {};
-
-    // rc-component
-    if (rcOrg.some((prefix) => name.startsWith(prefix))) {
-      // `^` always upgrade latest, otherwise follow semver.
-      if (operator === '^') {
-        return 'latest';
-      }
-    }
-
-    return 'semver';
-  },
 };

CHANGELOG.en-US.md

@@ -15,15 +15,48 @@ tag: vVERSION
 
 ---
 
-### 5.23.4
+## 5.24.0
+
+`2025-02-11`
+
+- 🆕 Notification support `actions` prop and deprecated `btn` prop. [#52703](https://github.com/ant-design/ant-design/pull/52703) [@thinkasany](https://github.com/thinkasany)
+- 🆕 Carousel support show dot duration. [#52672](https://github.com/ant-design/ant-design/pull/52672) [@yellowryan](https://github.com/yellowryan)
+- 🆕 Input.OTP support `separator` prop. [#52668](https://github.com/ant-design/ant-design/pull/52668) [@HaceraI](https://github.com/HaceraI)
+- 🆕 Descriptions add `labelColor` component token. [#52700](https://github.com/ant-design/ant-design/pull/52700) [@guoyunhe](https://github.com/guoyunhe)
+- 🆕 Segmented supports `shape="round"`. [#52685](https://github.com/ant-design/ant-design/pull/52685) [@afc163](https://github.com/afc163)
+- 🆕 ConfigProvider support `variant` for Card. [#52552](https://github.com/ant-design/ant-design/pull/52552) [@thinkasany](https://github.com/thinkasany)
+- 🆕 Progress/Step supports custom rounding with `rounding` prop. [#52017](https://github.com/ant-design/ant-design/pull/52017) [@yanghoxom](https://github.com/yanghoxom)
+- 🆕 Divider `orientation` support `start` and `end`. [#52567](https://github.com/ant-design/ant-design/pull/52567) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🆕 Add `underlined` to `variant` of Input, InputNumber, Mentions, Form, Select, Cascader, TreeSelect, DatePicker and TimePicker. [#52546](https://github.com/ant-design/ant-design/pull/52546) [@ustcfury](https://github.com/ustcfury)
+- 🆕 ConfigProvider support global config of Modal `centered` . [#52343](https://github.com/ant-design/ant-design/pull/52343) [@guoyunhe](https://github.com/guoyunhe)
+- 🆕 Add `label` class name for Checkbox and Radio. [#52322](https://github.com/ant-design/ant-design/pull/52322) [@guoyunhe](https://github.com/guoyunhe)
+- 🐞 Fix Tooltip/Popover/Popconfirm/Dropdown misaligned popup positions with custom children in React 19. [react-component/util#623](https://github.com/react-component/util/pull/623) [@zombieJ](https://github.com/zombieJ)
+- 🐞 Fix DatePicker.RangePicker arrow position when popup auto adjust position. [#52719](https://github.com/ant-design/ant-design/pull/52719) [@zombieJ](https://github.com/zombieJ)
+- 🐞 Update locale `filterCheckall` to `filterCheckAll`. [#52517](https://github.com/ant-design/ant-design/pull/52517) [@thinkasany](https://github.com/thinkasany)
+- 🐞 Fix Form that `scrollToField` and `scrollToFirstError` cannot focus components of antd. [#52726](https://github.com/ant-design/ant-design/pull/52726) [@Wxh16144](https://github.com/Wxh16144)
+- 💄 Fix Button shadow color appearing awkward on dark backgrounds. [#52701](https://github.com/ant-design/ant-design/pull/52701) [@afc163](https://github.com/afc163)
+- 💄 Fixed the unnatural animation transition effect of Segmented component in dark mode. [#52708](https://github.com/ant-design/ant-design/pull/52708) [@yellowryan](https://github.com/yellowryan)
+- 💄 Separate style of Input and TextArea. [#52570](https://github.com/ant-design/ant-design/pull/52570) [@guoyunhe](https://github.com/guoyunhe)
+- 💄 Fix Input and Select style issue under css var mode. [#52554](https://github.com/ant-design/ant-design/pull/52554) [@li-jia-nan](https://github.com/li-jia-nan)
+- ⌨️ Remove role="alert" from Form field error to improve screen reader experience. [#52661](https://github.com/ant-design/ant-design/pull/52661) [@mellis481](https://github.com/mellis481)
+- ⌨️ Improve accessibility by adding localized labels for empty table header and panel buttons. [#52689](https://github.com/ant-design/ant-design/pull/52689) [@aojunhao123](https://github.com/aojunhao123)
+- ⌨️ Improve Tabs accessibility by fixing error `Certain ARIA roles must contain particular children`. [#52677](https://github.com/ant-design/ant-design/pull/52677) [@afc163](https://github.com/afc163)
+- ⌨️ Add screen reader support for Tooltip. [#52293](https://github.com/ant-design/ant-design/pull/52293) [@aojunhao123](https://github.com/aojunhao123)
+- TypeScript
+  - 🤖 Separate type of Button `onClick` event by `href`. [#52654](https://github.com/ant-design/ant-design/pull/52654) [@Brew-Brew](https://github.com/Brew-Brew)
+  - 🤖 Deprecate Button.Group, prefer Space.Compact. [#52572](https://github.com/ant-design/ant-design/pull/52572) [@guoyunhe](https://github.com/guoyunhe)
+  - 🤖 Deprecate Input.Group, prefer Space.Compact. [#52571](https://github.com/ant-design/ant-design/pull/52571) [@guoyunhe](https://github.com/guoyunhe)
+  - 🤖 Tooltip export TooltipRef type. [#49230](https://github.com/ant-design/ant-design/pull/49230) [@nuintun](https://github.com/nuintun)
+
+## 5.23.4
 
 `2025-02-05`
 
 First release in the Year of the Snake, wishing you a prosperous start! 🐍
 
-- 🐞 Fixed Pagination accessibility issue by supplementing missing ARIA attributes support. [#52616](https://github.com/ant-design/ant-design/pull/52616) [@aojunhao123](https://github.com/aojunhao123)  
+- 🐞 Fixed Pagination accessibility issue by supplementing missing ARIA attributes support. [#52616](https://github.com/ant-design/ant-design/pull/52616) [@aojunhao123](https://github.com/aojunhao123)
-- 🐞 Added TextArea component support in `Space.Compact`. [#52639](https://github.com/ant-design/ant-design/pull/52639) [@Can-Chen](https://github.com/Can-Chen)  
+- 🐞 Added TextArea component support in `Space.Compact`. [#52639](https://github.com/ant-design/ant-design/pull/52639) [@Can-Chen](https://github.com/Can-Chen)
-- 🐞 Fixed Menu with `theme="dark"` and `mode="horizontal"` identical text/background color issue. [#52617](https://github.com/ant-design/ant-design/pull/52617) [@afc163](https://github.com/afc163)  
+- 🐞 Fixed Menu with `theme="dark"` and `mode="horizontal"` identical text/background color issue. [#52617](https://github.com/ant-design/ant-design/pull/52617) [@afc163](https://github.com/afc163)
 - 🇦🇪 Add Tour Arabic translation. [#52642](https://github.com/ant-design/ant-design/pull/52642) [@Sagie501](https://github.com/Sagie501)
 - 🇮🇱 Add Tour Hebrew translation. [#52641](https://github.com/ant-design/ant-design/pull/52641) [@Sagie501](https://github.com/Sagie501)
 

CHANGELOG.zh-CN.md

@@ -15,6 +15,39 @@ tag: vVERSION
 
 ---
 
+## 5.24.0
+
+`2025-02-11`
+
+- 🆕 Notification 支持 `actions` 属性并废弃 `btn` 属性。[#52703](https://github.com/ant-design/ant-design/pull/52703) [@thinkasany](https://github.com/thinkasany)
+- 🆕 Carousel 支持展示指示点进度。[#52672](https://github.com/ant-design/ant-design/pull/52672) [@yellowryan](https://github.com/yellowryan)
+- 🆕 Input.OTP 支持 `separator` 属性。[#52668](https://github.com/ant-design/ant-design/pull/52668) [@HaceraI](https://github.com/HaceraI)
+- 🆕 Descriptions 增加 `labelColor` 组件 token。[#52700](https://github.com/ant-design/ant-design/pull/52700) [@guoyunhe](https://github.com/guoyunhe)
+- 🆕 Segmented 支持 `shape="round"` 的胶囊形状的样式。[#52685](https://github.com/ant-design/ant-design/pull/52685) [@afc163](https://github.com/afc163)
+- 🆕 ConfigProvider 支持 Card 组件的 `variant` 配置。[#52552](https://github.com/ant-design/ant-design/pull/52552) [@thinkasany](https://github.com/thinkasany)
+- 🆕 Progress/Step 支持使用 `rounding` 属性自定义取整方法。[#52017](https://github.com/ant-design/ant-design/pull/52017) [@yanghoxom](https://github.com/yanghoxom)
+- 🆕 Divider 的 `orientation` 属性支持 `start` 和 `end`.[#52567](https://github.com/ant-design/ant-design/pull/52567) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🆕 为 Input、InputNumber、Mentions、Form、Select、Cascader、TreeSelect、DatePicker、TimePicker 组件的 `variant` 添加 `underlined` 属性。[#52546](https://github.com/ant-design/ant-design/pull/52546) [@ustcfury](https://github.com/ustcfury)
+- 🆕 ConfigProvider 支持 Modal `centered` 全局配置。[#52343](https://github.com/ant-design/ant-design/pull/52343) [@guoyunhe](https://github.com/guoyunhe)
+- 🆕 为 Checkbox 和 Radio 增加 `label` 类名。[#52322](https://github.com/ant-design/ant-design/pull/52322) [@guoyunhe](https://github.com/guoyunhe)
+- 🐞 修复 Tooltip/Popover/Popconfirm/Dropdown 在 React 19 下 children 为自定义组件时弹层位置错乱的问题。[react-component/util#623](https://github.com/react-component/util/pull/623) [@zombieJ](https://github.com/zombieJ)
+- 🐞 修复 DatePicker.RangePicker 弹出窗体自动调整位置时，面板的箭头位置不正确的问题。[#52719](https://github.com/ant-design/ant-design/pull/52719) [@zombieJ](https://github.com/zombieJ)
+- 🐞 修正 locale 中 `filterCheckall` 为 `filterCheckAll`。[#52517](https://github.com/ant-design/ant-design/pull/52517) [@thinkasany](https://github.com/thinkasany)
+- 🐞 修复 Form `scrollToField` 和 `scrollToFirstError` 无法聚焦 antd 组件的问题。[#52726](https://github.com/ant-design/ant-design/pull/52726) [@Wxh16144](https://github.com/Wxh16144)
+- 💄 修复 Button 预设值按钮的阴影色在暗色背景下显示突兀的问题。[#52701](https://github.com/ant-design/ant-design/pull/52701) [@afc163](https://github.com/afc163)
+- 💄 修复 Segmented 组件在暗黑模式下的动画过渡效果不自然的问题。[#52708](https://github.com/ant-design/ant-design/pull/52708) [@yellowryan](https://github.com/yellowryan)
+- 💄 拆分 Input 和 TextArea 样式。[#52570](https://github.com/ant-design/ant-design/pull/52570) [@guoyunhe](https://github.com/guoyunhe)
+- 💄 修复 Input 和 Select 在 css var 模式下的样式问题。[#52554](https://github.com/ant-design/ant-design/pull/52554) [@li-jia-nan](https://github.com/li-jia-nan)
+- ⌨️ Form field error 移除 role="alert" 以提升可访问性。[#52661](https://github.com/ant-design/ant-design/pull/52661) [@mellis481](https://github.com/mellis481)
+- ⌨️ 优化无障碍体验，为空表头和面板按钮添加本地化标签。[#52689](https://github.com/ant-design/ant-design/pull/52689) [@aojunhao123](https://github.com/aojunhao123)
+- ⌨️ 优化 Tabs 组件的可访问性，修复 `Certain ARIA roles must contain particular children` 的报错。[#52677](https://github.com/ant-design/ant-design/pull/52677) [@afc163](https://github.com/afc163)
+- ⌨️ 为 Tooltip 添加读屏器支持。[#52293](https://github.com/ant-design/ant-design/pull/52293) [@aojunhao123](https://github.com/aojunhao123)
+- TypeScript
+  - 🤖 Button 根据 `href` 属性区分 `onClick` 事件类型。[#52654](https://github.com/ant-design/ant-design/pull/52654) [@Brew-Brew](https://github.com/Brew-Brew)
+  - 🤖 废弃 Button.Group, 推荐 Space.Compact。[#52572](https://github.com/ant-design/ant-design/pull/52572) [@guoyunhe](https://github.com/guoyunhe)
+  - 🤖 废弃 Input.Group，推荐 Space.Compact。[#52571](https://github.com/ant-design/ant-design/pull/52571) [@guoyunhe](https://github.com/guoyunhe)
+  - 🤖 Tooltip 导出 TooltipRef 类型。[#49230](https://github.com/ant-design/ant-design/pull/49230) [@nuintun](https://github.com/nuintun)
+
 ## 5.23.4
 
 `2025-02-05`

components/_util/wave/WaveEffect.tsx

@@ -41,14 +41,12 @@ const WaveEffect = (props: WaveEffectProps) => {
   const [height, setHeight] = React.useState(0);
   const [enabled, setEnabled] = React.useState(false);
 
-  const waveStyle = {
+  const waveStyle: React.CSSProperties = {
     left,
     top,
     width,
     height,
     borderRadius: borderRadius.map((radius) => `${radius}px`).join(' '),
-  } as React.CSSProperties & {
-    [name: string]: number | string;
   };
 
   if (color) {

components/alert/ErrorBoundary.tsx

@@ -50,7 +50,7 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
             <pre style={{ fontSize: '0.9em', overflowX: 'auto' }}>{errorDescription}</pre>
           }
         />
-      );
+      ) as React.ReactNode;
     }
     return children;
   }

components/form/Form.tsx

@@ -7,7 +7,6 @@ import type {
   ValidateErrorEntity,
 } from '@rc-component/form/lib/interface';
 import classNames from 'classnames';
-import type { Options } from 'scroll-into-view-if-needed';
 
 import type { Variant } from '../config-provider';
 import { useComponentConfig } from '../config-provider/context';
@@ -23,7 +22,7 @@ import type { FeedbackIcons } from './FormItem';
 import useForm from './hooks/useForm';
 import type { FormInstance } from './hooks/useForm';
 import useFormWarning from './hooks/useFormWarning';
-import type { FormLabelAlign } from './interface';
+import type { FormLabelAlign, ScrollFocusOptions } from './interface';
 import useStyle from './style';
 import ValidateMessagesContext from './validateMessagesContext';
 
@@ -34,9 +33,7 @@ export type RequiredMark =
 export type FormLayout = 'horizontal' | 'inline' | 'vertical';
 export type FormItemLayout = 'horizontal' | 'vertical';
 
-export type ScrollFocusOptions = Options & {
+export type { ScrollFocusOptions };
-  focus?: boolean;
-};
 
 export interface FormProps<Values = any> extends Omit<RcFormProps<Values>, 'form'> {
   prefixCls?: string;
@@ -181,9 +178,6 @@ const InternalForm: React.ForwardRefRenderFunction<FormRef, FormProps> = (props,
         defaultScrollToFirstError = { ...defaultScrollToFirstError, ...options };
       }
       wrapForm.scrollToField(fieldName, defaultScrollToFirstError);
-      if (defaultScrollToFirstError.focus) {
-        wrapForm.focusField(fieldName);
-      }
     }
   };
 

components/form/__tests__/index.test.tsx

@@ -474,6 +474,57 @@ describe('Form', () => {
     });
   });
 
+  describe('scrollToField with focus', () => {
+    it('focusField should work', () => {
+      let formInstance: any;
+      const Demo = () => {
+        const [form] = Form.useForm();
+        formInstance = form;
+        return (
+          <Form>
+            <Form.Item name="test">
+              <input type="text" />
+            </Form.Item>
+          </Form>
+        );
+      };
+
+      const { getByRole } = render(<Demo />);
+      const input = getByRole('textbox');
+
+      formInstance.focusField('test');
+      expect(input).toHaveFocus();
+    });
+
+    // https://github.com/ant-design/ant-design/pull/52712#issuecomment-2646831569
+    it('focusField should work with Select', () => {
+      let formInstance: any;
+
+      const Demo = () => {
+        const [form] = Form.useForm();
+        formInstance = form;
+        return (
+          <Form form={form}>
+            <Form.Item name="test">
+              <Select
+                options={[
+                  { label: 'afc163', value: 'A' },
+                  { label: 'Wxh16144', value: 'B' },
+                ]}
+              />
+            </Form.Item>
+          </Form>
+        );
+      };
+
+      const { getByRole } = render(<Demo />);
+      const select = getByRole('combobox');
+
+      formInstance.focusField('test');
+      expect(select).toHaveFocus();
+    });
+  });
+
   describe('scrollToFirstError', () => {
     it('should work with scrollToFirstError', async () => {
       const onFinishFailed = jest.fn();
@@ -562,7 +613,6 @@ describe('Form', () => {
 
     it('should scrollToFirstError work with focus', async () => {
       const onFinishFailed = jest.fn();
-      const focusSpy = jest.spyOn(HTMLElement.prototype, 'focus');
 
       const { container } = render(
         <Form scrollToFirstError={{ block: 'center', focus: true }} onFinishFailed={onFinishFailed}>
@@ -576,20 +626,17 @@ describe('Form', () => {
       );
 
       expect(scrollIntoView).not.toHaveBeenCalled();
-      expect(focusSpy).not.toHaveBeenCalled();
 
       fireEvent.submit(container.querySelector('form')!);
       await waitFakeTimer();
 
       const inputNode = document.getElementById('test');
-      expect(focusSpy).toHaveBeenCalledWith();
       expect(scrollIntoView).toHaveBeenCalledWith(inputNode, {
         block: 'center',
-        focus: true,
         scrollMode: 'if-needed',
       });
 
-      focusSpy.mockRestore();
+      expect(inputNode).toHaveFocus();
     });
 
     // https://github.com/ant-design/ant-design/issues/28869

components/form/hooks/useForm.ts

@@ -58,21 +58,29 @@ export default function useForm<Values = any>(form?: FormInstance<Values>): [For
           },
         },
         scrollToField: (name: NamePath, options: ScrollOptions = {}) => {
+          const { focus, ...restOpt } = options;
           const node = getFieldDOMNode(name, wrapForm);
 
           if (node) {
             scrollIntoView(node, {
               scrollMode: 'if-needed',
               block: 'nearest',
-              ...options,
+              ...restOpt,
             } as any);
+
+            // Focus if scroll success
+            if (focus) {
+              wrapForm.focusField(name);
+            }
           }
         },
         focusField: (name: NamePath) => {
-          const node = getFieldDOMNode(name, wrapForm);
+          const itemRef = wrapForm.getFieldInstance(name);
 
-          if (node) {
+          if (typeof itemRef?.focus === 'function') {
-            node.focus?.();
+            itemRef.focus();
+          } else {
+            getFieldDOMNode(name, wrapForm)?.focus?.();
           }
         },
         getFieldInstance: (name: NamePath) => {

components/form/index.en-US.md

@@ -80,7 +80,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | name | Form name. Will be the prefix of Field `id` | string | - |  |
 | preserve | Keep field value even when field removed. You can get the preserve field value by `getFieldsValue(true)` | boolean | true | 4.4.0 |
 | requiredMark | Required mark style. Can use required mark or optional mark. You can not config to single Form.Item since this is a Form level config | boolean \| `optional` \| ((label: ReactNode, info: { required: boolean }) => ReactNode) | true | `renderProps`: 5.9.0 |
-| scrollToFirstError | Auto scroll to first failed field when submit | boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) \| { focus: boolean } | false |  |
+| scrollToFirstError | Auto scroll to first failed field when submit | boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) \| { focus: boolean } | false | focus: 5.24.0 |
 | size | Set field component size (antd components only) | `small` \| `middle` \| `large` | - |  |
 | validateMessages | Validation prompt template, description [see below](#validatemessages) | [ValidateMessages](https://github.com/ant-design/ant-design/blob/6234509d18bac1ac60fbb3f92a5b2c6a6361295a/components/locale/en_US.ts#L88-L134) | - |  |
 | validateTrigger | Config field validate trigger | string \| string\[] | `onChange` | 4.3.0 |
@@ -318,7 +318,7 @@ Provide linkage between forms. If a sub form with `name` prop update, it will au
 | isFieldTouched | Check if a field has been operated | (name: [NamePath](#namepath)) => boolean |  |
 | isFieldValidating | Check field if is in validating | (name: [NamePath](#namepath)) => boolean |  |
 | resetFields | Reset fields to `initialValues` | (fields?: [NamePath](#namepath)\[]) => void |  |
-| scrollToField | Scroll to field position | (name: [NamePath](#namepath), options: \[[ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)]) => void |  |
+| scrollToField | Scroll to field position | (name: [NamePath](#namepath), options: [ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) \| { focus: boolean }) => void | focus: 5.24.0 |
 | setFields | Set fields status | (fields: [FieldData](#fielddata)\[]) => void |  |
 | setFieldValue | Set fields value(Will directly pass to form store and **reset validation message**. If you do not want to modify passed object, please clone first) | (name: [NamePath](#namepath), value: any) => void | 4.22.0 |
 | setFieldsValue | Set fields value(Will directly pass to form store and **reset validation message**. If you do not want to modify passed object, please clone first). Use `setFieldValue` instead if you want to only config single value in Form.List | (values) => void |  |

components/form/index.zh-CN.md

@@ -81,7 +81,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAA
 | name | 表单名称，会作为表单字段 `id` 前缀使用 | string | - |  |
 | preserve | 当字段被删除时保留字段值。你可以通过 `getFieldsValue(true)` 来获取保留字段值 | boolean | true | 4.4.0 |
 | requiredMark | 必选样式，可以切换为必选或者可选展示样式。此为 Form 配置，Form.Item 无法单独配置 | boolean \| `optional` \| ((label: ReactNode, info: { required: boolean }) => ReactNode) | true | `renderProps`: 5.9.0 |
-| scrollToFirstError | 提交失败自动滚动到第一个错误字段 | boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) \| { focus: boolean } | false |  |
+| scrollToFirstError | 提交失败自动滚动到第一个错误字段 | boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) \| { focus: boolean } | false | focus: 5.24.0 |
 | size | 设置字段组件的尺寸（仅限 antd 组件） | `small` \| `middle` \| `large` | - |  |
 | validateMessages | 验证提示模板，说明[见下](#validatemessages) | [ValidateMessages](https://github.com/ant-design/ant-design/blob/6234509d18bac1ac60fbb3f92a5b2c6a6361295a/components/locale/en_US.ts#L88-L134) | - |  |
 | validateTrigger | 统一设置字段触发验证的时机 | string \| string\[] | `onChange` | 4.3.0 |
@@ -317,7 +317,7 @@ Form.List 渲染表单相关操作函数。
 | isFieldTouched | 检查对应字段是否被用户操作过 | (name: [NamePath](#namepath)) => boolean |  |
 | isFieldValidating | 检查对应字段是否正在校验 | (name: [NamePath](#namepath)) => boolean |  |
 | resetFields | 重置一组字段到 `initialValues` | (fields?: [NamePath](#namepath)\[]) => void |  |
-| scrollToField | 滚动到对应字段位置 | (name: [NamePath](#namepath), options: [ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)) => void |  |
+| scrollToField | 滚动到对应字段位置 | (name: [NamePath](#namepath), options: [ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) \| { focus: boolean }) => void | focus: 5.24.0 |
 | setFields | 设置一组字段状态 | (fields: [FieldData](#fielddata)\[]) => void |  |
 | setFieldValue | 设置表单的值（该值将直接传入 form store 中并且**重置错误信息**。如果你不希望传入对象被修改，请克隆后传入） | (name: [NamePath](#namepath), value: any) => void | 4.22.0 |
 | setFieldsValue | 设置表单的值（该值将直接传入 form store 中并且**重置错误信息**。如果你不希望传入对象被修改，请克隆后传入）。如果你只想修改 Form.List 中单项值，请通过 `setFieldValue` 进行指定 | (values) => void |  |

components/form/interface.ts

@@ -1,8 +1,13 @@
+import type { Options } from 'scroll-into-view-if-needed';
 export type {
   InternalNamePath,
   NamePath,
   Store,
   StoreValue,
 } from '@rc-component/form/lib/interface';
-export type { Options as ScrollOptions } from 'scroll-into-view-if-needed';
+
+export type ScrollFocusOptions = Options & {
+  focus?: boolean;
+};
+export type ScrollOptions = ScrollFocusOptions; // alias
 export type FormLabelAlign = 'left' | 'right';

components/input/index.en-US.md

@@ -135,7 +135,7 @@ Added in `5.16.0`.
 | defaultValue | Default value | string | - |  |
 | disabled | Whether the input is disabled | boolean | false |  |
 | formatter | Format display, blank fields will be filled with ` ` | (value: string) => string | - |  |
-| separator | render the separator after the input box of the specified index | ((index: number) => ReactNode) \| ReactNode | - |  |
+| separator | render the separator after the input box of the specified index | ((index: number) => ReactNode) \| ReactNode | - | 5.24.0 |
 | mask | Custom display, the original value will not be modified | boolean \| string | `false` | `5.17.0` |
 | length | The number of input elements | number | 6 |  |
 | status | Set validation status | 'error' \| 'warning' | - |  |

components/input/index.zh-CN.md

@@ -136,7 +136,7 @@ interface CountConfig {
 | defaultValue | 默认值 | string | - |  |
 | disabled | 是否禁用 | boolean | false |  |
 | formatter | 格式化展示，留空字段会被 ` ` 填充 | (value: string) => string | - |  |
-| separator | 分隔符，在指定索引的输入框后渲染分隔符 | ((index: number) => ReactNode) \| ReactNode | - |  |
+| separator | 分隔符，在指定索引的输入框后渲染分隔符 | ((index: number) => ReactNode) \| ReactNode | - | 5.24.0 |
 | mask | 自定义展示，和 `formatter` 的区别是不会修改原始值 | boolean \| string | `false` | `5.17.0` |
 | length | 输入元素数量 | number | 6 |  |
 | status | 设置校验状态 | 'error' \| 'warning' | - |  |

components/progress/Line.tsx

@@ -68,10 +68,10 @@ export const handleGradient = (
   if (Object.keys(rest).length !== 0) {
     const sortedGradients = sortGradient(rest as StringGradients);
     const background = `linear-gradient(${direction}, ${sortedGradients})`;
-    return { background, [LineStrokeColorVar]: background } as React.CSSProperties;
+    return { background, [LineStrokeColorVar]: background };
   }
   const background = `linear-gradient(${direction}, ${from}, ${to})`;
-  return { background, [LineStrokeColorVar]: background } as React.CSSProperties;
+  return { background, [LineStrokeColorVar]: background };
 };
 
 const Line: React.FC<LineProps> = (props) => {
@@ -113,7 +113,7 @@ const Line: React.FC<LineProps> = (props) => {
     borderRadius,
   };
 
-  const percentStyle = {
+  const percentStyle: React.CSSProperties = {
     width: `${validProgress(percent)}%`,
     height,
     borderRadius,

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

@@ -1063,16 +1063,16 @@ exports[`renders components/segmented/demo/icon-only.tsx extend context correctl
 
 exports[`renders components/segmented/demo/shape.tsx extend context correctly 1`] = `
 <div
-  aria-label="segmented control"
+  class="ant-flex ant-flex-align-flex-start ant-flex-gap-small ant-flex-vertical"
-  class="ant-segmented ant-segmented-shape-round"
-  role="radiogroup"
-  tabindex="0"
 >
   <div
-    class="ant-segmented-group"
+    aria-label="segmented control"
+    class="ant-segmented"
+    role="radiogroup"
+    tabindex="0"
   >
-    <label
+    <div
-      class="ant-segmented-item ant-segmented-item-selected"
+      class="ant-segmented-group"
     >
       <input
         checked=""
@@ -1085,28 +1085,99 @@ exports[`renders components/segmented/demo/shape.tsx extend context correctly 1`
         class="ant-segmented-item-label"
         role="radio"
       >
-        <span
+        <input
-          class="ant-segmented-item-icon"
+          class="ant-segmented-item-input"
+          name="test-id"
+          type="radio"
+        />
+        <div
+          aria-selected="false"
+          class="ant-segmented-item-label"
+          title="small"
+        >
+          small
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item ant-segmented-item-selected"
+      >
+        <input
+          checked=""
+          class="ant-segmented-item-input"
+          name="test-id"
+          type="radio"
+        />
+        <div
+          aria-selected="true"
+          class="ant-segmented-item-label"
+          title="middle"
+        >
+          middle
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          name="test-id"
+          type="radio"
+        />
+        <div
+          aria-selected="false"
+          class="ant-segmented-item-label"
+          title="large"
+        >
+          large
+        </div>
+      </label>
+    </div>
+  </div>
+  <div
+    aria-label="segmented control"
+    class="ant-segmented ant-segmented-shape-round"
+    role="radiogroup"
+    tabindex="0"
+  >
+    <div
+      class="ant-segmented-group"
+    >
+      <label
+        class="ant-segmented-item ant-segmented-item-selected"
+      >
+        <input
+          checked=""
+          class="ant-segmented-item-input"
+          name="test-id"
+          type="radio"
+        />
+        <div
+          aria-selected="true"
+          class="ant-segmented-item-label"
         >
           <span
-            aria-label="sun"
+            class="ant-segmented-item-icon"
-            class="anticon anticon-sun"
-            role="img"
           >
-            <svg
+            <span
-              aria-hidden="true"
+              aria-label="sun"
-              data-icon="sun"
+              class="anticon anticon-sun"
-              fill="currentColor"
+              role="img"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
             >
-              <path
+              <svg
-                d="M548 818v126a16 16 0 01-16 16h-40a16 16 0 01-16-16V818c15.85 1.64 27.84 2.46 36 2.46 8.15 0 20.16-.82 36-2.46m205.25-115.66l89.1 89.1a16 16 0 010 22.62l-28.29 28.29a16 16 0 01-22.62 0l-89.1-89.1c12.37-10.04 21.43-17.95 27.2-23.71 5.76-5.77 13.67-14.84 23.71-27.2m-482.5 0c10.04 12.36 17.95 21.43 23.71 27.2 5.77 5.76 14.84 13.67 27.2 23.71l-89.1 89.1a16 16 0 01-22.62 0l-28.29-28.29a16 16 0 010-22.63zM512 278c129.24 0 234 104.77 234 234S641.24 746 512 746 278 641.24 278 512s104.77-234 234-234m0 72c-89.47 0-162 72.53-162 162s72.53 162 162 162 162-72.53 162-162-72.53-162-162-162M206 476c-1.64 15.85-2.46 27.84-2.46 36 0 8.15.82 20.16 2.46 36H80a16 16 0 01-16-16v-40a16 16 0 0116-16zm738 0a16 16 0 0116 16v40a16 16 0 01-16 16H818c1.64-15.85 2.46-27.84 2.46-36 0-8.15-.82-20.16-2.46-36zM814.06 180.65l28.29 28.29a16 16 0 010 22.63l-89.1 89.09c-10.04-12.37-17.95-21.43-23.71-27.2-5.77-5.76-14.84-13.67-27.2-23.71l89.1-89.1a16 16 0 0122.62 0m-581.5 0l89.1 89.1c-12.37 10.04-21.43 17.95-27.2 23.71-5.76 5.77-13.67 14.84-23.71 27.2l-89.1-89.1a16 16 0 010-22.62l28.29-28.29a16 16 0 0122.62 0M532 64a16 16 0 0116 16v126c-15.85-1.64-27.84-2.46-36-2.46-8.15 0-20.16.82-36 2.46V80a16 16 0 0116-16z"
+                aria-hidden="true"
-              />
+                data-icon="sun"
-            </svg>
+                fill="currentColor"
+                fill-rule="evenodd"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M548 818v126a16 16 0 01-16 16h-40a16 16 0 01-16-16V818c15.85 1.64 27.84 2.46 36 2.46 8.15 0 20.16-.82 36-2.46m205.25-115.66l89.1 89.1a16 16 0 010 22.62l-28.29 28.29a16 16 0 01-22.62 0l-89.1-89.1c12.37-10.04 21.43-17.95 27.2-23.71 5.76-5.77 13.67-14.84 23.71-27.2m-482.5 0c10.04 12.36 17.95 21.43 23.71 27.2 5.77 5.76 14.84 13.67 27.2 23.71l-89.1 89.1a16 16 0 01-22.62 0l-28.29-28.29a16 16 0 010-22.63zM512 278c129.24 0 234 104.77 234 234S641.24 746 512 746 278 641.24 278 512s104.77-234 234-234m0 72c-89.47 0-162 72.53-162 162s72.53 162 162 162 162-72.53 162-162-72.53-162-162-162M206 476c-1.64 15.85-2.46 27.84-2.46 36 0 8.15.82 20.16 2.46 36H80a16 16 0 01-16-16v-40a16 16 0 0116-16zm738 0a16 16 0 0116 16v40a16 16 0 01-16 16H818c1.64-15.85 2.46-27.84 2.46-36 0-8.15-.82-20.16-2.46-36zM814.06 180.65l28.29 28.29a16 16 0 010 22.63l-89.1 89.09c-10.04-12.37-17.95-21.43-23.71-27.2-5.77-5.76-14.84-13.67-27.2-23.71l89.1-89.1a16 16 0 0122.62 0m-581.5 0l89.1 89.1c-12.37 10.04-21.43 17.95-27.2 23.71-5.76 5.77-13.67 14.84-23.71 27.2l-89.1-89.1a16 16 0 010-22.62l28.29-28.29a16 16 0 0122.62 0M532 64a16 16 0 0116 16v126c-15.85-1.64-27.84-2.46-36-2.46-8.15 0-20.16.82-36 2.46V80a16 16 0 0116-16z"
+                />
+              </svg>
+            </span>
           </span>
         </span>
       </div>
@@ -1124,32 +1195,42 @@ exports[`renders components/segmented/demo/shape.tsx extend context correctly 1`
         class="ant-segmented-item-label"
         role="radio"
       >
-        <span
+        <input
-          class="ant-segmented-item-icon"
+          class="ant-segmented-item-input"
+          name="test-id"
+          type="radio"
+        />
+        <div
+          aria-selected="false"
+          class="ant-segmented-item-label"
         >
           <span
-            aria-label="moon"
+            class="ant-segmented-item-icon"
-            class="anticon anticon-moon"
-            role="img"
           >
-            <svg
+            <span
-              aria-hidden="true"
+              aria-label="moon"
-              data-icon="moon"
+              class="anticon anticon-moon"
-              fill="currentColor"
+              role="img"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
             >
-              <path
+              <svg
-                d="M489.5 111.66c30.65-1.8 45.98 36.44 22.58 56.33A243.35 243.35 0 00426 354c0 134.76 109.24 244 244 244 72.58 0 139.9-31.83 186.01-86.08 19.87-23.38 58.07-8.1 56.34 22.53C900.4 745.82 725.15 912 512.5 912 291.31 912 112 732.69 112 511.5c0-211.39 164.29-386.02 374.2-399.65l.2-.01zm-81.15 79.75l-4.11 1.36C271.1 237.94 176 364.09 176 511.5 176 697.34 326.66 848 512.5 848c148.28 0 274.94-96.2 319.45-230.41l.63-1.93-.11.07a307.06 307.06 0 01-159.73 46.26L670 662c-170.1 0-308-137.9-308-308 0-58.6 16.48-114.54 46.27-162.47z"
+                aria-hidden="true"
-              />
+                data-icon="moon"
-            </svg>
+                fill="currentColor"
+                fill-rule="evenodd"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M489.5 111.66c30.65-1.8 45.98 36.44 22.58 56.33A243.35 243.35 0 00426 354c0 134.76 109.24 244 244 244 72.58 0 139.9-31.83 186.01-86.08 19.87-23.38 58.07-8.1 56.34 22.53C900.4 745.82 725.15 912 512.5 912 291.31 912 112 732.69 112 511.5c0-211.39 164.29-386.02 374.2-399.65l.2-.01zm-81.15 79.75l-4.11 1.36C271.1 237.94 176 364.09 176 511.5 176 697.34 326.66 848 512.5 848c148.28 0 274.94-96.2 319.45-230.41l.63-1.93-.11.07a307.06 307.06 0 01-159.73 46.26L670 662c-170.1 0-308-137.9-308-308 0-58.6 16.48-114.54 46.27-162.47z"
+                />
+              </svg>
+            </span>
           </span>
-        </span>
+        </div>
-      </div>
+      </label>
-    </label>
+    </div>
   </div>
 </div>
 `;

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

@@ -1045,16 +1045,16 @@ exports[`renders components/segmented/demo/icon-only.tsx correctly 1`] = `
 
 exports[`renders components/segmented/demo/shape.tsx correctly 1`] = `
 <div
-  aria-label="segmented control"
+  class="ant-flex ant-flex-align-flex-start ant-flex-gap-small ant-flex-vertical"
-  class="ant-segmented ant-segmented-shape-round"
-  role="radiogroup"
-  tabindex="0"
 >
   <div
-    class="ant-segmented-group"
+    aria-label="segmented control"
+    class="ant-segmented"
+    role="radiogroup"
+    tabindex="0"
   >
-    <label
+    <div
-      class="ant-segmented-item ant-segmented-item-selected"
+      class="ant-segmented-group"
     >
       <input
         checked=""
@@ -1067,28 +1067,99 @@ exports[`renders components/segmented/demo/shape.tsx correctly 1`] = `
         class="ant-segmented-item-label"
         role="radio"
       >
-        <span
+        <input
-          class="ant-segmented-item-icon"
+          class="ant-segmented-item-input"
+          name="test-id"
+          type="radio"
+        />
+        <div
+          aria-selected="false"
+          class="ant-segmented-item-label"
+          title="small"
+        >
+          small
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item ant-segmented-item-selected"
+      >
+        <input
+          checked=""
+          class="ant-segmented-item-input"
+          name="test-id"
+          type="radio"
+        />
+        <div
+          aria-selected="true"
+          class="ant-segmented-item-label"
+          title="middle"
+        >
+          middle
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          name="test-id"
+          type="radio"
+        />
+        <div
+          aria-selected="false"
+          class="ant-segmented-item-label"
+          title="large"
+        >
+          large
+        </div>
+      </label>
+    </div>
+  </div>
+  <div
+    aria-label="segmented control"
+    class="ant-segmented ant-segmented-shape-round"
+    role="radiogroup"
+    tabindex="0"
+  >
+    <div
+      class="ant-segmented-group"
+    >
+      <label
+        class="ant-segmented-item ant-segmented-item-selected"
+      >
+        <input
+          checked=""
+          class="ant-segmented-item-input"
+          name="test-id"
+          type="radio"
+        />
+        <div
+          aria-selected="true"
+          class="ant-segmented-item-label"
         >
           <span
-            aria-label="sun"
+            class="ant-segmented-item-icon"
-            class="anticon anticon-sun"
-            role="img"
           >
-            <svg
+            <span
-              aria-hidden="true"
+              aria-label="sun"
-              data-icon="sun"
+              class="anticon anticon-sun"
-              fill="currentColor"
+              role="img"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
             >
-              <path
+              <svg
-                d="M548 818v126a16 16 0 01-16 16h-40a16 16 0 01-16-16V818c15.85 1.64 27.84 2.46 36 2.46 8.15 0 20.16-.82 36-2.46m205.25-115.66l89.1 89.1a16 16 0 010 22.62l-28.29 28.29a16 16 0 01-22.62 0l-89.1-89.1c12.37-10.04 21.43-17.95 27.2-23.71 5.76-5.77 13.67-14.84 23.71-27.2m-482.5 0c10.04 12.36 17.95 21.43 23.71 27.2 5.77 5.76 14.84 13.67 27.2 23.71l-89.1 89.1a16 16 0 01-22.62 0l-28.29-28.29a16 16 0 010-22.63zM512 278c129.24 0 234 104.77 234 234S641.24 746 512 746 278 641.24 278 512s104.77-234 234-234m0 72c-89.47 0-162 72.53-162 162s72.53 162 162 162 162-72.53 162-162-72.53-162-162-162M206 476c-1.64 15.85-2.46 27.84-2.46 36 0 8.15.82 20.16 2.46 36H80a16 16 0 01-16-16v-40a16 16 0 0116-16zm738 0a16 16 0 0116 16v40a16 16 0 01-16 16H818c1.64-15.85 2.46-27.84 2.46-36 0-8.15-.82-20.16-2.46-36zM814.06 180.65l28.29 28.29a16 16 0 010 22.63l-89.1 89.09c-10.04-12.37-17.95-21.43-23.71-27.2-5.77-5.76-14.84-13.67-27.2-23.71l89.1-89.1a16 16 0 0122.62 0m-581.5 0l89.1 89.1c-12.37 10.04-21.43 17.95-27.2 23.71-5.76 5.77-13.67 14.84-23.71 27.2l-89.1-89.1a16 16 0 010-22.62l28.29-28.29a16 16 0 0122.62 0M532 64a16 16 0 0116 16v126c-15.85-1.64-27.84-2.46-36-2.46-8.15 0-20.16.82-36 2.46V80a16 16 0 0116-16z"
+                aria-hidden="true"
-              />
+                data-icon="sun"
-            </svg>
+                fill="currentColor"
+                fill-rule="evenodd"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M548 818v126a16 16 0 01-16 16h-40a16 16 0 01-16-16V818c15.85 1.64 27.84 2.46 36 2.46 8.15 0 20.16-.82 36-2.46m205.25-115.66l89.1 89.1a16 16 0 010 22.62l-28.29 28.29a16 16 0 01-22.62 0l-89.1-89.1c12.37-10.04 21.43-17.95 27.2-23.71 5.76-5.77 13.67-14.84 23.71-27.2m-482.5 0c10.04 12.36 17.95 21.43 23.71 27.2 5.77 5.76 14.84 13.67 27.2 23.71l-89.1 89.1a16 16 0 01-22.62 0l-28.29-28.29a16 16 0 010-22.63zM512 278c129.24 0 234 104.77 234 234S641.24 746 512 746 278 641.24 278 512s104.77-234 234-234m0 72c-89.47 0-162 72.53-162 162s72.53 162 162 162 162-72.53 162-162-72.53-162-162-162M206 476c-1.64 15.85-2.46 27.84-2.46 36 0 8.15.82 20.16 2.46 36H80a16 16 0 01-16-16v-40a16 16 0 0116-16zm738 0a16 16 0 0116 16v40a16 16 0 01-16 16H818c1.64-15.85 2.46-27.84 2.46-36 0-8.15-.82-20.16-2.46-36zM814.06 180.65l28.29 28.29a16 16 0 010 22.63l-89.1 89.09c-10.04-12.37-17.95-21.43-23.71-27.2-5.77-5.76-14.84-13.67-27.2-23.71l89.1-89.1a16 16 0 0122.62 0m-581.5 0l89.1 89.1c-12.37 10.04-21.43 17.95-27.2 23.71-5.76 5.77-13.67 14.84-23.71 27.2l-89.1-89.1a16 16 0 010-22.62l28.29-28.29a16 16 0 0122.62 0M532 64a16 16 0 0116 16v126c-15.85-1.64-27.84-2.46-36-2.46-8.15 0-20.16.82-36 2.46V80a16 16 0 0116-16z"
+                />
+              </svg>
+            </span>
           </span>
         </span>
       </div>
@@ -1106,32 +1177,42 @@ exports[`renders components/segmented/demo/shape.tsx correctly 1`] = `
         class="ant-segmented-item-label"
         role="radio"
       >
-        <span
+        <input
-          class="ant-segmented-item-icon"
+          class="ant-segmented-item-input"
+          name="test-id"
+          type="radio"
+        />
+        <div
+          aria-selected="false"
+          class="ant-segmented-item-label"
         >
           <span
-            aria-label="moon"
+            class="ant-segmented-item-icon"
-            class="anticon anticon-moon"
-            role="img"
           >
-            <svg
+            <span
-              aria-hidden="true"
+              aria-label="moon"
-              data-icon="moon"
+              class="anticon anticon-moon"
-              fill="currentColor"
+              role="img"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
             >
-              <path
+              <svg
-                d="M489.5 111.66c30.65-1.8 45.98 36.44 22.58 56.33A243.35 243.35 0 00426 354c0 134.76 109.24 244 244 244 72.58 0 139.9-31.83 186.01-86.08 19.87-23.38 58.07-8.1 56.34 22.53C900.4 745.82 725.15 912 512.5 912 291.31 912 112 732.69 112 511.5c0-211.39 164.29-386.02 374.2-399.65l.2-.01zm-81.15 79.75l-4.11 1.36C271.1 237.94 176 364.09 176 511.5 176 697.34 326.66 848 512.5 848c148.28 0 274.94-96.2 319.45-230.41l.63-1.93-.11.07a307.06 307.06 0 01-159.73 46.26L670 662c-170.1 0-308-137.9-308-308 0-58.6 16.48-114.54 46.27-162.47z"
+                aria-hidden="true"
-              />
+                data-icon="moon"
-            </svg>
+                fill="currentColor"
+                fill-rule="evenodd"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M489.5 111.66c30.65-1.8 45.98 36.44 22.58 56.33A243.35 243.35 0 00426 354c0 134.76 109.24 244 244 244 72.58 0 139.9-31.83 186.01-86.08 19.87-23.38 58.07-8.1 56.34 22.53C900.4 745.82 725.15 912 512.5 912 291.31 912 112 732.69 112 511.5c0-211.39 164.29-386.02 374.2-399.65l.2-.01zm-81.15 79.75l-4.11 1.36C271.1 237.94 176 364.09 176 511.5 176 697.34 326.66 848 512.5 848c148.28 0 274.94-96.2 319.45-230.41l.63-1.93-.11.07a307.06 307.06 0 01-159.73 46.26L670 662c-170.1 0-308-137.9-308-308 0-58.6 16.48-114.54 46.27-162.47z"
+                />
+              </svg>
+            </span>
           </span>
-        </span>
+        </div>
-      </div>
+      </label>
-    </label>
+    </div>
   </div>
 </div>
 `;

components/segmented/demo/shape.tsx

@@ -1,15 +1,27 @@
-import React from 'react';
+import React, { useState } from 'react';
-import { Segmented } from 'antd';
 import { MoonOutlined, SunOutlined } from '@ant-design/icons';
+import { Flex, Segmented } from 'antd';
+import type { SizeType } from '../../config-provider/SizeContext';
 
-const Demo: React.FC = () => (
+const Demo: React.FC = () => {
-  <Segmented
+  const [size, setSize] = useState<SizeType>('middle');
-    shape="round"
+  return (
-    options={[
+    <Flex gap="small" align="flex-start" vertical>
-      { value: 'light', icon: <SunOutlined /> },
+      <Segmented
-      { value: 'dark', icon: <MoonOutlined /> },
+        options={['small', 'middle', 'large']}
-    ]}
+        value={size}
-  />
+        onChange={(value) => setSize(value as SizeType)}
-);
+      />
+      <Segmented
+        size={size}
+        shape="round"
+        options={[
+          { value: 'light', icon: <SunOutlined /> },
+          { value: 'dark', icon: <MoonOutlined /> },
+        ]}
+      />
+    </Flex>
+  );
+};
 
 export default Demo;

components/segmented/style/index.ts

@@ -270,7 +270,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
         willChange: 'transform, width',
       },
 
-      '&-shape-round': {
+      [`&${componentCls}-shape-round`]: {
         borderRadius: 9999,
         [`${componentCls}-item, ${componentCls}-thumb`]: {
           borderRadius: 9999,

components/table/__tests__/Table.sorter.test.tsx

@@ -149,11 +149,11 @@ describe('Table.sorter', () => {
 
     expect(renderedNames(container)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
     expect(getNameColumn()?.getAttribute('aria-sort')).toEqual('descending');
-    expect(getNameColumn()?.getAttribute('aria-label')).toEqual(null);
+    expect(getNameColumn()?.getAttribute('aria-label')).toEqual('Name');
 
     fireEvent.click(container.querySelector('.ant-table-column-sorters')!);
     expect(getNameColumn()?.getAttribute('aria-sort')).toEqual('ascending');
-    expect(getNameColumn()?.getAttribute('aria-label')).toEqual(null);
+    expect(getNameColumn()?.getAttribute('aria-label')).toEqual('Name');
 
     fireEvent.click(container.querySelector('.ant-table-column-sorters')!);
     expect(getNameColumn()?.getAttribute('aria-sort')).toEqual(null);

components/table/__tests__/__snapshots__/Table.sorter.test.tsx.snap

@@ -125,6 +125,7 @@ exports[`Table.sorter should support defaultOrder in Column 1`] = `
               >
                 <tr>
                   <th
+                    aria-label="Age"
                     aria-sort="ascending"
                     class="ant-table-cell ant-table-column-sort ant-table-column-has-sorters"
                     scope="col"

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

@@ -15163,6 +15163,7 @@ exports[`renders components/table/demo/head.tsx extend context correctly 1`] = `
                     </div>
                   </th>
                   <th
+                    aria-label="Age"
                     aria-sort="descending"
                     class="ant-table-cell ant-table-column-sort ant-table-column-has-sorters"
                     scope="col"

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

@@ -15391,6 +15391,7 @@ exports[`renders components/table/demo/head.tsx correctly 1`] = `
                     </div>
                   </th>
                   <th
+                    aria-label="Age"
                     aria-sort="descending"
                     class="ant-table-cell ant-table-column-sort ant-table-column-has-sorters"
                     scope="col"

components/table/__tests__/a11y.test.ts

@@ -1,7 +1,7 @@
 import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
 
 accessibilityDemoTest('table', {
-  skip: ['virtual-list.tsx'],
+  skip: ['virtual-list.tsx', 'dynamic-settings.tsx'],
   // waiting for fix
   disabledRules: ['label', 'empty-table-header', 'nested-interactive', 'button-name'],
 });

components/table/hooks/useSorter.tsx

@@ -246,9 +246,8 @@ const injectSorter = <RecordType extends AnyObject = AnyObject>(
           // Inform the screen-reader so it can tell the visually impaired user which column is sorted
           if (sortOrder) {
             cell['aria-sort'] = sortOrder === 'ascend' ? 'ascending' : 'descending';
-          } else {
-            cell['aria-label'] = displayTitle || '';
           }
+          cell['aria-label'] = displayTitle || '';
           cell.className = classNames(cell.className, `${prefixCls}-column-has-sorters`);
           cell.tabIndex = 0;
           if (column.ellipsis) {

components/watermark/useWatermark.ts

@@ -10,9 +10,9 @@ export const BaseSize = 2;
 export const FontGap = 3;
 
 // Prevent external hidden elements from adding accent styles
-const emphasizedStyle = {
+const emphasizedStyle: React.CSSProperties = {
   visibility: 'visible !important',
-};
+} as unknown as React.CSSProperties;
 
 export type AppendWatermark = (
   base64Url: string,
@@ -44,7 +44,7 @@ export default function useWatermark(
           ...markStyle,
           backgroundImage: `url('${base64Url}')`,
           backgroundSize: `${Math.floor(markWidth)}px`,
-          ...(emphasizedStyle as React.CSSProperties),
+          ...emphasizedStyle,
         }),
       );
       // Prevents using the browser `Hide Element` to hide watermarks

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "5.23.4",
+  "version": "5.24.0",
   "description": "An enterprise-class UI design language and React components implementation",
   "license": "MIT",
   "funding": {
@@ -141,7 +141,7 @@
     "rc-motion": "^2.9.5",
     "rc-notification": "~5.6.3",
     "rc-pagination": "~5.1.0",
-    "rc-picker": "~4.11.0",
+    "rc-picker": "~4.11.1",
     "rc-progress": "~4.0.0",
     "rc-rate": "~2.13.1",
     "rc-resize-observer": "^1.4.3",

scripts/generate-component-changelog.ts

@@ -55,6 +55,7 @@ const miscKeys = [
   '🛠',
   '📦',
   '🌐',
+  '⌨️',
   ' locale ',
   ' RTL ',
   '<img',

typings/cssType.d.ts

@@ -0,0 +1,5 @@
+declare namespace React {
+  interface CSSProperties {
+    [key: `--${string | number}`]: string | number | undefined; // 允许 CSS 变量
+  }
+}