@mui/x-data-grid 5.14.0 → 5.15.2

package/hooks/features/dimensions/useGridDimensions.js

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

package/hooks/features/editRows/useGridCellEditing.new.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
-export declare const useGridCellEditing: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'editMode' | 'processRowUpdate' | 'onCellEditStart' | 'onCellEditStop' | 'cellModesModel' | 'onCellModesModelChange' | 'onProcessRowUpdateError' | 'signature'>) => void;
+export declare const useGridCellEditing: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'editMode' | 'processRowUpdate' | 'onCellEditStart' | 'onCellEditStop' | 'cellModesModel' | 'onCellModesModelChange' | 'onProcessRowUpdateError' | 'signature' | 'disableIgnoreModificationsIfProcessingProps'>) => void;

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

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

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

package/hooks/features/editRows/useGridEditing.new.d.ts

@@ -3,4 +3,4 @@ import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
 export declare const editingStateInitializer: GridStateInitializer;
-export declare const useGridEditing: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'isCellEditable' | 'editMode' | 'processRowUpdate'>) => void;
+export declare const useGridEditing: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'isCellEditable' | 'editMode' | 'processRowUpdate' | 'disableIgnoreModificationsIfProcessingProps'>) => void;

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

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

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

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

package/hooks/features/editRows/useGridRowEditing.new.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
-export declare const useGridRowEditing: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'editMode' | 'processRowUpdate' | 'onRowEditStart' | 'onRowEditStop' | 'onProcessRowUpdateError' | 'rowModesModel' | 'onRowModesModelChange' | 'signature'>) => void;
+export declare const useGridRowEditing: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'editMode' | 'processRowUpdate' | 'onRowEditStart' | 'onRowEditStop' | 'onProcessRowUpdateError' | 'rowModesModel' | 'onRowModesModelChange' | 'signature' | 'disableIgnoreModificationsIfProcessingProps'>) => void;

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

