@mui/x-data-grid 5.16.0 → 5.17.2

package/legacy/components/columnSelection/GridCellCheckboxRenderer.js

@@ -190,7 +190,8 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
 
   /**
-   * The cell value, but if the column has valueGetter, use getValue.
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
    */
   value: PropTypes.any
 } : void 0;

package/legacy/components/containers/GridRootStyles.js

@@ -7,12 +7,12 @@ export var GridRootStyles = styled('div', {
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
     return [_defineProperty({}, "&.".concat(gridClasses.autoHeight), styles.autoHeight), _defineProperty({}, "&.".concat(gridClasses.aggregationColumnHeader), styles.aggregationColumnHeader), _defineProperty({}, "&.".concat(gridClasses['aggregationColumnHeader--alignLeft']), styles['aggregationColumnHeader--alignLeft']), _defineProperty({}, "&.".concat(gridClasses['aggregationColumnHeader--alignCenter']), styles['aggregationColumnHeader--alignCenter']), _defineProperty({}, "&.".concat(gridClasses['aggregationColumnHeader--alignRight']), styles['aggregationColumnHeader--alignRight']), _defineProperty({}, "&.".concat(gridClasses.aggregationColumnHeaderLabel), styles.aggregationColumnHeaderLabel), _defineProperty({}, "& .".concat(gridClasses.editBooleanCell), styles.editBooleanCell), _defineProperty({}, "& .".concat(gridClasses['cell--editing']), styles['cell--editing']), _defineProperty({}, "& .".concat(gridClasses['cell--textCenter']), styles['cell--textCenter']), _defineProperty({}, "& .".concat(gridClasses['cell--textLeft']), styles['cell--textLeft']), _defineProperty({}, "& .".concat(gridClasses['cell--textRight']), styles['cell--textRight']), // TODO v6: Remove
-    _defineProperty({}, "& .".concat(gridClasses['cell--withRenderer']), styles['cell--withRenderer']), _defineProperty({}, "& .".concat(gridClasses.cell), styles.cell), _defineProperty({}, "& .".concat(gridClasses.cellContent), styles.cellContent), _defineProperty({}, "& .".concat(gridClasses.cellCheckbox), styles.cellCheckbox), _defineProperty({}, "& .".concat(gridClasses.checkboxInput), styles.checkboxInput), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignCenter']), styles['columnHeader--alignCenter']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignLeft']), styles['columnHeader--alignLeft']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignRight']), styles['columnHeader--alignRight']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--dragging']), styles['columnHeader--dragging']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--moving']), styles['columnHeader--moving']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--numeric']), styles['columnHeader--numeric']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sortable']), styles['columnHeader--sortable']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sorted']), styles['columnHeader--sorted']), _defineProperty({}, "& .".concat(gridClasses.columnHeader), styles.columnHeader), _defineProperty({}, "& .".concat(gridClasses.columnHeaderCheckbox), styles.columnHeaderCheckbox), _defineProperty({}, "& .".concat(gridClasses.columnHeaderDraggableContainer), styles.columnHeaderDraggableContainer), _defineProperty({}, "& .".concat(gridClasses.columnHeaderTitleContainer), styles.columnHeaderTitleContainer), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizable']), styles['columnSeparator--resizable']), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizing']), styles['columnSeparator--resizing']), _defineProperty({}, "& .".concat(gridClasses.columnSeparator), styles.columnSeparator), _defineProperty({}, "& .".concat(gridClasses.filterIcon), styles.filterIcon), _defineProperty({}, "& .".concat(gridClasses.iconSeparator), styles.iconSeparator), _defineProperty({}, "& .".concat(gridClasses.menuIcon), styles.menuIcon), _defineProperty({}, "& .".concat(gridClasses.menuIconButton), styles.menuIconButton), _defineProperty({}, "& .".concat(gridClasses.menuOpen), styles.menuOpen), _defineProperty({}, "& .".concat(gridClasses.menuList), styles.menuList), _defineProperty({}, "& .".concat(gridClasses['row--editable']), styles['row--editable']), _defineProperty({}, "& .".concat(gridClasses['row--editing']), styles['row--editing']), _defineProperty({}, "& .".concat(gridClasses['row--dragging']), styles['row--dragging']), _defineProperty({}, "& .".concat(gridClasses.row), styles.row), _defineProperty({}, "& .".concat(gridClasses.rowReorderCellPlaceholder), styles.rowReorderCellPlaceholder), _defineProperty({}, "& .".concat(gridClasses.rowReorderCell), styles.rowReorderCell), _defineProperty({}, "& .".concat(gridClasses['rowReorderCell--draggable']), styles['rowReorderCell--draggable']), _defineProperty({}, "& .".concat(gridClasses.sortIcon), styles.sortIcon), _defineProperty({}, "& .".concat(gridClasses.withBorder), styles.withBorder), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCell), styles.treeDataGroupingCell), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCellToggle), styles.treeDataGroupingCellToggle), _defineProperty({}, "& .".concat(gridClasses.detailPanelToggleCell), styles.detailPanelToggleCell), _defineProperty({}, "& .".concat(gridClasses['detailPanelToggleCell--expanded']), styles['detailPanelToggleCell--expanded']), styles.root];
+    _defineProperty({}, "& .".concat(gridClasses['cell--withRenderer']), styles['cell--withRenderer']), _defineProperty({}, "& .".concat(gridClasses.cell), styles.cell), _defineProperty({}, "& .".concat(gridClasses.cellContent), styles.cellContent), _defineProperty({}, "& .".concat(gridClasses.cellCheckbox), styles.cellCheckbox), _defineProperty({}, "& .".concat(gridClasses.cellSkeleton), styles.cellSkeleton), _defineProperty({}, "& .".concat(gridClasses.checkboxInput), styles.checkboxInput), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignCenter']), styles['columnHeader--alignCenter']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignLeft']), styles['columnHeader--alignLeft']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignRight']), styles['columnHeader--alignRight']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--dragging']), styles['columnHeader--dragging']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--moving']), styles['columnHeader--moving']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--numeric']), styles['columnHeader--numeric']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sortable']), styles['columnHeader--sortable']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sorted']), styles['columnHeader--sorted']), _defineProperty({}, "& .".concat(gridClasses.columnHeader), styles.columnHeader), _defineProperty({}, "& .".concat(gridClasses.columnHeaderCheckbox), styles.columnHeaderCheckbox), _defineProperty({}, "& .".concat(gridClasses.columnHeaderDraggableContainer), styles.columnHeaderDraggableContainer), _defineProperty({}, "& .".concat(gridClasses.columnHeaderTitleContainer), styles.columnHeaderTitleContainer), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizable']), styles['columnSeparator--resizable']), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizing']), styles['columnSeparator--resizing']), _defineProperty({}, "& .".concat(gridClasses.columnSeparator), styles.columnSeparator), _defineProperty({}, "& .".concat(gridClasses.filterIcon), styles.filterIcon), _defineProperty({}, "& .".concat(gridClasses.iconSeparator), styles.iconSeparator), _defineProperty({}, "& .".concat(gridClasses.menuIcon), styles.menuIcon), _defineProperty({}, "& .".concat(gridClasses.menuIconButton), styles.menuIconButton), _defineProperty({}, "& .".concat(gridClasses.menuOpen), styles.menuOpen), _defineProperty({}, "& .".concat(gridClasses.menuList), styles.menuList), _defineProperty({}, "& .".concat(gridClasses['row--editable']), styles['row--editable']), _defineProperty({}, "& .".concat(gridClasses['row--editing']), styles['row--editing']), _defineProperty({}, "& .".concat(gridClasses['row--dragging']), styles['row--dragging']), _defineProperty({}, "& .".concat(gridClasses.row), styles.row), _defineProperty({}, "& .".concat(gridClasses.rowReorderCellPlaceholder), styles.rowReorderCellPlaceholder), _defineProperty({}, "& .".concat(gridClasses.rowReorderCell), styles.rowReorderCell), _defineProperty({}, "& .".concat(gridClasses['rowReorderCell--draggable']), styles['rowReorderCell--draggable']), _defineProperty({}, "& .".concat(gridClasses.sortIcon), styles.sortIcon), _defineProperty({}, "& .".concat(gridClasses.withBorder), styles.withBorder), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCell), styles.treeDataGroupingCell), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCellToggle), styles.treeDataGroupingCellToggle), _defineProperty({}, "& .".concat(gridClasses.detailPanelToggleCell), styles.detailPanelToggleCell), _defineProperty({}, "& .".concat(gridClasses['detailPanelToggleCell--expanded']), styles['detailPanelToggleCell--expanded']), styles.root];
   }
