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

package/legacy/hooks/features/editRows/useGridCellEditing.new.js

@@ -8,13 +8,14 @@ var _excluded = ["id", "field"],
     _excluded2 = ["id", "field"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import * as React from 'react';
+import { unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { useGridApiEventHandler, useGridApiOptionHandler, GridSignature } from '../../utils/useGridApiEventHandler';
 import { GridEditModes, GridCellModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridEditRowsStateSelector } from './gridEditRowsSelector';
 import { isPrintableKey } from '../../../utils/keyboardUtils';
 import { buildWarning } from '../../../utils/warning';
-import { gridRowsIdToIdLookupSelector } from '../rows/gridRowsSelector';
+import { gridRowsDataRowIdToIdLookupSelector } from '../rows/gridRowsSelector';
 import { deepClone } from '../../../utils/utils';
 import { GridCellEditStartReasons, GridCellEditStopReasons } from '../../../models/params/gridEditCellParams';
 var missingOnProcessRowUpdateErrorWarning = buildWarning(['MUI: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, e.g. `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see http://mui.com/components/data-grid/editing/#persistence.'], 'error');
@@ -111,6 +112,10 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
     } else if (params.isEditable) {
       var _reason;
 
+      if (event.key === ' ' && event.shiftKey) {
+        return; // Shift + Space is used to select the row
+      }
+
       if (isPrintableKey(event)) {
         _reason = GridCellEditStartReasons.printableKeyDown;
       } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
@@ -189,7 +194,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
     var isEditing = editingState[id] && editingState[id][field];
     return isEditing ? GridCellModes.Edit : GridCellModes.View;
   }, [apiRef]);
-  var updateCellModesModel = React.useCallback(function (newModel) {
+  var updateCellModesModel = useEventCallback(function (newModel) {
     var isNewModelDifferentFromProp = newModel !== props.cellModesModel;
 
     if (onCellModesModelChange && isNewModelDifferentFromProp) {
@@ -206,7 +211,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
     setCellModesModel(newModel);
     cellModesModelRef.current = newModel;
     apiRef.current.publishEvent('cellModesModelChange', newModel);
-  }, [apiRef, onCellModesModelChange, props.cellModesModel, signature]);
+  });
   var updateFieldInCellModesModel = React.useCallback(function (id, field, newProps) {
     // We use the ref because it always contain the up-to-date value, different from the state
     // that needs a rerender to reflect the new value
@@ -260,7 +265,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
       mode: GridCellModes.Edit
     }, other));
   }, [throwIfNotEditable, throwIfNotInMode, updateFieldInCellModesModel]);
-  var updateStateToStartCellEditMode = React.useCallback(function (params) {
+  var updateStateToStartCellEditMode = useEventCallback(function (params) {
     var id = params.id,
         field = params.field,
         deleteValue = params.deleteValue;
@@ -271,7 +276,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
     };
     updateOrDeleteFieldState(id, field, newProps);
     apiRef.current.setCellFocus(id, field);
-  }, [apiRef, updateOrDeleteFieldState]);
+  });
   var stopCellEditMode = React.useCallback(function (params) {
     var id = params.id,
         field = params.field,
@@ -282,7 +287,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
       mode: GridCellModes.View
     }, other));
   }, [throwIfNotInMode, updateFieldInCellModesModel]);
