@mui/x-data-grid 5.16.0 → 5.17.2

package/components/panel/GridColumnsPanel.js

@@ -1,5 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _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';
@@ -54,7 +57,9 @@ const GridColumnsPanelRowRoot = styled('div', {
 const GridIconButtonRoot = styled(IconButton)({
   justifyContent: 'flex-end'
 });
-export function GridColumnsPanel(props) {
+const collator = new Intl.Collator();
+
+function GridColumnsPanel(props) {
   var _rootProps$components, _rootProps$components3, _rootProps$components4;
 
   const apiRef = useGridApiContext();
@@ -68,6 +73,24 @@ export function GridColumnsPanel(props) {
   };
   const classes = useUtilityClasses(ownerState);
 
+  const {
+    sort
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const sortedColumns = React.useMemo(() => {
+    switch (sort) {
+      case 'asc':
+        return [...columns].sort((a, b) => collator.compare(a.headerName || a.field, b.headerName || b.field));
+
+      case 'desc':
+        return [...columns].sort((a, b) => -collator.compare(a.headerName || a.field, b.headerName || b.field));
+
+      default:
+        return columns;
+    }
+  }, [columns, sort]);
+
   const toggleColumn = event => {
     const {
       name: field
@@ -101,16 +124,16 @@ export function GridColumnsPanel(props) {
   }, []);
   const currentColumns = React.useMemo(() => {
     if (!searchValue) {
-      return columns;
+      return sortedColumns;
     }
 
     const searchValueToCheck = searchValue.toLowerCase();
-    return columns.filter(column => (column.headerName || column.field).toLowerCase().indexOf(searchValueToCheck) > -1);
-  }, [columns, searchValue]);
+    return sortedColumns.filter(column => (column.headerName || column.field).toLowerCase().indexOf(searchValueToCheck) > -1);
+  }, [sortedColumns, searchValue]);
   React.useEffect(() => {
     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'),
@@ -161,4 +184,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/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 const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = _extends({}, DEFAULT_GRID_ICON
   BaseTooltip: MUITooltip,
   BasePopper: MUIPopper,
   Cell: GridCell,
+  SkeletonCell: GridSkeletonCell,
   ColumnHeaderFilterIconButton: GridColumnHeaderFilterIconButton,
   ColumnMenu: GridColumnMenu,
   ErrorOverlay,

package/constants/gridClasses.d.ts

@@ -67,6 +67,10 @@ export interface GridClasses {
      * Styles applied to the cell checkbox element.
      */
     cellCheckbox: string;
+    /**
+     * Styles applied to the skeleton cell element.
+     */
+    cellSkeleton: string;
     /**
      * Styles applied to the selection checkbox element.
      */
@@ -391,6 +395,10 @@ export interface GridClasses {
      * Styles applied to the row if it has dynamic row height.
      */
     'row--dynamicHeight': string;
+    /**
+     * Styles applied to the row if its detail panel is open.
+     */
+    'row--detailPanelExpanded': string;
     /**
      * Styles applied to the row element.
      */

package/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', '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 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', '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/hooks/core/pipeProcessing/gridPipeProcessingApi.d.ts

@@ -3,7 +3,7 @@ import { GridCellIndexCoordinates, GridScrollParams, GridColDef } from '../../..
 import { GridInitialStateCommunity } from '../../../models/gridStateCommunity';
 import { GridExportStateParams, GridRestoreStatePreProcessingContext, GridRestoreStatePreProcessingValue } from '../../features/statePersistence/gridStatePersistenceInterface';
 import { GridHydrateColumnsValue } from '../../features/columns/gridColumnsInterfaces';
-import { GridRowEntry } from '../../../models/gridRows';
+import { GridRowEntry, GridRowId } from '../../../models/gridRows';
 import { GridHydrateRowsValue } from '../../features/rows/gridRowsState';
 import { GridPreferencePanelsValue } from '../../features/preferencesPanel';
 export declare type GridPipeProcessorGroup = keyof GridPipeProcessingLookup;
@@ -45,6 +45,10 @@ export interface GridPipeProcessingLookup {
         value: Partial<GridScrollParams>;
         context: Partial<GridCellIndexCoordinates>;
     };
+    rowClassName: {
+        value: string[];
+        context: GridRowId;
+    };
 }
 export declare type GridPipeProcessor<P extends GridPipeProcessorGroup> = (value: GridPipeProcessingLookup[P]['value'], context: GridPipeProcessingLookup[P] extends {
     context: any;

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

@@ -11,6 +11,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';
 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) => {
@@ -319,7 +320,11 @@ export const useGridCellEditing = (apiRef, props) => {
     if (error || isProcessingProps) {
       // 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;
     }
 
@@ -437,7 +442,8 @@ export const useGridCellEditing = (apiRef, props) => {
     const idToIdLookup = gridRowsIdToIdLookupSelector(apiRef); // Update the ref here because updateStateToStopCellEditMode may change it later
 
     const 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(([id, fields]) => {
       Object.entries(fields).forEach(([field, params]) => {
         var _copyOfPrevCellModes$, _copyOfPrevCellModes$2, _idToIdLookup$id;

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

@@ -12,6 +12,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';
 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) => {
@@ -403,7 +404,11 @@ export const useGridRowEditing = (apiRef, props) => {
     const hasSomeFieldWithError = Object.values(editingState[id]).some(fieldProps => fieldProps.error);
 
     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;
     }
 
@@ -586,7 +591,8 @@ export const useGridRowEditing = (apiRef, props) => {
     const idToIdLookup = gridRowsIdToIdLookupSelector(apiRef); // Update the ref here because updateStateToStopRowEditMode may change it later
 
     const 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(([id, params]) => {
       var _copyOfPrevRowModesMo, _idToIdLookup$id;
 

package/hooks/features/filter/gridFilterUtils.d.ts

@@ -29,5 +29,5 @@ export declare const buildAggregatedFilterItemsApplier: (filterModel: GridFilter
  */
 export declare const buildAggregatedQuickFilterApplier: (filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridApiCommunity>) => GridFilterItemApplierNotAggregated | null;
 export declare const buildAggregatedFilterApplier: (filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridApiCommunity>) => GridAggregatedFilterItemApplier;
-export declare const passFilterLogic: (allFilterItemResults: (null | GridFilterItemResult)[], allQuickFilterResults: (null | GridQuickFilterValueResult)[], filterModel: GridFilterModel) => boolean;
+export declare const passFilterLogic: (allFilterItemResults: (null | GridFilterItemResult)[], allQuickFilterResults: (null | GridQuickFilterValueResult)[], filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridApiCommunity>) => boolean;
 export {};

package/hooks/features/filter/gridFilterUtils.js

@@ -69,74 +69,74 @@ export const sanitizeFilterModel = (model, disableMultipleColumnsFiltering, apiR
 export const mergeStateWithFilterModel = (filterModel, disableMultipleColumnsFiltering, apiRef) => filteringState => _extends({}, filteringState, {
   filterModel: sanitizeFilterModel(filterModel, disableMultipleColumnsFiltering, apiRef)
 });
-/**
- * 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 const buildAggregatedFilterItemsApplier = (filterModel, apiRef) => {
-  const {
-    items
-  } = filterModel;
-
-  const getFilterCallbackFromItem = filterItem => {
-    if (!filterItem.columnField || !filterItem.operatorValue) {
-      return null;
-    }
+const getFilterCallbackFromItem = (filterItem, apiRef) => {
+  if (!filterItem.columnField || !filterItem.operatorValue) {
+    return null;
+  }
 
-    const column = apiRef.current.getColumn(filterItem.columnField);
+  const column = apiRef.current.getColumn(filterItem.columnField);
 
-    if (!column) {
-      return null;
-    }
+  if (!column) {
+    return null;
+  }
 
-    let parsedValue;
+  let parsedValue;
 
-    if (column.valueParser) {
-      var _filterItem$value;
+  if (column.valueParser) {
+    var _filterItem$value;
 
-      const parser = column.valueParser;
-      parsedValue = Array.isArray(filterItem.value) ? (_filterItem$value = filterItem.value) == null ? void 0 : _filterItem$value.map(x => parser(x)) : parser(filterItem.value);
-    } else {
-      parsedValue = filterItem.value;
-    }
+    const parser = column.valueParser;
+    parsedValue = Array.isArray(filterItem.value) ? (_filterItem$value = filterItem.value) == null ? void 0 : _filterItem$value.map(x => parser(x)) : parser(filterItem.value);
+  } else {
+    parsedValue = filterItem.value;
+  }
 
-    const newFilterItem = _extends({}, filterItem, {
-      value: parsedValue
-    });
+  const newFilterItem = _extends({}, filterItem, {
+    value: parsedValue
+  });
 
-    const filterOperators = column.filterOperators;
+  const filterOperators = column.filterOperators;
 
-    if (!(filterOperators != null && filterOperators.length)) {
-      throw new Error(`MUI: No filter operators found for column '${column.field}'.`);
-    }
+  if (!(filterOperators != null && filterOperators.length)) {
+    throw new Error(`MUI: No filter operators found for column '${column.field}'.`);
+  }
 
-    const filterOperator = filterOperators.find(operator => operator.value === newFilterItem.operatorValue);
+  const filterOperator = filterOperators.find(operator => operator.value === newFilterItem.operatorValue);
 
-    if (!filterOperator) {
-      throw new Error(`MUI: No filter operator found for column '${column.field}' and operator value '${newFilterItem.operatorValue}'.`);
-    }
+  if (!filterOperator) {
+    throw new Error(`MUI: No filter operator found for column '${column.field}' and operator value '${newFilterItem.operatorValue}'.`);
+  }
 
-    const applyFilterOnRow = filterOperator.getApplyFilterFn(newFilterItem, column);
+  const applyFilterOnRow = filterOperator.getApplyFilterFn(newFilterItem, column);
 
-    if (typeof applyFilterOnRow !== 'function') {
-      return null;
-    }
+  if (typeof applyFilterOnRow !== 'function') {
+    return null;
+  }
 
-    const fn = rowId => {
-      const cellParams = apiRef.current.getCellParams(rowId, newFilterItem.columnField);
-      return applyFilterOnRow(cellParams);
-    };
+  const fn = rowId => {
+    const cellParams = apiRef.current.getCellParams(rowId, newFilterItem.columnField);
+    return applyFilterOnRow(cellParams);
+  };
 
-    return {
-      fn,
-      item: newFilterItem
-    };
+  return {
+    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.
+ */
 
-  const appliers = items.map(getFilterCallbackFromItem).filter(callback => !!callback);
+
+export const buildAggregatedFilterItemsApplier = (filterModel, apiRef) => {
+  const {
+    items
+  } = filterModel;
+  const appliers = items.map(item => getFilterCallbackFromItem(item, apiRef)).filter(callback => !!callback);
 
   if (appliers.length === 0) {
     return null;
@@ -219,9 +219,10 @@ export const buildAggregatedFilterApplier = (filterModel, apiRef) => {
     passingQuickFilterValues: isRowMatchingQuickFilter && isRowMatchingQuickFilter(rowId, shouldApplyFilter)
   });
 };
-export const passFilterLogic = (allFilterItemResults, allQuickFilterResults, filterModel) => {
+export const passFilterLogic = (allFilterItemResults, allQuickFilterResults, filterModel, apiRef) => {
   var _filterModel$quickFil, _filterModel$linkOper;
 
+  const cleanedFilterItems = filterModel.items.filter(item => getFilterCallbackFromItem(item, apiRef) !== null);
   const cleanedAllFilterItemResults = allFilterItemResults.filter(result => result != null);
   const cleanedAllQuickFilterResults = allQuickFilterResults.filter(result => result != null); // Defaultize operators
 
@@ -235,13 +236,13 @@ export const passFilterLogic = (allFilterItemResults, allQuickFilterResults, fil
     };
 
     if (linkOperator === GridLinkOperator.And) {
-      const passesAllFilters = filterModel.items.every(filterItemPredicate);
+      const passesAllFilters = cleanedFilterItems.every(filterItemPredicate);
 
       if (!passesAllFilters) {
         return false;
       }
     } else {
-      const passesSomeFilters = filterModel.items.some(filterItemPredicate);
+      const passesSomeFilters = cleanedFilterItems.some(filterItemPredicate);
 
       if (!passesSomeFilters) {
         return false;

package/hooks/features/filter/useGridFilter.js

@@ -271,7 +271,7 @@ export const useGridFilter = (apiRef, props) => {
             passingFilterItems,
             passingQuickFilterValues
           } = params.isRowMatchingFilters(rowId);
-          isRowPassing = passFilterLogic([passingFilterItems], [passingQuickFilterValues], params.filterModel);
+          isRowPassing = passFilterLogic([passingFilterItems], [passingQuickFilterValues], params.filterModel, apiRef);
         }
 
         filteredRowsLookup[rowId] = isRowPassing;

package/hooks/features/focus/useGridFocus.js

@@ -131,8 +131,18 @@ export const useGridFocus = (apiRef, props) => {
     }
 
     rowIndexToFocus = clamp(rowIndexToFocus, 0, currentPage.rows.length - 1);
-    columnIndexToFocus = clamp(columnIndexToFocus, 0, visibleColumns.length - 1);
     const rowToFocus = currentPage.rows[rowIndexToFocus];
+    const 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);
     const columnToFocus = visibleColumns[columnIndexToFocus];
     apiRef.current.setCellFocus(rowToFocus.id, columnToFocus.field);
   }, [apiRef, props.pagination, props.paginationMode]);
@@ -168,7 +178,7 @@ export const useGridFocus = (apiRef, props) => {
       }
     }));
   }, [logger, apiRef]);
-  const handleCellMouseUp = React.useCallback(params => {
+  const handleCellMouseDown = React.useCallback(params => {
     lastClickedCell.current = params;
   }, []);
   const handleDocumentClick = React.useCallback(event => {
@@ -251,7 +261,7 @@ export const 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/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -34,6 +34,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
    * @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()
    */
 
   const goToCell = React.useCallback((colIndex, rowId, closestColumnToUse = 'left') => {
@@ -90,6 +91,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       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/hooks/features/rows/useGridParamsApi.js

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

package/hooks/features/rows/useGridRows.js

@@ -2,7 +2,7 @@ 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';
@@ -104,14 +104,14 @@ export const useGridRows = (apiRef, props) => {
     } // we remove duplicate updates. A server can batch updates, and send several updates for the same row in one fn call.
 
 
-    const uniqUpdates = new Map();
+    const uniqueUpdates = new Map();
     updates.forEach(update => {
       const 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);
       }
     });
     const deletedRowIds = [];
@@ -123,7 +123,7 @@ export const useGridRows = (apiRef, props) => {
       idToIdLookup: _extends({}, prevCache.idToIdLookup),
       ids: [...prevCache.ids]
     };
-    uniqUpdates.forEach((partialRow, id) => {
+    uniqueUpdates.forEach((partialRow, id) => {
       // eslint-disable-next-line no-underscore-dangle
       if (partialRow._action === 'delete') {
         delete newCache.idRowsLookup[id];
@@ -241,8 +241,64 @@ export const useGridRows = (apiRef, props) => {
         ids: updatedRows
       })
     }));
-    apiRef.current.applySorting();
+    apiRef.current.publishEvent('rowsSet');
   }, [apiRef, logger]);
+  const replaceRows = React.useCallback((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;
+    }
+
+    const allRows = gridRowIdsSelector(apiRef);
+    const updatedRows = [...allRows];
+    const idRowsLookup = gridRowsLookupSelector(apiRef);
+    const idToIdLookup = gridRowsIdToIdLookupSelector(apiRef);
+    const tree = gridRowTreeSelector(apiRef);
+
+    const updatedIdRowsLookup = _extends({}, idRowsLookup);
+
+    const updatedIdToIdLookup = _extends({}, idToIdLookup);
+
+    const updatedTree = _extends({}, tree);
+
+    const newRowEntries = newRows.map(newRowModel => {
+      const rowId = getRowIdFromRowModel(newRowModel, props.getRowId, 'A row was provided without id when calling replaceRows().');
+      return {
+        id: rowId,
+        model: newRowModel
+      };
+    });
+    newRowEntries.forEach((row, index) => {
+      const [replacedRowId] = updatedRows.splice(firstRowToRender + index, 1, row.id);
+      delete updatedIdRowsLookup[replacedRowId];
+      delete updatedIdToIdLookup[replacedRowId];
+      delete updatedTree[replacedRowId];
+    });
+    newRowEntries.forEach(row => {
+      const 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(state => _extends({}, state, {
+      rows: _extends({}, state.rows, {
+        idRowsLookup: updatedIdRowsLookup,
+        idToIdLookup: updatedIdToIdLookup,
+        tree: updatedTree,
+        ids: updatedRows
+      })
+    }));
+    apiRef.current.publishEvent('rowsSet');
+  }, [apiRef, props.signature, props.getRowId]);
   const rowApi = {
     getRow,
     getRowModels,
@@ -254,7 +310,8 @@ export const useGridRows = (apiRef, props) => {
     setRowChildrenExpansion,
     getRowNode,
     getRowIndexRelativeToVisibleRows,
-    getRowGroupChildren
+    getRowGroupChildren,
+    unstable_replaceRows: replaceRows
   };
   /**
    * EVENTS