tdesign-react 0.25.3-alpha.1 → 0.26.0

package/lib/tree-select/TreeSelect.js

@@ -1,5 +1,5 @@
 /**
- * tdesign v0.25.3-alpha.1
+ * tdesign v0.26.0
  * (c) 2022 tdesign
  * @license MIT
  */
@@ -8,510 +8,422 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var defineProperty = require('../_chunks/dep-728c3d30.js');
-var slicedToArray = require('../_chunks/dep-402b9452.js');
+var defineProperty = require('../_chunks/dep-ca7914de.js');
+var slicedToArray = require('../_chunks/dep-1c9c3eb3.js');
 var React = require('react');
-var isArray = require('../_chunks/dep-3a37dd17.js');
-var isEmpty = require('../_chunks/dep-523fa2b0.js');
-var _baseGetTag = require('../_chunks/dep-0e51d993.js');
-var isObjectLike$1 = require('../_chunks/dep-09c2324b.js');
-var isFunction = require('../_chunks/dep-9ac45eb1.js');
-var locale_LocalReceiver = require('../locale/LocalReceiver.js');
+var classNames = require('classnames');
 var _util_useConfig = require('../_util/useConfig.js');
 var _util_useDefault = require('../_util/useDefault.js');
-var popup_index = require('../popup/index.js');
 var tree_index = require('../tree/index.js');
-var _common_js_tree_treeStore = require('../_common/js/tree/tree-store.js');
-var treeSelect_TreeSelectTags = require('./TreeSelectTags.js');
-var treeSelect_TreeSelectInput = require('./TreeSelectInput.js');
-var treeSelect_TreeSelectSuffix = require('./TreeSelectSuffix.js');
-var treeSelect_useTreeSelectConfig = require('./useTreeSelectConfig.js');
-require('../_chunks/dep-20cb3e75.js');
-require('../_chunks/dep-831366c2.js');
-require('../_chunks/dep-32b793ca.js');
-require('../_chunks/dep-d5b1028b.js');
-require('../_chunks/dep-fe8b0b86.js');
-require('../_chunks/dep-b81d09ba.js');
-require('../_chunks/dep-f7cad145.js');
-require('../_chunks/dep-e92e2bb4.js');
-require('../_chunks/dep-cb1cdc62.js');
-require('../_chunks/dep-94ac5bc2.js');
-require('../_chunks/dep-d5c34a19.js');
-require('../_chunks/dep-aef3883a.js');
-require('../_chunks/dep-4d02f91f.js');
-require('../_chunks/dep-b4f37218.js');
+var selectInput_SelectInput = require('../select-input/SelectInput.js');
+var _util_usePersistFn = require('../_util/usePersistFn.js');
+var _util_useSwitch = require('../_util/useSwitch.js');
+var _util_noop = require('../_util/noop.js');
+var treeSelect_useTreeSelectUtils = require('./useTreeSelectUtils.js');
+var treeSelect_TreeSelectArrow = require('./TreeSelectArrow.js');
+var treeSelect_useTreeSelectPassthoughProps = require('./useTreeSelectPassthoughProps.js');
+var treeSelect_useTreeSelectLocale = require('./useTreeSelectLocale.js');
+require('../_chunks/dep-802cffb1.js');
+require('../_chunks/dep-2e128b45.js');
+require('../_chunks/dep-d260b48d.js');
+require('../_chunks/dep-7f9dd76c.js');
+require('../_chunks/dep-af5977f3.js');
+require('../_chunks/dep-81c8f336.js');
+require('../_chunks/dep-346e4fd6.js');
+require('../_chunks/dep-bd8388db.js');
+require('../_chunks/dep-91b0bcca.js');
+require('../_chunks/dep-0dcb1822.js');
+require('../_chunks/dep-b9ebc0ad.js');
+require('../_chunks/dep-4f241655.js');
+require('../_chunks/dep-fe548b95.js');
+require('../_chunks/dep-7dafe964.js');
+require('../_chunks/dep-e5b97b7b.js');
+require('../_chunks/dep-c093a95b.js');
+require('../_chunks/dep-d55e22e6.js');
 require('../_common/js/locale/zh_CN.js');
-require('../config-provider/defaultConfig.js');
-require('../_util/noop.js');
-require('../popup/Popup.js');
-require('react-transition-group');
-require('classnames');
-require('react-popper');
-require('../_util/useAnimation.js');
-require('../_util/composeRefs.js');
-require('../common/Portal.js');
-require('react-dom');
-require('../_util/dom.js');
-require('raf');
-require('../_chunks/dep-a2749c28.js');
-require('../_util/easing.js');
-require('../popup/hooks/useTriggerProps.js');
-require('../_util/useClickOutside.js');
-require('../popup/utils/getTransitionParams.js');
+require('../config-provider/zh_CN_config.js');
 require('../tree/Tree.js');
-require('../_util/usePersistFn.js');
+require('react-transition-group');
 require('../tree/useTreeConfig.js');
+require('../locale/LocalReceiver.js');
 require('../tree/useControllable.js');
 require('../tree/TreeItem.js');
 require('tdesign-icons-react');
 require('../loading/index.js');
 require('../loading/loading.js');
+require('../_util/dom.js');
+require('raf');
+require('../_chunks/dep-4aa7b082.js');
+require('../_util/easing.js');
+require('../common/Portal.js');
+require('react-dom');
 require('../loading/gradient.js');
 require('../_common/js/loading/circle-adapter.js');
 require('../_common/js/utils/set-style.js');
 require('../_common/js/utils/helper.js');
-require('../_chunks/dep-7b67ce1a.js');
+require('../_chunks/dep-118265e9.js');
 require('../loading/plugin.js');
 require('../_util/useRipple.js');
+require('../_util/useAnimation.js');
 require('../_util/setStyle.js');
 require('../checkbox/index.js');
-require('../_chunks/dep-ca07041d.js');
+require('../_chunks/dep-a26677f7.js');
 require('../_util/forwardRefWithStatics.js');
 require('hoist-non-react-statics');
 require('../common/Check.js');
 require('../_util/helper.js');
-require('../_chunks/dep-dbb6c28d.js');
-require('../_chunks/dep-cbdb9d60.js');
-require('../_chunks/dep-9c3742b4.js');
-require('../_chunks/dep-29d6b175.js');
-require('../_chunks/dep-0bd03489.js');
-require('../_chunks/dep-70273f39.js');
+require('../_chunks/dep-f3ebd593.js');
+require('../_chunks/dep-f11349dd.js');
+require('../_chunks/dep-dd7a6358.js');
+require('../_chunks/dep-e3d1b0a1.js');
+require('../_chunks/dep-05fbc204.js');
+require('../_chunks/dep-720aae66.js');
 require('../tree/useStore.js');
-require('../_chunks/dep-9aad9e16.js');
-require('../_chunks/dep-0819af1e.js');
-require('../_chunks/dep-3bb6344b.js');
+require('../_chunks/dep-b9af0264.js');
+require('../_chunks/dep-8493ce5f.js');
+require('../_chunks/dep-a63f9fa8.js');
+require('../_chunks/dep-696addc0.js');
 require('../_util/useUpdateEffect.js');
 require('../_util/useLayoutEffect.js');
-require('../_chunks/dep-9b2b1438.js');
-require('../_chunks/dep-a4bdef9c.js');
-require('../_chunks/dep-b41f5892.js');
-require('../_chunks/dep-a249cc5c.js');
-require('../_chunks/dep-6e35a7fc.js');
+require('../_common/js/tree/tree-store.js');
+require('../_chunks/dep-16ed699d.js');
+require('../_chunks/dep-71af112c.js');
+require('../_chunks/dep-aabd119c.js');
+require('../_chunks/dep-32dd9030.js');
+require('../_chunks/dep-929b29ba.js');
 require('../_common/js/tree/tree-node-model.js');
-require('../_chunks/dep-620f8a64.js');
-require('../_chunks/dep-793b82fb.js');
-require('../_chunks/dep-bec18e34.js');
-require('../_chunks/dep-136475a2.js');
-require('../_chunks/dep-4f843491.js');
+require('../_chunks/dep-61436bd3.js');
+require('../_chunks/dep-c4ccee0d.js');
+require('../_chunks/dep-320842c6.js');
+require('../_chunks/dep-86dbecea.js');
+require('../_chunks/dep-a6b63432.js');
 require('../_common/js/log/log.js');
-require('../_chunks/dep-daf50457.js');
-require('../_chunks/dep-10ea05c5.js');
-require('../tag/index.js');
-require('../tag/Tag.js');
-require('../tag/CheckTag.js');
+require('../_chunks/dep-5c2617db.js');
+require('../_chunks/dep-fecbd34e.js');
+require('../popup/index.js');
+require('../popup/Popup.js');
+require('react-popper');
+require('../_util/composeRefs.js');
+require('../popup/hooks/useTriggerProps.js');
+require('../_util/useClickOutside.js');
+require('../popup/utils/getTransitionParams.js');
+require('../select-input/useSingle.js');
 require('../input/index.js');
 require('../input/Input.js');
 require('../input/InputGroup.js');
 require('../_util/useDefaultValue.js');
