@mui/x-tree-view 8.14.0 → 8.15.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.15.0
+
+_Oct 23, 2025_
+
+We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 🖌️ Add new [`brush` charts interaction](https://mui.com/x/react-charts/brush/) for building custom behavior.
+  ![brush visualization example](https://github.com/user-attachments/assets/60c382a1-e418-4736-8dcb-1567c4e361e3)
+- ⚡️ Performance improvements for large bar charts
+- 🤖 Data Grid AI assistant can now [visualize the query results](https://mui.com/x/react-data-grid/ai-assistant/#data-visualization) by controlling the chart integration settings
+- 📦 DataGrid uses an internal MUI fork of ExcelJS that does not depend on vulnerable versions of NPM packages
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to the community members for their valuable contributions:
+@ZagrebaAlex
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @KenanYusuf, @prakhargupta1, @rita-codes, @siriwatknp, @arminmeh, @brijeshb42, @noraleonte
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.15.0`
+
+- [DataGrid] Fix `dataSource.fetchRows` API's return type (#20068) @arminmeh
+
+#### `@mui/x-data-grid-pro@8.15.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.15.0`, plus:
+
+- [DataGridPro] Keep children in the tree after parent row is re-fetched with the data source (#19934) @arminmeh
+- [DataGridPro] Support scroll shadows customization (#19982) @KenanYusuf
+
+#### `@mui/x-data-grid-premium@8.15.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.15.0`, plus:
+
+- [DataGridPremium] Use ExcelJS fork (#19796) @cherniavskii
+- [DataGridPremium] Support data visualization in AI Assistant (#19831) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.15.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.15.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.15.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.15.0`
+
+- [charts] Add `ChartsBrushOverlay` and allow brush configuration (#19956) @JCQuintas
+- [charts] Add `getStringSize` benchmark. Remove benchmarks from built package. (#19995) @bernardobelchior
+- [charts] Batch string size measurement (#19994) @bernardobelchior
+- [charts] Fix console issue (#20025) @JCQuintas
+- [charts] Fix is[ZoomFeature]Enabled type (#20058) @alexfauquette
+- [charts] Fix reference line middle spacing (#20004) @JCQuintas
+- [charts] Improve `getStringSize` and `batchMeasureStrings` performance (#19996) @bernardobelchior
+- [charts] Improve deep export script (#20007) @JCQuintas
+- [charts] Improve string measurement benchmarks (#19999) @bernardobelchior
+- [charts] Measure string sizes using SVG elements (#19981) @bernardobelchior
+- [l10n] Improve Greek (gr-GR) locale (#20060) @ZagrebaAlex
+
+#### `@mui/x-charts-pro@8.15.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.15.0`, plus:
+
+- [charts-pro] Fix pan with `axis.reverse` (#20031) @JCQuintas
+
+#### `@mui/x-charts-premium@8.15.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.15.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.15.0`
+
+- [tree view] Multi character type-ahead (#19942) @noraleonte
+
+#### `@mui/x-tree-view-pro@8.15.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.15.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.14.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add overview section for scatter chart and heatmap (#19888) @prakhargupta1
+- [docs] Add charts bell curve example (#20003) @JCQuintas
+- [docs] Add grouped multiple fields for Data Grid row grouping recipe (#19964) @siriwatknp
+- [docs] Add Data Grid loading state recipe (#19958) @siriwatknp
+
+### Core
+
+- [code-infra] Remove @mui/monorepo usage for react versioning (#19894) @Janpot
+- [code-infra] Remove invalid `environment: 'browser'` from vitest browser config (#19993) @bernardobelchior
+- [code-infra] Remove unused babel aliases (#19987) @Janpot
+- [code-infra] Turn on all testing-library eslint rules (#19946) @brijeshb42
+- [docs-infra] Fix broken hash link (#20062) @Janpot
+
+## 8.14.1
+
+_Oct 16, 2025_
+
+We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Charts have optimized data structures for closest point calculations — initial render times reduced by ~25% for 1,000+ data points, with greater gains at larger scales (#19790) @bernardobelchior
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to the community members for their valuable contributions:
+@djpremier, @jacknot, @justdoit1897, @mellis481, @sai6855
+
+The following are all team members who have contributed to this release:
+@arminmeh, @bernardobelchior, @brijeshb42, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @noraleonte, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.14.1`
+
+- [DataGrid] Fix cell not rerendering on `isCellEditable` prop change (#19898) @cherniavskii
+- [DataGrid] Fix virtualizer memory leaks (#19886) @cherniavskii
+- [DataGrid] Fix tree data unable to deselect row for exclude model (#19846) @siriwatknp
+- [l10n] Improve Italian (it-IT) locale (#19322) @jacknot and (#19940) @justdoit1897
+
+#### `@mui/x-data-grid-pro@8.14.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.14.1`, plus:
+
+- [DataGridPro] Clear cache before new request to the nested request queue after a row has been edited (#19873) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.14.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.14.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.14.1`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.14.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.14.1`.
+
+### Charts
+
+#### `@mui/x-charts@8.14.1`
+
+- [charts] Fix `minBarSize` when y-axis is reversed (#19932) @bernardobelchior
+- [charts] Fix bar chart border radius when axis is reversed (#19895) @bernardobelchior
+- [charts] Fix scatter chart `datasetKeys.id` not being optional (#19897) @bernardobelchior
+- [charts] Use more performant data structure for closest point (#19790) @bernardobelchior
+- [charts] Fix `GaugeValueArc` having wrong class (#19965) @bernardobelchior
+- [charts] Fix `undefined` path when highlight empty line chart axis (#19969) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.14.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.14.1`, plus:
+
+- [charts-pro] Add `highlighting` to Sankey chart (#19662) @JCQuintas
+
+#### `@mui/x-charts-premium@8.14.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.14.1`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.14.1`
+
+- [tree view] Do not forward the `ownerState` to the icon (#19772) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.14.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.14.1`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.14.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add `'bumpX'` and `'bumpY'` curve types to the interpolation demo (#19676) @djpremier
+- [docs] Add scatter chart with linear regression demo (#19900) @bernardobelchior
+- [docs] Correctly describe Data Grid's row selection behavior (#19968) @arminmeh
+- [docs] Fix `isExpanded` type in tree view docs (#19092) @mellis481
+
+### Core
+
+- [code-infra] Disable Netlify cache plugin (#19950) @Janpot
+- [code-infra] Lint json through eslint (#19890) @Janpot
+- [docs-infra] Use published netlify cache plugin package (#19929) @brijeshb42
+
 ## 8.14.0
 
 _Oct 9, 2025_

package/RichTreeView/RichTreeView.js

@@ -267,7 +267,7 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * Callback fired when a Tree Item is expanded or collapsed.
    * @param {React.SyntheticEvent | null} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemExpansion()` method.
    * @param {array} itemId The itemId of the modified item.
-   * @param {array} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
+   * @param {boolean} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
    */
   onItemExpansionToggle: _propTypes.default.func,
   /**
@@ -286,7 +286,7 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * Callback fired when a Tree Item is selected or deselected.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemSelection()` method.
    * @param {array} itemId The itemId of the modified item.
-   * @param {array} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
+   * @param {boolean} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
    */
   onItemSelectionToggle: _propTypes.default.func,
   /**

package/SimpleTreeView/SimpleTreeView.js

@@ -207,7 +207,7 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
    * Callback fired when a Tree Item is expanded or collapsed.
    * @param {React.SyntheticEvent | null} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemExpansion()` method.
    * @param {array} itemId The itemId of the modified item.
-   * @param {array} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
+   * @param {boolean} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
    */
   onItemExpansionToggle: _propTypes.default.func,
   /**
@@ -220,7 +220,7 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
    * Callback fired when a Tree Item is selected or deselected.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemSelection()` method.
    * @param {array} itemId The itemId of the modified item.
-   * @param {array} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
+   * @param {boolean} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
    */
   onItemSelectionToggle: _propTypes.default.func,
   /**

package/TreeItemIcon/TreeItemIcon.js

@@ -1,20 +1,22 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TreeItemIcon = TreeItemIcon;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _resolveComponentProps = _interopRequireDefault(require("@mui/utils/resolveComponentProps"));
-var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var _useSlotProps2 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _TreeViewStyleContext = require("../internals/TreeViewProvider/TreeViewStyleContext");
 var _icons = require("../icons");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ownerState"];
 function pickIcon(treeItemIcon, treeViewIcon, fallback) {
   if (treeItemIcon !== undefined) {
     return treeItemIcon;
@@ -53,12 +55,13 @@ function TreeItemIcon(props) {
     iconName = 'endIcon';
   }
   const Icon = slots[iconName];
-  const iconProps = (0, _useSlotProps.default)({
-    elementType: Icon,
-    externalSlotProps: tempOwnerState => (0, _extends2.default)({}, (0, _resolveComponentProps.default)(slotPropsFromTreeView[iconName], tempOwnerState), (0, _resolveComponentProps.default)(slotPropsFromTreeItem?.[iconName], tempOwnerState)),
-    // TODO: Add proper ownerState
-    ownerState: {}
-  });
+  const _useSlotProps = (0, _useSlotProps2.default)({
+      elementType: Icon,
+      externalSlotProps: tempOwnerState => (0, _extends2.default)({}, (0, _resolveComponentProps.default)(slotPropsFromTreeView[iconName], tempOwnerState), (0, _resolveComponentProps.default)(slotPropsFromTreeItem?.[iconName], tempOwnerState)),
+      // TODO: Add proper ownerState
+      ownerState: {}
+    }),
+    iconProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded);
   if (!Icon) {
     return null;
   }

package/esm/RichTreeView/RichTreeView.js

@@ -260,7 +260,7 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * Callback fired when a Tree Item is expanded or collapsed.
    * @param {React.SyntheticEvent | null} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemExpansion()` method.
    * @param {array} itemId The itemId of the modified item.
-   * @param {array} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
+   * @param {boolean} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
    */
   onItemExpansionToggle: PropTypes.func,
   /**
@@ -279,7 +279,7 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * Callback fired when a Tree Item is selected or deselected.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemSelection()` method.
    * @param {array} itemId The itemId of the modified item.
-   * @param {array} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
+   * @param {boolean} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
    */
   onItemSelectionToggle: PropTypes.func,
   /**

package/esm/SimpleTreeView/SimpleTreeView.js

@@ -200,7 +200,7 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
    * Callback fired when a Tree Item is expanded or collapsed.
    * @param {React.SyntheticEvent | null} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemExpansion()` method.
    * @param {array} itemId The itemId of the modified item.
-   * @param {array} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
+   * @param {boolean} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
    */
   onItemExpansionToggle: PropTypes.func,
   /**
@@ -213,7 +213,7 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
    * Callback fired when a Tree Item is selected or deselected.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemSelection()` method.
    * @param {array} itemId The itemId of the modified item.
-   * @param {array} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
+   * @param {boolean} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
    */
   onItemSelectionToggle: PropTypes.func,
   /**

package/esm/TreeItemIcon/TreeItemIcon.js

@@ -1,6 +1,8 @@
 'use client';
 
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["ownerState"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import resolveComponentProps from '@mui/utils/resolveComponentProps';
@@ -46,12 +48,13 @@ function TreeItemIcon(props) {
     iconName = 'endIcon';
   }
   const Icon = slots[iconName];
-  const iconProps = useSlotProps({
-    elementType: Icon,
-    externalSlotProps: tempOwnerState => _extends({}, resolveComponentProps(slotPropsFromTreeView[iconName], tempOwnerState), resolveComponentProps(slotPropsFromTreeItem?.[iconName], tempOwnerState)),
-    // TODO: Add proper ownerState
-    ownerState: {}
-  });
+  const _useSlotProps = useSlotProps({
+      elementType: Icon,
+      externalSlotProps: tempOwnerState => _extends({}, resolveComponentProps(slotPropsFromTreeView[iconName], tempOwnerState), resolveComponentProps(slotPropsFromTreeItem?.[iconName], tempOwnerState)),
+      // TODO: Add proper ownerState
+      ownerState: {}
+    }),
+    iconProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded);
   if (!Icon) {
     return null;
   }

package/esm/index.js

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

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

@@ -72,7 +72,7 @@ export interface UseTreeViewExpansionParameters {
    * Callback fired when a Tree Item is expanded or collapsed.
    * @param {React.SyntheticEvent | null} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemExpansion()` method.
    * @param {array} itemId The itemId of the modified item.
-   * @param {array} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
+   * @param {boolean} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
    */
   onItemExpansionToggle?: (event: React.SyntheticEvent | null, itemId: string, isExpanded: boolean) => void;
   /**

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

@@ -57,14 +57,14 @@ export const useTreeViewJSXItems = ({
       })
     }));
   };
-  const mapFirstCharFromJSX = useEventCallback((itemId, firstChar) => {
-    instance.updateFirstCharMap(firstCharMap => {
-      firstCharMap[itemId] = firstChar;
-      return firstCharMap;
+  const mapLabelFromJSX = useEventCallback((itemId, label) => {
+    instance.updateLabelMap(labelMap => {
+      labelMap[itemId] = label;
+      return labelMap;
     });
     return () => {
-      instance.updateFirstCharMap(firstCharMap => {
-        const newMap = _extends({}, firstCharMap);
+      instance.updateLabelMap(labelMap => {
+        const newMap = _extends({}, labelMap);
         delete newMap[itemId];
         return newMap;
       });
@@ -74,7 +74,7 @@ export const useTreeViewJSXItems = ({
     instance: {
       insertJSXItem,
       setJSXItemsOrderedChildrenIds,
-      mapFirstCharFromJSX
+      mapLabelFromJSX
     }
   };
 };
@@ -132,7 +132,7 @@ const useTreeViewJSXItemsItemPlugin = ({
   }, [instance, parentId, itemId, expandable, disabled, id]);
   React.useEffect(() => {
     if (label) {
-      return instance.mapFirstCharFromJSX(itemId, (pluginContentRef.current?.textContent ?? '').substring(0, 1).toLowerCase());
+      return instance.mapLabelFromJSX(itemId, (pluginContentRef.current?.textContent ?? '').toLowerCase());
     }
     return undefined;
   }, [instance, itemId, label]);

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

@@ -10,13 +10,13 @@ export interface UseTreeViewItemsInstance {
    */
   insertJSXItem: (item: TreeViewItemMeta) => () => void;
   /**
-   * Updates the `firstCharMap` to register the first character of the given item's label.
+   * Updates the `labelMap` to register the first character of the given item's label.
    * This map is used to navigate the tree using type-ahead search.
-   * @param {TreeViewItemId} itemId The id of the item to map the first character of.
-   * @param {string} firstChar The first character of the item's label.
-   * @returns {() => void} A function to remove the item from the `firstCharMap`.
+   * @param {TreeViewItemId} itemId The id of the item to map the label of.
+   * @param {string} label The item's label.
+   * @returns {() => void} A function to remove the item from the `labelMap`.
    */
-  mapFirstCharFromJSX: (itemId: TreeViewItemId, firstChar: string) => () => void;
+  mapLabelFromJSX: (itemId: TreeViewItemId, label: string) => () => void;
   /**
    * Store the ids of a given item's children in the state.
    * Those ids must be passed in the order they should be rendered.

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

@@ -3,6 +3,7 @@
 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 { getFirstNavigableItem, getLastNavigableItem, getNextNavigableItem, getPreviousNavigableItem, isTargetInDescendants } from "../../utils/tree.js";
 import { hasPlugin } from "../../utils/plugins.js";
@@ -14,44 +15,48 @@ import { expansionSelectors } from "../useTreeViewExpansion/useTreeViewExpansion
 function isPrintableKey(string) {
   return !!string && string.length === 1 && !!string.match(/\S/);
 }
+const TYPEAHEAD_TIMEOUT = 500;
 export const useTreeViewKeyboardNavigation = ({
   instance,
   store,
   params
 }) => {
   const isRtl = useRtl();
-  const firstCharMap = React.useRef({});
-  const updateFirstCharMap = useEventCallback(callback => {
-    firstCharMap.current = callback(firstCharMap.current);
+  const labelMap = React.useRef({});
+  const typeaheadQueryRef = React.useRef('');
+  const typeaheadTimeout = useTimeout();
+  const updateLabelMap = useEventCallback(callback => {
+    labelMap.current = callback(labelMap.current);
   });
   const itemMetaLookup = useStore(store, itemsSelectors.itemMetaLookup);
   React.useEffect(() => {
     if (instance.areItemUpdatesPrevented()) {
       return;
     }
-    const newFirstCharMap = {};
+    const newLabelMap = {};
     const processItem = item => {
-      newFirstCharMap[item.id] = item.label.substring(0, 1).toLowerCase();
+      newLabelMap[item.id] = item.label.toLowerCase();
     };
     Object.values(itemMetaLookup).forEach(processItem);
-    firstCharMap.current = newFirstCharMap;
+    labelMap.current = newLabelMap;
   }, [itemMetaLookup, params.getItemId, instance]);
-  const getFirstMatchingItem = (itemId, query) => {
-    const cleanQuery = query.toLowerCase();
-    const getNextItem = itemIdToCheck => {
-      const nextItemId = getNextNavigableItem(store.state, itemIdToCheck);
-      // We reached the end of the tree, check from the beginning
-      if (nextItemId === null) {
-        return getFirstNavigableItem(store.state);
-      }
-      return nextItemId;
-    };
+  const getNextItem = itemIdToCheck => {
+    const nextItemId = getNextNavigableItem(store.state, itemIdToCheck);
+    // We reached the end of the tree, check from the beginning
+    if (nextItemId === null) {
+      return getFirstNavigableItem(store.state);
+    }
+    return nextItemId;
+  };
+  const getNextMatchingItemId = (itemId, query) => {
     let matchingItemId = null;
-    let currentItemId = getNextItem(itemId);
     const checkedItems = {};
+    // If query length > 1, first check if current item matches
+    let currentItemId = query.length > 1 ? itemId : getNextItem(itemId);
     // The "!checkedItems[currentItemId]" condition avoids an infinite loop when there is no matching item.
     while (matchingItemId == null && !checkedItems[currentItemId]) {
-      if (firstCharMap.current[currentItemId] === cleanQuery) {
+      const itemLabel = labelMap.current[currentItemId];
+      if (itemLabel?.startsWith(query)) {
         matchingItemId = currentItemId;
       } else {
         checkedItems[currentItemId] = true;
@@ -60,6 +65,26 @@ export const useTreeViewKeyboardNavigation = ({
     }
     return matchingItemId;
   };
+  const getFirstMatchingItem = (itemId, newKey) => {
+    const cleanNewKey = newKey.toLowerCase();
+
+    // Try matching with accumulated query + new key
+    const concatenatedQuery = `${typeaheadQueryRef.current}${cleanNewKey}`;
+
+    // check if the entire typed query matches an item
+    const concatenatedQueryMatchingItemId = getNextMatchingItemId(itemId, concatenatedQuery);
+    if (concatenatedQueryMatchingItemId != null) {
+      typeaheadQueryRef.current = concatenatedQuery;
+      return concatenatedQueryMatchingItemId;
+    }
+    const newKeyMatchingItemId = getNextMatchingItemId(itemId, cleanNewKey);
+    if (newKeyMatchingItemId != null) {
+      typeaheadQueryRef.current = cleanNewKey;
+      return newKeyMatchingItemId;
+    }
+    typeaheadQueryRef.current = '';
+    return null;
+  };
   const canToggleItemSelection = itemId => selectionSelectors.enabled(store.state) && !itemsSelectors.isItemDisabled(store.state, itemId);
   const canToggleItemExpansion = itemId => {
     return !itemsSelectors.isItemDisabled(store.state, itemId) && expansionSelectors.isItemExpandable(store.state, itemId);
@@ -253,21 +278,26 @@ export const useTreeViewKeyboardNavigation = ({
         }
 
       // Type-ahead
-      // TODO: Support typing multiple characters
       case !ctrlPressed && !event.shiftKey && isPrintableKey(key):
         {
+          typeaheadTimeout.clear();
           const matchingItem = getFirstMatchingItem(itemId, key);
           if (matchingItem != null) {
             instance.focusItem(event, matchingItem);
             event.preventDefault();
+          } else {
+            typeaheadQueryRef.current = '';
           }
+          typeaheadTimeout.start(TYPEAHEAD_TIMEOUT, () => {
+            typeaheadQueryRef.current = '';
+          });
           break;
         }
     }
   };
   return {
     instance: {
-      updateFirstCharMap,
+      updateLabelMap,
       handleItemKeyDown
     }
   };

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

@@ -8,12 +8,12 @@ import { UseTreeViewLabelSignature } from "../useTreeViewLabel/index.js";
 import { TreeViewItemId, TreeViewCancellableEvent } from "../../../models/index.js";
 export interface UseTreeViewKeyboardNavigationInstance {
   /**
-   * Updates the `firstCharMap` to add/remove the first character of some item's labels.
+   * Updates the `labelMap` to add/remove the first character of some item's labels.
    * This map is used to navigate the tree using type-ahead search.
    * This method is only used by the `useTreeViewJSXItems` plugin, otherwise the updates are handled internally.
-   * @param {(map: TreeViewFirstCharMap) => TreeViewFirstCharMap} updater The function to update the map.
+   * @param {(map: TreeViewLabelMap) => TreeViewLabelMap} updater The function to update the map.
    */
-  updateFirstCharMap: (updater: (map: TreeViewFirstCharMap) => TreeViewFirstCharMap) => void;
+  updateLabelMap: (updater: (map: TreeViewLabelMap) => TreeViewLabelMap) => void;
   /**
    * Callback fired when a key is pressed on an item.
    * Handles all the keyboard navigation logic.
@@ -27,6 +27,6 @@ export type UseTreeViewKeyboardNavigationSignature = TreeViewPluginSignature<{
   dependencies: [UseTreeViewItemsSignature, UseTreeViewSelectionSignature, UseTreeViewFocusSignature, UseTreeViewExpansionSignature];
   optionalDependencies: [UseTreeViewLabelSignature];
 }>;
-export type TreeViewFirstCharMap = {
+export type TreeViewLabelMap = {
   [itemId: string]: string;
 };

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

@@ -108,7 +108,7 @@ export interface UseTreeViewSelectionParameters<Multiple extends boolean | undef
    * Callback fired when a Tree Item is selected or deselected.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemSelection()` method.
    * @param {array} itemId The itemId of the modified item.
-   * @param {array} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
+   * @param {boolean} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
    */
   onItemSelectionToggle?: (event: React.SyntheticEvent | null, itemId: string, isSelected: boolean) => void;
 }

package/index.js

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

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

@@ -72,7 +72,7 @@ export interface UseTreeViewExpansionParameters {
    * Callback fired when a Tree Item is expanded or collapsed.
    * @param {React.SyntheticEvent | null} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemExpansion()` method.
    * @param {array} itemId The itemId of the modified item.
-   * @param {array} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
+   * @param {boolean} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
    */
   onItemExpansionToggle?: (event: React.SyntheticEvent | null, itemId: string, isExpanded: boolean) => void;
   /**

package/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -64,14 +64,14 @@ const useTreeViewJSXItems = ({
       })
     }));
   };
-  const mapFirstCharFromJSX = (0, _useEventCallback.useEventCallback)((itemId, firstChar) => {
-    instance.updateFirstCharMap(firstCharMap => {
-      firstCharMap[itemId] = firstChar;
-      return firstCharMap;
+  const mapLabelFromJSX = (0, _useEventCallback.useEventCallback)((itemId, label) => {
+    instance.updateLabelMap(labelMap => {
+      labelMap[itemId] = label;
+      return labelMap;
     });
     return () => {
-      instance.updateFirstCharMap(firstCharMap => {
-        const newMap = (0, _extends2.default)({}, firstCharMap);
+      instance.updateLabelMap(labelMap => {
+        const newMap = (0, _extends2.default)({}, labelMap);
         delete newMap[itemId];
         return newMap;
       });
@@ -81,7 +81,7 @@ const useTreeViewJSXItems = ({
     instance: {
       insertJSXItem,
       setJSXItemsOrderedChildrenIds,
-      mapFirstCharFromJSX
+      mapLabelFromJSX
     }
   };
 };
@@ -140,7 +140,7 @@ const useTreeViewJSXItemsItemPlugin = ({
   }, [instance, parentId, itemId, expandable, disabled, id]);
   React.useEffect(() => {
     if (label) {
-      return instance.mapFirstCharFromJSX(itemId, (pluginContentRef.current?.textContent ?? '').substring(0, 1).toLowerCase());
+      return instance.mapLabelFromJSX(itemId, (pluginContentRef.current?.textContent ?? '').toLowerCase());
     }
     return undefined;
   }, [instance, itemId, label]);

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

@@ -10,13 +10,13 @@ export interface UseTreeViewItemsInstance {
    */
   insertJSXItem: (item: TreeViewItemMeta) => () => void;
   /**
-   * Updates the `firstCharMap` to register the first character of the given item's label.
+   * Updates the `labelMap` to register the first character of the given item's label.
    * This map is used to navigate the tree using type-ahead search.
-   * @param {TreeViewItemId} itemId The id of the item to map the first character of.
-   * @param {string} firstChar The first character of the item's label.
-   * @returns {() => void} A function to remove the item from the `firstCharMap`.
+   * @param {TreeViewItemId} itemId The id of the item to map the label of.
+   * @param {string} label The item's label.
+   * @returns {() => void} A function to remove the item from the `labelMap`.
    */
-  mapFirstCharFromJSX: (itemId: TreeViewItemId, firstChar: string) => () => void;
+  mapLabelFromJSX: (itemId: TreeViewItemId, label: string) => () => void;
   /**
    * Store the ids of a given item's children in the state.
    * Those ids must be passed in the order they should be rendered.

package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -9,6 +9,7 @@ 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 _tree = require("../../utils/tree");
 var _plugins = require("../../utils/plugins");
@@ -20,44 +21,48 @@ var _useTreeViewExpansion = require("../useTreeViewExpansion/useTreeViewExpansio
 function isPrintableKey(string) {
   return !!string && string.length === 1 && !!string.match(/\S/);
 }
+const TYPEAHEAD_TIMEOUT = 500;
 const useTreeViewKeyboardNavigation = ({
   instance,
   store,
   params
 }) => {
   const isRtl = (0, _RtlProvider.useRtl)();
-  const firstCharMap = React.useRef({});
-  const updateFirstCharMap = (0, _useEventCallback.useEventCallback)(callback => {
-    firstCharMap.current = callback(firstCharMap.current);
+  const labelMap = React.useRef({});
+  const typeaheadQueryRef = React.useRef('');
+  const typeaheadTimeout = (0, _useTimeout.useTimeout)();
+  const updateLabelMap = (0, _useEventCallback.useEventCallback)(callback => {
+    labelMap.current = callback(labelMap.current);
   });
   const itemMetaLookup = (0, _store.useStore)(store, _useTreeViewItems.itemsSelectors.itemMetaLookup);
   React.useEffect(() => {
     if (instance.areItemUpdatesPrevented()) {
       return;
     }
-    const newFirstCharMap = {};
+    const newLabelMap = {};
     const processItem = item => {
-      newFirstCharMap[item.id] = item.label.substring(0, 1).toLowerCase();
+      newLabelMap[item.id] = item.label.toLowerCase();
     };
     Object.values(itemMetaLookup).forEach(processItem);
-    firstCharMap.current = newFirstCharMap;
+    labelMap.current = newLabelMap;
   }, [itemMetaLookup, params.getItemId, instance]);
-  const getFirstMatchingItem = (itemId, query) => {
-    const cleanQuery = query.toLowerCase();
-    const getNextItem = itemIdToCheck => {
-      const nextItemId = (0, _tree.getNextNavigableItem)(store.state, itemIdToCheck);
-      // We reached the end of the tree, check from the beginning
-      if (nextItemId === null) {
-        return (0, _tree.getFirstNavigableItem)(store.state);
-      }
-      return nextItemId;
-    };
+  const getNextItem = itemIdToCheck => {
+    const nextItemId = (0, _tree.getNextNavigableItem)(store.state, itemIdToCheck);
+    // We reached the end of the tree, check from the beginning
+    if (nextItemId === null) {
+      return (0, _tree.getFirstNavigableItem)(store.state);
+    }
+    return nextItemId;
+  };
+  const getNextMatchingItemId = (itemId, query) => {
     let matchingItemId = null;
-    let currentItemId = getNextItem(itemId);
     const checkedItems = {};
+    // If query length > 1, first check if current item matches
+    let currentItemId = query.length > 1 ? itemId : getNextItem(itemId);
     // The "!checkedItems[currentItemId]" condition avoids an infinite loop when there is no matching item.
     while (matchingItemId == null && !checkedItems[currentItemId]) {
-      if (firstCharMap.current[currentItemId] === cleanQuery) {
+      const itemLabel = labelMap.current[currentItemId];
+      if (itemLabel?.startsWith(query)) {
         matchingItemId = currentItemId;
       } else {
         checkedItems[currentItemId] = true;
@@ -66,6 +71,26 @@ const useTreeViewKeyboardNavigation = ({
     }
     return matchingItemId;
   };
+  const getFirstMatchingItem = (itemId, newKey) => {
+    const cleanNewKey = newKey.toLowerCase();
+
+    // Try matching with accumulated query + new key
+    const concatenatedQuery = `${typeaheadQueryRef.current}${cleanNewKey}`;
+
+    // check if the entire typed query matches an item
+    const concatenatedQueryMatchingItemId = getNextMatchingItemId(itemId, concatenatedQuery);
+    if (concatenatedQueryMatchingItemId != null) {
+      typeaheadQueryRef.current = concatenatedQuery;
+      return concatenatedQueryMatchingItemId;
+    }
+    const newKeyMatchingItemId = getNextMatchingItemId(itemId, cleanNewKey);
+    if (newKeyMatchingItemId != null) {
+      typeaheadQueryRef.current = cleanNewKey;
+      return newKeyMatchingItemId;
+    }
+    typeaheadQueryRef.current = '';
+    return null;
+  };
   const canToggleItemSelection = itemId => _useTreeViewSelection.selectionSelectors.enabled(store.state) && !_useTreeViewItems.itemsSelectors.isItemDisabled(store.state, itemId);
   const canToggleItemExpansion = itemId => {
     return !_useTreeViewItems.itemsSelectors.isItemDisabled(store.state, itemId) && _useTreeViewExpansion.expansionSelectors.isItemExpandable(store.state, itemId);
@@ -259,21 +284,26 @@ const useTreeViewKeyboardNavigation = ({
         }
 
       // Type-ahead
-      // TODO: Support typing multiple characters
       case !ctrlPressed && !event.shiftKey && isPrintableKey(key):
         {
+          typeaheadTimeout.clear();
           const matchingItem = getFirstMatchingItem(itemId, key);
           if (matchingItem != null) {
             instance.focusItem(event, matchingItem);
             event.preventDefault();
+          } else {
+            typeaheadQueryRef.current = '';
           }
+          typeaheadTimeout.start(TYPEAHEAD_TIMEOUT, () => {
+            typeaheadQueryRef.current = '';
+          });
           break;
         }
     }
   };
   return {
     instance: {
-      updateFirstCharMap,
+      updateLabelMap,
       handleItemKeyDown
     }
   };

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

@@ -8,12 +8,12 @@ import { UseTreeViewLabelSignature } from "../useTreeViewLabel/index.js";
 import { TreeViewItemId, TreeViewCancellableEvent } from "../../../models/index.js";
 export interface UseTreeViewKeyboardNavigationInstance {
   /**
-   * Updates the `firstCharMap` to add/remove the first character of some item's labels.
+   * Updates the `labelMap` to add/remove the first character of some item's labels.
    * This map is used to navigate the tree using type-ahead search.
    * This method is only used by the `useTreeViewJSXItems` plugin, otherwise the updates are handled internally.
-   * @param {(map: TreeViewFirstCharMap) => TreeViewFirstCharMap} updater The function to update the map.
+   * @param {(map: TreeViewLabelMap) => TreeViewLabelMap} updater The function to update the map.
    */
-  updateFirstCharMap: (updater: (map: TreeViewFirstCharMap) => TreeViewFirstCharMap) => void;
+  updateLabelMap: (updater: (map: TreeViewLabelMap) => TreeViewLabelMap) => void;
   /**
    * Callback fired when a key is pressed on an item.
    * Handles all the keyboard navigation logic.
@@ -27,6 +27,6 @@ export type UseTreeViewKeyboardNavigationSignature = TreeViewPluginSignature<{
   dependencies: [UseTreeViewItemsSignature, UseTreeViewSelectionSignature, UseTreeViewFocusSignature, UseTreeViewExpansionSignature];
   optionalDependencies: [UseTreeViewLabelSignature];
 }>;
-export type TreeViewFirstCharMap = {
+export type TreeViewLabelMap = {
   [itemId: string]: string;
 };

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

@@ -108,7 +108,7 @@ export interface UseTreeViewSelectionParameters<Multiple extends boolean | undef
    * Callback fired when a Tree Item is selected or deselected.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemSelection()` method.
    * @param {array} itemId The itemId of the modified item.
-   * @param {array} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
+   * @param {boolean} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
    */
   onItemSelectionToggle?: (event: React.SyntheticEvent | null, itemId: string, isSelected: boolean) => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "8.14.0",
+  "version": "8.15.0",
   "author": "MUI Team",
   "description": "The community edition of the MUI X Tree View components.",
   "license": "MIT",