@mui/x-tree-view 8.0.0-alpha.4 → 8.0.0-alpha.5

package/CHANGELOG.md

@@ -5,6 +5,108 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.0.0-alpha.5
+
+_Dec 19, 2024_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Korean (ko-KR) locale on the Data Grid
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@good-jinu, @k-rajat19.
+Following are all team members who have contributed to this release:
+@alexfauquette, @cherniavskii, @flaviendelangle, @KenanYusuf, @LukasTy, @MBilalShafi, @romgrk.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### Breaking changes
+
+- Passing additional props (like `data-*`, `aria-*`) directly on the Data Grid component is no longer supported. To pass the props, use `slotProps`.
+
+  - For `.root` element, use `slotProps.root`.
+  - For `.main` element (the one with `role="grid"`), use `slotProps.main`.
+
+- `detailPanelExpandedRowIds` and `onDetailPanelExpandedRowIdsChange` props use a [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) instead of an array:
+
+  ```diff
+  -detailPanelExpandedRowIds?: GridRowId[];
+  +detailPanelExpandedRowIds?: Set<GridRowId>;
+
+  -onDetailPanelExpandedRowIdsChange?: (ids: GridRowId[], details: GridCallbackDetails) => void;
+  +onDetailPanelExpandedRowIdsChange?: (ids: Set<GridRowId>, details: GridCallbackDetails) => void;
+  ```
+
+- `apiRef.current.getExpandedDetailPanels` and `apiRef.current.setExpandedDetailPanels` methods receive and return a [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) instead of an array.
+- `gridDetailPanelExpandedRowIdsSelector` returns a [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) instead of an array.
+- `gridDetailPanelExpandedRowsHeightCacheSelector` was removed.
+
+#### `@mui/x-data-grid@8.0.0-alpha.5`
+
+- [DataGrid] Consider `columnGroupHeaderHeight` prop in `getTotalHeaderHeight` method (#15915) @k-rajat19
+- [DataGrid] Fix autosizing with virtualized columns (#15116) @k-rajat19
+- [DataGrid] Move `<Badge />` to leaf import (#15879) @romgrk
+- [DataGrid] Move `<ListItemText />` and `<ListItemIcon />` to leaf import (#15869) @romgrk
+- [DataGrid] Remove the Joy UI demo (#15913) @romgrk
+- [DataGrid] Update quick filter input variant (#15909) @KenanYusuf
+- [DataGrid] Use `slotProps` to forward props to `.main` and `.root` elements (#15870) @MBilalShafi
+- [l10n] Improve Korean(ko-KR) locale (#15878) @good-jinu
+
+#### `@mui/x-data-grid-pro@8.0.0-alpha.5` [![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-alpha.5`, plus:
+
+- [DataGridPro] Use `Set` for `detailPanelExpandedRowIds` (#15835) @cherniavskii
+
+#### `@mui/x-data-grid-premium@8.0.0-alpha.5` [![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-alpha.5`.
+
+### Date and Time Pickers
+
+#### Breaking changes
+
+- The `<PickersMonth />` component has been moved inside the Month Calendar component — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#month-calendar).
+
+- The `<PickersYear />` component has been moved inside the Year Calendar component — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#year-calendar).
+
+#### `@mui/x-date-pickers@8.0.0-alpha.5`
+
+- [pickers] Add verification to disable skipped hours in spring forward DST (#15849) @flaviendelangle
+- [pickers] Remove `PickersMonth` and `PickersYear` from the theme and remove the `div` wrapping each button (#15806) @flaviendelangle
+- [pickers] Use the new `ownerState` object on the `<PickersTextField />` component (#15863) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.0.0-alpha.5` [![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-alpha.5`.
+
+### Charts
+
+#### `@mui/x-charts@8.0.0-alpha.5`
+
+- [charts] Fix `<ScatterChart />` value type if `null` (#15917) @alexfauquette
+
+#### `@mui/x-charts-pro@8.0.0-alpha.5` [![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-alpha.5`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-alpha.5`
+
+No changes since `@mui/x-tree-view-pro@v8.0.0-alpha.4`.
+
+#### `@mui/x-tree-view-pro@8.0.0-alpha.5` [![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-alpha.5`.
+
+### Core
+
+- [code-infra] Remove `@mui/material-nextjs` dependency (#15925) @LukasTy
+
 ## 8.0.0-alpha.4
 
 _Dec 13, 2024_
@@ -39,6 +141,7 @@ Following are all team members who have contributed to this release:
   -const output = useGridSelector(apiRef, selector, equals)
   +const output = useGridSelector(apiRef, selector, arguments, equals)
   ```
+
 - The default variant for text fields and selects in the filter panel has been changed to `outlined`.
 - The "row spanning" feature is now stable.
   ```diff

package/index.js

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

package/internals/models/plugin.d.ts

@@ -118,7 +118,7 @@ type TreeViewRequiredPlugins<TSignature extends TreeViewAnyPluginSignature> = [
 ];
 type PluginPropertyWithDependencies<TSignature extends TreeViewAnyPluginSignature, TProperty extends keyof TreeViewAnyPluginSignature> = TSignature[TProperty] & MergeSignaturesProperty<TreeViewRequiredPlugins<TSignature>, TProperty> & Partial<MergeSignaturesProperty<TSignature['optionalDependencies'], TProperty>>;
 export type TreeViewUsedParams<TSignature extends TreeViewAnyPluginSignature> = PluginPropertyWithDependencies<TSignature, 'params'>;
-type TreeViewUsedDefaultizedParams<TSignature extends TreeViewAnyPluginSignature> = PluginPropertyWithDependencies<TSignature, 'defaultizedParams'>;
+export type TreeViewUsedDefaultizedParams<TSignature extends TreeViewAnyPluginSignature> = PluginPropertyWithDependencies<TSignature, 'defaultizedParams'>;
 export type TreeViewUsedInstance<TSignature extends TreeViewAnyPluginSignature> = PluginPropertyWithDependencies<TSignature, 'instance'> & {
     /**
      * Private property only defined in TypeScript to be able to access the plugin signature from the instance object.

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -1,25 +1,38 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { selectorIsItemExpandable, selectorIsItemExpanded } from "./useTreeViewExpansion.selectors.js";
-import { createExpandedItemsMap } from "./useTreeViewExpansion.utils.js";
+import { createExpandedItemsMap, getExpansionTrigger } from "./useTreeViewExpansion.utils.js";
 import { selectorItemMeta, selectorItemOrderedChildrenIds } from "../useTreeViewItems/useTreeViewItems.selectors.js";
 export const useTreeViewExpansion = ({
   instance,
   store,
   params,
-  models,
-  experimentalFeatures
+  models
 }) => {
-  const isTreeViewEditable = Boolean(params.isItemEditable) && !!experimentalFeatures.labelEditing;
   useEnhancedEffect(() => {
     store.update(prevState => _extends({}, prevState, {
-      expansion: {
+      expansion: _extends({}, prevState.expansion, {
         expandedItemsMap: createExpandedItemsMap(models.expandedItems.value)
-      }
+      })
     }));
   }, [store, models.expandedItems.value]);
+  useEnhancedEffect(() => {
+    store.update(prevState => {
+      const newExpansionTrigger = getExpansionTrigger({
+        isItemEditable: params.isItemEditable,
+        expansionTrigger: params.expansionTrigger
+      });
+      if (prevState.expansion.expansionTrigger === newExpansionTrigger) {
+        return prevState;
+      }
+      return _extends({}, prevState, {
+        expansion: _extends({}, prevState.expansion, {
+          expansionTrigger: newExpansionTrigger
+        })
+      });
+    });
+  }, [store, params.isItemEditable, params.expansionTrigger]);
   const setExpandedItems = (event, value) => {
     params.onExpandedItemsChange?.(event, value);
     models.expandedItems.setControlledValue(value);
@@ -61,20 +74,6 @@ export const useTreeViewExpansion = ({
       setExpandedItems(event, newExpanded);
     }
   };
-  const expansionTrigger = React.useMemo(() => {
-    if (params.expansionTrigger) {
-      return params.expansionTrigger;
-    }
-    if (isTreeViewEditable) {
-      return 'iconContainer';
-    }
-    return 'content';
-  }, [params.expansionTrigger, isTreeViewEditable]);
-  const pluginContextValue = React.useMemo(() => ({
-    expansion: {
-      expansionTrigger
-    }
-  }), [expansionTrigger]);
   return {
     publicAPI: {
       setItemExpansion
@@ -83,8 +82,7 @@ export const useTreeViewExpansion = ({
       setItemExpansion,
       toggleItemExpansion,
       expandAllSiblings
-    },
-    contextValue: pluginContextValue
+    }
   };
 };
 useTreeViewExpansion.models = {
@@ -100,7 +98,8 @@ useTreeViewExpansion.getDefaultizedParams = ({
 });
 useTreeViewExpansion.getInitialState = params => ({
   expansion: {
-    expandedItemsMap: createExpandedItemsMap(params.expandedItems === undefined ? params.defaultExpandedItems : params.expandedItems)
+    expandedItemsMap: createExpandedItemsMap(params.expandedItems === undefined ? params.defaultExpandedItems : params.expandedItems),
+    expansionTrigger: getExpansionTrigger(params)
   }
 });
 useTreeViewExpansion.params = {

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

@@ -12,9 +12,11 @@ export declare const selectorIsItemExpanded: ((state: any, itemId: string) => bo
 } & {
     resultFunc: (resultFuncArgs_0: {
         expandedItemsMap: Map<string, true>;
+        expansionTrigger: "content" | "iconContainer";
     }, resultFuncArgs_1: string) => boolean;
     memoizedResultFunc: ((resultFuncArgs_0: {
         expandedItemsMap: Map<string, true>;
+        expansionTrigger: "content" | "iconContainer";
     }, resultFuncArgs_1: string) => boolean) & {
         clearCache: () => void;
         resultsCount: () => number;
@@ -142,3 +144,37 @@ export declare const selectorIsItemExpandable: ((state: any, itemId: string | nu
     argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
 };
+/**
+ * Get the slot that triggers the item's expansion when clicked.
+ * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
+ * @returns {'content' | 'iconContainer'} The slot that triggers the item's expansion when clicked. Is `null` if the item is not expandable.
+ */
+export declare const selectorItemExpansionTrigger: ((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewExpansion.types").UseTreeViewExpansionState & Partial<{}> & {
+    cacheKey: import("../../models").TreeViewStateCacheKey;
+}) => "content" | "iconContainer") & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        expandedItemsMap: Map<string, true>;
+        expansionTrigger: "content" | "iconContainer";
+    }) => "content" | "iconContainer";
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        expandedItemsMap: Map<string, true>;
+        expansionTrigger: "content" | "iconContainer";
+    }) => "content" | "iconContainer") & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => "content" | "iconContainer";
+    dependencies: [TreeViewRootSelector<UseTreeViewExpansionSignature>];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js

@@ -14,4 +14,11 @@ export const selectorIsItemExpanded = createSelector([selectorExpansion, (_, ite
  * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
  * @returns {boolean} `true` if the item is expandable, `false` otherwise.
  */
-export const selectorIsItemExpandable = createSelector([selectorItemMeta], itemMeta => itemMeta?.expandable ?? false);
+export const selectorIsItemExpandable = createSelector([selectorItemMeta], itemMeta => itemMeta?.expandable ?? false);
+
+/**
+ * Get the slot that triggers the item's expansion when clicked.
+ * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
+ * @returns {'content' | 'iconContainer'} The slot that triggers the item's expansion when clicked. Is `null` if the item is not expandable.
+ */
+export const selectorItemExpansionTrigger = createSelector([selectorExpansion], expansionState => expansionState.expansionTrigger);

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

@@ -63,11 +63,9 @@ export type UseTreeViewExpansionDefaultizedParameters = DefaultizedProps<UseTree
 export interface UseTreeViewExpansionState {
     expansion: {
         expandedItemsMap: Map<string, true>;
+        expansionTrigger: 'content' | 'iconContainer';
     };
 }
-interface UseTreeViewExpansionContextValue {
-    expansion: Pick<UseTreeViewExpansionParameters, 'expansionTrigger'>;
-}
 export type UseTreeViewExpansionSignature = TreeViewPluginSignature<{
     params: UseTreeViewExpansionParameters;
     defaultizedParams: UseTreeViewExpansionDefaultizedParameters;
@@ -75,8 +73,6 @@ export type UseTreeViewExpansionSignature = TreeViewPluginSignature<{
     publicAPI: UseTreeViewExpansionPublicAPI;
     modelNames: 'expandedItems';
     state: UseTreeViewExpansionState;
-    contextValue: UseTreeViewExpansionContextValue;
     dependencies: [UseTreeViewItemsSignature];
     optionalDependencies: [UseTreeViewLabelSignature];
 }>;
-export {};

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

@@ -1 +1,4 @@
+import { TreeViewUsedDefaultizedParams } from '../../models';
+import { UseTreeViewExpansionSignature } from './useTreeViewExpansion.types';
 export declare const createExpandedItemsMap: (expandedItems: string[]) => Map<string, true>;
+export declare const getExpansionTrigger: ({ isItemEditable, expansionTrigger, }: Pick<TreeViewUsedDefaultizedParams<UseTreeViewExpansionSignature>, "isItemEditable" | "expansionTrigger">) => "content" | "iconContainer";

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.utils.js

@@ -4,4 +4,16 @@ export const createExpandedItemsMap = expandedItems => {
     expandedItemsMap.set(id, true);
   });
   return expandedItemsMap;
+};
+export const getExpansionTrigger = ({
+  isItemEditable,
+  expansionTrigger
+}) => {
+  if (expansionTrigger) {
+    return expansionTrigger;
+  }
+  if (isItemEditable) {
+    return 'iconContainer';
+  }
+  return 'content';
 };

package/modern/index.js

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

package/modern/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -1,25 +1,38 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { selectorIsItemExpandable, selectorIsItemExpanded } from "./useTreeViewExpansion.selectors.js";
-import { createExpandedItemsMap } from "./useTreeViewExpansion.utils.js";
+import { createExpandedItemsMap, getExpansionTrigger } from "./useTreeViewExpansion.utils.js";
 import { selectorItemMeta, selectorItemOrderedChildrenIds } from "../useTreeViewItems/useTreeViewItems.selectors.js";
 export const useTreeViewExpansion = ({
   instance,
   store,
   params,
-  models,
-  experimentalFeatures
+  models
 }) => {
-  const isTreeViewEditable = Boolean(params.isItemEditable) && !!experimentalFeatures.labelEditing;
   useEnhancedEffect(() => {
     store.update(prevState => _extends({}, prevState, {
-      expansion: {
+      expansion: _extends({}, prevState.expansion, {
         expandedItemsMap: createExpandedItemsMap(models.expandedItems.value)
-      }
+      })
     }));
   }, [store, models.expandedItems.value]);
+  useEnhancedEffect(() => {
+    store.update(prevState => {
+      const newExpansionTrigger = getExpansionTrigger({
+        isItemEditable: params.isItemEditable,
+        expansionTrigger: params.expansionTrigger
+      });
+      if (prevState.expansion.expansionTrigger === newExpansionTrigger) {
+        return prevState;
+      }
+      return _extends({}, prevState, {
+        expansion: _extends({}, prevState.expansion, {
+          expansionTrigger: newExpansionTrigger
+        })
+      });
+    });
+  }, [store, params.isItemEditable, params.expansionTrigger]);
   const setExpandedItems = (event, value) => {
     params.onExpandedItemsChange?.(event, value);
     models.expandedItems.setControlledValue(value);
@@ -61,20 +74,6 @@ export const useTreeViewExpansion = ({
       setExpandedItems(event, newExpanded);
     }
   };
-  const expansionTrigger = React.useMemo(() => {
-    if (params.expansionTrigger) {
-      return params.expansionTrigger;
-    }
-    if (isTreeViewEditable) {
-      return 'iconContainer';
-    }
-    return 'content';
-  }, [params.expansionTrigger, isTreeViewEditable]);
-  const pluginContextValue = React.useMemo(() => ({
-    expansion: {
-      expansionTrigger
-    }
-  }), [expansionTrigger]);
   return {
     publicAPI: {
       setItemExpansion
@@ -83,8 +82,7 @@ export const useTreeViewExpansion = ({
       setItemExpansion,
       toggleItemExpansion,
       expandAllSiblings
-    },
-    contextValue: pluginContextValue
+    }
   };
 };
 useTreeViewExpansion.models = {
@@ -100,7 +98,8 @@ useTreeViewExpansion.getDefaultizedParams = ({
 });
 useTreeViewExpansion.getInitialState = params => ({
   expansion: {
-    expandedItemsMap: createExpandedItemsMap(params.expandedItems === undefined ? params.defaultExpandedItems : params.expandedItems)
+    expandedItemsMap: createExpandedItemsMap(params.expandedItems === undefined ? params.defaultExpandedItems : params.expandedItems),
+    expansionTrigger: getExpansionTrigger(params)
   }
 });
 useTreeViewExpansion.params = {

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

@@ -14,4 +14,11 @@ export const selectorIsItemExpanded = createSelector([selectorExpansion, (_, ite
  * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
  * @returns {boolean} `true` if the item is expandable, `false` otherwise.
  */
-export const selectorIsItemExpandable = createSelector([selectorItemMeta], itemMeta => itemMeta?.expandable ?? false);
+export const selectorIsItemExpandable = createSelector([selectorItemMeta], itemMeta => itemMeta?.expandable ?? false);
+
+/**
+ * Get the slot that triggers the item's expansion when clicked.
+ * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
+ * @returns {'content' | 'iconContainer'} The slot that triggers the item's expansion when clicked. Is `null` if the item is not expandable.
+ */
+export const selectorItemExpansionTrigger = createSelector([selectorExpansion], expansionState => expansionState.expansionTrigger);

package/modern/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.utils.js

@@ -4,4 +4,16 @@ export const createExpandedItemsMap = expandedItems => {
     expandedItemsMap.set(id, true);
   });
   return expandedItemsMap;
+};
+export const getExpansionTrigger = ({
+  isItemEditable,
+  expansionTrigger
+}) => {
+  if (expansionTrigger) {
+    return expansionTrigger;
+  }
+  if (isItemEditable) {
+    return 'iconContainer';
+  }
+  return 'content';
 };

package/modern/useTreeItem/useTreeItem.js

@@ -13,6 +13,7 @@ import { selectorIsItemTheDefaultFocusableItem } from "../internals/plugins/useT
 import { generateTreeItemIdAttribute } from "../internals/corePlugins/useTreeViewId/useTreeViewId.utils.js";
 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";
 export const useTreeItem = parameters => {
   const {
     runItemPlugins,
@@ -23,9 +24,6 @@ export const useTreeItem = parameters => {
       disableSelection,
       checkboxSelection
     },
-    expansion: {
-      expansionTrigger
-    },
     label: labelContext,
     instance,
     publicAPI,
@@ -122,7 +120,7 @@ export const useTreeItem = parameters => {
     if (event.defaultMuiPrevented || checkboxRef.current?.contains(event.target)) {
       return;
     }
-    if (expansionTrigger === 'content') {
+    if (selectorItemExpansionTrigger(store.value) === 'content') {
       interactions.handleExpansion(event);
     }
     if (!checkboxSelection) {
@@ -145,7 +143,7 @@ export const useTreeItem = parameters => {
     if (event.defaultMuiPrevented) {
       return;
     }
-    if (expansionTrigger === 'iconContainer') {
+    if (selectorItemExpansionTrigger(store.value) === 'iconContainer') {
       interactions.handleExpansion(event);
     }
   };

package/node/index.js

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

package/node/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -1,13 +1,11 @@
 "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.useTreeViewExpansion = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _useTreeViewExpansion = require("./useTreeViewExpansion.selectors");
@@ -17,17 +15,31 @@ const useTreeViewExpansion = ({
   instance,
   store,
   params,
-  models,
-  experimentalFeatures
+  models
 }) => {
-  const isTreeViewEditable = Boolean(params.isItemEditable) && !!experimentalFeatures.labelEditing;
   (0, _useEnhancedEffect.default)(() => {
     store.update(prevState => (0, _extends2.default)({}, prevState, {
-      expansion: {
+      expansion: (0, _extends2.default)({}, prevState.expansion, {
         expandedItemsMap: (0, _useTreeViewExpansion2.createExpandedItemsMap)(models.expandedItems.value)
-      }
+      })
     }));
   }, [store, models.expandedItems.value]);
+  (0, _useEnhancedEffect.default)(() => {
+    store.update(prevState => {
+      const newExpansionTrigger = (0, _useTreeViewExpansion2.getExpansionTrigger)({
+        isItemEditable: params.isItemEditable,
+        expansionTrigger: params.expansionTrigger
+      });
+      if (prevState.expansion.expansionTrigger === newExpansionTrigger) {
+        return prevState;
+      }
+      return (0, _extends2.default)({}, prevState, {
+        expansion: (0, _extends2.default)({}, prevState.expansion, {
+          expansionTrigger: newExpansionTrigger
+        })
+      });
+    });
+  }, [store, params.isItemEditable, params.expansionTrigger]);
   const setExpandedItems = (event, value) => {
     params.onExpandedItemsChange?.(event, value);
     models.expandedItems.setControlledValue(value);
@@ -69,20 +81,6 @@ const useTreeViewExpansion = ({
       setExpandedItems(event, newExpanded);
     }
   };
-  const expansionTrigger = React.useMemo(() => {
-    if (params.expansionTrigger) {
-      return params.expansionTrigger;
-    }
-    if (isTreeViewEditable) {
-      return 'iconContainer';
-    }
-    return 'content';
-  }, [params.expansionTrigger, isTreeViewEditable]);
-  const pluginContextValue = React.useMemo(() => ({
-    expansion: {
-      expansionTrigger
-    }
-  }), [expansionTrigger]);
   return {
     publicAPI: {
       setItemExpansion
@@ -91,8 +89,7 @@ const useTreeViewExpansion = ({
       setItemExpansion,
       toggleItemExpansion,
       expandAllSiblings
-    },
-    contextValue: pluginContextValue
+    }
   };
 };
 exports.useTreeViewExpansion = useTreeViewExpansion;
@@ -109,7 +106,8 @@ useTreeViewExpansion.getDefaultizedParams = ({
 });
 useTreeViewExpansion.getInitialState = params => ({
   expansion: {
-    expandedItemsMap: (0, _useTreeViewExpansion2.createExpandedItemsMap)(params.expandedItems === undefined ? params.defaultExpandedItems : params.expandedItems)
+    expandedItemsMap: (0, _useTreeViewExpansion2.createExpandedItemsMap)(params.expandedItems === undefined ? params.defaultExpandedItems : params.expandedItems),
+    expansionTrigger: (0, _useTreeViewExpansion2.getExpansionTrigger)(params)
   }
 });
 useTreeViewExpansion.params = {

package/node/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorIsItemExpanded = exports.selectorIsItemExpandable = void 0;
+exports.selectorItemExpansionTrigger = exports.selectorIsItemExpanded = exports.selectorIsItemExpandable = void 0;
 var _selectors = require("../../utils/selectors");
 var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
 const selectorExpansion = state => state.expansion;
@@ -20,4 +20,11 @@ const selectorIsItemExpanded = exports.selectorIsItemExpanded = (0, _selectors.c
  * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
  * @returns {boolean} `true` if the item is expandable, `false` otherwise.
  */
-const selectorIsItemExpandable = exports.selectorIsItemExpandable = (0, _selectors.createSelector)([_useTreeViewItems.selectorItemMeta], itemMeta => itemMeta?.expandable ?? false);
+const selectorIsItemExpandable = exports.selectorIsItemExpandable = (0, _selectors.createSelector)([_useTreeViewItems.selectorItemMeta], itemMeta => itemMeta?.expandable ?? false);
+
+/**
+ * Get the slot that triggers the item's expansion when clicked.
+ * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
+ * @returns {'content' | 'iconContainer'} The slot that triggers the item's expansion when clicked. Is `null` if the item is not expandable.
+ */
+const selectorItemExpansionTrigger = exports.selectorItemExpansionTrigger = (0, _selectors.createSelector)([selectorExpansion], expansionState => expansionState.expansionTrigger);

package/node/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createExpandedItemsMap = void 0;
+exports.getExpansionTrigger = exports.createExpandedItemsMap = void 0;
 const createExpandedItemsMap = expandedItems => {
   const expandedItemsMap = new Map();
   expandedItems.forEach(id => {
@@ -11,4 +11,17 @@ const createExpandedItemsMap = expandedItems => {
   });
   return expandedItemsMap;
 };
-exports.createExpandedItemsMap = createExpandedItemsMap;
+exports.createExpandedItemsMap = createExpandedItemsMap;
+const getExpansionTrigger = ({
+  isItemEditable,
+  expansionTrigger
+}) => {
+  if (expansionTrigger) {
+    return expansionTrigger;
+  }
+  if (isItemEditable) {
+    return 'iconContainer';
+  }
+  return 'content';
+};
+exports.getExpansionTrigger = getExpansionTrigger;

package/node/useTreeItem/useTreeItem.js

@@ -20,6 +20,7 @@ var _useTreeViewFocus = require("../internals/plugins/useTreeViewFocus/useTreeVi
 var _useTreeViewId = require("../internals/corePlugins/useTreeViewId/useTreeViewId.utils");
 var _useTreeViewItems = require("../internals/plugins/useTreeViewItems/useTreeViewItems.selectors");
 var _useTreeViewId2 = require("../internals/corePlugins/useTreeViewId/useTreeViewId.selectors");
+var _useTreeViewExpansion = require("../internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors");
 const useTreeItem = parameters => {
   const {
     runItemPlugins,
@@ -30,9 +31,6 @@ const useTreeItem = parameters => {
       disableSelection,
       checkboxSelection
     },
-    expansion: {
-      expansionTrigger
-    },
     label: labelContext,
     instance,
     publicAPI,
@@ -129,7 +127,7 @@ const useTreeItem = parameters => {
     if (event.defaultMuiPrevented || checkboxRef.current?.contains(event.target)) {
       return;
     }
-    if (expansionTrigger === 'content') {
+    if ((0, _useTreeViewExpansion.selectorItemExpansionTrigger)(store.value) === 'content') {
       interactions.handleExpansion(event);
     }
     if (!checkboxSelection) {
@@ -152,7 +150,7 @@ const useTreeItem = parameters => {
     if (event.defaultMuiPrevented) {
       return;
     }
-    if (expansionTrigger === 'iconContainer') {
+    if ((0, _useTreeViewExpansion.selectorItemExpansionTrigger)(store.value) === 'iconContainer') {
       interactions.handleExpansion(event);
     }
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "8.0.0-alpha.4",
+  "version": "8.0.0-alpha.5",
   "description": "The community edition of the Tree View components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -35,13 +35,13 @@
   "dependencies": {
     "@babel/runtime": "^7.26.0",
     "@mui/utils": "^5.16.6 || ^6.0.0",
-    "@types/react-transition-group": "^4.4.11",
+    "@types/react-transition-group": "^4.4.12",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.4.0",
-    "@mui/x-internals": "8.0.0-alpha.2"
+    "@mui/x-internals": "8.0.0-alpha.5"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/useTreeItem/useTreeItem.js

@@ -13,6 +13,7 @@ import { selectorIsItemTheDefaultFocusableItem } from "../internals/plugins/useT
 import { generateTreeItemIdAttribute } from "../internals/corePlugins/useTreeViewId/useTreeViewId.utils.js";
 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";
 export const useTreeItem = parameters => {
   const {
     runItemPlugins,
@@ -23,9 +24,6 @@ export const useTreeItem = parameters => {
       disableSelection,
       checkboxSelection
     },
-    expansion: {
-      expansionTrigger
-    },
     label: labelContext,
     instance,
     publicAPI,
@@ -122,7 +120,7 @@ export const useTreeItem = parameters => {
     if (event.defaultMuiPrevented || checkboxRef.current?.contains(event.target)) {
       return;
     }
-    if (expansionTrigger === 'content') {
+    if (selectorItemExpansionTrigger(store.value) === 'content') {
       interactions.handleExpansion(event);
     }
     if (!checkboxSelection) {
@@ -145,7 +143,7 @@ export const useTreeItem = parameters => {
     if (event.defaultMuiPrevented) {
       return;
     }
-    if (expansionTrigger === 'iconContainer') {
+    if (selectorItemExpansionTrigger(store.value) === 'iconContainer') {
       interactions.handleExpansion(event);
     }
   };