rsuite 5.19.0 → 5.19.1

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## [5.19.1](https://github.com/rsuite/rsuite/compare/v5.19.0...v5.19.1) (2022-10-13)
+
+### Bug Fixes
+
+- **Cascader,MultiCascader:** fix sub-columns not being removed when a leaf node is selected ([#2792](https://github.com/rsuite/rsuite/issues/2792)) ([619c7de](https://github.com/rsuite/rsuite/commit/619c7debfca63a58622a1ae4a4776544bebf3405))
+- **CheckTreePicker:** fix children node can't uncheck when setting virtualized ([#2782](https://github.com/rsuite/rsuite/issues/2782)) ([#2783](https://github.com/rsuite/rsuite/issues/2783)) ([50f7b89](https://github.com/rsuite/rsuite/commit/50f7b89dbe1a2b59c212e021e1bc42c50e9ebb37))
+- **DateRangePicker:** fix predefined range affecting calendar height ([#2794](https://github.com/rsuite/rsuite/issues/2794)) ([957ce4e](https://github.com/rsuite/rsuite/commit/957ce4e197355ecbb9a0aea6cb6c5906ab1e1a2a))
+- **TreePicker, CheckTreePicker:** ignore backspace when setting cleanable=false or disabled=true ([#2798](https://github.com/rsuite/rsuite/issues/2798)) ([eefe0eb](https://github.com/rsuite/rsuite/commit/eefe0ebc396ee1764243a1e2c8ec432dc6ce39a5))
+- **TreePicker,CheckTreePicker:** fix `renderExtraFooter` causing the … ([#2745](https://github.com/rsuite/rsuite/issues/2745)) ([d7279d1](https://github.com/rsuite/rsuite/commit/d7279d14877e4b3b0ac74abdfeb56836b3a07780)), closes [#2758](https://github.com/rsuite/rsuite/issues/2758)
+- **TreePicker,CheckTreePicker:** fix value being cleared internally when value is controlled ([#2788](https://github.com/rsuite/rsuite/issues/2788)) ([4521a27](https://github.com/rsuite/rsuite/commit/4521a2730a7311b7fe095d85e39966a1d56f5d9d)), closes [#2784](https://github.com/rsuite/rsuite/issues/2784)
+
+### Features
+
+- **i18n:** add fr_FR locale ([#2735](https://github.com/rsuite/rsuite/issues/2735)) ([087cfc8](https://github.com/rsuite/rsuite/commit/087cfc885252d764864e075b086f5d980f94db94))
+
+### Performance Improvements
+
+- **CheckTreePicker:** improve performance when using large data ([#2767](https://github.com/rsuite/rsuite/issues/2767)) ([651a8a1](https://github.com/rsuite/rsuite/commit/651a8a1ebb0bf1c1e07e1541ca1f0a61a96a3df4))
+
 # [5.19.0](https://github.com/rsuite/rsuite/compare/v5.18.1...v5.19.0) (2022-09-23)
 
 ### Bug Fixes

package/cjs/Animation/Transition.d.ts

@@ -36,7 +36,7 @@ interface TransitionState {
 }
 export declare const transitionPropTypes: {
     animation: PropTypes.Requireable<boolean>;
-    children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+    children: PropTypes.Requireable<string | number | boolean | ((...args: any[]) => any) | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
     className: PropTypes.Requireable<string>;
     in: PropTypes.Requireable<boolean>;
     unmountOnExit: PropTypes.Requireable<boolean>;
@@ -59,7 +59,7 @@ declare type EventToken = {
 declare class Transition extends React.Component<TransitionProps, TransitionState> {
     static propTypes: {
         animation: PropTypes.Requireable<boolean>;
-        children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        children: PropTypes.Requireable<string | number | boolean | ((...args: any[]) => any) | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
         className: PropTypes.Requireable<string>;
         in: PropTypes.Requireable<boolean>;
         unmountOnExit: PropTypes.Requireable<boolean>;

package/cjs/Cascader/Cascader.js

@@ -117,6 +117,7 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       valueToPaths = _usePaths.valueToPaths,
       columnData = _usePaths.columnData,
       addColumn = _usePaths.addColumn,
+      romoveColumnByIndex = _usePaths.romoveColumnByIndex,
       setValueToPaths = _usePaths.setValueToPaths,
       setColumnData = _usePaths.setColumnData,
       setSelectedPaths = _usePaths.setSelectedPaths,
@@ -280,9 +281,10 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var handleSelect = function handleSelect(node, cascadePaths, isLeafNode, event) {
     var _node$childrenKey, _node$childrenKey2, _triggerRef$current2;
 
-    var nextValue = node[valueKey];
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, event);
-    setSelectedPaths(cascadePaths); // Lazy load node's children
+    setSelectedPaths(cascadePaths);
+    var nextValue = node[valueKey];
+    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;
@@ -294,16 +296,19 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
           node[childrenKey] = data;
 
           if (targetRef.current) {
-            addColumn(data, cascadePaths.length);
+            addColumn(data, columnIndex);
           }
         });
       } else {
         node.loading = false;
         node[childrenKey] = children;
-        addColumn(children, cascadePaths.length);
+        addColumn(children, columnIndex);
       }
     } else if ((_node$childrenKey2 = node[childrenKey]) !== null && _node$childrenKey2 !== void 0 && _node$childrenKey2.length) {
-      addColumn(node[childrenKey], cascadePaths.length);
+      addColumn(node[childrenKey], columnIndex);
+    } else {
+      // Removes subsequent columns of the current column when the clicked node is a leaf node.
+      romoveColumnByIndex(columnIndex);
     }
 
     if (isLeafNode) {

package/cjs/Cascader/utils.d.ts

@@ -14,4 +14,5 @@ export declare function usePaths(props: CascaderProps): {
     setColumnData: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[][]>>;
     setSelectedPaths: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[]>>;
     addColumn: (column: ItemDataType[], index: number) => void;
+    romoveColumnByIndex: (index: number) => void;
 };

package/cjs/Cascader/utils.js

@@ -125,6 +125,15 @@ function usePaths(props) {
   function addColumn(column, index) {
     setColumnData([].concat((0, _slice.default)(columnData, 0, index), [column]));
   }
+  /**
+   * Remove subsequent columns of the specified column
+   * @param index
+   */
+
+
+  function romoveColumnByIndex(index) {
+    setColumnData([].concat((0, _slice.default)(columnData, 0, index)));
+  }
   /**
    * Enforce update of columns and paths.
    * @param nextValue  Selected value
@@ -160,6 +169,7 @@ function usePaths(props) {
     setValueToPaths: setValueToPaths,
     setColumnData: setColumnData,
     setSelectedPaths: setSelectedPaths,
-    addColumn: addColumn
+    addColumn: addColumn,
+    romoveColumnByIndex: romoveColumnByIndex
   };
 }

package/cjs/CheckTreePicker/CheckTreePicker.js

@@ -43,8 +43,6 @@ var _Picker = require("../Picker");
 
 var _utils2 = require("./utils");
 
-var _TreePicker = require("../TreePicker/TreePicker");
-
 var emptyArray = [];
 
 var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
@@ -88,6 +86,8 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       defaultExpandItemValues = _props$defaultExpandI === void 0 ? emptyArray : _props$defaultExpandI,
       _props$height = props.height,
       height = _props$height === void 0 ? 360 : _props$height,
+      _props$menuMaxHeight = props.menuMaxHeight,
+      menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,
       menuStyle = props.menuStyle,
       _props$searchable = props.searchable,
       searchable = _props$searchable === void 0 ? true : _props$searchable,
@@ -119,7 +119,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       renderValue = props.renderValue,
       renderTreeIcon = props.renderTreeIcon,
       renderTreeNode = props.renderTreeNode,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "data", "style", "appearance", "cleanable", "countable", "searchBy", "toggleAs", "searchKeyword", "showIndentLine", "locale", "cascade", "disabled", "valueKey", "labelKey", "placement", "childrenKey", "placeholder", "value", "defaultValue", "defaultExpandAll", "disabledItemValues", "expandItemValues", "defaultExpandItemValues", "height", "menuStyle", "searchable", "virtualized", "className", "classPrefix", "menuClassName", "menuAutoWidth", "uncheckableItemValues", "id", "listProps", "renderMenu", "getChildren", "renderExtraFooter", "onEntered", "onChange", "onClean", "onClose", "onExited", "onSearch", "onSelect", "onOpen", "onScroll", "onExpand", "renderValue", "renderTreeIcon", "renderTreeNode"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "data", "style", "appearance", "cleanable", "countable", "searchBy", "toggleAs", "searchKeyword", "showIndentLine", "locale", "cascade", "disabled", "valueKey", "labelKey", "placement", "childrenKey", "placeholder", "value", "defaultValue", "defaultExpandAll", "disabledItemValues", "expandItemValues", "defaultExpandItemValues", "height", "menuMaxHeight", "menuStyle", "searchable", "virtualized", "className", "classPrefix", "menuClassName", "menuAutoWidth", "uncheckableItemValues", "id", "listProps", "renderMenu", "getChildren", "renderExtraFooter", "onEntered", "onChange", "onClean", "onClose", "onExited", "onSearch", "onSelect", "onOpen", "onScroll", "onExpand", "renderValue", "renderTreeIcon", "renderTreeNode"]);
 
   var _useContext = (0, _react.useContext)(_TreeContext.default),
       inline = _useContext.inline;
@@ -249,11 +249,11 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       value: node[valueKey],
       label: node[labelKey],
       layer: layer,
-      focus: (0, _utils.shallowEqual)(focusItemValue, node[valueKey]),
+      focus: focusItemValue === node[valueKey],
       expand: node.expand,
       visible: node.visible,
       loading: loadingNodeValues.some(function (item) {
-        return (0, _utils.shallowEqual)(item, node[valueKey]);
+        return item === node[valueKey];
       }),
       disabled: (0, _utils2.getDisabledState)(flattenNodes, node, {
         disabledItemValues: disabledItemValues,
@@ -390,18 +390,6 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     onChange === null || onChange === void 0 ? void 0 : onChange(selectedValues, event);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, selectedValues, event);
   }, [cascade, valueKey, flattenNodes, isControlled, uncheckableItemValues, setValue, onChange, onSelect, toggleChecked, unSerializeList]);
-
-  var hasValue = function hasValue() {
-    var selectedValues = Object.keys(flattenNodes).map(function (refKey) {
-      return flattenNodes[refKey][valueKey];
-    }).filter(function (item) {
-      return value.some(function (v) {
-        return (0, _utils.shallowEqual)(v, item);
-      });
-    });
-    return !!selectedValues.length;
-  };
-
   var handleOpen = (0, _react.useCallback)(function () {
     var _triggerRef$current, _triggerRef$current$o;
 
@@ -453,22 +441,26 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
   var handleClean = (0, _react.useCallback)(function (event) {
     var target = event.target; // exclude searchBar
 
-    if (target.matches('div[role="searchbox"] > input')) {
+    if (target.matches('div[role="searchbox"] > input') || disabled || !cleanable) {
       return;
     }
 
     setActiveNode(null);
-    setValue([]);
     setFocusItemValue(null);
-    unSerializeList({
-      nodes: flattenNodes,
-      key: 'check',
-      value: [],
-      cascade: cascade,
-      uncheckableItemValues: uncheckableItemValues
-    });
+
+    if (!isControlled) {
+      setValue([]);
+      unSerializeList({
+        nodes: flattenNodes,
+        key: 'check',
+        value: [],
+        cascade: cascade,
+        uncheckableItemValues: uncheckableItemValues
+      });
+    }
+
     onChange === null || onChange === void 0 ? void 0 : onChange([], event);
-  }, [cascade, flattenNodes, onChange, setValue, unSerializeList, uncheckableItemValues]);
+  }, [cascade, cleanable, disabled, flattenNodes, onChange, setValue, unSerializeList, uncheckableItemValues, isControlled]);
   var handleFocusItem = (0, _react.useCallback)(function (key) {
     var focusableItems = (0, _treeUtils.getFocusableItems)(filteredData, {
       disabledItemValues: disabledItemValues,
@@ -593,7 +585,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var visibleChildren = (0, _isUndefined2.default)(searchKeywordState) || searchKeywordState.length === 0 ? !!children : (0, _treeUtils.hasVisibleChildren)(node, childrenKey);
     var nodeProps = (0, _extends2.default)({}, getTreeNodeProps((0, _extends2.default)({}, node, {
       /**
-       * spread operator dont copy unenumerable properties
+       * spread operator don't copy unenumerable properties
        * so we need to copy them manually
        */
       parent: node.parent,
@@ -645,6 +637,11 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
           visible = node.visible;
       var expand = (0, _treeUtils.getExpandWhenSearching)(searchKeywordState, expandItemValues.includes(node[valueKey]));
       var nodeProps = (0, _extends2.default)({}, getTreeNodeProps((0, _extends2.default)({}, node, {
+        /**
+         * spread operator don't copy unenumerable properties
+         * so we need to copy them manually
+         */
+        parent: node.parent,
         expand: expand
       }), layer), {
         hasChildren: node.hasChildren
@@ -689,7 +686,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: treeNodesClass
     }, virtualized ? /*#__PURE__*/_react.default.createElement(_VirtualizedList.AutoSizer, {
-      defaultHeight: inline ? height : _TreePicker.maxTreeHeight,
+      defaultHeight: inline ? height : menuMaxHeight,
       style: {
         width: 'auto',
         height: 'auto'
@@ -718,13 +715,10 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       left: left,
       top: top
     });
-    var styles = virtualized ? (0, _extends2.default)({
-      height: height
-    }, mergedMenuStyle) : (0, _extends2.default)({}, mergedMenuStyle);
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
       autoWidth: menuAutoWidth,
       className: classes,
-      style: styles,
+      style: mergedMenuStyle,
       ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),
       onKeyDown: onPickerKeydown,
       target: triggerRef
@@ -735,15 +729,17 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       inputRef: searchInputRef
     }) : null, renderMenu ? renderMenu(renderCheckTree()) : renderCheckTree(), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
   };
+
+  var selectedItems = (0, _react.useMemo)(function () {
+    return (0, _utils2.getSelectedItems)(flattenNodes, value);
+  }, [flattenNodes, value]);
   /**
    * 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 hasValidValue = hasValue() || value.length > 0 && (0, _isFunction2.default)(renderValue);
+  var hasValidValue = selectedItems.length > 0 || value.length > 0 && (0, _isFunction2.default)(renderValue);
   var selectedElement = placeholder;
-  var selectedItems = (0, _utils2.getSelectedItems)(flattenNodes, value, valueKey);
 
   if (hasValidValue) {
     selectedElement = /*#__PURE__*/_react.default.createElement(_Picker.SelectedElement, {

package/cjs/CheckTreePicker/utils.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CheckTreePickerProps } from './CheckTreePicker';
+import { CheckTreePickerProps, ValueType } from './CheckTreePicker';
 import { CheckStateType } from '../utils';
 export interface TreeNodeType {
     uncheckable?: boolean;
@@ -40,5 +40,5 @@ export declare function isNodeUncheckable(node: any, props: Required<Pick<CheckT
 export declare function getFormattedTree(data: any[], nodes: TreeNodesType, props: Required<Pick<CheckTreePickerProps, 'childrenKey' | 'cascade'>>): any[];
 export declare function getDisabledState(nodes: TreeNodesType, node: TreeNodeType, props: Required<Pick<CheckTreePickerProps, 'disabledItemValues' | 'valueKey'>>): boolean;
 export declare function getCheckTreePickerDefaultValue(value: any[], uncheckableItemValues: any[]): any[];
-export declare function getSelectedItems(nodes: TreeNodesType, value: (string | number)[], valueKey: string): TreeNodeType[];
+export declare function getSelectedItems(nodes: TreeNodesType, values: ValueType): TreeNodeType[];
 export declare function getNodeCheckState({ nodes, node, cascade, childrenKey }: any): CheckStateType;

package/cjs/CheckTreePicker/utils.js

@@ -126,7 +126,7 @@ function isNodeUncheckable(node, props) {
       uncheckableItemValues = _props$uncheckableIte === void 0 ? [] : _props$uncheckableIte,
       valueKey = props.valueKey;
   return uncheckableItemValues.some(function (value) {
-    return (0, _utils.shallowEqual)(node[valueKey], value);
+    return node[valueKey] === value;
   });
 }
 
@@ -171,7 +171,7 @@ function getDisabledState(nodes, node, props) {
   }
 
   return disabledItemValues.some(function (value) {
-    return node.refKey && (0, _utils.shallowEqual)(nodes[node.refKey][valueKey], value);
+    return node.refKey && nodes[node.refKey][valueKey] === value;
   });
 }
 
@@ -185,18 +185,17 @@ function getCheckTreePickerDefaultValue(value, uncheckableItemValues) {
   return [];
 }
 
-function getSelectedItems(nodes, value, valueKey) {
-  var checkItems = [];
-  Object.keys(nodes).map(function (refKey) {
+function getSelectedItems(nodes, values) {
+  var checkedItems = [];
+  values.forEach(function (value) {
+    var refKey = (0, _treeUtils.getNodeFormattedRefKey)(value);
     var node = nodes[refKey];
 
-    if (value.some(function (value) {
-      return (0, _utils.shallowEqual)(node[valueKey], value);
-    })) {
-      checkItems.push(node);
+    if (!(0, _isNil2.default)(node)) {
+      checkedItems.push(node);
     }
   });
-  return checkItems;
+  return checkedItems;
 }
 
 function getNodeCheckState(_ref) {

package/cjs/DOMHelper/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="node" />
 import * as helpers from 'dom-lib';
 export * from 'dom-lib';
 declare const DOMHelper: {
@@ -10,8 +11,8 @@ declare const DOMHelper: {
     removeClass: (target: Element, className: string) => Element;
     hasClass: (target: Element, className: string) => boolean;
     toggleClass: (target: Element, className: string) => Element;
-    cancelAnimationFramePolyfill: typeof clearTimeout;
-    requestAnimationFramePolyfill: typeof requestAnimationFrame;
+    cancelAnimationFramePolyfill: typeof cancelAnimationFrame | typeof clearTimeout;
+    requestAnimationFramePolyfill: typeof requestAnimationFrame | ((callback: (t: number) => void) => NodeJS.Timeout);
     getAnimationEnd: typeof helpers.getAnimationEnd;
     ownerDocument: (node: Element | null) => Document;
     ownerWindow: (componentOrElement: Element) => Window;

package/cjs/DatePicker/PredefinedRanges.js

@@ -45,6 +45,11 @@ var PredefinedRanges = /*#__PURE__*/_react.default.forwardRef(function (props, r
       return item.label === key;
     });
   }, [calendarDate]);
+
+  if (ranges.length === 0) {
+    return null;
+  }
+
   return /*#__PURE__*/_react.default.createElement(_Stack.default, (0, _extends2.default)({
     className: className,
     ref: ref,

package/cjs/DateRangePicker/DateRangePicker.js

@@ -601,6 +601,12 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       onToggleMeridian: handleToggleMeridian,
       renderTitle: renderTitle
     };
+    var sideRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
+      return (range === null || range === void 0 ? void 0 : range.placement) === 'left';
+    })) || [];
+    var bottomRanges = ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
+      return (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined;
+    });
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
       role: "dialog",
       className: classes,
@@ -611,13 +617,11 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       className: panelClasses
     }, /*#__PURE__*/_react.default.createElement(_Stack.default, {
       alignItems: "flex-start"
-    }, /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {
+    }, sideRanges.length > 0 && /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {
       direction: "column",
       spacing: 0,
       className: prefix('daterange-predefined'),
-      ranges: (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
-        return (range === null || range === void 0 ? void 0 : range.placement) === 'left';
-      })) || [],
+      ranges: sideRanges,
       calendarDate: calendarDate,
       locale: locale,
       disabledShortcut: disabledShortcutButton,
@@ -640,9 +644,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       hideOkBtn: oneTap,
       onOk: handleOK,
       onClickShortcut: handleShortcutPageDate,
-      ranges: ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
-        return (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined;
-      })
+      ranges: bottomRanges
     })))));
   };
 

package/cjs/MultiCascader/MultiCascader.js

@@ -127,6 +127,7 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       columnData = _useColumnData.columnData,
       setColumnData = _useColumnData.setColumnData,
       addColumn = _useColumnData.addColumn,
+      romoveColumnByIndex = _useColumnData.romoveColumnByIndex,
       enforceUpdateColumnData = _useColumnData.enforceUpdateColumnData;
 
   (0, _utils3.useUpdateEffect)(function () {
@@ -210,7 +211,8 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     var _node$childrenKey, _node$childrenKey2, _triggerRef$current, _triggerRef$current$u;
 
     setSelectedPaths(cascadePaths);
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, event); // Lazy load node's children
+    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;
@@ -223,21 +225,24 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
 
           if (targetRef.current) {
             addFlattenData(data, node);
-            addColumn(data, cascadePaths.length);
+            addColumn(data, columnIndex);
           }
         });
       } else {
         node.loading = false;
         node[childrenKey] = children;
         addFlattenData(children, node);
-        addColumn(children, cascadePaths.length);
+        addColumn(children, columnIndex);
       }
     } else if ((_node$childrenKey2 = node[childrenKey]) !== null && _node$childrenKey2 !== void 0 && _node$childrenKey2.length) {
-      addColumn(node[childrenKey], cascadePaths.length);
+      addColumn(node[childrenKey], columnIndex);
+    } else {
+      // Removes subsequent columns of the current column when the clicked node is a leaf node.
+      romoveColumnByIndex(columnIndex);
     }
 
     (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$u = _triggerRef$current.updatePosition) === null || _triggerRef$current$u === void 0 ? void 0 : _triggerRef$current$u.call(_triggerRef$current);
-  }, [onSelect, getChildren, childrenKey, addColumn, addFlattenData]);
+  }, [onSelect, getChildren, childrenKey, addFlattenData, addColumn, romoveColumnByIndex]);
   var handleCheck = (0, _react.useCallback)(function (node, event, checked) {
     var nodeValue = node[valueKey];
     var nextValue = [];

package/cjs/MultiCascader/utils.d.ts

@@ -48,6 +48,7 @@ export declare function useFlattenData(data: ItemDataType[], itemKeys: ItemKeys)
 export declare function useColumnData(flattenData: ItemType[]): {
     columnData: ItemDataType<string | number>[][];
     addColumn: (column: ItemDataType[], index: number) => void;
+    romoveColumnByIndex: (index: number) => void;
     setColumnData: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[][]>>;
     enforceUpdateColumnData: (nextData: ItemDataType[]) => void;
 };

package/cjs/MultiCascader/utils.js

@@ -234,6 +234,15 @@ function useColumnData(flattenData) {
   function addColumn(column, index) {
     setColumnData([].concat((0, _slice.default)(columnData, 0, index), [column]));
   }
+  /**
+   * Remove subsequent columns of the specified column
+   * @param index
+   */
+
+
+  function romoveColumnByIndex(index) {
+    setColumnData([].concat((0, _slice.default)(columnData, 0, index)));
+  }
 
   function enforceUpdateColumnData(nextData) {
     var nextFlattenData = (0, _treeUtils.flattenTree)(nextData);
@@ -245,6 +254,7 @@ function useColumnData(flattenData) {
   return {
     columnData: columnData,
     addColumn: addColumn,
+    romoveColumnByIndex: romoveColumnByIndex,
     setColumnData: setColumnData,
     enforceUpdateColumnData: enforceUpdateColumnData
   };

package/cjs/TreePicker/TreePicker.d.ts

@@ -3,7 +3,6 @@ import { PickerLocale } from '../locales';
 import { PickerComponent, PickerToggleProps } from '../Picker';
 import { TreeDragProps, TreeBaseProps } from '../Tree/Tree';
 import { FormControlPickerProps, ItemDataType } from '../@types/common';
-export declare const maxTreeHeight = 320;
 export interface TreePickerProps<T = number | string> extends TreeBaseProps<T, ItemDataType>, TreeDragProps, FormControlPickerProps<T, PickerLocale, ItemDataType>, Pick<PickerToggleProps, 'caretAs'> {
     /** The height of Dropdown */
     height?: number;

package/cjs/TreePicker/TreePicker.js

@@ -5,7 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.default = exports.maxTreeHeight = void 0;
+exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -37,9 +37,6 @@ var _Picker = require("../Picker");
 
 var _TreeContext = _interopRequireDefault(require("../Tree/TreeContext"));
 
-// default value for virtualized
-var maxTreeHeight = 320;
-exports.maxTreeHeight = maxTreeHeight;
 var emptyArray = [];
 
 var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
@@ -55,13 +52,15 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       overrideLocale = props.locale,
       _props$height = props.height,
       height = _props$height === void 0 ? 360 : _props$height,
+      _props$menuMaxHeight = props.menuMaxHeight,
+      menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,
+      menuStyle = props.menuStyle,
       className = props.className,
       disabled = props.disabled,
       _props$placement = props.placement,
       placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
       _props$cleanable = props.cleanable,
       cleanable = _props$cleanable === void 0 ? true : _props$cleanable,
-      menuStyle = props.menuStyle,
       _props$searchable = props.searchable,
       searchable = _props$searchable === void 0 ? true : _props$searchable,
       _props$virtualized = props.virtualized,
@@ -114,7 +113,7 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       renderExtraFooter = props.renderExtraFooter,
       renderMenu = props.renderMenu,
       renderValue = props.renderValue,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "data", "appearance", "style", "showIndentLine", "value", "locale", "height", "className", "disabled", "placement", "cleanable", "menuStyle", "searchable", "virtualized", "classPrefix", "defaultValue", "placeholder", "searchKeyword", "menuClassName", "menuAutoWidth", "searchBy", "toggleAs", "labelKey", "valueKey", "childrenKey", "draggable", "defaultExpandAll", "disabledItemValues", "expandItemValues", "defaultExpandItemValues", "id", "listProps", "getChildren", "renderTreeIcon", "renderTreeNode", "onExit", "onExited", "onClean", "onOpen", "onSearch", "onSelect", "onChange", "onEntered", "onClose", "onDragEnd", "onDragStart", "onDragEnter", "onDragLeave", "onDragOver", "onDrop", "onExpand", "renderExtraFooter", "renderMenu", "renderValue"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "data", "appearance", "style", "showIndentLine", "value", "locale", "height", "menuMaxHeight", "menuStyle", "className", "disabled", "placement", "cleanable", "searchable", "virtualized", "classPrefix", "defaultValue", "placeholder", "searchKeyword", "menuClassName", "menuAutoWidth", "searchBy", "toggleAs", "labelKey", "valueKey", "childrenKey", "draggable", "defaultExpandAll", "disabledItemValues", "expandItemValues", "defaultExpandItemValues", "id", "listProps", "getChildren", "renderTreeIcon", "renderTreeNode", "onExit", "onExited", "onClean", "onOpen", "onSearch", "onSelect", "onChange", "onEntered", "onClose", "onDragEnd", "onDragStart", "onDragEnter", "onDragLeave", "onDragOver", "onDrop", "onExpand", "renderExtraFooter", "renderMenu", "renderValue"]);
   var triggerRef = (0, _react.useRef)(null);
   var targetRef = (0, _react.useRef)(null);
   var listRef = (0, _react.useRef)(null);
@@ -502,13 +501,16 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     var nullValue = null;
     var target = event.target; // exclude searchBar
 
-    if (target.matches('div[role="searchbox"] > input')) {
+    if (target.matches('div[role="searchbox"] > input') || disabled || !cleanable) {
       return;
     }
 
-    setValue(null);
+    if (!isControlled) {
+      setValue(null);
+    }
+
     onChange === null || onChange === void 0 ? void 0 : onChange(nullValue, event);
-  }, [onChange, setValue]);
+  }, [cleanable, disabled, onChange, setValue, isControlled]);
   var onPickerKeydown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({
     toggle: !activeNode || !active,
     triggerRef: triggerRef,
@@ -644,7 +646,7 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: treePrefix('nodes')
     }, virtualized ? /*#__PURE__*/_react.default.createElement(_VirtualizedList.AutoSizer, {
-      defaultHeight: inline ? height : maxTreeHeight,
+      defaultHeight: inline ? height : menuMaxHeight,
       style: {
         width: 'auto',
         height: 'auto'
@@ -673,13 +675,10 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       left: left,
       top: top
     });
-    var styles = virtualized ? (0, _extends2.default)({
-      height: height
-    }, mergedMenuStyle) : (0, _extends2.default)({}, mergedMenuStyle);
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
       autoWidth: menuAutoWidth,
       className: classes,
-      style: styles,
+      style: mergedMenuStyle,
       ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),
       onKeyDown: onPickerKeydown,
       target: triggerRef