@mui/x-data-grid 5.8.0 → 5.11.0

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

@@ -7,18 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useGridRowEditing = void 0;
 
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
 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 React = _interopRequireWildcard(require("react"));
 
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 
-var _gridEvents = require("../../../models/events/gridEvents");
-
 var _gridEditRowModel = require("../../../models/gridEditRowModel");
 
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
@@ -31,8 +29,13 @@ var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 
 var _warning = require("../../../utils/warning");
 
+var _gridRowsSelector = require("../rows/gridRowsSelector");
+
 var _gridRowParams = require("../../../models/params/gridRowParams");
 
+const _excluded = ["id"],
+      _excluded2 = ["id"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -40,11 +43,16 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const missingOnProcessRowUpdateErrorWarning = (0, _warning.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');
 
 const useGridRowEditing = (apiRef, props) => {
+  const [rowModesModel, setRowModesModel] = React.useState({});
+  const prevRowModesModel = React.useRef({});
   const focusTimeout = React.useRef(null);
   const nextFocusedCell = React.useRef(null);
   const {
     processRowUpdate,
-    onProcessRowUpdateError
+    onProcessRowUpdateError,
+    rowModesModel: rowModesModelProp,
+    onRowModesModelChange,
+    signature
   } = props;
 
   const runIfEditModeIsRow = callback => (...args) => {
@@ -79,7 +87,7 @@ const useGridRowEditing = (apiRef, props) => {
       field: params.field,
       reason: _gridRowParams.GridRowEditStartReasons.cellDoubleClick
     });
-    apiRef.current.publishEvent(_gridEvents.GridEvents.rowEditStart, newParams, event);
+    apiRef.current.publishEvent('rowEditStart', newParams, event);
   }, [apiRef]);
   const handleCellFocusIn = React.useCallback(params => {
     nextFocusedCell.current = params;
@@ -105,12 +113,17 @@ const useGridRowEditing = (apiRef, props) => {
       focusTimeout.current = null;
 
       if (((_nextFocusedCell$curr = nextFocusedCell.current) == null ? void 0 : _nextFocusedCell$curr.id) !== params.id) {
+        // The row might have been deleted during the click
+        if (!apiRef.current.getRow(params.id)) {
+          return;
+        }
+
         const rowParams = apiRef.current.getRowParams(params.id);
         const newParams = (0, _extends2.default)({}, rowParams, {
           field: params.field,
           reason: _gridRowParams.GridRowEditStopReasons.rowFocusOut
         });
-        apiRef.current.publishEvent(_gridEvents.GridEvents.rowEditStop, newParams, event);
+        apiRef.current.publishEvent('rowEditStop', newParams, event);
       }
     });
   }, [apiRef]);
@@ -151,7 +164,7 @@ const useGridRowEditing = (apiRef, props) => {
           reason,
           field: params.field
         });
-        apiRef.current.publishEvent(_gridEvents.GridEvents.rowEditStop, newParams, event);
+        apiRef.current.publishEvent('rowEditStop', newParams, event);
       }
     } else if (params.isEditable) {
       let reason;
@@ -174,28 +187,26 @@ const useGridRowEditing = (apiRef, props) => {
           field: params.field,
           reason
         });
-        apiRef.current.publishEvent(_gridEvents.GridEvents.rowEditStart, newParams, event);
+        apiRef.current.publishEvent('rowEditStart', newParams, event);
       }
     }
   }, [apiRef]);
