@mui/x-data-grid 9.8.0 → 9.10.0

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/density/useGridDensity.d.mts

@@ -3,4 +3,4 @@ import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommuni
 import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.mjs";
 import type { GridStateInitializer } from "../../utils/useGridInitializeState.mjs";
 export declare const densityStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'initialState' | 'density'>>;
-export declare const useGridDensity: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "density" | "onDensityChange" | "initialState">) => void;
+export declare const useGridDensity: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'density' | 'onDensityChange' | 'initialState'>) => void;

package/hooks/features/density/useGridDensity.d.ts

@@ -3,4 +3,4 @@ import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommuni
 import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
 import type { GridStateInitializer } from "../../utils/useGridInitializeState.js";
 export declare const densityStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'initialState' | 'density'>>;
-export declare const useGridDensity: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "density" | "onDensityChange" | "initialState">) => void;
+export declare const useGridDensity: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'density' | 'onDensityChange' | 'initialState'>) => void;

package/hooks/features/editing/useGridCellEditing.d.mts

@@ -1,4 +1,4 @@
 import type { RefObject } from '@mui/x-internals/types';
 import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.mjs";
 import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.mjs";
-export declare const useGridCellEditing: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "editMode" | "processRowUpdate" | "onCellEditStart" | "onCellEditStop" | "cellModesModel" | "onCellModesModelChange" | "onProcessRowUpdateError" | "signature" | "dataSource">) => void;
+export declare const useGridCellEditing: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'editMode' | 'processRowUpdate' | 'onCellEditStart' | 'onCellEditStop' | 'cellModesModel' | 'onCellModesModelChange' | 'onProcessRowUpdateError' | 'signature' | 'dataSource'>) => void;

package/hooks/features/editing/useGridCellEditing.d.ts

@@ -1,4 +1,4 @@
 import type { RefObject } from '@mui/x-internals/types';
 import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
 import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
-export declare const useGridCellEditing: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "editMode" | "processRowUpdate" | "onCellEditStart" | "onCellEditStop" | "cellModesModel" | "onCellModesModelChange" | "onProcessRowUpdateError" | "signature" | "dataSource">) => void;
+export declare const useGridCellEditing: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'editMode' | 'processRowUpdate' | 'onCellEditStart' | 'onCellEditStop' | 'cellModesModel' | 'onCellModesModelChange' | 'onProcessRowUpdateError' | 'signature' | 'dataSource'>) => void;

package/hooks/features/editing/useGridEditing.d.mts

@@ -4,4 +4,4 @@ import type { DataGridProcessedProps } from "../../../models/props/DataGridProps
 import type { GridConfiguration } from "../../../models/configuration/gridConfiguration.mjs";
 import type { GridStateInitializer } from "../../utils/useGridInitializeState.mjs";
 export declare const editingStateInitializer: GridStateInitializer;
-export declare const useGridEditing: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "isCellEditable" | "editMode" | "processRowUpdate" | "dataSource" | "onDataSourceError">, configuration: GridConfiguration) => void;
+export declare const useGridEditing: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'isCellEditable' | 'editMode' | 'processRowUpdate' | 'dataSource' | 'onDataSourceError'>, configuration: GridConfiguration) => void;

package/hooks/features/editing/useGridEditing.d.ts

@@ -4,4 +4,4 @@ import type { DataGridProcessedProps } from "../../../models/props/DataGridProps
 import type { GridConfiguration } from "../../../models/configuration/gridConfiguration.js";
 import type { GridStateInitializer } from "../../utils/useGridInitializeState.js";
 export declare const editingStateInitializer: GridStateInitializer;
-export declare const useGridEditing: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "isCellEditable" | "editMode" | "processRowUpdate" | "dataSource" | "onDataSourceError">, configuration: GridConfiguration) => void;
+export declare const useGridEditing: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'isCellEditable' | 'editMode' | 'processRowUpdate' | 'dataSource' | 'onDataSourceError'>, configuration: GridConfiguration) => void;

package/hooks/features/editing/useGridRowEditing.d.mts

