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

package/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"];
@@ -137,7 +137,6 @@ const TreeItemGroup = styled(Collapse, {
  * - [TreeItem API](https://mui.com/x/api/tree-view/tree-item/)
  */
 export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, inRef) {
-  var _ref, _inSlots$expandIcon, _ref2, _inSlots$collapseIcon, _inSlots$endIcon, _slots$groupTransitio;
   const {
     icons: contextIcons,
     runItemPlugins,
@@ -158,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 {
@@ -170,13 +171,13 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     rootRef
   } = runItemPlugins(props);
   const handleRootRef = useForkRef(inRef, rootRef);
-  const handleContentRef = useForkRef(ContentProps == null ? void 0 : ContentProps.ref, contentRef);
+  const handleContentRef = useForkRef(ContentProps?.ref, contentRef);
   const slots = {
-    expandIcon: (_ref = (_inSlots$expandIcon = inSlots == null ? void 0 : inSlots.expandIcon) != null ? _inSlots$expandIcon : contextIcons.slots.expandIcon) != null ? _ref : TreeViewExpandIcon,
-    collapseIcon: (_ref2 = (_inSlots$collapseIcon = inSlots == null ? void 0 : inSlots.collapseIcon) != null ? _inSlots$collapseIcon : contextIcons.slots.collapseIcon) != null ? _ref2 : TreeViewCollapseIcon,
-    endIcon: (_inSlots$endIcon = inSlots == null ? void 0 : inSlots.endIcon) != null ? _inSlots$endIcon : contextIcons.slots.endIcon,
-    icon: inSlots == null ? void 0 : inSlots.icon,
-    groupTransition: inSlots == null ? void 0 : inSlots.groupTransition
+    expandIcon: inSlots?.expandIcon ?? contextIcons.slots.expandIcon ?? TreeViewExpandIcon,
+    collapseIcon: inSlots?.collapseIcon ?? contextIcons.slots.collapseIcon ?? TreeViewCollapseIcon,
+    endIcon: inSlots?.endIcon ?? contextIcons.slots.endIcon,
+    icon: inSlots?.icon,
+    groupTransition: inSlots?.groupTransition
   };
   const isExpandable = reactChildren => {
     if (Array.isArray(reactChildren)) {
@@ -185,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,
@@ -196,11 +197,11 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     disabled
   });
   const classes = useUtilityClasses(ownerState);
-  const GroupTransition = (_slots$groupTransitio = slots.groupTransition) != null ? _slots$groupTransitio : undefined;
+  const GroupTransition = slots.groupTransition ?? undefined;
   const groupTransitionProps = useSlotProps({
     elementType: GroupTransition,
     ownerState: {},
-    externalSlotProps: inSlotProps == null ? void 0 : inSlotProps.groupTransition,
+    externalSlotProps: inSlotProps?.groupTransition,
     additionalProps: {
       unmountOnExit: true,
       in: expanded,
@@ -215,9 +216,9 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
       ownerState: {},
       externalSlotProps: tempOwnerState => {
         if (expanded) {
-          return _extends({}, resolveComponentProps(contextIcons.slotProps.collapseIcon, tempOwnerState), resolveComponentProps(inSlotProps == null ? void 0 : inSlotProps.collapseIcon, tempOwnerState));
+          return _extends({}, resolveComponentProps(contextIcons.slotProps.collapseIcon, tempOwnerState), resolveComponentProps(inSlotProps?.collapseIcon, tempOwnerState));
         }
-        return _extends({}, resolveComponentProps(contextIcons.slotProps.expandIcon, tempOwnerState), resolveComponentProps(inSlotProps == null ? void 0 : inSlotProps.expandIcon, tempOwnerState));
+        return _extends({}, resolveComponentProps(contextIcons.slotProps.expandIcon, tempOwnerState), resolveComponentProps(inSlotProps?.expandIcon, tempOwnerState));
       }
     }),
     expansionIconProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
@@ -230,7 +231,7 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
         if (expandable) {
           return {};
         }
-        return _extends({}, resolveComponentProps(contextIcons.slotProps.endIcon, tempOwnerState), resolveComponentProps(inSlotProps == null ? void 0 : inSlotProps.endIcon, tempOwnerState));
+        return _extends({}, resolveComponentProps(contextIcons.slotProps.endIcon, tempOwnerState), resolveComponentProps(inSlotProps?.endIcon, tempOwnerState));
       }
     }),
     displayIconProps = _objectWithoutPropertiesLoose(_useSlotProps2, _excluded3);
@@ -239,7 +240,7 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
   const _useSlotProps3 = useSlotProps({
       elementType: Icon,
       ownerState: {},
-      externalSlotProps: inSlotProps == null ? void 0 : inSlotProps.icon
+      externalSlotProps: inSlotProps?.icon
     }),
     iconProps = _objectWithoutPropertiesLoose(_useSlotProps3, _excluded4);
   const icon = Icon ? /*#__PURE__*/_jsx(Icon, _extends({}, iconProps)) : null;
@@ -250,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",
@@ -275,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,
@@ -292,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,
@@ -324,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,
@@ -338,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/TreeItem/TreeItem.types.d.ts

@@ -58,7 +58,7 @@ export interface TreeItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>,
      */
     slotProps?: TreeItemSlotProps;
     /**
-     * The component used for the content node.
+     * The component used to render the content of the item.
      * @default TreeItemContent
      */
     ContentComponent?: React.JSXElementConstructor<TreeItemContentProps>;
@@ -83,9 +83,9 @@ export interface TreeItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>,
      */
     label?: React.ReactNode;
     /**
-     * The id of the node.
+     * The id of the item.
      */
-    nodeId: TreeViewItemId;
+    itemId: TreeViewItemId;
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */

package/TreeItem/TreeItemContent.d.ts

@@ -15,29 +15,29 @@ export interface TreeItemContentProps extends React.HTMLAttributes<HTMLElement>
         focused: string;
         /** State class applied to the element when disabled. */
         disabled: string;
-        /** Styles applied to the tree node icon and collapse/expand icon. */
+        /** Styles applied to the tree item icon and collapse/expand icon. */
         iconContainer: string;
         /** Styles applied to the label element. */
         label: string;
     };
     /**
-     * The tree node label.
+     * The tree item label.
      */
     label?: React.ReactNode;
     /**
-     * The id of the node.
+     * The id of the item.
      */
-    nodeId: string;
+    itemId: string;
     /**
-     * The icon to display next to the tree node's label.
+     * The icon to display next to the tree item's label.
      */
     icon?: React.ReactNode;
     /**
-     * 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?: React.ReactNode;
     /**
-     * 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?: React.ReactNode;
 }

package/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/TreeItem/treeItemClasses.d.ts

@@ -13,7 +13,7 @@ export interface TreeItemClasses {
     focused: string;
     /** State class applied to the element when disabled. */
     disabled: string;
-    /** Styles applied to the tree node icon. */
+    /** Styles applied to the tree item icon. */
     iconContainer: string;
     /** Styles applied to the label element. */
     label: string;

package/TreeItem/useTreeItemState.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare function useTreeItemState(nodeId: string): {
+export declare function useTreeItemState(itemId: string): {
     disabled: boolean;
     expanded: boolean;
     selected: boolean;

package/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/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';
@@ -159,14 +159,13 @@ const useUtilityClasses = ownerState => {
  * - [TreeItem2 API](https://mui.com/x/api/tree-view/tree-item-2/)
  */
 export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProps, forwardedRef) {
-  var _slots$root, _slots$content, _slots$iconContainer, _slots$label, _slots$groupTransitio;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiTreeItem2'
   });
   const {
       id,
-      nodeId,
+      itemId,
       label,
       disabled,
       children,
@@ -183,14 +182,14 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
     status
   } = useTreeItem2({
     id,
-    nodeId,
+    itemId,
     children,
     label,
     disabled
   });
   const ownerState = _extends({}, props, status);
   const classes = useUtilityClasses(ownerState);
-  const Root = (_slots$root = slots.root) != null ? _slots$root : TreeItem2Root;
+  const Root = slots.root ?? TreeItem2Root;
   const rootProps = useSlotProps({
     elementType: Root,
     getSlotProps: getRootProps,
@@ -202,7 +201,7 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
     ownerState: {},
     className: classes.root
   });
-  const Content = (_slots$content = slots.content) != null ? _slots$content : TreeItem2Content;
+  const Content = slots.content ?? TreeItem2Content;
   const contentProps = useSlotProps({
     elementType: Content,
     getSlotProps: getContentProps,
@@ -210,7 +209,7 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
     ownerState: {},
     className: clsx(classes.content, status.expanded && classes.expanded, status.selected && classes.selected, status.focused && classes.focused, status.disabled && classes.disabled)
   });
-  const IconContainer = (_slots$iconContainer = slots.iconContainer) != null ? _slots$iconContainer : TreeItem2IconContainer;
+  const IconContainer = slots.iconContainer ?? TreeItem2IconContainer;
   const iconContainerProps = useSlotProps({
     elementType: IconContainer,
     getSlotProps: getIconContainerProps,
@@ -218,7 +217,7 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
     ownerState: {},
     className: classes.iconContainer
   });
-  const Label = (_slots$label = slots.label) != null ? _slots$label : TreeItem2Label;
+  const Label = slots.label ?? TreeItem2Label;
   const labelProps = useSlotProps({
     elementType: Label,
     getSlotProps: getLabelProps,
@@ -226,7 +225,7 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
     ownerState: {},
     className: classes.label
   });
-  const GroupTransition = (_slots$groupTransitio = slots.groupTransition) != null ? _slots$groupTransitio : undefined;
+  const GroupTransition = slots.groupTransition ?? undefined;
   const groupTransitionProps = useSlotProps({
     elementType: GroupTransition,
     getSlotProps: getGroupTransitionProps,
@@ -235,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, {
@@ -266,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/TreeItem2Icon/TreeItem2Icon.js

@@ -6,7 +6,6 @@ import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewCon
 import { TreeViewCollapseIcon, TreeViewExpandIcon } from '../icons';
 import { jsx as _jsx } from "react/jsx-runtime";
 function TreeItem2Icon(props) {
-  var _context$icons$slots$, _context$icons$slots$2, _slots$iconName;
   const {
     slots,
     slotProps,
@@ -14,12 +13,12 @@ function TreeItem2Icon(props) {
   } = props;
   const context = useTreeViewContext();
   const contextIcons = _extends({}, context.icons.slots, {
-    expandIcon: (_context$icons$slots$ = context.icons.slots.expandIcon) != null ? _context$icons$slots$ : TreeViewExpandIcon,
-    collapseIcon: (_context$icons$slots$2 = context.icons.slots.collapseIcon) != null ? _context$icons$slots$2 : TreeViewCollapseIcon
+    expandIcon: context.icons.slots.expandIcon ?? TreeViewExpandIcon,
+    collapseIcon: context.icons.slots.collapseIcon ?? TreeViewCollapseIcon
   });
   const contextIconProps = context.icons.slotProps;
   let iconName;
-  if (slots != null && slots.icon) {
+  if (slots?.icon) {
     iconName = 'icon';
   } else if (status.expandable) {
     if (status.expanded) {
@@ -30,10 +29,10 @@ function TreeItem2Icon(props) {
   } else {
     iconName = 'endIcon';
   }
-  const Icon = (_slots$iconName = slots == null ? void 0 : slots[iconName]) != null ? _slots$iconName : contextIcons[iconName];
+  const Icon = slots?.[iconName] ?? contextIcons[iconName];
   const iconProps = useSlotProps({
     elementType: Icon,
-    externalSlotProps: tempOwnerState => _extends({}, resolveComponentProps(contextIconProps[iconName], tempOwnerState), resolveComponentProps(slotProps == null ? void 0 : slotProps[iconName], tempOwnerState)),
+    externalSlotProps: tempOwnerState => _extends({}, resolveComponentProps(contextIconProps[iconName], tempOwnerState), resolveComponentProps(slotProps?.[iconName], tempOwnerState)),
     // TODO: Add proper ownerState
     ownerState: {}
   });

package/TreeItem2Icon/TreeItem2Icon.types.d.ts

@@ -3,19 +3,19 @@ import { SlotComponentProps } from '@mui/base/utils';
 import { UseTreeItem2Status } from '../useTreeItem2';
 export interface TreeItem2IconSlots {
     /**
-     * The icon used to collapse the node.
+     * The icon used to collapse the item.
      */
     collapseIcon?: React.ElementType;
     /**
-     * The icon used to expand the node.
+     * The icon used to expand the item.
      */
     expandIcon?: React.ElementType;
     /**
-     * The icon displayed next to an end node.
+     * The icon displayed next to an end item.
      */
     endIcon?: React.ElementType;
     /**
-     * The icon to display next to the tree node's label.
+     * The icon to display next to the tree item's label.
      */
     icon?: React.ElementType;
 }

package/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/TreeItem2Provider/TreeItem2Provider.types.d.ts

@@ -2,5 +2,5 @@ import * as React from 'react';
 import { TreeViewItemId } from '../models';
 export interface TreeItem2ProviderProps {
     children: React.ReactNode;
-    nodeId: TreeViewItemId;
+    itemId: TreeViewItemId;
 }

package/TreeView/TreeView.d.ts

@@ -5,7 +5,7 @@ type TreeViewComponent = (<Multiple extends boolean | undefined = undefined>(pro
 };
 /**
  * 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/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/hooks/useTreeItem2Utils/useTreeItem2Utils.d.ts

@@ -8,8 +8,8 @@ interface UseTreeItem2UtilsReturnValue {
     interactions: UseTreeItem2Interactions;
     status: UseTreeItem2Status;
 }
-export declare const useTreeItem2Utils: ({ nodeId, children, }: {
-    nodeId: string;
+export declare const useTreeItem2Utils: ({ itemId, children, }: {
+    itemId: string;
     children: React.ReactNode;
 }) => UseTreeItem2UtilsReturnValue;
 export {};