@mui/x-data-grid 8.0.0-alpha.1 → 8.0.0-alpha.11

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--editing']}`]: styles['cell--editing']
+    [`& .${_gridClasses.gridClasses['cell--editable']}`]: styles['cell--editable']
   }, {
-    [`& .${_gridClasses.gridClasses['cell--textCenter']}`]: styles['cell--textCenter']
+    [`& .${_gridClasses.gridClasses['cell--editing']}`]: styles['cell--editing']
   }, {
-    [`& .${_gridClasses.gridClasses['cell--textLeft']}`]: styles['cell--textLeft']
+    [`& .${_gridClasses.gridClasses['cell--flex']}`]: styles['cell--flex']
   }, {
-    [`& .${_gridClasses.gridClasses['cell--textRight']}`]: styles['cell--textRight']
+    [`& .${_gridClasses.gridClasses['cell--pinnedLeft']}`]: styles['cell--pinnedLeft']
   }, {
-    [`& .${_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,84 +123,161 @@ 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;
-  const pinnedBackground = t.mixins.MuiDataGrid?.pinnedBackground ?? containerBackground;
+  const background = (t.vars || t).palette.DataGrid?.bg ?? (t.vars || t).palette.background.default;
+  const headerBackground = (t.vars || t).palette.DataGrid?.headerBg ?? background;
+  const pinnedBackground = (t.vars || t).palette.DataGrid?.pinnedBg ?? background;
   const overlayBackground = t.vars ? `rgba(${t.vars.palette.background.defaultChannel} / ${t.vars.palette.action.disabledOpacity})` : (0, _styles.alpha)(t.palette.background.default, t.palette.action.disabledOpacity);
   const hoverOpacity = (t.vars || t).palette.action.hoverOpacity;
   const hoverColor = (t.vars || t).palette.action.hover;
@@ -195,8 +298,8 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       }
     }
   });
-  const pinnedBackgroundColor = blendFn(pinnedBackground, hoverColor, hoverOpacity);
-  const pinnedHoverStyles = getPinnedBackgroundStyles(pinnedBackgroundColor);
+  const pinnedHoverBackgroundColor = blendFn(pinnedBackground, hoverColor, hoverOpacity);
+  const pinnedHoverStyles = getPinnedBackgroundStyles(pinnedHoverBackgroundColor);
   const pinnedSelectedBackgroundColor = blendFn(pinnedBackground, selectedBackground, selectedOpacity);
   const pinnedSelectedStyles = getPinnedBackgroundStyles(pinnedSelectedBackgroundColor);
   const pinnedSelectedHoverBackgroundColor = blendFn(pinnedBackground, selectedHoverBackground, selectedHoverOpacity);
@@ -215,7 +318,8 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     '--unstable_DataGrid-radius': typeof radius === 'number' ? `${radius}px` : radius,
     '--unstable_DataGrid-headWeight': t.typography.fontWeightMedium,
     '--unstable_DataGrid-overlayBackground': overlayBackground,
-    '--DataGrid-containerBackground': containerBackground,
+    '--DataGrid-background': background,
+    '--DataGrid-headerBackground': headerBackground,
     '--DataGrid-pinnedBackground': pinnedBackground,
     '--DataGrid-rowBorderColor': borderColor,
     '--DataGrid-cellOffsetMultiplier': 2,
@@ -238,6 +342,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     borderStyle: 'solid',
     borderColor,
     borderRadius: 'var(--unstable_DataGrid-radius)',
+    backgroundColor: 'var(--DataGrid-background)',
     color: (t.vars || t).palette.text.primary
   }, t.typography.body2, {
     outline: 'none',
@@ -262,10 +367,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 +427,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,
@@ -338,6 +439,13 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       display: 'flex',
       alignItems: 'center'
     },
+    [`& .${_gridClasses.gridClasses['columnHeader--filter']}`]: {
+      paddingTop: 8,
+      paddingBottom: 8,
+      paddingRight: 5,
+      minHeight: 'min-content',
+      overflow: 'hidden'
+    },
     [`& .${_gridClasses.gridClasses['virtualScroller--hasScrollX']} .${_gridClasses.gridClasses['columnHeader--last']}`]: {
       overflow: 'hidden'
     },
@@ -396,7 +504,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       position: 'sticky',
       zIndex: 4,
       // Should be above the column separator
-      background: 'var(--DataGrid-pinnedBackground)'
+      background: 'var(--DataGrid-headerBackground)'
     },
     [`& .${_gridClasses.gridClasses.columnSeparator}`]: {
       position: 'absolute',
@@ -410,7 +518,8 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       color: borderColor
     },
     [`& .${_gridClasses.gridClasses.columnHeaders}`]: {
-      width: 'var(--DataGrid-rowWidth)'
+      width: 'var(--DataGrid-rowWidth)',
+      backgroundColor: 'var(--DataGrid-headerBackground)'
     },
     '@media (hover: hover)': {
       [`& .${_gridClasses.gridClasses.columnHeader}:hover`]: columnHeaderStyles,
@@ -515,11 +624,6 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       },
       '&.Mui-selected': selectedStyles
     },
-    [`& .${_gridClasses.gridClasses['container--top']}, & .${_gridClasses.gridClasses['container--bottom']}`]: {
-      '[role=row]': {
-        background: 'var(--DataGrid-containerBackground)'
-      }
-    },
     /* Cell styles */
     [`& .${_gridClasses.gridClasses.cell}`]: {
       flex: '0 0 auto',
@@ -538,6 +642,12 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses['virtualScrollerContent--overflowed']} .${_gridClasses.gridClasses['row--lastVisible']} .${_gridClasses.gridClasses.cell}`]: {
       borderTopColor: 'transparent'
     },
+    [`& .${_gridClasses.gridClasses.pinnedRows} .${_gridClasses.gridClasses.row}`]: {
+      backgroundColor: 'var(--DataGrid-pinnedBackground)',
+      '&:hover': {
+        backgroundColor: pinnedHoverBackgroundColor
+      }
+    },
     [`& .${_gridClasses.gridClasses['pinnedRows--top']} :first-of-type`]: {
       [`& .${_gridClasses.gridClasses.cell}, .${_gridClasses.gridClasses.scrollbarFiller}`]: {
         borderTop: 'none'
@@ -647,7 +757,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
         backgroundColor: pinnedSelectedBackgroundColor
       }
     },
-    [`& .${_gridClasses.gridClasses.virtualScrollerContent} .${_gridClasses.gridClasses.row}`]: {
+    [`& .${_gridClasses.gridClasses.row}`]: {
       '&:hover': pinnedHoverStyles,
       '&.Mui-selected': pinnedSelectedStyles,
       '&.Mui-selected:hover': pinnedSelectedHoverStyles

package/node/components/containers/GridToolbarContainer.js

@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -39,7 +40,7 @@ const GridToolbarContainerRoot = (0, _system.styled)('div', {
   gap: theme.spacing(1),
   padding: theme.spacing(0.5, 0.5, 0)
 }));
-const GridToolbarContainer = exports.GridToolbarContainer = /*#__PURE__*/React.forwardRef(function GridToolbarContainer(props, ref) {
+const GridToolbarContainer = exports.GridToolbarContainer = (0, _forwardRef.forwardRef)(function GridToolbarContainer(props, ref) {
   const {
       className,
       children
@@ -51,10 +52,10 @@ const GridToolbarContainer = exports.GridToolbarContainer = /*#__PURE__*/React.f
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarContainerRoot, (0, _extends2.default)({
-    ref: ref,
     className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps
   }, other, {
+    ref: ref,
     children: children
   }));
 });

package/node/components/menu/columnMenu/GridColumnMenu.js

@@ -10,6 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridColumnMenuSlots = require("../../../hooks/features/columnMenu/useGridColumnMenuSlots");
 var _GridColumnMenuContainer = require("./GridColumnMenuContainer");
 var _GridColumnMenuColumnsItem = require("./menuItems/GridColumnMenuColumnsItem");
@@ -33,7 +34,7 @@ const GRID_COLUMN_MENU_SLOT_PROPS = exports.GRID_COLUMN_MENU_SLOT_PROPS = {
     displayOrder: 30
   }
 };
-const GridGenericColumnMenu = exports.GridGenericColumnMenu = /*#__PURE__*/React.forwardRef(function GridGenericColumnMenu(props, ref) {
+const GridGenericColumnMenu = exports.GridGenericColumnMenu = (0, _forwardRef.forwardRef)(function GridGenericColumnMenu(props, ref) {
   const {
       defaultSlots,
       defaultSlotProps,
@@ -47,9 +48,8 @@ const GridGenericColumnMenu = exports.GridGenericColumnMenu = /*#__PURE__*/React
     slots,
     slotProps
   }));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnMenuContainer.GridColumnMenuContainer, (0, _extends2.default)({
-    ref: ref
-  }, other, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnMenuContainer.GridColumnMenuContainer, (0, _extends2.default)({}, other, {
+    ref: ref,
     children: orderedSlots.map(([Component, otherProps], index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, (0, _extends2.default)({}, otherProps), index))
   }));
 });
@@ -85,7 +85,7 @@ process.env.NODE_ENV !== "production" ? GridGenericColumnMenu.propTypes = {
    */
   slots: _propTypes.default.object
 } : void 0;
-const GridColumnMenu = exports.GridColumnMenu = /*#__PURE__*/React.forwardRef(function GridColumnMenu(props, ref) {
+const GridColumnMenu = exports.GridColumnMenu = (0, _forwardRef.forwardRef)(function GridColumnMenu(props, ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridGenericColumnMenu, (0, _extends2.default)({}, props, {
     ref: ref,
     defaultSlots: GRID_COLUMN_MENU_SLOTS,

package/node/components/menu/columnMenu/GridColumnMenuContainer.js

@@ -11,16 +11,18 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
-var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
 var _styles = require("@mui/material/styles");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _keyboardUtils = require("../../../utils/keyboardUtils");
+var _assert = require("../../../utils/assert");
 var _gridClasses = require("../../../constants/gridClasses");
+var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["hideMenu", "colDef", "id", "labelledby", "className", "children", "open"];
-const StyledMenuList = (0, _styles.styled)(_MenuList.default)(() => ({
+const StyledMenuList = (0, _styles.styled)(_assert.NotRendered)(() => ({
   minWidth: 248
 }));
-const GridColumnMenuContainer = exports.GridColumnMenuContainer = /*#__PURE__*/React.forwardRef(function GridColumnMenuContainer(props, ref) {
+const GridColumnMenuContainer = exports.GridColumnMenuContainer = (0, _forwardRef.forwardRef)(function GridColumnMenuContainer(props, ref) {
   const {
       hideMenu,
       id,
@@ -30,6 +32,7 @@ const GridColumnMenuContainer = exports.GridColumnMenuContainer = /*#__PURE__*/R
       open
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const handleListKeyDown = React.useCallback(event => {
     if (event.key === 'Tab') {
       event.preventDefault();
@@ -39,13 +42,14 @@ const GridColumnMenuContainer = exports.GridColumnMenuContainer = /*#__PURE__*/R
     }
   }, [hideMenu]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledMenuList, (0, _extends2.default)({
+    as: rootProps.slots.baseMenuList,
     id: id,
-    ref: ref,
     className: (0, _clsx.default)(_gridClasses.gridClasses.menuList, className),
     "aria-labelledby": labelledby,
     onKeyDown: handleListKeyDown,
     autoFocus: open
   }, other, {
+    ref: ref,
     children: children
   }));
 });

package/node/components/menu/columnMenu/menuItems/GridColumnMenuFilterItem.js

@@ -8,8 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridColumnMenuFilterItem = GridColumnMenuFilterItem;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
-var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
 var _useGridApiContext = require("../../../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -27,15 +25,12 @@ function GridColumnMenuFilterItem(props) {
   if (rootProps.disableColumnFilter || !colDef.filterable) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
     onClick: showFilter,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuFilterIcon, {
-        fontSize: "small"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
-      children: apiRef.current.getLocaleText('columnMenuFilter')
-    })]
+    iconStart: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuFilterIcon, {
+      fontSize: "small"
+    }),
+    children: apiRef.current.getLocaleText('columnMenuFilter')
   });
 }
 process.env.NODE_ENV !== "production" ? GridColumnMenuFilterItem.propTypes = {

package/node/components/menu/columnMenu/menuItems/GridColumnMenuHideItem.js

@@ -8,8 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridColumnMenuHideItem = GridColumnMenuHideItem;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
-var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
 var _useGridApiContext = require("../../../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../../../hooks/utils/useGridRootProps");
 var _columns = require("../../../../hooks/features/columns");
@@ -43,16 +41,13 @@ function GridColumnMenuHideItem(props) {
   if (colDef.hideable === false) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
     onClick: toggleColumn,
     disabled: disabled,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuHideIcon, {
-        fontSize: "small"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
-      children: apiRef.current.getLocaleText('columnMenuHideColumn')
-    })]
+    iconStart: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuHideIcon, {
+      fontSize: "small"
+    }),
+    children: apiRef.current.getLocaleText('columnMenuHideColumn')
   });
 }
 process.env.NODE_ENV !== "production" ? GridColumnMenuHideItem.propTypes = {

package/node/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.js

@@ -8,8 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridColumnMenuManageItem = GridColumnMenuManageItem;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
-var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
 var _gridPreferencePanelsValue = require("../../../../hooks/features/preferencesPanel/gridPreferencePanelsValue");
 var _useGridApiContext = require("../../../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../../../hooks/utils/useGridRootProps");
@@ -27,15 +25,12 @@ function GridColumnMenuManageItem(props) {
   if (rootProps.disableColumnSelector) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
     onClick: showColumns,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuManageColumnsIcon, {
-        fontSize: "small"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
-      children: apiRef.current.getLocaleText('columnMenuManageColumns')
-    })]
+    iconStart: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuManageColumnsIcon, {
+      fontSize: "small"
+    }),
+    children: apiRef.current.getLocaleText('columnMenuManageColumns')
   });
 }
 process.env.NODE_ENV !== "production" ? GridColumnMenuManageItem.propTypes = {