@mui/x-data-grid 5.7.0 → 5.10.0

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

@@ -6,10 +6,13 @@ 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 { 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');
 export const useGridCellEditing = (apiRef, props) => {
   const {
-    processRowUpdate
+    processRowUpdate,
+    onProcessRowUpdateError
   } = props;
 
   const runIfEditModeIsCell = callback => (...args) => {
@@ -220,10 +223,7 @@ export const useGridCellEditing = (apiRef, props) => {
     }
 
     const editingState = gridEditRowsStateSelector(apiRef.current.state);
-    const row = apiRef.current.getRow(id);
-    const column = apiRef.current.getColumn(field);
     const {
-      value,
       error,
       isProcessingProps
     } = editingState[id][field];
@@ -232,25 +232,33 @@ export const useGridCellEditing = (apiRef, props) => {
       return;
     }
 
-    const rowUpdate = column.valueSetter ? column.valueSetter({
-      value,
-      row
-    }) : _extends({}, row, {
-      [field]: value
-    });
+    const rowUpdate = apiRef.current.unstable_getRowWithUpdatedValuesFromCellEditing(id, field);
 
     if (processRowUpdate) {
-      Promise.resolve(processRowUpdate(rowUpdate, row)).then(finalRowUpdate => {
-        apiRef.current.updateRows([finalRowUpdate]);
-        updateFocusedCellIfNeeded();
-        updateOrDeleteFieldState(id, field, null);
-      });
+      const handleError = errorThrown => {
+        if (onProcessRowUpdateError) {
+          onProcessRowUpdateError(errorThrown);
+        } else {
+          missingOnProcessRowUpdateErrorWarning();
+        }
+      };
+
+      try {
+        const row = apiRef.current.getRow(id);
+        Promise.resolve(processRowUpdate(rowUpdate, row)).then(finalRowUpdate => {
+          apiRef.current.updateRows([finalRowUpdate]);
+          updateFocusedCellIfNeeded();
+          updateOrDeleteFieldState(id, field, null);
+        }).catch(handleError);
+      } catch (errorThrown) {
+        handleError(errorThrown);
+      }
     } else {
       apiRef.current.updateRows([rowUpdate]);
       updateFocusedCellIfNeeded();
       updateOrDeleteFieldState(id, field, null);
     }
-  }, [apiRef, processRowUpdate, throwIfNotInMode, updateOrDeleteFieldState]);
+  }, [apiRef, onProcessRowUpdateError, processRowUpdate, throwIfNotInMode, updateOrDeleteFieldState]);
   const setCellEditingEditCellValue = React.useCallback(async params => {
     const {
       id,
@@ -305,11 +313,26 @@ export const useGridCellEditing = (apiRef, props) => {
     editingState = gridEditRowsStateSelector(apiRef.current.state);
     return !editingState[id][field].error;
   }, [apiRef, throwIfNotEditable, throwIfNotInMode, updateOrDeleteFieldState]);
+  const getRowWithUpdatedValuesFromCellEditing = React.useCallback((id, field) => {
+    const column = apiRef.current.getColumn(field);
+    const editingState = gridEditRowsStateSelector(apiRef.current.state);
+    const {
+      value
+    } = editingState[id][field];
+    const row = apiRef.current.getRow(id);
+    return column.valueSetter ? column.valueSetter({
+      value,
+      row
+    }) : _extends({}, row, {
+      [field]: value
+    });
+  }, [apiRef]);
   const editingApi = {
     getCellMode,
     startCellEditMode,
     stopCellEditMode,
-    unstable_setCellEditingEditCellValue: setCellEditingEditCellValue
+    unstable_setCellEditingEditCellValue: setCellEditingEditCellValue,
+    unstable_getRowWithUpdatedValuesFromCellEditing: getRowWithUpdatedValuesFromCellEditing
   };
   useGridApiMethod(apiRef, editingApi, 'EditingApi');
 };

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridCellEditing } from './useGridCellEditing.new';
-import { GridCellModes } from '../../../models/gridEditRowModel';
+import { GridCellModes, GridEditModes } from '../../../models/gridEditRowModel';
 import { useGridRowEditing } from './useGridRowEditing.new';
 export const editingStateInitializer = state => _extends({}, state, {
   editRows: {}
@@ -99,7 +99,7 @@ export const useGridEditing = (apiRef, props) => {
     } = params;
     return new Promise(resolve => {
       maybeDebounce(id, field, debounceMs, async () => {
-        const setEditCellValueToCall = props.editMode === 'row' ? apiRef.current.unstable_setRowEditingEditCellValue : apiRef.current.unstable_setCellEditingEditCellValue; // Check if the cell is in edit mode
+        const setEditCellValueToCall = props.editMode === GridEditModes.Row ? apiRef.current.unstable_setRowEditingEditCellValue : apiRef.current.unstable_setCellEditingEditCellValue; // Check if the cell is in edit mode
         // By the time this callback runs the user may have cancelled the editing
 
         if (apiRef.current.getCellMode(id, field) === GridCellModes.Edit) {
@@ -109,10 +109,14 @@ export const useGridEditing = (apiRef, props) => {
       });
     });
   }, [apiRef, props.editMode]);
+  const getRowWithUpdatedValues = React.useCallback((id, field) => {
+    return props.editMode === GridEditModes.Cell ? apiRef.current.unstable_getRowWithUpdatedValuesFromCellEditing(id, field) : apiRef.current.unstable_getRowWithUpdatedValuesFromRowEditing(id);
+  }, [apiRef, props.editMode]);
   const editingSharedApi = {
     isCellEditable,
     setEditCellValue,
-    unstable_runPendingEditCellValueMutation: runPendingEditCellValueMutation
+    unstable_runPendingEditCellValueMutation: runPendingEditCellValueMutation,
+    unstable_getRowWithUpdatedValues: getRowWithUpdatedValues
   };
   useGridApiMethod(apiRef, editingSharedApi, 'EditingApi');
 };

package/hooks/features/editRows/useGridRowEditing.new.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
-export declare const useGridRowEditing: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'editMode' | 'processRowUpdate' | 'onRowEditStart' | 'onRowEditStop'>) => void;
+export declare const useGridRowEditing: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'editMode' | 'processRowUpdate' | 'onRowEditStart' | 'onRowEditStop' | 'onProcessRowUpdateError'>) => void;

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

