@mui/x-data-grid 5.8.0 → 5.11.0

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

@@ -1,23 +1,30 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+const _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';
 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 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) => {
@@ -54,7 +61,7 @@ export const useGridRowEditing = (apiRef, props) => {
       reason: GridRowEditStartReasons.cellDoubleClick
     });
 
-    apiRef.current.publishEvent(GridEvents.rowEditStart, newParams, event);
+    apiRef.current.publishEvent('rowEditStart', newParams, event);
   }, [apiRef]);
   const handleCellFocusIn = React.useCallback(params => {
     nextFocusedCell.current = params;
@@ -78,6 +85,11 @@ export const useGridRowEditing = (apiRef, props) => {
       focusTimeout.current = null;
 
       if (nextFocusedCell.current?.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 = _extends({}, rowParams, {
@@ -85,7 +97,7 @@ export const useGridRowEditing = (apiRef, props) => {
           reason: GridRowEditStopReasons.rowFocusOut
         });
 
-        apiRef.current.publishEvent(GridEvents.rowEditStop, newParams, event);
+        apiRef.current.publishEvent('rowEditStop', newParams, event);
       }
     });
   }, [apiRef]);
@@ -128,7 +140,7 @@ export const useGridRowEditing = (apiRef, props) => {
           field: params.field
         });
 
-        apiRef.current.publishEvent(GridEvents.rowEditStop, newParams, event);
+        apiRef.current.publishEvent('rowEditStop', newParams, event);
       }
     } else if (params.isEditable) {
       let reason;
@@ -153,28 +165,26 @@ export const useGridRowEditing = (apiRef, props) => {
           reason
         });
 
-        apiRef.current.publishEvent(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 === GridRowEditStartReasons.deleteKeyDown || reason === GridRowEditStartReasons.printableKeyDown) {
-      apiRef.current.setEditCellValue({
-        id,
-        field: field,
-        value: ''
-      }, event);
+      startRowEditModeParams.deleteValue = !!field;
     }
