@mui/x-data-grid 5.14.0 → 5.15.2

package/modern/components/base/GridOverlays.js

@@ -37,8 +37,8 @@ function GridOverlayWrapper(props) {
       position: 'absolute',
       top: headerHeight,
       bottom: height === 'auto' ? 0 : undefined,
-      zIndex: 3,
-      // should be above pinned columns and detail panel
+      zIndex: 4,
+      // should be above pinned columns, pinned rows and detail panel
       pointerEvents: 'none'
     }
   }, props));

package/modern/components/cell/GridEditInputCell.js

@@ -37,8 +37,7 @@ const GridEditInputCellRoot = styled(InputBase, {
     height: '100%'
   }
 }));
-
-function GridEditInputCell(props) {
+const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const rootProps = useGridRootProps();
 
   const {
@@ -84,6 +83,7 @@ function GridEditInputCell(props) {
     }
   }, [hasFocus]);
   return /*#__PURE__*/_jsx(GridEditInputCellRoot, _extends({
+    ref: ref,
     inputRef: inputRef,
     className: classes.root,
     fullWidth: true,
@@ -92,8 +92,7 @@ function GridEditInputCell(props) {
     onChange: handleChange,
     endAdornment: isProcessingProps ? /*#__PURE__*/_jsx(GridLoadIcon, {}) : undefined
   }, other));
-}
-
+});
 process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -104,23 +103,23 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
    * GridApi that let you manipulate the grid.
    * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
    */
-  api: PropTypes.any.isRequired,
+  api: PropTypes.any,
 
   /**
    * The mode of the cell.
    */
-  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  cellMode: PropTypes.oneOf(['edit', 'view']),
 
   /**
    * The column of the row that the current cell belongs to.
    */
-  colDef: PropTypes.object.isRequired,
+  colDef: PropTypes.object,
   debounceMs: PropTypes.number,
 
   /**
    * The column field of the cell that triggered the event.
    */
-  field: PropTypes.string.isRequired,
+  field: PropTypes.string,
 
   /**
    * The cell value formatted with the column valueFormatter.
@@ -134,17 +133,17 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
    * @returns {any} The cell value.
    * @deprecated Use `params.row` to directly access the fields you want instead.
    */
-  getValue: PropTypes.func.isRequired,
+  getValue: PropTypes.func,
 
   /**
    * If true, the cell is the active element.
    */
-  hasFocus: PropTypes.bool.isRequired,
+  hasFocus: PropTypes.bool,
 
   /**
    * The grid row id.
    */
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
   /**
    * If true, the cell is editable.
@@ -164,17 +163,17 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object.isRequired,
+  row: PropTypes.object,
 
   /**
    * The node of the row that the current cell belongs to.
    */
-  rowNode: PropTypes.object.isRequired,
+  rowNode: PropTypes.object,
 
   /**
    * the tabIndex value.
    */
-  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  tabIndex: PropTypes.oneOf([-1, 0]),
 
   /**
    * The cell value, but if the column has valueGetter, use getValue.

package/modern/components/cell/GridEditSingleSelectCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "isProcessingProps", "error", "onValueChange"];
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "isProcessingProps", "error", "onValueChange", "initialOpen"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
@@ -24,6 +24,8 @@ const renderSingleSelectOptions = (option, OptionComponent) => {
 };
 
 function GridEditSingleSelectCell(props) {
+  const rootProps = useGridRootProps();
+
   const {
     id,
     value,
@@ -33,15 +35,15 @@ function GridEditSingleSelectCell(props) {
     colDef,
     hasFocus,
     error,
-    onValueChange
+    onValueChange,
+    initialOpen = rootProps.editMode === GridEditModes.Cell
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const apiRef = useGridApiContext();
   const ref = React.useRef();
   const inputRef = React.useRef();
-  const rootProps = useGridRootProps();
-  const [open, setOpen] = React.useState(rootProps.editMode === 'cell');
+  const [open, setOpen] = React.useState(initialOpen);
   const baseSelectProps = rootProps.componentsProps?.baseSelect || {};
   const isSelectNative = baseSelectProps.native ?? false;
   let valueOptionsFormatted;
@@ -212,6 +214,11 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
    */
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
 
+  /**
+   * If true, the select opens by default.
+   */
+  initialOpen: PropTypes.bool,
+
   /**
    * If true, the cell is editable.
    */

package/modern/components/columnSelection/GridCellCheckboxRenderer.js

@@ -81,6 +81,11 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
 
   const isSelectable = apiRef.current.isRowSelectable(id);
   const label = apiRef.current.getLocaleText(isChecked ? 'checkboxSelectionUnselectRow' : 'checkboxSelectionSelectRow');
+
+  if (rowNode.isPinned) {
+    return null;
+  }
+
   return /*#__PURE__*/_jsx(rootProps.components.BaseCheckbox, _extends({
     ref: handleRef,
     tabIndex: tabIndex,

package/modern/components/containers/GridRoot.js

@@ -12,7 +12,7 @@ import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { gridRowCountSelector } from '../../hooks/features/rows/gridRowsSelector';
+import { gridPinnedRowsCountSelector, gridRowCountSelector } from '../../hooks/features/rows/gridRowsSelector';
 import { gridDensityValueSelector } from '../../hooks/features/density/densitySelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 
@@ -43,6 +43,7 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   const densityValue = useGridSelector(apiRef, gridDensityValueSelector);
   const rootContainerRef = React.useRef(null);
   const handleRef = useForkRef(rootContainerRef, ref);
+  const pinnedRowsCount = useGridSelector(apiRef, gridPinnedRowsCountSelector);
   const ownerState = {
     density: densityValue,
     classes: rootProps.classes,
@@ -70,7 +71,8 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
     className: clsx(className, classes.root),
     role: "grid",
     "aria-colcount": visibleColumns.length,
-    "aria-rowcount": totalRowCount,
+    "aria-rowcount": totalRowCount + pinnedRowsCount + 1 // +1 for the header row
+    ,
     "aria-multiselectable": !rootProps.disableMultipleSelection,
     "aria-label": rootProps['aria-label'],
     "aria-labelledby": rootProps['aria-labelledby']

package/modern/components/toolbar/GridToolbarDensitySelector.js

@@ -57,11 +57,18 @@ export const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function
   }, [densityValue, rootProps]);
 
   const handleDensitySelectorOpen = event => {
-    setOpen(true);
+    setOpen(prevOpen => !prevOpen);
     onClick?.(event);
   };
 
-  const handleDensitySelectorClose = () => setOpen(false);
+  const handleDensitySelectorClickAway = event => {
+    if (buttonRef.current === event.target || // if user clicked on the icon
+    buttonRef.current?.contains(event.target)) {
+      return;
+    }
+
+    setOpen(false);
+  };
 
   const handleDensityUpdate = newDensity => {
     apiRef.current.setDensity(newDensity);
@@ -74,7 +81,7 @@ export const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function
     }
 
     if (isHideMenuKey(event.key)) {
-      handleDensitySelectorClose();
+      setOpen(false);
     }
   }; // Disable the button if the corresponding is disabled
 
@@ -107,7 +114,7 @@ export const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function
     })), /*#__PURE__*/_jsx(GridMenu, {
       open: open,
       target: buttonRef.current,
-      onClickAway: handleDensitySelectorClose,
+      onClickAway: handleDensitySelectorClickAway,
       position: "bottom-start",
       children: /*#__PURE__*/_jsx(MenuList, {
         id: densityMenuId,

package/modern/components/toolbar/GridToolbarExportContainer.js

@@ -27,7 +27,7 @@ export const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function
   const handleRef = useForkRef(ref, buttonRef);
 
   const handleMenuOpen = event => {
-    setOpen(true);
+    setOpen(prevOpen => !prevOpen);
     onClick?.(event);
   };
 
@@ -43,6 +43,15 @@ export const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function
     }
   };
 
+  const handleMenuClickAway = event => {
+    if (buttonRef.current === event.target || // if user clicked on the icon
+    buttonRef.current?.contains(event.target)) {
+      return;
+    }
+
+    setOpen(false);
+  };
+
   if (children == null) {
     return null;
   }
@@ -64,7 +73,7 @@ export const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function
     })), /*#__PURE__*/_jsx(GridMenu, {
       open: open,
       target: buttonRef.current,
-      onClickAway: handleMenuClose,
+      onClickAway: handleMenuClickAway,
       position: "bottom-start",
       children: /*#__PURE__*/_jsx(MenuList, {
         id: menuId,

package/modern/constants/envConstants.js

@@ -1,4 +1,4 @@
-import { localStorageAvailable } from '../utils/utils'; // A guide to feature toggling.
+// A guide to feature toggling (deprecated)
 //
 // The feature toggle is:
 // - independent from the NODE_ENV
@@ -15,13 +15,4 @@ import { localStorageAvailable } from '../utils/utils'; // A guide to feature to
 //
 // Developers (users) are discouraged to enable the experimental feature by setting the GRID_EXPERIMENTAL_ENABLED env.
 // Instead, prefer exposing experimental APIs, for instance, a prop or a new `unstable_` module.
-
-let experimentalEnabled = false;
-
-if (typeof process !== 'undefined' && process.env.GRID_EXPERIMENTAL_ENABLED !== undefined && localStorageAvailable() && window.localStorage.getItem('GRID_EXPERIMENTAL_ENABLED')) {
-  experimentalEnabled = window.localStorage.getItem('GRID_EXPERIMENTAL_ENABLED') === 'true';
-} else if (typeof process !== 'undefined') {
-  experimentalEnabled = process.env.GRID_EXPERIMENTAL_ENABLED === 'true';
-}
-
-export const GRID_EXPERIMENTAL_ENABLED = experimentalEnabled;
+export const GRID_EXPERIMENTAL_ENABLED = false;

package/modern/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { generateUtilityClasses, generateUtilityClass } from '@mui/material';
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/modern/constants/localeTextConstants.js

@@ -19,7 +19,7 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   toolbarFiltersTooltipShow: 'Show filters',
   toolbarFiltersTooltipActive: count => count !== 1 ? `${count} active filters` : `${count} active filter`,
   // Quick filter toolbar field
-  toolbarQuickFilterPlaceholder: 'Search...',
+  toolbarQuickFilterPlaceholder: 'Search…',
   toolbarQuickFilterLabel: 'Search',
   toolbarQuickFilterDeleteIconLabel: 'Clear',
   // Export selector toolbar button text

package/modern/hooks/features/dimensions/useGridDimensions.js

@@ -8,6 +8,7 @@ import { gridDensityHeaderHeightSelector, gridDensityRowHeightSelector } from '.
 import { useGridSelector } from '../../utils';
 import { getVisibleRows } from '../../utils/useGridVisibleRows';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
+import { calculatePinnedRowsHeight } from '../rows/gridRowsUtils';
 const isTestEnvironment = process.env.NODE_ENV === 'test';
 
 const hasScroll = ({
@@ -45,6 +46,7 @@ export function useGridDimensions(apiRef, props) {
   const updateGridDimensionsRef = React.useCallback(() => {
     const rootElement = apiRef.current.rootElementRef?.current;
     const columnsTotalWidth = gridColumnsTotalWidthSelector(apiRef);
+    const pinnedRowsHeight = calculatePinnedRowsHeight(apiRef);
 
     if (!rootDimensionsRef.current) {
       return;
@@ -90,7 +92,10 @@ export function useGridDimensions(apiRef, props) {
           width: Math.round(columnsTotalWidth),
           height: rowsMeta.currentPageTotalHeight
         },
-        container: viewportOuterSize,
+        container: {
+          width: viewportOuterSize.width,
+          height: viewportOuterSize.height - pinnedRowsHeight.top - pinnedRowsHeight.bottom
+        },
         scrollBarSize
       });
       hasScrollY = scrollInformation.hasScrollY;

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

@@ -15,6 +15,7 @@ import { GridCellEditStartReasons, GridCellEditStopReasons } from '../../../mode
 const missingOnProcessRowUpdateErrorWarning = buildWarning(['MUI: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, e.g. `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see http://mui.com/components/data-grid/editing/#persistence.'], 'error');
 export const useGridCellEditing = (apiRef, props) => {
   const [cellModesModel, setCellModesModel] = React.useState({});
+  const cellModesModelRef = React.useRef(cellModesModel);
   const prevCellModesModel = React.useRef({});
   const {
     processRowUpdate,
@@ -62,6 +63,10 @@ export const useGridCellEditing = (apiRef, props) => {
       return;
     }
 
+    if (apiRef.current.getCellMode(params.id, params.field) === GridCellModes.View) {
+      return;
+    }
+
     const newParams = _extends({}, params, {
       reason: GridCellEditStopReasons.cellFocusOut
     });
@@ -97,15 +102,14 @@ export const useGridCellEditing = (apiRef, props) => {
     } else if (params.isEditable) {
       let reason;
 
-      if (isPrintableKey(event.key)) {
-        if (event.ctrlKey && event.key !== 'v' || event.metaKey && event.key !== 'v' || event.altKey) {
-          return;
-        }
-
+      if (isPrintableKey(event)) {
+        reason = GridCellEditStartReasons.printableKeyDown;
+      } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
         reason = GridCellEditStartReasons.printableKeyDown;
       } else if (event.key === 'Enter') {
         reason = GridCellEditStartReasons.enterKeyDown;
-      } else if (event.key === 'Delete') {
+      } else if (event.key === 'Delete' || event.key === 'Backspace') {
+        // Delete on Windows, Backspace on macOS
         reason = GridCellEditStartReasons.deleteKeyDown;
       }
 
@@ -141,6 +145,7 @@ export const useGridCellEditing = (apiRef, props) => {
       field,
       reason
     } = params;
+    apiRef.current.unstable_runPendingEditCellValueMutation(id, field);
     let cellToFocusAfter;
 
     if (reason === GridCellEditStopReasons.enterKeyDown) {
@@ -154,7 +159,7 @@ export const useGridCellEditing = (apiRef, props) => {
     let ignoreModifications = reason === 'escapeKeyDown';
     const editingState = gridEditRowsStateSelector(apiRef.current.state);
 
-    if (editingState[id][field].isProcessingProps) {
+    if (editingState[id][field].isProcessingProps && !props.disableIgnoreModificationsIfProcessingProps) {
       // The user wants to stop editing the cell but we can't wait for the props to be processed.
       // In this case, discard the modifications.
       ignoreModifications = true;
@@ -166,7 +171,7 @@ export const useGridCellEditing = (apiRef, props) => {
       ignoreModifications,
       cellToFocusAfter
     });
-  }, [apiRef]);
+  }, [apiRef, props.disableIgnoreModificationsIfProcessingProps]);
   useGridApiEventHandler(apiRef, 'cellDoubleClick', runIfEditModeIsCell(handleCellDoubleClick));
   useGridApiEventHandler(apiRef, 'cellFocusOut', runIfEditModeIsCell(handleCellFocusOut));
   useGridApiEventHandler(apiRef, 'cellKeyDown', runIfEditModeIsCell(handleCellKeyDown));
@@ -194,18 +199,21 @@ export const useGridCellEditing = (apiRef, props) => {
     }
 
     setCellModesModel(newModel);
+    cellModesModelRef.current = newModel;
     apiRef.current.publishEvent('cellModesModelChange', newModel);
   }, [apiRef, onCellModesModelChange, props.cellModesModel, signature]);
   const updateFieldInCellModesModel = React.useCallback((id, field, newProps) => {
-    const newModel = _extends({}, cellModesModel);
+    // We use the ref because it always contain the up-to-date value, different from the state
+    // that needs a rerender to reflect the new value
+    const newModel = _extends({}, cellModesModelRef.current);
 
     if (newProps !== null) {
       newModel[id] = _extends({}, newModel[id], {
         [field]: _extends({}, newProps)
       });
     } else {
-      const _cellModesModel$id = cellModesModel[id],
-            otherFields = _objectWithoutPropertiesLoose(_cellModesModel$id, [field].map(_toPropertyKey)); // Ensure that we have a new object, not a reference
+      const _newModel$id = newModel[id],
+            otherFields = _objectWithoutPropertiesLoose(_newModel$id, [field].map(_toPropertyKey)); // Ensure that we have a new object, not a reference
 
 
       newModel[id] = otherFields;
@@ -216,7 +224,7 @@ export const useGridCellEditing = (apiRef, props) => {
     }
 
     updateCellModesModel(newModel);
-  }, [cellModesModel, updateCellModesModel]);
+  }, [updateCellModesModel]);
   const updateOrDeleteFieldState = React.useCallback((id, field, newProps) => {
     apiRef.current.setState(state => {
       const newEditingState = _extends({}, state.editRows);
@@ -289,12 +297,12 @@ export const useGridCellEditing = (apiRef, props) => {
     apiRef.current.unstable_runPendingEditCellValueMutation(id, field);
 
     const finishCellEditMode = () => {
+      updateOrDeleteFieldState(id, field, null);
+      updateFieldInCellModesModel(id, field, null);
+
       if (cellToFocusAfter !== 'none') {
         apiRef.current.unstable_moveFocusToRelativeCell(id, field, cellToFocusAfter);
       }
-
-      updateOrDeleteFieldState(id, field, null);
-      updateFieldInCellModesModel(id, field, null);
     };
 
     if (ignoreModifications) {
@@ -394,7 +402,7 @@ export const useGridCellEditing = (apiRef, props) => {
     newProps.value = column.preProcessEditCellProps ? editingState[id][field].value : parsedValue;
     updateOrDeleteFieldState(id, field, newProps);
     editingState = gridEditRowsStateSelector(apiRef.current.state);
-    return !editingState[id][field].error;
+    return !editingState[id]?.[field]?.error;
   }, [apiRef, throwIfNotEditable, throwIfNotInMode, updateOrDeleteFieldState]);
   const getRowWithUpdatedValuesFromCellEditing = React.useCallback((id, field) => {
     const column = apiRef.current.getColumn(field);

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

@@ -195,7 +195,7 @@ export const useCellEditing = (apiRef, props) => {
     const isEditMode = cellMode === GridCellModes.Edit;
     const isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey;
 
-    if (!isEditMode && isCellEnterEditModeKeys(event.key) && !isModifierKeyPressed && !(event.key === ' ' && event.shiftKey)) {
+    if (!isEditMode && isCellEnterEditModeKeys(event) && !isModifierKeyPressed && !(event.key === ' ' && event.shiftKey)) {
       apiRef.current.publishEvent('cellEditStart', params, event);
     }
 
@@ -265,7 +265,7 @@ export const useCellEditing = (apiRef, props) => {
 
     apiRef.current.setCellMode(params.id, params.field, GridCellModes.Edit);
 
-    if (isKeyboardEvent(event) && isPrintableKey(event.key)) {
+    if (isKeyboardEvent(event) && isPrintableKey(event)) {
       apiRef.current.unstable_setEditCellProps({
         id: params.id,
         field: params.field,

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

@@ -31,6 +31,10 @@ export const useGridEditing = (apiRef, props) => {
       return isCellEditableProp(params);
     }
 
+    if (params.rowNode.isPinned) {
+      return false;
+    }
+
     return true;
   }, [isCellEditableProp]);
 

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

@@ -28,7 +28,7 @@ export function useGridEditing(apiRef, props) {
     stateSelector: gridEditRowsStateSelector,
     changeEvent: 'editRowsModelChange'
   });
-  const isCellEditable = React.useCallback(params => !params.rowNode.isAutoGenerated && !!params.colDef.editable && !!params.colDef.renderEditCell && (!props.isCellEditable || props.isCellEditable(params)), // eslint-disable-next-line react-hooks/exhaustive-deps
+  const isCellEditable = React.useCallback(params => !params.rowNode.isAutoGenerated && !params.rowNode.isPinned && !!params.colDef.editable && !!params.colDef.renderEditCell && (!props.isCellEditable || props.isCellEditable(params)), // eslint-disable-next-line react-hooks/exhaustive-deps
   [props.isCellEditable]);
 
   const maybeDebounce = (id, field, debounceMs, callback) => {

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

@@ -16,6 +16,7 @@ import { GridRowEditStopReasons, GridRowEditStartReasons } from '../../../models
 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 rowModesModelRef = React.useRef(rowModesModel);
   const prevRowModesModel = React.useRef({});
   const focusTimeout = React.useRef(null);
   const nextFocusedCell = React.useRef(null);
@@ -88,6 +89,11 @@ export const useGridRowEditing = (apiRef, props) => {
         // The row might have been deleted during the click
         if (!apiRef.current.getRow(params.id)) {
           return;
+        } // The row may already changed its mode
+
+
+        if (apiRef.current.getRowMode(params.id) === GridRowModes.View) {
+          return;
         }
 
         const rowParams = apiRef.current.getRowParams(params.id);
@@ -151,15 +157,14 @@ export const useGridRowEditing = (apiRef, props) => {
     } else if (params.isEditable) {
       let reason;
 
-      if (isPrintableKey(event.key)) {
-        if (event.ctrlKey && event.key !== 'v' || event.metaKey && event.key !== 'v' || event.altKey) {
-          return;
-        }
-
+      if (isPrintableKey(event)) {
+        reason = GridRowEditStartReasons.printableKeyDown;
+      } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
         reason = GridRowEditStartReasons.printableKeyDown;
       } else if (event.key === 'Enter') {
         reason = GridRowEditStartReasons.enterKeyDown;
-      } else if (event.key === 'Delete') {
+      } else if (event.key === 'Delete' || event.key === 'Backspace') {
+        // Delete on Windows, Backspace on macOS
         reason = GridRowEditStartReasons.deleteKeyDown;
       }
 
@@ -212,7 +217,7 @@ export const useGridRowEditing = (apiRef, props) => {
     let ignoreModifications = reason === 'escapeKeyDown';
     const editingState = gridEditRowsStateSelector(apiRef.current.state);
 
-    if (!ignoreModifications) {
+    if (!ignoreModifications && !props.disableIgnoreModificationsIfProcessingProps) {
       // The user wants to stop editing the cell but we can't wait for the props to be processed.
       // In this case, discard the modifications if any field is processing its props.
       ignoreModifications = Object.values(editingState[id]).some(fieldProps => {
@@ -226,7 +231,7 @@ export const useGridRowEditing = (apiRef, props) => {
       field,
       cellToFocusAfter
     });
-  }, [apiRef]);
+  }, [apiRef, props.disableIgnoreModificationsIfProcessingProps]);
   useGridApiEventHandler(apiRef, 'cellDoubleClick', runIfEditModeIsRow(handleCellDoubleClick));
   useGridApiEventHandler(apiRef, 'cellFocusIn', runIfEditModeIsRow(handleCellFocusIn));
   useGridApiEventHandler(apiRef, 'cellFocusOut', runIfEditModeIsRow(handleCellFocusOut));
@@ -259,10 +264,11 @@ export const useGridRowEditing = (apiRef, props) => {
     }
 
     setRowModesModel(newModel);
+    rowModesModelRef.current = newModel;
     apiRef.current.publishEvent('rowModesModelChange', newModel);
   }, [apiRef, onRowModesModelChange, props.rowModesModel, signature]);
   const updateRowInRowModesModel = React.useCallback((id, newProps) => {
-    const newModel = _extends({}, rowModesModel);
+    const newModel = _extends({}, rowModesModelRef.current);
 
     if (newProps !== null) {
       newModel[id] = _extends({}, newProps);
@@ -271,7 +277,7 @@ export const useGridRowEditing = (apiRef, props) => {
     }
 
     updateRowModesModel(newModel);
-  }, [rowModesModel, updateRowModesModel]);
+  }, [updateRowModesModel]);
   const updateOrDeleteRowState = React.useCallback((id, newProps) => {
     apiRef.current.setState(state => {
       const newEditingState = _extends({}, state.editRows);

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

@@ -1,6 +1,6 @@
 import { gridColumnDefinitionsSelector, gridVisibleColumnDefinitionsSelector } from '../columns';
 import { gridFilteredSortedRowIdsSelector } from '../filter';
-import { gridRowTreeSelector } from '../rows/gridRowsSelector';
+import { gridPinnedRowsSelector, gridRowTreeSelector } from '../rows/gridRowsSelector';
 export const getColumnsToExport = ({
   apiRef,
   options
@@ -21,6 +21,11 @@ export const defaultGetRowsToExport = ({
   const rowTree = gridRowTreeSelector(apiRef);
   const selectedRows = apiRef.current.getSelectedRows();
   const bodyRows = filteredSortedRowIds.filter(id => (rowTree[id].position ?? 'body') === 'body');
+  const pinnedRows = gridPinnedRowsSelector(apiRef);
+  const topPinnedRowsIds = pinnedRows?.top?.map(row => row.id) || [];
+  const bottomPinnedRowsIds = pinnedRows?.bottom?.map(row => row.id) || [];
+  bodyRows.unshift(...topPinnedRowsIds);
+  bodyRows.push(...bottomPinnedRowsIds);
 
   if (selectedRows.size > 0) {
     return bodyRows.filter(id => selectedRows.has(id));