@mui/x-data-grid 8.18.0 → 8.19.0

package/CHANGELOG.md

@@ -5,6 +5,119 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 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

@@ -204,7 +204,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) {

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]);

package/components/columnSelection/GridCellCheckboxRenderer.js

@@ -11,7 +11,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -43,7 +45,19 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = (0, _for
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
+  const {
+    isIndeterminate,
+    isChecked,
+    isSelectable
+  } = (0, _useGridSelector.useGridSelector)(apiRef, _utils.checkboxPropsSelector, {
+    groupId: id,
+    autoSelectParents: rootProps.rowSelectionPropagation?.parents ?? false
+  });
+  const disabled = !isSelectable;
   const handleChange = event => {
+    if (disabled) {
+      return;
+    }
     const params = {
       value: event.target.checked,
       id
@@ -58,20 +72,26 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = (0, _for
       }
     }
   }, [apiRef, tabIndex, id, field]);
-  const handleKeyDown = React.useCallback(event => {
+  const handleKeyDown = (0, _useEventCallback.default)(event => {
     if (event.key === ' ') {
       // We call event.stopPropagation to avoid selecting the row and also scrolling to bottom
       // TODO: Remove and add a check inside useGridKeyboardNavigation
       event.stopPropagation();
     }
-  }, []);
-  const isSelectable = apiRef.current.isRowSelectable(id);
-  const {
-    isIndeterminate,
-    isChecked
-  } = (0, _useGridSelector.useGridSelector)(apiRef, _utils.checkboxPropsSelector, {
-    groupId: id,
-    autoSelectParents: rootProps.rowSelectionPropagation?.parents ?? false
+    if (disabled) {
+      return;
+    }
+  });
+  const handleClick = (0, _useEventCallback.default)(event => {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+  });
+  const handleMouseDown = (0, _useEventCallback.default)(() => {
+    if (disabled) {
+      return;
+    }
   });
   if (rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
     return null;
@@ -81,16 +101,21 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = (0, _for
     tabIndex: tabIndex,
     checked: isChecked && !isIndeterminate,
     onChange: handleChange,
-    className: classes.root,
+    onClick: handleClick,
+    onMouseDown: handleMouseDown,
+    className: (0, _clsx.default)(classes.root, disabled && 'Mui-disabled'),
+    material: {
+      disableRipple: disabled
+    },
     slotProps: {
       htmlInput: {
+        'aria-disabled': disabled || undefined,
         'aria-label': label,
         name: 'select_row'
       }
     },
     onKeyDown: handleKeyDown,
-    indeterminate: isIndeterminate,
-    disabled: !isSelectable
+    indeterminate: isIndeterminate
   }, rootProps.slotProps?.baseCheckbox, other, {
     ref: ref
   }));
@@ -117,16 +142,6 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.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/containers/GridRootStyles.js

@@ -21,7 +21,7 @@ const separatorIconDragStyles = {
 // Emotion thinks it knows better than us which selector we should use.
 // https://github.com/emotion-js/emotion/issues/1105#issuecomment-1722524968
 const ignoreSsrWarning = '/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */';
-const shouldShowBorderTopRightRadiusSelector = apiRef => apiRef.current.state.dimensions.hasScrollX && (!apiRef.current.state.dimensions.hasScrollY || apiRef.current.state.dimensions.scrollbarSize === 0);
+const shouldShowBorderTopRightRadiusSelector = apiRef => !apiRef.current.state.dimensions.isReady ? apiRef.current.state.dimensions.scrollbarSize === 0 : apiRef.current.state.dimensions.hasScrollX && (!apiRef.current.state.dimensions.hasScrollY || apiRef.current.state.dimensions.scrollbarSize === 0);
 const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'Root',

package/components/toolbarV8/Toolbar.js

@@ -36,7 +36,7 @@ const ToolbarRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'Toolbar'
 })({
-  flex: 0,
+  flex: '0 1 1px',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'end',

package/components/virtualization/GridVirtualScrollbar.d.ts

@@ -7,6 +7,7 @@ type GridVirtualScrollbarProps = {
     top: number;
   }>;
 };
+export declare const scrollbarSizeCssExpression = "calc(max(var(--DataGrid-scrollbarSize), 14px))";
 export declare const ScrollbarCorner: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, {}, {}>;
 declare const GridVirtualScrollbar: React.ForwardRefExoticComponent<GridVirtualScrollbarProps> | React.ForwardRefExoticComponent<GridVirtualScrollbarProps & React.RefAttributes<HTMLDivElement>>;
 export { GridVirtualScrollbar };

package/components/virtualization/GridVirtualScrollbar.js

@@ -6,7 +6,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ScrollbarCorner = exports.GridVirtualScrollbar = void 0;
+exports.scrollbarSizeCssExpression = exports.ScrollbarCorner = exports.GridVirtualScrollbar = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _system = require("@mui/system");
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
@@ -29,6 +29,12 @@ const useUtilityClasses = (ownerState, position) => {
   };
   return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
+
+// In macOS Safari and Gnome Web, scrollbars are overlaid and don't affect the layout. So we consider
+// their size to be 0px throughout all the calculations, but the floating scrollbar container does need
+// to appear and have a real size. We set it to 14px because it seems like an acceptable value and we
+// don't have a method to find the required size for scrollbars on those platforms.
+const scrollbarSizeCssExpression = exports.scrollbarSizeCssExpression = 'calc(max(var(--DataGrid-scrollbarSize), 14px))';
 const Scrollbar = (0, _system.styled)('div')({
   position: 'absolute',
   display: 'inline-block',
@@ -36,11 +42,7 @@ const Scrollbar = (0, _system.styled)('div')({
   '&:hover': {
     zIndex: 70
   },
-  // In macOS Safari and Gnome Web, scrollbars are overlaid and don't affect the layout. So we consider
-  // their size to be 0px throughout all the calculations, but the floating scrollbar container does need
-  // to appear and have a real size. We set it to 14px because it seems like an acceptable value and we
-  // don't have a method to find the required size for scrollbars on those platforms.
-  '--size': 'calc(max(var(--DataGrid-scrollbarSize), 14px))'
+  '--size': scrollbarSizeCssExpression
 });
 const ScrollbarVertical = (0, _system.styled)(Scrollbar)({
   width: 'var(--size)',
@@ -72,7 +74,10 @@ const ScrollbarCorner = exports.ScrollbarCorner = (0, _system.styled)(Scrollbar)
   height: 'var(--size)',
   right: 0,
   bottom: 0,
-  overflow: 'scroll'
+  overflow: 'scroll',
+  '@media print': {
+    display: 'none'
+  }
 });
 const GridVirtualScrollbar = exports.GridVirtualScrollbar = (0, _forwardRef.forwardRef)(function GridVirtualScrollbar(props, ref) {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
@@ -101,7 +106,7 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = (0, _forwardRef.forw
       return;
     }
     isLocked.current = true;
-    scrollbar[propertyScroll] = scrollPosition[propertyScrollPosition];
+    scrollbar[propertyScroll] = props.scrollPosition.current[propertyScrollPosition];
   });
   const onScrollbarScroll = (0, _useEventCallback.default)(() => {
     const scroller = apiRef.current.virtualScrollerRef.current;

package/components/virtualization/GridVirtualScroller.js

@@ -27,6 +27,7 @@ var _GridVirtualScrollerRenderZone = require("./GridVirtualScrollerRenderZone");
 var _GridVirtualScrollbar = require("./GridVirtualScrollbar");
 var _GridScrollShadows = require("../GridScrollShadows");
 var _GridOverlays = require("../base/GridOverlays");
+var _useGridVirtualizer = require("../../hooks/core/useGridVirtualizer");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -90,7 +91,7 @@ function GridVirtualScroller(props) {
     loadingOverlayVariant
   };
   const classes = useUtilityClasses(ownerState);
-  const virtualScroller = apiRef.current.virtualizer.api.useVirtualization().getters;
+  const virtualScroller = (0, _useGridVirtualizer.useGridVirtualizer)().api.getters;
   const {
     getContainerProps,
     getScrollerProps,

package/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -44,7 +44,7 @@ const GridVirtualScrollerRenderZone = exports.GridVirtualScrollerRenderZone = (0
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
-  const offsetTop = apiRef.current.virtualizer.api.useVirtualization().getters.getOffsetTop();
+  const offsetTop = apiRef.current.virtualizer.api.getters.getOffsetTop();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerRenderZoneRoot, (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps,