mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-23 18:50:06 +08:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

chore: merge branch

Browse Source
This commit is contained in:
afc163 2024-11-07 16:51:58 +08:00
commit 8a64ec6a9e
166 changed files with 36515 additions and 24005 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx
View File

@ -176,12 +176,13 @@ const RefLinks: React.FC<{ refs: string[] }> = ({ refs }) => {
const RenderChangelogList: React.FC<{ changelogList: ChangelogInfo[] }> = ({ changelogList }) => {
const elements: React.ReactNode[] = [];
const { styles } = useStyle();
for (let i = 0; i < changelogList.length; i += 1) {
const len = changelogList.length;
for (let i = 0; i < len; i += 1) {
const { refs, changelog } = changelogList[i];
// Check if the next line is an image link and append it to the current line
if (i + 1 < changelogList.length && changelogList[i + 1].changelog.trim().startsWith('<img')) {
if (i + 1 < len && changelogList[i + 1].changelog.trim().startsWith('<img')) {
const imgDom = new DOMParser().parseFromString(changelogList[i + 1].changelog, 'text/html');
const imgElement = imgDom.querySelector('img');
const imgElement = imgDom.querySelector<HTMLImageElement>('img');
elements.push(
<li key={i}>
<ParseChangelog changelog={changelog} />

2
components/affix/__tests__/Affix.test.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect, useRef } from 'react';
import Affix from '..';
import accessibilityTest from '../../../tests/shared/accessibilityTest';
import { accessibilityTest } from '../../../tests/shared/accessibilityTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { render, triggerResize, waitFakeTimer } from '../../../tests/utils';
import Button from '../../button';

5
components/affix/__tests__/a11y.test.ts Normal file
View File

@ -0,0 +1,5 @@
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
describe('affix demo a11y', () => {
accessibilityDemoTest('affix');
});

5
components/alert/__tests__/a11y.test.ts Normal file
View File

@ -0,0 +1,5 @@
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
describe('alert demo a11y', () => {
accessibilityDemoTest('alert', { disabledRules: ['button-name'] });
});

2
components/alert/__tests__/index.test.tsx
View File

@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event';
import { resetWarned } from 'rc-util/lib/warning';
import Alert from '..';
import accessibilityTest from '../../../tests/shared/accessibilityTest';
import { accessibilityTest } from '../../../tests/shared/accessibilityTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { act, render, screen, waitFakeTimer } from '../../../tests/utils';
import Button from '../../button';

5
components/anchor/__tests__/a11y.test.ts Normal file
View File

@ -0,0 +1,5 @@
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
describe('anchor demo a11y', () => {
accessibilityDemoTest('anchor');
});

5
components/app/__tests__/a11y.test.ts Normal file
View File

@ -0,0 +1,5 @@
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
describe('app demo a11y', () => {
accessibilityDemoTest('app');
});

106
components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -8,6 +8,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -31,6 +34,7 @@ Array [
>
UnClearable
</span>
</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"
@ -53,6 +57,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -76,6 +83,7 @@ Array [
>
Customized clear icon
</span>
</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"
@ -103,6 +111,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -126,6 +137,7 @@ Array [
>
input here
</span>
</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"
@ -148,6 +160,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -171,6 +186,7 @@ Array [
>
control mode
</span>
</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"
@ -197,6 +213,9 @@ exports[`renders components/auto-complete/demo/certain-category.tsx extend conte
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -259,6 +278,7 @@ exports[`renders components/auto-complete/demo/certain-category.tsx extend conte
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up certain-category-search-dropdown ant-select-dropdown-placement-bottomLeft"
@ -569,6 +589,9 @@ exports[`renders components/auto-complete/demo/custom.tsx extend context correct
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -591,6 +614,7 @@ exports[`renders components/auto-complete/demo/custom.tsx extend context correct
<span
class="ant-select-selection-placeholder"
/>
</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"
@ -644,6 +668,9 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -665,6 +692,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
<span
class="ant-select-selection-placeholder"
/>
</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"
@ -714,6 +742,9 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -738,6 +769,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-tree-select-dropdown ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
@ -865,6 +897,9 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -889,6 +924,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-tree-select-dropdown ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
@ -982,6 +1018,9 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1003,6 +1042,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
<span
class="ant-select-selection-placeholder"
/>
</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"
@ -1053,6 +1093,9 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1101,6 +1144,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
<span
class="ant-select-selection-placeholder"
/>
</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"
@ -1154,6 +1198,9 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1178,6 +1225,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-tree-select-dropdown ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
@ -1271,6 +1319,9 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1319,6 +1370,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
<span
class="ant-select-selection-placeholder"
/>
</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"
@ -1373,6 +1425,9 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1397,6 +1452,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-tree-select-dropdown ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
@ -1490,6 +1546,9 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1551,6 +1610,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
<span
class="ant-select-selection-placeholder"
/>
</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"
@ -1605,6 +1665,9 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1629,6 +1692,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-tree-select-dropdown ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
@ -1722,6 +1786,9 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1783,6 +1850,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
<span
class="ant-select-selection-placeholder"
/>
</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"
@ -1850,6 +1918,9 @@ exports[`renders components/auto-complete/demo/non-case-sensitive.tsx extend con
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1873,6 +1944,7 @@ exports[`renders components/auto-complete/demo/non-case-sensitive.tsx extend con
>
try to type \`b\`
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -1974,6 +2046,9 @@ exports[`renders components/auto-complete/demo/options.tsx extend context correc
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1997,6 +2072,7 @@ exports[`renders components/auto-complete/demo/options.tsx extend context correc
>
input here
</span>
</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"
@ -2056,6 +2132,9 @@ exports[`renders components/auto-complete/demo/render-panel.tsx extend context c
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2074,6 +2153,7 @@ exports[`renders components/auto-complete/demo/render-panel.tsx extend context c
value="lucy"
/>
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -2125,7 +2205,7 @@ exports[`renders components/auto-complete/demo/render-panel.tsx extend context c
/>
</div>
<div
aria-selected="false"
aria-selected="true"
class="ant-select-item ant-select-item-option"
title="Lucy"
>
@ -2211,6 +2291,9 @@ exports[`renders components/auto-complete/demo/status.tsx extend context correct
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2232,6 +2315,7 @@ exports[`renders components/auto-complete/demo/status.tsx extend context correct
<span
class="ant-select-selection-placeholder"
/>
</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"
@ -2256,6 +2340,9 @@ exports[`renders components/auto-complete/demo/status.tsx extend context correct
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2277,6 +2364,7 @@ exports[`renders components/auto-complete/demo/status.tsx extend context correct
<span
class="ant-select-selection-placeholder"
/>
</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"
@ -2304,6 +2392,9 @@ exports[`renders components/auto-complete/demo/uncertain-category.tsx extend con
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2366,6 +2457,7 @@ exports[`renders components/auto-complete/demo/uncertain-category.tsx extend con
<span
class="ant-select-selection-placeholder"
/>
</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"
@ -2399,6 +2491,9 @@ exports[`renders components/auto-complete/demo/variant.tsx extend context correc
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2422,6 +2517,7 @@ exports[`renders components/auto-complete/demo/variant.tsx extend context correc
>
Outlined
</span>
</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"
@ -2442,6 +2538,9 @@ exports[`renders components/auto-complete/demo/variant.tsx extend context correc
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2465,6 +2564,7 @@ exports[`renders components/auto-complete/demo/variant.tsx extend context correc
>
Filled
</span>
</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"
@ -2485,6 +2585,9 @@ exports[`renders components/auto-complete/demo/variant.tsx extend context correc
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2508,6 +2611,7 @@ exports[`renders components/auto-complete/demo/variant.tsx extend context correc
>
Borderless
</span>
</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"

104
components/auto-complete/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -8,6 +8,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -30,6 +33,7 @@ Array [
>
UnClearable
</span>
</span>
</div>
</div>,
<br />,
@ -40,6 +44,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -62,6 +69,7 @@ Array [
>
Customized clear icon
</span>
</span>
</div>
</div>,
]
@ -75,6 +83,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -97,6 +108,7 @@ Array [
>
input here
</span>
</span>
</div>
</div>,
<br />,
@ -107,6 +119,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -129,6 +144,7 @@ Array [
>
control mode
</span>
</span>
</div>
</div>,
]
@ -141,6 +157,9 @@ exports[`renders components/auto-complete/demo/certain-category.tsx correctly 1`
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -202,6 +221,7 @@ exports[`renders components/auto-complete/demo/certain-category.tsx correctly 1`
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
</div>
`;
@ -213,6 +233,9 @@ exports[`renders components/auto-complete/demo/custom.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -234,6 +257,7 @@ exports[`renders components/auto-complete/demo/custom.tsx correctly 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
</div>
`;
@ -273,6 +297,9 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -293,6 +320,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
</div>
</div>
@ -330,6 +358,9 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -353,6 +384,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -420,6 +452,9 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -443,6 +478,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -476,6 +512,9 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -496,6 +535,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
</div>
</span>
@ -534,6 +574,9 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -581,6 +624,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
</div>
</div>
@ -622,6 +666,9 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -645,6 +692,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -678,6 +726,9 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -725,6 +776,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
</div>
</span>
@ -767,6 +819,9 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -790,6 +845,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -823,6 +879,9 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -883,6 +942,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
</div>
</span>
@ -925,6 +985,9 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -948,6 +1011,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -981,6 +1045,9 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1041,6 +1108,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
</div>
<button
@ -1090,6 +1158,9 @@ exports[`renders components/auto-complete/demo/non-case-sensitive.tsx correctly
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1112,6 +1183,7 @@ exports[`renders components/auto-complete/demo/non-case-sensitive.tsx correctly
>
try to type \`b\`
</span>
</span>
</div>
</div>
`;
@ -1123,6 +1195,9 @@ exports[`renders components/auto-complete/demo/options.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1145,6 +1220,7 @@ exports[`renders components/auto-complete/demo/options.tsx correctly 1`] = `
>
input here
</span>
</span>
</div>
</div>
`;
@ -1190,6 +1266,9 @@ exports[`renders components/auto-complete/demo/render-panel.tsx correctly 1`] =
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1207,6 +1286,7 @@ exports[`renders components/auto-complete/demo/render-panel.tsx correctly 1`] =
value="lucy"
/>
</span>
</span>
</div>
</div>
</div>
@ -1228,6 +1308,9 @@ exports[`renders components/auto-complete/demo/status.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1248,6 +1331,7 @@ exports[`renders components/auto-complete/demo/status.tsx correctly 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
</div>
</div>
@ -1260,6 +1344,9 @@ exports[`renders components/auto-complete/demo/status.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1280,6 +1367,7 @@ exports[`renders components/auto-complete/demo/status.tsx correctly 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
</div>
</div>
@ -1293,6 +1381,9 @@ exports[`renders components/auto-complete/demo/uncertain-category.tsx correctly
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1354,6 +1445,7 @@ exports[`renders components/auto-complete/demo/uncertain-category.tsx correctly
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
</div>
`;
@ -1369,6 +1461,9 @@ exports[`renders components/auto-complete/demo/variant.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1391,6 +1486,7 @@ exports[`renders components/auto-complete/demo/variant.tsx correctly 1`] = `
>
Outlined
</span>
</span>
</div>
</div>
<div
@ -1399,6 +1495,9 @@ exports[`renders components/auto-complete/demo/variant.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1421,6 +1520,7 @@ exports[`renders components/auto-complete/demo/variant.tsx correctly 1`] = `
>
Filled
</span>
</span>
</div>
</div>
<div
@ -1429,6 +1529,9 @@ exports[`renders components/auto-complete/demo/variant.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1451,6 +1554,7 @@ exports[`renders components/auto-complete/demo/variant.tsx correctly 1`] = `
>
Borderless
</span>
</span>
</div>
</div>
</div>

4
components/auto-complete/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -6,6 +6,9 @@ exports[`AutoComplete rtl render component should be rendered correctly in RTL d
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -27,6 +30,7 @@ exports[`AutoComplete rtl render component should be rendered correctly in RTL d
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
</div>
`;

5
components/avatar/__tests__/a11y.test.ts Normal file
View File

@ -0,0 +1,5 @@
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
describe('avatar demo a11y', () => {
accessibilityDemoTest('avatar', { disabledRules: ['image-alt'] });
});

5
components/back-top/__tests__/a11y.test.ts Normal file
View File

@ -0,0 +1,5 @@
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
describe('back-top demo a11y', () => {
accessibilityDemoTest('back-top');
});

5
components/badge/__tests__/a11y.test.ts Normal file
View File

@ -0,0 +1,5 @@
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
describe('badge demo a11y', () => {
accessibilityDemoTest('badge', { disabledRules: ['button-name'] });
});

2
components/breadcrumb/__tests__/Breadcrumb.test.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import { resetWarned } from '../../_util/warning';
import accessibilityTest from '../../../tests/shared/accessibilityTest';
import { accessibilityTest } from '../../../tests/shared/accessibilityTest';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { render } from '../../../tests/utils';

5
components/breadcrumb/__tests__/a11y.test.ts Normal file
View File

@ -0,0 +1,5 @@
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
describe('breadcrumb demo a11y', () => {
accessibilityDemoTest('breadcrumb');
});

5
components/button/__tests__/a11y.test.ts Normal file
View File

@ -0,0 +1,5 @@
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
describe('button demo a11y', () => {
accessibilityDemoTest('button');
});

56
components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -12,6 +12,9 @@ exports[`renders components/calendar/demo/basic.tsx extend context correctly 1`]
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -39,6 +42,7 @@ exports[`renders components/calendar/demo/basic.tsx extend context correctly 1`]
>
2016
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -458,6 +462,9 @@ exports[`renders components/calendar/demo/basic.tsx extend context correctly 1`]
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -485,6 +492,7 @@ exports[`renders components/calendar/demo/basic.tsx extend context correctly 1`]
>
Nov
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -1597,6 +1605,9 @@ exports[`renders components/calendar/demo/card.tsx extend context correctly 1`]
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1624,6 +1635,7 @@ exports[`renders components/calendar/demo/card.tsx extend context correctly 1`]
>
2016
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -2043,6 +2055,9 @@ exports[`renders components/calendar/demo/card.tsx extend context correctly 1`]
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2070,6 +2085,7 @@ exports[`renders components/calendar/demo/card.tsx extend context correctly 1`]
>
Nov
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -3181,6 +3197,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -3208,6 +3227,7 @@ Array [
>
2016
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -3627,6 +3647,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -3654,6 +3677,7 @@ Array [
>
Nov
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -4759,6 +4783,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -4786,6 +4813,7 @@ Array [
>
2016
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -5205,6 +5233,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -5232,6 +5263,7 @@ Array [
>
Nov
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -6406,6 +6438,9 @@ exports[`renders components/calendar/demo/customize-header.tsx extend context co
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -6433,6 +6468,7 @@ exports[`renders components/calendar/demo/customize-header.tsx extend context co
>
2016
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -6877,6 +6913,9 @@ exports[`renders components/calendar/demo/customize-header.tsx extend context co
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -6904,6 +6943,7 @@ exports[`renders components/calendar/demo/customize-header.tsx extend context co
>
Nov
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -7977,6 +8017,9 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -8004,6 +8047,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor
>
2016
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -8423,6 +8467,9 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -8450,6 +8497,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor
>
Nov
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -9972,6 +10020,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -9999,6 +10050,7 @@ Array [
>
2017
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -10418,6 +10470,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -10445,6 +10500,7 @@ Array [
>
Jan
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"

56
components/calendar/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -12,6 +12,9 @@ exports[`renders components/calendar/demo/basic.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -38,6 +41,7 @@ exports[`renders components/calendar/demo/basic.tsx correctly 1`] = `
>
2016
</span>
</span>
</div>
<span
aria-hidden="true"
@ -71,6 +75,9 @@ exports[`renders components/calendar/demo/basic.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -97,6 +104,7 @@ exports[`renders components/calendar/demo/basic.tsx correctly 1`] = `
>
Nov
</span>
</span>
</div>
<span
aria-hidden="true"
@ -957,6 +965,9 @@ exports[`renders components/calendar/demo/card.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -983,6 +994,7 @@ exports[`renders components/calendar/demo/card.tsx correctly 1`] = `
>
2016
</span>
</span>
</div>
<span
aria-hidden="true"
@ -1016,6 +1028,9 @@ exports[`renders components/calendar/demo/card.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1042,6 +1057,7 @@ exports[`renders components/calendar/demo/card.tsx correctly 1`] = `
>
Nov
</span>
</span>
</div>
<span
aria-hidden="true"
@ -1901,6 +1917,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1927,6 +1946,7 @@ Array [
>
2016
</span>
</span>
</div>
<span
aria-hidden="true"
@ -1960,6 +1980,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1986,6 +2009,7 @@ Array [
>
Nov
</span>
</span>
</div>
<span
aria-hidden="true"
@ -2841,6 +2865,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2867,6 +2894,7 @@ Array [
>
2016
</span>
</span>
</div>
<span
aria-hidden="true"
@ -2900,6 +2928,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2926,6 +2957,7 @@ Array [
>
Nov
</span>
</span>
</div>
<span
aria-hidden="true"
@ -3848,6 +3880,9 @@ exports[`renders components/calendar/demo/customize-header.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -3874,6 +3909,7 @@ exports[`renders components/calendar/demo/customize-header.tsx correctly 1`] = `
>
2016
</span>
</span>
</div>
<span
aria-hidden="true"
@ -3912,6 +3948,9 @@ exports[`renders components/calendar/demo/customize-header.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -3938,6 +3977,7 @@ exports[`renders components/calendar/demo/customize-header.tsx correctly 1`] = `
>
Nov
</span>
</span>
</div>
<span
aria-hidden="true"
@ -4755,6 +4795,9 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -4781,6 +4824,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = `
>
2016
</span>
</span>
</div>
<span
aria-hidden="true"
@ -4814,6 +4858,9 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -4840,6 +4887,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = `
>
Nov
</span>
</span>
</div>
<span
aria-hidden="true"
@ -6110,6 +6158,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -6136,6 +6187,7 @@ Array [
>
2017
</span>
</span>
</div>
<span
aria-hidden="true"
@ -6169,6 +6221,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -6195,6 +6250,7 @@ Array [
>
Jan
</span>
</span>
</div>
<span
aria-hidden="true"

32
components/calendar/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -12,6 +12,9 @@ exports[`Calendar Calendar MonthSelect should display correct label 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -39,6 +42,7 @@ exports[`Calendar Calendar MonthSelect should display correct label 1`] = `
>
2019
</span>
</span>
</div>
<span
aria-hidden="true"
@ -72,6 +76,9 @@ exports[`Calendar Calendar MonthSelect should display correct label 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -99,6 +106,7 @@ exports[`Calendar Calendar MonthSelect should display correct label 1`] = `
>
Jan
</span>
</span>
</div>
<span
aria-hidden="true"
@ -956,6 +964,9 @@ exports[`Calendar Calendar should support locale 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -983,6 +994,7 @@ exports[`Calendar Calendar should support locale 1`] = `
>
2018年
</span>
</span>
</div>
<span
aria-hidden="true"
@ -1016,6 +1028,9 @@ exports[`Calendar Calendar should support locale 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1043,6 +1058,7 @@ exports[`Calendar Calendar should support locale 1`] = `
>
10月
</span>
</span>
</div>
<span
aria-hidden="true"
@ -1900,6 +1916,9 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1927,6 +1946,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
>
2000
</span>
</span>
</div>
<span
aria-hidden="true"
@ -1960,6 +1980,9 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1987,6 +2010,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
>
Sep
</span>
</span>
</div>
<span
aria-hidden="true"
@ -2844,6 +2868,9 @@ exports[`Calendar support Calendar.generateCalendar 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2871,6 +2898,7 @@ exports[`Calendar support Calendar.generateCalendar 1`] = `
>
2000
</span>
</span>
</div>
<span
aria-hidden="true"
@ -2904,6 +2932,9 @@ exports[`Calendar support Calendar.generateCalendar 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2931,6 +2962,7 @@ exports[`Calendar support Calendar.generateCalendar 1`] = `
>
Jan
</span>
</span>
</div>
<span
aria-hidden="true"

6
components/cascader/Panel.tsx
View File

@ -6,6 +6,7 @@ import type { PickType } from 'rc-cascader/lib/Panel';
import type { CascaderProps, DefaultOptionType } from '.';
import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
import DisabledContext from '../config-provider/DisabledContext';
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
import useBase from './hooks/useBase';
import useCheckable from './hooks/useCheckable';
@ -40,8 +41,12 @@ function CascaderPanel<
notFoundContent,
direction,
expandIcon,
disabled: customDisabled,
} = props;
const disabled = React.useContext(DisabledContext);
const mergedDisabled = customDisabled ?? disabled;
const [prefixCls, cascaderPrefixCls, mergedDirection, renderEmpty] = useBase(
customizePrefixCls,
direction,
@ -76,6 +81,7 @@ function CascaderPanel<
direction={mergedDirection}
expandIcon={mergedExpandIcon}
loadingIcon={loadingIcon}
disabled={mergedDisabled}
/>,
);
}

297
components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -6,6 +6,9 @@ exports[`renders components/cascader/demo/basic.tsx extend context correctly 1`]
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -32,6 +35,7 @@ exports[`renders components/cascader/demo/basic.tsx extend context correctly 1`]
>
Please select
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
@ -158,6 +162,9 @@ exports[`renders components/cascader/demo/change-on-select.tsx extend context co
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -182,6 +189,7 @@ exports[`renders components/cascader/demo/change-on-select.tsx extend context co
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
@ -308,6 +316,9 @@ exports[`renders components/cascader/demo/custom-dropdown.tsx extend context cor
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -334,6 +345,7 @@ exports[`renders components/cascader/demo/custom-dropdown.tsx extend context cor
>
Please select
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
@ -473,6 +485,9 @@ exports[`renders components/cascader/demo/custom-render.tsx extend context corre
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -511,6 +526,7 @@ exports[`renders components/cascader/demo/custom-render.tsx extend context corre
)
</span>
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
@ -763,6 +779,9 @@ exports[`renders components/cascader/demo/default-value.tsx extend context corre
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -790,6 +809,7 @@ exports[`renders components/cascader/demo/default-value.tsx extend context corre
>
Zhejiang / Hangzhou / West Lake
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
@ -943,6 +963,9 @@ exports[`renders components/cascader/demo/disabled-option.tsx extend context cor
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -967,6 +990,7 @@ exports[`renders components/cascader/demo/disabled-option.tsx extend context cor
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
@ -1093,6 +1117,9 @@ exports[`renders components/cascader/demo/fields-name.tsx extend context correct
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1119,6 +1146,7 @@ exports[`renders components/cascader/demo/fields-name.tsx extend context correct
>
Please select
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
@ -1245,6 +1273,9 @@ exports[`renders components/cascader/demo/hover.tsx extend context correctly 1`]
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1269,6 +1300,7 @@ exports[`renders components/cascader/demo/hover.tsx extend context correctly 1`]
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
@ -1395,6 +1427,9 @@ exports[`renders components/cascader/demo/lazy.tsx extend context correctly 1`]
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1419,6 +1454,7 @@ exports[`renders components/cascader/demo/lazy.tsx extend context correctly 1`]
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
@ -1546,6 +1582,9 @@ exports[`renders components/cascader/demo/multiple.tsx extend context correctly
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<div
class="ant-select-selection-overflow"
@ -1585,6 +1624,7 @@ exports[`renders components/cascader/demo/multiple.tsx extend context correctly
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
@ -1723,6 +1763,31 @@ exports[`renders components/cascader/demo/panel.tsx extend context correctly 1`]
<div
class="ant-flex ant-flex-align-flex-start ant-flex-gap-small ant-flex-vertical"
>
<button
aria-checked="false"
aria-label="disabled switch"
class="ant-switch"
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
>
<span
class="ant-switch-inner-checked"
>
Enabled
</span>
<span
class="ant-switch-inner-unchecked"
>
Disabled
</span>
</span>
</button>
<div
class="ant-cascader-panel"
>
@ -2054,6 +2119,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2080,6 +2148,7 @@ Array [
>
Please select
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-topLeft"
@ -2211,6 +2280,9 @@ exports[`renders components/cascader/demo/render-panel.tsx extend context correc
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2237,6 +2309,7 @@ exports[`renders components/cascader/demo/render-panel.tsx extend context correc
>
Please select
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
@ -2372,6 +2445,9 @@ exports[`renders components/cascader/demo/search.tsx extend context correctly 1`
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2395,6 +2471,7 @@ exports[`renders components/cascader/demo/search.tsx extend context correctly 1`
>
Please select
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
@ -2523,6 +2600,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<div
class="ant-select-selection-overflow"
@ -2575,6 +2655,7 @@ Array [
</div>
</div>
</div>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
@ -2740,6 +2821,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<div
class="ant-select-selection-overflow"
@ -2792,6 +2876,7 @@ Array [
</div>
</div>
</div>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
@ -2961,6 +3046,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2985,6 +3073,7 @@ Array [
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
@ -3108,6 +3197,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -3132,6 +3224,7 @@ Array [
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
@ -3255,6 +3348,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -3279,6 +3375,7 @@ Array [
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
@ -3414,6 +3511,9 @@ exports[`renders components/cascader/demo/status.tsx extend context correctly 1`
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -3440,6 +3540,7 @@ exports[`renders components/cascader/demo/status.tsx extend context correctly 1`
>
Error
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
@ -3552,6 +3653,9 @@ exports[`renders components/cascader/demo/status.tsx extend context correctly 1`
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<div
class="ant-select-selection-overflow"
@ -3593,6 +3697,7 @@ exports[`renders components/cascader/demo/status.tsx extend context correctly 1`
>
Warning multiple
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
@ -3709,6 +3814,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -3735,6 +3843,7 @@ Array [
>
Please select
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
@ -3858,6 +3967,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -3884,6 +3996,7 @@ Array [
>
Please select
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
@ -3989,6 +4102,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -4015,6 +4131,7 @@ Array [
>
Please select
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
@ -4138,6 +4255,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -4164,6 +4284,7 @@ Array [
>
Please select
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
@ -4244,6 +4365,182 @@ Array [
</span>
</span>
</div>,
<br />,
<br />,
<div
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
>
<div
class="ant-select-prefix"
>
<span
aria-label="smile"
class="anticon anticon-smile"
role="img"
>
<svg
aria-hidden="true"
data-icon="smile"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
/>
</svg>
</span>
</div>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
>
<input
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"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="ant-select-selection-placeholder"
>
Please select
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: auto;"
>
<div>
<div
class="ant-cascader-menus"
>
<ul
class="ant-cascader-menu"
role="menu"
>
<li
aria-checked="false"
class="ant-cascader-menu-item ant-cascader-menu-item-expand"
data-path-key="zhejiang"
role="menuitemcheckbox"
title="Zhejiang"
>
<div
class="ant-cascader-menu-item-content"
>
Zhejiang
</div>
<div
class="ant-cascader-menu-item-expand-icon"
>
<span
aria-label="right"
class="anticon anticon-right"
role="img"
>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
/>
</svg>
</span>
</div>
</li>
<li
aria-checked="false"
class="ant-cascader-menu-item ant-cascader-menu-item-expand"
data-path-key="jiangsu"
role="menuitemcheckbox"
title="Jiangsu"
>
<div
class="ant-cascader-menu-item-content"
>
Jiangsu
</div>
<div
class="ant-cascader-menu-item-expand-icon"
>
<span
aria-label="right"
class="anticon anticon-right"
role="img"
>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
/>
</svg>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<span
aria-hidden="true"
class="ant-select-arrow"
style="user-select: none;"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-select-suffix"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>,
]
`;

208
components/cascader/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -6,6 +6,9 @@ exports[`renders components/cascader/demo/basic.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -31,6 +34,7 @@ exports[`renders components/cascader/demo/basic.tsx correctly 1`] = `
>
Please select
</span>
</span>
</div>
<span
aria-hidden="true"
@ -67,6 +71,9 @@ exports[`renders components/cascader/demo/change-on-select.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -90,6 +97,7 @@ exports[`renders components/cascader/demo/change-on-select.tsx correctly 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -126,6 +134,9 @@ exports[`renders components/cascader/demo/custom-dropdown.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -151,6 +162,7 @@ exports[`renders components/cascader/demo/custom-dropdown.tsx correctly 1`] = `
>
Please select
</span>
</span>
</div>
<span
aria-hidden="true"
@ -188,6 +200,9 @@ exports[`renders components/cascader/demo/custom-render.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -231,6 +246,7 @@ exports[`renders components/cascader/demo/custom-render.tsx correctly 1`] = `
)
</span>
</span>
</span>
</div>
<span
aria-hidden="true"
@ -304,6 +320,9 @@ exports[`renders components/cascader/demo/default-value.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -330,6 +349,7 @@ exports[`renders components/cascader/demo/default-value.tsx correctly 1`] = `
>
Zhejiang / Hangzhou / West Lake
</span>
</span>
</div>
<span
aria-hidden="true"
@ -393,6 +413,9 @@ exports[`renders components/cascader/demo/disabled-option.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -416,6 +439,7 @@ exports[`renders components/cascader/demo/disabled-option.tsx correctly 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -452,6 +476,9 @@ exports[`renders components/cascader/demo/fields-name.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -477,6 +504,7 @@ exports[`renders components/cascader/demo/fields-name.tsx correctly 1`] = `
>
Please select
</span>
</span>
</div>
<span
aria-hidden="true"
@ -513,6 +541,9 @@ exports[`renders components/cascader/demo/hover.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -536,6 +567,7 @@ exports[`renders components/cascader/demo/hover.tsx correctly 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -572,6 +604,9 @@ exports[`renders components/cascader/demo/lazy.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -595,6 +630,7 @@ exports[`renders components/cascader/demo/lazy.tsx correctly 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -632,6 +668,9 @@ exports[`renders components/cascader/demo/multiple.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<div
class="ant-select-selection-overflow"
@ -670,6 +709,7 @@ exports[`renders components/cascader/demo/multiple.tsx correctly 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -704,6 +744,31 @@ exports[`renders components/cascader/demo/panel.tsx correctly 1`] = `
<div
class="ant-flex ant-flex-align-flex-start ant-flex-gap-small ant-flex-vertical"
>
<button
aria-checked="false"
aria-label="disabled switch"
class="ant-switch"
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
>
<span
class="ant-switch-inner-checked"
>
Enabled
</span>
<span
class="ant-switch-inner-unchecked"
>
Disabled
</span>
</span>
</button>
<div
class="ant-cascader-panel"
>
@ -1033,6 +1098,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1058,6 +1126,7 @@ Array [
>
Please select
</span>
</span>
</div>
<span
aria-hidden="true"
@ -1099,6 +1168,9 @@ exports[`renders components/cascader/demo/render-panel.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1124,6 +1196,7 @@ exports[`renders components/cascader/demo/render-panel.tsx correctly 1`] = `
>
Please select
</span>
</span>
</div>
<span
aria-hidden="true"
@ -1161,6 +1234,9 @@ exports[`renders components/cascader/demo/search.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1183,6 +1259,7 @@ exports[`renders components/cascader/demo/search.tsx correctly 1`] = `
>
Please select
</span>
</span>
</div>
<span
aria-hidden="true"
@ -1221,6 +1298,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<div
class="ant-select-selection-overflow"
@ -1272,6 +1352,7 @@ Array [
</div>
</div>
</div>
</span>
</div>
<span
aria-hidden="true"
@ -1335,6 +1416,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<div
class="ant-select-selection-overflow"
@ -1386,6 +1470,7 @@ Array [
</div>
</div>
</div>
</span>
</div>
<span
aria-hidden="true"
@ -1451,6 +1536,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1474,6 +1562,7 @@ Array [
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -1509,6 +1598,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1532,6 +1624,7 @@ Array [
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -1567,6 +1660,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1590,6 +1686,7 @@ Array [
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -1635,6 +1732,9 @@ exports[`renders components/cascader/demo/status.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1660,6 +1760,7 @@ exports[`renders components/cascader/demo/status.tsx correctly 1`] = `
>
Error
</span>
</span>
</div>
<span
aria-hidden="true"
@ -1697,6 +1798,9 @@ exports[`renders components/cascader/demo/status.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<div
class="ant-select-selection-overflow"
@ -1737,6 +1841,7 @@ exports[`renders components/cascader/demo/status.tsx correctly 1`] = `
>
Warning multiple
</span>
</span>
</div>
<span
aria-hidden="true"
@ -1776,6 +1881,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1801,6 +1909,7 @@ Array [
>
Please select
</span>
</span>
</div>
<span
aria-hidden="true"
@ -1836,6 +1945,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1861,6 +1973,7 @@ Array [
>
Please select
</span>
</span>
</div>
<span
aria-hidden="true"
@ -1878,6 +1991,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1903,6 +2019,7 @@ Array [
>
Please select
</span>
</span>
</div>
<span
aria-hidden="true"
@ -1938,6 +2055,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1963,6 +2083,94 @@ Array [
>
Please select
</span>
</span>
</div>
<span
aria-hidden="true"
class="ant-select-arrow"
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-select-suffix"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>,
<br />,
<br />,
<div
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
>
<div
class="ant-select-prefix"
>
<span
aria-label="smile"
class="anticon anticon-smile"
role="img"
>
<svg
aria-hidden="true"
data-icon="smile"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
/>
</svg>
</span>
</div>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
>
<input
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"
readonly=""
role="combobox"
style="opacity:0"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="ant-select-selection-placeholder"
>
Please select
</span>
</span>
</div>
<span
aria-hidden="true"

20
components/cascader/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -870,6 +870,9 @@ exports[`Cascader legacy props should support showCheckedStrategy child 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<div
class="ant-select-selection-overflow"
@ -909,6 +912,7 @@ exports[`Cascader legacy props should support showCheckedStrategy child 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
@ -1047,6 +1051,9 @@ exports[`Cascader legacy props should support showCheckedStrategy parent 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<div
class="ant-select-selection-overflow"
@ -1086,6 +1093,7 @@ exports[`Cascader legacy props should support showCheckedStrategy parent 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
@ -1374,6 +1382,9 @@ exports[`Cascader popup correctly with defaultValue RTL 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1401,6 +1412,7 @@ exports[`Cascader popup correctly with defaultValue RTL 1`] = `
>
Zhejiang / Hangzhou
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-cascader-dropdown-rtl ant-select-dropdown-placement-bottomRight"
@ -1611,6 +1623,9 @@ exports[`Cascader rtl render component should be rendered correctly in RTL direc
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1635,6 +1650,7 @@ exports[`Cascader rtl render component should be rendered correctly in RTL direc
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -1831,6 +1847,9 @@ exports[`Cascader support controlled mode 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1858,6 +1877,7 @@ exports[`Cascader support controlled mode 1`] = `
>
Zhejiang / Hangzhou / West Lake
</span>
</span>
</div>
<span
aria-hidden="true"

21
components/cascader/demo/panel.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import React, { useState } from 'react';
import type { CascaderProps } from 'antd';
import { Cascader, Flex } from 'antd';
import { Cascader, Flex, Switch } from 'antd';
interface Option {
value: string | number;
@ -51,12 +51,23 @@ const onMultipleChange: CascaderProps<Option, 'value', true>['onChange'] = (valu
console.log(value);
};
const App: React.FC = () => (
const App: React.FC = () => {
const [disabled, setDisabled] = useState(false);
return (
<Flex vertical gap="small" align="flex-start">
<Cascader.Panel options={options} onChange={onChange} />
<Cascader.Panel multiple options={options} onChange={onMultipleChange} />
<Switch
checked={disabled}
checkedChildren="Enabled"
unCheckedChildren="Disabled"
onChange={setDisabled}
aria-label="disabled switch"
/>
<Cascader.Panel options={options} onChange={onChange} disabled={disabled} />
<Cascader.Panel multiple options={options} onChange={onMultipleChange} disabled={disabled} />
<Cascader.Panel />
</Flex>
);
};
export default App;

4
components/cascader/demo/suffix.md
View File

@ -1,7 +1,7 @@
## zh-CN
通过 `suffixIcon` 自定义选择框后缀图标，通过 `expandIcon` 自定义次级菜单展开图标。
通过 `prefix` 自定前缀，通过 `suffixIcon` 自定义选择框后缀图标，通过 `expandIcon` 自定义次级菜单展开图标。
## en-US
Use `suffixIcon` to customize the selection box suffix icon, and use `expandIcon` to customize the current item expand icon.
Use `prefix` to customize the prefix content, use `suffixIcon` to customize the selection box suffix icon, and use `expandIcon` to customize the current item expand icon.

8
components/cascader/demo/suffix.tsx
View File

@ -70,6 +70,14 @@ const App: React.FC = () => (
<br />
<br />
<Cascader expandIcon="ab" options={options} onChange={onChange} placeholder="Please select" />
<br />
<br />
<Cascader
prefix={<SmileOutlined />}
options={options}
onChange={onChange}
placeholder="Please select"
/>
</>
);

3
components/cascader/index.en-US.md
View File

@ -31,7 +31,7 @@ demo:
<code src="./demo/search.tsx">Search</code>
<code src="./demo/lazy.tsx">Load Options Lazily</code>
<code src="./demo/fields-name.tsx">Custom Field Names</code>
<code src="./demo/suffix.tsx" debug>Custom Icons</code>
<code src="./demo/suffix.tsx" debug>Prefix and Suffix</code>
<code src="./demo/custom-dropdown.tsx">Custom dropdown</code>
<code src="./demo/placement.tsx">Placement</code>
<code src="./demo/status.tsx">Status</code>
@ -72,6 +72,7 @@ Common props ref：[Common props](/docs/react/common-props)
| options | The data options of cascade | [Option](#option)\[] | - | |
| placeholder | The input placeholder | string | - | |
| placement | Use preset popup align config from builtinPlacements | `bottomLeft` `bottomRight` `topLeft` `topRight` | `bottomLeft` | 4.17.0 |
| prefix | The custom prefix | ReactNode | - | 5.22.0 |
| showSearch | Whether show search input in single mode | boolean \| [Object](#showsearch) | false | |
| size | The input size | `large` \| `middle` \| `small` | - | |
| status | Set validation status | 'error' \| 'warning' | - | 4.19.0 |

3
components/cascader/index.zh-CN.md
View File

@ -32,7 +32,7 @@ demo:
<code src="./demo/search.tsx">搜索</code>
<code src="./demo/lazy.tsx">动态加载选项</code>
<code src="./demo/fields-name.tsx">自定义字段名</code>
<code src="./demo/suffix.tsx" debug>自定义图标</code>
<code src="./demo/suffix.tsx" debug>前后缀</code>
<code src="./demo/custom-dropdown.tsx">扩展菜单</code>
<code src="./demo/placement.tsx">弹出位置</code>
<code src="./demo/status.tsx">自定义状态</code>
@ -73,6 +73,7 @@ demo:
| options | 可选项数据源 | [Option](#option)\[] | - | |
| placeholder | 输入框占位文本 | string | - | |
| placement | 浮层预设位置 | `bottomLeft` `bottomRight` `topLeft` `topRight` | `bottomLeft` | 4.17.0 |
| prefix | 自定义前缀 | ReactNode | - | 5.22.0 |
| showSearch | 在选择框中显示搜索框 | boolean \| [Object](#showsearch) | false | |
| size | 输入框大小 | `large` \| `middle` \| `small` | - | |
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |

26
components/collapse/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -430,12 +430,14 @@ exports[`renders components/collapse/demo/collapsible.tsx extend context correct
class="ant-collapse-item ant-collapse-item-active"
>
<div
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-header ant-collapse-header-collapsible-only"
class="ant-collapse-header ant-collapse-collapsible-header"
>
<div
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-expand-icon"
role="button"
tabindex="0"
>
<span
aria-label="expanded"
@ -459,7 +461,11 @@ exports[`renders components/collapse/demo/collapsible.tsx extend context correct
</span>
</div>
<span
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-header-text"
role="button"
tabindex="0"
>
This panel can only be collapsed by clicking text
</span>
@ -490,12 +496,14 @@ exports[`renders components/collapse/demo/collapsible.tsx extend context correct
class="ant-collapse-item ant-collapse-item-active"
>
<div
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-header ant-collapse-icon-collapsible-only"
class="ant-collapse-header ant-collapse-collapsible-icon"
>
<div
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-expand-icon"
role="button"
tabindex="0"
>
<span
aria-label="expanded"
@ -552,7 +560,7 @@ exports[`renders components/collapse/demo/collapsible.tsx extend context correct
<div
aria-disabled="true"
aria-expanded="false"
class="ant-collapse-header"
class="ant-collapse-header ant-collapse-collapsible-disabled"
role="button"
tabindex="-1"
>
@ -1091,6 +1099,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1118,6 +1129,7 @@ Array [
>
start
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"

26
components/collapse/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -424,12 +424,14 @@ exports[`renders components/collapse/demo/collapsible.tsx correctly 1`] = `
class="ant-collapse-item ant-collapse-item-active"
>
<div
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-header ant-collapse-header-collapsible-only"
class="ant-collapse-header ant-collapse-collapsible-header"
>
<div
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-expand-icon"
role="button"
tabindex="0"
>
<span
aria-label="expanded"
@ -453,7 +455,11 @@ exports[`renders components/collapse/demo/collapsible.tsx correctly 1`] = `
</span>
</div>
<span
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-header-text"
role="button"
tabindex="0"
>
This panel can only be collapsed by clicking text
</span>
@ -484,12 +490,14 @@ exports[`renders components/collapse/demo/collapsible.tsx correctly 1`] = `
class="ant-collapse-item ant-collapse-item-active"
>
<div
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-header ant-collapse-icon-collapsible-only"
class="ant-collapse-header ant-collapse-collapsible-icon"
>
<div
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-expand-icon"
role="button"
tabindex="0"
>
<span
aria-label="expanded"
@ -546,7 +554,7 @@ exports[`renders components/collapse/demo/collapsible.tsx correctly 1`] = `
<div
aria-disabled="true"
aria-expanded="false"
class="ant-collapse-header"
class="ant-collapse-header ant-collapse-collapsible-disabled"
role="button"
tabindex="-1"
>
@ -1079,6 +1087,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1105,6 +1116,7 @@ Array [
>
start
</span>
</span>
</div>
<span
aria-hidden="true"

10
components/collapse/style/index.ts
View File

@ -149,7 +149,15 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
},
},
[`${componentCls}-icon-collapsible-only`]: {
[`${componentCls}-collapsible-header`]: {
cursor: 'default',
[`${componentCls}-header-text`]: {
flex: 'none',
cursor: 'pointer',
},
},
[`${componentCls}-collapsible-icon`]: {
cursor: 'unset',
[`${componentCls}-expand-icon`]: {

104
components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -136,6 +136,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -163,6 +166,7 @@ Array [
>
HEX
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
@ -523,6 +527,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -550,6 +557,7 @@ Array [
>
HEX
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
@ -915,6 +923,9 @@ exports[`renders components/color-picker/demo/controlled.tsx extend context corr
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -942,6 +953,7 @@ exports[`renders components/color-picker/demo/controlled.tsx extend context corr
>
HEX
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
@ -1299,6 +1311,9 @@ exports[`renders components/color-picker/demo/controlled.tsx extend context corr
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1326,6 +1341,7 @@ exports[`renders components/color-picker/demo/controlled.tsx extend context corr
>
HEX
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
@ -1692,6 +1708,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1719,6 +1738,7 @@ Array [
>
HEX
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
@ -2058,6 +2078,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2085,6 +2108,7 @@ Array [
>
HEX
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
@ -2381,6 +2405,9 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2408,6 +2435,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
>
HEX
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
@ -2780,6 +2808,9 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2807,6 +2838,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
>
HSB
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
@ -3397,6 +3429,9 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -3424,6 +3459,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
>
RGB
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
@ -4112,6 +4148,9 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -4139,6 +4178,7 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c
>
HEX
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
@ -4548,6 +4588,9 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -4575,6 +4618,7 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c
>
HEX
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
@ -4962,6 +5006,9 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -4989,6 +5036,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
>
HEX
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
@ -5932,6 +5980,9 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -5959,6 +6010,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
>
HEX
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
@ -6323,6 +6375,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -6350,6 +6405,7 @@ Array [
>
HEX
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
@ -7139,6 +7195,9 @@ exports[`renders components/color-picker/demo/pure-panel.tsx extend context corr
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -7166,6 +7225,7 @@ exports[`renders components/color-picker/demo/pure-panel.tsx extend context corr
>
HEX
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
@ -7538,6 +7598,9 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -7565,6 +7628,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
>
HEX
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
@ -7922,6 +7986,9 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -7949,6 +8016,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
>
HEX
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
@ -8306,6 +8374,9 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -8333,6 +8404,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
>
HEX
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
@ -8703,6 +8775,9 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -8730,6 +8805,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
>
HEX
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
@ -9092,6 +9168,9 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -9119,6 +9198,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
>
HEX
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
@ -9481,6 +9561,9 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -9508,6 +9591,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
>
HEX
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
@ -9888,6 +9972,9 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -9915,6 +10002,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
>
HEX
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
@ -10279,6 +10367,9 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -10306,6 +10397,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
>
HEX
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
@ -10687,6 +10779,9 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -10714,6 +10809,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
>
HEX
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
@ -11072,6 +11168,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -11099,6 +11198,7 @@ Array [
>
HEX
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
@ -11459,6 +11559,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -11486,6 +11589,7 @@ Array [
>
HEX
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"

8
components/color-picker/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -139,6 +139,9 @@ exports[`ColorPicker Should panelRender work 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -166,6 +169,7 @@ exports[`ColorPicker Should panelRender work 1`] = `
>
HEX
</span>
</span>
</div>
<span
aria-hidden="true"
@ -423,6 +427,9 @@ exports[`ColorPicker Should panelRender work 2`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -450,6 +457,7 @@ exports[`ColorPicker Should panelRender work 2`] = `
>
HEX
</span>
</span>
</div>
<span
aria-hidden="true"

4
components/color-picker/__tests__/a11y.test.ts Normal file
View File

@ -0,0 +1,4 @@
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
// skip _InternalPanelDoNotUseOrYouWillBeFired
accessibilityDemoTest('color-picker', { skip: ['pure-panel.tsx'] });

252
components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

36
components/config-provider/__tests__/__snapshots__/popup.test.tsx.snap
View File

@ -7,6 +7,9 @@ exports[`ConfigProvider.Popup disable virtual if dropdownMatchSelectWidth is fal
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -32,6 +35,7 @@ exports[`ConfigProvider.Popup disable virtual if dropdownMatchSelectWidth is fal
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -65,6 +69,9 @@ exports[`ConfigProvider.Popup disable virtual if dropdownMatchSelectWidth is fal
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -89,6 +96,7 @@ exports[`ConfigProvider.Popup disable virtual if dropdownMatchSelectWidth is fal
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -122,6 +130,9 @@ exports[`ConfigProvider.Popup disable virtual if dropdownMatchSelectWidth is fal
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -146,6 +157,7 @@ exports[`ConfigProvider.Popup disable virtual if dropdownMatchSelectWidth is fal
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -184,6 +196,9 @@ exports[`ConfigProvider.Popup disable virtual if is false 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -209,6 +224,7 @@ exports[`ConfigProvider.Popup disable virtual if is false 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -242,6 +258,9 @@ exports[`ConfigProvider.Popup disable virtual if is false 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -266,6 +285,7 @@ exports[`ConfigProvider.Popup disable virtual if is false 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -299,6 +319,9 @@ exports[`ConfigProvider.Popup disable virtual if is false 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -323,6 +346,7 @@ exports[`ConfigProvider.Popup disable virtual if is false 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -361,6 +385,9 @@ exports[`ConfigProvider.Popup disable virtual if popupMatchSelectWidth is false
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -386,6 +413,7 @@ exports[`ConfigProvider.Popup disable virtual if popupMatchSelectWidth is false
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -419,6 +447,9 @@ exports[`ConfigProvider.Popup disable virtual if popupMatchSelectWidth is false
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -443,6 +474,7 @@ exports[`ConfigProvider.Popup disable virtual if popupMatchSelectWidth is false
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -476,6 +508,9 @@ exports[`ConfigProvider.Popup disable virtual if popupMatchSelectWidth is false
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -500,6 +535,7 @@ exports[`ConfigProvider.Popup disable virtual if popupMatchSelectWidth is false
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"

2056
components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

File diff suppressed because it is too large Load Diff

179
components/date-picker/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -6987,6 +6987,181 @@ exports[`renders components/date-picker/demo/suffix.tsx correctly 1`] = `
</div>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-picker ant-picker-outlined"
>
<div
class="ant-picker-prefix"
>
<span
aria-label="smile"
class="anticon anticon-smile"
role="img"
>
<svg
aria-hidden="true"
data-icon="smile"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
/>
</svg>
</span>
</div>
<div
class="ant-picker-input"
>
<input
aria-invalid="false"
autocomplete="off"
placeholder="Select week"
size="12"
value=""
/>
<span
class="ant-picker-suffix"
>
<span
aria-label="calendar"
class="anticon anticon-calendar"
role="img"
>
<svg
aria-hidden="true"
data-icon="calendar"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</span>
</span>
</div>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-picker ant-picker-range ant-picker-outlined"
>
<div
class="ant-picker-prefix"
>
<span
aria-label="smile"
class="anticon anticon-smile"
role="img"
>
<svg
aria-hidden="true"
data-icon="smile"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
/>
</svg>
</span>
</div>
<div
class="ant-picker-input"
>
<input
aria-invalid="false"
autocomplete="off"
date-range="start"
placeholder="Start week"
size="12"
value=""
/>
</div>
<div
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
<span
aria-label="swap-right"
class="anticon anticon-swap-right"
role="img"
>
<svg
aria-hidden="true"
data-icon="swap-right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-picker-input"
>
<input
aria-invalid="false"
autocomplete="off"
date-range="end"
placeholder="End week"
size="12"
value=""
/>
</div>
<div
class="ant-picker-active-bar"
style="position:absolute;width:0"
/>
<span
class="ant-picker-suffix"
>
<span
aria-label="calendar"
class="anticon anticon-calendar"
role="img"
>
<svg
aria-hidden="true"
data-icon="calendar"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</span>
</span>
</div>
</div>
</div>
`;
@ -7002,6 +7177,9 @@ exports[`renders components/date-picker/demo/switchable.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -7028,6 +7206,7 @@ exports[`renders components/date-picker/demo/switchable.tsx correctly 1`] = `
>
Time
</span>
</span>
</div>
<span
aria-hidden="true"

4
components/date-picker/demo/suffix.md
View File

@ -1,7 +1,7 @@
## zh-CN
最简单的用法，在浮层中可以选择或者输入日期。
自定义前缀 `prefix` 和后缀图标 `suffixIcon`。
## en-US
Basic use case. Users can select or input a date in panel.
Custom `prefix` and `suffixIcon`.

2
components/date-picker/demo/suffix.tsx
View File

@ -20,6 +20,8 @@ const App: React.FC = () => (
<DatePicker suffixIcon="ab" onChange={onChange} picker="month" />
<RangePicker suffixIcon="ab" onChange={onChange} />
<DatePicker suffixIcon="ab" onChange={onChange} picker="week" />
<DatePicker prefix={smileIcon} onChange={onChange} picker="week" />
<RangePicker prefix={smileIcon} onChange={onChange} picker="week" />
</Space>
);

3
components/date-picker/index.en-US.md
View File

@ -42,7 +42,7 @@ By clicking the input box, you can select a date from a popup calendar.
<code src="./demo/placement.tsx">Placement</code>
<code src="./demo/mode.tsx" debug>Controlled Panels</code>
<code src="./demo/start-end.tsx" debug>Customized Range Picker</code>
<code src="./demo/suffix.tsx" debug>Suffix</code>
<code src="./demo/suffix.tsx">Prefix and Suffix</code>
<code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
<code src="./demo/component-token.tsx" debug>Component Token</code>
@ -117,6 +117,7 @@ The following APIs are shared by DatePicker, RangePicker.
| placeholder | The placeholder of date input | string \| \[string,string] | - | |
| placement | The position where the selection box pops up | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft | |
| popupStyle | To customize the style of the popup calendar | CSSProperties | {} | |
| prefix | The custom prefix | ReactNode | - | 5.22.0 |
| presets | The preset ranges for quick selection, Since `5.8.0`, preset value supports callback function. | { label: React.ReactNode, value: Dayjs \| (() => Dayjs) }\[] | - | |
| prevIcon | The custom prev icon | ReactNode | - | 4.17.0 |
| size | To determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | `large` \| `middle` \| `small` | - | |

3
components/date-picker/index.zh-CN.md
View File

@ -43,7 +43,7 @@ demo:
<code src="./demo/placement.tsx">弹出位置</code>
<code src="./demo/mode.tsx" debug>受控面板</code>
<code src="./demo/start-end.tsx" debug>自定义日期范围选择</code>
<code src="./demo/suffix.tsx" debug>后缀图标</code>
<code src="./demo/suffix.tsx">前后缀</code>
<code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
<code src="./demo/component-token.tsx" debug>组件 Token</code>
@ -118,6 +118,7 @@ dayjs.locale('zh-cn');
| placeholder | 输入框提示文字 | string \| \[string, string] | - | |
| placement | 选择框弹出的位置 | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft | |
| popupStyle | 额外的弹出日历样式 | CSSProperties | {} | |
| prefix | 自定义前缀 | ReactNode | - | 5.22.0 |
| prevIcon | 自定义上一个图标 | ReactNode | - | 4.17.0 |
| presets | 预设时间范围快捷选择, 自 `5.8.0` 起 value 支持函数返回值 | { label: React.ReactNode, value: Dayjs \| (() => Dayjs) }\[] | - | |
| size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | `large` \| `middle` \| `small` | - | |

4
components/date-picker/style/index.ts
View File

@ -111,6 +111,10 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
borderRadius,
transition: `border ${motionDurationMid}, box-shadow ${motionDurationMid}, background ${motionDurationMid}`,
[`${componentCls}-prefix`]: {
marginInlineEnd: token.inputAffixPadding,
},
// ======================== Input =========================
[`${componentCls}-input`]: {
position: 'relative',

106
components/descriptions/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -141,6 +141,112 @@ exports[`renders components/descriptions/demo/basic.tsx extend context correctly
exports[`renders components/descriptions/demo/basic.tsx extend context correctly 2`] = `[]`;
exports[`renders components/descriptions/demo/block.tsx extend context correctly 1`] = `
<div
class="ant-descriptions ant-descriptions-bordered"
>
<div
class="ant-descriptions-header"
>
<div
class="ant-descriptions-title"
>
User Info
</div>
</div>
<div
class="ant-descriptions-view"
>
<table>
<tbody>
<tr
class="ant-descriptions-row"
>
<th
class="ant-descriptions-item-label"
colspan="1"
>
<span>
UserName
</span>
</th>
<td
class="ant-descriptions-item-content"
colspan="1"
>
<span>
Zhou Maomao
</span>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<th
class="ant-descriptions-item-label"
colspan="1"
>
<span>
Live
</span>
</th>
<td
class="ant-descriptions-item-content"
colspan="1"
>
<span>
Hangzhou, Zhejiang
</span>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<th
class="ant-descriptions-item-label"
colspan="1"
>
<span>
Remark
</span>
</th>
<td
class="ant-descriptions-item-content"
colspan="1"
>
<span>
empty
</span>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<th
class="ant-descriptions-item-label"
colspan="1"
>
<span>
Address
</span>
</th>
<td
class="ant-descriptions-item-content"
colspan="1"
>
<span>
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
`;
exports[`renders components/descriptions/demo/block.tsx extend context correctly 2`] = `[]`;
exports[`renders components/descriptions/demo/border.tsx extend context correctly 1`] = `
<div
class="ant-descriptions ant-descriptions-bordered"

100
components/descriptions/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -127,6 +127,106 @@ exports[`renders components/descriptions/demo/basic.tsx correctly 1`] = `
</div>
`;
exports[`renders components/descriptions/demo/block.tsx correctly 1`] = `
<div
class="ant-descriptions ant-descriptions-bordered"
>
<div
class="ant-descriptions-header"
>
<div
class="ant-descriptions-title"
>
User Info
</div>
</div>
<div
class="ant-descriptions-view"
>
<table>
<tbody>
<tr
class="ant-descriptions-row"
>
<th
class="ant-descriptions-item-label"
colspan="1"
>
<span>
UserName
</span>
</th>
<td
class="ant-descriptions-item-content"
colspan="1"
>
<span>
Zhou Maomao
</span>
</td>
<th
class="ant-descriptions-item-label"
colspan="1"
>
<span>
Live
</span>
</th>
<td
class="ant-descriptions-item-content"
colspan="3"
>
<span>
Hangzhou, Zhejiang
</span>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<th
class="ant-descriptions-item-label"
colspan="1"
>
<span>
Remark
</span>
</th>
<td
class="ant-descriptions-item-content"
colspan="5"
>
<span>
empty
</span>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<th
class="ant-descriptions-item-label"
colspan="1"
>
<span>
Address
</span>
</th>
<td
class="ant-descriptions-item-content"
colspan="5"
>
<span>
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
`;
exports[`renders components/descriptions/demo/border.tsx correctly 1`] = `
<div
class="ant-descriptions ant-descriptions-bordered"

3
components/descriptions/__tests__/a11y.test.ts Normal file
View File

@ -0,0 +1,3 @@
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
accessibilityDemoTest('descriptions');

24
components/descriptions/__tests__/index.test.tsx
View File

@ -78,6 +78,30 @@ describe('Descriptions', () => {
expect(container.querySelectorAll('.ant-descriptions-item')[2]).toHaveAttribute('colSpan', '1');
});
it('span = filled', () => {
const { container } = render(
<Descriptions
column={3}
items={[
{ label: '0', children: '', span: 2 },
{ label: '1', children: '' },
{ label: '2', children: '' },
{ label: '3', children: '', span: 'filled' },
{ label: '4', children: '', span: 'filled' },
{ label: '5', children: '' },
{ label: '6', children: '', span: 1 },
]}
/>,
);
expect(container.querySelectorAll('.ant-descriptions-item')[0]).toHaveAttribute('colSpan', '2');
expect(container.querySelectorAll('.ant-descriptions-item')[1]).toHaveAttribute('colSpan', '1');
expect(container.querySelectorAll('.ant-descriptions-item')[2]).toHaveAttribute('colSpan', '1');
expect(container.querySelectorAll('.ant-descriptions-item')[3]).toHaveAttribute('colSpan', '2');
expect(container.querySelectorAll('.ant-descriptions-item')[4]).toHaveAttribute('colSpan', '3');
expect(container.querySelectorAll('.ant-descriptions-item')[5]).toHaveAttribute('colSpan', '1');
expect(container.querySelectorAll('.ant-descriptions-item')[6]).toHaveAttribute('colSpan', '2');
});
it('column is number', () => {
const wrapper = render(
<Descriptions column={3}>

7
components/descriptions/demo/block.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
整行的展示。
## en-US
Display of the entire line.

29
components/descriptions/demo/block.tsx Normal file
View File

@ -0,0 +1,29 @@
import React from 'react';
import { Descriptions } from 'antd';
import type { DescriptionsProps } from 'antd';
const items: DescriptionsProps['items'] = [
{
label: 'UserName',
children: 'Zhou Maomao',
},
{
label: 'Live',
span: 'filled', // span = 2
children: 'Hangzhou, Zhejiang',
},
{
label: 'Remark',
span: 'filled', // span = 3
children: 'empty',
},
{
label: 'Address',
span: 1, // span will be 3 and warning for span is not align to the end
children: 'No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China',
},
];
const App: React.FC = () => <Descriptions bordered title="User Info" items={items} />;
export default App;

4
components/descriptions/demo/text.md
View File

@ -1,7 +1,7 @@
## zh-CN
带边框和背景颜色列表。
复杂文本的情况。
## en-US
Descriptions with border and background color.
The situation of complex text.

9
components/descriptions/hooks/useItems.ts
View File

@ -23,10 +23,15 @@ export default function useItems(
const responsiveItems = React.useMemo<InternalDescriptionsItemType[]>(
() =>
mergedItems.map(({ span, ...restItem }) => ({
mergedItems.map(({ span, ...restItem }) => {
if (span === 'filled') {
return { ...restItem, filled: true };
}
return {
...restItem,
span: typeof span === 'number' ? span : matchScreen(screens, span),
})),
};
}),
[mergedItems, screens],
);

74
components/descriptions/hooks/useRow.ts
View File

@ -3,65 +3,61 @@ import { useMemo } from 'react';
import type { InternalDescriptionsItemType } from '..';
import { devUseWarning } from '../../_util/warning';
function getFilledItem(
rowItem: InternalDescriptionsItemType,
rowRestCol: number,
span?: number,
): [item: InternalDescriptionsItemType, exceed: boolean] {
let clone = rowItem;
let exceed = false;
if (span === undefined || span > rowRestCol) {
clone = {
...rowItem,
span: rowRestCol,
};
exceed = span !== undefined;
}
return [clone, exceed];
}
// Calculate the sum of span in a row
function getCalcRows(
rowItems: InternalDescriptionsItemType[],
mergedColumn: number,
): [rows: InternalDescriptionsItemType[][], exceed: boolean] {
const rows: InternalDescriptionsItemType[][] = [];
let rows: InternalDescriptionsItemType[][] = [];
let tmpRow: InternalDescriptionsItemType[] = [];
let rowRestCol = mergedColumn;
let exceed = false;
let count = 0;
rowItems
.filter((n) => n)
.forEach((rowItem, index) => {
const span = rowItem?.span;
const mergedSpan = span || 1;
.forEach((rowItem) => {
const { filled, ...restItem } = rowItem;
// Additional handle last one
if (index === rowItems.length - 1) {
const [item, itemExceed] = getFilledItem(rowItem, rowRestCol, span);
exceed = exceed || itemExceed;
tmpRow.push(item);
if (filled) {
tmpRow.push(restItem);
rows.push(tmpRow);
// reset
tmpRow = [];
count = 0;
return;
}
if (mergedSpan < rowRestCol) {
rowRestCol -= mergedSpan;
tmpRow.push(rowItem);
const restSpan = mergedColumn - count;
count += rowItem.span || 1;
if (count >= mergedColumn) {
if (count > mergedColumn) {
exceed = true;
tmpRow.push({ ...restItem, span: restSpan });
} else {
const [item, itemExceed] = getFilledItem(rowItem, rowRestCol, mergedSpan);
exceed = exceed || itemExceed;
tmpRow.push(item);
tmpRow.push(restItem);
}
rows.push(tmpRow);
rowRestCol = mergedColumn;
// reset
tmpRow = [];
count = 0;
} else {
tmpRow.push(restItem);
}
});
if (tmpRow.length > 0) {
rows.push(tmpRow);
}
rows = rows.map((rows) => {
const count = rows.reduce((acc, item) => acc + (item.span || 1), 0);
if (count < mergedColumn) {
// If the span of the last element in the current row is less than the column, then add its span to the remaining columns
const last = rows[rows.length - 1];
last.span = mergedColumn - count + 1;
return rows;
}
return rows;
});
return [rows, exceed];
}

3
components/descriptions/index.en-US.md
View File

@ -71,6 +71,7 @@ const items: DescriptionsProps['items'] = [
<code src="./demo/style.tsx" debug>Customize label & wrapper style</code>
<code src="./demo/jsx.tsx" debug>JSX demo</code>
<code src="./demo/component-token.tsx" debug>Component Token</code>
<code src="./demo/block.tsx">row</code>
## API
@ -98,7 +99,7 @@ Common props ref：[Common props](/docs/react/common-props)
| contentStyle | Customize content style | CSSProperties | - | 4.9.0 |
| label | The description of the content | ReactNode | - | |
| labelStyle | Customize label style | CSSProperties | - | 4.9.0 |
| span | The number of columns included | number \| [Screens](/components/grid#col) | 1 | `screens: 5.9.0` |
| span | The number of columns included(`filled` Fill the remaining part of the current row) | number \| `filled` \| [Screens](/components/grid#col) | 1 | `screens: 5.9.0`, `filled: 5.22.0` |
> The number of span Description.Item. Span={2} takes up the width of two DescriptionItems. When both `style` and `labelStyle`(or `contentStyle`) configured, both of them will work. And next one will overwrite first when conflict.

6
components/descriptions/index.tsx
View File

@ -22,10 +22,12 @@ interface CompoundedComponent {
export interface InternalDescriptionsItemType extends DescriptionsItemProps {
key?: React.Key;
filled?: boolean;
}
export interface DescriptionsItemType extends Omit<InternalDescriptionsItemType, 'span'> {
span?: number | { [key in Breakpoint]?: number };
export interface DescriptionsItemType
extends Omit<InternalDescriptionsItemType, 'span' | 'filled'> {
span?: number | 'filled' | { [key in Breakpoint]?: number };
}
export interface DescriptionsProps {

3
components/descriptions/index.zh-CN.md
View File

@ -72,6 +72,7 @@ const items: DescriptionsProps['items'] = [
<code src="./demo/style.tsx" debug>自定义 label & wrapper 样式</code>
<code src="./demo/jsx.tsx" debug>JSX demo</code>
<code src="./demo/component-token.tsx" debug>组件 Token</code>
<code src="./demo/block.tsx">整行</code>
## API
@ -99,7 +100,7 @@ const items: DescriptionsProps['items'] = [
| contentStyle | 自定义内容样式 | CSSProperties | - | 4.9.0 |
| label | 内容的描述 | ReactNode | - | |
| labelStyle | 自定义标签样式 | CSSProperties | - | 4.9.0 |
| span | 包含列的数量 | number \| [Screens](/components/grid-cn#col) | 1 | `screens: 5.9.0` |
| span | 包含列的数量（`filled` 铺满当前行剩余部分） | number\| `filled` \| [Screens](/components/grid-cn#col) | 1 | `screens: 5.9.0`，`filled: 5.22.0` |
> span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。

3
components/divider/__tests__/a11y.test.ts Normal file
View File

@ -0,0 +1,3 @@
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
accessibilityDemoTest('divider');

12
components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
View File

@ -992,6 +992,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1019,6 +1022,7 @@ Array [
>
Please select an owner
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -1169,6 +1173,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1196,6 +1203,7 @@ Array [
>
Please choose the type
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -1351,6 +1359,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1378,6 +1389,7 @@ Array [
>
Please choose the approver
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"

3
components/drawer/__tests__/a11y.test.ts Normal file
View File

@ -0,0 +1,3 @@
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
accessibilityDemoTest('drawer', { disabledRules: ['image-alt'] });

3
components/dropdown/__tests__/a11y.test.ts Normal file
View File

@ -0,0 +1,3 @@
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
accessibilityDemoTest('dropdown');

12
components/empty/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -130,6 +130,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -154,6 +157,7 @@ Array [
<span
class="ant-select-selection-placeholder"
/>
</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"
@ -239,6 +243,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -263,6 +270,7 @@ Array [
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-tree-select-dropdown ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
@ -347,6 +355,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -368,6 +379,7 @@ Array [
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"

12
components/empty/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -128,6 +128,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -151,6 +154,7 @@ Array [
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -196,6 +200,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -219,6 +226,7 @@ Array [
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -264,6 +272,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -284,6 +295,7 @@ Array [
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"

3
components/empty/__tests__/a11y.test.ts Normal file
View File

@ -0,0 +1,3 @@
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
accessibilityDemoTest('empty', { disabledRules: ['label'] });

3
components/float-button/__tests__/a11y.test.ts Normal file
View File

@ -0,0 +1,3 @@
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
accessibilityDemoTest('float-button', { disabledRules: ['button-name'] });

15
components/form/Form.tsx
View File

@ -31,6 +31,10 @@ export type RequiredMark =
export type FormLayout = 'horizontal' | 'inline' | 'vertical';
export type FormItemLayout = 'horizontal' | 'vertical';
export type ScrollFocusOptions = Options & {
focus?: boolean;
};
export interface FormProps<Values = any> extends Omit<RcFormProps<Values>, 'form'> {
prefixCls?: string;
colon?: boolean;
@ -44,7 +48,7 @@ export interface FormProps<Values = any> extends Omit<RcFormProps<Values>, 'form
feedbackIcons?: FeedbackIcons;
size?: SizeType;
disabled?: boolean;
scrollToFirstError?: Options | boolean;
scrollToFirstError?: ScrollFocusOptions | boolean;
requiredMark?: RequiredMark;
/** @deprecated Will warning in future branch. Pls use `requiredMark` instead. */
hideRequiredMark?: boolean;
@ -166,13 +170,16 @@ const InternalForm: React.ForwardRefRenderFunction<FormRef, FormProps> = (props,
nativeElement: nativeElementRef.current?.nativeElement,
}));
const scrollToField = (options: boolean | Options, fieldName: InternalNamePath) => {
const scrollToField = (options: ScrollFocusOptions | boolean, fieldName: InternalNamePath) => {
if (options) {
let defaultScrollToFirstError: Options = { block: 'nearest' };
let defaultScrollToFirstError: ScrollFocusOptions = { block: 'nearest' };
if (typeof options === 'object') {
defaultScrollToFirstError = options;
defaultScrollToFirstError = { ...defaultScrollToFirstError, ...options };
}
wrapForm.scrollToField(fieldName, defaultScrollToFirstError);
if (defaultScrollToFirstError.focus) {
wrapForm.focusField(fieldName);
}
}
};

114
components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -91,6 +91,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -119,6 +122,7 @@ Array [
>
longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -357,6 +361,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -385,6 +392,7 @@ Array [
>
longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -954,6 +962,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<div
class="ant-select-selection-overflow"
@ -1032,6 +1043,7 @@ Array [
</div>
</div>
</div>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -1384,6 +1396,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<div
class="ant-select-selection-overflow"
@ -1462,6 +1477,7 @@ Array [
</div>
</div>
</div>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -1719,6 +1735,9 @@ exports[`renders components/form/demo/control-hooks.tsx extend context correctly
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1746,6 +1765,7 @@ exports[`renders components/form/demo/control-hooks.tsx extend context correctly
>
Select a option and change input text above
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -2158,6 +2178,9 @@ exports[`renders components/form/demo/customized-form-controls.tsx extend contex
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2185,6 +2208,7 @@ exports[`renders components/form/demo/customized-form-controls.tsx extend contex
>
RMB
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -2548,6 +2572,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2573,6 +2600,7 @@ Array [
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -2691,6 +2719,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2716,6 +2747,7 @@ Array [
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-tree-select-dropdown ant-select-dropdown-placement-bottomLeft"
@ -2874,6 +2906,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2899,6 +2934,7 @@ Array [
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
@ -2914,7 +2950,7 @@ Array [
>
<li
aria-checked="false"
class="ant-cascader-menu-item ant-cascader-menu-item-expand"
class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-disabled"
data-path-key="zhejiang"
role="menuitemcheckbox"
title="Zhejiang"
@ -5390,6 +5426,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -5418,6 +5457,7 @@ Array [
>
HEX
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
@ -10189,6 +10229,9 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -10217,6 +10260,7 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
>
Zhejiang / Hangzhou / West Lake
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
@ -10407,6 +10451,9 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -10434,6 +10481,7 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
>
+86
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -10674,6 +10722,9 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -10698,6 +10749,7 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -10846,6 +10898,9 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -10870,6 +10925,7 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
>
website
</span>
</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"
@ -10972,6 +11028,9 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -10999,6 +11058,7 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
>
select your gender
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -11753,6 +11813,9 @@ exports[`renders components/form/demo/size.tsx extend context correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -11777,6 +11840,7 @@ exports[`renders components/form/demo/size.tsx extend context correctly 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -11895,6 +11959,9 @@ exports[`renders components/form/demo/size.tsx extend context correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -11919,6 +11986,7 @@ exports[`renders components/form/demo/size.tsx extend context correctly 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-tree-select-dropdown ant-select-dropdown-placement-bottomLeft"
@ -12077,6 +12145,9 @@ exports[`renders components/form/demo/size.tsx extend context correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -12101,6 +12172,7 @@ exports[`renders components/form/demo/size.tsx extend context correctly 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
@ -21486,6 +21558,9 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -21513,6 +21588,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
>
Please select a country
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -21658,6 +21734,9 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<div
class="ant-select-selection-overflow"
@ -21700,6 +21779,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
>
Please select favourite colors
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -23152,6 +23232,9 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -23179,6 +23262,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
>
HEX
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
@ -23565,6 +23649,9 @@ exports[`renders components/form/demo/validate-scroll-to-field.tsx extend contex
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -23589,6 +23676,7 @@ exports[`renders components/form/demo/validate-scroll-to-field.tsx extend contex
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -27841,6 +27929,9 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -27867,6 +27958,7 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
>
I'm Select
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -28051,6 +28143,9 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -28077,6 +28172,7 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
>
I'm Cascader
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
@ -28215,6 +28311,9 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -28241,6 +28340,7 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
>
I'm TreeSelect
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-tree-select-dropdown ant-select-dropdown-placement-bottomLeft"
@ -31075,6 +31175,9 @@ exports[`renders components/form/demo/variant.tsx extend context correctly 1`] =
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -31100,6 +31203,7 @@ exports[`renders components/form/demo/variant.tsx extend context correctly 1`] =
<span
class="ant-select-selection-placeholder"
/>
</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"
@ -31226,6 +31330,9 @@ exports[`renders components/form/demo/variant.tsx extend context correctly 1`] =
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -31251,6 +31358,7 @@ exports[`renders components/form/demo/variant.tsx extend context correctly 1`] =
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
@ -31391,6 +31499,9 @@ exports[`renders components/form/demo/variant.tsx extend context correctly 1`] =
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -31416,6 +31527,7 @@ exports[`renders components/form/demo/variant.tsx extend context correctly 1`] =
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-tree-select-dropdown ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"

104
components/form/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -91,6 +91,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -119,6 +122,7 @@ Array [
>
longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
</span>
</span>
</div>
<span
aria-hidden="true"
@ -277,6 +281,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -305,6 +312,7 @@ Array [
>
longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
</span>
</span>
</div>
<span
aria-hidden="true"
@ -790,6 +798,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<div
class="ant-select-selection-overflow"
@ -868,6 +879,7 @@ Array [
</div>
</div>
</div>
</span>
</div>
<span
aria-hidden="true"
@ -1115,6 +1127,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<div
class="ant-select-selection-overflow"
@ -1193,6 +1208,7 @@ Array [
</div>
</div>
</div>
</span>
</div>
<span
aria-hidden="true"
@ -1343,6 +1359,9 @@ exports[`renders components/form/demo/control-hooks.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1370,6 +1389,7 @@ exports[`renders components/form/demo/control-hooks.tsx correctly 1`] = `
>
Select a option and change input text above
</span>
</span>
</div>
<span
aria-hidden="true"
@ -1639,6 +1659,9 @@ exports[`renders components/form/demo/customized-form-controls.tsx correctly 1`]
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1665,6 +1688,7 @@ exports[`renders components/form/demo/customized-form-controls.tsx correctly 1`]
>
RMB
</span>
</span>
</div>
<span
aria-hidden="true"
@ -1946,6 +1970,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1970,6 +1997,7 @@ Array [
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -2033,6 +2061,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2057,6 +2088,7 @@ Array [
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -2120,6 +2152,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2144,6 +2179,7 @@ Array [
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -6486,6 +6522,9 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -6514,6 +6553,7 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
>
Zhejiang / Hangzhou / West Lake
</span>
</span>
</div>
<span
aria-hidden="true"
@ -6616,6 +6656,9 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -6643,6 +6686,7 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
>
+86
</span>
</span>
</div>
<span
aria-hidden="true"
@ -6803,6 +6847,9 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -6827,6 +6874,7 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -6895,6 +6943,9 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -6919,6 +6970,7 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
>
website
</span>
</span>
</div>
</div>
</div>
@ -7009,6 +7061,9 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -7036,6 +7091,7 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
>
select your gender
</span>
</span>
</div>
<span
aria-hidden="true"
@ -7651,6 +7707,9 @@ exports[`renders components/form/demo/size.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -7674,6 +7733,7 @@ exports[`renders components/form/demo/size.tsx correctly 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -7737,6 +7797,9 @@ exports[`renders components/form/demo/size.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -7760,6 +7823,7 @@ exports[`renders components/form/demo/size.tsx correctly 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -7823,6 +7887,9 @@ exports[`renders components/form/demo/size.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -7846,6 +7913,7 @@ exports[`renders components/form/demo/size.tsx correctly 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -9068,6 +9136,9 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -9095,6 +9166,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
>
Please select a country
</span>
</span>
</div>
<span
aria-hidden="true"
@ -9160,6 +9232,9 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<div
class="ant-select-selection-overflow"
@ -9202,6 +9277,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
>
Please select favourite colors
</span>
</span>
</div>
<span
aria-hidden="true"
@ -10599,6 +10675,9 @@ exports[`renders components/form/demo/validate-scroll-to-field.tsx correctly 1`]
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -10623,6 +10702,7 @@ exports[`renders components/form/demo/validate-scroll-to-field.tsx correctly 1`]
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -11506,6 +11586,9 @@ exports[`renders components/form/demo/validate-static.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -11531,6 +11614,7 @@ exports[`renders components/form/demo/validate-static.tsx correctly 1`] = `
>
I'm Select
</span>
</span>
</div>
<span
aria-hidden="true"
@ -11618,6 +11702,9 @@ exports[`renders components/form/demo/validate-static.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -11643,6 +11730,7 @@ exports[`renders components/form/demo/validate-static.tsx correctly 1`] = `
>
I'm Cascader
</span>
</span>
</div>
<span
aria-hidden="true"
@ -11730,6 +11818,9 @@ exports[`renders components/form/demo/validate-static.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -11755,6 +11846,7 @@ exports[`renders components/form/demo/validate-static.tsx correctly 1`] = `
>
I'm TreeSelect
</span>
</span>
</div>
<span
aria-hidden="true"
@ -13294,6 +13386,9 @@ exports[`renders components/form/demo/variant.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -13319,6 +13414,7 @@ exports[`renders components/form/demo/variant.tsx correctly 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -13384,6 +13480,9 @@ exports[`renders components/form/demo/variant.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -13409,6 +13508,7 @@ exports[`renders components/form/demo/variant.tsx correctly 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -13474,6 +13574,9 @@ exports[`renders components/form/demo/variant.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -13499,6 +13602,7 @@ exports[`renders components/form/demo/variant.tsx correctly 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"

12
components/form/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -292,6 +292,9 @@ exports[`Form form should support disabled 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -317,6 +320,7 @@ exports[`Form form should support disabled 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -380,6 +384,9 @@ exports[`Form form should support disabled 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -405,6 +412,7 @@ exports[`Form form should support disabled 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -468,6 +476,9 @@ exports[`Form form should support disabled 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -493,6 +504,7 @@ exports[`Form form should support disabled 1`] = `
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"

32
components/form/__tests__/index.test.tsx
View File

@ -534,6 +534,38 @@ describe('Form', () => {
expect(scrollIntoView).toHaveBeenCalledTimes(3);
});
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}>
<Form.Item name="test" rules={[{ required: true }]}>
<input />
</Form.Item>
<Form.Item>
<Button htmlType="submit">Submit</Button>
</Form.Item>
</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();
});
// https://github.com/ant-design/ant-design/issues/28869
it('should work with Upload', async () => {
const uploadRef = React.createRef<any>();

2
components/form/demo/validate-scroll-to-field.tsx
View File

@ -7,7 +7,7 @@ const App = () => {
return (
<Form
form={form}
scrollToFirstError
scrollToFirstError={{ behavior: 'instant', block: 'end', focus: true }}
style={{ paddingBlock: 32 }}
labelCol={{ span: 6 }}
wrapperCol={{ span: 14 }}

8
components/form/hooks/useForm.ts
View File

@ -9,6 +9,7 @@ import { getFieldId, toArray } from '../util';
export interface FormInstance<Values = any> extends RcFormInstance<Values> {
scrollToField: (name: NamePath, options?: ScrollOptions) => void;
focusField: (name: NamePath) => void;
/** @internal: This is an internal usage. Do not use in your prod */
__INTERNAL__: {
/** No! Do not use this in your code! */
@ -67,6 +68,13 @@ export default function useForm<Values = any>(form?: FormInstance<Values>): [For
} as any);
}
},
focusField: (name: NamePath) => {
const node = getFieldDOMNode(name, wrapForm);
if (node) {
node.focus?.();
}
},
getFieldInstance: (name: NamePath) => {
const namePathStr = toNamePathStr(name);
return itemsRef.current[namePathStr];

2
components/form/index.en-US.md
View File

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

2
components/form/index.zh-CN.md
View File

@ -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) | false | |
| scrollToFirstError | 提交失败自动滚动到第一个错误字段 | boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) \| { focus: boolean } | false | |
| 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 |

3
components/icon/__tests__/a11y.test.ts Normal file
View File

@ -0,0 +1,3 @@
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
accessibilityDemoTest('icon', { disabledRules: ['role-img-alt'] });

3
components/image/__tests__/a11y.test.ts Normal file
View File

@ -0,0 +1,3 @@
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
accessibilityDemoTest('image', { disabledRules: ['image-alt', 'label'] });

158
components/input-number/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -118,6 +118,9 @@ exports[`renders components/input-number/demo/addon.tsx extend context correctly
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -145,6 +148,7 @@ exports[`renders components/input-number/demo/addon.tsx extend context correctly
>
+
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -337,6 +341,9 @@ exports[`renders components/input-number/demo/addon.tsx extend context correctly
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -364,6 +371,7 @@ exports[`renders components/input-number/demo/addon.tsx extend context correctly
>
$
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -637,6 +645,9 @@ exports[`renders components/input-number/demo/addon.tsx extend context correctly
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -663,6 +674,7 @@ exports[`renders components/input-number/demo/addon.tsx extend context correctly
>
cascader
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
@ -2823,6 +2835,152 @@ exports[`renders components/input-number/demo/filled-debug.tsx extend context co
exports[`renders components/input-number/demo/filled-debug.tsx extend context correctly 2`] = `[]`;
exports[`renders components/input-number/demo/focus.tsx extend context correctly 1`] = `
<div
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
style="width: 100%;"
>
<div
class="ant-space-item"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
style="flex-wrap: wrap;"
>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
type="button"
>
<span>
Focus at first
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
type="button"
>
<span>
Focus at last
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
type="button"
>
<span>
Focus to select all
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
type="button"
>
<span>
Focus prevent scroll
</span>
</button>
</div>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-input-number ant-input-number-outlined"
style="width: 100%;"
>
<div
class="ant-input-number-handler-wrap"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
unselectable="on"
>
<span
aria-label="up"
class="anticon anticon-up ant-input-number-handler-up-inner"
role="img"
>
<svg
aria-hidden="true"
data-icon="up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
/>
</svg>
</span>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-input-number-handler-down-inner"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-input-number-input-wrap"
>
<input
aria-valuenow="999"
autocomplete="off"
class="ant-input-number-input"
role="spinbutton"
step="1"
value="999"
/>
</div>
</div>
</div>
</div>
`;
exports[`renders components/input-number/demo/focus.tsx extend context correctly 2`] = `[]`;
exports[`renders components/input-number/demo/formatter.tsx extend context correctly 1`] = `
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"

156
components/input-number/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -118,6 +118,9 @@ exports[`renders components/input-number/demo/addon.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -144,6 +147,7 @@ exports[`renders components/input-number/demo/addon.tsx correctly 1`] = `
>
+
</span>
</span>
</div>
<span
aria-hidden="true"
@ -256,6 +260,9 @@ exports[`renders components/input-number/demo/addon.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -282,6 +289,7 @@ exports[`renders components/input-number/demo/addon.tsx correctly 1`] = `
>
$
</span>
</span>
</div>
<span
aria-hidden="true"
@ -441,6 +449,9 @@ exports[`renders components/input-number/demo/addon.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -466,6 +477,7 @@ exports[`renders components/input-number/demo/addon.tsx correctly 1`] = `
>
cascader
</span>
</span>
</div>
<span
aria-hidden="true"
@ -2537,6 +2549,150 @@ exports[`renders components/input-number/demo/filled-debug.tsx correctly 1`] = `
</div>
`;
exports[`renders components/input-number/demo/focus.tsx correctly 1`] = `
<div
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
style="width:100%"
>
<div
class="ant-space-item"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
style="flex-wrap:wrap"
>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
type="button"
>
<span>
Focus at first
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
type="button"
>
<span>
Focus at last
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
type="button"
>
<span>
Focus to select all
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
type="button"
>
<span>
Focus prevent scroll
</span>
</button>
</div>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-input-number ant-input-number-outlined"
style="width:100%"
>
<div
class="ant-input-number-handler-wrap"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
unselectable="on"
>
<span
aria-label="up"
class="anticon anticon-up ant-input-number-handler-up-inner"
role="img"
>
<svg
aria-hidden="true"
data-icon="up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
/>
</svg>
</span>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-input-number-handler-down-inner"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-input-number-input-wrap"
>
<input
aria-valuenow="999"
autocomplete="off"
class="ant-input-number-input"
role="spinbutton"
step="1"
value="999"
/>
</div>
</div>
</div>
</div>
`;
exports[`renders components/input-number/demo/formatter.tsx correctly 1`] = `
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"

3
components/input-number/__tests__/a11y.test.ts Normal file
View File

@ -0,0 +1,3 @@
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
accessibilityDemoTest('input-number', { disabledRules: ['label'] });

7
components/input-number/demo/focus.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
聚焦额外配置属性。
## en-US
Focus with additional option.

53
components/input-number/demo/focus.tsx Normal file
View File

@ -0,0 +1,53 @@
import React, { useRef } from 'react';
import { Button, InputNumber, Space } from 'antd';
import type { InputNumberRef } from 'rc-input-number';
const App: React.FC = () => {
const inputRef = useRef<InputNumberRef>(null);
return (
<Space direction="vertical" style={{ width: '100%' }}>
<Space wrap>
<Button
onClick={() => {
inputRef.current!.focus({
cursor: 'start',
});
}}
>
Focus at first
</Button>
<Button
onClick={() => {
inputRef.current!.focus({
cursor: 'end',
});
}}
>
Focus at last
</Button>
<Button
onClick={() => {
inputRef.current!.focus({
cursor: 'all',
});
}}
>
Focus to select all
</Button>
<Button
onClick={() => {
inputRef.current!.focus({
preventScroll: true,
});
}}
>
Focus prevent scroll
</Button>
</Space>
<InputNumber style={{ width: '100%' }} defaultValue={999} ref={inputRef} />
</Space>
);
};
export default App;

11
components/input-number/index.en-US.md
View File

@ -29,6 +29,7 @@ When a numeric value needs to be provided.
<code src="./demo/out-of-range.tsx">Out of range</code>
<code src="./demo/presuffix.tsx">Prefix / Suffix</code>
<code src="./demo/status.tsx">Status</code>
<code src="./demo/focus.tsx" version="5.22.0">Focus</code>
<code src="./demo/controls.tsx" debug>Icon</code>
<code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
<code src="./demo/debug-token.tsx" debug>Override Component Style</code>
@ -70,11 +71,11 @@ Common props ref：[Common props](/docs/react/common-props)
## Ref
| Name | Description | Version |
| ------------- | ---------------------- | ------- |
| blur() | Remove focus | |
| focus() | Get focus | |
| nativeElement | The native DOM element | 5.17.3 |
| Name | Description | Type | Version |
| --- | --- | --- | --- |
| blur() | Remove focus | - | |
| focus() | Get focus | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | cursor - 5.22.0 |
| nativeElement | The native DOM element | - | 5.17.3 |
## Design Token

2
components/input-number/index.tsx
View File

@ -10,12 +10,12 @@ import type { InputStatus } from '../_util/statusUtils';
import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
import { devUseWarning } from '../_util/warning';
import ConfigProvider, { ConfigContext } from '../config-provider';
import type { Variant } from '../config-provider';
import DisabledContext from '../config-provider/DisabledContext';
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
import useSize from '../config-provider/hooks/useSize';
import type { SizeType } from '../config-provider/SizeContext';
import { FormItemInputContext } from '../form/context';
import type { Variant } from '../config-provider';
import useVariant from '../form/hooks/useVariants';
import { useCompactItemContext } from '../space/Compact';
import useStyle from './style';

11
components/input-number/index.zh-CN.md
View File

@ -30,6 +30,7 @@ demo:
<code src="./demo/out-of-range.tsx">超出边界</code>
<code src="./demo/presuffix.tsx">前缀/后缀</code>
<code src="./demo/status.tsx">自定义状态</code>
<code src="./demo/focus.tsx" version="5.22.0">聚焦</code>
<code src="./demo/controls.tsx" debug>图标按钮</code>
<code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
<code src="./demo/debug-token.tsx" debug>覆盖组件样式</code>
@ -71,11 +72,11 @@ demo:
## Ref
| 名称 | 描述 | 版本 |
| ------------- | ----------------- | ------ |
| blur() | 移除焦点 | |
| focus() | 获取焦点 | |
| nativeElement | 获取原生 DOM 元素 | 5.17.3 |
| 名称 | 说明 | 参数 | 版本 |
| --- | --- | --- | --- |
| blur() | 移除焦点 | - | |
| focus() | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | cursor - 5.22.0 |
| nativeElement | 获取原生 DOM 元素 | - | 5.17.3 |
## 主题变量（Design Token）

37
components/input/Input.tsx
View File

@ -2,6 +2,7 @@ import React, { forwardRef, useContext, useEffect, useRef } from 'react';
import classNames from 'classnames';
import type { InputRef, InputProps as RcInputProps } from 'rc-input';
import RcInput from 'rc-input';
import { InputFocusOptions, triggerFocus } from 'rc-input/lib/utils/commonUtils';
import { composeRef } from 'rc-util/lib/ref';
import ContextIsolator from '../_util/ContextIsolator';
@ -10,51 +11,21 @@ import type { InputStatus } from '../_util/statusUtils';
import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
import { devUseWarning } from '../_util/warning';
import { ConfigContext } from '../config-provider';
import type { Variant } from '../config-provider';
import DisabledContext from '../config-provider/DisabledContext';
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
import useSize from '../config-provider/hooks/useSize';
import type { SizeType } from '../config-provider/SizeContext';
import { FormItemInputContext } from '../form/context';
import type { Variant } from '../config-provider';
import useVariant from '../form/hooks/useVariants';
import { useCompactItemContext } from '../space/Compact';
import useRemovePasswordTimeout from './hooks/useRemovePasswordTimeout';
import useStyle from './style';
import { hasPrefixSuffix } from './utils';
export interface InputFocusOptions extends FocusOptions {
cursor?: 'start' | 'end' | 'all';
}
export type { InputFocusOptions };
export type { InputRef };
export function triggerFocus(
element?: HTMLInputElement | HTMLTextAreaElement,
option?: InputFocusOptions,
) {
if (!element) {
return;
}
element.focus(option);
// Selection content
const { cursor } = option || {};
if (cursor) {
const len = element.value.length;
switch (cursor) {
case 'start':
element.setSelectionRange(0, 0);
break;
case 'end':
element.setSelectionRange(len, len);
break;
default:
element.setSelectionRange(0, len);
}
}
}
export { triggerFocus };
export interface InputProps
extends Omit<

10
components/input/OTP/index.tsx
View File

@ -24,7 +24,8 @@ export interface OTPRef {
nativeElement: HTMLDivElement;
}
export interface OTPProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
export interface OTPProps
extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onInput'> {
prefixCls?: string;
length?: number;
@ -48,6 +49,8 @@ export interface OTPProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'on
mask?: boolean | string;
type?: React.HTMLInputTypeAttribute;
onInput?: (value: string[]) => void;
}
function strToArr(str: string) {
@ -69,6 +72,7 @@ const OTP = React.forwardRef<OTPRef, OTPProps>((props, ref) => {
autoFocus,
mask,
type,
onInput,
...restProps
} = props;
@ -146,6 +150,10 @@ const OTP = React.forwardRef<OTPRef, OTPProps>((props, ref) => {
const triggerValueCellsChange = useEvent((nextValueCells: string[]) => {
setValueCells(nextValueCells);
if (onInput) {
onInput(nextValueCells);
}
// Trigger if all cells are filled
if (
onChange &&

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

@ -48,6 +48,9 @@ exports[`renders components/input/demo/addon.tsx extend context correctly 1`] =
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -75,6 +78,7 @@ exports[`renders components/input/demo/addon.tsx extend context correctly 1`] =
>
http://
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -197,6 +201,9 @@ exports[`renders components/input/demo/addon.tsx extend context correctly 1`] =
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -224,6 +231,7 @@ exports[`renders components/input/demo/addon.tsx extend context correctly 1`] =
>
.com
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -459,6 +467,9 @@ exports[`renders components/input/demo/addon.tsx extend context correctly 1`] =
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -485,6 +496,7 @@ exports[`renders components/input/demo/addon.tsx extend context correctly 1`] =
>
cascader
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
@ -3062,6 +3074,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -3089,6 +3104,7 @@ Array [
>
Jack
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -3203,6 +3219,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -3228,6 +3247,7 @@ Array [
class="ant-select-selection-item"
title=""
/>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -3342,6 +3362,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -3366,6 +3389,7 @@ Array [
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -3480,6 +3504,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -3504,6 +3531,7 @@ Array [
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-tree-select-dropdown ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
@ -3597,6 +3625,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -3624,6 +3655,7 @@ Array [
>
Zhejiang / Hangzhou / West Lake
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
@ -5250,6 +5282,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -5273,6 +5308,7 @@ Array [
>
input here
</span>
</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"
@ -5868,6 +5904,9 @@ exports[`renders components/input/demo/compact-style.tsx extend context correctl
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -5895,6 +5934,7 @@ exports[`renders components/input/demo/compact-style.tsx extend context correctl
>
Zhejiang
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -6819,6 +6859,9 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -6846,6 +6889,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
>
Zhejiang
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -7135,6 +7179,9 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -7162,6 +7209,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
>
Option1
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -9201,6 +9249,9 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -9228,6 +9279,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
>
Option1-1
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -9341,6 +9393,9 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -9368,6 +9423,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
>
Option2-2
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -9486,6 +9542,9 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -9513,6 +9572,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
>
Between
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -9654,6 +9714,9 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -9681,6 +9744,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
>
Sign Up
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -9795,6 +9859,9 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -9818,6 +9885,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
>
Email
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -9902,6 +9970,9 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -9929,6 +10000,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
>
Home
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -10043,6 +10115,9 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -10069,6 +10144,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
>
Select Address
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"

76
components/input/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -48,6 +48,9 @@ exports[`renders components/input/demo/addon.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -74,6 +77,7 @@ exports[`renders components/input/demo/addon.tsx correctly 1`] = `
>
http://
</span>
</span>
</div>
<span
aria-hidden="true"
@ -116,6 +120,9 @@ exports[`renders components/input/demo/addon.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -142,6 +149,7 @@ exports[`renders components/input/demo/addon.tsx correctly 1`] = `
>
.com
</span>
</span>
</div>
<span
aria-hidden="true"
@ -263,6 +271,9 @@ exports[`renders components/input/demo/addon.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -288,6 +299,7 @@ exports[`renders components/input/demo/addon.tsx correctly 1`] = `
>
cascader
</span>
</span>
</div>
<span
aria-hidden="true"
@ -676,6 +688,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -702,6 +717,7 @@ Array [
>
Jack
</span>
</span>
</div>
<span
aria-hidden="true"
@ -736,6 +752,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -760,6 +779,7 @@ Array [
class="ant-select-selection-item"
title=""
/>
</span>
</div>
<span
aria-hidden="true"
@ -794,6 +814,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -817,6 +840,7 @@ Array [
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -851,6 +875,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -874,6 +901,7 @@ Array [
<span
class="ant-select-selection-placeholder"
/>
</span>
</div>
<span
aria-hidden="true"
@ -907,6 +935,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -933,6 +964,7 @@ Array [
>
Zhejiang / Hangzhou / West Lake
</span>
</span>
</div>
<span
aria-hidden="true"
@ -1158,6 +1190,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1180,6 +1215,7 @@ Array [
>
input here
</span>
</span>
</div>
</div>,
<br />,
@ -1750,6 +1786,9 @@ exports[`renders components/input/demo/compact-style.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1776,6 +1815,7 @@ exports[`renders components/input/demo/compact-style.tsx correctly 1`] = `
>
Zhejiang
</span>
</span>
</div>
<span
aria-hidden="true"
@ -2593,6 +2633,9 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2619,6 +2662,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
>
Zhejiang
</span>
</span>
</div>
<span
aria-hidden="true"
@ -2828,6 +2872,9 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2854,6 +2901,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
>
Option1
</span>
</span>
</div>
<span
aria-hidden="true"
@ -3125,6 +3173,9 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -3151,6 +3202,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
>
Option1-1
</span>
</span>
</div>
<span
aria-hidden="true"
@ -3184,6 +3236,9 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -3210,6 +3265,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
>
Option2-2
</span>
</span>
</div>
<span
aria-hidden="true"
@ -3248,6 +3304,9 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -3274,6 +3333,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
>
Between
</span>
</span>
</div>
<span
aria-hidden="true"
@ -3335,6 +3395,9 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -3361,6 +3424,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
>
Sign Up
</span>
</span>
</div>
<span
aria-hidden="true"
@ -3395,6 +3459,9 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -3417,6 +3484,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
>
Email
</span>
</span>
</div>
</div>
</span>
@ -3430,6 +3498,9 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -3456,6 +3527,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
>
Home
</span>
</span>
</div>
<span
aria-hidden="true"
@ -3490,6 +3562,9 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -3515,6 +3590,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
>
Select Address
</span>
</span>
</div>
<span
aria-hidden="true"

3
components/input/__tests__/a11y.test.ts Normal file
View File

@ -0,0 +1,3 @@
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
accessibilityDemoTest('input', { disabledRules: ['label'] });

19
components/input/__tests__/otp.test.tsx
View File

@ -172,4 +172,23 @@ describe('Input.OTP', () => {
const { container } = render(<OTP type="number" />);
expect(container.querySelector('input')).toHaveAttribute('type', 'number');
});
it('should call onInput with a string array when input changes', () => {
const onInput = jest.fn();
const { container } = render(<OTP length={4} onInput={onInput} />);
const inputs = Array.from(container.querySelectorAll('input'));
fireEvent.input(inputs[0], { target: { value: '1' } });
expect(onInput).toHaveBeenCalledWith(['1']);
fireEvent.input(inputs[2], { target: { value: '3' } });
expect(onInput).toHaveBeenCalledWith(['1', '', '3']);
fireEvent.input(inputs[1], { target: { value: '2' } });
expect(onInput).toHaveBeenCalledWith(['1', '2', '3']);
fireEvent.input(inputs[3], { target: { value: '4' } });
expect(onInput).toHaveBeenCalledWith(['1', '2', '3', '4']);
});
});

5
components/input/demo/otp.tsx
View File

@ -11,8 +11,13 @@ const App: React.FC = () => {
console.log('onChange:', text);
};
const onInput: OTPProps['onInput'] = (value) => {
console.log('onInput:', value);
};
const sharedProps: OTPProps = {
onChange,
onInput,
};
return (

3
components/input/index.en-US.md
View File

@ -141,7 +141,8 @@ Added in `5.16.0`.
| size | The size of the input box | `small` \| `middle` \| `large` | `middle` | |
| variant | Variants of Input | `outlined` \| `borderless` \| `filled` | `outlined` | |
| value | The input content value | string | - | |
| onChange | Trigger when all the fields are filled | function(value: string) | - | |
| onChange | Trigger when all the fields are filled | (value: string) => void | - | |
| onInput | Trigger when the input value changes | (value: string[]) => void | - | `5.22.0` |
#### VisibilityToggle

3
components/input/index.zh-CN.md
View File

@ -142,7 +142,8 @@ interface CountConfig {
| size | 输入框大小 | `small` \| `middle` \| `large` | `middle` | |
| variant | 形态变体 | `outlined` \| `borderless` \| `filled` | `outlined` | |
| value | 输入框内容 | string | - | |
| onChange | 当输入框内容全部填充时触发回调 | function(value: string) | - | |
| onChange | 当输入框内容全部填充时触发回调 | (value: string) => void | - | |
| onInput | 输入值变化时触发的回调 | (value: string[]) => void | - | `5.22.0` |
#### VisibilityToggle

12
components/list/__tests__/__snapshots__/pagination.test.tsx.snap
View File

@ -304,6 +304,9 @@ exports[`List.pagination should change page size work 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -329,6 +332,7 @@ exports[`List.pagination should change page size work 1`] = `
>
10 / page
</span>
</span>
</div>
<span
aria-hidden="true"
@ -449,6 +453,9 @@ exports[`List.pagination should change page size work 2`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -475,6 +482,7 @@ exports[`List.pagination should change page size work 2`] = `
>
50 / page
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-enter ant-slide-up-enter-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -708,6 +716,9 @@ exports[`List.pagination should default work 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -733,6 +744,7 @@ exports[`List.pagination should default work 1`] = `
>
3 / page
</span>
</span>
</div>
<span
aria-hidden="true"

1120
components/locale/__tests__/__snapshots__/index.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

3
components/mentions/__tests__/a11y.test.ts Normal file
View File

@ -0,0 +1,3 @@
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
accessibilityDemoTest('mentions', { disabledRules: ['label'] });

3
components/menu/__tests__/a11y.test.ts Normal file
View File

@ -0,0 +1,3 @@
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
accessibilityDemoTest('menu', { disabledRules: ['button-name'] });

3
components/message/__tests__/a11y.test.ts Normal file
View File

@ -0,0 +1,3 @@
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
accessibilityDemoTest('message');

4
components/modal/__tests__/a11y.test.ts Normal file
View File

@ -0,0 +1,4 @@
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
// skip debug components
accessibilityDemoTest('modal', { skip: ['wireframe.tsx', 'render-panel.tsx'] });

3
components/notification/__tests__/a11y.test.ts Normal file
View File

@ -0,0 +1,3 @@
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
accessibilityDemoTest('notification', { disabledRules: ['button-name', 'label'] });

68
components/pagination/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -564,6 +564,9 @@ exports[`renders components/pagination/demo/all.tsx extend context correctly 1`]
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -589,6 +592,7 @@ exports[`renders components/pagination/demo/all.tsx extend context correctly 1`]
>
10 / page
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -1046,6 +1050,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1071,6 +1078,7 @@ Array [
>
10 / page
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -1384,6 +1392,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1410,6 +1421,7 @@ Array [
>
10 / page
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -1690,6 +1702,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1715,6 +1730,7 @@ Array [
>
10 / page
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -2039,6 +2055,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2065,6 +2084,7 @@ Array [
>
10 / page
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -2468,6 +2488,9 @@ exports[`renders components/pagination/demo/itemRender.tsx extend context correc
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2493,6 +2516,7 @@ exports[`renders components/pagination/demo/itemRender.tsx extend context correc
>
10 / page
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -2811,6 +2835,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2836,6 +2863,7 @@ Array [
>
10 / page
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -3160,6 +3188,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -3186,6 +3217,7 @@ Array [
>
10 / page
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -3591,6 +3623,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -3616,6 +3651,7 @@ Array [
>
10 / page
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -4023,6 +4059,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -4049,6 +4088,7 @@ Array [
>
10 / page
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -4428,6 +4468,9 @@ exports[`renders components/pagination/demo/more.tsx extend context correctly 1`
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -4453,6 +4496,7 @@ exports[`renders components/pagination/demo/more.tsx extend context correctly 1`
>
10 / page
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -4985,6 +5029,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -5010,6 +5057,7 @@ Array [
>
20 / page
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -5279,6 +5327,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -5304,6 +5355,7 @@ Array [
>
20 / page
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -5623,6 +5675,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -5648,6 +5703,7 @@ Array [
>
10 / page
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -5961,6 +6017,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -5987,6 +6046,7 @@ Array [
>
10 / page
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -6300,6 +6360,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -6325,6 +6388,7 @@ Array [
>
10 / page
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
@ -6638,6 +6702,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -6664,6 +6731,7 @@ Array [
>
10 / page
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"

68
components/pagination/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -562,6 +562,9 @@ exports[`renders components/pagination/demo/all.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -586,6 +589,7 @@ exports[`renders components/pagination/demo/all.tsx correctly 1`] = `
>
10 / page
</span>
</span>
</div>
<span
aria-hidden="true"
@ -937,6 +941,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -961,6 +968,7 @@ Array [
>
10 / page
</span>
</span>
</div>
<span
aria-hidden="true"
@ -1172,6 +1180,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1197,6 +1208,7 @@ Array [
>
10 / page
</span>
</span>
</div>
<span
aria-hidden="true"
@ -1373,6 +1385,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1397,6 +1412,7 @@ Array [
>
10 / page
</span>
</span>
</div>
<span
aria-hidden="true"
@ -1619,6 +1635,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1644,6 +1663,7 @@ Array [
>
10 / page
</span>
</span>
</div>
<span
aria-hidden="true"
@ -1941,6 +1961,9 @@ exports[`renders components/pagination/demo/itemRender.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -1965,6 +1988,7 @@ exports[`renders components/pagination/demo/itemRender.tsx correctly 1`] = `
>
10 / page
</span>
</span>
</div>
<span
aria-hidden="true"
@ -2179,6 +2203,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2203,6 +2230,7 @@ Array [
>
10 / page
</span>
</span>
</div>
<span
aria-hidden="true"
@ -2425,6 +2453,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2450,6 +2481,7 @@ Array [
>
10 / page
</span>
</span>
</div>
<span
aria-hidden="true"
@ -2751,6 +2783,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -2775,6 +2810,7 @@ Array [
>
10 / page
</span>
</span>
</div>
<span
aria-hidden="true"
@ -3080,6 +3116,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -3105,6 +3144,7 @@ Array [
>
10 / page
</span>
</span>
</div>
<span
aria-hidden="true"
@ -3380,6 +3420,9 @@ exports[`renders components/pagination/demo/more.tsx correctly 1`] = `
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -3404,6 +3447,7 @@ exports[`renders components/pagination/demo/more.tsx correctly 1`] = `
>
10 / page
</span>
</span>
</div>
<span
aria-hidden="true"
@ -3830,6 +3874,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -3854,6 +3901,7 @@ Array [
>
20 / page
</span>
</span>
</div>
<span
aria-hidden="true"
@ -4021,6 +4069,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -4045,6 +4096,7 @@ Array [
>
20 / page
</span>
</span>
</div>
<span
aria-hidden="true"
@ -4260,6 +4312,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -4284,6 +4339,7 @@ Array [
>
10 / page
</span>
</span>
</div>
<span
aria-hidden="true"
@ -4495,6 +4551,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -4520,6 +4579,7 @@ Array [
>
10 / page
</span>
</span>
</div>
<span
aria-hidden="true"
@ -4731,6 +4791,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -4755,6 +4818,7 @@ Array [
>
10 / page
</span>
</span>
</div>
<span
aria-hidden="true"
@ -4966,6 +5030,9 @@ Array [
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
@ -4991,6 +5058,7 @@ Array [
>
10 / page
</span>
</span>
</div>
<span
aria-hidden="true"

Some files were not shown because too many files have changed in this diff Show More