@mui/x-data-grid 5.7.0 → 5.8.0

package/legacy/hooks/features/columns/gridColumnsUtils.js

@@ -1,7 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { DEFAULT_GRID_COL_TYPE_KEY, getGridDefaultColumnTypes } from '../../../models';
+import { DEFAULT_GRID_COL_TYPE_KEY, getGridDefaultColumnTypes } from '../../../colDef';
 import { gridColumnsSelector, gridColumnVisibilityModelSelector } from './gridColumnsSelector';
 import { clamp } from '../../../utils/utils';
 export var COLUMNS_DIMENSION_PROPERTIES = ['maxWidth', 'minWidth', 'width', 'flex'];
@@ -253,7 +254,7 @@ export var createColumnsState = function createColumnsState(_ref5) {
   var apiRef = _ref5.apiRef,
       columnsToUpsert = _ref5.columnsToUpsert,
       initialState = _ref5.initialState,
-      columnsTypes = _ref5.columnsTypes,
+      columnTypes = _ref5.columnTypes,
       _ref5$currentColumnVi = _ref5.currentColumnVisibilityModel,
       currentColumnVisibilityModel = _ref5$currentColumnVi === void 0 ? gridColumnVisibilityModelSelector(apiRef) : _ref5$currentColumnVi,
       shouldRegenColumnVisibilityModelFromColumns = _ref5.shouldRegenColumnVisibilityModelFromColumns,
@@ -262,7 +263,7 @@ export var createColumnsState = function createColumnsState(_ref5) {
   var isInsideStateInitializer = !apiRef.current.state.columns;
   var columnsStateWithoutColumnVisibilityModel;
 
-  if (isInsideStateInitializer || keepOnlyColumnsToUpsert) {
+  if (isInsideStateInitializer) {
     columnsStateWithoutColumnVisibilityModel = {
       all: [],
       lookup: {}
@@ -270,35 +271,65 @@ export var createColumnsState = function createColumnsState(_ref5) {
   } else {
     var currentState = gridColumnsSelector(apiRef.current.state);
     columnsStateWithoutColumnVisibilityModel = {
-      all: _toConsumableArray(currentState.all),
-      lookup: _extends({}, currentState.lookup)
+      all: keepOnlyColumnsToUpsert ? [] : _toConsumableArray(currentState.all),
+      lookup: _extends({}, currentState.lookup) // Will be cleaned later if keepOnlyColumnsToUpsert=true
+
     };
   }
 
+  var columnsToKeep = {};
+
+  if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
+    columnsToKeep = Object.keys(columnsStateWithoutColumnVisibilityModel.lookup).reduce(function (acc, key) {
+      return _extends({}, acc, _defineProperty({}, key, false));
+    }, {});
+  }
+
   var columnsToUpsertLookup = {};
   columnsToUpsert.forEach(function (newColumn) {
-    columnsToUpsertLookup[newColumn.field] = true;
+    var field = newColumn.field;
+    columnsToUpsertLookup[field] = true;
+    columnsToKeep[field] = true;
+    var existingState = columnsStateWithoutColumnVisibilityModel.lookup[field];
 
-    if (columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] == null) {
+    if (existingState == null) {
       // New Column
-      columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] = _extends({}, getGridColDef(columnsTypes, newColumn.type), newColumn);
-      columnsStateWithoutColumnVisibilityModel.all.push(newColumn.field);
-    } else {
-      var mergedColumn = _extends({}, columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field], newColumn);
+      existingState = _extends({}, getGridColDef(columnTypes, newColumn.type), {
+        // TODO v6: Inline `getGridColDef`
+        field: field,
+        hasBeenResized: false
+      });
+      columnsStateWithoutColumnVisibilityModel.all.push(field);
+    } else if (keepOnlyColumnsToUpsert) {
+      columnsStateWithoutColumnVisibilityModel.all.push(field);
+    }
 
-      if (!mergedColumn.hasBeenResized && COLUMNS_DIMENSION_PROPERTIES.some(function (propertyName) {
-        return newColumn[propertyName] !== undefined;
-      })) {
-        mergedColumn.hasBeenResized = true;
-      }
+    var hasValidDimension = false;
 
-      columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] = mergedColumn;
+    if (!existingState.hasBeenResized) {
+      hasValidDimension = COLUMNS_DIMENSION_PROPERTIES.some(function (key) {
+        return newColumn[key] !== undefined;
+      });
     }
+
+    columnsStateWithoutColumnVisibilityModel.lookup[field] = _extends({}, existingState, {
+      hide: newColumn.hide == null ? false : newColumn.hide
+    }, newColumn, {
+      hasBeenResized: existingState.hasBeenResized || hasValidDimension
+    });
   });
 
+  if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
+    Object.keys(columnsStateWithoutColumnVisibilityModel.lookup).forEach(function (field) {
+      if (!columnsToKeep[field]) {
+        delete columnsStateWithoutColumnVisibilityModel.lookup[field];
+      }
+    });
+  }
+
   var columnsLookupBeforePreProcessing = _extends({}, columnsStateWithoutColumnVisibilityModel.lookup);
 
