@mui/x-data-grid 9.0.0-alpha.1 → 9.0.0-alpha.3

package/hooks/features/editing/useGridCellEditing.mjs

@@ -0,0 +1,497 @@
+'use client';
+
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
+const _excluded = ["id", "field"],
+  _excluded2 = ["id", "field"];
+import * as React from 'react';
+import { warnOnce } from '@mui/x-internals/warning';
+import useEventCallback from '@mui/utils/useEventCallback';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
+import { useGridEvent, useGridEventPriority } from "../../utils/useGridEvent.mjs";
+import { GridEditModes, GridCellModes } from "../../../models/gridEditRowModel.mjs";
+import { useGridApiMethod } from "../../utils/useGridApiMethod.mjs";
+import { gridEditRowsStateSelector } from "./gridEditingSelectors.mjs";
+import { isPrintableKey, isPasteShortcut } from "../../../utils/keyboardUtils.mjs";
+import { gridRowsLookupSelector } from "../rows/gridRowsSelector.mjs";
+import { deepClone } from "../../../utils/utils.mjs";
+import { GridCellEditStartReasons, GridCellEditStopReasons } from "../../../models/params/gridEditCellParams.mjs";
+import { getDefaultCellValue } from "./utils.mjs";
+export const useGridCellEditing = (apiRef, props) => {
+  const [cellModesModel, setCellModesModel] = React.useState({});
+  const cellModesModelRef = React.useRef(cellModesModel);
+  const prevCellModesModel = React.useRef({});
+  const {
+    processRowUpdate,
+    onProcessRowUpdateError,
+    cellModesModel: cellModesModelProp,
+    onCellModesModelChange
+  } = props;
+  const runIfEditModeIsCell = callback => (...args) => {
+    if (props.editMode === GridEditModes.Cell) {
+      callback(...args);
+    }
+  };
+  const throwIfNotEditable = React.useCallback((id, field) => {
+    const params = apiRef.current.getCellParams(id, field);
+    if (!apiRef.current.isCellEditable(params)) {
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Data Grid: The cell with id=${id} and field=${field} is not editable. ` + 'Cell editing requires the cell to be marked as editable. ' + 'Check the column definition and ensure editable is set to true, or verify the isCellEditable callback.' : _formatErrorMessage(77, id, field));
+    }
+  }, [apiRef]);
+  const throwIfNotInMode = React.useCallback((id, field, mode) => {
+    if (apiRef.current.getCellMode(id, field) !== mode) {
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Data Grid: The cell with id=${id} and field=${field} is not in ${mode} mode. ` + 'The operation requires the cell to be in a specific editing mode. ' + `Ensure the cell is in ${mode} mode before performing this operation.` : _formatErrorMessage(78, id, field, mode, mode));
+    }
+  }, [apiRef]);
+  const handleCellDoubleClick = React.useCallback((params, event) => {
+    if (!params.isEditable) {
+      return;
+    }
+    if (params.cellMode === GridCellModes.Edit) {
+      return;
+    }
+    const newParams = _extends({}, params, {
+      reason: GridCellEditStartReasons.cellDoubleClick
+    });
+    apiRef.current.publishEvent('cellEditStart', newParams, event);
+  }, [apiRef]);
+  const handleCellFocusOut = React.useCallback((params, event) => {
+    if (params.cellMode === GridCellModes.View) {
+      return;
+    }
+    if (apiRef.current.getCellMode(params.id, params.field) === GridCellModes.View) {
+      return;
+    }
+    const newParams = _extends({}, params, {
+      reason: GridCellEditStopReasons.cellFocusOut
+    });
+    apiRef.current.publishEvent('cellEditStop', newParams, event);
+  }, [apiRef]);
+  const handleCellKeyDown = React.useCallback((params, event) => {
+    if (params.cellMode === GridCellModes.Edit) {
+      // Wait until IME is settled for Asian languages like Japanese and Chinese
+      // TODO: to replace at one point. See https://github.com/mui/material-ui/pull/39713#discussion_r1381678957.
+      if (event.which === 229) {
+        return;
+      }
+      let reason;
+      if (event.key === 'Escape') {
+        reason = GridCellEditStopReasons.escapeKeyDown;
+      } else if (event.key === 'Enter') {
+        reason = GridCellEditStopReasons.enterKeyDown;
+      } else if (event.key === 'Tab') {
+        reason = event.shiftKey ? GridCellEditStopReasons.shiftTabKeyDown : GridCellEditStopReasons.tabKeyDown;
+        event.preventDefault(); // Prevent going to the next element in the tab sequence
+      }
+      if (reason) {
+        const newParams = _extends({}, params, {
+          reason
+        });
+        apiRef.current.publishEvent('cellEditStop', newParams, event);
+      }
+    } else if (params.isEditable) {
+      let reason;
+      const canStartEditing = apiRef.current.unstable_applyPipeProcessors('canStartEditing', true, {
+        event,
+        cellParams: params,
+        editMode: 'cell'
+      });
+      if (!canStartEditing) {
+        return;
+      }
+      if (isPrintableKey(event)) {
+        reason = GridCellEditStartReasons.printableKeyDown;
+      } else if (isPasteShortcut(event)) {
+        reason = GridCellEditStartReasons.pasteKeyDown;
+      } else if (event.key === 'Enter') {
+        reason = GridCellEditStartReasons.enterKeyDown;
+        event.preventDefault();
+      } else if (event.key === 'Backspace' || event.key === 'Delete') {
+        reason = GridCellEditStartReasons.deleteKeyDown;
+      }
+      if (reason) {
+        const newParams = _extends({}, params, {
+          reason,
+          key: event.key
+        });
+        apiRef.current.publishEvent('cellEditStart', newParams, event);
+      }
+    }
+  }, [apiRef]);
+  const handleCellEditStart = React.useCallback(params => {
+    const {
+      id,
+      field,
+      reason
+    } = params;
+    const startCellEditModeParams = {
+      id,
+      field
+    };
+    if (reason === GridCellEditStartReasons.printableKeyDown || reason === GridCellEditStartReasons.deleteKeyDown || reason === GridCellEditStartReasons.pasteKeyDown) {
+      startCellEditModeParams.deleteValue = true;
+    }
+    apiRef.current.startCellEditMode(startCellEditModeParams);
+  }, [apiRef]);
+  const handleCellEditStop = React.useCallback(params => {
+    const {
+      id,
+      field,
+      reason
+    } = params;
+    apiRef.current.runPendingEditCellValueMutation(id, field);
+    let cellToFocusAfter;
+    if (reason === GridCellEditStopReasons.enterKeyDown) {
+      cellToFocusAfter = 'below';
+    } else if (reason === GridCellEditStopReasons.tabKeyDown) {
+      cellToFocusAfter = 'right';
+    } else if (reason === GridCellEditStopReasons.shiftTabKeyDown) {
+      cellToFocusAfter = 'left';
+    }
+    const ignoreModifications = reason === 'escapeKeyDown';
+    apiRef.current.stopCellEditMode({
+      id,
+      field,
+      ignoreModifications,
+      cellToFocusAfter
+    });
+  }, [apiRef]);
+  const runIfNoFieldErrors = callback => async (...args) => {
+    if (callback) {
+      const {
+        id,
+        field
+      } = args[0];
+      const editRowsState = apiRef.current.state.editRows;
+      const hasFieldErrors = editRowsState[id][field]?.error;
+      if (!hasFieldErrors) {
+        callback(...args);
+      }
+    }
+  };
+  useGridEvent(apiRef, 'cellDoubleClick', runIfEditModeIsCell(handleCellDoubleClick));
+  useGridEvent(apiRef, 'cellFocusOut', runIfEditModeIsCell(handleCellFocusOut));
+  useGridEvent(apiRef, 'cellKeyDown', runIfEditModeIsCell(handleCellKeyDown));
+  useGridEvent(apiRef, 'cellEditStart', runIfEditModeIsCell(handleCellEditStart));
+  useGridEvent(apiRef, 'cellEditStop', runIfEditModeIsCell(handleCellEditStop));
+  useGridEventPriority(apiRef, 'cellEditStart', props.onCellEditStart);
+  useGridEventPriority(apiRef, 'cellEditStop', runIfNoFieldErrors(props.onCellEditStop));
+  const getCellMode = React.useCallback((id, field) => {
+    const editingState = gridEditRowsStateSelector(apiRef);
+    const isEditing = editingState[id] && editingState[id][field];
+    return isEditing ? GridCellModes.Edit : GridCellModes.View;
+  }, [apiRef]);
+  const updateCellModesModel = useEventCallback(newModel => {
+    const isNewModelDifferentFromProp = newModel !== props.cellModesModel;
+    if (onCellModesModelChange && isNewModelDifferentFromProp) {
+      onCellModesModelChange(newModel, {
+        api: apiRef.current
+      });
+    }
+    if (props.cellModesModel && isNewModelDifferentFromProp) {
+      return; // The prop always win
+    }
+    setCellModesModel(newModel);
+    cellModesModelRef.current = newModel;
+    apiRef.current.publishEvent('cellModesModelChange', newModel);
+  });
+  const updateFieldInCellModesModel = React.useCallback((id, field, newProps) => {
+    // We use the ref because it always contain the up-to-date value, different from the state
+    // that needs a rerender to reflect the new value
+    const newModel = _extends({}, cellModesModelRef.current);
+    if (newProps !== null) {
+      newModel[id] = _extends({}, newModel[id], {
+        [field]: _extends({}, newProps)
+      });
+    } else {
+      const _newModel$id = newModel[id],
+        otherFields = _objectWithoutPropertiesLoose(_newModel$id, [field].map(_toPropertyKey)); // Ensure that we have a new object, not a reference
+      newModel[id] = otherFields;
+      if (Object.keys(newModel[id]).length === 0) {
+        delete newModel[id];
+      }
+    }
+    updateCellModesModel(newModel);
+  }, [updateCellModesModel]);
+  const updateOrDeleteFieldState = React.useCallback((id, field, newProps) => {
+    apiRef.current.setState(state => {
+      const newEditingState = _extends({}, state.editRows);
+      if (newProps !== null) {
+        newEditingState[id] = _extends({}, newEditingState[id], {
+          [field]: _extends({}, newProps)
+        });
+      } else {
+        delete newEditingState[id][field];
+        if (Object.keys(newEditingState[id]).length === 0) {
+          delete newEditingState[id];
+        }
+      }
+      return _extends({}, state, {
+        editRows: newEditingState
+      });
+    });
+  }, [apiRef]);
+  const startCellEditMode = React.useCallback(params => {
+    const {
+        id,
+        field
+      } = params,
+      other = _objectWithoutPropertiesLoose(params, _excluded);
+    throwIfNotEditable(id, field);
+    throwIfNotInMode(id, field, GridCellModes.View);
+    updateFieldInCellModesModel(id, field, _extends({
+      mode: GridCellModes.Edit
+    }, other));
+  }, [throwIfNotEditable, throwIfNotInMode, updateFieldInCellModesModel]);
+  const updateStateToStartCellEditMode = useEventCallback(async params => {
+    const {
+      id,
+      field,
+      deleteValue,
+      initialValue
+    } = params;
+    const value = apiRef.current.getCellValue(id, field);
+    let newValue = value;
+    if (deleteValue) {
+      newValue = getDefaultCellValue(apiRef.current.getColumn(field));
+    } else if (initialValue) {
+      newValue = initialValue;
+    }
+    const column = apiRef.current.getColumn(field);
+    const shouldProcessEditCellProps = !!column.preProcessEditCellProps && deleteValue;
+    let newProps = {
+      value: newValue,
+      error: false,
+      isProcessingProps: shouldProcessEditCellProps
+    };
+    updateOrDeleteFieldState(id, field, newProps);
+    apiRef.current.setCellFocus(id, field);
+    if (shouldProcessEditCellProps) {
+      newProps = await Promise.resolve(column.preProcessEditCellProps({
+        id,
+        row: apiRef.current.getRow(id),
+        props: newProps,
+        hasChanged: newValue !== value
+      }));
+      // Check if still in edit mode before updating
+      if (apiRef.current.getCellMode(id, field) === GridCellModes.Edit) {
+        const editingState = gridEditRowsStateSelector(apiRef);
+        updateOrDeleteFieldState(id, field, _extends({}, newProps, {
+          value: editingState[id][field].value,
+          isProcessingProps: false
+        }));
+      }
+    }
+  });
+  const stopCellEditMode = React.useCallback(params => {
+    const {
+        id,
+        field
+      } = params,
+      other = _objectWithoutPropertiesLoose(params, _excluded2);
+    throwIfNotInMode(id, field, GridCellModes.Edit);
+    updateFieldInCellModesModel(id, field, _extends({
+      mode: GridCellModes.View
+    }, other));
+  }, [throwIfNotInMode, updateFieldInCellModesModel]);
+  const updateStateToStopCellEditMode = useEventCallback(async params => {
+    const {
+      id,
+      field,
+      ignoreModifications,
+      cellToFocusAfter = 'none'
+    } = params;
+    throwIfNotInMode(id, field, GridCellModes.Edit);
+    apiRef.current.runPendingEditCellValueMutation(id, field);
+    const finishCellEditMode = () => {
+      updateOrDeleteFieldState(id, field, null);
+      updateFieldInCellModesModel(id, field, null);
+      if (cellToFocusAfter !== 'none') {
+        apiRef.current.moveFocusToRelativeCell(id, field, cellToFocusAfter);
+      }
+    };
+    if (ignoreModifications) {
+      finishCellEditMode();
+      return;
+    }
+    const editingState = gridEditRowsStateSelector(apiRef);
+    const {
+      error,
+      isProcessingProps
+    } = editingState[id][field];
+    const row = apiRef.current.getRow(id);
+    if (error || isProcessingProps) {
+      // Attempt to change cell mode to "view" was not successful
+      // Update previous mode to allow another attempt
+      prevCellModesModel.current[id][field].mode = GridCellModes.Edit;
+      // Revert the mode in the cellModesModel prop back to "edit"
+      updateFieldInCellModesModel(id, field, {
+        mode: GridCellModes.Edit
+      });
+      return;
+    }
+    const rowUpdate = apiRef.current.getRowWithUpdatedValuesFromCellEditing(id, field);
+    if (props.dataSource?.updateRow) {
+      if (isDeepEqual(row, rowUpdate)) {
+        finishCellEditMode();
+        return;
+      }
+      const handleError = () => {
+        prevCellModesModel.current[id][field].mode = GridCellModes.Edit;
+        // Revert the mode in the cellModesModel prop back to "edit"
+        updateFieldInCellModesModel(id, field, {
+          mode: GridCellModes.Edit
+        });
+      };
+      const updateRowParams = {
+        rowId: id,
+        updatedRow: rowUpdate,
+        previousRow: row
+      };
+      try {
+        await apiRef.current.dataSource.editRow(updateRowParams);
+        finishCellEditMode();
+      } catch {
+        handleError();
+      }
+    } else if (processRowUpdate) {
+      const handleError = errorThrown => {
+        prevCellModesModel.current[id][field].mode = GridCellModes.Edit;
+        // Revert the mode in the cellModesModel prop back to "edit"
+        updateFieldInCellModesModel(id, field, {
+          mode: GridCellModes.Edit
+        });
+        if (onProcessRowUpdateError) {
+          onProcessRowUpdateError(errorThrown);
+        } else {
+          warnOnce(['MUI X: 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, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
+        }
+      };
+      try {
+        Promise.resolve(processRowUpdate(rowUpdate, row, {
+          rowId: id
+        })).then(finalRowUpdate => {
+          apiRef.current.updateRows([finalRowUpdate]);
+          finishCellEditMode();
+        }).catch(handleError);
+      } catch (errorThrown) {
+        handleError(errorThrown);
+      }
+    } else {
+      apiRef.current.updateRows([rowUpdate]);
+      finishCellEditMode();
+    }
+  });
+  const setCellEditingEditCellValue = React.useCallback(async params => {
+    const {
+      id,
+      field,
+      value,
+      debounceMs,
+      unstable_skipValueParser: skipValueParser
+    } = params;
+    throwIfNotEditable(id, field);
+    throwIfNotInMode(id, field, GridCellModes.Edit);
+    const column = apiRef.current.getColumn(field);
+    const row = apiRef.current.getRow(id);
+    let parsedValue = value;
+    if (column.valueParser && !skipValueParser) {
+      parsedValue = column.valueParser(value, row, column, apiRef);
+    }
+    let editingState = gridEditRowsStateSelector(apiRef);
+    let newProps = _extends({}, editingState[id][field], {
+      value: parsedValue,
+      changeReason: debounceMs ? 'debouncedSetEditCellValue' : 'setEditCellValue'
+    });
+    if (column.preProcessEditCellProps) {
+      const hasChanged = value !== editingState[id][field].value;
+      newProps = _extends({}, newProps, {
+        isProcessingProps: true
+      });
+      updateOrDeleteFieldState(id, field, newProps);
+      newProps = await Promise.resolve(column.preProcessEditCellProps({
+        id,
+        row,
+        props: newProps,
+        hasChanged
+      }));
+    }
+
+    // Check again if the cell is in edit mode because the user may have
+    // discarded the changes while the props were being processed.
+    if (apiRef.current.getCellMode(id, field) === GridCellModes.View) {
+      return false;
+    }
+    editingState = gridEditRowsStateSelector(apiRef);
+    newProps = _extends({}, newProps, {
+      isProcessingProps: false
+    });
+    // We don't update the value with the one coming 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.
+    newProps.value = column.preProcessEditCellProps ? editingState[id][field].value : parsedValue;
+    updateOrDeleteFieldState(id, field, newProps);
+    editingState = gridEditRowsStateSelector(apiRef);
+    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);
+    const row = apiRef.current.getRow(id);
+    if (!editingState[id] || !editingState[id][field]) {
+      return apiRef.current.getRow(id);
+    }
+    const {
+      value
+    } = editingState[id][field];
+    return column.valueSetter ? column.valueSetter(value, row, column, apiRef) : _extends({}, row, {
+      [field]: value
+    });
+  }, [apiRef]);
+  const editingApi = {
+    getCellMode,
+    startCellEditMode,
+    stopCellEditMode
+  };
+  const editingPrivateApi = {
+    setCellEditingEditCellValue,
+    getRowWithUpdatedValuesFromCellEditing
+  };
+  useGridApiMethod(apiRef, editingApi, 'public');
+  useGridApiMethod(apiRef, editingPrivateApi, 'private');
+  React.useEffect(() => {
+    if (cellModesModelProp) {
+      updateCellModesModel(cellModesModelProp);
+    }
+  }, [cellModesModelProp, updateCellModesModel]);
+
+  // Run this effect synchronously so that the keyboard event can impact the yet-to-be-rendered input.
+  useEnhancedEffect(() => {
+    const rowsLookup = gridRowsLookupSelector(apiRef);
+
+    // Update the ref here because updateStateToStopCellEditMode may change it later
+    const copyOfPrevCellModes = prevCellModesModel.current;
+    prevCellModesModel.current = deepClone(cellModesModel); // Do a deep-clone because the attributes might be changed later
+
+    Object.entries(cellModesModel).forEach(([id, fields]) => {
+      Object.entries(fields).forEach(([field, params]) => {
+        const prevMode = copyOfPrevCellModes[id]?.[field]?.mode || GridCellModes.View;
+        const originalId = rowsLookup[id] ? apiRef.current.getRowId(rowsLookup[id]) : id;
+        if (params.mode === GridCellModes.Edit && prevMode === GridCellModes.View) {
+          updateStateToStartCellEditMode(_extends({
+            id: originalId,
+            field
+          }, params));
+        } else if (params.mode === GridCellModes.View && prevMode === GridCellModes.Edit) {
+          updateStateToStopCellEditMode(_extends({
+            id: originalId,
+            field
+          }, params));
+        }
+      });
+    });
+  }, [apiRef, cellModesModel, updateStateToStartCellEditMode, updateStateToStopCellEditMode]);
+};

package/hooks/features/editing/useGridEditing.d.mts

@@ -0,0 +1,7 @@
+import type { RefObject } from '@mui/x-internals/types';
+import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.mjs";
+import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.mjs";
+import type { GridConfiguration } from "../../../models/configuration/gridConfiguration.mjs";
+import type { GridStateInitializer } from "../../utils/useGridInitializeState.mjs";
+export declare const editingStateInitializer: GridStateInitializer;
+export declare const useGridEditing: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "isCellEditable" | "editMode" | "processRowUpdate" | "dataSource" | "onDataSourceError">, configuration: GridConfiguration) => void;

package/hooks/features/editing/useGridEditing.mjs

@@ -0,0 +1,125 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridApiMethod } from "../../utils/useGridApiMethod.mjs";
+import { useGridCellEditing } from "./useGridCellEditing.mjs";
+import { GridCellModes, GridEditModes } from "../../../models/gridEditRowModel.mjs";
+import { useGridRowEditing } from "./useGridRowEditing.mjs";
+import { gridEditRowsStateSelector } from "./gridEditingSelectors.mjs";
+export const editingStateInitializer = state => _extends({}, state, {
+  editRows: {}
+});
+export const useGridEditing = (apiRef, props, configuration) => {
+  useGridCellEditing(apiRef, props);
+  useGridRowEditing(apiRef, props);
+  const debounceMap = React.useRef({});
+  const {
+    isCellEditable: isCellEditableProp
+  } = props;
+  const isCellEditableFn = configuration.hooks.useIsCellEditable(apiRef, props);
+  const isCellEditable = React.useCallback(params => {
+    if (!isCellEditableFn(params)) {
+      return false;
+    }
+    if (!params.colDef.editable) {
+      return false;
+    }
+    if (!params.colDef.renderEditCell) {
+      return false;
+    }
+    if (isCellEditableProp) {
+      return isCellEditableProp(params);
+    }
+    return true;
+  }, [isCellEditableProp, isCellEditableFn]);
+  const maybeDebounce = (id, field, debounceMs, callback) => {
+    if (!debounceMs) {
+      callback();
+      return;
+    }
+    if (!debounceMap.current[id]) {
+      debounceMap.current[id] = {};
+    }
+    if (debounceMap.current[id][field]) {
+      const [timeout] = debounceMap.current[id][field];
+      clearTimeout(timeout);
+    }
+
+    // To run the callback immediately without waiting the timeout
+    const runImmediately = () => {
+      const [timeout] = debounceMap.current[id][field];
+      clearTimeout(timeout);
+      callback();
+      delete debounceMap.current[id][field];
+    };
+    const timeout = setTimeout(() => {
+      callback();
+      delete debounceMap.current[id][field];
+    }, debounceMs);
+    debounceMap.current[id][field] = [timeout, runImmediately];
+  };
+  React.useEffect(() => {
+    const debounces = debounceMap.current;
+    return () => {
+      Object.entries(debounces).forEach(([id, fields]) => {
+        Object.keys(fields).forEach(field => {
+          const [timeout] = debounces[id][field];
+          clearTimeout(timeout);
+          delete debounces[id][field];
+        });
+      });
+    };
+  }, []);
+  const runPendingEditCellValueMutation = React.useCallback((id, field) => {
+    if (!debounceMap.current[id]) {
+      return;
+    }
+    if (!field) {
+      Object.keys(debounceMap.current[id]).forEach(debouncedField => {
+        const [, runCallback] = debounceMap.current[id][debouncedField];
+        runCallback();
+      });
+    } else if (debounceMap.current[id][field]) {
+      const [, runCallback] = debounceMap.current[id][field];
+      runCallback();
+    }
+  }, []);
+  const setEditCellValue = React.useCallback(params => {
+    const {
+      id,
+      field,
+      debounceMs
+    } = params;
+    return new Promise(resolve => {
+      maybeDebounce(id, field, debounceMs, async () => {
+        const setEditCellValueToCall = props.editMode === GridEditModes.Row ? apiRef.current.setRowEditingEditCellValue : apiRef.current.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) {
+          const result = await setEditCellValueToCall(params);
+          resolve(result);
+        }
+      });
+    });
+  }, [apiRef, props.editMode]);
+  const getRowWithUpdatedValues = React.useCallback((id, field) => {
+    return props.editMode === GridEditModes.Cell ? apiRef.current.getRowWithUpdatedValuesFromCellEditing(id, field) : apiRef.current.getRowWithUpdatedValuesFromRowEditing(id);
+  }, [apiRef, props.editMode]);
+  const getEditCellMeta = React.useCallback((id, field) => {
+    const editingState = gridEditRowsStateSelector(apiRef);
+    return editingState[id]?.[field] ?? null;
+  }, [apiRef]);
+  const editingSharedApi = {
+    isCellEditable,
+    setEditCellValue,
+    getRowWithUpdatedValues,
+    unstable_getEditCellMeta: getEditCellMeta
+  };
+  const editingSharedPrivateApi = {
+    runPendingEditCellValueMutation
+  };
+  useGridApiMethod(apiRef, editingSharedApi, 'public');
+  useGridApiMethod(apiRef, editingSharedPrivateApi, 'private');
+};

package/hooks/features/editing/useGridRowEditing.d.mts

@@ -0,0 +1,4 @@
+import type { RefObject } from '@mui/x-internals/types';
+import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.mjs";
+import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.mjs";
+export declare const useGridRowEditing: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "editMode" | "processRowUpdate" | "onRowEditStart" | "onRowEditStop" | "onProcessRowUpdateError" | "rowModesModel" | "onRowModesModelChange" | "signature" | "dataSource">) => void;