@rc-component/tree-select 1.0.0

package/es/TreeSelect.js

@@ -0,0 +1,507 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import { BaseSelect } from '@rc-component/select';
+import useId from "@rc-component/select/es/hooks/useId";
+import { conductCheck } from "rc-tree/es/utils/conductUtil";
+import useMergedState from "@rc-component/util/es/hooks/useMergedState";
+import * as React from 'react';
+import useCache from "./hooks/useCache";
+import useCheckedKeys from "./hooks/useCheckedKeys";
+import useDataEntities from "./hooks/useDataEntities";
+import useFilterTreeData from "./hooks/useFilterTreeData";
+import useRefFunc from "./hooks/useRefFunc";
+import useTreeData from "./hooks/useTreeData";
+import LegacyContext from "./LegacyContext";
+import OptionList from "./OptionList";
+import TreeNode from "./TreeNode";
+import TreeSelectContext from "./TreeSelectContext";
+import { fillAdditionalInfo, fillLegacyProps } from "./utils/legacyUtil";
+import { formatStrategyValues, SHOW_ALL, SHOW_CHILD, SHOW_PARENT } from "./utils/strategyUtil";
+import { fillFieldNames, isNil, toArray } from "./utils/valueUtil";
+import warningProps from "./utils/warningPropsUtil";
+function isRawValue(value) {
+  return !value || typeof value !== 'object';
+}
+const TreeSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    id,
+    prefixCls = 'rc-tree-select',
+    // Value
+    value,
+    defaultValue,
+    onChange,
+    onSelect,
+    onDeselect,
+    // Search
+    searchValue,
+    inputValue,
+    onSearch,
+    autoClearSearchValue = true,
+    filterTreeNode,
+    treeNodeFilterProp = 'value',
+    // Selector
+    showCheckedStrategy,
+    treeNodeLabelProp,
+    //  Mode
+    multiple,
+    treeCheckable,
+    treeCheckStrictly,
+    labelInValue,
+    maxCount,
+    // FieldNames
+    fieldNames,
+    // Data
+    treeDataSimpleMode,
+    treeData,
+    children,
+    loadData,
+    treeLoadedKeys,
+    onTreeLoad,
+    // Expanded
+    treeDefaultExpandAll,
+    treeExpandedKeys,
+    treeDefaultExpandedKeys,
+    onTreeExpand,
+    treeExpandAction,
+    // Options
+    virtual,
+    listHeight = 200,
+    listItemHeight = 20,
+    listItemScrollOffset = 0,
+    onPopupVisibleChange,
+    popupMatchSelectWidth = true,
+    // Tree
+    treeLine,
+    treeIcon,
+    showTreeIcon,
+    switcherIcon,
+    treeMotion,
+    treeTitleRender,
+    onPopupScroll,
+    ...restProps
+  } = props;
+  const mergedId = useId(id);
+  const treeConduction = treeCheckable && !treeCheckStrictly;
+  const mergedCheckable = treeCheckable || treeCheckStrictly;
+  const mergedLabelInValue = treeCheckStrictly || labelInValue;
+  const mergedMultiple = mergedCheckable || multiple;
+  const [internalValue, setInternalValue] = useMergedState(defaultValue, {
+    value
+  });
+
+  // `multiple` && `!treeCheckable` should be show all
+  const mergedShowCheckedStrategy = React.useMemo(() => {
+    if (!treeCheckable) {
+      return SHOW_ALL;
+    }
+    return showCheckedStrategy || SHOW_CHILD;
+  }, [showCheckedStrategy, treeCheckable]);
+
+  // ========================== Warning ===========================
+  if (process.env.NODE_ENV !== 'production') {
+    warningProps(props);
+  }
+
+  // ========================= FieldNames =========================
+  const mergedFieldNames = React.useMemo(() => fillFieldNames(fieldNames), /* eslint-disable react-hooks/exhaustive-deps */
+  [JSON.stringify(fieldNames)]
+  /* eslint-enable react-hooks/exhaustive-deps */);
+
+  // =========================== Search ===========================
+  const [mergedSearchValue, setSearchValue] = useMergedState('', {
+    value: searchValue !== undefined ? searchValue : inputValue,
+    postState: search => search || ''
+  });
+  const onInternalSearch = searchText => {
+    setSearchValue(searchText);
+    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(treeData, children, treeDataSimpleMode);
+  const {
+    keyEntities,
+    valueEntities
+  } = useDataEntities(mergedTreeData, mergedFieldNames);
+
+  /** Get `missingRawValues` which not exist in the tree yet */
+  const splitRawValues = React.useCallback(newRawValues => {
+    const missingRawValues = [];
+    const existRawValues = [];
+
+    // Keep missing value in the cache
+    newRawValues.forEach(val => {
+      if (valueEntities.has(val)) {
+        existRawValues.push(val);
+      } else {
+        missingRawValues.push(val);
+      }
+    });
+    return {
+      missingRawValues,
+      existRawValues
+    };
+  }, [valueEntities]);
+
+  // Filtered Tree
+  const filteredTreeData = useFilterTreeData(mergedTreeData, mergedSearchValue, {
+    fieldNames: mergedFieldNames,
+    treeNodeFilterProp,
+    filterTreeNode
+  });
+
+  // =========================== Label ============================
+  const getLabel = React.useCallback(item => {
+    if (item) {
+      if (treeNodeLabelProp) {
+        return item[treeNodeLabelProp];
+      }
+
+      // Loop from fieldNames
+      const {
+        _title: titleList
+      } = mergedFieldNames;
+      for (let i = 0; i < titleList.length; i += 1) {
+        const title = item[titleList[i]];
+        if (title !== undefined) {
+          return title;
+        }
+      }
+    }
+  }, [mergedFieldNames, treeNodeLabelProp]);
+
+  // ========================= Wrap Value =========================
+  const toLabeledValues = React.useCallback(draftValues => {
+    const values = toArray(draftValues);
+    return values.map(val => {
+      if (isRawValue(val)) {
+        return {
+          value: val
+        };
+      }
+      return val;
+    });
+  }, []);
+  const convert2LabelValues = React.useCallback(draftValues => {
+    const values = toLabeledValues(draftValues);
+    return values.map(item => {
+      let {
+        label: rawLabel
+      } = item;
+      const {
+        value: rawValue,
+        halfChecked: rawHalfChecked
+      } = item;
+      let rawDisabled;
+      const entity = valueEntities.get(rawValue);
+
+      // Fill missing label & status
+      if (entity) {
+        rawLabel = treeTitleRender ? treeTitleRender(entity.node) : rawLabel ?? getLabel(entity.node);
+        rawDisabled = entity.node.disabled;
+      } else if (rawLabel === undefined) {
+        // We try to find in current `labelInValue` value
+        const labelInValueItem = toLabeledValues(internalValue).find(labeledItem => labeledItem.value === rawValue);
+        rawLabel = labelInValueItem.label;
+      }
+      return {
+        label: rawLabel,
+        value: rawValue,
+        halfChecked: rawHalfChecked,
+        disabled: rawDisabled
+      };
+    });
+  }, [valueEntities, getLabel, toLabeledValues, internalValue]);
+
+  // =========================== Values ===========================
+  const rawMixedLabeledValues = React.useMemo(() => toLabeledValues(internalValue === null ? [] : internalValue), [toLabeledValues, internalValue]);
+
+  // Split value into full check and half check
+  const [rawLabeledValues, rawHalfLabeledValues] = React.useMemo(() => {
+    const fullCheckValues = [];
+    const halfCheckValues = [];
+    rawMixedLabeledValues.forEach(item => {
+      if (item.halfChecked) {
+        halfCheckValues.push(item);
+      } else {
+        fullCheckValues.push(item);
+      }
+    });
+    return [fullCheckValues, halfCheckValues];
+  }, [rawMixedLabeledValues]);
+
+  // const [mergedValues] = useCache(rawLabeledValues);
+  const rawValues = React.useMemo(() => rawLabeledValues.map(item => item.value), [rawLabeledValues]);
+
+  // Convert value to key. Will fill missed keys for conduct check.
+  const [rawCheckedValues, rawHalfCheckedValues] = useCheckedKeys(rawLabeledValues, rawHalfLabeledValues, treeConduction, keyEntities);
+
+  // Convert rawCheckedKeys to check strategy related values
+  const displayValues = React.useMemo(() => {
+    // Collect keys which need to show
+    const displayKeys = formatStrategyValues(rawCheckedValues, mergedShowCheckedStrategy, keyEntities, mergedFieldNames);
+
+    // Convert to value and filled with label
+    const values = displayKeys.map(key => keyEntities[key]?.node?.[mergedFieldNames.value] ?? key);
+
+    // Back fill with origin label
+    const labeledValues = values.map(val => {
+      const targetItem = rawLabeledValues.find(item => item.value === val);
+      const label = labelInValue ? targetItem?.label : treeTitleRender?.(targetItem);
+      return {
+        value: val,
+        label
+      };
+    });
+    const rawDisplayValues = convert2LabelValues(labeledValues);
+    const firstVal = rawDisplayValues[0];
+    if (!mergedMultiple && firstVal && isNil(firstVal.value) && isNil(firstVal.label)) {
+      return [];
+    }
+    return rawDisplayValues.map(item => ({
+      ...item,
+      label: item.label ?? item.value
+    }));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mergedFieldNames, mergedMultiple, rawCheckedValues, rawLabeledValues, convert2LabelValues, mergedShowCheckedStrategy, keyEntities]);
+  const [cachedDisplayValues] = useCache(displayValues);
+
+  // ========================== MaxCount ==========================
+  const mergedMaxCount = React.useMemo(() => {
+    if (mergedMultiple && (mergedShowCheckedStrategy === 'SHOW_CHILD' || treeCheckStrictly || !treeCheckable)) {
+      return maxCount;
+    }
+    return null;
+  }, [maxCount, mergedMultiple, treeCheckStrictly, mergedShowCheckedStrategy, treeCheckable]);
+
+  // =========================== Change ===========================
+  const triggerChange = useRefFunc((newRawValues, extra, source) => {
+    const formattedKeyList = formatStrategyValues(newRawValues, mergedShowCheckedStrategy, keyEntities, mergedFieldNames);
+
+    // Not allow pass with `maxCount`
+    if (mergedMaxCount && formattedKeyList.length > mergedMaxCount) {
+      return;
+    }
+    const labeledValues = convert2LabelValues(newRawValues);
+    setInternalValue(labeledValues);
+
+    // Clean up if needed
+    if (autoClearSearchValue) {
+      setSearchValue('');
+    }
+
+    // Generate rest parameters is costly, so only do it when necessary
+    if (onChange) {
+      let eventValues = newRawValues;
+      if (treeConduction) {
+        eventValues = formattedKeyList.map(key => {
+          const entity = valueEntities.get(key);
+          return entity ? entity.node[mergedFieldNames.value] : key;
+        });
+      }
+      const {
+        triggerValue,
+        selected
+      } = extra || {
+        triggerValue: undefined,
+        selected: undefined
+      };
+      let returnRawValues = eventValues;
+
+      // We need fill half check back
+      if (treeCheckStrictly) {
+        const halfValues = rawHalfLabeledValues.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,
+        triggerValue
+      };
+
+      // [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 (treeCheckStrictly || source === 'selection' && !selected) {
+        showPosition = false;
+      }
+      fillAdditionalInfo(additionalInfo, triggerValue, newRawValues, mergedTreeData, showPosition, mergedFieldNames);
+      if (mergedCheckable) {
+        additionalInfo.checked = selected;
+      } else {
+        additionalInfo.selected = selected;
+      }
+      const returnValues = mergedLabelInValue ? returnLabeledValues : returnLabeledValues.map(item => item.value);
+      onChange(mergedMultiple ? returnValues : returnValues[0], mergedLabelInValue ? null : returnLabeledValues.map(item => item.label), additionalInfo);
+    }
+  });
+
+  // ========================== Options ===========================
+  /** Trigger by option list */
+  const onOptionSelect = React.useCallback((selectedKey, {
+    selected,
+    source
+  }) => {
+    const entity = keyEntities[selectedKey];
+    const node = entity?.node;
+    const selectedValue = node?.[mergedFieldNames.value] ?? selectedKey;
+
+    // Never be falsy but keep it safe
+    if (!mergedMultiple) {
+      // Single mode always set value
+      triggerChange([selectedValue], {
+        selected: true,
+        triggerValue: selectedValue
+      }, 'option');
+    } else {
+      let newRawValues = selected ? [...rawValues, selectedValue] : rawCheckedValues.filter(v => v !== selectedValue);
+
+      // Add keys if tree conduction
+      if (treeConduction) {
+        // Should keep missing values
+        const {
+          missingRawValues,
+          existRawValues
+        } = splitRawValues(newRawValues);
+        const keyList = existRawValues.map(val => valueEntities.get(val).key);
+
+        // Conduction by selected or not
+        let checkedKeys;
+        if (selected) {
+          ({
+            checkedKeys
+          } = conductCheck(keyList, true, keyEntities));
+        } else {
+          ({
+            checkedKeys
+          } = conductCheck(keyList, {
+            checked: false,
+            halfCheckedKeys: rawHalfCheckedValues
+          }, keyEntities));
+        }
+
+        // Fill back of keys
+        newRawValues = [...missingRawValues, ...checkedKeys.map(key => keyEntities[key].node[mergedFieldNames.value])];
+      }
+      triggerChange(newRawValues, {
+        selected,
+        triggerValue: selectedValue
+      }, source || 'option');
+    }
+
+    // Trigger select event
+    if (selected || !mergedMultiple) {
+      onSelect?.(selectedValue, fillLegacyProps(node));
+    } else {
+      onDeselect?.(selectedValue, fillLegacyProps(node));
+    }
+  }, [splitRawValues, valueEntities, keyEntities, mergedFieldNames, mergedMultiple, rawValues, triggerChange, treeConduction, onSelect, onDeselect, rawCheckedValues, rawHalfCheckedValues, maxCount]);
+
+  // ========================== Dropdown ==========================
+  const onInternalPopupVisibleChange = React.useCallback(open => {
+    if (onPopupVisibleChange) {
+      onPopupVisibleChange(open);
+    }
+  }, [onPopupVisibleChange]);
+
+  // ====================== Display Change ========================
+  const onDisplayValuesChange = useRefFunc((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'
+      });
+    }
+  });
+
+  // ========================== Context ===========================
+  const treeSelectContext = React.useMemo(() => {
+    return {
+      virtual,
+      popupMatchSelectWidth,
+      listHeight,
+      listItemHeight,
+      listItemScrollOffset,
+      treeData: filteredTreeData,
+      fieldNames: mergedFieldNames,
+      onSelect: onOptionSelect,
+      treeExpandAction,
+      treeTitleRender,
+      onPopupScroll,
+      leftMaxCount: maxCount === undefined ? null : maxCount - cachedDisplayValues.length,
+      leafCountOnly: mergedShowCheckedStrategy === 'SHOW_CHILD' && !treeCheckStrictly && !!treeCheckable,
+      valueEntities
+    };
+  }, [virtual, popupMatchSelectWidth, listHeight, listItemHeight, listItemScrollOffset, filteredTreeData, mergedFieldNames, onOptionSelect, treeExpandAction, treeTitleRender, onPopupScroll, maxCount, cachedDisplayValues.length, mergedShowCheckedStrategy, treeCheckStrictly, treeCheckable, valueEntities]);
+
+  // ======================= Legacy Context =======================
+  const legacyContext = React.useMemo(() => ({
+    checkable: mergedCheckable,
+    loadData,
+    treeLoadedKeys,
+    onTreeLoad,
+    checkedKeys: rawCheckedValues,
+    halfCheckedKeys: rawHalfCheckedValues,
+    treeDefaultExpandAll,
+    treeExpandedKeys,
+    treeDefaultExpandedKeys,
+    onTreeExpand,
+    treeIcon,
+    treeMotion,
+    showTreeIcon,
+    switcherIcon,
+    treeLine,
+    treeNodeFilterProp,
+    keyEntities
+  }), [mergedCheckable, loadData, treeLoadedKeys, onTreeLoad, rawCheckedValues, rawHalfCheckedValues, treeDefaultExpandAll, treeExpandedKeys, treeDefaultExpandedKeys, onTreeExpand, treeIcon, treeMotion, showTreeIcon, switcherIcon, treeLine, treeNodeFilterProp, keyEntities]);
+
+  // =========================== Render ===========================
+  return /*#__PURE__*/React.createElement(TreeSelectContext.Provider, {
+    value: treeSelectContext
+  }, /*#__PURE__*/React.createElement(LegacyContext.Provider, {
+    value: legacyContext
+  }, /*#__PURE__*/React.createElement(BaseSelect, _extends({
+    ref: ref
+  }, restProps, {
+    // >>> MISC
+    id: mergedId,
+    prefixCls: prefixCls,
+    mode: mergedMultiple ? 'multiple' : undefined
+    // >>> Display Value
+    ,
+    displayValues: cachedDisplayValues,
+    onDisplayValuesChange: onDisplayValuesChange
+    // >>> Search
+    ,
+    searchValue: mergedSearchValue,
+    onSearch: onInternalSearch
+    // >>> Options
+    ,
+    OptionList: OptionList,
+    emptyOptions: !mergedTreeData.length,
+    onPopupVisibleChange: onInternalPopupVisibleChange,
+    popupMatchSelectWidth: popupMatchSelectWidth
+  }))));
+});
+
+// Assign name for Debug
+if (process.env.NODE_ENV !== 'production') {
+  TreeSelect.displayName = 'TreeSelect';
+}
+const GenericTreeSelect = TreeSelect;
+GenericTreeSelect.TreeNode = TreeNode;
+GenericTreeSelect.SHOW_ALL = SHOW_ALL;
+GenericTreeSelect.SHOW_PARENT = SHOW_PARENT;
+GenericTreeSelect.SHOW_CHILD = SHOW_CHILD;
+export default GenericTreeSelect;

