mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 09:26:06 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

feat: select/cascader/tree-select support variant filled (#46549)

Browse Source 
* feat: Select filled style

* chore: update snapshot

* feat: Cascader and TreeSelect support variant

* feat: multiple style

* fix: import

* chore: fix lint

* chore: update auto-complete docs

* fix: clearIcon bg

* chore: code clean
This commit is contained in:
MadCcc 2023-12-21 13:39:04 +08:00 committed by GitHub
parent 3af521d422
commit 5f395fbed3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
74 changed files with 4603 additions and 1285 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/_util/hooks/useVariants.ts
View File

@ -7,9 +7,6 @@ const useVariant = <T extends string>(
variant: T | undefined,
legacyBordered: boolean | undefined,
variants: readonly (T | DefaultVariant)[],
options?: {
omitOutlined?: boolean;
},
): [T | DefaultVariant, boolean] => {
let mergedVariant: T | DefaultVariant;
if (typeof variant !== 'undefined') {
@ -20,8 +17,7 @@ const useVariant = <T extends string>(
mergedVariant = 'outlined';
}
const enableVariantCls =
variants.includes(mergedVariant) && (!options?.omitOutlined || mergedVariant !== 'outlined');
const enableVariantCls = variants.includes(mergedVariant);
return [mergedVariant, enableVariantCls];
};

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

@ -3,7 +3,7 @@
exports[`renders components/auto-complete/demo/allowClear.tsx extend context correctly 1`] = `
Array [
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-single ant-select-show-search"
style="width: 200px;"
>
<div
@ -48,7 +48,7 @@ Array [
<br />,
<br />,
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-allow-clear ant-select-show-search"
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-single ant-select-allow-clear ant-select-show-search"
style="width: 200px;"
>
<div
@ -98,7 +98,7 @@ exports[`renders components/auto-complete/demo/allowClear.tsx extend context cor
exports[`renders components/auto-complete/demo/basic.tsx extend context correctly 1`] = `
Array [
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-single ant-select-show-search"
style="width: 200px;"
>
<div
@ -143,7 +143,7 @@ Array [
<br />,
<br />,
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-single ant-select-show-search"
style="width: 200px;"
>
<div
@ -190,57 +190,9 @@ Array [
exports[`renders components/auto-complete/demo/basic.tsx extend context correctly 2`] = `[]`;
exports[`renders components/auto-complete/demo/borderless.tsx extend context correctly 1`] = `
<div
class="ant-select ant-select-borderless ant-select-auto-complete ant-select-single ant-select-show-search"
style="width: 200px;"
>
<div
class="ant-select-selector"
>
<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"
>
Borderless
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div>
<div
class="ant-select-item-empty"
id="rc_select_TEST_OR_SSR_list"
role="listbox"
/>
</div>
</div>
</div>
`;
exports[`renders components/auto-complete/demo/borderless.tsx extend context correctly 2`] = `[]`;
exports[`renders components/auto-complete/demo/certain-category.tsx extend context correctly 1`] = `
<div
class="ant-select ant-select-lg ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-lg ant-select-outlined ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
style="width: 250px;"
>
<div
@ -609,7 +561,7 @@ exports[`renders components/auto-complete/demo/certain-category.tsx extend conte
exports[`renders components/auto-complete/demo/custom.tsx extend context correctly 1`] = `
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
style="width: 200px;"
>
<div
@ -685,7 +637,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-show-search"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-show-search"
>
<div
class="ant-select-selector"
@ -755,7 +707,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-in-form-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -902,7 +854,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
class="ant-input-group ant-input-group-compact"
>
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width: 30%;"
>
<div
@ -1017,7 +969,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
</span>
</div>
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-single ant-select-show-search"
>
<div
class="ant-select-selector"
@ -1088,7 +1040,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
>
<div
class="ant-select-selector"
@ -1188,7 +1140,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
class="ant-input-group ant-input-group-compact"
>
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width: 30%;"
>
<div
@ -1303,7 +1255,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
</span>
</div>
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
>
<div
class="ant-select-selector"
@ -1404,7 +1356,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
class="ant-input-group ant-input-group-compact"
>
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width: 30%;"
>
<div
@ -1519,7 +1471,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
</span>
</div>
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
>
<div
class="ant-select-selector"
@ -1633,7 +1585,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
class="ant-input-group ant-input-group-compact"
>
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width: 20%;"
>
<div
@ -1748,7 +1700,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
</span>
</div>
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
>
<div
class="ant-select-selector"
@ -1875,7 +1827,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
exports[`renders components/auto-complete/demo/non-case-sensitive.tsx extend context correctly 1`] = `
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-single ant-select-show-search"
style="width: 200px;"
>
<div
@ -1999,7 +1951,7 @@ exports[`renders components/auto-complete/demo/non-case-sensitive.tsx extend con
exports[`renders components/auto-complete/demo/options.tsx extend context correctly 1`] = `
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-single ant-select-show-search"
style="width: 200px;"
>
<div
@ -2081,7 +2033,7 @@ exports[`renders components/auto-complete/demo/render-panel.tsx extend context c
style="padding-bottom: 0px; position: relative; min-width: 0;"
>
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-single ant-select-show-search"
style="width: 120px; margin: 0px;"
>
<div
@ -2236,7 +2188,7 @@ exports[`renders components/auto-complete/demo/status.tsx extend context correct
class="ant-space-item"
>
<div
class="ant-select ant-select-status-error ant-select-auto-complete ant-select-single ant-select-show-search"
class="ant-select ant-select-outlined ant-select-status-error ant-select-auto-complete ant-select-single ant-select-show-search"
style="width: 200px;"
>
<div
@ -2281,7 +2233,7 @@ exports[`renders components/auto-complete/demo/status.tsx extend context correct
class="ant-space-item"
>
<div
class="ant-select ant-select-status-warning ant-select-auto-complete ant-select-single ant-select-show-search"
class="ant-select ant-select-outlined ant-select-status-warning ant-select-auto-complete ant-select-single ant-select-show-search"
style="width: 200px;"
>
<div
@ -2329,7 +2281,7 @@ exports[`renders components/auto-complete/demo/status.tsx extend context correct
exports[`renders components/auto-complete/demo/uncertain-category.tsx extend context correctly 1`] = `
<div
class="ant-select ant-select-lg ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-lg ant-select-outlined ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
style="width: 300px;"
>
<div
@ -2417,3 +2369,142 @@ exports[`renders components/auto-complete/demo/uncertain-category.tsx extend con
"Warning: [antd: AutoComplete] You need to control style self instead of setting \`size\` when using customize input.",
]
`;
exports[`renders components/auto-complete/demo/variant.tsx extend context correctly 1`] = `
<div
class="ant-flex ant-flex-align-stretch ant-flex-vertical"
style="gap: 12px;"
>
<div
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-single ant-select-show-search"
style="width: 200px;"
>
<div
class="ant-select-selector"
>
<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"
>
Outlined
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div>
<div
class="ant-select-item-empty"
id="rc_select_TEST_OR_SSR_list"
role="listbox"
/>
</div>
</div>
</div>
<div
class="ant-select ant-select-filled ant-select-auto-complete ant-select-single ant-select-show-search"
style="width: 200px;"
>
<div
class="ant-select-selector"
>
<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"
>
Filled
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div>
<div
class="ant-select-item-empty"
id="rc_select_TEST_OR_SSR_list"
role="listbox"
/>
</div>
</div>
</div>
<div
class="ant-select ant-select-borderless ant-select-auto-complete ant-select-single ant-select-show-search"
style="width: 200px;"
>
<div
class="ant-select-selector"
>
<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"
>
Borderless
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div>
<div
class="ant-select-item-empty"
id="rc_select_TEST_OR_SSR_list"
role="listbox"
/>
</div>
</div>
</div>
</div>
`;
exports[`renders components/auto-complete/demo/variant.tsx extend context correctly 2`] = `[]`;

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

@ -3,7 +3,7 @@
exports[`renders components/auto-complete/demo/allowClear.tsx correctly 1`] = `
Array [
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-single ant-select-show-search"
style="width:200px"
>
<div
@ -35,7 +35,7 @@ Array [
<br />,
<br />,
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-allow-clear ant-select-show-search"
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-single ant-select-allow-clear ant-select-show-search"
style="width:200px"
>
<div
@ -70,7 +70,7 @@ Array [
exports[`renders components/auto-complete/demo/basic.tsx correctly 1`] = `
Array [
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-single ant-select-show-search"
style="width:200px"
>
<div
@ -102,7 +102,7 @@ Array [
<br />,
<br />,
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-single ant-select-show-search"
style="width:200px"
>
<div
@ -134,42 +134,9 @@ Array [
]
`;
exports[`renders components/auto-complete/demo/borderless.tsx correctly 1`] = `
<div
class="ant-select ant-select-borderless ant-select-auto-complete ant-select-single ant-select-show-search"
style="width:200px"
>
<div
class="ant-select-selector"
>
<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"
>
Borderless
</span>
</div>
</div>
`;
exports[`renders components/auto-complete/demo/certain-category.tsx correctly 1`] = `
<div
class="ant-select ant-select-lg ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-lg ant-select-outlined ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
style="width:250px"
>
<div
@ -241,7 +208,7 @@ exports[`renders components/auto-complete/demo/certain-category.tsx correctly 1`
exports[`renders components/auto-complete/demo/custom.tsx correctly 1`] = `
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
style="width:200px"
>
<div
@ -302,7 +269,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-show-search"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-show-search"
>
<div
class="ant-select-selector"
@ -359,7 +326,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-in-form-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -448,7 +415,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
class="ant-input-group ant-input-group-compact"
>
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width:30%"
>
<div
@ -505,7 +472,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
</span>
</div>
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-single ant-select-show-search"
>
<div
class="ant-select-selector"
@ -563,7 +530,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
>
<div
class="ant-select-selector"
@ -650,7 +617,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
class="ant-input-group ant-input-group-compact"
>
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width:30%"
>
<div
@ -707,7 +674,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
</span>
</div>
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
>
<div
class="ant-select-selector"
@ -795,7 +762,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
class="ant-input-group ant-input-group-compact"
>
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width:30%"
>
<div
@ -852,7 +819,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
</span>
</div>
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
>
<div
class="ant-select-selector"
@ -953,7 +920,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
class="ant-input-group ant-input-group-compact"
>
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width:20%"
>
<div
@ -1010,7 +977,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
</span>
</div>
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
>
<div
class="ant-select-selector"
@ -1118,7 +1085,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
exports[`renders components/auto-complete/demo/non-case-sensitive.tsx correctly 1`] = `
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-single ant-select-show-search"
style="width:200px"
>
<div
@ -1151,7 +1118,7 @@ exports[`renders components/auto-complete/demo/non-case-sensitive.tsx correctly
exports[`renders components/auto-complete/demo/options.tsx correctly 1`] = `
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-single ant-select-show-search"
style="width:200px"
>
<div
@ -1218,7 +1185,7 @@ exports[`renders components/auto-complete/demo/render-panel.tsx correctly 1`] =
style="padding-bottom:0;position:relative;min-width:0"
>
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-single ant-select-show-search"
style="width:120px;margin:0"
>
<div
@ -1256,7 +1223,7 @@ exports[`renders components/auto-complete/demo/status.tsx correctly 1`] = `
class="ant-space-item"
>
<div
class="ant-select ant-select-status-error ant-select-auto-complete ant-select-single ant-select-show-search"
class="ant-select ant-select-outlined ant-select-status-error ant-select-auto-complete ant-select-single ant-select-show-search"
style="width:200px"
>
<div
@ -1288,7 +1255,7 @@ exports[`renders components/auto-complete/demo/status.tsx correctly 1`] = `
class="ant-space-item"
>
<div
class="ant-select ant-select-status-warning ant-select-auto-complete ant-select-single ant-select-show-search"
class="ant-select ant-select-outlined ant-select-status-warning ant-select-auto-complete ant-select-single ant-select-show-search"
style="width:200px"
>
<div
@ -1321,7 +1288,7 @@ exports[`renders components/auto-complete/demo/status.tsx correctly 1`] = `
exports[`renders components/auto-complete/demo/uncertain-category.tsx correctly 1`] = `
<div
class="ant-select ant-select-lg ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-lg ant-select-outlined ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
style="width:300px"
>
<div
@ -1390,3 +1357,101 @@ exports[`renders components/auto-complete/demo/uncertain-category.tsx correctly
</div>
</div>
`;
exports[`renders components/auto-complete/demo/variant.tsx correctly 1`] = `
<div
class="ant-flex ant-flex-align-stretch ant-flex-vertical"
style="gap:12px"
>
<div
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-single ant-select-show-search"
style="width:200px"
>
<div
class="ant-select-selector"
>
<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"
>
Outlined
</span>
</div>
</div>
<div
class="ant-select ant-select-filled ant-select-auto-complete ant-select-single ant-select-show-search"
style="width:200px"
>
<div
class="ant-select-selector"
>
<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"
>
Filled
</span>
</div>
</div>
<div
class="ant-select ant-select-borderless ant-select-auto-complete ant-select-single ant-select-show-search"
style="width:200px"
>
<div
class="ant-select-selector"
>
<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"
>
Borderless
</span>
</div>
</div>
</div>
`;

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

@ -2,7 +2,7 @@
exports[`AutoComplete rtl render component should be rendered correctly in RTL direction 1`] = `
<div
class="ant-select ant-select-rtl ant-select-auto-complete ant-select-single ant-select-show-search"
class="ant-select ant-select-rtl ant-select-outlined ant-select-auto-complete ant-select-single ant-select-show-search"
>
<div
class="ant-select-selector"

7
components/auto-complete/demo/borderless.md
View File

@ -1,7 +0,0 @@
## zh-CN
没有边框。
## en-US
No border.

26
components/auto-complete/demo/borderless.tsx
View File

@ -1,26 +0,0 @@
import React, { useState } from 'react';
import { AutoComplete } from 'antd';
const mockVal = (str: string, repeat = 1) => ({
value: str.repeat(repeat),
});
const App: React.FC = () => {
const [options, setOptions] = useState<{ value: string }[]>([]);
const getPanelValue = (searchText: string) =>
!searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];
return (
<AutoComplete
options={options}
style={{ width: 200 }}
placeholder="Borderless"
onSearch={(text) => setOptions(getPanelValue(text))}
onSelect={globalThis.console.log}
variant="borderless"
/>
);
};
export default App;

7
components/auto-complete/demo/variant.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
可选 `outlined` `filled` `borderless` 三种形态。
## en-US
There are `outlined` `fille` and `borderless`, totally three variants to choose from.

43
components/auto-complete/demo/variant.tsx Normal file
View File

@ -0,0 +1,43 @@
import React, { useState } from 'react';
import { AutoComplete, Flex } from 'antd';
const mockVal = (str: string, repeat = 1) => ({
value: str.repeat(repeat),
});
const App: React.FC = () => {
const [options, setOptions] = useState<{ value: string }[]>([]);
const getPanelValue = (searchText: string) =>
!searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];
return (
<Flex vertical gap={12}>
<AutoComplete
options={options}
style={{ width: 200 }}
placeholder="Outlined"
onSearch={(text) => setOptions(getPanelValue(text))}
onSelect={globalThis.console.log}
/>
<AutoComplete
options={options}
style={{ width: 200 }}
placeholder="Filled"
onSearch={(text) => setOptions(getPanelValue(text))}
onSelect={globalThis.console.log}
variant="filled"
/>
<AutoComplete
options={options}
style={{ width: 200 }}
placeholder="Borderless"
onSearch={(text) => setOptions(getPanelValue(text))}
onSelect={globalThis.console.log}
variant="borderless"
/>
</Flex>
);
};
export default App;

4
components/auto-complete/index.en-US.md
View File

@ -32,7 +32,7 @@ The differences with Select are:
<code src="./demo/certain-category.tsx">Lookup-Patterns - Certain Category</code>
<code src="./demo/uncertain-category.tsx">Lookup-Patterns - Uncertain Category</code>
<code src="./demo/status.tsx">Status</code>
<code src="./demo/borderless.tsx">Borderless</code>
<code src="./demo/variant.tsx" version="5.13.0">Variants</code>
<code src="./demo/allowClear.tsx">Customize clear button</code>
<code src="./demo/form-debug.tsx" debug>Debug in Form</code>
<code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
@ -46,7 +46,6 @@ Common props ref：[Common props](/docs/react/common-props)
| allowClear | Show clear button | boolean \| { clearIcon?: ReactNode } | false | 5.8.0: Support Object type |
| autoFocus | If get focus when component mounted | boolean | false | |
| backfill | If backfill selected item the input when using keyboard | boolean | false | |
| bordered | Whether has border style | boolean | true | |
| children (for customize input element) | Customize input element | HTMLInputElement \| HTMLTextAreaElement \| React.ReactElement&lt;InputProps> | &lt;Input /> | |
| children (for dataSource) | Data source to auto complete | React.ReactElement&lt;OptionProps> \| Array&lt;React.ReactElement&lt;OptionProps>> | - | |
| defaultActiveFirstOption | Whether active first option by default | boolean | true | |
@ -62,6 +61,7 @@ Common props ref：[Common props](/docs/react/common-props)
| placeholder | The placeholder of input | string | - | |
| status | Set validation status | 'error' \| 'warning' | - | 4.19.0 |
| value | Selected option | string | - | |
| variant | Variants of input | `outlined` \| `borderless` \| `filled` | `outlined` | 5.13.0 |
| onBlur | Called when leaving the component | function() | - | |
| onChange | Called when selecting an option or changing an input value | function(value) | - | |
| onDropdownVisibleChange | Call when dropdown open | function(open) | - | |

4
components/auto-complete/index.zh-CN.md
View File

@ -33,7 +33,7 @@ demo:
<code src="./demo/certain-category.tsx">查询模式 - 确定类目</code>
<code src="./demo/uncertain-category.tsx">查询模式 - 不确定类目</code>
<code src="./demo/status.tsx">自定义状态</code>
<code src="./demo/borderless.tsx">无边框</code>
<code src="./demo/variant.tsx" version="5.13.0">多种形态</code>
<code src="./demo/allowClear.tsx">自定义清除按钮</code>
<code src="./demo/form-debug.tsx" debug>在 Form 中 Debug</code>
<code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
@ -47,7 +47,6 @@ demo:
| allowClear | 支持清除 | boolean \| { clearIcon?: ReactNode } | false | 5.8.0: 支持对象形式 |
| autoFocus | 自动获取焦点 | boolean | false | |
| backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false | |
| bordered | 是否有边框 | boolean | true | |
| children (自动完成的数据源) | 自动完成的数据源 | React.ReactElement&lt;OptionProps> \| Array&lt;React.ReactElement&lt;OptionProps>> | - | |
| children (自定义输入框) | 自定义输入框 | HTMLInputElement \| HTMLTextAreaElement \| React.ReactElement&lt;InputProps> | &lt;Input /> | |
| defaultActiveFirstOption | 是否默认高亮第一个选项 | boolean | true | |
@ -65,6 +64,7 @@ demo:
| placeholder | 输入框提示 | string | - | |
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
| value | 指定当前选中的条目 | string | - | |
| variant | 形态变体 | `outlined` \| `borderless` \| `filled` | `outlined` | 5.13.0 |
| onBlur | 失去焦点时的回调 | function() | - | |
| onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | - | |
| onDropdownVisibleChange | 展开下拉菜单的回调 | function(open) | - | |

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

@ -8,7 +8,7 @@ exports[`renders components/calendar/demo/basic.tsx extend context correctly 1`]
class="ant-picker-calendar-header"
>
<div
class="ant-select ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -454,7 +454,7 @@ exports[`renders components/calendar/demo/basic.tsx extend context correctly 1`]
</span>
</div>
<div
class="ant-select ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -1593,7 +1593,7 @@ exports[`renders components/calendar/demo/card.tsx extend context correctly 1`]
class="ant-picker-calendar-header"
>
<div
class="ant-select ant-select-sm ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-sm ant-select-outlined ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -2039,7 +2039,7 @@ exports[`renders components/calendar/demo/card.tsx extend context correctly 1`]
</span>
</div>
<div
class="ant-select ant-select-sm ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-sm ant-select-outlined ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -3177,7 +3177,7 @@ Array [
class="ant-picker-calendar-header"
>
<div
class="ant-select ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -3623,7 +3623,7 @@ Array [
</span>
</div>
<div
class="ant-select ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -4755,7 +4755,7 @@ Array [
class="ant-picker-calendar-header"
>
<div
class="ant-select ant-select-sm ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-sm ant-select-outlined ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -5201,7 +5201,7 @@ Array [
</span>
</div>
<div
class="ant-select ant-select-sm ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-sm ant-select-outlined ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -6402,7 +6402,7 @@ exports[`renders components/calendar/demo/customize-header.tsx extend context co
style="padding-left: 4px; padding-right: 4px;"
>
<div
class="ant-select ant-select-sm my-year-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-sm ant-select-outlined my-year-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -6873,7 +6873,7 @@ exports[`renders components/calendar/demo/customize-header.tsx extend context co
style="padding-left: 4px; padding-right: 4px;"
>
<div
class="ant-select ant-select-sm ant-select-single ant-select-show-arrow"
class="ant-select ant-select-sm ant-select-outlined ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -7977,7 +7977,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor
class="ant-picker-calendar-header"
>
<div
class="ant-select ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -8423,7 +8423,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor
</span>
</div>
<div
class="ant-select ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -9972,7 +9972,7 @@ Array [
class="ant-picker-calendar-header"
>
<div
class="ant-select ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -10418,7 +10418,7 @@ Array [
</span>
</div>
<div
class="ant-select ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"

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

@ -8,7 +8,7 @@ exports[`renders components/calendar/demo/basic.tsx correctly 1`] = `
class="ant-picker-calendar-header"
>
<div
class="ant-select ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -67,7 +67,7 @@ exports[`renders components/calendar/demo/basic.tsx correctly 1`] = `
</span>
</div>
<div
class="ant-select ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -953,7 +953,7 @@ exports[`renders components/calendar/demo/card.tsx correctly 1`] = `
class="ant-picker-calendar-header"
>
<div
class="ant-select ant-select-sm ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-sm ant-select-outlined ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -1012,7 +1012,7 @@ exports[`renders components/calendar/demo/card.tsx correctly 1`] = `
</span>
</div>
<div
class="ant-select ant-select-sm ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-sm ant-select-outlined ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -1897,7 +1897,7 @@ Array [
class="ant-picker-calendar-header"
>
<div
class="ant-select ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -1956,7 +1956,7 @@ Array [
</span>
</div>
<div
class="ant-select ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -2837,7 +2837,7 @@ Array [
class="ant-picker-calendar-header"
>
<div
class="ant-select ant-select-sm ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-sm ant-select-outlined ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -2896,7 +2896,7 @@ Array [
</span>
</div>
<div
class="ant-select ant-select-sm ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-sm ant-select-outlined ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -3844,7 +3844,7 @@ exports[`renders components/calendar/demo/customize-header.tsx correctly 1`] = `
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-select ant-select-sm my-year-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-sm ant-select-outlined my-year-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -3908,7 +3908,7 @@ exports[`renders components/calendar/demo/customize-header.tsx correctly 1`] = `
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-select ant-select-sm ant-select-single ant-select-show-arrow"
class="ant-select ant-select-sm ant-select-outlined ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -4751,7 +4751,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = `
class="ant-picker-calendar-header"
>
<div
class="ant-select ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -4810,7 +4810,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = `
</span>
</div>
<div
class="ant-select ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -6106,7 +6106,7 @@ Array [
class="ant-picker-calendar-header"
>
<div
class="ant-select ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -6165,7 +6165,7 @@ Array [
</span>
</div>
<div
class="ant-select ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"

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

@ -8,7 +8,7 @@ exports[`Calendar Calendar MonthSelect should display correct label 1`] = `
class="ant-picker-calendar-header"
>
<div
class="ant-select ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -68,7 +68,7 @@ exports[`Calendar Calendar MonthSelect should display correct label 1`] = `
</span>
</div>
<div
class="ant-select ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -952,7 +952,7 @@ exports[`Calendar Calendar should support locale 1`] = `
class="ant-picker-calendar-header"
>
<div
class="ant-select ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -1012,7 +1012,7 @@ exports[`Calendar Calendar should support locale 1`] = `
</span>
</div>
<div
class="ant-select ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -1896,7 +1896,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
class="ant-picker-calendar-header"
>
<div
class="ant-select ant-select-rtl ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-rtl ant-select-outlined ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -1956,7 +1956,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
</span>
</div>
<div
class="ant-select ant-select-rtl ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-rtl ant-select-outlined ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -2840,7 +2840,7 @@ exports[`Calendar support Calendar.generateCalendar 1`] = `
class="ant-picker-calendar-header"
>
<div
class="ant-select ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -2900,7 +2900,7 @@ exports[`Calendar support Calendar.generateCalendar 1`] = `
</span>
</div>
<div
class="ant-select ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"

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

@ -2,7 +2,7 @@
exports[`renders components/cascader/demo/basic.tsx extend context correctly 1`] = `
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -154,7 +154,7 @@ exports[`renders components/cascader/demo/basic.tsx extend context correctly 2`]
exports[`renders components/cascader/demo/change-on-select.tsx extend context correctly 1`] = `
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -304,7 +304,7 @@ exports[`renders components/cascader/demo/change-on-select.tsx extend context co
exports[`renders components/cascader/demo/custom-dropdown.tsx extend context correctly 1`] = `
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -468,7 +468,7 @@ exports[`renders components/cascader/demo/custom-dropdown.tsx extend context cor
exports[`renders components/cascader/demo/custom-render.tsx extend context correctly 1`] = `
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
style="width: 100%;"
>
<div
@ -759,7 +759,7 @@ exports[`renders components/cascader/demo/custom-trigger.tsx extend context corr
exports[`renders components/cascader/demo/default-value.tsx extend context correctly 1`] = `
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -939,7 +939,7 @@ exports[`renders components/cascader/demo/default-value.tsx extend context corre
exports[`renders components/cascader/demo/disabled-option.tsx extend context correctly 1`] = `
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -1089,7 +1089,7 @@ exports[`renders components/cascader/demo/disabled-option.tsx extend context cor
exports[`renders components/cascader/demo/fields-name.tsx extend context correctly 1`] = `
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -1241,7 +1241,7 @@ exports[`renders components/cascader/demo/fields-name.tsx extend context correct
exports[`renders components/cascader/demo/hover.tsx extend context correctly 1`] = `
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -1391,7 +1391,7 @@ exports[`renders components/cascader/demo/hover.tsx extend context correctly 2`]
exports[`renders components/cascader/demo/lazy.tsx extend context correctly 1`] = `
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -1541,7 +1541,7 @@ exports[`renders components/cascader/demo/lazy.tsx extend context correctly 2`]
exports[`renders components/cascader/demo/multiple.tsx extend context correctly 1`] = `
<div
class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
style="width: 100%;"
>
<div
@ -2047,7 +2047,7 @@ Array [
<br />,
<br />,
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -2203,7 +2203,7 @@ exports[`renders components/cascader/demo/render-panel.tsx extend context correc
style="padding-bottom: 0px; position: relative; min-width: 0;"
>
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-open"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-open"
style="margin: 0px;"
>
<div
@ -2365,7 +2365,7 @@ If you used to conditionally omit it with %s={condition && value}, pass %s={cond
exports[`renders components/cascader/demo/search.tsx extend context correctly 1`] = `
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -2515,7 +2515,7 @@ exports[`renders components/cascader/demo/search.tsx extend context correctly 2`
exports[`renders components/cascader/demo/showCheckedStrategy.tsx extend context correctly 1`] = `
Array [
<div
class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
style="width: 100%;"
>
<div
@ -2732,7 +2732,7 @@ Array [
<br />,
<br />,
<div
class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
style="width: 100%;"
>
<div
@ -2954,7 +2954,7 @@ exports[`renders components/cascader/demo/showCheckedStrategy.tsx extend context
exports[`renders components/cascader/demo/size.tsx extend context correctly 1`] = `
Array [
<div
class="ant-select ant-cascader ant-select-lg ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-lg ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -3101,7 +3101,7 @@ Array [
<br />,
<br />,
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -3248,7 +3248,7 @@ Array [
<br />,
<br />,
<div
class="ant-select ant-cascader ant-select-sm ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-sm ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -3407,7 +3407,7 @@ exports[`renders components/cascader/demo/status.tsx extend context correctly 1`
class="ant-space-item"
>
<div
class="ant-select ant-cascader ant-select-status-error ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-status-error ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -3542,7 +3542,7 @@ exports[`renders components/cascader/demo/status.tsx extend context correctly 1`
class="ant-space-item"
>
<div
class="ant-select ant-cascader ant-select-status-warning ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-status-warning ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -3696,7 +3696,7 @@ exports[`renders components/cascader/demo/status.tsx extend context correctly 2`
exports[`renders components/cascader/demo/suffix.tsx extend context correctly 1`] = `
Array [
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -3845,7 +3845,7 @@ Array [
<br />,
<br />,
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -3976,7 +3976,7 @@ Array [
<br />,
<br />,
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -4125,7 +4125,7 @@ Array [
<br />,
<br />,
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"

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

@ -2,7 +2,7 @@
exports[`renders components/cascader/demo/basic.tsx correctly 1`] = `
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -63,7 +63,7 @@ exports[`renders components/cascader/demo/basic.tsx correctly 1`] = `
exports[`renders components/cascader/demo/change-on-select.tsx correctly 1`] = `
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -122,7 +122,7 @@ exports[`renders components/cascader/demo/change-on-select.tsx correctly 1`] = `
exports[`renders components/cascader/demo/custom-dropdown.tsx correctly 1`] = `
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -183,7 +183,7 @@ exports[`renders components/cascader/demo/custom-dropdown.tsx correctly 1`] = `
exports[`renders components/cascader/demo/custom-render.tsx correctly 1`] = `
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
style="width:100%"
>
<div
@ -300,7 +300,7 @@ exports[`renders components/cascader/demo/custom-trigger.tsx correctly 1`] = `
exports[`renders components/cascader/demo/default-value.tsx correctly 1`] = `
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -389,7 +389,7 @@ exports[`renders components/cascader/demo/default-value.tsx correctly 1`] = `
exports[`renders components/cascader/demo/disabled-option.tsx correctly 1`] = `
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -448,7 +448,7 @@ exports[`renders components/cascader/demo/disabled-option.tsx correctly 1`] = `
exports[`renders components/cascader/demo/fields-name.tsx correctly 1`] = `
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -509,7 +509,7 @@ exports[`renders components/cascader/demo/fields-name.tsx correctly 1`] = `
exports[`renders components/cascader/demo/hover.tsx correctly 1`] = `
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -568,7 +568,7 @@ exports[`renders components/cascader/demo/hover.tsx correctly 1`] = `
exports[`renders components/cascader/demo/lazy.tsx correctly 1`] = `
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -627,7 +627,7 @@ exports[`renders components/cascader/demo/lazy.tsx correctly 1`] = `
exports[`renders components/cascader/demo/multiple.tsx correctly 1`] = `
<div
class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
style="width:100%"
>
<div
@ -1026,7 +1026,7 @@ Array [
<br />,
<br />,
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -1091,7 +1091,7 @@ exports[`renders components/cascader/demo/render-panel.tsx correctly 1`] = `
style="padding-bottom:0;position:relative;min-width:0"
>
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
style="margin:0"
>
<div
@ -1154,7 +1154,7 @@ exports[`renders components/cascader/demo/render-panel.tsx correctly 1`] = `
exports[`renders components/cascader/demo/search.tsx correctly 1`] = `
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -1213,7 +1213,7 @@ exports[`renders components/cascader/demo/search.tsx correctly 1`] = `
exports[`renders components/cascader/demo/showCheckedStrategy.tsx correctly 1`] = `
Array [
<div
class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
style="width:100%"
>
<div
@ -1327,7 +1327,7 @@ Array [
<br />,
<br />,
<div
class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
style="width:100%"
>
<div
@ -1444,7 +1444,7 @@ Array [
exports[`renders components/cascader/demo/size.tsx correctly 1`] = `
Array [
<div
class="ant-select ant-cascader ant-select-lg ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-lg ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -1502,7 +1502,7 @@ Array [
<br />,
<br />,
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -1560,7 +1560,7 @@ Array [
<br />,
<br />,
<div
class="ant-select ant-cascader ant-select-sm ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-sm ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -1628,7 +1628,7 @@ exports[`renders components/cascader/demo/status.tsx correctly 1`] = `
class="ant-space-item"
>
<div
class="ant-select ant-cascader ant-select-status-error ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-status-error ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -1690,7 +1690,7 @@ exports[`renders components/cascader/demo/status.tsx correctly 1`] = `
class="ant-space-item"
>
<div
class="ant-select ant-cascader ant-select-status-warning ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-status-warning ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -1769,7 +1769,7 @@ exports[`renders components/cascader/demo/status.tsx correctly 1`] = `
exports[`renders components/cascader/demo/suffix.tsx correctly 1`] = `
Array [
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -1829,7 +1829,7 @@ Array [
<br />,
<br />,
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -1871,7 +1871,7 @@ Array [
<br />,
<br />,
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -1931,7 +1931,7 @@ Array [
<br />,
<br />,
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"

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

@ -866,7 +866,7 @@ exports[`Cascader can be selected in RTL direction 3`] = `
exports[`Cascader legacy props should support showCheckedStrategy child 1`] = `
<div
class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-open"
class="ant-select ant-cascader ant-select-outlined ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-open"
>
<div
class="ant-select-selector"
@ -1043,7 +1043,7 @@ exports[`Cascader legacy props should support showCheckedStrategy child 1`] = `
exports[`Cascader legacy props should support showCheckedStrategy parent 1`] = `
<div
class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-open"
class="ant-select ant-cascader ant-select-outlined ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-open"
>
<div
class="ant-select-selector"
@ -1370,7 +1370,7 @@ exports[`Cascader popup correctly with defaultValue 1`] = `
exports[`Cascader popup correctly with defaultValue RTL 1`] = `
<div
class="ant-select ant-cascader ant-select-rtl ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-open"
class="ant-select ant-cascader ant-select-rtl ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-open"
>
<div
class="ant-select-selector"
@ -1607,7 +1607,7 @@ exports[`Cascader popup correctly with defaultValue RTL 1`] = `
exports[`Cascader rtl render component should be rendered correctly in RTL direction 1`] = `
<div
class="ant-select ant-cascader ant-select-rtl ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-rtl ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -1821,7 +1821,7 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
exports[`Cascader support controlled mode 1`] = `
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"

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

@ -52,7 +52,6 @@ Common props ref：[Common props](/docs/react/common-props)
| allowClear | Show clear button | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: Support object type |
| autoClearSearchValue | Whether the current search will be cleared on selecting an item. Only applies when `multiple` is `true` | boolean | true | 5.9.0 |
| autoFocus | If get focus when component mounted | boolean | false | |
| bordered | Whether has border style | boolean | true | |
| changeOnSelect | (Work on single select) Change value on each selection if set to true, see above demo for details | boolean | false | |
| className | The additional css class | string | - | |
| defaultValue | Initial selected value | string\[] \| number\[] | \[] | |
@ -80,6 +79,7 @@ Common props ref：[Common props](/docs/react/common-props)
| style | The additional style | CSSProperties | - | |
| suffixIcon | The custom suffix icon | ReactNode | - | |
| value | The selected value | string\[] \| number\[] | - | |
| variant | Variants of selector | `outlined` \| `borderless` \| `filled` | `outlined` | 5.13.0 |
| onChange | Callback when finishing cascader select | (value, selectedOptions) => void | - | |
| onDropdownVisibleChange | Callback when popup shown or hidden | (value) => void | - | 4.17.0 |
| multiple | Support multiple or not | boolean | - | 4.17.0 |

16
components/cascader/index.tsx
View File

@ -36,6 +36,9 @@ import useCheckable from './hooks/useCheckable';
import useColumnIcons from './hooks/useColumnIcons';
import CascaderPanel from './Panel';
import useStyle from './style';
import type { SelectVariant } from '../select';
import useVariant from '../_util/hooks/useVariants';
import { SelectVariants } from '../select';
// Align the design since we use `rc-select` in root. This help:
// - List search content will show all content
@ -127,6 +130,7 @@ export type CascaderProps<DataNodeType extends BaseOptionType = any> =
*/
showArrow?: boolean;
disabled?: boolean;
/** @deprecated Use `variant` instead. */
bordered?: boolean;
placement?: SelectCommonPlacement;
suffixIcon?: React.ReactNode;
@ -138,6 +142,11 @@ export type CascaderProps<DataNodeType extends BaseOptionType = any> =
popupClassName?: string;
/** @deprecated Please use `popupClassName` instead */
dropdownClassName?: string;
/**
* @since 5.13.0
* @default "outlined"
*/
variant?: SelectVariant;
};
export interface CascaderRef {
@ -169,6 +178,7 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
showArrow,
builtinPlacements,
style,
variant: customVariant,
...rest
} = props;
@ -201,6 +211,8 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
'deprecated',
'`showArrow` is deprecated which will be removed in next major version. It will be a default behavior, you can hide it by setting `suffixIcon` to null.',
);
warning.deprecated(!('bordered' in props), 'bordered', 'variant');
}
// ==================== Prefix =====================
@ -219,6 +231,8 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
const [variant, enableVariantCls] = useVariant(customVariant, bordered, SelectVariants);
// =================== No Found ====================
const mergedNotFoundContent = notFoundContent || renderEmpty?.('Cascader') || (
<DefaultRenderEmpty componentName="Cascader" />
@ -308,7 +322,7 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
[`${prefixCls}-lg`]: mergedSize === 'large',
[`${prefixCls}-sm`]: mergedSize === 'small',
[`${prefixCls}-rtl`]: isRtl,
[`${prefixCls}-borderless`]: !bordered,
[`${prefixCls}-${variant}`]: enableVariantCls,
[`${prefixCls}-in-form-item`]: isFormItemInput,
},
getStatusClassNames(prefixCls, mergedStatus, hasFeedback),

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

@ -53,7 +53,6 @@ demo:
| allowClear | 支持清除 | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: 支持对象形式 |
| autoClearSearchValue | 是否在选中项后清空搜索框，只在 `multiple` 为 `true` 时有效 | boolean | true | 5.9.0 |
| autoFocus | 自动获取焦点 | boolean | false | |
| bordered | 是否有边框 | boolean | true | |
| changeOnSelect | （单选时生效）当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示 | boolean | false | |
| className | 自定义类名 | string | - | |
| defaultValue | 默认的选中项 | string\[] \| number\[] | \[] | |
@ -81,6 +80,7 @@ demo:
| style | 自定义样式 | CSSProperties | - | |
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
| value | 指定选中项 | string\[] \| number\[] | - | |
| variant | 形态变体 | `outlined` \| `borderless` \| `filled` | `outlined` | 5.13.0 |
| onChange | 选择完成后的回调 | (value, selectedOptions) => void | - | |
| onDropdownVisibleChange | 显示/隐藏浮层的回调 | (value) => void | - | 4.17.0 |
| multiple | 支持多选节点 | boolean | - | 4.17.0 |

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

@ -1086,7 +1086,7 @@ Array [
Expand Icon Position:
</span>,
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="margin: 0px 8px;"
>
<div

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

@ -1074,7 +1074,7 @@ Array [
Expand Icon Position:
</span>,
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="margin:0 8px"
>
<div

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

@ -352,7 +352,7 @@ exports[`ConfigProvider components Anchor prefixCls 1`] = `
exports[`ConfigProvider components AutoComplete configProvider 1`] = `
<div
class="config-select config-select-auto-complete config-select-single config-select-show-search"
class="config-select config-select-outlined config-select-auto-complete config-select-single config-select-show-search"
>
<div
class="config-select-selector"
@ -383,7 +383,7 @@ exports[`ConfigProvider components AutoComplete configProvider 1`] = `
exports[`ConfigProvider components AutoComplete configProvider componentDisabled 1`] = `
<div
class="config-select config-select-auto-complete config-select-single config-select-disabled config-select-show-search"
class="config-select config-select-outlined config-select-auto-complete config-select-single config-select-disabled config-select-show-search"
>
<div
class="config-select-selector"
@ -415,7 +415,7 @@ exports[`ConfigProvider components AutoComplete configProvider componentDisabled
exports[`ConfigProvider components AutoComplete configProvider componentSize large 1`] = `
<div
class="config-select config-select-lg config-select-auto-complete config-select-single config-select-show-search"
class="config-select config-select-lg config-select-outlined config-select-auto-complete config-select-single config-select-show-search"
>
<div
class="config-select-selector"
@ -446,7 +446,7 @@ exports[`ConfigProvider components AutoComplete configProvider componentSize lar
exports[`ConfigProvider components AutoComplete configProvider componentSize middle 1`] = `
<div
class="config-select config-select-auto-complete config-select-single config-select-show-search"
class="config-select config-select-outlined config-select-auto-complete config-select-single config-select-show-search"
>
<div
class="config-select-selector"
@ -477,7 +477,7 @@ exports[`ConfigProvider components AutoComplete configProvider componentSize mid
exports[`ConfigProvider components AutoComplete configProvider componentSize small 1`] = `
<div
class="config-select config-select-sm config-select-auto-complete config-select-single config-select-show-search"
class="config-select config-select-sm config-select-outlined config-select-auto-complete config-select-single config-select-show-search"
>
<div
class="config-select-selector"
@ -508,7 +508,7 @@ exports[`ConfigProvider components AutoComplete configProvider componentSize sma
exports[`ConfigProvider components AutoComplete normal 1`] = `
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-single ant-select-show-search"
>
<div
class="ant-select-selector"
@ -539,7 +539,7 @@ exports[`ConfigProvider components AutoComplete normal 1`] = `
exports[`ConfigProvider components AutoComplete prefixCls 1`] = `
<div
class="prefix-AutoComplete prefix-AutoComplete-auto-complete prefix-AutoComplete-single prefix-AutoComplete-show-search"
class="prefix-AutoComplete prefix-AutoComplete-outlined prefix-AutoComplete-auto-complete prefix-AutoComplete-single prefix-AutoComplete-show-search"
>
<div
class="prefix-AutoComplete-selector"
@ -1588,7 +1588,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
class="config-picker-calendar-header"
>
<div
class="config-select config-picker-calendar-year-select config-select-single config-select-show-arrow"
class="config-select config-select-outlined config-picker-calendar-year-select config-select-single config-select-show-arrow"
>
<div
class="config-select-selector"
@ -1648,7 +1648,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
</span>
</div>
<div
class="config-select config-picker-calendar-month-select config-select-single config-select-show-arrow"
class="config-select config-select-outlined config-picker-calendar-month-select config-select-single config-select-show-arrow"
>
<div
class="config-select-selector"
@ -2529,7 +2529,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
class="config-picker-calendar-header"
>
<div
class="config-select config-picker-calendar-year-select config-select-single config-select-show-arrow"
class="config-select config-select-outlined config-picker-calendar-year-select config-select-single config-select-show-arrow"
>
<div
class="config-select-selector"
@ -2876,7 +2876,7 @@ exports[`ConfigProvider components Calendar configProvider componentDisabled 1`]
class="config-picker-calendar-header"
>
<div
class="config-select config-picker-calendar-year-select config-select-single config-select-show-arrow config-select-disabled"
class="config-select config-select-outlined config-picker-calendar-year-select config-select-single config-select-show-arrow config-select-disabled"
>
<div
class="config-select-selector"
@ -2937,7 +2937,7 @@ exports[`ConfigProvider components Calendar configProvider componentDisabled 1`]
</span>
</div>
<div
class="config-select config-picker-calendar-month-select config-select-single config-select-show-arrow config-select-disabled"
class="config-select config-select-outlined config-picker-calendar-month-select config-select-single config-select-show-arrow config-select-disabled"
>
<div
class="config-select-selector"
@ -3821,7 +3821,7 @@ exports[`ConfigProvider components Calendar configProvider componentDisabled 1`]
class="config-picker-calendar-header"
>
<div
class="config-select config-picker-calendar-year-select config-select-single config-select-show-arrow config-select-disabled"
class="config-select config-select-outlined config-picker-calendar-year-select config-select-single config-select-show-arrow config-select-disabled"
>
<div
class="config-select-selector"
@ -4171,7 +4171,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1
class="config-picker-calendar-header"
>
<div
class="config-select config-select-lg config-picker-calendar-year-select config-select-single config-select-show-arrow"
class="config-select config-select-lg config-select-outlined config-picker-calendar-year-select config-select-single config-select-show-arrow"
>
<div
class="config-select-selector"
@ -4231,7 +4231,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1
</span>
</div>
<div
class="config-select config-select-lg config-picker-calendar-month-select config-select-single config-select-show-arrow"
class="config-select config-select-lg config-select-outlined config-picker-calendar-month-select config-select-single config-select-show-arrow"
>
<div
class="config-select-selector"
@ -5112,7 +5112,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1
class="config-picker-calendar-header"
>
<div
class="config-select config-select-lg config-picker-calendar-year-select config-select-single config-select-show-arrow"
class="config-select config-select-lg config-select-outlined config-picker-calendar-year-select config-select-single config-select-show-arrow"
>
<div
class="config-select-selector"
@ -5459,7 +5459,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize middle
class="config-picker-calendar-header"
>
<div
class="config-select config-picker-calendar-year-select config-select-single config-select-show-arrow"
class="config-select config-select-outlined config-picker-calendar-year-select config-select-single config-select-show-arrow"
>
<div
class="config-select-selector"
@ -5519,7 +5519,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize middle
</span>
</div>
<div
class="config-select config-picker-calendar-month-select config-select-single config-select-show-arrow"
class="config-select config-select-outlined config-picker-calendar-month-select config-select-single config-select-show-arrow"
>
<div
class="config-select-selector"
@ -6400,7 +6400,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize middle
class="config-picker-calendar-header"
>
<div
class="config-select config-picker-calendar-year-select config-select-single config-select-show-arrow"
class="config-select config-select-outlined config-picker-calendar-year-select config-select-single config-select-show-arrow"
>
<div
class="config-select-selector"
@ -6747,7 +6747,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize small 1
class="config-picker-calendar-header"
>
<div
class="config-select config-select-sm config-picker-calendar-year-select config-select-single config-select-show-arrow"
class="config-select config-select-sm config-select-outlined config-picker-calendar-year-select config-select-single config-select-show-arrow"
>
<div
class="config-select-selector"
@ -6807,7 +6807,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize small 1
</span>
</div>
<div
class="config-select config-select-sm config-picker-calendar-month-select config-select-single config-select-show-arrow"
class="config-select config-select-sm config-select-outlined config-picker-calendar-month-select config-select-single config-select-show-arrow"
>
<div
class="config-select-selector"
@ -7688,7 +7688,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize small 1
class="config-picker-calendar-header"
>
<div
class="config-select config-select-sm config-picker-calendar-year-select config-select-single config-select-show-arrow"
class="config-select config-select-sm config-select-outlined config-picker-calendar-year-select config-select-single config-select-show-arrow"
>
<div
class="config-select-selector"
@ -8035,7 +8035,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
class="ant-picker-calendar-header"
>
<div
class="ant-select ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -8095,7 +8095,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
</span>
</div>
<div
class="ant-select ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -8976,7 +8976,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
class="ant-picker-calendar-header"
>
<div
class="ant-select ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -9323,7 +9323,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
class="prefix-Calendar-calendar-header"
>
<div
class="ant-select prefix-Calendar-calendar-year-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined prefix-Calendar-calendar-year-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -9383,7 +9383,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
</span>
</div>
<div
class="ant-select prefix-Calendar-calendar-month-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined prefix-Calendar-calendar-month-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -10264,7 +10264,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
class="prefix-Calendar-calendar-header"
>
<div
class="ant-select prefix-Calendar-calendar-year-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined prefix-Calendar-calendar-year-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -11640,7 +11640,7 @@ exports[`ConfigProvider components Carousel prefixCls 1`] = `
exports[`ConfigProvider components Cascader configProvider 1`] = `
<div
class="config-select config-cascader config-select-single config-select-allow-clear config-select-show-arrow config-select-show-search"
class="config-select config-cascader config-select-outlined config-select-single config-select-allow-clear config-select-show-arrow config-select-show-search"
>
<div
class="config-select-selector"
@ -11697,7 +11697,7 @@ exports[`ConfigProvider components Cascader configProvider 1`] = `
exports[`ConfigProvider components Cascader configProvider componentDisabled 1`] = `
<div
class="config-select config-cascader config-select-single config-select-allow-clear config-select-show-arrow config-select-disabled config-select-show-search"
class="config-select config-cascader config-select-outlined config-select-single config-select-allow-clear config-select-show-arrow config-select-disabled config-select-show-search"
>
<div
class="config-select-selector"
@ -11755,7 +11755,7 @@ exports[`ConfigProvider components Cascader configProvider componentDisabled 1`]
exports[`ConfigProvider components Cascader configProvider componentSize large 1`] = `
<div
class="config-select config-cascader config-select-lg config-select-single config-select-allow-clear config-select-show-arrow config-select-show-search"
class="config-select config-cascader config-select-lg config-select-outlined config-select-single config-select-allow-clear config-select-show-arrow config-select-show-search"
>
<div
class="config-select-selector"
@ -11812,7 +11812,7 @@ exports[`ConfigProvider components Cascader configProvider componentSize large 1
exports[`ConfigProvider components Cascader configProvider componentSize middle 1`] = `
<div
class="config-select config-cascader config-select-single config-select-allow-clear config-select-show-arrow config-select-show-search"
class="config-select config-cascader config-select-outlined config-select-single config-select-allow-clear config-select-show-arrow config-select-show-search"
>
<div
class="config-select-selector"
@ -11869,7 +11869,7 @@ exports[`ConfigProvider components Cascader configProvider componentSize middle
exports[`ConfigProvider components Cascader configProvider componentSize small 1`] = `
<div
class="config-select config-cascader config-select-sm config-select-single config-select-allow-clear config-select-show-arrow config-select-show-search"
class="config-select config-cascader config-select-sm config-select-outlined config-select-single config-select-allow-clear config-select-show-arrow config-select-show-search"
>
<div
class="config-select-selector"
@ -11926,7 +11926,7 @@ exports[`ConfigProvider components Cascader configProvider componentSize small 1
exports[`ConfigProvider components Cascader normal 1`] = `
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -11983,7 +11983,7 @@ exports[`ConfigProvider components Cascader normal 1`] = `
exports[`ConfigProvider components Cascader prefixCls 1`] = `
<div
class="prefix-Cascader prefix-Cascader-single prefix-Cascader-allow-clear prefix-Cascader-show-arrow prefix-Cascader-show-search"
class="prefix-Cascader prefix-Cascader-outlined prefix-Cascader-single prefix-Cascader-allow-clear prefix-Cascader-show-arrow prefix-Cascader-show-search"
>
<div
class="prefix-Cascader-selector"
@ -18986,7 +18986,7 @@ exports[`ConfigProvider components Pagination configProvider 1`] = `
>
<div
aria-label="Page Size"
class="config-select config-pagination-options-size-changer config-select-single config-select-show-arrow config-select-show-search"
class="config-select config-select-outlined config-pagination-options-size-changer config-select-single config-select-show-arrow config-select-show-search"
>
<div
class="config-select-selector"
@ -19128,7 +19128,7 @@ exports[`ConfigProvider components Pagination configProvider 1`] = `
>
<div
aria-label="Page Size"
class="config-select config-select-sm config-pagination-options-size-changer config-select-single config-select-show-arrow config-select-show-search"
class="config-select config-select-sm config-select-outlined config-pagination-options-size-changer config-select-single config-select-show-arrow config-select-show-search"
>
<div
class="config-select-selector"
@ -19275,7 +19275,7 @@ exports[`ConfigProvider components Pagination configProvider componentDisabled 1
>
<div
aria-label="Page Size"
class="config-select config-pagination-options-size-changer config-select-single config-select-show-arrow config-select-disabled config-select-show-search"
class="config-select config-select-outlined config-pagination-options-size-changer config-select-single config-select-show-arrow config-select-disabled config-select-show-search"
>
<div
class="config-select-selector"
@ -19418,7 +19418,7 @@ exports[`ConfigProvider components Pagination configProvider componentDisabled 1
>
<div
aria-label="Page Size"
class="config-select config-select-sm config-pagination-options-size-changer config-select-single config-select-show-arrow config-select-disabled config-select-show-search"
class="config-select config-select-sm config-select-outlined config-pagination-options-size-changer config-select-single config-select-show-arrow config-select-disabled config-select-show-search"
>
<div
class="config-select-selector"
@ -19566,7 +19566,7 @@ exports[`ConfigProvider components Pagination configProvider componentSize large
>
<div
aria-label="Page Size"
class="config-select config-pagination-options-size-changer config-select-single config-select-show-arrow config-select-show-search"
class="config-select config-select-outlined config-pagination-options-size-changer config-select-single config-select-show-arrow config-select-show-search"
>
<div
class="config-select-selector"
@ -19708,7 +19708,7 @@ exports[`ConfigProvider components Pagination configProvider componentSize large
>
<div
aria-label="Page Size"
class="config-select config-select-sm config-pagination-options-size-changer config-select-single config-select-show-arrow config-select-show-search"
class="config-select config-select-sm config-select-outlined config-pagination-options-size-changer config-select-single config-select-show-arrow config-select-show-search"
>
<div
class="config-select-selector"
@ -19855,7 +19855,7 @@ exports[`ConfigProvider components Pagination configProvider componentSize middl
>
<div
aria-label="Page Size"
class="config-select config-pagination-options-size-changer config-select-single config-select-show-arrow config-select-show-search"
class="config-select config-select-outlined config-pagination-options-size-changer config-select-single config-select-show-arrow config-select-show-search"
>
<div
class="config-select-selector"
@ -19997,7 +19997,7 @@ exports[`ConfigProvider components Pagination configProvider componentSize middl
>
<div
aria-label="Page Size"
class="config-select config-select-sm config-pagination-options-size-changer config-select-single config-select-show-arrow config-select-show-search"
class="config-select config-select-sm config-select-outlined config-pagination-options-size-changer config-select-single config-select-show-arrow config-select-show-search"
>
<div
class="config-select-selector"
@ -20144,7 +20144,7 @@ exports[`ConfigProvider components Pagination configProvider componentSize small
>
<div
aria-label="Page Size"
class="config-select config-select-sm config-pagination-options-size-changer config-select-single config-select-show-arrow config-select-show-search"
class="config-select config-select-sm config-select-outlined config-pagination-options-size-changer config-select-single config-select-show-arrow config-select-show-search"
>
<div
class="config-select-selector"
@ -20286,7 +20286,7 @@ exports[`ConfigProvider components Pagination configProvider componentSize small
>
<div
aria-label="Page Size"
class="config-select config-select-sm config-pagination-options-size-changer config-select-single config-select-show-arrow config-select-show-search"
class="config-select config-select-sm config-select-outlined config-pagination-options-size-changer config-select-single config-select-show-arrow config-select-show-search"
>
<div
class="config-select-selector"
@ -20433,7 +20433,7 @@ exports[`ConfigProvider components Pagination normal 1`] = `
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -20575,7 +20575,7 @@ exports[`ConfigProvider components Pagination normal 1`] = `
>
<div
aria-label="Page Size"
class="ant-select ant-select-sm ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-sm ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -20722,7 +20722,7 @@ exports[`ConfigProvider components Pagination prefixCls 1`] = `
>
<div
aria-label="Page Size"
class="ant-select prefix-Pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined prefix-Pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -20864,7 +20864,7 @@ exports[`ConfigProvider components Pagination prefixCls 1`] = `
>
<div
aria-label="Page Size"
class="ant-select ant-select-sm prefix-Pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-sm ant-select-outlined prefix-Pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -24369,7 +24369,7 @@ exports[`ConfigProvider components Rate prefixCls 1`] = `
exports[`ConfigProvider components Select configProvider 1`] = `
<div
class="config-select config-select-single config-select-show-arrow config-select-open"
class="config-select config-select-outlined config-select-single config-select-show-arrow config-select-open"
>
<div
class="config-select-selector"
@ -24496,7 +24496,7 @@ exports[`ConfigProvider components Select configProvider 1`] = `
exports[`ConfigProvider components Select configProvider componentDisabled 1`] = `
<div
class="config-select config-select-single config-select-show-arrow config-select-disabled"
class="config-select config-select-outlined config-select-single config-select-show-arrow config-select-disabled"
>
<div
class="config-select-selector"
@ -24557,7 +24557,7 @@ exports[`ConfigProvider components Select configProvider componentDisabled 1`] =
exports[`ConfigProvider components Select configProvider componentSize large 1`] = `
<div
class="config-select config-select-lg config-select-single config-select-show-arrow config-select-open"
class="config-select config-select-lg config-select-outlined config-select-single config-select-show-arrow config-select-open"
>
<div
class="config-select-selector"
@ -24684,7 +24684,7 @@ exports[`ConfigProvider components Select configProvider componentSize large 1`]
exports[`ConfigProvider components Select configProvider componentSize middle 1`] = `
<div
class="config-select config-select-single config-select-show-arrow config-select-open"
class="config-select config-select-outlined config-select-single config-select-show-arrow config-select-open"
>
<div
class="config-select-selector"
@ -24811,7 +24811,7 @@ exports[`ConfigProvider components Select configProvider componentSize middle 1`
exports[`ConfigProvider components Select configProvider componentSize small 1`] = `
<div
class="config-select config-select-sm config-select-single config-select-show-arrow config-select-open"
class="config-select config-select-sm config-select-outlined config-select-single config-select-show-arrow config-select-open"
>
<div
class="config-select-selector"
@ -24938,7 +24938,7 @@ exports[`ConfigProvider components Select configProvider componentSize small 1`]
exports[`ConfigProvider components Select normal 1`] = `
<div
class="ant-select ant-select-single ant-select-show-arrow ant-select-open"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow ant-select-open"
>
<div
class="ant-select-selector"
@ -25065,7 +25065,7 @@ exports[`ConfigProvider components Select normal 1`] = `
exports[`ConfigProvider components Select prefixCls 1`] = `
<div
class="prefix-Select prefix-Select-single prefix-Select-show-arrow prefix-Select-open"
class="prefix-Select prefix-Select-outlined prefix-Select-single prefix-Select-show-arrow prefix-Select-open"
>
<div
class="prefix-Select-selector"
@ -41287,7 +41287,7 @@ exports[`ConfigProvider components Tree prefixCls 1`] = `
exports[`ConfigProvider components TreeSelect configProvider 1`] = `
<div
class="config-select config-tree-select config-select-single config-select-show-arrow config-select-open"
class="config-select config-tree-select config-select-outlined config-select-single config-select-show-arrow config-select-open"
>
<div
class="config-select-selector"
@ -41422,7 +41422,7 @@ exports[`ConfigProvider components TreeSelect configProvider 1`] = `
exports[`ConfigProvider components TreeSelect configProvider componentDisabled 1`] = `
<div
class="config-select config-tree-select config-select-single config-select-show-arrow config-select-disabled"
class="config-select config-tree-select config-select-outlined config-select-single config-select-show-arrow config-select-disabled"
>
<div
class="config-select-selector"
@ -41483,7 +41483,7 @@ exports[`ConfigProvider components TreeSelect configProvider componentDisabled 1
exports[`ConfigProvider components TreeSelect configProvider componentSize large 1`] = `
<div
class="config-select config-tree-select config-select-lg config-select-single config-select-show-arrow config-select-open"
class="config-select config-tree-select config-select-lg config-select-outlined config-select-single config-select-show-arrow config-select-open"
>
<div
class="config-select-selector"
@ -41618,7 +41618,7 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize large
exports[`ConfigProvider components TreeSelect configProvider componentSize middle 1`] = `
<div
class="config-select config-tree-select config-select-single config-select-show-arrow config-select-open"
class="config-select config-tree-select config-select-outlined config-select-single config-select-show-arrow config-select-open"
>
<div
class="config-select-selector"
@ -41753,7 +41753,7 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize middl
exports[`ConfigProvider components TreeSelect configProvider componentSize small 1`] = `
<div
class="config-select config-tree-select config-select-sm config-select-single config-select-show-arrow config-select-open"
class="config-select config-tree-select config-select-sm config-select-outlined config-select-single config-select-show-arrow config-select-open"
>
<div
class="config-select-selector"
@ -41888,7 +41888,7 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize small
exports[`ConfigProvider components TreeSelect normal 1`] = `
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow ant-select-open"
class="ant-select ant-tree-select ant-select-outlined ant-select-single ant-select-show-arrow ant-select-open"
>
<div
class="ant-select-selector"
@ -42023,7 +42023,7 @@ exports[`ConfigProvider components TreeSelect normal 1`] = `
exports[`ConfigProvider components TreeSelect prefixCls 1`] = `
<div
class="prefix-TreeSelect prefix-TreeSelect-single prefix-TreeSelect-show-arrow prefix-TreeSelect-open"
class="prefix-TreeSelect prefix-TreeSelect-outlined prefix-TreeSelect-single prefix-TreeSelect-show-arrow prefix-TreeSelect-open"
>
<div
class="prefix-TreeSelect-selector"

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

@ -3,7 +3,7 @@
exports[`ConfigProvider.Popup disable virtual if dropdownMatchSelectWidth is false 1`] = `
<div>
<div
class="ant-select ant-select-single ant-select-show-arrow ant-select-open"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow ant-select-open"
>
<div
class="ant-select-selector"
@ -61,7 +61,7 @@ exports[`ConfigProvider.Popup disable virtual if dropdownMatchSelectWidth is fal
</span>
</div>
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow ant-select-open"
class="ant-select ant-tree-select ant-select-outlined ant-select-single ant-select-show-arrow ant-select-open"
>
<div
class="ant-select-selector"
@ -118,7 +118,7 @@ exports[`ConfigProvider.Popup disable virtual if dropdownMatchSelectWidth is fal
</span>
</div>
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-open"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-open"
>
<div
class="ant-select-selector"
@ -180,7 +180,7 @@ exports[`ConfigProvider.Popup disable virtual if dropdownMatchSelectWidth is fal
exports[`ConfigProvider.Popup disable virtual if is false 1`] = `
<div>
<div
class="ant-select ant-select-single ant-select-show-arrow ant-select-open"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow ant-select-open"
>
<div
class="ant-select-selector"
@ -238,7 +238,7 @@ exports[`ConfigProvider.Popup disable virtual if is false 1`] = `
</span>
</div>
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow ant-select-open"
class="ant-select ant-tree-select ant-select-outlined ant-select-single ant-select-show-arrow ant-select-open"
>
<div
class="ant-select-selector"
@ -295,7 +295,7 @@ exports[`ConfigProvider.Popup disable virtual if is false 1`] = `
</span>
</div>
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-open"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-open"
>
<div
class="ant-select-selector"
@ -357,7 +357,7 @@ exports[`ConfigProvider.Popup disable virtual if is false 1`] = `
exports[`ConfigProvider.Popup disable virtual if popupMatchSelectWidth is false 1`] = `
<div>
<div
class="ant-select ant-select-single ant-select-show-arrow ant-select-open"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow ant-select-open"
>
<div
class="ant-select-selector"
@ -415,7 +415,7 @@ exports[`ConfigProvider.Popup disable virtual if popupMatchSelectWidth is false
</span>
</div>
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow ant-select-open"
class="ant-select ant-tree-select ant-select-outlined ant-select-single ant-select-show-arrow ant-select-open"
>
<div
class="ant-select-selector"
@ -472,7 +472,7 @@ exports[`ConfigProvider.Popup disable virtual if popupMatchSelectWidth is false
</span>
</div>
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-open"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-open"
>
<div
class="ant-select-selector"

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

@ -57625,7 +57625,7 @@ exports[`renders components/date-picker/demo/switchable.tsx extend context corre
class="ant-space-item"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"

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

@ -4438,7 +4438,7 @@ exports[`renders components/date-picker/demo/switchable.tsx correctly 1`] = `
class="ant-space-item"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"

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

@ -1015,7 +1015,7 @@ Array [
>
<div
aria-required="true"
class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -1192,7 +1192,7 @@ Array [
>
<div
aria-required="true"
class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -1374,7 +1374,7 @@ Array [
>
<div
aria-required="true"
class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"

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

@ -122,7 +122,7 @@ Array [
class="ant-space-item"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width: 200px;"
>
<div
@ -231,7 +231,7 @@ Array [
class="ant-space-item"
>
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width: 200px;"
>
<div
@ -339,7 +339,7 @@ Array [
class="ant-space-item"
>
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
style="width: 200px;"
>
<div

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

@ -120,7 +120,7 @@ Array [
class="ant-space-item"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width:200px"
>
<div
@ -188,7 +188,7 @@ Array [
class="ant-space-item"
>
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width:200px"
>
<div
@ -256,7 +256,7 @@ Array [
class="ant-space-item"
>
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
style="width:200px"
>
<div

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

@ -87,7 +87,7 @@ Array [
>
<div
aria-required="true"
class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -353,7 +353,7 @@ Array [
>
<div
aria-required="true"
class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -949,7 +949,7 @@ Array [
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-multiple ant-select-show-arrow ant-select-show-search"
style="width: 70%;"
>
<div
@ -1379,7 +1379,7 @@ Array [
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-multiple ant-select-show-arrow ant-select-show-search"
style="width: 70%;"
>
<div
@ -1715,7 +1715,7 @@ exports[`renders components/form/demo/control-hooks.tsx extend context correctly
>
<div
aria-required="true"
class="ant-select ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -2151,7 +2151,7 @@ exports[`renders components/form/demo/customized-form-controls.tsx extend contex
value="0"
/>
<div
class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-single ant-select-show-arrow"
style="width: 80px; margin: 0px 8px;"
>
<div
@ -2678,7 +2678,7 @@ Array [
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow ant-select-disabled"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-single ant-select-show-arrow ant-select-disabled"
>
<div
class="ant-select-selector"
@ -2821,7 +2821,7 @@ Array [
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow ant-select-disabled"
class="ant-select ant-tree-select ant-select-outlined ant-select-in-form-item ant-select-single ant-select-show-arrow ant-select-disabled"
>
<div
class="ant-select-selector"
@ -3004,7 +3004,7 @@ Array [
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-cascader ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-disabled"
class="ant-select ant-cascader ant-select-outlined ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-disabled"
>
<div
class="ant-select-selector"
@ -8955,7 +8955,7 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
>
<div
aria-required="true"
class="ant-select ant-cascader ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -9172,7 +9172,7 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
class="ant-input-group-addon"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width: 70px;"
>
<div
@ -9439,7 +9439,7 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
class="ant-input-number-group-addon"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width: 70px;"
>
<div
@ -9612,7 +9612,7 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
>
<div
aria-required="true"
class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
>
<div
class="ant-select-selector"
@ -9738,7 +9738,7 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
>
<div
aria-required="true"
class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -10519,7 +10519,7 @@ exports[`renders components/form/demo/size.tsx extend context correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -10661,7 +10661,7 @@ exports[`renders components/form/demo/size.tsx extend context correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-in-form-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -10843,7 +10843,7 @@ exports[`renders components/form/demo/size.tsx extend context correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-cascader ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -19743,7 +19743,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
>
<div
aria-required="true"
class="ant-select ant-select-in-form-item ant-select-has-feedback ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-has-feedback ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -19915,7 +19915,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
>
<div
aria-required="true"
class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-multiple ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -25543,7 +25543,7 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-in-form-item ant-select-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -25753,7 +25753,7 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-cascader ant-select-in-form-item ant-select-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-in-form-item ant-select-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -25917,7 +25917,7 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-tree-select ant-select-in-form-item ant-select-status-warning ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-in-form-item ant-select-status-warning ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"

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

@ -87,7 +87,7 @@ Array [
>
<div
aria-required="true"
class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -273,7 +273,7 @@ Array [
>
<div
aria-required="true"
class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -785,7 +785,7 @@ Array [
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-multiple ant-select-show-arrow ant-select-show-search"
style="width:70%"
>
<div
@ -1110,7 +1110,7 @@ Array [
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-multiple ant-select-show-arrow ant-select-show-search"
style="width:70%"
>
<div
@ -1339,7 +1339,7 @@ exports[`renders components/form/demo/control-hooks.tsx correctly 1`] = `
>
<div
aria-required="true"
class="ant-select ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -1632,7 +1632,7 @@ exports[`renders components/form/demo/customized-form-controls.tsx correctly 1`]
value="0"
/>
<div
class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-single ant-select-show-arrow"
style="width:80px;margin:0 8px"
>
<div
@ -2074,7 +2074,7 @@ Array [
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow ant-select-disabled"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-single ant-select-show-arrow ant-select-disabled"
>
<div
class="ant-select-selector"
@ -2161,7 +2161,7 @@ Array [
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow ant-select-disabled"
class="ant-select ant-tree-select ant-select-outlined ant-select-in-form-item ant-select-single ant-select-show-arrow ant-select-disabled"
>
<div
class="ant-select-selector"
@ -2248,7 +2248,7 @@ Array [
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-cascader ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-disabled"
class="ant-select ant-cascader ant-select-outlined ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-disabled"
>
<div
class="ant-select-selector"
@ -5896,7 +5896,7 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
>
<div
aria-required="true"
class="ant-select ant-cascader ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -6025,7 +6025,7 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
class="ant-input-group-addon"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width:70px"
>
<div
@ -6212,7 +6212,7 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
class="ant-input-number-group-addon"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width:70px"
>
<div
@ -6305,7 +6305,7 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
>
<div
aria-required="true"
class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
>
<div
class="ant-select-selector"
@ -6419,7 +6419,7 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
>
<div
aria-required="true"
class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -7061,7 +7061,7 @@ exports[`renders components/form/demo/size.tsx correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -7147,7 +7147,7 @@ exports[`renders components/form/demo/size.tsx correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-in-form-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -7233,7 +7233,7 @@ exports[`renders components/form/demo/size.tsx correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-cascader ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -8477,7 +8477,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
>
<div
aria-required="true"
class="ant-select ant-select-in-form-item ant-select-has-feedback ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-has-feedback ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -8569,7 +8569,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
>
<div
aria-required="true"
class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-multiple ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -10639,7 +10639,7 @@ exports[`renders components/form/demo/validate-static.tsx correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-in-form-item ant-select-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -10751,7 +10751,7 @@ exports[`renders components/form/demo/validate-static.tsx correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-cascader ant-select-in-form-item ant-select-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-in-form-item ant-select-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -10863,7 +10863,7 @@ exports[`renders components/form/demo/validate-static.tsx correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-tree-select ant-select-in-form-item ant-select-status-warning ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-in-form-item ant-select-status-warning ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"

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

@ -288,7 +288,7 @@ exports[`Form form should support disabled 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow ant-select-disabled"
class="ant-select ant-select-outlined ant-select-in-form-item ant-select-single ant-select-show-arrow ant-select-disabled"
>
<div
class="ant-select-selector"
@ -376,7 +376,7 @@ exports[`Form form should support disabled 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow ant-select-disabled"
class="ant-select ant-tree-select ant-select-outlined ant-select-in-form-item ant-select-single ant-select-show-arrow ant-select-disabled"
>
<div
class="ant-select-selector"
@ -464,7 +464,7 @@ exports[`Form form should support disabled 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-cascader ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-disabled"
class="ant-select ant-cascader ant-select-outlined ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-disabled"
>
<div
class="ant-select-selector"

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

@ -113,7 +113,7 @@ exports[`renders components/input-number/demo/addon.tsx extend context correctly
class="ant-input-number-group-addon"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width: 60px;"
>
<div
@ -332,7 +332,7 @@ exports[`renders components/input-number/demo/addon.tsx extend context correctly
class="ant-input-number-group-addon"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width: 60px;"
>
<div
@ -632,7 +632,7 @@ exports[`renders components/input-number/demo/addon.tsx extend context correctly
class="ant-input-number-group-addon"
>
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
style="width: 150px;"
>
<div

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

@ -113,7 +113,7 @@ exports[`renders components/input-number/demo/addon.tsx correctly 1`] = `
class="ant-input-number-group-addon"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width:60px"
>
<div
@ -251,7 +251,7 @@ exports[`renders components/input-number/demo/addon.tsx correctly 1`] = `
class="ant-input-number-group-addon"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width:60px"
>
<div
@ -436,7 +436,7 @@ exports[`renders components/input-number/demo/addon.tsx correctly 1`] = `
class="ant-input-number-group-addon"
>
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
style="width:150px"
>
<div

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

@ -44,7 +44,7 @@ exports[`renders components/input/demo/addon.tsx extend context correctly 1`] =
class="ant-input-group-addon"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -193,7 +193,7 @@ exports[`renders components/input/demo/addon.tsx extend context correctly 1`] =
class="ant-input-group-addon"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -454,7 +454,7 @@ exports[`renders components/input/demo/addon.tsx extend context correctly 1`] =
class="ant-input-group-addon"
>
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
style="width: 150px;"
>
<div
@ -2890,7 +2890,7 @@ Array [
</div>
</div>,
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width: 100px;"
>
<div
@ -3031,7 +3031,7 @@ Array [
</span>
</div>,
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width: 100px;"
>
<div
@ -3170,7 +3170,7 @@ Array [
</span>
</div>,
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width: 100px;"
>
<div
@ -3308,7 +3308,7 @@ Array [
</span>
</div>,
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width: 100px;"
>
<div
@ -3423,7 +3423,7 @@ Array [
</span>
</div>,
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -5054,7 +5054,7 @@ Array [
</label>
</div>,
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-single ant-select-show-search"
style="width: 100px;"
>
<div
@ -5635,7 +5635,7 @@ exports[`renders components/input/demo/compact-style.tsx extend context correctl
class="ant-space-compact"
>
<div
class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -6586,7 +6586,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
class="ant-input-group ant-input-group-compact"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -6902,7 +6902,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
class="ant-input-group ant-input-group-compact"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -8936,7 +8936,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
class="ant-input-group ant-input-group-compact"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -9076,7 +9076,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
</span>
</div>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -9221,7 +9221,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
class="ant-input-group ant-input-group-compact"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -9388,7 +9388,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
class="ant-input-group ant-input-group-compact"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width: 30%;"
>
<div
@ -9529,7 +9529,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
</span>
</div>
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-single ant-select-show-search"
style="width: 70%;"
>
<div
@ -9636,7 +9636,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
class="ant-input-group ant-input-group-compact"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width: 30%;"
>
<div
@ -9777,7 +9777,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
</span>
</div>
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
style="width: 70%;"
>
<div

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

@ -44,7 +44,7 @@ exports[`renders components/input/demo/addon.tsx correctly 1`] = `
class="ant-input-group-addon"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -112,7 +112,7 @@ exports[`renders components/input/demo/addon.tsx correctly 1`] = `
class="ant-input-group-addon"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -258,7 +258,7 @@ exports[`renders components/input/demo/addon.tsx correctly 1`] = `
class="ant-input-group-addon"
>
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
style="width:150px"
>
<div
@ -675,7 +675,7 @@ Array [
</div>
</div>,
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width:100px"
>
<div
@ -735,7 +735,7 @@ Array [
</span>
</div>,
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width:100px"
>
<div
@ -793,7 +793,7 @@ Array [
</span>
</div>,
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width:100px"
>
<div
@ -850,7 +850,7 @@ Array [
</span>
</div>,
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width:100px"
>
<div
@ -907,7 +907,7 @@ Array [
</span>
</div>,
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -1156,7 +1156,7 @@ Array [
</label>
</div>,
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-single ant-select-show-search"
style="width:100px"
>
<div
@ -1711,7 +1711,7 @@ exports[`renders components/input/demo/compact-style.tsx correctly 1`] = `
class="ant-space-compact"
>
<div
class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -2554,7 +2554,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
class="ant-input-group ant-input-group-compact"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -2789,7 +2789,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
class="ant-input-group ant-input-group-compact"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -3085,7 +3085,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
class="ant-input-group ant-input-group-compact"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -3144,7 +3144,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
</span>
</div>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -3208,7 +3208,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
class="ant-input-group ant-input-group-compact"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -3294,7 +3294,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
class="ant-input-group ant-input-group-compact"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width:30%"
>
<div
@ -3354,7 +3354,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
</span>
</div>
<div
class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-single ant-select-show-search"
style="width:70%"
>
<div
@ -3389,7 +3389,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
class="ant-input-group ant-input-group-compact"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width:30%"
>
<div
@ -3449,7 +3449,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
</span>
</div>
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
style="width:70%"
>
<div

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

@ -300,7 +300,7 @@ exports[`List.pagination should change page size work 1`] = `
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -445,7 +445,7 @@ exports[`List.pagination should change page size work 2`] = `
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-open ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-open ant-select-show-search"
>
<div
class="ant-select-selector"
@ -704,7 +704,7 @@ exports[`List.pagination should default work 1`] = `
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"

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

File diff suppressed because it is too large Load Diff

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

@ -182,7 +182,7 @@ exports[`renders components/pagination/demo/all.tsx extend context correctly 1`]
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -664,7 +664,7 @@ Array [
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -1002,7 +1002,7 @@ Array [
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-disabled ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-disabled ant-select-show-search"
>
<div
class="ant-select-selector"
@ -1308,7 +1308,7 @@ Array [
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -1657,7 +1657,7 @@ Array [
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-disabled ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-disabled ant-select-show-search"
>
<div
class="ant-select-selector"
@ -2086,7 +2086,7 @@ exports[`renders components/pagination/demo/itemRender.tsx extend context correc
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -2429,7 +2429,7 @@ Array [
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -2778,7 +2778,7 @@ Array [
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-disabled ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-disabled ant-select-show-search"
>
<div
class="ant-select-selector"
@ -3209,7 +3209,7 @@ Array [
>
<div
aria-label="Page Size"
class="ant-select ant-select-sm ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-sm ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -3641,7 +3641,7 @@ Array [
>
<div
aria-label="Page Size"
class="ant-select ant-select-sm ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-disabled ant-select-show-search"
class="ant-select ant-select-sm ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-disabled ant-select-show-search"
>
<div
class="ant-select-selector"
@ -4046,7 +4046,7 @@ exports[`renders components/pagination/demo/more.tsx extend context correctly 1`
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -4522,7 +4522,7 @@ Array [
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -4816,7 +4816,7 @@ Array [
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -5160,7 +5160,7 @@ Array [
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -5498,7 +5498,7 @@ Array [
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-disabled ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-disabled ant-select-show-search"
>
<div
class="ant-select-selector"
@ -5837,7 +5837,7 @@ Array [
>
<div
aria-label="Page Size"
class="ant-select ant-select-sm ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-sm ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -6175,7 +6175,7 @@ Array [
>
<div
aria-label="Page Size"
class="ant-select ant-select-sm ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-disabled ant-select-show-search"
class="ant-select ant-select-sm ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-disabled ant-select-show-search"
>
<div
class="ant-select-selector"

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

@ -182,7 +182,7 @@ exports[`renders components/pagination/demo/all.tsx correctly 1`] = `
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -557,7 +557,7 @@ Array [
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -792,7 +792,7 @@ Array [
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-disabled ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-disabled ant-select-show-search"
>
<div
class="ant-select-selector"
@ -993,7 +993,7 @@ Array [
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -1239,7 +1239,7 @@ Array [
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-disabled ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-disabled ant-select-show-search"
>
<div
class="ant-select-selector"
@ -1561,7 +1561,7 @@ exports[`renders components/pagination/demo/itemRender.tsx correctly 1`] = `
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -1799,7 +1799,7 @@ Array [
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -2045,7 +2045,7 @@ Array [
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-disabled ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-disabled ant-select-show-search"
>
<div
class="ant-select-selector"
@ -2371,7 +2371,7 @@ Array [
>
<div
aria-label="Page Size"
class="ant-select ant-select-sm ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-sm ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -2700,7 +2700,7 @@ Array [
>
<div
aria-label="Page Size"
class="ant-select ant-select-sm ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-disabled ant-select-show-search"
class="ant-select ant-select-sm ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-disabled ant-select-show-search"
>
<div
class="ant-select-selector"
@ -3000,7 +3000,7 @@ exports[`renders components/pagination/demo/more.tsx correctly 1`] = `
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -3369,7 +3369,7 @@ Array [
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -3560,7 +3560,7 @@ Array [
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -3799,7 +3799,7 @@ Array [
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -4034,7 +4034,7 @@ Array [
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-disabled ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-disabled ant-select-show-search"
>
<div
class="ant-select-selector"
@ -4270,7 +4270,7 @@ Array [
>
<div
aria-label="Page Size"
class="ant-select ant-select-sm ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-sm ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -4505,7 +4505,7 @@ Array [
>
<div
aria-label="Page Size"
class="ant-select ant-select-sm ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-disabled ant-select-show-search"
class="ant-select ant-select-sm ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-disabled ant-select-show-search"
>
<div
class="ant-select-selector"

2
components/pagination/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -254,7 +254,7 @@ exports[`Pagination ConfigProvider should be rendered correctly when componentSi
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"

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

@ -1327,7 +1327,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
</div>
</div>
<div
class="ant-select ant-select-sm ant-select-single ant-select-show-arrow"
class="ant-select ant-select-sm ant-select-outlined ant-select-single ant-select-show-arrow"
style="width: 150px;"
>
<div

2
components/segmented/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -1307,7 +1307,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
</div>
</div>
<div
class="ant-select ant-select-sm ant-select-single ant-select-show-arrow"
class="ant-select ant-select-sm ant-select-outlined ant-select-single ant-select-show-arrow"
style="width:150px"
>
<div

2116
components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

File diff suppressed because it is too large Load Diff

1036
components/select/__tests__/__snapshots__/demo.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

6
components/select/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -2,7 +2,7 @@
exports[`Select Deprecated should ignore mode="combobox" 1`] = `
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -62,7 +62,7 @@ exports[`Select Deprecated should ignore mode="combobox" 1`] = `
exports[`Select Select Custom Icons should support customized icons 1`] = `
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -122,7 +122,7 @@ exports[`Select Select Custom Icons should support customized icons 1`] = `
exports[`Select rtl render component should be rendered correctly in RTL direction 1`] = `
<div
class="ant-select ant-select-rtl ant-select-single ant-select-show-arrow"
class="ant-select ant-select-rtl ant-select-outlined ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"

7
components/select/demo/filled-debug.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
可选 `outlined` `filled` `borderless` 三种形态。
## en-US
There are `outlined` `fille` and `borderless`, totally three variants to choose from.

89
components/select/demo/filled-debug.tsx Normal file
View File

@ -0,0 +1,89 @@
import React from 'react';
import { Flex, Select } from 'antd';
const App: React.FC = () => (
<Flex gap={12} vertical>
<Flex gap={8}>
<Select
value="lucy"
disabled
variant="filled"
style={{ flex: 1 }}
options={[
{ value: 'jack', label: 'Jack' },
{ value: 'lucy', label: 'Lucy' },
{ value: 'Yiminghe', label: 'yiminghe' },
]}
/>
<Select
value="lucy"
disabled
mode="multiple"
variant="filled"
placeholder="Outlined"
style={{ flex: 1 }}
options={[
{ value: 'jack', label: 'Jack' },
{ value: 'lucy', label: 'Lucy' },
{ value: 'Yiminghe', label: 'yiminghe' },
]}
/>
</Flex>
<Flex gap={8}>
<Select
value="lucy"
status="error"
variant="filled"
style={{ flex: 1 }}
options={[
{ value: 'jack', label: 'Jack' },
{ value: 'lucy', label: 'Lucy' },
{ value: 'Yiminghe', label: 'yiminghe' },
]}
/>
<Select
value="lucy"
status="error"
mode="multiple"
variant="filled"
placeholder="Outlined"
style={{ flex: 1 }}
options={[
{ value: 'jack', label: 'Jack' },
{ value: 'lucy', label: 'Lucy' },
{ value: 'Yiminghe', label: 'yiminghe' },
]}
/>
</Flex>
<Flex gap={8}>
<Select
disabled
value="lucy"
status="error"
variant="filled"
style={{ flex: 1 }}
options={[
{ value: 'jack', label: 'Jack' },
{ value: 'lucy', label: 'Lucy' },
{ value: 'Yiminghe', label: 'yiminghe' },
]}
/>
<Select
disabled
value="lucy"
status="error"
mode="multiple"
variant="filled"
placeholder="Outlined"
style={{ flex: 1 }}
options={[
{ value: 'jack', label: 'Jack' },
{ value: 'lucy', label: 'Lucy' },
{ value: 'Yiminghe', label: 'yiminghe' },
]}
/>
</Flex>
</Flex>
);
export default App;

4
components/select/demo/variant.md
View File

@ -1,7 +1,7 @@
## zh-CN
形态变体
可选 `outlined` `filled` `borderless` 三种形态。
## en-US
Variants of Select.
There are `outlined` `fille` and `borderless`, totally three variants to choose from.

93
components/select/demo/variant.tsx
View File

@ -1,26 +1,79 @@
import React from 'react';
import { Select, Space } from 'antd';
import { Flex, Select } from 'antd';
const App: React.FC = () => (
<Space wrap>
<Select
placeholder="Borderless"
style={{ width: 120 }}
variant="borderless"
options={[
{ value: 'jack', label: 'Jack' },
{ value: 'lucy', label: 'Lucy' },
{ value: 'Yiminghe', label: 'yiminghe' },
]}
/>
<Select
placeholder="Borderless"
style={{ width: 120 }}
disabled
variant="borderless"
options={[{ value: 'lucy', label: 'Lucy' }]}
/>
</Space>
<Flex gap={12} vertical>
<Flex gap={8}>
<Select
placeholder="Outlined"
style={{ flex: 1 }}
options={[
{ value: 'jack', label: 'Jack' },
{ value: 'lucy', label: 'Lucy' },
{ value: 'Yiminghe', label: 'yiminghe' },
]}
/>
<Select
mode="multiple"
defaultValue={['lucy']}
placeholder="Outlined"
style={{ flex: 1 }}
options={[
{ value: 'jack', label: 'Jack' },
{ value: 'lucy', label: 'Lucy' },
{ value: 'Yiminghe', label: 'yiminghe' },
]}
/>
</Flex>
<Flex gap={8}>
<Select
placeholder="Filled"
variant="filled"
style={{ flex: 1 }}
options={[
{ value: 'jack', label: 'Jack' },
{ value: 'lucy', label: 'Lucy' },
{ value: 'Yiminghe', label: 'yiminghe' },
]}
/>
<Select
mode="multiple"
defaultValue={['lucy']}
placeholder="Filled"
variant="filled"
style={{ flex: 1 }}
options={[
{ value: 'jack', label: 'Jack' },
{ value: 'lucy', label: 'Lucy' },
{ value: 'Yiminghe', label: 'yiminghe' },
]}
/>
</Flex>
<Flex gap={8}>
<Select
placeholder="Borderless"
variant="borderless"
style={{ flex: 1 }}
options={[
{ value: 'jack', label: 'Jack' },
{ value: 'lucy', label: 'Lucy' },
{ value: 'Yiminghe', label: 'yiminghe' },
]}
/>
<Select
mode="multiple"
defaultValue={['lucy']}
placeholder="Borderless"
variant="borderless"
style={{ flex: 1 }}
options={[
{ value: 'jack', label: 'Jack' },
{ value: 'lucy', label: 'Lucy' },
{ value: 'Yiminghe', label: 'yiminghe' },
]}
/>
</Flex>
</Flex>
);
export default App;

5
components/select/index.en-US.md
View File

@ -35,7 +35,8 @@ Select component to select value from options.
<code src="./demo/suffix.tsx" debug>Suffix</code>
<code src="./demo/custom-dropdown-menu.tsx">Custom dropdown</code>
<code src="./demo/hide-selected.tsx">Hide Already Selected</code>
<code src="./demo/variant.tsx">Variants</code>
<code src="./demo/variant.tsx" version="5.13.0">Variants</code>
<code src="./demo/filled-debug.tsx" debug>Filled debug</code>
<code src="./demo/custom-tag-render.tsx">Custom Tag Render</code>
<code src="./demo/responsive.tsx">Responsive maxTagCount</code>
<code src="./demo/big-data.tsx">Big Data</code>
@ -96,7 +97,7 @@ Common props ref：[Common props](/docs/react/common-props)
| tagRender | Customize tag render, only applies when `mode` is set to `multiple` or `tags` | (props) => ReactNode | - | |
| tokenSeparators | Separator used to tokenize, only applies when `mode="tags"` | string\[] | - | |
| value | Current selected option (considered as a immutable array) | string \| string\[] \| <br />number \| number\[] \| <br />LabeledValue \| LabeledValue\[] | - | |
| variant | Variants of Input | `outlined` \| `borderless` | `outlined` | 5.13.0 |
| variant | Variants of selector | `outlined` \| `borderless` \| `filled` | `outlined` | 5.13.0 |
| virtual | Disable virtual scroll when set to false | boolean | true | 4.1.0 |
| onBlur | Called when blur | function | - | |
| onChange | Called when select an option or input value change | function(value, option:Option \| Array&lt;Option>) | - | |

6
components/select/index.tsx
View File

@ -40,7 +40,7 @@ export interface LabeledValue {
export type SelectValue = RawValue | RawValue[] | LabeledValue | LabeledValue[] | undefined;
const SelectVariants = ['outlined', 'borderless'] as const;
export const SelectVariants = ['outlined', 'borderless', 'filled'] as const;
export type SelectVariant = (typeof SelectVariants)[number];
export interface InternalSelectProps<
@ -135,9 +135,7 @@ const InternalSelect = <
const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
const [variant, enableVariantCls] = useVariants(customizeVariant, bordered, SelectVariants, {
omitOutlined: true,
});
const [variant, enableVariantCls] = useVariants(customizeVariant, bordered, SelectVariants);
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);

5
components/select/index.zh-CN.md
View File

@ -36,7 +36,8 @@ demo:
<code src="./demo/suffix.tsx" debug>后缀图标</code>
<code src="./demo/custom-dropdown-menu.tsx">扩展菜单</code>
<code src="./demo/hide-selected.tsx">隐藏已选择选项</code>
<code src="./demo/variant.tsx">形态变体</code>
<code src="./demo/variant.tsx" version="5.13.0">多种形态</code>
<code src="./demo/filled-debug.tsx" debug>Filled debug</code>
<code src="./demo/custom-tag-render.tsx">自定义选择标签</code>
<code src="./demo/responsive.tsx">响应式 maxTagCount</code>
<code src="./demo/big-data.tsx">大数据</code>
@ -97,7 +98,7 @@ demo:
| tagRender | 自定义 tag 内容 render，仅在 `mode` 为 `multiple` 或 `tags` 时生效 | (props) => ReactNode | - | |
| tokenSeparators | 自动分词的分隔符，仅在 `mode="tags"` 时生效 | string\[] | - | |
| value | 指定当前选中的条目，多选时为一个数组。（value 数组引用未变化时，Select 不会更新） | string \| string\[] \| <br />number \| number\[] \| <br />LabeledValue \| LabeledValue\[] | - | |
| variant | 形态变体 | `outlined` \| `borderless` | `outlined` | 5.13.0 |
| variant | 形态变体 | `outlined` \| `borderless` \| `filled` | `outlined` | 5.13.0 |
| virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 4.1.0 |
| onBlur | 失去焦点时回调 | function | - | |
| onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value, option:Option \| Array&lt;Option>) | - | |

2
components/select/style/dropdown.tsx → components/select/style/dropdown.ts
View File

@ -1,5 +1,5 @@
import type { CSSObject } from '@ant-design/cssinjs';
import type { SelectToken } from '.';
import type { SelectToken } from './token';
import { resetComponent, textEllipsis } from '../../style';
import {
initMoveMotion,

266
components/select/style/index.tsx → components/select/style/index.ts
View File

@ -1,131 +1,23 @@
import type { CSSObject } from '@ant-design/cssinjs';
import { unit } from '@ant-design/cssinjs';
import type { CSSProperties } from 'react';
import { resetComponent, resetIcon, textEllipsis } from '../../style';
import { genCompactItemStyle } from '../../style/compact-item';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import type { GenerateStyle } from '../../theme/internal';
import { genStyleHooks, mergeToken } from '../../theme/internal';
import genDropdownStyle from './dropdown';
import genMultipleStyle from './multiple';
import genSingleStyle from './single';
import type { ComponentToken, SelectToken } from './token';
import { prepareComponentToken } from './token';
import genVariantsStyle from './variants';
export interface ComponentToken {
/**
* @desc 下拉菜单 z-index
* @descEN z-index of dropdown
*/
zIndexPopup: number;
/**
* @desc 选项选中时文本颜色
* @descEN Text color when option is selected
*/
optionSelectedColor: string;
/**
* @desc 选项选中时文本字重
* @descEN Font weight when option is selected
*/
optionSelectedFontWeight: CSSProperties['fontWeight'];
/**
* @desc 选项选中时背景色
* @descEN Background color when option is selected
*/
optionSelectedBg: string;
/**
* @desc 选项激活态时背景色
* @descEN Background color when option is active
*/
optionActiveBg: string;
/**
* @desc 选项内间距
* @descEN Padding of option
*/
optionPadding: CSSProperties['padding'];
/**
* @desc 选项字体大小
* @descEN Font size of option
*/
optionFontSize: number;
/**
* @desc 选项行高
* @descEN Line height of option
*/
optionLineHeight: CSSProperties['lineHeight'];
/**
* @desc 选项高度
* @descEN Height of option
*/
optionHeight: number;
/**
* @desc 选框背景色
* @descEN Background color of selector
*/
selectorBg: string;
/**
* @desc 清空按钮背景色
* @descEN Background color of clear button
*/
clearBg: string;
/**
* @desc 单选大号回填项高度
* @descEN Height of single selected item with large size
*/
singleItemHeightLG: number;
/**
* @desc 多选标签背景色
* @descEN Background color of multiple tag
*/
multipleItemBg: string;
/**
* @desc 多选标签边框色
* @descEN Border color of multiple tag
*/
multipleItemBorderColor: string;
/**
* @desc 多选标签高度
* @descEN Height of multiple tag
*/
multipleItemHeight: number;
/**
* @desc 大号多选标签高度
* @descEN Height of multiple tag with large size
*/
multipleItemHeightLG: number;
/**
* @desc 多选框禁用背景
* @descEN Background color of multiple selector when disabled
*/
multipleSelectorBgDisabled: string;
/**
* @desc 多选标签禁用文本颜色
* @descEN Text color of multiple tag when disabled
*/
multipleItemColorDisabled: string;
/**
* @desc 多选标签禁用边框色
* @descEN Border color of multiple tag when disabled
*/
multipleItemBorderColorDisabled: string;
/**
* @internal
*/
showArrowPaddingInlineEnd: number;
}
export interface SelectToken extends FullToken<'Select'> {
rootPrefixCls: string;
inputPaddingHorizontalBase: number | string;
multipleSelectItemHeight: number;
selectHeight: number;
}
export { ComponentToken };
// ============================= Selector =============================
const genSelectorStyle: GenerateStyle<SelectToken, CSSObject> = (token) => {
const { componentCls, selectorBg } = token;
const { componentCls } = token;
return {
position: 'relative',
backgroundColor: selectorBg,
border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,
transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`,
input: {
@ -143,14 +35,8 @@ const genSelectorStyle: GenerateStyle<SelectToken, CSSObject> = (token) => {
},
[`${componentCls}-disabled&`]: {
color: token.colorTextDisabled,
background: token.colorBgContainerDisabled,
cursor: 'not-allowed',
[`${componentCls}-multiple&`]: {
background: token.multipleSelectorBgDisabled,
},
input: {
cursor: 'not-allowed',
},
@ -158,53 +44,6 @@ const genSelectorStyle: GenerateStyle<SelectToken, CSSObject> = (token) => {
};
};
// ============================== Status ==============================
const genStatusStyle = (
rootSelectCls: string,
token: SelectToken & {
borderHoverColor: string;
borderActiveColor: string;
outlineColor: string;
},
overwriteDefaultBorder: boolean = false,
): CSSObject => {
const {
componentCls,
borderHoverColor,
antCls,
borderActiveColor,
outlineColor,
controlOutlineWidth,
} = token;
const overwriteStyle: CSSObject = overwriteDefaultBorder
? {
[`${componentCls}-selector`]: {
borderColor: borderActiveColor,
},
}
: {};
return {
[rootSelectCls]: {
[`&:not(${componentCls}-disabled):not(${componentCls}-customize-input):not(${antCls}-pagination-size-changer)`]:
{
...overwriteStyle,
[`&:hover ${componentCls}-selector`]: {
borderColor: borderHoverColor,
},
[`${componentCls}-focused& ${componentCls}-selector`]: {
borderColor: borderActiveColor,
boxShadow: `0 0 0 ${unit(controlOutlineWidth)} ${outlineColor}`,
outline: 0,
},
},
},
};
};
// ============================== Styles ==============================
// /* Reset search input style */
const getSearchInputWithoutBorderStyle: GenerateStyle<SelectToken, CSSObject> = (token) => {
@ -244,10 +83,6 @@ const genBaseStyle: GenerateStyle<SelectToken> = (token) => {
...getSearchInputWithoutBorderStyle(token),
},
// [`&:not(&-disabled):hover ${selectCls}-selector`]: {
// ...genHoverStyle(token),
// },
// ======================== Selection ========================
[`${componentCls}-selection-item`]: {
flex: 1,
@ -286,6 +121,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = (token) => {
pointerEvents: 'none',
display: 'flex',
alignItems: 'center',
transition: `opacity ${token.motionDurationSlow} ease`,
[iconCls]: {
verticalAlign: 'top',
@ -326,7 +162,6 @@ const genBaseStyle: GenerateStyle<SelectToken> = (token) => {
lineHeight: 1,
textAlign: 'center',
textTransform: 'none',
background: token.clearBg,
cursor: 'pointer',
opacity: 0,
transition: `color ${token.motionDurationMid} ease, opacity ${token.motionDurationSlow} ease`,
@ -345,6 +180,12 @@ const genBaseStyle: GenerateStyle<SelectToken> = (token) => {
[`${componentCls}-clear`]: {
opacity: 1,
},
// Should use the following selector, but since `:has` has poor compatibility,
// we use `:not(:last-child)` instead, which may cause some problems in some cases.
// [`${componentCls}-arrow:has(+ ${componentCls}-clear)`]: {
[`${componentCls}-arrow:not(:last-child)`]: {
opacity: 0,
},
},
},
@ -368,13 +209,6 @@ const genSelectStyle: GenerateStyle<SelectToken> = (token) => {
return [
{
[componentCls]: {
// ==================== BorderLess ====================
[`&-borderless ${componentCls}-selector`]: {
backgroundColor: `transparent !important`,
borderColor: `transparent !important`,
boxShadow: `none !important`,
},
// ==================== In Form ====================
[`&${componentCls}-in-form-item`]: {
width: '100%',
@ -406,35 +240,6 @@ const genSelectStyle: GenerateStyle<SelectToken> = (token) => {
},
},
// =====================================================
// == Status ==
// =====================================================
genStatusStyle(
componentCls,
mergeToken<any>(token, {
borderHoverColor: token.colorPrimaryHover,
borderActiveColor: token.colorPrimary,
outlineColor: token.controlOutline,
}),
),
genStatusStyle(
`${componentCls}-status-error`,
mergeToken<any>(token, {
borderHoverColor: token.colorErrorHover,
borderActiveColor: token.colorError,
outlineColor: token.colorErrorOutline,
}),
true,
),
genStatusStyle(
`${componentCls}-status-warning`,
mergeToken<any>(token, {
borderHoverColor: token.colorWarningHover,
borderActiveColor: token.colorWarning,
outlineColor: token.colorWarningOutline,
}),
true,
),
// =====================================================
// == Space Compact ==
// =====================================================
@ -446,49 +251,6 @@ const genSelectStyle: GenerateStyle<SelectToken> = (token) => {
};
// ============================== Export ==============================
export const prepareComponentToken: GetDefaultToken<'Select'> = (token) => {
const {
fontSize,
lineHeight,
controlHeight,
controlPaddingHorizontal,
zIndexPopupBase,
colorText,
fontWeightStrong,
controlItemBgActive,
controlItemBgHover,
colorBgContainer,
colorFillSecondary,
controlHeightLG,
controlHeightSM,
colorBgContainerDisabled,
colorTextDisabled,
} = token;
return {
zIndexPopup: zIndexPopupBase + 50,
optionSelectedColor: colorText,
optionSelectedFontWeight: fontWeightStrong,
optionSelectedBg: controlItemBgActive,
optionActiveBg: controlItemBgHover,
optionPadding: `${(controlHeight - fontSize * lineHeight) / 2}px ${controlPaddingHorizontal}px`,
optionFontSize: fontSize,
optionLineHeight: lineHeight,
optionHeight: controlHeight,
selectorBg: colorBgContainer,
clearBg: colorBgContainer,
singleItemHeightLG: controlHeightLG,
multipleItemBg: colorFillSecondary,
multipleItemBorderColor: 'transparent',
multipleItemHeight: controlHeightSM,
multipleItemHeightLG: controlHeight,
multipleSelectorBgDisabled: colorBgContainerDisabled,
multipleItemColorDisabled: colorTextDisabled,
multipleItemBorderColorDisabled: 'transparent',
showArrowPaddingInlineEnd: Math.ceil(token.fontSize * 1.25),
};
};
export default genStyleHooks(
'Select',
(token, { rootPrefixCls }) => {
@ -499,7 +261,7 @@ export default genStyleHooks(
selectHeight: token.controlHeight,
});
return [genSelectStyle(selectToken)];
return [genSelectStyle(selectToken), genVariantsStyle(selectToken)];
},
prepareComponentToken,
{

4
components/select/style/multiple.tsx → components/select/style/multiple.ts
View File

@ -1,5 +1,5 @@
import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
import type { SelectToken } from '.';
import type { SelectToken } from './token';
import { resetIcon } from '../../style';
import { mergeToken } from '../../theme/internal';
import { unit } from '@ant-design/cssinjs';
@ -104,8 +104,6 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
lineHeight: unit(
token.calc(selectItemHeight).sub(token.calc(token.lineWidth).mul(2)).equal(),
),
background: token.multipleItemBg,
border: `${unit(token.lineWidth)} ${token.lineType} ${token.multipleItemBorderColor}`,
borderRadius: token.borderRadiusSM,
cursor: 'default',
transition: `font-size ${token.motionDurationSlow}, line-height ${token.motionDurationSlow}, height ${token.motionDurationSlow}`,

2
components/select/style/single.tsx → components/select/style/single.ts
View File

@ -1,6 +1,6 @@
import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
import { resetComponent } from '../../style';
import type { SelectToken } from '.';
import type { SelectToken } from './token';
import { mergeToken } from '../../theme/internal';
import { unit } from '@ant-design/cssinjs';

154
components/select/style/token.ts Normal file
View File

@ -0,0 +1,154 @@
import type { CSSProperties } from 'react';
import type { FullToken, GetDefaultToken } from 'antd/es/theme/util/genComponentStyleHook';
export interface ComponentToken {
/**
* @desc 下拉菜单 z-index
* @descEN z-index of dropdown
*/
zIndexPopup: number;
/**
* @desc 选项选中时文本颜色
* @descEN Text color when option is selected
*/
optionSelectedColor: string;
/**
* @desc 选项选中时文本字重
* @descEN Font weight when option is selected
*/
optionSelectedFontWeight: CSSProperties['fontWeight'];
/**
* @desc 选项选中时背景色
* @descEN Background color when option is selected
*/
optionSelectedBg: string;
/**
* @desc 选项激活态时背景色
* @descEN Background color when option is active
*/
optionActiveBg: string;
/**
* @desc 选项内间距
* @descEN Padding of option
*/
optionPadding: CSSProperties['padding'];
/**
* @desc 选项字体大小
* @descEN Font size of option
*/
optionFontSize: number;
/**
* @desc 选项行高
* @descEN Line height of option
*/
optionLineHeight: CSSProperties['lineHeight'];
/**
* @desc 选项高度
* @descEN Height of option
*/
optionHeight: number;
/**
* @desc 选框背景色
* @descEN Background color of selector
*/
selectorBg: string;
/**
* @desc 清空按钮背景色
* @descEN Background color of clear button
*/
clearBg: string;
/**
* @desc 单选大号回填项高度
* @descEN Height of single selected item with large size
*/
singleItemHeightLG: number;
/**
* @desc 多选标签背景色
* @descEN Background color of multiple tag
*/
multipleItemBg: string;
/**
* @desc 多选标签边框色
* @descEN Border color of multiple tag
*/
multipleItemBorderColor: string;
/**
* @desc 多选标签高度
* @descEN Height of multiple tag
*/
multipleItemHeight: number;
/**
* @desc 大号多选标签高度
* @descEN Height of multiple tag with large size
*/
multipleItemHeightLG: number;
/**
* @desc 多选框禁用背景
* @descEN Background color of multiple selector when disabled
*/
multipleSelectorBgDisabled: string;
/**
* @desc 多选标签禁用文本颜色
* @descEN Text color of multiple tag when disabled
*/
multipleItemColorDisabled: string;
/**
* @desc 多选标签禁用边框色
* @descEN Border color of multiple tag when disabled
*/
multipleItemBorderColorDisabled: string;
/**
* @internal
*/
showArrowPaddingInlineEnd: number;
}
export interface SelectToken extends FullToken<'Select'> {
rootPrefixCls: string;
inputPaddingHorizontalBase: number | string;
multipleSelectItemHeight: number;
selectHeight: number;
}
export const prepareComponentToken: GetDefaultToken<'Select'> = (token) => {
const {
fontSize,
lineHeight,
controlHeight,
controlPaddingHorizontal,
zIndexPopupBase,
colorText,
fontWeightStrong,
controlItemBgActive,
controlItemBgHover,
colorBgContainer,
colorFillSecondary,
controlHeightLG,
controlHeightSM,
colorBgContainerDisabled,
colorTextDisabled,
} = token;
return {
zIndexPopup: zIndexPopupBase + 50,
optionSelectedColor: colorText,
optionSelectedFontWeight: fontWeightStrong,
optionSelectedBg: controlItemBgActive,
optionActiveBg: controlItemBgHover,
optionPadding: `${(controlHeight - fontSize * lineHeight) / 2}px ${controlPaddingHorizontal}px`,
optionFontSize: fontSize,
optionLineHeight: lineHeight,
optionHeight: controlHeight,
selectorBg: colorBgContainer,
clearBg: colorBgContainer,
singleItemHeightLG: controlHeightLG,
multipleItemBg: colorFillSecondary,
multipleItemBorderColor: 'transparent',
multipleItemHeight: controlHeightSM,
multipleItemHeightLG: controlHeight,
multipleSelectorBgDisabled: colorBgContainerDisabled,
multipleItemColorDisabled: colorTextDisabled,
multipleItemBorderColorDisabled: 'transparent',
showArrowPaddingInlineEnd: Math.ceil(token.fontSize * 1.25),
};
};

214
components/select/style/variants.ts Normal file
View File

@ -0,0 +1,214 @@
import type { CSSObject } from '@ant-design/cssinjs';
import type { SelectToken } from './token';
import { unit } from '@ant-design/cssinjs';
// =====================================================
// == Outlined ==
// =====================================================
const genBaseOutlinedStyle = (
token: SelectToken,
options: {
borderColor: string;
hoverBorderHover: string;
activeBorderColor: string;
activeShadowColor: string;
},
): CSSObject => {
const { componentCls, antCls, controlOutlineWidth } = token;
return {
[`&:not(${componentCls}-customize-input) ${componentCls}-selector`]: {
border: `${unit(token.lineWidth)} ${token.lineType} ${options.borderColor}`,
background: token.selectorBg,
},
[`&:not(${componentCls}-disabled):not(${componentCls}-customize-input):not(${antCls}-pagination-size-changer)`]:
{
[`&:hover ${componentCls}-selector`]: {
borderColor: options.hoverBorderHover,
},
[`${componentCls}-focused& ${componentCls}-selector`]: {
borderColor: options.activeBorderColor,
boxShadow: `0 0 0 ${unit(controlOutlineWidth)} ${options.activeShadowColor}`,
outline: 0,
},
},
};
};
const genOutlinedStatusStyle = (
token: SelectToken,
options: {
status: string;
borderColor: string;
hoverBorderHover: string;
activeBorderColor: string;
activeShadowColor: string;
},
): CSSObject => ({
[`&${token.componentCls}-status-${options.status}`]: {
...genBaseOutlinedStyle(token, options),
},
});
const genOutlinedStyle = (token: SelectToken): CSSObject => ({
'&-outlined': {
...genBaseOutlinedStyle(token, {
borderColor: token.colorBorder,
hoverBorderHover: token.colorPrimaryHover,
activeBorderColor: token.colorPrimary,
activeShadowColor: token.controlOutline,
}),
...genOutlinedStatusStyle(token, {
status: 'error',
borderColor: token.colorError,
hoverBorderHover: token.colorErrorHover,
activeBorderColor: token.colorError,
activeShadowColor: token.colorErrorOutline,
}),
...genOutlinedStatusStyle(token, {
status: 'warning',
borderColor: token.colorWarning,
hoverBorderHover: token.colorWarningHover,
activeBorderColor: token.colorWarning,
activeShadowColor: token.colorWarningOutline,
}),
[`&${token.componentCls}-disabled`]: {
[`&:not(${token.componentCls}-customize-input) ${token.componentCls}-selector`]: {
background: token.colorBgContainerDisabled,
color: token.colorTextDisabled,
},
},
[`&${token.componentCls}-multiple ${token.componentCls}-selection-item`]: {
background: token.multipleItemBg,
border: `${unit(token.lineWidth)} ${token.lineType} ${token.multipleItemBorderColor}`,
},
},
});
// =====================================================
// == Filled ==
// =====================================================
const genBaseFilledStyle = (
token: SelectToken,
options: {
bg: string;
hoverBg: string;
activeBorderColor: string;
color: string;
},
): CSSObject => {
const { componentCls, antCls } = token;
return {
[`&:not(${componentCls}-customize-input) ${componentCls}-selector`]: {
background: options.bg,
border: `${unit(token.lineWidth)} ${token.lineType} transparent`,
color: options.color,
},
[`&:not(${componentCls}-disabled):not(${componentCls}-customize-input):not(${antCls}-pagination-size-changer)`]:
{
[`&:hover ${componentCls}-selector`]: {
background: options.hoverBg,
},
[`${componentCls}-focused& ${componentCls}-selector`]: {
background: token.selectorBg,
borderColor: options.activeBorderColor,
outline: 0,
},
},
};
};
const genFilledStatusStyle = (
token: SelectToken,
options: {
status: string;
bg: string;
hoverBg: string;
activeBorderColor: string;
color: string;
},
): CSSObject => ({
[`&${token.componentCls}-status-${options.status}`]: {
...genBaseFilledStyle(token, options),
},
});
const genFilledStyle = (token: SelectToken): CSSObject => ({
'&-filled': {
...genBaseFilledStyle(token, {
bg: token.colorFillTertiary,
hoverBg: token.colorFillSecondary,
activeBorderColor: token.colorPrimary,
color: token.colorText,
}),
...genFilledStatusStyle(token, {
status: 'error',
bg: token.colorErrorBg,
hoverBg: token.colorErrorBgHover,
activeBorderColor: token.colorError,
color: token.colorError,
}),
...genFilledStatusStyle(token, {
status: 'warning',
bg: token.colorWarningBg,
hoverBg: token.colorWarningBgHover,
activeBorderColor: token.colorWarning,
color: token.colorWarning,
}),
[`&${token.componentCls}-disabled`]: {
[`&:not(${token.componentCls}-customize-input) ${token.componentCls}-selector`]: {
borderColor: token.colorBorder,
background: token.colorBgContainerDisabled,
color: token.colorTextDisabled,
},
},
[`&${token.componentCls}-multiple ${token.componentCls}-selection-item`]: {
background: token.colorBgContainer,
border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
},
},
});
// =====================================================
// == Borderless ==
// =====================================================
const genBorderlessStyle = (token: SelectToken): CSSObject => ({
'&-borderless': {
[`${token.componentCls}-selector`]: {
background: 'transparent',
borderColor: 'transparent',
},
[`&${token.componentCls}-disabled`]: {
[`&:not(${token.componentCls}-customize-input) ${token.componentCls}-selector`]: {
color: token.colorTextDisabled,
},
},
[`&${token.componentCls}-multiple ${token.componentCls}-selection-item`]: {
background: token.multipleItemBg,
border: `${unit(token.lineWidth)} ${token.lineType} ${token.multipleItemBorderColor}`,
},
},
});
const genVariantsStyle = (token: SelectToken): CSSObject => ({
[token.componentCls]: {
...genOutlinedStyle(token),
...genFilledStyle(token),
...genBorderlessStyle(token),
},
});
export default genVariantsStyle;

36
components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -458,7 +458,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
class="ant-space-compact ant-space-compact-block"
>
<div
class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -639,7 +639,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
class="ant-space-compact ant-space-compact-block"
>
<div
class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-select-compact-item ant-select-compact-first-item ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
style="width: 50%;"
>
<div
@ -1066,7 +1066,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
class="ant-space-compact ant-space-compact-block"
>
<div
class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -4306,7 +4306,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
class="ant-space-compact ant-space-compact-block"
>
<div
class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -4446,7 +4446,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
</span>
</div>
<div
class="ant-select ant-select-compact-item ant-select-compact-last-item ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-compact-item ant-select-compact-last-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -4594,7 +4594,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
class="ant-space-compact ant-space-compact-block"
>
<div
class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -4764,7 +4764,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
class="ant-space-compact ant-space-compact-block"
>
<div
class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-show-arrow"
style="width: 30%;"
>
<div
@ -4905,7 +4905,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
</span>
</div>
<div
class="ant-select ant-select-compact-item ant-select-compact-last-item ant-select-auto-complete ant-select-single ant-select-show-search"
class="ant-select ant-select-outlined ant-select-compact-item ant-select-compact-last-item ant-select-auto-complete ant-select-single ant-select-show-search"
style="width: 70%;"
>
<div
@ -6425,7 +6425,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
</div>
</div>
<div
class="ant-select ant-cascader ant-select-compact-item ant-select-compact-last-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-compact-item ant-select-compact-last-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
style="width: 70%;"
>
<div
@ -8039,7 +8039,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
</div>
</div>
<div
class="ant-select ant-tree-select ant-select-compact-item ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
class="ant-select ant-tree-select ant-select-outlined ant-select-compact-item ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
style="width: 60%;"
>
<div
@ -9881,7 +9881,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
class="ant-input-group-addon"
>
<div
class="ant-select select-before ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined select-before ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -10030,7 +10030,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
class="ant-input-group-addon"
>
<div
class="ant-select select-after ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined select-after ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -10518,7 +10518,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
class="ant-input-group-addon"
>
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
style="width: 150px;"
>
<div
@ -11593,7 +11593,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
role="separator"
/>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -11820,7 +11820,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
class="ant-space-compact"
>
<div
class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-compact-last-item ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-compact-item ant-select-compact-first-item ant-select-compact-last-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -13241,7 +13241,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
class="ant-space-compact"
>
<div
class="ant-select ant-cascader ant-select-compact-item ant-select-compact-first-item ant-select-compact-last-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-compact-item ant-select-compact-first-item ant-select-compact-last-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
style="width: 70%;"
>
<div
@ -13536,7 +13536,7 @@ Array [
</div>
</div>
<div
class="ant-select ant-select-compact-item ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-compact-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -15215,7 +15215,7 @@ Array [
class="ant-space-compact"
>
<div
class="ant-select ant-cascader ant-select-compact-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-compact-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"

34
components/space/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -353,7 +353,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
class="ant-space-compact ant-space-compact-block"
>
<div
class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -453,7 +453,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
class="ant-space-compact ant-space-compact-block"
>
<div
class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-select-compact-item ant-select-compact-first-item ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
style="width:50%"
>
<div
@ -785,7 +785,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
class="ant-space-compact ant-space-compact-block"
>
<div
class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -1186,7 +1186,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
class="ant-space-compact ant-space-compact-block"
>
<div
class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -1245,7 +1245,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
</span>
</div>
<div
class="ant-select ant-select-compact-item ant-select-compact-last-item ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-compact-item ant-select-compact-last-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -1312,7 +1312,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
class="ant-space-compact ant-space-compact-block"
>
<div
class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -1401,7 +1401,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
class="ant-space-compact ant-space-compact-block"
>
<div
class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-show-arrow"
style="width:30%"
>
<div
@ -1461,7 +1461,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
</span>
</div>
<div
class="ant-select ant-select-compact-item ant-select-compact-last-item ant-select-auto-complete ant-select-single ant-select-show-search"
class="ant-select ant-select-outlined ant-select-compact-item ant-select-compact-last-item ant-select-auto-complete ant-select-single ant-select-show-search"
style="width:70%"
>
<div
@ -1542,7 +1542,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
</div>
</div>
<div
class="ant-select ant-cascader ant-select-compact-item ant-select-compact-last-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-compact-item ant-select-compact-last-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
style="width:70%"
>
<div
@ -1693,7 +1693,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
</span>
</div>
<div
class="ant-select ant-tree-select ant-select-compact-item ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
class="ant-select ant-tree-select ant-select-outlined ant-select-compact-item ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
style="width:60%"
>
<div
@ -2665,7 +2665,7 @@ exports[`renders components/space/demo/compact-debug.tsx correctly 1`] = `
class="ant-input-group-addon"
>
<div
class="ant-select select-before ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined select-before ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -2733,7 +2733,7 @@ exports[`renders components/space/demo/compact-debug.tsx correctly 1`] = `
class="ant-input-group-addon"
>
<div
class="ant-select select-after ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined select-after ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -3106,7 +3106,7 @@ exports[`renders components/space/demo/compact-debug.tsx correctly 1`] = `
class="ant-input-group-addon"
>
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
style="width:150px"
>
<div
@ -3396,7 +3396,7 @@ exports[`renders components/space/demo/compact-debug.tsx correctly 1`] = `
class="ant-space-compact"
>
<div
class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-compact-last-item ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-compact-item ant-select-compact-first-item ant-select-compact-last-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -3635,7 +3635,7 @@ exports[`renders components/space/demo/compact-debug.tsx correctly 1`] = `
class="ant-space-compact"
>
<div
class="ant-select ant-cascader ant-select-compact-item ant-select-compact-first-item ant-select-compact-last-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-compact-item ant-select-compact-first-item ant-select-compact-last-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
style="width:70%"
>
<div
@ -3839,7 +3839,7 @@ Array [
</div>
</div>
<div
class="ant-select ant-select-compact-item ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-compact-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
@ -4070,7 +4070,7 @@ Array [
class="ant-space-compact"
>
<div
class="ant-select ant-cascader ant-select-compact-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-outlined ant-select-compact-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"

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

@ -8121,7 +8121,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -12771,7 +12771,7 @@ exports[`renders components/table/demo/fixed-columns-header.tsx extend context c
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -14136,7 +14136,7 @@ exports[`renders components/table/demo/fixed-header.tsx extend context correctly
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -15458,7 +15458,7 @@ exports[`renders components/table/demo/grouping-columns.tsx extend context corre
>
<div
aria-label="Page Size"
class="ant-select ant-select-sm ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-sm ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -17871,7 +17871,7 @@ exports[`renders components/table/demo/narrow.tsx extend context correctly 1`] =
>
<div
aria-label="Page Size"
class="ant-select ant-select-sm ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-sm ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -30380,7 +30380,7 @@ exports[`renders components/table/demo/sticky.tsx extend context correctly 1`] =
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"

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

@ -7185,7 +7185,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -10401,7 +10401,7 @@ exports[`renders components/table/demo/fixed-columns-header.tsx correctly 1`] =
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -11661,7 +11661,7 @@ exports[`renders components/table/demo/fixed-header.tsx correctly 1`] = `
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -12691,7 +12691,7 @@ exports[`renders components/table/demo/grouping-columns.tsx correctly 1`] = `
>
<div
aria-label="Page Size"
class="ant-select ant-select-sm ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-sm ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -14387,7 +14387,7 @@ exports[`renders components/table/demo/narrow.tsx correctly 1`] = `
>
<div
aria-label="Page Size"
class="ant-select ant-select-sm ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-sm ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -24980,7 +24980,7 @@ exports[`renders components/table/demo/sticky.tsx correctly 1`] = `
>
<div
aria-label="Page Size"
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-outlined ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"

8
components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -3450,7 +3450,7 @@ exports[`renders components/tabs/demo/icon.tsx extend context correctly 2`] = `[
exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
<div>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width: 200px;"
>
<div
@ -3616,7 +3616,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
</span>
</div>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width: 200px;"
>
<div
@ -3782,7 +3782,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
</span>
</div>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width: 200px;"
>
<div
@ -3937,7 +3937,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
</span>
</div>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width: 200px;"
>
<div

8
components/tabs/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -2892,7 +2892,7 @@ exports[`renders components/tabs/demo/icon.tsx correctly 1`] = `
exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
<div>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width:200px"
>
<div
@ -2949,7 +2949,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
</span>
</div>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width:200px"
>
<div
@ -3006,7 +3006,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
</span>
</div>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width:200px"
>
<div
@ -3063,7 +3063,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
</span>
</div>
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width:200px"
>
<div

2
components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -1534,7 +1534,7 @@ exports[`renders components/tooltip/demo/disabled-children.tsx extend context co
class="ant-space-item"
>
<div
class="ant-select ant-select-single ant-select-show-arrow ant-select-disabled"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow ant-select-disabled"
>
<div
class="ant-select-selector"

2
components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -688,7 +688,7 @@ exports[`renders components/tooltip/demo/disabled-children.tsx correctly 1`] = `
class="ant-space-item"
>
<div
class="ant-select ant-select-single ant-select-show-arrow ant-select-disabled"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow ant-select-disabled"
>
<div
class="ant-select-selector"

22
components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -2,7 +2,7 @@
exports[`renders components/tree-select/demo/async.tsx extend context correctly 1`] = `
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width: 100%;"
>
<div
@ -228,7 +228,7 @@ exports[`renders components/tree-select/demo/async.tsx extend context correctly
exports[`renders components/tree-select/demo/basic.tsx extend context correctly 1`] = `
<div
class="ant-select ant-tree-select ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
class="ant-select ant-tree-select ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
style="width: 100%;"
>
<div
@ -573,7 +573,7 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
exports[`renders components/tree-select/demo/checkable.tsx extend context correctly 1`] = `
<div
class="ant-select ant-tree-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
class="ant-select ant-tree-select ant-select-outlined ant-select-multiple ant-select-show-arrow ant-select-show-search"
style="width: 100%;"
>
<div
@ -842,7 +842,7 @@ exports[`renders components/tree-select/demo/checkable.tsx extend context correc
exports[`renders components/tree-select/demo/multiple.tsx extend context correctly 1`] = `
<div
class="ant-select ant-tree-select ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
class="ant-select ant-tree-select ant-select-outlined ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
style="width: 100%;"
>
<div
@ -1289,7 +1289,7 @@ Array [
<br />,
<br />,
<div
class="ant-select ant-tree-select ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
class="ant-select ant-tree-select ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -1641,7 +1641,7 @@ exports[`renders components/tree-select/demo/render-panel.tsx extend context cor
style="padding-bottom: 0px; position: relative; min-width: 0;"
>
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow ant-select-open"
class="ant-select ant-tree-select ant-select-outlined ant-select-single ant-select-show-arrow ant-select-open"
style="width: 100%; margin: 0px;"
>
<div
@ -1841,7 +1841,7 @@ exports[`renders components/tree-select/demo/status.tsx extend context correctly
class="ant-space-item"
>
<div
class="ant-select ant-tree-select ant-select-status-error ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-status-error ant-select-single ant-select-show-arrow"
style="width: 100%;"
>
<div
@ -1962,7 +1962,7 @@ exports[`renders components/tree-select/demo/status.tsx extend context correctly
class="ant-space-item"
>
<div
class="ant-select ant-tree-select ant-select-status-warning ant-select-multiple ant-select-show-arrow ant-select-show-search"
class="ant-select ant-tree-select ant-select-outlined ant-select-status-warning ant-select-multiple ant-select-show-arrow ant-select-show-search"
style="width: 100%;"
>
<div
@ -2101,7 +2101,7 @@ exports[`renders components/tree-select/demo/status.tsx extend context correctly
exports[`renders components/tree-select/demo/suffix.tsx extend context correctly 1`] = `
<div
class="ant-select ant-tree-select ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
class="ant-select ant-tree-select ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
style="width: 100%;"
>
<div
@ -2446,7 +2446,7 @@ exports[`renders components/tree-select/demo/suffix.tsx extend context correctly
exports[`renders components/tree-select/demo/treeData.tsx extend context correctly 1`] = `
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width: 100%;"
>
<div
@ -2773,7 +2773,7 @@ exports[`renders components/tree-select/demo/treeLine.tsx extend context correct
class="ant-space-item"
>
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width: 300px;"
>
<div

22
components/tree-select/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -2,7 +2,7 @@
exports[`renders components/tree-select/demo/async.tsx correctly 1`] = `
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width:100%"
>
<div
@ -64,7 +64,7 @@ exports[`renders components/tree-select/demo/async.tsx correctly 1`] = `
exports[`renders components/tree-select/demo/basic.tsx correctly 1`] = `
<div
class="ant-select ant-tree-select ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
class="ant-select ant-tree-select ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
style="width:100%"
>
<div
@ -123,7 +123,7 @@ exports[`renders components/tree-select/demo/basic.tsx correctly 1`] = `
exports[`renders components/tree-select/demo/checkable.tsx correctly 1`] = `
<div
class="ant-select ant-tree-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
class="ant-select ant-tree-select ant-select-outlined ant-select-multiple ant-select-show-arrow ant-select-show-search"
style="width:100%"
>
<div
@ -237,7 +237,7 @@ exports[`renders components/tree-select/demo/checkable.tsx correctly 1`] = `
exports[`renders components/tree-select/demo/multiple.tsx correctly 1`] = `
<div
class="ant-select ant-tree-select ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
class="ant-select ant-tree-select ant-select-outlined ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
style="width:100%"
>
<div
@ -398,7 +398,7 @@ Array [
<br />,
<br />,
<div
class="ant-select ant-tree-select ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
class="ant-select ant-tree-select ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -460,7 +460,7 @@ exports[`renders components/tree-select/demo/render-panel.tsx correctly 1`] = `
style="padding-bottom:0;position:relative;min-width:0"
>
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width:100%;margin:0"
>
<div
@ -531,7 +531,7 @@ exports[`renders components/tree-select/demo/status.tsx correctly 1`] = `
class="ant-space-item"
>
<div
class="ant-select ant-tree-select ant-select-status-error ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-status-error ant-select-single ant-select-show-arrow"
style="width:100%"
>
<div
@ -594,7 +594,7 @@ exports[`renders components/tree-select/demo/status.tsx correctly 1`] = `
class="ant-space-item"
>
<div
class="ant-select ant-tree-select ant-select-status-warning ant-select-multiple ant-select-show-arrow ant-select-show-search"
class="ant-select ant-tree-select ant-select-outlined ant-select-status-warning ant-select-multiple ant-select-show-arrow ant-select-show-search"
style="width:100%"
>
<div
@ -673,7 +673,7 @@ exports[`renders components/tree-select/demo/status.tsx correctly 1`] = `
exports[`renders components/tree-select/demo/suffix.tsx correctly 1`] = `
<div
class="ant-select ant-tree-select ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
class="ant-select ant-tree-select ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
style="width:100%"
>
<div
@ -732,7 +732,7 @@ exports[`renders components/tree-select/demo/suffix.tsx correctly 1`] = `
exports[`renders components/tree-select/demo/treeData.tsx correctly 1`] = `
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width:100%"
>
<div
@ -884,7 +884,7 @@ exports[`renders components/tree-select/demo/treeLine.tsx correctly 1`] = `
class="ant-space-item"
>
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width:300px"
>
<div

6
components/tree-select/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -2,7 +2,7 @@
exports[`TreeSelect TreeSelect Custom Icons should \`treeIcon\` work 1`] = `
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow ant-select-open"
class="ant-select ant-tree-select ant-select-outlined ant-select-single ant-select-show-arrow ant-select-open"
>
<div
class="ant-select-selector"
@ -144,7 +144,7 @@ exports[`TreeSelect TreeSelect Custom Icons should \`treeIcon\` work 1`] = `
exports[`TreeSelect TreeSelect Custom Icons should support customized icons 1`] = `
<div
class="ant-select ant-tree-select ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
class="ant-select ant-tree-select ant-select-outlined ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
>
<div
class="ant-select-selector"
@ -276,7 +276,7 @@ exports[`TreeSelect TreeSelect Custom Icons should support customized icons 1`]
exports[`TreeSelect rtl render component should be rendered correctly in RTL direction 1`] = `
<div
class="ant-select ant-tree-select ant-select-rtl ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-rtl ant-select-outlined ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"

2
components/tree-select/index.en-US.md
View File

@ -39,7 +39,6 @@ Common props ref：[Common props](/docs/react/common-props)
| --- | --- | --- | --- | --- |
| allowClear | Customize clear icon | boolean \| { clearIcon?: ReactNode } | false | 5.8.0: Support object type |
| autoClearSearchValue | If auto clear search input value when multiple select is selected/deselected | boolean | true | |
| bordered | Whether has border style | boolean | true | |
| defaultValue | To set the initial selected treeNode(s) | string \| string\[] | - | |
| disabled | Disabled or not | boolean | false | |
| popupClassName | The className of dropdown menu | string | - | 4.23.0 |
@ -81,6 +80,7 @@ Common props ref：[Common props](/docs/react/common-props)
| treeNodeFilterProp | Will be used for filtering if `filterTreeNode` returns true | string | `value` | |
| treeNodeLabelProp | Will render as content of select | string | `title` | |
| value | To set the current selected treeNode(s) | string \| string\[] | - | |
| variant | Variants of selector | `outlined` \| `borderless` \| `filled` | `outlined` | 5.13.0 |
| virtual | Disable virtual scroll when set to false | boolean | true | 4.1.0 |
| onChange | A callback function, can be executed when selected treeNodes or input value change | function(value, label, extra) | - | |
| onDropdownVisibleChange | Called when dropdown open | function(open) | - | |

16
components/tree-select/index.tsx
View File

@ -30,6 +30,9 @@ import SwitcherIconCom from '../tree/utils/iconUtil';
import useStyle from './style';
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
import { useZIndex } from '../_util/hooks/useZIndex';
import type { SelectVariant } from '../select';
import { SelectVariants } from '../select';
import useVariant from '../_util/hooks/useVariants';
type RawValue = string | number;
@ -61,6 +64,7 @@ export interface TreeSelectProps<
popupClassName?: string;
/** @deprecated Please use `popupClassName` instead */
dropdownClassName?: string;
/** @deprecated Use `variant` instead. */
bordered?: boolean;
treeLine?: TreeProps['showLine'];
status?: InputStatus;
@ -75,6 +79,11 @@ export interface TreeSelectProps<
* default behavior, you can hide it by setting `suffixIcon` to null.
*/
showArrow?: boolean;
/**
* @since 5.13.0
* @default "outlined"
*/
variant?: SelectVariant;
}
const InternalTreeSelect = <
@ -108,6 +117,7 @@ const InternalTreeSelect = <
dropdownMatchSelectWidth,
popupMatchSelectWidth,
allowClear,
variant: customVariant,
...props
}: TreeSelectProps<ValueType, OptionType>,
ref: React.Ref<BaseSelectRef>,
@ -144,6 +154,8 @@ const InternalTreeSelect = <
'deprecated',
'`showArrow` is deprecated which will be removed in next major version. It will be a default behavior, you can hide it by setting `suffixIcon` to null.',
);
warning.deprecated(!('bordered' in props), 'bordered', 'variant');
}
const rootPrefixCls = getPrefixCls();
@ -157,6 +169,8 @@ const InternalTreeSelect = <
const [wrapCSSVar, hashId, cssVarCls] = useSelectStyle(prefixCls, rootCls);
const [treeSelectWrapCSSVar] = useStyle(treeSelectPrefixCls, treePrefixCls, treeSelectRootCls);
const [variant, enableVariantCls] = useVariant(customVariant, bordered, SelectVariants);
const mergedDropdownClassName = classNames(
popupClassName || dropdownClassName,
`${treeSelectPrefixCls}-dropdown`,
@ -237,7 +251,7 @@ const InternalTreeSelect = <
[`${prefixCls}-lg`]: mergedSize === 'large',
[`${prefixCls}-sm`]: mergedSize === 'small',
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-borderless`]: !bordered,
[`${prefixCls}-${variant}`]: enableVariantCls,
[`${prefixCls}-in-form-item`]: isFormItemInput,
},
getStatusClassNames(prefixCls, mergedStatus, hasFeedback),

2
components/tree-select/index.zh-CN.md
View File

@ -40,7 +40,6 @@ demo:
| --- | --- | --- | --- | --- |
| allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | false | 5.8.0: 支持对象形式 |
| autoClearSearchValue | 当多选模式下值被选择，自动清空搜索框 | boolean | true | |
| bordered | 是否显示边框 | boolean | true | |
| defaultValue | 指定默认选中的条目 | string \| string\[] | - | |
| disabled | 是否禁用 | boolean | false | |
| popupClassName | 下拉菜单的 className 属性 | string | - | 4.23.0 |
@ -82,6 +81,7 @@ demo:
| treeNodeFilterProp | 输入项过滤对应的 treeNode 属性 | string | `value` | |
| treeNodeLabelProp | 作为显示的 prop 设置 | string | `title` | |
| value | 指定当前选中的条目 | string \| string\[] | - | |
| variant | 形态变体 | `outlined` \| `borderless` \| `filled` | `outlined` | 5.13.0 |
| virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 4.1.0 |
| onChange | 选中树节点时调用此函数 | function(value, label, extra) | - | |
| onDropdownVisibleChange | 展开下拉菜单的回调 | function(open) | - | |

2
components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -3287,7 +3287,7 @@ exports[`renders components/tree/demo/line.tsx extend context correctly 1`] = `
<br />
showLeafIcon:
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"

2
components/tree/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -3272,7 +3272,7 @@ exports[`renders components/tree/demo/line.tsx correctly 1`] = `
showLeafIcon:
<!-- -->
<div
class="ant-select ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"