@mui/x-data-grid 9.11.0 → 9.13.0

package/hooks/features/columns/gridColumnsUtils.mjs

@@ -6,7 +6,6 @@ import { GridSignature } from "../../../constants/signature.mjs";
 import { gridColumnsStateSelector, gridColumnVisibilityModelSelector } from "./gridColumnsSelector.mjs";
 import { clamp } from "../../../utils/utils.mjs";
 import { gridDensityFactorSelector } from "../density/densitySelector.mjs";
-import { gridHeaderFilteringEnabledSelector } from "../headerFiltering/gridHeaderFilteringSelectors.mjs";
 import { gridColumnGroupsHeaderMaxDepthSelector } from "../columnGrouping/gridColumnGroupsSelector.mjs";
 export const COLUMNS_DIMENSION_PROPERTIES = ['maxWidth', 'minWidth', 'width', 'flex'];
 /**
@@ -345,7 +344,8 @@ export function getTotalHeaderHeight(apiRef, props) {
   }
   const densityFactor = gridDensityFactorSelector(apiRef);
   const maxDepth = gridColumnGroupsHeaderMaxDepthSelector(apiRef);
-  const isHeaderFilteringEnabled = gridHeaderFilteringEnabledSelector(apiRef);
+  // Not `gridHeaderFilteringEnabledSelector`: that state is synced in an effect, so it lags one render behind `props.headerFilters`.
+  const isHeaderFilteringEnabled = props.signature !== 'DataGrid' && (props.headerFilters ?? false);
   const columnHeadersHeight = Math.floor(props.columnHeaderHeight * densityFactor);
   const columnGroupHeadersHeight = Math.floor((props.columnGroupHeaderHeight ?? props.columnHeaderHeight) * densityFactor);
   const filterHeadersHeight = isHeaderFilteringEnabled ? Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor) : 0;

package/hooks/features/dataSource/gridDataSourceSelector.js

@@ -5,14 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.gridGetRowsParamsSelector = void 0;
 var _gridFilterSelector = require("../filter/gridFilterSelector");
+var _gridFilterUtils = require("../filter/gridFilterUtils");
 var _gridSortingSelector = require("../sorting/gridSortingSelector");
 var _gridPaginationSelector = require("../pagination/gridPaginationSelector");
+var _columns = require("../columns");
 var _createSelector = require("../../../utils/createSelector");
-const gridGetRowsParamsSelector = exports.gridGetRowsParamsSelector = (0, _createSelector.createSelector)(_gridFilterSelector.gridFilterModelSelector, _gridSortingSelector.gridSortModelSelector, _gridPaginationSelector.gridPaginationModelSelector, (filterModel, sortModel, paginationModel) => ({
+const gridGetRowsParamsSelector = exports.gridGetRowsParamsSelector = (0, _createSelector.createSelector)(_gridFilterSelector.gridFilterModelSelector, _gridSortingSelector.gridSortModelSelector, _gridPaginationSelector.gridPaginationModelSelector, _columns.gridColumnLookupSelector, (filterModel, sortModel, paginationModel, columnsLookup) => ({
   groupKeys: [],
   paginationModel,
   sortModel,
-  filterModel,
+  // An item without a value is an incomplete filter, not a constraint. The client-side
+  // engine already ignores those, so the server must not be asked to honor them either.
+  filterModel: (0, _gridFilterUtils.removeIncompleteFilterItems)(filterModel, columnsLookup),
   start: paginationModel.page * paginationModel.pageSize,
   end: paginationModel.page * paginationModel.pageSize + paginationModel.pageSize - 1
 }));

package/hooks/features/dataSource/gridDataSourceSelector.mjs

@@ -1,12 +1,16 @@
 import { gridFilterModelSelector } from "../filter/gridFilterSelector.mjs";
+import { removeIncompleteFilterItems } from "../filter/gridFilterUtils.mjs";
 import { gridSortModelSelector } from "../sorting/gridSortingSelector.mjs";
 import { gridPaginationModelSelector } from "../pagination/gridPaginationSelector.mjs";
+import { gridColumnLookupSelector } from "../columns/index.mjs";
 import { createSelector } from "../../../utils/createSelector.mjs";
-export const gridGetRowsParamsSelector = createSelector(gridFilterModelSelector, gridSortModelSelector, gridPaginationModelSelector, (filterModel, sortModel, paginationModel) => ({
+export const gridGetRowsParamsSelector = createSelector(gridFilterModelSelector, gridSortModelSelector, gridPaginationModelSelector, gridColumnLookupSelector, (filterModel, sortModel, paginationModel, columnsLookup) => ({
   groupKeys: [],
   paginationModel,
   sortModel,
-  filterModel,
+  // An item without a value is an incomplete filter, not a constraint. The client-side
+  // engine already ignores those, so the server must not be asked to honor them either.
+  filterModel: removeIncompleteFilterItems(filterModel, columnsLookup),
   start: paginationModel.page * paginationModel.pageSize,
   end: paginationModel.page * paginationModel.pageSize + paginationModel.pageSize - 1
 }));

package/hooks/features/dataSource/models.d.mts

@@ -1,5 +1,5 @@
 import type { GridDataSourceCache, GridGetRowsParams, GridUpdateRowParams, GridGetRowsOptions } from "../../../models/gridDataSource.mjs";
-import type { GridRowId, GridRowModel } from "../../../models/gridRows.mjs";
+import type { GridRowId, GridRowModel, GridRowModelReplace, GridRowModelUpdate } from "../../../models/gridRows.mjs";
 import type { GridDataSourceCacheDefaultConfig } from "./cache.mjs";
 /**
  * The parameters for the `fetchRows` method.
@@ -43,5 +43,5 @@ export interface GridDataSourceBaseOptions {
   cacheOptions?: GridDataSourceCacheDefaultConfig;
   fetchRowChildren?: (parents: GridRowId[], fetchParams: GridGetRowsParams[], showChildrenLoading?: boolean) => void;
   clearDataSourceState?: () => void;
-  handleEditRow?: (params: GridUpdateRowParams, updatedRow: GridRowModel) => void;
+  handleEditRow?: (params: GridUpdateRowParams, rowUpdate: GridRowModelUpdate | GridRowModelReplace) => void;
 }

package/hooks/features/dataSource/models.d.ts

@@ -1,5 +1,5 @@
 import type { GridDataSourceCache, GridGetRowsParams, GridUpdateRowParams, GridGetRowsOptions } from "../../../models/gridDataSource.js";
-import type { GridRowId, GridRowModel } from "../../../models/gridRows.js";
+import type { GridRowId, GridRowModel, GridRowModelReplace, GridRowModelUpdate } from "../../../models/gridRows.js";
 import type { GridDataSourceCacheDefaultConfig } from "./cache.js";
 /**
  * The parameters for the `fetchRows` method.
@@ -43,5 +43,5 @@ export interface GridDataSourceBaseOptions {
   cacheOptions?: GridDataSourceCacheDefaultConfig;
   fetchRowChildren?: (parents: GridRowId[], fetchParams: GridGetRowsParams[], showChildrenLoading?: boolean) => void;
   clearDataSourceState?: () => void;
-  handleEditRow?: (params: GridUpdateRowParams, updatedRow: GridRowModel) => void;
+  handleEditRow?: (params: GridUpdateRowParams, rowUpdate: GridRowModelUpdate | GridRowModelReplace) => void;
 }

package/hooks/features/dataSource/useGridDataSourceBase.js

@@ -21,7 +21,10 @@ var _strategyProcessing = require("../../core/strategyProcessing");
 var _useGridSelector = require("../../utils/useGridSelector");
 var _gridPaginationSelector = require("../pagination/gridPaginationSelector");
 var _gridRowsSelector = require("../rows/gridRowsSelector");
+var _columns = require("../columns");
+var _gridFilterUtils = require("../filter/gridFilterUtils");
 var _gridDataSourceSelector = require("./gridDataSourceSelector");
+var _useGridDataSourceFilterModelChange = require("./useGridDataSourceFilterModelChange");
 var _utils2 = require("./utils");
 var _cache = require("./cache");
 var _gridDataSourceError = require("./gridDataSourceError");
@@ -77,6 +80,9 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
       } = _ref,
       getRowsParams = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
     const fetchParams = (0, _extends2.default)({}, (0, _gridDataSourceSelector.gridGetRowsParamsSelector)(apiRef), apiRef.current.unstable_applyPipeProcessors('getRowsParams', {}), getRowsParams);
+    // The selector prunes the incomplete items, but a caller passing its own `filterModel`
+    // overrides it, so prune again on the merged params.
+    fetchParams.filterModel = (0, _gridFilterUtils.removeIncompleteFilterItems)(fetchParams.filterModel, (0, _columns.gridColumnLookupSelector)(apiRef));
     if (parentId && parentId !== _gridRowsUtils.GRID_ROOT_GROUP_ID && props.signature !== 'DataGrid') {
       options.fetchRowChildren?.([parentId], [fetchParams], showChildrenLoading);
       return;
@@ -248,16 +254,20 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
     }
     try {
       const finalRowUpdate = await dataSourceUpdateRow(params);
-      if (typeof handleEditRowOption === 'function') {
-        handleEditRowOption(params, finalRowUpdate);
-        return finalRowUpdate;
-      }
-      if (finalRowUpdate && !(0, _isDeepEqual.isDeepEqual)(finalRowUpdate, params.previousRow)) {
+      // `dataSource.updateRow()` can resolve with a `{ _action: 'replace', row }` update.
+      // The row update methods unwrap it themselves, everything else works with the row it
+      // holds: comparing the envelope with the previous row would never match.
+      const updatedRow = finalRowUpdate && (0, _gridRowsUtils.isReplaceUpdate)(finalRowUpdate) ? (0, _gridRowsUtils.getReplaceRow)(finalRowUpdate) : finalRowUpdate;
+      if (updatedRow && !(0, _isDeepEqual.isDeepEqual)(updatedRow, params.previousRow)) {
         // Reset the outdated cache, only if the row is _actually_ updated
         apiRef.current.dataSource.cache.clear();
       }
-      apiRef.current.updateNestedRows([finalRowUpdate], []);
-      return finalRowUpdate;
+      if (typeof handleEditRowOption === 'function') {
+        handleEditRowOption(params, finalRowUpdate);
+      } else {
+        apiRef.current.updateNestedRows([finalRowUpdate], []);
+      }
+      return updatedRow;
     } catch (errorThrown) {
       if (typeof onDataSourceErrorProp === 'function') {
         onDataSourceErrorProp(new _gridDataSourceError.GridUpdateRowError({
@@ -300,6 +310,13 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
     stopPolling();
     debouncedFetchRows();
   }, [apiRef, props.dataSourceKeepPreviousData, stopPolling, debouncedFetchRows]);
+  const hasFilterModelChanged = (0, _useGridDataSourceFilterModelChange.useGridDataSourceFilterModelChange)(apiRef);
+  const handleFetchRowsOnFilterModelChange = React.useCallback(newFilterModel => {
+    if (!hasFilterModelChanged(newFilterModel)) {
+      return;
+    }
+    handleFetchRowsOnParamsChange();
+  }, [hasFilterModelChanged, handleFetchRowsOnParamsChange]);
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {
     if (isFirstRender.current) {
@@ -392,7 +409,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
     events: {
       strategyAvailabilityChange: handleStrategyActivityChange,
       sortModelChange: (0, _utils.runIf)(standardRowsUpdateStrategyActive, handleFetchRowsOnParamsChange),
-      filterModelChange: (0, _utils.runIf)(standardRowsUpdateStrategyActive, handleFetchRowsOnParamsChange),
+      filterModelChange: (0, _utils.runIf)(standardRowsUpdateStrategyActive, handleFetchRowsOnFilterModelChange),
       paginationModelChange: (0, _utils.runIf)(standardRowsUpdateStrategyActive, handleFetchRowsOnParamsChange)
     }
   };

package/hooks/features/dataSource/useGridDataSourceBase.mjs

@@ -9,13 +9,16 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import debounce from '@mui/utils/debounce';
 import { warnOnce } from '@mui/x-internals/warning';
 import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
-import { GRID_ROOT_GROUP_ID } from "../rows/gridRowsUtils.mjs";
+import { GRID_ROOT_GROUP_ID, getReplaceRow, isReplaceUpdate } from "../rows/gridRowsUtils.mjs";
 import { runIf } from "../../../utils/utils.mjs";
 import { GridStrategyGroup } from "../../core/strategyProcessing/index.mjs";
 import { useGridSelector } from "../../utils/useGridSelector.mjs";
 import { gridPaginationModelSelector, gridVisibleRowsSelector } from "../pagination/gridPaginationSelector.mjs";
 import { gridRowTreeSelector } from "../rows/gridRowsSelector.mjs";
+import { gridColumnLookupSelector } from "../columns/index.mjs";
+import { removeIncompleteFilterItems } from "../filter/gridFilterUtils.mjs";
 import { gridGetRowsParamsSelector } from "./gridDataSourceSelector.mjs";
+import { useGridDataSourceFilterModelChange } from "./useGridDataSourceFilterModelChange.mjs";
 import { CacheChunkManager, DataSourceRowsUpdateStrategy } from "./utils.mjs";
 import { GridDataSourceCacheDefault } from "./cache.mjs";
 import { GridGetRowsError, GridUpdateRowError } from "./gridDataSourceError.mjs";
@@ -70,6 +73,9 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
       } = _ref,
       getRowsParams = _objectWithoutPropertiesLoose(_ref, _excluded);
     const fetchParams = _extends({}, gridGetRowsParamsSelector(apiRef), apiRef.current.unstable_applyPipeProcessors('getRowsParams', {}), getRowsParams);
+    // The selector prunes the incomplete items, but a caller passing its own `filterModel`
+    // overrides it, so prune again on the merged params.
+    fetchParams.filterModel = removeIncompleteFilterItems(fetchParams.filterModel, gridColumnLookupSelector(apiRef));
     if (parentId && parentId !== GRID_ROOT_GROUP_ID && props.signature !== 'DataGrid') {
       options.fetchRowChildren?.([parentId], [fetchParams], showChildrenLoading);
       return;
@@ -241,16 +247,20 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
     }
     try {
       const finalRowUpdate = await dataSourceUpdateRow(params);
-      if (typeof handleEditRowOption === 'function') {
-        handleEditRowOption(params, finalRowUpdate);
-        return finalRowUpdate;
-      }
-      if (finalRowUpdate && !isDeepEqual(finalRowUpdate, params.previousRow)) {
+      // `dataSource.updateRow()` can resolve with a `{ _action: 'replace', row }` update.
+      // The row update methods unwrap it themselves, everything else works with the row it
+      // holds: comparing the envelope with the previous row would never match.
+      const updatedRow = finalRowUpdate && isReplaceUpdate(finalRowUpdate) ? getReplaceRow(finalRowUpdate) : finalRowUpdate;
+      if (updatedRow && !isDeepEqual(updatedRow, params.previousRow)) {
         // Reset the outdated cache, only if the row is _actually_ updated
         apiRef.current.dataSource.cache.clear();
       }
-      apiRef.current.updateNestedRows([finalRowUpdate], []);
-      return finalRowUpdate;
+      if (typeof handleEditRowOption === 'function') {
+        handleEditRowOption(params, finalRowUpdate);
+      } else {
+        apiRef.current.updateNestedRows([finalRowUpdate], []);
+      }
+      return updatedRow;
     } catch (errorThrown) {
       if (typeof onDataSourceErrorProp === 'function') {
         onDataSourceErrorProp(new GridUpdateRowError({
@@ -293,6 +303,13 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
     stopPolling();
     debouncedFetchRows();
   }, [apiRef, props.dataSourceKeepPreviousData, stopPolling, debouncedFetchRows]);
+  const hasFilterModelChanged = useGridDataSourceFilterModelChange(apiRef);
+  const handleFetchRowsOnFilterModelChange = React.useCallback(newFilterModel => {
+    if (!hasFilterModelChanged(newFilterModel)) {
+      return;
+    }
+    handleFetchRowsOnParamsChange();
+  }, [hasFilterModelChanged, handleFetchRowsOnParamsChange]);
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {
     if (isFirstRender.current) {
@@ -385,7 +402,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
     events: {
       strategyAvailabilityChange: handleStrategyActivityChange,
       sortModelChange: runIf(standardRowsUpdateStrategyActive, handleFetchRowsOnParamsChange),
-      filterModelChange: runIf(standardRowsUpdateStrategyActive, handleFetchRowsOnParamsChange),
+      filterModelChange: runIf(standardRowsUpdateStrategyActive, handleFetchRowsOnFilterModelChange),
       paginationModelChange: runIf(standardRowsUpdateStrategyActive, handleFetchRowsOnParamsChange)
     }
   };

package/hooks/features/dataSource/useGridDataSourceFilterModelChange.d.mts

@@ -0,0 +1,9 @@
+import type { RefObject } from '@mui/x-internals/types';
+import type { GridFilterModel } from "../../../models/gridFilterModel.mjs";
+import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.mjs";
+/**
+ * Tracks the filter model as the data source sees it, the parts that cannot apply excluded.
+ * Returns a predicate telling whether a new model would ask for something else: editing an
+ * incomplete item, or flipping a logic operator that has nothing to combine, is a no-op.
+ */
+export declare const useGridDataSourceFilterModelChange: (apiRef: RefObject<GridPrivateApiCommunity>) => (filterModel: GridFilterModel) => boolean;

