@mui/x-tree-view 7.0.0-beta.7 → 7.0.0

package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -5,6 +5,22 @@ import ownerDocument from '@mui/utils/ownerDocument';
 import { populateInstance, populatePublicAPI } from '../../useTreeView/useTreeView.utils';
 import { useInstanceEventHandler } from '../../hooks/useInstanceEventHandler';
 import { getActiveElement } from '../../utils/utils';
+const useTabbableItemId = (instance, selectedItems) => {
+  const isItemVisible = itemId => {
+    const node = instance.getNode(itemId);
+    return node && (node.parentId == null || instance.isNodeExpanded(node.parentId));
+  };
+  let tabbableItemId;
+  if (Array.isArray(selectedItems)) {
+    tabbableItemId = selectedItems.find(isItemVisible);
+  } else if (selectedItems != null && isItemVisible(selectedItems)) {
+    tabbableItemId = selectedItems;
+  }
+  if (tabbableItemId == null) {
+    tabbableItemId = instance.getNavigableChildrenIds(null)[0];
+  }
+  return tabbableItemId;
+};
 export const useTreeViewFocus = ({
   instance,
   publicAPI,
@@ -14,30 +30,36 @@ export const useTreeViewFocus = ({
   models,
   rootRef
 }) => {
-  const setFocusedNodeId = useEventCallback(nodeId => {
-    const cleanNodeId = typeof nodeId === 'function' ? nodeId(state.focusedNodeId) : nodeId;
-    if (state.focusedNodeId !== cleanNodeId) {
+  const tabbableItemId = useTabbableItemId(instance, models.selectedItems.value);
+  const setFocusedItemId = useEventCallback(itemId => {
+    const cleanItemId = typeof itemId === 'function' ? itemId(state.focusedNodeId) : itemId;
+    if (state.focusedNodeId !== cleanItemId) {
       setState(prevState => _extends({}, prevState, {
-        focusedNodeId: cleanNodeId
+        focusedNodeId: cleanItemId
       }));
     }
   });
-  const isTreeViewFocused = React.useCallback(() => !!rootRef.current && rootRef.current === getActiveElement(ownerDocument(rootRef.current)), [rootRef]);
-  const isNodeFocused = React.useCallback(nodeId => state.focusedNodeId === nodeId && isTreeViewFocused(), [state.focusedNodeId, isTreeViewFocused]);
-  const isNodeVisible = nodeId => {
-    const node = instance.getNode(nodeId);
+  const isTreeViewFocused = React.useCallback(() => !!rootRef.current && rootRef.current.contains(getActiveElement(ownerDocument(rootRef.current))), [rootRef]);
+  const isNodeFocused = React.useCallback(itemId => state.focusedNodeId === itemId && isTreeViewFocused(), [state.focusedNodeId, isTreeViewFocused]);
+  const isNodeVisible = itemId => {
+    const node = instance.getNode(itemId);
     return node && (node.parentId == null || instance.isNodeExpanded(node.parentId));
   };
+  const innerFocusItem = (event, itemId) => {
+    const node = instance.getNode(itemId);
+    const itemElement = document.getElementById(instance.getTreeItemId(itemId, node.idAttribute));
+    if (itemElement) {
+      itemElement.focus();
+    }
+    setFocusedItemId(itemId);
+    if (params.onItemFocus) {
+      params.onItemFocus(event, itemId);
+    }
+  };
   const focusItem = useEventCallback((event, nodeId) => {
-    // if we receive a nodeId, and it is visible, the focus will be set to it
-    if (nodeId && isNodeVisible(nodeId)) {
-      if (!isTreeViewFocused()) {
-        instance.focusRoot();
-      }
-      setFocusedNodeId(nodeId);
-      if (params.onItemFocus) {
-        params.onItemFocus(event, nodeId);
-      }
+    // If we receive a nodeId, and it is visible, the focus will be set to it
+    if (isNodeVisible(nodeId)) {
+      innerFocusItem(event, nodeId);
     }
   });
   const focusDefaultNode = useEventCallback(event => {
@@ -50,22 +72,26 @@ export const useTreeViewFocus = ({
     if (nodeToFocusId == null) {
       nodeToFocusId = instance.getNavigableChildrenIds(null)[0];
     }
-    setFocusedNodeId(nodeToFocusId);
-    if (params.onItemFocus) {
-      params.onItemFocus(event, nodeToFocusId);
-    }
+    innerFocusItem(event, nodeToFocusId);
   });
-  const focusRoot = useEventCallback(() => {
-    var _rootRef$current;
-    (_rootRef$current = rootRef.current) == null || _rootRef$current.focus({
-      preventScroll: true
-    });
+  const removeFocusedItem = useEventCallback(() => {
+    if (state.focusedNodeId == null) {
+      return;
+    }
+    const node = instance.getNode(state.focusedNodeId);
+    const itemElement = document.getElementById(instance.getTreeItemId(state.focusedNodeId, node.idAttribute));
+    if (itemElement) {
+      itemElement.blur();
+    }
+    setFocusedItemId(null);
   });
+  const canItemBeTabbed = itemId => itemId === tabbableItemId;
   populateInstance(instance, {
     isNodeFocused,
+    canItemBeTabbed,
     focusItem,
-    focusRoot,
-    focusDefaultNode
+    focusDefaultNode,
+    removeFocusedItem
   });
   populatePublicAPI(publicAPI, {
     focusItem
@@ -73,33 +99,23 @@ export const useTreeViewFocus = ({
   useInstanceEventHandler(instance, 'removeNode', ({
     id
   }) => {
-    setFocusedNodeId(oldFocusedNodeId => {
-      if (oldFocusedNodeId === id && rootRef.current === ownerDocument(rootRef.current).activeElement) {
-        return instance.getChildrenIds(null)[0];
-      }
-      return oldFocusedNodeId;
-    });
+    if (state.focusedNodeId === id) {
+      instance.focusDefaultNode(null);
+    }
   });
   const createHandleFocus = otherHandlers => event => {
-    var _otherHandlers$onFocu;
-    (_otherHandlers$onFocu = otherHandlers.onFocus) == null || _otherHandlers$onFocu.call(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) {
       instance.focusDefaultNode(event);
     }
   };
-  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 ? instance.getTreeItemId(focusedNode.id, focusedNode.idAttribute) : null;
   return {
     getRootProps: otherHandlers => ({
       onFocus: createHandleFocus(otherHandlers),
-      onBlur: createHandleBlur(otherHandlers),
-      'aria-activedescendant': activeDescendant != null ? activeDescendant : undefined
+      'aria-activedescendant': activeDescendant ?? undefined
     })
   };
 };

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

@@ -5,10 +5,11 @@ import type { UseTreeViewNodesSignature } from '../useTreeViewNodes';
 import type { UseTreeViewSelectionSignature } from '../useTreeViewSelection';
 import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion';
 export interface UseTreeViewFocusInstance {
-    isNodeFocused: (nodeId: string) => boolean;
-    focusItem: (event: React.SyntheticEvent, itemId: string | null) => void;
-    focusDefaultNode: (event: React.SyntheticEvent) => void;
-    focusRoot: () => void;
+    isNodeFocused: (itemId: string) => boolean;
+    canItemBeTabbed: (itemId: string) => boolean;
+    focusItem: (event: React.SyntheticEvent, nodeId: string) => void;
+    focusDefaultNode: (event: React.SyntheticEvent | null) => void;
+    removeFocusedItem: () => void;
 }
 export interface UseTreeViewFocusPublicAPI extends Pick<UseTreeViewFocusInstance, 'focusItem'> {
 }
@@ -19,7 +20,7 @@ export interface UseTreeViewFocusParameters {
      * @param {string} itemId The id of the focused item.
      * @param {string} value of the focused item.
      */
-    onItemFocus?: (event: React.SyntheticEvent, itemId: string) => void;
+    onItemFocus?: (event: React.SyntheticEvent | null, itemId: string) => void;
 }
 export type UseTreeViewFocusDefaultizedParameters = UseTreeViewFocusParameters;
 export interface UseTreeViewFocusState {

package/internals/plugins/useTreeViewId/useTreeViewId.js

@@ -6,7 +6,7 @@ export const useTreeViewId = ({
   params
 }) => {
   const treeId = useId(params.id);
-  const getTreeItemId = React.useCallback((nodeId, idAttribute) => idAttribute != null ? idAttribute : `${treeId}-${nodeId}`, [treeId]);
+  const getTreeItemId = React.useCallback((itemId, idAttribute) => idAttribute ?? `${treeId}-${itemId}`, [treeId]);
   populateInstance(instance, {
     getTreeItemId
   });

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

@@ -1,6 +1,6 @@
 import { TreeViewPluginSignature } from '../../models';
 export interface UseTreeViewIdInstance {
-    getTreeItemId: (nodeId: string, idAttribute: string | undefined) => string;
+    getTreeItemId: (itemId: string, idAttribute: string | undefined) => string;
 }
 export interface UseTreeViewIdParameters {
     /**

package/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js

@@ -32,12 +32,12 @@ export const useTreeViewJSXNodes = ({
       });
     });
   });
-  const removeJSXNode = useEventCallback(nodeId => {
+  const removeJSXNode = useEventCallback(itemId => {
     setState(prevState => {
       const newNodeMap = _extends({}, prevState.nodes.nodeMap);
       const newItemMap = _extends({}, prevState.nodes.itemMap);
-      delete newNodeMap[nodeId];
-      delete newItemMap[nodeId];
+      delete newNodeMap[itemId];
+      delete newItemMap[itemId];
       return _extends({}, prevState, {
         nodes: _extends({}, prevState.nodes, {
           nodeMap: newNodeMap,
@@ -46,18 +46,18 @@ export const useTreeViewJSXNodes = ({
       });
     });
     publishTreeViewEvent(instance, 'removeNode', {
-      id: nodeId
+      id: itemId
     });
   });
-  const mapFirstCharFromJSX = useEventCallback((nodeId, firstChar) => {
+  const mapFirstCharFromJSX = useEventCallback((itemId, firstChar) => {
     instance.updateFirstCharMap(firstCharMap => {
-      firstCharMap[nodeId] = firstChar;
+      firstCharMap[itemId] = firstChar;
       return firstCharMap;
     });
     return () => {
       instance.updateFirstCharMap(firstCharMap => {
         const newMap = _extends({}, firstCharMap);
-        delete newMap[nodeId];
+        delete newMap[itemId];
         return newMap;
       });
     };
@@ -77,7 +77,7 @@ const useTreeViewJSXNodesItemPlugin = ({
     children,
     disabled = false,
     label,
-    nodeId,
+    itemId,
     id
   } = props;
   const {
@@ -96,8 +96,8 @@ const useTreeViewJSXNodesItemPlugin = ({
   const handleContentRef = useForkRef(pluginContentRef, contentRef);
   const descendant = React.useMemo(() => ({
     element: treeItemElement,
-    id: nodeId
-  }), [nodeId, treeItemElement]);
+    id: itemId
+  }), [itemId, treeItemElement]);
   const {
     index,
     parentId
@@ -106,24 +106,23 @@ const useTreeViewJSXNodesItemPlugin = ({
     // On the first render a node's index will be -1. We want to wait for the real index.
     if (index !== -1) {
       instance.insertJSXNode({
-        id: nodeId,
+        id: itemId,
         idAttribute: id,
         index,
         parentId,
         expandable,
         disabled
       });
-      return () => instance.removeJSXNode(nodeId);
+      return () => instance.removeJSXNode(itemId);
     }
     return undefined;
-  }, [instance, parentId, index, nodeId, expandable, disabled, id]);
+  }, [instance, parentId, index, itemId, expandable, disabled, id]);
   React.useEffect(() => {
     if (label) {
-      var _pluginContentRef$cur, _pluginContentRef$cur2;
-      return instance.mapFirstCharFromJSX(nodeId, ((_pluginContentRef$cur = (_pluginContentRef$cur2 = pluginContentRef.current) == null ? void 0 : _pluginContentRef$cur2.textContent) != null ? _pluginContentRef$cur : '').substring(0, 1).toLowerCase());
+      return instance.mapFirstCharFromJSX(itemId, (pluginContentRef.current?.textContent ?? '').substring(0, 1).toLowerCase());
     }
     return undefined;
-  }, [instance, nodeId, label]);
+  }, [instance, itemId, label]);
   return {
     contentRef: handleContentRef,
     rootRef: handleRootRef
@@ -132,9 +131,9 @@ const useTreeViewJSXNodesItemPlugin = ({
 useTreeViewJSXNodes.itemPlugin = useTreeViewJSXNodesItemPlugin;
 useTreeViewJSXNodes.wrapItem = ({
   children,
-  nodeId
+  itemId
 }) => /*#__PURE__*/_jsx(DescendantProvider, {
-  id: nodeId,
+  id: itemId,
   children: children
 });
 useTreeViewJSXNodes.params = {};

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

@@ -3,8 +3,8 @@ import { UseTreeViewNodesSignature } from '../useTreeViewNodes';
 import { UseTreeViewKeyboardNavigationSignature } from '../useTreeViewKeyboardNavigation';
 export interface UseTreeViewNodesInstance {
     insertJSXNode: (node: TreeViewNode) => void;
-    removeJSXNode: (nodeId: string) => void;
-    mapFirstCharFromJSX: (nodeId: string, firstChar: string) => () => void;
+    removeJSXNode: (itemId: string) => void;
+    mapFirstCharFromJSX: (itemId: string, firstChar: string) => () => void;
 }
 export interface UseTreeViewNodesParameters {
 }

package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -15,8 +15,7 @@ function findNextFirstChar(firstChars, startIndex, char) {
 }
 export const useTreeViewKeyboardNavigation = ({
   instance,
-  params,
-  state
+  params
 }) => {
   const theme = useTheme();
   const isRTL = theme.direction === 'rtl';
@@ -32,37 +31,33 @@ export const useTreeViewKeyboardNavigation = ({
     }
     const newFirstCharMap = {};
     const processItem = item => {
-      var _item$children;
       const getItemId = params.getItemId;
-      const nodeId = getItemId ? getItemId(item) : item.id;
-      newFirstCharMap[nodeId] = instance.getNode(nodeId).label.substring(0, 1).toLowerCase();
-      (_item$children = item.children) == null || _item$children.forEach(processItem);
+      const itemId = getItemId ? getItemId(item) : item.id;
+      newFirstCharMap[itemId] = instance.getNode(itemId).label.substring(0, 1).toLowerCase();
+      item.children?.forEach(processItem);
     };
     params.items.forEach(processItem);
     firstCharMap.current = newFirstCharMap;
   }, [params.items, params.getItemId, instance]);
-  populateInstance(instance, {
-    updateFirstCharMap
-  });
-  const getFirstMatchingNode = (nodeId, firstChar) => {
+  const getFirstMatchingItem = (itemId, 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);
+    Object.keys(firstCharMap.current).forEach(mapItemId => {
+      const map = instance.getNode(mapItemId);
       const visible = map.parentId ? instance.isNodeExpanded(map.parentId) : true;
-      const shouldBeSkipped = params.disabledItemsFocusable ? false : instance.isNodeDisabled(mapNodeId);
+      const shouldBeSkipped = params.disabledItemsFocusable ? false : instance.isNodeDisabled(mapItemId);
       if (visible && !shouldBeSkipped) {
-        firstCharIds.push(mapNodeId);
-        firstChars.push(firstCharMap.current[mapNodeId]);
+        firstCharIds.push(mapItemId);
+        firstChars.push(firstCharMap.current[mapItemId]);
       }
     });
 
     // Get start index for search based on position of currentItem
-    start = firstCharIds.indexOf(nodeId) + 1;
+    start = firstCharIds.indexOf(itemId) + 1;
     if (start >= firstCharIds.length) {
       start = 0;
     }
@@ -81,21 +76,17 @@ export const useTreeViewKeyboardNavigation = ({
     }
     return null;
   };
-  const canToggleNodeSelection = nodeId => !params.disableSelection && !instance.isNodeDisabled(nodeId);
-  const canToggleNodeExpansion = nodeId => {
-    return !instance.isNodeDisabled(nodeId) && instance.isNodeExpandable(nodeId);
+  const canToggleItemSelection = itemId => !params.disableSelection && !instance.isNodeDisabled(itemId);
+  const canToggleItemExpansion = itemId => {
+    return !instance.isNodeDisabled(itemId) && instance.isNodeExpandable(itemId);
   };
 
   // ARIA specification: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboardinteraction
-  const createHandleKeyDown = otherHandlers => event => {
-    var _otherHandlers$onKeyD;
-    (_otherHandlers$onKeyD = otherHandlers.onKeyDown) == null || _otherHandlers$onKeyD.call(otherHandlers, event);
+  const handleItemKeyDown = (event, itemId) => {
     if (event.defaultMuiPrevented) {
       return;
     }
-
-    // If the tree is empty, there will be no focused node
-    if (event.altKey || event.currentTarget !== event.target || state.focusedNodeId == null) {
+    if (event.altKey || event.currentTarget !== event.target) {
       return;
     }
     const ctrlPressed = event.ctrlKey || event.metaKey;
@@ -104,17 +95,17 @@ export const useTreeViewKeyboardNavigation = ({
     // eslint-disable-next-line default-case
     switch (true) {
       // Select the node when pressing "Space"
-      case key === ' ' && canToggleNodeSelection(state.focusedNodeId):
+      case key === ' ' && canToggleItemSelection(itemId):
         {
           event.preventDefault();
           if (params.multiSelect && event.shiftKey) {
             instance.selectRange(event, {
-              end: state.focusedNodeId
+              end: itemId
             });
           } else if (params.multiSelect) {
-            instance.selectNode(event, state.focusedNodeId, true);
+            instance.selectNode(event, itemId, true);
           } else {
-            instance.selectNode(event, state.focusedNodeId);
+            instance.selectNode(event, itemId);
           }
           break;
         }
@@ -123,84 +114,87 @@ export const useTreeViewKeyboardNavigation = ({
       // If the focused node has no children, we select it.
       case key === 'Enter':
         {
-          if (canToggleNodeExpansion(state.focusedNodeId)) {
-            instance.toggleNodeExpansion(event, state.focusedNodeId);
+          if (canToggleItemExpansion(itemId)) {
+            instance.toggleNodeExpansion(event, itemId);
             event.preventDefault();
-          } else if (canToggleNodeSelection(state.focusedNodeId)) {
+          } else if (canToggleItemSelection(itemId)) {
             if (params.multiSelect) {
               event.preventDefault();
-              instance.selectNode(event, state.focusedNodeId, true);
-            } else if (!instance.isNodeSelected(state.focusedNodeId)) {
-              instance.selectNode(event, state.focusedNodeId);
+              instance.selectNode(event, itemId, true);
+            } else if (!instance.isNodeSelected(itemId)) {
+              instance.selectNode(event, itemId);
               event.preventDefault();
             }
           }
           break;
         }
 
-      // Focus the next focusable node
+      // Focus the next focusable item
       case key === 'ArrowDown':
         {
-          const nextNode = getNextNode(instance, state.focusedNodeId);
-          if (nextNode) {
+          const nextItem = getNextNode(instance, itemId);
+          if (nextItem) {
             event.preventDefault();
-            instance.focusItem(event, nextNode);
+            instance.focusItem(event, nextItem);
 
             // Multi select behavior when pressing Shift + ArrowDown
-            // Toggles the selection state of the next node
-            if (params.multiSelect && event.shiftKey && canToggleNodeSelection(nextNode)) {
+            // Toggles the selection state of the next item
+            if (params.multiSelect && event.shiftKey && canToggleItemSelection(nextItem)) {
               instance.selectRange(event, {
-                end: nextNode,
-                current: state.focusedNodeId
+                end: nextItem,
+                current: itemId
               }, true);
             }
           }
           break;
         }
 
-      // Focuses the previous focusable node
+      // Focuses the previous focusable item
       case key === 'ArrowUp':
         {
-          const previousNode = getPreviousNode(instance, state.focusedNodeId);
-          if (previousNode) {
+          const previousItem = getPreviousNode(instance, itemId);
+          if (previousItem) {
             event.preventDefault();
-            instance.focusItem(event, previousNode);
+            instance.focusItem(event, previousItem);
 
             // Multi select behavior when pressing Shift + ArrowUp
-            // Toggles the selection state of the previous node
-            if (params.multiSelect && event.shiftKey && canToggleNodeSelection(previousNode)) {
+            // Toggles the selection state of the previous item
+            if (params.multiSelect && event.shiftKey && canToggleItemSelection(previousItem)) {
               instance.selectRange(event, {
-                end: previousNode,
-                current: state.focusedNodeId
+                end: previousItem,
+                current: itemId
               }, true);
             }
           }
           break;
         }
 
-      // If the focused node is expanded, we move the focus to its first child
-      // If the focused node is collapsed and has children, we expand it
+      // If the focused item is expanded, we move the focus to its first child
+      // If the focused item is collapsed and has children, we expand it
       case key === 'ArrowRight' && !isRTL || key === 'ArrowLeft' && isRTL:
         {
-          if (instance.isNodeExpanded(state.focusedNodeId)) {
-            instance.focusItem(event, getNextNode(instance, state.focusedNodeId));
-            event.preventDefault();
-          } else if (canToggleNodeExpansion(state.focusedNodeId)) {
-            instance.toggleNodeExpansion(event, state.focusedNodeId);
+          if (instance.isNodeExpanded(itemId)) {
+            const nextNodeId = getNextNode(instance, itemId);
+            if (nextNodeId) {
+              instance.focusItem(event, nextNodeId);
+              event.preventDefault();
+            }
+          } else if (canToggleItemExpansion(itemId)) {
+            instance.toggleNodeExpansion(event, itemId);
             event.preventDefault();
           }
           break;
         }
 
-      // If the focused node is expanded, we collapse it
-      // If the focused node is collapsed and has a parent, we move the focus to this parent
+      // If the focused item is expanded, we collapse it
+      // If the focused item is collapsed and has a parent, we move the focus to this parent
       case key === 'ArrowLeft' && !isRTL || key === 'ArrowRight' && isRTL:
         {
-          if (canToggleNodeExpansion(state.focusedNodeId) && instance.isNodeExpanded(state.focusedNodeId)) {
-            instance.toggleNodeExpansion(event, state.focusedNodeId);
+          if (canToggleItemExpansion(itemId) && instance.isNodeExpanded(itemId)) {
+            instance.toggleNodeExpansion(event, itemId);
             event.preventDefault();
           } else {
-            const parent = instance.getNode(state.focusedNodeId).parentId;
+            const parent = instance.getNode(itemId).parentId;
             if (parent) {
               instance.focusItem(event, parent);
               event.preventDefault();
@@ -216,31 +210,31 @@ export const useTreeViewKeyboardNavigation = ({
 
           // Multi select behavior when pressing Ctrl + Shift + Home
           // Selects the focused node and all nodes up to the first node.
-          if (canToggleNodeSelection(state.focusedNodeId) && params.multiSelect && ctrlPressed && event.shiftKey) {
-            instance.rangeSelectToFirst(event, state.focusedNodeId);
+          if (canToggleItemSelection(itemId) && params.multiSelect && ctrlPressed && event.shiftKey) {
+            instance.rangeSelectToFirst(event, itemId);
           }
           event.preventDefault();
           break;
         }
 
-      // Focuses the last node in the tree
+      // Focuses the last item in the tree
       case key === 'End':
         {
           instance.focusItem(event, getLastNode(instance));
 
           // Multi select behavior when pressing Ctrl + Shirt + End
-          // Selects the focused node and all the nodes down to the last node.
-          if (canToggleNodeSelection(state.focusedNodeId) && params.multiSelect && ctrlPressed && event.shiftKey) {
-            instance.rangeSelectToLast(event, state.focusedNodeId);
+          // Selects the focused item and all the items down to the last item.
+          if (canToggleItemSelection(itemId) && params.multiSelect && ctrlPressed && event.shiftKey) {
+            instance.rangeSelectToLast(event, itemId);
           }
           event.preventDefault();
           break;
         }
 
-      // Expand all siblings that are at the same level as the focused node
+      // Expand all siblings that are at the same level as the focused item
       case key === '*':
         {
-          instance.expandAllSiblings(event, state.focusedNodeId);
+          instance.expandAllSiblings(event, itemId);
           event.preventDefault();
           break;
         }
@@ -261,7 +255,7 @@ export const useTreeViewKeyboardNavigation = ({
       // TODO: Support typing multiple characters
       case !ctrlPressed && !event.shiftKey && isPrintableCharacter(key):
         {
-          const matchingNode = getFirstMatchingNode(state.focusedNodeId, key);
+          const matchingNode = getFirstMatchingItem(itemId, key);
           if (matchingNode != null) {
             instance.focusItem(event, matchingNode);
             event.preventDefault();
@@ -270,10 +264,9 @@ export const useTreeViewKeyboardNavigation = ({
         }
     }
   };
-  return {
-    getRootProps: otherHandlers => ({
-      onKeyDown: createHandleKeyDown(otherHandlers)
-    })
-  };
+  populateInstance(instance, {
+    updateFirstCharMap,
+    handleItemKeyDown
+  });
 };
 useTreeViewKeyboardNavigation.params = {};

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

@@ -1,10 +1,13 @@
+import * as React from 'react';
 import { TreeViewPluginSignature } from '../../models';
 import { UseTreeViewNodesSignature } from '../useTreeViewNodes';
 import { UseTreeViewSelectionSignature } from '../useTreeViewSelection';
 import { UseTreeViewFocusSignature } from '../useTreeViewFocus';
 import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion';
+import { MuiCancellableEvent } from '../../models/MuiCancellableEvent';
 export interface UseTreeViewKeyboardNavigationInstance {
     updateFirstCharMap: (updater: (map: TreeViewFirstCharMap) => TreeViewFirstCharMap) => void;
+    handleItemKeyDown: (event: React.KeyboardEvent<HTMLElement> & MuiCancellableEvent, itemId: string) => void;
 }
 export type UseTreeViewKeyboardNavigationSignature = TreeViewPluginSignature<{
     instance: UseTreeViewKeyboardNavigationInstance;
@@ -16,5 +19,5 @@ export type UseTreeViewKeyboardNavigationSignature = TreeViewPluginSignature<{
     ];
 }>;
 export type TreeViewFirstCharMap = {
-    [nodeId: string]: string;
+    [itemId: string]: string;
 };