rsuite 5.56.0 → 5.58.0

package/cjs/MultiCascader/MultiCascader.js

@@ -5,7 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
-var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -13,15 +13,15 @@ var _pick = _interopRequireDefault(require("lodash/pick"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
 var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
-var _TreeView = _interopRequireDefault(require("./TreeView"));
-var _Checkbox = _interopRequireDefault(require("../Checkbox"));
-var _utils = require("./utils");
 var _treeUtils = require("../utils/treeUtils");
-var _utils2 = require("../Cascader/utils");
-var _utils3 = require("../utils");
+var _utils = require("../CascadeTree/utils");
+var _utils2 = require("../utils");
 var _Picker = require("../internals/Picker");
-var _SearchBox = _interopRequireDefault(require("../internals/SearchBox"));
 var _propTypes2 = require("../internals/propTypes");
+var _hooks = require("../MultiCascadeTree/hooks");
+var _TreeView = _interopRequireDefault(require("../MultiCascadeTree/TreeView"));
+var _SearchView = _interopRequireDefault(require("../MultiCascadeTree/SearchView"));
+var _useActive2 = _interopRequireDefault(require("../Cascader/useActive"));
 var emptyArray = [];
 
 /**
@@ -32,23 +32,27 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var _selectedPaths;
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
-    _props$data = props.data,
-    data = _props$data === void 0 ? emptyArray : _props$data,
+    _props$appearance = props.appearance,
+    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,
     defaultValue = props.defaultValue,
-    valueProp = props.value,
-    _props$valueKey = props.valueKey,
-    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
-    _props$labelKey = props.labelKey,
-    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
+    columnHeight = props.columnHeight,
+    columnWidth = props.columnWidth,
     _props$childrenKey = props.childrenKey,
     childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,
+    _props$cleanable = props.cleanable,
+    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,
+    _props$data = props.data,
+    data = _props$data === void 0 ? emptyArray : _props$data,
     disabled = props.disabled,
     _props$disabledItemVa = props.disabledItemValues,
     disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,
-    _props$cleanable = props.cleanable,
-    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,
+    valueProp = props.value,
+    _props$valueKey = props.valueKey,
+    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
+    _props$labelKey = props.labelKey,
+    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
     overrideLocale = props.locale,
     toggleAs = props.toggleAs,
     style = props.style,
@@ -56,16 +60,11 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     countable = _props$countable === void 0 ? true : _props$countable,
     _props$cascade = props.cascade,
     cascade = _props$cascade === void 0 ? true : _props$cascade,
-    inline = props.inline,
     placeholder = props.placeholder,
     _props$placement = props.placement,
     placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
-    _props$appearance = props.appearance,
-    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
-    menuWidth = props.menuWidth,
-    menuHeight = props.menuHeight,
-    menuClassName = props.menuClassName,
-    menuStyle = props.menuStyle,
+    popupClassName = props.popupClassName,
+    popupStyle = props.popupStyle,
     _props$searchable = props.searchable,
     searchable = _props$searchable === void 0 ? true : _props$searchable,
     _props$uncheckableIte = props.uncheckableItemValues,
@@ -73,69 +72,93 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     id = props.id,
     getChildren = props.getChildren,
     renderValue = props.renderValue,
-    renderMenu = props.renderMenu,
-    renderMenuItem = props.renderMenuItem,
     renderExtraFooter = props.renderExtraFooter,
-    onEnter = props.onEnter,
-    onExit = props.onExit,
+    renderColumn = props.renderColumn,
+    renderTreeNode = props.renderTreeNode,
+    onEntered = props.onEntered,
     onExited = props.onExited,
     onClean = props.onClean,
     onSearch = props.onSearch,
     onSelect = props.onSelect,
     onChange = props.onChange,
-    onOpen = props.onOpen,
-    onClose = props.onClose,
     onCheck = props.onCheck,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "data", "classPrefix", "defaultValue", "value", "valueKey", "labelKey", "childrenKey", "disabled", "disabledItemValues", "cleanable", "locale", "toggleAs", "style", "countable", "cascade", "inline", "placeholder", "placement", "appearance", "menuWidth", "menuHeight", "menuClassName", "menuStyle", "searchable", "uncheckableItemValues", "id", "getChildren", "renderValue", "renderMenu", "renderMenuItem", "renderExtraFooter", "onEnter", "onExit", "onExited", "onClean", "onSearch", "onSelect", "onChange", "onOpen", "onClose", "onCheck"]);
-  var itemKeys = {
-    childrenKey: childrenKey,
-    labelKey: labelKey,
-    valueKey: valueKey
-  };
-  var _useState = (0, _react.useState)(false),
-    active = _useState[0],
-    setActive = _useState[1];
-  var _useFlattenData = (0, _utils.useFlattenData)(data, itemKeys),
-    flattenData = _useFlattenData.flattenData,
-    addFlattenData = _useFlattenData.addFlattenData;
-  var _useControlled = (0, _utils3.useControlled)(valueProp, defaultValue),
-    controlledValue = _useControlled[0];
-  var _useCascadeValue = (0, _utils.useCascadeValue)((0, _extends3.default)({}, itemKeys, {
-      uncheckableItemValues: uncheckableItemValues,
-      cascade: cascade,
-      value: controlledValue
-    }), flattenData),
-    value = _useCascadeValue.value,
-    setValue = _useCascadeValue.setValue,
-    splitValue = _useCascadeValue.splitValue; // The columns displayed in the cascading panel.
-  var _useColumnData = (0, _utils.useColumnData)(flattenData),
-    columnData = _useColumnData.columnData,
-    setColumnData = _useColumnData.setColumnData,
-    addColumn = _useColumnData.addColumn,
-    removeColumnByIndex = _useColumnData.removeColumnByIndex,
-    enforceUpdateColumnData = _useColumnData.enforceUpdateColumnData;
-  (0, _utils3.useUpdateEffect)(function () {
-    enforceUpdateColumnData(data);
-  }, [data]);
-
-  // The path after cascading data selection.
-  var _useState2 = (0, _react.useState)(),
-    selectedPaths = _useState2[0],
-    setSelectedPaths = _useState2[1];
+    DEPRECATED_menuClassName = props.menuClassName,
+    DEPRECATED_menuStyle = props.menuStyle,
+    DEPRECATED_menuWidth = props.menuWidth,
+    DEPRECATED_menuHeight = props.menuHeight,
+    DEPRECATED_renderMenu = props.renderMenu,
+    DEPRECATED_renderMenuItem = props.renderMenuItem,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "appearance", "classPrefix", "defaultValue", "columnHeight", "columnWidth", "childrenKey", "cleanable", "data", "disabled", "disabledItemValues", "value", "valueKey", "labelKey", "locale", "toggleAs", "style", "countable", "cascade", "placeholder", "placement", "popupClassName", "popupStyle", "searchable", "uncheckableItemValues", "id", "getChildren", "renderValue", "renderExtraFooter", "renderColumn", "renderTreeNode", "onEntered", "onExited", "onClean", "onSearch", "onSelect", "onChange", "onCheck", "menuClassName", "menuStyle", "menuWidth", "menuHeight", "renderMenu", "renderMenuItem"]);
   var _usePickerRef = (0, _Picker.usePickerRef)(ref),
     trigger = _usePickerRef.trigger,
     root = _usePickerRef.root,
     target = _usePickerRef.target,
     overlay = _usePickerRef.overlay,
     searchInput = _usePickerRef.searchInput;
-  var _useCustom = (0, _utils3.useCustom)('Picker', overrideLocale),
+  var _useCustom = (0, _utils2.useCustom)('Picker', overrideLocale),
     locale = _useCustom.locale,
     rtl = _useCustom.rtl;
+  var _useClassNames = (0, _utils2.useClassNames)(classPrefix),
+    prefix = _useClassNames.prefix,
+    merge = _useClassNames.merge;
+  var onSelectCallback = (0, _react.useCallback)(function (node, cascadePaths, event) {
+    var _trigger$current, _trigger$current$upda;
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, event);
+    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$upda = _trigger$current.updatePosition) === null || _trigger$current$upda === void 0 ? void 0 : _trigger$current$upda.call(_trigger$current);
+  }, [onSelect, trigger]);
+  var _useSelect = (0, _hooks.useSelect)({
+      data: data,
+      childrenKey: childrenKey,
+      labelKey: labelKey,
+      valueKey: valueKey,
+      onSelect: onSelectCallback,
+      getChildren: getChildren
+    }),
+    selectedPaths = _useSelect.selectedPaths,
+    flattenData = _useSelect.flattenData,
+    columnData = _useSelect.columnData,
+    setColumnData = _useSelect.setColumnData,
+    setSelectedPaths = _useSelect.setSelectedPaths,
+    handleSelect = _useSelect.handleSelect;
+  var _useControlled = (0, _utils2.useControlled)(valueProp, defaultValue),
+    controlledValue = _useControlled[0];
+  var itemKeys = {
+    childrenKey: childrenKey,
+    labelKey: labelKey,
+    valueKey: valueKey
+  };
+  var cascadeValueProps = (0, _extends2.default)({}, itemKeys, {
+    uncheckableItemValues: uncheckableItemValues,
+    cascade: cascade,
+    value: controlledValue,
+    onCheck: onCheck,
+    onChange: onChange
+  });
+  var _useCascadeValue = (0, _hooks.useCascadeValue)(cascadeValueProps, flattenData),
+    value = _useCascadeValue.value,
+    setValue = _useCascadeValue.setValue,
+    handleCheck = _useCascadeValue.handleCheck;
   var selectedItems = flattenData.filter(function (item) {
     return value.some(function (v) {
       return v === item[valueKey];
     });
   }) || [];
+  var onFocusItemCallback = (0, _react.useCallback)(function (value) {
+    var _getColumnsAndPaths = (0, _utils.getColumnsAndPaths)(data, flattenData.find(function (item) {
+        return item[valueKey] === value;
+      }), {
+        getParent: function getParent() {
+          return undefined;
+        },
+        getChildren: function getChildren(item) {
+          return item[childrenKey];
+        }
+      }),
+      columns = _getColumnsAndPaths.columns,
+      path = _getColumnsAndPaths.path;
+    setColumnData(columns);
+    setSelectedPaths(path);
+  }, [childrenKey, data, flattenData, setColumnData, setSelectedPaths, valueKey]);
 
   // Used to hover the focuse item  when trigger `onKeydown`
   var _useFocusItemValue = (0, _Picker.useFocusItemValue)(selectedPaths === null || selectedPaths === void 0 ? void 0 : (_selectedPaths = selectedPaths[selectedPaths.length - 1]) === null || _selectedPaths === void 0 ? void 0 : _selectedPaths[valueKey], {
@@ -146,99 +169,43 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       target: function target() {
         return overlay.current;
       },
-      callback: (0, _react.useCallback)(function (value) {
-        var _getColumnsAndPaths = (0, _utils2.getColumnsAndPaths)(data, flattenData.find(function (item) {
-            return item[valueKey] === value;
-          }), {
-            getParent: function getParent() {
-              return undefined;
-            },
-            getChildren: function getChildren(item) {
-              return item[childrenKey];
-            }
-          }),
-          columns = _getColumnsAndPaths.columns,
-          path = _getColumnsAndPaths.path;
-        setColumnData(columns);
-        setSelectedPaths(path);
-      }, [childrenKey, data, flattenData, setColumnData, valueKey])
+      callback: onFocusItemCallback
     }),
     focusItemValue = _useFocusItemValue.focusItemValue,
     setLayer = _useFocusItemValue.setLayer,
     setKeys = _useFocusItemValue.setKeys,
     onFocusItem = _useFocusItemValue.onKeyDown;
-  /**
-   * 1.Have a value and the value is valid.
-   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.
-   */
-  var hasValue = selectedItems.length > 0 || Number(valueProp === null || valueProp === void 0 ? void 0 : valueProp.length) > 0 && (0, _isFunction.default)(renderValue);
-  var _useClassNames = (0, _utils3.useClassNames)(classPrefix),
-    prefix = _useClassNames.prefix,
-    merge = _useClassNames.merge;
-  var _useState3 = (0, _react.useState)(''),
-    searchKeyword = _useState3[0],
-    setSearchKeyword = _useState3[1];
-  var handleEntered = (0, _utils3.useEventCallback)(function () {
-    onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-    setActive(true);
-  });
-  var handleExited = (0, _utils3.useEventCallback)(function () {
-    setActive(false);
-    setSearchKeyword('');
-  });
-  var handleSelect = (0, _utils3.useEventCallback)(function (node, cascadePaths, event) {
-    var _node$childrenKey, _node$childrenKey2, _trigger$current, _trigger$current$upda;
-    setSelectedPaths(cascadePaths);
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, event);
-    var columnIndex = cascadePaths.length;
-
-    // Lazy load node's children
-    if (typeof getChildren === 'function' && ((_node$childrenKey = node[childrenKey]) === null || _node$childrenKey === void 0 ? void 0 : _node$childrenKey.length) === 0) {
-      node.loading = true;
-      var children = getChildren(node);
-      if (children instanceof Promise) {
-        children.then(function (data) {
-          node.loading = false;
-          node[childrenKey] = data;
-          if (target.current || inline) {
-            addFlattenData(data, node);
-            addColumn(data, columnIndex);
-          }
-        });
-      } else {
-        node.loading = false;
-        node[childrenKey] = children;
-        addFlattenData(children, node);
-        addColumn(children, columnIndex);
-      }
-    } else if ((_node$childrenKey2 = node[childrenKey]) !== null && _node$childrenKey2 !== void 0 && _node$childrenKey2.length) {
-      addColumn(node[childrenKey], columnIndex);
-    } else {
-      // Removes subsequent columns of the current column when the clicked node is a leaf node.
-      removeColumnByIndex(columnIndex);
-    }
-    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$upda = _trigger$current.updatePosition) === null || _trigger$current$upda === void 0 ? void 0 : _trigger$current$upda.call(_trigger$current);
-  });
-  var handleCheck = (0, _utils3.useEventCallback)(function (node, event, checked) {
-    var nodeValue = node[valueKey];
-    var nextValue = [];
-    if (cascade) {
-      nextValue = splitValue(node, checked, value).value;
-    } else {
-      nextValue = [].concat(value);
-      if (checked) {
-        nextValue.push(nodeValue);
-      } else {
-        nextValue = nextValue.filter(function (n) {
-          return n !== nodeValue;
-        });
-      }
+  var onSearchCallback = function onSearchCallback(value, event) {
+    if (value) {
+      setLayer(0);
+    } else if (selectedPaths !== null && selectedPaths !== void 0 && selectedPaths.length) {
+      setLayer(selectedPaths.length - 1);
     }
-    setValue(nextValue);
-    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
-    onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextValue, node, checked, event);
-  });
-  var handleClean = (0, _utils3.useEventCallback)(function (event) {
+    setKeys([]);
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, event);
+  };
+  var _useSearch = (0, _hooks.useSearch)({
+      labelKey: labelKey,
+      valueKey: valueKey,
+      childrenKey: childrenKey,
+      flattenedData: flattenData,
+      uncheckableItemValues: uncheckableItemValues,
+      onSearch: onSearchCallback
+    }),
+    items = _useSearch.items,
+    searchKeyword = _useSearch.searchKeyword,
+    setSearchKeyword = _useSearch.setSearchKeyword,
+    handleSearch = _useSearch.handleSearch;
+  var _useActive = (0, _useActive2.default)({
+      onEntered: onEntered,
+      onExited: onExited,
+      target: target,
+      setSearchKeyword: setSearchKeyword
+    }),
+    active = _useActive.active,
+    handleEntered = _useActive.handleEntered,
+    handleExited = _useActive.handleExited;
+  var handleClean = (0, _utils2.useEventCallback)(function (event) {
     if (disabled || !target.current) {
       return;
     }
@@ -247,7 +214,7 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     setColumnData([data]);
     onChange === null || onChange === void 0 ? void 0 : onChange([], event);
   });
-  var handleMenuPressEnter = (0, _utils3.useEventCallback)(function (event) {
+  var handleMenuPressEnter = (0, _utils2.useEventCallback)(function (event) {
     var _overlay$current;
     var focusItem = (0, _treeUtils.findNodeOfTree)(data, function (item) {
       return item[valueKey] === focusItemValue;
@@ -257,7 +224,7 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       handleCheck(focusItem, event, (checkbox === null || checkbox === void 0 ? void 0 : checkbox.getAttribute('aria-checked')) !== 'true');
     }
   });
-  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends3.default)({
+  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({
     toggle: !focusItemValue || !active,
     trigger: trigger,
     target: target,
@@ -268,152 +235,67 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     onMenuKeyDown: onFocusItem,
     onMenuPressEnter: handleMenuPressEnter
   }, rest));
-  var handleSearch = (0, _utils3.useEventCallback)(function (value, event) {
-    setSearchKeyword(value);
-    onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, event);
-    if (value) {
-      setLayer(0);
-    } else if (selectedPaths !== null && selectedPaths !== void 0 && selectedPaths.length) {
-      setLayer(selectedPaths.length - 1);
-    }
-    setKeys([]);
-  });
-  var getSearchResult = function getSearchResult() {
-    var items = [];
-    var result = flattenData.filter(function (item) {
-      if (uncheckableItemValues.some(function (value) {
-        return item[valueKey] === value;
-      })) {
-        return false;
-      }
-      if (item[labelKey].match(new RegExp((0, _utils3.getSafeRegExpString)(searchKeyword), 'i'))) {
-        return true;
-      }
-      return false;
-    });
-    for (var i = 0; i < result.length; i++) {
-      items.push(result[i]);
-
-      // A maximum of 100 search results are returned.
-      if (i === 99) {
-        return items;
-      }
-    }
-    return items;
-  };
-  var renderSearchRow = function renderSearchRow(item, key) {
-    var _extends2;
-    var nodes = (0, _treeUtils.getNodeParents)(item);
-    var regx = new RegExp((0, _utils3.getSafeRegExpString)(searchKeyword), 'ig');
-    var labelElements = [];
-    var a = item[labelKey].split(regx);
-    var b = item[labelKey].match(regx);
-    for (var i = 0; i < a.length; i++) {
-      labelElements.push(a[i]);
-      if (b[i]) {
-        labelElements.push( /*#__PURE__*/_react.default.createElement("span", {
-          key: i,
-          className: prefix('cascader-search-match')
-        }, b[i]));
-      }
+  var renderCascadeColumn = function renderCascadeColumn(childNodes, column) {
+    var items = column.items,
+      parentItem = column.parentItem,
+      layer = column.layer;
+    if (typeof renderColumn === 'function') {
+      return renderColumn(childNodes, column);
+    } else if (typeof DEPRECATED_renderMenu === 'function') {
+      return DEPRECATED_renderMenu(items, childNodes, parentItem, layer);
     }
-    nodes.push((0, _extends3.default)({}, item, (_extends2 = {}, _extends2[labelKey] = labelElements, _extends2)));
-    var active = value.some(function (value) {
-      if (cascade) {
-        return nodes.some(function (node) {
-          return node[valueKey] === value;
-        });
-      }
-      return item[valueKey] === value;
-    });
-    var disabled = disabledItemValues.some(function (value) {
-      return nodes.some(function (node) {
-        return node[valueKey] === value;
-      });
-    });
-    var itemClasses = prefix('cascader-row', {
-      'cascader-row-disabled': disabled,
-      'cascader-row-focus': item[valueKey] === focusItemValue
-    });
-    return /*#__PURE__*/_react.default.createElement("div", {
-      role: "treeitem",
-      "aria-disabled": disabled,
-      key: key,
-      className: itemClasses,
-      "data-key": item[valueKey]
-    }, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
-      disabled: disabled,
-      checked: active,
-      value: item[valueKey],
-      indeterminate: cascade && !active && (0, _utils.isSomeChildChecked)(item, value, {
-        valueKey: valueKey,
-        childrenKey: childrenKey
-      }),
-      onChange: function onChange(_value, checked, event) {
-        handleCheck(item, event, checked);
-      }
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: prefix('cascader-cols')
-    }, nodes.map(function (node, index) {
-      return /*#__PURE__*/_react.default.createElement("span", {
-        key: "col-" + index,
-        className: prefix('cascader-col')
-      }, node[labelKey]);
-    }))));
+    return childNodes;
   };
-  var renderSearchResultPanel = function renderSearchResultPanel() {
-    if (searchKeyword === '') {
-      return null;
+  var renderCascadeTreeNode = function renderCascadeTreeNode(node, itemData) {
+    var render = typeof renderTreeNode === 'function' ? renderTreeNode : DEPRECATED_renderMenuItem;
+    if (typeof render === 'function') {
+      return render(node, itemData);
     }
-    var items = getSearchResult();
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: prefix('cascader-search-panel'),
-      "data-layer": 0,
-      role: "tree"
-    }, items.length ? items.map(renderSearchRow) : /*#__PURE__*/_react.default.createElement("div", {
-      className: prefix('none')
-    }, locale.noResultsText));
+    return node;
   };
   var renderTreeView = function renderTreeView(positionProps, speakerRef) {
     var _ref = positionProps || {},
       left = _ref.left,
       top = _ref.top,
       className = _ref.className;
-    var styles = (0, _extends3.default)({}, menuStyle, {
+    var styles = (0, _extends2.default)({}, DEPRECATED_menuStyle, popupStyle, {
       left: left,
       top: top
     });
-    var classes = merge(className, menuClassName, prefix('cascader-menu', 'multi-cascader-menu', {
-      inline: inline
-    }));
+    var classes = merge(className, DEPRECATED_menuClassName, popupClassName, prefix('popup-multi-cascader'));
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {
-      ref: (0, _utils3.mergeRefs)(overlay, speakerRef),
+      ref: (0, _utils2.mergeRefs)(overlay, speakerRef),
       className: classes,
       style: styles,
       target: trigger,
       onKeyDown: onPickerKeyDown
-    }, searchable && /*#__PURE__*/_react.default.createElement(_SearchBox.default, {
-      placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,
-      onChange: handleSearch,
-      value: searchKeyword,
-      inputRef: searchInput
-    }), renderSearchResultPanel(), searchKeyword === '' && /*#__PURE__*/_react.default.createElement(_TreeView.default, {
+    }, searchable && /*#__PURE__*/_react.default.createElement(_SearchView.default, {
+      data: items,
+      value: value,
+      searchKeyword: searchKeyword,
+      valueKey: valueKey,
+      labelKey: labelKey,
+      childrenKey: childrenKey,
+      disabledItemValues: disabledItemValues,
+      onCheck: handleCheck,
+      onSearch: handleSearch
+    }), !searchKeyword && /*#__PURE__*/_react.default.createElement(_TreeView.default, {
       cascade: cascade,
-      menuWidth: menuWidth,
-      menuHeight: menuHeight,
+      columnWidth: columnWidth !== null && columnWidth !== void 0 ? columnWidth : DEPRECATED_menuWidth,
+      columnHeight: columnHeight !== null && columnHeight !== void 0 ? columnHeight : DEPRECATED_menuHeight,
+      classPrefix: "cascade-tree",
       uncheckableItemValues: uncheckableItemValues,
       disabledItemValues: disabledItemValues,
       valueKey: valueKey,
       labelKey: labelKey,
       childrenKey: childrenKey,
-      classPrefix: 'picker-cascader-menu',
       cascadeData: columnData,
       cascadePaths: selectedPaths,
       value: value,
       onSelect: handleSelect,
       onCheck: handleCheck,
-      renderMenu: renderMenu,
-      renderMenuItem: renderMenuItem
+      renderColumn: renderCascadeColumn,
+      renderTreeNode: renderCascadeTreeNode
     }), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
   };
   var selectedElement = placeholder;
@@ -429,6 +311,12 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       locale: locale
     });
   }
+
+  /**
+   * 1.Have a value and the value is valid.
+   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.
+   */
+  var hasValue = selectedItems.length > 0 || Number(valueProp === null || valueProp === void 0 ? void 0 : valueProp.length) > 0 && (0, _isFunction.default)(renderValue);
   if (hasValue && (0, _isFunction.default)(renderValue)) {
     selectedElement = renderValue(value.length ? value : valueProp !== null && valueProp !== void 0 ? valueProp : [], selectedItems, selectedElement);
     // If renderValue returns null or undefined, hasValue is false.
@@ -436,7 +324,7 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       hasValue = false;
     }
   }
-  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends3.default)({}, props, {
+  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {
       classPrefix: classPrefix,
       hasValue: hasValue,
       countable: countable,
@@ -446,9 +334,6 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     })),
     classes = _usePickerClassName[0],
     usedClassNamePropKeys = _usePickerClassName[1];