-  const handleRowEditStart = React.useCallback((params, event) => {
+  const handleRowEditStart = React.useCallback(params => {
     const {
       id,
       field,
       reason
     } = params;
-    apiRef.current.startRowEditMode({
+    const startRowEditModeParams = {
       id,
       fieldToFocus: field
-    });
+    };
 
     if (reason === _gridRowParams.GridRowEditStartReasons.deleteKeyDown || reason === _gridRowParams.GridRowEditStartReasons.printableKeyDown) {
-      apiRef.current.setEditCellValue({
-        id,
-        field: field,
-        value: ''
-      }, event);
+      startRowEditModeParams.deleteValue = !!field;
     }
+
+    apiRef.current.startRowEditMode(startRowEditModeParams);
   }, [apiRef]);
   const handleRowEditStop = React.useCallback(params => {
     const {
@@ -232,14 +243,14 @@ const useGridRowEditing = (apiRef, props) => {
       cellToFocusAfter
     });
   }, [apiRef]);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.cellDoubleClick, runIfEditModeIsRow(handleCellDoubleClick));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.cellFocusIn, runIfEditModeIsRow(handleCellFocusIn));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.cellFocusOut, runIfEditModeIsRow(handleCellFocusOut));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.cellKeyDown, runIfEditModeIsRow(handleCellKeyDown));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.rowEditStart, runIfEditModeIsRow(handleRowEditStart));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.rowEditStop, runIfEditModeIsRow(handleRowEditStop));
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _gridEvents.GridEvents.rowEditStart, props.onRowEditStart);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _gridEvents.GridEvents.rowEditStop, props.onRowEditStop);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellDoubleClick', runIfEditModeIsRow(handleCellDoubleClick));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellFocusIn', runIfEditModeIsRow(handleCellFocusIn));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellFocusOut', runIfEditModeIsRow(handleCellFocusOut));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellKeyDown', runIfEditModeIsRow(handleCellKeyDown));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowEditStart', runIfEditModeIsRow(handleRowEditStart));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowEditStop', runIfEditModeIsRow(handleRowEditStop));
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'rowEditStart', props.onRowEditStart);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'rowEditStop', props.onRowEditStop);
   const getRowMode = React.useCallback(id => {
     if (props.editMode === _gridEditRowModel.GridEditModes.Cell) {
       return _gridEditRowModel.GridRowModes.View;
@@ -249,6 +260,34 @@ const useGridRowEditing = (apiRef, props) => {
     const isEditing = editingState[id] && Object.keys(editingState[id]).length > 0;
     return isEditing ? _gridEditRowModel.GridRowModes.Edit : _gridEditRowModel.GridRowModes.View;
   }, [apiRef, props.editMode]);
+  const updateRowModesModel = React.useCallback(newModel => {
+    const isNewModelDifferentFromProp = newModel !== props.rowModesModel;
+
+    if (onRowModesModelChange && isNewModelDifferentFromProp) {
+      const details = signature === _useGridApiEventHandler.GridSignature.DataGridPro ? {
+        api: apiRef.current
+      } : {};
+      onRowModesModelChange(newModel, details);
+    }
+
+    if (props.rowModesModel && isNewModelDifferentFromProp) {
+      return; // The prop always win
+    }
+
+    setRowModesModel(newModel);
+    apiRef.current.publishEvent('rowModesModelChange', newModel);
+  }, [apiRef, onRowModesModelChange, props.rowModesModel, signature]);
+  const updateRowInRowModesModel = React.useCallback((id, newProps) => {
+    const newModel = (0, _extends2.default)({}, rowModesModel);
+
+    if (newProps !== null) {
+      newModel[id] = (0, _extends2.default)({}, newProps);
+    } else {
+      delete newModel[id];
+    }
+
+    updateRowModesModel(newModel);
+  }, [rowModesModel, updateRowModesModel]);
   const updateOrDeleteRowState = React.useCallback((id, newProps) => {
     apiRef.current.setState(state => {
       const newEditingState = (0, _extends2.default)({}, state.editRows);
@@ -288,16 +327,21 @@ const useGridRowEditing = (apiRef, props) => {
     apiRef.current.forceUpdate();
   }, [apiRef]);
   const startRowEditMode = React.useCallback(params => {
+    const {
+      id
+    } = params,
+          other = (0, _objectWithoutPropertiesLoose2.default)(params, _excluded);
+    throwIfNotInMode(id, _gridEditRowModel.GridRowModes.View);
+    updateRowInRowModesModel(id, (0, _extends2.default)({
+      mode: _gridEditRowModel.GridRowModes.Edit
+    }, other));
+  }, [throwIfNotInMode, updateRowInRowModesModel]);
+  const updateStateToStartRowEditMode = React.useCallback(params => {
     const {
       id,
-      fieldToFocus
+      fieldToFocus,
+      deleteValue
     } = params;
-    throwIfNotInMode(id, _gridEditRowModel.GridRowModes.View);
-
-    if (apiRef.current.getRowMode(id) === _gridEditRowModel.GridRowModes.Edit) {
-      throw new Error(`MUI: The cell with id=${id} is already in edit mode.`);
-    }
-
     const columnFields = (0, _gridColumnsSelector.gridColumnFieldsSelector)(apiRef);
     const newProps = columnFields.reduce((acc, field) => {
       const cellParams = apiRef.current.getCellParams(id, field);
@@ -306,8 +350,9 @@ const useGridRowEditing = (apiRef, props) => {
         return acc;
       }
 
+      const shouldDeleteValue = deleteValue && fieldToFocus === field;
       acc[field] = {
-        value: apiRef.current.getCellValue(id, field),
+        value: shouldDeleteValue ? '' : apiRef.current.getCellValue(id, field),
         error: false,
         isProcessingProps: false
       };
@@ -318,26 +363,37 @@ const useGridRowEditing = (apiRef, props) => {
     if (fieldToFocus) {
       apiRef.current.setCellFocus(id, fieldToFocus);
     }
-  }, [apiRef, throwIfNotInMode, updateOrDeleteRowState]);
+  }, [apiRef, updateOrDeleteRowState]);
   const stopRowEditMode = React.useCallback(params => {
+    const {
+      id
+    } = params,
+          other = (0, _objectWithoutPropertiesLoose2.default)(params, _excluded2);
+    throwIfNotInMode(id, _gridEditRowModel.GridRowModes.Edit);
+    updateRowInRowModesModel(id, (0, _extends2.default)({
+      mode: _gridEditRowModel.GridRowModes.View
+    }, other));
+  }, [throwIfNotInMode, updateRowInRowModesModel]);
+  const updateStateToStopRowEditMode = React.useCallback(params => {
     const {
       id,
       ignoreModifications,
       field: focusedField,
       cellToFocusAfter = 'none'
     } = params;
-    throwIfNotInMode(id, _gridEditRowModel.GridRowModes.Edit);
     apiRef.current.unstable_runPendingEditCellValueMutation(id);
 
-    const updateFocusedCellIfNeeded = () => {
+    const finishRowEditMode = () => {
       if (cellToFocusAfter !== 'none' && focusedField) {
         apiRef.current.unstable_moveFocusToRelativeCell(id, focusedField, cellToFocusAfter);
       }
+
+      updateOrDeleteRowState(id, null);
+      updateRowInRowModesModel(id, null);
     };
 
     if (ignoreModifications) {
-      updateFocusedCellIfNeeded();
-      updateOrDeleteRowState(id, null);
+      finishRowEditMode();
       return;
     }
 
@@ -355,19 +411,7 @@ const useGridRowEditing = (apiRef, props) => {
       return;
     }
 
-    let rowUpdate = (0, _extends2.default)({}, row);
-    Object.entries(editingState[id]).forEach(([field, fieldProps]) => {
-      const column = apiRef.current.getColumn(field);
-
-      if (column.valueSetter) {
-        rowUpdate = column.valueSetter({
-          value: fieldProps.value,
-          row: rowUpdate
-        });
-      } else {
-        rowUpdate[field] = fieldProps.value;
-      }
-    });
+    const rowUpdate = apiRef.current.unstable_getRowWithUpdatedValuesFromRowEditing(id);
 
     if (processRowUpdate) {
       const handleError = errorThrown => {
@@ -381,18 +425,16 @@ const useGridRowEditing = (apiRef, props) => {
       try {
         Promise.resolve(processRowUpdate(rowUpdate, row)).then(finalRowUpdate => {
           apiRef.current.updateRows([finalRowUpdate]);
-          updateFocusedCellIfNeeded();
-          updateOrDeleteRowState(id, null);
+          finishRowEditMode();
         }).catch(handleError);
       } catch (errorThrown) {
         handleError(errorThrown);
       }
     } else {
       apiRef.current.updateRows([rowUpdate]);
-      updateFocusedCellIfNeeded();
-      updateOrDeleteRowState(id, null);
+      finishRowEditMode();
     }
-  }, [apiRef, onProcessRowUpdateError, processRowUpdate, throwIfNotInMode, updateOrDeleteRowState]);
+  }, [apiRef, onProcessRowUpdateError, processRowUpdate, updateOrDeleteRowState, updateRowInRowModesModel]);
   const setRowEditingEditCellValue = React.useCallback(params => {
     const {
       id,
@@ -504,13 +546,57 @@ const useGridRowEditing = (apiRef, props) => {
       });
     });
   }, [apiRef, throwIfNotEditable, updateOrDeleteFieldState]);
+  const getRowWithUpdatedValuesFromRowEditing = React.useCallback(id => {
+    const editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
+    const row = apiRef.current.getRow(id);
+    let rowUpdate = (0, _extends2.default)({}, row);
+    Object.entries(editingState[id]).forEach(([field, fieldProps]) => {
+      const column = apiRef.current.getColumn(field);
+
+      if (column.valueSetter) {
+        rowUpdate = column.valueSetter({
+          value: fieldProps.value,
+          row: rowUpdate
+        });
+      } else {
+        rowUpdate[field] = fieldProps.value;
+      }
+    });
+    return rowUpdate;
+  }, [apiRef]);
   const editingApi = {
     getRowMode,
     startRowEditMode,
     stopRowEditMode,
-    unstable_setRowEditingEditCellValue: setRowEditingEditCellValue
+    unstable_setRowEditingEditCellValue: setRowEditingEditCellValue,
+    unstable_getRowWithUpdatedValuesFromRowEditing: getRowWithUpdatedValuesFromRowEditing
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, editingApi, 'EditingApi');
+  React.useEffect(() => {
+    if (rowModesModelProp) {
+      updateRowModesModel(rowModesModelProp);
+    }
+  }, [rowModesModelProp, updateRowModesModel]);
+  React.useEffect(() => {
+    const idToIdLookup = (0, _gridRowsSelector.gridRowsIdToIdLookupSelector)(apiRef);
+    Object.entries(rowModesModel).forEach(([id, params]) => {
+      var _prevRowModesModel$cu, _idToIdLookup$id;
+
+      const prevMode = ((_prevRowModesModel$cu = prevRowModesModel.current[id]) == null ? void 0 : _prevRowModesModel$cu.mode) || _gridEditRowModel.GridRowModes.View;
+      const originalId = (_idToIdLookup$id = idToIdLookup[id]) != null ? _idToIdLookup$id : id;
+
+      if (params.mode === _gridEditRowModel.GridRowModes.Edit && prevMode === _gridEditRowModel.GridRowModes.View) {
+        updateStateToStartRowEditMode((0, _extends2.default)({
+          id: originalId
+        }, params));
+      } else if (params.mode === _gridEditRowModel.GridRowModes.View && prevMode === _gridEditRowModel.GridRowModes.Edit) {
+        updateStateToStopRowEditMode((0, _extends2.default)({
+          id: originalId
+        }, params));
+      }
+    });
+    prevRowModesModel.current = rowModesModel;
+  }, [apiRef, rowModesModel, updateStateToStartRowEditMode, updateStateToStopRowEditMode]);
 };
 
 exports.useGridRowEditing = useGridRowEditing;

package/node/hooks/features/editRows/useGridRowEditing.old.js

@@ -23,8 +23,6 @@ var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 
 var _gridEditRowsSelector = require("./gridEditRowsSelector");
 
-var _gridEvents = require("../../../models/events/gridEvents");
-
 var _gridFocusStateSelector = require("../focus/gridFocusStateSelector");
 
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
@@ -140,12 +138,12 @@ const useGridRowEditing = (apiRef, props) => {
           return false;
         }
 
-        apiRef.current.publishEvent(_gridEvents.GridEvents.rowEditCommit, id, event);
+        apiRef.current.publishEvent('rowEditCommit', id, event);
         return true;
       });
     }
 
-    apiRef.current.publishEvent(_gridEvents.GridEvents.rowEditCommit, id, event);
+    apiRef.current.publishEvent('rowEditCommit', id, event);
     return true;
   }, [apiRef, props.editMode, (_props$experimentalFe2 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe2.preventCommitWhileValidating]);
   const setRowEditingEditCellValue = React.useCallback(params => {
@@ -217,7 +215,7 @@ const useGridRowEditing = (apiRef, props) => {
       if (event.key === 'Enter') {
         var _props$experimentalFe3;
 
-        // TODO: check the return before firing GridEvents.rowEditStop
+        // TODO: check the return before firing 'rowEditStop'
         // On cell editing, it won't exits the edit mode with error
         const isValid = await apiRef.current.commitRowChange(params.id);
 
@@ -225,12 +223,12 @@ const useGridRowEditing = (apiRef, props) => {
           return;
         }
 
-        apiRef.current.publishEvent(_gridEvents.GridEvents.rowEditStop, rowParams, event);
+        apiRef.current.publishEvent('rowEditStop', rowParams, event);
       } else if (event.key === 'Escape') {
-        apiRef.current.publishEvent(_gridEvents.GridEvents.rowEditStop, rowParams, event);
+        apiRef.current.publishEvent('rowEditStop', rowParams, event);
       }
     } else if (event.key === 'Enter') {
-      apiRef.current.publishEvent(_gridEvents.GridEvents.rowEditStart, rowParams, event);
+      apiRef.current.publishEvent('rowEditStart', rowParams, event);
     }
   }, [apiRef, (_props$experimentalFe4 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe4.preventCommitWhileValidating]);
   const handleCellDoubleClick = React.useCallback((params, event) => {
@@ -239,7 +237,7 @@ const useGridRowEditing = (apiRef, props) => {
     }
 
     const rowParams = apiRef.current.getRowParams(params.id);
-    apiRef.current.publishEvent(_gridEvents.GridEvents.rowEditStart, rowParams, event);
+    apiRef.current.publishEvent('rowEditStart', rowParams, event);
   }, [apiRef]);
   const handleEditCellPropsChange = React.useCallback(params => {
     const row = apiRef.current.getRow(params.id);
@@ -272,7 +270,7 @@ const useGridRowEditing = (apiRef, props) => {
     apiRef.current.setRowMode(params.id, _gridEditRowModel.GridRowModes.View);
 
     if (event.key === 'Enter') {
-      apiRef.current.publishEvent(_gridEvents.GridEvents.cellNavigationKeyDown, params, event);
+      apiRef.current.publishEvent('cellNavigationKeyDown', params, event);
     }
   }, [apiRef]);
   const handleRowEditCommit = React.useCallback(id => {
@@ -319,7 +317,7 @@ const useGridRowEditing = (apiRef, props) => {
       if (((_nextFocusedCell$curr = nextFocusedCell.current) == null ? void 0 : _nextFocusedCell$curr.id) !== params.id) {
         await apiRef.current.commitRowChange(params.id, event);
         const rowParams = apiRef.current.getRowParams(params.id);
-        apiRef.current.publishEvent(_gridEvents.GridEvents.rowEditStop, rowParams, event);
+        apiRef.current.publishEvent('rowEditStop', rowParams, event);
       }
     });
   };
@@ -337,18 +335,18 @@ const useGridRowEditing = (apiRef, props) => {
     const params = apiRef.current.getCellParams(cell.id, cell.field);
     commitPropsAndExit(params, {});
   });
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.cellKeyDown, buildCallback(handleCellKeyDown));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.cellDoubleClick, buildCallback(handleCellDoubleClick));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.editCellPropsChange, buildCallback(handleEditCellPropsChange));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.rowEditStart, buildCallback(handleRowEditStart));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.rowEditStop, buildCallback(handleRowEditStop));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.rowEditCommit, buildCallback(handleRowEditCommit));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.cellFocusIn, buildCallback(handleCellFocusIn));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.cellFocusOut, buildCallback(handleCellFocusOut));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.columnHeaderDragStart, buildCallback(handleColumnHeaderDragStart));
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _gridEvents.GridEvents.rowEditCommit, props.onRowEditCommit);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _gridEvents.GridEvents.rowEditStart, props.onRowEditStart);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _gridEvents.GridEvents.rowEditStop, props.onRowEditStop);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellKeyDown', buildCallback(handleCellKeyDown));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellDoubleClick', buildCallback(handleCellDoubleClick));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'editCellPropsChange', buildCallback(handleEditCellPropsChange));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowEditStart', buildCallback(handleRowEditStart));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowEditStop', buildCallback(handleRowEditStop));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowEditCommit', buildCallback(handleRowEditCommit));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellFocusIn', buildCallback(handleCellFocusIn));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellFocusOut', buildCallback(handleCellFocusOut));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragStart', buildCallback(handleColumnHeaderDragStart));
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'rowEditCommit', props.onRowEditCommit);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'rowEditStart', props.onRowEditStart);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'rowEditStop', props.onRowEditStop);
 };
 
 exports.useGridRowEditing = useGridRowEditing;

