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

package/TreeItem/treeItemClasses.d.ts

@@ -2,7 +2,7 @@ export interface TreeItemClasses {
     /** Styles applied to the root element. */
     root: string;
     /** Styles applied to the transition component. */
-    group: string;
+    groupTransition: string;
     /** Styles applied to the content element. */
     content: string;
     /** State class applied to the content element when expanded. */

package/TreeItem/treeItemClasses.js

@@ -3,4 +3,4 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getTreeItemUtilityClass(slot) {
   return generateUtilityClass('MuiTreeItem', slot);
 }
-export const treeItemClasses = generateUtilityClasses('MuiTreeItem', ['root', 'group', 'content', 'expanded', 'selected', 'focused', 'disabled', 'iconContainer', 'label']);
+export const treeItemClasses = generateUtilityClasses('MuiTreeItem', ['root', 'groupTransition', 'content', 'expanded', 'selected', 'focused', 'disabled', 'iconContainer', 'label']);

package/TreeView/TreeView.js

@@ -69,7 +69,8 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    */
   apiRef: PropTypes.shape({
     current: PropTypes.shape({
-      focusNode: PropTypes.func.isRequired
+      focusNode: PropTypes.func.isRequired,
+      getItem: PropTypes.func.isRequired
     })
   }),
   /**

package/hooks/useTreeViewApiRef.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { TreeViewAnyPluginSignature, TreeViewUsedPublicAPI } from '../internals/models';
+import { TreeViewAnyPluginSignature, TreeViewPublicAPI } from '../internals/models';
 /**
  * Hook that instantiates a [[TreeViewApiRef]].
  */
-export declare const useTreeViewApiRef: <T extends TreeViewAnyPluginSignature, Api extends TreeViewUsedPublicAPI<T>>() => React.MutableRefObject<Api>;
+export declare const useTreeViewApiRef: <TPlugins extends readonly TreeViewAnyPluginSignature[] = [import("../internals").UseTreeViewIdSignature, import("../internals").UseTreeViewNodesSignature, import("../internals").UseTreeViewExpansionSignature, import("../internals").UseTreeViewSelectionSignature, import("../internals").UseTreeViewFocusSignature, import("../internals").UseTreeViewKeyboardNavigationSignature, import("../internals").UseTreeViewIconsSignature]>() => React.MutableRefObject<TreeViewPublicAPI<TPlugins> | undefined>;

package/index.js

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

package/internals/models/helpers.d.ts

@@ -1,5 +1,6 @@
 import type { TreeViewAnyPluginSignature, TreeViewPlugin } from './plugin';
 export type DefaultizedProps<P extends {}, RequiredProps extends keyof P, AdditionalProps extends {} = {}> = Omit<P, RequiredProps | keyof AdditionalProps> & Required<Pick<P, RequiredProps>> & AdditionalProps;
+export type SlotComponentPropsFromProps<TProps extends {}, TOverrides extends {}, TOwnerState extends {}> = (Partial<TProps> & TOverrides) | ((ownerState: TOwnerState) => Partial<TProps> & TOverrides);
 type IsAny<T> = 0 extends 1 & T ? true : false;
 export type OptionalIfEmpty<A extends string, B> = keyof B extends never ? Partial<Record<A, B>> : IsAny<B> extends true ? Partial<Record<A, B>> : Record<A, B>;
 export type MergePluginsProperty<TPlugins extends readonly any[], TProperty extends keyof TreeViewAnyPluginSignature> = TPlugins extends readonly [plugin: infer P, ...otherPlugin: infer R] ? P extends TreeViewAnyPluginSignature ? P[TProperty] & MergePluginsProperty<R, TProperty> : {} : {};

package/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.d.ts

@@ -10,8 +10,7 @@ export interface UseTreeViewFocusInstance {
     focusDefaultNode: (event: React.SyntheticEvent) => void;
     focusRoot: () => void;
 }
-export interface UseTreeViewFocusPublicAPI {
-    focusNode: (event: React.SyntheticEvent, nodeId: string | null) => void;
+export interface UseTreeViewFocusPublicAPI extends Pick<UseTreeViewFocusInstance, 'focusNode'> {
 }
 export interface UseTreeViewFocusParameters {
     /**

package/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js

@@ -13,22 +13,36 @@ export const useTreeViewJSXNodes = ({
 }) => {
   const insertJSXNode = useEventCallback(node => {
     setState(prevState => {
-      if (prevState.nodeMap[node.id] != null) {
+      if (prevState.nodes.nodeMap[node.id] != null) {
         throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', `Tow items were provided with the same id in the \`items\` prop: "${node.id}"`].join('\n'));
       }
       return _extends({}, prevState, {
-        nodeMap: _extends({}, prevState.nodeMap, {
-          [node.id]: node
+        nodes: _extends({}, prevState.nodes, {
+          nodeMap: _extends({}, prevState.nodes.nodeMap, {
+            [node.id]: node
+          }),
+          // For `SimpleTreeView`, we don't have a proper `item` object, so we create a very basic one.
+          itemMap: _extends({}, prevState.nodes.itemMap, {
+            [node.id]: {
+              id: node.id,
+              label: node.label
+            }
+          })
         })
       });
     });
   });
   const removeJSXNode = useEventCallback(nodeId => {
     setState(prevState => {
-      const newMap = _extends({}, prevState.nodeMap);
-      delete newMap[nodeId];
+      const newNodeMap = _extends({}, prevState.nodes.nodeMap);
+      const newItemMap = _extends({}, prevState.nodes.itemMap);
+      delete newNodeMap[nodeId];
+      delete newItemMap[nodeId];
       return _extends({}, prevState, {
-        nodeMap: newMap
+        nodes: _extends({}, prevState.nodes, {
+          nodeMap: newNodeMap,
+          itemMap: newItemMap
+        })
       });
     });
     publishTreeViewEvent(instance, 'removeNode', {

package/internals/plugins/useTreeViewNodes/useTreeViewNodes.js

@@ -1,15 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { populateInstance } from '../../useTreeView/useTreeView.utils';
+import { populateInstance, populatePublicAPI } from '../../useTreeView/useTreeView.utils';
 import { publishTreeViewEvent } from '../../utils/publishTreeViewEvent';
-const updateState = ({
+const updateNodesState = ({
   items,
   isItemDisabled,
   getItemLabel,
   getItemId
 }) => {
   const nodeMap = {};
+  const itemMap = {};
   const processItem = (item, index, parentId) => {
     var _item$children, _item$children2;
     const id = getItemId ? getItemId(item) : item.id;
@@ -28,10 +29,11 @@ const updateState = ({
       label,
       index,
       parentId,
-      idAttribute: id,
+      idAttribute: undefined,
       expandable: !!((_item$children = item.children) != null && _item$children.length),
       disabled: isItemDisabled ? isItemDisabled(item) : false
     };
+    itemMap[id] = item;
     return {
       id,
       children: (_item$children2 = item.children) == null ? void 0 : _item$children2.map((child, childIndex) => processItem(child, childIndex, id))
@@ -40,16 +42,19 @@ const updateState = ({
   const nodeTree = items.map((item, itemIndex) => processItem(item, itemIndex, null));
   return {
     nodeMap,
-    nodeTree
+    nodeTree,
+    itemMap
   };
 };
 export const useTreeViewNodes = ({
   instance,
+  publicAPI,
   params,
   state,
   setState
 }) => {
-  const getNode = React.useCallback(nodeId => state.nodeMap[nodeId], [state.nodeMap]);
+  const getNode = React.useCallback(nodeId => state.nodes.nodeMap[nodeId], [state.nodes.nodeMap]);
+  const getItem = React.useCallback(nodeId => state.nodes.itemMap[nodeId], [state.nodes.itemMap]);
   const isNodeDisabled = React.useCallback(nodeId => {
     if (nodeId == null) {
       return false;
@@ -71,7 +76,7 @@ export const useTreeViewNodes = ({
     }
     return false;
   }, [instance]);
-  const getChildrenIds = useEventCallback(nodeId => Object.values(state.nodeMap).filter(node => node.parentId === nodeId).sort((a, b) => a.index - b.index).map(child => child.id));
+  const getChildrenIds = useEventCallback(nodeId => Object.values(state.nodes.nodeMap).filter(node => node.parentId === nodeId).sort((a, b) => a.index - b.index).map(child => child.id));
   const getNavigableChildrenIds = nodeId => {
     let childrenIds = instance.getChildrenIds(nodeId);
     if (!params.disabledItemsFocusable) {
@@ -81,20 +86,22 @@ export const useTreeViewNodes = ({
   };
   React.useEffect(() => {
     setState(prevState => {
-      const newState = updateState({
+      const newState = updateNodesState({
         items: params.items,
         isItemDisabled: params.isItemDisabled,
         getItemId: params.getItemId,
         getItemLabel: params.getItemLabel
       });
-      Object.values(prevState.nodeMap).forEach(node => {
+      Object.values(prevState.nodes.nodeMap).forEach(node => {
         if (!newState.nodeMap[node.id]) {
           publishTreeViewEvent(instance, 'removeNode', {
             id: node.id
           });
         }
       });
-      return _extends({}, prevState, newState);
+      return _extends({}, prevState, {
+        nodes: newState
+      });
     });
   }, [instance, setState, params.items, params.isItemDisabled, params.getItemId, params.getItemLabel]);
   const getNodesToRender = useEventCallback(() => {
@@ -102,7 +109,7 @@ export const useTreeViewNodes = ({
       id,
       children
     }) => {
-      const node = state.nodeMap[id];
+      const node = state.nodes.nodeMap[id];
       return {
         label: node.label,
         nodeId: node.id,
@@ -110,26 +117,32 @@ export const useTreeViewNodes = ({
         children: children == null ? void 0 : children.map(getPropsFromNodeId)
       };
     };
-    return state.nodeTree.map(getPropsFromNodeId);
+    return state.nodes.nodeTree.map(getPropsFromNodeId);
   });
   populateInstance(instance, {
     getNode,
+    getItem,
     getNodesToRender,
     getChildrenIds,
     getNavigableChildrenIds,
     isNodeDisabled
   });
+  populatePublicAPI(publicAPI, {
+    getItem
+  });
   return {
     contextValue: {
       disabledItemsFocusable: params.disabledItemsFocusable
     }
   };
 };
-useTreeViewNodes.getInitialState = params => updateState({
-  items: params.items,
-  isItemDisabled: params.isItemDisabled,
-  getItemId: params.getItemId,
-  getItemLabel: params.getItemLabel
+useTreeViewNodes.getInitialState = params => ({
+  nodes: updateNodesState({
+    items: params.items,
+    isItemDisabled: params.isItemDisabled,
+    getItemId: params.getItemId,
+    getItemLabel: params.getItemLabel
+  })
 });
 useTreeViewNodes.getDefaultizedParams = params => {
   var _params$disabledItems;

package/internals/plugins/useTreeViewNodes/useTreeViewNodes.types.d.ts

@@ -6,13 +6,16 @@ interface TreeViewNodeProps {
     id: string | undefined;
     children?: TreeViewNodeProps[];
 }
-export interface UseTreeViewNodesInstance {
+export interface UseTreeViewNodesInstance<R extends {}> {
     getNode: (nodeId: string) => TreeViewNode;
+    getItem: (nodeId: string) => R;
     getNodesToRender: () => TreeViewNodeProps[];
     getChildrenIds: (nodeId: string | null) => string[];
     getNavigableChildrenIds: (nodeId: string | null) => string[];
     isNodeDisabled: (nodeId: string | null) => nodeId is string;
 }
+export interface UseTreeViewNodesPublicAPI<R extends {}> extends Pick<UseTreeViewNodesInstance<R>, 'getItem'> {
+}
 export interface UseTreeViewNodesParameters<R extends {}> {
     /**
      * If `true`, will allow focus on disabled items.
@@ -58,21 +61,28 @@ export interface TreeViewNodeIdAndChildren {
     id: TreeViewItemId;
     children?: TreeViewNodeIdAndChildren[];
 }
-export interface UseTreeViewNodesState {
-    nodeTree: TreeViewNodeIdAndChildren[];
-    nodeMap: TreeViewNodeMap;
+export interface UseTreeViewNodesState<R extends {}> {
+    nodes: {
+        nodeTree: TreeViewNodeIdAndChildren[];
+        nodeMap: TreeViewNodeMap;
+        itemMap: TreeViewItemMap<R>;
+    };
 }
 interface UseTreeViewNodesContextValue extends Pick<UseTreeViewNodesDefaultizedParameters<any>, 'disabledItemsFocusable'> {
 }
 export type UseTreeViewNodesSignature = TreeViewPluginSignature<{
     params: UseTreeViewNodesParameters<any>;
     defaultizedParams: UseTreeViewNodesDefaultizedParameters<any>;
-    instance: UseTreeViewNodesInstance;
+    instance: UseTreeViewNodesInstance<any>;
+    publicAPI: UseTreeViewNodesPublicAPI<any>;
     events: UseTreeViewNodesEventLookup;
-    state: UseTreeViewNodesState;
+    state: UseTreeViewNodesState<any>;
     contextValue: UseTreeViewNodesContextValue;
 }>;
 export type TreeViewNodeMap = {
     [nodeId: string]: TreeViewNode;
 };
+export type TreeViewItemMap<R extends {}> = {
+    [nodeId: string]: R;
+};
 export {};

package/modern/RichTreeView/RichTreeView.js

@@ -137,7 +137,8 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    */
   apiRef: PropTypes.shape({
     current: PropTypes.shape({
-      focusNode: PropTypes.func.isRequired
+      focusNode: PropTypes.func.isRequired,
+      getItem: PropTypes.func.isRequired
     })
   }),
   /**

package/modern/SimpleTreeView/SimpleTreeView.js

@@ -95,7 +95,8 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
    */
   apiRef: PropTypes.shape({
     current: PropTypes.shape({
-      focusNode: PropTypes.func.isRequired
+      focusNode: PropTypes.func.isRequired,
+      getItem: PropTypes.func.isRequired
     })
   }),
   /**

package/modern/TreeItem/TreeItem.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "slots", "slotProps", "ContentComponent", "ContentProps", "nodeId", "id", "label", "onClick", "onMouseDown", "TransitionComponent", "TransitionProps"],
+const _excluded = ["children", "className", "slots", "slotProps", "ContentComponent", "ContentProps", "nodeId", "id", "label", "onClick", "onMouseDown"],
   _excluded2 = ["ownerState"],
   _excluded3 = ["ownerState"],
   _excluded4 = ["ownerState"];
@@ -32,7 +32,7 @@ const useUtilityClasses = ownerState => {
     disabled: ['disabled'],
     iconContainer: ['iconContainer'],
     label: ['label'],
-    group: ['group']
+    groupTransition: ['groupTransition']
   };
   return composeClasses(slots, getTreeItemUtilityClass, classes);
 };
@@ -116,8 +116,8 @@ const StyledTreeItemContent = styled(TreeItemContent, {
 }));
 const TreeItemGroup = styled(Collapse, {
   name: 'MuiTreeItem',
-  slot: 'Group',
-  overridesResolver: (props, styles) => styles.group
+  slot: 'GroupTransition',
+  overridesResolver: (props, styles) => styles.groupTransition
 })({
   margin: 0,
   padding: 0,
@@ -167,16 +167,15 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
       id,
       label,
       onClick,
-      onMouseDown,
-      TransitionComponent = Collapse,
-      TransitionProps
+      onMouseDown
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const slots = {
     expandIcon: inSlots?.expandIcon ?? contextIcons.slots.expandIcon ?? TreeViewExpandIcon,
     collapseIcon: inSlots?.collapseIcon ?? contextIcons.slots.collapseIcon ?? TreeViewCollapseIcon,
     endIcon: inSlots?.endIcon ?? contextIcons.slots.endIcon,
-    icon: inSlots?.icon
+    icon: inSlots?.icon,
+    groupTransition: inSlots?.groupTransition
   };
   const isExpandable = reactChildren => {
     if (Array.isArray(reactChildren)) {
@@ -196,6 +195,19 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     disabled
   });
   const classes = useUtilityClasses(ownerState);
+  const GroupTransition = slots.groupTransition ?? undefined;
+  const groupTransitionProps = useSlotProps({
+    elementType: GroupTransition,
+    ownerState: {},
+    externalSlotProps: inSlotProps?.groupTransition,
+    additionalProps: {
+      unmountOnExit: true,
+      in: expanded,
+      component: 'ul',
+      role: 'group'
+    },
+    className: classes.groupTransition
+  });
   const ExpansionIcon = expanded ? slots.collapseIcon : slots.expandIcon;
   const _useSlotProps = useSlotProps({
       elementType: ExpansionIcon,
@@ -285,13 +297,8 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
       displayIcon: displayIcon,
       ownerState: ownerState
     }, ContentProps)), children && /*#__PURE__*/_jsx(TreeItemGroup, _extends({
-      as: TransitionComponent,
-      unmountOnExit: true,
-      className: classes.group,
-      in: expanded,
-      component: "ul",
-      role: "group"
-    }, TransitionProps, {
+      as: GroupTransition
+    }, groupTransitionProps, {
       children: children
     }))]
   }));
