@mui/x-data-grid-pro 5.6.0 → 5.8.0

package/legacy/hooks/features/columnResize/useGridColumnResize.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { ownerDocument, useEventCallback } from '@mui/material/utils';
 import { GridEvents, gridClasses, GridColumnHeaderSeparatorSides, useGridApiEventHandler, useGridApiOptionHandler, useGridNativeEventListener, useGridLogger } from '@mui/x-data-grid';
-import { useGridStateInit, clamp, findParentElementFromClassName } from '@mui/x-data-grid/internals';
+import { clamp, findParentElementFromClassName } from '@mui/x-data-grid/internals';
 import { findGridCellElementsFromCol, getFieldFromHeaderElem, findHeaderElementFromField } from '../../../utils/domUtils';
 // TODO: remove support for Safari < 13.
 // https://caniuse.com/#search=touch-action
@@ -73,22 +73,22 @@ function computeOffsetToSeparator(clickX, columnBounds, separatorSide) {
 function getSeparatorSide(element) {
   return element.classList.contains(gridClasses['columnSeparator--sideRight']) ? GridColumnHeaderSeparatorSides.Right : GridColumnHeaderSeparatorSides.Left;
 }
+
+export var columnResizeStateInitializer = function columnResizeStateInitializer(state) {
+  return _extends({}, state, {
+    columnResize: {
+      resizingColumnField: ''
+    }
+  });
+};
 /**
  * Only available in DataGridPro
  * @requires useGridColumns (method, event)
  * TODO: improve experience for last column
  */
 
-
 export var useGridColumnResize = function useGridColumnResize(apiRef, props) {
   var logger = useGridLogger(apiRef, 'useGridColumnResize');
-  useGridStateInit(apiRef, function (state) {
-    return _extends({}, state, {
-      columnResize: {
-        resizingColumnField: ''
-      }
-    });
-  });
   var colDefRef = React.useRef();
   var colElementRef = React.useRef();
   var colCellElementsRef = React.useRef(); // To improve accessibility, the separator has padding on both sides.

package/legacy/hooks/features/detailPanel/useGridDetailPanel.js

@@ -2,19 +2,19 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { GridEvents, useGridSelector, useGridApiEventHandler, useGridApiMethod } from '@mui/x-data-grid';
-import { useGridStateInit, useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from './gridDetailPanelToggleColDef';
 import { gridDetailPanelExpandedRowIdsSelector, gridDetailPanelExpandedRowsContentCacheSelector, gridDetailPanelExpandedRowsHeightCacheSelector } from './gridDetailPanelSelector';
-export var useGridDetailPanel = function useGridDetailPanel(apiRef, props) {
-  useGridStateInit(apiRef, function (state) {
-    var _ref, _props$detailPanelExp, _props$initialState, _props$initialState$d;
+export var detailPanelStateInitializer = function detailPanelStateInitializer(state, props) {
+  var _ref, _props$detailPanelExp, _props$initialState, _props$initialState$d;
 
-    return _extends({}, state, {
-      detailPanel: {
-        expandedRowIds: (_ref = (_props$detailPanelExp = props.detailPanelExpandedRowIds) != null ? _props$detailPanelExp : (_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$d = _props$initialState.detailPanel) == null ? void 0 : _props$initialState$d.expandedRowIds) != null ? _ref : []
-      }
-    });
+  return _extends({}, state, {
+    detailPanel: {
+      expandedRowIds: (_ref = (_props$detailPanelExp = props.detailPanelExpandedRowIds) != null ? _props$detailPanelExp : (_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$d = _props$initialState.detailPanel) == null ? void 0 : _props$initialState$d.expandedRowIds) != null ? _ref : []
+    }
   });
+};
+export var useGridDetailPanel = function useGridDetailPanel(apiRef, props) {
   var expandedRowIds = useGridSelector(apiRef, gridDetailPanelExpandedRowIdsSelector);
   var contentCache = useGridSelector(apiRef, gridDetailPanelExpandedRowsContentCacheSelector);
   var handleCellClick = React.useCallback(function (params, event) {
@@ -59,7 +59,7 @@ export var useGridDetailPanel = function useGridDetailPanel(apiRef, props) {
 
     });
   }, [apiRef, expandedRowIds]);
-  useGridRegisterPreProcessor(apiRef, 'rowHeight', addDetailHeight);
+  useGridRegisterPipeProcessor(apiRef, 'rowHeight', addDetailHeight);
   apiRef.current.unstable_updateControlState({
     stateId: 'detailPanels',
     propModel: props.detailPanelExpandedRowIds,

package/legacy/hooks/features/detailPanel/useGridDetailPanelPreProcessors.js

@@ -1,6 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import * as React from 'react';
-import { useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD, GRID_DETAIL_PANEL_TOGGLE_COL_DEF } from './gridDetailPanelToggleColDef';
 export var useGridDetailPanelPreProcessors = function useGridDetailPanelPreProcessors(apiRef, props) {
   var addToggleColumn = React.useCallback(function (columnsState) {
@@ -27,5 +27,5 @@ export var useGridDetailPanelPreProcessors = function useGridDetailPanelPreProce
     columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD] = GRID_DETAIL_PANEL_TOGGLE_COL_DEF;
     return columnsState;
   }, [props.getDetailPanelContent]);
-  useGridRegisterPreProcessor(apiRef, 'hydrateColumns', addToggleColumn);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', addToggleColumn);
 };

package/legacy/hooks/features/infiniteLoader/useGridInfiniteLoader.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useGridSelector, GridEvents, useGridApiEventHandler, useGridApiOptionHandler, gridVisibleColumnDefinitionsSelector, gridRowsMetaSelector } from '@mui/x-data-grid';
-import { useCurrentPageRows } from '@mui/x-data-grid/internals';
+import { useGridVisibleRows } from '@mui/x-data-grid/internals';
 
 /**
  * Only available in DataGridPro
@@ -10,7 +10,7 @@ import { useCurrentPageRows } from '@mui/x-data-grid/internals';
  */
 export var useGridInfiniteLoader = function useGridInfiniteLoader(apiRef, props) {
   var visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
-  var currentPage = useCurrentPageRows(apiRef, props);
+  var currentPage = useGridVisibleRows(apiRef, props);
   var rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
   var contentHeight = Math.max(rowsMeta.currentPageTotalHeight, 1);
   var isInScrollBottomArea = React.useRef(false);

package/legacy/hooks/features/rowGrouping/gridRowGroupingUtils.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import { gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
 export var GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = '__row_group_by_columns_group__';
-export var GROUPING_COLUMNS_FEATURE_NAME = 'grouping-columns';
+export var ROW_GROUPING_STRATEGY = 'grouping-columns';
 export var getRowGroupingFieldFromGroupingCriteria = function getRowGroupingFieldFromGroupingCriteria(groupingCriteria) {
   if (groupingCriteria === null) {
     return GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD;
@@ -112,7 +113,7 @@ export var filterRowTreeFromGroupingColumns = function filterRowTreeFromGrouping
 export var getColDefOverrides = function getColDefOverrides(groupingColDefProp, fields) {
   if (typeof groupingColDefProp === 'function') {
     return groupingColDefProp({
-      groupingName: GROUPING_COLUMNS_FEATURE_NAME,
+      groupingName: ROW_GROUPING_STRATEGY,
       fields: fields
     });
   }
@@ -127,4 +128,20 @@ export var mergeStateWithRowGroupingModel = function mergeStateWithRowGroupingMo
       })
     });
   };
+};
+export var setStrategyAvailability = function setStrategyAvailability(apiRef, disableRowGrouping) {
+  var isAvailable;
+
+  if (disableRowGrouping) {
+    isAvailable = function isAvailable() {
+      return false;
+    };
+  } else {
+    isAvailable = function isAvailable() {
+      var rowGroupingSanitizedModel = gridRowGroupingSanitizedModelSelector(apiRef);
+      return rowGroupingSanitizedModel.length > 0;
+    };
+  }
+
+  apiRef.current.unstable_setStrategyAvailability('rowTree', ROW_GROUPING_STRATEGY, isAvailable);
 };

package/legacy/hooks/features/rowGrouping/useGridRowGrouping.js

@@ -2,12 +2,10 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 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 { useGridRegisterPipeProcessor, 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";
@@ -16,7 +14,8 @@ export var rowGroupingStateInitializer = function rowGroupingStateInitializer(st
 
   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: []
     }
   });
 };
@@ -36,163 +35,6 @@ export var useGridRowGrouping = function 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.
-
-  var sanitizedModelOnLastRowPreProcessing = React.useRef([]);
-  var updateRowGrouping = React.useCallback(function () {
-    var groupRows = function groupRows(params) {
-      var rowGroupingModel = gridRowGroupingSanitizedModelSelector(apiRef);
-      var columnsLookup = gridColumnLookupSelector(apiRef);
-      sanitizedModelOnLastRowPreProcessing.current = rowGroupingModel;
-
-      if (props.disableRowGrouping || rowGroupingModel.length === 0) {
-        return null;
-      }
-
-      var distinctValues = Object.fromEntries(rowGroupingModel.map(function (groupingField) {
-        return [groupingField, {
-          lookup: {},
-          list: []
-        }];
-      }));
-
-      var getCellGroupingCriteria = function getCellGroupingCriteria(_ref2) {
-        var row = _ref2.row,
-            id = _ref2.id,
-            colDef = _ref2.colDef;
-        var key;
-
-        if (colDef.groupingValueGetter) {
-          var groupingValueGetterParams = {
-            colDef: colDef,
-            field: colDef.field,
-            value: row[colDef.field],
-            id: id,
-            row: row,
-            rowNode: {
-              isAutoGenerated: false,
-              id: id
-            }
-          };
-          key = colDef.groupingValueGetter(groupingValueGetterParams);
-        } else {
-          key = row[colDef.field];
-        }
-
-        return {
-          key: key,
-          field: colDef.field
-        };
-      };
-
-      params.ids.forEach(function (rowId) {
-        var row = params.idRowsLookup[rowId];
-        rowGroupingModel.forEach(function (groupingCriteria) {
-          var _getCellGroupingCrite = getCellGroupingCriteria({
-            row: row,
-            id: rowId,
-            colDef: columnsLookup[groupingCriteria]
-          }),
-              key = _getCellGroupingCrite.key;
-
-          var groupingFieldsDistinctKeys = distinctValues[groupingCriteria];
-
-          if (key != null && !groupingFieldsDistinctKeys.lookup[key.toString()]) {
-            groupingFieldsDistinctKeys.lookup[key.toString()] = true;
-            groupingFieldsDistinctKeys.list.push(key);
-          }
-        });
-      });
-      var rows = params.ids.map(function (rowId) {
-        var row = params.idRowsLookup[rowId];
-        var parentPath = rowGroupingModel.map(function (groupingField) {
-          return getCellGroupingCriteria({
-            row: row,
-            id: rowId,
-            colDef: columnsLookup[groupingField]
-          });
-        }).filter(function (cell) {
-          return cell.key != null;
-        });
-        var leafGroupingCriteria = {
-          key: rowId.toString(),
-          field: null
-        };
-        return {
-          path: [].concat(_toConsumableArray(parentPath), [leafGroupingCriteria]),
-          id: rowId
-        };
-      });
-      return buildRowTree(_extends({}, params, {
-        rows: 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(function () {
-    updateRowGrouping();
-  });
-  var isFirstRender = React.useRef(true);
-  React.useEffect(function () {
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-      return function () {};
-    }
-
-    return updateRowGrouping();
-  }, [updateRowGrouping]);
-  /**
-   * PRE-PROCESSING
-   */
-
-  var addColumnMenuButtons = React.useCallback(function (initialValue, columns) {
-    if (props.disableRowGrouping) {
-      return initialValue;
-    }
-
-    var 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 [].concat(_toConsumableArray(initialValue), [/*#__PURE__*/_jsx(Divider, {}), menuItems]);
-  }, [props.disableRowGrouping]);
-  var filteringMethod = React.useCallback(function (params) {
-    var rowTree = gridRowTreeSelector(apiRef);
-    return filterRowTreeFromGroupingColumns({
-      rowTree: rowTree,
-      isRowMatchingFilters: params.isRowMatchingFilters
-    });
-  }, [apiRef]);
-  var sortingMethod = React.useCallback(function (params) {
-    var rowTree = gridRowTreeSelector(apiRef);
-    var rowIds = gridRowIdsSelector(apiRef);
-    return sortRowTree({
-      rowTree: rowTree,
-      rowIds: 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
    */
@@ -202,10 +44,10 @@ export var useGridRowGrouping = function useGridRowGrouping(apiRef, props) {
 
     if (currentModel !== model) {
       apiRef.current.setState(mergeStateWithRowGroupingModel(model));
-      updateRowGrouping();
+      setStrategyAvailability(apiRef, props.disableRowGrouping);
       apiRef.current.forceUpdate();
     }
-  }, [apiRef, updateRowGrouping]);
+  }, [apiRef, props.disableRowGrouping]);
   var addRowGroupingCriteria = React.useCallback(function (field, groupingIndex) {
     var currentModel = gridRowGroupingModelSelector(apiRef);
 
@@ -252,6 +94,27 @@ export var useGridRowGrouping = function useGridRowGrouping(apiRef, props) {
    * PRE-PROCESSING
    */
 
+  var addColumnMenuButtons = React.useCallback(function (initialValue, columns) {
+    if (props.disableRowGrouping) {
+      return initialValue;
+    }
+
+    var 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 [].concat(_toConsumableArray(initialValue), [/*#__PURE__*/_jsx(Divider, {}), menuItems]);
+  }, [props.disableRowGrouping]);
   var stateExportPreProcessing = React.useCallback(function (prevState) {
     if (props.disableRowGrouping) {
       return prevState;
@@ -284,8 +147,9 @@ export var useGridRowGrouping = function useGridRowGrouping(apiRef, props) {
 
     return params;
   }, [apiRef, props.disableRowGrouping]);
-  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuButtons);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
   /**
    * EVENTS
    */
@@ -310,15 +174,27 @@ export var useGridRowGrouping = function useGridRowGrouping(apiRef, props) {
   }, [apiRef, props.rowGroupingColumnMode]);
   var checkGroupingColumnsModelDiff = React.useCallback(function () {
     var rowGroupingModel = gridRowGroupingSanitizedModelSelector(apiRef);
-    var lastGroupingColumnsModelApplied = sanitizedModelOnLastRowPreProcessing.current;
+    var lastGroupingColumnsModelApplied = gridRowGroupingStateSelector(apiRef.current.state).unstable_sanitizedModelOnLastRowTreeCreation;
 
     if (!isDeepEqual(lastGroupingColumnsModelApplied, rowGroupingModel)) {
-      sanitizedModelOnLastRowPreProcessing.current = rowGroupingModel; // Refresh the column pre-processing
+      apiRef.current.setState(function (state) {
+        return _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/legacy/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.js

@@ -1,9 +1,13 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import * as React from 'react';
-import { useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
-import { gridRowGroupingModelSelector } from './gridRowGroupingSelector';
+import { gridColumnLookupSelector, gridRowIdsSelector, gridRowTreeSelector, useFirstRender } from '@mui/x-data-grid';
+import { useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor } from '@mui/x-data-grid/internals';
+import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
 import { createGroupingColDefForAllGroupingCriteria, createGroupingColDefForOneGroupingCriteria } from './createGroupingColDef';
-import { getColDefOverrides, isGroupingColumn } from './gridRowGroupingUtils';
+import { filterRowTreeFromGroupingColumns, getColDefOverrides, ROW_GROUPING_STRATEGY, isGroupingColumn, setStrategyAvailability } from './gridRowGroupingUtils';
+import { buildRowTree } from '../../../utils/tree/buildRowTree';
+import { sortRowTree } from '../../../utils/tree/sortRowTree';
 export var useGridRowGroupingPreProcessors = function useGridRowGroupingPreProcessors(apiRef, props) {
   var getGroupingColDefs = React.useCallback(function (columnsState) {
     if (props.disableRowGrouping) {
@@ -79,5 +83,135 @@ export var useGridRowGroupingPreProcessors = function useGridRowGroupingPreProce
     columnsState.lookup = newColumnsLookup;
     return columnsState;
   }, [getGroupingColDefs]);
-  useGridRegisterPreProcessor(apiRef, 'hydrateColumns', updateGroupingColumn);
+  var createRowTree = React.useCallback(function (params) {
+    var rowGroupingModel = gridRowGroupingSanitizedModelSelector(apiRef);
+    var columnsLookup = gridColumnLookupSelector(apiRef);
+    apiRef.current.setState(function (state) {
+      return _extends({}, state, {
+        rowGrouping: _extends({}, state.rowGrouping, {
+          unstable_sanitizedModelOnLastRowTreeCreation: rowGroupingModel
+        })
+      });
+    });
+    var distinctValues = Object.fromEntries(rowGroupingModel.map(function (groupingField) {
+      return [groupingField, {
+        lookup: {},
+        list: []
+      }];
+    }));
+
+    var getCellGroupingCriteria = function getCellGroupingCriteria(_ref) {
+      var row = _ref.row,
+          id = _ref.id,
+          colDef = _ref.colDef;
+      var key;
+
+      if (colDef.groupingValueGetter) {
+        var groupingValueGetterParams = {
+          colDef: colDef,
+          field: colDef.field,
+          value: row[colDef.field],
+          id: id,
+          row: row,
+          rowNode: {
+            isAutoGenerated: false,
+            id: id
+          }
+        };
+        key = colDef.groupingValueGetter(groupingValueGetterParams);
+      } else {
+        key = row[colDef.field];
+      }
+
+      return {
+        key: key,
+        field: colDef.field
+      };
+    };
+
+    params.ids.forEach(function (rowId) {
+      var row = params.idRowsLookup[rowId];
+      rowGroupingModel.forEach(function (groupingCriteria) {
+        var _getCellGroupingCrite = getCellGroupingCriteria({
+          row: row,
+          id: rowId,
+          colDef: columnsLookup[groupingCriteria]
+        }),
+            key = _getCellGroupingCrite.key;
+
+        var groupingFieldsDistinctKeys = distinctValues[groupingCriteria];
+
+        if (key != null && !groupingFieldsDistinctKeys.lookup[key.toString()]) {
+          groupingFieldsDistinctKeys.lookup[key.toString()] = true;
+          groupingFieldsDistinctKeys.list.push(key);
+        }
+      });
+    });
+    var rows = params.ids.map(function (rowId) {
+      var row = params.idRowsLookup[rowId];
+      var parentPath = rowGroupingModel.map(function (groupingField) {
+        return getCellGroupingCriteria({
+          row: row,
+          id: rowId,
+          colDef: columnsLookup[groupingField]
+        });
+      }).filter(function (cell) {
+        return cell.key != null;
+      });
+      var leafGroupingCriteria = {
+        key: rowId.toString(),
+        field: null
+      };
+      return {
+        path: [].concat(_toConsumableArray(parentPath), [leafGroupingCriteria]),
+        id: rowId
+      };
+    });
+    return buildRowTree(_extends({}, params, {
+      rows: rows,
+      defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
+      isGroupExpandedByDefault: props.isGroupExpandedByDefault,
+      groupingName: ROW_GROUPING_STRATEGY
+    }));
+  }, [apiRef, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault]);
+  var filterRows = React.useCallback(function (params) {
+    var rowTree = gridRowTreeSelector(apiRef);
+    return filterRowTreeFromGroupingColumns({
+      rowTree: rowTree,
+      isRowMatchingFilters: params.isRowMatchingFilters
+    });
+  }, [apiRef]);
+  var sortRows = React.useCallback(function (params) {
+    var rowTree = gridRowTreeSelector(apiRef);
+    var rowIds = gridRowIdsSelector(apiRef);
+    return sortRowTree({
+      rowTree: rowTree,
+      rowIds: 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(function () {
+    setStrategyAvailability(apiRef, props.disableRowGrouping);
+  });
+  /**
+   * EFFECTS
+   */
+
+  var isFirstRender = React.useRef(true);
+  React.useEffect(function () {
+    if (!isFirstRender.current) {
+      setStrategyAvailability(apiRef, props.disableRowGrouping);
+    } else {
+      isFirstRender.current = false;
+    }
+  }, [apiRef, props.disableRowGrouping]);
 };

package/legacy/hooks/features/treeData/gridTreeDataUtils.js

@@ -1,8 +1,10 @@
+export var TREE_DATA_STRATEGY = 'tree-data';
 /**
  * A node is visible if one of the following criteria is met:
  * - One of its children is passing the filter
  * - It is passing the filter
  */
+
 export var filterRowTreeFromTreeData = function filterRowTreeFromTreeData(params) {
   var rowTree = params.rowTree,
       disableChildrenFiltering = params.disableChildrenFiltering,