@mui/x-data-grid 9.4.0 → 9.5.0

package/CHANGELOG.md

@@ -1,5 +1,105 @@
 # Changelog
 
+## 9.5.0
+
+_Jun 11, 2026_
+
+We'd like to extend a big thank you to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 New [`multiSelect` column type for Data Grid Pro](https://mui.com/x/react-data-grid/column-definition/#MultiSelectColumn)
+- 🚀 New [renderer="svg-progressive"](https://mui.com/x/react-charts/scatter/#progressive-renderer) paints scatter points in batched frames so large datasets render smoothly without blocking the main thread.
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to community members @mustafajw07 and @Anexus5919 for their valuable contribution.
+
+The following team members contributed to this release:
+@alexfauquette, @JCQuintas, @rita-codes, @rluzists1, @sai6855, @siriwatknp, @arminmeh, @brijeshb42
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.5.0`
+
+- [DataGrid] Restrict warning messages to non-production environments in various components (#22461) @sai6855
+- [DataGrid] Prevent React state update before mount (#22374) @arminmeh
+
+#### `@mui/x-data-grid-pro@9.5.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@9.5.0`, plus:
+
+- [DataGridPro] Add new `multiSelect` column type (#21157) @siriwatknp
+
+#### `@mui/x-data-grid-premium@9.5.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@9.5.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@9.5.0`
+
+- [pickers] Fix missing export of `th-TH` (#22703) @alexfauquette
+
+#### `@mui/x-date-pickers-pro@9.5.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@9.5.0`.
+
+### Charts
+
+#### `@mui/x-charts@9.5.0`
+
+- [charts] Add `FocusedBar` component to `BarScatterComposition` demo (#22704) @sai6855
+- [charts] Add dedicated Bubble Chart documentation page (#22688) @mustafajw07
+- [charts] Add progressive scatter renderer (#22518) @JCQuintas
+- [charts] Avoid full axis pipeline rebuild on resize (#22695) @JCQuintas
+- [charts] Document focus indicator in composition page (#22712) @JCQuintas
+- [charts] Fix `ChartsTooltip` `container` and `disablePortal` props being ignored (#22690) @JCQuintas
+- [charts] Make ordinal scales O(1) to copy and re-range (#22691) @JCQuintas
+- [charts] Stabilize WebGL bar rendering at sub-pixel widths (#22678) @JCQuintas
+- [charts] Use the series config to define value types (#22693) @sai6855
+- [charts] Decouple interaction hook from the cartesian zoom (#22708) @alexfauquette
+
+#### `@mui/x-charts-pro@9.5.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@9.5.0`, plus:
+
+- [charts-pro] Add missing focus highlight (#22689) @alexfauquette
+
+#### `@mui/x-charts-premium@9.5.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@9.5.0`, plus:
+
+- [charts-premium] Set `Heatmap` WebGL render as stable (#22665) @alexfauquette
+- [charts-premium] Stabilize candlestick charts (#22666) @alexfauquette
+- [charts-premium] Stabilize the radial charts (#22655) @alexfauquette
+
+### Scheduler
+
+#### `@mui/x-scheduler@9.0.0-beta.1`
+
+Internal changes.
+
+#### `@mui/x-scheduler-premium@9.0.0-beta.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-scheduler@9.0.0-beta.1`, plus:
+
+- [scheduler] Remove dead CSS variable writes in `EventTimelinePremiumContent` (#22720) @rita-codes
+- [scheduler] Show scope dialog when deleting a recurring event (#22552) @Anexus5919
+
+### Core
+
+- [docs-infra] Fix immutable cache headers for `/\_next/static` assets (#22747) @brijeshb42
+- [docs-infra] Prefix `/\_next/static` cache header rule with `/x` basePath (#22748) @brijeshb42
+- [code-infra] Update dependencies to resolve Dependabot security alerts (#22714) @Janpot
+
+### Docs
+
+- [docs] Fix broken links checker crashing on 404 known-targets fetch (#22707) @sai6855
+- [docs] Fix country data (#22716) @alexfauquette
+
+### Miscellaneous
+
+- [legal] Update EULA links in docs (#22717) @rluzists1
+
 ## 9.4.0
 
 <!-- generated comparing v9.3.0..master -->

package/colDef/gridColumnTypesRegistry.d.mts

@@ -0,0 +1,8 @@
+import type { GridColType } from "../models/colDef/gridColType.mjs";
+import type { GridColTypeDef } from "../models/colDef/gridColDef.mjs";
+import type { GridColumnTypesRecord } from "../models/colDef/gridColumnTypesRecord.mjs";
+export declare const DEFAULT_GRID_COL_TYPE_KEY = "string";
+export declare const isCommunityColumnType: (type: GridColType | undefined) => boolean;
+export declare const registerGridColumnTypes: (columnTypes: Partial<GridColumnTypesRecord>) => void;
+export declare const getGridColumnTypesRegistry: () => Record<string, GridColTypeDef>;
+export declare const getRegisteredColumnTypeDef: (type: GridColType | undefined) => GridColTypeDef;

package/colDef/gridColumnTypesRegistry.d.ts

@@ -0,0 +1,8 @@
+import type { GridColType } from "../models/colDef/gridColType.js";
+import type { GridColTypeDef } from "../models/colDef/gridColDef.js";
+import type { GridColumnTypesRecord } from "../models/colDef/gridColumnTypesRecord.js";
+export declare const DEFAULT_GRID_COL_TYPE_KEY = "string";
+export declare const isCommunityColumnType: (type: GridColType | undefined) => boolean;
+export declare const registerGridColumnTypes: (columnTypes: Partial<GridColumnTypesRecord>) => void;
+export declare const getGridColumnTypesRegistry: () => Record<string, GridColTypeDef>;
+export declare const getRegisteredColumnTypeDef: (type: GridColType | undefined) => GridColTypeDef;

package/colDef/gridColumnTypesRegistry.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.registerGridColumnTypes = exports.isCommunityColumnType = exports.getRegisteredColumnTypeDef = exports.getGridColumnTypesRegistry = exports.DEFAULT_GRID_COL_TYPE_KEY = void 0;
+var _gridStringColDef = require("./gridStringColDef");
+var _gridNumericColDef = require("./gridNumericColDef");
+var _gridDateColDef = require("./gridDateColDef");
+var _gridBooleanColDef = require("./gridBooleanColDef");
+var _gridSingleSelectColDef = require("./gridSingleSelectColDef");
+var _gridActionsColDef = require("./gridActionsColDef");
+var _gridLongTextColDef = require("./gridLongTextColDef");
+const DEFAULT_GRID_COL_TYPE_KEY = exports.DEFAULT_GRID_COL_TYPE_KEY = 'string';
+
+// Mutable registry seeded with the community column types. Pro/Premium packages append
+// their own types at module load via `registerGridColumnTypes`, so a community-only bundle
+// never references them at runtime.
+const columnTypesRegistry = {
+  string: _gridStringColDef.GRID_STRING_COL_DEF,
+  number: _gridNumericColDef.GRID_NUMERIC_COL_DEF,
+  date: _gridDateColDef.GRID_DATE_COL_DEF,
+  dateTime: _gridDateColDef.GRID_DATETIME_COL_DEF,
+  boolean: _gridBooleanColDef.GRID_BOOLEAN_COL_DEF,
+  singleSelect: _gridSingleSelectColDef.GRID_SINGLE_SELECT_COL_DEF,
+  [_gridActionsColDef.GRID_ACTIONS_COLUMN_TYPE]: _gridActionsColDef.GRID_ACTIONS_COL_DEF,
+  custom: _gridStringColDef.GRID_STRING_COL_DEF,
+  longText: _gridLongTextColDef.GRID_LONG_TEXT_COL_DEF
+};
+
+// Captured before any `registerGridColumnTypes` call, so it reflects the community-native types
+// only. Used to keep Pro/Premium-registered types (e.g. `multiSelect`) from resolving in a
+// community `DataGrid` even when a Pro grid registered them globally in the same bundle.
+const COMMUNITY_COLUMN_TYPE_KEYS = new Set(Object.keys(columnTypesRegistry));
+const isCommunityColumnType = type => type == null || COMMUNITY_COLUMN_TYPE_KEYS.has(type);
+exports.isCommunityColumnType = isCommunityColumnType;
+const registerGridColumnTypes = columnTypes => {
+  Object.assign(columnTypesRegistry, columnTypes);
+};
+exports.registerGridColumnTypes = registerGridColumnTypes;
+const getGridColumnTypesRegistry = () => columnTypesRegistry;
+exports.getGridColumnTypesRegistry = getGridColumnTypesRegistry;
+const getRegisteredColumnTypeDef = type => (type ? columnTypesRegistry[type] : undefined) ?? columnTypesRegistry[DEFAULT_GRID_COL_TYPE_KEY];
+exports.getRegisteredColumnTypeDef = getRegisteredColumnTypeDef;

package/colDef/gridColumnTypesRegistry.mjs

@@ -0,0 +1,34 @@
+import { GRID_STRING_COL_DEF } from "./gridStringColDef.mjs";
+import { GRID_NUMERIC_COL_DEF } from "./gridNumericColDef.mjs";
+import { GRID_DATE_COL_DEF, GRID_DATETIME_COL_DEF } from "./gridDateColDef.mjs";
+import { GRID_BOOLEAN_COL_DEF } from "./gridBooleanColDef.mjs";
+import { GRID_SINGLE_SELECT_COL_DEF } from "./gridSingleSelectColDef.mjs";
+import { GRID_ACTIONS_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from "./gridActionsColDef.mjs";
+import { GRID_LONG_TEXT_COL_DEF } from "./gridLongTextColDef.mjs";
+export const DEFAULT_GRID_COL_TYPE_KEY = 'string';
+
+// Mutable registry seeded with the community column types. Pro/Premium packages append
+// their own types at module load via `registerGridColumnTypes`, so a community-only bundle
+// never references them at runtime.
+const columnTypesRegistry = {
+  string: GRID_STRING_COL_DEF,
+  number: GRID_NUMERIC_COL_DEF,
+  date: GRID_DATE_COL_DEF,
+  dateTime: GRID_DATETIME_COL_DEF,
+  boolean: GRID_BOOLEAN_COL_DEF,
+  singleSelect: GRID_SINGLE_SELECT_COL_DEF,
+  [GRID_ACTIONS_COLUMN_TYPE]: GRID_ACTIONS_COL_DEF,
+  custom: GRID_STRING_COL_DEF,
+  longText: GRID_LONG_TEXT_COL_DEF
+};
+
+// Captured before any `registerGridColumnTypes` call, so it reflects the community-native types
+// only. Used to keep Pro/Premium-registered types (e.g. `multiSelect`) from resolving in a
+// community `DataGrid` even when a Pro grid registered them globally in the same bundle.
+const COMMUNITY_COLUMN_TYPE_KEYS = new Set(Object.keys(columnTypesRegistry));
+export const isCommunityColumnType = type => type == null || COMMUNITY_COLUMN_TYPE_KEYS.has(type);
+export const registerGridColumnTypes = columnTypes => {
+  Object.assign(columnTypesRegistry, columnTypes);
+};
+export const getGridColumnTypesRegistry = () => columnTypesRegistry;
+export const getRegisteredColumnTypeDef = type => (type ? columnTypesRegistry[type] : undefined) ?? columnTypesRegistry[DEFAULT_GRID_COL_TYPE_KEY];

package/colDef/gridDefaultColumnTypes.d.mts

@@ -1,3 +1,3 @@
 import type { GridColumnTypesRecord } from "../models/colDef/gridColumnTypesRecord.mjs";
-export declare const DEFAULT_GRID_COL_TYPE_KEY = "string";
+export { DEFAULT_GRID_COL_TYPE_KEY } from "./gridColumnTypesRegistry.mjs";
 export declare const getGridDefaultColumnTypes: () => GridColumnTypesRecord;

package/colDef/gridDefaultColumnTypes.d.ts

@@ -1,3 +1,3 @@
 import type { GridColumnTypesRecord } from "../models/colDef/gridColumnTypesRecord.js";
-export declare const DEFAULT_GRID_COL_TYPE_KEY = "string";
+export { DEFAULT_GRID_COL_TYPE_KEY } from "./gridColumnTypesRegistry.js";
 export declare const getGridDefaultColumnTypes: () => GridColumnTypesRecord;

package/colDef/gridDefaultColumnTypes.js

@@ -1,29 +1,17 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getGridDefaultColumnTypes = exports.DEFAULT_GRID_COL_TYPE_KEY = void 0;
-var _gridStringColDef = require("./gridStringColDef");
-var _gridNumericColDef = require("./gridNumericColDef");
-var _gridDateColDef = require("./gridDateColDef");
-var _gridBooleanColDef = require("./gridBooleanColDef");
-var _gridSingleSelectColDef = require("./gridSingleSelectColDef");
-var _gridActionsColDef = require("./gridActionsColDef");
-var _gridLongTextColDef = require("./gridLongTextColDef");
-const DEFAULT_GRID_COL_TYPE_KEY = exports.DEFAULT_GRID_COL_TYPE_KEY = 'string';
-const getGridDefaultColumnTypes = () => {
-  const nativeColumnTypes = {
-    string: _gridStringColDef.GRID_STRING_COL_DEF,
-    number: _gridNumericColDef.GRID_NUMERIC_COL_DEF,
-    date: _gridDateColDef.GRID_DATE_COL_DEF,
-    dateTime: _gridDateColDef.GRID_DATETIME_COL_DEF,
-    boolean: _gridBooleanColDef.GRID_BOOLEAN_COL_DEF,
-    singleSelect: _gridSingleSelectColDef.GRID_SINGLE_SELECT_COL_DEF,
-    [_gridActionsColDef.GRID_ACTIONS_COLUMN_TYPE]: _gridActionsColDef.GRID_ACTIONS_COL_DEF,
-    custom: _gridStringColDef.GRID_STRING_COL_DEF,
-    longText: _gridLongTextColDef.GRID_LONG_TEXT_COL_DEF
-  };
-  return nativeColumnTypes;
-};
+Object.defineProperty(exports, "DEFAULT_GRID_COL_TYPE_KEY", {
+  enumerable: true,
+  get: function () {
+    return _gridColumnTypesRegistry.DEFAULT_GRID_COL_TYPE_KEY;
+  }
+});
+exports.getGridDefaultColumnTypes = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _gridColumnTypesRegistry = require("./gridColumnTypesRegistry");
+const getGridDefaultColumnTypes = () => (0, _extends2.default)({}, (0, _gridColumnTypesRegistry.getGridColumnTypesRegistry)());
 exports.getGridDefaultColumnTypes = getGridDefaultColumnTypes;

package/colDef/gridDefaultColumnTypes.mjs

@@ -1,22 +1,4 @@
-import { GRID_STRING_COL_DEF } from "./gridStringColDef.mjs";
-import { GRID_NUMERIC_COL_DEF } from "./gridNumericColDef.mjs";
-import { GRID_DATE_COL_DEF, GRID_DATETIME_COL_DEF } from "./gridDateColDef.mjs";
-import { GRID_BOOLEAN_COL_DEF } from "./gridBooleanColDef.mjs";
-import { GRID_SINGLE_SELECT_COL_DEF } from "./gridSingleSelectColDef.mjs";
-import { GRID_ACTIONS_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from "./gridActionsColDef.mjs";
-import { GRID_LONG_TEXT_COL_DEF } from "./gridLongTextColDef.mjs";
-export const DEFAULT_GRID_COL_TYPE_KEY = 'string';
-export const getGridDefaultColumnTypes = () => {
-  const nativeColumnTypes = {
-    string: GRID_STRING_COL_DEF,
-    number: GRID_NUMERIC_COL_DEF,
-    date: GRID_DATE_COL_DEF,
-    dateTime: GRID_DATETIME_COL_DEF,
-    boolean: GRID_BOOLEAN_COL_DEF,
-    singleSelect: GRID_SINGLE_SELECT_COL_DEF,
-    [GRID_ACTIONS_COLUMN_TYPE]: GRID_ACTIONS_COL_DEF,
-    custom: GRID_STRING_COL_DEF,
-    longText: GRID_LONG_TEXT_COL_DEF
-  };
-  return nativeColumnTypes;
-};
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { getGridColumnTypesRegistry } from "./gridColumnTypesRegistry.mjs";
+export { DEFAULT_GRID_COL_TYPE_KEY } from "./gridColumnTypesRegistry.mjs";
+export const getGridDefaultColumnTypes = () => _extends({}, getGridColumnTypesRegistry());

package/components/cell/GridActionsCell.js

@@ -60,7 +60,7 @@ function GridActionsCell(props) {
         });
       } else if (child.type === _GridActionsCellItem.GridActionsCellItem || suppressChildrenValidation) {
         actions.push(child);
-      } else {
+      } else if (process.env.NODE_ENV !== 'production') {
         const childType = typeof child.type === 'function' ? child.type.name : child.type;
         (0, _warning.warnOnce)(`MUI X: Invalid child type in \`GridActionsCell\`. Expected \`GridActionsCellItem\` or \`React.Fragment\`, got \`${childType}\`.
 If this is intentional, you can suppress this warning by passing the \`suppressChildrenValidation\` prop to \`GridActionsCell\`.`, 'error');

