@mui/x-data-grid 9.3.0 → 9.5.0

package/internals/index.js

@@ -4,6 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
+  GRID_STRING_COL_DEF: true,
+  registerGridColumnTypes: true,
+  gridRowIdSelector: true,
   GridVirtualScroller: true,
   GridVirtualScrollerContent: true,
   GridVirtualScrollerRenderZone: true,
@@ -19,6 +22,8 @@ var _exportNames = {
   propsStateInitializer: true,
   getGridFilter: true,
   getValueOptions: true,
+  getValueFromValueOptions: true,
+  isMultiSelectColDef: true,
   isSingleSelectColDef: true,
   useGridRegisterPipeProcessor: true,
   GridStrategyGroup: true,
@@ -45,9 +50,11 @@ var _exportNames = {
   filterStateInitializer: true,
   defaultGridFilterLookup: true,
   passFilterLogic: true,
+  removeDiacritics: true,
   gridFilteredChildrenCountLookupSelector: true,
   gridExpandedSortedRowTreeLevelPositionLookupSelector: true,
   gridFilteredSortedDepthRowEntriesSelector: true,
+  gridFilterModelSelector: true,
   useGridFocus: true,
   focusStateInitializer: true,
   useGridKeyboardNavigation: true,
@@ -132,7 +139,8 @@ var _exportNames = {
   serializeCellValue: true,
   GridSkeletonLoadingOverlayInner: true,
   createSvgIcon: true,
-  useGridPanelContext: true
+  useGridPanelContext: true,
+  useSyncExternalStore: true
 };
 Object.defineProperty(exports, "CacheChunkManager", {
   enumerable: true,
@@ -164,6 +172,12 @@ Object.defineProperty(exports, "GRID_ID_AUTOGENERATED", {
     return _gridRowsUtils.GRID_ID_AUTOGENERATED;
   }
 });
+Object.defineProperty(exports, "GRID_STRING_COL_DEF", {
+  enumerable: true,
+  get: function () {
+    return _gridStringColDef.GRID_STRING_COL_DEF;
+  }
+});
 Object.defineProperty(exports, "GridBaseColumnHeaders", {
   enumerable: true,
   get: function () {
@@ -392,6 +406,12 @@ Object.defineProperty(exports, "getTreeNodeDescendants", {
     return _gridRowsUtils.getTreeNodeDescendants;
   }
 });
+Object.defineProperty(exports, "getValueFromValueOptions", {
+  enumerable: true,
+  get: function () {
+    return _filterPanelUtils.getValueFromValueOptions;
+  }
+});
 Object.defineProperty(exports, "getValueOptions", {
   enumerable: true,
   get: function () {
@@ -422,6 +442,12 @@ Object.defineProperty(exports, "gridExpandedSortedRowTreeLevelPositionLookupSele
     return _gridFilterSelector.gridExpandedSortedRowTreeLevelPositionLookupSelector;
   }
 });
+Object.defineProperty(exports, "gridFilterModelSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridFilterSelector.gridFilterModelSelector;
+  }
+});
 Object.defineProperty(exports, "gridFilteredChildrenCountLookupSelector", {
   enumerable: true,
   get: function () {
@@ -482,6 +508,12 @@ Object.defineProperty(exports, "gridRowGroupsToFetchSelector", {
     return _gridRowsSelector.gridRowGroupsToFetchSelector;
   }
 });
+Object.defineProperty(exports, "gridRowIdSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridPropsSelectors.gridRowIdSelector;
+  }
+});
 Object.defineProperty(exports, "gridRowSelector", {
   enumerable: true,
   get: function () {
@@ -524,6 +556,12 @@ Object.defineProperty(exports, "isFillRightShortcut", {
     return _keyboardUtils.isFillRightShortcut;
   }
 });
+Object.defineProperty(exports, "isMultiSelectColDef", {
+  enumerable: true,
+  get: function () {
+    return _filterPanelUtils.isMultiSelectColDef;
+  }
+});
 Object.defineProperty(exports, "isNavigationKey", {
   enumerable: true,
   get: function () {
@@ -584,6 +622,18 @@ Object.defineProperty(exports, "propsStateInitializer", {
     return _useGridProps.propsStateInitializer;
   }
 });
+Object.defineProperty(exports, "registerGridColumnTypes", {
+  enumerable: true,
+  get: function () {
+    return _gridColumnTypesRegistry.registerGridColumnTypes;
+  }
+});
+Object.defineProperty(exports, "removeDiacritics", {
+  enumerable: true,
+  get: function () {
+    return _gridFilterUtils.removeDiacritics;
+  }
+});
 Object.defineProperty(exports, "rowSelectionStateInitializer", {
   enumerable: true,
   get: function () {
@@ -896,6 +946,12 @@ Object.defineProperty(exports, "usePinnedScrollOffset", {
     return _usePinnedScrollOffset.usePinnedScrollOffset;
   }
 });
+Object.defineProperty(exports, "useSyncExternalStore", {
+  enumerable: true,
+  get: function () {
+    return _shim.useSyncExternalStore;
+  }
+});
 Object.defineProperty(exports, "useTimeout", {
   enumerable: true,
   get: function () {
@@ -908,6 +964,9 @@ Object.defineProperty(exports, "vars", {
     return _cssVariables.vars;
   }
 });
+var _gridStringColDef = require("../colDef/gridStringColDef");
+var _gridColumnTypesRegistry = require("../colDef/gridColumnTypesRegistry");
+var _gridPropsSelectors = require("../hooks/core/gridPropsSelectors");
 var _GridVirtualScroller = require("../components/virtualization/GridVirtualScroller");
 var _GridVirtualScrollerContent = require("../components/virtualization/GridVirtualScrollerContent");
 var _GridVirtualScrollerRenderZone = require("../components/virtualization/GridVirtualScrollerRenderZone");
@@ -1179,4 +1238,5 @@ Object.keys(_pivoting).forEach(function (key) {
   });
 });
 var _createSvgIcon = require("../material/icons/createSvgIcon");
-var _GridPanelContext = require("../components/panel/GridPanelContext");
+var _GridPanelContext = require("../components/panel/GridPanelContext");
+var _shim = require("use-sync-external-store/shim");

package/internals/index.mjs

@@ -1,3 +1,6 @@
+export { GRID_STRING_COL_DEF } from "../colDef/gridStringColDef.mjs";
+export { registerGridColumnTypes } from "../colDef/gridColumnTypesRegistry.mjs";
+export { gridRowIdSelector } from "../hooks/core/gridPropsSelectors.mjs";
 export { GridVirtualScroller } from "../components/virtualization/GridVirtualScroller.mjs";
 export { GridVirtualScrollerContent } from "../components/virtualization/GridVirtualScrollerContent.mjs";
 export { GridVirtualScrollerRenderZone } from "../components/virtualization/GridVirtualScrollerRenderZone.mjs";
@@ -12,7 +15,7 @@ export { vars } from "../constants/cssVariables.mjs";
 export { useGridVirtualizer } from "../hooks/core/useGridVirtualizer.mjs";
 export { propsStateInitializer } from "../hooks/core/useGridProps.mjs";
 export { getGridFilter } from "../components/panel/filterPanel/GridFilterPanel.mjs";
-export { getValueOptions } from "../components/panel/filterPanel/filterPanelUtils.mjs";
+export { getValueOptions, getValueFromValueOptions, isMultiSelectColDef } from "../components/panel/filterPanel/filterPanelUtils.mjs";
 export { useGridRegisterPipeProcessor } from "../hooks/core/pipeProcessing/index.mjs";
 export { GridStrategyGroup, useGridRegisterStrategyProcessor, GRID_DEFAULT_STRATEGY } from "../hooks/core/strategyProcessing/index.mjs";
 export { useGridInitialization } from "../hooks/core/useGridInitialization.mjs";
@@ -31,8 +34,8 @@ export { useGridCsvExport } from "../hooks/features/export/useGridCsvExport.mjs"
 export { useGridPrintExport } from "../hooks/features/export/useGridPrintExport.mjs";
 export { useGridFilter, filterStateInitializer } from "../hooks/features/filter/useGridFilter.mjs";
 export { defaultGridFilterLookup } from "../hooks/features/filter/gridFilterState.mjs";
-export { passFilterLogic } from "../hooks/features/filter/gridFilterUtils.mjs";
-export { gridFilteredChildrenCountLookupSelector, gridExpandedSortedRowTreeLevelPositionLookupSelector, gridFilteredSortedDepthRowEntriesSelector } from "../hooks/features/filter/gridFilterSelector.mjs";
+export { passFilterLogic, removeDiacritics } from "../hooks/features/filter/gridFilterUtils.mjs";
+export { gridFilteredChildrenCountLookupSelector, gridExpandedSortedRowTreeLevelPositionLookupSelector, gridFilteredSortedDepthRowEntriesSelector, gridFilterModelSelector } from "../hooks/features/filter/gridFilterSelector.mjs";
 export { isSingleSelectColDef } from "../components/panel/filterPanel/filterPanelUtils.mjs";
 export { useGridFocus, focusStateInitializer } from "../hooks/features/focus/useGridFocus.mjs";
 export { useGridKeyboardNavigation } from "../hooks/features/keyboardNavigation/useGridKeyboardNavigation.mjs";
@@ -97,4 +100,5 @@ export * from "./demo/index.mjs";
 export { GridSkeletonLoadingOverlayInner } from "../components/GridSkeletonLoadingOverlay.mjs";
 export * from "../hooks/features/pivoting/index.mjs";
 export { createSvgIcon } from "../material/icons/createSvgIcon.mjs";
-export { useGridPanelContext } from "../components/panel/GridPanelContext.mjs";
+export { useGridPanelContext } from "../components/panel/GridPanelContext.mjs";
+export { useSyncExternalStore } from 'use-sync-external-store/shim';

package/internals/utils/propValidation.js

@@ -10,6 +10,9 @@ var _utils = require("../../utils/utils");
 var _signature = require("../../constants/signature");
 const propValidatorsDataGrid = exports.propValidatorsDataGrid = [props => props.autoPageSize && props.autoHeight && ['MUI X: `<DataGrid autoPageSize={true} autoHeight={true} />` are not valid props.', 'You cannot use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', 'Please remove one of these two props.'].join('\n') || undefined, props => props.paginationMode === 'client' && props.paginationMeta != null && ['MUI X: Usage of the `paginationMeta` prop with client-side pagination (`paginationMode="client"`) has no effect.', '`paginationMeta` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.signature === _signature.GridSignature.DataGrid && props.paginationMode === 'client' && (0, _utils.isNumber)(props.rowCount) && ['MUI X: Usage of the `rowCount` prop with client side pagination (`paginationMode="client"`) has no effect.', '`rowCount` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.paginationMode === 'server' && props.rowCount == null && !props.dataSource && !props.paginationMeta && ["MUI X: The `rowCount` prop must be passed using `paginationMode='server'`", 'For more detail, see http://mui.com/components/data-grid/pagination/#index-based-pagination'].join('\n') || undefined];
 function validateProps(props, validators) {
+  if (process.env.NODE_ENV === 'production') {
+    return;
+  }
   validators.forEach(validator => {
     const message = validator(props);
     if (message) {

package/internals/utils/propValidation.mjs

@@ -3,6 +3,9 @@ import { isNumber } from "../../utils/utils.mjs";
 import { GridSignature } from "../../constants/signature.mjs";
 export const propValidatorsDataGrid = [props => props.autoPageSize && props.autoHeight && ['MUI X: `<DataGrid autoPageSize={true} autoHeight={true} />` are not valid props.', 'You cannot use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', 'Please remove one of these two props.'].join('\n') || undefined, props => props.paginationMode === 'client' && props.paginationMeta != null && ['MUI X: Usage of the `paginationMeta` prop with client-side pagination (`paginationMode="client"`) has no effect.', '`paginationMeta` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.signature === GridSignature.DataGrid && props.paginationMode === 'client' && isNumber(props.rowCount) && ['MUI X: Usage of the `rowCount` prop with client side pagination (`paginationMode="client"`) has no effect.', '`rowCount` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.paginationMode === 'server' && props.rowCount == null && !props.dataSource && !props.paginationMeta && ["MUI X: The `rowCount` prop must be passed using `paginationMode='server'`", 'For more detail, see http://mui.com/components/data-grid/pagination/#index-based-pagination'].join('\n') || undefined];
 export function validateProps(props, validators) {
+  if (process.env.NODE_ENV === 'production') {
+    return;
+  }
   validators.forEach(validator => {
     const message = validator(props);
     if (message) {

package/material/augmentation.d.mts

@@ -7,6 +7,7 @@ import type { DividerProps } from '@mui/material/Divider';
 import type { LinearProgressProps } from '@mui/material/LinearProgress';
 import type { MenuListProps } from '@mui/material/MenuList';
 import type { MenuItemProps } from '@mui/material/MenuItem';
+import type { ModalProps } from '@mui/material/Modal';
 import type { TextFieldProps } from '@mui/material/TextField';
 import type { SwitchProps } from '@mui/material/Switch';
 import type { ButtonProps } from '@mui/material/Button';
@@ -51,6 +52,9 @@ declare module '@mui/x-data-grid' {
   interface BaseMenuItemPropsOverrides {
     material?: Partial<MenuItemProps>;
   }
+  interface BaseModalPropsOverrides {
+    material?: Partial<ModalProps>;
+  }
   interface BaseTextFieldPropsOverrides {
     material?: Partial<TextFieldProps>;
   }

package/material/augmentation.d.ts

@@ -7,6 +7,7 @@ import type { DividerProps } from '@mui/material/Divider';
 import type { LinearProgressProps } from '@mui/material/LinearProgress';
 import type { MenuListProps } from '@mui/material/MenuList';
 import type { MenuItemProps } from '@mui/material/MenuItem';
+import type { ModalProps } from '@mui/material/Modal';
 import type { TextFieldProps } from '@mui/material/TextField';
 import type { SwitchProps } from '@mui/material/Switch';
 import type { ButtonProps } from '@mui/material/Button';
@@ -51,6 +52,9 @@ declare module '@mui/x-data-grid' {
   interface BaseMenuItemPropsOverrides {
     material?: Partial<MenuItemProps>;
   }
+  interface BaseModalPropsOverrides {
+    material?: Partial<ModalProps>;
+  }
   interface BaseTextFieldPropsOverrides {
     material?: Partial<TextFieldProps>;
   }

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