rsuite 5.31.1 → 5.33.0

package/esm/Cascader/utils.js

@@ -1,161 +1,83 @@
-import { useState, useMemo } from 'react';
-import slice from 'lodash/slice';
-import { shallowEqual, useUpdateEffect } from '../utils';
-import { findNodeOfTree } from '../utils/treeUtils';
-import { attachParent } from '../utils/attachParent';
-export 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 (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 attachParent(item, items[i]);
-          }));
-          paths.push(node.active);
-          return {
-            v: {
-              items: items,
-              active: items[i]
-            }
-          };
-        }
-      }
+import { useMemo } from 'react';
+import { getPathTowardsItem } from '../utils/treeUtils';
+
+/**
+ * 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
+ */
+export 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 = 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
   };
 }
-export 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
+ */
+export function usePaths(_ref) {
+  var data = _ref.data,
+      activeItem = _ref.activeItem,
+      selectedItem = _ref.selectedItem,
+      getParent = _ref.getParent,
+      getChildren = _ref.getChildren;
+  var pathTowardsSelectedItem = useMemo(function () {
+    return getPathTowardsItem(selectedItem, getParent);
+  }, [getParent, selectedItem]);
 
   var _useMemo = 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 = useState(columns),
-      columnData = _useState[0],
-      setColumnData = _useState[1]; // The path after cascading data selection.
-
-
-  var _useState2 = useState(paths),
-      selectedPaths = _useState2[0],
-      setSelectedPaths = _useState2[1]; // The path corresponding to the selected value.
-
-
-  var _useState3 = 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(slice(columnData, 0, index), [column]));
-  }
-  /**
-   * Remove subsequent columns of the specified column
-   * @param index
-   */
-
-
-  function removeColumnByIndex(index) {
-    setColumnData([].concat(slice(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;
 
-  useUpdateEffect(function () {
-    // Update paths when value is updated, then update valueToPaths.
-    setValueToPaths(paths);
-  }, [paths]);
-  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/esm/CheckTreePicker/CheckTreePicker.js

@@ -12,7 +12,7 @@ import classNames from 'classnames';
 import { List, AutoSizer } from '../Windowing';
 import CheckTreeNode from './CheckTreeNode';
 import TreeContext from '../Tree/TreeContext';
-import { getTreeNodeIndent } from '../utils/treeUtils';
+import { getKeyParentMap, getPathTowardsItem, getTreeNodeIndent } from '../utils/treeUtils';
 import { createChainedFunction, useCustom, useClassNames, useControlled, KEY_VALUES, mergeRefs } from '../utils';
 import { PickerToggle, onMenuKeyDown as _onMenuKeyDown, PickerOverlay, SearchBar, SelectedElement, PickerToggleTrigger, createConcatChildrenFunction, usePickerClassName, usePublicMethods, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes, useToggleKeyDownEvent } from '../Picker';
 import { isEveryChildChecked, isSomeNodeHasChildren, isAllSiblingNodeUncheckable, isEveryFirstLevelNodeUncheckable, getFormattedTree, getDisabledState, getCheckTreePickerDefaultValue, getSelectedItems, isNodeUncheckable } from './utils';
@@ -91,13 +91,14 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       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 = _objectWithoutPropertiesLoose(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 = _objectWithoutPropertiesLoose(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 = useContext(TreeContext),
       inline = _useContext.inline;
@@ -343,7 +344,16 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     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 = useMemo(function () {
+    return getKeyParentMap(data, function (node) {
+      return node[valueKey];
+    }, function (node) {
+      return node[childrenKey];
+    });
+  }, [childrenKey, data, valueKey]);
   var handleSelect = useCallback(function (node, event) {
     var currentNode = node.refKey ? flattenNodes[node.refKey] : null;
 
@@ -368,7 +378,10 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     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, getPathTowardsItem(node, function (item) {
+      return itemParentMap.get(item[valueKey]);
+    }));
+  }, [flattenNodes, toggleChecked, isControlled, valueKey, onChange, onSelect, onSelectItem, unSerializeList, cascade, uncheckableItemValues, setValue, itemParentMap]);
   var handleOpen = useCallback(function () {
     var _triggerRef$current, _triggerRef$current$o;
 

package/esm/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/esm/DatePicker/DatePicker.js

@@ -35,6 +35,7 @@ var DatePicker = /*#__PURE__*/React.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,
@@ -73,7 +74,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onSelect = props.onSelect,
       onToggleMonthDropdown = props.onToggleMonthDropdown,
       onToggleTimeDropdown = props.onToggleTimeDropdown,
-      rest = _objectWithoutPropertiesLoose(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 = _objectWithoutPropertiesLoose(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 = useCustom('DatePicker', overrideLocale),
       locale = _useCustom.locale,
@@ -352,6 +353,7 @@ var DatePicker = /*#__PURE__*/React.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,
@@ -495,6 +497,7 @@ DatePicker.propTypes = _extends({}, pickerPropTypes, {
   hideSeconds: PropTypes.func,
   isoWeek: PropTypes.bool,
   limitEndYear: PropTypes.number,
+  limitStartYear: PropTypes.number,
   onChange: PropTypes.func,
   onChangeCalendarDate: PropTypes.func,
   onNextMonth: PropTypes.func,

package/esm/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/esm/DateRangePicker/Calendar.js

@@ -16,13 +16,14 @@ var Calendar = /*#__PURE__*/React.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 = _objectWithoutPropertiesLoose(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "onChangeCalendarMonth", "onChangeCalendarTime", "onToggleMeridian", "onSelect", "value"]);
+      rest = _objectWithoutPropertiesLoose(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "limitStartYear", "onChangeCalendarMonth", "onChangeCalendarTime", "onToggleMeridian", "onSelect", "value"]);
 
   var onMoveForward = useCallback(function (nextPageDate) {
     onChangeCalendarMonth === null || onChangeCalendarMonth === void 0 ? void 0 : onChangeCalendarMonth(index, nextPageDate);
@@ -60,6 +61,7 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
     disabledDate: disabledMonth,
     index: index,
     limitEndYear: limitEndYear,
+    limitStartYear: limitStartYear,
     onChangeMonth: handleChangeMonth,
     onChangeTime: handleChangeTime,
     onMoveBackward: handleMoveBackward,
@@ -79,6 +81,7 @@ Calendar.propTypes = {
   format: PropTypes.string,
   isoWeek: PropTypes.bool,
   limitEndYear: PropTypes.number,
+  limitStartYear: PropTypes.number,
   classPrefix: PropTypes.string,
   disabledDate: PropTypes.func,
   onSelect: PropTypes.func,

package/esm/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/esm/DateRangePicker/DateRangePicker.js

@@ -47,6 +47,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       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,
@@ -75,7 +76,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onOpen = props.onOpen,
       onSelect = props.onSelect,
       renderTitle = props.renderTitle,
-      rest = _objectWithoutPropertiesLoose(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 = _objectWithoutPropertiesLoose(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 = useClassNames(classPrefix),
       merge = _useClassNames.merge,
@@ -621,6 +622,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       hoverRangeValue: hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : undefined,
       isoWeek: isoWeek,
       limitEndYear: limitEndYear,
+      limitStartYear: limitStartYear,
       locale: locale,
       showWeekNumbers: showWeekNumbers,
       value: selectedDates,
@@ -747,6 +749,7 @@ DateRangePicker.propTypes = _extends({}, pickerPropTypes, {
   isoWeek: PropTypes.bool,
   oneTap: PropTypes.bool,
   limitEndYear: PropTypes.number,
+  limitStartYear: PropTypes.number,
   onChange: PropTypes.func,
   onOk: PropTypes.func,
   disabledDate: deprecatePropTypeNew(PropTypes.func, 'Use "shouldDisableDate" property instead.'),

package/esm/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/esm/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/esm/MultiCascader/MultiCascader.js

@@ -143,17 +143,22 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return overlayRef.current;
     },
     callback: useCallback(function (value) {
-      var _getColumnsAndPaths = getColumnsAndPaths(data, value, {
-        valueKey: valueKey,
-        childrenKey: childrenKey,
-        isAttachChildren: true
+      var _getColumnsAndPaths = 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/esm/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/esm/MultiCascader/utils.js

@@ -2,7 +2,7 @@ import { useState, useEffect, useCallback } from 'react';
 import uniq from 'lodash/uniq';
 import remove from 'lodash/remove';
 import slice from 'lodash/slice';
-import { flattenTree } from '../utils/treeUtils';
+import { UNSAFE_flattenTree } from '../utils/treeUtils';
 import { attachParent } from '../utils/attachParent';
 
 /**
@@ -162,7 +162,7 @@ export var removeAllChildrenValue = function removeAllChildrenValue(value, item,
 export function useFlattenData(data, itemKeys) {
   var childrenKey = itemKeys.childrenKey;
 
-  var _useState = useState(flattenTree(data, itemKeys.childrenKey)),
+  var _useState = useState(UNSAFE_flattenTree(data, itemKeys.childrenKey)),
       flattenData = _useState[0],
       setFlattenData = _useState[1];
 
@@ -174,7 +174,7 @@ export function useFlattenData(data, itemKeys) {
     setFlattenData([].concat(flattenData, nodes));
   }, [childrenKey, flattenData]);
   useEffect(function () {
-    setFlattenData(flattenTree(data, itemKeys.childrenKey));
+    setFlattenData(UNSAFE_flattenTree(data, itemKeys.childrenKey));
   }, [data, itemKeys.childrenKey]);
   return {
     addFlattenData: addFlattenData,
@@ -214,7 +214,7 @@ export function useColumnData(flattenData) {
   }
 
   function enforceUpdateColumnData(nextData) {
-    var nextFlattenData = flattenTree(nextData);
+    var nextFlattenData = UNSAFE_flattenTree(nextData);
     setColumnData([nextFlattenData.filter(function (item) {
       return !item.parent;
     })]);

package/esm/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/esm/Picker/utils.js

@@ -191,7 +191,11 @@ export var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue,
       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 = useState(defaultFocusItemValue),
       focusItemValue = _useState[0],
@@ -353,21 +357,21 @@ export var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue,
     var nextKeys = getSubMenuKeys(nextLayer);
 
     if (nextKeys) {
-      var _focusItem$parent;
+      var _getParent;
 
       setKeys(nextKeys);
       setLayer(nextLayer);
       var focusItem = 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 = useCallback(function (event) {
     var _onMenuKeyDown;
 

package/esm/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 */