@mui/x-data-grid-premium 5.11.0

package/modern/hooks/features/rowGrouping/createGroupingColDef.js

@@ -0,0 +1,302 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["leafField", "mainGroupingCriteria", "hideDescendantCount"],
+      _excluded2 = ["leafField", "mainGroupingCriteria", "hideDescendantCount"];
+import * as React from 'react';
+import { GRID_STRING_COL_DEF } from '@mui/x-data-grid-pro';
+import { GridGroupingCriteriaCell } from '../../../components/GridGroupingCriteriaCell';
+import { GridGroupingColumnLeafCell } from '../../../components/GridGroupingColumnLeafCell';
+import { getRowGroupingFieldFromGroupingCriteria, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD } from './gridRowGroupingUtils';
+import { gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const GROUPING_COL_DEF_DEFAULT_PROPERTIES = _extends({}, GRID_STRING_COL_DEF, {
+  disableReorder: true
+});
+
+const GROUPING_COL_DEF_FORCED_PROPERTIES = {
+  type: 'rowGroupByColumnsGroup',
+  editable: false,
+  groupable: false
+};
+/**
+ * When sorting two cells with different grouping criteria, we consider that the cell with the grouping criteria coming first in the model should be displayed below.
+ * This can occur when some rows don't have all the fields. In which case we want the rows with the missing field to be displayed above.
+ * TODO: Make this index comparator depth invariant, the logic should not be inverted when sorting in the "desc" direction (but the current return format of `sortComparator` does not support this behavior).
+ */
+
+const groupingFieldIndexComparator = (v1, v2, cellParams1, cellParams2) => {
+  const model = gridRowGroupingSanitizedModelSelector(cellParams1.api.state, cellParams1.api.instanceId);
+  const groupingField1 = cellParams1.rowNode.groupingField;
+  const groupingField2 = cellParams2.rowNode.groupingField;
+
+  if (groupingField1 === groupingField2) {
+    return 0;
+  }
+
+  if (groupingField1 == null) {
+    return -1;
+  }
+
+  if (groupingField2 == null) {
+    return 1;
+  }
+
+  if (model.indexOf(groupingField1) < model.indexOf(groupingField2)) {
+    return -1;
+  }
+
+  return 1;
+};
+
+const getLeafProperties = leafColDef => ({
+  headerName: leafColDef.headerName ?? leafColDef.field,
+  sortable: leafColDef.sortable,
+  filterable: leafColDef.filterable,
+  filterOperators: leafColDef.filterOperators?.map(operator => _extends({}, operator, {
+    getApplyFilterFn: (filterItem, column) => {
+      const originalFn = operator.getApplyFilterFn(filterItem, column);
+
+      if (!originalFn) {
+        return null;
+      }
+
+      return params => {
+        // We only want to filter leaves
+        if (params.rowNode.groupingField != null) {
+          return true;
+        }
+
+        return originalFn(params);
+      };
+    }
+  })),
+  sortComparator: (v1, v2, cellParams1, cellParams2) => {
+    // We only want to sort the leaves
+    if (cellParams1.rowNode.groupingField === null && cellParams2.rowNode.groupingField === null) {
+      return leafColDef.sortComparator(v1, v2, cellParams1, cellParams2);
+    }
+
+    return groupingFieldIndexComparator(v1, v2, cellParams1, cellParams2);
+  }
+});
+
+const getGroupingCriteriaProperties = (groupedByColDef, applyHeaderName) => {
+  const properties = {
+    sortable: groupedByColDef.sortable,
+    filterable: groupedByColDef.filterable,
+    sortComparator: (v1, v2, cellParams1, cellParams2) => {
+      // We only want to sort the groups of the current grouping criteria
+      if (cellParams1.rowNode.groupingField === groupedByColDef.field && cellParams2.rowNode.groupingField === groupedByColDef.field) {
+        return groupedByColDef.sortComparator(v1, v2, cellParams1, cellParams2);
+      }
+
+      return groupingFieldIndexComparator(v1, v2, cellParams1, cellParams2);
+    },
+    filterOperators: groupedByColDef.filterOperators?.map(operator => _extends({}, operator, {
+      getApplyFilterFn: (filterItem, column) => {
+        const originalFn = operator.getApplyFilterFn(filterItem, column);
+
+        if (!originalFn) {
+          return null;
+        }
+
+        return params => {
+          // We only want to filter the groups of the current grouping criteria
+          if (params.rowNode.groupingField !== groupedByColDef.field) {
+            return true;
+          }
+
+          return originalFn(params);
+        };
+      }
+    }))
+  };
+
+  if (applyHeaderName) {
+    properties.headerName = groupedByColDef.headerName ?? groupedByColDef.field;
+  }
+
+  return properties;
+};
+
+/**
+ * Creates the `GridColDef` for a grouping column that only takes care of a single grouping criteria
+ */
+export const createGroupingColDefForOneGroupingCriteria = ({
+  columnsLookup,
+  groupedByColDef,
+  groupingCriteria,
+  colDefOverride
+}) => {
+  const _ref = colDefOverride ?? {},
+        {
+    leafField,
+    mainGroupingCriteria,
+    hideDescendantCount
+  } = _ref,
+        colDefOverrideProperties = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  const leafColDef = leafField ? columnsLookup[leafField] : null; // The properties that do not depend on the presence of a `leafColDef` and that can be overridden by `colDefOverride`
+
+  const commonProperties = {
+    width: Math.max((groupedByColDef.width ?? GRID_STRING_COL_DEF.width) + 40, leafColDef?.width ?? 0),
+    renderCell: params => {
+      // Render leaves
+      if (params.rowNode.groupingField == null) {
+        if (leafColDef) {
+          const leafParams = _extends({}, params.api.getCellParams(params.id, leafField), {
+            api: params.api
+          });
+
+          if (leafColDef.renderCell) {
+            return leafColDef.renderCell(leafParams);
+          }
+
+          return /*#__PURE__*/_jsx(GridGroupingColumnLeafCell, _extends({}, leafParams));
+        }
+
+        return '';
+      } // Render current grouping criteria groups
+
+
+      if (params.rowNode.groupingField === groupingCriteria) {
+        return /*#__PURE__*/_jsx(GridGroupingCriteriaCell, _extends({}, params, {
+          hideDescendantCount: hideDescendantCount
+        }));
+      }
+
+      return '';
+    },
+    valueGetter: params => {
+      if (!params.rowNode) {
+        return undefined;
+      }
+
+      if (params.rowNode.groupingField == null) {
+        if (leafColDef) {
+          return params.api.getCellValue(params.id, leafField);
+        }
+
+        return undefined;
+      }
+
+      if (params.rowNode.groupingField === groupingCriteria) {
+        return params.rowNode.groupingKey;
+      }
+
+      return undefined;
+    }
+  }; // If we have a `mainGroupingCriteria` defined and matching the `groupingCriteria`
+  // Then we apply the sorting / filtering on the groups of this column's grouping criteria based on the properties of `groupedByColDef`.
+  // It can be useful to define a `leafField` for leaves rendering but still use the grouping criteria for the sorting / filtering
+  //
+  // If we have a `leafField` defined and matching an existing column
+  // Then we apply the sorting / filtering on the leaves based on the properties of `leavesColDef`
+  //
+  // By default, we apply the sorting / filtering on the groups of this column's grouping criteria based on the properties of `groupedColDef`.
+
+  let sourceProperties;
+
+  if (mainGroupingCriteria && mainGroupingCriteria === groupingCriteria) {
+    sourceProperties = getGroupingCriteriaProperties(groupedByColDef, true);
+  } else if (leafColDef) {
+    sourceProperties = getLeafProperties(leafColDef);
+  } else {
+    sourceProperties = getGroupingCriteriaProperties(groupedByColDef, true);
+  } // The properties that can't be overridden with `colDefOverride`
+
+
+  const forcedProperties = _extends({
+    field: getRowGroupingFieldFromGroupingCriteria(groupingCriteria)
+  }, GROUPING_COL_DEF_FORCED_PROPERTIES);
+
+  return _extends({}, GROUPING_COL_DEF_DEFAULT_PROPERTIES, commonProperties, sourceProperties, colDefOverrideProperties, forcedProperties);
+};
+
+/**
+ * Creates the `GridColDef` for a grouping column that takes care of all the grouping criteria
+ */
+export const createGroupingColDefForAllGroupingCriteria = ({
+  apiRef,
+  columnsLookup,
+  rowGroupingModel,
+  colDefOverride
+}) => {
+  const _ref2 = colDefOverride ?? {},
+        {
+    leafField,
+    mainGroupingCriteria,
+    hideDescendantCount
+  } = _ref2,
+        colDefOverrideProperties = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+
+  const leafColDef = leafField ? columnsLookup[leafField] : null; // The properties that do not depend on the presence of a `leafColDef` and that can be overridden by `colDefOverride`
+
+  const commonProperties = {
+    headerName: apiRef.current.getLocaleText('groupingColumnHeaderName'),
+    width: Math.max(...rowGroupingModel.map(field => (columnsLookup[field].width ?? GRID_STRING_COL_DEF.width) + 40), leafColDef?.width ?? 0),
+    renderCell: params => {
+      // Render the leaves
+      if (params.rowNode.groupingField == null) {
+        if (leafColDef) {
+          const leafParams = _extends({}, params.api.getCellParams(params.id, leafField), {
+            api: params.api
+          });
+
+          if (leafColDef.renderCell) {
+            return leafColDef.renderCell(leafParams);
+          }
+
+          return /*#__PURE__*/_jsx(GridGroupingColumnLeafCell, _extends({}, leafParams));
+        }
+
+        return '';
+      } // Render the groups
+
+
+      return /*#__PURE__*/_jsx(GridGroupingCriteriaCell, _extends({}, params, {
+        hideDescendantCount: hideDescendantCount
+      }));
+    },
+    valueGetter: params => {
+      if (!params.rowNode) {
+        return undefined;
+      }
+
+      if (params.rowNode.groupingField == null) {
+        if (leafColDef) {
+          return params.api.getCellValue(params.id, leafField);
+        }
+
+        return undefined;
+      }
+
+      return params.rowNode.groupingKey;
+    }
+  }; // If we have a `mainGroupingCriteria` defined and matching one of the `orderedGroupedByFields`
+  // Then we apply the sorting / filtering on the groups of this column's grouping criteria based on the properties of `columnsLookup[mainGroupingCriteria]`.
+  // It can be useful to use another grouping criteria than the top level one for the sorting / filtering
+  //
+  // If we have a `leafField` defined and matching an existing column
+  // Then we apply the sorting / filtering on the leaves based on the properties of `leavesColDef`
+  //
+  // By default, we apply the sorting / filtering on the groups of the top level grouping criteria based on the properties of `columnsLookup[orderedGroupedByFields[0]]`.
+
+  let sourceProperties;
+
+  if (mainGroupingCriteria && rowGroupingModel.includes(mainGroupingCriteria)) {
+    sourceProperties = getGroupingCriteriaProperties(columnsLookup[mainGroupingCriteria], true);
+  } else if (leafColDef) {
+    sourceProperties = getLeafProperties(leafColDef);
+  } else {
+    sourceProperties = getGroupingCriteriaProperties(columnsLookup[rowGroupingModel[0]], rowGroupingModel.length === 1);
+  } // The properties that can't be overridden with `colDefOverride`
+
+
+  const forcedProperties = _extends({
+    field: GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD
+  }, GROUPING_COL_DEF_FORCED_PROPERTIES);
+
+  return _extends({}, GROUPING_COL_DEF_DEFAULT_PROPERTIES, commonProperties, sourceProperties, colDefOverrideProperties, forcedProperties);
+};

package/modern/hooks/features/rowGrouping/gridRowGroupingInterfaces.js

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

package/modern/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/modern/hooks/features/rowGrouping/gridRowGroupingUtils.js

@@ -0,0 +1,137 @@
+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) => {
+    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?.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.children?.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/modern/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/modern/hooks/features/rowGrouping/useGridRowGrouping.js

@@ -0,0 +1,192 @@
+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) => _extends({}, state, {
+  rowGrouping: {
+    model: props.rowGroupingModel ?? props.initialState?.rowGrouping?.model ?? [],
+    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 ?? 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) => {
+    if (props.disableRowGrouping) {
+      return params;
+    }
+
+    const rowGroupingModel = context.stateToRestore.rowGrouping?.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) {
+      event.stopPropagation();
+      event.preventDefault();
+      const filteredDescendantCount = gridFilteredDescendantCountLookupSelector(apiRef)[params.id] ?? 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]);
+};