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

package/components/columnSelection/GridCellCheckboxRenderer.js

@@ -79,17 +79,12 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
     }
   }, [apiRef, props]);
 
-  if (rowNode.position === 'footer') {
+  if (rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
     return null;
   }
 
   const isSelectable = apiRef.current.isRowSelectable(id);
   const label = apiRef.current.getLocaleText(isChecked ? 'checkboxSelectionUnselectRow' : 'checkboxSelectionSelectRow');
-
-  if (rowNode.isPinned) {
-    return null;
-  }
-
   return /*#__PURE__*/_jsx(rootProps.components.BaseCheckbox, _extends({
     ref: handleRef,
     tabIndex: tabIndex,

package/components/containers/GridOverlay.js

@@ -27,13 +27,8 @@ const GridOverlayRoot = styled('div', {
 })(({
   theme
 }) => ({
-  position: 'absolute',
-  top: 0,
-  zIndex: 4,
-  // should be above pinned columns, pinned rows and detail panel
   width: '100%',
   height: '100%',
-  pointerEvents: 'none',
   display: 'flex',
   alignSelf: 'center',
   alignItems: 'center',

package/components/panel/filterPanel/GridFilterForm.js

@@ -235,7 +235,8 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
   }), [currentOperator]);
   return /*#__PURE__*/_jsxs(GridFilterFormRoot, _extends({
     ref: ref,
-    className: classes.root
+    className: classes.root,
+    "data-id": item.id
   }, other, {
     children: [/*#__PURE__*/_jsx(FilterFormDeleteIcon, _extends({
       variant: "standard",

package/components/toolbar/GridToolbarFilterButton.js

@@ -70,11 +70,15 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
     return /*#__PURE__*/_jsxs("div", {
       children: [apiRef.current.getLocaleText('toolbarFiltersTooltipActive')(activeFilters.length), /*#__PURE__*/_jsx(GridToolbarFilterListRoot, {
         className: classes.root,
-        children: activeFilters.map((item, index) => _extends({}, lookup[item.columnField] && /*#__PURE__*/_jsx("li", {
-          children: `${lookup[item.columnField].headerName || item.columnField}
+        children: activeFilters.map((item, index) => {
+          var _item$value;
+
+          return _extends({}, lookup[item.columnField] && /*#__PURE__*/_jsx("li", {
+            children: `${lookup[item.columnField].headerName || item.columnField}
                   ${getOperatorLabel(item)}
-                  ${item.value}`
-        }, index)))
+                  ${(_item$value = item.value) != null ? _item$value : ''}`
+          }, index));
+        })
       })]
     });
   }, [apiRef, preferencePanel.open, activeFilters, lookup, classes]);

package/constants/gridClasses.d.ts

@@ -315,6 +315,14 @@ export interface GridClasses {
      * Styles applied to the menu list element.
      */
     menuList: string;
+    /**
+     * Styles applied to the overlay wrapper element.
+     */
+    overlayWrapper: string;
+    /**
+     * Styles applied to the overlay wrapper inner element.
+     */
+    overlayWrapperInner: string;
     /**
      * Styles applied to the overlay element.
      */

package/hooks/core/pipeProcessing/gridPipeProcessingApi.d.ts

@@ -4,7 +4,7 @@ import { GridInitialStateCommunity } from '../../../models/gridStateCommunity';
 import { GridExportStateParams, GridRestoreStatePreProcessingContext, GridRestoreStatePreProcessingValue } from '../../features/statePersistence/gridStatePersistenceInterface';
 import { GridHydrateColumnsValue } from '../../features/columns/gridColumnsInterfaces';
 import { GridRowEntry, GridRowId } from '../../../models/gridRows';
-import { GridHydrateRowsValue } from '../../features/rows/gridRowsState';
+import { GridHydrateRowsValue } from '../../features/rows/gridRowsInterfaces';
 import { GridPreferencePanelsValue } from '../../features/preferencesPanel';
 export declare type GridPipeProcessorGroup = keyof GridPipeProcessingLookup;
 export interface GridPipeProcessingLookup {

package/hooks/core/strategyProcessing/gridStrategyProcessingApi.d.ts

@@ -1,4 +1,4 @@
-import { GridRowTreeCreationParams, GridRowTreeCreationValue } from '../../features/rows/gridRowsState';
+import { GridRowTreeCreationParams, GridRowTreeCreationValue } from '../../features/rows/gridRowsInterfaces';
 import { GridFilteringMethodParams, GridFilteringMethodValue } from '../../features/filter/gridFilterState';
 import { GridSortingMethodParams, GridSortingMethodValue } from '../../features/sorting/gridSortingState';
 export declare type GridStrategyProcessorName = keyof GridStrategyProcessingLookup;

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -238,7 +238,7 @@ export const useGridColumnHeaders = props => {
 
     const columnsToRender = getColumnsToRender(params);
 
-    if (columnsToRender == null) {
+    if (columnsToRender == null || columnsToRender.renderedColumns.length === 0) {
       return null;
     }
 

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

@@ -4,13 +4,14 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["id", "field"],
       _excluded2 = ["id", "field"];
 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';
 const 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');
@@ -103,6 +104,10 @@ export const useGridCellEditing = (apiRef, props) => {
     } else if (params.isEditable) {
       let 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') {
@@ -185,7 +190,7 @@ export const useGridCellEditing = (apiRef, props) => {
     const isEditing = editingState[id] && editingState[id][field];
     return isEditing ? GridCellModes.Edit : GridCellModes.View;
   }, [apiRef]);
-  const updateCellModesModel = React.useCallback(newModel => {
+  const updateCellModesModel = useEventCallback(newModel => {
     const isNewModelDifferentFromProp = newModel !== props.cellModesModel;
 
     if (onCellModesModelChange && isNewModelDifferentFromProp) {
@@ -202,7 +207,7 @@ export const useGridCellEditing = (apiRef, props) => {
     setCellModesModel(newModel);
     cellModesModelRef.current = newModel;
     apiRef.current.publishEvent('cellModesModelChange', newModel);
-  }, [apiRef, onCellModesModelChange, props.cellModesModel, signature]);
+  });
   const updateFieldInCellModesModel = React.useCallback((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
@@ -261,7 +266,7 @@ export const useGridCellEditing = (apiRef, props) => {
       mode: GridCellModes.Edit
     }, other));
   }, [throwIfNotEditable, throwIfNotInMode, updateFieldInCellModesModel]);
-  const updateStateToStartCellEditMode = React.useCallback(params => {
+  const updateStateToStartCellEditMode = useEventCallback(params => {
     const {
       id,
       field,
@@ -274,7 +279,7 @@ export const useGridCellEditing = (apiRef, props) => {
     };
     updateOrDeleteFieldState(id, field, newProps);
     apiRef.current.setCellFocus(id, field);
-  }, [apiRef, updateOrDeleteFieldState]);
+  });
   const stopCellEditMode = React.useCallback(params => {
     const {
       id,
@@ -287,7 +292,7 @@ export const useGridCellEditing = (apiRef, props) => {
       mode: GridCellModes.View
     }, other));
   }, [throwIfNotInMode, updateFieldInCellModesModel]);
-  const updateStateToStopCellEditMode = React.useCallback(async params => {
+  const updateStateToStopCellEditMode = useEventCallback(async params => {
     const {
       id,
       field,
@@ -332,7 +337,11 @@ export const useGridCellEditing = (apiRef, props) => {
 
     if (processRowUpdate) {
       const 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);
@@ -354,7 +363,7 @@ export const useGridCellEditing = (apiRef, props) => {
       apiRef.current.updateRows([rowUpdate]);
       finishCellEditMode();
     }
-  }, [apiRef, onProcessRowUpdateError, processRowUpdate, throwIfNotInMode, updateFieldInCellModesModel, updateOrDeleteFieldState]);
+  });
   const setCellEditingEditCellValue = React.useCallback(async params => {
     var _editingState$id, _editingState$id$fiel;
 
@@ -442,7 +451,7 @@ export const useGridCellEditing = (apiRef, props) => {
     }
   }, [cellModesModelProp, updateCellModesModel]);
   React.useEffect(() => {
-    const idToIdLookup = gridRowsIdToIdLookupSelector(apiRef); // Update the ref here because updateStateToStopCellEditMode may change it later
+    const idToIdLookup = gridRowsDataRowIdToIdLookupSelector(apiRef); // Update the ref here because updateStateToStopCellEditMode may change it later
 
     const copyOfPrevCellModes = prevCellModesModel.current;
     prevCellModesModel.current = deepClone(cellModesModel); // Do a deep-clone because the attributes might be changed later

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

@@ -5,6 +5,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 const editingStateInitializer = state => _extends({}, state, {
   editRows: {}
 });
@@ -16,7 +17,7 @@ export const useGridEditing = (apiRef, props) => {
     isCellEditable: isCellEditableProp
   } = props;
   const isCellEditable = React.useCallback(params => {
-    if (params.rowNode.isAutoGenerated) {
+    if (isAutoGeneratedRow(params.rowNode)) {
       return false;
     }
 
@@ -32,7 +33,7 @@ export const useGridEditing = (apiRef, props) => {
       return isCellEditableProp(params);
     }
 
-    if (params.rowNode.isPinned) {
+    if (params.rowNode.type === 'pinnedRow') {
       return false;
     }
 

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

@@ -7,6 +7,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 const editingStateInitializer = state => _extends({}, state, {
   editRows: {}
 });
@@ -30,7 +31,7 @@ export function useGridEditing(apiRef, props) {
     stateSelector: gridEditRowsStateSelector,
     changeEvent: 'editRowsModelChange'
   });
-  const isCellEditable = React.useCallback(params => !params.rowNode.isAutoGenerated && !params.rowNode.isPinned && !!params.colDef.editable && !!params.colDef.renderEditCell && (!props.isCellEditable || props.isCellEditable(params)), // eslint-disable-next-line react-hooks/exhaustive-deps
+  const isCellEditable = React.useCallback(params => !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]);
 
   const maybeDebounce = (id, field, debounceMs, callback) => {

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

@@ -4,6 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _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';
@@ -11,7 +12,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';
 const 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');
@@ -160,6 +161,10 @@ export const useGridRowEditing = (apiRef, props) => {
     } else if (params.isEditable) {
       let 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') {
@@ -252,7 +257,7 @@ export const useGridRowEditing = (apiRef, props) => {
     const isEditing = editingState[id] && Object.keys(editingState[id]).length > 0;
     return isEditing ? GridRowModes.Edit : GridRowModes.View;
   }, [apiRef, props.editMode]);
-  const updateRowModesModel = React.useCallback(newModel => {
+  const updateRowModesModel = useEventCallback(newModel => {
     const isNewModelDifferentFromProp = newModel !== props.rowModesModel;
 
     if (onRowModesModelChange && isNewModelDifferentFromProp) {
@@ -269,7 +274,7 @@ export const useGridRowEditing = (apiRef, props) => {
     setRowModesModel(newModel);
     rowModesModelRef.current = newModel;
     apiRef.current.publishEvent('rowModesModelChange', newModel);
-  }, [apiRef, onRowModesModelChange, props.rowModesModel, signature]);
+  });
   const updateRowInRowModesModel = React.useCallback((id, newProps) => {
     const newModel = _extends({}, rowModesModelRef.current);
 
@@ -330,7 +335,7 @@ export const useGridRowEditing = (apiRef, props) => {
       mode: GridRowModes.Edit
     }, other));
   }, [throwIfNotInMode, updateRowInRowModesModel]);
-  const updateStateToStartRowEditMode = React.useCallback(params => {
+  const updateStateToStartRowEditMode = useEventCallback(params => {
     const {
       id,
       fieldToFocus,
@@ -357,7 +362,7 @@ export const useGridRowEditing = (apiRef, props) => {
     if (fieldToFocus) {
       apiRef.current.setCellFocus(id, fieldToFocus);
     }
-  }, [apiRef, updateOrDeleteRowState]);
+  });
   const stopRowEditMode = React.useCallback(params => {
     const {
       id
@@ -369,7 +374,7 @@ export const useGridRowEditing = (apiRef, props) => {
       mode: GridRowModes.View
     }, other));
   }, [throwIfNotInMode, updateRowInRowModesModel]);
-  const updateStateToStopRowEditMode = React.useCallback(params => {
+  const updateStateToStopRowEditMode = useEventCallback(params => {
     const {
       id,
       ignoreModifications,
@@ -416,7 +421,11 @@ export const useGridRowEditing = (apiRef, props) => {
 
     if (processRowUpdate) {
       const 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);
@@ -437,7 +446,7 @@ export const useGridRowEditing = (apiRef, props) => {
       apiRef.current.updateRows([rowUpdate]);
       finishRowEditMode();
     }
-  }, [apiRef, onProcessRowUpdateError, processRowUpdate, updateOrDeleteRowState, updateRowInRowModesModel]);
+  });
   const setRowEditingEditCellValue = React.useCallback(params => {
     const {
       id,
@@ -591,7 +600,7 @@ export const useGridRowEditing = (apiRef, props) => {
     }
   }, [rowModesModelProp, updateRowModesModel]);
   React.useEffect(() => {
-    const idToIdLookup = gridRowsIdToIdLookupSelector(apiRef); // Update the ref here because updateStateToStopRowEditMode may change it later
+    const idToIdLookup = gridRowsDataRowIdToIdLookupSelector(apiRef); // Update the ref here because updateStateToStopRowEditMode may change it later
 
     const copyOfPrevRowModesModel = prevRowModesModel.current;
     prevRowModesModel.current = deepClone(rowModesModel); // Do a deep-clone because the attributes might be changed later

package/hooks/features/export/useGridPrintExport.js

@@ -13,6 +13,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(resolve => {
+    requestAnimationFrame(() => {
+      resolve();
+    });
+  });
+}
+
 /**
  * @requires useGridColumns (state)
  * @requires useGridFilter (state)
@@ -30,6 +38,7 @@ export const useGridPrintExport = (apiRef, props) => {
   // the new state needs to be in place before the grid can be sized correctly
 
   const updateGridColumnsForPrint = React.useCallback((fields, allColumns) => new Promise(resolve => {
+    // TODO remove unused Promise
     if (!fields && !allColumns) {
       resolve();
       return;
@@ -49,12 +58,10 @@ export const useGridPrintExport = (apiRef, props) => {
     });
     apiRef.current.setColumnVisibilityModel(newColumnVisibilityModel);
     resolve();
-  }), [apiRef]);
+  }), [apiRef]); // TODO move outside of this scope and remove React.useCallback
+
   const buildPrintWindow = React.useCallback(title => {
     const 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';
@@ -62,18 +69,15 @@ export const useGridPrintExport = (apiRef, props) => {
     return iframeEl;
   }, []);
   const handlePrintWindowLoad = React.useCallback((printWindow, options) => {
-    var _printWindow$contentW, _querySelector, _querySelector2;
+    var _querySelector, _querySelector2;
 
     const 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;
-    const printDoc = printWindow.contentDocument || ((_printWindow$contentW = printWindow.contentWindow) == null ? void 0 : _printWindow$contentW.document);
+    const printDoc = printWindow.contentDocument;
 
     if (!printDoc) {
       return;
@@ -113,10 +117,12 @@ export const useGridPrintExport = (apiRef, props) => {
     } // Expand container height to accommodate all rows
 
 
-    gridClone.style.height = `${rowsMeta.currentPageTotalHeight + totalHeaderHeight + gridToolbarElementHeight + gridFooterElementHeight}px`; // Remove all loaded elements from the current host
+    gridClone.style.height = `${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);
+    const container = document.createElement('div');
+    container.appendChild(gridClone);
+    printDoc.body.innerHTML = container.innerHTML;
     const defaultPageStyle = typeof normalizeOptions.pageStyle === 'function' ? normalizeOptions.pageStyle() : normalizeOptions.pageStyle;
 
     if (typeof defaultPageStyle === 'string') {
@@ -210,17 +216,25 @@ export const useGridPrintExport = (apiRef, props) => {
 
     await updateGridColumnsForPrint(options == null ? void 0 : options.fields, options == null ? void 0 : options.allColumns);
     apiRef.current.unstable_disableVirtualization();
+    await raf(); // wait for the state changes to take action
+
     const 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 = () => handlePrintWindowLoad(printWindow, options);
+      printWindow.onload = () => {
+        handlePrintWindowLoad(printWindow, options);
+
+        printWindow.contentWindow.onafterprint = () => {
+          handlePrintWindowAfterPrint(printWindow);
+        };
+      };
 
-      printWindow.contentWindow.onafterprint = () => handlePrintWindowAfterPrint(printWindow);
+      doc.current.body.appendChild(printWindow);
     }
   }, [props, logger, apiRef, buildPrintWindow, handlePrintWindowLoad, handlePrintWindowAfterPrint, updateGridColumnsForPrint]);
   const printExportApi = {

package/hooks/features/export/utils.js

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

package/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
  */
@@ -78,7 +78,7 @@ export const gridVisibleRowsSelector = gridVisibleSortedRowIdsSelector;
  * @category Filtering
  */
 
-export const gridVisibleSortedTopLevelRowEntriesSelector = createSelector(gridVisibleSortedRowEntriesSelector, gridRowTreeSelector, gridRowTreeDepthSelector, (visibleSortedRows, rowTree, rowTreeDepth) => {
+export const gridVisibleSortedTopLevelRowEntriesSelector = createSelector(gridVisibleSortedRowEntriesSelector, gridRowTreeSelector, gridRowMaximumTreeDepthSelector, (visibleSortedRows, rowTree, rowTreeDepth) => {
   if (rowTreeDepth < 2) {
     return visibleSortedRows;
   }

package/hooks/features/filter/useGridFilter.js

@@ -1,6 +1,5 @@
 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';
@@ -9,7 +8,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';
@@ -47,7 +46,7 @@ export const useGridFilter = (apiRef, props) => {
   const updateFilteredRows = React.useCallback(() => {
     apiRef.current.setState(state => {
       const filterModel = gridFilterModelSelector(state, apiRef.current.instanceId);
-      const isRowMatchingFilters = props.filterMode === GridFeatureModeConstant.client ? buildAggregatedFilterApplier(filterModel, apiRef) : null;
+      const isRowMatchingFilters = props.filterMode === 'client' ? buildAggregatedFilterApplier(filterModel, apiRef) : null;
       const filteringResult = apiRef.current.unstable_applyStrategyProcessor('filtering', {
         isRowMatchingFilters,
         filterModel: filterModel != null ? filterModel : getDefaultGridFilterModel()
@@ -256,8 +255,9 @@ export const useGridFilter = (apiRef, props) => {
     return initialValue;
   }, [props.components.FilterPanel, (_props$componentsProp2 = props.componentsProps) == null ? void 0 : _props$componentsProp2.filterPanel]);
   const flatFilteringMethod = React.useCallback(params => {
-    if (props.filterMode === GridFeatureModeConstant.client && params.isRowMatchingFilters) {
-      const rowIds = gridRowIdsSelector(apiRef);
+    if (props.filterMode === 'client' && params.isRowMatchingFilters) {
+      const tree = gridRowTreeSelector(apiRef);
+      const rowIds = tree[GRID_ROOT_GROUP_ID].children;
       const filteredRowsLookup = {};
 
       for (let i = 0; i < rowIds.length; i += 1) {
@@ -279,7 +279,7 @@ export const useGridFilter = (apiRef, props) => {
 
       return {
         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/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.
@@ -30,7 +30,7 @@ export const gridPageCountSelector = createSelector(gridPaginationSelector, pagi
  * @category Pagination
  */
 
-export const gridPaginationRowRangeSelector = createSelector(gridPaginationSelector, gridRowTreeSelector, gridRowTreeDepthSelector, gridVisibleSortedRowEntriesSelector, gridVisibleSortedTopLevelRowEntriesSelector, (pagination, rowTree, rowTreeDepth, visibleSortedRowEntries, visibleSortedTopLevelRowEntries) => {
+export const gridPaginationRowRangeSelector = createSelector(gridPaginationSelector, gridRowTreeSelector, gridRowMaximumTreeDepthSelector, gridVisibleSortedRowEntriesSelector, gridVisibleSortedTopLevelRowEntriesSelector, (pagination, rowTree, rowTreeDepth, visibleSortedRowEntries, visibleSortedTopLevelRowEntries) => {
   const visibleTopLevelRowCount = visibleSortedTopLevelRowEntries.length;
   const topLevelFirstRowIndex = Math.min(pagination.pageSize * pagination.page, visibleTopLevelRowCount - 1);
   const topLevelLastRowIndex = Math.min(topLevelFirstRowIndex + pagination.pageSize - 1, visibleTopLevelRowCount - 1); // The range contains no element