rsuite 5.60.2 → 5.61.0

package/esm/Tree/hooks/useFocusTree.js

@@ -0,0 +1,153 @@
+'use client';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import isNil from 'lodash/isNil';
+import { KEY_VALUES } from '../../utils/constants';
+import { useEventCallback, useCustom } from '../../utils';
+import { onMenuKeyDown } from '../../internals/Picker';
+import { useItemDataKeys } from '../TreeProvider';
+import { isSearching, focusNextItem, getFocusableItems, getActiveItem, focusPreviousItem, focusCurrentItem, focusTreeNode, handleLeftArrow, handleRightArrow } from '../utils';
+import useTreeNodeRefs from './useTreeNodeRefs';
+import { useRegisterTreeMethods } from '../TreeProvider';
+/**
+ * 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 = useCustom(),
+    rtl = _useCustom.rtl;
+  var _useItemDataKeys = useItemDataKeys(),
+    valueKey = _useItemDataKeys.valueKey,
+    childrenKey = _useItemDataKeys.childrenKey;
+  var _useTreeNodeRefs = useTreeNodeRefs(),
+    treeNodesRefs = _useTreeNodeRefs.treeNodesRefs,
+    saveTreeNodeRef = _useTreeNodeRefs.saveTreeNodeRef;
+  var treeViewRef = useRef(null);
+  var _useState = useState(null),
+    focusItemValue = _useState[0],
+    setFocusItemValue = _useState[1];
+  var register = useRegisterTreeMethods();
+  var flattenedNodesRef = useRef(flattenedNodes);
+  var getFocusProps = function getFocusProps(value) {
+    var options = {
+      disabledItemValues: disabledItemValues,
+      valueKey: valueKey,
+      childrenKey: childrenKey,
+      expandItemValues: expandItemValues
+    };
+    var focusableItems = getFocusableItems(filteredData, options, isSearching(searchKeyword));
+    return {
+      focusItemValue: value || focusItemValue,
+      valueKey: valueKey,
+      focusableItems: focusableItems,
+      treeNodesRefs: treeNodesRefs
+    };
+  };
+  var handleFocusItem = useEventCallback(function (key) {
+    var focusProps = getFocusProps();
+    var focusedValue = null;
+    if (key === KEY_VALUES.DOWN) {
+      focusedValue = focusNextItem(focusProps);
+    } else if (key === KEY_VALUES.UP) {
+      focusedValue = focusPreviousItem(focusProps);
+    }
+    if (focusedValue) {
+      setFocusItemValue(focusedValue);
+      onFocused === null || onFocused === void 0 ? void 0 : onFocused(focusedValue);
+    }
+  });
+  var handleLeftArrowEvent = useEventCallback(function () {
+    if (isNil(focusItemValue)) {
+      return;
+    }
+    var focusItem = 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);
+      focusTreeNode(focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent2 = focusItem.parent) === null || _focusItem$parent2 === void 0 ? void 0 : _focusItem$parent2.refKey, treeNodesRefs);
+    };
+    handleLeftArrow({
+      focusItem: focusItem,
+      expand: expand,
+      onExpand: onExpand,
+      childrenKey: childrenKey,
+      onFocusItem: onFocusItem
+    });
+  });
+  var handleRightArrowEvent = useEventCallback(function () {
+    if (isNil(focusItemValue)) {
+      return;
+    }
+    var focusItem = getActiveItem(focusItemValue, flattenedNodes, valueKey);
+    var expand = expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]);
+    var onFocusItem = function onFocusItem() {
+      return handleFocusItem(KEY_VALUES.DOWN);
+    };
+    handleRightArrow({
+      focusItem: focusItem,
+      expand: expand,
+      childrenKey: childrenKey,
+      onExpand: onExpand,
+      onFocusItem: onFocusItem
+    });
+  });
+  var onTreeKeydown = useEventCallback(function (event) {
+    onMenuKeyDown(event, {
+      down: function down() {
+        return handleFocusItem(KEY_VALUES.DOWN);
+      },
+      up: function up() {
+        return handleFocusItem(KEY_VALUES.UP);
+      },
+      left: rtl ? handleRightArrowEvent : handleLeftArrowEvent,
+      right: rtl ? handleLeftArrowEvent : handleRightArrowEvent
+    });
+  });
+  var focusTreeFirstNode = useEventCallback(function () {
+    handleFocusItem(KEY_VALUES.DOWN);
+  });
+  var focusTreeActiveNode = useCallback(function () {
+    var refKey = 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]);
+  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
+  }, []);
+  useEffect(function () {
+    flattenedNodesRef.current = flattenedNodes;
+  }, [flattenedNodes]);
+  return {
+    treeViewRef: treeViewRef,
+    focusTreeFirstNode: focusTreeFirstNode,
+    focusItemValue: focusItemValue,
+    treeNodesRefs: treeNodesRefs,
+    saveTreeNodeRef: saveTreeNodeRef,
+    setFocusItemValue: setFocusItemValue,
+    onTreeKeydown: onTreeKeydown
+  };
+}
+export default useFocusTree;

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

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

package/esm/Tree/hooks/useForceUpdate.js

@@ -0,0 +1,11 @@
+'use client';
+import { useState, useCallback } from 'react';
+function useForceUpdate() {
+  var _useState = useState(Object.create(null)),
+    dispatch = _useState[1];
+  var forceUpdate = useCallback(function () {
+    dispatch(Object.create(null));
+  }, [dispatch]);
+  return forceUpdate;
+}
+export default useForceUpdate;

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

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { TREE_NODE_DROP_POSITION } from '../../utils';
+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/esm/Tree/hooks/useTreeDrag.js

@@ -0,0 +1,264 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { useState, useRef, useCallback } from 'react';
+import isNil from 'lodash/isNil';
+import { TREE_NODE_DROP_POSITION, shallowEqual } from '../../utils';
+import { useEventCallback, shallowEqual as equal } from '../../utils';
+import { stringifyReactNode } from '../../internals/utils';
+import { useItemDataKeys } from '../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 TREE_NODE_DROP_POSITION.DRAG_OVER_BOTTOM;
+  }
+
+  // top of node
+  if (clientY <= top + gap && clientY >= top) {
+    return TREE_NODE_DROP_POSITION.DRAG_OVER_TOP;
+  }
+  if (clientY >= top + gap && clientY <= bottom - gap) {
+    return 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.
+ */
+export default function useTreeDrag(props) {
+  var _useItemDataKeys = 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 = useRef(null);
+  var _useState = useState(null),
+    dragOverNodeKey = _useState[0],
+    setDragOverNodeKey = _useState[1]; // drag node and it's children nodes key
+  var _useState2 = useState([]),
+    dragNodeKeys = _useState2[0],
+    setDragNodeKeys = _useState2[1];
+  var _useState3 = useState(null),
+    dropNodePosition = _useState3[0],
+    setDropNodePosition = _useState3[1];
+  var setDragNode = 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 = 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 = 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 (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 = useCallback(function (params) {
+    return function (tree) {
+      var data = [].concat(tree);
+      var dragNode = params.dragNode,
+        dropNode = params.dropNode,
+        dropNodePosition = params.dropNodePosition;
+      var cloneDragNode = _extends({}, dragNode);
+      removeDragNode(data, params);
+      var updateTree = function updateTree(items) {
+        for (var index = 0; index < items.length; index += 1) {
+          var item = items[index];
+          if (shallowEqual(item[valueKey], dropNode[valueKey])) {
+            // drag to node inside
+            if (dropNodePosition === TREE_NODE_DROP_POSITION.DRAG_OVER) {
+              item[childrenKey] = isNil(item[childrenKey]) ? [] : item[childrenKey];
+              item[childrenKey].push(cloneDragNode);
+              break;
+            } else if (dropNodePosition === TREE_NODE_DROP_POSITION.DRAG_OVER_TOP) {
+              // drag to top of node
+              items.splice(index, 0, cloneDragNode);
+              break;
+            } else if (dropNodePosition === 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 = useCallback(function (nodeData) {
+    var dragParams = {
+      dragNode: dragNode.current,
+      dropNode: nodeData,
+      dropNodePosition: dropNodePosition
+    };
+    return _extends({}, dragParams, {
+      createUpdateDataFunction: createDragTreeDataFunction(dragParams)
+    });
+  }, [createDragTreeDataFunction, dropNodePosition]);
+  var handleDragStart = useEventCallback(function (nodeData, event) {
+    if (draggable) {
+      var _event$dataTransfer;
+      var dragMoverNode = createDragPreview(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 = useEventCallback(function (nodeData, event) {
+    if (dragNodeKeys.some(function (d) {
+      return equal(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 = useEventCallback(function (nodeData, event) {
+    if (dragNodeKeys.some(function (d) {
+      return equal(d, nodeData[valueKey]);
+    })) {
+      event.dataTransfer.dropEffect = 'none';
+      return;
+    }
+    if (dragNode.current && equal(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 = useEventCallback(function (nodeData, event) {
+    onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(nodeData, event);
+  });
+  var handleDragEnd = useEventCallback(function (nodeData, event) {
+    removeDragPreview();
+    setDragNode(null);
+    setDragNodeKeys([]);
+    setDragOverNodeKey(null);
+    onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(nodeData, event);
+  });
+  var handleDrop = useEventCallback(function (nodeData, event) {
+    if (dragNodeKeys.some(function (d) {
+      return equal(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/esm/Tree/hooks/useTreeNodeProps.d.ts

@@ -0,0 +1,29 @@
+import { TREE_NODE_DROP_POSITION } from '../../utils';
+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/esm/Tree/hooks/useTreeNodeProps.js

@@ -0,0 +1,76 @@
+'use client';
+import React, { useCallback } from 'react';
+import { TREE_NODE_DROP_POSITION, shallowEqual as equal } from '../../utils';
+import { useCombobox } from '../../internals/Picker/hooks';
+import { useItemDataKeys } from '../TreeProvider';
+import Highlight from '../../Highlight';
+function useTreeNodeProps(props) {
+  var _useItemDataKeys = useItemDataKeys(),
+    valueKey = _useItemDataKeys.valueKey,
+    labelKey = _useItemDataKeys.labelKey,
+    childrenKey = _useItemDataKeys.childrenKey;
+  var _useCombobox = 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 useCallback(function (nodeData, layer, index) {
+    var DRAG_OVER = TREE_NODE_DROP_POSITION.DRAG_OVER,
+      DRAG_OVER_TOP = TREE_NODE_DROP_POSITION.DRAG_OVER_TOP,
+      DRAG_OVER_BOTTOM = 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.createElement(Highlight, {
+      as: "span",
+      query: keyword
+    }, nodeLabel) : nodeLabel;
+    var dragging = equal(nodeValue, draggingNode[valueKey]);
+    var dragStatus;
+    if (equal(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 equal(disabledItem, nodeValue);
+    });
+    var loading = loadingNodeValues.some(function (item) {
+      return equal(item, nodeValue);
+    });
+    var active = equal(nodeValue, value);
+    var focus = equal(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]);
+}
+export default useTreeNodeProps;

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

@@ -0,0 +1,18 @@
+'use client';
+import { useRef } from 'react';
+import isNil from 'lodash/isNil';
+
+/**
+ * Custom hook that manages references to tree nodes. */
+export default function useTreeNodeRefs() {
+  var treeNodeRefs = useRef({});
+  var saveTreeNodeRef = function saveTreeNodeRef(ref, refKey) {
+    if (!isNil(refKey)) {
+      treeNodeRefs.current[refKey] = ref;
+    }
+  };
+  return {
+    treeNodesRefs: treeNodeRefs.current,
+    saveTreeNodeRef: saveTreeNodeRef
+  };
+}

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

package/esm/Tree/hooks/useTreeSearch.js

@@ -0,0 +1,69 @@
+'use client';
+import { useState, useCallback, useEffect } from 'react';
+import isArray from 'lodash/isArray';
+import { shouldDisplay } from '../../internals/Picker';
+import { useItemDataKeys } from '../TreeProvider';
+/**
+ * Custom hook for searching and filtering data in a tree structure.
+ */
+export default function useTreeSearch(props) {
+  var _useItemDataKeys = useItemDataKeys(),
+    labelKey = _useItemDataKeys.labelKey,
+    childrenKey = _useItemDataKeys.childrenKey;
+  var searchKeyword = props.searchKeyword,
+    data = props.data,
+    searchBy = props.searchBy,
+    callback = props.callback;
+  var filterVisibleData = useCallback(function (data, searchKeyword) {
+    var setVisible = function setVisible(nodes) {
+      return nodes.forEach(function (item) {
+        item.visible = searchBy ? searchBy(searchKeyword, item[labelKey], item) : shouldDisplay(item[labelKey], searchKeyword);
+        if (isArray(item[childrenKey])) {
+          filterVisibleData(item[childrenKey], searchKeyword);
+          item[childrenKey].forEach(function (child) {
+            if (child.visible) {
+              item.visible = child.visible;
+            }
+          });
+        }
+      });
+    };
+    setVisible(data);
+    return data;
+  }, [childrenKey, labelKey, searchBy]);
+
+  // Use search keywords to filter options.
+  var _useState = useState(searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : ''),
+    keyword = _useState[0],
+    setSearchKeyword = _useState[1];
+  var _useState2 = useState(function () {
+      return filterVisibleData(data, keyword);
+    }),
+    filteredData = _useState2[0],
+    setFilteredData = _useState2[1];
+  var handleSearch = function handleSearch(searchKeyword, event) {
+    var filteredData = filterVisibleData(data, searchKeyword);
+    setFilteredData(filteredData);
+    setSearchKeyword(searchKeyword);
+    if (event) {
+      callback === null || callback === void 0 ? void 0 : callback(searchKeyword, filteredData, event);
+    }
+  };
+  useEffect(function () {
+    handleSearch(searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : '');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchKeyword]);
+  useEffect(function () {
+    setSearchKeyword(searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : '');
+  }, [searchKeyword, setSearchKeyword]);
+  var setVisibleData = useCallback(function (data, searchKeyword) {
+    setFilteredData(filterVisibleData(data, searchKeyword));
+  }, [filterVisibleData]);
+  return {
+    keyword: keyword,
+    filteredData: filteredData,
+    setFilteredData: setVisibleData,
+    setSearchKeyword: setSearchKeyword,
+    handleSearch: handleSearch
+  };
+}