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

package/modern/useTreeItem2/useTreeItem2.js

@@ -15,7 +15,7 @@ export const useTreeItem2 = parameters => {
   } = useTreeViewContext();
   const {
     id,
-    nodeId,
+    itemId,
     label,
     children,
     rootRef
@@ -28,25 +28,34 @@ export const useTreeItem2 = parameters => {
     interactions,
     status
   } = useTreeItem2Utils({
-    nodeId,
+    itemId,
     children
   });
-  const idAttribute = instance.getTreeItemId(nodeId, id);
+  const idAttribute = instance.getTreeItemId(itemId, id);
   const handleRootRef = useForkRef(rootRef, pluginRootRef);
   const createRootHandleFocus = otherHandlers => event => {
     otherHandlers.onFocus?.(event);
     if (event.defaultMuiPrevented) {
       return;
     }
-
-    // DOM focus stays on the tree which manages focus with aria-activedescendant
-    if (event.target === event.currentTarget) {
-      instance.focusRoot();
-    }
     const canBeFocused = !status.disabled || disabledItemsFocusable;
     if (!status.focused && canBeFocused && event.currentTarget === event.target) {
-      instance.focusItem(event, nodeId);
+      instance.focusItem(event, itemId);
+    }
+  };
+  const createRootHandleBlur = otherHandlers => event => {
+    otherHandlers.onBlur?.(event);
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    instance.removeFocusedItem();
+  };
+  const createRootHandleKeyDown = otherHandlers => event => {
+    otherHandlers.onKeyDown?.(event);
+    if (event.defaultMuiPrevented) {
+      return;
     }
+    instance.handleItemKeyDown(event, itemId);
   };
   const createContentHandleClick = otherHandlers => event => {
     otherHandlers.onClick?.(event);
@@ -76,7 +85,7 @@ export const useTreeItem2 = parameters => {
       /* 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;
@@ -84,13 +93,15 @@ export const useTreeItem2 = parameters => {
     return _extends({}, externalEventHandlers, {
       ref: handleRootRef,
       role: 'treeitem',
-      tabIndex: -1,
+      tabIndex: instance.canItemBeTabbed(itemId) ? 0 : -1,
       id: idAttribute,
       'aria-expanded': status.expandable ? status.expanded : undefined,
       'aria-selected': ariaSelected,
       'aria-disabled': status.disabled || undefined
     }, externalProps, {
-      onFocus: createRootHandleFocus(externalEventHandlers)
+      onFocus: createRootHandleFocus(externalEventHandlers),
+      onBlur: createRootHandleBlur(externalEventHandlers),
+      onKeyDown: createRootHandleKeyDown(externalEventHandlers)
     });
   };
   const getContentProps = (externalProps = {}) => {

package/node/RichTreeView/RichTreeView.js

@@ -45,7 +45,7 @@ function WrappedTreeItem({
   slotProps,
   label,
   id,
-  nodeId,
+  itemId,
   children
 }) {
   const Item = slots?.item ?? _TreeItem.TreeItem;
@@ -53,12 +53,12 @@ function WrappedTreeItem({
     elementType: Item,
     externalSlotProps: slotProps?.item,
     additionalProps: {
-      nodeId,
+      itemId,
       id,
       label
     },
     ownerState: {
-      nodeId,
+      itemId,
       label
     }
   });
@@ -66,7 +66,7 @@ function WrappedTreeItem({
     children: children
   }));
 }
-const childrenWarning = (0, _warning.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 = (0, _warning.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/']);
 
 /**
  *
@@ -113,10 +113,10 @@ const RichTreeView = exports.RichTreeView = /*#__PURE__*/React.forwardRef(functi
     getSlotProps: getRootProps,
     ownerState: props
   });
-  const nodesToRender = instance.getNodesToRender();
-  const renderNode = ({
+  const itemsToRender = instance.getItemsToRender();
+  const renderItem = ({
     label,
-    nodeId,
+    itemId,
     id,
     children
   }) => {
@@ -125,14 +125,14 @@ const RichTreeView = exports.RichTreeView = /*#__PURE__*/React.forwardRef(functi
       slotProps: slotProps,
       label: label,
       id: id,
-      nodeId: nodeId,
-      children: children?.map(renderNode)
-    }, nodeId);
+      itemId: itemId,
+      children: children?.map(renderItem)
+    }, itemId);
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewProvider.TreeViewProvider, {
     value: contextValue,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, rootProps, {
-      children: nodesToRender.map(renderNode)
+      children: itemsToRender.map(renderItem)
     }))
   });
 });

package/node/SimpleTreeView/SimpleTreeView.js

@@ -40,7 +40,7 @@ const SimpleTreeViewRoot = exports.SimpleTreeViewRoot = (0, _styles.styled)('ul'
   outline: 0
 });
 const EMPTY_ITEMS = [];
-const itemsPropWarning = (0, _warning.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 = (0, _warning.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/node/SimpleTreeView/SimpleTreeView.plugins.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SIMPLE_TREE_VIEW_PLUGINS = void 0;
 var _defaultPlugins = require("../internals/plugins/defaultPlugins");
-var _useTreeViewJSXNodes = require("../internals/plugins/useTreeViewJSXNodes");
-const SIMPLE_TREE_VIEW_PLUGINS = exports.SIMPLE_TREE_VIEW_PLUGINS = [..._defaultPlugins.DEFAULT_TREE_VIEW_PLUGINS, _useTreeViewJSXNodes.useTreeViewJSXNodes];
+var _useTreeViewJSXItems = require("../internals/plugins/useTreeViewJSXItems");
+const SIMPLE_TREE_VIEW_PLUGINS = exports.SIMPLE_TREE_VIEW_PLUGINS = [..._defaultPlugins.DEFAULT_TREE_VIEW_PLUGINS, _useTreeViewJSXItems.useTreeViewJSXItems];
 
 // We can't infer this type from the plugin, otherwise we would lose the generics.

package/node/TreeItem/TreeItem.js

@@ -23,7 +23,7 @@ var _useTreeViewContext = require("../internals/TreeViewProvider/useTreeViewCont
 var _icons = require("../icons");
 var _TreeItem2Provider = require("../TreeItem2Provider");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
@@ -165,11 +165,13 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
       slotProps: inSlotProps,
       ContentComponent = _TreeItemContent.TreeItemContent,
       ContentProps,
-      nodeId,
+      itemId,
       id,
       label,
       onClick,
-      onMouseDown
+      onMouseDown,
+      onBlur,
+      onKeyDown
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
@@ -192,10 +194,10 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     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 = (0, _extends2.default)({}, props, {
     expanded,
     focused,
@@ -257,24 +259,29 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     /* 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__*/(0, _jsxRuntime.jsx)(_TreeItem2Provider.TreeItem2Provider, {
-    nodeId: nodeId,
+    itemId: itemId,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(TreeItemRoot, (0, _extends2.default)({
       className: (0, _clsx.default)(classes.root, className),
       role: "treeitem",
@@ -282,10 +289,12 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
       "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__*/(0, _jsxRuntime.jsx)(StyledTreeItemContent, (0, _extends2.default)({
         as: ContentComponent,
@@ -299,7 +308,7 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
           label: classes.label
         },
         label: label,
-        nodeId: nodeId,
+        itemId: itemId,
         onClick: onClick,
         onMouseDown: onMouseDown,
         icon: icon,
@@ -331,7 +340,7 @@ process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
   /**
-   * The component used for the content node.
+   * The component used to render the content of the item.
    * @default TreeItemContent
    */
   ContentComponent: _elementTypeAcceptingRef.default,
@@ -345,13 +354,13 @@ process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
    */
   disabled: _propTypes.default.bool,
   /**
-   * The tree item label.
+   * The id of the item.
    */
-  label: _propTypes.default.node,
+  itemId: _propTypes.default.string.isRequired,
   /**
-   * The id of the node.
+   * The tree item label.
    */
-  nodeId: _propTypes.default.string.isRequired,
+  label: _propTypes.default.node,
   /**
    * This prop isn't supported.
    * Use the `onItemFocus` callback on the tree if you need to monitor a item's focus.

package/node/TreeItem/TreeItemContent.js

@@ -12,7 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _useTreeItemState = require("./useTreeItemState");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["classes", "className", "displayIcon", "expansionIcon", "icon", "label", "nodeId", "onClick", "onMouseDown"];
+const _excluded = ["classes", "className", "displayIcon", "expansionIcon", "icon", "label", "itemId", "onClick", "onMouseDown"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -26,7 +26,7 @@ const TreeItemContent = exports.TreeItemContent = /*#__PURE__*/React.forwardRef(
       expansionIcon,
       icon: iconProp,
       label,
-      nodeId,
+      itemId,
       onClick,
       onMouseDown
     } = props,
@@ -39,7 +39,7 @@ const TreeItemContent = exports.TreeItemContent = /*#__PURE__*/React.forwardRef(
     handleExpansion,
     handleSelection,
     preventSelection
-  } = (0, _useTreeItemState.useTreeItemState)(nodeId);
+  } = (0, _useTreeItemState.useTreeItemState)(itemId);
   const icon = iconProp || expansionIcon || displayIcon;
   const handleMouseDown = event => {
     preventSelection(event);
@@ -83,23 +83,23 @@ process.env.NODE_ENV !== "production" ? TreeItemContent.propTypes = {
   classes: _propTypes.default.object.isRequired,
   className: _propTypes.default.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.default.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.default.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.default.node,
   /**
-   * The tree node label.
+   * The id of the item.
    */
-  label: _propTypes.default.node,
+  itemId: _propTypes.default.string.isRequired,
   /**
-   * The id of the node.
+   * The tree item label.
    */
-  nodeId: _propTypes.default.string.isRequired
+  label: _propTypes.default.node
 } : void 0;

package/node/TreeItem/useTreeItemState.js

@@ -5,47 +5,47 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTreeItemState = useTreeItemState;
 var _useTreeViewContext = require("../internals/TreeViewProvider/useTreeViewContext");
-function useTreeItemState(nodeId) {
+function useTreeItemState(itemId) {
   const {
     instance,
     selection: {
       multiSelect
     }
   } = (0, _useTreeViewContext.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/node/TreeItem2/TreeItem2.js

@@ -21,7 +21,7 @@ var _TreeItem = require("../TreeItem");
 var _TreeItem2Icon = require("../TreeItem2Icon");
 var _TreeItem2Provider = require("../TreeItem2Provider");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "nodeId", "label", "disabled", "children", "slots", "slotProps"];
+const _excluded = ["id", "itemId", "label", "disabled", "children", "slots", "slotProps"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const TreeItem2Root = exports.TreeItem2Root = (0, _styles.styled)('li', {
@@ -173,7 +173,7 @@ const TreeItem2 = exports.TreeItem2 = /*#__PURE__*/React.forwardRef(function Tre
   });
   const {
       id,
-      nodeId,
+      itemId,
       label,
       disabled,
       children,
@@ -190,7 +190,7 @@ const TreeItem2 = exports.TreeItem2 = /*#__PURE__*/React.forwardRef(function Tre
     status
   } = (0, _useTreeItem.unstable_useTreeItem2)({
     id,
-    nodeId,
+    itemId,
     children,
     label,
     disabled
@@ -242,7 +242,7 @@ const TreeItem2 = exports.TreeItem2 = /*#__PURE__*/React.forwardRef(function Tre
     className: classes.groupTransition
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem2Provider.TreeItem2Provider, {
-    nodeId: nodeId,
+    itemId: itemId,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({}, rootProps, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Content, (0, _extends2.default)({}, contentProps, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconContainer, (0, _extends2.default)({}, iconContainerProps, {
@@ -273,23 +273,23 @@ process.env.NODE_ENV !== "production" ? TreeItem2.propTypes = {
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
   /**
-   * If `true`, the node is disabled.
+   * If `true`, the item is disabled.
    * @default false
    */
   disabled: _propTypes.default.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.default.string,
   /**
-   * The label of the node.
+   * The id of the item.
+   * Must be unique.
    */
-  label: _propTypes.default.node,
+  itemId: _propTypes.default.string.isRequired,
   /**
-   * The id of the node.
-   * Must be unique.
+   * The label of the item.
    */
-  nodeId: _propTypes.default.string.isRequired,
+  label: _propTypes.default.node,
   /**
    * This prop isn't supported.
    * Use the `onItemFocus` callback on the tree if you need to monitor a item's focus.

package/node/TreeItem2Provider/TreeItem2Provider.js

@@ -10,14 +10,14 @@ var _useTreeViewContext = require("../internals/TreeViewProvider/useTreeViewCont
 function TreeItem2Provider(props) {
   const {
     children,
-    nodeId
+    itemId
   } = props;
   const {
     wrapItem
   } = (0, _useTreeViewContext.useTreeViewContext)();
   return wrapItem({
     children,
-    nodeId
+    itemId
   });
 }
 TreeItem2Provider.propTypes = {
@@ -26,5 +26,5 @@ TreeItem2Provider.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   children: _propTypes.default.node,
-  nodeId: _propTypes.default.string.isRequired
+  itemId: _propTypes.default.string.isRequired
 };

package/node/TreeView/TreeView.js

@@ -39,7 +39,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/node/hooks/useTreeItem2Utils/useTreeItem2Utils.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTreeItem2Utils = void 0;
 var _useTreeViewContext = require("../../internals/TreeViewProvider/useTreeViewContext");
 const useTreeItem2Utils = ({
-  nodeId,
+  itemId,
   children
 }) => {
   const {
@@ -17,23 +17,23 @@ const useTreeItem2Utils = ({
   } = (0, _useTreeViewContext.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 => {
@@ -41,19 +41,19 @@ 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/node/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/node/internals/TreeViewProvider/DescendantProvider.js

@@ -55,7 +55,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/node/internals/plugins/defaultPlugins.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DEFAULT_TREE_VIEW_PLUGINS = void 0;
 var _useTreeViewId = require("./useTreeViewId");
-var _useTreeViewNodes = require("./useTreeViewNodes");
+var _useTreeViewItems = require("./useTreeViewItems");
 var _useTreeViewExpansion = require("./useTreeViewExpansion");
 var _useTreeViewSelection = require("./useTreeViewSelection");
 var _useTreeViewFocus = require("./useTreeViewFocus");
 var _useTreeViewKeyboardNavigation = require("./useTreeViewKeyboardNavigation");
 var _useTreeViewIcons = require("./useTreeViewIcons");
-const DEFAULT_TREE_VIEW_PLUGINS = exports.DEFAULT_TREE_VIEW_PLUGINS = [_useTreeViewId.useTreeViewId, _useTreeViewNodes.useTreeViewNodes, _useTreeViewExpansion.useTreeViewExpansion, _useTreeViewSelection.useTreeViewSelection, _useTreeViewFocus.useTreeViewFocus, _useTreeViewKeyboardNavigation.useTreeViewKeyboardNavigation, _useTreeViewIcons.useTreeViewIcons];
+const DEFAULT_TREE_VIEW_PLUGINS = exports.DEFAULT_TREE_VIEW_PLUGINS = [_useTreeViewId.useTreeViewId, _useTreeViewItems.useTreeViewItems, _useTreeViewExpansion.useTreeViewExpansion, _useTreeViewSelection.useTreeViewSelection, _useTreeViewFocus.useTreeViewFocus, _useTreeViewKeyboardNavigation.useTreeViewKeyboardNavigation, _useTreeViewIcons.useTreeViewIcons];
 
 // We can't infer this type from the plugin, otherwise we would lose the generics.