@mui/x-data-grid 5.7.0 → 5.10.0

package/modern/hooks/features/columns/useGridColumnSpanning.js

@@ -0,0 +1,107 @@
+import React from 'react';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
+import { GridEvents } from '../../../models/events/gridEvents';
+
+/**
+ * @requires useGridColumns (method, event)
+ * @requires useGridParamsApi (method)
+ */
+export const useGridColumnSpanning = apiRef => {
+  const lookup = React.useRef({});
+  const setCellColSpanInfo = React.useCallback((rowId, columnIndex, cellColSpanInfo) => {
+    const sizes = lookup.current;
+
+    if (!sizes[rowId]) {
+      sizes[rowId] = {};
+    }
+
+    sizes[rowId][columnIndex] = cellColSpanInfo;
+  }, []);
+  const getCellColSpanInfo = React.useCallback((rowId, columnIndex) => {
+    return lookup.current[rowId]?.[columnIndex];
+  }, []); // Calculate `colSpan` for the cell.
+
+  const calculateCellColSpan = React.useCallback(params => {
+    const {
+      columnIndex,
+      rowId,
+      minFirstColumnIndex,
+      maxLastColumnIndex
+    } = params;
+    const visibleColumns = apiRef.current.getVisibleColumns();
+    const columnsLength = visibleColumns.length;
+    const column = visibleColumns[columnIndex];
+    const colSpan = typeof column.colSpan === 'function' ? column.colSpan(apiRef.current.getCellParams(rowId, column.field)) : column.colSpan;
+
+    if (!colSpan || colSpan === 1) {
+      setCellColSpanInfo(rowId, columnIndex, {
+        spannedByColSpan: false,
+        cellProps: {
+          colSpan: 1,
+          width: column.computedWidth
+        }
+      });
+      return {
+        colSpan: 1
+      };
+    }
+
+    let width = column.computedWidth;
+
+    for (let j = 1; j < colSpan; j += 1) {
+      const nextColumnIndex = columnIndex + j; // Cells should be spanned only within their column section (left-pinned, right-pinned and unpinned).
+
+      if (nextColumnIndex >= minFirstColumnIndex && nextColumnIndex < maxLastColumnIndex) {
+        const nextColumn = visibleColumns[nextColumnIndex];
+        width += nextColumn.computedWidth;
+        setCellColSpanInfo(rowId, columnIndex + j, {
+          spannedByColSpan: true,
+          rightVisibleCellIndex: Math.min(columnIndex + colSpan, columnsLength - 1),
+          leftVisibleCellIndex: columnIndex
+        });
+      }
+
+      setCellColSpanInfo(rowId, columnIndex, {
+        spannedByColSpan: false,
+        cellProps: {
+          colSpan,
+          width
+        }
+      });
+    }
+
+    return {
+      colSpan
+    };
+  }, [apiRef, setCellColSpanInfo]); // Calculate `colSpan` for each cell in the row
+
+  const calculateColSpan = React.useCallback(({
+    rowId,
+    minFirstColumn,
+    maxLastColumn
+  }) => {
+    for (let i = minFirstColumn; i < maxLastColumn; i += 1) {
+      const cellProps = calculateCellColSpan({
+        columnIndex: i,
+        rowId,
+        minFirstColumnIndex: minFirstColumn,
+        maxLastColumnIndex: maxLastColumn
+      });
+
+      if (cellProps.colSpan > 1) {
+        i += cellProps.colSpan - 1;
+      }
+    }
+  }, [calculateCellColSpan]);
+  const columnSpanningApi = {
+    unstable_getCellColSpanInfo: getCellColSpanInfo,
+    unstable_calculateColSpan: calculateColSpan
+  };
+  useGridApiMethod(apiRef, columnSpanningApi, 'GridColumnSpanningAPI');
+  const handleColumnReorderChange = React.useCallback(() => {
+    // `colSpan` needs to be recalculated after column reordering
+    lookup.current = {};
+  }, []);
+  useGridApiEventHandler(apiRef, GridEvents.columnOrderChange, handleColumnReorderChange);
+};

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

