@mui/x-tree-view 8.14.1 → 8.16.0

package/CHANGELOG.md

@@ -5,6 +5,213 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.16.0
+
+_Oct 29, 2025_
+
+We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 🖌️ Add `brush` zoom interaction to charts
+- 🔁 [Server-side update](https://mui.com/x/react-data-grid/server-side-data/#updating-server-side-data) in a grid with tree data/row grouping and aggregation will trigger re-fetch for all parent levels of that row to update aggregated values. See the [demo](https://mui.com/x/react-data-grid/server-side-data/aggregation/#usage-with-tree-data).
+
+Special thanks go out to the community members for their valuable contributions:
+@felix-wg, @frncesc, @sai6855
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @brijeshb42, @flaviendelangle, @JCQuintas, @MBilalShafi, @mbrookes, @michelengelen, @noraleonte, @rita-codes
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.16.0`
+
+- [DataGrid] Ignore `Ctrl+A` key combination for the row selection in the community version (#20110) @felix-wg
+- [DataGrid][l10n] Improve Spanish (es-ES) locale (#20134) @frncesc
+
+#### `@mui/x-data-grid-pro@8.16.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.16.0`, plus:
+
+- [DataGridPro] Add explicit return type to `getVisibleRowsLookup()` to fix the build with `tsc` (#20116) @arminmeh
+- [DataGridPro] Retain the expansion state with expansion configuration props (#20126) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.16.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.16.0`, plus:
+
+- [DataGridPremium] Export and restore chart integration state (#20079) @arminmeh
+- [DataGridPremium] Fix grouping column `valueFormatter()` crash  (#20070) @sai6855
+- [DataGridPremium] Refetch aggregation data after row update with server-side aggregation (#20039) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.16.0`
+
+- [pickers] Prevent blur event propagation on individual sections (#19825) @michelengelen
+
+#### `@mui/x-date-pickers-pro@8.16.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.16.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.16.0`
+
+- [charts] Allow tooltip to anchor items (#19954) @alexfauquette
+- [charts] Fix behavior of grouped axis (#20118) @JCQuintas
+- [charts] Move scale symlog inside scales (#20137) @JCQuintas
+- [charts] Fix AreaChartConnectNulls demo height not correctly resizing (#20078) @sai6855
+- [charts] Fix charts resizing overflow (#20080) @alexfauquette
+- [charts] Fix tooltip not showing on first render (#20115) @bernardobelchior
+- [charts] Handle `undefined` id and color in series (#20087) @bernardobelchior
+- [charts] Remove `useMemo` from isZoomOn*Enabled and isPanOn*Enabled hooks (#20132) @Copilot
+- [charts] Use static data for perf (#20072) @JCQuintas
+- [charts] Move scale symlog inside scales (#20137) @JCQuintas
+
+#### `@mui/x-charts-pro@8.16.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.16.0`, plus:
+
+- [charts-pro] Add `brush` zoom interaction (#19899) @JCQuintas
+- [charts-pro] Add sankey performance check (#20069) @JCQuintas
+
+#### `@mui/x-charts-premium@8.16.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.16.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.16.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.16.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.16.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.16.0`
+
+Internal changes.
+
+### Core
+
+- [code-infra] Setup eslint compat plugin (#20105) @brijeshb42
+- [code-infra] Improve store types (#20129) @JCQuintas
+- [docs] Update the callout in `rows` prop documentation (#20127) @MBilalShafi
+- [docs-infra] Refine changelog contributor acknowledgment messages (#20123) @mbrookes
+
+### Miscellaneous
+
+- [x-telemetry] Skip telemetry tests on browser mode (#20122) @bernardobelchior
+
+## 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_

package/esm/index.js

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

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/useTreeViewLabel/useTreeViewLabel.js

@@ -37,7 +37,7 @@ export const useTreeViewLabel = ({
     }
   };
   useIsoLayoutEffect(() => {
-    store.set('label', _extends({}, store.state.items, {
+    store.set('label', _extends({}, store.state.label, {
       isItemEditable: params.isItemEditable
     }));
   }, [store, params.isItemEditable]);

package/index.js

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

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/useTreeViewLabel/useTreeViewLabel.js

@@ -44,7 +44,7 @@ const useTreeViewLabel = ({
     }
   };
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    store.set('label', (0, _extends2.default)({}, store.state.items, {
+    store.set('label', (0, _extends2.default)({}, store.state.label, {
       isItemEditable: params.isItemEditable
     }));
   }, [store, params.isItemEditable]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "8.14.1",
+  "version": "8.16.0",
   "author": "MUI Team",
   "description": "The community edition of the MUI X Tree View components.",
   "license": "MIT",
@@ -38,7 +38,7 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-internals": "8.14.0"
+    "@mui/x-internals": "8.16.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",