@mui/x-data-grid 9.4.0 → 9.5.0

package/material/index.js

@@ -32,6 +32,7 @@ var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon")
 var _ListItemText = _interopRequireWildcard(require("@mui/material/ListItemText"));
 var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _Modal = _interopRequireDefault(require("@mui/material/Modal"));
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _TextareaAutosize = _interopRequireDefault(require("@mui/material/TextareaAutosize"));
 var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
@@ -61,7 +62,7 @@ var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 require("./augmentation");
 var _jsxRuntime = require("react/jsx-runtime");
 var _variables = require("./variables");
-const _excluded = ["id", "label", "labelId", "material", "disabled", "slotProps", "onChange", "onKeyDown", "onOpen", "onClose", "size", "style", "fullWidth"],
+const _excluded = ["id", "label", "labelId", "material", "disabled", "multiple", "slotProps", "onChange", "onKeyDown", "onOpen", "onClose", "renderValue", "size", "style", "fullWidth"],
   _excluded2 = ["onRowsPerPageChange", "material", "disabled"],
   _excluded3 = ["material"],
   _excluded4 = ["autoFocus", "label", "fullWidth", "slotProps", "className", "material", "inputRef"],
@@ -77,18 +78,19 @@ const _excluded = ["id", "label", "labelId", "material", "disabled", "slotProps"
   _excluded12 = ["material", "label", "className"],
   _excluded13 = ["material"],
   _excluded14 = ["inert", "iconStart", "iconEnd", "children", "material"],
-  _excluded15 = ["slotProps", "material"],
-  _excluded16 = ["id", "multiple", "freeSolo", "options", "getOptionLabel", "isOptionEqualToValue", "value", "onChange", "label", "placeholder", "slotProps", "material"],
-  _excluded17 = ["key"],
-  _excluded18 = ["slotProps"],
+  _excluded15 = ["material"],
+  _excluded16 = ["slotProps", "material"],
+  _excluded17 = ["id", "multiple", "freeSolo", "options", "getOptionLabel", "isOptionEqualToValue", "value", "onChange", "label", "placeholder", "slotProps", "material"],
+  _excluded18 = ["key"],
   _excluded19 = ["slotProps"],
   _excluded20 = ["slotProps"],
-  _excluded21 = ["slotProps", "material"],
-  _excluded22 = ["material"],
-  _excluded23 = ["ref", "open", "children", "className", "clickAwayTouchEvent", "clickAwayMouseEvent", "flip", "focusTrap", "onExited", "onClickAway", "onDidShow", "onDidHide", "id", "target", "transition", "placement", "material"],
-  _excluded24 = ["native"],
-  _excluded25 = ["children", "value", "active"],
-  _excluded26 = ["items", "value", "material"];
+  _excluded21 = ["slotProps"],
+  _excluded22 = ["slotProps", "material"],
+  _excluded23 = ["material"],
+  _excluded24 = ["ref", "open", "children", "className", "clickAwayTouchEvent", "clickAwayMouseEvent", "flip", "focusTrap", "onExited", "onClickAway", "onDidShow", "onDidHide", "id", "target", "transition", "placement", "material"],
+  _excluded25 = ["native"],
+  _excluded26 = ["children", "value", "active"],
+  _excluded27 = ["items", "value", "material"];
 /* eslint-disable mui/disallow-react-api-in-server-components */
 
 const InputAdornment = (0, _styles.styled)(_InputAdornment.default, {
@@ -155,11 +157,13 @@ const BaseSelect = (0, _forwardRef.forwardRef)(function BaseSelect(props, ref) {
       labelId,
       material,
       disabled,
+      multiple,
       slotProps,
       onChange,
       onKeyDown,
       onOpen,
       onClose,
+      renderValue,
       size,
       style,
       fullWidth
@@ -196,7 +200,9 @@ const BaseSelect = (0, _forwardRef.forwardRef)(function BaseSelect(props, ref) {
       labelId: labelId,
       label: label,
       displayEmpty: true,
+      multiple: multiple,
       onChange: onChange,
+      renderValue: renderValue,
       variant: computedVariant
     }, other, {
       inputProps: slotProps?.htmlInput,
@@ -484,12 +490,19 @@ function BaseMenuItem(props) {
     children: iconEnd
   }, "3")]);
 }
+function BaseModal(props) {
+  const {
+      material
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded15);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default, (0, _extends2.default)({}, other, material));
+}
 function BaseTextField(props) {
   const {
       slotProps,
       material
     } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded15);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded16);
   const theme = (0, _styles.useTheme)();
   const textFieldDefaults = theme.components?.MuiTextField?.defaultProps ?? {};
   const computedVariant = other.variant ?? textFieldDefaults.variant ?? 'outlined';
@@ -523,7 +536,7 @@ function BaseAutocomplete(props) {
       slotProps,
       material
     } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded16);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded17);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, (0, _extends2.default)({
     id: id,
     multiple: multiple,
@@ -540,28 +553,28 @@ function BaseAutocomplete(props) {
         {
           key
         } = _getTagProps,
-        tagProps = (0, _objectWithoutPropertiesLoose2.default)(_getTagProps, _excluded17);
+        tagProps = (0, _objectWithoutPropertiesLoose2.default)(_getTagProps, _excluded18);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, (0, _extends2.default)({
         variant: "outlined",
         size: "small",
         label: typeof option === 'string' ? option : getOptionLabel?.(option)
-      }, tagProps), key);
+      }, tagProps, typeof slotProps?.chip === 'function' ? slotProps.chip(option, index) : slotProps?.chip), key);
     }),
     renderInput: params => {
       const {
           slotProps: autocompleteSlotProps
         } = params,
-        inputRest = (0, _objectWithoutPropertiesLoose2.default)(params, _excluded18);
+        inputRest = (0, _objectWithoutPropertiesLoose2.default)(params, _excluded19);
       const _ref = slotProps?.textField ?? {},
         {
           slotProps: textFieldSlotProps
         } = _ref,
-        textFieldRest = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded19);
+        textFieldRest = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded20);
       const _ref2 = rootProps.slotProps?.baseTextField ?? {},
         {
           slotProps: baseTextFieldSlotProps
         } = _ref2,
-        baseTextFieldRest = (0, _objectWithoutPropertiesLoose2.default)(_ref2, _excluded20);
+        baseTextFieldRest = (0, _objectWithoutPropertiesLoose2.default)(_ref2, _excluded21);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, (0, _extends2.default)({}, inputRest, {
         label: label,
         placeholder: placeholder
@@ -588,7 +601,7 @@ function transformInputProps(props, wrapAdornments = true) {
       slotProps,
       material
     } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded21);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded22);
   const result = other;
   if (wrapAdornments) {
     if (result.startAdornment) {
@@ -622,7 +635,7 @@ const BaseTextarea = (0, _forwardRef.forwardRef)(function BaseTextarea(props, re
   const {
       material
     } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded22);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded23);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextareaAutosize.default, (0, _extends2.default)({}, other, material, {
     ref: ref
   }));
@@ -647,7 +660,7 @@ function BasePopper(props) {
       placement,
       material
     } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded23);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded24);
   const modifiers = React.useMemo(() => {
     const result = [{
       name: 'preventOverflow',
@@ -742,7 +755,7 @@ function BaseSelectOption(_ref3) {
   let {
       native
     } = _ref3,
-    props = (0, _objectWithoutPropertiesLoose2.default)(_ref3, _excluded24);
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref3, _excluded25);
   if (native) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", (0, _extends2.default)({}, props));
   }
@@ -777,7 +790,7 @@ function TabPanel(props) {
       children,
       active
     } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded25);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded26);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTabPanel, (0, _extends2.default)({
     role: "tabpanel",
     style: {
@@ -793,7 +806,7 @@ function BaseTabs(_ref4) {
       value,
       material
     } = _ref4,
-    props = (0, _objectWithoutPropertiesLoose2.default)(_ref4, _excluded26);
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref4, _excluded27);
   const id = (0, _useId.default)();
   const labelId = `${id}-tab-${value}`;
   const panelId = `${id}-tabpanel-${value}`;
@@ -873,6 +886,7 @@ const baseSlots = {
   baseLinearProgress: BaseLinearProgress,
   baseMenuList: BaseMenuList,
   baseMenuItem: BaseMenuItem,
+  baseModal: BaseModal,
   baseTextField: BaseTextField,
   baseButton: BaseButton,
   baseIconButton: BaseIconButton,

package/material/index.mjs

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "label", "labelId", "material", "disabled", "slotProps", "onChange", "onKeyDown", "onOpen", "onClose", "size", "style", "fullWidth"],
+const _excluded = ["id", "label", "labelId", "material", "disabled", "multiple", "slotProps", "onChange", "onKeyDown", "onOpen", "onClose", "renderValue", "size", "style", "fullWidth"],
   _excluded2 = ["onRowsPerPageChange", "material", "disabled"],
   _excluded3 = ["material"],
   _excluded4 = ["autoFocus", "label", "fullWidth", "slotProps", "className", "material", "inputRef"],
@@ -16,18 +16,19 @@ const _excluded = ["id", "label", "labelId", "material", "disabled", "slotProps"
   _excluded12 = ["material", "label", "className"],
   _excluded13 = ["material"],
   _excluded14 = ["inert", "iconStart", "iconEnd", "children", "material"],
-  _excluded15 = ["slotProps", "material"],
-  _excluded16 = ["id", "multiple", "freeSolo", "options", "getOptionLabel", "isOptionEqualToValue", "value", "onChange", "label", "placeholder", "slotProps", "material"],
-  _excluded17 = ["key"],
-  _excluded18 = ["slotProps"],
+  _excluded15 = ["material"],
+  _excluded16 = ["slotProps", "material"],
+  _excluded17 = ["id", "multiple", "freeSolo", "options", "getOptionLabel", "isOptionEqualToValue", "value", "onChange", "label", "placeholder", "slotProps", "material"],
+  _excluded18 = ["key"],
   _excluded19 = ["slotProps"],
   _excluded20 = ["slotProps"],
-  _excluded21 = ["slotProps", "material"],
-  _excluded22 = ["material"],
-  _excluded23 = ["ref", "open", "children", "className", "clickAwayTouchEvent", "clickAwayMouseEvent", "flip", "focusTrap", "onExited", "onClickAway", "onDidShow", "onDidHide", "id", "target", "transition", "placement", "material"],
-  _excluded24 = ["native"],
-  _excluded25 = ["children", "value", "active"],
-  _excluded26 = ["items", "value", "material"];
+  _excluded21 = ["slotProps"],
+  _excluded22 = ["slotProps", "material"],
+  _excluded23 = ["material"],
+  _excluded24 = ["ref", "open", "children", "className", "clickAwayTouchEvent", "clickAwayMouseEvent", "flip", "focusTrap", "onExited", "onClickAway", "onDidShow", "onDidHide", "id", "target", "transition", "placement", "material"],
+  _excluded25 = ["native"],
+  _excluded26 = ["children", "value", "active"],
+  _excluded27 = ["items", "value", "material"];
 import * as React from 'react';
 import clsx from 'clsx';
 import useForkRef from '@mui/utils/useForkRef';
@@ -46,6 +47,7 @@ import MUIListItemIcon from '@mui/material/ListItemIcon';
 import MUIListItemText, { listItemTextClasses } from '@mui/material/ListItemText';
 import MUIMenuList from '@mui/material/MenuList';
 import MUIMenuItem from '@mui/material/MenuItem';
+import MUIModal from '@mui/material/Modal';
 import MUITextField from '@mui/material/TextField';
 import MUITextareaAutosize from '@mui/material/TextareaAutosize';
 import MUIFormControl from '@mui/material/FormControl';
@@ -142,11 +144,13 @@ const BaseSelect = forwardRef(function BaseSelect(props, ref) {
       labelId,
       material,
       disabled,
+      multiple,
       slotProps,
       onChange,
       onKeyDown,
       onOpen,
       onClose,
+      renderValue,
       size,
       style,
       fullWidth
@@ -183,7 +187,9 @@ const BaseSelect = forwardRef(function BaseSelect(props, ref) {
       labelId: labelId,
       label: label,
       displayEmpty: true,
+      multiple: multiple,
       onChange: onChange,
+      renderValue: renderValue,
       variant: computedVariant
     }, other, {
       inputProps: slotProps?.htmlInput,
@@ -471,12 +477,19 @@ function BaseMenuItem(props) {
     children: iconEnd
   }, "3")]);
 }
+function BaseModal(props) {
+  const {
+      material
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded15);
+  return /*#__PURE__*/_jsx(MUIModal, _extends({}, other, material));
+}
 function BaseTextField(props) {
   const {
       slotProps,
       material
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded15);
+    other = _objectWithoutPropertiesLoose(props, _excluded16);
   const theme = useTheme();
   const textFieldDefaults = theme.components?.MuiTextField?.defaultProps ?? {};
   const computedVariant = other.variant ?? textFieldDefaults.variant ?? 'outlined';
@@ -510,7 +523,7 @@ function BaseAutocomplete(props) {
       slotProps,
       material
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded16);
+    other = _objectWithoutPropertiesLoose(props, _excluded17);
   return /*#__PURE__*/_jsx(MUIAutocomplete, _extends({
     id: id,
     multiple: multiple,
@@ -527,28 +540,28 @@ function BaseAutocomplete(props) {
         {
           key
         } = _getTagProps,
-        tagProps = _objectWithoutPropertiesLoose(_getTagProps, _excluded17);
+        tagProps = _objectWithoutPropertiesLoose(_getTagProps, _excluded18);
       return /*#__PURE__*/_jsx(MUIChip, _extends({
         variant: "outlined",
         size: "small",
         label: typeof option === 'string' ? option : getOptionLabel?.(option)
-      }, tagProps), key);
+      }, tagProps, typeof slotProps?.chip === 'function' ? slotProps.chip(option, index) : slotProps?.chip), key);
     }),
     renderInput: params => {
       const {
           slotProps: autocompleteSlotProps
         } = params,
-        inputRest = _objectWithoutPropertiesLoose(params, _excluded18);
+        inputRest = _objectWithoutPropertiesLoose(params, _excluded19);
       const _ref = slotProps?.textField ?? {},
         {
           slotProps: textFieldSlotProps
         } = _ref,
-        textFieldRest = _objectWithoutPropertiesLoose(_ref, _excluded19);
+        textFieldRest = _objectWithoutPropertiesLoose(_ref, _excluded20);
       const _ref2 = rootProps.slotProps?.baseTextField ?? {},
         {
           slotProps: baseTextFieldSlotProps
         } = _ref2,
-        baseTextFieldRest = _objectWithoutPropertiesLoose(_ref2, _excluded20);
+        baseTextFieldRest = _objectWithoutPropertiesLoose(_ref2, _excluded21);
       return /*#__PURE__*/_jsx(MUITextField, _extends({}, inputRest, {
         label: label,
         placeholder: placeholder
@@ -575,7 +588,7 @@ function transformInputProps(props, wrapAdornments = true) {
       slotProps,
       material
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded21);
+    other = _objectWithoutPropertiesLoose(props, _excluded22);
   const result = other;
   if (wrapAdornments) {
     if (result.startAdornment) {
@@ -609,7 +622,7 @@ const BaseTextarea = forwardRef(function BaseTextarea(props, ref) {
   const {
       material
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded22);
+    other = _objectWithoutPropertiesLoose(props, _excluded23);
   return /*#__PURE__*/_jsx(MUITextareaAutosize, _extends({}, other, material, {
     ref: ref
   }));
@@ -634,7 +647,7 @@ function BasePopper(props) {
       placement,
       material
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded23);
+    other = _objectWithoutPropertiesLoose(props, _excluded24);
   const modifiers = React.useMemo(() => {
     const result = [{
       name: 'preventOverflow',
@@ -729,7 +742,7 @@ function BaseSelectOption(_ref3) {
   let {
       native
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded24);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded25);
   if (native) {
     return /*#__PURE__*/_jsx("option", _extends({}, props));
   }
@@ -764,7 +777,7 @@ function TabPanel(props) {
       children,
       active
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded25);
+    other = _objectWithoutPropertiesLoose(props, _excluded26);
   return /*#__PURE__*/_jsx(StyledTabPanel, _extends({
     role: "tabpanel",
     style: {
@@ -780,7 +793,7 @@ function BaseTabs(_ref4) {
       value,
       material
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded26);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded27);
   const id = useId();
   const labelId = `${id}-tab-${value}`;
   const panelId = `${id}-tabpanel-${value}`;
@@ -860,6 +873,7 @@ const baseSlots = {
   baseLinearProgress: BaseLinearProgress,
   baseMenuList: BaseMenuList,
   baseMenuItem: BaseMenuItem,
+  baseModal: BaseModal,
   baseTextField: BaseTextField,
   baseButton: BaseButton,
   baseIconButton: BaseIconButton,

package/material/variables.js

@@ -75,7 +75,8 @@ function transformTheme(t) {
     [k.shadows.base]: (t.vars || t).shadows[2],
     [k.shadows.overlay]: (t.vars || t).shadows[8],
     [k.zIndex.panel]: (t.vars || t).zIndex.modal,
-    [k.zIndex.menu]: (t.vars || t).zIndex.modal
+    [k.zIndex.menu]: (t.vars || t).zIndex.modal,
+    [k.zIndex.modal]: (t.vars || t).zIndex.modal
   };
 }
 function getRadius(theme) {

package/material/variables.mjs

@@ -68,7 +68,8 @@ function transformTheme(t) {
     [k.shadows.base]: (t.vars || t).shadows[2],
     [k.shadows.overlay]: (t.vars || t).shadows[8],
     [k.zIndex.panel]: (t.vars || t).zIndex.modal,
-    [k.zIndex.menu]: (t.vars || t).zIndex.modal
+    [k.zIndex.menu]: (t.vars || t).zIndex.modal,
+    [k.zIndex.modal]: (t.vars || t).zIndex.modal
   };
 }
 function getRadius(theme) {

package/models/colDef/gridColDef.d.mts

@@ -250,7 +250,6 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
 export interface GridActionsColDef<R extends GridValidRowModel = any, V = any, F = V> extends GridBaseColDef<R, V, F> {
   /**
    * The type of the column.
-   * @default 'actions'
    */
   type: 'actions';
   /**
@@ -282,7 +281,6 @@ export interface GridActionsColDef<R extends GridValidRowModel = any, V = any, F
 export interface GridSingleSelectColDef<R extends GridValidRowModel = any, V = any, F = V> extends GridBaseColDef<R, V, F> {
   /**
    * The type of the column.
-   * @default 'singleSelect'
    */
   type: 'singleSelect';
   /**
@@ -304,12 +302,46 @@ export interface GridSingleSelectColDef<R extends GridValidRowModel = any, V = a
    */
   getOptionValue: (value: ValueOptions) => any;
 }
+/**
+ * Column Definition interface used for columns with the `multiSelect` type.
+ * @demos
+ *   - [Special column properties](/x/react-data-grid/column-definition/#special-properties)
+ */
+export interface GridMultiSelectColDef<R extends GridValidRowModel = any, V = (string | number)[], F = string> extends GridBaseColDef<R, V, F> {
+  /**
+   * The type of the column.
+   */
+  type: 'multiSelect';
+  /**
+   * To be used in combination with `type: 'multiSelect'`. This is an array (or a function returning an array) of the possible cell values and labels.
+   */
+  valueOptions?: Array<ValueOptions> | ((params: GridValueOptionsParams<R>) => Array<ValueOptions>);
+  /**
+   * Used to determine the label displayed for a given value option.
+   * @param {ValueOptions} value The current value option.
+   * @returns {string} The text to be displayed.
+   * @default {defaultGetOptionLabel}
+   */
+  getOptionLabel: (value: ValueOptions) => string;
+  /**
+   * Used to determine the value used for a value option.
+   * @param {ValueOptions} value The current value option.
+   * @returns {string | number} The value to be used.
+   * @default {defaultGetOptionValue}
+   */
+  getOptionValue: (value: ValueOptions) => string | number;
+  /**
+   * The separator used to join array values for display and export.
+   * @default ','
+   */
+  separator?: string;
+}
 /**
  * Column Definition interface.
  * @demos
  *   - [Column definition](/x/react-data-grid/column-definition/)
  */
-export type GridColDef<R extends GridValidRowModel = any, V = any, F = V> = GridBaseColDef<R, V, F> | GridActionsColDef<R, V, F> | GridSingleSelectColDef<R, V, F>;
+export type GridColDef<R extends GridValidRowModel = any, V = any, F = V> = GridBaseColDef<R, V, F> | GridActionsColDef<R, V, F> | GridSingleSelectColDef<R, V, F> | GridMultiSelectColDef<R, V, F>;
 /**
  * Column Definition interface used for the list view column.
  * @demos

package/models/colDef/gridColDef.d.ts

@@ -250,7 +250,6 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
 export interface GridActionsColDef<R extends GridValidRowModel = any, V = any, F = V> extends GridBaseColDef<R, V, F> {
   /**
    * The type of the column.
-   * @default 'actions'
    */
   type: 'actions';
   /**
@@ -282,7 +281,6 @@ export interface GridActionsColDef<R extends GridValidRowModel = any, V = any, F
 export interface GridSingleSelectColDef<R extends GridValidRowModel = any, V = any, F = V> extends GridBaseColDef<R, V, F> {
   /**
    * The type of the column.
-   * @default 'singleSelect'
    */
   type: 'singleSelect';
   /**
@@ -304,12 +302,46 @@ export interface GridSingleSelectColDef<R extends GridValidRowModel = any, V = a
    */
   getOptionValue: (value: ValueOptions) => any;
 }
+/**
+ * Column Definition interface used for columns with the `multiSelect` type.
+ * @demos
+ *   - [Special column properties](/x/react-data-grid/column-definition/#special-properties)
+ */
+export interface GridMultiSelectColDef<R extends GridValidRowModel = any, V = (string | number)[], F = string> extends GridBaseColDef<R, V, F> {
+  /**
+   * The type of the column.
+   */
+  type: 'multiSelect';
+  /**
+   * To be used in combination with `type: 'multiSelect'`. This is an array (or a function returning an array) of the possible cell values and labels.
+   */
+  valueOptions?: Array<ValueOptions> | ((params: GridValueOptionsParams<R>) => Array<ValueOptions>);
+  /**
+   * Used to determine the label displayed for a given value option.
+   * @param {ValueOptions} value The current value option.
+   * @returns {string} The text to be displayed.
+   * @default {defaultGetOptionLabel}
+   */
+  getOptionLabel: (value: ValueOptions) => string;
+  /**
+   * Used to determine the value used for a value option.
+   * @param {ValueOptions} value The current value option.
+   * @returns {string | number} The value to be used.
+   * @default {defaultGetOptionValue}
+   */
+  getOptionValue: (value: ValueOptions) => string | number;
+  /**
+   * The separator used to join array values for display and export.
+   * @default ','
+   */
+  separator?: string;
+}
 /**
  * Column Definition interface.
  * @demos
  *   - [Column definition](/x/react-data-grid/column-definition/)
  */
-export type GridColDef<R extends GridValidRowModel = any, V = any, F = V> = GridBaseColDef<R, V, F> | GridActionsColDef<R, V, F> | GridSingleSelectColDef<R, V, F>;
+export type GridColDef<R extends GridValidRowModel = any, V = any, F = V> = GridBaseColDef<R, V, F> | GridActionsColDef<R, V, F> | GridSingleSelectColDef<R, V, F> | GridMultiSelectColDef<R, V, F>;
 /**
  * Column Definition interface used for the list view column.
  * @demos

package/models/colDef/gridColType.d.mts

@@ -5,6 +5,7 @@ export interface GridColumnTypes {
   dateTime: 'dateTime';
   boolean: 'boolean';
   singleSelect: 'singleSelect';
+  multiSelect: 'multiSelect';
   actions: 'actions';
   custom: 'custom';
   longText: 'longText';

package/models/colDef/gridColType.d.ts

@@ -5,6 +5,7 @@ export interface GridColumnTypes {
   dateTime: 'dateTime';
   boolean: 'boolean';
   singleSelect: 'singleSelect';
+  multiSelect: 'multiSelect';
   actions: 'actions';
   custom: 'custom';
   longText: 'longText';

package/models/colDef/gridColumnTypesRecord.d.mts

@@ -1,3 +1,3 @@
 import type { GridColTypeDef } from "./gridColDef.mjs";
 import type { GridColType } from "./gridColType.mjs";
-export type GridColumnTypesRecord = Record<GridColType, GridColTypeDef>;
+export interface GridColumnTypesRecord extends Omit<Record<GridColType, GridColTypeDef>, 'multiSelect'> {}

package/models/colDef/gridColumnTypesRecord.d.ts

@@ -1,3 +1,3 @@
 import type { GridColTypeDef } from "./gridColDef.js";
 import type { GridColType } from "./gridColType.js";
-export type GridColumnTypesRecord = Record<GridColType, GridColTypeDef>;
+export interface GridColumnTypesRecord extends Omit<Record<GridColType, GridColTypeDef>, 'multiSelect'> {}

package/models/colDef/index.d.mts

@@ -1,3 +1,3 @@
-export type { GridAlignment, ValueOptions, GridKeyValue, GridColDef, GridListViewColDef, GridColTypeDef, GridColumnsMeta, GridSingleSelectColDef, GridActionsColDef, GetApplyQuickFilterFn, GridValueGetter, GridValueFormatter, GridValueSetter, GridValueParser, GridColSpanFn } from "./gridColDef.mjs";
+export type { GridAlignment, ValueOptions, GridKeyValue, GridColDef, GridListViewColDef, GridColTypeDef, GridColumnsMeta, GridSingleSelectColDef, GridMultiSelectColDef, GridActionsColDef, GetApplyQuickFilterFn, GridValueGetter, GridValueFormatter, GridValueSetter, GridValueParser, GridColSpanFn } from "./gridColDef.mjs";
 export * from "./gridColType.mjs";
 export * from "./gridColumnTypesRecord.mjs";

package/models/colDef/index.d.ts

@@ -1,3 +1,3 @@
-export type { GridAlignment, ValueOptions, GridKeyValue, GridColDef, GridListViewColDef, GridColTypeDef, GridColumnsMeta, GridSingleSelectColDef, GridActionsColDef, GetApplyQuickFilterFn, GridValueGetter, GridValueFormatter, GridValueSetter, GridValueParser, GridColSpanFn } from "./gridColDef.js";
+export type { GridAlignment, ValueOptions, GridKeyValue, GridColDef, GridListViewColDef, GridColTypeDef, GridColumnsMeta, GridSingleSelectColDef, GridMultiSelectColDef, GridActionsColDef, GetApplyQuickFilterFn, GridValueGetter, GridValueFormatter, GridValueSetter, GridValueParser, GridColSpanFn } from "./gridColDef.js";
 export * from "./gridColType.js";
 export * from "./gridColumnTypesRecord.js";

package/models/gridBaseSlots.d.mts

@@ -54,10 +54,45 @@ export type AutocompleteProps<Value = string, Multiple extends boolean = false,
    * @param {string} value The new value of the input.
    */
   onInputChange?: (event: React.SyntheticEvent, value: string) => void;
+  /** Control the popup open state. */
+  open?: boolean;
+  /**
+   * Callback fired when the popup requests to be opened.
+   * @param {React.SyntheticEvent} event The event source of the callback.
+   */
+  onOpen?: (event: React.SyntheticEvent) => void;
+  /**
+   * Callback fired when the popup requests to be closed.
+   * @param {React.SyntheticEvent} event The event source of the callback.
+   * @param {string} reason The reason for closing.
+   */
+  onClose?: (event: React.SyntheticEvent, reason: string) => void;
+  /** If true, the popup won't close when a value is selected. */
+  disableCloseOnSelect?: boolean;
+  /** If true, the popup opens when the input is focused. */
+  openOnFocus?: boolean;
+  /**
+   * Render the option, use `getOptionLabel` by default.
+   * @param {React.HTMLAttributes<HTMLLIElement> & { key: any }} props The props to apply on the li element.
+   * @param {Value} option The option to render.
+   * @param {object} state The state of each option.
+   * @param {string} state.inputValue The input value.
+   * @param {number} state.index The index of the option in the list.
+   * @param {boolean} state.selected Whether the option is selected.
+   * @returns {React.ReactNode} react node to render
+   */
+  renderOption?: (props: React.HTMLAttributes<HTMLLIElement> & {
+    key: any;
+  }, option: Value, state: {
+    inputValue: string;
+    index: number;
+    selected: boolean;
+  }) => React.ReactNode;
   label?: React.ReactNode;
   placeholder?: string;
   slotProps?: {
     textField: TextFieldProps;
+    chip?: ChipProps | ((value: Value, index: number) => ChipProps);
   };
 };
 export type BadgeProps = CommonProps & {
@@ -182,6 +217,15 @@ export type PopperProps = CommonProps & {
   /** @default 'bottom' */
   placement?: Placement;
 };
+export type ModalProps = CommonProps & {
+  open: boolean;
+  children: React.ReactElement<unknown>;
+  onClose?: (event: object, reason: 'backdropClick' | 'escapeKeyDown') => void;
+  keepMounted?: boolean;
+  disableAutoFocus?: boolean;
+  disableEnforceFocus?: boolean;
+  disableRestoreFocus?: boolean;
+};
 export type CircularProgressProps = CommonProps & {
   /**
    * Pixels or CSS value.
@@ -225,9 +269,11 @@ export type SelectProps = CommonProps & {
   open?: boolean;
   error?: boolean;
   disabled?: boolean;
+  multiple?: boolean;
   onChange?: React.ChangeEventHandler;
   onOpen?: (event: React.SyntheticEvent) => void;
   onClose?: (event: React.KeyboardEvent, reason: 'backdropClick' | 'escapeKeyDown' | 'tabKeyDown') => void;
+  renderValue?: (value: any) => React.ReactNode;
   label?: React.ReactNode;
   labelId?: string;
   native?: boolean;