@mui/x-data-grid-premium 5.11.0

package/hooks/features/rowGrouping/gridRowGroupingInterfaces.d.ts

@@ -0,0 +1,37 @@
+export declare type GridRowGroupingModel = string[];
+export interface GridRowGroupingState {
+    model: GridRowGroupingModel;
+    /**
+     * Tracks the model on the last pre-processing
+     * Allows to check if we need to re-build the grouping columns when the grid upserts a column.
+     * TODO: Move outside of the state
+     */
+    unstable_sanitizedModelOnLastRowTreeCreation: GridRowGroupingModel;
+}
+export interface GridRowGroupingInitialState {
+    model?: GridRowGroupingModel;
+}
+export interface GridRowGroupingApi {
+    /**
+     * Sets the columns to use as grouping criteria.
+     * @param {GridRowGroupingModel} model The columns to use as grouping criteria.
+     */
+    setRowGroupingModel: (model: GridRowGroupingModel) => void;
+    /**
+     * Adds the field to the row grouping model.
+     * @param {string} groupingCriteriaField The field from which we want to group the rows.
+     * @param {number | undefined} groupingIndex The grouping index at which we want to insert the new grouping criteria. By default, it will be inserted at the end of the model.
+     */
+    addRowGroupingCriteria: (groupingCriteriaField: string, groupingIndex?: number) => void;
+    /**
+     * Remove the field from the row grouping model.
+     * @param {string} groupingCriteriaField The field from which we want to stop grouping the rows.
+     */
+    removeRowGroupingCriteria: (groupingCriteriaField: string) => void;
+    /**
+     * Sets the grouping index of a grouping criteria.
+     * @param {string} groupingCriteriaField The field of the grouping criteria from which we want to change the grouping index.
+     * @param {number} groupingIndex The new grouping index of this grouping criteria.
+     */
+    setRowGroupingCriteriaIndex: (groupingCriteriaField: string, groupingIndex: number) => void;
+}

package/hooks/features/rowGrouping/gridRowGroupingInterfaces.js

@@ -0,0 +1 @@
+export {};

package/hooks/features/rowGrouping/gridRowGroupingSelector.d.ts

@@ -0,0 +1,4 @@
+import { GridStatePremium } from '../../../models/gridStatePremium';
+export declare const gridRowGroupingStateSelector: (state: GridStatePremium) => import("./gridRowGroupingInterfaces").GridRowGroupingState;
+export declare const gridRowGroupingModelSelector: import("@mui/x-data-grid-pro").OutputSelector<GridStatePremium, import("./gridRowGroupingInterfaces").GridRowGroupingModel>;
+export declare const gridRowGroupingSanitizedModelSelector: import("@mui/x-data-grid-pro").OutputSelector<GridStatePremium, string[]>;

package/hooks/features/rowGrouping/gridRowGroupingSelector.js

@@ -0,0 +1,5 @@
+import { gridColumnLookupSelector } from '@mui/x-data-grid-pro';
+import { createSelector } from '@mui/x-data-grid-pro/internals';
+export const gridRowGroupingStateSelector = state => state.rowGrouping;
+export const gridRowGroupingModelSelector = createSelector(gridRowGroupingStateSelector, rowGrouping => rowGrouping.model);
+export const gridRowGroupingSanitizedModelSelector = createSelector(gridRowGroupingModelSelector, gridColumnLookupSelector, (model, columnsLookup) => model.filter(field => !!columnsLookup[field] && columnsLookup[field].groupable));

package/hooks/features/rowGrouping/gridRowGroupingUtils.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { GridRowTreeConfig, GridFilterState } from '@mui/x-data-grid-pro';
+import { GridAggregatedFilterItemApplier } from '@mui/x-data-grid-pro/internals';
+import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
+import { GridRowGroupingModel } from './gridRowGroupingInterfaces';
+import { GridStatePremium } from '../../../models/gridStatePremium';
+import { GridApiPremium } from '../../../models/gridApiPremium';
+export declare const GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = "__row_group_by_columns_group__";
+export declare const ROW_GROUPING_STRATEGY = "grouping-columns";
+export declare const getRowGroupingFieldFromGroupingCriteria: (groupingCriteria: string | null) => string;
+export declare const getRowGroupingCriteriaFromGroupingField: (groupingColDefField: string) => string | null;
+export declare const isGroupingColumn: (field: string) => boolean;
+interface FilterRowTreeFromTreeDataParams {
+    rowTree: GridRowTreeConfig;
+    isRowMatchingFilters: GridAggregatedFilterItemApplier | null;
+}
+/**
+ * A leaf is visible if it passed the filter
+ * A group is visible if all the following criteria are met:
+ * - One of its children is passing the filter
+ * - It is passing the filter
+ */
+export declare const filterRowTreeFromGroupingColumns: (params: FilterRowTreeFromTreeDataParams) => Omit<GridFilterState, 'filterModel'>;
+export declare const getColDefOverrides: (groupingColDefProp: DataGridPremiumProcessedProps['groupingColDef'], fields: string[]) => import("@mui/x-data-grid-pro").GridGroupingColDefOverride<any> | null | undefined;
+export declare const mergeStateWithRowGroupingModel: (rowGroupingModel: GridRowGroupingModel) => (state: GridStatePremium) => GridStatePremium;
+export declare const setStrategyAvailability: (apiRef: React.MutableRefObject<GridApiPremium>, disableRowGrouping: boolean) => void;
+export {};

package/hooks/features/rowGrouping/gridRowGroupingUtils.js

@@ -0,0 +1,139 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
+export const GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = '__row_group_by_columns_group__';
+export const ROW_GROUPING_STRATEGY = 'grouping-columns';
+export const getRowGroupingFieldFromGroupingCriteria = groupingCriteria => {
+  if (groupingCriteria === null) {
+    return GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD;
+  }
+
+  return `__row_group_by_columns_group_${groupingCriteria}__`;
+};
+export const getRowGroupingCriteriaFromGroupingField = groupingColDefField => {
+  const match = groupingColDefField.match(/^__row_group_by_columns_group_(.*)__$/);
+
+  if (!match) {
+    return null;
+  }
+
+  return match[1];
+};
+export const isGroupingColumn = field => field === GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD || getRowGroupingCriteriaFromGroupingField(field) !== null;
+
+/**
+ * When filtering a group, we only want to filter according to the items related to this grouping column.
+ */
+const shouldApplyFilterItemOnGroup = (columnField, node) => {
+  if (columnField === GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD) {
+    return true;
+  }
+
+  const groupingCriteriaField = getRowGroupingCriteriaFromGroupingField(columnField);
+  return groupingCriteriaField === node.groupingField;
+};
+/**
+ * A leaf is visible if it passed the filter
+ * A group is visible if all the following criteria are met:
+ * - One of its children is passing the filter
+ * - It is passing the filter
+ */
+
+
+export const filterRowTreeFromGroupingColumns = params => {
+  const {
+    rowTree,
+    isRowMatchingFilters
+  } = params;
+  const visibleRowsLookup = {};
+  const filteredRowsLookup = {};
+  const filteredDescendantCountLookup = {};
+
+  const filterTreeNode = (node, areAncestorsPassingChildren, areAncestorsExpanded) => {
+    var _node$children, _node$children2;
+
+    let isMatchingFilters;
+
+    if (!isRowMatchingFilters) {
+      isMatchingFilters = true;
+    } else {
+      const shouldApplyItem = node.isAutoGenerated ? columnField => shouldApplyFilterItemOnGroup(columnField, node) : undefined;
+      isMatchingFilters = isRowMatchingFilters(node.id, shouldApplyItem);
+    }
+
+    let filteredDescendantCount = 0;
+    (_node$children = node.children) == null ? void 0 : _node$children.forEach(childId => {
+      const childNode = rowTree[childId];
+      const childSubTreeSize = filterTreeNode(childNode, areAncestorsPassingChildren && isMatchingFilters, areAncestorsExpanded && !!node.childrenExpanded);
+      filteredDescendantCount += childSubTreeSize;
+    });
+    let shouldPassFilters;
+
+    if (!areAncestorsPassingChildren) {
+      shouldPassFilters = false;
+    } else if ((_node$children2 = node.children) != null && _node$children2.length) {
+      shouldPassFilters = isMatchingFilters && filteredDescendantCount > 0;
+    } else {
+      shouldPassFilters = isMatchingFilters;
+    }
+
+    visibleRowsLookup[node.id] = shouldPassFilters && areAncestorsExpanded;
+    filteredRowsLookup[node.id] = shouldPassFilters;
+
+    if (!shouldPassFilters) {
+      return 0;
+    }
+
+    filteredDescendantCountLookup[node.id] = filteredDescendantCount;
+
+    if (!node.children) {
+      return filteredDescendantCount + 1;
+    }
+
+    return filteredDescendantCount;
+  };
+
+  const nodes = Object.values(rowTree);
+
+  for (let i = 0; i < nodes.length; i += 1) {
+    const node = nodes[i];
+
+    if (node.depth === 0) {
+      filterTreeNode(node, true, true);
+    }
+  }
+
+  return {
+    visibleRowsLookup,
+    filteredRowsLookup,
+    filteredDescendantCountLookup
+  };
+};
+export const getColDefOverrides = (groupingColDefProp, fields) => {
+  if (typeof groupingColDefProp === 'function') {
+    return groupingColDefProp({
+      groupingName: ROW_GROUPING_STRATEGY,
+      fields
+    });
+  }
+
+  return groupingColDefProp;
+};
+export const mergeStateWithRowGroupingModel = rowGroupingModel => state => _extends({}, state, {
+  rowGrouping: _extends({}, state.rowGrouping, {
+    model: rowGroupingModel
+  })
+});
+export const setStrategyAvailability = (apiRef, disableRowGrouping) => {
+  let isAvailable;
+
+  if (disableRowGrouping) {
+    isAvailable = () => false;
+  } else {
+    isAvailable = () => {
+      const rowGroupingSanitizedModel = gridRowGroupingSanitizedModelSelector(apiRef);
+      return rowGroupingSanitizedModel.length > 0;
+    };
+  }
+
+  apiRef.current.unstable_setStrategyAvailability('rowTree', ROW_GROUPING_STRATEGY, isAvailable);
+};

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

