Skip to content

Commit

Permalink
[DataGrid] Add missing style overrides (#16272)
Browse files Browse the repository at this point in the history
  • Loading branch information
@KenanYusuf
KenanYusuf authored Jan 27, 2025
1 parent 567ca4f commit 6b0c8f4
Show file tree
Hide file tree
Showing 6 changed files with 151 additions and 68 deletions.
10 changes: 9 additions & 1 deletion packages/x-data-grid-premium/src/components/GridAggregationHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,15 @@ interface OwnerState extends DataGridPremiumProcessedProps {
const GridAggregationHeaderRoot = styled('div', {
name: 'MuiDataGrid',
slot: 'AggregationColumnHeader',
overridesResolver: (_, styles) => styles.aggregationColumnHeader,
overridesResolver: (props, styles) => {
const { ownerState } = props;
return [
styles.aggregationColumnHeader,
ownerState.colDef.headerAlign === 'left' && styles['aggregationColumnHeader--alignLeft'],
ownerState.colDef.headerAlign === 'center' && styles['aggregationColumnHeader--alignCenter'],
ownerState.colDef.headerAlign === 'right' && styles['aggregationColumnHeader--alignRight'],
];
},
})<{ ownerState: OwnerState }>({
display: 'flex',
flexDirection: 'column',
Expand Down
20 changes: 13 additions & 7 deletions packages/x-data-grid-premium/src/components/promptControl/GridToolbarPromptControl.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,12 @@ import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
import { PromptResponse } from '../../hooks/features/promptControl/types';
import { RecordButton, BrowserSpeechRecognition } from './RecordButton';

type OwnerState = DataGridPremiumProcessedProps;
type OwnerState = Pick<DataGridPremiumProcessedProps, 'classes'> & { recording: boolean };

const supportsSpeechRecognition = !!BrowserSpeechRecognition;

const useUtilityClasses = (ownerState: OwnerState, recording: boolean) => {
const { classes } = ownerState;
const useUtilityClasses = (ownerState: OwnerState) => {
const { classes, recording } = ownerState;

const slots = {
root: ['toolbarPromptControl', recording && 'toolbarPromptControl--recording'],
Expand All @@ -40,7 +40,13 @@ const useUtilityClasses = (ownerState: OwnerState, recording: boolean) => {
const GridToolbarPromptControlRoot = styled('div', {
name: 'MuiDataGrid',
slot: 'ToolbarPromptControl',
overridesResolver: (_, styles) => styles.toolbarPromptControl,
overridesResolver: (props, styles) => {
const { ownerState } = props;
return [
styles.toolbarPromptControl,
ownerState.recording && styles['toolbarPromptControl--recording'],
];
},
})<{ ownerState: OwnerState }>({
flex: 1,
display: 'flex',
Expand Down Expand Up @@ -110,8 +116,8 @@ function GridToolbarPromptControl(props: GridToolbarPromptControlProps) {
const [error, setError] = React.useState<string | null>(null);
const [isRecording, setRecording] = React.useState(false);
const [query, setQuery] = React.useState('');

const classes = useUtilityClasses(rootProps, isRecording);
const ownerState = { classes: rootProps.classes, recording: isRecording };
const classes = useUtilityClasses(ownerState);
const examplesFromData = React.useMemo(
() => (allowDataSampling ? sampleData(apiRef) : undefined),
[apiRef, allowDataSampling],
Expand Down Expand Up @@ -211,7 +217,7 @@ function GridToolbarPromptControl(props: GridToolbarPromptControlProps) {
: apiRef.current.getLocaleText('toolbarPromptControlPlaceholder');

return (
<GridToolbarPromptControlRoot ownerState={rootProps} className={classes.root}>
<GridToolbarPromptControlRoot ownerState={ownerState} className={classes.root}>
<rootProps.slots.baseTextField
variant="outlined"
placeholder={
Expand Down
122 changes: 80 additions & 42 deletions packages/x-data-grid/src/components/containers/GridRootStyles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,86 +58,124 @@ export const GridRootStyles = styled('div', {
name: 'MuiDataGrid',
slot: 'Root',
overridesResolver: (props, styles) => [
// Root overrides
styles.root,
{ [`&.${c.autoHeight}`]: styles.autoHeight },
{ [`&.${c.aggregationColumnHeader}`]: styles.aggregationColumnHeader },
{
[`&.${c['aggregationColumnHeader--alignLeft']}`]:
styles['aggregationColumnHeader--alignLeft'],
},
{
[`&.${c['aggregationColumnHeader--alignCenter']}`]:
styles['aggregationColumnHeader--alignCenter'],
},
{
[`&.${c['aggregationColumnHeader--alignRight']}`]:
styles['aggregationColumnHeader--alignRight'],
},
{ [`&.${c.aggregationColumnHeaderLabel}`]: styles.aggregationColumnHeaderLabel },
{
[`&.${c['root--disableUserSelection']} .${c.cell}`]: styles['root--disableUserSelection'],
},
{ [`&.${c.autosizing}`]: styles.autosizing },
{ [`& .${c.editBooleanCell}`]: styles.editBooleanCell },
{ [`&.${c['root--densityStandard']}`]: styles['root--densityStandard'] },
{ [`&.${c['root--densityComfortable']}`]: styles['root--densityComfortable'] },
{ [`&.${c['root--densityCompact']}`]: styles['root--densityCompact'] },
{ [`&.${c['root--disableUserSelection']}`]: styles['root--disableUserSelection'] },
{ [`&.${c['root--noToolbar']}`]: styles['root--noToolbar'] },
{ [`&.${c.withVerticalBorder}`]: styles.withVerticalBorder },

// Child element overrides
// - Only declare overrides here for class names that are not applied to `styled` components.
// - For `styled` components, declare overrides in the component itself.
{ [`& .${c.actionsCell}`]: styles.actionsCell },
{ [`& .${c.booleanCell}`]: styles.booleanCell },
{ [`& .${c.cell}`]: styles.cell },
{ [`& .${c['cell--editable']}`]: styles['cell--editable'] },
{ [`& .${c['cell--editing']}`]: styles['cell--editing'] },
{ [`& .${c['cell--textCenter']}`]: styles['cell--textCenter'] },
{ [`& .${c['cell--textLeft']}`]: styles['cell--textLeft'] },
{ [`& .${c['cell--textRight']}`]: styles['cell--textRight'] },
{ [`& .${c['cell--rangeTop']}`]: styles['cell--rangeTop'] },
{ [`& .${c['cell--flex']}`]: styles['cell--flex'] },
{ [`& .${c['cell--pinnedLeft']}`]: styles['cell--pinnedLeft'] },
{ [`& .${c['cell--pinnedRight']}`]: styles['cell--pinnedRight'] },
{ [`& .${c['cell--rangeBottom']}`]: styles['cell--rangeBottom'] },
{ [`& .${c['cell--rangeLeft']}`]: styles['cell--rangeLeft'] },
{ [`& .${c['cell--rangeRight']}`]: styles['cell--rangeRight'] },
{ [`& .${c['cell--rangeTop']}`]: styles['cell--rangeTop'] },
{ [`& .${c['cell--selectionMode']}`]: styles['cell--selectionMode'] },
{ [`& .${c['cell--textCenter']}`]: styles['cell--textCenter'] },
{ [`& .${c['cell--textLeft']}`]: styles['cell--textLeft'] },
{ [`& .${c['cell--textRight']}`]: styles['cell--textRight'] },
{ [`& .${c['cell--withLeftBorder']}`]: styles['cell--withLeftBorder'] },
{ [`& .${c['cell--withRightBorder']}`]: styles['cell--withRightBorder'] },
{ [`& .${c.cellCheckbox}`]: styles.cellCheckbox },
{ [`& .${c.cellEmpty}`]: styles.cellEmpty },
{ [`& .${c.cellOffsetLeft}`]: styles.cellOffsetLeft },
{ [`& .${c.cellSkeleton}`]: styles.cellSkeleton },
{ [`& .${c.checkboxInput}`]: styles.checkboxInput },
{ [`& .${c.columnHeader}`]: styles.columnHeader },
{ [`& .${c['columnHeader--alignCenter']}`]: styles['columnHeader--alignCenter'] },
{ [`& .${c['columnHeader--alignLeft']}`]: styles['columnHeader--alignLeft'] },
{ [`& .${c['columnHeader--alignRight']}`]: styles['columnHeader--alignRight'] },
{ [`& .${c['columnHeader--dragging']}`]: styles['columnHeader--dragging'] },
{ [`& .${c['columnHeader--emptyGroup']}`]: styles['columnHeader--emptyGroup'] },
{ [`& .${c['columnHeader--filledGroup']}`]: styles['columnHeader--filledGroup'] },
{ [`& .${c['columnHeader--filtered']}`]: styles['columnHeader--filtered'] },
{ [`& .${c['columnHeader--last']}`]: styles['columnHeader--last'] },
{ [`& .${c['columnHeader--lastUnpinned']}`]: styles['columnHeader--lastUnpinned'] },
{ [`& .${c['columnHeader--moving']}`]: styles['columnHeader--moving'] },
{ [`& .${c['columnHeader--numeric']}`]: styles['columnHeader--numeric'] },
{ [`& .${c['columnHeader--pinnedLeft']}`]: styles['columnHeader--pinnedLeft'] },
{ [`& .${c['columnHeader--pinnedRight']}`]: styles['columnHeader--pinnedRight'] },
{ [`& .${c['columnHeader--siblingFocused']}`]: styles['columnHeader--siblingFocused'] },
{ [`& .${c['columnHeader--sortable']}`]: styles['columnHeader--sortable'] },
{ [`& .${c['columnHeader--sorted']}`]: styles['columnHeader--sorted'] },
{
[`& .${c['columnHeader--withRightBorder']}`]: styles['columnHeader--withRightBorder'],
},
{ [`& .${c.columnHeader}`]: styles.columnHeader },
{ [`& .${c.headerFilterRow}`]: styles.headerFilterRow },
{ [`& .${c['columnHeader--withLeftBorder']}`]: styles['columnHeader--withLeftBorder'] },
{ [`& .${c['columnHeader--withRightBorder']}`]: styles['columnHeader--withRightBorder'] },
{ [`& .${c.columnHeaderCheckbox}`]: styles.columnHeaderCheckbox },
{ [`& .${c.columnHeaderDraggableContainer}`]: styles.columnHeaderDraggableContainer },
{ [`& .${c.columnHeaderTitleContainer}`]: styles.columnHeaderTitleContainer },
{ [`& .${c.columnHeaderTitleContainerContent}`]: styles.columnHeaderTitleContainerContent },
{ [`& .${c.columnSeparator}`]: styles.columnSeparator },
{ [`& .${c['columnSeparator--resizable']}`]: styles['columnSeparator--resizable'] },
{ [`& .${c['columnSeparator--resizing']}`]: styles['columnSeparator--resizing'] },
{ [`& .${c.columnSeparator}`]: styles.columnSeparator },
{ [`& .${c['columnSeparator--sideLeft']}`]: styles['columnSeparator--sideLeft'] },
{ [`& .${c['columnSeparator--sideRight']}`]: styles['columnSeparator--sideRight'] },
{ [`& .${c['container--bottom']}`]: styles['container--bottom'] },
{ [`& .${c['container--top']}`]: styles['container--top'] },
{ [`& .${c.detailPanelToggleCell}`]: styles.detailPanelToggleCell },
{ [`& .${c['detailPanelToggleCell--expanded']}`]: styles['detailPanelToggleCell--expanded'] },
{ [`& .${c.editBooleanCell}`]: styles.editBooleanCell },
{ [`& .${c.filterIcon}`]: styles.filterIcon },
{ [`& .${c['filler--borderBottom']}`]: styles['filler--borderBottom'] },
{ [`& .${c['filler--pinnedLeft']}`]: styles['filler--pinnedLeft'] },
{ [`& .${c['filler--pinnedRight']}`]: styles['filler--pinnedRight'] },
{ [`& .${c.groupingCriteriaCell}`]: styles.groupingCriteriaCell },
{
[`& .${c.groupingCriteriaCellLoadingContainer}`]: styles.groupingCriteriaCellLoadingContainer,
},
{ [`& .${c.groupingCriteriaCellToggle}`]: styles.groupingCriteriaCellToggle },
{ [`& .${c.headerFilterRow}`]: styles.headerFilterRow },
{ [`& .${c.iconSeparator}`]: styles.iconSeparator },
{ [`& .${c.menuIcon}`]: styles.menuIcon },
{ [`& .${c.menuIconButton}`]: styles.menuIconButton },
{ [`& .${c.menuOpen}`]: styles.menuOpen },
{ [`& .${c.menuList}`]: styles.menuList },
{ [`& .${c.menuOpen}`]: styles.menuOpen },
{ [`& .${c.overlayWrapperInner}`]: styles.overlayWrapperInner },
{ [`& .${c.pinnedRows}`]: styles.pinnedRows },
{ [`& .${c['pinnedRows--bottom']}`]: styles['pinnedRows--bottom'] },
{ [`& .${c['pinnedRows--top']}`]: styles['pinnedRows--top'] },
{ [`& .${c.row}`]: styles.row },
{ [`& .${c['row--borderBottom']}`]: styles['row--borderBottom'] },
{ [`& .${c['row--detailPanelExpanded']}`]: styles['row--detailPanelExpanded'] },
{ [`& .${c['row--dragging']}`]: styles['row--dragging'] },
{ [`& .${c['row--dynamicHeight']}`]: styles['row--dynamicHeight'] },
{ [`& .${c['row--editable']}`]: styles['row--editable'] },
{ [`& .${c['row--editing']}`]: styles['row--editing'] },
{ [`& .${c['row--dragging']}`]: styles['row--dragging'] },
{ [`& .${c.row}`]: styles.row },
{ [`& .${c.rowReorderCellPlaceholder}`]: styles.rowReorderCellPlaceholder },
{ [`& .${c['row--firstVisible']}`]: styles['row--firstVisible'] },
{ [`& .${c['row--lastVisible']}`]: styles['row--lastVisible'] },
{ [`& .${c.rowReorderCell}`]: styles.rowReorderCell },
{ [`& .${c['rowReorderCell--draggable']}`]: styles['rowReorderCell--draggable'] },
{ [`& .${c.rowReorderCellContainer}`]: styles.rowReorderCellContainer },
{ [`& .${c.rowReorderCellPlaceholder}`]: styles.rowReorderCellPlaceholder },
{ [`& .${c.rowSkeleton}`]: styles.rowSkeleton },
{ [`& .${c.scrollbar}`]: styles.scrollbar },
{ [`& .${c['scrollbar--horizontal']}`]: styles['scrollbar--horizontal'] },
{ [`& .${c['scrollbar--vertical']}`]: styles['scrollbar--vertical'] },
{ [`& .${c.scrollbarFiller}`]: styles.scrollbarFiller },
{ [`& .${c['scrollbarFiller--borderBottom']}`]: styles['scrollbarFiller--borderBottom'] },
{ [`& .${c['scrollbarFiller--borderTop']}`]: styles['scrollbarFiller--borderTop'] },
{ [`& .${c['scrollbarFiller--header']}`]: styles['scrollbarFiller--header'] },
{ [`& .${c['scrollbarFiller--pinnedRight']}`]: styles['scrollbarFiller--pinnedRight'] },
{ [`& .${c.sortIcon}`]: styles.sortIcon },
{ [`& .${c.withBorderColor}`]: styles.withBorderColor },
{ [`& .${c.treeDataGroupingCell}`]: styles.treeDataGroupingCell },
{ [`& .${c.treeDataGroupingCellToggle}`]: styles.treeDataGroupingCellToggle },
{
[`& .${c.treeDataGroupingCellLoadingContainer}`]: styles.treeDataGroupingCellLoadingContainer,
},
{
[`& .${c.groupingCriteriaCellLoadingContainer}`]: styles.groupingCriteriaCellLoadingContainer,
},
{ [`& .${c.detailPanelToggleCell}`]: styles.detailPanelToggleCell },
{
[`& .${c['detailPanelToggleCell--expanded']}`]: styles['detailPanelToggleCell--expanded'],
},
styles.root,
{ [`& .${c.treeDataGroupingCellToggle}`]: styles.treeDataGroupingCellToggle },
{ [`& .${c.withBorderColor}`]: styles.withBorderColor },
],
})<{ ownerState: OwnerState }>(({ theme: t }) => {
const apiRef = useGridPrivateApiContext();
Expand Down
20 changes: 17 additions & 3 deletions packages/x-data-grid/src/components/virtualization/GridMainContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { forwardRef } from '@mui/x-internals/forwardRef';
import { DataGridProcessedProps } from '../../models/props/DataGridProps';
import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
import { useGridConfiguration } from '../../hooks/utils/useGridConfiguration';
import { GridDimensions } from '../../hooks/features/dimensions';
import { GridLoadingOverlayVariant } from '../GridLoadingOverlay';

const GridPanelAnchor = styled('div')({
position: 'absolute',
Expand All @@ -12,12 +14,22 @@ const GridPanelAnchor = styled('div')({
width: 'calc(100% - (var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize)))',
});

type OwnerState = DataGridProcessedProps;
type OwnerState = Pick<DataGridProcessedProps, 'classes'> & {
dimensions: GridDimensions;
loadingOverlayVariant: GridLoadingOverlayVariant | null;
};

const Element = styled('div', {
name: 'MuiDataGrid',
slot: 'Main',
overridesResolver: (props, styles) => styles.main,
overridesResolver: (props, styles) => {
const { ownerState } = props;
return [
styles.main,
ownerState.dimensions.rightPinnedWidth > 0 && styles['main--hasPinnedRight'],
ownerState.loadingOverlayVariant === 'skeleton' && styles['main--hasSkeletonLoadingOverlay'],
];
},
})<{ ownerState: OwnerState }>({
flexGrow: 1,
position: 'relative',
Expand All @@ -30,15 +42,17 @@ export const GridMainContainer = forwardRef<
HTMLDivElement,
React.PropsWithChildren<{
className: string;
ownerState: OwnerState;
}>
>((props, ref) => {
const { ownerState } = props;
const rootProps = useGridRootProps();
const configuration = useGridConfiguration();
const ariaAttributes = configuration.hooks.useGridAriaAttributes();

return (
<Element
ownerState={rootProps}
ownerState={ownerState}
className={props.className}
tabIndex={-1}
{...ariaAttributes}
Expand Down
34 changes: 22 additions & 12 deletions packages/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,13 @@ import { GridVirtualScrollerRenderZone as RenderZone } from './GridVirtualScroll
import { GridVirtualScrollbar as Scrollbar } from './GridVirtualScrollbar';
import { GridLoadingOverlayVariant } from '../GridLoadingOverlay';

type OwnerState = DataGridProcessedProps;

const useUtilityClasses = (
ownerState: OwnerState,
dimensions: GridDimensions,
loadingOverlayVariant: GridLoadingOverlayVariant | null,
) => {
const { classes } = ownerState;
type OwnerState = Pick<DataGridProcessedProps, 'classes'> & {
dimensions: GridDimensions;
loadingOverlayVariant: GridLoadingOverlayVariant | null;
};

const useUtilityClasses = (ownerState: OwnerState) => {
const { classes, dimensions, loadingOverlayVariant } = ownerState;
const slots = {
root: [
'main',
Expand All @@ -43,7 +42,13 @@ const useUtilityClasses = (
const Scroller = styled('div', {
name: 'MuiDataGrid',
slot: 'VirtualScroller',
overridesResolver: (props, styles) => styles.virtualScroller,
overridesResolver: (props, styles) => {
const { ownerState } = props;
return [
styles.virtualScroller,
ownerState.dimensions.hasScrollX && styles['virtualScroller--hasScrollX'],
];
},
})<{ ownerState: OwnerState }>({
position: 'relative',
height: '100%',
Expand Down Expand Up @@ -73,7 +78,12 @@ function GridVirtualScroller(props: GridVirtualScrollerProps) {
const rootProps = useGridRootProps();
const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
const { getOverlay, overlaysProps } = useGridOverlays();
const classes = useUtilityClasses(rootProps, dimensions, overlaysProps.loadingOverlayVariant);
const ownerState = {
classes: rootProps.classes,
dimensions,
loadingOverlayVariant: overlaysProps.loadingOverlayVariant,
};
const classes = useUtilityClasses(ownerState);

const virtualScroller = useGridVirtualScroller();
const {
Expand All @@ -89,10 +99,10 @@ function GridVirtualScroller(props: GridVirtualScrollerProps) {
const rows = getRows();

return (
<Container className={classes.root} {...getContainerProps()}>
<Container className={classes.root} {...getContainerProps()} ownerState={ownerState}>
<GridScrollArea scrollDirection="left" />
<GridScrollArea scrollDirection="right" />
<Scroller className={classes.scroller} {...getScrollerProps()} ownerState={rootProps}>
<Scroller className={classes.scroller} {...getScrollerProps()} ownerState={ownerState}>
<TopContainer>
{!rootProps.unstable_listView && <GridHeaders />}
<rootProps.slots.pinnedRows position="top" virtualScroller={virtualScroller} />
Expand Down
13 changes: 10 additions & 3 deletions packages/x-data-grid/src/components/virtualization/GridVirtualScrollerContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
import { getDataGridUtilityClass } from '../../constants/gridClasses';
import { DataGridProcessedProps } from '../../models/props/DataGridProps';

type OwnerState = DataGridProcessedProps;
type OwnerState = Pick<DataGridProcessedProps, 'classes'> & { overflowedContent: boolean };

const useUtilityClasses = (props: DataGridProcessedProps, overflowedContent: boolean) => {
const { classes } = props;
Expand All @@ -22,7 +22,13 @@ const useUtilityClasses = (props: DataGridProcessedProps, overflowedContent: boo
const VirtualScrollerContentRoot = styled('div', {
name: 'MuiDataGrid',
slot: 'VirtualScrollerContent',
overridesResolver: (props, styles) => styles.virtualScrollerContent,
overridesResolver: (props, styles) => {
const { ownerState } = props;
return [
styles.virtualScrollerContent,
ownerState.overflowedContent && styles['virtualScrollerContent--overflowed'],
];
},
})<{ ownerState: OwnerState }>({});

const GridVirtualScrollerContent = forwardRef<
Expand All @@ -32,11 +38,12 @@ const GridVirtualScrollerContent = forwardRef<
const rootProps = useGridRootProps();
const overflowedContent = !rootProps.autoHeight && props.style?.minHeight === 'auto';
const classes = useUtilityClasses(rootProps, overflowedContent);
const ownerState = { classes: rootProps.classes, overflowedContent };

return (
<VirtualScrollerContentRoot
{...props}
ownerState={rootProps}
ownerState={ownerState}
className={clsx(classes.root, props.className)}
ref={ref}
/>
Expand Down

0 comments on commit 6b0c8f4

Please sign in to comment.