@mui/x-data-grid 8.17.0 → 8.19.0

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,

package/constants/dataGridPropsDefaultValues.js

@@ -63,5 +63,6 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PROPS_DEFAULT_VALUES =
   sortingMode: 'client',
   sortingOrder: ['asc', 'desc', null],
   throttleRowsMs: 0,
-  virtualizeColumnsWithAutoRowHeight: false
+  virtualizeColumnsWithAutoRowHeight: false,
+  tabNavigation: 'none'
 };

package/esm/DataGrid/useDataGridComponent.js

@@ -1,8 +1,8 @@
 'use client';
 
 import * as React from 'react';
+import { useFirstRender } from '@mui/x-internals/useFirstRender';
 import { useGridInitialization } from "../hooks/core/useGridInitialization.js";
-import { useGridVirtualizer } from "../hooks/core/useGridVirtualizer.js";
 import { useGridInitializeState } from "../hooks/utils/useGridInitializeState.js";
 import { useGridClipboard } from "../hooks/features/clipboard/useGridClipboard.js";
 import { columnMenuStateInitializer, useGridColumnMenu } from "../hooks/features/columnMenu/useGridColumnMenu.js";
@@ -25,7 +25,7 @@ import { useGridSorting, sortingStateInitializer } from "../hooks/features/sorti
 import { useGridScroll } from "../hooks/features/scroll/useGridScroll.js";
 import { useGridEvents } from "../hooks/features/events/useGridEvents.js";
 import { dimensionsStateInitializer, useGridDimensions } from "../hooks/features/dimensions/useGridDimensions.js";
-import { rowsMetaStateInitializer, useGridRowsMeta } from "../hooks/features/rows/useGridRowsMeta.js";
+import { rowsMetaStateInitializer } from "../hooks/features/rows/useGridRowsMeta.js";
 import { useGridStatePersistence } from "../hooks/features/statePersistence/useGridStatePersistence.js";
 import { useGridColumnSpanning } from "../hooks/features/columns/useGridColumnSpanning.js";
 import { useGridColumnGrouping, columnGroupsStateInitializer } from "../hooks/features/columnGrouping/useGridColumnGrouping.js";
