@mui/x-data-grid 6.9.0 → 6.9.2

package/node/colDef/gridStringOperators.js

@@ -7,36 +7,34 @@ exports.getGridStringQuickFilterFn = exports.getGridStringOperators = void 0;
 var _GridFilterInputValue = require("../components/panel/filterPanel/GridFilterInputValue");
 var _utils = require("../utils/utils");
 var _GridFilterInputMultipleValue = require("../components/panel/filterPanel/GridFilterInputMultipleValue");
-const getGridStringQuickFilterFn = value => {
+var _utils2 = require("./utils");
+const getGridStringQuickFilterFn = (0, _utils2.tagInternalFilter)(value => {
   if (!value) {
     return null;
   }
   const filterRegex = new RegExp((0, _utils.escapeRegExp)(value), 'i');
-  return ({
-    formattedValue: columnValue
-  }) => {
+  return (_, row, column, apiRef) => {
+    const columnValue = apiRef.current.getRowFormattedValue(row, column);
     return columnValue != null ? filterRegex.test(columnValue.toString()) : false;
   };
-};
+});
 exports.getGridStringQuickFilterFn = getGridStringQuickFilterFn;
-const getGridStringOperators = (disableTrim = false) => [{
+const getGridStringOperators = (disableTrim = false) => (0, _utils2.convertLegacyOperators)([{
   value: 'contains',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (!filterItem.value) {
       return null;
     }
     const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
     const filterRegex = new RegExp((0, _utils.escapeRegExp)(filterItemValue), 'i');
-    return ({
-      value
-    }) => {
-      return value != null ? filterRegex.test(value.toString()) : false;
+    return value => {
+      return value != null ? filterRegex.test(String(value)) : false;
     };
   },
   InputComponent: _GridFilterInputValue.GridFilterInputValue
 }, {
   value: 'equals',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (!filterItem.value) {
       return null;
     }
@@ -45,66 +43,56 @@ const getGridStringOperators = (disableTrim = false) => [{
       sensitivity: 'base',
       usage: 'search'
     });
-    return ({
-      value
-    }) => {
+    return value => {
       return value != null ? collator.compare(filterItemValue, value.toString()) === 0 : false;
     };
   },
   InputComponent: _GridFilterInputValue.GridFilterInputValue
 }, {
   value: 'startsWith',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (!filterItem.value) {
       return null;
     }
     const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
     const filterRegex = new RegExp(`^${(0, _utils.escapeRegExp)(filterItemValue)}.*$`, 'i');
-    return ({
-      value
-    }) => {
+    return value => {
       return value != null ? filterRegex.test(value.toString()) : false;
     };
   },
   InputComponent: _GridFilterInputValue.GridFilterInputValue
 }, {
   value: 'endsWith',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (!filterItem.value) {
       return null;
     }
     const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
     const filterRegex = new RegExp(`.*${(0, _utils.escapeRegExp)(filterItemValue)}$`, 'i');
-    return ({
-      value
-    }) => {
+    return value => {
       return value != null ? filterRegex.test(value.toString()) : false;
     };
   },
   InputComponent: _GridFilterInputValue.GridFilterInputValue
 }, {
   value: 'isEmpty',
-  getApplyFilterFn: () => {
-    return ({
-      value
-    }) => {
+  getApplyFilterFnV7: () => {
+    return value => {
       return value === '' || value == null;
     };
   },
   requiresFilterValue: false
 }, {
   value: 'isNotEmpty',
-  getApplyFilterFn: () => {
-    return ({
-      value
-    }) => {
+  getApplyFilterFnV7: () => {
+    return value => {
       return value !== '' && value != null;
     };
   },
   requiresFilterValue: false
 }, {
   value: 'isAnyOf',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (!Array.isArray(filterItem.value) || filterItem.value.length === 0) {
       return null;
     }
@@ -113,12 +101,10 @@ const getGridStringOperators = (disableTrim = false) => [{
       sensitivity: 'base',
       usage: 'search'
     });
-    return ({
-      value
-    }) => value != null ? filterItemValue.some(filterValue => {
+    return value => value != null ? filterItemValue.some(filterValue => {
       return collator.compare(filterValue, value.toString() || '') === 0;
     }) : false;
   },
   InputComponent: _GridFilterInputMultipleValue.GridFilterInputMultipleValue
-}];
+}]);
 exports.getGridStringOperators = getGridStringOperators;

package/node/colDef/utils.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GLOBAL_API_REF = void 0;
+exports.convertFilterV7ToLegacy = convertFilterV7ToLegacy;
+exports.convertLegacyOperators = convertLegacyOperators;
+exports.convertQuickFilterV7ToLegacy = convertQuickFilterV7ToLegacy;
+exports.isInternalFilter = isInternalFilter;
+exports.tagInternalFilter = tagInternalFilter;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+/**
+ * A global API ref, for v7-to-legacy converter
+ */
+const GLOBAL_API_REF = {
+  current: null
+};
+
+/**
+ * A tagger to determine if the filter is internal or custom user-supplied.
+ * To be a valid internal filter, the V7 function *must* be defined/redefined at
+ * the same time as the legacy one.
+ * https://github.com/mui/mui-x/pull/9254#discussion_r1231095551
+ */
+exports.GLOBAL_API_REF = GLOBAL_API_REF;
+function tagInternalFilter(fn) {
+  fn.isInternal = true;
+  return fn;
+}
+function isInternalFilter(fn) {
+  return fn !== undefined && fn.isInternal === true;
+}
+function convertFilterV7ToLegacy(fn) {
+  return tagInternalFilter((filterItem, column) => {
+    const filterFn = fn(filterItem, column);
+    if (!filterFn) {
+      return filterFn;
+    }
+    return cellParams => {
+      return filterFn(cellParams.value, cellParams.row, column, GLOBAL_API_REF.current);
+    };
+  });
+}
+function convertLegacyOperators(ops) {
+  return ops.map(op => {
+    return (0, _extends2.default)({}, op, {
+      getApplyFilterFn: convertFilterV7ToLegacy(op.getApplyFilterFnV7),
+      getApplyFilterFnV7: tagInternalFilter(op.getApplyFilterFnV7)
+    });
+  });
+}
+function convertQuickFilterV7ToLegacy(fn) {
+  return tagInternalFilter((filterItem, column, apiRef) => {
+    const filterFn = fn(filterItem, column, apiRef);
+    if (!filterFn) {
+      return filterFn;
+    }
+    return cellParams => {
+      return filterFn(cellParams.value, cellParams.row, column, apiRef);
+    };
+  });
+}

package/node/components/GridPagination.js

@@ -47,21 +47,35 @@ const GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(pro
   const handlePageChange = React.useCallback((_, page) => {
     apiRef.current.setPage(page);
   }, [apiRef]);
+  const isPageSizeIncludedInPageSizeOptions = pageSize => {
+    for (let i = 0; i < rootProps.pageSizeOptions.length; i += 1) {
+      const option = rootProps.pageSizeOptions[i];
+      if (typeof option === 'number') {
+        if (option === pageSize) {
+          return true;
+        }
+      } else if (option.value === pageSize) {
+        return true;
+      }
+    }
+    return false;
+  };
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const warnedOnceMissingInPageSizeOptions = React.useRef(false);
     const pageSize = rootProps.paginationModel?.pageSize ?? paginationModel.pageSize;
-    if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !rootProps.pageSizeOptions.includes(pageSize)) {
+    if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !isPageSizeIncludedInPageSizeOptions(pageSize)) {
       console.warn([`MUI: The page size \`${paginationModel.pageSize}\` is not preset in the \`pageSizeOptions\``, `Add it to show the pagination select.`].join('\n'));
       warnedOnceMissingInPageSizeOptions.current = true;
     }
   }
+  const pageSizeOptions = isPageSizeIncludedInPageSizeOptions(paginationModel.pageSize) ? rootProps.pageSizeOptions : [];
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPaginationRoot, (0, _extends2.default)({
     ref: ref,
     component: "div",
     count: rowCount,
     page: paginationModel.page <= lastPage ? paginationModel.page : lastPage,
-    rowsPerPageOptions: rootProps.pageSizeOptions?.includes(paginationModel.pageSize) ? rootProps.pageSizeOptions : [],
+    rowsPerPageOptions: pageSizeOptions,
     rowsPerPage: paginationModel.pageSize,
     onPageChange: handlePageChange,
     onRowsPerPageChange: handlePageSizeChange

package/node/components/cell/GridCell.js

@@ -22,7 +22,7 @@ var _gridFocusStateSelector = require("../../hooks/features/focus/gridFocusState
 var _useGridParamsApi = require("../../hooks/features/rows/useGridParamsApi");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["changeReason", "unstable_updateValueOnRender"],
-  _excluded2 = ["align", "children", "colIndex", "column", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "isSelected", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+  _excluded2 = ["align", "children", "editCellState", "colIndex", "column", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "isSelected", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
   _excluded3 = ["column", "rowId", "editCellState", "align", "children", "colIndex", "height", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
   _excluded4 = ["changeReason", "unstable_updateValueOnRender"];
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */

package/node/components/cell/GridEditDateCell.js

@@ -121,7 +121,7 @@ function GridEditDateCell(props) {
   const meta = apiRef.current.unstable_getEditCellMeta(id, field);
   const handleInputRef = el => {
     inputRef.current = el;
-    if (meta.unstable_updateValueOnRender && !hasUpdatedEditValueOnMount.current) {
+    if (meta?.unstable_updateValueOnRender && !hasUpdatedEditValueOnMount.current) {
       const inputValue = inputRef.current.value;
       const parsedDate = parseValueToDate(inputValue);
       setValueState({

package/node/components/cell/GridEditInputCell.js

@@ -77,12 +77,12 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       unstable_skipValueParser: true
     }, event);
   }, [apiRef, debounceMs, field, id, onValueChange]);
-  const meta = apiRef.current.unstable_getEditCellMeta ? apiRef.current.unstable_getEditCellMeta(id, field) : {};
+  const meta = apiRef.current.unstable_getEditCellMeta(id, field);
   React.useEffect(() => {
-    if (meta.changeReason !== 'debouncedSetEditCellValue') {
+    if (meta?.changeReason !== 'debouncedSetEditCellValue') {
       setValueState(value);
     }
-  }, [meta.changeReason, value]);
+  }, [meta, value]);
   (0, _utils.unstable_useEnhancedEffect)(() => {
     if (hasFocus) {
       inputRef.current.focus();

package/node/hooks/features/columns/gridColumnsUtils.js

@@ -29,6 +29,7 @@ function computeFlexColumnsWidth({
   totalFlexUnits,
   flexColumns
 }) {
+  const uniqueFlexColumns = new Set(flexColumns.map(col => col.field));
   const flexColumnsLookup = {
     all: {},
     frozenFields: [],
@@ -44,7 +45,7 @@ function computeFlexColumnsWidth({
   // Step 5 of https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths
   function loopOverFlexItems() {
     // 5a: If all the flex items on the line are frozen, free space has been distributed.
-    if (flexColumnsLookup.frozenFields.length === flexColumns.length) {
+    if (flexColumnsLookup.frozenFields.length === uniqueFlexColumns.size) {
       return;
     }
     const violationsLookup = {

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

@@ -80,7 +80,7 @@ function useGridDimensions(apiRef, props) {
     let hasScrollY;
     if (props.autoHeight) {
       hasScrollY = false;
-      hasScrollX = Math.round(columnsTotalWidth) > rootDimensionsRef.current.width;
+      hasScrollX = Math.round(columnsTotalWidth) > Math.round(rootDimensionsRef.current.width);
       viewportOuterSize = {
         width: rootDimensionsRef.current.width,
         height: rowsMeta.currentPageTotalHeight + (hasScrollX ? scrollBarSize : 0)
@@ -96,7 +96,7 @@ function useGridDimensions(apiRef, props) {
           height: rowsMeta.currentPageTotalHeight
         },
         container: {
-          width: viewportOuterSize.width,
+          width: Math.round(viewportOuterSize.width),
           height: viewportOuterSize.height - pinnedRowsHeight.top - pinnedRowsHeight.bottom
         },
         scrollBarSize

package/node/hooks/features/editing/useGridEditing.js

@@ -117,7 +117,7 @@ const useGridEditing = (apiRef, props) => {
   }, [apiRef, props.editMode]);
   const getEditCellMeta = React.useCallback((id, field) => {
     const editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef.current.state);
-    return editingState[id][field];
+    return editingState[id]?.[field] ?? null;
   }, [apiRef]);
   const editingSharedApi = {
     isCellEditable,

package/node/hooks/features/editing/useGridRowEditing.js

@@ -123,7 +123,7 @@ const useGridRowEditing = (apiRef, props) => {
       } else if (event.key === 'Enter') {
         reason = _gridRowParams.GridRowEditStopReasons.enterKeyDown;
       } else if (event.key === 'Tab') {
-        const columnFields = (0, _gridColumnsSelector.gridColumnFieldsSelector)(apiRef).filter(field => {
+        const columnFields = (0, _gridColumnsSelector.gridVisibleColumnFieldsSelector)(apiRef).filter(field => {
           const column = apiRef.current.getColumn(field);
           if (column.type === _colDef.GRID_ACTIONS_COLUMN_TYPE) {
             return true;

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 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 _utils = require("../../../colDef/utils");
 var _gridFilterState = require("./gridFilterState");
 var _warning = require("../../../utils/warning");
 var _columns = require("../columns");
@@ -94,27 +95,47 @@ const getFilterCallbackFromItem = (filterItem, apiRef) => {
   if (!filterOperator) {
     throw new Error(`MUI: No filter operator found for column '${column.field}' and operator value '${newFilterItem.operator}'.`);
   }
+  const hasUserFunctionLegacy = !(0, _utils.isInternalFilter)(filterOperator.getApplyFilterFn);
+  const hasUserFunctionV7 = !(0, _utils.isInternalFilter)(filterOperator.getApplyFilterFnV7);
+  if (filterOperator.getApplyFilterFnV7 && !(hasUserFunctionLegacy && !hasUserFunctionV7)) {
+    const applyFilterOnRow = filterOperator.getApplyFilterFnV7(newFilterItem, column);
+    if (typeof applyFilterOnRow !== 'function') {
+      return null;
+    }
+    return {
+      v7: true,
+      item: newFilterItem,
+      fn: row => {
+        const value = apiRef.current.getRowValue(row, column);
+        return applyFilterOnRow(value, row, column, apiRef);
+      }
+    };
+  }
   const applyFilterOnRow = filterOperator.getApplyFilterFn(newFilterItem, column);
   if (typeof applyFilterOnRow !== 'function') {
     return null;
   }
-  const fn = rowId => {
-    const cellParams = apiRef.current.getCellParams(rowId, newFilterItem.field);
-    return applyFilterOnRow(cellParams);
-  };
   return {
-    fn,
-    item: newFilterItem
+    v7: false,
+    item: newFilterItem,
+    fn: rowId => {
+      const params = apiRef.current.getCellParams(rowId, newFilterItem.field);
+      _utils.GLOBAL_API_REF.current = apiRef;
+      const result = applyFilterOnRow(params);
+      _utils.GLOBAL_API_REF.current = null;
+      return result;
+    }
   };
 };
 
 /**
  * Generates a method to easily check if a row is matching the current filter model.
+ * @param {GridRowIdGetter | undefined} getRowId The getter for row's id.
  * @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 buildAggregatedFilterItemsApplier = (filterModel, apiRef) => {
+const buildAggregatedFilterItemsApplier = (getRowId, filterModel, apiRef) => {
   const {
     items
   } = filterModel;
@@ -122,76 +143,111 @@ const buildAggregatedFilterItemsApplier = (filterModel, apiRef) => {
   if (appliers.length === 0) {
     return null;
   }
-  return (rowId, shouldApplyFilter) => {
+  return (row, shouldApplyFilter) => {
     const resultPerItemId = {};
-    const filteredAppliers = shouldApplyFilter ? appliers.filter(applier => shouldApplyFilter(applier.item.field)) : appliers;
-    filteredAppliers.forEach(applier => {
-      resultPerItemId[applier.item.id] = applier.fn(rowId);
-    });
+    for (let i = 0; i < appliers.length; i += 1) {
+      const applier = appliers[i];
+      if (!shouldApplyFilter || shouldApplyFilter(applier.item.field)) {
+        resultPerItemId[applier.item.id] = applier.v7 ? applier.fn(row) : applier.fn(getRowId ? getRowId(row) : row.id);
+      }
+    }
     return resultPerItemId;
   };
 };
 
 /**
  * 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 {GridRowIdGetter | undefined} getRowId The getter for row's id.
+ * @param {any[]} 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.
  */
 exports.buildAggregatedFilterItemsApplier = buildAggregatedFilterItemsApplier;
-const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
-  const {
-    quickFilterValues = []
-  } = filterModel;
+const buildAggregatedQuickFilterApplier = (getRowId, filterModel, apiRef) => {
+  const quickFilterValues = filterModel.quickFilterValues?.filter(Boolean) ?? [];
   if (quickFilterValues.length === 0) {
     return null;
   }
-  const columnsFields = (0, _columns.gridColumnFieldsSelector)(apiRef);
-  const appliersPerField = {};
-  columnsFields.forEach(field => {
+  const columnFields = (0, _columns.gridColumnFieldsSelector)(apiRef);
+  const appliersPerField = [];
+  columnFields.forEach(field => {
     const column = apiRef.current.getColumn(field);
     const getApplyQuickFilterFn = column?.getApplyQuickFilterFn;
-    if (!getApplyQuickFilterFn) {
-      return;
+    const getApplyQuickFilterFnV7 = column?.getApplyQuickFilterFnV7;
+    const hasUserFunctionLegacy = !(0, _utils.isInternalFilter)(getApplyQuickFilterFn);
+    const hasUserFunctionV7 = !(0, _utils.isInternalFilter)(getApplyQuickFilterFnV7);
+    if (getApplyQuickFilterFnV7 && !(hasUserFunctionLegacy && !hasUserFunctionV7)) {
+      appliersPerField.push({
+        column,
+        appliers: quickFilterValues.map(value => ({
+          v7: true,
+          fn: getApplyQuickFilterFnV7(value, column, apiRef)
+        }))
+      });
+    } else if (getApplyQuickFilterFn) {
+      appliersPerField.push({
+        column,
+        appliers: quickFilterValues.map(value => ({
+          v7: false,
+          fn: getApplyQuickFilterFn(value, column, apiRef)
+        }))
+      });
     }
-    appliersPerField[field] = quickFilterValues.map(value => getApplyQuickFilterFn(value, column, apiRef));
   });
-
-  // If some value does not have an applier we ignore them
-  const sanitizedQuickFilterValues = quickFilterValues.filter((value, index) => Object.keys(appliersPerField).some(field => appliersPerField[field][index] != null));
-  if (sanitizedQuickFilterValues.length === 0) {
-    return null;
-  }
-  return (rowId, shouldApplyFilter) => {
+  return function isRowMatchingQuickFilter(row, shouldApplyFilter) {
+    const result = {};
     const usedCellParams = {};
-    const fieldsToFilter = [];
-    Object.keys(appliersPerField).forEach(field => {
-      if (!shouldApplyFilter || shouldApplyFilter(field)) {
-        usedCellParams[field] = apiRef.current.getCellParams(rowId, field);
-        fieldsToFilter.push(field);
-      }
-    });
-    const quickFilterValueResult = {};
-    sanitizedQuickFilterValues.forEach((value, index) => {
-      const isPassing = fieldsToFilter.some(field => {
-        if (appliersPerField[field][index] == null) {
-          return false;
+
+    /* eslint-disable no-restricted-syntax, no-labels, no-continue */
+    outer: for (let v = 0; v < quickFilterValues.length; v += 1) {
+      const filterValue = quickFilterValues[v];
+      for (let i = 0; i < appliersPerField.length; i += 1) {
+        const {
+          column,
+          appliers
+        } = appliersPerField[i];
+        const {
+          field
+        } = column;
+        if (shouldApplyFilter && !shouldApplyFilter(field)) {
+          continue;
         }
-        return appliersPerField[field][index]?.(usedCellParams[field]);
-      });
-      quickFilterValueResult[value] = isPassing;
-    });
-    return quickFilterValueResult;
+        const applier = appliers[v];
+        const value = apiRef.current.getRowValue(row, column);
+        if (applier.fn === null) {
+          continue;
+        }
+        if (applier.v7) {
+          const isMatching = applier.fn(value, row, column, apiRef);
+          if (isMatching) {
+            result[filterValue] = true;
+            continue outer;
+          }
+        } else {
+          const cellParams = usedCellParams[field] ?? apiRef.current.getCellParams(getRowId ? getRowId(row) : row.id, field);
+          usedCellParams[field] = cellParams;
+          const isMatching = applier.fn(cellParams);
+          if (isMatching) {
+            result[filterValue] = true;
+            continue outer;
+          }
+        }
+      }
+      result[filterValue] = false;
+    }
+    /* eslint-enable no-restricted-syntax, no-labels, no-continue */
+
+    return result;
   };
 };
 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)
-  });
+const buildAggregatedFilterApplier = (getRowId, filterModel, apiRef) => {
+  const isRowMatchingFilterItems = buildAggregatedFilterItemsApplier(getRowId, filterModel, apiRef);
+  const isRowMatchingQuickFilter = buildAggregatedQuickFilterApplier(getRowId, filterModel, apiRef);
+  return function isRowMatchingFilters(row, shouldApplyFilter, result) {
+    result.passingFilterItems = isRowMatchingFilterItems?.(row, shouldApplyFilter) ?? null;
+    result.passingQuickFilterValues = isRowMatchingQuickFilter?.(row, shouldApplyFilter) ?? null;
+  };
 };
 exports.buildAggregatedFilterApplier = buildAggregatedFilterApplier;
 const isNotNull = result => result != null;

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

@@ -63,7 +63,7 @@ const useGridFilter = (apiRef, props) => {
   const updateFilteredRows = React.useCallback(() => {
     apiRef.current.setState(state => {
       const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(state, apiRef.current.instanceId);
-      const isRowMatchingFilters = props.filterMode === 'client' ? (0, _gridFilterUtils.buildAggregatedFilterApplier)(filterModel, apiRef) : null;
+      const isRowMatchingFilters = props.filterMode === 'client' ? (0, _gridFilterUtils.buildAggregatedFilterApplier)(props.getRowId, filterModel, apiRef) : null;
       const filteringResult = apiRef.current.applyStrategyProcessor('filtering', {
         isRowMatchingFilters,
         filterModel: filterModel ?? (0, _gridFilterState.getDefaultGridFilterModel)()
@@ -77,7 +77,7 @@ const useGridFilter = (apiRef, props) => {
       });
     });
     apiRef.current.publishEvent('filteredRowsSet');
-  }, [props.filterMode, apiRef]);
+  }, [apiRef, props.filterMode, props.getRowId]);
   const addColumnMenuItem = React.useCallback((columnMenuItems, colDef) => {
     if (colDef == null || colDef.filterable === false || props.disableColumnFilter) {
       return columnMenuItems;
@@ -260,36 +260,45 @@ const useGridFilter = (apiRef, props) => {
     }
     return initialValue;
   }, [props.slots.filterPanel, props.slotProps?.filterPanel]);
+  const dataRowIdToIdLookup = apiRef.current.state.rows.dataRowIdToModelLookup;
+  const rows = React.useMemo(() => Object.values(dataRowIdToIdLookup), [dataRowIdToIdLookup]);
+  const {
+    getRowId
+  } = props;
   const flatFilteringMethod = React.useCallback(params => {
-    if (props.filterMode === 'client' && params.isRowMatchingFilters) {
-      const tree = (0, _rows.gridRowTreeSelector)(apiRef);
-      const rowIds = tree[_rows.GRID_ROOT_GROUP_ID].children;
-      const filteredRowsLookup = {};
-      const filterCache = {};
-      for (let i = 0; i < rowIds.length; i += 1) {
-        const rowId = rowIds[i];
-        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, apiRef, filterCache);
-        }
-        filteredRowsLookup[rowId] = isRowPassing;
-      }
+    if (props.filterMode !== 'client' || !params.isRowMatchingFilters) {
       return {
-        filteredRowsLookup,
+        filteredRowsLookup: {},
         filteredDescendantCountLookup: {}
       };
     }
+    const dataRowIdToModelLookup = (0, _rows.gridRowsLookupSelector)(apiRef);
+    const filteredRowsLookup = {};
+    const {
+      isRowMatchingFilters
+    } = params;
+    const filterCache = {};
+    const result = {
+      passingFilterItems: null,
+      passingQuickFilterValues: null
+    };
+    for (let i = 0; i < rows.length; i += 1) {
+      const row = rows[i];
+      const id = getRowId ? getRowId(row) : row.id;
+      isRowMatchingFilters(row, undefined, result);
+      const isRowPassing = (0, _gridFilterUtils.passFilterLogic)([result.passingFilterItems], [result.passingQuickFilterValues], params.filterModel, apiRef, filterCache);
+      filteredRowsLookup[id] = isRowPassing;
+    }
+    const footerId = 'auto-generated-group-footer-root';
+    const footer = dataRowIdToModelLookup[footerId];
+    if (footer) {
+      filteredRowsLookup[footerId] = true;
+    }
     return {
-      filteredRowsLookup: {},
+      filteredRowsLookup,
       filteredDescendantCountLookup: {}
     };
-  }, [apiRef, props.filterMode]);
+  }, [apiRef, rows, props.filterMode, getRowId]);
   (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'columnMenu', addColumnMenuItem);
   (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);
   (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);