rsuite 5.60.2 → 5.61.0

package/esm/Tree/TreeView.js

@@ -0,0 +1,299 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { useEffect, useMemo } from 'react';
+import isNil from 'lodash/isNil';
+import { List, AutoSizer, defaultItemSize } from '../internals/Windowing';
+import TreeViewNode from './TreeNode';
+import IndentLine from './IndentLine';
+import { getPathTowardsItem, getKeyParentMap } from '../internals/Tree/utils';
+import { useClassNames, useCustom, useEventCallback } from '../utils';
+import { isExpand, hasVisibleChildren, getActiveItem } from './utils';
+import { onMenuKeyDown } from '../internals/Picker';
+import { TreeView as BaseTreeView } from '../internals/Tree';
+import useTreeSearch from './hooks/useTreeSearch';
+import useTreeDrag from './hooks/useTreeDrag';
+import useFocusTree from './hooks/useFocusTree';
+import useVirtualizedTreeData from './hooks/useVirtualizedTreeData';
+import useTreeNodeProps from './hooks/useTreeNodeProps';
+import SearchBox from '../internals/SearchBox';
+import { useItemDataKeys } from './TreeProvider';
+
+/**
+ * Props for the TreeViewInner component.
+ */
+/**
+ * Represents the props for the TreeView component.
+ */
+var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$as = props.as,
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data,
+    style = props.style,
+    showIndentLine = props.showIndentLine,
+    valueProp = props.value,
+    overrideLocale = props.locale,
+    _props$height = props.height,
+    height = _props$height === void 0 ? 360 : _props$height,
+    className = props.className,
+    _props$searchable = props.searchable,
+    searchable = _props$searchable === void 0 ? false : _props$searchable,
+    _props$virtualized = props.virtualized,
+    virtualized = _props$virtualized === void 0 ? false : _props$virtualized,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'tree' : _props$classPrefix,
+    searchKeyword = props.searchKeyword,
+    searchBy = props.searchBy,
+    draggable = props.draggable,
+    _props$disabledItemVa = props.disabledItemValues,
+    disabledItemValues = _props$disabledItemVa === void 0 ? [] : _props$disabledItemVa,
+    _props$loadingNodeVal = props.loadingNodeValues,
+    loadingNodeValues = _props$loadingNodeVal === void 0 ? [] : _props$loadingNodeVal,
+    _props$flattenedNodes = props.flattenedNodes,
+    flattenedNodes = _props$flattenedNodes === void 0 ? {} : _props$flattenedNodes,
+    listProps = props.listProps,
+    listRef = props.listRef,
+    searchInputRef = props.searchInputRef,
+    _props$expandItemValu = props.expandItemValues,
+    expandItemValues = _props$expandItemValu === void 0 ? [] : _props$expandItemValu,
+    onSearch = props.onSearch,
+    onSelect = props.onSelect,
+    onSelectItem = props.onSelectItem,
+    onChange = props.onChange,
+    onDragEnd = props.onDragEnd,
+    onDragStart = props.onDragStart,
+    onDragEnter = props.onDragEnter,
+    onDragLeave = props.onDragLeave,
+    onDragOver = props.onDragOver,
+    onDrop = props.onDrop,
+    onExpand = props.onExpand,
+    onFocusItem = props.onFocusItem,
+    onScroll = props.onScroll,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "data", "style", "showIndentLine", "value", "locale", "height", "className", "searchable", "virtualized", "classPrefix", "searchKeyword", "searchBy", "draggable", "disabledItemValues", "loadingNodeValues", "flattenedNodes", "listProps", "listRef", "searchInputRef", "expandItemValues", "onSearch", "onSelect", "onSelectItem", "onChange", "onDragEnd", "onDragStart", "onDragEnter", "onDragLeave", "onDragOver", "onDrop", "onExpand", "onFocusItem", "onScroll"]);
+  var _useCustom = useCustom('Picker', overrideLocale),
+    locale = _useCustom.locale;
+  var _useItemDataKeys = useItemDataKeys(),
+    valueKey = _useItemDataKeys.valueKey,
+    childrenKey = _useItemDataKeys.childrenKey;
+  var _useClassNames = useClassNames(classPrefix),
+    prefix = _useClassNames.prefix,
+    merge = _useClassNames.merge,
+    withClassPrefix = _useClassNames.withClassPrefix;
+  var handleSearchCallback = useEventCallback(function (value, _data, event) {
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, event);
+  });
+  var _useTreeSearch = useTreeSearch({
+      callback: handleSearchCallback,
+      searchKeyword: searchKeyword,
+      data: data,
+      searchBy: searchBy
+    }),
+    filteredData = _useTreeSearch.filteredData,
+    keyword = _useTreeSearch.keyword,
+    setFilteredData = _useTreeSearch.setFilteredData,
+    handleSearch = _useTreeSearch.handleSearch;
+  var transformation = useVirtualizedTreeData(flattenedNodes, filteredData, {
+    expandItemValues: expandItemValues,
+    searchKeyword: keyword
+  });
+  var getFormattedNodes = function getFormattedNodes(render) {
+    if (virtualized) {
+      return transformation().filter(function (n) {
+        return n.visible;
+      });
+    }
+    return filteredData.map(function (dataItem, index) {
+      return render === null || render === void 0 ? void 0 : render(dataItem, index, 1);
+    }).filter(function (n) {
+      return n;
+    });
+  };
+  useEffect(function () {
+    setFilteredData(data, keyword);
+  }, [data, keyword, setFilteredData]);
+
+  // TODO-Doma
+  // Replace `getKeyParentMap` with `getParentMap`
+  var itemParentMap = useMemo(function () {
+    return getKeyParentMap(data, function (node) {
+      return node[valueKey];
+    }, function (node) {
+      return node[childrenKey];
+    });
+  }, [childrenKey, data, valueKey]);
+  var _useFocusTree = useFocusTree({
+      filteredData: filteredData,
+      disabledItemValues: disabledItemValues,
+      expandItemValues: expandItemValues,
+      searchKeyword: keyword,
+      flattenedNodes: flattenedNodes,
+      onFocused: onFocusItem,
+      onExpand: onExpand
+    }),
+    focusItemValue = _useFocusTree.focusItemValue,
+    setFocusItemValue = _useFocusTree.setFocusItemValue,
+    onTreeKeydown = _useFocusTree.onTreeKeydown,
+    treeNodesRefs = _useFocusTree.treeNodesRefs,
+    saveTreeNodeRef = _useFocusTree.saveTreeNodeRef,
+    treeViewRef = _useFocusTree.treeViewRef;
+  var _useTreeDrag = useTreeDrag({
+      flattenedNodes: flattenedNodes,
+      treeNodesRefs: treeNodesRefs,
+      draggable: draggable,
+      onDragStart: onDragStart,
+      onDragEnter: onDragEnter,
+      onDragOver: onDragOver,
+      onDragLeave: onDragLeave,
+      onDragEnd: onDragEnd,
+      onDrop: onDrop,
+      prefix: prefix
+    }),
+    dragNode = _useTreeDrag.dragNode,
+    dragOverNodeKey = _useTreeDrag.dragOverNodeKey,
+    dropNodePosition = _useTreeDrag.dropNodePosition,
+    dragEvents = _useTreeDrag.dragEvents;
+  var getTreeNodeProps = useTreeNodeProps({
+    value: valueProp,
+    disabledItemValues: disabledItemValues,
+    loadingNodeValues: loadingNodeValues,
+    focusItemValue: focusItemValue,
+    keyword: keyword,
+    dragNode: dragNode,
+    dragOverNodeKey: dragOverNodeKey,
+    dropNodePosition: dropNodePosition
+  });
+  var handleSelect = useEventCallback(function (nodeData, event) {
+    if (!nodeData) {
+      return;
+    }
+    var nextValue = nodeData[valueKey];
+    var path = getPathTowardsItem(nodeData, function (item) {
+      return itemParentMap.get(item[valueKey]);
+    });
+    setFocusItemValue(nextValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeData, nextValue, event);
+    onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem(nodeData, path);
+  });
+  var selectActiveItem = useEventCallback(function (event) {
+    if (isNil(focusItemValue)) return;
+    var activeItem = getActiveItem(focusItemValue, flattenedNodes, valueKey);
+    handleSelect(activeItem, event);
+  });
+  var handleTreeKeyDown = useEventCallback(function (event) {
+    onTreeKeydown(event);
+    onMenuKeyDown(event, {
+      enter: selectActiveItem
+    });
+  });
+  var renderNode = function renderNode(node, index, layer) {
+    var visible = node.visible;
+    if (!visible) {
+      return null;
+    }
+    var children = node[childrenKey];
+    var expanded = isExpand(keyword, expandItemValues.includes(node[valueKey]));
+    var hasChildren = keyword ? hasVisibleChildren(node, childrenKey) : Boolean(children);
+    var nodeProps = _extends({}, getTreeNodeProps(node, layer, index), dragEvents, {
+      expanded: expanded,
+      draggable: draggable,
+      onExpand: onExpand,
+      onSelect: handleSelect,
+      hasChildren: hasChildren
+    });
+    if (hasChildren) {
+      var _merge;
+      layer += 1;
+      var childClassName = merge(prefix('node-children'), (_merge = {}, _merge[prefix('node-expanded')] = expanded, _merge));
+      return /*#__PURE__*/React.createElement("div", {
+        className: childClassName,
+        key: node[valueKey]
+      }, /*#__PURE__*/React.createElement(TreeViewNode, _extends({}, nodeProps, {
+        ref: function ref(_ref) {
+          return saveTreeNodeRef(_ref, node.refKey);
+        }
+      })), /*#__PURE__*/React.createElement("div", {
+        className: prefix('group'),
+        role: "group"
+      }, children === null || children === void 0 ? void 0 : children.map(function (child, i) {
+        return renderNode(child, i, layer);
+      }), showIndentLine && /*#__PURE__*/React.createElement(IndentLine, null)));
+    }
+    return /*#__PURE__*/React.createElement(TreeViewNode, _extends({
+      ref: function ref(_ref2) {
+        return saveTreeNodeRef(_ref2, node.refKey);
+      },
+      key: node[valueKey]
+    }, nodeProps));
+  };
+  var renderVirtualListNode = function renderVirtualListNode(_ref3) {
+    var index = _ref3.index,
+      style = _ref3.style,
+      data = _ref3.data;
+    var node = data[index];
+    var layer = node.layer,
+      visible = node.visible,
+      hasChildren = node.hasChildren;
+    var expanded = isExpand(keyword, expandItemValues.includes(node[valueKey]));
+    if (!visible) {
+      return null;
+    }
+    var treeNodeProps = _extends({}, getTreeNodeProps(node, layer), dragEvents, {
+      expanded: expanded,
+      style: style,
+      onExpand: onExpand,
+      onSelect: handleSelect,
+      hasChildren: hasChildren
+    });
+    return visible && /*#__PURE__*/React.createElement(TreeViewNode, _extends({
+      ref: function ref(_ref4) {
+        return saveTreeNodeRef(_ref4, node.refKey);
+      }
+    }, treeNodeProps));
+  };
+  var classes = merge(withClassPrefix({
+    virtualized: virtualized
+  }), className);
+  var formattedNodes = getFormattedNodes(renderNode);
+  return /*#__PURE__*/React.createElement(Component, {
+    ref: ref,
+    className: classes,
+    style: style
+  }, searchable ? /*#__PURE__*/React.createElement(SearchBox, {
+    placeholder: locale.searchPlaceholder,
+    onChange: handleSearch,
+    value: keyword,
+    inputRef: searchInputRef
+  }) : null, keyword && formattedNodes.length === 0 ? /*#__PURE__*/React.createElement("div", {
+    className: prefix('empty')
+  }, locale.noResultsText) : null, /*#__PURE__*/React.createElement(BaseTreeView, _extends({}, rest, {
+    ref: treeViewRef,
+    treeRootClassName: prefix('root'),
+    onScroll: onScroll,
+    onKeyDown: handleTreeKeyDown,
+    className: prefix('view'),
+    style: virtualized ? undefined : {
+      height: height
+    }
+  }), virtualized ? /*#__PURE__*/React.createElement(AutoSizer, {
+    defaultHeight: height,
+    style: {
+      width: 'auto',
+      height: 'auto'
+    },
+    className: prefix('virt-auto-sizer')
+  }, function (_ref5) {
+    var height = _ref5.height;
+    return /*#__PURE__*/React.createElement(List, _extends({
+      ref: listRef,
+      height: height,
+      itemSize: defaultItemSize,
+      itemCount: formattedNodes.length,
+      itemData: formattedNodes,
+      className: prefix('virt-list')
+    }, listProps), renderVirtualListNode);
+  }) : formattedNodes));
+});
+TreeView.displayName = 'TreeView';
+export default TreeView;

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

