@mui/x-data-grid 5.10.0 → 5.12.0

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

@@ -1,24 +1,35 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["id"],
+    _excluded2 = ["id"];
 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, GridRowModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridEditRowsStateSelector } from './gridEditRowsSelector';
 import { isPrintableKey } from '../../../utils/keyboardUtils';
 import { gridColumnFieldsSelector } from '../columns/gridColumnsSelector';
 import { buildWarning } from '../../../utils/warning';
+import { gridRowsIdToIdLookupSelector } from '../rows/gridRowsSelector';
 import { GridRowEditStopReasons, GridRowEditStartReasons } from '../../../models/params/gridRowParams';
 var 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 var useGridRowEditing = function useGridRowEditing(apiRef, props) {
+  var _React$useState = React.useState({}),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      rowModesModel = _React$useState2[0],
+      setRowModesModel = _React$useState2[1];
+
+  var prevRowModesModel = React.useRef({});
   var focusTimeout = React.useRef(null);
   var nextFocusedCell = React.useRef(null);
   var processRowUpdate = props.processRowUpdate,
-      onProcessRowUpdateError = props.onProcessRowUpdateError;
+      onProcessRowUpdateError = props.onProcessRowUpdateError,
+      rowModesModelProp = props.rowModesModel,
+      onRowModesModelChange = props.onRowModesModelChange,
+      signature = props.signature;
 
   var runIfEditModeIsRow = function runIfEditModeIsRow(callback) {
     return function () {
@@ -56,7 +67,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
       reason: GridRowEditStartReasons.cellDoubleClick
     });
 
-    apiRef.current.publishEvent(GridEvents.rowEditStart, newParams, event);
+    apiRef.current.publishEvent('rowEditStart', newParams, event);
   }, [apiRef]);
   var handleCellFocusIn = React.useCallback(function (params) {
     nextFocusedCell.current = params;
@@ -82,6 +93,11 @@ export var useGridRowEditing = function 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;
+        }
+
         var rowParams = apiRef.current.getRowParams(params.id);
 
         var newParams = _extends({}, rowParams, {
@@ -89,7 +105,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
           reason: GridRowEditStopReasons.rowFocusOut
         });
 
-        apiRef.current.publishEvent(GridEvents.rowEditStop, newParams, event);
+        apiRef.current.publishEvent('rowEditStop', newParams, event);
       }
     });
   }, [apiRef]);
@@ -134,7 +150,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
           field: params.field
         });
 
-        apiRef.current.publishEvent(GridEvents.rowEditStop, newParams, event);
+        apiRef.current.publishEvent('rowEditStop', newParams, event);
       }
     } else if (params.isEditable) {
       var _reason;
@@ -159,26 +175,24 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
           reason: _reason
         });
 
-        apiRef.current.publishEvent(GridEvents.rowEditStart, _newParams, event);
+        apiRef.current.publishEvent('rowEditStart', _newParams, event);
       }
     }
   }, [apiRef]);
-  var handleRowEditStart = React.useCallback(function (params, event) {
+  var handleRowEditStart = React.useCallback(function (params) {
     var id = params.id,
         field = params.field,
         reason = params.reason;
-    apiRef.current.startRowEditMode({
+    var startRowEditModeParams = {
       id: id,
       fieldToFocus: field
-    });
+    };
 
     if (reason === GridRowEditStartReasons.deleteKeyDown || reason === GridRowEditStartReasons.printableKeyDown) {
-      apiRef.current.setEditCellValue({
-        id: id,
-        field: field,
-        value: ''
-      }, event);
+      startRowEditModeParams.deleteValue = !!field;
     }
+
+    apiRef.current.startRowEditMode(startRowEditModeParams);
   }, [apiRef]);
   var handleRowEditStop = React.useCallback(function (params) {
     var id = params.id,
@@ -213,14 +227,14 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
       cellToFocusAfter: cellToFocusAfter
     });
   }, [apiRef]);