+
+    apiRef.current.startRowEditMode(startRowEditModeParams);
   }, [apiRef]);
   const handleRowEditStop = React.useCallback(params => {
     const {
@@ -211,14 +221,14 @@ export const useGridRowEditing = (apiRef, props) => {
       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);
   const getRowMode = React.useCallback(id => {
     if (props.editMode === GridEditModes.Cell) {
       return GridRowModes.View;
@@ -228,6 +238,34 @@ export const useGridRowEditing = (apiRef, props) => {
     const isEditing = editingState[id] && Object.keys(editingState[id]).length > 0;
     return isEditing ? GridRowModes.Edit : GridRowModes.View;
   }, [apiRef, props.editMode]);
+  const updateRowModesModel = React.useCallback(newModel => {
+    const isNewModelDifferentFromProp = newModel !== props.rowModesModel;
+
+    if (onRowModesModelChange && isNewModelDifferentFromProp) {
+      const 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]);
+  const updateRowInRowModesModel = React.useCallback((id, newProps) => {
+    const newModel = _extends({}, rowModesModel);
+
+    if (newProps !== null) {
+      newModel[id] = _extends({}, newProps);
+    } else {
+      delete newModel[id];
+    }
+
+    updateRowModesModel(newModel);
+  }, [rowModesModel, updateRowModesModel]);
   const updateOrDeleteRowState = React.useCallback((id, newProps) => {
     apiRef.current.setState(state => {
       const newEditingState = _extends({}, state.editRows);
@@ -267,16 +305,22 @@ export const useGridRowEditing = (apiRef, props) => {
     apiRef.current.forceUpdate();
   }, [apiRef]);
   const startRowEditMode = React.useCallback(params => {
+    const {
+      id
+    } = params,
+          other = _objectWithoutPropertiesLoose(params, _excluded);
+
+    throwIfNotInMode(id, GridRowModes.View);
+    updateRowInRowModesModel(id, _extends({
+      mode: GridRowModes.Edit
+    }, other));
+  }, [throwIfNotInMode, updateRowInRowModesModel]);
+  const updateStateToStartRowEditMode = React.useCallback(params => {
     const {
       id,
-      fieldToFocus
+      fieldToFocus,
+      deleteValue
     } = params;
-    throwIfNotInMode(id, GridRowModes.View);
-
-    if (apiRef.current.getRowMode(id) === GridRowModes.Edit) {
-      throw new Error(`MUI: The cell with id=${id} is already in edit mode.`);
-    }
-
     const columnFields = gridColumnFieldsSelector(apiRef);
     const newProps = columnFields.reduce((acc, field) => {
       const cellParams = apiRef.current.getCellParams(id, field);
@@ -285,8 +329,9 @@ export 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
       };
@@ -297,26 +342,38 @@ export 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 = _objectWithoutPropertiesLoose(params, _excluded2);
+
+    throwIfNotInMode(id, GridRowModes.Edit);
+    updateRowInRowModesModel(id, _extends({
+      mode: GridRowModes.View
+    }, other));
+  }, [throwIfNotInMode, updateRowInRowModesModel]);
+  const updateStateToStopRowEditMode = React.useCallback(params => {
     const {
       id,
       ignoreModifications,
       field: focusedField,
       cellToFocusAfter = 'none'
     } = params;
-    throwIfNotInMode(id, 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;
     }
 
@@ -334,20 +391,7 @@ export const useGridRowEditing = (apiRef, props) => {
       return;
     }
 
-    let rowUpdate = _extends({}, 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 => {
@@ -361,18 +405,16 @@ export 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,
@@ -489,11 +531,55 @@ export const useGridRowEditing = (apiRef, props) => {
       });
     });
   }, [apiRef, throwIfNotEditable, updateOrDeleteFieldState]);
+  const getRowWithUpdatedValuesFromRowEditing = React.useCallback(id => {
+    const editingState = gridEditRowsStateSelector(apiRef.current.state);
+    const row = apiRef.current.getRow(id);
+
+    let rowUpdate = _extends({}, 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
   };
   useGridApiMethod(apiRef, editingApi, 'EditingApi');
+  React.useEffect(() => {
+    if (rowModesModelProp) {
+      updateRowModesModel(rowModesModelProp);
+    }
+  }, [rowModesModelProp, updateRowModesModel]);
+  React.useEffect(() => {
+    const idToIdLookup = gridRowsIdToIdLookupSelector(apiRef);
+    Object.entries(rowModesModel).forEach(([id, params]) => {
+      const prevMode = prevRowModesModel.current[id]?.mode || GridRowModes.View;
+      const originalId = 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));
+      }
+    });
+    prevRowModesModel.current = rowModesModel;
+  }, [apiRef, rowModesModel, updateStateToStartRowEditMode, updateStateToStopRowEditMode]);
 };

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

@@ -6,7 +6,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 const useGridRowEditing = (apiRef, props) => {
@@ -112,12 +111,12 @@ export const 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.experimentalFeatures?.preventCommitWhileValidating]);
   const setRowEditingEditCellValue = React.useCallback(params => {
@@ -187,7 +186,7 @@ export const useGridRowEditing = (apiRef, props) => {
 
     if (isEditMode) {
       if (event.key === 'Enter') {
-        // 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);
 
@@ -195,12 +194,12 @@ export const useGridRowEditing = (apiRef, props) => {
           return;
         }
 
-        apiRef.current.publishEvent(GridEvents.rowEditStop, rowParams, event);
+        apiRef.current.publishEvent('rowEditStop', rowParams, event);
       } else if (event.key === 'Escape') {
-        apiRef.current.publishEvent(GridEvents.rowEditStop, rowParams, event);
+        apiRef.current.publishEvent('rowEditStop', rowParams, event);
       }
     } else if (event.key === 'Enter') {
-      apiRef.current.publishEvent(GridEvents.rowEditStart, rowParams, event);
+      apiRef.current.publishEvent('rowEditStart', rowParams, event);
     }
   }, [apiRef, props.experimentalFeatures?.preventCommitWhileValidating]);
   const handleCellDoubleClick = React.useCallback((params, event) => {
@@ -209,7 +208,7 @@ export const useGridRowEditing = (apiRef, props) => {
     }
 
     const rowParams = apiRef.current.getRowParams(params.id);
-    apiRef.current.publishEvent(GridEvents.rowEditStart, rowParams, event);
+    apiRef.current.publishEvent('rowEditStart', rowParams, event);
   }, [apiRef]);
   const handleEditCellPropsChange = React.useCallback(params => {
     const row = apiRef.current.getRow(params.id);
@@ -242,7 +241,7 @@ export const 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]);
   const handleRowEditCommit = React.useCallback(id => {
@@ -288,7 +287,7 @@ export const useGridRowEditing = (apiRef, props) => {
       if (nextFocusedCell.current?.id !== params.id) {
         await apiRef.current.commitRowChange(params.id, event);
         const rowParams = apiRef.current.getRowParams(params.id);
-        apiRef.current.publishEvent(GridEvents.rowEditStop, rowParams, event);
+        apiRef.current.publishEvent('rowEditStop', rowParams, event);
       }
     });
   };
@@ -306,16 +305,16 @@ export const useGridRowEditing = (apiRef, props) => {
     const 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/modern/hooks/features/events/useGridEvents.js

@@ -1,4 +1,3 @@
-import { GridEvents } from '../../../models/events';
 import { useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
 
 /**
@@ -6,21 +5,21 @@ 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, 'rowDoubleClick', props.onRowDoubleClick);
+  useGridApiOptionHandler(apiRef, 'rowClick', props.onRowClick);
+  useGridApiOptionHandler(apiRef, 'componentError', props.onError);
+  useGridApiOptionHandler(apiRef, 'stateChange', props.onStateChange);
 }

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

@@ -1,7 +1,7 @@
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../../colDef';
 import { buildWarning } from '../../../../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
 
@@ -17,7 +17,7 @@ const serialiseCellValue = (value, delimiterCharacter) => {
 
 const 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.']);
 
-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') {
@@ -26,7 +26,7 @@ const serialiseRow = (id, columns, getCellParams, delimiterCharacter) => columns
     }
   }
 
-  return serialiseCellValue(cellParams.formattedValue, delimiterCharacter);
+  return serializeCellValue(cellParams.formattedValue, delimiterCharacter);
 });
 
 export function buildCSV(options) {
@@ -37,12 +37,12 @@ export 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 !== 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 !== GRID_CHECKBOX_SELECTION_COL_DEF.field).map(column => serializeCellValue(column.headerName || column.field, delimiterCharacter)).join(delimiterCharacter)}\r\n`;
   return `${CSVHead}${CSVBody}`.trim();
 }

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

@@ -1,23 +1,11 @@
 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';
-
-const defaultGetRowsToExport = ({
-  apiRef
-}) => {
-  const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
-  const selectedRows = apiRef.current.getSelectedRows();
-
-  if (selectedRows.size > 0) {
-    return filteredSortedRowIds.filter(id => 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)
@@ -26,7 +14,7 @@ const defaultGetRowsToExport = ({
  * @requires useGridParamsApi (method)
  */
 
-
+import { jsx as _jsx } from "react/jsx-runtime";
 export const useGridCsvExport = apiRef => {
   const logger = useGridLogger(apiRef, 'useGridCsvExport');
   const getDataAsCsv = React.useCallback((options = {}) => {
@@ -60,4 +48,21 @@ export const useGridCsvExport = apiRef => {
     exportDataAsCsv
   };
   useGridApiMethod(apiRef, csvExportApi, 'GridCsvExportApi');
+  /**
+   * PRE-PROCESSING
+   */
+
+  const addExportMenuButtons = React.useCallback((initialValue, options) => {
+    if (options.csvOptions?.disableToolbarButton) {
+      return initialValue;
+    }
+
+    return [...initialValue, {
+      component: /*#__PURE__*/_jsx(GridCsvExportMenuItem, {
+        options: options.csvOptions
+      }),
+      componentName: 'csvExport'
+    }];
+  }, []);
+  useGridRegisterPipeProcessor(apiRef, 'exportMenu', addExportMenuButtons);
 };

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

@@ -9,6 +9,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)
@@ -216,4 +219,21 @@ export const useGridPrintExport = (apiRef, props) => {
     exportDataAsPrint
   };
   useGridApiMethod(apiRef, printExportApi, 'GridPrintExportApi');
+  /**
+   * PRE-PROCESSING
+   */
+
+  const addExportMenuButtons = React.useCallback((initialValue, options) => {
+    if (options.printOptions?.disableToolbarButton) {
+      return initialValue;
+    }
+
+    return [...initialValue, {
+      component: /*#__PURE__*/_jsx(GridPrintExportMenuItem, {
+        options: options.printOptions
+      }),
+      componentName: 'printExport'
+    }];
+  }, []);
+  useGridRegisterPipeProcessor(apiRef, 'exportMenu', addExportMenuButtons);
 };

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

@@ -1,4 +1,5 @@
 import { gridColumnDefinitionsSelector, gridVisibleColumnDefinitionsSelector } from '../columns';
+import { gridFilteredSortedRowIdsSelector } from '../filter';
 export const getColumnsToExport = ({
   apiRef,
   options
@@ -11,4 +12,16 @@ export const getColumnsToExport = ({
 
   const validColumns = options.allColumns ? columns : gridVisibleColumnDefinitionsSelector(apiRef);
   return validColumns.filter(column => !column.disableExport);
+};
+export const defaultGetRowsToExport = ({
+  apiRef
+}) => {
+  const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
+  const selectedRows = apiRef.current.getSelectedRows();
+
+  if (selectedRows.size > 0) {
+    return filteredSortedRowIds.filter(id => selectedRows.has(id));
+  }
+
+  return filteredSortedRowIds;
 };

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

@@ -1,5 +1,7 @@
 import { GridLinkOperator } from '../../../models/gridFilterItem';
 export const getDefaultGridFilterModel = () => ({
   items: [],
-  linkOperator: GridLinkOperator.And
+  linkOperator: GridLinkOperator.And,
+  quickFilterValues: [],
+  quickFilterLogicOperator: GridLinkOperator.And
 });