@mui/x-data-grid 9.8.0 → 9.9.0

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/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v9.8.0
+ * @mui/x-data-grid v9.9.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v9.8.0
+ * @mui/x-data-grid v9.9.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/demo/TailwindDemoContainer.d.mts

@@ -7,5 +7,5 @@ interface TailwindDemoContainerProps {
  * WARNING: This is an internal component used in documentation to inject the Tailwind script.
  * Please do not use it in your application.
  */
-export declare function TailwindDemoContainer(props: TailwindDemoContainerProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function TailwindDemoContainer(props: TailwindDemoContainerProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
 export {};

package/internals/demo/TailwindDemoContainer.d.ts

@@ -7,5 +7,5 @@ interface TailwindDemoContainerProps {
  * WARNING: This is an internal component used in documentation to inject the Tailwind script.
  * Please do not use it in your application.
  */
-export declare function TailwindDemoContainer(props: TailwindDemoContainerProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function TailwindDemoContainer(props: TailwindDemoContainerProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
 export {};

package/models/gridFilterInputComponent.d.mts

@@ -26,6 +26,11 @@ export type GridFilterInputValueProps<T extends GridFilterInputSlotProps = GridF
   tabIndex?: number;
   disabled?: boolean;
   className?: string;
+  /**
+   * If `true`, filter value changes are applied immediately without debouncing.
+   * @default false
+   */
+  disableDebounce?: boolean;
   slotProps?: {
     root: T;
   };

package/models/gridFilterInputComponent.d.ts

@@ -26,6 +26,11 @@ export type GridFilterInputValueProps<T extends GridFilterInputSlotProps = GridF
   tabIndex?: number;
   disabled?: boolean;
   className?: string;
+  /**
+   * If `true`, filter value changes are applied immediately without debouncing.
+   * @default false
+   */
+  disableDebounce?: boolean;
   slotProps?: {
     root: T;
   };

package/models/gridSlotsComponentsProps.d.mts

@@ -3,7 +3,7 @@ import type { GridToolbarProps } from "../components/toolbar/GridToolbar.mjs";
 import type { ColumnHeaderFilterIconButtonProps } from "../components/columnHeaders/GridColumnHeaderFilterIconButton.mjs";
 import type { GridColumnMenuProps } from "../components/menu/columnMenu/GridColumnMenuProps.mjs";
 import type { GridColumnsPanelProps } from "../components/panel/GridColumnsPanel.mjs";
-import type { GridFilterPanelProps } from "../components/panel/filterPanel/GridFilterPanel.mjs";
+import type { GridFilterPanelProps } from "../components/panel/filterPanel/GridFilterPanelBase.mjs";
 import type { GridFooterContainerProps } from "../components/containers/GridFooterContainer.mjs";
 import type { GridOverlayProps } from "../components/containers/GridOverlay.mjs";
 import type { GridPanelProps } from "../components/panel/GridPanel.mjs";

package/models/gridSlotsComponentsProps.d.ts

@@ -3,7 +3,7 @@ import type { GridToolbarProps } from "../components/toolbar/GridToolbar.js";
 import type { ColumnHeaderFilterIconButtonProps } from "../components/columnHeaders/GridColumnHeaderFilterIconButton.js";
 import type { GridColumnMenuProps } from "../components/menu/columnMenu/GridColumnMenuProps.js";
 import type { GridColumnsPanelProps } from "../components/panel/GridColumnsPanel.js";
-import type { GridFilterPanelProps } from "../components/panel/filterPanel/GridFilterPanel.js";
+import type { GridFilterPanelProps } from "../components/panel/filterPanel/GridFilterPanelBase.js";
 import type { GridFooterContainerProps } from "../components/containers/GridFooterContainer.js";
 import type { GridOverlayProps } from "../components/containers/GridOverlay.js";
 import type { GridPanelProps } from "../components/panel/GridPanel.js";

package/models/props/DataGridProps.d.mts

@@ -341,6 +341,13 @@ export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = an
    * @default 0
    */
   dataSourceRevalidateMs: number;
+  /**
+   * If `true`, the previously displayed rows are kept visible while new rows are being fetched after pagination, sorting, or filtering changes.
+   * The loading overlay is rendered on top of the previous rows.
+   * Only applies to flat data; tree data and row grouping always reset the rows on refetch to keep the order consistent with the new response.
+   * @default false
+   */
+  dataSourceKeepPreviousData: boolean;
   /**
    * If `true`, reordering columns is disabled.
    * @default false

package/models/props/DataGridProps.d.ts

@@ -341,6 +341,13 @@ export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = an
    * @default 0
    */
   dataSourceRevalidateMs: number;
+  /**
+   * If `true`, the previously displayed rows are kept visible while new rows are being fetched after pagination, sorting, or filtering changes.
+   * The loading overlay is rendered on top of the previous rows.
+   * Only applies to flat data; tree data and row grouping always reset the rows on refetch to keep the order consistent with the new response.
+   * @default false
+   */
+  dataSourceKeepPreviousData: boolean;
   /**
    * If `true`, reordering columns is disabled.
    * @default false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "9.8.0",
+  "version": "9.9.0",
   "author": "MUI Team",
   "description": "The Community plan edition of the MUI X Data Grid components.",
   "license": "MIT",
@@ -39,12 +39,12 @@
   "dependencies": {
     "@babel/runtime": "^7.29.7",
     "@base-ui/utils": "^0.3.0",
-    "@mui/utils": "^9.1.1",
+    "@mui/utils": "^9.2.0",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "use-sync-external-store": "^1.6.0",
-    "@mui/x-internals": "^9.8.0",
-    "@mui/x-virtualizer": "0.5.1"
+    "@mui/x-internals": "^9.9.0",
+    "@mui/x-virtualizer": "0.6.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/utils/css/context.d.mts

@@ -2,13 +2,13 @@ import * as React from 'react';
 export declare function useCSSVariablesClass(): string;
 export declare function useCSSVariablesContext(): {
   className: string;
-  tag: import("react/jsx-runtime").JSX.Element;
+  tag: React.JSX.Element;
 };
 export declare function GridPortalWrapper({
   children
 }: {
   children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export declare function GridCSSVariablesContext(props: {
   children: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

package/utils/css/context.d.ts

@@ -2,13 +2,13 @@ import * as React from 'react';
 export declare function useCSSVariablesClass(): string;
 export declare function useCSSVariablesContext(): {
   className: string;
-  tag: import("react/jsx-runtime").JSX.Element;
+  tag: React.JSX.Element;
 };
 export declare function GridPortalWrapper({
   children
 }: {
   children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export declare function GridCSSVariablesContext(props: {
   children: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;