@mui/x-data-grid 7.24.1 → 7.26.0

package/node/components/containers/GridRootStyles.js

@@ -10,7 +10,6 @@ var _styles = require("@mui/material/styles");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
-var _gridDimensionsSelectors = require("../../hooks/features/dimensions/gridDimensionsSelectors");
 function getBorderColor(theme) {
   if (theme.vars) {
     return theme.vars.palette.TableCell.border;
@@ -42,53 +41,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);
 const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'Root',
-  overridesResolver: (props, styles) => [{
+  overridesResolver: (props, styles) => [
+  // Root overrides
+  styles.root, {
     [`&.${_gridClasses.gridClasses.autoHeight}`]: styles.autoHeight
   }, {
-    [`&.${_gridClasses.gridClasses.aggregationColumnHeader}`]: styles.aggregationColumnHeader
+    [`&.${_gridClasses.gridClasses.autosizing}`]: styles.autosizing
   }, {
-    [`&.${_gridClasses.gridClasses['aggregationColumnHeader--alignLeft']}`]: styles['aggregationColumnHeader--alignLeft']
+    [`&.${_gridClasses.gridClasses['root--densityStandard']}`]: styles['root--densityStandard']
   }, {
-    [`&.${_gridClasses.gridClasses['aggregationColumnHeader--alignCenter']}`]: styles['aggregationColumnHeader--alignCenter']
+    [`&.${_gridClasses.gridClasses['root--densityComfortable']}`]: styles['root--densityComfortable']
   }, {
-    [`&.${_gridClasses.gridClasses['aggregationColumnHeader--alignRight']}`]: styles['aggregationColumnHeader--alignRight']
+    [`&.${_gridClasses.gridClasses['root--densityCompact']}`]: styles['root--densityCompact']
   }, {
-    [`&.${_gridClasses.gridClasses.aggregationColumnHeaderLabel}`]: styles.aggregationColumnHeaderLabel
+    [`&.${_gridClasses.gridClasses['root--disableUserSelection']}`]: styles['root--disableUserSelection']
   }, {
-    [`&.${_gridClasses.gridClasses['root--disableUserSelection']} .${_gridClasses.gridClasses.cell}`]: styles['root--disableUserSelection']
+    [`&.${_gridClasses.gridClasses['root--noToolbar']}`]: styles['root--noToolbar']
   }, {
-    [`&.${_gridClasses.gridClasses.autosizing}`]: styles.autosizing
+    [`&.${_gridClasses.gridClasses.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.
+  {
+    [`& .${_gridClasses.gridClasses.actionsCell}`]: styles.actionsCell
   }, {
-    [`& .${_gridClasses.gridClasses.editBooleanCell}`]: styles.editBooleanCell
+    [`& .${_gridClasses.gridClasses.booleanCell}`]: styles.booleanCell
   }, {
     [`& .${_gridClasses.gridClasses.cell}`]: styles.cell
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--editable']}`]: styles['cell--editable']
   }, {
     [`& .${_gridClasses.gridClasses['cell--editing']}`]: styles['cell--editing']
   }, {
-    [`& .${_gridClasses.gridClasses['cell--textCenter']}`]: styles['cell--textCenter']
+    [`& .${_gridClasses.gridClasses['cell--flex']}`]: styles['cell--flex']
   }, {
-    [`& .${_gridClasses.gridClasses['cell--textLeft']}`]: styles['cell--textLeft']
+    [`& .${_gridClasses.gridClasses['cell--pinnedLeft']}`]: styles['cell--pinnedLeft']
   }, {
-    [`& .${_gridClasses.gridClasses['cell--textRight']}`]: styles['cell--textRight']
-  }, {
-    [`& .${_gridClasses.gridClasses['cell--rangeTop']}`]: styles['cell--rangeTop']
+    [`& .${_gridClasses.gridClasses['cell--pinnedRight']}`]: styles['cell--pinnedRight']
   }, {
     [`& .${_gridClasses.gridClasses['cell--rangeBottom']}`]: styles['cell--rangeBottom']
   }, {
     [`& .${_gridClasses.gridClasses['cell--rangeLeft']}`]: styles['cell--rangeLeft']
   }, {
     [`& .${_gridClasses.gridClasses['cell--rangeRight']}`]: styles['cell--rangeRight']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--rangeTop']}`]: styles['cell--rangeTop']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--selectionMode']}`]: styles['cell--selectionMode']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--textCenter']}`]: styles['cell--textCenter']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--textLeft']}`]: styles['cell--textLeft']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--textRight']}`]: styles['cell--textRight']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--withLeftBorder']}`]: styles['cell--withLeftBorder']
   }, {
     [`& .${_gridClasses.gridClasses['cell--withRightBorder']}`]: styles['cell--withRightBorder']
   }, {
     [`& .${_gridClasses.gridClasses.cellCheckbox}`]: styles.cellCheckbox
+  }, {
+    [`& .${_gridClasses.gridClasses.cellEmpty}`]: styles.cellEmpty
+  }, {
+    [`& .${_gridClasses.gridClasses.cellOffsetLeft}`]: styles.cellOffsetLeft
   }, {
     [`& .${_gridClasses.gridClasses.cellSkeleton}`]: styles.cellSkeleton
   }, {
     [`& .${_gridClasses.gridClasses.checkboxInput}`]: styles.checkboxInput
+  }, {
+    [`& .${_gridClasses.gridClasses.columnHeader}`]: styles.columnHeader
   }, {
     [`& .${_gridClasses.gridClasses['columnHeader--alignCenter']}`]: styles['columnHeader--alignCenter']
   }, {
@@ -97,80 +123,156 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses['columnHeader--alignRight']}`]: styles['columnHeader--alignRight']
   }, {
     [`& .${_gridClasses.gridClasses['columnHeader--dragging']}`]: styles['columnHeader--dragging']
+  }, {
+    [`& .${_gridClasses.gridClasses['columnHeader--emptyGroup']}`]: styles['columnHeader--emptyGroup']
+  }, {
+    [`& .${_gridClasses.gridClasses['columnHeader--filledGroup']}`]: styles['columnHeader--filledGroup']
+  }, {
+    [`& .${_gridClasses.gridClasses['columnHeader--filtered']}`]: styles['columnHeader--filtered']
+  }, {
+    [`& .${_gridClasses.gridClasses['columnHeader--last']}`]: styles['columnHeader--last']
+  }, {
+    [`& .${_gridClasses.gridClasses['columnHeader--lastUnpinned']}`]: styles['columnHeader--lastUnpinned']
   }, {
     [`& .${_gridClasses.gridClasses['columnHeader--moving']}`]: styles['columnHeader--moving']
   }, {
     [`& .${_gridClasses.gridClasses['columnHeader--numeric']}`]: styles['columnHeader--numeric']
+  }, {
+    [`& .${_gridClasses.gridClasses['columnHeader--pinnedLeft']}`]: styles['columnHeader--pinnedLeft']
+  }, {
+    [`& .${_gridClasses.gridClasses['columnHeader--pinnedRight']}`]: styles['columnHeader--pinnedRight']
+  }, {
+    [`& .${_gridClasses.gridClasses['columnHeader--siblingFocused']}`]: styles['columnHeader--siblingFocused']
   }, {
     [`& .${_gridClasses.gridClasses['columnHeader--sortable']}`]: styles['columnHeader--sortable']
   }, {
     [`& .${_gridClasses.gridClasses['columnHeader--sorted']}`]: styles['columnHeader--sorted']
   }, {
-    [`& .${_gridClasses.gridClasses['columnHeader--withRightBorder']}`]: styles['columnHeader--withRightBorder']
-  }, {
-    [`& .${_gridClasses.gridClasses.columnHeader}`]: styles.columnHeader
+    [`& .${_gridClasses.gridClasses['columnHeader--withLeftBorder']}`]: styles['columnHeader--withLeftBorder']
   }, {
-    [`& .${_gridClasses.gridClasses.headerFilterRow}`]: styles.headerFilterRow
+    [`& .${_gridClasses.gridClasses['columnHeader--withRightBorder']}`]: styles['columnHeader--withRightBorder']
   }, {
     [`& .${_gridClasses.gridClasses.columnHeaderCheckbox}`]: styles.columnHeaderCheckbox
   }, {
     [`& .${_gridClasses.gridClasses.columnHeaderDraggableContainer}`]: styles.columnHeaderDraggableContainer
   }, {
     [`& .${_gridClasses.gridClasses.columnHeaderTitleContainer}`]: styles.columnHeaderTitleContainer
+  }, {
+    [`& .${_gridClasses.gridClasses.columnHeaderTitleContainerContent}`]: styles.columnHeaderTitleContainerContent
+  }, {
+    [`& .${_gridClasses.gridClasses.columnSeparator}`]: styles.columnSeparator
   }, {
     [`& .${_gridClasses.gridClasses['columnSeparator--resizable']}`]: styles['columnSeparator--resizable']
   }, {
     [`& .${_gridClasses.gridClasses['columnSeparator--resizing']}`]: styles['columnSeparator--resizing']
   }, {
-    [`& .${_gridClasses.gridClasses.columnSeparator}`]: styles.columnSeparator
+    [`& .${_gridClasses.gridClasses['columnSeparator--sideLeft']}`]: styles['columnSeparator--sideLeft']
+  }, {
+    [`& .${_gridClasses.gridClasses['columnSeparator--sideRight']}`]: styles['columnSeparator--sideRight']
+  }, {
+    [`& .${_gridClasses.gridClasses['container--bottom']}`]: styles['container--bottom']
+  }, {
+    [`& .${_gridClasses.gridClasses['container--top']}`]: styles['container--top']
+  }, {
+    [`& .${_gridClasses.gridClasses.detailPanelToggleCell}`]: styles.detailPanelToggleCell
+  }, {
+    [`& .${_gridClasses.gridClasses['detailPanelToggleCell--expanded']}`]: styles['detailPanelToggleCell--expanded']
+  }, {
+    [`& .${_gridClasses.gridClasses.editBooleanCell}`]: styles.editBooleanCell
   }, {
     [`& .${_gridClasses.gridClasses.filterIcon}`]: styles.filterIcon
+  }, {
+    [`& .${_gridClasses.gridClasses['filler--borderBottom']}`]: styles['filler--borderBottom']
+  }, {
+    [`& .${_gridClasses.gridClasses['filler--pinnedLeft']}`]: styles['filler--pinnedLeft']
+  }, {
+    [`& .${_gridClasses.gridClasses['filler--pinnedRight']}`]: styles['filler--pinnedRight']
+  }, {
+    [`& .${_gridClasses.gridClasses.groupingCriteriaCell}`]: styles.groupingCriteriaCell
+  }, {
+    [`& .${_gridClasses.gridClasses.groupingCriteriaCellLoadingContainer}`]: styles.groupingCriteriaCellLoadingContainer
+  }, {
+    [`& .${_gridClasses.gridClasses.groupingCriteriaCellToggle}`]: styles.groupingCriteriaCellToggle
+  }, {
+    [`& .${_gridClasses.gridClasses.headerFilterRow}`]: styles.headerFilterRow
   }, {
     [`& .${_gridClasses.gridClasses.iconSeparator}`]: styles.iconSeparator
   }, {
     [`& .${_gridClasses.gridClasses.menuIcon}`]: styles.menuIcon
   }, {
     [`& .${_gridClasses.gridClasses.menuIconButton}`]: styles.menuIconButton
+  }, {
+    [`& .${_gridClasses.gridClasses.menuList}`]: styles.menuList
   }, {
     [`& .${_gridClasses.gridClasses.menuOpen}`]: styles.menuOpen
   }, {
-    [`& .${_gridClasses.gridClasses.menuList}`]: styles.menuList
+    [`& .${_gridClasses.gridClasses.overlayWrapperInner}`]: styles.overlayWrapperInner
   }, {
-    [`& .${_gridClasses.gridClasses['row--editable']}`]: styles['row--editable']
+    [`& .${_gridClasses.gridClasses.pinnedRows}`]: styles.pinnedRows
   }, {
-    [`& .${_gridClasses.gridClasses['row--editing']}`]: styles['row--editing']
+    [`& .${_gridClasses.gridClasses['pinnedRows--bottom']}`]: styles['pinnedRows--bottom']
   }, {
-    [`& .${_gridClasses.gridClasses['row--dragging']}`]: styles['row--dragging']
+    [`& .${_gridClasses.gridClasses['pinnedRows--top']}`]: styles['pinnedRows--top']
   }, {
     [`& .${_gridClasses.gridClasses.row}`]: styles.row
   }, {
-    [`& .${_gridClasses.gridClasses.rowReorderCellPlaceholder}`]: styles.rowReorderCellPlaceholder
+    [`& .${_gridClasses.gridClasses['row--borderBottom']}`]: styles['row--borderBottom']
+  }, {
+    [`& .${_gridClasses.gridClasses['row--detailPanelExpanded']}`]: styles['row--detailPanelExpanded']
+  }, {
+    [`& .${_gridClasses.gridClasses['row--dragging']}`]: styles['row--dragging']
+  }, {
+    [`& .${_gridClasses.gridClasses['row--dynamicHeight']}`]: styles['row--dynamicHeight']
+  }, {
+    [`& .${_gridClasses.gridClasses['row--editable']}`]: styles['row--editable']
+  }, {
+    [`& .${_gridClasses.gridClasses['row--editing']}`]: styles['row--editing']
+  }, {
+    [`& .${_gridClasses.gridClasses['row--firstVisible']}`]: styles['row--firstVisible']
+  }, {
+    [`& .${_gridClasses.gridClasses['row--lastVisible']}`]: styles['row--lastVisible']
   }, {
     [`& .${_gridClasses.gridClasses.rowReorderCell}`]: styles.rowReorderCell
   }, {
     [`& .${_gridClasses.gridClasses['rowReorderCell--draggable']}`]: styles['rowReorderCell--draggable']
   }, {
-    [`& .${_gridClasses.gridClasses.sortIcon}`]: styles.sortIcon
+    [`& .${_gridClasses.gridClasses.rowReorderCellContainer}`]: styles.rowReorderCellContainer
   }, {
-    [`& .${_gridClasses.gridClasses.withBorderColor}`]: styles.withBorderColor
+    [`& .${_gridClasses.gridClasses.rowReorderCellPlaceholder}`]: styles.rowReorderCellPlaceholder
   }, {
-    [`& .${_gridClasses.gridClasses.treeDataGroupingCell}`]: styles.treeDataGroupingCell
+    [`& .${_gridClasses.gridClasses.rowSkeleton}`]: styles.rowSkeleton
   }, {
-    [`& .${_gridClasses.gridClasses.treeDataGroupingCellToggle}`]: styles.treeDataGroupingCellToggle
+    [`& .${_gridClasses.gridClasses.scrollbar}`]: styles.scrollbar
   }, {
-    [`& .${_gridClasses.gridClasses.treeDataGroupingCellLoadingContainer}`]: styles.treeDataGroupingCellLoadingContainer
+    [`& .${_gridClasses.gridClasses['scrollbar--horizontal']}`]: styles['scrollbar--horizontal']
   }, {
-    [`& .${_gridClasses.gridClasses.groupingCriteriaCellLoadingContainer}`]: styles.groupingCriteriaCellLoadingContainer
+    [`& .${_gridClasses.gridClasses['scrollbar--vertical']}`]: styles['scrollbar--vertical']
   }, {
-    [`& .${_gridClasses.gridClasses.detailPanelToggleCell}`]: styles.detailPanelToggleCell
+    [`& .${_gridClasses.gridClasses.scrollbarFiller}`]: styles.scrollbarFiller
   }, {
-    [`& .${_gridClasses.gridClasses['detailPanelToggleCell--expanded']}`]: styles['detailPanelToggleCell--expanded']
-  }, styles.root]
+    [`& .${_gridClasses.gridClasses['scrollbarFiller--borderBottom']}`]: styles['scrollbarFiller--borderBottom']
+  }, {
+    [`& .${_gridClasses.gridClasses['scrollbarFiller--borderTop']}`]: styles['scrollbarFiller--borderTop']
+  }, {
+    [`& .${_gridClasses.gridClasses['scrollbarFiller--header']}`]: styles['scrollbarFiller--header']
+  }, {
+    [`& .${_gridClasses.gridClasses['scrollbarFiller--pinnedRight']}`]: styles['scrollbarFiller--pinnedRight']
+  }, {
+    [`& .${_gridClasses.gridClasses.sortIcon}`]: styles.sortIcon
+  }, {
+    [`& .${_gridClasses.gridClasses.treeDataGroupingCell}`]: styles.treeDataGroupingCell
+  }, {
+    [`& .${_gridClasses.gridClasses.treeDataGroupingCellLoadingContainer}`]: styles.treeDataGroupingCellLoadingContainer
+  }, {
+    [`& .${_gridClasses.gridClasses.treeDataGroupingCellToggle}`]: styles.treeDataGroupingCellToggle
+  }, {
+    [`& .${_gridClasses.gridClasses.withBorderColor}`]: styles.withBorderColor
+  }]
 })(({
   theme: t
 }) => {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
-  const dimensions = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridDimensionsSelector);
+  const shouldShowBorderTopRightRadius = (0, _useGridSelector.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;
@@ -262,10 +364,6 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
         overflow: 'visible !important'
       },
       '@media (hover: hover)': {
-        [`& .${_gridClasses.gridClasses.iconButtonContainer}`]: {
-          width: '0 !important',
-          visibility: 'hidden !important'
-        },
         [`& .${_gridClasses.gridClasses.menuIcon}`]: {
           width: '0 !important',
           visibility: 'hidden !important'
@@ -326,7 +424,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       borderTopLeftRadius: 'calc(var(--unstable_DataGrid-radius) - 1px)'
     },
     [`&.${_gridClasses.gridClasses['root--noToolbar']} [aria-rowindex="1"] .${_gridClasses.gridClasses['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
     },
     [`& .${_gridClasses.gridClasses.columnHeaderCheckbox}, & .${_gridClasses.gridClasses.cellCheckbox}`]: {
       padding: 0,

package/node/components/toolbar/GridToolbarColumnsButton.js

@@ -53,14 +53,15 @@ const GridToolbarColumnsButton = exports.GridToolbarColumnsButton = (0, _forward
       "aria-haspopup": "menu",
       "aria-expanded": isOpen,
       "aria-controls": isOpen ? columnPanelId : undefined,
-      startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnSelectorIcon, {}),
-      onClick: showColumns,
+      startIcon: /*#__PURE__*/(0, _jsxRuntime.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/node/components/toolbar/GridToolbarDensitySelector.js

@@ -102,9 +102,9 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = (0, _for
         "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/node/components/toolbar/GridToolbarExportContainer.js

@@ -60,9 +60,9 @@ const GridToolbarExportContainer = exports.GridToolbarExportContainer = (0, _for
         "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/node/components/toolbar/GridToolbarFilterButton.js

@@ -117,14 +117,15 @@ const GridToolbarFilterButton = exports.GridToolbarFilterButton = (0, _forwardRe
         color: "primary"
       }, rootProps.slotProps?.baseBadge, badgeProps, {
         children: /*#__PURE__*/(0, _jsxRuntime.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/node/components/virtualization/GridMainContainer.js

@@ -22,7 +22,12 @@ const GridPanelAnchor = (0, _system.styled)('div')({
 const Element = (0, _system.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',
@@ -31,11 +36,14 @@ const Element = (0, _system.styled)('div', {
   flexDirection: 'column'
 });
 const GridMainContainer = exports.GridMainContainer = (0, _forwardRef.forwardRef)((props, ref) => {
+  const {
+    ownerState
+  } = props;
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const configuration = (0, _useGridConfiguration.useGridConfiguration)();
   const ariaAttributes = configuration.hooks.useGridAriaAttributes();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Element, (0, _extends2.default)({
-    ownerState: rootProps,
+    ownerState: ownerState,
     className: props.className,
     tabIndex: -1
   }, ariaAttributes, rootProps.slotProps?.main, {

package/node/components/virtualization/GridVirtualScrollbar.js

@@ -74,26 +74,27 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = (0, _forwardRef.forw
   const dimensions = (0, _hooks.useGridSelector)(apiRef, _hooks.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 = (0, _utils.unstable_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 = (0, _utils.unstable_useEventCallback)(() => {
@@ -114,7 +115,6 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = (0, _forwardRef.forw
     const scroller = apiRef.current.virtualScrollerRef.current;
     const scrollbar = scrollbarRef.current;
     const options = {
-      capture: true,
       passive: true
     };
     scroller.addEventListener('scroll', onScrollerScroll, options);

package/node/components/virtualization/GridVirtualScroller.js

@@ -10,12 +10,12 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _system = require("@mui/system");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _gridDimensionsSelectors = require("../../hooks/features/dimensions/gridDimensionsSelectors");
 var _GridScrollArea = require("../GridScrollArea");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _gridClasses = require("../../constants/gridClasses");
-var _dimensions = require("../../hooks/features/dimensions");
 var _useGridVirtualScroller = require("../../hooks/features/virtualization/useGridVirtualScroller");
 var _useGridOverlays = require("../../hooks/features/overlays/useGridOverlays");
 var _GridOverlays = require("../base/GridOverlays");
@@ -28,20 +28,28 @@ var _GridVirtualScrollerFiller = require("./GridVirtualScrollerFiller");
 var _GridVirtualScrollerRenderZone = require("./GridVirtualScrollerRenderZone");
 var _GridVirtualScrollbar = require("./GridVirtualScrollbar");
 var _jsxRuntime = require("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 (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 const Scroller = (0, _system.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%',
@@ -59,12 +67,22 @@ const Scroller = (0, _system.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 = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const dimensions = (0, _useGridSelector.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
+  const hasScrollY = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHasScrollYSelector);
+  const hasScrollX = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHasScrollXSelector);
+  const hasPinnedRight = (0, _useGridSelector.useGridSelector)(apiRef, hasPinnedRightSelector);
+  const hasBottomFiller = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHasBottomFillerSelector);
   const overlaysProps = (0, _useGridOverlays.useGridOverlays)();
-  const classes = useUtilityClasses(rootProps, dimensions, overlaysProps.loadingOverlayVariant);
+  const ownerState = {
+    classes: rootProps.classes,
+    hasScrollX,
+    hasPinnedRight,
+    loadingOverlayVariant: overlaysProps.loadingOverlayVariant
+  };
+  const classes = useUtilityClasses(ownerState);
   const virtualScroller = (0, _useGridVirtualScroller.useGridVirtualScroller)();
   const {
     getContainerProps,
@@ -73,20 +91,22 @@ function GridVirtualScroller(props) {
     getRenderZoneProps,
     getScrollbarVerticalProps,
     getScrollbarHorizontalProps,
-    getRows
+    getRows,
+    getScrollAreaProps
   } = virtualScroller;
   const rows = getRows();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridMainContainer.GridMainContainer, (0, _extends2.default)({
     className: classes.root
   }, getContainerProps(), {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, {
+    ownerState: ownerState,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, (0, _extends2.default)({
       scrollDirection: "left"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, {
+    }, getScrollAreaProps())), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, (0, _extends2.default)({
       scrollDirection: "right"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Scroller, (0, _extends2.default)({
+    }, getScrollAreaProps())), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Scroller, (0, _extends2.default)({
       className: classes.scroller
     }, getScrollerProps(), {
-      ownerState: rootProps,
+      ownerState: ownerState,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridTopContainer.GridTopContainer, {
         children: [!rootProps.unstable_listView && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridHeaders.GridHeaders, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pinnedRows, {
           position: "top",
@@ -98,7 +118,7 @@ function GridVirtualScroller(props) {
             virtualScroller: virtualScroller
           })]
         }))
-      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerFiller.GridVirtualScrollerFiller, {
+      })), hasBottomFiller && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerFiller.GridVirtualScrollerFiller, {
         rowsLength: rows.length
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridBottomContainer.GridBottomContainer, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pinnedRows, {
@@ -106,9 +126,9 @@ function GridVirtualScroller(props) {
           virtualScroller: virtualScroller
         })
       })]
-    })), dimensions.hasScrollX && !rootProps.unstable_listView && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
+    })), hasScrollX && !rootProps.unstable_listView && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
       position: "horizontal"
-    }, getScrollbarHorizontalProps())), dimensions.hasScrollY && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
+    }, getScrollbarHorizontalProps())), hasScrollY && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
       position: "vertical"
     }, getScrollbarVerticalProps())), props.children]
   }));

package/node/components/virtualization/GridVirtualScrollerContent.js

@@ -27,14 +27,23 @@ const useUtilityClasses = (props, overflowedContent) => {
 const VirtualScrollerContentRoot = (0, _system.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 = exports.GridVirtualScrollerContent = (0, _forwardRef.forwardRef)(function GridVirtualScrollerContent(props, ref) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const overflowedContent = !rootProps.autoHeight && props.style?.minHeight === 'auto';
   const classes = useUtilityClasses(rootProps, overflowedContent);
+  const ownerState = {
+    classes: rootProps.classes,
+    overflowedContent
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerContentRoot, (0, _extends2.default)({}, props, {
-    ownerState: rootProps,
+    ownerState: ownerState,
     className: (0, _clsx.default)(classes.root, props.className),
     ref: ref
   }));

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

@@ -7,20 +7,22 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridRegisterPipeProcessor = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useFirstRender = require("../../utils/useFirstRender");
-const useGridRegisterPipeProcessor = (apiRef, group, callback) => {
+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]);
   (0, _useFirstRender.useFirstRender)(() => {
-    registerPreProcessor();
+    if (enabled) {
+      registerPreProcessor();
+    }
   });
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {
     if (isFirstRender.current) {
       isFirstRender.current = false;
-    } else {
+    } else if (enabled) {
       registerPreProcessor();
     }
     return () => {
@@ -29,6 +31,6 @@ const useGridRegisterPipeProcessor = (apiRef, group, callback) => {
         cleanup.current = null;
       }
     };
-  }, [registerPreProcessor]);
+  }, [registerPreProcessor, enabled]);
 };
 exports.useGridRegisterPipeProcessor = useGridRegisterPipeProcessor;

package/node/hooks/core/useGridStateInitialization.js

@@ -12,7 +12,6 @@ var _utils = require("../utils");
 var _utils2 = require("../../utils/utils");
 const useGridStateInitialization = apiRef => {
   const controlStateMapRef = React.useRef({});
-  const [, rawForceUpdate] = React.useState();
   const registerControlState = React.useCallback(controlStateItem => {
     controlStateMapRef.current[controlStateItem.stateId] = controlStateItem;
   }, []);
@@ -87,7 +86,9 @@ 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