@mui/x-data-grid 8.0.0-alpha.11 → 8.0.0-alpha.13

package/esm/hooks/features/editing/useGridCellEditing.js

@@ -0,0 +1,469 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["id", "field"],
+  _excluded2 = ["id", "field"];
+import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { warnOnce } from '@mui/x-internals/warning';
+import { useGridApiEventHandler, useGridApiOptionHandler } from "../../utils/useGridApiEventHandler.js";
+import { GridEditModes, GridCellModes } from "../../../models/gridEditRowModel.js";
+import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
+import { gridEditRowsStateSelector } from "./gridEditingSelectors.js";
+import { isPrintableKey, isPasteShortcut } from "../../../utils/keyboardUtils.js";
+import { gridRowsLookupSelector } from "../rows/gridRowsSelector.js";
+import { deepClone } from "../../../utils/utils.js";
+import { GridCellEditStartReasons, GridCellEditStopReasons } from "../../../models/params/gridEditCellParams.js";
+import { getDefaultCellValue } from "./utils.js";
+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(`MUI X: The cell with id=${id} and field=${field} is not editable.`);
+    }
+  }, [apiRef]);
+  const throwIfNotInMode = React.useCallback((id, field, mode) => {
+    if (apiRef.current.getCellMode(id, field) !== mode) {
+      throw new Error(`MUI X: The cell with id=${id} and field=${field} is not in ${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;
+      } 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);
+      }
+    }
+  };
+  useGridApiEventHandler(apiRef, 'cellDoubleClick', runIfEditModeIsCell(handleCellDoubleClick));
+  useGridApiEventHandler(apiRef, 'cellFocusOut', runIfEditModeIsCell(handleCellFocusOut));
+  useGridApiEventHandler(apiRef, 'cellKeyDown', runIfEditModeIsCell(handleCellKeyDown));
+  useGridApiEventHandler(apiRef, 'cellEditStart', runIfEditModeIsCell(handleCellEditStart));
+  useGridApiEventHandler(apiRef, 'cellEditStop', runIfEditModeIsCell(handleCellEditStop));
+  useGridApiOptionHandler(apiRef, 'cellEditStart', props.onCellEditStart);
+  useGridApiOptionHandler(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];
+    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 (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 if (process.env.NODE_ENV !== 'production') {
+          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 {
+        const row = apiRef.current.getRow(id);
+        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/esm/hooks/features/editing/useGridEditing.d.ts

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

package/esm/hooks/features/editing/useGridEditing.js

@@ -0,0 +1,123 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
+import { useGridCellEditing } from "./useGridCellEditing.js";
+import { GridCellModes, GridEditModes } from "../../../models/gridEditRowModel.js";
+import { useGridRowEditing } from "./useGridRowEditing.js";
+import { gridEditRowsStateSelector } from "./gridEditingSelectors.js";
+import { isAutogeneratedRowNode } from "../rows/gridRowsUtils.js";
+export const editingStateInitializer = state => _extends({}, state, {
+  editRows: {}
+});
+export const useGridEditing = (apiRef, props) => {
+  useGridCellEditing(apiRef, props);
+  useGridRowEditing(apiRef, props);
+  const debounceMap = React.useRef({});
+  const {
+    isCellEditable: isCellEditableProp
+  } = props;
+  const isCellEditable = React.useCallback(params => {
+    if (isAutogeneratedRowNode(params.rowNode)) {
+      return false;
+    }
+    if (!params.colDef.editable) {
+      return false;
+    }
+    if (!params.colDef.renderEditCell) {
+      return false;
+    }
+    if (isCellEditableProp) {
+      return isCellEditableProp(params);
+    }
+    return true;
+  }, [isCellEditableProp]);
+  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/esm/hooks/features/editing/useGridRowEditing.d.ts

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