package/components/cell/GridActionsCell.mjs

@@ -52,7 +52,7 @@ function GridActionsCell(props) {
         });
       } else if (child.type === GridActionsCellItem || suppressChildrenValidation) {
         actions.push(child);
-      } else {
+      } else if (process.env.NODE_ENV !== 'production') {
         const childType = typeof child.type === 'function' ? child.type.name : child.type;
         warnOnce(`MUI X: Invalid child type in \`GridActionsCell\`. Expected \`GridActionsCellItem\` or \`React.Fragment\`, got \`${childType}\`.
 If this is intentional, you can suppress this warning by passing the \`suppressChildrenValidation\` prop to \`GridActionsCell\`.`, 'error');

package/components/cell/GridLongTextCell.js

@@ -185,6 +185,7 @@ function GridLongTextCell(props) {
       children: value
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(GridLongTextCellCornerButton, (0, _extends2.default)({
       ref: cornerButtonRef,
+      type: "button",
       "aria-label": `${value}, ${apiRef.current.getLocaleText('longTextCellExpandLabel')}`,
       "aria-haspopup": "dialog",
       "aria-controls": popupOpen ? popupId : undefined,
@@ -236,6 +237,7 @@ function GridLongTextCell(props) {
           '--_width': `${colDef.computedWidth}px`
         }, slotProps?.popperContent?.style),
         children: [renderContent ? renderContent(value) : value, /*#__PURE__*/(0, _jsxRuntime.jsx)(GridLongTextCellCornerButton, (0, _extends2.default)({
+          type: "button",
           "aria-label": apiRef.current.getLocaleText('longTextCellCollapseLabel'),
           "aria-keyshortcuts": "Escape"
         }, slotProps?.collapseButton, {

package/components/cell/GridLongTextCell.mjs

@@ -177,6 +177,7 @@ function GridLongTextCell(props) {
       children: value
     })), /*#__PURE__*/_jsx(GridLongTextCellCornerButton, _extends({
       ref: cornerButtonRef,
+      type: "button",
       "aria-label": `${value}, ${apiRef.current.getLocaleText('longTextCellExpandLabel')}`,
       "aria-haspopup": "dialog",
       "aria-controls": popupOpen ? popupId : undefined,
@@ -228,6 +229,7 @@ function GridLongTextCell(props) {
           '--_width': `${colDef.computedWidth}px`
         }, slotProps?.popperContent?.style),
         children: [renderContent ? renderContent(value) : value, /*#__PURE__*/_jsx(GridLongTextCellCornerButton, _extends({
+          type: "button",
           "aria-label": apiRef.current.getLocaleText('longTextCellCollapseLabel'),
           "aria-keyshortcuts": "Escape"
         }, slotProps?.collapseButton, {

package/components/containers/GridRootStyles.js

@@ -175,6 +175,16 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       [`& .${_gridClasses.gridClasses['columnHeader--filter']}`]: {
         flex: 'none !important',
         width: 'unset !important'
+      },
+      [`& .${_gridClasses.gridClasses.multiSelectCell}`]: {
+        width: 'max-content',
+        overflow: 'visible'
+      },
+      [`& .${_gridClasses.gridClasses['multiSelectCellChip--hidden']}`]: {
+        display: 'inline-flex'
+      },
+      [`& .${_gridClasses.gridClasses.multiSelectCellOverflow}`]: {
+        display: 'none'
       }
     },
     [`&.${_gridClasses.gridClasses.withSidePanel}`]: {
@@ -523,6 +533,25 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       whiteSpace: 'initial',
       lineHeight: 'inherit'
     },
+    [`& .${_gridClasses.gridClasses['row--dynamicHeight']}`]: {
+      [`& .${_gridClasses.gridClasses.multiSelectCell}, .${_gridClasses.gridClasses.editMultiSelectCell}`]: {
+        flexWrap: 'wrap'
+      }
+    },
+    [`& .${_gridClasses.gridClasses.cell}[aria-rowspan]:not([aria-rowspan="1"])`]: {
+      [`& .${_gridClasses.gridClasses.multiSelectCell}`]: {
+        alignItems: 'flex-start',
+        alignContent: 'flex-start',
+        flexWrap: 'wrap',
+        paddingTop: 8
+      },
+      [`& .${_gridClasses.gridClasses['multiSelectCellChip--hidden']}`]: {
+        display: 'inline-flex'
+      },
+      [`& .${_gridClasses.gridClasses.multiSelectCellOverflow}`]: {
+        display: 'none'
+      }
+    },
     [`& .${_gridClasses.gridClasses.cellEmpty}`]: {
       flex: 1,
       padding: 0,

package/components/containers/GridRootStyles.mjs

@@ -169,6 +169,16 @@ export const GridRootStyles = styled('div', {
       [`& .${c['columnHeader--filter']}`]: {
         flex: 'none !important',
         width: 'unset !important'
+      },
+      [`& .${c.multiSelectCell}`]: {
+        width: 'max-content',
+        overflow: 'visible'
+      },
+      [`& .${c['multiSelectCellChip--hidden']}`]: {
+        display: 'inline-flex'
+      },
+      [`& .${c.multiSelectCellOverflow}`]: {
+        display: 'none'
       }
     },
     [`&.${c.withSidePanel}`]: {
@@ -517,6 +527,25 @@ export const GridRootStyles = styled('div', {
       whiteSpace: 'initial',
       lineHeight: 'inherit'
     },
+    [`& .${c['row--dynamicHeight']}`]: {
+      [`& .${c.multiSelectCell}, .${c.editMultiSelectCell}`]: {
+        flexWrap: 'wrap'
+      }
+    },
+    [`& .${c.cell}[aria-rowspan]:not([aria-rowspan="1"])`]: {
+      [`& .${c.multiSelectCell}`]: {
+        alignItems: 'flex-start',
+        alignContent: 'flex-start',
+        flexWrap: 'wrap',
+        paddingTop: 8
+      },
+      [`& .${c['multiSelectCellChip--hidden']}`]: {
+        display: 'inline-flex'
+      },
+      [`& .${c.multiSelectCellOverflow}`]: {
+        display: 'none'
+      }
+    },
     [`& .${c.cellEmpty}`]: {
       flex: 1,
       padding: 0,

package/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -64,10 +64,8 @@ function GridFilterInputSingleSelect(props) {
     return (0, _filterPanelUtils.getValueOptions)(resolvedColumn);
   }, [resolvedColumn]);
   const onFilterChange = React.useCallback(event => {
-    let value = event.target.value;
-
-    // NativeSelect casts the value to a string.
-    value = (0, _filterPanelUtils.getValueFromValueOptions)(value, currentValueOptions, getOptionValue);
+    // NativeSelect casts the value to a string, convert it back to the original type.
+    const value = (0, _filterPanelUtils.getValueFromValueOptions)(event.target.value, currentValueOptions, getOptionValue);
     applyValue((0, _extends2.default)({}, item, {
       value
     }));

package/components/panel/filterPanel/GridFilterInputSingleSelect.mjs

@@ -56,10 +56,8 @@ function GridFilterInputSingleSelect(props) {
     return getValueOptions(resolvedColumn);
   }, [resolvedColumn]);
   const onFilterChange = React.useCallback(event => {
-    let value = event.target.value;
-
-    // NativeSelect casts the value to a string.
-    value = getValueFromValueOptions(value, currentValueOptions, getOptionValue);
+    // NativeSelect casts the value to a string, convert it back to the original type.
+    const value = getValueFromValueOptions(event.target.value, currentValueOptions, getOptionValue);
     applyValue(_extends({}, item, {
       value
     }));

package/components/panel/filterPanel/filterPanelUtils.d.mts

@@ -1,5 +1,6 @@
-import type { GridColDef, GridSingleSelectColDef } from "../../../models/colDef/gridColDef.mjs";
+import type { GridColDef, GridSingleSelectColDef, GridMultiSelectColDef } from "../../../models/colDef/gridColDef.mjs";
 import type { GridValueOptionsParams } from "../../../models/params/gridValueOptionsParams.mjs";
 export declare function isSingleSelectColDef(colDef: GridColDef | null): colDef is GridSingleSelectColDef;
-export declare function getValueOptions(column: GridSingleSelectColDef, additionalParams?: Omit<GridValueOptionsParams, 'field'>): import("@mui/x-data-grid").ValueOptions[] | undefined;
+export declare function isMultiSelectColDef(colDef: GridColDef | null): colDef is GridMultiSelectColDef;
+export declare function getValueOptions(column: GridSingleSelectColDef | GridMultiSelectColDef, additionalParams?: Omit<GridValueOptionsParams, 'field'>): import("@mui/x-data-grid").ValueOptions[] | undefined;
 export declare function getValueFromValueOptions(value: string, valueOptions: any[] | undefined, getOptionValue: NonNullable<GridSingleSelectColDef['getOptionValue']>): any;

package/components/panel/filterPanel/filterPanelUtils.d.ts

@@ -1,5 +1,6 @@
-import type { GridColDef, GridSingleSelectColDef } from "../../../models/colDef/gridColDef.js";
+import type { GridColDef, GridSingleSelectColDef, GridMultiSelectColDef } from "../../../models/colDef/gridColDef.js";
 import type { GridValueOptionsParams } from "../../../models/params/gridValueOptionsParams.js";
 export declare function isSingleSelectColDef(colDef: GridColDef | null): colDef is GridSingleSelectColDef;
-export declare function getValueOptions(column: GridSingleSelectColDef, additionalParams?: Omit<GridValueOptionsParams, 'field'>): import("@mui/x-data-grid").ValueOptions[] | undefined;
+export declare function isMultiSelectColDef(colDef: GridColDef | null): colDef is GridMultiSelectColDef;
+export declare function getValueOptions(column: GridSingleSelectColDef | GridMultiSelectColDef, additionalParams?: Omit<GridValueOptionsParams, 'field'>): import("@mui/x-data-grid").ValueOptions[] | undefined;
 export declare function getValueFromValueOptions(value: string, valueOptions: any[] | undefined, getOptionValue: NonNullable<GridSingleSelectColDef['getOptionValue']>): any;

package/components/panel/filterPanel/filterPanelUtils.js

@@ -6,11 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getValueFromValueOptions = getValueFromValueOptions;
 exports.getValueOptions = getValueOptions;
+exports.isMultiSelectColDef = isMultiSelectColDef;
 exports.isSingleSelectColDef = isSingleSelectColDef;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 function isSingleSelectColDef(colDef) {
   return colDef?.type === 'singleSelect';
 }
+function isMultiSelectColDef(colDef) {
+  return colDef?.type === 'multiSelect';
+}
 function getValueOptions(column, additionalParams) {
   if (!column) {
     return undefined;

package/components/panel/filterPanel/filterPanelUtils.mjs

@@ -2,6 +2,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 export function isSingleSelectColDef(colDef) {
   return colDef?.type === 'singleSelect';
 }
+export function isMultiSelectColDef(colDef) {
+  return colDef?.type === 'multiSelect';
+}
 export function getValueOptions(column, additionalParams) {
   if (!column) {
     return undefined;

package/constants/cssVariables.d.mts

@@ -75,6 +75,7 @@ declare const keys: {
   readonly zIndex: {
     readonly panel: "--DataGrid-t-z-index-panel";
     readonly menu: "--DataGrid-t-z-index-menu";
+    readonly modal: "--DataGrid-t-z-index-modal";
   };
 };
 export type GridCSSVariablesInterface = { [E in CreateObjectEntries<typeof keys> as E['value']]: string | number };
@@ -168,6 +169,7 @@ export declare const vars: {
   zIndex: {
     readonly panel: "--DataGrid-t-z-index-panel";
     readonly menu: "--DataGrid-t-z-index-menu";
+    readonly modal: "--DataGrid-t-z-index-modal";
   };
   breakpoints: {
     values: {
@@ -258,6 +260,7 @@ export declare const vars: {
     readonly zIndex: {
       readonly panel: "--DataGrid-t-z-index-panel";
       readonly menu: "--DataGrid-t-z-index-menu";
+      readonly modal: "--DataGrid-t-z-index-modal";
     };
   };
 };

package/constants/cssVariables.d.ts

@@ -75,6 +75,7 @@ declare const keys: {
   readonly zIndex: {
     readonly panel: "--DataGrid-t-z-index-panel";
     readonly menu: "--DataGrid-t-z-index-menu";
+    readonly modal: "--DataGrid-t-z-index-modal";
   };
 };
 export type GridCSSVariablesInterface = { [E in CreateObjectEntries<typeof keys> as E['value']]: string | number };
@@ -168,6 +169,7 @@ export declare const vars: {
   zIndex: {
     readonly panel: "--DataGrid-t-z-index-panel";
     readonly menu: "--DataGrid-t-z-index-menu";
+    readonly modal: "--DataGrid-t-z-index-modal";
   };
   breakpoints: {
     values: {
@@ -258,6 +260,7 @@ export declare const vars: {
     readonly zIndex: {
       readonly panel: "--DataGrid-t-z-index-panel";
       readonly menu: "--DataGrid-t-z-index-menu";
+      readonly modal: "--DataGrid-t-z-index-modal";
     };
   };
 };

package/constants/cssVariables.js

@@ -105,7 +105,8 @@ const keys = {
   },
   zIndex: {
     panel: '--DataGrid-t-z-index-panel',
-    menu: '--DataGrid-t-z-index-menu'
+    menu: '--DataGrid-t-z-index-menu',
+    modal: '--DataGrid-t-z-index-modal'
   }
 };
 const values = wrap(keys);

package/constants/cssVariables.mjs

@@ -98,7 +98,8 @@ const keys = {
   },
   zIndex: {
     panel: '--DataGrid-t-z-index-panel',
-    menu: '--DataGrid-t-z-index-menu'
+    menu: '--DataGrid-t-z-index-menu',
+    modal: '--DataGrid-t-z-index-modal'
   }
 };
 const values = wrap(keys);

package/constants/gridClasses.d.mts

@@ -514,6 +514,54 @@ export interface GridClasses {
    * Styles applied to the edit long text cell textarea.
    */
   editLongTextCellTextarea: string;
+  /**
+   * Styles applied to the multi-select cell root element.
+   */
+  multiSelectCell: string;
+  /**
+   * Styles applied to each chip in the multi-select cell.
+   */
+  multiSelectCellChip: string;
+  /**
+   * @ignore - do not document.
+   */
+  'multiSelectCellChip--hidden': string;
+  /**
+   * Styles applied to the overflow "+N" chip in the multi-select cell.
+   */
+  multiSelectCellOverflow: string;
+  /**
+   * Styles applied to the multi-select cell expand popup.
+   */
+  multiSelectCellPopup: string;
+  /**
+   * Styles applied to the multi-select cell popper content.
+   */
+  multiSelectCellPopperContent: string;
+  /**
+   * Styles applied to the edit multi-select cell root element.
+   */
+  editMultiSelectCell: string;
+  /**
+   * Styles applied to each chip in the edit multi-select cell.
+   */
+  editMultiSelectCellChip: string;
+  /**
+   * @ignore - do not document.
+   */
+  'editMultiSelectCellChip--hidden': string;
+  /**
+   * Styles applied to the overflow "+N" chip in the edit multi-select cell.
+   */
+  editMultiSelectCellOverflow: string;
+  /**
+   * Styles applied to the edit multi-select cell popup.
+   */
+  editMultiSelectCellPopup: string;
+  /**
+   * Styles applied to the edit multi-select cell popper content.
+   */
+  editMultiSelectCellPopperContent: string;
   /**
    * Styles applied to the filter icon element.
    */