@mui/x-data-grid 9.10.0 → 9.11.0

package/CHANGELOG.md

@@ -1,5 +1,229 @@
 # Changelog
 
+## 9.11.0
+
+_Aug 6, 2026_
+
+We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ Add `addItems()` and `getItemSelection()` API methods to Tree View
+
+Special thanks go out to these community members for their valuable contributions:
+@12joan, @Anexus5919, @kevincorizi-sbt, @mixelburg, @mustafajw07, @strazto
+
+The following team members contributed to this release:
+@flaviendelangle, @hasdfa, @JCQuintas, @LukasTy, @MBilalShafi, @michelengelen, @noraleonte, @rita-codes
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.11.0`
+
+- [DataGrid] Fix `updateRows` stripping class prototypes from rows in datasource mode (#22288) @mixelburg
+- [DataGrid] Do not re-fetch data when an `Activity` becomes visible (#22603) @12joan
+- [DataGrid] Fix toolbar button stealing focus when a sibling's disabled state changes (#23204) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@9.11.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@9.11.0`.
+
+#### `@mui/x-data-grid-premium@9.11.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@9.11.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@9.11.0`
+
+- [pickers] Fix day shift when editing dates predating timezone standardization (#23296) @JCQuintas
+
+#### `@mui/x-date-pickers-pro@9.11.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@9.11.0`, plus:
+
+- [DateRangePicker] Fix disabled filler cells showing the range highlight (#23293) @JCQuintas
+
+### Charts
+
+#### `@mui/x-charts@9.11.0`
+
+- [charts] Activate the focused item with `Enter`/`Space` (#23218) @JCQuintas
+- [charts] Extract the axis click payload builders (#23215) @JCQuintas
+- [charts] Fix `GestureManager` event listener leak on chart unmount (#23283) @kevincorizi-sbt
+- [charts] Fix `slotProps.legend.position` and `direction` in `RadarChart` (#23254) @JCQuintas
+- [charts] Fix axis clicks being discarded on slight pointer movement (#23244) @noraleonte
+- [charts] Fix image export of charts sized by their parent element (#23255) @JCQuintas
+- [charts] Forward `experimentalFeatures` on `RadarChart` and `Heatmap` (#23216) @JCQuintas
+- [charts] Hide focus indicator when the chart loses focus (#23213) @JCQuintas
+
+#### `@mui/x-charts-pro@9.11.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@9.11.0`.
+
+#### `@mui/x-charts-premium@9.11.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@9.11.0`, plus:
+
+- [charts-premium] Fix `RangeBar` type override (#23217) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@9.11.0`
+
+- [tree view] Add `addItems()` API method (#23159) @JCQuintas
+- [tree view] Add `getItemSelection` API method (#23257) @noraleonte
+- [tree view] Ignore `keepExistingSelection` when `multiSelect` is `false` (#23242) @JCQuintas
+- [tree view] Prevent duplicate ids in multi-select arrow navigation (#23006) @Anexus5919
+
+#### `@mui/x-tree-view-pro@9.11.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@9.11.0`, plus:
+
+- [tree view] Discard superseded lazy-loading responses (#23005) @Anexus5919
+
+### Scheduler
+
+#### `@mui/x-scheduler@9.0.0-beta.8`
+
+- [scheduler] Add `localeText` prop to standalone views (#23210) @rita-codes
+- [scheduler] Finetune touch experience for time grid events and introduce editing drawer (#22624) @noraleonte
+- [scheduler] Introduce the edit dialog form context & lifecycle contract (#23284) @rita-codes
+- [scheduler] Refactor edit dialog General tab into section components (#23206) @rita-codes
+- [scheduler] Replace copied Base UI internals with `@base-ui/react/internals` imports (#21972) @flaviendelangle
+- [scheduler] Hide resource picker when no resources are provided (#23290) @mustafajw07
+- [scheduler] Support multi-resource occurrences in `EventTimeline` (#23240) @mustafajw07
+
+#### `@mui/x-scheduler-premium@9.0.0-beta.8` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-scheduler@9.0.0-beta.8`.
+
+### Codemod
+
+#### `@mui/x-codemod@9.11.0`
+
+- [codemod] Remove unused `@babel/core` and `@babel/traverse` dependencies (#23245) @LukasTy
+
+### Docs
+
+- [docs] Add recipe for adding new rows from clipboard copy (#22913) @michelengelen
+- [docs] Clarify the package versions in v8 upgrade guides (#22376) @strazto
+- [docs] Replace README peer dependency lists with an npm install command (#23256) @LukasTy
+
+### Core
+
+- [code-infra] Align action pin version comments (#23238) @LukasTy
+
+### Miscellaneous
+
+- [chat] Drop the undeclared `@mui/icons-material` dependency (#23252) @LukasTy
+- [chat] Sanitize image part URLs and share the URL allow-list with markdown (#23058) @hasdfa
+- [test] Type the `PickersTextField` test stub instead of `as any` (#23194) @LukasTy
+
+## 9.10.1
+
+_Jul 23, 2026_
+
+We'd like to extend a big thank you to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🦮 Improve accessibility of the Charts and Pickers components.
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@kevincorizi-sbt, @mustafajw07, @SamanPandey-in
+
+The following team members contributed to this release:
+@brijeshb42, @hasdfa, @JCQuintas, @LukasTy, @michelengelen, @noraleonte, @rita-codes, @silviuaavram
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.10.1`
+
+- [data grid] Fix `getColumn` return type not reflecting that it can return undefined (#23165) @JCQuintas
+
+#### `@mui/x-data-grid-pro@9.10.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@9.10.1`.
+
+#### `@mui/x-data-grid-premium@9.10.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@9.10.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@9.10.1`
+
+- [pickers] Fix format placeholder brightness with a start adornment (#23189) @LukasTy
+
+#### `@mui/x-date-pickers-pro@9.10.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@9.10.1`, plus:
+
+- [DateRangePicker] Fix broken active range position underline in single input range fields (#23166) @LukasTy
+
+### Charts
+
+#### `@mui/x-charts@9.10.1`
+
+- [charts] Fix pie chart disappearing when an arc spans almost the full circle (#23145) @JCQuintas
+- [charts] Set `aria-hidden` on accessibility proxy divs at initialization (#23186) @kevincorizi-sbt
+- [charts] Fix keyboard navigation on series with different lengths (#23182) @JCQuintas
+- [charts] Fix out of bounds keyboard navigation (#23180) @silviuaavram
+
+#### `@mui/x-charts-pro@9.10.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@9.10.1`, plus:
+
+- [charts-pro] Fix highlight shifting on sampled bar charts (#23190) @noraleonte
+- [charts-pro] Sampled band highlight falls back to single-band width for Date/object values (#23024) @SamanPandey-in
+
+#### `@mui/x-charts-premium@9.10.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@9.10.1`.
+
+### Tree View
+
+#### `@mui/x-tree-view@9.10.1`
+
+- [TreeView] Fix selection propagation to exclude disabled items (#23012) @michelengelen
+
+#### `@mui/x-tree-view-pro@9.10.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@9.10.1`.
+
+### Scheduler
+
+#### `@mui/x-scheduler@9.0.0-beta.7`
+
+- [scheduler] Polish `EventCalendar` rendering for multi-resource events (#23161) @mustafajw07
+- [scheduler] Responsive header (#22954) @noraleonte
+
+#### `@mui/x-scheduler-premium@9.0.0-beta.7` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-scheduler@9.0.0-beta.7`, plus:
+
+- [scheduler-premium] Add the dependencies data model (#23117) @rita-codes
+- [scheduler-premium] Dependencies - Render the FS arrow (#23162) @rita-codes
+
+### Codemod
+
+#### `@mui/x-codemod@9.10.1`
+
+Internal changes.
+
+### Docs
+
+- [docs] Fix clearing, layout shift, and prop leak in Pickers demos (#23191) @LukasTy
+
+### Core
+
+- [code-infra] Validate working of specific code-infra canary (#23207) @brijeshb42
+
+### Miscellaneous
+
+- [chat] Normalize message part link URLs (#23187) @hasdfa
+- [x-chat] Fix object URL leaks for submitted attachments (#23198) @hasdfa
+- [internals] Make disposable types self-contained without `esnext.disposable` lib (#23164) @JCQuintas
+
 ## 9.10.0
 
 _Jul 17, 2026_

package/README.md

@@ -8,17 +8,7 @@ It's part of [MUI X](https://mui.com/x/), an open-core extension of our Core li
 Install the package in your project directory with:
 
 ```bash
-npm install @mui/x-data-grid
-```
-
-This component has the following peer dependencies that you need to install as well.
-
-```json
-"peerDependencies": {
-  "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
-  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
-},
+npm install @mui/x-data-grid @mui/material @emotion/react @emotion/styled
 ```
 
 ## Documentation

package/components/cell/GridEditInputCell.js

@@ -64,7 +64,7 @@ const GridEditInputCell = exports.GridEditInputCell = (0, _forwardRef.forwardRef
     const newValue = event.target.value;
     const column = apiRef.current.getColumn(field);
     let parsedValue = newValue;
-    if (column.valueParser) {
+    if (column?.valueParser) {
       parsedValue = column.valueParser(newValue, apiRef.current.getRow(id), column, apiRef);
     }
     setValueState(parsedValue);

package/components/cell/GridEditInputCell.mjs

@@ -57,7 +57,7 @@ const GridEditInputCell = forwardRef((props, ref) => {
     const newValue = event.target.value;
     const column = apiRef.current.getColumn(field);
     let parsedValue = newValue;
-    if (column.valueParser) {
+    if (column?.valueParser) {
       parsedValue = column.valueParser(newValue, apiRef.current.getRow(id), column, apiRef);
     }
     setValueState(parsedValue);

package/components/cell/GridEditLongTextCell.js

@@ -274,7 +274,7 @@ function GridEditLongTextarea(props) {
     const newValue = event.target.value;
     const column = apiRef.current.getColumn(field);
     let parsedValue = newValue;
-    if (column.valueParser) {
+    if (column?.valueParser) {
       parsedValue = column.valueParser(newValue, apiRef.current.getRow(id), column, apiRef);
     }
     setValueState(parsedValue);

package/components/cell/GridEditLongTextCell.mjs

@@ -266,7 +266,7 @@ function GridEditLongTextarea(props) {
     const newValue = event.target.value;
     const column = apiRef.current.getColumn(field);
     let parsedValue = newValue;
-    if (column.valueParser) {
+    if (column?.valueParser) {
       parsedValue = column.valueParser(newValue, apiRef.current.getRow(id), column, apiRef);
     }
     setValueState(parsedValue);

package/components/toolbarV8/Toolbar.js

@@ -16,11 +16,10 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _clsx = _interopRequireDefault(require("clsx"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
+var _ToolbarContext = require("@mui/x-internals/ToolbarContext");
 var _cssVariables = require("../../constants/cssVariables");
 var _gridClasses = require("../../constants/gridClasses");
-var _ToolbarContext = require("./ToolbarContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _utils = require("./utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["render", "className"];
 const useUtilityClasses = ownerState => {
@@ -67,127 +66,6 @@ const Toolbar = exports.Toolbar = (0, _forwardRef.forwardRef)(function Toolbar(p
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
-  const [focusableItemId, setFocusableItemId] = React.useState(null);
-  const [items, setItems] = React.useState([]);
-  const getSortedItems = React.useCallback(() => items.sort(_utils.sortByDocumentPosition), [items]);
-  const findEnabledItem = React.useCallback((startIndex, step, wrap = true) => {
-    let index = startIndex;
-    const sortedItems = getSortedItems();
-    const itemCount = sortedItems.length;
-
-    // Look for enabled items in the specified direction
-    for (let i = 0; i < itemCount; i += 1) {
-      index += step;
-
-      // Handle wrapping around the ends
-      if (index >= itemCount) {
-        if (!wrap) {
-          return -1;
-        }
-        index = 0;
-      } else if (index < 0) {
-        if (!wrap) {
-          return -1;
-        }
-        index = itemCount - 1;
-      }
-
-      // Return if we found an enabled item
-      if (!sortedItems[index].ref.current?.disabled && sortedItems[index].ref.current?.ariaDisabled !== 'true') {
-        return index;
-      }
-    }
-
-    // If we've checked all items and found none enabled
-    return -1;
-  }, [getSortedItems]);
-  const registerItem = React.useCallback((id, itemRef) => {
-    setItems(prevItems => [...prevItems, {
-      id,
-      ref: itemRef
-    }]);
-  }, []);
-  const unregisterItem = React.useCallback(id => {
-    setItems(prevItems => prevItems.filter(i => i.id !== id));
-  }, []);
-  const onItemKeyDown = React.useCallback(event => {
-    if (!focusableItemId) {
-      return;
-    }
-    const sortedItems = getSortedItems();
-    const focusableItemIndex = sortedItems.findIndex(item => item.id === focusableItemId);
-    let newIndex = -1;
-    if (event.key === 'ArrowRight') {
-      event.preventDefault();
-      newIndex = findEnabledItem(focusableItemIndex, 1);
-    } else if (event.key === 'ArrowLeft') {
-      event.preventDefault();
-      newIndex = findEnabledItem(focusableItemIndex, -1);
-    } else if (event.key === 'Home') {
-      event.preventDefault();
-      newIndex = findEnabledItem(-1, 1, false);
-    } else if (event.key === 'End') {
-      event.preventDefault();
-      newIndex = findEnabledItem(sortedItems.length, -1, false);
-    }
-
-    // TODO: Check why this is necessary
-    if (newIndex >= 0 && newIndex < sortedItems.length) {
-      const item = sortedItems[newIndex];
-      setFocusableItemId(item.id);
-      item.ref.current?.focus();
-    }
-  }, [getSortedItems, focusableItemId, findEnabledItem]);
-  const onItemFocus = React.useCallback(id => {
-    if (focusableItemId !== id) {
-      setFocusableItemId(id);
-    }
-  }, [focusableItemId, setFocusableItemId]);
-  const onItemDisabled = React.useCallback(id => {
-    const sortedItems = getSortedItems();
-    const currentIndex = sortedItems.findIndex(item => item.id === id);
-    const newIndex = findEnabledItem(currentIndex, 1);
-    if (newIndex >= 0 && newIndex < sortedItems.length) {
-      const item = sortedItems[newIndex];
-      setFocusableItemId(item.id);
-      item.ref.current?.focus();
-    }
-  }, [getSortedItems, findEnabledItem]);
-  React.useEffect(() => {
-    const sortedItems = getSortedItems();
-    if (sortedItems.length > 0) {
-      // Set initial focusable item
-      if (!focusableItemId) {
-        setFocusableItemId(sortedItems[0].id);
-        return;
-      }
-      const focusableItemIndex = sortedItems.findIndex(item => item.id === focusableItemId);
-      if (!sortedItems[focusableItemIndex]) {
-        // Last item has been removed from the items array
-        const item = sortedItems[sortedItems.length - 1];
-        if (item) {
-          setFocusableItemId(item.id);
-          item.ref.current?.focus();
-        }
-      } else if (focusableItemIndex === -1) {
-        // Focused item has been removed from the items array
-        const item = sortedItems[focusableItemIndex];
-        if (item) {
-          setFocusableItemId(item.id);
-          item.ref.current?.focus();
-        }
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [getSortedItems, findEnabledItem]);
-  const contextValue = React.useMemo(() => ({
-    focusableItemId,
-    registerItem,
-    unregisterItem,
-    onItemKeyDown,
-    onItemFocus,
-    onItemDisabled
-  }), [focusableItemId, registerItem, unregisterItem, onItemKeyDown, onItemFocus, onItemDisabled]);
   const element = (0, _useComponentRenderer.useComponentRenderer)(ToolbarRoot, render, (0, _extends2.default)({
     role: 'toolbar',
     'aria-orientation': 'horizontal',
@@ -196,8 +74,7 @@ const Toolbar = exports.Toolbar = (0, _forwardRef.forwardRef)(function Toolbar(p
   }, other, {
     ref
   }));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarContext.ToolbarContext.Provider, {
-    value: contextValue,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarContext.ToolbarContextProvider, {
     children: element
   });
 });

package/components/toolbarV8/Toolbar.mjs

@@ -10,11 +10,10 @@ import composeClasses from '@mui/utils/composeClasses';
 import clsx from 'clsx';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
+import { ToolbarContextProvider } from '@mui/x-internals/ToolbarContext';
 import { vars } from "../../constants/cssVariables.mjs";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.mjs";
-import { ToolbarContext } from "./ToolbarContext.mjs";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
-import { sortByDocumentPosition } from "./utils.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -60,127 +59,6 @@ const Toolbar = forwardRef(function Toolbar(props, ref) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
-  const [focusableItemId, setFocusableItemId] = React.useState(null);
-  const [items, setItems] = React.useState([]);
-  const getSortedItems = React.useCallback(() => items.sort(sortByDocumentPosition), [items]);
-  const findEnabledItem = React.useCallback((startIndex, step, wrap = true) => {
-    let index = startIndex;
-    const sortedItems = getSortedItems();
-    const itemCount = sortedItems.length;
-
-    // Look for enabled items in the specified direction
-    for (let i = 0; i < itemCount; i += 1) {
-      index += step;
-
-      // Handle wrapping around the ends
-      if (index >= itemCount) {
-        if (!wrap) {
-          return -1;
-        }
-        index = 0;
-      } else if (index < 0) {
-        if (!wrap) {
-          return -1;
-        }
-        index = itemCount - 1;
-      }
-
-      // Return if we found an enabled item
-      if (!sortedItems[index].ref.current?.disabled && sortedItems[index].ref.current?.ariaDisabled !== 'true') {
-        return index;
-      }
-    }
-
-    // If we've checked all items and found none enabled
-    return -1;
-  }, [getSortedItems]);
-  const registerItem = React.useCallback((id, itemRef) => {
-    setItems(prevItems => [...prevItems, {
-      id,
-      ref: itemRef
-    }]);
-  }, []);
-  const unregisterItem = React.useCallback(id => {
-    setItems(prevItems => prevItems.filter(i => i.id !== id));
-  }, []);
-  const onItemKeyDown = React.useCallback(event => {
-    if (!focusableItemId) {
-      return;
-    }
-    const sortedItems = getSortedItems();
-    const focusableItemIndex = sortedItems.findIndex(item => item.id === focusableItemId);
-    let newIndex = -1;
-    if (event.key === 'ArrowRight') {
-      event.preventDefault();
-      newIndex = findEnabledItem(focusableItemIndex, 1);
-    } else if (event.key === 'ArrowLeft') {
-      event.preventDefault();
-      newIndex = findEnabledItem(focusableItemIndex, -1);
-    } else if (event.key === 'Home') {
-      event.preventDefault();
-      newIndex = findEnabledItem(-1, 1, false);
-    } else if (event.key === 'End') {
-      event.preventDefault();
-      newIndex = findEnabledItem(sortedItems.length, -1, false);
-    }
-
-    // TODO: Check why this is necessary
-    if (newIndex >= 0 && newIndex < sortedItems.length) {
-      const item = sortedItems[newIndex];
-      setFocusableItemId(item.id);
-      item.ref.current?.focus();
-    }
-  }, [getSortedItems, focusableItemId, findEnabledItem]);
-  const onItemFocus = React.useCallback(id => {
-    if (focusableItemId !== id) {
-      setFocusableItemId(id);
-    }
-  }, [focusableItemId, setFocusableItemId]);
-  const onItemDisabled = React.useCallback(id => {
-    const sortedItems = getSortedItems();
-    const currentIndex = sortedItems.findIndex(item => item.id === id);
-    const newIndex = findEnabledItem(currentIndex, 1);
-    if (newIndex >= 0 && newIndex < sortedItems.length) {
-      const item = sortedItems[newIndex];
-      setFocusableItemId(item.id);
-      item.ref.current?.focus();
-    }
-  }, [getSortedItems, findEnabledItem]);
-  React.useEffect(() => {
-    const sortedItems = getSortedItems();
-    if (sortedItems.length > 0) {
-      // Set initial focusable item
-      if (!focusableItemId) {
-        setFocusableItemId(sortedItems[0].id);
-        return;
-      }
-      const focusableItemIndex = sortedItems.findIndex(item => item.id === focusableItemId);
-      if (!sortedItems[focusableItemIndex]) {
-        // Last item has been removed from the items array
-        const item = sortedItems[sortedItems.length - 1];
-        if (item) {
-          setFocusableItemId(item.id);
-          item.ref.current?.focus();
-        }
-      } else if (focusableItemIndex === -1) {
-        // Focused item has been removed from the items array
-        const item = sortedItems[focusableItemIndex];
-        if (item) {
-          setFocusableItemId(item.id);
-          item.ref.current?.focus();
-        }
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [getSortedItems, findEnabledItem]);
-  const contextValue = React.useMemo(() => ({
-    focusableItemId,
-    registerItem,
-    unregisterItem,
-    onItemKeyDown,
-    onItemFocus,
-    onItemDisabled
-  }), [focusableItemId, registerItem, unregisterItem, onItemKeyDown, onItemFocus, onItemDisabled]);
   const element = useComponentRenderer(ToolbarRoot, render, _extends({
     role: 'toolbar',
     'aria-orientation': 'horizontal',
@@ -189,8 +67,7 @@ const Toolbar = forwardRef(function Toolbar(props, ref) {
   }, other, {
     ref
   }));
-  return /*#__PURE__*/_jsx(ToolbarContext.Provider, {
-    value: contextValue,
+  return /*#__PURE__*/_jsx(ToolbarContextProvider, {
     children: element
   });
 });

package/components/toolbarV8/ToolbarButton.js

@@ -12,13 +12,13 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
-var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
+var _ToolbarContext = require("@mui/x-internals/ToolbarContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _ToolbarContext = require("./ToolbarContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["render", "onKeyDown", "onFocus", "disabled", "aria-disabled"];
+const _excluded = ["render", "onKeyDown", "onFocus", "onBlur", "disabled", "aria-disabled"],
+  _excluded2 = ["tabIndex"];
 /**
  * A button for performing actions from the toolbar.
  * It renders the `baseIconButton` slot.
@@ -33,59 +33,20 @@ const _excluded = ["render", "onKeyDown", "onFocus", "disabled", "aria-disabled"
  */
 const ToolbarButton = exports.ToolbarButton = (0, _forwardRef.forwardRef)(function ToolbarButton(props, ref) {
   const {
-      render,
-      onKeyDown,
-      onFocus,
-      disabled,
-      'aria-disabled': ariaDisabled
+      render
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const id = (0, _useId.default)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const buttonRef = React.useRef(null);
   const handleRef = (0, _useForkRef.default)(buttonRef, ref);
-  const {
-    focusableItemId,
-    registerItem,
-    unregisterItem,
-    onItemKeyDown,
-    onItemFocus,
-    onItemDisabled
-  } = (0, _ToolbarContext.useToolbarContext)();
-  const handleKeyDown = event => {
-    onItemKeyDown(event);
-    onKeyDown?.(event);
-  };
-  const handleFocus = event => {
-    onItemFocus(id);
-    onFocus?.(event);
-  };
-  React.useEffect(() => {
-    registerItem(id, buttonRef);
-    return () => unregisterItem(id);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const previousDisabled = React.useRef(disabled);
-  React.useEffect(() => {
-    if (previousDisabled.current !== disabled && disabled === true) {
-      onItemDisabled(id, disabled);
-    }
-    previousDisabled.current = disabled;
-  }, [disabled, id, onItemDisabled]);
-  const previousAriaDisabled = React.useRef(ariaDisabled);
-  React.useEffect(() => {
-    if (previousAriaDisabled.current !== ariaDisabled && ariaDisabled === true) {
-      onItemDisabled(id, true);
-    }
-    previousAriaDisabled.current = ariaDisabled;
-  }, [ariaDisabled, id, onItemDisabled]);
+  const _useRegisterToolbarBu = (0, _ToolbarContext.useRegisterToolbarButton)(props, buttonRef),
+    {
+      tabIndex
+    } = _useRegisterToolbarBu,
+    toolbarButtonProps = (0, _objectWithoutPropertiesLoose2.default)(_useRegisterToolbarBu, _excluded2);
   const element = (0, _useComponentRenderer.useComponentRenderer)(rootProps.slots.baseIconButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseIconButton, {
-    tabIndex: focusableItemId === id ? 0 : -1
-  }, other, {
-    disabled,
-    'aria-disabled': ariaDisabled,
-    onKeyDown: handleKeyDown,
-    onFocus: handleFocus,
+    tabIndex
+  }, other, toolbarButtonProps, {
     ref: handleRef
   }));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {