@mui/x-tree-view 8.21.0 → 8.23.0

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { useAssertModelConsistency } from '@mui/x-internals/useAssertModelConsistency';
-import { useEventCallback } from '@base-ui-components/utils/useEventCallback';
-import { useIsoLayoutEffect } from '@base-ui-components/utils/useIsoLayoutEffect';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { expansionSelectors } from "./useTreeViewExpansion.selectors.js";
 import { getExpansionTrigger } from "./useTreeViewExpansion.utils.js";
 import { itemsSelectors } from "../useTreeViewItems/useTreeViewItems.selectors.js";
@@ -37,10 +37,10 @@ export const useTreeViewExpansion = ({
     }
     params.onExpandedItemsChange?.(event, value);
   };
-  const resetItemExpansion = useEventCallback(() => {
+  const resetItemExpansion = useStableCallback(() => {
     setExpandedItems(null, []);
   });
-  const applyItemExpansion = useEventCallback(({
+  const applyItemExpansion = useStableCallback(({
     itemId,
     event,
     shouldBeExpanded
@@ -57,7 +57,7 @@ export const useTreeViewExpansion = ({
     }
     setExpandedItems(event, newExpanded);
   });
-  const setItemExpansion = useEventCallback(({
+  const setItemExpansion = useStableCallback(({
     itemId,
     event = null,
     shouldBeExpanded
@@ -83,7 +83,7 @@ export const useTreeViewExpansion = ({
       shouldBeExpanded: cleanShouldBeExpanded
     });
   });
-  const isItemExpanded = useEventCallback(itemId => {
+  const isItemExpanded = useStableCallback(itemId => {
     return expansionSelectors.isItemExpanded(store.state, itemId);
   });
   const expandAllSiblings = (event, itemId) => {

package/esm/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { useEventCallback } from '@base-ui-components/utils/useEventCallback';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useStoreEffect } from '@mui/x-internals/store';
 import { focusSelectors } from "./useTreeViewFocus.selectors.js";
 import { expansionSelectors } from "../useTreeViewExpansion/useTreeViewExpansion.selectors.js";
@@ -9,7 +9,7 @@ export const useTreeViewFocus = ({
   params,
   store
 }) => {
-  const setFocusedItemId = useEventCallback(itemId => {
+  const setFocusedItemId = useStableCallback(itemId => {
     const focusedItemId = focusSelectors.focusedItemId(store.state);
     if (focusedItemId === itemId) {
       return;
@@ -32,13 +32,13 @@ export const useTreeViewFocus = ({
       params.onItemFocus(event, itemId);
     }
   };
-  const focusItem = useEventCallback((event, itemId) => {
+  const focusItem = 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 = useEventCallback(() => {
+  const removeFocusedItem = useStableCallback(() => {
     const focusedItemId = focusSelectors.focusedItemId(store.state);
     if (focusedItemId == null) {
       return;

package/esm/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -2,13 +2,14 @@
 
 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 { buildItemsLookups, buildItemsState, TREE_VIEW_ROOT_PARENT_ID } from "./useTreeViewItems.utils.js";
 import { TreeViewItemDepthContext } from "../../TreeViewItemDepthContext/index.js";
 import { itemsSelectors } from "./useTreeViewItems.selectors.js";
 import { idSelectors } from "../../corePlugins/useTreeViewId/index.js";
 import { generateTreeItemIdAttribute } from "../../corePlugins/useTreeViewId/useTreeViewId.utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const defaultIsItemSelectionDisabled = item => item.disableSelection === true;
 export const useTreeViewItems = ({
   instance,
   params,
@@ -16,16 +17,17 @@ export 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 => itemsSelectors.itemModel(store.state, itemId), [store]);
   const getParentId = React.useCallback(itemId => {
     const itemMeta = itemsSelectors.itemMeta(store.state, itemId);
     return itemMeta?.parentId || null;
   }, [store]);
-  const setIsItemDisabled = useEventCallback(({
+  const setIsItemDisabled = useStableCallback(({
     itemId,
     shouldBeDisabled
   }) => {
@@ -104,7 +106,7 @@ export const useTreeViewItems = ({
     };
     store.set('items', _extends({}, store.state.items, lookups));
   };
-  const removeChildren = useEventCallback(parentId => {
+  const removeChildren = useStableCallback(parentId => {
     const newMetaMap = Object.keys(store.state.items.itemMetaLookup).reduce((acc, key) => {
       const item = store.state.items.itemMetaLookup[key];
       if (item.parentId === parentId) {
@@ -125,7 +127,7 @@ export const useTreeViewItems = ({
       itemChildrenIndexesLookup: newItemChildrenIndexesLookup
     }));
   });
-  const addExpandableItems = useEventCallback(items => {
+  const addExpandableItems = useStableCallback(items => {
     const newItemMetaLookup = _extends({}, store.state.items.itemMetaLookup);
     for (const itemId of items) {
       newItemMetaLookup[itemId] = _extends({}, newItemMetaLookup[itemId], {
@@ -148,8 +150,8 @@ export const useTreeViewItems = ({
     store.set('items', _extends({}, store.state.items, newState));
   }, [instance, store, params.items, params.disabledItemsFocusable, itemsConfig]);
 
-  // Wrap `props.onItemClick` with `useEventCallback` to prevent unneeded context updates.
-  const handleItemClick = useEventCallback((event, itemId) => {
+  // Wrap `props.onItemClick` with `useStableCallback` to prevent unneeded context updates.
+  const handleItemClick = useStableCallback((event, itemId) => {
     if (params.onItemClick) {
       params.onItemClick(event, itemId);
     }
@@ -185,6 +187,7 @@ useTreeViewItems.getInitialState = params => ({
     disabledItemsFocusable: params.disabledItemsFocusable,
     config: {
       isItemDisabled: params.isItemDisabled,
+      isItemSelectionDisabled: params.isItemSelectionDisabled,
       getItemId: params.getItemId,
       getItemLabel: params.getItemLabel,
       getItemChildren: params.getItemChildren
@@ -195,7 +198,8 @@ useTreeViewItems.applyDefaultValuesToParams = ({
   params
 }) => _extends({}, params, {
   disabledItemsFocusable: params.disabledItemsFocusable ?? false,
-  itemChildrenIndentation: params.itemChildrenIndentation ?? '12px'
+  itemChildrenIndentation: params.itemChildrenIndentation ?? '12px',
+  isItemSelectionDisabled: params.isItemSelectionDisabled ?? defaultIsItemSelectionDisabled
 });
 useTreeViewItems.wrapRoot = ({
   children
@@ -210,6 +214,7 @@ useTreeViewItems.params = {
   disabledItemsFocusable: true,
   items: true,
   isItemDisabled: true,
+  isItemSelectionDisabled: true,
   getItemLabel: true,
   getItemChildren: true,
   getItemId: true,

package/esm/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/esm/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js

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

package/esm/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/esm/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/esm/internals/plugins/useTreeViewItems/useTreeViewItems.utils.js

@@ -120,6 +120,7 @@ export 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/esm/internals/plugins/useTreeViewJSXItems/itemPlugin.js

@@ -2,8 +2,8 @@
 
 import * as React from 'react';
 import { useStore } from '@mui/x-internals/store';
-import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs';
-import { useIsoLayoutEffect } from '@base-ui-components/utils/useIsoLayoutEffect';
+import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useTreeViewContext } from "../../TreeViewProvider/index.js";
 import { TreeViewChildrenItemContext } from "../../TreeViewProvider/TreeViewChildrenItemProvider.js";
 import { itemHasChildren } from "../../../hooks/useTreeItemUtils/useTreeItemUtils.js";
@@ -21,6 +21,7 @@ export const useTreeViewJSXItemsItemPlugin = ({
   const {
     children,
     disabled = false,
+    disableSelection = false,
     label,
     itemId,
     id
@@ -58,9 +59,10 @@ export 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/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/useTreeViewLazyLoading/useTreeViewLazyLoading.types.d.ts

@@ -30,10 +30,10 @@ export interface UseTreeViewLazyLoadingPublicAPI {
    * Method used for updating an item's children.
    * Only relevant for lazy-loaded tree views.
    *
-   * @param {TreeViewItemId} itemId The The id of the item to update the children of.
+   * @param {TreeViewItemId | null} itemId The id of the item to update the children of. If null is passed, it will update the root's children.
    * @returns {Promise<void>} The promise resolved when the items are fetched.
    */
-  updateItemChildren: (itemId: TreeViewItemId) => Promise<void>;
+  updateItemChildren: (itemId: TreeViewItemId | null) => Promise<void>;
 }
 export interface UseTreeViewLazyLoadingInstance extends UseTreeViewLazyLoadingPublicAPI {
   /**

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/models/items.d.ts

@@ -4,9 +4,12 @@ export type TreeViewDefaultItemModelProperties = {
   label: string;
   children?: TreeViewDefaultItemModelProperties[];
 };
-export type TreeViewBaseItem<R extends {} = TreeViewDefaultItemModelProperties> = R & {
+export type TreeViewBaseItem<R extends object = TreeViewDefaultItemModelProperties> = R & {
   children?: TreeViewBaseItem<R>[];
 };
+export type TreeViewValidItem<R extends object> = {
+  children?: R[];
+};
 export type TreeViewItemsReorderingAction = 'reorder-above' | 'reorder-below' | 'make-child' | 'move-to-parent';
 export interface TreeViewSelectionPropagation {
   descendants?: boolean;

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/index.d.ts

@@ -1,4 +1,6 @@
-export { useTreeViewApiRef } from "./useTreeViewApiRef.js";
 export { useTreeItemUtils } from "./useTreeItemUtils/index.js";
 export { useTreeItemModel } from "./useTreeItemModel.js";
-export { useApplyPropagationToSelectedItemsOnMount } from "./useApplyPropagationToSelectedItemsOnMount.js";
+export { useApplyPropagationToSelectedItemsOnMount } from "./useApplyPropagationToSelectedItemsOnMount.js";
+export { useTreeViewApiRef } from "./useTreeViewApiRef.js";
+export { useRichTreeViewApiRef } from "./useRichTreeViewApiRef.js";
+export { useSimpleTreeViewApiRef } from "./useSimpleTreeViewApiRef.js";

package/hooks/index.js

@@ -9,6 +9,18 @@ Object.defineProperty(exports, "useApplyPropagationToSelectedItemsOnMount", {
     return _useApplyPropagationToSelectedItemsOnMount.useApplyPropagationToSelectedItemsOnMount;
   }
 });
+Object.defineProperty(exports, "useRichTreeViewApiRef", {
+  enumerable: true,
+  get: function () {
+    return _useRichTreeViewApiRef.useRichTreeViewApiRef;
+  }
+});
+Object.defineProperty(exports, "useSimpleTreeViewApiRef", {
+  enumerable: true,
+  get: function () {
+    return _useSimpleTreeViewApiRef.useSimpleTreeViewApiRef;
+  }
+});
 Object.defineProperty(exports, "useTreeItemModel", {
   enumerable: true,
   get: function () {
@@ -27,7 +39,9 @@ Object.defineProperty(exports, "useTreeViewApiRef", {
     return _useTreeViewApiRef.useTreeViewApiRef;
   }
 });
-var _useTreeViewApiRef = require("./useTreeViewApiRef");
 var _useTreeItemUtils = require("./useTreeItemUtils");
 var _useTreeItemModel = require("./useTreeItemModel");
-var _useApplyPropagationToSelectedItemsOnMount = require("./useApplyPropagationToSelectedItemsOnMount");
+var _useApplyPropagationToSelectedItemsOnMount = require("./useApplyPropagationToSelectedItemsOnMount");
+var _useTreeViewApiRef = require("./useTreeViewApiRef");
+var _useRichTreeViewApiRef = require("./useRichTreeViewApiRef");
+var _useSimpleTreeViewApiRef = require("./useSimpleTreeViewApiRef");

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/useRichTreeViewApiRef.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { TreeViewDefaultItemModelProperties, TreeViewValidItem } from "../models/index.js";
+import { TreeViewPublicAPI } from "../internals/models/index.js";
+import { RichTreeViewPluginSignatures } from "../RichTreeView/RichTreeView.plugins.js";
+/**
+ * Creates the ref to pass to the `apiRef` prop of the `RichTreeView` component.
+ */
+export declare function useRichTreeViewApiRef<R extends TreeViewValidItem<R> = TreeViewDefaultItemModelProperties>(): React.RefObject<TreeViewPublicAPI<RichTreeViewPluginSignatures> | undefined>;

package/hooks/useRichTreeViewApiRef.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRichTreeViewApiRef = useRichTreeViewApiRef;
+var React = _interopRequireWildcard(require("react"));
+/**
+ * Creates the ref to pass to the `apiRef` prop of the `RichTreeView` component.
+ */
+function useRichTreeViewApiRef() {
+  return React.useRef(undefined);
+}

package/hooks/useSimpleTreeViewApiRef.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { TreeViewDefaultItemModelProperties, TreeViewValidItem } from "../models/index.js";
+import { TreeViewPublicAPI } from "../internals/models/index.js";
+import { SimpleTreeViewPluginSignatures } from "../SimpleTreeView/SimpleTreeView.plugins.js";
+/**
+ * Creates the ref to pass to the `apiRef` prop of the `SimpleTreeView` component.
+ */
+export declare function useSimpleTreeViewApiRef<R extends TreeViewValidItem<R> = TreeViewDefaultItemModelProperties>(): React.RefObject<TreeViewPublicAPI<SimpleTreeViewPluginSignatures> | undefined>;

package/hooks/useSimpleTreeViewApiRef.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSimpleTreeViewApiRef = useSimpleTreeViewApiRef;
+var React = _interopRequireWildcard(require("react"));
+/**
+ * Creates the ref to pass to the `apiRef` prop of the `SimpleTreeView` component.
+ */
+function useSimpleTreeViewApiRef() {
+  return React.useRef(undefined);
+}

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,5 +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.
  */
 export declare const useTreeViewApiRef: <TSignatures extends readonly TreeViewAnyPluginSignature[] = RichTreeViewPluginSignatures>() => React.RefObject<TreeViewPublicAPI<TSignatures> | undefined>;

package/hooks/useTreeViewApiRef.js

@@ -9,6 +9,7 @@ exports.useTreeViewApiRef = void 0;
 var React = _interopRequireWildcard(require("react"));
 /**
  * Hook that instantiates a [[TreeViewApiRef]].
+ * @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.21.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 />`.
    */