@@ -0,0 +1,3 @@
+export * from './gridRowGroupingSelector';
+export * from './gridRowGroupingInterfaces';
+export { GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, getRowGroupingFieldFromGroupingCriteria, } from './gridRowGroupingUtils';

package/hooks/features/rowGrouping/index.js

@@ -0,0 +1,3 @@
+export * from './gridRowGroupingSelector';
+export * from './gridRowGroupingInterfaces';
+export { GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, getRowGroupingFieldFromGroupingCriteria } from './gridRowGroupingUtils';

package/hooks/features/rowGrouping/useGridRowGrouping.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { GridStateInitializer } from '@mui/x-data-grid-pro/internals';
+import { GridApiPremium } from '../../../models/gridApiPremium';
+import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
+export declare const rowGroupingStateInitializer: GridStateInitializer<Pick<DataGridPremiumProcessedProps, 'rowGroupingModel' | 'initialState'>>;
+/**
+ * @requires useGridColumns (state, method) - can be after, async only
+ * @requires useGridRows (state, method) - can be after, async only
+ * @requires useGridParamsApi (method) - can be after, async only
+ */
+export declare const useGridRowGrouping: (apiRef: React.MutableRefObject<GridApiPremium>, props: Pick<DataGridPremiumProcessedProps, 'initialState' | 'rowGroupingModel' | 'onRowGroupingModelChange' | 'defaultGroupingExpansionDepth' | 'isGroupExpandedByDefault' | 'groupingColDef' | 'rowGroupingColumnMode' | 'disableRowGrouping'>) => void;

package/hooks/features/rowGrouping/useGridRowGrouping.js

