@mui/x-data-grid 5.14.0 → 5.15.2

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

@@ -42,6 +42,7 @@ const missingOnProcessRowUpdateErrorWarning = (0, _warning.buildWarning)(['MUI:
 
 const useGridCellEditing = (apiRef, props) => {
   const [cellModesModel, setCellModesModel] = React.useState({});
+  const cellModesModelRef = React.useRef(cellModesModel);
   const prevCellModesModel = React.useRef({});
   const {
     processRowUpdate,
@@ -88,6 +89,10 @@ const useGridCellEditing = (apiRef, props) => {
       return;
     }
 
+    if (apiRef.current.getCellMode(params.id, params.field) === _gridEditRowModel.GridCellModes.View) {
+      return;
+    }
+
     const newParams = (0, _extends2.default)({}, params, {
       reason: _gridEditCellParams.GridCellEditStopReasons.cellFocusOut
     });
@@ -121,15 +126,14 @@ const useGridCellEditing = (apiRef, props) => {
     } else if (params.isEditable) {
       let reason;
 
-      if ((0, _keyboardUtils.isPrintableKey)(event.key)) {
-        if (event.ctrlKey && event.key !== 'v' || event.metaKey && event.key !== 'v' || event.altKey) {
-          return;
-        }
-
+      if ((0, _keyboardUtils.isPrintableKey)(event)) {
+        reason = _gridEditCellParams.GridCellEditStartReasons.printableKeyDown;
+      } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
         reason = _gridEditCellParams.GridCellEditStartReasons.printableKeyDown;
       } else if (event.key === 'Enter') {
         reason = _gridEditCellParams.GridCellEditStartReasons.enterKeyDown;
-      } else if (event.key === 'Delete') {
+      } else if (event.key === 'Delete' || event.key === 'Backspace') {
+        // Delete on Windows, Backspace on macOS
         reason = _gridEditCellParams.GridCellEditStartReasons.deleteKeyDown;
       }
 
@@ -164,6 +168,7 @@ const useGridCellEditing = (apiRef, props) => {
       field,
       reason
     } = params;
+    apiRef.current.unstable_runPendingEditCellValueMutation(id, field);
     let cellToFocusAfter;
 
     if (reason === _gridEditCellParams.GridCellEditStopReasons.enterKeyDown) {
@@ -177,7 +182,7 @@ const useGridCellEditing = (apiRef, props) => {
     let ignoreModifications = reason === 'escapeKeyDown';
     const editingState = (0, _gridEditRowsSelector.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;
@@ -189,7 +194,7 @@ const useGridCellEditing = (apiRef, props) => {
       ignoreModifications,
       cellToFocusAfter
     });
-  }, [apiRef]);
+  }, [apiRef, props.disableIgnoreModificationsIfProcessingProps]);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellDoubleClick', runIfEditModeIsCell(handleCellDoubleClick));
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellFocusOut', runIfEditModeIsCell(handleCellFocusOut));
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellKeyDown', runIfEditModeIsCell(handleCellKeyDown));
@@ -217,18 +222,21 @@ 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 = (0, _extends2.default)({}, 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 = (0, _extends2.default)({}, cellModesModelRef.current);
 
     if (newProps !== null) {
       newModel[id] = (0, _extends2.default)({}, newModel[id], {
         [field]: (0, _extends2.default)({}, newProps)
       });
     } else {
-      const _cellModesModel$id = cellModesModel[id],
-            otherFields = (0, _objectWithoutPropertiesLoose2.default)(_cellModesModel$id, [field].map(_toPropertyKey2.default)); // Ensure that we have a new object, not a reference
+      const _newModel$id = newModel[id],
+            otherFields = (0, _objectWithoutPropertiesLoose2.default)(_newModel$id, [field].map(_toPropertyKey2.default)); // Ensure that we have a new object, not a reference
 
       newModel[id] = otherFields;
 
@@ -238,7 +246,7 @@ const useGridCellEditing = (apiRef, props) => {
     }
 
     updateCellModesModel(newModel);
-  }, [cellModesModel, updateCellModesModel]);
+  }, [updateCellModesModel]);
   const updateOrDeleteFieldState = React.useCallback((id, field, newProps) => {
     apiRef.current.setState(state => {
       const newEditingState = (0, _extends2.default)({}, state.editRows);
@@ -309,12 +317,12 @@ 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) {
@@ -363,6 +371,8 @@ const useGridCellEditing = (apiRef, props) => {
     }
   }, [apiRef, onProcessRowUpdateError, processRowUpdate, throwIfNotInMode, updateFieldInCellModesModel, updateOrDeleteFieldState]);
   const setCellEditingEditCellValue = React.useCallback(async params => {
+    var _editingState$id, _editingState$id$fiel;
+
     const {
       id,
       field,
@@ -413,7 +423,7 @@ const useGridCellEditing = (apiRef, props) => {
     newProps.value = column.preProcessEditCellProps ? editingState[id][field].value : parsedValue;
     updateOrDeleteFieldState(id, field, newProps);
     editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
-    return !editingState[id][field].error;
+    return !((_editingState$id = editingState[id]) != null && (_editingState$id$fiel = _editingState$id[field]) != null && _editingState$id$fiel.error);
   }, [apiRef, throwIfNotEditable, throwIfNotInMode, updateOrDeleteFieldState]);
   const getRowWithUpdatedValuesFromCellEditing = React.useCallback((id, field) => {
     const column = apiRef.current.getColumn(field);

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

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

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

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

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

@@ -56,7 +56,7 @@ function useGridEditing(apiRef, props) {
     stateSelector: _gridEditRowsSelector.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/node/hooks/features/editRows/useGridRowEditing.new.js

@@ -44,6 +44,7 @@ const missingOnProcessRowUpdateErrorWarning = (0, _warning.buildWarning)(['MUI:
 
 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);
@@ -116,6 +117,11 @@ 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) === _gridEditRowModel.GridRowModes.View) {
+          return;
         }
 
         const rowParams = apiRef.current.getRowParams(params.id);
@@ -175,15 +181,14 @@ const useGridRowEditing = (apiRef, props) => {
     } else if (params.isEditable) {
       let reason;
 
-      if ((0, _keyboardUtils.isPrintableKey)(event.key)) {
-        if (event.ctrlKey && event.key !== 'v' || event.metaKey && event.key !== 'v' || event.altKey) {
-          return;
-        }
-
+      if ((0, _keyboardUtils.isPrintableKey)(event)) {
+        reason = _gridRowParams.GridRowEditStartReasons.printableKeyDown;
+      } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
         reason = _gridRowParams.GridRowEditStartReasons.printableKeyDown;
       } else if (event.key === 'Enter') {
         reason = _gridRowParams.GridRowEditStartReasons.enterKeyDown;
-      } else if (event.key === 'Delete') {
+      } else if (event.key === 'Delete' || event.key === 'Backspace') {
+        // Delete on Windows, Backspace on macOS
         reason = _gridRowParams.GridRowEditStartReasons.deleteKeyDown;
       }
 
@@ -234,7 +239,7 @@ const useGridRowEditing = (apiRef, props) => {
     let ignoreModifications = reason === 'escapeKeyDown';
     const editingState = (0, _gridEditRowsSelector.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 => {
@@ -248,7 +253,7 @@ const useGridRowEditing = (apiRef, props) => {
       field,
       cellToFocusAfter
     });
-  }, [apiRef]);
+  }, [apiRef, props.disableIgnoreModificationsIfProcessingProps]);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellDoubleClick', runIfEditModeIsRow(handleCellDoubleClick));
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellFocusIn', runIfEditModeIsRow(handleCellFocusIn));
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellFocusOut', runIfEditModeIsRow(handleCellFocusOut));
@@ -281,10 +286,11 @@ 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 = (0, _extends2.default)({}, rowModesModel);
+    const newModel = (0, _extends2.default)({}, rowModesModelRef.current);
 
     if (newProps !== null) {
       newModel[id] = (0, _extends2.default)({}, newProps);
@@ -293,7 +299,7 @@ const useGridRowEditing = (apiRef, props) => {
     }
 
     updateRowModesModel(newModel);
-  }, [rowModesModel, updateRowModesModel]);
+  }, [updateRowModesModel]);
   const updateOrDeleteRowState = React.useCallback((id, newProps) => {
     apiRef.current.setState(state => {
       const newEditingState = (0, _extends2.default)({}, state.editRows);

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

@@ -30,6 +30,8 @@ exports.getColumnsToExport = getColumnsToExport;
 const defaultGetRowsToExport = ({
   apiRef
 }) => {
+  var _pinnedRows$top, _pinnedRows$bottom;
+
   const filteredSortedRowIds = (0, _filter.gridFilteredSortedRowIdsSelector)(apiRef);
   const rowTree = (0, _gridRowsSelector.gridRowTreeSelector)(apiRef);
   const selectedRows = apiRef.current.getSelectedRows();
@@ -38,6 +40,11 @@ const defaultGetRowsToExport = ({
 
     return ((_rowTree$id$position = rowTree[id].position) != null ? _rowTree$id$position : 'body') === 'body';
   });
+  const pinnedRows = (0, _gridRowsSelector.gridPinnedRowsSelector)(apiRef);
+  const topPinnedRowsIds = (pinnedRows == null ? void 0 : (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.map(row => row.id)) || [];
+  const bottomPinnedRowsIds = (pinnedRows == null ? void 0 : (_pinnedRows$bottom = pinnedRows.bottom) == null ? void 0 : _pinnedRows$bottom.map(row => row.id)) || [];
+  bodyRows.unshift(...topPinnedRowsIds);
+  bodyRows.push(...bottomPinnedRowsIds);
 
   if (selectedRows.size > 0) {
     return bodyRows.filter(id => selectedRows.has(id));

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

@@ -5,18 +5,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sanitizeFilterModel = exports.mergeStateWithFilterModel = exports.cleanFilterItem = exports.buildAggregatedQuickFilterApplier = exports.buildAggregatedFilterItemsApplier = exports.buildAggregatedFilterApplier = void 0;
+exports.sanitizeFilterModel = exports.passFilterLogic = exports.mergeStateWithFilterModel = exports.cleanFilterItem = exports.buildAggregatedQuickFilterApplier = exports.buildAggregatedFilterItemsApplier = exports.buildAggregatedFilterApplier = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _models = require("../../../models");
 
+var _gridFilterState = require("./gridFilterState");
+
 var _warning = require("../../../utils/warning");
 
 var _columns = require("../columns");
 
-var _gridRowsSelector = require("../rows/gridRowsSelector");
-
 /**
  * Adds default values to the optional fields of a filter items.
  * @param {GridFilterItem} item The raw filter item.
@@ -100,10 +100,8 @@ exports.mergeStateWithFilterModel = mergeStateWithFilterModel;
 
 const buildAggregatedFilterItemsApplier = (filterModel, apiRef) => {
   const {
-    items,
-    linkOperator = _models.GridLinkOperator.And
+    items
   } = filterModel;
-  const tree = (0, _gridRowsSelector.gridRowTreeSelector)(apiRef);
 
   const getFilterCallbackFromItem = filterItem => {
     if (!filterItem.columnField || !filterItem.operatorValue) {
@@ -166,18 +164,12 @@ const buildAggregatedFilterItemsApplier = (filterModel, apiRef) => {
   }
 
   return (rowId, shouldApplyFilter) => {
-    if (tree[rowId].position === 'footer') {
-      return true;
-    }
-
-    const filteredAppliers = shouldApplyFilter ? appliers.filter(applier => shouldApplyFilter(applier.item.columnField)) : appliers; // Return `false` as soon as we have a failing filter
-
-    if (linkOperator === _models.GridLinkOperator.And) {
-      return filteredAppliers.every(applier => applier.fn(rowId));
-    } // Return `true` as soon as we have a passing filter
-
-
-    return filteredAppliers.some(applier => applier.fn(rowId));
+    const resultPerItemId = {};
+    const filteredAppliers = shouldApplyFilter ? appliers.filter(applier => shouldApplyFilter(applier.item.columnField)) : appliers;
+    filteredAppliers.forEach(applier => {
+      resultPerItemId[applier.item.id] = applier.fn(rowId);
+    });
+    return resultPerItemId;
   };
 };
 /**
@@ -192,8 +184,7 @@ exports.buildAggregatedFilterItemsApplier = buildAggregatedFilterItemsApplier;
 
 const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
   const {
-    quickFilterValues = [],
-    quickFilterLogicOperator = _models.GridLinkOperator.And
+    quickFilterValues = []
   } = filterModel;
 
   if (quickFilterValues.length === 0) {
@@ -214,6 +205,11 @@ const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
   }); // If some value does not have an applier we ignore them
 
   const sanitizedQuickFilterValues = quickFilterValues.filter((value, index) => Object.keys(appliersPerColumnField).some(field => appliersPerColumnField[field][index] != null));
+
+  if (sanitizedQuickFilterValues.length === 0) {
+    return null;
+  }
+
   return (rowId, shouldApplyFilter) => {
     const usedCellParams = {};
     const columnsFieldsToFilter = [];
@@ -222,10 +218,10 @@ const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
         usedCellParams[columnField] = apiRef.current.getCellParams(rowId, columnField);
         columnsFieldsToFilter.push(columnField);
       }
-    }); // Return `false` as soon as we have a quick filter value that does not match any column
-
-    if (quickFilterLogicOperator === _models.GridLinkOperator.And) {
-      return sanitizedQuickFilterValues.every((value, index) => columnsFieldsToFilter.some(field => {
+    });
+    const quickFilterValueResult = {};
+    sanitizedQuickFilterValues.forEach((value, index) => {
+      const isPassing = columnsFieldsToFilter.some(field => {
         var _appliersPerColumnFie, _appliersPerColumnFie2;
 
         if (appliersPerColumnField[field][index] == null) {
@@ -233,19 +229,10 @@ const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
         }
 
         return (_appliersPerColumnFie = (_appliersPerColumnFie2 = appliersPerColumnField[field])[index]) == null ? void 0 : _appliersPerColumnFie.call(_appliersPerColumnFie2, usedCellParams[field]);
-      }));
-    } // Return `true` as soon as we have have a quick filter value that match any column
-
-
-    return sanitizedQuickFilterValues.some((value, index) => columnsFieldsToFilter.some(field => {
-      var _appliersPerColumnFie3, _appliersPerColumnFie4;
-
-      if (appliersPerColumnField[field][index] == null) {
-        return false;
-      }
-
-      return (_appliersPerColumnFie3 = (_appliersPerColumnFie4 = appliersPerColumnField[field])[index]) == null ? void 0 : _appliersPerColumnFie3.call(_appliersPerColumnFie4, usedCellParams[field]);
-    }));
+      });
+      quickFilterValueResult[value] = isPassing;
+    });
+    return quickFilterValueResult;
   };
 };
 
@@ -254,20 +241,67 @@ exports.buildAggregatedQuickFilterApplier = buildAggregatedQuickFilterApplier;
 const buildAggregatedFilterApplier = (filterModel, apiRef) => {
   const isRowMatchingFilterItems = buildAggregatedFilterItemsApplier(filterModel, apiRef);
   const isRowMatchingQuickFilter = buildAggregatedQuickFilterApplier(filterModel, apiRef);
+  return (rowId, shouldApplyFilter) => ({
+    passingFilterItems: isRowMatchingFilterItems && isRowMatchingFilterItems(rowId, shouldApplyFilter),
+    passingQuickFilterValues: isRowMatchingQuickFilter && isRowMatchingQuickFilter(rowId, shouldApplyFilter)
+  });
+};
 
-  if (isRowMatchingFilterItems == null && isRowMatchingQuickFilter == null) {
-    return null;
-  }
+exports.buildAggregatedFilterApplier = buildAggregatedFilterApplier;
 
-  if (isRowMatchingFilterItems == null) {
-    return isRowMatchingQuickFilter;
-  }
+const passFilterLogic = (allFilterItemResults, allQuickFilterResults, filterModel) => {
+  var _filterModel$quickFil, _filterModel$linkOper;
 
-  if (isRowMatchingQuickFilter == null) {
-    return isRowMatchingFilterItems;
+  const cleanedAllFilterItemResults = allFilterItemResults.filter(result => result != null);
+  const cleanedAllQuickFilterResults = allQuickFilterResults.filter(result => result != null); // Defaultize operators
+
+  const quickFilterLogicOperator = (_filterModel$quickFil = filterModel.quickFilterLogicOperator) != null ? _filterModel$quickFil : (0, _gridFilterState.getDefaultGridFilterModel)().quickFilterLogicOperator;
+  const linkOperator = (_filterModel$linkOper = filterModel.linkOperator) != null ? _filterModel$linkOper : (0, _gridFilterState.getDefaultGridFilterModel)().linkOperator; // get result for filter items model
+
+  if (cleanedAllFilterItemResults.length > 0) {
+    // Return true if the item pass with one of the rows
+    const filterItemPredicate = item => {
+      return cleanedAllFilterItemResults.some(filterItemResult => filterItemResult[item.id]);
+    };
+
+    if (linkOperator === _models.GridLinkOperator.And) {
+      const passesAllFilters = filterModel.items.every(filterItemPredicate);
+
+      if (!passesAllFilters) {
+        return false;
+      }
+    } else {
+      const passesSomeFilters = filterModel.items.some(filterItemPredicate);
+
+      if (!passesSomeFilters) {
+        return false;
+      }
+    }
+  } // get result for quick filter model
+
+
+  if (cleanedAllQuickFilterResults.length > 0 && filterModel.quickFilterValues != null) {
+    // Return true if the item pass with one of the rows
+    const quickFilterValuePredicate = value => {
+      return cleanedAllQuickFilterResults.some(quickFilterValueResult => quickFilterValueResult[value]);
+    };
+
+    if (quickFilterLogicOperator === _models.GridLinkOperator.And) {
+      const passesAllQuickFilterValues = filterModel.quickFilterValues.every(quickFilterValuePredicate);
+
+      if (!passesAllQuickFilterValues) {
+        return false;
+      }
+    } else {
+      const passesSomeQuickFilterValues = filterModel.quickFilterValues.some(quickFilterValuePredicate);
+
+      if (!passesSomeQuickFilterValues) {
+        return false;
+      }
+    }
   }
 
-  return (rowId, shouldApplyFilter) => isRowMatchingFilterItems(rowId, shouldApplyFilter) && isRowMatchingQuickFilter(rowId, shouldApplyFilter);
+  return true;
 };
 
-exports.buildAggregatedFilterApplier = buildAggregatedFilterApplier;
+exports.passFilterLogic = passFilterLogic;

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

@@ -82,7 +82,8 @@ const useGridFilter = (apiRef, props) => {
       const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(state, apiRef.current.instanceId);
       const isRowMatchingFilters = props.filterMode === _gridFeatureMode.GridFeatureModeConstant.client ? (0, _gridFilterUtils.buildAggregatedFilterApplier)(filterModel, apiRef) : null;
       const filteringResult = apiRef.current.unstable_applyStrategyProcessor('filtering', {
-        isRowMatchingFilters
+        isRowMatchingFilters,
+        filterModel: filterModel != null ? filterModel : (0, _gridFilterState.getDefaultGridFilterModel)()
       });
       return (0, _extends2.default)({}, state, {
         filter: (0, _extends2.default)({}, state.filter, filteringResult)
@@ -294,7 +295,19 @@ const useGridFilter = (apiRef, props) => {
 
       for (let i = 0; i < rowIds.length; i += 1) {
         const rowId = rowIds[i];
-        filteredRowsLookup[rowId] = params.isRowMatchingFilters(rowId);
+        let isRowPassing;
+
+        if (typeof rowId === 'string' && rowId.startsWith('auto-generated-group-footer')) {
+          isRowPassing = true;
+        } else {
+          const {
+            passingFilterItems,
+            passingQuickFilterValues
+          } = params.isRowMatchingFilters(rowId);
+          isRowPassing = (0, _gridFilterUtils.passFilterLogic)([passingFilterItems], [passingQuickFilterValues], params.filterModel);
+        }
+
+        filteredRowsLookup[rowId] = isRowPassing;
       }
 
       return {

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

@@ -87,6 +87,12 @@ const useGridFocus = (apiRef, props) => {
       return;
     }
 
+    if (focusedCell) {
+      // There's a focused cell but another cell was clicked
+      // Publishes an event to notify that the focus was lost
+      apiRef.current.publishEvent('cellFocusOut', apiRef.current.getCellParams(focusedCell.id, focusedCell.field));
+    }
+
     apiRef.current.publishEvent('cellFocusIn', apiRef.current.getCellParams(id, field));
   }, [apiRef, logger]);
   const setColumnHeaderFocus = React.useCallback((field, event = {}) => {
@@ -218,11 +224,7 @@ const useGridFocus = (apiRef, props) => {
 
     if (!apiRef.current.getRow(focusedCell.id)) {
       return;
-    } // There's a focused cell but another cell was clicked
-    // Publishes an event to notify that the focus was lost
-
-
-    apiRef.current.publishEvent('cellFocusOut', apiRef.current.getCellParams(focusedCell.id, focusedCell.field), event);
+    }
 
     if (cellParams) {
       apiRef.current.setCellFocus(cellParams.id, cellParams.field);
@@ -233,7 +235,10 @@ const useGridFocus = (apiRef, props) => {
           columnHeader: null
         }
       }));
-      apiRef.current.forceUpdate();
+      apiRef.current.forceUpdate(); // There's a focused cell but another element (not a cell) was clicked
+      // Publishes an event to notify that the focus was lost
+
+      apiRef.current.publishEvent('cellFocusOut', apiRef.current.getCellParams(focusedCell.id, focusedCell.field), event);
     }
   }, [apiRef]);
   const handleCellModeChange = React.useCallback(params => {