rsuite 5.31.1 → 5.32.0

package/cjs/Cascader/utils.js

@@ -1,175 +1,136 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 exports.__esModule = true;
 exports.getColumnsAndPaths = getColumnsAndPaths;
 exports.usePaths = usePaths;
+exports.getParentMap = getParentMap;
+exports.getPathTowardsItem = getPathTowardsItem;
 
 var _react = require("react");
 
-var _slice = _interopRequireDefault(require("lodash/slice"));
-
-var _utils = require("../utils");
-
-var _treeUtils = require("../utils/treeUtils");
-
-var _attachParent = require("../utils/attachParent");
-
-function getColumnsAndPaths(data, value, options) {
-  var childrenKey = options.childrenKey,
-      valueKey = options.valueKey,
-      isAttachChildren = options.isAttachChildren;
-  var columns = [];
-  var paths = [];
-
-  var findNode = function findNode(items) {
-    var _loop = function _loop(i) {
-      var children = items[i][childrenKey];
-
-      if ((0, _utils.shallowEqual)(items[i][valueKey], value)) {
-        return {
-          v: {
-            items: items,
-            active: items[i]
-          }
-        };
-      } else if (children) {
-        var node = findNode(children);
-
-        if (node) {
-          columns.push(children.map(function (item) {
-            return (0, _attachParent.attachParent)(item, items[i]);
-          }));
-          paths.push(node.active);
-          return {
-            v: {
-              items: items,
-              active: items[i]
-            }
-          };
-        }
-      }
+function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+/**
+ * Calculate columns to be displayed:
+ *
+ * - Every ancestor level of activeItem should be displayed
+ * - The level that activeItem is at should be displayed
+ * - If activeItem is a parent node, its child level should be displayed
+ *
+ * @param items
+ * @param value
+ * @param options
+ * @returns
+ */
+function getColumnsAndPaths(items, pathTarget, options) {
+  var getParent = options.getParent,
+      getChildren = options.getChildren;
+
+  if (!pathTarget) {
+    return {
+      columns: [items],
+      path: []
     };
+  }
 
-    for (var i = 0; i < items.length; i += 1) {
-      var _ret = _loop(i);
-
-      if (typeof _ret === "object") return _ret.v;
-    }
-
-    return null;
-  };
-
-  var selectedNode = findNode(data);
-  columns.push(data);
+  var columns = [];
+  var path = [pathTarget];
+  var children = getChildren(pathTarget);
 
-  if (selectedNode) {
-    paths.push(selectedNode.active);
+  if (children && children.length > 0) {
+    columns.unshift(children);
   }
 
-  if (isAttachChildren) {
-    var valueToNode = (0, _treeUtils.findNodeOfTree)(data, function (item) {
-      return item[valueKey] === value;
-    });
+  for (var parent = getParent(pathTarget); !!parent; parent = getParent(parent)) {
+    var _getChildren;
 
-    if (valueToNode !== null && valueToNode !== void 0 && valueToNode[childrenKey]) {
-      columns.unshift(valueToNode[childrenKey]);
-    }
+    columns.unshift((_getChildren = getChildren(parent)) !== null && _getChildren !== void 0 ? _getChildren : []);
+    path.unshift(parent);
   }
 
-  columns.reverse();
-  paths.reverse();
+  columns.unshift(items);
   return {
     columns: columns,
-    paths: paths
+    path: path
   };
 }
 
-function usePaths(params) {
-  var data = params.data,
-      valueKey = params.valueKey,
-      childrenKey = params.childrenKey,
-      value = params.value;
+/**
+ * Caculate following 3 things
+ *
+ * - The columns of items to be displayed
+ * - The path towards the current focused item
+ * - The path towards the current selected item (referred to by Cascader's value)
+ *
+ * @param params
+ * @returns
+ */
+function usePaths(_ref) {
+  var data = _ref.data,
+      activeItem = _ref.activeItem,
+      selectedItem = _ref.selectedItem,
+      getParent = _ref.getParent,
+      getChildren = _ref.getChildren;
+  var pathTowardsSelectedItem = (0, _react.useMemo)(function () {
+    return getPathTowardsItem(selectedItem, getParent);
+  }, [getParent, selectedItem]);
 
   var _useMemo = (0, _react.useMemo)(function () {
-    return getColumnsAndPaths(data, value, {
-      valueKey: valueKey,
-      childrenKey: childrenKey
+    return getColumnsAndPaths(data, activeItem, {
+      getParent: getParent,
+      getChildren: getChildren
     });
-  }, [data, value, valueKey, childrenKey]),
-      columns = _useMemo.columns,
-      paths = _useMemo.paths; // The columns displayed in the cascading panel.
+  }, [data, activeItem, getParent, getChildren]),
+      columnsToDisplay = _useMemo.columns,
+      pathTowardsActiveItem = _useMemo.path;
 
+  return {
+    columnsToDisplay: columnsToDisplay,
+    pathTowardsSelectedItem: pathTowardsSelectedItem,
+    pathTowardsActiveItem: pathTowardsActiveItem
+  };
+}
+/**
+ * Returns a WeakMap that maps each item in `items` to its parent
+ * indicated by `getChildren` function
+ */
 
-  var _useState = (0, _react.useState)(columns),
-      columnData = _useState[0],
-      setColumnData = _useState[1]; // The path after cascading data selection.
 
+function getParentMap(items, getChildren) {
+  var map = new WeakMap();
 
-  var _useState2 = (0, _react.useState)(paths),
-      selectedPaths = _useState2[0],
-      setSelectedPaths = _useState2[1]; // The path corresponding to the selected value.
+  for (var queue = [].concat(items); queue.length > 0;) {
+    var _item = queue.shift();
 
+    var children = getChildren(_item);
 
-  var _useState3 = (0, _react.useState)(paths),
-      valueToPaths = _useState3[0],
-      setValueToPaths = _useState3[1];
-  /**
-   * Add a list of options to the cascading panel. Used for lazy loading options.
-   * @param column
-   * @param index The index of the current column.
-   */
+    if (children) {
+      for (var _iterator = _createForOfIteratorHelperLoose(children), _step; !(_step = _iterator()).done;) {
+        var child = _step.value;
+        map.set(child, _item);
+        queue.push(child);
+      }
+    }
+  }
 
+  return map;
+}
+/**
+ * Returns an array indicating the hirearchy path from root towards `target` item
+ */
 
-  function addColumn(column, index) {
-    setColumnData([].concat((0, _slice.default)(columnData, 0, index), [column]));
-  }
-  /**
-   * Remove subsequent columns of the specified column
-   * @param index
-   */
 
+function getPathTowardsItem(target, getParent) {
+  if (!target) return [];
+  var path = [target];
 
-  function removeColumnByIndex(index) {
-    setColumnData([].concat((0, _slice.default)(columnData, 0, index)));
-  }
-  /**
-   * Enforce update of columns and paths.
-   * @param nextValue  Selected value
-   * @param isAttachChildren  Whether to attach the children of the selected node.
-   */
-
-
-  function enforceUpdate(nextValue, isAttachChildren) {
-    var _getColumnsAndPaths = getColumnsAndPaths(data, nextValue, {
-      valueKey: valueKey,
-      childrenKey: childrenKey,
-      isAttachChildren: isAttachChildren
-    }),
-        columns = _getColumnsAndPaths.columns,
-        paths = _getColumnsAndPaths.paths;
-
-    setColumnData(columns);
-    setSelectedPaths(paths);
+  for (var parent = getParent(target); !!parent; parent = getParent(parent)) {
+    path.unshift(parent);
   }
 
-  (0, _utils.useUpdateEffect)(function () {
-    // Update paths when value is updated, then update valueToPaths.
-    setValueToPaths(paths);
-  }, [paths]);
-  (0, _utils.useUpdateEffect)(function () {
-    enforceUpdate(value);
-  }, [data]);
-  return {
-    enforceUpdate: enforceUpdate,
-    columnData: columnData,
-    valueToPaths: valueToPaths,
-    selectedPaths: selectedPaths,
-    setValueToPaths: setValueToPaths,
-    setColumnData: setColumnData,
-    setSelectedPaths: setSelectedPaths,
-    addColumn: addColumn,
-    removeColumnByIndex: removeColumnByIndex
-  };
+  return path;
 }

package/cjs/DatePicker/DatePicker.d.ts

@@ -21,8 +21,10 @@ export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, Form
     inline?: boolean;
     /** ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day */
     isoWeek?: boolean;
-    /** Set the lower limit of the available year relative to the current selection date */
+    /** Set the upper limit of the available year relative to the current selection date */
     limitEndYear?: number;
+    /** Set the lower limit of the available year relative to the current selection date */
+    limitStartYear?: number;
     /** Whether to show week numbers */
     showWeekNumbers?: boolean;
     /** Meridian format */

package/cjs/DatePicker/DatePicker.js

@@ -63,6 +63,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       isoWeek = props.isoWeek,
       _props$limitEndYear = props.limitEndYear,
       limitEndYear = _props$limitEndYear === void 0 ? 1000 : _props$limitEndYear,
+      limitStartYear = props.limitStartYear,
       overrideLocale = props.locale,
       menuClassName = props.menuClassName,
       _props$appearance = props.appearance,
@@ -101,7 +102,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onSelect = props.onSelect,
       onToggleMonthDropdown = props.onToggleMonthDropdown,
       onToggleTimeDropdown = props.onToggleTimeDropdown,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "editable", "defaultValue", "disabled", "format", "isoWeek", "limitEndYear", "locale", "menuClassName", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "toggleAs", "caretAs", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "renderValue", "onChange", "onChangeCalendarDate", "onClean", "onClose", "onEntered", "onExited", "onNextMonth", "onOk", "onOpen", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "editable", "defaultValue", "disabled", "format", "isoWeek", "limitEndYear", "limitStartYear", "locale", "menuClassName", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "toggleAs", "caretAs", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "renderValue", "onChange", "onChangeCalendarDate", "onClean", "onClose", "onEntered", "onExited", "onNextMonth", "onOk", "onOpen", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown"]);
 
   var _useCustom = (0, _utils.useCustom)('DatePicker', overrideLocale),
       locale = _useCustom.locale,
@@ -386,6 +387,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     disabledMinutes: shouldDisableMinute !== null && shouldDisableMinute !== void 0 ? shouldDisableMinute : DEPRECATED_disabledMinutes,
     disabledSeconds: shouldDisableSecond !== null && shouldDisableSecond !== void 0 ? shouldDisableSecond : DEPRECATED_disabledSeconds,
     limitEndYear: limitEndYear,
+    limitStartYear: limitStartYear,
     format: formatStr,
     isoWeek: isoWeek,
     calendarDate: calendarDate,
@@ -531,6 +533,7 @@ DatePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes, {
   hideSeconds: _propTypes.default.func,
   isoWeek: _propTypes.default.bool,
   limitEndYear: _propTypes.default.number,
+  limitStartYear: _propTypes.default.number,
   onChange: _propTypes.default.func,
   onChangeCalendarDate: _propTypes.default.func,
   onNextMonth: _propTypes.default.func,

package/cjs/DateRangePicker/Calendar.d.ts

@@ -13,6 +13,7 @@ export interface CalendarProps extends WithAsProps, Omit<CalendarCoreProps, Omit
     index: number;
     isoWeek?: boolean;
     limitEndYear?: number;
+    limitStartYear?: number;
     locale?: DatePickerLocale;
     onChangeCalendarMonth?: (index: number, date: Date) => void;
     onChangeCalendarTime?: (index: number, date: Date) => void;

package/cjs/DateRangePicker/Calendar.js

@@ -32,13 +32,14 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       _props$index = props.index,
       index = _props$index === void 0 ? 0 : _props$index,
       limitEndYear = props.limitEndYear,
+      limitStartYear = props.limitStartYear,
       onChangeCalendarMonth = props.onChangeCalendarMonth,
       onChangeCalendarTime = props.onChangeCalendarTime,
       onToggleMeridian = props.onToggleMeridian,
       onSelect = props.onSelect,
       _props$value = props.value,
       value = _props$value === void 0 ? [] : _props$value,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "onChangeCalendarMonth", "onChangeCalendarTime", "onToggleMeridian", "onSelect", "value"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "limitStartYear", "onChangeCalendarMonth", "onChangeCalendarTime", "onToggleMeridian", "onSelect", "value"]);
   var onMoveForward = (0, _react.useCallback)(function (nextPageDate) {
     onChangeCalendarMonth === null || onChangeCalendarMonth === void 0 ? void 0 : onChangeCalendarMonth(index, nextPageDate);
   }, [index, onChangeCalendarMonth]);
@@ -75,6 +76,7 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     disabledDate: disabledMonth,
     index: index,
     limitEndYear: limitEndYear,
+    limitStartYear: limitStartYear,
     onChangeMonth: handleChangeMonth,
     onChangeTime: handleChangeTime,
     onMoveBackward: handleMoveBackward,
@@ -95,6 +97,7 @@ Calendar.propTypes = {
   format: _propTypes.default.string,
   isoWeek: _propTypes.default.bool,
   limitEndYear: _propTypes.default.number,
+  limitStartYear: _propTypes.default.number,
   classPrefix: _propTypes.default.string,
   disabledDate: _propTypes.default.func,
   onSelect: _propTypes.default.func,

package/cjs/DateRangePicker/DateRangePicker.d.ts

@@ -15,8 +15,10 @@ export interface DateRangePickerProps extends PickerBaseProps, FormControlBasePr
     oneTap?: boolean;
     /** ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day */
     isoWeek?: boolean;
-    /** Set the lower limit of the available year relative to the current selection date */
+    /** Set the upper limit of the available year relative to the current selection date */
     limitEndYear?: number;
+    /** Set the lower limit of the available year relative to the current selection date */
+    limitStartYear?: number;
     /** Whether to show week numbers */
     showWeekNumbers?: boolean;
     /** Show only one calendar select */

package/cjs/DateRangePicker/DateRangePicker.js

@@ -77,6 +77,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       isoWeek = _props$isoWeek === void 0 ? false : _props$isoWeek,
       _props$limitEndYear = props.limitEndYear,
       limitEndYear = _props$limitEndYear === void 0 ? 1000 : _props$limitEndYear,
+      limitStartYear = props.limitStartYear,
       overrideLocale = props.locale,
       menuClassName = props.menuClassName,
       menuStyle = props.menuStyle,
@@ -105,7 +106,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       onOpen = props.onOpen,
       onSelect = props.onSelect,
       renderTitle = props.renderTitle,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "appearance", "editable", "cleanable", "character", "defaultCalendarValue", "defaultValue", "disabled", "disabledDate", "shouldDisableDate", "format", "hoverRange", "isoWeek", "limitEndYear", "locale", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "renderValue", "showOneCalendar", "showWeekNumbers", "showMeridian", "style", "toggleAs", "caretAs", "value", "onChange", "onClean", "onClose", "onEnter", "onEntered", "onExited", "onOk", "onOpen", "onSelect", "renderTitle"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "appearance", "editable", "cleanable", "character", "defaultCalendarValue", "defaultValue", "disabled", "disabledDate", "shouldDisableDate", "format", "hoverRange", "isoWeek", "limitEndYear", "limitStartYear", "locale", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "renderValue", "showOneCalendar", "showWeekNumbers", "showMeridian", "style", "toggleAs", "caretAs", "value", "onChange", "onClean", "onClose", "onEnter", "onEntered", "onExited", "onOk", "onOpen", "onSelect", "renderTitle"]);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
@@ -649,6 +650,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       hoverRangeValue: hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : undefined,
       isoWeek: isoWeek,
       limitEndYear: limitEndYear,
+      limitStartYear: limitStartYear,
       locale: locale,
       showWeekNumbers: showWeekNumbers,
       value: selectedDates,
@@ -776,6 +778,7 @@ DateRangePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes,
   isoWeek: _propTypes.default.bool,
   oneTap: _propTypes.default.bool,
   limitEndYear: _propTypes.default.number,
+  limitStartYear: _propTypes.default.number,
   onChange: _propTypes.default.func,
   onOk: _propTypes.default.func,
   disabledDate: (0, _deprecatePropType.deprecatePropTypeNew)(_propTypes.default.func, 'Use "shouldDisableDate" property instead.'),

package/cjs/MultiCascader/DropdownMenu.d.ts

@@ -10,11 +10,11 @@ export interface DropdownMenuProps extends WithAsProps {
     menuWidth?: number;
     menuHeight?: number | string;
     cascade?: boolean;
-    cascadeData: ItemDataType[][];
+    cascadeData: (readonly ItemDataType[])[];
     cascadePaths?: ItemDataType[];
     uncheckableItemValues: ValueType;
     renderMenuItem?: (itemLabel: React.MouseEventHandler, item: ItemDataType) => React.ReactNode;
-    renderMenu?: (children: ItemDataType[], menu: React.ReactNode, parentNode?: ItemDataType, layer?: number) => React.ReactNode;
+    renderMenu?: (children: readonly ItemDataType[], menu: React.ReactNode, parentNode?: ItemDataType, layer?: number) => React.ReactNode;
     onCheck?: (node: ItemDataType, event: React.SyntheticEvent, checked: boolean) => void;
     onSelect?: (node: ItemDataType, cascadePaths: ItemDataType[], event: React.SyntheticEvent) => void;
 }

package/cjs/MultiCascader/MultiCascader.d.ts

@@ -18,7 +18,7 @@ export interface MultiCascaderProps<T = ValueType> extends FormControlPickerProp
     /** The menu is displayed directly when the component is initialized */
     inline?: 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: any) => React.ReactNode;
     /** Custom render selected items */

package/cjs/MultiCascader/MultiCascader.js

@@ -167,17 +167,22 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       return overlayRef.current;
     },
     callback: (0, _react.useCallback)(function (value) {
-      var _getColumnsAndPaths = (0, _utils2.getColumnsAndPaths)(data, value, {
-        valueKey: valueKey,
-        childrenKey: childrenKey,
-        isAttachChildren: true
+      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,
-          paths = _getColumnsAndPaths.paths;
+          path = _getColumnsAndPaths.path;
 
       setColumnData(columns);
-      setSelectedPaths(paths);
-    }, [childrenKey, data, setColumnData, valueKey])
+      setSelectedPaths(path);
+    }, [childrenKey, data, flattenData, setColumnData, valueKey])
   }),
       focusItemValue = _useFocusItemValue.focusItemValue,
       setLayer = _useFocusItemValue.setLayer,

package/cjs/MultiCascader/utils.d.ts

@@ -49,10 +49,10 @@ export declare function useFlattenData<T>(data: T[], itemKeys: ItemKeys): {
  * @param flattenData
  */
 export declare function useColumnData<T extends MayHasParent<Record<string, unknown>>>(flattenData: T[]): {
-    columnData: T[][];
+    columnData: (readonly T[])[];
     addColumn: (column: T[], index: number) => void;
     removeColumnByIndex: (index: number) => void;
-    setColumnData: import("react").Dispatch<import("react").SetStateAction<T[][]>>;
+    setColumnData: import("react").Dispatch<import("react").SetStateAction<(readonly T[])[]>>;
     enforceUpdateColumnData: (nextData: T[]) => void;
 };
 /**

package/cjs/MultiCascader/utils.js

@@ -192,7 +192,7 @@ exports.removeAllChildrenValue = removeAllChildrenValue;
 function useFlattenData(data, itemKeys) {
   var childrenKey = itemKeys.childrenKey;
 
-  var _useState = (0, _react.useState)((0, _treeUtils.flattenTree)(data, itemKeys.childrenKey)),
+  var _useState = (0, _react.useState)((0, _treeUtils.UNSAFE_flattenTree)(data, itemKeys.childrenKey)),
       flattenData = _useState[0],
       setFlattenData = _useState[1];
 
@@ -204,7 +204,7 @@ function useFlattenData(data, itemKeys) {
     setFlattenData([].concat(flattenData, nodes));
   }, [childrenKey, flattenData]);
   (0, _react.useEffect)(function () {
-    setFlattenData((0, _treeUtils.flattenTree)(data, itemKeys.childrenKey));
+    setFlattenData((0, _treeUtils.UNSAFE_flattenTree)(data, itemKeys.childrenKey));
   }, [data, itemKeys.childrenKey]);
   return {
     addFlattenData: addFlattenData,
@@ -245,7 +245,7 @@ function useColumnData(flattenData) {
   }
 
   function enforceUpdateColumnData(nextData) {
-    var nextFlattenData = (0, _treeUtils.flattenTree)(nextData);
+    var nextFlattenData = (0, _treeUtils.UNSAFE_flattenTree)(nextData);
     setColumnData([nextFlattenData.filter(function (item) {
       return !item.parent;
     })]);

package/cjs/Picker/utils.d.ts

@@ -42,21 +42,22 @@ export interface EventsProps {
  * @param events Event callback functions
  */
 export declare function onMenuKeyDown(event: React.KeyboardEvent, events: EventsProps): void;
-export interface FocusItemValueProps {
+export interface FocusItemValueProps<T = unknown> {
     target: HTMLElement | null | (() => HTMLElement | null);
-    data?: any[];
+    data?: T[];
     valueKey?: string;
     focusableQueryKey?: string;
     defaultLayer?: number;
     rtl?: boolean;
     callback?: (value: any, event: React.KeyboardEvent) => void;
+    getParent?: (node: T) => T | undefined;
 }
 /**
  * A hook that manages the focus state of the option.
  * @param defaultFocusItemValue
  * @param props
  */
-export declare const useFocusItemValue: <T>(defaultFocusItemValue: T | null | undefined, props: FocusItemValueProps) => {
+export declare const useFocusItemValue: <T, D>(defaultFocusItemValue: T | null | undefined, props: FocusItemValueProps<D>) => {
     focusItemValue: T | null | undefined;
     setFocusItemValue: React.Dispatch<React.SetStateAction<T | null | undefined>>;
     layer: number;

package/cjs/Picker/utils.js

@@ -219,7 +219,11 @@ var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue, props)
       data = props.data,
       target = props.target,
       rtl = props.rtl,
-      callback = props.callback;
+      callback = props.callback,
+      _props$getParent = props.getParent,
+      getParent = _props$getParent === void 0 ? function (item) {
+    return item === null || item === void 0 ? void 0 : item.parent;
+  } : _props$getParent;
 
   var _useState = (0, _react.useState)(defaultFocusItemValue),
       focusItemValue = _useState[0],
@@ -381,21 +385,21 @@ var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue, props)
     var nextKeys = getSubMenuKeys(nextLayer);
 
     if (nextKeys) {
-      var _focusItem$parent;
+      var _getParent;
 
       setKeys(nextKeys);
       setLayer(nextLayer);
       var focusItem = (0, _treeUtils.findNodeOfTree)(data, function (item) {
         return item[valueKey] === focusItemValue;
       });
-      var parentItemValue = focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent = focusItem.parent) === null || _focusItem$parent === void 0 ? void 0 : _focusItem$parent[valueKey];
+      var parentItemValue = (_getParent = getParent(focusItem)) === null || _getParent === void 0 ? void 0 : _getParent[valueKey];
 
       if (parentItemValue) {
         setFocusItemValue(parentItemValue);
         callback === null || callback === void 0 ? void 0 : callback(parentItemValue, event);
       }
     }
-  }, [callback, data, focusItemValue, getSubMenuKeys, layer, valueKey]);
+  }, [callback, data, focusItemValue, getParent, getSubMenuKeys, layer, valueKey]);
   var handleKeyDown = (0, _react.useCallback)(function (event) {
     var _onMenuKeyDown;
 

package/cjs/utils/getDataGroupBy.js

@@ -50,5 +50,5 @@ function getDataGroupBy(data, key, sort) {
     nextData = nextData.sort(sort(true));
   }
 
-  return (0, _treeUtils.flattenTree)(nextData);
+  return (0, _treeUtils.UNSAFE_flattenTree)(nextData);
 }

package/cjs/utils/treeUtils.d.ts

@@ -16,8 +16,12 @@ export declare function shouldShowNodeByParentExpanded<T>(expandItemValues?: T[]
  * @param {*} tree
  * @param {*} childrenKey
  * @param {*} executor
+ *
+ * @deprecated This {@link UNSAFE_flattenTree} function is considered unsafe because it mutates `tree` argument in-place
+ *             Use {@link flattenTree} instead.
  */
-export declare function flattenTree<TItem>(tree: TItem[], childrenKey?: string, executor?: (node: any, index: number) => any): TItem[];
+export declare function UNSAFE_flattenTree<TItem>(tree: TItem[], childrenKey?: string, executor?: (node: any, index: number) => any): TItem[];
+export declare function flattenTree<T>(rootNodes: readonly T[], getChildren: (node: T) => readonly T[] | undefined): T[];
 /**
  * get all ancestor nodes of given node
  * @param {*} node