@mui/x-tree-view 8.22.0 → 8.24.0

package/internals/plugins/selection/TreeViewSelectionPlugin.d.ts

@@ -0,0 +1,73 @@
+export declare class TreeViewSelectionPlugin<Multiple extends boolean | undefined> {
+  private store;
+  private lastSelectedItem;
+  private lastSelectedRange;
+  constructor(store: any);
+  private setSelectedItems;
+  private selectRange;
+  buildPublicAPI: () => {
+    setItemSelection: ({
+      itemId,
+      event,
+      keepExistingSelection,
+      shouldBeSelected
+    }: {
+      itemId: string;
+      event?: React.SyntheticEvent | null;
+      shouldBeSelected?: boolean;
+      keepExistingSelection?: boolean;
+    }) => void;
+  };
+  /**
+   * Select or deselect an item.
+   * @param {object} parameters The parameters of the method.
+   * @param {TreeViewItemId} parameters.itemId The id of the item to select or deselect.
+   * @param {React.SyntheticEvent} parameters.event The DOM event that triggered the change.
+   * @param {boolean} parameters.keepExistingSelection If `true`, the other already selected items will remain selected, otherwise, they will be deselected. This parameter is only relevant when `multiSelect` is `true`
+   * @param {boolean | undefined} parameters.shouldBeSelected If `true` the item will be selected. If `false` the item will be deselected. If not defined, the item's selection status will be toggled.
+   */
+  setItemSelection: ({
+    itemId,
+    event,
+    keepExistingSelection,
+    shouldBeSelected
+  }: {
+    itemId: string;
+    event?: React.SyntheticEvent | null;
+    shouldBeSelected?: boolean;
+    keepExistingSelection?: boolean;
+  }) => void;
+  /**
+   * Select all the navigable items in the tree.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   */
+  selectAllNavigableItems: (event: React.SyntheticEvent) => void;
+  /**
+   * Expand the current selection range up to the given item.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   * @param {TreeViewItemId} itemId The id of the item to expand the selection to.
+   */
+  expandSelectionRange: (event: React.SyntheticEvent, itemId: string) => void;
+  /**
+   * Expand the current selection range from the first navigable item to the given item.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   * @param {TreeViewItemId} itemId The id of the item up to which the selection range should be expanded.
+   */
+  selectRangeFromStartToItem: (event: React.SyntheticEvent, itemId: string) => void;
+  /**
+   * Expand the current selection range from the given item to the last navigable item.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   * @param {TreeViewItemId} itemId The id of the item from which the selection range should be expanded.
+   */
+  selectRangeFromItemToEnd: (event: React.SyntheticEvent, itemId: string) => void;
+  /**
+   * Update the selection when navigating with ArrowUp / ArrowDown keys.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   * @param {TreeViewItemId} currentItemId The id of the active item before the keyboard navigation.
+   * @param {TreeViewItemId} nextItemId The id of the active item after the keyboard navigation.
+   */
+  selectItemFromArrowNavigation: (event: React.SyntheticEvent, currentItem: string, nextItem: string) => void;
+}
+export declare function getLookupFromArray(array: string[]): {
+  [itemId: string]: true;
+};

package/internals/plugins/selection/TreeViewSelectionPlugin.js