@@ -351,16 +358,5 @@ 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]),
-  /**
-   * The component used for the transition.
-   * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
-   * @default Collapse
-   */
-  TransitionComponent: PropTypes.elementType,
-  /**
-   * Props applied to the transition element.
-   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
-   */
-  TransitionProps: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 };

package/modern/TreeItem/treeItemClasses.js

@@ -3,4 +3,4 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getTreeItemUtilityClass(slot) {
   return generateUtilityClass('MuiTreeItem', slot);
 }
-export const treeItemClasses = generateUtilityClasses('MuiTreeItem', ['root', 'group', 'content', 'expanded', 'selected', 'focused', 'disabled', 'iconContainer', 'label']);
+export const treeItemClasses = generateUtilityClasses('MuiTreeItem', ['root', 'groupTransition', 'content', 'expanded', 'selected', 'focused', 'disabled', 'iconContainer', 'label']);

package/modern/TreeView/TreeView.js

@@ -69,7 +69,8 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    */
   apiRef: PropTypes.shape({
     current: PropTypes.shape({
-      focusNode: PropTypes.func.isRequired
+      focusNode: PropTypes.func.isRequired,
+      getItem: PropTypes.func.isRequired
     })
   }),
   /**

package/modern/index.js

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

package/modern/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js

@@ -13,22 +13,36 @@ export const useTreeViewJSXNodes = ({
 }) => {
   const insertJSXNode = useEventCallback(node => {
     setState(prevState => {
-      if (prevState.nodeMap[node.id] != null) {
+      if (prevState.nodes.nodeMap[node.id] != null) {
         throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', `Tow items were provided with the same id in the \`items\` prop: "${node.id}"`].join('\n'));
       }
       return _extends({}, prevState, {
-        nodeMap: _extends({}, prevState.nodeMap, {
-          [node.id]: node
+        nodes: _extends({}, prevState.nodes, {
+          nodeMap: _extends({}, prevState.nodes.nodeMap, {
+            [node.id]: node
+          }),
+          // For `SimpleTreeView`, we don't have a proper `item` object, so we create a very basic one.
+          itemMap: _extends({}, prevState.nodes.itemMap, {
+            [node.id]: {
+              id: node.id,
+              label: node.label
+            }
+          })
         })
       });
     });
   });
   const removeJSXNode = useEventCallback(nodeId => {
     setState(prevState => {
-      const newMap = _extends({}, prevState.nodeMap);
-      delete newMap[nodeId];
+      const newNodeMap = _extends({}, prevState.nodes.nodeMap);
+      const newItemMap = _extends({}, prevState.nodes.itemMap);
+      delete newNodeMap[nodeId];
+      delete newItemMap[nodeId];
       return _extends({}, prevState, {
-        nodeMap: newMap
+        nodes: _extends({}, prevState.nodes, {
+          nodeMap: newNodeMap,
+          itemMap: newItemMap
+        })
       });
     });
     publishTreeViewEvent(instance, 'removeNode', {

package/modern/internals/plugins/useTreeViewNodes/useTreeViewNodes.js

@@ -1,15 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { populateInstance } from '../../useTreeView/useTreeView.utils';
+import { populateInstance, populatePublicAPI } from '../../useTreeView/useTreeView.utils';
 import { publishTreeViewEvent } from '../../utils/publishTreeViewEvent';
-const updateState = ({
+const updateNodesState = ({
   items,
   isItemDisabled,
   getItemLabel,
   getItemId
 }) => {
   const nodeMap = {};
+  const itemMap = {};
   const processItem = (item, index, parentId) => {
     const id = getItemId ? getItemId(item) : item.id;
     if (id == null) {
@@ -27,10 +28,11 @@ const updateState = ({
       label,
       index,
       parentId,
-      idAttribute: id,
+      idAttribute: undefined,
       expandable: !!item.children?.length,
       disabled: isItemDisabled ? isItemDisabled(item) : false
     };
+    itemMap[id] = item;
     return {
       id,
       children: item.children?.map((child, childIndex) => processItem(child, childIndex, id))
@@ -39,16 +41,19 @@ const updateState = ({
   const nodeTree = items.map((item, itemIndex) => processItem(item, itemIndex, null));
   return {
     nodeMap,
-    nodeTree
+    nodeTree,
+    itemMap
   };
 };
 export const useTreeViewNodes = ({
   instance,
+  publicAPI,
   params,
   state,
   setState
 }) => {
-  const getNode = React.useCallback(nodeId => state.nodeMap[nodeId], [state.nodeMap]);
+  const getNode = React.useCallback(nodeId => state.nodes.nodeMap[nodeId], [state.nodes.nodeMap]);
+  const getItem = React.useCallback(nodeId => state.nodes.itemMap[nodeId], [state.nodes.itemMap]);
   const isNodeDisabled = React.useCallback(nodeId => {
     if (nodeId == null) {
       return false;
@@ -70,7 +75,7 @@ export const useTreeViewNodes = ({
     }
     return false;
   }, [instance]);
-  const getChildrenIds = useEventCallback(nodeId => Object.values(state.nodeMap).filter(node => node.parentId === nodeId).sort((a, b) => a.index - b.index).map(child => child.id));
+  const getChildrenIds = useEventCallback(nodeId => Object.values(state.nodes.nodeMap).filter(node => node.parentId === nodeId).sort((a, b) => a.index - b.index).map(child => child.id));
   const getNavigableChildrenIds = nodeId => {
     let childrenIds = instance.getChildrenIds(nodeId);
     if (!params.disabledItemsFocusable) {
@@ -80,20 +85,22 @@ export const useTreeViewNodes = ({
   };
   React.useEffect(() => {
     setState(prevState => {
-      const newState = updateState({
+      const newState = updateNodesState({
         items: params.items,
         isItemDisabled: params.isItemDisabled,
         getItemId: params.getItemId,
         getItemLabel: params.getItemLabel
       });
-      Object.values(prevState.nodeMap).forEach(node => {
+      Object.values(prevState.nodes.nodeMap).forEach(node => {
         if (!newState.nodeMap[node.id]) {
           publishTreeViewEvent(instance, 'removeNode', {
             id: node.id
           });
         }
       });
-      return _extends({}, prevState, newState);
+      return _extends({}, prevState, {
+        nodes: newState
+      });
     });
   }, [instance, setState, params.items, params.isItemDisabled, params.getItemId, params.getItemLabel]);
   const getNodesToRender = useEventCallback(() => {
@@ -101,7 +108,7 @@ export const useTreeViewNodes = ({
       id,
       children
     }) => {
-      const node = state.nodeMap[id];
+      const node = state.nodes.nodeMap[id];
       return {
         label: node.label,
         nodeId: node.id,
@@ -109,26 +116,32 @@ export const useTreeViewNodes = ({
         children: children?.map(getPropsFromNodeId)
       };
     };
-    return state.nodeTree.map(getPropsFromNodeId);
+    return state.nodes.nodeTree.map(getPropsFromNodeId);
   });
   populateInstance(instance, {
     getNode,
+    getItem,
     getNodesToRender,
     getChildrenIds,
     getNavigableChildrenIds,
     isNodeDisabled
   });
+  populatePublicAPI(publicAPI, {
+    getItem
+  });
   return {
     contextValue: {
       disabledItemsFocusable: params.disabledItemsFocusable
     }
   };
 };
-useTreeViewNodes.getInitialState = params => updateState({
-  items: params.items,
-  isItemDisabled: params.isItemDisabled,
-  getItemId: params.getItemId,
-  getItemLabel: params.getItemLabel
+useTreeViewNodes.getInitialState = params => ({
+  nodes: updateNodesState({
+    items: params.items,
+    isItemDisabled: params.isItemDisabled,
+    getItemId: params.getItemId,
+    getItemLabel: params.getItemLabel
+  })
 });
 useTreeViewNodes.getDefaultizedParams = params => _extends({}, params, {
   disabledItemsFocusable: params.disabledItemsFocusable ?? false

package/node/RichTreeView/RichTreeView.js

@@ -146,7 +146,8 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    */
   apiRef: _propTypes.default.shape({
     current: _propTypes.default.shape({
-      focusNode: _propTypes.default.func.isRequired
+      focusNode: _propTypes.default.func.isRequired,
+      getItem: _propTypes.default.func.isRequired
     })
   }),
   /**

package/node/SimpleTreeView/SimpleTreeView.js

@@ -104,7 +104,8 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
    */
   apiRef: _propTypes.default.shape({
     current: _propTypes.default.shape({
-      focusNode: _propTypes.default.func.isRequired
+      focusNode: _propTypes.default.func.isRequired,
+      getItem: _propTypes.default.func.isRequired
     })
   }),
   /**