package/node/hooks/features/events/useGridEvents.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useGridEvents = useGridEvents;
 
-var _events = require("../../../models/events");
-
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 
 /**
@@ -14,21 +12,21 @@ var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
  * @requires useGridColumns (event) - can be after, async only
  */
 function useGridEvents(apiRef, props) {
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _events.GridEvents.columnHeaderClick, props.onColumnHeaderClick);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _events.GridEvents.columnHeaderDoubleClick, props.onColumnHeaderDoubleClick);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _events.GridEvents.columnHeaderOver, props.onColumnHeaderOver);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _events.GridEvents.columnHeaderOut, props.onColumnHeaderOut);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _events.GridEvents.columnHeaderEnter, props.onColumnHeaderEnter);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _events.GridEvents.columnHeaderLeave, props.onColumnHeaderLeave);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _events.GridEvents.columnOrderChange, props.onColumnOrderChange);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _events.GridEvents.cellClick, props.onCellClick);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _events.GridEvents.cellDoubleClick, props.onCellDoubleClick);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _events.GridEvents.cellKeyDown, props.onCellKeyDown);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _events.GridEvents.cellFocusOut, props.onCellFocusOut);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _events.GridEvents.preferencePanelClose, props.onPreferencePanelClose);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _events.GridEvents.preferencePanelOpen, props.onPreferencePanelOpen);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _events.GridEvents.rowDoubleClick, props.onRowDoubleClick);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _events.GridEvents.rowClick, props.onRowClick);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _events.GridEvents.componentError, props.onError);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _events.GridEvents.stateChange, props.onStateChange);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnHeaderClick', props.onColumnHeaderClick);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnHeaderDoubleClick', props.onColumnHeaderDoubleClick);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnHeaderOver', props.onColumnHeaderOver);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnHeaderOut', props.onColumnHeaderOut);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnHeaderEnter', props.onColumnHeaderEnter);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnHeaderLeave', props.onColumnHeaderLeave);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnOrderChange', props.onColumnOrderChange);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'cellClick', props.onCellClick);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'cellDoubleClick', props.onCellDoubleClick);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'cellKeyDown', props.onCellKeyDown);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'cellFocusOut', props.onCellFocusOut);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'preferencePanelClose', props.onPreferencePanelClose);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'preferencePanelOpen', props.onPreferencePanelOpen);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'rowDoubleClick', props.onRowDoubleClick);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'rowClick', props.onRowClick);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'componentError', props.onError);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'stateChange', props.onStateChange);
 }