@@ -0,0 +1,327 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeViewSelectionPlugin = void 0;
+exports.getLookupFromArray = getLookupFromArray;
+var _empty = require("@base-ui/utils/empty");
+var _items = require("../items");
+var _selectors = require("./selectors");
+var _itemPlugin = require("./itemPlugin");
+var _tree = require("../../utils/tree");
+class TreeViewSelectionPlugin {
+  lastSelectedItem = null;
+  lastSelectedRange = {};
+
+  // We can't type `store`, otherwise we get the following TS error:
+  // 'selection' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
+  constructor(store) {
+    this.store = store;
+    store.itemPluginManager.register(_itemPlugin.useSelectionItemPlugin, null);
+  }
+  setSelectedItems = (event, newModel, additionalItemsToPropagate) => {
+    const {
+      selectionPropagation = _empty.EMPTY_OBJECT,
+      selectedItems,
+      onItemSelectionToggle,
+      onSelectedItemsChange
+    } = this.store.parameters;
+    const oldModel = _selectors.selectionSelectors.selectedItemsRaw(this.store.state);
+    let cleanModel;
+    const isMultiSelectEnabled = _selectors.selectionSelectors.isMultiSelectEnabled(this.store.state);
+    if (isMultiSelectEnabled && (selectionPropagation.descendants || selectionPropagation.parents)) {
+      cleanModel = propagateSelection({
+        store: this.store,
+        selectionPropagation,
+        newModel: newModel,
+        oldModel: oldModel,
+        additionalItemsToPropagate
+      });
+    } else {
+      cleanModel = newModel;
+    }
+    if (onItemSelectionToggle) {
+      if (isMultiSelectEnabled) {
+        const changes = getAddedAndRemovedItems({
+          store: this.store,
+          newModel: cleanModel,
+          oldModel: oldModel
+        });
+        if (onItemSelectionToggle) {
+          changes.added.forEach(itemId => {
+            onItemSelectionToggle(event, itemId, true);
+          });
+          changes.removed.forEach(itemId => {
+            onItemSelectionToggle(event, itemId, false);
+          });
+        }
+      } else if (cleanModel !== oldModel) {
+        if (oldModel != null) {
+          onItemSelectionToggle(event, oldModel, false);
+        }
+        if (cleanModel != null) {
+          onItemSelectionToggle(event, cleanModel, true);
+        }
+      }
+    }
+    if (selectedItems === undefined) {
+      this.store.set('selectedItems', cleanModel);
+    }
+    onSelectedItemsChange?.(event, cleanModel);
+  };
+  selectRange = (event, [start, end]) => {
+    const isMultiSelectEnabled = _selectors.selectionSelectors.isMultiSelectEnabled(this.store.state);
+    if (!isMultiSelectEnabled) {
+      return;
+    }
+    let newSelectedItems = _selectors.selectionSelectors.selectedItems(this.store.state).slice();
+
+    // If the last selection was a range selection,
+    // remove the items that were part of the last range from the model
+    if (Object.keys(this.lastSelectedRange).length > 0) {
+      newSelectedItems = newSelectedItems.filter(id => !this.lastSelectedRange[id]);
+    }
+
+    // Add to the model the items that are part of the new range and not already part of the model.
+    const selectedItemsLookup = getLookupFromArray(newSelectedItems);
+    const range = (0, _tree.getNonDisabledItemsInRange)(this.store.state, start, end).filter(id => _selectors.selectionSelectors.isItemSelectable(this.store.state, id));
+    const itemsToAddToModel = range.filter(id => !selectedItemsLookup[id]);
+    newSelectedItems = newSelectedItems.concat(itemsToAddToModel);
+    this.setSelectedItems(event, newSelectedItems);
+    this.lastSelectedRange = getLookupFromArray(range);
+  };
+  buildPublicAPI = () => {
+    return {
+      setItemSelection: this.setItemSelection
+    };
+  };
+
+  /**
+   * Select or deselect an item.
+   * @param {object} parameters The parameters of the method.
+   * @param {TreeViewItemId} parameters.itemId The id of the item to select or deselect.
+   * @param {React.SyntheticEvent} parameters.event The DOM event that triggered the change.
+   * @param {boolean} parameters.keepExistingSelection If `true`, the other already selected items will remain selected, otherwise, they will be deselected. This parameter is only relevant when `multiSelect` is `true`
+   * @param {boolean | undefined} parameters.shouldBeSelected If `true` the item will be selected. If `false` the item will be deselected. If not defined, the item's selection status will be toggled.
+   */
+  setItemSelection = ({
+    itemId,
+    event = null,
+    keepExistingSelection = false,
+    shouldBeSelected
+  }) => {
+    if (!_selectors.selectionSelectors.enabled(this.store.state)) {
+      return;
+    }
+    let newSelected;
+    const isMultiSelectEnabled = _selectors.selectionSelectors.isMultiSelectEnabled(this.store.state);
+    if (keepExistingSelection) {
+      const oldSelected = _selectors.selectionSelectors.selectedItems(this.store.state);
+      const isSelectedBefore = _selectors.selectionSelectors.isItemSelected(this.store.state, itemId);
+      if (isSelectedBefore && (shouldBeSelected === false || shouldBeSelected == null)) {
+        newSelected = oldSelected.filter(id => id !== itemId);
+      } else if (!isSelectedBefore && (shouldBeSelected === true || shouldBeSelected == null)) {
+        newSelected = [itemId].concat(oldSelected);
+      } else {
+        newSelected = oldSelected;
+      }
+    } else {
+      // eslint-disable-next-line no-lonely-if
+      if (shouldBeSelected === false || shouldBeSelected == null && _selectors.selectionSelectors.isItemSelected(this.store.state, itemId)) {
+        newSelected = isMultiSelectEnabled ? [] : null;
+      } else {
+        newSelected = isMultiSelectEnabled ? [itemId] : itemId;
+      }
+    }
+    this.setSelectedItems(event, newSelected,
+    // If shouldBeSelected === selectionSelectors.isItemSelected(store, itemId), we still want to propagate the select.
+    // This is useful when the element is in an indeterminate state.
+    [itemId]);
+    this.lastSelectedItem = itemId;
+    this.lastSelectedRange = {};
+  };
+
+  /**
+   * Select all the navigable items in the tree.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   */
+  selectAllNavigableItems = event => {
+    const isMultiSelectEnabled = _selectors.selectionSelectors.isMultiSelectEnabled(this.store.state);
+    if (!isMultiSelectEnabled) {
+      return;
+    }
+    const navigableItems = (0, _tree.getAllNavigableItems)(this.store.state);
+    this.setSelectedItems(event, navigableItems);
+    this.lastSelectedRange = getLookupFromArray(navigableItems);
+  };
+
+  /**
+   * Expand the current selection range up to the given item.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   * @param {TreeViewItemId} itemId The id of the item to expand the selection to.
+   */
+  expandSelectionRange = (event, itemId) => {
+    if (this.lastSelectedItem != null) {
+      const [start, end] = (0, _tree.findOrderInTremauxTree)(this.store.state, itemId, this.lastSelectedItem);
+      this.selectRange(event, [start, end]);
+    }
+  };
+
+  /**
+   * Expand the current selection range from the first navigable item to the given item.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   * @param {TreeViewItemId} itemId The id of the item up to which the selection range should be expanded.
+   */
+  selectRangeFromStartToItem = (event, itemId) => {
+    this.selectRange(event, [(0, _tree.getFirstNavigableItem)(this.store.state), itemId]);
+  };
+
+  /**
+   * Expand the current selection range from the given item to the last navigable item.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   * @param {TreeViewItemId} itemId The id of the item from which the selection range should be expanded.
+   */
+  selectRangeFromItemToEnd = (event, itemId) => {
+    this.selectRange(event, [itemId, (0, _tree.getLastNavigableItem)(this.store.state)]);
+  };
+
+  /**
+   * Update the selection when navigating with ArrowUp / ArrowDown keys.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   * @param {TreeViewItemId} currentItemId The id of the active item before the keyboard navigation.
+   * @param {TreeViewItemId} nextItemId The id of the active item after the keyboard navigation.
+   */
+  selectItemFromArrowNavigation = (event, currentItem, nextItem) => {
+    const isMultiSelectEnabled = _selectors.selectionSelectors.isMultiSelectEnabled(this.store.state);
+    if (!isMultiSelectEnabled) {
+      return;
+    }
+    let newSelectedItems = _selectors.selectionSelectors.selectedItems(this.store.state).slice();
+    if (Object.keys(this.lastSelectedRange).length === 0) {
+      newSelectedItems.push(nextItem);
+      this.lastSelectedRange = {
+        [currentItem]: true,
+        [nextItem]: true
+      };
+    } else {
+      if (!this.lastSelectedRange[currentItem]) {
+        this.lastSelectedRange = {};
+      }
+      if (this.lastSelectedRange[nextItem]) {
+        newSelectedItems = newSelectedItems.filter(id => id !== currentItem);
+        delete this.lastSelectedRange[currentItem];
+      } else {
+        newSelectedItems.push(nextItem);
+        this.lastSelectedRange[nextItem] = true;
+      }
+    }
+    this.setSelectedItems(event, newSelectedItems);
+  };
+}
+exports.TreeViewSelectionPlugin = TreeViewSelectionPlugin;
+function propagateSelection({
+  store,
+  selectionPropagation,
+  newModel,
+  oldModel,
+  additionalItemsToPropagate
+}) {
+  if (!selectionPropagation.descendants && !selectionPropagation.parents) {
+    return newModel;
+  }
+  let shouldRegenerateModel = false;
+  const newModelLookup = getLookupFromArray(newModel);
+  const changes = getAddedAndRemovedItems({
+    store,
+    newModel,
+    oldModel
+  });
+  additionalItemsToPropagate?.forEach(itemId => {
+    if (newModelLookup[itemId]) {
+      if (!changes.added.includes(itemId)) {
+        changes.added.push(itemId);
+      }
+    } else if (!changes.removed.includes(itemId)) {
+      changes.removed.push(itemId);
+    }
+  });
+  changes.added.forEach(addedItemId => {
+    if (selectionPropagation.descendants) {
+      const selectDescendants = itemId => {
+        if (itemId !== addedItemId) {
+          shouldRegenerateModel = true;
+          newModelLookup[itemId] = true;
+        }
+        _items.itemsSelectors.itemOrderedChildrenIds(store.state, itemId).forEach(selectDescendants);
+      };
+      selectDescendants(addedItemId);
+    }
+    if (selectionPropagation.parents) {
+      const checkAllDescendantsSelected = itemId => {
+        if (!newModelLookup[itemId]) {
+          return false;
+        }
+        const children = _items.itemsSelectors.itemOrderedChildrenIds(store.state, itemId);
+        return children.every(checkAllDescendantsSelected);
+      };
+      const selectParents = itemId => {
+        const parentId = _items.itemsSelectors.itemParentId(store.state, itemId);
+        if (parentId == null) {
+          return;
+        }
+        const siblings = _items.itemsSelectors.itemOrderedChildrenIds(store.state, parentId);
+        if (siblings.every(checkAllDescendantsSelected)) {
+          shouldRegenerateModel = true;
+          newModelLookup[parentId] = true;
+          selectParents(parentId);
+        }
+      };
+      selectParents(addedItemId);
+    }
+  });
+  changes.removed.forEach(removedItemId => {
+    if (selectionPropagation.parents) {
+      let parentId = _items.itemsSelectors.itemParentId(store.state, removedItemId);
+      while (parentId != null) {
+        if (newModelLookup[parentId]) {
+          shouldRegenerateModel = true;
+          delete newModelLookup[parentId];
+        }
+        parentId = _items.itemsSelectors.itemParentId(store.state, parentId);
+      }
+    }
+    if (selectionPropagation.descendants) {
+      const deSelectDescendants = itemId => {
+        if (itemId !== removedItemId) {
+          shouldRegenerateModel = true;
+          delete newModelLookup[itemId];
+        }
+        _items.itemsSelectors.itemOrderedChildrenIds(store.state, itemId).forEach(deSelectDescendants);
+      };
+      deSelectDescendants(removedItemId);
+    }
+  });
+  return shouldRegenerateModel ? Object.keys(newModelLookup) : newModel;
+}
+function getAddedAndRemovedItems({
+  store,
+  oldModel,
+  newModel
+}) {
+  const newModelMap = new Map();
+  newModel.forEach(id => {
+    newModelMap.set(id, true);
+  });
+  return {
+    added: newModel.filter(itemId => !_selectors.selectionSelectors.isItemSelected(store.state, itemId)),
+    removed: oldModel.filter(itemId => !newModelMap.has(itemId))
+  };
+}
+function getLookupFromArray(array) {
+  const lookup = {};
+  array.forEach(itemId => {
+    lookup[itemId] = true;
+  });
+  return lookup;
+}

