rsuite 5.32.0 → 5.33.1

package/esm/Carousel/Carousel.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import React, { useState, useMemo, useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { useClassNames, useCustom, guid, ReactChildren, useTimeout, mergeRefs, useControlled } from '../utils';
+import { useClassNames, useCustom, guid, ReactChildren, useTimeout, mergeRefs, useControlled, useUpdateEffect } from '../utils';
 var Carousel = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _sliderStyles, _ref;
 
@@ -43,13 +43,23 @@ var Carousel = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var _useControlled = useControlled(activeIndexProp, defaultActiveIndex),
       activeIndex = _useControlled[0],
-      setActiveIndex = _useControlled[1];
+      setActiveIndex = _useControlled[1],
+      isControlled = _useControlled[2];
 
   var _useState = useState(0),
       lastIndex = _useState[0],
       setLastIndex = _useState[1];
 
-  var rootRef = useRef(null); // Set a timer for automatic playback.
+  var rootRef = useRef(null);
+  useUpdateEffect(function () {
+    // When the index is controlled, the index is not updated when the number of children changes.
+    if (isControlled) {
+      return;
+    } // Reset the index when the number of children changes.
+
+
+    setActiveIndex(0);
+  }, [children, isControlled]); // Set a timer for automatic playback.
   // `autoplay` needs to be cast to boolean type to avoid undefined parameters.
 
   var _useTimeout = useTimeout(function () {

package/esm/Cascader/Cascader.js

@@ -9,8 +9,8 @@ import isNil from 'lodash/isNil';
 import isFunction from 'lodash/isFunction';
 import shallowEqual from '../utils/shallowEqual';
 import DropdownMenu from './DropdownMenu';
-import { findNodeOfTree, flattenTree } from '../utils/treeUtils';
-import { getParentMap, getPathTowardsItem, usePaths } from './utils';
+import { getParentMap, getPathTowardsItem, findNodeOfTree, flattenTree } from '../utils/treeUtils';
+import { usePaths } from './utils';
 import { getSafeRegExpString, createChainedFunction, mergeRefs, useControlled, useCustom, useClassNames, useIsMounted } from '../utils';
 import { PickerToggle, PickerOverlay, SearchBar, PickerToggleTrigger, usePickerClassName, usePublicMethods, useToggleKeyDownEvent, useFocusItemValue, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
 import { useMap } from '../utils/useMap';

package/esm/Cascader/utils.d.ts

@@ -46,13 +46,4 @@ export declare function usePaths<T extends Record<string, unknown>>({ data, acti
     pathTowardsSelectedItem: T[];
     pathTowardsActiveItem: T[];
 };
-/**
- * Returns a WeakMap that maps each item in `items` to its parent
- * indicated by `getChildren` function
- */
-export declare function getParentMap<T extends Record<string, unknown>>(items: readonly T[], getChildren: (item: T) => readonly T[] | undefined): WeakMap<T, T>;
-/**
- * Returns an array indicating the hirearchy path from root towards `target` item
- */
-export declare function getPathTowardsItem<T>(target: T | undefined, getParent: (item: T) => T | undefined): T[];
 export {};

package/esm/Cascader/utils.js

@@ -1,10 +1,5 @@
-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; }
-
 import { useMemo } from 'react';
+import { getPathTowardsItem } from '../utils/treeUtils';
 
 /**
  * Calculate columns to be displayed:
@@ -85,42 +80,4 @@ export function usePaths(_ref) {
     pathTowardsSelectedItem: pathTowardsSelectedItem,
     pathTowardsActiveItem: pathTowardsActiveItem
   };
-}
-/**
- * Returns a WeakMap that maps each item in `items` to its parent
- * indicated by `getChildren` function
- */
-
-export function getParentMap(items, getChildren) {
-  var map = new WeakMap();
-
-  for (var queue = [].concat(items); queue.length > 0;) {
-    var _item = queue.shift();
-
-    var children = getChildren(_item);
-
-    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
- */
-
-export function getPathTowardsItem(target, getParent) {
-  if (!target) return [];
-  var path = [target];
-
-  for (var parent = getParent(target); !!parent; parent = getParent(parent)) {
-    path.unshift(parent);
-  }
-
-  return path;
 }

package/esm/CheckPicker/CheckPicker.js

@@ -14,7 +14,8 @@ import omit from 'lodash/omit';
 import pick from 'lodash/pick';
 import isNil from 'lodash/isNil';
 import { filterNodesOfTree } from '../utils/treeUtils';
-import { createChainedFunction, getDataGroupBy, useClassNames, shallowEqual, useCustom, useControlled, mergeRefs } from '../utils';
+import { createChainedFunction, useClassNames, shallowEqual, useCustom, useControlled, mergeRefs } from '../utils';
+import { getDataGroupBy } from '../utils/getDataGroupBy';
 import { DropdownMenu, DropdownMenuCheckItem as DropdownMenuItem, PickerToggle, PickerOverlay, SearchBar, SelectedElement, PickerToggleTrigger, useFocusItemValue, usePickerClassName, useSearch, usePublicMethods, useToggleKeyDownEvent, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
 var emptyArray = [];
 var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -321,8 +322,10 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       dropdownMenuItemAs: DropdownMenuItem,
       activeItemValues: value,
       focusItemValue: focusItemValue,
-      data: [].concat(filteredStickyItems, items),
+      data: [].concat(filteredStickyItems, items) // `group` is redundant so long as `groupBy` exists
+      ,
       group: !isUndefined(groupBy),
+      groupBy: groupBy,
       onSelect: handleItemSelect,
       onGroupTitleClick: onGroupTitleClick,
       virtualized: virtualized

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.js

@@ -89,7 +89,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       value = _useControlled[0],
       setValue = _useControlled[1];
 
-  var _useCalendarDate = useCalendarDate(valueProp, calendarDefaultDate),
+  var _useCalendarDate = useCalendarDate(value, calendarDefaultDate),
       calendarDate = _useCalendarDate.calendarDate,
       setCalendarDate = _useCalendarDate.setCalendarDate,
       resetCalendarDate = _useCalendarDate.resetCalendarDate;

package/esm/InputPicker/InputPicker.js

@@ -18,7 +18,8 @@ import getWidth from 'dom-lib/getWidth';
 import shallowEqual from '../utils/shallowEqual';
 import { filterNodesOfTree } from '../utils/treeUtils';
 import Plaintext from '../Plaintext';
-import { createChainedFunction, tplTransform, getDataGroupBy, useClassNames, useCustom, useControlled, mergeRefs, isOneOf, KEY_VALUES } from '../utils';
+import { createChainedFunction, tplTransform, useClassNames, useCustom, useControlled, mergeRefs, isOneOf, KEY_VALUES } from '../utils';
+import { getDataGroupBy } from '../utils/getDataGroupBy';
 import { DropdownMenu, DropdownMenuItem, DropdownMenuCheckItem, PickerToggle, PickerOverlay, PickerToggleTrigger, useFocusItemValue, usePickerClassName, useSearch, usePublicMethods, useToggleKeyDownEvent, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
 import Tag from '../Tag';
 import InputAutosize from './InputAutosize';
@@ -623,8 +624,11 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       activeItemValues: multi ? value : [value],
       focusItemValue: focusItemValue,
       maxHeight: menuMaxHeight,
-      data: items,
+      data: items // FIXME-Doma
+      // `group` is redundant so long as `groupBy` exists
+      ,
       group: !isUndefined(groupBy),
+      groupBy: groupBy,
       onSelect: multi ? handleCheckTag : handleSelectItem // fixme don't use any
       ,
       renderMenuGroup: renderMenuGroup,

package/esm/MultiCascader/MultiCascader.js

@@ -225,6 +225,7 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$u = _triggerRef$current.updatePosition) === null || _triggerRef$current$u === void 0 ? void 0 : _triggerRef$current$u.call(_triggerRef$current);
   }, [onSelect, getChildren, childrenKey, inline, addFlattenData, addColumn, removeColumnByIndex]);
   var handleCheck = useCallback(function (node, event, checked) {
+    console.log('handleCheck');
     var nodeValue = node[valueKey];
     var nextValue = [];
 

package/esm/Picker/DropdownMenu.d.ts

@@ -6,6 +6,7 @@ export interface DropdownMenuProps<Multiple = false> extends StandardProps, Omit
     classPrefix: string;
     data?: ItemDataType[];
     group?: boolean;
+    groupBy?: string;
     disabledItemValues?: any[];
     activeItemValues?: any[];
     focusItemValue?: any;

package/esm/Picker/DropdownMenu.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _get from "lodash/get";
 
 var _this = this;
 
@@ -22,6 +23,7 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$data = props.data,
       data = _props$data === void 0 ? [] : _props$data,
       group = props.group,
+      groupBy = props.groupBy,
       _props$maxHeight = props.maxHeight,
       maxHeight = _props$maxHeight === void 0 ? 320 : _props$maxHeight,
       _props$activeItemValu = props.activeItemValues,
@@ -50,7 +52,7 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
       renderMenuItem = props.renderMenuItem,
       onGroupTitleClick = props.onGroupTitleClick,
       onSelect = props.onSelect,
-      rest = _objectWithoutPropertiesLoose(props, ["data", "group", "maxHeight", "activeItemValues", "disabledItemValues", "classPrefix", "valueKey", "labelKey", "virtualized", "listProps", "listRef", "className", "style", "focusItemValue", "dropdownMenuItemClassPrefix", "dropdownMenuItemAs", "rowHeight", "rowGroupHeight", "renderMenuGroup", "renderMenuItem", "onGroupTitleClick", "onSelect"]);
+      rest = _objectWithoutPropertiesLoose(props, ["data", "group", "groupBy", "maxHeight", "activeItemValues", "disabledItemValues", "classPrefix", "valueKey", "labelKey", "virtualized", "listProps", "listRef", "className", "style", "focusItemValue", "dropdownMenuItemClassPrefix", "dropdownMenuItemAs", "rowHeight", "rowGroupHeight", "renderMenuGroup", "renderMenuItem", "onGroupTitleClick", "onSelect"]);
 
   var _useClassNames = useClassNames(classPrefix),
       withClassPrefix = _useClassNames.withClassPrefix,
@@ -180,11 +182,21 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
 
   var filteredItems = group ? data.filter(function (item) {
-    return !(foldedGroupKeys !== null && foldedGroupKeys !== void 0 && foldedGroupKeys.some(function (key) {
-      var _item$parent;
+    var _item$parent;
 
-      return key === ((_item$parent = item.parent) === null || _item$parent === void 0 ? void 0 : _item$parent[KEY_GROUP_TITLE]);
-    }));
+    // Display group title items
+    if (item[KEY_GROUP]) return true; // Display items under the unfolded group
+    // FIXME-Doma
+    // `groupBy` is bound to be string when `group` is true
+    // because `group` is actually redundant as a prop
+    // It could simply be derived from `groupBy` value
+
+    var groupValue = _get(item, groupBy, '') || ( // FIXME-Doma
+    // Usage of `item.parent` is strongly discouraged
+    // It's only here for legacy support
+    // Remove once `item.parent` is completely removed across related components
+    (_item$parent = item.parent) === null || _item$parent === void 0 ? void 0 : _item$parent[KEY_GROUP_TITLE]);
+    return !foldedGroupKeys.includes(groupValue);
   }) : data;
   var rowCount = filteredItems.length;
   useMount(function () {

package/esm/Picker/utils.d.ts

@@ -73,6 +73,8 @@ export interface ToggleKeyDownEventProps {
     overlayRef?: React.RefObject<any>;
     searchInputRef?: React.RefObject<any>;
     active?: boolean;
+    readOnly?: boolean;
+    disabled?: boolean;
     onExit?: (event: any) => void;
     onKeyDown?: (event: any) => void;
     onOpen?: () => void;

package/esm/Picker/utils.js

@@ -403,6 +403,8 @@ export var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
       overlayRef = props.overlayRef,
       searchInputRef = props.searchInputRef,
       active = props.active,
+      readOnly = props.readOnly,
+      disabled = props.disabled,
       onExit = props.onExit,
       onOpen = props.onOpen,
       onClose = props.onClose,
@@ -431,6 +433,11 @@ export var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
     handleOpen();
   }, [active, handleOpen, handleClose]);
   var onToggle = useCallback(function (event) {
+    // Keyboard events should not be processed when readOnly and disabled are set.
+    if (readOnly || disabled) {
+      return;
+    }
+
     if (event.target === (targetRef === null || targetRef === void 0 ? void 0 : targetRef.current)) {
       // enter
       if (toggle && event.key === KEY_VALUES.ENTER) {
@@ -480,7 +487,7 @@ export var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
 
 
     onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-  }, [handleClose, handleToggleDropdown, overlayRef, onExit, onKeyDown, onMenuKeyDown, onMenuPressBackspace, onMenuPressEnter, toggle, targetRef, searchInputRef]);
+  }, [readOnly, disabled, targetRef, overlayRef, onKeyDown, toggle, handleToggleDropdown, onExit, onMenuKeyDown, searchInputRef, onMenuPressEnter, onMenuPressBackspace, handleClose]);
   return onToggle;
 };
 

package/esm/SelectPicker/SelectPicker.js

@@ -11,7 +11,8 @@ import isUndefined from 'lodash/isUndefined';
 import isNil from 'lodash/isNil';
 import isFunction from 'lodash/isFunction';
 import omit from 'lodash/omit';
-import { createChainedFunction, getDataGroupBy, useCustom, useClassNames, useControlled, mergeRefs, shallowEqual } from '../utils';
+import { createChainedFunction, useCustom, useClassNames, useControlled, mergeRefs, shallowEqual } from '../utils';
+import { getDataGroupBy } from '../utils/getDataGroupBy';
 import { DropdownMenu, DropdownMenuItem, PickerToggle, PickerToggleTrigger, PickerOverlay, SearchBar, useFocusItemValue, usePickerClassName, useSearch, usePublicMethods, useToggleKeyDownEvent, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
 var emptyArray = [];
 var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -260,8 +261,11 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       dropdownMenuItemAs: DropdownMenuItem,
       activeItemValues: [value],
       focusItemValue: focusItemValue,
-      data: items,
+      data: items // FIXME-Doma
+      // `group` is redundant so long as `groupBy` exists
+      ,
       group: !isUndefined(groupBy),
+      groupBy: groupBy,
       onSelect: handleItemSelect,
       onGroupTitleClick: onGroupTitleClick,
       virtualized: virtualized

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

package/esm/TreePicker/TreePicker.js

@@ -5,11 +5,11 @@ import _isNil from "lodash/isNil";
 import _isUndefined from "lodash/isUndefined";
 import _omit from "lodash/omit";
 import _pick from "lodash/pick";
-import React, { useState, useRef, useEffect, useCallback, useContext } from 'react';
+import React, { useState, useRef, useEffect, useCallback, useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { List, AutoSizer } from '../Windowing';
 import TreeNode from './TreeNode';
-import { createDragPreview, getTreeNodeIndent, removeDragPreview, stringifyTreeNodeLabel } from '../utils/treeUtils';
+import { createDragPreview, getKeyParentMap, getPathTowardsItem, getTreeNodeIndent, removeDragPreview, stringifyTreeNodeLabel } from '../utils/treeUtils';
 import { createChainedFunction, useClassNames, useCustom, useControlled, TREE_NODE_DROP_POSITION, KEY_VALUES, mergeRefs, shallowEqual } from '../utils';
 import { getExpandWhenSearching, hasVisibleChildren, getDragNodeKeys, calDropNodePosition, createUpdateTreeDataFunction, useTreeDrag, useFlattenTreeData, getTreeActiveNode, getDefaultExpandItemValues, useTreeNodeRefs, useTreeSearch, focusPreviousItem, getFocusableItems, focusNextItem, getActiveItem, toggleExpand, useGetTreeNodeChildren, focusToActiveTreeNode, leftArrowHandler, focusTreeNode, rightArrowHandler, isSearching } from '../utils/treeUtils';
 import { PickerToggle, PickerOverlay, SearchBar, PickerToggleTrigger, createConcatChildrenFunction, usePickerClassName, onMenuKeyDown as _onMenuKeyDown, usePublicMethods, listPickerPropTypes, pickTriggerPropKeys, omitTriggerPropKeys, useToggleKeyDownEvent } from '../Picker';
@@ -81,6 +81,7 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onOpen = props.onOpen,
       onSearch = props.onSearch,
       onSelect = props.onSelect,
+      onSelectItem = props.onSelectItem,
       onChange = props.onChange,
       onEntered = props.onEntered,
       onClose = props.onClose,
@@ -94,7 +95,7 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       renderExtraFooter = props.renderExtraFooter,
       renderMenu = props.renderMenu,
       renderValue = props.renderValue,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "data", "appearance", "style", "showIndentLine", "value", "locale", "height", "menuMaxHeight", "menuStyle", "className", "disabled", "placement", "cleanable", "searchable", "virtualized", "classPrefix", "defaultValue", "placeholder", "searchKeyword", "menuClassName", "menuAutoWidth", "searchBy", "toggleAs", "labelKey", "valueKey", "childrenKey", "draggable", "defaultExpandAll", "disabledItemValues", "expandItemValues", "defaultExpandItemValues", "id", "listProps", "getChildren", "renderTreeIcon", "renderTreeNode", "onExit", "onExited", "onClean", "onOpen", "onSearch", "onSelect", "onChange", "onEntered", "onClose", "onDragEnd", "onDragStart", "onDragEnter", "onDragLeave", "onDragOver", "onDrop", "onExpand", "renderExtraFooter", "renderMenu", "renderValue"]);
+      rest = _objectWithoutPropertiesLoose(props, ["as", "data", "appearance", "style", "showIndentLine", "value", "locale", "height", "menuMaxHeight", "menuStyle", "className", "disabled", "placement", "cleanable", "searchable", "virtualized", "classPrefix", "defaultValue", "placeholder", "searchKeyword", "menuClassName", "menuAutoWidth", "searchBy", "toggleAs", "labelKey", "valueKey", "childrenKey", "draggable", "defaultExpandAll", "disabledItemValues", "expandItemValues", "defaultExpandItemValues", "id", "listProps", "getChildren", "renderTreeIcon", "renderTreeNode", "onExit", "onExited", "onClean", "onOpen", "onSearch", "onSelect", "onSelectItem", "onChange", "onEntered", "onClose", "onDragEnd", "onDragStart", "onDragEnter", "onDragLeave", "onDragOver", "onDrop", "onExpand", "renderExtraFooter", "renderMenu", "renderValue"]);
 
   var triggerRef = useRef(null);
   var targetRef = useRef(null);
@@ -291,8 +292,17 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onRenderTreeNode: renderTreeNode,
       onRenderTreeIcon: renderTreeIcon
     };
-  };
+  }; // 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 (nodeData, event) {
     var _targetRef$current, _triggerRef$current, _triggerRef$current$c;
 
@@ -309,9 +319,12 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setFocusItemValue(nodeData[valueKey]);
     onChange === null || onChange === void 0 ? void 0 : onChange(nodeValue, event);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeData, nodeValue, event);
+    onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem(nodeData, getPathTowardsItem(nodeData, function (item) {
+      return itemParentMap.get(item[valueKey]);
+    }));
     (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.focus();
     (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);
-  }, [valueKey, isControlled, onChange, onSelect, setValue]);
+  }, [valueKey, isControlled, onChange, onSelect, onSelectItem, setValue, itemParentMap]);
   var handleExpand = useCallback(function (node) {
     var nextExpandItemValues = toggleExpand({
       node: node,

package/esm/utils/getDataGroupBy.d.ts

@@ -1,3 +1,6 @@
 export declare const KEY_GROUP: string | symbol;
 export declare const KEY_GROUP_TITLE = "groupTitle";
-export default function getDataGroupBy(data: any[] | undefined, key: string, sort?: any): any[];
+export declare function getDataGroupBy<T>(data: readonly T[], key: string, sort?: (isGroup: boolean) => <T>(a: T, b: T) => number): (T | {
+    groupTitle: string;
+    children: T[];
+})[];

package/esm/utils/getDataGroupBy.js

@@ -1,29 +1,13 @@
-import _get from "lodash/get";
-import { UNSAFE_flattenTree } from '../utils/treeUtils';
+import _groupBy from "lodash/groupBy";
+import { WalkTreeStrategy, flattenTree } from '../utils/treeUtils';
 var hasSymbol = typeof Symbol === 'function';
 export var KEY_GROUP = hasSymbol ? Symbol('_$grouped') : '_$grouped';
 export var KEY_GROUP_TITLE = 'groupTitle';
-export default function getDataGroupBy(data, key, sort) {
-  if (data === void 0) {
-    data = [];
-  }
+export function getDataGroupBy(data, key, sort) {
+  var groupMap = _groupBy(data, key);
 
-  var tempData = {};
   var isSort = typeof sort === 'function';
-  data.forEach(function (item) {
-    // this will allow getting data using dot notation
-    // i.e groupBy="country.name" as country will be a nested object
-    // to the item and the name will be nested key to the country object
-    // can be used with values in arrays, i.e groupBy="addresses.0.country.name"
-    var groupByValue = _get(item, key, '');
-
-    if (!tempData[groupByValue]) {
-      tempData[groupByValue] = [];
-    }
-
-    tempData[groupByValue].push(item);
-  });
-  var nextData = Object.entries(tempData).map(function (_ref) {
+  var groups = Object.entries(groupMap).map(function (_ref) {
     var _ref2;
 
     var groupTitle = _ref[0],
@@ -34,8 +18,13 @@ export default function getDataGroupBy(data, key, sort) {
   });
 
   if (isSort) {
-    nextData = nextData.sort(sort(true));
-  }
+    groups.sort(sort(true));
+  } // Use DFS traverse
+  // Because I want the result to be [group, child, child, group, child, child]
+  // rather than [group, group, child, child, child, child]
+
 
-  return UNSAFE_flattenTree(nextData);
+  return flattenTree(groups, function (group) {
+    return group.children;
+  }, WalkTreeStrategy.DFS);
 }

package/esm/utils/index.d.ts

@@ -12,7 +12,6 @@ export { default as ReactChildren } from './ReactChildren';
 export { default as tplTransform } from './tplTransform';
 export { default as ajaxUpload } from './ajaxUpload';
 export { default as previewFile } from './previewFile';
-export { default as getDataGroupBy } from './getDataGroupBy';
 export { default as clone } from './clone';
 export { default as placementPolyfill } from './placementPolyfill';
 export { default as getDOMNode } from './getDOMNode';

package/esm/utils/index.js

@@ -14,7 +14,6 @@ export { default as ReactChildren } from './ReactChildren';
 export { default as tplTransform } from './tplTransform';
 export { default as ajaxUpload } from './ajaxUpload';
 export { default as previewFile } from './previewFile';
-export { default as getDataGroupBy } from './getDataGroupBy';
 export { default as clone } from './clone';
 export { default as placementPolyfill } from './placementPolyfill';
 export { default as getDOMNode } from './getDOMNode';

package/esm/utils/treeUtils.d.ts

@@ -21,7 +21,13 @@ export declare function shouldShowNodeByParentExpanded<T>(expandItemValues?: T[]
  *             Use {@link flattenTree} instead.
  */
 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[];
+export declare enum WalkTreeStrategy {
+    DFS = 0,
+    BFS = 1
+}
+export declare function flattenTree<T>(rootNodes: readonly T[], getChildren: (node: T) => readonly T[] | undefined, walkStrategy?: WalkTreeStrategy): T[];
+export declare function walkTreeBfs<T>(rootNodes: readonly T[], getChildren: (node: T) => readonly T[] | undefined, callback: (node: T) => void): void;
+export declare function walkTreeDfs<T>(rootNodes: readonly T[], getChildren: (node: T) => readonly T[] | undefined, callback: (node: T) => void): void;
 /**
  * get all ancestor nodes of given node
  * @param {*} node
@@ -278,3 +284,21 @@ export declare function createDragPreview(name: string, className: string): HTML
  */
 export declare function removeDragPreview(): void;
 export declare function stringifyTreeNodeLabel(label: string | React.ReactNode): string;
+/**
+ * Returns a WeakMap that maps each item in `items` to its parent
+ * indicated by `getChildren` function
+ */
+export declare function getParentMap<T extends Record<string, unknown>>(items: readonly T[], getChildren: (item: T) => readonly T[] | undefined): WeakMap<T, T>;
+/**
+ * Returns a Map that maps each item's "key", indicated by `getKey` function,
+ * to its parent indicated by `getChildren` function
+ *
+ * NOTICE:
+ * Using this function is discouraged.
+ * Use {@link getParentMap} whenever possible.
+ */
+export declare function getKeyParentMap<T extends Record<string, unknown>, K = React.Key>(items: readonly T[], getKey: (item: T) => K, getChildren: (item: T) => readonly T[] | undefined): Map<K, T>;
+/**
+ * Returns an array indicating the hierarchy path from root towards `target` item
+ */
+export declare function getPathTowardsItem<T>(target: T | undefined, getParent: (item: T) => T | undefined): T[];