@mui/x-data-grid 8.26.0 → 8.27.1

package/components/columnHeaders/GridColumnHeaderItem.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { GridStateColDef } from "../../models/colDef/gridColDef.js";
-import { GridSortDirection } from "../../models/gridSortModel.js";
-import { GridColumnHeaderSeparatorProps } from "./GridColumnHeaderSeparator.js";
+import type { GridStateColDef } from "../../models/colDef/gridColDef.js";
+import type { GridSortDirection } from "../../models/gridSortModel.js";
+import type { GridColumnHeaderSeparatorProps } from "./GridColumnHeaderSeparator.js";
 import { PinnedColumnPosition } from "../../internals/constants.js";
 interface GridColumnHeaderItemProps {
   colIndex: number;

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -17,6 +17,7 @@ var _fastMemo = require("@mui/x-internals/fastMemo");
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _doesSupportPreventScroll = require("../../utils/doesSupportPreventScroll");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
+var _getColumnMenuItemKeys = require("../../hooks/features/columnMenu/getColumnMenuItemKeys");
 var _ColumnHeaderMenuIcon = require("./ColumnHeaderMenuIcon");
 var _GridColumnHeaderMenu = require("../menu/columnMenu/GridColumnHeaderMenu");
 var _gridClasses = require("../../constants/gridClasses");
@@ -85,6 +86,30 @@ function GridColumnHeaderItem(props) {
   const columnMenuButtonId = (0, _useId.default)();
   const iconButtonRef = React.useRef(null);
   const [showColumnMenuIcon, setShowColumnMenuIcon] = React.useState(columnMenuOpen);
+  const columnMenuSlotProps = rootProps.slotProps?.columnMenu;
+  const columnMenuComponent = rootProps.slots.columnMenu;
+  const defaultSlots = columnMenuComponent?.defaultSlots;
+  const defaultSlotProps = columnMenuComponent?.defaultSlotProps;
+  const hasKnownDefaultColumnMenu = defaultSlots != null && defaultSlotProps != null;
+  const columnMenuItemKeys = React.useMemo(() => {
+    if (!hasKnownDefaultColumnMenu) {
+      return [];
+    }
+    return (0, _getColumnMenuItemKeys.getColumnMenuItemKeys)({
+      apiRef,
+      colDef,
+      defaultSlots,
+      defaultSlotProps,
+      slots: columnMenuSlotProps?.slots,
+      slotProps: columnMenuSlotProps?.slotProps
+    });
+  }, [apiRef, colDef, defaultSlotProps, defaultSlots, hasKnownDefaultColumnMenu, columnMenuSlotProps?.slotProps, columnMenuSlotProps?.slots]);
+
+  // If we don't have a "known" default column menu (i.e. a custom menu component
+  // without `defaultSlots` / `defaultSlotProps` statics), we treat it as opaque
+  // and assume it has items, so we always show the column menu icon.
+  // Only the built-in/default menu path can hide the icon when there are no items.
+  const hasColumnMenuItems = !hasKnownDefaultColumnMenu || columnMenuItemKeys.length > 0;
   const isDraggable = !rootProps.disableColumnReorder && !disableReorder && !colDef.disableReorder;
   let headerComponent;
   if (colDef.renderHeader) {
@@ -135,10 +160,15 @@ function GridColumnHeaderItem(props) {
       setShowColumnMenuIcon(columnMenuOpen);
     }
   }, [showColumnMenuIcon, columnMenuOpen]);
+  React.useEffect(() => {
+    if (hasKnownDefaultColumnMenu && columnMenuOpen && !hasColumnMenuItems) {
+      apiRef.current.hideColumnMenu();
+    }
+  }, [apiRef, columnMenuOpen, hasColumnMenuItems, hasKnownDefaultColumnMenu]);
   const handleExited = React.useCallback(() => {
     setShowColumnMenuIcon(false);
   }, []);
-  const columnMenuIconButton = !rootProps.disableColumnMenu && !colDef.disableColumnMenu && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColumnHeaderMenuIcon.ColumnHeaderMenuIcon, {
+  const columnMenuIconButton = !rootProps.disableColumnMenu && !colDef.disableColumnMenu && hasColumnMenuItems && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColumnHeaderMenuIcon.ColumnHeaderMenuIcon, {
     colDef: colDef,
     columnMenuId: columnMenuId,
     columnMenuButtonId: columnMenuButtonId,

package/components/columnHeaders/GridColumnHeaderSortIcon.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GridColumnSortButtonProps } from "../GridColumnSortButton.js";
+import { type GridColumnSortButtonProps } from "../GridColumnSortButton.js";
 export interface GridColumnHeaderSortIconProps extends GridColumnSortButtonProps {}
 declare function GridColumnHeaderSortIconRaw(props: GridColumnHeaderSortIconProps): import("react/jsx-runtime").JSX.Element;
 declare namespace GridColumnHeaderSortIconRaw {

package/components/columnHeaders/GridColumnHeaderTitle.js

@@ -13,7 +13,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _domUtils = require("../../utils/domUtils");
 var _gridClasses = require("../../constants/gridClasses");
@@ -29,7 +29,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const GridColumnHeaderTitleRoot = (0, _system.styled)('div', {
+const GridColumnHeaderTitleRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnHeaderTitle'
 })({

package/components/columnHeaders/GridGenericColumnHeaderItem.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { GridStateColDef } from "../../models/colDef/gridColDef.js";
-import { GridSortDirection } from "../../models/gridSortModel.js";
-import { GridColumnHeaderSeparatorProps } from "./GridColumnHeaderSeparator.js";
-import { GridColumnGroup } from "../../models/gridColumnGrouping.js";
+import type { GridStateColDef } from "../../models/colDef/gridColDef.js";
+import type { GridSortDirection } from "../../models/gridSortModel.js";
+import { type GridColumnHeaderSeparatorProps } from "./GridColumnHeaderSeparator.js";
+import type { GridColumnGroup } from "../../models/gridColumnGrouping.js";
 interface GridGenericColumnHeaderItemProps extends Pick<GridStateColDef, 'headerClassName' | 'description' | 'resizable'> {
   classes: Record<'root' | 'draggableContainer' | 'titleContainer' | 'titleContainerContent', string>;
   colIndex: number;

package/components/columnHeaders/GridIconButtonContainer.js

@@ -12,7 +12,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -27,7 +27,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const GridIconButtonContainerRoot = (0, _system.styled)('div', {
+const GridIconButtonContainerRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'IconButtonContainer'
 })(() => ({

package/components/columnsManagement/GridColumnsManagement.d.ts

@@ -1,4 +1,4 @@
-import { TextFieldProps } from "../../models/gridBaseSlots.js";
+import type { TextFieldProps } from "../../models/gridBaseSlots.js";
 import type { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
 import type { GridColDef } from "../../models/colDef/gridColDef.js";
 export interface GridColumnsManagementProps {

package/components/columnsManagement/utils.d.ts

@@ -1,4 +1,4 @@
-import { GridColumnVisibilityModel } from "../../hooks/features/columns/gridColumnsInterfaces.js";
+import type { GridColumnVisibilityModel } from "../../hooks/features/columns/gridColumnsInterfaces.js";
 import type { GridColumnsManagementProps } from "./GridColumnsManagement.js";
 export declare const checkColumnVisibilityModelsSame: (a: GridColumnVisibilityModel, b: GridColumnVisibilityModel) => boolean;
 export declare const defaultSearchPredicate: NonNullable<GridColumnsManagementProps['searchPredicate']>;

package/components/columnsPanel/ColumnsPanelTrigger.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RenderProp } from '@mui/x-internals/useComponentRenderer';
+import { type RenderProp } from '@mui/x-internals/useComponentRenderer';
 import type { GridSlotProps } from "../../models/index.js";
 export interface ColumnsPanelState {
   /**

package/components/containers/GridFooterContainer.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SxProps, Theme } from '@mui/system';
+import { type SxProps, type Theme } from '@mui/system';
 export type GridFooterContainerProps = React.HTMLAttributes<HTMLDivElement> & {
   sx?: SxProps<Theme>;
 };

package/components/containers/GridOverlay.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Theme, SxProps } from '@mui/system';
+import { type Theme, type SxProps } from '@mui/system';
 export type GridOverlayProps = React.HTMLAttributes<HTMLDivElement> & {
   sx?: SxProps<Theme>;
 };

package/components/containers/GridRoot.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { SxProps } from '@mui/system';
-import { Theme } from '@mui/material/styles';
+import type { SxProps } from '@mui/system';
+import type { Theme } from '@mui/material/styles';
 export interface GridRootProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.

package/components/containers/GridRootStyles.d.ts

@@ -1,4 +1,4 @@
-import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
+import type { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
 export type OwnerState = DataGridProcessedProps;
 export declare const GridRootStyles: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
   ownerState: OwnerState;

package/components/containers/GridRootStyles.js

@@ -22,226 +22,32 @@ const separatorIconDragStyles = {
 // https://github.com/emotion-js/emotion/issues/1105#issuecomment-1722524968
 const ignoreSsrWarning = '/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */';
 const shouldShowBorderTopRightRadiusSelector = apiRef => !apiRef.current.state.dimensions.isReady ? apiRef.current.state.dimensions.scrollbarSize === 0 : apiRef.current.state.dimensions.hasScrollX && (!apiRef.current.state.dimensions.hasScrollY || apiRef.current.state.dimensions.scrollbarSize === 0);
+const elementOverrides = {
+  root: ['autoHeight', 'autosizing', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'withVerticalBorder'],
+  children: ['actionsCell', 'booleanCell', 'cell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--rangeTop', 'cell--selectionMode', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withLeftBorder', 'cell--withRightBorder', 'cellCheckbox', 'cellEmpty', 'cellOffsetLeft', 'cellSkeleton', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--emptyGroup', 'columnHeader--filledGroup', 'columnHeader--filtered', 'columnHeader--last', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--siblingFocused', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnSeparator', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'container--bottom', 'container--top', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'editBooleanCell', 'filterIcon', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'groupingCriteriaCell', 'groupingCriteriaCellLoadingContainer', 'groupingCriteriaCellToggle', 'headerFilterRow', 'iconSeparator', 'menuIcon', 'menuIconButton', 'menuList', 'menuOpen', 'overlayWrapperInner', 'pinnedRows', 'pinnedRows--bottom', 'pinnedRows--top', 'row', 'row--borderBottom', 'row--detailPanelExpanded', 'row--dragging', 'row--dynamicHeight', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderCellContainer', 'rowReorderCellPlaceholder', 'rowSkeleton', 'scrollbar', 'scrollbar--horizontal', 'scrollbar--vertical', 'scrollbarFiller', 'scrollbarFiller--pinnedRight', 'sortIcon', 'treeDataGroupingCell', 'treeDataGroupingCellLoadingContainer', 'treeDataGroupingCellToggle', 'withBorderColor', 'row--beingDragged']
+};
 const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'Root',
-  overridesResolver: (props, styles) => [
-  // Root overrides
-  styles.root, {
-    [`&.${_gridClasses.gridClasses.autoHeight}`]: styles.autoHeight
-  }, {
-    [`&.${_gridClasses.gridClasses.autosizing}`]: styles.autosizing
-  }, {
-    [`&.${_gridClasses.gridClasses['root--densityStandard']}`]: styles['root--densityStandard']
-  }, {
-    [`&.${_gridClasses.gridClasses['root--densityComfortable']}`]: styles['root--densityComfortable']
-  }, {
-    [`&.${_gridClasses.gridClasses['root--densityCompact']}`]: styles['root--densityCompact']
-  }, {
-    [`&.${_gridClasses.gridClasses['root--disableUserSelection']}`]: styles['root--disableUserSelection']
-  }, {
-    [`&.${_gridClasses.gridClasses['root--noToolbar']}`]: styles['root--noToolbar']
-  }, {
-    [`&.${_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.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--flex']}`]: styles['cell--flex']
-  }, {
-    [`& .${_gridClasses.gridClasses['cell--pinnedLeft']}`]: styles['cell--pinnedLeft']
-  }, {
-    [`& .${_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']
-  }, {
-    [`& .${_gridClasses.gridClasses['columnHeader--alignLeft']}`]: styles['columnHeader--alignLeft']
-  }, {
-    [`& .${_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--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--withLeftBorder']}`]: styles['columnHeader--withLeftBorder']
-  }, {
-    [`& .${_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--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.overlayWrapperInner}`]: styles.overlayWrapperInner
-  }, {
-    [`& .${_gridClasses.gridClasses.pinnedRows}`]: styles.pinnedRows
-  }, {
-    [`& .${_gridClasses.gridClasses['pinnedRows--bottom']}`]: styles['pinnedRows--bottom']
-  }, {
-    [`& .${_gridClasses.gridClasses['pinnedRows--top']}`]: styles['pinnedRows--top']
-  }, {
-    [`& .${_gridClasses.gridClasses.row}`]: styles.row
-  }, {
-    [`& .${_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.rowReorderCellContainer}`]: styles.rowReorderCellContainer
-  }, {
-    [`& .${_gridClasses.gridClasses.rowReorderCellPlaceholder}`]: styles.rowReorderCellPlaceholder
-  }, {
-    [`& .${_gridClasses.gridClasses.rowSkeleton}`]: styles.rowSkeleton
-  }, {
-    [`& .${_gridClasses.gridClasses.scrollbar}`]: styles.scrollbar
-  }, {
-    [`& .${_gridClasses.gridClasses['scrollbar--horizontal']}`]: styles['scrollbar--horizontal']
-  }, {
-    [`& .${_gridClasses.gridClasses['scrollbar--vertical']}`]: styles['scrollbar--vertical']
-  }, {
-    [`& .${_gridClasses.gridClasses.scrollbarFiller}`]: styles.scrollbarFiller
-  }, {
-    [`& .${_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
-  }, {
-    [`& .${_gridClasses.gridClasses['row--beingDragged']}`]: styles['row--beingDragged']
-  }]
+  overridesResolver: (props, styles) => {
+    // Root overrides
+    const overrides = [styles.root];
+    elementOverrides.root.forEach(key => {
+      overrides.push({
+        [`&.${_gridClasses.gridClasses[key]}`]: styles[key]
+      });
+    });
+
+    // 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.
+    elementOverrides.children.forEach(key => {
+      overrides.push({
+        [`& .${_gridClasses.gridClasses[key]}`]: styles[key]
+      });
+    });
+    return overrides;
+  }
 })(() => {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const shouldShowBorderTopRightRadius = (0, _useGridSelector.useGridSelector)(apiRef, shouldShowBorderTopRightRadiusSelector);

package/components/containers/GridToolbarContainer.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SxProps, Theme } from '@mui/system';
+import { type SxProps, type Theme } from '@mui/system';
 export type GridToolbarContainerProps = React.HTMLAttributes<HTMLDivElement> & {
   sx?: SxProps<Theme>;
 };

package/components/export/ExportCsv.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { RenderProp } from '@mui/x-internals/useComponentRenderer';
-import { GridCsvExportOptions } from "../../models/gridExport.js";
+import { type RenderProp } from '@mui/x-internals/useComponentRenderer';
+import type { GridCsvExportOptions } from "../../models/gridExport.js";
 import type { GridSlotProps } from "../../models/index.js";
 export type ExportCsvProps = GridSlotProps['baseButton'] & {
   /**

package/components/export/ExportPrint.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { RenderProp } from '@mui/x-internals/useComponentRenderer';
-import { GridPrintExportOptions } from "../../models/gridExport.js";
+import { type RenderProp } from '@mui/x-internals/useComponentRenderer';
+import type { GridPrintExportOptions } from "../../models/gridExport.js";
 import type { GridSlotProps } from "../../models/index.js";
 export type ExportPrintProps = GridSlotProps['baseButton'] & {
   /**

package/components/filterPanel/FilterPanelTrigger.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RenderProp } from '@mui/x-internals/useComponentRenderer';
+import { type RenderProp } from '@mui/x-internals/useComponentRenderer';
 import type { GridSlotProps } from "../../models/index.js";
 export interface FilterPanelState {
   /**

package/components/menu/GridMenu.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PopperProps } from "../../models/gridBaseSlots.js";
+import type { PopperProps } from "../../models/gridBaseSlots.js";
 type MenuPosition = 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top' | undefined;
 export interface GridMenuProps extends Pick<PopperProps, 'className' | 'onExited'> {
   open: boolean;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GridMenuProps } from "../GridMenu.js";
+import { type GridMenuProps } from "../GridMenu.js";
 export interface GridColumnHeaderMenuProps {
   columnMenuId?: string;
   columnMenuButtonId?: string;

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

@@ -1,7 +1,7 @@
 import { GridColumnMenuColumnsItem } from "./menuItems/GridColumnMenuColumnsItem.js";
 import { GridColumnMenuFilterItem } from "./menuItems/GridColumnMenuFilterItem.js";
 import { GridColumnMenuSortItem } from "./menuItems/GridColumnMenuSortItem.js";
-import { GridColumnMenuProps, GridGenericColumnMenuProps } from "./GridColumnMenuProps.js";
+import type { GridGenericColumnMenuProps, GridColumnMenuComponent } from "./GridColumnMenuProps.js";
 export declare const GRID_COLUMN_MENU_SLOTS: {
   columnMenuSortItem: typeof GridColumnMenuSortItem;
   columnMenuFilterItem: typeof GridColumnMenuFilterItem;
@@ -19,5 +19,5 @@ export declare const GRID_COLUMN_MENU_SLOT_PROPS: {
   };
 };
 declare const GridGenericColumnMenu: import("react").ForwardRefExoticComponent<GridGenericColumnMenuProps> | import("react").ForwardRefExoticComponent<GridGenericColumnMenuProps & import("react").RefAttributes<HTMLUListElement>>;
-declare const GridColumnMenu: import("react").ForwardRefExoticComponent<GridColumnMenuProps> | import("react").ForwardRefExoticComponent<GridColumnMenuProps & import("react").RefAttributes<HTMLUListElement>>;
+declare const GridColumnMenu: GridColumnMenuComponent;
 export { GridColumnMenu, GridGenericColumnMenu };

package/components/menu/columnMenu/GridColumnMenu.js

@@ -93,6 +93,8 @@ const GridColumnMenu = exports.GridColumnMenu = (0, _forwardRef.forwardRef)(func
   }));
 });
 if (process.env.NODE_ENV !== "production") GridColumnMenu.displayName = "GridColumnMenu";
+GridColumnMenu.defaultSlots = GRID_COLUMN_MENU_SLOTS;
+GridColumnMenu.defaultSlotProps = GRID_COLUMN_MENU_SLOT_PROPS;
 process.env.NODE_ENV !== "production" ? GridColumnMenu.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

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

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

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { GridColDef } from "../../../models/colDef/gridColDef.js";
+import type * as React from 'react';
+import type { GridColDef } from "../../../models/colDef/gridColDef.js";
 export interface GridColumnMenuItemProps {
   colDef: GridColDef;
   onClick: (event: React.MouseEvent<any>) => void;

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { GridColDef } from "../../../models/colDef/gridColDef.js";
-import { GridColumnMenuRootProps } from "../../../hooks/features/columnMenu/index.js";
+import type * as React from 'react';
+import type { GridColDef } from "../../../models/colDef/gridColDef.js";
+import type { GridColumnMenuRootProps } from "../../../hooks/features/columnMenu/index.js";
 export interface GridColumnMenuContainerProps extends React.HTMLAttributes<HTMLUListElement> {
   hideMenu: (event: React.SyntheticEvent) => void;
   colDef: GridColDef;
@@ -9,4 +9,12 @@ export interface GridColumnMenuContainerProps extends React.HTMLAttributes<HTMLU
   labelledby?: string;
 }
 export interface GridGenericColumnMenuProps extends GridColumnMenuRootProps, GridColumnMenuContainerProps {}
-export interface GridColumnMenuProps extends Omit<GridGenericColumnMenuProps, 'defaultSlots' | 'defaultSlotProps'> {}
+export interface GridColumnMenuProps extends Omit<GridGenericColumnMenuProps, 'defaultSlots' | 'defaultSlotProps'> {}
+/**
+ * Type for column menu components with static defaultSlots and defaultSlotProps.
+ * Used by GridColumnMenu, GridProColumnMenu, and GridPremiumColumnMenu.
+ */
+export type GridColumnMenuComponent = React.ForwardRefExoticComponent<GridColumnMenuProps & React.RefAttributes<HTMLUListElement>> & {
+  defaultSlots: GridColumnMenuRootProps['defaultSlots'];
+  defaultSlotProps: GridColumnMenuRootProps['defaultSlotProps'];
+};

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

@@ -1,5 +1,5 @@
 export * from "./GridColumnHeaderMenu.js";
-export * from "./GridColumnMenuProps.js";
+export type { GridColumnMenuContainerProps, GridGenericColumnMenuProps, GridColumnMenuProps } from "./GridColumnMenuProps.js";
 export * from "./GridColumnMenuItemProps.js";
 export * from "./GridColumnMenuContainer.js";
 export { GridGenericColumnMenu } from "./GridColumnMenu.js";

package/components/menu/columnMenu/index.js

@@ -24,18 +24,6 @@ Object.keys(_GridColumnHeaderMenu).forEach(function (key) {
     }
   });
 });
-var _GridColumnMenuProps = require("./GridColumnMenuProps");
-Object.keys(_GridColumnMenuProps).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _GridColumnMenuProps[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _GridColumnMenuProps[key];
-    }
-  });
-});
 var _GridColumnMenuItemProps = require("./GridColumnMenuItemProps");
 Object.keys(_GridColumnMenuItemProps).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/components/menu/columnMenu/menuItems/GridColumnMenuColumnsItem.d.ts

@@ -1,4 +1,4 @@
-import { GridColumnMenuItemProps } from "../GridColumnMenuItemProps.js";
+import type { GridColumnMenuItemProps } from "../GridColumnMenuItemProps.js";
 declare function GridColumnMenuColumnsItem(props: GridColumnMenuItemProps): import("react/jsx-runtime").JSX.Element;
 declare namespace GridColumnMenuColumnsItem {
   var propTypes: any;

package/components/menu/columnMenu/menuItems/GridColumnMenuFilterItem.d.ts

@@ -1,4 +1,4 @@
-import { GridColumnMenuItemProps } from "../GridColumnMenuItemProps.js";
+import type { GridColumnMenuItemProps } from "../GridColumnMenuItemProps.js";
 declare function GridColumnMenuFilterItem(props: GridColumnMenuItemProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace GridColumnMenuFilterItem {
   var propTypes: any;

package/components/menu/columnMenu/menuItems/GridColumnMenuHideItem.d.ts

@@ -1,4 +1,4 @@
-import { GridColumnMenuItemProps } from "../GridColumnMenuItemProps.js";
+import type { GridColumnMenuItemProps } from "../GridColumnMenuItemProps.js";
 declare function GridColumnMenuHideItem(props: GridColumnMenuItemProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace GridColumnMenuHideItem {
   var propTypes: any;

package/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.d.ts

@@ -1,4 +1,4 @@
-import { GridColumnMenuItemProps } from "../GridColumnMenuItemProps.js";
+import type { GridColumnMenuItemProps } from "../GridColumnMenuItemProps.js";
 declare function GridColumnMenuManageItem(props: GridColumnMenuItemProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace GridColumnMenuManageItem {
   var propTypes: any;

package/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.d.ts

@@ -1,4 +1,4 @@
-import { GridColumnMenuItemProps } from "../GridColumnMenuItemProps.js";
+import type { GridColumnMenuItemProps } from "../GridColumnMenuItemProps.js";
 declare function GridColumnMenuSortItem(props: GridColumnMenuItemProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace GridColumnMenuSortItem {
   var propTypes: any;