@@ -9,12 +9,15 @@ import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridEditRowsStateSelector } from './gridEditRowsSelector';
 import { isPrintableKey } from '../../../utils/keyboardUtils';
 import { gridColumnFieldsSelector } from '../columns/gridColumnsSelector';
+import { buildWarning } from '../../../utils/warning';
 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');
 export const useGridRowEditing = (apiRef, props) => {
   const focusTimeout = React.useRef(null);
   const nextFocusedCell = React.useRef(null);
   const {
-    processRowUpdate
+    processRowUpdate,
+    onProcessRowUpdateError
   } = props;
 
   const runIfEditModeIsRow = callback => (...args) => {
@@ -333,33 +336,32 @@ export const useGridRowEditing = (apiRef, props) => {
       return;
     }
 
-    let rowUpdate = _extends({}, row);
+    const rowUpdate = apiRef.current.unstable_getRowWithUpdatedValuesFromRowEditing(id);
 
-    Object.entries(editingState[id]).forEach(([field, fieldProps]) => {
-      const column = apiRef.current.getColumn(field);
+    if (processRowUpdate) {
+      const handleError = errorThrown => {
+        if (onProcessRowUpdateError) {
+          onProcessRowUpdateError(errorThrown);
+        } else {
+          missingOnProcessRowUpdateErrorWarning();
+        }
+      };
 
-      if (column.valueSetter) {
-        rowUpdate = column.valueSetter({
-          value: fieldProps.value,
-          row: rowUpdate
-        });
-      } else {
-        rowUpdate[field] = fieldProps.value;
+      try {
+        Promise.resolve(processRowUpdate(rowUpdate, row)).then(finalRowUpdate => {
+          apiRef.current.updateRows([finalRowUpdate]);
+          updateFocusedCellIfNeeded();
+          updateOrDeleteRowState(id, null);
+        }).catch(handleError);
+      } catch (errorThrown) {
+        handleError(errorThrown);
       }
-    });
-
-    if (processRowUpdate) {
-      Promise.resolve(processRowUpdate(rowUpdate, row)).then(finalRowUpdate => {
-        apiRef.current.updateRows([finalRowUpdate]);
-        updateFocusedCellIfNeeded();
-        updateOrDeleteRowState(id, null);
-      });
     } else {
       apiRef.current.updateRows([rowUpdate]);
       updateFocusedCellIfNeeded();
       updateOrDeleteRowState(id, null);
     }
-  }, [apiRef, processRowUpdate, throwIfNotInMode, updateOrDeleteRowState]);
+  }, [apiRef, onProcessRowUpdateError, processRowUpdate, throwIfNotInMode, updateOrDeleteRowState]);
   const setRowEditingEditCellValue = React.useCallback(params => {
     const {
       id,
@@ -476,11 +478,32 @@ export const useGridRowEditing = (apiRef, props) => {
       });
     });
   }, [apiRef, throwIfNotEditable, updateOrDeleteFieldState]);
+  const getRowWithUpdatedValuesFromRowEditing = React.useCallback(id => {
+    const editingState = gridEditRowsStateSelector(apiRef.current.state);
+    const row = apiRef.current.getRow(id);
+
+    let rowUpdate = _extends({}, row);
+
+    Object.entries(editingState[id]).forEach(([field, fieldProps]) => {
+      const column = apiRef.current.getColumn(field);
+
+      if (column.valueSetter) {
+        rowUpdate = column.valueSetter({
+          value: fieldProps.value,
+          row: rowUpdate
+        });
+      } else {
+        rowUpdate[field] = fieldProps.value;
+      }
+    });
+    return rowUpdate;
+  }, [apiRef]);
   const editingApi = {
     getRowMode,
     startRowEditMode,
     stopRowEditMode,
-    unstable_setRowEditingEditCellValue: setRowEditingEditCellValue
+    unstable_setRowEditingEditCellValue: setRowEditingEditCellValue,
+    unstable_getRowWithUpdatedValuesFromRowEditing: getRowWithUpdatedValuesFromRowEditing
   };
   useGridApiMethod(apiRef, editingApi, 'EditingApi');
 };

package/hooks/features/events/useGridEvents.d.ts

@@ -5,4 +5,4 @@ import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
  * @requires useGridFocus (event) - can be after, async only
  * @requires useGridColumns (event) - can be after, async only
  */
-export declare function useGridEvents(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'onColumnHeaderClick' | 'onColumnHeaderDoubleClick' | 'onColumnHeaderOver' | 'onColumnHeaderOut' | 'onColumnHeaderEnter' | 'onColumnHeaderLeave' | 'onColumnOrderChange' | 'onCellClick' | 'onCellDoubleClick' | 'onCellKeyDown' | 'onCellFocusOut' | 'onRowDoubleClick' | 'onRowClick' | 'onError' | 'onStateChange'>): void;
+export declare function useGridEvents(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'onColumnHeaderClick' | 'onColumnHeaderDoubleClick' | 'onColumnHeaderOver' | 'onColumnHeaderOut' | 'onColumnHeaderEnter' | 'onColumnHeaderLeave' | 'onColumnOrderChange' | 'onCellClick' | 'onCellDoubleClick' | 'onCellKeyDown' | 'onCellFocusOut' | 'onPreferencePanelClose' | 'onPreferencePanelOpen' | 'onRowDoubleClick' | 'onRowClick' | 'onError' | 'onStateChange'>): void;

package/hooks/features/events/useGridEvents.js