-  var columnsStateWithPreProcessing = apiRef.current.unstable_applyPreProcessors('hydrateColumns', columnsStateWithoutColumnVisibilityModel); // TODO v6: remove the sync between the columns `hide` option and the model.
+  var columnsStateWithPreProcessing = apiRef.current.unstable_applyPipeProcessors('hydrateColumns', columnsStateWithoutColumnVisibilityModel); // TODO v6: remove the sync between the columns `hide` option and the model.
 
   var columnVisibilityModel = {};
 

package/legacy/hooks/features/columns/useGridColumns.js

@@ -7,7 +7,7 @@ import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridColumnFieldsSelector, gridColumnDefinitionsSelector, gridColumnLookupSelector, gridColumnsMetaSelector, gridColumnsSelector, gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector } from './gridColumnsSelector';
 import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
-import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { hydrateColumnsWidth, computeColumnTypes, createColumnsState, mergeColumnsState, COLUMNS_DIMENSION_PROPERTIES } from './gridColumnsUtils';
 import { GridPreferencePanelsValue } from '../preferencesPanel';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -18,7 +18,7 @@ export var columnsStateInitializer = function columnsStateInitializer(state, pro
   var columnsTypes = computeColumnTypes(props.columnTypes);
   var columnsState = createColumnsState({
     apiRef: apiRef,
-    columnsTypes: columnsTypes,
+    columnTypes: columnsTypes,
     columnsToUpsert: props.columns,
     initialState: (_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.columns,
     shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel,
@@ -39,15 +39,17 @@ export function useGridColumns(apiRef, props) {
   var _props$initialState4, _props$initialState4$, _props$componentsProp2;
 
   var logger = useGridLogger(apiRef, 'useGridColumns');
-  var columnsTypes = React.useMemo(function () {
+  var columnTypes = React.useMemo(function () {
     return computeColumnTypes(props.columnTypes);
   }, [props.columnTypes]);
+  var previousColumnsProp = React.useRef(props.columns);
+  var previousColumnTypesProp = React.useRef(columnTypes);
   /**
    * If `initialState.columns.columnVisibilityModel` or `columnVisibilityModel` was defined during the 1st render, we are directly updating the model
    * If not, we keep the old behavior and update the `GridColDef.hide` option (which will update the state model through the `GridColDef.hide` => `columnVisibilityModel` sync in `createColumnsState`
    */
 
-  var isUsingColumnVisibilityModel = React.useRef(!!props.columnVisibilityModel || !!((_props$initialState4 = props.initialState) != null && (_props$initialState4$ = _props$initialState4.columns) != null && _props$initialState4$.columnVisibilityModel)).current;
+  var isUsingColumnVisibilityModel = React.useRef(!!props.columnVisibilityModel || !!((_props$initialState4 = props.initialState) != null && (_props$initialState4$ = _props$initialState4.columns) != null && _props$initialState4$.columnVisibilityModel));
   apiRef.current.unstable_updateControlState({
     stateId: 'visibleColumns',
     propModel: props.columnVisibilityModel,
@@ -96,7 +98,7 @@ export function useGridColumns(apiRef, props) {
         return _extends({}, state, {
           columns: createColumnsState({
             apiRef: apiRef,
-            columnsTypes: columnsTypes,
+            columnTypes: columnTypes,
             columnsToUpsert: [],
             initialState: undefined,
             shouldRegenColumnVisibilityModelFromColumns: false,
@@ -107,18 +109,18 @@ export function useGridColumns(apiRef, props) {
       });
       apiRef.current.forceUpdate();
     }
-  }, [apiRef, columnsTypes]);
+  }, [apiRef, columnTypes]);
   var updateColumns = React.useCallback(function (columns) {
     var columnsState = createColumnsState({
       apiRef: apiRef,
-      columnsTypes: columnsTypes,
+      columnTypes: columnTypes,
       columnsToUpsert: columns,
       initialState: undefined,
       shouldRegenColumnVisibilityModelFromColumns: true,
       keepOnlyColumnsToUpsert: false
     });
     setGridColumnsState(columnsState);
-  }, [apiRef, setGridColumnsState, columnsTypes]);
+  }, [apiRef, setGridColumnsState, columnTypes]);
   var updateColumn = React.useCallback(function (column) {
     return apiRef.current.updateColumns([column]);
   }, [apiRef]);
@@ -126,7 +128,7 @@ export function useGridColumns(apiRef, props) {
     // We keep updating the `hide` option of `GridColDef` when not controlling the model to avoid any breaking change.
     // `updateColumns` take care of updating the model itself if needs be.
     // TODO v6: stop using the `hide` field even when the model is not defined
-    if (isUsingColumnVisibilityModel) {
+    if (isUsingColumnVisibilityModel.current) {
       var _columnVisibilityMode;
 
       var columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef);
@@ -152,7 +154,7 @@ export function useGridColumns(apiRef, props) {
       };
       apiRef.current.publishEvent(GridEvents.columnVisibilityChange, params);
     }
-  }, [apiRef, isUsingColumnVisibilityModel]);
+  }, [apiRef]);
   var setColumnIndex = React.useCallback(function (field, targetIndexPosition) {
     var allColumns = gridColumnFieldsSelector(apiRef);
     var oldIndexPosition = allColumns.findIndex(function (col) {
@@ -217,7 +219,7 @@ export function useGridColumns(apiRef, props) {
   var stateExportPreProcessing = React.useCallback(function (prevState) {
     var columnsStateToExport = {};
 
-    if (isUsingColumnVisibilityModel) {
+    if (isUsingColumnVisibilityModel.current) {
       var columnVisibilityModelToExport = gridColumnVisibilityModelSelector(apiRef);
       var hasHiddenColumns = Object.values(columnVisibilityModelToExport).some(function (value) {
         return value === false;
@@ -248,11 +250,11 @@ export function useGridColumns(apiRef, props) {
     return _extends({}, prevState, {
       columns: columnsStateToExport
     });
-  }, [apiRef, isUsingColumnVisibilityModel]);
+  }, [apiRef]);
   var stateRestorePreProcessing = React.useCallback(function (params, context) {
     var _context$stateToResto;
 
-    var columnVisibilityModelToImport = isUsingColumnVisibilityModel ? (_context$stateToResto = context.stateToRestore.columns) == null ? void 0 : _context$stateToResto.columnVisibilityModel : undefined;
+    var columnVisibilityModelToImport = isUsingColumnVisibilityModel.current ? (_context$stateToResto = context.stateToRestore.columns) == null ? void 0 : _context$stateToResto.columnVisibilityModel : undefined;
     var initialState = context.stateToRestore.columns;
 
     if (columnVisibilityModelToImport == null && initialState == null) {
@@ -261,10 +263,10 @@ export function useGridColumns(apiRef, props) {
 
     var columnsState = createColumnsState({
       apiRef: apiRef,
-      columnsTypes: columnsTypes,
+      columnTypes: columnTypes,
       columnsToUpsert: [],
       initialState: initialState,
-      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel,
+      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel.current,
       currentColumnVisibilityModel: columnVisibilityModelToImport,
       keepOnlyColumnsToUpsert: false
     });
@@ -275,7 +277,7 @@ export function useGridColumns(apiRef, props) {
     }
 
     return params;
-  }, [apiRef, isUsingColumnVisibilityModel, columnsTypes]);
+  }, [apiRef, columnTypes]);
   var preferencePanelPreProcessing = React.useCallback(function (initialValue, value) {
     if (value === GridPreferencePanelsValue.columns) {
       var _props$componentsProp;
@@ -286,14 +288,14 @@ export function useGridColumns(apiRef, props) {
 
     return initialValue;
   }, [props.components.ColumnsPanel, (_props$componentsProp2 = props.componentsProps) == null ? void 0 : _props$componentsProp2.columnsPanel]);
-  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'preferencePanel', preferencePanelPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'preferencePanel', preferencePanelPreProcessing);
   /**
    * EVENTS
    */
 
-  var handlePreProcessorRegister = React.useCallback(function (name) {
+  var handlepipeProcessorRegister = React.useCallback(function (name) {
     if (name !== 'hydrateColumns') {
       return;
     }
@@ -301,14 +303,14 @@ export function useGridColumns(apiRef, props) {
     logger.info("Columns pre-processing have changed, regenerating the columns");
     var columnsState = createColumnsState({
       apiRef: apiRef,
-      columnsTypes: columnsTypes,
+      columnTypes: columnTypes,
       columnsToUpsert: [],
       initialState: undefined,
-      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel,
+      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel.current,
       keepOnlyColumnsToUpsert: false
     });
     setGridColumnsState(columnsState);
-  }, [apiRef, logger, setGridColumnsState, columnsTypes, isUsingColumnVisibilityModel]);
+  }, [apiRef, logger, setGridColumnsState, columnTypes]);
   var prevInnerWidth = React.useRef(null);
 
   var handleGridSizeChange = function handleGridSizeChange(viewportInnerSize) {
@@ -318,7 +320,7 @@ export function useGridColumns(apiRef, props) {
     }
   };
 
-  useGridApiEventHandler(apiRef, GridEvents.preProcessorRegister, handlePreProcessorRegister);
+  useGridApiEventHandler(apiRef, GridEvents.pipeProcessorRegister, handlepipeProcessorRegister);
   useGridApiEventHandler(apiRef, GridEvents.viewportInnerSizeChange, handleGridSizeChange);
   useGridApiOptionHandler(apiRef, GridEvents.columnVisibilityChange, props.onColumnVisibilityChange);
   /**
@@ -335,17 +337,24 @@ export function useGridColumns(apiRef, props) {
     }
 
     logger.info("GridColumns have changed, new length ".concat(props.columns.length));
+
+    if (previousColumnsProp.current === props.columns && previousColumnTypesProp.current === columnTypes) {
+      return;
+    }
+
     var columnsState = createColumnsState({
       apiRef: apiRef,
-      columnsTypes: columnsTypes,
+      columnTypes: columnTypes,
       initialState: undefined,
       // If the user provides a model, we don't want to set it in the state here because it has it's dedicated `useEffect` which calls `setColumnVisibilityModel`
-      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel,
+      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel.current,
       columnsToUpsert: props.columns,
       keepOnlyColumnsToUpsert: true
     });
+    previousColumnsProp.current = props.columns;
+    previousColumnTypesProp.current = columnTypes;
     setGridColumnsState(columnsState);
-  }, [logger, apiRef, setGridColumnsState, props.columns, columnsTypes, isUsingColumnVisibilityModel]);
+  }, [logger, apiRef, setGridColumnsState, props.columns, columnTypes]);
   React.useEffect(function () {
     if (props.columnVisibilityModel !== undefined) {
       apiRef.current.setColumnVisibilityModel(props.columnVisibilityModel);

package/legacy/hooks/features/dimensions/useGridDimensions.js

@@ -136,7 +136,8 @@ export function useGridDimensions(apiRef, props) {
   var dimensionsApi = {
     resize: resize,
     getRootDimensions: getRootDimensions,
-    unstable_getViewportPageSize: getViewportPageSize
+    unstable_getViewportPageSize: getViewportPageSize,
+    unstable_updateGridDimensionsRef: updateGridDimensionsRef
   };
   useGridApiMethod(apiRef, dimensionsApi, 'GridDimensionsApi');
   var debounceResize = React.useMemo(function () {

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

@@ -9,9 +9,12 @@ 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';
+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');
 export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
-  var processRowUpdate = props.processRowUpdate;
+  var processRowUpdate = props.processRowUpdate,
+      onProcessRowUpdateError = props.onProcessRowUpdateError;
 
   var runIfEditModeIsCell = function runIfEditModeIsCell(callback) {
     return function () {
@@ -231,17 +234,29 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
     }) : _extends({}, row, _defineProperty({}, field, value));
 
     if (processRowUpdate) {
-      Promise.resolve(processRowUpdate(rowUpdate, row)).then(function (finalRowUpdate) {
-        apiRef.current.updateRows([finalRowUpdate]);
-        updateFocusedCellIfNeeded();
-        updateOrDeleteFieldState(id, field, null);
-      });
+      var handleError = function handleError(errorThrown) {
+        if (onProcessRowUpdateError) {
+          onProcessRowUpdateError(errorThrown);
+        } else {
+          missingOnProcessRowUpdateErrorWarning();
+        }
+      };
+
+      try {
+        Promise.resolve(processRowUpdate(rowUpdate, row)).then(function (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]);
   var setCellEditingEditCellValue = React.useCallback( /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(params) {
       var id, field, value, column, row, parsedValue, editingState, newProps, hasChanged;

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

@@ -11,11 +11,14 @@ 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';
+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');
 export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
   var focusTimeout = React.useRef(null);
   var nextFocusedCell = React.useRef(null);
-  var processRowUpdate = props.processRowUpdate;
+  var processRowUpdate = props.processRowUpdate,
+      onProcessRowUpdateError = props.onProcessRowUpdateError;
 
   var runIfEditModeIsRow = function runIfEditModeIsRow(callback) {
     return function () {
@@ -352,17 +355,29 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     });
 
     if (processRowUpdate) {
-      Promise.resolve(processRowUpdate(rowUpdate, row)).then(function (finalRowUpdate) {
-        apiRef.current.updateRows([finalRowUpdate]);
-        updateFocusedCellIfNeeded();
-        updateOrDeleteRowState(id, null);
-      });
+      var handleError = function handleError(errorThrown) {
+        if (onProcessRowUpdateError) {
+          onProcessRowUpdateError(errorThrown);
+        } else {
+          missingOnProcessRowUpdateErrorWarning();
+        }
+      };
+
+      try {
+        Promise.resolve(processRowUpdate(rowUpdate, row)).then(function (finalRowUpdate) {
+          apiRef.current.updateRows([finalRowUpdate]);
+          updateFocusedCellIfNeeded();
+          updateOrDeleteRowState(id, null);
+        }).catch(handleError);
+      } catch (errorThrown) {
+        handleError(errorThrown);
+      }
     } else {
       apiRef.current.updateRows([rowUpdate]);
       updateFocusedCellIfNeeded();
       updateOrDeleteRowState(id, null);
     }
-  }, [apiRef, processRowUpdate, throwIfNotInMode, updateOrDeleteRowState]);
+  }, [apiRef, onProcessRowUpdateError, processRowUpdate, throwIfNotInMode, updateOrDeleteRowState]);
   var setRowEditingEditCellValue = React.useCallback(function (params) {
     var id = params.id,
         field = params.field,

package/legacy/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/legacy/hooks/features/filter/useGridFilter.js

@@ -12,7 +12,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";
@@ -234,9 +234,9 @@ export var useGridFilter = function 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

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

@@ -7,13 +7,12 @@ 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';
 /**
- * @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
@@ -113,8 +112,16 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
           break;
         }
 
-      case 'PageDown':
       case ' ':
+        {
+          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));
@@ -269,6 +276,20 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
       event.preventDefault();
     }
   }, [apiRef, currentPage, goToCell, goToHeader]);
+  var handleCellKeyDown = React.useCallback(function (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
+
+
+    var 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/legacy/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 var getPageCount = function getPageCount(rowCount, pageSize) {
   if (pageSize > 0 && rowCount > 0) {
@@ -95,8 +95,8 @@ export var useGridPage = function 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
    */
@@ -114,7 +114,14 @@ export var useGridPage = function useGridPage(apiRef, props) {
     apiRef.current.forceUpdate();
   };
 
+  var handlePageChange = function handlePageChange() {
+    return apiRef.current.scrollToIndexes({
+      rowIndex: gridPageSelector(apiRef) * gridPageSizeSelector(apiRef)
+    });
+  };
+
   useGridApiEventHandler(apiRef, GridEvents.pageSizeChange, handlePageSizeChange);
+  useGridApiEventHandler(apiRef, GridEvents.pageChange, handlePageChange);
   /**
    * EFFECTS
    */

package/legacy/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 var defaultPageSize = function defaultPageSize(autoPageSize) {
   return autoPageSize ? 0 : 100;
 };
@@ -90,8 +90,8 @@ export var useGridPageSize = function useGridPageSize(apiRef, props) {
 
     return params;
   }, [apiRef]);
-  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
   /**
    * EVENTS
    */

package/legacy/hooks/features/preferencesPanel/useGridPreferencesPanel.js

@@ -1,9 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { GridEvents } from '../../../models/events';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
-import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { gridPreferencePanelStateSelector } from './gridPreferencePanelSelector';
+import { useGridSelector } from '../../utils/useGridSelector';
 export var preferencePanelStateInitializer = function preferencePanelStateInitializer(state, props) {
   var _props$initialState$p, _props$initialState;
 
@@ -19,6 +21,7 @@ export var preferencePanelStateInitializer = function preferencePanelStateInitia
 
 export var useGridPreferencesPanel = function useGridPreferencesPanel(apiRef) {
   var logger = useGridLogger(apiRef, 'useGridPreferencesPanel');
+  var preferencePanelState = useGridSelector(apiRef, gridPreferencePanelStateSelector);
   var hideTimeout = React.useRef();
   var immediateTimeout = React.useRef();
   /**
@@ -27,6 +30,13 @@ export var useGridPreferencesPanel = function useGridPreferencesPanel(apiRef) {
 
   var hidePreferences = React.useCallback(function () {
     logger.debug('Hiding Preferences Panel');
+
+    if (preferencePanelState.openedPanelValue) {
+      apiRef.current.publishEvent(GridEvents.preferencePanelClose, {
+        openedPanelValue: preferencePanelState.openedPanelValue
+      });
+    }
+
     apiRef.current.setState(function (state) {
       return _extends({}, state, {
         preferencePanel: {
@@ -35,7 +45,7 @@ export var useGridPreferencesPanel = function useGridPreferencesPanel(apiRef) {
       });
     });
     apiRef.current.forceUpdate();
-  }, [apiRef, logger]); // This is to prevent the preferences from closing when you open a select box or another panel,
+  }, [apiRef, logger, preferencePanelState.openedPanelValue]); // This is to prevent the preferences from closing when you open a select box or another panel,
   // The issue is in MUI core V4 => Fixed in V5
 
   var doNotHidePanel = React.useCallback(function () {
@@ -59,8 +69,11 @@ export var useGridPreferencesPanel = function useGridPreferencesPanel(apiRef) {
         })
       });
     });
+    apiRef.current.publishEvent(GridEvents.preferencePanelOpen, {
+      openedPanelValue: newValue
+    });
     apiRef.current.forceUpdate();
-  }, [doNotHidePanel, apiRef, logger]);
+  }, [logger, doNotHidePanel, apiRef]);
   useGridApiMethod(apiRef, {
     showPreferences: showPreferences,
     hidePreferences: hidePreferencesDelayed
@@ -93,8 +106,8 @@ export var useGridPreferencesPanel = function useGridPreferencesPanel(apiRef) {
 
     return params;
   }, [apiRef]);
-  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
   /**
    * EFFECTS
    */