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

package/internals/plugins/useTreeViewNodes/useTreeViewNodes.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import useEventCallback from '@mui/utils/useEventCallback';
 import { populateInstance, populatePublicAPI } from '../../useTreeView/useTreeView.utils';
 import { publishTreeViewEvent } from '../../utils/publishTreeViewEvent';
 const updateNodesState = ({
@@ -12,7 +11,6 @@ const updateNodesState = ({
   const nodeMap = {};
   const itemMap = {};
   const processItem = (item, index, parentId) => {
-    var _item$children, _item$children2;
     const id = getItemId ? getItemId(item) : item.id;
     if (id == null) {
       throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', 'An item was provided without id in the `items` prop:', JSON.stringify(item)].join('\n'));
@@ -30,13 +28,13 @@ const updateNodesState = ({
       index,
       parentId,
       idAttribute: undefined,
-      expandable: !!((_item$children = item.children) != null && _item$children.length),
+      expandable: !!item.children?.length,
       disabled: isItemDisabled ? isItemDisabled(item) : false
     };
     itemMap[id] = item;
     return {
       id,
-      children: (_item$children2 = item.children) == null ? void 0 : _item$children2.map((child, childIndex) => processItem(child, childIndex, id))
+      children: item.children?.map((child, childIndex) => processItem(child, childIndex, id))
     };
   };
   const nodeTree = items.map((item, itemIndex) => processItem(item, itemIndex, null));
@@ -53,34 +51,34 @@ export const useTreeViewNodes = ({
   state,
   setState
 }) => {
-  const getNode = React.useCallback(nodeId => state.nodes.nodeMap[nodeId], [state.nodes.nodeMap]);
-  const getItem = React.useCallback(nodeId => state.nodes.itemMap[nodeId], [state.nodes.itemMap]);
-  const isNodeDisabled = React.useCallback(nodeId => {
-    if (nodeId == null) {
+  const getNode = React.useCallback(itemId => state.nodes.nodeMap[itemId], [state.nodes.nodeMap]);
+  const getItem = React.useCallback(itemId => state.nodes.itemMap[itemId], [state.nodes.itemMap]);
+  const isNodeDisabled = React.useCallback(itemId => {
+    if (itemId == null) {
       return false;
     }
-    let node = instance.getNode(nodeId);
+    let item = instance.getNode(itemId);
 
-    // This can be called before the node has been added to the node map.
-    if (!node) {
+    // This can be called before the item has been added to the node map.
+    if (!item) {
       return false;
     }
-    if (node.disabled) {
+    if (item.disabled) {
       return true;
     }
-    while (node.parentId != null) {
-      node = instance.getNode(node.parentId);
-      if (node.disabled) {
+    while (item.parentId != null) {
+      item = instance.getNode(item.parentId);
+      if (item.disabled) {
         return true;
       }
     }
     return false;
   }, [instance]);
-  const getChildrenIds = useEventCallback(nodeId => Object.values(state.nodes.nodeMap).filter(node => node.parentId === nodeId).sort((a, b) => a.index - b.index).map(child => child.id));
-  const getNavigableChildrenIds = nodeId => {
-    let childrenIds = instance.getChildrenIds(nodeId);
+  const getChildrenIds = React.useCallback(itemId => Object.values(state.nodes.nodeMap).filter(item => item.parentId === itemId).sort((a, b) => a.index - b.index).map(child => child.id), [state.nodes.nodeMap]);
+  const getNavigableChildrenIds = itemId => {
+    let childrenIds = instance.getChildrenIds(itemId);
     if (!params.disabledItemsFocusable) {
-      childrenIds = childrenIds.filter(node => !instance.isNodeDisabled(node));
+      childrenIds = childrenIds.filter(item => !instance.isNodeDisabled(item));
     }
     return childrenIds;
   };
@@ -105,19 +103,19 @@ export const useTreeViewNodes = ({
     });
   }, [instance, setState, params.items, params.isItemDisabled, params.getItemId, params.getItemLabel]);
   const getNodesToRender = () => {
-    const getPropsFromNodeId = ({
+    const getPropsFromItemId = ({
       id,
       children
     }) => {
       const node = state.nodes.nodeMap[id];
       return {
         label: node.label,
-        nodeId: node.id,
+        itemId: node.id,
         id: node.idAttribute,
-        children: children == null ? void 0 : children.map(getPropsFromNodeId)
+        children: children?.map(getPropsFromItemId)
       };
     };
-    return state.nodes.nodeTree.map(getPropsFromNodeId);
+    return state.nodes.nodeTree.map(getPropsFromItemId);
   };
   populateInstance(instance, {
     getNode,
@@ -144,12 +142,9 @@ useTreeViewNodes.getInitialState = params => ({
     getItemLabel: params.getItemLabel
   })
 });
-useTreeViewNodes.getDefaultizedParams = params => {
-  var _params$disabledItems;
-  return _extends({}, params, {
-    disabledItemsFocusable: (_params$disabledItems = params.disabledItemsFocusable) != null ? _params$disabledItems : false
-  });
-};
+useTreeViewNodes.getDefaultizedParams = params => _extends({}, params, {
+  disabledItemsFocusable: params.disabledItemsFocusable ?? false
+});
 useTreeViewNodes.params = {
   disabledItemsFocusable: true,
   items: true,

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

@@ -2,17 +2,17 @@ import { TreeViewNode, DefaultizedProps, TreeViewPluginSignature } from '../../m
 import { TreeViewItemId } from '../../../models';
 interface TreeViewNodeProps {
     label: string;
-    nodeId: string;
+    itemId: string;
     id: string | undefined;
     children?: TreeViewNodeProps[];
 }
 export interface UseTreeViewNodesInstance<R extends {}> {
-    getNode: (nodeId: string) => TreeViewNode;
-    getItem: (nodeId: string) => R;
+    getNode: (itemId: string) => TreeViewNode;
+    getItem: (itemId: string) => R;
     getNodesToRender: () => TreeViewNodeProps[];
-    getChildrenIds: (nodeId: string | null) => string[];
-    getNavigableChildrenIds: (nodeId: string | null) => string[];
-    isNodeDisabled: (nodeId: string | null) => nodeId is string;
+    getChildrenIds: (itemId: string | null) => string[];
+    getNavigableChildrenIds: (itemId: string | null) => string[];
+    isNodeDisabled: (itemId: string | null) => itemId is string;
 }
 export interface UseTreeViewNodesPublicAPI<R extends {}> extends Pick<UseTreeViewNodesInstance<R>, 'getItem'> {
 }
@@ -57,13 +57,13 @@ interface UseTreeViewNodesEventLookup {
         };
     };
 }
-export interface TreeViewNodeIdAndChildren {
+export interface TreeViewItemIdAndChildren {
     id: TreeViewItemId;
-    children?: TreeViewNodeIdAndChildren[];
+    children?: TreeViewItemIdAndChildren[];
 }
 export interface UseTreeViewNodesState<R extends {}> {
     nodes: {
-        nodeTree: TreeViewNodeIdAndChildren[];
+        nodeTree: TreeViewItemIdAndChildren[];
         nodeMap: TreeViewNodeMap;
         itemMap: TreeViewItemMap<R>;
     };
@@ -80,9 +80,9 @@ export type UseTreeViewNodesSignature = TreeViewPluginSignature<{
     contextValue: UseTreeViewNodesContextValue;
 }>;
 export type TreeViewNodeMap = {
-    [nodeId: string]: TreeViewNode;
+    [itemId: string]: TreeViewNode;
 };
 export type TreeViewItemMap<R extends {}> = {
-    [nodeId: string]: R;
+    [itemId: string]: R;
 };
 export {};

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -35,26 +35,26 @@ export const useTreeViewSelection = ({
     }
     models.selectedItems.setControlledValue(newSelectedItems);
   };
-  const isNodeSelected = nodeId => Array.isArray(models.selectedItems.value) ? models.selectedItems.value.indexOf(nodeId) !== -1 : models.selectedItems.value === nodeId;
-  const selectNode = (event, nodeId, multiple = false) => {
+  const isNodeSelected = itemId => Array.isArray(models.selectedItems.value) ? models.selectedItems.value.indexOf(itemId) !== -1 : models.selectedItems.value === itemId;
+  const selectNode = (event, itemId, multiple = false) => {
     if (params.disableSelection) {
       return;
     }
     if (multiple) {
       if (Array.isArray(models.selectedItems.value)) {
         let newSelected;
-        if (models.selectedItems.value.indexOf(nodeId) !== -1) {
-          newSelected = models.selectedItems.value.filter(id => id !== nodeId);
+        if (models.selectedItems.value.indexOf(itemId) !== -1) {
+          newSelected = models.selectedItems.value.filter(id => id !== itemId);
         } else {
-          newSelected = [nodeId].concat(models.selectedItems.value);
+          newSelected = [itemId].concat(models.selectedItems.value);
         }
         setSelectedItems(event, newSelected);
       }
     } else {
-      const newSelected = params.multiSelect ? [nodeId] : nodeId;
+      const newSelected = params.multiSelect ? [itemId] : itemId;
       setSelectedItems(event, newSelected);
     }
-    lastSelectedNode.current = nodeId;
+    lastSelectedNode.current = itemId;
     lastSelectionWasRange.current = false;
     currentRangeSelection.current = [];
   };
@@ -135,21 +135,21 @@ export const useTreeViewSelection = ({
     }
     lastSelectionWasRange.current = true;
   };
-  const rangeSelectToFirst = (event, nodeId) => {
+  const rangeSelectToFirst = (event, itemId) => {
     if (!lastSelectedNode.current) {
-      lastSelectedNode.current = nodeId;
+      lastSelectedNode.current = itemId;
     }
-    const start = lastSelectionWasRange.current ? lastSelectedNode.current : nodeId;
+    const start = lastSelectionWasRange.current ? lastSelectedNode.current : itemId;
     instance.selectRange(event, {
       start,
       end: getFirstNode(instance)
     });
   };
-  const rangeSelectToLast = (event, nodeId) => {
+  const rangeSelectToLast = (event, itemId) => {
     if (!lastSelectedNode.current) {
-      lastSelectedNode.current = nodeId;
+      lastSelectedNode.current = itemId;
     }
-    const start = lastSelectionWasRange.current ? lastSelectedNode.current : nodeId;
+    const start = lastSelectionWasRange.current ? lastSelectedNode.current : itemId;
     instance.selectRange(event, {
       start,
       end: getLastNode(instance)
@@ -179,14 +179,11 @@ useTreeViewSelection.models = {
   }
 };
 const DEFAULT_SELECTED_NODES = [];
-useTreeViewSelection.getDefaultizedParams = params => {
-  var _params$disableSelect, _params$multiSelect, _params$defaultSelect;
-  return _extends({}, params, {
-    disableSelection: (_params$disableSelect = params.disableSelection) != null ? _params$disableSelect : false,
-    multiSelect: (_params$multiSelect = params.multiSelect) != null ? _params$multiSelect : false,
-    defaultSelectedItems: (_params$defaultSelect = params.defaultSelectedItems) != null ? _params$defaultSelect : params.multiSelect ? DEFAULT_SELECTED_NODES : null
-  });
-};
+useTreeViewSelection.getDefaultizedParams = params => _extends({}, params, {
+  disableSelection: params.disableSelection ?? false,
+  multiSelect: params.multiSelect ?? false,
+  defaultSelectedItems: params.defaultSelectedItems ?? (params.multiSelect ? DEFAULT_SELECTED_NODES : null)
+});
 useTreeViewSelection.params = {
   disableSelection: true,
   multiSelect: true,

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

@@ -3,11 +3,11 @@ import type { DefaultizedProps, TreeViewItemRange, TreeViewPluginSignature } fro
 import { UseTreeViewNodesSignature } from '../useTreeViewNodes';
 import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion';
 export interface UseTreeViewSelectionInstance {
-    isNodeSelected: (nodeId: string) => boolean;
-    selectNode: (event: React.SyntheticEvent, nodeId: string, multiple?: boolean) => void;
+    isNodeSelected: (itemId: string) => boolean;
+    selectNode: (event: React.SyntheticEvent, itemId: string, multiple?: boolean) => void;
     selectRange: (event: React.SyntheticEvent, nodes: TreeViewItemRange, stacked?: boolean) => void;
-    rangeSelectToFirst: (event: React.KeyboardEvent<HTMLUListElement>, nodeId: string) => void;
-    rangeSelectToLast: (event: React.KeyboardEvent<HTMLUListElement>, nodeId: string) => void;
+    rangeSelectToFirst: (event: React.KeyboardEvent, itemId: string) => void;
+    rangeSelectToLast: (event: React.KeyboardEvent, itemId: string) => void;
 }
 type TreeViewSelectionValue<Multiple extends boolean | undefined> = Multiple extends true ? string[] : string | null;
 export interface UseTreeViewSelectionParameters<Multiple extends boolean | undefined> {

package/internals/useTreeView/useTreeView.js

@@ -73,10 +73,10 @@ export const useTreeView = inParams => {
         rootRef: finalRootRef,
         contentRef: finalContentRef
       });
-      if (itemPluginResponse != null && itemPluginResponse.rootRef) {
+      if (itemPluginResponse?.rootRef) {
         finalRootRef = itemPluginResponse.rootRef;
       }
-      if (itemPluginResponse != null && itemPluginResponse.contentRef) {
+      if (itemPluginResponse?.contentRef) {
         finalContentRef = itemPluginResponse.contentRef;
       }
     });
@@ -87,13 +87,13 @@ export const useTreeView = inParams => {
   };
   const itemWrappers = plugins.map(plugin => plugin.wrapItem).filter(wrapItem => !!wrapItem);
   contextValue.wrapItem = ({
-    nodeId,
+    itemId,
     children
   }) => {
     let finalChildren = children;
     itemWrappers.forEach(itemWrapper => {
       finalChildren = itemWrapper({
-        nodeId,
+        itemId,
         children: finalChildren
       });
     });
@@ -101,8 +101,7 @@ export const useTreeView = inParams => {
   };
   const getRootProps = (otherHandlers = {}) => {
     const rootProps = _extends({
-      role: 'tree',
-      tabIndex: 0
+      role: 'tree'
     }, otherHandlers, {
       ref: handleRootRef
     });

package/internals/useTreeView/useTreeView.utils.d.ts

@@ -1,8 +1,8 @@
 import { TreeViewAnyPluginSignature, TreeViewInstance, TreeViewUsedInstance, TreeViewUsedPublicAPI } from '../models';
 import type { UseTreeViewExpansionSignature } from '../plugins/useTreeViewExpansion';
 import type { UseTreeViewNodesSignature } from '../plugins/useTreeViewNodes';
-export declare const getPreviousNode: (instance: TreeViewInstance<[UseTreeViewNodesSignature, UseTreeViewExpansionSignature]>, nodeId: string) => string | null;
-export declare const getNextNode: (instance: TreeViewInstance<[UseTreeViewExpansionSignature, UseTreeViewNodesSignature]>, nodeId: string) => string | null;
+export declare const getPreviousNode: (instance: TreeViewInstance<[UseTreeViewNodesSignature, UseTreeViewExpansionSignature]>, itemId: string) => string | null;
+export declare const getNextNode: (instance: TreeViewInstance<[UseTreeViewExpansionSignature, UseTreeViewNodesSignature]>, itemId: string) => string | null;
 export declare const getLastNode: (instance: TreeViewInstance<[UseTreeViewExpansionSignature, UseTreeViewNodesSignature]>) => string;
 export declare const getFirstNode: (instance: TreeViewInstance<[UseTreeViewNodesSignature]>) => string;
 export declare const populateInstance: <T extends TreeViewAnyPluginSignature>(instance: TreeViewUsedInstance<T>, methods: T["instance"]) => void;

package/internals/useTreeView/useTreeView.utils.js

@@ -1,41 +1,41 @@
-export const getPreviousNode = (instance, nodeId) => {
-  const node = instance.getNode(nodeId);
-  const siblings = instance.getNavigableChildrenIds(node.parentId);
-  const nodeIndex = siblings.indexOf(nodeId);
-  if (nodeIndex === 0) {
-    return node.parentId;
+export const getPreviousNode = (instance, itemId) => {
+  const item = instance.getNode(itemId);
+  const siblings = instance.getNavigableChildrenIds(item.parentId);
+  const itemIndex = siblings.indexOf(itemId);
+  if (itemIndex === 0) {
+    return item.parentId;
   }
-  let currentNode = siblings[nodeIndex - 1];
-  while (instance.isNodeExpanded(currentNode) && instance.getNavigableChildrenIds(currentNode).length > 0) {
-    currentNode = instance.getNavigableChildrenIds(currentNode).pop();
+  let currentItem = siblings[itemIndex - 1];
+  while (instance.isNodeExpanded(currentItem) && instance.getNavigableChildrenIds(currentItem).length > 0) {
+    currentItem = instance.getNavigableChildrenIds(currentItem).pop();
   }
-  return currentNode;
+  return currentItem;
 };
-export const getNextNode = (instance, nodeId) => {
+export const getNextNode = (instance, itemId) => {
   // If expanded get first child
-  if (instance.isNodeExpanded(nodeId) && instance.getNavigableChildrenIds(nodeId).length > 0) {
-    return instance.getNavigableChildrenIds(nodeId)[0];
+  if (instance.isNodeExpanded(itemId) && instance.getNavigableChildrenIds(itemId).length > 0) {
+    return instance.getNavigableChildrenIds(itemId)[0];
   }
-  let node = instance.getNode(nodeId);
-  while (node != null) {
+  let item = instance.getNode(itemId);
+  while (item != null) {
     // Try to get next sibling
-    const siblings = instance.getNavigableChildrenIds(node.parentId);
-    const nextSibling = siblings[siblings.indexOf(node.id) + 1];
+    const siblings = instance.getNavigableChildrenIds(item.parentId);
+    const nextSibling = siblings[siblings.indexOf(item.id) + 1];
     if (nextSibling) {
       return nextSibling;
     }
 
     // If the sibling does not exist, go up a level to the parent and try again.
-    node = instance.getNode(node.parentId);
+    item = instance.getNode(item.parentId);
   }
   return null;
 };
 export const getLastNode = instance => {
-  let lastNode = instance.getNavigableChildrenIds(null).pop();
-  while (instance.isNodeExpanded(lastNode)) {
-    lastNode = instance.getNavigableChildrenIds(lastNode).pop();
+  let lastItem = instance.getNavigableChildrenIds(null).pop();
+  while (instance.isNodeExpanded(lastItem)) {
+    lastItem = instance.getNavigableChildrenIds(lastItem).pop();
   }
-  return lastNode;
+  return lastItem;
 };
 export const getFirstNode = instance => instance.getNavigableChildrenIds(null)[0];
 export const populateInstance = (instance, methods) => {

package/internals/utils/extractPluginParamsFromProps.js

@@ -18,8 +18,8 @@ export const extractPluginParamsFromProps = _ref => {
   const pluginParams = {
     plugins,
     rootRef,
-    slots: slots != null ? slots : {},
-    slotProps: slotProps != null ? slotProps : {},
+    slots: slots ?? {},
+    slotProps: slotProps ?? {},
     apiRef
   };
   const otherProps = {};

package/internals/utils/utils.js

@@ -1,3 +1,4 @@
+// https://www.abeautifulsite.net/posts/finding-the-active-element-in-a-shadow-root/
 export const getActiveElement = (root = document) => {
   const activeEl = root.activeElement;
   if (!activeEl) {

package/modern/RichTreeView/RichTreeView.js

@@ -36,7 +36,7 @@ function WrappedTreeItem({
   slotProps,
   label,
   id,
-  nodeId,
+  itemId,
   children
 }) {
   const Item = slots?.item ?? TreeItem;
@@ -44,12 +44,12 @@ function WrappedTreeItem({
     elementType: Item,
     externalSlotProps: slotProps?.item,
     additionalProps: {
-      nodeId,
+      itemId,
       id,
       label
     },
     ownerState: {
-      nodeId,
+      itemId,
       label
     }
   });
@@ -57,7 +57,7 @@ function WrappedTreeItem({
     children: children
   }));
 }
-const childrenWarning = buildWarning(['MUI X: The `RichTreeView` component does not support JSX children.', 'If you want to add items, you need to use the `items` prop', 'Check the documentation for more details: https://next.mui.com/x/react-tree-view/rich-tree-view/items/']);
+const childrenWarning = buildWarning(['MUI X: The `RichTreeView` component does not support JSX children.', 'If you want to add items, you need to use the `items` prop', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/items/']);
 
 /**
  *
@@ -107,7 +107,7 @@ const RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps
   const nodesToRender = instance.getNodesToRender();
   const renderNode = ({
     label,
-    nodeId,
+    itemId,
     id,
     children
   }) => {
@@ -116,9 +116,9 @@ const RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps
       slotProps: slotProps,
       label: label,
       id: id,
-      nodeId: nodeId,
+      itemId: itemId,
       children: children?.map(renderNode)
-    }, nodeId);
+    }, itemId);
   };
   return /*#__PURE__*/_jsx(TreeViewProvider, {
     value: contextValue,

package/modern/SimpleTreeView/SimpleTreeView.js

@@ -31,7 +31,7 @@ export const SimpleTreeViewRoot = styled('ul', {
   outline: 0
 });
 const EMPTY_ITEMS = [];
-const itemsPropWarning = buildWarning(['MUI X: The `SimpleTreeView` component does not support the `items` prop.', 'If you want to add items, you need to pass them as JSX children.', 'Check the documentation for more details: https://next.mui.com/x/react-tree-view/simple-tree-view/items/']);
+const itemsPropWarning = buildWarning(['MUI X: The `SimpleTreeView` component does not support the `items` prop.', 'If you want to add items, you need to pass them as JSX children.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/simple-tree-view/items/']);
 
 /**
  *

package/modern/TreeItem/TreeItem.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "slots", "slotProps", "ContentComponent", "ContentProps", "nodeId", "id", "label", "onClick", "onMouseDown"],
+const _excluded = ["children", "className", "slots", "slotProps", "ContentComponent", "ContentProps", "itemId", "id", "label", "onClick", "onMouseDown", "onFocus", "onBlur", "onKeyDown"],
   _excluded2 = ["ownerState"],
   _excluded3 = ["ownerState"],
   _excluded4 = ["ownerState"];
@@ -157,11 +157,13 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
       slotProps: inSlotProps,
       ContentComponent = TreeItemContent,
       ContentProps,
-      nodeId,
+      itemId,
       id,
       label,
       onClick,
-      onMouseDown
+      onMouseDown,
+      onBlur,
+      onKeyDown
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -184,10 +186,10 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     return Boolean(reactChildren);
   };
   const expandable = isExpandable(children);
-  const expanded = instance.isNodeExpanded(nodeId);
-  const focused = instance.isNodeFocused(nodeId);
-  const selected = instance.isNodeSelected(nodeId);
-  const disabled = instance.isNodeDisabled(nodeId);
+  const expanded = instance.isNodeExpanded(itemId);
+  const focused = instance.isNodeFocused(itemId);
+  const selected = instance.isNodeSelected(itemId);
+  const disabled = instance.isNodeDisabled(itemId);
   const ownerState = _extends({}, props, {
     expanded,
     focused,
@@ -249,24 +251,29 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     /* single-selection trees unset aria-selected on un-selected items.
      *
      * If the tree does not support multiple selection, aria-selected
-     * is set to true for the selected node and it is not present on any other node in the tree.
+     * is set to true for the selected item and it is not present on any other item in the tree.
      * Source: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
      */
     ariaSelected = true;
   }
   function handleFocus(event) {
-    // DOM focus stays on the tree which manages focus with aria-activedescendant
-    if (event.target === event.currentTarget) {
-      instance.focusRoot();
-    }
     const canBeFocused = !disabled || disabledItemsFocusable;
     if (!focused && canBeFocused && event.currentTarget === event.target) {
-      instance.focusItem(event, nodeId);
+      instance.focusItem(event, itemId);
     }
   }
-  const idAttribute = instance.getTreeItemId(nodeId, id);
+  function handleBlur(event) {
+    onBlur?.(event);
+    instance.removeFocusedItem();
+  }
+  const handleKeyDown = event => {
+    onKeyDown?.(event);
+    instance.handleItemKeyDown(event, itemId);
+  };
+  const idAttribute = instance.getTreeItemId(itemId, id);
+  const tabIndex = instance.canItemBeTabbed(itemId) ? 0 : -1;
   return /*#__PURE__*/_jsx(TreeItem2Provider, {
-    nodeId: nodeId,
+    itemId: itemId,
     children: /*#__PURE__*/_jsxs(TreeItemRoot, _extends({
       className: clsx(classes.root, className),
       role: "treeitem",
@@ -274,10 +281,12 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
       "aria-selected": ariaSelected,
       "aria-disabled": disabled || undefined,
       id: idAttribute,
-      tabIndex: -1
+      tabIndex: tabIndex
     }, other, {
       ownerState: ownerState,
       onFocus: handleFocus,
+      onBlur: handleBlur,
+      onKeyDown: handleKeyDown,
       ref: handleRootRef,
       children: [/*#__PURE__*/_jsx(StyledTreeItemContent, _extends({
         as: ContentComponent,
@@ -291,7 +300,7 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
           label: classes.label
         },
         label: label,
-        nodeId: nodeId,
+        itemId: itemId,
         onClick: onClick,
         onMouseDown: onMouseDown,
         icon: icon,
@@ -323,7 +332,7 @@ process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
   classes: PropTypes.object,
   className: PropTypes.string,
   /**
-   * The component used for the content node.
+   * The component used to render the content of the item.
    * @default TreeItemContent
    */
   ContentComponent: elementTypeAcceptingRef,
@@ -337,13 +346,13 @@ process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
    */
   disabled: PropTypes.bool,
   /**
-   * The tree item label.
+   * The id of the item.
    */
-  label: PropTypes.node,
+  itemId: PropTypes.string.isRequired,
   /**
-   * The id of the node.
+   * The tree item label.
    */
-  nodeId: PropTypes.string.isRequired,
+  label: PropTypes.node,
   /**
    * This prop isn't supported.
    * Use the `onItemFocus` callback on the tree if you need to monitor a item's focus.

package/modern/TreeItem/TreeItemContent.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["classes", "className", "displayIcon", "expansionIcon", "icon", "label", "nodeId", "onClick", "onMouseDown"];
+const _excluded = ["classes", "className", "displayIcon", "expansionIcon", "icon", "label", "itemId", "onClick", "onMouseDown"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -18,7 +18,7 @@ const TreeItemContent = /*#__PURE__*/React.forwardRef(function TreeItemContent(p
       expansionIcon,
       icon: iconProp,
       label,
-      nodeId,
+      itemId,
       onClick,
       onMouseDown
     } = props,
@@ -31,7 +31,7 @@ const TreeItemContent = /*#__PURE__*/React.forwardRef(function TreeItemContent(p
     handleExpansion,
     handleSelection,
     preventSelection
-  } = useTreeItemState(nodeId);
+  } = useTreeItemState(itemId);
   const icon = iconProp || expansionIcon || displayIcon;
   const handleMouseDown = event => {
     preventSelection(event);
@@ -75,24 +75,24 @@ process.env.NODE_ENV !== "production" ? TreeItemContent.propTypes = {
   classes: PropTypes.object.isRequired,
   className: PropTypes.string,
   /**
-   * The icon to display next to the tree node's label. Either a parent or end icon.
+   * The icon to display next to the tree item's label. Either a parent or end icon.
    */
   displayIcon: PropTypes.node,
   /**
-   * The icon to display next to the tree node's label. Either an expansion or collapse icon.
+   * The icon to display next to the tree item's label. Either an expansion or collapse icon.
    */
   expansionIcon: PropTypes.node,
   /**
-   * The icon to display next to the tree node's label.
+   * The icon to display next to the tree item's label.
    */
   icon: PropTypes.node,
   /**
-   * The tree node label.
+   * The id of the item.
    */
-  label: PropTypes.node,
+  itemId: PropTypes.string.isRequired,
   /**
-   * The id of the node.
+   * The tree item label.
    */
-  nodeId: PropTypes.string.isRequired
+  label: PropTypes.node
 } : void 0;
 export { TreeItemContent };