@mui/x-data-grid 5.10.0 → 5.12.0

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

@@ -1,18 +1,27 @@
+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 { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
-import { GridEvents } from '../../../models/events/gridEvents';
+import { useGridApiEventHandler, useGridApiOptionHandler, GridSignature } from '../../utils/useGridApiEventHandler';
 import { GridEditModes, GridCellModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridEditRowsStateSelector } from './gridEditRowsSelector';
 import { isPrintableKey } from '../../../utils/keyboardUtils';
 import { buildWarning } from '../../../utils/warning';
+import { gridRowsIdToIdLookupSelector } from '../rows/gridRowsSelector';
 import { GridCellEditStartReasons, GridCellEditStopReasons } from '../../../models/params/gridEditCellParams';
 const missingOnProcessRowUpdateErrorWarning = 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');
 export const useGridCellEditing = (apiRef, props) => {
+  const [cellModesModel, setCellModesModel] = React.useState({});
+  const prevCellModesModel = React.useRef({});
   const {
     processRowUpdate,
-    onProcessRowUpdateError
+    onProcessRowUpdateError,
+    cellModesModel: cellModesModelProp,
+    onCellModesModelChange,
+    signature
   } = props;
 
   const runIfEditModeIsCell = callback => (...args) => {
@@ -46,7 +55,7 @@ export const useGridCellEditing = (apiRef, props) => {
       reason: GridCellEditStartReasons.cellDoubleClick
     });
 
-    apiRef.current.publishEvent(GridEvents.cellEditStart, newParams, event);
+    apiRef.current.publishEvent('cellEditStart', newParams, event);
   }, [apiRef]);
   const handleCellFocusOut = React.useCallback((params, event) => {
     if (params.cellMode === GridCellModes.View) {
@@ -57,7 +66,7 @@ export const useGridCellEditing = (apiRef, props) => {
       reason: GridCellEditStopReasons.cellFocusOut
     });
 
-    apiRef.current.publishEvent(GridEvents.cellEditStop, newParams, event);
+    apiRef.current.publishEvent('cellEditStop', newParams, event);
   }, [apiRef]);
   const handleCellKeyDown = React.useCallback((params, event) => {
     if (params.cellMode === GridCellModes.Edit) {
@@ -77,7 +86,7 @@ export const useGridCellEditing = (apiRef, props) => {
           reason
         });
 
-        apiRef.current.publishEvent(GridEvents.cellEditStop, newParams, event);
+        apiRef.current.publishEvent('cellEditStop', newParams, event);
       }
     } else if (params.isEditable) {
       let reason;
@@ -99,25 +108,26 @@ export const useGridCellEditing = (apiRef, props) => {
           reason
         });
 
-        apiRef.current.publishEvent(GridEvents.cellEditStart, newParams, event);
+        apiRef.current.publishEvent('cellEditStart', newParams, event);
       }
     }
   }, [apiRef]);