@@ -0,0 +1,60 @@
+import type { TreeNode } from '../types';
+interface DefaultExpandItemValuesOptions {
+    valueKey: string;
+    defaultExpandAll: boolean;
+    childrenKey: string;
+    defaultExpandItemValues?: any[];
+}
+export declare function getDefaultExpandItemValues<TItem>(data: TItem[], options: DefaultExpandItemValuesOptions): any[];
+interface UseExpandTreeProps<T extends TreeNode> {
+    /**
+     * Specifies whether all tree nodes should be expanded by default.
+     */
+    defaultExpandAll: boolean;
+    /**
+     * The key used to access the value of a tree node.
+     */
+    valueKey: string;
+    /**
+     * The key used to access the children of a tree node.
+     */
+    childrenKey: string;
+    /**
+     * An array of values that should be expanded by default.
+     */
+    defaultExpandItemValues: any[];
+    /**
+     * An optional array of values that control the expanded items.
+     */
+    controlledExpandItemValues?: any[];
+    /**
+     * A callback function that is called when the tree is expanded.
+     *
+     * @param expandItemValues - The expanded item values.
+     * @param activeNode - The active tree node.
+     * @param concat - A function to concatenate the data and children of a tree node.
+     */
+    onExpand?: (expandItemValues: T[], activeNode: T, concat: (data: T[], children: T[]) => T[]) => void;
+    /**
+     * A function that returns the children of a tree node.
+     *
+     * @param node - The tree node.
+     * @returns The children of the tree node.
+     */
+    getChildren?: (node: T) => T[] | Promise<T[]>;
+    /**
+     * A function that appends a child to a tree node.
+     *
+     * @param node - The tree node.
+     * @param getChildren - A function that returns the children of a tree node.
+     */
+    appendChild: (node: T, getChildren: (node: T) => T[] | Promise<T[]>) => void;
+}
+/**
+ * Custom hook for managing tree expansion state.
+ */
+declare function useExpandTree(data: TreeNode[], props: UseExpandTreeProps<TreeNode>): {
+    expandItemValues: any[];
+    handleExpandTreeNode: (...args: any[]) => any;
+};
+export default useExpandTree;

