rsuite 5.19.0-beta.5 → 5.19.1

package/cjs/CheckTreePicker/CheckTreePicker.js

@@ -29,7 +29,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _Windowing = require("../Windowing");
+var _VirtualizedList = require("../Picker/VirtualizedList");
 
 var _CheckTreeNode = _interopRequireDefault(require("./CheckTreeNode"));
 
@@ -43,14 +43,8 @@ var _Picker = require("../Picker");
 
 var _utils2 = require("./utils");
 
-var _TreePicker = require("../TreePicker/TreePicker");
-
 var emptyArray = [];
 
-var itemSize = function itemSize() {
-  return 36;
-};
-
 var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'div' : _props$as,
@@ -92,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,
@@ -123,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;
@@ -253,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,
@@ -394,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;
 
@@ -457,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,
@@ -597,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,
@@ -638,26 +626,34 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }, nodeProps));
   };
 
-  var renderVirtualListNode = function renderVirtualListNode(_ref3) {
-    var index = _ref3.index,
-        style = _ref3.style,
-        data = _ref3.data;
-    var node = data[index];
-    var layer = node.layer,
-        refKey = node.refKey,
-        visible = node.visible;
-    var expand = (0, _treeUtils.getExpandWhenSearching)(searchKeywordState, expandItemValues.includes(node[valueKey]));
-    var nodeProps = (0, _extends2.default)({}, getTreeNodeProps((0, _extends2.default)({}, node, {
-      expand: expand
-    }), layer), {
-      hasChildren: node.hasChildren
-    });
-    return visible && /*#__PURE__*/_react.default.createElement(_CheckTreeNode.default, (0, _extends2.default)({
-      style: style,
-      ref: function ref(_ref4) {
-        return saveTreeNodeRef(_ref4, refKey);
-      }
-    }, nodeProps));
+  var renderVirtualListNode = function renderVirtualListNode(nodes) {
+    return function (_ref3) {
+      var key = _ref3.key,
+          index = _ref3.index,
+          style = _ref3.style;
+      var node = nodes[index];
+      var layer = node.layer,
+          refKey = node.refKey,
+          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
+      });
+      return visible && /*#__PURE__*/_react.default.createElement(_CheckTreeNode.default, (0, _extends2.default)({
+        style: style,
+        key: key,
+        ref: function ref(_ref4) {
+          return saveTreeNodeRef(_ref4, refKey);
+        }
+      }, nodeProps));
+    };
   };
 
   var renderCheckTree = function renderCheckTree() {
@@ -689,8 +685,8 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       onKeyDown: inline ? handleTreeKeydown : undefined
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: treeNodesClass
-    }, virtualized ? /*#__PURE__*/_react.default.createElement(_Windowing.AutoSizer, {
-      defaultHeight: inline ? height : _TreePicker.maxTreeHeight,
+    }, virtualized ? /*#__PURE__*/_react.default.createElement(_VirtualizedList.AutoSizer, {
+      defaultHeight: inline ? height : menuMaxHeight,
       style: {
         width: 'auto',
         height: 'auto'
@@ -698,14 +694,15 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }, function (_ref5) {
       var height = _ref5.height,
           width = _ref5.width;
-      return /*#__PURE__*/_react.default.createElement(_Windowing.List, (0, _extends2.default)({
+      return /*#__PURE__*/_react.default.createElement(_VirtualizedList.List, (0, _extends2.default)({
         ref: listRef,
         width: width,
         height: height,
-        itemSize: itemSize,
-        itemCount: formattedNodes.length,
-        itemData: formattedNodes
-      }, listProps), renderVirtualListNode);
+        rowHeight: 36,
+        rowCount: formattedNodes.length,
+        rowRenderer: renderVirtualListNode(formattedNodes),
+        scrollToAlignment: "center"
+      }, listProps));
     }) : formattedNodes));
   };
 
@@ -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/Disclosure/Disclosure.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import DisclosureButton from './DisclosureButton';
 import DisclosureContent from './DisclosureContent';