@@ -1,4 +1,4 @@
 import type { RefObject } from '@mui/x-internals/types';
 import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.mjs";
 import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.mjs";
-export declare const useGridRowEditing: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "editMode" | "processRowUpdate" | "onRowEditStart" | "onRowEditStop" | "onProcessRowUpdateError" | "rowModesModel" | "onRowModesModelChange" | "signature" | "dataSource">) => void;
+export declare const useGridRowEditing: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'editMode' | 'processRowUpdate' | 'onRowEditStart' | 'onRowEditStop' | 'onProcessRowUpdateError' | 'rowModesModel' | 'onRowModesModelChange' | 'signature' | 'dataSource'>) => void;

package/hooks/features/editing/useGridRowEditing.d.ts

@@ -1,4 +1,4 @@
 import type { RefObject } from '@mui/x-internals/types';
 import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
 import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
-export declare const useGridRowEditing: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "editMode" | "processRowUpdate" | "onRowEditStart" | "onRowEditStop" | "onProcessRowUpdateError" | "rowModesModel" | "onRowModesModelChange" | "signature" | "dataSource">) => void;
+export declare const useGridRowEditing: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'editMode' | 'processRowUpdate' | 'onRowEditStart' | 'onRowEditStop' | 'onProcessRowUpdateError' | 'rowModesModel' | 'onRowModesModelChange' | 'signature' | 'dataSource'>) => void;

package/hooks/features/editing/utils.d.mts

@@ -1,2 +1,2 @@
 import type { GridColDef } from "../../../models/colDef/gridColDef.mjs";
-export declare const getDefaultCellValue: (colDef: GridColDef) => false | "" | undefined;
+export declare const getDefaultCellValue: (colDef: GridColDef) => "" | false | undefined;

package/hooks/features/editing/utils.d.ts

@@ -1,2 +1,2 @@
 import type { GridColDef } from "../../../models/colDef/gridColDef.js";
-export declare const getDefaultCellValue: (colDef: GridColDef) => false | "" | undefined;
+export declare const getDefaultCellValue: (colDef: GridColDef) => "" | false | undefined;

package/hooks/features/export/useGridCsvExport.d.mts

@@ -8,4 +8,4 @@ import type { DataGridProcessedProps } from "../../../models/props/DataGridProps
  * @requires useGridSelection (state)
  * @requires useGridParamsApi (method)
  */
-export declare const useGridCsvExport: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "ignoreValueFormatterDuringExport">) => void;
+export declare const useGridCsvExport: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'ignoreValueFormatterDuringExport'>) => void;

package/hooks/features/export/useGridCsvExport.d.ts

@@ -8,4 +8,4 @@ import type { DataGridProcessedProps } from "../../../models/props/DataGridProps
  * @requires useGridSelection (state)
  * @requires useGridParamsApi (method)
  */
-export declare const useGridCsvExport: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "ignoreValueFormatterDuringExport">) => void;
+export declare const useGridCsvExport: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'ignoreValueFormatterDuringExport'>) => void;

package/hooks/features/export/useGridPrintExport.d.mts

@@ -7,4 +7,4 @@ import type { DataGridProcessedProps } from "../../../models/props/DataGridProps
  * @requires useGridSorting (state)
  * @requires useGridParamsApi (method)
  */
-export declare const useGridPrintExport: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "columnHeaderHeight" | "headerFilterHeight">) => void;
+export declare const useGridPrintExport: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'pagination' | 'columnHeaderHeight' | 'headerFilterHeight'>) => void;

package/hooks/features/export/useGridPrintExport.d.ts

@@ -7,4 +7,4 @@ import type { DataGridProcessedProps } from "../../../models/props/DataGridProps
  * @requires useGridSorting (state)
  * @requires useGridParamsApi (method)
  */
