@mui/x-data-grid 9.11.0 → 9.12.0

package/constants/localeTextConstants.js

@@ -47,6 +47,10 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
   toolbarCharts: 'Charts',
   // Toolbar AI Assistant button
   toolbarAssistant: 'AI Assistant',
+  // Formula bar (Premium formulas)
+  formulaBarLabel: 'Formula bar',
+  formulaBarInputLabel: 'Formula',
+  formulaBarAddressLabel: 'Active cell',
   // Columns management text
   columnsManagementSearchTitle: 'Search',
   columnsManagementNoColumns: 'No columns',

package/constants/localeTextConstants.mjs

@@ -41,6 +41,10 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   toolbarCharts: 'Charts',
   // Toolbar AI Assistant button
   toolbarAssistant: 'AI Assistant',
+  // Formula bar (Premium formulas)
+  formulaBarLabel: 'Formula bar',
+  formulaBarInputLabel: 'Formula',
+  formulaBarAddressLabel: 'Active cell',
   // Columns management text
   columnsManagementSearchTitle: 'Search',
   columnsManagementNoColumns: 'No columns',

package/hooks/core/useGridApiInitialization.js

@@ -12,6 +12,7 @@ var _EventManager = require("@mui/x-internals/EventManager");
 var _store = require("@mui/x-internals/store");
 var _useGridApiMethod = require("../utils/useGridApiMethod");
 var _signature = require("../../constants/signature");
