rsuite 5.76.0 → 6.0.0-canary-20241227

package/esm/Tree/hooks/useFocusTree.js

@@ -12,45 +12,48 @@ import useTreeNodeRefs from "./useTreeNodeRefs.js";
  * 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
+  const {
+    filteredData,
+    searchKeyword,
+    flattenedNodes,
+    expandItemValues,
+    disabledItemValues,
+    onExpand,
+    onFocused
+  } = props;
+  const {
+    rtl
+  } = useCustom();
+  const {
+    valueKey,
+    childrenKey
+  } = useItemDataKeys();
+  const {
+    treeNodesRefs,
+    saveTreeNodeRef
+  } = useTreeNodeRefs();
+  const treeViewRef = useRef(null);
+  const [focusItemValue, setFocusItemValue] = useState(null);
+  const register = useRegisterTreeMethods();
+  const flattenedNodesRef = useRef(flattenedNodes);
+  const getFocusProps = value => {
+    const options = {
+      disabledItemValues,
+      valueKey,
+      childrenKey,
+      expandItemValues
     };
-    var focusableItems = getFocusableItems(filteredData, options, isSearching(searchKeyword));
+    const focusableItems = getFocusableItems(filteredData, options, isSearching(searchKeyword));
     return {
       focusItemValue: value || focusItemValue,
-      valueKey: valueKey,
-      focusableItems: focusableItems,
-      treeNodesRefs: treeNodesRefs
+      valueKey,
+      focusableItems,
+      treeNodesRefs
     };
   };
