@mui/x-tree-view 6.0.0-alpha.3 → 6.0.0-beta.0

package/internals/models/treeView.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { TreeViewAnyPluginSignature } from './plugin';
+import type { MergePluginsProperty } from './helpers';
+export interface TreeViewNode {
+    id: string;
+    idAttribute: string | undefined;
+    index: number;
+    parentId: string | null;
+    expandable: boolean;
+    disabled: boolean | undefined;
+}
+export interface TreeViewItemRange {
+    start?: string | null;
+    end?: string | null;
+    next?: string | null;
+    current?: string;
+}
+export interface TreeViewModel<TValue> {
+    name: string;
+    value: TValue;
+    setValue: React.Dispatch<React.SetStateAction<TValue>>;
+}
+export type TreeViewInstance<TSignatures extends readonly TreeViewAnyPluginSignature[]> = MergePluginsProperty<TSignatures, 'instance'>;

package/internals/models/treeView.js

@@ -0,0 +1 @@
+export {};

package/internals/plugins/defaultPlugins.d.ts

@@ -0,0 +1,10 @@
+import { UseTreeViewNodesParameters } from './useTreeViewNodes';
+import { UseTreeViewExpansionParameters } from './useTreeViewExpansion';
+import { UseTreeViewSelectionParameters } from './useTreeViewSelection';
+import { UseTreeViewFocusParameters } from './useTreeViewFocus';
+import { UseTreeViewContextValueBuilderParameters } from './useTreeViewContextValueBuilder';
+import { ConvertPluginsIntoSignatures } from '../models';
+export declare const DEFAULT_TREE_VIEW_PLUGINS: readonly [import("../models").TreeViewPlugin<import("./useTreeViewNodes").UseTreeViewNodesSignature>, import("../models").TreeViewPlugin<import("./useTreeViewExpansion").UseTreeViewExpansionSignature>, import("../models").TreeViewPlugin<import("./useTreeViewSelection").UseTreeViewSelectionSignature<any>>, import("../models").TreeViewPlugin<import("./useTreeViewFocus").UseTreeViewFocusSignature>, import("../models").TreeViewPlugin<import("./useTreeViewKeyboardNavigation").UseTreeViewKeyboardNavigationSignature>, import("../models").TreeViewPlugin<import("./useTreeViewContextValueBuilder").UseTreeViewContextValueBuilderSignature>];
+export type DefaultTreeViewPlugins = ConvertPluginsIntoSignatures<typeof DEFAULT_TREE_VIEW_PLUGINS>;
+export interface DefaultTreeViewPluginParameters<Multiple extends boolean | undefined> extends UseTreeViewNodesParameters, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple>, UseTreeViewContextValueBuilderParameters {
+}

package/internals/plugins/defaultPlugins.js

@@ -0,0 +1,9 @@
+import { useTreeViewNodes } from './useTreeViewNodes';
+import { useTreeViewExpansion } from './useTreeViewExpansion';
+import { useTreeViewSelection } from './useTreeViewSelection';
+import { useTreeViewFocus } from './useTreeViewFocus';
+import { useTreeViewKeyboardNavigation } from './useTreeViewKeyboardNavigation';
+import { useTreeViewContextValueBuilder } from './useTreeViewContextValueBuilder';
+export const DEFAULT_TREE_VIEW_PLUGINS = [useTreeViewNodes, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewContextValueBuilder];
+
+// We can't infer this type from the plugin, otherwise we would lose the generics.

package/internals/plugins/index.d.ts

@@ -0,0 +1,2 @@
+export { DEFAULT_TREE_VIEW_PLUGINS } from './defaultPlugins';
+export type { DefaultTreeViewPlugins } from './defaultPlugins';

package/internals/plugins/index.js

@@ -0,0 +1 @@
+export { DEFAULT_TREE_VIEW_PLUGINS } from './defaultPlugins';

package/internals/plugins/useTreeViewContextValueBuilder/index.d.ts

@@ -0,0 +1,2 @@
+export { useTreeViewContextValueBuilder } from './useTreeViewContextValueBuilder';
+export type { UseTreeViewContextValueBuilderSignature, UseTreeViewContextValueBuilderParameters, UseTreeViewContextValueBuilderDefaultizedParameters, } from './useTreeViewContextValueBuilder.types';

package/internals/plugins/useTreeViewContextValueBuilder/index.js

@@ -0,0 +1 @@
+export { useTreeViewContextValueBuilder } from './useTreeViewContextValueBuilder';

package/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.d.ts

@@ -0,0 +1,3 @@
+import { TreeViewPlugin } from '../../models';
+import { UseTreeViewContextValueBuilderSignature } from './useTreeViewContextValueBuilder.types';
+export declare const useTreeViewContextValueBuilder: TreeViewPlugin<UseTreeViewContextValueBuilderSignature>;

package/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js

@@ -0,0 +1,24 @@
+import useId from '@mui/utils/useId';
+export const useTreeViewContextValueBuilder = ({
+  instance,
+  params
+}) => {
+  const treeId = useId(params.id);
+  return {
+    getRootProps: () => ({
+      id: treeId
+    }),
+    contextValue: {
+      treeId,
+      instance: instance,
+      multiSelect: params.multiSelect,
+      disabledItemsFocusable: params.disabledItemsFocusable,
+      icons: {
+        defaultCollapseIcon: params.defaultCollapseIcon,
+        defaultEndIcon: params.defaultEndIcon,
+        defaultExpandIcon: params.defaultExpandIcon,
+        defaultParentIcon: params.defaultParentIcon
+      }
+    }
+  };
+};

package/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.types.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { TreeViewPluginSignature } from '../../models';
+import { UseTreeViewNodesSignature } from '../useTreeViewNodes';
+import { UseTreeViewSelectionSignature } from '../useTreeViewSelection';
+export interface UseTreeViewContextValueBuilderParameters {
+    /**
+     * This prop is used to help implement the accessibility logic.
+     * If you don't provide this prop. It falls back to a randomly generated id.
+     */
+    id?: string;
+    /**
+     * The default icon used to collapse the node.
+     */
+    defaultCollapseIcon?: React.ReactNode;
+    /**
+     * The default icon displayed next to a end node. This is applied to all
+     * tree nodes and can be overridden by the TreeItem `icon` prop.
+     */
+    defaultEndIcon?: React.ReactNode;
+    /**
+     * The default icon used to expand the node.
+     */
+    defaultExpandIcon?: React.ReactNode;
+    /**
+     * The default icon displayed next to a parent node. This is applied to all
+     * parent nodes and can be overridden by the TreeItem `icon` prop.
+     */
+    defaultParentIcon?: React.ReactNode;
+}
+export type UseTreeViewContextValueBuilderDefaultizedParameters = UseTreeViewContextValueBuilderParameters;
+export type UseTreeViewContextValueBuilderSignature = TreeViewPluginSignature<UseTreeViewContextValueBuilderParameters, UseTreeViewContextValueBuilderDefaultizedParameters, {}, {}, {}, never, [
+    UseTreeViewNodesSignature,
+    UseTreeViewSelectionSignature<any>
+]>;

package/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.types.js

@@ -0,0 +1 @@
+export {};

package/internals/plugins/useTreeViewExpansion/index.d.ts

@@ -0,0 +1,2 @@
+export { useTreeViewExpansion } from './useTreeViewExpansion';
+export type { UseTreeViewExpansionSignature, UseTreeViewExpansionParameters, UseTreeViewExpansionDefaultizedParameters, } from './useTreeViewExpansion.types';

package/internals/plugins/useTreeViewExpansion/index.js

@@ -0,0 +1 @@
+export { useTreeViewExpansion } from './useTreeViewExpansion';

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.d.ts

