@qsxy/element-plus-react 1.0.2 → 2.0.0

package/dist/Cascader/Cascader.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["classPrefix", "options", "separator", "filterable", "clearable", "showAllLevels", "collapseTags", "maxCollapseTags", "collapseTagsTooltip", "collapseTips", "filterMethod", "onChange", "onEnter", "afterEnter", "afterLeave", "props", "shouldSelect", "labelFormatter", "error", "warning"];
+var _excluded = ["classPrefix", "options", "separator", "filterable", "clearable", "showAllLevels", "collapseTags", "maxCollapseTags", "collapseTagsTooltip", "maxCollapseTagsTooltipHeight", "panel", "collapseTips", "filterMethod", "onChange", "onClear", "onEnter", "afterEnter", "afterLeave", "props", "shouldSelect", "labelFormatter", "nodeFormatter", "suggestionItemFormatter", "onVisibleChange", "onExpandChange", "onRemoveTag"];
 var _this = this,
   _templateObject,
   _templateObject2,
@@ -8,7 +8,8 @@ var _this = this,
   _templateObject5,
   _templateObject6,
   _templateObject7,
-  _templateObject8;
+  _templateObject8,
+  _templateObject9;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -38,10 +39,12 @@ import { Divider } from "../Divider";
 import Icon from "../Icon/Icon";
 import Input from "../Input/Input";
 import Popper from "../Popper/Popper";
+import { Scrollbar } from "../Scrollbar";
 import Tag from "../Tag/Tag";
 import Tooltip from "../Tooltip/Tooltip";
 import { isEmpty, isNotEmpty, mergeDefaultProps } from "../Util";
 import { partitionAnimationProps, partitionHTMLProps, partitionPopperPropsUtils, useClassNames, useControlled, useDisabled, useSize } from "../hooks";
+import { useResizeObserver } from "../hooks/useResizeObserver";
 import { CascaderContext } from "./CascaderContext";
 import CascaderDropdown from "./CascaderDropdown";
 import CascaderMenu from "./CascaderMenu";
@@ -54,16 +57,16 @@ var Cascader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref)
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   props = mergeDefaultProps({
-    separator: '/',
+    separator: ' / ',
     showAllLevels: true,
     props: {
       expandTrigger: 'click',
       emitPath: true,
-      valueKey: 'value',
-      labelKey: 'label',
-      childrenKey: 'children',
-      disabledKey: 'disabled',
-      leafKey: 'leaf'
+      value: 'value',
+      label: 'label',
+      children: 'children',
+      disabled: 'disabled',
+      leaf: 'leaf'
     },
     shouldSelect: function shouldSelect() {
       return true;
@@ -71,9 +74,10 @@ var Cascader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref)
     placeholder: t('el.cascader.placeholder', {
       lng: locale
     }) || '请选择',
-    collapseTags: true,
-    collapseTagsTooltip: true,
-    maxCollapseTags: 1
+    collapseTags: false,
+    collapseTagsTooltip: false,
+    maxCollapseTags: 1,
+    clearable: false
   }, props);
   var _props = props,
     _props$classPrefix = _props.classPrefix,
@@ -86,32 +90,39 @@ var Cascader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref)
     collapseTags = _props.collapseTags,
     maxCollapseTags = _props.maxCollapseTags,
     collapseTagsTooltip = _props.collapseTagsTooltip,
+    maxCollapseTagsTooltipHeight = _props.maxCollapseTagsTooltipHeight,
+    panel = _props.panel,
     collapseTips = _props.collapseTips,
     filterMethod = _props.filterMethod,
     onChange = _props.onChange,
+    onClear = _props.onClear,
     _onEnter = _props.onEnter,
     _afterEnter = _props.afterEnter,
     afterLeave = _props.afterLeave,
     menuProps = _props.props,
     shouldSelect = _props.shouldSelect,
     labelFormatter = _props.labelFormatter,
-    error = _props.error,
-    warning = _props.warning,
+    nodeFormatter = _props.nodeFormatter,
+    suggestionItemFormatter = _props.suggestionItemFormatter,
+    onVisibleChange = _props.onVisibleChange,
+    onExpandChange = _props.onExpandChange,
+    onRemoveTag = _props.onRemoveTag,
     rest = _objectWithoutProperties(_props, _excluded);
   var multiple = menuProps.multiple,
