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

package/components/containers/GridRootStyles.js

@@ -8,17 +8,9 @@ exports.GridRootStyles = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _styles = require("@mui/material/styles");
 var _gridClasses = require("../../constants/gridClasses");
+var _cssVariables = require("../../constants/cssVariables");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
-function getBorderColor(theme) {
-  if (theme.vars) {
-    return theme.vars.palette.TableCell.border;
-  }
-  if (theme.palette.mode === 'light') {
-    return (0, _styles.lighten)((0, _styles.alpha)(theme.palette.divider, 1), 0.88);
-  }
-  return (0, _styles.darken)((0, _styles.alpha)(theme.palette.divider, 1), 0.68);
-}
 const columnHeaderStyles = {
   [`& .${_gridClasses.gridClasses.iconButtonContainer}`]: {
     visibility: 'visible',
@@ -268,42 +260,38 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
   }, {
     [`& .${_gridClasses.gridClasses.withBorderColor}`]: styles.withBorderColor
   }]
-})(({
-  theme: t
-}) => {
+})(() => {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const shouldShowBorderTopRightRadius = (0, _useGridSelector.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})` : (0, _styles.alpha)(t.palette.background.default, t.palette.action.disabledOpacity);
-  const hoverOpacity = (t.vars || t).palette.action.hoverOpacity;
-  const hoverColor = (t.vars || t).palette.action.hover;
-  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})` : (0, _styles.alpha)(t.palette.primary.main, selectedOpacity);
-  const selectedHoverBackground = t.vars ? `rgba(${t.vars.palette.primary.mainChannel} / ${selectedHoverOpacity})` : (0, _styles.alpha)(t.palette.primary.main, selectedHoverOpacity);
-  const blendFn = t.vars ? blendCssVars : blend;
+  const baseBackground = _cssVariables.vars.colors.background.base;
+  const headerBackground = _cssVariables.vars.header.background.base;
+  const pinnedBackground = _cssVariables.vars.cell.background.pinned;
+  const hoverColor = _cssVariables.vars.colors.interactive.hover;
+  const hoverOpacity = _cssVariables.vars.colors.interactive.hoverOpacity;
+  const selectedColor = _cssVariables.vars.colors.interactive.selected;
+  const selectedOpacity = _cssVariables.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 => ({
     [`& .${_gridClasses.gridClasses['cell--pinnedLeft']}, & .${_gridClasses.gridClasses['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': {
@@ -315,13 +303,9 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     }
   };
   const gridStyle = (0, _extends2.default)({
-    '--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': _cssVariables.vars.radius.base,
+    '--unstable_DataGrid-headWeight': _cssVariables.vars.typography.fontWeight.medium,
+    '--DataGrid-rowBorderColor': _cssVariables.vars.colors.border.base,
     '--DataGrid-cellOffsetMultiplier': 2,
     '--DataGrid-width': '0px',
     '--DataGrid-hasScrollX': '0',
@@ -340,11 +324,11 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     position: 'relative',
     borderWidth: '1px',
     borderStyle: 'solid',
-    borderColor,
+    borderColor: _cssVariables.vars.colors.border.base,
     borderRadius: 'var(--unstable_DataGrid-radius)',
-    backgroundColor: 'var(--DataGrid-background)',
-    color: (t.vars || t).palette.text.primary
-  }, t.typography.body2, {
+    backgroundColor: _cssVariables.vars.colors.background.base,
+    color: _cssVariables.vars.colors.foreground.base
+  }, _cssVariables.vars.typography.body, {
     outline: 'none',
     height: '100%',
     display: 'flex',
@@ -391,11 +375,11 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       boxSizing: 'border-box'
     },
     [`& .${_gridClasses.gridClasses.columnHeader}:focus-within, & .${_gridClasses.gridClasses.cell}:focus-within`]: {
-      outline: `solid ${t.vars ? `rgba(${t.vars.palette.primary.mainChannel} / 0.5)` : (0, _styles.alpha)(t.palette.primary.main, 0.5)} ${focusOutlineWidth}px`,
+      outline: `solid ${setOpacity(_cssVariables.vars.colors.interactive.focus, 0.5)} ${focusOutlineWidth}px`,
       outlineOffset: focusOutlineWidth * -1
     },
     [`& .${_gridClasses.gridClasses.columnHeader}:focus, & .${_gridClasses.gridClasses.cell}:focus`]: {
-      outline: `solid ${t.palette.primary.main} ${focusOutlineWidth}px`,
+      outline: `solid ${_cssVariables.vars.colors.interactive.focus} ${focusOutlineWidth}px`,
       outlineOffset: focusOutlineWidth * -1
     },
     // Hide the column separator when:
@@ -437,7 +421,8 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses.columnHeader}`]: {
       position: 'relative',
       display: 'flex',
-      alignItems: 'center'
+      alignItems: 'center',
+      backgroundColor: headerBackground
     },
     [`& .${_gridClasses.gridClasses['columnHeader--filter']}`]: {
       paddingTop: 8,
@@ -455,14 +440,14 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     },
     [`& .${_gridClasses.gridClasses.columnHeader}:not(.${_gridClasses.gridClasses['columnHeader--sorted']}) .${_gridClasses.gridClasses.sortIcon}`]: {
       opacity: 0,
-      transition: t.transitions.create(['opacity'], {
-        duration: t.transitions.duration.shorter
+      transition: _cssVariables.vars.transition(['opacity'], {
+        duration: _cssVariables.vars.transitions.duration.short
       })
     },
     [`& .${_gridClasses.gridClasses.columnHeaderTitleContainer}`]: {
       display: 'flex',
       alignItems: 'center',
-      gap: t.spacing(0.25),
+      gap: _cssVariables.vars.spacing(0.25),
       minWidth: 0,
       flex: 1,
       whiteSpace: 'nowrap',
@@ -498,13 +483,13 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       marginLeft: -5
     },
     [`& .${_gridClasses.gridClasses['columnHeader--moving']}`]: {
-      backgroundColor: (t.vars || t).palette.action.hover
+      backgroundColor: hoverBackground
     },
     [`& .${_gridClasses.gridClasses['columnHeader--pinnedLeft']}, & .${_gridClasses.gridClasses['columnHeader--pinnedRight']}`]: {
       position: 'sticky',
       zIndex: 4,
       // Should be above the column separator
-      background: 'var(--DataGrid-headerBackground)'
+      background: _cssVariables.vars.header.background.base
     },
     [`& .${_gridClasses.gridClasses.columnSeparator}`]: {
       position: 'absolute',
@@ -515,11 +500,11 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       justifyContent: 'center',
       alignItems: 'center',
       maxWidth: columnSeparatorTargetSize,
-      color: borderColor
+      color: _cssVariables.vars.colors.border.base
     },
     [`& .${_gridClasses.gridClasses.columnHeaders}`]: {
       width: 'var(--DataGrid-rowWidth)',
-      backgroundColor: 'var(--DataGrid-headerBackground)'
+      backgroundColor: headerBackground
     },
     '@media (hover: hover)': {
       [`& .${_gridClasses.gridClasses.columnHeader}:hover`]: columnHeaderStyles,
@@ -532,7 +517,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       [`& .${_gridClasses.gridClasses.columnHeader}:focus,
         & .${_gridClasses.gridClasses['columnHeader--siblingFocused']}`]: {
         [`.${_gridClasses.gridClasses['columnSeparator--resizable']}`]: {
-          color: (t.vars || t).palette.primary.main
+          color: _cssVariables.vars.colors.foreground.accent
         }
       }
     },
@@ -552,7 +537,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       cursor: 'col-resize',
       touchAction: 'none',
       [`&.${_gridClasses.gridClasses['columnSeparator--resizing']}`]: {
-        color: (t.vars || t).palette.primary.main
+        color: _cssVariables.vars.colors.foreground.accent
       },
       // Always appear as draggable on touch devices
       '@media (hover: none)': {
@@ -560,7 +545,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       },
       '@media (hover: hover)': {
         '&:hover': {
-          color: (t.vars || t).palette.primary.main,
+          color: _cssVariables.vars.colors.foreground.accent,
           [`& .${_gridClasses.gridClasses.iconSeparator} rect`]: separatorIconDragStyles
         }
       },
@@ -570,8 +555,8 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     },
     [`& .${_gridClasses.gridClasses.iconSeparator}`]: {
       color: 'inherit',
-      transition: t.transitions.create(['color', 'width'], {
-        duration: t.transitions.duration.shortest
+      transition: _cssVariables.vars.transition(['color', 'width'], {
+        duration: _cssVariables.vars.transitions.duration.short
       })
     },
     [`& .${_gridClasses.gridClasses.menuIcon}`]: {
@@ -613,7 +598,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.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'
@@ -624,6 +609,11 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       },
       '&.Mui-selected': selectedStyles
     },
+    [`& .${_gridClasses.gridClasses['container--top']}, & .${_gridClasses.gridClasses['container--bottom']}`]: {
+      '[role=row]': {
+        background: _cssVariables.vars.colors.background.base
+      }
+    },
     /* Cell styles */
     [`& .${_gridClasses.gridClasses.cell}`]: {
       flex: '0 0 auto',
@@ -643,9 +633,9 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       borderTopColor: 'transparent'
     },
     [`& .${_gridClasses.gridClasses.pinnedRows} .${_gridClasses.gridClasses.row}, .${_gridClasses.gridClasses.aggregationRowOverlayWrapper} .${_gridClasses.gridClasses.row}`]: {
-      backgroundColor: 'var(--DataGrid-pinnedBackground)',
+      backgroundColor: pinnedBackground,
       '&:hover': {
-        backgroundColor: pinnedHoverBackgroundColor
+        backgroundColor: pinnedHoverBackground
       }
     },
     [`& .${_gridClasses.gridClasses['pinnedRows--top']} :first-of-type`]: {
@@ -671,19 +661,19 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses.cell}.${_gridClasses.gridClasses['cell--editing']}`]: {
       padding: 1,
       display: 'flex',
-      boxShadow: t.shadows[2],
-      backgroundColor: (t.vars || t).palette.background.paper,
+      boxShadow: _cssVariables.vars.shadows.base,
+      backgroundColor: _cssVariables.vars.colors.background.overlay,
       '&:focus-within': {
-        outline: `${focusOutlineWidth}px solid ${(t.vars || t).palette.primary.main}`,
+        outline: `${focusOutlineWidth}px solid ${_cssVariables.vars.colors.interactive.focus}`,
         outlineOffset: focusOutlineWidth * -1
       }
     },
     [`& .${_gridClasses.gridClasses['row--editing']}`]: {
-      boxShadow: t.shadows[2]
+      boxShadow: _cssVariables.vars.shadows.base
     },
     [`& .${_gridClasses.gridClasses['row--editing']} .${_gridClasses.gridClasses.cell}`]: {
-      boxShadow: t.shadows[0],
-      backgroundColor: (t.vars || t).palette.background.paper
+      boxShadow: 'none',
+      backgroundColor: _cssVariables.vars.colors.background.overlay
     },
     [`& .${_gridClasses.gridClasses.editBooleanCell}`]: {
       display: 'flex',
@@ -693,22 +683,22 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       justifyContent: 'center'
     },
     [`& .${_gridClasses.gridClasses.booleanCell}[data-value="true"]`]: {
-      color: (t.vars || t).palette.text.secondary
+      color: _cssVariables.vars.colors.foreground.muted
     },
     [`& .${_gridClasses.gridClasses.booleanCell}[data-value="false"]`]: {
-      color: (t.vars || t).palette.text.disabled
+      color: _cssVariables.vars.colors.foreground.disabled
     },
     [`& .${_gridClasses.gridClasses.actionsCell}`]: {
       display: 'inline-flex',
       alignItems: 'center',
-      gridGap: t.spacing(1)
+      gridGap: _cssVariables.vars.spacing(1)
     },
     [`& .${_gridClasses.gridClasses.rowReorderCell}`]: {
       display: 'inline-flex',
       flex: 1,
       alignItems: 'center',
       justifyContent: 'center',
-      opacity: (t.vars || t).palette.action.disabledOpacity
+      opacity: _cssVariables.vars.colors.interactive.disabledOpacity
     },
     [`& .${_gridClasses.gridClasses['rowReorderCell--draggable']}`]: {
       cursor: 'move',
@@ -720,7 +710,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       alignItems: 'stretch'
     },
     [`.${_gridClasses.gridClasses.withBorderColor}`]: {
-      borderColor
+      borderColor: _cssVariables.vars.colors.border.base
     },
     [`& .${_gridClasses.gridClasses['cell--withLeftBorder']}, & .${_gridClasses.gridClasses['columnHeader--withLeftBorder']}`]: {
       borderLeftColor: 'var(--DataGrid-rowBorderColor)',
@@ -752,9 +742,9 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses['cell--pinnedLeft']}, & .${_gridClasses.gridClasses['cell--pinnedRight']}`]: {
       position: 'sticky',
       zIndex: 3,
-      background: 'var(--DataGrid-pinnedBackground)',
+      background: _cssVariables.vars.cell.background.pinned,
       '&.Mui-selected': {
-        backgroundColor: pinnedSelectedBackgroundColor
+        backgroundColor: pinnedSelectedBackground
       }
     },
     [`& .${_gridClasses.gridClasses.row}`]: {
@@ -781,16 +771,16 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       display: 'none'
     },
     [`& .${_gridClasses.gridClasses['columnHeader--dragging']}, & .${_gridClasses.gridClasses['row--dragging']}`]: {
-      background: (t.vars || t).palette.background.paper,
+      background: _cssVariables.vars.colors.background.overlay,
       padding: '0 12px',
       borderRadius: 'var(--unstable_DataGrid-radius)',
-      opacity: (t.vars || t).palette.action.disabledOpacity
+      opacity: _cssVariables.vars.colors.interactive.disabledOpacity
     },
     [`& .${_gridClasses.gridClasses['row--dragging']}`]: {
-      background: (t.vars || t).palette.background.paper,
+      background: _cssVariables.vars.colors.background.overlay,
       padding: '0 12px',
       borderRadius: 'var(--unstable_DataGrid-radius)',
-      opacity: (t.vars || t).palette.action.disabledOpacity,
+      opacity: _cssVariables.vars.colors.interactive.disabledOpacity,
       [`& .${_gridClasses.gridClasses.rowReorderCellPlaceholder}`]: {
         display: 'flex'
       }
@@ -803,7 +793,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses.treeDataGroupingCellToggle}`]: {
       flex: '0 0 28px',
       alignSelf: 'stretch',
-      marginRight: t.spacing(2)
+      marginRight: _cssVariables.vars.spacing(2)
     },
     [`& .${_gridClasses.gridClasses.treeDataGroupingCellLoadingContainer}, .${_gridClasses.gridClasses.groupingCriteriaCellLoadingContainer}`]: {
       display: 'flex',
@@ -819,7 +809,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses.groupingCriteriaCellToggle}`]: {
       flex: '0 0 28px',
       alignSelf: 'stretch',
-      marginRight: t.spacing(2)
+      marginRight: _cssVariables.vars.spacing(2)
     },
     /* ScrollbarFiller styles */
     [`.${_gridClasses.gridClasses.scrollbarFiller}`]: {
@@ -832,7 +822,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
         borderBottom: '1px solid var(--DataGrid-rowBorderColor)'
       },
       [`&.${_gridClasses.gridClasses['scrollbarFiller--pinnedRight']}`]: {
-        backgroundColor: 'var(--DataGrid-pinnedBackground)',
+        backgroundColor: _cssVariables.vars.cell.background.pinned,
         position: 'sticky',
         right: 0
       }
@@ -859,22 +849,9 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.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 = (0, _styles.decomposeColor)(background);
-  const overlayColor = (0, _styles.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 (0, _styles.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/components/containers/GridToolbarContainer.js

@@ -14,6 +14,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
+var _cssVariables = require("../../constants/cssVariables");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -31,15 +32,13 @@ const GridToolbarContainerRoot = (0, _system.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: _cssVariables.vars.spacing(1),
+  padding: _cssVariables.vars.spacing(0.5, 0.5, 0)
+});
 const GridToolbarContainer = exports.GridToolbarContainer = (0, _forwardRef.forwardRef)(function GridToolbarContainer(props, ref) {
   const {
       className,

package/components/menu/GridMenu.js

@@ -13,6 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
 var _styles = require("@mui/material/styles");
+var _cssVariables = require("../../constants/cssVariables");
+var _context = require("../../utils/css/context");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
@@ -31,14 +33,12 @@ const useUtilityClasses = ownerState => {
 const GridMenuRoot = (0, _styles.styled)(_assert.NotRendered, {
   name: 'MuiDataGrid',
   slot: 'Menu'
-})(({
-  theme
-}) => ({
-  zIndex: theme.zIndex.modal,
+})({
+  zIndex: _cssVariables.vars.zIndex.menu,
   [`& .${_gridClasses.gridClasses.menuList}`]: {
     outline: 0
   }
-}));
+});
 function GridMenu(props) {
   const {
       open,
@@ -53,6 +53,7 @@ function GridMenu(props) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
+  const variablesClass = (0, _context.useCSSVariablesClass)();
   const savedFocusRef = React.useRef(null);
   (0, _utils.unstable_useEnhancedEffect)(() => {
     if (open) {
@@ -77,7 +78,7 @@ function GridMenu(props) {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridMenuRoot, (0, _extends2.default)({
     as: rootProps.slots.basePopper,
-    className: (0, _clsx.default)(classes.root, className),
+    className: (0, _clsx.default)(classes.root, className, variablesClass),
     ownerState: rootProps,
     open: open,
     target: target,

package/components/menu/columnMenu/GridColumnHeaderMenu.js

@@ -9,7 +9,8 @@ exports.GridColumnHeaderMenu = GridColumnHeaderMenu;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementType"));
 var _useGridApiContext = require("../../../hooks/utils/useGridApiContext");
 var _GridMenu = require("../GridMenu");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -25,7 +26,7 @@ function GridColumnHeaderMenu({
 }) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const colDef = apiRef.current.getColumn(field);
-  const hideMenu = (0, _utils.unstable_useEventCallback)(event => {
+  const hideMenu = (0, _useEventCallback.default)(event => {
     if (event) {
       // Prevent triggering the sorting
       event.stopPropagation();
@@ -65,5 +66,5 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaderMenu.propTypes = {
   field: _propTypes.default.string.isRequired,
   onExited: _propTypes.default.func,
   open: _propTypes.default.bool.isRequired,
-  target: _utils.HTMLElementType
+  target: _HTMLElementType.default
 } : void 0;

package/components/panel/GridPanel.js

@@ -14,8 +14,9 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
 var _utils = require("@mui/utils");
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
+var _cssVariables = require("../../constants/cssVariables");
+var _context = require("../../utils/css/context");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _assert = require("../../utils/assert");
@@ -24,25 +25,23 @@ const _excluded = ["children", "className", "classes"];
 const gridPanelClasses = exports.gridPanelClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['panel', 'paper']);
 const GridPanelRoot = (0, _styles.styled)(_assert.NotRendered, {
   name: 'MuiDataGrid',
-  slot: 'Panel'
-})(({
-  theme
-}) => ({
-  zIndex: theme.zIndex.modal
-}));
-const GridPaperRoot = (0, _styles.styled)(_Paper.default, {
+  slot: 'panel'
+})({
+  zIndex: _cssVariables.vars.zIndex.panel
+});
+const GridPanelContent = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'Paper'
-})(({
-  theme
-}) => ({
-  backgroundColor: (theme.vars || theme).palette.background.paper,
+  slot: 'panelContent'
+})({
+  backgroundColor: _cssVariables.vars.colors.background.overlay,
+  borderRadius: _cssVariables.vars.radius.base,
+  boxShadow: _cssVariables.vars.shadows.overlay,
   minWidth: 300,
   maxHeight: 450,
   display: 'flex',
-  maxWidth: `calc(100vw - ${theme.spacing(0.5)})`,
+  maxWidth: `calc(100vw - ${_cssVariables.vars.spacing(0.5)})`,
   overflow: 'auto'
-}));
+});
 const GridPanel = exports.GridPanel = (0, _forwardRef.forwardRef)((props, ref) => {
   const {
       children,
@@ -53,6 +52,7 @@ const GridPanel = exports.GridPanel = (0, _forwardRef.forwardRef)((props, ref) =
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = gridPanelClasses;
   const [isPlaced, setIsPlaced] = React.useState(false);
+  const variablesClass = (0, _context.useCSSVariablesClass)();
   const onDidShow = (0, _useEventCallback.default)(() => setIsPlaced(true));
   const onDidHide = (0, _useEventCallback.default)(() => setIsPlaced(false));
   const handleClickAway = (0, _useEventCallback.default)(() => {
@@ -77,7 +77,7 @@ const GridPanel = exports.GridPanel = (0, _forwardRef.forwardRef)((props, ref) =
     as: rootProps.slots.basePopper,
     ownerState: rootProps,
     placement: "bottom-start",
-    className: (0, _clsx.default)(classes.panel, className),
+    className: (0, _clsx.default)(classes.panel, className, variablesClass),
     target: target,
     flip: true,
     onDidShow: onDidShow,
@@ -85,14 +85,12 @@ const GridPanel = exports.GridPanel = (0, _forwardRef.forwardRef)((props, ref) =
     onClickAway: handleClickAway,
     clickAwayMouseEvent: "onPointerUp",
     clickAwayTouchEvent: false,
-    focusTrap: true,
-    focusTrapEnabled: true
+    focusTrap: true
   }, other, rootProps.slotProps?.basePopper, {
     ref: ref,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPaperRoot, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelContent, {
       className: classes.paper,
       ownerState: rootProps,
-      elevation: 8,
       onKeyDown: handleKeyDown,
       children: isPlaced && children
     })

package/components/panel/GridPanelContent.js

@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _cssVariables = require("../../constants/cssVariables");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -28,19 +29,16 @@ const useUtilityClasses = ownerState => {
 };
 const GridPanelContentRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'PanelContent',
-  overridesResolver: (props, styles) => styles.panelContent
-})(({
-  theme
-}) => ({
+  slot: 'PanelContent'
+})({
   display: 'flex',
   flexDirection: 'column',
   overflow: 'auto',
   flex: '1 1',
   maxHeight: 400,
-  padding: theme.spacing(2.5, 1.5, 2, 1),
-  gap: theme.spacing(2.5)
-}));
+  padding: _cssVariables.vars.spacing(2.5, 1.5, 2, 1),
+  gap: _cssVariables.vars.spacing(2.5)
+});
 function GridPanelContent(props) {
   const {
       className

package/components/panel/GridPanelFooter.js

@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _cssVariables = require("../../constants/cssVariables");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -30,14 +31,12 @@ const GridPanelFooterRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'PanelFooter',
   overridesResolver: (props, styles) => styles.panelFooter
-})(({
-  theme
-}) => ({
-  padding: theme.spacing(1),
+})({
+  padding: _cssVariables.vars.spacing(1),
   display: 'flex',
   justifyContent: 'space-between',
-  borderTop: `1px solid ${theme.palette.divider}`
-}));
+  borderTop: `1px solid ${_cssVariables.vars.colors.border.base}`
+});
 function GridPanelFooter(props) {
   const {
       className