package/hooks/features/dataSource/useGridDataSourceFilterModelChange.d.ts

@@ -0,0 +1,9 @@
+import type { RefObject } from '@mui/x-internals/types';
+import type { GridFilterModel } from "../../../models/gridFilterModel.js";
+import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
+/**
+ * Tracks the filter model as the data source sees it, the parts that cannot apply excluded.
+ * Returns a predicate telling whether a new model would ask for something else: editing an
+ * incomplete item, or flipping a logic operator that has nothing to combine, is a no-op.
+ */
+export declare const useGridDataSourceFilterModelChange: (apiRef: RefObject<GridPrivateApiCommunity>) => (filterModel: GridFilterModel) => boolean;

package/hooks/features/dataSource/useGridDataSourceFilterModelChange.js

@@ -0,0 +1,57 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridDataSourceFilterModelChange = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
+var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
+var _columns = require("../columns");
+var _gridFilterSelector = require("../filter/gridFilterSelector");
+var _gridFilterState = require("../filter/gridFilterState");
+var _gridFilterUtils = require("../filter/gridFilterUtils");
+/**
+ * The parts of a filter model that can change the rows the data source returns, so that a
+ * change to the rest is not mistaken for a new query. A logic operator needs two operands to
+ * mean anything, and quick filter values only apply once one of them is truthy
+ * (`buildAggregatedQuickFilterApplier` returns `null` otherwise).
+ * Falsy values are kept when another one applies: `passFilterLogic` runs the whole array
+ * through its logic operator, so `['a', '']` and `['a']` do not match the same rows.
+ */
+const getApplicableFilterModel = (model, columnsLookup) => {
+  const defaultModel = (0, _gridFilterState.getDefaultGridFilterModel)();
+  const {
+    items
+  } = (0, _gridFilterUtils.removeIncompleteFilterItems)(model, columnsLookup);
+  const appliesQuickFilter = model.quickFilterValues?.some(Boolean) ?? false;
+  const quickFilterValues = appliesQuickFilter ? model.quickFilterValues ?? [] : [];
+  return {
+    items,
+    logicOperator: items.length > 1 ? model.logicOperator ?? defaultModel.logicOperator : null,
+    quickFilterValues,
+    quickFilterLogicOperator: quickFilterValues.length > 1 ? model.quickFilterLogicOperator ?? defaultModel.quickFilterLogicOperator : null,
+    quickFilterExcludeHiddenColumns: appliesQuickFilter ? model.quickFilterExcludeHiddenColumns ?? defaultModel.quickFilterExcludeHiddenColumns : null
+  };
+};
+
+/**
+ * Tracks the filter model as the data source sees it, the parts that cannot apply excluded.
+ * Returns a predicate telling whether a new model would ask for something else: editing an
+ * incomplete item, or flipping a logic operator that has nothing to combine, is a no-op.
+ */
+const useGridDataSourceFilterModelChange = apiRef => {
+  const lastFetchedFilterModel = (0, _useLazyRef.default)(() => getApplicableFilterModel((0, _gridFilterSelector.gridFilterModelSelector)(apiRef), (0, _columns.gridColumnLookupSelector)(apiRef)));
+  return React.useCallback(filterModel => {
+    const applicableFilterModel = getApplicableFilterModel(filterModel, (0, _columns.gridColumnLookupSelector)(apiRef));
+    if ((0, _isDeepEqual.isDeepEqual)(applicableFilterModel, lastFetchedFilterModel.current)) {
+      return false;
+    }
+    lastFetchedFilterModel.current = applicableFilterModel;
+    return true;
+  }, [apiRef, lastFetchedFilterModel]);
+};
+exports.useGridDataSourceFilterModelChange = useGridDataSourceFilterModelChange;