package/internals/plugins/selection/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./TreeViewSelectionPlugin.js";
+export * from "./selectors.js";

package/internals/plugins/selection/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _TreeViewSelectionPlugin = require("./TreeViewSelectionPlugin");
+Object.keys(_TreeViewSelectionPlugin).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TreeViewSelectionPlugin[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TreeViewSelectionPlugin[key];
+    }
+  });
+});
+var _selectors = require("./selectors");
+Object.keys(_selectors).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _selectors[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _selectors[key];
+    }
+  });
+});

package/internals/plugins/{useTreeViewSelection → selection}/itemPlugin.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { TreeViewCancellableEventHandler } from "../../../models/index.js";
 import { TreeViewItemPlugin } from "../../models/index.js";
-export declare const useTreeViewSelectionItemPlugin: TreeViewItemPlugin;
+export declare const useSelectionItemPlugin: TreeViewItemPlugin;
 interface UseTreeItemRootSlotPropsFromSelection {
   'aria-checked': React.AriaAttributes['aria-checked'];
 }

package/internals/plugins/{useTreeViewSelection → selection}/itemPlugin.js

@@ -3,29 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTreeViewSelectionItemPlugin = void 0;
+exports.useSelectionItemPlugin = void 0;
 var _store = require("@mui/x-internals/store");
 var _TreeViewProvider = require("../../TreeViewProvider");
