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

package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -66,7 +66,7 @@ const useTreeViewKeyboardNavigation = ({
     }
     return matchingItemId;
   };
-  const canToggleItemSelection = itemId => !params.disableSelection && !(0, _useTreeViewItems.selectorIsItemDisabled)(store.value, itemId);
+  const canToggleItemSelection = itemId => (0, _useTreeViewSelection.selectorIsSelectionEnabled)(store.value) && !(0, _useTreeViewItems.selectorIsItemDisabled)(store.value, itemId);
   const canToggleItemExpansion = itemId => {
     return !(0, _useTreeViewItems.selectorIsItemDisabled)(store.value, itemId) && (0, _useTreeViewExpansion.selectorIsItemExpandable)(store.value, itemId);
   };
@@ -81,6 +81,7 @@ const useTreeViewKeyboardNavigation = ({
     }
     const ctrlPressed = event.ctrlKey || event.metaKey;
     const key = event.key;
+    const isMultiSelectEnabled = (0, _useTreeViewSelection.selectorIsMultiSelectEnabled)(store.value);
 
     // eslint-disable-next-line default-case
     switch (true) {
@@ -88,14 +89,14 @@ const useTreeViewKeyboardNavigation = ({
       case key === ' ' && canToggleItemSelection(itemId):
         {
           event.preventDefault();
-          if (params.multiSelect && event.shiftKey) {
+          if (isMultiSelectEnabled && event.shiftKey) {
             instance.expandSelectionRange(event, itemId);
           } else {
             instance.setItemSelection({
               event,
               itemId,
-              keepExistingSelection: params.multiSelect,
-              shouldBeSelected: params.multiSelect ? undefined : true
+              keepExistingSelection: isMultiSelectEnabled,
+              shouldBeSelected: undefined
             });
           }
           break;
@@ -105,10 +106,7 @@ const useTreeViewKeyboardNavigation = ({
       // If the focused item has no children, we select it.
       case key === 'Enter':
         {
-          if ((0, _plugins.hasPlugin)(instance, _useTreeViewLabel.useTreeViewLabel) && (0, _useTreeViewLabel2.selectorIsItemEditable)(store.value, {
-            itemId,
-            isItemEditable: params.isItemEditable
-          }) && !(0, _useTreeViewLabel2.selectorIsItemBeingEdited)(store.value, itemId)) {
+          if ((0, _plugins.hasPlugin)(instance, _useTreeViewLabel.useTreeViewLabel) && (0, _useTreeViewLabel2.selectorIsItemEditable)(store.value, itemId) && !(0, _useTreeViewLabel2.selectorIsItemBeingEdited)(store.value, itemId)) {
             instance.setEditedItemId(itemId);
           } else if (canToggleItemExpansion(itemId)) {
             instance.setItemExpansion({
@@ -117,7 +115,7 @@ const useTreeViewKeyboardNavigation = ({
             });
             event.preventDefault();
           } else if (canToggleItemSelection(itemId)) {
-            if (params.multiSelect) {
+            if (isMultiSelectEnabled) {
               event.preventDefault();
               instance.setItemSelection({
                 event,
@@ -145,7 +143,7 @@ const useTreeViewKeyboardNavigation = ({
 
             // Multi select behavior when pressing Shift + ArrowDown
             // Toggles the selection state of the next item
-            if (params.multiSelect && event.shiftKey && canToggleItemSelection(nextItem)) {
+            if (isMultiSelectEnabled && event.shiftKey && canToggleItemSelection(nextItem)) {
               instance.selectItemFromArrowNavigation(event, itemId, nextItem);
             }
           }
@@ -162,7 +160,7 @@ const useTreeViewKeyboardNavigation = ({
 
             // Multi select behavior when pressing Shift + ArrowUp
             // Toggles the selection state of the previous item
-            if (params.multiSelect && event.shiftKey && canToggleItemSelection(previousItem)) {
+            if (isMultiSelectEnabled && event.shiftKey && canToggleItemSelection(previousItem)) {
               instance.selectItemFromArrowNavigation(event, itemId, previousItem);
             }
           }
@@ -220,7 +218,7 @@ const useTreeViewKeyboardNavigation = ({
         {
           // Multi select behavior when pressing Ctrl + Shift + Home
           // Selects the focused item and all items up to the first item.
-          if (canToggleItemSelection(itemId) && params.multiSelect && ctrlPressed && event.shiftKey) {
+          if (canToggleItemSelection(itemId) && isMultiSelectEnabled && ctrlPressed && event.shiftKey) {
             instance.selectRangeFromStartToItem(event, itemId);
           } else {
             instance.focusItem(event, (0, _tree.getFirstNavigableItem)(store.value));
@@ -234,7 +232,7 @@ const useTreeViewKeyboardNavigation = ({
         {
           // Multi select behavior when pressing Ctrl + Shirt + End
           // Selects the focused item and all the items down to the last item.
-          if (canToggleItemSelection(itemId) && params.multiSelect && ctrlPressed && event.shiftKey) {
+          if (canToggleItemSelection(itemId) && isMultiSelectEnabled && ctrlPressed && event.shiftKey) {
             instance.selectRangeFromItemToEnd(event, itemId);
           } else {
             instance.focusItem(event, (0, _tree.getLastNavigableItem)(store.value));
@@ -253,7 +251,7 @@ const useTreeViewKeyboardNavigation = ({
 
       // Multi select behavior when pressing Ctrl + a
       // Selects all the items
-      case String.fromCharCode(event.keyCode) === 'A' && ctrlPressed && params.multiSelect && !params.disableSelection:
+      case String.fromCharCode(event.keyCode) === 'A' && ctrlPressed && isMultiSelectEnabled && (0, _useTreeViewSelection.selectorIsSelectionEnabled)(store.value):
         {
           instance.selectAllNavigableItems(event);
           event.preventDefault();

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

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

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

@@ -13,33 +13,30 @@ const useTreeViewLabelItemPlugin = ({
   props
 }) => {
   const {
-    store,
-    label: {
-      isItemEditable
-    }
+    store
   } = (0, _TreeViewProvider.useTreeViewContext)();
   const {
     label,
     itemId
   } = props;
   const [labelInputValue, setLabelInputValue] = React.useState(label);
-  const editable = (0, _useSelector.useSelector)(store, _useTreeViewLabel.selectorIsItemEditable, {
-    itemId,
-    isItemEditable
-  });
-  const editing = (0, _useSelector.useSelector)(store, _useTreeViewLabel.selectorIsItemBeingEdited, itemId);
+  const isItemEditable = (0, _useSelector.useSelector)(store, _useTreeViewLabel.selectorIsItemEditable, itemId);
+  const isItemBeingEdited = (0, _useSelector.useSelector)(store, _useTreeViewLabel.selectorIsItemBeingEdited, itemId);
   React.useEffect(() => {
-    if (!editing) {
+    if (!isItemBeingEdited) {
       setLabelInputValue(label);
     }
-  }, [editing, label]);
+  }, [isItemBeingEdited, label]);
   return {
     propsEnhancers: {
+      label: () => ({
+        editable: isItemEditable
+      }),
       labelInput: ({
         externalEventHandlers,
         interactions
       }) => {
-        if (!editable) {
+        if (!isItemEditable) {
           return {};
         }
         const handleKeydown = event => {

package/internals/plugins/useTreeViewLabel/useTreeViewLabel.js

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

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

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

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

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

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

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

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

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

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

@@ -13,9 +13,8 @@ type DataSource<R extends {}> = {
    * @template R
    * @param {R} item The item to check.
    * @returns {number} The number of children.
-   * @default (item) => number
    */
-  getChildrenCount?: (item: R) => number;
+  getChildrenCount: (item: R) => number;
   /**
    * Method used for fetching the items.
    * Only relevant for lazy-loaded tree views.
@@ -24,7 +23,7 @@ type DataSource<R extends {}> = {
    * @param {TreeViewItemId} parentId The id of the item the children belong to.
    * @returns { Promise<R[]>} The children of the item.
    */
-  getTreeItems?: (parentId?: TreeViewItemId) => Promise<R[]>;
+  getTreeItems: (parentId?: TreeViewItemId) => Promise<R[]>;
 };
 export interface UseTreeViewLazyLoadingPublicAPI {}
 export interface UseTreeViewLazyLoadingInstance extends UseTreeViewLazyLoadingPublicAPI {

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

@@ -6,16 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTreeViewSelectionItemPlugin = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _fastObjectShallowCompare = require("@mui/x-internals/fastObjectShallowCompare");
 var _TreeViewProvider = require("../../TreeViewProvider");
 var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
 var _useTreeViewSelection = require("./useTreeViewSelection.selectors");
 var _useSelector = require("../../hooks/useSelector");
-function selectorItemCheckboxStatus(state, {
-  itemId,
-  selectionPropagation
-}) {
+function selectorItemCheckboxStatus(state, itemId) {
+  const isCheckboxSelectionEnabled = (0, _useTreeViewSelection.selectorIsCheckboxSelectionEnabled)(state);
+  const isSelectionEnabledForItem = (0, _useTreeViewSelection.selectorIsItemSelectionEnabled)(state, itemId);
   if ((0, _useTreeViewSelection.selectorIsItemSelected)(state, itemId)) {
     return {
+      disabled: !isSelectionEnabledForItem,
+      visible: isCheckboxSelectionEnabled,
       indeterminate: false,
       checked: true
     };
@@ -23,6 +25,8 @@ function selectorItemCheckboxStatus(state, {
   const children = (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, itemId);
   if (children.length === 0) {
     return {
+      disabled: !isSelectionEnabledForItem,
+      visible: isCheckboxSelectionEnabled,
       indeterminate: false,
       checked: false
     };
@@ -41,8 +45,10 @@ function selectorItemCheckboxStatus(state, {
   };
   traverseDescendants(itemId);
   return {
+    disabled: !isSelectionEnabledForItem,
+    visible: isCheckboxSelectionEnabled,
     indeterminate: hasSelectedDescendant && hasUnSelectedDescendant || !hasUnSelectedDescendant,
-    checked: selectionPropagation.parents ? hasSelectedDescendant : false
+    checked: (0, _useTreeViewSelection.selectorSelectionPropagationRules)(state).parents ? hasSelectedDescendant : false
   };
 }
 const useTreeViewSelectionItemPlugin = ({
@@ -52,37 +58,26 @@ const useTreeViewSelectionItemPlugin = ({
     itemId
   } = props;
   const {
-    store,
-    selection: {
-      disableSelection,
-      checkboxSelection,
-      selectionPropagation
-    }
+    store
   } = (0, _TreeViewProvider.useTreeViewContext)();
-  const checkboxStatus = (0, _useSelector.useSelector)(store, selectorItemCheckboxStatus, {
-    itemId,
-    selectionPropagation
-  }, (a, b) => a.checked === b.checked && a.indeterminate === b.indeterminate);
+  const checkboxStatus = (0, _useSelector.useSelector)(store, selectorItemCheckboxStatus, itemId, _fastObjectShallowCompare.fastObjectShallowCompare);
   return {
     propsEnhancers: {
       checkbox: ({
         externalEventHandlers,
-        interactions,
-        status
+        interactions
       }) => {
         const handleChange = event => {
           externalEventHandlers.onChange?.(event);
           if (event.defaultMuiPrevented) {
             return;
           }
-          if (disableSelection || status.disabled) {
+          if (!(0, _useTreeViewSelection.selectorIsItemSelectionEnabled)(store.value, itemId)) {
             return;
           }
           interactions.handleCheckboxSelection(event);
         };
         return (0, _extends2.default)({
-          visible: checkboxSelection,
-          disabled: disableSelection || status.disabled,
           tabIndex: -1,
           onChange: handleChange
         }, checkboxStatus);

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -20,16 +20,10 @@ const useTreeViewSelection = ({
 }) => {
   const lastSelectedItem = React.useRef(null);
   const lastSelectedRange = React.useRef({});
-  (0, _useEnhancedEffect.default)(() => {
-    store.update(prevState => (0, _extends2.default)({}, prevState, {
-      selection: {
-        selectedItemsMap: (0, _useTreeViewSelection.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 = (0, _useTreeViewSelection2.selectorIsMultiSelectEnabled)(store.value);
+    if (isMultiSelectEnabled && (params.selectionPropagation.descendants || params.selectionPropagation.parents)) {
       cleanModel = (0, _useTreeViewSelection.propagateSelection)({
         store,
         selectionPropagation: params.selectionPropagation,
@@ -41,7 +35,7 @@ const useTreeViewSelection = ({
       cleanModel = newModel;
     }
     if (params.onItemSelectionToggle) {
-      if (params.multiSelect) {
+      if (isMultiSelectEnabled) {
         const changes = (0, _useTreeViewSelection.getAddedAndRemovedItems)({
           store,
           newModel: cleanModel,
@@ -75,10 +69,11 @@ const useTreeViewSelection = ({
     keepExistingSelection = false,
     shouldBeSelected
   }) => {
-    if (params.disableSelection) {
+    if (!(0, _useTreeViewSelection2.selectorIsSelectionEnabled)(store.value)) {
       return;
     }
     let newSelected;
+    const isMultiSelectEnabled = (0, _useTreeViewSelection2.selectorIsMultiSelectEnabled)(store.value);
     if (keepExistingSelection) {
       const cleanSelectedItems = (0, _useTreeViewSelection.convertSelectedItemsToArray)(models.selectedItems.value);
       const isSelectedBefore = (0, _useTreeViewSelection2.selectorIsItemSelected)(store.value, itemId);
@@ -92,9 +87,9 @@ const useTreeViewSelection = ({
     } else {
       // eslint-disable-next-line no-lonely-if
       if (shouldBeSelected === false || shouldBeSelected == null && (0, _useTreeViewSelection2.selectorIsItemSelected)(store.value, itemId)) {
-        newSelected = params.multiSelect ? [] : null;
+        newSelected = isMultiSelectEnabled ? [] : null;
       } else {
-        newSelected = params.multiSelect ? [itemId] : itemId;
+        newSelected = isMultiSelectEnabled ? [itemId] : itemId;
       }
     }
     setSelectedItems(event, newSelected,
@@ -105,7 +100,8 @@ const useTreeViewSelection = ({
     lastSelectedRange.current = {};
   };
   const selectRange = (event, [start, end]) => {
-    if (params.disableSelection || !params.multiSelect) {
+    const isMultiSelectEnabled = (0, _useTreeViewSelection2.selectorIsMultiSelectEnabled)(store.value);
+    if (!isMultiSelectEnabled) {
       return;
     }
     let newSelectedItems = (0, _useTreeViewSelection.convertSelectedItemsToArray)(models.selectedItems.value).slice();
@@ -137,7 +133,8 @@ const useTreeViewSelection = ({
     selectRange(event, [itemId, (0, _tree.getLastNavigableItem)(store.value)]);
   };
   const selectAllNavigableItems = event => {
-    if (params.disableSelection || !params.multiSelect) {
+    const isMultiSelectEnabled = (0, _useTreeViewSelection2.selectorIsMultiSelectEnabled)(store.value);
+    if (!isMultiSelectEnabled) {
       return;
     }
     const navigableItems = (0, _tree.getAllNavigableItems)(store.value);
@@ -145,7 +142,8 @@ const useTreeViewSelection = ({
     lastSelectedRange.current = (0, _useTreeViewSelection.getLookupFromArray)(navigableItems);
   };
   const selectItemFromArrowNavigation = (event, currentItem, nextItem) => {
-    if (params.disableSelection || !params.multiSelect) {
+    const isMultiSelectEnabled = (0, _useTreeViewSelection2.selectorIsMultiSelectEnabled)(store.value);
+    if (!isMultiSelectEnabled) {
       return;
     }
     let newSelectedItems = (0, _useTreeViewSelection.convertSelectedItemsToArray)(models.selectedItems.value).slice();
@@ -169,17 +167,22 @@ 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
+  (0, _useEnhancedEffect.default)(() => {
+    store.update(prevState => (0, _extends2.default)({}, 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 : (0, _useTreeViewSelection.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
@@ -194,8 +197,7 @@ const useTreeViewSelection = ({
       selectRangeFromStartToItem,
       selectRangeFromItemToEnd,
       selectItemFromArrowNavigation
-    },
-    contextValue: pluginContextValue
+    }
   };
 };
 exports.useTreeViewSelection = useTreeViewSelection;
@@ -216,16 +218,19 @@ useTreeViewSelection.getDefaultizedParams = ({
   defaultSelectedItems: params.defaultSelectedItems ?? (params.multiSelect ? DEFAULT_SELECTED_ITEMS : null),
   selectionPropagation: params.selectionPropagation ?? EMPTY_SELECTION_PROPAGATION
 });
-useTreeViewSelection.getInitialState = params => ({
-  selection: {
-    selectedItemsMap: (0, _useTreeViewSelection.createSelectedItemsMap)(params.selectedItems === undefined ? params.defaultSelectedItems : params.selectedItems)
-  }
-});
-useTreeViewSelection.getInitialState = params => ({
-  selection: {
-    selectedItemsMap: (0, _useTreeViewSelection.createSelectedItemsMap)(params.selectedItems === undefined ? params.defaultSelectedItems : params.selectedItems)
-  }
-});
+useTreeViewSelection.getInitialState = params => {
+  const rawSelectedItems = params.selectedItems === undefined ? params.defaultSelectedItems : params.selectedItems;
+  return {
+    selection: {
+      rawSelectedItems,
+      selectedItemsMap: (0, _useTreeViewSelection.createSelectedItemsMap)(rawSelectedItems),
+      isEnabled: !params.disableSelection,
+      isMultiSelectEnabled: params.multiSelect,
+      isCheckboxSelectionEnabled: params.checkboxSelection,
+      selectionPropagation: params.selectionPropagation
+    }
+  };
+};
 useTreeViewSelection.params = {
   disableSelection: true,
   multiSelect: true,