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

package/esm/useTreeItem/useTreeItem.js

@@ -14,17 +14,10 @@ import { generateTreeItemIdAttribute } from "../internals/corePlugins/useTreeVie
 import { selectorCanItemBeFocused } from "../internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js";
 import { selectorTreeViewId } from "../internals/corePlugins/useTreeViewId/useTreeViewId.selectors.js";
 import { selectorItemExpansionTrigger } from "../internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js";
+import { selectorIsCheckboxSelectionEnabled, selectorIsItemSelectionEnabled } from "../internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors.js";
 export const useTreeItem = parameters => {
   const {
     runItemPlugins,
-    items: {
-      onItemClick
-    },
-    selection: {
-      disableSelection,
-      checkboxSelection
-    },
-    label: labelContext,
     instance,
     publicAPI,
     store
@@ -61,6 +54,8 @@ export const useTreeItem = parameters => {
   const handleContentRef = useForkRef(contentRef, contentRefObject);
   const checkboxRef = React.useRef(null);
   const treeId = useSelector(store, selectorTreeViewId);
+  const isSelectionEnabledForItem = useSelector(store, selectorIsItemSelectionEnabled, itemId);
+  const isCheckboxSelectionEnabled = useSelector(store, selectorIsCheckboxSelectionEnabled);
   const idAttribute = generateTreeItemIdAttribute({
     itemId,
     treeId,
@@ -70,8 +65,7 @@ export const useTreeItem = parameters => {
   const sharedPropsEnhancerParams = {
     rootRefObject,
     contentRefObject,
-    interactions,
-    status
+    interactions
   };
   const createRootHandleFocus = otherHandlers => event => {
     otherHandlers.onFocus?.(event);
@@ -116,14 +110,14 @@ export const useTreeItem = parameters => {
   };
   const createContentHandleClick = otherHandlers => event => {
     otherHandlers.onClick?.(event);
-    onItemClick(event, itemId);
+    instance.handleItemClick(event, itemId);
     if (event.defaultMuiPrevented || checkboxRef.current?.contains(event.target)) {
       return;
     }
     if (selectorItemExpansionTrigger(store.value) === 'content') {
       interactions.handleExpansion(event);
     }
-    if (!checkboxSelection) {
+    if (!isCheckboxSelectionEnabled) {
       interactions.handleSelection(event);
     }
   };
@@ -159,7 +153,7 @@ export const useTreeItem = parameters => {
     if (status.selected) {
       // - each selected node has aria-selected set to true.
       ariaSelected = true;
-    } else if (disableSelection || status.disabled) {
+    } else if (!isSelectionEnabledForItem) {
       // - if the tree contains nodes that are not selectable, aria-selected is not present on those nodes.
       ariaSelected = undefined;
     } else {
@@ -217,10 +211,10 @@ export const useTreeItem = parameters => {
     }, externalProps, {
       onDoubleClick: createLabelHandleDoubleClick(externalEventHandlers)
     });
-    if (labelContext?.isItemEditable) {
-      props.editable = status.editable;
-    }
-    return props;
+    const enhancedLabelProps = propsEnhancers.label?.(_extends({}, sharedPropsEnhancerParams, {
+      externalEventHandlers
+    })) ?? {};
+    return _extends({}, enhancedLabelProps, props);
   };
   const getLabelInputProps = (externalProps = {}) => {
     const externalEventHandlers = extractEventHandlers(externalProps);

package/esm/useTreeItem/useTreeItem.types.d.ts

@@ -66,10 +66,6 @@ export type UseTreeItemIconContainerSlotProps<ExternalProps = {}> = ExternalProp
 export interface UseTreeItemLabelSlotOwnProps {
   children: React.ReactNode;
   onDoubleClick: TreeViewCancellableEventHandler<React.MouseEvent>;
-  /**
-   * Only defined when the `isItemEditable` experimental feature is enabled.
-   */
-  editable?: boolean;
 }
 export type UseTreeItemLabelSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItemLabelSlotOwnProps;
 export interface UseTreeItemLabelInputSlotOwnProps {}

package/hooks/useTreeItemUtils/useTreeItemUtils.js

@@ -36,15 +36,12 @@ const useTreeItemUtils = ({
 }) => {
   const {
     instance,
-    label,
     store,
-    selection: {
-      multiSelect
-    },
     publicAPI
   } = (0, _TreeViewProvider.useTreeViewContext)();
   const isItemExpandable = (0, _useSelector.useSelector)(store, _useTreeViewExpansion.selectorIsItemExpandable, itemId);
   const isLazyLoadingEnabled = (0, _useSelector.useSelector)(store, _useTreeViewLazyLoading.selectorIsLazyLoadingEnabled);
+  const isMultiSelectEnabled = (0, _useSelector.useSelector)(store, _useTreeViewSelection.selectorIsMultiSelectEnabled);
   const loading = (0, _useSelector.useSelector)(store, state => isLazyLoadingEnabled ? (0, _useTreeViewLazyLoading.selectorIsItemLoading)(state, itemId) : false);
   const error = (0, _useSelector.useSelector)(store, state => isLazyLoadingEnabled ? Boolean((0, _useTreeViewLazyLoading.selectorGetTreeItemError)(state, itemId)) : false);
   const isExpandable = itemHasChildren(children) || isItemExpandable;
@@ -52,11 +49,8 @@ const useTreeItemUtils = ({
   const isFocused = (0, _useSelector.useSelector)(store, _useTreeViewFocus.selectorIsItemFocused, itemId);
   const isSelected = (0, _useSelector.useSelector)(store, _useTreeViewSelection.selectorIsItemSelected, itemId);
   const isDisabled = (0, _useSelector.useSelector)(store, _useTreeViewItems.selectorIsItemDisabled, itemId);
-  const isEditing = (0, _useSelector.useSelector)(store, state => label == null ? false : (0, _useTreeViewLabel2.selectorIsItemBeingEdited)(state, itemId));
-  const isEditable = (0, _useSelector.useSelector)(store, state => label == null ? false : (0, _useTreeViewLabel2.selectorIsItemEditable)(state, {
-    itemId,
-    isItemEditable: label.isItemEditable
-  }));
+  const isEditing = (0, _useSelector.useSelector)(store, _useTreeViewLabel2.selectorIsItemBeingEdited, itemId);
+  const isEditable = (0, _useSelector.useSelector)(store, _useTreeViewLabel2.selectorIsItemEditable, itemId);
   const status = {
     expandable: isExpandable,
     expanded: isExpanded,
@@ -75,7 +69,7 @@ const useTreeItemUtils = ({
     if (!status.focused) {
       instance.focusItem(event, itemId);
     }
-    const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
+    const multiple = isMultiSelectEnabled && (event.shiftKey || event.ctrlKey || event.metaKey);
 
     // If already expanded and trying to toggle selection don't close
     if (status.expandable && !(multiple && (0, _useTreeViewExpansion.selectorIsItemExpanded)(store.value, itemId))) {
@@ -93,7 +87,7 @@ const useTreeItemUtils = ({
     if (!status.focused) {
       instance.focusItem(event, itemId);
     }
-    const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
+    const multiple = isMultiSelectEnabled && (event.shiftKey || event.ctrlKey || event.metaKey);
     if (multiple) {
       if (event.shiftKey) {
         instance.expandSelectionRange(event, itemId);
@@ -114,13 +108,13 @@ const useTreeItemUtils = ({
   };
   const handleCheckboxSelection = event => {
     const hasShift = event.nativeEvent.shiftKey;
-    if (multiSelect && hasShift) {
+    if (isMultiSelectEnabled && hasShift) {
       instance.expandSelectionRange(event, itemId);
     } else {
       instance.setItemSelection({
         event,
         itemId,
-        keepExistingSelection: multiSelect,
+        keepExistingSelection: isMultiSelectEnabled,
         shouldBeSelected: event.target.checked
       });
     }

package/index.js

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

package/internals/models/itemPlugin.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { EventHandlers } from '@mui/utils/types';
-import type { UseTreeItemContentSlotOwnProps, UseTreeItemDragAndDropOverlaySlotOwnProps, UseTreeItemLabelInputSlotOwnProps, UseTreeItemRootSlotOwnProps, UseTreeItemCheckboxSlotOwnProps, UseTreeItemStatus } from '../../useTreeItem';
+import type { UseTreeItemContentSlotOwnProps, UseTreeItemDragAndDropOverlaySlotOwnProps, UseTreeItemLabelInputSlotOwnProps, UseTreeItemRootSlotOwnProps, UseTreeItemCheckboxSlotOwnProps, UseTreeItemLabelSlotOwnProps } from '../../useTreeItem';
 import type { UseTreeItemInteractions } from '../../hooks/useTreeItemUtils/useTreeItemUtils';
 import type { TreeItemProps } from '../../TreeItem/TreeItem.types';
 export interface TreeViewItemPluginSlotPropsEnhancerParams {
@@ -8,7 +8,6 @@ export interface TreeViewItemPluginSlotPropsEnhancerParams {
   contentRefObject: React.RefObject<HTMLDivElement | null>;
   externalEventHandlers: EventHandlers;
   interactions: UseTreeItemInteractions;
-  status: UseTreeItemStatus;
 }
 type TreeViewItemPluginSlotPropsEnhancer<TSlotProps> = (params: TreeViewItemPluginSlotPropsEnhancerParams) => Partial<TSlotProps>;
 export interface TreeViewItemPluginSlotPropsEnhancers {
@@ -16,6 +15,7 @@ export interface TreeViewItemPluginSlotPropsEnhancers {
   content?: TreeViewItemPluginSlotPropsEnhancer<UseTreeItemContentSlotOwnProps>;
   dragAndDropOverlay?: TreeViewItemPluginSlotPropsEnhancer<UseTreeItemDragAndDropOverlaySlotOwnProps>;
   labelInput?: TreeViewItemPluginSlotPropsEnhancer<UseTreeItemLabelInputSlotOwnProps>;
+  label?: TreeViewItemPluginSlotPropsEnhancer<UseTreeItemLabelSlotOwnProps>;
   checkbox?: TreeViewItemPluginSlotPropsEnhancer<UseTreeItemCheckboxSlotOwnProps>;
 }
 export interface TreeViewItemPluginResponse {
@@ -31,7 +31,7 @@ export interface TreeViewItemPluginResponse {
    * Callback to enhance the slot props of the Tree Item.
    *
    * Not all slots are enabled by default,
-   * if a new plugin needs to pass to an unconfigured slot,
+   * if a new plugin needs to pass to an un-configured slot,
    * it just needs to be added to `TreeViewItemPluginSlotPropsEnhancers`
    */
   propsEnhancers?: TreeViewItemPluginSlotPropsEnhancers;

package/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -270,11 +270,6 @@ const useTreeViewItems = ({
       params.onItemClick(event, itemId);
     }
   });
-  const pluginContextValue = React.useMemo(() => ({
-    items: {
-      onItemClick: handleItemClick
-    }
-  }), [handleItemClick]);
   return {
     getRootProps: () => ({
       style: {
@@ -296,9 +291,9 @@ const useTreeViewItems = ({
       addItems,
       setTreeViewLoading,
       setTreeViewError,
-      removeChildren
-    },
-    contextValue: pluginContextValue
+      removeChildren,
+      handleItemClick
+    }
   };
 };
 exports.useTreeViewItems = useTreeViewItems;

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

@@ -43,10 +43,7 @@ const selectorItemOrderedChildrenIds = exports.selectorItemOrderedChildrenIds =
  * @param {TreeViewItemId} itemId The id of the item to get the model of.
  * @returns {R} The model of the item.
  */
-const selectorItemModel = exports.selectorItemModel = (0, _selectors.createSelector)([selectorTreeViewItemsState, (_, itemId) => itemId], (itemsState, itemId) => {
-  const a = itemsState.itemModelLookup[itemId];
-  return a;
-});
+const selectorItemModel = exports.selectorItemModel = (0, _selectors.createSelector)([selectorTreeViewItemsState, (_, itemId) => itemId], (itemsState, itemId) => itemsState.itemModelLookup[itemId]);
 
 /**
  * Get the meta-information of an item.

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

@@ -83,6 +83,12 @@ export interface UseTreeViewItemsInstance<R extends {}> extends Pick<UseTreeView
    * @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[];
@@ -188,11 +194,6 @@ export interface UseTreeViewItemsState<R extends {}> {
     error: Error | null;
   };
 }
-interface UseTreeViewItemsContextValue {
-  items: {
-    onItemClick: (event: React.MouseEvent, itemId: string) => void;
-  };
-}
 export type UseTreeViewItemsSignature = TreeViewPluginSignature<{
   params: UseTreeViewItemsParameters<any>;
   defaultizedParams: UseTreeViewItemsDefaultizedParameters<any>;
@@ -200,6 +201,5 @@ export type UseTreeViewItemsSignature = TreeViewPluginSignature<{
   publicAPI: UseTreeViewItemsPublicAPI<any>;
   events: UseTreeViewItemsEventLookup;
   state: UseTreeViewItemsState<TreeViewDefaultItemModelProperties>;
-  contextValue: UseTreeViewItemsContextValue;
 }>;
 export {};

package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -66,7 +66,7 @@ const useTreeViewKeyboardNavigation = ({
     }
     return matchingItemId;
   };
-  const canToggleItemSelection = itemId => !params.disableSelection && !(0, _useTreeViewItems.selectorIsItemDisabled)(store.value, itemId);
+  const canToggleItemSelection = itemId => (0, _useTreeViewSelection.selectorIsSelectionEnabled)(store.value) && !(0, _useTreeViewItems.selectorIsItemDisabled)(store.value, itemId);
   const canToggleItemExpansion = itemId => {
     return !(0, _useTreeViewItems.selectorIsItemDisabled)(store.value, itemId) && (0, _useTreeViewExpansion.selectorIsItemExpandable)(store.value, itemId);
   };
@@ -81,6 +81,7 @@ const useTreeViewKeyboardNavigation = ({
     }
     const ctrlPressed = event.ctrlKey || event.metaKey;
     const key = event.key;
+    const isMultiSelectEnabled = (0, _useTreeViewSelection.selectorIsMultiSelectEnabled)(store.value);
 
     // eslint-disable-next-line default-case
     switch (true) {
@@ -88,14 +89,14 @@ const useTreeViewKeyboardNavigation = ({
       case key === ' ' && canToggleItemSelection(itemId):
         {
           event.preventDefault();
-          if (params.multiSelect && event.shiftKey) {
+          if (isMultiSelectEnabled && event.shiftKey) {
             instance.expandSelectionRange(event, itemId);
           } else {
             instance.setItemSelection({
               event,
               itemId,
-              keepExistingSelection: params.multiSelect,
-              shouldBeSelected: params.multiSelect ? undefined : true
+              keepExistingSelection: isMultiSelectEnabled,
+              shouldBeSelected: undefined
             });
           }
           break;
@@ -105,10 +106,7 @@ const useTreeViewKeyboardNavigation = ({
       // If the focused item has no children, we select it.
       case key === 'Enter':
         {
-          if ((0, _plugins.hasPlugin)(instance, _useTreeViewLabel.useTreeViewLabel) && (0, _useTreeViewLabel2.selectorIsItemEditable)(store.value, {
-            itemId,
-            isItemEditable: params.isItemEditable
-          }) && !(0, _useTreeViewLabel2.selectorIsItemBeingEdited)(store.value, itemId)) {
+          if ((0, _plugins.hasPlugin)(instance, _useTreeViewLabel.useTreeViewLabel) && (0, _useTreeViewLabel2.selectorIsItemEditable)(store.value, itemId) && !(0, _useTreeViewLabel2.selectorIsItemBeingEdited)(store.value, itemId)) {
             instance.setEditedItemId(itemId);
           } else if (canToggleItemExpansion(itemId)) {
             instance.setItemExpansion({
@@ -117,7 +115,7 @@ const useTreeViewKeyboardNavigation = ({
             });
             event.preventDefault();
           } else if (canToggleItemSelection(itemId)) {
-            if (params.multiSelect) {
+            if (isMultiSelectEnabled) {
               event.preventDefault();
               instance.setItemSelection({
                 event,
@@ -145,7 +143,7 @@ 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);
             }
           }
@@ -162,7 +160,7 @@ 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);
             }
           }
@@ -220,7 +218,7 @@ 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, (0, _tree.getFirstNavigableItem)(store.value));
@@ -234,7 +232,7 @@ 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, (0, _tree.getLastNavigableItem)(store.value));
@@ -253,7 +251,7 @@ 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 && (0, _useTreeViewSelection.selectorIsSelectionEnabled)(store.value):
         {
           instance.selectAllNavigableItems(event);
           event.preventDefault();

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

@@ -5,8 +5,6 @@ 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";
-import { UseTreeViewLabelSignature } from "../useTreeViewLabel/index.js";
-import { UseTreeViewLazyLoadingSignature } from "../useTreeViewLazyLoading/index.js";
 export interface UseTreeViewKeyboardNavigationInstance {
   /**
    * Updates the `firstCharMap` to add/remove the first character of some item's labels.
@@ -26,7 +24,6 @@ export interface UseTreeViewKeyboardNavigationInstance {
 export type UseTreeViewKeyboardNavigationSignature = TreeViewPluginSignature<{
   instance: UseTreeViewKeyboardNavigationInstance;
   dependencies: [UseTreeViewItemsSignature, UseTreeViewSelectionSignature, UseTreeViewFocusSignature, UseTreeViewExpansionSignature];
-  optionalDependencies: [UseTreeViewLabelSignature, UseTreeViewLazyLoadingSignature];
 }>;
 export type TreeViewFirstCharMap = {
   [itemId: string]: string;

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

@@ -13,33 +13,30 @@ const useTreeViewLabelItemPlugin = ({
   props
 }) => {
   const {
-    store,
-    label: {
-      isItemEditable
-    }
+    store
   } = (0, _TreeViewProvider.useTreeViewContext)();
   const {
     label,
     itemId
   } = props;
   const [labelInputValue, setLabelInputValue] = React.useState(label);
-  const editable = (0, _useSelector.useSelector)(store, _useTreeViewLabel.selectorIsItemEditable, {
-    itemId,
-    isItemEditable
-  });
-  const editing = (0, _useSelector.useSelector)(store, _useTreeViewLabel.selectorIsItemBeingEdited, itemId);
+  const isItemEditable = (0, _useSelector.useSelector)(store, _useTreeViewLabel.selectorIsItemEditable, itemId);
+  const isItemBeingEdited = (0, _useSelector.useSelector)(store, _useTreeViewLabel.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/internals/plugins/useTreeViewLabel/useTreeViewLabel.js

@@ -1,13 +1,12 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useTreeViewLabel = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _useTreeViewLabel = require("./useTreeViewLabel.itemPlugin");
 const useTreeViewLabel = ({
   store,
@@ -15,9 +14,9 @@ const useTreeViewLabel = ({
 }) => {
   const setEditedItemId = editedItemId => {
     store.update(prevState => (0, _extends2.default)({}, prevState, {
-      label: {
+      label: (0, _extends2.default)({}, prevState.label, {
         editedItemId
-      }
+      })
     }));
   };
   const updateItemLabel = (itemId, label) => {
@@ -43,11 +42,14 @@ const useTreeViewLabel = ({
       params.onItemLabelChange(itemId, label);
     }
   };
-  const pluginContextValue = React.useMemo(() => ({
-    label: {
-      isItemEditable: params.isItemEditable
-    }
-  }), [params.isItemEditable]);
+  (0, _useEnhancedEffect.default)(() => {
+    const isItemEditable = params.isItemEditable;
+    store.update(prevState => (0, _extends2.default)({}, prevState, {
+      label: (0, _extends2.default)({}, prevState.label, {
+        isItemEditable: typeof isItemEditable === 'boolean' ? () => isItemEditable : isItemEditable
+      })
+    }));
+  }, [store, params.isItemEditable]);
   return {
     instance: {
       setEditedItemId,
@@ -55,8 +57,7 @@ const useTreeViewLabel = ({
     },
     publicAPI: {
       updateItemLabel
-    },
-    contextValue: pluginContextValue
+    }
   };
 };
 exports.useTreeViewLabel = useTreeViewLabel;
@@ -66,8 +67,11 @@ useTreeViewLabel.getDefaultizedParams = ({
 }) => (0, _extends2.default)({}, params, {
   isItemEditable: params.isItemEditable ?? false
 });
-useTreeViewLabel.getInitialState = () => ({
+useTreeViewLabel.getInitialState = ({
+  isItemEditable
+}) => ({
   label: {
+    isItemEditable: typeof isItemEditable === 'boolean' ? () => isItemEditable : isItemEditable,
     editedItemId: null
   }
 });

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

@@ -3,36 +3,28 @@ import { TreeViewRootSelector } from "../../utils/selectors.js";
 /**
  * Check if an item is editable.
  * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
- * @param {object} params The parameters.
- * @param {TreeViewItemId} params.itemId The id of the item to check.
- * @param {((item: any) => boolean) | boolean} params.isItemEditable The function to determine if an item is editable.
+ * @param {TreeViewItemId} itemId The id of the item to check.
  * @returns {boolean} `true` if the item is editable, `false` otherwise.
  */
-export declare const selectorIsItemEditable: ((state: any, args: any) => boolean) & {
+export declare const selectorIsItemEditable: ((state: any, itemId: string) => boolean) & {
   clearCache: () => void;
   resultsCount: () => number;
   resetResultsCount: () => void;
 } & {
   resultFunc: (resultFuncArgs_0: {
-    itemId: string;
-    isItemEditable: ((item: any) => boolean) | boolean;
-  }, resultFuncArgs_1: import("../../..").TreeViewBaseItem<import("../../..").TreeViewDefaultItemModelProperties>) => boolean;
+    isItemEditable: (item: any) => boolean;
+    editedItemId: string | null;
+  } | undefined, resultFuncArgs_1: import("../../..").TreeViewBaseItem<import("../../..").TreeViewDefaultItemModelProperties>) => boolean;
   memoizedResultFunc: ((resultFuncArgs_0: {
-    itemId: string;
-    isItemEditable: ((item: any) => boolean) | boolean;
-  }, resultFuncArgs_1: import("../../..").TreeViewBaseItem<import("../../..").TreeViewDefaultItemModelProperties>) => boolean) & {
+    isItemEditable: (item: any) => boolean;
+    editedItemId: string | null;
+  } | undefined, resultFuncArgs_1: import("../../..").TreeViewBaseItem<import("../../..").TreeViewDefaultItemModelProperties>) => boolean) & {
     clearCache: () => void;
     resultsCount: () => number;
     resetResultsCount: () => void;
   };
   lastResult: () => boolean;
-  dependencies: [(_: any, args: {
-    itemId: string;
-    isItemEditable: ((item: any) => boolean) | boolean;
-  }) => {
-    itemId: string;
-    isItemEditable: ((item: any) => boolean) | boolean;
-  }, (state: any, args: any) => import("../../..").TreeViewBaseItem<import("../../..").TreeViewDefaultItemModelProperties>];
+  dependencies: [TreeViewRootSelector<UseTreeViewLabelSignature, true>, (state: any, itemId: string) => import("../../..").TreeViewBaseItem<import("../../..").TreeViewDefaultItemModelProperties>];
   recomputations: () => number;
   resetRecomputations: () => void;
   dependencyRecomputations: () => number;
@@ -53,17 +45,19 @@ export declare const selectorIsItemBeingEdited: ((state: any, itemId: string) =>
   resetResultsCount: () => void;
 } & {
   resultFunc: (resultFuncArgs_0: {
+    isItemEditable: (item: any) => boolean;
     editedItemId: string | null;
-  }, resultFuncArgs_1: string) => boolean;
+  } | undefined, resultFuncArgs_1: string) => boolean;
   memoizedResultFunc: ((resultFuncArgs_0: {
+    isItemEditable: (item: any) => boolean;
     editedItemId: string | null;
-  }, resultFuncArgs_1: string) => boolean) & {
+  } | undefined, resultFuncArgs_1: string) => boolean) & {
     clearCache: () => void;
     resultsCount: () => number;
     resetResultsCount: () => void;
   };
   lastResult: () => boolean;
-  dependencies: [TreeViewRootSelector<UseTreeViewLabelSignature>, (_: any, itemId: string) => string];
+  dependencies: [TreeViewRootSelector<UseTreeViewLabelSignature, true>, (_: any, itemId: string) => string];
   recomputations: () => number;
   resetRecomputations: () => void;
   dependencyRecomputations: () => number;

package/internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors.js

@@ -11,16 +11,14 @@ const selectorTreeViewLabelState = state => state.label;
 /**
  * Check if an item is editable.
  * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
- * @param {object} params The parameters.
- * @param {TreeViewItemId} params.itemId The id of the item to check.
- * @param {((item: any) => boolean) | boolean} params.isItemEditable The function to determine if an item is editable.
+ * @param {TreeViewItemId} itemId The id of the item to check.
  * @returns {boolean} `true` if the item is editable, `false` otherwise.
  */
-const selectorIsItemEditable = exports.selectorIsItemEditable = (0, _selectors.createSelector)([(_, args) => args, (state, args) => (0, _useTreeViewItems.selectorItemModel)(state, args.itemId)], (args, itemModel) => {
-  if (!itemModel || !args.isItemEditable) {
+const selectorIsItemEditable = exports.selectorIsItemEditable = (0, _selectors.createSelector)([selectorTreeViewLabelState, (state, itemId) => (0, _useTreeViewItems.selectorItemModel)(state, itemId)], (labelState, itemModel) => {
+  if (!itemModel || !labelState) {
     return false;
   }
-  return typeof args.isItemEditable === 'function' ? args.isItemEditable(itemModel) : true;
+  return labelState.isItemEditable(itemModel);
 });
 
 /**
@@ -29,4 +27,4 @@ const selectorIsItemEditable = exports.selectorIsItemEditable = (0, _selectors.c
  * @param {TreeViewItemId} itemId The id of the item to check.
  * @returns {boolean} `true` if the item is being edited, `false` otherwise.
  */
-const selectorIsItemBeingEdited = exports.selectorIsItemBeingEdited = (0, _selectors.createSelector)([selectorTreeViewLabelState, (_, itemId) => itemId], (labelState, itemId) => labelState.editedItemId === itemId);
+const selectorIsItemBeingEdited = exports.selectorIsItemBeingEdited = (0, _selectors.createSelector)([selectorTreeViewLabelState, (_, itemId) => itemId], (labelState, itemId) => labelState?.editedItemId === itemId);

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

@@ -38,22 +38,23 @@ export interface UseTreeViewLabelParameters<R extends {}> {
 export type UseTreeViewLabelDefaultizedParameters<R extends {}> = DefaultizedProps<UseTreeViewLabelParameters<R>, 'isItemEditable'>;
 export interface UseTreeViewLabelState {
   label: {
+    isItemEditable: (item: any) => boolean;
     editedItemId: string | null;
   };
 }
-export interface UseTreeViewLabelContextValue {
-  label: Pick<UseTreeViewLabelDefaultizedParameters<any>, 'isItemEditable'>;
-}
 export type UseTreeViewLabelSignature = TreeViewPluginSignature<{
   params: UseTreeViewLabelParameters<any>;
   defaultizedParams: UseTreeViewLabelDefaultizedParameters<any>;
   publicAPI: UseTreeViewLabelPublicAPI;
   instance: UseTreeViewLabelInstance;
   state: UseTreeViewLabelState;
-  contextValue: UseTreeViewLabelContextValue;
   dependencies: [UseTreeViewItemsSignature];
 }>;
 export interface UseTreeItemLabelInputSlotPropsFromLabelEditing extends TreeItemLabelInputProps {}
+export interface UseTreeItemLabelSlotPropsFromLabelEditing {
+  editable?: boolean;
+}
 declare module '@mui/x-tree-view/useTreeItem' {
   interface UseTreeItemLabelInputSlotOwnProps extends UseTreeItemLabelInputSlotPropsFromLabelEditing {}
+  interface UseTreeItemLabelSlotOwnProps extends UseTreeItemLabelSlotPropsFromLabelEditing {}
 }

package/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors.d.ts

@@ -1,7 +1,5 @@
-import { TreeViewAnyPluginSignature, TreeViewState } from "../../models/index.js";
 import { TreeViewRootSelector, TreeViewRootSelectorForOptionalPlugin } from "../../utils/selectors.js";
 import { UseTreeViewLazyLoadingSignature } from "./useTreeViewLazyLoading.types.js";
-export type Temp<TSignature extends TreeViewAnyPluginSignature> = <TSignatures extends [], TOptionalSignatures extends [TSignature]>(state: TreeViewState<TSignatures, TOptionalSignatures>) => TSignature['state'][keyof TSignature['state']];
 export declare const selectorDataSourceState: ((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewLazyLoading.types").UseTreeViewLazyLoadingState & Partial<{}> & {
   cacheKey: import("../../models").TreeViewStateCacheKey;
 }) => {