@mui/x-tree-view 7.0.0 → 7.1.1

package/internals/models/plugin.d.ts

@@ -97,7 +97,7 @@ type TreeViewUsedPlugins<TSignature extends TreeViewAnyPluginSignature> = [
     TreeViewCorePluginsSignature,
     ...TSignature['dependantPlugins']
 ];
-type TreeViewUsedParams<TSignature extends TreeViewAnyPluginSignature> = TSignature['params'] & MergePluginsProperty<TreeViewUsedPlugins<TSignature>, 'params'>;
+export type TreeViewUsedParams<TSignature extends TreeViewAnyPluginSignature> = TSignature['params'] & MergePluginsProperty<TreeViewUsedPlugins<TSignature>, 'params'>;
 type TreeViewUsedDefaultizedParams<TSignature extends TreeViewAnyPluginSignature> = TSignature['defaultizedParams'] & MergePluginsProperty<TreeViewUsedPlugins<TSignature>, 'defaultizedParams'>;
 export type TreeViewUsedInstance<TSignature extends TreeViewAnyPluginSignature> = TSignature['instance'] & MergePluginsProperty<TreeViewUsedPlugins<TSignature>, 'instance'> & {
     /**

package/internals/plugins/defaultPlugins.d.ts

@@ -1,13 +1,13 @@
 import { UseTreeViewIdParameters } from './useTreeViewId';
-import { UseTreeViewNodesParameters } from './useTreeViewNodes';
+import { UseTreeViewItemsParameters } from './useTreeViewItems';
 import { UseTreeViewExpansionParameters } from './useTreeViewExpansion';
 import { UseTreeViewSelectionParameters } from './useTreeViewSelection';
 import { UseTreeViewFocusParameters } from './useTreeViewFocus';
 import { UseTreeViewIconsParameters } from './useTreeViewIcons';
 import { ConvertPluginsIntoSignatures, MergePluginsProperty } from '../models';
-export declare const DEFAULT_TREE_VIEW_PLUGINS: readonly [import("../models").TreeViewPlugin<import("./useTreeViewId").UseTreeViewIdSignature>, import("../models").TreeViewPlugin<import("./useTreeViewNodes").UseTreeViewNodesSignature>, import("../models").TreeViewPlugin<import("./useTreeViewExpansion").UseTreeViewExpansionSignature>, import("../models").TreeViewPlugin<import("./useTreeViewSelection").UseTreeViewSelectionSignature>, import("../models").TreeViewPlugin<import("./useTreeViewFocus").UseTreeViewFocusSignature>, import("../models").TreeViewPlugin<import("./useTreeViewKeyboardNavigation").UseTreeViewKeyboardNavigationSignature>, import("../models").TreeViewPlugin<import("./useTreeViewIcons").UseTreeViewIconsSignature>];
+export declare const DEFAULT_TREE_VIEW_PLUGINS: readonly [import("../models").TreeViewPlugin<import("./useTreeViewId").UseTreeViewIdSignature>, import("../models").TreeViewPlugin<import("./useTreeViewItems").UseTreeViewItemsSignature>, import("../models").TreeViewPlugin<import("./useTreeViewExpansion").UseTreeViewExpansionSignature>, import("../models").TreeViewPlugin<import("./useTreeViewSelection").UseTreeViewSelectionSignature>, import("../models").TreeViewPlugin<import("./useTreeViewFocus").UseTreeViewFocusSignature>, import("../models").TreeViewPlugin<import("./useTreeViewKeyboardNavigation").UseTreeViewKeyboardNavigationSignature>, import("../models").TreeViewPlugin<import("./useTreeViewIcons").UseTreeViewIconsSignature>];
 export type DefaultTreeViewPlugins = ConvertPluginsIntoSignatures<typeof DEFAULT_TREE_VIEW_PLUGINS>;
 export type DefaultTreeViewPluginSlots = MergePluginsProperty<DefaultTreeViewPlugins, 'slots'>;
 export type DefaultTreeViewPluginSlotProps = MergePluginsProperty<DefaultTreeViewPlugins, 'slotProps'>;
-export interface DefaultTreeViewPluginParameters<R extends {}, Multiple extends boolean | undefined> extends UseTreeViewIdParameters, UseTreeViewNodesParameters<R>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple>, UseTreeViewIconsParameters {
+export interface DefaultTreeViewPluginParameters<R extends {}, Multiple extends boolean | undefined> extends UseTreeViewIdParameters, UseTreeViewItemsParameters<R>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple>, UseTreeViewIconsParameters {
 }

package/internals/plugins/defaultPlugins.js

@@ -1,10 +1,10 @@
 import { useTreeViewId } from './useTreeViewId';
-import { useTreeViewNodes } from './useTreeViewNodes';
+import { useTreeViewItems } from './useTreeViewItems';
 import { useTreeViewExpansion } from './useTreeViewExpansion';
 import { useTreeViewSelection } from './useTreeViewSelection';
 import { useTreeViewFocus } from './useTreeViewFocus';
 import { useTreeViewKeyboardNavigation } from './useTreeViewKeyboardNavigation';
 import { useTreeViewIcons } from './useTreeViewIcons';
-export const DEFAULT_TREE_VIEW_PLUGINS = [useTreeViewId, useTreeViewNodes, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewIcons];
+export const DEFAULT_TREE_VIEW_PLUGINS = [useTreeViewId, useTreeViewItems, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewIcons];
 
 // We can't infer this type from the plugin, otherwise we would lose the generics.

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -1,40 +1,50 @@
 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';
 export const useTreeViewExpansion = ({
   instance,
+  publicAPI,
   params,
   models
 }) => {
+  const expandedItemsMap = React.useMemo(() => {
+    const temp = new Map();
+    models.expandedItems.value.forEach(id => {
+      temp.set(id, true);
+    });
+    return temp;
+  }, [models.expandedItems.value]);
   const setExpandedItems = (event, value) => {
     params.onExpandedItemsChange?.(event, value);
     models.expandedItems.setControlledValue(value);
   };
-  const isNodeExpanded = React.useCallback(itemId => {
-    return Array.isArray(models.expandedItems.value) ? models.expandedItems.value.indexOf(itemId) !== -1 : false;
-  }, [models.expandedItems.value]);
-  const isNodeExpandable = React.useCallback(itemId => !!instance.getNode(itemId)?.expandable, [instance]);
-  const toggleNodeExpansion = useEventCallback((event, itemId) => {
-    if (itemId == null) {
+  const isItemExpanded = React.useCallback(itemId => expandedItemsMap.has(itemId), [expandedItemsMap]);
+  const isItemExpandable = React.useCallback(itemId => !!instance.getNode(itemId)?.expandable, [instance]);
+  const toggleItemExpansion = useEventCallback((event, itemId) => {
+    const isExpandedBefore = instance.isItemExpanded(itemId);
+    instance.setItemExpansion(event, itemId, !isExpandedBefore);
+  });
+  const setItemExpansion = useEventCallback((event, itemId, isExpanded) => {
+    const isExpandedBefore = instance.isItemExpanded(itemId);
+    if (isExpandedBefore === isExpanded) {
       return;
     }
-    const isExpandedBefore = models.expandedItems.value.indexOf(itemId) !== -1;
     let newExpanded;
-    if (isExpandedBefore) {
-      newExpanded = models.expandedItems.value.filter(id => id !== itemId);
-    } else {
+    if (isExpanded) {
       newExpanded = [itemId].concat(models.expandedItems.value);
+    } else {
+      newExpanded = models.expandedItems.value.filter(id => id !== itemId);
     }
     if (params.onItemExpansionToggle) {
-      params.onItemExpansionToggle(event, itemId, !isExpandedBefore);
+      params.onItemExpansionToggle(event, itemId, isExpanded);
     }
     setExpandedItems(event, newExpanded);
   });
   const expandAllSiblings = (event, itemId) => {
     const node = instance.getNode(itemId);
     const siblings = instance.getChildrenIds(node.parentId);
-    const diff = siblings.filter(child => instance.isNodeExpandable(child) && !instance.isNodeExpanded(child));
+    const diff = siblings.filter(child => instance.isItemExpandable(child) && !instance.isItemExpanded(child));
     const newExpanded = models.expandedItems.value.concat(diff);
     if (diff.length > 0) {
       if (params.onItemExpansionToggle) {
@@ -46,20 +56,24 @@ export const useTreeViewExpansion = ({
     }
   };
   populateInstance(instance, {
-    isNodeExpanded,
-    isNodeExpandable,
-    toggleNodeExpansion,
+    isItemExpanded,
+    isItemExpandable,
+    setItemExpansion,
+    toggleItemExpansion,
     expandAllSiblings
   });
+  populatePublicAPI(publicAPI, {
+    setItemExpansion
+  });
 };
 useTreeViewExpansion.models = {
   expandedItems: {
     getDefaultValue: params => params.defaultExpandedItems
   }
 };
-const DEFAULT_EXPANDED_NODES = [];
+const DEFAULT_EXPANDED_ITEMS = [];
 useTreeViewExpansion.getDefaultizedParams = params => _extends({}, params, {
-  defaultExpandedItems: params.defaultExpandedItems ?? DEFAULT_EXPANDED_NODES
+  defaultExpandedItems: params.defaultExpandedItems ?? DEFAULT_EXPANDED_ITEMS
 });
 useTreeViewExpansion.params = {
   expandedItems: true,

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

@@ -1,10 +1,19 @@
 import * as React from 'react';
 import { DefaultizedProps, TreeViewPluginSignature } from '../../models';
-import { UseTreeViewNodesSignature } from '../useTreeViewNodes';
-export interface UseTreeViewExpansionInstance {
-    isNodeExpanded: (itemId: string) => boolean;
-    isNodeExpandable: (itemId: string) => boolean;
-    toggleNodeExpansion: (event: React.SyntheticEvent, value: string) => void;
+import { UseTreeViewItemsSignature } from '../useTreeViewItems';
+export interface UseTreeViewExpansionPublicAPI {
+    /**
+     * Change the expansion status of a given item.
+     * @param {React.SyntheticEvent} event The UI event that triggered the change.
+     * @param {string} itemId The id of the item to modify.
+     * @param {boolean} isExpanded The new expansion status of the given item.
+     */
+    setItemExpansion: (event: React.SyntheticEvent, itemId: string, isExpanded: boolean) => void;
+}
+export interface UseTreeViewExpansionInstance extends UseTreeViewExpansionPublicAPI {
+    isItemExpanded: (itemId: string) => boolean;
+    isItemExpandable: (itemId: string) => boolean;
+    toggleItemExpansion: (event: React.SyntheticEvent, itemId: string) => void;
     expandAllSiblings: (event: React.KeyboardEvent, itemId: string) => void;
 }
 export interface UseTreeViewExpansionParameters {
@@ -38,6 +47,7 @@ export type UseTreeViewExpansionSignature = TreeViewPluginSignature<{
     params: UseTreeViewExpansionParameters;
     defaultizedParams: UseTreeViewExpansionDefaultizedParameters;
     instance: UseTreeViewExpansionInstance;
+    publicAPI: UseTreeViewExpansionPublicAPI;
     modelNames: 'expandedItems';
-    dependantPlugins: [UseTreeViewNodesSignature];
+    dependantPlugins: [UseTreeViewItemsSignature];
 }>;

package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -8,7 +8,7 @@ import { getActiveElement } from '../../utils/utils';
 const useTabbableItemId = (instance, selectedItems) => {
   const isItemVisible = itemId => {
     const node = instance.getNode(itemId);
-    return node && (node.parentId == null || instance.isNodeExpanded(node.parentId));
+    return node && (node.parentId == null || instance.isItemExpanded(node.parentId));
   };
   let tabbableItemId;
   if (Array.isArray(selectedItems)) {
@@ -32,18 +32,18 @@ export const useTreeViewFocus = ({
 }) => {
   const tabbableItemId = useTabbableItemId(instance, models.selectedItems.value);
   const setFocusedItemId = useEventCallback(itemId => {
-    const cleanItemId = typeof itemId === 'function' ? itemId(state.focusedNodeId) : itemId;
-    if (state.focusedNodeId !== cleanItemId) {
+    const cleanItemId = typeof itemId === 'function' ? itemId(state.focusedItemId) : itemId;
+    if (state.focusedItemId !== cleanItemId) {
       setState(prevState => _extends({}, prevState, {
-        focusedNodeId: cleanItemId
+        focusedItemId: cleanItemId
       }));
     }
   });
   const isTreeViewFocused = React.useCallback(() => !!rootRef.current && rootRef.current.contains(getActiveElement(ownerDocument(rootRef.current))), [rootRef]);
-  const isNodeFocused = React.useCallback(itemId => state.focusedNodeId === itemId && isTreeViewFocused(), [state.focusedNodeId, isTreeViewFocused]);
-  const isNodeVisible = itemId => {
+  const isItemFocused = React.useCallback(itemId => state.focusedItemId === itemId && isTreeViewFocused(), [state.focusedItemId, isTreeViewFocused]);
+  const isItemVisible = itemId => {
     const node = instance.getNode(itemId);
-    return node && (node.parentId == null || instance.isNodeExpanded(node.parentId));
+    return node && (node.parentId == null || instance.isItemExpanded(node.parentId));
   };
   const innerFocusItem = (event, itemId) => {
     const node = instance.getNode(itemId);
@@ -56,62 +56,64 @@ export const useTreeViewFocus = ({
       params.onItemFocus(event, itemId);
     }
   };
-  const focusItem = useEventCallback((event, nodeId) => {
-    // If we receive a nodeId, and it is visible, the focus will be set to it
-    if (isNodeVisible(nodeId)) {
-      innerFocusItem(event, nodeId);
+  const focusItem = useEventCallback((event, itemId) => {
+    // If we receive an itemId, and it is visible, the focus will be set to it
+    if (isItemVisible(itemId)) {
+      innerFocusItem(event, itemId);
     }
   });
-  const focusDefaultNode = useEventCallback(event => {
-    let nodeToFocusId;
+  const focusDefaultItem = useEventCallback(event => {
+    let itemToFocusId;
     if (Array.isArray(models.selectedItems.value)) {
-      nodeToFocusId = models.selectedItems.value.find(isNodeVisible);
-    } else if (models.selectedItems.value != null && isNodeVisible(models.selectedItems.value)) {
-      nodeToFocusId = models.selectedItems.value;
+      itemToFocusId = models.selectedItems.value.find(isItemVisible);
+    } else if (models.selectedItems.value != null && isItemVisible(models.selectedItems.value)) {
+      itemToFocusId = models.selectedItems.value;
     }
-    if (nodeToFocusId == null) {
-      nodeToFocusId = instance.getNavigableChildrenIds(null)[0];
+    if (itemToFocusId == null) {
+      itemToFocusId = instance.getNavigableChildrenIds(null)[0];
     }
-    innerFocusItem(event, nodeToFocusId);
+    innerFocusItem(event, itemToFocusId);
   });
   const removeFocusedItem = useEventCallback(() => {
-    if (state.focusedNodeId == null) {
+    if (state.focusedItemId == null) {
       return;
     }
-    const node = instance.getNode(state.focusedNodeId);
-    const itemElement = document.getElementById(instance.getTreeItemId(state.focusedNodeId, node.idAttribute));
-    if (itemElement) {
-      itemElement.blur();
+    const node = instance.getNode(state.focusedItemId);
+    if (node) {
+      const itemElement = document.getElementById(instance.getTreeItemId(state.focusedItemId, node.idAttribute));
+      if (itemElement) {
+        itemElement.blur();
+      }
     }
     setFocusedItemId(null);
   });
   const canItemBeTabbed = itemId => itemId === tabbableItemId;
   populateInstance(instance, {
-    isNodeFocused,
+    isItemFocused,
     canItemBeTabbed,
     focusItem,
-    focusDefaultNode,
+    focusDefaultItem,
     removeFocusedItem
   });
   populatePublicAPI(publicAPI, {
     focusItem
   });
-  useInstanceEventHandler(instance, 'removeNode', ({
+  useInstanceEventHandler(instance, 'removeItem', ({
     id
   }) => {
-    if (state.focusedNodeId === id) {
-      instance.focusDefaultNode(null);
+    if (state.focusedItemId === id) {
+      instance.focusDefaultItem(null);
     }
   });
   const createHandleFocus = otherHandlers => event => {
     otherHandlers.onFocus?.(event);
     // if the event bubbled (which is React specific) we don't want to steal focus
     if (event.target === event.currentTarget) {
-      instance.focusDefaultNode(event);
+      instance.focusDefaultItem(event);
     }
   };
-  const focusedNode = instance.getNode(state.focusedNodeId);
-  const activeDescendant = focusedNode ? instance.getTreeItemId(focusedNode.id, focusedNode.idAttribute) : null;
+  const focusedItem = instance.getNode(state.focusedItemId);
+  const activeDescendant = focusedItem ? instance.getTreeItemId(focusedItem.id, focusedItem.idAttribute) : null;
   return {
     getRootProps: otherHandlers => ({
       onFocus: createHandleFocus(otherHandlers),
@@ -120,7 +122,7 @@ export const useTreeViewFocus = ({
   };
 };
 useTreeViewFocus.getInitialState = () => ({
-  focusedNodeId: null
+  focusedItemId: null
 });
 useTreeViewFocus.params = {
   onItemFocus: true

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

@@ -1,18 +1,26 @@
 import * as React from 'react';
 import { TreeViewPluginSignature } from '../../models';
 import { UseTreeViewIdSignature } from '../useTreeViewId/useTreeViewId.types';
-import type { UseTreeViewNodesSignature } from '../useTreeViewNodes';
+import type { UseTreeViewItemsSignature } from '../useTreeViewItems';
 import type { UseTreeViewSelectionSignature } from '../useTreeViewSelection';
 import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion';
-export interface UseTreeViewFocusInstance {
-    isNodeFocused: (itemId: string) => boolean;
+export interface UseTreeViewFocusPublicAPI {
+    /**
+     * Focuses the item with the given id.
+     *
+     * If the item is the child of a collapsed item, then this method will do nothing.
+     * Make sure to expand the ancestors of the item before calling this method if needed.
+     * @param {React.SyntheticEvent} event The event source of the action.
+     * @param {string} itemId The id of the item to focus.
+     */
+    focusItem: (event: React.SyntheticEvent, itemId: string) => void;
+}
+export interface UseTreeViewFocusInstance extends UseTreeViewFocusPublicAPI {
+    isItemFocused: (itemId: string) => boolean;
     canItemBeTabbed: (itemId: string) => boolean;
-    focusItem: (event: React.SyntheticEvent, nodeId: string) => void;
-    focusDefaultNode: (event: React.SyntheticEvent | null) => void;
+    focusDefaultItem: (event: React.SyntheticEvent | null) => void;
     removeFocusedItem: () => void;
 }
-export interface UseTreeViewFocusPublicAPI extends Pick<UseTreeViewFocusInstance, 'focusItem'> {
-}
 export interface UseTreeViewFocusParameters {
     /**
      * Callback fired when tree items are focused.
@@ -24,7 +32,7 @@ export interface UseTreeViewFocusParameters {
 }
 export type UseTreeViewFocusDefaultizedParameters = UseTreeViewFocusParameters;
 export interface UseTreeViewFocusState {
-    focusedNodeId: string | null;
+    focusedItemId: string | null;
 }
 export type UseTreeViewFocusSignature = TreeViewPluginSignature<{
     params: UseTreeViewFocusParameters;
@@ -34,7 +42,7 @@ export type UseTreeViewFocusSignature = TreeViewPluginSignature<{
     state: UseTreeViewFocusState;
     dependantPlugins: [
         UseTreeViewIdSignature,
-        UseTreeViewNodesSignature,
+        UseTreeViewItemsSignature,
         UseTreeViewSelectionSignature,
         UseTreeViewExpansionSignature
     ];

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

@@ -1,23 +1,23 @@
 import * as React from 'react';
 import { SlotComponentProps } from '@mui/base/utils';
 import { TreeViewPluginSignature } from '../../models';
-import { UseTreeViewNodesSignature } from '../useTreeViewNodes';
+import { UseTreeViewItemsSignature } from '../useTreeViewItems';
 import { UseTreeViewSelectionSignature } from '../useTreeViewSelection';
 export interface UseTreeViewIconsParameters {
 }
 export type UseTreeViewIconsDefaultizedParameters = UseTreeViewIconsParameters;
 interface UseTreeViewIconsSlots {
     /**
-     * The default icon used to collapse the node.
+     * The default icon used to collapse the item.
      */
     collapseIcon?: React.ElementType;
     /**
-     * The default icon used to expand the node.
+     * The default icon used to expand the item.
      */
     expandIcon?: React.ElementType;
     /**
-     * The default icon displayed next to an end node.
-     * This is applied to all tree nodes and can be overridden by the TreeItem `icon` slot prop.
+     * The default icon displayed next to an end item.
+     * This is applied to all tree items and can be overridden by the TreeItem `icon` slot prop.
      */
     endIcon?: React.ElementType;
 }
@@ -38,6 +38,6 @@ export type UseTreeViewIconsSignature = TreeViewPluginSignature<{
     contextValue: UseTreeViewIconsContextValue;
     slots: UseTreeViewIconsSlots;
     slotProps: UseTreeViewIconsSlotProps;
-    dependantPlugins: [UseTreeViewNodesSignature, UseTreeViewSelectionSignature];
+    dependantPlugins: [UseTreeViewItemsSignature, UseTreeViewSelectionSignature];
 }>;
 export {};

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

@@ -11,7 +11,7 @@ export interface UseTreeViewIdParameters {
 }
 export type UseTreeViewIdDefaultizedParameters = UseTreeViewIdParameters;
 export interface UseTreeViewIdState {
-    focusedNodeId: string | null;
+    focusedItemId: string | null;
 }
 export type UseTreeViewIdSignature = TreeViewPluginSignature<{
     params: UseTreeViewIdParameters;

package/internals/plugins/useTreeViewItems/index.d.ts

@@ -0,0 +1,2 @@
+export { useTreeViewItems } from './useTreeViewItems';
+export type { UseTreeViewItemsSignature, UseTreeViewItemsParameters, UseTreeViewItemsDefaultizedParameters, } from './useTreeViewItems.types';

package/internals/plugins/useTreeViewItems/index.js

@@ -0,0 +1 @@
+export { useTreeViewItems } from './useTreeViewItems';

package/internals/plugins/useTreeViewItems/useTreeViewItems.d.ts

@@ -0,0 +1,3 @@
+import { TreeViewPlugin } from '../../models';
+import { UseTreeViewItemsSignature } from './useTreeViewItems.types';
+export declare const useTreeViewItems: TreeViewPlugin<UseTreeViewItemsSignature>;

package/internals/plugins/{useTreeViewNodes/useTreeViewNodes.js → useTreeViewItems/useTreeViewItems.js}

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { populateInstance, populatePublicAPI } from '../../useTreeView/useTreeView.utils';
 import { publishTreeViewEvent } from '../../utils/publishTreeViewEvent';
-const updateNodesState = ({
+const updateItemsState = ({
   items,
   isItemDisabled,
   getItemLabel,
@@ -16,7 +16,7 @@ const updateNodesState = ({
       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.', 'An item was provided without id in the `items` prop:', JSON.stringify(item)].join('\n'));
     }
     if (nodeMap[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: "${id}"`].join('\n'));
+      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.', `Two items were provided with the same id in the \`items\` prop: "${id}"`].join('\n'));
     }
     const label = getItemLabel ? getItemLabel(item) : item.label;
     if (label == null) {
@@ -44,86 +44,96 @@ const updateNodesState = ({
     itemMap
   };
 };
-export const useTreeViewNodes = ({
+export const useTreeViewItems = ({
   instance,
   publicAPI,
   params,
   state,
   setState
 }) => {
-  const getNode = React.useCallback(itemId => state.nodes.nodeMap[itemId], [state.nodes.nodeMap]);
-  const getItem = React.useCallback(itemId => state.nodes.itemMap[itemId], [state.nodes.itemMap]);
-  const isNodeDisabled = React.useCallback(itemId => {
+  const getNode = React.useCallback(itemId => state.items.nodeMap[itemId], [state.items.nodeMap]);
+  const getItem = React.useCallback(itemId => state.items.itemMap[itemId], [state.items.itemMap]);
+  const isItemDisabled = React.useCallback(itemId => {
     if (itemId == null) {
       return false;
     }
-    let item = instance.getNode(itemId);
+    let node = instance.getNode(itemId);
 
-    // This can be called before the item has been added to the node map.
-    if (!item) {
+    // This can be called before the item has been added to the item map.
+    if (!node) {
       return false;
     }
-    if (item.disabled) {
+    if (node.disabled) {
       return true;
     }
-    while (item.parentId != null) {
-      item = instance.getNode(item.parentId);
-      if (item.disabled) {
+    while (node.parentId != null) {
+      node = instance.getNode(node.parentId);
+      if (node.disabled) {
         return true;
       }
     }
     return false;
   }, [instance]);
-  const getChildrenIds = React.useCallback(itemId => Object.values(state.nodes.nodeMap).filter(item => item.parentId === itemId).sort((a, b) => a.index - b.index).map(child => child.id), [state.nodes.nodeMap]);
+  const getChildrenIds = React.useCallback(itemId => Object.values(state.items.nodeMap).filter(item => item.parentId === itemId).sort((a, b) => a.index - b.index).map(child => child.id), [state.items.nodeMap]);
   const getNavigableChildrenIds = itemId => {
     let childrenIds = instance.getChildrenIds(itemId);
     if (!params.disabledItemsFocusable) {
-      childrenIds = childrenIds.filter(item => !instance.isNodeDisabled(item));
+      childrenIds = childrenIds.filter(item => !instance.isItemDisabled(item));
     }
     return childrenIds;
   };
+  const areItemUpdatesPreventedRef = React.useRef(false);
+  const preventItemUpdates = React.useCallback(() => {
+    areItemUpdatesPreventedRef.current = true;
+  }, []);
+  const areItemUpdatesPrevented = React.useCallback(() => areItemUpdatesPreventedRef.current, []);
   React.useEffect(() => {
+    if (instance.areItemUpdatesPrevented()) {
+      return;
+    }
     setState(prevState => {
-      const newState = updateNodesState({
+      const newState = updateItemsState({
         items: params.items,
         isItemDisabled: params.isItemDisabled,
         getItemId: params.getItemId,
         getItemLabel: params.getItemLabel
       });
-      Object.values(prevState.nodes.nodeMap).forEach(node => {
-        if (!newState.nodeMap[node.id]) {
-          publishTreeViewEvent(instance, 'removeNode', {
-            id: node.id
+      Object.values(prevState.items.nodeMap).forEach(item => {
+        if (!newState.nodeMap[item.id]) {
+          publishTreeViewEvent(instance, 'removeItem', {
+            id: item.id
           });
         }
       });
       return _extends({}, prevState, {
-        nodes: newState
+        items: newState
       });
     });
   }, [instance, setState, params.items, params.isItemDisabled, params.getItemId, params.getItemLabel]);
-  const getNodesToRender = () => {
+  const getItemsToRender = () => {
     const getPropsFromItemId = ({
       id,
       children
     }) => {
-      const node = state.nodes.nodeMap[id];
+      const item = state.items.nodeMap[id];
       return {
-        label: node.label,
-        itemId: node.id,
-        id: node.idAttribute,
+        label: item.label,
+        itemId: item.id,
+        id: item.idAttribute,
         children: children?.map(getPropsFromItemId)
       };
     };
-    return state.nodes.nodeTree.map(getPropsFromItemId);
+    return state.items.nodeTree.map(getPropsFromItemId);
   };
   populateInstance(instance, {
     getNode,
     getItem,
-    getNodesToRender,
+    getItemsToRender,
     getChildrenIds,
     getNavigableChildrenIds,
-    isNodeDisabled
+    isItemDisabled,
+    preventItemUpdates,
+    areItemUpdatesPrevented
   });
   populatePublicAPI(publicAPI, {
     getItem
@@ -134,18 +144,18 @@ export const useTreeViewNodes = ({
     }
   };
 };
-useTreeViewNodes.getInitialState = params => ({
-  nodes: updateNodesState({
+useTreeViewItems.getInitialState = params => ({
+  items: updateItemsState({
     items: params.items,
     isItemDisabled: params.isItemDisabled,
     getItemId: params.getItemId,
     getItemLabel: params.getItemLabel
   })
 });
-useTreeViewNodes.getDefaultizedParams = params => _extends({}, params, {
+useTreeViewItems.getDefaultizedParams = params => _extends({}, params, {
   disabledItemsFocusable: params.disabledItemsFocusable ?? false
 });
-useTreeViewNodes.params = {
+useTreeViewItems.params = {
   disabledItemsFocusable: true,
   items: true,
   isItemDisabled: true,