@mui/x-data-grid 6.0.0-alpha.2 → 6.0.0-alpha.4

package/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -3,51 +3,13 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["groupId", "children"];
 import * as React from 'react';
 import { isLeaf } from '../../../models/gridColumnGrouping';
-import { gridColumnGroupsLookupSelector } from './gridColumnGroupsSelector';
-import { gridColumnLookupSelector } from '../columns/gridColumnsSelector';
+import { gridColumnGroupsLookupSelector, gridColumnGroupsUnwrappedModelSelector } from './gridColumnGroupsSelector';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-export function hasGroupPath(lookupElement) {
-  return lookupElement.groupPath !== undefined;
-}
-
-// This is the recurrence function that help writing `unwrapGroupingColumnModel()`
-const recurrentUnwrapGroupingColumnModel = (columnGroupNode, parents, unwrappedGroupingModelToComplet) => {
-  if (isLeaf(columnGroupNode)) {
-    if (unwrappedGroupingModelToComplet[columnGroupNode.field] !== undefined) {
-      throw new Error([`MUI: columnGroupingModel contains duplicated field`, `column field ${columnGroupNode.field} occurrs two times in the grouping model:`, `- ${unwrappedGroupingModelToComplet[columnGroupNode.field].join(' > ')}`, `- ${parents.join(' > ')}`].join('\n'));
-    }
-
-    unwrappedGroupingModelToComplet[columnGroupNode.field] = parents;
-    return;
-  }
-
-  const {
-    groupId,
-    children
-  } = columnGroupNode;
-  children.forEach(child => {
-    recurrentUnwrapGroupingColumnModel(child, [...parents, groupId], unwrappedGroupingModelToComplet);
-  });
-};
-/**
- * This is a function that provide for each column the array of its parents.
- * Parents are ordered from the root to the leaf.
- * @param columnGroupingModel The model such as provided in DataGrid props
- * @returns An object `{[field]: groupIds}` where `groupIds` is the parents of the column `field`
- */
-
-
-export const unwrapGroupingColumnModel = columnGroupingModel => {
-  if (!columnGroupingModel) {
-    return {};
-  }
-
-  const unwrappedSubTree = {};
-  columnGroupingModel.forEach(columnGroupNode => {
-    recurrentUnwrapGroupingColumnModel(columnGroupNode, [], unwrappedSubTree);
-  });
-  return unwrappedSubTree;
-};
+import { getColumnGroupsHeaderStructure, unwrapGroupingColumnModel } from './gridColumnGroupsUtils';
+import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
+import { gridColumnFieldsSelector, // GridColumnsState,
+gridVisibleColumnFieldsSelector } from '../columns';
+import { useGridSelector } from '../../utils/useGridSelector';
 
 const createGroupLookup = columnGroupingModel => {
   let groupLookup = {};
@@ -87,14 +49,29 @@ const createGroupLookup = columnGroupingModel => {
   return _extends({}, groupLookup);
 };
 
-export const columnGroupsStateInitializer = (state, props) => {
-  var _props$columnGrouping;
+export const columnGroupsStateInitializer = (state, props, apiRef) => {
+  var _props$experimentalFe, _props$columnGrouping, _props$columnGrouping2;
+
+  if (!((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.columnGrouping)) {
+    return state;
+  }
 
+  const columnFields = gridColumnFieldsSelector(apiRef);
+  const visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
   const groupLookup = createGroupLookup((_props$columnGrouping = props.columnGroupingModel) != null ? _props$columnGrouping : []);
+  const unwrappedGroupingModel = unwrapGroupingColumnModel((_props$columnGrouping2 = props.columnGroupingModel) != null ? _props$columnGrouping2 : []);
+  const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel);
+  const maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max(...visibleColumnFields.map(field => {
+    var _unwrappedGroupingMod, _unwrappedGroupingMod2;
+
+    return (_unwrappedGroupingMod = (_unwrappedGroupingMod2 = unwrappedGroupingModel[field]) == null ? void 0 : _unwrappedGroupingMod2.length) != null ? _unwrappedGroupingMod : 0;
+  }));
   return _extends({}, state, {
     columnGrouping: {
       lookup: groupLookup,
-      groupCollapsedModel: {}
+      unwrappedGroupingModel,
+      headerStructure: columnGroupsHeaderStructure,
+      maxDepth
     }
   });
 };
@@ -104,16 +81,16 @@ export const columnGroupsStateInitializer = (state, props) => {
  */
 
 export const useGridColumnGrouping = (apiRef, props) => {
-  var _props$experimentalFe2;
+  var _props$experimentalFe3;
 
   /**
    * API METHODS
    */
   const getColumnGroupPath = React.useCallback(field => {
-    var _columnLookup$field$g, _columnLookup$field;
+    var _unwrappedGroupingMod3;
 
-    const columnLookup = gridColumnLookupSelector(apiRef);
-    return (_columnLookup$field$g = (_columnLookup$field = columnLookup[field]) == null ? void 0 : _columnLookup$field.groupPath) != null ? _columnLookup$field$g : [];
+    const unwrappedGroupingModel = gridColumnGroupsUnwrappedModelSelector(apiRef);
+    return (_unwrappedGroupingMod3 = unwrappedGroupingModel[field]) != null ? _unwrappedGroupingMod3 : [];
   }, [apiRef]);
   const getAllGroupDetails = React.useCallback(() => {
     const columnGroupLookup = gridColumnGroupsLookupSelector(apiRef);
@@ -124,30 +101,53 @@ export const useGridColumnGrouping = (apiRef, props) => {
     unstable_getAllGroupDetails: getAllGroupDetails
   };
   useGridApiMethod(apiRef, columnGroupingApi, 'GridColumnGroupingApi');
+  const handleColumnReorderChange = React.useCallback(() => {
+    var _props$columnGrouping3;
+
+    const unwrappedGroupingModel = unwrapGroupingColumnModel((_props$columnGrouping3 = props.columnGroupingModel) != null ? _props$columnGrouping3 : []);
+    apiRef.current.setState(state => {
+      var _state$columns$all, _state$columns;
+
+      const orderedFields = (_state$columns$all = (_state$columns = state.columns) == null ? void 0 : _state$columns.all) != null ? _state$columns$all : [];
+      const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(orderedFields, unwrappedGroupingModel);
+      return _extends({}, state, {
+        columnGrouping: _extends({}, state.columnGrouping, {
+          headerStructure: columnGroupsHeaderStructure
+        })
+      });
+    });
+  }, [apiRef, props.columnGroupingModel]);
+  useGridApiEventHandler(apiRef, 'columnOrderChange', handleColumnReorderChange);
+  const columnFields = useGridSelector(apiRef, gridColumnFieldsSelector);
+  const visibleColumnFields = useGridSelector(apiRef, gridVisibleColumnFieldsSelector);
   /**
    * EFFECTS
    */
-  // The effect does not track any value defined synchronously during the 1st render by hooks called after `useGridColumns`
-  // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
 
-  const isFirstRender = React.useRef(true);
   React.useEffect(() => {
-    var _props$experimentalFe, _props$columnGrouping2;
+    var _props$experimentalFe2, _props$columnGrouping4, _props$columnGrouping5;
 
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
+    if (!((_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.columnGrouping)) {
       return;
     }
 
-    if (!((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.columnGrouping)) {
-      return;
-    }
+    const groupLookup = createGroupLookup((_props$columnGrouping4 = props.columnGroupingModel) != null ? _props$columnGrouping4 : []);
+    const unwrappedGroupingModel = unwrapGroupingColumnModel((_props$columnGrouping5 = props.columnGroupingModel) != null ? _props$columnGrouping5 : []);
+    const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel);
+    const maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max(...visibleColumnFields.map(field => {
+      var _unwrappedGroupingMod4, _unwrappedGroupingMod5;
 
-    const groupLookup = createGroupLookup((_props$columnGrouping2 = props.columnGroupingModel) != null ? _props$columnGrouping2 : []);
-    apiRef.current.setState(state => _extends({}, state, {
-      columnGrouping: _extends({}, state.columnGrouping, {
-        lookup: groupLookup
-      })
+      return (_unwrappedGroupingMod4 = (_unwrappedGroupingMod5 = unwrappedGroupingModel[field]) == null ? void 0 : _unwrappedGroupingMod5.length) != null ? _unwrappedGroupingMod4 : 0;
     }));
-  }, [apiRef, props.columnGroupingModel, (_props$experimentalFe2 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe2.columnGrouping]);
+    apiRef.current.setState(state => {
+      return _extends({}, state, {
+        columnGrouping: {
+          lookup: groupLookup,
+          unwrappedGroupingModel,
+          headerStructure: columnGroupsHeaderStructure,
+          maxDepth
+        }
+      });
+    });
+  }, [apiRef, columnFields, visibleColumnFields, props.columnGroupingModel, (_props$experimentalFe3 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe3.columnGrouping]);
 };

package/hooks/features/columnHeaders/useGridColumnHeaders.d.ts

@@ -22,7 +22,7 @@ export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) =>
         };
     };
     getInnerProps: () => {
-        ref: React.Ref<HTMLDivElement>;
+        ref: ((instance: HTMLDivElement | null) => void) | null;
         role: string;
     };
 };

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -6,9 +6,9 @@ import { styled } from '@mui/material/styles';
 import { defaultMemoize } from 'reselect';
 import { useGridApiContext } from '../../utils/useGridApiContext';
 import { useGridSelector } from '../../utils/useGridSelector';
-import { gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector } from '../columns/gridColumnsSelector';
-import { gridTabIndexColumnHeaderSelector, gridTabIndexCellSelector, gridFocusColumnHeaderSelector } from '../focus/gridFocusStateSelector';
-import { gridDensityHeaderHeightSelector, gridDensityHeaderGroupingMaxDepthSelector, gridDensityTotalHeaderHeightSelector } from '../density/densitySelector';
+import { gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector, gridColumnVisibilityModelSelector } from '../columns/gridColumnsSelector';
+import { gridTabIndexColumnHeaderSelector, gridTabIndexCellSelector, gridFocusColumnHeaderSelector, unstable_gridFocusColumnGroupHeaderSelector, unstable_gridTabIndexColumnGroupHeaderSelector } from '../focus/gridFocusStateSelector';
+import { gridDensityHeaderHeightSelector } from '../density/densitySelector';
 import { gridFilterActiveItemsLookupSelector } from '../filter/gridFilterSelector';
 import { gridSortColumnLookupSelector } from '../sorting/gridSortingSelector';
 import { gridColumnMenuSelector } from '../columnMenu/columnMenuSelector';
@@ -19,10 +19,8 @@ import { getFirstColumnIndexToRender } from '../columns/gridColumnsUtils';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { getRenderableIndexes } from '../virtualization/useGridVirtualScroller';
 import { GridColumnGroupHeader } from '../../../components/columnHeaders/GridColumnGroupHeader';
-import { isDeepEqual } from '../../../utils/utils'; // TODO: add the possibility to switch this value if needed for customization
-
+import { gridTotalHeaderHeightSelector, gridColumnGroupsHeaderMaxDepthSelector, gridColumnGroupsHeaderStructureSelector } from '../columnGrouping/gridColumnGroupsSelector';
 import { jsx as _jsx } from "react/jsx-runtime";
-const MERGE_EMPTY_CELLS = true;
 const GridColumnHeaderRow = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnHeaderRow',
@@ -45,15 +43,19 @@ export const useGridColumnHeaders = props => {
   const apiRef = useGridApiContext();
   const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
   const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
-  const tabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
+  const columnHeaderTabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
   const cellTabIndexState = useGridSelector(apiRef, gridTabIndexCellSelector);
+  const columnGroupHeaderTabIndexState = useGridSelector(apiRef, unstable_gridTabIndexColumnGroupHeaderSelector);
   const columnHeaderFocus = useGridSelector(apiRef, gridFocusColumnHeaderSelector);
+  const columnGroupHeaderFocus = useGridSelector(apiRef, unstable_gridFocusColumnGroupHeaderSelector);
   const headerHeight = useGridSelector(apiRef, gridDensityHeaderHeightSelector);
-  const headerGroupingMaxDepth = useGridSelector(apiRef, gridDensityHeaderGroupingMaxDepthSelector);
-  const totalHeaderHeight = useGridSelector(apiRef, gridDensityTotalHeaderHeightSelector);
+  const headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
+  const totalHeaderHeight = useGridSelector(apiRef, gridTotalHeaderHeightSelector);
   const filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector);
   const sortColumnLookup = useGridSelector(apiRef, gridSortColumnLookupSelector);
   const columnMenuState = useGridSelector(apiRef, gridColumnMenuSelector);
+  const columnVisibility = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
+  const columnGroupsHeaderStructure = useGridSelector(apiRef, gridColumnGroupsHeaderStructureSelector);
   const rootProps = useGridRootProps();
   const innerRef = React.useRef(null);
   const handleInnerRef = useForkRef(innerRefProp, innerRef);
@@ -203,8 +205,8 @@ export const useGridColumnHeaders = props => {
       const column = renderedColumns[i];
       const columnIndex = firstColumnToRender + i;
       const isFirstColumn = columnIndex === 0;
-      const hasTabbableElement = !(tabIndexState === null && cellTabIndexState === null);
-      const tabIndex = tabIndexState !== null && tabIndexState.field === column.field || isFirstColumn && !hasTabbableElement ? 0 : -1;
+      const hasTabbableElement = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && cellTabIndexState === null);
+      const tabIndex = columnHeaderTabIndexState !== null && columnHeaderTabIndexState.field === column.field || isFirstColumn && !hasTabbableElement ? 0 : -1;
       const hasFocus = columnHeaderFocus !== null && columnHeaderFocus.field === column.field;
       const open = columnMenuState.open && columnMenuState.field === column.field;
       columns.push( /*#__PURE__*/_jsx(GridColumnHeaderItem, _extends({}, sortColumnLookup[column.field], {
@@ -229,8 +231,6 @@ export const useGridColumnHeaders = props => {
     });
   };
 
-  const getParents = (path = [], depth) => path.slice(0, depth + 1);
-
   const getColumnGroupHeaders = params => {
     if (headerGroupingMaxDepth === 0) {
       return null;
@@ -243,115 +243,55 @@ export const useGridColumnHeaders = props => {
     }
 
     const {
-      renderedColumns,
       firstColumnToRender,
-      lastColumnToRender,
-      maxLastColumn
+      lastColumnToRender
     } = columnsToRender;
     const columns = [];
     const headerToRender = [];
 
     for (let depth = 0; depth < headerGroupingMaxDepth; depth += 1) {
-      var _visibleColumns$first, _visibleColumns$first2, _visibleColumns$first3;
-
-      // Initialize the header line with a grouping item containing all the columns on the left of the virtualization which are in the same group as the first group to render
-      const initialHeader = [];
-      let leftOverflow = 0;
-      let columnIndex = firstColumnToRender - 1;
-      const firstColumnToRenderGroup = (_visibleColumns$first = visibleColumns[firstColumnToRender]) == null ? void 0 : (_visibleColumns$first2 = _visibleColumns$first.groupPath) == null ? void 0 : _visibleColumns$first2[depth]; // The array of parent is used to manage empty grouping cell
-      // When two empty grouping cell are next to each other, we merge them if the belong to the same group.
-
-      const firstColumnToRenderGroupParents = getParents((_visibleColumns$first3 = visibleColumns[firstColumnToRender]) == null ? void 0 : _visibleColumns$first3.groupPath, depth);
-
-      while (firstColumnToRenderGroup !== null && columnIndex >= minColumnIndex && (_visibleColumns$colum = visibleColumns[columnIndex]) != null && _visibleColumns$colum.groupPath && isDeepEqual(getParents((_visibleColumns$colum2 = visibleColumns[columnIndex]) == null ? void 0 : _visibleColumns$colum2.groupPath, depth), firstColumnToRenderGroupParents)) {
-        var _visibleColumns$colum, _visibleColumns$colum2, _column$computedWidth;
-
-        const column = visibleColumns[columnIndex];
-        leftOverflow += (_column$computedWidth = column.computedWidth) != null ? _column$computedWidth : 0;
-
-        if (initialHeader.length === 0) {
-          var _column$computedWidth2;
-
-          initialHeader.push({
-            width: (_column$computedWidth2 = column.computedWidth) != null ? _column$computedWidth2 : 0,
-            fields: [column.field],
-            groupId: firstColumnToRenderGroup,
-            groupParents: firstColumnToRenderGroupParents,
-            colIndex: columnIndex
-          });
-        } else {
-          var _column$computedWidth3;
-
-          initialHeader[0].width += (_column$computedWidth3 = column.computedWidth) != null ? _column$computedWidth3 : 0;
-          initialHeader[0].fields.push(column.field);
-          initialHeader[0].colIndex = columnIndex;
-        }
-
-        columnIndex -= 1;
-      }
-
-      const depthInfo = renderedColumns.reduce((aggregated, column, i) => {
-        var _column$computedWidth7;
-
-        const lastItem = aggregated[aggregated.length - 1];
-
-        if (column.groupPath && column.groupPath.length > depth) {
-          var _column$computedWidth5;
-
-          if (lastItem && lastItem.groupId === column.groupPath[depth]) {
-            var _column$computedWidth4;
-
-            // Merge with the previous columns
-            return [...aggregated.slice(0, aggregated.length - 1), _extends({}, lastItem, {
-              width: lastItem.width + ((_column$computedWidth4 = column.computedWidth) != null ? _column$computedWidth4 : 0),
-              fields: [...lastItem.fields, column.field]
-            })];
-          } // Create a new grouping
-
-
-          return [...aggregated, {
-            groupId: column.groupPath[depth],
-            groupParents: getParents(column.groupPath, depth),
-            width: (_column$computedWidth5 = column.computedWidth) != null ? _column$computedWidth5 : 0,
-            fields: [column.field],
-            colIndex: firstColumnToRender + i
-          }];
-        }
-
-        if (MERGE_EMPTY_CELLS && lastItem && lastItem.groupId === null && isDeepEqual(getParents(column.groupPath, depth), lastItem.groupParents)) {
-          var _column$computedWidth6;
-
-          // We merge with previous column
-          return [...aggregated.slice(0, aggregated.length - 1), _extends({}, lastItem, {
-            width: lastItem.width + ((_column$computedWidth6 = column.computedWidth) != null ? _column$computedWidth6 : 0),
-            fields: [...lastItem.fields, column.field]
-          })];
-        } // We create new empty cell
-
-
-        return [...aggregated, {
-          groupId: null,
-          groupParents: getParents(column.groupPath, depth),
-          width: (_column$computedWidth7 = column.computedWidth) != null ? _column$computedWidth7 : 0,
-          fields: [column.field],
-          colIndex: firstColumnToRender + i
-        }];
-      }, initialHeader);
-      columnIndex = lastColumnToRender;
-      const lastColumnToRenderGroup = depthInfo[depthInfo.length - 1].groupId;
-
-      while (lastColumnToRenderGroup !== null && columnIndex < maxLastColumn && (_visibleColumns$colum3 = visibleColumns[columnIndex]) != null && _visibleColumns$colum3.groupPath && ((_visibleColumns$colum4 = visibleColumns[columnIndex]) == null ? void 0 : (_visibleColumns$colum5 = _visibleColumns$colum4.groupPath) == null ? void 0 : _visibleColumns$colum5[depth]) === lastColumnToRenderGroup) {
-        var _visibleColumns$colum3, _visibleColumns$colum4, _visibleColumns$colum5, _column$computedWidth8;
-
-        const column = visibleColumns[columnIndex];
-        depthInfo[depthInfo.length - 1].width += (_column$computedWidth8 = column.computedWidth) != null ? _column$computedWidth8 : 0;
-        depthInfo[depthInfo.length - 1].fields.push(column.field);
-        columnIndex += 1;
-      }
-
+      var _apiRef$current$unsta, _apiRef$current$unsta2;
+
+      const rowStructure = columnGroupsHeaderStructure[depth];
+      const firstColumnFieldToRender = visibleColumns[firstColumnToRender].field;
+      const firstGroupToRender = (_apiRef$current$unsta = apiRef.current.unstable_getColumnGroupPath(firstColumnFieldToRender)[depth]) != null ? _apiRef$current$unsta : null;
+      const firstGroupIndex = rowStructure.findIndex(({
+        groupId,
+        columnFields
+      }) => groupId === firstGroupToRender && columnFields.includes(firstColumnFieldToRender));
+      const lastColumnFieldToRender = visibleColumns[lastColumnToRender - 1].field;
+      const lastGroupToRender = (_apiRef$current$unsta2 = apiRef.current.unstable_getColumnGroupPath(lastColumnFieldToRender)[depth]) != null ? _apiRef$current$unsta2 : null;
+      const lastGroupIndex = rowStructure.findIndex(({
+        groupId,
+        columnFields
+      }) => groupId === lastGroupToRender && columnFields.includes(lastColumnFieldToRender));
+      const visibleColumnGroupHeader = rowStructure.slice(firstGroupIndex, lastGroupIndex + 1).map(groupStructure => {
+        return _extends({}, groupStructure, {
+          columnFields: groupStructure.columnFields.filter(field => columnVisibility[field] !== false)
+        });
+      }).filter(groupStructure => groupStructure.columnFields.length > 0);
+      const leftOverflow = visibleColumnGroupHeader[0].columnFields.indexOf(firstColumnFieldToRender);
+      let columnIndex = firstColumnToRender;
+      const elements = visibleColumnGroupHeader.map(({
+        groupId,
+        columnFields
+      }) => {
+        const hasFocus = columnGroupHeaderFocus !== null && columnGroupHeaderFocus.depth === depth && columnFields.includes(columnGroupHeaderFocus.field);
+        const tabIndex = columnGroupHeaderTabIndexState !== null && columnGroupHeaderTabIndexState.depth === depth && columnFields.includes(columnGroupHeaderTabIndexState.field) ? 0 : -1;
+        const headerInfo = {
+          groupId,
+          width: columnFields.map(field => apiRef.current.getColumn(field).computedWidth).reduce((acc, val) => acc + val, 0),
+          fields: columnFields,
+          colIndex: columnIndex,
+          hasFocus,
+          tabIndex
+        };
+        columnIndex += columnFields.length;
+        return headerInfo;
+      });
       headerToRender.push({
         leftOverflow,
-        elements: [...depthInfo]
+        elements
       });
     }
 
@@ -367,7 +307,9 @@ export const useGridColumnHeaders = props => {
           groupId,
           width,
           fields,
-          colIndex
+          colIndex,
+          hasFocus,
+          tabIndex
         }, groupIndex) => {
           return /*#__PURE__*/_jsx(GridColumnGroupHeader, {
             groupId: groupId,
@@ -378,7 +320,9 @@ export const useGridColumnHeaders = props => {
             isLastColumn: colIndex === visibleColumns.length - fields.length,
             extendRowFullWidth: !rootProps.disableExtendRowFullWidth,
             maxDepth: headerToRender.length,
-            height: headerHeight
+            height: headerHeight,
+            hasFocus: hasFocus,
+            tabIndex: tabIndex
           }, groupIndex);
         })
       }, depthIndex));

package/hooks/features/density/densitySelector.d.ts

@@ -3,6 +3,4 @@ export declare const gridDensitySelector: (state: GridStateCommunity) => import(
 export declare const gridDensityValueSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridDensity>;
 export declare const gridDensityRowHeightSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
 export declare const gridDensityHeaderHeightSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
-export declare const gridDensityHeaderGroupingMaxDepthSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
 export declare const gridDensityFactorSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
-export declare const gridDensityTotalHeaderHeightSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;

package/hooks/features/density/densitySelector.js

@@ -3,6 +3,4 @@ export const gridDensitySelector = state => state.density;
 export const gridDensityValueSelector = createSelector(gridDensitySelector, density => density.value);
 export const gridDensityRowHeightSelector = createSelector(gridDensitySelector, density => density.rowHeight);
 export const gridDensityHeaderHeightSelector = createSelector(gridDensitySelector, density => density.headerHeight);
-export const gridDensityHeaderGroupingMaxDepthSelector = createSelector(gridDensitySelector, density => density.headerGroupingMaxDepth);
-export const gridDensityFactorSelector = createSelector(gridDensitySelector, density => density.factor);
-export const gridDensityTotalHeaderHeightSelector = createSelector(gridDensitySelector, density => density.headerHeight * (1 + density.headerGroupingMaxDepth));
+export const gridDensityFactorSelector = createSelector(gridDensitySelector, density => density.factor);

package/hooks/features/density/densityState.d.ts

@@ -3,6 +3,5 @@ export interface GridDensityState {
     value: GridDensity;
     rowHeight: number;
     headerHeight: number;
-    headerGroupingMaxDepth: number;
     factor: number;
 }

package/hooks/features/density/useGridDensity.d.ts

@@ -4,5 +4,5 @@ import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
 export declare const COMPACT_DENSITY_FACTOR = 0.7;
 export declare const COMFORTABLE_DENSITY_FACTOR = 1.3;
-export declare const densityStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'density' | 'headerHeight' | 'rowHeight' | 'columnGroupingModel'>>;
+export declare const densityStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'density' | 'headerHeight' | 'rowHeight'>>;
 export declare const useGridDensity: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'headerHeight' | 'rowHeight' | 'density'>) => void;

package/hooks/features/density/useGridDensity.js

@@ -5,20 +5,16 @@ import { useGridLogger } from '../../utils/useGridLogger';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridDensitySelector } from './densitySelector';
 import { isDeepEqual } from '../../../utils/utils';
-import { useGridSelector } from '../../utils/useGridSelector';
-import { gridVisibleColumnDefinitionsSelector } from '../columns';
-import { unwrapGroupingColumnModel } from '../columnGrouping/useGridColumnGrouping';
 export const COMPACT_DENSITY_FACTOR = 0.7;
 export const COMFORTABLE_DENSITY_FACTOR = 1.3; // TODO v6: revise keeping headerHeight and rowHeight in state
 
-const getUpdatedDensityState = (newDensity, newHeaderHeight, newRowHeight, newMaxDepth) => {
+const getUpdatedDensityState = (newDensity, newHeaderHeight, newRowHeight) => {
   switch (newDensity) {
     case GridDensityTypes.Compact:
       return {
         value: newDensity,
         headerHeight: Math.floor(newHeaderHeight * COMPACT_DENSITY_FACTOR),
         rowHeight: Math.floor(newRowHeight * COMPACT_DENSITY_FACTOR),
-        headerGroupingMaxDepth: newMaxDepth,
         factor: COMPACT_DENSITY_FACTOR
       };
 
@@ -27,7 +23,6 @@ const getUpdatedDensityState = (newDensity, newHeaderHeight, newRowHeight, newMa
         value: newDensity,
         headerHeight: Math.floor(newHeaderHeight * COMFORTABLE_DENSITY_FACTOR),
         rowHeight: Math.floor(newRowHeight * COMFORTABLE_DENSITY_FACTOR),
-        headerGroupingMaxDepth: newMaxDepth,
         factor: COMFORTABLE_DENSITY_FACTOR
       };
 
@@ -36,52 +31,21 @@ const getUpdatedDensityState = (newDensity, newHeaderHeight, newRowHeight, newMa
         value: newDensity,
         headerHeight: newHeaderHeight,
         rowHeight: newRowHeight,
-        headerGroupingMaxDepth: newMaxDepth,
         factor: 1
       };
   }
 };
 
-export const densityStateInitializer = (state, props) => {
-  // TODO: think about improving this initialization. Could it be done in the useColumn initializer?
-  // TODO: manage to remove ts-ignore
-  let maxDepth;
-
-  if (props.columnGroupingModel == null || Object.keys(props.columnGroupingModel).length === 0) {
-    maxDepth = 0;
-  } else {
-    const unwrappedGroupingColumnModel = unwrapGroupingColumnModel(props.columnGroupingModel);
-    const columnsState = state.columns;
-    const visibleColumns = columnsState.all.filter(field => columnsState.columnVisibilityModel[field] !== false);
-
-    if (visibleColumns.length === 0) {
-      maxDepth = 0;
-    } else {
-      maxDepth = Math.max(...visibleColumns.map(field => {
-        var _unwrappedGroupingCol, _unwrappedGroupingCol2;
-
-        return (_unwrappedGroupingCol = (_unwrappedGroupingCol2 = unwrappedGroupingColumnModel[field]) == null ? void 0 : _unwrappedGroupingCol2.length) != null ? _unwrappedGroupingCol : 0;
-      }));
-    }
-  }
-
-  return _extends({}, state, {
-    density: getUpdatedDensityState(props.density, props.headerHeight, props.rowHeight, maxDepth)
-  });
-};
+export const densityStateInitializer = (state, props) => _extends({}, state, {
+  density: getUpdatedDensityState(props.density, props.headerHeight, props.rowHeight)
+});
 export const useGridDensity = (apiRef, props) => {
-  const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
-  const maxDepth = visibleColumns.length > 0 ? Math.max(...visibleColumns.map(column => {
-    var _column$groupPath$len, _column$groupPath;
-
-    return (_column$groupPath$len = (_column$groupPath = column.groupPath) == null ? void 0 : _column$groupPath.length) != null ? _column$groupPath$len : 0;
-  })) : 0;
   const logger = useGridLogger(apiRef, 'useDensity');
-  const setDensity = React.useCallback((newDensity, newHeaderHeight = props.headerHeight, newRowHeight = props.rowHeight, newMaxDepth = maxDepth) => {
+  const setDensity = React.useCallback((newDensity, newHeaderHeight = props.headerHeight, newRowHeight = props.rowHeight) => {
     logger.debug(`Set grid density to ${newDensity}`);
     apiRef.current.setState(state => {
       const currentDensityState = gridDensitySelector(state);
-      const newDensityState = getUpdatedDensityState(newDensity, newHeaderHeight, newRowHeight, newMaxDepth);
+      const newDensityState = getUpdatedDensityState(newDensity, newHeaderHeight, newRowHeight);
 
       if (isDeepEqual(currentDensityState, newDensityState)) {
         return state;
@@ -92,10 +56,10 @@ export const useGridDensity = (apiRef, props) => {
       });
     });
     apiRef.current.forceUpdate();
-  }, [logger, apiRef, props.headerHeight, props.rowHeight, maxDepth]);
+  }, [logger, apiRef, props.headerHeight, props.rowHeight]);
   React.useEffect(() => {
-    apiRef.current.setDensity(props.density, props.headerHeight, props.rowHeight, maxDepth);
-  }, [apiRef, props.density, props.rowHeight, props.headerHeight, maxDepth]);
+    apiRef.current.setDensity(props.density, props.headerHeight, props.rowHeight);
+  }, [apiRef, props.density, props.rowHeight, props.headerHeight]);
   const densityApi = {
     setDensity
   };

package/hooks/features/dimensions/useGridDimensions.js

@@ -4,11 +4,12 @@ import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/use
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridColumnsTotalWidthSelector } from '../columns';
-import { gridDensityTotalHeaderHeightSelector, gridDensityRowHeightSelector } from '../density';
+import { gridDensityRowHeightSelector } from '../density';
 import { useGridSelector } from '../../utils';
 import { getVisibleRows } from '../../utils/useGridVisibleRows';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { calculatePinnedRowsHeight } from '../rows/gridRowsUtils';
+import { gridTotalHeaderHeightSelector } from '../columnGrouping/gridColumnGroupsSelector';
 const isTestEnvironment = process.env.NODE_ENV === 'test';
 
 const hasScroll = ({
@@ -42,7 +43,7 @@ export function useGridDimensions(apiRef, props) {
   const rootDimensionsRef = React.useRef(null);
   const fullDimensionsRef = React.useRef(null);
   const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
-  const totalHeaderHeight = useGridSelector(apiRef, gridDensityTotalHeaderHeightSelector);
+  const totalHeaderHeight = useGridSelector(apiRef, gridTotalHeaderHeightSelector);
   const updateGridDimensionsRef = React.useCallback(() => {
     var _apiRef$current$rootE;
 

package/hooks/features/editing/index.d.ts

@@ -0,0 +1 @@
+export * from './gridEditingSelectors';

package/hooks/features/editing/index.js

@@ -0,0 +1 @@
+export * from './gridEditingSelectors';