package/esm/Tree/hooks/useExpandTree.js

@@ -0,0 +1,70 @@
+'use client';
+import { useEffect } from 'react';
+import isFunction from 'lodash/isFunction';
+import { useControlled, useEventCallback } from '../../utils';
+import { createConcatChildrenFunction } from '../../internals/Picker';
+import { getExpandItemValues, flattenTree } from '../utils';
+export function getDefaultExpandItemValues(data, options) {
+  var valueKey = options.valueKey,
+    defaultExpandAll = options.defaultExpandAll,
+    childrenKey = options.childrenKey,
+    _options$defaultExpan = options.defaultExpandItemValues,
+    defaultExpandItemValues = _options$defaultExpan === void 0 ? [] : _options$defaultExpan;
+  if (defaultExpandAll) {
+    return flattenTree(data, function (item) {
+      return item[childrenKey] || [];
+    }).filter(function (item) {
+      return Array.isArray(item[childrenKey]) && item[childrenKey].length > 0;
+    }).map(function (item) {
+      return item[valueKey];
+    });
+  }
+  return defaultExpandItemValues;
+}
+/**
+ * Custom hook for managing tree expansion state.
+ */
+function useExpandTree(data, props) {
+  var defaultExpandAll = props.defaultExpandAll,
+    valueKey = props.valueKey,
+    childrenKey = props.childrenKey,
+    defaultExpandItemValues = props.defaultExpandItemValues,
+    controlledExpandItemValues = props.controlledExpandItemValues,
+    onExpand = props.onExpand,
+    getChildren = props.getChildren,
+    appendChild = props.appendChild;
+  var _useControlled = useControlled(controlledExpandItemValues, getDefaultExpandItemValues(data, {
+      defaultExpandAll: defaultExpandAll,
+      valueKey: valueKey,
+      childrenKey: childrenKey,
+      defaultExpandItemValues: defaultExpandItemValues
+    })),
+    expandItemValues = _useControlled[0],
+    setExpandItemValues = _useControlled[1];
+  useEffect(function () {
+    if (Array.isArray(controlledExpandItemValues)) {
+      setExpandItemValues(controlledExpandItemValues);
+    }
+  }, [controlledExpandItemValues, setExpandItemValues]);
+  var handleExpandTreeNode = useEventCallback(function (node, expanded) {
+    var nextExpandItemValues = getExpandItemValues({
+      node: node,
+      isExpand: !expanded,
+      expandItemValues: expandItemValues,
+      valueKey: valueKey
+    });
+    setExpandItemValues(nextExpandItemValues);
+    onExpand === null || onExpand === void 0 ? void 0 : onExpand(nextExpandItemValues, node, createConcatChildrenFunction(node, node[valueKey], {
+      valueKey: valueKey,
+      childrenKey: childrenKey
+    }));
+    if (isFunction(getChildren) && !node.expand && Array.isArray(node[childrenKey]) && node[childrenKey].length === 0) {
+      appendChild(node, getChildren);
+    }
+  });
+  return {
+    expandItemValues: expandItemValues,
+    handleExpandTreeNode: handleExpandTreeNode
+  };
+}
+export default useExpandTree;

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

@@ -0,0 +1,42 @@
+import type { TreeNode, TreeNodeMap } from '../types';
+interface UseFlattenTreeOptions {
+    /**
+     * The value of the tree.
+     */
+    value?: any;
+    /**
+     * Specifies whether the tree supports multiple selection.
+     */
+    multiple?: boolean;
+    /**
+     * The key used to access the label property of each tree node.
+     */
+    labelKey: string;
+    /**
+     * The key used to access the value property of each tree node.
+     */
+    valueKey: string;
+    /**
+     * The key used to access the children property of each tree node.
+     */
+    childrenKey: string;
+    /**
+     * Specifies whether the tree should cascade the selection to child nodes.
+     */
+    cascade?: boolean;
+    /**
+     * An array of item values that should not be selectable.
+     */
+    uncheckableItemValues?: any[];
+    /**
+     * A callback function that will be called when the tree nodes change.
+     * It receives a map of the tree nodes.
+     */
+    callback?: (nodes: TreeNodeMap) => void;
+}
+/**
+ * Custom hook that flattens a tree data structure into a map of nodes.
+ *
+ */
+declare function useFlattenTree(data: TreeNode[], options: UseFlattenTreeOptions): TreeNodeMap;
+export default useFlattenTree;

package/esm/Tree/hooks/useFlattenTree.js

@@ -0,0 +1,92 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { useCallback, useRef, useEffect } from 'react';
+import omit from 'lodash/omit';
+import isNil from 'lodash/isNil';
+import shallowEqual from '../../utils/shallowEqual';
+import { formatNodeRefKey } from '../utils';
+import useForceUpdate from './useForceUpdate';
+/**
+ * Custom hook that flattens a tree data structure into a map of nodes.
+ *
+ */
+function useFlattenTree(data, options) {
+  var value = options.value,
+    labelKey = options.labelKey,
+    valueKey = options.valueKey,
+    childrenKey = options.childrenKey,
+    _options$uncheckableI = options.uncheckableItemValues,
+    uncheckableItemValues = _options$uncheckableI === void 0 ? [] : _options$uncheckableI,
+    cascade = options.cascade,
+    multiple = options.multiple,
+    callback = options.callback;
+  var forceUpdate = useForceUpdate();
+  var flattenedNodes = useRef({});
+  var updateTreeNodeCheckState = useCallback(function (value) {
+    if (value === void 0) {
+      value = [];
+    }
+    // Reset values to false
+    Object.keys(flattenedNodes.current).forEach(function (refKey) {
+      var node = flattenedNodes.current[refKey];
+      if (cascade && !isNil(node.parent) && !isNil(node.parent.refKey)) {
+        node.check = flattenedNodes.current[node.parent.refKey].check;
+      } else {
+        node.check = false;
+      }
+      value.forEach(function (nodeVal) {
+        if (shallowEqual(flattenedNodes.current[refKey][valueKey], nodeVal) && !uncheckableItemValues.some(function (uncheckableValue) {
+          return shallowEqual(nodeVal, uncheckableValue);
+        })) {
+          flattenedNodes.current[refKey].check = true;
+        }
+      });
+    });
+  }, [cascade, uncheckableItemValues, valueKey]);
+  var flattenTreeData = useCallback(function (treeData, parent, layer) {
+    if (layer === void 0) {
+      layer = 1;
+    }
+    if (!Array.isArray(treeData) || treeData.length === 0) {
+      return [];
+    }
+    treeData.map(function (node) {
+      var _extends2;
+      var value = node[valueKey];
+      /**
+       * because the value of the node's type is string or number,
+       * so it can used as the key of the object directly
+       * to avoid number value is converted to string. 1 and '1' will be convert to '1'
+       * we used `String_` or `Number_` prefix
+       */
+      var refKey = formatNodeRefKey(value);
+      node.refKey = refKey;
+      flattenedNodes.current[refKey] = _extends((_extends2 = {
+        layer: layer
+      }, _extends2[labelKey] = node[labelKey], _extends2[valueKey] = node[valueKey], _extends2.uncheckable = uncheckableItemValues.some(function (value) {
+        return shallowEqual(node[valueKey], value);
+      }), _extends2), node);
+      if (parent) {
+        flattenedNodes.current[refKey].parent = omit(parent, 'parent', 'children');
+      }
+      flattenTreeData(node[childrenKey], node, layer + 1);
+    });
+    callback === null || callback === void 0 ? void 0 : callback(flattenedNodes.current);
+    forceUpdate();
+  }, [callback, forceUpdate, valueKey, labelKey, uncheckableItemValues, childrenKey]);
+  useEffect(function () {
+    // when data is changed, should clear the flattenedNodes, avoid duplicate keys
+    flattenedNodes.current = {};
+    flattenTreeData(data);
+  }, [data]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(function () {
+    if (multiple) {
+      updateTreeNodeCheckState(value);
+      forceUpdate();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+  return flattenedNodes.current;
+}
+export default useFlattenTree;

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

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import type { TreeNode } from '../types';
+interface UseFocusTreeProps<T extends TreeNode> {
+    filteredData: T[];
+    disabledItemValues: any[];
+    expandItemValues: any[];
+    searchKeyword: string;
+    flattenedNodes: any;
+    onExpand?: (nodeData: T, expanded: boolean) => void;
+    onFocused?: (value: TreeNode['value']) => void;
+}
+/**
+ * Custom hook that manages the focus behavior of a tree component.
+ */
+declare function useFocusTree(props: UseFocusTreeProps<TreeNode>): {
+    treeViewRef: import("react").RefObject<HTMLDivElement>;
+    focusTreeFirstNode: (...args: any[]) => any;
+    focusItemValue: string | number | null | undefined;
+    treeNodesRefs: {};
+    saveTreeNodeRef: (ref: import("react").Ref<any>, refKey?: string | undefined) => void;
+    setFocusItemValue: import("react").Dispatch<import("react").SetStateAction<string | number | null | undefined>>;
+    onTreeKeydown: (...args: any[]) => any;
+};
+export default useFocusTree;