-  var handleFocusItem = useEventCallback(function (key) {
-    var focusProps = getFocusProps();
-    var focusedValue = null;
+  const handleFocusItem = useEventCallback(key => {
+    const focusProps = getFocusProps();
+    let focusedValue = null;
     if (key === KEY_VALUES.DOWN) {
       focusedValue = focusNextItem(focusProps);
     } else if (key === KEY_VALUES.UP) {
@@ -61,93 +64,87 @@ function useFocusTree(props) {
       onFocused === null || onFocused === void 0 || onFocused(focusedValue);
     }
   });
-  var handleLeftArrowEvent = useEventCallback(function () {
+  const handleLeftArrowEvent = useEventCallback(() => {
     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() {
+    const focusItem = getActiveItem(focusItemValue, flattenedNodes, valueKey);
+    const expand = expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]);
+    const onFocusItem = () => {
       var _focusItem$parent, _focusItem$parent2;
-      var focusedValue = focusItem === null || focusItem === void 0 || (_focusItem$parent = focusItem.parent) === null || _focusItem$parent === void 0 ? void 0 : _focusItem$parent[valueKey];
+      const focusedValue = focusItem === null || focusItem === void 0 || (_focusItem$parent = focusItem.parent) === null || _focusItem$parent === void 0 ? void 0 : _focusItem$parent[valueKey];
       setFocusItemValue(focusedValue);
       onFocused === null || onFocused === void 0 || onFocused(focusedValue);
       focusTreeNode(focusItem === null || focusItem === 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
+      focusItem,
+      expand,
+      onExpand,
+      childrenKey,
+      onFocusItem
     });
   });
-  var handleRightArrowEvent = useEventCallback(function () {
+  const handleRightArrowEvent = useEventCallback(() => {
     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);
-    };
+    const focusItem = getActiveItem(focusItemValue, flattenedNodes, valueKey);
+    const expand = expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]);
+    const onFocusItem = () => handleFocusItem(KEY_VALUES.DOWN);
     handleRightArrow({
-      focusItem: focusItem,
-      expand: expand,
-      childrenKey: childrenKey,
-      onExpand: onExpand,
-      onFocusItem: onFocusItem
+      focusItem,
+      expand,
+      childrenKey,
+      onExpand,
+      onFocusItem
     });
   });
-  var onTreeKeydown = useEventCallback(function (event) {
+  const onTreeKeydown = useEventCallback(event => {
     onMenuKeyDown(event, {
-      down: function down() {
-        return handleFocusItem(KEY_VALUES.DOWN);
-      },
-      up: function up() {
-        return handleFocusItem(KEY_VALUES.UP);
-      },
+      down: () => handleFocusItem(KEY_VALUES.DOWN),
+      up: () => handleFocusItem(KEY_VALUES.UP),
       left: rtl ? handleRightArrowEvent : handleLeftArrowEvent,
       right: rtl ? handleLeftArrowEvent : handleRightArrowEvent
     });
   });
-  var focusTreeFirstNode = useEventCallback(function () {
+  const focusTreeFirstNode = useEventCallback(() => {
     handleFocusItem(KEY_VALUES.DOWN);
   });
-  var focusTreeActiveNode = useCallback(function () {
-    var refKey = focusCurrentItem({
+  const focusTreeActiveNode = useCallback(() => {
+    const 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];
+      const 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 || onFocused(node[valueKey]);
       }
     }
   }, [onFocused, valueKey]);
-  useEffect(function () {
-    var unregister = register === null || register === void 0 ? void 0 : register({
-      focusTreeFirstNode: focusTreeFirstNode,
-      focusTreeActiveNode: focusTreeActiveNode
+  useEffect(() => {
+    const unregister = register === null || register === void 0 ? void 0 : register({
+      focusTreeFirstNode,
+      focusTreeActiveNode
     });
-    return function () {
+    return () => {
       unregister === null || unregister === void 0 || unregister();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  useEffect(function () {
+  useEffect(() => {
     flattenedNodesRef.current = flattenedNodes;
   }, [flattenedNodes]);
   return {
-    treeViewRef: treeViewRef,
-    focusTreeFirstNode: focusTreeFirstNode,
-    focusItemValue: focusItemValue,
-    treeNodesRefs: treeNodesRefs,
-    saveTreeNodeRef: saveTreeNodeRef,
-    setFocusItemValue: setFocusItemValue,
-    onTreeKeydown: onTreeKeydown
+    treeViewRef,
+    focusTreeFirstNode,
+    focusItemValue,
+    treeNodesRefs,
+    saveTreeNodeRef,
+    setFocusItemValue,
+    onTreeKeydown
   };
 }
 export default useFocusTree;

package/esm/Tree/hooks/useForceUpdate.js

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

package/esm/Tree/hooks/useTreeDrag.js

@@ -1,5 +1,4 @@
 '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 } from "../../internals/constants/index.js";
@@ -9,7 +8,7 @@ import { useItemDataKeys } from "../../internals/Tree/TreeProvider.js";
 /**
  * The gap between tree nodes.
  */
-var TREE_NODE_GAP = 4;
+const TREE_NODE_GAP = 4;
 
 /**
  * Calculates the drop position of a tree node based on the clientY coordinate of a drag event
@@ -20,11 +19,14 @@ var TREE_NODE_GAP = 4;
  * @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;
+  const {
+    clientY
+  } = event;
+  const {
+    top,
+    bottom
+  } = treeNodeElement.getBoundingClientRect();
+  const gap = TREE_NODE_GAP;
 
   // bottom of node
   if (clientY >= bottom - gap && clientY <= bottom) {
@@ -45,7 +47,7 @@ function calDropNodePosition(event, treeNodeElement) {
  * Creates a drag preview element for tree nodes.
  */
 function createDragPreview(name, className) {
-  var dragPreview = document.createElement('div');
+  const dragPreview = document.createElement('div');
   dragPreview.id = 'rs-tree-drag-preview';
   dragPreview.dataset.testid = 'drag-preview';
   dragPreview.innerHTML = name;
@@ -59,59 +61,56 @@ function createDragPreview(name, className) {
  */
 function removeDragPreview() {
   var _dragPreview$parentNo, _dragPreview$parentNo2;
-  var dragPreview = document.getElementById('rs-tree-drag-preview');
+  const dragPreview = document.getElementById('rs-tree-drag-preview');
   dragPreview === null || dragPreview === void 0 || (_dragPreview$parentNo = dragPreview.parentNode) === null || _dragPreview$parentNo === void 0 || (_dragPreview$parentNo2 = _dragPreview$parentNo.removeChild) === null || _dragPreview$parentNo2 === 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;
+  const {
+    childrenKey,
+    valueKey,
+    labelKey
+  } = useItemDataKeys();
+  const {
+    draggable,
+    flattenedNodes,
+    treeNodesRefs,
+    onDragStart,
+    onDragEnter,
+    onDragOver,
+    onDragLeave,
+    onDragEnd,
+    onDrop,
+    prefix
+  } = props;
   // current dragging node
-  var dragNode = useRef(null);
-  var _useState = useState(null),
-    dragOverNodeKey = _useState[0],
-    setDragOverNodeKey = _useState[1];
+  const dragNode = useRef(null);
+  const [dragOverNodeKey, setDragOverNodeKey] = useState(null);
   // 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) {
+  const [dragNodeKeys, setDragNodeKeys] = useState([]);
+  const [dropNodePosition, setDropNodePosition] = useState(null);
+  const setDragNode = useCallback(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) {
+  const getDragNodeKeys = useCallback(dragNode => {
+    let dragNodeKeys = [dragNode[valueKey]];
+    const traverse = data => {
       if ((data === null || data === void 0 ? void 0 : data.length) > 0) {
-        data.forEach(function (node) {
+        data.forEach(node => {
           dragNodeKeys = dragNodeKeys.concat([node[valueKey]]);
           if (node[childrenKey]) {
-            _traverse(node[childrenKey]);
+            traverse(node[childrenKey]);
           }
         });
       }
     };
-    _traverse(dragNode[childrenKey]);
+    traverse(dragNode[childrenKey]);
     return dragNodeKeys;
   }, [childrenKey, valueKey]);
 
@@ -119,11 +118,13 @@ export default function useTreeDrag(props) {
    * Removes the drag node from the data array.
    *
    */
-  var removeDragNode = useCallback(function (data, params) {
-    var dragNode = params.dragNode;
-    var _traverse2 = function traverse(items, parent) {
-      for (var index = 0; index < items.length; index += 1) {
-        var item = items[index];
+  const removeDragNode = useCallback((data, params) => {
+    const {
+      dragNode
+    } = params;
+    const traverse = (items, parent) => {
+      for (let index = 0; index < items.length; index += 1) {
+        const item = items[index];
         if (equal(item[valueKey], dragNode[valueKey])) {
           items.splice(index, 1);
           // when children is empty, delete children prop for hidden anchor
@@ -133,27 +134,31 @@ export default function useTreeDrag(props) {
           break;
         }
         if (Array.isArray(item[childrenKey])) {
-          _traverse2(item[childrenKey], item);
+          traverse(item[childrenKey], item);
         }
       }
     };
-    _traverse2(data);
+    traverse(data);
   }, [childrenKey, valueKey]);
 
   /**
    * Creates a function that modifies a tree data structure based on drag and drop parameters.
    */
-  var createDragTreeDataFunction = useCallback(function (params) {
+  const createDragTreeDataFunction = useCallback(params => {
     return function (tree) {
-      var data = [].concat(tree);
-      var dragNode = params.dragNode,
-        dropNode = params.dropNode,
-        dropNodePosition = params.dropNodePosition;
-      var cloneDragNode = _extends({}, dragNode);
+      const data = [...tree];
+      const {
+        dragNode,
+        dropNode,
+        dropNodePosition
+      } = params;
+      const cloneDragNode = {
+        ...dragNode
+      };
       removeDragNode(data, params);
-      var _updateTree = function updateTree(items) {
-        for (var index = 0; index < items.length; index += 1) {
-          var item = items[index];
+      const updateTree = items => {
+        for (let index = 0; index < items.length; index += 1) {
+          const item = items[index];
           if (equal(item[valueKey], dropNode[valueKey])) {
             // drag to node inside
             if (dropNodePosition === TREE_NODE_DROP_POSITION.DRAG_OVER) {
@@ -171,38 +176,37 @@ export default function useTreeDrag(props) {
             }
           }
           if (Array.isArray(item[childrenKey]) && item[childrenKey].length > 0) {
-            _updateTree(item[childrenKey]);
+            updateTree(item[childrenKey]);
           }
         }
       };
-      _updateTree(data);
-      return [].concat(data);
+      updateTree(data);
+      return [...data];
     };
   }, [childrenKey, removeDragNode, valueKey]);
-  var getDropData = useCallback(function (nodeData) {
-    var dragParams = {
+  const getDropData = useCallback(nodeData => {
+    const dragParams = {
       dragNode: dragNode.current,
       dropNode: nodeData,
-      dropNodePosition: dropNodePosition
+      dropNodePosition
     };
-    return _extends({}, dragParams, {
+    return {
+      ...dragParams,
       createUpdateDataFunction: createDragTreeDataFunction(dragParams)
-    });
+    };
   }, [createDragTreeDataFunction, dropNodePosition]);
-  var handleDragStart = useEventCallback(function (nodeData, event) {
+  const handleDragStart = useEventCallback((nodeData, event) => {
     if (draggable) {
       var _event$dataTransfer;
-      var dragMoverNode = createDragPreview(stringifyReactNode(nodeData[labelKey]), prefix('drag-preview'));
+      const dragMoverNode = createDragPreview(stringifyReactNode(nodeData[labelKey]), prefix('drag-preview'));
       (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 || _event$dataTransfer.setDragImage(dragMoverNode, 0, 0);
       setDragNodeKeys(getDragNodeKeys(nodeData));
       setDragNode(flattenedNodes[nodeData.refKey]);
       onDragStart === null || onDragStart === void 0 || onDragStart(nodeData, event);
     }
   });
-  var handleDragEnter = useEventCallback(function (nodeData, event) {
-    if (dragNodeKeys.some(function (d) {
-      return equal(d, nodeData[valueKey]);
-    })) {
+  const handleDragEnter = useEventCallback((nodeData, event) => {
+    if (dragNodeKeys.some(d => equal(d, nodeData[valueKey]))) {
       return;
     }
     if (dragNode.current) {
@@ -211,37 +215,33 @@ export default function useTreeDrag(props) {
     }
     onDragEnter === null || onDragEnter === void 0 || onDragEnter(nodeData, event);
   });
-  var handleDragOver = useEventCallback(function (nodeData, event) {
-    if (dragNodeKeys.some(function (d) {
-      return equal(d, nodeData[valueKey]);
-    })) {
+  const handleDragOver = useEventCallback((nodeData, event) => {
+    if (dragNodeKeys.some(d => equal(d, nodeData[valueKey]))) {
       event.dataTransfer.dropEffect = 'none';
       return;
     }
     if (dragNode.current && equal(nodeData[valueKey], dragOverNodeKey)) {
-      var lastDropNodePosition = calDropNodePosition(event, treeNodesRefs[nodeData.refKey]);
+      const lastDropNodePosition = calDropNodePosition(event, treeNodesRefs[nodeData.refKey]);
       if (lastDropNodePosition === dropNodePosition) return;
       setDropNodePosition(lastDropNodePosition);
     }
     onDragOver === null || onDragOver === void 0 || onDragOver(nodeData, event);
   });
-  var handleDragLeave = useEventCallback(function (nodeData, event) {
+  const handleDragLeave = useEventCallback((nodeData, event) => {
     onDragLeave === null || onDragLeave === void 0 || onDragLeave(nodeData, event);
   });
-  var handleDragEnd = useEventCallback(function (nodeData, event) {
+  const handleDragEnd = useEventCallback((nodeData, event) => {
     removeDragPreview();
     setDragNode(null);
     setDragNodeKeys([]);
     setDragOverNodeKey(null);
     onDragEnd === null || onDragEnd === void 0 || onDragEnd(nodeData, event);
   });
-  var handleDrop = useEventCallback(function (nodeData, event) {
-    if (dragNodeKeys.some(function (d) {
-      return equal(d, nodeData[valueKey]);
-    })) {
+  const handleDrop = useEventCallback((nodeData, event) => {
+    if (dragNodeKeys.some(d => equal(d, nodeData[valueKey]))) {
       console.error('Cannot drag a node to itself and its children');
     } else {
-      var dropData = getDropData(nodeData);
+      const dropData = getDropData(nodeData);
       onDrop === null || onDrop === void 0 || onDrop(dropData, event);
     }
     removeDragPreview();
@@ -249,7 +249,7 @@ export default function useTreeDrag(props) {
     setDragNodeKeys([]);
     setDragOverNodeKey(null);
   });
-  var dragEvents = {
+  const dragEvents = {
     onDragStart: handleDragStart,
     onDragEnter: handleDragEnter,
     onDragOver: handleDragOver,
@@ -259,8 +259,8 @@ export default function useTreeDrag(props) {
   };
   return {
     dragNode: dragNode === null || dragNode === void 0 ? void 0 : dragNode.current,
-    dragOverNodeKey: dragOverNodeKey,
-    dropNodePosition: dropNodePosition,
-    dragEvents: dragEvents
+    dragOverNodeKey,
+    dropNodePosition,
+    dragEvents
   };
 }

package/esm/Tree/hooks/useTreeNodeProps.js

@@ -6,35 +6,43 @@ import { useCombobox } from "../../internals/Picker/hooks/index.js";
 import { useItemDataKeys } from "../../internals/Tree/TreeProvider.js";
 import Highlight from "../../Highlight/index.js";
 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, {
+  const {
+    valueKey,
+    labelKey,
+    childrenKey
+  } = useItemDataKeys();
+  const {
+    id
+  } = useCombobox();
+  const {
+    value,
+    disabledItemValues,
+    loadingNodeValues,
+    focusItemValue,
+    keyword,
+    dragNode,
+    dragOverNodeKey,
+    dropNodePosition
+  } = props;
+  return useCallback((nodeData, layer, index) => {
+    const {
+      DRAG_OVER,
+      DRAG_OVER_TOP,
+      DRAG_OVER_BOTTOM
+    } = TREE_NODE_DROP_POSITION;
+    const {
+      visible
+    } = nodeData;
+    const draggingNode = dragNode !== null && dragNode !== void 0 ? dragNode : {};
+    const nodeValue = nodeData[valueKey];
+    const nodeLabel = nodeData[labelKey];
+    const children = nodeData[childrenKey];
+    const label = keyword ? /*#__PURE__*/React.createElement(Highlight, {
       as: "span",
       query: keyword
     }, nodeLabel) : nodeLabel;
-    var dragging = equal(nodeValue, draggingNode[valueKey]);
-    var dragStatus;
+    const dragging = equal(nodeValue, draggingNode[valueKey]);
+    let dragStatus;
     if (equal(nodeValue, dragOverNodeKey)) {
       switch (dropNodePosition) {
         case DRAG_OVER:
@@ -48,29 +56,25 @@ function useTreeNodeProps(props) {
           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);
+    const disabled = disabledItemValues.some(disabledItem => equal(disabledItem, nodeValue));
+    const loading = loadingNodeValues.some(item => equal(item, nodeValue));
+    const active = equal(nodeValue, value);
+    const focus = equal(nodeValue, focusItemValue);
     return {
-      id: id ? id + "-opt-" + nodeValue : undefined,
+      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
+      label,
+      index,
+      layer,
+      loading,
+      active,
+      focus,
+      visible,
+      children,
+      nodeData,
+      disabled,
+      dragging,
+      dragStatus
     };
   }, [childrenKey, disabledItemValues, dragNode, dragOverNodeKey, dropNodePosition, focusItemValue, id, keyword, labelKey, loadingNodeValues, value, valueKey]);
 }

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

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