rsuite 5.60.1 → 5.61.0

package/cjs/Tree/TreeView.d.ts

@@ -0,0 +1,68 @@
+import React from 'react';
+import { type ListHandle } from '../internals/Windowing';
+import { RsRefForwardingComponent, DataProps, ToArray } from '../@types/common';
+import type { TreeNode, TreeNodeMap, TreeViewBaseProps, TreeDragProps } from './types';
+export interface TreeViewProps<V = number | string | null> extends TreeViewBaseProps<V, TreeNode>, DataProps<TreeNode>, TreeDragProps {
+    /**
+     * Selected value.
+     */
+    value?: V;
+    /**
+     * Whether display search input box.
+     */
+    searchable?: boolean;
+    /**
+     * Whether using virtualized list.
+     */
+    virtualized?: boolean;
+    /**
+     * Disabled tree node.
+     */
+    disabledItemValues?: ToArray<NonNullable<V>>;
+    /**
+     * Virtualized list ref object.
+     */
+    listRef?: React.RefObject<ListHandle>;
+    /**
+     * Searchbox input ref object.
+     */
+    searchInputRef?: React.RefObject<HTMLInputElement>;
+    /**
+     * Called when scrolling.
+     */
+    onScroll?: (event: React.SyntheticEvent) => void;
+    /**
+     * Called after the value has been changed.
+     */
+    onChange?: (value: V, event: React.SyntheticEvent) => void;
+}
+/**
+ * Props for the TreeViewInner component.
+ */
+/**
+ * Represents the props for the TreeView component.
+ */
+interface TreeViewInnerProps<V = string | number | null> extends Omit<TreeViewProps<V>, 'onExpand'> {
+    /**
+     * An array of values representing the loading nodes.
+     */
+    loadingNodeValues?: V[];
+    /**
+     * A map of flattened nodes.
+     */
+    flattenedNodes?: TreeNodeMap;
+    /**
+     * A callback function that is called when an item in the tree receives focus.
+     *
+     * @param value - The value of the focused item.
+     */
+    onFocusItem?: (value?: V) => void;
+    /**
+     * A callback function that is called when a node is expanded.
+     *
+     * @param nodeData - The data of the expanded node.
+     */
+    onExpand?: (nodeData: TreeNode, expanded?: boolean) => void;
+}
+declare const TreeView: RsRefForwardingComponent<'div', TreeViewInnerProps>;
+export default TreeView;

package/cjs/Tree/TreeView.js

