rsuite 5.31.1 → 5.33.0

package/cjs/Cascader/utils.js

@@ -1,175 +1,90 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 exports.__esModule = true;
 exports.getColumnsAndPaths = getColumnsAndPaths;
 exports.usePaths = usePaths;
 
 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]
-            }
-          };
-        }
-      }
+/**
+ * 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 (0, _treeUtils.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.
-
-
-  var _useState = (0, _react.useState)(columns),
-      columnData = _useState[0],
-      setColumnData = _useState[1]; // The path after cascading data selection.
-
-
-  var _useState2 = (0, _react.useState)(paths),
-      selectedPaths = _useState2[0],
-      setSelectedPaths = _useState2[1]; // The path corresponding to the selected value.
-
-
-  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.
-   */
-
-
-  function addColumn(column, index) {
-    setColumnData([].concat((0, _slice.default)(columnData, 0, index), [column]));
-  }
-  /**
-   * Remove subsequent columns of the specified column
-   * @param index
-   */
-
-
-  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);
-  }
+  }, [data, activeItem, getParent, getChildren]),
+      columnsToDisplay = _useMemo.columns,
+      pathTowardsActiveItem = _useMemo.path;
 
-  (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
+    columnsToDisplay: columnsToDisplay,
+    pathTowardsSelectedItem: pathTowardsSelectedItem,
+    pathTowardsActiveItem: pathTowardsActiveItem
   };
 }

package/cjs/CheckTreePicker/CheckTreePicker.js

@@ -117,13 +117,14 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       onExited = props.onExited,
       onSearch = props.onSearch,
       onSelect = props.onSelect,
+      onSelectItem = props.onSelectItem,
       onOpen = props.onOpen,
       onScroll = props.onScroll,
       onExpand = props.onExpand,
       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", "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"]);
+      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", "onSelectItem", "onOpen", "onScroll", "onExpand", "renderValue", "renderTreeIcon", "renderTreeNode"]);
 
   var _useContext = (0, _react.useContext)(_TreeContext.default),
       inline = _useContext.inline;
@@ -368,7 +369,16 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     return values.filter(function (v) {
       return !uncheckableItemValues.includes(v);
     });
-  }, [flattenNodes, uncheckableItemValues, serializeListOnlyParent, toggleDownChecked, toggleUpChecked]);
+  }, [flattenNodes, uncheckableItemValues, serializeListOnlyParent, toggleDownChecked, toggleUpChecked]); // TODO-Doma
+  // Replace `getKeyParentMap` with `getParentMap`
+
+  var itemParentMap = (0, _react.useMemo)(function () {
+    return (0, _treeUtils.getKeyParentMap)(data, function (node) {
+      return node[valueKey];
+    }, function (node) {
+      return node[childrenKey];
+    });
+  }, [childrenKey, data, valueKey]);
   var handleSelect = (0, _react.useCallback)(function (node, event) {
     var currentNode = node.refKey ? flattenNodes[node.refKey] : null;
 
@@ -393,7 +403,10 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     setFocusItemValue(node[valueKey]);
     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]);
+    onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem(node, (0, _treeUtils.getPathTowardsItem)(node, function (item) {
+      return itemParentMap.get(item[valueKey]);
+    }));
+  }, [flattenNodes, toggleChecked, isControlled, valueKey, onChange, onSelect, onSelectItem, unSerializeList, cascade, uncheckableItemValues, setValue, itemParentMap]);
   var handleOpen = (0, _react.useCallback)(function () {
     var _triggerRef$current, _triggerRef$current$o;
 

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/Tree/Tree.d.ts

@@ -60,6 +60,8 @@ export interface TreeBaseProps<ValueType = string | number, ItemDataType = Recor
     onExpand?: (expandItemValues: ItemDataType[], activeNode: ItemDataType, concat: (data: ItemDataType[], children: ItemDataType[]) => ItemDataType[]) => void;
     /** Callback function after selecting tree node */
     onSelect?: (activeNode: ItemDataType, value: ValueType, event: React.SyntheticEvent) => void;
+    /** Callback when a tree item is clicked */
+    onSelectItem?: (item: ItemDataType, path: ItemDataType[]) => void;
     /** Custom Render tree Node */
     renderTreeNode?: (nodeData: ItemDataType) => React.ReactNode;
     /** Custom Render icon */