@antsoo-lib/components 0.1.11 → 0.1.13

package/src/vc-tree-select/TreeSelect.tsx

@@ -1,765 +0,0 @@
-import { computed, defineComponent, ref, shallowRef, toRaw, toRef, toRefs, watchEffect } from 'vue'
-import type { ExtractPropTypes, PropType } from 'vue'
-
-import useMergedState from '../_util/hooks/useMergedState'
-import omit from '../_util/omit'
-import { initDefaultProps } from '../_util/props-util'
-import { toReactive } from '../_util/toReactive'
-import type { VueNode } from '../_util/type'
-import PropTypes from '../_util/vue-types'
-import type { BaseSelectProps, BaseSelectRef, SelectProps } from '../vc-select'
-import { BaseSelect } from '../vc-select'
-import type { DisplayValueType } from '../vc-select/BaseSelect'
-import { baseSelectPropsWithoutPrivate } from '../vc-select/BaseSelect'
-import useId from '../vc-select/hooks/useId'
-import type { ExpandAction } from '../vc-tree/props'
-import useMaxLevel from '../vc-tree/useMaxLevel'
-import { conductCheck } from '../vc-tree/utils/conductUtil'
-import { warning } from '../vc-util/warning'
-import type { LegacyContextProps } from './LegacyContext'
-import { useProvideLegacySelectContext } from './LegacyContext'
-import OptionList from './OptionList'
-import { useProvideSelectContext } from './TreeSelectContext'
-import type { TreeSelectContextProps } from './TreeSelectContext'
-import useCache from './hooks/useCache'
-import useCheckedKeys from './hooks/useCheckedKeys'
-import useDataEntities from './hooks/useDataEntities'
-import useFilterTreeData from './hooks/useFilterTreeData'
-import useTreeData from './hooks/useTreeData'
-import type { Key } from './interface'
-import { fillAdditionalInfo, fillLegacyProps } from './utils/legacyUtil'
-import { SHOW_CHILD, formatStrategyValues } from './utils/strategyUtil'
-import type { CheckedStrategy } from './utils/strategyUtil'
-import { fillFieldNames, isNil, toArray } from './utils/valueUtil'
-import warningProps from './utils/warningPropsUtil'
-
-export type OnInternalSelect = (value: RawValueType, info: { selected: boolean }) => void
-
-export type RawValueType = string | number
-
-export interface LabeledValueType {
-  key?: Key
-  value?: RawValueType
-  label?: any
-  /** Only works on `treeCheckStrictly` */
-  halfChecked?: boolean
-}
-
-export type SelectSource = 'option' | 'selection' | 'input' | 'clear'
-
-export type DraftValueType = RawValueType | LabeledValueType | (RawValueType | LabeledValueType)[]
-
-/** @deprecated This is only used for legacy compatible. Not works on new code. */
-export interface LegacyCheckedNode {
-  pos: string
-  node: any
-  children?: LegacyCheckedNode[]
-}
-
-export interface ChangeEventExtra {
-  /** @deprecated Please save prev value by control logic instead */
-  preValue: LabeledValueType[]
-  triggerValue: RawValueType
-  /** @deprecated Use `onSelect` or `onDeselect` instead. */
-  selected?: boolean
-  /** @deprecated Use `onSelect` or `onDeselect` instead. */
-  checked?: boolean
-
-  // Not sure if exist user still use this. We have to keep but not recommend user to use
-  /** @deprecated This prop not work as react node anymore. */
-  triggerNode: any
-  /** @deprecated This prop not work as react node anymore. */
-  allCheckedNodes: LegacyCheckedNode[]
-}
-
-export interface FieldNames {
-  value?: string
-  label?: string
-  children?: string
-}
-
-export interface InternalFieldName extends Omit<FieldNames, 'label'> {
-  _title: string[]
-}
-
-export interface SimpleModeConfig {
-  id?: Key
-  pId?: Key
-  rootPId?: Key
-}
-
-export interface BaseOptionType {
-  disabled?: boolean
-  checkable?: boolean
-  disableCheckbox?: boolean
-  children?: BaseOptionType[]
-  [name: string]: any
-}
-
-export interface DefaultOptionType extends BaseOptionType {
-  value?: RawValueType
-  title?: any
-  label?: any
-  key?: Key
-  children?: DefaultOptionType[]
-}
-
-export interface LegacyDataNode extends DefaultOptionType {
-  props: any
-}
-
-export function treeSelectProps<
-  ValueType = any,
-  OptionType extends BaseOptionType = DefaultOptionType,
->() {
-  return {
-    ...omit(baseSelectPropsWithoutPrivate(), ['mode']),
-
-    prefixCls: String,
-    id: String,
-    value: { type: [String, Number, Object, Array] as PropType<ValueType> },
-    defaultValue: { type: [String, Number, Object, Array] as PropType<ValueType> },
-    onChange: {
-      type: Function as PropType<
-        (value: ValueType, labelList: any[], extra: ChangeEventExtra) => void
-      >,
-    },
-    searchValue: String,
-    /** @deprecated Use `searchValue` instead */
-    inputValue: String,
-    onSearch: { type: Function as PropType<(value: string) => void> },
-    autoClearSearchValue: { type: Boolean, default: undefined },
-
-    filterTreeNode: {
-      type: [Boolean, Function] as PropType<
-        boolean | ((inputValue: string, treeNode: DefaultOptionType) => boolean)
-      >,
-      default: undefined,
-    },
-    treeNodeFilterProp: String,
-
-    // >>> Select
-    onSelect: Function as PropType<SelectProps['onSelect']>,
-    onDeselect: Function as PropType<SelectProps['onDeselect']>,
-
-    showCheckedStrategy: { type: String as PropType<CheckedStrategy> },
-    treeNodeLabelProp: String,
-
-    fieldNames: { type: Object as PropType<FieldNames> },
-
-    // >>> Mode
-    multiple: { type: Boolean, default: undefined },
-    treeCheckable: { type: Boolean, default: undefined },
-    treeCheckStrictly: { type: Boolean, default: undefined },
-    labelInValue: { type: Boolean, default: undefined },
-
-    // >>> Data
-    treeData: { type: Array as PropType<OptionType[]> },
-    treeDataSimpleMode: {
-      type: [Boolean, Object] as PropType<boolean | SimpleModeConfig>,
-      default: undefined,
-    },
-    loadData: { type: Function as PropType<(dataNode: LegacyDataNode) => Promise<unknown>> },
-    treeLoadedKeys: { type: Array as PropType<Key[]> },
-    onTreeLoad: { type: Function as PropType<(loadedKeys: Key[]) => void> },
-
-    // >>> Expanded
-    treeDefaultExpandAll: { type: Boolean, default: undefined },
-    treeExpandedKeys: { type: Array as PropType<Key[]> },
-    treeDefaultExpandedKeys: { type: Array as PropType<Key[]> },
-    onTreeExpand: { type: Function as PropType<(expandedKeys: Key[]) => void> },
-
-    // >>> Options
-    virtual: { type: Boolean, default: undefined },
-    listHeight: Number,
-    listItemHeight: Number,
-    onDropdownVisibleChange: { type: Function as PropType<(open: boolean) => void> },
-
-    // >>> Tree
-    treeLine: { type: [Boolean, Object], default: undefined },
-    treeIcon: PropTypes.any,
-    showTreeIcon: { type: Boolean, default: undefined },
-    switcherIcon: PropTypes.any,
-    treeMotion: PropTypes.any,
-    children: Array as PropType<VueNode[]>,
-    treeExpandAction: String as PropType<ExpandAction>,
-
-    showArrow: { type: Boolean, default: undefined },
-    showSearch: { type: Boolean, default: undefined },
-    open: { type: Boolean, default: undefined },
-    defaultOpen: { type: Boolean, default: undefined },
-
-    disabled: { type: Boolean, default: undefined },
-
-    placeholder: PropTypes.any,
-
-    maxTagPlaceholder: { type: Function as PropType<(omittedValues: DisplayValueType[]) => any> },
-
-    dropdownPopupAlign: PropTypes.any,
-    customSlots: Object,
-  }
-}
-
-export type TreeSelectProps = Partial<ExtractPropTypes<ReturnType<typeof treeSelectProps>>>
-
-function isRawValue(value: RawValueType | LabeledValueType): value is RawValueType {
-  return !value || typeof value !== 'object'
-}
-
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'TreeSelect',
-  inheritAttrs: false,
-  props: initDefaultProps(treeSelectProps(), {
-    treeNodeFilterProp: 'value',
-    autoClearSearchValue: true,
-    showCheckedStrategy: SHOW_CHILD,
-    listHeight: 200,
-    listItemHeight: 20,
-    prefixCls: 'vc-tree-select',
-  }),
-  setup(props, { attrs, expose, slots }) {
-    const mergedId = useId(toRef(props, 'id'))
-    const treeConduction = computed(() => props.treeCheckable && !props.treeCheckStrictly)
-    const mergedCheckable = computed(() => props.treeCheckable || props.treeCheckStrictly)
-    const mergedLabelInValue = computed(() => props.treeCheckStrictly || props.labelInValue)
-    const mergedMultiple = computed(() => mergedCheckable.value || props.multiple)
-
-    // ========================== Warning ===========================
-    if (process.env.NODE_ENV !== 'production') {
-      watchEffect(() => {
-        warningProps(props)
-      })
-    }
-
-    // ========================= FieldNames =========================
-    const mergedFieldNames = computed<InternalFieldName>(() => fillFieldNames(props.fieldNames))
-
-    // =========================== Search ===========================
-    const [mergedSearchValue, setSearchValue] = useMergedState('', {
-      value: computed(() =>
-        props.searchValue !== undefined ? props.searchValue : props.inputValue,
-      ),
-      postState: (search) => search || '',
-    })
-
-    const onInternalSearch: BaseSelectProps['onSearch'] = (searchText) => {
-      setSearchValue(searchText)
-      props.onSearch?.(searchText)
-    }
-
-    // ============================ Data ============================
-    // `useTreeData` only do convert of `children` or `simpleMode`.
-    // Else will return origin `treeData` for perf consideration.
-    // Do not do anything to loop the data.
-    const mergedTreeData = useTreeData(
-      toRef(props, 'treeData'),
-      toRef(props, 'children'),
-      toRef(props, 'treeDataSimpleMode'),
-    )
-
-    const { keyEntities, valueEntities } = useDataEntities(mergedTreeData, mergedFieldNames)
-
-    /** Get `missingRawValues` which not exist in the tree yet */
-    const splitRawValues = (newRawValues: RawValueType[]) => {
-      const missingRawValues = []
-      const existRawValues = []
-
-      // Keep missing value in the cache
-      newRawValues.forEach((val) => {
-        if (valueEntities.value.has(val)) {
-          existRawValues.push(val)
-        } else {
-          missingRawValues.push(val)
-        }
-      })
-
-      return { missingRawValues, existRawValues }
-    }
-
-    // Filtered Tree
-    const filteredTreeData = useFilterTreeData(mergedTreeData, mergedSearchValue, {
-      fieldNames: mergedFieldNames,
-      treeNodeFilterProp: toRef(props, 'treeNodeFilterProp'),
-      filterTreeNode: toRef(props, 'filterTreeNode'),
-    })
-
-    // =========================== Label ============================
-    const getLabel = (item: DefaultOptionType) => {
-      if (item) {
-        if (props.treeNodeLabelProp) {
-          return item[props.treeNodeLabelProp]
-        }
-
-        // Loop from fieldNames
-        const { _title: titleList } = mergedFieldNames.value
-
-        for (let i = 0; i < titleList.length; i += 1) {
-          const title = item[titleList[i]]
-          if (title !== undefined) {
-            return title
-          }
-        }
-      }
-    }
-
-    // ========================= Wrap Value =========================
-    const toLabeledValues = (draftValues: DraftValueType) => {
-      const values = toArray(draftValues)
-
-      return values.map((val) => {
-        if (isRawValue(val)) {
-          return { value: val }
-        }
-        return val
-      })
-    }
-
-    const convert2LabelValues = (draftValues: DraftValueType) => {
-      const values = toLabeledValues(draftValues)
-
-      return values.map((item) => {
-        let { label: rawLabel } = item
-        const { value: rawValue, halfChecked: rawHalfChecked } = item
-
-        let rawDisabled: boolean | undefined
-
-        const entity = valueEntities.value.get(rawValue)
-
-        // Fill missing label & status
-        if (entity) {
-          rawLabel = rawLabel ?? getLabel(entity.node)
-          rawDisabled = entity.node.disabled
-        }
-
-        return {
-          label: rawLabel,
-          value: rawValue,
-          halfChecked: rawHalfChecked,
-          disabled: rawDisabled,
-        }
-      })
-    }
-
-    // =========================== Values ===========================
-    const [internalValue, setInternalValue] = useMergedState(props.defaultValue, {
-      value: toRef(props, 'value'),
-    })
-
-    const rawMixedLabeledValues = computed(() => toLabeledValues(internalValue.value))
-
-    // Split value into full check and half check
-    const rawLabeledValues = shallowRef([])
-    const rawHalfLabeledValues = shallowRef([])
-    watchEffect(() => {
-      const fullCheckValues: LabeledValueType[] = []
-      const halfCheckValues: LabeledValueType[] = []
-
-      rawMixedLabeledValues.value.forEach((item) => {
-        if (item.halfChecked) {
-          halfCheckValues.push(item)
-        } else {
-          fullCheckValues.push(item)
-        }
-      })
-
-      rawLabeledValues.value = fullCheckValues
-      rawHalfLabeledValues.value = halfCheckValues
-    })
-
-    // const [mergedValues] = useCache(rawLabeledValues);
-    const rawValues = computed(() => rawLabeledValues.value.map((item) => item.value))
-    const { maxLevel, levelEntities } = useMaxLevel(keyEntities)
-    // Convert value to key. Will fill missed keys for conduct check.
-    const [rawCheckedValues, rawHalfCheckedValues] = useCheckedKeys(
-      rawLabeledValues,
-      rawHalfLabeledValues,
-      treeConduction,
-      keyEntities,
-      maxLevel,
-      levelEntities,
-    )
-
-    // Convert rawCheckedKeys to check strategy related values
-    const displayValues = computed(() => {
-      // Collect keys which need to show
-      const displayKeys = formatStrategyValues(
-        rawCheckedValues.value,
-        props.showCheckedStrategy,
-        keyEntities.value,
-        mergedFieldNames.value,
-      )
-
-      // Convert to value and filled with label
-      const values = displayKeys.map(
-        (key) => keyEntities.value[key]?.node?.[mergedFieldNames.value.value] ?? key,
-      )
-      // Back fill with origin label
-      const labeledValues = values.map((val) => {
-        const targetItem = rawLabeledValues.value.find((item) => item.value === val)
-        return {
-          value: val,
-          label: targetItem?.label,
-        }
-      })
-      const rawDisplayValues = convert2LabelValues(labeledValues)
-
-      const firstVal = rawDisplayValues[0]
-
-      if (!mergedMultiple.value && firstVal && isNil(firstVal.value) && isNil(firstVal.label)) {
-        return []
-      }
-      return rawDisplayValues.map((item) => ({
-        ...item,
-        label: item.label ?? item.value,
-      }))
-    })
-
-    const [cachedDisplayValues] = useCache(displayValues)
-
-    // =========================== Change ===========================
-    const triggerChange = (
-      newRawValues: RawValueType[],
-      extra: { triggerValue?: RawValueType; selected?: boolean },
-      source: SelectSource,
-    ) => {
-      const labeledValues = convert2LabelValues(newRawValues)
-      setInternalValue(labeledValues)
-
-      // Clean up if needed
-      if (props.autoClearSearchValue) {
-        setSearchValue('')
-      }
-
-      // Generate rest parameters is costly, so only do it when necessary
-      if (props.onChange) {
-        let eventValues: RawValueType[] = newRawValues
-        if (treeConduction.value) {
-          const formattedKeyList = formatStrategyValues(
-            newRawValues,
-            props.showCheckedStrategy,
-            keyEntities.value,
-            mergedFieldNames.value,
-          )
-          eventValues = formattedKeyList.map((key) => {
-            const entity = valueEntities.value.get(key)
-            return entity ? entity.node[mergedFieldNames.value.value] : key
-          })
-        }
-
-        const { triggerValue, selected } = extra || {
-          triggerValue: undefined,
-          selected: undefined,
-        }
-
-        let returnRawValues: (LabeledValueType | RawValueType)[] = eventValues
-
-        // We need fill half check back
-        if (props.treeCheckStrictly) {
-          const halfValues = rawHalfLabeledValues.value.filter(
-            (item) => !eventValues.includes(item.value),
-          )
-
-          returnRawValues = [...returnRawValues, ...halfValues]
-        }
-
-        const returnLabeledValues = convert2LabelValues(returnRawValues)
-        const additionalInfo = {
-          // [Legacy] Always return as array contains label & value
-          preValue: rawLabeledValues.value,
-          triggerValue,
-        } as ChangeEventExtra
-
-        // [Legacy] Fill legacy data if user query.
-        // This is expansive that we only fill when user query
-        // https://github.com/react-component/tree-select/blob/fe33eb7c27830c9ac70cd1fdb1ebbe7bc679c16a/src/Select.jsx
-        let showPosition = true
-        if (props.treeCheckStrictly || (source === 'selection' && !selected)) {
-          showPosition = false
-        }
-
-        fillAdditionalInfo(
-          additionalInfo,
-          triggerValue,
-          newRawValues,
-          mergedTreeData.value,
-          showPosition,
-          mergedFieldNames.value,
-        )
-
-        if (mergedCheckable.value) {
-          additionalInfo.checked = selected
-        } else {
-          additionalInfo.selected = selected
-        }
-
-        const returnValues = mergedLabelInValue.value
-          ? returnLabeledValues
-          : returnLabeledValues.map((item) => item.value)
-
-        props.onChange(
-          mergedMultiple.value ? returnValues : returnValues[0],
-          mergedLabelInValue.value ? null : returnLabeledValues.map((item) => item.label),
-          additionalInfo,
-        )
-      }
-    }
-
-    // ========================== Options ===========================
-    /** Trigger by option list */
-    const onOptionSelect = (
-      selectedKey: Key,
-      { selected, source }: { selected: boolean; source: SelectSource },
-    ) => {
-      const keyEntitiesValue = toRaw(keyEntities.value)
-      const valueEntitiesValue = toRaw(valueEntities.value)
-      const entity = keyEntitiesValue[selectedKey]
-      const node = entity?.node
-      const selectedValue = node?.[mergedFieldNames.value.value] ?? selectedKey
-
-      // Never be falsy but keep it safe
-      if (!mergedMultiple.value) {
-        // Single mode always set value
-        triggerChange([selectedValue], { selected: true, triggerValue: selectedValue }, 'option')
-      } else {
-        let newRawValues = selected
-          ? [...rawValues.value, selectedValue]
-          : rawCheckedValues.value.filter((v) => v !== selectedValue)
-
-        // Add keys if tree conduction
-        if (treeConduction.value) {
-          // Should keep missing values
-          const { missingRawValues, existRawValues } = splitRawValues(newRawValues)
-          const keyList = existRawValues.map((val) => valueEntitiesValue.get(val).key)
-
-          // Conduction by selected or not
-          let checkedKeys: Key[]
-          if (selected) {
-            ;({ checkedKeys } = conductCheck(
-              keyList,
-              true,
-              keyEntitiesValue,
-              maxLevel.value,
-              levelEntities.value,
-            ))
-          } else {
-            ;({ checkedKeys } = conductCheck(
-              keyList,
-              { checked: false, halfCheckedKeys: rawHalfCheckedValues.value },
-              keyEntitiesValue,
-              maxLevel.value,
-              levelEntities.value,
-            ))
-          }
-
-          // Fill back of keys
-          newRawValues = [
-            ...missingRawValues,
-            ...checkedKeys.map((key) => keyEntitiesValue[key].node[mergedFieldNames.value.value]),
-          ]
-        }
-        triggerChange(newRawValues, { selected, triggerValue: selectedValue }, source || 'option')
-      }
-
-      // Trigger select event
-      if (selected || !mergedMultiple.value) {
-        props.onSelect?.(selectedValue, fillLegacyProps(node))
-      } else {
-        props.onDeselect?.(selectedValue, fillLegacyProps(node))
-      }
-    }
-
-    // ========================== Dropdown ==========================
-    const onInternalDropdownVisibleChange = (open: boolean) => {
-      if (props.onDropdownVisibleChange) {
-        const legacyParam = {}
-
-        Object.defineProperty(legacyParam, 'documentClickClose', {
-          get() {
-            warning(false, 'Second param of `onDropdownVisibleChange` has been removed.')
-            return false
-          },
-        })
-        ;(props.onDropdownVisibleChange as any)(open, legacyParam)
-      }
-    }
-
-    // ====================== Display Change ========================
-    const onDisplayValuesChange: BaseSelectProps['onDisplayValuesChange'] = (newValues, info) => {
-      const newRawValues = newValues.map((item) => item.value)
-
-      if (info.type === 'clear') {
-        triggerChange(newRawValues, {}, 'selection')
-        return
-      }
-
-      // TreeSelect only have multiple mode which means display change only has remove
-      if (info.values.length) {
-        onOptionSelect(info.values[0].value, { selected: false, source: 'selection' })
-      }
-    }
-    const {
-      treeNodeFilterProp,
-
-      // Data
-      loadData,
-      treeLoadedKeys,
-      onTreeLoad,
-
-      // Expanded
-      treeDefaultExpandAll,
-      treeExpandedKeys,
-      treeDefaultExpandedKeys,
-      onTreeExpand,
-
-      // Options
-      virtual,
-      listHeight,
-      listItemHeight,
-
-      // Tree
-      treeLine,
-      treeIcon,
-      showTreeIcon,
-      switcherIcon,
-      treeMotion,
-      customSlots,
-
-      dropdownMatchSelectWidth,
-      treeExpandAction,
-    } = toRefs(props)
-    useProvideLegacySelectContext(
-      toReactive({
-        checkable: mergedCheckable,
-
-        loadData,
-        treeLoadedKeys,
-        onTreeLoad,
-        checkedKeys: rawCheckedValues,
-        halfCheckedKeys: rawHalfCheckedValues,
-        treeDefaultExpandAll,
-        treeExpandedKeys,
-        treeDefaultExpandedKeys,
-        onTreeExpand,
-        treeIcon,
-        treeMotion,
-        showTreeIcon,
-        switcherIcon,
-        treeLine,
-        treeNodeFilterProp,
-        keyEntities,
-        customSlots,
-      } as unknown as LegacyContextProps),
-    )
-    useProvideSelectContext(
-      toReactive({
-        virtual,
-        listHeight,
-        listItemHeight,
-        treeData: filteredTreeData,
-        fieldNames: mergedFieldNames,
-        onSelect: onOptionSelect,
-        dropdownMatchSelectWidth,
-        treeExpandAction,
-      } as unknown as TreeSelectContextProps),
-    )
-    const selectRef = ref<BaseSelectRef>()
-    expose({
-      focus() {
-        selectRef.value?.focus()
-      },
-      blur() {
-        selectRef.value?.blur()
-      },
-      scrollTo(arg) {
-        selectRef.value?.scrollTo(arg)
-      },
-    } as BaseSelectRef)
-    return () => {
-      const restProps = omit(props, [
-        'id',
-        'prefixCls',
-        'customSlots',
-
-        // Value
-        'value',
-        'defaultValue',
-        'onChange',
-        'onSelect',
-        'onDeselect',
-
-        // Search
-        'searchValue',
-        'inputValue',
-        'onSearch',
-        'autoClearSearchValue',
-        'filterTreeNode',
-        'treeNodeFilterProp',
-
-        // Selector
-        'showCheckedStrategy',
-        'treeNodeLabelProp',
-
-        //  Mode
-        'multiple',
-        'treeCheckable',
-        'treeCheckStrictly',
-        'labelInValue',
-
-        // FieldNames
-        'fieldNames',
-
-        // Data
-        'treeDataSimpleMode',
-        'treeData',
-        'children',
-        'loadData',
-        'treeLoadedKeys',
-        'onTreeLoad',
-
-        // Expanded
-        'treeDefaultExpandAll',
-        'treeExpandedKeys',
-        'treeDefaultExpandedKeys',
-        'onTreeExpand',
-
-        // Options
-        'virtual',
-        'listHeight',
-        'listItemHeight',
-        'onDropdownVisibleChange',
-
-        // Tree
-        'treeLine',
-        'treeIcon',
-        'showTreeIcon',
-        'switcherIcon',
-        'treeMotion',
-      ])
-      return (
-        <BaseSelect
-          v-slots={slots}
-          ref={selectRef}
-          {...attrs}
-          {...restProps}
-          // >>> MISC
-          id={mergedId}
-          prefixCls={props.prefixCls}
-          mode={mergedMultiple.value ? 'multiple' : undefined}
-          // >>> Display Value
-          displayValues={cachedDisplayValues.value}
-          onDisplayValuesChange={onDisplayValuesChange}
-          // >>> Search
-          searchValue={mergedSearchValue.value}
-          onSearch={onInternalSearch}
-          // >>> Options
-          OptionList={OptionList}
-          emptyOptions={!mergedTreeData.value.length}
-          onDropdownVisibleChange={onInternalDropdownVisibleChange}
-          tagRender={props.tagRender || slots.tagRender}
-          dropdownMatchSelectWidth={props.dropdownMatchSelectWidth ?? true}
-        />
-      )
-    }
-  },
-})