-export declare const useGridPrintExport: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "columnHeaderHeight" | "headerFilterHeight">) => void;
+export declare const useGridPrintExport: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'pagination' | 'columnHeaderHeight' | 'headerFilterHeight'>) => void;

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.
@@ -12,7 +24,7 @@ import type { GridAggregatedFilterItemApplier, GridFilterItemResult, GridQuickFi
  */
 export declare const cleanFilterItem: (item: GridFilterItem, apiRef: RefObject<GridPrivateApiCommunity>) => GridFilterItem;
 export declare const sanitizeFilterModel: (model: GridFilterModel, disableMultipleColumnsFiltering: boolean, apiRef: RefObject<GridPrivateApiCommunity>) => GridFilterModel;
-export declare const mergeStateWithFilterModel: (filterModel: GridFilterModel, disableMultipleColumnsFiltering: boolean, apiRef: RefObject<GridPrivateApiCommunity>) => (filteringState: GridStateCommunity["filter"]) => GridStateCommunity["filter"];
+export declare const mergeStateWithFilterModel: (filterModel: GridFilterModel, disableMultipleColumnsFiltering: boolean, apiRef: RefObject<GridPrivateApiCommunity>) => (filteringState: GridStateCommunity['filter']) => GridStateCommunity['filter'];
 export declare const removeDiacritics: (value: unknown) => unknown;
 export declare const shouldQuickFilterExcludeHiddenColumns: (filterModel: GridFilterModel) => boolean;
 export declare const buildAggregatedFilterApplier: (filterModel: GridFilterModel, filterValueGetter: (row: GridRowModel, column: GridColDef) => any, apiRef: RefObject<GridPrivateApiCommunity>, disableEval: boolean) => GridAggregatedFilterItemApplier;

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.
@@ -12,7 +24,7 @@ import type { GridAggregatedFilterItemApplier, GridFilterItemResult, GridQuickFi
  */
 export declare const cleanFilterItem: (item: GridFilterItem, apiRef: RefObject<GridPrivateApiCommunity>) => GridFilterItem;
 export declare const sanitizeFilterModel: (model: GridFilterModel, disableMultipleColumnsFiltering: boolean, apiRef: RefObject<GridPrivateApiCommunity>) => GridFilterModel;
-export declare const mergeStateWithFilterModel: (filterModel: GridFilterModel, disableMultipleColumnsFiltering: boolean, apiRef: RefObject<GridPrivateApiCommunity>) => (filteringState: GridStateCommunity["filter"]) => GridStateCommunity["filter"];
+export declare const mergeStateWithFilterModel: (filterModel: GridFilterModel, disableMultipleColumnsFiltering: boolean, apiRef: RefObject<GridPrivateApiCommunity>) => (filteringState: GridStateCommunity['filter']) => GridStateCommunity['filter'];
 export declare const removeDiacritics: (value: unknown) => unknown;
 export declare const shouldQuickFilterExcludeHiddenColumns: (filterModel: GridFilterModel) => boolean;
 export declare const buildAggregatedFilterApplier: (filterModel: GridFilterModel, filterValueGetter: (row: GridRowModel, column: GridColDef) => any, apiRef: RefObject<GridPrivateApiCommunity>, disableEval: boolean) => GridAggregatedFilterItemApplier;

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) {

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

@@ -9,4 +9,4 @@ export declare const filterStateInitializer: GridStateInitializer<Pick<DataGridP
  * @requires useGridParamsApi (method)
  * @requires useGridRows (event)
  */
-export declare const useGridFilter: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "rows" | "initialState" | "filterModel" | "getRowId" | "onFilterModelChange" | "filterMode" | "disableMultipleColumnsFiltering" | "slots" | "slotProps" | "disableColumnFilter" | "disableEval" | "ignoreDiacritics" | "signature">, configuration: GridConfiguration) => void;
+export declare const useGridFilter: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'rows' | 'initialState' | 'filterModel' | 'getRowId' | 'onFilterModelChange' | 'filterMode' | 'disableMultipleColumnsFiltering' | 'slots' | 'slotProps' | 'disableColumnFilter' | 'disableEval' | 'ignoreDiacritics' | 'signature'>, configuration: GridConfiguration) => void;

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

@@ -9,4 +9,4 @@ export declare const filterStateInitializer: GridStateInitializer<Pick<DataGridP
  * @requires useGridParamsApi (method)
  * @requires useGridRows (event)
  */
