From 75b0788524415ddd527c864cc9aa00b8a912958a Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Mon, 2 Oct 2023 16:37:39 -0400 Subject: [PATCH] [DataGrid] Fix autosize missing a few pixels (#10471) --- docs/pages/x/api/data-grid/data-grid-premium.json | 1 + docs/pages/x/api/data-grid/data-grid-pro.json | 1 + docs/pages/x/api/data-grid/data-grid.json | 1 + .../api-docs/data-grid/data-grid-premium.json | 4 ++++ docs/translations/api-docs/data-grid/data-grid-pro.json | 4 ++++ docs/translations/api-docs/data-grid/data-grid.json | 4 ++++ .../hooks/features/columnResize/useGridColumnResize.tsx | 7 ++++++- .../src/tests/columns.DataGridPro.test.tsx | 6 +++--- .../src/components/containers/GridRootStyles.ts | 9 +++++++++ packages/grid/x-data-grid/src/constants/gridClasses.ts | 5 +++++ 10 files changed, 38 insertions(+), 4 deletions(-) diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json index 214405c70d17..6d9bd93e566d 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -1070,6 +1070,7 @@ "aggregationColumnHeader--alignRight", "aggregationColumnHeaderLabel", "autoHeight", + "autosizing", "booleanCell", "cell--editable", "cell--editing", diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json index ae3753d91c47..e55eabb69eb6 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -991,6 +991,7 @@ "aggregationColumnHeader--alignRight", "aggregationColumnHeaderLabel", "autoHeight", + "autosizing", "booleanCell", "cell--editable", "cell--editing", diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index ce4283f5740f..7e71c1389f19 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -840,6 +840,7 @@ "aggregationColumnHeader--alignRight", "aggregationColumnHeaderLabel", "autoHeight", + "autosizing", "booleanCell", "cell--editable", "cell--editing", diff --git a/docs/translations/api-docs/data-grid/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium.json index 56c0232c3a53..38957215db85 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium.json @@ -987,6 +987,10 @@ "nodeName": "the root element", "conditions": "autoHeight={true}" }, + "autosizing": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the root element while it is being autosized" + }, "booleanCell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the icon of the boolean cell" diff --git a/docs/translations/api-docs/data-grid/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro.json index 00bf251a8621..37e7a9e7bac8 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro.json @@ -885,6 +885,10 @@ "nodeName": "the root element", "conditions": "autoHeight={true}" }, + "autosizing": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the root element while it is being autosized" + }, "booleanCell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the icon of the boolean cell" diff --git a/docs/translations/api-docs/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid.json index b6a89769ecb3..545f6d337267 100644 --- a/docs/translations/api-docs/data-grid/data-grid.json +++ b/docs/translations/api-docs/data-grid/data-grid.json @@ -670,6 +670,10 @@ "nodeName": "the root element", "conditions": "autoHeight={true}" }, + "autosizing": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the root element while it is being autosized" + }, "booleanCell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the icon of the boolean cell" diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx index fdf34490bd9a..9c7a182a7237 100644 --- a/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx +++ b/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx @@ -203,6 +203,9 @@ function extractColumnWidths( ) { const widthByField = {} as Record; + const root = apiRef.current.rootElementRef!.current!; + root.classList.add(gridClasses.autosizing); + columns.forEach((column) => { const cells = findGridCells(apiRef.current, column.field); @@ -214,7 +217,7 @@ function extractColumnWidths( } const style = window.getComputedStyle(cell, null); const paddingWidth = parseInt(style.paddingLeft, 10) + parseInt(style.paddingRight, 10); - const contentWidth = (cell.firstElementChild?.scrollWidth ?? -1) + 1; + const contentWidth = cell.firstElementChild?.getBoundingClientRect().width ?? 0; return paddingWidth + contentWidth; }); @@ -248,6 +251,8 @@ function extractColumnWidths( widthByField[column.field] = clamp(maxContent, min, max); }); + root.classList.remove(gridClasses.autosizing); + return widthByField; } diff --git a/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx index 2775ddf2af9a..9251992f3efc 100644 --- a/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx @@ -485,13 +485,13 @@ describe(' - Columns', () => { await autosize({ includeHeaders: true }, [155, 177]); }); it('.includeOutliers works', async () => { - await autosize({ includeOutliers: true }, [50, 145]); + await autosize({ includeOutliers: true }, [50, 144]); }); it('.outliersFactor works', async () => { - await autosize({ outliersFactor: 40 }, [50, 145]); + await autosize({ outliersFactor: 40 }, [50, 144]); }); it('.expand works', async () => { - await autosize({ expand: true }, [134, 149]); + await autosize({ expand: true }, [134, 148]); }); }); }); diff --git a/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts index 9312cc84def0..fea22c4a4476 100644 --- a/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts +++ b/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts @@ -56,6 +56,7 @@ export const GridRootStyles = styled('div', { [`&.${gridClasses['root--disableUserSelection']} .${gridClasses.cell}`]: styles['root--disableUserSelection'], }, + { [`&.${gridClasses.autosizing}`]: styles.autosizing }, { [`& .${gridClasses.editBooleanCell}`]: styles.editBooleanCell }, { [`& .${gridClasses['cell--editing']}`]: styles['cell--editing'] }, { [`& .${gridClasses['cell--textCenter']}`]: styles['cell--textCenter'] }, @@ -150,6 +151,14 @@ export const GridRootStyles = styled('div', { borderBottomColor: 'transparent', }, }, + [`&.${gridClasses.autosizing}`]: { + [`& .${gridClasses.columnHeaderTitleContainerContent} > *`]: { + overflow: 'visible !important', + }, + [`& .${gridClasses.cell} > *`]: { + overflow: 'visible !important', + }, + }, [`& .${gridClasses['virtualScrollerContent--overflowed']} .${gridClasses['row--lastVisible']} .${gridClasses.cell}`]: { borderBottomColor: 'transparent', diff --git a/packages/grid/x-data-grid/src/constants/gridClasses.ts b/packages/grid/x-data-grid/src/constants/gridClasses.ts index 620e6ceb50c9..9f32d535a1da 100644 --- a/packages/grid/x-data-grid/src/constants/gridClasses.ts +++ b/packages/grid/x-data-grid/src/constants/gridClasses.ts @@ -32,6 +32,10 @@ export interface GridClasses { * Styles applied to the root element if `autoHeight={true}`. */ autoHeight: string; + /** + * Styles applied to the root element while it is being autosized. + */ + autosizing: string; /** * Styles applied to the icon of the boolean cell. */ @@ -546,6 +550,7 @@ export const gridClasses = generateUtilityClasses('MuiDataGrid', [ 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', + 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing',