@mui/x-tree-view 8.23.0 → 8.24.0

package/esm/internals/plugins/jsxItems/TreeViewJSXItemsPlugin.js

@@ -0,0 +1,81 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "../items/index.js";
+import { jsxItemsitemWrapper, useJSXItemsItemPlugin } from "./itemPlugin.js";
+export class TreeViewJSXItemsPlugin {
+  constructor(store) {
+    this.store = store;
+    store.itemPluginManager.register(useJSXItemsItemPlugin, jsxItemsitemWrapper);
+  }
+
+  /**
+   * Insert a new item in the state from a Tree Item component.
+   * @param {TreeViewItemMeta} item The meta-information of the item to insert.
+   * @returns {() => void} A function to remove the item from the state.
+   */
+  insertJSXItem = item => {
+    if (this.store.state.itemMetaLookup[item.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.', `Two items were provided with the same id in the \`items\` prop: "${item.id}"`].join('\n'));
+    }
+    this.store.update({
+      itemMetaLookup: _extends({}, this.store.state.itemMetaLookup, {
+        [item.id]: item
+      }),
+      // For Simple Tree View, we don't have a proper `item` object, so we create a very basic one.
+      itemModelLookup: _extends({}, this.store.state.itemModelLookup, {
+        [item.id]: {
+          id: item.id,
+          label: item.label ?? ''
+        }
+      })
+    });
+    return () => {
+      const newItemMetaLookup = _extends({}, this.store.state.itemMetaLookup);
+      const newItemModelLookup = _extends({}, this.store.state.itemModelLookup);
+      delete newItemMetaLookup[item.id];
+      delete newItemModelLookup[item.id];
+      this.store.update({
+        itemMetaLookup: newItemMetaLookup,
+        itemModelLookup: newItemModelLookup
+      });
+    };
+  };
+
+  /**
+   * Updates the `labelMap` to register the first character of the given item's label.
+   * This map is used to navigate the tree using type-ahead search.
+   * @param {TreeViewItemId} itemId The id of the item to map the label of.
+   * @param {string} label The item's label.
+   * @returns {() => void} A function to remove the item from the `labelMap`.
+   */
+  mapLabelFromJSX = (itemId, label) => {
+    this.store.keyboardNavigation.updateLabelMap(labelMap => {
+      labelMap[itemId] = label;
+      return labelMap;
+    });
+    return () => {
+      this.store.keyboardNavigation.updateLabelMap(labelMap => {
+        const newMap = _extends({}, labelMap);
+        delete newMap[itemId];
+        return newMap;
+      });
+    };
+  };
+
+  /**
+   * Store the ids of a given item's children in the state.
+   * Those ids must be passed in the order they should be rendered.
+   * @param {TreeViewItemId | null} parentId The id of the item to store the children of.
+   * @param {TreeViewItemId[]} orderedChildrenIds The ids of the item's children.
+   */
+  setJSXItemsOrderedChildrenIds = (parentId, orderedChildrenIds) => {
+    const parentIdWithDefault = parentId ?? TREE_VIEW_ROOT_PARENT_ID;
+    this.store.update({
+      itemOrderedChildrenIdsLookup: _extends({}, this.store.state.itemOrderedChildrenIdsLookup, {
+        [parentIdWithDefault]: orderedChildrenIds
+      }),
+      itemChildrenIndexesLookup: _extends({}, this.store.state.itemChildrenIndexesLookup, {
+        [parentIdWithDefault]: buildSiblingIndexes(orderedChildrenIds)
+      })
+    });
+  };
+}

package/esm/internals/plugins/jsxItems/index.d.ts

@@ -0,0 +1 @@
+export * from "./TreeViewJSXItemsPlugin.js";

package/esm/internals/plugins/jsxItems/index.js

@@ -0,0 +1 @@
+export * from "./TreeViewJSXItemsPlugin.js";

package/esm/internals/plugins/jsxItems/itemPlugin.d.ts

@@ -0,0 +1,4 @@
+import { TreeItemWrapper, TreeViewItemPlugin } from "../../models/index.js";
+import { SimpleTreeViewStore } from "../../SimpleTreeViewStore/index.js";
+export declare const useJSXItemsItemPlugin: TreeViewItemPlugin;
+export declare const jsxItemsitemWrapper: TreeItemWrapper<SimpleTreeViewStore<any>>;

package/esm/internals/plugins/{useTreeViewJSXItems → jsxItems}/itemPlugin.js

@@ -5,17 +5,17 @@ import { useStore } from '@mui/x-internals/store';
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useTreeViewContext } from "../../TreeViewProvider/index.js";
-import { TreeViewChildrenItemContext } from "../../TreeViewProvider/TreeViewChildrenItemProvider.js";
+import { TreeViewChildrenItemContext, TreeViewChildrenItemProvider } from "../../TreeViewProvider/TreeViewChildrenItemProvider.js";
+import { TreeViewItemDepthContext } from "../../TreeViewItemDepthContext/index.js";
 import { itemHasChildren } from "../../../hooks/useTreeItemUtils/useTreeItemUtils.js";