@@ -0,0 +1,200 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import Divider from '@mui/material/Divider';
+import { useGridApiEventHandler, useGridApiMethod, gridFilteredDescendantCountLookupSelector } from '@mui/x-data-grid-pro';
+import { useGridRegisterPipeProcessor, isDeepEqual } from '@mui/x-data-grid-pro/internals';
+import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector, gridRowGroupingStateSelector } from './gridRowGroupingSelector';
+import { getRowGroupingFieldFromGroupingCriteria, ROW_GROUPING_STRATEGY, isGroupingColumn, mergeStateWithRowGroupingModel, setStrategyAvailability } from './gridRowGroupingUtils';
+import { GridRowGroupableColumnMenuItems } from '../../../components/GridRowGroupableColumnMenuItems';
+import { GridRowGroupingColumnMenuItems } from '../../../components/GridRowGroupingColumnMenuItems';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const rowGroupingStateInitializer = (state, props) => {
+  var _ref, _props$rowGroupingMod, _props$initialState, _props$initialState$r;
+
+  return _extends({}, state, {
+    rowGrouping: {
+      model: (_ref = (_props$rowGroupingMod = props.rowGroupingModel) != null ? _props$rowGroupingMod : (_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$r = _props$initialState.rowGrouping) == null ? void 0 : _props$initialState$r.model) != null ? _ref : [],
+      unstable_sanitizedModelOnLastRowTreeCreation: []
+    }
+  });
+};
+/**
+ * @requires useGridColumns (state, method) - can be after, async only
+ * @requires useGridRows (state, method) - can be after, async only
+ * @requires useGridParamsApi (method) - can be after, async only
+ */
+
+export const useGridRowGrouping = (apiRef, props) => {
+  apiRef.current.unstable_updateControlState({
+    stateId: 'rowGrouping',
+    propModel: props.rowGroupingModel,
+    propOnChange: props.onRowGroupingModelChange,
+    stateSelector: gridRowGroupingModelSelector,
+    changeEvent: 'rowGroupingModelChange'
+  });
+  /**
+   * API METHODS
+   */
+
+  const setRowGroupingModel = React.useCallback(model => {
+    const currentModel = gridRowGroupingModelSelector(apiRef);
+
+    if (currentModel !== model) {
+      apiRef.current.setState(mergeStateWithRowGroupingModel(model));
+      setStrategyAvailability(apiRef, props.disableRowGrouping);
+      apiRef.current.forceUpdate();
+    }
+  }, [apiRef, props.disableRowGrouping]);
+  const addRowGroupingCriteria = React.useCallback((field, groupingIndex) => {
+    const currentModel = gridRowGroupingModelSelector(apiRef);
+
+    if (currentModel.includes(field)) {
+      return;
+    }
+
+    const cleanGroupingIndex = groupingIndex != null ? groupingIndex : currentModel.length;
+    const updatedModel = [...currentModel.slice(0, cleanGroupingIndex), field, ...currentModel.slice(cleanGroupingIndex)];
+    apiRef.current.setRowGroupingModel(updatedModel);
+  }, [apiRef]);
+  const removeRowGroupingCriteria = React.useCallback(field => {
+    const currentModel = gridRowGroupingModelSelector(apiRef);
+
+    if (!currentModel.includes(field)) {
+      return;
+    }
+
+    apiRef.current.setRowGroupingModel(currentModel.filter(el => el !== field));
+  }, [apiRef]);
+  const setRowGroupingCriteriaIndex = React.useCallback((field, targetIndex) => {
+    const currentModel = gridRowGroupingModelSelector(apiRef);
+    const currentTargetIndex = currentModel.indexOf(field);
+
+    if (currentTargetIndex === -1) {
+      return;
+    }
+
+    const updatedModel = [...currentModel];
+    updatedModel.splice(targetIndex, 0, updatedModel.splice(currentTargetIndex, 1)[0]);
+    apiRef.current.setRowGroupingModel(updatedModel);
+  }, [apiRef]);
+  const rowGroupingApi = {
+    setRowGroupingModel,
+    addRowGroupingCriteria,
+    removeRowGroupingCriteria,
+    setRowGroupingCriteriaIndex
+  };
+  useGridApiMethod(apiRef, rowGroupingApi, 'GridRowGroupingApi');
+  /**
+   * PRE-PROCESSING
+   */
+
+  const addColumnMenuButtons = React.useCallback((initialValue, columns) => {
+    if (props.disableRowGrouping) {
+      return initialValue;
+    }
+
+    let menuItems;
+
+    if (isGroupingColumn(columns.field)) {
+      menuItems = /*#__PURE__*/_jsx(GridRowGroupingColumnMenuItems, {});
+    } else if (columns.groupable) {
+      menuItems = /*#__PURE__*/_jsx(GridRowGroupableColumnMenuItems, {});
+    } else {
+      menuItems = null;
+    }
+
+    if (menuItems == null) {
+      return initialValue;
+    }
+
+    return [...initialValue, /*#__PURE__*/_jsx(Divider, {}), menuItems];
+  }, [props.disableRowGrouping]);
+  const stateExportPreProcessing = React.useCallback(prevState => {
+    if (props.disableRowGrouping) {
+      return prevState;
+    }
+
+    const rowGroupingModelToExport = gridRowGroupingModelSelector(apiRef);
+
+    if (rowGroupingModelToExport.length === 0) {
+      return prevState;
+    }
+
+    return _extends({}, prevState, {
+      rowGrouping: {
+        model: rowGroupingModelToExport
+      }
+    });
+  }, [apiRef, props.disableRowGrouping]);
+  const stateRestorePreProcessing = React.useCallback((params, context) => {
+    var _context$stateToResto;
+
+    if (props.disableRowGrouping) {
+      return params;
+    }
+
+    const rowGroupingModel = (_context$stateToResto = context.stateToRestore.rowGrouping) == null ? void 0 : _context$stateToResto.model;
+
+    if (rowGroupingModel != null) {
+      apiRef.current.setState(mergeStateWithRowGroupingModel(rowGroupingModel));
+    }
+
+    return params;
+  }, [apiRef, props.disableRowGrouping]);
+  useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuButtons);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  /**
+   * EVENTS
+   */
+
+  const handleCellKeyDown = React.useCallback((params, event) => {
+    const cellParams = apiRef.current.getCellParams(params.id, params.field);
+
+    if (isGroupingColumn(cellParams.field) && event.key === ' ' && !event.shiftKey) {
+      var _gridFilteredDescenda;
+
+      event.stopPropagation();
+      event.preventDefault();
+      const filteredDescendantCount = (_gridFilteredDescenda = gridFilteredDescendantCountLookupSelector(apiRef)[params.id]) != null ? _gridFilteredDescenda : 0;
+      const isOnGroupingCell = props.rowGroupingColumnMode === 'single' || getRowGroupingFieldFromGroupingCriteria(params.rowNode.groupingField) === params.field;
+
+      if (!isOnGroupingCell || filteredDescendantCount === 0) {
+        return;
+      }
+
+      apiRef.current.setRowChildrenExpansion(params.id, !params.rowNode.childrenExpanded);
+    }
+  }, [apiRef, props.rowGroupingColumnMode]);
+  const checkGroupingColumnsModelDiff = React.useCallback(() => {
+    const rowGroupingModel = gridRowGroupingSanitizedModelSelector(apiRef);
+    const lastGroupingColumnsModelApplied = gridRowGroupingStateSelector(apiRef.current.state).unstable_sanitizedModelOnLastRowTreeCreation;
+
+    if (!isDeepEqual(lastGroupingColumnsModelApplied, rowGroupingModel)) {
+      apiRef.current.setState(state => _extends({}, state, {
+        rowGrouping: _extends({}, state.rowGrouping, {
+          unstable_sanitizedModelOnLastRowTreeCreation: rowGroupingModel
+        })
+      }));
+      apiRef.current.unstable_requestPipeProcessorsApplication('hydrateColumns');
+      setStrategyAvailability(apiRef, props.disableRowGrouping); // Refresh the row tree creation strategy processing
+      // TODO: Add a clean way to re-run a strategy processing without publishing a private event
+
+      if (apiRef.current.unstable_getActiveStrategy('rowTree') === ROW_GROUPING_STRATEGY) {
+        apiRef.current.publishEvent('activeStrategyProcessorChange', 'rowTreeCreation');
+      }
+    }
+  }, [apiRef, props.disableRowGrouping]);
+  useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
+  useGridApiEventHandler(apiRef, 'columnsChange', checkGroupingColumnsModelDiff);
+  useGridApiEventHandler(apiRef, 'rowGroupingModelChange', checkGroupingColumnsModelDiff);
+  /**
+   * EFFECTS
+   */
+
+  React.useEffect(() => {
+    if (props.rowGroupingModel !== undefined) {
+      apiRef.current.setRowGroupingModel(props.rowGroupingModel);
+    }
+  }, [apiRef, props.rowGroupingModel]);
+};

