@mui/x-data-grid-pro 5.6.1 → 5.7.0

package/CHANGELOG.md

@@ -3,13 +3,83 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.7.0
+
+_Mar 24, 2022_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- ✏ Add a new editing API with better support for server-side persistence and validation (#3963, #4060) @m4theushw
+
+  The new API is stable, but to avoid any breaking changes or conflicts with the old API, you must add the following flag to access it:
+
+  ```tsx
+  <DataGrid experimentalFeatures={{ newEditingApi: true }} />
+  ```
+
+  ⚠ Users relying on the old API (legacy) don't need to worry as it will continue to work until v6.
+
+  The new API also features brand new documentation with more useful demos and guides explaining how to create custom edit components.
+  Visit the new [documentation](https://mui.com/components/data-grid/editing/) for more information.
+
+- 📚 Documentation improvements
+- 🐞 Bug and typo fixes
+
+### `@mui/x-data-grid@v5.7.0` / `@mui/x-data-grid-pro@v5.7.0`
+
+#### Changes
+
+- [DataGrid] Add column order and dimensions to the portable state (#3816) @flaviendelangle
+- [DataGrid] Add new editing API (#3963) @m4theushw
+- [DataGrid] Allow to customize `ColumnsPanel` with `componentsProps` prop (#4207) @alexfauquette
+- [DataGrid] Do not unselect row when <kbd>Shift</kbd> + click on the last selected row of a range (#4196) @flaviendelangle
+- [DataGrid] Fix `showCellRightBorder` not working in the last row (#4140) @cherniavskii
+- [DataGrid] Fix error overlay not visible when `autoHeight` is enabled (#4110) @cherniavskii
+- [DataGrid] Fix white blank when scrolling (#4158) @alexfauquette
+- [DataGrid] Adjust type of the `description` prop in `GridColumnHeaderTitle` (#4247) @baahrens
+- [DataGrid] Fix focus after stopping row edit mode (#4252) @m4theushw
+- [DataGridPro] Fix pinned columns edge overflow with custom `borderRadius` (#4188) @socramm9
+- [DataGridPro] Fix tab switching order with pinned columns and `editMode="row"` (#4198) @cherniavskii
+- [l10n] Improve Persian (fa-IR) locale (#4227) @SaeedZhiany
+- [l10n] Improve Polish (pl-PL) locale (#4153) @pbmchc
+- [l10n] Improve Arabic (ar-SD) locale (#4212) @shadigaafar
+- [l10n] Improve Korean (ko-KR) locale (#4245) @kyeongsoosoo
+
+### Docs
+
+- [docs] Clean demo (#4073) @alexfauquette
+- [docs] Delete restore state demos (#4220) @flaviendelangle
+- [docs] Document Print export `X-Frame-Options` limitation (#4222) @DanailH
+- [docs] Add docs for the new editing API (#4060) @m4theushw
+- [docs] Explain how to use `printOptions.pageStyle` (#4138) @alexfauquette
+- [docs] Fix 301 links (#4165) @oliviertassinari
+- [docs] Fix 404 API links (#4164) @oliviertassinari
+- [docs] Fix broken anchor links (#4162) @alexfauquette
+- [docs] Remove useless `apiRef` from demos (#4221) @flaviendelangle
+- [docs] Sync the headers with core (#4195) @oliviertassinari
+
+### Core
+
+- [core] Add CLI to decode license key (#4126) @flaviendelangle
+- [core] Fix Lerna package change detection (#4202) @oliviertassinari
+- [core] Implement strategy pattern for pre-processors (#4030) @flaviendelangle
+- [core] Keep same reference to the column visibility model if no column has changed (#4154) @m4theushw
+- [core] Prepare `@mui/x-license-pro` for date pickers (#4123) @flaviendelangle
+- [core] Remove datagen from `@mui/x-data-grid-generator` bundle (#4163) @m4theushw
+- [core] Remove lodash `isDeepEqual` (#4159) @flaviendelangle
+- [core] Use a pipe processor for `GridPreferencePanel` children (#4216) @flaviendelangle
+- [core] Add markdown documentation for contributors (#3447) @alexfauquette
+- [test] Add regression test for `showCellRightBorder` (#4191) @cherniavskii
+- [test] Mock `getComputedStyle` to speed up unit tests (#4142) @m4theushw
+- [test] Upgrade CircleCI convenience image (#4143) @m4theushw
+
 ## 5.6.1
 
 _Mar 10, 2022_
 
 We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
 
-- [DataGrid] Allow to add margins or borders between rows (#3848) @m4theushw
+- ✨ Allow to add margins or borders between rows (#3848) @m4theushw
 
   ```tsx
   <DataGrid getRowSpacing={() => ({ top: 10, bottom: 10 })} />

package/DataGridPro/DataGridPro.js

@@ -1,28 +1,20 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { LicenseInfo } from '@mui/x-license-pro';
-import { chainPropTypes, ponyfillGlobal } from '@mui/utils';
+import { useLicenseVerifier, Watermark } from '@mui/x-license-pro';
+import { chainPropTypes } from '@mui/utils';
 import { GridBody, GridErrorHandler, GridFooterPlaceholder, GridHeaderPlaceholder, GridRoot, GridContextProvider } from '@mui/x-data-grid';
 import { useDataGridProComponent } from './useDataGridProComponent';
-import { Watermark } from '../components/Watermark';
 import { useDataGridProProps } from './useDataGridProProps';
 import { DataGridProVirtualScroller } from '../components/DataGridProVirtualScroller';
-import { DataGridProColumnHeaders } from '../components/DataGridProColumnHeaders'; // This is the package release date. Each package version should update this const
-// automatically when a new version is published on npm.
-
+import { DataGridProColumnHeaders } from '../components/DataGridProColumnHeaders';
+import { getReleaseInfo } from '../utils/releaseInfo';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-let RELEASE_INFO = "MTY0Njg2NjgwMDAwMA=="; // eslint-disable-next-line no-useless-concat
-
-if (process.env.NODE_ENV !== 'production' && RELEASE_INFO === '__RELEASE' + '_INFO__') {
-  // eslint-disable-next-line no-underscore-dangle
-  RELEASE_INFO = ponyfillGlobal.__MUI_RELEASE_INFO__;
-}
-
-LicenseInfo.setReleaseInfo(RELEASE_INFO);
+const releaseInfo = getReleaseInfo();
 const DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProps, ref) {
   const props = useDataGridProProps(inProps);
   const apiRef = useDataGridProComponent(props.apiRef, props);
+  useLicenseVerifier('x-data-grid-pro', releaseInfo);
   return /*#__PURE__*/_jsx(GridContextProvider, {
     apiRef: apiRef,
     props: props,
@@ -35,7 +27,10 @@ const DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProp
         children: [/*#__PURE__*/_jsx(GridHeaderPlaceholder, {}), /*#__PURE__*/_jsx(GridBody, {
           ColumnHeadersComponent: DataGridProColumnHeaders,
           VirtualScrollerComponent: DataGridProVirtualScroller,
-          children: /*#__PURE__*/_jsx(Watermark, {})
+          children: /*#__PURE__*/_jsx(Watermark, {
+            packageName: "x-data-grid-pro",
+            releaseInfo: releaseInfo
+          })
         }), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
       })
     })
@@ -274,6 +269,7 @@ DataGridProRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
    */
   experimentalFeatures: PropTypes.shape({
+    newEditingApi: PropTypes.bool,
     preventCommitWhileValidating: PropTypes.bool,
     rowGrouping: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
@@ -787,6 +783,15 @@ DataGridProRaw.propTypes = {
     right: PropTypes.arrayOf(PropTypes.string)
   }),
 
+  /**
+   * Callback called before updating a row with new values in the row and cell editing.
+   * Only applied if `props.experimentalFeatures.newEditingApi: true`.
+   * @param {GridRowModel} newRow Row object with the new values.
+   * @param {GridRowModel} oldRow Row object with the old values.
+   * @returns {Promise<GridRowModel> | GridRowModel} The final values to update the row.
+   */
+  processRowUpdate: PropTypes.func,
+
   /**
    * Number of extra rows to be rendered before/after the visible slice.
    * @default 3

package/DataGridPro/useDataGridProComponent.js

@@ -1,4 +1,4 @@
-import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboard, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, useGridRows, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, editingStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, selectionStateInitializer } from '@mui/x-data-grid/internals';
+import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboard, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing_new, useGridEditing_old, editingStateInitializer_old, editingStateInitializer_new, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, selectionStateInitializer } from '@mui/x-data-grid/internals';
 // Pro-only features
 import { useGridInfiniteLoader } from '../hooks/features/infiniteLoader/useGridInfiniteLoader';
 import { useGridColumnReorder, columnReorderStateInitializer } from '../hooks/features/columnReorder/useGridColumnReorder';
@@ -13,6 +13,8 @@ import { useGridDetailPanel, detailPanelStateInitializer } from '../hooks/featur
 import { useGridDetailPanelCache } from '../hooks/features/detailPanel/useGridDetailPanelCache';
 import { useGridDetailPanelPreProcessors } from '../hooks/features/detailPanel/useGridDetailPanelPreProcessors';
 export const useDataGridProComponent = (inputApiRef, props) => {
+  var _props$experimentalFe, _props$experimentalFe2;
+
   const apiRef = useGridInitialization(inputApiRef, props);
   /**
    * Register all pre-processors called during state initialization here.
@@ -21,25 +23,22 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridSelectionPreProcessors(apiRef, props);
   useGridRowGroupingPreProcessors(apiRef, props);
   useGridTreeDataPreProcessors(apiRef, props);
-  useGridDetailPanelPreProcessors(apiRef, props);
-  useGridColumnPinningPreProcessors(apiRef, props); // Must be the last because it changes the order of the columns.
+  useGridDetailPanelPreProcessors(apiRef, props); // The column pinning `hydrateColumns` pre-processor must be after every other `hydrateColumns` pre-processors
+  // Because it changes the order of the columns.
 
+  useGridColumnPinningPreProcessors(apiRef, props);
+  useGridRowsPreProcessors(apiRef);
   /**
    * Register all state initializers here.
    */
 
+  useGridInitializeState(rowGroupingStateInitializer, apiRef, props);
   useGridInitializeState(selectionStateInitializer, apiRef, props);
   useGridInitializeState(detailPanelStateInitializer, apiRef, props);
   useGridInitializeState(columnPinningStateInitializer, apiRef, props);
-  useGridInitializeState(rowGroupingStateInitializer, apiRef, props); // FIXME Call in the same relative position that useGridRowGrouping is called
-
   useGridInitializeState(columnsStateInitializer, apiRef, props);
-  useGridRowGrouping(apiRef, props); // FIXME Needs to be called before the rows state initialization because it registers a rows group builder
-
-  useGridTreeData(apiRef, props); // FIXME Needs to be called before the rows state initialization because it registers a rows group builder
-
   useGridInitializeState(rowsStateInitializer, apiRef, props);
-  useGridInitializeState(editingStateInitializer, apiRef, props);
+  useGridInitializeState((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.newEditingApi ? editingStateInitializer_new : editingStateInitializer_old, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
   useGridInitializeState(sortingStateInitializer, apiRef, props);
   useGridInitializeState(preferencePanelStateInitializer, apiRef, props);
@@ -50,6 +49,8 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
+  useGridRowGrouping(apiRef, props);
+  useGridTreeData(apiRef);
   useGridSelection(apiRef, props);
   useGridDetailPanel(apiRef, props);
   useGridColumnPinning(apiRef, props);
@@ -57,6 +58,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridRows(apiRef, props);
   useGridParamsApi(apiRef);
   useGridDetailPanelCache(apiRef, props);
+  const useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);
   useGridSorting(apiRef, props);

package/components/DataGridProColumnHeaders.js

@@ -136,7 +136,15 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
       }, {
         disableReorder: true
       })
-    }), rightRenderContext && /*#__PURE__*/_jsx(GridColumnHeadersPinnedColumnHeaders, {
+    }), /*#__PURE__*/_jsx(GridColumnHeadersInner, _extends({
+      isDragging: isDragging
+    }, getInnerProps(), {
+      children: getColumns({
+        renderContext,
+        minFirstColumn: leftPinnedColumns.length,
+        maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
+      })
+    })), rightRenderContext && /*#__PURE__*/_jsx(GridColumnHeadersPinnedColumnHeaders, {
       ownerState: {
         side: GridPinnedPosition.right
       },
@@ -152,14 +160,6 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
         disableReorder: true,
         separatorSide: GridColumnHeaderSeparatorSides.Left
       })
-    }), /*#__PURE__*/_jsx(GridColumnHeadersInner, _extends({
-      isDragging: isDragging
-    }, getInnerProps(), {
-      children: getColumns({
-        renderContext,
-        minFirstColumn: leftPinnedColumns.length,
-        maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
-      })
-    }))]
+    })]
   }));
 });

package/components/DataGridProVirtualScroller.js

@@ -243,7 +243,11 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           maxLastColumn: leftRenderContext.lastColumnIndex,
           availableSpace: 0
         })
-      }), rightRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
+      }), /*#__PURE__*/_jsx(GridVirtualScrollerRenderZone, _extends({}, getRenderZoneProps(), {
+        children: getRows({
+          renderContext
+        })
+      })), rightRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         ref: rightColumns,
         ownerState: {
           side: GridPinnedPosition.right
@@ -256,11 +260,7 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           maxLastColumn: rightRenderContext.lastColumnIndex,
           availableSpace: 0
         })
-      }), /*#__PURE__*/_jsx(GridVirtualScrollerRenderZone, _extends({}, getRenderZoneProps(), {
-        children: getRows({
-          renderContext
-        })
-      })), detailPanels.length > 0 && /*#__PURE__*/_jsx(VirtualScrollerDetailPanels, {
+      }), detailPanels.length > 0 && /*#__PURE__*/_jsx(VirtualScrollerDetailPanels, {
         className: classes.detailPanels,
         children: detailPanels
       })]

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

@@ -1,6 +1,12 @@
 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;

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

@@ -1,10 +1,12 @@
+import * as React from 'react';
 import { GridRowTreeConfig, GridFilterState } from '@mui/x-data-grid';
 import { GridAggregatedFilterItemApplier } from '@mui/x-data-grid/internals';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 import { GridRowGroupingModel } from './gridRowGroupingInterfaces';
 import { GridStatePro } from '../../../models/gridStatePro';
+import { GridApiPro } from '../../../models/gridApiPro';
 export declare const GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = "__row_group_by_columns_group__";
-export declare const GROUPING_COLUMNS_FEATURE_NAME = "grouping-columns";
+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;
@@ -21,4 +23,5 @@ interface FilterRowTreeFromTreeDataParams {
 export declare const filterRowTreeFromGroupingColumns: (params: FilterRowTreeFromTreeDataParams) => Omit<GridFilterState, 'filterModel'>;
 export declare const getColDefOverrides: (groupingColDefProp: DataGridProProcessedProps['groupingColDef'], fields: string[]) => import("../../..").GridGroupingColDefOverride | null | undefined;
 export declare const mergeStateWithRowGroupingModel: (rowGroupingModel: GridRowGroupingModel) => (state: GridStatePro) => GridStatePro;
+export declare const setStrategyAvailability: (apiRef: React.MutableRefObject<GridApiPro>, disableRowGrouping: boolean) => void;
 export {};

package/hooks/features/rowGrouping/gridRowGroupingUtils.js

@@ -1,6 +1,7 @@
 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 GROUPING_COLUMNS_FEATURE_NAME = 'grouping-columns';
+export const ROW_GROUPING_STRATEGY = 'grouping-columns';
 export const getRowGroupingFieldFromGroupingCriteria = groupingCriteria => {
   if (groupingCriteria === null) {
     return GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD;
@@ -110,7 +111,7 @@ export const filterRowTreeFromGroupingColumns = params => {
 export const getColDefOverrides = (groupingColDefProp, fields) => {
   if (typeof groupingColDefProp === 'function') {
     return groupingColDefProp({
-      groupingName: GROUPING_COLUMNS_FEATURE_NAME,
+      groupingName: ROW_GROUPING_STRATEGY,
       fields
     });
   }
@@ -121,4 +122,18 @@ export const mergeStateWithRowGroupingModel = rowGroupingModel => state => _exte
   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/useGridRowGrouping.js

@@ -1,12 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import Divider from '@mui/material/Divider';
-import { GridEvents, gridRowIdsSelector, gridRowTreeSelector, useGridApiEventHandler, useGridApiMethod, gridColumnLookupSelector, gridFilteredDescendantCountLookupSelector, useFirstRender } from '@mui/x-data-grid';
-import { useGridRegisterPreProcessor, useGridRegisterSortingMethod, useGridRegisterFilteringMethod, isDeepEqual } from '@mui/x-data-grid/internals';
-import { buildRowTree } from '../../../utils/tree/buildRowTree';
-import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
-import { filterRowTreeFromGroupingColumns, getRowGroupingFieldFromGroupingCriteria, GROUPING_COLUMNS_FEATURE_NAME, isGroupingColumn, mergeStateWithRowGroupingModel } from './gridRowGroupingUtils';
-import { sortRowTree } from '../../../utils/tree/sortRowTree';
+import { GridEvents, useGridApiEventHandler, useGridApiMethod, gridFilteredDescendantCountLookupSelector } from '@mui/x-data-grid';
+import { useGridRegisterPreProcessor, isDeepEqual } from '@mui/x-data-grid/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";
@@ -15,7 +13,8 @@ export const rowGroupingStateInitializer = (state, props) => {
 
   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 : []
+      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: []
     }
   });
 };
@@ -35,158 +34,6 @@ export const useGridRowGrouping = (apiRef, props) => {
     stateSelector: gridRowGroupingModelSelector,
     changeEvent: GridEvents.rowGroupingModelChange
   });
-  /**
-   * ROW GROUPING
-   */
-  // Tracks the model on the last pre-processing to check if we need to re-build the grouping columns when the grid upserts a column.
-
-  const sanitizedModelOnLastRowPreProcessing = React.useRef([]);
-  const updateRowGrouping = React.useCallback(() => {
-    const groupRows = params => {
-      const rowGroupingModel = gridRowGroupingSanitizedModelSelector(apiRef);
-      const columnsLookup = gridColumnLookupSelector(apiRef);
-      sanitizedModelOnLastRowPreProcessing.current = rowGroupingModel;
-
-      if (props.disableRowGrouping || rowGroupingModel.length === 0) {
-        return null;
-      }
-
-      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: GROUPING_COLUMNS_FEATURE_NAME
-      }));
-    };
-
-    return apiRef.current.unstable_registerRowGroupsBuilder('rowGrouping', groupRows);
-  }, [apiRef, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault, props.disableRowGrouping]);
-  useFirstRender(() => {
-    updateRowGrouping();
-  });
-  const isFirstRender = React.useRef(true);
-  React.useEffect(() => {
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-      return () => {};
-    }
-
-    return updateRowGrouping();
-  }, [updateRowGrouping]);
-  /**
-   * 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 filteringMethod = React.useCallback(params => {
-    const rowTree = gridRowTreeSelector(apiRef);
-    return filterRowTreeFromGroupingColumns({
-      rowTree,
-      isRowMatchingFilters: params.isRowMatchingFilters
-    });
-  }, [apiRef]);
-  const sortingMethod = React.useCallback(params => {
-    const rowTree = gridRowTreeSelector(apiRef);
-    const rowIds = gridRowIdsSelector(apiRef);
-    return sortRowTree({
-      rowTree,
-      rowIds,
-      sortRowList: params.sortRowList,
-      disableChildrenSorting: false
-    });
-  }, [apiRef]);
-  useGridRegisterPreProcessor(apiRef, 'columnMenu', addColumnMenuButtons);
-  useGridRegisterFilteringMethod(apiRef, GROUPING_COLUMNS_FEATURE_NAME, filteringMethod);
-  useGridRegisterSortingMethod(apiRef, GROUPING_COLUMNS_FEATURE_NAME, sortingMethod);
   /**
    * API METHODS
    */
@@ -196,10 +43,10 @@ export const useGridRowGrouping = (apiRef, props) => {
 
     if (currentModel !== model) {
       apiRef.current.setState(mergeStateWithRowGroupingModel(model));
-      updateRowGrouping();
+      setStrategyAvailability(apiRef, props.disableRowGrouping);
       apiRef.current.forceUpdate();
     }
-  }, [apiRef, updateRowGrouping]);
+  }, [apiRef, props.disableRowGrouping]);
   const addRowGroupingCriteria = React.useCallback((field, groupingIndex) => {
     const currentModel = gridRowGroupingModelSelector(apiRef);
 
@@ -243,6 +90,27 @@ export const useGridRowGrouping = (apiRef, props) => {
    * 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;
@@ -275,6 +143,7 @@ export const useGridRowGrouping = (apiRef, props) => {
 
     return params;
   }, [apiRef, props.disableRowGrouping]);
+  useGridRegisterPreProcessor(apiRef, 'columnMenu', addColumnMenuButtons);
   useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
   useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
   /**
@@ -301,15 +170,25 @@ export const useGridRowGrouping = (apiRef, props) => {
   }, [apiRef, props.rowGroupingColumnMode]);
   const checkGroupingColumnsModelDiff = React.useCallback(() => {
     const rowGroupingModel = gridRowGroupingSanitizedModelSelector(apiRef);
-    const lastGroupingColumnsModelApplied = sanitizedModelOnLastRowPreProcessing.current;
+    const lastGroupingColumnsModelApplied = gridRowGroupingStateSelector(apiRef.current.state).unstable_sanitizedModelOnLastRowTreeCreation;
 
     if (!isDeepEqual(lastGroupingColumnsModelApplied, rowGroupingModel)) {
-      sanitizedModelOnLastRowPreProcessing.current = rowGroupingModel; // Refresh the column pre-processing
+      apiRef.current.setState(state => _extends({}, state, {
+        rowGrouping: _extends({}, state.rowGrouping, {
+          unstable_sanitizedModelOnLastRowTreeCreation: rowGroupingModel
+        })
+      })); // Refresh the column pre-processing
+      // TODO: Add a clean way to re-run a pipe processing without faking a change
 
       apiRef.current.updateColumns([]);
-      updateRowGrouping();
+      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(GridEvents.activeStrategyProcessorChange, 'rowTreeCreation');
+      }
     }
-  }, [apiRef, updateRowGrouping]);
+  }, [apiRef, props.disableRowGrouping]);
   useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
   useGridApiEventHandler(apiRef, GridEvents.columnsChange, checkGroupingColumnsModelDiff);
   useGridApiEventHandler(apiRef, GridEvents.rowGroupingModelChange, checkGroupingColumnsModelDiff);

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

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