@@ -5,7 +5,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";
@@ -14,7 +14,7 @@ export const columnsStateInitializer = (state, props, apiRef) => {
   const columnsTypes = computeColumnTypes(props.columnTypes);
   const columnsState = createColumnsState({
     apiRef,
-    columnsTypes,
+    columnTypes: columnsTypes,
     columnsToUpsert: props.columns,
     initialState: props.initialState?.columns,
     shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel,
@@ -33,13 +33,15 @@ export const columnsStateInitializer = (state, props, apiRef) => {
 
 export function useGridColumns(apiRef, props) {
   const logger = useGridLogger(apiRef, 'useGridColumns');
-  const columnsTypes = React.useMemo(() => computeColumnTypes(props.columnTypes), [props.columnTypes]);
+  const columnTypes = React.useMemo(() => computeColumnTypes(props.columnTypes), [props.columnTypes]);
+  const previousColumnsProp = React.useRef(props.columns);
+  const 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`
    */
 
-  const isUsingColumnVisibilityModel = React.useRef(!!props.columnVisibilityModel || !!props.initialState?.columns?.columnVisibilityModel).current;
+  const isUsingColumnVisibilityModel = React.useRef(!!props.columnVisibilityModel || !!props.initialState?.columns?.columnVisibilityModel);
   apiRef.current.unstable_updateControlState({
     stateId: 'visibleColumns',
     propModel: props.columnVisibilityModel,
@@ -76,7 +78,7 @@ export function useGridColumns(apiRef, props) {
       apiRef.current.setState(state => _extends({}, state, {
         columns: createColumnsState({
           apiRef,
-          columnsTypes,
+          columnTypes,
           columnsToUpsert: [],
           initialState: undefined,
           shouldRegenColumnVisibilityModelFromColumns: false,
@@ -86,24 +88,24 @@ export function useGridColumns(apiRef, props) {
       }));
       apiRef.current.forceUpdate();
     }
-  }, [apiRef, columnsTypes]);
+  }, [apiRef, columnTypes]);
   const updateColumns = React.useCallback(columns => {
     const columnsState = createColumnsState({
       apiRef,
-      columnsTypes,
+      columnTypes,
       columnsToUpsert: columns,
       initialState: undefined,
       shouldRegenColumnVisibilityModelFromColumns: true,
       keepOnlyColumnsToUpsert: false
     });
     setGridColumnsState(columnsState);
-  }, [apiRef, setGridColumnsState, columnsTypes]);
+  }, [apiRef, setGridColumnsState, columnTypes]);
   const updateColumn = React.useCallback(column => apiRef.current.updateColumns([column]), [apiRef]);
   const setColumnVisibility = React.useCallback((field, isVisible) => {
     // 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) {
       const columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef);
       const isCurrentlyVisible = columnVisibilityModel[field] ?? true;
 
@@ -129,7 +131,7 @@ export function useGridColumns(apiRef, props) {
       };
       apiRef.current.publishEvent(GridEvents.columnVisibilityChange, params);
     }
-  }, [apiRef, isUsingColumnVisibilityModel]);
+  }, [apiRef]);
   const setColumnIndex = React.useCallback((field, targetIndexPosition) => {
     const allColumns = gridColumnFieldsSelector(apiRef);
     const oldIndexPosition = allColumns.findIndex(col => col === field);
@@ -190,7 +192,7 @@ export function useGridColumns(apiRef, props) {
   const stateExportPreProcessing = React.useCallback(prevState => {
     const columnsStateToExport = {};
 
-    if (isUsingColumnVisibilityModel) {
+    if (isUsingColumnVisibilityModel.current) {
       const columnVisibilityModelToExport = gridColumnVisibilityModelSelector(apiRef);
       const hasHiddenColumns = Object.values(columnVisibilityModelToExport).some(value => value === false);
 
@@ -206,7 +208,13 @@ export function useGridColumns(apiRef, props) {
       if (colDef.hasBeenResized) {
         const colDefDimensions = {};
         COLUMNS_DIMENSION_PROPERTIES.forEach(propertyName => {
-          colDefDimensions[propertyName] = colDef[propertyName];
+          let propertyValue = colDef[propertyName];
+
+          if (propertyValue === Infinity) {
+            propertyValue = -1;
+          }
+
+          colDefDimensions[propertyName] = propertyValue;
         });
         dimensions[colDef.field] = colDefDimensions;
       }
@@ -219,9 +227,9 @@ export function useGridColumns(apiRef, props) {
     return _extends({}, prevState, {
       columns: columnsStateToExport
     });
-  }, [apiRef, isUsingColumnVisibilityModel]);
+  }, [apiRef]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
-    const columnVisibilityModelToImport = isUsingColumnVisibilityModel ? context.stateToRestore.columns?.columnVisibilityModel : undefined;
+    const columnVisibilityModelToImport = isUsingColumnVisibilityModel.current ? context.stateToRestore.columns?.columnVisibilityModel : undefined;
     const initialState = context.stateToRestore.columns;
 
     if (columnVisibilityModelToImport == null && initialState == null) {
@@ -230,10 +238,10 @@ export function useGridColumns(apiRef, props) {
 
     const columnsState = createColumnsState({
       apiRef,
-      columnsTypes,
+      columnTypes,
       columnsToUpsert: [],
       initialState,
-      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel,
+      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel.current,
       currentColumnVisibilityModel: columnVisibilityModelToImport,
       keepOnlyColumnsToUpsert: false
     });
@@ -244,7 +252,7 @@ export function useGridColumns(apiRef, props) {
     }
 
     return params;
-  }, [apiRef, isUsingColumnVisibilityModel, columnsTypes]);
+  }, [apiRef, columnTypes]);
   const preferencePanelPreProcessing = React.useCallback((initialValue, value) => {
     if (value === GridPreferencePanelsValue.columns) {
       const ColumnsPanel = props.components.ColumnsPanel;
@@ -253,29 +261,13 @@ export function useGridColumns(apiRef, props) {
 
     return initialValue;
   }, [props.components.ColumnsPanel, props.componentsProps?.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
    */
 
-  const handlePreProcessorRegister = React.useCallback(name => {
-    if (name !== 'hydrateColumns') {
-      return;
-    }
-
-    logger.info(`Columns pre-processing have changed, regenerating the columns`);
-    const columnsState = createColumnsState({
-      apiRef,
-      columnsTypes,
-      columnsToUpsert: [],
-      initialState: undefined,
-      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel,
-      keepOnlyColumnsToUpsert: false
-    });
-    setGridColumnsState(columnsState);
-  }, [apiRef, logger, setGridColumnsState, columnsTypes, isUsingColumnVisibilityModel]);
   const prevInnerWidth = React.useRef(null);
 
   const handleGridSizeChange = viewportInnerSize => {
@@ -285,9 +277,25 @@ export function useGridColumns(apiRef, props) {
     }
   };
 
-  useGridApiEventHandler(apiRef, GridEvents.preProcessorRegister, handlePreProcessorRegister);
   useGridApiEventHandler(apiRef, GridEvents.viewportInnerSizeChange, handleGridSizeChange);
   useGridApiOptionHandler(apiRef, GridEvents.columnVisibilityChange, props.onColumnVisibilityChange);
+  /**
+   * APPLIERS
+   */
+
+  const hydrateColumns = React.useCallback(() => {
+    logger.info(`Columns pipe processing have changed, regenerating the columns`);
+    const columnsState = createColumnsState({
+      apiRef,
+      columnTypes,
+      columnsToUpsert: [],
+      initialState: undefined,
+      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel.current,
+      keepOnlyColumnsToUpsert: false
+    });
+    setGridColumnsState(columnsState);
+  }, [apiRef, logger, setGridColumnsState, columnTypes]);
+  useGridRegisterPipeApplier(apiRef, 'hydrateColumns', hydrateColumns);
   /**
    * EFFECTS
    */
@@ -302,17 +310,24 @@ export function useGridColumns(apiRef, props) {
     }
 
     logger.info(`GridColumns have changed, new length ${props.columns.length}`);
+
+    if (previousColumnsProp.current === props.columns && previousColumnTypesProp.current === columnTypes) {
+      return;
+    }
+
     const columnsState = createColumnsState({
       apiRef,
-      columnsTypes,
+      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(() => {
     if (props.columnVisibilityModel !== undefined) {
       apiRef.current.setColumnVisibilityModel(props.columnVisibilityModel);

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

@@ -132,7 +132,8 @@ export function useGridDimensions(apiRef, props) {
   const dimensionsApi = {
     resize,
     getRootDimensions,
-    unstable_getViewportPageSize: getViewportPageSize
+    unstable_getViewportPageSize: getViewportPageSize,
+    unstable_updateGridDimensionsRef: updateGridDimensionsRef
   };
   useGridApiMethod(apiRef, dimensionsApi, 'GridDimensionsApi');
   const debounceResize = React.useMemo(() => debounce(resize, 60), [resize]);
@@ -143,12 +144,12 @@ export function useGridDimensions(apiRef, props) {
     const 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;
     }
 
@@ -169,7 +170,7 @@ export function useGridDimensions(apiRef, props) {
     debounceResize();
   }, [props.autoHeight, debounceResize, logger, resize]);
   useEnhancedEffect(() => 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/modern/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/modern/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/modern/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) => {
@@ -331,33 +334,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,
@@ -474,11 +476,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/modern/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);