package/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
+import { GridApiPremium } from '../../../models/gridApiPremium';
+export declare const useGridRowGroupingPreProcessors: (apiRef: React.MutableRefObject<GridApiPremium>, props: Pick<DataGridPremiumProcessedProps, 'disableRowGrouping' | 'groupingColDef' | 'rowGroupingColumnMode' | 'defaultGroupingExpansionDepth' | 'isGroupExpandedByDefault'>) => void;

package/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.js

@@ -0,0 +1,201 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { gridColumnLookupSelector, gridRowIdsSelector, gridRowTreeSelector, useFirstRender } from '@mui/x-data-grid-pro';
+import { useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor, sortRowTree, buildRowTree } from '@mui/x-data-grid-pro/internals';
+import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
+import { createGroupingColDefForAllGroupingCriteria, createGroupingColDefForOneGroupingCriteria } from './createGroupingColDef';
+import { filterRowTreeFromGroupingColumns, getColDefOverrides, ROW_GROUPING_STRATEGY, isGroupingColumn, setStrategyAvailability } from './gridRowGroupingUtils';
+export const useGridRowGroupingPreProcessors = (apiRef, props) => {
+  const getGroupingColDefs = React.useCallback(columnsState => {
+    if (props.disableRowGrouping) {
+      return [];
+    }
+
+    const groupingColDefProp = props.groupingColDef; // We can't use `gridGroupingRowsSanitizedModelSelector` here because the new columns are not in the state yet
+
+    const rowGroupingModel = gridRowGroupingModelSelector(apiRef).filter(field => !!columnsState.lookup[field]);
+
+    if (rowGroupingModel.length === 0) {
+      return [];
+    }
+
+    switch (props.rowGroupingColumnMode) {
+      case 'single':
+        {
+          return [createGroupingColDefForAllGroupingCriteria({
+            apiRef,
+            rowGroupingModel,
+            colDefOverride: getColDefOverrides(groupingColDefProp, rowGroupingModel),
+            columnsLookup: columnsState.lookup
+          })];
+        }
+
+      case 'multiple':
+        {
+          return rowGroupingModel.map(groupingCriteria => createGroupingColDefForOneGroupingCriteria({
+            groupingCriteria,
+            colDefOverride: getColDefOverrides(groupingColDefProp, [groupingCriteria]),
+            groupedByColDef: columnsState.lookup[groupingCriteria],
+            columnsLookup: columnsState.lookup
+          }));
+        }
+
+      default:
+        {
+          return [];
+        }
+    }
+  }, [apiRef, props.groupingColDef, props.rowGroupingColumnMode, props.disableRowGrouping]);
+  const updateGroupingColumn = React.useCallback(columnsState => {
+    const groupingColDefs = getGroupingColDefs(columnsState);
+    let newColumnFields = [];
+    const newColumnsLookup = {}; // We only keep the non-grouping columns
+
+    columnsState.all.forEach(field => {
+      if (!isGroupingColumn(field)) {
+        newColumnFields.push(field);
+        newColumnsLookup[field] = columnsState.lookup[field];
+      }
+    }); // We add the grouping column
+
+    groupingColDefs.forEach(groupingColDef => {
+      const matchingGroupingColDef = columnsState.lookup[groupingColDef.field];
+
+      if (matchingGroupingColDef) {
+        groupingColDef.width = matchingGroupingColDef.width;
+        groupingColDef.flex = matchingGroupingColDef.flex;
+      }
+
+      newColumnsLookup[groupingColDef.field] = groupingColDef;
+    });
+    const startIndex = newColumnFields[0] === '__check__' ? 1 : 0;
+    newColumnFields = [...newColumnFields.slice(0, startIndex), ...groupingColDefs.map(colDef => colDef.field), ...newColumnFields.slice(startIndex)];
+    columnsState.all = newColumnFields;
+    columnsState.lookup = newColumnsLookup;
+    return columnsState;
+  }, [getGroupingColDefs]);
+  const createRowTree = React.useCallback(params => {
+    const rowGroupingModel = gridRowGroupingSanitizedModelSelector(apiRef);
+    const columnsLookup = gridColumnLookupSelector(apiRef);
+    apiRef.current.setState(state => _extends({}, state, {
+      rowGrouping: _extends({}, state.rowGrouping, {
+        unstable_sanitizedModelOnLastRowTreeCreation: rowGroupingModel
+      })
+    }));
+    const distinctValues = Object.fromEntries(rowGroupingModel.map(groupingField => [groupingField, {
+      lookup: {},
+      list: []
+    }]));
+
+    const getCellGroupingCriteria = ({
+      row,
+      id,
+      colDef
+    }) => {
+      let key;
+
+      if (colDef.groupingValueGetter) {
+        const groupingValueGetterParams = {
+          colDef,
+          field: colDef.field,
+          value: row[colDef.field],
+          id,
+          row,
+          rowNode: {
+            isAutoGenerated: false,
+            id
+          }
+        };
+        key = colDef.groupingValueGetter(groupingValueGetterParams);
+      } else {
+        key = row[colDef.field];
+      }
+
+      return {
+        key,
+        field: colDef.field
+      };
+    };
+
+    params.ids.forEach(rowId => {
+      const row = params.idRowsLookup[rowId];
+      rowGroupingModel.forEach(groupingCriteria => {
+        const {
+          key
+        } = getCellGroupingCriteria({
+          row,
+          id: rowId,
+          colDef: columnsLookup[groupingCriteria]
+        });
+        const groupingFieldsDistinctKeys = distinctValues[groupingCriteria];
+
+        if (key != null && !groupingFieldsDistinctKeys.lookup[key.toString()]) {
+          groupingFieldsDistinctKeys.lookup[key.toString()] = true;
+          groupingFieldsDistinctKeys.list.push(key);
+        }
+      });
+    });
+    const rows = params.ids.map(rowId => {
+      const row = params.idRowsLookup[rowId];
+      const parentPath = rowGroupingModel.map(groupingField => getCellGroupingCriteria({
+        row,
+        id: rowId,
+        colDef: columnsLookup[groupingField]
+      })).filter(cell => cell.key != null);
+      const leafGroupingCriteria = {
+        key: rowId.toString(),
+        field: null
+      };
+      return {
+        path: [...parentPath, leafGroupingCriteria],
+        id: rowId
+      };
+    });
+    return buildRowTree(_extends({}, params, {
+      rows,
+      defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
+      isGroupExpandedByDefault: props.isGroupExpandedByDefault,
+      groupingName: ROW_GROUPING_STRATEGY
+    }));
+  }, [apiRef, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault]);
+  const filterRows = React.useCallback(params => {
+    const rowTree = gridRowTreeSelector(apiRef);
+    return filterRowTreeFromGroupingColumns({
+      rowTree,
+      isRowMatchingFilters: params.isRowMatchingFilters
+    });
+  }, [apiRef]);
+  const sortRows = React.useCallback(params => {
+    const rowTree = gridRowTreeSelector(apiRef);
+    const rowIds = gridRowIdsSelector(apiRef);
+    return sortRowTree({
+      rowTree,
+      rowIds,
+      sortRowList: params.sortRowList,
+      disableChildrenSorting: false
+    });
+  }, [apiRef]);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', updateGroupingColumn);
+  useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'rowTreeCreation', createRowTree);
+  useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'filtering', filterRows);
+  useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'sorting', sortRows);
+  /**
+   * 1ST RENDER
+   */
+
+  useFirstRender(() => {
+    setStrategyAvailability(apiRef, props.disableRowGrouping);
+  });
+  /**
+   * EFFECTS
+   */
+
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (!isFirstRender.current) {
+      setStrategyAvailability(apiRef, props.disableRowGrouping);
+    } else {
+      isFirstRender.current = false;
+    }
+  }, [apiRef, props.disableRowGrouping]);
+};

package/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './features';
+export * from './utils';

package/hooks/index.js

@@ -0,0 +1,3 @@
+// Only export the variable and types that should be publicly exposed and re-exported from `@mui/x-data-grid-premium`
+export * from './features';
+export * from './utils';

package/hooks/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/hooks/index.js",
+  "types": "./index.d.ts"
+}

package/hooks/utils/index.d.ts

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

package/hooks/utils/index.js

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