-export declare type DisclosureTrigger = 'click' | 'hover';
-export interface DisclosureRenderProps extends Pick<React.HTMLAttributes<HTMLElement>, 'onMouseEnter' | 'onMouseLeave'> {
+export declare type DisclosureTrigger = 'click' | 'mouseover';
+export interface DisclosureRenderProps extends Pick<React.HTMLAttributes<HTMLElement>, 'onMouseOver' | 'onMouseOut'> {
     open: boolean;
 }
 export interface DisclosureProps {

package/cjs/Disclosure/Disclosure.js

@@ -74,7 +74,7 @@ var Disclosure = /*#__PURE__*/_react.default.memo(function (props) {
       });
     }
   });
-  var onMouseEnter = (0, _react.useCallback)(function (event) {
+  var onMouseOver = (0, _react.useCallback)(function (event) {
     if (!open) {
       dispatch({
         type: _DisclosureContext.DisclosureActionTypes.Show
@@ -82,7 +82,7 @@ var Disclosure = /*#__PURE__*/_react.default.memo(function (props) {
       onToggle === null || onToggle === void 0 ? void 0 : onToggle(true, event);
     }
   }, [open, dispatch, onToggle]);
-  var onMouseLeave = (0, _react.useCallback)(function (event) {
+  var onMouseOut = (0, _react.useCallback)(function (event) {
     if (open) {
       dispatch({
         type: _DisclosureContext.DisclosureActionTypes.Hide
@@ -113,13 +113,13 @@ var Disclosure = /*#__PURE__*/_react.default.memo(function (props) {
       open: open
     };
 
-    if (trigger.includes('hover')) {
-      renderProps.onMouseEnter = onMouseEnter;
-      renderProps.onMouseLeave = onMouseLeave;
+    if (trigger.includes('mouseover')) {
+      renderProps.onMouseOver = onMouseOver;
+      renderProps.onMouseOut = onMouseOut;
     }
 
     return renderProps;
-  }, [open, trigger, onMouseEnter, onMouseLeave]);
+  }, [open, trigger, onMouseOver, onMouseOut]);
   return /*#__PURE__*/_react.default.createElement(_DisclosureContext.default.Provider, {
     value: contextValue
   }, children(renderProps, containerElementRef));

package/cjs/InputPicker/InputPicker.js

@@ -145,7 +145,6 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var targetRef = (0, _react.useRef)(null);
   var triggerRef = (0, _react.useRef)(null);
   var inputRef = (0, _react.useRef)();
-  var listRef = (0, _react.useRef)(null);
 
   var _useCustom = (0, _utils.useCustom)(['Picker', 'InputPicker'], overrideLocale),
       locale = _useCustom.locale;
@@ -437,8 +436,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   (0, _Picker.usePublicMethods)(ref, {
     triggerRef: triggerRef,
     overlayRef: overlayRef,
-    targetRef: targetRef,
-    listRef: listRef
+    targetRef: targetRef
   });
   /**
    * Remove the last item, after pressing the back key on the keyboard.
@@ -637,7 +635,6 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     var menu = items.length ? /*#__PURE__*/_react.default.createElement(_Picker.DropdownMenu, {
       id: id ? id + "-listbox" : undefined,
       listProps: listProps,
-      listRef: listRef,
       disabledItemValues: disabledItemValues,
       valueKey: valueKey,
       labelKey: labelKey,

package/cjs/MultiCascader/DropdownMenu.js

@@ -69,10 +69,7 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       prefix = _useClassNames.prefix;
 
   var classes = merge(className, prefix('items'));
-
-  var _useCustom = (0, _utils.useCustom)('DropdownMenu'),
-      rtl = _useCustom.rtl;
-
+  var rtl = (0, _utils.useCustom)('DropdownMenu');
   var getCascadePaths = (0, _react.useCallback)(function (layer, node) {
     var paths = [];
 
@@ -99,7 +96,7 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     }); // Use `value` in keys when If `value` is string or number
 
     var onlyKey = typeof value === 'number' || typeof value === 'string' ? value : index;
-    var Icon = node.loading ? _Spinner.default : rtl ? _AngleLeft.default : _AngleRight.default;
+    var Icon = node.loading ? _Spinner.default : rtl ? _AngleRight.default : _AngleLeft.default;
     var active = value.some(function (v) {
       return v === nodeValue;
     });

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;
 };