-  useGridApiEventHandler(apiRef, GridEvents.cellDoubleClick, runIfEditModeIsRow(handleCellDoubleClick));
-  useGridApiEventHandler(apiRef, GridEvents.cellFocusIn, runIfEditModeIsRow(handleCellFocusIn));
-  useGridApiEventHandler(apiRef, GridEvents.cellFocusOut, runIfEditModeIsRow(handleCellFocusOut));
-  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, runIfEditModeIsRow(handleCellKeyDown));
-  useGridApiEventHandler(apiRef, GridEvents.rowEditStart, runIfEditModeIsRow(handleRowEditStart));
-  useGridApiEventHandler(apiRef, GridEvents.rowEditStop, runIfEditModeIsRow(handleRowEditStop));
-  useGridApiOptionHandler(apiRef, GridEvents.rowEditStart, props.onRowEditStart);
-  useGridApiOptionHandler(apiRef, GridEvents.rowEditStop, props.onRowEditStop);
+  useGridApiEventHandler(apiRef, 'cellDoubleClick', runIfEditModeIsRow(handleCellDoubleClick));
+  useGridApiEventHandler(apiRef, 'cellFocusIn', runIfEditModeIsRow(handleCellFocusIn));
+  useGridApiEventHandler(apiRef, 'cellFocusOut', runIfEditModeIsRow(handleCellFocusOut));
+  useGridApiEventHandler(apiRef, 'cellKeyDown', runIfEditModeIsRow(handleCellKeyDown));
+  useGridApiEventHandler(apiRef, 'rowEditStart', runIfEditModeIsRow(handleRowEditStart));
+  useGridApiEventHandler(apiRef, 'rowEditStop', runIfEditModeIsRow(handleRowEditStop));
+  useGridApiOptionHandler(apiRef, 'rowEditStart', props.onRowEditStart);
+  useGridApiOptionHandler(apiRef, 'rowEditStop', props.onRowEditStop);
   var getRowMode = React.useCallback(function (id) {
     if (props.editMode === GridEditModes.Cell) {
       return GridRowModes.View;
@@ -230,6 +244,34 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     var isEditing = editingState[id] && Object.keys(editingState[id]).length > 0;
     return isEditing ? GridRowModes.Edit : GridRowModes.View;
   }, [apiRef, props.editMode]);
+  var updateRowModesModel = React.useCallback(function (newModel) {
+    var isNewModelDifferentFromProp = newModel !== props.rowModesModel;
+
+    if (onRowModesModelChange && isNewModelDifferentFromProp) {
+      var details = signature === 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]);
+  var updateRowInRowModesModel = React.useCallback(function (id, newProps) {
+    var newModel = _extends({}, rowModesModel);
+
+    if (newProps !== null) {
+      newModel[id] = _extends({}, newProps);
+    } else {
+      delete newModel[id];
+    }
+
+    updateRowModesModel(newModel);
+  }, [rowModesModel, updateRowModesModel]);
   var updateOrDeleteRowState = React.useCallback(function (id, newProps) {
     apiRef.current.setState(function (state) {
       var newEditingState = _extends({}, state.editRows);
@@ -268,13 +310,17 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
   }, [apiRef]);
   var startRowEditMode = React.useCallback(function (params) {
     var id = params.id,
-        fieldToFocus = params.fieldToFocus;
-    throwIfNotInMode(id, GridRowModes.View);
-
-    if (apiRef.current.getRowMode(id) === GridRowModes.Edit) {
-      throw new Error("MUI: The cell with id=".concat(id, " is already in edit mode."));
-    }
+        other = _objectWithoutProperties(params, _excluded);
 
+    throwIfNotInMode(id, GridRowModes.View);
+    updateRowInRowModesModel(id, _extends({
+      mode: GridRowModes.Edit
+    }, other));
+  }, [throwIfNotInMode, updateRowInRowModesModel]);
+  var updateStateToStartRowEditMode = React.useCallback(function (params) {
+    var id = params.id,
+        fieldToFocus = params.fieldToFocus,
+        deleteValue = params.deleteValue;
     var columnFields = gridColumnFieldsSelector(apiRef);
     var newProps = columnFields.reduce(function (acc, field) {
       var cellParams = apiRef.current.getCellParams(id, field);
@@ -283,8 +329,9 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
         return acc;
       }
 
+      var shouldDeleteValue = deleteValue && fieldToFocus === field;
       acc[field] = {
-        value: apiRef.current.getCellValue(id, field),
+        value: shouldDeleteValue ? '' : apiRef.current.getCellValue(id, field),
         error: false,
         isProcessingProps: false
       };
@@ -295,25 +342,35 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     if (fieldToFocus) {
       apiRef.current.setCellFocus(id, fieldToFocus);
     }
-  }, [apiRef, throwIfNotInMode, updateOrDeleteRowState]);
+  }, [apiRef, updateOrDeleteRowState]);
   var stopRowEditMode = React.useCallback(function (params) {
+    var id = params.id,
+        other = _objectWithoutProperties(params, _excluded2);
+
+    throwIfNotInMode(id, GridRowModes.Edit);
+    updateRowInRowModesModel(id, _extends({
+      mode: GridRowModes.View
+    }, other));
+  }, [throwIfNotInMode, updateRowInRowModesModel]);
+  var updateStateToStopRowEditMode = React.useCallback(function (params) {
     var id = params.id,
         ignoreModifications = params.ignoreModifications,
         focusedField = params.field,
         _params$cellToFocusAf = params.cellToFocusAfter,
         cellToFocusAfter = _params$cellToFocusAf === void 0 ? 'none' : _params$cellToFocusAf;
-    throwIfNotInMode(id, GridRowModes.Edit);
     apiRef.current.unstable_runPendingEditCellValueMutation(id);
 
-    var updateFocusedCellIfNeeded = function updateFocusedCellIfNeeded() {
+    var finishRowEditMode = function 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;
     }
 
@@ -324,6 +381,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     });
 
     if (isSomeFieldProcessingProps) {
+      prevRowModesModel.current[id].mode = GridRowModes.Edit;
       return;
     }
 
@@ -332,6 +390,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     });
 
     if (hasSomeFieldWithError) {
+      prevRowModesModel.current[id].mode = GridRowModes.Edit;
       return;
     }
 
@@ -339,6 +398,8 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
 
     if (processRowUpdate) {
       var handleError = function handleError(errorThrown) {
+        prevRowModesModel.current[id].mode = GridRowModes.Edit;
+
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
         } else {
@@ -349,18 +410,16 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
       try {
         Promise.resolve(processRowUpdate(rowUpdate, row)).then(function (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]);
   var setRowEditingEditCellValue = React.useCallback(function (params) {
     var id = params.id,
         field = params.field,
@@ -513,4 +572,35 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     unstable_getRowWithUpdatedValuesFromRowEditing: getRowWithUpdatedValuesFromRowEditing
   };
   useGridApiMethod(apiRef, editingApi, 'EditingApi');
+  React.useEffect(function () {
+    if (rowModesModelProp) {
+      updateRowModesModel(rowModesModelProp);
+    }
+  }, [rowModesModelProp, updateRowModesModel]);
+  React.useEffect(function () {
+    var idToIdLookup = gridRowsIdToIdLookupSelector(apiRef); // Update the ref here because updateStateToStopRowEditMode may change it later
+
+    var copyOfPrevRowModesModel = prevRowModesModel.current;
+    prevRowModesModel.current = rowModesModel;
+    Object.entries(rowModesModel).forEach(function (_ref5) {
+      var _copyOfPrevRowModesMo, _idToIdLookup$id;
+
+      var _ref6 = _slicedToArray(_ref5, 2),
+          id = _ref6[0],
+          params = _ref6[1];
+
+      var prevMode = ((_copyOfPrevRowModesMo = copyOfPrevRowModesModel[id]) == null ? void 0 : _copyOfPrevRowModesMo.mode) || GridRowModes.View;
+      var originalId = (_idToIdLookup$id = idToIdLookup[id]) != null ? _idToIdLookup$id : id;
+
+      if (params.mode === GridRowModes.Edit && prevMode === GridRowModes.View) {
+        updateStateToStartRowEditMode(_extends({
+          id: originalId
+        }, params));
+      } else if (params.mode === GridRowModes.View && prevMode === GridRowModes.Edit) {
+        updateStateToStopRowEditMode(_extends({
+          id: originalId
+        }, params));
+      }
+    });
+  }, [apiRef, rowModesModel, updateStateToStartRowEditMode, updateStateToStopRowEditMode]);
 };

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

@@ -8,7 +8,6 @@ import { GridRowModes, GridEditModes, GridCellModes } from '../../../models/grid
 import { useGridSelector } from '../../utils/useGridSelector';
 import { gridColumnDefinitionsSelector } from '../columns/gridColumnsSelector';
 import { gridEditRowsStateSelector } from './gridEditRowsSelector';
-import { GridEvents } from '../../../models/events/gridEvents';
 import { gridFocusCellSelector } from '../focus/gridFocusStateSelector';
 import { useGridApiOptionHandler, useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
@@ -148,12 +147,12 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
           return false;
         }
 
-        apiRef.current.publishEvent(GridEvents.rowEditCommit, id, event);
+        apiRef.current.publishEvent('rowEditCommit', id, event);
         return true;
       });
     }
 
-    apiRef.current.publishEvent(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]);
   var setRowEditingEditCellValue = React.useCallback(function (params) {
@@ -279,13 +278,13 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
               return _context3.abrupt("return");
 
             case 12:
-              apiRef.current.publishEvent(GridEvents.rowEditStop, rowParams, event);
+              apiRef.current.publishEvent('rowEditStop', rowParams, event);
               _context3.next = 16;
               break;
 
             case 15:
               if (event.key === 'Escape') {
-                apiRef.current.publishEvent(GridEvents.rowEditStop, rowParams, event);
+                apiRef.current.publishEvent('rowEditStop', rowParams, event);
               }
 
             case 16:
@@ -294,7 +293,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
 
             case 18:
               if (event.key === 'Enter') {
-                apiRef.current.publishEvent(GridEvents.rowEditStart, rowParams, event);
+                apiRef.current.publishEvent('rowEditStart', rowParams, event);
               }
 
             case 19:
@@ -315,7 +314,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     }
 
     var rowParams = apiRef.current.getRowParams(params.id);
-    apiRef.current.publishEvent(GridEvents.rowEditStart, rowParams, event);
+    apiRef.current.publishEvent('rowEditStart', rowParams, event);
   }, [apiRef]);
   var handleEditCellPropsChange = React.useCallback(function (params) {
     var row = apiRef.current.getRow(params.id);
@@ -378,7 +377,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     apiRef.current.setRowMode(params.id, GridRowModes.View);
 
     if (event.key === 'Enter') {
-      apiRef.current.publishEvent(GridEvents.cellNavigationKeyDown, params, event);
+      apiRef.current.publishEvent('cellNavigationKeyDown', params, event);
     }
   }, [apiRef]);
   var handleRowEditCommit = React.useCallback(function (id) {
@@ -447,7 +446,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
 
                       case 3:
                         rowParams = apiRef.current.getRowParams(params.id);
-                        apiRef.current.publishEvent(GridEvents.rowEditStop, rowParams, event);
+                        apiRef.current.publishEvent('rowEditStop', rowParams, event);
 
                       case 5:
                       case "end":
@@ -483,16 +482,16 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     var params = apiRef.current.getCellParams(cell.id, cell.field);
     commitPropsAndExit(params, {});
   });
-  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, buildCallback(handleCellKeyDown));
-  useGridApiEventHandler(apiRef, GridEvents.cellDoubleClick, buildCallback(handleCellDoubleClick));
-  useGridApiEventHandler(apiRef, GridEvents.editCellPropsChange, buildCallback(handleEditCellPropsChange));
-  useGridApiEventHandler(apiRef, GridEvents.rowEditStart, buildCallback(handleRowEditStart));
-  useGridApiEventHandler(apiRef, GridEvents.rowEditStop, buildCallback(handleRowEditStop));
-  useGridApiEventHandler(apiRef, GridEvents.rowEditCommit, buildCallback(handleRowEditCommit));
-  useGridApiEventHandler(apiRef, GridEvents.cellFocusIn, buildCallback(handleCellFocusIn));
-  useGridApiEventHandler(apiRef, GridEvents.cellFocusOut, buildCallback(handleCellFocusOut));
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragStart, buildCallback(handleColumnHeaderDragStart));
-  useGridApiOptionHandler(apiRef, GridEvents.rowEditCommit, props.onRowEditCommit);
-  useGridApiOptionHandler(apiRef, GridEvents.rowEditStart, props.onRowEditStart);
-  useGridApiOptionHandler(apiRef, GridEvents.rowEditStop, props.onRowEditStop);
+  useGridApiEventHandler(apiRef, 'cellKeyDown', buildCallback(handleCellKeyDown));
+  useGridApiEventHandler(apiRef, 'cellDoubleClick', buildCallback(handleCellDoubleClick));
+  useGridApiEventHandler(apiRef, 'editCellPropsChange', buildCallback(handleEditCellPropsChange));
+  useGridApiEventHandler(apiRef, 'rowEditStart', buildCallback(handleRowEditStart));
+  useGridApiEventHandler(apiRef, 'rowEditStop', buildCallback(handleRowEditStop));
+  useGridApiEventHandler(apiRef, 'rowEditCommit', buildCallback(handleRowEditCommit));
+  useGridApiEventHandler(apiRef, 'cellFocusIn', buildCallback(handleCellFocusIn));
+  useGridApiEventHandler(apiRef, 'cellFocusOut', buildCallback(handleCellFocusOut));
+  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', buildCallback(handleColumnHeaderDragStart));
+  useGridApiOptionHandler(apiRef, 'rowEditCommit', props.onRowEditCommit);
+  useGridApiOptionHandler(apiRef, 'rowEditStart', props.onRowEditStart);
+  useGridApiOptionHandler(apiRef, 'rowEditStop', props.onRowEditStop);
 };

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

