@qsxy/element-plus-react 1.0.2 → 1.0.3

package/dist/TreeSelect/TreeSelectOption.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const TreeSelectOption: {
+    (props: any): React.JSX.Element;
+    displayName: string;
+};
+export default TreeSelectOption;

package/dist/TreeSelect/TreeSelectOption.js

@@ -0,0 +1,62 @@
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { useMount } from 'ahooks';
+import classNames from 'classnames';
+import React, { useCallback, useContext, useMemo, useRef } from 'react';
+import { SelectContext } from "../Select/SelectContext";
+import { useClassNames } from "../hooks";
+var TreeSelectOption = function TreeSelectOption(props) {
+  var _useClassNames = useClassNames('select-dropdown'),
+    e = _useClassNames.e,
+    is = _useClassNames.is;
+  var _useContext = useContext(SelectContext),
+    selectedValue = _useContext.value,
+    hoverValue = _useContext.hover,
+    setHover = _useContext.setHover,
+    multiple = _useContext.multiple,
+    cachedOptions = _useContext.cachedOptions;
+  var value = props.value,
+    label = props.label,
+    disabled = props.disabled;
+  var elRef = useRef(null);
+  useMount(function () {
+    cachedOptions.current.set(value, {
+      value: value,
+      label: label,
+      disabled: disabled
+    });
+  });
+
+  /** 选中回调 */
+  var handleOnClick = useCallback(function (event) {
+    event.stopPropagation();
+    elRef.current.parentElement.click();
+  }, []);
+
+  /** 是否已选中 */
+  var selected = useMemo(function () {
+    if (multiple && selectedValue instanceof Array) {
+      return selectedValue.includes(value);
+    }
+    return value === selectedValue;
+  }, [multiple, value, selectedValue]);
+  return /*#__PURE__*/React.createElement("li", {
+    className: classNames(e(_templateObject || (_templateObject = _taggedTemplateLiteral(["item"]))), is({
+      disabled: disabled,
+      selected: selected,
+      hovering: value === hoverValue
+    }), props.className),
+    style: props.style,
+    title: label + '',
+    onClick: handleOnClick,
+    onMouseEnter: function onMouseEnter() {
+      return setHover(value);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setHover(selectedValue);
+    },
+    ref: elRef
+  }, props.children || /*#__PURE__*/React.createElement("span", null, label));
+};
+TreeSelectOption.displayName = 'ElOption';
+export default TreeSelectOption;

package/dist/TreeSelect/cacheOptions.d.ts

@@ -0,0 +1,9 @@
+import React, { RefObject } from 'react';
+import { SelectRef } from '../Select';
+import { CacheOption } from './typings';
+interface Props {
+    data: CacheOption[];
+    select: RefObject<SelectRef>;
+}
+declare const CacheOptions: (props: Props) => React.JSX.Element;
+export default CacheOptions;

package/dist/TreeSelect/cacheOptions.js

@@ -0,0 +1,22 @@
+import React, { useEffect } from 'react';
+var CacheOptions = function CacheOptions(props) {
+  useEffect(function () {
+    props.data.forEach(function (item) {
+      // @ts-ignore
+      if (!props.select.current.cachedOptions.current.has(item.value)) {
+        // TODO: the type of 'item' is not compatible with the type of 'cachedOptions',
+        // which may indicate potential runtime issues.
+        // @ts-expect-error
+        props.select.current.cachedOptions.current.set(item.value, item);
+      }
+    });
+
+    // fork from packages/select/src/useSelect.ts#330
+    // const inputs = selectRef.current.?.querySelectorAll('input') || [];
+    // if (isClient && !Array.from(inputs).includes(document.activeElement as HTMLInputElement)) {
+    //     select.setSelected();
+    // }
+  }, [props.data]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null);
+};
+export default CacheOptions;

package/dist/TreeSelect/index.d.ts

@@ -1,2 +1 @@
 export { default as TreeSelect } from './TreeSelect';
-export type { SelectInfo, TreeSelectProps, TreeSelectRef } from './typings';

package/dist/TreeSelect/typings.d.ts