@@ -0,0 +1,305 @@
+'use client';
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireWildcard(require("react"));
+var _isNil = _interopRequireDefault(require("lodash/isNil"));
+var _Windowing = require("../internals/Windowing");
+var _TreeNode = _interopRequireDefault(require("./TreeNode"));
+var _IndentLine = _interopRequireDefault(require("./IndentLine"));
+var _utils = require("../internals/Tree/utils");
+var _utils2 = require("../utils");
+var _utils3 = require("./utils");
+var _Picker = require("../internals/Picker");
+var _Tree = require("../internals/Tree");
+var _useTreeSearch2 = _interopRequireDefault(require("./hooks/useTreeSearch"));
+var _useTreeDrag2 = _interopRequireDefault(require("./hooks/useTreeDrag"));
+var _useFocusTree2 = _interopRequireDefault(require("./hooks/useFocusTree"));
+var _useVirtualizedTreeData = _interopRequireDefault(require("./hooks/useVirtualizedTreeData"));
+var _useTreeNodeProps = _interopRequireDefault(require("./hooks/useTreeNodeProps"));
+var _SearchBox = _interopRequireDefault(require("../internals/SearchBox"));
+var _TreeProvider = require("./TreeProvider");
+/**
+ * Props for the TreeViewInner component.
+ */
+/**
+ * Represents the props for the TreeView component.
+ */
+var TreeView = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _props$as = props.as,
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data,
+    style = props.style,
+    showIndentLine = props.showIndentLine,
+    valueProp = props.value,
+    overrideLocale = props.locale,
+    _props$height = props.height,
+    height = _props$height === void 0 ? 360 : _props$height,
+    className = props.className,
+    _props$searchable = props.searchable,
+    searchable = _props$searchable === void 0 ? false : _props$searchable,
+    _props$virtualized = props.virtualized,
+    virtualized = _props$virtualized === void 0 ? false : _props$virtualized,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'tree' : _props$classPrefix,
+    searchKeyword = props.searchKeyword,
+    searchBy = props.searchBy,
+    draggable = props.draggable,
+    _props$disabledItemVa = props.disabledItemValues,
+    disabledItemValues = _props$disabledItemVa === void 0 ? [] : _props$disabledItemVa,
+    _props$loadingNodeVal = props.loadingNodeValues,
+    loadingNodeValues = _props$loadingNodeVal === void 0 ? [] : _props$loadingNodeVal,
+    _props$flattenedNodes = props.flattenedNodes,
+    flattenedNodes = _props$flattenedNodes === void 0 ? {} : _props$flattenedNodes,
+    listProps = props.listProps,
+    listRef = props.listRef,
+    searchInputRef = props.searchInputRef,
+    _props$expandItemValu = props.expandItemValues,
+    expandItemValues = _props$expandItemValu === void 0 ? [] : _props$expandItemValu,
+    onSearch = props.onSearch,
+    onSelect = props.onSelect,
+    onSelectItem = props.onSelectItem,
+    onChange = props.onChange,
+    onDragEnd = props.onDragEnd,
+    onDragStart = props.onDragStart,
+    onDragEnter = props.onDragEnter,
+    onDragLeave = props.onDragLeave,
+    onDragOver = props.onDragOver,
+    onDrop = props.onDrop,
+    onExpand = props.onExpand,
+    onFocusItem = props.onFocusItem,
+    onScroll = props.onScroll,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "data", "style", "showIndentLine", "value", "locale", "height", "className", "searchable", "virtualized", "classPrefix", "searchKeyword", "searchBy", "draggable", "disabledItemValues", "loadingNodeValues", "flattenedNodes", "listProps", "listRef", "searchInputRef", "expandItemValues", "onSearch", "onSelect", "onSelectItem", "onChange", "onDragEnd", "onDragStart", "onDragEnter", "onDragLeave", "onDragOver", "onDrop", "onExpand", "onFocusItem", "onScroll"]);
+  var _useCustom = (0, _utils2.useCustom)('Picker', overrideLocale),
+    locale = _useCustom.locale;
+  var _useItemDataKeys = (0, _TreeProvider.useItemDataKeys)(),
+    valueKey = _useItemDataKeys.valueKey,
+    childrenKey = _useItemDataKeys.childrenKey;
+  var _useClassNames = (0, _utils2.useClassNames)(classPrefix),
+    prefix = _useClassNames.prefix,
+    merge = _useClassNames.merge,
+    withClassPrefix = _useClassNames.withClassPrefix;
+  var handleSearchCallback = (0, _utils2.useEventCallback)(function (value, _data, event) {
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, event);
+  });
+  var _useTreeSearch = (0, _useTreeSearch2.default)({
+      callback: handleSearchCallback,
+      searchKeyword: searchKeyword,
+      data: data,
+      searchBy: searchBy
+    }),
+    filteredData = _useTreeSearch.filteredData,
+    keyword = _useTreeSearch.keyword,
+    setFilteredData = _useTreeSearch.setFilteredData,
+    handleSearch = _useTreeSearch.handleSearch;
+  var transformation = (0, _useVirtualizedTreeData.default)(flattenedNodes, filteredData, {
+    expandItemValues: expandItemValues,
+    searchKeyword: keyword
+  });
+  var getFormattedNodes = function getFormattedNodes(render) {
+    if (virtualized) {
+      return transformation().filter(function (n) {
+        return n.visible;
+      });
+    }
+    return filteredData.map(function (dataItem, index) {
+      return render === null || render === void 0 ? void 0 : render(dataItem, index, 1);
+    }).filter(function (n) {
+      return n;
+    });
+  };
+  (0, _react.useEffect)(function () {
+    setFilteredData(data, keyword);
+  }, [data, keyword, setFilteredData]);
+
+  // TODO-Doma
+  // Replace `getKeyParentMap` with `getParentMap`
+  var itemParentMap = (0, _react.useMemo)(function () {
+    return (0, _utils.getKeyParentMap)(data, function (node) {
+      return node[valueKey];
+    }, function (node) {
+      return node[childrenKey];
+    });
+  }, [childrenKey, data, valueKey]);
+  var _useFocusTree = (0, _useFocusTree2.default)({
+      filteredData: filteredData,
+      disabledItemValues: disabledItemValues,
+      expandItemValues: expandItemValues,
+      searchKeyword: keyword,
+      flattenedNodes: flattenedNodes,
+      onFocused: onFocusItem,
+      onExpand: onExpand
+    }),
+    focusItemValue = _useFocusTree.focusItemValue,
+    setFocusItemValue = _useFocusTree.setFocusItemValue,
+    onTreeKeydown = _useFocusTree.onTreeKeydown,
+    treeNodesRefs = _useFocusTree.treeNodesRefs,
+    saveTreeNodeRef = _useFocusTree.saveTreeNodeRef,
+    treeViewRef = _useFocusTree.treeViewRef;
+  var _useTreeDrag = (0, _useTreeDrag2.default)({
+      flattenedNodes: flattenedNodes,
+      treeNodesRefs: treeNodesRefs,
+      draggable: draggable,
+      onDragStart: onDragStart,
+      onDragEnter: onDragEnter,
+      onDragOver: onDragOver,
+      onDragLeave: onDragLeave,
+      onDragEnd: onDragEnd,
+      onDrop: onDrop,
+      prefix: prefix
+    }),
+    dragNode = _useTreeDrag.dragNode,
+    dragOverNodeKey = _useTreeDrag.dragOverNodeKey,
+    dropNodePosition = _useTreeDrag.dropNodePosition,
+    dragEvents = _useTreeDrag.dragEvents;
+  var getTreeNodeProps = (0, _useTreeNodeProps.default)({
+    value: valueProp,
+    disabledItemValues: disabledItemValues,
+    loadingNodeValues: loadingNodeValues,
+    focusItemValue: focusItemValue,
+    keyword: keyword,
+    dragNode: dragNode,
+    dragOverNodeKey: dragOverNodeKey,
+    dropNodePosition: dropNodePosition
+  });
+  var handleSelect = (0, _utils2.useEventCallback)(function (nodeData, event) {
+    if (!nodeData) {
+      return;
+    }
+    var nextValue = nodeData[valueKey];
+    var path = (0, _utils.getPathTowardsItem)(nodeData, function (item) {
+      return itemParentMap.get(item[valueKey]);
+    });
+    setFocusItemValue(nextValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeData, nextValue, event);
+    onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem(nodeData, path);
+  });
+  var selectActiveItem = (0, _utils2.useEventCallback)(function (event) {
+    if ((0, _isNil.default)(focusItemValue)) return;
+    var activeItem = (0, _utils3.getActiveItem)(focusItemValue, flattenedNodes, valueKey);
+    handleSelect(activeItem, event);
+  });
+  var handleTreeKeyDown = (0, _utils2.useEventCallback)(function (event) {
+    onTreeKeydown(event);
+    (0, _Picker.onMenuKeyDown)(event, {
+      enter: selectActiveItem
+    });
+  });
+  var renderNode = function renderNode(node, index, layer) {
+    var visible = node.visible;
+    if (!visible) {
+      return null;
+    }
+    var children = node[childrenKey];
+    var expanded = (0, _utils3.isExpand)(keyword, expandItemValues.includes(node[valueKey]));
+    var hasChildren = keyword ? (0, _utils3.hasVisibleChildren)(node, childrenKey) : Boolean(children);
+    var nodeProps = (0, _extends2.default)({}, getTreeNodeProps(node, layer, index), dragEvents, {
+      expanded: expanded,
+      draggable: draggable,
+      onExpand: onExpand,
+      onSelect: handleSelect,
+      hasChildren: hasChildren
+    });
+    if (hasChildren) {
+      var _merge;
+      layer += 1;
+      var childClassName = merge(prefix('node-children'), (_merge = {}, _merge[prefix('node-expanded')] = expanded, _merge));
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: childClassName,
+        key: node[valueKey]
+      }, /*#__PURE__*/_react.default.createElement(_TreeNode.default, (0, _extends2.default)({}, nodeProps, {
+        ref: function ref(_ref) {
+          return saveTreeNodeRef(_ref, node.refKey);
+        }
+      })), /*#__PURE__*/_react.default.createElement("div", {
+        className: prefix('group'),
+        role: "group"
+      }, children === null || children === void 0 ? void 0 : children.map(function (child, i) {
+        return renderNode(child, i, layer);
+      }), showIndentLine && /*#__PURE__*/_react.default.createElement(_IndentLine.default, null)));
+    }
+    return /*#__PURE__*/_react.default.createElement(_TreeNode.default, (0, _extends2.default)({
+      ref: function ref(_ref2) {
+        return saveTreeNodeRef(_ref2, node.refKey);
+      },
+      key: node[valueKey]
+    }, nodeProps));
+  };
+  var renderVirtualListNode = function renderVirtualListNode(_ref3) {
+    var index = _ref3.index,
+      style = _ref3.style,
+      data = _ref3.data;
+    var node = data[index];
+    var layer = node.layer,
+      visible = node.visible,
+      hasChildren = node.hasChildren;
+    var expanded = (0, _utils3.isExpand)(keyword, expandItemValues.includes(node[valueKey]));
+    if (!visible) {
+      return null;
+    }
+    var treeNodeProps = (0, _extends2.default)({}, getTreeNodeProps(node, layer), dragEvents, {
+      expanded: expanded,
+      style: style,
+      onExpand: onExpand,
+      onSelect: handleSelect,
+      hasChildren: hasChildren
+    });
+    return visible && /*#__PURE__*/_react.default.createElement(_TreeNode.default, (0, _extends2.default)({
+      ref: function ref(_ref4) {
+        return saveTreeNodeRef(_ref4, node.refKey);
+      }
+    }, treeNodeProps));
+  };
+  var classes = merge(withClassPrefix({
+    virtualized: virtualized
+  }), className);
+  var formattedNodes = getFormattedNodes(renderNode);
+  return /*#__PURE__*/_react.default.createElement(Component, {
+    ref: ref,
+    className: classes,
+    style: style
+  }, searchable ? /*#__PURE__*/_react.default.createElement(_SearchBox.default, {
+    placeholder: locale.searchPlaceholder,
+    onChange: handleSearch,
+    value: keyword,
+    inputRef: searchInputRef
+  }) : null, keyword && formattedNodes.length === 0 ? /*#__PURE__*/_react.default.createElement("div", {
+    className: prefix('empty')
+  }, locale.noResultsText) : null, /*#__PURE__*/_react.default.createElement(_Tree.TreeView, (0, _extends2.default)({}, rest, {
+    ref: treeViewRef,
+    treeRootClassName: prefix('root'),
+    onScroll: onScroll,
+    onKeyDown: handleTreeKeyDown,
+    className: prefix('view'),
+    style: virtualized ? undefined : {
+      height: height
+    }
+  }), virtualized ? /*#__PURE__*/_react.default.createElement(_Windowing.AutoSizer, {
+    defaultHeight: height,
+    style: {
+      width: 'auto',
+      height: 'auto'
+    },
+    className: prefix('virt-auto-sizer')
+  }, function (_ref5) {
+    var height = _ref5.height;
+    return /*#__PURE__*/_react.default.createElement(_Windowing.List, (0, _extends2.default)({
+      ref: listRef,
+      height: height,
+      itemSize: _Windowing.defaultItemSize,
+      itemCount: formattedNodes.length,
+      itemData: formattedNodes,
+      className: prefix('virt-list')
+    }, listProps), renderVirtualListNode);
+  }) : formattedNodes));
+});
+TreeView.displayName = 'TreeView';
+var _default = TreeView;
+exports.default = _default;

