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

package/modern/index.js

@@ -1,9 +1,10 @@
 /**
- * @mui/x-tree-view v6.0.0-alpha.3
+ * @mui/x-tree-view v6.0.0-beta.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
 export * from './TreeItem';
-export * from './TreeView';
+export * from './TreeView';
+export { unstable_resetCleanupTracking } from './internals/hooks/useInstanceEventHandler';

package/modern/{TreeView → internals/TreeViewProvider}/TreeViewContext.js

@@ -1,21 +1,6 @@
 import * as React from 'react';
-/**
- * @ignore - internal component.
- */
-export const TreeViewContext = /*#__PURE__*/React.createContext({
-  registerNode: () => {},
-  unregisterNode: () => {},
-  isFocused: () => false,
-  isSelected: () => false,
-  isExpanded: () => false,
-  isExpandable: () => false,
-  isDisabled: () => false,
-  mapFirstChar: () => {},
-  unMapFirstChar: () => {},
-  focus: () => {},
-  toggleExpansion: () => {},
-  selectNode: () => {},
-  selectRange: () => {},
+export const DEFAULT_TREE_VIEW_CONTEXT_VALUE = {
+  instance: null,
   multiSelect: false,
   disabledItemsFocusable: false,
   treeId: undefined,
@@ -25,7 +10,12 @@ export const TreeViewContext = /*#__PURE__*/React.createContext({
     defaultParentIcon: null,
     defaultEndIcon: null
   }
-});
+};
+
+/**
+ * @ignore - internal component.
+ */
+export const TreeViewContext = /*#__PURE__*/React.createContext(DEFAULT_TREE_VIEW_CONTEXT_VALUE);
 if (process.env.NODE_ENV !== 'production') {
   TreeViewContext.displayName = 'TreeViewContext';
 }

package/modern/internals/TreeViewProvider/TreeViewProvider.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { TreeViewContext } from './TreeViewContext';
+import { DescendantProvider } from './DescendantProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Sets up the contexts for the underlying TreeItem components.
+ *
+ * @ignore - do not document.
+ */
+export function TreeViewProvider(props) {
+  const {
+    value,
+    children
+  } = props;
+  return /*#__PURE__*/_jsx(TreeViewContext.Provider, {
+    value: value,
+    children: /*#__PURE__*/_jsx(DescendantProvider, {
+      children: children
+    })
+  });
+}

package/modern/internals/TreeViewProvider/TreeViewProvider.types.js

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

package/modern/internals/TreeViewProvider/index.js

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

package/modern/internals/TreeViewProvider/useTreeViewContext.js

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { TreeViewContext } from './TreeViewContext';
+export const useTreeViewContext = () => React.useContext(TreeViewContext);

package/modern/internals/corePlugins/corePlugins.js

@@ -0,0 +1,6 @@
+import { useTreeViewInstanceEvents } from './useTreeViewInstanceEvents';
+/**
+ * Internal plugins that creates the tools used by the other plugins.
+ * These plugins are used by the tree view components.
+ */
+export const TREE_VIEW_CORE_PLUGINS = [useTreeViewInstanceEvents];

package/modern/internals/corePlugins/index.js

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

package/modern/internals/corePlugins/useTreeViewInstanceEvents/index.js

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

package/modern/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.js

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { EventManager } from '../../utils/EventManager';
+import { populateInstance } from '../../useTreeView/useTreeView.utils';
+const isSyntheticEvent = event => {
+  return event.isPropagationStopped !== undefined;
+};
+
+/**
+ * Plugin responsible for the registration of the nodes defined as JSX children of the TreeView.
+ * When we will have both a SimpleTreeView using JSX children and a TreeView using a data prop,
+ * this plugin will only be used by SimpleTreeView.
+ */
+export const useTreeViewInstanceEvents = ({
+  instance
+}) => {
+  const [eventManager] = React.useState(() => new EventManager());
+  const publishEvent = React.useCallback((...args) => {
+    const [name, params, event = {}] = args;
+    event.defaultMuiPrevented = false;
+    if (isSyntheticEvent(event) && event.isPropagationStopped()) {
+      return;
+    }
+    eventManager.emit(name, params, event);
+  }, [eventManager]);
+  const subscribeEvent = React.useCallback((event, handler) => {
+    eventManager.on(event, handler);
+    return () => {
+      eventManager.removeListener(event, handler);
+    };
+  }, [eventManager]);
+  populateInstance(instance, {
+    $$publishEvent: publishEvent,
+    $$subscribeEvent: subscribeEvent
+  });
+};

package/modern/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.types.js

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

package/modern/internals/hooks/useInstanceEventHandler.js

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { TimerBasedCleanupTracking } from '../utils/cleanupTracking/TimerBasedCleanupTracking';
+import { FinalizationRegistryBasedCleanupTracking } from '../utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking';
+// We use class to make it easier to detect in heap snapshots by name
+class ObjectToBeRetainedByReact {}
+
+// Based on https://github.com/Bnaya/use-dispose-uncommitted/blob/main/src/finalization-registry-based-impl.ts
+// Check https://github.com/facebook/react/issues/15317 to get more information
+export function createUseInstanceEventHandler(registryContainer) {
+  let cleanupTokensCounter = 0;
+  return function useInstanceEventHandler(instance, eventName, handler) {
+    if (registryContainer.registry === null) {
+      registryContainer.registry = typeof FinalizationRegistry !== 'undefined' ? new FinalizationRegistryBasedCleanupTracking() : new TimerBasedCleanupTracking();
+    }
+    const [objectRetainedByReact] = React.useState(new ObjectToBeRetainedByReact());
+    const subscription = React.useRef(null);
+    const handlerRef = React.useRef();
+    handlerRef.current = handler;
+    const cleanupTokenRef = React.useRef(null);
+    if (!subscription.current && handlerRef.current) {
+      const enhancedHandler = (params, event) => {
+        if (!event.defaultMuiPrevented) {
+          handlerRef.current?.(params, event);
+        }
+      };
+      subscription.current = instance.$$subscribeEvent(eventName, enhancedHandler);
+      cleanupTokensCounter += 1;
+      cleanupTokenRef.current = {
+        cleanupToken: cleanupTokensCounter
+      };
+      registryContainer.registry.register(objectRetainedByReact,
+      // The callback below will be called once this reference stops being retained
+      () => {
+        subscription.current?.();
+        subscription.current = null;
+        cleanupTokenRef.current = null;
+      }, cleanupTokenRef.current);
+    } else if (!handlerRef.current && subscription.current) {
+      subscription.current();
+      subscription.current = null;
+      if (cleanupTokenRef.current) {
+        registryContainer.registry.unregister(cleanupTokenRef.current);
+        cleanupTokenRef.current = null;
+      }
+    }
+    React.useEffect(() => {
+      if (!subscription.current && handlerRef.current) {
+        const enhancedHandler = (params, event) => {
+          if (!event.defaultMuiPrevented) {
+            handlerRef.current?.(params, event);
+          }
+        };
+        subscription.current = instance.$$subscribeEvent(eventName, enhancedHandler);
+      }
+      if (cleanupTokenRef.current && registryContainer.registry) {
+        // If the effect was called, it means that this render was committed
+        // so we can trust the cleanup function to remove the listener.
+        registryContainer.registry.unregister(cleanupTokenRef.current);
+        cleanupTokenRef.current = null;
+      }
+      return () => {
+        subscription.current?.();
+        subscription.current = null;
+      };
+    }, [instance, eventName]);
+  };
+}
+const registryContainer = {
+  registry: null
+};
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const unstable_resetCleanupTracking = () => {
+  registryContainer.registry?.reset();
+  registryContainer.registry = null;
+};
+export const useInstanceEventHandler = createUseInstanceEventHandler(registryContainer);

package/modern/internals/models/events.js

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

package/modern/internals/models/helpers.js

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

package/modern/internals/models/index.js

@@ -0,0 +1,3 @@
+export * from './helpers';
+export * from './plugin';
+export * from './treeView';

package/modern/internals/models/plugin.js

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

package/modern/internals/models/treeView.js

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

package/modern/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/modern/internals/plugins/index.js

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

package/modern/internals/plugins/useTreeViewContextValueBuilder/index.js

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

package/modern/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/modern/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.types.js

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

package/modern/internals/plugins/useTreeViewExpansion/index.js

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

package/modern/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -0,0 +1,57 @@
+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 => !!instance.getNode(nodeId)?.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 => _extends({}, params, {
+  defaultExpanded: params.defaultExpanded ?? DEFAULT_EXPANDED
+});

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

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

package/modern/internals/plugins/useTreeViewFocus/index.js

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

package/modern/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -0,0 +1,84 @@
+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 => {
+    otherHandlers.onFocus?.(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 => {
+    otherHandlers.onBlur?.(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 ?? undefined
+    })
+  };
+};
+useTreeViewFocus.getInitialState = () => ({
+  focusedNodeId: null
+});
+useTreeViewFocus.getDefaultizedParams = params => _extends({}, params, {
+  disabledItemsFocusable: params.disabledItemsFocusable ?? false
+});

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

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

package/modern/internals/plugins/useTreeViewKeyboardNavigation/index.js

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

package/modern/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -0,0 +1,222 @@
+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 => {
+    otherHandlers.onKeyDown?.(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/modern/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.js

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

package/modern/internals/plugins/useTreeViewNodes/index.js

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