+require('../select-input/useMultiple.js');
+require('../tag-input/index.js');
+require('../tag-input/TagInput.js');
+require('../_util/useDragSorter.js');
+require('../tag-input/useTagScroll.js');
+require('../tag-input/useTagList.js');
+require('lodash');
+require('../tag/index.js');
+require('../tag/Tag.js');
+require('../tag/CheckTag.js');
+require('../tag-input/useHover.js');
+require('../select-input/useOverlayStyle.js');
 require('../common/FakeArrow.js');
-require('../_util/useCommonClassName.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 
-var baseGetTag = _baseGetTag._baseGetTag,
-    isObjectLike = isObjectLike$1.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._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 _util_usePersistFn.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._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__*/React.forwardRef(function (props, ref) {
-  var _useLocaleReceiver = locale_LocalReceiver.useLocaleReceiver("treeSelect"),
-      _useLocaleReceiver2 = slicedToArray._slicedToArray(_useLocaleReceiver, 2),
-      local = _useLocaleReceiver2[0],
-      t = _useLocaleReceiver2[1];
-
-  var emptyText = t(local.empty);
-  var placeholderText = t(local.placeholder);
-  var loadingTextLabel = t(local.loadingText);
-  var treeSelectClassName = props.className,
-      treeSelectStyle = props.style,
+  var _props$defaultValue;
+
+  var _useTreeSelectLocale = treeSelect_useTreeSelectLocale.useTreeSelectLocale(props),
+      placeholder = _useTreeSelectLocale.placeholder,
+      empty = _useTreeSelectLocale.empty,
+      loadingItem = _useTreeSelectLocale.loadingItem;
+
+  var _useConfig = _util_useConfig["default"](),
+      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 = _util_useConfig["default"](),
-      classPrefix = _useConfig.classPrefix;
-
-  var popupRef = React.useRef(null);
-  var treeRef = React.useRef(null);
-  var inputRef = React.useRef(null);
+      _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 = treeSelect_useTreeSelectPassthoughProps.useTreeSelectPassThroughProps(props);
 
-  var _useState = React.useState(false),
-      _useState2 = slicedToArray._slicedToArray(_useState, 2),
-      visible = _useState2[0],
-      setVisible = _useState2[1];
-
-  var _useState3 = React.useState(false),
-      _useState4 = slicedToArray._slicedToArray(_useState3, 2),
-      isHover = _useState4[0],
-      setIsHover = _useState4[1];
-
-  var _useState5 = React.useState(false),
-      _useState6 = slicedToArray._slicedToArray(_useState5, 2),
-      focusing = _useState6[0],
-      setFocusing = _useState6[1];
-
-  var _useState7 = React.useState(""),
-      _useState8 = slicedToArray._slicedToArray(_useState7, 2),
-      filterText = _useState8[0],
-      setFilterText = _useState8[1];
-
-  var _useState9 = React.useState([]),
-      _useState10 = slicedToArray._slicedToArray(_useState9, 2),
-      actived = _useState10[0],
-      setActived = _useState10[1];
-
-  var _useState11 = React.useState([]),
-      _useState12 = slicedToArray._slicedToArray(_useState11, 2),
-      expanded = _useState12[0],
-      setExpanded = _useState12[1];
-
-  var _useState13 = React.useState(null),
-      _useState14 = slicedToArray._slicedToArray(_useState13, 2),
-      nodeInfo = _useState14[0],
-      setNodeInfo = _useState14[1];
-
-  var _useDefault = _util_useDefault["default"](props.value, props.defaultValue, props.onChange),
+  var _useDefault = _util_useDefault["default"](props.value, ((_props$defaultValue = props.defaultValue) !== null && _props$defaultValue !== void 0 ? _props$defaultValue : multiple) ? [] : null, props.onChange),
       _useDefault2 = slicedToArray._slicedToArray(_useDefault, 2),
       value = _useDefault2[0],
       onChange = _useDefault2[1];
 
-  var _useTreeSelectConfig = treeSelect_useTreeSelectConfig["default"](_objectSpread({
-    visible: visible
-  }, props)),
-      selectClassName = _useTreeSelectConfig.selectClassName,
-      popupObject = _useTreeSelectConfig.popupObject,
-      popupClassName = _useTreeSelectConfig.popupClassName;
+  var _useSwitch = _util_useSwitch["default"](),
+      _useSwitch2 = slicedToArray._slicedToArray(_useSwitch, 2),
+      popupVisible = _useSwitch2[0],
+      popupAction = _useSwitch2[1];
 
-  var defaultStore = new _common_js_tree_treeStore.TreeStore(_objectSpread({}, treeProps));
-  defaultStore.append(data);
+  var _useSwitch3 = _util_useSwitch["default"](),
+      _useSwitch4 = slicedToArray._slicedToArray(_useSwitch3, 2),
+      hover = _useSwitch4[0],
+      hoverAction = _useSwitch4[1];
 
-  var defaultGetTreeItem = function defaultGetTreeItem(value2) {
-    var node = defaultStore.getNode(value2);
-    return node === null || node === void 0 ? void 0 : node.getModel();
-  };
-
-  var selectedMultiple = React.useMemo(function () {
-    if (multiple && isArray.isArray_1(value) && !isEmpty.isEmpty_1(value)) {
-      return value;
-    }
-
-    return [];
-  }, [multiple, value]);
-  var selectedSingle = React.useMemo(function () {
-    if (multiple) return "";
-
-    if (typeof value === "undefined") {
-      return nodeInfo ? nodeInfo.label : "";
-    }
-
-    return nodeInfo ? nodeInfo.label : "".concat(value);
-  }, [multiple, value, nodeInfo]);
-  var checked = React.useMemo(function () {
-    if (multiple) {
-      if (valueType === "object") {
-        return isArray.isArray_1(value) ? value.map(function (item) {
-          return item.value;
-        }) : [];
-      }
-
-      return isArray.isArray_1(value) ? value : [];
+  var _useState = React.useState(""),
+      _useState2 = slicedToArray._slicedToArray(_useState, 2),
+      filterInput = _useState2[0],
+      setFilterInput = _useState2[1];
+
+  var $tree = React.useRef();
+
+  var _useTreeSelectUtils = treeSelect_useTreeSelectUtils.useTreeSelectUtils(props, $tree),
+      normalizeValue = _useTreeSelectUtils.normalizeValue,
+      formatValue = _useTreeSelectUtils.formatValue,
+      getNodeItem = _useTreeSelectUtils.getNodeItem;
+
+  var filterable = React.useMemo(function () {
+    return rawFilterable || !!props.filter;
+  }, [props.filter, rawFilterable]);
+  var normalizedValue = React.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 = React.useMemo(function () {
+    return String(filterInput);
+  }, [filterInput]);
+  var inputValue = React.useMemo(function () {
+    if (multiple) return normalizedValue;
+    return filterable && popupVisible ? filterText : normalizedValue[0];
+  }, [multiple, normalizedValue, filterable, popupVisible, filterText]);
+  var inputPlaceholader = React.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 = React.useMemo(function () {
-    return loading && !disabled;
+    return !disabled && loading;
   }, [loading, disabled]);
-  var showFilter = React.useMemo(function () {
-    if (disabled) {
-      return false;
-    }
-
-    if (!multiple && selectedSingle && (filterable || isFunction.isFunction_1(filter))) {
-      return visible;
-    }
-
-    return filterable || isFunction.isFunction_1(filter);
-  }, [disabled, multiple, selectedSingle, filterable, visible, filter]);
-  var multiLimitDisabled = React.useMemo(function () {
-    if (multiple && max && isArray.isArray_1(value) && max <= value.length) {
-      return true;
-    }
-
-    return false;
-  }, [multiple, max, value]);
-  var realLabel = React.useMemo(function () {
-    if (!isEmpty.isEmpty_1(treeProps) && !isEmpty.isEmpty_1(treeProps.keys)) {
-      return treeProps.keys.label || "label";
-    }
-
-    return "label";
-  }, [treeProps]);
-  var realValue = React.useMemo(function () {
-    if (!isEmpty.isEmpty_1(treeProps) && !isEmpty.isEmpty_1(treeProps.keys)) {
-      return treeProps.keys.value || "value";
-    }
-
-    return "value";
-  }, [treeProps]);
-  var tagList = React.useMemo(function () {
-    if (nodeInfo && isArray.isArray_1(nodeInfo)) {
-      return nodeInfo;
-    }
-
-    return selectedMultiple.map(function (value2) {
-      return {
-        label: value2,
-        value: value2
-      };
+  var showFakePlaceholder = React.useMemo(function () {
+    return multiple && !filterable && !normalizedValue.length;
+  }, [filterable, multiple, normalizedValue]);
+  var handleFilter = React.useCallback(function (node) {
+    return filterable ? filter(filterText, node) : true;
+  }, [filter, filterText, filterable]);
+  var handleSingleChange = _util_usePersistFn.usePersistFn(function (value2, context) {
+    var $value = value2.length ? value2[0] : null;
+    onChange(formatValue($value, context.node.label), context);
+    popupAction.off();
+  });
+  var handleMultiChange = _util_usePersistFn.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 = _util_usePersistFn.usePersistFn(function (ctx) {
+    ctx.e.stopPropagation();
+    onChange(multiple ? [] : formatValue(null), {
+      node: null
     });
-  }, [nodeInfo, selectedMultiple]);
-  var filterByText = React.useCallback(function (node) {
-    if (isFunction.isFunction_1(filter)) {
-      var filterValue = filter(filterText, node);
-
-      if (isBoolean_1(filterValue)) {
-        return filterValue;
-      }
-    }
-
-    return node.data[realLabel].indexOf(filterText) >= 0;
-  }, [filterText, realLabel, filter]);
-  React.useEffect(function () {
-    if (valueType === "object") {
-      setActived(isArray.isArray_1(value) ? value.map(function (item) {
-        return item.value;
-      }) : [value.value]);
-    } else {
-      setActived(isArray.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 = _util_usePersistFn.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.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]
-        };
-      });
+  });
+  var handleTagChange = _util_usePersistFn.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);
-  }
-
-  function treeNodeActive(value2, context) {
-    if (multiple) return;
-    var nodeValue = isEmpty.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]
-      };
-    }
-
-    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 = _util_usePersistFn.usePersistFn(function (v, ctx) {
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur({
+      value: multiple ? normalizedValue : normalizedValue[0],
+      e: ctx.e
+    });
+  });
+  var handleFocus = _util_usePersistFn.usePersistFn(function (v, ctx) {
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus({
+      value: multiple ? normalizedValue : normalizedValue[0],
+      e: ctx.e
+    });
+  });
+  var handleEnter = _util_usePersistFn.usePersistFn(function (text) {
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch(text);
+  });
+  var handleFilterChange = _util_usePersistFn.usePersistFn(function (value2, _ref3) {
+    var trigger = _ref3.trigger;
+
+    if (trigger !== "blur") {
+      setFilterInput(value2);
     }
+  });
+  React.useEffect(function () {
+    popupVisible && setFilterInput("");
+  }, [popupVisible]);
+
+  var renderTree = function renderTree() {
+    return showLoading ? loadingItem : /* @__PURE__ */React__default["default"].createElement(tree_index.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 = React.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__default["default"].createElement(React__default["default"].Fragment, null, prefixIcon, /* @__PURE__ */React__default["default"].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: _util_noop["default"]
+    }) : "";
+  };
 
-  var treeItem = !loading && /* @__PURE__ */React__default["default"].createElement(tree_index.Tree, _objectSpread({
-    ref: treeRef,
-    value: checked,
-    hover: true,
-    expandAll: true,
-    data: data,
-    activable: !multiple,
-    checkable: multiple,
-    disabled: disabled || multiLimitDisabled,
-    empty: empty || /* @__PURE__ */React__default["default"].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__default["default"].createElement("p", {
-    className: "".concat(classPrefix, "-select__loading-tips")
-  }, loadingText || /* @__PURE__ */React__default["default"].createElement("div", {
-    className: "".concat(classPrefix, "-select__empty")
-  }, loadingTextLabel));
-  return /* @__PURE__ */React__default["default"].createElement("div", {
+  return /* @__PURE__ */React__default["default"].createElement(selectInput_SelectInput["default"], _objectSpread(_objectSpread({}, selectInputProps), {}, {
     ref: ref,
-    className: treeSelectClassName,
-    style: treeSelectStyle
-  }, /* @__PURE__ */React__default["default"].createElement(popup_index.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__default["default"].createElement(React__default["default"].Fragment, null, loadingTip, treeItem)
-  }, /* @__PURE__ */React__default["default"].createElement("div", {
-    style: {
-      minHeight: 30
+    className: classNames__default["default"]("".concat(classPrefix, "-tree-select"), defineProperty._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__default["default"].createElement("span", {
-    className: "".concat(classPrefix, "-select__left-icon")
-  }, prefixIcon), /* @__PURE__ */React__default["default"].createElement(treeSelect_TreeSelectTags["default"], _objectSpread({
-    tagList: tagList
-  }, props)), /* @__PURE__ */React__default["default"].createElement(treeSelect_TreeSelectInput["default"], _objectSpread({
-    ref: inputRef,
-    visible: visible,
-    filterText: filterText,
-    selectedSingle: selectedSingle,
-    setFocusing: setFocusing,
-    setFilterText: setFilterText,
-    placeholder: placeholder
-  }, props)), /* @__PURE__ */React__default["default"].createElement(treeSelect_TreeSelectSuffix["default"], _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__default["default"].createElement(treeSelect_TreeSelectArrow.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",