@mui/x-data-grid 9.10.1 → 9.12.0

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");
@@ -47,6 +50,11 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
   }, [currentStrategy]);
   const paginationModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginationModelSelector);
   const lastRequestId = React.useRef(0);
+  // `false` while a request is in flight, and for any request that errors or is discarded as
+  // stale. Lets the mount effect tell "rows are already displayed" from "the fetch never landed".
+  const rowsAreUpToDate = React.useRef(false);
+  // Requests that are still running and will apply their response when they settle.
+  const pendingRequestCount = React.useRef(0);
   const pollingIntervalRef = React.useRef(null);
   const onDataSourceErrorProp = props.onDataSourceError;
   const revalidateMs = props.dataSourceRevalidateMs;
@@ -72,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;
@@ -91,6 +102,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
           keepChildrenExpanded
         }
       });
+      rowsAreUpToDate.current = true;
       if (standardRowsUpdateStrategyActive) {
         apiRef.current.setLoading(false);
       }
@@ -103,6 +115,8 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
     }
     const requestId = lastRequestId.current + 1;
     lastRequestId.current = requestId;
+    rowsAreUpToDate.current = false;
+    pendingRequestCount.current += 1;
     try {
       const getRowsResponse = await getRows(fetchParams);
       const cacheResponses = cacheChunkManager.splitResponse(fetchParams, getRowsResponse);
@@ -116,6 +130,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
             keepChildrenExpanded
           }
         });
+        rowsAreUpToDate.current = true;
       }
     } catch (originalError) {
       if (lastRequestId.current === requestId) {
@@ -138,6 +153,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
         }
       }
     } finally {
+      pendingRequestCount.current -= 1;
       if (standardRowsUpdateStrategyActive && lastRequestId.current === requestId) {
         apiRef.current.setLoading(false);
       }
@@ -290,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) {
@@ -313,12 +336,34 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
     }
   }, [revalidateMs, stopPolling]);
   React.useEffect(() => stopPolling, [stopPolling]);
+  const lastApiRef = React.useRef(apiRef);
+  const lastStrategy = React.useRef(currentStrategy);
+  const lastDataSource = React.useRef(props.dataSource);
   React.useEffect(() => {
+    // `<Activity mode="hidden">` leaves the root element in the document, a real unmount does not.
+    // Only discard the in-flight response in the latter case, so hiding lets the request land.
+    const rootElement = apiRef.current?.rootElementRef?.current ?? null;
+    const ignoreInFlightRequest = () => {
+      if (!rootElement?.isConnected) {
+        lastRequestId.current += 1;
+      }
+    };
+
     // Return early if the proper strategy isn't set yet
     // Context: https://github.com/mui/mui-x/issues/19650
     if (currentStrategy !== _utils2.DataSourceRowsUpdateStrategy.Default && currentStrategy !== _utils2.DataSourceRowsUpdateStrategy.LazyLoading && currentStrategy !== _utils2.DataSourceRowsUpdateStrategy.GroupedData && currentStrategy !== _utils2.DataSourceRowsUpdateStrategy.LazyLoadedGroupedData) {
       return undefined;
     }
+    const dependenciesChanged = lastApiRef.current !== apiRef || lastStrategy.current !== currentStrategy || lastDataSource.current !== props.dataSource;
+    lastApiRef.current = apiRef;
+    lastStrategy.current = currentStrategy;
+    lastDataSource.current = props.dataSource;
+
+    // Re-mounting the effect (`<Activity />` becoming visible again, for instance) must not
+    // re-fetch data that is already displayed.
+    if (!dependenciesChanged && (rowsAreUpToDate.current || pendingRequestCount.current > 0)) {
+      return ignoreInFlightRequest;
+    }
     if (props.dataSource) {
       stopPolling();
       // `dataSourceKeepPreviousData` only applies to the flat `Default` strategy (mirroring
@@ -332,10 +377,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
       apiRef.current.dataSource.cache.clear();
       apiRef.current.dataSource.fetchRows();
     }
-    return () => {
-      // ignore the current request on unmount
-      lastRequestId.current += 1;
-    };
+    return ignoreInFlightRequest;
   }, [apiRef, props.dataSource, props.dataSourceKeepPreviousData, currentStrategy, stopPolling]);
   React.useEffect(() => {
     // `dataSourceKeepPreviousData` is a no-op for tree data and row grouping: those
@@ -363,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";
@@ -40,6 +43,11 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
   }, [currentStrategy]);
   const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
   const lastRequestId = React.useRef(0);
