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

package/modern/components/containers/GridRootStyles.js

@@ -1,17 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { alpha, styled, darken, lighten, decomposeColor, recomposeColor } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import { gridClasses as c } from "../../constants/gridClasses.js";
+import { vars } from "../../constants/cssVariables.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
-function getBorderColor(theme) {
-  if (theme.vars) {
-    return theme.vars.palette.TableCell.border;
-  }
-  if (theme.palette.mode === 'light') {
-    return lighten(alpha(theme.palette.divider, 1), 0.88);
-  }
-  return darken(alpha(theme.palette.divider, 1), 0.68);
-}
 const columnHeaderStyles = {
   [`& .${c.iconButtonContainer}`]: {
     visibility: 'visible',
@@ -34,7 +26,7 @@ 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 shouldShowBorderTopRightRadiusSelector = apiRef => apiRef.current.state.dimensions.hasScrollX && (!apiRef.current.state.dimensions.hasScrollY || apiRef.current.state.dimensions.scrollbarSize === 0);
 export const GridRootStyles = styled('div', {
   name: 'MuiDataGrid',
   slot: 'Root',
@@ -261,42 +253,38 @@ export const GridRootStyles = styled('div', {
   }, {
     [`& .${c.withBorderColor}`]: styles.withBorderColor
   }]
-})(({
-  theme: t
-}) => {
+})(() => {
   const apiRef = useGridPrivateApiContext();
   const shouldShowBorderTopRightRadius = useGridSelector(apiRef, shouldShowBorderTopRightRadiusSelector);
-  const borderColor = getBorderColor(t);
-  const radius = t.shape.borderRadius;
-  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;
-  const selectedOpacity = (t.vars || t).palette.action.selectedOpacity;
-  const selectedHoverOpacity = t.vars ? `calc(${hoverOpacity} + ${selectedOpacity})` // TODO: Improve type
-  : hoverOpacity + selectedOpacity;
-  const selectedBackground = t.vars ? `rgba(${t.vars.palette.primary.mainChannel} / ${selectedOpacity})` : alpha(t.palette.primary.main, selectedOpacity);
-  const selectedHoverBackground = t.vars ? `rgba(${t.vars.palette.primary.mainChannel} / ${selectedHoverOpacity})` : alpha(t.palette.primary.main, selectedHoverOpacity);
-  const blendFn = t.vars ? blendCssVars : blend;
+  const baseBackground = vars.colors.background.base;
+  const headerBackground = vars.header.background.base;
+  const pinnedBackground = vars.cell.background.pinned;
+  const hoverColor = vars.colors.interactive.hover;
+  const hoverOpacity = vars.colors.interactive.hoverOpacity;
+  const selectedColor = vars.colors.interactive.selected;
+  const selectedOpacity = vars.colors.interactive.selectedOpacity;
+  const selectedHoverColor = selectedColor;
+  const selectedHoverOpacity = `calc(${selectedOpacity} + ${hoverOpacity})`;
+  const hoverBackground = mix(baseBackground, hoverColor, hoverOpacity);
+  const selectedBackground = mix(baseBackground, selectedColor, selectedOpacity);
+  const selectedHoverBackground = mix(baseBackground, selectedHoverColor, selectedHoverOpacity);
+  const pinnedHoverBackground = mix(pinnedBackground, hoverColor, hoverOpacity);
+  const pinnedSelectedBackground = mix(pinnedBackground, selectedColor, selectedOpacity);
+  const pinnedSelectedHoverBackground = mix(pinnedBackground, selectedHoverColor, selectedHoverOpacity);
   const getPinnedBackgroundStyles = backgroundColor => ({
     [`& .${c['cell--pinnedLeft']}, & .${c['cell--pinnedRight']}`]: {
       backgroundColor,
       '&.Mui-selected': {
-        backgroundColor: blendFn(backgroundColor, selectedBackground, selectedOpacity),
+        backgroundColor: mix(backgroundColor, selectedBackground, selectedOpacity),
         '&:hover': {
-          backgroundColor: blendFn(backgroundColor, selectedBackground, selectedHoverOpacity)
+          backgroundColor: mix(backgroundColor, selectedHoverBackground, selectedHoverOpacity)
         }
       }
     }
   });
-  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);
-  const pinnedSelectedHoverStyles = getPinnedBackgroundStyles(pinnedSelectedHoverBackgroundColor);
+  const pinnedHoverStyles = getPinnedBackgroundStyles(pinnedHoverBackground);
+  const pinnedSelectedStyles = getPinnedBackgroundStyles(pinnedSelectedBackground);
+  const pinnedSelectedHoverStyles = getPinnedBackgroundStyles(pinnedSelectedHoverBackground);
   const selectedStyles = {
     backgroundColor: selectedBackground,
     '&:hover': {
@@ -308,13 +296,9 @@ export const GridRootStyles = styled('div', {
     }
   };
   const gridStyle = _extends({
-    '--unstable_DataGrid-radius': typeof radius === 'number' ? `${radius}px` : radius,
-    '--unstable_DataGrid-headWeight': t.typography.fontWeightMedium,
-    '--unstable_DataGrid-overlayBackground': overlayBackground,
-    '--DataGrid-background': background,
-    '--DataGrid-headerBackground': headerBackground,
-    '--DataGrid-pinnedBackground': pinnedBackground,
-    '--DataGrid-rowBorderColor': borderColor,
+    '--unstable_DataGrid-radius': vars.radius.base,
+    '--unstable_DataGrid-headWeight': vars.typography.fontWeight.medium,
+    '--DataGrid-rowBorderColor': vars.colors.border.base,
     '--DataGrid-cellOffsetMultiplier': 2,
     '--DataGrid-width': '0px',
     '--DataGrid-hasScrollX': '0',
@@ -333,11 +317,11 @@ export const GridRootStyles = styled('div', {
     position: 'relative',
     borderWidth: '1px',
     borderStyle: 'solid',
-    borderColor,
+    borderColor: vars.colors.border.base,
     borderRadius: 'var(--unstable_DataGrid-radius)',
-    backgroundColor: 'var(--DataGrid-background)',
-    color: (t.vars || t).palette.text.primary
-  }, t.typography.body2, {
+    backgroundColor: vars.colors.background.base,
+    color: vars.colors.foreground.base
+  }, vars.typography.body, {
     outline: 'none',
     height: '100%',
     display: 'flex',
@@ -384,11 +368,11 @@ export const GridRootStyles = styled('div', {
       boxSizing: 'border-box'
     },
     [`& .${c.columnHeader}:focus-within, & .${c.cell}:focus-within`]: {
-      outline: `solid ${t.vars ? `rgba(${t.vars.palette.primary.mainChannel} / 0.5)` : alpha(t.palette.primary.main, 0.5)} ${focusOutlineWidth}px`,
+      outline: `solid ${setOpacity(vars.colors.interactive.focus, 0.5)} ${focusOutlineWidth}px`,
       outlineOffset: focusOutlineWidth * -1
     },
     [`& .${c.columnHeader}:focus, & .${c.cell}:focus`]: {
-      outline: `solid ${t.palette.primary.main} ${focusOutlineWidth}px`,
+      outline: `solid ${vars.colors.interactive.focus} ${focusOutlineWidth}px`,
       outlineOffset: focusOutlineWidth * -1
     },
     // Hide the column separator when:
@@ -430,7 +414,8 @@ export const GridRootStyles = styled('div', {
     [`& .${c.columnHeader}`]: {
       position: 'relative',
       display: 'flex',
-      alignItems: 'center'
+      alignItems: 'center',
+      backgroundColor: headerBackground
     },
     [`& .${c['columnHeader--filter']}`]: {
       paddingTop: 8,
@@ -448,14 +433,14 @@ export const GridRootStyles = styled('div', {
     },
     [`& .${c.columnHeader}:not(.${c['columnHeader--sorted']}) .${c.sortIcon}`]: {
       opacity: 0,
-      transition: t.transitions.create(['opacity'], {
-        duration: t.transitions.duration.shorter
+      transition: vars.transition(['opacity'], {
+        duration: vars.transitions.duration.short
       })
     },
     [`& .${c.columnHeaderTitleContainer}`]: {
       display: 'flex',
       alignItems: 'center',
-      gap: t.spacing(0.25),
+      gap: vars.spacing(0.25),
       minWidth: 0,
       flex: 1,
       whiteSpace: 'nowrap',
@@ -491,13 +476,13 @@ export const GridRootStyles = styled('div', {
       marginLeft: -5
     },
     [`& .${c['columnHeader--moving']}`]: {
-      backgroundColor: (t.vars || t).palette.action.hover
+      backgroundColor: hoverBackground
     },
     [`& .${c['columnHeader--pinnedLeft']}, & .${c['columnHeader--pinnedRight']}`]: {
       position: 'sticky',
       zIndex: 4,
       // Should be above the column separator
-      background: 'var(--DataGrid-headerBackground)'
+      background: vars.header.background.base
     },
     [`& .${c.columnSeparator}`]: {
       position: 'absolute',
@@ -508,11 +493,11 @@ export const GridRootStyles = styled('div', {
       justifyContent: 'center',
       alignItems: 'center',
       maxWidth: columnSeparatorTargetSize,
-      color: borderColor
+      color: vars.colors.border.base
     },
     [`& .${c.columnHeaders}`]: {
       width: 'var(--DataGrid-rowWidth)',
-      backgroundColor: 'var(--DataGrid-headerBackground)'
+      backgroundColor: headerBackground
     },
     '@media (hover: hover)': {
       [`& .${c.columnHeader}:hover`]: columnHeaderStyles,
@@ -525,7 +510,7 @@ export const GridRootStyles = styled('div', {
       [`& .${c.columnHeader}:focus,
         & .${c['columnHeader--siblingFocused']}`]: {
         [`.${c['columnSeparator--resizable']}`]: {
-          color: (t.vars || t).palette.primary.main
+          color: vars.colors.foreground.accent
         }
       }
     },
@@ -545,7 +530,7 @@ export const GridRootStyles = styled('div', {
       cursor: 'col-resize',
       touchAction: 'none',
       [`&.${c['columnSeparator--resizing']}`]: {
-        color: (t.vars || t).palette.primary.main
+        color: vars.colors.foreground.accent
       },
       // Always appear as draggable on touch devices
       '@media (hover: none)': {
@@ -553,7 +538,7 @@ export const GridRootStyles = styled('div', {
       },
       '@media (hover: hover)': {
         '&:hover': {
-          color: (t.vars || t).palette.primary.main,
+          color: vars.colors.foreground.accent,
           [`& .${c.iconSeparator} rect`]: separatorIconDragStyles
         }
       },
@@ -563,8 +548,8 @@ export const GridRootStyles = styled('div', {
     },
     [`& .${c.iconSeparator}`]: {
       color: 'inherit',
-      transition: t.transitions.create(['color', 'width'], {
-        duration: t.transitions.duration.shortest
+      transition: vars.transition(['color', 'width'], {
+        duration: vars.transitions.duration.short
       })
     },
     [`& .${c.menuIcon}`]: {
@@ -606,7 +591,7 @@ export const GridRootStyles = styled('div', {
         '--rowBorderColor': 'transparent'
       },
       '&:hover': {
-        backgroundColor: (t.vars || t).palette.action.hover,
+        backgroundColor: hoverBackground,
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
           backgroundColor: 'transparent'
@@ -617,6 +602,11 @@ export const GridRootStyles = styled('div', {
       },
       '&.Mui-selected': selectedStyles
     },
+    [`& .${c['container--top']}, & .${c['container--bottom']}`]: {
+      '[role=row]': {
+        background: vars.colors.background.base
+      }
+    },
     /* Cell styles */
     [`& .${c.cell}`]: {
       flex: '0 0 auto',
@@ -635,10 +625,10 @@ export const GridRootStyles = styled('div', {
     [`& .${c['virtualScrollerContent--overflowed']} .${c['row--lastVisible']} .${c.cell}`]: {
       borderTopColor: 'transparent'
     },
-    [`& .${c.pinnedRows} .${c.row}`]: {
-      backgroundColor: 'var(--DataGrid-pinnedBackground)',
+    [`& .${c.pinnedRows} .${c.row}, .${c.aggregationRowOverlayWrapper} .${c.row}`]: {
+      backgroundColor: pinnedBackground,
       '&:hover': {
-        backgroundColor: pinnedHoverBackgroundColor
+        backgroundColor: pinnedHoverBackground
       }
     },
     [`& .${c['pinnedRows--top']} :first-of-type`]: {
@@ -664,19 +654,19 @@ export const GridRootStyles = styled('div', {
     [`& .${c.cell}.${c['cell--editing']}`]: {
       padding: 1,
       display: 'flex',
-      boxShadow: t.shadows[2],
-      backgroundColor: (t.vars || t).palette.background.paper,
+      boxShadow: vars.shadows.base,
+      backgroundColor: vars.colors.background.overlay,
       '&:focus-within': {
-        outline: `${focusOutlineWidth}px solid ${(t.vars || t).palette.primary.main}`,
+        outline: `${focusOutlineWidth}px solid ${vars.colors.interactive.focus}`,
         outlineOffset: focusOutlineWidth * -1
       }
     },
     [`& .${c['row--editing']}`]: {
-      boxShadow: t.shadows[2]
+      boxShadow: vars.shadows.base
     },
     [`& .${c['row--editing']} .${c.cell}`]: {
-      boxShadow: t.shadows[0],
-      backgroundColor: (t.vars || t).palette.background.paper
+      boxShadow: 'none',
+      backgroundColor: vars.colors.background.overlay
     },
     [`& .${c.editBooleanCell}`]: {
       display: 'flex',
@@ -686,22 +676,22 @@ export const GridRootStyles = styled('div', {
       justifyContent: 'center'
     },
     [`& .${c.booleanCell}[data-value="true"]`]: {
-      color: (t.vars || t).palette.text.secondary
+      color: vars.colors.foreground.muted
     },
     [`& .${c.booleanCell}[data-value="false"]`]: {
-      color: (t.vars || t).palette.text.disabled
+      color: vars.colors.foreground.disabled
     },
     [`& .${c.actionsCell}`]: {
       display: 'inline-flex',
       alignItems: 'center',
-      gridGap: t.spacing(1)
+      gridGap: vars.spacing(1)
     },
     [`& .${c.rowReorderCell}`]: {
       display: 'inline-flex',
       flex: 1,
       alignItems: 'center',
       justifyContent: 'center',
-      opacity: (t.vars || t).palette.action.disabledOpacity
+      opacity: vars.colors.interactive.disabledOpacity
     },
     [`& .${c['rowReorderCell--draggable']}`]: {
       cursor: 'move',
@@ -713,7 +703,7 @@ export const GridRootStyles = styled('div', {
       alignItems: 'stretch'
     },
     [`.${c.withBorderColor}`]: {
-      borderColor
+      borderColor: vars.colors.border.base
     },
     [`& .${c['cell--withLeftBorder']}, & .${c['columnHeader--withLeftBorder']}`]: {
       borderLeftColor: 'var(--DataGrid-rowBorderColor)',
@@ -745,9 +735,9 @@ export const GridRootStyles = styled('div', {
     [`& .${c['cell--pinnedLeft']}, & .${c['cell--pinnedRight']}`]: {
       position: 'sticky',
       zIndex: 3,
-      background: 'var(--DataGrid-pinnedBackground)',
+      background: vars.cell.background.pinned,
       '&.Mui-selected': {
-        backgroundColor: pinnedSelectedBackgroundColor
+        backgroundColor: pinnedSelectedBackground
       }
     },
     [`& .${c.row}`]: {
@@ -774,16 +764,16 @@ export const GridRootStyles = styled('div', {
       display: 'none'
     },
     [`& .${c['columnHeader--dragging']}, & .${c['row--dragging']}`]: {
-      background: (t.vars || t).palette.background.paper,
+      background: vars.colors.background.overlay,
       padding: '0 12px',
       borderRadius: 'var(--unstable_DataGrid-radius)',
-      opacity: (t.vars || t).palette.action.disabledOpacity
+      opacity: vars.colors.interactive.disabledOpacity
     },
     [`& .${c['row--dragging']}`]: {
-      background: (t.vars || t).palette.background.paper,
+      background: vars.colors.background.overlay,
       padding: '0 12px',
       borderRadius: 'var(--unstable_DataGrid-radius)',
-      opacity: (t.vars || t).palette.action.disabledOpacity,
+      opacity: vars.colors.interactive.disabledOpacity,
       [`& .${c.rowReorderCellPlaceholder}`]: {
         display: 'flex'
       }
@@ -796,7 +786,7 @@ export const GridRootStyles = styled('div', {
     [`& .${c.treeDataGroupingCellToggle}`]: {
       flex: '0 0 28px',
       alignSelf: 'stretch',
-      marginRight: t.spacing(2)
+      marginRight: vars.spacing(2)
     },
     [`& .${c.treeDataGroupingCellLoadingContainer}, .${c.groupingCriteriaCellLoadingContainer}`]: {
       display: 'flex',
@@ -812,7 +802,7 @@ export const GridRootStyles = styled('div', {
     [`& .${c.groupingCriteriaCellToggle}`]: {
       flex: '0 0 28px',
       alignSelf: 'stretch',
-      marginRight: t.spacing(2)
+      marginRight: vars.spacing(2)
     },
     /* ScrollbarFiller styles */
     [`.${c.scrollbarFiller}`]: {
@@ -825,7 +815,7 @@ export const GridRootStyles = styled('div', {
         borderBottom: '1px solid var(--DataGrid-rowBorderColor)'
       },
       [`&.${c['scrollbarFiller--pinnedRight']}`]: {
-        backgroundColor: 'var(--DataGrid-pinnedBackground)',
+        backgroundColor: vars.cell.background.pinned,
         position: 'sticky',
         right: 0
       }
@@ -836,8 +826,8 @@ export const GridRootStyles = styled('div', {
     [`& .${c['filler--borderBottom']}`]: {
       borderBottom: '1px solid var(--DataGrid-rowBorderColor)'
     },
-    /* Hide grid rows, row filler, and vertical scrollbar when skeleton overlay is visible */
-    [`& .${c['main--hasSkeletonLoadingOverlay']}`]: {
+    /* Hide grid rows, row filler, and vertical scrollbar. Used when skeleton/no columns overlay is visible */
+    [`& .${c['main--hiddenContent']}`]: {
       [`& .${c.virtualScrollerContent}`]: {
         // We use visibility hidden so that the virtual scroller content retains its height.
         // Position fixed is used to remove the virtual scroller content from the flow.
@@ -852,22 +842,9 @@ export const GridRootStyles = styled('div', {
   });
   return gridStyle;
 });
-
-/**
- * Blend a transparent overlay color with a background color, resulting in a single
- * RGB color.
- */
-function blend(background, overlay, opacity, gamma = 1) {
-  const f = (b, o) => Math.round((b ** (1 / gamma) * (1 - opacity) + o ** (1 / gamma) * opacity) ** gamma);
-  const backgroundColor = decomposeColor(background);
-  const overlayColor = decomposeColor(overlay);
-  const rgb = [f(backgroundColor.values[0], overlayColor.values[0]), f(backgroundColor.values[1], overlayColor.values[1]), f(backgroundColor.values[2], overlayColor.values[2])];
-  return recomposeColor({
-    type: 'rgb',
-    values: rgb
-  });
+function setOpacity(color, opacity) {
+  return `rgba(from ${color} r g b / ${opacity})`;
 }
-const removeOpacity = color => `rgb(from ${color} r g b / 1)`;
-function blendCssVars(background, overlay, opacity) {
-  return `color-mix(in srgb,${background}, ${removeOpacity(overlay)} calc(${opacity} * 100%))`;
+function mix(background, overlay, opacity) {
+  return `color-mix(in srgb,${background}, ${overlay} calc(${opacity} * 100%))`;
 }

package/modern/components/containers/GridToolbarContainer.d.ts

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

package/modern/components/containers/GridToolbarContainer.js

@@ -7,6 +7,7 @@ import clsx from 'clsx';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { vars } from "../../constants/cssVariables.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -23,15 +24,13 @@ const GridToolbarContainerRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ToolbarContainer',
   overridesResolver: (_, styles) => styles.toolbarContainer
-})(({
-  theme
-}) => ({
+})({
   display: 'flex',
   alignItems: 'center',
   flexWrap: 'wrap',
-  gap: theme.spacing(1),
-  padding: theme.spacing(0.5, 0.5, 0)
-}));
+  gap: vars.spacing(1),
+  padding: vars.spacing(0.5, 0.5, 0)
+});
 const GridToolbarContainer = forwardRef(function GridToolbarContainer(props, ref) {
   const {
       className,

package/modern/components/containers/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./GridRoot.js";
+export * from "./GridFooterContainer.js";
+export * from "./GridOverlay.js";
+export * from "./GridToolbarContainer.js";

package/modern/components/index.d.ts

@@ -0,0 +1,20 @@
+export * from "./base/index.js";
+export * from "./cell/index.js";
+export * from "./containers/index.js";
+export * from "./columnHeaders/index.js";
+export * from "./columnSelection/index.js";
+export * from "../material/icons/index.js";
+export * from "./menu/index.js";
+export * from "./panel/index.js";
+export * from "./columnsManagement/index.js";
+export * from "./toolbar/index.js";
+export * from "./GridApiContext.js";
+export * from "./GridFooter.js";
+export * from "./GridHeader.js";
+export * from "./GridLoadingOverlay.js";
+export * from "./GridNoRowsOverlay.js";
+export * from "./GridNoColumnsOverlay.js";
+export { GridPagination } from "./GridPagination.js";
+export * from "./GridRowCount.js";
+export * from "./GridRow.js";
+export * from "./GridSelectedRowCount.js";

package/modern/components/index.js

@@ -13,6 +13,7 @@ export * from "./GridFooter.js";
 export * from "./GridHeader.js";
 export * from "./GridLoadingOverlay.js";
 export * from "./GridNoRowsOverlay.js";
+export * from "./GridNoColumnsOverlay.js";
 export { GridPagination } from "./GridPagination.js";
 export * from "./GridRowCount.js";
 export * from "./GridRow.js";

package/modern/components/menu/GridMenu.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { 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;
+  target: HTMLElement | null;
+  onClose: (event?: Event) => void;
+  position?: MenuPosition;
+  children: React.ReactNode;
+}
+declare function GridMenu(props: GridMenuProps): React.JSX.Element;
+declare namespace GridMenu {
+  var propTypes: any;
+}
+export { GridMenu };

package/modern/components/menu/GridMenu.js

@@ -4,15 +4,14 @@ const _excluded = ["open", "target", "onClose", "children", "position", "classNa
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import ClickAwayListener from '@mui/material/ClickAwayListener';
 import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect, HTMLElementType } from '@mui/utils';
-import Grow from '@mui/material/Grow';
-import Paper from '@mui/material/Paper';
-import Popper from '@mui/material/Popper';
 import { styled } from '@mui/material/styles';
+import { vars } from "../../constants/cssVariables.js";
+import { useCSSVariablesClass } from "../../utils/css/context.js";
 import { getDataGridUtilityClass, gridClasses } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { NotRendered } from "../../utils/assert.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -23,22 +22,15 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
-const GridMenuRoot = styled(Popper, {
+const GridMenuRoot = styled(NotRendered, {
   name: 'MuiDataGrid',
-  slot: 'Menu',
-  overridesResolver: (_, styles) => styles.menu
-})(({
-  theme
-}) => ({
-  zIndex: theme.zIndex.modal,
+  slot: 'Menu'
+})({
+  zIndex: vars.zIndex.menu,
   [`& .${gridClasses.menuList}`]: {
     outline: 0
   }
-}));
-const transformOrigin = {
-  'bottom-start': 'top left',
-  'bottom-end': 'top right'
-};
+});
 function GridMenu(props) {
   const {
       open,
@@ -53,6 +45,7 @@ function GridMenu(props) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
+  const variablesClass = useCSSVariablesClass();
   const savedFocusRef = React.useRef(null);
   useEnhancedEffect(() => {
     if (open) {
@@ -69,14 +62,6 @@ function GridMenu(props) {
       target
     });
   }, [apiRef, open, target]);
-  const handleExited = popperOnExited => node => {
-    if (popperOnExited) {
-      popperOnExited();
-    }
-    if (onExited) {
-      onExited(node);
-    }
-  };
   const handleClickAway = event => {
     if (event.target && (target === event.target || target?.contains(event.target))) {
       return;
@@ -85,29 +70,17 @@ function GridMenu(props) {
   };
   return /*#__PURE__*/_jsx(GridMenuRoot, _extends({
     as: rootProps.slots.basePopper,
-    className: clsx(classes.root, className),
+    className: clsx(classes.root, className, variablesClass),
     ownerState: rootProps,
     open: open,
-    anchorEl: target,
+    target: target,
     transition: true,
-    placement: position
+    placement: position,
+    onClickAway: handleClickAway,
+    onExited: onExited,
+    clickAwayMouseEvent: "onMouseDown"
   }, other, rootProps.slotProps?.basePopper, {
-    children: ({
-      TransitionProps,
-      placement
-    }) => /*#__PURE__*/_jsx(ClickAwayListener, {
-      onClickAway: handleClickAway,
-      mouseEvent: "onMouseDown",
-      children: /*#__PURE__*/_jsx(Grow, _extends({}, TransitionProps, {
-        style: {
-          transformOrigin: transformOrigin[placement]
-        },
-        onExited: handleExited(TransitionProps?.onExited),
-        children: /*#__PURE__*/_jsx(Paper, {
-          children: children
-        })
-      }))
-    })
+    children: children
   }));
 }
 process.env.NODE_ENV !== "production" ? GridMenu.propTypes = {
@@ -116,11 +89,9 @@ process.env.NODE_ENV !== "production" ? GridMenu.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   children: PropTypes.node,
+  className: PropTypes.string,
   onClose: PropTypes.func.isRequired,
   onExited: PropTypes.func,
-  /**
-   * If `true`, the component is shown.
-   */
   open: PropTypes.bool.isRequired,
   position: PropTypes.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
   target: HTMLElementType

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { GridMenuProps } from "../GridMenu.js";
+export interface GridColumnHeaderMenuProps {
+  columnMenuId?: string;
+  columnMenuButtonId?: string;
+  ContentComponent: React.JSXElementConstructor<any>;
+  contentComponentProps?: any;
+  field: string;
+  open: boolean;
+  target: HTMLElement | null;
+  onExited?: GridMenuProps['onExited'];
+}
+declare function GridColumnHeaderMenu({
+  columnMenuId,
+  columnMenuButtonId,
+  ContentComponent,
+  contentComponentProps,
+  field,
+  open,
+  target,
+  onExited
+}: GridColumnHeaderMenuProps): React.JSX.Element | null;
+declare namespace GridColumnHeaderMenu {
+  var propTypes: any;
+}
+export { GridColumnHeaderMenu };