rsuite 5.60.1 → 5.61.0

package/esm/Tree/TreeProvider.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { TreeNode } from './types';
+interface RegisterMethods {
+    /**
+     * Focuses on the first node in the tree.
+     */
+    focusTreeFirstNode: () => void;
+    /**
+     * Focuses on the active node in the tree.
+     */
+    focusTreeActiveNode: () => void;
+}
+declare type Unregister = () => void;
+interface TreeContextValue {
+    register?: (methods: RegisterMethods) => Unregister;
+    props: {
+        labelKey: string;
+        valueKey: string;
+        childrenKey: string;
+        virtualized?: boolean;
+        renderTreeNode?: (nodeData: TreeNode) => React.ReactNode;
+        renderTreeIcon?: (nodeData: TreeNode, expanded?: boolean) => React.ReactNode;
+    };
+}
+export declare const TreeProvider: React.Provider<TreeContextValue>;
+export declare const useRegisterTreeMethods: () => ((methods: RegisterMethods) => Unregister) | undefined;
+export declare const useTreeCustomRenderer: () => {
+    renderTreeIcon: ((nodeData: TreeNode, expanded?: boolean) => React.ReactNode) | undefined;
+    renderTreeNode: ((nodeData: TreeNode) => React.ReactNode) | undefined;
+};
+export declare const useItemDataKeys: () => {
+    labelKey: string;
+    valueKey: string;
+    childrenKey: string;
+};
+export declare const useTreeContextProps: () => {
+    labelKey: string;
+    valueKey: string;
+    childrenKey: string;
+    virtualized?: boolean | undefined;
+    renderTreeNode?: ((nodeData: TreeNode) => React.ReactNode) | undefined;
+    renderTreeIcon?: ((nodeData: TreeNode, expanded?: boolean) => React.ReactNode) | undefined;
+};
+/**
+ * Custom hook that provides imperative handle for the Tree component.
+ */
+export declare const useTreeImperativeHandle: () => {
+    register: ({ focusTreeFirstNode, focusTreeActiveNode }: any) => () => void;
+    focusFirstNode: () => void | undefined;
+    focusActiveNode: () => void | undefined;
+};
+export {};

package/esm/Tree/TreeProvider.js

@@ -0,0 +1,74 @@
+'use client';
+import { createContext, useContext, useRef, useCallback } from 'react';
+var defaultItemDataKeys = {
+  labelKey: 'label',
+  valueKey: 'value',
+  childrenKey: 'children',
+  virtualized: false
+};
+var TreeContext = /*#__PURE__*/createContext({
+  props: defaultItemDataKeys
+});
+export var TreeProvider = TreeContext.Provider;
+export var useRegisterTreeMethods = function useRegisterTreeMethods() {
+  var _useContext = useContext(TreeContext),
+    register = _useContext.register;
+  return register;
+};
+export var useTreeCustomRenderer = function useTreeCustomRenderer() {
+  var _useContext2 = useContext(TreeContext),
+    _useContext2$props = _useContext2.props,
+    renderTreeIcon = _useContext2$props.renderTreeIcon,
+    renderTreeNode = _useContext2$props.renderTreeNode;
+  return {
+    renderTreeIcon: renderTreeIcon,
+    renderTreeNode: renderTreeNode
+  };
+};
+export var useItemDataKeys = function useItemDataKeys() {
+  var _useContext3 = useContext(TreeContext),
+    _useContext3$props = _useContext3.props;
+  _useContext3$props = _useContext3$props === void 0 ? defaultItemDataKeys : _useContext3$props;
+  var labelKey = _useContext3$props.labelKey,
+    valueKey = _useContext3$props.valueKey,
+    childrenKey = _useContext3$props.childrenKey;
+  return {
+    labelKey: labelKey,
+    valueKey: valueKey,
+    childrenKey: childrenKey
+  };
+};
+export var useTreeContextProps = function useTreeContextProps() {
+  var _useContext4 = useContext(TreeContext),
+    props = _useContext4.props;
+  return props;
+};
+
+/**
+ * Custom hook that provides imperative handle for the Tree component.
+ */
+export var useTreeImperativeHandle = function useTreeImperativeHandle() {
+  var focusFirstNodeRef = useRef(null);
+  var focusActiveNodeRef = useRef(null);
+  var register = useCallback(function (_ref) {
+    var focusTreeFirstNode = _ref.focusTreeFirstNode,
+      focusTreeActiveNode = _ref.focusTreeActiveNode;
+    focusFirstNodeRef.current = focusTreeFirstNode;
+    focusActiveNodeRef.current = focusTreeActiveNode;
+    return function () {
+      focusFirstNodeRef.current = null;
+      focusActiveNodeRef.current = null;
+    };
+  }, []);
+  return {
+    register: register,
+    focusFirstNode: function focusFirstNode() {
+      var _focusFirstNodeRef$cu;
+      return (_focusFirstNodeRef$cu = focusFirstNodeRef.current) === null || _focusFirstNodeRef$cu === void 0 ? void 0 : _focusFirstNodeRef$cu.call(focusFirstNodeRef);
+    },
+    focusActiveNode: function focusActiveNode() {
+      var _focusActiveNodeRef$c;
+      return (_focusActiveNodeRef$c = focusActiveNodeRef.current) === null || _focusActiveNodeRef$c === void 0 ? void 0 : _focusActiveNodeRef$c.call(focusActiveNodeRef);
+    }
+  };
+};

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

@@ -0,0 +1,299 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { useEffect, useMemo } from 'react';
+import isNil from 'lodash/isNil';
+import { List, AutoSizer, defaultItemSize } from '../internals/Windowing';
+import TreeViewNode from './TreeNode';
+import IndentLine from './IndentLine';
+import { getPathTowardsItem, getKeyParentMap } from '../internals/Tree/utils';
+import { useClassNames, useCustom, useEventCallback } from '../utils';
+import { isExpand, hasVisibleChildren, getActiveItem } from './utils';
+import { onMenuKeyDown } from '../internals/Picker';
+import { TreeView as BaseTreeView } from '../internals/Tree';
+import useTreeSearch from './hooks/useTreeSearch';
+import useTreeDrag from './hooks/useTreeDrag';
+import useFocusTree from './hooks/useFocusTree';
+import useVirtualizedTreeData from './hooks/useVirtualizedTreeData';
+import useTreeNodeProps from './hooks/useTreeNodeProps';
+import SearchBox from '../internals/SearchBox';
+import { useItemDataKeys } from './TreeProvider';
+
+/**
+ * Props for the TreeViewInner component.
+ */
+/**
+ * Represents the props for the TreeView component.
+ */
+var TreeView = /*#__PURE__*/React.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 = _objectWithoutPropertiesLoose(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 = useCustom('Picker', overrideLocale),
+    locale = _useCustom.locale;
+  var _useItemDataKeys = useItemDataKeys(),
+    valueKey = _useItemDataKeys.valueKey,
+    childrenKey = _useItemDataKeys.childrenKey;
+  var _useClassNames = useClassNames(classPrefix),
+    prefix = _useClassNames.prefix,
+    merge = _useClassNames.merge,
+    withClassPrefix = _useClassNames.withClassPrefix;
+  var handleSearchCallback = useEventCallback(function (value, _data, event) {
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, event);
+  });
+  var _useTreeSearch = useTreeSearch({
+      callback: handleSearchCallback,
+      searchKeyword: searchKeyword,
+      data: data,
+      searchBy: searchBy
+    }),
+    filteredData = _useTreeSearch.filteredData,
+    keyword = _useTreeSearch.keyword,
+    setFilteredData = _useTreeSearch.setFilteredData,
+    handleSearch = _useTreeSearch.handleSearch;
+  var transformation = useVirtualizedTreeData(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;
+    });
+  };
+  useEffect(function () {
+    setFilteredData(data, keyword);
+  }, [data, keyword, setFilteredData]);
+
+  // 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 _useFocusTree = useFocusTree({
+      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 = useTreeDrag({
+      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 = useTreeNodeProps({
+    value: valueProp,
+    disabledItemValues: disabledItemValues,
+    loadingNodeValues: loadingNodeValues,
+    focusItemValue: focusItemValue,
+    keyword: keyword,
+    dragNode: dragNode,
+    dragOverNodeKey: dragOverNodeKey,
+    dropNodePosition: dropNodePosition
+  });
+  var handleSelect = useEventCallback(function (nodeData, event) {
+    if (!nodeData) {
+      return;
+    }
+    var nextValue = nodeData[valueKey];
+    var path = 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 = useEventCallback(function (event) {
+    if (isNil(focusItemValue)) return;
+    var activeItem = getActiveItem(focusItemValue, flattenedNodes, valueKey);
+    handleSelect(activeItem, event);
+  });
+  var handleTreeKeyDown = useEventCallback(function (event) {
+    onTreeKeydown(event);
+    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 = isExpand(keyword, expandItemValues.includes(node[valueKey]));
+    var hasChildren = keyword ? hasVisibleChildren(node, childrenKey) : Boolean(children);
+    var nodeProps = _extends({}, 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.createElement("div", {
+        className: childClassName,
+        key: node[valueKey]
+      }, /*#__PURE__*/React.createElement(TreeViewNode, _extends({}, nodeProps, {
+        ref: function ref(_ref) {
+          return saveTreeNodeRef(_ref, node.refKey);
+        }
+      })), /*#__PURE__*/React.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.createElement(IndentLine, null)));
+    }
+    return /*#__PURE__*/React.createElement(TreeViewNode, _extends({
+      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 = isExpand(keyword, expandItemValues.includes(node[valueKey]));
+    if (!visible) {
+      return null;
+    }
+    var treeNodeProps = _extends({}, getTreeNodeProps(node, layer), dragEvents, {
+      expanded: expanded,
+      style: style,
+      onExpand: onExpand,
+      onSelect: handleSelect,
+      hasChildren: hasChildren
+    });
+    return visible && /*#__PURE__*/React.createElement(TreeViewNode, _extends({
+      ref: function ref(_ref4) {
+        return saveTreeNodeRef(_ref4, node.refKey);
+      }
+    }, treeNodeProps));
+  };
+  var classes = merge(withClassPrefix({
+    virtualized: virtualized
+  }), className);
+  var formattedNodes = getFormattedNodes(renderNode);
+  return /*#__PURE__*/React.createElement(Component, {
+    ref: ref,
+    className: classes,
+    style: style
+  }, searchable ? /*#__PURE__*/React.createElement(SearchBox, {
+    placeholder: locale.searchPlaceholder,
+    onChange: handleSearch,
+    value: keyword,
+    inputRef: searchInputRef
+  }) : null, keyword && formattedNodes.length === 0 ? /*#__PURE__*/React.createElement("div", {
+    className: prefix('empty')
+  }, locale.noResultsText) : null, /*#__PURE__*/React.createElement(BaseTreeView, _extends({}, rest, {
+    ref: treeViewRef,
+    treeRootClassName: prefix('root'),
+    onScroll: onScroll,
+    onKeyDown: handleTreeKeyDown,
+    className: prefix('view'),
+    style: virtualized ? undefined : {
+      height: height
+    }
+  }), virtualized ? /*#__PURE__*/React.createElement(AutoSizer, {
+    defaultHeight: height,
+    style: {
+      width: 'auto',
+      height: 'auto'
+    },
+    className: prefix('virt-auto-sizer')
+  }, function (_ref5) {
+    var height = _ref5.height;
+    return /*#__PURE__*/React.createElement(List, _extends({
+      ref: listRef,
+      height: height,
+      itemSize: defaultItemSize,
+      itemCount: formattedNodes.length,
+      itemData: formattedNodes,
+      className: prefix('virt-list')
+    }, listProps), renderVirtualListNode);
+  }) : formattedNodes));
+});
+TreeView.displayName = 'TreeView';
+export default TreeView;

package/esm/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/esm/Tree/hooks/useExpandTree.js

@@ -0,0 +1,70 @@
+'use client';
+import { useEffect } from 'react';
+import isFunction from 'lodash/isFunction';
+import { useControlled, useEventCallback } from '../../utils';
+import { createConcatChildrenFunction } from '../../internals/Picker';
+import { getExpandItemValues, flattenTree } from '../utils';
+export 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 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 = useControlled(controlledExpandItemValues, getDefaultExpandItemValues(data, {
+      defaultExpandAll: defaultExpandAll,
+      valueKey: valueKey,
+      childrenKey: childrenKey,
+      defaultExpandItemValues: defaultExpandItemValues
+    })),
+    expandItemValues = _useControlled[0],
+    setExpandItemValues = _useControlled[1];
+  useEffect(function () {
+    if (Array.isArray(controlledExpandItemValues)) {
+      setExpandItemValues(controlledExpandItemValues);
+    }
+  }, [controlledExpandItemValues, setExpandItemValues]);
+  var handleExpandTreeNode = useEventCallback(function (node, expanded) {
+    var nextExpandItemValues = getExpandItemValues({
+      node: node,
+      isExpand: !expanded,
+      expandItemValues: expandItemValues,
+      valueKey: valueKey
+    });
+    setExpandItemValues(nextExpandItemValues);
+    onExpand === null || onExpand === void 0 ? void 0 : onExpand(nextExpandItemValues, node, createConcatChildrenFunction(node, node[valueKey], {
+      valueKey: valueKey,
+      childrenKey: childrenKey
+    }));
+    if (isFunction(getChildren) && !node.expand && Array.isArray(node[childrenKey]) && node[childrenKey].length === 0) {
+      appendChild(node, getChildren);
+    }
+  });
+  return {
+    expandItemValues: expandItemValues,
+    handleExpandTreeNode: handleExpandTreeNode
+  };
+}
+export default useExpandTree;

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