@@ -0,0 +1,3 @@
+import { TreeViewPlugin } from '../../models';
+import { UseTreeViewExpansionSignature } from './useTreeViewExpansion.types';
+export declare const useTreeViewExpansion: TreeViewPlugin<UseTreeViewExpansionSignature>;

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -0,0 +1,63 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
+import { populateInstance } from '../../useTreeView/useTreeView.utils';
+export const useTreeViewExpansion = ({
+  instance,
+  params,
+  models
+}) => {
+  const isNodeExpanded = React.useCallback(nodeId => {
+    return Array.isArray(models.expanded.value) ? models.expanded.value.indexOf(nodeId) !== -1 : false;
+  }, [models.expanded.value]);
+  const isNodeExpandable = React.useCallback(nodeId => {
+    var _instance$getNode;
+    return !!((_instance$getNode = instance.getNode(nodeId)) != null && _instance$getNode.expandable);
+  }, [instance]);
+  const toggleNodeExpansion = useEventCallback((event, nodeId) => {
+    if (nodeId == null) {
+      return;
+    }
+    let newExpanded;
+    if (models.expanded.value.indexOf(nodeId) !== -1) {
+      newExpanded = models.expanded.value.filter(id => id !== nodeId);
+    } else {
+      newExpanded = [nodeId].concat(models.expanded.value);
+    }
+    if (params.onNodeToggle) {
+      params.onNodeToggle(event, newExpanded);
+    }
+    models.expanded.setValue(newExpanded);
+  });
+  const expandAllSiblings = (event, nodeId) => {
+    const node = instance.getNode(nodeId);
+    const siblings = instance.getChildrenIds(node.parentId);
+    const diff = siblings.filter(child => instance.isNodeExpandable(child) && !instance.isNodeExpanded(child));
+    const newExpanded = models.expanded.value.concat(diff);
+    if (diff.length > 0) {
+      models.expanded.setValue(newExpanded);
+      if (params.onNodeToggle) {
+        params.onNodeToggle(event, newExpanded);
+      }
+    }
+  };
+  populateInstance(instance, {
+    isNodeExpanded,
+    isNodeExpandable,
+    toggleNodeExpansion,
+    expandAllSiblings
+  });
+};
+useTreeViewExpansion.models = {
+  expanded: {
+    controlledProp: 'expanded',
+    defaultProp: 'defaultExpanded'
+  }
+};
+const DEFAULT_EXPANDED = [];
+useTreeViewExpansion.getDefaultizedParams = params => {
+  var _params$defaultExpand;
+  return _extends({}, params, {
+    defaultExpanded: (_params$defaultExpand = params.defaultExpanded) != null ? _params$defaultExpand : DEFAULT_EXPANDED
+  });
+};

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { DefaultizedProps, TreeViewPluginSignature } from '../../models';
+import { UseTreeViewNodesSignature } from '../useTreeViewNodes';
+export interface UseTreeViewExpansionInstance {
+    isNodeExpanded: (nodeId: string) => boolean;
+    isNodeExpandable: (nodeId: string) => boolean;
+    toggleNodeExpansion: (event: React.SyntheticEvent, value: string) => void;
+    expandAllSiblings: (event: React.KeyboardEvent<HTMLUListElement>, nodeId: string) => void;
+}
+export interface UseTreeViewExpansionParameters {
+    /**
+     * Expanded node ids.
+     * Used when the item's expansion is controlled.
+     */
+    expanded?: string[];
+    /**
+     * Expanded node ids.
+     * Used when the item's expansion is not controlled.
+     * @default []
+     */
+    defaultExpanded?: string[];
+    /**
+     * Callback fired when tree items are expanded/collapsed.
+     * @param {React.SyntheticEvent} event The event source of the callback.
+     * @param {array} nodeIds The ids of the expanded nodes.
+     */
+    onNodeToggle?: (event: React.SyntheticEvent, nodeIds: string[]) => void;
+}
+export type UseTreeViewExpansionDefaultizedParameters = DefaultizedProps<UseTreeViewExpansionParameters, 'defaultExpanded'>;
+export type UseTreeViewExpansionSignature = TreeViewPluginSignature<UseTreeViewExpansionParameters, UseTreeViewExpansionDefaultizedParameters, UseTreeViewExpansionInstance, {}, {}, 'expanded', [
+    UseTreeViewNodesSignature
+]>;

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.js

@@ -0,0 +1 @@
+export {};

package/internals/plugins/useTreeViewFocus/index.d.ts

@@ -0,0 +1,2 @@
+export { useTreeViewFocus } from './useTreeViewFocus';
+export type { UseTreeViewFocusSignature, UseTreeViewFocusParameters, UseTreeViewFocusDefaultizedParameters, } from './useTreeViewFocus.types';