-  const handleCellEditStart = React.useCallback((params, event) => {
+  const handleCellEditStart = React.useCallback(params => {
     const {
       id,
       field,
       reason
     } = params;
-    apiRef.current.startCellEditMode(params);
+    const startCellEditModeParams = {
+      id,
+      field
+    };
 
     if (reason === GridCellEditStartReasons.deleteKeyDown || reason === GridCellEditStartReasons.printableKeyDown) {
-      apiRef.current.setEditCellValue({
-        id,
-        field,
-        value: ''
-      }, event);
+      startCellEditModeParams.deleteValue = true;
     }
+
+    apiRef.current.startCellEditMode(startCellEditModeParams);
   }, [apiRef]);
   const handleCellEditStop = React.useCallback(params => {
     const {
@@ -151,18 +161,56 @@ export const useGridCellEditing = (apiRef, props) => {
       cellToFocusAfter
     });
   }, [apiRef]);
-  useGridApiEventHandler(apiRef, GridEvents.cellDoubleClick, runIfEditModeIsCell(handleCellDoubleClick));
-  useGridApiEventHandler(apiRef, GridEvents.cellFocusOut, runIfEditModeIsCell(handleCellFocusOut));
-  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, runIfEditModeIsCell(handleCellKeyDown));
-  useGridApiEventHandler(apiRef, GridEvents.cellEditStart, runIfEditModeIsCell(handleCellEditStart));
-  useGridApiEventHandler(apiRef, GridEvents.cellEditStop, runIfEditModeIsCell(handleCellEditStop));
-  useGridApiOptionHandler(apiRef, GridEvents.cellEditStart, props.onCellEditStart);
-  useGridApiOptionHandler(apiRef, GridEvents.cellEditStop, props.onCellEditStop);
+  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', props.onCellEditStop);
   const getCellMode = React.useCallback((id, field) => {
     const editingState = gridEditRowsStateSelector(apiRef.current.state);
     const isEditing = editingState[id] && editingState[id][field];
     return isEditing ? GridCellModes.Edit : GridCellModes.View;
   }, [apiRef]);
+  const updateCellModesModel = React.useCallback(newModel => {
+    const isNewModelDifferentFromProp = newModel !== props.cellModesModel;
+
+    if (onCellModesModelChange && isNewModelDifferentFromProp) {
+      const details = signature === GridSignature.DataGridPro ? {
+        api: apiRef.current
+      } : {};
+      onCellModesModelChange(newModel, details);
+    }
+
+    if (props.cellModesModel && isNewModelDifferentFromProp) {
+      return; // The prop always win
+    }
+
+    setCellModesModel(newModel);
+    apiRef.current.publishEvent('cellModesModelChange', newModel);
+  }, [apiRef, onCellModesModelChange, props.cellModesModel, signature]);
+  const updateFieldInCellModesModel = React.useCallback((id, field, newProps) => {
+    const newModel = _extends({}, cellModesModel);
+
+    if (newProps !== null) {
+      newModel[id] = _extends({}, newModel[id], {
+        [field]: _extends({}, newProps)
+      });
+    } else {
+      const _cellModesModel$id = cellModesModel[id],
+            otherFields = _objectWithoutPropertiesLoose(_cellModesModel$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);
+  }, [cellModesModel, updateCellModesModel]);
   const updateOrDeleteFieldState = React.useCallback((id, field, newProps) => {
     apiRef.current.setState(state => {
       const newEditingState = _extends({}, state.editRows);
@@ -189,18 +237,42 @@ export const useGridCellEditing = (apiRef, props) => {
     const {
       id,
       field
-    } = params;
+    } = 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 = React.useCallback(params => {
+    const {
+      id,
+      field,
+      deleteValue
+    } = params;
     const newProps = {
-      value: apiRef.current.getCellValue(id, field),
+      value: deleteValue ? '' : apiRef.current.getCellValue(id, field),
       error: false,
       isProcessingProps: false
     };
     updateOrDeleteFieldState(id, field, newProps);
     apiRef.current.setCellFocus(id, field);
-  }, [apiRef, throwIfNotEditable, throwIfNotInMode, updateOrDeleteFieldState]);
+  }, [apiRef, updateOrDeleteFieldState]);
   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 = React.useCallback(async params => {
     const {
       id,
       field,
@@ -210,15 +282,17 @@ export const useGridCellEditing = (apiRef, props) => {
     throwIfNotInMode(id, field, GridCellModes.Edit);
     apiRef.current.unstable_runPendingEditCellValueMutation(id, field);
 
-    const updateFocusedCellIfNeeded = () => {
+    const finishCellEditMode = () => {
       if (cellToFocusAfter !== 'none') {
         apiRef.current.unstable_moveFocusToRelativeCell(id, field, cellToFocusAfter);
       }
+
+      updateOrDeleteFieldState(id, field, null);
+      updateFieldInCellModesModel(id, field, null);
     };
 
     if (ignoreModifications) {
-      updateFocusedCellIfNeeded();
-      updateOrDeleteFieldState(id, field, null);
+      finishCellEditMode();
       return;
     }
 
@@ -229,6 +303,9 @@ export const useGridCellEditing = (apiRef, props) => {
     } = 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;
       return;
     }
 
@@ -236,6 +313,8 @@ export const useGridCellEditing = (apiRef, props) => {
 
     if (processRowUpdate) {
       const handleError = errorThrown => {
+        prevCellModesModel.current[id][field].mode = GridCellModes.Edit;
+
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
         } else {
@@ -247,18 +326,16 @@ export const useGridCellEditing = (apiRef, props) => {
         const row = apiRef.current.getRow(id);
         Promise.resolve(processRowUpdate(rowUpdate, row)).then(finalRowUpdate => {
           apiRef.current.updateRows([finalRowUpdate]);
-          updateFocusedCellIfNeeded();
-          updateOrDeleteFieldState(id, field, null);
+          finishCellEditMode();
         }).catch(handleError);
       } catch (errorThrown) {
         handleError(errorThrown);
       }
     } else {
       apiRef.current.updateRows([rowUpdate]);
-      updateFocusedCellIfNeeded();
-      updateOrDeleteFieldState(id, field, null);
+      finishCellEditMode();
     }
-  }, [apiRef, onProcessRowUpdateError, processRowUpdate, throwIfNotInMode, updateOrDeleteFieldState]);
+  }, [apiRef, onProcessRowUpdateError, processRowUpdate, throwIfNotInMode, updateFieldInCellModesModel, updateOrDeleteFieldState]);
   const setCellEditingEditCellValue = React.useCallback(async params => {
     const {
       id,
@@ -335,4 +412,35 @@ export const useGridCellEditing = (apiRef, props) => {
     unstable_getRowWithUpdatedValuesFromCellEditing: getRowWithUpdatedValuesFromCellEditing
   };
   useGridApiMethod(apiRef, editingApi, 'EditingApi');
+  React.useEffect(() => {
+    if (cellModesModelProp) {
+      updateCellModesModel(cellModesModelProp);
+    }
+  }, [cellModesModelProp, updateCellModesModel]);
+  React.useEffect(() => {
+    const idToIdLookup = gridRowsIdToIdLookupSelector(apiRef); // Update the ref here because updateStateToStopCellEditMode may change it later
+
+    const copyOfPrevCellModes = prevCellModesModel.current;
+    prevCellModesModel.current = cellModesModel;
+    Object.entries(cellModesModel).forEach(([id, fields]) => {
+      Object.entries(fields).forEach(([field, params]) => {
+        var _copyOfPrevCellModes$, _copyOfPrevCellModes$2, _idToIdLookup$id;
+
+        const prevMode = ((_copyOfPrevCellModes$ = copyOfPrevCellModes[id]) == null ? void 0 : (_copyOfPrevCellModes$2 = _copyOfPrevCellModes$[field]) == null ? void 0 : _copyOfPrevCellModes$2.mode) || GridCellModes.View;
+        const originalId = (_idToIdLookup$id = idToIdLookup[id]) != null ? _idToIdLookup$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/editRows/useGridCellEditing.old.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useEventCallback } from '@mui/material/utils';
 import { useGridApiOptionHandler, useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
-import { GridEvents } from '../../../models/events/gridEvents';
 import { GridCellModes, GridEditModes } from '../../../models/gridEditRowModel';
 import { isKeyboardEvent, isPrintableKey, isCellEnterEditModeKeys, isCellExitEditModeKeys, isCellEditCommitKeys, isDeleteKeys } from '../../../utils/keyboardUtils';
 import { useGridLogger } from '../../utils/useGridLogger';
@@ -53,7 +52,7 @@ export const useCellEditing = (apiRef, props) => {
       });
     });
     apiRef.current.forceUpdate();
-    apiRef.current.publishEvent(GridEvents.cellModeChange, apiRef.current.getCellParams(id, field));
+    apiRef.current.publishEvent('cellModeChange', apiRef.current.getCellParams(id, field));
   }, [apiRef, logger]);
   const getCellMode = React.useCallback((id, field) => {
     const editRowsState = gridEditRowsStateSelector(apiRef.current.state);
@@ -112,7 +111,7 @@ export const useCellEditing = (apiRef, props) => {
             return false;
           }
 
-          apiRef.current.publishEvent(GridEvents.cellEditCommit, commitParams, event);
+          apiRef.current.publishEvent('cellEditCommit', commitParams, event);
           return true;
         });
       }
@@ -126,7 +125,7 @@ export const useCellEditing = (apiRef, props) => {
     }
 
     if (!hasError) {
-      apiRef.current.publishEvent(GridEvents.cellEditCommit, commitParams, event);
+      apiRef.current.publishEvent('cellEditCommit', commitParams, event);
       return true;
     }
 
@@ -195,7 +194,7 @@ export const useCellEditing = (apiRef, props) => {
     const isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey;
 
     if (!isEditMode && isCellEnterEditModeKeys(event.key) && !isModifierKeyPressed && !(event.key === ' ' && event.shiftKey)) {
-      apiRef.current.publishEvent(GridEvents.cellEditStart, params, event);
+      apiRef.current.publishEvent('cellEditStart', params, event);
     }
 
     if (!isEditMode && isDeleteKeys(event.key)) {
@@ -208,7 +207,7 @@ export const useCellEditing = (apiRef, props) => {
         id,
         field
       }, event);
-      apiRef.current.publishEvent(GridEvents.cellEditStop, params, event);
+      apiRef.current.publishEvent('cellEditStop', params, event);
     }
 
     if (isEditMode && isCellEditCommitKeys(event.key)) {
@@ -224,7 +223,7 @@ export const useCellEditing = (apiRef, props) => {
     }
 
     if (isEditMode && isCellExitEditModeKeys(event.key)) {
-      apiRef.current.publishEvent(GridEvents.cellEditStop, params, event);
+      apiRef.current.publishEvent('cellEditStop', params, event);
     }
   }, [apiRef]);
   const handleCellDoubleClick = React.useCallback((params, event) => {
@@ -232,7 +231,7 @@ export const useCellEditing = (apiRef, props) => {
       return;
     }
 
-    apiRef.current.publishEvent(GridEvents.cellEditStart, params, event);
+    apiRef.current.publishEvent('cellEditStart', params, event);
   }, [apiRef]);
 
   const commitPropsAndExit = async (params, event) => {
@@ -241,7 +240,7 @@ export const useCellEditing = (apiRef, props) => {
     }
 
     await apiRef.current.commitCellChange(params, event);
-    apiRef.current.publishEvent(GridEvents.cellEditStop, params, event);
+    apiRef.current.publishEvent('cellEditStop', params, event);
   };
 
   const handleCellFocusOut = useEventCallback((params, event) => {
@@ -282,7 +281,7 @@ export const useCellEditing = (apiRef, props) => {
     }
 
     if (isCellEditCommitKeys(event.key)) {
-      apiRef.current.publishEvent(GridEvents.cellNavigationKeyDown, params, event);
+      apiRef.current.publishEvent('cellNavigationKeyDown', params, event);
       return;
     }
 
@@ -340,15 +339,15 @@ export const useCellEditing = (apiRef, props) => {
       }));
     }
   }, [apiRef]);
-  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, buildCallback(handleCellKeyDown));
-  useGridApiEventHandler(apiRef, GridEvents.cellDoubleClick, buildCallback(handleCellDoubleClick));
-  useGridApiEventHandler(apiRef, GridEvents.cellFocusOut, buildCallback(handleCellFocusOut));
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragStart, buildCallback(handleColumnHeaderDragStart));
-  useGridApiEventHandler(apiRef, GridEvents.cellEditStart, buildCallback(handleCellEditStart));
-  useGridApiEventHandler(apiRef, GridEvents.cellEditStop, buildCallback(handleCellEditStop));
-  useGridApiEventHandler(apiRef, GridEvents.cellEditCommit, buildCallback(handleCellEditCommit));
-  useGridApiEventHandler(apiRef, GridEvents.editCellPropsChange, buildCallback(handleEditCellPropsChange));
-  useGridApiOptionHandler(apiRef, GridEvents.cellEditCommit, props.onCellEditCommit);
-  useGridApiOptionHandler(apiRef, GridEvents.cellEditStart, props.onCellEditStart);
-  useGridApiOptionHandler(apiRef, GridEvents.cellEditStop, props.onCellEditStop);
+  useGridApiEventHandler(apiRef, 'cellKeyDown', buildCallback(handleCellKeyDown));
+  useGridApiEventHandler(apiRef, 'cellDoubleClick', buildCallback(handleCellDoubleClick));
+  useGridApiEventHandler(apiRef, 'cellFocusOut', buildCallback(handleCellFocusOut));
+  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', buildCallback(handleColumnHeaderDragStart));
+  useGridApiEventHandler(apiRef, 'cellEditStart', buildCallback(handleCellEditStart));
+  useGridApiEventHandler(apiRef, 'cellEditStop', buildCallback(handleCellEditStop));
+  useGridApiEventHandler(apiRef, 'cellEditCommit', buildCallback(handleCellEditCommit));
+  useGridApiEventHandler(apiRef, 'editCellPropsChange', buildCallback(handleEditCellPropsChange));
+  useGridApiOptionHandler(apiRef, 'cellEditCommit', props.onCellEditCommit);
+  useGridApiOptionHandler(apiRef, 'cellEditStart', props.onCellEditStart);
+  useGridApiOptionHandler(apiRef, 'cellEditStop', props.onCellEditStop);
 };

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

@@ -1,6 +1,5 @@
 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';
@@ -29,7 +28,7 @@ export function useGridEditing(apiRef, props) {
     propModel: props.editRowsModel,
     propOnChange: props.onEditRowsModelChange,
     stateSelector: gridEditRowsStateSelector,
-    changeEvent: GridEvents.editRowsModelChange
+    changeEvent: 'editRowsModelChange'
   });
   const isCellEditable = React.useCallback(params => !params.rowNode.isAutoGenerated && !!params.colDef.editable && !!params.colDef.renderEditCell && (!props.isCellEditable || props.isCellEditable(params)), // eslint-disable-next-line react-hooks/exhaustive-deps
   [props.isCellEditable]);
@@ -97,7 +96,7 @@ export function useGridEditing(apiRef, props) {
           value: params.value
         }
       };
