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

package/node/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -5,9 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.columnGroupsStateInitializer = void 0;
-exports.hasGroupPath = hasGroupPath;
-exports.useGridColumnGrouping = exports.unwrapGroupingColumnModel = void 0;
+exports.useGridColumnGrouping = exports.columnGroupsStateInitializer = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -19,60 +17,21 @@ var _gridColumnGrouping = require("../../../models/gridColumnGrouping");
 
 var _gridColumnGroupsSelector = require("./gridColumnGroupsSelector");
 
-var _gridColumnsSelector = require("../columns/gridColumnsSelector");
-
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 
-const _excluded = ["groupId", "children"];
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function hasGroupPath(lookupElement) {
-  return lookupElement.groupPath !== undefined;
-}
+var _gridColumnGroupsUtils = require("./gridColumnGroupsUtils");
 
-// This is the recurrence function that help writing `unwrapGroupingColumnModel()`
-const recurrentUnwrapGroupingColumnModel = (columnGroupNode, parents, unwrappedGroupingModelToComplet) => {
-  if ((0, _gridColumnGrouping.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;
-  }
+var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 
-  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`
- */
+var _columns = require("../columns");
 
+var _useGridSelector = require("../../utils/useGridSelector");
 
-const unwrapGroupingColumnModel = columnGroupingModel => {
-  if (!columnGroupingModel) {
-    return {};
-  }
+const _excluded = ["groupId", "children"];
 
-  const unwrappedSubTree = {};
-  columnGroupingModel.forEach(columnGroupNode => {
-    recurrentUnwrapGroupingColumnModel(columnGroupNode, [], unwrappedSubTree);
-  });
-  return unwrappedSubTree;
-};
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-exports.unwrapGroupingColumnModel = unwrapGroupingColumnModel;
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const createGroupLookup = columnGroupingModel => {
   let groupLookup = {};
@@ -111,14 +70,29 @@ const createGroupLookup = columnGroupingModel => {
   return (0, _extends2.default)({}, groupLookup);
 };
 
-const columnGroupsStateInitializer = (state, props) => {
-  var _props$columnGrouping;
+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 = (0, _columns.gridColumnFieldsSelector)(apiRef);
+  const visibleColumnFields = (0, _columns.gridVisibleColumnFieldsSelector)(apiRef);
   const groupLookup = createGroupLookup((_props$columnGrouping = props.columnGroupingModel) != null ? _props$columnGrouping : []);
+  const unwrappedGroupingModel = (0, _gridColumnGroupsUtils.unwrapGroupingColumnModel)((_props$columnGrouping2 = props.columnGroupingModel) != null ? _props$columnGrouping2 : []);
+  const columnGroupsHeaderStructure = (0, _gridColumnGroupsUtils.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 (0, _extends2.default)({}, state, {
     columnGrouping: {
       lookup: groupLookup,
-      groupCollapsedModel: {}
+      unwrappedGroupingModel,
+      headerStructure: columnGroupsHeaderStructure,
+      maxDepth
     }
   });
 };
@@ -131,16 +105,16 @@ const columnGroupsStateInitializer = (state, props) => {
 exports.columnGroupsStateInitializer = columnGroupsStateInitializer;
 
 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 = (0, _gridColumnsSelector.gridColumnLookupSelector)(apiRef);
-    return (_columnLookup$field$g = (_columnLookup$field = columnLookup[field]) == null ? void 0 : _columnLookup$field.groupPath) != null ? _columnLookup$field$g : [];
+    const unwrappedGroupingModel = (0, _gridColumnGroupsSelector.gridColumnGroupsUnwrappedModelSelector)(apiRef);
+    return (_unwrappedGroupingMod3 = unwrappedGroupingModel[field]) != null ? _unwrappedGroupingMod3 : [];
   }, [apiRef]);
   const getAllGroupDetails = React.useCallback(() => {
     const columnGroupLookup = (0, _gridColumnGroupsSelector.gridColumnGroupsLookupSelector)(apiRef);
@@ -151,32 +125,55 @@ const useGridColumnGrouping = (apiRef, props) => {
     unstable_getAllGroupDetails: getAllGroupDetails
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, columnGroupingApi, 'GridColumnGroupingApi');
+  const handleColumnReorderChange = React.useCallback(() => {
+    var _props$columnGrouping3;
+
+    const unwrappedGroupingModel = (0, _gridColumnGroupsUtils.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 = (0, _gridColumnGroupsUtils.getColumnGroupsHeaderStructure)(orderedFields, unwrappedGroupingModel);
+      return (0, _extends2.default)({}, state, {
+        columnGrouping: (0, _extends2.default)({}, state.columnGrouping, {
+          headerStructure: columnGroupsHeaderStructure
+        })
+      });
+    });
+  }, [apiRef, props.columnGroupingModel]);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnOrderChange', handleColumnReorderChange);
+  const columnFields = (0, _useGridSelector.useGridSelector)(apiRef, _columns.gridColumnFieldsSelector);
+  const visibleColumnFields = (0, _useGridSelector.useGridSelector)(apiRef, _columns.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 = (0, _gridColumnGroupsUtils.unwrapGroupingColumnModel)((_props$columnGrouping5 = props.columnGroupingModel) != null ? _props$columnGrouping5 : []);
+    const columnGroupsHeaderStructure = (0, _gridColumnGroupsUtils.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 => (0, _extends2.default)({}, state, {
-      columnGrouping: (0, _extends2.default)({}, 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 (0, _extends2.default)({}, state, {
+        columnGrouping: {
+          lookup: groupLookup,
+          unwrappedGroupingModel,
+          headerStructure: columnGroupsHeaderStructure,
+          maxDepth
+        }
+      });
+    });
+  }, [apiRef, columnFields, visibleColumnFields, props.columnGroupingModel, (_props$experimentalFe3 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe3.columnGrouping]);
 };
 
 exports.useGridColumnGrouping = useGridColumnGrouping;

package/node/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -49,7 +49,7 @@ var _useGridVirtualScroller = require("../virtualization/useGridVirtualScroller"
 
 var _GridColumnGroupHeader = require("../../../components/columnHeaders/GridColumnGroupHeader");
 
-var _utils2 = require("../../../utils/utils");
+var _gridColumnGroupsSelector = require("../columnGrouping/gridColumnGroupsSelector");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -57,8 +57,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-// TODO: add the possibility to switch this value if needed for customization
-const MERGE_EMPTY_CELLS = true;
 const GridColumnHeaderRow = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnHeaderRow',
@@ -81,15 +79,19 @@ const useGridColumnHeaders = props => {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const visibleColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector);
   const columnPositions = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnPositionsSelector);
-  const tabIndexState = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridTabIndexColumnHeaderSelector);
+  const columnHeaderTabIndexState = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridTabIndexColumnHeaderSelector);
   const cellTabIndexState = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridTabIndexCellSelector);
+  const columnGroupHeaderTabIndexState = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.unstable_gridTabIndexColumnGroupHeaderSelector);
   const columnHeaderFocus = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridFocusColumnHeaderSelector);
+  const columnGroupHeaderFocus = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.unstable_gridFocusColumnGroupHeaderSelector);
   const headerHeight = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityHeaderHeightSelector);
-  const headerGroupingMaxDepth = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityHeaderGroupingMaxDepthSelector);
-  const totalHeaderHeight = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityTotalHeaderHeightSelector);
+  const headerGroupingMaxDepth = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsHeaderMaxDepthSelector);
+  const totalHeaderHeight = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridTotalHeaderHeightSelector);
   const filterColumnLookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridFilterActiveItemsLookupSelector);
   const sortColumnLookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridSortingSelector.gridSortColumnLookupSelector);
   const columnMenuState = (0, _useGridSelector.useGridSelector)(apiRef, _columnMenuSelector.gridColumnMenuSelector);
+  const columnVisibility = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnVisibilityModelSelector);
+  const columnGroupsHeaderStructure = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsHeaderStructureSelector);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const innerRef = React.useRef(null);
   const handleInnerRef = (0, _utils.useForkRef)(innerRefProp, innerRef);
@@ -239,8 +241,8 @@ 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__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderItem.GridColumnHeaderItem, (0, _extends2.default)({}, sortColumnLookup[column.field], {
@@ -265,8 +267,6 @@ const useGridColumnHeaders = props => {
     });
   };
 
-  const getParents = (path = [], depth) => path.slice(0, depth + 1);
-
   const getColumnGroupHeaders = params => {
     if (headerGroupingMaxDepth === 0) {
       return null;
@@ -279,115 +279,55 @@ 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 && (0, _utils2.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), (0, _extends2.default)({}, 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 && (0, _utils2.isDeepEqual)(getParents(column.groupPath, depth), lastItem.groupParents)) {
-          var _column$computedWidth6;
-
-          // We merge with previous column
-          return [...aggregated.slice(0, aggregated.length - 1), (0, _extends2.default)({}, 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 (0, _extends2.default)({}, 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
       });
     }
 
@@ -403,7 +343,9 @@ const useGridColumnHeaders = props => {
           groupId,
           width,
           fields,
-          colIndex
+          colIndex,
+          hasFocus,
+          tabIndex
         }, groupIndex) => {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnGroupHeader.GridColumnGroupHeader, {
             groupId: groupId,
@@ -414,7 +356,9 @@ 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/node/hooks/features/density/densitySelector.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridDensityValueSelector = exports.gridDensityTotalHeaderHeightSelector = exports.gridDensitySelector = exports.gridDensityRowHeightSelector = exports.gridDensityHeaderHeightSelector = exports.gridDensityHeaderGroupingMaxDepthSelector = exports.gridDensityFactorSelector = void 0;
+exports.gridDensityValueSelector = exports.gridDensitySelector = exports.gridDensityRowHeightSelector = exports.gridDensityHeaderHeightSelector = exports.gridDensityFactorSelector = void 0;
 
 var _createSelector = require("../../../utils/createSelector");
 
@@ -16,9 +16,5 @@ const gridDensityRowHeightSelector = (0, _createSelector.createSelector)(gridDen
 exports.gridDensityRowHeightSelector = gridDensityRowHeightSelector;
 const gridDensityHeaderHeightSelector = (0, _createSelector.createSelector)(gridDensitySelector, density => density.headerHeight);
 exports.gridDensityHeaderHeightSelector = gridDensityHeaderHeightSelector;
-const gridDensityHeaderGroupingMaxDepthSelector = (0, _createSelector.createSelector)(gridDensitySelector, density => density.headerGroupingMaxDepth);
-exports.gridDensityHeaderGroupingMaxDepthSelector = gridDensityHeaderGroupingMaxDepthSelector;
 const gridDensityFactorSelector = (0, _createSelector.createSelector)(gridDensitySelector, density => density.factor);
-exports.gridDensityFactorSelector = gridDensityFactorSelector;
-const gridDensityTotalHeaderHeightSelector = (0, _createSelector.createSelector)(gridDensitySelector, density => density.headerHeight * (1 + density.headerGroupingMaxDepth));
-exports.gridDensityTotalHeaderHeightSelector = gridDensityTotalHeaderHeightSelector;
+exports.gridDensityFactorSelector = gridDensityFactorSelector;

package/node/hooks/features/density/useGridDensity.js

@@ -21,12 +21,6 @@ var _densitySelector = require("./densitySelector");
 
 var _utils = require("../../../utils/utils");
 
-var _useGridSelector = require("../../utils/useGridSelector");
-
-var _columns = require("../columns");
-
-var _useGridColumnGrouping = require("../columnGrouping/useGridColumnGrouping");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -37,14 +31,13 @@ const COMFORTABLE_DENSITY_FACTOR = 1.3; // TODO v6: revise keeping headerHeight
 
 exports.COMFORTABLE_DENSITY_FACTOR = COMFORTABLE_DENSITY_FACTOR;
 
-const getUpdatedDensityState = (newDensity, newHeaderHeight, newRowHeight, newMaxDepth) => {
+const getUpdatedDensityState = (newDensity, newHeaderHeight, newRowHeight) => {
   switch (newDensity) {
     case _gridDensity.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
       };
 
@@ -53,7 +46,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
       };
 
@@ -62,55 +54,24 @@ const getUpdatedDensityState = (newDensity, newHeaderHeight, newRowHeight, newMa
         value: newDensity,
         headerHeight: newHeaderHeight,
         rowHeight: newRowHeight,
-        headerGroupingMaxDepth: newMaxDepth,
         factor: 1
       };
   }
 };
 
-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 = (0, _useGridColumnGrouping.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 (0, _extends2.default)({}, state, {
-    density: getUpdatedDensityState(props.density, props.headerHeight, props.rowHeight, maxDepth)
-  });
-};
+const densityStateInitializer = (state, props) => (0, _extends2.default)({}, state, {
+  density: getUpdatedDensityState(props.density, props.headerHeight, props.rowHeight)
+});
 
 exports.densityStateInitializer = densityStateInitializer;
 
 const useGridDensity = (apiRef, props) => {
-  const visibleColumns = (0, _useGridSelector.useGridSelector)(apiRef, _columns.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 = (0, _useGridLogger.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 = (0, _densitySelector.gridDensitySelector)(state);
-      const newDensityState = getUpdatedDensityState(newDensity, newHeaderHeight, newRowHeight, newMaxDepth);
+      const newDensityState = getUpdatedDensityState(newDensity, newHeaderHeight, newRowHeight);
 
       if ((0, _utils.isDeepEqual)(currentDensityState, newDensityState)) {
         return state;
@@ -121,10 +82,10 @@ 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/node/hooks/features/dimensions/useGridDimensions.js

@@ -27,6 +27,8 @@ var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 
 var _gridRowsUtils = require("../rows/gridRowsUtils");
 
+var _gridColumnGroupsSelector = require("../columnGrouping/gridColumnGroupsSelector");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -64,7 +66,7 @@ function useGridDimensions(apiRef, props) {
   const rootDimensionsRef = React.useRef(null);
   const fullDimensionsRef = React.useRef(null);
   const rowsMeta = (0, _utils2.useGridSelector)(apiRef, _gridRowsMetaSelector.gridRowsMetaSelector);
-  const totalHeaderHeight = (0, _utils2.useGridSelector)(apiRef, _density.gridDensityTotalHeaderHeightSelector);
+  const totalHeaderHeight = (0, _utils2.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridTotalHeaderHeightSelector);
   const updateGridDimensionsRef = React.useCallback(() => {
     var _apiRef$current$rootE;
 

package/node/hooks/features/{editRows → editing}/index.js

@@ -4,15 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _gridEditRowsSelector = require("./gridEditRowsSelector");
+var _gridEditingSelectors = require("./gridEditingSelectors");
 
-Object.keys(_gridEditRowsSelector).forEach(function (key) {
+Object.keys(_gridEditingSelectors).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _gridEditRowsSelector[key]) return;
+  if (key in exports && exports[key] === _gridEditingSelectors[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _gridEditRowsSelector[key];
+      return _gridEditingSelectors[key];
     }
   });
 });