rsuite 5.60.2 → 5.62.0

package/cjs/Tree/hooks/useFocusTree.js

@@ -0,0 +1,158 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = require("react");
+var _isNil = _interopRequireDefault(require("lodash/isNil"));
+var _constants = require("../../internals/constants");
+var _hooks = require("../../internals/hooks");
+var _Picker = require("../../internals/Picker");
+var _TreeProvider = require("../../internals/Tree/TreeProvider");
+var _utils = require("../utils");
+var _useTreeNodeRefs2 = _interopRequireDefault(require("./useTreeNodeRefs"));
+/**
+ * Custom hook that manages the focus behavior of a tree component.
+ */
+function useFocusTree(props) {
+  var filteredData = props.filteredData,
+    searchKeyword = props.searchKeyword,
+    flattenedNodes = props.flattenedNodes,
+    expandItemValues = props.expandItemValues,
+    disabledItemValues = props.disabledItemValues,
+    onExpand = props.onExpand,
+    onFocused = props.onFocused;
+  var _useCustom = (0, _hooks.useCustom)(),
+    rtl = _useCustom.rtl;
+  var _useItemDataKeys = (0, _TreeProvider.useItemDataKeys)(),
+    valueKey = _useItemDataKeys.valueKey,
+    childrenKey = _useItemDataKeys.childrenKey;
+  var _useTreeNodeRefs = (0, _useTreeNodeRefs2.default)(),
+    treeNodesRefs = _useTreeNodeRefs.treeNodesRefs,
+    saveTreeNodeRef = _useTreeNodeRefs.saveTreeNodeRef;
+  var treeViewRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(null),
+    focusItemValue = _useState[0],
+    setFocusItemValue = _useState[1];
+  var register = (0, _TreeProvider.useRegisterTreeMethods)();
+  var flattenedNodesRef = (0, _react.useRef)(flattenedNodes);
+  var getFocusProps = function getFocusProps(value) {
+    var options = {
+      disabledItemValues: disabledItemValues,
+      valueKey: valueKey,
+      childrenKey: childrenKey,
+      expandItemValues: expandItemValues
+    };
+    var focusableItems = (0, _utils.getFocusableItems)(filteredData, options, (0, _utils.isSearching)(searchKeyword));
+    return {
+      focusItemValue: value || focusItemValue,
+      valueKey: valueKey,
+      focusableItems: focusableItems,
+      treeNodesRefs: treeNodesRefs
+    };
+  };
+  var handleFocusItem = (0, _hooks.useEventCallback)(function (key) {
+    var focusProps = getFocusProps();
+    var focusedValue = null;
+    if (key === _constants.KEY_VALUES.DOWN) {
+      focusedValue = (0, _utils.focusNextItem)(focusProps);
+    } else if (key === _constants.KEY_VALUES.UP) {
+      focusedValue = (0, _utils.focusPreviousItem)(focusProps);
+    }
+    if (focusedValue) {
+      setFocusItemValue(focusedValue);
+      onFocused === null || onFocused === void 0 ? void 0 : onFocused(focusedValue);
+    }
+  });
+  var handleLeftArrowEvent = (0, _hooks.useEventCallback)(function () {
+    if ((0, _isNil.default)(focusItemValue)) {
+      return;
+    }
+    var focusItem = (0, _utils.getActiveItem)(focusItemValue, flattenedNodes, valueKey);
+    var expand = expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]);
+    var onFocusItem = function onFocusItem() {
+      var _focusItem$parent, _focusItem$parent2;
+      var focusedValue = focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent = focusItem.parent) === null || _focusItem$parent === void 0 ? void 0 : _focusItem$parent[valueKey];
+      setFocusItemValue(focusedValue);
+      onFocused === null || onFocused === void 0 ? void 0 : onFocused(focusedValue);
+      (0, _utils.focusTreeNode)(focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent2 = focusItem.parent) === null || _focusItem$parent2 === void 0 ? void 0 : _focusItem$parent2.refKey, treeNodesRefs);
+    };
+    (0, _utils.handleLeftArrow)({
+      focusItem: focusItem,
+      expand: expand,
+      onExpand: onExpand,
+      childrenKey: childrenKey,
+      onFocusItem: onFocusItem
+    });
+  });
+  var handleRightArrowEvent = (0, _hooks.useEventCallback)(function () {
+    if ((0, _isNil.default)(focusItemValue)) {
+      return;
+    }
+    var focusItem = (0, _utils.getActiveItem)(focusItemValue, flattenedNodes, valueKey);
+    var expand = expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]);
+    var onFocusItem = function onFocusItem() {
+      return handleFocusItem(_constants.KEY_VALUES.DOWN);
+    };
+    (0, _utils.handleRightArrow)({
+      focusItem: focusItem,
+      expand: expand,
+      childrenKey: childrenKey,
+      onExpand: onExpand,
+      onFocusItem: onFocusItem
+    });
+  });
+  var onTreeKeydown = (0, _hooks.useEventCallback)(function (event) {
+    (0, _Picker.onMenuKeyDown)(event, {
+      down: function down() {
+        return handleFocusItem(_constants.KEY_VALUES.DOWN);
+      },
+      up: function up() {
+        return handleFocusItem(_constants.KEY_VALUES.UP);
+      },
+      left: rtl ? handleRightArrowEvent : handleLeftArrowEvent,
+      right: rtl ? handleLeftArrowEvent : handleRightArrowEvent
+    });
+  });
+  var focusTreeFirstNode = (0, _hooks.useEventCallback)(function () {
+    handleFocusItem(_constants.KEY_VALUES.DOWN);
+  });
+  var focusTreeActiveNode = (0, _react.useCallback)(function () {
+    var refKey = (0, _utils.focusCurrentItem)({
+      container: treeViewRef.current
+    });
+    if (refKey) {
+      var _flattenedNodesRef$cu;
+      var node = (_flattenedNodesRef$cu = flattenedNodesRef.current) === null || _flattenedNodesRef$cu === void 0 ? void 0 : _flattenedNodesRef$cu[refKey];
+      if (node) {
+        setFocusItemValue(node[valueKey]);
+        onFocused === null || onFocused === void 0 ? void 0 : onFocused(node[valueKey]);
+      }
+    }
+  }, [onFocused, valueKey]);
+  (0, _react.useEffect)(function () {
+    var unregister = register === null || register === void 0 ? void 0 : register({
+      focusTreeFirstNode: focusTreeFirstNode,
+      focusTreeActiveNode: focusTreeActiveNode
+    });
+    return function () {
+      unregister === null || unregister === void 0 ? void 0 : unregister();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _react.useEffect)(function () {
+    flattenedNodesRef.current = flattenedNodes;
+  }, [flattenedNodes]);
+  return {
+    treeViewRef: treeViewRef,
+    focusTreeFirstNode: focusTreeFirstNode,
+    focusItemValue: focusItemValue,
+    treeNodesRefs: treeNodesRefs,
+    saveTreeNodeRef: saveTreeNodeRef,
+    setFocusItemValue: setFocusItemValue,
+    onTreeKeydown: onTreeKeydown
+  };
+}
+var _default = useFocusTree;
+exports.default = _default;

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

@@ -0,0 +1,2 @@
+declare function useForceUpdate(): () => void;
+export default useForceUpdate;

package/cjs/Tree/hooks/useForceUpdate.js

@@ -0,0 +1,16 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _react = require("react");
+function useForceUpdate() {
+  var _useState = (0, _react.useState)(Object.create(null)),
+    dispatch = _useState[1];
+  var forceUpdate = (0, _react.useCallback)(function () {
+    dispatch(Object.create(null));
+  }, [dispatch]);
+  return forceUpdate;
+}
+var _default = useForceUpdate;
+exports.default = _default;

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

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { TREE_NODE_DROP_POSITION } from '@/internals/constants';
+import type { DropData } from '../types';
+interface TreeDragProps {
+    draggable?: boolean;
+    flattenedNodes: Record<string, any>;
+    treeNodesRefs: Record<string, any>;
+    prefix: (className: string) => string;
+    onDragStart?: (nodeData: any, event: React.DragEvent) => void;
+    onDragEnter?: (nodeData: any, event: React.DragEvent) => void;
+    onDragOver?: (nodeData: any, event: React.DragEvent) => void;
+    onDragLeave?: (nodeData: any, event: React.DragEvent) => void;
+    onDragEnd?: (nodeData: any, event: React.DragEvent) => void;
+    onDrop?: (dropData: DropData<Record<string, any>>, event: React.DragEvent) => void;
+}
+/**
+ * Custom hook for handling tree node dragging.
+ */
+export default function useTreeDrag<T>(props: TreeDragProps): {
+    dragNode: T | null;
+    dragOverNodeKey: null;
+    dropNodePosition: -1 | TREE_NODE_DROP_POSITION | null;
+    dragEvents: {
+        onDragStart: (...args: any[]) => any;
+        onDragEnter: (...args: any[]) => any;
+        onDragOver: (...args: any[]) => any;
+        onDragLeave: (...args: any[]) => any;
+        onDragEnd: (...args: any[]) => any;
+        onDrop: (...args: any[]) => any;
+    };
+};
+export {};

package/cjs/Tree/hooks/useTreeDrag.js

@@ -0,0 +1,269 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = useTreeDrag;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = require("react");
+var _isNil = _interopRequireDefault(require("lodash/isNil"));
+var _constants = require("../../internals/constants");
+var _hooks = require("../../internals/hooks");
+var _utils = require("../../internals/utils");
+var _TreeProvider = require("../../internals/Tree/TreeProvider");
+/**
+ * The gap between tree nodes.
+ */
+var TREE_NODE_GAP = 4;
+
+/**
+ * Calculates the drop position of a tree node based on the clientY coordinate of a drag event
+ * and the bounding rectangle of the tree node element.
+ *
+ * @param event - The drag event.
+ * @param treeNodeElement - The element representing the tree node.
+ * @returns The drop position of the tree node.
+ */
+function calDropNodePosition(event, treeNodeElement) {
+  var clientY = event.clientY;
+  var _treeNodeElement$getB = treeNodeElement.getBoundingClientRect(),
+    top = _treeNodeElement$getB.top,
+    bottom = _treeNodeElement$getB.bottom;
+  var gap = TREE_NODE_GAP;
+
+  // bottom of node
+  if (clientY >= bottom - gap && clientY <= bottom) {
+    return _constants.TREE_NODE_DROP_POSITION.DRAG_OVER_BOTTOM;
+  }
+
+  // top of node
+  if (clientY <= top + gap && clientY >= top) {
+    return _constants.TREE_NODE_DROP_POSITION.DRAG_OVER_TOP;
+  }
+  if (clientY >= top + gap && clientY <= bottom - gap) {
+    return _constants.TREE_NODE_DROP_POSITION.DRAG_OVER;
+  }
+  return -1;
+}
+
+/**
+ * Creates a drag preview element for tree nodes.
+ */
+function createDragPreview(name, className) {
+  var dragPreview = document.createElement('div');
+  dragPreview.id = 'rs-tree-drag-preview';
+  dragPreview.dataset.testid = 'drag-preview';
+  dragPreview.innerHTML = name;
+  dragPreview.classList.add(className);
+  document.body.appendChild(dragPreview);
+  return dragPreview;
+}
+
+/**
+ * Removes the drag preview element from the DOM.
+ */
+function removeDragPreview() {
+  var _dragPreview$parentNo, _dragPreview$parentNo2;
+  var dragPreview = document.getElementById('rs-tree-drag-preview');
+  dragPreview === null || dragPreview === void 0 ? void 0 : (_dragPreview$parentNo = dragPreview.parentNode) === null || _dragPreview$parentNo === void 0 ? void 0 : (_dragPreview$parentNo2 = _dragPreview$parentNo.removeChild) === null || _dragPreview$parentNo2 === void 0 ? void 0 : _dragPreview$parentNo2.call(_dragPreview$parentNo, dragPreview);
+}
+/**
+ * Custom hook for handling tree node dragging.
+ */
+function useTreeDrag(props) {
+  var _useItemDataKeys = (0, _TreeProvider.useItemDataKeys)(),
+    childrenKey = _useItemDataKeys.childrenKey,
+    valueKey = _useItemDataKeys.valueKey,
+    labelKey = _useItemDataKeys.labelKey;
+  var draggable = props.draggable,
+    flattenedNodes = props.flattenedNodes,
+    treeNodesRefs = props.treeNodesRefs,
+    onDragStart = props.onDragStart,
+    onDragEnter = props.onDragEnter,
+    onDragOver = props.onDragOver,
+    onDragLeave = props.onDragLeave,
+    onDragEnd = props.onDragEnd,
+    onDrop = props.onDrop,
+    prefix = props.prefix; // current dragging node
+  var dragNode = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(null),
+    dragOverNodeKey = _useState[0],
+    setDragOverNodeKey = _useState[1]; // drag node and it's children nodes key
+  var _useState2 = (0, _react.useState)([]),
+    dragNodeKeys = _useState2[0],
+    setDragNodeKeys = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    dropNodePosition = _useState3[0],
+    setDropNodePosition = _useState3[1];
+  var setDragNode = (0, _react.useCallback)(function (node) {
+    dragNode.current = node;
+  }, []);
+
+  /**
+   * Retrieves an array of keys for the nodes in a tree starting from the specified drag node.
+   */
+  var getDragNodeKeys = (0, _react.useCallback)(function (dragNode) {
+    var dragNodeKeys = [dragNode[valueKey]];
+    var traverse = function traverse(data) {
+      if ((data === null || data === void 0 ? void 0 : data.length) > 0) {
+        data.forEach(function (node) {
+          dragNodeKeys = dragNodeKeys.concat([node[valueKey]]);
+          if (node[childrenKey]) {
+            traverse(node[childrenKey]);
+          }
+        });
+      }
+    };
+    traverse(dragNode[childrenKey]);
+    return dragNodeKeys;
+  }, [childrenKey, valueKey]);
+
+  /**
+   * Removes the drag node from the data array.
+   *
+   */
+  var removeDragNode = (0, _react.useCallback)(function (data, params) {
+    var dragNode = params.dragNode;
+    var traverse = function traverse(items, parent) {
+      for (var index = 0; index < items.length; index += 1) {
+        var item = items[index];
+        if ((0, _utils.shallowEqual)(item[valueKey], dragNode[valueKey])) {
+          items.splice(index, 1);
+          // when children is empty, delete children prop for hidden anchor
+          if (items.length === 0 && parent) {
+            delete parent.children;
+          }
+          break;
+        }
+        if (Array.isArray(item[childrenKey])) {
+          traverse(item[childrenKey], item);
+        }
+      }
+    };
+    traverse(data);
+  }, [childrenKey, valueKey]);
+
+  /**
+   * Creates a function that modifies a tree data structure based on drag and drop parameters.
+   */
+  var createDragTreeDataFunction = (0, _react.useCallback)(function (params) {
+    return function (tree) {
+      var data = [].concat(tree);
+      var dragNode = params.dragNode,
+        dropNode = params.dropNode,
+        dropNodePosition = params.dropNodePosition;
+      var cloneDragNode = (0, _extends2.default)({}, dragNode);
+      removeDragNode(data, params);
+      var updateTree = function updateTree(items) {
+        for (var index = 0; index < items.length; index += 1) {
+          var item = items[index];
+          if ((0, _utils.shallowEqual)(item[valueKey], dropNode[valueKey])) {
+            // drag to node inside
+            if (dropNodePosition === _constants.TREE_NODE_DROP_POSITION.DRAG_OVER) {
+              item[childrenKey] = (0, _isNil.default)(item[childrenKey]) ? [] : item[childrenKey];
+              item[childrenKey].push(cloneDragNode);
+              break;
+            } else if (dropNodePosition === _constants.TREE_NODE_DROP_POSITION.DRAG_OVER_TOP) {
+              // drag to top of node
+              items.splice(index, 0, cloneDragNode);
+              break;
+            } else if (dropNodePosition === _constants.TREE_NODE_DROP_POSITION.DRAG_OVER_BOTTOM) {
+              // drag to bottom of node
+              items.splice(index + 1, 0, cloneDragNode);
+              break;
+            }
+          }
+          if (Array.isArray(item[childrenKey]) && item[childrenKey].length > 0) {
+            updateTree(item[childrenKey]);
+          }
+        }
+      };
+      updateTree(data);
+      return [].concat(data);
+    };
+  }, [childrenKey, removeDragNode, valueKey]);
+  var getDropData = (0, _react.useCallback)(function (nodeData) {
+    var dragParams = {
+      dragNode: dragNode.current,
+      dropNode: nodeData,
+      dropNodePosition: dropNodePosition
+    };
+    return (0, _extends2.default)({}, dragParams, {
+      createUpdateDataFunction: createDragTreeDataFunction(dragParams)
+    });
+  }, [createDragTreeDataFunction, dropNodePosition]);
+  var handleDragStart = (0, _hooks.useEventCallback)(function (nodeData, event) {
+    if (draggable) {
+      var _event$dataTransfer;
+      var dragMoverNode = createDragPreview((0, _utils.stringifyReactNode)(nodeData[labelKey]), prefix('drag-preview'));
+      (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.setDragImage(dragMoverNode, 0, 0);
+      setDragNodeKeys(getDragNodeKeys(nodeData));
+      setDragNode(flattenedNodes[nodeData.refKey]);
+      onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(nodeData, event);
+    }
+  });
+  var handleDragEnter = (0, _hooks.useEventCallback)(function (nodeData, event) {
+    if (dragNodeKeys.some(function (d) {
+      return (0, _utils.shallowEqual)(d, nodeData[valueKey]);
+    })) {
+      return;
+    }
+    if (dragNode.current) {
+      setDragOverNodeKey(nodeData[valueKey]);
+      setDropNodePosition(calDropNodePosition(event, treeNodesRefs[nodeData.refKey]));
+    }
+    onDragEnter === null || onDragEnter === void 0 ? void 0 : onDragEnter(nodeData, event);
+  });
+  var handleDragOver = (0, _hooks.useEventCallback)(function (nodeData, event) {
+    if (dragNodeKeys.some(function (d) {
+      return (0, _utils.shallowEqual)(d, nodeData[valueKey]);
+    })) {
+      event.dataTransfer.dropEffect = 'none';
+      return;
+    }
+    if (dragNode.current && (0, _utils.shallowEqual)(nodeData[valueKey], dragOverNodeKey)) {
+      var lastDropNodePosition = calDropNodePosition(event, treeNodesRefs[nodeData.refKey]);
+      if (lastDropNodePosition === dropNodePosition) return;
+      setDropNodePosition(lastDropNodePosition);
+    }
+    onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(nodeData, event);
+  });
+  var handleDragLeave = (0, _hooks.useEventCallback)(function (nodeData, event) {
+    onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(nodeData, event);
+  });
+  var handleDragEnd = (0, _hooks.useEventCallback)(function (nodeData, event) {
+    removeDragPreview();
+    setDragNode(null);
+    setDragNodeKeys([]);
+    setDragOverNodeKey(null);
+    onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(nodeData, event);
+  });
+  var handleDrop = (0, _hooks.useEventCallback)(function (nodeData, event) {
+    if (dragNodeKeys.some(function (d) {
+      return (0, _utils.shallowEqual)(d, nodeData[valueKey]);
+    })) {
+      console.error('Cannot drag a node to itself and its children');
+    } else {
+      var _dropData = getDropData(nodeData);
+      onDrop === null || onDrop === void 0 ? void 0 : onDrop(_dropData, event);
+    }
+    removeDragPreview();
+    setDragNode(null);
+    setDragNodeKeys([]);
+    setDragOverNodeKey(null);
+  });
+  var dragEvents = {
+    onDragStart: handleDragStart,
+    onDragEnter: handleDragEnter,
+    onDragOver: handleDragOver,
+    onDragLeave: handleDragLeave,
+    onDragEnd: handleDragEnd,
+    onDrop: handleDrop
+  };
+  return {
+    dragNode: dragNode === null || dragNode === void 0 ? void 0 : dragNode.current,
+    dragOverNodeKey: dragOverNodeKey,
+    dropNodePosition: dropNodePosition,
+    dragEvents: dragEvents
+  };
+}

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

@@ -0,0 +1,29 @@
+import { TREE_NODE_DROP_POSITION } from '@/internals/constants';
+import { DragStatus } from '../TreeNode';
+interface Props {
+    value: any;
+    disabledItemValues: any[];
+    loadingNodeValues: any[];
+    focusItemValue: any;
+    keyword: string;
+    dragNode: any;
+    dragOverNodeKey: any;
+    dropNodePosition: TREE_NODE_DROP_POSITION | -1 | null;
+}
+declare function useTreeNodeProps(props: Props): (nodeData: any, layer: number, index?: number) => {
+    id: string | undefined;
+    value: any;
+    label: any;
+    index: number | undefined;
+    layer: number;
+    loading: boolean;
+    active: boolean;
+    focus: boolean;
+    visible: any;
+    children: any;
+    nodeData: any;
+    disabled: boolean;
+    dragging: boolean;
+    dragStatus: DragStatus | undefined;
+};
+export default useTreeNodeProps;

package/cjs/Tree/hooks/useTreeNodeProps.js

@@ -0,0 +1,84 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _constants = require("../../internals/constants");
+var _utils = require("../../internals/utils");
+var _hooks = require("../../internals/Picker/hooks");
+var _TreeProvider = require("../../internals/Tree/TreeProvider");
+var _Highlight = _interopRequireDefault(require("../../Highlight"));
+function useTreeNodeProps(props) {
+  var _useItemDataKeys = (0, _TreeProvider.useItemDataKeys)(),
+    valueKey = _useItemDataKeys.valueKey,
+    labelKey = _useItemDataKeys.labelKey,
+    childrenKey = _useItemDataKeys.childrenKey;
+  var _useCombobox = (0, _hooks.useCombobox)(),
+    id = _useCombobox.id;
+  var value = props.value,
+    disabledItemValues = props.disabledItemValues,
+    loadingNodeValues = props.loadingNodeValues,
+    focusItemValue = props.focusItemValue,
+    keyword = props.keyword,
+    dragNode = props.dragNode,
+    dragOverNodeKey = props.dragOverNodeKey,
+    dropNodePosition = props.dropNodePosition;
+  return (0, _react.useCallback)(function (nodeData, layer, index) {
+    var DRAG_OVER = _constants.TREE_NODE_DROP_POSITION.DRAG_OVER,
+      DRAG_OVER_TOP = _constants.TREE_NODE_DROP_POSITION.DRAG_OVER_TOP,
+      DRAG_OVER_BOTTOM = _constants.TREE_NODE_DROP_POSITION.DRAG_OVER_BOTTOM;
+    var visible = nodeData.visible;
+    var draggingNode = dragNode !== null && dragNode !== void 0 ? dragNode : {};
+    var nodeValue = nodeData[valueKey];
+    var nodeLabel = nodeData[labelKey];
+    var children = nodeData[childrenKey];
+    var label = keyword ? /*#__PURE__*/_react.default.createElement(_Highlight.default, {
+      as: "span",
+      query: keyword
+    }, nodeLabel) : nodeLabel;
+    var dragging = (0, _utils.shallowEqual)(nodeValue, draggingNode[valueKey]);
+    var dragStatus;
+    if ((0, _utils.shallowEqual)(nodeValue, dragOverNodeKey)) {
+      switch (dropNodePosition) {
+        case DRAG_OVER:
+          dragStatus = 'drag-over';
+          break;
+        case DRAG_OVER_TOP:
+          dragStatus = 'drag-over-top';
+          break;
+        case DRAG_OVER_BOTTOM:
+          dragStatus = 'drag-over-bottom';
+          break;
+      }
+    }
+    var disabled = disabledItemValues.some(function (disabledItem) {
+      return (0, _utils.shallowEqual)(disabledItem, nodeValue);
+    });
+    var loading = loadingNodeValues.some(function (item) {
+      return (0, _utils.shallowEqual)(item, nodeValue);
+    });
+    var active = (0, _utils.shallowEqual)(nodeValue, value);
+    var focus = (0, _utils.shallowEqual)(nodeValue, focusItemValue);
+    return {
+      id: id ? id + "-opt-" + nodeValue : undefined,
+      value: nodeValue,
+      label: label,
+      index: index,
+      layer: layer,
+      loading: loading,
+      active: active,
+      focus: focus,
+      visible: visible,
+      children: children,
+      nodeData: nodeData,
+      disabled: disabled,
+      dragging: dragging,
+      dragStatus: dragStatus
+    };
+  }, [childrenKey, disabledItemValues, dragNode, dragOverNodeKey, dropNodePosition, focusItemValue, id, keyword, labelKey, loadingNodeValues, value, valueKey]);
+}
+var _default = useTreeNodeProps;
+exports.default = _default;

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

@@ -0,0 +1,6 @@
+/**
+ * Custom hook that manages references to tree nodes. */
+export default function useTreeNodeRefs(): {
+    treeNodesRefs: {};
+    saveTreeNodeRef: (ref: React.Ref<any>, refKey?: string) => void;
+};

package/cjs/Tree/hooks/useTreeNodeRefs.js

@@ -0,0 +1,22 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = useTreeNodeRefs;
+var _react = require("react");
+var _isNil = _interopRequireDefault(require("lodash/isNil"));
+/**
+ * Custom hook that manages references to tree nodes. */
+function useTreeNodeRefs() {
+  var treeNodeRefs = (0, _react.useRef)({});
+  var saveTreeNodeRef = function saveTreeNodeRef(ref, refKey) {
+    if (!(0, _isNil.default)(refKey)) {
+      treeNodeRefs.current[refKey] = ref;
+    }
+  };
+  return {
+    treeNodesRefs: treeNodeRefs.current,
+    saveTreeNodeRef: saveTreeNodeRef
+  };
+}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+interface TreeSearchProps<T> {
+    searchKeyword?: string;
+    data: T[];
+    searchBy?: (keyword: any, label: any, item: any) => boolean;
+    callback?: (keyword: string, data: T[], event: React.SyntheticEvent) => void;
+}
+/**
+ * Custom hook for searching and filtering data in a tree structure.
+ */
+export default function useTreeSearch<T>(props: TreeSearchProps<T>): {
+    keyword: string;
+    filteredData: T[];
+    setFilteredData: (data: T[], searchKeyword: string) => void;
+    setSearchKeyword: React.Dispatch<React.SetStateAction<string>>;
+    handleSearch: (searchKeyword: string, event?: React.ChangeEvent) => void;
+};
+export {};