-import { idSelectors } from "../../corePlugins/useTreeViewId/index.js";
-import { generateTreeItemIdAttribute } from "../../corePlugins/useTreeViewId/useTreeViewId.utils.js";
-export const useTreeViewJSXItemsItemPlugin = ({
+import { idSelectors } from "../id/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const useJSXItemsItemPlugin = ({
   props,
   rootRef,
   contentRef
 }) => {
   const {
-    instance,
     store
   } = useTreeViewContext();
   const {
@@ -38,23 +38,18 @@ export const useTreeViewJSXItemsItemPlugin = ({
   const expandable = itemHasChildren(children);
   const pluginContentRef = React.useRef(null);
   const handleContentRef = useMergedRefs(pluginContentRef, contentRef);
-  const treeId = useStore(store, idSelectors.treeId);
+  const idAttribute = useStore(store, idSelectors.treeItemIdAttribute, itemId, id);
 
   // Prevent any flashing
   useIsoLayoutEffect(() => {
-    const idAttribute = generateTreeItemIdAttribute({
-      itemId,
-      treeId,
-      id
-    });
     registerChild(idAttribute, itemId);
     return () => {
       unregisterChild(idAttribute);
       unregisterChild(idAttribute);
     };
-  }, [store, instance, registerChild, unregisterChild, itemId, id, treeId]);
+  }, [store, registerChild, unregisterChild, idAttribute, itemId]);
   useIsoLayoutEffect(() => {
-    return instance.insertJSXItem({
+    return store.jsxItems.insertJSXItem({
       id: itemId,
       idAttribute: id,
       parentId,
@@ -62,15 +57,32 @@ export const useTreeViewJSXItemsItemPlugin = ({
       disabled,
       selectable: !disableSelection
     });
-  }, [instance, parentId, itemId, expandable, disabled, disableSelection, id]);
+  }, [store, parentId, itemId, expandable, disabled, disableSelection, id]);
   React.useEffect(() => {
     if (label) {
-      return instance.mapLabelFromJSX(itemId, (pluginContentRef.current?.textContent ?? '').toLowerCase());
+      return store.jsxItems.mapLabelFromJSX(itemId, (pluginContentRef.current?.textContent ?? '').toLowerCase());
     }
     return undefined;
-  }, [instance, itemId, label]);
+  }, [store, itemId, label]);
   return {
     contentRef: handleContentRef,
     rootRef
   };
-};
+};
+export const jsxItemsitemWrapper = ({
+  children,
+  itemId,
+  idAttribute
+}) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const depthContext = React.useContext(TreeViewItemDepthContext);
+  return /*#__PURE__*/_jsx(TreeViewChildrenItemProvider, {
+    itemId: itemId,
+    idAttribute: idAttribute,
+    children: /*#__PURE__*/_jsx(TreeViewItemDepthContext.Provider, {
+      value: depthContext + 1,
+      children: children
+    })
+  });
+};
+if (process.env.NODE_ENV !== "production") jsxItemsitemWrapper.displayName = "jsxItemsitemWrapper";

package/esm/internals/plugins/keyboardNavigation/TreeViewKeyboardNavigationPlugin.d.ts

@@ -0,0 +1,28 @@
+import { TreeViewCancellableEvent, TreeViewItemId } from "../../../models/index.js";
+type TreeViewLabelMap = {
+  [itemId: string]: string;
+};
+export declare class TreeViewKeyboardNavigationPlugin {
+  private store;
+  private labelMap;
+  private typeaheadQuery;
+  constructor(store: any);
+  private canToggleItemSelection;
+  private canToggleItemExpansion;
+  private getFirstItemMatchingTypeaheadQuery;
+  /**
+   * Updates the `labelMap` to add/remove the first character of some item's labels.
+   * This map is used to navigate the tree using type-ahead search.
+   * This method is only used by the `useTreeViewJSXItems` plugin, otherwise the updates are handled internally.
+   * @param {(map: TreeViewLabelMap) => TreeViewLabelMap} updater The function to update the map.
+   */
+  updateLabelMap: (callback: (labelMap: TreeViewLabelMap) => TreeViewLabelMap) => void;
+  /**
+   * Callback fired when a key is pressed on an item.
+   * Handles all the keyboard navigation logic.
+   * @param {React.KeyboardEvent<HTMLElement> & TreeViewCancellableEvent} event The keyboard event that triggered the callback.
+   * @param {TreeViewItemId} itemId The id of the item that the event was triggered on.
+   */
+  handleItemKeyDown: (event: React.KeyboardEvent<HTMLElement> & TreeViewCancellableEvent, itemId: TreeViewItemId) => Promise<void>;
+}
+export {};

package/esm/internals/plugins/keyboardNavigation/TreeViewKeyboardNavigationPlugin.js

@@ -0,0 +1,306 @@
+import { expansionSelectors } from "../expansion/index.js";
+import { itemsSelectors } from "../items/index.js";
+import { labelSelectors } from "../labelEditing/index.js";
+import { selectionSelectors } from "../selection/selectors.js";
+import { getFirstNavigableItem, getLastNavigableItem, getNextNavigableItem, getPreviousNavigableItem, isTargetInDescendants } from "../../utils/tree.js";
+const TYPEAHEAD_TIMEOUT = 500;
+export class TreeViewKeyboardNavigationPlugin {
+  typeaheadQuery = '';
+
+  // We can't type `store`, otherwise we get the following TS error:
+  // 'keyboardNavigation' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
+  constructor(store) {
+    this.store = store;
+    this.labelMap = createLabelMapFromItemMetaLookup(itemsSelectors.itemMetaLookup(this.store.state));
+
+    // Whenever the itemMetaLookup changes, we need to regen the label map.
+    this.store.registerStoreEffect(itemsSelectors.itemMetaLookup, (_, itemMetaLookup) => {
+      if (this.store.shouldIgnoreItemsStateUpdate()) {
+        return;
+      }
+      this.labelMap = createLabelMapFromItemMetaLookup(itemMetaLookup);
+    });
+  }
+  canToggleItemSelection = itemId => selectionSelectors.canItemBeSelected(this.store.state, itemId);
+  canToggleItemExpansion = itemId => {
+    return !itemsSelectors.isItemDisabled(this.store.state, itemId) && expansionSelectors.isItemExpandable(this.store.state, itemId);
+  };
+  getFirstItemMatchingTypeaheadQuery = (itemId, newKey) => {
+    const getNextItem = itemIdToCheck => {
+      const nextItemId = getNextNavigableItem(this.store.state, itemIdToCheck);
+      // We reached the end of the tree, check from the beginning
+      if (nextItemId === null) {
+        return getFirstNavigableItem(this.store.state);
+      }
+      return nextItemId;
+    };
+    const getNextMatchingItemId = query => {
+      let matchingItemId = null;
+      const checkedItems = {};
+      // If query length > 1, first check if current item matches
+      let currentItemId = query.length > 1 ? itemId : getNextItem(itemId);
+      // The "!checkedItems[currentItemId]" condition avoids an infinite loop when there is no matching item.
+      while (matchingItemId == null && !checkedItems[currentItemId]) {
+        const itemLabel = this.labelMap[currentItemId];
+        if (itemLabel?.startsWith(query)) {
+          matchingItemId = currentItemId;
+        } else {
+          checkedItems[currentItemId] = true;
+          currentItemId = getNextItem(currentItemId);
+        }
+      }
+      return matchingItemId;
+    };
+    const cleanNewKey = newKey.toLowerCase();
+
+    // Try matching with accumulated query + new key
+    const concatenatedQuery = `${this.typeaheadQuery}${cleanNewKey}`;
+
+    // check if the entire typed query matches an item
+    const concatenatedQueryMatchingItemId = getNextMatchingItemId(concatenatedQuery);
+    if (concatenatedQueryMatchingItemId != null) {
+      this.typeaheadQuery = concatenatedQuery;
+      return concatenatedQueryMatchingItemId;
+    }
+    const newKeyMatchingItemId = getNextMatchingItemId(cleanNewKey);
+    if (newKeyMatchingItemId != null) {
+      this.typeaheadQuery = cleanNewKey;
+      return newKeyMatchingItemId;
+    }
+    this.typeaheadQuery = '';
+    return null;
+  };
+
+  /**
+   * Updates the `labelMap` to add/remove the first character of some item's labels.
+   * This map is used to navigate the tree using type-ahead search.
+   * This method is only used by the `useTreeViewJSXItems` plugin, otherwise the updates are handled internally.
+   * @param {(map: TreeViewLabelMap) => TreeViewLabelMap} updater The function to update the map.
+   */
+  updateLabelMap = callback => {
+    this.labelMap = callback(this.labelMap);
+  };
+
+  // ARIA specification: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboardinteraction
+  /**
+   * Callback fired when a key is pressed on an item.
+   * Handles all the keyboard navigation logic.
+   * @param {React.KeyboardEvent<HTMLElement> & TreeViewCancellableEvent} event The keyboard event that triggered the callback.
+   * @param {TreeViewItemId} itemId The id of the item that the event was triggered on.
+   */
+  handleItemKeyDown = async (event, itemId) => {
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    if (event.altKey || isTargetInDescendants(event.target, event.currentTarget)) {
+      return;
+    }
+    const ctrlPressed = event.ctrlKey || event.metaKey;
+    const key = event.key;
+    const isMultiSelectEnabled = selectionSelectors.isMultiSelectEnabled(this.store.state);
+
+    // eslint-disable-next-line default-case
+    switch (true) {
+      // Select the item when pressing "Space"
+      case key === ' ' && this.canToggleItemSelection(itemId):
+        {
+          event.preventDefault();
+          if (isMultiSelectEnabled && event.shiftKey) {
+            this.store.selection.expandSelectionRange(event, itemId);
+          } else {
+            this.store.selection.setItemSelection({
+              event,
+              itemId,
+              keepExistingSelection: isMultiSelectEnabled,
+              shouldBeSelected: undefined
+            });
+          }
+          break;
+        }
+
+      // If the focused item has children, we expand it.
+      // If the focused item has no children, we select it.
+      case key === 'Enter':
+        {
+          if (this.store.labelEditing?.setEditedItem && labelSelectors.isItemEditable(this.store.state, itemId) && !labelSelectors.isItemBeingEdited(this.store.state, itemId)) {
+            this.store.labelEditing.setEditedItem(itemId);
+          } else if (this.canToggleItemExpansion(itemId)) {
+            this.store.expansion.setItemExpansion({
+              event,
+              itemId
+            });
+            event.preventDefault();
+          } else if (this.canToggleItemSelection(itemId)) {
+            if (isMultiSelectEnabled) {
+              event.preventDefault();
+              this.store.selection.setItemSelection({
+                event,
+                itemId,
+                keepExistingSelection: true
+              });
+            } else if (!selectionSelectors.isItemSelected(this.store.state, itemId)) {
+              this.store.selection.setItemSelection({
+                event,
+                itemId
+              });
+              event.preventDefault();
+            }
+          }
+          break;
+        }
+
+      // Focus the next focusable item
+      case key === 'ArrowDown':
+        {
+          const nextItem = getNextNavigableItem(this.store.state, itemId);
+          if (nextItem) {
+            event.preventDefault();
+            this.store.focus.focusItem(event, nextItem);
+
+            // Multi select behavior when pressing Shift + ArrowDown
+            // Toggles the selection state of the next item
+            if (isMultiSelectEnabled && event.shiftKey && this.canToggleItemSelection(nextItem)) {
+              this.store.selection.selectItemFromArrowNavigation(event, itemId, nextItem);
+            }
+          }
+          break;
+        }
+
+      // Focuses the previous focusable item
+      case key === 'ArrowUp':
+        {
+          const previousItem = getPreviousNavigableItem(this.store.state, itemId);
+          if (previousItem) {
+            event.preventDefault();
+            this.store.focus.focusItem(event, previousItem);
+
+            // Multi select behavior when pressing Shift + ArrowUp
+            // Toggles the selection state of the previous item
+            if (isMultiSelectEnabled && event.shiftKey && this.canToggleItemSelection(previousItem)) {
+              this.store.selection.selectItemFromArrowNavigation(event, itemId, previousItem);
+            }
+          }
+          break;
+        }
+
+      // If the focused item is expanded, we move the focus to its first child
+      // If the focused item is collapsed and has children, we expand it
+      case key === 'ArrowRight' && !this.store.parameters.isRtl || key === 'ArrowLeft' && this.store.parameters.isRtl:
+        {
+          if (ctrlPressed) {
+            return;
+          }
+          if (expansionSelectors.isItemExpanded(this.store.state, itemId)) {
+            const nextItemId = getNextNavigableItem(this.store.state, itemId);
+            if (nextItemId) {
+              this.store.focus.focusItem(event, nextItemId);
+              event.preventDefault();
+            }
+          } else if (this.canToggleItemExpansion(itemId)) {
+            this.store.expansion.setItemExpansion({
+              event,
+              itemId
+            });
+            event.preventDefault();
+          }
+          break;
+        }
+
+      // If the focused item is expanded, we collapse it
+      // If the focused item is collapsed and has a parent, we move the focus to this parent
+      case key === 'ArrowLeft' && !this.store.parameters.isRtl || key === 'ArrowRight' && this.store.parameters.isRtl:
+        {
+          if (ctrlPressed) {
+            return;
+          }
+          if (this.canToggleItemExpansion(itemId) && expansionSelectors.isItemExpanded(this.store.state, itemId)) {
+            this.store.expansion.setItemExpansion({
+              event,
+              itemId
+            });
+            event.preventDefault();
+          } else {
+            const parent = itemsSelectors.itemParentId(this.store.state, itemId);
+            if (parent) {
+              this.store.focus.focusItem(event, parent);
+              event.preventDefault();
+            }
+          }
+          break;
+        }
+
+      // Focuses the first item in the tree
+      case key === 'Home':
+        {
+          // Multi select behavior when pressing Ctrl + Shift + Home
+          // Selects the focused item and all items up to the first item.
+          if (this.canToggleItemSelection(itemId) && isMultiSelectEnabled && ctrlPressed && event.shiftKey) {
+            this.store.selection.selectRangeFromStartToItem(event, itemId);
+          } else {
+            this.store.focus.focusItem(event, getFirstNavigableItem(this.store.state));
+          }
+          event.preventDefault();
+          break;
+        }
+
+      // Focuses the last item in the tree
+      case key === 'End':
+        {
+          // Multi select behavior when pressing Ctrl + Shirt + End
+          // Selects the focused item and all the items down to the last item.
+          if (this.canToggleItemSelection(itemId) && isMultiSelectEnabled && ctrlPressed && event.shiftKey) {
+            this.store.selection.selectRangeFromItemToEnd(event, itemId);
+          } else {
+            this.store.focus.focusItem(event, getLastNavigableItem(this.store.state));
+          }
+          event.preventDefault();
+          break;
+        }
+
+      // Expand all siblings that are at the same level as the focused item
+      case key === '*':
+        {
+          this.store.expansion.expandAllSiblings(event, itemId);
+          event.preventDefault();
+          break;
+        }
+
+      // Multi select behavior when pressing Ctrl + a
+      // Selects all the items
+      case String.fromCharCode(event.keyCode) === 'A' && ctrlPressed && isMultiSelectEnabled && selectionSelectors.enabled(this.store.state):
+        {
+          this.store.selection.selectAllNavigableItems(event);
+          event.preventDefault();
+          break;
+        }
+
+      // Type-ahead
+      case !ctrlPressed && !event.shiftKey && isPrintableKey(key):
+        {
+          this.store.timeoutManager.clearTimeout('typeahead');
+          const matchingItem = this.getFirstItemMatchingTypeaheadQuery(itemId, key);
+          if (matchingItem != null) {
+            this.store.focus.focusItem(event, matchingItem);
+            event.preventDefault();
+          } else {
+            this.typeaheadQuery = '';
+          }
+          this.store.timeoutManager.startTimeout('typeahead', TYPEAHEAD_TIMEOUT, () => {
+            this.typeaheadQuery = '';
+          });
+          break;
+        }
+    }
+  };
+}
+function isPrintableKey(string) {
+  return !!string && string.length === 1 && !!string.match(/\S/);
+}
+function createLabelMapFromItemMetaLookup(itemMetaLookup) {
+  const labelMap = {};
+  const processItem = item => {
+    labelMap[item.id] = item.label.toLowerCase();
+  };
+  Object.values(itemMetaLookup).forEach(processItem);
+  return labelMap;
+}

