rsuite 5.31.1 → 5.33.0

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

@@ -1,5 +1,5 @@
 import _get from "lodash/get";
-import { flattenTree } from '../utils/treeUtils';
+import { UNSAFE_flattenTree } from '../utils/treeUtils';
 var hasSymbol = typeof Symbol === 'function';
 export var KEY_GROUP = hasSymbol ? Symbol('_$grouped') : '_$grouped';
 export var KEY_GROUP_TITLE = 'groupTitle';
@@ -37,5 +37,5 @@ export default function getDataGroupBy(data, key, sort) {
     nextData = nextData.sort(sort(true));
   }
 
-  return flattenTree(nextData);
+  return UNSAFE_flattenTree(nextData);
 }

package/esm/utils/treeUtils.d.ts

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

package/esm/utils/treeUtils.js

@@ -6,6 +6,13 @@ import _isArray from "lodash/isArray";
 import _omit from "lodash/omit";
 import _isUndefined from "lodash/isUndefined";
 import _intersection from "lodash/intersection";
+
+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 React, { useRef, useState, useEffect, useCallback } from 'react';
 import shallowEqualArray from '../utils/shallowEqualArray';
 import { getNodeCheckState } from '../CheckTreePicker/utils';
@@ -44,9 +51,12 @@ export function shouldShowNodeByParentExpanded(expandItemValues, parentKeys) {
  * @param {*} tree
  * @param {*} childrenKey
  * @param {*} executor
+ *
+ * @deprecated This {@link UNSAFE_flattenTree} function is considered unsafe because it mutates `tree` argument in-place
+ *             Use {@link flattenTree} instead.
  */
 
-export function flattenTree(tree, childrenKey, executor) {
+export function UNSAFE_flattenTree(tree, childrenKey, executor) {
   if (childrenKey === void 0) {
     childrenKey = 'children';
   }
@@ -71,11 +81,32 @@ export function flattenTree(tree, childrenKey, executor) {
   traverse(tree, null);
   return flattenData;
 }
+export function flattenTree(rootNodes, getChildren) {
+  var result = [];
+  walkTree(rootNodes, getChildren, function (node) {
+    return result.push(node);
+  });
+  return result;
+}
+
+function walkTree(rootNodes, getChildren, callback) {
+  for (var queue = [].concat(rootNodes); queue.length > 0;) {
+    var _node = queue.shift();
+
+    callback(_node);
+    var children = getChildren(_node);
+
+    if (children) {
+      queue.push.apply(queue, children);
+    }
+  }
+}
 /**
  * get all ancestor nodes of given node
  * @param {*} node
  */
 
+
 export function getNodeParents(node, parentKey, valueKey) {
   if (parentKey === void 0) {
     parentKey = 'parent';
@@ -148,7 +179,7 @@ export function getDefaultExpandItemValues(data, props) {
       defaultExpandItemValues = _props$defaultExpandI === void 0 ? [] : _props$defaultExpandI;
 
   if (defaultExpandAll) {
-    return flattenTree(data, childrenKey).filter(function (item) {
+    return UNSAFE_flattenTree(data, childrenKey).filter(function (item) {
       return Array.isArray(item[childrenKey]) && item[childrenKey].length > 0;
     }).map(function (item) {
       return item[valueKey];
@@ -311,10 +342,10 @@ export function findNodeOfTree(data, check) {
       var _item3 = nodes[i];
 
       if (_isArray(_item3.children)) {
-        var _node = findNode(_item3.children);
+        var _node2 = findNode(_item3.children);
 
-        if (_node) {
-          return _node;
+        if (_node2) {
+          return _node2;
         }
       }
 
@@ -780,7 +811,7 @@ export function useFlattenTreeData(_ref8) {
   var formatVirtualizedTreeData = function formatVirtualizedTreeData(nodes, data, expandItemValues, options) {
     var cascade = options.cascade,
         searchKeyword = options.searchKeyword;
-    return flattenTree(data, childrenKey, function (node) {
+    return UNSAFE_flattenTree(data, childrenKey, function (node) {
       var formatted = {};
       var curNode = nodes === null || nodes === void 0 ? void 0 : nodes[node.refKey];
       var parentKeys = getNodeParentKeys(nodes, curNode, valueKey);
@@ -1067,4 +1098,70 @@ export function stringifyTreeNodeLabel(label) {
   }
 
   return '';
+}
+/**
+ * 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 _item5 = queue.shift();
+
+    var children = getChildren(_item5);
+
+    if (children) {
+      for (var _iterator = _createForOfIteratorHelperLoose(children), _step; !(_step = _iterator()).done;) {
+        var child = _step.value;
+        map.set(child, _item5);
+        queue.push(child);
+      }
+    }
+  }
+
+  return map;
+}
+/**
+ * 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 function getKeyParentMap(items, getKey, getChildren) {
+  var map = new Map();
+
+  for (var queue = [].concat(items); queue.length > 0;) {
+    var _item6 = queue.shift();
+
+    var children = getChildren(_item6);
+
+    if (children) {
+      for (var _iterator2 = _createForOfIteratorHelperLoose(children), _step2; !(_step2 = _iterator2()).done;) {
+        var child = _step2.value;
+        map.set(getKey(child), _item6);
+        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/utils/useMap.d.ts

@@ -0,0 +1,6 @@
+export declare function useMap<K, V>(): {
+    has(key: K): boolean;
+    get(key: K): V | undefined;
+    set(key: K, value: V): void;
+    clear(): void;
+};

package/esm/utils/useMap.js

@@ -0,0 +1,29 @@
+import { useMemo, useState } from 'react';
+export function useMap() {
+  var _useState = useState(function () {
+    return new Map();
+  }),
+      map = _useState[0],
+      setMap = _useState[1];
+
+  return useMemo(function () {
+    return {
+      has: function has(key) {
+        return map.has(key);
+      },
+      get: function get(key) {
+        return map.get(key);
+      },
+      set: function set(key, value) {
+        setMap(function (prev) {
+          var copy = new Map(prev);
+          copy.set(key, value);
+          return copy;
+        });
+      },
+      clear: function clear() {
+        setMap(new Map());
+      }
+    };
+  }, [map]);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.31.1",
+  "version": "5.33.0",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -36,6 +36,7 @@
     "dom-lib": "^3.1.3",
     "lodash": "^4.17.11",
     "prop-types": "^15.8.1",
+    "react-use-set": "^1.0.0",
     "react-window": "^1.8.8",
     "rsuite-table": "^5.10.3",
     "schema-typed": "^2.1.2"