@@ -1,65 +1,13 @@
-import React from 'react';
-import { InputRef } from '../Input/typings';
-import { PopperOptionRef } from '../Popper';
-import { DataNode, Key, TreeProps } from '../Tree';
-import { AnimationEventProps, BaseProps, FormControlBaseProps, NativeProps } from '../types/common';
-export type ValueType = React.AllHTMLAttributes<HTMLInputElement>['value'];
-export type TreeSelectRef = {
-    inputInstance?: InputRef;
-    searchInstance?: InputRef;
-    popperInstRef: PopperOptionRef;
-    label: string | string[];
-    setLabel: (label: string) => void;
-    getValue: () => ValueType;
-    setValue: (value: ValueType) => void;
-    onClear: (event?: any) => void;
-    setVisible: (value: boolean) => void;
-};
-export interface TreeSelectProps<T = DataNode, V = ValueType> extends Omit<FormControlBaseProps<V>, 'onChange'>, Omit<TreeProps<T>, 'children' | 'style'>, Omit<BaseProps, 'children'>, NativeProps, AnimationEventProps {
-    /** 表单提交给后台表示节点名称的name */
-    labelName?: string;
-    /** 是否可以清空选项 */
-    clearable?: boolean;
-    /** 占位符 */
-    placeholder?: string;
-    filterable?: boolean;
-    /** 选择任意级别 */
-    checkStrictly?: boolean;
-    /** 多选时是否将选中值按文字的形式展示 */
-    collapseTags?: boolean;
-    /** 是否纯文本模式，即无边框 */
-    plain?: boolean;
-    /**  */
-    required?: boolean;
-    /** 下拉项最大宽度 */
-    maxWidth?: number;
-    /** 表单校验错误提示 */
-    error?: boolean;
-    /** 表单校验警告提示 */
-    warning?: boolean;
-    /** 表是否加载中 */
-    loading?: boolean;
-    /** 输入框前置内容，只对 type="text" 有效 */
-    prepend?: React.ReactElement<any> | string | number;
-    /** 输入框后置内容，只对 type="text" 有效 */
-    append?: React.ReactElement | string | number;
-    /** 选项为空时显示的文字 */
-    noDataText?: React.ReactElement | string;
-    /** 远程加载时显示的文字 */
-    loadingText?: React.ReactElement | string;
-    /** 点击节点前的回调，返回true触发onClick事件和onSelect事件 */
-    onBeforeClick?: (node: T, event: React.MouseEvent<any>) => boolean;
-    /** 点击节点事件 */
-    onClickNode?: (node: T, event: React.MouseEvent<any>) => boolean;
-    /** 选中值发生变化时触发 */
-    onChange?: (value: ValueType | Key[], label?: string | string[]) => void;
-    /** 数据加载成功时调用 */
-    onLoadSuccess?: (value: ValueType | Key[], label?: string[]) => void;
+import { SelectProps, SelectRef } from '../Select';
+import { TreeProps, TreeRef } from '../Tree/typings';
+export interface TreeSelectProps extends Omit<TreeProps, 'children'>, SelectProps {
+    /** 懒加载节点的缓存数据，结构与数据相同，用于获取未加载数据的标签 */
+    cacheData?: any[];
 }
-export type SelectInfo<T> = {
-    event: 'select';
-    selected: boolean;
-    node: T;
-    selectedNodes: T[];
-    nativeEvent: React.MouseEvent<any>;
+export type CacheOption = {
+    value: string | number | boolean | object;
+    currentLabel: string | number;
+    label: string | number;
+    isDisabled: boolean;
 };
+export type TreeSelectRef = Pick<TreeRef, 'filter' | 'updateKeyChildren' | 'getCheckedNodes' | 'setCheckedNodes' | 'getCheckedKeys' | 'setCheckedKeys' | 'setChecked' | 'getHalfCheckedNodes' | 'getHalfCheckedKeys' | 'getCurrentKey' | 'getCurrentNode' | 'setCurrentKey' | 'setCurrentNode' | 'getNode' | 'remove' | 'append' | 'insertBefore' | 'insertAfter'> & Pick<SelectRef, 'getValue' | 'setVisible'>;

package/dist/TreeSelect/useSelect.d.ts

@@ -0,0 +1,125 @@
+import { RefObject } from 'react';
+import { SelectRef } from '../Select';
+import { TreeRef } from '../Tree/typings';
+import { TreeSelectProps } from './typings';
+declare const useSelect: (props: TreeSelectProps, { selectRef, treeRef, key }: {
+    selectRef: RefObject<SelectRef>;
+    treeRef: RefObject<TreeRef>;
+    key: string;
+}) => {
+    className: string;
+    style: import("react").CSSProperties & Partial<Record<never, string>>;
+    valueKey: string;
+    popperClass: string;
+    filterMethod: (keyword?: string) => void;
+    cacheData?: any[];
+    data?: import("../Tree/typings").TreeData;
+    draggable?: boolean;
+    icon?: import("..").IconName;
+    classPrefix?: string;
+    popperStyle?: import("react").CSSProperties;
+    props?: import("../Tree/typings").TreeOptionProps;
+    indent?: number;
+    load?: import("../Tree/typings").LoadFunction;
+    lazy?: boolean;
+    accordion?: boolean;
+    emptyText?: string;
+    defaultExpandAll?: boolean;
+    onCurrentChange?: (nodeData: import("../Tree/typings").TreeNodeData, node: import("..").TreeNode) => void;
+    renderAfterExpand?: boolean;
+    nodeKey?: string;
+    checkStrictly?: boolean;
+    expandOnClickNode?: boolean;
+    checkOnClickNode?: boolean;
+    checkOnClickLeaf?: boolean;
+    checkDescendants?: boolean;
+    autoExpandParent?: boolean;
+    defaultCheckedKeys?: import("../Tree/typings").TreeKey[];
+    defaultExpandedKeys?: import("../Tree/typings").TreeKey[];
+    currentNodeKey?: import("../Tree/typings").TreeKey;
+    renderContent?: import("../Tree/typings").RenderContentFunction;
+    showCheckbox?: boolean;
+    allowDrag?: import("../Tree/typings").AllowDragFunction;
+    allowDrop?: import("../Tree/typings").AllowDropFunction;
+    highlightCurrent?: boolean;
+    filterNodeMethod?: import("../Tree/typings").FilterNodeMethodFunction;
+    renderEmpty?: () => import("react").ReactNode;
+    onNodeClick?: (nodeData: import("../Tree/typings").TreeNodeData, node: import("..").TreeNode, instance: RefObject<import("../Tree/typings").TreeNodeRef>, e: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onNodeContextmenu?: (event: import("react").MouseEvent<HTMLDivElement, MouseEvent>, nodeData: import("../Tree/typings").TreeNodeData, node: import("..").TreeNode, instance: RefObject<import("../Tree/typings").TreeNodeRef>) => void;
+    onCheckChange?: (nodeData: import("../Tree/typings").TreeNodeData, checked: boolean, indeterminate: boolean) => void;
+    onCheck?: (nodeData: import("../Tree/typings").TreeNodeData, checkedInfo: import("../Tree/typings").CheckedInfo) => void;
+    onNodeExpand?: (nodeData: import("../Tree/typings").TreeNodeData, node: import("..").TreeNode, instance: RefObject<import("../Tree/typings").TreeNodeRef>) => void;
+    onNodeCollapse?: (nodeData: import("../Tree/typings").TreeNodeData, node: import("..").TreeNode, instance: RefObject<import("../Tree/typings").TreeNodeRef>) => void;
+    onNodeDragStart?: (draggingNode: import("..").TreeNode, event: import("react").DragEvent<HTMLDivElement>) => void;
+    onNodeDragEnter?: (draggingNode: import("..").TreeNode, dropNode: import("..").TreeNode, event: import("react").DragEvent<HTMLDivElement>) => void;
+    onNodeDragLeave?: (draggingNode: import("..").TreeNode, dropNode: import("..").TreeNode, event: import("react").DragEvent<HTMLDivElement>) => void;
+    onNodeDragOver?: (draggingNode: import("..").TreeNode, dropNode: import("..").TreeNode, event: import("react").DragEvent<HTMLDivElement>) => void;
+    onNodeDragEnd?: (draggingNode: import("..").TreeNode, dropNode: import("..").TreeNode, dropType: import("../Tree/typings").NodeDropType, event: import("react").DragEvent<HTMLDivElement>) => void;
+    onNodeDrop?: (draggingNode: import("..").TreeNode, dropNode: import("..").TreeNode, dropType: import("../Tree/typings").NodeDropType, event: import("react").DragEvent<HTMLDivElement>) => void;
+    multiple?: boolean;
+    disabled?: boolean;
+    clearable?: boolean;
+    clearIcon?: import("..").IconName;
+    placeholder?: string;
+    filterable?: boolean;
+    noDataText?: string;
+    noMatchText?: string;
+    loading?: boolean;
+    loadingText?: string;
+    loadingIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    max?: boolean;
+    showArrow?: boolean;
+    required?: boolean;
+    error?: boolean;
+    warning?: boolean;
+    maxWidth?: number;
+    collapseTags?: boolean;
+    maxCollapseTags?: number;
+    collapseTagsTooltip?: boolean;
+    collapseTips?: (collapseNum: number, total: number) => string;
+    allowCreate?: boolean;
+    plain?: boolean;
+    prepend?: string | number | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    append?: string | number | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    size?: import("..").TypeAttributes.Size;
+    appendToBody?: boolean;
+    remote?: boolean;
+    remoteMethod?: (searchText: string) => void;
+    remoteShowSuffix?: boolean;
+    suffixIcon?: import("..").IconName;
+    tagType?: import("..").TypeAttributes.Appearance;
+    tagEffect?: "light" | "dark" | "plain";
+    labelFormat?: (index: number, value: import("../Select/typings").OptionValue, label?: import("../Select/typings").OptionValue) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    onChange?: <T = any>(value: import("../Select/typings").ValueType, data?: import("../Select/typings").OptionData<T> | import("../Select/typings").OptionData<T>[]) => void;
+    onVisibleChange?: (visible: boolean) => void;
+    onRemoveTag?: (tagValue: any) => void;
+    onClear?: () => void;
+    automaticDropdown?: boolean;
+    header?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    footer?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    tag?: <T_1 = any>(params: {
+        data: import("../Select/typings").OptionData<T_1>[];
+        selectDisabled: boolean;
+        deleteTag: (event: import("react").MouseEvent<HTMLElement, MouseEvent>, tag: import("../Select/typings").OptionData<T_1>) => void;
+    }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    unmountOnExit?: boolean;
+    name?: string;
+    readOnly?: boolean;
+    value?: import("../Select/typings").ValueType;
+    defaultValue?: import("../Select/typings").ValueType;
+    children?: (import("react").ReactElement<import("../Select/typings").SelectOptionGroupProps | import("../Select/typings").SelectOptionProps, string | import("react").JSXElementConstructor<any>> | import("react").ReactElement<import("../Select/typings").SelectOptionGroupProps | import("../Select/typings").SelectOptionProps, string | import("react").JSXElementConstructor<any>>[]) | (import("react").ReactElement<import("../Select/typings").SelectOptionGroupProps | import("../Select/typings").SelectOptionProps, string | import("react").JSXElementConstructor<any>> | import("react").ReactElement<import("../Select/typings").SelectOptionGroupProps | import("../Select/typings").SelectOptionProps, string | import("react").JSXElementConstructor<any>>[])[];
+    beforeEnter?: (node?: HTMLElement | Text) => void;
+    onEnter?: (node?: HTMLElement | Text) => void;
+    afterEnter?: (node?: HTMLElement | Text) => void;
+    beforeLeave?: (node?: HTMLElement | Text) => void;
+    onLeave?: (node?: HTMLElement | Text) => void;
+    afterLeave?: (node?: HTMLElement | Text) => void;
+    popperInstRef?: import("react").MutableRefObject<import("..").PopperOptionRef>;
+    offset?: number;
+    placement?: import("@popperjs/core").Placement;
+    arrowOffset?: number;
+    effect?: string;
+    popperOptions?: import("@popperjs/core").Options;
+    fallbackPlacements?: import("@popperjs/core").Placement[] | ((placement?: import("@popperjs/core").Placement) => import("@popperjs/core").Placement[]);
+};
+export default useSelect;

package/dist/TreeSelect/useSelect.js

@@ -0,0 +1,104 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import pick from 'lodash/pick';
+import { useEffect, useMemo } from 'react';
+
+// 假设这些工具函数和常量已存在
+import classNames from 'classnames';
+import { nextTick } from "../Util";
+import { useClassNames } from "../hooks";
+import { popperAllProps } from "../hooks/popperPropsUtils";
+var formControlBaseKeys = ['name', 'value', 'defaultValue', 'disabled', 'size', 'readOnly', 'classPrefix', 'className', 'style'];
+var animationEventKeys = ['beforeEnter', 'onEnter', 'afterEnter', 'beforeLeave', 'onLeave', 'afterLeave'];
+var selectKeys = [].concat(formControlBaseKeys, animationEventKeys, ['multiple', 'disabled', 'valueKey', 'clearable', 'clearIcon', 'placeholder', 'filterable', 'filterMethod', 'noDataText', 'noMatchText', 'loading', 'loadingText', 'loadingIcon', 'max', 'showArrow', 'required', 'error', 'warning', 'maxWidth', 'collapseTags', 'maxCollapseTags', 'collapseTagsTooltip', 'collapseTips', 'allowCreate', 'plain', 'prepend', 'append', 'size', 'appendToBody', 'remote', 'remoteMethod', 'remoteShowSuffix', 'suffixIcon', 'tagType', 'tagEffect', 'labelFormat', 'onChange', 'onVisibleChange', 'onRemoveTag', 'onClear', 'automaticDropdown', 'header', 'footer', 'tag'], _toConsumableArray(popperAllProps));
+var useSelect = function useSelect(props, _ref) {
+  var selectRef = _ref.selectRef,
+    treeRef = _ref.treeRef,
+    key = _ref.key;
+  var ns = useClassNames('tree-select');
+
+  // 监听 props.data 变化并更新树节点
+  useEffect(function () {
+    if (props.filterable) {
+      nextTick().then(function () {
+        var _selectRef$current;
+        if (((_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 ? void 0 : _selectRef$current.getValue()) !== undefined) {
+          var _treeRef$current, _selectRef$current2;
+          (_treeRef$current = treeRef.current) === null || _treeRef$current === void 0 || _treeRef$current.filter((_selectRef$current2 = selectRef.current) === null || _selectRef$current2 === void 0 ? void 0 : _selectRef$current2.getValue());
+        }
+      });
+    }
+  }, [props.data]);
+
+  // // 聚焦到最后一个节点的逻辑
+  // const focusLastNode = (listNode: any[]) => {
+  //     const lastNode = listNode[listNode.length - 1];
+  //     if (lastNode.expanded && lastNode.childNodes?.[lastNode.childNodes.length - 1]) {
+  //         focusLastNode([lastNode.childNodes[lastNode.childNodes.length - 1]]);
+  //     } else {
+  //         const el = treeRef.current?.el$?.querySelector(`[data-key="${lastNode.key}"]`);
+  //         el?.focus({ preventScroll: true });
+  //     }
+  // };
+
+  // // 键盘事件处理
+  // useEffect(() => {
+  //     const handleKeyDown = async (evt: KeyboardEvent) => {
+  //         const code = getEventCode(evt);
+  //         const dropdownMenuVisible = selectRef.current?.dropdownMenuVisible;
+
+  //         if ([EVENT_CODE.down, EVENT_CODE.up].includes(code) && dropdownMenuVisible) {
+  //             await new Promise(resolve => setTimeout(resolve, 0)); // 等待异步操作完成
+  //             if (code === EVENT_CODE.up) {
+  //                 const listNode = treeRef.current?.store.root.childNodes;
+  //                 focusLastNode(listNode);
+  //             } else {
+  //                 const hoveringIndex = selectRef.current?.states.hoveringIndex;
+  //                 selectRef.current?.optionsArray[hoveringIndex]?.$el?.parentNode?.parentNode?.focus({
+  //                     preventScroll: true,
+  //                 });
+  //             }
+  //         }
+  //     };
+
+  //     const el = selectRef.current?.$el;
+  //     if (el) {
+  //         el.addEventListener('keydown', handleKeyDown, { capture: true });
+  //         return () => el.removeEventListener('keydown', handleKeyDown, { capture: true });
+  //     }
+  // }, []);
+
+  // 返回结果对象
+  var result = useMemo(function () {
+    return _objectSpread(_objectSpread({}, pick(props, selectKeys)), {}, {
+      className: props.popperClass,
+      style: props.style,
+      // onUpdateModelValue: (value: any) => props.onUpdateModelValue?.(value),
+      valueKey: key,
+      popperClass: classNames(ns.e('popper'), props.popperClass),
+      filterMethod: function filterMethod() {
+        var keyword = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+        if (props.filterMethod) {
+          props.filterMethod(keyword);
+        } else if (props.remoteMethod) {
+          props.remoteMethod(keyword);
+        } else {
+          var _treeRef$current2;
+          (_treeRef$current2 = treeRef.current) === null || _treeRef$current2 === void 0 || _treeRef$current2.filter(keyword);
+        }
+      }
+    });
+  }, [key, ns, props, treeRef]);
+  return result;
+};
+export default useSelect;

package/dist/TreeSelect/useTree.d.ts

@@ -0,0 +1,130 @@
+import React, { RefObject } from 'react';
+import { SelectRef } from '../Select';
+import { OptionData } from '../Select/typings';
+import { TreeNode } from '../Tree';
+import { TreeKey, TreeNodeData, TreeNodeRef, TreeRef } from '../Tree/typings';
+import { CacheOption, TreeSelectProps } from './typings';
+declare const useTree: (props: TreeSelectProps, { selectRef, treeRef, key, value, setValue }: {
+    selectRef: RefObject<SelectRef>;
+    treeRef: RefObject<TreeRef>;
+    key: string;
+    value: any;
+    setValue: (value: any) => void;
+}) => {
+    nodeKey: string;
+    expandOnClickNode: boolean;
+    defaultExpandedKeys: any[];
+    renderContent: ({ node, data, store }: any) => React.FunctionComponentElement<any>;
+    filterNodeMethod: (val: string, data: TreeNodeData, node: TreeNode) => boolean;
+    onNodeClick: (data: TreeNodeData, node: TreeNode, treeNodeRef: RefObject<TreeNodeRef>, e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onCheck: (data: TreeNodeData, params: any) => void;
+    onNodeExpand: (data: TreeNodeData, node: TreeNode, treeNodeRef: RefObject<TreeNodeRef>) => void;
+    cacheOptions: CacheOption[];
+    cacheData?: any[];
+    style?: React.CSSProperties & Partial<Record<never, string>>;
+    data?: import("../Tree/typings").TreeData;
+    className?: string;
+    draggable?: boolean;
+    icon?: import("..").IconName;
+    classPrefix?: string;
+    popperStyle?: React.CSSProperties;
+    props?: import("../Tree").TreeOptionProps;
+    indent?: number;
+    load?: import("../Tree").LoadFunction;
+    lazy?: boolean;
+    accordion?: boolean;
+    emptyText?: string;
+    defaultExpandAll?: boolean;
+    onCurrentChange?: (nodeData: TreeNodeData, node: TreeNode) => void;
+    renderAfterExpand?: boolean;
+    checkStrictly?: boolean;
+    checkOnClickNode?: boolean;
+    checkOnClickLeaf?: boolean;
+    checkDescendants?: boolean;
+    autoExpandParent?: boolean;
+    defaultCheckedKeys?: TreeKey[];
+    currentNodeKey?: TreeKey;
+    showCheckbox?: boolean;
+    allowDrag?: import("../Tree").AllowDragFunction;
+    allowDrop?: import("../Tree").AllowDropFunction;
+    highlightCurrent?: boolean;
+    renderEmpty?: () => React.ReactNode;
+    onNodeContextmenu?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, nodeData: TreeNodeData, node: TreeNode, instance: React.RefObject<TreeNodeRef>) => void;
+    onCheckChange?: (nodeData: TreeNodeData, checked: boolean, indeterminate: boolean) => void;
+    onNodeCollapse?: (nodeData: TreeNodeData, node: TreeNode, instance: React.RefObject<TreeNodeRef>) => void;
+    onNodeDragStart?: (draggingNode: TreeNode, event: React.DragEvent<HTMLDivElement>) => void;
+    onNodeDragEnter?: (draggingNode: TreeNode, dropNode: TreeNode, event: React.DragEvent<HTMLDivElement>) => void;
+    onNodeDragLeave?: (draggingNode: TreeNode, dropNode: TreeNode, event: React.DragEvent<HTMLDivElement>) => void;
+    onNodeDragOver?: (draggingNode: TreeNode, dropNode: TreeNode, event: React.DragEvent<HTMLDivElement>) => void;
+    onNodeDragEnd?: (draggingNode: TreeNode, dropNode: TreeNode, dropType: import("../Tree").NodeDropType, event: React.DragEvent<HTMLDivElement>) => void;
+    onNodeDrop?: (draggingNode: TreeNode, dropNode: TreeNode, dropType: import("../Tree").NodeDropType, event: React.DragEvent<HTMLDivElement>) => void;
+    multiple?: boolean;
+    disabled?: boolean;
+    valueKey?: string;
+    clearable?: boolean;
+    clearIcon?: import("..").IconName;
+    placeholder?: string;
+    filterable?: boolean;
+    filterMethod?: (searchText: string) => void;
+    noDataText?: string;
+    noMatchText?: string;
+    loading?: boolean;
+    loadingText?: string;
+    loadingIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    max?: boolean;
+    showArrow?: boolean;
+    required?: boolean;
+    error?: boolean;
+    warning?: boolean;
+    maxWidth?: number;
+    collapseTags?: boolean;
+    maxCollapseTags?: number;
+    collapseTagsTooltip?: boolean;
+    collapseTips?: (collapseNum: number, total: number) => string;
+    allowCreate?: boolean;
+    plain?: boolean;
+    prepend?: string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    append?: string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    size?: import("..").TypeAttributes.Size;
+    appendToBody?: boolean;
+    remote?: boolean;
+    remoteMethod?: (searchText: string) => void;
+    remoteShowSuffix?: boolean;
+    suffixIcon?: import("..").IconName;
+    tagType?: import("..").TypeAttributes.Appearance;
+    tagEffect?: "light" | "dark" | "plain";
+    labelFormat?: (index: number, value: import("../Select/typings").OptionValue, label?: import("../Select/typings").OptionValue) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    onChange?: <T = any>(value: import("../Select/typings").ValueType, data?: OptionData<T> | OptionData<T>[]) => void;
+    onVisibleChange?: (visible: boolean) => void;
+    onRemoveTag?: (tagValue: any) => void;
+    onClear?: () => void;
+    automaticDropdown?: boolean;
+    header?: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    footer?: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    tag?: <T_1 = any>(params: {
+        data: OptionData<T_1>[];
+        selectDisabled: boolean;
+        deleteTag: (event: React.MouseEvent<HTMLElement, MouseEvent>, tag: OptionData<T_1>) => void;
+    }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    unmountOnExit?: boolean;
+    name?: string;
+    readOnly?: boolean;
+    value?: import("../Select/typings").ValueType;
+    defaultValue?: import("../Select/typings").ValueType;
+    children?: (React.ReactElement<import("../Select").SelectOptionGroupProps | import("../Select").SelectOptionProps, string | React.JSXElementConstructor<any>> | React.ReactElement<import("../Select").SelectOptionGroupProps | import("../Select").SelectOptionProps, string | React.JSXElementConstructor<any>>[]) | (React.ReactElement<import("../Select").SelectOptionGroupProps | import("../Select").SelectOptionProps, string | React.JSXElementConstructor<any>> | React.ReactElement<import("../Select").SelectOptionGroupProps | import("../Select").SelectOptionProps, string | React.JSXElementConstructor<any>>[])[];
+    beforeEnter?: (node?: HTMLElement | Text) => void;
+    onEnter?: (node?: HTMLElement | Text) => void;
+    afterEnter?: (node?: HTMLElement | Text) => void;
+    beforeLeave?: (node?: HTMLElement | Text) => void;
+    onLeave?: (node?: HTMLElement | Text) => void;
+    afterLeave?: (node?: HTMLElement | Text) => void;
+    popperInstRef?: React.MutableRefObject<import("..").PopperOptionRef>;
+    offset?: number;
+    placement?: import("@popperjs/core").Placement;
+    arrowOffset?: number;
+    popperClass?: string;
+    effect?: string;
+    popperOptions?: import("@popperjs/core").Options;
+    fallbackPlacements?: import("@popperjs/core").Placement[] | ((placement?: import("@popperjs/core").Placement) => import("@popperjs/core").Placement[]);
+};
+export default useTree;