-  if (inline) {
-    return renderTreeView();
-  }
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
     id: id,
     popupType: "tree",
@@ -456,20 +341,19 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
     ref: trigger,
     placement: placement,
-    onEnter: (0, _utils3.createChainedFunction)(handleEntered, onEnter),
-    onExited: (0, _utils3.createChainedFunction)(handleExited, onExited),
-    onExit: (0, _utils3.createChainedFunction)(onClose, onExit),
+    onEnter: handleEntered,
+    onExited: handleExited,
     speaker: renderTreeView
   }, /*#__PURE__*/_react.default.createElement(Component, {
     className: classes,
     style: style,
     ref: root
-  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends3.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {
+  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {
     as: toggleAs,
     appearance: appearance,
     disabled: disabled,
     ref: target,
-    onClean: (0, _utils3.createChainedFunction)(handleClean, onClean),
+    onClean: (0, _utils2.createChainedFunction)(handleClean, onClean),
     onKeyDown: onPickerKeyDown,
     cleanable: cleanable && !disabled,
     hasValue: hasValue,
@@ -479,23 +363,23 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   }), selectedElement || locale.placeholder)));
 });
 MultiCascader.displayName = 'MultiCascader';
-MultiCascader.propTypes = (0, _extends3.default)({}, _Picker.listPickerPropTypes, {
+MultiCascader.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {
   value: _propTypes.default.array,
   disabledItemValues: _propTypes.default.array,
   locale: _propTypes.default.any,
   appearance: (0, _propTypes2.oneOf)(['default', 'subtle']),
   cascade: _propTypes.default.bool,
-  inline: _propTypes.default.bool,
   countable: _propTypes.default.bool,
-  menuWidth: _propTypes.default.number,
-  menuHeight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   uncheckableItemValues: _propTypes.default.array,
   searchable: _propTypes.default.bool,
-  renderMenuItem: _propTypes.default.func,
-  renderMenu: _propTypes.default.func,
   onSearch: _propTypes.default.func,
   onSelect: _propTypes.default.func,
-  onCheck: _propTypes.default.func
+  onCheck: _propTypes.default.func,
+  inline: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.bool, 'Use `<MultiCascadeTree>` instead.'),
+  renderMenu: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.func, 'Use "renderColumn" property instead.'),
+  renderMenuItem: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.func, 'Use "renderTreeNode" property instead.'),
+  menuWidth: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.number, 'Use "columnWidth" property instead.'),
+  menuHeight: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.number, 'Use "columnHeight" property instead.')
 });
 var _default = MultiCascader;
 exports.default = _default;

package/cjs/Panel/Panel.js

@@ -13,6 +13,7 @@ var _get = _interopRequireDefault(require("lodash/get"));
 var _Collapse = _interopRequireDefault(require("../Animation/Collapse"));
 var _utils = require("../utils");
 var _PanelGroup = require("../PanelGroup");
+var _Heading = _interopRequireDefault(require("../Heading"));
 var _AccordionButton = _interopRequireDefault(require("./AccordionButton"));
 /**
  * The `Panel` component is used to display content that can be collapsed.
@@ -126,7 +127,8 @@ var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         className: _className
       });
     }
-    return /*#__PURE__*/_react.default.createElement("h2", {
+    return /*#__PURE__*/_react.default.createElement(_Heading.default, {
+      level: 2,
       className: prefix('header')
     }, collapsible ? /*#__PURE__*/_react.default.createElement(_AccordionButton.default, {
       id: btnId,