rsuite 5.60.1 → 5.61.0

package/cjs/Tree/Tree.d.ts

@@ -1,95 +1,7 @@
-import React from 'react';
-import { StandardProps, ItemDataType, RsRefForwardingComponent } from '../@types/common';
-import { ListProps } from '../internals/Windowing';
-/**
- * Tree Node Drag Type
- */
-export declare enum TREE_NODE_DROP_POSITION {
-    DRAG_OVER = 0,
-    DRAG_OVER_TOP = 1,
-    DRAG_OVER_BOTTOM = 2
-}
-export interface DropData<ItemDataType> {
-    /** drag node data */
-    dragNode: ItemDataType;
-    /** dropNode data */
-    dropNode: ItemDataType;
-    /** node drop position */
-    dropNodePosition: TREE_NODE_DROP_POSITION;
-    /** Update Data when drop node */
-    createUpdateDataFunction: (data: ItemDataType[]) => ItemDataType[];
-}
-export interface TreeDragProps<ItemDataType = Record<string, any>> {
-    /** Whether the node can  be dragged */
-    draggable?: boolean;
-    /** Called when scrolling */
-    onScroll?: (event: React.SyntheticEvent) => void;
-    /** Called when node drag start */
-    onDragStart?: (nodeData: ItemDataType, e: React.DragEvent) => void;
-    /** Called when node drag enter */
-    onDragEnter?: (nodeData: ItemDataType, e: React.DragEvent) => void;
-    /** Called when node drag over */
-    onDragOver?: (nodeData: ItemDataType, e: React.DragEvent) => void;
-    /** Called when node drag leave */
-    onDragLeave?: (nodeData: ItemDataType, e: React.DragEvent) => void;
-    /** Called when node drag end */
-    onDragEnd?: (nodeData: ItemDataType, e: React.DragEvent) => void;
-    /** Called when node drop */
-    onDrop?: (dropData: DropData<ItemDataType>, e: React.DragEvent) => void;
-}
-export interface TreeBaseProps<ValueType = string | number, ItemDataType = Record<string, any>> extends StandardProps {
-    /** The height of Dropdown */
-    height?: number;
-    /** Whether display search input box */
-    searchable?: boolean;
-    /** Display an auxiliary line when the tree node is indented. */
-    showIndentLine?: boolean;
-    /** Whether using virtualized list */
-    virtualized?: boolean;
-    /** Virtualized List props */
-    listProps?: Partial<ListProps>;
-    /** Expand all nodes By default */
-    defaultExpandAll?: boolean;
-    /** searchKeyword (Controlled) */
-    searchKeyword?: string;
-    /** Set the option value for the expand node */
-    defaultExpandItemValues?: any[];
-    /** Set the option value for the expand node with controlled*/
-    expandItemValues?: any[];
-    /** Callback function for data change */
-    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 */
-    renderTreeIcon?: (nodeData: ItemDataType) => React.ReactNode;
-    /** callback fired when search */
-    onSearch?: (searchKeyword: string, event: React.KeyboardEvent<HTMLInputElement>) => void;
-    /** Called when clean */
-    onClean?: (event: React.SyntheticEvent) => void;
-    /** Custom search rules. */
-    searchBy?: (keyword: string, label: React.ReactNode, item: any) => boolean;
-    /** Customizing the Rendering Menu list */
-    renderMenu?: (menu: React.ReactNode) => React.ReactNode;
-    /** load node children data asynchronously */
-    getChildren?: (activeNode: ItemDataType) => ItemDataType[] | Promise<ItemDataType>;
-}
-export interface TreeProps<T = string | number> extends TreeBaseProps<T, ItemDataType<T>>, TreeDragProps<ItemDataType<T>> {
-    /** Tree Data */
-    data: ItemDataType<T>[];
-    /** Selected value */
-    value?: T;
-    /** Whether using virtualized list */
-    virtualized?: boolean;
-    /** Tree data structure Label property name */
-    labelKey?: string;
-    /** Tree data Structure Value property name */
-    valueKey?: string;
-    /** Tree data structure Children property name */
-    childrenKey?: string;
+import { RsRefForwardingComponent } from '../@types/common';
+import { type TreeViewProps } from './TreeView';
+import type { TreeExtraProps } from './types';
+export interface TreeProps<T = string | number | null> extends TreeViewProps<T>, TreeExtraProps {
     /** Default selected Value  */
     defaultValue?: T;
 }

package/cjs/Tree/Tree.js

@@ -4,37 +4,96 @@
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.default = exports.TREE_NODE_DROP_POSITION = void 0;
+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 _TreePicker = _interopRequireDefault(require("../TreePicker"));
-var _TreeContext = _interopRequireDefault(require("./TreeContext"));
-/**
- * Tree Node Drag Type
- */
-var TREE_NODE_DROP_POSITION;
-exports.TREE_NODE_DROP_POSITION = TREE_NODE_DROP_POSITION;
-(function (TREE_NODE_DROP_POSITION) {
-  TREE_NODE_DROP_POSITION[TREE_NODE_DROP_POSITION["DRAG_OVER"] = 0] = "DRAG_OVER";
-  TREE_NODE_DROP_POSITION[TREE_NODE_DROP_POSITION["DRAG_OVER_TOP"] = 1] = "DRAG_OVER_TOP";
-  TREE_NODE_DROP_POSITION[TREE_NODE_DROP_POSITION["DRAG_OVER_BOTTOM"] = 2] = "DRAG_OVER_BOTTOM";
-})(TREE_NODE_DROP_POSITION || (exports.TREE_NODE_DROP_POSITION = TREE_NODE_DROP_POSITION = {}));
+var _TreeView = _interopRequireDefault(require("./TreeView"));
+var _utils = require("../utils");
+var _useFlattenTree = _interopRequireDefault(require("./hooks/useFlattenTree"));
+var _useTreeWithChildren2 = _interopRequireDefault(require("./hooks/useTreeWithChildren"));
+var _useExpandTree2 = _interopRequireDefault(require("./hooks/useExpandTree"));
+var _TreeProvider = require("./TreeProvider");
 /**
  * The `Tree` component is used to display hierarchical data.
  *
  * @see https://rsuitejs.com/components/tree
  */
 var Tree = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var contextValue = (0, _react.useMemo)(function () {
+  var controlledValue = props.value,
+    defaultValue = props.defaultValue,
+    _props$childrenKey = props.childrenKey,
+    childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,
+    _props$labelKey = props.labelKey,
+    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
+    _props$valueKey = props.valueKey,
+    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
+    data = props.data,
+    _props$defaultExpandA = props.defaultExpandAll,
+    defaultExpandAll = _props$defaultExpandA === void 0 ? false : _props$defaultExpandA,
+    _props$defaultExpandI = props.defaultExpandItemValues,
+    defaultExpandItemValues = _props$defaultExpandI === void 0 ? [] : _props$defaultExpandI,
+    controlledExpandItemValues = props.expandItemValues,
+    virtualized = props.virtualized,
+    renderTreeIcon = props.renderTreeIcon,
+    renderTreeNode = props.renderTreeNode,
+    getChildren = props.getChildren,
+    onChange = props.onChange,
+    onExpand = props.onExpand,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["value", "defaultValue", "childrenKey", "labelKey", "valueKey", "data", "defaultExpandAll", "defaultExpandItemValues", "expandItemValues", "virtualized", "renderTreeIcon", "renderTreeNode", "getChildren", "onChange", "onExpand"]);
+  var _useControlled = (0, _utils.useControlled)(controlledValue, defaultValue),
+    value = _useControlled[0],
+    setValue = _useControlled[1];
+  var itemDataKeys = {
+    childrenKey: childrenKey,
+    labelKey: labelKey,
+    valueKey: valueKey
+  };
+  var _useTreeWithChildren = (0, _useTreeWithChildren2.default)(data, itemDataKeys),
+    treeData = _useTreeWithChildren.treeData,
+    loadingNodeValues = _useTreeWithChildren.loadingNodeValues,
+    appendChild = _useTreeWithChildren.appendChild;
+  var flattenedNodes = (0, _useFlattenTree.default)(treeData, (0, _extends2.default)({}, itemDataKeys));
+  var _useExpandTree = (0, _useExpandTree2.default)(data, (0, _extends2.default)({}, itemDataKeys, {
+      defaultExpandAll: defaultExpandAll,
+      defaultExpandItemValues: defaultExpandItemValues,
+      controlledExpandItemValues: controlledExpandItemValues,
+      onExpand: onExpand,
+      getChildren: getChildren,
+      appendChild: appendChild
+    })),
+    expandItemValues = _useExpandTree.expandItemValues,
+    handleExpandTreeNode = _useExpandTree.handleExpandTreeNode;
+  var handleChange = (0, _utils.useEventCallback)(function (nextValue, event) {
+    setValue(nextValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
+  });
+  var treeContext = (0, _react.useMemo)(function () {
     return {
-      inline: true
+      props: {
+        childrenKey: childrenKey,
+        labelKey: labelKey,
+        valueKey: valueKey,
+        virtualized: virtualized,
+        renderTreeIcon: renderTreeIcon,
+        renderTreeNode: renderTreeNode
+      }
     };
-  }, []);
-  return /*#__PURE__*/_react.default.createElement(_TreeContext.default.Provider, {
-    value: contextValue
-  }, /*#__PURE__*/_react.default.createElement(_TreePicker.default, (0, _extends2.default)({
+  }, [childrenKey, labelKey, valueKey, virtualized, renderTreeIcon, renderTreeNode]);
+  return /*#__PURE__*/_react.default.createElement(_TreeProvider.TreeProvider, {
+    value: treeContext
+  }, /*#__PURE__*/_react.default.createElement(_TreeView.default, (0, _extends2.default)({
     ref: ref
-  }, props)));
+  }, rest, {
+    value: value,
+    data: treeData,
+    virtualized: virtualized,
+    loadingNodeValues: loadingNodeValues,
+    flattenedNodes: flattenedNodes,
+    expandItemValues: expandItemValues,
+    onChange: handleChange,
+    onExpand: handleExpandTreeNode
+  })));
 });
 Tree.displayName = 'Tree';
 var _default = Tree;

package/cjs/Tree/TreeNode.d.ts

@@ -0,0 +1,101 @@
+import React from 'react';
+import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
+import type { TreeNode as TreeNodeData } from './types';
+export declare type DragStatus = 'drag-over' | 'drag-over-top' | 'drag-over-bottom';
+interface TreeDragEventProps {
+    /**
+     * Callback function called when the drag operation starts.
+     */
+    onDragStart?: (nodeData: TreeNodeData, event: React.DragEvent<any>) => void;
+    /**
+     * Callback function called when a dragged item enters the node.
+     */
+    onDragEnter?: (nodeData: TreeNodeData, event: React.DragEvent<any>) => void;
+    /**
+     * Callback function called when a dragged item is over the node.
+     */
+    onDragOver?: (nodeData: TreeNodeData, event: React.DragEvent<any>) => void;
+    /**
+     * Callback function called when a dragged item leaves the node.
+     */
+    onDragLeave?: (nodeData: TreeNodeData, event: React.DragEvent<any>) => void;
+    /**
+     * Callback function called when the drag operation ends.
+     */
+    onDragEnd?: (nodeData: TreeNodeData, event: React.DragEvent<any>) => void;
+    /**
+     * Callback function called when a dragged item is dropped on the node.
+     */
+    onDrop?: (nodeData: TreeNodeData, event: React.DragEvent<any>) => void;
+}
+/**
+ * Props for the TreeNode component.
+ */
+export interface TreeNodeProps extends WithAsProps, TreeDragEventProps {
+    /**
+     * The layer of the node in the tree hierarchy.
+     */
+    layer: number;
+    /**
+     * The value of the node.
+     */
+    value?: TreeNodeData['value'];
+    /**
+     * The label of the node.
+     */
+    label?: TreeNodeData['label'];
+    /**
+     * Whether the node should be focused.
+     */
+    focus?: boolean;
+    /**
+     * Whether the node is in a loading state.
+     */
+    loading?: boolean;
+    /**
+     * Whether the node is expanded.
+     */
+    expanded?: boolean;
+    /**
+     * Whether the node is active.
+     */
+    active?: boolean;
+    /**
+     * Whether the node is visible.
+     */
+    visible: boolean;
+    /**
+     * The data associated with the node.
+     */
+    nodeData: any;
+    /**
+     * Whether the node is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the node is draggable.
+     */
+    draggable?: boolean;
+    /**
+     * Whether the node is being dragged.
+     */
+    dragging?: boolean;
+    /**
+     * Drag status of the node.
+     */
+    dragStatus?: DragStatus;
+    /**
+     * Whether the node has children.
+     */
+    hasChildren?: boolean;
+    /**
+     * Callback function called when the node is expanded.
+     */
+    onExpand?: (nodeData: TreeNodeData, expanded?: boolean) => void;
+    /**
+     * Callback function called when the node is selected.
+     */
+    onSelect?: (nodeData: TreeNodeData, event: React.SyntheticEvent) => void;
+}
+declare const TreeNode: RsRefForwardingComponent<'div', TreeNodeProps>;
+export default TreeNode;

package/cjs/Tree/TreeNode.js

@@ -0,0 +1,147 @@
+'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 _utils = require("../utils");
+var _utils2 = require("../internals/utils");
+var _hooks = require("../internals/hooks");
+var _TreeNodeToggle = _interopRequireDefault(require("./TreeNodeToggle"));
+var _TreeProvider = require("./TreeProvider");
+var _utils3 = require("./utils");
+/**
+ * Props for the TreeNode component.
+ */
+
+var TreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$as = props.as,
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    label = props.label,
+    layer = props.layer,
+    active = props.active,
+    loading = props.loading,
+    nodeData = props.nodeData,
+    className = props.className,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'tree-node' : _props$classPrefix,
+    disabled = props.disabled,
+    _props$visible = props.visible,
+    visible = _props$visible === void 0 ? true : _props$visible,
+    draggable = props.draggable,
+    expanded = props.expanded,
+    focus = props.focus,
+    style = props.style,
+    hasChildren = props.hasChildren,
+    dragging = props.dragging,
+    dragStatus = props.dragStatus,
+    onSelect = props.onSelect,
+    onDragStart = props.onDragStart,
+    onDragOver = props.onDragOver,
+    onDragEnter = props.onDragEnter,
+    onDragLeave = props.onDragLeave,
+    onDragEnd = props.onDragEnd,
+    onDrop = props.onDrop,
+    onExpand = props.onExpand,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "label", "layer", "active", "loading", "nodeData", "className", "classPrefix", "disabled", "visible", "draggable", "expanded", "focus", "style", "hasChildren", "dragging", "dragStatus", "onSelect", "onDragStart", "onDragOver", "onDragEnter", "onDragLeave", "onDragEnd", "onDrop", "onExpand"]);
+  var _useCustom = (0, _utils.useCustom)(),
+    rtl = _useCustom.rtl;
+  var _useTreeContextProps = (0, _TreeProvider.useTreeContextProps)(),
+    renderTreeNode = _useTreeContextProps.renderTreeNode,
+    virtualized = _useTreeContextProps.virtualized;
+  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+    prefix = _useClassNames.prefix,
+    merge = _useClassNames.merge,
+    withClassPrefix = _useClassNames.withClassPrefix;
+  var labelStr = (0, _react.useMemo)(function () {
+    return (0, _utils2.stringifyReactNode)(label);
+  }, [label]);
+  var handleExpand = (0, _utils.useEventCallback)(function (event) {
+    var _event$nativeEvent, _event$nativeEvent$st;
+    // Stop propagation when using custom loading icon
+    event === null || event === void 0 ? void 0 : (_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : (_event$nativeEvent$st = _event$nativeEvent.stopImmediatePropagation) === null || _event$nativeEvent$st === void 0 ? void 0 : _event$nativeEvent$st.call(_event$nativeEvent);
+    event.stopPropagation();
+    onExpand === null || onExpand === void 0 ? void 0 : onExpand(nodeData, expanded);
+  });
+  var handleSelect = (0, _utils.useEventCallback)(function (event) {
+    if (disabled) {
+      return;
+    }
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeData, event);
+  });
+  var handleDragStart = (0, _utils.useEventCallback)(function (event) {
+    onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(nodeData, event);
+  });
+  var handleDragEnter = (0, _utils.useEventCallback)(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+    onDragEnter === null || onDragEnter === void 0 ? void 0 : onDragEnter(nodeData, event);
+  });
+  var handleDragOver = (0, _utils.useEventCallback)(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+    onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(nodeData, event);
+  });
+  var handleDragLeave = (0, _utils.useEventCallback)(function (event) {
+    event.stopPropagation();
+    onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(nodeData, event);
+  });
+  var handleDragEnd = (0, _utils.useEventCallback)(function (event) {
+    event.stopPropagation();
+    onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(nodeData, event);
+  });
+  var handleDrop = (0, _utils.useEventCallback)(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+    onDrop === null || onDrop === void 0 ? void 0 : onDrop(nodeData, event);
+  });
+  var classes = merge(className, withClassPrefix({
+    disabled: disabled,
+    active: active,
+    'text-muted': disabled,
+    focus: focus
+  }));
+  var treeItemRef = (0, _hooks.useFoucsVirtualListItem)(focus);
+  var styles = virtualized ? (0, _extends2.default)({}, style, (0, _utils3.indentTreeNode)(rtl, layer - 1)) : style;
+  return visible ? /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+    ref: (0, _utils.mergeRefs)(treeItemRef, ref),
+    role: "treeitem",
+    tabIndex: -1,
+    "aria-expanded": expanded,
+    "aria-label": labelStr,
+    "aria-level": layer,
+    "aria-disabled": disabled,
+    "aria-selected": active,
+    "data-layer": layer,
+    "data-key": (nodeData === null || nodeData === void 0 ? void 0 : nodeData.refKey) || '',
+    title: labelStr,
+    className: classes,
+    style: styles,
+    draggable: draggable,
+    onClick: handleSelect,
+    onDragStart: handleDragStart,
+    onDragEnter: handleDragEnter,
+    onDragOver: handleDragOver,
+    onDragLeave: handleDragLeave,
+    onDragEnd: handleDragEnd,
+    onDrop: handleDrop
+  }), /*#__PURE__*/_react.default.createElement(_TreeNodeToggle.default, {
+    "aria-label": (expanded ? 'Collapse' : 'Expand') + (" " + labelStr),
+    data: nodeData,
+    loading: loading,
+    expanded: expanded,
+    hasChildren: hasChildren,
+    onClick: handleExpand
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: prefix('label', dragStatus, {
+      dragging: dragging
+    })
+  }, renderTreeNode ? renderTreeNode(nodeData) : label)) : null;
+});
+TreeNode.displayName = 'TreeNode';
+var _default = TreeNode;
+exports.default = _default;

package/cjs/Tree/TreeNodeToggle.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface TreeNodeToggleProps extends React.HTMLAttributes<HTMLDivElement> {
+    data: any;
+    loading?: boolean;
+    expanded?: boolean;
+    hasChildren?: boolean;
+}
+declare function TreeNodeToggle(props: TreeNodeToggleProps): JSX.Element;
+export default TreeNodeToggle;

package/cjs/Tree/TreeNodeToggle.js

@@ -0,0 +1,56 @@
+'use client';
+"use strict";
+
+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 = _interopRequireDefault(require("react"));
+var _ArrowDown = _interopRequireDefault(require("@rsuite/icons/ArrowDown"));
+var _ArrowRight = _interopRequireDefault(require("@rsuite/icons/ArrowRight"));
+var _ArrowLeft = _interopRequireDefault(require("@rsuite/icons/ArrowLeft"));
+var _Spinner = _interopRequireDefault(require("@rsuite/icons/legacy/Spinner"));
+var _utils = require("../utils");
+var _TreeProvider = require("./TreeProvider");
+function TreeNodeToggle(props) {
+  var data = props.data,
+    loading = props.loading,
+    expanded = props.expanded,
+    hasChildren = props.hasChildren,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["data", "loading", "expanded", "hasChildren"]);
+  var _useCustom = (0, _utils.useCustom)(),
+    rtl = _useCustom.rtl;
+  var _useTreeCustomRendere = (0, _TreeProvider.useTreeCustomRenderer)(),
+    renderTreeIcon = _useTreeCustomRendere.renderTreeIcon;
+  var _useClassNames = (0, _utils.useClassNames)('tree-node'),
+    prefix = _useClassNames.prefix;
+  var IconElementType = expanded ? _ArrowDown.default : rtl ? _ArrowLeft.default : _ArrowRight.default;
+  var icon = /*#__PURE__*/_react.default.createElement(IconElementType, {
+    className: prefix('toggle-icon')
+  });
+  if (loading) {
+    icon = /*#__PURE__*/_react.default.createElement("div", {
+      className: prefix('loading-icon')
+    }, /*#__PURE__*/_react.default.createElement(_Spinner.default, {
+      spin: true
+    }));
+  }
+  if (data !== undefined && typeof renderTreeIcon === 'function') {
+    var customIcon = renderTreeIcon(data, expanded);
+    icon = customIcon !== null ? /*#__PURE__*/_react.default.createElement("div", {
+      className: prefix('custom-icon')
+    }, customIcon) : icon;
+  }
+  return hasChildren ? /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    tabIndex: -1,
+    role: "button",
+    "aria-busy": loading ? true : undefined,
+    "data-ref": data.refKey,
+    className: prefix('toggle')
+  }, rest), icon) : /*#__PURE__*/_react.default.createElement("div", {
+    className: prefix('toggle-placeholder')
+  });
+}
+var _default = TreeNodeToggle;
+exports.default = _default;

package/cjs/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/cjs/Tree/TreeProvider.js

@@ -0,0 +1,84 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.useTreeImperativeHandle = exports.useTreeContextProps = exports.useItemDataKeys = exports.useTreeCustomRenderer = exports.useRegisterTreeMethods = exports.TreeProvider = void 0;
+var _react = require("react");
+var defaultItemDataKeys = {
+  labelKey: 'label',
+  valueKey: 'value',
+  childrenKey: 'children',
+  virtualized: false
+};
+var TreeContext = /*#__PURE__*/(0, _react.createContext)({
+  props: defaultItemDataKeys
+});
+var TreeProvider = TreeContext.Provider;
+exports.TreeProvider = TreeProvider;
+var useRegisterTreeMethods = function useRegisterTreeMethods() {
+  var _useContext = (0, _react.useContext)(TreeContext),
+    register = _useContext.register;
+  return register;
+};
+exports.useRegisterTreeMethods = useRegisterTreeMethods;
+var useTreeCustomRenderer = function useTreeCustomRenderer() {
+  var _useContext2 = (0, _react.useContext)(TreeContext),
+    _useContext2$props = _useContext2.props,
+    renderTreeIcon = _useContext2$props.renderTreeIcon,
+    renderTreeNode = _useContext2$props.renderTreeNode;
+  return {
+    renderTreeIcon: renderTreeIcon,
+    renderTreeNode: renderTreeNode
+  };
+};
+exports.useTreeCustomRenderer = useTreeCustomRenderer;
+var useItemDataKeys = function useItemDataKeys() {
+  var _useContext3 = (0, _react.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
+  };
+};
+exports.useItemDataKeys = useItemDataKeys;
+var useTreeContextProps = function useTreeContextProps() {
+  var _useContext4 = (0, _react.useContext)(TreeContext),
+    props = _useContext4.props;
+  return props;
+};
+
+/**
+ * Custom hook that provides imperative handle for the Tree component.
+ */
+exports.useTreeContextProps = useTreeContextProps;
+var useTreeImperativeHandle = function useTreeImperativeHandle() {
+  var focusFirstNodeRef = (0, _react.useRef)(null);
+  var focusActiveNodeRef = (0, _react.useRef)(null);
+  var register = (0, _react.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);
+    }
+  };
+};
+exports.useTreeImperativeHandle = useTreeImperativeHandle;