-export declare const useGridFilter: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "rows" | "initialState" | "filterModel" | "getRowId" | "onFilterModelChange" | "filterMode" | "disableMultipleColumnsFiltering" | "slots" | "slotProps" | "disableColumnFilter" | "disableEval" | "ignoreDiacritics" | "signature">, configuration: GridConfiguration) => void;
+export declare const useGridFilter: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'rows' | 'initialState' | 'filterModel' | 'getRowId' | 'onFilterModelChange' | 'filterMode' | 'disableMultipleColumnsFiltering' | 'slots' | 'slotProps' | 'disableColumnFilter' | 'disableEval' | 'ignoreDiacritics' | 'signature'>, configuration: GridConfiguration) => void;

package/hooks/features/filter/useGridFilter.js

@@ -89,41 +89,15 @@ const useGridFilter = (apiRef, props, configuration) => {
    */
   const upsertFilterItem = React.useCallback(item => {
     const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
-    const items = [...filterModel.items];
-    const itemIndex = items.findIndex(filterItem => filterItem.id === item.id);
-    if (itemIndex === -1) {
-      items.push(item);
-    } else {
-      items[itemIndex] = item;
-    }
-    apiRef.current.setFilterModel((0, _extends2.default)({}, filterModel, {
-      items
-    }), 'upsertFilterItem');
+    apiRef.current.setFilterModel((0, _gridFilterUtils.upsertFilterItemInModel)(filterModel, item), 'upsertFilterItem');
   }, [apiRef]);
   const upsertFilterItems = React.useCallback(items => {
     const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
-    const existingItems = [...filterModel.items];
-    items.forEach(item => {
-      const itemIndex = existingItems.findIndex(filterItem => filterItem.id === item.id);
-      if (itemIndex === -1) {
-        existingItems.push(item);
-      } else {
-        existingItems[itemIndex] = item;
-      }
-    });
-    apiRef.current.setFilterModel((0, _extends2.default)({}, filterModel, {
-      items: existingItems
-    }), 'upsertFilterItems');
+    apiRef.current.setFilterModel((0, _gridFilterUtils.upsertFilterItemsInModel)(filterModel, items), 'upsertFilterItems');
   }, [apiRef]);
   const deleteFilterItem = React.useCallback(itemToDelete => {
     const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
-    const items = filterModel.items.filter(item => item.id !== itemToDelete.id);
-    if (items.length === filterModel.items.length) {
-      return;
-    }
-    apiRef.current.setFilterModel((0, _extends2.default)({}, filterModel, {
-      items
-    }), 'deleteFilterItem');
+    apiRef.current.setFilterModel((0, _gridFilterUtils.deleteFilterItemFromModel)(filterModel, itemToDelete), 'deleteFilterItem');
   }, [apiRef]);
   const showFilterPanel = React.useCallback((targetColumnField, panelId, labelId) => {
     logger.debug('Displaying filter panel');
@@ -178,12 +152,7 @@ const useGridFilter = (apiRef, props, configuration) => {
   }, [apiRef, logger]);
   const setFilterLogicOperator = React.useCallback(logicOperator => {
     const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
-    if (filterModel.logicOperator === logicOperator) {
-      return;
-    }
-    apiRef.current.setFilterModel((0, _extends2.default)({}, filterModel, {
-      logicOperator
-    }), 'changeLogicOperator');
+    apiRef.current.setFilterModel((0, _gridFilterUtils.setFilterLogicOperatorInModel)(filterModel, logicOperator), 'changeLogicOperator');
   }, [apiRef]);
   const setQuickFilterValues = React.useCallback(values => {
     const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);

package/hooks/features/filter/useGridFilter.mjs

@@ -15,7 +15,7 @@ import { useFirstRender } from "../../utils/useFirstRender.mjs";
 import { gridRowsLookupSelector } from "../rows/index.mjs";
 import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.mjs";
 import { GRID_DEFAULT_STRATEGY, useGridRegisterStrategyProcessor } from "../../core/strategyProcessing/index.mjs";
-import { buildAggregatedFilterApplier, sanitizeFilterModel, mergeStateWithFilterModel, cleanFilterItem, passFilterLogic, shouldQuickFilterExcludeHiddenColumns } from "./gridFilterUtils.mjs";
+import { buildAggregatedFilterApplier, sanitizeFilterModel, mergeStateWithFilterModel, cleanFilterItem, passFilterLogic, shouldQuickFilterExcludeHiddenColumns, upsertFilterItemInModel, upsertFilterItemsInModel, deleteFilterItemFromModel, setFilterLogicOperatorInModel } from "./gridFilterUtils.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const filterStateInitializer = (state, props, apiRef) => {
   const filterModel = props.filterModel ?? props.initialState?.filter?.filterModel ?? getDefaultGridFilterModel();
@@ -80,41 +80,15 @@ export const useGridFilter = (apiRef, props, configuration) => {
    */
   const upsertFilterItem = React.useCallback(item => {
     const filterModel = gridFilterModelSelector(apiRef);
-    const items = [...filterModel.items];
-    const itemIndex = items.findIndex(filterItem => filterItem.id === item.id);
-    if (itemIndex === -1) {
-      items.push(item);
-    } else {
-      items[itemIndex] = item;
-    }
-    apiRef.current.setFilterModel(_extends({}, filterModel, {
-      items
-    }), 'upsertFilterItem');
+    apiRef.current.setFilterModel(upsertFilterItemInModel(filterModel, item), 'upsertFilterItem');
   }, [apiRef]);
   const upsertFilterItems = React.useCallback(items => {
     const filterModel = gridFilterModelSelector(apiRef);
-    const existingItems = [...filterModel.items];
-    items.forEach(item => {
-      const itemIndex = existingItems.findIndex(filterItem => filterItem.id === item.id);
-      if (itemIndex === -1) {
-        existingItems.push(item);
-      } else {
-        existingItems[itemIndex] = item;
-      }
-    });
-    apiRef.current.setFilterModel(_extends({}, filterModel, {
-      items: existingItems
-    }), 'upsertFilterItems');
+    apiRef.current.setFilterModel(upsertFilterItemsInModel(filterModel, items), 'upsertFilterItems');
   }, [apiRef]);
   const deleteFilterItem = React.useCallback(itemToDelete => {
     const filterModel = gridFilterModelSelector(apiRef);
-    const items = filterModel.items.filter(item => item.id !== itemToDelete.id);
-    if (items.length === filterModel.items.length) {
-      return;
-    }
-    apiRef.current.setFilterModel(_extends({}, filterModel, {
-      items
-    }), 'deleteFilterItem');
+    apiRef.current.setFilterModel(deleteFilterItemFromModel(filterModel, itemToDelete), 'deleteFilterItem');
   }, [apiRef]);
   const showFilterPanel = React.useCallback((targetColumnField, panelId, labelId) => {
     logger.debug('Displaying filter panel');
@@ -169,12 +143,7 @@ export const useGridFilter = (apiRef, props, configuration) => {
   }, [apiRef, logger]);
   const setFilterLogicOperator = React.useCallback(logicOperator => {
     const filterModel = gridFilterModelSelector(apiRef);
-    if (filterModel.logicOperator === logicOperator) {
-      return;
-    }
-    apiRef.current.setFilterModel(_extends({}, filterModel, {
-      logicOperator
-    }), 'changeLogicOperator');
+    apiRef.current.setFilterModel(setFilterLogicOperatorInModel(filterModel, logicOperator), 'changeLogicOperator');
   }, [apiRef]);
   const setQuickFilterValues = React.useCallback(values => {
     const filterModel = gridFilterModelSelector(apiRef);

package/hooks/features/focus/useGridFocus.d.mts

@@ -8,4 +8,4 @@ export declare const focusStateInitializer: GridStateInitializer;
  * @requires useGridRows (method)
  * @requires useGridEditing (event)
  */
-export declare const useGridFocus: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode">) => void;
+export declare const useGridFocus: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'pagination' | 'paginationMode'>) => void;