[DataGrid] Add a subset of used @mui/material components to GridSlotsComponent

docs/pages/api-docs/data-grid/data-grid-pro.json

@@ -190,10 +190,17 @@
     "treeData": { "type": { "name": "bool" } }
   },
   "slots": {
+    "BaseButton": { "default": "Button", "type": { "name": "elementType" } },
     "BaseCheckbox": { "default": "Checkbox", "type": { "name": "elementType" } },
+    "BaseFormControl": { "default": "FormControl", "type": { "name": "elementType" } },
+    "BasePopper": { "default": "Popper", "type": { "name": "elementType" } },
+    "BaseSelect": { "default": "Select", "type": { "name": "elementType" } },
+    "BaseSwitch": { "default": "Switch", "type": { "name": "elementType" } },
+    "BaseTextField": { "default": "TextField", "type": { "name": "elementType" } },
+    "BaseTooltip": { "default": "Tooltip", "type": { "name": "elementType" } },
     "BooleanCellFalseIcon": { "default": "GridCloseIcon", "type": { "name": "elementType" } },
     "BooleanCellTrueIcon": { "default": "GridCheckIcon", "type": { "name": "elementType" } },
-    "Cell": { "type": { "name": "elementType" } },
+    "Cell": { "default": "GridCell", "type": { "name": "elementType" } },
     "ColumnFilteredIcon": { "default": "GridFilterAltIcon", "type": { "name": "elementType" } },
     "ColumnMenu": { "default": "GridColumnMenu", "type": { "name": "elementType" } },
     "ColumnMenuIcon": {

docs/pages/api-docs/data-grid/data-grid.json

@@ -147,10 +147,17 @@
     }
   },
   "slots": {
+    "BaseButton": { "default": "Button", "type": { "name": "elementType" } },
     "BaseCheckbox": { "default": "Checkbox", "type": { "name": "elementType" } },
+    "BaseFormControl": { "default": "FormControl", "type": { "name": "elementType" } },
+    "BasePopper": { "default": "Popper", "type": { "name": "elementType" } },
+    "BaseSelect": { "default": "Select", "type": { "name": "elementType" } },
+    "BaseSwitch": { "default": "Switch", "type": { "name": "elementType" } },
+    "BaseTextField": { "default": "TextField", "type": { "name": "elementType" } },
+    "BaseTooltip": { "default": "Tooltip", "type": { "name": "elementType" } },
     "BooleanCellFalseIcon": { "default": "GridCloseIcon", "type": { "name": "elementType" } },
     "BooleanCellTrueIcon": { "default": "GridCheckIcon", "type": { "name": "elementType" } },
-    "Cell": { "type": { "name": "elementType" } },
+    "Cell": { "default": "GridCell", "type": { "name": "elementType" } },
     "ColumnFilteredIcon": { "default": "GridFilterAltIcon", "type": { "name": "elementType" } },
     "ColumnMenu": { "default": "GridColumnMenu", "type": { "name": "elementType" } },
     "ColumnMenuIcon": {

docs/translations/api-docs/data-grid/data-grid-pro-pt.json

@@ -414,8 +414,15 @@
     }
   },
   "slotDescriptions": {
-    "Cell": "Component rendered for each cell.",
     "BaseCheckbox": "The custom Checkbox component used in the grid for both header and cells.",
+    "BaseTextField": "The custom TextField component used in the grid.",
+    "BaseFormControl": "The custom FormControl component used in the grid.",
+    "BaseSelect": "The custom Select component used in the grid.",
+    "BaseSwitch": "The custom Switch component used in the grid.",
+    "BaseButton": "The custom Button component used in the grid.",
+    "BaseTooltip": "The custom Tooltip component used in the grid.",
+    "BasePopper": "The custom Popper component used in the grid.",
+    "Cell": "Component rendered for each cell.",
     "ColumnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.",
     "ErrorOverlay": "Error overlay component rendered above the grid when an error is caught.",
     "Footer": "Footer component rendered at the bottom of the grid viewport.",

docs/translations/api-docs/data-grid/data-grid-pro-zh.json

@@ -414,8 +414,15 @@
     }
   },
   "slotDescriptions": {
-    "Cell": "Component rendered for each cell.",
     "BaseCheckbox": "The custom Checkbox component used in the grid for both header and cells.",
+    "BaseTextField": "The custom TextField component used in the grid.",
+    "BaseFormControl": "The custom FormControl component used in the grid.",
+    "BaseSelect": "The custom Select component used in the grid.",
+    "BaseSwitch": "The custom Switch component used in the grid.",
+    "BaseButton": "The custom Button component used in the grid.",
+    "BaseTooltip": "The custom Tooltip component used in the grid.",
+    "BasePopper": "The custom Popper component used in the grid.",
+    "Cell": "Component rendered for each cell.",
     "ColumnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.",
     "ErrorOverlay": "Error overlay component rendered above the grid when an error is caught.",
     "Footer": "Footer component rendered at the bottom of the grid viewport.",

docs/translations/api-docs/data-grid/data-grid-pro.json

@@ -414,8 +414,15 @@
     }
   },
   "slotDescriptions": {
-    "Cell": "Component rendered for each cell.",
     "BaseCheckbox": "The custom Checkbox component used in the grid for both header and cells.",
+    "BaseTextField": "The custom TextField component used in the grid.",
+    "BaseFormControl": "The custom FormControl component used in the grid.",
+    "BaseSelect": "The custom Select component used in the grid.",
+    "BaseSwitch": "The custom Switch component used in the grid.",
+    "BaseButton": "The custom Button component used in the grid.",
+    "BaseTooltip": "The custom Tooltip component used in the grid.",
+    "BasePopper": "The custom Popper component used in the grid.",
+    "Cell": "Component rendered for each cell.",
     "ColumnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.",
     "ErrorOverlay": "Error overlay component rendered above the grid when an error is caught.",
     "Footer": "Footer component rendered at the bottom of the grid viewport.",

docs/translations/api-docs/data-grid/data-grid-pt.json

@@ -390,8 +390,15 @@
     }
   },
   "slotDescriptions": {
-    "Cell": "Component rendered for each cell.",
     "BaseCheckbox": "The custom Checkbox component used in the grid for both header and cells.",
+    "BaseTextField": "The custom TextField component used in the grid.",
+    "BaseFormControl": "The custom FormControl component used in the grid.",
+    "BaseSelect": "The custom Select component used in the grid.",
+    "BaseSwitch": "The custom Switch component used in the grid.",
+    "BaseButton": "The custom Button component used in the grid.",
+    "BaseTooltip": "The custom Tooltip component used in the grid.",
+    "BasePopper": "The custom Popper component used in the grid.",
+    "Cell": "Component rendered for each cell.",
     "ColumnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.",
     "ErrorOverlay": "Error overlay component rendered above the grid when an error is caught.",
     "Footer": "Footer component rendered at the bottom of the grid viewport.",

docs/translations/api-docs/data-grid/data-grid-zh.json

@@ -390,8 +390,15 @@
     }
   },
   "slotDescriptions": {
-    "Cell": "Component rendered for each cell.",
     "BaseCheckbox": "The custom Checkbox component used in the grid for both header and cells.",
+    "BaseTextField": "The custom TextField component used in the grid.",
+    "BaseFormControl": "The custom FormControl component used in the grid.",
+    "BaseSelect": "The custom Select component used in the grid.",
+    "BaseSwitch": "The custom Switch component used in the grid.",
+    "BaseButton": "The custom Button component used in the grid.",
+    "BaseTooltip": "The custom Tooltip component used in the grid.",
+    "BasePopper": "The custom Popper component used in the grid.",
+    "Cell": "Component rendered for each cell.",
     "ColumnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.",
     "ErrorOverlay": "Error overlay component rendered above the grid when an error is caught.",
     "Footer": "Footer component rendered at the bottom of the grid viewport.",

docs/translations/api-docs/data-grid/data-grid.json

@@ -390,8 +390,15 @@
     }
   },
   "slotDescriptions": {
-    "Cell": "Component rendered for each cell.",
     "BaseCheckbox": "The custom Checkbox component used in the grid for both header and cells.",
+    "BaseTextField": "The custom TextField component used in the grid.",
+    "BaseFormControl": "The custom FormControl component used in the grid.",
+    "BaseSelect": "The custom Select component used in the grid.",
+    "BaseSwitch": "The custom Switch component used in the grid.",
+    "BaseButton": "The custom Button component used in the grid.",
+    "BaseTooltip": "The custom Tooltip component used in the grid.",
+    "BasePopper": "The custom Popper component used in the grid.",
+    "Cell": "Component rendered for each cell.",
     "ColumnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.",
     "ErrorOverlay": "Error overlay component rendered above the grid when an error is caught.",
     "Footer": "Footer component rendered at the bottom of the grid viewport.",

packages/grid/_modules_/grid/components/cell/GridEditBooleanCell.tsx

@@ -5,7 +5,6 @@ import {
   unstable_useId as useId,
   unstable_useEnhancedEffect as useEnhancedEffect,
 } from '@mui/material/utils';
-import Checkbox from '@mui/material/Checkbox';
 import { getDataGridUtilityClass } from '../../gridClasses';
 import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -76,12 +75,13 @@ export function GridEditBooleanCell(
 
   return (
     <label htmlFor={id} className={clsx(classes.root, className)} {...other}>
-      <Checkbox
+      <rootProps.components.BaseCheckbox
         id={id}
         inputRef={inputRef}
         checked={Boolean(valueState)}
         onChange={handleChange}
         size="small"
+        {...rootProps.componentsProps?.baseCheckbox}
       />
     </label>
   );

packages/grid/_modules_/grid/components/cell/GridEditSingleSelectCell.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
-import Select, { SelectProps } from '@mui/material/Select';
+import { SelectProps } from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
 import {
   GridRenderEditCellParams,
@@ -110,7 +110,7 @@ function GridEditSingleSelectCell(props: GridRenderEditCellParams & Omit<SelectP
   }, [hasFocus]);
 
   return (
-    <Select
+    <rootProps.components.BaseSelect
       ref={ref}
       inputRef={inputRef}
       value={value}
@@ -123,9 +123,10 @@ function GridEditSingleSelectCell(props: GridRenderEditCellParams & Omit<SelectP
       error={error}
       fullWidth
       {...other}
+      {...rootProps.componentsProps?.baseSelect}
     >
       {valueOptionsFormatted.map(renderSingleSelectOptions)}
-    </Select>
+    </rootProps.components.BaseSelect>
   );
 }
 

packages/grid/_modules_/grid/components/columnHeaders/ColumnHeaderFilterIcon.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import Badge from '@mui/material/Badge';
-import Tooltip from '@mui/material/Tooltip';
 import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector';
 import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
@@ -69,13 +68,14 @@ export function ColumnHeaderFilterIcon(props: ColumnHeaderFilterIconProps) {
   );
 
   return (
-    <Tooltip
+    <rootProps.components.BaseTooltip
       title={
         apiRef.current.getLocaleText('columnHeaderFiltersTooltipActive')(
           counter,
         ) as React.ReactElement
       }
       enterDelay={1000}
+      {...rootProps.componentsProps?.baseTooltip}
     >
       <GridIconButtonContainer>
         {counter > 1 && (
@@ -85,6 +85,6 @@ export function ColumnHeaderFilterIcon(props: ColumnHeaderFilterIconProps) {
         )}
         {counter === 1 && iconButton}
       </GridIconButtonContainer>
-    </Tooltip>
+    </rootProps.components.BaseTooltip>
   );
 }

packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderTitle.tsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import Tooltip from '@mui/material/Tooltip';
 import { isOverflown } from '../../utils/domUtils';
 import { getDataGridUtilityClass } from '../../gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -55,6 +54,7 @@ export interface GridColumnHeaderTitleProps {
 // No React.memo here as if we display the sort icon, we need to recalculate the isOver
 function GridColumnHeaderTitle(props: GridColumnHeaderTitleProps) {
   const { label, description, columnWidth } = props;
+  const rootProps = useGridRootProps();
   const titleRef = React.useRef<HTMLDivElement>(null);
   const [tooltip, setTooltip] = React.useState('');
 
@@ -70,9 +70,12 @@ function GridColumnHeaderTitle(props: GridColumnHeaderTitleProps) {
   }, [titleRef, columnWidth, description, label]);
 
   return (
-    <Tooltip title={description || tooltip}>
+    <rootProps.components.BaseTooltip
+      title={description || tooltip}
+      {...rootProps.componentsProps?.baseTooltip}
+    >
       <ColumnHeaderInnerTitle ref={titleRef}>{label}</ColumnHeaderInnerTitle>
-    </Tooltip>
+    </rootProps.components.BaseTooltip>
   );
 }
 

packages/grid/_modules_/grid/components/menu/GridMenu.tsx

@@ -92,12 +92,14 @@ const GridMenu = (props: GridMenuProps) => {
 
   return (
     <GridMenuRoot
+      as={rootProps.components.BasePopper}
       className={clsx(className, classes.root)}
       open={open}
       anchorEl={target as any}
       transition
       placement={position}
       {...other}
+      {...rootProps.componentsProps?.basePopper}
     >
       {({ TransitionProps, placement }) => (
         <ClickAwayListener onClickAway={onClickAway}>

packages/grid/_modules_/grid/components/panel/GridColumnsPanel.tsx

@@ -1,10 +1,8 @@
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
-import Switch, { switchClasses } from '@mui/material/Switch';
-import Button from '@mui/material/Button';
+import { switchClasses } from '@mui/material/Switch';
 import FormControlLabel from '@mui/material/FormControlLabel';
-import TextField from '@mui/material/TextField';
 import { styled } from '@mui/material/styles';
 import { allGridColumnsSelector } from '../../hooks/features/columns/gridColumnsSelector';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
@@ -116,14 +114,15 @@ export function GridColumnsPanel() {
   return (
     <GridPanelWrapper>
       <GridPanelHeader>
-        <TextField
+        <rootProps.components.BaseTextField
           label={apiRef.current.getLocaleText('columnsPanelTextFieldLabel')}
           placeholder={apiRef.current.getLocaleText('columnsPanelTextFieldPlaceholder')}
           inputRef={searchInputRef}
           value={searchValue}
           onChange={handleSearchValueChange}
           variant="standard"
           fullWidth
+          {...rootProps.componentsProps?.baseTextField}
         />
       </GridPanelHeader>
       <GridPanelContent>
@@ -132,13 +131,14 @@ export function GridColumnsPanel() {
             <GridColumnsPanelRowRoot className={classes.columnsPanelRow} key={column.field}>
               <FormControlLabel
                 control={
-                  <Switch
+                  <rootProps.components.BaseSwitch
                     disabled={column.hideable === false}
                     checked={!column.hide}
                     onClick={toggleColumn}
                     name={column.field}
                     color="primary"
                     size="small"
+                    {...rootProps.componentsProps?.baseSwitch}
                   />
                 }
                 label={column.headerName || column.field}
@@ -159,12 +159,20 @@ export function GridColumnsPanel() {
         </GridColumnsPanelRoot>
       </GridPanelContent>
       <GridPanelFooter>
-        <Button onClick={hideAllColumns} color="primary">
+        <rootProps.components.BaseButton
+          onClick={hideAllColumns}
+          color="primary"
+          {...rootProps.componentsProps?.baseButton}
+        >
           {apiRef.current.getLocaleText('columnsPanelHideAllButton')}
-        </Button>
-        <Button onClick={showAllColumns} color="primary">
+        </rootProps.components.BaseButton>
+        <rootProps.components.BaseButton
+          onClick={showAllColumns}
+          color="primary"
+          {...rootProps.componentsProps?.baseButton}
+        >
           {apiRef.current.getLocaleText('columnsPanelShowAllButton')}
-        </Button>
+        </rootProps.components.BaseButton>
       </GridPanelFooter>
     </GridPanelWrapper>
   );

packages/grid/_modules_/grid/components/panel/GridPanel.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { styled } from '@mui/material/styles';
+import { MUIStyledCommonProps } from '@mui/system';
+import { styled, Theme } from '@mui/material/styles';
 import { generateUtilityClasses, InternalStandardProps as StandardProps } from '@mui/material';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 import Paper from '@mui/material/Paper';
@@ -16,7 +17,8 @@ export interface GridPanelClasses {
   paper: string;
 }
 
-export interface GridPanelProps extends StandardProps<PopperProps, 'children'> {
+export interface GridPanelProps
+  extends StandardProps<MUIStyledCommonProps<Theme> & PopperProps, 'children'> {
   children?: React.ReactNode;
   /**
    * Override or extend the styles applied to the component.
@@ -47,7 +49,7 @@ const GridPaperRoot = styled(Paper, {
 }));
 
 const GridPanel = React.forwardRef<HTMLDivElement, GridPanelProps>((props, ref) => {
-  const { children, className, open, classes: classesProp, ...other } = props;
+  const { children, className, classes: classesProp, ...other } = props;
   const apiRef = useGridApiContext();
   const classes = gridPanelClasses;
   const [isPlaced, setIsPlaced] = React.useState(false);
@@ -76,7 +78,6 @@ const GridPanel = React.forwardRef<HTMLDivElement, GridPanelProps>((props, ref)
       ref={ref}
       placement="bottom-start"
       className={clsx(className, classes.panel)}
-      open={open}
       anchorEl={anchorEl}
       modifiers={[
         {

packages/grid/_modules_/grid/components/panel/GridPreferencesPanel.tsx

@@ -22,9 +22,11 @@ export const GridPreferencesPanel = React.forwardRef<
   return (
     <rootProps.components.Panel
       ref={ref}
+      as={rootProps.components.BasePopper}
       open={columns.length > 0 && preferencePanelState.open}
       {...rootProps.componentsProps?.panel}
       {...props}
+      {...rootProps.componentsProps?.basePopper}
     >
       {!rootProps.disableColumnSelector && isColumnsTabOpen && (
         <rootProps.components.ColumnsPanel {...rootProps.componentsProps?.columnsPanel} />