-    _menuProps$valueKey = menuProps.valueKey,
-    valueKey = _menuProps$valueKey === void 0 ? 'value' : _menuProps$valueKey,
-    _menuProps$labelKey = menuProps.labelKey,
-    labelKey = _menuProps$labelKey === void 0 ? 'label' : _menuProps$labelKey,
-    _menuProps$childrenKe = menuProps.childrenKey,
-    childrenKey = _menuProps$childrenKe === void 0 ? 'children' : _menuProps$childrenKe,
+    _menuProps$value = menuProps.value,
+    valueKey = _menuProps$value === void 0 ? 'value' : _menuProps$value,
+    _menuProps$label = menuProps.label,
+    labelKey = _menuProps$label === void 0 ? 'label' : _menuProps$label,
+    _menuProps$children = menuProps.children,
+    childrenKey = _menuProps$children === void 0 ? 'children' : _menuProps$children,
     lazy = menuProps.lazy,
     lazyLoad = menuProps.lazyLoad;
   var _useClassNames = useClassNames(classPrefix),
     e = _useClassNames.e,
     b = _useClassNames.b,
     m = _useClassNames.m,
-    is = _useClassNames.is;
+    is = _useClassNames.is,
+    cssVarName = _useClassNames.cssVarName;
   var disabled = useDisabled(props.disabled);
   var size = useSize(props.size);
   var _partitionHTMLProps = partitionHTMLProps(rest),
@@ -166,9 +177,10 @@ var Cascader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref)
     setSelectedNode = _useCascader.setSelectedNode,
     getSelectedLabel = _useCascader.getSelectedLabel,
     setCheckedNode = _useCascader.setCheckedNode,
+    setStrictlyCheckedNode = _useCascader.setStrictlyCheckedNode,
     getCheckedLabel = _useCascader.getCheckedLabel,
     getCheckedValue = _useCascader.getCheckedValue,
-    getCheckedNodes = _useCascader.getCheckedNodes,
+    _getCheckedNodes2 = _useCascader.getCheckedNodes,
     getOptions = _useCascader.getOptions,
     clearSelected = _useCascader.clearSelected,
     setNodeLeaf = _useCascader.setNodeLeaf,
@@ -176,7 +188,7 @@ var Cascader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref)
     setSelectedValue = _useCascader.setSelectedValue,
     handleSearch = _useCascader.handleSearch,
     _resetNodes = _useCascader.resetNodes;
-  var _useState3 = useState(max([value.length - 1, 0])),
+  var _useState3 = useState(0),
     _useState4 = _slicedToArray(_useState3, 2),
     level = _useState4[0],
     setLevel = _useState4[1];
@@ -184,21 +196,19 @@ var Cascader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref)
     _useState6 = _slicedToArray(_useState5, 2),
     loading = _useState6[0],
     setLoading = _useState6[1];
-  var _useState7 = useState(false),
+  var _useState7 = useState([]),
     _useState8 = _slicedToArray(_useState7, 2),
-    forceUpdate = _useState8[0],
-    setForceUpdate = _useState8[1];
-  var _useState9 = useState([]),
-    _useState10 = _slicedToArray(_useState9, 2),
-    filterList = _useState10[0],
-    setFilterList = _useState10[1];
+    filterList = _useState8[0],
+    setFilterList = _useState8[1];
   useEffect(function () {
-    if (multiple && value.length > 0) {
-      setLevel(max([value[0].length - 1, 0]));
-    } else {
-      setLevel(max([value.length - 1, 0]));
+    if (level == 0 && value.length > 0) {
+      if (multiple) {
+        setLevel(max([value[0].length - 1, 0]));
+      } else {
+        setLevel(max([value.length - 1, 0]));
+      }
     }
-  }, [multiple, value, value.length]);
+  }, [value]);
 
   // 多选框值
   var multiValue = useMemo(function () {
@@ -217,32 +227,24 @@ var Cascader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref)
     label = _useControlled4[0],
     setLabel = _useControlled4[1];
   // 搜索关键词
-  var _useState11 = useState(''),
+  var _useState9 = useState(''),
+    _useState10 = _slicedToArray(_useState9, 2),
+    searchText = _useState10[0],
+    setSearchText = _useState10[1];
+  var _useState11 = useState(false),
     _useState12 = _slicedToArray(_useState11, 2),
-    searchText = _useState12[0],
-    setSearchText = _useState12[1];
-  var _useState13 = useState(false),
-    _useState14 = _slicedToArray(_useState13, 2),
-    visible = _useState14[0],
-    setVisible = _useState14[1];
+    visible = _useState12[0],
+    setVisible = _useState12[1];
   // const [popperStyle, setPopperStyle] = useState<React.CSSProperties>({});
   // 多选时input框高度
-  var _useState15 = useState(32),
-    _useState16 = _slicedToArray(_useState15, 2),
-    inputHeight = _useState16[0],
-    setInputHeight = _useState16[1];
+  var _useState13 = useState(32),
+    _useState14 = _slicedToArray(_useState13, 2),
+    inputHeight = _useState14[0],
+    setInputHeight = _useState14[1];
   // 占位符
   var placeholder = useMemo(function () {
     return multiple && isNotEmpty(multiValue) ? '' : props.placeholder;
   }, [multiValue, multiple, props.placeholder]);
-
-  // 打开后搜索框自动获取焦点
-  useEffect(function () {
-    if (visible && filterable) {
-      searchInstance.current.focus();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [visible]);
   var multiLabel = useCallback(function () {
     if (multiple) {
       var _getCheckedLabel;
@@ -255,10 +257,10 @@ var Cascader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref)
   var checkedNodes = useCallback(function () {
     if (multiple) {
       var _getCheckedNodes;
-      return (_getCheckedNodes = getCheckedNodes()) !== null && _getCheckedNodes !== void 0 ? _getCheckedNodes : [];
+      return (_getCheckedNodes = _getCheckedNodes2()) !== null && _getCheckedNodes !== void 0 ? _getCheckedNodes : [];
     }
     return [];
-  }, [getCheckedNodes, multiple]);
+  }, [_getCheckedNodes2, multiple]);
 
   /** 关闭下拉框后清空搜索项 */
   var handleAfterLeave = useCallback(function () {
@@ -291,17 +293,19 @@ var Cascader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref)
     // console.log(_value, node.__level, multiLabel());
     setValue(_value);
     // onChange?.(_value);
-  }, [getCheckedValue, getSelectedNode, multiLabel, onChange, setCheckedNode, setValue]);
+    onRemoveTag === null || onRemoveTag === void 0 || onRemoveTag(node);
+  }, [getCheckedValue, getSelectedNode, multiLabel, onChange, onRemoveTag, setCheckedNode, setValue]);
 
   /** 重置值 */
-  var onClear = useCallback(function () {
+  var handleClear = useCallback(function () {
     lastValueRef.current = [];
     setValue([]);
     setLabel('');
     setLevel(0);
     clearSelected();
     onChange === null || onChange === void 0 || onChange([], allLevel, '', null);
-  }, [allLevel, clearSelected, onChange, setLabel, setValue]);
+    onClear === null || onClear === void 0 || onClear();
+  }, [allLevel, clearSelected, onChange, setLabel, setValue, onClear]);
 
   /** 清除搜索关键词 */
   var onClearSearch = useCallback(function (event) {
@@ -319,7 +323,7 @@ var Cascader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref)
     }
     setSearchText(keywords);
   }, [searchText]);
-  var onSelect = useCallback(function (_level, node) {
+  var onSelect = useCallback(function (_level, node, checkStrictly) {
     // 懒加载且非叶子节点且没有子节点时进入
     if (lazy && lazyLoad && node.__leaf !== true && !node[childrenKey]) {
       setSelectedNode(_level, node);
@@ -334,6 +338,7 @@ var Cascader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref)
         setLoading(null);
         if (shouldSelect(node, _level)) {
           setLevel(_level + 1);
+          onExpandChange === null || onExpandChange === void 0 || onExpandChange(node);
           // if (nodes?.length === 0) {
           //     setLevel(_level);
           //     const _label = getSelectedLabel(labelFormatter?.bind(this, _level));
@@ -362,13 +367,16 @@ var Cascader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref)
       });
     } else {
       if (shouldSelect(node, _level)) {
-        setForceUpdate(!forceUpdate);
-        if (node.__leaf) {
+        if (checkStrictly || node.__leaf) {
           // 最后一级
           if (menuProps !== null && menuProps !== void 0 && menuProps.multiple) {
             return;
           }
+          setLevel(_level);
           setSelectedNode(_level, node);
+          if (checkStrictly) {
+            setStrictlyCheckedNode(_level, node, true);
+          }
           var _label = getSelectedLabel(labelFormatter === null || labelFormatter === void 0 ? void 0 : labelFormatter.bind(_this, _level));
           setLabel(_label);
           setVisible(false);
@@ -379,11 +387,13 @@ var Cascader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref)
           setSelectedNode(_level, node);
           if (menuProps !== null && menuProps !== void 0 && menuProps.multiple) {
             setLevel(_level + 1);
+            onExpandChange === null || onExpandChange === void 0 || onExpandChange(node);
             // if (level < _level + 1) {
             // }
             return;
           }
           setLevel(_level + 1);
+          onExpandChange === null || onExpandChange === void 0 || onExpandChange(node);
           // onChange?.(getSelectedValue(), _level);
           // 2022-10-20：从其他路径切换到当前值路径时，高亮当前值路径
           var _val = getSelectedValue();
@@ -398,14 +408,17 @@ var Cascader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref)
         }
       }
     }
-  }, [lazy, lazyLoad, childrenKey, setSelectedNode, storeOptionData, shouldSelect, setNodeLeaf, getSelectedLabel, labelFormatter, getSelectedValue, setValue, setLabel, onChange, getSelectedNode, forceUpdate, menuProps === null || menuProps === void 0 ? void 0 : menuProps.multiple, value, setSelectedValue]);
+  }, [lazy, lazyLoad, childrenKey, setSelectedNode, storeOptionData, shouldSelect, onExpandChange, setNodeLeaf, getSelectedLabel, labelFormatter, getSelectedValue, setValue, setLabel, onChange, getSelectedNode, menuProps === null || menuProps === void 0 ? void 0 : menuProps.multiple, setStrictlyCheckedNode, value, setSelectedValue]);
   var onCheckedChange = function onCheckedChange(_level, node, checked) {
-    var _getCheckedValue2;
-    setCheckedNode(_level, node, checked);
+    var _props$props, _getCheckedValue2;
+    if ((_props$props = props.props) !== null && _props$props !== void 0 && _props$props.checkStrictly) {
+      setStrictlyCheckedNode(_level, node, checked);
+    } else {
+      setCheckedNode(_level, node, checked);
+    }
     var _value = (_getCheckedValue2 = getCheckedValue()) !== null && _getCheckedValue2 !== void 0 ? _getCheckedValue2 : [];
     setValue(_value);
-    onChange === null || onChange === void 0 || onChange(_value, _level, multiLabel(), getCheckedNodes());
-    // setForceUpdate(!forceUpdate);
+    onChange === null || onChange === void 0 || onChange(_value, _level, multiLabel(), _getCheckedNodes2());
   };
   var stopLazy = useCallback(function () {
     if (stopLazyRef.current === true) {
@@ -467,23 +480,54 @@ var Cascader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref)
       }
     }
   }, [stopLazy, valueKey, setSelectedNode, setLabel, getSelectedLabel, labelFormatter, showAllLevels, allLevel, getOptions, lazyLoad, storeOptionData, multiple, value, setCheckedNode]);
