@mui/x-data-grid 8.25.0 → 8.26.0

package/CHANGELOG.md

@@ -5,6 +5,90 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.26.0
+
+_Jan 22, 2026_
+
+We'd like to extend a big thank you to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔄 Data Grid now supports undo and redo actions. See the [Undo and redo](https://mui.com/x/react-data-grid/undo-redo/) page for details about out-of-the-box support and customization options.
+- 🐞 Bugfixes
+
+Special thanks go out to these community members for their valuable contributions:
+@jhe-iqbis
+
+The following team members contributed to this release:
+@arminmeh, @cherniavskii, @flaviendelangle, @JCQuintas, @romgrk
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.26.0`
+
+- [DataGrid] Add `onMenuOpen()` and `onMenuClose()` event handlers in `GridActionsCell` (#20994) @jhe-iqbis
+- [DataGrid] Fix scroll position when virtualization is disabled (#20958) @romgrk
+
+#### `@mui/x-data-grid-pro@8.26.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.26.0`.
+
+#### `@mui/x-data-grid-premium@8.26.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.26.0`, plus:
+
+- [DataGridPremium] Undo and redo (#20993) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.26.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.26.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.26.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.26.0`
+
+Internal changes.
+
+#### `@mui/x-charts-pro@8.26.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.26.0`.
+
+#### `@mui/x-charts-premium@8.26.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.26.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.26.0`
+
+- [tree view] Fix `props.id` not passed to the root element (#20976) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.26.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.26.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.26.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Recipe for lazy loading DataGrid's detail panels with auto height (#20995) @arminmeh
+
+### Core
+
+- [code-infra] Update `master` to `v8` references (#20864) @JCQuintas
+- [code-infra] Update v8 branch tags (#20926) @JCQuintas
+- [code-infra] V8 changes in master (#20919) @JCQuintas
+- [code-infra] Allow user to select target branch if it exists for current major (#21005) @JCQuintas
+- [internal] Set up shared instructions for coding agents (#21000) @cherniavskii
+
 ## 8.25.0
 
 <!-- generated comparing v8.24.0..master -->

package/components/cell/GridActionsCell.d.ts

@@ -1,7 +1,9 @@
 import * as React from 'react';
+import { GridRowParams } from "../../models/params/gridRowParams.js";
 import { GridRenderCellParams } from "../../models/params/gridCellParams.js";
 import { GridMenuProps } from "../menu/GridMenu.js";
-interface GridActionsCellProps extends Omit<GridRenderCellParams, 'api'> {
+import { GridValidRowModel, GridTreeNodeWithRender } from "../../models/gridRows.js";
+interface GridActionsCellProps<R extends GridValidRowModel = any, V = any, F = V, N extends GridTreeNodeWithRender = GridTreeNodeWithRender> extends Omit<GridRenderCellParams<R, V, F, N>, 'api'> {
   api?: GridRenderCellParams['api'];
   position?: GridMenuProps['position'];
   children: React.ReactNode;
@@ -12,8 +14,26 @@ interface GridActionsCellProps extends Omit<GridRenderCellParams, 'api'> {
    * @default false
    */
   suppressChildrenValidation?: boolean;
+  /**
+   * Callback to fire before the menu gets opened.
+   * Use this callback to prevent the menu from opening.
+   *
+   * @param {GridRowParams<R>} params Row parameters.
+   * @param {React.MouseEvent<HTMLElement>} event The event triggering this callback.
+   * @returns {boolean} if the menu should be opened.
+   */
+  onMenuOpen?: (params: GridRowParams<R>, event: React.MouseEvent<HTMLElement>) => boolean;
+  /**
+   * Callback to fire before the menu gets closed.
+   * Use this callback to prevent the menu from closing.
+   *
+   * @param {GridRowParams<R>} params Row parameters.
+   * @param {React.MouseEvent<HTMLElement> | React.KeyboardEvent | MouseEvent | TouchEvent | undefined} event The event triggering this callback.
+   * @returns {boolean} if the menu should be closed.
+   */
+  onMenuClose?: (params: GridRowParams<R>, event: React.MouseEvent<HTMLElement> | React.KeyboardEvent | MouseEvent | TouchEvent | undefined) => boolean;
 }
-declare function GridActionsCell(props: GridActionsCellProps): import("react/jsx-runtime").JSX.Element;
+declare function GridActionsCell<R extends GridValidRowModel = any, V = any, F = V, N extends GridTreeNodeWithRender = GridTreeNodeWithRender>(props: GridActionsCellProps<R, V, F, N>): import("react/jsx-runtime").JSX.Element;
 declare namespace GridActionsCell {
   var propTypes: any;
 }

package/components/cell/GridActionsCell.js

@@ -21,13 +21,16 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _GridActionsCellItem = require("./GridActionsCellItem");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["api", "colDef", "id", "hasFocus", "isEditable", "field", "value", "formattedValue", "row", "rowNode", "cellMode", "tabIndex", "position", "children", "suppressChildrenValidation"];
+const _excluded = ["api", "colDef", "id", "hasFocus", "isEditable", "field", "value", "formattedValue", "row", "rowNode", "cellMode", "tabIndex", "position", "onMenuOpen", "onMenuClose", "children", "suppressChildrenValidation"];
 const hasActions = colDef => typeof colDef.getActions === 'function';
 function GridActionsCell(props) {
   const {
+      id,
       hasFocus,
       tabIndex,
       position = 'bottom-end',
+      onMenuOpen,
+      onMenuClose,
       children,
       suppressChildrenValidation
     } = props,
@@ -43,6 +46,7 @@ function GridActionsCell(props) {
   const menuId = (0, _useId.default)();
   const buttonId = (0, _useId.default)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const rowParams = apiRef.current.getRowParams(id);
   const actions = [];
   React.Children.forEach(children, child => {
     // Unwrap React.Fragment
@@ -101,21 +105,27 @@ If this is intentional, you can suppress this warning by passing the \`suppressC
       setFocusedButtonIndex(numberOfButtons - 1);
     }
   }, [focusedButtonIndex, numberOfButtons]);
-  const showMenu = () => {
+  const showMenu = event => {
+    if (onMenuOpen && !onMenuOpen(rowParams, event)) {
+      return;
+    }
     setOpen(true);
     setFocusedButtonIndex(numberOfButtons - 1);
     ignoreCallToFocus.current = true;
   };
-  const hideMenu = () => {
+  const hideMenu = event => {
+    if (onMenuClose && !onMenuClose(rowParams, event)) {
+      return;
+    }
     setOpen(false);
   };
   const toggleMenu = event => {
     event.stopPropagation();
     event.preventDefault();
     if (open) {
-      hideMenu();
+      hideMenu(event);
     } else {
-      showMenu();
+      showMenu(event);
     }
   };
   const handleTouchRippleRef = index => instance => {

package/components/toolbar/GridToolbar.d.ts

@@ -2,6 +2,11 @@ import { GridToolbarContainerProps } from "../containers/GridToolbarContainer.js
 import { GridToolbarExportProps } from "./GridToolbarExport.js";
 import { GridToolbarQuickFilterProps } from "./GridToolbarQuickFilter.js";
 export interface GridToolbarProps extends GridToolbarContainerProps, GridToolbarExportProps {
+  /**
+   * Show the history controls (undo/redo buttons).
+   * @default true
+   */
+  showHistoryControls?: boolean;
   /**
    * Show the quick filter component.
    * @default true

package/components/toolbar/GridToolbar.js

@@ -74,6 +74,11 @@ process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
     quickFilterParser: _propTypes.default.func,
     slotProps: _propTypes.default.object
   }),
+  /**
+   * Show the history controls (undo/redo buttons).
+   * @default true
+   */
+  showHistoryControls: _propTypes.default.bool,
   /**
    * Show the quick filter component.
    * @default true

package/components/toolbarV8/GridToolbar.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { GridSlotProps } from "../../models/gridSlotsComponentsProps.js";
 interface GridToolbarInternalProps {
-  additionalItems?: React.ReactNode;
+  mainControls?: React.ReactNode;
   additionalExportMenuItems?: (onMenuItemClick: () => void) => React.ReactNode;
 }
 export type GridToolbarProps = GridSlotProps['toolbar'] & GridToolbarInternalProps;

package/components/toolbarV8/GridToolbar.js

@@ -31,7 +31,7 @@ var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className"],
   _excluded2 = ["className"],
-  _excluded3 = ["showQuickFilter", "quickFilterProps", "csvOptions", "printOptions", "additionalItems", "additionalExportMenuItems"];
+  _excluded3 = ["showQuickFilter", "quickFilterProps", "csvOptions", "printOptions", "mainControls", "additionalExportMenuItems"];
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -93,7 +93,7 @@ function GridToolbar(props) {
       quickFilterProps,
       csvOptions,
       printOptions,
-      additionalItems,
+      mainControls,
       additionalExportMenuItems
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded3);
@@ -108,30 +108,32 @@ function GridToolbar(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Toolbar.Toolbar, (0, _extends2.default)({}, other, {
     children: [rootProps.label && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarLabel, {
       children: rootProps.label
-    }), !rootProps.disableColumnSelector && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
-      title: apiRef.current.getLocaleText('toolbarColumns'),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_columnsPanel.ColumnsPanelTrigger, {
-        render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarButton.ToolbarButton, {}),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnSelectorIcon, {
-          fontSize: "small"
+    }), mainControls || /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [!rootProps.disableColumnSelector && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
+        title: apiRef.current.getLocaleText('toolbarColumns'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_columnsPanel.ColumnsPanelTrigger, {
+          render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarButton.ToolbarButton, {}),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnSelectorIcon, {
+            fontSize: "small"
+          })
         })
-      })
-    }), !rootProps.disableColumnFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
-      title: apiRef.current.getLocaleText('toolbarFilters'),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_filterPanel.FilterPanelTrigger, {
-        render: (triggerProps, state) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarButton.ToolbarButton, (0, _extends2.default)({}, triggerProps, {
-          color: state.filterCount > 0 ? 'primary' : 'default',
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, {
-            badgeContent: state.filterCount,
-            color: "primary",
-            variant: "dot",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.openFilterButtonIcon, {
-              fontSize: "small"
+      }), !rootProps.disableColumnFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
+        title: apiRef.current.getLocaleText('toolbarFilters'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_filterPanel.FilterPanelTrigger, {
+          render: (triggerProps, state) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarButton.ToolbarButton, (0, _extends2.default)({}, triggerProps, {
+            color: state.filterCount > 0 ? 'primary' : 'default',
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, {
+              badgeContent: state.filterCount,
+              color: "primary",
+              variant: "dot",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.openFilterButtonIcon, {
+                fontSize: "small"
+              })
             })
-          })
-        }))
-      })
-    }), additionalItems, showExportMenu && (!rootProps.disableColumnFilter || !rootProps.disableColumnSelector) && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarDivider, {}), showExportMenu && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+          }))
+        })
+      })]
+    }), showExportMenu && (!rootProps.disableColumnFilter || !rootProps.disableColumnSelector) && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarDivider, {}), showExportMenu && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
         title: apiRef.current.getLocaleText('toolbarExport'),
         disableInteractive: exportMenuOpen,

package/constants/localeTextConstants.js

@@ -17,6 +17,9 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
   toolbarDensityCompact: 'Compact',
   toolbarDensityStandard: 'Standard',
   toolbarDensityComfortable: 'Comfortable',
+  // Undo/redo toolbar button text
+  toolbarUndo: 'Undo',
+  toolbarRedo: 'Redo',
   // Columns selector toolbar button text
   toolbarColumns: 'Columns',
   toolbarColumnsLabel: 'Select columns',

package/esm/components/cell/GridActionsCell.d.ts

@@ -1,7 +1,9 @@
 import * as React from 'react';
+import { GridRowParams } from "../../models/params/gridRowParams.js";
 import { GridRenderCellParams } from "../../models/params/gridCellParams.js";
 import { GridMenuProps } from "../menu/GridMenu.js";
-interface GridActionsCellProps extends Omit<GridRenderCellParams, 'api'> {
+import { GridValidRowModel, GridTreeNodeWithRender } from "../../models/gridRows.js";
+interface GridActionsCellProps<R extends GridValidRowModel = any, V = any, F = V, N extends GridTreeNodeWithRender = GridTreeNodeWithRender> extends Omit<GridRenderCellParams<R, V, F, N>, 'api'> {
   api?: GridRenderCellParams['api'];
   position?: GridMenuProps['position'];
   children: React.ReactNode;
@@ -12,8 +14,26 @@ interface GridActionsCellProps extends Omit<GridRenderCellParams, 'api'> {
    * @default false
    */
   suppressChildrenValidation?: boolean;
+  /**
+   * Callback to fire before the menu gets opened.
+   * Use this callback to prevent the menu from opening.
+   *
+   * @param {GridRowParams<R>} params Row parameters.
+   * @param {React.MouseEvent<HTMLElement>} event The event triggering this callback.
+   * @returns {boolean} if the menu should be opened.
+   */
+  onMenuOpen?: (params: GridRowParams<R>, event: React.MouseEvent<HTMLElement>) => boolean;
+  /**
+   * Callback to fire before the menu gets closed.
+   * Use this callback to prevent the menu from closing.
+   *
+   * @param {GridRowParams<R>} params Row parameters.
+   * @param {React.MouseEvent<HTMLElement> | React.KeyboardEvent | MouseEvent | TouchEvent | undefined} event The event triggering this callback.
+   * @returns {boolean} if the menu should be closed.
+   */
+  onMenuClose?: (params: GridRowParams<R>, event: React.MouseEvent<HTMLElement> | React.KeyboardEvent | MouseEvent | TouchEvent | undefined) => boolean;
 }
-declare function GridActionsCell(props: GridActionsCellProps): import("react/jsx-runtime").JSX.Element;
+declare function GridActionsCell<R extends GridValidRowModel = any, V = any, F = V, N extends GridTreeNodeWithRender = GridTreeNodeWithRender>(props: GridActionsCellProps<R, V, F, N>): import("react/jsx-runtime").JSX.Element;
 declare namespace GridActionsCell {
   var propTypes: any;
 }

package/esm/components/cell/GridActionsCell.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["api", "colDef", "id", "hasFocus", "isEditable", "field", "value", "formattedValue", "row", "rowNode", "cellMode", "tabIndex", "position", "children", "suppressChildrenValidation"];
+const _excluded = ["api", "colDef", "id", "hasFocus", "isEditable", "field", "value", "formattedValue", "row", "rowNode", "cellMode", "tabIndex", "position", "onMenuOpen", "onMenuClose", "children", "suppressChildrenValidation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useRtl } from '@mui/system/RtlProvider';
@@ -17,9 +17,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const hasActions = colDef => typeof colDef.getActions === 'function';
 function GridActionsCell(props) {
   const {
+      id,
       hasFocus,
       tabIndex,
       position = 'bottom-end',
+      onMenuOpen,
+      onMenuClose,
       children,
       suppressChildrenValidation
     } = props,
@@ -35,6 +38,7 @@ function GridActionsCell(props) {
   const menuId = useId();
   const buttonId = useId();
   const rootProps = useGridRootProps();
+  const rowParams = apiRef.current.getRowParams(id);
   const actions = [];
   React.Children.forEach(children, child => {
     // Unwrap React.Fragment
@@ -93,21 +97,27 @@ If this is intentional, you can suppress this warning by passing the \`suppressC
       setFocusedButtonIndex(numberOfButtons - 1);
     }
   }, [focusedButtonIndex, numberOfButtons]);
-  const showMenu = () => {
+  const showMenu = event => {
+    if (onMenuOpen && !onMenuOpen(rowParams, event)) {
+      return;
+    }
     setOpen(true);
     setFocusedButtonIndex(numberOfButtons - 1);
     ignoreCallToFocus.current = true;
   };
-  const hideMenu = () => {
+  const hideMenu = event => {
+    if (onMenuClose && !onMenuClose(rowParams, event)) {
+      return;
+    }
     setOpen(false);
   };
   const toggleMenu = event => {
     event.stopPropagation();
     event.preventDefault();
     if (open) {
-      hideMenu();
+      hideMenu(event);
     } else {
-      showMenu();
+      showMenu(event);
     }
   };
   const handleTouchRippleRef = index => instance => {

package/esm/components/toolbar/GridToolbar.d.ts

@@ -2,6 +2,11 @@ import { GridToolbarContainerProps } from "../containers/GridToolbarContainer.js
 import { GridToolbarExportProps } from "./GridToolbarExport.js";
 import { GridToolbarQuickFilterProps } from "./GridToolbarQuickFilter.js";
 export interface GridToolbarProps extends GridToolbarContainerProps, GridToolbarExportProps {
+  /**
+   * Show the history controls (undo/redo buttons).
+   * @default true
+   */
+  showHistoryControls?: boolean;
   /**
    * Show the quick filter component.
    * @default true

package/esm/components/toolbar/GridToolbar.js

@@ -68,6 +68,11 @@ process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
     quickFilterParser: PropTypes.func,
     slotProps: PropTypes.object
   }),
+  /**
+   * Show the history controls (undo/redo buttons).
+   * @default true
+   */
+  showHistoryControls: PropTypes.bool,
   /**
    * Show the quick filter component.
    * @default true

package/esm/components/toolbarV8/GridToolbar.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { GridSlotProps } from "../../models/gridSlotsComponentsProps.js";
 interface GridToolbarInternalProps {
-  additionalItems?: React.ReactNode;
+  mainControls?: React.ReactNode;
   additionalExportMenuItems?: (onMenuItemClick: () => void) => React.ReactNode;
 }
 export type GridToolbarProps = GridSlotProps['toolbar'] & GridToolbarInternalProps;

package/esm/components/toolbarV8/GridToolbar.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["className"],
   _excluded2 = ["className"],
-  _excluded3 = ["showQuickFilter", "quickFilterProps", "csvOptions", "printOptions", "additionalItems", "additionalExportMenuItems"];
+  _excluded3 = ["showQuickFilter", "quickFilterProps", "csvOptions", "printOptions", "mainControls", "additionalExportMenuItems"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useId from '@mui/utils/useId';
@@ -84,7 +84,7 @@ function GridToolbar(props) {
       quickFilterProps,
       csvOptions,
       printOptions,
-      additionalItems,
+      mainControls,
       additionalExportMenuItems
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded3);
@@ -99,30 +99,32 @@ function GridToolbar(props) {
   return /*#__PURE__*/_jsxs(Toolbar, _extends({}, other, {
     children: [rootProps.label && /*#__PURE__*/_jsx(GridToolbarLabel, {
       children: rootProps.label
-    }), !rootProps.disableColumnSelector && /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
-      title: apiRef.current.getLocaleText('toolbarColumns'),
-      children: /*#__PURE__*/_jsx(ColumnsPanelTrigger, {
-        render: /*#__PURE__*/_jsx(ToolbarButton, {}),
-        children: /*#__PURE__*/_jsx(rootProps.slots.columnSelectorIcon, {
-          fontSize: "small"
+    }), mainControls || /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [!rootProps.disableColumnSelector && /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
+        title: apiRef.current.getLocaleText('toolbarColumns'),
+        children: /*#__PURE__*/_jsx(ColumnsPanelTrigger, {
+          render: /*#__PURE__*/_jsx(ToolbarButton, {}),
+          children: /*#__PURE__*/_jsx(rootProps.slots.columnSelectorIcon, {
+            fontSize: "small"
+          })
         })
-      })
-    }), !rootProps.disableColumnFilter && /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
-      title: apiRef.current.getLocaleText('toolbarFilters'),
-      children: /*#__PURE__*/_jsx(FilterPanelTrigger, {
-        render: (triggerProps, state) => /*#__PURE__*/_jsx(ToolbarButton, _extends({}, triggerProps, {
-          color: state.filterCount > 0 ? 'primary' : 'default',
-          children: /*#__PURE__*/_jsx(rootProps.slots.baseBadge, {
-            badgeContent: state.filterCount,
-            color: "primary",
-            variant: "dot",
-            children: /*#__PURE__*/_jsx(rootProps.slots.openFilterButtonIcon, {
-              fontSize: "small"
+      }), !rootProps.disableColumnFilter && /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
+        title: apiRef.current.getLocaleText('toolbarFilters'),
+        children: /*#__PURE__*/_jsx(FilterPanelTrigger, {
+          render: (triggerProps, state) => /*#__PURE__*/_jsx(ToolbarButton, _extends({}, triggerProps, {
+            color: state.filterCount > 0 ? 'primary' : 'default',
+            children: /*#__PURE__*/_jsx(rootProps.slots.baseBadge, {
+              badgeContent: state.filterCount,
+              color: "primary",
+              variant: "dot",
+              children: /*#__PURE__*/_jsx(rootProps.slots.openFilterButtonIcon, {
+                fontSize: "small"
+              })
             })
-          })
-        }))
-      })
-    }), additionalItems, showExportMenu && (!rootProps.disableColumnFilter || !rootProps.disableColumnSelector) && /*#__PURE__*/_jsx(GridToolbarDivider, {}), showExportMenu && /*#__PURE__*/_jsxs(React.Fragment, {
+          }))
+        })
+      })]
+    }), showExportMenu && (!rootProps.disableColumnFilter || !rootProps.disableColumnSelector) && /*#__PURE__*/_jsx(GridToolbarDivider, {}), showExportMenu && /*#__PURE__*/_jsxs(React.Fragment, {
       children: [/*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
         title: apiRef.current.getLocaleText('toolbarExport'),
         disableInteractive: exportMenuOpen,

package/esm/constants/localeTextConstants.js

@@ -11,6 +11,9 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   toolbarDensityCompact: 'Compact',
   toolbarDensityStandard: 'Standard',
   toolbarDensityComfortable: 'Comfortable',
+  // Undo/redo toolbar button text
+  toolbarUndo: 'Undo',
+  toolbarRedo: 'Redo',
   // Columns selector toolbar button text
   toolbarColumns: 'Columns',
   toolbarColumnsLabel: 'Select columns',

package/esm/hooks/core/useGridProps.js

@@ -8,7 +8,8 @@ export const propsStateInitializer = (state, props) => {
       listView: props.listView,
       getRowId: props.getRowId,
       isCellEditable: props.isCellEditable,
-      isRowSelectable: props.isRowSelectable
+      isRowSelectable: props.isRowSelectable,
+      dataSource: props.dataSource
     }
   });
 };
@@ -24,8 +25,9 @@ export const useGridProps = (apiRef, props) => {
         listView: props.listView,
         getRowId: props.getRowId,
         isCellEditable: props.isCellEditable,
-        isRowSelectable: props.isRowSelectable
+        isRowSelectable: props.isRowSelectable,
+        dataSource: props.dataSource
       }
     }));
-  }, [apiRef, props.listView, props.getRowId, props.isCellEditable, props.isRowSelectable]);
+  }, [apiRef, props.listView, props.getRowId, props.isCellEditable, props.isRowSelectable, props.dataSource]);
 };

package/esm/hooks/features/focus/useGridFocus.js

@@ -9,8 +9,9 @@ import { gridClasses } from "../../../constants/gridClasses.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { useGridLogger } from "../../utils/useGridLogger.js";
 import { useGridEvent } from "../../utils/useGridEvent.js";
-import { isNavigationKey } from "../../../utils/keyboardUtils.js";
+import { isNavigationKey, isPasteShortcut } from "../../../utils/keyboardUtils.js";
 import { gridFocusCellSelector, gridFocusColumnGroupHeaderSelector } from "./gridFocusStateSelector.js";
+import { doesSupportPreventScroll } from "../../../utils/doesSupportPreventScroll.js";
 import { gridVisibleColumnDefinitionsSelector } from "../columns/gridColumnsSelector.js";
 import { getVisibleRows } from "../../utils/useGridVisibleRows.js";
 import { clamp } from "../../../utils/utils.js";
@@ -50,6 +51,29 @@ export const useGridFocus = (apiRef, props) => {
   const setCellFocus = React.useCallback((id, field) => {
     const focusedCell = gridFocusCellSelector(apiRef);
     if (focusedCell?.id === id && focusedCell?.field === field) {
+      /**
+       * Check if the state matches the actual DOM focus. They can get out of sync after `updateRows()` remounts the cell.
+       */
+      if (apiRef.current.getCellMode(id, field) !== 'view') {
+        return;
+      }
+      const cellElement = apiRef.current.getCellElement(id, field);
+      if (!cellElement) {
+        return;
+      }
+      const doc = ownerDocument(apiRef.current.rootElementRef.current);
+      if (cellElement.contains(doc.activeElement)) {
+        return;
+      }
+      if (doesSupportPreventScroll()) {
+        cellElement.focus({
+          preventScroll: true
+        });
+      } else {
+        const scrollPosition = apiRef.current.getScrollPosition();
+        cellElement.focus();
+        apiRef.current.scroll(scrollPosition);
+      }
       return;
     }
     apiRef.current.setState(state => {
@@ -224,7 +248,7 @@ export const useGridFocus = (apiRef, props) => {
     apiRef.current.setCellFocus(id, field);
   }, [apiRef]);
   const handleCellKeyDown = React.useCallback((params, event) => {
-    if (event.key === 'Enter' || event.key === 'Tab' || event.key === 'Shift' || isNavigationKey(event.key)) {
+    if (isPasteShortcut(event) || event.key === 'Enter' || event.key === 'Tab' || event.key === 'Shift' || isNavigationKey(event.key)) {
       return;
     }
     apiRef.current.setCellFocus(params.id, params.field);

package/esm/hooks/features/scroll/useGridScroll.js

@@ -56,7 +56,7 @@ export const useGridScroll = (apiRef, props) => {
     }
     logger.debug(`Scrolling to cell at row ${params.rowIndex}, col: ${params.colIndex} `);
     let scrollCoordinates = {};
-    if (params.colIndex !== undefined) {
+    if (params.colIndex !== undefined && visibleColumns[params.colIndex]) {
       const columnPositions = gridColumnPositionsSelector(apiRef);
       let cellWidth;
       if (typeof params.rowIndex !== 'undefined') {
@@ -73,7 +73,7 @@ export const useGridScroll = (apiRef, props) => {
       // When using RTL, `scrollLeft` becomes negative, so we must ensure that we only compare values.
       scrollCoordinates.left = scrollIntoView({
         containerSize: dimensions.viewportOuterSize.width,
-        scrollPosition: Math.abs(virtualScrollerRef.current.scrollLeft),
+        scrollPosition: Math.abs(virtualScrollerRef.current?.scrollLeft ?? 0),
         elementSize: cellWidth,
         elementOffset: columnPositions[params.colIndex]
       });
@@ -86,7 +86,7 @@ export const useGridScroll = (apiRef, props) => {
       const targetOffsetHeight = rowsMeta.positions[elementIndex + 1] ? rowsMeta.positions[elementIndex + 1] - rowsMeta.positions[elementIndex] : rowsMeta.currentPageTotalHeight - rowsMeta.positions[elementIndex];
       scrollCoordinates.top = scrollIntoView({
         containerSize: dimensions.viewportInnerSize.height,
-        scrollPosition: virtualScrollerRef.current.scrollTop,
+        scrollPosition: virtualScrollerRef.current?.scrollTop ?? 0,
         elementSize: targetOffsetHeight,
         elementOffset: rowsMeta.positions[elementIndex]
       });

package/esm/index.js

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