{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/input/transfer","result":{"data":{"current":{"frontmatter":{"title":"Transfer","order":51,"brief":"A more intuitive and efficient multiple-selection selector, which can reveal more information about options, and supports search functions. The disadvantage is that it takes up more space","icon":"doc-transfer"},"fields":{"type":"input"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic Usage"},{"url":"#grouped","title":"Grouped"},{"url":"#custom-filtering-logic-custom-option-data-rendering","title":"Custom filtering logic, custom option data rendering"},{"url":"#disabled","title":"Disabled"},{"url":"#drag-and-drop-sort","title":"Drag and drop sort"},{"url":"#drag-and-drop--custom-selected-rendering","title":"Drag and drop + custom selected rendering"},{"url":"#custom-rendering-header-information-in-panel","title":"Custom rendering header information in panel"},{"url":"#fully-custom-rendering","title":"Fully custom rendering"},{"url":"#fully-custom-rendering-drag-and-drop-sorting","title":"Fully custom rendering, drag and drop sorting"},{"url":"#tree-transfer","title":"Tree Transfer"},{"url":"#tree-transfer-with-custom-header-showing-leaf-node-count","title":"Tree Transfer with Custom Header Showing Leaf Node Count"}]},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]},{"url":"#api-reference","title":"API Reference","items":[{"url":"#transfer-props","title":"Transfer Props"},{"url":"#item-interface","title":"Item Interface"},{"url":"#groupitem-interface","title":"GroupItem Interface"},{"url":"#treeitem-interface","title":"TreeItem Interface"}]},{"url":"#methods","title":"Methods"},{"url":"#design-tokens","title":"Design Tokens"},{"url":"#related-materials","title":"Related materials"}]},"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\": 51,\n \"category\": \"Input\",\n \"title\": \"Transfer\",\n \"icon\": \"doc-transfer\",\n \"width\": \"60%\",\n \"dir\": \"column\",\n \"brief\": \"A more intuitive and efficient multiple-selection selector, which can reveal more information about options, and supports search functions. The disadvantage is that it takes up more space\"\n};\nvar makeShortcode = function makeShortcode(name) {\n return function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n };\n};\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"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 { Transfer } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Basic Usage\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"dataSource should have value\\u3001label\\u3001key.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { Transfer } from '@douyinfe/semi-ui';\\n() => {\\n const data = Array.from({ length: 100 }, (v, i) => {\\n return {\\n label: `Item ${i}`,\\n value: i,\\n disabled: false,\\n key: `key-${i}`,\\n };\\n });\\n return (\\n console.log(values, items)}\\n />\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Grouped\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Set type to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"groupList\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"For grouped dataSource, the first-level child elements must have title and children attributes, structure reference \"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Does not support multi-level nesting\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { Transfer } from '@douyinfe/semi-ui';\\n() => {\\n const dataWithGroup = [\\n {\\n title: 'GroupA',\\n children: [\\n { label: 'A-1', value: 1, disabled: false, key: 1 },\\n { label: 'A-2', value: 2, disabled: false, key: 2 },\\n { label: 'A-3', value: 3, disabled: false, key: 3 },\\n ],\\n },\\n {\\n title: 'GroupB',\\n children: [\\n { label: 'B-1', value: 4, disabled: false, key: 4 },\\n { label: 'B-2', value: 5, disabled: false, key: 5 },\\n { label: 'B-3\\uFF08disabled\\uFF09', value: 6, disabled: true, key: 6 },\\n ],\\n },\\n {\\n title: 'GroupC',\\n children: [\\n { label: 'C-1', value: 7, disabled: false, key: 7 },\\n { label: 'C-2', value: 8, disabled: false, key: 8 },\\n { label: 'C-3', value: 9, disabled: false, key: 9 },\\n { label: 'C-4', value: 10, disabled: false, key: 10 },\\n { label: 'C-5', value: 11, disabled: false, key: 11 },\\n { label: 'C-6', value: 12, disabled: false, key: 12 },\\n { label: 'C-7', value: 13, disabled: false, key: 13 },\\n ],\\n },\\n ];\\n return (\\n console.log(values, items)}\\n />\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Custom filtering logic, custom option data rendering\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"filter\"), \" to customize the search logic. When it returns true, it means that the current item meets the filter rules and keeps the display of the current item in the list. If it returns false, it means it does not match, and the current item will be hidden.\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"When type is \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"treeList\"), \", if you need to customize search logic, you need to set \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"filter\"), \" to true and set a custom search function through \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"filterTreeNode\"), \" of \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"treeProps\"), \".\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"Using \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"renderSourceItem\"), \", you can customize the rendering structure of each source data on the left.\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"Using \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"renderSelectedItem\"), \" you can customize the rendering structure of each selected item on the right.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { Transfer, Avatar, Checkbox, Highlight } from '@douyinfe/semi-ui';\\nimport { IconClose } from '@douyinfe/semi-icons';\\n\\n() => {\\n const [searchText, setSearchText] = useState('');\\n const renderSourceItem = item => {\\n return (\\n
\\n {\\n item.onChange();\\n }}\\n key={item.label}\\n checked={item.checked}\\n style={{ height: 52, alignItems: 'center' }}\\n >\\n \\n {item.abbr}\\n \\n
\\n
\\n \\n
\\n
\\n \\n
\\n
\\n \\n
\\n );\\n };\\n\\n const renderSelectedItem = item => {\\n return (\\n
\\n \\n {item.abbr}\\n \\n
\\n
{item.label}
\\n
{item.value}
\\n
\\n \\n
\\n );\\n };\\n\\n const customFilter = (sugInput, item) => {\\n return item.value.includes(sugInput) || item.label.includes(sugInput);\\n };\\n\\n const data = [\\n { label: 'Xiakeman', value: 'xiakeman@example.com', abbr: 'Xia', color: 'amber', area: 'US', key: 1 },\\n { label: 'Shenyue', value: 'shenyue@example.com', abbr: 'Shen', color: 'indigo', area: 'UK', key: 2 },\\n { label: 'Wenjiamao', value: 'wenjiamao@example.com', abbr: 'Wen', color: 'cyan', area: 'HK', key: 3 },\\n { label: 'Quchenyi', value: 'quchenyi@example.com', abbr: 'Qu', color: 'blue', area: 'India', key: 4 },\\n { label: 'Quchener', value: 'quchener@example.com', abbr: 'Qu', color: 'blue', area: 'India', key: 5 },\\n { label: 'Quchensan', value: 'quchensan@example.com', abbr: 'Qu', color: 'blue', area: 'India', key: 6 },\\n ];\\n\\n return (\\n console.log(values, items)}\\n onSearch={searchText => setSearchText(searchText)}\\n />\\n );\\n};\\n\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-css\"\n }, \".components-transfer-demo-selected-item {\\n .semi-icon-close {\\n visibility: hidden;\\n color: var(--semi-color-tertiary);\\n }\\n &:hover {\\n .semi-icon-close {\\n visibility: visible;\\n }\\n }\\n}\\n\\n.components-transfer-demo-selected-item,\\n.components-transfer-demo-source-item {\\n height: 52px;\\n box-sizing: border-box;\\n display: flex;\\n align-items: center;\\n justify-content: space-between;\\n padding: 10px 12px;\\n &:hover {\\n background-color: var(--semi-color-fill-0);\\n }\\n .info {\\n margin-left: 8px;\\n flex-grow: 1;\\n }\\n .name {\\n font-size: 14px;\\n line-height: 20px;\\n }\\n .email {\\n font-size: 12px;\\n line-height: 16px;\\n color: var(--semi-color-text-2);\\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 dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { Transfer } from '@douyinfe/semi-ui';\\n() => {\\n const data = Array.from({ length: 20 }, (v, i) => {\\n return {\\n label: `Item ${i}`,\\n value: i,\\n disabled: false,\\n key: `key-${i}`,\\n };\\n });\\n return (\\n console.log(values, items)}\\n />\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Drag and drop sort\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Set \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"draggable\"), \" to true to enable the drag sort function. Support after v1.11.0\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { Transfer } from '@douyinfe/semi-ui';\\n() => {\\n const data = Array.from({ length: 30 }, (v, i) => {\\n return {\\n label: `Item ${i}`,\\n value: i,\\n disabled: false,\\n key: `key-${i}`,\\n };\\n });\\n return (\\n console.log(values, items)}\\n />\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Drag and drop + custom selected rendering\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Set \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"draggable\"), \" to true to enable the drag and drop sorting function; use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"renderSelectedItem\"), \" to customize the rendering of the selected items on the right;\\nYou can define the trigger as any ReactNode you want and add styles. Drag the trigger and use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"sortableHandle\"), \" to wrap it\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { Transfer, Checkbox, Avatar } from '@douyinfe/semi-ui';\\nimport { IconHandle, IconClose } from '@douyinfe/semi-icons';\\n\\n() => {\\n const renderSourceItem = item => {\\n return (\\n
\\n {\\n item.onChange();\\n }}\\n key={item.label}\\n checked={item.checked}\\n style={{ height: 52, alignItems: 'center' }}\\n >\\n \\n {item.abbr}\\n \\n
\\n
{item.label}
\\n
{item.value}
\\n
\\n \\n
\\n );\\n };\\n\\n const renderSelectedItem = item => {\\n const { sortableHandle } = item;\\n const DragHandle = sortableHandle(() => ); \\n return (\\n
\\n \\n \\n {item.abbr}\\n \\n
\\n
{item.label}
\\n
{item.value}
\\n
\\n \\n
\\n );\\n };\\n\\n const customFilter = (sugInput, item) => {\\n return item.value.includes(sugInput) || item.label.includes(sugInput);\\n };\\n\\n const data = [\\n { label: 'Xiakeman', value: 'xiakeman@example.com', abbr: 'Xia', color: 'amber', area: 'US', key: 1 },\\n { label: 'Shenyue', value: 'shenyue@example.com', abbr: 'Shen', color: 'indigo', area: 'UK', key: 2 },\\n { label: 'Wenjiamao', value: 'wenjiamao@example.com', abbr: 'Wen', color: 'cyan', area: 'HK', key: 3 },\\n { label: 'Quchenyi', value: 'quchenyi@example.com', abbr: 'Qu', color: 'blue', area: 'India', key: 4 },\\n { label: 'Quchener', value: 'quchener@example.com', abbr: 'Er', color: 'blue', area: 'India', key: 5 },\\n { label: 'Quchensan', value: 'quchensan@example.com', abbr: 'San', color: 'blue', area: 'India', key: 6 },\\n ];\\n\\n return (\\n console.log(values, items)}\\n />\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Custom rendering header information in panel\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Semi has provided \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"renderSourceHeader\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"renderSelectedHeader\"), \" parameter allows users to customize the header information of the left and right panels since version 2.29.0.\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"renderSourceHeader: (props: SourceHeaderProps) => ReactNode\"), mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"renderSelectedHeader: (props: SelectedHeaderProps) => ReactNode\"), mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"The parameter types are as follows:\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"type SourceHeaderProps = {\\n num: number; // The total number of data or the number of filtered results\\n showButton: boolean; // Whether to show select all/unselect all buttons\\n allChecked: boolean; // Whether the current data has been selected\\n onAllClick: () => void; // Function that should be called after clicking the select/unselect all button\\n leafOnlyNum?: number; // Only valid when type is treeList, represents the number of leaf nodes >=2.94.0\\n}\\n\\ntype SelectedHeaderProps = {\\n num: number; // The total number of selected data\\n showButton: boolean; // Whether to show the clear button\\n onClear: () => void // Function that should be called after clicking the clear button\\n}\\n\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"The example is as follows:\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { Transfer, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n const data = Array.from({ length: 30 }, (v, i) => {\\n return {\\n label: `Item ${i}`,\\n value: i,\\n disabled: false,\\n key: `key-${i}`,\\n };\\n });\\n\\n const renderSourceHeader = (props) => {\\n const { num, showButton, allChecked, onAllClick } = props;\\n return
\\n Total {num} items\\n {showButton && { allChecked ? 'Unselect all' : 'Select all' }}\\n
;\\n };\\n\\n const renderSelectedHeader = (props) => {\\n const { num, showButton, onClear } = props;\\n return
\\n {num} items selected\\n {showButton && Clear}\\n
;\\n };\\n\\n return (\\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Fully custom rendering\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Semi provides \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"renderSourcePanel\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"renderSelectedPanel\"), \" input parameters, allowing you to completely customize the rendering structure of the left and right panels\\nWith this function, you can directly reuse the logic capabilities inside the Transfer to implement the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Transfer\"), \" component with a highly customized style structure \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"renderSourcePanel: (sourcePanelProps: SourcePanelProps) => ReactNode\"), \"\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"SourcePanelProps\"), \" contains the following parameters, from which you can get data to render your Panel structure\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"interface SourcePanelProps {\\n value: Array; // key of all selected items\\n loading: boolean; // Whether loading\\n noMatch: boolean; // Whether there is no matching item that matches the current search value\\n filterData: Array // items that match the current search value\\n sourceData: Array; // All items\\n allChecked: boolean; // Whether to select all\\n showNumber: number; // Filter the number of results\\n inputValue: string; // the value of the input search box\\n onSearch: (searchString: string) => any; // The function that should be called when the search box changes, the input parameter is the search value\\n onAllClick: () => void; // The function that should be called when all the buttons on the left are clicked\\n onSelectOrRemove: (item: Item) => any; //The function that should be called when selecting or deleting a single option, the input should be the current operation item\\n onSelect: (value:Array)=>void; // controlled batch selection key\\n selectedItem: Map, // collection of all selected items\\n}\\n\")), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"renderSelectedPanel: (selectedPanelProps: SelectedPanelProps) => ReactNode\"), \"\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"SelectedPanelProps\"), \" contains the following parameters\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"interface SelectedPanelProps {\\n length: number; // number of selected options\\n onClear: () => void; // The callback function that should be called when clicking to clear\\n onRemove: (item: Item) => void; // The function that should be called when deleting a single option\\n onSortEnd: (( oldIndex, newIndex)) => void; // The function that should be called when reordering the results\\n selectedData: Array; // All selected items collection\\n}\\n\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { Transfer, Input, Spin, Button } from '@douyinfe/semi-ui';\\nimport { IconSearch } from '@douyinfe/semi-icons';\\n\\nclass CustomRenderDemo extends React.Component {\\n constructor(props) {\\n super(props);\\n this.state = {\\n dataSource: Array.from({ length: 100 }, (v, i) => ({\\n label: `Hdl Store ${i}`,\\n value: i,\\n disabled: false,\\n key: `key-${i}`,\\n })),\\n };\\n this.renderSourcePanel = this.renderSourcePanel.bind(this);\\n this.renderSelectedPanel = this.renderSelectedPanel.bind(this);\\n this.renderItem = this.renderItem.bind(this);\\n }\\n\\n renderItem(type, item, onItemAction, selectedItems) {\\n let buttonText = 'delete';\\n if (type === 'source') {\\n let checked = selectedItems.has(item.key);\\n buttonText = checked ? 'delete' : 'add';\\n }\\n return (\\n
\\n

{item.label}

\\n onItemAction(item)}\\n className=\\\"panel-item-remove\\\"\\n size=\\\"small\\\"\\n >\\n {buttonText}\\n \\n
\\n );\\n }\\n\\n renderSourcePanel(props) {\\n const {\\n loading,\\n noMatch,\\n filterData,\\n selectedItems,\\n allChecked,\\n onAllClick,\\n inputValue,\\n onSearch,\\n onSelectOrRemove,\\n } = props;\\n let content;\\n switch (true) {\\n case loading:\\n content = ;\\n break;\\n case noMatch:\\n content =
{inputValue ? 'No search results' : 'No content yet'}
;\\n break;\\n case !noMatch:\\n content = filterData.map(item => this.renderItem('source', item, onSelectOrRemove, selectedItems));\\n break;\\n default:\\n content = null;\\n break;\\n }\\n return (\\n
\\n
Store list
\\n
\\n }\\n onChange={onSearch}\\n showClear\\n />\\n
\\n Store to be selected: {filterData.length}\\n \\n
\\n
{content}
\\n
\\n
\\n );\\n }\\n\\n renderSelectedPanel(props) {\\n const { selectedData, onClear, clearText, onRemove } = props;\\n\\n let mainContent = selectedData.map(item => this.renderItem('selected', item, onRemove));\\n\\n if (!selectedData.length) {\\n mainContent =
No data, please filter from the left
;\\n }\\n\\n return (\\n
\\n
\\n
Selected: {selectedData.length}
\\n \\n
\\n
{mainContent}
\\n
\\n );\\n }\\n\\n render() {\\n const { dataSource } = this.state;\\n return (\\n console.log(values)}\\n className=\\\"component-transfer-demo-custom-panel\\\"\\n renderSourcePanel={this.renderSourcePanel}\\n renderSelectedPanel={this.renderSelectedPanel}\\n dataSource={dataSource}\\n />\\n );\\n }\\n}\\n\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-scss\"\n }, \".component-transfer-demo-custom-panel {\\n\\n .sp-font {\\n color: rgba(var(--semi-grey-9), 1);\\n font-size: 12px;\\n font-weight: 500;\\n line-height: 20px;\\n }\\n\\n .empty {\\n width: 100%;\\n height: 100%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n }\\n\\n .panel-item {\\n flex-shrink: 0;\\n height: 56px;\\n border-radius: 4px;\\n padding: 8px 12px;\\n flex-wrap: wrap;\\n background-color: rgba(22, 24, 35, .03);\\n\\n &-main {\\n flex-grow: 1;\\n }\\n\\n p {\\n margin: 0 12px;\\n flex-basis: 100%;\\n }\\n\\n .panel-item-remove {\\n cursor: pointer;\\n color: var(--semi-color-primary);\\n }\\n }\\n\\n .panel-header {\\n padding: 10px 12px;\\n border: 1px solid rgba(22, 24, 35, .16);\\n border-radius: 4px 4px 0 0;\\n height: 38px;\\n box-sizing: border-box;\\n background-color: var(--semi-color-tertiary-light-default);\\n display: flex;\\n align-items: center;\\n justify-content: space-between;\\n\\n .clear {\\n cursor: pointer;\\n color: var(--semi-color-primary);\\n }\\n }\\n\\n .source-panel {\\n display: flex;\\n flex-direction: column;\\n width: 482px;\\n height: 353px;\\n\\n .panel-main {\\n border: 1px solid var(--semi-color-border);\\n border-top: none;\\n\\n .panel-list {\\n display: flex;\\n flex-wrap: wrap;\\n row-gap: 8px;\\n column-gap: 8px;\\n overflow-y: auto;\\n height: 214px;\\n margin-left: 12px;\\n margin-right: 12px;\\n padding-bottom: 8px;\\n }\\n }\\n\\n .panel-controls {\\n margin: 10px 12px;\\n font-size: 12px;\\n line-height: 20px;\\n\\n .semi-button {\\n margin-left: 8px;\\n font-size: 12px;\\n }\\n }\\n\\n .panel-item {\\n width: 176px;\\n }\\n\\n margin-right: 16px;\\n }\\n\\n .selected-panel {\\n width: 200px;\\n height: 353px;\\n\\n .panel-main {\\n display: flex;\\n flex-direction: column;\\n overflow-y: auto;\\n padding: 12px;\\n border: 1px solid var(--semi-color-border);\\n border-top: none;\\n height: 323px;\\n box-sizing: border-box;\\n row-gap: 8px;\\n }\\n }\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Fully custom rendering, drag and drop sorting\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"In a completely custom rendering scene, since the rendering of the drag area has also been completely taken over by you, you do not need to declare draggable.\\nBut you need to implement the drag and drop logic yourself, You can use the drag-and-drop tool library \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/clauderic/dnd-kit\"\n }, \"dnd-kit\"), \" or \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/clauderic/react-sortable-hoc\"\n }, \"react-sortable-hoc\"), \", quickly realize the function. Regarding the selection of the two, here are some of our suggestions.\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Both are maintained by the same author, dnd-kit is the successor of react-sortable-hoc\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"The API design of react-sortable-hoc is more cohesive, and the code is more concise in simple scenarios. But it strongly relies on the findDOMNode API, which will be deprecated in future React versions. At the same time, the library has not been maintained for the past two years.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Relatively speaking, dnd-kit has a certain threshold for getting started, but it has a higher degree of freedom, stronger scalability, and is still under maintenance. we recommend it.\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"Besides, To support drag sorting, you need to call onSortEnd with oldIndex and newIndex as the input parameters after the drag sorting is over\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Example using react-sortable-hoc:\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { SortableContainer, SortableElement, sortableHandle } from 'react-sortable-hoc';\\nimport { Transfer, Button, Spin, Input } from '@douyinfe/semi-ui';\\nimport { IconHandle, IconSearch } from '@douyinfe/semi-icons';\\n\\nclass CustomRenderDragDemo extends React.Component {\\n constructor(props) {\\n super(props);\\n this.state = {\\n dataSource: Array.from({ length: 100 }, (v, i) => ({\\n label: `Hdl Store ${i}`,\\n value: i,\\n disabled: false,\\n key: `key-${i}`,\\n })),\\n };\\n this.renderSourcePanel = this.renderSourcePanel.bind(this);\\n this.renderSelectedPanel = this.renderSelectedPanel.bind(this);\\n this.renderItem = this.renderItem.bind(this);\\n }\\n\\n renderItem(type, item, onItemAction, selectedItems) {\\n let buttonText = 'delete';\\n let newItem = item;\\n\\n if (type === 'source') {\\n let checked = selectedItems.has(item.key);\\n buttonText = checked ? 'delete' : 'add';\\n } else {\\n // delete newItem._optionKey;\\n newItem = { ...item, key: item._optionKey };\\n delete newItem._optionKey;\\n }\\n\\n const DragHandle = sortableHandle(() => );\\n\\n return (\\n
\\n {type === 'source' ? null : }\\n
\\n

{item.label}

\\n onItemAction(newItem)}\\n className=\\\"panel-item-remove\\\"\\n size=\\\"small\\\"\\n >\\n {buttonText}\\n \\n
\\n
\\n );\\n }\\n\\n renderSourcePanel(props) {\\n const {\\n loading,\\n noMatch,\\n filterData,\\n selectedItems,\\n allChecked,\\n onAllClick,\\n inputValue,\\n onSearch,\\n onSelectOrRemove,\\n } = props;\\n let content;\\n switch (true) {\\n case loading:\\n content = ;\\n break;\\n case noMatch:\\n content =
{inputValue ? 'No search results' : 'No content yet'}
;\\n break;\\n case !noMatch:\\n content = filterData.map(item => this.renderItem('source', item, onSelectOrRemove, selectedItems));\\n break;\\n default:\\n content = null;\\n break;\\n }\\n return (\\n
\\n
Store list
\\n
\\n }\\n onChange={onSearch}\\n showClear\\n />\\n
\\n Store to be selected: {filterData.length}\\n \\n
\\n
{content}
\\n
\\n
\\n );\\n }\\n\\n renderSelectedPanel(props) {\\n const { selectedData, onClear, clearText, onRemove, onSortEnd } = props;\\n\\n let mainContent = null;\\n\\n if (!selectedData.length) {\\n mainContent =
No data, please filter from the left
;\\n }\\n\\n const SortableItem = SortableElement(item => this.renderItem('selected', item, onRemove));\\n const SortableList = SortableContainer(\\n ({ items }) => {\\n return (\\n
\\n {items.map((item, index) => (\\n // sortableElement will take over the property 'key', so use another '_optionKey' to pass\\n // otherwise you can't get `key` property in this.renderItem\\n \\n ))}\\n
\\n );\\n },\\n { distance: 10 }\\n );\\n\\n mainContent = ;\\n\\n return (\\n
\\n
\\n
Selected: {selectedData.length}
\\n \\n
\\n {mainContent}\\n
\\n );\\n }\\n\\n render() {\\n const { dataSource } = this.state;\\n return (\\n console.log(values)}\\n className=\\\"component-transfer-demo-custom-panel\\\"\\n renderSourcePanel={this.renderSourcePanel}\\n renderSelectedPanel={this.renderSelectedPanel}\\n dataSource={dataSource}\\n />\\n );\\n }\\n}\\n\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"Example using dnd-kit\\uFF0CThe core dependencies that need to be used are @dnd-kit/sortable, @dnd-kit/core. The core hooks are useSortable, and the usage instructions of useSortable are as follows\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\"\n }, \"1. Function: Obtain the necessary information during the drag and drop process through the unique id\\n2. Core input parameters:\\n - id: unique identifier, which can be a number or a string, but cannot be a number 0\\n3. Core return value description:\\n - setNodeRef: Associate the dom node to make it a draggable item\\n - listeners: Contains onKeyDown, onPointerDown and other methods, mainly to allow nodes to be dragged\\n - transform: the movement change value when the node is dragged\\n - transition: transition effect\\n - active: information about the dragged node, including id\\n\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"noInline\": \"true\"\n }, \"import React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Transfer, Input, Spin, Button } from '@douyinfe/semi-ui';\\nimport { IconSearch, IconHandle } from '@douyinfe/semi-icons';\\nimport { useSortable, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable';\\nimport { CSS as cssDndKit } from '@dnd-kit/utilities';\\nimport { closestCenter, DragOverlay, DndContext, MouseSensor, TouchSensor, useSensor, useSensors, KeyboardSensor, TraversalOrder } from '@dnd-kit/core';\\n\\nfunction SortableList({\\n items,\\n onSortEnd,\\n renderItem,\\n}) {\\n const [activeId, setActiveId] = useState(null);\\n // sensors determine which external input is affected by the drag operation (such as mouse, keyboard, touchpad)\\n const sensors = useSensors(\\n useSensor(MouseSensor),\\n useSensor(TouchSensor),\\n useSensor(KeyboardSensor, {\\n coordinateGetter: sortableKeyboardCoordinates,\\n })\\n );\\n const getIndex = useCallback((id) => items.indexOf(id), [items]);\\n const activeIndex = useMemo(() => activeId ? getIndex(activeId) : -1, [getIndex, activeId]);\\n\\n const onDragStart = useCallback(({ active }) => {\\n if (!active) { return; }\\n setActiveId(active.id);\\n }, []);\\n\\n // Drag end callback\\n const onDragEnd = useCallback(({ over }) => {\\n setActiveId(null);\\n if (over) {\\n const overIndex = getIndex(over.id);\\n if (activeIndex !== overIndex) {\\n onSortEnd({ oldIndex: activeIndex, newIndex: overIndex });\\n }\\n }\\n }, [activeIndex, getIndex, onSortEnd]);\\n\\n const onDragCancel = useCallback(() => {\\n setActiveId(null);\\n }, []);\\n\\n return (\\n \\n \\n
\\n {items.map((value, index) => (\\n \\n ))}\\n
\\n {ReactDOM.createPortal(\\n \\n {activeId ? (\\n renderItem({\\n id: activeId,\\n sortableHandle: (WrapperComponent) => WrapperComponent\\n })\\n ) : null}\\n ,\\n document.body\\n )}\\n \\n \\n );\\n}\\n\\nfunction SortableItem({ id, renderItem }) {\\n const {\\n listeners,\\n setNodeRef,\\n transform,\\n transition,\\n active,\\n } = useSortable({\\n id,\\n });\\n\\n const sortableHandle = useCallback((WrapperComponent) => {\\n return () => ;\\n }, [listeners]);\\n\\n const wrapperStyle = {\\n transform: cssDndKit.Transform.toString({\\n ...transform,\\n scaleX: 1,\\n scaleY: 1,\\n }),\\n transition: transition,\\n opacity: active && active.id === id ? 0 : undefined,\\n };\\n\\n return
\\n {renderItem({ id, sortableHandle })}\\n
;\\n}\\n\\nclass CustomRenderDragDemo extends React.Component {\\n constructor(props) {\\n super(props);\\n this.state = {\\n dataSource: Array.from({ length: 100 }, (v, i) => ({\\n label: `Hdl Store ${i}`,\\n value: i,\\n disabled: false,\\n key: `key-${i}`,\\n })),\\n };\\n this.renderSourcePanel = this.renderSourcePanel.bind(this);\\n this.renderSelectedPanel = this.renderSelectedPanel.bind(this);\\n this.renderItem = this.renderItem.bind(this);\\n }\\n\\n renderItem(type, item, onItemAction, selectedItems, sortableHandle) {\\n let buttonText = 'delete';\\n\\n if (type === 'source') {\\n let checked = selectedItems.has(item.key);\\n buttonText = checked ? 'delete' : 'add';\\n }\\n\\n const DragHandle = (sortableHandle && sortableHandle(() => ));\\n\\n return (\\n
\\n {type === 'source' ? null : ( DragHandle ? : null) }\\n
\\n

{item.label}

\\n onItemAction(item)}\\n className=\\\"panel-item-remove\\\"\\n size=\\\"small\\\"\\n >\\n {buttonText}\\n \\n
\\n
\\n );\\n }\\n\\n renderSourcePanel(props) {\\n const {\\n loading,\\n noMatch,\\n filterData,\\n selectedItems,\\n allChecked,\\n onAllClick,\\n inputValue,\\n onSearch,\\n onSelectOrRemove,\\n } = props;\\n let content;\\n switch (true) {\\n case loading:\\n content = ;\\n break;\\n case noMatch:\\n content =
{inputValue ? 'No search results' : 'No content yet'}
;\\n break;\\n case !noMatch:\\n content = filterData.map(item => this.renderItem('source', item, onSelectOrRemove, selectedItems));\\n break;\\n default:\\n content = null;\\n break;\\n }\\n return (\\n
\\n
Store list
\\n
\\n }\\n onChange={onSearch}\\n showClear\\n />\\n
\\n Store to be selected: {filterData.length}\\n \\n
\\n
{content}
\\n
\\n
\\n );\\n }\\n\\n renderSelectedPanel(props) {\\n const { selectedData, onClear, clearText, onRemove, onSortEnd } = props;\\n let mainContent = null;\\n\\n if (!selectedData.length) {\\n mainContent =
No data, please filter from the left
;\\n }\\n\\n const renderSelectItem = ({ id, sortableHandle }) => {\\n const item = selectedData.find(item => id === item.key);\\n return this.renderItem('selected', item, onRemove, null, sortableHandle);\\n };\\n\\n const sortData = selectedData.map(item => item.key);\\n\\n mainContent =
\\n \\n
;\\n\\n return (\\n
\\n
\\n
Selected: {selectedData.length}
\\n \\n
\\n {mainContent}\\n
\\n );\\n }\\n\\n render() {\\n const { dataSource } = this.state;\\n return (\\n console.log(values)}\\n className=\\\"component-transfer-demo-custom-panel\\\"\\n renderSourcePanel={this.renderSourcePanel}\\n renderSelectedPanel={this.renderSelectedPanel}\\n dataSource={dataSource}\\n />\\n );\\n }\\n}\\n\\nrender(CustomRenderDragDemo);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Tree Transfer\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"The input type is \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"treeList\"), \", and the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/navigation/tree\"\n }, mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"Tree\")), \" component is used as a custom rendering list. \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"v1.20.0 available\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"The properties of the default tree can be overridden by treeProps(\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/navigation/tree\"\n }, \"TreeProps\"), \"). The default properties of the tree on the left are\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"interface Default TreeProps {\\n multiple:true,\\n disableStrictly:true,\\n leafOnly:true,\\n filterTreeNode:true,\\n searchRender:flase,\\n\\n}\\n\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React, { useState } from 'react';\\nimport { Transfer } 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 label: 'Mexico',\\n value: 'Mexico',\\n disabled: true,\\n key: '1-2',\\n },\\n {\\n label: 'Cuba',\\n value: 'Cuba',\\n key: '1-3',\\n },\\n ],\\n },\\n ];\\n\\n const [v, $v] = useState(['Shanghai']);\\n\\n return (\\n
\\n \\n
\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Tree Transfer with Custom Header Showing Leaf Node Count\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"When type is \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"treeList\"), \", the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"SourceHeaderProps\"), \" parameter of \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"renderSourceHeader\"), \" provides an additional \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"leafOnlyNum\"), \" field, which represents the number of leaf nodes. This is useful in scenarios like file selection, where you can display only the file count instead of the total including folders.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React, { useState } from 'react';\\nimport { Transfer, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n const treeData = [\\n {\\n label: 'Folder 1',\\n value: 'folder1',\\n key: 'folder1',\\n children: [\\n {\\n label: 'File 1-1',\\n value: 'file1-1',\\n key: 'file1-1',\\n },\\n {\\n label: 'File 1-2',\\n value: 'file1-2',\\n key: 'file1-2',\\n },\\n {\\n label: 'Subfolder 1',\\n value: 'subfolder1',\\n key: 'subfolder1',\\n children: [\\n {\\n label: 'File 1-1-1',\\n value: 'file1-1-1',\\n key: 'file1-1-1',\\n },\\n {\\n label: 'File 1-1-2',\\n value: 'file1-1-2',\\n key: 'file1-1-2',\\n },\\n ],\\n },\\n ],\\n },\\n {\\n label: 'Folder 2',\\n value: 'folder2',\\n key: 'folder2',\\n children: [\\n {\\n label: 'File 2-1',\\n value: 'file2-1',\\n key: 'file2-1',\\n },\\n {\\n label: 'File 2-2',\\n value: 'file2-2',\\n key: 'file2-2',\\n },\\n ],\\n },\\n {\\n label: 'Standalone File',\\n value: 'file3',\\n key: 'file3',\\n },\\n ];\\n\\n const [value, setValue] = useState([]);\\n\\n const renderSourceHeader = (props) => {\\n const { num, leafOnlyNum, showButton, allChecked, onAllClick } = props;\\n \\n return (\\n
\\n \\n Total Files:\\n {leafOnlyNum !== undefined ? leafOnlyNum : num} files\\n {leafOnlyNum !== undefined && (\\n \\n (Total nodes: {num})\\n \\n )}\\n \\n {showButton && (\\n \\n {allChecked ? 'Unselect all' : 'Select all'}\\n \\n )}\\n
\\n );\\n };\\n\\n return (\\n \\n );\\n};\\n\"))), 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 }, \"Add \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"role\"), \" \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"search\"), \" to the search box\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Add \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"role\"), \" \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"list\"), \" to the selected list on the right, add \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"role\"), \" \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"listitem\"), \" to the selected item\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"API Reference\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Transfer Props\"), 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 }, \"props\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"description\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"data 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 }, \"className\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Style 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 }, \"dataSource\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Data Source\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Array\", \"|\", \"Array\", \"|\", \"Array\"), 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 }, \"defaultValue\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Default selected value\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Array\"), 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 }, \"Whether to disable\"), 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 }, \"draggable\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Whether to enable drag sorting\"), 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 }, \"emptyContent\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Custom empty state prompt text, search is the text displayed when there are no search results, left is the text when there is no source data on the left, and right is the prompt text when no data is checked\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"{left: ReactNode; right: ReactNode; search: 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 }, \"filter\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Custom filter logic, when false, the search box is not displayed. When type is \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"treeList\"), \", if you need to customize search logic, you need to set \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"filter\"), \" to true and set a custom search function through \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"filterTreeNode\"), \" of \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"treeProps\"), \".\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean \", \"|\", \" (input:string, item: Item) => 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 }, \"inputProps\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Can be used to customize the search box Input, the configurable properties refer to the Input component, the value and onChange parameters will be used inside Transfer, users should not use them. If you want to search through external data, you can call the search method of Transfer\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/input/input#Input\"\n }, \"InputProps\")), 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 }, \"loading\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Whether the left option is being loaded\"), 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 }, \"onChange\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"The callback that is triggered when the selected value changes, and the callback is also triggered after the drag sort changes\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(values: Array, items: Array\", \") => 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 }, \"onDeselect\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Callback when unchecking\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(item: Item) => 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 }, \"Called when the input content of the search box changes\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(inputValue: string) => void\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onSelect\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Callback when checked\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(item: Item) => 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 }, \"renderSelectedHeader\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Customize the rendering of the header information on the right panel\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(props: SelectedHeaderProps) => ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.29.0\")), 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 }, \"Customize the rendering of a single selected item on the right. When \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"type=\\\"treeList\\\"\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"showPath\"), \" is \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"true\"), \", the complete path is available through \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"item.fullPath\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(item: {onRemove, sortableHandle} & Item) => 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 }, \"renderSelectedPanel\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Customize the rendering of the selected panel on the right\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(selectedPanelProps) => 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 }, \"renderSourceHeader\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Customize the rendering of the header information on the left panel\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(props: SourceHeaderProps) => ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.29.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"renderSourceItem\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Customize the rendering of a single candidate item on the left\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(item: {onChange, checked} & Item) => 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 }, \"renderSourcePanel\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Customize the rendering of the left candidate panel\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(sourcePanelProps) => 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 }, \"showPath\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"When the type is \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"treeList\"), \", control whether the selected item on the right shows the selection path\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"style\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Inline style\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"CSSProperties\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"treeProps\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"When the type is \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"treeList\"), \", it can be passed as TreeProps to the Tree component on the left\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/navigation/tree#Tree\"\n }, \"TreeProps\")), 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 }, \"type\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Transfer type, optional \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"list\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"groupList\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"treeList\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"'list'\"), 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 }, \"The selected value, when the item is passed in, it will be used as a controlled component\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Array\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })))), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Item Interface\"), 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 }, \"props\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"description\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"data 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 }, \"className\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Style 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 }, \"disabled\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Whether to disable\"), 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 }, \"key\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Required, unique identification of each option, no repetition is allowed\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string \", \"|\", \" 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 }, \"label\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Options display content\"), 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 }, \"fullPath\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"When \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"type=\\\"treeList\\\"\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"showPath\"), \" is \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"true\"), \", returns the full path node array from the root node to the current node\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Array\"), 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 }, \"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 }, \"value\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"The value represented by the option\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string \", \"|\", \" number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })))), mdx(\"h3\", {\n parentName: \"section\"\n }, \"GroupItem Interface\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"GroupItem inherits all the properties of Item\"), 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 }, \"props\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"description\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"data 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 }, \"children\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Elements of the group\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"array\"), 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 }, \"title\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Group 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(\"h3\", {\n parentName: \"section\"\n }, \"TreeItem Interface\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"TreeItem inherits all the properties of Item\"), 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 }, \"props\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"description\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"data type\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"default\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"children\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Children Items\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"array\"), 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 Transfer 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(value: string)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"You can call this method through ref to search, and the search value will be set to Input.\"))))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Design Tokens\"), mdx(DesignToken, {\n mdxType: \"DesignToken\"\n })), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Related materials\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-material\"\n }, \"52\\n\"))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/input/transfer","next":{"fields":{"slug":"zh-CN/input/transfer"},"id":"8f56e470-4f6b-5e43-aa0d-e7b0ce16635a","frontmatter":{"title":"Transfer 穿梭框","localeCode":"zh-CN","icon":"doc-transfer","showNew":null}},"previous":{"fields":{"slug":"zh-CN/input/timepicker"},"id":"cd102988-8a3b-54f1-87f4-12f45d55ecf5","frontmatter":{"title":"TimePicker 时间选择器","localeCode":"zh-CN","icon":"doc-timepicker","showNew":null}}}},"staticQueryHashes":["1348983216898582","1477422646898582","3245198693898582","417590761898582","63159454898582"]}