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

package/CHANGELOG.md

@@ -3,6 +3,102 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.0.0-beta.7
+
+_Mar 14, 2024_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🦥 The Lazy loading feature is now stable and the `lazyLoading` feature flag was removed from the `experimentalFeatures` prop.
+- 🌍 Improve Japanese (ja-JP) locale for the Data Grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### Breaking changes
+
+- The `columnHeader--showColumnBorder` class was replaced by `columnHeader--withLeftBorder` and `columnHeader--withRightBorder`.
+- The `columnHeadersInner`, `columnHeadersInner--scrollable`, and `columnHeaderDropZone` classes were removed since the inner wrapper was removed in our effort to simplify the DOM structure and improve accessibility.
+- The `pinnedColumnHeaders`, `pinnedColumnHeaders--left`, and `pinnedColumnHeaders--right` classes were removed along with the element they were applied to.
+  The pinned column headers now use `position: 'sticky'` and are rendered in the same row element as the regular column headers.
+
+#### `@mui/x-data-grid@7.0.0-beta.7`
+
+- [DataGrid] Fix focus visible style on scrollbar (#12402) @oliviertassinari
+- [DataGrid] Fix the issue where pressing the Delete key resets various cell values to an empty string. (#12216) @sooster910
+- [DataGrid] Make `rowCount` part of the state (#12381) @MBilalShafi
+- [DataGrid] Make column resizing and autosizing available in Community plan (#12420) @cherniavskii
+- [DataGrid] Remove `baseSwitch` slot (#12439) @romgrk
+- [l10n] Improve Japanese (ja-JP) locale (#12398) @makoto14
+
+#### `@mui/x-data-grid-pro@7.0.0-beta.7` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.0.0-beta.7`, plus:
+
+- [DataGridPro] Add `inputRef` to the props passed to `colDef.renderHeaderFilter` (#12328) @vovarudomanenko
+- [DataGridPro] Fix filler rendered for no reason when there are pinned columns (#12440) @cherniavskii
+- [DataGridPro] Make lazy loading feature stable (#12421) @cherniavskii
+- [DataGridPro] Render pinned and non-pinned column headers in one row (#12376) @cherniavskii
+
+#### `@mui/x-data-grid-premium@7.0.0-beta.7` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.7`, plus:
+
+- [DataGridPremium] Fix auto-scroll not working when selecting cell range (#12267) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.0.0-beta.7`
+
+- [fields] Fix `tabIndex` on accessible field DOM structure (#12311) @flaviendelangle
+- [fields] Fix items alignment on multi input range fields (#12312) @flaviendelangle
+- [pickers] Improve the customization of the range picker calendar header (#11988) @flaviendelangle
+- [pickers] Keep the existing time when looking for closest enabled date (#12377) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.0.0-beta.7` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.0.0-beta.7`.
+
+### Charts
+
+#### `@mui/x-charts@7.0.0-beta.7`
+
+- [charts] Fix axis highlight when axis is reversed (#12407) @alexfauquette
+
+### Tree View
+
+#### Breaking changes
+
+The `onNodeFocus` callback has been renamed to `onItemFocus` for consistency:
+
+```diff
+ <SimpleTreeView
+-  onNodeFocus={onNodeFocus}
++  onItemFocus={onItemFocus}
+ />
+```
+
+#### `@mui/x-tree-view@7.0.0-beta.7`
+
+- [TreeView] Clean the usage of the term "item" and "node" in API introduced during v7 (#12368) @noraleonte
+- [TreeView] Introduce a new `TreeItem2` component and a new `useTreeItem2` hook (#11721) @flaviendelangle
+- [TreeView] Rename `onNodeFocus` to `onItemFocus` (#12419) @noraleonte
+
+### Docs
+
+- [docs] Add `legacy` bundle drop mention in migration pages (#12424) @LukasTy
+- [docs] Add missing luxon `Info` import (#12427) @LukasTy
+- [docs] Improve slots definitions for charts (#12408) @alexfauquette
+- [docs] Polish What's new in MUI X blog titles (#12309) @oliviertassinari
+- [docs] Replace `rel="noreferrer"` by `rel="noopener"` @oliviertassinari
+- [docs] Update `date-fns` `weekStarsOn` overriding example (#12416) @LukasTy
+
+### Core
+
+- [core] Fix CI (#12414) @flaviendelangle
+- [core] Fix PR deploy link for Tree View doc pages (#12411) @flaviendelangle
+
 ## 7.0.0-beta.6
 
 _Mar 8, 2024_
@@ -1731,7 +1827,7 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.3`, plus:
   The Firefox browser currently does not support this behavior because the [getWeekInfo](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getWeekInfo) API is not yet implemented.
 
   ```ts
-  import { Settings } from 'luxon';
+  import { Settings, Info } from 'luxon';
 
   Settings.defaultWeekSettings = {
     firstDay: 1,
@@ -2521,6 +2617,26 @@ Here is an example of the renaming for the `<ChartsTooltip />` component.
 - [core] Update release instructions as per v7 configuration (#10962) @MBilalShafi
 - [license] Correctly throw errors (#10924) @oliviertassinari
 
+## 6.19.7
+
+_Mar 14, 2024_
+
+We'd like to offer a big thanks to @LukasTy who made this release possible.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.19.7`
+
+- [pickers] Keep the existing time when looking for closest enabled date (#12410) @LukasTy
+
+#### `@mui/x-date-pickers-pro@6.19.7` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.19.7`.
+
+### Docs
+
+- [docs] Add Pickers custom start of week section (#12425) @LukasTy
+
 ## 6.19.6
 
 _Mar 1, 2024_

package/RichTreeView/RichTreeView.js

@@ -139,7 +139,7 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    */
   apiRef: PropTypes.shape({
     current: PropTypes.shape({
-      focusNode: PropTypes.func.isRequired,
+      focusItem: PropTypes.func.isRequired,
       getItem: PropTypes.func.isRequired
     })
   }),
@@ -149,17 +149,17 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
   classes: PropTypes.object,
   className: PropTypes.string,
   /**
-   * Expanded node ids.
+   * Expanded item ids.
    * Used when the item's expansion is not controlled.
    * @default []
    */
-  defaultExpandedNodes: PropTypes.arrayOf(PropTypes.string),
+  defaultExpandedItems: PropTypes.arrayOf(PropTypes.string),
   /**
-   * Selected node ids. (Uncontrolled)
+   * Selected item ids. (Uncontrolled)
    * When `multiSelect` is true this takes an array of strings; when false (default) a string.
    * @default []
    */
-  defaultSelectedNodes: PropTypes.any,
+  defaultSelectedItems: PropTypes.any,
   /**
    * If `true`, will allow focus on disabled items.
    * @default false
@@ -171,10 +171,10 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    */
   disableSelection: PropTypes.bool,
   /**
-   * Expanded node ids.
+   * Expanded item ids.
    * Used when the item's expansion is controlled.
    */
-  expandedNodes: PropTypes.arrayOf(PropTypes.string),
+  expandedItems: PropTypes.arrayOf(PropTypes.string),
   /**
    * Used to determine the string label for a given item.
    *
@@ -214,42 +214,42 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
   /**
    * Callback fired when tree items are expanded/collapsed.
    * @param {React.SyntheticEvent} event The event source of the callback.
-   * @param {array} nodeIds The ids of the expanded nodes.
+   * @param {array} itemIds The ids of the expanded items.
    */
-  onExpandedNodesChange: PropTypes.func,
+  onExpandedItemsChange: PropTypes.func,
   /**
    * Callback fired when a tree item is expanded or collapsed.
    * @param {React.SyntheticEvent} event The event source of the callback.
-   * @param {array} nodeId The nodeId of the modified node.
-   * @param {array} isExpanded `true` if the node has just been expanded, `false` if it has just been collapsed.
+   * @param {array} itemId The itemId of the modified item.
+   * @param {array} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
    */
-  onNodeExpansionToggle: PropTypes.func,
+  onItemExpansionToggle: PropTypes.func,
   /**
    * Callback fired when tree items are focused.
    * @param {React.SyntheticEvent} event The event source of the callback **Warning**: This is a generic event not a focus event.
-   * @param {string} nodeId The id of the node focused.
-   * @param {string} value of the focused node.
+   * @param {string} itemId The id of the focused item.
+   * @param {string} value of the focused item.
    */
-  onNodeFocus: PropTypes.func,
+  onItemFocus: PropTypes.func,
   /**
    * Callback fired when a tree item is selected or deselected.
    * @param {React.SyntheticEvent} event The event source of the callback.
-   * @param {array} nodeId The nodeId of the modified node.
-   * @param {array} isSelected `true` if the node has just been selected, `false` if it has just been deselected.
+   * @param {array} itemId The itemId of the modified item.
+   * @param {array} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
    */
-  onNodeSelectionToggle: PropTypes.func,
+  onItemSelectionToggle: PropTypes.func,
   /**
    * Callback fired when tree items are selected/deselected.
    * @param {React.SyntheticEvent} event The event source of the callback
-   * @param {string[] | string} nodeIds The ids of the selected nodes.
+   * @param {string[] | string} itemIds The ids of the selected items.
    * When `multiSelect` is `true`, this is an array of strings; when false (default) a string.
    */
-  onSelectedNodesChange: PropTypes.func,
+  onSelectedItemsChange: PropTypes.func,
   /**
-   * Selected node ids. (Controlled)
+   * Selected item ids. (Controlled)
    * When `multiSelect` is true this takes an array of strings; when false (default) a string.
    */
-  selectedNodes: PropTypes.any,
+  selectedItems: PropTypes.any,
   /**
    * The props used for each component slot.
    * @default {}

package/RichTreeView/RichTreeView.types.d.ts

@@ -5,6 +5,7 @@ import { SlotComponentProps } from '@mui/base/utils';
 import { RichTreeViewClasses } from './richTreeViewClasses';
 import { DefaultTreeViewPluginParameters, DefaultTreeViewPluginSlotProps, DefaultTreeViewPluginSlots, DefaultTreeViewPlugins } from '../internals/plugins/defaultPlugins';
 import { TreeItem, TreeItemProps } from '../TreeItem';
+import { TreeItem2Props } from '../TreeItem2';
 import { TreeViewItemId } from '../models';
 import { TreeViewPublicAPI } from '../internals/models';
 interface RichTreeViewItemSlotOwnerState {
@@ -21,7 +22,7 @@ export interface RichTreeViewSlots extends DefaultTreeViewPluginSlots {
      * Custom component for the item.
      * @default TreeItem.
      */
-    item?: React.JSXElementConstructor<TreeItemProps>;
+    item?: React.JSXElementConstructor<TreeItemProps> | React.JSXElementConstructor<TreeItem2Props>;
 }
 export interface RichTreeViewSlotProps<R extends {}, Multiple extends boolean | undefined> extends DefaultTreeViewPluginSlotProps {
     root?: SlotComponentProps<'ul', {}, RichTreeViewProps<R, Multiple>>;

package/SimpleTreeView/SimpleTreeView.js

@@ -96,7 +96,7 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
    */
   apiRef: PropTypes.shape({
     current: PropTypes.shape({
-      focusNode: PropTypes.func.isRequired,
+      focusItem: PropTypes.func.isRequired,
       getItem: PropTypes.func.isRequired
     })
   }),
@@ -110,17 +110,17 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
   classes: PropTypes.object,
   className: PropTypes.string,
   /**
-   * Expanded node ids.
+   * Expanded item ids.
    * Used when the item's expansion is not controlled.
    * @default []
    */
-  defaultExpandedNodes: PropTypes.arrayOf(PropTypes.string),
+  defaultExpandedItems: PropTypes.arrayOf(PropTypes.string),
   /**
-   * Selected node ids. (Uncontrolled)
+   * Selected item ids. (Uncontrolled)
    * When `multiSelect` is true this takes an array of strings; when false (default) a string.
    * @default []
    */
-  defaultSelectedNodes: PropTypes.any,
+  defaultSelectedItems: PropTypes.any,
   /**
    * If `true`, will allow focus on disabled items.
    * @default false
@@ -132,10 +132,10 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
    */
   disableSelection: PropTypes.bool,
   /**
-   * Expanded node ids.
+   * Expanded item ids.
    * Used when the item's expansion is controlled.
    */
-  expandedNodes: PropTypes.arrayOf(PropTypes.string),
+  expandedItems: PropTypes.arrayOf(PropTypes.string),
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide this prop. It falls back to a randomly generated id.
@@ -149,42 +149,42 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
   /**
    * Callback fired when tree items are expanded/collapsed.
    * @param {React.SyntheticEvent} event The event source of the callback.
-   * @param {array} nodeIds The ids of the expanded nodes.
+   * @param {array} itemIds The ids of the expanded items.
    */
-  onExpandedNodesChange: PropTypes.func,
+  onExpandedItemsChange: PropTypes.func,
   /**
    * Callback fired when a tree item is expanded or collapsed.
    * @param {React.SyntheticEvent} event The event source of the callback.
-   * @param {array} nodeId The nodeId of the modified node.
-   * @param {array} isExpanded `true` if the node has just been expanded, `false` if it has just been collapsed.
+   * @param {array} itemId The itemId of the modified item.
+   * @param {array} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
    */
-  onNodeExpansionToggle: PropTypes.func,
+  onItemExpansionToggle: PropTypes.func,
   /**
    * Callback fired when tree items are focused.
    * @param {React.SyntheticEvent} event The event source of the callback **Warning**: This is a generic event not a focus event.
-   * @param {string} nodeId The id of the node focused.
-   * @param {string} value of the focused node.
+   * @param {string} itemId The id of the focused item.
+   * @param {string} value of the focused item.
    */
-  onNodeFocus: PropTypes.func,
+  onItemFocus: PropTypes.func,
   /**
    * Callback fired when a tree item is selected or deselected.
    * @param {React.SyntheticEvent} event The event source of the callback.
-   * @param {array} nodeId The nodeId of the modified node.
-   * @param {array} isSelected `true` if the node has just been selected, `false` if it has just been deselected.
+   * @param {array} itemId The itemId of the modified item.
+   * @param {array} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
    */
-  onNodeSelectionToggle: PropTypes.func,
+  onItemSelectionToggle: PropTypes.func,
   /**
    * Callback fired when tree items are selected/deselected.
    * @param {React.SyntheticEvent} event The event source of the callback
-   * @param {string[] | string} nodeIds The ids of the selected nodes.
+   * @param {string[] | string} itemIds The ids of the selected items.
    * When `multiSelect` is `true`, this is an array of strings; when false (default) a string.
    */
-  onSelectedNodesChange: PropTypes.func,
+  onSelectedItemsChange: PropTypes.func,
   /**
-   * Selected node ids. (Controlled)
+   * Selected item ids. (Controlled)
    * When `multiSelect` is true this takes an array of strings; when false (default) a string.
    */
-  selectedNodes: PropTypes.any,
+  selectedItems: PropTypes.any,
   /**
    * The props used for each component slot.
    */

package/TreeItem/TreeItem.js

@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import Collapse from '@mui/material/Collapse';
 import { resolveComponentProps, useSlotProps } from '@mui/base/utils';
+import useForkRef from '@mui/utils/useForkRef';
 import { alpha, styled, useThemeProps } from '@mui/material/styles';
 import unsupportedProp from '@mui/utils/unsupportedProp';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
@@ -17,6 +18,7 @@ import { TreeItemContent } from './TreeItemContent';
 import { treeItemClasses, getTreeItemUtilityClass } from './treeItemClasses';
 import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
 import { TreeViewCollapseIcon, TreeViewExpandIcon } from '../icons';
+import { TreeItem2Provider } from '../TreeItem2Provider';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -145,18 +147,10 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     disabledItemsFocusable,
     instance
   } = useTreeViewContext();
-  const inPropsWithTheme = useThemeProps({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiTreeItem'
   });
-  const {
-    props,
-    ref,
-    wrapItem
-  } = runItemPlugins({
-    props: inPropsWithTheme,
-    ref: inRef
-  });
   const {
       children,
       className,
@@ -171,6 +165,12 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
       onMouseDown
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    contentRef,
+    rootRef
+  } = runItemPlugins(props);
+  const handleRootRef = useForkRef(inRef, rootRef);
+  const handleContentRef = useForkRef(ContentProps == null ? void 0 : 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,
@@ -262,50 +262,54 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     }
     const canBeFocused = !disabled || disabledItemsFocusable;
     if (!focused && canBeFocused && event.currentTarget === event.target) {
-      instance.focusNode(event, nodeId);
+      instance.focusItem(event, nodeId);
     }
   }
   const idAttribute = instance.getTreeItemId(nodeId, id);
-  const item = /*#__PURE__*/_jsxs(TreeItemRoot, _extends({
-    className: clsx(classes.root, className),
-    role: "treeitem",
-    "aria-expanded": expandable ? expanded : undefined,
-    "aria-selected": ariaSelected,
-    "aria-disabled": disabled || undefined,
-    id: idAttribute,
-    tabIndex: -1
-  }, other, {
-    ownerState: ownerState,
-    onFocus: handleFocus,
-    ref: ref,
-    children: [/*#__PURE__*/_jsx(StyledTreeItemContent, _extends({
-      as: ContentComponent,
-      classes: {
-        root: classes.content,
-        expanded: classes.expanded,
-        selected: classes.selected,
-        focused: classes.focused,
-        disabled: classes.disabled,
-        iconContainer: classes.iconContainer,
-        label: classes.label
-      },
-      label: label,
-      nodeId: nodeId,
-      onClick: onClick,
-      onMouseDown: onMouseDown,
-      icon: icon,
-      expansionIcon: expansionIcon,
-      displayIcon: displayIcon,
-      ownerState: ownerState
-    }, ContentProps)), children && /*#__PURE__*/_jsx(TreeItemGroup, _extends({
-      as: GroupTransition
-    }, groupTransitionProps, {
-      children: children
-    }))]
-  }));
-  return wrapItem(item);
+  return /*#__PURE__*/_jsx(TreeItem2Provider, {
+    nodeId: nodeId,
+    children: /*#__PURE__*/_jsxs(TreeItemRoot, _extends({
+      className: clsx(classes.root, className),
+      role: "treeitem",
+      "aria-expanded": expandable ? expanded : undefined,
+      "aria-selected": ariaSelected,
+      "aria-disabled": disabled || undefined,
+      id: idAttribute,
+      tabIndex: -1
+    }, other, {
+      ownerState: ownerState,
+      onFocus: handleFocus,
+      ref: handleRootRef,
+      children: [/*#__PURE__*/_jsx(StyledTreeItemContent, _extends({
+        as: ContentComponent,
+        classes: {
+          root: classes.content,
+          expanded: classes.expanded,
+          selected: classes.selected,
+          focused: classes.focused,
+          disabled: classes.disabled,
+          iconContainer: classes.iconContainer,
+          label: classes.label
+        },
+        label: label,
+        nodeId: nodeId,
+        onClick: onClick,
+        onMouseDown: onMouseDown,
+        icon: icon,
+        expansionIcon: expansionIcon,
+        displayIcon: displayIcon,
+        ownerState: ownerState
+      }, ContentProps, {
+        ref: handleContentRef
+      })), children && /*#__PURE__*/_jsx(TreeItemGroup, _extends({
+        as: GroupTransition
+      }, groupTransitionProps, {
+        children: children
+      }))]
+    }))
+  });
 });
-TreeItem.propTypes = {
+process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
@@ -329,12 +333,12 @@ TreeItem.propTypes = {
    */
   ContentProps: PropTypes.object,
   /**
-   * If `true`, the node is disabled.
+   * If `true`, the item is disabled.
    * @default false
    */
   disabled: PropTypes.bool,
   /**
-   * The tree node label.
+   * The tree item label.
    */
   label: PropTypes.node,
   /**
@@ -343,7 +347,7 @@ TreeItem.propTypes = {
   nodeId: PropTypes.string.isRequired,
   /**
    * This prop isn't supported.
-   * Use the `onNodeFocus` callback on the tree if you need to monitor a node's focus.
+   * Use the `onItemFocus` callback on the tree if you need to monitor a item's focus.
    */
   onFocus: unsupportedProp,
   /**
@@ -360,4 +364,4 @@ TreeItem.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-};
+} : void 0;

package/TreeItem/TreeItem.types.d.ts

@@ -9,19 +9,19 @@ import { TreeViewItemId } from '../models';
 import { SlotComponentPropsFromProps } from '../internals/models';
 export interface TreeItemSlots {
     /**
-     * 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;
     /**
@@ -65,19 +65,21 @@ export interface TreeItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>,
     /**
      * Props applied to ContentComponent.
      */
-    ContentProps?: React.HTMLAttributes<HTMLElement>;
+    ContentProps?: React.HTMLAttributes<HTMLElement> & {
+        ref?: React.Ref<HTMLElement>;
+    };
     /**
-     * If `true`, the node is disabled.
+     * If `true`, the item is disabled.
      * @default false
      */
     disabled?: boolean;
     /**
      * This prop isn't supported.
-     * Use the `onNodeFocus` callback on the tree if you need to monitor a node's focus.
+     * Use the `onItemFocus` callback on the tree if you need to monitor a item's focus.
      */
     onFocus?: null;
     /**
-     * The tree node label.
+     * The tree item label.
      */
     label?: React.ReactNode;
     /**

package/TreeItem/useTreeItemState.js

@@ -14,7 +14,7 @@ export function useTreeItemState(nodeId) {
   const handleExpansion = event => {
     if (!disabled) {
       if (!focused) {
-        instance.focusNode(event, nodeId);
+        instance.focusItem(event, nodeId);
       }
       const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
 
@@ -27,7 +27,7 @@ export function useTreeItemState(nodeId) {
   const handleSelection = event => {
     if (!disabled) {
       if (!focused) {
-        instance.focusNode(event, nodeId);
+        instance.focusItem(event, nodeId);
       }
       const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
       if (multiple) {

package/TreeItem2/TreeItem2.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { TreeItem2Props } from './TreeItem2.types';
+export declare const TreeItem2Root: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, keyof React.ClassAttributes<HTMLLIElement> | keyof React.LiHTMLAttributes<HTMLLIElement>>, {}>;
+export declare const TreeItem2Content: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TreeItem2Label: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const TreeItem2IconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const TreeItem2GroupTransition: import("@emotion/styled").StyledComponent<Pick<import("@mui/material/Collapse").CollapseProps, keyof import("@mui/material/Collapse").CollapseProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+/**
+ *
+ * Demos:
+ *
+ * - [Tree View](https://mui.com/x/react-tree-view/)
+ *
+ * API:
+ *
+ * - [TreeItem2 API](https://mui.com/x/api/tree-view/tree-item-2/)
+ */
+export declare const TreeItem2: React.ForwardRefExoticComponent<TreeItem2Props & React.RefAttributes<HTMLLIElement>>;