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

package/modern/components/GridRow.js

@@ -5,7 +5,7 @@ const _excluded = ["selected", "rowId", "row", "index", "style", "position", "ro
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { unstable_composeClasses as composeClasses, useForkRef } from '@mui/material';
 import { GridEditModes, GridRowModes, GridCellModes } from '../models/gridEditRowModel';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses';
@@ -18,7 +18,7 @@ import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../colDef/gridCheckboxSelection
 import { GRID_ACTIONS_COLUMN_TYPE } from '../colDef/gridActionsColDef';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../constants/gridDetailPanelToggleField';
 import { gridSortModelSelector } from '../hooks/features/sorting/gridSortingSelector';
-import { gridRowTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector';
+import { gridRowMaximumTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector';
 import { gridDensityHeaderGroupingMaxDepthSelector } from '../hooks/features/density/densitySelector';
 import { randomNumberBetween } from '../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -55,7 +55,7 @@ const EmptyCell = ({
   }); // TODO change to .MuiDataGrid-emptyCell or .MuiDataGrid-rowFiller
 };
 
-function GridRow(props) {
+const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const {
     selected,
     rowId,
@@ -86,8 +86,9 @@ function GridRow(props) {
   const currentPage = useGridVisibleRows(apiRef, rootProps);
   const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
   const sortModel = useGridSelector(apiRef, gridSortModelSelector);
-  const treeDepth = useGridSelector(apiRef, gridRowTreeDepthSelector);
+  const treeDepth = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector);
   const headerGroupingMaxDepth = useGridSelector(apiRef, gridDensityHeaderGroupingMaxDepthSelector);
+  const handleRef = useForkRef(ref, refProp);
   const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
 
   const {
@@ -322,6 +323,7 @@ function GridRow(props) {
   }
 
   const randomNumber = randomNumberBetween(10000, 20, 80);
+  const rowType = apiRef.current.getRowNode(rowId).type;
   const cells = [];
 
   for (let i = 0; i < renderedColumns.length; i += 1) {
@@ -333,7 +335,7 @@ function GridRow(props) {
     const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
 
     if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) {
-      if (row) {
+      if (rowType !== 'skeletonRow') {
         const {
           colSpan,
           width
@@ -368,7 +370,7 @@ function GridRow(props) {
     onMouseLeave: publish('rowMouseLeave', onMouseLeave)
   } : null;
   return /*#__PURE__*/_jsxs("div", _extends({
-    ref: ref,
+    ref: handleRef,
     "data-id": rowId,
     "data-rowindex": index,
     role: "row",
@@ -381,8 +383,7 @@ function GridRow(props) {
       width: emptyCellWidth
     })]
   }));
-}
-
+});
 process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/modern/components/base/GridBody.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { GridMainContainer } from '../containers/GridMainContainer';
 import { GridAutoSizer } from '../GridAutoSizer';
-import { GridOverlays } from './GridOverlays';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { gridDensityTotalHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
@@ -51,7 +50,7 @@ function GridBody(props) {
     apiRef.current.publishEvent('resize', size);
   }, [apiRef]);
   return /*#__PURE__*/_jsxs(GridMainContainer, {
-    children: [/*#__PURE__*/_jsx(GridOverlays, {}), /*#__PURE__*/_jsx(ColumnHeadersComponent, {
+    children: [/*#__PURE__*/_jsx(ColumnHeadersComponent, {
       ref: columnsContainerRef,
       innerRef: columnHeadersRef
     }), /*#__PURE__*/_jsx(GridAutoSizer, {

package/modern/components/base/GridOverlays.js

@@ -1,18 +1,53 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
+import { styled } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import clsx from 'clsx';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { gridVisibleRowCountSelector } from '../../hooks/features/filter/gridFilterSelector';
 import { gridRowCountSelector, gridRowsLoadingSelector } from '../../hooks/features/rows/gridRowsSelector';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { gridDensityTotalHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
+import { getMinimalContentHeight } from '../../hooks/features/rows/gridRowsUtils';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const GridOverlayWrapperRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'OverlayWrapper',
+  overridesResolver: (props, styles) => styles.overlayWrapper
+})({
+  position: 'sticky',
+  // To stay in place while scrolling
+  top: 0,
+  left: 0,
+  width: 0,
+  // To stay above the content instead of shifting it down
+  height: 0,
+  // To stay above the content instead of shifting it down
+  zIndex: 4 // Should be above pinned columns, pinned rows and detail panel
+
+});
+const GridOverlayWrapperInner = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'OverlayWrapperInner',
+  overridesResolver: (props, styles) => styles.overlayWrapperInner
+})({});
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['overlayWrapper'],
+    inner: ['overlayWrapperInner']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
 
 function GridOverlayWrapper(props) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const totalHeaderHeight = useGridSelector(apiRef, gridDensityTotalHeaderHeightSelector);
   const [viewportInnerSize, setViewportInnerSize] = React.useState(() => apiRef.current.getRootDimensions()?.viewportInnerSize ?? null);
   const handleViewportSizeChange = React.useCallback(() => {
     setViewportInnerSize(apiRef.current.getRootDimensions()?.viewportInnerSize ?? null);
@@ -23,22 +58,27 @@ function GridOverlayWrapper(props) {
   let height = viewportInnerSize?.height ?? 0;
 
   if (rootProps.autoHeight && height === 0) {
-    height = 'auto';
+    height = getMinimalContentHeight(apiRef); // Give room to show the overlay when there no rows.
   }
 
+  const classes = useUtilityClasses(_extends({}, props, {
+    classes: rootProps.classes
+  }));
+
   if (!viewportInnerSize) {
     return null;
   }
 
-  return /*#__PURE__*/_jsx("div", _extends({
-    style: {
-      height,
-      width: viewportInnerSize?.width ?? 0,
-      position: 'absolute',
-      top: totalHeaderHeight,
-      bottom: height === 'auto' ? 0 : undefined
-    }
-  }, props));
+  return /*#__PURE__*/_jsx(GridOverlayWrapperRoot, {
+    className: clsx(classes.root),
+    children: /*#__PURE__*/_jsx(GridOverlayWrapperInner, _extends({
+      className: clsx(classes.inner),
+      style: {
+        height,
+        width: viewportInnerSize?.width ?? 0
+      }
+    }, props))
+  });
 }
 
 export function GridOverlays() {

package/modern/components/cell/GridBooleanCell.js

@@ -7,6 +7,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { isAutoGeneratedRow } from '../../hooks/features/rows/gridRowsUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 const useUtilityClasses = ownerState => {
@@ -131,7 +132,7 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
 const GridBooleanCell = /*#__PURE__*/React.memo(GridBooleanCellRaw);
 export { GridBooleanCell };
 export const renderBooleanCell = params => {
-  if (params.rowNode.isAutoGenerated) {
+  if (isAutoGeneratedRow(params.rowNode)) {
     return '';
   }
 

package/modern/components/columnSelection/GridCellCheckboxRenderer.js

@@ -75,17 +75,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/modern/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/modern/components/panel/filterPanel/GridFilterForm.js

@@ -229,7 +229,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/modern/components/toolbar/GridToolbarFilterButton.js

@@ -71,7 +71,7 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
         children: activeFilters.map((item, index) => _extends({}, lookup[item.columnField] && /*#__PURE__*/_jsx("li", {
           children: `${lookup[item.columnField].headerName || item.columnField}
                   ${getOperatorLabel(item)}
-                  ${item.value}`
+                  ${item.value ?? ''}`
         }, index)))
       })]
     });

package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js

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

package/modern/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 => {
     const {
       id,
@@ -440,7 +449,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/modern/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/modern/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: {}
 });
@@ -28,7 +29,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/modern/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');
@@ -158,6 +159,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') {
@@ -250,7 +255,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) {
@@ -267,7 +272,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);
 
@@ -328,7 +333,7 @@ export const useGridRowEditing = (apiRef, props) => {
       mode: GridRowModes.Edit
     }, other));
   }, [throwIfNotInMode, updateRowInRowModesModel]);
-  const updateStateToStartRowEditMode = React.useCallback(params => {
+  const updateStateToStartRowEditMode = useEventCallback(params => {
     const {
       id,
       fieldToFocus,
@@ -355,7 +360,7 @@ export const useGridRowEditing = (apiRef, props) => {
     if (fieldToFocus) {
       apiRef.current.setCellFocus(id, fieldToFocus);
     }
-  }, [apiRef, updateOrDeleteRowState]);
+  });
   const stopRowEditMode = React.useCallback(params => {
     const {
       id
@@ -367,7 +372,7 @@ export const useGridRowEditing = (apiRef, props) => {
       mode: GridRowModes.View
     }, other));
   }, [throwIfNotInMode, updateRowInRowModesModel]);
-  const updateStateToStopRowEditMode = React.useCallback(params => {
+  const updateStateToStopRowEditMode = useEventCallback(params => {
     const {
       id,
       ignoreModifications,
@@ -414,7 +419,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);
@@ -435,7 +444,7 @@ export const useGridRowEditing = (apiRef, props) => {
       apiRef.current.updateRows([rowUpdate]);
       finishRowEditMode();
     }
-  }, [apiRef, onProcessRowUpdateError, processRowUpdate, updateOrDeleteRowState, updateRowInRowModesModel]);
+  });
   const setRowEditingEditCellValue = React.useCallback(params => {
     const {
       id,
@@ -589,7 +598,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/modern/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';
@@ -66,12 +73,9 @@ export const useGridPrintExport = (apiRef, props) => {
       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.contentWindow?.document;
+    const printDoc = printWindow.contentDocument;
 
     if (!printDoc) {
       return;
@@ -107,10 +111,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') {
@@ -202,17 +208,25 @@ export const useGridPrintExport = (apiRef, props) => {
 
     await updateGridColumnsForPrint(options?.fields, options?.allColumns);
     apiRef.current.unstable_disableVirtualization();
+    await raf(); // wait for the state changes to take action
+
     const printWindow = buildPrintWindow(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/modern/hooks/features/export/utils.js

@@ -20,7 +20,7 @@ export const defaultGetRowsToExport = ({
   const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
   const rowTree = gridRowTreeSelector(apiRef);
   const selectedRows = apiRef.current.getSelectedRows();
-  const bodyRows = filteredSortedRowIds.filter(id => (rowTree[id].position ?? 'body') === 'body');
+  const bodyRows = filteredSortedRowIds.filter(id => rowTree[id].type !== 'footer');
   const pinnedRows = gridPinnedRowsSelector(apiRef);
   const topPinnedRowsIds = pinnedRows?.top?.map(row => row.id) || [];
   const bottomPinnedRowsIds = pinnedRows?.bottom?.map(row => row.id) || [];

package/modern/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;
   }