@mui/x-data-grid 9.10.1 → 9.11.0

package/CHANGELOG.md

@@ -1,5 +1,123 @@
 # 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_

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/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, {

package/components/toolbarV8/ToolbarButton.mjs

@@ -2,15 +2,15 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["render", "onKeyDown", "onFocus", "disabled", "aria-disabled"];
+const _excluded = ["render", "onKeyDown", "onFocus", "onBlur", "disabled", "aria-disabled"],
+  _excluded2 = ["tabIndex"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useForkRef from '@mui/utils/useForkRef';
-import useId from '@mui/utils/useId';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
+import { useRegisterToolbarButton } from '@mui/x-internals/ToolbarContext';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
-import { useToolbarContext } from "./ToolbarContext.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * A button for performing actions from the toolbar.
@@ -26,59 +26,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 const ToolbarButton = forwardRef(function ToolbarButton(props, ref) {
   const {
-      render,
-      onKeyDown,
-      onFocus,
-      disabled,
-      'aria-disabled': ariaDisabled
+      render
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const id = useId();
   const rootProps = useGridRootProps();
   const buttonRef = React.useRef(null);
   const handleRef = useForkRef(buttonRef, ref);
-  const {
-    focusableItemId,
-    registerItem,
-    unregisterItem,
-    onItemKeyDown,
-    onItemFocus,
-    onItemDisabled
-  } = 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 = useRegisterToolbarButton(props, buttonRef),
+    {
+      tabIndex
+    } = _useRegisterToolbarBu,
+    toolbarButtonProps = _objectWithoutPropertiesLoose(_useRegisterToolbarBu, _excluded2);
   const element = useComponentRenderer(rootProps.slots.baseIconButton, render, _extends({}, rootProps.slotProps?.baseIconButton, {
-    tabIndex: focusableItemId === id ? 0 : -1
-  }, other, {
-    disabled,
-    'aria-disabled': ariaDisabled,
-    onKeyDown: handleKeyDown,
-    onFocus: handleFocus,
+    tabIndex
+  }, other, toolbarButtonProps, {
     ref: handleRef
   }));
   return /*#__PURE__*/_jsx(React.Fragment, {

package/hooks/features/dataSource/useGridDataSourceBase.js

@@ -47,6 +47,11 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
   }, [currentStrategy]);
   const paginationModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginationModelSelector);
   const lastRequestId = React.useRef(0);
+  // `false` while a request is in flight, and for any request that errors or is discarded as
+  // stale. Lets the mount effect tell "rows are already displayed" from "the fetch never landed".
+  const rowsAreUpToDate = React.useRef(false);
+  // Requests that are still running and will apply their response when they settle.
+  const pendingRequestCount = React.useRef(0);
   const pollingIntervalRef = React.useRef(null);
   const onDataSourceErrorProp = props.onDataSourceError;
   const revalidateMs = props.dataSourceRevalidateMs;
@@ -91,6 +96,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
           keepChildrenExpanded
         }
       });
+      rowsAreUpToDate.current = true;
       if (standardRowsUpdateStrategyActive) {
         apiRef.current.setLoading(false);
       }
@@ -103,6 +109,8 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
     }
     const requestId = lastRequestId.current + 1;
     lastRequestId.current = requestId;
+    rowsAreUpToDate.current = false;
+    pendingRequestCount.current += 1;
     try {
       const getRowsResponse = await getRows(fetchParams);
       const cacheResponses = cacheChunkManager.splitResponse(fetchParams, getRowsResponse);
@@ -116,6 +124,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
             keepChildrenExpanded
           }
         });
+        rowsAreUpToDate.current = true;
       }
     } catch (originalError) {
       if (lastRequestId.current === requestId) {
@@ -138,6 +147,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
         }
       }
     } finally {
+      pendingRequestCount.current -= 1;
       if (standardRowsUpdateStrategyActive && lastRequestId.current === requestId) {
         apiRef.current.setLoading(false);
       }
@@ -313,12 +323,34 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
     }
   }, [revalidateMs, stopPolling]);
   React.useEffect(() => stopPolling, [stopPolling]);
+  const lastApiRef = React.useRef(apiRef);
+  const lastStrategy = React.useRef(currentStrategy);
+  const lastDataSource = React.useRef(props.dataSource);
   React.useEffect(() => {
+    // `<Activity mode="hidden">` leaves the root element in the document, a real unmount does not.
+    // Only discard the in-flight response in the latter case, so hiding lets the request land.
+    const rootElement = apiRef.current?.rootElementRef?.current ?? null;
+    const ignoreInFlightRequest = () => {
+      if (!rootElement?.isConnected) {
+        lastRequestId.current += 1;
+      }
+    };
+
     // Return early if the proper strategy isn't set yet
     // Context: https://github.com/mui/mui-x/issues/19650
     if (currentStrategy !== _utils2.DataSourceRowsUpdateStrategy.Default && currentStrategy !== _utils2.DataSourceRowsUpdateStrategy.LazyLoading && currentStrategy !== _utils2.DataSourceRowsUpdateStrategy.GroupedData && currentStrategy !== _utils2.DataSourceRowsUpdateStrategy.LazyLoadedGroupedData) {
       return undefined;
     }
+    const dependenciesChanged = lastApiRef.current !== apiRef || lastStrategy.current !== currentStrategy || lastDataSource.current !== props.dataSource;
+    lastApiRef.current = apiRef;
+    lastStrategy.current = currentStrategy;
+    lastDataSource.current = props.dataSource;
+
+    // Re-mounting the effect (`<Activity />` becoming visible again, for instance) must not
+    // re-fetch data that is already displayed.
+    if (!dependenciesChanged && (rowsAreUpToDate.current || pendingRequestCount.current > 0)) {
+      return ignoreInFlightRequest;
+    }
     if (props.dataSource) {
       stopPolling();
       // `dataSourceKeepPreviousData` only applies to the flat `Default` strategy (mirroring
@@ -332,10 +364,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
       apiRef.current.dataSource.cache.clear();
       apiRef.current.dataSource.fetchRows();
     }
-    return () => {
-      // ignore the current request on unmount
-      lastRequestId.current += 1;
-    };
+    return ignoreInFlightRequest;
   }, [apiRef, props.dataSource, props.dataSourceKeepPreviousData, currentStrategy, stopPolling]);
   React.useEffect(() => {
     // `dataSourceKeepPreviousData` is a no-op for tree data and row grouping: those

package/hooks/features/dataSource/useGridDataSourceBase.mjs

@@ -40,6 +40,11 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
   }, [currentStrategy]);
   const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
   const lastRequestId = React.useRef(0);
+  // `false` while a request is in flight, and for any request that errors or is discarded as
+  // stale. Lets the mount effect tell "rows are already displayed" from "the fetch never landed".
+  const rowsAreUpToDate = React.useRef(false);
+  // Requests that are still running and will apply their response when they settle.
+  const pendingRequestCount = React.useRef(0);
   const pollingIntervalRef = React.useRef(null);
   const onDataSourceErrorProp = props.onDataSourceError;
   const revalidateMs = props.dataSourceRevalidateMs;
@@ -84,6 +89,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
           keepChildrenExpanded
         }
       });
+      rowsAreUpToDate.current = true;
       if (standardRowsUpdateStrategyActive) {
         apiRef.current.setLoading(false);
       }
@@ -96,6 +102,8 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
     }
     const requestId = lastRequestId.current + 1;
     lastRequestId.current = requestId;
+    rowsAreUpToDate.current = false;
+    pendingRequestCount.current += 1;
     try {
       const getRowsResponse = await getRows(fetchParams);
       const cacheResponses = cacheChunkManager.splitResponse(fetchParams, getRowsResponse);
@@ -109,6 +117,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
             keepChildrenExpanded
           }
         });
+        rowsAreUpToDate.current = true;
       }
     } catch (originalError) {
       if (lastRequestId.current === requestId) {
@@ -131,6 +140,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
         }
       }
     } finally {
+      pendingRequestCount.current -= 1;
       if (standardRowsUpdateStrategyActive && lastRequestId.current === requestId) {
         apiRef.current.setLoading(false);
       }
@@ -306,12 +316,34 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
     }
   }, [revalidateMs, stopPolling]);
   React.useEffect(() => stopPolling, [stopPolling]);
