@mui/x-data-grid 8.18.0 → 8.20.0

package/CHANGELOG.md

@@ -5,6 +5,181 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.20.0
+
+_Nov 26, 2025_
+
+We'd like to extend a big thank you to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔃 Data Grid tree data now supports row reordering. See the [Drag-and-drop tree data reordering](https://mui.com/x/react-data-grid/tree-data/#drag-and-drop-tree-data-reordering) section for more details.
+- 🐞 Bugfixes
+
+The following team members contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @siriwatknp, @JCQuintas, @MBilalShafi, @prakhargupta1
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.20.0`
+
+- [DataGrid] Fix RTL virtualization to display columns when viewport width is larger than the grid (#20409) @siriwatknp
+- [DataGrid] Fix row range selection (#20442) @arminmeh
+- [DataGrid] Initialize data grid core packages (#20276) @cherniavskii
+- [DataGrid] Improve accessibility of the sort icon (#20430) @arminmeh
+- [DataGrid] Use `viewport` as a boundary for the `BasePopper` flip (#20311) @arminmeh
+
+#### `@mui/x-data-grid-pro@8.20.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.20.0`, plus:
+
+- [DataGridPro] Avoid automatic scroll back to the focused header filter after it leaves the viewport (#20416) @arminmeh
+- [DataGridPro] Tree data row reordering (#19401) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.20.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.20.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.20.0`
+
+- [charts] Fix item tooltip position with node anchor (#20421) @alexfauquette
+- [charts] Fix radar item tooltip closing bug (#20429) @alexfauquette
+- [charts] Move series processing to selector (#20388) @JCQuintas
+- [charts] Prevent pointer out from removing controlled highlight (#20385) @alexfauquette
+
+#### `@mui/x-charts-pro@8.20.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.20.0`, plus:
+
+- [charts-pro] Fix Content-Security-Policy nonce not being correctly set on export (#20395) @bernardobelchior
+- [charts-pro] Improve vertical zoom slider thumb on mobile (#20439) @bernardobelchior
+- [charts-pro] Provide arguments to the `AreaPlotRoot` styled component (#20414) @arminmeh
+- [charts-pro] Remove grid outside the drawing area (#20412) @alexfauquette
+
+#### `@mui/x-charts-premium@8.20.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.20.0`, plus:
+
+- [charts-premium] Add explicit return type to `ChartsRenderer` for better compatibility with React 18 (#20413) @arminmeh
+
+### Docs
+
+- [docs] Add `llms.txt` link to the sidebar (#20312) @siriwatknp
+- [docs] Add a line chart demo for the Overview section (#20239) @prakhargupta1
+
+## 8.19.0
+
+_Nov 20, 2025_
+
+We'd like to extend a big thank you to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔎 Add pan on `wheel` to the charts zoom
+- ⌨️ Allow opt-in to [tab navigation](https://mui.com/x/react-data-grid/accessibility/#tab-navigation) inside the Data Grid.
+- ⚙️ New way of defining [action columns](https://mui.com/x/react-data-grid/column-definition/#ActionsWithModalGrid.tsx) in the Data Grid that makes it easier to keep `columns` prop stable.
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@lauri865, @noobyogi0010, @sai6855
+
+The following team members contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @mj12albert, @noraleonte, @rita-codes, @siriwatknp, @ZeeshanTamboli
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.19.0`
+
+- [DataGrid] Add `tabNavigation` prop to control tab navigation in the grid (#20286) @arminmeh
+- [DataGrid] Allow to focus disabled checkbox cells (#19959) @mj12albert
+- [DataGrid] Alternative actions column definition API (#15041) @cherniavskii
+- [DataGrid] Fix failing tests (#20332) @cherniavskii
+- [DataGrid] Prevent Safari 26 error in the event handler (#20369) @arminmeh
+- [DataGrid] Undeprecate the `autoHeight` prop (#20363) @cherniavskii
+- [DataGrid] Fix print export grid dimensions with dynamic row height and print styles (#19835) @cherniavskii
+
+#### `@mui/x-data-grid-pro@8.19.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.19.0`.
+
+#### `@mui/x-data-grid-premium@8.19.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.19.0`, plus:
+
+- [DataGridPremium] Fix aggregation with sorting (#19892) @lauri865
+- [DataGridPremium] Lock `ExcelJS` version (#20329) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.19.0`
+
+- [pickers] Do not loose `slotProps.field.slotProps` (#20322) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.19.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.19.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.19.0`
+
+- [charts] Expose `niceDomain` utility (#20250) @bernardobelchior
+- [charts] Fix benchmark regression by downgrading to JSDOM v26 (#20405) @bernardobelchior
+- [charts] Fix Pie Chart keyboard focus highlight (#20358) @JCQuintas
+- [charts] Memoize series selectors (#20326) @JCQuintas
+- [charts] Relax dataset type (#20294) @bernardobelchior
+- [charts] Remove `touch-action: pan-y` when zoom is disabled (#20204) @bernardobelchior
+- [charts] Use `getBBox()` for correct SVG sizes in firefox (#20309) @JCQuintas
+- [charts] Use directly selector from `@mui/x-internals` (#20365) @alexfauquette
+- [charts] Fix unnecessary errors in dev mode (#20380) @JCQuintas
+
+#### `@mui/x-charts-pro@8.19.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.19.0`, plus:
+
+- [charts-pro] Add pan on `wheel` to zoom (#19998) @JCQuintas
+- [charts-pro] Fix zoom slider preview having an opaque background in dark mode (#20367) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.19.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.19.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.19.0`
+
+- [tree view] Enable lazy load when children count is not know in tree view (#18680) @noobyogi0010
+- [tree view] Fix unwanted behaviors on the item re-ordering (#20368) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.19.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.19.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.19.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add minimum Typescript version to migration guide (#20320) @siriwatknp
+- [docs] Fix Autosizing documentation (#20348) @siriwatknp
+- [docs] Fix separator opacity in demo (#20293) @sai6855
+- [docs] Replace deprecated `LoadingButton` with `Button` component (#20208) @Janpot
+
+### Core
+
+- [code-infra] Add new broken links checker (#20120) @Janpot
+- [code-infra] Disable Codspeed pipeline (#20370) @JCQuintas
+- [code-infra] Optimize `checkMaterialVersion` (#20307) @Janpot
+- [code-infra] Use utils from code-infra for changelog and PR creation (#20406) @brijeshb42
+- [docs-infra] Revert `@docsearch/react` (#20313) @Janpot
+
+### Miscellaneous
+
+- [test] Fix browser tests skipping some projects (#20318) @cherniavskii
+- [test] Update `use-react-version` pnpm script (#20319) @cherniavskii
+
 ## 8.18.0
 
 <!-- generated comparing v8.17.0..master -->

package/DataGrid/useDataGridComponent.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDataGridComponent = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _useFirstRender = require("@mui/x-internals/useFirstRender");
 var _useGridInitialization = require("../hooks/core/useGridInitialization");
-var _useGridVirtualizer = require("../hooks/core/useGridVirtualizer");
 var _useGridInitializeState = require("../hooks/utils/useGridInitializeState");
 var _useGridClipboard = require("../hooks/features/clipboard/useGridClipboard");
 var _useGridColumnMenu = require("../hooks/features/columnMenu/useGridColumnMenu");
@@ -72,7 +72,6 @@ const useDataGridComponent = (apiRef, props, configuration) => {
   (0, _useGridInitializeState.useGridInitializeState)(_useGridDimensions.dimensionsStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridRowsMeta.rowsMetaStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridListView.listViewStateInitializer, apiRef, props);
-  (0, _useGridVirtualizer.useGridVirtualizer)(apiRef, props);
   (0, _useGridKeyboardNavigation.useGridKeyboardNavigation)(apiRef, props);
   (0, _useGridRowSelection.useGridRowSelection)(apiRef, props);
   (0, _useGridColumns.useGridColumns)(apiRef, props);
@@ -89,7 +88,6 @@ const useDataGridComponent = (apiRef, props, configuration) => {
   (0, _useGridDensity.useGridDensity)(apiRef, props);
   (0, _useGridColumnResize.useGridColumnResize)(apiRef, props);
   (0, _useGridPagination.useGridPagination)(apiRef, props);
-  (0, _useGridRowsMeta.useGridRowsMeta)(apiRef, props);
   (0, _useGridScroll.useGridScroll)(apiRef, props);
   (0, _useGridColumnMenu.useGridColumnMenu)(apiRef);
   (0, _useGridCsvExport.useGridCsvExport)(apiRef, props);
@@ -103,6 +101,9 @@ const useDataGridComponent = (apiRef, props, configuration) => {
   (0, _useGridDataSource.useGridDataSource)(apiRef, props);
 
   // Should be the last thing to run, because all pre-processors should have been registered by now.
+  (0, _useFirstRender.useFirstRender)(() => {
+    apiRef.current.runAppliersForPendingProcessors();
+  });
   React.useEffect(() => {
     apiRef.current.runAppliersForPendingProcessors();
   });

package/components/GridRow.js

@@ -32,6 +32,7 @@ var _gridSortingSelector = require("../hooks/features/sorting/gridSortingSelecto
 var _gridRowsSelector = require("../hooks/features/rows/gridRowsSelector");
 var _gridEditingSelectors = require("../hooks/features/editing/gridEditingSelectors");
 var _gridRowReorderSelector = require("../hooks/features/rowReorder/gridRowReorderSelector");
+var _GridRowDragAndDropOverlay = require("./GridRowDragAndDropOverlay");
 var _getPinnedCellOffset = require("../internals/utils/getPinnedCellOffset");
 var _useGridConfiguration = require("../hooks/utils/useGridConfiguration");
 var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
@@ -204,7 +205,7 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
       rowStyle[property] = propertyValue;
     }
     return rowStyle;
-  }, [isNotVisible, rowHeight, styleProp, heightEntry, rootProps.rowSpacingType]);
+  }, [isNotVisible, rowHeight, styleProp, heightEntry.spacingTop, heightEntry.spacingBottom, rootProps.rowSpacingType]);
 
   // HACK: Sometimes, the rowNode has already been removed from the state but the row is still rendered.
   if (!rowNode) {
@@ -315,7 +316,9 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     }), cells, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       role: "presentation",
       className: (0, _clsx.default)(_gridClasses.gridClasses.cell, _gridClasses.gridClasses.cellEmpty)
-    }), rightCells]
+    }), rightCells, /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridRowDragAndDropOverlay.GridRowDragAndDropOverlay, {
+      rowId: rowId
+    })]
   }));
 });
 if (process.env.NODE_ENV !== "production") GridRow.displayName = "GridRow";

package/components/GridRowDragAndDropOverlay.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { GridRowId } from "../models/gridRows.js";
+export interface GridRowDragAndDropOverlayProps {
+  rowId: GridRowId;
+  className?: string;
+}
+export declare const GridRowDragAndDropOverlay: React.NamedExoticComponent<GridRowDragAndDropOverlayProps>;

package/components/GridRowDragAndDropOverlay.js

@@ -0,0 +1,73 @@
+"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.GridRowDragAndDropOverlay = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _createStyled = require("@mui/system/createStyled");
+var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
+var _useGridSelector = require("../hooks/utils/useGridSelector");
+var _gridRowReorderSelector = require("../hooks/features/rowReorder/gridRowReorderSelector");
+var _jsxRuntime = require("react/jsx-runtime");
+const GridRowDragAndDropOverlayRoot = (0, _styles.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'RowDragOverlay',
+  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'action'
+})(({
+  theme,
+  action
+}) => (0, _extends2.default)({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  pointerEvents: 'none',
+  zIndex: 1
+}, action === 'above' && {
+  '&::before': {
+    pointerEvents: 'none',
+    content: '""',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: '2px',
+    backgroundColor: (theme.vars || theme).palette.primary.main
+  }
+}, action === 'below' && {
+  '&::after': {
+    pointerEvents: 'none',
+    content: '""',
+    position: 'absolute',
+    bottom: '-2px',
+    left: 0,
+    right: 0,
+    height: '2px',
+    backgroundColor: (theme.vars || theme).palette.primary.main
+  }
+}, action === 'inside' && {
+  backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / 0.1)` : (0, _styles.alpha)(theme.palette.primary.main, 0.1)
+}));
+const GridRowDragAndDropOverlay = exports.GridRowDragAndDropOverlay = /*#__PURE__*/React.memo(function GridRowDragAndDropOverlay(props) {
+  const {
+    rowId,
+    className
+  } = props;
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
+  const dropPosition = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowReorderSelector.gridRowDropPositionSelector, rowId);
+  if (!dropPosition) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridRowDragAndDropOverlayRoot, {
+    action: dropPosition,
+    className: className
+  });
+});
+if (process.env.NODE_ENV !== "production") GridRowDragAndDropOverlay.displayName = "GridRowDragAndDropOverlay";

package/components/cell/GridActionsCell.d.ts

@@ -1,8 +1,17 @@
+import * as React from 'react';
 import { GridRenderCellParams } from "../../models/params/gridCellParams.js";
 import { GridMenuProps } from "../menu/GridMenu.js";
 interface GridActionsCellProps extends Omit<GridRenderCellParams, 'api'> {
   api?: GridRenderCellParams['api'];
   position?: GridMenuProps['position'];
+  children: React.ReactNode;
+  /**
+   * If true, the children passed to the component will not be validated.
+   * If false, only `GridActionsCellItem` and `React.Fragment` are allowed as children.
+   * Only use this prop if you know what you are doing.
+   * @default false
+   */
+  suppressChildrenValidation?: boolean;
 }
 declare function GridActionsCell(props: GridActionsCellProps): import("react/jsx-runtime").JSX.Element;
 declare namespace GridActionsCell {

package/components/cell/GridActionsCell.js

@@ -14,21 +14,22 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _warning = require("@mui/x-internals/warning");
 var _gridClasses = require("../../constants/gridClasses");
 var _GridMenu = require("../menu/GridMenu");
 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", "focusElementRef"];
+const _excluded = ["api", "colDef", "id", "hasFocus", "isEditable", "field", "value", "formattedValue", "row", "rowNode", "cellMode", "tabIndex", "position", "children", "suppressChildrenValidation"];
 const hasActions = colDef => typeof colDef.getActions === 'function';
 function GridActionsCell(props) {
   const {
-      colDef,
-      id,
       hasFocus,
       tabIndex,
       position = 'bottom-end',
-      focusElementRef
+      children,
+      suppressChildrenValidation
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [focusedButtonIndex, setFocusedButtonIndex] = React.useState(-1);
@@ -42,12 +43,27 @@ function GridActionsCell(props) {
   const menuId = (0, _useId.default)();
   const buttonId = (0, _useId.default)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  if (!hasActions(colDef)) {
-    throw new Error('MUI X: Missing the `getActions` property in the `GridColDef`.');
-  }
-  const options = colDef.getActions(apiRef.current.getRowParams(id));
-  const iconButtons = options.filter(option => !option.props.showInMenu);
-  const menuButtons = options.filter(option => option.props.showInMenu);
+  const actions = [];
+  React.Children.forEach(children, child => {
+    // Unwrap React.Fragment
+    if (/*#__PURE__*/React.isValidElement(child)) {
+      if (child.type === React.Fragment) {
+        React.Children.forEach(child.props.children, fragChild => {
+          if (/*#__PURE__*/React.isValidElement(fragChild)) {
+            actions.push(fragChild);
+          }
+        });
+      } else if (child.type === _GridActionsCellItem.GridActionsCellItem || suppressChildrenValidation) {
+        actions.push(child);
+      } else {
+        const childType = typeof child.type === 'function' ? child.type.name : child.type;
+        (0, _warning.warnOnce)(`MUI X: Invalid child type in \`GridActionsCell\`. Expected \`GridActionsCellItem\` or \`React.Fragment\`, got \`${childType}\`.
+If this is intentional, you can suppress this warning by passing the \`suppressChildrenValidation\` prop to \`GridActionsCell\`.`, 'error');
+      }
+    }
+  });
+  const iconButtons = actions.filter(option => !option.props.showInMenu);
+  const menuButtons = actions.filter(option => option.props.showInMenu);
   const numberOfButtons = iconButtons.length + (menuButtons.length ? 1 : 0);
   React.useLayoutEffect(() => {
     if (!hasFocus) {
@@ -70,22 +86,16 @@ function GridActionsCell(props) {
       preventScroll: true
     });
   }, [focusedButtonIndex]);
+  const firstFocusableButtonIndex = actions.findIndex(o => !o.props.disabled);
   React.useEffect(() => {
+    if (hasFocus && focusedButtonIndex === -1) {
+      setFocusedButtonIndex(firstFocusableButtonIndex);
+    }
     if (!hasFocus) {
       setFocusedButtonIndex(-1);
       ignoreCallToFocus.current = false;
     }
-  }, [hasFocus]);
-  React.useImperativeHandle(focusElementRef, () => ({
-    focus() {
-      // If ignoreCallToFocus is true, then one of the buttons was clicked and the focus is already set
-      if (!ignoreCallToFocus.current) {
-        // find the first focusable button and pass the index to the state
-        const focusableButtonIndex = options.findIndex(o => !o.props.disabled);
-        setFocusedButtonIndex(focusableButtonIndex);
-      }
-    }
-  }), [options]);
+  }, [hasFocus, focusedButtonIndex, firstFocusableButtonIndex]);
   React.useEffect(() => {
     if (focusedButtonIndex >= numberOfButtons) {
       setFocusedButtonIndex(numberOfButtons - 1);
@@ -123,7 +133,7 @@ function GridActionsCell(props) {
       return;
     }
     const getNewIndex = (index, direction) => {
-      if (index < 0 || index > options.length) {
+      if (index < 0 || index > actions.length) {
         return index;
       }
 
@@ -132,7 +142,7 @@ function GridActionsCell(props) {
       const indexMod = (direction === 'left' ? -1 : 1) * rtlMod;
 
       // if the button that should receive focus is disabled go one more step
-      return options[index + indexMod]?.props.disabled ? getNewIndex(index + indexMod, direction) : index + indexMod;
+      return actions[index + indexMod]?.props.disabled ? getNewIndex(index + indexMod, direction) : index + indexMod;
     };
     let newIndex = focusedButtonIndex;
     if (event.key === 'ArrowRight') {
@@ -209,6 +219,7 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
    * The mode of the cell.
    */
   cellMode: _propTypes.default.oneOf(['edit', 'view']).isRequired,
+  children: _propTypes.default.node.isRequired,
   /**
    * The column of the row that the current cell belongs to.
    */
@@ -217,16 +228,6 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
    * The column field of the cell that triggered the event.
    */
   field: _propTypes.default.string.isRequired,
-  /**
-   * A ref allowing to set imperative focus.
-   * It can be passed to the element that should receive focus.
-   * @ignore - do not document.
-   */
-  focusElementRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
-    current: _propTypes.default.shape({
-      focus: _propTypes.default.func.isRequired
-    })
-  })]),
   /**
    * The cell value formatted with the column valueFormatter.
    */
@@ -262,6 +263,25 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
    */
   value: _propTypes.default.any
 } : void 0;
-const renderActionsCell = params => /*#__PURE__*/(0, _jsxRuntime.jsx)(GridActionsCell, (0, _extends2.default)({}, params));
+// Temporary wrapper for backward compatibility.
+// Only used to support `getActions` method in `GridColDef`.
+// TODO(v9): Remove this wrapper and the default `renderCell` in gridActionsColDef
+function GridActionsCellWrapper(props) {
+  const {
+    colDef,
+    id
+  } = props;
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  if (!hasActions(colDef)) {
+    throw new Error('MUI X: Missing the `getActions` property in the `GridColDef`.');
+  }
+  const actions = colDef.getActions(apiRef.current.getRowParams(id));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridActionsCell, (0, _extends2.default)({
+    suppressChildrenValidation: true
+  }, props, {
+    children: actions
+  }));
+}
+const renderActionsCell = params => /*#__PURE__*/(0, _jsxRuntime.jsx)(GridActionsCellWrapper, (0, _extends2.default)({}, params));
 exports.renderActionsCell = renderActionsCell;
 if (process.env.NODE_ENV !== "production") renderActionsCell.displayName = "renderActionsCell";

package/components/cell/GridBooleanCell.js

@@ -77,16 +77,6 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
    * The column field of the cell that triggered the event.
    */
   field: _propTypes.default.string.isRequired,
-  /**
-   * A ref allowing to set imperative focus.
-   * It can be passed to the element that should receive focus.
-   * @ignore - do not document.
-   */
-  focusElementRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
-    current: _propTypes.default.shape({
-      focus: _propTypes.default.func.isRequired
-    })
-  })]),
   /**
    * The cell value formatted with the column valueFormatter.
    */

package/components/cell/GridCell.js

@@ -21,6 +21,7 @@ var _RtlProvider = require("@mui/system/RtlProvider");
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _store = require("@mui/x-internals/store");
 var _xVirtualizer = require("@mui/x-virtualizer");
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _doesSupportPreventScroll = require("../../utils/doesSupportPreventScroll");
 var _gridClasses = require("../../constants/gridClasses");
 var _models = require("../../models");
@@ -142,8 +143,7 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
     isEditable = false,
     value
   } = cellParams;
-  const canManageOwnFocus = column.type === 'actions' && 'getActions' in column && typeof column.getActions === 'function' && column.getActions(apiRef.current.getRowParams(rowId)).some(action => !action.props.disabled);
-  const tabIndex = (cellMode === 'view' || !isEditable) && !canManageOwnFocus ? cellParams.tabIndex : -1;
+  const tabIndex = (cellMode === 'view' || !isEditable) && column.type !== 'actions' ? cellParams.tabIndex : -1;
   const {
     classes: rootClasses,
     getCellClassName
@@ -167,7 +167,6 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
   const valueToRender = cellParams.formattedValue ?? value;
   const cellRef = React.useRef(null);
   const handleRef = (0, _useForkRef.default)(ref, cellRef);
-  const focusElementRef = React.useRef(null);
   const isSelectionMode = rootProps.cellSelection ?? false;
   const ownerState = {
     align,
@@ -231,14 +230,14 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
     }
     return cellStyle;
   }, [width, isNotVisible, styleProp, pinnedOffset, pinnedPosition, isRtl, rowSpan]);
-  React.useEffect(() => {
+  (0, _useEnhancedEffect.default)(() => {
     if (!hasFocus || cellMode === _models.GridCellModes.Edit) {
       return;
     }
     const doc = (0, _ownerDocument.default)(apiRef.current.rootElementRef.current);
     if (cellRef.current && !cellRef.current.contains(doc.activeElement)) {
       const focusableElement = cellRef.current.querySelector('[tabindex="0"]');
-      const elementToFocus = focusElementRef.current || focusableElement || cellRef.current;
+      const elementToFocus = focusableElement || cellRef.current;
       if ((0, _doesSupportPreventScroll.doesSupportPreventScroll)()) {
         elementToFocus.focus({
           preventScroll: true
@@ -299,11 +298,6 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
     children = valueString;
     title = valueString;
   }
-  if (/*#__PURE__*/React.isValidElement(children) && canManageOwnFocus) {
-    children = /*#__PURE__*/React.cloneElement(children, {
-      focusElementRef
-    });
-  }
   const draggableEventHandlers = disableDragEvents ? null : {
     onDragEnter: publish('cellDragEnter', onDragEnter),
     onDragOver: publish('cellDragOver', onDragOver)

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -85,7 +85,7 @@ function GridColumnHeaderItem(props) {
   const columnMenuButtonId = (0, _useId.default)();
   const iconButtonRef = React.useRef(null);
   const [showColumnMenuIcon, setShowColumnMenuIcon] = React.useState(columnMenuOpen);
-  const isDraggable = React.useMemo(() => !rootProps.disableColumnReorder && !disableReorder && !colDef.disableReorder, [rootProps.disableColumnReorder, disableReorder, colDef.disableReorder]);
+  const isDraggable = !rootProps.disableColumnReorder && !disableReorder && !colDef.disableReorder;
   let headerComponent;
   if (colDef.renderHeader) {
     headerComponent = colDef.renderHeader(apiRef.current.getColumnHeaderParams(colDef.field));
@@ -131,7 +131,7 @@ function GridColumnHeaderItem(props) {
     onDoubleClick: publish('columnSeparatorDoubleClick')
   }), [publish]);
   React.useEffect(() => {
-    if (!showColumnMenuIcon) {
+    if (!showColumnMenuIcon && columnMenuOpen) {
       setShowColumnMenuIcon(columnMenuOpen);
     }
   }, [showColumnMenuIcon, columnMenuOpen]);