@kdcloudjs/kdesign 1.6.40 → 1.7.1

package/es/tree-select/tree-select.js

@@ -0,0 +1,506 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _Map from "@babel/runtime-corejs3/core-js-stable/map";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { useContext, useRef, useEffect, useState, useCallback, useLayoutEffect, useMemo } from 'react';
+import { useMergedState } from '../_utils/hooks';
+import classNames from 'classnames';
+import ConfigContext from '../config-provider/ConfigContext';
+import { getCompProps } from '../_utils';
+import { Icon, Tag, Tree } from '../index';
+import usePopper from '../_utils/usePopper';
+var INPUT_MIN_WIDTH = 4; // 输入框最小宽度
+function flattenTreeData(treeData) {
+  var map = new _Map();
+  function flatten(node) {
+    var parentKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    var _a;
+    var key = node.key;
+    var data = _extends(_extends({}, node), {
+      childrenKeys: [],
+      parentKeys: parentKeys
+    });
+    map.set(key, data);
+    if (node.children) {
+      var keys = [];
+      (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach(function (child) {
+        var _context, _data$childrenKeys, _context2;
+        var childKey = flatten(child, _concatInstanceProperty(_context = []).call(_context, _toConsumableArray(parentKeys), [key]));
+        keys.push(childKey);
+        var grandchildrenKeys = map.get(childKey).childrenKeys;
+        (_data$childrenKeys = data.childrenKeys).push.apply(_data$childrenKeys, _concatInstanceProperty(_context2 = [childKey]).call(_context2, _toConsumableArray(grandchildrenKeys)));
+      });
+    }
+    return key;
+  }
+  treeData.forEach(function (node) {
+    flatten(node);
+  });
+  return map;
+}
+var InternalTreeSelect = function InternalTreeSelect(props, ref) {
+  var _context3, _classNames4, _classNames10;
+  var _useContext = useContext(ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls,
+    prefixCls = _useContext.prefixCls,
+    userDefaultProps = _useContext.compDefaultProps;
+  var treeSelectProps = getCompProps('TreeSelect', userDefaultProps, props);
+  var size = treeSelectProps.size,
+    value = treeSelectProps.value,
+    autoFocus = treeSelectProps.autoFocus,
+    className = treeSelectProps.className,
+    defaultOpen = treeSelectProps.defaultOpen,
+    dropdownClassName = treeSelectProps.dropdownClassName,
+    disabled = treeSelectProps.disabled,
+    borderType = treeSelectProps.borderType,
+    _treeSelectProps$show = treeSelectProps.showArrow,
+    showArrow = _treeSelectProps$show === void 0 ? true : _treeSelectProps$show,
+    allowClear = treeSelectProps.allowClear,
+    customPrefixcls = treeSelectProps.prefixCls,
+    onFocus = treeSelectProps.onFocus,
+    onBlur = treeSelectProps.onBlur,
+    onClear = treeSelectProps.onClear,
+    onVisibleChange = treeSelectProps.onVisibleChange,
+    mode = treeSelectProps.mode,
+    showSearch = treeSelectProps.showSearch,
+    onChange = treeSelectProps.onChange,
+    onSearch = treeSelectProps.onSearch,
+    defaultValue = treeSelectProps.defaultValue,
+    placeholder = treeSelectProps.placeholder,
+    dropdownStyle = treeSelectProps.dropdownStyle,
+    style = treeSelectProps.style,
+    clearIcon = treeSelectProps.clearIcon,
+    filterTreeNode = treeSelectProps.filterTreeNode,
+    treeNodeFilterProp = treeSelectProps.treeNodeFilterProp,
+    treeNodeLabelProp = treeSelectProps.treeNodeLabelProp,
+    _treeSelectProps$popp = treeSelectProps.popperStyle,
+    popperStyle = _treeSelectProps$popp === void 0 ? {} : _treeSelectProps$popp,
+    tagRender = treeSelectProps.tagRender,
+    treeData = treeSelectProps.treeData,
+    virtual = treeSelectProps.virtual,
+    treeIcon = treeSelectProps.treeIcon,
+    showTreeIcon = treeSelectProps.showTreeIcon,
+    switcherIcon = treeSelectProps.switcherIcon,
+    treeDefaultExpandAll = treeSelectProps.treeDefaultExpandAll,
+    treeDefaultExpandedKeys = treeSelectProps.treeDefaultExpandedKeys,
+    treeCheckStrictly = treeSelectProps.treeCheckStrictly,
+    treeExpandedKeys = treeSelectProps.treeExpandedKeys,
+    treeExpandOnClickNode = treeSelectProps.treeExpandOnClickNode,
+    treeLoadData = treeSelectProps.treeLoadData,
+    onTreeExpand = treeSelectProps.onTreeExpand,
+    onSelect = treeSelectProps.onSelect,
+    onCheck = treeSelectProps.onCheck;
+  var isMultiple = mode === 'multiple'; // 是否多选
+  var _useMergedState = useMergedState(isMultiple ? [] : undefined, {
+      value: value,
+      defaultValue: defaultValue
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    initValue = _useMergedState2[0],
+    setInitValue = _useMergedState2[1];
+  var _useState = useState(treeExpandedKeys),
+    _useState2 = _slicedToArray(_useState, 2),
+    expandedKeys = _useState2[0],
+    setExpandedKeys = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedKeys = _useState4[0],
+    setSelectedKeys = _useState4[1];
+  var innerRef = useRef();
+  var selectRef = ref || innerRef;
+  var searchRef = useRef(null); // 搜索框ref
+  var selectionRef = useRef(null);
+  var dropDownRef = useRef(null);
+  var measureRef = useRef(null);
+  var _useState5 = useState(!!props.visible || defaultOpen),
+    _useState6 = _slicedToArray(_useState5, 2),
+    optionShow = _useState6[0],
+    setOptionShow = _useState6[1]; // 下拉列表是否展示
+  var _useState7 = useState(''),
+    _useState8 = _slicedToArray(_useState7, 2),
+    searchValue = _useState8[0],
+    setSearchValue = _useState8[1]; // 搜索框定时器
+  var _useState9 = useState(INPUT_MIN_WIDTH),
+    _useState10 = _slicedToArray(_useState9, 2),
+    inputWidth = _useState10[0],
+    setInputWidth = _useState10[1]; // 输入框宽度
+  var _useState11 = useState(autoFocus),
+    _useState12 = _slicedToArray(_useState11, 2),
+    focusd = _useState12[0],
+    setFocusd = _useState12[1];
+  var _useState13 = useState([]),
+    _useState14 = _slicedToArray(_useState13, 2),
+    selectTreeNodes = _useState14[0],
+    setSelectTreeNodes = _useState14[1];
+  var TreeMap = useMemo(function () {
+    return flattenTreeData(treeData);
+  }, [treeData]);
+  var isSelected = useMemo(function () {
+    return !!(selectTreeNodes === null || selectTreeNodes === void 0 ? void 0 : selectTreeNodes.length);
+  }, [selectTreeNodes]);
+  var selectPrefixCls = getPrefixCls(prefixCls, 'tree-select', customPrefixcls);
+  // 选择器样式
+  var selectCls = classNames(selectPrefixCls, className, _defineProperty({}, "".concat(selectPrefixCls, "-visible"), optionShow));
+  var selectionCls = classNames(_defineProperty({}, "".concat(selectPrefixCls, "-selector"), true));
+  // 下拉列表框样式
+  var dropDownCls = classNames(dropdownClassName, _defineProperty({}, "".concat(selectPrefixCls, "-dropdown"), true));
+  // 多选，单选公共样式
+  var commCls = classNames((_classNames4 = {}, _defineProperty(_classNames4, "".concat(selectPrefixCls, "-bordered"), borderType === 'bordered'), _defineProperty(_classNames4, "".concat(selectPrefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classNames4, "".concat(selectPrefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames4, _concatInstanceProperty(_context3 = "".concat(selectPrefixCls, "-size-")).call(_context3, size), size), _defineProperty(_classNames4, "".concat(selectPrefixCls, "-wrapper"), true), _classNames4));
+  useEffect(function () {
+    var arr = [];
+    if (isMultiple && (initValue === null || initValue === void 0 ? void 0 : initValue.length)) {
+      for (var index = 0; index < initValue.length; index++) {
+        var key = initValue[index];
+        if (TreeMap.has(key)) {
+          arr.push(TreeMap.get(key));
+        }
+      }
+    } else {
+      if (TreeMap.has(initValue)) {
+        arr.push(TreeMap.get(initValue));
+      }
+    }
+    setSelectTreeNodes(arr);
+  }, [initValue, TreeMap, isMultiple]);
+  useEffect(function () {
+    if (optionShow === false) {
+      handleClear();
+    }
+  }, [optionShow]);
+  var handleFocus = useCallback(function (e) {
+    e.stopPropagation();
+    setFocusd(true);
+    onFocus && onFocus(e);
+  }, [onFocus]);
+  var handleBlur = useCallback(function (e) {
+    e.stopPropagation();
+    setFocusd(false);
+    onBlur && onBlur(e);
+  }, [onBlur]);
+  useEffect(function () {
+    selectionRef.current.addEventListener('mouseup', function (e) {
+      var _a;
+      var isCloseBtn = ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.className.indexOf('kd-tag-close-icon')) > -1;
+      if (isCloseBtn) {
+        e.stopPropagation();
+      }
+    });
+  }, []);
+  useLayoutEffect(function () {
+    measureRef.current && setInputWidth(measureRef.current.scrollWidth);
+  }, [searchValue]);
+  var getTreeNodeLabel = function getTreeNodeLabel(node) {
+    return (node === null || node === void 0 ? void 0 : node[treeNodeLabelProp]) || (node === null || node === void 0 ? void 0 : node.title);
+  };
+  // 输入框变化搜索内容
+  var handleSearchChange = useCallback(function (event) {
+    var val = event.currentTarget.value;
+    setOptionShow(true);
+    setSearchValue(val);
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch(val);
+  }, [onSearch]);
+  // 清除搜索内容
+  var handleClear = useCallback(function () {
+    if (searchRef.current) {
+      searchRef.current.value = '';
+      setSearchValue('');
+    }
+  }, [searchRef]);
+  // 清空选择器内容
+  var handleReset = function handleReset(e) {
+    e.stopPropagation();
+    if (isMultiple) {
+      setInitValue([]);
+    } else {
+      setInitValue('');
+    }
+    onClear === null || onClear === void 0 ? void 0 : onClear('');
+    setSearchValue('');
+    onChange === null || onChange === void 0 ? void 0 : onChange(undefined, undefined);
+  };
+  // 多选模式下清除某一项
+  var handleRemove = function handleRemove(e, key) {
+    var _context4;
+    var _a, _b;
+    if (disabled) return;
+    var allRemoveKeys = _concatInstanceProperty(_context4 = []).call(_context4, _toConsumableArray(((_a = TreeMap.get(key)) === null || _a === void 0 ? void 0 : _a.childrenKeys) || []), _toConsumableArray(((_b = TreeMap.get(key)) === null || _b === void 0 ? void 0 : _b.parentKeys) || []), [key]);
+    var newSelectTreeNodes = _filterInstanceProperty(selectTreeNodes).call(selectTreeNodes, function (item) {
+      return !_includesInstanceProperty(allRemoveKeys).call(allRemoveKeys, item.key);
+    });
+    var newKeys = _mapInstanceProperty(newSelectTreeNodes).call(newSelectTreeNodes, function (_ref) {
+      var key = _ref.key;
+      return key;
+    });
+    if (!Object.hasOwnProperty.call(treeSelectProps, 'value')) {
+      setInitValue(newKeys);
+    }
+    onChange === null || onChange === void 0 ? void 0 : onChange(newKeys, newSelectTreeNodes);
+    e.stopPropagation();
+  };
+  var handleSelect = function handleSelect(keys, state) {
+    !isMultiple && !Object.hasOwnProperty.call(treeSelectProps, 'value') && setInitValue(keys[0]);
+    setSelectedKeys(keys);
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(keys, state);
+    !isMultiple && (onChange === null || onChange === void 0 ? void 0 : onChange(keys[0], [TreeMap.get(keys[0])]));
+    if (!isMultiple) {
+      setOptionShow(false);
+    }
+  };
+  var handleCheck = function handleCheck(keys, state) {
+    onCheck === null || onCheck === void 0 ? void 0 : onCheck(keys, state);
+    console.log(1111, state);
+    onChange === null || onChange === void 0 ? void 0 : onChange(keys);
+    !Object.hasOwnProperty.call(treeSelectProps, 'value') && setInitValue(keys);
+  };
+  var handleExpand = function handleExpand(keys, state) {
+    !Object.hasOwnProperty.call(treeSelectProps, 'treeExpandedKeys') && setExpandedKeys(keys);
+    onTreeExpand === null || onTreeExpand === void 0 ? void 0 : onTreeExpand(keys, state);
+  };
+  // 渲染后缀图标
+  var renderSuffix = function renderSuffix() {
+    var _classNames5;
+    var suffixIcon = treeSelectProps.suffixIcon;
+    // 选择器下拉icon样式
+    var arrowIconCls = classNames((_classNames5 = {}, _defineProperty(_classNames5, "".concat(selectPrefixCls, "-icon-arrow"), true), _defineProperty(_classNames5, "".concat(selectPrefixCls, "-icon-arrow-up"), optionShow), _defineProperty(_classNames5, "".concat(selectPrefixCls, "-icon-arrow-down"), !optionShow), _defineProperty(_classNames5, "".concat(selectPrefixCls, "-icon-arrow-focus"), optionShow), _classNames5));
+    var iconShow = allowClear && !disabled && (isMultiple ? !!selectTreeNodes.length : (initValue !== null && initValue !== void 0 ? initValue : '') !== '' || searchValue);
+    var clearIconCls = classNames(_defineProperty({}, "".concat(selectPrefixCls, "-icon-clear"), true));
+    return /*#__PURE__*/React.createElement(React.Fragment, null, iconShow && /*#__PURE__*/React.createElement("span", {
+      onClick: handleReset,
+      onMouseDown: function onMouseDown(e) {
+        return e.preventDefault();
+      },
+      className: clearIconCls
+    }, clearIcon || /*#__PURE__*/React.createElement(Icon, {
+      type: "close-solid"
+    })), showArrow && /*#__PURE__*/React.createElement("span", {
+      className: arrowIconCls
+    }, suffixIcon || /*#__PURE__*/React.createElement(Icon, {
+      type: "arrow-down"
+    })));
+  };
+  var defFilterTreeNode = function defFilterTreeNode(node) {
+    var _a;
+    if (typeof filterTreeNode === 'function') {
+      return filterTreeNode(node, searchValue);
+    }
+    if ((_a = node === null || node === void 0 ? void 0 : node[treeNodeFilterProp]) === null || _a === void 0 ? void 0 : _includesInstanceProperty(_a).call(_a, searchValue)) {
+      return true;
+    }
+    return false;
+  };
+  var dropRender = function dropRender() {
+    var treeProps = {
+      expandOnClickNode: treeExpandOnClickNode,
+      loadData: treeLoadData,
+      treeData: treeData,
+      virtual: virtual,
+      defaultExpandAll: treeDefaultExpandAll,
+      defaultExpandedKeys: treeDefaultExpandedKeys,
+      checkStrictly: treeCheckStrictly,
+      selectedKeys: selectedKeys,
+      expandedKeys: expandedKeys,
+      filterValue: searchValue,
+      icon: treeIcon,
+      showIcon: showTreeIcon,
+      switcherIcon: switcherIcon,
+      notFoundContent: renderNotContent(),
+      filterTreeNode: defFilterTreeNode,
+      onSelect: handleSelect,
+      onExpand: handleExpand
+    };
+    if (isMultiple) {
+      treeProps.checkable = true;
+      treeProps.checkedKeys = initValue;
+      treeProps.onCheck = handleCheck;
+    }
+    return /*#__PURE__*/React.createElement(Tree, _extends({}, treeProps));
+  };
+  // 下拉列表为空时显示的内容
+  var renderNotContent = function renderNotContent() {
+    // 下拉列表为空
+    var emptyListCls = classNames(_defineProperty({}, "".concat(selectPrefixCls, "-dropdown-empty"), true));
+    var notFoundContent = treeSelectProps.notFoundContent;
+    var emptyContent = notFoundContent || '暂无数据';
+    return /*#__PURE__*/React.createElement("div", {
+      className: emptyListCls
+    }, emptyContent);
+  };
+  useEffect(function () {
+    var _a;
+    if (showSearch && autoFocus && !disabled) {
+      (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }, [showSearch, autoFocus, disabled]);
+  // 渲染下拉列表框
+  var renderContent = function renderContent() {
+    var dropDownStyle = _extends({
+      width: style === null || style === void 0 ? void 0 : style.width
+    }, dropdownStyle);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: dropDownCls,
+      style: dropDownStyle,
+      ref: dropDownRef
+    }, dropRender()));
+  };
+  // 处理多选tag
+  var handleMaxTagHolder = useCallback(function () {
+    var maxTagPlaceholder = treeSelectProps.maxTagPlaceholder;
+    if (typeof maxTagPlaceholder === 'function') {
+      return /*#__PURE__*/React.createElement(Tag, {
+        type: "edit",
+        size: size,
+        disabled: disabled
+      }, maxTagPlaceholder(selectTreeNodes));
+    } else {
+      return /*#__PURE__*/React.createElement(Tag, {
+        type: "edit",
+        size: size,
+        disabled: disabled
+      }, maxTagPlaceholder);
+    }
+  }, [selectTreeNodes]);
+  var renderSingle = function renderSingle() {
+    var label = '';
+    if (isSelected) {
+      label = getTreeNodeLabel(selectTreeNodes[0]);
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: singleCls,
+      ref: selectionRef,
+      title: label
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "".concat(selectPrefixCls, "-selection-search")
+    }, /*#__PURE__*/React.createElement("input", {
+      ref: searchRef,
+      value: searchValue,
+      className: "".concat(selectPrefixCls, "-selection-search-input"),
+      onChange: handleSearchChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      readOnly: !showSearch || !!disabled
+    })), isSelected && !searchValue && /*#__PURE__*/React.createElement("span", {
+      className: "".concat(selectPrefixCls, "-selection-item")
+    }, label), !isSelected && !searchValue && /*#__PURE__*/React.createElement("span", {
+      className: "".concat(selectPrefixCls, "-placeholder")
+    }, placeholder), /*#__PURE__*/React.createElement("span", {
+      className: "".concat(selectPrefixCls, "-suffix")
+    }, renderSuffix())));
+  };
+  var renderMultiple = function renderMultiple() {
+    var _context5, _classNames8, _context6, _classNames9;
+    var maxTagCount = treeSelectProps.maxTagCount,
+      maxTagPlaceholder = treeSelectProps.maxTagPlaceholder;
+    var multipleCls = classNames(commCls, (_classNames8 = {}, _defineProperty(_classNames8, "".concat(selectPrefixCls, "-multiple-disabled"), disabled), _defineProperty(_classNames8, _concatInstanceProperty(_context5 = "".concat(selectPrefixCls, "-")).call(_context5, mode), mode), _defineProperty(_classNames8, "".concat(selectPrefixCls, "-focused"), focusd || optionShow), _defineProperty(_classNames8, "".concat(selectPrefixCls, "-placeholder"), placeholder && !selectTreeNodes.length), _classNames8));
+    var itemCls = classNames((_classNames9 = {}, _defineProperty(_classNames9, "".concat(selectPrefixCls, "-selection-item"), true), _defineProperty(_classNames9, _concatInstanceProperty(_context6 = "".concat(selectPrefixCls, "-selection-item-")).call(_context6, size), size), _classNames9));
+    var TagStyle = {
+      margin: '2px 8px 2px 0',
+      maxWidth: '100%'
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      className: multipleCls,
+      ref: selectionRef
+    }, Array.isArray(selectTreeNodes) && /*#__PURE__*/React.createElement(React.Fragment, null, _mapInstanceProperty(selectTreeNodes).call(selectTreeNodes, function (item, index) {
+      var key = item.key;
+      var label = getTreeNodeLabel(item);
+      return (!maxTagCount || index <= maxTagCount - 1) && /*#__PURE__*/React.createElement("span", {
+        key: key,
+        className: classNames("".concat(selectPrefixCls, "-selection-tag")),
+        onMouseDown: function onMouseDown(e) {
+          return e.preventDefault();
+        }
+      }, typeof tagRender === 'function' ? tagRender === null || tagRender === void 0 ? void 0 : tagRender(_extends({
+        onClose: handleRemove,
+        disabled: disabled,
+        size: size
+      }, item)) : /*#__PURE__*/React.createElement(Tag, {
+        type: "edit",
+        style: TagStyle,
+        size: size,
+        closable: true,
+        disabled: disabled,
+        onClose: function onClose(e) {
+          return handleRemove(e, key);
+        },
+        "data-tag": key
+      }, label));
+    }), maxTagCount && selectTreeNodes.length > maxTagCount ? maxTagPlaceholder ? handleMaxTagHolder() : /*#__PURE__*/React.createElement("span", {
+      className: itemCls
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "".concat(selectPrefixCls, "-selection-item-content")
+    }, "\u5171", selectTreeNodes.length, "\u9879")) : null), /*#__PURE__*/React.createElement("span", {
+      className: "".concat(selectPrefixCls, "-selection-search"),
+      style: {
+        width: inputWidth
+      }
+    }, /*#__PURE__*/React.createElement("input", {
+      ref: searchRef,
+      value: searchValue,
+      className: "".concat(selectPrefixCls, "-selection-search-input"),
+      onChange: handleSearchChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      readOnly: !showSearch || !!disabled
+    }), /*#__PURE__*/React.createElement("span", {
+      ref: measureRef,
+      className: "".concat(selectPrefixCls, "-selection-search-mirror")
+    }, searchValue, "\xA0")), /*#__PURE__*/React.createElement("span", {
+      className: "".concat(selectPrefixCls, "-placeholder")
+    }, !(selectTreeNodes === null || selectTreeNodes === void 0 ? void 0 : selectTreeNodes.length) && !searchValue && placeholder), /*#__PURE__*/React.createElement("span", {
+      className: "".concat(selectPrefixCls, "-suffix")
+    }, renderSuffix()));
+  };
+  var singleCls = classNames(commCls, (_classNames10 = {}, _defineProperty(_classNames10, "".concat(selectPrefixCls, "-single"), true), _defineProperty(_classNames10, "".concat(selectPrefixCls, "-single-disabled"), disabled), _defineProperty(_classNames10, "".concat(selectPrefixCls, "-single-focused"), focusd && !disabled || optionShow), _classNames10));
+  var renderSelect = function renderSelect() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: selectCls,
+      ref: selectRef,
+      style: style
+    }, /*#__PURE__*/React.createElement("span", {
+      className: selectionCls,
+      tabIndex: disabled ? -1 : 0,
+      onFocus: function onFocus() {
+        var _a;
+        return (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      },
+      onBlur: function onBlur() {
+        var _a;
+        return (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      }
+    }, !isMultiple ? renderSingle() : renderMultiple()));
+  };
+  var catchStyle = function catchStyle() {
+    var _a;
+    if (selectRef === null || selectRef === void 0 ? void 0 : selectRef.current) {
+      var _ref2 = (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(),
+        width = _ref2.width;
+      return _extends({
+        width: (dropdownStyle === null || dropdownStyle === void 0 ? void 0 : dropdownStyle.width) || (width > 75 ? width : 75),
+        zIndex: 1050
+      }, popperStyle);
+    }
+  };
+  var handleVisibleChange = function handleVisibleChange(visible) {
+    if (visible !== optionShow) {
+      props.visible === undefined && setOptionShow(visible);
+      onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(visible);
+    }
+  };
+  var popperProps = _extends(_extends({}, treeSelectProps), {
+    prefixCls: selectPrefixCls,
+    placement: 'bottomLeft',
+    popperStyle: catchStyle(),
+    defaultVisible: optionShow,
+    visible: optionShow,
+    onVisibleChange: handleVisibleChange,
+    clickToClose: !(showSearch && searchValue)
+  });
+  return usePopper(renderSelect(), renderContent(), popperProps);
+};
+var TreeSelect = /*#__PURE__*/React.forwardRef(InternalTreeSelect);
+TreeSelect.displayName = 'TreeSelect';
+export default TreeSelect;