-})(function (_ref51) {
+})(function (_ref52) {
   var _$concat2, _$concat3, _extends2;
 
-  var theme = _ref51.theme;
+  var theme = _ref52.theme;
   var borderColor = theme.palette.mode === 'light' ? lighten(alpha(theme.palette.divider, 1), 0.88) : darken(alpha(theme.palette.divider, 1), 0.68);
 
   var gridStyle = _extends({

package/legacy/components/panel/GridColumnsPanel.js

@@ -1,7 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _excluded = ["sort"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import { switchClasses } from '@mui/material/Switch';
@@ -60,7 +64,9 @@ var GridColumnsPanelRowRoot = styled('div', {
 var GridIconButtonRoot = styled(IconButton)({
   justifyContent: 'flex-end'
 });
-export function GridColumnsPanel(props) {
+var collator = new Intl.Collator();
+
+function GridColumnsPanel(props) {
   var _rootProps$components, _rootProps$components3, _rootProps$components4;
 
   var apiRef = useGridApiContext();
@@ -79,6 +85,26 @@ export function GridColumnsPanel(props) {
   };
   var classes = useUtilityClasses(ownerState);
 
+  var sort = props.sort,
+      other = _objectWithoutProperties(props, _excluded);
+
+  var sortedColumns = React.useMemo(function () {
+    switch (sort) {
+      case 'asc':
+        return _toConsumableArray(columns).sort(function (a, b) {
+          return collator.compare(a.headerName || a.field, b.headerName || b.field);
+        });
+
+      case 'desc':
+        return _toConsumableArray(columns).sort(function (a, b) {
+          return -collator.compare(a.headerName || a.field, b.headerName || b.field);
+        });
+
+      default:
+        return columns;
+    }
+  }, [columns, sort]);
+
   var toggleColumn = function toggleColumn(event) {
     var _ref3 = event.target,
         field = _ref3.name;
@@ -115,18 +141,18 @@ export function GridColumnsPanel(props) {
   }, []);
   var currentColumns = React.useMemo(function () {
     if (!searchValue) {
-      return columns;
+      return sortedColumns;
     }
 
     var searchValueToCheck = searchValue.toLowerCase();
-    return columns.filter(function (column) {
+    return sortedColumns.filter(function (column) {
       return (column.headerName || column.field).toLowerCase().indexOf(searchValueToCheck) > -1;
     });
-  }, [columns, searchValue]);
+  }, [sortedColumns, searchValue]);
   React.useEffect(function () {
     searchInputRef.current.focus();
   }, []);
-  return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({}, props, {
+  return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({}, other, {
     children: [/*#__PURE__*/_jsx(GridPanelHeader, {
       children: /*#__PURE__*/_jsx(rootProps.components.BaseTextField, _extends({
         label: apiRef.current.getLocaleText('columnsPanelTextFieldLabel'),
@@ -181,4 +207,13 @@ export function GridColumnsPanel(props) {
       }))]
     })]
   }));
-}
+}
+
+process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sort: PropTypes.oneOf(['asc', 'desc'])
+} : void 0;
+export { GridColumnsPanel };

package/legacy/constants/defaultGridSlotsComponents.js

@@ -7,7 +7,7 @@ import MUISwitch from '@mui/material/Switch';
 import MUIButton from '@mui/material/Button';
 import MUITooltip from '@mui/material/Tooltip';
 import MUIPopper from '@mui/material/Popper';
-import { GridArrowDownwardIcon, GridArrowUpwardIcon, GridCell, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridColumnMenu, GridColumnsPanel, GridFilterAltIcon, GridFilterListIcon, GridFilterPanel, GridFooter, GridHeader, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridSaveAltIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridMoreVertIcon, GridExpandMoreIcon, GridKeyboardArrowRight, GridAddIcon, GridRemoveIcon, GridDragIcon, GridColumnHeaderFilterIconButton, GridSearchIcon } from '../components';
+import { GridArrowDownwardIcon, GridArrowUpwardIcon, GridCell, GridSkeletonCell, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridColumnMenu, GridColumnsPanel, GridFilterAltIcon, GridFilterListIcon, GridFilterPanel, GridFooter, GridHeader, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridSaveAltIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridMoreVertIcon, GridExpandMoreIcon, GridKeyboardArrowRight, GridAddIcon, GridRemoveIcon, GridDragIcon, GridColumnHeaderFilterIconButton, GridSearchIcon } from '../components';
 import { GridColumnUnsortedIcon } from '../components/columnHeaders/GridColumnUnsortedIcon';
 import { ErrorOverlay } from '../components/ErrorOverlay';
 import { GridNoResultsOverlay } from '../components/GridNoResultsOverlay';
@@ -52,6 +52,7 @@ export var DATA_GRID_DEFAULT_SLOTS_COMPONENTS = _extends({}, DEFAULT_GRID_ICON_S
   BaseTooltip: MUITooltip,
   BasePopper: MUIPopper,
   Cell: GridCell,
+  SkeletonCell: GridSkeletonCell,
   ColumnHeaderFilterIconButton: GridColumnHeaderFilterIconButton,
   ColumnMenu: GridColumnMenu,
   ErrorOverlay: ErrorOverlay,

package/legacy/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { generateUtilityClasses, generateUtilityClass } from '@mui/material';
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export var 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', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', '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']);
+export var 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', 'cellSkeleton', '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', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', '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', 'row--detailPanelExpanded', '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/legacy/hooks/features/editRows/useGridCellEditing.new.js

@@ -15,6 +15,7 @@ import { gridEditRowsStateSelector } from './gridEditRowsSelector';
 import { isPrintableKey } from '../../../utils/keyboardUtils';
 import { buildWarning } from '../../../utils/warning';
 import { gridRowsIdToIdLookupSelector } from '../rows/gridRowsSelector';
+import { deepClone } from '../../../utils/utils';
 import { GridCellEditStartReasons, GridCellEditStopReasons } from '../../../models/params/gridEditCellParams';
 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 useGridCellEditing = function useGridCellEditing(apiRef, props) {
@@ -315,16 +316,20 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
               _editingState$id$fiel = editingState[id][field], error = _editingState$id$fiel.error, isProcessingProps = _editingState$id$fiel.isProcessingProps;
 
               if (!(error || isProcessingProps)) {
-                _context.next = 12;
+                _context.next = 13;
                 break;
               }
 
               // Attempt to change cell mode to "view" was not successful
               // Update previous mode to allow another attempt
-              prevCellModesModel.current[id][field].mode = GridCellModes.Edit;
+              prevCellModesModel.current[id][field].mode = GridCellModes.Edit; // Revert the mode in the cellModesModel prop back to "edit"
+
+              updateFieldInCellModesModel(id, field, {
+                mode: GridCellModes.Edit
+              });
               return _context.abrupt("return");
 
-            case 12:
+            case 13:
               rowUpdate = apiRef.current.unstable_getRowWithUpdatedValuesFromCellEditing(id, field);
 
               if (processRowUpdate) {
@@ -352,7 +357,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
                 finishCellEditMode();
               }
 
-            case 14:
+            case 15:
             case "end":
               return _context.stop();
           }
@@ -470,7 +475,8 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
     var idToIdLookup = gridRowsIdToIdLookupSelector(apiRef); // Update the ref here because updateStateToStopCellEditMode may change it later
 
     var copyOfPrevCellModes = prevCellModesModel.current;
-    prevCellModesModel.current = cellModesModel;
+    prevCellModesModel.current = deepClone(cellModesModel); // Do a deep-clone because the attributes might be changed later
+
     Object.entries(cellModesModel).forEach(function (_ref3) {
       var _ref4 = _slicedToArray(_ref3, 2),
           id = _ref4[0],

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

@@ -14,6 +14,7 @@ import { isPrintableKey } from '../../../utils/keyboardUtils';
 import { gridColumnFieldsSelector } from '../columns/gridColumnsSelector';
 import { buildWarning } from '../../../utils/warning';
 import { gridRowsIdToIdLookupSelector } from '../rows/gridRowsSelector';
+import { deepClone } from '../../../utils/utils';
 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) {
@@ -402,7 +403,11 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     });
 
     if (hasSomeFieldWithError) {
-      prevRowModesModel.current[id].mode = GridRowModes.Edit;
+      prevRowModesModel.current[id].mode = GridRowModes.Edit; // Revert the mode in the rowModesModel prop back to "edit"
+
+      updateRowInRowModesModel(id, {
+        mode: GridRowModes.Edit
+      });
       return;
     }
 
@@ -593,7 +598,8 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     var idToIdLookup = gridRowsIdToIdLookupSelector(apiRef); // Update the ref here because updateStateToStopRowEditMode may change it later
 
     var copyOfPrevRowModesModel = prevRowModesModel.current;
-    prevRowModesModel.current = rowModesModel;
+    prevRowModesModel.current = deepClone(rowModesModel); // Do a deep-clone because the attributes might be changed later
+
     Object.entries(rowModesModel).forEach(function (_ref5) {
       var _copyOfPrevRowModesMo, _idToIdLookup$id;
 

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

@@ -79,76 +79,78 @@ export var mergeStateWithFilterModel = function mergeStateWithFilterModel(filter
     });
   };
 };
-/**
- * Generates a method to easily check if a row is matching the current filter model.
- * @param {GridFilterModel} filterModel The model with which we want to filter the rows.
- * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
- * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
- */
 
-export var buildAggregatedFilterItemsApplier = function buildAggregatedFilterItemsApplier(filterModel, apiRef) {
-  var items = filterModel.items;
-
-  var getFilterCallbackFromItem = function getFilterCallbackFromItem(filterItem) {
-    if (!filterItem.columnField || !filterItem.operatorValue) {
-      return null;
-    }
+var getFilterCallbackFromItem = function getFilterCallbackFromItem(filterItem, apiRef) {
+  if (!filterItem.columnField || !filterItem.operatorValue) {
+    return null;
+  }
 
-    var column = apiRef.current.getColumn(filterItem.columnField);
+  var column = apiRef.current.getColumn(filterItem.columnField);
 
-    if (!column) {
-      return null;
-    }
+  if (!column) {
+    return null;
+  }
 
-    var parsedValue;
+  var parsedValue;
 
-    if (column.valueParser) {
-      var _filterItem$value;
+  if (column.valueParser) {
+    var _filterItem$value;
 
-      var parser = column.valueParser;
-      parsedValue = Array.isArray(filterItem.value) ? (_filterItem$value = filterItem.value) == null ? void 0 : _filterItem$value.map(function (x) {
-        return parser(x);
-      }) : parser(filterItem.value);
-    } else {
-      parsedValue = filterItem.value;
-    }
+    var parser = column.valueParser;
+    parsedValue = Array.isArray(filterItem.value) ? (_filterItem$value = filterItem.value) == null ? void 0 : _filterItem$value.map(function (x) {
+      return parser(x);
+    }) : parser(filterItem.value);
+  } else {
+    parsedValue = filterItem.value;
+  }
 
-    var newFilterItem = _extends({}, filterItem, {
-      value: parsedValue
-    });
+  var newFilterItem = _extends({}, filterItem, {
+    value: parsedValue
+  });
 
-    var filterOperators = column.filterOperators;
+  var filterOperators = column.filterOperators;
 
-    if (!(filterOperators != null && filterOperators.length)) {
-      throw new Error("MUI: No filter operators found for column '".concat(column.field, "'."));
-    }
+  if (!(filterOperators != null && filterOperators.length)) {
+    throw new Error("MUI: No filter operators found for column '".concat(column.field, "'."));
+  }
 
-    var filterOperator = filterOperators.find(function (operator) {
-      return operator.value === newFilterItem.operatorValue;
-    });
+  var filterOperator = filterOperators.find(function (operator) {
+    return operator.value === newFilterItem.operatorValue;
+  });
 
-    if (!filterOperator) {
-      throw new Error("MUI: No filter operator found for column '".concat(column.field, "' and operator value '").concat(newFilterItem.operatorValue, "'."));
-    }
+  if (!filterOperator) {
+    throw new Error("MUI: No filter operator found for column '".concat(column.field, "' and operator value '").concat(newFilterItem.operatorValue, "'."));
+  }
 
-    var applyFilterOnRow = filterOperator.getApplyFilterFn(newFilterItem, column);
+  var applyFilterOnRow = filterOperator.getApplyFilterFn(newFilterItem, column);
 
-    if (typeof applyFilterOnRow !== 'function') {
-      return null;
-    }
+  if (typeof applyFilterOnRow !== 'function') {
+    return null;
+  }
 
-    var fn = function fn(rowId) {
-      var cellParams = apiRef.current.getCellParams(rowId, newFilterItem.columnField);
-      return applyFilterOnRow(cellParams);
-    };
+  var fn = function fn(rowId) {
+    var cellParams = apiRef.current.getCellParams(rowId, newFilterItem.columnField);
+    return applyFilterOnRow(cellParams);
+  };
 
-    return {
-      fn: fn,
-      item: newFilterItem
-    };
+  return {
+    fn: fn,
+    item: newFilterItem
   };
+};
+/**
+ * Generates a method to easily check if a row is matching the current filter model.
+ * @param {GridFilterModel} filterModel The model with which we want to filter the rows.
+ * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
+ */
+
 
-  var appliers = items.map(getFilterCallbackFromItem).filter(function (callback) {
+export var buildAggregatedFilterItemsApplier = function buildAggregatedFilterItemsApplier(filterModel, apiRef) {
+  var items = filterModel.items;
+  var appliers = items.map(function (item) {
+    return getFilterCallbackFromItem(item, apiRef);
+  }).filter(function (callback) {
     return !!callback;
   });
 
@@ -242,9 +244,12 @@ export var buildAggregatedFilterApplier = function buildAggregatedFilterApplier(
     };
   };
 };
-export var passFilterLogic = function passFilterLogic(allFilterItemResults, allQuickFilterResults, filterModel) {
+export var passFilterLogic = function passFilterLogic(allFilterItemResults, allQuickFilterResults, filterModel, apiRef) {
   var _filterModel$quickFil2, _filterModel$linkOper;
 
+  var cleanedFilterItems = filterModel.items.filter(function (item) {
+    return getFilterCallbackFromItem(item, apiRef) !== null;
+  });
   var cleanedAllFilterItemResults = allFilterItemResults.filter(function (result) {
     return result != null;
   });
@@ -264,13 +269,13 @@ export var passFilterLogic = function passFilterLogic(allFilterItemResults, allQ
     };
 
     if (linkOperator === GridLinkOperator.And) {
-      var passesAllFilters = filterModel.items.every(filterItemPredicate);
+      var passesAllFilters = cleanedFilterItems.every(filterItemPredicate);
 
       if (!passesAllFilters) {
         return false;
       }
     } else {
-      var passesSomeFilters = filterModel.items.some(filterItemPredicate);
+      var passesSomeFilters = cleanedFilterItems.some(filterItemPredicate);
 
       if (!passesSomeFilters) {
         return false;

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

@@ -288,7 +288,7 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
               passingFilterItems = _params$isRowMatching.passingFilterItems,
               passingQuickFilterValues = _params$isRowMatching.passingQuickFilterValues;
 
-          isRowPassing = passFilterLogic([passingFilterItems], [passingQuickFilterValues], params.filterModel);
+          isRowPassing = passFilterLogic([passingFilterItems], [passingQuickFilterValues], params.filterModel, apiRef);
         }
 
         filteredRowsLookup[rowId] = isRowPassing;

package/legacy/hooks/features/focus/useGridFocus.js

@@ -134,8 +134,18 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
     }
 
     rowIndexToFocus = clamp(rowIndexToFocus, 0, currentPage.rows.length - 1);
-    columnIndexToFocus = clamp(columnIndexToFocus, 0, visibleColumns.length - 1);
     var rowToFocus = currentPage.rows[rowIndexToFocus];
+    var colSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowToFocus.id, columnIndexToFocus);
+
+    if (colSpanInfo && colSpanInfo.spannedByColSpan) {
+      if (direction === 'left' || direction === 'below') {
+        columnIndexToFocus = colSpanInfo.leftVisibleCellIndex;
+      } else if (direction === 'right') {
+        columnIndexToFocus = colSpanInfo.rightVisibleCellIndex;
+      }
+    }
+
+    columnIndexToFocus = clamp(columnIndexToFocus, 0, visibleColumns.length - 1);
     var columnToFocus = visibleColumns[columnIndexToFocus];
     apiRef.current.setCellFocus(rowToFocus.id, columnToFocus.field);
   }, [apiRef, props.pagination, props.paginationMode]);
@@ -172,7 +182,7 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
       });
     });
   }, [logger, apiRef]);
-  var handleCellMouseUp = React.useCallback(function (params) {
+  var handleCellMouseDown = React.useCallback(function (params) {
     lastClickedCell.current = params;
   }, []);
   var handleDocumentClick = React.useCallback(function (event) {
@@ -259,7 +269,7 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
   }, [apiRef, handleDocumentClick]);
   useGridApiEventHandler(apiRef, 'columnHeaderBlur', handleBlur);
   useGridApiEventHandler(apiRef, 'cellDoubleClick', handleCellDoubleClick);
-  useGridApiEventHandler(apiRef, 'cellMouseUp', handleCellMouseUp);
+  useGridApiEventHandler(apiRef, 'cellMouseDown', handleCellMouseDown);
   useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
   useGridApiEventHandler(apiRef, 'cellModeChange', handleCellModeChange);
   useGridApiEventHandler(apiRef, 'columnHeaderFocus', handleColumnHeaderFocus);

package/legacy/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -37,6 +37,7 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
    * @param {number} colIndex Index of the column to focus
    * @param {number} rowIndex index of the row to focus
    * @param {string} closestColumnToUse Which closest column cell to use when the cell is spanned by `colSpan`.
+   * TODO replace with apiRef.current.unstable_moveFocusToRelativeCell()
    */
 
   var goToCell = React.useCallback(function (colIndex, rowId) {
@@ -98,6 +99,7 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
       case 'ArrowDown':
       case 'Enter':
         {
+          // TODO v6: Remove Enter case because `cellNavigationKeyDown` is not fired by the new editing API
           // "Enter" is only triggered by the row / cell editing feature
           if (rowIndexBefore < lastRowIndexInPage) {
             goToCell(colIndexBefore, getRowIdFromIndex(rowIndexBefore + 1));

package/legacy/hooks/features/rows/useGridParamsApi.js

@@ -109,7 +109,7 @@ export function useGridParamsApi(apiRef) {
       formattedValue: value
     };
 
-    if (colDef.valueFormatter) {
+    if (colDef && colDef.valueFormatter) {
       params.formattedValue = colDef.valueFormatter({
         id: id,
         field: params.field,

package/legacy/hooks/features/rows/useGridRows.js

@@ -1,10 +1,11 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
-import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowIdsSelector, gridRowGroupingNameSelector } from './gridRowsSelector';
+import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowIdsSelector, gridRowGroupingNameSelector, gridRowsIdToIdLookupSelector } from './gridRowsSelector';
 import { GridSignature, useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { gridSortedRowIdsSelector } from '../sorting/gridSortingSelector';
@@ -109,14 +110,14 @@ export var useGridRows = function useGridRows(apiRef, props) {
     } // we remove duplicate updates. A server can batch updates, and send several updates for the same row in one fn call.
 
 
-    var uniqUpdates = new Map();
+    var uniqueUpdates = new Map();
     updates.forEach(function (update) {
       var id = getRowIdFromRowModel(update, props.getRowId, 'A row was provided without id when calling updateRows():');
 
-      if (uniqUpdates.has(id)) {
-        uniqUpdates.set(id, _extends({}, uniqUpdates.get(id), update));
+      if (uniqueUpdates.has(id)) {
+        uniqueUpdates.set(id, _extends({}, uniqueUpdates.get(id), update));
       } else {
-        uniqUpdates.set(id, update);
+        uniqueUpdates.set(id, update);
       }
     });
     var deletedRowIds = [];
@@ -128,7 +129,7 @@ export var useGridRows = function useGridRows(apiRef, props) {
       idToIdLookup: _extends({}, prevCache.idToIdLookup),
       ids: _toConsumableArray(prevCache.ids)
     };
-    uniqUpdates.forEach(function (partialRow, id) {
+    uniqueUpdates.forEach(function (partialRow, id) {
       // eslint-disable-next-line no-underscore-dangle
       if (partialRow._action === 'delete') {
         delete newCache.idRowsLookup[id];
@@ -264,8 +265,71 @@ export var useGridRows = function useGridRows(apiRef, props) {
         })
       });
     });
-    apiRef.current.applySorting();
+    apiRef.current.publishEvent('rowsSet');
   }, [apiRef, logger]);
+  var replaceRows = React.useCallback(function (firstRowToRender, newRows) {
+    if (props.signature === GridSignature.DataGrid && newRows.length > 1) {
+      throw new Error(["MUI: You can't replace rows using `apiRef.current.unstable_replaceRows` on the DataGrid.", 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
+    }
+
+    if (newRows.length === 0) {
+      return;
+    }
+
+    var allRows = gridRowIdsSelector(apiRef);
+
+    var updatedRows = _toConsumableArray(allRows);
+
+    var idRowsLookup = gridRowsLookupSelector(apiRef);
+    var idToIdLookup = gridRowsIdToIdLookupSelector(apiRef);
+    var tree = gridRowTreeSelector(apiRef);
+
+    var updatedIdRowsLookup = _extends({}, idRowsLookup);
+
+    var updatedIdToIdLookup = _extends({}, idToIdLookup);
+
+    var updatedTree = _extends({}, tree);
+
+    var newRowEntries = newRows.map(function (newRowModel) {
+      var rowId = getRowIdFromRowModel(newRowModel, props.getRowId, 'A row was provided without id when calling replaceRows().');
+      return {
+        id: rowId,
+        model: newRowModel
+      };
+    });
+    newRowEntries.forEach(function (row, index) {
+      var _updatedRows$splice = updatedRows.splice(firstRowToRender + index, 1, row.id),
+          _updatedRows$splice2 = _slicedToArray(_updatedRows$splice, 1),
+          replacedRowId = _updatedRows$splice2[0];
+
+      delete updatedIdRowsLookup[replacedRowId];
+      delete updatedIdToIdLookup[replacedRowId];
+      delete updatedTree[replacedRowId];
+    });
+    newRowEntries.forEach(function (row) {
+      var rowTreeNodeConfig = {
+        id: row.id,
+        parent: null,
+        depth: 0,
+        groupingKey: null,
+        groupingField: null
+      };
+      updatedIdRowsLookup[row.id] = row.model;
+      updatedIdToIdLookup[row.id] = row.id;
+      updatedTree[row.id] = rowTreeNodeConfig;
+    });
+    apiRef.current.setState(function (state) {
+      return _extends({}, state, {
+        rows: _extends({}, state.rows, {
+          idRowsLookup: updatedIdRowsLookup,
+          idToIdLookup: updatedIdToIdLookup,
+          tree: updatedTree,
+          ids: updatedRows
+        })
+      });
+    });
+    apiRef.current.publishEvent('rowsSet');
+  }, [apiRef, props.signature, props.getRowId]);
   var rowApi = {
     getRow: getRow,
     getRowModels: getRowModels,
@@ -277,7 +341,8 @@ export var useGridRows = function useGridRows(apiRef, props) {
     setRowChildrenExpansion: setRowChildrenExpansion,
     getRowNode: getRowNode,
     getRowIndexRelativeToVisibleRows: getRowIndexRelativeToVisibleRows,
-    getRowGroupChildren: getRowGroupChildren
+    getRowGroupChildren: getRowGroupChildren,
+    unstable_replaceRows: replaceRows
   };
   /**
    * EVENTS