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

package/components/panel/filterPanel/GridFilterForm.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "multiFilterOperator", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "linkOperators", "columnsSort", "deleteIconProps", "linkOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "children"],
+const _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "multiFilterOperator", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "linkOperators", "columnsSort", "filterColumns", "deleteIconProps", "linkOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "children"],
       _excluded2 = ["InputComponentProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -13,6 +13,7 @@ import { capitalize, unstable_useId as useId } from '@mui/material/utils';
 import { styled } from '@mui/material/styles';
 import clsx from 'clsx';
 import { gridFilterableColumnDefinitionsSelector } from '../../../hooks/features/columns/gridColumnsSelector';
+import { gridFilterModelSelector } from '../../../hooks/features/filter/gridFilterSelector';
 import { useGridSelector } from '../../../hooks/utils/useGridSelector';
 import { GridLinkOperator } from '../../../models/gridFilterItem';
 import { useGridApiContext } from '../../../hooks/utils/useGridApiContext';
@@ -120,6 +121,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
     focusElementRef,
     linkOperators = [GridLinkOperator.And, GridLinkOperator.Or],
     columnsSort,
+    filterColumns,
     deleteIconProps = {},
     linkOperatorInputProps = {},
     operatorInputProps = {},
@@ -130,6 +132,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
 
   const apiRef = useGridApiContext();
   const filterableColumns = useGridSelector(apiRef, gridFilterableColumnDefinitionsSelector);
+  const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
   const columnSelectId = useId();
   const columnSelectLabelId = useId();
   const operatorSelectId = useId();
@@ -152,18 +155,30 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
   } = valueInputProps,
         valueInputPropsOther = _objectWithoutPropertiesLoose(valueInputProps, _excluded2);
 