-var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
-var _useTreeViewSelection = require("./useTreeViewSelection.selectors");
+var _selectors = require("../items/selectors");
+var _selectors2 = require("./selectors");
 const selectorCheckboxSelectionStatus = (0, _store.createSelector)((state, itemId) => {
-  if (_useTreeViewSelection.selectionSelectors.isItemSelected(state, itemId)) {
+  if (_selectors2.selectionSelectors.isItemSelected(state, itemId)) {
     return 'checked';
   }
   let hasSelectedDescendant = false;
   let hasUnSelectedDescendant = false;
   const traverseDescendants = itemToTraverseId => {
     if (itemToTraverseId !== itemId) {
-      if (_useTreeViewSelection.selectionSelectors.isItemSelected(state, itemToTraverseId)) {
+      if (_selectors2.selectionSelectors.isItemSelected(state, itemToTraverseId)) {
         hasSelectedDescendant = true;
       } else {
         hasUnSelectedDescendant = true;
       }
     }
-    _useTreeViewItems.itemsSelectors.itemOrderedChildrenIds(state, itemToTraverseId).forEach(traverseDescendants);
+    _selectors.itemsSelectors.itemOrderedChildrenIds(state, itemToTraverseId).forEach(traverseDescendants);
   };
   traverseDescendants(itemId);
-  const shouldSelectBasedOnDescendants = _useTreeViewSelection.selectionSelectors.propagationRules(state).parents;
+  const shouldSelectBasedOnDescendants = _selectors2.selectionSelectors.propagationRules(state).parents;
   if (shouldSelectBasedOnDescendants) {
     if (hasSelectedDescendant && hasUnSelectedDescendant) {
       return 'indeterminate';
@@ -40,7 +40,7 @@ const selectorCheckboxSelectionStatus = (0, _store.createSelector)((state, itemI
   }
   return 'empty';
 });
-const useTreeViewSelectionItemPlugin = ({
+const useSelectionItemPlugin = ({
   props
 }) => {
   const {
@@ -49,10 +49,10 @@ const useTreeViewSelectionItemPlugin = ({
   const {
     store
   } = (0, _TreeViewProvider.useTreeViewContext)();
-  const isCheckboxSelectionEnabled = (0, _store.useStore)(store, _useTreeViewSelection.selectionSelectors.isCheckboxSelectionEnabled);
-  const isItemSelectionEnabled = (0, _store.useStore)(store, _useTreeViewSelection.selectionSelectors.canItemBeSelected, itemId);
+  const isCheckboxSelectionEnabled = (0, _store.useStore)(store, _selectors2.selectionSelectors.isCheckboxSelectionEnabled);
+  const isFeatureEnabledForItem = (0, _store.useStore)(store, _selectors2.selectionSelectors.isFeatureEnabledForItem, itemId);
+  const canItemBeSelected = (0, _store.useStore)(store, _selectors2.selectionSelectors.canItemBeSelected, itemId);
   const selectionStatus = (0, _store.useStore)(store, selectorCheckboxSelectionStatus, itemId);
-  const isSelectionEnabledForItem = (0, _store.useStore)(store, _useTreeViewSelection.selectionSelectors.canItemBeSelected, itemId);
   return {
     propsEnhancers: {
       root: () => {
@@ -63,7 +63,7 @@ const useTreeViewSelectionItemPlugin = ({
           ariaChecked = true;
         } else if (selectionStatus === 'indeterminate') {
           ariaChecked = 'mixed';
-        } else if (!isSelectionEnabledForItem) {
+        } else if (!canItemBeSelected) {
           // - if the tree contains nodes that are not selectable, aria-checked is not present on those nodes.
           ariaChecked = undefined;
         } else {
@@ -83,7 +83,7 @@ const useTreeViewSelectionItemPlugin = ({
           if (event.defaultMuiPrevented) {
             return;
           }
-          if (!_useTreeViewSelection.selectionSelectors.canItemBeSelected(store.state, itemId)) {
+          if (!_selectors2.selectionSelectors.canItemBeSelected(store.state, itemId)) {
             return;
           }
           interactions.handleCheckboxSelection(event);
@@ -91,8 +91,8 @@ const useTreeViewSelectionItemPlugin = ({
         return {
           tabIndex: -1,
           onChange: handleChange,
-          visible: isCheckboxSelectionEnabled,
-          disabled: !isItemSelectionEnabled,
+          visible: isCheckboxSelectionEnabled && isFeatureEnabledForItem,
+          disabled: !canItemBeSelected,
           checked: selectionStatus === 'checked',
           indeterminate: selectionStatus === 'indeterminate'
         };
@@ -100,4 +100,4 @@ const useTreeViewSelectionItemPlugin = ({
     }
   };
 };
-exports.useTreeViewSelectionItemPlugin = useTreeViewSelectionItemPlugin;
+exports.useSelectionItemPlugin = useSelectionItemPlugin;

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

@@ -0,0 +1,48 @@
+import { MinimalTreeViewState } from "../../MinimalTreeViewStore/index.js";
+export declare const selectionSelectors: {
+  /**
+   * Gets the selected items as provided to the component.
+   */
+  selectedItemsRaw: (state: MinimalTreeViewState<any, any>) => string | readonly string[] | readonly string[] | null;
+  /**
+   * Gets the selected items as an array.
+   */
+  selectedItems: (args_0: MinimalTreeViewState<any, any>) => any[];
+  /**
+   * Gets the selected items as a Map.
+   */
+  selectedItemsMap: (args_0: MinimalTreeViewState<any, any>) => Map<string, true>;
+  /**
+   * Checks whether selection is enabled.
+   */
+  enabled: (state: MinimalTreeViewState<any, any>) => boolean;
+  /**
+   * Checks whether multi selection is enabled.
+   */
+  isMultiSelectEnabled: (state: MinimalTreeViewState<any, any>) => boolean;
+  /**
+   * Checks whether checkbox selection is enabled.
+   */
+  isCheckboxSelectionEnabled: (state: MinimalTreeViewState<any, any>) => boolean;
+  /**
+   * Gets the selection propagation rules.
+   */
+  propagationRules: (state: MinimalTreeViewState<any, any>) => import("../../../index.js").TreeViewSelectionPropagation;
+  /**
+   * Checks whether an item is selected.
+   */
+  isItemSelected: (args_0: MinimalTreeViewState<any, any>, itemId: string) => boolean;
+  /**
+   * Checks whether the selection feature is enabled for an item.
+   * Returns `true` when selection is enabled on the Tree View and the item is selectable (even if the item is disabled).
+   */
+  isFeatureEnabledForItem: (args_0: MinimalTreeViewState<any, any>, _itemId: string) => boolean;
+  /**
+   * Checks whether an item can be selected (if selection is enabled, if the item is not disabled, and if the item is selectable).
+   */
+  canItemBeSelected: (args_0: MinimalTreeViewState<any, any>, _itemId: string) => boolean;
+  /**
+   * Checks whether an item is selectable based on the `isItemSelectionDisabled` prop.
+   */
+  isItemSelectable: (state: MinimalTreeViewState<any, any>, itemId: string) => boolean;
+};

package/internals/plugins/{useTreeViewSelection/useTreeViewSelection.selectors.js → selection/selectors.js}

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.selectionSelectors = void 0;
 var _store = require("@mui/x-internals/store");
-var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
-const selectedItemsSelector = (0, _store.createSelectorMemoized)(state => state.selection.selectedItems, selectedItemsRaw => {
+var _selectors = require("../items/selectors");
+const selectedItemsSelector = (0, _store.createSelectorMemoized)(state => state.selectedItems, selectedItemsRaw => {
   if (Array.isArray(selectedItemsRaw)) {
     return selectedItemsRaw;
   }
@@ -22,11 +22,12 @@ const selectedItemsMapSelector = (0, _store.createSelectorMemoized)(selectedItem
   });
   return selectedItemsMap;
 });
+const isItemSelectableSelector = (0, _store.createSelector)((state, itemId) => state.itemMetaLookup[itemId]?.selectable ?? true);
 const selectionSelectors = exports.selectionSelectors = {
   /**
    * Gets the selected items as provided to the component.
    */
-  selectedItemsRaw: (0, _store.createSelector)(state => state.selection.selectedItems),
+  selectedItemsRaw: (0, _store.createSelector)(state => state.selectedItems),
   /**
    * Gets the selected items as an array.
    */
@@ -38,25 +39,34 @@ const selectionSelectors = exports.selectionSelectors = {
   /**
    * Checks whether selection is enabled.
    */
-  enabled: (0, _store.createSelector)(state => state.selection.isEnabled),
+  enabled: (0, _store.createSelector)(state => !state.disableSelection),
   /**
    * Checks whether multi selection is enabled.
    */
-  isMultiSelectEnabled: (0, _store.createSelector)(state => state.selection.isMultiSelectEnabled),
+  isMultiSelectEnabled: (0, _store.createSelector)(state => state.multiSelect),
   /**
    * Checks whether checkbox selection is enabled.
    */
-  isCheckboxSelectionEnabled: (0, _store.createSelector)(state => state.selection.isCheckboxSelectionEnabled),
+  isCheckboxSelectionEnabled: (0, _store.createSelector)(state => state.checkboxSelection),
   /**
    * Gets the selection propagation rules.
    */
-  propagationRules: (0, _store.createSelector)(state => state.selection.selectionPropagation),
+  propagationRules: (0, _store.createSelector)(state => state.selectionPropagation),
   /**
    * Checks whether an item is selected.
    */
   isItemSelected: (0, _store.createSelector)(selectedItemsMapSelector, (selectedItemsMap, itemId) => selectedItemsMap.has(itemId)),
   /**
-   * Checks whether an item can be selected (if selection is enabled and if the item is not disabled).
+   * Checks whether the selection feature is enabled for an item.
+   * Returns `true` when selection is enabled on the Tree View and the item is selectable (even if the item is disabled).
    */
-  canItemBeSelected: (0, _store.createSelector)(_useTreeViewItems.itemsSelectors.isItemDisabled, state => state.selection.isEnabled, (isItemDisabled, isSelectionEnabled, _itemId) => isSelectionEnabled && !isItemDisabled)
+  isFeatureEnabledForItem: (0, _store.createSelector)(isItemSelectableSelector, state => !state.disableSelection, (isItemSelectable, isSelectionEnabled, _itemId) => isSelectionEnabled && isItemSelectable),
+  /**
+   * Checks whether an item can be selected (if selection is enabled, if the item is not disabled, and if the item is selectable).
+   */
+  canItemBeSelected: (0, _store.createSelector)(_selectors.itemsSelectors.isItemDisabled, isItemSelectableSelector, state => !state.disableSelection, (isItemDisabled, isItemSelectable, isSelectionEnabled, _itemId) => isSelectionEnabled && !isItemDisabled && isItemSelectable),
+  /**
+   * Checks whether an item is selectable based on the `isItemSelectionDisabled` prop.
+   */
+  isItemSelectable: isItemSelectableSelector
 };