@mui/x-data-grid 9.7.0 → 9.9.0

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.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/rows/gridRowsUtils.js

@@ -155,7 +155,7 @@ const isAutogeneratedRowNode = rowNode => rowNode.type === 'skeletonRow' || rowN
 exports.isAutogeneratedRowNode = isAutogeneratedRowNode;
 const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows, directChildrenOnly) => {
   const node = tree[parentId];
-  if (node.type !== 'group') {
+  if (node?.type !== 'group') {
     return [];
   }
   const validDescendants = [];

package/hooks/features/rows/gridRowsUtils.mjs

@@ -137,7 +137,7 @@ export const isAutogeneratedRow = row => GRID_ID_AUTOGENERATED in row;
 export const isAutogeneratedRowNode = rowNode => rowNode.type === 'skeletonRow' || rowNode.type === 'footer' || rowNode.type === 'group' && rowNode.isAutoGenerated || rowNode.type === 'pinnedRow' && rowNode.isAutoGenerated;
 export const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows, directChildrenOnly) => {
   const node = tree[parentId];
-  if (node.type !== 'group') {
+  if (node?.type !== 'group') {
     return [];
   }
   const validDescendants = [];

package/hooks/utils/useGridEvent.js

@@ -13,7 +13,7 @@ var React = _interopRequireWildcard(require("react"));
 var _TimerBasedCleanupTracking = require("../../utils/cleanupTracking/TimerBasedCleanupTracking");
 var _FinalizationRegistryBasedCleanupTracking = require("../../utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking");
 // Based on https://github.com/Bnaya/use-dispose-uncommitted/blob/main/src/finalization-registry-based-impl.ts
-// Check https://github.com/facebook/react/issues/15317 to get more information
+// Check https://github.com/react/react/issues/15317 to get more information
 
 // We use class to make it easier to detect in heap snapshots by name
 class ObjectToBeRetainedByReact {

package/hooks/utils/useGridEvent.mjs

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { TimerBasedCleanupTracking } from "../../utils/cleanupTracking/TimerBasedCleanupTracking.mjs";
 import { FinalizationRegistryBasedCleanupTracking } from "../../utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking.mjs";
 // Based on https://github.com/Bnaya/use-dispose-uncommitted/blob/main/src/finalization-registry-based-impl.ts
-// Check https://github.com/facebook/react/issues/15317 to get more information
+// Check https://github.com/react/react/issues/15317 to get more information
 
 // We use class to make it easier to detect in heap snapshots by name
 class ObjectToBeRetainedByReact {

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v9.7.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.7.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/locales/jaJP.js

@@ -10,8 +10,8 @@ const jaJPGrid = {
   // Root
   noRowsLabel: '行がありません。',
   noResultsOverlayLabel: '結果がありません。',
-  // noColumnsOverlayLabel: 'No columns',
-  // noColumnsOverlayManageColumns: 'Manage columns',
+  noColumnsOverlayLabel: '列がありません。',
+  noColumnsOverlayManageColumns: '列管理',
   // emptyPivotOverlayLabel: 'Add fields to rows, columns, and values to create a pivot table',
 
   // Density selector toolbar button text
@@ -56,8 +56,7 @@ const jaJPGrid = {
   columnsManagementNoColumns: 'カラムなし',
   columnsManagementShowHideAllText: 'すべて表示/非表示',
   columnsManagementReset: 'リセット',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementDeleteIconLabel: 'クリア',
   // Filter panel text
   filterPanelAddFilter: 'フィルター追加',
   filterPanelRemoveAll: 'すべて削除',
@@ -120,7 +119,7 @@ const jaJPGrid = {
   filterValueFalse: '偽',
   // Column menu text
   columnMenuLabel: 'メニュー',
-  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
+  columnMenuAriaLabel: columnName => `${columnName} 列メニュー`,
   columnMenuShowColumns: '列表示',
   columnMenuManageColumns: '列管理',
   columnMenuFilter: 'フィルター',

package/locales/jaJP.mjs

@@ -4,8 +4,8 @@ const jaJPGrid = {
   // Root
   noRowsLabel: '行がありません。',
   noResultsOverlayLabel: '結果がありません。',
-  // noColumnsOverlayLabel: 'No columns',
-  // noColumnsOverlayManageColumns: 'Manage columns',
+  noColumnsOverlayLabel: '列がありません。',
+  noColumnsOverlayManageColumns: '列管理',
   // emptyPivotOverlayLabel: 'Add fields to rows, columns, and values to create a pivot table',
 
   // Density selector toolbar button text
@@ -50,8 +50,7 @@ const jaJPGrid = {
   columnsManagementNoColumns: 'カラムなし',
   columnsManagementShowHideAllText: 'すべて表示/非表示',
   columnsManagementReset: 'リセット',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementDeleteIconLabel: 'クリア',
   // Filter panel text
   filterPanelAddFilter: 'フィルター追加',
   filterPanelRemoveAll: 'すべて削除',
@@ -114,7 +113,7 @@ const jaJPGrid = {
   filterValueFalse: '偽',
   // Column menu text
   columnMenuLabel: 'メニュー',
-  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
+  columnMenuAriaLabel: columnName => `${columnName} 列メニュー`,
   columnMenuShowColumns: '列表示',
   columnMenuManageColumns: '列管理',
   columnMenuFilter: 'フィルター',

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.7.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.7.0",
-    "@mui/x-virtualizer": "0.5.0"
+    "@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;