-  const sortedFilterableColumns = React.useMemo(() => {
+  const filteredColumns = React.useMemo(() => {
+    if (filterColumns === undefined || typeof filterColumns !== 'function') {
+      return filterableColumns;
+    }
+
+    const filteredFields = filterColumns({
+      field: item.columnField,
+      columns: filterableColumns,
+      currentFilters: (filterModel == null ? void 0 : filterModel.items) || []
+    });
+    return filterableColumns.filter(column => filteredFields.includes(column.field));
+  }, [filterColumns, filterModel == null ? void 0 : filterModel.items, filterableColumns, item.columnField]);
+  const sortedFilteredColumns = React.useMemo(() => {
     switch (columnsSort) {
       case 'asc':
-        return filterableColumns.sort((a, b) => collator.compare(getColumnLabel(a), getColumnLabel(b)));
+        return filteredColumns.sort((a, b) => collator.compare(getColumnLabel(a), getColumnLabel(b)));
 
       case 'desc':
-        return filterableColumns.sort((a, b) => -collator.compare(getColumnLabel(a), getColumnLabel(b)));
+        return filteredColumns.sort((a, b) => -collator.compare(getColumnLabel(a), getColumnLabel(b)));
 
       default:
-        return filterableColumns;
+        return filteredColumns;
     }
-  }, [filterableColumns, columnsSort]);
+  }, [filteredColumns, columnsSort]);
   const currentColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null;
   const currentOperator = React.useMemo(() => {
     var _currentColumn$filter;
@@ -292,7 +307,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         onChange: changeColumn,
         native: isBaseSelectNative
       }, (_rootProps$components4 = rootProps.componentsProps) == null ? void 0 : _rootProps$components4.baseSelect, {
-        children: sortedFilterableColumns.map(col => /*#__PURE__*/_jsx(OptionComponent, {
+        children: sortedFilteredColumns.map(col => /*#__PURE__*/_jsx(OptionComponent, {
           value: col.field,
           children: getColumnLabel(col)
         }, col.field))
@@ -386,6 +401,13 @@ process.env.NODE_ENV !== "production" ? GridFilterForm.propTypes = {
    */
   disableMultiFilterOperator: PropTypes.bool,
 
+  /**
+   * Allows to filter the columns displayed in the filter form.
+   * @param {FilterColumnsArgs} args The columns of the grid and name of field.
+   * @returns {GridColDef['field'][]} The filtered fields array.
+   */
+  filterColumns: PropTypes.func,
+
   /**
    * A ref allowing to set imperative focus.
    * It can be passed to the el

package/components/panel/filterPanel/GridFilterPanel.d.ts

@@ -1,11 +1,23 @@
 import * as React from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
+import { GridFilterItem } from '../../../models/gridFilterItem';
 import { GridFilterFormProps } from './GridFilterForm';
+import { GridColDef, GridStateColDef } from '../../../models/colDef/gridColDef';
+export interface GetColumnForNewFilterArgs {
+    currentFilters: GridFilterItem[];
+    columns: GridStateColDef[];
+}
 export interface GridFilterPanelProps extends Pick<GridFilterFormProps, 'linkOperators' | 'columnsSort'> {
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
     sx?: SxProps<Theme>;
+    /**
+     * Function that returns the next filter item to be picked as default filter.
+     * @param {GetColumnForNewFilterArgs} args Currently configured filters and columns.
+     * @returns {GridColDef['field']} The field to be used for the next filter.
+     */
+    getColumnForNewFilter?: (args: GetColumnForNewFilterArgs) => GridColDef['field'];
     /**
      * Props passed to each filter form.
      */

package/components/panel/filterPanel/GridFilterPanel.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["linkOperators", "columnsSort", "filterFormProps", "children"];
+const _excluded = ["linkOperators", "columnsSort", "filterFormProps", "getColumnForNewFilter", "children"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GridLinkOperator } from '../../../models/gridFilterItem';
@@ -16,6 +16,13 @@ import { gridFilterModelSelector } from '../../../hooks/features/filter/gridFilt
 import { gridFilterableColumnDefinitionsSelector } from '../../../hooks/features/columns/gridColumnsSelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const getGridFilter = col => ({
+  columnField: col.field,
+  operatorValue: col.filterOperators[0].value,
+  id: Math.round(Math.random() * 1e5)
+});
+
 const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(props, ref) {
   var _rootProps$components;
 
@@ -28,7 +35,8 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
   const {
     linkOperators = [GridLinkOperator.And, GridLinkOperator.Or],
     columnsSort,
-    filterFormProps
+    filterFormProps,
+    getColumnForNewFilter
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -38,41 +46,71 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
   const applyFilterLinkOperator = React.useCallback(operator => {
     apiRef.current.setFilterLinkOperator(operator);
   }, [apiRef]);
-  const getDefaultItem = React.useCallback(() => {
-    const firstColumnWithOperator = filterableColumns.find(colDef => {
-      var _colDef$filterOperato;
+  const getDefaultFilter = React.useCallback(() => {
+    let nextColumnWithOperator;
+
+    if (getColumnForNewFilter && typeof getColumnForNewFilter === 'function') {
+      // To allow override the column for default (first) filter
+      const nextColumnFieldName = getColumnForNewFilter({
+        currentFilters: (filterModel == null ? void 0 : filterModel.items) || [],
+        columns: filterableColumns
+      });
+      nextColumnWithOperator = filterableColumns.find(({
+        field
+      }) => field === nextColumnFieldName);
+    } else {
+      nextColumnWithOperator = filterableColumns.find(colDef => {
+        var _colDef$filterOperato;
+
+        return (_colDef$filterOperato = colDef.filterOperators) == null ? void 0 : _colDef$filterOperato.length;
+      });
+    }
+
+    if (!nextColumnWithOperator) {
+      return null;
+    }
 
-      return (_colDef$filterOperato = colDef.filterOperators) == null ? void 0 : _colDef$filterOperato.length;
+    return getGridFilter(nextColumnWithOperator);
+  }, [filterModel == null ? void 0 : filterModel.items, filterableColumns, getColumnForNewFilter]);
+  const getNewFilter = React.useCallback(() => {
+    if (getColumnForNewFilter === undefined || typeof getColumnForNewFilter !== 'function') {
+      return getDefaultFilter();
+    }
+
+    const currentFilters = filterModel.items.length ? filterModel.items : [getDefaultFilter()].filter(Boolean); // If no items are there in filterModel, we have to pass defaultFilter
+
+    const nextColumnFieldName = getColumnForNewFilter({
+      currentFilters: currentFilters,
+      columns: filterableColumns
     });
+    const nextColumnWithOperator = filterableColumns.find(({
+      field
+    }) => field === nextColumnFieldName);
 
-    if (!firstColumnWithOperator) {
+    if (!nextColumnWithOperator) {
       return null;
     }
 
-    return {
-      columnField: firstColumnWithOperator.field,
-      operatorValue: firstColumnWithOperator.filterOperators[0].value,
-      id: Math.round(Math.random() * 1e5)
-    };
-  }, [filterableColumns]);
+    return getGridFilter(nextColumnWithOperator);
+  }, [filterModel.items, filterableColumns, getColumnForNewFilter, getDefaultFilter]);
   const items = React.useMemo(() => {
     if (filterModel.items.length) {
       return filterModel.items;
     }
 
-    const defaultItem = getDefaultItem();
-    return defaultItem ? [defaultItem] : [];
-  }, [filterModel.items, getDefaultItem]);
+    const defaultFilter = getDefaultFilter();
+    return defaultFilter ? [defaultFilter] : [];
+  }, [filterModel.items, getDefaultFilter]);
   const hasMultipleFilters = items.length > 1;
 
   const addNewFilter = () => {
-    const defaultItem = getDefaultItem();
+    const newFilter = getNewFilter();
 
-    if (!defaultItem) {
+    if (!newFilter) {
       return;
     }
 
-    apiRef.current.upsertFilterItems([...items, defaultItem]);
+    apiRef.current.upsertFilterItems([...items, newFilter]);
   };
 
   const deleteFilter = React.useCallback(item => {
@@ -149,6 +187,13 @@ process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
     valueInputProps: PropTypes.any
   }),
 
+  /**
+   * Function that returns the next filter item to be picked as default filter.
+   * @param {GetColumnForNewFilterArgs} args Currently configured filters and columns.
+   * @returns {GridColDef['field']} The field to be used for the next filter.
+   */
+  getColumnForNewFilter: PropTypes.func,
+
   /**
    * Sets the available logic operators.
    * @default [GridLinkOperator.And, GridLinkOperator.Or]

package/hooks/core/pipeProcessing/useGridRegisterPipeApplier.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { GridApiCommon } from '../../../models/api/gridApiCommon';
-export declare const useGridRegisterPipeApplier: <Api extends GridApiCommon, G extends keyof import("./gridPipeProcessingApi").GridPipeProcessingLookup>(apiRef: React.MutableRefObject<Api>, group: G, callback: () => void) => void;
+export declare const useGridRegisterPipeApplier: <Api extends GridApiCommon<any, any>, G extends keyof import("./gridPipeProcessingApi").GridPipeProcessingLookup>(apiRef: React.MutableRefObject<Api>, group: G, callback: () => void) => void;

package/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridApiCommon } from '../../../models/api/gridApiCommon';
 import { GridPipeProcessor } from './gridPipeProcessingApi';
-export declare const useGridRegisterPipeProcessor: <Api extends GridApiCommon, G extends keyof import("./gridPipeProcessingApi").GridPipeProcessingLookup>(apiRef: React.MutableRefObject<Api>, group: G, callback: GridPipeProcessor<G>) => void;
+export declare const useGridRegisterPipeProcessor: <Api extends GridApiCommon<any, any>, G extends keyof import("./gridPipeProcessingApi").GridPipeProcessingLookup>(apiRef: React.MutableRefObject<Api>, group: G, callback: GridPipeProcessor<G>) => void;

package/hooks/core/strategyProcessing/useGridRegisterStrategyProcessor.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridApiCommon } from '../../../models/api/gridApiCommon';
 import { GridStrategyProcessor } from './gridStrategyProcessingApi';
-export declare const useGridRegisterStrategyProcessor: <Api extends GridApiCommon, G extends keyof import("./gridStrategyProcessingApi").GridStrategyProcessingLookup>(apiRef: React.MutableRefObject<Api>, strategyName: string, group: G, processor: GridStrategyProcessor<G>) => void;
+export declare const useGridRegisterStrategyProcessor: <Api extends GridApiCommon<any, any>, G extends keyof import("./gridStrategyProcessingApi").GridStrategyProcessingLookup>(apiRef: React.MutableRefObject<Api>, strategyName: string, group: G, processor: GridStrategyProcessor<G>) => void;

package/hooks/core/useGridInitialization.d.ts

@@ -4,4 +4,4 @@ import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 /**
  * Initialize the technical pieces of the DataGrid (logger, state, ...) that any DataGrid implementation needs
  */
-export declare const useGridInitialization: <Api extends GridApiCommon>(inputApiRef: React.MutableRefObject<Api> | undefined, props: Pick<DataGridProcessedProps, 'signature' | 'logger' | 'logLevel' | 'error' | 'localeText'>) => React.MutableRefObject<Api>;
+export declare const useGridInitialization: <Api extends GridApiCommon<any, any>>(inputApiRef: React.MutableRefObject<Api> | undefined, props: Pick<DataGridProcessedProps, 'signature' | 'logger' | 'logLevel' | 'error' | 'localeText'>) => React.MutableRefObject<Api>;

package/hooks/core/useGridStateInitialization.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import { GridApiCommon } from '../../models/api/gridApiCommon';
-export declare const useGridStateInitialization: <Api extends GridApiCommon>(apiRef: React.MutableRefObject<Api>, props: Pick<DataGridProcessedProps, 'signature'>) => void;
+export declare const useGridStateInitialization: <Api extends GridApiCommon<any, any>>(apiRef: React.MutableRefObject<Api>, props: Pick<DataGridProcessedProps, 'signature'>) => void;

package/hooks/features/columnGrouping/gridColumnGroupsInterfaces.d.ts

@@ -1,7 +1,16 @@
 import { GridColumnGroup } from '../../../models/gridColumnGrouping';
 export declare type GridColumnGroupLookup = {
-    [field: string]: Omit<GridColumnGroup, 'children'>;
+    [groupId: string]: Omit<GridColumnGroup, 'children'>;
+};
+export declare type GridGroupingStructure = {
+    groupId: null | string;
+    columnFields: string[];
 };
 export interface GridColumnsGroupingState {
     lookup: GridColumnGroupLookup;
+    headerStructure: GridGroupingStructure[][];
+    unwrappedGroupingModel: {
+        [columnField: string]: GridColumnGroup['groupId'][];
+    };
+    maxDepth: number;
 }

package/hooks/features/columnGrouping/gridColumnGroupsSelector.d.ts

@@ -4,4 +4,10 @@ import { GridStateCommunity } from '../../../models/gridStateCommunity';
  * @ignore - do not document.
  */
 export declare const gridColumnGroupingSelector: (state: GridStateCommunity) => import("./gridColumnGroupsInterfaces").GridColumnsGroupingState;
+export declare const gridColumnGroupsUnwrappedModelSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, {
+    [columnField: string]: string[];
+}>;
 export declare const gridColumnGroupsLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridColumnGroupsInterfaces").GridColumnGroupLookup>;
+export declare const gridColumnGroupsHeaderStructureSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridColumnGroupsInterfaces").GridGroupingStructure[][]>;
+export declare const gridColumnGroupsHeaderMaxDepthSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
+export declare const gridTotalHeaderHeightSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;

package/hooks/features/columnGrouping/gridColumnGroupsSelector.js

@@ -5,4 +5,37 @@ import { createSelector } from '../../../utils/createSelector';
  * @ignore - do not document.
  */
 export const gridColumnGroupingSelector = state => state.columnGrouping;
-export const gridColumnGroupsLookupSelector = createSelector(gridColumnGroupingSelector, columnGrouping => columnGrouping.lookup);
+export const gridColumnGroupsUnwrappedModelSelector = createSelector(gridColumnGroupingSelector, columnGrouping => {
+  var _columnGrouping$unwra;
+
+  return (_columnGrouping$unwra = columnGrouping == null ? void 0 : columnGrouping.unwrappedGroupingModel) != null ? _columnGrouping$unwra : {};
+});
+export const gridColumnGroupsLookupSelector = createSelector(gridColumnGroupingSelector, columnGrouping => {
+  var _columnGrouping$looku;
+
+  return (_columnGrouping$looku = columnGrouping == null ? void 0 : columnGrouping.lookup) != null ? _columnGrouping$looku : {};
+});
+export const gridColumnGroupsHeaderStructureSelector = createSelector(gridColumnGroupingSelector, columnGrouping => {
+  var _columnGrouping$heade;
+
+  return (_columnGrouping$heade = columnGrouping == null ? void 0 : columnGrouping.headerStructure) != null ? _columnGrouping$heade : [];
+});
+export const gridColumnGroupsHeaderMaxDepthSelector = createSelector(gridColumnGroupingSelector, columnGrouping => {
+  var _columnGrouping$maxDe;
+
+  return (_columnGrouping$maxDe = columnGrouping == null ? void 0 : columnGrouping.maxDepth) != null ? _columnGrouping$maxDe : 0;
+});
+
+const getGroupingHeader = state => ({
+  columnGrouping: state.columnGrouping,
+  density: state.density
+});
+
+export const gridTotalHeaderHeightSelector = createSelector(getGroupingHeader, ({
+  columnGrouping,
+  density
+}) => {
+  var _columnGrouping$maxDe2;
+
+  return density.headerHeight * (((_columnGrouping$maxDe2 = columnGrouping == null ? void 0 : columnGrouping.maxDepth) != null ? _columnGrouping$maxDe2 : 0) + 1);
+});

package/hooks/features/columnGrouping/gridColumnGroupsUtils.d.ts

@@ -0,0 +1,15 @@
+import { GridColumnGroupingModel, GridColumnGroup } from '../../../models/gridColumnGrouping';
+import { GridColDef } from '../../../models/colDef';
+import { GridGroupingStructure } from './gridColumnGroupsInterfaces';
+declare type UnwrappedGroupingModel = {
+    [key: GridColDef['field']]: GridColumnGroup['groupId'][];
+};
+/**
+ * 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 declare const unwrapGroupingColumnModel: (columnGroupingModel?: GridColumnGroupingModel) => UnwrappedGroupingModel;
+export declare const getColumnGroupsHeaderStructure: (orderedColumns: string[], unwrappedGroupingModel: UnwrappedGroupingModel) => GridGroupingStructure[][];
+export {};

package/hooks/features/columnGrouping/gridColumnGroupsUtils.js

@@ -0,0 +1,89 @@
+import { isLeaf } from '../../../models/gridColumnGrouping';
+import { isDeepEqual } from '../../../utils/utils';
+
+// 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;
+};
+export const getColumnGroupsHeaderStructure = (orderedColumns, unwrappedGroupingModel) => {
+  const getParents = field => {
+    var _unwrappedGroupingMod;
+
+    return (_unwrappedGroupingMod = unwrappedGroupingModel[field]) != null ? _unwrappedGroupingMod : [];
+  };
+
+  const groupingHeaderStructure = [];
+  const maxDepth = Math.max(...orderedColumns.map(field => getParents(field).length));
+
+  const haveSameParents = (field1, field2, depth) => isDeepEqual(getParents(field1).slice(0, depth + 1), getParents(field2).slice(0, depth + 1));
+
+  for (let depth = 0; depth < maxDepth; depth += 1) {
+    const depthStructure = orderedColumns.reduce((structure, newField) => {
+      var _getParents$depth;
+
+      const groupId = (_getParents$depth = getParents(newField)[depth]) != null ? _getParents$depth : null;
+
+      if (structure.length === 0) {
+        return [{
+          columnFields: [newField],
+          groupId
+        }];
+      }
+
+      const lastGroup = structure[structure.length - 1];
+      const prevField = lastGroup.columnFields[lastGroup.columnFields.length - 1];
+      const prevGroupId = lastGroup.groupId;
+
+      if (prevGroupId !== groupId || !haveSameParents(prevField, newField, depth)) {
+        // It's a new group
+        return [...structure, {
+          columnFields: [newField],
+          groupId
+        }];
+      } // It extends the previous group
+
+
+      return [...structure.slice(0, structure.length - 1), {
+        columnFields: [...lastGroup.columnFields, newField],
+        groupId
+      }];
+    }, []);
+    groupingHeaderStructure.push(depthStructure);
+  }
+
+  return groupingHeaderStructure;
+};

package/hooks/features/columnGrouping/useGridColumnGrouping.d.ts

@@ -2,23 +2,9 @@ import * as React from 'react';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
-import { GridColumnGroupingModel, GridColumnGroup } from '../../../models/gridColumnGrouping';
-import { GridStateColDef, GridColDef } from '../../../models/colDef';
-export declare function hasGroupPath(lookupElement: GridColDef | GridStateColDef): lookupElement is GridStateColDef;
-declare type UnwrappedGroupingModel = {
-    [key: GridColDef['field']]: GridColumnGroup['groupId'][];
-};
-/**
- * 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 declare const unwrapGroupingColumnModel: (columnGroupingModel?: GridColumnGroupingModel) => UnwrappedGroupingModel;
-export declare const columnGroupsStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'columnGroupingModel'>>;
+export declare const columnGroupsStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'columnGroupingModel' | 'experimentalFeatures'>>;
 /**
  * @requires useGridColumns (method, event)
  * @requires useGridParamsApi (method)
  */
 export declare const useGridColumnGrouping: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'columnGroupingModel' | 'experimentalFeatures'>) => void;
-export {};