package/es/typography/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/es/upload/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/lib/alert/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/lib/anchor/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/lib/avatar/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/lib/badge/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/lib/base-data/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/lib/button/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/lib/card/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/lib/carousel/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/lib/cascader/cascader.js

@@ -182,6 +182,17 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       });
     });
   }, [currentOptions, fieldNames.label, isMultiple]);
+  var values = (0, _react.useMemo)(function () {
+    return !isMultiple ? (0, _map.default)(currentOptions).call(currentOptions, function (_ref3) {
+      var value = _ref3.value;
+      return value;
+    }) : (0, _map.default)(currentOptions).call(currentOptions, function (option) {
+      return (0, _map.default)(option).call(option, function (_ref4) {
+        var value = _ref4.value;
+        return value;
+      });
+    });
+  }, [currentOptions, isMultiple]);
   var allowClear = allProps.allowClear && value.length > 0;
   var locatorProps = {
     style: style,
@@ -269,7 +280,7 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       ref: wrapperRef
     }, Array.isArray(currentOptions) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _map.default)(currentOptions).call(currentOptions, function (option, index) {
       return /*#__PURE__*/_react.default.createElement("span", {
-        key: (0, _stringify.default)(labels[index]),
+        key: (0, _stringify.default)(values[index]),
         className: (0, _classnames.default)("".concat(prefixCls, "-selection-tag"))
       }, (!maxTagCount || index <= maxTagCount - 1) && /*#__PURE__*/_react.default.createElement(_tag.default, {
         type: "edit",
@@ -344,8 +355,8 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, newValue, newMultipleOptions);
   };
   var onChange = function onChange(selectedOptions) {
-    var selectedValue = (0, _map.default)(selectedOptions).call(selectedOptions, function (_ref3) {
-      var value = _ref3[fieldNames.value];
+    var selectedValue = (0, _map.default)(selectedOptions).call(selectedOptions, function (_ref5) {
+      var value = _ref5[fieldNames.value];
       return value;
     });
     setCurrentOptions(selectedOptions);

package/lib/cascader/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */