From 51ff034ac40018775adff1542f11f7bd2d1e1d0e Mon Sep 17 00:00:00 2001
From: Alexandre Fauquette <alex.fauquette@gmail.com>
Date: Wed, 8 Jun 2022 09:23:46 +0200
Subject: [PATCH] add className to allow experiment with styling

---
 .../columnHeaders/useGridColumnHeaders.tsx    | 22 ++++++++++++++-----
 .../hooks/features/density/densitySelector.ts |  3 ++-
 .../features/export/useGridPrintExport.tsx    |  5 +++--
 .../features/focus/gridFocusStateSelector.ts  |  1 -
 4 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx b/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
index 133bfac258cba..92914baf6453e 100644
--- a/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
+++ b/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
@@ -18,7 +18,7 @@ import {
   gridDensityHeaderHeightSelector,
   gridDensityHeaderGroupingMaxDepthSelector,
   gridDensityHeaderGroupingRowHeightSelector,
-  gridDensityTotalHeaderHeightSelector
+  gridDensityTotalHeaderHeightSelector,
 } from '../density/densitySelector';
 import { gridFilterActiveItemsLookupSelector } from '../filter/gridFilterSelector';
 import { gridSortColumnLookupSelector } from '../sorting/gridSortingSelector';
@@ -42,6 +42,16 @@ const GridColumnHeaderRow = styled('div', {
 
 // Dummy component to make experiments
 type HeaderDepthProp = { depthInfo: HeaderInfo[]; headerGroupingRowHeight: number };
+
+const GridColumnHeaderColumnGroup = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnHeaderColumnGroup',
+  overridesResolver: (props, styles) => styles.columnHeaderColumnGroup,
+})<{ ownerState: { name: string | null } }>(({ ownerState }) => ({
+  display: 'flex',
+  border: ownerState.name ? 'solid lightgray 1px' : undefined,
+}));
+
 const HeaderDepth = (props: HeaderDepthProp) => {
   const { depthInfo, headerGroupingRowHeight, ...other } = props;
   return (
@@ -50,12 +60,14 @@ const HeaderDepth = (props: HeaderDepthProp) => {
       {...other}
     >
       {depthInfo.map(({ name, width }, index) => (
-        <div
+        <GridColumnHeaderColumnGroup
           key={index}
-          style={{ width: `${width}px`, border: name ? 'solid lightgray 1px' : undefined }}
+          className={`groupingHeader groupingHeader-${name ? 'withName' : 'without name'}`}
+          style={{ width: `${width}px` }}
+          ownerState={{ name }}
         >
           {name}
-        </div>
+        </GridColumnHeaderColumnGroup>
       ))}
     </GridColumnHeaderRow>
   );
@@ -286,7 +298,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
       const hasTabbableElement = !(tabIndexState === null && cellTabIndexState === null);
       const tabIndex =
         (tabIndexState !== null && tabIndexState.field === column.field) ||
-          (isFirstColumn && !hasTabbableElement)
+        (isFirstColumn && !hasTabbableElement)
           ? 0
           : -1;
       const hasFocus = columnHeaderFocus !== null && columnHeaderFocus.field === column.field;
diff --git a/packages/grid/x-data-grid/src/hooks/features/density/densitySelector.ts b/packages/grid/x-data-grid/src/hooks/features/density/densitySelector.ts
index 8f9d72f09aeec..c0fa87124448d 100644
--- a/packages/grid/x-data-grid/src/hooks/features/density/densitySelector.ts
+++ b/packages/grid/x-data-grid/src/hooks/features/density/densitySelector.ts
@@ -35,5 +35,6 @@ export const gridDensityFactorSelector = createSelector(
 
 export const gridDensityTotalHeaderHeightSelector = createSelector(
   gridDensitySelector,
-  (density) => density.headerHeight + density.headerGroupingMaxDepth * density.headerGroupingRowHeight,
+  (density) =>
+    density.headerHeight + density.headerGroupingMaxDepth * density.headerGroupingRowHeight,
 );
diff --git a/packages/grid/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx b/packages/grid/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx
index 08b69ac9f1247..23c8a548a3e05 100644
--- a/packages/grid/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx
+++ b/packages/grid/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx
@@ -152,11 +152,12 @@ export const useGridPrintExport = (
       }
 
       // Expand container height to accommodate all rows
-      gridClone.style.height = `${rowsMeta.currentPageTotalHeight +
+      gridClone.style.height = `${
+        rowsMeta.currentPageTotalHeight +
         totalHeaderHeight +
         gridToolbarElementHeight +
         gridFooterElementHeight
-        }px`;
+      }px`;
 
       // Remove all loaded elements from the current host
       printDoc.body.innerHTML = '';
diff --git a/packages/grid/x-data-grid/src/hooks/features/focus/gridFocusStateSelector.ts b/packages/grid/x-data-grid/src/hooks/features/focus/gridFocusStateSelector.ts
index ff955195d0306..6a8f900839164 100644
--- a/packages/grid/x-data-grid/src/hooks/features/focus/gridFocusStateSelector.ts
+++ b/packages/grid/x-data-grid/src/hooks/features/focus/gridFocusStateSelector.ts
@@ -25,4 +25,3 @@ export const gridTabIndexColumnHeaderSelector = createSelector(
   gridTabIndexStateSelector,
   (state: GridTabIndexState) => state.columnHeader,
 );
-