@mui/x-data-grid 9.8.0 → 9.9.0

package/components/quickFilter/QuickFilter.d.mts

@@ -57,7 +57,7 @@ export type QuickFilterProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'class
  *
  * - [QuickFilter API](https://mui.com/x/api/data-grid/quick-filter/)
  */
-declare function QuickFilter(props: QuickFilterProps): import("react/jsx-runtime").JSX.Element;
+declare function QuickFilter(props: QuickFilterProps): React.JSX.Element;
 declare namespace QuickFilter {
   var propTypes: any;
 }

package/components/quickFilter/QuickFilter.d.ts

@@ -57,7 +57,7 @@ export type QuickFilterProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'class
  *
  * - [QuickFilter API](https://mui.com/x/api/data-grid/quick-filter/)
  */
-declare function QuickFilter(props: QuickFilterProps): import("react/jsx-runtime").JSX.Element;
+declare function QuickFilter(props: QuickFilterProps): React.JSX.Element;
 declare namespace QuickFilter {
   var propTypes: any;
 }

package/components/toolbar/GridToolbarExport.d.mts

@@ -27,11 +27,11 @@ export interface GridToolbarExportProps {
   };
   [x: `data-${string}`]: string;
 }
-declare function GridCsvExportMenuItem(props: GridCsvExportMenuItemProps): import("react/jsx-runtime").JSX.Element;
+declare function GridCsvExportMenuItem(props: GridCsvExportMenuItemProps): React.JSX.Element;
 declare namespace GridCsvExportMenuItem {
   var propTypes: any;
 }
-declare function GridPrintExportMenuItem(props: GridPrintExportMenuItemProps): import("react/jsx-runtime").JSX.Element;
+declare function GridPrintExportMenuItem(props: GridPrintExportMenuItemProps): React.JSX.Element;
 declare namespace GridPrintExportMenuItem {
   var propTypes: any;
 }

package/components/toolbar/GridToolbarExport.d.ts

@@ -27,11 +27,11 @@ export interface GridToolbarExportProps {
   };
   [x: `data-${string}`]: string;
 }
-declare function GridCsvExportMenuItem(props: GridCsvExportMenuItemProps): import("react/jsx-runtime").JSX.Element;
+declare function GridCsvExportMenuItem(props: GridCsvExportMenuItemProps): React.JSX.Element;
 declare namespace GridCsvExportMenuItem {
   var propTypes: any;
 }
-declare function GridPrintExportMenuItem(props: GridPrintExportMenuItemProps): import("react/jsx-runtime").JSX.Element;
+declare function GridPrintExportMenuItem(props: GridPrintExportMenuItemProps): React.JSX.Element;
 declare namespace GridPrintExportMenuItem {
   var propTypes: any;
 }

package/components/toolbar/GridToolbarQuickFilter.d.mts

@@ -30,7 +30,7 @@ export type GridToolbarQuickFilterProps = {
 /**
  * @deprecated Use the {@link https://mui.com/x/react-data-grid/components/quick-filter/ Quick Filter} component instead. This component will be removed in a future major release.
  */
-declare function GridToolbarQuickFilter(props: GridToolbarQuickFilterProps): import("react/jsx-runtime").JSX.Element;
+declare function GridToolbarQuickFilter(props: GridToolbarQuickFilterProps): import("react").JSX.Element;
 declare namespace GridToolbarQuickFilter {
   var propTypes: any;
 }

package/components/toolbar/GridToolbarQuickFilter.d.ts

@@ -30,7 +30,7 @@ export type GridToolbarQuickFilterProps = {
 /**
  * @deprecated Use the {@link https://mui.com/x/react-data-grid/components/quick-filter/ Quick Filter} component instead. This component will be removed in a future major release.
  */
-declare function GridToolbarQuickFilter(props: GridToolbarQuickFilterProps): import("react/jsx-runtime").JSX.Element;
+declare function GridToolbarQuickFilter(props: GridToolbarQuickFilterProps): import("react").JSX.Element;
 declare namespace GridToolbarQuickFilter {
   var propTypes: any;
 }

package/components/toolbarV8/GridToolbar.d.mts

@@ -5,12 +5,12 @@ interface GridToolbarInternalProps {
   additionalExportMenuItems?: (onMenuItemClick: () => void) => React.ReactNode;
 }
 export type GridToolbarProps = GridSlotProps['toolbar'] & GridToolbarInternalProps;
-declare function GridToolbarDivider(props: GridSlotProps['baseDivider']): import("react/jsx-runtime").JSX.Element;
+declare function GridToolbarDivider(props: GridSlotProps['baseDivider']): React.JSX.Element;
 declare namespace GridToolbarDivider {
   var propTypes: any;
 }
-declare function GridToolbarLabel(props: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
-declare function GridToolbar(props: GridToolbarProps): import("react/jsx-runtime").JSX.Element;
+declare function GridToolbarLabel(props: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+declare function GridToolbar(props: GridToolbarProps): React.JSX.Element;
 declare namespace GridToolbar {
   var propTypes: any;
 }

package/components/toolbarV8/GridToolbar.d.ts

@@ -5,12 +5,12 @@ interface GridToolbarInternalProps {
   additionalExportMenuItems?: (onMenuItemClick: () => void) => React.ReactNode;
 }
 export type GridToolbarProps = GridSlotProps['toolbar'] & GridToolbarInternalProps;
-declare function GridToolbarDivider(props: GridSlotProps['baseDivider']): import("react/jsx-runtime").JSX.Element;
+declare function GridToolbarDivider(props: GridSlotProps['baseDivider']): React.JSX.Element;
 declare namespace GridToolbarDivider {
   var propTypes: any;
 }
-declare function GridToolbarLabel(props: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
-declare function GridToolbar(props: GridToolbarProps): import("react/jsx-runtime").JSX.Element;
+declare function GridToolbarLabel(props: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+declare function GridToolbar(props: GridToolbarProps): React.JSX.Element;
 declare namespace GridToolbar {
   var propTypes: any;
 }

package/components/virtualization/GridBottomContainer.d.mts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 export type GridBottomContainerProps = React.PropsWithChildren;
-export declare function GridBottomContainer(props: GridBottomContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function GridBottomContainer(props: GridBottomContainerProps): React.JSX.Element;

package/components/virtualization/GridBottomContainer.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 export type GridBottomContainerProps = React.PropsWithChildren;
-export declare function GridBottomContainer(props: GridBottomContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function GridBottomContainer(props: GridBottomContainerProps): React.JSX.Element;

package/components/virtualization/GridTopContainer.d.mts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare function GridTopContainer(props: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare function GridTopContainer(props: React.PropsWithChildren): React.JSX.Element;

package/components/virtualization/GridTopContainer.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare function GridTopContainer(props: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare function GridTopContainer(props: React.PropsWithChildren): React.JSX.Element;

package/components/virtualization/GridVirtualScroller.d.mts

@@ -2,5 +2,5 @@ import * as React from 'react';
 export interface GridVirtualScrollerProps {
   children?: React.ReactNode;
 }
-declare function GridVirtualScroller(props: GridVirtualScrollerProps): import("react/jsx-runtime").JSX.Element;
+declare function GridVirtualScroller(props: GridVirtualScrollerProps): React.JSX.Element;
 export { GridVirtualScroller };

package/components/virtualization/GridVirtualScroller.d.ts

@@ -2,5 +2,5 @@ import * as React from 'react';
 export interface GridVirtualScrollerProps {
   children?: React.ReactNode;
 }
-declare function GridVirtualScroller(props: GridVirtualScrollerProps): import("react/jsx-runtime").JSX.Element;
+declare function GridVirtualScroller(props: GridVirtualScrollerProps): React.JSX.Element;
 export { GridVirtualScroller };

package/components/virtualization/GridVirtualScrollerFiller.d.mts

@@ -1,9 +1,10 @@
+import * as React from 'react';
 type Props = {
   /** The number of rows */
   rowsLength: number;
 };
 declare function GridVirtualScrollerFiller({
   rowsLength
-}: Props): import("react/jsx-runtime").JSX.Element | null;
+}: Props): React.JSX.Element | null;
 declare const Memoized: typeof GridVirtualScrollerFiller;
 export { Memoized as GridVirtualScrollerFiller };

package/components/virtualization/GridVirtualScrollerFiller.d.ts

@@ -1,9 +1,10 @@
+import * as React from 'react';
 type Props = {
   /** The number of rows */
   rowsLength: number;
 };
 declare function GridVirtualScrollerFiller({
   rowsLength
-}: Props): import("react/jsx-runtime").JSX.Element | null;
+}: Props): React.JSX.Element | null;
 declare const Memoized: typeof GridVirtualScrollerFiller;
 export { Memoized as GridVirtualScrollerFiller };

package/constants/dataGridPropsDefaultValues.js

@@ -30,6 +30,7 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PROPS_DEFAULT_VALUES =
   disableMultipleColumnsFiltering: false,
   disableMultipleColumnsSorting: false,
   disableMultipleRowSelection: false,
+  dataSourceKeepPreviousData: false,
   dataSourceRevalidateMs: 0,
   disableRowSelectionOnClick: false,
   disableRowSelectionExcludeModel: false,

package/constants/dataGridPropsDefaultValues.mjs

@@ -24,6 +24,7 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   disableMultipleColumnsFiltering: false,
   disableMultipleColumnsSorting: false,
   disableMultipleRowSelection: false,
+  dataSourceKeepPreviousData: false,
   dataSourceRevalidateMs: 0,
   disableRowSelectionOnClick: false,
   disableRowSelectionExcludeModel: false,

package/context/GridContextProvider.d.mts

@@ -13,5 +13,5 @@ export declare function GridContextProvider({
   configuration,
   props,
   children
-}: GridContextProviderProps): import("react/jsx-runtime").JSX.Element;
+}: GridContextProviderProps): React.JSX.Element;
 export {};

package/context/GridContextProvider.d.ts

@@ -13,5 +13,5 @@ export declare function GridContextProvider({
   configuration,
   props,
   children
-}: GridContextProviderProps): import("react/jsx-runtime").JSX.Element;
+}: GridContextProviderProps): React.JSX.Element;
 export {};

package/hooks/features/columnHeaders/useGridColumnHeaders.d.mts

@@ -49,8 +49,8 @@ export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) =>
   };
   visibleColumns: GridStateColDef[];
   columnPositions: number[];
-  getFillers: (params: GetHeadersParams | undefined, children: React.ReactNode, leftOverflow: number, borderBottom?: boolean) => import("react/jsx-runtime").JSX.Element;
-  getColumnHeadersRow: () => import("react/jsx-runtime").JSX.Element;
+  getFillers: (params: GetHeadersParams | undefined, children: React.ReactNode, leftOverflow: number, borderBottom?: boolean) => React.JSX.Element;
+  getColumnHeadersRow: () => React.JSX.Element;
   getColumnsToRender: (params?: GetHeadersParams) => {
     renderedColumns: GridStateColDef[];
     firstColumnToRender: number;

package/hooks/features/columnHeaders/useGridColumnHeaders.d.ts

@@ -49,8 +49,8 @@ export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) =>
   };
   visibleColumns: GridStateColDef[];
   columnPositions: number[];
-  getFillers: (params: GetHeadersParams | undefined, children: React.ReactNode, leftOverflow: number, borderBottom?: boolean) => import("react/jsx-runtime").JSX.Element;
-  getColumnHeadersRow: () => import("react/jsx-runtime").JSX.Element;
+  getFillers: (params: GetHeadersParams | undefined, children: React.ReactNode, leftOverflow: number, borderBottom?: boolean) => React.JSX.Element;
+  getColumnHeadersRow: () => React.JSX.Element;
   getColumnsToRender: (params?: GetHeadersParams) => {
     renderedColumns: GridStateColDef[];
     firstColumnToRender: number;

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

@@ -7,7 +7,7 @@ import type { DataGridProcessedProps } from "../../../models/props/DataGridProps
 import type { GridStrategyProcessor } from "../../core/strategyProcessing/index.mjs";
 import type { GridEventListener } from "../../../models/events/index.mjs";
 import type { GridRowId } from "../../../models/gridRows.mjs";
-export declare const useGridDataSourceBase: <Api extends GridPrivateApiCommunity>(apiRef: RefObject<Api>, props: Pick<DataGridProcessedProps, "dataSource" | "dataSourceCache" | "onDataSourceError" | "pageSizeOptions" | "pagination" | "signature" | "dataSourceRevalidateMs">, options?: GridDataSourceBaseOptions) => {
+export declare const useGridDataSourceBase: <Api extends GridPrivateApiCommunity>(apiRef: RefObject<Api>, props: Pick<DataGridProcessedProps, "dataSource" | "dataSourceCache" | "dataSourceKeepPreviousData" | "onDataSourceError" | "pageSizeOptions" | "pagination" | "signature" | "dataSourceRevalidateMs">, options?: GridDataSourceBaseOptions) => {
   api: {
     public: GridDataSourceApi;
   };

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

@@ -7,7 +7,7 @@ import type { DataGridProcessedProps } from "../../../models/props/DataGridProps
 import type { GridStrategyProcessor } from "../../core/strategyProcessing/index.js";
 import type { GridEventListener } from "../../../models/events/index.js";
 import type { GridRowId } from "../../../models/gridRows.js";
-export declare const useGridDataSourceBase: <Api extends GridPrivateApiCommunity>(apiRef: RefObject<Api>, props: Pick<DataGridProcessedProps, "dataSource" | "dataSourceCache" | "onDataSourceError" | "pageSizeOptions" | "pagination" | "signature" | "dataSourceRevalidateMs">, options?: GridDataSourceBaseOptions) => {
+export declare const useGridDataSourceBase: <Api extends GridPrivateApiCommunity>(apiRef: RefObject<Api>, props: Pick<DataGridProcessedProps, "dataSource" | "dataSourceCache" | "dataSourceKeepPreviousData" | "onDataSourceError" | "pageSizeOptions" | "pagination" | "signature" | "dataSourceRevalidateMs">, options?: GridDataSourceBaseOptions) => {
   api: {
     public: GridDataSourceApi;
   };

package/hooks/features/dataSource/useGridDataSourceBase.js

@@ -209,6 +209,11 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
   });
   const handleDataUpdate = React.useCallback(params => {
     if ('error' in params) {
+      // Reset the rows on error, even with `dataSourceKeepPreviousData`. The previous
+      // rows belong to the previous query while the pagination/sorting/filtering controls
+      // already reflect the failed request, so keeping them would present stale data as if
+      // it satisfied the new query. This matches TanStack Query, where `keepPreviousData`
+      // clears the placeholder once the query settles with an error.
       apiRef.current.setRows([]);
       return;
     }
@@ -265,17 +270,26 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
   };
   const debouncedFetchRows = React.useMemo(() => (0, _debounce.default)(fetchRows, 0), [fetchRows]);
   const handleFetchRowsOnParamsChange = React.useCallback(() => {
-    // Clear the rows first and immediately mark the grid as loading so the overlay
-    // selector never observes the intermediate `rows=[] && loading=false` state that
-    // would otherwise pick `noRowsOverlay`. Order matters: `setRows([])` rebuilds
-    // `state.rows` from `props.loading`, so the `setLoading(true)` call must come after
-    // it to survive the rebuild. This handler is only wired up when a standard strategy
-    // is active via the `runIf` guards on the returned `events` object.
-    apiRef.current.setRows([]);
+    // `dataSourceKeepPreviousData` only applies to the flat `Default` strategy. For
+    // `GroupedData` (tree data / row grouping), skipping the synchronous `setRows([])`
+    // would leave the existing tree merged on top of the new response and render rows
+    // in stale sort order (https://github.com/mui/mui-x/pull/21619).
+    // This handler is only wired up when a standard strategy is active via the `runIf`
+    // guards on the returned `events` object.
+    const activeStrategy = apiRef.current.getActiveStrategy(_strategyProcessing.GridStrategyGroup.DataSource);
+    const keepPreviousData = props.dataSourceKeepPreviousData && activeStrategy === _utils2.DataSourceRowsUpdateStrategy.Default;
+    if (!keepPreviousData) {
+      // Clear the rows first and immediately mark the grid as loading so the overlay
+      // selector never observes the intermediate `rows=[] && loading=false` state that
+      // would otherwise pick `noRowsOverlay`. Order matters: `setRows([])` rebuilds
+      // `state.rows` from `props.loading`, so the `setLoading(true)` call must come after
+      // it to survive the rebuild.
+      apiRef.current.setRows([]);
+    }
     apiRef.current.setLoading(true);
     stopPolling();
     debouncedFetchRows();
-  }, [apiRef, stopPolling, debouncedFetchRows]);
+  }, [apiRef, props.dataSourceKeepPreviousData, stopPolling, debouncedFetchRows]);
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {
     if (isFirstRender.current) {
@@ -307,7 +321,14 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
     }
     if (props.dataSource) {
       stopPolling();
-      apiRef.current.setRows([]);
+      // `dataSourceKeepPreviousData` only applies to the flat `Default` strategy (mirroring
+      // `handleFetchRowsOnParamsChange`). Keep the previous rows visible when the `dataSource`
+      // reference changes so the feature isn't silently defeated for a non-memoized
+      // `dataSource`. Other strategies must still reset the rows to keep their order consistent
+      // with the new response (https://github.com/mui/mui-x/pull/21619).
+      if (!props.dataSourceKeepPreviousData || currentStrategy !== _utils2.DataSourceRowsUpdateStrategy.Default) {
+        apiRef.current.setRows([]);
+      }
       apiRef.current.dataSource.cache.clear();
       apiRef.current.dataSource.fetchRows();
     }
@@ -315,7 +336,15 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
       // ignore the current request on unmount
       lastRequestId.current += 1;
     };
-  }, [apiRef, props.dataSource, currentStrategy, stopPolling]);
+  }, [apiRef, props.dataSource, props.dataSourceKeepPreviousData, currentStrategy, stopPolling]);
+  React.useEffect(() => {
+    // `dataSourceKeepPreviousData` is a no-op for tree data and row grouping: those
+    // strategies always reset the rows on refetch to keep their order consistent with the
+    // response. Warn so the limitation is discoverable at runtime, not only in the docs.
+    if (process.env.NODE_ENV !== 'production' && props.dataSourceKeepPreviousData && (currentStrategy === _utils2.DataSourceRowsUpdateStrategy.GroupedData || currentStrategy === _utils2.DataSourceRowsUpdateStrategy.LazyLoadedGroupedData)) {
+      (0, _warning.warnOnce)(['MUI X: The `dataSourceKeepPreviousData` prop only applies to flat data.', 'It is ignored when tree data or row grouping is enabled, because the rows are always reset on refetch to keep their order consistent with the response.', 'For more details, see https://mui.com/x/react-data-grid/server-side-data/#keep-previous-data-while-fetching.']);
+    }
+  }, [props.dataSourceKeepPreviousData, currentStrategy]);
   return {
     api: {
       public: dataSourceApi

package/hooks/features/dataSource/useGridDataSourceBase.mjs

@@ -202,6 +202,11 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
   });
   const handleDataUpdate = React.useCallback(params => {
     if ('error' in params) {
+      // Reset the rows on error, even with `dataSourceKeepPreviousData`. The previous
+      // rows belong to the previous query while the pagination/sorting/filtering controls
+      // already reflect the failed request, so keeping them would present stale data as if
+      // it satisfied the new query. This matches TanStack Query, where `keepPreviousData`
+      // clears the placeholder once the query settles with an error.
       apiRef.current.setRows([]);
       return;
     }
@@ -258,17 +263,26 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
   };
   const debouncedFetchRows = React.useMemo(() => debounce(fetchRows, 0), [fetchRows]);
   const handleFetchRowsOnParamsChange = React.useCallback(() => {
-    // Clear the rows first and immediately mark the grid as loading so the overlay
-    // selector never observes the intermediate `rows=[] && loading=false` state that
-    // would otherwise pick `noRowsOverlay`. Order matters: `setRows([])` rebuilds
-    // `state.rows` from `props.loading`, so the `setLoading(true)` call must come after
-    // it to survive the rebuild. This handler is only wired up when a standard strategy
-    // is active via the `runIf` guards on the returned `events` object.
-    apiRef.current.setRows([]);
+    // `dataSourceKeepPreviousData` only applies to the flat `Default` strategy. For
+    // `GroupedData` (tree data / row grouping), skipping the synchronous `setRows([])`
+    // would leave the existing tree merged on top of the new response and render rows
+    // in stale sort order (https://github.com/mui/mui-x/pull/21619).
+    // This handler is only wired up when a standard strategy is active via the `runIf`
+    // guards on the returned `events` object.
+    const activeStrategy = apiRef.current.getActiveStrategy(GridStrategyGroup.DataSource);
+    const keepPreviousData = props.dataSourceKeepPreviousData && activeStrategy === DataSourceRowsUpdateStrategy.Default;
+    if (!keepPreviousData) {
+      // Clear the rows first and immediately mark the grid as loading so the overlay
+      // selector never observes the intermediate `rows=[] && loading=false` state that
+      // would otherwise pick `noRowsOverlay`. Order matters: `setRows([])` rebuilds
+      // `state.rows` from `props.loading`, so the `setLoading(true)` call must come after
+      // it to survive the rebuild.
+      apiRef.current.setRows([]);
+    }
     apiRef.current.setLoading(true);
     stopPolling();
     debouncedFetchRows();
-  }, [apiRef, stopPolling, debouncedFetchRows]);
+  }, [apiRef, props.dataSourceKeepPreviousData, stopPolling, debouncedFetchRows]);
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {
     if (isFirstRender.current) {
@@ -300,7 +314,14 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
     }
     if (props.dataSource) {
       stopPolling();
-      apiRef.current.setRows([]);
+      // `dataSourceKeepPreviousData` only applies to the flat `Default` strategy (mirroring
+      // `handleFetchRowsOnParamsChange`). Keep the previous rows visible when the `dataSource`
+      // reference changes so the feature isn't silently defeated for a non-memoized
+      // `dataSource`. Other strategies must still reset the rows to keep their order consistent
+      // with the new response (https://github.com/mui/mui-x/pull/21619).
+      if (!props.dataSourceKeepPreviousData || currentStrategy !== DataSourceRowsUpdateStrategy.Default) {
+        apiRef.current.setRows([]);
+      }
       apiRef.current.dataSource.cache.clear();
       apiRef.current.dataSource.fetchRows();
     }
@@ -308,7 +329,15 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
       // ignore the current request on unmount
       lastRequestId.current += 1;
     };