package/esm/internals/plugins/keyboardNavigation/index.d.ts

@@ -0,0 +1 @@
+export * from "./TreeViewKeyboardNavigationPlugin.js";

package/esm/internals/plugins/keyboardNavigation/index.js

@@ -0,0 +1 @@
+export * from "./TreeViewKeyboardNavigationPlugin.js";

package/esm/internals/plugins/labelEditing/TreeViewLabelEditingPlugin.d.ts

@@ -0,0 +1,22 @@
+import { ExtendableRichTreeViewStore } from "../../RichTreeViewStore/RichTreeViewStore.js";
+import { TreeViewItemId } from "../../../models/index.js";
+export declare class TreeViewLabelEditingPlugin {
+  private store;
+  constructor(store: ExtendableRichTreeViewStore<any, any>);
+  buildPublicAPI: () => {
+    setEditedItem: (itemId: TreeViewItemId | null) => void;
+    updateItemLabel: (itemId: TreeViewItemId, label: string) => void;
+  };
+  /**
+   * Set which item is currently being edited.
+   * You can pass `null` to exit editing mode.
+   * @param {TreeViewItemId | null} itemId The id of the item to edit, or `null` to exit editing mode.
+   */
+  setEditedItem: (itemId: TreeViewItemId | null) => void;
+  /**
+   * Used to update the label of an item.
+   * @param {TreeViewItemId} itemId The id of the item to update the label of.
+   * @param {string} label The new label of the item.
+   */
+  updateItemLabel: (itemId: TreeViewItemId, label: string) => void;
+}

package/esm/internals/plugins/labelEditing/TreeViewLabelEditingPlugin.js

@@ -0,0 +1,50 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { labelSelectors } from "./selectors.js";
+import { useLabelEditingItemPlugin } from "./itemPlugin.js";
+export class TreeViewLabelEditingPlugin {
+  constructor(store) {
+    this.store = store;
+    store.itemPluginManager.register(useLabelEditingItemPlugin, null);
+  }
+  buildPublicAPI = () => {
+    return {
+      setEditedItem: this.setEditedItem,
+      updateItemLabel: this.updateItemLabel
+    };
+  };
+
+  /**
+   * Set which item is currently being edited.
+   * You can pass `null` to exit editing mode.
+   * @param {TreeViewItemId | null} itemId The id of the item to edit, or `null` to exit editing mode.
+   */
+  setEditedItem = itemId => {
+    if (itemId !== null && !labelSelectors.isItemEditable(this.store.state, itemId)) {
+      return;
+    }
+    this.store.set('editedItemId', itemId);
+  };
+
+  /**
+   * Used to update the label of an item.
+   * @param {TreeViewItemId} itemId The id of the item to update the label of.
+   * @param {string} label The new label of the item.
+   */
+  updateItemLabel = (itemId, label) => {
+    if (!label) {
+      throw new Error(['MUI X: The Tree View component requires all items to have a `label` property.', 'The label of an item cannot be empty.', itemId].join('\n'));
+    }
+    const item = this.store.state.itemMetaLookup[itemId];
+    if (item.label === label) {
+      return;
+    }
+    this.store.set('itemMetaLookup', _extends({}, this.store.state.itemMetaLookup, {
+      [itemId]: _extends({}, item, {
+        label
+      })
+    }));
+    if (this.store.parameters.onItemLabelChange) {
+      this.store.parameters.onItemLabelChange(itemId, label);
+    }
+  };
+}

package/esm/internals/plugins/labelEditing/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./TreeViewLabelEditingPlugin.js";
+export * from "./selectors.js";

package/esm/internals/plugins/labelEditing/index.js

@@ -0,0 +1,2 @@
+export * from "./TreeViewLabelEditingPlugin.js";
+export * from "./selectors.js";

package/{internals/plugins/useTreeViewLabel → esm/internals/plugins/labelEditing}/itemPlugin.d.ts

@@ -1,11 +1,12 @@
 import { TreeViewItemPlugin } from "../../models/index.js";
 import { TreeItemLabelInputProps } from "../../../TreeItemLabelInput/index.js";
-export declare const useTreeViewLabelItemPlugin: TreeViewItemPlugin;
-export interface UseTreeItemLabelInputSlotPropsFromLabelEditing extends TreeItemLabelInputProps {}
-export interface UseTreeItemLabelSlotPropsFromLabelEditing {
+export declare const useLabelEditingItemPlugin: TreeViewItemPlugin;
+interface UseTreeItemLabelInputSlotPropsFromLabelEditing extends TreeItemLabelInputProps {}
+interface UseTreeItemLabelSlotPropsFromLabelEditing {
   editable?: boolean;
 }
 declare module '@mui/x-tree-view/useTreeItem' {
   interface UseTreeItemLabelInputSlotOwnProps extends UseTreeItemLabelInputSlotPropsFromLabelEditing {}
   interface UseTreeItemLabelSlotOwnProps extends UseTreeItemLabelSlotPropsFromLabelEditing {}
-}
+}
+export {};

package/esm/internals/plugins/{useTreeViewLabel → labelEditing}/itemPlugin.js

@@ -3,8 +3,8 @@
 import * as React from 'react';
 import { useStore } from '@mui/x-internals/store';
 import { useTreeViewContext } from "../../TreeViewProvider/index.js";
-import { labelSelectors } from "./useTreeViewLabel.selectors.js";
-export const useTreeViewLabelItemPlugin = ({
+import { labelSelectors } from "./selectors.js";
+export const useLabelEditingItemPlugin = ({
   props
 }) => {
   const {

package/esm/internals/plugins/labelEditing/selectors.d.ts

@@ -0,0 +1,15 @@
+import { RichTreeViewState } from "../../RichTreeViewStore/index.js";
+export declare const labelSelectors: {
+  /**
+   * Checks whether an item is editable.
+   */
+  isItemEditable: (args_0: RichTreeViewState<any, any>, _itemId: string) => boolean;
+  /**
+   * Checks whether an item is being edited.
+   */
+  isItemBeingEdited: (state: RichTreeViewState<any, any>, itemId: string | null) => boolean;
+  /**
+   * Checks whether any item is being edited.
+   */
+  isAnyItemBeingEdited: (state: RichTreeViewState<any, any>) => boolean;
+};