@mui/x-data-grid 5.5.1 → 5.7.0

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

@@ -0,0 +1,184 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { GridEvents } from '../../../models/events';
+import { GridCellModes } from '../../../models/gridEditRowModel';
+import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { useGridLogger } from '../../utils/useGridLogger';
+import { gridEditRowsStateSelector } from './gridEditRowsSelector';
+import { useCellEditing } from './useGridCellEditing.old';
+import { useGridRowEditing } from './useGridRowEditing.old';
+export var editingStateInitializer = function editingStateInitializer(state) {
+  return _extends({}, state, {
+    editRows: {}
+  });
+};
+/**
+ * @requires useGridFocus - can be after, async only
+ * @requires useGridParamsApi (method)
+ * @requires useGridColumns (state)
+ */
+
+export function useGridEditing(apiRef, props) {
+  var _props$experimentalFe2;
+
+  var logger = useGridLogger(apiRef, 'useGridEditRows');
+  useCellEditing(apiRef, props);
+  useGridRowEditing(apiRef, props);
+  var debounceMap = React.useRef({});
+  apiRef.current.unstable_updateControlState({
+    stateId: 'editRows',
+    propModel: props.editRowsModel,
+    propOnChange: props.onEditRowsModelChange,
+    stateSelector: gridEditRowsStateSelector,
+    changeEvent: GridEvents.editRowsModelChange
+  });
+  var isCellEditable = React.useCallback(function (params) {
+    return !params.rowNode.isAutoGenerated && !!params.colDef.editable && !!params.colDef.renderEditCell && (!props.isCellEditable || props.isCellEditable(params));
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [props.isCellEditable]);
+
+  var maybeDebounce = function maybeDebounce(id, field, debounceMs, callback) {
+    if (!debounceMs) {
+      callback();
+      return;
+    }
+
+    if (!debounceMap.current[id]) {
+      debounceMap.current[id] = {};
+    }
+
+    if (debounceMap.current[id][field]) {
+      var _debounceMap$current$ = _slicedToArray(debounceMap.current[id][field], 1),
+          _timeout = _debounceMap$current$[0];
+
+      clearTimeout(_timeout);
+    }
+
+    var callbackToRunImmediately = function callbackToRunImmediately() {
+      callback();
+
+      var _debounceMap$current$2 = _slicedToArray(debounceMap.current[id][field], 1),
+          timeout = _debounceMap$current$2[0];
+
+      clearTimeout(timeout);
+      delete debounceMap.current[id][field];
+    };
+
+    var timeout = setTimeout(function () {
+      callback();
+      delete debounceMap.current[id][field];
+    }, debounceMs);
+    debounceMap.current[id][field] = [timeout, callbackToRunImmediately];
+  };
+
+  var runPendingEditCellValueMutation = React.useCallback(function (id, field) {
+    if (!debounceMap.current[id]) {
+      return;
+    }
+
+    if (!field) {
+      Object.keys(debounceMap.current[id]).forEach(function (debouncedField) {
+        var _debounceMap$current$3 = _slicedToArray(debounceMap.current[id][debouncedField], 2),
+            callback = _debounceMap$current$3[1];
+
+        callback();
+      });
+    } else if (debounceMap.current[id][field]) {
+      var _debounceMap$current$4 = _slicedToArray(debounceMap.current[id][field], 2),
+          callback = _debounceMap$current$4[1];
+
+      callback();
+    }
+  }, []);
+  var setEditCellValue = React.useCallback(function (params) {
+    var event = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    maybeDebounce(params.id, params.field, params.debounceMs, function () {
+      var _props$experimentalFe;
+
+      if ((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.preventCommitWhileValidating) {
+        if (props.editMode === 'row') {
+          return apiRef.current.unstable_setRowEditingEditCellValue(params);
+        }
+
+        return apiRef.current.unstable_setCellEditingEditCellValue(params);
+      }
+
+      var newParams = {
+        id: params.id,
+        field: params.field,
+        props: {
+          value: params.value
+        }
+      };
+      return apiRef.current.publishEvent(GridEvents.editCellPropsChange, newParams, event);
+    });
+  }, [apiRef, props.editMode, (_props$experimentalFe2 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe2.preventCommitWhileValidating]);
+  var parseValue = React.useCallback(function (id, field, value) {
+    var column = apiRef.current.getColumn(field);
+    return column.valueParser ? column.valueParser(value, apiRef.current.getCellParams(id, field)) : value;
+  }, [apiRef]);
+  var setEditCellProps = React.useCallback(function (params) {
+    var id = params.id,
+        field = params.field,
+        editProps = params.props;
+    logger.debug("Setting cell props on id: ".concat(id, " field: ").concat(field));
+    apiRef.current.setState(function (state) {
+      var editRowsModel = _extends({}, state.editRows);
+
+      editRowsModel[id] = _extends({}, state.editRows[id]);
+      editRowsModel[id][field] = _extends({}, editProps, {
+        value: parseValue(id, field, editProps.value)
+      });
+      return _extends({}, state, {
+        editRows: editRowsModel
+      });
+    });
+    apiRef.current.forceUpdate();
+    var editRowsState = gridEditRowsStateSelector(apiRef.current.state);
+    return editRowsState[id][field];
+  }, [apiRef, logger, parseValue]);
+  var setEditRowsModel = React.useCallback(function (model) {
+    var currentModel = gridEditRowsStateSelector(apiRef.current.state);
+
+    if (currentModel !== model) {
+      logger.debug("Setting editRows model");
+      apiRef.current.setState(function (state) {
+        return _extends({}, state, {
+          editRows: model
+        });
+      });
+      apiRef.current.forceUpdate();
+    }
+  }, [apiRef, logger]);
+  var getEditRowsModel = React.useCallback(function () {
+    return gridEditRowsStateSelector(apiRef.current.state);
+  }, [apiRef]);
+  var preventTextSelection = React.useCallback(function (params, event) {
+    var isMoreThanOneClick = event.detail > 1;
+
+    if (params.isEditable && params.cellMode === GridCellModes.View && isMoreThanOneClick) {
+      // If we click more than one time, then we prevent the default behavior of selecting the text cell.
+      event.preventDefault();
+    }
+  }, []);
+  useGridApiEventHandler(apiRef, GridEvents.cellMouseDown, preventTextSelection);
+  useGridApiOptionHandler(apiRef, GridEvents.editCellPropsChange, props.onEditCellPropsChange); // TODO v6: remove, use `preProcessEditCellProps` instead
+
+  var editingSharedApi = {
+    isCellEditable: isCellEditable,
+    setEditRowsModel: setEditRowsModel,
+    getEditRowsModel: getEditRowsModel,
+    setEditCellValue: setEditCellValue,
+    unstable_setEditCellProps: setEditCellProps,
+    unstable_parseValue: parseValue,
+    unstable_runPendingEditCellValueMutation: runPendingEditCellValueMutation
+  };
+  useGridApiMethod(apiRef, editingSharedApi, 'EditRowApi');
+  React.useEffect(function () {
+    if (props.editRowsModel !== undefined) {
+      apiRef.current.setEditRowsModel(props.editRowsModel);
+    }
+  }, [apiRef, props.editRowsModel]);
+}

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

@@ -0,0 +1,493 @@
+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';
+import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
+import { GridEvents } from '../../../models/events/gridEvents';
+import { GridEditModes, GridRowModes } from '../../../models/gridEditRowModel';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { gridEditRowsStateSelector } from './gridEditRowsSelector';
+import { isPrintableKey } from '../../../utils/keyboardUtils';
+import { gridColumnFieldsSelector } from '../columns/gridColumnsSelector';
+import { GridRowEditStopReasons, GridRowEditStartReasons } from '../../../models/params/gridRowParams';
+export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
+  var focusTimeout = React.useRef(null);
+  var nextFocusedCell = React.useRef(null);
+  var processRowUpdate = props.processRowUpdate;
+
+  var runIfEditModeIsRow = function runIfEditModeIsRow(callback) {
+    return function () {
+      if (props.editMode === GridEditModes.Row) {
+        callback.apply(void 0, arguments);
+      }
+    };
+  };
+
+  var throwIfNotEditable = React.useCallback(function (id, field) {
+    var params = apiRef.current.getCellParams(id, field);
+
+    if (!apiRef.current.isCellEditable(params)) {
+      throw new Error("MUI: The cell with id=".concat(id, " and field=").concat(field, " is not editable."));
+    }
+  }, [apiRef]);
+  var throwIfNotInMode = React.useCallback(function (id, mode) {
+    if (apiRef.current.getRowMode(id) !== mode) {
+      throw new Error("MUI: The row with id=".concat(id, " is not in ").concat(mode, " mode."));
+    }
+  }, [apiRef]);
+  var handleCellDoubleClick = React.useCallback(function (params, event) {
+    if (!params.isEditable) {
+      return;
+    }
+
+    if (apiRef.current.getRowMode(params.id) === GridRowModes.Edit) {
+      return;
+    }
+
+    var rowParams = apiRef.current.getRowParams(params.id);
+
+    var newParams = _extends({}, rowParams, {
+      field: params.field,
+      reason: GridRowEditStartReasons.cellDoubleClick
+    });
+
+    apiRef.current.publishEvent(GridEvents.rowEditStart, newParams, event);
+  }, [apiRef]);
+  var handleCellFocusIn = React.useCallback(function (params) {
+    nextFocusedCell.current = params;
+  }, []);
+  var handleCellFocusOut = React.useCallback(function (params, event) {
+    if (!params.isEditable) {
+      return;
+    }
+
+    if (apiRef.current.getRowMode(params.id) === GridRowModes.View) {
+      return;
+    } // The mechanism to detect if we can stop editing a row is different from
+    // the cell editing. Instead of triggering it when clicking outside a cell,
+    // we must check if another cell in the same row was not clicked. To achieve
+    // that, first we keep track of all cells that gained focus. When a cell loses
+    // focus we check if the next cell that received focus is from a different row.
+
+
+    nextFocusedCell.current = null;
+    focusTimeout.current = setTimeout(function () {
+      var _nextFocusedCell$curr;
+
+      focusTimeout.current = null;
+
+      if (((_nextFocusedCell$curr = nextFocusedCell.current) == null ? void 0 : _nextFocusedCell$curr.id) !== params.id) {
+        var rowParams = apiRef.current.getRowParams(params.id);
+
+        var newParams = _extends({}, rowParams, {
+          field: params.field,
+          reason: GridRowEditStopReasons.rowFocusOut
+        });
+
+        apiRef.current.publishEvent(GridEvents.rowEditStop, newParams, event);
+      }
+    });
+  }, [apiRef]);
+  React.useEffect(function () {
+    return function () {
+      clearTimeout(focusTimeout.current);
+    };
+  }, []);
+  var handleCellKeyDown = React.useCallback(function (params, event) {
+    if (params.cellMode === GridRowModes.Edit) {
+      var reason;
+
+      if (event.key === 'Escape') {
+        reason = GridRowEditStopReasons.escapeKeyDown;
+      } else if (event.key === 'Enter') {
+        reason = GridRowEditStopReasons.enterKeyDown;
+      } else if (event.key === 'Tab') {
+        var columnFields = gridColumnFieldsSelector(apiRef).filter(function (field) {
+          return apiRef.current.isCellEditable(apiRef.current.getCellParams(params.id, field));
+        });
+
+        if (event.shiftKey) {
+          if (params.field === columnFields[0]) {
+            // Exit if user pressed Shift+Tab on the first field
+            reason = GridRowEditStopReasons.shiftTabKeyDown;
+          }
+        } else if (params.field === columnFields[columnFields.length - 1]) {
+          // Exit if user pressed Tab on the last field
+          reason = GridRowEditStopReasons.tabKeyDown;
+        }
+
+        if (reason) {
+          event.preventDefault(); // Prevent going to the next element in the tab sequence
+        }
+      }
+
+      if (reason) {
+        var rowParams = apiRef.current.getRowParams(params.id);
+
+        var newParams = _extends({}, rowParams, {
+          reason: reason,
+          field: params.field
+        });
+
+        apiRef.current.publishEvent(GridEvents.rowEditStop, newParams, event);
+      }
+    } else if (params.isEditable) {
+      var _reason;
+
+      if (isPrintableKey(event.key)) {
+        if (event.shiftKey || event.ctrlKey || event.metaKey || event.altKey) {
+          return;
+        }
+
+        _reason = GridRowEditStartReasons.printableKeyDown;
+      } else if (event.key === 'Enter') {
+        _reason = GridRowEditStartReasons.enterKeyDown;
+      } else if (event.key === 'Delete') {
+        _reason = GridRowEditStartReasons.deleteKeyDown;
+      }
+
+      if (_reason) {
+        var _rowParams = apiRef.current.getRowParams(params.id);
+
+        var _newParams = _extends({}, _rowParams, {
+          field: params.field,
+          reason: _reason
+        });
+
+        apiRef.current.publishEvent(GridEvents.rowEditStart, _newParams, event);
+      }
+    }
+  }, [apiRef]);
+  var handleRowEditStart = React.useCallback(function (params, event) {
+    var id = params.id,
+        field = params.field,
+        reason = params.reason;
+    apiRef.current.startRowEditMode({
+      id: id,
+      fieldToFocus: field
+    });
+
+    if (reason === GridRowEditStartReasons.deleteKeyDown || reason === GridRowEditStartReasons.printableKeyDown) {
+      apiRef.current.setEditCellValue({
+        id: id,
+        field: field,
+        value: ''
+      }, event);
+    }
+  }, [apiRef]);
+  var handleRowEditStop = React.useCallback(function (params) {
+    var id = params.id,
+        reason = params.reason,
+        field = params.field;
+    apiRef.current.unstable_runPendingEditCellValueMutation(id);
+    var cellToFocusAfter;
+
+    if (reason === GridRowEditStopReasons.enterKeyDown) {
+      cellToFocusAfter = 'below';
+    } else if (reason === GridRowEditStopReasons.tabKeyDown) {
+      cellToFocusAfter = 'right';
+    } else if (reason === GridRowEditStopReasons.shiftTabKeyDown) {
+      cellToFocusAfter = 'left';
+    }
+
+    var ignoreModifications = reason === 'escapeKeyDown';
+    var editingState = gridEditRowsStateSelector(apiRef.current.state);
+
+    if (!ignoreModifications) {
+      // The user wants to stop editing the cell but we can't wait for the props to be processed.
+      // In this case, discard the modifications if any field is processing its props.
+      ignoreModifications = Object.values(editingState[id]).some(function (fieldProps) {
+        return fieldProps.isProcessingProps;
+      });
+    }
+
+    apiRef.current.stopRowEditMode({
+      id: id,
+      ignoreModifications: ignoreModifications,
+      field: field,
+      cellToFocusAfter: cellToFocusAfter
+    });
+  }, [apiRef]);
+  useGridApiEventHandler(apiRef, GridEvents.cellDoubleClick, runIfEditModeIsRow(handleCellDoubleClick));
+  useGridApiEventHandler(apiRef, GridEvents.cellFocusIn, runIfEditModeIsRow(handleCellFocusIn));
+  useGridApiEventHandler(apiRef, GridEvents.cellFocusOut, runIfEditModeIsRow(handleCellFocusOut));
+  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, runIfEditModeIsRow(handleCellKeyDown));
+  useGridApiEventHandler(apiRef, GridEvents.rowEditStart, runIfEditModeIsRow(handleRowEditStart));
+  useGridApiEventHandler(apiRef, GridEvents.rowEditStop, runIfEditModeIsRow(handleRowEditStop));
+  useGridApiOptionHandler(apiRef, GridEvents.rowEditStart, props.onRowEditStart);
+  useGridApiOptionHandler(apiRef, GridEvents.rowEditStop, props.onRowEditStop);
+  var getRowMode = React.useCallback(function (id) {
+    if (props.editMode === GridEditModes.Cell) {
+      return GridRowModes.View;
+    }
+
+    var editingState = gridEditRowsStateSelector(apiRef.current.state);
+    var isEditing = editingState[id] && Object.keys(editingState[id]).length > 0;
+    return isEditing ? GridRowModes.Edit : GridRowModes.View;
+  }, [apiRef, props.editMode]);
+  var updateOrDeleteRowState = React.useCallback(function (id, newProps) {
+    apiRef.current.setState(function (state) {
+      var newEditingState = _extends({}, state.editRows);
+
+      if (newProps !== null) {
+        newEditingState[id] = newProps;
+      } else {
+        delete newEditingState[id];
+      }
+
+      return _extends({}, state, {
+        editRows: newEditingState
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef]);
+  var updateOrDeleteFieldState = React.useCallback(function (id, field, newProps) {
+    apiRef.current.setState(function (state) {
+      var newEditingState = _extends({}, state.editRows);
+
+      if (newProps !== null) {
+        newEditingState[id] = _extends({}, newEditingState[id], _defineProperty({}, field, _extends({}, newProps)));
+      } else {
+        delete newEditingState[id][field];
+
+        if (Object.keys(newEditingState[id]).length === 0) {
+          delete newEditingState[id];
+        }
+      }
+
+      return _extends({}, state, {
+        editRows: newEditingState
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef]);
+  var startRowEditMode = React.useCallback(function (params) {
+    var id = params.id,
+        fieldToFocus = params.fieldToFocus;
+    throwIfNotInMode(id, GridRowModes.View);
+
+    if (apiRef.current.getRowMode(id) === GridRowModes.Edit) {
+      throw new Error("MUI: The cell with id=".concat(id, " is already in edit mode."));
+    }
+
+    var columnFields = gridColumnFieldsSelector(apiRef);
+    var newProps = columnFields.reduce(function (acc, field) {
+      var cellParams = apiRef.current.getCellParams(id, field);
+
+      if (!cellParams.isEditable) {
+        return acc;
+      }
+
+      acc[field] = {
+        value: apiRef.current.getCellValue(id, field),
+        error: false,
+        isProcessingProps: false
+      };
+      return acc;
+    }, {});
+    updateOrDeleteRowState(id, newProps);
+
+    if (fieldToFocus) {
+      apiRef.current.setCellFocus(id, fieldToFocus);
+    }
+  }, [apiRef, throwIfNotInMode, updateOrDeleteRowState]);
+  var stopRowEditMode = React.useCallback(function (params) {
+    var id = params.id,
+        ignoreModifications = params.ignoreModifications,
+        focusedField = params.field,
+        _params$cellToFocusAf = params.cellToFocusAfter,
+        cellToFocusAfter = _params$cellToFocusAf === void 0 ? 'none' : _params$cellToFocusAf;
+    throwIfNotInMode(id, GridRowModes.Edit);
+    apiRef.current.unstable_runPendingEditCellValueMutation(id);
+
+    var updateFocusedCellIfNeeded = function updateFocusedCellIfNeeded() {
+      if (cellToFocusAfter !== 'none' && focusedField) {
+        apiRef.current.unstable_moveFocusToRelativeCell(id, focusedField, cellToFocusAfter);
+      }
+    };
+
+    if (ignoreModifications) {
+      updateFocusedCellIfNeeded();
+      updateOrDeleteRowState(id, null);
+      return;
+    }
+
+    var editingState = gridEditRowsStateSelector(apiRef.current.state);
+    var row = apiRef.current.getRow(id);
+    var isSomeFieldProcessingProps = Object.values(editingState[id]).some(function (fieldProps) {
+      return fieldProps.isProcessingProps;
+    });
+
+    if (isSomeFieldProcessingProps) {
+      return;
+    }
+
+    var hasSomeFieldWithError = Object.values(editingState[id]).some(function (fieldProps) {
+      return fieldProps.error;
+    });
+
+    if (hasSomeFieldWithError) {
+      return;
+    }
+
+    var rowUpdate = _extends({}, row);
+
+    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 (column.valueSetter) {
+        rowUpdate = column.valueSetter({
+          value: fieldProps.value,
+          row: rowUpdate
+        });
+      } else {
+        rowUpdate[field] = fieldProps.value;
+      }
+    });
+
+    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]);
+  var setRowEditingEditCellValue = React.useCallback(function (params) {
+    var id = params.id,
+        field = params.field,
+        value = params.value;
+    throwIfNotEditable(id, field);
+    var column = apiRef.current.getColumn(field);
+    var row = apiRef.current.getRow(id);
+    var parsedValue = value;
+
+    if (column.valueParser) {
+      parsedValue = column.valueParser(value, apiRef.current.getCellParams(id, field));
+    }
+
+    var editingState = gridEditRowsStateSelector(apiRef.current.state);
+
+    var newProps = _extends({}, editingState[id][field], {
+      value: parsedValue
+    });
+
+    if (!column.preProcessEditCellProps) {
+      updateOrDeleteFieldState(id, field, newProps);
+    }
+
+    return new Promise(function (resolve) {
+      var promises = [];
+
+      if (column.preProcessEditCellProps) {
+        var hasChanged = newProps.value !== editingState[id][field].value;
+        newProps = _extends({}, newProps, {
+          isProcessingProps: true
+        });
+        updateOrDeleteFieldState(id, field, newProps);
+
+        var _editingState$id = editingState[id],
+            ignoredField = _editingState$id[field],
+            otherFieldsProps = _objectWithoutProperties(_editingState$id, [field].map(_toPropertyKey));
+
+        var promise = Promise.resolve(column.preProcessEditCellProps({
+          id: id,
+          row: row,
+          props: newProps,
+          hasChanged: hasChanged,
+          otherFieldsProps: otherFieldsProps
+        })).then(function (processedProps) {
+          // Check again if the row is in edit mode because the user may have
+          // discarded the changes while the props were being processed.
+          if (apiRef.current.getRowMode(id) === GridRowModes.View) {
+            resolve(false);
+            return;
+          }
+
+          editingState = gridEditRowsStateSelector(apiRef.current.state);
+          processedProps = _extends({}, processedProps, {
+            isProcessingProps: false
+          }); // We don't reuse the value from the props pre-processing because when the
+          // promise resolves it may be already outdated. The only exception to this rule
+          // is when there's no pre-processing.
+
+          processedProps.value = column.preProcessEditCellProps ? editingState[id][field].value : parsedValue;
+          updateOrDeleteFieldState(id, field, processedProps);
+        });
+        promises.push(promise);
+      }
+
+      Object.entries(editingState[id]).forEach(function (_ref3) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+            thisField = _ref4[0],
+            fieldProps = _ref4[1];
+
+        if (thisField === field) {
+          return;
+        }
+
+        var fieldColumn = apiRef.current.getColumn(thisField);
+
+        if (!fieldColumn.preProcessEditCellProps) {
+          return;
+        }
+
+        fieldProps = _extends({}, fieldProps, {
+          isProcessingProps: true
+        });
+        updateOrDeleteFieldState(id, thisField, fieldProps);
+        editingState = gridEditRowsStateSelector(apiRef.current.state);
+
+        var _editingState$id2 = editingState[id],
+            ignoredField = _editingState$id2[thisField],
+            otherFieldsProps = _objectWithoutProperties(_editingState$id2, [thisField].map(_toPropertyKey));
+
+        var promise = Promise.resolve(fieldColumn.preProcessEditCellProps({
+          id: id,
+          row: row,
+          props: fieldProps,
+          hasChanged: false,
+          otherFieldsProps: otherFieldsProps
+        })).then(function (processedProps) {
+          // Check again if the row is in edit mode because the user may have
+          // discarded the changes while the props were being processed.
+          if (apiRef.current.getRowMode(id) === GridRowModes.View) {
+            resolve(false);
+            return;
+          }
+
+          processedProps = _extends({}, processedProps, {
+            isProcessingProps: false
+          });
+          updateOrDeleteFieldState(id, thisField, processedProps);
+        });
+        promises.push(promise);
+      });
+      Promise.all(promises).then(function () {
+        if (apiRef.current.getRowMode(id) === GridRowModes.Edit) {
+          editingState = gridEditRowsStateSelector(apiRef.current.state);
+          resolve(!editingState[id][field].error);
+        } else {
+          resolve(false);
+        }
+      });
+    });
+  }, [apiRef, throwIfNotEditable, updateOrDeleteFieldState]);
+  var editingApi = {
+    getRowMode: getRowMode,
+    startRowEditMode: startRowEditMode,
+    stopRowEditMode: stopRowEditMode,
+    unstable_setRowEditingEditCellValue: setRowEditingEditCellValue
+  };
+  useGridApiMethod(apiRef, editingApi, 'EditingApi');
+};