rsuite 5.32.0 → 5.33.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+# [5.33.0](https://github.com/rsuite/rsuite/compare/v5.32.0...v5.33.0) (2023-04-28)
+
+### Features
+
+- **Tree,TreePicker,CheckTree,CheckTreePicker:** add onSelectItem prop ([#3172](https://github.com/rsuite/rsuite/issues/3172)) ([9a5618a](https://github.com/rsuite/rsuite/commit/9a5618a3affb13e70330a5aea253e8b54c67b61b))
+
 # [5.32.0](https://github.com/rsuite/rsuite/compare/v5.31.1...v5.32.0) (2023-04-21)
 
 ### Bug Fixes

package/cjs/Cascader/Cascader.js

@@ -111,7 +111,7 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var loadingItemsSet = (0, _reactUseSet.useSet)();
   var asyncChildrenMap = (0, _useMap.useMap)();
   var parentMap = (0, _react.useMemo)(function () {
-    return (0, _utils.getParentMap)(data, function (item) {
+    return (0, _treeUtils.getParentMap)(data, function (item) {
       var _asyncChildrenMap$get;
 
       return (_asyncChildrenMap$get = asyncChildrenMap.get(item)) !== null && _asyncChildrenMap$get !== void 0 ? _asyncChildrenMap$get : item[childrenKey];
@@ -365,7 +365,7 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var renderSearchRow = function renderSearchRow(item, key) {
     var regx = new RegExp((0, _utils2.getSafeRegExpString)(searchKeyword), 'ig');
-    var nodes = (0, _utils.getPathTowardsItem)(item, function (item) {
+    var nodes = (0, _treeUtils.getPathTowardsItem)(item, function (item) {
       return parentMap.get(item);
     });
     var formattedNodes = nodes.map(function (node) {

package/cjs/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/cjs/Cascader/utils.js

@@ -3,16 +3,10 @@
 exports.__esModule = true;
 exports.getColumnsAndPaths = getColumnsAndPaths;
 exports.usePaths = usePaths;
-exports.getParentMap = getParentMap;
-exports.getPathTowardsItem = getPathTowardsItem;
 
 var _react = require("react");
 
-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; }
+var _treeUtils = require("../utils/treeUtils");
 
 /**
  * Calculate columns to be displayed:
@@ -76,7 +70,7 @@ function usePaths(_ref) {
       getParent = _ref.getParent,
       getChildren = _ref.getChildren;
   var pathTowardsSelectedItem = (0, _react.useMemo)(function () {
-    return getPathTowardsItem(selectedItem, getParent);
+    return (0, _treeUtils.getPathTowardsItem)(selectedItem, getParent);
   }, [getParent, selectedItem]);
 
   var _useMemo = (0, _react.useMemo)(function () {
@@ -93,44 +87,4 @@ function usePaths(_ref) {
     pathTowardsSelectedItem: pathTowardsSelectedItem,
     pathTowardsActiveItem: pathTowardsActiveItem
   };
-}
-/**
- * Returns a WeakMap that maps each item in `items` to its parent
- * indicated by `getChildren` function
- */
-
-
-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
- */
-
-
-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/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/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/cjs/TreePicker/TreePicker.js

@@ -104,6 +104,7 @@ var TreePicker = /*#__PURE__*/_react.default.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,
@@ -117,7 +118,7 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       renderExtraFooter = props.renderExtraFooter,
       renderMenu = props.renderMenu,
       renderValue = props.renderValue,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _react.useRef)(null);
   var targetRef = (0, _react.useRef)(null);
   var listRef = (0, _react.useRef)(null);
@@ -313,8 +314,17 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onRenderTreeNode: renderTreeNode,
       onRenderTreeIcon: renderTreeIcon
     };
-  };
+  }; // 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 (nodeData, event) {
     var _targetRef$current, _triggerRef$current, _triggerRef$current$c;
 
@@ -331,9 +341,12 @@ var TreePicker = /*#__PURE__*/_react.default.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, (0, _treeUtils.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 = (0, _react.useCallback)(function (node) {
     var nextExpandItemValues = (0, _treeUtils.toggleExpand)({
       node: node,

package/cjs/utils/treeUtils.d.ts

@@ -278,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/cjs/utils/treeUtils.js

@@ -39,6 +39,9 @@ exports.getNodeFormattedRefKey = getNodeFormattedRefKey;
 exports.createDragPreview = createDragPreview;
 exports.removeDragPreview = removeDragPreview;
 exports.stringifyTreeNodeLabel = stringifyTreeNodeLabel;
+exports.getParentMap = getParentMap;
+exports.getKeyParentMap = getKeyParentMap;
+exports.getPathTowardsItem = getPathTowardsItem;
 exports.getScrollToIndex = exports.focusPreviousItem = exports.focusNextItem = exports.focusTreeNode = exports.getElementByDataKey = exports.getActiveItem = exports.getActiveIndex = exports.getFocusableItems = void 0;
 
 var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -73,6 +76,12 @@ var _constants = require("./constants");
 
 var _attachParent = require("./attachParent");
 
+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; }
+
 // gap of tree node
 var TREE_NODE_GAP = 4;
 /**
@@ -1195,4 +1204,73 @@ function stringifyTreeNodeLabel(label) {
   }
 
   return '';
+}
+/**
+ * Returns a WeakMap that maps each item in `items` to its parent
+ * indicated by `getChildren` function
+ */
+
+
+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.
+ */
+
+
+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
+ */
+
+
+function getPathTowardsItem(target, getParent) {
+  if (!target) return [];
+  var path = [target];
+
+  for (var parent = getParent(target); !!parent; parent = getParent(parent)) {
+    path.unshift(parent);
+  }
+
+  return path;
 }