tdesign-react 0.25.1 → 0.26.0

package/es/tree-select/TreeSelect.js

@@ -1,519 +1,433 @@
 /**
- * tdesign v0.25.1
+ * tdesign v0.26.0
  * (c) 2022 tdesign
  * @license MIT
  */
 
-import { _ as _defineProperty } from '../_chunks/dep-7b5ee09e.js';
-import { _ as _slicedToArray } from '../_chunks/dep-bce0ce39.js';
-import React, { forwardRef, useRef, useState, useMemo, useCallback, useEffect } from 'react';
-import { i as isArray_1 } from '../_chunks/dep-3f70a0f5.js';
-import { i as isEmpty_1 } from '../_chunks/dep-611402ed.js';
-import '../_chunks/dep-f9242fec.js';
-import { _ as _baseGetTag } from '../_chunks/dep-fd49ee45.js';
-import { i as isObjectLike_1 } from '../_chunks/dep-c50b5bb9.js';
-import { i as isFunction_1 } from '../_chunks/dep-4979c2b8.js';
-import { useLocaleReceiver } from '../locale/LocalReceiver.js';
+import { _ as _defineProperty } from '../_chunks/dep-ada514b9.js';
+import { _ as _slicedToArray } from '../_chunks/dep-e9eb270f.js';
+import React, { forwardRef, useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import classNames from 'classnames';
 import useConfig from '../_util/useConfig.js';
 import useDefault from '../_util/useDefault.js';
-import { Popup } from '../popup/index.js';
 import { Tree } from '../tree/index.js';
-import { TreeStore } from '../_common/js/tree/tree-store.js';
-import TreeSelectTags from './TreeSelectTags.js';
-import TreeSelectInput from './TreeSelectInput.js';
-import TreeSelectSuffix from './TreeSelectSuffix.js';
-import useTreeSelectConfig from './useTreeSelectConfig.js';
-import '../_chunks/dep-f7f44030.js';
-import '../_chunks/dep-c5782559.js';
-import '../_chunks/dep-ff79fb39.js';
-import '../_chunks/dep-c008b410.js';
-import '../_chunks/dep-65c1d541.js';
-import '../_chunks/dep-8823a92e.js';
-import '../_chunks/dep-72e1bd13.js';
-import '../_chunks/dep-90eb9c48.js';
-import '../_chunks/dep-c869a7bd.js';
-import '../config-provider/index.js';
-import '../config-provider/ConfigProvider.js';
-import '../_chunks/dep-b327e031.js';
-import '../_chunks/dep-e3baf9a5.js';
-import '../_chunks/dep-bb55dd2f.js';
-import '../_chunks/dep-a7731315.js';
-import '../_chunks/dep-a180486a.js';
-import '../_chunks/dep-491ab1c7.js';
+import SelectInput from '../select-input/SelectInput.js';
+import { usePersistFn } from '../_util/usePersistFn.js';
+import useSwitch from '../_util/useSwitch.js';
+import noop from '../_util/noop.js';
+import { useTreeSelectUtils } from './useTreeSelectUtils.js';
+import { TreeSelectArrow } from './TreeSelectArrow.js';
+import { useTreeSelectPassThroughProps } from './useTreeSelectPassthoughProps.js';
+import { useTreeSelectLocale } from './useTreeSelectLocale.js';
+import '../_chunks/dep-722fe6eb.js';
+import '../_chunks/dep-a8619fd7.js';
+import '../_chunks/dep-c5e6a539.js';
+import '../_chunks/dep-8fea0649.js';
+import '../_chunks/dep-4506ade7.js';
+import '../_chunks/dep-96268fc3.js';
+import '../_chunks/dep-08a538d7.js';
+import '../_chunks/dep-76bc9a8e.js';
+import '../_chunks/dep-87647568.js';
+import '../_chunks/dep-cfa4c989.js';
+import '../_chunks/dep-456d7444.js';
+import '../_chunks/dep-f81e5642.js';
+import '../_chunks/dep-6ef661cb.js';
+import '../_chunks/dep-a3b25bd0.js';
+import '../_chunks/dep-b52934ba.js';
+import '../_chunks/dep-5e81ed02.js';
+import '../_chunks/dep-d945c24c.js';
+import '../_chunks/dep-43841bc9.js';
+import '../_chunks/dep-2f1a6244.js';
 import '../locale/zh_CN.js';
 import '../_common/js/locale/zh_CN.js';
-import '../config-provider/defaultConfig.js';
-import '../_util/noop.js';
-import '../popup/Popup.js';
-import 'react-transition-group';
-import 'classnames';
-import 'react-popper';
-import '../_util/composeRefs.js';
-import '../common/Portal.js';
-import 'react-dom';
-import '../_util/dom.js';
-import 'raf';
-import '../_chunks/dep-35ecd49c.js';
-import '../_util/easing.js';
-import '../popup/hooks/useTriggerProps.js';
-import '../_util/useClickOutside.js';
-import '../popup/utils/getTransitionParams.js';
-import './style/css.js';
-import '../popup/type.js';
+import '../config-provider/zh_CN_config.js';
 import '../tree/Tree.js';
-import '../_util/usePersistFn.js';
+import 'react-transition-group';
 import '../tree/useTreeConfig.js';
+import '../locale/LocalReceiver.js';
+import '../config-provider/index.js';
+import '../config-provider/ConfigProvider.js';
 import '../tree/useControllable.js';
 import '../tree/TreeItem.js';
 import 'tdesign-icons-react';
 import '../loading/index.js';
 import '../loading/loading.js';
+import '../_util/dom.js';
+import 'raf';
+import '../_chunks/dep-f5031153.js';
+import '../_util/easing.js';
+import '../common/Portal.js';
+import 'react-dom';
 import '../loading/gradient.js';
 import '../_common/js/loading/circle-adapter.js';
 import '../_common/js/utils/set-style.js';
 import '../_common/js/utils/helper.js';
-import '../_chunks/dep-c0b93c23.js';
-import '../loading/type.js';
+import '../_chunks/dep-9f6be541.js';
 import '../loading/plugin.js';
+import './style/css.js';
+import '../loading/type.js';
 import '../_util/useRipple.js';
+import '../_util/useAnimation.js';
 import '../_util/setStyle.js';
 import '../checkbox/index.js';
-import '../_chunks/dep-36516db7.js';
+import '../_chunks/dep-bd1de886.js';
 import '../_util/forwardRefWithStatics.js';
 import 'hoist-non-react-statics';
 import '../common/Check.js';
 import '../_util/helper.js';
-import '../_chunks/dep-0ff35b5e.js';
-import '../_chunks/dep-360d6135.js';
-import '../_chunks/dep-6d5c2511.js';
-import '../_chunks/dep-427158bb.js';
-import '../_chunks/dep-9b59ab07.js';
-import '../_chunks/dep-aa302200.js';
+import '../_chunks/dep-bce15148.js';
+import '../_chunks/dep-9c495ff4.js';
+import '../_chunks/dep-6a9e2ff5.js';
+import '../_chunks/dep-b59a613a.js';
+import '../_chunks/dep-1f097e5c.js';
+import '../_chunks/dep-2a49e378.js';
 import '../checkbox/type.js';
 import '../tree/useStore.js';
-import '../_chunks/dep-0b5c7f77.js';
-import '../_chunks/dep-bfd83090.js';
-import '../_chunks/dep-1d476548.js';
+import '../_chunks/dep-f5304919.js';
+import '../_chunks/dep-16ace5a1.js';
+import '../_chunks/dep-a3e8ed28.js';
+import '../_chunks/dep-b0d60167.js';
 import '../_util/useUpdateEffect.js';
 import '../_util/useLayoutEffect.js';
-import '../_chunks/dep-c1490cf6.js';
-import '../_chunks/dep-2f489a35.js';
-import '../_chunks/dep-46120f73.js';
-import '../_chunks/dep-896efa92.js';
-import '../_chunks/dep-09442174.js';
+import '../_common/js/tree/tree-store.js';
+import '../_chunks/dep-2d596bd1.js';
+import '../_chunks/dep-27f0aed6.js';
+import '../_chunks/dep-d08c8845.js';
+import '../_chunks/dep-4e3754ac.js';
+import '../_chunks/dep-8d8a59c5.js';
 import '../_common/js/tree/tree-node-model.js';
-import '../_chunks/dep-8f43c3b0.js';
-import '../_chunks/dep-4ba0cdcf.js';
-import '../_chunks/dep-695a3ead.js';
-import '../_chunks/dep-861da54c.js';
+import '../_chunks/dep-0c320105.js';
+import '../_chunks/dep-17843c23.js';
+import '../_chunks/dep-4bde00b2.js';
+import '../_chunks/dep-c5a4a84b.js';
+import '../_chunks/dep-93f0cc3c.js';
 import '../_common/js/log/log.js';
-import '../_chunks/dep-a62bdfd5.js';
-import '../_chunks/dep-deeece0d.js';
+import '../_chunks/dep-48303847.js';
+import '../_chunks/dep-f93431de.js';
 import '../tree/type.js';
-import '../tag/index.js';
-import '../tag/Tag.js';
-import '../tag/CheckTag.js';
-import '../tag/type.js';
+import '../popup/index.js';
+import '../popup/Popup.js';
+import 'react-popper';
+import '../_util/composeRefs.js';
+import '../popup/hooks/useTriggerProps.js';
+import '../_util/useClickOutside.js';
+import '../popup/utils/getTransitionParams.js';
+import '../popup/type.js';
+import '../select-input/useSingle.js';
 import '../input/index.js';
 import '../input/Input.js';
 import '../input/InputGroup.js';
 import '../_util/useDefaultValue.js';
 import '../input/type.js';
+import '../select-input/useMultiple.js';
+import '../tag-input/index.js';
+import '../tag-input/TagInput.js';
+import '../_util/useDragSorter.js';
+import '../tag-input/useTagScroll.js';
+import '../tag-input/useTagList.js';
+import 'lodash';
+import '../tag/index.js';
+import '../tag/Tag.js';
+import '../tag/CheckTag.js';
+import '../tag/type.js';
+import '../tag-input/useHover.js';
+import '../tag-input/type.js';
+import '../select-input/useOverlayStyle.js';
 import '../common/FakeArrow.js';
-import '../_util/useCommonClassName.js';
 
-var baseGetTag = _baseGetTag,
-    isObjectLike = isObjectLike_1;
-/** `Object#toString` result references. */
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-var boolTag = '[object Boolean]';
-/**
- * Checks if `value` is classified as a boolean primitive or object.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a boolean, else `false`.
- * @example
- *
- * _.isBoolean(false);
- * // => true
- *
- * _.isBoolean(null);
- * // => false
- */
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-function isBoolean(value) {
-  return value === true || value === false || isObjectLike(value) && baseGetTag(value) == boolTag;
-}
+var useMergeFn = function useMergeFn() {
+  for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) {
+    fns[_key] = arguments[_key];
+  }
 
-var isBoolean_1 = isBoolean;
+  return usePersistFn(function () {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+    return fns.forEach(function (fn) {
+      return fn === null || fn === void 0 ? void 0 : fn.apply(void 0, args);
+    });
+  });
+};
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var TreeSelect = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _useLocaleReceiver = useLocaleReceiver("treeSelect"),
-      _useLocaleReceiver2 = _slicedToArray(_useLocaleReceiver, 2),
-      local = _useLocaleReceiver2[0],
-      t = _useLocaleReceiver2[1];
+  var _props$defaultValue;
+
+  var _useTreeSelectLocale = useTreeSelectLocale(props),
+      placeholder = _useTreeSelectLocale.placeholder,
+      empty = _useTreeSelectLocale.empty,
+      loadingItem = _useTreeSelectLocale.loadingItem;
 