package/internals/plugins/useTreeViewFocus/index.js

@@ -0,0 +1 @@
+export { useTreeViewFocus } from './useTreeViewFocus';

package/internals/plugins/useTreeViewFocus/useTreeViewFocus.d.ts

@@ -0,0 +1,3 @@
+import { TreeViewPlugin } from '../../models';
+import { UseTreeViewFocusSignature } from './useTreeViewFocus.types';
+export declare const useTreeViewFocus: TreeViewPlugin<UseTreeViewFocusSignature>;

package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -0,0 +1,89 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
+import ownerDocument from '@mui/utils/ownerDocument';
+import { populateInstance } from '../../useTreeView/useTreeView.utils';
+import { useInstanceEventHandler } from '../../hooks/useInstanceEventHandler';
+export const useTreeViewFocus = ({
+  instance,
+  params,
+  state,
+  setState,
+  models,
+  rootRef
+}) => {
+  const setFocusedNodeId = useEventCallback(nodeId => {
+    const cleanNodeId = typeof nodeId === 'function' ? nodeId(state.focusedNodeId) : nodeId;
+    setState(prevState => _extends({}, prevState, {
+      focusedNodeId: cleanNodeId
+    }));
+  });
+  const isNodeFocused = React.useCallback(nodeId => state.focusedNodeId === nodeId, [state.focusedNodeId]);
+  const focusNode = useEventCallback((event, nodeId) => {
+    if (nodeId) {
+      setFocusedNodeId(nodeId);
+      if (params.onNodeFocus) {
+        params.onNodeFocus(event, nodeId);
+      }
+    }
+  });
+  populateInstance(instance, {
+    isNodeFocused,
+    focusNode
+  });
+  useInstanceEventHandler(instance, 'removeNode', ({
+    id
+  }) => {
+    setFocusedNodeId(oldFocusedNodeId => {
+      if (oldFocusedNodeId === id && rootRef.current === ownerDocument(rootRef.current).activeElement) {
+        return instance.getChildrenIds(null)[0];
+      }
+      return oldFocusedNodeId;
+    });
+  });
+  const createHandleFocus = otherHandlers => event => {
+    var _otherHandlers$onFocu;
+    (_otherHandlers$onFocu = otherHandlers.onFocus) == null || _otherHandlers$onFocu.call(otherHandlers, event);
+
+    // if the event bubbled (which is React specific) we don't want to steal focus
+    if (event.target === event.currentTarget) {
+      const isNodeVisible = nodeId => {
+        const node = instance.getNode(nodeId);
+        return node && (node.parentId == null || instance.isNodeExpanded(node.parentId));
+      };
+      let nodeToFocusId;
+      if (Array.isArray(models.selected.value)) {
+        nodeToFocusId = models.selected.value.find(isNodeVisible);
+      } else if (models.selected.value != null && isNodeVisible(models.selected.value)) {
+        nodeToFocusId = models.selected.value;
+      }
+      if (nodeToFocusId == null) {
+        nodeToFocusId = instance.getNavigableChildrenIds(null)[0];
+      }
+      instance.focusNode(event, nodeToFocusId);
+    }
+  };
+  const createHandleBlur = otherHandlers => event => {
+    var _otherHandlers$onBlur;
+    (_otherHandlers$onBlur = otherHandlers.onBlur) == null || _otherHandlers$onBlur.call(otherHandlers, event);
+    setFocusedNodeId(null);
+  };
+  const focusedNode = instance.getNode(state.focusedNodeId);
+  const activeDescendant = focusedNode ? focusedNode.idAttribute : null;
+  return {
+    getRootProps: otherHandlers => ({
+      onFocus: createHandleFocus(otherHandlers),
+      onBlur: createHandleBlur(otherHandlers),
+      'aria-activedescendant': activeDescendant != null ? activeDescendant : undefined
+    })
+  };
+};
+useTreeViewFocus.getInitialState = () => ({
+  focusedNodeId: null
+});
+useTreeViewFocus.getDefaultizedParams = params => {
+  var _params$disabledItems;
+  return _extends({}, params, {
+    disabledItemsFocusable: (_params$disabledItems = params.disabledItemsFocusable) != null ? _params$disabledItems : false
+  });
+};