+
+  // const getTagWrapperLeft = () => {
+  //     if (!slots.prefix) return 0;
+
+  //     const prefix = inputRef.value?.$el.querySelector(`.${nsInput.e('prefix')}`) as HTMLElement | null;
+  //     if (!prefix) return 0;
+
+  //     const prefixWidth = prefix.getBoundingClientRect().width;
+  //     if (prefixWidth <= 0) return 0;
+  //     return prefixWidth + sizeMapPadding[realSize.value || 'default'];
+  // };
+
+  var updateStyle = function updateStyle() {
+    var _wrapperRef$current;
+    if (!inputRef.current) {
+      return;
+    }
+    var el = inputRef.current.ref.current;
+    var inputInitialHeight = Number.parseFloat(window.getComputedStyle(el).getPropertyValue(cssVarName('input-height'))) - 2;
+    var height = checkedNodes().length > 0 ? Math.max((_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.clientHeight, inputInitialHeight) - 2 : inputInitialHeight;
+    // inputInner.style.height = height;
+    setInputHeight(height);
+    // tagWrapperEl.style.left = `${getTagWrapperLeft()}px`;
+
+    // const height = wrapperRef.current?.clientHeight + 4;
+    // setInputHeight(height <= 32 ? 32 : height + 32);
+  };
   useEffect(function () {
     setFilterList(handleSearch(searchText));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchText]);
-
-  /** 多选框选择选项后，动态调整input框高度 */
   useEffect(function () {
-    if (wrapperRef.current) {
-      var _wrapperRef$current;
-      var height = ((_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.clientHeight) + 4;
-      setInputHeight(height <= 32 ? 32 : height + 32);
-    }
     if (popperInstRef.current && popperInstRef.current.update) {
       var _popperInstRef$curren;
       (_popperInstRef$curren = popperInstRef.current) === null || _popperInstRef$curren === void 0 || _popperInstRef$curren.update();
     }
-  }, [multiValue]);
+  }, [inputHeight]);
+
+  /** 多选框选择选项后，动态调整input框高度 */
+  // useLayoutEffect(() => {
+  //     if (wrapperRef.current) {
+  //         nextTick(() => {
+  //             updateStyle();
+  //         });
+  //     }
+  // }, [multiValue]);
+
+  useResizeObserver(wrapperRef, updateStyle);
   var refreshLazy = function refreshLazy() {
     var _popperInstRef$curren2;
     var isCover = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
@@ -543,19 +587,82 @@ var Cascader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [lazyLoad]);
+  useEffect(function () {
+    onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(visible);
+  }, [visible]);
   useImperativeHandle(ref, function () {
     return {
       ref: containerRef,
       input: inputRef,
+      presentText: getSelectedLabel(),
       setLabel: setLabel,
-      onClear: onClear,
+      clear: handleClear,
       resetNodes: function resetNodes() {
         _resetNodes();
         setLevel(0);
       },
-      setVisible: setVisible
+      getCheckedNodes: function getCheckedNodes() {
+        return _getCheckedNodes2();
+      },
+      togglePopperVisible: function togglePopperVisible(v) {
+        return setVisible(v);
+      }
     };
   });