@@ -1,4 +1,3 @@
-import { GridEvents } from '../../../models/events';
 import { useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
 
 /**
@@ -6,21 +5,23 @@ import { useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
  * @requires useGridColumns (event) - can be after, async only
  */
 export function useGridEvents(apiRef, props) {
-  useGridApiOptionHandler(apiRef, GridEvents.columnHeaderClick, props.onColumnHeaderClick);
-  useGridApiOptionHandler(apiRef, GridEvents.columnHeaderDoubleClick, props.onColumnHeaderDoubleClick);
-  useGridApiOptionHandler(apiRef, GridEvents.columnHeaderOver, props.onColumnHeaderOver);
-  useGridApiOptionHandler(apiRef, GridEvents.columnHeaderOut, props.onColumnHeaderOut);
-  useGridApiOptionHandler(apiRef, GridEvents.columnHeaderEnter, props.onColumnHeaderEnter);
-  useGridApiOptionHandler(apiRef, GridEvents.columnHeaderLeave, props.onColumnHeaderLeave);
-  useGridApiOptionHandler(apiRef, GridEvents.columnOrderChange, props.onColumnOrderChange);
-  useGridApiOptionHandler(apiRef, GridEvents.cellClick, props.onCellClick);
-  useGridApiOptionHandler(apiRef, GridEvents.cellDoubleClick, props.onCellDoubleClick);
-  useGridApiOptionHandler(apiRef, GridEvents.cellKeyDown, props.onCellKeyDown);
-  useGridApiOptionHandler(apiRef, GridEvents.cellFocusOut, props.onCellFocusOut);
-  useGridApiOptionHandler(apiRef, GridEvents.preferencePanelClose, props.onPreferencePanelClose);
-  useGridApiOptionHandler(apiRef, GridEvents.preferencePanelOpen, props.onPreferencePanelOpen);
-  useGridApiOptionHandler(apiRef, GridEvents.rowDoubleClick, props.onRowDoubleClick);
-  useGridApiOptionHandler(apiRef, GridEvents.rowClick, props.onRowClick);
-  useGridApiOptionHandler(apiRef, GridEvents.componentError, props.onError);
-  useGridApiOptionHandler(apiRef, GridEvents.stateChange, props.onStateChange);
+  useGridApiOptionHandler(apiRef, 'columnHeaderClick', props.onColumnHeaderClick);
+  useGridApiOptionHandler(apiRef, 'columnHeaderDoubleClick', props.onColumnHeaderDoubleClick);
+  useGridApiOptionHandler(apiRef, 'columnHeaderOver', props.onColumnHeaderOver);
+  useGridApiOptionHandler(apiRef, 'columnHeaderOut', props.onColumnHeaderOut);
+  useGridApiOptionHandler(apiRef, 'columnHeaderEnter', props.onColumnHeaderEnter);
+  useGridApiOptionHandler(apiRef, 'columnHeaderLeave', props.onColumnHeaderLeave);
+  useGridApiOptionHandler(apiRef, 'columnOrderChange', props.onColumnOrderChange);
+  useGridApiOptionHandler(apiRef, 'cellClick', props.onCellClick);
+  useGridApiOptionHandler(apiRef, 'cellDoubleClick', props.onCellDoubleClick);
+  useGridApiOptionHandler(apiRef, 'cellKeyDown', props.onCellKeyDown);
+  useGridApiOptionHandler(apiRef, 'cellFocusOut', props.onCellFocusOut);
+  useGridApiOptionHandler(apiRef, 'preferencePanelClose', props.onPreferencePanelClose);
+  useGridApiOptionHandler(apiRef, 'preferencePanelOpen', props.onPreferencePanelOpen);
+  useGridApiOptionHandler(apiRef, 'menuOpen', props.onMenuOpen);
+  useGridApiOptionHandler(apiRef, 'menuClose', props.onMenuClose);
+  useGridApiOptionHandler(apiRef, 'rowDoubleClick', props.onRowDoubleClick);
+  useGridApiOptionHandler(apiRef, 'rowClick', props.onRowClick);
+  useGridApiOptionHandler(apiRef, 'componentError', props.onError);
+  useGridApiOptionHandler(apiRef, 'stateChange', props.onStateChange);
 }

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

@@ -1,7 +1,7 @@
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../../colDef';
 import { buildWarning } from '../../../../utils/warning';
 
-var serialiseCellValue = function serialiseCellValue(value, delimiterCharacter) {
+var serializeCellValue = function serializeCellValue(value, delimiterCharacter) {
   if (typeof value === 'string') {
     var formattedValue = value.replace(/"/g, '""'); // Make sure value containing delimiter or line break won't be split into multiple rows
 
@@ -19,7 +19,7 @@ var serialiseCellValue = function serialiseCellValue(value, delimiterCharacter)
 
 var objectFormattedValueWarning = 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.']);
 
-var serialiseRow = function serialiseRow(id, columns, getCellParams, delimiterCharacter) {
+var serializeRow = function serializeRow(id, columns, getCellParams, delimiterCharacter) {
   return columns.map(function (column) {
     var cellParams = getCellParams(id, column.field);
 
@@ -29,7 +29,7 @@ var serialiseRow = function serialiseRow(id, columns, getCellParams, delimiterCh
       }
     }
 
-    return serialiseCellValue(cellParams.formattedValue, delimiterCharacter);
+    return serializeCellValue(cellParams.formattedValue, delimiterCharacter);
   });
 };
 
@@ -40,7 +40,7 @@ export function buildCSV(options) {
       delimiterCharacter = options.delimiterCharacter,
       includeHeaders = options.includeHeaders;
   var CSVBody = rowIds.reduce(function (acc, id) {
-    return "".concat(acc).concat(serialiseRow(id, columns, getCellParams, delimiterCharacter).join(delimiterCharacter), "\r\n");
+    return "".concat(acc).concat(serializeRow(id, columns, getCellParams, delimiterCharacter).join(delimiterCharacter), "\r\n");
   }, '').trim();
 
   if (!includeHeaders) {
@@ -50,7 +50,7 @@ export function buildCSV(options) {
   var CSVHead = "".concat(columns.filter(function (column) {
     return column.field !== GRID_CHECKBOX_SELECTION_COL_DEF.field;
   }).map(function (column) {
-    return serialiseCellValue(column.headerName || column.field, delimiterCharacter);
+    return serializeCellValue(column.headerName || column.field, delimiterCharacter);
   }).join(delimiterCharacter), "\r\n");
   return "".concat(CSVHead).concat(CSVBody).trim();
 }

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

@@ -1,24 +1,12 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { gridFilteredSortedRowIdsSelector } from '../filter';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { exportAs } from '../../../utils/exportAs';
 import { buildCSV } from './serializers/csvSerializer';
-import { getColumnsToExport } from './utils';
-
-var defaultGetRowsToExport = function defaultGetRowsToExport(_ref) {
-  var apiRef = _ref.apiRef;
-  var filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
-  var selectedRows = apiRef.current.getSelectedRows();
-
-  if (selectedRows.size > 0) {
-    return filteredSortedRowIds.filter(function (id) {
-      return selectedRows.has(id);
-    });
-  }
-
-  return filteredSortedRowIds;
-};
+import { getColumnsToExport, defaultGetRowsToExport } from './utils';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
+import { GridCsvExportMenuItem } from '../../../components/toolbar/GridToolbarExport';
 /**
  * @requires useGridColumns (state)
  * @requires useGridFilter (state)
@@ -27,7 +15,7 @@ var defaultGetRowsToExport = function defaultGetRowsToExport(_ref) {
  * @requires useGridParamsApi (method)
  */
 
-
+import { jsx as _jsx } from "react/jsx-runtime";
 export var useGridCsvExport = function useGridCsvExport(apiRef) {
   var logger = useGridLogger(apiRef, 'useGridCsvExport');
   var getDataAsCsv = React.useCallback(function () {
@@ -64,4 +52,23 @@ export var useGridCsvExport = function useGridCsvExport(apiRef) {
     exportDataAsCsv: exportDataAsCsv
   };
   useGridApiMethod(apiRef, csvExportApi, 'GridCsvExportApi');
+  /**
+   * PRE-PROCESSING
+   */
+
+  var addExportMenuButtons = React.useCallback(function (initialValue, options) {
+    var _options$csvOptions;
+
+    if ((_options$csvOptions = options.csvOptions) != null && _options$csvOptions.disableToolbarButton) {
+      return initialValue;
+    }
+
+    return [].concat(_toConsumableArray(initialValue), [{
+      component: /*#__PURE__*/_jsx(GridCsvExportMenuItem, {
+        options: options.csvOptions
+      }),
+      componentName: 'csvExport'
+    }]);
+  }, []);
+  useGridRegisterPipeProcessor(apiRef, 'exportMenu', addExportMenuButtons);
 };

package/legacy/hooks/features/export/useGridPrintExport.js

@@ -12,6 +12,9 @@ import { gridClasses } from '../../../constants/gridClasses';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { getColumnsToExport } from './utils';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
+import { GridPrintExportMenuItem } from '../../../components/toolbar/GridToolbarExport';
+import { jsx as _jsx } from "react/jsx-runtime";
 
 /**
  * @requires useGridColumns (state)
@@ -262,4 +265,23 @@ export var useGridPrintExport = function useGridPrintExport(apiRef, props) {
     exportDataAsPrint: exportDataAsPrint
   };
   useGridApiMethod(apiRef, printExportApi, 'GridPrintExportApi');
+  /**
+   * PRE-PROCESSING
+   */
+
+  var addExportMenuButtons = React.useCallback(function (initialValue, options) {
+    var _options$printOptions;
+
+    if ((_options$printOptions = options.printOptions) != null && _options$printOptions.disableToolbarButton) {
+      return initialValue;
+    }
+
+    return [].concat(_toConsumableArray(initialValue), [{
+      component: /*#__PURE__*/_jsx(GridPrintExportMenuItem, {
+        options: options.printOptions
+      }),
+      componentName: 'printExport'
+    }]);
+  }, []);
+  useGridRegisterPipeProcessor(apiRef, 'exportMenu', addExportMenuButtons);
 };

package/legacy/hooks/features/export/utils.js

@@ -1,4 +1,5 @@
 import { gridColumnDefinitionsSelector, gridVisibleColumnDefinitionsSelector } from '../columns';
+import { gridFilteredSortedRowIdsSelector } from '../filter';
 export var getColumnsToExport = function getColumnsToExport(_ref) {
   var apiRef = _ref.apiRef,
       options = _ref.options;
@@ -18,4 +19,17 @@ export var getColumnsToExport = function getColumnsToExport(_ref) {
   return validColumns.filter(function (column) {
     return !column.disableExport;
   });
+};
+export var defaultGetRowsToExport = function defaultGetRowsToExport(_ref2) {
+  var apiRef = _ref2.apiRef;
+  var filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
+  var selectedRows = apiRef.current.getSelectedRows();
+
+  if (selectedRows.size > 0) {
+    return filteredSortedRowIds.filter(function (id) {
+      return selectedRows.has(id);
+    });
+  }
+
+  return filteredSortedRowIds;
 };

package/legacy/hooks/features/filter/gridFilterState.js

@@ -2,6 +2,8 @@ import { GridLinkOperator } from '../../../models/gridFilterItem';
 export var getDefaultGridFilterModel = function getDefaultGridFilterModel() {
   return {
     items: [],
-    linkOperator: GridLinkOperator.And
+    linkOperator: GridLinkOperator.And,
+    quickFilterValues: [],
+    quickFilterLogicOperator: GridLinkOperator.And
   };
 };