@mui/x-tree-view 8.0.0-alpha.0 → 8.0.0-alpha.2

package/README.md

@@ -16,8 +16,8 @@ This component has the following peer dependencies that you need to install as w
 ```json
 "peerDependencies": {
   "@mui/material": "^5.15.14 || ^6.0.0",
-  "react": "^17.0.0 || ^18.0.0",
-  "react-dom": "^17.0.0 || ^18.0.0"
+  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
 },
 ```
 

package/RichTreeView/RichTreeView.js

@@ -56,8 +56,7 @@ const RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps
   }
   const {
     getRootProps,
-    contextValue,
-    instance
+    contextValue
   } = useTreeView({
     plugins: RICH_TREE_VIEW_PLUGINS,
     rootRef: ref,
@@ -81,8 +80,7 @@ const RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps
     children: /*#__PURE__*/_jsx(Root, _extends({}, rootProps, {
       children: /*#__PURE__*/_jsx(RichTreeViewItems, {
         slots: slots,
-        slotProps: slotProps,
-        itemsToRender: instance.getItemsToRender()
+        slotProps: slotProps
       })
     }))
   });

package/RichTreeView/RichTreeView.types.d.ts

@@ -1,32 +1,20 @@
 import * as React from 'react';
 import { Theme } from '@mui/material/styles';
-import { SxProps } from '@mui/system';
-import { SlotComponentProps } from '@mui/utils';
-import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { SxProps } from '@mui/system/styleFunctionSx';
+import { SlotComponentProps } from '@mui/utils/types';
 import { RichTreeViewClasses } from './richTreeViewClasses';
 import { RichTreeViewPluginParameters, RichTreeViewPluginSlotProps, RichTreeViewPluginSlots, RichTreeViewPluginSignatures } from './RichTreeView.plugins';
-import { TreeItemProps } from '../TreeItem';
-import { TreeViewItemId } from '../models';
 import { TreeViewExperimentalFeatures, TreeViewPublicAPI } from '../internals/models';
-interface RichTreeViewItemSlotOwnerState {
-    itemId: TreeViewItemId;
-    label: string;
-}
-export interface RichTreeViewSlots extends RichTreeViewPluginSlots {
+import { RichTreeViewItemsSlotProps, RichTreeViewItemsSlots } from '../internals/components/RichTreeViewItems';
+export interface RichTreeViewSlots extends RichTreeViewPluginSlots, RichTreeViewItemsSlots {
     /**
      * Element rendered at the root.
      * @default RichTreeViewRoot
      */
     root?: React.ElementType;
-    /**
-     * Custom component for the item.
-     * @default TreeItem.
-     */
-    item?: React.JSXElementConstructor<TreeItemProps>;
 }
-export interface RichTreeViewSlotProps<R extends {}, Multiple extends boolean | undefined> extends RichTreeViewPluginSlotProps {
+export interface RichTreeViewSlotProps<R extends {}, Multiple extends boolean | undefined> extends RichTreeViewPluginSlotProps, RichTreeViewItemsSlotProps {
     root?: SlotComponentProps<'ul', {}, RichTreeViewProps<R, Multiple>>;
-    item?: SlotComponentPropsFromProps<TreeItemProps, {}, RichTreeViewItemSlotOwnerState>;
 }
 export type RichTreeViewApiRef = React.MutableRefObject<TreeViewPublicAPI<RichTreeViewPluginSignatures> | undefined>;
 export interface RichTreeViewPropsBase extends React.HTMLAttributes<HTMLUListElement> {
@@ -62,4 +50,3 @@ export interface RichTreeViewProps<R extends {}, Multiple extends boolean | unde
      */
     experimentalFeatures?: TreeViewExperimentalFeatures<RichTreeViewPluginSignatures>;
 }
-export {};

package/SimpleTreeView/SimpleTreeView.types.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Theme } from '@mui/material/styles';
-import { SlotComponentProps } from '@mui/utils';
-import { SxProps } from '@mui/system';
+import { SlotComponentProps } from '@mui/utils/types';
+import { SxProps } from '@mui/system/styleFunctionSx';
 import { SimpleTreeViewClasses } from './simpleTreeViewClasses';
 import { SimpleTreeViewPluginParameters, SimpleTreeViewPluginSlotProps, SimpleTreeViewPluginSlots, SimpleTreeViewPluginSignatures } from './SimpleTreeView.plugins';
 import { TreeViewExperimentalFeatures, TreeViewPublicAPI } from '../internals/models';

package/TreeItem/TreeItem.js

@@ -210,6 +210,7 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded2);
   const {
+    getContextProviderProps,
     getRootProps,
     getContentProps,
     getIconContainerProps,
@@ -296,8 +297,7 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     ownerState: {},
     className: classes.dragAndDropOverlay
   });
