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

package/legacy/components/columnHeaders/{GridColumnHeaders.js → GridBaseColumnHeaders.js}

@@ -4,7 +4,7 @@ var _excluded = ["className"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -21,20 +21,17 @@ var GridColumnHeadersRoot = styled('div', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.columnHeaders;
   }
-})(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    position: 'relative',
-    overflow: 'hidden',
-    display: 'flex',
-    alignItems: 'center',
-    boxSizing: 'border-box',
-    borderBottom: '1px solid',
-    borderTopLeftRadius: theme.shape.borderRadius,
-    borderTopRightRadius: theme.shape.borderRadius
-  };
+})({
+  position: 'relative',
+  overflow: 'hidden',
+  display: 'flex',
+  alignItems: 'center',
+  boxSizing: 'border-box',
+  borderBottom: '1px solid',
+  borderTopLeftRadius: 'var(--unstable_DataGrid-radius)',
+  borderTopRightRadius: 'var(--unstable_DataGrid-radius)'
 });
-export var GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
+export var GridBaseColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
   var className = props.className,
     other = _objectWithoutProperties(props, _excluded);
   var rootProps = useGridRootProps();

package/legacy/components/columnHeaders/GridColumnHeaderTitle.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { isOverflown } from '../../utils/domUtils';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -24,14 +24,11 @@ var GridColumnHeaderTitleRoot = styled('div', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.columnHeaderTitle;
   }
