{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/input/cascader","result":{"data":{"current":{"frontmatter":{"title":"Cascader","order":36,"brief":"Used to select an option under a multi-level classification.","icon":"doc-cascader"},"fields":{"type":"input"},"tableOfContents":{"items":[{"url":"#usage-scenarios","title":"Usage scenarios"},{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic Usage"},{"url":"#multiple","title":"Multiple"},{"url":"#searchable","title":"Searchable"},{"url":"#searchable-multiple-selection","title":"Searchable Multiple Selection"},{"url":"#limit-tags-displayed","title":"Limit Tags Displayed"},{"url":"#limit-tags-number","title":"Limit Tags Number"},{"url":"#change-on-select","title":"Change on Select"},{"url":"#custom-display-property","title":"Custom Display Property"},{"url":"#custom-separator","title":"Custom Separator"},{"url":"#disabled","title":"Disabled"},{"url":"#disable-strictly","title":"Disable Strictly"},{"url":"#the-way-of-expand-menu","title":"the Way of Expand Menu"},{"url":"#click-to-select","title":"Click to Select"},{"url":"#additional-items","title":"Additional items"},{"url":"#controlled-component","title":"Controlled Component"},{"url":"#auto-merge-value","title":"Auto Merge Value"},{"url":"#leaf-only","title":"Leaf Only"},{"url":"#checked-relationship","title":"Checked RelationShip"},{"url":"#dynamic-update-of-data","title":"Dynamic Update of Data"},{"url":"#load-async-data","title":"Load Async Data"},{"url":"#custom-trigger","title":"Custom Trigger"}]},{"url":"#api-reference","title":"API reference","items":[{"url":"#cascader","title":"Cascader"},{"url":"#cascaderdata","title":"CascaderData"}]},{"url":"#methods","title":"Methods"},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]},{"url":"#design-tokens","title":"Design Tokens"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"localeCode\": \"en-US\",\n \"order\": 36,\n \"category\": \"Input\",\n \"title\": \"Cascader\",\n \"subTitle\": \"Cascade\",\n \"icon\": \"doc-cascader\",\n \"brief\": \"Used to select an option under a multi-level classification.\"\n};\nvar makeShortcode = function makeShortcode(name) {\n return function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n };\n};\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Usage scenarios\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Differences from TreeSelect component:\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"TreeSelect: The core value lies in \", mdx(\"strong\", {\n parentName: \"li\"\n }, \"target node\"), \". The structure is to facilitate users to quickly filter out target options. The final node is what the user wants. It is commonly used in file/folder selection, organizational structure, permission allocation and other scenarios.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Cascader: The core selection value lies in the \", mdx(\"strong\", {\n parentName: \"li\"\n }, \"path\"), \". What the user selects is not an isolated point, but a complete path from root to leaf, which is often used in scenarios such as geographical location and product classification.\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Demos\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"How to import\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"import\",\n \"import\": true\n }, \"import { Cascader } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Basic Usage\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Basic usage, only leaf nodes can be selected by default.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Cascader } from '@douyinfe/semi-ui';\\n\\n() => {\\n const treeData = [\\n {\\n label: 'Impressionism',\\n value: 'impressionism',\\n children: [\\n {\\n label: 'Visual Arts',\\n value: 'visualArts',\\n children: [\\n {\\n label: 'Claude Monet',\\n value: 'Monet',\\n },\\n {\\n label: 'Pierre-Auguste Renoir',\\n value: 'Renoir',\\n },\\n {\\n label: '\\xC9douard Manet',\\n value: 'Manet',\\n },\\n ],\\n },\\n {\\n label: 'Music',\\n value: 'music',\\n children: [\\n {\\n label: 'Claude Debussy',\\n value: 'Debussy',\\n },\\n {\\n label: 'Maurice Ravel',\\n value: 'Ravel',\\n }\\n ]\\n }\\n ],\\n }];\\n return (\\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Multiple\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Set \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"multiple\"), \" to make multiple selections.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Cascader } from '@douyinfe/semi-ui';\\n\\n() => {\\n const treeData = [\\n {\\n label: 'Impressionism',\\n value: 'impressionism',\\n children: [\\n {\\n label: 'Visual Arts',\\n value: 'visualArts',\\n children: [\\n {\\n label: 'Claude Monet',\\n value: 'Monet',\\n },\\n {\\n label: 'Pierre-Auguste Renoir',\\n value: 'Renoir',\\n },\\n {\\n label: '\\xC9douard Manet',\\n value: 'Manet',\\n },\\n ],\\n },\\n {\\n label: 'Music',\\n value: 'music',\\n children: [\\n {\\n label: 'Claude Debussy',\\n value: 'Debussy',\\n },\\n {\\n label: 'Maurice Ravel',\\n value: 'Ravel',\\n }\\n ]\\n }\\n ],\\n }];\\n return (\\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Searchable\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"filterTreeNode\"), \" to support search input. \"), mdx(\"p\", {\n parentName: \"section\"\n }, \"By default, the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"label\"), \" value is searched (using the includes method of the string for matching, case-insensitive). You can specify other attribute values \\u200B\\u200B\\u200B\\u200Bthrough \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"treeNodeFilterProp\"), \" to search. For example, If \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"label\"), \" is ReactNode, you can use other fields in treeData to store plain text, and specify the field for search through \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"treeNodeFilterProp\"), \".\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"The default search results will only display the paths of leaf nodes. If you want to display more results, you can set \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"filterLeafOnly\"), \" to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"false\"), \".\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Cascader } from '@douyinfe/semi-ui';\\n\\n() => {\\n const treeData = [\\n {\\n label: 'Impressionism',\\n value: 'impressionism',\\n children: [\\n {\\n label: 'Visual Arts',\\n value: 'visualArts',\\n children: [\\n {\\n label: 'Claude Monet',\\n value: 'Monet',\\n },\\n {\\n label: 'Pierre-Auguste Renoir',\\n value: 'Renoir',\\n },\\n {\\n label: '\\xC9douard Manet',\\n value: 'Manet',\\n },\\n ],\\n },\\n {\\n label: 'Music',\\n value: 'music',\\n children: [\\n {\\n label: 'Claude Debussy',\\n value: 'Debussy',\\n },\\n {\\n label: 'Maurice Ravel',\\n value: 'Ravel',\\n }\\n ]\\n }\\n ],\\n }];\\n const labelNodeTreeData = [{\\n label: Impressionism,\\n labelText: 'Impressionism',\\n value: 'impressionism',\\n children: [\\n {\\n label: Visual Arts,\\n labelText: 'Visual Arts',\\n value: 'visualArts',\\n children: [\\n {\\n label: Claude Monet,\\n labelText: 'Claude Monet',\\n value: 'Monet',\\n },\\n {\\n label: 'Pierre-Auguste Renoir,\\n labelText: 'Pierre-Auguste Renoir',\\n value: 'Renoir',\\n },\\n {\\n label: \\xC9douard Manet,\\n labelText: '\\xC9douard Manet',\\n value: 'Manet',\\n },\\n ],\\n },\\n {\\n label: Music,\\n labelText: 'Music',\\n value: 'music',\\n children: [\\n {\\n label: Claude Debussy,\\n labelText: 'Claude Debussy',\\n value: 'Debussy',\\n },\\n {\\n label: Maurice Ravel,\\n labelText: 'Maurice Ravel',\\n value: 'Ravel',\\n }\\n ]\\n }\\n ],\\n }];\\n return (\\n
\\n \\n
\\n
\\n \\n
\\n
\\n filterLeafOnly=false:\\n \\n
\\n
\\n Label is ReactNode, specify other attributes to search\\n \\n
\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Searchable Multiple Selection\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"When multiple selection and search are supported at the same time, in this scenario, you can delete the corresponding selected item by pressing the BackSpace key.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React, { useState } from 'react';\\nimport { Cascader } from '@douyinfe/semi-ui';\\n\\n() => {\\n const [value, setValue] = useState(['impressionism', 'visualArts', 'Monet']);\\n const onChange = (newValue) => {\\n setValue(newValue);\\n };\\n const treeData = [\\n {\\n label: 'Impressionism',\\n value: 'impressionism',\\n children: [\\n {\\n label: 'Visual Arts',\\n value: 'visualArts',\\n children: [\\n {\\n label: 'Claude Monet',\\n value: 'Monet',\\n },\\n {\\n label: 'Pierre-Auguste Renoir',\\n value: 'Renoir',\\n },\\n {\\n label: '\\xC9douard Manet',\\n value: 'Manet',\\n },\\n ],\\n },\\n {\\n label: 'Music',\\n value: 'music',\\n children: [\\n {\\n label: 'Claude Debussy',\\n value: 'Debussy',\\n },\\n {\\n label: 'Maurice Ravel',\\n value: 'Ravel',\\n }\\n ]\\n }\\n ],\\n }];\\n return (\\n \\n );\\n};\\n\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"Filtered data can be sorted using \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"filterSorter\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"filterSorter\"), \" is available since v2.28.0.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React, { useState } from 'react';\\nimport { Cascader } from '@douyinfe/semi-ui';\\n\\n() => {\\n const treeData = [\\n {\\n label: 'Product',\\n value: 'Product',\\n children: [\\n {\\n label: 'Semi-Material',\\n value: 'Semi-Material',\\n \\n },\\n {\\n label: 'Semi-DSM',\\n value: 'Semi-DSM',\\n \\n },\\n {\\n label: 'Semi',\\n value: 'Semi',\\n \\n },\\n {\\n label: 'Semi-C2D',\\n value: 'Semi-C2D',\\n },\\n {\\n label: 'Semi-D2C',\\n value: 'Semi-D2C',\\n },\\n ],\\n }\\n ];\\n return (\\n
\\n {\\n const firstData = first[first.length - 1];\\n const lastData = second[second.length - 1];\\n if (firstData.label === inputValue) {\\n return -1;\\n } else if (lastData.label === inputValue) {\\n return 1;\\n } else {\\n return firstData.label < lastData.label ? -1 : 1;\\n }\\n }}\\n />\\n
\\n );\\n};\\n\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"If you want to customize the rendering options after the search, you can use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"filterRender\"), \" to achieve custom rendering of the entire line. The \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"filterRender\"), \" is available since v2.28.0, parameters are as follows:\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-tsx\"\n }, \"interface filterRenderProps {\\n className: string;\\n inputValue: string; // Search bar search content\\n disabled: boolean; // Whether to disable\\n data: CascaderData[]; // Search result data\\n selected: boolean; // Selected state when single selection\\n checkStatus: { // Checked state when multiple selection\\n checked: boolean;\\n halfChecked: boolean;\\n };\\n onClick: (e: React.MouseEvent) => void; // Callback when clicked option in single selection \\n onCheck: (e: React.MouseEvent) => void; // Callback when clicked option in multiple selection\\n }\\n\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"The example is as follows\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React, { useState } from 'react';\\nimport { Cascader, Typography, Checkbox } from '@douyinfe/semi-ui';\\n\\n() => {\\n const treeData = [\\n {\\n label: 'Semi',\\n value: 'Semi',\\n children: [\\n {\\n label: 'Semi-Material Semi-Material Semi-Material Semi-Material',\\n value: 'Semi-Material',\\n \\n },\\n {\\n label: 'Semi-DSM Semi-DSM Semi-DSM Semi-DSM',\\n value: 'Semi-DSM',\\n \\n },\\n {\\n label: 'Semi Design Semi Design Semi Design Semi Design',\\n value: 'Semi Design',\\n \\n },\\n {\\n label: 'Semi-C2D Semi-C2D Semi-C2D Semi-C2D Semi-C2D',\\n value: 'Semi-C2D',\\n },\\n {\\n label: 'Semi-D2C Semi-D2C Semi-D2C Semi-D2C Semi-D2C ',\\n value: 'Semi-D2C',\\n },\\n ],\\n }\\n ];\\n const { Text } = Typography;\\n\\n const renderSearchOptionSingle = (props) => {\\n const { className, data, onClick, onKeyPress, selected } = props;\\n\\n return (\\n \\n \\n {data.map(item => item.label ).join(' / ')}\\n \\n \\n );\\n };\\n\\n const renderSearchOptionMultiple = (props) => {\\n const { className, data, checkStatus, onClick, onKeyPress } = props;\\n\\n return (\\n \\n \\n \\n {data.map(item => item.label).join(' / ')}\\n \\n \\n );\\n };\\n \\n return (\\n
\\n

Mouse over the option to view the complete content of the omitted text

\\n
\\n \\n
\\n \\n
\\n );\\n};\\n\\n\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"If there are a lot of options in the search results, you can optimize performance by setting virtualizeInSearch to enable the virtualization of the search result panel. virtualizeInSearch has been available since v2.44.0. virtualizeInSearch is an object containing the following values:\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"height: Option list height value\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"width: Option list width value\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"itemSize: The height of each row of Option\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Cascader, Checkbox, Typography } from '@douyinfe/semi-ui';\\n\\n() => {\\n const treeData = useMemo(() => (\\n ['Generic', 'Scene'].map((label, m) => ({\\n label: label,\\n value: m,\\n children: new Array(100).fill(0).map((item, n)=> ({\\n value: `${m}-${n}`,\\n label: `${m}-${n} level one`,\\n children: new Array(20).fill(0).map((item, o)=> ({\\n value: `${m}-${n}-${o}`,\\n label: `${m}-${n}-${o} level two detail info`,\\n })),\\n }))\\n }))\\n ), []);\\n \\n let virtualize = {\\n // The height is the panel's default height of 180px minus the upper and lower padding 2 * 8px\\n height: 172,\\n width: 320,\\n itemSize: 36, \\n };\\n\\n const filterRender = useCallback((props) => {\\n const { data, onCheck, checkStatus, className } = props;\\n return (\\n
\\n \\n \\n {data.map(item => item.label).join(' | ')}\\n \\n
\\n );\\n }, []);\\n \\n return (\\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Limit Tags Displayed\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"When multiple selections, you can use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"maxTagCount\"), \" to limit the number of tags displayed, and the excess will be displayed as +N. \"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"showRestTagsPopover\"), \" to set whether hover +N displays Popover after maxTagCount is exceeded, the default is false. And, you can also configure Popover in the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"restTagsPopoverProps\"), \" property.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Cascader } from '@douyinfe/semi-ui';\\n\\n() => {\\n const treeData = [\\n {\\n label: 'Impressionism',\\n value: 'impressionism',\\n children: [\\n {\\n label: 'Visual Arts',\\n value: 'visualArts',\\n children: [\\n {\\n label: 'Claude Monet',\\n value: 'Monet',\\n },\\n {\\n label: 'Pierre-Auguste Renoir',\\n value: 'Renoir',\\n },\\n {\\n label: '\\xC9douard Manet',\\n value: 'Manet',\\n },\\n ],\\n },\\n {\\n label: 'Music',\\n value: 'music',\\n children: [\\n {\\n label: 'Claude Debussy',\\n value: 'Debussy',\\n },\\n {\\n label: 'Maurice Ravel',\\n value: 'Ravel',\\n }\\n ]\\n }\\n ],\\n }];\\n return (\\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Limit Tags Number\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"In a multi-selection scene, use max to limit the number of multi-selection selections. After max is exceeded, the onExceed callback will be triggered.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Cascader, Toast } from '@douyinfe/semi-ui';\\n\\n() => {\\n const treeData = [\\n {\\n label: 'Impressionism',\\n value: 'impressionism',\\n children: [\\n {\\n label: 'Visual Arts',\\n value: 'visualArts',\\n children: [\\n {\\n label: 'Claude Monet',\\n value: 'Monet',\\n },\\n {\\n label: 'Pierre-Auguste Renoir',\\n value: 'Renoir',\\n },\\n {\\n label: '\\xC9douard Manet',\\n value: 'Manet',\\n },\\n ],\\n },\\n {\\n label: 'Music',\\n value: 'music',\\n children: [\\n {\\n label: 'Claude Debussy',\\n value: 'Debussy',\\n },\\n {\\n label: 'Maurice Ravel',\\n value: 'Ravel',\\n }\\n ]\\n }\\n ],\\n }];\\n return (\\n {\\n Toast.warning('exceed max');\\n console.log(v);\\n }}\\n defaultValue={[\\n ['impressionism', 'visualArts', 'Monet']\\n ]}\\n />\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Change on Select\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"In the case of single selection, you can also set \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"changeOnSelect\"), \" to allow the parent option to be selected.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Cascader } from '@douyinfe/semi-ui';\\n\\n() => {\\n const treeData = [\\n {\\n label: 'Impressionism',\\n value: 'impressionism',\\n children: [\\n {\\n label: 'Visual Arts',\\n value: 'visualArts',\\n children: [\\n {\\n label: 'Claude Monet',\\n value: 'Monet',\\n },\\n {\\n label: 'Pierre-Auguste Renoir',\\n value: 'Renoir',\\n },\\n {\\n label: '\\xC9douard Manet',\\n value: 'Manet',\\n },\\n ],\\n },\\n {\\n label: 'Music',\\n value: 'music',\\n children: [\\n {\\n label: 'Claude Debussy',\\n value: 'Debussy',\\n },\\n {\\n label: 'Maurice Ravel',\\n value: 'Ravel',\\n }\\n ]\\n }\\n ],\\n }];\\n return (\\n
\\n \\n
\\n
\\n \\n
\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Custom Display Property\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Set \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"displayProp\"), \" to select which property in the data you would like to display. By default, \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"label\"), \" is displayed.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Cascader, Typography } from '@douyinfe/semi-ui';\\n\\n() => {\\n const treeData = [\\n {\\n label: 'Impressionism',\\n value: 'impressionism',\\n children: [\\n {\\n label: 'Visual Arts',\\n value: 'visualArts',\\n children: [\\n {\\n label: 'Claude Monet',\\n value: 'Monet',\\n },\\n {\\n label: 'Pierre-Auguste Renoir',\\n value: 'Renoir',\\n },\\n {\\n label: '\\xC9douard Manet',\\n value: 'Manet',\\n },\\n ],\\n },\\n {\\n label: 'Music',\\n value: 'music',\\n children: [\\n {\\n label: 'Claude Debussy',\\n value: 'Debussy',\\n },\\n {\\n label: 'Maurice Ravel',\\n value: 'Ravel',\\n }\\n ]\\n }\\n ],\\n }\\n ];\\n return (\\n <>\\n single selection\\n \\n
\\n
\\n multiple selection\\n \\n \\n );\\n};\\n\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"The return format can be set by setting \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"displayRender\"), \".\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"When single selection (\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"multiple=false\"), \"), \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"displayRender((labelPath: string[]) => ReactNode)\"), \", where labelPath is a path array composed of labels.\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"When multiple selection (\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"multiple=true\"), \"), \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"displayRender((item: Entity, index: number) => ReactNode)\"), \", where item is the relevant data of the node.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"interface Entity {\\n children?: Entity[]; // children list\\n data: CascaderData; // treedata\\n ind: number; // index\\n key: string; // key\\n level: number; // node level\\n parent?: Entity; // parent data\\n parentKey?: string; // parent key\\n path: string[]; // key path\\n valuePath: string[]; // value path\\n}\\n\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Cascader, Tag, Typography } from '@douyinfe/semi-ui';\\n\\n() => {\\n const treeData = [\\n {\\n label: 'Impressionism',\\n value: 'impressionism',\\n children: [\\n {\\n label: 'Visual Arts',\\n value: 'visualArts',\\n children: [\\n {\\n label: 'Claude Monet',\\n value: 'Monet',\\n },\\n {\\n label: 'Pierre-Auguste Renoir',\\n value: 'Renoir',\\n },\\n {\\n label: '\\xC9douard Manet',\\n value: 'Manet',\\n },\\n ],\\n },\\n {\\n label: 'Music',\\n value: 'music',\\n children: [\\n {\\n label: 'Claude Debussy',\\n value: 'Debussy',\\n },\\n {\\n label: 'Maurice Ravel',\\n value: 'Ravel',\\n }\\n ]\\n }\\n ],\\n }\\n ];\\n return (\\n <>\\n single selection\\n 'Selected\\uFF1A' + list.join(' -> ')}\\n defaultValue={['impressionism', 'visualArts', 'Monet']}\\n />\\n
\\n
\\n multiple selection\\n (\\n \\n {item.data.label}\\n \\n )}\\n />\\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Custom Separator\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Version: >=2.2.0\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"separator\"), \" to set the separator, including: the separator of the content displayed in the dropdown during search and displayed in the Trigger during single selection.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Cascader } from '@douyinfe/semi-ui';\\n\\n() => {\\n const treeData = [\\n {\\n label: 'Impressionism',\\n value: 'impressionism',\\n children: [\\n {\\n label: 'Visual Arts',\\n value: 'visualArts',\\n children: [\\n {\\n label: 'Claude Monet',\\n value: 'Monet',\\n },\\n {\\n label: 'Pierre-Auguste Renoir',\\n value: 'Renoir',\\n },\\n {\\n label: '\\xC9douard Manet',\\n value: 'Manet',\\n },\\n ],\\n },\\n {\\n label: 'Music',\\n value: 'music',\\n children: [\\n {\\n label: 'Claude Debussy',\\n value: 'Debussy',\\n },\\n {\\n label: 'Maurice Ravel',\\n value: 'Ravel',\\n }\\n ]\\n }\\n ],\\n }\\n ];\\n return (\\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Disabled\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Cascader } from '@douyinfe/semi-ui';\\n\\n() => {\\n const treeData = [\\n {\\n label: 'Impressionism',\\n value: 'impressionism',\\n children: [\\n {\\n label: 'Visual Arts',\\n value: 'visualArts',\\n children: [\\n {\\n label: 'Claude Monet',\\n value: 'Monet',\\n },\\n {\\n label: 'Pierre-Auguste Renoir',\\n value: 'Renoir',\\n },\\n {\\n label: '\\xC9douard Manet',\\n value: 'Manet',\\n },\\n ],\\n },\\n {\\n label: 'Music',\\n value: 'music',\\n children: [\\n {\\n label: 'Claude Debussy',\\n value: 'Debussy',\\n },\\n {\\n label: 'Maurice Ravel',\\n value: 'Ravel',\\n }\\n ]\\n }\\n ],\\n }];\\n return (\\n
\\n \\n
\\n
\\n \\n
\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Disable Strictly\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can use disableStrictly to enable strict disabling. After enabling strict disabling, when the node is disabled, the selected state cannot be changed through the relationship between the child or the parent.\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Take the following demo as an example, the node \\\"Music\\\" is strictly disabled. Therefore, when we change the selected state of its parent node \\\"Impressionism\\\", it will not affect the selected state of the node \\\"Music\\\".\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Cascader } from '@douyinfe/semi-ui';\\n\\n() => {\\n const treeData = [\\n {\\n label: 'Impressionism',\\n value: 'impressionism',\\n children: [\\n {\\n label: 'Visual Arts',\\n value: 'visualArts',\\n children: [\\n {\\n label: 'Claude Monet',\\n value: 'Monet',\\n },\\n {\\n label: 'Pierre-Auguste Renoir',\\n value: 'Renoir',\\n },\\n {\\n label: '\\xC9douard Manet',\\n value: 'Manet',\\n },\\n ],\\n },\\n {\\n label: 'Music',\\n value: 'music',\\n disabled: true,\\n children: [\\n {\\n label: 'Claude Debussy',\\n value: 'Debussy',\\n },\\n {\\n label: 'Maurice Ravel',\\n value: 'Ravel',\\n }\\n ]\\n }\\n ],\\n }];\\n return (\\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"the Way of Expand Menu\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"showNext\"), \" to set the time to expand the Dropdown submenu, optional: \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"click\"), \" (default), \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"hover\"), \".\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Cascader } from '@douyinfe/semi-ui';\\n\\n() => {\\n const treeData = [\\n {\\n label: 'Impressionism',\\n value: 'impressionism',\\n children: [\\n {\\n label: 'Visual Arts',\\n value: 'visualArts',\\n children: [\\n {\\n label: 'Claude Monet',\\n value: 'Monet',\\n },\\n {\\n label: 'Pierre-Auguste Renoir',\\n value: 'Renoir',\\n },\\n {\\n label: '\\xC9douard Manet',\\n value: 'Manet',\\n },\\n ],\\n },\\n {\\n label: 'Music',\\n value: 'music',\\n children: [\\n {\\n label: 'Claude Debussy',\\n value: 'Debussy',\\n },\\n {\\n label: 'Maurice Ravel',\\n value: 'Ravel',\\n }\\n ]\\n }\\n ],\\n }];\\n return (\\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Click to Select\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"In multiple mode, clicking on non-leaf nodes does not trigger selection by default. You can use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"clickToSelect\"), \" to enable selecting any node on click.\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"This API is especially useful when combined with \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"showNext=\\\"hover\\\"\"), \": hovering expands the submenu, while clicking selects the current node.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Cascader } from '@douyinfe/semi-ui';\\n\\n() => {\\n const treeData = [\\n {\\n label: 'Impressionism',\\n value: 'impressionism',\\n children: [\\n {\\n label: 'Visual Arts',\\n value: 'visualArts',\\n children: [\\n {\\n label: 'Claude Monet',\\n value: 'Monet',\\n },\\n {\\n label: 'Pierre-Auguste Renoir',\\n value: 'Renoir',\\n },\\n ],\\n },\\n {\\n label: 'Music',\\n value: 'music',\\n children: [\\n {\\n label: 'Claude Debussy',\\n value: 'Debussy',\\n },\\n ],\\n },\\n ],\\n }\\n ];\\n return (\\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Additional items\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"We have reserved slots at the top and bottom of the cascade selector. You can set them through bottomSlot or topSlot.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Cascader, Typography } from '@douyinfe/semi-ui';\\n\\n() => {\\n const { Text } = Typography;\\n const slotStyle = {\\n height: '36px',\\n display: 'flex',\\n padding: '0 32px',\\n alignItems: 'center',\\n cursor: 'pointer',\\n borderTop: '1px solid var(--semi-color-border)'\\n };\\n const treeData = [\\n {\\n label: 'Impressionism',\\n value: 'impressionism',\\n children: [\\n {\\n label: 'Visual Arts',\\n value: 'visualArts',\\n children: [\\n {\\n label: 'Claude Monet',\\n value: 'Monet',\\n },\\n {\\n label: 'Pierre-Auguste Renoir',\\n value: 'Renoir',\\n },\\n {\\n label: '\\xC9douard Manet',\\n value: 'Manet',\\n },\\n ],\\n },\\n {\\n label: 'Music',\\n value: 'music',\\n children: [\\n {\\n label: 'Claude Debussy',\\n value: 'Debussy',\\n },\\n {\\n label: 'Maurice Ravel',\\n value: 'Ravel',\\n }\\n ]\\n }\\n ],\\n }];\\n return (\\n \\n {`Can't find a relevant option?`}\\n Go to create\\n \\n }\\n />\\n );\\n};\\n\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Controlled Component\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"value\"), \" along with \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"onChange\"), \" property if you want to use Cascader as a controlled component.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React, { useState } from 'react';\\nimport { Cascader } from '@douyinfe/semi-ui';\\n\\n() => {\\n const [value, setValue] = useState([]);\\n const onChange = (newValue) => {\\n setValue(newValue);\\n };\\n const treeData = [\\n {\\n label: 'Impressionism',\\n value: 'impressionism',\\n children: [\\n {\\n label: 'Visual Arts',\\n value: 'visualArts',\\n children: [\\n {\\n label: 'Claude Monet',\\n value: 'Monet',\\n },\\n {\\n label: 'Pierre-Auguste Renoir',\\n value: 'Renoir',\\n },\\n {\\n label: '\\xC9douard Manet',\\n value: 'Manet',\\n },\\n ],\\n },\\n {\\n label: 'Music',\\n value: 'music',\\n children: [\\n {\\n label: 'Claude Debussy',\\n value: 'Debussy',\\n },\\n {\\n label: 'Maurice Ravel',\\n value: 'Ravel',\\n }\\n ]\\n }\\n ],\\n }];\\n return (\\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Auto Merge Value\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"In the multi-selection (multiple=true) scenario, when we select the ancestor node, if we want the value not to include its corresponding descendant nodes, we can set it by \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"autoMergeValue\"), \", and the default is true. When \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"autoMergeValue\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"leafOnly\"), \" are turned on at the same time, the latter has a higher priority.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React, { useState } from 'react';\\nimport { Cascader } from '@douyinfe/semi-ui';\\n\\n() => {\\n const [value, setValue] = useState(['impressionism', 'visualArts']);\\n const onChange = value => {\\n setValue(value);\\n };\\n const treeData = [\\n {\\n label: 'Impressionism',\\n value: 'impressionism',\\n children: [\\n {\\n label: 'Visual Arts',\\n value: 'visualArts',\\n children: [\\n {\\n label: 'Claude Monet',\\n value: 'Monet',\\n },\\n {\\n label: 'Pierre-Auguste Renoir',\\n value: 'Renoir',\\n },\\n {\\n label: '\\xC9douard Manet',\\n value: 'Manet',\\n },\\n ],\\n },\\n {\\n label: 'Music',\\n value: 'music',\\n children: [\\n {\\n label: 'Claude Debussy',\\n value: 'Debussy',\\n },\\n {\\n label: 'Maurice Ravel',\\n value: 'Ravel',\\n }\\n ]\\n }\\n ],\\n }\\n ];\\n return (\\n onChange(e)}\\n />\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Leaf Only\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"version: >=2.2.0\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"In multiple selection, you can set the value to include only leaf nodes by turning on leafOnly, that is, the displayed Tag and onChange parameter values only include value. \"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React, { useState } from 'react';\\nimport { Cascader } from '@douyinfe/semi-ui';\\n\\n() => {\\n const [value, setValue] = useState(['impressionism', 'visualArts']);\\n const onChange = value => {\\n setValue(value);\\n };\\n const treeData = [\\n {\\n label: 'Impressionism',\\n value: 'impressionism',\\n children: [\\n {\\n label: 'Visual Arts',\\n value: 'visualArts',\\n children: [\\n {\\n label: 'Claude Monet',\\n value: 'Monet',\\n },\\n {\\n label: 'Pierre-Auguste Renoir',\\n value: 'Renoir',\\n },\\n {\\n label: '\\xC9douard Manet',\\n value: 'Manet',\\n },\\n ],\\n },\\n {\\n label: 'Music',\\n value: 'music',\\n children: [\\n {\\n label: 'Claude Debussy',\\n value: 'Debussy',\\n },\\n {\\n label: 'Maurice Ravel',\\n value: 'Ravel',\\n }\\n ]\\n }\\n ],\\n }\\n ];\\n return (\\n onChange(e)}\\n />\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Checked RelationShip\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Version: >= 2.71.0\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"In multiple, \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"checkRelation\"), \" can be used to set the type of node selection relationship, optional: 'related' (default), 'unRelated'. When the selection relationship is 'unRelated', it means that selections between nodes do not affect each other.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Cascader } from '@douyinfe/semi-ui';\\n() => {\\n const treeData = [\\n {\\n label: 'Asia',\\n value: 'Asia',\\n key: '0',\\n children: [\\n {\\n label: 'China',\\n value: 'China',\\n key: '0-0',\\n children: [\\n {\\n label: 'Beijing',\\n value: 'Beijing',\\n key: '0-0-0',\\n },\\n {\\n label: 'Shanghai',\\n value: 'Shanghai',\\n key: '0-0-1',\\n },\\n ],\\n },\\n ],\\n },\\n {\\n label: 'North America',\\n value: 'North America',\\n key: '1',\\n }\\n ];\\n \\n return (\\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Dynamic Update of Data\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React, { useState } from 'react';\\nimport { Cascader, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n const [treeData, setTreeData] = useState([]);\\n \\n const add = () => {\\n let itemLength = Math.floor(Math.random() * 3) + 1;\\n let newTreeData = new Array(itemLength).fill(0).map((v, i) => {\\n let length = Math.floor(Math.random() * 3);\\n let children = new Array(length).fill(0).map((cv, ci) => {\\n let child = {\\n key: `${i}-${ci}`,\\n label: `Item-${i}-${ci}`,\\n value: `${i}-${ci}`\\n };\\n return child;\\n });\\n let item = {\\n key: `${i}`,\\n label: `Item-${i}`,\\n value: `${i}`,\\n children\\n };\\n return item;\\n });\\n setTreeData(newTreeData);\\n };\\n \\n return (\\n <>\\n \\n
\\n
\\n \\n \\n );\\n};\\n\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\"\n }, \"\\n### Deep & long list\\n\\nWhen your data structure level is particularly deep, the Cascader drop-down menu may be at the top of the screen. At this time, we recommend setting overflow -x: auto and a suitable width for the drop-down menu (it is recommended to use a width of N+0.5 columns, the most Expand to display half a column to give users a visual cue that they can scroll in the horizontal direction)\\n\\n```jsx live=true\\nimport React from 'react';\\nimport { Cascader } from '@douyinfe/semi-ui';\\n\\n() => {\\n const treeData = [\\n {\\n label: 'A',\\n value: 'A',\\n children: [\\n {\\n label: 'B',\\n value: 'B',\\n children: [\\n {\\n label: 'C',\\n value: 'C',\\n children: [\\n {\\n label: 'D',\\n value: 'D',\\n children: [\\n {\\n label: 'E',\\n value: 'E',\\n children: [\\n {\\n label: 'F',\\n value: 'F',\\n }\\n ]\\n }\\n ]\\n }\\n ]\\n }\\n ],\\n }\\n ]\\n }\\n ];\\n return (\\n \\n );\\n};\\n\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-css\"\n }, \".components-cascader-demo {\\n .semi-cascader-option-lists {\\n max-width: 510px;\\n overflow-x: auto;\\n }\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Load Async Data\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You could use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"loadData\"), \" to load data asynchronously.\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Could not be used together with searching\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React, { useState } from 'react';\\nimport { Cascader } from '@douyinfe/semi-ui';\\n\\n() => {\\n const initialData = [\\n {\\n label: 'Node1',\\n value: '0-0',\\n },\\n {\\n label: 'Node2',\\n value: '0-1',\\n },\\n {\\n label: 'Node3',\\n value: '0-2',\\n isLeaf: true\\n },\\n ];\\n const [data, setData] = useState(initialData);\\n \\n const updateTreeData = (list, value, children) => {\\n return list.map(node => {\\n if (node.value === value) {\\n return { ...node, children };\\n }\\n if (node.children) {\\n return { ...node, children: updateTreeData(node.children, value, children) };\\n }\\n return node;\\n });\\n };\\n\\n const onLoadData = selectedOpt => {\\n const targetOpt = selectedOpt[selectedOpt.length - 1];\\n const { label, value } = targetOpt;\\n return new Promise(resolve => {\\n if (targetOpt.children) {\\n resolve();\\n return;\\n }\\n\\n setTimeout(() => {\\n setData(origin =>\\n updateTreeData(origin, value, [\\n {\\n label: `${label} - 1`,\\n value: `${label}-1`,\\n isLeaf: selectedOpt.length > 1\\n },\\n {\\n label: `${label} - 2`,\\n value: `${label}-2`,\\n isLeaf: selectedOpt.length > 1\\n },\\n ]),\\n );\\n resolve();\\n }, 1000);\\n });\\n };\\n\\n return (\\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Custom Trigger\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"If the default trigger style cannot meet your needs, you can use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"triggerRender\"), \" to customize the display of the select box\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"The parameters of triggerRender are as follows\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"interface TriggerRenderProps {\\n /* All props passed to Cascader by users */\\n componentProps: CascaderProps;\\n /* Whether to disable Cascader */\\n disabled: boolean;\\n /**\\n * The hierarchical position of the selected node in treeData,\\n * as in the following example, when \\\"Asia-China-Beijing\\\" is \\n * selected, the value here is 0-0-1\\n */\\n value?: string | Set;\\n /* The input value of the current Input box */\\n inputValue: string;\\n /**\\n * The function used to update the value of the input box. You\\n * should call this function when the value of the Input component\\n * customized by triggerRender is updated to synchronize the\\n * state with Cascader, you need to set the filterTreeNode parameter\\n * to non-false when use it\\uFF0C support since v2.32.0\\n */\\n onSearch: (inputValue: string) => void;\\n /* Function to clear the value */\\n onClear: () => void;\\n /* Placeholder of Cascader */\\n placeholder?: string;\\n /* Used to delete a single item, the input parameter is value , \\n * support since v2.32.0\\n */\\n onRemove: (value) => void\\n}\\n\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React, { useState, useCallback, useMemo } from 'react';\\nimport { Cascader, Button, Tag, TagInput } from '@douyinfe/semi-ui';\\nimport { IconClose, IconChevronDown } from '@douyinfe/semi-icons';\\n\\n\\nfunction Demo() {\\n const treeData = useMemo(() => [\\n {\\n label: 'Asia',\\n value: 'asia',\\n children: [\\n {\\n label: 'China',\\n value: 'china',\\n children: [\\n {\\n label: 'Guangdong',\\n value: 'guangdong',\\n },\\n {\\n label: 'Beijing',\\n value: 'beijing',\\n },\\n {\\n label: 'Shanghai',\\n value: 'shanghai',\\n },\\n ],\\n },\\n {\\n label: 'Korea',\\n value: 'korea',\\n children: [\\n {\\n label: 'Seoul',\\n value: 'seoul',\\n }\\n ]\\n },\\n ],\\n }\\n ], []);\\n\\n const closeIcon = useCallback((value, onClear) => {\\n return value ? : ;\\n }, []);\\n\\n const triggerRenderSingle = ({ value, placeholder, onClear, ...rest }) => {\\n return (\\n \\n );\\n };\\n\\n const getLabelFromValue = useCallback((value) => {\\n const valueArr = value.split('-').map(item => Number(item));\\n let resultData = treeData;\\n valueArr.forEach((item, index) => {\\n resultData = index === 0 ? resultData[item] : resultData.children[item];\\n });\\n return resultData.label;\\n }, [treeData]);\\n\\n const triggerRenderMultiple = useCallback((props) => {\\n const { value, onSearch, onRemove } = props;\\n const onCloseTag = (value, e, tagKey) => {\\n onRemove(tagKey);\\n };\\n\\n const renderTagItem = (value) => {\\n const label = getLabelFromValue(value);\\n return {label};\\n };\\n \\n return (\\n \\n );\\n }, []);\\n\\n return (\\n <>\\n \\n
\\n \\n \\n );\\n}\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"API reference\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Cascader\"), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Properties\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Instructions\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"type\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Default\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"version\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"arrowIcon\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Customize the right drop-down arrow Icon, when the showClear switch is turned on and there is currently a selected value, hover will give priority to the clear icon\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"autoAdjustOverflow\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Whether to automatically adjust the expansion direction of the dropdown for automatic adjustment of the expansion direction during edge occlusion\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"true\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"autoMergeValue\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Auto merge value. Specifically, after opening, when a parent node is selected, the value will not include the descendants of the node. Does not support dynamic switching\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"true\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"borderless\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"borderless mode >=2.33.0\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"bottomSlot\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"bottom slot\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"changeOnSelect\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Toggle whether non-leaf nodes are selectable\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"checkRelation\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"In multiple, the relationship between the checked states of the nodes, optional: 'related'\\u3001'unRelated'.\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"'related'\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"v2.71.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"className\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ClassName\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"clearIcon\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Can be used to customize the clear button, valid when showClear is true\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.25.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"defaultOpen\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Set whether to open the dropDown by default\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"defaultValue\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Default selected value\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\", \"|\", \"number\", \"|\", \"CascaderData\", \"|\", \"(string\", \"|\", \"number\", \"|\", \"CascaderData)[]\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"disabled\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Makes the element disabled\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"displayProp\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Set the attribute value displayed by the backfill option displayed\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"label\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"displayRender\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Set the backfill format value\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(selected: string[] \", \"|\", \" Entity, idx?: number) => ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"selected => selected.join ('/')\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"dropdownClassName\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ClassName property for the drop-down menu\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"dropdownMargin\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Popup layer calculates the size of the safe area when the current direction overflows, used in scenes covered by fixed elements, more detail refer to \", mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"https://github.com/DouyinFE/semi-design/issues/549\"\n }, \"issue#549\"), \", same as Tooltip margin\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"object\", \"|\", \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.25.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"dropdownStyle\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Inline style of drop-down menu\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"object\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"expandIcon\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"customize expand icon\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.68.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"emptyContent\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Content displayed when the search has no result\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"No result\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"filterLeafOnly\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Whether the search results only show the path of leaf nodes\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"true\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"filterRender\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Used to render filtered options\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(props: FilterRenderProps) => ReactNode;\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.28.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"filterSorter\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Sort the filtered options\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(first: CascaderData, second: CascaderData, inputValue: string) => number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.28.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"filterTreeNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Set filter, the value of treeNodeFilterProp is used for searching, data parameter provided since v2.28.0\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"((inputValue: string, treeNodeString: string, data?: CascaderData) => boolean) \", \"|\", \" boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"getPopupContainer\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Specify the parent DOM, the drop-down box will be rendered into the DOM, the customization needs to set position: relative This will change the DOM tree position, but not the view's rendering position.\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"() => HTMLElement\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"() => document.body\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"leafOnly\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"When multiple selections, the set value only includes leaf nodes, that is, the displayed Tag and onChange value parameters only include leaf nodes. Does not support dynamic switching\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.2.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"loadData\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Load data asynchronously and the return value should be a promise\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(selectOptions: CascaderData[]) => Promise< void >\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"max\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"In the case of multiple selections, the number of multiple selections is limited, and the onExceed callback will be triggered when max is exceeded\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"maxTagCount\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"When multiple selections, the maximum number of labels to be displayed will be displayed in the form of +N after exceeding\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"motion\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Set the pop-up animation of the dropdown box\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"true\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"mouseEnterDelay\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"After the mouse is moved in, the time to delay the display of the dropdown box, in milliseconds\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"50\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"mouseLeaveDelay\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"After the mouse is moved out, the time to hide the display of the dropdown box, in milliseconds\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"50\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"multiple\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Set multiple\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"placeholder\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Placeholder\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"prefix\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Prefix label\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"preventScroll\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.15.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"restTagsPopoverProps\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"The configuration properties of the \", mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/show/popover#API%20Reference\"\n }, \"Popover\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"PopoverProps\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"{}\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"searchPlaceholder\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Placeholder for search input\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"searchPosition\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Set the position of the search box, \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"trigger\"), \" or \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"custom\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"trigger\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.54.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"separator\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Custom separator, including: the separator of the content displayed in the dropdown during search and displayed in the Trigger during single selection\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"/\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.2.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"showClear\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Toggle whether to show clear button\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"showNext\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Set the way to expand the Dropdown submenu, one of: \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"click\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"hover\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"click\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"showRestTagsPopover\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"When the number of tags exceeds maxTagCount and hover reaches +N, whether to display the remaining content through Popover\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"size\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Selectbox size, one of \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"large\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"small\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"default\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"default\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"stopPropagation\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Whether to prevent the click event on the dropdown box from bubbling\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"true\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"disableStrictly\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Set whether to enable strict prohibition. After opening, when the node is disabled, the selected state cannot be changed through the relationship between the child or the parent\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"style\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Inline style\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"CSSProperties\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"suffix\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Suffix label\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"topSlot\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"top slot\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"treeData\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Render data. Refer to \", mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"#CascaderData\"\n }, \"CascaderData\"), \" for detailed formatting.\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"CascaderData[]\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"[]\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"treeNodeFilterProp\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"When searching, the input item filters the corresponding CascaderData property.\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"label\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"triggerRender\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Method to create a custom trigger\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(props: TriggerRenderProps) => ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"value\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Selected value (controlled mode)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\", \"|\", \"number\", \"|\", \"CascaderData\", \"|\", \"(string\", \"|\", \"number\", \"|\", \"CascaderData)\", \"[][]\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"validateStatus\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"The validation status of the trigger only affects the display style. Optional: default\\u3001error\\u3001warning\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"default\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"virtualizeInSearch\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Search result list virtualization, used when there are a large number of tree nodes, composed of height, width,itemSize\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Object\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"zIndex\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"zIndex for dropdown menu\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"1030\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"clickToSelect\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Multiple mode, clicking any node triggers selection. Useful with showNext=\\\"hover\\\": hover expands submenu, click selects current node\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"enableLeafClick\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Multiple mode, click the leaf option enable trigger check\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.2.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onBlur\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Out of focus Cascader's callback\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(e: MouseEvent) => void\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onChange\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Callback function when the tree node is selected\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(value: string\", \"|\", \"number\", \"|\", \"CascaderData\", \"|\", \"(string\", \"|\", \"number\", \"|\", \"CascaderData)[]) => void\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onClear\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"When showClear is true, click the clear button to trigger the callback\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"() => void\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onChangeWithObject\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Toggle whether to return all properties in an option as a return value. When set to true, return value looks like CascaderData. For controlled mode, you need to pass CascaderData to value correspondingly. DefaultValue similarly.\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onDropdownVisibleChange\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Callback function when dropdown menu visibility changes\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(visible: boolean) => void\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onExceed\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"When multiple selections are made, the callback triggered after max is exceeded\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(checkedItem: Entity[]) => void\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onFocus\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Focus on Cascader's callback\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(e: MouseEvent) => void\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onListScroll\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Callback function when panel list scroll\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(e: React.Event, panel: { panelIndex: number; activeNode: CascaderData; } ) => void\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onLoad\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Callback function when a node is loaded\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(newLoadedKeys: Set< string >, data: CascaderData) => void\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onSearch\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Callback function when the values for search input changes\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(value: string) => void\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onSelect\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Callback function when selected\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(value: string \", \"|\", \" number \", \"|\", \" (string \", \"|\", \" number)[]) => void\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")))), mdx(\"h3\", {\n parentName: \"section\"\n }, \"CascaderData\"), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Properties\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Instructions\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"type\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Default\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"children\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"children node\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"CascaderData[]\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"disabled\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Disabled status\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"isLeaf\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"leaf node\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"label\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Text to be displayed (required)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"loading\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"loading\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"value\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Value property (required)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\", \"|\", \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"))))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Methods\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Some internal methods provided by Select can be accessed through ref:\"), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Method\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Instructions\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Version\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"close\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Manually close dropdown list\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"v2.30.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"open\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Manually open dropdown list\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"v2.30.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"focus\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Manually focus\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"v2.34.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"blur\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Manually blur\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"v2.34.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"search(value: string)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"To manually trigger the search, you need to set filterTreeNode to enable search, and searchPosition to \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"custom\"), \" to customize the display search box.\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"v2.54.0\"))))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Accessibility\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"ARIA\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Cascader supports importing \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-label\"), \", \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-describedby\"), \", \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-errormessage\"), \", \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-invalid\"), \", \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-labelledby\"), \", \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-required\"), \" to indicate the relevant information of the Cascader;\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Cascader supports selecting options, clearing options, and expanding drop-down box by pressing the Enter key\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Design Tokens\"), mdx(DesignToken, {\n mdxType: \"DesignToken\"\n })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/input/cascader","next":{"fields":{"slug":"zh-CN/input/cascader"},"id":"0b3bedc9-00dc-595b-842a-f3816d129693","frontmatter":{"title":"Cascader 级联选择","localeCode":"zh-CN","icon":"doc-cascader","showNew":null}},"previous":{"fields":{"slug":"zh-CN/input/autocomplete"},"id":"6ed3c4cb-268d-5837-b95a-96c09c2e305f","frontmatter":{"title":"AutoComplete 自动完成","localeCode":"zh-CN","icon":"doc-autocomplete","showNew":null}}}},"staticQueryHashes":["1348983216108720","1477422646108720","3245198693108720","417590761108720","63159454108720"]}