@@ -66,7 +66,6 @@ export const useDataGridComponent = (apiRef, props, configuration) => {
   useGridInitializeState(dimensionsStateInitializer, apiRef, props);
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(listViewStateInitializer, apiRef, props);
-  useGridVirtualizer(apiRef, props);
   useGridKeyboardNavigation(apiRef, props);
   useGridRowSelection(apiRef, props);
   useGridColumns(apiRef, props);
@@ -83,7 +82,6 @@ export const useDataGridComponent = (apiRef, props, configuration) => {
   useGridDensity(apiRef, props);
   useGridColumnResize(apiRef, props);
   useGridPagination(apiRef, props);
-  useGridRowsMeta(apiRef, props);
   useGridScroll(apiRef, props);
   useGridColumnMenu(apiRef);
   useGridCsvExport(apiRef, props);
@@ -97,6 +95,9 @@ export const useDataGridComponent = (apiRef, props, configuration) => {
   useGridDataSource(apiRef, props);
 
   // Should be the last thing to run, because all pre-processors should have been registered by now.
+  useFirstRender(() => {
+    apiRef.current.runAppliersForPendingProcessors();
+  });
   React.useEffect(() => {
     apiRef.current.runAppliersForPendingProcessors();
   });

package/esm/components/GridRow.js

@@ -197,7 +197,7 @@ const GridRow = 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/esm/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/esm/components/cell/GridActionsCell.js

@@ -2,25 +2,26 @@
 
 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", "focusElementRef"];
+const _excluded = ["api", "colDef", "id", "hasFocus", "isEditable", "field", "value", "formattedValue", "row", "rowNode", "cellMode", "tabIndex", "position", "children", "suppressChildrenValidation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useRtl } from '@mui/system/RtlProvider';
 import useId from '@mui/utils/useId';
+import { warnOnce } from '@mui/x-internals/warning';
 import { gridClasses } from "../../constants/gridClasses.js";
 import { GridMenu } from "../menu/GridMenu.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { GridActionsCellItem } from "./GridActionsCellItem.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const hasActions = colDef => typeof colDef.getActions === 'function';
 function GridActionsCell(props) {
   const {
-      colDef,
-      id,
       hasFocus,
       tabIndex,
       position = 'bottom-end',
-      focusElementRef
+      children,
+      suppressChildrenValidation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const [focusedButtonIndex, setFocusedButtonIndex] = React.useState(-1);
@@ -34,12 +35,27 @@ function GridActionsCell(props) {
   const menuId = useId();
   const buttonId = useId();
   const rootProps = 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 || suppressChildrenValidation) {
+        actions.push(child);
+      } else {
+        const childType = typeof child.type === 'function' ? child.type.name : child.type;
+        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) {
@@ -62,22 +78,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);
@@ -104,8 +114,6 @@ function GridActionsCell(props) {
     touchRippleRefs.current[index] = instance;
   };
   const handleButtonClick = (index, onClick) => event => {
-    event.stopPropagation();
-    event.preventDefault();
     setFocusedButtonIndex(index);
     ignoreCallToFocus.current = true;
     if (onClick) {
@@ -117,7 +125,7 @@ function GridActionsCell(props) {
       return;
     }
     const getNewIndex = (index, direction) => {
-      if (index < 0 || index > options.length) {
+      if (index < 0 || index > actions.length) {
         return index;
       }
 
@@ -126,7 +134,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') {
@@ -203,6 +211,7 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
    * The mode of the cell.
    */
   cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  children: PropTypes.node.isRequired,
   /**
    * The column of the row that the current cell belongs to.
    */
@@ -211,16 +220,6 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
    * The column field of the cell that triggered the event.
    */
   field: PropTypes.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.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.shape({
-      focus: PropTypes.func.isRequired
-    })
-  })]),
   /**
    * The cell value formatted with the column valueFormatter.
    */
@@ -257,5 +256,25 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
   value: PropTypes.any
 } : void 0;
 export { GridActionsCell };
-export const renderActionsCell = params => /*#__PURE__*/_jsx(GridActionsCell, _extends({}, 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 = 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__*/_jsx(GridActionsCell, _extends({
+    suppressChildrenValidation: true
+  }, props, {
+    children: actions
+  }));
+}
+export const renderActionsCell = params => /*#__PURE__*/_jsx(GridActionsCellWrapper, _extends({}, params));
 if (process.env.NODE_ENV !== "production") renderActionsCell.displayName = "renderActionsCell";

package/esm/components/cell/GridActionsCellItem.js

@@ -16,8 +16,6 @@ const GridActionsCellItem = forwardRef((props, ref) => {
       } = props,
       other = _objectWithoutPropertiesLoose(props, _excluded);
     const handleClick = event => {
-      event.stopPropagation();
-      event.preventDefault();
       onClick?.(event);
     };
     return /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
@@ -42,8 +40,6 @@ const GridActionsCellItem = forwardRef((props, ref) => {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded2);
   const handleClick = event => {
-    event.stopPropagation();
-    event.preventDefault();
     onClick?.(event);
     if (closeMenuOnClick) {
       closeMenu?.();

package/esm/components/cell/GridBooleanCell.js

@@ -69,16 +69,6 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
    * The column field of the cell that triggered the event.
    */
   field: PropTypes.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.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.shape({
-      focus: PropTypes.func.isRequired
-    })
-  })]),
   /**
    * The cell value formatted with the column valueFormatter.
    */

package/esm/components/cell/GridCell.js

@@ -16,6 +16,7 @@ import { useRtl } from '@mui/system/RtlProvider';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useStore } from '@mui/x-internals/store';
 import { Rowspan } from '@mui/x-virtualizer';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { doesSupportPreventScroll } from "../../utils/doesSupportPreventScroll.js";
 import { getDataGridUtilityClass, gridClasses } from "../../constants/gridClasses.js";
 import { GridCellModes } from "../../models/index.js";
@@ -135,8 +136,7 @@ const GridCell = 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
@@ -160,7 +160,6 @@ const GridCell = forwardRef(function GridCell(props, ref) {
   const valueToRender = cellParams.formattedValue ?? value;
   const cellRef = React.useRef(null);
   const handleRef = useForkRef(ref, cellRef);
-  const focusElementRef = React.useRef(null);
   const isSelectionMode = rootProps.cellSelection ?? false;
   const ownerState = {
     align,
@@ -224,14 +223,14 @@ const GridCell = forwardRef(function GridCell(props, ref) {
     }
     return cellStyle;
   }, [width, isNotVisible, styleProp, pinnedOffset, pinnedPosition, isRtl, rowSpan]);
-  React.useEffect(() => {
+  useEnhancedEffect(() => {
     if (!hasFocus || cellMode === GridCellModes.Edit) {
       return;
     }
     const doc = ownerDocument(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 (doesSupportPreventScroll()) {
         elementToFocus.focus({
           preventScroll: true
@@ -292,11 +291,6 @@ const GridCell = 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/esm/components/columnHeaders/GridColumnHeaderItem.js

@@ -78,7 +78,7 @@ function GridColumnHeaderItem(props) {
   const columnMenuButtonId = useId();
   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));
@@ -124,7 +124,7 @@ function GridColumnHeaderItem(props) {
     onDoubleClick: publish('columnSeparatorDoubleClick')
   }), [publish]);
   React.useEffect(() => {
-    if (!showColumnMenuIcon) {
+    if (!showColumnMenuIcon && columnMenuOpen) {
       setShowColumnMenuIcon(columnMenuOpen);
     }
   }, [showColumnMenuIcon, columnMenuOpen]);

package/esm/components/columnSelection/GridCellCheckboxRenderer.js

@@ -5,7 +5,9 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["field", "id", "formattedValue", "row", "rowNode", "colDef", "isEditable", "cellMode", "hasFocus", "tabIndex", "api"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
+import useEventCallback from '@mui/utils/useEventCallback';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
@@ -36,7 +38,19 @@ const GridCellCheckboxForwardRef = forwardRef(function GridCellCheckboxRenderer(
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
+  const {
+    isIndeterminate,
+    isChecked,
+    isSelectable
+  } = useGridSelector(apiRef, checkboxPropsSelector, {
+    groupId: id,
+    autoSelectParents: rootProps.rowSelectionPropagation?.parents ?? false
+  });
+  const disabled = !isSelectable;
   const handleChange = event => {
+    if (disabled) {
+      return;
+    }
     const params = {
       value: event.target.checked,
       id
@@ -51,20 +65,26 @@ const GridCellCheckboxForwardRef = forwardRef(function GridCellCheckboxRenderer(
       }
     }
   }, [apiRef, tabIndex, id, field]);
-  const handleKeyDown = React.useCallback(event => {
+  const handleKeyDown = useEventCallback(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
-  } = useGridSelector(apiRef, checkboxPropsSelector, {
-    groupId: id,
-    autoSelectParents: rootProps.rowSelectionPropagation?.parents ?? false
+    if (disabled) {
+      return;
+    }
+  });
+  const handleClick = useEventCallback(event => {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+  });
+  const handleMouseDown = useEventCallback(() => {
+    if (disabled) {
+      return;
+    }
   });
   if (rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
     return null;
@@ -74,16 +94,21 @@ const GridCellCheckboxForwardRef = forwardRef(function GridCellCheckboxRenderer(
     tabIndex: tabIndex,
     checked: isChecked && !isIndeterminate,
     onChange: handleChange,
-    className: classes.root,
+    onClick: handleClick,
+    onMouseDown: handleMouseDown,
+    className: clsx(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
   }));
@@ -110,16 +135,6 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
    * The column field of the cell that triggered the event.
    */
   field: PropTypes.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.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.shape({
-      focus: PropTypes.func.isRequired
-    })
-  })]),
   /**
    * The cell value formatted with the column valueFormatter.
    */

package/esm/components/containers/GridRootStyles.js

@@ -15,7 +15,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);
 export const GridRootStyles = styled('div', {
   name: 'MuiDataGrid',
   slot: 'Root',

package/esm/components/toolbarV8/Toolbar.js

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

package/esm/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 };