@mui/x-data-grid 5.7.0 → 5.10.0

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, useGridRegisterPipeApplier } 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;
@@ -235,7 +237,13 @@ export function useGridColumns(apiRef, props) {
       if (colDef.hasBeenResized) {
         var colDefDimensions = {};
         COLUMNS_DIMENSION_PROPERTIES.forEach(function (propertyName) {
-          colDefDimensions[propertyName] = colDef[propertyName];
+          var propertyValue = colDef[propertyName];
+
+          if (propertyValue === Infinity) {
+            propertyValue = -1;
+          }
+
+          colDefDimensions[propertyName] = propertyValue;
         });
         dimensions[colDef.field] = colDefDimensions;
       }
@@ -248,11 +256,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 +269,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 +283,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,29 +294,13 @@ 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) {
-    if (name !== 'hydrateColumns') {
-      return;
-    }
-
-    logger.info("Columns pre-processing have changed, regenerating the columns");
-    var columnsState = createColumnsState({
-      apiRef: apiRef,
-      columnsTypes: columnsTypes,
-      columnsToUpsert: [],
-      initialState: undefined,
-      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel,
-      keepOnlyColumnsToUpsert: false
-    });
-    setGridColumnsState(columnsState);
-  }, [apiRef, logger, setGridColumnsState, columnsTypes, isUsingColumnVisibilityModel]);
   var prevInnerWidth = React.useRef(null);
 
   var handleGridSizeChange = function handleGridSizeChange(viewportInnerSize) {
@@ -318,9 +310,25 @@ export function useGridColumns(apiRef, props) {
     }
   };
 
-  useGridApiEventHandler(apiRef, GridEvents.preProcessorRegister, handlePreProcessorRegister);
   useGridApiEventHandler(apiRef, GridEvents.viewportInnerSizeChange, handleGridSizeChange);
   useGridApiOptionHandler(apiRef, GridEvents.columnVisibilityChange, props.onColumnVisibilityChange);
+  /**
+   * APPLIERS
+   */
+
+  var hydrateColumns = React.useCallback(function () {
+    logger.info("Columns pipe processing have changed, regenerating the columns");
+    var columnsState = createColumnsState({
+      apiRef: apiRef,
+      columnTypes: columnTypes,
+      columnsToUpsert: [],
+      initialState: undefined,
+      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel.current,
+      keepOnlyColumnsToUpsert: false
+    });
+    setGridColumnsState(columnsState);
+  }, [apiRef, logger, setGridColumnsState, columnTypes]);
+  useGridRegisterPipeApplier(apiRef, 'hydrateColumns', hydrateColumns);
   /**
    * EFFECTS
    */
@@ -335,17 +343,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 () {
@@ -149,12 +150,12 @@ export function useGridDimensions(apiRef, props) {
     var isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
     if (size.height === 0 && !warningShown.current && !props.autoHeight && !isJSDOM) {
-      logger.warn(['The parent of the grid has an empty height.', 'You need to make sure the container has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'You can find a solution in the docs:', 'https://mui.com/components/data-grid/layout/'].join('\n'));
+      logger.warn(['The parent of the grid has an empty height.', 'You need to make sure the container has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'You can find a solution in the docs:', 'https://mui.com/x/react-data-grid/layout/'].join('\n'));
       warningShown.current = true;
     }
 
     if (size.width === 0 && !warningShown.current && !isJSDOM) {
-      logger.warn(['The parent of the grid has an empty width.', 'You need to make sure the container has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'You can find a solution in the docs:', 'https://mui.com/components/data-grid/layout/'].join('\n'));
+      logger.warn(['The parent of the grid has an empty width.', 'You need to make sure the container has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'You can find a solution in the docs:', 'https://mui.com/x/react-data-grid/layout/'].join('\n'));
       warningShown.current = true;
     }
 
@@ -177,7 +178,7 @@ export function useGridDimensions(apiRef, props) {
   useEnhancedEffect(function () {
     return updateGridDimensionsRef();
   }, [updateGridDimensionsRef]);
-  useGridApiOptionHandler(apiRef, GridEvents.visibleRowsSet, updateGridDimensionsRef);
+  useGridApiOptionHandler(apiRef, GridEvents.sortedRowsSet, updateGridDimensionsRef);
   useGridApiOptionHandler(apiRef, GridEvents.pageChange, updateGridDimensionsRef);
   useGridApiOptionHandler(apiRef, GridEvents.pageSizeChange, updateGridDimensionsRef);
   useGridApiOptionHandler(apiRef, GridEvents.columnsChange, updateGridDimensionsRef);

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 () {
@@ -214,10 +217,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
     }
 
     var editingState = gridEditRowsStateSelector(apiRef.current.state);
-    var row = apiRef.current.getRow(id);
-    var column = apiRef.current.getColumn(field);
     var _editingState$id$fiel = editingState[id][field],
-        value = _editingState$id$fiel.value,
         error = _editingState$id$fiel.error,
         isProcessingProps = _editingState$id$fiel.isProcessingProps;
 
@@ -225,23 +225,33 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
       return;
     }
 
-    var rowUpdate = column.valueSetter ? column.valueSetter({
-      value: value,
-      row: row
-    }) : _extends({}, row, _defineProperty({}, field, value));
+    var rowUpdate = apiRef.current.unstable_getRowWithUpdatedValuesFromCellEditing(id, field);
 
     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 {
+        var row = apiRef.current.getRow(id);
+        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;
@@ -319,11 +329,22 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
       return _ref.apply(this, arguments);
     };
   }(), [apiRef, throwIfNotEditable, throwIfNotInMode, updateOrDeleteFieldState]);
+  var getRowWithUpdatedValuesFromCellEditing = React.useCallback(function (id, field) {
+    var column = apiRef.current.getColumn(field);
+    var editingState = gridEditRowsStateSelector(apiRef.current.state);
+    var value = editingState[id][field].value;
+    var row = apiRef.current.getRow(id);
+    return column.valueSetter ? column.valueSetter({
+      value: value,
+      row: row
+    }) : _extends({}, row, _defineProperty({}, field, value));
+  }, [apiRef]);
   var editingApi = {
     getCellMode: getCellMode,
     startCellEditMode: startCellEditMode,
     stopCellEditMode: stopCellEditMode,
-    unstable_setCellEditingEditCellValue: setCellEditingEditCellValue
+    unstable_setCellEditingEditCellValue: setCellEditingEditCellValue,
+    unstable_getRowWithUpdatedValuesFromCellEditing: getRowWithUpdatedValuesFromCellEditing
   };
   useGridApiMethod(apiRef, editingApi, 'EditingApi');
 };

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

@@ -5,7 +5,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 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 var editingStateInitializer = function editingStateInitializer(state) {
   return _extends({}, state, {
@@ -119,7 +119,7 @@ export var useGridEditing = function useGridEditing(apiRef, props) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                setEditCellValueToCall = props.editMode === 'row' ? apiRef.current.unstable_setRowEditingEditCellValue : apiRef.current.unstable_setCellEditingEditCellValue; // Check if the cell is in edit mode
+                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)) {
@@ -143,10 +143,14 @@ export var useGridEditing = function useGridEditing(apiRef, props) {
       })));
     });
   }, [apiRef, props.editMode]);
+  var getRowWithUpdatedValues = React.useCallback(function (id, field) {
+    return props.editMode === GridEditModes.Cell ? apiRef.current.unstable_getRowWithUpdatedValuesFromCellEditing(id, field) : apiRef.current.unstable_getRowWithUpdatedValuesFromRowEditing(id);
+  }, [apiRef, props.editMode]);
   var editingSharedApi = {
     isCellEditable: isCellEditable,
     setEditCellValue: setEditCellValue,
-    unstable_runPendingEditCellValueMutation: runPendingEditCellValueMutation
+    unstable_runPendingEditCellValueMutation: runPendingEditCellValueMutation,
+    unstable_getRowWithUpdatedValues: getRowWithUpdatedValues
   };
   useGridApiMethod(apiRef, editingSharedApi, 'EditingApi');
 };

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

@@ -1,6 +1,6 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
@@ -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 () {
@@ -332,37 +335,32 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
       return;
     }
 
-    var rowUpdate = _extends({}, row);
+    var rowUpdate = apiRef.current.unstable_getRowWithUpdatedValuesFromRowEditing(id);
 
-    Object.entries(editingState[id]).forEach(function (_ref) {
-      var _ref2 = _slicedToArray(_ref, 2),
-          field = _ref2[0],
-          fieldProps = _ref2[1];
-
-      var column = apiRef.current.getColumn(field);
+    if (processRowUpdate) {
+      var handleError = function 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(function (finalRowUpdate) {
+          apiRef.current.updateRows([finalRowUpdate]);
+          updateFocusedCellIfNeeded();
+          updateOrDeleteRowState(id, null);
+        }).catch(handleError);
+      } catch (errorThrown) {
+        handleError(errorThrown);
       }
-    });
-
-    if (processRowUpdate) {
-      Promise.resolve(processRowUpdate(rowUpdate, row)).then(function (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]);
   var setRowEditingEditCellValue = React.useCallback(function (params) {
     var id = params.id,
         field = params.field,
@@ -427,10 +425,10 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
         promises.push(promise);
       }
 
-      Object.entries(editingState[id]).forEach(function (_ref3) {
-        var _ref4 = _slicedToArray(_ref3, 2),
-            thisField = _ref4[0],
-            fieldProps = _ref4[1];
+      Object.entries(editingState[id]).forEach(function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+            thisField = _ref2[0],
+            fieldProps = _ref2[1];
 
         if (thisField === field) {
           return;
@@ -483,11 +481,36 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
       });
     });
   }, [apiRef, throwIfNotEditable, updateOrDeleteFieldState]);
+  var getRowWithUpdatedValuesFromRowEditing = React.useCallback(function (id) {
+    var editingState = gridEditRowsStateSelector(apiRef.current.state);
+    var row = apiRef.current.getRow(id);
+
+    var rowUpdate = _extends({}, row);
+
+    Object.entries(editingState[id]).forEach(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+          field = _ref4[0],
+          fieldProps = _ref4[1];
+
+      var column = apiRef.current.getColumn(field);
+
+      if (column.valueSetter) {
+        rowUpdate = column.valueSetter({
+          value: fieldProps.value,
+          row: rowUpdate
+        });
+      } else {
+        rowUpdate[field] = fieldProps.value;
+      }
+    });
+    return rowUpdate;
+  }, [apiRef]);
   var editingApi = {
     getRowMode: getRowMode,
     startRowEditMode: startRowEditMode,
     stopRowEditMode: stopRowEditMode,
-    unstable_setRowEditingEditCellValue: setRowEditingEditCellValue
+    unstable_setRowEditingEditCellValue: setRowEditingEditCellValue,
+    unstable_getRowWithUpdatedValuesFromRowEditing: getRowWithUpdatedValuesFromRowEditing
   };
   useGridApiMethod(apiRef, editingApi, 'EditingApi');
 };

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";
@@ -45,11 +45,7 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
     stateSelector: gridFilterModelSelector,
     changeEvent: GridEvents.filterModelChange
   });
-  /**
-   * API METHODS
-   */
-
-  var applyFilters = React.useCallback(function () {
+  var updateFilteredRows = React.useCallback(function () {
     apiRef.current.setState(function (state) {
       var filterModel = gridFilterModelSelector(state, apiRef.current.instanceId);
       var isRowMatchingFilters = props.filterMode === GridFeatureModeConstant.client ? buildAggregatedFilterApplier(filterModel, apiRef) : null;
@@ -60,9 +56,16 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
         filter: _extends({}, state.filter, filteringResult)
       });
     });
-    apiRef.current.publishEvent(GridEvents.visibleRowsSet);
+    apiRef.current.publishEvent(GridEvents.filteredRowsSet);
+  }, [props.filterMode, apiRef]);
+  /**
+   * API METHODS
+   */
+
+  var applyFilters = React.useCallback(function () {
+    updateFilteredRows();
     apiRef.current.forceUpdate();
-  }, [apiRef, props.filterMode]);
+  }, [apiRef, updateFilteredRows]);
   var upsertFilterItem = React.useCallback(function (item) {
     var filterModel = gridFilterModelSelector(apiRef);
 
@@ -234,9 +237,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
@@ -260,8 +263,10 @@ export var useGridFilter = function 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/legacy/hooks/features/focus/useGridFocus.js

@@ -105,21 +105,31 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
       rowIndexToFocus += 1;
     }
 
+    var 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;
+      }
     }
 
-    var 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);
     var rowToFocus = currentPage.rows[rowIndexToFocus];
     var columnToFocus = visibleColumns[columnIndexToFocus];
     apiRef.current.setCellFocus(rowToFocus.id, columnToFocus.field);