diff --git a/.ncurc.js b/.ncurc.js index 5c17725d5d..2589840530 100644 --- a/.ncurc.js +++ b/.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) => { - 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'; - }, + target: () => `semver`, }; diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index c50afbfa2e..8d1a8aa175 100644 --- a/CHANGELOG.en-US.md +++ b/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) -- 🐞 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 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) +- 🐞 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) diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 95762abdb2..09e41b3df2 100644 --- a/CHANGELOG.zh-CN.md +++ b/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` diff --git a/components/_util/wave/WaveEffect.tsx b/components/_util/wave/WaveEffect.tsx index e998fdda9e..efd5257ab0 100644 --- a/components/_util/wave/WaveEffect.tsx +++ b/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) { diff --git a/components/alert/ErrorBoundary.tsx b/components/alert/ErrorBoundary.tsx index c1af004df7..0d9c4d4417 100644 --- a/components/alert/ErrorBoundary.tsx +++ b/components/alert/ErrorBoundary.tsx @@ -50,7 +50,7 @@ class ErrorBoundary extends React.Component{errorDescription} } /> - ); + ) as React.ReactNode; } return children; } diff --git a/components/form/Form.tsx b/components/form/Form.tsx index 0a2ac0f6ff..f8b67e475b 100644 --- a/components/form/Form.tsx +++ b/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 & { - focus?: boolean; -}; +export type { ScrollFocusOptions }; export interface FormProps extends Omit, 'form'> { prefixCls?: string; @@ -181,9 +178,6 @@ const InternalForm: React.ForwardRefRenderFunction = (props, defaultScrollToFirstError = { ...defaultScrollToFirstError, ...options }; } wrapForm.scrollToField(fieldName, defaultScrollToFirstError); - if (defaultScrollToFirstError.focus) { - wrapForm.focusField(fieldName); - } } }; diff --git a/components/form/__tests__/index.test.tsx b/components/form/__tests__/index.test.tsx index 138553d0f7..2787c3afd2 100644 --- a/components/form/__tests__/index.test.tsx +++ b/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 ( +
+ + + +
+ ); + }; + + const { getByRole } = render(); + 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 ( +
+ + - +
+ small +
+ + + + + +
+
+ +
+ +
`; diff --git a/components/segmented/__tests__/__snapshots__/demo.test.ts.snap b/components/segmented/__tests__/__snapshots__/demo.test.ts.snap index 2f7b9bcd46..8569902ae9 100644 --- a/components/segmented/__tests__/__snapshots__/demo.test.ts.snap +++ b/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`] = `
- + + +
+
+
+
+ +
+ +
`; diff --git a/components/segmented/demo/shape.tsx b/components/segmented/demo/shape.tsx index 8cc3334510..d1332779f7 100644 --- a/components/segmented/demo/shape.tsx +++ b/components/segmented/demo/shape.tsx @@ -1,15 +1,27 @@ -import React from 'react'; -import { Segmented } from 'antd'; +import React, { useState } from 'react'; import { MoonOutlined, SunOutlined } from '@ant-design/icons'; +import { Flex, Segmented } from 'antd'; +import type { SizeType } from '../../config-provider/SizeContext'; -const Demo: React.FC = () => ( - }, - { value: 'dark', icon: }, - ]} - /> -); +const Demo: React.FC = () => { + const [size, setSize] = useState('middle'); + return ( + + setSize(value as SizeType)} + /> + }, + { value: 'dark', icon: }, + ]} + /> + + ); +}; export default Demo; diff --git a/components/segmented/style/index.ts b/components/segmented/style/index.ts index 908bc410d9..1b7712a8c6 100644 --- a/components/segmented/style/index.ts +++ b/components/segmented/style/index.ts @@ -270,7 +270,7 @@ const genSegmentedStyle: GenerateStyle = (token: SegmentedToken) willChange: 'transform, width', }, - '&-shape-round': { + [`&${componentCls}-shape-round`]: { borderRadius: 9999, [`${componentCls}-item, ${componentCls}-thumb`]: { borderRadius: 9999, diff --git a/components/table/__tests__/Table.sorter.test.tsx b/components/table/__tests__/Table.sorter.test.tsx index a810bc9d3c..eac14f3c8c 100644 --- a/components/table/__tests__/Table.sorter.test.tsx +++ b/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); diff --git a/components/table/__tests__/__snapshots__/Table.sorter.test.tsx.snap b/components/table/__tests__/__snapshots__/Table.sorter.test.tsx.snap index 5bb63eb0a5..f871f6c81e 100644 --- a/components/table/__tests__/__snapshots__/Table.sorter.test.tsx.snap +++ b/components/table/__tests__/__snapshots__/Table.sorter.test.tsx.snap @@ -125,6 +125,7 @@ exports[`Table.sorter should support defaultOrder in Column 1`] = ` > ( // 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) { diff --git a/components/watermark/useWatermark.ts b/components/watermark/useWatermark.ts index 2ef5a2ae5b..2db840397d 100644 --- a/components/watermark/useWatermark.ts +++ b/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 diff --git a/package.json b/package.json index feeb20d97b..e8d9a533b0 100644 --- a/package.json +++ b/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", diff --git a/scripts/generate-component-changelog.ts b/scripts/generate-component-changelog.ts index e1d615dc06..3402df4a69 100644 --- a/scripts/generate-component-changelog.ts +++ b/scripts/generate-component-changelog.ts @@ -55,6 +55,7 @@ const miscKeys = [ '🛠', '📦', '🌐', + '⌨️', ' locale ', ' RTL ', '