@mui/x-data-grid 7.24.1 → 7.26.0

package/modern/components/containers/GridRootStyles.js

@@ -3,7 +3,6 @@ import { alpha, styled, darken, lighten, decomposeColor, recomposeColor } from '
 import { gridClasses as c } from "../../constants/gridClasses.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
-import { gridDimensionsSelector } from "../../hooks/features/dimensions/gridDimensionsSelectors.js";
 function getBorderColor(theme) {
   if (theme.vars) {
     return theme.vars.palette.TableCell.border;
@@ -35,53 +34,80 @@ 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 = state => state.dimensions.hasScrollX && (!state.dimensions.hasScrollY || state.dimensions.scrollbarSize === 0);
 export const GridRootStyles = styled('div', {
   name: 'MuiDataGrid',
   slot: 'Root',
-  overridesResolver: (props, styles) => [{
+  overridesResolver: (props, styles) => [
+  // Root overrides
+  styles.root, {
     [`&.${c.autoHeight}`]: styles.autoHeight
   }, {
-    [`&.${c.aggregationColumnHeader}`]: styles.aggregationColumnHeader
+    [`&.${c.autosizing}`]: styles.autosizing
   }, {
-    [`&.${c['aggregationColumnHeader--alignLeft']}`]: styles['aggregationColumnHeader--alignLeft']
+    [`&.${c['root--densityStandard']}`]: styles['root--densityStandard']
   }, {
-    [`&.${c['aggregationColumnHeader--alignCenter']}`]: styles['aggregationColumnHeader--alignCenter']
+    [`&.${c['root--densityComfortable']}`]: styles['root--densityComfortable']
   }, {
-    [`&.${c['aggregationColumnHeader--alignRight']}`]: styles['aggregationColumnHeader--alignRight']
+    [`&.${c['root--densityCompact']}`]: styles['root--densityCompact']
   }, {
-    [`&.${c.aggregationColumnHeaderLabel}`]: styles.aggregationColumnHeaderLabel
+    [`&.${c['root--disableUserSelection']}`]: styles['root--disableUserSelection']
   }, {
-    [`&.${c['root--disableUserSelection']} .${c.cell}`]: styles['root--disableUserSelection']
+    [`&.${c['root--noToolbar']}`]: styles['root--noToolbar']
   }, {
-    [`&.${c.autosizing}`]: styles.autosizing
+    [`&.${c.withVerticalBorder}`]: styles.withVerticalBorder
+  },
+  // Child element overrides
+  // - Only declare overrides here for class names that are not applied to `styled` components.
+  // - For `styled` components, declare overrides in the component itself.
+  {
+    [`& .${c.actionsCell}`]: styles.actionsCell
   }, {
-    [`& .${c.editBooleanCell}`]: styles.editBooleanCell
+    [`& .${c.booleanCell}`]: styles.booleanCell
   }, {
     [`& .${c.cell}`]: styles.cell
+  }, {
+    [`& .${c['cell--editable']}`]: styles['cell--editable']
   }, {
     [`& .${c['cell--editing']}`]: styles['cell--editing']
   }, {
-    [`& .${c['cell--textCenter']}`]: styles['cell--textCenter']
+    [`& .${c['cell--flex']}`]: styles['cell--flex']
   }, {
-    [`& .${c['cell--textLeft']}`]: styles['cell--textLeft']
+    [`& .${c['cell--pinnedLeft']}`]: styles['cell--pinnedLeft']
   }, {
-    [`& .${c['cell--textRight']}`]: styles['cell--textRight']
-  }, {
-    [`& .${c['cell--rangeTop']}`]: styles['cell--rangeTop']
+    [`& .${c['cell--pinnedRight']}`]: styles['cell--pinnedRight']
   }, {
     [`& .${c['cell--rangeBottom']}`]: styles['cell--rangeBottom']
   }, {
     [`& .${c['cell--rangeLeft']}`]: styles['cell--rangeLeft']
   }, {
     [`& .${c['cell--rangeRight']}`]: styles['cell--rangeRight']
+  }, {
+    [`& .${c['cell--rangeTop']}`]: styles['cell--rangeTop']
+  }, {
+    [`& .${c['cell--selectionMode']}`]: styles['cell--selectionMode']
+  }, {
+    [`& .${c['cell--textCenter']}`]: styles['cell--textCenter']
+  }, {
+    [`& .${c['cell--textLeft']}`]: styles['cell--textLeft']
+  }, {
+    [`& .${c['cell--textRight']}`]: styles['cell--textRight']
+  }, {
+    [`& .${c['cell--withLeftBorder']}`]: styles['cell--withLeftBorder']
   }, {
     [`& .${c['cell--withRightBorder']}`]: styles['cell--withRightBorder']
   }, {
     [`& .${c.cellCheckbox}`]: styles.cellCheckbox
+  }, {
+    [`& .${c.cellEmpty}`]: styles.cellEmpty
+  }, {
+    [`& .${c.cellOffsetLeft}`]: styles.cellOffsetLeft
   }, {
     [`& .${c.cellSkeleton}`]: styles.cellSkeleton
   }, {
     [`& .${c.checkboxInput}`]: styles.checkboxInput
+  }, {
+    [`& .${c.columnHeader}`]: styles.columnHeader
   }, {
     [`& .${c['columnHeader--alignCenter']}`]: styles['columnHeader--alignCenter']
   }, {
@@ -90,80 +116,156 @@ export const GridRootStyles = styled('div', {
     [`& .${c['columnHeader--alignRight']}`]: styles['columnHeader--alignRight']
   }, {
     [`& .${c['columnHeader--dragging']}`]: styles['columnHeader--dragging']
+  }, {
+    [`& .${c['columnHeader--emptyGroup']}`]: styles['columnHeader--emptyGroup']
+  }, {
+    [`& .${c['columnHeader--filledGroup']}`]: styles['columnHeader--filledGroup']
+  }, {
+    [`& .${c['columnHeader--filtered']}`]: styles['columnHeader--filtered']
+  }, {
+    [`& .${c['columnHeader--last']}`]: styles['columnHeader--last']
+  }, {
+    [`& .${c['columnHeader--lastUnpinned']}`]: styles['columnHeader--lastUnpinned']
   }, {
     [`& .${c['columnHeader--moving']}`]: styles['columnHeader--moving']
   }, {
     [`& .${c['columnHeader--numeric']}`]: styles['columnHeader--numeric']
+  }, {
+    [`& .${c['columnHeader--pinnedLeft']}`]: styles['columnHeader--pinnedLeft']
+  }, {
+    [`& .${c['columnHeader--pinnedRight']}`]: styles['columnHeader--pinnedRight']
+  }, {
+    [`& .${c['columnHeader--siblingFocused']}`]: styles['columnHeader--siblingFocused']
   }, {
     [`& .${c['columnHeader--sortable']}`]: styles['columnHeader--sortable']
   }, {
     [`& .${c['columnHeader--sorted']}`]: styles['columnHeader--sorted']
   }, {
-    [`& .${c['columnHeader--withRightBorder']}`]: styles['columnHeader--withRightBorder']
-  }, {
-    [`& .${c.columnHeader}`]: styles.columnHeader
+    [`& .${c['columnHeader--withLeftBorder']}`]: styles['columnHeader--withLeftBorder']
   }, {
-    [`& .${c.headerFilterRow}`]: styles.headerFilterRow
+    [`& .${c['columnHeader--withRightBorder']}`]: styles['columnHeader--withRightBorder']
   }, {
     [`& .${c.columnHeaderCheckbox}`]: styles.columnHeaderCheckbox
   }, {
     [`& .${c.columnHeaderDraggableContainer}`]: styles.columnHeaderDraggableContainer
   }, {
     [`& .${c.columnHeaderTitleContainer}`]: styles.columnHeaderTitleContainer
+  }, {
+    [`& .${c.columnHeaderTitleContainerContent}`]: styles.columnHeaderTitleContainerContent
+  }, {
+    [`& .${c.columnSeparator}`]: styles.columnSeparator
   }, {
     [`& .${c['columnSeparator--resizable']}`]: styles['columnSeparator--resizable']
   }, {
     [`& .${c['columnSeparator--resizing']}`]: styles['columnSeparator--resizing']
   }, {
-    [`& .${c.columnSeparator}`]: styles.columnSeparator
+    [`& .${c['columnSeparator--sideLeft']}`]: styles['columnSeparator--sideLeft']
+  }, {
+    [`& .${c['columnSeparator--sideRight']}`]: styles['columnSeparator--sideRight']
+  }, {
+    [`& .${c['container--bottom']}`]: styles['container--bottom']
+  }, {
+    [`& .${c['container--top']}`]: styles['container--top']
+  }, {
+    [`& .${c.detailPanelToggleCell}`]: styles.detailPanelToggleCell
+  }, {
+    [`& .${c['detailPanelToggleCell--expanded']}`]: styles['detailPanelToggleCell--expanded']
+  }, {
+    [`& .${c.editBooleanCell}`]: styles.editBooleanCell
   }, {
     [`& .${c.filterIcon}`]: styles.filterIcon
+  }, {
+    [`& .${c['filler--borderBottom']}`]: styles['filler--borderBottom']
+  }, {
+    [`& .${c['filler--pinnedLeft']}`]: styles['filler--pinnedLeft']
+  }, {
+    [`& .${c['filler--pinnedRight']}`]: styles['filler--pinnedRight']
+  }, {
+    [`& .${c.groupingCriteriaCell}`]: styles.groupingCriteriaCell
+  }, {
+    [`& .${c.groupingCriteriaCellLoadingContainer}`]: styles.groupingCriteriaCellLoadingContainer
+  }, {
+    [`& .${c.groupingCriteriaCellToggle}`]: styles.groupingCriteriaCellToggle
+  }, {
+    [`& .${c.headerFilterRow}`]: styles.headerFilterRow
   }, {
     [`& .${c.iconSeparator}`]: styles.iconSeparator
   }, {
     [`& .${c.menuIcon}`]: styles.menuIcon
   }, {
     [`& .${c.menuIconButton}`]: styles.menuIconButton
+  }, {
+    [`& .${c.menuList}`]: styles.menuList
   }, {
     [`& .${c.menuOpen}`]: styles.menuOpen
   }, {
-    [`& .${c.menuList}`]: styles.menuList
+    [`& .${c.overlayWrapperInner}`]: styles.overlayWrapperInner
   }, {
-    [`& .${c['row--editable']}`]: styles['row--editable']
+    [`& .${c.pinnedRows}`]: styles.pinnedRows
   }, {
-    [`& .${c['row--editing']}`]: styles['row--editing']
+    [`& .${c['pinnedRows--bottom']}`]: styles['pinnedRows--bottom']
   }, {
-    [`& .${c['row--dragging']}`]: styles['row--dragging']
+    [`& .${c['pinnedRows--top']}`]: styles['pinnedRows--top']
   }, {
     [`& .${c.row}`]: styles.row
   }, {
-    [`& .${c.rowReorderCellPlaceholder}`]: styles.rowReorderCellPlaceholder
+    [`& .${c['row--borderBottom']}`]: styles['row--borderBottom']
+  }, {
+    [`& .${c['row--detailPanelExpanded']}`]: styles['row--detailPanelExpanded']
+  }, {
+    [`& .${c['row--dragging']}`]: styles['row--dragging']
+  }, {
+    [`& .${c['row--dynamicHeight']}`]: styles['row--dynamicHeight']
+  }, {
+    [`& .${c['row--editable']}`]: styles['row--editable']
+  }, {
+    [`& .${c['row--editing']}`]: styles['row--editing']
+  }, {
+    [`& .${c['row--firstVisible']}`]: styles['row--firstVisible']
+  }, {
+    [`& .${c['row--lastVisible']}`]: styles['row--lastVisible']
   }, {
     [`& .${c.rowReorderCell}`]: styles.rowReorderCell
   }, {
     [`& .${c['rowReorderCell--draggable']}`]: styles['rowReorderCell--draggable']
   }, {
-    [`& .${c.sortIcon}`]: styles.sortIcon
+    [`& .${c.rowReorderCellContainer}`]: styles.rowReorderCellContainer
   }, {
-    [`& .${c.withBorderColor}`]: styles.withBorderColor
+    [`& .${c.rowReorderCellPlaceholder}`]: styles.rowReorderCellPlaceholder
   }, {
-    [`& .${c.treeDataGroupingCell}`]: styles.treeDataGroupingCell
+    [`& .${c.rowSkeleton}`]: styles.rowSkeleton
   }, {
-    [`& .${c.treeDataGroupingCellToggle}`]: styles.treeDataGroupingCellToggle
+    [`& .${c.scrollbar}`]: styles.scrollbar
   }, {
-    [`& .${c.treeDataGroupingCellLoadingContainer}`]: styles.treeDataGroupingCellLoadingContainer
+    [`& .${c['scrollbar--horizontal']}`]: styles['scrollbar--horizontal']
   }, {
-    [`& .${c.groupingCriteriaCellLoadingContainer}`]: styles.groupingCriteriaCellLoadingContainer
+    [`& .${c['scrollbar--vertical']}`]: styles['scrollbar--vertical']
   }, {
-    [`& .${c.detailPanelToggleCell}`]: styles.detailPanelToggleCell
+    [`& .${c.scrollbarFiller}`]: styles.scrollbarFiller
   }, {
-    [`& .${c['detailPanelToggleCell--expanded']}`]: styles['detailPanelToggleCell--expanded']
-  }, styles.root]
+    [`& .${c['scrollbarFiller--borderBottom']}`]: styles['scrollbarFiller--borderBottom']
+  }, {
+    [`& .${c['scrollbarFiller--borderTop']}`]: styles['scrollbarFiller--borderTop']
+  }, {
+    [`& .${c['scrollbarFiller--header']}`]: styles['scrollbarFiller--header']
+  }, {
+    [`& .${c['scrollbarFiller--pinnedRight']}`]: styles['scrollbarFiller--pinnedRight']
+  }, {
+    [`& .${c.sortIcon}`]: styles.sortIcon
+  }, {
+    [`& .${c.treeDataGroupingCell}`]: styles.treeDataGroupingCell
+  }, {
+    [`& .${c.treeDataGroupingCellLoadingContainer}`]: styles.treeDataGroupingCellLoadingContainer
+  }, {
+    [`& .${c.treeDataGroupingCellToggle}`]: styles.treeDataGroupingCellToggle
+  }, {
+    [`& .${c.withBorderColor}`]: styles.withBorderColor
+  }]
 })(({
   theme: t
 }) => {
   const apiRef = useGridPrivateApiContext();
-  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  const shouldShowBorderTopRightRadius = useGridSelector(apiRef, shouldShowBorderTopRightRadiusSelector);
   const borderColor = getBorderColor(t);
   const radius = t.shape.borderRadius;
   const containerBackground = t.vars ? t.vars.palette.background.default : t.mixins.MuiDataGrid?.containerBackground ?? t.palette.background.default;
@@ -255,10 +357,6 @@ export const GridRootStyles = styled('div', {
         overflow: 'visible !important'
       },
       '@media (hover: hover)': {
-        [`& .${c.iconButtonContainer}`]: {
-          width: '0 !important',
-          visibility: 'hidden !important'
-        },
         [`& .${c.menuIcon}`]: {
           width: '0 !important',
           visibility: 'hidden !important'
@@ -319,7 +417,7 @@ export const GridRootStyles = styled('div', {
       borderTopLeftRadius: 'calc(var(--unstable_DataGrid-radius) - 1px)'
     },
     [`&.${c['root--noToolbar']} [aria-rowindex="1"] .${c['columnHeader--last']}`]: {
-      borderTopRightRadius: dimensions.hasScrollX && (!dimensions.hasScrollY || dimensions.scrollbarSize === 0) ? 'calc(var(--unstable_DataGrid-radius) - 1px)' : undefined
+      borderTopRightRadius: shouldShowBorderTopRightRadius ? 'calc(var(--unstable_DataGrid-radius) - 1px)' : undefined
     },
     [`& .${c.columnHeaderCheckbox}, & .${c.cellCheckbox}`]: {
       padding: 0,

package/modern/components/toolbar/GridToolbarColumnsButton.js

@@ -45,14 +45,15 @@ const GridToolbarColumnsButton = forwardRef(function GridToolbarColumnsButton(pr
       "aria-haspopup": "menu",
       "aria-expanded": isOpen,
       "aria-controls": isOpen ? columnPanelId : undefined,
-      startIcon: /*#__PURE__*/_jsx(rootProps.slots.columnSelectorIcon, {}),
-      onClick: showColumns,
+      startIcon: /*#__PURE__*/_jsx(rootProps.slots.columnSelectorIcon, {})
+    }, rootProps.slotProps?.baseButton, buttonProps, {
       onPointerUp: event => {
         if (preferencePanel.open) {
           event.stopPropagation();
         }
-      }
-    }, rootProps.slotProps?.baseButton, buttonProps, {
+        buttonProps.onPointerUp?.(event);
+      },
+      onClick: showColumns,
       ref: ref,
       children: apiRef.current.getLocaleText('toolbarColumns')
     }))

package/modern/components/toolbar/GridToolbarDensitySelector.js

@@ -94,9 +94,9 @@ const GridToolbarDensitySelector = forwardRef(function GridToolbarDensitySelecto
         "aria-haspopup": "menu",
         "aria-expanded": open,
         "aria-controls": open ? densityMenuId : undefined,
-        id: densityButtonId,
-        onClick: handleDensitySelectorOpen
+        id: densityButtonId
       }, rootProps.slotProps?.baseButton, buttonProps, {
+        onClick: handleDensitySelectorOpen,
         ref: handleRef,
         children: apiRef.current.getLocaleText('toolbarDensity')
       }))

package/modern/components/toolbar/GridToolbarExportContainer.js

@@ -52,9 +52,9 @@ const GridToolbarExportContainer = forwardRef(function GridToolbarExportContaine
         "aria-label": apiRef.current.getLocaleText('toolbarExportLabel'),
         "aria-haspopup": "menu",
         "aria-controls": open ? exportMenuId : undefined,
-        id: exportButtonId,
-        onClick: handleMenuOpen
+        id: exportButtonId
       }, rootProps.slotProps?.baseButton, buttonProps, {
+        onClick: handleMenuOpen,
         ref: handleRef,
         children: apiRef.current.getLocaleText('toolbarExport')
       }))

package/modern/components/toolbar/GridToolbarFilterButton.js

@@ -109,14 +109,15 @@ const GridToolbarFilterButton = forwardRef(function GridToolbarFilterButton(prop
         color: "primary"
       }, rootProps.slotProps?.baseBadge, badgeProps, {
         children: /*#__PURE__*/_jsx(rootProps.slots.openFilterButtonIcon, {})
-      })),
+      }))
+    }, rootProps.slotProps?.baseButton, buttonProps, {
       onClick: toggleFilter,
       onPointerUp: event => {
         if (preferencePanel.open) {
           event.stopPropagation();
         }
-      }
-    }, rootProps.slotProps?.baseButton, buttonProps, {
+        buttonProps.onPointerUp?.(event);
+      },
       ref: ref,
       children: apiRef.current.getLocaleText('toolbarFilters')
     }))

