@mui/x-tree-view 8.23.0 → 8.24.0

package/esm/internals/plugins/{useTreeViewLabel/useTreeViewLabel.selectors.js → labelEditing/selectors.js}

@@ -1,10 +1,10 @@
 import { createSelector } from '@mui/x-internals/store';
-import { itemsSelectors } from "../useTreeViewItems/useTreeViewItems.selectors.js";
+import { itemsSelectors } from "../items/selectors.js";
 export const labelSelectors = {
   /**
    * Checks whether an item is editable.
    */
-  isItemEditable: createSelector(state => state.label?.isItemEditable, itemsSelectors.itemModel, (isItemEditable, itemModel, _itemId) => {
+  isItemEditable: createSelector(state => state.isItemEditable, itemsSelectors.itemModel, (isItemEditable, itemModel, _itemId) => {
     if (!itemModel || isItemEditable == null) {
       return false;
     }
@@ -16,9 +16,9 @@ export const labelSelectors = {
   /**
    * Checks whether an item is being edited.
    */
-  isItemBeingEdited: createSelector((state, itemId) => itemId == null ? false : state.label?.editedItemId === itemId),
+  isItemBeingEdited: createSelector((state, itemId) => itemId == null ? false : state.editedItemId === itemId),
   /**
    * Checks whether any item is being edited.
    */
-  isAnyItemBeingEdited: createSelector(state => !!state.label?.editedItemId)
+  isAnyItemBeingEdited: createSelector(state => !!state.editedItemId)
 };

package/esm/internals/plugins/lazyLoading/index.d.ts

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

package/esm/internals/plugins/lazyLoading/index.js

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

package/esm/internals/plugins/lazyLoading/selectors.d.ts

@@ -0,0 +1,19 @@
+import { RichTreeViewState } from "../../RichTreeViewStore/index.js";
+export declare const lazyLoadingSelectors: {
+  /**
+   * Checks if the lazy loaded state is empty.
+   */
+  isEmpty: (state: RichTreeViewState<any, any>) => boolean;
+  /**
+   * Checks whether an item is loading.
+   */
+  isItemLoading: (state: RichTreeViewState<any, any>, itemId: string | null) => boolean;
+  /**
+   * Checks whether an item has errors.
+   */
+  itemHasError: (state: RichTreeViewState<any, any>, itemId: string | null) => boolean;
+  /**
+   * Get an item error.
+   */
+  itemError: (state: RichTreeViewState<any, any>, itemId: string | null) => Error | null | undefined;
+};

package/esm/internals/plugins/lazyLoading/selectors.js

@@ -0,0 +1,25 @@
+import { createSelector } from '@mui/x-internals/store';
+import { TREE_VIEW_ROOT_PARENT_ID } from "../items/index.js";
+export const lazyLoadingSelectors = {
+  /**
+   * Checks if the lazy loaded state is empty.
+   */
+  isEmpty: createSelector(state => {
+    if (state.lazyLoadedItems == null) {
+      return true;
+    }
+    return Object.keys(state.lazyLoadedItems.loading).length === 0 && Object.keys(state.lazyLoadedItems.errors).length === 0;
+  }),
+  /**
+   * Checks whether an item is loading.
+   */
+  isItemLoading: createSelector((state, itemId) => state.lazyLoadedItems?.loading[itemId ?? TREE_VIEW_ROOT_PARENT_ID] ?? false),
+  /**
+   * Checks whether an item has errors.
+   */
+  itemHasError: createSelector((state, itemId) => !!state.lazyLoadedItems?.errors[itemId ?? TREE_VIEW_ROOT_PARENT_ID]),
+  /**
+   * Get an item error.
+   */
+  itemError: createSelector((state, itemId) => state.lazyLoadedItems?.errors[itemId ?? TREE_VIEW_ROOT_PARENT_ID])
+};

package/esm/internals/plugins/lazyLoading/types.d.ts

@@ -0,0 +1,5 @@
+import { TreeViewItemId } from "../../../models/index.js";
+export interface RichTreeViewLazyLoadedItemsStatus {
+  loading: Record<TreeViewItemId, boolean>;
+  errors: Record<TreeViewItemId, Error | null>;
+}

package/esm/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/esm/internals/plugins/selection/TreeViewSelectionPlugin.js

@@ -0,0 +1,319 @@
+import { EMPTY_OBJECT } from '@base-ui/utils/empty';
+import { itemsSelectors } from "../items/index.js";
+import { selectionSelectors } from "./selectors.js";
+import { useSelectionItemPlugin } from "./itemPlugin.js";
+import { findOrderInTremauxTree, getAllNavigableItems, getFirstNavigableItem, getLastNavigableItem, getNonDisabledItemsInRange } from "../../utils/tree.js";
+export 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(useSelectionItemPlugin, null);
+  }
+  setSelectedItems = (event, newModel, additionalItemsToPropagate) => {
+    const {
+      selectionPropagation = EMPTY_OBJECT,
+      selectedItems,
+      onItemSelectionToggle,
+      onSelectedItemsChange
+    } = this.store.parameters;
+    const oldModel = selectionSelectors.selectedItemsRaw(this.store.state);
+    let cleanModel;
+    const isMultiSelectEnabled = 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 = selectionSelectors.isMultiSelectEnabled(this.store.state);
+    if (!isMultiSelectEnabled) {
+      return;
+    }
+    let newSelectedItems = 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 = getNonDisabledItemsInRange(this.store.state, start, end).filter(id => 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 (!selectionSelectors.enabled(this.store.state)) {
+      return;
+    }
+    let newSelected;
+    const isMultiSelectEnabled = selectionSelectors.isMultiSelectEnabled(this.store.state);
+    if (keepExistingSelection) {
+      const oldSelected = selectionSelectors.selectedItems(this.store.state);
+      const isSelectedBefore = 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 && 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 = selectionSelectors.isMultiSelectEnabled(this.store.state);
+    if (!isMultiSelectEnabled) {
+      return;
+    }
+    const navigableItems = 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] = 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, [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, 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 = selectionSelectors.isMultiSelectEnabled(this.store.state);
+    if (!isMultiSelectEnabled) {
+      return;
+    }
+    let newSelectedItems = 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);
+  };
+}
+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;
+        }
+        itemsSelectors.itemOrderedChildrenIds(store.state, itemId).forEach(selectDescendants);
+      };
+      selectDescendants(addedItemId);
+    }
+    if (selectionPropagation.parents) {
+      const checkAllDescendantsSelected = itemId => {
+        if (!newModelLookup[itemId]) {
+          return false;
+        }
+        const children = itemsSelectors.itemOrderedChildrenIds(store.state, itemId);
+        return children.every(checkAllDescendantsSelected);
+      };
+      const selectParents = itemId => {
+        const parentId = itemsSelectors.itemParentId(store.state, itemId);
+        if (parentId == null) {
+          return;
+        }
+        const siblings = 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 = itemsSelectors.itemParentId(store.state, removedItemId);
+      while (parentId != null) {
+        if (newModelLookup[parentId]) {
+          shouldRegenerateModel = true;
+          delete newModelLookup[parentId];
+        }
+        parentId = itemsSelectors.itemParentId(store.state, parentId);
+      }
+    }
+    if (selectionPropagation.descendants) {
+      const deSelectDescendants = itemId => {
+        if (itemId !== removedItemId) {
+          shouldRegenerateModel = true;
+          delete newModelLookup[itemId];
+        }
+        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 => !selectionSelectors.isItemSelected(store.state, itemId)),
+    removed: oldModel.filter(itemId => !newModelMap.has(itemId))
+  };
+}
+export function getLookupFromArray(array) {
+  const lookup = {};
+  array.forEach(itemId => {
+    lookup[itemId] = true;
+  });
+  return lookup;
+}

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

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

package/esm/internals/plugins/selection/index.js

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

package/esm/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/esm/internals/plugins/{useTreeViewSelection → selection}/itemPlugin.js

@@ -1,7 +1,7 @@
 import { createSelector, useStore } from '@mui/x-internals/store';
 import { useTreeViewContext } from "../../TreeViewProvider/index.js";
-import { itemsSelectors } from "../useTreeViewItems/useTreeViewItems.selectors.js";
-import { selectionSelectors } from "./useTreeViewSelection.selectors.js";
+import { itemsSelectors } from "../items/selectors.js";
+import { selectionSelectors } from "./selectors.js";
 const selectorCheckboxSelectionStatus = createSelector((state, itemId) => {
   if (selectionSelectors.isItemSelected(state, itemId)) {
     return 'checked';
@@ -34,7 +34,7 @@ const selectorCheckboxSelectionStatus = createSelector((state, itemId) => {
   }
   return 'empty';
 });
-export const useTreeViewSelectionItemPlugin = ({
+export const useSelectionItemPlugin = ({
   props
 }) => {
   const {

package/esm/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/esm/internals/plugins/{useTreeViewSelection/useTreeViewSelection.selectors.js → selection/selectors.js}

@@ -1,6 +1,6 @@
 import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
-import { itemsSelectors } from "../useTreeViewItems/useTreeViewItems.selectors.js";
-const selectedItemsSelector = createSelectorMemoized(state => state.selection.selectedItems, selectedItemsRaw => {
+import { itemsSelectors } from "../items/selectors.js";
+const selectedItemsSelector = createSelectorMemoized(state => state.selectedItems, selectedItemsRaw => {
   if (Array.isArray(selectedItemsRaw)) {
     return selectedItemsRaw;
   }
@@ -16,11 +16,12 @@ const selectedItemsMapSelector = createSelectorMemoized(selectedItemsSelector, s
   });
   return selectedItemsMap;
 });
+const isItemSelectableSelector = createSelector((state, itemId) => state.itemMetaLookup[itemId]?.selectable ?? true);
 export const selectionSelectors = {
   /**
    * Gets the selected items as provided to the component.
    */
-  selectedItemsRaw: createSelector(state => state.selection.selectedItems),
+  selectedItemsRaw: createSelector(state => state.selectedItems),
   /**
    * Gets the selected items as an array.
    */
@@ -32,19 +33,19 @@ export const selectionSelectors = {
   /**
    * Checks whether selection is enabled.
    */
-  enabled: createSelector(state => state.selection.isEnabled),
+  enabled: createSelector(state => !state.disableSelection),
   /**
    * Checks whether multi selection is enabled.
    */
-  isMultiSelectEnabled: createSelector(state => state.selection.isMultiSelectEnabled),
+  isMultiSelectEnabled: createSelector(state => state.multiSelect),
   /**
    * Checks whether checkbox selection is enabled.
    */
-  isCheckboxSelectionEnabled: createSelector(state => state.selection.isCheckboxSelectionEnabled),
+  isCheckboxSelectionEnabled: createSelector(state => state.checkboxSelection),
   /**
    * Gets the selection propagation rules.
    */
-  propagationRules: createSelector(state => state.selection.selectionPropagation),
+  propagationRules: createSelector(state => state.selectionPropagation),
   /**
    * Checks whether an item is selected.
    */
@@ -53,9 +54,13 @@ export const selectionSelectors = {
    * 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: createSelector(itemsSelectors.isItemSelectable, state => state.selection.isEnabled, (isItemSelectable, isSelectionEnabled, _itemId) => isSelectionEnabled && isItemSelectable),
+  isFeatureEnabledForItem: 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: createSelector(itemsSelectors.isItemDisabled, itemsSelectors.isItemSelectable, state => state.selection.isEnabled, (isItemDisabled, isItemSelectable, isSelectionEnabled, _itemId) => isSelectionEnabled && !isItemDisabled && isItemSelectable)
+  canItemBeSelected: createSelector(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
 };

package/esm/internals/utils/tree.d.ts

@@ -1,10 +1,8 @@
-import { TreeViewState } from "../models/index.js";
-import type { UseTreeViewExpansionSignature } from "../plugins/useTreeViewExpansion/index.js";
-import type { UseTreeViewItemsSignature } from "../plugins/useTreeViewItems/index.js";
-export declare const getPreviousNavigableItem: (state: TreeViewState<[UseTreeViewItemsSignature, UseTreeViewExpansionSignature]>, itemId: string) => string | null;
-export declare const getNextNavigableItem: (state: TreeViewState<[UseTreeViewItemsSignature, UseTreeViewExpansionSignature]>, itemId: string) => string | null;
-export declare const getLastNavigableItem: (state: TreeViewState<[UseTreeViewExpansionSignature, UseTreeViewItemsSignature]>) => string;
-export declare const getFirstNavigableItem: (state: TreeViewState<[UseTreeViewExpansionSignature, UseTreeViewItemsSignature]>) => string;
+import { MinimalTreeViewState } from "../MinimalTreeViewStore/index.js";
+export declare const getPreviousNavigableItem: (state: MinimalTreeViewState<any, any>, itemId: string) => string | null;
+export declare const getNextNavigableItem: (state: MinimalTreeViewState<any, any>, itemId: string) => string | null;
+export declare const getLastNavigableItem: (state: MinimalTreeViewState<any, any>) => string;
+export declare const getFirstNavigableItem: (state: MinimalTreeViewState<any, any>) => string;
 /**
  * This is used to determine the start and end of a selection range so
  * we can get the items between the two border items.
@@ -19,9 +17,9 @@ export declare const getFirstNavigableItem: (state: TreeViewState<[UseTreeViewEx
  * Another way to put it is which item is shallower in a trémaux tree
  * https://en.wikipedia.org/wiki/Tr%C3%A9maux_tree
  */
-export declare const findOrderInTremauxTree: (state: TreeViewState<[UseTreeViewExpansionSignature, UseTreeViewItemsSignature]>, itemAId: string, itemBId: string) => string[];
-export declare const getNonDisabledItemsInRange: (state: TreeViewState<[UseTreeViewItemsSignature, UseTreeViewExpansionSignature]>, itemAId: string, itemBId: string) => string[];
-export declare const getAllNavigableItems: (state: TreeViewState<[UseTreeViewItemsSignature, UseTreeViewExpansionSignature]>) => string[];
+export declare const findOrderInTremauxTree: (state: MinimalTreeViewState<any, any>, itemAId: string, itemBId: string) => string[];
+export declare const getNonDisabledItemsInRange: (state: MinimalTreeViewState<any, any>, itemAId: string, itemBId: string) => string[];
+export declare const getAllNavigableItems: (state: MinimalTreeViewState<any, any>) => string[];
 /**
  * Checks if the target is in a descendant of this item.
  * This can prevent from firing some logic on the ancestors on the interacted item when the event handler is on the root.

package/esm/internals/utils/tree.js

@@ -1,5 +1,5 @@
-import { expansionSelectors } from "../plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js";
-import { itemsSelectors } from "../plugins/useTreeViewItems/useTreeViewItems.selectors.js";
+import { expansionSelectors } from "../plugins/expansion/selectors.js";
+import { itemsSelectors } from "../plugins/items/selectors.js";
 const getLastNavigableItemInArray = (state, items) => {
   // Equivalent to Array.prototype.findLastIndex
   let itemIndex = items.length - 1;