-  return /*#__PURE__*/_jsx(TreeItemProvider, {
-    itemId: itemId,
+  return /*#__PURE__*/_jsx(TreeItemProvider, _extends({}, getContextProviderProps(), {
     children: /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, {
       children: [/*#__PURE__*/_jsxs(Content, _extends({}, contentProps, {
         children: [/*#__PURE__*/_jsx(IconContainer, _extends({}, iconContainerProps, {
@@ -311,7 +311,7 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
         as: GroupTransition
       }, groupTransitionProps))]
     }))
-  });
+  }));
 });
 process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -321,7 +321,7 @@ process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
   /**
    * The content of the component.
    */
-  children: PropTypes.node,
+  children: PropTypes /* @typescript-to-proptypes-ignore */.any,
   /**
    * Override or extend the styles applied to the component.
    */

package/TreeItem/TreeItem.types.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { TransitionProps } from '@mui/material/transitions';
+import { SlotComponentProps } from '@mui/utils/types';
 import { UseTreeItemParameters, UseTreeItemStatus } from '../useTreeItem';
 import { TreeItemClasses } from './treeItemClasses';
 import { TreeItemIconSlotProps, TreeItemIconSlots } from '../TreeItemIcon';
@@ -51,7 +53,7 @@ export interface TreeItemSlots extends TreeItemIconSlots {
 export interface TreeItemSlotProps extends TreeItemIconSlotProps {
     root?: SlotComponentProps<'li', {}, {}>;
     content?: SlotComponentProps<'div', {}, {}>;
-    groupTransition?: SlotComponentProps<'div', {}, {}>;
+    groupTransition?: SlotComponentPropsFromProps<TransitionProps, {}, {}>;
     iconContainer?: SlotComponentProps<'div', {}, {}>;
     checkbox?: SlotComponentProps<'button', {}, {}>;
     label?: SlotComponentProps<'div', {}, {}>;

package/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { alpha } from '@mui/material/styles';
-import { shouldForwardProp } from '@mui/system';
+import { shouldForwardProp } from '@mui/system/createStyled';
 import { styled } from "../internals/zero-styled/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const TreeItemDragAndDropOverlayRoot = styled('div', {

package/TreeItemIcon/TreeItemIcon.types.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
+import { SlotComponentProps } from '@mui/utils/types';
 import { UseTreeItemStatus } from '../useTreeItem';
 export interface TreeItemIconSlots {
     /**

package/TreeItemProvider/TreeItemProvider.d.ts

@@ -1,8 +1,6 @@
+import * as React from 'react';
 import { TreeItemProviderProps } from './TreeItemProvider.types';
-/**
- * @ignore - internal component.
- */
-declare function TreeItemProvider(props: TreeItemProviderProps): import("react").ReactNode;
+declare function TreeItemProvider(props: TreeItemProviderProps): React.JSX.Element;
 declare namespace TreeItemProvider {
     var propTypes: any;
 }

package/TreeItemProvider/TreeItemProvider.js

@@ -1,30 +1,45 @@
+'use client';
+
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTreeViewContext } from "../internals/TreeViewProvider/index.js";
-
-/**
- * @ignore - internal component.
- */
+import { generateTreeItemIdAttribute } from "../internals/corePlugins/useTreeViewId/useTreeViewId.utils.js";
+import { useSelector } from "../internals/hooks/useSelector.js";
+import { selectorTreeViewId } from "../internals/corePlugins/useTreeViewId/useTreeViewId.selectors.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 function TreeItemProvider(props) {
   const {
     children,
-    itemId
+    itemId,
+    id
   } = props;
   const {
     wrapItem,
-    instance
+    instance,
+    store
   } = useTreeViewContext();
-  return wrapItem({
-    children,
+  const treeId = useSelector(store, selectorTreeViewId);
+  const idAttribute = generateTreeItemIdAttribute({
     itemId,
-    instance
+    treeId,
+    id
+  });
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: wrapItem({
+      children,
+      itemId,
+      instance,
+      idAttribute
+    })
   });
 }
-TreeItemProvider.propTypes = {
+process.env.NODE_ENV !== "production" ? TreeItemProvider.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   children: PropTypes.node,
+  id: PropTypes.string,
   itemId: PropTypes.string.isRequired
-};
+} : void 0;
 export { TreeItemProvider };

package/TreeItemProvider/TreeItemProvider.types.d.ts

@@ -3,4 +3,5 @@ import { TreeViewItemId } from '../models';
 export interface TreeItemProviderProps {
     children: React.ReactNode;
     itemId: TreeViewItemId;
+    id: string | undefined;
 }

package/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export { useTreeViewApiRef } from './useTreeViewApiRef';
 export { useTreeItemUtils } from './useTreeItemUtils';
+export { useTreeItemModel } from './useTreeItemModel';

package/hooks/index.js

@@ -1,2 +1,3 @@
 export { useTreeViewApiRef } from "./useTreeViewApiRef.js";
-export { useTreeItemUtils } from "./useTreeItemUtils/index.js";
+export { useTreeItemUtils } from "./useTreeItemUtils/index.js";
+export { useTreeItemModel } from "./useTreeItemModel.js";

package/hooks/useTreeItemModel.d.ts

@@ -0,0 +1,2 @@
+import { TreeViewBaseItem, TreeViewDefaultItemModelProperties, TreeViewItemId } from '../models';
+export declare const useTreeItemModel: <R extends {} = TreeViewDefaultItemModelProperties>(itemId: TreeViewItemId) => TreeViewBaseItem<R> | null;

package/hooks/useTreeItemModel.js

@@ -0,0 +1,11 @@
+'use client';
+
+import { useTreeViewContext } from "../internals/TreeViewProvider/index.js";
+import { useSelector } from "../internals/hooks/useSelector.js";
+import { selectorItemModel } from "../internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js";
+export const useTreeItemModel = itemId => {
+  const {
+    store
+  } = useTreeViewContext();
+  return useSelector(store, selectorItemModel, itemId);
+};

package/hooks/useTreeItemUtils/useTreeItemUtils.d.ts

@@ -35,8 +35,9 @@ interface UseTreeItemUtilsReturnValue<TSignatures extends UseTreeItemUtilsMinima
      */
     publicAPI: TreeViewPublicAPI<TSignatures, TOptionalSignatures>;
 }
+export declare const isItemExpandable: (reactChildren: React.ReactNode) => boolean;
 export declare const useTreeItemUtils: <TSignatures extends UseTreeItemUtilsMinimalPlugins = UseTreeItemUtilsMinimalPlugins, TOptionalSignatures extends UseTreeItemUtilsOptionalPlugins = UseTreeItemUtilsOptionalPlugins>({ itemId, children, }: {
     itemId: string;
-    children: React.ReactNode;
+    children?: React.ReactNode;
 }) => UseTreeItemUtilsReturnValue<TSignatures, TOptionalSignatures>;
 export {};

package/hooks/useTreeItemUtils/useTreeItemUtils.js