@@ -16,6 +16,7 @@ import { GridRowEditStopReasons, GridRowEditStartReasons } from '../../../models
 const missingOnProcessRowUpdateErrorWarning = buildWarning(['MUI: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, e.g. `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see http://mui.com/components/data-grid/editing/#persistence.'], 'error');
 export const useGridRowEditing = (apiRef, props) => {
   const [rowModesModel, setRowModesModel] = React.useState({});
+  const rowModesModelRef = React.useRef(rowModesModel);
   const prevRowModesModel = React.useRef({});
   const focusTimeout = React.useRef(null);
   const nextFocusedCell = React.useRef(null);
@@ -90,6 +91,11 @@ export const useGridRowEditing = (apiRef, props) => {
         // The row might have been deleted during the click
         if (!apiRef.current.getRow(params.id)) {
           return;
+        } // The row may already changed its mode
+
+
+        if (apiRef.current.getRowMode(params.id) === GridRowModes.View) {
+          return;
         }
 
         const rowParams = apiRef.current.getRowParams(params.id);
@@ -153,15 +159,14 @@ export const useGridRowEditing = (apiRef, props) => {
     } else if (params.isEditable) {
       let reason;
 
-      if (isPrintableKey(event.key)) {
-        if (event.ctrlKey && event.key !== 'v' || event.metaKey && event.key !== 'v' || event.altKey) {
-          return;
-        }
-
+      if (isPrintableKey(event)) {
+        reason = GridRowEditStartReasons.printableKeyDown;
+      } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
         reason = GridRowEditStartReasons.printableKeyDown;
       } else if (event.key === 'Enter') {
         reason = GridRowEditStartReasons.enterKeyDown;
-      } else if (event.key === 'Delete') {
+      } else if (event.key === 'Delete' || event.key === 'Backspace') {
+        // Delete on Windows, Backspace on macOS
         reason = GridRowEditStartReasons.deleteKeyDown;
       }
 
@@ -214,7 +219,7 @@ export const useGridRowEditing = (apiRef, props) => {
     let ignoreModifications = reason === 'escapeKeyDown';
     const editingState = gridEditRowsStateSelector(apiRef.current.state);
 
-    if (!ignoreModifications) {
+    if (!ignoreModifications && !props.disableIgnoreModificationsIfProcessingProps) {
       // The user wants to stop editing the cell but we can't wait for the props to be processed.
       // In this case, discard the modifications if any field is processing its props.
       ignoreModifications = Object.values(editingState[id]).some(fieldProps => {
@@ -228,7 +233,7 @@ export const useGridRowEditing = (apiRef, props) => {
       field,
       cellToFocusAfter
     });
-  }, [apiRef]);
+  }, [apiRef, props.disableIgnoreModificationsIfProcessingProps]);
   useGridApiEventHandler(apiRef, 'cellDoubleClick', runIfEditModeIsRow(handleCellDoubleClick));
   useGridApiEventHandler(apiRef, 'cellFocusIn', runIfEditModeIsRow(handleCellFocusIn));
   useGridApiEventHandler(apiRef, 'cellFocusOut', runIfEditModeIsRow(handleCellFocusOut));
@@ -261,10 +266,11 @@ export const useGridRowEditing = (apiRef, props) => {
     }
 
     setRowModesModel(newModel);
+    rowModesModelRef.current = newModel;
     apiRef.current.publishEvent('rowModesModelChange', newModel);
   }, [apiRef, onRowModesModelChange, props.rowModesModel, signature]);
   const updateRowInRowModesModel = React.useCallback((id, newProps) => {
-    const newModel = _extends({}, rowModesModel);
+    const newModel = _extends({}, rowModesModelRef.current);
 
     if (newProps !== null) {
       newModel[id] = _extends({}, newProps);
@@ -273,7 +279,7 @@ export const useGridRowEditing = (apiRef, props) => {
     }
 
     updateRowModesModel(newModel);
-  }, [rowModesModel, updateRowModesModel]);
+  }, [updateRowModesModel]);
   const updateOrDeleteRowState = React.useCallback((id, newProps) => {
     apiRef.current.setState(state => {
       const newEditingState = _extends({}, state.editRows);

package/hooks/features/export/utils.js

@@ -1,6 +1,6 @@
 import { gridColumnDefinitionsSelector, gridVisibleColumnDefinitionsSelector } from '../columns';
 import { gridFilteredSortedRowIdsSelector } from '../filter';
-import { gridRowTreeSelector } from '../rows/gridRowsSelector';
+import { gridPinnedRowsSelector, gridRowTreeSelector } from '../rows/gridRowsSelector';
 export const getColumnsToExport = ({
   apiRef,
   options
@@ -17,6 +17,8 @@ export const getColumnsToExport = ({
 export const defaultGetRowsToExport = ({
   apiRef
 }) => {
+  var _pinnedRows$top, _pinnedRows$bottom;
+
   const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
   const rowTree = gridRowTreeSelector(apiRef);
   const selectedRows = apiRef.current.getSelectedRows();
@@ -25,6 +27,11 @@ export const defaultGetRowsToExport = ({
 
     return ((_rowTree$id$position = rowTree[id].position) != null ? _rowTree$id$position : 'body') === 'body';
   });
+  const pinnedRows = 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/hooks/features/filter/gridFilterState.d.ts

@@ -1,5 +1,12 @@
+import { GridFilterItem } from '../../../models/gridFilterItem';
 import { GridFilterModel } from '../../../models/gridFilterModel';
 import { GridRowId } from '../../../models/gridRows';
+export declare type GridFilterItemResult = {
+    [key: Required<GridFilterItem>['id']]: boolean;
+};
+export declare type GridQuickFilterValueResult = {
+    [key: string]: boolean;
+};
 export declare const getDefaultGridFilterModel: () => GridFilterModel;
 export interface GridFilterState {
     filterModel: GridFilterModel;
@@ -31,8 +38,12 @@ export interface GridFilterInitialState {
  * @param {GridRowId} rowId The id of the row we want to filter.
  * @param {(filterItem: GridFilterItem) => boolean} shouldApplyItem An optional callback to allow the filtering engine to only apply some items.
  */
-export declare type GridAggregatedFilterItemApplier = (rowId: GridRowId, shouldApplyItem?: (columnField: string) => boolean) => boolean;
+export declare type GridAggregatedFilterItemApplier = (rowId: GridRowId, shouldApplyItem?: (columnField: string) => boolean) => {
+    passingFilterItems: null | GridFilterItemResult;
+    passingQuickFilterValues: null | GridQuickFilterValueResult;
+};
 export interface GridFilteringMethodParams {
     isRowMatchingFilters: GridAggregatedFilterItemApplier | null;
+    filterModel: GridFilterModel;
 }
 export declare type GridFilteringMethodValue = Omit<GridFilterState, 'filterModel'>;

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { GridFilterItem, GridFilterModel } from '../../../models';
+import { GridFilterItem, GridFilterModel, GridRowId } from '../../../models';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
-import { GridAggregatedFilterItemApplier } from './gridFilterState';
+import { GridAggregatedFilterItemApplier, GridFilterItemResult, GridQuickFilterValueResult } from './gridFilterState';
+declare type GridFilterItemApplierNotAggregated = (rowId: GridRowId, shouldApplyItem?: (columnField: string) => boolean) => GridFilterItemResult;
 /**
  * Adds default values to the optional fields of a filter items.
  * @param {GridFilterItem} item The raw filter item.
@@ -19,12 +20,14 @@ export declare const mergeStateWithFilterModel: (filterModel: GridFilterModel, d
  * @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 declare const buildAggregatedFilterItemsApplier: (filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridApiCommunity>) => GridAggregatedFilterItemApplier | null;
+export declare const buildAggregatedFilterItemsApplier: (filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridApiCommunity>) => GridFilterItemApplierNotAggregated | null;
 /**
  * Generates a method to easily check if a row is matching the current quick filter.
  * @param {any[]} values 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 declare const buildAggregatedQuickFilterApplier: (filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridApiCommunity>) => GridAggregatedFilterItemApplier | null;
-export declare const buildAggregatedFilterApplier: (filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridApiCommunity>) => GridAggregatedFilterItemApplier | null;
+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 {};

package/hooks/features/filter/gridFilterUtils.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { GridLinkOperator } from '../../../models';
+import { getDefaultGridFilterModel } from './gridFilterState';
 import { buildWarning } from '../../../utils/warning';
 import { gridColumnFieldsSelector, gridColumnLookupSelector } from '../columns';
-import { gridRowTreeSelector } from '../rows/gridRowsSelector';
 
 /**
  * Adds default values to the optional fields of a filter items.
@@ -78,10 +78,8 @@ export const mergeStateWithFilterModel = (filterModel, disableMultipleColumnsFil
 
 export const buildAggregatedFilterItemsApplier = (filterModel, apiRef) => {
   const {
-    items,
-    linkOperator = GridLinkOperator.And
+    items
   } = filterModel;
-  const tree = gridRowTreeSelector(apiRef);
 
   const getFilterCallbackFromItem = filterItem => {
     if (!filterItem.columnField || !filterItem.operatorValue) {
@@ -145,18 +143,12 @@ export 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 === 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;
   };
 };
 /**
@@ -168,8 +160,7 @@ export const buildAggregatedFilterItemsApplier = (filterModel, apiRef) => {
 
 export const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
   const {
-    quickFilterValues = [],
-    quickFilterLogicOperator = GridLinkOperator.And
+    quickFilterValues = []
   } = filterModel;
 
   if (quickFilterValues.length === 0) {
@@ -190,6 +181,11 @@ export 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 = [];
@@ -198,10 +194,10 @@ export 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 === 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) {
@@ -209,36 +205,71 @@ export 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
+      });
+      quickFilterValueResult[value] = isPassing;
+    });
+    return quickFilterValueResult;
+  };
+};
+export 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)
+  });
+};
+export const passFilterLogic = (allFilterItemResults, allQuickFilterResults, filterModel) => {
+  var _filterModel$quickFil, _filterModel$linkOper;
 
+  const cleanedAllFilterItemResults = allFilterItemResults.filter(result => result != null);
+  const cleanedAllQuickFilterResults = allQuickFilterResults.filter(result => result != null); // Defaultize operators
 
-    return sanitizedQuickFilterValues.some((value, index) => columnsFieldsToFilter.some(field => {
-      var _appliersPerColumnFie3, _appliersPerColumnFie4;
+  const quickFilterLogicOperator = (_filterModel$quickFil = filterModel.quickFilterLogicOperator) != null ? _filterModel$quickFil : getDefaultGridFilterModel().quickFilterLogicOperator;
+  const linkOperator = (_filterModel$linkOper = filterModel.linkOperator) != null ? _filterModel$linkOper : getDefaultGridFilterModel().linkOperator; // get result for filter items model
 
-      if (appliersPerColumnField[field][index] == null) {
+  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 === GridLinkOperator.And) {
+      const passesAllFilters = filterModel.items.every(filterItemPredicate);
+
+      if (!passesAllFilters) {
         return false;
       }
+    } else {
+      const passesSomeFilters = filterModel.items.some(filterItemPredicate);
 
-      return (_appliersPerColumnFie3 = (_appliersPerColumnFie4 = appliersPerColumnField[field])[index]) == null ? void 0 : _appliersPerColumnFie3.call(_appliersPerColumnFie4, usedCellParams[field]);
-    }));
-  };
-};
-export const buildAggregatedFilterApplier = (filterModel, apiRef) => {
-  const isRowMatchingFilterItems = buildAggregatedFilterItemsApplier(filterModel, apiRef);
-  const isRowMatchingQuickFilter = buildAggregatedQuickFilterApplier(filterModel, apiRef);
+      if (!passesSomeFilters) {
+        return false;
+      }
+    }
+  } // get result for quick filter model
 
-  if (isRowMatchingFilterItems == null && isRowMatchingQuickFilter == null) {
-    return null;
-  }
 
-  if (isRowMatchingFilterItems == null) {
-    return isRowMatchingQuickFilter;
-  }
+  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 === GridLinkOperator.And) {
+      const passesAllQuickFilterValues = filterModel.quickFilterValues.every(quickFilterValuePredicate);
 
-  if (isRowMatchingQuickFilter == null) {
-    return isRowMatchingFilterItems;
+      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;
 };

package/hooks/features/filter/useGridFilter.js

@@ -12,7 +12,7 @@ import { useFirstRender } from '../../utils/useFirstRender';
 import { gridRowIdsSelector } from '../rows';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { GRID_DEFAULT_STRATEGY, useGridRegisterStrategyProcessor } from '../../core/strategyProcessing';
-import { buildAggregatedFilterApplier, sanitizeFilterModel, mergeStateWithFilterModel, cleanFilterItem } from './gridFilterUtils';
+import { buildAggregatedFilterApplier, sanitizeFilterModel, mergeStateWithFilterModel, cleanFilterItem, passFilterLogic } from './gridFilterUtils';
 import { isDeepEqual } from '../../../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const filterStateInitializer = (state, props, apiRef) => {
@@ -49,7 +49,8 @@ export const useGridFilter = (apiRef, props) => {
       const filterModel = gridFilterModelSelector(state, apiRef.current.instanceId);
       const isRowMatchingFilters = props.filterMode === GridFeatureModeConstant.client ? buildAggregatedFilterApplier(filterModel, apiRef) : null;
       const filteringResult = apiRef.current.unstable_applyStrategyProcessor('filtering', {
-        isRowMatchingFilters
+        isRowMatchingFilters,
+        filterModel: filterModel != null ? filterModel : getDefaultGridFilterModel()
       });
       return _extends({}, state, {
         filter: _extends({}, state.filter, filteringResult)
@@ -261,7 +262,19 @@ export 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 = passFilterLogic([passingFilterItems], [passingQuickFilterValues], params.filterModel);
+        }
+
+        filteredRowsLookup[rowId] = isRowPassing;
       }
 
       return {

package/hooks/features/focus/useGridFocus.js

@@ -60,6 +60,12 @@ export 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 = {}) => {
@@ -191,11 +197,7 @@ export 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);
@@ -206,7 +208,10 @@ export 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 => {