+var _getPublicApiRef = require("../../utils/getPublicApiRef");
 const SYMBOL_API_PRIVATE = Symbol('mui.api_private');
 const isSyntheticEvent = event => {
   return event.isPropagationStopped !== undefined;
@@ -92,8 +93,11 @@ function useGridApiInitialization(inputApiRef, props) {
       return;
     }
     const details = props.signature === _signature.GridSignature.DataGridPro || props.signature === _signature.GridSignature.DataGridPremium ? {
+      apiRef: (0, _getPublicApiRef.getPublicApiRef)(privateApiRef),
       api: privateApiRef.current.getPublicApi()
-    } : {};
+    } : {
+      apiRef: (0, _getPublicApiRef.getPublicApiRef)(privateApiRef)
+    };
     privateApiRef.current.eventManager.emit(name, params, event, details);
   }, [privateApiRef, props.signature]);
   const subscribeEvent = React.useCallback((event, handler, options) => {

package/hooks/core/useGridApiInitialization.mjs

@@ -5,6 +5,7 @@ import { EventManager } from '@mui/x-internals/EventManager';
 import { Store } from '@mui/x-internals/store';
 import { useGridApiMethod } from "../utils/useGridApiMethod.mjs";
 import { GridSignature } from "../../constants/signature.mjs";
+import { getPublicApiRef } from "../../utils/getPublicApiRef.mjs";
 const SYMBOL_API_PRIVATE = Symbol('mui.api_private');
 const isSyntheticEvent = event => {
   return event.isPropagationStopped !== undefined;
@@ -85,8 +86,11 @@ export function useGridApiInitialization(inputApiRef, props) {
       return;
     }
     const details = props.signature === GridSignature.DataGridPro || props.signature === GridSignature.DataGridPremium ? {
+      apiRef: getPublicApiRef(privateApiRef),
       api: privateApiRef.current.getPublicApi()
-    } : {};
+    } : {
+      apiRef: getPublicApiRef(privateApiRef)
+    };
     privateApiRef.current.eventManager.emit(name, params, event, details);
   }, [privateApiRef, props.signature]);
   const subscribeEvent = React.useCallback((event, handler, options) => {

package/hooks/core/useGridStateInitialization.js

@@ -12,6 +12,7 @@ var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/form
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("../utils");
 var _utils2 = require("../../utils/utils");
+var _getPublicApiRef = require("../../utils/getPublicApiRef");
 const useGridStateInitialization = apiRef => {
   const controlStateMapRef = React.useRef({});
   const registerControlState = React.useCallback(controlStateItem => {
@@ -75,7 +76,8 @@ const useGridStateInitialization = apiRef => {
       if (controlState.propOnChange && hasPropChanged) {
         controlState.propOnChange(model, {
           reason,
-          api: apiRef.current
+          api: apiRef.current,
+          apiRef: (0, _getPublicApiRef.getPublicApiRef)(apiRef)
         });
       }
       if (!ignoreSetState) {

package/hooks/core/useGridStateInitialization.mjs

@@ -5,6 +5,7 @@ import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
 import * as React from 'react';
 import { useGridApiMethod } from "../utils/index.mjs";
 import { isFunction } from "../../utils/utils.mjs";
+import { getPublicApiRef } from "../../utils/getPublicApiRef.mjs";
 export const useGridStateInitialization = apiRef => {
   const controlStateMapRef = React.useRef({});
   const registerControlState = React.useCallback(controlStateItem => {
@@ -68,7 +69,8 @@ export const useGridStateInitialization = apiRef => {
       if (controlState.propOnChange && hasPropChanged) {
         controlState.propOnChange(model, {
           reason,
-          api: apiRef.current
+          api: apiRef.current,
+          apiRef: getPublicApiRef(apiRef)
         });
       }
       if (!ignoreSetState) {

package/hooks/core/useGridVirtualizer.js

@@ -26,6 +26,7 @@ var _useGridVisibleRows = require("../utils/useGridVisibleRows");
 var _pagination = require("../features/pagination");
 var _gridFocusedVirtualCellSelector = require("../features/virtualization/gridFocusedVirtualCellSelector");
 var _rowSelection = require("../features/rowSelection");
+var _gridColumnGroupsSelector = require("../features/columnGrouping/gridColumnGroupsSelector");
 var _dataGridPropsDefaultValues = require("../../constants/dataGridPropsDefaultValues");
 var _gridRowsUtils = require("../features/rows/gridRowsUtils");
 var _gridColumnsUtils = require("../features/columns/gridColumnsUtils");
@@ -87,6 +88,8 @@ function useGridVirtualizer() {
   const groupHeaderHeight = Math.floor((rootProps.columnGroupHeaderHeight ?? rootProps.columnHeaderHeight) * density);
   const headerFilterHeight = Math.floor((rootProps.headerFilterHeight ?? rootProps.columnHeaderHeight) * density);
   const columnsTotalWidth = (0, _useGridSelector.useGridSelector)(apiRef, columnsTotalWidthSelector);
+  // `getTotalHeaderHeight` reads the group depth imperatively, subscribe so it re-renders when it changes.
+  (0, _utils.eslintUseValue)((0, _useGridSelector.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsHeaderMaxDepthSelector));
   const headersTotalHeight = (0, _gridColumnsUtils.getTotalHeaderHeight)(apiRef, rootProps);
   const leftPinnedWidth = pinnedColumns.left.reduce((w, col) => w + col.computedWidth, 0);
   const rightPinnedWidth = pinnedColumns.right.reduce((w, col) => w + col.computedWidth, 0);

package/hooks/core/useGridVirtualizer.mjs

@@ -18,6 +18,7 @@ import { useGridVisibleRows } from "../utils/useGridVisibleRows.mjs";
 import { gridPaginationSelector } from "../features/pagination/index.mjs";
 import { gridFocusedVirtualCellSelector } from "../features/virtualization/gridFocusedVirtualCellSelector.mjs";
 import { gridRowSelectionManagerSelector } from "../features/rowSelection/index.mjs";
+import { gridColumnGroupsHeaderMaxDepthSelector } from "../features/columnGrouping/gridColumnGroupsSelector.mjs";
 import { DATA_GRID_PROPS_DEFAULT_VALUES } from "../../constants/dataGridPropsDefaultValues.mjs";
 import { getValidRowHeight, minimalContentHeight, rowHeightWarning } from "../features/rows/gridRowsUtils.mjs";
 import { getTotalHeaderHeight } from "../features/columns/gridColumnsUtils.mjs";
@@ -79,6 +80,8 @@ export function useGridVirtualizer() {
   const groupHeaderHeight = Math.floor((rootProps.columnGroupHeaderHeight ?? rootProps.columnHeaderHeight) * density);
   const headerFilterHeight = Math.floor((rootProps.headerFilterHeight ?? rootProps.columnHeaderHeight) * density);
   const columnsTotalWidth = useGridSelector(apiRef, columnsTotalWidthSelector);
+  // `getTotalHeaderHeight` reads the group depth imperatively, subscribe so it re-renders when it changes.
+  eslintUseValue(useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector));
   const headersTotalHeight = getTotalHeaderHeight(apiRef, rootProps);
   const leftPinnedWidth = pinnedColumns.left.reduce((w, col) => w + col.computedWidth, 0);
   const rightPinnedWidth = pinnedColumns.right.reduce((w, col) => w + col.computedWidth, 0);

package/hooks/features/columnResize/useGridColumnResize.js

@@ -568,6 +568,11 @@ const useGridColumnResize = (apiRef, props) => {
       if (!props.disableVirtualization && options.disableColumnVirtualization) {
         apiRef.current.unstable_setColumnVirtualization(false);
         await columnVirtualizationDisabled();
+
+        // The grid may have unmounted while awaiting, which nulls the root element ref.
+        if (!apiRef.current.rootElementRef?.current) {
+          return;
+        }
       }
       const widthByField = extractColumnWidths(apiRef, options, columns);
       const newColumns = columns.map(column => (0, _extends2.default)({}, column, {

package/hooks/features/columnResize/useGridColumnResize.mjs

@@ -560,6 +560,11 @@ export const useGridColumnResize = (apiRef, props) => {
       if (!props.disableVirtualization && options.disableColumnVirtualization) {
         apiRef.current.unstable_setColumnVirtualization(false);
         await columnVirtualizationDisabled();
+
+        // The grid may have unmounted while awaiting, which nulls the root element ref.
+        if (!apiRef.current.rootElementRef?.current) {
+          return;
+        }
       }
       const widthByField = extractColumnWidths(apiRef, options, columns);
       const newColumns = columns.map(column => _extends({}, column, {

package/hooks/features/columns/gridColumnsUtils.d.mts

@@ -67,4 +67,4 @@ export declare function getFirstNonSpannedColumnToRender({
   lastRowToRender: number;
   visibleRows: GridRowEntry[];
 }): number;
-export declare function getTotalHeaderHeight(apiRef: RefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'columnHeaderHeight' | 'headerFilterHeight' | 'listView' | 'columnGroupHeaderHeight'>): number;
+export declare function getTotalHeaderHeight(apiRef: RefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'columnHeaderHeight' | 'headerFilterHeight' | 'listView' | 'columnGroupHeaderHeight' | 'signature' | 'headerFilters'>): number;

package/hooks/features/columns/gridColumnsUtils.d.ts

@@ -67,4 +67,4 @@ export declare function getFirstNonSpannedColumnToRender({
   lastRowToRender: number;
   visibleRows: GridRowEntry[];
 }): number;
-export declare function getTotalHeaderHeight(apiRef: RefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'columnHeaderHeight' | 'headerFilterHeight' | 'listView' | 'columnGroupHeaderHeight'>): number;
+export declare function getTotalHeaderHeight(apiRef: RefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'columnHeaderHeight' | 'headerFilterHeight' | 'listView' | 'columnGroupHeaderHeight' | 'signature' | 'headerFilters'>): number;

package/hooks/features/columns/gridColumnsUtils.js

@@ -19,7 +19,6 @@ var _signature = require("../../../constants/signature");
 var _gridColumnsSelector = require("./gridColumnsSelector");
 var _utils = require("../../../utils/utils");
 var _densitySelector = require("../density/densitySelector");
-var _gridHeaderFilteringSelectors = require("../headerFiltering/gridHeaderFilteringSelectors");
 var _gridColumnGroupsSelector = require("../columnGrouping/gridColumnGroupsSelector");
 const COLUMNS_DIMENSION_PROPERTIES = exports.COLUMNS_DIMENSION_PROPERTIES = ['maxWidth', 'minWidth', 'width', 'flex'];
 /**
@@ -360,7 +359,8 @@ function getTotalHeaderHeight(apiRef, props) {
   }
   const densityFactor = (0, _densitySelector.gridDensityFactorSelector)(apiRef);
   const maxDepth = (0, _gridColumnGroupsSelector.gridColumnGroupsHeaderMaxDepthSelector)(apiRef);
-  const isHeaderFilteringEnabled = (0, _gridHeaderFilteringSelectors.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/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/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;
@@ -300,6 +306,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 +405,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

@@ -15,7 +15,10 @@ 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;
@@ -293,6 +299,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 +398,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.