@mui/x-tree-view 8.22.0 → 8.23.0

package/CHANGELOG.md

@@ -5,6 +5,208 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.23.0
+
+_Dec 23, 2025_
+
+We'd like to extend a big thank you to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🧮 Support Data Grid `size`, `size(true)`, and `size(false)` [aggregations for `'boolean'` column type](https://mui.com/x/react-data-grid/aggregation/#usage-with-row-grouping)
+- 🔎 Allow zooming a heatmap
+
+Special thanks go out to these community members for their valuable contributions:
+@henkerik, @sai6855
+
+The following team members contributed to this release:
+@alelthomas, @alexfauquette, @arminmeh, @bernardobelchior, @brijeshb42, @flaviendelangle, @JCQuintas, @mapache-salvaje, @MBilalShafi, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.23.0`
+
+- [DataGrid] Fix columns state and columns prop sync issue (#20703) @arminmeh
+- [DataGrid] Fix filter datetime with seconds (#20557) @siriwatknp
+- [DataGrid] Add new `includeHeaderFilters` flag to include header filters when autosizing columns (#20510) @siriwatknp
+- [DataGrid] Prevent default on `Enter` key down when starting editing (#20751) @siriwatknp
+- [l10n] Improve Portuguese from Portugal (pt-PT) locale (#20722) @Copilot
+
+#### `@mui/x-data-grid-pro@8.23.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.23.0`, plus:
+
+- [DataGridPro] Fix crash on rows change in tree data with pagination (#20215) @Copilot
+
+#### `@mui/x-data-grid-premium@8.23.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.23.0`, plus:
+
+- [DataGridPremium] Add aggregation for `'boolean'` column type (#20683) @arminmeh
+- [DataGridPremium] Fix strategy value computation with row grouping (#20725) @MBilalShafi
+- [DataGridPremium] Handle `isRowSelectable()` checks for the rows missing due to `keepNonExistentRowsSelected` (#20668) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.23.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.23.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.23.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.23.0`
+
+- [charts] Custom stack functions implementation (#20679) @JCQuintas
+- [charts] Extract keyboard focus navigation to the series config (#20693) @alexfauquette
+- [charts] Fix demo not wrapping in mobile (#20713) @JCQuintas
+- [charts] Fix missing dependencies in `x-charts-vendor` (#20685) @henkerik
+- [charts] Remove webkit test differences (#20707) @JCQuintas
+
+#### `@mui/x-charts-pro@8.23.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.23.0`, plus:
+
+- [charts-pro] Allow registering preview plots from higher tier packages (#20716) @bernardobelchior
+- [charts-pro] Fix erroneous behavior when adding/removing pointers from zoom&pan gestures (#20698) @JCQuintas
+- [charts-pro] Move heatmap highlight handling to plot component (#20701) @bernardobelchior
+- [charts-pro] Add zoom to heatmap (#20708) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.23.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@8.23.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.23.0`
+
+- [tree view] Add new APIs to disable selection feature for tree view item (#20666) @siriwatknp
+
+#### `@mui/x-tree-view-pro@8.23.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.23.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.23.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Clarify feature availability and relationship between Community and Pro/Premium docs (#20714) @mapache-salvaje
+- [docs] Copyedit Tree View docs and apply new component style rules (DX-19) (#20652) @mapache-salvaje
+- [docs] Fix `ColumnPinningDynamicRowHeight` demo (#20750) @sai6855
+- [docs] Clean up Charts docs sidebar (DX-97) (#20700) @alelthomas
+- [docs] Fix tick labels not being shown on a demo (#20718) @sai6855
+
+### Core
+
+- [code-infra] Bump prettier to 3.7.4 (#20709) @JCQuintas
+- [code-infra] Fix contributor generation logic in changelog script (#20705) @brijeshb42
+
+## 8.22.1
+
+_Dec 17, 2025_
+
+We'd like to extend a big thank you to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌎 Improve Swedish (sv-SE) locale on the Data Grid
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@KyeongJooni, @VismaAndreasIvarsson
+
+The following team members contributed to this release:
+@alelthomas, @alexfauquette, @arminmeh, @bernardobelchior, @Janpot, @JCQuintas, @mapache-salvaje, @michelengelen, @mj12albert, @prakhargupta1, @romgrk, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.22.1`
+
+- [data grid] Fix column menu keyboard shortcut (#20621) @mj12albert
+- [data grid] Fix row checkbox disabled state on first render and keep cell focusable (ARIA) (#20641) @michelengelen
+- [data grid] Fix tree data selection bug (#20528) @michelengelen
+- [data grid] Prevent clear cell selection on edit mode (#20544) @siriwatknp
+- [data grid] Refactor column merge logic to prioritize defined properties only (#20640) @michelengelen
+- [data grid] Reset row spanning on row expansion change (#20661) @siriwatknp
+- [data grid] Resize newly added rows while resize action is happening (#20676)
+- [l10n] Improve Swedish (sv-SE) locale (#20682) @VismaAndreasIvarsson
+
+#### `@mui/x-data-grid-pro@8.22.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.22.1`.
+
+#### `@mui/x-data-grid-premium@8.22.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.22.1`, plus:
+
+- [DataGridPremium] Import `useId()` from `@mui/utils` to maintain React 17 compatibility (#20635) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.22.1`
+
+- [pickers] Add minutesStep validation test (#20672) @KyeongJooni
+- [pickers] Fix `onAccept()` returning wrong year after selecting year then month (#20639) @michelengelen
+
+#### `@mui/x-date-pickers-pro@8.22.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.22.1`.
+
+### Charts
+
+#### `@mui/x-charts@8.22.1`
+
+- [charts] Extract `FocusedPieArc` from `PieArcPlot` (#20613) @alexfauquette
+- [charts] Fix regression on the highlight control (#20627) @alexfauquette
+- [charts] Refactor: `useSelector()` => `store.use()` (#20681) @romgrk
+- [charts] Remove duplicated types (#20694) @alexfauquette
+- [charts] Remove unused generics from bar charts (#20642) @bernardobelchior
+- [charts] Simplify tooltip position getter for pie chart (#20625) @alexfauquette
+
+#### `@mui/x-charts-pro@8.22.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.22.1`, plus:
+
+- [charts-pro] Add heatmap performance benchmark (#20695) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.22.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@8.22.1`, plus:
+
+- [charts-premium] Create `BarChartPremium` (#20643) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.22.1`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.22.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.22.1`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.22.1`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add button to GitHub source code for the Data Grid advanced demos (DX-50) (#20633) @alelthomas
+- [docs] Remove `seriesConfig` to prevent future confusion (#20678) @alexfauquette
+- [docs] Revise the Data Grid's API object doc for clarity and style (#20649) @mapache-salvaje
+- [docs] Update list of charts (#20479) @prakhargupta1
+
+### Core
+
+- [code-infra] Regression tests improvements (#20441) @Janpot
+- [code-infra] Test utils upgrade (#20592) @Janpot
+- [code-infra] Try to fix the Tree View flacky tests (#20573) @JCQuintas
+
 ## 8.22.0
 
 _Dec 11, 2025_

package/RichTreeView/RichTreeView.js

@@ -239,6 +239,13 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * @default () => false
    */
   isItemEditable: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.bool]),
+  /**
+   * 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: _propTypes.default.func,
   /**
    * Horizontal indentation between an item and its children.
    * Examples: 24, "24px", "2rem", "2em".

package/SimpleTreeView/SimpleTreeView.plugins.d.ts

@@ -6,4 +6,4 @@ import { UseTreeViewFocusParameters } from "../internals/plugins/useTreeViewFocu
 import { ConvertPluginsIntoSignatures } from "../internals/models/index.js";
 export declare const SIMPLE_TREE_VIEW_PLUGINS: readonly [import("../internals/index.js").TreeViewPlugin<import("../internals/index.js").UseTreeViewItemsSignature>, import("../internals/index.js").TreeViewPlugin<import("../internals/index.js").UseTreeViewExpansionSignature>, import("../internals/index.js").TreeViewPlugin<import("../internals/index.js").UseTreeViewSelectionSignature>, import("../internals/index.js").TreeViewPlugin<import("../internals/index.js").UseTreeViewFocusSignature>, import("../internals/index.js").TreeViewPlugin<import("../internals/index.js").UseTreeViewKeyboardNavigationSignature>, import("../internals/index.js").TreeViewPlugin<import("../internals/index.js").UseTreeViewJSXItemsSignature>];
 export type SimpleTreeViewPluginSignatures = ConvertPluginsIntoSignatures<typeof SIMPLE_TREE_VIEW_PLUGINS>;
-export interface SimpleTreeViewPluginParameters<Multiple extends boolean | undefined> extends TreeViewCorePluginParameters, Omit<UseTreeViewItemsParameters<any>, 'items' | 'isItemDisabled' | 'getItemLabel' | 'getItemChildren' | 'getItemId'>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple> {}
+export interface SimpleTreeViewPluginParameters<Multiple extends boolean | undefined> extends TreeViewCorePluginParameters, Omit<UseTreeViewItemsParameters<any>, 'items' | 'isItemDisabled' | 'isItemSelectionDisabled' | 'getItemLabel' | 'getItemChildren' | 'getItemId'>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple> {}

package/TreeItem/TreeItem.js

@@ -30,7 +30,7 @@ var _TreeItemLabelInput = require("../TreeItemLabelInput");
 var _TreeViewStyleContext = require("../internals/TreeViewProvider/TreeViewStyleContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["visible"],
-  _excluded2 = ["id", "itemId", "label", "disabled", "children", "slots", "slotProps", "classes"];
+  _excluded2 = ["id", "itemId", "label", "disabled", "disableSelection", "children", "slots", "slotProps", "classes"];
 const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiTreeItem');
 const TreeItemRoot = exports.TreeItemRoot = (0, _zeroStyled.styled)('li', {
   name: 'MuiTreeItem',
@@ -226,6 +226,7 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
       itemId,
       label,
       disabled,
+      disableSelection,
       children,
       slots = {},
       slotProps = {},
@@ -250,7 +251,8 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     itemId,
     children,
     label,
-    disabled
+    disabled,
+    disableSelection
   });
   const classes = useUtilityClasses(classesProp);
   const Root = slots.root ?? TreeItemRoot;
@@ -373,6 +375,11 @@ process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
    * @default false
    */
   disabled: _propTypes.default.bool,
+  /**
+   * If `true`, the item cannot be selected.
+   * @default false
+   */
+  disableSelection: _propTypes.default.bool,
   /**
    * The id attribute of the item. If not provided, it will be generated.
    */

package/esm/RichTreeView/RichTreeView.js

@@ -232,6 +232,13 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * @default () => false
    */
   isItemEditable: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
+  /**
+   * 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: PropTypes.func,
   /**
    * Horizontal indentation between an item and its children.
    * Examples: 24, "24px", "2rem", "2em".

package/esm/SimpleTreeView/SimpleTreeView.plugins.d.ts

@@ -6,4 +6,4 @@ import { UseTreeViewFocusParameters } from "../internals/plugins/useTreeViewFocu
 import { ConvertPluginsIntoSignatures } from "../internals/models/index.js";
 export declare const SIMPLE_TREE_VIEW_PLUGINS: readonly [import("../internals/index.js").TreeViewPlugin<import("../internals/index.js").UseTreeViewItemsSignature>, import("../internals/index.js").TreeViewPlugin<import("../internals/index.js").UseTreeViewExpansionSignature>, import("../internals/index.js").TreeViewPlugin<import("../internals/index.js").UseTreeViewSelectionSignature>, import("../internals/index.js").TreeViewPlugin<import("../internals/index.js").UseTreeViewFocusSignature>, import("../internals/index.js").TreeViewPlugin<import("../internals/index.js").UseTreeViewKeyboardNavigationSignature>, import("../internals/index.js").TreeViewPlugin<import("../internals/index.js").UseTreeViewJSXItemsSignature>];
 export type SimpleTreeViewPluginSignatures = ConvertPluginsIntoSignatures<typeof SIMPLE_TREE_VIEW_PLUGINS>;
-export interface SimpleTreeViewPluginParameters<Multiple extends boolean | undefined> extends TreeViewCorePluginParameters, Omit<UseTreeViewItemsParameters<any>, 'items' | 'isItemDisabled' | 'getItemLabel' | 'getItemChildren' | 'getItemId'>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple> {}
+export interface SimpleTreeViewPluginParameters<Multiple extends boolean | undefined> extends TreeViewCorePluginParameters, Omit<UseTreeViewItemsParameters<any>, 'items' | 'isItemDisabled' | 'isItemSelectionDisabled' | 'getItemLabel' | 'getItemChildren' | 'getItemId'>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple> {}

package/esm/TreeItem/TreeItem.js

@@ -3,7 +3,7 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["visible"],
-  _excluded2 = ["id", "itemId", "label", "disabled", "children", "slots", "slotProps", "classes"];
+  _excluded2 = ["id", "itemId", "label", "disabled", "disableSelection", "children", "slots", "slotProps", "classes"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -219,6 +219,7 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
       itemId,
       label,
       disabled,
+      disableSelection,
       children,
       slots = {},
       slotProps = {},
@@ -243,7 +244,8 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     itemId,
     children,
     label,
-    disabled
+    disabled,
+    disableSelection
   });
   const classes = useUtilityClasses(classesProp);
   const Root = slots.root ?? TreeItemRoot;
@@ -366,6 +368,11 @@ process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
    * @default false
    */
   disabled: PropTypes.bool,
+  /**
+   * If `true`, the item cannot be selected.
+   * @default false
+   */
+  disableSelection: PropTypes.bool,
   /**
    * The id attribute of the item. If not provided, it will be generated.
    */

package/esm/hooks/useApplyPropagationToSelectedItemsOnMount.js

@@ -1,4 +1,4 @@
-import { useRefWithInit } from '@base-ui-components/utils/useRefWithInit';
+import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
 import { getLookupFromArray } from "../internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js";
 const defaultGetItemId = item => item.id;
 const defaultGetItemChildren = item => item.children;

package/esm/hooks/useTreeItemUtils/useTreeItemUtils.js

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

package/esm/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/esm/hooks/useTreeViewApiRef.js

@@ -3,6 +3,6 @@
 import * as React from 'react';
 /**
  * Hook that instantiates a [[TreeViewApiRef]].
- * @deprecated Use `useRichTreeViewApiRef`, `useRichTreeViewProApiRef` or `useSimpleTreeViewApiRef` instead.
+ * @deprecated Use `useRichTreeViewApiRef()`, `useRichTreeViewProApiRef()` or `useSimpleTreeViewApiRef()` instead.
  */
 export const useTreeViewApiRef = () => React.useRef(undefined);

package/esm/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/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());