rsuite 5.60.1 → 5.61.0

package/esm/MultiCascadeTree/hooks/useSearch.js

@@ -1,6 +1,7 @@
 'use client';
 import { useState } from 'react';
-import { getSafeRegExpString, useEventCallback } from '../../utils';
+import { useEventCallback } from '../../utils';
+import { getSafeRegExpString } from '../../internals/utils';
 function useSearch(props) {
   var _useState = useState(''),
     searchKeyword = _useState[0],

package/esm/MultiCascadeTree/utils.d.ts

@@ -7,14 +7,14 @@ interface ItemKeys {
     labelKey: string;
     childrenKey: string;
 }
-declare type MayHasParent<T extends Record<string, unknown>> = T & {
+export declare type MayHasParent<T extends Record<string, unknown>> = T & {
     parent?: MayHasParent<T>;
 };
 /**
- * Get all parents of a node
- * @param node
+ * get all ancestor nodes of given node
+ * @param {*} node
  */
-export declare const getParents: <T extends Record<string, unknown>>(node: MayHasParent<T>) => MayHasParent<T>[];
+export declare function getNodeParents(node: any, parentKey?: string, valueKey?: string): any[];
 /**
  * Check if any child nodes are selected.
  * @param node

package/esm/MultiCascadeTree/utils.js

@@ -1,18 +1,27 @@
 'use client';
 import remove from 'lodash/remove';
 /**
- * Get all parents of a node
- * @param node
+ * get all ancestor nodes of given node
+ * @param {*} node
  */
-export var getParents = function getParents(node) {
-  var parents = [];
-  if (!node.parent) {
-    return parents;
+export function getNodeParents(node, parentKey, valueKey) {
+  if (parentKey === void 0) {
+    parentKey = 'parent';
   }
-  parents.push(node.parent);
-  parents = parents.concat(getParents(node.parent));
+  var parents = [];
+  var traverse = function traverse(node) {
+    if (node !== null && node !== void 0 && node[parentKey]) {
+      traverse(node[parentKey]);
+      if (valueKey) {
+        parents.push(node[parentKey][valueKey]);
+      } else {
+        parents.push(node[parentKey]);
+      }
+    }
+  };
+  traverse(node);
   return parents;
-};
+}
 
 /**
  * Check if any child nodes are selected.

package/esm/MultiCascader/MultiCascader.js

@@ -7,7 +7,7 @@ import pick from 'lodash/pick';
 import omit from 'lodash/omit';
 import isFunction from 'lodash/isFunction';
 import isNil from 'lodash/isNil';
-import { findNodeOfTree } from '../utils/treeUtils';
+import { findNodeOfTree } from '../internals/Tree/utils';
 import { getColumnsAndPaths } from '../CascadeTree/utils';
 import { createChainedFunction, mergeRefs, useClassNames, useCustom, useControlled, useEventCallback } from '../utils';
 import { PickerToggle, PickerPopup, SelectedElement, PickerToggleTrigger, usePickerClassName, usePickerRef, useToggleKeyDownEvent, useFocusItemValue, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../internals/Picker';

package/esm/SelectPicker/SelectPicker.js

@@ -6,7 +6,6 @@ var _templateObject;
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import pick from 'lodash/pick';
-import isUndefined from 'lodash/isUndefined';
 import isNil from 'lodash/isNil';
 import isFunction from 'lodash/isFunction';
 import omit from 'lodash/omit';
@@ -230,11 +229,8 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       listItemAs: ListItem,
       activeItemValues: [value],
       focusItemValue: focusItemValue,
-      data: items
-      // FIXME-Doma
-      // `group` is redundant so long as `groupBy` exists
-      ,
-      group: !isUndefined(groupBy),
+      data: items,
+      query: searchKeyword,
       groupBy: groupBy,
       onSelect: handleItemSelect,
       onGroupTitleClick: onGroupTitleClick,

package/esm/Tree/IndentLine.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const IndentLine: () => JSX.Element;
+export default IndentLine;

package/esm/Tree/IndentLine.js

@@ -0,0 +1,12 @@
+'use client';
+import React from 'react';
+import { useClassNames } from '../utils';
+var IndentLine = function IndentLine() {
+  var _useClassNames = useClassNames('tree'),
+    prefix = _useClassNames.prefix;
+  return /*#__PURE__*/React.createElement("span", {
+    className: prefix('indent-line'),
+    "data-testid": "indent-line"
+  });
+};
+export default IndentLine;

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

@@ -1,33 +1,93 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useMemo } from 'react';
-import TreePicker from '../TreePicker';
-import TreeContext from './TreeContext';
-/**
- * Tree Node Drag Type
- */
-export var 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 || (TREE_NODE_DROP_POSITION = {}));
+import TreeView from './TreeView';
+import { useControlled, useEventCallback } from '../utils';
+import useFlattenTree from './hooks/useFlattenTree';
+import useTreeWithChildren from './hooks/useTreeWithChildren';
+import useExpandTree from './hooks/useExpandTree';
+import { TreeProvider } from './TreeProvider';
 /**
  * The `Tree` component is used to display hierarchical data.
  *
  * @see https://rsuitejs.com/components/tree
  */
 var Tree = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var contextValue = 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 = _objectWithoutPropertiesLoose(props, ["value", "defaultValue", "childrenKey", "labelKey", "valueKey", "data", "defaultExpandAll", "defaultExpandItemValues", "expandItemValues", "virtualized", "renderTreeIcon", "renderTreeNode", "getChildren", "onChange", "onExpand"]);
+  var _useControlled = useControlled(controlledValue, defaultValue),
+    value = _useControlled[0],
+    setValue = _useControlled[1];
+  var itemDataKeys = {
+    childrenKey: childrenKey,
+    labelKey: labelKey,
+    valueKey: valueKey
+  };
+  var _useTreeWithChildren = useTreeWithChildren(data, itemDataKeys),
+    treeData = _useTreeWithChildren.treeData,
+    loadingNodeValues = _useTreeWithChildren.loadingNodeValues,
+    appendChild = _useTreeWithChildren.appendChild;
+  var flattenedNodes = useFlattenTree(treeData, _extends({}, itemDataKeys));
+  var _useExpandTree = useExpandTree(data, _extends({}, itemDataKeys, {
+      defaultExpandAll: defaultExpandAll,
+      defaultExpandItemValues: defaultExpandItemValues,
+      controlledExpandItemValues: controlledExpandItemValues,
+      onExpand: onExpand,
+      getChildren: getChildren,
+      appendChild: appendChild
+    })),
+    expandItemValues = _useExpandTree.expandItemValues,
+    handleExpandTreeNode = _useExpandTree.handleExpandTreeNode;
+  var handleChange = useEventCallback(function (nextValue, event) {
+    setValue(nextValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
+  });
+  var treeContext = useMemo(function () {
     return {
-      inline: true
+      props: {
+        childrenKey: childrenKey,
+        labelKey: labelKey,
+        valueKey: valueKey,
+        virtualized: virtualized,
+        renderTreeIcon: renderTreeIcon,
+        renderTreeNode: renderTreeNode
+      }
     };
-  }, []);
-  return /*#__PURE__*/React.createElement(TreeContext.Provider, {
-    value: contextValue
-  }, /*#__PURE__*/React.createElement(TreePicker, _extends({
+  }, [childrenKey, labelKey, valueKey, virtualized, renderTreeIcon, renderTreeNode]);
+  return /*#__PURE__*/React.createElement(TreeProvider, {
+    value: treeContext
+  }, /*#__PURE__*/React.createElement(TreeView, _extends({
     ref: ref
-  }, props)));
+  }, rest, {
+    value: value,
+    data: treeData,
+    virtualized: virtualized,
+    loadingNodeValues: loadingNodeValues,
+    flattenedNodes: flattenedNodes,
+    expandItemValues: expandItemValues,
+    onChange: handleChange,
+    onExpand: handleExpandTreeNode
+  })));
 });
 Tree.displayName = 'Tree';
 export default Tree;

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

@@ -0,0 +1,141 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { forwardRef, useMemo } from 'react';
+import { useClassNames, useEventCallback, mergeRefs, useCustom } from '../utils';
+import { stringifyReactNode } from '../internals/utils';
+import { useFoucsVirtualListItem } from '../internals/hooks';
+import TreeNodeToggle from './TreeNodeToggle';
+import { useTreeContextProps } from './TreeProvider';
+import { indentTreeNode } from './utils';
+
+/**
+ * Props for the TreeNode component.
+ */
+
+var TreeNode = /*#__PURE__*/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 = _objectWithoutPropertiesLoose(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 = useCustom(),
+    rtl = _useCustom.rtl;
+  var _useTreeContextProps = useTreeContextProps(),
+    renderTreeNode = _useTreeContextProps.renderTreeNode,
+    virtualized = _useTreeContextProps.virtualized;
+  var _useClassNames = useClassNames(classPrefix),
+    prefix = _useClassNames.prefix,
+    merge = _useClassNames.merge,
+    withClassPrefix = _useClassNames.withClassPrefix;
+  var labelStr = useMemo(function () {
+    return stringifyReactNode(label);
+  }, [label]);
+  var handleExpand = 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 = useEventCallback(function (event) {
+    if (disabled) {
+      return;
+    }
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeData, event);
+  });
+  var handleDragStart = useEventCallback(function (event) {
+    onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(nodeData, event);
+  });
+  var handleDragEnter = useEventCallback(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+    onDragEnter === null || onDragEnter === void 0 ? void 0 : onDragEnter(nodeData, event);
+  });
+  var handleDragOver = useEventCallback(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+    onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(nodeData, event);
+  });
+  var handleDragLeave = useEventCallback(function (event) {
+    event.stopPropagation();
+    onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(nodeData, event);
+  });
+  var handleDragEnd = useEventCallback(function (event) {
+    event.stopPropagation();
+    onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(nodeData, event);
+  });
+  var handleDrop = 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 = useFoucsVirtualListItem(focus);
+  var styles = virtualized ? _extends({}, style, indentTreeNode(rtl, layer - 1)) : style;
+  return visible ? /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+    ref: 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.createElement(TreeNodeToggle, {
+    "aria-label": (expanded ? 'Collapse' : 'Expand') + (" " + labelStr),
+    data: nodeData,
+    loading: loading,
+    expanded: expanded,
+    hasChildren: hasChildren,
+    onClick: handleExpand
+  }), /*#__PURE__*/React.createElement("span", {
+    className: prefix('label', dragStatus, {
+      dragging: dragging
+    })
+  }, renderTreeNode ? renderTreeNode(nodeData) : label)) : null;
+});
+TreeNode.displayName = 'TreeNode';
+export default TreeNode;

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

@@ -0,0 +1,50 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import ArrowDownIcon from '@rsuite/icons/ArrowDown';
+import ArrowRightIcon from '@rsuite/icons/ArrowRight';
+import ArrowLeftIcon from '@rsuite/icons/ArrowLeft';
+import Spinner from '@rsuite/icons/legacy/Spinner';
+import { useClassNames, useCustom } from '../utils';
+import { useTreeCustomRenderer } from './TreeProvider';
+function TreeNodeToggle(props) {
+  var data = props.data,
+    loading = props.loading,
+    expanded = props.expanded,
+    hasChildren = props.hasChildren,
+    rest = _objectWithoutPropertiesLoose(props, ["data", "loading", "expanded", "hasChildren"]);
+  var _useCustom = useCustom(),
+    rtl = _useCustom.rtl;
+  var _useTreeCustomRendere = useTreeCustomRenderer(),
+    renderTreeIcon = _useTreeCustomRendere.renderTreeIcon;
+  var _useClassNames = useClassNames('tree-node'),
+    prefix = _useClassNames.prefix;
+  var IconElementType = expanded ? ArrowDownIcon : rtl ? ArrowLeftIcon : ArrowRightIcon;
+  var icon = /*#__PURE__*/React.createElement(IconElementType, {
+    className: prefix('toggle-icon')
+  });
+  if (loading) {
+    icon = /*#__PURE__*/React.createElement("div", {
+      className: prefix('loading-icon')
+    }, /*#__PURE__*/React.createElement(Spinner, {
+      spin: true
+    }));
+  }
+  if (data !== undefined && typeof renderTreeIcon === 'function') {
+    var customIcon = renderTreeIcon(data, expanded);
+    icon = customIcon !== null ? /*#__PURE__*/React.createElement("div", {
+      className: prefix('custom-icon')
+    }, customIcon) : icon;
+  }
+  return hasChildren ? /*#__PURE__*/React.createElement("div", _extends({
+    tabIndex: -1,
+    role: "button",
+    "aria-busy": loading ? true : undefined,
+    "data-ref": data.refKey,
+    className: prefix('toggle')
+  }, rest), icon) : /*#__PURE__*/React.createElement("div", {
+    className: prefix('toggle-placeholder')
+  });
+}
+export default TreeNodeToggle;