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

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,9 +1,9 @@
 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 getLastNode: (instance: TreeViewInstance<[UseTreeViewExpansionSignature, UseTreeViewNodesSignature]>) => string;
-export declare const getFirstNode: (instance: TreeViewInstance<[UseTreeViewNodesSignature]>) => string;
+import type { UseTreeViewItemsSignature } from '../plugins/useTreeViewItems';
+export declare const getPreviousItem: (instance: TreeViewInstance<[UseTreeViewItemsSignature, UseTreeViewExpansionSignature]>, itemId: string) => string | null;
+export declare const getNextItem: (instance: TreeViewInstance<[UseTreeViewExpansionSignature, UseTreeViewItemsSignature]>, itemId: string) => string | null;
+export declare const getLastItem: (instance: TreeViewInstance<[UseTreeViewExpansionSignature, UseTreeViewItemsSignature]>) => string;
+export declare const getFirstItem: (instance: TreeViewInstance<[UseTreeViewItemsSignature]>) => string;
 export declare const populateInstance: <T extends TreeViewAnyPluginSignature>(instance: TreeViewUsedInstance<T>, methods: T["instance"]) => void;
 export declare const populatePublicAPI: <T extends TreeViewAnyPluginSignature>(publicAPI: TreeViewUsedPublicAPI<T>, methods: T["publicAPI"]) => void;

package/internals/useTreeView/useTreeView.utils.js

