@mui/x-tree-view 8.22.0 → 8.23.0

package/esm/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useEventCallback } from '@base-ui-components/utils/useEventCallback';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { TreeViewChildrenItemProvider } from "../../TreeViewProvider/TreeViewChildrenItemProvider.js";
 import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "../useTreeViewItems/useTreeViewItems.utils.js";
 import { TreeViewItemDepthContext } from "../../TreeViewItemDepthContext/index.js";
@@ -13,7 +13,7 @@ export const useTreeViewJSXItems = ({
   store
 }) => {
   instance.preventItemUpdates();
-  const insertJSXItem = useEventCallback(item => {
+  const insertJSXItem = useStableCallback(item => {
     if (store.state.items.itemMetaLookup[item.id] != null) {
       throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', `Two items were provided with the same id in the \`items\` prop: "${item.id}"`].join('\n'));
     }
@@ -51,7 +51,7 @@ export const useTreeViewJSXItems = ({
       })
     }));
   };
-  const mapLabelFromJSX = useEventCallback((itemId, label) => {
+  const mapLabelFromJSX = useStableCallback((itemId, label) => {
     instance.updateLabelMap(labelMap => {
       labelMap[itemId] = label;
       return labelMap;

package/esm/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -3,8 +3,8 @@
 import * as React from 'react';
 import { useStore } from '@mui/x-internals/store';
 import { useRtl } from '@mui/system/RtlProvider';
-import { useTimeout } from '@base-ui-components/utils/useTimeout';
-import { useEventCallback } from '@base-ui-components/utils/useEventCallback';
+import { useTimeout } from '@base-ui/utils/useTimeout';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { getFirstNavigableItem, getLastNavigableItem, getNextNavigableItem, getPreviousNavigableItem, isTargetInDescendants } from "../../utils/tree.js";
 import { hasPlugin } from "../../utils/plugins.js";
 import { useTreeViewLabel } from "../useTreeViewLabel/index.js";
@@ -25,7 +25,7 @@ export const useTreeViewKeyboardNavigation = ({
   const labelMap = React.useRef({});
   const typeaheadQueryRef = React.useRef('');
   const typeaheadTimeout = useTimeout();
-  const updateLabelMap = useEventCallback(callback => {
+  const updateLabelMap = useStableCallback(callback => {
     labelMap.current = callback(labelMap.current);
   });
   const itemMetaLookup = useStore(store, itemsSelectors.itemMetaLookup);
@@ -85,7 +85,7 @@ export const useTreeViewKeyboardNavigation = ({
     typeaheadQueryRef.current = '';
     return null;
   };
-  const canToggleItemSelection = itemId => selectionSelectors.enabled(store.state) && !itemsSelectors.isItemDisabled(store.state, itemId);
+  const canToggleItemSelection = itemId => selectionSelectors.canItemBeSelected(store.state, itemId);
   const canToggleItemExpansion = itemId => {
     return !itemsSelectors.isItemDisabled(store.state, itemId) && expansionSelectors.isItemExpandable(store.state, itemId);
   };

package/esm/internals/plugins/useTreeViewLabel/useTreeViewLabel.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { useIsoLayoutEffect } from '@base-ui-components/utils/useIsoLayoutEffect';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useTreeViewLabelItemPlugin } from "./itemPlugin.js";
 import { labelSelectors } from "./useTreeViewLabel.selectors.js";
 export const useTreeViewLabel = ({

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

@@ -44,9 +44,9 @@ export const useTreeViewSelectionItemPlugin = ({
     store
   } = useTreeViewContext();
   const isCheckboxSelectionEnabled = useStore(store, selectionSelectors.isCheckboxSelectionEnabled);
-  const isItemSelectionEnabled = useStore(store, selectionSelectors.canItemBeSelected, itemId);
+  const isFeatureEnabledForItem = useStore(store, selectionSelectors.isFeatureEnabledForItem, itemId);
+  const canItemBeSelected = useStore(store, selectionSelectors.canItemBeSelected, itemId);
   const selectionStatus = useStore(store, selectorCheckboxSelectionStatus, itemId);
-  const isSelectionEnabledForItem = useStore(store, selectionSelectors.canItemBeSelected, itemId);
   return {
     propsEnhancers: {
       root: () => {
@@ -57,7 +57,7 @@ export 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 {
@@ -85,8 +85,8 @@ export const useTreeViewSelectionItemPlugin = ({
         return {
           tabIndex: -1,
           onChange: handleChange,
-          visible: isCheckboxSelectionEnabled,
-          disabled: !isItemSelectionEnabled,
+          visible: isCheckboxSelectionEnabled && isFeatureEnabledForItem,
+          disabled: !canItemBeSelected,
           checked: selectionStatus === 'checked',
           indeterminate: selectionStatus === 'indeterminate'
         };

package/esm/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -1,10 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useAssertModelConsistency } from '@mui/x-internals/useAssertModelConsistency';
-import { useIsoLayoutEffect } from '@base-ui-components/utils/useIsoLayoutEffect';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { findOrderInTremauxTree, getAllNavigableItems, getFirstNavigableItem, getLastNavigableItem, getNonDisabledItemsInRange } from "../../utils/tree.js";
 import { propagateSelection, getAddedAndRemovedItems, getLookupFromArray } from "./useTreeViewSelection.utils.js";
 import { selectionSelectors } from "./useTreeViewSelection.selectors.js";
+import { itemsSelectors } from "../useTreeViewItems/useTreeViewItems.selectors.js";
 import { useTreeViewSelectionItemPlugin } from "./itemPlugin.js";
 export const useTreeViewSelection = ({
   store,
@@ -115,7 +116,7 @@ export const useTreeViewSelection = ({
 
     // 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(store.state, start, end);
+    const range = getNonDisabledItemsInRange(store.state, start, end).filter(id => itemsSelectors.isItemSelectable(store.state, id));
     const itemsToAddToModel = range.filter(id => !selectedItemsLookup[id]);
     newSelectedItems = newSelectedItems.concat(itemsToAddToModel);
     setSelectedItems(event, newSelectedItems);

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

@@ -34,7 +34,12 @@ export declare const selectionSelectors: {
    */
   isItemSelected: (args_0: import("../../corePlugins/useTreeViewId/useTreeViewId.types.js").UseTreeViewIdState & import("./useTreeViewSelection.types.js").UseTreeViewSelectionState & Partial<{}>, itemId: string) => boolean;
   /**
-   * 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).
+   */
+  isFeatureEnabledForItem: (args_0: import("../../corePlugins/useTreeViewId/useTreeViewId.types.js").UseTreeViewIdState & import("./useTreeViewSelection.types.js").UseTreeViewSelectionState & Partial<{}>, _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: import("../../corePlugins/useTreeViewId/useTreeViewId.types.js").UseTreeViewIdState & import("./useTreeViewSelection.types.js").UseTreeViewSelectionState & Partial<{}>, _itemId: string) => boolean;
 };

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

@@ -50,7 +50,12 @@ export const selectionSelectors = {
    */
   isItemSelected: 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: createSelector(itemsSelectors.isItemDisabled, state => state.selection.isEnabled, (isItemDisabled, isSelectionEnabled, _itemId) => isSelectionEnabled && !isItemDisabled)
+  isFeatureEnabledForItem: createSelector(itemsSelectors.isItemSelectable, state => state.selection.isEnabled, (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)
 };

package/esm/internals/useTreeView/useTreeView.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useRefWithInit } from '@base-ui-components/utils/useRefWithInit';
+import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
 import { Store } from '@mui/x-internals/store';
-import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs';
+import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
 import { TREE_VIEW_CORE_PLUGINS } from "../corePlugins/index.js";
 import { useExtractPluginParamsFromProps } from "./useExtractPluginParamsFromProps.js";
 import { useTreeViewBuildContext } from "./useTreeViewBuildContext.js";

package/esm/useTreeItem/useTreeItem.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useStore } from '@mui/x-internals/store';
 import extractEventHandlers from '@mui/utils/extractEventHandlers';
-import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs';
+import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
 import { useTreeViewContext } from "../internals/TreeViewProvider/index.js";
 import { useTreeItemUtils } from "../hooks/useTreeItemUtils/index.js";
 import { TreeViewItemDepthContext } from "../internals/TreeViewItemDepthContext/index.js";

package/esm/useTreeItem/useTreeItem.types.d.ts

@@ -18,6 +18,11 @@ export interface UseTreeItemParameters {
    * @default false
    */
   disabled?: boolean;
+  /**
+   * If `true`, the item cannot be selected.
+   * @default false
+   */
+  disableSelection?: boolean;
   /**
    * The id of the item.
    * Must be unique.

package/hooks/useApplyPropagationToSelectedItemsOnMount.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useApplyPropagationToSelectedItemsOnMount = useApplyPropagationToSelectedItemsOnMount;
-var _useRefWithInit = require("@base-ui-components/utils/useRefWithInit");
+var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
 var _useTreeViewSelection = require("../internals/plugins/useTreeViewSelection/useTreeViewSelection.utils");
 const defaultGetItemId = item => item.id;
 const defaultGetItemChildren = item => item.children;

package/hooks/useTreeItemUtils/useTreeItemUtils.js

@@ -79,7 +79,7 @@ const useTreeItemUtils = ({
     }
   };
   const handleSelection = event => {
-    if (status.disabled) {
+    if (!_useTreeViewSelection.selectionSelectors.canItemBeSelected(store.state, itemId)) {
       return;
     }
     if (!status.focused && !status.editing) {

package/hooks/useTreeViewApiRef.d.ts

@@ -3,6 +3,6 @@ import { TreeViewAnyPluginSignature, TreeViewPublicAPI } from "../internals/mode
 import { RichTreeViewPluginSignatures } from "../RichTreeView/RichTreeView.plugins.js";
 /**
  * Hook that instantiates a [[TreeViewApiRef]].
- * @deprecated Use `useRichTreeViewApiRef`, `useRichTreeViewProApiRef` or `useSimpleTreeViewApiRef` instead.
+ * @deprecated Use `useRichTreeViewApiRef()`, `useRichTreeViewProApiRef()` or `useSimpleTreeViewApiRef()` instead.
  */
 export declare const useTreeViewApiRef: <TSignatures extends readonly TreeViewAnyPluginSignature[] = RichTreeViewPluginSignatures>() => React.RefObject<TreeViewPublicAPI<TSignatures> | undefined>;

package/hooks/useTreeViewApiRef.js

@@ -9,7 +9,7 @@ exports.useTreeViewApiRef = void 0;
 var React = _interopRequireWildcard(require("react"));
 /**
  * Hook that instantiates a [[TreeViewApiRef]].
- * @deprecated Use `useRichTreeViewApiRef`, `useRichTreeViewProApiRef` or `useSimpleTreeViewApiRef` instead.
+ * @deprecated Use `useRichTreeViewApiRef()`, `useRichTreeViewProApiRef()` or `useSimpleTreeViewApiRef()` instead.
  */
 const useTreeViewApiRef = () => React.useRef(undefined);
 exports.useTreeViewApiRef = useTreeViewApiRef;

package/index.js

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

package/internals/models/treeView.d.ts

@@ -8,6 +8,7 @@ export interface TreeViewItemMeta {
   parentId: string | null;
   expandable: boolean;
   disabled: boolean;
+  selectable: boolean;
   /**
    * Only defined for `<RichTreeView />` and `<RichTreeViewPro />`.
    */

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTreeViewExpansion = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _useAssertModelConsistency = require("@mui/x-internals/useAssertModelConsistency");
-var _useEventCallback = require("@base-ui-components/utils/useEventCallback");
-var _useIsoLayoutEffect = require("@base-ui-components/utils/useIsoLayoutEffect");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useTreeViewExpansion = require("./useTreeViewExpansion.selectors");
 var _useTreeViewExpansion2 = require("./useTreeViewExpansion.utils");
 var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
@@ -44,10 +44,10 @@ const useTreeViewExpansion = ({
     }
     params.onExpandedItemsChange?.(event, value);
   };
-  const resetItemExpansion = (0, _useEventCallback.useEventCallback)(() => {
+  const resetItemExpansion = (0, _useStableCallback.useStableCallback)(() => {
     setExpandedItems(null, []);
   });
-  const applyItemExpansion = (0, _useEventCallback.useEventCallback)(({
+  const applyItemExpansion = (0, _useStableCallback.useStableCallback)(({
     itemId,
     event,
     shouldBeExpanded
@@ -64,7 +64,7 @@ const useTreeViewExpansion = ({
     }
     setExpandedItems(event, newExpanded);
   });
-  const setItemExpansion = (0, _useEventCallback.useEventCallback)(({
+  const setItemExpansion = (0, _useStableCallback.useStableCallback)(({
     itemId,
     event = null,
     shouldBeExpanded
@@ -90,7 +90,7 @@ const useTreeViewExpansion = ({
       shouldBeExpanded: cleanShouldBeExpanded
     });
   });
-  const isItemExpanded = (0, _useEventCallback.useEventCallback)(itemId => {
+  const isItemExpanded = (0, _useStableCallback.useStableCallback)(itemId => {
     return _useTreeViewExpansion.expansionSelectors.isItemExpanded(store.state, itemId);
   });
   const expandAllSiblings = (event, itemId) => {

package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTreeViewFocus = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _useEventCallback = require("@base-ui-components/utils/useEventCallback");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _store = require("@mui/x-internals/store");
 var _useTreeViewFocus = require("./useTreeViewFocus.selectors");
 var _useTreeViewExpansion = require("../useTreeViewExpansion/useTreeViewExpansion.selectors");
@@ -16,7 +16,7 @@ const useTreeViewFocus = ({
   params,
   store
 }) => {
-  const setFocusedItemId = (0, _useEventCallback.useEventCallback)(itemId => {
+  const setFocusedItemId = (0, _useStableCallback.useStableCallback)(itemId => {
     const focusedItemId = _useTreeViewFocus.focusSelectors.focusedItemId(store.state);
     if (focusedItemId === itemId) {
       return;
@@ -39,13 +39,13 @@ const useTreeViewFocus = ({
       params.onItemFocus(event, itemId);
     }
   };
-  const focusItem = (0, _useEventCallback.useEventCallback)((event, itemId) => {
+  const focusItem = (0, _useStableCallback.useStableCallback)((event, itemId) => {
     // If we receive an itemId, and it is visible, the focus will be set to it
     if (isItemVisible(itemId)) {
       innerFocusItem(event, itemId);
     }
   });
-  const removeFocusedItem = (0, _useEventCallback.useEventCallback)(() => {
+  const removeFocusedItem = (0, _useStableCallback.useStableCallback)(() => {
     const focusedItemId = _useTreeViewFocus.focusSelectors.focusedItemId(store.state);
     if (focusedItemId == null) {
       return;

package/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -9,13 +9,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTreeViewItems = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _useEventCallback = require("@base-ui-components/utils/useEventCallback");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useTreeViewItems = require("./useTreeViewItems.utils");
 var _TreeViewItemDepthContext = require("../../TreeViewItemDepthContext");
 var _useTreeViewItems2 = require("./useTreeViewItems.selectors");
 var _useTreeViewId = require("../../corePlugins/useTreeViewId");
 var _useTreeViewId2 = require("../../corePlugins/useTreeViewId/useTreeViewId.utils");
 var _jsxRuntime = require("react/jsx-runtime");
+const defaultIsItemSelectionDisabled = item => item.disableSelection === true;
 const useTreeViewItems = ({
   instance,
   params,
@@ -23,16 +24,17 @@ const useTreeViewItems = ({
 }) => {
   const itemsConfig = React.useMemo(() => ({
     isItemDisabled: params.isItemDisabled,
+    isItemSelectionDisabled: params.isItemSelectionDisabled,
     getItemLabel: params.getItemLabel,
     getItemChildren: params.getItemChildren,
     getItemId: params.getItemId
-  }), [params.isItemDisabled, params.getItemLabel, params.getItemChildren, params.getItemId]);
+  }), [params.isItemDisabled, params.isItemSelectionDisabled, params.getItemLabel, params.getItemChildren, params.getItemId]);
   const getItem = React.useCallback(itemId => _useTreeViewItems2.itemsSelectors.itemModel(store.state, itemId), [store]);
   const getParentId = React.useCallback(itemId => {
     const itemMeta = _useTreeViewItems2.itemsSelectors.itemMeta(store.state, itemId);
     return itemMeta?.parentId || null;
   }, [store]);
-  const setIsItemDisabled = (0, _useEventCallback.useEventCallback)(({
+  const setIsItemDisabled = (0, _useStableCallback.useStableCallback)(({
     itemId,
     shouldBeDisabled
   }) => {
@@ -111,7 +113,7 @@ const useTreeViewItems = ({
     };
     store.set('items', (0, _extends2.default)({}, store.state.items, lookups));
   };
-  const removeChildren = (0, _useEventCallback.useEventCallback)(parentId => {
+  const removeChildren = (0, _useStableCallback.useStableCallback)(parentId => {
     const newMetaMap = Object.keys(store.state.items.itemMetaLookup).reduce((acc, key) => {
       const item = store.state.items.itemMetaLookup[key];
       if (item.parentId === parentId) {
@@ -132,7 +134,7 @@ const useTreeViewItems = ({
       itemChildrenIndexesLookup: newItemChildrenIndexesLookup
     }));
   });
-  const addExpandableItems = (0, _useEventCallback.useEventCallback)(items => {
+  const addExpandableItems = (0, _useStableCallback.useStableCallback)(items => {
     const newItemMetaLookup = (0, _extends2.default)({}, store.state.items.itemMetaLookup);
     for (const itemId of items) {
       newItemMetaLookup[itemId] = (0, _extends2.default)({}, newItemMetaLookup[itemId], {
@@ -155,8 +157,8 @@ const useTreeViewItems = ({
     store.set('items', (0, _extends2.default)({}, store.state.items, newState));
   }, [instance, store, params.items, params.disabledItemsFocusable, itemsConfig]);
 
-  // Wrap `props.onItemClick` with `useEventCallback` to prevent unneeded context updates.
-  const handleItemClick = (0, _useEventCallback.useEventCallback)((event, itemId) => {
+  // Wrap `props.onItemClick` with `useStableCallback` to prevent unneeded context updates.
+  const handleItemClick = (0, _useStableCallback.useStableCallback)((event, itemId) => {
     if (params.onItemClick) {
       params.onItemClick(event, itemId);
     }
@@ -193,6 +195,7 @@ useTreeViewItems.getInitialState = params => ({
     disabledItemsFocusable: params.disabledItemsFocusable,
     config: {
       isItemDisabled: params.isItemDisabled,
+      isItemSelectionDisabled: params.isItemSelectionDisabled,
       getItemId: params.getItemId,
       getItemLabel: params.getItemLabel,
       getItemChildren: params.getItemChildren
@@ -203,7 +206,8 @@ useTreeViewItems.applyDefaultValuesToParams = ({
   params
 }) => (0, _extends2.default)({}, params, {
   disabledItemsFocusable: params.disabledItemsFocusable ?? false,
-  itemChildrenIndentation: params.itemChildrenIndentation ?? '12px'
+  itemChildrenIndentation: params.itemChildrenIndentation ?? '12px',
+  isItemSelectionDisabled: params.isItemSelectionDisabled ?? defaultIsItemSelectionDisabled
 });
 useTreeViewItems.wrapRoot = ({
   children
@@ -218,6 +222,7 @@ useTreeViewItems.params = {
   disabledItemsFocusable: true,
   items: true,
   isItemDisabled: true,
+  isItemSelectionDisabled: true,
   getItemLabel: true,
   getItemChildren: true,
   getItemId: true,

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

@@ -53,4 +53,8 @@ export declare const itemsSelectors: {
    * Checks whether an item can be focused.
    */
   canItemBeFocused: (state: TreeViewState<[UseTreeViewItemsSignature]>, itemId: string) => boolean;
+  /**
+   * Checks whether an item is selectable based on the `isItemSelectionDisabled` prop.
+   */
+  isItemSelectable: (state: TreeViewState<[UseTreeViewItemsSignature]>, itemId: string) => boolean;
 };

package/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js

@@ -62,5 +62,9 @@ const itemsSelectors = exports.itemsSelectors = {
   /**
    * Checks whether an item can be focused.
    */
-  canItemBeFocused: (0, _store.createSelector)((state, itemId) => state.items.disabledItemsFocusable || !(0, _useTreeViewItems.isItemDisabled)(state.items.itemMetaLookup, itemId))
+  canItemBeFocused: (0, _store.createSelector)((state, itemId) => state.items.disabledItemsFocusable || !(0, _useTreeViewItems.isItemDisabled)(state.items.itemMetaLookup, itemId)),
+  /**
+   * Checks whether an item is selectable based on the `isItemSelectionDisabled` prop.
+   */
+  isItemSelectable: (0, _store.createSelector)((state, itemId) => state.items.itemMetaLookup[itemId]?.selectable ?? true)
 };

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

@@ -100,6 +100,13 @@ export interface UseTreeViewItemsParameters<R extends {
    * @returns {boolean} `true` if the item should be disabled.
    */
   isItemDisabled?: (item: R) => boolean;
+  /**
+   * Used to determine if a given item should have selection disabled.
+   * @template R
+   * @param {R} item The item to check.
+   * @returns {boolean} `true` if the item should have selection disabled.
+   */
+  isItemSelectionDisabled?: (item: R) => boolean;
   /**
    * Used to determine the string label for a given item.
    *

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

@@ -45,5 +45,5 @@ interface BuildItemsLookupsParameters {
     [itemId: string]: TreeViewItemMeta;
   };
 }
-export interface BuildItemsLookupConfig extends Pick<UseTreeViewItemsParametersWithDefaults<TreeViewBaseItem>, 'isItemDisabled' | 'getItemLabel' | 'getItemChildren' | 'getItemId'> {}
+export interface BuildItemsLookupConfig extends Pick<UseTreeViewItemsParametersWithDefaults<TreeViewBaseItem>, 'isItemDisabled' | 'isItemSelectionDisabled' | 'getItemLabel' | 'getItemChildren' | 'getItemId'> {}
 export {};

package/internals/plugins/useTreeViewItems/useTreeViewItems.utils.js

@@ -131,6 +131,7 @@ function buildItemsLookups(parameters) {
       idAttribute: undefined,
       expandable: isItemExpandable(item, children),
       disabled: config.isItemDisabled ? config.isItemDisabled(item) : false,
+      selectable: config.isItemSelectionDisabled ? !config.isItemSelectionDisabled(item) : true,
       depth
     };
     orderedChildrenIds.push(id);

package/internals/plugins/useTreeViewJSXItems/itemPlugin.js

@@ -8,8 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTreeViewJSXItemsItemPlugin = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _store = require("@mui/x-internals/store");
-var _useMergedRefs = require("@base-ui-components/utils/useMergedRefs");
-var _useIsoLayoutEffect = require("@base-ui-components/utils/useIsoLayoutEffect");
+var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
+var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _TreeViewProvider = require("../../TreeViewProvider");
 var _TreeViewChildrenItemProvider = require("../../TreeViewProvider/TreeViewChildrenItemProvider");
 var _useTreeItemUtils = require("../../../hooks/useTreeItemUtils/useTreeItemUtils");
@@ -27,6 +27,7 @@ const useTreeViewJSXItemsItemPlugin = ({
   const {
     children,
     disabled = false,
+    disableSelection = false,
     label,
     itemId,
     id
@@ -64,9 +65,10 @@ const useTreeViewJSXItemsItemPlugin = ({
       idAttribute: id,
       parentId,
       expandable,
-      disabled
+      disabled,
+      selectable: !disableSelection
     });
-  }, [instance, parentId, itemId, expandable, disabled, id]);
+  }, [instance, parentId, itemId, expandable, disabled, disableSelection, id]);
   React.useEffect(() => {
     if (label) {
       return instance.mapLabelFromJSX(itemId, (pluginContentRef.current?.textContent ?? '').toLowerCase());

package/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTreeViewJSXItems = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _useEventCallback = require("@base-ui-components/utils/useEventCallback");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _TreeViewChildrenItemProvider = require("../../TreeViewProvider/TreeViewChildrenItemProvider");
 var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.utils");
 var _TreeViewItemDepthContext = require("../../TreeViewItemDepthContext");
@@ -20,7 +20,7 @@ const useTreeViewJSXItems = ({
   store
 }) => {
   instance.preventItemUpdates();
-  const insertJSXItem = (0, _useEventCallback.useEventCallback)(item => {
+  const insertJSXItem = (0, _useStableCallback.useStableCallback)(item => {
     if (store.state.items.itemMetaLookup[item.id] != null) {
       throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', `Two items were provided with the same id in the \`items\` prop: "${item.id}"`].join('\n'));
     }
@@ -58,7 +58,7 @@ const useTreeViewJSXItems = ({
       })
     }));
   };
-  const mapLabelFromJSX = (0, _useEventCallback.useEventCallback)((itemId, label) => {
+  const mapLabelFromJSX = (0, _useStableCallback.useStableCallback)((itemId, label) => {
     instance.updateLabelMap(labelMap => {
       labelMap[itemId] = label;
       return labelMap;

package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -9,8 +9,8 @@ exports.useTreeViewKeyboardNavigation = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _store = require("@mui/x-internals/store");
 var _RtlProvider = require("@mui/system/RtlProvider");
-var _useTimeout = require("@base-ui-components/utils/useTimeout");
-var _useEventCallback = require("@base-ui-components/utils/useEventCallback");
+var _useTimeout = require("@base-ui/utils/useTimeout");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _tree = require("../../utils/tree");
 var _plugins = require("../../utils/plugins");
 var _useTreeViewLabel = require("../useTreeViewLabel");
@@ -31,7 +31,7 @@ const useTreeViewKeyboardNavigation = ({
   const labelMap = React.useRef({});
   const typeaheadQueryRef = React.useRef('');
   const typeaheadTimeout = (0, _useTimeout.useTimeout)();
-  const updateLabelMap = (0, _useEventCallback.useEventCallback)(callback => {
+  const updateLabelMap = (0, _useStableCallback.useStableCallback)(callback => {
     labelMap.current = callback(labelMap.current);
   });
   const itemMetaLookup = (0, _store.useStore)(store, _useTreeViewItems.itemsSelectors.itemMetaLookup);
@@ -91,7 +91,7 @@ const useTreeViewKeyboardNavigation = ({
     typeaheadQueryRef.current = '';
     return null;
   };
-  const canToggleItemSelection = itemId => _useTreeViewSelection.selectionSelectors.enabled(store.state) && !_useTreeViewItems.itemsSelectors.isItemDisabled(store.state, itemId);
+  const canToggleItemSelection = itemId => _useTreeViewSelection.selectionSelectors.canItemBeSelected(store.state, itemId);
   const canToggleItemExpansion = itemId => {
     return !_useTreeViewItems.itemsSelectors.isItemDisabled(store.state, itemId) && _useTreeViewExpansion.expansionSelectors.isItemExpandable(store.state, itemId);
   };

package/internals/plugins/useTreeViewLabel/useTreeViewLabel.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTreeViewLabel = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _useIsoLayoutEffect = require("@base-ui-components/utils/useIsoLayoutEffect");
+var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _itemPlugin = require("./itemPlugin");
 var _useTreeViewLabel = require("./useTreeViewLabel.selectors");
 const useTreeViewLabel = ({

package/internals/plugins/useTreeViewSelection/itemPlugin.js

@@ -50,9 +50,9 @@ const useTreeViewSelectionItemPlugin = ({
     store
   } = (0, _TreeViewProvider.useTreeViewContext)();
   const isCheckboxSelectionEnabled = (0, _store.useStore)(store, _useTreeViewSelection.selectionSelectors.isCheckboxSelectionEnabled);
-  const isItemSelectionEnabled = (0, _store.useStore)(store, _useTreeViewSelection.selectionSelectors.canItemBeSelected, itemId);
+  const isFeatureEnabledForItem = (0, _store.useStore)(store, _useTreeViewSelection.selectionSelectors.isFeatureEnabledForItem, itemId);
+  const canItemBeSelected = (0, _store.useStore)(store, _useTreeViewSelection.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 {
@@ -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'
         };

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -9,10 +9,11 @@ exports.useTreeViewSelection = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useAssertModelConsistency = require("@mui/x-internals/useAssertModelConsistency");
-var _useIsoLayoutEffect = require("@base-ui-components/utils/useIsoLayoutEffect");
+var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _tree = require("../../utils/tree");
 var _useTreeViewSelection = require("./useTreeViewSelection.utils");
 var _useTreeViewSelection2 = require("./useTreeViewSelection.selectors");
+var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
 var _itemPlugin = require("./itemPlugin");
 const useTreeViewSelection = ({
   store,
@@ -123,7 +124,7 @@ const useTreeViewSelection = ({
 
     // Add to the model the items that are part of the new range and not already part of the model.
     const selectedItemsLookup = (0, _useTreeViewSelection.getLookupFromArray)(newSelectedItems);
-    const range = (0, _tree.getNonDisabledItemsInRange)(store.state, start, end);
+    const range = (0, _tree.getNonDisabledItemsInRange)(store.state, start, end).filter(id => _useTreeViewItems.itemsSelectors.isItemSelectable(store.state, id));
     const itemsToAddToModel = range.filter(id => !selectedItemsLookup[id]);
     newSelectedItems = newSelectedItems.concat(itemsToAddToModel);
     setSelectedItems(event, newSelectedItems);