package/cjs/Tree/hooks/useExpandTree.d.ts

@@ -0,0 +1,60 @@
+import type { TreeNode } from '../types';
+interface DefaultExpandItemValuesOptions {
+    valueKey: string;
+    defaultExpandAll: boolean;
+    childrenKey: string;
+    defaultExpandItemValues?: any[];
+}
+export declare function getDefaultExpandItemValues<TItem>(data: TItem[], options: DefaultExpandItemValuesOptions): any[];
+interface UseExpandTreeProps<T extends TreeNode> {
+    /**
+     * Specifies whether all tree nodes should be expanded by default.
+     */
+    defaultExpandAll: boolean;
+    /**
+     * The key used to access the value of a tree node.
+     */
+    valueKey: string;
+    /**
+     * The key used to access the children of a tree node.
+     */
+    childrenKey: string;
+    /**
+     * An array of values that should be expanded by default.
+     */
+    defaultExpandItemValues: any[];
+    /**
+     * An optional array of values that control the expanded items.
+     */
+    controlledExpandItemValues?: any[];
+    /**
+     * A callback function that is called when the tree is expanded.
+     *
+     * @param expandItemValues - The expanded item values.
+     * @param activeNode - The active tree node.
+     * @param concat - A function to concatenate the data and children of a tree node.
+     */
+    onExpand?: (expandItemValues: T[], activeNode: T, concat: (data: T[], children: T[]) => T[]) => void;
+    /**
+     * A function that returns the children of a tree node.
+     *
+     * @param node - The tree node.
+     * @returns The children of the tree node.
+     */
+    getChildren?: (node: T) => T[] | Promise<T[]>;
+    /**
+     * A function that appends a child to a tree node.
+     *
+     * @param node - The tree node.
+     * @param getChildren - A function that returns the children of a tree node.
+     */
+    appendChild: (node: T, getChildren: (node: T) => T[] | Promise<T[]>) => void;
+}
+/**
+ * Custom hook for managing tree expansion state.
+ */
+declare function useExpandTree(data: TreeNode[], props: UseExpandTreeProps<TreeNode>): {
+    expandItemValues: any[];
+    handleExpandTreeNode: (...args: any[]) => any;
+};
+export default useExpandTree;

package/cjs/Tree/hooks/useExpandTree.js

@@ -0,0 +1,77 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.getDefaultExpandItemValues = getDefaultExpandItemValues;
+exports.default = void 0;
+var _react = require("react");
+var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
+var _utils = require("../../utils");
+var _Picker = require("../../internals/Picker");
+var _utils2 = require("../utils");
+function getDefaultExpandItemValues(data, options) {
+  var valueKey = options.valueKey,
+    defaultExpandAll = options.defaultExpandAll,
+    childrenKey = options.childrenKey,
+    _options$defaultExpan = options.defaultExpandItemValues,
+    defaultExpandItemValues = _options$defaultExpan === void 0 ? [] : _options$defaultExpan;
+  if (defaultExpandAll) {
+    return (0, _utils2.flattenTree)(data, function (item) {
+      return item[childrenKey] || [];
+    }).filter(function (item) {
+      return Array.isArray(item[childrenKey]) && item[childrenKey].length > 0;
+    }).map(function (item) {
+      return item[valueKey];
+    });
+  }
+  return defaultExpandItemValues;
+}
+/**
+ * Custom hook for managing tree expansion state.
+ */
+function useExpandTree(data, props) {
+  var defaultExpandAll = props.defaultExpandAll,
+    valueKey = props.valueKey,
+    childrenKey = props.childrenKey,
+    defaultExpandItemValues = props.defaultExpandItemValues,
+    controlledExpandItemValues = props.controlledExpandItemValues,
+    onExpand = props.onExpand,
+    getChildren = props.getChildren,
+    appendChild = props.appendChild;
+  var _useControlled = (0, _utils.useControlled)(controlledExpandItemValues, getDefaultExpandItemValues(data, {
+      defaultExpandAll: defaultExpandAll,
+      valueKey: valueKey,
+      childrenKey: childrenKey,
+      defaultExpandItemValues: defaultExpandItemValues
+    })),
+    expandItemValues = _useControlled[0],
+    setExpandItemValues = _useControlled[1];
+  (0, _react.useEffect)(function () {
+    if (Array.isArray(controlledExpandItemValues)) {
+      setExpandItemValues(controlledExpandItemValues);
+    }
+  }, [controlledExpandItemValues, setExpandItemValues]);
+  var handleExpandTreeNode = (0, _utils.useEventCallback)(function (node, expanded) {
+    var nextExpandItemValues = (0, _utils2.getExpandItemValues)({
+      node: node,
+      isExpand: !expanded,
+      expandItemValues: expandItemValues,
+      valueKey: valueKey
+    });
+    setExpandItemValues(nextExpandItemValues);
+    onExpand === null || onExpand === void 0 ? void 0 : onExpand(nextExpandItemValues, node, (0, _Picker.createConcatChildrenFunction)(node, node[valueKey], {
+      valueKey: valueKey,
+      childrenKey: childrenKey
+    }));
+    if ((0, _isFunction.default)(getChildren) && !node.expand && Array.isArray(node[childrenKey]) && node[childrenKey].length === 0) {
+      appendChild(node, getChildren);
+    }
+  });
+  return {
+    expandItemValues: expandItemValues,
+    handleExpandTreeNode: handleExpandTreeNode
+  };
+}
+var _default = useExpandTree;
+exports.default = _default;

package/cjs/Tree/hooks/useFlattenTree.d.ts

@@ -0,0 +1,42 @@
+import type { TreeNode, TreeNodeMap } from '../types';
+interface UseFlattenTreeOptions {
+    /**
+     * The value of the tree.
+     */
+    value?: any;
+    /**
+     * Specifies whether the tree supports multiple selection.
+     */
+    multiple?: boolean;
+    /**
+     * The key used to access the label property of each tree node.
+     */
+    labelKey: string;
+    /**
+     * The key used to access the value property of each tree node.
+     */
+    valueKey: string;
+    /**
+     * The key used to access the children property of each tree node.
+     */
+    childrenKey: string;
+    /**
+     * Specifies whether the tree should cascade the selection to child nodes.
+     */
+    cascade?: boolean;
+    /**
+     * An array of item values that should not be selectable.
+     */
+    uncheckableItemValues?: any[];
+    /**
+     * A callback function that will be called when the tree nodes change.
+     * It receives a map of the tree nodes.
+     */
+    callback?: (nodes: TreeNodeMap) => void;
+}
+/**
+ * Custom hook that flattens a tree data structure into a map of nodes.
+ *
+ */
+declare function useFlattenTree(data: TreeNode[], options: UseFlattenTreeOptions): TreeNodeMap;
+export default useFlattenTree;

package/cjs/Tree/hooks/useFlattenTree.js

@@ -0,0 +1,98 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = require("react");
+var _omit = _interopRequireDefault(require("lodash/omit"));
+var _isNil = _interopRequireDefault(require("lodash/isNil"));
+var _shallowEqual = _interopRequireDefault(require("../../utils/shallowEqual"));
+var _utils = require("../utils");
+var _useForceUpdate = _interopRequireDefault(require("./useForceUpdate"));
+/**
+ * Custom hook that flattens a tree data structure into a map of nodes.
+ *
+ */
+function useFlattenTree(data, options) {
+  var value = options.value,
+    labelKey = options.labelKey,
+    valueKey = options.valueKey,
+    childrenKey = options.childrenKey,
+    _options$uncheckableI = options.uncheckableItemValues,
+    uncheckableItemValues = _options$uncheckableI === void 0 ? [] : _options$uncheckableI,
+    cascade = options.cascade,
+    multiple = options.multiple,
+    callback = options.callback;
+  var forceUpdate = (0, _useForceUpdate.default)();
+  var flattenedNodes = (0, _react.useRef)({});
+  var updateTreeNodeCheckState = (0, _react.useCallback)(function (value) {
+    if (value === void 0) {
+      value = [];
+    }
+    // Reset values to false
+    Object.keys(flattenedNodes.current).forEach(function (refKey) {
+      var node = flattenedNodes.current[refKey];
+      if (cascade && !(0, _isNil.default)(node.parent) && !(0, _isNil.default)(node.parent.refKey)) {
+        node.check = flattenedNodes.current[node.parent.refKey].check;
+      } else {
+        node.check = false;
+      }
+      value.forEach(function (nodeVal) {
+        if ((0, _shallowEqual.default)(flattenedNodes.current[refKey][valueKey], nodeVal) && !uncheckableItemValues.some(function (uncheckableValue) {
+          return (0, _shallowEqual.default)(nodeVal, uncheckableValue);
+        })) {
+          flattenedNodes.current[refKey].check = true;
+        }
+      });
+    });
+  }, [cascade, uncheckableItemValues, valueKey]);
+  var flattenTreeData = (0, _react.useCallback)(function (treeData, parent, layer) {
+    if (layer === void 0) {
+      layer = 1;
+    }
+    if (!Array.isArray(treeData) || treeData.length === 0) {
+      return [];
+    }
+    treeData.map(function (node) {
+      var _extends2;
+      var value = node[valueKey];
+      /**
+       * because the value of the node's type is string or number,
+       * so it can used as the key of the object directly
+       * to avoid number value is converted to string. 1 and '1' will be convert to '1'
+       * we used `String_` or `Number_` prefix
+       */
+      var refKey = (0, _utils.formatNodeRefKey)(value);
+      node.refKey = refKey;
+      flattenedNodes.current[refKey] = (0, _extends3.default)((_extends2 = {
+        layer: layer
+      }, _extends2[labelKey] = node[labelKey], _extends2[valueKey] = node[valueKey], _extends2.uncheckable = uncheckableItemValues.some(function (value) {
+        return (0, _shallowEqual.default)(node[valueKey], value);
+      }), _extends2), node);
+      if (parent) {
+        flattenedNodes.current[refKey].parent = (0, _omit.default)(parent, 'parent', 'children');
+      }
+      flattenTreeData(node[childrenKey], node, layer + 1);
+    });
+    callback === null || callback === void 0 ? void 0 : callback(flattenedNodes.current);
+    forceUpdate();
+  }, [callback, forceUpdate, valueKey, labelKey, uncheckableItemValues, childrenKey]);
+  (0, _react.useEffect)(function () {
+    // when data is changed, should clear the flattenedNodes, avoid duplicate keys
+    flattenedNodes.current = {};
+    flattenTreeData(data);
+  }, [data]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  (0, _react.useEffect)(function () {
+    if (multiple) {
+      updateTreeNodeCheckState(value);
+      forceUpdate();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+  return flattenedNodes.current;
+}
+var _default = useFlattenTree;
+exports.default = _default;

package/cjs/Tree/hooks/useFocusTree.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import type { TreeNode } from '../types';
+interface UseFocusTreeProps<T extends TreeNode> {
+    filteredData: T[];
+    disabledItemValues: any[];
+    expandItemValues: any[];
+    searchKeyword: string;
+    flattenedNodes: any;
+    onExpand?: (nodeData: T, expanded: boolean) => void;
+    onFocused?: (value: TreeNode['value']) => void;
+}
+/**
+ * Custom hook that manages the focus behavior of a tree component.
+ */
+declare function useFocusTree(props: UseFocusTreeProps<TreeNode>): {
+    treeViewRef: import("react").RefObject<HTMLDivElement>;
+    focusTreeFirstNode: (...args: any[]) => any;
+    focusItemValue: string | number | null | undefined;
+    treeNodesRefs: {};
+    saveTreeNodeRef: (ref: import("react").Ref<any>, refKey?: string | undefined) => void;
+    setFocusItemValue: import("react").Dispatch<import("react").SetStateAction<string | number | null | undefined>>;
+    onTreeKeydown: (...args: any[]) => any;
+};
+export default useFocusTree;