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

package/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--editing']}`]: styles['cell--editing']
+    [`& .${c['cell--editable']}`]: styles['cell--editable']
   }, {
-    [`& .${c['cell--textCenter']}`]: styles['cell--textCenter']
+    [`& .${c['cell--editing']}`]: styles['cell--editing']
   }, {
-    [`& .${c['cell--textLeft']}`]: styles['cell--textLeft']
+    [`& .${c['cell--flex']}`]: styles['cell--flex']
   }, {
-    [`& .${c['cell--textRight']}`]: styles['cell--textRight']
+    [`& .${c['cell--pinnedLeft']}`]: styles['cell--pinnedLeft']
   }, {
-    [`& .${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,84 +116,161 @@ 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;
-  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})` : 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;
@@ -188,8 +291,8 @@ export const GridRootStyles = 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);
@@ -208,7 +311,8 @@ export const GridRootStyles = 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,
@@ -231,6 +335,7 @@ export const GridRootStyles = 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',
@@ -255,10 +360,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 +420,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,
@@ -331,6 +432,13 @@ export const GridRootStyles = styled('div', {
       display: 'flex',
       alignItems: 'center'
     },
+    [`& .${c['columnHeader--filter']}`]: {
+      paddingTop: 8,
+      paddingBottom: 8,
+      paddingRight: 5,
+      minHeight: 'min-content',
+      overflow: 'hidden'
+    },
     [`& .${c['virtualScroller--hasScrollX']} .${c['columnHeader--last']}`]: {
       overflow: 'hidden'
     },
@@ -389,7 +497,7 @@ export const GridRootStyles = styled('div', {
       position: 'sticky',
       zIndex: 4,
       // Should be above the column separator
-      background: 'var(--DataGrid-pinnedBackground)'
+      background: 'var(--DataGrid-headerBackground)'
     },
     [`& .${c.columnSeparator}`]: {
       position: 'absolute',
@@ -403,7 +511,8 @@ export const GridRootStyles = styled('div', {
       color: borderColor
     },
     [`& .${c.columnHeaders}`]: {
-      width: 'var(--DataGrid-rowWidth)'
+      width: 'var(--DataGrid-rowWidth)',
+      backgroundColor: 'var(--DataGrid-headerBackground)'
     },
     '@media (hover: hover)': {
       [`& .${c.columnHeader}:hover`]: columnHeaderStyles,
@@ -508,11 +617,6 @@ export const GridRootStyles = styled('div', {
       },
       '&.Mui-selected': selectedStyles
     },
-    [`& .${c['container--top']}, & .${c['container--bottom']}`]: {
-      '[role=row]': {
-        background: 'var(--DataGrid-containerBackground)'
-      }
-    },
     /* Cell styles */
     [`& .${c.cell}`]: {
       flex: '0 0 auto',
@@ -531,6 +635,12 @@ export const GridRootStyles = styled('div', {
     [`& .${c['virtualScrollerContent--overflowed']} .${c['row--lastVisible']} .${c.cell}`]: {
       borderTopColor: 'transparent'
     },
+    [`& .${c.pinnedRows} .${c.row}`]: {
+      backgroundColor: 'var(--DataGrid-pinnedBackground)',
+      '&:hover': {
+        backgroundColor: pinnedHoverBackgroundColor
+      }
+    },
     [`& .${c['pinnedRows--top']} :first-of-type`]: {
       [`& .${c.cell}, .${c.scrollbarFiller}`]: {
         borderTop: 'none'
@@ -640,7 +750,7 @@ export const GridRootStyles = styled('div', {
         backgroundColor: pinnedSelectedBackgroundColor
       }
     },
-    [`& .${c.virtualScrollerContent} .${c.row}`]: {
+    [`& .${c.row}`]: {
       '&:hover': pinnedHoverStyles,
       '&.Mui-selected': pinnedSelectedStyles,
       '&.Mui-selected:hover': pinnedSelectedHoverStyles

package/components/containers/GridToolbarContainer.d.ts

@@ -3,7 +3,7 @@ import { SxProps, Theme } from '@mui/system';
 export type GridToolbarContainerProps = React.HTMLAttributes<HTMLDivElement> & {
     sx?: SxProps<Theme>;
 };
-declare const GridToolbarContainer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+declare const GridToolbarContainer: React.ForwardRefExoticComponent<GridToolbarContainerProps> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     sx?: SxProps<Theme>;
 } & React.RefAttributes<HTMLDivElement>>;
 export { GridToolbarContainer };

package/components/containers/GridToolbarContainer.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -31,7 +32,7 @@ const GridToolbarContainerRoot = styled('div', {
   gap: theme.spacing(1),
   padding: theme.spacing(0.5, 0.5, 0)
 }));
-const GridToolbarContainer = /*#__PURE__*/React.forwardRef(function GridToolbarContainer(props, ref) {
+const GridToolbarContainer = forwardRef(function GridToolbarContainer(props, ref) {
   const {
       className,
       children
@@ -43,10 +44,10 @@ const GridToolbarContainer = /*#__PURE__*/React.forwardRef(function GridToolbarC
     return null;
   }
   return /*#__PURE__*/_jsx(GridToolbarContainerRoot, _extends({
-    ref: ref,
     className: clsx(classes.root, className),
     ownerState: rootProps
   }, other, {
+    ref: ref,
     children: children
   }));
 });

package/components/menu/columnMenu/GridColumnMenu.d.ts

@@ -19,6 +19,6 @@ export declare const GRID_COLUMN_MENU_SLOT_PROPS: {
         displayOrder: number;
     };
 };
-declare const GridGenericColumnMenu: React.ForwardRefExoticComponent<GridGenericColumnMenuProps & React.RefAttributes<HTMLUListElement>>;
-declare const GridColumnMenu: React.ForwardRefExoticComponent<GridColumnMenuProps & React.RefAttributes<HTMLUListElement>>;
+declare const GridGenericColumnMenu: React.ForwardRefExoticComponent<GridGenericColumnMenuProps> | React.ForwardRefExoticComponent<GridGenericColumnMenuProps & React.RefAttributes<HTMLUListElement>>;
+declare const GridColumnMenu: React.ForwardRefExoticComponent<GridColumnMenuProps> | React.ForwardRefExoticComponent<GridColumnMenuProps & React.RefAttributes<HTMLUListElement>>;
 export { GridColumnMenu, GridGenericColumnMenu };

package/components/menu/columnMenu/GridColumnMenu.js

@@ -3,6 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["defaultSlots", "defaultSlotProps", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridColumnMenuSlots } from "../../../hooks/features/columnMenu/useGridColumnMenuSlots.js";
 import { GridColumnMenuContainer } from "./GridColumnMenuContainer.js";
 import { GridColumnMenuColumnsItem } from "./menuItems/GridColumnMenuColumnsItem.js";
@@ -25,7 +26,7 @@ export const GRID_COLUMN_MENU_SLOT_PROPS = {
     displayOrder: 30
   }
 };
-const GridGenericColumnMenu = /*#__PURE__*/React.forwardRef(function GridGenericColumnMenu(props, ref) {
+const GridGenericColumnMenu = forwardRef(function GridGenericColumnMenu(props, ref) {
   const {
       defaultSlots,
       defaultSlotProps,
@@ -39,9 +40,8 @@ const GridGenericColumnMenu = /*#__PURE__*/React.forwardRef(function GridGeneric
     slots,
     slotProps
   }));
-  return /*#__PURE__*/_jsx(GridColumnMenuContainer, _extends({
-    ref: ref
-  }, other, {
+  return /*#__PURE__*/_jsx(GridColumnMenuContainer, _extends({}, other, {
+    ref: ref,
     children: orderedSlots.map(([Component, otherProps], index) => /*#__PURE__*/_jsx(Component, _extends({}, otherProps), index))
   }));
 });
@@ -77,7 +77,7 @@ process.env.NODE_ENV !== "production" ? GridGenericColumnMenu.propTypes = {
    */
   slots: PropTypes.object
 } : void 0;
-const GridColumnMenu = /*#__PURE__*/React.forwardRef(function GridColumnMenu(props, ref) {
+const GridColumnMenu = forwardRef(function GridColumnMenu(props, ref) {
   return /*#__PURE__*/_jsx(GridGenericColumnMenu, _extends({}, props, {
     ref: ref,
     defaultSlots: GRID_COLUMN_MENU_SLOTS,

package/components/menu/columnMenu/GridColumnMenuContainer.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridColumnMenuContainerProps } from './GridColumnMenuProps';
-declare const GridColumnMenuContainer: React.ForwardRefExoticComponent<GridColumnMenuContainerProps & React.RefAttributes<HTMLUListElement>>;
+declare const GridColumnMenuContainer: React.ForwardRefExoticComponent<GridColumnMenuContainerProps> | React.ForwardRefExoticComponent<GridColumnMenuContainerProps & React.RefAttributes<HTMLUListElement>>;
 export { GridColumnMenuContainer };

package/components/menu/columnMenu/GridColumnMenuContainer.js

@@ -4,15 +4,17 @@ const _excluded = ["hideMenu", "colDef", "id", "labelledby", "className", "child
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import * as React from 'react';
-import MenuList from '@mui/material/MenuList';
 import { styled } from '@mui/material/styles';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { isHideMenuKey } from "../../../utils/keyboardUtils.js";
+import { NotRendered } from "../../../utils/assert.js";
 import { gridClasses } from "../../../constants/gridClasses.js";
+import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const StyledMenuList = styled(MenuList)(() => ({
+const StyledMenuList = styled(NotRendered)(() => ({
   minWidth: 248
 }));
-const GridColumnMenuContainer = /*#__PURE__*/React.forwardRef(function GridColumnMenuContainer(props, ref) {
+const GridColumnMenuContainer = forwardRef(function GridColumnMenuContainer(props, ref) {
   const {
       hideMenu,
       id,
@@ -22,6 +24,7 @@ const GridColumnMenuContainer = /*#__PURE__*/React.forwardRef(function GridColum
       open
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
   const handleListKeyDown = React.useCallback(event => {
     if (event.key === 'Tab') {
       event.preventDefault();
@@ -31,13 +34,14 @@ const GridColumnMenuContainer = /*#__PURE__*/React.forwardRef(function GridColum
     }
   }, [hideMenu]);
   return /*#__PURE__*/_jsx(StyledMenuList, _extends({
+    as: rootProps.slots.baseMenuList,
     id: id,
-    ref: ref,
     className: clsx(gridClasses.menuList, className),
     "aria-labelledby": labelledby,
     onKeyDown: handleListKeyDown,
     autoFocus: open
   }, other, {
+    ref: ref,
     children: children
   }));
 });

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

@@ -1,10 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
 import { useGridApiContext } from "../../../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../../../hooks/utils/useGridRootProps.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 function GridColumnMenuFilterItem(props) {
   const {
     colDef,
@@ -19,15 +17,12 @@ function GridColumnMenuFilterItem(props) {
   if (rootProps.disableColumnFilter || !colDef.filterable) {
     return null;
   }
-  return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
+  return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
     onClick: showFilter,
-    children: [/*#__PURE__*/_jsx(ListItemIcon, {
-      children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuFilterIcon, {
-        fontSize: "small"
-      })
-    }), /*#__PURE__*/_jsx(ListItemText, {
-      children: apiRef.current.getLocaleText('columnMenuFilter')
-    })]
+    iconStart: /*#__PURE__*/_jsx(rootProps.slots.columnMenuFilterIcon, {
+      fontSize: "small"
+    }),
+    children: apiRef.current.getLocaleText('columnMenuFilter')
   });
 }
 process.env.NODE_ENV !== "production" ? GridColumnMenuFilterItem.propTypes = {

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

@@ -1,11 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
 import { useGridApiContext } from "../../../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../../../hooks/utils/useGridRootProps.js";
 import { gridVisibleColumnDefinitionsSelector } from "../../../../hooks/features/columns/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 function GridColumnMenuHideItem(props) {
   const {
     colDef,
@@ -35,16 +33,13 @@ function GridColumnMenuHideItem(props) {
   if (colDef.hideable === false) {
     return null;
   }
-  return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
+  return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
     onClick: toggleColumn,
     disabled: disabled,
-    children: [/*#__PURE__*/_jsx(ListItemIcon, {
-      children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuHideIcon, {
-        fontSize: "small"
-      })
-    }), /*#__PURE__*/_jsx(ListItemText, {
-      children: apiRef.current.getLocaleText('columnMenuHideColumn')
-    })]
+    iconStart: /*#__PURE__*/_jsx(rootProps.slots.columnMenuHideIcon, {
+      fontSize: "small"
+    }),
+    children: apiRef.current.getLocaleText('columnMenuHideColumn')
   });
 }
 process.env.NODE_ENV !== "production" ? GridColumnMenuHideItem.propTypes = {

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

@@ -1,11 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
 import { GridPreferencePanelsValue } from "../../../../hooks/features/preferencesPanel/gridPreferencePanelsValue.js";
 import { useGridApiContext } from "../../../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../../../hooks/utils/useGridRootProps.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 function GridColumnMenuManageItem(props) {
   const {
     onClick
@@ -19,15 +17,12 @@ function GridColumnMenuManageItem(props) {
   if (rootProps.disableColumnSelector) {
     return null;
   }
-  return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
+  return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
     onClick: showColumns,
-    children: [/*#__PURE__*/_jsx(ListItemIcon, {
-      children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuManageColumnsIcon, {
-        fontSize: "small"
-      })
-    }), /*#__PURE__*/_jsx(ListItemText, {
-      children: apiRef.current.getLocaleText('columnMenuManageColumns')
-    })]
+    iconStart: /*#__PURE__*/_jsx(rootProps.slots.columnMenuManageColumnsIcon, {
+      fontSize: "small"
+    }),
+    children: apiRef.current.getLocaleText('columnMenuManageColumns')
   });
 }
 process.env.NODE_ENV !== "production" ? GridColumnMenuManageItem.propTypes = {