-})(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    fontWeight: theme.typography.fontWeightMedium
-  };
+})({
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  fontWeight: 'var(--unstable_DataGrid-headWeight)'
 });
 var ColumnHeaderInnerTitle = /*#__PURE__*/React.forwardRef(function ColumnHeaderInnerTitle(props, ref) {
   var className = props.className,

package/legacy/components/columnHeaders/GridColumnHeadersInner.js

@@ -5,7 +5,7 @@ var _excluded = ["isDragging", "className"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { gridClasses, getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';

package/legacy/components/columnHeaders/GridIconButtonContainer.js

@@ -4,7 +4,7 @@ var _excluded = ["className"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";

package/legacy/components/containers/GridFooterContainer.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -22,15 +22,12 @@ var GridFooterContainerRoot = styled('div', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.footerContainer;
   }
-})(function () {
-  return {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    minHeight: 52,
-    // Match TablePagination min height
-    borderTop: '1px solid'
-  };
+})({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  minHeight: 52,
+  borderTop: '1px solid'
 });
 var GridFooterContainer = /*#__PURE__*/React.forwardRef(function GridFooterContainer(props, ref) {
   var className = props.className,

package/legacy/components/containers/GridMainContainer.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";

package/legacy/components/containers/GridOverlay.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { alpha, styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -22,17 +22,14 @@ var GridOverlayRoot = styled('div', {
   overridesResolver: function overridesResolver(_, styles) {
     return styles.overlay;
   }
-})(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    width: '100%',
-    height: '100%',
-    display: 'flex',
-    alignSelf: 'center',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.background.defaultChannel, " / ").concat(theme.vars.palette.action.disabledOpacity, ")") : alpha(theme.palette.background.default, theme.palette.action.disabledOpacity)
-  };
+})({
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignSelf: 'center',
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: 'var(--unstable_DataGrid-overlayBackground)'
 });
 var GridOverlay = /*#__PURE__*/React.forwardRef(function GridOverlay(props, ref) {
   var className = props.className,

package/legacy/components/containers/GridRootStyles.js

@@ -22,14 +22,18 @@ export var GridRootStyles = styled('div', {
   var _$concat2, _$concat3, _extends2;
   var theme = _ref57.theme;
   var borderColor = getBorderColor(theme);
+  var radius = theme.shape.borderRadius;
   var gridStyle = _extends({
+    '--unstable_DataGrid-radius': typeof radius === 'number' ? "".concat(radius, "px") : radius,
+    '--unstable_DataGrid-headWeight': theme.typography.fontWeightMedium,
+    '--unstable_DataGrid-overlayBackground': theme.vars ? "rgba(".concat(theme.vars.palette.background.defaultChannel, " / ").concat(theme.vars.palette.action.disabledOpacity, ")") : alpha(theme.palette.background.default, theme.palette.action.disabledOpacity),
     flex: 1,
     boxSizing: 'border-box',
     position: 'relative',
     borderWidth: '1px',
     borderStyle: 'solid',
     borderColor: borderColor,
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: 'var(--unstable_DataGrid-radius)',
     color: (theme.vars || theme).palette.text.primary
   }, theme.typography.body2, (_extends2 = {
     outline: 'none',
@@ -263,12 +267,12 @@ export var GridRootStyles = styled('div', {
   }), _defineProperty(_extends2, "& .".concat(gridClasses['columnHeader--dragging'], ", & .").concat(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
   }), _defineProperty(_extends2, "& .".concat(gridClasses['row--dragging']), _defineProperty({
     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
   }, "& .".concat(gridClasses.rowReorderCellPlaceholder), {
     display: 'flex'

package/legacy/components/containers/GridToolbarContainer.js

@@ -4,7 +4,7 @@ var _excluded = ["className", "children"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';

package/legacy/components/index.js

@@ -3,7 +3,7 @@ export * from './cell';
 export * from './containers';
 export * from './columnHeaders';
 export * from './columnSelection';
-export * from './icons';
+export * from '../material/icons';
 export * from './menu';
 export * from './panel';
 export * from './toolbar';

package/legacy/components/panel/GridColumnsPanel.js

@@ -14,7 +14,6 @@ import { styled } from '@mui/material/styles';
 import { gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector } from '../../hooks/features/columns/gridColumnsSelector';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { GridDragIcon } from '../icons';
 import { GridPanelContent } from './GridPanelContent';
 import { GridPanelFooter } from './GridPanelFooter';
 import { GridPanelHeader } from './GridPanelHeader';
@@ -184,7 +183,7 @@ function GridColumnsPanel(props) {
               title: apiRef.current.getLocaleText('columnsPanelDragIconLabel'),
               size: "small",
               disabled: true,
-              children: /*#__PURE__*/_jsx(GridDragIcon, {})
+              children: /*#__PURE__*/_jsx(rootProps.slots.columnReorderIcon, {})
             })]
           }, column.field);
         })

package/legacy/components/panel/GridPanelContent.js

@@ -4,7 +4,7 @@ var _excluded = ["className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';

package/legacy/components/panel/GridPanelFooter.js

@@ -4,7 +4,7 @@ var _excluded = ["className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';

package/legacy/components/panel/GridPanelHeader.js

@@ -4,7 +4,7 @@ var _excluded = ["className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';

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

@@ -5,9 +5,6 @@ var _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChang
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useId as useId, unstable_capitalize as capitalize } from '@mui/utils';
-import MenuItem from '@mui/material/MenuItem';
-import InputLabel from '@mui/material/InputLabel';
-import FormControl from '@mui/material/FormControl';
 import { styled } from '@mui/material/styles';
 import clsx from 'clsx';
 import { gridFilterableColumnDefinitionsSelector } from '../../../hooks/features/columns/gridColumnsSelector';
@@ -18,6 +15,7 @@ import { useGridApiContext } from '../../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
@@ -44,7 +42,7 @@ var GridFilterFormRoot = styled('div', {
     padding: theme.spacing(1)
   };
 });
-var FilterFormDeleteIcon = styled(FormControl, {
+var FilterFormDeleteIcon = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormDeleteIcon',
   overridesResolver: function overridesResolver(_, styles) {
@@ -59,7 +57,7 @@ var FilterFormDeleteIcon = styled(FormControl, {
     marginBottom: theme.spacing(0.2)
   };
 });
-var FilterFormLogicOperatorInput = styled(FormControl, {
+var FilterFormLogicOperatorInput = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormLogicOperatorInput',
   overridesResolver: function overridesResolver(_, styles) {
@@ -70,7 +68,7 @@ var FilterFormLogicOperatorInput = styled(FormControl, {
   marginRight: 5,
   justifyContent: 'end'
 });
-var FilterFormColumnInput = styled(FormControl, {
+var FilterFormColumnInput = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormColumnInput',
   overridesResolver: function overridesResolver(_, styles) {
@@ -79,7 +77,7 @@ var FilterFormColumnInput = styled(FormControl, {
 })({
   width: 150
 });
-var FilterFormOperatorInput = styled(FormControl, {
+var FilterFormOperatorInput = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormOperatorInput',
   overridesResolver: function overridesResolver(_, styles) {
@@ -88,7 +86,7 @@ var FilterFormOperatorInput = styled(FormControl, {
 })({
   width: 120
 });
-var FilterFormValueInput = styled(FormControl, {
+var FilterFormValueInput = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormValueInput',
   overridesResolver: function overridesResolver(_, styles) {
@@ -112,7 +110,7 @@ var getColumnLabel = function getColumnLabel(col) {
 };
 var collator = new Intl.Collator();
 var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props, ref) {
-  var _rootProps$slotProps, _rootProps$slotProps2, _baseSelectProps$nati, _rootProps$slotProps3, _rootProps$slotProps4, _rootProps$slotProps5, _rootProps$slotProps6, _currentColumn$filter2;
+  var _rootProps$slotProps, _rootProps$slotProps2, _baseSelectProps$nati, _rootProps$slotProps3, _rootProps$slotProps4, _rootProps$slotProps5, _rootProps$slotProps6, _rootProps$slotProps7, _rootProps$slotProps8, _currentColumn$filter2;
   var item = props.item,
     hasMultipleFilters = props.hasMultipleFilters,
     deleteFilter = props.deleteFilter,
@@ -153,7 +151,8 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
   var baseFormControlProps = ((_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseFormControl) || {};
   var baseSelectProps = ((_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseSelect) || {};
   var isBaseSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
-  var OptionComponent = isBaseSelectNative ? 'option' : MenuItem;
+  var baseInputLabelProps = ((_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseInputLabel) || {};
+  var baseSelectOptionProps = ((_rootProps$slotProps4 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps4.baseSelectOption) || {};
   var InputComponentProps = valueInputProps.InputComponentProps,
     valueInputPropsOther = _objectWithoutProperties(valueInputProps, _excluded2);
   var filteredColumns = React.useMemo(function () {
@@ -272,7 +271,7 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
         title: apiRef.current.getLocaleText('filterPanelDeleteIconLabel'),
         onClick: handleDeleteFilter,
         size: "small"
-      }, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseIconButton, {
+      }, (_rootProps$slotProps5 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps5.baseIconButton, {
         children: /*#__PURE__*/_jsx(rootProps.slots.filterPanelDeleteIcon, {
           fontSize: "small"
         })
@@ -295,12 +294,13 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
         onChange: changeLogicOperator,
         disabled: !!disableMultiFilterOperator || logicOperators.length === 1,
         native: isBaseSelectNative
-      }, (_rootProps$slotProps4 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps4.baseSelect, {
+      }, (_rootProps$slotProps6 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps6.baseSelect, {
         children: logicOperators.map(function (logicOperator) {
-          return /*#__PURE__*/_jsx(OptionComponent, {
-            value: logicOperator.toString(),
-            children: apiRef.current.getLocaleText(getLogicOperatorLocaleKey(logicOperator))
-          }, logicOperator.toString());
+          return /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+            native: isBaseSelectNative,
+            key: logicOperator.toString(),
+            value: logicOperator.toString()
+          }), apiRef.current.getLocaleText(getLogicOperatorLocaleKey(logicOperator)));
         })
       }))
     })), /*#__PURE__*/_jsxs(FilterFormColumnInput, _extends({
@@ -309,23 +309,24 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
     }, baseFormControlProps, columnInputProps, {
       className: clsx(classes.columnInput, baseFormControlProps.className, columnInputProps.className),
       ownerState: rootProps,
-      children: [/*#__PURE__*/_jsx(InputLabel, {
+      children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, baseInputLabelProps, {
         htmlFor: columnSelectId,
         id: columnSelectLabelId,
         children: apiRef.current.getLocaleText('filterPanelColumns')
-      }), /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
+      })), /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
         labelId: columnSelectLabelId,
         id: columnSelectId,
         label: apiRef.current.getLocaleText('filterPanelColumns'),
         value: item.field || '',
         onChange: changeColumn,
         native: isBaseSelectNative
-      }, (_rootProps$slotProps5 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps5.baseSelect, {
+      }, (_rootProps$slotProps7 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps7.baseSelect, {
         children: sortedFilteredColumns.map(function (col) {
-          return /*#__PURE__*/_jsx(OptionComponent, {
-            value: col.field,
-            children: getColumnLabel(col)
-          }, col.field);
+          return /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+            native: isBaseSelectNative,
+            key: col.field,
+            value: col.field
+          }), getColumnLabel(col));
         })
       }))]
     })), /*#__PURE__*/_jsxs(FilterFormOperatorInput, _extends({
@@ -334,11 +335,11 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
     }, baseFormControlProps, operatorInputProps, {
       className: clsx(classes.operatorInput, baseFormControlProps.className, operatorInputProps.className),
       ownerState: rootProps,
-      children: [/*#__PURE__*/_jsx(InputLabel, {
+      children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, baseInputLabelProps, {
         htmlFor: operatorSelectId,
         id: operatorSelectLabelId,
         children: apiRef.current.getLocaleText('filterPanelOperator')
-      }), /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
+      })), /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
         labelId: operatorSelectLabelId,
         label: apiRef.current.getLocaleText('filterPanelOperator'),
         id: operatorSelectId,
@@ -346,12 +347,13 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
         onChange: changeOperator,
         native: isBaseSelectNative,
         inputRef: filterSelectorRef
-      }, (_rootProps$slotProps6 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps6.baseSelect, {
+      }, (_rootProps$slotProps8 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps8.baseSelect, {
         children: currentColumn == null ? void 0 : (_currentColumn$filter2 = currentColumn.filterOperators) == null ? void 0 : _currentColumn$filter2.map(function (operator) {
-          return /*#__PURE__*/_jsx(OptionComponent, {
-            value: operator.value,
-            children: operator.label || apiRef.current.getLocaleText("filterOperator".concat(capitalize(operator.value)))
-          }, operator.value);
+          return /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+            native: isBaseSelectNative,
+            key: operator.value,
+            value: operator.value
+          }), operator.label || apiRef.current.getLocaleText("filterOperator".concat(capitalize(operator.value))));
         })
       }))]
     })), /*#__PURE__*/_jsx(FilterFormValueInput, _extends({

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

@@ -3,12 +3,11 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["item", "applyValue", "apiRef", "focusElementRef"];
 import * as React from 'react';
-import MenuItem from '@mui/material/MenuItem';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export function GridFilterInputBoolean(props) {
-  var _rootProps$slotProps, _baseSelectProps$nati, _rootProps$slotProps2, _rootProps$slotProps3;
+  var _rootProps$slotProps, _baseSelectProps$nati, _rootProps$slotProps2, _rootProps$slotProps3, _rootProps$slotProps4;
   var item = props.item,
     applyValue = props.applyValue,
     apiRef = props.apiRef,
@@ -21,7 +20,7 @@ export function GridFilterInputBoolean(props) {
   var rootProps = useGridRootProps();
   var baseSelectProps = ((_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseSelect) || {};
   var isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
-  var OptionComponent = isSelectNative ? 'option' : MenuItem;
+  var baseSelectOptionProps = ((_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseSelectOption) || {};
   var onFilterChange = React.useCallback(function (event) {
     var value = event.target.value;
     setFilterValueState(value);
@@ -33,6 +32,7 @@ export function GridFilterInputBoolean(props) {
     setFilterValueState(item.value || '');
   }, [item.value]);
   return /*#__PURE__*/_jsxs(rootProps.slots.baseTextField, _extends({
+    // TODO: use baseSelect slot
     label: apiRef.current.getLocaleText('filterPanelInputLabel'),
     value: filterValueState,
     onChange: onFilterChange,
@@ -41,21 +41,24 @@ export function GridFilterInputBoolean(props) {
     SelectProps: _extends({
       native: isSelectNative,
       displayEmpty: true
-    }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseSelect),
+    }, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseSelect),
     InputLabelProps: {
       shrink: true
     },
     inputRef: focusElementRef
-  }, others, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseTextField, {
-    children: [/*#__PURE__*/_jsx(OptionComponent, {
+  }, others, (_rootProps$slotProps4 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps4.baseTextField, {
+    children: [/*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+      native: isSelectNative,
       value: "",
       children: apiRef.current.getLocaleText('filterValueAny')
-    }), /*#__PURE__*/_jsx(OptionComponent, {
+    })), /*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+      native: isSelectNative,
       value: "true",
       children: apiRef.current.getLocaleText('filterValueTrue')
-    }), /*#__PURE__*/_jsx(OptionComponent, {
+    })), /*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+      native: isSelectNative,
       value: "false",
       children: apiRef.current.getLocaleText('filterValueFalse')
-    })]
+    }))]
   }));
 }

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

@@ -5,7 +5,6 @@ var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "Inp
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
-import { GridLoadIcon } from '../../icons';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var SUBMIT_FILTER_DATE_STROKE_TIME = 500;
@@ -64,7 +63,7 @@ function GridFilterInputDate(props) {
     },
     inputRef: focusElementRef,
     InputProps: _extends({}, applying ? {
-      endAdornment: /*#__PURE__*/_jsx(GridLoadIcon, {})
+      endAdornment: /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {})
     } : {}, InputProps, {
       inputProps: _extends({
         max: type === 'datetime-local' ? '9999-12-31T23:59' : '9999-12-31'

package/legacy/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.js

@@ -72,8 +72,8 @@ function GridFilterInputMultipleSingleSelect(props) {
     if (resolvedValueOptions !== undefined) {
       var itemValueIndexes = item.value.map(function (element) {
         // Gets the index matching between values and valueOptions
-        return resolvedFormattedValueOptions == null ? void 0 : resolvedFormattedValueOptions.findIndex(function (formatedOption) {
-          return formatedOption === element;
+        return resolvedFormattedValueOptions == null ? void 0 : resolvedFormattedValueOptions.findIndex(function (formattedOption) {
+          return formattedOption === element;
         });
       });
       return itemValueIndexes.filter(function (index) {

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

@@ -1,32 +1,39 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "getOptionLabel", "getOptionValue"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
-import MenuItem from '@mui/material/MenuItem';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { getValueFromValueOptions, isSingleSelectColDef } from './filterPanelUtils';
+import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-var renderSingleSelectOptions = function renderSingleSelectOptions(_ref, OptionComponent, getOptionLabel, getOptionValue) {
-  var valueOptions = _ref.valueOptions,
-    field = _ref.field;
+var renderSingleSelectOptions = function renderSingleSelectOptions(_ref) {
+  var _ref$column = _ref.column,
+    valueOptions = _ref$column.valueOptions,
+    field = _ref$column.field,
+    OptionComponent = _ref.OptionComponent,
+    getOptionLabel = _ref.getOptionLabel,
+    getOptionValue = _ref.getOptionValue,
+    isSelectNative = _ref.isSelectNative,
+    baseSelectOptionProps = _ref.baseSelectOptionProps;
   var iterableColumnValues = typeof valueOptions === 'function' ? [''].concat(_toConsumableArray(valueOptions({
     field: field
   }))) : [''].concat(_toConsumableArray(valueOptions || []));
   return iterableColumnValues.map(function (option) {
     var value = getOptionValue(option);
     var label = getOptionLabel(option);
-    return /*#__PURE__*/_jsx(OptionComponent, {
-      value: value,
-      children: label
-    }, value);
+    return /*#__PURE__*/_createElement(OptionComponent, _extends({}, baseSelectOptionProps, {
+      native: isSelectNative,
+      key: value,
+      value: value
+    }), label);
   });
 };
 function GridFilterInputSingleSelect(props) {
-  var _item$value, _rootProps$slotProps, _baseSelectProps$nati, _resolvedColumn, _resolvedColumn2, _rootProps$slotProps2, _rootProps$slotProps3;
+  var _item$value, _rootProps$slotProps, _baseSelectProps$nati, _rootProps$slotProps2, _resolvedColumn, _resolvedColumn2, _rootProps$slotProps3, _rootProps$slotProps4;
   var item = props.item,
     applyValue = props.applyValue,
     type = props.type,
@@ -43,6 +50,7 @@ function GridFilterInputSingleSelect(props) {
   var rootProps = useGridRootProps();
   var baseSelectProps = ((_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseSelect) || {};
   var isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
+  var baseSelectOptionProps = ((_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseSelectOption) || {};
   var resolvedColumn = null;
   if (item.field) {
     var column = apiRef.current.getColumn(item.field);
@@ -95,6 +103,7 @@ function GridFilterInputSingleSelect(props) {
     return null;
   }
   return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
+    // TODO: use baseSelect slot
     id: id,
     label: apiRef.current.getLocaleText('filterPanelInputLabel'),
     placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
@@ -109,9 +118,16 @@ function GridFilterInputSingleSelect(props) {
     select: true,
     SelectProps: _extends({
       native: isSelectNative
-    }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseSelect)
-  }, others, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseTextField, {
-    children: renderSingleSelectOptions(resolvedColumn, isSelectNative ? 'option' : MenuItem, getOptionLabel, getOptionValue)
+    }, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseSelect)
+  }, others, (_rootProps$slotProps4 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps4.baseTextField, {
+    children: renderSingleSelectOptions({
+      column: resolvedColumn,
+      OptionComponent: rootProps.slots.baseSelectOption,
+      getOptionLabel: getOptionLabel,
+      getOptionValue: getOptionValue,
+      isSelectNative: isSelectNative,
+      baseSelectOptionProps: baseSelectOptionProps
+    })
   }));
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes = {