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

package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { findOrderInTremauxTree, getAllNavigableItems, getFirstNavigableItem, getLastNavigableItem, getNonDisabledItemsInRange } from "../../utils/tree.js";
 import { convertSelectedItemsToArray, propagateSelection, getAddedAndRemovedItems, getLookupFromArray, createSelectedItemsMap } from "./useTreeViewSelection.utils.js";
-import { selectorIsItemSelected } from "./useTreeViewSelection.selectors.js";
+import { selectorIsItemSelected, selectorIsMultiSelectEnabled, selectorIsSelectionEnabled } from "./useTreeViewSelection.selectors.js";
 import { useTreeViewSelectionItemPlugin } from "./useTreeViewSelection.itemPlugin.js";
 export const useTreeViewSelection = ({
   store,
@@ -12,16 +12,10 @@ export const useTreeViewSelection = ({
 }) => {
   const lastSelectedItem = React.useRef(null);
   const lastSelectedRange = React.useRef({});
-  useEnhancedEffect(() => {
-    store.update(prevState => _extends({}, prevState, {
-      selection: {
-        selectedItemsMap: createSelectedItemsMap(models.selectedItems.value)
-      }
-    }));
-  }, [store, models.selectedItems.value]);
   const setSelectedItems = (event, newModel, additionalItemsToPropagate) => {
     let cleanModel;
-    if (params.multiSelect && (params.selectionPropagation.descendants || params.selectionPropagation.parents)) {
+    const isMultiSelectEnabled = selectorIsMultiSelectEnabled(store.value);
+    if (isMultiSelectEnabled && (params.selectionPropagation.descendants || params.selectionPropagation.parents)) {
       cleanModel = propagateSelection({
         store,
         selectionPropagation: params.selectionPropagation,
@@ -33,7 +27,7 @@ export const useTreeViewSelection = ({
       cleanModel = newModel;
     }
     if (params.onItemSelectionToggle) {
-      if (params.multiSelect) {
+      if (isMultiSelectEnabled) {
         const changes = getAddedAndRemovedItems({
           store,
           newModel: cleanModel,
@@ -67,10 +61,11 @@ export const useTreeViewSelection = ({
     keepExistingSelection = false,
     shouldBeSelected
   }) => {
-    if (params.disableSelection) {
+    if (!selectorIsSelectionEnabled(store.value)) {
       return;
     }
     let newSelected;
+    const isMultiSelectEnabled = selectorIsMultiSelectEnabled(store.value);
     if (keepExistingSelection) {
       const cleanSelectedItems = convertSelectedItemsToArray(models.selectedItems.value);
       const isSelectedBefore = selectorIsItemSelected(store.value, itemId);
@@ -84,9 +79,9 @@ export const useTreeViewSelection = ({
     } else {
       // eslint-disable-next-line no-lonely-if
       if (shouldBeSelected === false || shouldBeSelected == null && selectorIsItemSelected(store.value, itemId)) {
-        newSelected = params.multiSelect ? [] : null;
+        newSelected = isMultiSelectEnabled ? [] : null;
       } else {
-        newSelected = params.multiSelect ? [itemId] : itemId;
+        newSelected = isMultiSelectEnabled ? [itemId] : itemId;
       }
     }
     setSelectedItems(event, newSelected,
@@ -97,7 +92,8 @@ export const useTreeViewSelection = ({
     lastSelectedRange.current = {};
   };
   const selectRange = (event, [start, end]) => {
-    if (params.disableSelection || !params.multiSelect) {
+    const isMultiSelectEnabled = selectorIsMultiSelectEnabled(store.value);
+    if (!isMultiSelectEnabled) {
       return;
     }
     let newSelectedItems = convertSelectedItemsToArray(models.selectedItems.value).slice();
@@ -129,7 +125,8 @@ export const useTreeViewSelection = ({
     selectRange(event, [itemId, getLastNavigableItem(store.value)]);
   };
   const selectAllNavigableItems = event => {
-    if (params.disableSelection || !params.multiSelect) {
+    const isMultiSelectEnabled = selectorIsMultiSelectEnabled(store.value);
+    if (!isMultiSelectEnabled) {
       return;
     }
     const navigableItems = getAllNavigableItems(store.value);
@@ -137,7 +134,8 @@ export const useTreeViewSelection = ({
     lastSelectedRange.current = getLookupFromArray(navigableItems);
   };
   const selectItemFromArrowNavigation = (event, currentItem, nextItem) => {
-    if (params.disableSelection || !params.multiSelect) {
+    const isMultiSelectEnabled = selectorIsMultiSelectEnabled(store.value);
+    if (!isMultiSelectEnabled) {
       return;
     }
     let newSelectedItems = convertSelectedItemsToArray(models.selectedItems.value).slice();
@@ -161,17 +159,22 @@ export const useTreeViewSelection = ({
     }
     setSelectedItems(event, newSelectedItems);
   };
-  const pluginContextValue = React.useMemo(() => ({
-    selection: {
-      multiSelect: params.multiSelect,
-      checkboxSelection: params.checkboxSelection,
-      disableSelection: params.disableSelection,
-      selectionPropagation: {
-        descendants: params.selectionPropagation.descendants,
-        parents: params.selectionPropagation.parents
+  useEnhancedEffect(() => {
+    store.update(prevState => _extends({}, prevState, {
+      selection: {
+        rawSelectedItems: models.selectedItems.value,
+        // Only re-compute the map when the model changes.
+        selectedItemsMap: prevState.selection.rawSelectedItems === models.selectedItems.value ? prevState.selection.selectedItemsMap : createSelectedItemsMap(models.selectedItems.value),
+        isEnabled: !params.disableSelection,
+        isMultiSelectEnabled: params.multiSelect,
+        isCheckboxSelectionEnabled: params.checkboxSelection,
+        selectionPropagation: {
+          descendants: params.selectionPropagation.descendants,
+          parents: params.selectionPropagation.parents
+        }
       }
-    }
-  }), [params.multiSelect, params.checkboxSelection, params.disableSelection, params.selectionPropagation.descendants, params.selectionPropagation.parents]);
+    }));
+  }, [store, models.selectedItems.value, params.multiSelect, params.checkboxSelection, params.disableSelection, params.selectionPropagation.descendants, params.selectionPropagation.parents]);
   return {
     getRootProps: () => ({
       'aria-multiselectable': params.multiSelect
@@ -186,8 +189,7 @@ export const useTreeViewSelection = ({
       selectRangeFromStartToItem,
       selectRangeFromItemToEnd,
       selectItemFromArrowNavigation
-    },
-    contextValue: pluginContextValue
+    }
   };
 };
 useTreeViewSelection.itemPlugin = useTreeViewSelectionItemPlugin;
@@ -207,16 +209,19 @@ useTreeViewSelection.getDefaultizedParams = ({
   defaultSelectedItems: params.defaultSelectedItems ?? (params.multiSelect ? DEFAULT_SELECTED_ITEMS : null),
   selectionPropagation: params.selectionPropagation ?? EMPTY_SELECTION_PROPAGATION
 });
-useTreeViewSelection.getInitialState = params => ({
-  selection: {
-    selectedItemsMap: createSelectedItemsMap(params.selectedItems === undefined ? params.defaultSelectedItems : params.selectedItems)
-  }
-});
-useTreeViewSelection.getInitialState = params => ({
-  selection: {
-    selectedItemsMap: createSelectedItemsMap(params.selectedItems === undefined ? params.defaultSelectedItems : params.selectedItems)
-  }
-});
+useTreeViewSelection.getInitialState = params => {
+  const rawSelectedItems = params.selectedItems === undefined ? params.defaultSelectedItems : params.selectedItems;
+  return {
+    selection: {
+      rawSelectedItems,
+      selectedItemsMap: createSelectedItemsMap(rawSelectedItems),
+      isEnabled: !params.disableSelection,
+      isMultiSelectEnabled: params.multiSelect,
+      isCheckboxSelectionEnabled: params.checkboxSelection,
+      selectionPropagation: params.selectionPropagation
+    }
+  };
+};
 useTreeViewSelection.params = {
   disableSelection: true,
   multiSelect: true,

package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors.d.ts

@@ -11,10 +11,20 @@ export declare const selectorIsItemSelected: ((state: any, itemId: string) => bo
   resetResultsCount: () => void;
 } & {
   resultFunc: (resultFuncArgs_0: {
+    rawSelectedItems: string | string[] | null;
     selectedItemsMap: Map<string, true>;
+    isEnabled: boolean;
+    isMultiSelectEnabled: boolean;
+    isCheckboxSelectionEnabled: boolean;
+    selectionPropagation: import("../../..").TreeViewSelectionPropagation;
   }, resultFuncArgs_1: string) => boolean;
   memoizedResultFunc: ((resultFuncArgs_0: {
+    rawSelectedItems: string | string[] | null;
     selectedItemsMap: Map<string, true>;
+    isEnabled: boolean;
+    isMultiSelectEnabled: boolean;
+    isCheckboxSelectionEnabled: boolean;
+    selectionPropagation: import("../../..").TreeViewSelectionPropagation;
   }, resultFuncArgs_1: string) => boolean) & {
     clearCache: () => void;
     resultsCount: () => number;
@@ -29,4 +39,325 @@ export declare const selectorIsItemSelected: ((state: any, itemId: string) => bo
 } & {
   argsMemoize: typeof import("reselect").weakMapMemoize;
   memoize: typeof import("reselect").weakMapMemoize;
+};
+/**
+ * Check if multi selection is enabled.
+ * @param {TreeViewState<[UseTreeViewSelectionSignature]>} state The state of the tree view.
+ * @returns {boolean} `true` if multi selection is enabled, `false` otherwise.
+ */
+export declare const selectorIsMultiSelectEnabled: ((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewSelection.types").UseTreeViewSelectionState & Partial<{}> & {
+  cacheKey: import("../../models").TreeViewStateCacheKey;
+}) => boolean) & {
+  clearCache: () => void;
+  resultsCount: () => number;
+  resetResultsCount: () => void;
+} & {
+  resultFunc: (resultFuncArgs_0: {
+    rawSelectedItems: string | string[] | null;
+    selectedItemsMap: Map<string, true>;
+    isEnabled: boolean;
+    isMultiSelectEnabled: boolean;
+    isCheckboxSelectionEnabled: boolean;
+    selectionPropagation: import("../../..").TreeViewSelectionPropagation;
+  }) => boolean;
+  memoizedResultFunc: ((resultFuncArgs_0: {
+    rawSelectedItems: string | string[] | null;
+    selectedItemsMap: Map<string, true>;
+    isEnabled: boolean;
+    isMultiSelectEnabled: boolean;
+    isCheckboxSelectionEnabled: boolean;
+    selectionPropagation: import("../../..").TreeViewSelectionPropagation;
+  }) => boolean) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  };
+  lastResult: () => boolean;
+  dependencies: [TreeViewRootSelector<UseTreeViewSelectionSignature>];
+  recomputations: () => number;
+  resetRecomputations: () => void;
+  dependencyRecomputations: () => number;
+  resetDependencyRecomputations: () => void;
+} & {
+  argsMemoize: typeof import("reselect").weakMapMemoize;
+  memoize: typeof import("reselect").weakMapMemoize;
+};
+/**
+ * Check if selection is enabled.
+ * @param {TreeViewState<[UseTreeViewSelectionSignature]>} state The state of the tree view.
+ * @returns {boolean} `true` if selection is enabled, `false` otherwise.
+ */
+export declare const selectorIsSelectionEnabled: ((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewSelection.types").UseTreeViewSelectionState & Partial<{}> & {
+  cacheKey: import("../../models").TreeViewStateCacheKey;
+}) => boolean) & {
+  clearCache: () => void;
+  resultsCount: () => number;
+  resetResultsCount: () => void;
+} & {
+  resultFunc: (resultFuncArgs_0: {
+    rawSelectedItems: string | string[] | null;
+    selectedItemsMap: Map<string, true>;
+    isEnabled: boolean;
+    isMultiSelectEnabled: boolean;
+    isCheckboxSelectionEnabled: boolean;
+    selectionPropagation: import("../../..").TreeViewSelectionPropagation;
+  }) => boolean;
+  memoizedResultFunc: ((resultFuncArgs_0: {
+    rawSelectedItems: string | string[] | null;
+    selectedItemsMap: Map<string, true>;
+    isEnabled: boolean;
+    isMultiSelectEnabled: boolean;
+    isCheckboxSelectionEnabled: boolean;
+    selectionPropagation: import("../../..").TreeViewSelectionPropagation;
+  }) => boolean) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  };
+  lastResult: () => boolean;
+  dependencies: [TreeViewRootSelector<UseTreeViewSelectionSignature>];
+  recomputations: () => number;
+  resetRecomputations: () => void;
+  dependencyRecomputations: () => number;
+  resetDependencyRecomputations: () => void;
+} & {
+  argsMemoize: typeof import("reselect").weakMapMemoize;
+  memoize: typeof import("reselect").weakMapMemoize;
+};
+/**
+ * Check if checkbox selection is enabled.
+ * @param {TreeViewState<[UseTreeViewSelectionSignature]>} state The state of the tree view.
+ * @returns {boolean} `true` if checkbox selection is enabled, `false` otherwise.
+ */
+export declare const selectorIsCheckboxSelectionEnabled: ((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewSelection.types").UseTreeViewSelectionState & Partial<{}> & {
+  cacheKey: import("../../models").TreeViewStateCacheKey;
+}) => boolean) & {
+  clearCache: () => void;
+  resultsCount: () => number;
+  resetResultsCount: () => void;
+} & {
+  resultFunc: (resultFuncArgs_0: {
+    rawSelectedItems: string | string[] | null;
+    selectedItemsMap: Map<string, true>;
+    isEnabled: boolean;
+    isMultiSelectEnabled: boolean;
+    isCheckboxSelectionEnabled: boolean;
+    selectionPropagation: import("../../..").TreeViewSelectionPropagation;
+  }) => boolean;
+  memoizedResultFunc: ((resultFuncArgs_0: {
+    rawSelectedItems: string | string[] | null;
+    selectedItemsMap: Map<string, true>;
+    isEnabled: boolean;
+    isMultiSelectEnabled: boolean;
+    isCheckboxSelectionEnabled: boolean;
+    selectionPropagation: import("../../..").TreeViewSelectionPropagation;
+  }) => boolean) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  };
+  lastResult: () => boolean;
+  dependencies: [TreeViewRootSelector<UseTreeViewSelectionSignature>];
+  recomputations: () => number;
+  resetRecomputations: () => void;
+  dependencyRecomputations: () => number;
+  resetDependencyRecomputations: () => void;
+} & {
+  argsMemoize: typeof import("reselect").weakMapMemoize;
+  memoize: typeof import("reselect").weakMapMemoize;
+};
+/**
+ * Check if selection is enabled for an item (if selection is enabled and if the item is not disabled).
+ * @param {TreeViewState<[UseTreeViewSelectionSignature]>} state The state of the tree view.
+ * @param {string} itemId The id of the item to check.
+ * @returns {boolean} `true` if selection is enabled for the item, `false` otherwise.
+ */
+export declare const selectorIsItemSelectionEnabled: ((state: any, itemId: string) => boolean) & {
+  clearCache: () => void;
+  resultsCount: () => number;
+  resetResultsCount: () => void;
+} & {
+  resultFunc: (resultFuncArgs_0: boolean, resultFuncArgs_1: boolean) => boolean;
+  memoizedResultFunc: ((resultFuncArgs_0: boolean, resultFuncArgs_1: boolean) => boolean) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  };
+  lastResult: () => boolean;
+  dependencies: [((state: any, itemId: string) => boolean) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  } & {
+    resultFunc: (resultFuncArgs_0: {
+      [itemId: string]: import("../..").TreeViewItemMeta;
+    }, resultFuncArgs_1: string) => boolean;
+    memoizedResultFunc: ((resultFuncArgs_0: {
+      [itemId: string]: import("../..").TreeViewItemMeta;
+    }, resultFuncArgs_1: string) => boolean) & {
+      clearCache: () => void;
+      resultsCount: () => number;
+      resetResultsCount: () => void;
+    };
+    lastResult: () => boolean;
+    dependencies: [((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("../useTreeViewItems").UseTreeViewItemsState<import("../../..").TreeViewDefaultItemModelProperties> & Partial<{}> & {
+      cacheKey: import("../../models").TreeViewStateCacheKey;
+    }) => {
+      [itemId: string]: import("../..").TreeViewItemMeta;
+    }) & {
+      clearCache: () => void;
+      resultsCount: () => number;
+      resetResultsCount: () => void;
+    } & {
+      resultFunc: (resultFuncArgs_0: {
+        disabledItemsFocusable: boolean;
+        itemModelLookup: {
+          [itemId: string]: import("../../..").TreeViewBaseItem<import("../../..").TreeViewDefaultItemModelProperties>;
+        };
+        itemMetaLookup: {
+          [itemId: string]: import("../..").TreeViewItemMeta;
+        };
+        itemOrderedChildrenIdsLookup: {
+          [parentItemId: string]: string[];
+        };
+        itemChildrenIndexesLookup: {
+          [parentItemId: string]: {
+            [itemId: string]: number;
+          };
+        };
+        loading: boolean;
+        error: Error | null;
+      }) => {
+        [itemId: string]: import("../..").TreeViewItemMeta;
+      };
+      memoizedResultFunc: ((resultFuncArgs_0: {
+        disabledItemsFocusable: boolean;
+        itemModelLookup: {
+          [itemId: string]: import("../../..").TreeViewBaseItem<import("../../..").TreeViewDefaultItemModelProperties>;
+        };
+        itemMetaLookup: {
+          [itemId: string]: import("../..").TreeViewItemMeta;
+        };
+        itemOrderedChildrenIdsLookup: {
+          [parentItemId: string]: string[];
+        };
+        itemChildrenIndexesLookup: {
+          [parentItemId: string]: {
+            [itemId: string]: number;
+          };
+        };
+        loading: boolean;
+        error: Error | null;
+      }) => {
+        [itemId: string]: import("../..").TreeViewItemMeta;
+      }) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+      };
+      lastResult: () => {
+        [itemId: string]: import("../..").TreeViewItemMeta;
+      };
+      dependencies: [TreeViewRootSelector<import("../useTreeViewItems").UseTreeViewItemsSignature>];
+      recomputations: () => number;
+      resetRecomputations: () => void;
+      dependencyRecomputations: () => number;
+      resetDependencyRecomputations: () => void;
+    } & {
+      argsMemoize: typeof import("reselect").weakMapMemoize;
+      memoize: typeof import("reselect").weakMapMemoize;
+    }, (_: any, itemId: string) => string];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+  } & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+  }, ((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewSelection.types").UseTreeViewSelectionState & Partial<{}> & {
+    cacheKey: import("../../models").TreeViewStateCacheKey;
+  }) => boolean) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  } & {
+    resultFunc: (resultFuncArgs_0: {
+      rawSelectedItems: string | string[] | null;
+      selectedItemsMap: Map<string, true>;
+      isEnabled: boolean;
+      isMultiSelectEnabled: boolean;
+      isCheckboxSelectionEnabled: boolean;
+      selectionPropagation: import("../../..").TreeViewSelectionPropagation;
+    }) => boolean;
+    memoizedResultFunc: ((resultFuncArgs_0: {
+      rawSelectedItems: string | string[] | null;
+      selectedItemsMap: Map<string, true>;
+      isEnabled: boolean;
+      isMultiSelectEnabled: boolean;
+      isCheckboxSelectionEnabled: boolean;
+      selectionPropagation: import("../../..").TreeViewSelectionPropagation;
+    }) => boolean) & {
+      clearCache: () => void;
+      resultsCount: () => number;
+      resetResultsCount: () => void;
+    };
+    lastResult: () => boolean;
+    dependencies: [TreeViewRootSelector<UseTreeViewSelectionSignature>];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+  } & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+  }];
+  recomputations: () => number;
+  resetRecomputations: () => void;
+  dependencyRecomputations: () => number;
+  resetDependencyRecomputations: () => void;
+} & {
+  argsMemoize: typeof import("reselect").weakMapMemoize;
+  memoize: typeof import("reselect").weakMapMemoize;
+};
+/**
+ * Get the selection propagation rules.
+ * @param {TreeViewState<[UseTreeViewSelectionSignature]>} state The state of the tree view.
+ * @returns {TreeViewSelectionPropagation} The selection propagation rules.
+ */
+export declare const selectorSelectionPropagationRules: ((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewSelection.types").UseTreeViewSelectionState & Partial<{}> & {
+  cacheKey: import("../../models").TreeViewStateCacheKey;
+}) => import("../../..").TreeViewSelectionPropagation) & {
+  clearCache: () => void;
+  resultsCount: () => number;
+  resetResultsCount: () => void;
+} & {
+  resultFunc: (resultFuncArgs_0: {
+    rawSelectedItems: string | string[] | null;
+    selectedItemsMap: Map<string, true>;
+    isEnabled: boolean;
+    isMultiSelectEnabled: boolean;
+    isCheckboxSelectionEnabled: boolean;
+    selectionPropagation: import("../../..").TreeViewSelectionPropagation;
+  }) => import("../../..").TreeViewSelectionPropagation;
+  memoizedResultFunc: ((resultFuncArgs_0: {
+    rawSelectedItems: string | string[] | null;
+    selectedItemsMap: Map<string, true>;
+    isEnabled: boolean;
+    isMultiSelectEnabled: boolean;
+    isCheckboxSelectionEnabled: boolean;
+    selectionPropagation: import("../../..").TreeViewSelectionPropagation;
+  }) => import("../../..").TreeViewSelectionPropagation) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  };
+  lastResult: () => import("../../..").TreeViewSelectionPropagation;
+  dependencies: [TreeViewRootSelector<UseTreeViewSelectionSignature>];
+  recomputations: () => number;
+  resetRecomputations: () => void;
+  dependencyRecomputations: () => number;
+  resetDependencyRecomputations: () => void;
+} & {
+  argsMemoize: typeof import("reselect").weakMapMemoize;
+  memoize: typeof import("reselect").weakMapMemoize;
 };

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

@@ -1,4 +1,5 @@
 import { createSelector } from "../../utils/selectors.js";
+import { selectorIsItemDisabled } from "../useTreeViewItems/useTreeViewItems.selectors.js";
 const selectorTreeViewSelectionState = state => state.selection;
 
 /**
@@ -6,4 +7,40 @@ const selectorTreeViewSelectionState = state => state.selection;
  * @param {TreeViewState<[UseTreeViewSelectionSignature]>} state The state of the tree view.
  * @returns {boolean} `true` if the item is selected, `false` otherwise.
  */
-export const selectorIsItemSelected = createSelector([selectorTreeViewSelectionState, (_, itemId) => itemId], (selectionState, itemId) => selectionState.selectedItemsMap.has(itemId));
+export const selectorIsItemSelected = createSelector([selectorTreeViewSelectionState, (_, itemId) => itemId], (selectionState, itemId) => selectionState.selectedItemsMap.has(itemId));
+
+/**
+ * Check if multi selection is enabled.
+ * @param {TreeViewState<[UseTreeViewSelectionSignature]>} state The state of the tree view.
+ * @returns {boolean} `true` if multi selection is enabled, `false` otherwise.
+ */
+export const selectorIsMultiSelectEnabled = createSelector([selectorTreeViewSelectionState], selectionState => selectionState.isEnabled && selectionState.isMultiSelectEnabled);
+
+/**
+ * Check if selection is enabled.
+ * @param {TreeViewState<[UseTreeViewSelectionSignature]>} state The state of the tree view.
+ * @returns {boolean} `true` if selection is enabled, `false` otherwise.
+ */
+export const selectorIsSelectionEnabled = createSelector([selectorTreeViewSelectionState], selectionState => selectionState.isEnabled);
+
+/**
+ * Check if checkbox selection is enabled.
+ * @param {TreeViewState<[UseTreeViewSelectionSignature]>} state The state of the tree view.
+ * @returns {boolean} `true` if checkbox selection is enabled, `false` otherwise.
+ */
+export const selectorIsCheckboxSelectionEnabled = createSelector([selectorTreeViewSelectionState], selectionState => selectionState.isCheckboxSelectionEnabled);
+
+/**
+ * Check if selection is enabled for an item (if selection is enabled and if the item is not disabled).
+ * @param {TreeViewState<[UseTreeViewSelectionSignature]>} state The state of the tree view.
+ * @param {string} itemId The id of the item to check.
+ * @returns {boolean} `true` if selection is enabled for the item, `false` otherwise.
+ */
+export const selectorIsItemSelectionEnabled = createSelector([selectorIsItemDisabled, selectorIsSelectionEnabled], (isItemDisabled, isSelectionEnabled) => isSelectionEnabled && !isItemDisabled);
+
+/**
+ * Get the selection propagation rules.
+ * @param {TreeViewState<[UseTreeViewSelectionSignature]>} state The state of the tree view.
+ * @returns {TreeViewSelectionPropagation} The selection propagation rules.
+ */
+export const selectorSelectionPropagationRules = createSelector([selectorTreeViewSelectionState], selectionState => selectionState.selectionPropagation);

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

@@ -115,18 +115,19 @@ export interface UseTreeViewSelectionParameters<Multiple extends boolean | undef
 export type UseTreeViewSelectionDefaultizedParameters<Multiple extends boolean> = DefaultizedProps<UseTreeViewSelectionParameters<Multiple>, 'disableSelection' | 'defaultSelectedItems' | 'multiSelect' | 'checkboxSelection' | 'selectionPropagation'>;
 export interface UseTreeViewSelectionState {
   selection: {
+    rawSelectedItems: TreeViewSelectionValue<boolean>;
     selectedItemsMap: Map<string, true>;
+    isEnabled: boolean;
+    isMultiSelectEnabled: boolean;
+    isCheckboxSelectionEnabled: boolean;
+    selectionPropagation: TreeViewSelectionPropagation;
   };
 }
-interface UseTreeViewSelectionContextValue {
-  selection: Pick<UseTreeViewSelectionDefaultizedParameters<boolean>, 'multiSelect' | 'checkboxSelection' | 'disableSelection' | 'selectionPropagation'>;
-}
 export type UseTreeViewSelectionSignature = TreeViewPluginSignature<{
   params: UseTreeViewSelectionParameters<any>;
   defaultizedParams: UseTreeViewSelectionDefaultizedParameters<any>;
   instance: UseTreeViewSelectionInstance;
   publicAPI: UseTreeViewSelectionPublicAPI;
-  contextValue: UseTreeViewSelectionContextValue;
   modelNames: 'selectedItems';
   state: UseTreeViewSelectionState;
   dependencies: [UseTreeViewItemsSignature, UseTreeViewExpansionSignature, UseTreeViewItemsSignature];

package/modern/internals/utils/selectors.d.ts

@@ -3,7 +3,7 @@ import { TreeViewAnyPluginSignature, TreeViewState } from "../models/index.js";
 /**
  * Type of a selector that take the whole tree view state as input and returns a value based on a required plugin.
  */
-export type TreeViewRootSelector<TSignature extends TreeViewAnyPluginSignature> = <TSignatures extends [TSignature]>(state: TreeViewState<TSignatures>) => TSignature['state'][keyof TSignature['state']];
+export type TreeViewRootSelector<TSignature extends TreeViewAnyPluginSignature, IsOptional extends boolean = false> = <TSignatures extends [TSignature]>(state: TreeViewState<TSignatures>) => IsOptional extends true ? TSignature['state'][keyof TSignature['state']] | undefined : TSignature['state'][keyof TSignature['state']];
 /**
  * Type of a selector that take the whole tree view state as input and returns a value based on an optional plugin.
  */

package/modern/useTreeItem/useTreeItem.js

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