package/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { TreeViewPluginSignature } from '../../models';
+import type { UseTreeViewNodesSignature } from '../useTreeViewNodes';
+import type { UseTreeViewSelectionSignature } from '../useTreeViewSelection';
+import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion';
+export interface UseTreeViewFocusInstance {
+    isNodeFocused: (nodeId: string) => boolean;
+    focusNode: (event: React.SyntheticEvent, nodeId: string | null) => void;
+}
+export interface UseTreeViewFocusParameters {
+    /**
+     * Callback fired when tree items are focused.
+     * @param {React.SyntheticEvent} event The event source of the callback **Warning**: This is a generic event not a focus event.
+     * @param {string} nodeId The id of the node focused.
+     * @param {string} value of the focused node.
+     */
+    onNodeFocus?: (event: React.SyntheticEvent, nodeId: string) => void;
+}
+export type UseTreeViewFocusDefaultizedParameters = UseTreeViewFocusParameters;
+export interface UseTreeViewFocusState {
+    focusedNodeId: string | null;
+}
+export type UseTreeViewFocusSignature = TreeViewPluginSignature<UseTreeViewFocusParameters, UseTreeViewFocusParameters, UseTreeViewFocusInstance, {}, UseTreeViewFocusState, never, [
+    UseTreeViewNodesSignature,
+    UseTreeViewSelectionSignature<any>,
+    UseTreeViewExpansionSignature
+]>;

package/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.js

@@ -0,0 +1 @@
+export {};

package/internals/plugins/useTreeViewKeyboardNavigation/index.d.ts

@@ -0,0 +1,2 @@
+export { useTreeViewKeyboardNavigation } from './useTreeViewKeyboardNavigation';
+export type { UseTreeViewKeyboardNavigationSignature } from './useTreeViewKeyboardNavigation.types';

package/internals/plugins/useTreeViewKeyboardNavigation/index.js

@@ -0,0 +1 @@
+export { useTreeViewKeyboardNavigation } from './useTreeViewKeyboardNavigation';

package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.d.ts

@@ -0,0 +1,3 @@
+import { TreeViewPlugin } from '../../models';
+import { UseTreeViewKeyboardNavigationSignature } from './useTreeViewKeyboardNavigation.types';
+export declare const useTreeViewKeyboardNavigation: TreeViewPlugin<UseTreeViewKeyboardNavigationSignature>;

