rsuite 5.31.0 → 5.32.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [5.32.0](https://github.com/rsuite/rsuite/compare/v5.31.1...v5.32.0) (2023-04-21)
+
+### Bug Fixes
+
+- **build:** fix broken lodash currying in CDN bundles ([#3159](https://github.com/rsuite/rsuite/issues/3159)) ([896a9d5](https://github.com/rsuite/rsuite/commit/896a9d53cf2c1e0140e43eea024c4f0361c04328))
+- **Cascader:** avoid mutating data prop ([#3157](https://github.com/rsuite/rsuite/issues/3157)) ([6d13318](https://github.com/rsuite/rsuite/commit/6d133185ea1c65b47b35da61499d5cff77dde122))
+
+### Features
+
+- **DateRangePicker:** add `limitStartYear` prop ([#3163](https://github.com/rsuite/rsuite/issues/3163)) ([fd27df2](https://github.com/rsuite/rsuite/commit/fd27df21e1c36372ea8b444f79521c901a65780c))
+
+## [5.31.1](https://github.com/rsuite/rsuite/compare/v5.31.0...v5.31.1) (2023-04-14)
+
+### Bug Fixes
+
+- **Calendar:** fix style errors that are not as designed ([#3146](https://github.com/rsuite/rsuite/issues/3146)) ([f3fe484](https://github.com/rsuite/rsuite/commit/f3fe484a8f63e877c517061e5911116d3107b68b))
+- **i18n:** update ru_RU locale ([#3153](https://github.com/rsuite/rsuite/issues/3153)) ([5c626a9](https://github.com/rsuite/rsuite/commit/5c626a99ca70d9e30836b02f81b90a37f5f2de2d))
+- **Toggle:** fix spinner size in sm/lg Toggles ([#3156](https://github.com/rsuite/rsuite/issues/3156)) ([896ee49](https://github.com/rsuite/rsuite/commit/896ee492bbdd2277dbe23f6667305ceaf9154a8a))
+
 # [5.31.0](https://github.com/rsuite/rsuite/compare/v5.30.0...v5.31.0) (2023-04-07)
 
 ### Bug Fixes

package/Calendar/styles/index.less

@@ -18,7 +18,7 @@
   }
 
   &-bordered &-table-row:not(:last-child) &-table-cell,
-  &-bordered &-table-header-row &-table-cell {
+  &-bordered &-table-header-row &-table-header-cell {
     border-bottom: 1px solid var(--rs-border-secondary);
   }
 
@@ -63,7 +63,7 @@
     padding-right: 0;
   }
 
-  &-panel &-table-header-row &-table-cell-content {
+  &-panel &-table-header-row &-table-header-cell-content {
     padding-top: 8px; // padding + border = 10px
     padding-bottom: 8px;
   }
@@ -420,6 +420,7 @@
 
 // Table header row
 .rs-calendar-table-header-cell-content {
+  display: inline-block;
   color: var(--rs-text-secondary);
   font-size: @font-size-small;
   line-height: @line-height-small;

package/Toggle/styles/mixin.less

@@ -6,6 +6,20 @@
     height: @handle-diameter;
     left: @toggle-handle-gap;
     top: @toggle-handle-gap;
+
+    .rs-loader-spin,
+    .rs-loader-spin::before,
+    .rs-loader-spin::after {
+      width: @handle-diameter;
+      height: @handle-diameter;
+    }
+
+    & when (@handle-diameter < 16px) {
+      .rs-loader-spin::before,
+      .rs-loader-spin::after {
+        border-width: 2px;
+      }
+    }
   }
 
   .rs-toggle-presentation {

package/cjs/Calendar/Calendar.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import Calendar from './CalendarContainer';
+import CalendarContainer from './CalendarContainer';
 import { CalendarLocale } from '../locales';
 import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
 export interface CalendarProps extends WithAsProps {
@@ -24,5 +24,5 @@ export interface CalendarProps extends WithAsProps {
     /** Custom render calendar cells  */
     renderCell?: (date: Date) => React.ReactNode;
 }
-declare const CalendarPanel: RsRefForwardingComponent<typeof Calendar, CalendarProps>;
-export default CalendarPanel;
+declare const Calendar: RsRefForwardingComponent<typeof CalendarContainer, CalendarProps>;
+export default Calendar;

package/cjs/Calendar/Calendar.js

@@ -27,7 +27,7 @@ var _utils = require("../utils");
 
 var _useCalendarDate2 = _interopRequireDefault(require("./useCalendarDate"));
 
-var CalendarPanel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? _CalendarContainer.default : _props$as,
       bordered = props.bordered,
@@ -115,8 +115,8 @@ var CalendarPanel = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   }));
 });
 
-CalendarPanel.displayName = 'CalendarPanel';
-CalendarPanel.propTypes = {
+Calendar.displayName = 'Calendar';
+Calendar.propTypes = {
   value: _propTypes.default.instanceOf(Date),
   defaultValue: _propTypes.default.instanceOf(Date),
   isoWeek: _propTypes.default.bool,
@@ -129,5 +129,5 @@ CalendarPanel.propTypes = {
   onSelect: _propTypes.default.func,
   renderCell: _propTypes.default.func
 };
-var _default = CalendarPanel;
+var _default = Calendar;
 exports.default = _default;

package/cjs/Calendar/CalendarContainer.d.ts

@@ -30,12 +30,12 @@ export interface CalendarProps extends WithAsProps, Omit<HTMLAttributes<HTMLDivE
     hideSeconds?: (second: number, date: Date) => boolean;
     /** The value that mouse hover on in range selection */
     hoverRangeValue?: [Date, Date];
-    /** Is it in the same month as today */
-    inSameMonth?: (date: Date) => boolean;
     /** ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day */
     isoWeek?: boolean;
     /** Limit showing how many years in the future */
     limitEndYear?: number;
+    /** Limit showing how many years in the past */
+    limitStartYear?: number;
     /** Custom locale */
     locale: CalendarLocale;
     /** Callback after the date has changed */

package/cjs/Calendar/CalendarContainer.js

@@ -48,10 +48,10 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
       disabledForward = props.disabledForward,
       format = props.format,
       hoverRangeValue = props.hoverRangeValue,
-      inSameMonth = props.inSameMonth,
       _props$isoWeek = props.isoWeek,
       isoWeek = _props$isoWeek === void 0 ? false : _props$isoWeek,
       limitEndYear = props.limitEndYear,
+      limitStartYear = props.limitStartYear,
       locale = props.locale,
       onChangeMonth = props.onChangeMonth,
       onChangeTime = props.onChangeTime,
@@ -69,7 +69,7 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
       showMeridian = props.showMeridian,
       showWeekNumbers = props.showWeekNumbers,
       inline = props.inline,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "dateRange", "disabledBackward", "defaultState", "disabledDate", "disabledForward", "format", "hoverRangeValue", "inSameMonth", "isoWeek", "limitEndYear", "locale", "onChangeMonth", "onChangeTime", "onMouseMove", "onMoveBackward", "onMoveForward", "onSelect", "onToggleMeridian", "onToggleMonthDropdown", "onToggleTimeDropdown", "calendarDate", "renderCell", "renderTitle", "renderToolbar", "showMeridian", "showWeekNumbers", "inline"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "dateRange", "disabledBackward", "defaultState", "disabledDate", "disabledForward", "format", "hoverRangeValue", "isoWeek", "limitEndYear", "limitStartYear", "locale", "onChangeMonth", "onChangeTime", "onMouseMove", "onMoveBackward", "onMoveForward", "onSelect", "onToggleMeridian", "onToggleMonthDropdown", "onToggleTimeDropdown", "calendarDate", "renderCell", "renderTitle", "renderToolbar", "showMeridian", "showWeekNumbers", "inline"]);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       withClassPrefix = _useClassNames.withClassPrefix,
@@ -129,12 +129,8 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
   var showTime = calendarState === _useCalendarState2.CalendarState.TIME || onlyShowTime;
   var showMonth = calendarState === _useCalendarState2.CalendarState.MONTH || onlyShowMonth;
   var inSameThisMonthDate = (0, _react.useCallback)(function (date) {
-    return (0, _utils.composeFunctions)(function (d) {
-      return (0, _dateUtils.setDate)(d, 1);
-    }, function (d) {
-      return (0, _dateUtils.isSameMonth)(d, date);
-    })(date);
-  }, []);
+    return (0, _dateUtils.isSameMonth)(calendarDate, date);
+  }, [calendarDate]);
   var calendarClasses = merge(className, withClassPrefix({
     'time-view': showTime,
     'month-view': showMonth,
@@ -152,7 +148,7 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
       disabledDate: isDisabledDate,
       format: format,
       hoverRangeValue: hoverRangeValue,
-      inSameMonth: inSameMonth !== null && inSameMonth !== void 0 ? inSameMonth : inSameThisMonthDate,
+      inSameMonth: inSameThisMonthDate,
       isoWeek: isoWeek,
       locale: locale,
       onChangeMonth: handleChangeMonth,
@@ -163,7 +159,7 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
       showWeekNumbers: showWeekNumbers,
       inline: inline
     };
-  }, [calendarDate, dateRange, format, handleChangeMonth, hoverRangeValue, inSameMonth, inSameThisMonthDate, inline, isDisabledDate, isoWeek, locale, onChangeTime, onMouseMove, onSelect, renderCell, showWeekNumbers]);
+  }, [calendarDate, dateRange, format, handleChangeMonth, hoverRangeValue, inSameThisMonthDate, inline, isDisabledDate, isoWeek, locale, onChangeTime, onMouseMove, onSelect, renderCell, showWeekNumbers]);
   return /*#__PURE__*/_react.default.createElement(_CalendarContext.CalendarProvider, {
     value: contextValue
   }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, (0, _dateUtils.omitHideDisabledProps)(rest), {
@@ -187,6 +183,7 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
   }), renderDate && /*#__PURE__*/_react.default.createElement(_CalendarBody.default, null), renderMonth && /*#__PURE__*/_react.default.createElement(_MonthDropdown.default, {
     show: showMonth,
     limitEndYear: limitEndYear,
+    limitStartYear: limitStartYear,
     disabledMonth: isDisabledDate
   }), renderTime && /*#__PURE__*/_react.default.createElement(_TimeDropdown.default, (0, _extends2.default)({}, timeDropdownProps, {
     show: showTime,
@@ -210,9 +207,9 @@ CalendarContainer.propTypes = {
   hideHours: _propTypes.default.func,
   hideMinutes: _propTypes.default.func,
   hideSeconds: _propTypes.default.func,
-  inSameMonth: _propTypes.default.func,
   isoWeek: _propTypes.default.bool,
   limitEndYear: _propTypes.default.number,
+  limitStartYear: _propTypes.default.number,
   locale: _propTypes.default.object,
   onChangeMonth: _propTypes.default.func,
   onChangeTime: _propTypes.default.func,

package/cjs/Calendar/MonthDropdown.js

@@ -66,7 +66,7 @@ var MonthDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
 
   var thisYear = _utils.DateUtils.getYear(new Date());
 
-  var startYear = limitStartYear ? thisYear - limitStartYear : 1900;
+  var startYear = limitStartYear ? thisYear - limitStartYear + 1 : 1900;
   var rowCount = (0, _react.useMemo)(function () {
     var endYear = thisYear + limitEndYear;
     return endYear - startYear;

package/cjs/Cascader/Cascader.d.ts

@@ -15,7 +15,7 @@ export interface CascaderProps<T = ValueType> extends FormControlPickerProps<T |
     /** When true, make the parent node selectable */
     parentSelectable?: boolean;
     /** Custom render menu */
-    renderMenu?: (items: ItemDataType[], menu: React.ReactNode, parentNode?: any, layer?: number) => React.ReactNode;
+    renderMenu?: (items: readonly ItemDataType[], menu: React.ReactNode, parentNode?: any, layer?: number) => React.ReactNode;
     /** Custom render menu items */
     renderMenuItem?: (itemLabel: React.ReactNode, item: ItemDataType) => React.ReactNode;
     /** Custom render search items */
@@ -29,7 +29,7 @@ export interface CascaderProps<T = ValueType> extends FormControlPickerProps<T |
     /** Called when searching */
     onSearch?: (searchKeyword: string, event: React.SyntheticEvent) => void;
     /** Asynchronously load the children of the tree node. */
-    getChildren?: (node: ItemDataType) => ItemDataType[] | Promise<ItemDataType[]>;
+    getChildren?: (node: ItemDataType<T>) => ItemDataType<T>[] | Promise<ItemDataType<T>[]>;
 }
 export interface CascaderComponent {
     <T>(props: CascaderProps<T> & {

package/cjs/Cascader/Cascader.js

@@ -13,6 +13,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _reactUseSet = require("react-use-set");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _omit = _interopRequireDefault(require("lodash/omit"));
@@ -35,6 +37,8 @@ var _utils2 = require("../utils");
 
 var _Picker = require("../Picker");
 
+var _useMap = require("../utils/useMap");
+
 var emptyArray = [];
 
 var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
@@ -94,10 +98,6 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       active = _useState[0],
       setActive = _useState[1];
 
-  var _useState2 = (0, _react.useState)((0, _treeUtils.flattenTree)(data, childrenKey)),
-      flattenData = _useState2[0],
-      setFlattenData = _useState2[1];
-
   var triggerRef = (0, _react.useRef)(null);
   var overlayRef = (0, _react.useRef)(null);
   var targetRef = (0, _react.useRef)(null);
@@ -107,25 +107,47 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       value = _ref[0],
       setValue = _ref[1];
 
+  var isMounted = (0, _utils2.useIsMounted)();
+  var loadingItemsSet = (0, _reactUseSet.useSet)();
+  var asyncChildrenMap = (0, _useMap.useMap)();
+  var parentMap = (0, _react.useMemo)(function () {
+    return (0, _utils.getParentMap)(data, function (item) {
+      var _asyncChildrenMap$get;
+
+      return (_asyncChildrenMap$get = asyncChildrenMap.get(item)) !== null && _asyncChildrenMap$get !== void 0 ? _asyncChildrenMap$get : item[childrenKey];
+    });
+  }, [asyncChildrenMap, childrenKey, data]);
+  var flattenedData = (0, _react.useMemo)(function () {
+    return (0, _treeUtils.flattenTree)(data, function (item) {
+      var _asyncChildrenMap$get2;
+
+      return (_asyncChildrenMap$get2 = asyncChildrenMap.get(item)) !== null && _asyncChildrenMap$get2 !== void 0 ? _asyncChildrenMap$get2 : item[childrenKey];
+    });
+  }, [asyncChildrenMap, childrenKey, data]); // The item that focus is on
+
+  var _useState2 = (0, _react.useState)(),
+      activeItem = _useState2[0],
+      setActiveItem = _useState2[1];
+
   var _usePaths = (0, _utils.usePaths)({
     data: data,
-    valueKey: valueKey,
-    childrenKey: childrenKey,
-    value: value
+    activeItem: activeItem,
+    selectedItem: flattenedData.find(function (item) {
+      return item[valueKey] === value;
+    }),
+    getParent: function getParent(item) {
+      return parentMap.get(item);
+    },
+    getChildren: function getChildren(item) {
+      var _asyncChildrenMap$get3;
+
+      return (_asyncChildrenMap$get3 = asyncChildrenMap.get(item)) !== null && _asyncChildrenMap$get3 !== void 0 ? _asyncChildrenMap$get3 : item[childrenKey];
+    }
   }),
-      selectedPaths = _usePaths.selectedPaths,
-      valueToPaths = _usePaths.valueToPaths,
-      columnData = _usePaths.columnData,
-      addColumn = _usePaths.addColumn,
-      removeColumnByIndex = _usePaths.removeColumnByIndex,
-      setValueToPaths = _usePaths.setValueToPaths,
-      setColumnData = _usePaths.setColumnData,
-      setSelectedPaths = _usePaths.setSelectedPaths,
-      enforceUpdate = _usePaths.enforceUpdate;
-
-  (0, _react.useEffect)(function () {
-    setFlattenData((0, _treeUtils.flattenTree)(data, childrenKey));
-  }, [data, childrenKey]);
+      columnsToDisplay = _usePaths.columnsToDisplay,
+      pathTowardsActiveItem = _usePaths.pathTowardsActiveItem,
+      pathTowardsSelectedItem = _usePaths.pathTowardsSelectedItem;
+
   (0, _Picker.usePublicMethods)(ref, {
     triggerRef: triggerRef,
     overlayRef: overlayRef,
@@ -141,7 +163,7 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    */
 
 
-  var hasValue = valueToPaths.length > 0 || !(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue);
+  var hasValue = pathTowardsSelectedItem.length > 0 || !(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue);
 
   var _useClassNames = (0, _utils2.useClassNames)(classPrefix),
       prefix = _useClassNames.prefix,
@@ -156,15 +178,17 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       return true;
     }
 
-    if (item.parent && someKeyword(item.parent)) {
+    var parent = parentMap.get(item);
+
+    if (parent && someKeyword(parent)) {
       return true;
     }
 
     return false;
-  }, [labelKey, searchKeyword]);
+  }, [labelKey, parentMap, searchKeyword]);
   var getSearchResult = (0, _react.useCallback)(function (keyword) {
     var items = [];
-    var result = flattenData.filter(function (item) {
+    var result = flattenedData.filter(function (item) {
       if (!parentSelectable && item[childrenKey]) {
         return false;
       }
@@ -181,19 +205,24 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }
 
     return items;
-  }, [childrenKey, flattenData, someKeyword, parentSelectable]); // Used to hover the focuse item  when trigger `onKeydown`
+  }, [childrenKey, flattenedData, someKeyword, parentSelectable]); // Used to hover the focuse item  when trigger `onKeydown`
 
   var _useFocusItemValue = (0, _Picker.useFocusItemValue)(value, {
     rtl: rtl,
-    data: flattenData,
+    data: flattenedData,
     valueKey: valueKey,
-    defaultLayer: valueToPaths !== null && valueToPaths !== void 0 && valueToPaths.length ? valueToPaths.length - 1 : 0,
+    defaultLayer: pathTowardsSelectedItem !== null && pathTowardsSelectedItem !== void 0 && pathTowardsSelectedItem.length ? pathTowardsSelectedItem.length - 1 : 0,
     target: function target() {
       return overlayRef.current;
     },
+    getParent: function getParent(item) {
+      return parentMap.get(item);
+    },
     callback: (0, _react.useCallback)(function (value) {
-      enforceUpdate(value, true);
-    }, [enforceUpdate])
+      setActiveItem(flattenedData.find(function (item) {
+        return item[valueKey] === value;
+      }));
+    }, [flattenedData, setActiveItem, valueKey])
   }),
       focusItemValue = _useFocusItemValue.focusItemValue,
       setFocusItemValue = _useFocusItemValue.setFocusItemValue,
@@ -239,12 +268,9 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       return;
     }
 
-    setColumnData([data]);
     setValue(null);
-    setSelectedPaths([]);
-    setValueToPaths([]);
     onChange === null || onChange === void 0 ? void 0 : onChange(null, event);
-  }, [data, disabled, onChange, setSelectedPaths, setColumnData, setValueToPaths, setValue]);
+  }, [disabled, onChange, setValue]);
   var handleMenuPressEnter = (0, _react.useCallback)(function (event) {
     var focusItem = (0, _treeUtils.findNodeOfTree)(data, function (item) {
       return item[valueKey] === focusItemValue;
@@ -253,10 +279,9 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
     if (isLeafNode) {
       setValue(focusItemValue);
-      setValueToPaths(selectedPaths);
 
-      if (selectedPaths.length) {
-        setLayer(selectedPaths.length - 1);
+      if (pathTowardsActiveItem.length) {
+        setLayer(pathTowardsActiveItem.length - 1);
       }
 
       if (!(0, _shallowEqual.default)(value, focusItemValue)) {
@@ -265,7 +290,7 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
       handleClose();
     }
-  }, [childrenKey, data, focusItemValue, handleClose, onChange, selectedPaths, setLayer, setValue, setValueToPaths, value, valueKey]);
+  }, [childrenKey, data, focusItemValue, handleClose, onChange, pathTowardsActiveItem, setLayer, setValue, value, valueKey]);
   var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends3.default)({
     toggle: !focusItemValue || !active,
     triggerRef: triggerRef,
@@ -279,44 +304,32 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, rest));
 
   var handleSelect = function handleSelect(node, cascadePaths, isLeafNode, event) {
-    var _node$childrenKey, _node$childrenKey2, _triggerRef$current2;
+    var _node$childrenKey, _triggerRef$current2;
 
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, event);
-    setSelectedPaths(cascadePaths);
-    var nextValue = node[valueKey];
-    var columnIndex = cascadePaths.length; // Lazy load node's children
+    setActiveItem(node);
+    var nextValue = node[valueKey]; // 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;
+    if (typeof getChildren === 'function' && ((_node$childrenKey = node[childrenKey]) === null || _node$childrenKey === void 0 ? void 0 : _node$childrenKey.length) === 0 && !asyncChildrenMap.has(node)) {
+      loadingItemsSet.add(node);
       var children = getChildren(node);
 
       if (children instanceof Promise) {
         children.then(function (data) {
-          node.loading = false;
-          node[childrenKey] = data;
-
-          if (targetRef.current || inline) {
-            addColumn(data, columnIndex);
+          if (isMounted()) {
+            loadingItemsSet.delete(node);
+            asyncChildrenMap.set(node, data);
           }
         });
       } else {
-        node.loading = false;
-        node[childrenKey] = children;
-        addColumn(children, columnIndex);
+        loadingItemsSet.delete(node);
+        asyncChildrenMap.set(node, children);
       }
-    } 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);
     }
 
     if (isLeafNode) {
       // Determines whether the option is a leaf node, and if so, closes the picker.
-      handleClose(); // Update the selected path to the value path.
-      // That is, the selected path will be displayed on the button after clicking the child node.
-
-      setValueToPaths(cascadePaths);
+      handleClose();
       setValue(nextValue);
 
       if (!(0, _shallowEqual.default)(value, nextValue)) {
@@ -331,7 +344,6 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     if (parentSelectable && !(0, _shallowEqual.default)(value, nextValue)) {
       setValue(nextValue);
       onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
-      setValueToPaths(cascadePaths);
     } // Update menu position
 
 
@@ -347,16 +359,15 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     handleClose();
     setSearchKeyword('');
     setValue(nextValue);
-    setValueToPaths(nodes);
-    enforceUpdate(nextValue);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, nodes, event);
     onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
   };
 
   var renderSearchRow = function renderSearchRow(item, key) {
     var regx = new RegExp((0, _utils2.getSafeRegExpString)(searchKeyword), 'ig');
-    var nodes = (0, _treeUtils.getNodeParents)(item);
-    nodes.push(item);
+    var nodes = (0, _utils.getPathTowardsItem)(item, function (item) {
+      return parentMap.get(item);
+    });
     var formattedNodes = nodes.map(function (node) {
       var _extends2;
 
@@ -448,12 +459,13 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       menuWidth: menuWidth,
       menuHeight: menuHeight,
       disabledItemValues: disabledItemValues,
+      loadingItemsSet: loadingItemsSet,
       valueKey: valueKey,
       labelKey: labelKey,
       childrenKey: childrenKey,
       classPrefix: 'picker-cascader-menu',
-      cascadeData: columnData,
-      cascadePaths: selectedPaths,
+      cascadeData: columnsToDisplay,
+      cascadePaths: pathTowardsActiveItem,
       activeItemValue: value // FIXME make onSelect generic
       ,
       onSelect: handleSelect,
@@ -464,15 +476,15 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var selectedElement = placeholder;
 
-  if (valueToPaths.length > 0) {
+  if (pathTowardsSelectedItem.length > 0) {
     selectedElement = [];
-    valueToPaths.forEach(function (item, index) {
+    pathTowardsSelectedItem.forEach(function (item, index) {
       var key = item[valueKey] || item[labelKey];
       selectedElement.push( /*#__PURE__*/_react.default.createElement("span", {
         key: key
       }, item[labelKey]));
 
-      if (index < valueToPaths.length - 1) {
+      if (index < pathTowardsSelectedItem.length - 1) {
         selectedElement.push( /*#__PURE__*/_react.default.createElement("span", {
           className: "separator",
           key: key + "-separator"
@@ -482,7 +494,7 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }
 
   if (!(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue)) {
-    selectedElement = renderValue(value, valueToPaths, selectedElement); // If renderValue returns null or undefined, hasValue is false.
+    selectedElement = renderValue(value, pathTowardsSelectedItem, selectedElement); // If renderValue returns null or undefined, hasValue is false.
 
     if ((0, _isNil.default)(selectedElement)) {
       hasValue = false;

package/cjs/Cascader/DropdownMenu.d.ts

@@ -2,19 +2,23 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ItemDataType, WithAsProps, RsRefForwardingComponent } from '../@types/common';
 import { ValueType } from './Cascader';
+declare type SetLike<T = unknown> = {
+    has(value: T): boolean;
+};
 export interface DropdownMenuProps extends Omit<WithAsProps, 'classPrefix'> {
     classPrefix: string;
     disabledItemValues: ValueType[];
     activeItemValue?: ValueType | null;
     childrenKey: string;
-    cascadeData: ItemDataType[][];
+    cascadeData: (readonly ItemDataType[])[];
+    loadingItemsSet?: SetLike<ItemDataType>;
     cascadePaths: ItemDataType[];
     valueKey: string;
     labelKey: string;
     menuWidth?: number;
     menuHeight?: number | string;
     renderMenuItem?: (itemLabel: React.ReactNode, item: ItemDataType) => React.ReactNode;
-    renderMenu?: (items: ItemDataType[], menu: React.ReactNode, parentNode?: ItemDataType, layer?: number) => React.ReactNode;
+    renderMenu?: (items: readonly ItemDataType[], menu: React.ReactNode, parentNode?: ItemDataType, layer?: number) => React.ReactNode;
     onSelect?: (node: ItemDataType, cascadePaths: ItemDataType[], isLeafNode: boolean, event: React.MouseEvent) => void;
 }
 declare const DropdownMenu: RsRefForwardingComponent<'div', DropdownMenuProps>;

package/cjs/Cascader/DropdownMenu.js

@@ -55,12 +55,13 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       cascadeData = _props$cascadeData === void 0 ? emptyArray : _props$cascadeData,
       _props$cascadePaths = props.cascadePaths,
       cascadePaths = _props$cascadePaths === void 0 ? emptyArray : _props$cascadePaths,
+      loadingItemsSet = props.loadingItemsSet,
       _props$labelKey = props.labelKey,
       labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
       renderMenu = props.renderMenu,
       renderMenuItem = props.renderMenuItem,
       onSelect = props.onSelect,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "activeItemValue", "classPrefix", "className", "childrenKey", "disabledItemValues", "menuWidth", "menuHeight", "valueKey", "cascadeData", "cascadePaths", "labelKey", "renderMenu", "renderMenuItem", "onSelect"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "activeItemValue", "classPrefix", "className", "childrenKey", "disabledItemValues", "menuWidth", "menuHeight", "valueKey", "cascadeData", "cascadePaths", "loadingItemsSet", "labelKey", "renderMenu", "renderMenuItem", "onSelect"]);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
@@ -114,15 +115,18 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   };
 
   var renderCascadeNode = function renderCascadeNode(node, index, layer, focus) {
+    var _loadingItemsSet$has;
+
     var children = node[childrenKey];
     var value = node[valueKey];
     var label = node[labelKey];
     var disabled = disabledItemValues.some(function (disabledValue) {
       return (0, _utils.shallowEqual)(disabledValue, value);
-    }); // Use `value` in keys when If `value` is string or number
+    });
+    var loading = (_loadingItemsSet$has = loadingItemsSet === null || loadingItemsSet === void 0 ? void 0 : loadingItemsSet.has(node)) !== null && _loadingItemsSet$has !== void 0 ? _loadingItemsSet$has : false; // 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 = loading ? _Spinner.default : rtl ? _AngleLeft.default : _AngleRight.default;
     return /*#__PURE__*/_react.default.createElement(_Picker.DropdownMenuItem, {
       classPrefix: "picker-cascader-menu-item",
       as: 'li',
@@ -139,7 +143,7 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       }
     }, renderMenuItem ? renderMenuItem(label, node) : label, children ? /*#__PURE__*/_react.default.createElement(Icon, {
       className: prefix('caret'),
-      spin: node.loading
+      spin: loading
     }) : null);
   };