package/hooks/features/dataSource/useGridDataSourceFilterModelChange.mjs

@@ -0,0 +1,49 @@
+'use client';
+
+import * as React from 'react';
+import useLazyRef from '@mui/utils/useLazyRef';
+import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
+import { gridColumnLookupSelector } from "../columns/index.mjs";
+import { gridFilterModelSelector } from "../filter/gridFilterSelector.mjs";
+import { getDefaultGridFilterModel } from "../filter/gridFilterState.mjs";
+import { removeIncompleteFilterItems } from "../filter/gridFilterUtils.mjs";
+/**
+ * The parts of a filter model that can change the rows the data source returns, so that a
+ * change to the rest is not mistaken for a new query. A logic operator needs two operands to
+ * mean anything, and quick filter values only apply once one of them is truthy
+ * (`buildAggregatedQuickFilterApplier` returns `null` otherwise).
+ * Falsy values are kept when another one applies: `passFilterLogic` runs the whole array
+ * through its logic operator, so `['a', '']` and `['a']` do not match the same rows.
+ */
+const getApplicableFilterModel = (model, columnsLookup) => {
+  const defaultModel = getDefaultGridFilterModel();
+  const {
+    items
+  } = removeIncompleteFilterItems(model, columnsLookup);
+  const appliesQuickFilter = model.quickFilterValues?.some(Boolean) ?? false;
+  const quickFilterValues = appliesQuickFilter ? model.quickFilterValues ?? [] : [];
+  return {
+    items,
+    logicOperator: items.length > 1 ? model.logicOperator ?? defaultModel.logicOperator : null,
+    quickFilterValues,
+    quickFilterLogicOperator: quickFilterValues.length > 1 ? model.quickFilterLogicOperator ?? defaultModel.quickFilterLogicOperator : null,
+    quickFilterExcludeHiddenColumns: appliesQuickFilter ? model.quickFilterExcludeHiddenColumns ?? defaultModel.quickFilterExcludeHiddenColumns : null
+  };
+};
+
+/**
+ * Tracks the filter model as the data source sees it, the parts that cannot apply excluded.
+ * Returns a predicate telling whether a new model would ask for something else: editing an
+ * incomplete item, or flipping a logic operator that has nothing to combine, is a no-op.
+ */
+export const useGridDataSourceFilterModelChange = apiRef => {
+  const lastFetchedFilterModel = useLazyRef(() => getApplicableFilterModel(gridFilterModelSelector(apiRef), gridColumnLookupSelector(apiRef)));
+  return React.useCallback(filterModel => {
+    const applicableFilterModel = getApplicableFilterModel(filterModel, gridColumnLookupSelector(apiRef));
+    if (isDeepEqual(applicableFilterModel, lastFetchedFilterModel.current)) {
+      return false;
+    }
+    lastFetchedFilterModel.current = applicableFilterModel;
+    return true;
+  }, [apiRef, lastFetchedFilterModel]);
+};