package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -0,0 +1,223 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
+import useEventCallback from '@mui/utils/useEventCallback';
+import { getFirstNode, getLastNode, getNextNode, getPreviousNode, populateInstance } from '../../useTreeView/useTreeView.utils';
+function isPrintableCharacter(string) {
+  return string && string.length === 1 && string.match(/\S/);
+}
+function findNextFirstChar(firstChars, startIndex, char) {
+  for (let i = startIndex; i < firstChars.length; i += 1) {
+    if (char === firstChars[i]) {
+      return i;
+    }
+  }
+  return -1;
+}
+export const useTreeViewKeyboardNavigation = ({
+  instance,
+  params,
+  state
+}) => {
+  const theme = useTheme();
+  const isRtl = theme.direction === 'rtl';
+  const firstCharMap = React.useRef({});
+  const mapFirstChar = useEventCallback((nodeId, firstChar) => {
+    firstCharMap.current[nodeId] = firstChar;
+    return () => {
+      const newMap = _extends({}, firstCharMap.current);
+      delete newMap[nodeId];
+      firstCharMap.current = newMap;
+    };
+  });
+  populateInstance(instance, {
+    mapFirstChar
+  });
+  const handleNextArrow = event => {
+    if (state.focusedNodeId != null && instance.isNodeExpandable(state.focusedNodeId)) {
+      if (instance.isNodeExpanded(state.focusedNodeId)) {
+        instance.focusNode(event, getNextNode(instance, state.focusedNodeId));
+      } else if (!instance.isNodeDisabled(state.focusedNodeId)) {
+        instance.toggleNodeExpansion(event, state.focusedNodeId);
+      }
+    }
+    return true;
+  };
+  const handlePreviousArrow = event => {
+    if (state.focusedNodeId == null) {
+      return false;
+    }
+    if (instance.isNodeExpanded(state.focusedNodeId) && !instance.isNodeDisabled(state.focusedNodeId)) {
+      instance.toggleNodeExpansion(event, state.focusedNodeId);
+      return true;
+    }
+    const parent = instance.getNode(state.focusedNodeId).parentId;
+    if (parent) {
+      instance.focusNode(event, parent);
+      return true;
+    }
+    return false;
+  };
+  const focusByFirstCharacter = (event, nodeId, firstChar) => {
+    let start;
+    let index;
+    const lowercaseChar = firstChar.toLowerCase();
+    const firstCharIds = [];
+    const firstChars = [];
+    // This really only works since the ids are strings
+    Object.keys(firstCharMap.current).forEach(mapNodeId => {
+      const map = instance.getNode(mapNodeId);
+      const visible = map.parentId ? instance.isNodeExpanded(map.parentId) : true;
+      const shouldBeSkipped = params.disabledItemsFocusable ? false : instance.isNodeDisabled(mapNodeId);
+      if (visible && !shouldBeSkipped) {
+        firstCharIds.push(mapNodeId);
+        firstChars.push(firstCharMap.current[mapNodeId]);
+      }
+    });
+
+    // Get start index for search based on position of currentItem
+    start = firstCharIds.indexOf(nodeId) + 1;
+    if (start >= firstCharIds.length) {
+      start = 0;
+    }
+
+    // Check remaining slots in the menu
+    index = findNextFirstChar(firstChars, start, lowercaseChar);
+
+    // If not found in remaining slots, check from beginning
+    if (index === -1) {
+      index = findNextFirstChar(firstChars, 0, lowercaseChar);
+    }
+
+    // If match was found...
+    if (index > -1) {
+      instance.focusNode(event, firstCharIds[index]);
+    }
+  };
+  const selectNextNode = (event, id) => {
+    if (!instance.isNodeDisabled(getNextNode(instance, id))) {
+      instance.selectRange(event, {
+        end: getNextNode(instance, id),
+        current: id
+      }, true);
+    }
+  };
+  const selectPreviousNode = (event, nodeId) => {
+    if (!instance.isNodeDisabled(getPreviousNode(instance, nodeId))) {
+      instance.selectRange(event, {
+        end: getPreviousNode(instance, nodeId),
+        current: nodeId
+      }, true);
+    }
+  };
+  const createHandleKeyDown = otherHandlers => event => {
+    var _otherHandlers$onKeyD;
+    (_otherHandlers$onKeyD = otherHandlers.onKeyDown) == null || _otherHandlers$onKeyD.call(otherHandlers, event);
+    let flag = false;
+    const key = event.key;
+
+    // If the tree is empty there will be no focused node
+    if (event.altKey || event.currentTarget !== event.target || state.focusedNodeId == null) {
+      return;
+    }
+    const ctrlPressed = event.ctrlKey || event.metaKey;
+    switch (key) {
+      case ' ':
+        if (!params.disableSelection && !instance.isNodeDisabled(state.focusedNodeId)) {
+          flag = true;
+          if (params.multiSelect && event.shiftKey) {
+            instance.selectRange(event, {
+              end: state.focusedNodeId
+            });
+          } else if (params.multiSelect) {
+            instance.selectNode(event, state.focusedNodeId, true);
+          } else {
+            instance.selectNode(event, state.focusedNodeId);
+          }
+        }
+        event.stopPropagation();
+        break;
+      case 'Enter':
+        if (!instance.isNodeDisabled(state.focusedNodeId)) {
+          if (instance.isNodeExpandable(state.focusedNodeId)) {
+            instance.toggleNodeExpansion(event, state.focusedNodeId);
+            flag = true;
+          } else if (!params.disableSelection) {
+            flag = true;
+            if (params.multiSelect) {
+              instance.selectNode(event, state.focusedNodeId, true);
+            } else {
+              instance.selectNode(event, state.focusedNodeId);
+            }
+          }
+        }
+        event.stopPropagation();
+        break;
+      case 'ArrowDown':
+        if (params.multiSelect && event.shiftKey && !params.disableSelection) {
+          selectNextNode(event, state.focusedNodeId);
+        }
+        instance.focusNode(event, getNextNode(instance, state.focusedNodeId));
+        flag = true;
+        break;
+      case 'ArrowUp':
+        if (params.multiSelect && event.shiftKey && !params.disableSelection) {
+          selectPreviousNode(event, state.focusedNodeId);
+        }
+        instance.focusNode(event, getPreviousNode(instance, state.focusedNodeId));
+        flag = true;
+        break;
+      case 'ArrowRight':
+        if (isRtl) {
+          flag = handlePreviousArrow(event);
+        } else {
+          flag = handleNextArrow(event);
+        }
+        break;
+      case 'ArrowLeft':
+        if (isRtl) {
+          flag = handleNextArrow(event);
+        } else {
+          flag = handlePreviousArrow(event);
+        }
+        break;
+      case 'Home':
+        if (params.multiSelect && ctrlPressed && event.shiftKey && !params.disableSelection && !instance.isNodeDisabled(state.focusedNodeId)) {
+          instance.rangeSelectToFirst(event, state.focusedNodeId);
+        }
+        instance.focusNode(event, getFirstNode(instance));
+        flag = true;
+        break;
+      case 'End':
+        if (params.multiSelect && ctrlPressed && event.shiftKey && !params.disableSelection && !instance.isNodeDisabled(state.focusedNodeId)) {
+          instance.rangeSelectToLast(event, state.focusedNodeId);
+        }
+        instance.focusNode(event, getLastNode(instance));
+        flag = true;
+        break;
+      default:
+        if (key === '*') {
+          instance.expandAllSiblings(event, state.focusedNodeId);
+          flag = true;
+        } else if (params.multiSelect && ctrlPressed && key.toLowerCase() === 'a' && !params.disableSelection) {
+          instance.selectRange(event, {
+            start: getFirstNode(instance),
+            end: getLastNode(instance)
+          });
+          flag = true;
+        } else if (!ctrlPressed && !event.shiftKey && isPrintableCharacter(key)) {
+          focusByFirstCharacter(event, state.focusedNodeId, key);
+          flag = true;
+        }
+    }
+    if (flag) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  };
+  return {
+    getRootProps: otherHandlers => ({
+      onKeyDown: createHandleKeyDown(otherHandlers)
+    })
+  };
+};

package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.d.ts

@@ -0,0 +1,14 @@
+import { TreeViewPluginSignature } from '../../models';
+import { UseTreeViewNodesSignature } from '../useTreeViewNodes';
+import { UseTreeViewSelectionSignature } from '../useTreeViewSelection';
+import { UseTreeViewFocusSignature } from '../useTreeViewFocus';
+import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion';
+export interface UseTreeViewKeyboardNavigationInstance {
+    mapFirstChar: (nodeId: string, firstChar: string) => () => void;
+}
+export type UseTreeViewKeyboardNavigationSignature = TreeViewPluginSignature<{}, {}, UseTreeViewKeyboardNavigationInstance, {}, {}, never, [
+    UseTreeViewNodesSignature,
+    UseTreeViewSelectionSignature<any>,
+    UseTreeViewFocusSignature,
+    UseTreeViewExpansionSignature
+]>;

package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.js

@@ -0,0 +1 @@
+export {};

package/internals/plugins/useTreeViewNodes/index.d.ts

@@ -0,0 +1,2 @@
+export { useTreeViewNodes } from './useTreeViewNodes';
+export type { UseTreeViewNodesSignature, UseTreeViewNodesParameters, UseTreeViewNodesDefaultizedParameters, } from './useTreeViewNodes.types';

package/internals/plugins/useTreeViewNodes/index.js

@@ -0,0 +1 @@
+export { useTreeViewNodes } from './useTreeViewNodes';

package/internals/plugins/useTreeViewNodes/useTreeViewNodes.d.ts

@@ -0,0 +1,3 @@
+import { TreeViewPlugin } from '../../models';
+import { UseTreeViewNodesSignature } from './useTreeViewNodes.types';
+export declare const useTreeViewNodes: TreeViewPlugin<UseTreeViewNodesSignature>;