chore: merge branch

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

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} />

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';

View File

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

View File

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

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';

View File

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

View File

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

View File

@ -8,25 +8,29 @@ exports[`AutoComplete rtl render component should be rendered correctly in RTL d
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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"
role="combobox"
type="search"
value=""
<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"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-placeholder"
/>
</span>
<span
class="ant-select-selection-placeholder"
/>
</div>
</div>
`;

View File

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

View File

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

View File

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

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';

View File

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

View File

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

View File

@ -14,30 +14,34 @@ exports[`renders components/calendar/demo/basic.tsx extend context correctly 1`]
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="2016"
>
2016
<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-item"
title="2016"
>
2016
</span>
</span>
</div>
<div
@ -460,30 +464,34 @@ exports[`renders components/calendar/demo/basic.tsx extend context correctly 1`]
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="Nov"
>
Nov
<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-item"
title="Nov"
>
Nov
</span>
</span>
</div>
<div
@ -1599,30 +1607,34 @@ exports[`renders components/calendar/demo/card.tsx extend context correctly 1`]
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="2016"
>
2016
<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-item"
title="2016"
>
2016
</span>
</span>
</div>
<div
@ -2045,30 +2057,34 @@ exports[`renders components/calendar/demo/card.tsx extend context correctly 1`]
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="Nov"
>
Nov
<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-item"
title="Nov"
>
Nov
</span>
</span>
</div>
<div
@ -3183,30 +3199,34 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="2016"
>
2016
<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-item"
title="2016"
>
2016
</span>
</span>
</div>
<div
@ -3629,30 +3649,34 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="Nov"
>
Nov
<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-item"
title="Nov"
>
Nov
</span>
</span>
</div>
<div
@ -4761,30 +4785,34 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="2016"
>
2016
<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-item"
title="2016"
>
2016
</span>
</span>
</div>
<div
@ -5207,30 +5235,34 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="Nov"
>
Nov
<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-item"
title="Nov"
>
Nov
</span>
</span>
</div>
<div
@ -6408,30 +6440,34 @@ exports[`renders components/calendar/demo/customize-header.tsx extend context co
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="2016"
>
2016
<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-item"
title="2016"
>
2016
</span>
</span>
</div>
<div
@ -6879,30 +6915,34 @@ exports[`renders components/calendar/demo/customize-header.tsx extend context co
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="Nov"
>
Nov
<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-item"
title="Nov"
>
Nov
</span>
</span>
</div>
<div
@ -7979,30 +8019,34 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="2016"
>
2016
<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-item"
title="2016"
>
2016
</span>
</span>
</div>
<div
@ -8425,30 +8469,34 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="Nov"
>
Nov
<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-item"
title="Nov"
>
Nov
</span>
</span>
</div>
<div
@ -9974,30 +10022,34 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="2017"
>
2017
<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-item"
title="2017"
>
2017
</span>
</span>
</div>
<div
@ -10420,30 +10472,34 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="Jan"
>
Jan
<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-item"
title="Jan"
>
Jan
</span>
</span>
</div>
<div

View File

@ -14,29 +14,33 @@ exports[`renders components/calendar/demo/basic.tsx correctly 1`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="2016"
>
2016
<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-item"
title="2016"
>
2016
</span>
</span>
</div>
<span
@ -73,29 +77,33 @@ exports[`renders components/calendar/demo/basic.tsx correctly 1`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="Nov"
>
Nov
<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-item"
title="Nov"
>
Nov
</span>
</span>
</div>
<span
@ -959,29 +967,33 @@ exports[`renders components/calendar/demo/card.tsx correctly 1`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="2016"
>
2016
<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-item"
title="2016"
>
2016
</span>
</span>
</div>
<span
@ -1018,29 +1030,33 @@ exports[`renders components/calendar/demo/card.tsx correctly 1`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="Nov"
>
Nov
<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-item"
title="Nov"
>
Nov
</span>
</span>
</div>
<span
@ -1903,29 +1919,33 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="2016"
>
2016
<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-item"
title="2016"
>
2016
</span>
</span>
</div>
<span
@ -1962,29 +1982,33 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="Nov"
>
Nov
<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-item"
title="Nov"
>
Nov
</span>
</span>
</div>
<span
@ -2843,29 +2867,33 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="2016"
>
2016
<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-item"
title="2016"
>
2016
</span>
</span>
</div>
<span
@ -2902,29 +2930,33 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="Nov"
>
Nov
<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-item"
title="Nov"
>
Nov
</span>
</span>
</div>
<span
@ -3850,29 +3882,33 @@ exports[`renders components/calendar/demo/customize-header.tsx correctly 1`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="2016"
>
2016
<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-item"
title="2016"
>
2016
</span>
</span>
</div>
<span
@ -3914,29 +3950,33 @@ exports[`renders components/calendar/demo/customize-header.tsx correctly 1`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="Nov"
>
Nov
<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-item"
title="Nov"
>
Nov
</span>
</span>
</div>
<span
@ -4757,29 +4797,33 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="2016"
>
2016
<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-item"
title="2016"
>
2016
</span>
</span>
</div>
<span
@ -4816,29 +4860,33 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="Nov"
>
Nov
<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-item"
title="Nov"
>
Nov
</span>
</span>
</div>
<span
@ -6112,29 +6160,33 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="2017"
>
2017
<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-item"
title="2017"
>
2017
</span>
</span>
</div>
<span
@ -6171,29 +6223,33 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="Jan"
>
Jan
<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-item"
title="Jan"
>
Jan
</span>
</span>
</div>
<span

View File

@ -14,30 +14,34 @@ exports[`Calendar Calendar MonthSelect should display correct label 1`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="2019"
>
2019
<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-item"
title="2019"
>
2019
</span>
</span>
</div>
<span
@ -74,30 +78,34 @@ exports[`Calendar Calendar MonthSelect should display correct label 1`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="Jan"
>
Jan
<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-item"
title="Jan"
>
Jan
</span>
</span>
</div>
<span
@ -958,30 +966,34 @@ exports[`Calendar Calendar should support locale 1`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="2018年"
>
2018年
<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-item"
title="2018年"
>
2018年
</span>
</span>
</div>
<span
@ -1018,30 +1030,34 @@ exports[`Calendar Calendar should support locale 1`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="10月"
>
10月
<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-item"
title="10月"
>
10月
</span>
</span>
</div>
<span
@ -1902,30 +1918,34 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="2000"
>
2000
<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-item"
title="2000"
>
2000
</span>
</span>
</div>
<span
@ -1962,30 +1982,34 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="Sep"
>
Sep
<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-item"
title="Sep"
>
Sep
</span>
</span>
</div>
<span
@ -2846,30 +2870,34 @@ exports[`Calendar support Calendar.generateCalendar 1`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="2000"
>
2000
<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-item"
title="2000"
>
2000
</span>
</span>
</div>
<span
@ -2906,30 +2934,34 @@ exports[`Calendar support Calendar.generateCalendar 1`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="Jan"
>
Jan
<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-item"
title="Jan"
>
Jan
</span>
</span>
</div>
<span

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}
/>,
);
}

File diff suppressed because it is too large Load Diff

View File

@ -871,44 +871,48 @@ exports[`Cascader legacy props should support showCheckedStrategy child 1`] = `
<div
class="ant-select-selector"
>
<div
class="ant-select-selection-overflow"
<span
class="ant-select-selection-wrap"
>
<div
class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
style="opacity: 1;"
class="ant-select-selection-overflow"
>
<div
class="ant-select-selection-search"
style="width: 0px;"
class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
style="opacity: 1;"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="true"
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
aria-hidden="true"
class="ant-select-selection-search-mirror"
<div
class="ant-select-selection-search"
style="width: 0px;"
>
</span>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="true"
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
aria-hidden="true"
class="ant-select-selection-search-mirror"
>
</span>
</div>
</div>
</div>
</div>
<span
class="ant-select-selection-placeholder"
/>
<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"
@ -1048,44 +1052,48 @@ exports[`Cascader legacy props should support showCheckedStrategy parent 1`] = `
<div
class="ant-select-selector"
>
<div
class="ant-select-selection-overflow"
<span
class="ant-select-selection-wrap"
>
<div
class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
style="opacity: 1;"
class="ant-select-selection-overflow"
>
<div
class="ant-select-selection-search"
style="width: 0px;"
class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
style="opacity: 1;"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="true"
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
aria-hidden="true"
class="ant-select-selection-search-mirror"
<div
class="ant-select-selection-search"
style="width: 0px;"
>
</span>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="true"
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
aria-hidden="true"
class="ant-select-selection-search-mirror"
>
</span>
</div>
</div>
</div>
</div>
<span
class="ant-select-selection-placeholder"
/>
<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"
@ -1376,30 +1384,34 @@ exports[`Cascader popup correctly with defaultValue RTL 1`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="true"
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-item"
title="Zhejiang / Hangzhou"
>
Zhejiang / Hangzhou
<span
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="true"
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-item"
title="Zhejiang / Hangzhou"
>
Zhejiang / Hangzhou
</span>
</span>
</div>
<div
@ -1613,28 +1625,32 @@ exports[`Cascader rtl render component should be rendered correctly in RTL direc
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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
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"
/>
</span>
<span
class="ant-select-selection-placeholder"
/>
</div>
<span
aria-hidden="true"
@ -1833,30 +1849,34 @@ exports[`Cascader support controlled mode 1`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="Zhejiang / Hangzhou / West Lake"
>
Zhejiang / Hangzhou / West Lake
<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-item"
title="Zhejiang / Hangzhou / West Lake"
>
Zhejiang / Hangzhou / West Lake
</span>
</span>
</div>
<span

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 = () => (
<Flex vertical gap="small" align="flex-start">
<Cascader.Panel options={options} onChange={onChange} />
<Cascader.Panel multiple options={options} onChange={onMultipleChange} />
<Cascader.Panel />
</Flex>
);
const App: React.FC = () => {
const [disabled, setDisabled] = useState(false);
return (
<Flex vertical gap="small" align="flex-start">
<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;

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.

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"
/>
</>
);

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 |

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 |

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"
>
@ -1093,30 +1101,34 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="start"
>
start
<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-item"
title="start"
>
start
</span>
</span>
</div>
<div

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"
>
@ -1081,29 +1089,33 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="start"
>
start
<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-item"
title="start"
>
start
</span>
</span>
</div>
<span

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`]: {

View File

@ -141,30 +141,34 @@ exports[`ColorPicker Should panelRender work 1`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="HEX"
>
HEX
<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-item"
title="HEX"
>
HEX
</span>
</span>
</div>
<span
@ -425,30 +429,34 @@ exports[`ColorPicker Should panelRender work 2`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="HEX"
>
HEX
<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-item"
title="HEX"
>
HEX
</span>
</span>
</div>
<span

View File

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

View File

@ -9,29 +9,33 @@ exports[`ConfigProvider.Popup disable virtual if dropdownMatchSelectWidth is fal
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="true"
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
class="ant-select-selection-search"
>
<input
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="true"
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"
/>
</span>
<span
class="ant-select-selection-placeholder"
/>
</div>
<span
aria-hidden="true"
@ -67,28 +71,32 @@ exports[`ConfigProvider.Popup disable virtual if dropdownMatchSelectWidth is fal
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="true"
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
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="true"
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"
/>
</span>
<span
class="ant-select-selection-placeholder"
/>
</div>
<span
aria-hidden="true"
@ -124,28 +132,32 @@ exports[`ConfigProvider.Popup disable virtual if dropdownMatchSelectWidth is fal
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="true"
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
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="true"
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"
/>
</span>
<span
class="ant-select-selection-placeholder"
/>
</div>
<span
aria-hidden="true"
@ -186,29 +198,33 @@ exports[`ConfigProvider.Popup disable virtual if is false 1`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="true"
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
class="ant-select-selection-search"
>
<input
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="true"
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"
/>
</span>
<span
class="ant-select-selection-placeholder"
/>
</div>
<span
aria-hidden="true"
@ -244,28 +260,32 @@ exports[`ConfigProvider.Popup disable virtual if is false 1`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="true"
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
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="true"
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"
/>
</span>
<span
class="ant-select-selection-placeholder"
/>
</div>
<span
aria-hidden="true"
@ -301,28 +321,32 @@ exports[`ConfigProvider.Popup disable virtual if is false 1`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="true"
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
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="true"
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"
/>
</span>
<span
class="ant-select-selection-placeholder"
/>
</div>
<span
aria-hidden="true"
@ -363,29 +387,33 @@ exports[`ConfigProvider.Popup disable virtual if popupMatchSelectWidth is false
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="true"
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
class="ant-select-selection-search"
>
<input
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="true"
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"
/>
</span>
<span
class="ant-select-selection-placeholder"
/>
</div>
<span
aria-hidden="true"
@ -421,28 +449,32 @@ exports[`ConfigProvider.Popup disable virtual if popupMatchSelectWidth is false
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="true"
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
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="true"
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"
/>
</span>
<span
class="ant-select-selection-placeholder"
/>
</div>
<span
aria-hidden="true"
@ -478,28 +510,32 @@ exports[`ConfigProvider.Popup disable virtual if popupMatchSelectWidth is false
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="true"
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
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="true"
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"
/>
</span>
<span
class="ant-select-selection-placeholder"
/>
</div>
<span
aria-hidden="true"

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>
`;
@ -7004,29 +7179,33 @@ exports[`renders components/date-picker/demo/switchable.tsx correctly 1`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="Time"
>
Time
<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-item"
title="Time"
>
Time
</span>
</span>
</div>
<span

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`.

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

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` | - | |

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` | - | |

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',

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"

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"

View File

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

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}>

View File

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

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;

View File

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

View File

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

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);
} else {
const [item, itemExceed] = getFilledItem(rowItem, rowRestCol, mergedSpan);
exceed = exceed || itemExceed;
tmpRow.push(item);
const restSpan = mergedColumn - count;
count += rowItem.span || 1;
if (count >= mergedColumn) {
if (count > mergedColumn) {
exceed = true;
tmpRow.push({ ...restItem, span: restSpan });
} else {
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];
}

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.

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 {

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`)时,两者会同时作用。样式冲突时,后者会覆盖前者。

View File

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

View File

@ -994,30 +994,34 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="owner_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="owner_list"
aria-required="true"
autocomplete="off"
class="ant-select-selection-search-input"
id="owner"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="ant-select-selection-placeholder"
>
Please select an owner
<span
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="owner_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="owner_list"
aria-required="true"
autocomplete="off"
class="ant-select-selection-search-input"
id="owner"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="ant-select-selection-placeholder"
>
Please select an owner
</span>
</span>
</div>
<div
@ -1171,30 +1175,34 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="type_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="type_list"
aria-required="true"
autocomplete="off"
class="ant-select-selection-search-input"
id="type"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="ant-select-selection-placeholder"
>
Please choose the type
<span
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="type_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="type_list"
aria-required="true"
autocomplete="off"
class="ant-select-selection-search-input"
id="type"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="ant-select-selection-placeholder"
>
Please choose the type
</span>
</span>
</div>
<div
@ -1353,30 +1361,34 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="approver_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="approver_list"
aria-required="true"
autocomplete="off"
class="ant-select-selection-search-input"
id="approver"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="ant-select-selection-placeholder"
>
Please choose the approver
<span
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="approver_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="approver_list"
aria-required="true"
autocomplete="off"
class="ant-select-selection-search-input"
id="approver"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="ant-select-selection-placeholder"
>
Please choose the approver
</span>
</span>
</div>
<div

View File

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

View File

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

View File

@ -132,28 +132,32 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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
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"
/>
</span>
<span
class="ant-select-selection-placeholder"
/>
</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"
@ -241,28 +245,32 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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
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"
/>
</span>
<span
class="ant-select-selection-placeholder"
/>
</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"
@ -349,25 +357,29 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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"
role="combobox"
type="search"
value=""
<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"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-placeholder"
/>
</span>
<span
class="ant-select-selection-placeholder"
/>
</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"

View File

@ -130,27 +130,31 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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
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"
/>
</span>
<span
class="ant-select-selection-placeholder"
/>
</div>
<span
aria-hidden="true"
@ -198,27 +202,31 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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
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"
/>
</span>
<span
class="ant-select-selection-placeholder"
/>
</div>
<span
aria-hidden="true"
@ -266,24 +274,28 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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"
role="combobox"
type="search"
value=""
<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"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-placeholder"
/>
</span>
<span
class="ant-select-selection-placeholder"
/>
</div>
<span
aria-hidden="true"

View File

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

View File

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

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);
}
}
};

File diff suppressed because it is too large Load Diff

View File

@ -294,29 +294,33 @@ exports[`Form form should support disabled 1`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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"
disabled=""
id="rc_select_TEST_OR_SSR"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
<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"
disabled=""
id="rc_select_TEST_OR_SSR"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="ant-select-selection-placeholder"
/>
</span>
<span
class="ant-select-selection-placeholder"
/>
</div>
<span
aria-hidden="true"
@ -382,29 +386,33 @@ exports[`Form form should support disabled 1`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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"
disabled=""
id="rc_select_TEST_OR_SSR"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
<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"
disabled=""
id="rc_select_TEST_OR_SSR"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="ant-select-selection-placeholder"
/>
</span>
<span
class="ant-select-selection-placeholder"
/>
</div>
<span
aria-hidden="true"
@ -470,29 +478,33 @@ exports[`Form form should support disabled 1`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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"
disabled=""
id="rc_select_TEST_OR_SSR"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
<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"
disabled=""
id="rc_select_TEST_OR_SSR"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="ant-select-selection-placeholder"
/>
</span>
<span
class="ant-select-selection-placeholder"
/>
</div>
<span
aria-hidden="true"

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>();

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 }}

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];

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 |

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 |

View File

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

View File

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

View File

@ -120,30 +120,34 @@ exports[`renders components/input-number/demo/addon.tsx extend context correctly
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="+"
>
+
<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-item"
title="+"
>
+
</span>
</span>
</div>
<div
@ -339,30 +343,34 @@ exports[`renders components/input-number/demo/addon.tsx extend context correctly
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="$"
>
$
<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-item"
title="$"
>
$
</span>
</span>
</div>
<div
@ -639,29 +647,33 @@ exports[`renders components/input-number/demo/addon.tsx extend context correctly
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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"
>
cascader
<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"
>
cascader
</span>
</span>
</div>
<div
@ -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"

View File

@ -120,29 +120,33 @@ exports[`renders components/input-number/demo/addon.tsx correctly 1`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="+"
>
+
<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-item"
title="+"
>
+
</span>
</span>
</div>
<span
@ -258,29 +262,33 @@ exports[`renders components/input-number/demo/addon.tsx correctly 1`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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-item"
title="$"
>
$
<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-item"
title="$"
>
$
</span>
</span>
</div>
<span
@ -443,28 +451,32 @@ exports[`renders components/input-number/demo/addon.tsx correctly 1`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<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"
>
cascader
<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"
>
cascader
</span>
</span>
</div>
<span
@ -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"

View File

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

View File

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

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;

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

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';

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

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<

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 &&

File diff suppressed because it is too large Load Diff

View File

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

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']);
});
});

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 (

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

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

View File

@ -306,28 +306,32 @@ exports[`List.pagination should change page size work 1`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
<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-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
</span>
</span>
</div>
<span
@ -451,29 +455,33 @@ exports[`List.pagination should change page size work 2`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="true"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="50 / page"
>
50 / page
<span
class="ant-select-selection-search"
>
<input
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="true"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="50 / page"
>
50 / page
</span>
</span>
</div>
<div
@ -710,28 +718,32 @@ exports[`List.pagination should default work 1`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="3 / page"
>
3 / page
<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-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="3 / page"
>
3 / page
</span>
</span>
</div>
<span

File diff suppressed because it is too large Load Diff

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -566,28 +566,32 @@ exports[`renders components/pagination/demo/all.tsx extend context correctly 1`]
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
<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-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
</span>
</span>
</div>
<div
@ -1048,28 +1052,32 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
<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-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
</span>
</span>
</div>
<div
@ -1386,29 +1394,33 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
disabled=""
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
<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-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
disabled=""
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
</span>
</span>
</div>
<div
@ -1692,28 +1704,32 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
<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-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
</span>
</span>
</div>
<div
@ -2041,29 +2057,33 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
disabled=""
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
<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-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
disabled=""
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
</span>
</span>
</div>
<div
@ -2470,28 +2490,32 @@ exports[`renders components/pagination/demo/itemRender.tsx extend context correc
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
<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-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
</span>
</span>
</div>
<div
@ -2813,28 +2837,32 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
<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-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
</span>
</span>
</div>
<div
@ -3162,29 +3190,33 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
disabled=""
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
<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-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
disabled=""
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
</span>
</span>
</div>
<div
@ -3593,28 +3625,32 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
<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-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
</span>
</span>
</div>
<div
@ -4025,29 +4061,33 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
disabled=""
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
<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-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
disabled=""
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
</span>
</span>
</div>
<div
@ -4430,28 +4470,32 @@ exports[`renders components/pagination/demo/more.tsx extend context correctly 1`
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
<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-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
</span>
</span>
</div>
<div
@ -4987,28 +5031,32 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="20 / page"
>
20 / page
<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-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="20 / page"
>
20 / page
</span>
</span>
</div>
<div
@ -5281,28 +5329,32 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="20 / page"
>
20 / page
<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-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="20 / page"
>
20 / page
</span>
</span>
</div>
<div
@ -5625,28 +5677,32 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
<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-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
</span>
</span>
</div>
<div
@ -5963,29 +6019,33 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
disabled=""
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
<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-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
disabled=""
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
</span>
</span>
</div>
<div
@ -6302,28 +6362,32 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
<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-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
</span>
</span>
</div>
<div
@ -6640,29 +6704,33 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
disabled=""
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
<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-label="Page Size"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
disabled=""
id="rc_select_TEST_OR_SSR"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
</span>
</span>
</div>
<div

View File

@ -564,27 +564,31 @@ exports[`renders components/pagination/demo/all.tsx correctly 1`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
<span
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
</span>
</span>
</div>
<span
@ -939,27 +943,31 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
<span
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
</span>
</span>
</div>
<span
@ -1174,28 +1182,32 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
disabled=""
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
<span
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
disabled=""
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
</span>
</span>
</div>
<span
@ -1375,27 +1387,31 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
<span
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
</span>
</span>
</div>
<span
@ -1621,28 +1637,32 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
disabled=""
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
<span
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
disabled=""
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
</span>
</span>
</div>
<span
@ -1943,27 +1963,31 @@ exports[`renders components/pagination/demo/itemRender.tsx correctly 1`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
<span
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
</span>
</span>
</div>
<span
@ -2181,27 +2205,31 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
<span
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
</span>
</span>
</div>
<span
@ -2427,28 +2455,32 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
disabled=""
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
<span
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
disabled=""
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
</span>
</span>
</div>
<span
@ -2753,27 +2785,31 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
<span
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
</span>
</span>
</div>
<span
@ -3082,28 +3118,32 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
disabled=""
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
<span
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
disabled=""
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
</span>
</span>
</div>
<span
@ -3382,27 +3422,31 @@ exports[`renders components/pagination/demo/more.tsx correctly 1`] = `
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
<span
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
</span>
</span>
</div>
<span
@ -3832,27 +3876,31 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="20 / page"
>
20 / page
<span
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="20 / page"
>
20 / page
</span>
</span>
</div>
<span
@ -4023,27 +4071,31 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="20 / page"
>
20 / page
<span
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="20 / page"
>
20 / page
</span>
</span>
</div>
<span
@ -4262,27 +4314,31 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
<span
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
</span>
</span>
</div>
<span
@ -4497,28 +4553,32 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
disabled=""
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
<span
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
disabled=""
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
</span>
</span>
</div>
<span
@ -4733,27 +4793,31 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
<span
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
</span>
</span>
</div>
<span
@ -4968,28 +5032,32 @@ Array [
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
class="ant-select-selection-wrap"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
disabled=""
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
<span
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Page Size"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
disabled=""
role="combobox"
type="search"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
</span>
</span>
</div>
<span

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