package/modern/components/virtualization/GridMainContainer.js

@@ -14,7 +14,12 @@ const GridPanelAnchor = styled('div')({
 const Element = styled('div', {
   name: 'MuiDataGrid',
   slot: 'Main',
-  overridesResolver: (props, styles) => styles.main
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.main, ownerState.hasPinnedRight && styles['main--hasPinnedRight'], ownerState.loadingOverlayVariant === 'skeleton' && styles['main--hasSkeletonLoadingOverlay']];
+  }
 })({
   flexGrow: 1,
   position: 'relative',
@@ -23,11 +28,14 @@ const Element = styled('div', {
   flexDirection: 'column'
 });
 export const GridMainContainer = forwardRef((props, ref) => {
+  const {
+    ownerState
+  } = props;
   const rootProps = useGridRootProps();
   const configuration = useGridConfiguration();
   const ariaAttributes = configuration.hooks.useGridAriaAttributes();
   return /*#__PURE__*/_jsxs(Element, _extends({
-    ownerState: rootProps,
+    ownerState: ownerState,
     className: props.className,
     tabIndex: -1
   }, ariaAttributes, rootProps.slotProps?.main, {

package/modern/components/virtualization/GridVirtualScrollbar.js

@@ -67,26 +67,27 @@ const GridVirtualScrollbar = forwardRef(function GridVirtualScrollbar(props, ref
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
   const propertyDimension = props.position === 'vertical' ? 'height' : 'width';
   const propertyScroll = props.position === 'vertical' ? 'scrollTop' : 'scrollLeft';
+  const propertyScrollPosition = props.position === 'vertical' ? 'top' : 'left';
   const hasScroll = props.position === 'vertical' ? dimensions.hasScrollX : dimensions.hasScrollY;
   const contentSize = dimensions.minimumSize[propertyDimension] + (hasScroll ? dimensions.scrollbarSize : 0);
   const scrollbarSize = props.position === 'vertical' ? dimensions.viewportInnerSize.height : dimensions.viewportOuterSize.width;
   const scrollbarInnerSize = scrollbarSize * (contentSize / dimensions.viewportOuterSize[propertyDimension]);
   const onScrollerScroll = useEventCallback(() => {
-    const scroller = apiRef.current.virtualScrollerRef.current;
     const scrollbar = scrollbarRef.current;
+    const scrollPosition = props.scrollPosition.current;
     if (!scrollbar) {
       return;
     }
-    if (scroller[propertyScroll] === lastPosition.current) {
+    if (scrollPosition[propertyScrollPosition] === lastPosition.current) {
       return;
     }
-    lastPosition.current = scroller[propertyScroll];
+    lastPosition.current = scrollPosition[propertyScrollPosition];
     if (isLocked.current) {
       isLocked.current = false;
       return;
     }
     isLocked.current = true;
-    const value = scroller[propertyScroll] / contentSize;
+    const value = scrollPosition[propertyScrollPosition] / contentSize;
     scrollbar[propertyScroll] = value * scrollbarInnerSize;
   });
   const onScrollbarScroll = useEventCallback(() => {
@@ -107,7 +108,6 @@ const GridVirtualScrollbar = forwardRef(function GridVirtualScrollbar(props, ref
     const scroller = apiRef.current.virtualScrollerRef.current;
     const scrollbar = scrollbarRef.current;
     const options = {
-      capture: true,
       passive: true
     };
     scroller.addEventListener('scroll', onScrollerScroll, options);

package/modern/components/virtualization/GridVirtualScroller.js

@@ -2,12 +2,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
+import { gridHasBottomFillerSelector, gridHasScrollXSelector, gridHasScrollYSelector } from "../../hooks/features/dimensions/gridDimensionsSelectors.js";
 import { GridScrollArea } from "../GridScrollArea.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
-import { gridDimensionsSelector } from "../../hooks/features/dimensions/index.js";
 import { useGridVirtualScroller } from "../../hooks/features/virtualization/useGridVirtualScroller.js";
 import { useGridOverlays } from "../../hooks/features/overlays/useGridOverlays.js";
 import { GridOverlays as Overlays } from "../base/GridOverlays.js";
@@ -20,20 +20,28 @@ import { GridVirtualScrollerFiller as SpaceFiller } from "./GridVirtualScrollerF
 import { GridVirtualScrollerRenderZone as RenderZone } from "./GridVirtualScrollerRenderZone.js";
 import { GridVirtualScrollbar as Scrollbar } from "./GridVirtualScrollbar.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useUtilityClasses = (ownerState, dimensions, loadingOverlayVariant) => {
+const useUtilityClasses = ownerState => {
   const {
-    classes
+    classes,
+    hasScrollX,
+    hasPinnedRight,
+    loadingOverlayVariant
   } = ownerState;
   const slots = {
-    root: ['main', dimensions.rightPinnedWidth > 0 && 'main--hasPinnedRight', loadingOverlayVariant === 'skeleton' && 'main--hasSkeletonLoadingOverlay'],
-    scroller: ['virtualScroller', dimensions.hasScrollX && 'virtualScroller--hasScrollX']
+    root: ['main', hasPinnedRight && 'main--hasPinnedRight', loadingOverlayVariant === 'skeleton' && 'main--hasSkeletonLoadingOverlay'],
+    scroller: ['virtualScroller', hasScrollX && 'virtualScroller--hasScrollX']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 const Scroller = styled('div', {
   name: 'MuiDataGrid',
   slot: 'VirtualScroller',
-  overridesResolver: (props, styles) => styles.virtualScroller
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.virtualScroller, ownerState.hasScrollX && styles['virtualScroller--hasScrollX']];
+  }
 })({
   position: 'relative',
   height: '100%',
@@ -51,12 +59,22 @@ const Scroller = styled('div', {
   // See https://github.com/mui/mui-x/issues/10547
   zIndex: 0
 });
+const hasPinnedRightSelector = state => state.dimensions.rightPinnedWidth > 0;
 function GridVirtualScroller(props) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  const hasScrollY = useGridSelector(apiRef, gridHasScrollYSelector);
+  const hasScrollX = useGridSelector(apiRef, gridHasScrollXSelector);
+  const hasPinnedRight = useGridSelector(apiRef, hasPinnedRightSelector);
+  const hasBottomFiller = useGridSelector(apiRef, gridHasBottomFillerSelector);
   const overlaysProps = useGridOverlays();
-  const classes = useUtilityClasses(rootProps, dimensions, overlaysProps.loadingOverlayVariant);
+  const ownerState = {
+    classes: rootProps.classes,
+    hasScrollX,
+    hasPinnedRight,
+    loadingOverlayVariant: overlaysProps.loadingOverlayVariant
+  };
+  const classes = useUtilityClasses(ownerState);
   const virtualScroller = useGridVirtualScroller();
   const {
     getContainerProps,
@@ -65,20 +83,22 @@ function GridVirtualScroller(props) {
     getRenderZoneProps,
     getScrollbarVerticalProps,
     getScrollbarHorizontalProps,
-    getRows
+    getRows,
+    getScrollAreaProps
   } = virtualScroller;
   const rows = getRows();
   return /*#__PURE__*/_jsxs(Container, _extends({
     className: classes.root
   }, getContainerProps(), {
-    children: [/*#__PURE__*/_jsx(GridScrollArea, {
+    ownerState: ownerState,
+    children: [/*#__PURE__*/_jsx(GridScrollArea, _extends({
       scrollDirection: "left"
-    }), /*#__PURE__*/_jsx(GridScrollArea, {
+    }, getScrollAreaProps())), /*#__PURE__*/_jsx(GridScrollArea, _extends({
       scrollDirection: "right"
-    }), /*#__PURE__*/_jsxs(Scroller, _extends({
+    }, getScrollAreaProps())), /*#__PURE__*/_jsxs(Scroller, _extends({
       className: classes.scroller
     }, getScrollerProps(), {
-      ownerState: rootProps,
+      ownerState: ownerState,
       children: [/*#__PURE__*/_jsxs(TopContainer, {
         children: [!rootProps.unstable_listView && /*#__PURE__*/_jsx(GridHeaders, {}), /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
           position: "top",
@@ -90,7 +110,7 @@ function GridVirtualScroller(props) {
             virtualScroller: virtualScroller
           })]
         }))
-      })), /*#__PURE__*/_jsx(SpaceFiller, {
+      })), hasBottomFiller && /*#__PURE__*/_jsx(SpaceFiller, {
         rowsLength: rows.length
       }), /*#__PURE__*/_jsx(BottomContainer, {
         children: /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
@@ -98,9 +118,9 @@ function GridVirtualScroller(props) {
           virtualScroller: virtualScroller
         })
       })]
-    })), dimensions.hasScrollX && !rootProps.unstable_listView && /*#__PURE__*/_jsx(Scrollbar, _extends({
+    })), hasScrollX && !rootProps.unstable_listView && /*#__PURE__*/_jsx(Scrollbar, _extends({
       position: "horizontal"
-    }, getScrollbarHorizontalProps())), dimensions.hasScrollY && /*#__PURE__*/_jsx(Scrollbar, _extends({
+    }, getScrollbarHorizontalProps())), hasScrollY && /*#__PURE__*/_jsx(Scrollbar, _extends({
       position: "vertical"
     }, getScrollbarVerticalProps())), props.children]
   }));

package/modern/components/virtualization/GridVirtualScrollerContent.js

@@ -19,14 +19,23 @@ const useUtilityClasses = (props, overflowedContent) => {
 const VirtualScrollerContentRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'VirtualScrollerContent',
-  overridesResolver: (props, styles) => styles.virtualScrollerContent
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.virtualScrollerContent, ownerState.overflowedContent && styles['virtualScrollerContent--overflowed']];
+  }
 })({});
 const GridVirtualScrollerContent = forwardRef(function GridVirtualScrollerContent(props, ref) {
   const rootProps = useGridRootProps();
   const overflowedContent = !rootProps.autoHeight && props.style?.minHeight === 'auto';
   const classes = useUtilityClasses(rootProps, overflowedContent);
+  const ownerState = {
+    classes: rootProps.classes,
+    overflowedContent
+  };
   return /*#__PURE__*/_jsx(VirtualScrollerContentRoot, _extends({}, props, {
-    ownerState: rootProps,
+    ownerState: ownerState,
     className: clsx(classes.root, props.className),
     ref: ref
   }));

package/modern/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.js

@@ -1,19 +1,21 @@
 import * as React from 'react';
 import { useFirstRender } from "../../utils/useFirstRender.js";
-export const useGridRegisterPipeProcessor = (apiRef, group, callback) => {
+export const useGridRegisterPipeProcessor = (apiRef, group, callback, enabled = true) => {
   const cleanup = React.useRef(null);
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);
   const registerPreProcessor = React.useCallback(() => {
     cleanup.current = apiRef.current.registerPipeProcessor(group, id.current, callback);
   }, [apiRef, callback, group]);
   useFirstRender(() => {
-    registerPreProcessor();
+    if (enabled) {
+      registerPreProcessor();
+    }
   });
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {
     if (isFirstRender.current) {
       isFirstRender.current = false;
-    } else {
+    } else if (enabled) {
       registerPreProcessor();
     }
     return () => {
@@ -22,5 +24,5 @@ export const useGridRegisterPipeProcessor = (apiRef, group, callback) => {
         cleanup.current = null;
       }
     };
-  }, [registerPreProcessor]);
+  }, [registerPreProcessor, enabled]);
 };

package/modern/hooks/core/useGridStateInitialization.js

@@ -4,7 +4,6 @@ import { useGridApiMethod } from "../utils/index.js";
 import { isFunction } from "../../utils/utils.js";
 export const useGridStateInitialization = apiRef => {
   const controlStateMapRef = React.useRef({});
-  const [, rawForceUpdate] = React.useState();
   const registerControlState = React.useCallback(controlStateItem => {
     controlStateMapRef.current[controlStateItem.stateId] = controlStateItem;
   }, []);
@@ -79,7 +78,9 @@ export const useGridStateInitialization = apiRef => {
       });
     }, reason);
   }, [apiRef]);
-  const forceUpdate = React.useCallback(() => rawForceUpdate(() => apiRef.current.state), [apiRef]);
+  const forceUpdate = React.useCallback(() => {
+    // @deprecated - do nothing
+  }, []);
   const publicStateApi = {
     setState,
     forceUpdate