package/es/TreeSelectContext.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { ExpandAction } from 'rc-tree/lib/Tree';
+import type { DataNode, FieldNames, Key } from './interface';
+import type useDataEntities from './hooks/useDataEntities';
+export interface TreeSelectContextProps {
+    virtual?: boolean;
+    popupMatchSelectWidth?: boolean | number;
+    listHeight: number;
+    listItemHeight: number;
+    listItemScrollOffset?: number;
+    treeData: DataNode[];
+    fieldNames: FieldNames;
+    onSelect: (value: Key, info: {
+        selected: boolean;
+    }) => void;
+    treeExpandAction?: ExpandAction;
+    treeTitleRender?: (node: any) => React.ReactNode;
+    onPopupScroll?: React.UIEventHandler<HTMLDivElement>;
+    leftMaxCount: number | null;
+    /** When `true`, only take leaf node as count, or take all as count with `maxCount` limitation */
+    leafCountOnly: boolean;
+    valueEntities: ReturnType<typeof useDataEntities>['valueEntities'];
+}
+declare const TreeSelectContext: React.Context<TreeSelectContextProps>;
+export default TreeSelectContext;

package/es/TreeSelectContext.js

@@ -0,0 +1,3 @@
+import * as React from 'react';
+const TreeSelectContext = /*#__PURE__*/React.createContext(null);
+export default TreeSelectContext;

package/es/hooks/useCache.d.ts

@@ -0,0 +1,7 @@
+import type { LabeledValueType } from '../interface';
+/**
+ * This function will try to call requestIdleCallback if available to save performance.
+ * No need `getLabel` here since already fetch on `rawLabeledValue`.
+ */
+declare const _default: (values: LabeledValueType[]) => [LabeledValueType[]];
+export default _default;

package/es/hooks/useCache.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+/**
+ * This function will try to call requestIdleCallback if available to save performance.
+ * No need `getLabel` here since already fetch on `rawLabeledValue`.
+ */
+export default (values => {
+  const cacheRef = React.useRef({
+    valueLabels: new Map()
+  });
+  return React.useMemo(() => {
+    const {
+      valueLabels
+    } = cacheRef.current;
+    const valueLabelsCache = new Map();
+    const filledValues = values.map(item => {
+      const {
+        value,
+        label
+      } = item;
+      const mergedLabel = label ?? valueLabels.get(value);
+
+      // Save in cache
+      valueLabelsCache.set(value, mergedLabel);
+      return {
+        ...item,
+        label: mergedLabel
+      };
+    });
+    cacheRef.current.valueLabels = valueLabelsCache;
+    return [filledValues];
+  }, [values]);
+});

package/es/hooks/useCheckedKeys.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { DataEntity } from 'rc-tree/lib/interface';
+import type { LabeledValueType, SafeKey } from '../interface';
+declare const useCheckedKeys: (rawLabeledValues: LabeledValueType[], rawHalfCheckedValues: LabeledValueType[], treeConduction: boolean, keyEntities: Record<SafeKey, DataEntity>) => React.Key[][];
+export default useCheckedKeys;

