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

package/CHANGELOG.md

@@ -5,6 +5,83 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.0.0-beta.1
+
+_Mar 21, 2025_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@jyash97.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @flaviendelangle, @JCQuintas, @KenanYusuf.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.0.0-beta.1`
+
+- [DataGrid] Fix error caused by `forwardRef` to `ClickAwayListener` (#17049) @arminmeh
+- [DataGrid] Fix error while editing rows with custom id (#17048) @arminmeh
+
+#### `@mui/x-data-grid-pro@8.0.0-beta.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.0.0-beta.1`, plus:
+
+- [DataGridPro] Fix header select checkbox state with `checkboxSelectionVisibleOnly` and `paginationMode="server"` (#17026) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.0.0-beta.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.0.0-beta.1`, plus:
+
+- [DataGridPremium] Update column state correctly when grouping mode is updated with one grouping column (#17069) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.0.0-beta.1`
+
+- [fields] Clean the `useField` hook (part 1) (#16944) @flaviendelangle
+- [fields] Improve the check for year in `doesSectionFormatHaveLeadingZeros` (#17051) @flaviendelangle
+- [pickers] Deprecate the `disableOpenPicker` prop (#17040) @flaviendelangle
+- [pickers] Simplify the `cleanLeadingZeros` method (#17063) @flaviendelangle
+- [pickers] Use the new `ownerState` in `PickersDay` and `DateRangePickerDay` (#17035) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.0.0-beta.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.0.0-beta.1`, plus:
+
+- [DateRangePicker] Use desktop media query constant on range pickers (#17052) @flaviendelangle
+
+### Charts
+
+#### `@mui/x-charts@8.0.0-beta.1`
+
+- [charts] Fix horizontal bar with multiple axes (#17059) @alexfauquette
+
+#### `@mui/x-charts-pro@8.0.0-beta.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.0.0-beta.1`, plus:
+
+- [charts-pro] Allow disabling Heatmap tooltip (#17060) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-beta.1`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.0.0-beta.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.0.0-beta.1`.
+
+### Docs
+
+- [docs] Fix 404 (#17033) @alexfauquette
+- [docs] Fix Data Grid advanced list view demo (#17064) @KenanYusuf
+
 ## 8.0.0-beta.0
 
 <img width="100%" alt="MUI X v8 Beta is live" src="https://github.com/user-attachments/assets/61ec4dd8-c946-456b-8b45-d51de8772f5d">

package/esm/hooks/useTreeItemUtils/useTreeItemUtils.js

@@ -7,7 +7,7 @@ import { useSelector } from "../../internals/hooks/useSelector.js";
 import { selectorIsItemExpandable, selectorIsItemExpanded } from "../../internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js";
 import { selectorIsItemFocused } from "../../internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors.js";
 import { selectorIsItemDisabled } from "../../internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js";
-import { selectorIsItemSelected } from "../../internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors.js";
+import { selectorIsItemSelected, selectorIsMultiSelectEnabled } from "../../internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors.js";
 import { selectorGetTreeItemError, selectorIsItemLoading, selectorIsLazyLoadingEnabled } from "../../internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors.js";
 import { selectorIsItemBeingEdited, selectorIsItemEditable } from "../../internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors.js";
 
@@ -31,15 +31,12 @@ export const useTreeItemUtils = ({
 }) => {
   const {
     instance,
-    label,
     store,
-    selection: {
-      multiSelect
-    },
     publicAPI
   } = useTreeViewContext();
   const isItemExpandable = useSelector(store, selectorIsItemExpandable, itemId);
   const isLazyLoadingEnabled = useSelector(store, selectorIsLazyLoadingEnabled);
+  const isMultiSelectEnabled = useSelector(store, selectorIsMultiSelectEnabled);
   const loading = useSelector(store, state => isLazyLoadingEnabled ? selectorIsItemLoading(state, itemId) : false);
   const error = useSelector(store, state => isLazyLoadingEnabled ? Boolean(selectorGetTreeItemError(state, itemId)) : false);
   const isExpandable = itemHasChildren(children) || isItemExpandable;
@@ -47,11 +44,8 @@ export const useTreeItemUtils = ({
   const isFocused = useSelector(store, selectorIsItemFocused, itemId);
   const isSelected = useSelector(store, selectorIsItemSelected, itemId);
   const isDisabled = useSelector(store, selectorIsItemDisabled, itemId);
-  const isEditing = useSelector(store, state => label == null ? false : selectorIsItemBeingEdited(state, itemId));
-  const isEditable = useSelector(store, state => label == null ? false : selectorIsItemEditable(state, {
-    itemId,
-    isItemEditable: label.isItemEditable
-  }));
+  const isEditing = useSelector(store, selectorIsItemBeingEdited, itemId);
+  const isEditable = useSelector(store, selectorIsItemEditable, itemId);
   const status = {
     expandable: isExpandable,
     expanded: isExpanded,
@@ -70,7 +64,7 @@ export 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 && selectorIsItemExpanded(store.value, itemId))) {
@@ -88,7 +82,7 @@ export 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);
@@ -109,13 +103,13 @@ export 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/esm/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/esm/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/esm/internals/plugins/useTreeViewItems/useTreeViewItems.js

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

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

@@ -37,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/esm/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/esm/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,7 +58,7 @@ 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);
   };
@@ -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.setItemSelection({
               event,
               itemId,
-              keepExistingSelection: params.multiSelect,
-              shouldBeSelected: params.multiSelect ? undefined : true
+              keepExistingSelection: isMultiSelectEnabled,
+              shouldBeSelected: undefined
             });
           }
           break;
@@ -97,10 +98,7 @@ 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.setItemExpansion({
@@ -109,7 +107,7 @@ export const useTreeViewKeyboardNavigation = ({
             });
             event.preventDefault();
           } else if (canToggleItemSelection(itemId)) {
-            if (params.multiSelect) {
+            if (isMultiSelectEnabled) {
               event.preventDefault();
               instance.setItemSelection({
                 event,
@@ -137,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);
             }
           }
@@ -154,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);
             }
           }
@@ -212,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));
@@ -226,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));
@@ -245,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/esm/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/esm/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/esm/internals/plugins/useTreeViewLabel/useTreeViewLabel.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { useTreeViewLabelItemPlugin } from "./useTreeViewLabel.itemPlugin.js";
 export const useTreeViewLabel = ({
   store,
@@ -7,9 +7,9 @@ export const useTreeViewLabel = ({
 }) => {
   const setEditedItemId = editedItemId => {
     store.update(prevState => _extends({}, prevState, {
-      label: {
+      label: _extends({}, prevState.label, {
         editedItemId
-      }
+      })
     }));
   };
   const updateItemLabel = (itemId, label) => {
@@ -35,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,
@@ -47,8 +50,7 @@ export const useTreeViewLabel = ({
     },
     publicAPI: {
       updateItemLabel
-    },
-    contextValue: pluginContextValue
+    }
   };
 };
 useTreeViewLabel.itemPlugin = useTreeViewLabelItemPlugin;
@@ -57,8 +59,11 @@ useTreeViewLabel.getDefaultizedParams = ({
 }) => _extends({}, params, {
   isItemEditable: params.isItemEditable ?? false
 });
-useTreeViewLabel.getInitialState = () => ({
+useTreeViewLabel.getInitialState = ({
+  isItemEditable
+}) => ({
   label: {
+    isItemEditable: typeof isItemEditable === 'boolean' ? () => isItemEditable : isItemEditable,
     editedItemId: null
   }
 });

package/esm/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/esm/internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors.js

@@ -5,16 +5,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.
  */
-export const selectorIsItemEditable = createSelector([(_, args) => args, (state, args) => selectorItemModel(state, args.itemId)], (args, itemModel) => {
-  if (!itemModel || !args.isItemEditable) {
+export const selectorIsItemEditable = createSelector([selectorTreeViewLabelState, (state, itemId) => selectorItemModel(state, itemId)], (labelState, itemModel) => {
+  if (!itemModel || !labelState) {
     return false;
   }
-  return typeof args.isItemEditable === 'function' ? args.isItemEditable(itemModel) : true;
+  return labelState.isItemEditable(itemModel);
 });
 
 /**
@@ -23,4 +21,4 @@ export const selectorIsItemEditable = createSelector([(_, args) => args, (state,
  * @param {TreeViewItemId} itemId The id of the item to check.
  * @returns {boolean} `true` if the item is being edited, `false` otherwise.
  */
-export const selectorIsItemBeingEdited = createSelector([selectorTreeViewLabelState, (_, itemId) => itemId], (labelState, itemId) => labelState.editedItemId === itemId);
+export const selectorIsItemBeingEdited = createSelector([selectorTreeViewLabelState, (_, itemId) => itemId], (labelState, itemId) => labelState?.editedItemId === itemId);

package/esm/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/esm/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;
 }) => {