@mui/x-data-grid 8.27.0 → 8.27.3

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/GridColumnMenuProps.d.ts

@@ -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/toolbar/GridToolbarQuickFilter.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _constants = require("../../constants");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
@@ -31,14 +31,14 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _constants.getDataGridUtilityClass, classes);
 };
-const GridQuickFilterRoot = (0, _system.styled)('div', {
+const GridQuickFilterRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ToolbarQuickFilter'
 })({
   display: 'grid',
   alignItems: 'center'
 });
-const GridQuickFilterTrigger = (0, _system.styled)(_toolbarV.ToolbarButton, {
+const GridQuickFilterTrigger = (0, _styles.styled)(_toolbarV.ToolbarButton, {
   name: 'MuiDataGrid',
   slot: 'ToolbarQuickFilterTrigger'
 })(({
@@ -55,7 +55,7 @@ const GridQuickFilterTrigger = (0, _system.styled)(_toolbarV.ToolbarButton, {
 
 // TODO: Use NotRendered from /utils/assert
 // Currently causes react-docgen to fail
-const GridQuickFilterTextField = (0, _system.styled)(_props => {
+const GridQuickFilterTextField = (0, _styles.styled)(_props => {
   throw new Error('Failed assertion: should not be rendered');
 }, {
   name: 'MuiDataGrid',

package/components/toolbarV8/GridToolbar.js

@@ -14,7 +14,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _GridMenu = require("../menu/GridMenu");
 var _Toolbar = require("./Toolbar");
@@ -42,14 +42,14 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const Divider = (0, _system.styled)(_assert.NotRendered, {
+const Divider = (0, _styles.styled)(_assert.NotRendered, {
   name: 'MuiDataGrid',
   slot: 'ToolbarDivider'
 })({
   height: '50%',
   margin: _cssVariables.vars.spacing(0, 0.5)
 });
-const Label = (0, _system.styled)('span', {
+const Label = (0, _styles.styled)('span', {
   name: 'MuiDataGrid',
   slot: 'ToolbarLabel'
 })({

package/components/toolbarV8/Toolbar.d.ts

@@ -6,7 +6,7 @@ export type ToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
    */
   render?: RenderProp<React.ComponentProps<typeof ToolbarRoot>>;
 };
-declare const ToolbarRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
+declare const ToolbarRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 /**
  * The top level Toolbar component that provides context to child components.
  * It renders a styled `<div />` element.

package/components/toolbarV8/Toolbar.js

@@ -11,7 +11,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 _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
@@ -32,7 +32,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const ToolbarRoot = (0, _system.styled)('div', {
+const ToolbarRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'Toolbar'
 })({

package/components/virtualization/GridBottomContainer.js

@@ -9,7 +9,7 @@ exports.GridBottomContainer = GridBottomContainer;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -19,7 +19,7 @@ const useUtilityClasses = () => {
   };
   return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, {});
 };
-const Element = (0, _system.styled)('div', {
+const Element = (0, _styles.styled)('div', {
   slot: 'internal',
   shouldForwardProp: undefined
 })({

package/components/virtualization/GridMainContainer.js

@@ -9,12 +9,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridMainContainer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridConfiguration = require("../../hooks/utils/useGridConfiguration");
 var _jsxRuntime = require("react/jsx-runtime");
-const GridPanelAnchor = (0, _system.styled)('div', {
+const GridPanelAnchor = (0, _styles.styled)('div', {
   slot: 'internal',
   shouldForwardProp: undefined
 })({
@@ -23,7 +23,7 @@ const GridPanelAnchor = (0, _system.styled)('div', {
   left: 0,
   width: 'calc(100% - (var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize)))'
 });
-const Element = (0, _system.styled)('div', {
+const Element = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'Main',
   overridesResolver: (props, styles) => {

package/components/virtualization/GridTopContainer.js

@@ -9,7 +9,7 @@ exports.GridTopContainer = GridTopContainer;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -19,7 +19,7 @@ const useUtilityClasses = () => {
   };
   return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, {});
 };
-const Element = (0, _system.styled)('div', {
+const Element = (0, _styles.styled)('div', {
   slot: 'internal',
   shouldForwardProp: undefined
 })({

package/components/virtualization/GridVirtualScrollbar.d.ts

@@ -8,6 +8,6 @@ type GridVirtualScrollbarProps = {
   }>;
 };
 export declare const scrollbarSizeCssExpression = "calc(max(var(--DataGrid-scrollbarSize), 14px))";
-export declare const ScrollbarCorner: import("@emotion/styled").StyledComponent<Pick<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme> & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement> | keyof import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, {}, {}>;
+export declare const ScrollbarCorner: import("@emotion/styled").StyledComponent<Pick<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement> | keyof import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 declare const GridVirtualScrollbar: React.ForwardRefExoticComponent<GridVirtualScrollbarProps> | React.ForwardRefExoticComponent<GridVirtualScrollbarProps & React.RefAttributes<HTMLDivElement>>;
 export { GridVirtualScrollbar };

package/components/virtualization/GridVirtualScrollbar.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.scrollbarSizeCssExpression = exports.ScrollbarCorner = exports.GridVirtualScrollbar = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
@@ -35,7 +35,7 @@ const useUtilityClasses = (ownerState, position) => {
 // to appear and have a real size. We set it to 14px because it seems like an acceptable value and we
 // don't have a method to find the required size for scrollbars on those platforms.
 const scrollbarSizeCssExpression = exports.scrollbarSizeCssExpression = 'calc(max(var(--DataGrid-scrollbarSize), 14px))';
-const Scrollbar = (0, _system.styled)('div', {
+const Scrollbar = (0, _styles.styled)('div', {
   slot: 'internal',
   shouldForwardProp: undefined
 })({
@@ -47,7 +47,7 @@ const Scrollbar = (0, _system.styled)('div', {
   },
   '--size': scrollbarSizeCssExpression
 });
-const ScrollbarVertical = (0, _system.styled)(Scrollbar, {
+const ScrollbarVertical = (0, _styles.styled)(Scrollbar, {
   slot: 'internal'
 })({
   width: 'var(--size)',
@@ -62,7 +62,7 @@ const ScrollbarVertical = (0, _system.styled)(Scrollbar, {
   top: 'var(--DataGrid-headersTotalHeight)',
   right: 0
 });
-const ScrollbarHorizontal = (0, _system.styled)(Scrollbar, {
+const ScrollbarHorizontal = (0, _styles.styled)(Scrollbar, {
   slot: 'internal'
 })({
   width: 'calc(var(--DataGrid-hasScrollX) * (100% - var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize)))',
@@ -76,7 +76,7 @@ const ScrollbarHorizontal = (0, _system.styled)(Scrollbar, {
   },
   bottom: 0
 });
-const ScrollbarCorner = exports.ScrollbarCorner = (0, _system.styled)(Scrollbar, {
+const ScrollbarCorner = exports.ScrollbarCorner = (0, _styles.styled)(Scrollbar, {
   slot: 'internal'
 })({
   width: 'var(--size)',

package/components/virtualization/GridVirtualScroller.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridVirtualScroller = GridVirtualScroller;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _gridDimensionsSelectors = require("../../hooks/features/dimensions/gridDimensionsSelectors");
 var _rows = require("../../hooks/features/rows");
@@ -44,7 +44,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const Scroller = (0, _system.styled)('div', {
+const Scroller = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'VirtualScroller',
   overridesResolver: (props, styles) => {

package/components/virtualization/GridVirtualScrollerFiller.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.GridVirtualScrollerFiller = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _fastMemo = require("@mui/x-internals/fastMemo");
 var _cssVariables = require("../../constants/cssVariables");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
@@ -14,7 +14,7 @@ var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _dimensions = require("../../hooks/features/dimensions");
 var _constants = require("../../constants");
 var _jsxRuntime = require("react/jsx-runtime");
-const Filler = (0, _system.styled)('div', {
+const Filler = (0, _styles.styled)('div', {
   slot: 'internal',
   shouldForwardProp: undefined
 })({
@@ -23,7 +23,7 @@ const Filler = (0, _system.styled)('div', {
   width: 'var(--DataGrid-rowWidth)',
   boxSizing: 'border-box'
 });
-const Pinned = (0, _system.styled)('div', {
+const Pinned = (0, _styles.styled)('div', {
   slot: 'internal',
   shouldForwardProp: undefined
 })({
@@ -33,17 +33,17 @@ const Pinned = (0, _system.styled)('div', {
   borderTop: '1px solid var(--rowBorderColor)',
   backgroundColor: _cssVariables.vars.cell.background.pinned
 });
-const PinnedLeft = (0, _system.styled)(Pinned, {
+const PinnedLeft = (0, _styles.styled)(Pinned, {
   slot: 'internal'
 })({
   left: 0
 });
-const PinnedRight = (0, _system.styled)(Pinned, {
+const PinnedRight = (0, _styles.styled)(Pinned, {
   slot: 'internal'
 })({
   right: 0
 });
-const Main = (0, _system.styled)('div', {
+const Main = (0, _styles.styled)('div', {
   slot: 'internal',
   shouldForwardProp: undefined
 })({

package/constants/dataGridPropsDefaultValues.js

@@ -30,6 +30,7 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PROPS_DEFAULT_VALUES =
   disableMultipleColumnsFiltering: false,
   disableMultipleColumnsSorting: false,
   disableMultipleRowSelection: false,
+  dataSourceRevalidateMs: 0,
   disableRowSelectionOnClick: false,
   disableRowSelectionExcludeModel: false,
   disableVirtualization: false,

package/esm/DataGrid/DataGrid.js

@@ -173,6 +173,13 @@ DataGridRaw.propTypes = {
     get: PropTypes.func.isRequired,
     set: PropTypes.func.isRequired
   }),
+  /**
+   * If positive, the Data Grid will periodically revalidate data source rows by
+   * re-fetching them from the server when the cache entry has expired.
+   * Set to `0` to disable polling.
+   * @default 0
+   */
+  dataSourceRevalidateMs: PropTypes.number,
   /**
    * Set the density of the Data Grid.
    * @default "standard"

package/esm/DataGrid/index.js

@@ -1,2 +1 @@
-import '../index.css';
 export * from "./DataGrid.js";

package/esm/components/GridColumnSortButton.js

@@ -4,7 +4,7 @@ const _excluded = ["direction", "index", "sortingOrder", "disabled", "className"
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import clsx from 'clsx';
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { getDataGridUtilityClass } from "../constants/gridClasses.js";

package/esm/components/GridScrollArea.js

@@ -5,7 +5,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import { fastMemo } from '@mui/x-internals/fastMemo';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";

package/esm/components/GridScrollShadows.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import { useRtl } from '@mui/system/RtlProvider';
 import composeClasses from '@mui/utils/composeClasses';
 import { gridDimensionsSelector, gridPinnedColumnsSelector, useGridEvent, useGridSelector } from "../hooks/index.js";

package/esm/components/GridSkeletonLoadingOverlay.js

@@ -5,7 +5,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["skeletonRowsCount", "visibleColumns", "showFirstRowBorder"];
 import * as React from 'react';
 import clsx from 'clsx';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import useForkRef from '@mui/utils/useForkRef';
 import composeClasses from '@mui/utils/composeClasses';
 import { useRtl } from '@mui/system/RtlProvider';

package/esm/components/base/GridOverlays.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { minimalContentHeight } from "../../hooks/features/rows/gridRowsUtils.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";

package/esm/components/columnHeaders/GridColumnHeaderItem.js

@@ -10,6 +10,7 @@ import { fastMemo } from '@mui/x-internals/fastMemo';
 import { useRtl } from '@mui/system/RtlProvider';
 import { doesSupportPreventScroll } from "../../utils/doesSupportPreventScroll.js";
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
+import { getColumnMenuItemKeys } from "../../hooks/features/columnMenu/getColumnMenuItemKeys.js";
 import { ColumnHeaderMenuIcon } from "./ColumnHeaderMenuIcon.js";
 import { GridColumnHeaderMenu } from "../menu/columnMenu/GridColumnHeaderMenu.js";
 import { gridClasses, getDataGridUtilityClass } from "../../constants/gridClasses.js";
@@ -78,6 +79,30 @@ function GridColumnHeaderItem(props) {
   const columnMenuButtonId = useId();
   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 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) {
@@ -128,10 +153,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__*/_jsx(ColumnHeaderMenuIcon, {
+  const columnMenuIconButton = !rootProps.disableColumnMenu && !colDef.disableColumnMenu && hasColumnMenuItems && /*#__PURE__*/_jsx(ColumnHeaderMenuIcon, {
     colDef: colDef,
     columnMenuId: columnMenuId,
     columnMenuButtonId: columnMenuButtonId,

package/esm/components/columnHeaders/GridColumnHeaderTitle.js

@@ -7,7 +7,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { isOverflown } from "../../utils/domUtils.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";

package/esm/components/columnHeaders/GridIconButtonContainer.js

@@ -6,7 +6,7 @@ const _excluded = ["className"];
 import * as React from 'react';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";