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

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

@@ -102,12 +102,36 @@ interface UseTreeViewItemsEventLookup {
 }
 export interface UseTreeViewItemsState<R extends {}> {
     items: {
+        /**
+         * If `true`, will allow focus on disabled items.
+         * Always equal to `props.disabledItemsFocusable` (or `false` if not provided).
+         */
         disabledItemsFocusable: boolean;
-        itemModelLookup: TreeViewItemModelLookup<R>;
-        itemMetaLookup: TreeViewItemMetaLookup;
+        /**
+         * Model of each item as provided by `props.items` or by imperative items updates.
+         * It is not updated when properties derived from the model are updated:
+         * - when the label of an item is updated, `itemMetaLookup` is updated, not `itemModelLookup`.
+         * - when the children of an item are updated, `itemOrderedChildrenIdsLookup` and `itemChildrenIndexesLookup` are updated, not `itemModelLookup`.
+         * This means that the `children`, `label` or `id` properties of an item model should never be used directly, always use the structured sub-states instead.
+         */
+        itemModelLookup: {
+            [itemId: string]: TreeViewBaseItem<R>;
+        };
+        /**
+         * Meta data of each item.
+         */
+        itemMetaLookup: {
+            [itemId: string]: TreeViewItemMeta;
+        };
+        /**
+         * Ordered children ids of each item.
+         */
         itemOrderedChildrenIdsLookup: {
             [parentItemId: string]: string[];
         };
+        /**
+         * Index of each child in the ordered children ids of its parent.
+         */
         itemChildrenIndexesLookup: {
             [parentItemId: string]: {
                 [itemId: string]: number;
@@ -129,10 +153,4 @@ export type UseTreeViewItemsSignature = TreeViewPluginSignature<{
     state: UseTreeViewItemsState<TreeViewDefaultItemModelProperties>;
     contextValue: UseTreeViewItemsContextValue;
 }>;
-export type TreeViewItemMetaLookup = {
-    [itemId: string]: TreeViewItemMeta;
-};
-export type TreeViewItemModelLookup<R extends {}> = {
-    [itemId: string]: TreeViewBaseItem<R>;
-};
 export {};

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.itemPlugin.js

@@ -2,19 +2,18 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { useTreeViewContext } from "../../TreeViewProvider/index.js";
 import { selectorItemOrderedChildrenIds } from "../useTreeViewItems/useTreeViewItems.selectors.js";
 import { selectorIsItemSelected } from "./useTreeViewSelection.selectors.js";
-function getCheckboxStatus({
+import { useSelector } from "../../hooks/useSelector.js";
+function selectorItemCheckboxStatus(state, {
   itemId,
-  store,
-  selectionPropagation,
-  selected
+  selectionPropagation
 }) {
-  if (selected) {
+  if (selectorIsItemSelected(state, itemId)) {
     return {
       indeterminate: false,
       checked: true
     };
   }
-  const children = selectorItemOrderedChildrenIds(store.value, itemId);
+  const children = selectorItemOrderedChildrenIds(state, itemId);
   if (children.length === 0) {
     return {
       indeterminate: false,
@@ -25,18 +24,18 @@ function getCheckboxStatus({
   let hasUnSelectedDescendant = false;
   const traverseDescendants = itemToTraverseId => {
     if (itemToTraverseId !== itemId) {
-      if (selectorIsItemSelected(store.value, itemToTraverseId)) {
+      if (selectorIsItemSelected(state, itemToTraverseId)) {
         hasSelectedDescendant = true;
       } else {
         hasUnSelectedDescendant = true;
       }
     }
-    selectorItemOrderedChildrenIds(store.value, itemToTraverseId).forEach(traverseDescendants);
+    selectorItemOrderedChildrenIds(state, itemToTraverseId).forEach(traverseDescendants);
   };
   traverseDescendants(itemId);
   return {
-    indeterminate: hasSelectedDescendant && hasUnSelectedDescendant || !hasUnSelectedDescendant && !selected,
-    checked: selectionPropagation.parents ? hasSelectedDescendant : selected
+    indeterminate: hasSelectedDescendant && hasUnSelectedDescendant || !hasUnSelectedDescendant,
+    checked: selectionPropagation.parents ? hasSelectedDescendant : false
   };
 }
 export const useTreeViewSelectionItemPlugin = ({
@@ -53,6 +52,10 @@ export const useTreeViewSelectionItemPlugin = ({
       selectionPropagation
     }
   } = useTreeViewContext();
+  const checkboxStatus = useSelector(store, selectorItemCheckboxStatus, {
+    itemId,
+    selectionPropagation
+  }, (a, b) => a.checked === b.checked && a.indeterminate === b.indeterminate);
   return {
     propsEnhancers: {
       checkbox: ({
@@ -70,12 +73,6 @@ export const useTreeViewSelectionItemPlugin = ({
           }
           interactions.handleCheckboxSelection(event);
         };
-        const checkboxStatus = getCheckboxStatus({
-          store,
-          itemId,
-          selectionPropagation,
-          selected: status.selected
-        });
         return _extends({
           visible: checkboxSelection,
           disabled: disableSelection || status.disabled,

package/internals/useTreeView/useTreeView.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { TreeViewAnyPluginSignature } from '../models';
 import { UseTreeViewBaseProps, UseTreeViewParameters, UseTreeViewReturnValue } from './useTreeView.types';
-export declare function useTreeViewApiInitialization<T>(inputApiRef: React.MutableRefObject<T | undefined> | undefined): T;
+export declare function useTreeViewApiInitialization<T>(inputApiRef: React.RefObject<T | undefined> | undefined): T;
 export declare const useTreeView: <TSignatures extends readonly TreeViewAnyPluginSignature[], TProps extends Partial<UseTreeViewBaseProps<TSignatures>>>({ plugins: inPlugins, rootRef, props, }: UseTreeViewParameters<TSignatures, TProps>) => UseTreeViewReturnValue<TSignatures>;

package/internals/useTreeView/useTreeView.types.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { EventHandlers } from '@mui/utils';
+import { EventHandlers } from '@mui/utils/types';
 import type { TreeViewContextValue } from '../TreeViewProvider';
 import { TreeViewAnyPluginSignature, ConvertSignaturesIntoPlugins, MergeSignaturesProperty, TreeViewPublicAPI, TreeViewExperimentalFeatures } from '../models';
 export interface UseTreeViewParameters<TSignatures extends readonly TreeViewAnyPluginSignature[], TProps extends Partial<UseTreeViewBaseProps<TSignatures>>> {
@@ -8,7 +8,7 @@ export interface UseTreeViewParameters<TSignatures extends readonly TreeViewAnyP
     props: TProps;
 }
 export interface UseTreeViewBaseProps<TSignatures extends readonly TreeViewAnyPluginSignature[]> {
-    apiRef: React.MutableRefObject<TreeViewPublicAPI<TSignatures> | undefined> | undefined;
+    apiRef: React.RefObject<TreeViewPublicAPI<TSignatures> | undefined> | undefined;
     slots: MergeSignaturesProperty<TSignatures, 'slots'>;
     slotProps: MergeSignaturesProperty<TSignatures, 'slotProps'>;
     experimentalFeatures: TreeViewExperimentalFeatures<TSignatures>;

package/internals/useTreeView/useTreeViewBuildContext.d.ts

@@ -8,5 +8,5 @@ export declare const useTreeViewBuildContext: <TSignatures extends readonly Tree
     instance: TreeViewInstance<TSignatures>;
     publicAPI: TreeViewPublicAPI<TSignatures>;
     store: TreeViewStore<TSignatures>;
-    rootRef: React.RefObject<HTMLUListElement>;
+    rootRef: React.RefObject<HTMLUListElement | null>;
 }) => TreeViewContextValue<TSignatures>;

package/modern/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { alpha } from '@mui/material/styles';
-import { shouldForwardProp } from '@mui/system';
+import { shouldForwardProp } from '@mui/system/createStyled';
 import { styled } from "../internals/zero-styled/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const TreeItemDragAndDropOverlayRoot = styled('div', {

package/modern/TreeItemProvider/TreeItemProvider.js

@@ -1,12 +1,12 @@
+'use client';
+
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTreeViewContext } from "../internals/TreeViewProvider/index.js";
 import { generateTreeItemIdAttribute } from "../internals/corePlugins/useTreeViewId/useTreeViewId.utils.js";
 import { useSelector } from "../internals/hooks/useSelector.js";
 import { selectorTreeViewId } from "../internals/corePlugins/useTreeViewId/useTreeViewId.selectors.js";
-
-/**
- * @ignore - internal component.
- */
+import { jsx as _jsx } from "react/jsx-runtime";
 function TreeItemProvider(props) {
   const {
     children,
@@ -24,14 +24,16 @@ function TreeItemProvider(props) {
     treeId,
     id
   });
-  return wrapItem({
-    children,
-    itemId,
-    instance,
-    idAttribute
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: wrapItem({
+      children,
+      itemId,
+      instance,
+      idAttribute
+    })
   });
 }
-TreeItemProvider.propTypes = {
+process.env.NODE_ENV !== "production" ? TreeItemProvider.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
@@ -39,5 +41,5 @@ TreeItemProvider.propTypes = {
   children: PropTypes.node,
   id: PropTypes.string,
   itemId: PropTypes.string.isRequired
-};
+} : void 0;
 export { TreeItemProvider };

package/modern/index.js

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

package/modern/internals/hooks/useInstanceEventHandler.js

@@ -14,7 +14,7 @@ export function createUseInstanceEventHandler(registryContainer) {
     }
     const [objectRetainedByReact] = React.useState(new ObjectToBeRetainedByReact());
     const subscription = React.useRef(null);
-    const handlerRef = React.useRef();
+    const handlerRef = React.useRef(undefined);
     handlerRef.current = handler;
     const cleanupTokenRef = React.useRef(null);
     if (!subscription.current && handlerRef.current) {

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/internals/plugins/useTreeViewSelection/useTreeViewSelection.itemPlugin.js

@@ -2,19 +2,18 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { useTreeViewContext } from "../../TreeViewProvider/index.js";
 import { selectorItemOrderedChildrenIds } from "../useTreeViewItems/useTreeViewItems.selectors.js";
 import { selectorIsItemSelected } from "./useTreeViewSelection.selectors.js";
-function getCheckboxStatus({
+import { useSelector } from "../../hooks/useSelector.js";
+function selectorItemCheckboxStatus(state, {
   itemId,
-  store,
-  selectionPropagation,
-  selected
+  selectionPropagation
 }) {
-  if (selected) {
+  if (selectorIsItemSelected(state, itemId)) {
     return {
       indeterminate: false,
       checked: true
     };
   }
-  const children = selectorItemOrderedChildrenIds(store.value, itemId);
+  const children = selectorItemOrderedChildrenIds(state, itemId);
   if (children.length === 0) {
     return {
       indeterminate: false,
@@ -25,18 +24,18 @@ function getCheckboxStatus({
   let hasUnSelectedDescendant = false;
   const traverseDescendants = itemToTraverseId => {
     if (itemToTraverseId !== itemId) {
-      if (selectorIsItemSelected(store.value, itemToTraverseId)) {
+      if (selectorIsItemSelected(state, itemToTraverseId)) {
         hasSelectedDescendant = true;
       } else {
         hasUnSelectedDescendant = true;
       }
     }
-    selectorItemOrderedChildrenIds(store.value, itemToTraverseId).forEach(traverseDescendants);
+    selectorItemOrderedChildrenIds(state, itemToTraverseId).forEach(traverseDescendants);
   };
   traverseDescendants(itemId);
   return {
-    indeterminate: hasSelectedDescendant && hasUnSelectedDescendant || !hasUnSelectedDescendant && !selected,
-    checked: selectionPropagation.parents ? hasSelectedDescendant : selected
+    indeterminate: hasSelectedDescendant && hasUnSelectedDescendant || !hasUnSelectedDescendant,
+    checked: selectionPropagation.parents ? hasSelectedDescendant : false
   };
 }
 export const useTreeViewSelectionItemPlugin = ({
@@ -53,6 +52,10 @@ export const useTreeViewSelectionItemPlugin = ({
       selectionPropagation
     }
   } = useTreeViewContext();
+  const checkboxStatus = useSelector(store, selectorItemCheckboxStatus, {
+    itemId,
+    selectionPropagation
+  }, (a, b) => a.checked === b.checked && a.indeterminate === b.indeterminate);
   return {
     propsEnhancers: {
       checkbox: ({
@@ -70,12 +73,6 @@ export const useTreeViewSelectionItemPlugin = ({
           }
           interactions.handleCheckboxSelection(event);
         };
-        const checkboxStatus = getCheckboxStatus({
-          store,
-          itemId,
-          selectionPropagation,
-          selected: status.selected
-        });
         return _extends({
           visible: checkboxSelection,
           disabled: disableSelection || status.disabled,

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/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.js

@@ -11,14 +11,14 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
-var _system = require("@mui/system");
+var _createStyled = require("@mui/system/createStyled");
 var _zeroStyled = require("../internals/zero-styled");
 var _jsxRuntime = require("react/jsx-runtime");
 const TreeItemDragAndDropOverlayRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiTreeItemDragAndDropOverlay',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-  shouldForwardProp: prop => (0, _system.shouldForwardProp)(prop) && prop !== 'action'
+  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'action'
 })(({
   theme
 }) => ({

package/node/TreeItemProvider/TreeItemProvider.js

@@ -1,18 +1,19 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TreeItemProvider = TreeItemProvider;
+var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _TreeViewProvider = require("../internals/TreeViewProvider");
 var _useTreeViewId = require("../internals/corePlugins/useTreeViewId/useTreeViewId.utils");
 var _useSelector = require("../internals/hooks/useSelector");
 var _useTreeViewId2 = require("../internals/corePlugins/useTreeViewId/useTreeViewId.selectors");
-/**
- * @ignore - internal component.
- */
+var _jsxRuntime = require("react/jsx-runtime");
 function TreeItemProvider(props) {
   const {
     children,
@@ -30,14 +31,16 @@ function TreeItemProvider(props) {
     treeId,
     id
   });
-  return wrapItem({
-    children,
-    itemId,
-    instance,
-    idAttribute
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: wrapItem({
+      children,
+      itemId,
+      instance,
+      idAttribute
+    })
   });
 }
-TreeItemProvider.propTypes = {
+process.env.NODE_ENV !== "production" ? TreeItemProvider.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
@@ -45,4 +48,4 @@ TreeItemProvider.propTypes = {
   children: _propTypes.default.node,
   id: _propTypes.default.string,
   itemId: _propTypes.default.string.isRequired
-};
+} : void 0;

package/node/index.js

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

package/node/internals/hooks/useInstanceEventHandler.js

@@ -22,7 +22,7 @@ function createUseInstanceEventHandler(registryContainer) {
     }
     const [objectRetainedByReact] = React.useState(new ObjectToBeRetainedByReact());
     const subscription = React.useRef(null);
-    const handlerRef = React.useRef();
+    const handlerRef = React.useRef(undefined);
     handlerRef.current = handler;
     const cleanupTokenRef = React.useRef(null);
     if (!subscription.current && handlerRef.current) {

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);