-  var emptyText = t(local.empty);
-  var placeholderText = t(local.placeholder);
-  var loadingTextLabel = t(local.loadingText);
-  var treeSelectClassName = props.className,
-      treeSelectStyle = props.style,
+  var _useConfig = useConfig(),
+      classPrefix = _useConfig.classPrefix;
+
+  var className = props.className,
       disabled = props.disabled,
       multiple = props.multiple,
       prefixIcon = props.prefixIcon,
-      valueType = props.valueType,
       loading = props.loading,
+      size = props.size,
       max = props.max,
-      _props$placeholder = props.placeholder,
-      placeholder = _props$placeholder === void 0 ? placeholderText : _props$placeholder,
-      treeProps = props.treeProps,
-      empty = props.empty,
       data = props.data,
-      loadingText = props.loadingText,
-      filter = props.filter,
-      filterable = props.filterable,
-      onClear = props.onClear;
-
-  var _useConfig = useConfig(),
-      classPrefix = _useConfig.classPrefix;
-
-  var popupRef = useRef(null);
-  var treeRef = useRef(null);
-  var inputRef = useRef(null);
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      visible = _useState2[0],
-      setVisible = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isHover = _useState4[0],
-      setIsHover = _useState4[1];
-
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      focusing = _useState6[0],
-      setFocusing = _useState6[1];
-
-  var _useState7 = useState(""),
-      _useState8 = _slicedToArray(_useState7, 2),
-      filterText = _useState8[0],
-      setFilterText = _useState8[1];
-
-  var _useState9 = useState([]),
-      _useState10 = _slicedToArray(_useState9, 2),
-      actived = _useState10[0],
-      setActived = _useState10[1];
-
-  var _useState11 = useState([]),
-      _useState12 = _slicedToArray(_useState11, 2),
-      expanded = _useState12[0],
-      setExpanded = _useState12[1];
-
-  var _useState13 = useState(null),
-      _useState14 = _slicedToArray(_useState13, 2),
-      nodeInfo = _useState14[0],
-      setNodeInfo = _useState14[1];
+      _props$filter = props.filter,
+      filter = _props$filter === void 0 ? function (text, option) {
+    return option.label.includes(text);
+  } : _props$filter,
+      rawFilterable = props.filterable,
+      onClear = props.onClear,
+      valueDisplay = props.valueDisplay,
+      treeProps = props.treeProps,
+      onBlur = props.onBlur,
+      onFocus = props.onFocus,
+      onSearch = props.onSearch,
+      onRemove = props.onRemove;
+  var selectInputProps = useTreeSelectPassThroughProps(props);
 