@@ -17,6 +17,8 @@ export function useGridEvents(apiRef, props) {
   useGridApiOptionHandler(apiRef, GridEvents.cellDoubleClick, props.onCellDoubleClick);
   useGridApiOptionHandler(apiRef, GridEvents.cellKeyDown, props.onCellKeyDown);
   useGridApiOptionHandler(apiRef, GridEvents.cellFocusOut, props.onCellFocusOut);
+  useGridApiOptionHandler(apiRef, GridEvents.preferencePanelClose, props.onPreferencePanelClose);
+  useGridApiOptionHandler(apiRef, GridEvents.preferencePanelOpen, props.onPreferencePanelOpen);
   useGridApiOptionHandler(apiRef, GridEvents.rowDoubleClick, props.onRowDoubleClick);
   useGridApiOptionHandler(apiRef, GridEvents.rowClick, props.onRowClick);
   useGridApiOptionHandler(apiRef, GridEvents.componentError, props.onError);

package/hooks/features/filter/gridFilterSelector.d.ts

@@ -31,9 +31,7 @@ export declare const gridFilteredDescendantCountLookupSelector: import("../../..
  */
 export declare const gridVisibleSortedRowEntriesSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, {
     id: import("../../..").GridRowId;
-    model: {
-        [key: string]: any;
-    };
+    model: any;
 }[]>;
 /**
  * Get the id of the rows accessible after the filtering process.
@@ -48,9 +46,7 @@ export declare const gridVisibleSortedRowIdsSelector: import("../../../utils/cre
  */
 export declare const gridFilteredSortedRowEntriesSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, {
     id: import("../../..").GridRowId;
-    model: {
-        [key: string]: any;
-    };
+    model: any;
 }[]>;
 /**
  * Get the id of the rows accessible after the filtering process.
@@ -71,9 +67,7 @@ export declare const gridVisibleRowsSelector: import("../../../utils/createSelec
  */
 export declare const gridVisibleSortedTopLevelRowEntriesSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, {
     id: import("../../..").GridRowId;
-    model: {
-        [key: string]: any;
-    };
+    model: any;
 }[]>;
 /**
  * Get the amount of rows accessible after the filtering process.

package/hooks/features/filter/useGridFilter.js

@@ -11,7 +11,7 @@ import { getDefaultGridFilterModel } from './gridFilterState';
 import { gridFilterModelSelector, gridVisibleSortedRowEntriesSelector } from './gridFilterSelector';
 import { useFirstRender } from '../../utils/useFirstRender';
 import { gridRowIdsSelector } from '../rows';
-import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { GRID_DEFAULT_STRATEGY, useGridRegisterStrategyProcessor } from '../../core/strategyProcessing';
 import { buildAggregatedFilterApplier, sanitizeFilterModel, mergeStateWithFilterModel } from './gridFilterUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -44,11 +44,7 @@ export const useGridFilter = (apiRef, props) => {
     stateSelector: gridFilterModelSelector,
     changeEvent: GridEvents.filterModelChange
   });
-  /**
-   * API METHODS
-   */
-
-  const applyFilters = React.useCallback(() => {
+  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;
@@ -59,9 +55,16 @@ export const useGridFilter = (apiRef, props) => {
         filter: _extends({}, state.filter, filteringResult)
       });
     });
-    apiRef.current.publishEvent(GridEvents.visibleRowsSet);
+    apiRef.current.publishEvent(GridEvents.filteredRowsSet);
+  }, [props.filterMode, apiRef]);
+  /**
+   * API METHODS
+   */
+
+  const applyFilters = React.useCallback(() => {
+    updateFilteredRows();
     apiRef.current.forceUpdate();
-  }, [apiRef, props.filterMode]);
+  }, [apiRef, updateFilteredRows]);
   const upsertFilterItem = React.useCallback(item => {
     const filterModel = gridFilterModelSelector(apiRef);
     const items = [...filterModel.items];
@@ -221,9 +224,9 @@ export const useGridFilter = (apiRef, props) => {
       filteredDescendantCountLookup: {}
     };
   }, [apiRef, props.filterMode]);
-  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'preferencePanel', preferencePanelPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'preferencePanel', preferencePanelPreProcessing);
   useGridRegisterStrategyProcessor(apiRef, GRID_DEFAULT_STRATEGY, 'filtering', flatFilteringMethod);
   /**
    * EVENTS
@@ -245,8 +248,10 @@ export const useGridFilter = (apiRef, props) => {
     if (methodName === 'filtering') {
       apiRef.current.unstable_applyFilters();
     }
-  }, [apiRef]);
-  useGridApiEventHandler(apiRef, GridEvents.rowsSet, apiRef.current.unstable_applyFilters);
+  }, [apiRef]); // Do not call `apiRef.current.forceUpdate` to avoid re-render before updating the sorted rows.
+  // Otherwise, the state is not consistent during the render
+
+  useGridApiEventHandler(apiRef, GridEvents.rowsSet, updateFilteredRows);
   useGridApiEventHandler(apiRef, GridEvents.rowExpansionChange, apiRef.current.unstable_applyFilters);
   useGridApiEventHandler(apiRef, GridEvents.columnsChange, handleColumnsChange);
   useGridApiEventHandler(apiRef, GridEvents.activeStrategyProcessorChange, handleStrategyProcessorChange);

package/hooks/features/focus/useGridFocus.js

@@ -102,21 +102,31 @@ export const useGridFocus = (apiRef, props) => {
       rowIndexToFocus += 1;
     }
 
+    const currentPage = getVisibleRows(apiRef, {
+      pagination: props.pagination,
+      paginationMode: props.paginationMode
+    });
+
     if (columnIndexToFocus >= visibleColumns.length) {
-      // Go to next row if we are at the last column
+      // Go to next row if we are after the last column
       rowIndexToFocus += 1;
-      columnIndexToFocus = 0;
+
+      if (rowIndexToFocus < currentPage.rows.length) {
+        // Go to first column of the next row if there's one more row
+        columnIndexToFocus = 0;
+      }
     } else if (columnIndexToFocus < 0) {
-      // Go to previous row if we are at the first column
+      // Go to previous row if we are before the first column
       rowIndexToFocus -= 1;
-      columnIndexToFocus = visibleColumns.length - 1;
+
+      if (rowIndexToFocus >= 0) {
+        // Go to last column of the previous if there's one more row
+        columnIndexToFocus = visibleColumns.length - 1;
+      }
     }
 
-    const currentPage = getVisibleRows(apiRef, {
-      pagination: props.pagination,
-      paginationMode: props.paginationMode
-    });
-    rowIndexToFocus = clamp(rowIndexToFocus, currentPage.range.firstRowIndex, currentPage.range.lastRowIndex);
+    rowIndexToFocus = clamp(rowIndexToFocus, 0, currentPage.rows.length - 1);
+    columnIndexToFocus = clamp(columnIndexToFocus, 0, visibleColumns.length - 1);
     const rowToFocus = currentPage.rows[rowIndexToFocus];
     const columnToFocus = visibleColumns[columnIndexToFocus];
     apiRef.current.setCellFocus(rowToFocus.id, columnToFocus.field);

package/hooks/features/{keyboard → keyboardNavigation}/useGridKeyboardNavigation.d.ts

@@ -2,14 +2,12 @@ import * as React from 'react';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 /**
- * @requires useGridPage (state)
- * @requires useGridPageSize (state)
- * @requires useGridFilter (state)
- * @requires useGridColumns (state, method)
- * @requires useGridRows (state, method)
  * @requires useGridSorting (method) - can be after
+ * @requires useGridFilter (state) - can be after
+ * @requires useGridColumns (state, method) - can be after
  * @requires useGridDimensions (method) - can be after
  * @requires useGridFocus (method) - can be after
  * @requires useGridScroll (method) - can be after
+ * @requires useGridColumnSpanning (method) - can be after
  */
 export declare const useGridKeyboardNavigation: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'pagination' | 'paginationMode'>) => void;

package/hooks/features/{keyboard → keyboardNavigation}/useGridKeyboardNavigation.js

@@ -7,31 +7,50 @@ import { gridVisibleSortedRowEntriesSelector } from '../filter/gridFilterSelecto
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../colDef/gridCheckboxSelectionColDef';
 import { gridClasses } from '../../../constants/gridClasses';