@@ -3,6 +3,12 @@
 import { useTreeViewContext } from "../../internals/TreeViewProvider/index.js";
 import { useTreeViewLabel } from "../../internals/plugins/useTreeViewLabel/index.js";
 import { hasPlugin } from "../../internals/utils/plugins.js";
+import { useSelector } from "../../internals/hooks/useSelector.js";
+import { selectorIsItemExpanded } from "../../internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js";
+import { selectorIsItemFocused } from "../../internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors.js";
+import { selectorIsItemDisabled } from "../../internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js";
+import { selectorIsItemSelected } from "../../internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors.js";
+import { selectorIsItemBeingEdited, selectorIsItemEditable } from "../../internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors.js";
 
 /**
  * Plugins that need to be present in the Tree View in order for `useTreeItemUtils` to work correctly.
@@ -12,7 +18,7 @@ import { hasPlugin } from "../../internals/utils/plugins.js";
  * Plugins that `useTreeItemUtils` can use if they are present, but are not required.
  */
 
-const isItemExpandable = reactChildren => {
+export const isItemExpandable = reactChildren => {
   if (Array.isArray(reactChildren)) {
     return reactChildren.length > 0 && reactChildren.some(isItemExpandable);
   }
@@ -24,19 +30,30 @@ export const useTreeItemUtils = ({
 }) => {
   const {
     instance,
+    label,
+    store,
     selection: {
       multiSelect
     },
     publicAPI
   } = useTreeViewContext();
+  const isExpanded = useSelector(store, selectorIsItemExpanded, itemId);
+  const isFocused = useSelector(store, selectorIsItemFocused, itemId);
+  const isSelected = useSelector(store, selectorIsItemSelected, itemId);
+  const isDisabled = useSelector(store, selectorIsItemDisabled, itemId);
+  const isEditing = useSelector(store, state => label == null ? false : selectorIsItemBeingEdited(state, itemId));
+  const isEditable = useSelector(store, state => label == null ? false : selectorIsItemEditable(state, {
+    itemId,
+    isItemEditable: label.isItemEditable
+  }));
   const status = {
     expandable: isItemExpandable(children),
-    expanded: instance.isItemExpanded(itemId),
-    focused: instance.isItemFocused(itemId),
-    selected: instance.isItemSelected(itemId),
-    disabled: instance.isItemDisabled(itemId),
-    editing: instance?.isItemBeingEdited ? instance?.isItemBeingEdited(itemId) : false,
-    editable: instance.isItemEditable ? instance.isItemEditable(itemId) : false
+    expanded: isExpanded,
+    focused: isFocused,
+    selected: isSelected,
+    disabled: isDisabled,
+    editing: isEditing,
+    editable: isEditable
   };
   const handleExpansion = event => {
     if (status.disabled) {
@@ -48,7 +65,7 @@ export const useTreeItemUtils = ({
     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.isItemExpanded(itemId))) {
+    if (status.expandable && !(multiple && selectorIsItemExpanded(store.value, itemId))) {
       instance.toggleItemExpansion(event, itemId);
     }
   };
@@ -95,15 +112,15 @@ export const useTreeItemUtils = ({
     if (!hasPlugin(instance, useTreeViewLabel)) {
       return;
     }
-    if (instance.isItemEditable(itemId)) {
-      if (instance.isItemBeingEdited(itemId)) {
+    if (isEditable) {
+      if (isEditing) {
         instance.setEditedItemId(null);
       } else {
         instance.setEditedItemId(itemId);
       }
     }
   };
-  const handleSaveItemLabel = (event, label) => {
+  const handleSaveItemLabel = (event, newLabel) => {
     if (!hasPlugin(instance, useTreeViewLabel)) {
       return;
     }
@@ -111,9 +128,8 @@ export const useTreeItemUtils = ({
     // As a side effect of `instance.focusItem` called here and in `handleCancelItemLabelEditing` the `labelInput` is blurred
     // The `onBlur` event is triggered, which calls `handleSaveItemLabel` again.
     // To avoid creating an unwanted behavior we need to check if the item is being edited before calling `updateItemLabel`
-    // using `instance.isItemBeingEditedRef` instead of `instance.isItemBeingEdited` since the state is not yet updated in this point
-    if (instance.isItemBeingEditedRef(itemId)) {
-      instance.updateItemLabel(itemId, label);
+    if (selectorIsItemBeingEdited(store.value, itemId)) {
+      instance.updateItemLabel(itemId, newLabel);
       toggleItemEditing();
       instance.focusItem(event, itemId);
     }
@@ -122,7 +138,7 @@ export const useTreeItemUtils = ({
     if (!hasPlugin(instance, useTreeViewLabel)) {
       return;
     }
-    if (instance.isItemBeingEditedRef(itemId)) {
+    if (selectorIsItemBeingEdited(store.value, itemId)) {
       toggleItemEditing();
       instance.focusItem(event, itemId);
     }

package/hooks/useTreeViewApiRef.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { TreeViewAnyPluginSignature, TreeViewPublicAPI } from '../internals/models';
+import { RichTreeViewPluginSignatures } from '../RichTreeView/RichTreeView.plugins';
 /**
  * Hook that instantiates a [[TreeViewApiRef]].
  */

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v8.0.0-alpha.0
+ * @mui/x-tree-view v8.0.0-alpha.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/TreeViewItemDepthContext/TreeViewItemDepthContext.d.ts

@@ -1,3 +1,5 @@
 import * as React from 'react';
 import { TreeViewItemId } from '../../models';
-export declare const TreeViewItemDepthContext: React.Context<number | ((itemId: TreeViewItemId) => number)>;
+import { TreeViewState } from '../models';
+import type { UseTreeViewItemsSignature } from '../plugins/useTreeViewItems';
+export declare const TreeViewItemDepthContext: React.Context<number | ((state: TreeViewState<[UseTreeViewItemsSignature]>, itemId: TreeViewItemId) => number)>;

package/internals/TreeViewProvider/TreeViewChildrenItemProvider.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 export declare const TreeViewChildrenItemContext: React.Context<TreeViewChildrenItemContextValue | null>;
 interface TreeViewChildrenItemProviderProps {
-    itemId?: string;
+    itemId: string | null;
+    idAttribute: string | null;
     children: React.ReactNode;
 }
 export declare function TreeViewChildrenItemProvider(props: TreeViewChildrenItemProviderProps): React.JSX.Element;

package/internals/TreeViewProvider/TreeViewChildrenItemProvider.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTreeViewContext } from "./useTreeViewContext.js";
 import { escapeOperandAttributeSelector } from "../utils/utils.js";
-import { generateTreeItemIdAttribute } from "../corePlugins/useTreeViewId/useTreeViewId.utils.js";
+import { selectorItemOrderedChildrenIds } from "../plugins/useTreeViewItems/useTreeViewItems.selectors.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const TreeViewChildrenItemContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== 'production') {
@@ -11,11 +11,12 @@ if (process.env.NODE_ENV !== 'production') {
 export function TreeViewChildrenItemProvider(props) {
   const {
     children,
-    itemId = null
+    itemId = null,
+    idAttribute
   } = props;
   const {
     instance,
-    treeId,
+    store,
     rootRef
   } = useTreeViewContext();
   const childrenIdAttrToIdRef = React.useRef(new Map());
@@ -23,25 +24,8 @@ export function TreeViewChildrenItemProvider(props) {
     if (!rootRef.current) {
       return;
     }
-    let idAttr = null;
-    if (itemId == null) {
-      idAttr = rootRef.current.id;
-    } else {
-      // Undefined during 1st render
-      const itemMeta = instance.getItemMeta(itemId);
-      if (itemMeta !== undefined) {
-        idAttr = generateTreeItemIdAttribute({
-          itemId,
-          treeId,
-          id: itemMeta.idAttribute
-        });
-      }
-    }
-    if (idAttr == null) {
-      return;
-    }
-    const previousChildrenIds = instance.getItemOrderedChildrenIds(itemId ?? null) ?? [];
-    const escapedIdAttr = escapeOperandAttributeSelector(idAttr);
+    const previousChildrenIds = selectorItemOrderedChildrenIds(store.value, itemId ?? null) ?? [];
+    const escapedIdAttr = escapeOperandAttributeSelector(idAttribute ?? rootRef.current.id);
     const childrenElements = rootRef.current.querySelectorAll(`${itemId == null ? '' : `*[id="${escapedIdAttr}"] `}[role="treeitem"]:not(*[id="${escapedIdAttr}"] [role="treeitem"] [role="treeitem"])`);
     const childrenIds = Array.from(childrenElements).map(child => childrenIdAttrToIdRef.current.get(child.id));
     const hasChanged = childrenIds.length !== previousChildrenIds.length || childrenIds.some((childId, index) => childId !== previousChildrenIds[index]);

package/internals/TreeViewProvider/TreeViewProvider.js

@@ -14,8 +14,7 @@ export function TreeViewProvider(props) {
   return /*#__PURE__*/_jsx(TreeViewContext.Provider, {
     value: value,
     children: value.wrapRoot({
-      children,
-      instance: value.instance
+      children
     })
   });
 }

package/internals/TreeViewProvider/TreeViewProvider.types.d.ts

@@ -1,14 +1,16 @@
 import * as React from 'react';
 import { MergeSignaturesProperty, TreeItemWrapper, TreeRootWrapper, TreeViewAnyPluginSignature, TreeViewInstance, TreeViewItemPluginResponse, TreeViewPublicAPI } from '../models';
+import { TreeViewStore } from '../utils/TreeViewStore';
 import { TreeViewCorePluginSignatures } from '../corePlugins';
-import type { TreeItemProps } from '../../TreeItem';
+import type { TreeItemProps } from '../../TreeItem/TreeItem.types';
 export type TreeViewItemPluginsRunner = (props: TreeItemProps) => Required<TreeViewItemPluginResponse>;
 export type TreeViewContextValue<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = MergeSignaturesProperty<[...TreeViewCorePluginSignatures, ...TSignatures], 'contextValue'> & Partial<MergeSignaturesProperty<TOptionalSignatures, 'contextValue'>> & {
     instance: TreeViewInstance<TSignatures, TOptionalSignatures>;
     publicAPI: TreeViewPublicAPI<TSignatures, TOptionalSignatures>;
+    store: TreeViewStore<TSignatures>;
     rootRef: React.RefObject<HTMLUListElement>;
     wrapItem: TreeItemWrapper<TSignatures>;
-    wrapRoot: TreeRootWrapper<TSignatures>;
+    wrapRoot: TreeRootWrapper;
     runItemPlugins: TreeViewItemPluginsRunner;
 };
 export interface TreeViewProviderProps<TSignatures extends readonly TreeViewAnyPluginSignature[]> {

package/internals/components/RichTreeViewItems.d.ts

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
+import { SlotComponentProps } from '@mui/utils/types';
 import { TreeItem, TreeItemProps } from '../../TreeItem';
 import { TreeViewItemId } from '../../models';
-import { TreeViewItemToRenderProps } from '../plugins/useTreeViewItems';
+export declare function RichTreeViewItems(props: RichTreeViewItemsProps): React.JSX.Element;
 interface RichTreeViewItemsOwnerState {
     itemId: TreeViewItemId;
     label: string;
 }
 export interface RichTreeViewItemsSlots {
     /**
-     * Custom component for the item.
+     * Custom component to render a Tree Item.
      * @default TreeItem.
      */
     item?: React.JSXElementConstructor<TreeItemProps>;
@@ -18,7 +18,6 @@ export interface RichTreeViewItemsSlotProps {
     item?: SlotComponentProps<typeof TreeItem, {}, RichTreeViewItemsOwnerState>;
 }
 export interface RichTreeViewItemsProps {
-    itemsToRender: TreeViewItemToRenderProps[];
     /**
      * Overridable component slots.
      * @default {}
@@ -30,5 +29,4 @@ export interface RichTreeViewItemsProps {
      */
     slotProps?: RichTreeViewItemsSlotProps;
 }
-export declare function RichTreeViewItems(props: RichTreeViewItemsProps): React.JSX.Element;
 export {};

package/internals/components/RichTreeViewItems.js

@@ -3,54 +3,66 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["ownerState"];
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
+import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
 import { TreeItem } from "../../TreeItem/index.js";
+import { useSelector } from "../hooks/useSelector.js";
+import { selectorItemMeta, selectorItemOrderedChildrenIds } from "../plugins/useTreeViewItems/useTreeViewItems.selectors.js";
+import { useTreeViewContext } from "../TreeViewProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-function WrappedTreeItem({
-  slots,
-  slotProps,
-  label,
-  id,
-  itemId,
-  itemsToRender
+const RichTreeViewItemsContext = /*#__PURE__*/React.createContext(null);
+if (process.env.NODE_ENV !== 'production') {
+  RichTreeViewItemsContext.displayName = 'RichTreeViewItemsProvider';
+}
+const WrappedTreeItem = /*#__PURE__*/React.memo(function WrappedTreeItem({
+  itemSlot,
+  itemSlotProps,
+  itemId
 }) {
-  const Item = slots?.item ?? TreeItem;
+  const renderItemForRichTreeView = React.useContext(RichTreeViewItemsContext);
+  const {
+    store
+  } = useTreeViewContext();
+  const itemMeta = useSelector(store, selectorItemMeta, itemId);
+  const children = useSelector(store, selectorItemOrderedChildrenIds, itemId);
+  const Item = itemSlot ?? TreeItem;
   const _useSlotProps = useSlotProps({
       elementType: Item,
-      externalSlotProps: slotProps?.item,
+      externalSlotProps: itemSlotProps,
       additionalProps: {
-        itemId,
-        id,
-        label
+        label: itemMeta?.label,
+        id: itemMeta?.idAttribute,
+        itemId
       },
       ownerState: {
         itemId,
-        label
+        label: itemMeta?.label
       }
     }),
     itemProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded);
-  const children = React.useMemo(() => itemsToRender ? /*#__PURE__*/_jsx(RichTreeViewItems, {
-    itemsToRender: itemsToRender,
-    slots: slots,
-    slotProps: slotProps
-  }) : null, [itemsToRender, slots, slotProps]);
   return /*#__PURE__*/_jsx(Item, _extends({}, itemProps, {
-    children: children
+    children: children?.map(renderItemForRichTreeView)
   }));
-}
+}, fastObjectShallowCompare);
 export function RichTreeViewItems(props) {
   const {
-    itemsToRender,
     slots,
     slotProps
   } = props;
-  return /*#__PURE__*/_jsx(React.Fragment, {
-    children: itemsToRender.map(item => /*#__PURE__*/_jsx(WrappedTreeItem, {
-      slots: slots,
-      slotProps: slotProps,
-      label: item.label,
-      id: item.id,
-      itemId: item.itemId,
-      itemsToRender: item.children
-    }, item.itemId))
+  const {
+    store
+  } = useTreeViewContext();
+  const itemSlot = slots?.item;
+  const itemSlotProps = slotProps?.item;
+  const items = useSelector(store, selectorItemOrderedChildrenIds, null);
+  const renderItem = React.useCallback(itemId => {
+    return /*#__PURE__*/_jsx(WrappedTreeItem, {
+      itemSlot: itemSlot,
+      itemSlotProps: itemSlotProps,
+      itemId: itemId
+    }, itemId);
+  }, [itemSlot, itemSlotProps]);
+  return /*#__PURE__*/_jsx(RichTreeViewItemsContext.Provider, {
+    value: renderItem,
+    children: items.map(renderItem)
   });
 }