@mui/x-tree-view 8.0.0-alpha.9 → 8.0.0-beta.1

package/modern/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js

@@ -2,6 +2,19 @@ import { createSelector } from "../../utils/selectors.js";
 import { TREE_VIEW_ROOT_PARENT_ID } from "./useTreeViewItems.utils.js";
 const selectorTreeViewItemsState = state => state.items;
 
+/**
+ * Get the loading state for the Tree View.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @returns {boolean} The loading state for the Tree View.
+ */
+export const selectorIsTreeViewLoading = createSelector(selectorTreeViewItemsState, items => items.loading);
+/**
+ * Get the error state for the Tree View.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @returns {boolean} The error state for the Tree View.
+ */
+export const selectorGetTreeViewError = createSelector(selectorTreeViewItemsState, items => items.error);
+
 /**
  * Get the meta-information of all items.
  * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
@@ -24,10 +37,7 @@ export const selectorItemOrderedChildrenIds = createSelector([selectorTreeViewIt
  * @param {TreeViewItemId} itemId The id of the item to get the model of.
  * @returns {R} The model of the item.
  */
-export const selectorItemModel = createSelector([selectorTreeViewItemsState, (_, itemId) => itemId], (itemsState, itemId) => {
-  const a = itemsState.itemModelLookup[itemId];
-  return a;
-});
+export const selectorItemModel = createSelector([selectorTreeViewItemsState, (_, itemId) => itemId], (itemsState, itemId) => itemsState.itemModelLookup[itemId]);
 
 /**
  * Get the meta-information of an item.

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

@@ -0,0 +1,205 @@
+import * as React from 'react';
+import { DefaultizedProps } from '@mui/x-internals/types';
+import { TreeViewItemMeta, TreeViewPluginSignature } from "../../models/index.js";
+import { TreeViewBaseItem, TreeViewDefaultItemModelProperties, TreeViewItemId } from "../../../models/index.js";
+export type AddItemsParameters<R> = {
+  items: readonly R[];
+  parentId?: TreeViewItemId;
+  depth: number;
+  getChildrenCount?: (item: R) => number;
+};
+export interface UseTreeViewItemsPublicAPI<R extends {}> {
+  /**
+   * Get the item with the given id.
+   * When used in the Simple Tree View, it returns an object with the `id` and `label` properties.
+   * @param {string} itemId The id of the item to retrieve.
+   * @returns {R} The item with the given id.
+   */
+  getItem: (itemId: TreeViewItemId) => R;
+  /**
+   * Get the DOM element of the item with the given id.
+   * @param {TreeViewItemId} itemId The id of the item to get the DOM element of.
+   * @returns {HTMLElement | null} The DOM element of the item with the given id.
+   */
+  getItemDOMElement: (itemId: TreeViewItemId) => HTMLElement | null;
+  /**
+   * Get the ids of a given item's children.
+   * Those ids are returned in the order they should be rendered.
+   * To get the root items, pass `null` as the `itemId`.
+   * @param {TreeViewItemId | null} itemId The id of the item to get the children of.
+   * @returns {TreeViewItemId[]} The ids of the item's children.
+   */
+  getItemOrderedChildrenIds: (itemId: TreeViewItemId | null) => TreeViewItemId[];
+  /**
+   * Get all the items in the same format as provided by `props.items`.
+   * @returns {TreeViewBaseItem[]} The items in the tree.
+   */
+  getItemTree: () => TreeViewBaseItem[];
+  /**
+   * Toggle the disabled state of the item with the given id.
+   * @param {object} parameters The params of the method.
+   * @param {TreeViewItemId } parameters.itemId The id of the item to get the children of.
+   * @param {boolean } parameters.shouldBeDisabled true if the item should be disabled.
+   */
+  setIsItemDisabled: (parameters: {
+    itemId: TreeViewItemId;
+    shouldBeDisabled?: boolean;
+  }) => void;
+  /** * Get the id of the parent item.
+   * @param {string} itemId The id of the item to whose parentId we want to retrieve.
+   * @returns {TreeViewItemId | null} The id of the parent item.
+   */
+  getParentId: (itemId: TreeViewItemId) => TreeViewItemId | null;
+}
+export interface UseTreeViewItemsInstance<R extends {}> extends Pick<UseTreeViewItemsPublicAPI<R>, 'getItemDOMElement'> {
+  /**
+   * Freeze any future update to the state based on the `items` prop.
+   * This is useful when `useTreeViewJSXItems` is used to avoid having conflicting sources of truth.
+   */
+  preventItemUpdates: () => void;
+  /**
+   * Check if the updates to the state based on the `items` prop are prevented.
+   * This is useful when `useTreeViewJSXItems` is used to avoid having conflicting sources of truth.
+   * @returns {boolean} `true` if the updates to the state based on the `items` prop are prevented.
+   */
+  areItemUpdatesPrevented: () => boolean;
+  /**
+   * Add an array of items to the tree.
+   * @param {AddItemsParameters<R>} args The items to add to the tree and information about their ancestors.
+   */
+  addItems: (args: AddItemsParameters<R>) => void;
+  /**
+   * Remove the children of an item.
+   * @param {TreeViewItemId} parentId The id of the item to remove the children of.
+   */
+  removeChildren: (parentId?: TreeViewItemId) => void;
+  /**
+   * Set the loading state of the tree.
+   * @param {boolean} loading True if the tree view is loading.
+   */
+  setTreeViewLoading: (loading: boolean) => void;
+  /**
+   * Set the error state of the tree.
+   * @param {Error | null} error The error on the tree view.
+   */
+  setTreeViewError: (error: Error | null) => void;
+  /**
+   * Event handler to fire when the `content` slot of a given Tree Item is clicked.
+   * @param {React.MouseEvent} event The DOM event that triggered the change.
+   * @param {TreeViewItemId} itemId The id of the item being clicked.
+   */
+  handleItemClick: (event: React.MouseEvent, itemId: TreeViewItemId) => void;
+}
+export interface UseTreeViewItemsParameters<R extends {
+  children?: R[];
+}> {
+  /**
+   * If `true`, will allow focus on disabled items.
+   * @default false
+   */
+  disabledItemsFocusable?: boolean;
+  items: readonly R[];
+  /**
+   * Used to determine if a given item should be disabled.
+   * @template R
+   * @param {R} item The item to check.
+   * @returns {boolean} `true` if the item should be disabled.
+   */
+  isItemDisabled?: (item: R) => boolean;
+  /**
+   * Used to determine the string label for a given item.
+   *
+   * @template R
+   * @param {R} item The item to check.
+   * @returns {string} The label of the item.
+   * @default (item) => item.label
+   */
+  getItemLabel?: (item: R) => string;
+  /**
+   * Used to determine the id of a given item.
+   *
+   * @template R
+   * @param {R} item The item to check.
+   * @returns {string} The id of the item.
+   * @default (item) => item.id
+   */
+  getItemId?: (item: R) => TreeViewItemId;
+  /**
+   * Callback fired when the `content` slot of a given Tree Item is clicked.
+   * @param {React.MouseEvent} event The DOM event that triggered the change.
+   * @param {string} itemId The id of the focused item.
+   */
+  onItemClick?: (event: React.MouseEvent, itemId: string) => void;
+  /**
+   * Horizontal indentation between an item and its children.
+   * Examples: 24, "24px", "2rem", "2em".
+   * @default 12px
+   */
+  itemChildrenIndentation?: string | number;
+}
+export type UseTreeViewItemsDefaultizedParameters<R extends {
+  children?: R[];
+}> = DefaultizedProps<UseTreeViewItemsParameters<R>, 'disabledItemsFocusable' | 'itemChildrenIndentation'>;
+interface UseTreeViewItemsEventLookup {
+  removeItem: {
+    params: {
+      id: string;
+    };
+  };
+}
+export interface UseTreeViewItemsState<R extends {}> {
+  items: {
+    /**
+     * If `true`, will allow focus on disabled items.
+     * Always equal to `props.disabledItemsFocusable` (or `false` if not provided).
+     */
+    disabledItemsFocusable: boolean;
+    /**
+     * Model of each item as provided by `props.items` or by imperative items updates.
+     * It is not updated when properties derived from the model are updated:
+     * - when the label of an item is updated, `itemMetaLookup` is updated, not `itemModelLookup`.
+     * - when the children of an item are updated, `itemOrderedChildrenIdsLookup` and `itemChildrenIndexesLookup` are updated, not `itemModelLookup`.
+     * This means that the `children`, `label` or `id` properties of an item model should never be used directly, always use the structured sub-states instead.
+     */
+    itemModelLookup: {
+      [itemId: string]: TreeViewBaseItem<R>;
+    };
+    /**
+     * Meta data of each item.
+     */
+    itemMetaLookup: {
+      [itemId: string]: TreeViewItemMeta;
+    };
+    /**
+     * Ordered children ids of each item.
+     */
+    itemOrderedChildrenIdsLookup: {
+      [parentItemId: string]: string[];
+    };
+    /**
+     * Index of each child in the ordered children ids of its parent.
+     */
+    itemChildrenIndexesLookup: {
+      [parentItemId: string]: {
+        [itemId: string]: number;
+      };
+    };
+    /**
+     * The loading state of the tree.
+     */
+    loading: boolean;
+    /**
+     * The error state of the tree.
+     */
+    error: Error | null;
+  };
+}
+export type UseTreeViewItemsSignature = TreeViewPluginSignature<{
+  params: UseTreeViewItemsParameters<any>;
+  defaultizedParams: UseTreeViewItemsDefaultizedParameters<any>;
+  instance: UseTreeViewItemsInstance<any>;
+  publicAPI: UseTreeViewItemsPublicAPI<any>;
+  events: UseTreeViewItemsEventLookup;
+  state: UseTreeViewItemsState<TreeViewDefaultItemModelProperties>;
+}>;
+export {};

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