-  var _useDefault = useDefault(props.value, props.defaultValue, props.onChange),
+  var _useDefault = useDefault(props.value, ((_props$defaultValue = props.defaultValue) !== null && _props$defaultValue !== void 0 ? _props$defaultValue : multiple) ? [] : null, props.onChange),
       _useDefault2 = _slicedToArray(_useDefault, 2),
       value = _useDefault2[0],
       onChange = _useDefault2[1];
 
-  var _useTreeSelectConfig = useTreeSelectConfig(_objectSpread({
-    visible: visible
-  }, props)),
-      selectClassName = _useTreeSelectConfig.selectClassName,
-      popupObject = _useTreeSelectConfig.popupObject,
-      popupClassName = _useTreeSelectConfig.popupClassName;
+  var _useSwitch = useSwitch(),
+      _useSwitch2 = _slicedToArray(_useSwitch, 2),
+      popupVisible = _useSwitch2[0],
+      popupAction = _useSwitch2[1];
 
-  var defaultStore = new TreeStore(_objectSpread({}, treeProps));
-  defaultStore.append(data);
-
-  var defaultGetTreeItem = function defaultGetTreeItem(value2) {
-    var node = defaultStore.getNode(value2);
-    return node === null || node === void 0 ? void 0 : node.getModel();
-  };
-
-  var selectedMultiple = useMemo(function () {
-    if (multiple && isArray_1(value) && !isEmpty_1(value)) {
-      return value;
-    }
+  var _useSwitch3 = useSwitch(),
+      _useSwitch4 = _slicedToArray(_useSwitch3, 2),
+      hover = _useSwitch4[0],
+      hoverAction = _useSwitch4[1];
 
-    return [];
-  }, [multiple, value]);
-  var selectedSingle = useMemo(function () {
-    if (multiple) return "";
-
-    if (typeof value === "undefined") {
-      return nodeInfo ? nodeInfo.label : "";
-    }
-
-    return nodeInfo ? nodeInfo.label : "".concat(value);
-  }, [multiple, value, nodeInfo]);
-  var checked = useMemo(function () {
-    if (multiple) {
-      if (valueType === "object") {
-        return isArray_1(value) ? value.map(function (item) {
-          return item.value;
-        }) : [];
-      }
-
-      return isArray_1(value) ? value : [];
+  var _useState = useState(""),
+      _useState2 = _slicedToArray(_useState, 2),
+      filterInput = _useState2[0],
+      setFilterInput = _useState2[1];
+
+  var $tree = useRef();
+
+  var _useTreeSelectUtils = useTreeSelectUtils(props, $tree),
+      normalizeValue = _useTreeSelectUtils.normalizeValue,
+      formatValue = _useTreeSelectUtils.formatValue,
+      getNodeItem = _useTreeSelectUtils.getNodeItem;
+
+  var filterable = useMemo(function () {
+    return rawFilterable || !!props.filter;
+  }, [props.filter, rawFilterable]);
+  var normalizedValue = useMemo(function () {
+    return (multiple ? value : [value]).map(normalizeValue).filter(function (_ref) {
+      var value2 = _ref.value;
+      return value2 !== null && value2 !== void 0 ? value2 : false;
+    });
+  }, [multiple, normalizeValue, value]);
+  var filterText = useMemo(function () {
+    return String(filterInput);
+  }, [filterInput]);
+  var inputValue = useMemo(function () {
+    if (multiple) return normalizedValue;
+    return filterable && popupVisible ? filterText : normalizedValue[0];
+  }, [multiple, normalizedValue, filterable, popupVisible, filterText]);
+  var inputPlaceholader = useMemo(function () {
+    if (filterable && !multiple && popupVisible && normalizedValue.length) {
+      return typeof normalizedValue[0].label === "string" ? normalizedValue[0].label : normalizedValue[0].value;
     }
 
-    return [];
-  }, [multiple, valueType, value]);
+    return placeholder;
+  }, [filterable, multiple, popupVisible, normalizedValue, placeholder]);
   var showLoading = useMemo(function () {
-    return loading && !disabled;
+    return !disabled && loading;
   }, [loading, disabled]);
-  var showFilter = useMemo(function () {
-    if (disabled) {
-      return false;
-    }
-
-    if (!multiple && selectedSingle && (filterable || isFunction_1(filter))) {
-      return visible;
-    }
-
-    return filterable || isFunction_1(filter);
-  }, [disabled, multiple, selectedSingle, filterable, visible, filter]);
-  var multiLimitDisabled = useMemo(function () {
-    if (multiple && max && isArray_1(value) && max <= value.length) {
-      return true;
-    }
-
-    return false;
-  }, [multiple, max, value]);
-  var realLabel = useMemo(function () {
-    if (!isEmpty_1(treeProps) && !isEmpty_1(treeProps.keys)) {
-      return treeProps.keys.label || "label";
-    }
-
-    return "label";
-  }, [treeProps]);
-  var realValue = useMemo(function () {
-    if (!isEmpty_1(treeProps) && !isEmpty_1(treeProps.keys)) {
-      return treeProps.keys.value || "value";
-    }
-
-    return "value";
-  }, [treeProps]);
-  var tagList = useMemo(function () {
-    if (nodeInfo && isArray_1(nodeInfo)) {
-      return nodeInfo;
-    }
-
-    return selectedMultiple.map(function (value2) {
-      return {
-        label: value2,
-        value: value2
-      };
+  var showFakePlaceholder = useMemo(function () {
+    return multiple && !filterable && !normalizedValue.length;
+  }, [filterable, multiple, normalizedValue]);
+  var handleFilter = useCallback(function (node) {
+    return filterable ? filter(filterText, node) : true;
+  }, [filter, filterText, filterable]);
+  var handleSingleChange = usePersistFn(function (value2, context) {
+    var $value = value2.length ? value2[0] : null;
+    onChange(formatValue($value, context.node.label), context);
+    popupAction.off();
+  });
+  var handleMultiChange = usePersistFn(function (value2, context) {
+    (max === 0 || value2.length <= max) && onChange(value2.map(function (value3) {
+      var _getNodeItem;
+
+      return formatValue(value3, (_getNodeItem = getNodeItem(value3)) === null || _getNodeItem === void 0 ? void 0 : _getNodeItem.label);
+    }), context);
+  });
+  var handleClear = usePersistFn(function (ctx) {
+    ctx.e.stopPropagation();
+    onChange(multiple ? [] : formatValue(null), {
+      node: null
     });
-  }, [nodeInfo, selectedMultiple]);
-  var filterByText = useCallback(function (node) {
-    if (isFunction_1(filter)) {
-      var filterValue = filter(filterText, node);
-
-      if (isBoolean_1(filterValue)) {
-        return filterValue;
-      }
-    }
-
-    return node.data[realLabel].indexOf(filterText) >= 0;
-  }, [filterText, realLabel, filter]);
-  useEffect(function () {
-    if (valueType === "object") {
-      setActived(isArray_1(value) ? value.map(function (item) {
-        return item.value;
-      }) : [value.value]);
-    } else {
-      setActived(isArray_1(value) ? value : [value]);
-    }
-
-    changeNodeInfo(value);
-  }, [value, valueType]);
-
-  function handleClear(e) {
-    e.stopPropagation();
-    var defaultValue = multiple ? [] : "";
-    onChange === null || onChange === void 0 ? void 0 : onChange(defaultValue, null);
-    setActived([]);
-    setFilterText("");
-    setNodeInfo(null);
-    onClear === null || onClear === void 0 ? void 0 : onClear({
+    onClear === null || onClear === void 0 ? void 0 : onClear(ctx);
+    popupAction.off();
+  });
+  var handleRemove = usePersistFn(function (index, e) {
+    var node = getNodeItem(normalizedValue[index].value);
+    onChange(normalizedValue.filter(function (value2, i) {
+      return i !== index;
+    }).map(function (_ref2) {
+      var value2 = _ref2.value,
+          label = _ref2.label;
+      return formatValue(value2, label);
+    }), {
+      node: node
+    });
+    onRemove === null || onRemove === void 0 ? void 0 : onRemove({
+      value: node.value,
+      data: {
+        value: node.value,
+        label: node.label
+      },
       e: e
     });
-  }
-
-  function changeNodeInfo(value2) {
-    if (!multiple && value2) {
-      var _treeRef$current;
-
-      var nodeValue = valueType === "object" ? value2.value : value2;
-      var node = ((_treeRef$current = treeRef.current) === null || _treeRef$current === void 0 ? void 0 : _treeRef$current.getItem(nodeValue)) || defaultGetTreeItem(nodeValue);
-      node ? setNodeInfo({
-        label: node.data[realLabel],
-        value: node.data[realValue]
-      }) : setNodeInfo(null);
-    } else if (multiple && isArray_1(value2)) {
-      setNodeInfo(value2.map(function (value3) {
-        var _treeRef$current2;
-
-        var nodeValue = valueType === "object" ? value3.value : value3;
-        var node = ((_treeRef$current2 = treeRef.current) === null || _treeRef$current2 === void 0 ? void 0 : _treeRef$current2.getItem(nodeValue)) || defaultGetTreeItem(nodeValue);
-        return node ? {
-          label: node.data[realLabel],
-          value: node.data[realValue]
-        } : {};
-      }));
-    } else {
-      setNodeInfo(null);
-    }
-  }
-
-  function treeNodeChange(value2, context) {
-    var current = value2;
-
-    if (valueType === "object") {
-      current = value2.map(function (nodeValue) {
-        var node = treeRef.current.getItem(nodeValue);
-        return {
-          label: node.data[realLabel],
-          value: node.data[realValue]
-        };
-      });
-    }
-
-    onChange === null || onChange === void 0 ? void 0 : onChange(current, context);
-  }
-
-  function treeNodeActive(value2, context) {
-    if (multiple) return;
-    var nodeValue = isEmpty_1(value2) ? "" : value2[0];
-    var node = treeRef.current.getItem(nodeValue);
-    var current = nodeValue;
-
-    if (valueType === "object" && node) {
-      current = {
-        label: node.data[realLabel],
-        value: node.data[realValue]
-      };
+  });
+  var handleTagChange = usePersistFn(function (tags, ctx) {
+    switch (ctx.trigger) {
+      case "clear":
+        handleClear({
+          e: ctx.e
+        });
+        break;
+
+      case "tag-remove":
+        handleRemove(ctx.index, ctx.e);
+        break;
+
+      case "backspace":
+        handleRemove(ctx.index);
     }
-
-    onChange === null || onChange === void 0 ? void 0 : onChange(current, context);
-    setFilterText("");
-    setVisible(false);
-  }
-
-  function treeNodeExpand(value2) {
-    setExpanded(value2);
-  }
-
-  function popupVisibleChange(visible2) {
-    if (focusing && !visible2) {
-      setVisible(true);
-      return;
+  });
+  var handleBlur = usePersistFn(function (v, ctx) {
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur({
+      value: multiple ? normalizedValue : normalizedValue[0],
+      e: ctx.e
+    });
+  });
+  var handleFocus = usePersistFn(function (v, ctx) {
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus({
+      value: multiple ? normalizedValue : normalizedValue[0],
+      e: ctx.e
+    });
+  });
+  var handleEnter = usePersistFn(function (text) {
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch(text);
+  });
+  var handleFilterChange = usePersistFn(function (value2, _ref3) {
+    var trigger = _ref3.trigger;
+
+    if (trigger !== "blur") {
+      setFilterInput(value2);
     }
+  });
+  useEffect(function () {
+    popupVisible && setFilterInput("");
+  }, [popupVisible]);
+
+  var renderTree = function renderTree() {
+    return showLoading ? loadingItem : /* @__PURE__ */React.createElement(Tree, _objectSpread(_objectSpread({
+      ref: $tree,
+      hover: true,
+      transition: true,
+      expandAll: true,
+      filter: handleFilter,
+      data: data,
+      disabled: disabled,
+      empty: empty
+    }, multiple ? {
+      checkable: true,
+      onChange: handleMultiChange,
+      value: normalizedValue.map(function (_ref4) {
+        var value2 = _ref4.value;
+        return value2;
+      })
+    } : {
+      activable: true,
+      actived: normalizedValue.map(function (_ref5) {
+        var value2 = _ref5.value;
+        return value2;
+      }),
+      onActive: handleSingleChange
+    }), treeProps));
+  };
 
-    setVisible(visible2);
+  var renderCollapsedItems = useMemo(function () {
+    return props.collapsedItems ? function () {
+      return props.collapsedItems({
+        value: normalizedValue,
+        collapsedSelectedItems: normalizedValue.slice(props.minCollapsedNum, normalizedValue.length),
+        count: normalizedValue.length - props.minCollapsedNum
+      });
+    } : null;
+  }, [normalizedValue, props]);
 
-    if (showFilter && visible2) {
-      var _inputRef$current;
+  var renderLabel = function renderLabel() {
+    return showFakePlaceholder ? /* @__PURE__ */React.createElement(React.Fragment, null, prefixIcon, /* @__PURE__ */React.createElement("span", {
+      className: "".concat(classPrefix, "-tree-select--placeholder")
+    }, placeholder)) : prefixIcon;
+  };
 
-      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
-    }
-  }
+  var normalizedValueDisplay = function normalizedValueDisplay() {
+    if (multiple) return function (_ref6) {
+      var onClose = _ref6.onClose;
+      return valueDisplay({
+        value: normalizedValue,
+        onClose: onClose
+      });
+    };
+    return normalizedValue.length ? valueDisplay({
+      value: normalizedValue[0],
+      onClose: noop
+    }) : "";
+  };
 
-  var treeItem = !loading && /* @__PURE__ */React.createElement(Tree, _objectSpread({
-    ref: treeRef,
-    value: checked,
-    hover: true,
-    expandAll: true,
-    data: data,
-    activable: !multiple,
-    checkable: multiple,
-    disabled: disabled || multiLimitDisabled,
-    empty: empty || /* @__PURE__ */React.createElement("div", {
-      className: "".concat(classPrefix, "-select__empty")
-    }, emptyText),
-    filter: filterByText,
-    actived: actived,
-    expanded: expanded,
-    activeMultiple: multiple,
-    onChange: treeNodeChange,
-    onActive: treeNodeActive,
-    onExpand: treeNodeExpand
-  }, treeProps));
-  var loadingTip = showLoading && /* @__PURE__ */React.createElement("p", {
-    className: "".concat(classPrefix, "-select__loading-tips")
-  }, loadingText || /* @__PURE__ */React.createElement("div", {
-    className: "".concat(classPrefix, "-select__empty")
-  }, loadingTextLabel));
-  return /* @__PURE__ */React.createElement("div", {
+  return /* @__PURE__ */React.createElement(SelectInput, _objectSpread(_objectSpread({}, selectInputProps), {}, {
     ref: ref,
-    className: treeSelectClassName,
-    style: treeSelectStyle
-  }, /* @__PURE__ */React.createElement(Popup, {
-    ref: popupRef,
-    className: "".concat(classPrefix, "-select__popup-reference"),
-    visible: visible,
-    disabled: disabled,
-    placement: popupObject.placement,
-    trigger: popupObject.trigger,
-    overlayStyle: popupObject.overlayStyle,
-    overlayClassName: popupClassName,
-    onVisibleChange: popupVisibleChange,
-    expandAnimation: true,
-    destroyOnClose: true,
-    content: /* @__PURE__ */React.createElement(React.Fragment, null, loadingTip, treeItem)
-  }, /* @__PURE__ */React.createElement("div", {
-    style: {
-      minHeight: 30
+    className: classNames("".concat(classPrefix, "-tree-select"), _defineProperty({}, "".concat(classPrefix, "-tree-select--without-input"), multiple && !filterable), className),
+    value: inputValue,
+    inputValue: popupVisible ? filterText : "",
+    panel: renderTree(),
+    allowInput: multiple || filterable,
+    inputProps: {
+      size: size
     },
-    className: selectClassName,
-    onMouseEnter: function onMouseEnter() {
-      return setIsHover(true);
+    tagInputProps: {
+      size: size,
+      excessTagsDisplayType: "break-line"
     },
-    onMouseLeave: function onMouseLeave() {
-      return setIsHover(false);
-    }
-  }, prefixIcon && /* @__PURE__ */React.createElement("span", {
-    className: "".concat(classPrefix, "-select__left-icon")
-  }, prefixIcon), /* @__PURE__ */React.createElement(TreeSelectTags, _objectSpread({
-    tagList: tagList
-  }, props)), /* @__PURE__ */React.createElement(TreeSelectInput, _objectSpread({
-    ref: inputRef,
-    visible: visible,
-    filterText: filterText,
-    selectedSingle: selectedSingle,
-    setFocusing: setFocusing,
-    setFilterText: setFilterText,
-    placeholder: placeholder
-  }, props)), /* @__PURE__ */React.createElement(TreeSelectSuffix, _objectSpread({
-    visible: visible,
-    isHover: isHover,
-    showLoading: showLoading,
-    handleClear: handleClear
-  }, props)))));
+    placeholder: inputPlaceholader,
+    popupVisible: popupVisible && !disabled,
+    onInputChange: handleFilterChange,
+    onPopupVisibleChange: useMergeFn(popupAction.set),
+    onFocus: useMergeFn(handleFocus, popupAction.on),
+    onBlur: useMergeFn(handleBlur),
+    onClear: handleClear,
+    onTagChange: handleTagChange,
+    onEnter: handleEnter,
+    onMouseenter: hoverAction.on,
+    onMouseleave: hoverAction.off,
+    suffixIcon: /* @__PURE__ */React.createElement(TreeSelectArrow, {
+      isActive: popupVisible,
+      isHighlight: hover || popupVisible,
+      disabled: disabled
+    }),
+    collapsedItems: renderCollapsedItems,
+    label: renderLabel(),
+    valueDisplay: valueDisplay && normalizedValueDisplay()
+  }));
 });
 TreeSelect.displayName = "TreeSelect";
 TreeSelect.defaultProps = {
   clearable: false,
   data: [],
   disabled: false,
-  empty: "",
   filterable: false,
   loading: false,
-  loadingText: "",
   max: 0,
   multiple: false,
   size: "medium",