From ad9e8bf37a36f17a207d73ea754f4e5ba024b476 Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Fri, 9 Feb 2024 04:55:15 -0500 Subject: [PATCH 01/51] perf: remove cellContent --- .../src/renderer/renderProgress.tsx | 14 +++++++---- .../src/components/cell/GridCell.tsx | 17 ++++++-------- .../components/containers/GridRootStyles.ts | 23 ++++++++----------- .../x-data-grid/src/constants/gridClasses.ts | 10 -------- 4 files changed, 27 insertions(+), 37 deletions(-) diff --git a/packages/x-data-grid-generator/src/renderer/renderProgress.tsx b/packages/x-data-grid-generator/src/renderer/renderProgress.tsx index 5721af1ffdd0..2789caa62ed0 100644 --- a/packages/x-data-grid-generator/src/renderer/renderProgress.tsx +++ b/packages/x-data-grid-generator/src/renderer/renderProgress.tsx @@ -7,7 +7,13 @@ interface ProgressBarProps { value: number; } -const Root = styled('div')(({ theme }) => ({ +const Center = styled('div')({ + height: '100%', + display: 'flex', + alignItems: 'center', +}); + +const Element = styled('div')(({ theme }) => ({ border: `1px solid ${(theme.vars || theme).palette.divider}`, position: 'relative', overflow: 'hidden', @@ -42,7 +48,7 @@ const ProgressBar = React.memo(function ProgressBar(props: ProgressBarProps) { const valueInPercent = value * 100; return ( - + {`${valueInPercent.toLocaleString()} %`} - + ); }); @@ -67,5 +73,5 @@ export function renderProgress(params: GridRenderCellParams) { return null; } - return ; + return
; } diff --git a/packages/x-data-grid/src/components/cell/GridCell.tsx b/packages/x-data-grid/src/components/cell/GridCell.tsx index 4bc9900993da..af2fee4fd430 100644 --- a/packages/x-data-grid/src/components/cell/GridCell.tsx +++ b/packages/x-data-grid/src/components/cell/GridCell.tsx @@ -127,7 +127,6 @@ const useUtilityClasses = (ownerState: OwnerState) => { pinnedPosition === PinnedPosition.RIGHT && 'cell--pinnedRight', isSelectionMode && !isEditable && 'cell--selectionMode', ], - content: ['cellContent'], }; return composeClasses(slots, getDataGridUtilityClass, classes); @@ -387,13 +386,13 @@ const GridCell = React.forwardRef((props, ref) => } let children: React.ReactNode; - if (editCellState == null && column.renderCell) { + let title: string | undefined; + + if (editCellState === null && column.renderCell) { children = column.renderCell(cellParamsWithAPI); - classNames.push(gridClasses['cell--withRenderer']); - classNames.push(rootClasses?.['cell--withRenderer']); } - if (editCellState != null && column.renderEditCell) { + if (editCellState !== null && column.renderEditCell) { const updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field); // eslint-disable-next-line @typescript-eslint/naming-convention @@ -412,11 +411,8 @@ const GridCell = React.forwardRef((props, ref) => if (children === undefined) { const valueString = valueToRender?.toString(); - children = ( -
- {valueString} -
- ); + children = valueString; + title = valueString } if (React.isValidElement(children) && canManageOwnFocus) { @@ -440,6 +436,7 @@ const GridCell = React.forwardRef((props, ref) => aria-colindex={colIndex + 1} aria-colspan={colSpan} style={style} + title={title} tabIndex={tabIndex} onClick={publish('cellClick', onClick)} onDoubleClick={publish('cellDoubleClick', onDoubleClick)} diff --git a/packages/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/x-data-grid/src/components/containers/GridRootStyles.ts index b5f81dbc7b7c..374c38b0ff38 100644 --- a/packages/x-data-grid/src/components/containers/GridRootStyles.ts +++ b/packages/x-data-grid/src/components/containers/GridRootStyles.ts @@ -65,19 +65,16 @@ export const GridRootStyles = styled('div', { }, { [`&.${c.autosizing}`]: styles.autosizing }, { [`& .${c.editBooleanCell}`]: styles.editBooleanCell }, + { [`& .${c.cell}`]: styles.cell }, { [`& .${c['cell--editing']}`]: styles['cell--editing'] }, { [`& .${c['cell--textCenter']}`]: styles['cell--textCenter'] }, { [`& .${c['cell--textLeft']}`]: styles['cell--textLeft'] }, { [`& .${c['cell--textRight']}`]: styles['cell--textRight'] }, - // TODO v6: Remove - { [`& .${c['cell--withRenderer']}`]: styles['cell--withRenderer'] }, - { [`& .${c.cell}`]: styles.cell }, { [`& .${c['cell--rangeTop']}`]: styles['cell--rangeTop'] }, { [`& .${c['cell--rangeBottom']}`]: styles['cell--rangeBottom'] }, { [`& .${c['cell--rangeLeft']}`]: styles['cell--rangeLeft'] }, { [`& .${c['cell--rangeRight']}`]: styles['cell--rangeRight'] }, { [`& .${c['cell--withRightBorder']}`]: styles['cell--withRightBorder'] }, - { [`& .${c.cellContent}`]: styles.cellContent }, { [`& .${c.cellCheckbox}`]: styles.cellCheckbox }, { [`& .${c.cellSkeleton}`]: styles.cellSkeleton }, { [`& .${c.checkboxInput}`]: styles.checkboxInput }, @@ -440,11 +437,10 @@ export const GridRootStyles = styled('div', { /* Cell styles */ [`& .${c.cell}`]: { - display: 'flex', - alignItems: 'center', height: 'var(--height)', minWidth: 'var(--width)', maxWidth: 'var(--width)', + lineHeight: 'calc(var(--height) - 1px)', // -1px for the border '--width': '0px', '--height': '0px', @@ -452,6 +448,10 @@ export const GridRootStyles = styled('div', { boxSizing: 'border-box', borderTop: `1px solid var(--rowBorderColor)`, + overflow: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + '&.Mui-selected': selectedStyles, }, [`& .${c['virtualScrollerContent--overflowed']} .${c['row--lastVisible']} .${c.cell}`]: { @@ -460,9 +460,10 @@ export const GridRootStyles = styled('div', { [`&.${c['root--disableUserSelection']} .${c.cell}`]: { userSelect: 'none', }, - [`& .${c.row}:not(.${c['row--dynamicHeight']}) > .${c.cell}`]: { - overflow: 'hidden', - whiteSpace: 'nowrap', + [`& .${c['row--dynamicHeight']} > .${c.cell}`]: { + overflow: 'initial', + whiteSpace: 'initial', + lineHeight: 'unset', }, [`& .${c.cellEmpty}`]: { padding: 0, @@ -480,10 +481,6 @@ export const GridRootStyles = styled('div', { outlineOffset: '-1px', }, }, - [`& .${c.cellContent}`]: { - overflow: 'hidden', - textOverflow: 'ellipsis', - }, [`& .${c['row--editing']}`]: { boxShadow: t.shadows[2], }, diff --git a/packages/x-data-grid/src/constants/gridClasses.ts b/packages/x-data-grid/src/constants/gridClasses.ts index f83194a44d63..a79cb09b361b 100644 --- a/packages/x-data-grid/src/constants/gridClasses.ts +++ b/packages/x-data-grid/src/constants/gridClasses.ts @@ -60,10 +60,6 @@ export interface GridClasses { * Styles applied to the cell element if `align="right"`. */ 'cell--textRight': string; - /** - * Styles applied to the cell element if the cell has a custom renderer. - */ - 'cell--withRenderer': string; /** * Styles applied to the cell element if it is at the top edge of a cell selection range. */ @@ -96,10 +92,6 @@ export interface GridClasses { * Styles applied to the cell element. */ cell: string; - /** - * Styles applied to the element that wraps the cell content. - */ - cellContent: string; /** * Styles applied to the cell checkbox element. */ @@ -626,7 +618,6 @@ export const gridClasses = generateUtilityClasses('MuiDataGrid', [ 'cell--textCenter', 'cell--textLeft', 'cell--textRight', - 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', @@ -635,7 +626,6 @@ export const gridClasses = generateUtilityClasses('MuiDataGrid', [ 'cell--pinnedRight', 'cell--selectionMode', 'cell', - 'cellContent', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', From f7c1feef8cd649fca56c44df2070acaab876ecbc Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Fri, 9 Feb 2024 08:37:43 -0500 Subject: [PATCH 02/51] perf: remove emotion wrapper --- .../components/GridScrollbarFillerCell.tsx | 28 ++++--------------- .../components/containers/GridRootStyles.ts | 16 +++++++++++ .../x-data-grid/src/constants/gridClasses.ts | 24 ++++++++++++++++ 3 files changed, 46 insertions(+), 22 deletions(-) diff --git a/packages/x-data-grid/src/components/GridScrollbarFillerCell.tsx b/packages/x-data-grid/src/components/GridScrollbarFillerCell.tsx index 188a9d78c13b..7fa859e00c6d 100644 --- a/packages/x-data-grid/src/components/GridScrollbarFillerCell.tsx +++ b/packages/x-data-grid/src/components/GridScrollbarFillerCell.tsx @@ -1,30 +1,14 @@ import * as React from 'react'; import clsx from 'clsx'; -import { styled } from '@mui/material/styles'; -import { getDataGridUtilityClass as getClassName } from '../constants'; +import { gridClasses } from '../constants'; const classes = { - root: getClassName('scrollbarFiller'), - header: getClassName('scrollbarFiller--header'), - borderTop: getClassName('scrollbarFiller--borderTop'), - pinnedRight: getClassName('scrollbarFiller--pinnedRight'), + root: gridClasses['scrollbarFiller'], + header: gridClasses['scrollbarFiller--header'], + borderTop: gridClasses['scrollbarFiller--borderTop'], + pinnedRight: gridClasses['scrollbarFiller--pinnedRight'], }; -const Style = styled('div')({ - minWidth: 'calc(var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))', - alignSelf: 'stretch', - [`&.${classes.borderTop}`]: { - borderTop: '1px solid var(--DataGrid-rowBorderColor)', - }, - [`&.${classes.pinnedRight}`]: { - backgroundColor: 'var(--DataGrid-pinnedBackground)', - }, - [`&.${classes.pinnedRight}:not(.${classes.header})`]: { - position: 'sticky', - right: 0, - }, -}); - function GridScrollbarFillerCell({ header, borderTop = true, @@ -35,7 +19,7 @@ function GridScrollbarFillerCell({ pinnedRight?: boolean; }) { return ( -