@@ -1,22 +1,22 @@
-export const getPreviousNode = (instance, nodeId) => {
-  const node = instance.getNode(nodeId);
+export const getPreviousItem = (instance, itemId) => {
+  const node = instance.getNode(itemId);
   const siblings = instance.getNavigableChildrenIds(node.parentId);
-  const nodeIndex = siblings.indexOf(nodeId);
-  if (nodeIndex === 0) {
+  const itemIndex = siblings.indexOf(itemId);
+  if (itemIndex === 0) {
     return node.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.isItemExpanded(currentItem) && instance.getNavigableChildrenIds(currentItem).length > 0) {
+    currentItem = instance.getNavigableChildrenIds(currentItem).pop();
   }
-  return currentNode;
+  return currentItem;
 };
-export const getNextNode = (instance, nodeId) => {
+export const getNextItem = (instance, itemId) => {
   // If expanded get first child
-  if (instance.isNodeExpanded(nodeId) && instance.getNavigableChildrenIds(nodeId).length > 0) {
-    return instance.getNavigableChildrenIds(nodeId)[0];
+  if (instance.isItemExpanded(itemId) && instance.getNavigableChildrenIds(itemId).length > 0) {
+    return instance.getNavigableChildrenIds(itemId)[0];
   }
-  let node = instance.getNode(nodeId);
+  let node = instance.getNode(itemId);
   while (node != null) {
     // Try to get next sibling
     const siblings = instance.getNavigableChildrenIds(node.parentId);
@@ -30,14 +30,14 @@ export const getNextNode = (instance, nodeId) => {
   }
   return null;
 };
-export const getLastNode = instance => {
-  let lastNode = instance.getNavigableChildrenIds(null).pop();
-  while (instance.isNodeExpanded(lastNode)) {
-    lastNode = instance.getNavigableChildrenIds(lastNode).pop();
+export const getLastItem = instance => {
+  let lastItem = instance.getNavigableChildrenIds(null).pop();
+  while (instance.isItemExpanded(lastItem)) {
+    lastItem = instance.getNavigableChildrenIds(lastItem).pop();
   }
-  return lastNode;
+  return lastItem;
 };
-export const getFirstNode = instance => instance.getNavigableChildrenIds(null)[0];
+export const getFirstItem = instance => instance.getNavigableChildrenIds(null)[0];
 export const populateInstance = (instance, methods) => {
   Object.assign(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/']);
 
 /**
  *
@@ -104,10 +104,10 @@ const RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps
     getSlotProps: getRootProps,
     ownerState: props
   });
-  const nodesToRender = instance.getNodesToRender();
-  const renderNode = ({
+  const itemsToRender = instance.getItemsToRender();
+  const renderItem = ({
     label,
-    nodeId,
+    itemId,
     id,
     children
   }) => {
@@ -116,14 +116,14 @@ const RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps
       slotProps: slotProps,
       label: label,
       id: id,
-      nodeId: nodeId,
-      children: children?.map(renderNode)
-    }, nodeId);
+      itemId: itemId,
+      children: children?.map(renderItem)
+    }, itemId);
   };
   return /*#__PURE__*/_jsx(TreeViewProvider, {
     value: contextValue,
     children: /*#__PURE__*/_jsx(Root, _extends({}, rootProps, {
-      children: nodesToRender.map(renderNode)
+      children: itemsToRender.map(renderItem)
     }))
   });
 });

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/SimpleTreeView/SimpleTreeView.plugins.js

@@ -1,5 +1,5 @@
 import { DEFAULT_TREE_VIEW_PLUGINS } from '../internals/plugins/defaultPlugins';
-import { useTreeViewJSXNodes } from '../internals/plugins/useTreeViewJSXNodes';
-export const SIMPLE_TREE_VIEW_PLUGINS = [...DEFAULT_TREE_VIEW_PLUGINS, useTreeViewJSXNodes];
+import { useTreeViewJSXItems } from '../internals/plugins/useTreeViewJSXItems';
+export const SIMPLE_TREE_VIEW_PLUGINS = [...DEFAULT_TREE_VIEW_PLUGINS, useTreeViewJSXItems];
 
 // We can't infer this type from the plugin, otherwise we would lose the generics.

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.isItemExpanded(itemId);
+  const focused = instance.isItemFocused(itemId);
+  const selected = instance.isItemSelected(itemId);
+  const disabled = instance.isItemDisabled(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 };

package/modern/TreeItem/useTreeItemState.js

@@ -1,45 +1,45 @@
 import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
-export function useTreeItemState(nodeId) {
+export function useTreeItemState(itemId) {
   const {
     instance,
     selection: {
       multiSelect
     }
   } = useTreeViewContext();
-  const expandable = instance.isNodeExpandable(nodeId);
-  const expanded = instance.isNodeExpanded(nodeId);
-  const focused = instance.isNodeFocused(nodeId);
-  const selected = instance.isNodeSelected(nodeId);
-  const disabled = instance.isNodeDisabled(nodeId);
+  const expandable = instance.isItemExpandable(itemId);
+  const expanded = instance.isItemExpanded(itemId);
+  const focused = instance.isItemFocused(itemId);
+  const selected = instance.isItemSelected(itemId);
+  const disabled = instance.isItemDisabled(itemId);
   const handleExpansion = event => {
     if (!disabled) {
       if (!focused) {
-        instance.focusItem(event, nodeId);
+        instance.focusItem(event, itemId);
       }
       const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
 
       // If already expanded and trying to toggle selection don't close
-      if (expandable && !(multiple && instance.isNodeExpanded(nodeId))) {
-        instance.toggleNodeExpansion(event, nodeId);
+      if (expandable && !(multiple && instance.isItemExpanded(itemId))) {
+        instance.toggleItemExpansion(event, itemId);
       }
     }
   };
   const handleSelection = event => {
     if (!disabled) {
       if (!focused) {
-        instance.focusItem(event, nodeId);
+        instance.focusItem(event, itemId);
       }
       const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
       if (multiple) {
         if (event.shiftKey) {
           instance.selectRange(event, {
-            end: nodeId
+            end: itemId
           });
         } else {
-          instance.selectNode(event, nodeId, true);
+          instance.selectItem(event, itemId, true);
         }
       } else {
-        instance.selectNode(event, nodeId);
+        instance.selectItem(event, itemId);
       }
     }
   };

package/modern/TreeItem2/TreeItem2.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["id", "nodeId", "label", "disabled", "children", "slots", "slotProps"];
+const _excluded = ["id", "itemId", "label", "disabled", "children", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -165,7 +165,7 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
   });
   const {
       id,
-      nodeId,
+      itemId,
       label,
       disabled,
       children,
@@ -182,7 +182,7 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
     status
   } = useTreeItem2({
     id,
-    nodeId,
+    itemId,
     children,
     label,
     disabled
@@ -234,7 +234,7 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
     className: classes.groupTransition
   });
   return /*#__PURE__*/_jsx(TreeItem2Provider, {
-    nodeId: nodeId,
+    itemId: itemId,
     children: /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, {
       children: [/*#__PURE__*/_jsxs(Content, _extends({}, contentProps, {
         children: [/*#__PURE__*/_jsx(IconContainer, _extends({}, iconContainerProps, {
@@ -265,23 +265,23 @@ process.env.NODE_ENV !== "production" ? TreeItem2.propTypes = {
   classes: PropTypes.object,
   className: PropTypes.string,
   /**
-   * If `true`, the node is disabled.
+   * If `true`, the item is disabled.
    * @default false
    */
   disabled: PropTypes.bool,
   /**
-   * The id attribute of the node. If not provided, it will be generated.
+   * The id attribute of the item. If not provided, it will be generated.
    */
   id: PropTypes.string,
   /**
-   * The label of the node.
+   * The id of the item.
+   * Must be unique.
    */
-  label: PropTypes.node,
+  itemId: PropTypes.string.isRequired,
   /**
-   * The id of the node.
-   * Must be unique.
+   * The label of the item.
    */
-  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/TreeItem2Provider/TreeItem2Provider.js

@@ -3,14 +3,14 @@ import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewCon
 function TreeItem2Provider(props) {
   const {
     children,
-    nodeId
+    itemId
   } = props;
   const {
     wrapItem
   } = useTreeViewContext();
   return wrapItem({
     children,
-    nodeId
+    itemId
   });
 }
 TreeItem2Provider.propTypes = {
@@ -19,6 +19,6 @@ TreeItem2Provider.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   children: PropTypes.node,
-  nodeId: PropTypes.string.isRequired
+  itemId: PropTypes.string.isRequired
 };
 export { TreeItem2Provider };

package/modern/TreeView/TreeView.js

@@ -30,7 +30,7 @@ const warn = () => {
 
 /**
  * This component has been deprecated in favor of the new `SimpleTreeView` component.
- * You can have a look at how to migrate to the new component in the v7 [migration guide](https://next.mui.com/x/migration/migration-tree-view-v6/#use-simpletreeview-instead-of-treeview)
+ * You can have a look at how to migrate to the new component in the v7 [migration guide](https://mui.com/x/migration/migration-tree-view-v6/#use-simpletreeview-instead-of-treeview)
  *
  * Demos:
  *

package/modern/hooks/useTreeItem2Utils/useTreeItem2Utils.js

@@ -1,6 +1,6 @@
 import { useTreeViewContext } from '../../internals/TreeViewProvider/useTreeViewContext';
 export const useTreeItem2Utils = ({
-  nodeId,
+  itemId,
   children
 }) => {
   const {
@@ -11,23 +11,23 @@ export const useTreeItem2Utils = ({
   } = useTreeViewContext();
   const status = {
     expandable: Boolean(Array.isArray(children) ? children.length : children),
-    expanded: instance.isNodeExpanded(nodeId),
-    focused: instance.isNodeFocused(nodeId),
-    selected: instance.isNodeSelected(nodeId),
-    disabled: instance.isNodeDisabled(nodeId)
+    expanded: instance.isItemExpanded(itemId),
+    focused: instance.isItemFocused(itemId),
+    selected: instance.isItemSelected(itemId),
+    disabled: instance.isItemDisabled(itemId)
   };
   const handleExpansion = event => {
     if (status.disabled) {
       return;
     }
     if (!status.focused) {
-      instance.focusItem(event, nodeId);
+      instance.focusItem(event, itemId);
     }
     const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
 
     // If already expanded and trying to toggle selection don't close
-    if (status.expandable && !(multiple && instance.isNodeExpanded(nodeId))) {
-      instance.toggleNodeExpansion(event, nodeId);
+    if (status.expandable && !(multiple && instance.isItemExpanded(itemId))) {
+      instance.toggleItemExpansion(event, itemId);
     }
   };
   const handleSelection = event => {
@@ -35,19 +35,19 @@ export const useTreeItem2Utils = ({
       return;
     }
     if (!status.focused) {
-      instance.focusItem(event, nodeId);
+      instance.focusItem(event, itemId);
     }
     const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
     if (multiple) {
       if (event.shiftKey) {
         instance.selectRange(event, {
-          end: nodeId
+          end: itemId
         });
       } else {
-        instance.selectNode(event, nodeId, true);
+        instance.selectItem(event, itemId, true);
       }
     } else {
-      instance.selectNode(event, nodeId);
+      instance.selectItem(event, itemId);
     }
   };
   const interactions = {

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v7.0.0-beta.7
+ * @mui/x-tree-view v7.1.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/TreeViewProvider/DescendantProvider.js

@@ -46,7 +46,7 @@ const noop = () => {};
  * We use this for focus management, keyboard navigation, and typeahead
  * functionality for some components.
  *
- * The hook accepts the element node
+ * The hook accepts the element item
  *
  * Our main goals with this are:
  *   1) maximum composability,

package/modern/internals/plugins/defaultPlugins.js

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