-  }, [apiRef, props.dataSource, currentStrategy, stopPolling]);
+  }, [apiRef, props.dataSource, props.dataSourceKeepPreviousData, currentStrategy, stopPolling]);
+  React.useEffect(() => {
+    // `dataSourceKeepPreviousData` is a no-op for tree data and row grouping: those
+    // strategies always reset the rows on refetch to keep their order consistent with the
+    // response. Warn so the limitation is discoverable at runtime, not only in the docs.
+    if (process.env.NODE_ENV !== 'production' && props.dataSourceKeepPreviousData && (currentStrategy === DataSourceRowsUpdateStrategy.GroupedData || currentStrategy === DataSourceRowsUpdateStrategy.LazyLoadedGroupedData)) {
+      warnOnce(['MUI X: The `dataSourceKeepPreviousData` prop only applies to flat data.', 'It is ignored when tree data or row grouping is enabled, because the rows are always reset on refetch to keep their order consistent with the response.', 'For more details, see https://mui.com/x/react-data-grid/server-side-data/#keep-previous-data-while-fetching.']);
+    }
+  }, [props.dataSourceKeepPreviousData, currentStrategy]);
   return {
     api: {
       public: dataSourceApi

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

@@ -1,8 +1,20 @@
 import type { RefObject } from '@mui/x-internals/types';
+import { GridLogicOperator } from "../../../models/index.mjs";
 import type { GridColDef, GridFilterItem, GridFilterModel, GridRowModel } from "../../../models/index.mjs";
 import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.mjs";
 import type { GridStateCommunity } from "../../../models/gridStateCommunity.mjs";
 import type { GridAggregatedFilterItemApplier, GridFilterItemResult, GridQuickFilterValueResult } from "./gridFilterState.mjs";
+/**
+ * Pure helpers computing a new filter model from an existing one.
+ * Shared by the imperative `apiRef` methods (`useGridFilter`) and the controlled
+ * filter panel (`GridFilterPanelBase`) so both paths produce identical models.
+ * Each helper returns the same model reference when nothing changes, so callers
+ * relying on referential equality can skip no-op updates.
+ */
+export declare const upsertFilterItemInModel: (model: GridFilterModel, item: GridFilterItem) => GridFilterModel;
+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;
 /**
  * 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

@@ -1,8 +1,20 @@
 import type { RefObject } from '@mui/x-internals/types';
+import { GridLogicOperator } from "../../../models/index.js";
 import type { GridColDef, GridFilterItem, GridFilterModel, GridRowModel } from "../../../models/index.js";
 import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
 import type { GridStateCommunity } from "../../../models/gridStateCommunity.js";
 import type { GridAggregatedFilterItemApplier, GridFilterItemResult, GridQuickFilterValueResult } from "./gridFilterState.js";
+/**
+ * Pure helpers computing a new filter model from an existing one.
+ * Shared by the imperative `apiRef` methods (`useGridFilter`) and the controlled
+ * filter panel (`GridFilterPanelBase`) so both paths produce identical models.
+ * Each helper returns the same model reference when nothing changes, so callers
+ * relying on referential equality can skip no-op updates.
+ */
+export declare const upsertFilterItemInModel: (model: GridFilterModel, item: GridFilterItem) => GridFilterModel;
+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;
 /**
  * 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.shouldQuickFilterExcludeHiddenColumns = exports.sanitizeFilterModel = exports.removeDiacritics = exports.passFilterLogic = exports.mergeStateWithFilterModel = exports.cleanFilterItem = exports.buildAggregatedFilterApplier = void 0;
+exports.upsertFilterItemsInModel = exports.upsertFilterItemInModel = exports.shouldQuickFilterExcludeHiddenColumns = exports.setFilterLogicOperatorInModel = exports.sanitizeFilterModel = exports.removeDiacritics = exports.passFilterLogic = exports.mergeStateWithFilterModel = 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");
@@ -12,6 +12,61 @@ var _models = require("../../../models");
 var _gridFilterState = require("./gridFilterState");
 var _getPublicApiRef = require("../../../utils/getPublicApiRef");
 var _columns = require("../columns");
+/**
+ * Pure helpers computing a new filter model from an existing one.
+ * Shared by the imperative `apiRef` methods (`useGridFilter`) and the controlled
+ * filter panel (`GridFilterPanelBase`) so both paths produce identical models.
+ * Each helper returns the same model reference when nothing changes, so callers
+ * relying on referential equality can skip no-op updates.
+ */
+
+const upsertFilterItemInModel = (model, item) => {
+  const items = [...model.items];
+  const itemIndex = items.findIndex(filterItem => filterItem.id === item.id);
+  if (itemIndex === -1) {
+    items.push(item);
+  } else {
+    items[itemIndex] = item;
+  }
+  return (0, _extends2.default)({}, model, {
+    items
+  });
+};
+exports.upsertFilterItemInModel = upsertFilterItemInModel;
+const upsertFilterItemsInModel = (model, itemsToUpsert) => {
+  const items = [...model.items];
+  itemsToUpsert.forEach(item => {
+    const itemIndex = items.findIndex(filterItem => filterItem.id === item.id);
+    if (itemIndex === -1) {
+      items.push(item);
+    } else {
+      items[itemIndex] = item;
+    }
+  });
+  return (0, _extends2.default)({}, model, {
+    items
+  });
+};
+exports.upsertFilterItemsInModel = upsertFilterItemsInModel;
+const deleteFilterItemFromModel = (model, itemToDelete) => {
+  const items = model.items.filter(item => item.id !== itemToDelete.id);
+  if (items.length === model.items.length) {
+    return model;
+  }
+  return (0, _extends2.default)({}, model, {
+    items
+  });
+};
+exports.deleteFilterItemFromModel = deleteFilterItemFromModel;
+const setFilterLogicOperatorInModel = (model, logicOperator) => {
+  if (model.logicOperator === logicOperator) {
+    return model;
+  }
+  return (0, _extends2.default)({}, model, {
+    logicOperator
+  });
+};
+exports.setFilterLogicOperatorInModel = setFilterLogicOperatorInModel;
 let hasEval;
 function getHasEval() {
   if (hasEval !== undefined) {

package/hooks/features/filter/gridFilterUtils.mjs

@@ -5,6 +5,58 @@ 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
+ * filter panel (`GridFilterPanelBase`) so both paths produce identical models.
+ * Each helper returns the same model reference when nothing changes, so callers
+ * relying on referential equality can skip no-op updates.
+ */
+
+export const upsertFilterItemInModel = (model, item) => {
+  const items = [...model.items];
+  const itemIndex = items.findIndex(filterItem => filterItem.id === item.id);
+  if (itemIndex === -1) {
+    items.push(item);
+  } else {
+    items[itemIndex] = item;
+  }
+  return _extends({}, model, {
+    items
+  });
+};
+export const upsertFilterItemsInModel = (model, itemsToUpsert) => {
+  const items = [...model.items];
+  itemsToUpsert.forEach(item => {
+    const itemIndex = items.findIndex(filterItem => filterItem.id === item.id);
+    if (itemIndex === -1) {
+      items.push(item);
+    } else {
+      items[itemIndex] = item;
+    }
+  });
+  return _extends({}, model, {
+    items
+  });
+};
+export const deleteFilterItemFromModel = (model, itemToDelete) => {
+  const items = model.items.filter(item => item.id !== itemToDelete.id);
+  if (items.length === model.items.length) {
+    return model;
+  }
+  return _extends({}, model, {
+    items
+  });
+};
+export const setFilterLogicOperatorInModel = (model, logicOperator) => {
+  if (model.logicOperator === logicOperator) {
+    return model;
+  }
+  return _extends({}, model, {
+    logicOperator
+  });
+};
 let hasEval;
 function getHasEval() {
   if (hasEval !== undefined) {