@mui/x-data-grid 6.0.0-beta.5 → 6.0.0

package/node/components/containers/GridMainContainer.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridMainContainer = GridMainContainer;
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/utils");
-var _styles = require("@mui/material/styles");
+var _system = require("@mui/system");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -21,7 +21,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const GridMainContainerRoot = (0, _styles.styled)('div', {
+const GridMainContainerRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'Main',
   overridesResolver: (props, styles) => styles.main

package/node/components/containers/GridOverlay.js

@@ -11,7 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
-var _styles = require("@mui/material/styles");
+var _system = require("@mui/system");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -27,21 +27,19 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const GridOverlayRoot = (0, _styles.styled)('div', {
+const GridOverlayRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'Overlay',
   overridesResolver: (_, styles) => styles.overlay
-})(({
-  theme
-}) => ({
+})({
   width: '100%',
   height: '100%',
   display: 'flex',
   alignSelf: 'center',
   alignItems: 'center',
   justifyContent: 'center',
-  backgroundColor: theme.vars ? `rgba(${theme.vars.palette.background.defaultChannel} / ${theme.vars.palette.action.disabledOpacity})` : (0, _styles.alpha)(theme.palette.background.default, theme.palette.action.disabledOpacity)
-}));
+  backgroundColor: 'var(--unstable_DataGrid-overlayBackground)'
+});
 const GridOverlay = /*#__PURE__*/React.forwardRef(function GridOverlay(props, ref) {
   const {
       className

package/node/components/containers/GridRootStyles.js

@@ -139,14 +139,18 @@ const GridRootStyles = (0, _styles.styled)('div', {
   theme
 }) => {
   const borderColor = getBorderColor(theme);
+  const radius = theme.shape.borderRadius;
   const gridStyle = (0, _extends2.default)({
+    '--unstable_DataGrid-radius': typeof radius === 'number' ? `${radius}px` : radius,
+    '--unstable_DataGrid-headWeight': theme.typography.fontWeightMedium,
+    '--unstable_DataGrid-overlayBackground': theme.vars ? `rgba(${theme.vars.palette.background.defaultChannel} / ${theme.vars.palette.action.disabledOpacity})` : (0, _styles.alpha)(theme.palette.background.default, theme.palette.action.disabledOpacity),
     flex: 1,
     boxSizing: 'border-box',
     position: 'relative',
     borderWidth: '1px',
     borderStyle: 'solid',
     borderColor,
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: 'var(--unstable_DataGrid-radius)',
     color: (theme.vars || theme).palette.text.primary
   }, theme.typography.body2, {
     outline: 'none',
@@ -441,13 +445,13 @@ const GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses['columnHeader--dragging']}, & .${_gridClasses.gridClasses['row--dragging']}`]: {
       background: (theme.vars || theme).palette.background.paper,
       padding: '0 12px',
-      borderRadius: theme.shape.borderRadius,
+      borderRadius: 'var(--unstable_DataGrid-radius)',
       opacity: (theme.vars || theme).palette.action.disabledOpacity
     },
     [`& .${_gridClasses.gridClasses['row--dragging']}`]: {
       background: (theme.vars || theme).palette.background.paper,
       padding: '0 12px',
-      borderRadius: theme.shape.borderRadius,
+      borderRadius: 'var(--unstable_DataGrid-radius)',
       opacity: (theme.vars || theme).palette.action.disabledOpacity,
       [`& .${_gridClasses.gridClasses.rowReorderCellPlaceholder}`]: {
         display: 'flex'

package/node/components/containers/GridToolbarContainer.js

@@ -10,7 +10,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _styles = require("@mui/material/styles");
+var _system = require("@mui/system");
 var _utils = require("@mui/utils");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -27,7 +27,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const GridToolbarContainerRoot = (0, _styles.styled)('div', {
+const GridToolbarContainerRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ToolbarContainer',
   overridesResolver: (_, styles) => styles.toolbarContainer

package/node/components/index.js

@@ -58,7 +58,7 @@ Object.keys(_columnSelection).forEach(function (key) {
     }
   });
 });
-var _icons = require("./icons");
+var _icons = require("../material/icons");
 Object.keys(_icons).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _icons[key]) return;

package/node/components/panel/GridColumnsPanel.js

@@ -17,7 +17,6 @@ var _styles = require("@mui/material/styles");
 var _gridColumnsSelector = require("../../hooks/features/columns/gridColumnsSelector");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
-var _icons = require("../icons");
 var _GridPanelContent = require("./GridPanelContent");
 var _GridPanelFooter = require("./GridPanelFooter");
 var _GridPanelHeader = require("./GridPanelHeader");
@@ -174,7 +173,7 @@ function GridColumnsPanel(props) {
             title: apiRef.current.getLocaleText('columnsPanelDragIconLabel'),
             size: "small",
             disabled: true,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.GridDragIcon, {})
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnReorderIcon, {})
           })]
         }, column.field))
       })

package/node/components/panel/GridPanelContent.js

@@ -10,7 +10,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _styles = require("@mui/material/styles");
+var _system = require("@mui/system");
 var _utils = require("@mui/utils");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -27,7 +27,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const GridPanelContentRoot = (0, _styles.styled)('div', {
+const GridPanelContentRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'PanelContent',
   overridesResolver: (props, styles) => styles.panelContent

package/node/components/panel/GridPanelFooter.js

@@ -10,7 +10,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _styles = require("@mui/material/styles");
+var _system = require("@mui/system");
 var _utils = require("@mui/utils");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -27,7 +27,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const GridPanelFooterRoot = (0, _styles.styled)('div', {
+const GridPanelFooterRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'PanelFooter',
   overridesResolver: (props, styles) => styles.panelFooter

package/node/components/panel/GridPanelHeader.js

@@ -10,7 +10,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _styles = require("@mui/material/styles");
+var _system = require("@mui/system");
 var _utils = require("@mui/utils");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -27,7 +27,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const GridPanelHeaderRoot = (0, _styles.styled)('div', {
+const GridPanelHeaderRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'PanelHeader',
   overridesResolver: (props, styles) => styles.panelHeader

package/node/components/panel/filterPanel/GridFilterForm.js

@@ -10,9 +10,6 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
-var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
-var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
-var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
 var _styles = require("@mui/material/styles");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _gridColumnsSelector = require("../../../hooks/features/columns/gridColumnsSelector");
@@ -51,7 +48,7 @@ const GridFilterFormRoot = (0, _styles.styled)('div', {
   display: 'flex',
   padding: theme.spacing(1)
 }));
-const FilterFormDeleteIcon = (0, _styles.styled)(_FormControl.default, {
+const FilterFormDeleteIcon = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormDeleteIcon',
   overridesResolver: (_, styles) => styles.filterFormDeleteIcon
@@ -63,7 +60,7 @@ const FilterFormDeleteIcon = (0, _styles.styled)(_FormControl.default, {
   marginRight: theme.spacing(0.5),
   marginBottom: theme.spacing(0.2)
 }));
-const FilterFormLogicOperatorInput = (0, _styles.styled)(_FormControl.default, {
+const FilterFormLogicOperatorInput = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormLogicOperatorInput',
   overridesResolver: (_, styles) => styles.filterFormLogicOperatorInput
@@ -72,21 +69,21 @@ const FilterFormLogicOperatorInput = (0, _styles.styled)(_FormControl.default, {
   marginRight: 5,
   justifyContent: 'end'
 });
-const FilterFormColumnInput = (0, _styles.styled)(_FormControl.default, {
+const FilterFormColumnInput = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormColumnInput',
   overridesResolver: (_, styles) => styles.filterFormColumnInput
 })({
   width: 150
 });
-const FilterFormOperatorInput = (0, _styles.styled)(_FormControl.default, {
+const FilterFormOperatorInput = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormOperatorInput',
   overridesResolver: (_, styles) => styles.filterFormOperatorInput
 })({
   width: 120
 });
-const FilterFormValueInput = (0, _styles.styled)(_FormControl.default, {
+const FilterFormValueInput = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormValueInput',
   overridesResolver: (_, styles) => styles.filterFormValueInput
@@ -141,7 +138,8 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
   const baseFormControlProps = rootProps.slotProps?.baseFormControl || {};
   const baseSelectProps = rootProps.slotProps?.baseSelect || {};
   const isBaseSelectNative = baseSelectProps.native ?? true;
-  const OptionComponent = isBaseSelectNative ? 'option' : _MenuItem.default;
+  const baseInputLabelProps = rootProps.slotProps?.baseInputLabel || {};
+  const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
   const {
       InputComponentProps
     } = valueInputProps,
@@ -270,10 +268,11 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         disabled: !!disableMultiFilterOperator || logicOperators.length === 1,
         native: isBaseSelectNative
       }, rootProps.slotProps?.baseSelect, {
-        children: logicOperators.map(logicOperator => /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
-          value: logicOperator.toString(),
-          children: apiRef.current.getLocaleText(getLogicOperatorLocaleKey(logicOperator))
-        }, logicOperator.toString()))
+        children: logicOperators.map(logicOperator => /*#__PURE__*/(0, React.createElement)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
+          native: isBaseSelectNative,
+          key: logicOperator.toString(),
+          value: logicOperator.toString()
+        }), apiRef.current.getLocaleText(getLogicOperatorLocaleKey(logicOperator))))
       }))
     })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(FilterFormColumnInput, (0, _extends2.default)({
       variant: "standard",
@@ -281,11 +280,11 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
     }, baseFormControlProps, columnInputProps, {
       className: (0, _clsx.default)(classes.columnInput, baseFormControlProps.className, columnInputProps.className),
       ownerState: rootProps,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputLabel, (0, _extends2.default)({}, baseInputLabelProps, {
         htmlFor: columnSelectId,
         id: columnSelectLabelId,
         children: apiRef.current.getLocaleText('filterPanelColumns')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelect, (0, _extends2.default)({
+      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelect, (0, _extends2.default)({
         labelId: columnSelectLabelId,
         id: columnSelectId,
         label: apiRef.current.getLocaleText('filterPanelColumns'),
@@ -293,10 +292,11 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         onChange: changeColumn,
         native: isBaseSelectNative
       }, rootProps.slotProps?.baseSelect, {
-        children: sortedFilteredColumns.map(col => /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
-          value: col.field,
-          children: getColumnLabel(col)
-        }, col.field))
+        children: sortedFilteredColumns.map(col => /*#__PURE__*/(0, React.createElement)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
+          native: isBaseSelectNative,
+          key: col.field,
+          value: col.field
+        }), getColumnLabel(col)))
       }))]
     })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(FilterFormOperatorInput, (0, _extends2.default)({
       variant: "standard",
@@ -304,11 +304,11 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
     }, baseFormControlProps, operatorInputProps, {
       className: (0, _clsx.default)(classes.operatorInput, baseFormControlProps.className, operatorInputProps.className),
       ownerState: rootProps,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputLabel, (0, _extends2.default)({}, baseInputLabelProps, {
         htmlFor: operatorSelectId,
         id: operatorSelectLabelId,
         children: apiRef.current.getLocaleText('filterPanelOperator')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelect, (0, _extends2.default)({
+      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelect, (0, _extends2.default)({
         labelId: operatorSelectLabelId,
         label: apiRef.current.getLocaleText('filterPanelOperator'),
         id: operatorSelectId,
@@ -317,10 +317,11 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         native: isBaseSelectNative,
         inputRef: filterSelectorRef
       }, rootProps.slotProps?.baseSelect, {
-        children: currentColumn?.filterOperators?.map(operator => /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
-          value: operator.value,
-          children: operator.label || apiRef.current.getLocaleText(`filterOperator${(0, _utils.unstable_capitalize)(operator.value)}`)
-        }, operator.value))
+        children: currentColumn?.filterOperators?.map(operator => /*#__PURE__*/(0, React.createElement)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
+          native: isBaseSelectNative,
+          key: operator.value,
+          value: operator.value
+        }), operator.label || apiRef.current.getLocaleText(`filterOperator${(0, _utils.unstable_capitalize)(operator.value)}`)))
       }))]
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormValueInput, (0, _extends2.default)({
       variant: "standard",

package/node/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -8,7 +8,6 @@ exports.GridFilterInputBoolean = GridFilterInputBoolean;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
-var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["item", "applyValue", "apiRef", "focusElementRef"];
@@ -26,7 +25,7 @@ function GridFilterInputBoolean(props) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const baseSelectProps = rootProps.slotProps?.baseSelect || {};
   const isSelectNative = baseSelectProps.native ?? true;
-  const OptionComponent = isSelectNative ? 'option' : _MenuItem.default;
+  const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
   const onFilterChange = React.useCallback(event => {
     const value = event.target.value;
     setFilterValueState(value);
@@ -38,6 +37,7 @@ function GridFilterInputBoolean(props) {
     setFilterValueState(item.value || '');
   }, [item.value]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseTextField, (0, _extends2.default)({
+    // TODO: use baseSelect slot
     label: apiRef.current.getLocaleText('filterPanelInputLabel'),
     value: filterValueState,
     onChange: onFilterChange,
@@ -52,15 +52,18 @@ function GridFilterInputBoolean(props) {
     },
     inputRef: focusElementRef
   }, others, rootProps.slotProps?.baseTextField, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
+      native: isSelectNative,
       value: "",
       children: apiRef.current.getLocaleText('filterValueAny')
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
+      native: isSelectNative,
       value: "true",
       children: apiRef.current.getLocaleText('filterValueTrue')
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
+      native: isSelectNative,
       value: "false",
       children: apiRef.current.getLocaleText('filterValueFalse')
-    })]
+    }))]
   }));
 }

package/node/components/panel/filterPanel/GridFilterInputDate.js

@@ -11,7 +11,6 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
-var _icons = require("../../icons");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "InputProps"];
@@ -68,7 +67,7 @@ function GridFilterInputDate(props) {
     },
     inputRef: focusElementRef,
     InputProps: (0, _extends2.default)({}, applying ? {
-      endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.GridLoadIcon, {})
+      endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.loadIcon, {})
     } : {}, InputProps, {
       inputProps: (0, _extends2.default)({
         max: type === 'datetime-local' ? '9999-12-31T23:59' : '9999-12-31'

package/node/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -5,12 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridFilterInputSingleSelect = GridFilterInputSingleSelect;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
-var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _filterPanelUtils = require("./filterPanelUtils");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -18,19 +17,27 @@ const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "g
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const renderSingleSelectOptions = ({
-  valueOptions,
-  field
-}, OptionComponent, getOptionLabel, getOptionValue) => {
+  column: {
+    valueOptions,
+    field
+  },
+  OptionComponent,
+  getOptionLabel,
+  getOptionValue,
+  isSelectNative,
+  baseSelectOptionProps
+}) => {
   const iterableColumnValues = typeof valueOptions === 'function' ? ['', ...valueOptions({
     field
   })] : ['', ...(valueOptions || [])];
   return iterableColumnValues.map(option => {
     const value = getOptionValue(option);
     const label = getOptionLabel(option);
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
-      value: value,
-      children: label
-    }, value);
+    return /*#__PURE__*/(0, React.createElement)(OptionComponent, (0, _extends2.default)({}, baseSelectOptionProps, {
+      native: isSelectNative,
+      key: value,
+      value: value
+    }), label);
   });
 };
 function GridFilterInputSingleSelect(props) {
@@ -49,6 +56,7 @@ function GridFilterInputSingleSelect(props) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const baseSelectProps = rootProps.slotProps?.baseSelect || {};
   const isSelectNative = baseSelectProps.native ?? true;
+  const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
   let resolvedColumn = null;
   if (item.field) {
     const column = apiRef.current.getColumn(item.field);
@@ -100,6 +108,7 @@ function GridFilterInputSingleSelect(props) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({
+    // TODO: use baseSelect slot
     id: id,
     label: apiRef.current.getLocaleText('filterPanelInputLabel'),
     placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
@@ -116,7 +125,14 @@ function GridFilterInputSingleSelect(props) {
       native: isSelectNative
     }, rootProps.slotProps?.baseSelect)
   }, others, rootProps.slotProps?.baseTextField, {
-    children: renderSingleSelectOptions(resolvedColumn, isSelectNative ? 'option' : _MenuItem.default, getOptionLabel, getOptionValue)
+    children: renderSingleSelectOptions({
+      column: resolvedColumn,
+      OptionComponent: rootProps.slots.baseSelectOption,
+      getOptionLabel,
+      getOptionValue,
+      isSelectNative,
+      baseSelectOptionProps
+    })
   }));
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes = {

package/node/components/panel/filterPanel/GridFilterInputValue.js

@@ -11,7 +11,6 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
-var _icons = require("../../icons");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef"];
@@ -57,7 +56,7 @@ function GridFilterInputValue(props) {
     setFilterValueState(String(itemValue));
   }, [item.value]);
   const InputProps = applying ? {
-    endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.GridLoadIcon, {})
+    endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.loadIcon, {})
   } : others.InputProps;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({
     id: id,

package/node/components/panel/filterPanel/GridFilterPanel.js

@@ -57,6 +57,9 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
         currentFilters: filterModel?.items || [],
         columns: filterableColumns
       });
+      if (nextFieldName === null) {
+        return null;
+      }
       nextColumnWithOperator = filterableColumns.find(({
         field
       }) => field === nextFieldName);
@@ -79,6 +82,9 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
       currentFilters: currentFilters,
       columns: filterableColumns
     });
+    if (nextColumnFieldName === null) {
+      return null;
+    }
     const nextColumnWithOperator = filterableColumns.find(({
       field
     }) => field === nextColumnFieldName);
@@ -184,6 +190,7 @@ process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
     columnInputProps: _propTypes.default.any,
     columnsSort: _propTypes.default.oneOf(['asc', 'desc']),
     deleteIconProps: _propTypes.default.any,
+    filterColumns: _propTypes.default.func,
     logicOperatorInputProps: _propTypes.default.any,
     operatorInputProps: _propTypes.default.any,
     valueInputProps: _propTypes.default.any
@@ -191,7 +198,7 @@ process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
   /**
    * Function that returns the next filter item to be picked as default filter.
    * @param {GetColumnForNewFilterArgs} args Currently configured filters and columns.
-   * @returns {GridColDef['field']} The field to be used for the next filter.
+   * @returns {GridColDef['field']} The field to be used for the next filter or `null` to prevent adding a filter.
    */
   getColumnForNewFilter: _propTypes.default.func,
   /**

package/node/components/virtualization/GridVirtualScroller.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _styles = require("@mui/material/styles");
+var _system = require("@mui/system");
 var _utils = require("@mui/utils");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
@@ -26,7 +26,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const VirtualScrollerRoot = (0, _styles.styled)('div', {
+const VirtualScrollerRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'VirtualScroller',
   overridesResolver: (props, styles) => styles.virtualScroller

package/node/components/virtualization/GridVirtualScrollerContent.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _styles = require("@mui/material/styles");
+var _system = require("@mui/system");
 var _utils = require("@mui/utils");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
@@ -27,7 +27,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const VirtualScrollerContentRoot = (0, _styles.styled)('div', {
+const VirtualScrollerContentRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'VirtualScrollerContent',
   overridesResolver: (props, styles) => styles.virtualScrollerContent

package/node/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _styles = require("@mui/material/styles");
+var _system = require("@mui/system");
 var _utils = require("@mui/utils");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
@@ -26,7 +26,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const VirtualScrollerRenderZoneRoot = (0, _styles.styled)('div', {
+const VirtualScrollerRenderZoneRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'VirtualScrollerRenderZone',
   overridesResolver: (props, styles) => styles.virtualScrollerRenderZone