[DataGrid] Fix autosize missing a few pixels (#10471)

mui · Oct 2, 2023 · 75b0788 · 75b0788
1 parent 2d52f67
commit 75b0788
Show file tree

Hide file tree

Showing 10 changed files with 38 additions and 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
@@ -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
@@ -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
@@ -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
@@ -987,6 +987,10 @@
       "nodeName": "the root element",
       "conditions": "<code>autoHeight={true}</code>"
     },
+    "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
@@ -885,6 +885,10 @@
       "nodeName": "the root element",
       "conditions": "<code>autoHeight={true}</code>"
     },
+    "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
@@ -670,6 +670,10 @@
       "nodeName": "the root element",
       "conditions": "<code>autoHeight={true}</code>"
     },
+    "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
@@ -203,6 +203,9 @@ function extractColumnWidths(
 ) {
   const widthByField = {} as Record<string, number>;
 
+  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
@@ -485,13 +485,13 @@ describe('<DataGridPro /> - 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
@@ -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
@@ -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<GridClassKey>('MuiDataGrid', [
   'aggregationColumnHeader--alignRight',
   'aggregationColumnHeaderLabel',
   'autoHeight',
+  'autosizing',
   'booleanCell',
   'cell--editable',
   'cell--editing',