+  const lastApiRef = React.useRef(apiRef);
+  const lastStrategy = React.useRef(currentStrategy);
+  const lastDataSource = React.useRef(props.dataSource);
   React.useEffect(() => {
+    // `<Activity mode="hidden">` leaves the root element in the document, a real unmount does not.
+    // Only discard the in-flight response in the latter case, so hiding lets the request land.
+    const rootElement = apiRef.current?.rootElementRef?.current ?? null;
+    const ignoreInFlightRequest = () => {
+      if (!rootElement?.isConnected) {
+        lastRequestId.current += 1;
+      }
+    };
+
     // Return early if the proper strategy isn't set yet
     // Context: https://github.com/mui/mui-x/issues/19650
     if (currentStrategy !== DataSourceRowsUpdateStrategy.Default && currentStrategy !== DataSourceRowsUpdateStrategy.LazyLoading && currentStrategy !== DataSourceRowsUpdateStrategy.GroupedData && currentStrategy !== DataSourceRowsUpdateStrategy.LazyLoadedGroupedData) {
       return undefined;
     }
+    const dependenciesChanged = lastApiRef.current !== apiRef || lastStrategy.current !== currentStrategy || lastDataSource.current !== props.dataSource;
+    lastApiRef.current = apiRef;
+    lastStrategy.current = currentStrategy;
+    lastDataSource.current = props.dataSource;
+
+    // Re-mounting the effect (`<Activity />` becoming visible again, for instance) must not
+    // re-fetch data that is already displayed.
+    if (!dependenciesChanged && (rowsAreUpToDate.current || pendingRequestCount.current > 0)) {
+      return ignoreInFlightRequest;
+    }
     if (props.dataSource) {
       stopPolling();
       // `dataSourceKeepPreviousData` only applies to the flat `Default` strategy (mirroring
@@ -325,10 +357,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
       apiRef.current.dataSource.cache.clear();
       apiRef.current.dataSource.fetchRows();
     }
-    return () => {
-      // ignore the current request on unmount
-      lastRequestId.current += 1;
-    };
+    return ignoreInFlightRequest;
   }, [apiRef, props.dataSource, props.dataSourceKeepPreviousData, currentStrategy, stopPolling]);
   React.useEffect(() => {
     // `dataSourceKeepPreviousData` is a no-op for tree data and row grouping: those

package/hooks/features/rows/gridRowsUtils.js

@@ -261,7 +261,23 @@ const updateCacheWithNewRows = ({
       }
 
       // Update the data row lookups.
-      dataRowIdToModelLookup[id] = (0, _extends2.default)({}, oldRow, partialRow);
+      // Prototype-preservation rules:
+      //   1. If partialRow is a class instance (non-plain object), use its prototype — the
+      //      caller is passing in a fully-constructed instance and owns the prototype chain.
+      //   2. If partialRow is a plain object (Object.prototype), prefer oldRow's prototype so
+      //      that a partial-update object does not silently discard the existing row's class.
+      //   3. If both are plain objects the result is also a plain object (no-op).
+      //
+      // Note: private class fields (#field syntax) cannot be preserved through a spread-style
+      // merge because the brand check is tied to the original instance. Rows that rely on
+      // private fields must supply a fully-constructed instance as partialRow (rule 1 above)
+      // rather than a plain-object partial update.
+      const partialRowProto = Object.getPrototypeOf(partialRow);
+      const isPartialRowPlain = partialRowProto === Object.prototype || partialRowProto === null;
+      const proto = isPartialRowPlain ? Object.getPrototypeOf(oldRow) : partialRowProto;
+      const merged = Object.create(proto);
+      Object.assign(merged, oldRow, partialRow);
+      dataRowIdToModelLookup[id] = merged;
       return;
     }
 

package/hooks/features/rows/gridRowsUtils.mjs

@@ -242,7 +242,23 @@ export const updateCacheWithNewRows = ({
       }
 
       // Update the data row lookups.
-      dataRowIdToModelLookup[id] = _extends({}, oldRow, partialRow);
+      // Prototype-preservation rules:
+      //   1. If partialRow is a class instance (non-plain object), use its prototype — the
+      //      caller is passing in a fully-constructed instance and owns the prototype chain.
+      //   2. If partialRow is a plain object (Object.prototype), prefer oldRow's prototype so
+      //      that a partial-update object does not silently discard the existing row's class.
+      //   3. If both are plain objects the result is also a plain object (no-op).
+      //
+      // Note: private class fields (#field syntax) cannot be preserved through a spread-style
+      // merge because the brand check is tied to the original instance. Rows that rely on
+      // private fields must supply a fully-constructed instance as partialRow (rule 1 above)
+      // rather than a plain-object partial update.
+      const partialRowProto = Object.getPrototypeOf(partialRow);
+      const isPartialRowPlain = partialRowProto === Object.prototype || partialRowProto === null;
+      const proto = isPartialRowPlain ? Object.getPrototypeOf(oldRow) : partialRowProto;
+      const merged = Object.create(proto);
+      Object.assign(merged, oldRow, partialRow);
+      dataRowIdToModelLookup[id] = merged;
       return;
     }
 

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v9.10.1
+ * @mui/x-data-grid v9.11.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v9.10.1
+ * @mui/x-data-grid v9.11.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "9.10.1",
+  "version": "9.11.0",
   "author": "MUI Team",
   "description": "The Community plan edition of the MUI X Data Grid components.",
   "license": "MIT",
@@ -39,12 +39,12 @@
   "dependencies": {
     "@babel/runtime": "^7.29.7",
     "@base-ui/utils": "^0.3.1",
-    "@mui/utils": "^9.2.0",
+    "@mui/utils": "^9.3.0",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "use-sync-external-store": "^1.6.0",
-    "@mui/x-internals": "^9.10.1",
-    "@mui/x-virtualizer": "0.6.2"
+    "@mui/x-internals": "^9.11.0",
+    "@mui/x-virtualizer": "0.6.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/components/toolbarV8/ToolbarContext.d.mts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-export interface ToolbarContextValue {
-  focusableItemId: string | null;
-  registerItem: (id: string, ref: React.RefObject<HTMLButtonElement | null>) => void;
-  unregisterItem: (id: string) => void;
-  onItemKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
-  onItemFocus: (id: string) => void;
-  onItemDisabled: (id: string, disabled: boolean) => void;
-}
-export declare const ToolbarContext: React.Context<ToolbarContextValue | undefined>;
-export declare function useToolbarContext(): ToolbarContextValue;

package/components/toolbarV8/ToolbarContext.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-export interface ToolbarContextValue {
-  focusableItemId: string | null;
-  registerItem: (id: string, ref: React.RefObject<HTMLButtonElement | null>) => void;
-  unregisterItem: (id: string) => void;
-  onItemKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
-  onItemFocus: (id: string) => void;
-  onItemDisabled: (id: string, disabled: boolean) => void;
-}
-export declare const ToolbarContext: React.Context<ToolbarContextValue | undefined>;
-export declare function useToolbarContext(): ToolbarContextValue;

package/components/toolbarV8/ToolbarContext.js

@@ -1,21 +0,0 @@
-"use strict";
-'use client';
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ToolbarContext = void 0;
-exports.useToolbarContext = useToolbarContext;
-var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
-var React = _interopRequireWildcard(require("react"));
-const ToolbarContext = exports.ToolbarContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== "production") ToolbarContext.displayName = "ToolbarContext";
-function useToolbarContext() {
-  const context = React.useContext(ToolbarContext);
-  if (context === undefined) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X: Missing context. Toolbar subcomponents must be placed within a <Toolbar /> component.' : (0, _formatErrorMessage2.default)(63));
-  }
-  return context;
-}

package/components/toolbarV8/ToolbarContext.mjs

@@ -1,13 +0,0 @@
-'use client';
-
-import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
-import * as React from 'react';
-export const ToolbarContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== "production") ToolbarContext.displayName = "ToolbarContext";
-export function useToolbarContext() {
-  const context = React.useContext(ToolbarContext);
-  if (context === undefined) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X: Missing context. Toolbar subcomponents must be placed within a <Toolbar /> component.' : _formatErrorMessage(63));
-  }
-  return context;
-}

package/components/toolbarV8/utils.d.mts

@@ -1,5 +0,0 @@
-export declare function sortByDocumentPosition(a: {
-  ref: React.RefObject<HTMLButtonElement | null>;
-}, b: {
-  ref: React.RefObject<HTMLButtonElement | null>;
-}): -1 | 0 | 1;

package/components/toolbarV8/utils.d.ts

@@ -1,5 +0,0 @@
-export declare function sortByDocumentPosition(a: {
-  ref: React.RefObject<HTMLButtonElement | null>;
-}, b: {
-  ref: React.RefObject<HTMLButtonElement | null>;
-}): -1 | 0 | 1;

package/components/toolbarV8/utils.js

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.sortByDocumentPosition = sortByDocumentPosition;
-/* eslint-disable no-bitwise */
-function sortByDocumentPosition(a, b) {
-  if (!a.ref.current || !b.ref.current) {
-    return 0;
-  }
-  const position = a.ref.current.compareDocumentPosition(b.ref.current);
-  if (!position) {
-    return 0;
-  }
-  if (position & Node.DOCUMENT_POSITION_FOLLOWING || position & Node.DOCUMENT_POSITION_CONTAINED_BY) {
-    return -1;
-  }
-  if (position & Node.DOCUMENT_POSITION_PRECEDING || position & Node.DOCUMENT_POSITION_CONTAINS) {
-    return 1;
-  }
-  return 0;
-}

package/components/toolbarV8/utils.mjs

@@ -1,17 +0,0 @@
-/* eslint-disable no-bitwise */
-export function sortByDocumentPosition(a, b) {
-  if (!a.ref.current || !b.ref.current) {
-    return 0;
-  }
-  const position = a.ref.current.compareDocumentPosition(b.ref.current);
-  if (!position) {
-    return 0;
-  }
-  if (position & Node.DOCUMENT_POSITION_FOLLOWING || position & Node.DOCUMENT_POSITION_CONTAINED_BY) {
-    return -1;
-  }
-  if (position & Node.DOCUMENT_POSITION_PRECEDING || position & Node.DOCUMENT_POSITION_CONTAINS) {
-    return 1;
-  }
-  return 0;
-}