+  var content = useMemo(function () {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames(b(_templateObject || (_templateObject = _taggedTemplateLiteral(["panel"]))), is({
+        bordered: panel
+      }))
+    }, filterable && /*#__PURE__*/React.createElement("div", {
+      className: e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["search"]))),
+      style: level === 0 && !searchText ? {
+        width: 180
+      } : {},
+      onClick: function onClick(event) {
+        return event.stopPropagation();
+      }
+    }, /*#__PURE__*/React.createElement(Input, {
+      ref: searchInstance,
+      placeholder: t('el.select.search', {
+        lng: locale
+      }),
+      clearable: true,
+      plain: true,
+      debounceInput: true,
+      onClear: onClearSearch,
+      onChange: onSearch,
+      prefix: /*#__PURE__*/React.createElement(Icon, {
+        prefix: "fal",
+        name: "search"
+      })
+    }), /*#__PURE__*/React.createElement(Divider, {
+      style: {
+        margin: 0
+      }
+    })), isNotEmpty(searchText) ? /*#__PURE__*/React.createElement(CascaderDropdown, {
+      options: filterList,
+      separator: separator,
+      value: value,
+      checkedNodes: checkedNodes,
+      onClearSearch: function onClearSearch() {
+        setSearchText('');
+        searchInstance.current.clear();
+      }
+    }) : /*#__PURE__*/React.createElement("div", {
+      className: e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["panels"])))
+    }, new Array(level + 1).fill(0).map(function (_, l) {
+      return /*#__PURE__*/React.createElement(CascaderMenu, {
+        key: getValueOfLevel(l) + '_' + l,
+        ref: function ref(_ref) {
+          return menuRefs.current[l] = _ref;
+        },
+        data: getOptions(l),
+        level: l,
+        value: getValueOfLevel(l)
+      });
+    })));
+  }, [b, checkedNodes, e, filterList, filterable, getOptions, getValueOfLevel, is, level, locale, onClearSearch, onSearch, panel, searchText, separator, t, value]);
   return /*#__PURE__*/React.createElement(CascaderContext.Provider, {
     value: {
       props: menuProps,
@@ -563,21 +670,49 @@ var Cascader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref)
       onCheckedChange: onCheckedChange,
       loading: loading,
       getDataType: getDataType,
-      searchText: searchText
+      searchText: searchText,
+      nodeFormatter: nodeFormatter,
+      suggestionItemFormatter: suggestionItemFormatter
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, panel ? content : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: classNames(b(), is({
       disabled: disabled
-    }), m(_defineProperty({}, size, size)), props.className),
+    }), m(size), props.className),
     style: props.style,
     ref: containerRef,
     onClick: function onClick(event) {
       return event.stopPropagation();
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: e(_templateObject || (_templateObject = _taggedTemplateLiteral(["trigger"])))
-  }, multiple && /*#__PURE__*/React.createElement("div", {
-    className: e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["tags"]))),
+  }, /*#__PURE__*/React.createElement(Input, _extends({
+    ref: inputRef,
+    value: multiple ? multiValue.join(separator) : label,
+    placeholder: placeholder,
+    readOnly: true,
+    hiddenValue: multiple,
+    clearable: clearable && !disabled,
+    disabled: disabled,
+    size: size,
+    onClick: onClick,
+    onClear: handleClear,
+    plain: props.plain,
+    className: is({
+      focus: visible
+    }),
+    innerStyle: multiple ? {
+      height: inputHeight
+    } : {},
+    suffix: /*#__PURE__*/React.createElement(Icon, {
+      prefix: "fal",
+      name: "angle-down",
+      className: visible ? 'fa-rotate-180' : '',
+      onClick: onClick
+    }),
+    prefix: props.prefix,
+    append: props.append,
+    prepend: props.prepend
+  }, omit(htmlInputProps, ['value', 'defaultValue', 'onInput', 'size', 'prefix', 'onChange', 'style', 'readOnly', 'disabled', 'className', 'type', 'maxLength', 'minLength', 'name', 'placeholder']))), multiple && /*#__PURE__*/React.createElement("div", {
+    ref: wrapperRef,
+    className: e(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["tags"]))),
     onClick: onClick,
     onMouseEnter: function onMouseEnter() {
       var _inputRef$current;
@@ -587,9 +722,6 @@ var Cascader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref)
       var _inputRef$current2;
       return (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.hideClear();
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(b(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["tags-wrapper"]))), 'has-prefix'),
-    ref: wrapperRef
   }, (collapseTags ? checkedNodes().slice(0, maxCollapseTags) : checkedNodes()).map(function (item, i) {
     return /*#__PURE__*/React.createElement(Tag, {
       key: i,
@@ -604,61 +736,39 @@ var Cascader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref)
       return node[labelKey];
     }).join(separator));
   }), collapseTags && ((_multiLabel = multiLabel()) === null || _multiLabel === void 0 ? void 0 : _multiLabel.length) > maxCollapseTags && /*#__PURE__*/React.createElement(Tooltip, {
-    popperClass: e(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["tooltip"]))),
+    popperClass: e(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["tooltip"]))),
     placement: "top",
     disabled: !collapseTagsTooltip,
