@mui/x-data-grid 5.7.0 → 5.8.0

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

@@ -11,7 +11,7 @@ exports.mergeColumnsState = exports.hydrateColumnsWidth = exports.getGridColDef
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _models = require("../../../models");
+var _colDef = require("../../../colDef");
 
 var _gridColumnsSelector = require("./gridColumnsSelector");
 
@@ -21,12 +21,12 @@ const COLUMNS_DIMENSION_PROPERTIES = ['maxWidth', 'minWidth', 'width', 'flex'];
 exports.COLUMNS_DIMENSION_PROPERTIES = COLUMNS_DIMENSION_PROPERTIES;
 
 const computeColumnTypes = (customColumnTypes = {}) => {
-  const mergedColumnTypes = (0, _extends2.default)({}, (0, _models.getGridDefaultColumnTypes)());
+  const mergedColumnTypes = (0, _extends2.default)({}, (0, _colDef.getGridDefaultColumnTypes)());
   Object.entries(customColumnTypes).forEach(([colType, colTypeDef]) => {
     if (mergedColumnTypes[colType]) {
       mergedColumnTypes[colType] = (0, _extends2.default)({}, mergedColumnTypes[colType], colTypeDef);
     } else {
-      mergedColumnTypes[colType] = (0, _extends2.default)({}, mergedColumnTypes[colTypeDef.extendType || _models.DEFAULT_GRID_COL_TYPE_KEY], colTypeDef);
+      mergedColumnTypes[colType] = (0, _extends2.default)({}, mergedColumnTypes[colTypeDef.extendType || _colDef.DEFAULT_GRID_COL_TYPE_KEY], colTypeDef);
     }
   });
   return mergedColumnTypes;
@@ -247,7 +247,7 @@ exports.applyInitialState = applyInitialState;
 
 const getGridColDef = (columnTypes, type) => {
   if (!type) {
-    return columnTypes[_models.DEFAULT_GRID_COL_TYPE_KEY];
+    return columnTypes[_colDef.DEFAULT_GRID_COL_TYPE_KEY];
   }
 
   if (process.env.NODE_ENV !== 'production') {
@@ -258,7 +258,7 @@ const getGridColDef = (columnTypes, type) => {
   }
 
   if (!columnTypes[type]) {
-    return columnTypes[_models.DEFAULT_GRID_COL_TYPE_KEY];
+    return columnTypes[_colDef.DEFAULT_GRID_COL_TYPE_KEY];
   }
 
   return columnTypes[type];
@@ -270,7 +270,7 @@ const createColumnsState = ({
   apiRef,
   columnsToUpsert,
   initialState,
-  columnsTypes,
+  columnTypes,
   currentColumnVisibilityModel = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef),
   shouldRegenColumnVisibilityModelFromColumns,
   keepOnlyColumnsToUpsert = false
@@ -280,7 +280,7 @@ const createColumnsState = ({
   const isInsideStateInitializer = !apiRef.current.state.columns;
   let columnsStateWithoutColumnVisibilityModel;
 
-  if (isInsideStateInitializer || keepOnlyColumnsToUpsert) {
+  if (isInsideStateInitializer) {
     columnsStateWithoutColumnVisibilityModel = {
       all: [],
       lookup: {}
@@ -288,31 +288,64 @@ const createColumnsState = ({
   } else {
     const currentState = (0, _gridColumnsSelector.gridColumnsSelector)(apiRef.current.state);
     columnsStateWithoutColumnVisibilityModel = {
-      all: [...currentState.all],
-      lookup: (0, _extends2.default)({}, currentState.lookup)
+      all: keepOnlyColumnsToUpsert ? [] : [...currentState.all],
+      lookup: (0, _extends2.default)({}, currentState.lookup) // Will be cleaned later if keepOnlyColumnsToUpsert=true
+
     };
   }
 
+  let columnsToKeep = {};
+
+  if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
+    columnsToKeep = Object.keys(columnsStateWithoutColumnVisibilityModel.lookup).reduce((acc, key) => (0, _extends2.default)({}, acc, {
+      [key]: false
+    }), {});
+  }
+
   const columnsToUpsertLookup = {};
   columnsToUpsert.forEach(newColumn => {
-    columnsToUpsertLookup[newColumn.field] = true;
-
-    if (columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] == null) {
+    const {
+      field
+    } = newColumn;
+    columnsToUpsertLookup[field] = true;
+    columnsToKeep[field] = true;
+    let existingState = columnsStateWithoutColumnVisibilityModel.lookup[field];
+
+    if (existingState == null) {
       // New Column
-      columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] = (0, _extends2.default)({}, getGridColDef(columnsTypes, newColumn.type), newColumn);
-      columnsStateWithoutColumnVisibilityModel.all.push(newColumn.field);
-    } else {
-      const mergedColumn = (0, _extends2.default)({}, columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field], newColumn);
+      existingState = (0, _extends2.default)({}, getGridColDef(columnTypes, newColumn.type), {
+        // TODO v6: Inline `getGridColDef`
+        field,
+        hasBeenResized: false
+      });
+      columnsStateWithoutColumnVisibilityModel.all.push(field);
+    } else if (keepOnlyColumnsToUpsert) {
+      columnsStateWithoutColumnVisibilityModel.all.push(field);
+    }
 
-      if (!mergedColumn.hasBeenResized && COLUMNS_DIMENSION_PROPERTIES.some(propertyName => newColumn[propertyName] !== undefined)) {
-        mergedColumn.hasBeenResized = true;
-      }
+    let hasValidDimension = false;
 
-      columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] = mergedColumn;
+    if (!existingState.hasBeenResized) {
+      hasValidDimension = COLUMNS_DIMENSION_PROPERTIES.some(key => newColumn[key] !== undefined);
     }
+
+    columnsStateWithoutColumnVisibilityModel.lookup[field] = (0, _extends2.default)({}, existingState, {
+      hide: newColumn.hide == null ? false : newColumn.hide
+    }, newColumn, {
+      hasBeenResized: existingState.hasBeenResized || hasValidDimension
+    });
   });
+
+  if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
+    Object.keys(columnsStateWithoutColumnVisibilityModel.lookup).forEach(field => {
+      if (!columnsToKeep[field]) {
+        delete columnsStateWithoutColumnVisibilityModel.lookup[field];
+      }
+    });
+  }
+
   const columnsLookupBeforePreProcessing = (0, _extends2.default)({}, columnsStateWithoutColumnVisibilityModel.lookup);
-  const columnsStateWithPreProcessing = apiRef.current.unstable_applyPreProcessors('hydrateColumns', columnsStateWithoutColumnVisibilityModel); // TODO v6: remove the sync between the columns `hide` option and the model.
+  const columnsStateWithPreProcessing = apiRef.current.unstable_applyPipeProcessors('hydrateColumns', columnsStateWithoutColumnVisibilityModel); // TODO v6: remove the sync between the columns `hide` option and the model.
 
   let columnVisibilityModel = {};
 

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

@@ -22,7 +22,7 @@ var _gridColumnsSelector = require("./gridColumnsSelector");
 
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 
-var _preProcessing = require("../../core/preProcessing");
+var _pipeProcessing = require("../../core/pipeProcessing");
 
 var _gridColumnsUtils = require("./gridColumnsUtils");
 
@@ -41,7 +41,7 @@ const columnsStateInitializer = (state, props, apiRef) => {
   const columnsTypes = (0, _gridColumnsUtils.computeColumnTypes)(props.columnTypes);
   const columnsState = (0, _gridColumnsUtils.createColumnsState)({
     apiRef,
-    columnsTypes,
+    columnTypes: columnsTypes,
     columnsToUpsert: props.columns,
     initialState: (_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.columns,
     shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel,
@@ -65,13 +65,15 @@ function useGridColumns(apiRef, props) {
   var _props$initialState4, _props$initialState4$, _props$componentsProp2;
 
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridColumns');
-  const columnsTypes = React.useMemo(() => (0, _gridColumnsUtils.computeColumnTypes)(props.columnTypes), [props.columnTypes]);
+  const columnTypes = React.useMemo(() => (0, _gridColumnsUtils.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$initialState4 = props.initialState) != null && (_props$initialState4$ = _props$initialState4.columns) != null && _props$initialState4$.columnVisibilityModel)).current;
+  const 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,
@@ -108,7 +110,7 @@ function useGridColumns(apiRef, props) {
       apiRef.current.setState(state => (0, _extends2.default)({}, state, {
         columns: (0, _gridColumnsUtils.createColumnsState)({
           apiRef,
-          columnsTypes,
+          columnTypes,
           columnsToUpsert: [],
           initialState: undefined,
           shouldRegenColumnVisibilityModelFromColumns: false,
@@ -118,24 +120,24 @@ function useGridColumns(apiRef, props) {
       }));
       apiRef.current.forceUpdate();
     }
-  }, [apiRef, columnsTypes]);
+  }, [apiRef, columnTypes]);
   const updateColumns = React.useCallback(columns => {
     const columnsState = (0, _gridColumnsUtils.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) {
       var _columnVisibilityMode;
 
       const columnVisibilityModel = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
@@ -160,7 +162,7 @@ function useGridColumns(apiRef, props) {
       };
       apiRef.current.publishEvent(_events.GridEvents.columnVisibilityChange, params);
     }
-  }, [apiRef, isUsingColumnVisibilityModel]);
+  }, [apiRef]);
   const setColumnIndex = React.useCallback((field, targetIndexPosition) => {
     const allColumns = (0, _gridColumnsSelector.gridColumnFieldsSelector)(apiRef);
     const oldIndexPosition = allColumns.findIndex(col => col === field);
@@ -219,7 +221,7 @@ function useGridColumns(apiRef, props) {
   const stateExportPreProcessing = React.useCallback(prevState => {
     const columnsStateToExport = {};
 
-    if (isUsingColumnVisibilityModel) {
+    if (isUsingColumnVisibilityModel.current) {
       const columnVisibilityModelToExport = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
       const hasHiddenColumns = Object.values(columnVisibilityModelToExport).some(value => value === false);
 
@@ -250,11 +252,11 @@ function useGridColumns(apiRef, props) {
     return (0, _extends2.default)({}, prevState, {
       columns: columnsStateToExport
     });
-  }, [apiRef, isUsingColumnVisibilityModel]);
+  }, [apiRef]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
     var _context$stateToResto;
 
-    const columnVisibilityModelToImport = isUsingColumnVisibilityModel ? (_context$stateToResto = context.stateToRestore.columns) == null ? void 0 : _context$stateToResto.columnVisibilityModel : undefined;
+    const columnVisibilityModelToImport = isUsingColumnVisibilityModel.current ? (_context$stateToResto = context.stateToRestore.columns) == null ? void 0 : _context$stateToResto.columnVisibilityModel : undefined;
     const initialState = context.stateToRestore.columns;
 
     if (columnVisibilityModelToImport == null && initialState == null) {
@@ -263,10 +265,10 @@ function useGridColumns(apiRef, props) {
 
     const columnsState = (0, _gridColumnsUtils.createColumnsState)({
       apiRef,
-      columnsTypes,
+      columnTypes,
       columnsToUpsert: [],
       initialState,
-      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel,
+      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel.current,
       currentColumnVisibilityModel: columnVisibilityModelToImport,
       keepOnlyColumnsToUpsert: false
     });
@@ -277,7 +279,7 @@ function useGridColumns(apiRef, props) {
     }
 
     return params;
-  }, [apiRef, isUsingColumnVisibilityModel, columnsTypes]);
+  }, [apiRef, columnTypes]);
   const preferencePanelPreProcessing = React.useCallback((initialValue, value) => {
     if (value === _preferencesPanel.GridPreferencePanelsValue.columns) {
       var _props$componentsProp;
@@ -288,14 +290,14 @@ function useGridColumns(apiRef, props) {
 
     return initialValue;
   }, [props.components.ColumnsPanel, (_props$componentsProp2 = props.componentsProps) == null ? void 0 : _props$componentsProp2.columnsPanel]);
-  (0, _preProcessing.useGridRegisterPreProcessor)(apiRef, 'exportState', stateExportPreProcessing);
-  (0, _preProcessing.useGridRegisterPreProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
-  (0, _preProcessing.useGridRegisterPreProcessor)(apiRef, 'preferencePanel', preferencePanelPreProcessing);
+  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);
+  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
+  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'preferencePanel', preferencePanelPreProcessing);
   /**
    * EVENTS
    */
 
-  const handlePreProcessorRegister = React.useCallback(name => {
+  const handlepipeProcessorRegister = React.useCallback(name => {
     if (name !== 'hydrateColumns') {
       return;
     }
@@ -303,14 +305,14 @@ function useGridColumns(apiRef, props) {
     logger.info(`Columns pre-processing have changed, regenerating the columns`);
     const columnsState = (0, _gridColumnsUtils.createColumnsState)({
       apiRef,
-      columnsTypes,
+      columnTypes,
       columnsToUpsert: [],
       initialState: undefined,
-      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel,
+      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel.current,
       keepOnlyColumnsToUpsert: false
     });
     setGridColumnsState(columnsState);
-  }, [apiRef, logger, setGridColumnsState, columnsTypes, isUsingColumnVisibilityModel]);
+  }, [apiRef, logger, setGridColumnsState, columnTypes]);
   const prevInnerWidth = React.useRef(null);
 
   const handleGridSizeChange = viewportInnerSize => {
@@ -320,7 +322,7 @@ function useGridColumns(apiRef, props) {
     }
   };
 
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.preProcessorRegister, handlePreProcessorRegister);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.pipeProcessorRegister, handlepipeProcessorRegister);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.viewportInnerSizeChange, handleGridSizeChange);
   (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _events.GridEvents.columnVisibilityChange, props.onColumnVisibilityChange);
   /**
@@ -337,17 +339,24 @@ 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 = (0, _gridColumnsUtils.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/node/hooks/features/dimensions/useGridDimensions.js

@@ -156,7 +156,8 @@ function useGridDimensions(apiRef, props) {
   const dimensionsApi = {
     resize,
     getRootDimensions,
-    unstable_getViewportPageSize: getViewportPageSize
+    unstable_getViewportPageSize: getViewportPageSize,
+    unstable_updateGridDimensionsRef: updateGridDimensionsRef
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, dimensionsApi, 'GridDimensionsApi');
   const debounceResize = React.useMemo(() => (0, _utils.debounce)(resize, 60), [resize]);

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

@@ -23,15 +23,20 @@ var _gridEditRowsSelector = require("./gridEditRowsSelector");
 
 var _keyboardUtils = require("../../../utils/keyboardUtils");
 
+var _warning = require("../../../utils/warning");
+
 var _gridEditCellParams = require("../../../models/params/gridEditCellParams");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const missingOnProcessRowUpdateErrorWarning = (0, _warning.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');
+
 const useGridCellEditing = (apiRef, props) => {
   const {
-    processRowUpdate
+    processRowUpdate,
+    onProcessRowUpdateError
   } = props;
 
   const runIfEditModeIsCell = callback => (...args) => {
@@ -258,17 +263,29 @@ const useGridCellEditing = (apiRef, props) => {
     });
 
     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 {
+        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,

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

@@ -29,17 +29,22 @@ var _keyboardUtils = require("../../../utils/keyboardUtils");
 
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 
+var _warning = require("../../../utils/warning");
+
 var _gridRowParams = require("../../../models/params/gridRowParams");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const missingOnProcessRowUpdateErrorWarning = (0, _warning.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');
+
 const useGridRowEditing = (apiRef, props) => {
   const focusTimeout = React.useRef(null);
   const nextFocusedCell = React.useRef(null);
   const {
-    processRowUpdate
+    processRowUpdate,
+    onProcessRowUpdateError
   } = props;
 
   const runIfEditModeIsRow = callback => (...args) => {
@@ -365,17 +370,29 @@ const useGridRowEditing = (apiRef, props) => {
     });
 
     if (processRowUpdate) {
-      Promise.resolve(processRowUpdate(rowUpdate, row)).then(finalRowUpdate => {
-        apiRef.current.updateRows([finalRowUpdate]);
-        updateFocusedCellIfNeeded();
-        updateOrDeleteRowState(id, null);
-      });
+      const handleError = errorThrown => {
+        if (onProcessRowUpdateError) {
+          onProcessRowUpdateError(errorThrown);
+        } else {
+          missingOnProcessRowUpdateErrorWarning();
+        }
+      };
+
+      try {
+        Promise.resolve(processRowUpdate(rowUpdate, row)).then(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]);
   const setRowEditingEditCellValue = React.useCallback(params => {
     const {
       id,

package/node/hooks/features/events/useGridEvents.js

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

package/node/hooks/features/filter/useGridFilter.js

@@ -33,7 +33,7 @@ var _useFirstRender = require("../../utils/useFirstRender");
 
 var _rows = require("../rows");
 
-var _preProcessing = require("../../core/preProcessing");
+var _pipeProcessing = require("../../core/pipeProcessing");
 
 var _strategyProcessing = require("../../core/strategyProcessing");
 
@@ -254,9 +254,9 @@ const useGridFilter = (apiRef, props) => {
       filteredDescendantCountLookup: {}
     };
   }, [apiRef, props.filterMode]);
-  (0, _preProcessing.useGridRegisterPreProcessor)(apiRef, 'exportState', stateExportPreProcessing);
-  (0, _preProcessing.useGridRegisterPreProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
-  (0, _preProcessing.useGridRegisterPreProcessor)(apiRef, 'preferencePanel', preferencePanelPreProcessing);
+  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);
+  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
+  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'preferencePanel', preferencePanelPreProcessing);
   (0, _strategyProcessing.useGridRegisterStrategyProcessor)(apiRef, _strategyProcessing.GRID_DEFAULT_STRATEGY, 'filtering', flatFilteringMethod);
   /**
    * EVENTS

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

@@ -23,17 +23,18 @@ var _gridCheckboxSelectionColDef = require("../../../colDef/gridCheckboxSelectio
 
 var _gridClasses = require("../../../constants/gridClasses");
 
+var _gridEditRowModel = require("../../../models/gridEditRowModel");
+
+var _keyboardUtils = require("../../../utils/keyboardUtils");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 /**
- * @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
@@ -130,8 +131,16 @@ const useGridKeyboardNavigation = (apiRef, props) => {
           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));
@@ -286,8 +295,22 @@ const useGridKeyboardNavigation = (apiRef, props) => {
       event.preventDefault();
     }
   }, [apiRef, currentPage, goToCell, goToHeader]);
+  const handleCellKeyDown = React.useCallback((params, event) => {
+    // Ignore portal
+    if (!event.currentTarget.contains(event.target)) {
+      return;
+    } // Get the most recent params because the cell mode may have changed by another listener
+
+
+    const cellParams = apiRef.current.getCellParams(params.id, params.field);
+
+    if (cellParams.cellMode !== _gridEditRowModel.GridCellModes.Edit && (0, _keyboardUtils.isNavigationKey)(event.key)) {
+      apiRef.current.publishEvent(_events.GridEvents.cellNavigationKeyDown, cellParams, event);
+    }
+  }, [apiRef]);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.cellNavigationKeyDown, handleCellNavigationKeyDown);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.columnHeaderKeyDown, handleColumnHeaderKeyDown);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.cellKeyDown, handleCellKeyDown);
 };
 
 exports.useGridKeyboardNavigation = useGridKeyboardNavigation;

package/node/hooks/features/pagination/useGridPage.js

@@ -19,7 +19,7 @@ var _filter = require("../filter");
 
 var _gridPaginationSelector = require("./gridPaginationSelector");
 
-var _preProcessing = require("../../core/preProcessing");
+var _pipeProcessing = require("../../core/pipeProcessing");
 
 var _warning = require("../../../utils/warning");
 
@@ -114,8 +114,8 @@ const useGridPage = (apiRef, props) => {
     apiRef.current.setState(mergeStateWithPage(page));
     return params;
   }, [apiRef]);
-  (0, _preProcessing.useGridRegisterPreProcessor)(apiRef, 'exportState', stateExportPreProcessing);
-  (0, _preProcessing.useGridRegisterPreProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
+  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);
+  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
   /**
    * EVENTS
    */
@@ -133,7 +133,12 @@ const useGridPage = (apiRef, props) => {
     apiRef.current.forceUpdate();
   };
 
+  const handlePageChange = () => apiRef.current.scrollToIndexes({
+    rowIndex: (0, _gridPaginationSelector.gridPageSelector)(apiRef) * (0, _gridPaginationSelector.gridPageSizeSelector)(apiRef)
+  });
+
   (0, _utils.useGridApiEventHandler)(apiRef, _events.GridEvents.pageSizeChange, handlePageSizeChange);
+  (0, _utils.useGridApiEventHandler)(apiRef, _events.GridEvents.pageChange, handlePageChange);
   /**
    * EFFECTS
    */

package/node/hooks/features/pagination/useGridPageSize.js

@@ -19,7 +19,7 @@ var _gridPaginationSelector = require("./gridPaginationSelector");
 
 var _density = require("../density");
 
-var _preProcessing = require("../../core/preProcessing");
+var _pipeProcessing = require("../../core/pipeProcessing");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -106,8 +106,8 @@ const useGridPageSize = (apiRef, props) => {
 
     return params;
   }, [apiRef]);
-  (0, _preProcessing.useGridRegisterPreProcessor)(apiRef, 'exportState', stateExportPreProcessing);
-  (0, _preProcessing.useGridRegisterPreProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
+  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);
+  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
   /**
    * EVENTS
    */