+  // `false` while a request is in flight, and for any request that errors or is discarded as
+  // stale. Lets the mount effect tell "rows are already displayed" from "the fetch never landed".
+  const rowsAreUpToDate = React.useRef(false);
+  // Requests that are still running and will apply their response when they settle.
+  const pendingRequestCount = React.useRef(0);
   const pollingIntervalRef = React.useRef(null);
   const onDataSourceErrorProp = props.onDataSourceError;
   const revalidateMs = props.dataSourceRevalidateMs;
@@ -65,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;
@@ -84,6 +95,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
           keepChildrenExpanded
         }
       });
+      rowsAreUpToDate.current = true;
       if (standardRowsUpdateStrategyActive) {
         apiRef.current.setLoading(false);
       }
@@ -96,6 +108,8 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
     }
     const requestId = lastRequestId.current + 1;
     lastRequestId.current = requestId;
+    rowsAreUpToDate.current = false;
+    pendingRequestCount.current += 1;
     try {
       const getRowsResponse = await getRows(fetchParams);
       const cacheResponses = cacheChunkManager.splitResponse(fetchParams, getRowsResponse);
@@ -109,6 +123,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
             keepChildrenExpanded
           }
         });
+        rowsAreUpToDate.current = true;
       }
     } catch (originalError) {
       if (lastRequestId.current === requestId) {
@@ -131,6 +146,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
         }
       }
     } finally {
+      pendingRequestCount.current -= 1;
       if (standardRowsUpdateStrategyActive && lastRequestId.current === requestId) {
         apiRef.current.setLoading(false);
       }
@@ -283,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) {
@@ -306,12 +329,34 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
     }
   }, [revalidateMs, stopPolling]);
   React.useEffect(() => stopPolling, [stopPolling]);
+  const lastApiRef = React.useRef(apiRef);
+  const lastStrategy = React.useRef(currentStrategy);
+  const lastDataSource = React.useRef(props.dataSource);
   React.useEffect(() => {
+    // `<Activity mode="hidden">` leaves the root element in the document, a real unmount does not.
+    // Only discard the in-flight response in the latter case, so hiding lets the request land.
+    const rootElement = apiRef.current?.rootElementRef?.current ?? null;
+    const ignoreInFlightRequest = () => {
+      if (!rootElement?.isConnected) {
+        lastRequestId.current += 1;
+      }
+    };
+
     // Return early if the proper strategy isn't set yet
     // Context: https://github.com/mui/mui-x/issues/19650
     if (currentStrategy !== DataSourceRowsUpdateStrategy.Default && currentStrategy !== DataSourceRowsUpdateStrategy.LazyLoading && currentStrategy !== DataSourceRowsUpdateStrategy.GroupedData && currentStrategy !== DataSourceRowsUpdateStrategy.LazyLoadedGroupedData) {
       return undefined;
     }
+    const dependenciesChanged = lastApiRef.current !== apiRef || lastStrategy.current !== currentStrategy || lastDataSource.current !== props.dataSource;
+    lastApiRef.current = apiRef;
+    lastStrategy.current = currentStrategy;
+    lastDataSource.current = props.dataSource;
+
+    // Re-mounting the effect (`<Activity />` becoming visible again, for instance) must not
+    // re-fetch data that is already displayed.
+    if (!dependenciesChanged && (rowsAreUpToDate.current || pendingRequestCount.current > 0)) {
+      return ignoreInFlightRequest;
+    }
     if (props.dataSource) {
       stopPolling();
       // `dataSourceKeepPreviousData` only applies to the flat `Default` strategy (mirroring
@@ -325,10 +370,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
       apiRef.current.dataSource.cache.clear();
       apiRef.current.dataSource.fetchRows();
     }
-    return () => {
-      // ignore the current request on unmount
-      lastRequestId.current += 1;
-    };
+    return ignoreInFlightRequest;
   }, [apiRef, props.dataSource, props.dataSourceKeepPreviousData, currentStrategy, stopPolling]);
   React.useEffect(() => {
     // `dataSourceKeepPreviousData` is a no-op for tree data and row grouping: those
@@ -356,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) {