@mui/x-data-grid 9.0.0-alpha.0 → 9.0.0-alpha.2

package/hooks/features/editing/useGridRowEditing.js

@@ -10,6 +10,7 @@ exports.useGridRowEditing = void 0;
 var _toPropertyKey2 = _interopRequireDefault(require("@babel/runtime/helpers/toPropertyKey"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
@@ -49,12 +50,12 @@ const useGridRowEditing = (apiRef, props) => {
   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.`);
+      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.' : (0, _formatErrorMessage2.default)(77, id, field));
     }
   }, [apiRef]);
   const throwIfNotInMode = React.useCallback((id, mode) => {
     if (apiRef.current.getRowMode(id) !== mode) {
-      throw new Error(`MUI X: The row with id=${id} is not in ${mode} mode.`);
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Data Grid: The row with id=${id} is not in ${mode} mode. ` + 'The operation requires the row to be in a specific editing mode. ' + `Ensure the row is in ${mode} mode before performing this operation.` : (0, _formatErrorMessage2.default)(79, id, mode, mode));
     }
   }, [apiRef]);
   const hasFieldsWithErrors = React.useCallback(rowId => {
@@ -191,12 +192,15 @@ const useGridRowEditing = (apiRef, props) => {
         const rowParams = apiRef.current.getRowParams(params.id);
         const newParams = (0, _extends2.default)({}, rowParams, {
           field: params.field,
-          reason
+          reason,
+          // Only pass the pressed key when the row editing is controlled via `rowModesModel`.
+          // In uncontrolled mode, the default editor already inserts the character and passing it here would duplicate it.
+          key: rowModesModelProp && (0, _keyboardUtils.isPrintableKey)(event) ? event.key : undefined
         });
         apiRef.current.publishEvent('rowEditStart', newParams, event);
       }
     }
-  }, [apiRef, hasFieldsWithErrors]);
+  }, [apiRef, hasFieldsWithErrors, rowModesModelProp]);
   const handleRowEditStart = React.useCallback(params => {
     const {
       id,
@@ -208,10 +212,17 @@ const useGridRowEditing = (apiRef, props) => {
       fieldToFocus: field
     };
     if (reason === _gridRowParams.GridRowEditStartReasons.printableKeyDown || reason === _gridRowParams.GridRowEditStartReasons.deleteKeyDown) {
-      startRowEditModeParams.deleteValue = !!field;
+      // If the user typed a printable key, initialize the value with that key
+      // to avoid losing the first character when the component is controlled.
+      if (rowModesModelProp && reason === _gridRowParams.GridRowEditStartReasons.printableKeyDown && params.key && field) {
+        startRowEditModeParams.initialValue = params.key;
+      } else {
+        // For Delete / Backspace or for uncontrolled row editing we clear the value
+        startRowEditModeParams.deleteValue = !!field;
+      }
     }
     apiRef.current.startRowEditMode(startRowEditModeParams);
-  }, [apiRef]);
+  }, [apiRef, rowModesModelProp]);
   const handleRowEditStop = React.useCallback(params => {
     const {
       id,