-  var updateStateToStopCellEditMode = React.useCallback( /*#__PURE__*/function () {
+  var updateStateToStopCellEditMode = useEventCallback( /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(params) {
       var id, field, ignoreModifications, _params$cellToFocusAf, cellToFocusAfter, finishCellEditMode, editingState, _editingState$id$fiel, error, isProcessingProps, rowUpdate, handleError, row;
 
@@ -334,7 +339,11 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
 
               if (processRowUpdate) {
                 handleError = function handleError(errorThrown) {
-                  prevCellModesModel.current[id][field].mode = GridCellModes.Edit;
+                  prevCellModesModel.current[id][field].mode = GridCellModes.Edit; // Revert the mode in the cellModesModel prop back to "edit"
+
+                  updateFieldInCellModesModel(id, field, {
+                    mode: GridCellModes.Edit
+                  });
 
                   if (onProcessRowUpdateError) {
                     onProcessRowUpdateError(errorThrown);
@@ -368,7 +377,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
     return function (_x) {
       return _ref.apply(this, arguments);
     };
-  }(), [apiRef, onProcessRowUpdateError, processRowUpdate, throwIfNotInMode, updateFieldInCellModesModel, updateOrDeleteFieldState]);
+  }());
   var setCellEditingEditCellValue = React.useCallback( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(params) {
       var _editingState$id, _editingState$id$fiel2;
@@ -473,7 +482,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
     }
   }, [cellModesModelProp, updateCellModesModel]);
   React.useEffect(function () {
-    var idToIdLookup = gridRowsIdToIdLookupSelector(apiRef); // Update the ref here because updateStateToStopCellEditMode may change it later
+    var idToIdLookup = gridRowsDataRowIdToIdLookupSelector(apiRef); // Update the ref here because updateStateToStopCellEditMode may change it later
 
     var copyOfPrevCellModes = prevCellModesModel.current;
     prevCellModesModel.current = deepClone(cellModesModel); // Do a deep-clone because the attributes might be changed later

package/legacy/hooks/features/editRows/useGridEditing.new.js

@@ -8,6 +8,7 @@ import { useGridCellEditing } from './useGridCellEditing.new';
 import { GridCellModes, GridEditModes } from '../../../models/gridEditRowModel';
 import { useGridRowEditing } from './useGridRowEditing.new';
 import { gridEditRowsStateSelector } from './gridEditRowsSelector';
+import { isAutoGeneratedRow } from '../rows/gridRowsUtils';
 export var editingStateInitializer = function editingStateInitializer(state) {
   return _extends({}, state, {
     editRows: {}
@@ -19,7 +20,7 @@ export var useGridEditing = function useGridEditing(apiRef, props) {
   var debounceMap = React.useRef({});
   var isCellEditableProp = props.isCellEditable;
   var isCellEditable = React.useCallback(function (params) {
-    if (params.rowNode.isAutoGenerated) {
+    if (isAutoGeneratedRow(params.rowNode)) {
       return false;
     }
 
@@ -35,7 +36,7 @@ export var useGridEditing = function useGridEditing(apiRef, props) {
       return isCellEditableProp(params);
     }
 
-    if (params.rowNode.isPinned) {
+    if (params.rowNode.type === 'pinnedRow') {
       return false;
     }
 

package/legacy/hooks/features/editRows/useGridEditing.old.js

@@ -8,6 +8,7 @@ import { useGridLogger } from '../../utils/useGridLogger';
 import { gridEditRowsStateSelector } from './gridEditRowsSelector';
 import { useCellEditing } from './useGridCellEditing.old';
 import { useGridRowEditing } from './useGridRowEditing.old';
+import { isAutoGeneratedRow } from '../rows/gridRowsUtils';
 export var editingStateInitializer = function editingStateInitializer(state) {
   return _extends({}, state, {
     editRows: {}
@@ -34,7 +35,7 @@ export function useGridEditing(apiRef, props) {
     changeEvent: 'editRowsModelChange'
   });
   var isCellEditable = React.useCallback(function (params) {
-    return !params.rowNode.isAutoGenerated && !params.rowNode.isPinned && !!params.colDef.editable && !!params.colDef.renderEditCell && (!props.isCellEditable || props.isCellEditable(params));
+    return !isAutoGeneratedRow(params.rowNode) && params.rowNode.type !== 'pinnedRow' && !!params.colDef.editable && !!params.colDef.renderEditCell && (!props.isCellEditable || props.isCellEditable(params));
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
   [props.isCellEditable]);
 

package/legacy/hooks/features/editRows/useGridRowEditing.new.js

@@ -6,6 +6,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 var _excluded = ["id"],
     _excluded2 = ["id"];
 import * as React from 'react';
+import { unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { useGridApiEventHandler, useGridApiOptionHandler, GridSignature } from '../../utils/useGridApiEventHandler';
 import { GridEditModes, GridRowModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
@@ -13,7 +14,7 @@ import { gridEditRowsStateSelector } from './gridEditRowsSelector';
 import { isPrintableKey } from '../../../utils/keyboardUtils';
 import { gridColumnFieldsSelector } from '../columns/gridColumnsSelector';
 import { buildWarning } from '../../../utils/warning';
-import { gridRowsIdToIdLookupSelector } from '../rows/gridRowsSelector';
+import { gridRowsDataRowIdToIdLookupSelector } from '../rows/gridRowsSelector';
 import { deepClone } from '../../../utils/utils';
 import { GridRowEditStopReasons, GridRowEditStartReasons } from '../../../models/params/gridRowParams';
 var missingOnProcessRowUpdateErrorWarning = buildWarning(['MUI: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, e.g. `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see http://mui.com/components/data-grid/editing/#persistence.'], 'error');
@@ -168,6 +169,10 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     } else if (params.isEditable) {
       var _reason;
 
+      if (event.key === ' ' && event.shiftKey) {
+        return; // Shift + Space is used to select the row
+      }
+
       if (isPrintableKey(event)) {
         _reason = GridRowEditStartReasons.printableKeyDown;
       } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
@@ -256,7 +261,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     var isEditing = editingState[id] && Object.keys(editingState[id]).length > 0;
     return isEditing ? GridRowModes.Edit : GridRowModes.View;
   }, [apiRef, props.editMode]);
-  var updateRowModesModel = React.useCallback(function (newModel) {
+  var updateRowModesModel = useEventCallback(function (newModel) {
     var isNewModelDifferentFromProp = newModel !== props.rowModesModel;
 
     if (onRowModesModelChange && isNewModelDifferentFromProp) {
@@ -273,7 +278,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     setRowModesModel(newModel);
     rowModesModelRef.current = newModel;
     apiRef.current.publishEvent('rowModesModelChange', newModel);
-  }, [apiRef, onRowModesModelChange, props.rowModesModel, signature]);
+  });
   var updateRowInRowModesModel = React.useCallback(function (id, newProps) {
     var newModel = _extends({}, rowModesModelRef.current);
 
@@ -330,7 +335,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
       mode: GridRowModes.Edit
     }, other));
   }, [throwIfNotInMode, updateRowInRowModesModel]);
-  var updateStateToStartRowEditMode = React.useCallback(function (params) {
+  var updateStateToStartRowEditMode = useEventCallback(function (params) {
     var id = params.id,
         fieldToFocus = params.fieldToFocus,
         deleteValue = params.deleteValue;
@@ -355,7 +360,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     if (fieldToFocus) {
       apiRef.current.setCellFocus(id, fieldToFocus);
     }
-  }, [apiRef, updateOrDeleteRowState]);
+  });
   var stopRowEditMode = React.useCallback(function (params) {
     var id = params.id,
         other = _objectWithoutProperties(params, _excluded2);
@@ -365,7 +370,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
       mode: GridRowModes.View
     }, other));
   }, [throwIfNotInMode, updateRowInRowModesModel]);
-  var updateStateToStopRowEditMode = React.useCallback(function (params) {
+  var updateStateToStopRowEditMode = useEventCallback(function (params) {
     var id = params.id,
         ignoreModifications = params.ignoreModifications,
         focusedField = params.field,
@@ -415,7 +420,11 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
 
     if (processRowUpdate) {
       var handleError = function handleError(errorThrown) {
-        prevRowModesModel.current[id].mode = GridRowModes.Edit;
+        prevRowModesModel.current[id].mode = GridRowModes.Edit; // Revert the mode in the rowModesModel prop back to "edit"
+
+        updateRowInRowModesModel(id, {
+          mode: GridRowModes.Edit
+        });
 
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
@@ -436,7 +445,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
       apiRef.current.updateRows([rowUpdate]);
       finishRowEditMode();
     }
-  }, [apiRef, onProcessRowUpdateError, processRowUpdate, updateOrDeleteRowState, updateRowInRowModesModel]);
+  });
   var setRowEditingEditCellValue = React.useCallback(function (params) {
     var id = params.id,
         field = params.field,
@@ -598,7 +607,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     }
   }, [rowModesModelProp, updateRowModesModel]);
   React.useEffect(function () {
-    var idToIdLookup = gridRowsIdToIdLookupSelector(apiRef); // Update the ref here because updateStateToStopRowEditMode may change it later
+    var idToIdLookup = gridRowsDataRowIdToIdLookupSelector(apiRef); // Update the ref here because updateStateToStopRowEditMode may change it later
 
     var copyOfPrevRowModesModel = prevRowModesModel.current;
     prevRowModesModel.current = deepClone(rowModesModel); // Do a deep-clone because the attributes might be changed later

package/legacy/hooks/features/export/useGridPrintExport.js

@@ -16,6 +16,14 @@ import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { GridPrintExportMenuItem } from '../../../components/toolbar/GridToolbarExport';
 import { jsx as _jsx } from "react/jsx-runtime";
 
+function raf() {
+  return new Promise(function (resolve) {
+    requestAnimationFrame(function () {
+      resolve();
+    });
+  });
+}
+
 /**
  * @requires useGridColumns (state)
  * @requires useGridFilter (state)
@@ -34,6 +42,7 @@ export var useGridPrintExport = function useGridPrintExport(apiRef, props) {
 
   var updateGridColumnsForPrint = React.useCallback(function (fields, allColumns) {
     return new Promise(function (resolve) {
+      // TODO remove unused Promise
       if (!fields && !allColumns) {
         resolve();
         return;
@@ -56,12 +65,10 @@ export var useGridPrintExport = function useGridPrintExport(apiRef, props) {
       apiRef.current.setColumnVisibilityModel(newColumnVisibilityModel);
       resolve();
     });
-  }, [apiRef]);
+  }, [apiRef]); // TODO move outside of this scope and remove React.useCallback
+
   var buildPrintWindow = React.useCallback(function (title) {
     var iframeEl = document.createElement('iframe');
-    iframeEl.id = 'grid-print-window'; // Without this 'onload' event won't fire in some browsers
-
-    iframeEl.src = window.location.href;
     iframeEl.style.position = 'absolute';
     iframeEl.style.width = '0px';
     iframeEl.style.height = '0px';
@@ -69,18 +76,15 @@ export var useGridPrintExport = function useGridPrintExport(apiRef, props) {
     return iframeEl;
   }, []);
   var handlePrintWindowLoad = React.useCallback(function (printWindow, options) {
-    var _printWindow$contentW, _querySelector, _querySelector2;
+    var _querySelector, _querySelector2;
 
     var normalizeOptions = _extends({
       copyStyles: true,
       hideToolbar: false,
       hideFooter: false
-    }, options); // Some agents, such as IE11 and Enzyme (as of 2 Jun 2020) continuously call the
-    // `onload` callback. This ensures that it is only called once.
+    }, options);
 
-
-    printWindow.onload = null;
-    var printDoc = printWindow.contentDocument || ((_printWindow$contentW = printWindow.contentWindow) == null ? void 0 : _printWindow$contentW.document);
+    var printDoc = printWindow.contentDocument;
 
     if (!printDoc) {
       return;
@@ -120,10 +124,12 @@ export var useGridPrintExport = function useGridPrintExport(apiRef, props) {
     } // Expand container height to accommodate all rows
 
 
-    gridClone.style.height = "".concat(rowsMeta.currentPageTotalHeight + totalHeaderHeight + gridToolbarElementHeight + gridFooterElementHeight, "px"); // Remove all loaded elements from the current host
+    gridClone.style.height = "".concat(rowsMeta.currentPageTotalHeight + totalHeaderHeight + gridToolbarElementHeight + gridFooterElementHeight, "px"); // printDoc.body.appendChild(gridClone); should be enough but a clone isolation bug in Safari
+    // prevents us to do it
 
-    printDoc.body.innerHTML = '';
-    printDoc.body.appendChild(gridClone);
+    var container = document.createElement('div');
+    container.appendChild(gridClone);
+    printDoc.body.innerHTML = container.innerHTML;
     var defaultPageStyle = typeof normalizeOptions.pageStyle === 'function' ? normalizeOptions.pageStyle() : normalizeOptions.pageStyle;
 
     if (typeof defaultPageStyle === 'string') {
@@ -232,24 +238,31 @@ export var useGridPrintExport = function useGridPrintExport(apiRef, props) {
 
             case 8:
               apiRef.current.unstable_disableVirtualization();
+              _context.next = 11;
+              return raf();
+
+            case 11:
+              // wait for the state changes to take action
               printWindow = buildPrintWindow(options == null ? void 0 : options.fileName);
-              doc.current.body.appendChild(printWindow);
 
               if (process.env.NODE_ENV === 'test') {
-                // In test env, run the all pipeline without waiting for loading
+                doc.current.body.appendChild(printWindow); // In test env, run the all pipeline without waiting for loading
+
                 handlePrintWindowLoad(printWindow, options);
                 handlePrintWindowAfterPrint(printWindow);
               } else {
                 printWindow.onload = function () {
-                  return handlePrintWindowLoad(printWindow, options);
-                };
+                  handlePrintWindowLoad(printWindow, options);
 
-                printWindow.contentWindow.onafterprint = function () {
-                  return handlePrintWindowAfterPrint(printWindow);
+                  printWindow.contentWindow.onafterprint = function () {
+                    handlePrintWindowAfterPrint(printWindow);
+                  };
                 };
+
+                doc.current.body.appendChild(printWindow);
               }
 
-            case 12:
+            case 13:
             case "end":
               return _context.stop();
           }

package/legacy/hooks/features/export/utils.js

@@ -30,9 +30,7 @@ export var defaultGetRowsToExport = function defaultGetRowsToExport(_ref2) {
   var rowTree = gridRowTreeSelector(apiRef);
   var selectedRows = apiRef.current.getSelectedRows();
   var bodyRows = filteredSortedRowIds.filter(function (id) {
-    var _rowTree$id$position;
-
-    return ((_rowTree$id$position = rowTree[id].position) != null ? _rowTree$id$position : 'body') === 'body';
+    return rowTree[id].type !== 'footer';
   });
   var pinnedRows = gridPinnedRowsSelector(apiRef);
   var topPinnedRowsIds = (pinnedRows == null ? void 0 : (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.map(function (row) {

package/legacy/hooks/features/filter/gridFilterSelector.js

@@ -1,7 +1,7 @@
 import { createSelector } from '../../../utils/createSelector';
 import { gridSortedRowEntriesSelector } from '../sorting/gridSortingSelector';
 import { gridColumnLookupSelector } from '../columns/gridColumnsSelector';
-import { gridRowTreeDepthSelector, gridRowTreeSelector } from '../rows/gridRowsSelector';
+import { gridRowMaximumTreeDepthSelector, gridRowTreeSelector } from '../rows/gridRowsSelector';
 /**
  * @category Filtering
  */
@@ -106,7 +106,7 @@ export var gridVisibleRowsSelector = gridVisibleSortedRowIdsSelector;
  * @category Filtering
  */
 
-export var gridVisibleSortedTopLevelRowEntriesSelector = createSelector(gridVisibleSortedRowEntriesSelector, gridRowTreeSelector, gridRowTreeDepthSelector, function (visibleSortedRows, rowTree, rowTreeDepth) {
+export var gridVisibleSortedTopLevelRowEntriesSelector = createSelector(gridVisibleSortedRowEntriesSelector, gridRowTreeSelector, gridRowMaximumTreeDepthSelector, function (visibleSortedRows, rowTree, rowTreeDepth) {
   if (rowTreeDepth < 2) {
     return visibleSortedRows;
   }

package/legacy/hooks/features/filter/useGridFilter.js

@@ -1,7 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridFeatureModeConstant } from '../../../models/gridFeatureMode';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
@@ -10,7 +9,7 @@ import { GridPreferencePanelsValue } from '../preferencesPanel/gridPreferencePan
 import { getDefaultGridFilterModel } from './gridFilterState';
 import { gridFilterModelSelector, gridVisibleSortedRowEntriesSelector } from './gridFilterSelector';
 import { useFirstRender } from '../../utils/useFirstRender';
-import { gridRowIdsSelector } from '../rows';
+import { GRID_ROOT_GROUP_ID, gridRowTreeSelector } from '../rows';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { GRID_DEFAULT_STRATEGY, useGridRegisterStrategyProcessor } from '../../core/strategyProcessing';
 import { buildAggregatedFilterApplier, sanitizeFilterModel, mergeStateWithFilterModel, cleanFilterItem, passFilterLogic } from './gridFilterUtils';
@@ -48,7 +47,7 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
   var updateFilteredRows = React.useCallback(function () {
     apiRef.current.setState(function (state) {
       var filterModel = gridFilterModelSelector(state, apiRef.current.instanceId);
-      var isRowMatchingFilters = props.filterMode === GridFeatureModeConstant.client ? buildAggregatedFilterApplier(filterModel, apiRef) : null;
+      var isRowMatchingFilters = props.filterMode === 'client' ? buildAggregatedFilterApplier(filterModel, apiRef) : null;
       var filteringResult = apiRef.current.unstable_applyStrategyProcessor('filtering', {
         isRowMatchingFilters: isRowMatchingFilters,
         filterModel: filterModel != null ? filterModel : getDefaultGridFilterModel()
@@ -273,8 +272,9 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
     return initialValue;
   }, [props.components.FilterPanel, (_props$componentsProp2 = props.componentsProps) == null ? void 0 : _props$componentsProp2.filterPanel]);
   var flatFilteringMethod = React.useCallback(function (params) {
-    if (props.filterMode === GridFeatureModeConstant.client && params.isRowMatchingFilters) {
-      var rowIds = gridRowIdsSelector(apiRef);
+    if (props.filterMode === 'client' && params.isRowMatchingFilters) {
+      var tree = gridRowTreeSelector(apiRef);
+      var rowIds = tree[GRID_ROOT_GROUP_ID].children;
       var filteredRowsLookup = {};
 
       for (var i = 0; i < rowIds.length; i += 1) {
@@ -296,7 +296,7 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
 
       return {
         filteredRowsLookup: filteredRowsLookup,
-        // For flat tree, the `visibleRowsLookup` and the `filteredRowsLookup` since no row is collapsed.
+        // For flat tree, the `visibleRowsLookup` and the `filteredRowsLookup` are equals since no row is collapsed.
         visibleRowsLookup: filteredRowsLookup,
         filteredDescendantCountLookup: {}
       };

package/legacy/hooks/features/pagination/gridPaginationSelector.js

@@ -1,6 +1,6 @@
 import { createSelector } from '../../../utils/createSelector';
 import { gridVisibleSortedRowEntriesSelector, gridVisibleSortedRowIdsSelector, gridVisibleSortedTopLevelRowEntriesSelector } from '../filter/gridFilterSelector';
-import { gridRowTreeDepthSelector, gridRowTreeSelector } from '../rows/gridRowsSelector';
+import { gridRowMaximumTreeDepthSelector, gridRowTreeSelector } from '../rows/gridRowsSelector';
 /**
  * @category Pagination
  * @ignore - do not document.
@@ -38,7 +38,7 @@ export var gridPageCountSelector = createSelector(gridPaginationSelector, functi
  * @category Pagination
  */
 
-export var gridPaginationRowRangeSelector = createSelector(gridPaginationSelector, gridRowTreeSelector, gridRowTreeDepthSelector, gridVisibleSortedRowEntriesSelector, gridVisibleSortedTopLevelRowEntriesSelector, function (pagination, rowTree, rowTreeDepth, visibleSortedRowEntries, visibleSortedTopLevelRowEntries) {
+export var gridPaginationRowRangeSelector = createSelector(gridPaginationSelector, gridRowTreeSelector, gridRowMaximumTreeDepthSelector, gridVisibleSortedRowEntriesSelector, gridVisibleSortedTopLevelRowEntriesSelector, function (pagination, rowTree, rowTreeDepth, visibleSortedRowEntries, visibleSortedTopLevelRowEntries) {
   var visibleTopLevelRowCount = visibleSortedTopLevelRowEntries.length;
   var topLevelFirstRowIndex = Math.min(pagination.pageSize * pagination.page, visibleTopLevelRowCount - 1);
   var topLevelLastRowIndex = Math.min(topLevelFirstRowIndex + pagination.pageSize - 1, visibleTopLevelRowCount - 1); // The range contains no element

package/legacy/hooks/features/rows/gridRowsSelector.js

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { createSelector } from '../../../utils/createSelector';
 export var gridRowsStateSelector = function gridRowsStateSelector(state) {
   return state.rows;
@@ -10,12 +11,13 @@ export var gridRowsLoadingSelector = createSelector(gridRowsStateSelector, funct
 });
 export var gridTopLevelRowCountSelector = createSelector(gridRowsStateSelector, function (rows) {
   return rows.totalTopLevelRowCount;
-});
+}); // TODO rows v6: Rename
+
 export var gridRowsLookupSelector = createSelector(gridRowsStateSelector, function (rows) {
-  return rows.idRowsLookup;
+  return rows.dataRowIdToModelLookup;
 });
-export var gridRowsIdToIdLookupSelector = createSelector(gridRowsStateSelector, function (rows) {
-  return rows.idToIdLookup;
+export var gridRowsDataRowIdToIdLookupSelector = createSelector(gridRowsStateSelector, function (rows) {
+  return rows.dataRowIdToIdLookup;
 });
 export var gridRowTreeSelector = createSelector(gridRowsStateSelector, function (rows) {
   return rows.tree;
@@ -23,11 +25,32 @@ export var gridRowTreeSelector = createSelector(gridRowsStateSelector, function
 export var gridRowGroupingNameSelector = createSelector(gridRowsStateSelector, function (rows) {
   return rows.groupingName;
 });
-export var gridRowTreeDepthSelector = createSelector(gridRowsStateSelector, function (rows) {
-  return rows.treeDepth;
+export var gridRowTreeDepthsSelector = createSelector(gridRowsStateSelector, function (rows) {
+  return rows.treeDepths;
+});
+export var gridRowMaximumTreeDepthSelector = createSelector(gridRowsStateSelector, function (rows) {
+  var entries = Object.entries(rows.treeDepths);
+
+  if (entries.length === 0) {
+    return 1;
+  }
+
+  return entries.filter(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        nodeCount = _ref2[1];
+
+    return nodeCount > 0;
+  }).map(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 1),
+        depth = _ref4[0];
+
+    return Number(depth);
+  }).sort(function (a, b) {
+    return b - a;
+  })[0] + 1;
 });
-export var gridRowIdsSelector = createSelector(gridRowsStateSelector, function (rows) {
-  return rows.ids;
+export var gridDataRowIdsSelector = createSelector(gridRowsStateSelector, function (rows) {
+  return rows.dataRowIds;
 });
 /**
  * @ignore - do not document.
@@ -41,7 +64,27 @@ export var gridAdditionalRowGroupsSelector = createSelector(gridRowsStateSelecto
  */
 
 export var gridPinnedRowsSelector = createSelector(gridAdditionalRowGroupsSelector, function (additionalRowGroups) {
-  return additionalRowGroups == null ? void 0 : additionalRowGroups.pinnedRows;
+  var _rawPinnedRows$bottom, _rawPinnedRows$top;
+
+  var rawPinnedRows = additionalRowGroups == null ? void 0 : additionalRowGroups.pinnedRows;
+  return {
+    bottom: rawPinnedRows == null ? void 0 : (_rawPinnedRows$bottom = rawPinnedRows.bottom) == null ? void 0 : _rawPinnedRows$bottom.map(function (rowEntry) {
+      var _rowEntry$model;
+
+      return {
+        id: rowEntry.id,
+        model: (_rowEntry$model = rowEntry.model) != null ? _rowEntry$model : {}
+      };
+    }),
+    top: rawPinnedRows == null ? void 0 : (_rawPinnedRows$top = rawPinnedRows.top) == null ? void 0 : _rawPinnedRows$top.map(function (rowEntry) {
+      var _rowEntry$model2;
+
+      return {
+        id: rowEntry.id,
+        model: (_rowEntry$model2 = rowEntry.model) != null ? _rowEntry$model2 : {}
+      };
+    })
+  };
 });
 /**
  * @ignore - do not document.