package/es/hooks/useCheckedKeys.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { conductCheck } from "rc-tree/es/utils/conductUtil";
+const useCheckedKeys = (rawLabeledValues, rawHalfCheckedValues, treeConduction, keyEntities) => {
+  return React.useMemo(() => {
+    const extractValues = values => values.map(({
+      value
+    }) => value);
+    const checkedKeys = extractValues(rawLabeledValues);
+    const halfCheckedKeys = extractValues(rawHalfCheckedValues);
+    const missingValues = checkedKeys.filter(key => !keyEntities[key]);
+    let finalCheckedKeys = checkedKeys;
+    let finalHalfCheckedKeys = halfCheckedKeys;
+    if (treeConduction) {
+      const conductResult = conductCheck(checkedKeys, true, keyEntities);
+      finalCheckedKeys = conductResult.checkedKeys;
+      finalHalfCheckedKeys = conductResult.halfCheckedKeys;
+    }
+    return [Array.from(new Set([...missingValues, ...finalCheckedKeys])), finalHalfCheckedKeys];
+  }, [rawLabeledValues, rawHalfCheckedValues, treeConduction, keyEntities]);
+};
+export default useCheckedKeys;

package/es/hooks/useDataEntities.d.ts

@@ -0,0 +1,7 @@
+import type { DataEntity } from 'rc-tree/lib/interface';
+import type { SafeKey, FieldNames } from '../interface';
+declare const _default: (treeData: any, fieldNames: FieldNames) => {
+    valueEntities: Map<SafeKey, DataEntity>;
+    keyEntities: Record<string, DataEntity>;
+};
+export default _default;

package/es/hooks/useDataEntities.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { convertDataToEntities } from "rc-tree/es/utils/treeUtil";
+import warning from "@rc-component/util/es/warning";
+import { isNil } from "../utils/valueUtil";
+export default ((treeData, fieldNames) => React.useMemo(() => {
+  const collection = convertDataToEntities(treeData, {
+    fieldNames,
+    initWrapper: wrapper => ({
+      ...wrapper,
+      valueEntities: new Map()
+    }),
+    processEntity: (entity, wrapper) => {
+      const val = entity.node[fieldNames.value];
+
+      // Check if exist same value
+      if (process.env.NODE_ENV !== 'production') {
+        const key = entity.node.key;
+        warning(!isNil(val), 'TreeNode `value` is invalidate: undefined');
+        warning(!wrapper.valueEntities.has(val), `Same \`value\` exist in the tree: ${val}`);
+        warning(!key || String(key) === String(val), `\`key\` or \`value\` with TreeNode must be the same or you can remove one of them. key: ${key}, value: ${val}.`);
+      }
+      wrapper.valueEntities.set(val, entity);
+    }
+  });
+  return collection;
+}, [treeData, fieldNames]));

package/es/hooks/useFilterTreeData.d.ts

@@ -0,0 +1,8 @@
+import type { TreeSelectProps } from '../TreeSelect';
+import type { DataNode, FieldNames } from '../interface';
+declare const useFilterTreeData: (treeData: DataNode[], searchValue: string, options: {
+    fieldNames: FieldNames;
+    treeNodeFilterProp: string;
+    filterTreeNode: TreeSelectProps['filterTreeNode'];
+}) => DataNode[];
+export default useFilterTreeData;