package/node/hooks/features/export/serializers/csvSerializer.js

@@ -9,7 +9,7 @@ var _colDef = require("../../../../colDef");
 
 var _warning = require("../../../../utils/warning");
 
-const serialiseCellValue = (value, delimiterCharacter) => {
+const serializeCellValue = (value, delimiterCharacter) => {
   if (typeof value === 'string') {
     const formattedValue = value.replace(/"/g, '""'); // Make sure value containing delimiter or line break won't be split into multiple rows
 
@@ -25,7 +25,7 @@ const serialiseCellValue = (value, delimiterCharacter) => {
 
 const objectFormattedValueWarning = (0, _warning.buildWarning)(['MUI: When the value of a field is an object or a `renderCell` is provided, the CSV export might not display the value correctly.', 'You can provide a `valueFormatter` with a string representation to be used.']);
 
-const serialiseRow = (id, columns, getCellParams, delimiterCharacter) => columns.map(column => {
+const serializeRow = (id, columns, getCellParams, delimiterCharacter) => columns.map(column => {
   const cellParams = getCellParams(id, column.field);
 
   if (process.env.NODE_ENV !== 'production') {
@@ -34,7 +34,7 @@ const serialiseRow = (id, columns, getCellParams, delimiterCharacter) => columns
     }
   }
 
-  return serialiseCellValue(cellParams.formattedValue, delimiterCharacter);
+  return serializeCellValue(cellParams.formattedValue, delimiterCharacter);
 });
 
 function buildCSV(options) {
@@ -45,12 +45,12 @@ function buildCSV(options) {
     delimiterCharacter,
     includeHeaders
   } = options;
-  const CSVBody = rowIds.reduce((acc, id) => `${acc}${serialiseRow(id, columns, getCellParams, delimiterCharacter).join(delimiterCharacter)}\r\n`, '').trim();
+  const CSVBody = rowIds.reduce((acc, id) => `${acc}${serializeRow(id, columns, getCellParams, delimiterCharacter).join(delimiterCharacter)}\r\n`, '').trim();
 
   if (!includeHeaders) {
     return CSVBody;
   }
 
-  const CSVHead = `${columns.filter(column => column.field !== _colDef.GRID_CHECKBOX_SELECTION_COL_DEF.field).map(column => serialiseCellValue(column.headerName || column.field, delimiterCharacter)).join(delimiterCharacter)}\r\n`;
+  const CSVHead = `${columns.filter(column => column.field !== _colDef.GRID_CHECKBOX_SELECTION_COL_DEF.field).map(column => serializeCellValue(column.headerName || column.field, delimiterCharacter)).join(delimiterCharacter)}\r\n`;
   return `${CSVHead}${CSVBody}`.trim();
 }

package/node/hooks/features/export/useGridCsvExport.js

@@ -9,8 +9,6 @@ var React = _interopRequireWildcard(require("react"));
 
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 
-var _filter = require("../filter");
-
 var _useGridLogger = require("../../utils/useGridLogger");
 
 var _exportAs = require("../../../utils/exportAs");
@@ -19,22 +17,16 @@ var _csvSerializer = require("./serializers/csvSerializer");
 
 var _utils = require("./utils");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _pipeProcessing = require("../../core/pipeProcessing");
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _GridToolbarExport = require("../../../components/toolbar/GridToolbarExport");
 
-const defaultGetRowsToExport = ({
-  apiRef
-}) => {
-  const filteredSortedRowIds = (0, _filter.gridFilteredSortedRowIdsSelector)(apiRef);
-  const selectedRows = apiRef.current.getSelectedRows();
+var _jsxRuntime = require("react/jsx-runtime");
 
-  if (selectedRows.size > 0) {
-    return filteredSortedRowIds.filter(id => selectedRows.has(id));
-  }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-  return filteredSortedRowIds;
-};
 /**
  * @requires useGridColumns (state)
  * @requires useGridFilter (state)
@@ -42,8 +34,6 @@ const defaultGetRowsToExport = ({
  * @requires useGridSelection (state)
  * @requires useGridParamsApi (method)
  */
-
-
 const useGridCsvExport = apiRef => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridCsvExport');
   const getDataAsCsv = React.useCallback((options = {}) => {
@@ -54,7 +44,7 @@ const useGridCsvExport = apiRef => {
       apiRef,
       options
     });
-    const getRowsToExport = (_options$getRowsToExp = options.getRowsToExport) != null ? _options$getRowsToExp : defaultGetRowsToExport;
+    const getRowsToExport = (_options$getRowsToExp = options.getRowsToExport) != null ? _options$getRowsToExp : _utils.defaultGetRowsToExport;
     const exportedRowIds = getRowsToExport({
       apiRef
     });
@@ -79,6 +69,25 @@ const useGridCsvExport = apiRef => {
     exportDataAsCsv
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, csvExportApi, 'GridCsvExportApi');
+  /**
+   * PRE-PROCESSING
+   */
+
+  const addExportMenuButtons = React.useCallback((initialValue, options) => {
+    var _options$csvOptions;
+
+    if ((_options$csvOptions = options.csvOptions) != null && _options$csvOptions.disableToolbarButton) {
+      return initialValue;
+    }
+
+    return [...initialValue, {
+      component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarExport.GridCsvExportMenuItem, {
+        options: options.csvOptions
+      }),
+      componentName: 'csvExport'
+    }];
+  }, []);
+  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'exportMenu', addExportMenuButtons);
 };
 
 exports.useGridCsvExport = useGridCsvExport;