{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/input/treeselect","result":{"data":{"current":{"frontmatter":{"title":"TreeSelect","order":52,"brief":"TreeSelector is used for structured display & selection of multi-level tree data, such as displaying a list of folders and files, displaying a list of organizational structure members, and so on.","icon":"doc-treeselect"},"fields":{"type":"input"},"tableOfContents":{"items":[{"url":"#when-to-use","title":"When to Use"},{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic Usage"},{"url":"#multi-choice","title":"Multi-choice"},{"url":"#limit-tags-number","title":"Limit Tags Number"},{"url":"#searchable","title":"Searchable"},{"url":"#search-box-position","title":"Search Box Position"},{"url":"#size","title":"Size"},{"url":"#disabled","title":"Disabled"},{"url":"#disable-strictly","title":"Disable Strictly"},{"url":"#default-expand-all","title":"Default Expand All"},{"url":"#controlled-component","title":"Controlled Component"},{"url":"#checked-relationship","title":"Checked RelationShip"},{"url":"#controlled-expansion-with-search","title":"Controlled Expansion with Search"},{"url":"#virtualized-treeselect","title":"Virtualized TreeSelect"},{"url":"#dynamic-update-of-data","title":"Dynamic Update of Data"},{"url":"#load-data-asynchronously","title":"Load Data Asynchronously"},{"url":"#custom-trigger","title":"Custom Trigger"},{"url":"#custom-rendering-selected-item","title":"Custom Rendering Selected Item"}]},{"url":"#api-reference","title":"API Reference","items":[{"url":"#treeselect","title":"TreeSelect"},{"url":"#treenodedata","title":"TreeNodeData"}]},{"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\": 52,\n  \"category\": \"Input\",\n  \"title\": \"TreeSelect\",\n  \"subTitle\": \"TreeSelect\",\n  \"icon\": \"doc-treeselect\",\n  \"brief\": \"TreeSelector is used for structured display & selection of multi-level tree data, such as displaying a list of folders and files, displaying a list of organizational structure members, and so on.\"\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 ApiType = makeShortcode(\"ApiType\");\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(\"hr\", null), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"When to Use\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"When the options to select is in tree structure, you could use TreeSelect, e.g. department hierarchy, subject system, category directory and etc.\")), 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 { TreeSelect } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Basic Usage\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"By default, TreeSelect is in single select mode and each item is selectable.\"), 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 { TreeSelect } from '@douyinfe/semi-ui';\\n\\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    return (\\n        <TreeSelect\\n            style={{ width: 300 }}\\n            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n            treeData={treeData}\\n            placeholder=\\\"Please select\\\"\\n        />\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Multi-choice\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You could use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"multiple\"), \" to set mode to multi-choice. When all child items are selected, the parent item will be selected.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"Use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"leafOnly\"), \" if you prefer to render leaf nodes only and the corresponding params for onChange will also be leaf nodes values.  \"), 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 { TreeSelect } from '@douyinfe/semi-ui';\\n\\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                            label: 'Chengdu',\\n                            value: 'Chengdu',\\n                            key: '0-0-2',\\n                        },\\n                    ],\\n                },\\n                {\\n                    label: 'Japan',\\n                    value: 'Japan',\\n                    key: '0-1',\\n                    children: [\\n                        {\\n                            label: 'Osaka',\\n                            value: 'Osaka',\\n                            key: '0-1-0'\\n                        }\\n                    ]\\n                },\\n            ],\\n        },\\n        {\\n            label: 'North America',\\n            value: 'North America',\\n            key: '1',\\n            children: [\\n                {\\n                    label: 'United States',\\n                    value: 'United States',\\n                    key: '1-0'\\n                },\\n                {\\n                    label: 'Canada',\\n                    value: 'Canada',\\n                    key: '1-1'\\n                }\\n            ]\\n        }\\n    ];\\n    return (\\n        <div>\\n            <TreeSelect\\n                style={{ width: 300 }}\\n                multiple\\n                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                treeData={treeData}\\n                placeholder=\\\"Please select\\\"\\n            />\\n            <br/>\\n            <br/>\\n            <TreeSelect\\n                style={{ width: 300 }}\\n                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                treeData={treeData}\\n                multiple\\n                leafOnly\\n                placeholder=\\\"Display leaf nodes only\\\"\\n            />\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Limit Tags Number\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"In the multi-selection scenario, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"maxTagCount\"), \" can be used to limit the number of tags displayed, and the excess part will be displayed in the form of +N.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"Use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showRestTagsPopover\"), \" (>= v2.22.0) to set whether hover +N displays Popover after exceeding \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"maxTagCount\"), \", the default is \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"false\"), \". Also, popovers can be configured 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 { TreeSelect } 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                            label: 'Chengdu',\\n                            value: 'Chengdu',\\n                            key: '0-0-2',\\n                        },\\n                    ],\\n                },\\n                {\\n                    label: 'Japan',\\n                    value: 'Japan',\\n                    key: '0-1',\\n                    children: [\\n                        {\\n                            label: 'Osaka',\\n                            value: 'Osaka',\\n                            key: '0-1-0'\\n                        }\\n                    ]\\n                },\\n            ],\\n        },\\n        {\\n            label: 'North America',\\n            value: 'North America',\\n            key: '1',\\n            children: [\\n                {\\n                    label: 'United States',\\n                    value: 'United States',\\n                    key: '1-0'\\n                },\\n                {\\n                    label: 'Canada',\\n                    value: 'Canada',\\n                    key: '1-1'\\n                }\\n            ]\\n        }\\n    ];\\n\\n    const textStyle = { margin: '20px 0 10px' };\\n\\n    return ( \\n        <div>\\n            <h4 style={textStyle}>maxTagCount=2:</h4>\\n            <TreeSelect\\n                multiple\\n                maxTagCount={2}\\n                style={{ width: 300 }}\\n                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                treeData={treeData}\\n                placeholder=\\\"When more than two tabs are selected it will collapse\\\"\\n                defaultValue={['Beijing', 'Chengdu', 'Canada']}\\n            />\\n            <h4 style={textStyle}>maxTagCount=2, showRestTagsPopover:</h4>\\n            <TreeSelect\\n                showRestTagsPopover={true}\\n                restTagsPopoverProps={{ position: 'top' }}\\n                multiple\\n                maxTagCount={2}\\n                style={{ width: 300 }}\\n                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                treeData={treeData}\\n                placeholder=\\\"hover +N to view\\\"\\n                defaultValue={['Beijing', 'Chengdu', 'Canada']}\\n            />\\n        </div>\\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. By default it searches the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"label\"), \" property of the data. You can use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"treeNodeFilterProp\"), \" to set another property to search or pass in a function to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"filterTreeNode\"), \" to customize search behavior.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You could also use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showFilteredOnly\"), \" if you prefer to display filtered results only.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"If you want to get specific information about the search results, you can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onSearch\"), \" callback function. See the API list for the specific parameters of the function.\"), 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 { TreeSelect, Switch } from '@douyinfe/semi-ui';\\n\\nclass Demo extends React.Component {\\n    constructor() {\\n        super();\\n        this.state = {\\n            showFilteredOnly: false,\\n        };\\n        this.onChange = this.onChange.bind(this);\\n        this.onSearch = this.onSearch.bind(this);\\n    }\\n    onChange(showFilteredOnly) {\\n        this.setState({ showFilteredOnly });\\n    }\\n    onSearch(inputValue, filteredExpandedKeys, filteredNodes) {\\n        console.log('onSearch', inputValue, filteredExpandedKeys, filteredNodes);\\n    }\\n    render() {\\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                        label: 'Japan',\\n                        value: 'Japan',\\n                        key: '0-1',\\n                        children: [\\n                            {\\n                                label: 'Osaka',\\n                                value: 'Osaka',\\n                                key: '0-1-0'\\n                            }\\n                        ]\\n                    },\\n                ],\\n            },\\n            {\\n                label: 'North America',\\n                value: 'North America',\\n                key: '1',\\n                children: [\\n                    {\\n                        label: 'United States',\\n                        value: 'United States',\\n                        key: '1-0'\\n                    },\\n                    {\\n                        label: 'Canada',\\n                        value: 'Canada',\\n                        key: '1-1'\\n                    }\\n                ]\\n            }\\n        ];\\n        const { showFilteredOnly } = this.state;\\n        return (\\n            <>\\n                <span>showFilteredOnly</span>\\n                <Switch\\n                    checked={showFilteredOnly}\\n                    onChange={this.onChange}\\n                    size=\\\"small\\\"\\n                />\\n                <br/>\\n                <br/>\\n                <TreeSelect\\n                    style={{ width: 300 }}\\n                    dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                    treeData={treeData}\\n                    filterTreeNode\\n                    showFilteredOnly={showFilteredOnly}\\n                    placeholder=\\\"Single Searchable TreeSelect\\\"\\n                    searchPlaceholder=\\\"Start searching\\\"\\n                    onSearch={this.onSearch}\\n                />\\n                <br/>\\n                <br/>\\n                <TreeSelect\\n                    style={{ width: 300 }}\\n                    dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                    treeData={treeData}\\n                    multiple\\n                    filterTreeNode\\n                    maxTagCount={2}\\n                    showFilteredOnly={showFilteredOnly}\\n                    placeholder=\\\"Multiple Searchable TreeSelect\\\"\\n                    searchPlaceholder=\\\"Start searching\\\"\\n                    onSearch={this.onSearch}\\n                />\\n                <br/>\\n                <br/>\\n                <TreeSelect\\n                    style={{ width: 300 }}\\n                    dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                    treeData={treeData}\\n                    multiple\\n                    filterTreeNode\\n                    maxTagCount={2}\\n                    showFilteredOnly={showFilteredOnly}\\n                    placeholder=\\\"search input autofocus\\\"\\n                    searchPlaceholder=\\\"autofocus\\\"\\n                    searchAutoFocus\\n                    onSearch={this.onSearch}\\n                />\\n            </>\\n        );\\n    }\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Search Box Position\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"searchPosition\"), \" to set the position of the search box, optional: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"dropdown\"), \" (default), \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"trigger\"), \".\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"When the input box is at trigger:\"), mdx(\"ol\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"The placeholder of the search box is controlled by \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"placeholder\"), \";\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"When \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"showClear=true\"), \", click the clear button of the input box, the inputValue and value will be cleared at the same time.\")), 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 { TreeSelect } from '@douyinfe/semi-ui';\\n\\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                    label: 'Japan',\\n                    value: 'Japan',\\n                    key: '0-1',\\n                    children: [\\n                        {\\n                            label: 'Osaka',\\n                            value: 'Osaka',\\n                            key: '0-1-0'\\n                        }\\n                    ]\\n                },\\n            ],\\n        },\\n        {\\n            label: 'North America',\\n            value: 'North America',\\n            key: '1',\\n            children: [\\n                {\\n                    label: 'United States',\\n                    value: 'United States',\\n                    key: '1-0'\\n                },\\n                {\\n                    label: 'Canada',\\n                    value: 'Canada',\\n                    key: '1-1'\\n                }\\n            ]\\n        }\\n    ];\\n    return (\\n        <>\\n            <TreeSelect\\n                searchPosition=\\\"trigger\\\"\\n                style={{ width: 300 }}\\n                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                treeData={treeData}\\n                filterTreeNode\\n                placeholder=\\\"Single selection\\\"\\n            />\\n            <br />\\n            <br />\\n            <TreeSelect\\n                searchPosition=\\\"trigger\\\"\\n                style={{ width: 300 }}\\n                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                treeData={treeData}\\n                multiple\\n                filterTreeNode\\n                maxTagCount={2}\\n                placeholder=\\\"Multiple selection\\\"\\n            />\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Size\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can set the size by \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"size\"), \", one of: 'small'\\u3001'default'\\u3001'large'\"), 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 { TreeSelect } from '@douyinfe/semi-ui';\\n\\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                    label: 'Japan',\\n                    value: 'Japan',\\n                    key: '0-1',\\n                    children: [\\n                        {\\n                            label: 'Osaka',\\n                            value: 'Osaka',\\n                            key: '0-1-0'\\n                        }\\n                    ]\\n                },\\n            ],\\n        },\\n        {\\n            label: 'North America',\\n            value: 'North America',\\n            key: '1',\\n            children: [\\n                {\\n                    label: 'United States',\\n                    value: 'United States',\\n                    key: '1-0'\\n                },\\n                {\\n                    label: 'Canada',\\n                    value: 'Canada',\\n                    key: '1-1'\\n                }\\n            ]\\n        }\\n    ];\\n    return ( \\n        <div>\\n            <TreeSelect\\n                style={{ width: 300 }}\\n                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                treeData={treeData}\\n                multiple\\n                size=\\\"small\\\"\\n                placeholder=\\\"small\\\"\\n            />\\n            <br />\\n            <br />\\n            <TreeSelect\\n                style={{ width: 300 }}\\n                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                treeData={treeData}\\n                multiple\\n                size=\\\"default\\\"\\n                placeholder=\\\"default\\\"\\n            />\\n            <br />\\n            <br />\\n            <TreeSelect\\n                style={{ width: 300 }}\\n                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                treeData={treeData}\\n                multiple\\n                size=\\\"large\\\"\\n                placeholder=\\\"large\\\"\\n            />\\n        </div>\\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 { TreeSelect } from '@douyinfe/semi-ui';\\n\\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    return (\\n        <div>\\n            <TreeSelect\\n                style={{ width: 300 }}\\n                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                treeData={treeData}\\n                disabled\\n                placeholder=\\\"Disabled TreeSelect\\\"\\n            />\\n            <br />\\n            <br />\\n            <TreeSelect\\n                style={{ width: 300 }}\\n                defaultValue={'Shanghai'}\\n                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                treeData={treeData}\\n                disabled\\n            />\\n            <br />\\n            <br />\\n            <TreeSelect\\n                style={{ width: 300 }}\\n                defaultValue={['Shanghai', 'North America']}\\n                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                treeData={treeData}\\n                multiple\\n                disabled\\n            />\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Disable Strictly\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"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 \\\"China\\\" is strictly disabled. Therefore, when we change the selected state of its parent node \\\"Asia\\\", it will not affect the selected state of the node \\\"China\\\".\"), 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 { TreeSelect } from '@douyinfe/semi-ui';\\n\\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                    disable: true,\\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                    label: 'Japan',\\n                    value: 'Japan',\\n                    key: '0-1',\\n                },\\n            ],\\n        },\\n        {\\n            label: 'North America',\\n            value: 'North America',\\n            key: '1',\\n        }\\n    ];\\n    return ( \\n        <div>\\n            <TreeSelect\\n                style={{ width: 300 }}\\n                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                treeData={treeData}\\n                disableStrictly\\n                multiple\\n                defaultValue={['Shanghai']}\\n            />\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Default Expand All\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Both \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"defaultExpandAll\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"expandAll\"), \" can set the default expanded/collapsed state of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"TreeSelect\"), \". The difference between the two is that \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"defaultExpandAll\"), \" only takes effect during initialization, while \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"expandAll\"), \" will take effect not only during initialization, but also when the data (\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"treeData\"), \") is dynamically updated.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"In the demo below, after \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"TreeData\"), \" is updated, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"defaultExpandAll\"), \" becomes invalid, and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"expandAll\"), \" still takes effect.\"), 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, useEffect } from 'react';\\nimport { TreeSelect } from '@douyinfe/semi-ui';\\n\\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    const [data, setData] = useState([]);\\n\\n    useEffect(() => {\\n        setTimeout(() => setData(treeData), 500);\\n    }, []);\\n\\n    return (\\n        <>\\n            <TreeSelect\\n                style={{ width: 300, marginBottom: 20 }}\\n                expandAll\\n                treeData={data}\\n                placeholder=\\\"expandAll\\\"\\n            />\\n            <TreeSelect\\n                style={{ width: 300 }}\\n                defaultExpandAll\\n                treeData={data}\\n                placeholder=\\\"defaultExpandAll\\\"\\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 TreeSelect 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 from 'react';\\nimport { TreeSelect } from '@douyinfe/semi-ui';\\n\\nclass Demo extends React.Component {\\n    constructor() {\\n        super();\\n        this.state = {\\n            value: 'Shanghai'\\n        };\\n    }\\n    onChange(value) {\\n        this.setState({ value });\\n    }\\n    render() {\\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        return (\\n            <TreeSelect\\n                style={{ width: 300 }}\\n                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                treeData={treeData}\\n                value={this.state.value}\\n                placeholder=\\\"Please select\\\"\\n                onChange={e => this.onChange(e)}\\n            />\\n        );\\n    }\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Checked RelationShip\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Version: >= 2.5.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 { TreeSelect } 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    return (\\n        <TreeSelect\\n            defaultValue='Asia'\\n            multiple\\n            checkRelation='unRelated'\\n            style={{ width: 300 }}\\n            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n            treeData={treeData}\\n        />\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Controlled Expansion with Search\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"When \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"expandedKeys\"), \" is passed in, it is a controlled expansion component, which can be used with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onExpand\"), \". When the expansion is controlled, if the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"filterTreeNode\"), \" is turned on and the search is performed, the node will no longer be automatically expanded. At this time, the expansion of the node is completely controlled by the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"expandedKeys\"), \". You can use the parameter \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"filteredExpandedKeys\"), \" (version: >= 2.6.0) of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onSearch\"), \" to realize the search expansion effect when the expansion is controlled.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true hideInDSM\",\n    \"live\": \"true\",\n    \"hideInDSM\": true\n  }, \"import React, { useState } from 'react';\\nimport { TreeSelect } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [expandedKeys, setExpandedKeys] = useState([]);\\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    return (\\n        <TreeSelect\\n            style={{ width: 300 }}\\n            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n            treeData={treeData}\\n            filterTreeNode\\n            expandedKeys={expandedKeys}\\n            onExpand={expandedKeys => setExpandedKeys(expandedKeys)}\\n            onSearch={(inputValue, filteredExpandedKeys, filteredNodes) => {\\n                setExpandedKeys([...filteredExpandedKeys, ...expandedKeys]);\\n            }}\\n        />\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Virtualized TreeSelect\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"If you need to render large sets of tree structured data, you could use virtualized tree. In virtualized mode, animation / motion is disabled for better performance. \"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The property \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"virtualize\"), \" is an object consisting of the following values: \"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"height: Height of the dropDown, If passed in as a string, computed height should not be zero for render purpose, in other words, parent node should have offsetHeight. Pass in a number recommended.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"width: Width of the dropDown.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"itemSize: Height for each line of treeNode, required\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"If tree is searchable, you could also set \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showFilteredOnly={true}\"), \" to reduce time of rendering for results.\"), 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 { TreeSelect, Button } from '@douyinfe/semi-ui';\\n\\nclass Demo extends React.Component {\\n    constructor() {\\n        super();\\n        this.state = {\\n            gData: [],\\n            total: 0,\\n        };\\n        this.onGen = this.onGen.bind(this);\\n    }\\n\\n    generateData(x = 5, y = 4, z = 3, gData = []) {\\n        // x\\uFF1Anumber of nodes\\n        // y\\uFF1Anumber of nodes with children in each level\\n        // z\\uFF1Anumber of level\\n        function _loop(_level, _preKey, _tns) {\\n            const preKey = _preKey || '0';\\n            const tns = _tns || gData;\\n\\n            const children = [];\\n            for (let i = 0; i < x; i++) {\\n                const key = `${preKey}-${i}`;\\n                tns.push({ label: `${key}-label`, key: `${key}-key`, value: `${key}-value` });\\n                if (i < y) {\\n                    children.push(key);\\n                }\\n            }\\n            if (_level < 0) {\\n                return tns;\\n            }\\n            const __level = _level - 1;\\n            children.forEach((key, index) => {\\n                tns[index].children = [];\\n                return _loop(__level, key, tns[index].children);\\n            });\\n\\n            return null;\\n        }\\n        _loop(z);\\n        \\n        function calcTotal(x, y, z) {\\n            const rec = n => (n >= 0 ? x * y ** n-- + rec(n) : 0);\\n            return rec(z + 1);\\n        }\\n        return { gData, total: calcTotal(x, y, z) };\\n    }\\n\\n      \\n    onGen() {\\n        const { gData, total } = this.generateData();\\n        this.setState({\\n            gData,\\n            total\\n        });\\n    };\\n  \\n    render() {\\n        return (\\n            <div style={{ padding: '0 20px' }}>\\n                <Button onClick={this.onGen}>Generate Data: </Button>\\n                <span>In total: {this.state.total}</span>\\n                <br/>\\n                <br/>\\n                {this.state.gData.length ? (\\n                    <TreeSelect\\n                        style={{ width: 300 }}\\n                        treeData={this.state.gData}\\n                        filterTreeNode\\n                        showFilteredOnly\\n                        placeholder=\\\"Please select\\\"\\n                        dropdownStyle={{ \\n                            overflow: 'hidden'\\n                        }}\\n                        virtualize={{\\n                            itemSize: 28,\\n                            // dropDown height 300 minus search box height minus padding 8 * 2\\n                            // or if you set dropDown height, it will automatically fill rest space\\n                            height: 236                \\n                        }}\\n                    />\\n                ) : null}\\n            </div>\\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 from 'react';\\nimport { TreeSelect, Button } from '@douyinfe/semi-ui';\\n\\nclass Demo extends React.Component {\\n    constructor() {\\n        super();\\n        this.state = {\\n            treeData: [],\\n        };\\n        this.add = this.add.bind(this);\\n    }\\n    add() {\\n        let itemLength = Math.floor(Math.random() * 5) + 1;\\n        let treeData = 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: `Leaf-${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        this.setState({ treeData });\\n    }\\n    render() {\\n        return (\\n            <>\\n                <TreeSelect\\n                    style={{ width: 300 }}\\n                    dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                    treeData={this.state.treeData}\\n                    placeholder=\\\"Please select\\\"\\n                />\\n                <br/>\\n                <br/>\\n                <Button onClick={this.add}>\\n                    Update Data\\n                </Button>\\n            </>\\n        );\\n    }\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Load Data Asynchronously\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You could use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"loadData\"), \" to load treeData asynchronously on node expansion. Notice \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"isLeaf\"), \" is required to mark node as leaf in treeData.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true hideInDSM\",\n    \"live\": \"true\",\n    \"hideInDSM\": true\n  }, \"import React, { useState } from 'react';\\nimport { TreeSelect } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const initialData = [\\n        {\\n            label: 'Expand to load',\\n            value: '0',\\n            key: '0',\\n        },\\n        {\\n            label: 'Expand to load',\\n            value: '1',\\n            key: '1',\\n        },\\n        {\\n            label: 'Leaf Node',\\n            value: '2',\\n            key: '2',\\n            isLeaf: true,\\n        },\\n    ];\\n    const [treeData, setTreeData] = useState(initialData);\\n\\n    function updateTreeData(list, key, children) {\\n        return list.map(node => {\\n            if (node.key === key) {\\n                return { ...node, children };\\n            }\\n            if (node.children) {\\n                return { ...node, children: updateTreeData(node.children, key, children) };\\n            }\\n            return node;\\n        });\\n    }\\n\\n    function onLoadData({ key, children }) {\\n        return new Promise(resolve => {\\n            if (children) {\\n                resolve();\\n                return;\\n            }\\n            setTimeout(() => {\\n                setTreeData(origin =>\\n                    updateTreeData(origin, key, [\\n                        {\\n                            label: 'Child Node',\\n                            key: `${key}-0`,\\n                        },\\n                        {\\n                            label: 'Child Node',\\n                            key: `${key}-1`,\\n                        },\\n                    ]),\\n                );\\n                resolve();\\n            }, 1000);\\n        });\\n    }\\n    return (\\n        <TreeSelect\\n            loadData={onLoadData}\\n            treeData={treeData}\\n            style={{ width: 300 }}\\n            placeholder=\\\"Please select\\\"\\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 triggerRender input is as follows:\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\"\n  }, \"interface triggerRenderProps {\\n    componentProps: TreeSelectProps;// TreeSelect props\\n    disabled: boolean;              // disabled status\\n    value: TreeNodeData[];              // data of the selected node\\n    inputValue: string;             // value of the input box\\n    onClear: e => void;             // onClear function\\n    placeholder: string;            // placeholder\\n    /* The function called when deleting a single item, \\n     *   with the key of the item as an input parameter, \\n     *  supported from version v2.32.0\\n     */\\n    onRemove: key => void;\\n    /* It is used to start the search when the value of the Input box is updated. \\n     * When you update the value of the Input component customized by triggerRender, \\n     * you should call this function to synchronize the state with the TreeSelect \\n     * internally. you need to set the filterTreeNode parameter to non-false when use it,\\n     * and set searchPosition to 'trigger'. It is supported from v2.32.0\\n     */\\n    onSearch: inputValue => 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 { TreeSelect, Button, Tag, TagInput } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const [value, setValue] = useState([]);\\n    const treeData = useMemo(() => [\\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    const onValueChange = useCallback((value) => {\\n        console.log('onChange', value);\\n    });\\n\\n    const renderTrigger = useCallback((props) => {\\n        const { value, onSearch, onRemove, inputValue } = props;\\n        const tagInputValue = value.map(item => item.key);\\n        const renderTagInMultiple = (key) => {\\n            const label = value.find(item => item.key === key).label;\\n            const onCloseTag = (value, e, tagKey) => {\\n                onRemove(tagKey);\\n            };\\n            return <Tag style={{ marginLeft: 2 }} tagKey={key} key={key} onClose={onCloseTag} closable>{label}</Tag>;\\n        };\\n        return (\\n            <TagInput\\n                inputValue={inputValue}\\n                value={tagInputValue}\\n                onInputChange={onSearch}\\n                renderTagItem={renderTagInMultiple}\\n            />\\n        );\\n    }, []);\\n\\n    return (\\n        <TreeSelect\\n            triggerRender={renderTrigger}\\n            filterTreeNode\\n            searchPosition=\\\"trigger\\\"\\n            multiple\\n            treeData={treeData}\\n            placeholder='Custom Trigger'\\n            onChange={onValueChange}\\n            style={{ width: 300 }}\\n        />\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Custom Rendering Selected Item\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can use renderSelectedItem to customize the rendering structure of the selected item in the selection box.\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"In not multiple mode: \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"renderSelectedItem(treeNode: TreeNodeData) => content: ReactNode\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"In multiple mode: \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"renderSelectedItem(treeNode: TreeNodeData, { index:number, onClose:function }) => { isRenderInTag: bool, content: ReactNode }\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"When isRenderInTag is true, content wraps are automatically rendered in the Tag (with background color and close button)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"When isRenderInTag is false, the returned content will be rendered directly\")))), 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 { TreeSelect, Tag } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const [value, setValue] = useState([]);\\n    const treeData = useMemo(() => [\\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            label: 'South America',\\n            value: 'South America',\\n            key: '2',\\n        },\\n        {\\n            label: 'Antarctica',\\n            value: 'Antarctica',\\n            key: '3',\\n        },\\n    ], []);\\n    \\n    return (\\n        <>\\n            <h4>Single TreeSelect</h4>\\n            <TreeSelect\\n                style={{ width: 300 }}\\n                treeData={treeData}\\n                renderSelectedItem={item => item.label}\\n            />\\n            <h4>Multiple + isRenderInTag=true</h4>\\n            <TreeSelect\\n                style={{ width: 300 }}\\n                treeData={treeData}\\n                multiple\\n                renderSelectedItem={(item, { index, onClose }) => ({ content: item.label, isRenderInTag: true })}\\n            />\\n            <h4>Multiple + isRenderInTag=false</h4>\\n            <TreeSelect\\n                style={{ width: 300 }}\\n                treeData={treeData}\\n                multiple\\n                maxTagCount={2}\\n                renderSelectedItem={(item, { index, onClose }) => ({ content: <Tag key={index} color=\\\"white\\\">{item.value}</Tag>, isRenderInTag: false })}\\n            />\\n        </>\\n    );\\n}\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API Reference\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"TreeSelect\"), 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 the pop-up layer automatically adjusts the direction when it is obscured (only vertical direction is supported for the time being, and the inserted parent is body)\"), 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  }, \"autoExpandParent\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Toggle whether to expand parent nodes automatically\"), 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  }, \"autoMergeValue\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Sets the automerge value. Specifically, when enabled, when a parent node is selected, the value will not include the descendants of the node. (Works if leafOnly is false)\"), 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  }, \"2.61.0\")), 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  }, \"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  }, \"2.5.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  }, \"Class name\"), 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  }, \"clickToHide\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to close the drop-down layer automatically when selecting, only works in single-selection mode\"), 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  }, \"clickTriggerToHide\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"When the panel is open, whether to close the panel after clicking the Trigger\"), 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  }, \"2.32.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultExpandAll\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Set whether to expand all nodes during initialization. And if the data (\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"treeData\"), \") changes, this api cannot affect the expansion of the node. If you need this, you can use \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"expandAll\")), 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  }, \"defaultExpandedKeys\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Keys of default expanded nodes. Direct child nodes will be displayed.\"), 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  }, \"defaultOpen\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Toggle whether to open dropdown menu 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 value\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(ApiType, {\n    detail: \"string \\\\| number \\\\| TreeNodeData \\\\| (string \\\\| number \\\\| TreeNodeData)[]\",\n    mdxType: \"ApiType\"\n  }, \"ValueType\")), 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  }, \"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  }, \"disableStrictly\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Disable Strictly\"), 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  }, \"dropdownClassName\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"className\"), \" property for dropDown\"), 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  }, \"dropdownMatchSelectWidth\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Toggle if min-width of dropDown menu should be same as width of select 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  }, \"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  }, \"Style for dropDown\"), 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  }, \"emptyContent\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Empty content when no data\"), 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  }, \"expandAction\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Expand logic, one of false, 'click', 'doubleClick'. Default is set to false, which means item will not be expanded on clicking except on expand icon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean \", \"|\", \" string\"), 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  }, \"expandAll\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Set whether to expand all nodes by default. If the data (\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"treeData\"), \") changes, the default expansion will still be affected by this api\"), 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  }, \"expandedKeys\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\uFF08Controlled\\uFF09Keys of expanded nodes. Direct child nodes will be displayed.\"), 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  }, \"expandIcon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Custom expand icon, \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/navigation/tree#Custom%20expansion%20icon\"\n  }, \"example\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode \", \"|\", \" (props: expandProps)=>ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.75.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"keyMaps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Customize the key, label, and value fields in the node. If you set a custom name for the label in keyMaps and enable search, to ensure correct search, you need to set treeNodeFilterProp to one of the keys of treeData or use a custom search function through filterTreeNode.\"), 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  }, \"2.47.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  }, \"Toggle whether searchable or pass in a function to customize search behavior, data parameter provided since v2.28.0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\", \"|\", \" \", mdx(ApiType, {\n    detail: \"(inputValue: string, treeNodeString: string, data?: TreeNodeData) => boolean\",\n    mdxType: \"ApiType\"\n  }, \"Function\")), 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  }, \"Container to render pop-up, you need 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  }, \"function():HTMLElement\"), 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  }, \"labelEllipsis\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Toggle whether to ellipsis label when overflow\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\", \"|\", \"true(virtualized)\"), 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  }, \"Toggle whether to display tags for leaf nodes only and for onChange callback params in multiple mode\"), 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  }, \"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  }, \"(treeNode: TreeNodeData) => Promise\"), 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  }, \"loadedKeys\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\uFF08Controlled\\uFF09Mark node as loaded, working with \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"loadData\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Set< 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  }, \"maxTagCount\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Maximum number of tags displayed\"), 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  }, \"motionExpand\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Toggle whether to turn on animation for expansion\"), 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  }, \"multiple\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Toggle whether in multi-choice mode\"), 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  }, \"optionListStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Style for optionList\"), 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  }, \"outerBottomSlot\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Rendered at the bottom of the pop-up layer, custom slot level with optionList\"), 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  }, \"outerTopSlot\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Rendered at the top of the pop-up layer, custom slot level with optionList. If turn on filterTreeNode, it will replace search box as well. You could use static search method to customize instead.\"), 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  }, \"placeholder\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Placeholder for input box\"), 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  }, \"position\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Pop-up position, optional values refer to Tooltip position\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"bottomLeft\"), 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  }, \"prefix\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Prefix\"), 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  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderFullLabel\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Custom option render function, \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/navigation/tree#Advanced%20FullRender\"\n  }, \"Detailed Params and Usage\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(obj) => 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  }, \"renderLabel\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Custom label render function. The searchWord parameter is supported since 2.65.0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(ApiType, {\n    detail: \"(label: ReactNode, data: TreeNodeData, searchWord: string) => ReactNode\",\n    mdxType: \"ApiType\"\n  }, \"(label, data, searchWord) => 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  }, \"renderSelectedItem\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"render selected item\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Function\"), 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  }, \"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  }, \"2.22.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"searchAutoFocus\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether autofocus for search box\"), 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  }, \"searchPlaceholder\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Placeholder for search box\"), 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, one of: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"dropdown\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"trigger\")), 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  }, \"dropdown\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), 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  }, \"When the value is not empty, whether the trigger displays the 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  }, \"showFilteredOnly\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Toggle whether to displayed filtered result only in search mode\"), 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  }, \"showLine\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The option in the options panel shows connecting lines\"), 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.50.0\")), 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  }, \"2.22.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showSearchClear\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Toggle whether to support clear search 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  }, \"size\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Size for input box\\uFF0Cone of \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"large\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"small\"), \"\\uFF0C\", 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  }, \"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\"), 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  }, \"Data for treeNodes\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"TreeNodeData[]\"), 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  }, \"Property in a \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"TreeNodeData\"), \" used to search\"), 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  }, \"treeNodeLabelProp\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Property in a \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"TreeNodeData\"), \" used to display\"), 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  }, \"validateStatus\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Validate status\\uFF0Cone of \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"warning\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"error\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"default\"), \", only affects the background color of the component\"), 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  }, \"value\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Value data of current item, used when TreeSelect is a controlled component\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(ApiType, {\n    detail: \"string \\\\| number \\\\| TreeNodeData \\\\| (string \\\\| number \\\\| TreeNodeData)[]\",\n    mdxType: \"ApiType\"\n  }, \"ValueType\")), 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  }, \"virtualize\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Efficiently rendering large lists, refer to Tree - VirtualizeObj. Motion is disabled when tree is rendered as virtualized list.\"), 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 treeSelect 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  }, \"onBlur\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback function when treeSelect blur\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(event)\"), 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  }, \"Callback function when treeSelect focus\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(event)\"), 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, return the value property of data\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Function\"), 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, onChange turn to Function(node, e)\"), 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  }, \"onClear\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback triggered when clear button is clicked\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: Event) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.52.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onExpand\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback function when expand or collapse a node\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(ApiType, {\n    detail: \"(expandedKeys:array, {expanded: bool, node}) => void\",\n    mdxType: \"ApiType\"\n  }, \"(expandedKeys, object) => 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  }, mdx(ApiType, {\n    detail: \"(loadedKeys: Set<string\\\\>, treeNode: TreeNodeData) => void\",\n    mdxType: \"ApiType\"\n  }, \"(loadedKeys, treeNode) => 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 search value changes. \", mdx(\"br\", null), mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"filteredExpandedKeys\"), \" represents the key of the node expanded due to search or value/defaultValue, which can be used when expandedKeys is controlled\", mdx(\"br\", null), \" \", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"filteredExpandedKeys is supported in 2.6.0\"), \". \", mdx(\"br\", null), mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"filteredNodes\"), \" represents the nodes hit by the search. \", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"filteredNodes is supported in 2.57.0\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(input: string, filteredExpandedKeys: string[], filteredNodes: TreeNodeData[])\"), 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, return the key property of data\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(ApiType, {\n    detail: \"(selectedKey:string, selected: bool, selectedNode: TreeNodeData) => void\",\n    mdxType: \"ApiType\"\n  }, \"(selectedKey, selected, selectedNode)=>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  }, \"onVisibleChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"A callback triggered when the pop-up layer is displayed/hidden\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(isVisible:boolean)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"TreeNodeData\"), mdx(\"blockquote\", {\n    parentName: \"section\"\n  }, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Key for \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"TreeNodeData\"), \" is required and must be unique\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"label\"), \" can be duplicated. Value is not required. In this case, the value property in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onChange\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"value\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"defaultValue\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onChangeWithObject\"), \" will point to key property.\\nTo ensure everything behave as expected, keep a consistency of whether to have value or not to have value.\")), 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  }, \"value\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Value\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\", \"|\", \"number\"), 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  }, \"Displayed label\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\", \"|\", \"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  }, \"icon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Icon\"), 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  }, \"disabled\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Disabled, supported in multiple select mode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"key\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Required and must be unique\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), 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  }, \"Whether it is a leaf node\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), 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 TreeSelect 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  }, \"Name\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Description\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"search(sugInput: string)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"If you need to customize the search box externally, you can actively call this method when the value of the custom search box changes to change the filtering results\"))))), 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  }, \"TreeSelect will automatically set \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-label\"), \" to 'TreeSelect', and also support users to set \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-label\"), \" to indicate the function of the TreeSelect;\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"TreeSelect allows users to set \", 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\"), \", in addition, Form will automatically set these properties for Form.TreeSelect;\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"TreeSelect will set \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-disabled\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-checked\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-selected\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-level\"), \" for each child node to indicate node status and level;\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Demo:\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\"\n  }, \"    <TreeSelect\\n        /* other attributes */\\n        aria-label='example treeSelect'\\n    />\\n\"))), 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/treeselect","next":{"fields":{"slug":"zh-CN/input/treeselect"},"id":"31d5f960-c63f-585b-a6a1-b4b13984d3eb","frontmatter":{"title":"TreeSelect 树选择器","localeCode":"zh-CN","icon":"doc-treeselect","showNew":null}},"previous":{"fields":{"slug":"zh-CN/input/transfer"},"id":"8f56e470-4f6b-5e43-aa0d-e7b0ce16635a","frontmatter":{"title":"Transfer 穿梭框","localeCode":"zh-CN","icon":"doc-transfer","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}