[DataGrid] Fix ownerState undefined in theme style overrides (#7757)

Co-authored-by: Lola Ignatova (contractor) <lola.ignatova@macys.com>
mui · Feb 16, 2023 · e7cc510 · e7cc510
1 parent e6f9c34
commit e7cc510
Show file tree

Hide file tree

Showing 36 changed files with 350 additions and 197 deletions.
diff --git a/packages/grid/x-data-grid-premium/src/components/GridAggregationHeader.tsx b/packages/grid/x-data-grid-premium/src/components/GridAggregationHeader.tsx
@@ -16,11 +16,10 @@ import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { DataGridPremiumProcessedProps } from '../models/dataGridPremiumProps';
 
-interface OwnerState {
- classes: DataGridPremiumProcessedProps['classes'];
+type OwnerState = DataGridPremiumProcessedProps & {
  headerHeight: number;
  colDef: GridColDef;
-}
+};
 
 const GridAggregationHeaderRoot = styled(Box, {
  name: 'MuiDataGrid',
@@ -75,7 +74,7 @@ const GridAggregationHeader = (props: GridColumnHeaderParams) => {
  const rootProps = useGridRootProps();
  const headerHeight = useGridSelector(apiRef, gridDensityHeaderHeightSelector);
 
- const ownerState = { classes: rootProps.classes, headerHeight, colDef };
+ const ownerState = { ...rootProps, headerHeight, colDef };
  const classes = useUtilityClasses(ownerState);
 
  if (!aggregation) {

diff --git a/packages/grid/x-data-grid-premium/src/components/GridFooterCell.tsx b/packages/grid/x-data-grid-premium/src/components/GridFooterCell.tsx
@@ -20,9 +20,7 @@ interface GridFooterCellProps extends GridRenderCellParams {
  sx?: SxProps<Theme>;
 }
 
-interface OwnerState {
- classes: DataGridPremiumProcessedProps['classes'];
-}
+type OwnerState = DataGridPremiumProcessedProps;
 
 const useUtilityClasses = (ownerState: OwnerState) => {
  const { classes } = ownerState;
@@ -54,7 +52,7 @@ const GridFooterCell = (props: GridFooterCellProps) => {
  } = props;
  const rootProps = useGridRootProps();
 
- const ownerState = { classes: rootProps.classes };
+ const ownerState = rootProps;
  const classes = useUtilityClasses(ownerState);
 
  return (

diff --git a/packages/grid/x-data-grid-pro/src/components/DataGridProColumnHeaders.tsx b/packages/grid/x-data-grid-pro/src/components/DataGridProColumnHeaders.tsx
@@ -25,8 +25,7 @@ import {
 } from '../hooks/features/columnPinning';
 import { filterColumns } from './DataGridProVirtualScroller';
 
-type OwnerState = {
- classes?: DataGridProProcessedProps['classes'];
+type OwnerState = DataGridProProcessedProps & {
  leftPinnedColumns: GridPinnedColumns['left'];
  rightPinnedColumns: GridPinnedColumns['right'];
 };
@@ -71,24 +70,26 @@ const GridColumnHeadersPinnedColumnHeaders = styled('div', {
  { [`&.${gridClasses['pinnedColumnHeaders--right']}`]: styles['pinnedColumnHeaders--right'] },
  styles.pinnedColumnHeaders,
  ],
-})<{ ownerState: GridColumnHeadersPinnedColumnHeadersProps }>(({ theme, ownerState }) => ({
- position: 'absolute',
- overflow: 'hidden',
- height: '100%',
- zIndex: 1,
- display: 'flex',
- flexDirection: 'column',
- boxShadow: theme.shadows[2],
- backgroundColor: theme.palette.background.default,
- ...(theme.palette.mode === 'dark' && {
- backgroundImage: `linear-gradient(${alpha('#fff', getOverlayAlpha(2))}, ${alpha(
- '#fff',
- getOverlayAlpha(2),
- )})`,
+})<{ ownerState: OwnerState & GridColumnHeadersPinnedColumnHeadersProps }>(
+ ({ theme, ownerState }) => ({
+ position: 'absolute',
+ overflow: 'hidden',
+ height: '100%',
+ zIndex: 1,
+ display: 'flex',
+ flexDirection: 'column',
+ boxShadow: theme.shadows[2],
+ backgroundColor: theme.palette.background.default,
+ ...(theme.palette.mode === 'dark' && {
+ backgroundImage: `linear-gradient(${alpha('#fff', getOverlayAlpha(2))}, ${alpha(
+ '#fff',
+ getOverlayAlpha(2),
+ )})`,
+ }),
+ ...(ownerState.side === GridPinnedPosition.left && { left: 0 }),
+ ...(ownerState.side === GridPinnedPosition.right && { right: 0 }),
  }),
- ...(ownerState.side === GridPinnedPosition.left && { left: 0 }),
- ...(ownerState.side === GridPinnedPosition.right && { right: 0 }),
-}));
+);
 
 interface DataGridProColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement> {
  innerRef?: React.Ref<HTMLDivElement>;
@@ -133,7 +134,7 @@ export const DataGridProColumnHeaders = React.forwardRef<
  minColumnIndex: leftPinnedColumns.length,
  });
 
- const ownerState = { leftPinnedColumns, rightPinnedColumns, classes: rootProps.classes };
+ const ownerState = { ...rootProps, leftPinnedColumns, rightPinnedColumns };
  const classes = useUtilityClasses(ownerState);
 
  const leftRenderContext =
@@ -165,7 +166,7 @@ export const DataGridProColumnHeaders = React.forwardRef<
  {leftRenderContext && (
  <GridColumnHeadersPinnedColumnHeaders
  className={classes.leftPinnedColumns}
- ownerState={{ side: GridPinnedPosition.left }}
+ ownerState={{ ...ownerState, side: GridPinnedPosition.left }}
  {...pinnedColumnHeadersProps}
  >
  {getColumnGroupHeaders({
@@ -197,7 +198,7 @@ export const DataGridProColumnHeaders = React.forwardRef<
  </GridColumnHeadersInner>
  {rightRenderContext && (
  <GridColumnHeadersPinnedColumnHeaders
- ownerState={{ side: GridPinnedPosition.right }}
+ ownerState={{ ...ownerState, side: GridPinnedPosition.right }}
  className={classes.rightPinnedColumns}
  style={{ paddingRight: scrollbarSize }}
  {...pinnedColumnHeadersProps}

diff --git a/packages/grid/x-data-grid-pro/src/components/DataGridProVirtualScroller.tsx b/packages/grid/x-data-grid-pro/src/components/DataGridProVirtualScroller.tsx
@@ -61,9 +61,7 @@ export const filterColumns = (
  return [leftPinnedColumns, rightPinnedColumns];
 };
 
-type OwnerState = {
- classes: DataGridProProcessedProps['classes'];
-};
+type OwnerState = DataGridProProcessedProps;
 
 const useUtilityClasses = (ownerState: OwnerState) => {
  const { classes } = ownerState;
@@ -104,7 +102,7 @@ const VirtualScrollerDetailPanels = styled('div', {
  name: 'MuiDataGrid',
  slot: 'DetailPanels',
  overridesResolver: (props, styles) => styles.detailPanels,
-})({
+})<{ ownerState: OwnerState }>({
  position: 'relative',
 });
 
@@ -121,7 +119,7 @@ const VirtualScrollerPinnedColumns = styled('div', {
  { [`&.${gridClasses['pinnedColumns--right']}`]: styles['pinnedColumns--right'] },
  styles.pinnedColumns,
  ],
-})<{ ownerState: VirtualScrollerPinnedColumnsProps }>(({ theme, ownerState }) => {
+})<{ ownerState: OwnerState & VirtualScrollerPinnedColumnsProps }>(({ theme, ownerState }) => {
  const boxShadowColor = getBoxShadowColor(theme);
  return {
  position: 'sticky',
@@ -142,6 +140,11 @@ const VirtualScrollerPinnedColumns = styled('div', {
  };
 });
 
+enum PinnedRowsPosition {
+ top = 'top',
+ bottom = 'bottom',
+}
+
 const VirtualScrollerPinnedRows = styled('div', {
  name: 'MuiDataGrid',
  slot: 'PinnedRows',
@@ -150,19 +153,19 @@ const VirtualScrollerPinnedRows = styled('div', {
  { [`&.${gridClasses['pinnedRows--bottom']}`]: styles['pinnedRows--bottom'] },
  styles.pinnedRows,
  ],
-})<{ ownerState: { position: 'top' | 'bottom' } }>(({ theme, ownerState }) => {
+})<{ ownerState: OwnerState & { position: PinnedRowsPosition } }>(({ theme, ownerState }) => {
  const boxShadowColor = getBoxShadowColor(theme);
  return {
  position: 'sticky',
  // should be above the detail panel
  zIndex: 3,
  backgroundColor: theme.palette.background.default,
  ...(theme.palette.mode === 'dark' && { backgroundImage: darkModeBackgroundImage }),
- ...(ownerState.position === 'top' && {
+ ...(ownerState.position === PinnedRowsPosition.top && {
  top: 0,
  boxShadow: `0px 3px 4px -2px ${boxShadowColor}`,
  }),
- ...(ownerState.position === 'bottom' && {
+ ...(ownerState.position === PinnedRowsPosition.bottom && {
  boxShadow: `0px -3px 4px -2px ${boxShadowColor}`,
  bottom: 0,
  }),
@@ -232,13 +235,7 @@ const DataGridProVirtualScroller = React.forwardRef<
  const topPinnedRowsData = React.useMemo(() => pinnedRows?.top || [], [pinnedRows?.top]);
  const bottomPinnedRowsData = React.useMemo(() => pinnedRows?.bottom || [], [pinnedRows?.bottom]);
 
- const ownerState = {
- classes: rootProps.classes,
- leftPinnedColumns,
- rightPinnedColumns,
- topPinnedRowsCount: topPinnedRowsData.length,
- bottomPinnedRowsCount: bottomPinnedRowsData.length,
- };
+ const ownerState = rootProps;
  const classes = useUtilityClasses(ownerState);
 
  const {
@@ -361,14 +358,14 @@ const DataGridProVirtualScroller = React.forwardRef<
  {topPinnedRowsData.length > 0 ? (
  <VirtualScrollerPinnedRows
  className={classes.topPinnedRows}
- ownerState={{ position: 'top' }}
+ ownerState={{ ...ownerState, position: PinnedRowsPosition.top }}
  style={{ width: contentProps.style.width, height: pinnedRowsHeight.top }}
  role="rowgroup"
  >
  {leftRenderContext && (
  <VirtualScrollerPinnedColumns
  className={classes.leftPinnedColumns}
- ownerState={{ side: GridPinnedPosition.left }}
+ ownerState={{ ...ownerState, side: GridPinnedPosition.left }}
  >
  {getRows({
  renderContext: leftRenderContext,
@@ -390,7 +387,7 @@ const DataGridProVirtualScroller = React.forwardRef<
  {rightRenderContext && (
  <VirtualScrollerPinnedColumns
  className={classes.rightPinnedColumns}
- ownerState={{ side: GridPinnedPosition.right }}
+ ownerState={{ ...ownerState, side: GridPinnedPosition.right }}
  >
  {getRows({
  renderContext: rightRenderContext,
@@ -409,7 +406,7 @@ const DataGridProVirtualScroller = React.forwardRef<
  <VirtualScrollerPinnedColumns
  ref={leftColumns}
  className={classes.leftPinnedColumns}
- ownerState={{ side: GridPinnedPosition.left }}
+ ownerState={{ ...ownerState, side: GridPinnedPosition.left }}
  style={pinnedColumnsStyle}
  >
  {getRows({
@@ -428,7 +425,7 @@ const DataGridProVirtualScroller = React.forwardRef<
  {rightRenderContext && (
  <VirtualScrollerPinnedColumns
  ref={rightColumns}
- ownerState={{ side: GridPinnedPosition.right }}
+ ownerState={{ ...ownerState, side: GridPinnedPosition.right }}
  className={classes.rightPinnedColumns}
  style={pinnedColumnsStyle}
  >
@@ -443,22 +440,22 @@ const DataGridProVirtualScroller = React.forwardRef<
  </VirtualScrollerPinnedColumns>
  )}
  {detailPanels.length > 0 && (
- <VirtualScrollerDetailPanels className={classes.detailPanels}>
+ <VirtualScrollerDetailPanels className={classes.detailPanels} ownerState={ownerState}>
  {detailPanels}
  </VirtualScrollerDetailPanels>
  )}
  </GridVirtualScrollerContent>
  {bottomPinnedRowsData.length > 0 ? (
  <VirtualScrollerPinnedRows
  className={classes.bottomPinnedRows}
- ownerState={{ position: 'bottom' }}
+ ownerState={{ ...ownerState, position: PinnedRowsPosition.bottom }}
  style={{ width: contentProps.style.width, height: pinnedRowsHeight.bottom }}
  role="rowgroup"
  >
  {leftRenderContext && (
  <VirtualScrollerPinnedColumns
  className={classes.leftPinnedColumns}
- ownerState={{ side: GridPinnedPosition.left }}
+ ownerState={{ ...ownerState, side: GridPinnedPosition.left }}
  >
  {getRows({
  renderContext: leftRenderContext,
@@ -481,7 +478,7 @@ const DataGridProVirtualScroller = React.forwardRef<
  {rightRenderContext && (
  <VirtualScrollerPinnedColumns
  className={classes.rightPinnedColumns}
- ownerState={{ side: GridPinnedPosition.right }}
+ ownerState={{ ...ownerState, side: GridPinnedPosition.right }}
  >
  {getRows({
  renderContext: rightRenderContext,

diff --git a/packages/grid/x-data-grid-pro/src/components/GridDetailPanel.tsx b/packages/grid/x-data-grid-pro/src/components/GridDetailPanel.tsx
@@ -3,12 +3,16 @@ import Box from '@mui/material/Box';
 import { styled, SxProps, Theme } from '@mui/material/styles';
 import { GridRowId } from '@mui/x-data-grid';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { DataGridProProcessedProps } from '../models/dataGridProProps';
+
+type OwnerState = DataGridProProcessedProps;
 
 const DetailPanel = styled(Box, {
  name: 'MuiDataGrid',
  slot: 'DetailPanel',
  overridesResolver: (props, styles) => styles.detailPanel,
-})(({ theme }) => ({
+})<{ ownerState: OwnerState }>(({ theme }) => ({
  zIndex: 2,
  width: '100%',
  position: 'absolute',
@@ -35,6 +39,8 @@ const GridDetailPanel = (props: GridDetailPanelProps) => {
  const { rowId, height, style: styleProp = {}, ...other } = props;
  const apiRef = useGridApiContext();
  const ref = React.useRef<HTMLDivElement>();
+ const rootProps = useGridRootProps();
+ const ownerState = rootProps;
 
  React.useLayoutEffect(() => {
  if (height === 'auto' && ref.current && typeof ResizeObserver === 'undefined') {
@@ -66,7 +72,7 @@ const GridDetailPanel = (props: GridDetailPanelProps) => {
 
  const style = { ...styleProp, height };
 
- return <DetailPanel ref={ref} style={style} {...other} />;
+ return <DetailPanel ref={ref} ownerState={ownerState} style={style} {...other} />;
 };
 
 export { GridDetailPanel };
diff --git a/packages/grid/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx
@@ -230,4 +230,29 @@ describe('<DataGridPro /> - Layout', () => {
  color: 'rgb(0, 0, 255)',
  });
  });
+
+ it('should have ownerState in the theme style overrides', () => {
+ expect(() =>
+ render(
+ <ThemeProvider
+ theme={createTheme({
+ components: {
+ MuiDataGrid: {
+ styleOverrides: {
+ root: ({ ownerState }) => ({
+ // test that ownerState is not undefined
+ ...(ownerState.columns && {}),
+ }),
+ },
+ },
+ },
+ })}
+ >
+ <div style={{ width: 300, height: 300 }}>
+ <DataGridPro {...baselineProps} />
+ </div>
+ </ThemeProvider>,
+ ),
+ ).not.to.throw();
+ });
 });
diff --git a/packages/grid/x-data-grid/src/components/GridRowCount.tsx b/packages/grid/x-data-grid/src/components/GridRowCount.tsx
@@ -18,7 +18,7 @@ type GridRowCountProps = React.HTMLAttributes<HTMLDivElement> &
  sx?: SxProps<Theme>;
  };
 
-type OwnerState = { classes: DataGridProcessedProps['classes'] };
+type OwnerState = DataGridProcessedProps;
 
 const useUtilityClasses = (ownerState: OwnerState) => {
  const { classes } = ownerState;
@@ -34,7 +34,7 @@ const GridRowCountRoot = styled('div', {
  name: 'MuiDataGrid',
  slot: 'RowCount',
  overridesResolver: (props, styles) => styles.rowCount,
-})(({ theme }) => ({
+})<{ ownerState: OwnerState }>(({ theme }) => ({
  alignItems: 'center',
  display: 'flex',
  margin: theme.spacing(0, 2),
@@ -46,8 +46,7 @@ const GridRowCount = React.forwardRef<HTMLDivElement, GridRowCountProps>(functio
 ) {
  const { className, rowCount, visibleRowCount, ...other } = props;
  const apiRef = useGridApiContext();
- const rootProps = useGridRootProps();
- const ownerState = { classes: rootProps.classes };
+ const ownerState = useGridRootProps();
  const classes = useUtilityClasses(ownerState);
 
  if (rowCount === 0) {
@@ -60,7 +59,12 @@ const GridRowCount = React.forwardRef<HTMLDivElement, GridRowCountProps>(functio
  : rowCount.toLocaleString();
 
  return (
- <GridRowCountRoot ref={ref} className={clsx(classes.root, className)} {...other}>
+ <GridRowCountRoot
+ ref={ref}
+ className={clsx(classes.root, className)}
+ ownerState={ownerState}
+ {...other}
+ >
  {apiRef.current.getLocaleText('footerTotalRows')} {text}
  </GridRowCountRoot>
  );