-      return apiRef.current.publishEvent(GridEvents.editCellPropsChange, newParams, event);
+      return apiRef.current.publishEvent('editCellPropsChange', newParams, event);
     });
   }, [apiRef, props.editMode, (_props$experimentalFe2 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe2.preventCommitWhileValidating]);
   const parseValue = React.useCallback((id, field, value) => {
@@ -146,8 +145,8 @@ export function useGridEditing(apiRef, props) {
       event.preventDefault();
     }
   }, []);
-  useGridApiEventHandler(apiRef, GridEvents.cellMouseDown, preventTextSelection);
-  useGridApiOptionHandler(apiRef, GridEvents.editCellPropsChange, props.onEditCellPropsChange); // TODO v6: remove, use `preProcessEditCellProps` instead
+  useGridApiEventHandler(apiRef, 'cellMouseDown', preventTextSelection);
+  useGridApiOptionHandler(apiRef, 'editCellPropsChange', props.onEditCellPropsChange); // TODO v6: remove, use `preProcessEditCellProps` instead
 
   const editingSharedApi = {
     isCellEditable,

package/hooks/features/editRows/useGridRowEditing.new.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
-export declare const useGridRowEditing: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'editMode' | 'processRowUpdate' | 'onRowEditStart' | 'onRowEditStop' | 'onProcessRowUpdateError'>) => void;
+export declare const useGridRowEditing: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'editMode' | 'processRowUpdate' | 'onRowEditStart' | 'onRowEditStop' | 'onProcessRowUpdateError' | 'rowModesModel' | 'onRowModesModelChange' | 'signature'>) => void;