+import { GridCellModes } from '../../../models/gridEditRowModel';
+import { isNavigationKey } from '../../../utils/keyboardUtils';
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPanelToggleField';
 /**
- * @requires useGridPage (state)
- * @requires useGridPageSize (state)
- * @requires useGridFilter (state)
- * @requires useGridColumns (state, method)
- * @requires useGridRows (state, method)
  * @requires useGridSorting (method) - can be after
+ * @requires useGridFilter (state) - can be after
+ * @requires useGridColumns (state, method) - can be after
  * @requires useGridDimensions (method) - can be after
  * @requires useGridFocus (method) - can be after
  * @requires useGridScroll (method) - can be after
+ * @requires useGridColumnSpanning (method) - can be after
  */
 
 export const useGridKeyboardNavigation = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridKeyboardNavigation');
   const currentPage = useGridVisibleRows(apiRef, props);
-  const goToCell = React.useCallback((colIndex, rowIndex) => {
+  /**
+   * @param {number} colIndex Index of the column to focus
+   * @param {number} rowIndex index of the row to focus
+   * @param {string} closestColumnToUse Which closest column cell to use when the cell is spanned by `colSpan`.
+   */
+
+  const goToCell = React.useCallback((colIndex, rowIndex, closestColumnToUse = 'left') => {
+    var _visibleSortedRows$ro;
+
+    const visibleSortedRows = gridVisibleSortedRowEntriesSelector(apiRef);
+    const rowId = (_visibleSortedRows$ro = visibleSortedRows[rowIndex]) == null ? void 0 : _visibleSortedRows$ro.id;
+    const nextCellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, colIndex);
+
+    if (nextCellColSpanInfo && nextCellColSpanInfo.spannedByColSpan) {
+      if (closestColumnToUse === 'left') {
+        colIndex = nextCellColSpanInfo.leftVisibleCellIndex;
+      } else if (closestColumnToUse === 'right') {
+        colIndex = nextCellColSpanInfo.rightVisibleCellIndex;
+      }
+    }
+
     logger.debug(`Navigating to cell row ${rowIndex}, col ${colIndex}`);
     apiRef.current.scrollToIndexes({
       colIndex,
       rowIndex
     });
     const field = apiRef.current.getVisibleColumns()[colIndex].field;
-    const visibleSortedRows = gridVisibleSortedRowEntriesSelector(apiRef);
-    const node = visibleSortedRows[rowIndex];
-    apiRef.current.setCellFocus(node.id, field);
+    apiRef.current.setCellFocus(rowId, field);
   }, [apiRef, logger]);
   const goToHeader = React.useCallback((colIndex, event) => {
     logger.debug(`Navigating to header col ${colIndex}`);
@@ -84,7 +103,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       case 'ArrowRight':
         {
           if (colIndexBefore < lastColIndex) {
-            goToCell(colIndexBefore + 1, rowIndexBefore);
+            goToCell(colIndexBefore + 1, rowIndexBefore, 'right');
           }
 
           break;
@@ -103,16 +122,36 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
         {
           // "Tab" is only triggered by the row / cell editing feature
           if (event.shiftKey && colIndexBefore > firstColIndex) {
-            goToCell(colIndexBefore - 1, rowIndexBefore);
+            goToCell(colIndexBefore - 1, rowIndexBefore, 'left');
           } else if (!event.shiftKey && colIndexBefore < lastColIndex) {
-            goToCell(colIndexBefore + 1, rowIndexBefore);
+            goToCell(colIndexBefore + 1, rowIndexBefore, 'right');
           }
 
           break;
         }
 
-      case 'PageDown':
       case ' ':
+        {
+          const field = params.field;
+
+          if (field === GRID_DETAIL_PANEL_TOGGLE_FIELD) {
+            break;
+          }
+
+          const colDef = params.colDef;
+
+          if (colDef && colDef.type === 'treeDataGroup') {
+            break;
+          }
+
+          if (!event.shiftKey && rowIndexBefore < lastRowIndexInPage) {
+            goToCell(colIndexBefore, Math.min(rowIndexBefore + viewportPageSize, lastRowIndexInPage));
+          }
+
+          break;
+        }
+
+      case 'PageDown':
         {
           if (rowIndexBefore < lastRowIndexInPage) {
             goToCell(colIndexBefore, Math.min(rowIndexBefore + viewportPageSize, lastRowIndexInPage));
@@ -267,6 +306,20 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       event.preventDefault();
     }
   }, [apiRef, currentPage, goToCell, goToHeader]);
+  const handleCellKeyDown = React.useCallback((params, event) => {
+    // Ignore portal
+    if (!event.currentTarget.contains(event.target)) {
+      return;
+    } // Get the most recent params because the cell mode may have changed by another listener
+
+
+    const cellParams = apiRef.current.getCellParams(params.id, params.field);
+
+    if (cellParams.cellMode !== GridCellModes.Edit && isNavigationKey(event.key)) {
+      apiRef.current.publishEvent(GridEvents.cellNavigationKeyDown, cellParams, event);
+    }
+  }, [apiRef]);
   useGridApiEventHandler(apiRef, GridEvents.cellNavigationKeyDown, handleCellNavigationKeyDown);
   useGridApiEventHandler(apiRef, GridEvents.columnHeaderKeyDown, handleColumnHeaderKeyDown);
+  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
 };

package/hooks/features/pagination/gridPaginationSelector.d.ts

@@ -33,9 +33,7 @@ export declare const gridPaginationRowRangeSelector: import("../../../utils/crea
  */
 export declare const gridPaginatedVisibleSortedGridRowEntriesSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, {
     id: import("../../..").GridRowId;
-    model: {
-        [key: string]: any;
-    };
+    model: any;
 }[]>;
 /**
  * Get the id of each row to include in the current page if the pagination is enabled.

package/hooks/features/pagination/useGridPage.js

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { useGridLogger, useGridSelector, useGridApiMethod, useGridApiEventHandler } from '../../utils';
 import { GridEvents } from '../../../models/events';
 import { gridVisibleTopLevelRowCountSelector } from '../filter';
-import { gridPageSelector } from './gridPaginationSelector';
-import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+import { gridPageSelector, gridPageSizeSelector } from './gridPaginationSelector';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { buildWarning } from '../../../utils/warning';
 export const getPageCount = (rowCount, pageSize) => {
   if (pageSize > 0 && rowCount > 0) {
@@ -91,8 +91,8 @@ export const useGridPage = (apiRef, props) => {
     apiRef.current.setState(mergeStateWithPage(page));
     return params;
   }, [apiRef]);
-  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
   /**
    * EVENTS
    */
@@ -110,7 +110,12 @@ export const useGridPage = (apiRef, props) => {
     apiRef.current.forceUpdate();
   };
 
+  const handlePageChange = () => apiRef.current.scrollToIndexes({
+    rowIndex: gridPageSelector(apiRef) * gridPageSizeSelector(apiRef)
+  });
+
   useGridApiEventHandler(apiRef, GridEvents.pageSizeChange, handlePageSizeChange);
+  useGridApiEventHandler(apiRef, GridEvents.pageChange, handlePageChange);
   /**
    * EFFECTS
    */

package/hooks/features/pagination/useGridPageSize.js

@@ -4,7 +4,7 @@ import { GridEvents } from '../../../models/events';
 import { useGridLogger, useGridApiMethod, useGridApiEventHandler, useGridSelector } from '../../utils';
 import { gridPageSizeSelector } from './gridPaginationSelector';
 import { gridDensityRowHeightSelector } from '../density';
-import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 export const defaultPageSize = autoPageSize => autoPageSize ? 0 : 100;
 
 const mergeStateWithPageSize = pageSize => state => _extends({}, state, {
@@ -84,8 +84,8 @@ export const useGridPageSize = (apiRef, props) => {
 
     return params;
   }, [apiRef]);
-  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
   /**
    * EVENTS
    */