@@ -0,0 +1,4 @@
+export declare const TREE_VIEW_ROOT_PARENT_ID = "__TREE_VIEW_ROOT_PARENT_ID__";
+export declare const buildSiblingIndexes: (siblings: string[]) => {
+  [itemId: string]: number;
+};

package/modern/internals/plugins/useTreeViewJSXItems/index.d.ts

@@ -0,0 +1,2 @@
+export { useTreeViewJSXItems } from "./useTreeViewJSXItems.js";
+export type { UseTreeViewJSXItemsSignature, UseTreeViewJSXItemsParameters, UseTreeViewItemsDefaultizedParameters } from './useTreeViewJSXItems.types';

package/modern/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.d.ts

@@ -0,0 +1,3 @@
+import { TreeViewPlugin } from "../../models/index.js";
+import { UseTreeViewJSXItemsSignature } from "./useTreeViewJSXItems.types.js";
+export declare const useTreeViewJSXItems: TreeViewPlugin<UseTreeViewJSXItemsSignature>;

package/modern/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -9,7 +9,7 @@ import { TreeViewChildrenItemContext, TreeViewChildrenItemProvider } from "../..
 import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "../useTreeViewItems/useTreeViewItems.utils.js";
 import { TreeViewItemDepthContext } from "../../TreeViewItemDepthContext/index.js";
 import { generateTreeItemIdAttribute } from "../../corePlugins/useTreeViewId/useTreeViewId.utils.js";
-import { isItemExpandable } from "../../../hooks/useTreeItemUtils/useTreeItemUtils.js";
+import { itemHasChildren } from "../../../hooks/useTreeItemUtils/useTreeItemUtils.js";
 import { useSelector } from "../../hooks/useSelector.js";
 import { selectorTreeViewId } from "../../corePlugins/useTreeViewId/useTreeViewId.selectors.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -115,7 +115,7 @@ const useTreeViewJSXItemsItemPlugin = ({
     unregisterChild,
     parentId
   } = parentContext;
-  const expandable = isItemExpandable(children);
+  const expandable = itemHasChildren(children);
   const pluginContentRef = React.useRef(null);
   const handleContentRef = useForkRef(pluginContentRef, contentRef);
   const treeId = useSelector(store, selectorTreeViewId);

package/modern/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.types.d.ts

@@ -0,0 +1,35 @@
+import { TreeViewItemMeta, TreeViewPluginSignature } from "../../models/index.js";
+import { UseTreeViewItemsSignature } from "../useTreeViewItems/index.js";
+import { UseTreeViewKeyboardNavigationSignature } from "../useTreeViewKeyboardNavigation/index.js";
+import { TreeViewItemId } from "../../../models/index.js";
+export interface UseTreeViewItemsInstance {
+  /**
+   * 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: TreeViewItemMeta) => () => void;
+  /**
+   * Updates the `firstCharMap` 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 first character of.
+   * @param {string} firstChar The first character of the item's label.
+   * @returns {() => void} A function to remove the item from the `firstCharMap`.
+   */
+  mapFirstCharFromJSX: (itemId: TreeViewItemId, firstChar: string) => () => void;
+  /**
+   * 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: TreeViewItemId | null, orderedChildrenIds: TreeViewItemId[]) => void;
+}
+export interface UseTreeViewJSXItemsParameters {}
+export interface UseTreeViewItemsDefaultizedParameters {}
+export type UseTreeViewJSXItemsSignature = TreeViewPluginSignature<{
+  params: UseTreeViewJSXItemsParameters;
+  defaultizedParams: UseTreeViewItemsDefaultizedParameters;
+  instance: UseTreeViewItemsInstance;
+  dependencies: [UseTreeViewItemsSignature, UseTreeViewKeyboardNavigationSignature];
+}>;

package/modern/internals/plugins/useTreeViewKeyboardNavigation/index.d.ts

@@ -0,0 +1,2 @@
+export { useTreeViewKeyboardNavigation } from "./useTreeViewKeyboardNavigation.js";
+export type { UseTreeViewKeyboardNavigationSignature } from './useTreeViewKeyboardNavigation.types';

package/modern/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.d.ts

@@ -0,0 +1,3 @@
+import { TreeViewPlugin } from "../../models/index.js";
+import { UseTreeViewKeyboardNavigationSignature } from "./useTreeViewKeyboardNavigation.types.js";
+export declare const useTreeViewKeyboardNavigation: TreeViewPlugin<UseTreeViewKeyboardNavigationSignature>;

package/modern/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -7,7 +7,7 @@ import { useTreeViewLabel } from "../useTreeViewLabel/index.js";
 import { useSelector } from "../../hooks/useSelector.js";
 import { selectorItemMetaLookup, selectorIsItemDisabled, selectorItemParentId } from "../useTreeViewItems/useTreeViewItems.selectors.js";
 import { selectorIsItemBeingEdited, selectorIsItemEditable } from "../useTreeViewLabel/useTreeViewLabel.selectors.js";
-import { selectorIsItemSelected } from "../useTreeViewSelection/useTreeViewSelection.selectors.js";
+import { selectorIsItemSelected, selectorIsMultiSelectEnabled, selectorIsSelectionEnabled } from "../useTreeViewSelection/useTreeViewSelection.selectors.js";
 import { selectorIsItemExpandable, selectorIsItemExpanded } from "../useTreeViewExpansion/useTreeViewExpansion.selectors.js";
 function isPrintableKey(string) {
   return !!string && string.length === 1 && !!string.match(/\S/);
@@ -58,13 +58,13 @@ export const useTreeViewKeyboardNavigation = ({
     }
     return matchingItemId;
   };
-  const canToggleItemSelection = itemId => !params.disableSelection && !selectorIsItemDisabled(store.value, itemId);
+  const canToggleItemSelection = itemId => selectorIsSelectionEnabled(store.value) && !selectorIsItemDisabled(store.value, itemId);
   const canToggleItemExpansion = itemId => {
     return !selectorIsItemDisabled(store.value, itemId) && selectorIsItemExpandable(store.value, itemId);
   };
 
   // ARIA specification: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboardinteraction
-  const handleItemKeyDown = (event, itemId) => {
+  const handleItemKeyDown = async (event, itemId) => {
     if (event.defaultMuiPrevented) {
       return;
     }
@@ -73,6 +73,7 @@ export const useTreeViewKeyboardNavigation = ({
     }
     const ctrlPressed = event.ctrlKey || event.metaKey;
     const key = event.key;
+    const isMultiSelectEnabled = selectorIsMultiSelectEnabled(store.value);
 
     // eslint-disable-next-line default-case
     switch (true) {
@@ -80,14 +81,14 @@ export const useTreeViewKeyboardNavigation = ({
       case key === ' ' && canToggleItemSelection(itemId):
         {
           event.preventDefault();
-          if (params.multiSelect && event.shiftKey) {
+          if (isMultiSelectEnabled && event.shiftKey) {
             instance.expandSelectionRange(event, itemId);
           } else {
-            instance.selectItem({
+            instance.setItemSelection({
               event,
               itemId,
-              keepExistingSelection: params.multiSelect,
-              shouldBeSelected: params.multiSelect ? undefined : true
+              keepExistingSelection: isMultiSelectEnabled,
+              shouldBeSelected: undefined
             });
           }
           break;
@@ -97,24 +98,24 @@ export const useTreeViewKeyboardNavigation = ({
       // If the focused item has no children, we select it.
       case key === 'Enter':
         {
-          if (hasPlugin(instance, useTreeViewLabel) && selectorIsItemEditable(store.value, {
-            itemId,
-            isItemEditable: params.isItemEditable
-          }) && !selectorIsItemBeingEdited(store.value, itemId)) {
+          if (hasPlugin(instance, useTreeViewLabel) && selectorIsItemEditable(store.value, itemId) && !selectorIsItemBeingEdited(store.value, itemId)) {
             instance.setEditedItemId(itemId);
           } else if (canToggleItemExpansion(itemId)) {
-            instance.toggleItemExpansion(event, itemId);
+            instance.setItemExpansion({
+              event,
+              itemId
+            });
             event.preventDefault();
           } else if (canToggleItemSelection(itemId)) {
-            if (params.multiSelect) {
+            if (isMultiSelectEnabled) {
               event.preventDefault();
-              instance.selectItem({
+              instance.setItemSelection({
                 event,
                 itemId,
                 keepExistingSelection: true
               });
             } else if (!selectorIsItemSelected(store.value, itemId)) {
-              instance.selectItem({
+              instance.setItemSelection({
                 event,
                 itemId
               });
@@ -134,7 +135,7 @@ export const useTreeViewKeyboardNavigation = ({
 
             // Multi select behavior when pressing Shift + ArrowDown
             // Toggles the selection state of the next item
-            if (params.multiSelect && event.shiftKey && canToggleItemSelection(nextItem)) {
+            if (isMultiSelectEnabled && event.shiftKey && canToggleItemSelection(nextItem)) {
               instance.selectItemFromArrowNavigation(event, itemId, nextItem);
             }
           }
@@ -151,7 +152,7 @@ export const useTreeViewKeyboardNavigation = ({
 
             // Multi select behavior when pressing Shift + ArrowUp
             // Toggles the selection state of the previous item
-            if (params.multiSelect && event.shiftKey && canToggleItemSelection(previousItem)) {
+            if (isMultiSelectEnabled && event.shiftKey && canToggleItemSelection(previousItem)) {
               instance.selectItemFromArrowNavigation(event, itemId, previousItem);
             }
           }
@@ -172,7 +173,10 @@ export const useTreeViewKeyboardNavigation = ({
               event.preventDefault();
             }
           } else if (canToggleItemExpansion(itemId)) {
-            instance.toggleItemExpansion(event, itemId);
+            instance.setItemExpansion({
+              event,
+              itemId
+            });
             event.preventDefault();
           }
           break;
@@ -186,7 +190,10 @@ export const useTreeViewKeyboardNavigation = ({
             return;
           }
           if (canToggleItemExpansion(itemId) && selectorIsItemExpanded(store.value, itemId)) {
-            instance.toggleItemExpansion(event, itemId);
+            instance.setItemExpansion({
+              event,
+              itemId
+            });
             event.preventDefault();
           } else {
             const parent = selectorItemParentId(store.value, itemId);
@@ -203,7 +210,7 @@ export const useTreeViewKeyboardNavigation = ({
         {
           // Multi select behavior when pressing Ctrl + Shift + Home
           // Selects the focused item and all items up to the first item.
-          if (canToggleItemSelection(itemId) && params.multiSelect && ctrlPressed && event.shiftKey) {
+          if (canToggleItemSelection(itemId) && isMultiSelectEnabled && ctrlPressed && event.shiftKey) {
             instance.selectRangeFromStartToItem(event, itemId);
           } else {
             instance.focusItem(event, getFirstNavigableItem(store.value));
@@ -217,7 +224,7 @@ export const useTreeViewKeyboardNavigation = ({
         {
           // Multi select behavior when pressing Ctrl + Shirt + End
           // Selects the focused item and all the items down to the last item.
-          if (canToggleItemSelection(itemId) && params.multiSelect && ctrlPressed && event.shiftKey) {
+          if (canToggleItemSelection(itemId) && isMultiSelectEnabled && ctrlPressed && event.shiftKey) {
             instance.selectRangeFromItemToEnd(event, itemId);
           } else {
             instance.focusItem(event, getLastNavigableItem(store.value));
@@ -236,7 +243,7 @@ export const useTreeViewKeyboardNavigation = ({
 
       // Multi select behavior when pressing Ctrl + a
       // Selects all the items
-      case String.fromCharCode(event.keyCode) === 'A' && ctrlPressed && params.multiSelect && !params.disableSelection:
+      case String.fromCharCode(event.keyCode) === 'A' && ctrlPressed && isMultiSelectEnabled && selectorIsSelectionEnabled(store.value):
         {
           instance.selectAllNavigableItems(event);
           event.preventDefault();

package/modern/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { TreeViewPluginSignature } from "../../models/index.js";
+import { UseTreeViewItemsSignature } from "../useTreeViewItems/index.js";
+import { UseTreeViewSelectionSignature } from "../useTreeViewSelection/index.js";
+import { UseTreeViewFocusSignature } from "../useTreeViewFocus/index.js";
+import { UseTreeViewExpansionSignature } from "../useTreeViewExpansion/index.js";
+import { TreeViewItemId, TreeViewCancellableEvent } from "../../../models/index.js";
+export interface UseTreeViewKeyboardNavigationInstance {
+  /**
+   * Updates the `firstCharMap` 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: TreeViewFirstCharMap) => TreeViewFirstCharMap} updater The function to update the map.
+   */
+  updateFirstCharMap: (updater: (map: TreeViewFirstCharMap) => TreeViewFirstCharMap) => 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) => void;
+}
+export type UseTreeViewKeyboardNavigationSignature = TreeViewPluginSignature<{
+  instance: UseTreeViewKeyboardNavigationInstance;
+  dependencies: [UseTreeViewItemsSignature, UseTreeViewSelectionSignature, UseTreeViewFocusSignature, UseTreeViewExpansionSignature];
+}>;
+export type TreeViewFirstCharMap = {
+  [itemId: string]: string;
+};

package/modern/internals/plugins/useTreeViewLabel/index.d.ts

@@ -0,0 +1,2 @@
+export { useTreeViewLabel } from "./useTreeViewLabel.js";
+export type { UseTreeViewLabelSignature, UseTreeViewLabelParameters } from './useTreeViewLabel.types';

package/modern/internals/plugins/useTreeViewLabel/useTreeViewLabel.d.ts

@@ -0,0 +1,3 @@
+import { TreeViewPlugin } from "../../models/index.js";
+import { UseTreeViewLabelSignature } from "./useTreeViewLabel.types.js";
+export declare const useTreeViewLabel: TreeViewPlugin<UseTreeViewLabelSignature>;

package/modern/internals/plugins/useTreeViewLabel/useTreeViewLabel.itemPlugin.d.ts

@@ -0,0 +1,2 @@
+import { TreeViewItemPlugin } from "../../models/index.js";
+export declare const useTreeViewLabelItemPlugin: TreeViewItemPlugin;

package/modern/internals/plugins/useTreeViewLabel/useTreeViewLabel.itemPlugin.js

@@ -6,33 +6,30 @@ export const useTreeViewLabelItemPlugin = ({
   props
 }) => {
   const {
-    store,
-    label: {
-      isItemEditable
-    }
+    store
   } = useTreeViewContext();
   const {
     label,
     itemId
   } = props;
   const [labelInputValue, setLabelInputValue] = React.useState(label);
-  const editable = useSelector(store, selectorIsItemEditable, {
-    itemId,
-    isItemEditable
-  });
-  const editing = useSelector(store, selectorIsItemBeingEdited, itemId);
+  const isItemEditable = useSelector(store, selectorIsItemEditable, itemId);
+  const isItemBeingEdited = useSelector(store, selectorIsItemBeingEdited, itemId);
   React.useEffect(() => {
-    if (!editing) {
+    if (!isItemBeingEdited) {
       setLabelInputValue(label);
     }
-  }, [editing, label]);
+  }, [isItemBeingEdited, label]);
   return {
     propsEnhancers: {
+      label: () => ({
+        editable: isItemEditable
+      }),
       labelInput: ({
         externalEventHandlers,
         interactions
       }) => {
-        if (!editable) {
+        if (!isItemEditable) {
           return {};
         }
         const handleKeydown = event => {

package/modern/internals/plugins/useTreeViewLabel/useTreeViewLabel.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { warnOnce } from '@mui/x-internals/warning';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { useTreeViewLabelItemPlugin } from "./useTreeViewLabel.itemPlugin.js";
 export const useTreeViewLabel = ({
   store,
@@ -8,9 +7,9 @@ export const useTreeViewLabel = ({
 }) => {
   const setEditedItemId = editedItemId => {
     store.update(prevState => _extends({}, prevState, {
-      label: {
+      label: _extends({}, prevState.label, {
         editedItemId
-      }
+      })
     }));
   };
   const updateItemLabel = (itemId, label) => {
@@ -36,11 +35,14 @@ export const useTreeViewLabel = ({
       params.onItemLabelChange(itemId, label);
     }
   };
-  const pluginContextValue = React.useMemo(() => ({
-    label: {
-      isItemEditable: params.isItemEditable
-    }
-  }), [params.isItemEditable]);
+  useEnhancedEffect(() => {
+    const isItemEditable = params.isItemEditable;
+    store.update(prevState => _extends({}, prevState, {
+      label: _extends({}, prevState.label, {
+        isItemEditable: typeof isItemEditable === 'boolean' ? () => isItemEditable : isItemEditable
+      })
+    }));
+  }, [store, params.isItemEditable]);
   return {
     instance: {
       setEditedItemId,
@@ -48,27 +50,20 @@ export const useTreeViewLabel = ({
     },
     publicAPI: {
       updateItemLabel
-    },
-    contextValue: pluginContextValue
+    }
   };
 };
 useTreeViewLabel.itemPlugin = useTreeViewLabelItemPlugin;
 useTreeViewLabel.getDefaultizedParams = ({
-  params,
-  experimentalFeatures
-}) => {
-  const canUseFeature = experimentalFeatures?.labelEditing;
-  if (process.env.NODE_ENV !== 'production') {
-    if (params.isItemEditable && !canUseFeature) {
-      warnOnce(['MUI X: The label editing feature requires the `labelEditing` experimental feature to be enabled.', 'You can do it by passing `experimentalFeatures={{ labelEditing: true}}` to the Rich Tree View Pro component.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/editing/']);
-    }
-  }
-  return _extends({}, params, {
-    isItemEditable: canUseFeature ? params.isItemEditable ?? false : false
-  });
-};
-useTreeViewLabel.getInitialState = () => ({
+  params
+}) => _extends({}, params, {
+  isItemEditable: params.isItemEditable ?? false
+});
+useTreeViewLabel.getInitialState = ({
+  isItemEditable
+}) => ({
   label: {
+    isItemEditable: typeof isItemEditable === 'boolean' ? () => isItemEditable : isItemEditable,
     editedItemId: null
   }
 });