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

package/modern/components/menu/GridMenu.js

@@ -52,10 +52,7 @@ function GridMenu(props) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   React.useEffect(() => {
     // Emit menuOpen or menuClose events
     const eventName = open ? 'menuOpen' : 'menuClose';
@@ -72,13 +69,14 @@ function GridMenu(props) {
     }
   };
   return /*#__PURE__*/_jsx(GridMenuRoot, _extends({
-    as: rootProps.components.BasePopper,
+    as: rootProps.slots.basePopper,
     className: clsx(className, classes.root),
+    ownerState: rootProps,
     open: open,
     anchorEl: target,
     transition: true,
     placement: position
-  }, other, rootProps.componentsProps?.basePopper, {
+  }, other, rootProps.slotProps?.basePopper, {
     children: ({
       TransitionProps,
       placement

package/modern/components/menu/columnMenu/menuItems/GridColumnMenuFilterItem.js

@@ -24,7 +24,7 @@ function GridColumnMenuFilterItem(props) {
   return /*#__PURE__*/_jsxs(MenuItem, {
     onClick: showFilter,
     children: [/*#__PURE__*/_jsx(ListItemIcon, {
-      children: /*#__PURE__*/_jsx(rootProps.components.ColumnMenuFilterIcon, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuFilterIcon, {
         fontSize: "small"
       })
     }), /*#__PURE__*/_jsx(ListItemText, {

package/modern/components/menu/columnMenu/menuItems/GridColumnMenuHideItem.js

@@ -41,7 +41,7 @@ function GridColumnMenuHideItem(props) {
     onClick: toggleColumn,
     disabled: disabled,
     children: [/*#__PURE__*/_jsx(ListItemIcon, {
-      children: /*#__PURE__*/_jsx(rootProps.components.ColumnMenuHideIcon, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuHideIcon, {
         fontSize: "small"
       })
     }), /*#__PURE__*/_jsx(ListItemText, {

package/modern/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.js

@@ -24,7 +24,7 @@ function GridColumnMenuManageItem(props) {
   return /*#__PURE__*/_jsxs(MenuItem, {
     onClick: showColumns,
     children: [/*#__PURE__*/_jsx(ListItemIcon, {
-      children: /*#__PURE__*/_jsx(rootProps.components.ColumnMenuManageColumnsIcon, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuManageColumnsIcon, {
         fontSize: "small"
       })
     }), /*#__PURE__*/_jsx(ListItemText, {

package/modern/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.js

@@ -38,7 +38,7 @@ function GridColumnMenuSortItem(props) {
       onClick: onSortMenuItemClick,
       "data-value": "asc",
       children: [/*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(rootProps.components.ColumnMenuSortAscendingIcon, {
+        children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuSortAscendingIcon, {
           fontSize: "small"
         })
       }), /*#__PURE__*/_jsx(ListItemText, {
@@ -48,7 +48,7 @@ function GridColumnMenuSortItem(props) {
       onClick: onSortMenuItemClick,
       "data-value": "desc",
       children: [/*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(rootProps.components.ColumnMenuSortDescendingIcon, {
+        children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuSortDescendingIcon, {
           fontSize: "small"
         })
       }), /*#__PURE__*/_jsx(ListItemText, {

package/modern/components/panel/GridColumnsPanel.js

@@ -11,7 +11,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';
@@ -35,9 +34,9 @@ const GridColumnsPanelRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnsPanel',
   overridesResolver: (props, styles) => styles.columnsPanel
-})(() => ({
+})({
   padding: '8px 0px 8px 8px'
-}));
+});
 const GridColumnsPanelRowRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnsPanelRow',
@@ -66,10 +65,7 @@ function GridColumnsPanel(props) {
   const columnVisibilityModel = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
   const rootProps = useGridRootProps();
   const [searchValue, setSearchValue] = React.useState('');
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   const {
       sort,
       searchPredicate = defaultSearchPredicate,
@@ -137,7 +133,7 @@ function GridColumnsPanel(props) {
   };
   return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({}, other, {
     children: [/*#__PURE__*/_jsx(GridPanelHeader, {
-      children: /*#__PURE__*/_jsx(rootProps.components.BaseTextField, _extends({
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
         label: apiRef.current.getLocaleText('columnsPanelTextFieldLabel'),
         placeholder: apiRef.current.getLocaleText('columnsPanelTextFieldPlaceholder'),
         inputRef: searchInputRef,
@@ -145,21 +141,23 @@ function GridColumnsPanel(props) {
         onChange: handleSearchValueChange,
         variant: "standard",
         fullWidth: true
-      }, rootProps.componentsProps?.baseTextField))
+      }, rootProps.slotProps?.baseTextField))
     }), /*#__PURE__*/_jsx(GridPanelContent, {
       children: /*#__PURE__*/_jsx(GridColumnsPanelRoot, {
         className: classes.root,
+        ownerState: rootProps,
         children: currentColumns.map(column => /*#__PURE__*/_jsxs(GridColumnsPanelRowRoot, {
           className: classes.columnsPanelRow,
+          ownerState: rootProps,
           children: [/*#__PURE__*/_jsx(FormControlLabel, {
-            control: /*#__PURE__*/_jsx(rootProps.components.BaseSwitch, _extends({
+            control: /*#__PURE__*/_jsx(rootProps.slots.baseSwitch, _extends({
               disabled: column.hideable === false,
               checked: columnVisibilityModel[column.field] !== false,
               onClick: toggleColumn,
               name: column.field,
               size: "small",
               inputRef: isFirstHideableColumn(column) ? firstSwitchRef : undefined
-            }, rootProps.componentsProps?.baseSwitch)),
+            }, rootProps.slotProps?.baseSwitch)),
             label: column.headerName || column.field
           }), !rootProps.disableColumnReorder && GRID_EXPERIMENTAL_ENABLED && /*#__PURE__*/_jsx(GridIconButtonRoot, {
             draggable: true,
@@ -167,19 +165,19 @@ function GridColumnsPanel(props) {
             title: apiRef.current.getLocaleText('columnsPanelDragIconLabel'),
             size: "small",
             disabled: true,
-            children: /*#__PURE__*/_jsx(GridDragIcon, {})
+            children: /*#__PURE__*/_jsx(rootProps.slots.columnReorderIcon, {})
           })]
         }, column.field))
       })
     }), disableShowAllButton && disableHideAllButton ? null : /*#__PURE__*/_jsxs(GridPanelFooter, {
-      children: [!disableHideAllButton ? /*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
+      children: [!disableHideAllButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
         onClick: () => toggleAllColumns(false)
-      }, rootProps.componentsProps?.baseButton, {
+      }, rootProps.slotProps?.baseButton, {
         disabled: disableHideAllButton,
         children: apiRef.current.getLocaleText('columnsPanelHideAllButton')
-      })) : /*#__PURE__*/_jsx("span", {}), !disableShowAllButton ? /*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
+      })) : /*#__PURE__*/_jsx("span", {}), !disableShowAllButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
         onClick: () => toggleAllColumns(true)
-      }, rootProps.componentsProps?.baseButton, {
+      }, rootProps.slotProps?.baseButton, {
         disabled: disableShowAllButton,
         children: apiRef.current.getLocaleText('columnsPanelShowAllButton')
       })) : null]

package/modern/components/panel/GridPanel.js

@@ -12,6 +12,7 @@ import Popper from '@mui/material/Popper';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { isEscapeKey } from '../../utils/keyboardUtils';
 import { gridClasses } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const gridPanelClasses = generateUtilityClasses('MuiDataGrid', ['panel', 'paper']);
 const GridPanelRoot = styled(Popper, {
@@ -42,6 +43,7 @@ const GridPanel = /*#__PURE__*/React.forwardRef((props, ref) => {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
   const classes = gridPanelClasses;
   const [isPlaced, setIsPlaced] = React.useState(false);
   const handleClickAway = React.useCallback(() => {
@@ -80,6 +82,7 @@ const GridPanel = /*#__PURE__*/React.forwardRef((props, ref) => {
     ref: ref,
     placement: "bottom-start",
     className: clsx(className, classes.panel),
+    ownerState: rootProps,
     anchorEl: anchorEl,
     modifiers: modifiers
   }, other, {
@@ -88,6 +91,7 @@ const GridPanel = /*#__PURE__*/React.forwardRef((props, ref) => {
       onClickAway: handleClickAway,
       children: /*#__PURE__*/_jsx(GridPaperRoot, {
         className: classes.paper,
+        ownerState: rootProps,
         elevation: 8,
         onKeyDown: handleKeyDown,
         children: isPlaced && children

package/modern/components/panel/GridPanelContent.js

@@ -4,7 +4,7 @@ const _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';
@@ -35,12 +35,10 @@ function GridPanelContent(props) {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridPanelContentRoot, _extends({
-    className: clsx(className, classes.root)
+    className: clsx(className, classes.root),
+    ownerState: rootProps
   }, other));
 }
 process.env.NODE_ENV !== "production" ? GridPanelContent.propTypes = {

package/modern/components/panel/GridPanelFooter.js

@@ -4,7 +4,7 @@ const _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';
@@ -35,12 +35,10 @@ function GridPanelFooter(props) {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridPanelFooterRoot, _extends({
-    className: clsx(className, classes.root)
+    className: clsx(className, classes.root),
+    ownerState: rootProps
   }, other));
 }
 process.env.NODE_ENV !== "production" ? GridPanelFooter.propTypes = {

package/modern/components/panel/GridPanelHeader.js

@@ -4,7 +4,7 @@ const _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';
@@ -33,12 +33,10 @@ function GridPanelHeader(props) {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridPanelHeaderRoot, _extends({
-    className: clsx(className, classes.root)
+    className: clsx(className, classes.root),
+    ownerState: rootProps
   }, other));
 }
 process.env.NODE_ENV !== "production" ? GridPanelHeader.propTypes = {

package/modern/components/panel/GridPanelWrapper.js

@@ -39,10 +39,7 @@ const GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(TrapFocus, _extends({
     open: true,
     disableEnforceFocus: true,
@@ -51,7 +48,8 @@ const GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper
     children: /*#__PURE__*/_jsx(GridPanelWrapperRoot, _extends({
       ref: ref,
       tabIndex: -1,
-      className: clsx(className, classes.root)
+      className: clsx(className, classes.root),
+      ownerState: rootProps
     }, other))
   }));
 });

package/modern/components/panel/GridPreferencesPanel.js

@@ -13,11 +13,11 @@ export const GridPreferencesPanel = /*#__PURE__*/React.forwardRef(function GridP
   const rootProps = useGridRootProps();
   const preferencePanelState = useGridSelector(apiRef, gridPreferencePanelStateSelector);
   const panelContent = apiRef.current.unstable_applyPipeProcessors('preferencePanel', null, preferencePanelState.openedPanelValue ?? GridPreferencePanelsValue.filters);
-  return /*#__PURE__*/_jsx(rootProps.components.Panel, _extends({
+  return /*#__PURE__*/_jsx(rootProps.slots.panel, _extends({
     ref: ref,
-    as: rootProps.components.BasePopper,
+    as: rootProps.slots.basePopper,
     open: columns.length > 0 && preferencePanelState.open
-  }, rootProps.componentsProps?.panel, props, rootProps.componentsProps?.basePopper, {
+  }, rootProps.slotProps?.panel, props, rootProps.slotProps?.basePopper, {
     children: panelContent
   }));
 });

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

@@ -5,9 +5,6 @@ const _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterCha
 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";
 const useUtilityClasses = ownerState => {
   const {
@@ -43,7 +41,7 @@ const GridFilterFormRoot = styled('div', {
   display: 'flex',
   padding: theme.spacing(1)
 }));
-const FilterFormDeleteIcon = styled(FormControl, {
+const FilterFormDeleteIcon = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormDeleteIcon',
   overridesResolver: (_, styles) => styles.filterFormDeleteIcon
@@ -55,7 +53,7 @@ const FilterFormDeleteIcon = styled(FormControl, {
   marginRight: theme.spacing(0.5),
   marginBottom: theme.spacing(0.2)
 }));
-const FilterFormLogicOperatorInput = styled(FormControl, {
+const FilterFormLogicOperatorInput = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormLogicOperatorInput',
   overridesResolver: (_, styles) => styles.filterFormLogicOperatorInput
@@ -64,21 +62,21 @@ const FilterFormLogicOperatorInput = styled(FormControl, {
   marginRight: 5,
   justifyContent: 'end'
 });
-const FilterFormColumnInput = styled(FormControl, {
+const FilterFormColumnInput = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormColumnInput',
   overridesResolver: (_, styles) => styles.filterFormColumnInput
 })({
   width: 150
 });
-const FilterFormOperatorInput = styled(FormControl, {
+const FilterFormOperatorInput = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormOperatorInput',
   overridesResolver: (_, styles) => styles.filterFormOperatorInput
 })({
   width: 120
 });
-const FilterFormValueInput = styled(FormControl, {
+const FilterFormValueInput = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormValueInput',
   overridesResolver: (_, styles) => styles.filterFormValueInput
@@ -126,17 +124,15 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
   const operatorSelectId = useId();
   const operatorSelectLabelId = useId();
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   const valueRef = React.useRef(null);
   const filterSelectorRef = React.useRef(null);
   const hasLogicOperatorColumn = hasMultipleFilters && logicOperators.length > 0;
-  const baseFormControlProps = rootProps.componentsProps?.baseFormControl || {};
-  const baseSelectProps = rootProps.componentsProps?.baseSelect || {};
+  const baseFormControlProps = rootProps.slotProps?.baseFormControl || {};
+  const baseSelectProps = rootProps.slotProps?.baseSelect || {};
   const isBaseSelectNative = baseSelectProps.native ?? true;
-  const OptionComponent = isBaseSelectNative ? 'option' : MenuItem;
+  const baseInputLabelProps = rootProps.slotProps?.baseInputLabel || {};
+  const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
   const {
       InputComponentProps
     } = valueInputProps,
@@ -227,33 +223,36 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
   return /*#__PURE__*/_jsxs(GridFilterFormRoot, _extends({
     ref: ref,
     className: classes.root,
-    "data-id": item.id
+    "data-id": item.id,
+    ownerState: rootProps
   }, other, {
     children: [/*#__PURE__*/_jsx(FilterFormDeleteIcon, _extends({
       variant: "standard",
-      as: rootProps.components.BaseFormControl
+      as: rootProps.slots.baseFormControl
     }, baseFormControlProps, deleteIconProps, {
       className: clsx(classes.deleteIcon, baseFormControlProps.className, deleteIconProps.className),
-      children: /*#__PURE__*/_jsx(rootProps.components.BaseIconButton, _extends({
+      ownerState: rootProps,
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
         "aria-label": apiRef.current.getLocaleText('filterPanelDeleteIconLabel'),
         title: apiRef.current.getLocaleText('filterPanelDeleteIconLabel'),
         onClick: handleDeleteFilter,
         size: "small"
-      }, rootProps.componentsProps?.baseIconButton, {
-        children: /*#__PURE__*/_jsx(rootProps.components.FilterPanelDeleteIcon, {
+      }, rootProps.slotProps?.baseIconButton, {
+        children: /*#__PURE__*/_jsx(rootProps.slots.filterPanelDeleteIcon, {
           fontSize: "small"
         })
       }))
     })), /*#__PURE__*/_jsx(FilterFormLogicOperatorInput, _extends({
       variant: "standard",
-      as: rootProps.components.BaseFormControl
+      as: rootProps.slots.baseFormControl
     }, baseFormControlProps, logicOperatorInputProps, {
       sx: _extends({
         display: hasLogicOperatorColumn ? 'flex' : 'none',
         visibility: showMultiFilterOperators ? 'visible' : 'hidden'
       }, baseFormControlProps.sx || {}, logicOperatorInputProps.sx || {}),
       className: clsx(classes.logicOperatorInput, baseFormControlProps.className, logicOperatorInputProps.className),
-      children: /*#__PURE__*/_jsx(rootProps.components.BaseSelect, _extends({
+      ownerState: rootProps,
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
         inputProps: {
           'aria-label': apiRef.current.getLocaleText('filterPanelLogicOperator')
         },
@@ -261,44 +260,48 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         onChange: changeLogicOperator,
         disabled: !!disableMultiFilterOperator || logicOperators.length === 1,
         native: isBaseSelectNative
-      }, rootProps.componentsProps?.baseSelect, {
-        children: logicOperators.map(logicOperator => /*#__PURE__*/_jsx(OptionComponent, {
-          value: logicOperator.toString(),
-          children: apiRef.current.getLocaleText(getLogicOperatorLocaleKey(logicOperator))
-        }, logicOperator.toString()))
+      }, rootProps.slotProps?.baseSelect, {
+        children: logicOperators.map(logicOperator => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+          native: isBaseSelectNative,
+          key: logicOperator.toString(),
+          value: logicOperator.toString()
+        }), apiRef.current.getLocaleText(getLogicOperatorLocaleKey(logicOperator))))
       }))
     })), /*#__PURE__*/_jsxs(FilterFormColumnInput, _extends({
       variant: "standard",
-      as: rootProps.components.BaseFormControl
+      as: rootProps.slots.baseFormControl
     }, baseFormControlProps, columnInputProps, {
       className: clsx(classes.columnInput, baseFormControlProps.className, columnInputProps.className),
-      children: [/*#__PURE__*/_jsx(InputLabel, {
+      ownerState: rootProps,
+      children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, baseInputLabelProps, {
         htmlFor: columnSelectId,
         id: columnSelectLabelId,
         children: apiRef.current.getLocaleText('filterPanelColumns')
-      }), /*#__PURE__*/_jsx(rootProps.components.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.componentsProps?.baseSelect, {
-        children: sortedFilteredColumns.map(col => /*#__PURE__*/_jsx(OptionComponent, {
-          value: col.field,
-          children: getColumnLabel(col)
-        }, col.field))
+      }, rootProps.slotProps?.baseSelect, {
+        children: sortedFilteredColumns.map(col => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+          native: isBaseSelectNative,
+          key: col.field,
+          value: col.field
+        }), getColumnLabel(col)))
       }))]
     })), /*#__PURE__*/_jsxs(FilterFormOperatorInput, _extends({
       variant: "standard",
-      as: rootProps.components.BaseFormControl
+      as: rootProps.slots.baseFormControl
     }, baseFormControlProps, operatorInputProps, {
       className: clsx(classes.operatorInput, baseFormControlProps.className, operatorInputProps.className),
-      children: [/*#__PURE__*/_jsx(InputLabel, {
+      ownerState: rootProps,
+      children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, baseInputLabelProps, {
         htmlFor: operatorSelectId,
         id: operatorSelectLabelId,
         children: apiRef.current.getLocaleText('filterPanelOperator')
-      }), /*#__PURE__*/_jsx(rootProps.components.BaseSelect, _extends({
+      })), /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
         labelId: operatorSelectLabelId,
         label: apiRef.current.getLocaleText('filterPanelOperator'),
         id: operatorSelectId,
@@ -306,17 +309,19 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         onChange: changeOperator,
         native: isBaseSelectNative,
         inputRef: filterSelectorRef
-      }, rootProps.componentsProps?.baseSelect, {
-        children: currentColumn?.filterOperators?.map(operator => /*#__PURE__*/_jsx(OptionComponent, {
-          value: operator.value,
-          children: operator.label || apiRef.current.getLocaleText(`filterOperator${capitalize(operator.value)}`)
-        }, operator.value))
+      }, rootProps.slotProps?.baseSelect, {
+        children: currentColumn?.filterOperators?.map(operator => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+          native: isBaseSelectNative,
+          key: operator.value,
+          value: operator.value
+        }), operator.label || apiRef.current.getLocaleText(`filterOperator${capitalize(operator.value)}`)))
       }))]
     })), /*#__PURE__*/_jsx(FilterFormValueInput, _extends({
       variant: "standard",
-      as: rootProps.components.BaseFormControl
+      as: rootProps.slots.baseFormControl
     }, baseFormControlProps, valueInputPropsOther, {
       className: clsx(classes.valueInput, baseFormControlProps.className, valueInputPropsOther.className),
+      ownerState: rootProps,
       children: currentOperator?.InputComponent ? /*#__PURE__*/_jsx(currentOperator.InputComponent, _extends({
         apiRef: apiRef,
         item: item,

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

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _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";
@@ -16,9 +15,9 @@ export function GridFilterInputBoolean(props) {
     others = _objectWithoutPropertiesLoose(props, _excluded);
   const [filterValueState, setFilterValueState] = React.useState(item.value || '');
   const rootProps = useGridRootProps();
-  const baseSelectProps = rootProps.componentsProps?.baseSelect || {};
+  const baseSelectProps = rootProps.slotProps?.baseSelect || {};
   const isSelectNative = baseSelectProps.native ?? true;
-  const OptionComponent = isSelectNative ? 'option' : MenuItem;
+  const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
   const onFilterChange = React.useCallback(event => {
     const value = event.target.value;
     setFilterValueState(value);
@@ -29,7 +28,8 @@ export function GridFilterInputBoolean(props) {
   React.useEffect(() => {
     setFilterValueState(item.value || '');
   }, [item.value]);
-  return /*#__PURE__*/_jsxs(rootProps.components.BaseTextField, _extends({
+  return /*#__PURE__*/_jsxs(rootProps.slots.baseTextField, _extends({
+    // TODO: use baseSelect slot
     label: apiRef.current.getLocaleText('filterPanelInputLabel'),
     value: filterValueState,
     onChange: onFilterChange,
@@ -38,21 +38,24 @@ export function GridFilterInputBoolean(props) {
     SelectProps: _extends({
       native: isSelectNative,
       displayEmpty: true
-    }, rootProps.componentsProps?.baseSelect),
+    }, rootProps.slotProps?.baseSelect),
     InputLabelProps: {
       shrink: true
     },
     inputRef: focusElementRef
-  }, others, rootProps.componentsProps?.baseTextField, {
-    children: [/*#__PURE__*/_jsx(OptionComponent, {
+  }, others, rootProps.slotProps?.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/modern/components/panel/filterPanel/GridFilterInputDate.js

@@ -4,7 +4,6 @@ const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "I
 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 const SUBMIT_FILTER_DATE_STROKE_TIME = 500;
@@ -44,7 +43,7 @@ function GridFilterInputDate(props) {
     const itemValue = item.value ?? '';
     setFilterValueState(String(itemValue));
   }, [item.value]);
-  return /*#__PURE__*/_jsx(rootProps.components.BaseTextField, _extends({
+  return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
     id: id,
     label: apiRef.current.getLocaleText('filterPanelInputLabel'),
     placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
@@ -57,13 +56,13 @@ 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'
       }, InputProps?.inputProps)
     })
-  }, other, rootProps.componentsProps?.baseTextField));
+  }, other, rootProps.slotProps?.baseTextField));
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputDate.propTypes = {
   // ----------------------------- Warning --------------------------------