package/es/hooks/useFilterTreeData.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { fillLegacyProps } from "../utils/legacyUtil";
+const useFilterTreeData = (treeData, searchValue, options) => {
+  const {
+    fieldNames,
+    treeNodeFilterProp,
+    filterTreeNode
+  } = options;
+  const {
+    children: fieldChildren
+  } = fieldNames;
+  return React.useMemo(() => {
+    if (!searchValue || filterTreeNode === false) {
+      return treeData;
+    }
+    const filterOptionFunc = typeof filterTreeNode === 'function' ? filterTreeNode : (_, dataNode) => String(dataNode[treeNodeFilterProp]).toUpperCase().includes(searchValue.toUpperCase());
+    const filterTreeNodes = (nodes, keepAll = false) => nodes.reduce((filtered, node) => {
+      const children = node[fieldChildren];
+      const isMatch = keepAll || filterOptionFunc(searchValue, fillLegacyProps(node));
+      const filteredChildren = filterTreeNodes(children || [], isMatch);
+      if (isMatch || filteredChildren.length) {
+        filtered.push({
+          ...node,
+          isLeaf: undefined,
+          [fieldChildren]: filteredChildren
+        });
+      }
+      return filtered;
+    }, []);
+    return filterTreeNodes(treeData);
+  }, [treeData, searchValue, fieldChildren, treeNodeFilterProp, filterTreeNode]);
+};
+export default useFilterTreeData;