[DataGrid] Refactor: remove material containers (#16633)

mui · Feb 19, 2025 · 75ce81e · 75ce81e
1 parent eb71710
commit 75ce81e
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 50 deletions.
diff --git a/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md b/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md
@@ -188,6 +188,7 @@ Below are described the steps you need to make to migrate from v7 to v8.
 - The `baseFormControl` slot was removed.
 - The `baseInputLabel` slot was removed.
 - The `baseInputAdornment` slot was removed.
+- The `paper` slot has been renamed to `panelContent`.
 
 <!-- ### Editing
 

diff --git a/packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx b/packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { RefObject } from '@mui/x-internals/types';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import Box from '@mui/material/Box';
 import {
   useGridPrivateApiContext,
   gridDataSourceErrorSelector,
@@ -121,10 +120,10 @@ export function GridDataSourceGroupingCriteriaCell(props: GridGroupingCriteriaCe
   }
 
   return (
-    <Box
+    <div
       className={classes.root}
-      sx={{
-        ml:
+      style={{
+        marginLeft:
           rootProps.rowGroupingColumnMode === 'multiple'
             ? 0
             : `calc(var(--DataGrid-cellOffsetMultiplier) * ${vars.spacing(rowNode.depth)})`,
@@ -143,6 +142,6 @@ export function GridDataSourceGroupingCriteriaCell(props: GridGroupingCriteriaCe
       {!hideDescendantCount && descendantCount > 0 ? (
         <span style={{ whiteSpace: 'pre' }}> ({descendantCount})</span>
       ) : null}
-    </Box>
+    </div>
   );
 }
diff --git a/packages/x-data-grid-premium/src/components/GridGroupingColumnLeafCell.tsx b/packages/x-data-grid-premium/src/components/GridGroupingColumnLeafCell.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
 import { vars } from '@mui/x-data-grid/internals';
 import { GridRenderCellParams } from '@mui/x-data-grid-pro';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
@@ -9,20 +8,16 @@ function GridGroupingColumnLeafCell(props: GridRenderCellParams) {
   const rootProps = useGridRootProps();
 
   return (
-    <Box
-      sx={[
-        rootProps.rowGroupingColumnMode === 'multiple'
-          ? {
-              ml: 1,
-            }
-          : {
-              ml: `calc(var(--DataGrid-cellOffsetMultiplier) * var(--depth) * ${vars.spacing(1)})`,
-            },
-      ]}
-      style={{ '--depth': rowNode.depth } as any}
+    <div
+      style={{
+        marginLeft:
+          rootProps.rowGroupingColumnMode === 'multiple'
+            ? vars.spacing(1)
+            : `calc(var(--DataGrid-cellOffsetMultiplier) * ${vars.spacing(rowNode.depth)})`,
+      }}
     >
       {props.formattedValue ?? props.value}
-    </Box>
+    </div>
   );
 }
 

diff --git a/packages/x-data-grid-premium/src/components/GridGroupingCriteriaCell.tsx b/packages/x-data-grid-premium/src/components/GridGroupingCriteriaCell.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
-import Box from '@mui/material/Box';
 import { vars } from '@mui/x-data-grid/internals';
 import {
   useGridSelector,
@@ -74,18 +73,14 @@ export function GridGroupingCriteriaCell(props: GridGroupingCriteriaCellProps) {
   }
 
   return (
-    <Box
+    <div
       className={classes.root}
-      sx={[
-        rootProps.rowGroupingColumnMode === 'multiple'
-          ? {
-              ml: 0,
-            }
-          : {
-              ml: `calc(var(--DataGrid-cellOffsetMultiplier) * var(--depth) * ${vars.spacing(1)})`,
-            },
-      ]}
-      style={{ '--depth': rowNode.depth } as any}
+      style={{
+        marginLeft:
+          rootProps.rowGroupingColumnMode === 'multiple'
+            ? 0
+            : `calc(var(--DataGrid-cellOffsetMultiplier) * ${rowNode.depth} * ${vars.spacing(1)})`,
+      }}
     >
       <div className={classes.toggle}>
         {filteredDescendantCount > 0 && (
@@ -109,6 +104,6 @@ export function GridGroupingCriteriaCell(props: GridGroupingCriteriaCellProps) {
       {!hideDescendantCount && filteredDescendantCount > 0 ? (
         <span style={{ whiteSpace: 'pre' }}> ({filteredDescendantCount})</span>
       ) : null}
-    </Box>
+    </div>
   );
 }
diff --git a/packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx b/packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx
@@ -1,14 +1,13 @@
 import * as React from 'react';
 import { RefObject } from '@mui/x-internals/types';
 import composeClasses from '@mui/utils/composeClasses';
-import Box from '@mui/material/Box';
 import {
   getDataGridUtilityClass,
   GridRenderCellParams,
   GridDataSourceGroupNode,
   useGridSelector,
 } from '@mui/x-data-grid';
-import { gridRowSelector } from '@mui/x-data-grid/internals';
+import { vars, gridRowSelector } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
 import { DataGridProProcessedProps } from '../models/dataGridProProps';
@@ -113,7 +112,10 @@ export function GridDataSourceTreeDataGroupingCell(props: GridTreeDataGroupingCe
   }
 
   return (
-    <Box className={classes.root} sx={{ ml: rowNode.depth * offsetMultiplier }}>
+    <div
+      className={classes.root}
+      style={{ marginLeft: vars.spacing(rowNode.depth * offsetMultiplier) }}
+    >
       <div className={classes.toggle}>
         <GridTreeDataGroupingCellIcon
           id={id}
@@ -127,6 +129,6 @@ export function GridDataSourceTreeDataGroupingCell(props: GridTreeDataGroupingCe
         {formattedValue === undefined ? rowNode.groupingKey : formattedValue}
         {!hideDescendantCount && descendantCount > 0 ? ` (${descendantCount})` : ''}
       </span>
-    </Box>
+    </div>
   );
 }
diff --git a/packages/x-data-grid-pro/src/components/GridTreeDataGroupingCell.tsx b/packages/x-data-grid-pro/src/components/GridTreeDataGroupingCell.tsx
@@ -1,14 +1,14 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import Box from '@mui/material/Box';
 import {
   useGridSelector,
   gridFilteredDescendantCountLookupSelector,
   getDataGridUtilityClass,
   GridRenderCellParams,
   GridGroupNode,
 } from '@mui/x-data-grid';
+import { vars } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { DataGridProProcessedProps } from '../models/dataGridProProps';
@@ -59,7 +59,10 @@ function GridTreeDataGroupingCell(props: GridTreeDataGroupingCellProps) {
   };
 
   return (
-    <Box className={classes.root} sx={{ ml: rowNode.depth * offsetMultiplier }}>
+    <div
+      className={classes.root}
+      style={{ marginLeft: vars.spacing(rowNode.depth * offsetMultiplier) }}
+    >
       <div className={classes.toggle}>
         {filteredDescendantCount > 0 && (
           <rootProps.slots.baseIconButton
@@ -81,7 +84,7 @@ function GridTreeDataGroupingCell(props: GridTreeDataGroupingCellProps) {
         {formattedValue === undefined ? rowNode.groupingKey : formattedValue}
         {!hideDescendantCount && filteredDescendantCount > 0 ? ` (${filteredDescendantCount})` : ''}
       </span>
-    </Box>
+    </div>
   );
 }
 

diff --git a/packages/x-data-grid/src/components/panel/GridPanel.tsx b/packages/x-data-grid/src/components/panel/GridPanel.tsx
@@ -4,7 +4,6 @@ import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
 import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
 import useEventCallback from '@mui/utils/useEventCallback';
-import Paper from '@mui/material/Paper';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { vars } from '../../constants/cssVariables';
 import { useCSSVariablesClass } from '../../utils/css/context';
@@ -41,16 +40,18 @@ export const gridPanelClasses = generateUtilityClasses<keyof GridPanelClasses>('
 
 const GridPanelRoot = styled(NotRendered<GridSlotProps['basePopper']>, {
   name: 'MuiDataGrid',
-  slot: 'Panel',
+  slot: 'panel',
 })<{ ownerState: OwnerState }>({
   zIndex: vars.zIndex.panel,
 });
 
-const GridPaperRoot = styled(Paper, {
+const GridPanelContent = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'Paper',
+  slot: 'panelContent',
 })<{ ownerState: OwnerState }>({
   backgroundColor: vars.colors.background.overlay,
+  borderRadius: vars.radius.base,
+  boxShadow: vars.shadows.overlay,
   minWidth: 300,
   maxHeight: 450,
   display: 'flex',
@@ -114,14 +115,9 @@ const GridPanel = forwardRef<HTMLElement, GridPanelProps>((props, ref) => {
       {...rootProps.slotProps?.basePopper}
       ref={ref}
     >
-      <GridPaperRoot
-        className={classes.paper}
-        ownerState={rootProps}
-        elevation={8}
-        onKeyDown={handleKeyDown}
-      >
+      <GridPanelContent className={classes.paper} ownerState={rootProps} onKeyDown={handleKeyDown}>
         {isPlaced && children}
-      </GridPaperRoot>
+      </GridPanelContent>
     </GridPanelRoot>
   );
 });

diff --git a/packages/x-data-grid/src/constants/cssVariables.ts b/packages/x-data-grid/src/constants/cssVariables.ts
@@ -99,6 +99,7 @@ const keys = {
   },
   shadows: {
     base: '--DataGrid-t-shadows-base',
+    overlay: '--DataGrid-t-shadows-overlay',
   },
   zIndex: {
     panel: '--DataGrid-t-z-index-panel',

diff --git a/packages/x-data-grid/src/material/variables.ts b/packages/x-data-grid/src/material/variables.ts
@@ -35,7 +35,10 @@ function transformTheme(t: Theme): GridCSSVariablesInterface {
 
     [k.colors.border.base]: borderColor,
     [k.colors.background.base]: backgroundBase,
-    [k.colors.background.overlay]: t.palette.background.paper,
+    [k.colors.background.overlay]:
+      t.palette.mode === 'dark'
+        ? `color-mix(in srgb, ${t.palette.background.paper} 95%, #fff)`
+        : t.palette.background.paper,
     [k.colors.background.backdrop]: backgroundBackdrop,
     [k.colors.foreground.base]: t.palette.text.primary,
     [k.colors.foreground.muted]: t.palette.text.secondary,
@@ -81,6 +84,7 @@ function transformTheme(t: Theme): GridCSSVariablesInterface {
     [k.transitions.duration.long]: `${t.transitions.duration.standard}ms`,
 
     [k.shadows.base]: t.shadows[2],
+    [k.shadows.overlay]: t.shadows[8],
 
     [k.zIndex.panel]: t.zIndex.modal,
     [k.zIndex.menu]: t.zIndex.modal,