From 61d4a3c18ba2b80687908f9aaa8ac346cb934d33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9D=91=BE=F0=9D=92=96=F0=9D=92=99=F0=9D=92=89?= Date: Tue, 11 Feb 2025 10:20:26 +0800 Subject: [PATCH 01/11] fix(Form.focusField): improve focus logic (#52726) (cherry picked from commit c4de3540e8b36b7a7ed29ac686dcf9fc7d1db1e9) fix(Form.focusField): improve focus logic # Conflicts: # components/form/Form.tsx (cherry picked from commit d1613c3f25179e7ca105e43d328630eb1bfbe9e7) docs: update (cherry picked from commit d4d28b34de05c7ff60159205df640119796e843c) (cherry picked from commit 84e788555c241bdb4a0a044fac8e0541f119b503) chore: update docs (cherry picked from commit ae3444b64eb9d2a25c8eeddb535ccb9d11d7d8a3) test: add unit test (cherry picked from commit 1e794f9d46fc6e45940ebc6b5f8407a8a4d49f7a) chore: update docs: update chore: fix chore: update --- components/form/Form.tsx | 10 +---- components/form/__tests__/index.test.tsx | 57 +++++++++++++++++++++--- components/form/hooks/useForm.ts | 16 +++++-- components/form/index.en-US.md | 4 +- components/form/index.zh-CN.md | 4 +- components/form/interface.ts | 7 ++- 6 files changed, 76 insertions(+), 22 deletions(-) diff --git a/components/form/Form.tsx b/components/form/Form.tsx index b6a87f11a0..5502514bb5 100644 --- a/components/form/Form.tsx +++ b/components/form/Form.tsx @@ -3,7 +3,6 @@ import classNames from 'classnames'; import FieldForm, { List, useWatch } from 'rc-field-form'; import type { FormProps as RcFormProps } from 'rc-field-form/lib/Form'; import type { FormRef, InternalNamePath, ValidateErrorEntity } from 'rc-field-form/lib/interface'; -import type { Options } from 'scroll-into-view-if-needed'; import type { Variant } from '../config-provider'; import { useComponentConfig } from '../config-provider/context'; @@ -19,7 +18,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'; @@ -30,9 +29,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; @@ -184,9 +181,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 3f31d94499..7686ecdbd7 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 dbf3a421d5..057bcae3ef 100644 --- a/components/segmented/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/segmented/__tests__/__snapshots__/demo.test.ts.snap @@ -1003,91 +1003,155 @@ 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, From 5ca55f81cb0f9004fc6b3c3d68d7922e0ba7ce93 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 13 Feb 2025 09:36:31 +0800 Subject: [PATCH 07/11] type: Alert.ErrorBoundary type issue with @type/react@18 (#52766) --- components/alert/ErrorBoundary.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/alert/ErrorBoundary.tsx b/components/alert/ErrorBoundary.tsx index 995f7de8eb..75aa28323f 100644 --- a/components/alert/ErrorBoundary.tsx +++ b/components/alert/ErrorBoundary.tsx @@ -44,7 +44,7 @@ class ErrorBoundary extends React.Component{errorDescription} } /> - ); + ) as React.ReactNode; } return children; } From 09efe6946ea57589d54aef0e13203b920c8e6bd4 Mon Sep 17 00:00:00 2001 From: Mike Ellis <39313898+mellis481@users.noreply.github.com> Date: Wed, 12 Feb 2025 22:12:30 -0500 Subject: [PATCH 08/11] fix: includes aria-label in table header when column is sorted (#52772) * Fixes aria label in table header * Fixes demo snapshot * More snapshot updates * Updates tests --- components/table/__tests__/Table.sorter.test.tsx | 4 ++-- .../table/__tests__/__snapshots__/Table.sorter.test.tsx.snap | 1 + .../table/__tests__/__snapshots__/demo-extend.test.ts.snap | 1 + components/table/__tests__/__snapshots__/demo.test.ts.snap | 1 + components/table/hooks/useSorter.tsx | 3 +-- 5 files changed, 6 insertions(+), 4 deletions(-) diff --git a/components/table/__tests__/Table.sorter.test.tsx b/components/table/__tests__/Table.sorter.test.tsx index 534fefd403..be6ee41f5f 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) { From f6797c49640a9bd33aec002606527eef4252515c Mon Sep 17 00:00:00 2001 From: Amumu Date: Thu, 13 Feb 2025 11:29:06 +0800 Subject: [PATCH 09/11] chore: upgrade deps improve for v5 (#52773) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: upgrade deps improve for v5 * Revert "chore: upgrade deps improve for v5" This reverts commit 057365e222312ea63b173d28c2c1a4f84d94a289. * config: deps default follows semver --------- Co-authored-by: 𝑾𝒖𝒙𝒉 --- .ncurc.js | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) 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`, }; From 069dba8abd8804f7b6e03a6ac8882a9a5bf53d68 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 13 Feb 2025 15:25:21 +0800 Subject: [PATCH 10/11] type: React.CSSProperties shoule support CSS var (#52721) * type: React.CSSProperties shoule support CSS var * fix: fix * fix: fix * fix: fix * fix: fix --- components/_util/wave/WaveEffect.tsx | 4 +--- components/progress/Line.tsx | 6 +++--- components/watermark/useWatermark.ts | 6 +++--- typings/cssType.d.ts | 5 +++++ 4 files changed, 12 insertions(+), 9 deletions(-) create mode 100644 typings/cssType.d.ts diff --git a/components/_util/wave/WaveEffect.tsx b/components/_util/wave/WaveEffect.tsx index c47b575b98..c238adede9 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/progress/Line.tsx b/components/progress/Line.tsx index e37e5c03b3..125703b9d7 100644 --- a/components/progress/Line.tsx +++ b/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 = (props) => { @@ -113,7 +113,7 @@ const Line: React.FC = (props) => { borderRadius, }; - const percentStyle = { + const percentStyle: React.CSSProperties = { width: `${validProgress(percent)}%`, height, borderRadius, 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/typings/cssType.d.ts b/typings/cssType.d.ts new file mode 100644 index 0000000000..f10d9bf3fb --- /dev/null +++ b/typings/cssType.d.ts @@ -0,0 +1,5 @@ +declare namespace React { + interface CSSProperties { + [key: `--${string | number}`]: string | number | undefined; // 允许 CSS 变量 + } +} From a1026bbbf96b82e24afbabdefe41120d330a8964 Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Thu, 13 Feb 2025 16:18:59 +0800 Subject: [PATCH 11/11] test: skip table/dynamic-setting for a11y (#52783) Co-authored-by: Jony J <1844749591@qq.com> --- components/table/__tests__/a11y.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/table/__tests__/a11y.test.ts b/components/table/__tests__/a11y.test.ts index cbc329c761..2819d90539 100644 --- a/components/table/__tests__/a11y.test.ts +++ b/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'], });