-    content: /*#__PURE__*/React.createElement(React.Fragment, null, checkedNodes().slice(maxCollapseTags, checkedNodes().length).map(function (item, i) {
-      return /*#__PURE__*/React.createElement(Tag, {
+    content: /*#__PURE__*/React.createElement(Scrollbar, {
+      maxHeight: maxCollapseTagsTooltipHeight
+    }, /*#__PURE__*/React.createElement("div", {
+      className: e(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["collapse-tags"])))
+    }, checkedNodes().slice(maxCollapseTags, checkedNodes().length).map(function (item, i) {
+      return /*#__PURE__*/React.createElement("div", {
         key: i,
+        className: e(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["collapse-tag"])))
+      }, /*#__PURE__*/React.createElement(Tag, {
         type: "info",
+        className: "in-tooltip",
         disableTransitions: true
       }, item.map(function (node) {
         return node[labelKey];
-      }).join(separator));
-    })),
+      }).join(separator)));
+    }))),
     effect: "light",
     enterable: true
   }, /*#__PURE__*/React.createElement(Tag, {
     type: "info",
     onClick: onClick,
     disableTransitions: true
-  }, collapseTips ? collapseTips(multiLabel().length - maxCollapseTags, multiLabel().length) : "+ ".concat(multiLabel().length - maxCollapseTags))))), /*#__PURE__*/React.createElement(Input, _extends({
-    ref: inputRef,
-    value: multiple ? multiValue.join(separator) : label,
-    placeholder: placeholder,
-    readOnly: true,
-    hiddenValue: multiple,
-    clearable: clearable && !disabled,
-    disabled: disabled,
-    size: size,
-    onClick: onClick,
-    onClear: onClear,
-    plain: props.plain,
-    className: is({
-      focus: visible
-    }),
-    error: error,
-    warning: warning,
-    innerStyle: multiple ? {
-      height: inputHeight
-    } : {},
-    suffix: /*#__PURE__*/React.createElement(Icon, {
-      prefix: "fal",
-      name: "angle-down",
-      className: visible ? 'fa-rotate-180' : '',
-      onClick: onClick
-    }),
-    prefix: props.prefix,
-    append: props.append,
-    prepend: props.prepend
-  }, omit(htmlInputProps, ['value', 'defaultValue', 'onInput', 'size', 'prefix', 'onChange', 'style', 'readOnly', 'disabled', 'className', 'type', 'maxLength', 'minLength', 'name']))))), /*#__PURE__*/React.createElement(Popper, _extends({
+  }, collapseTips ? collapseTips(multiLabel().length - maxCollapseTags, multiLabel().length) : "+ ".concat(multiLabel().length - maxCollapseTags))))), /*#__PURE__*/React.createElement(Popper, _extends({
     referenceElement: function referenceElement() {
       var _inputRef$current3;
       return inputRef === null || inputRef === void 0 || (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.ref;
     },
     visible: visible,
     popperInstRef: popperInstRef,
-    popperClass: e(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["dropdown"])))
+    popperClass: classNames(e(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["dropdown"]))), is(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["pure"]))))
     // popperStyle={popperStyle}
     ,
     onDestroy: function onDestroy() {
@@ -676,55 +786,17 @@ var Cascader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref)
           item === null || item === void 0 || item.scrollToSelected();
         }
       }
+      if (filterable) {
+        // 打开后搜索框自动获取焦点
+        searchInstance.current.focus();
+      }
       _afterEnter === null || _afterEnter === void 0 || _afterEnter();
     },
     afterLeave: handleAfterLeave,
     placement: 'bottom-start',
     transitionAppear: true,
     unmountOnExit: true
-  }, transitionProps, popperProps), /*#__PURE__*/React.createElement("div", {
-    className: b(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["panel"])))
-  }, filterable && /*#__PURE__*/React.createElement("div", {
-    className: e(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["search"]))),
-    onClick: function onClick(event) {
-      return event.stopPropagation();
-    }
-  }, /*#__PURE__*/React.createElement(Input, {
-    ref: searchInstance,
-    placeholder: t('el.select.search', {
-      lng: locale
-    }),
-    clearable: true,
-    plain: true,
-    debounceInput: true,
-    onClear: onClearSearch,
-    onChange: onSearch,
-    prefix: /*#__PURE__*/React.createElement(Icon, {
-      prefix: "fal",
-      name: "search"
-    })
-  }), /*#__PURE__*/React.createElement(Divider, {
-    style: {
-      margin: 0
-    }
-  })), isNotEmpty(searchText) ? /*#__PURE__*/React.createElement(CascaderDropdown, {
-    options: filterList,
-    separator: separator,
-    value: value,
-    checkedNodes: checkedNodes
-  }) : /*#__PURE__*/React.createElement("div", {
-    className: e(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["panels"])))
-  }, new Array(level + 1).fill(0).map(function (_, l) {
-    return /*#__PURE__*/React.createElement(CascaderMenu, {
-      key: getValueOfLevel(l) + '_' + l,
-      ref: function ref(_ref) {
-        return menuRefs.current[l] = _ref;
-      },
-      data: getOptions(l),
-      level: l,
-      value: getValueOfLevel(l)
-    });
-  })))));
+  }, transitionProps, popperProps), content)));
 }));
-Cascader.displayName = 'Cascader';
+Cascader.displayName = 'ElCascader';
 export default Cascader;