rsuite 5.60.2 → 5.61.0

package/cjs/MultiCascader/MultiCascader.js

@@ -13,9 +13,9 @@ var _pick = _interopRequireDefault(require("lodash/pick"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
 var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
-var _treeUtils = require("../utils/treeUtils");
-var _utils = require("../CascadeTree/utils");
-var _utils2 = require("../utils");
+var _utils = require("../internals/Tree/utils");
+var _utils2 = require("../CascadeTree/utils");
+var _utils3 = require("../utils");
 var _Picker = require("../internals/Picker");
 var _propTypes2 = require("../internals/propTypes");
 var _hooks = require("../MultiCascadeTree/hooks");
@@ -95,10 +95,10 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     target = _usePickerRef.target,
     overlay = _usePickerRef.overlay,
     searchInput = _usePickerRef.searchInput;
-  var _useCustom = (0, _utils2.useCustom)('Picker', overrideLocale),
+  var _useCustom = (0, _utils3.useCustom)('Picker', overrideLocale),
     locale = _useCustom.locale,
     rtl = _useCustom.rtl;
-  var _useClassNames = (0, _utils2.useClassNames)(classPrefix),
+  var _useClassNames = (0, _utils3.useClassNames)(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge;
   var onSelectCallback = (0, _react.useCallback)(function (node, cascadePaths, event) {
@@ -120,7 +120,7 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     setColumnData = _useSelect.setColumnData,
     setSelectedPaths = _useSelect.setSelectedPaths,
     handleSelect = _useSelect.handleSelect;
-  var _useControlled = (0, _utils2.useControlled)(valueProp, defaultValue),
+  var _useControlled = (0, _utils3.useControlled)(valueProp, defaultValue),
     controlledValue = _useControlled[0];
   var itemKeys = {
     childrenKey: childrenKey,
@@ -144,7 +144,7 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     });
   }) || [];
   var onFocusItemCallback = (0, _react.useCallback)(function (value) {
-    var _getColumnsAndPaths = (0, _utils.getColumnsAndPaths)(data, flattenData.find(function (item) {
+    var _getColumnsAndPaths = (0, _utils2.getColumnsAndPaths)(data, flattenData.find(function (item) {
         return item[valueKey] === value;
       }), {
         getParent: function getParent() {
@@ -205,7 +205,7 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     active = _useActive.active,
     handleEntered = _useActive.handleEntered,
     handleExited = _useActive.handleExited;
-  var handleClean = (0, _utils2.useEventCallback)(function (event) {
+  var handleClean = (0, _utils3.useEventCallback)(function (event) {
     if (disabled || !target.current) {
       return;
     }
@@ -214,9 +214,9 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     setColumnData([data]);
     onChange === null || onChange === void 0 ? void 0 : onChange([], event);
   });
-  var handleMenuPressEnter = (0, _utils2.useEventCallback)(function (event) {
+  var handleMenuPressEnter = (0, _utils3.useEventCallback)(function (event) {
     var _overlay$current;
-    var focusItem = (0, _treeUtils.findNodeOfTree)(data, function (item) {
+    var focusItem = (0, _utils.findNodeOfTree)(data, function (item) {
       return item[valueKey] === focusItemValue;
     });
     var checkbox = (_overlay$current = overlay.current) === null || _overlay$current === void 0 ? void 0 : _overlay$current.querySelector("[data-key=\"" + focusItemValue + "\"] [type=\"checkbox\"]");
@@ -264,7 +264,7 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     });
     var classes = merge(className, DEPRECATED_menuClassName, popupClassName, prefix('popup-multi-cascader'));
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {
-      ref: (0, _utils2.mergeRefs)(overlay, speakerRef),
+      ref: (0, _utils3.mergeRefs)(overlay, speakerRef),
       className: classes,
       style: styles,
       target: trigger,
@@ -353,7 +353,7 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     appearance: appearance,
     disabled: disabled,
     ref: target,
-    onClean: (0, _utils2.createChainedFunction)(handleClean, onClean),
+    onClean: (0, _utils3.createChainedFunction)(handleClean, onClean),
     onKeyDown: onPickerKeyDown,
     cleanable: cleanable && !disabled,
     hasValue: hasValue,

package/cjs/SelectPicker/SelectPicker.js

@@ -11,7 +11,6 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _pick = _interopRequireDefault(require("lodash/pick"));
-var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
@@ -236,11 +235,8 @@ var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       listItemAs: _Picker.ListItem,
       activeItemValues: [value],
       focusItemValue: focusItemValue,
-      data: items
-      // FIXME-Doma
-      // `group` is redundant so long as `groupBy` exists
-      ,
-      group: !(0, _isUndefined.default)(groupBy),
+      data: items,
+      query: searchKeyword,
       groupBy: groupBy,
       onSelect: handleItemSelect,
       onGroupTitleClick: onGroupTitleClick,

package/cjs/Tree/IndentLine.d.ts

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

package/cjs/Tree/IndentLine.js

@@ -0,0 +1,18 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("../utils");
+var IndentLine = function IndentLine() {
+  var _useClassNames = (0, _utils.useClassNames)('tree'),
+    prefix = _useClassNames.prefix;
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: prefix('indent-line'),
+    "data-testid": "indent-line"
+  });
+};
+var _default = IndentLine;
+exports.default = _default;

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;