package/hooks/features/editing/useGridCellEditing.js

@@ -18,6 +18,7 @@ var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedE
 var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
 var _useGridEvent = require("../../utils/useGridEvent");
 var _gridEditRowModel = require("../../../models/gridEditRowModel");
+var _getPublicApiRef = require("../../../utils/getPublicApiRef");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _gridEditingSelectors = require("./gridEditingSelectors");
 var _keyboardUtils = require("../../../utils/keyboardUtils");
@@ -195,7 +196,8 @@ const useGridCellEditing = (apiRef, props) => {
     const isNewModelDifferentFromProp = newModel !== props.cellModesModel;
     if (onCellModesModelChange && isNewModelDifferentFromProp) {
       onCellModesModelChange(newModel, {
-        api: apiRef.current
+        api: apiRef.current,
+        apiRef: (0, _getPublicApiRef.getPublicApiRef)(apiRef)
       });
     }
     if (props.cellModesModel && isNewModelDifferentFromProp) {

package/hooks/features/editing/useGridCellEditing.mjs

@@ -13,6 +13,7 @@ import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import { useGridEvent, useGridEventPriority } from "../../utils/useGridEvent.mjs";
 import { GridEditModes, GridCellModes } from "../../../models/gridEditRowModel.mjs";
+import { getPublicApiRef } from "../../../utils/getPublicApiRef.mjs";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.mjs";
 import { gridEditRowsStateSelector } from "./gridEditingSelectors.mjs";
 import { isPrintableKey, isPasteShortcut } from "../../../utils/keyboardUtils.mjs";
@@ -188,7 +189,8 @@ export const useGridCellEditing = (apiRef, props) => {
     const isNewModelDifferentFromProp = newModel !== props.cellModesModel;
     if (onCellModesModelChange && isNewModelDifferentFromProp) {
       onCellModesModelChange(newModel, {
-        api: apiRef.current
+        api: apiRef.current,
+        apiRef: getPublicApiRef(apiRef)
       });
     }
     if (props.cellModesModel && isNewModelDifferentFromProp) {

package/hooks/features/editing/useGridRowEditing.js

@@ -18,6 +18,7 @@ var _warning = require("@mui/x-internals/warning");
 var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
 var _useGridEvent = require("../../utils/useGridEvent");
 var _gridEditRowModel = require("../../../models/gridEditRowModel");
+var _getPublicApiRef = require("../../../utils/getPublicApiRef");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _gridEditingSelectors = require("./gridEditingSelectors");
 var _keyboardUtils = require("../../../utils/keyboardUtils");
@@ -265,7 +266,8 @@ const useGridRowEditing = (apiRef, props) => {
     const isNewModelDifferentFromProp = newModel !== props.rowModesModel;
     if (onRowModesModelChange && isNewModelDifferentFromProp) {
       onRowModesModelChange(newModel, {
-        api: apiRef.current
+        api: apiRef.current,
+        apiRef: (0, _getPublicApiRef.getPublicApiRef)(apiRef)
       });
     }
     if (props.rowModesModel && isNewModelDifferentFromProp) {

package/hooks/features/editing/useGridRowEditing.mjs

@@ -13,6 +13,7 @@ import { warnOnce } from '@mui/x-internals/warning';
 import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import { useGridEvent, useGridEventPriority } from "../../utils/useGridEvent.mjs";
 import { GridEditModes, GridRowModes } from "../../../models/gridEditRowModel.mjs";
+import { getPublicApiRef } from "../../../utils/getPublicApiRef.mjs";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.mjs";
 import { gridEditRowsStateSelector, gridRowIsEditingSelector } from "./gridEditingSelectors.mjs";
 import { isPrintableKey, isPasteShortcut } from "../../../utils/keyboardUtils.mjs";
@@ -258,7 +259,8 @@ export const useGridRowEditing = (apiRef, props) => {
     const isNewModelDifferentFromProp = newModel !== props.rowModesModel;
     if (onRowModesModelChange && isNewModelDifferentFromProp) {
       onRowModesModelChange(newModel, {
-        api: apiRef.current
+        api: apiRef.current,
+        apiRef: getPublicApiRef(apiRef)
       });
     }
     if (props.rowModesModel && isNewModelDifferentFromProp) {

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

@@ -4,6 +4,7 @@ import type { GridColDef, GridFilterItem, GridFilterModel, GridRowModel } from "
 import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.mjs";
 import type { GridStateCommunity } from "../../../models/gridStateCommunity.mjs";
 import type { GridAggregatedFilterItemApplier, GridFilterItemResult, GridQuickFilterValueResult } from "./gridFilterState.mjs";
+import type { GridColumnLookup } from "../columns/index.mjs";
 /**
  * Pure helpers computing a new filter model from an existing one.
  * Shared by the imperative `apiRef` methods (`useGridFilter`) and the controlled
@@ -15,6 +16,18 @@ export declare const upsertFilterItemInModel: (model: GridFilterModel, item: Gri
 export declare const upsertFilterItemsInModel: (model: GridFilterModel, itemsToUpsert: GridFilterItem[]) => GridFilterModel;
 export declare const deleteFilterItemFromModel: (model: GridFilterModel, itemToDelete: GridFilterItem) => GridFilterModel;
 export declare const setFilterLogicOperatorInModel: (model: GridFilterModel, logicOperator: GridLogicOperator) => GridFilterModel;
+/**
+ * Whether a filter item carries everything its operator needs to be applied.
+ * Operators declaring `requiresFilterValue: false` (`isEmpty`, `isNotEmpty`) stay complete
+ * without a value, see https://github.com/mui/mui-x/issues/5402
+ */
+export declare const isFilterItemComplete: (item: GridFilterItem, column: GridColDef | undefined) => boolean;
+/**
+ * Drops the filter items that cannot be applied, so incomplete items never reach a consumer
+ * that would treat them as a real constraint (`dataSource` sending them to a server, for one).
+ * Returns the same model reference when every item is complete.
+ */
+export declare const removeIncompleteFilterItems: (model: GridFilterModel, columnsLookup: GridColumnLookup) => GridFilterModel;
 /**
  * Adds default values to the optional fields of a filter items.
  * @param {GridFilterItem} item The raw filter item.

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

@@ -4,6 +4,7 @@ import type { GridColDef, GridFilterItem, GridFilterModel, GridRowModel } from "
 import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
 import type { GridStateCommunity } from "../../../models/gridStateCommunity.js";
 import type { GridAggregatedFilterItemApplier, GridFilterItemResult, GridQuickFilterValueResult } from "./gridFilterState.js";
+import type { GridColumnLookup } from "../columns/index.js";
 /**
  * Pure helpers computing a new filter model from an existing one.
  * Shared by the imperative `apiRef` methods (`useGridFilter`) and the controlled
@@ -15,6 +16,18 @@ export declare const upsertFilterItemInModel: (model: GridFilterModel, item: Gri
 export declare const upsertFilterItemsInModel: (model: GridFilterModel, itemsToUpsert: GridFilterItem[]) => GridFilterModel;
 export declare const deleteFilterItemFromModel: (model: GridFilterModel, itemToDelete: GridFilterItem) => GridFilterModel;
 export declare const setFilterLogicOperatorInModel: (model: GridFilterModel, logicOperator: GridLogicOperator) => GridFilterModel;
+/**
+ * Whether a filter item carries everything its operator needs to be applied.
+ * Operators declaring `requiresFilterValue: false` (`isEmpty`, `isNotEmpty`) stay complete
+ * without a value, see https://github.com/mui/mui-x/issues/5402
+ */
+export declare const isFilterItemComplete: (item: GridFilterItem, column: GridColDef | undefined) => boolean;
+/**
+ * Drops the filter items that cannot be applied, so incomplete items never reach a consumer
+ * that would treat them as a real constraint (`dataSource` sending them to a server, for one).
+ * Returns the same model reference when every item is complete.
+ */
+export declare const removeIncompleteFilterItems: (model: GridFilterModel, columnsLookup: GridColumnLookup) => GridFilterModel;
 /**
  * Adds default values to the optional fields of a filter items.
  * @param {GridFilterItem} item The raw filter item.

package/hooks/features/filter/gridFilterUtils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.upsertFilterItemsInModel = exports.upsertFilterItemInModel = exports.shouldQuickFilterExcludeHiddenColumns = exports.setFilterLogicOperatorInModel = exports.sanitizeFilterModel = exports.removeDiacritics = exports.passFilterLogic = exports.mergeStateWithFilterModel = exports.deleteFilterItemFromModel = exports.cleanFilterItem = exports.buildAggregatedFilterApplier = void 0;
+exports.upsertFilterItemsInModel = exports.upsertFilterItemInModel = exports.shouldQuickFilterExcludeHiddenColumns = exports.setFilterLogicOperatorInModel = exports.sanitizeFilterModel = exports.removeIncompleteFilterItems = exports.removeDiacritics = exports.passFilterLogic = exports.mergeStateWithFilterModel = exports.isFilterItemComplete = exports.deleteFilterItemFromModel = exports.cleanFilterItem = exports.buildAggregatedFilterApplier = void 0;
 var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _warning = require("@mui/x-internals/warning");
@@ -66,7 +66,38 @@ const setFilterLogicOperatorInModel = (model, logicOperator) => {
     logicOperator
   });
 };
+
+/**
+ * Whether a filter item carries everything its operator needs to be applied.
+ * Operators declaring `requiresFilterValue: false` (`isEmpty`, `isNotEmpty`) stay complete
+ * without a value, see https://github.com/mui/mui-x/issues/5402
+ */
 exports.setFilterLogicOperatorInModel = setFilterLogicOperatorInModel;
+const isFilterItemComplete = (item, column) => {
+  if (item.value !== undefined) {
+    // Some operators like `isAnyOf` take an array as `item.value`. An empty one filters nothing.
+    return !(Array.isArray(item.value) && item.value.length === 0);
+  }
+  const filterOperator = column?.filterOperators?.find(operator => operator.value === item.operator);
+  return filterOperator?.requiresFilterValue === false;
+};
+
+/**
+ * Drops the filter items that cannot be applied, so incomplete items never reach a consumer
+ * that would treat them as a real constraint (`dataSource` sending them to a server, for one).
+ * Returns the same model reference when every item is complete.
+ */
+exports.isFilterItemComplete = isFilterItemComplete;
+const removeIncompleteFilterItems = (model, columnsLookup) => {
+  const items = model.items.filter(item => isFilterItemComplete(item, columnsLookup[item.field]));
+  if (items.length === model.items.length) {
+    return model;
+  }
+  return (0, _extends2.default)({}, model, {
+    items
+  });
+};
+exports.removeIncompleteFilterItems = removeIncompleteFilterItems;
 let hasEval;
 function getHasEval() {
   if (hasEval !== undefined) {

package/hooks/features/filter/gridFilterUtils.mjs

@@ -5,7 +5,6 @@ import { GridLogicOperator } from "../../../models/index.mjs";
 import { getDefaultGridFilterModel } from "./gridFilterState.mjs";
 import { getPublicApiRef } from "../../../utils/getPublicApiRef.mjs";
 import { gridColumnFieldsSelector, gridColumnLookupSelector, gridColumnVisibilityModelSelector } from "../columns/index.mjs";
-
 /**
  * Pure helpers computing a new filter model from an existing one.
  * Shared by the imperative `apiRef` methods (`useGridFilter`) and the controlled
@@ -57,6 +56,35 @@ export const setFilterLogicOperatorInModel = (model, logicOperator) => {
     logicOperator
   });
 };
+
+/**
+ * Whether a filter item carries everything its operator needs to be applied.
+ * Operators declaring `requiresFilterValue: false` (`isEmpty`, `isNotEmpty`) stay complete
+ * without a value, see https://github.com/mui/mui-x/issues/5402
+ */
+export const isFilterItemComplete = (item, column) => {
+  if (item.value !== undefined) {
+    // Some operators like `isAnyOf` take an array as `item.value`. An empty one filters nothing.
+    return !(Array.isArray(item.value) && item.value.length === 0);
+  }
+  const filterOperator = column?.filterOperators?.find(operator => operator.value === item.operator);
+  return filterOperator?.requiresFilterValue === false;
+};
+
+/**
+ * Drops the filter items that cannot be applied, so incomplete items never reach a consumer
+ * that would treat them as a real constraint (`dataSource` sending them to a server, for one).
+ * Returns the same model reference when every item is complete.
+ */
+export const removeIncompleteFilterItems = (model, columnsLookup) => {
+  const items = model.items.filter(item => isFilterItemComplete(item, columnsLookup[item.field]));
+  if (items.length === model.items.length) {
+    return model;
+  }
+  return _extends({}, model, {
+    items
+  });
+};
 let hasEval;
 function getHasEval() {
   if (hasEval !== undefined) {

package/hooks/features/filter/useGridFilter.js

@@ -103,27 +103,7 @@ const useGridFilter = (apiRef, props, configuration) => {
     logger.debug('Displaying filter panel');
     if (targetColumnField) {
       const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
-      const filterItemsWithValue = filterModel.items.filter(item => {
-        if (item.value !== undefined) {
-          // Some filters like `isAnyOf` support array as `item.value`.
-          // If array is empty, we want to remove it from the filter model.
-          if (Array.isArray(item.value) && item.value.length === 0) {
-            return false;
-          }
-          return true;
-        }
-        const column = apiRef.current.getColumn(item.field);
-        const filterOperator = column?.filterOperators?.find(operator => operator.value === item.operator);
-        const requiresFilterValue = typeof filterOperator?.requiresFilterValue === 'undefined' ? true : filterOperator?.requiresFilterValue;
-
-        // Operators like `isEmpty` don't have and don't require `item.value`.
-        // So we don't want to remove them from the filter model if `item.value === undefined`.
-        // See https://github.com/mui/mui-x/issues/5402
-        if (requiresFilterValue) {
-          return false;
-        }
-        return true;
-      });
+      const filterItemsWithValue = filterModel.items.filter(item => (0, _gridFilterUtils.isFilterItemComplete)(item, apiRef.current.getColumn(item.field)));
       let newFilterItems;
       const filterItemOnTarget = filterItemsWithValue.find(item => item.field === targetColumnField);
       const targetColumn = apiRef.current.getColumn(targetColumnField);