[DataGrid] Refactor: remove base input label & adornment

docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md

@@ -186,6 +186,8 @@ Below are described the steps you need to make to migrate from v7 to v8.
 ### Slots
 
 - The `baseFormControl` slot was removed.
+- The `baseInputLabel` slot was removed.
+- The `baseInputAdornment` slot was removed.
 
 <!-- ### Editing
 

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

@@ -856,12 +856,6 @@
       "default": "MenuItem",
       "class": null
     },
-    {
-      "name": "baseInputAdornment",
-      "description": "The custom InputAdornment component used in the grid.",
-      "default": "InputAdornment",
-      "class": null
-    },
     {
       "name": "baseTextField",
       "description": "The custom TextField component used in the grid.",
@@ -904,12 +898,6 @@
       "default": "Popper",
       "class": null
     },
-    {
-      "name": "baseInputLabel",
-      "description": "The custom InputLabel component used in the grid.",
-      "default": "InputLabel",
-      "class": null
-    },
     {
       "name": "baseSelectOption",
       "description": "The custom SelectOption component used in the grid.",

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

@@ -791,12 +791,6 @@
       "default": "MenuItem",
       "class": null
     },
-    {
-      "name": "baseInputAdornment",
-      "description": "The custom InputAdornment component used in the grid.",
-      "default": "InputAdornment",
-      "class": null
-    },
     {
       "name": "baseTextField",
       "description": "The custom TextField component used in the grid.",
@@ -839,12 +833,6 @@
       "default": "Popper",
       "class": null
     },
-    {
-      "name": "baseInputLabel",
-      "description": "The custom InputLabel component used in the grid.",
-      "default": "InputLabel",
-      "class": null
-    },
     {
       "name": "baseSelectOption",
       "description": "The custom SelectOption component used in the grid.",

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

@@ -674,12 +674,6 @@
       "default": "MenuItem",
       "class": null
     },
-    {
-      "name": "baseInputAdornment",
-      "description": "The custom InputAdornment component used in the grid.",
-      "default": "InputAdornment",
-      "class": null
-    },
     {
       "name": "baseTextField",
       "description": "The custom TextField component used in the grid.",
@@ -722,12 +716,6 @@
       "default": "Popper",
       "class": null
     },
-    {
-      "name": "baseInputLabel",
-      "description": "The custom InputLabel component used in the grid.",
-      "default": "InputLabel",
-      "class": null
-    },
     {
       "name": "baseSelectOption",
       "description": "The custom SelectOption component used in the grid.",

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

@@ -1285,8 +1285,6 @@
     "baseDivider": "The custom Divider component used in the grid.",
     "baseIconButton": "The custom IconButton component used in the grid.",
     "baseInput": "The custom Input component used in the grid.",
-    "baseInputAdornment": "The custom InputAdornment component used in the grid.",
-    "baseInputLabel": "The custom InputLabel component used in the grid.",
     "baseLinearProgress": "The custom LinearProgress component used in the grid.",
     "baseMenuItem": "The custom MenuItem component used in the grid.",
     "baseMenuList": "The custom MenuList component used in the grid.",

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

@@ -1223,8 +1223,6 @@
     "baseDivider": "The custom Divider component used in the grid.",
     "baseIconButton": "The custom IconButton component used in the grid.",
     "baseInput": "The custom Input component used in the grid.",
-    "baseInputAdornment": "The custom InputAdornment component used in the grid.",
-    "baseInputLabel": "The custom InputLabel component used in the grid.",
     "baseLinearProgress": "The custom LinearProgress component used in the grid.",
     "baseMenuItem": "The custom MenuItem component used in the grid.",
     "baseMenuList": "The custom MenuList component used in the grid.",

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

@@ -1097,8 +1097,6 @@
     "baseDivider": "The custom Divider component used in the grid.",
     "baseIconButton": "The custom IconButton component used in the grid.",
     "baseInput": "The custom Input component used in the grid.",
-    "baseInputAdornment": "The custom InputAdornment component used in the grid.",
-    "baseInputLabel": "The custom InputLabel component used in the grid.",
     "baseLinearProgress": "The custom LinearProgress component used in the grid.",
     "baseMenuItem": "The custom MenuItem component used in the grid.",
     "baseMenuList": "The custom MenuList component used in the grid.",

packages/x-data-grid-premium/src/components/promptControl/GridToolbarPromptControl.tsx

@@ -236,41 +236,37 @@ function GridToolbarPromptControl(props: GridToolbarPromptControlProps) {
         slotProps={{
           input: {
             startAdornment: supportsSpeechRecognition && (
-              <rootProps.slots.baseInputAdornment position="start">
-                <RecordButton
-                  className={classes.recordButton}
-                  lang={lang}
-                  recording={isRecording}
-                  setRecording={setRecording}
-                  disabled={isLoading}
-                  onUpdate={setQuery}
-                  onDone={handleDone}
-                  onError={setError}
-                />
-              </rootProps.slots.baseInputAdornment>
+              <RecordButton
+                className={classes.recordButton}
+                lang={lang}
+                recording={isRecording}
+                setRecording={setRecording}
+                disabled={isLoading}
+                onUpdate={setQuery}
+                onDone={handleDone}
+                onError={setError}
+              />
             ),
             endAdornment: (
-              <rootProps.slots.baseInputAdornment position="end">
-                <rootProps.slots.baseTooltip
-                  title={apiRef.current.getLocaleText('toolbarPromptControlSendActionLabel')}
-                >
-                  <div>
-                    <rootProps.slots.baseIconButton
-                      className={classes.sendButton}
-                      disabled={isLoading || isRecording || query === ''}
-                      color="primary"
-                      onClick={processPrompt}
-                      size="small"
-                      aria-label={apiRef.current.getLocaleText(
-                        'toolbarPromptControlSendActionAriaLabel',
-                      )}
-                      edge="end"
-                    >
-                      <rootProps.slots.toolbarPromptSendIcon fontSize="small" />
-                    </rootProps.slots.baseIconButton>
-                  </div>
-                </rootProps.slots.baseTooltip>
-              </rootProps.slots.baseInputAdornment>
+              <rootProps.slots.baseTooltip
+                title={apiRef.current.getLocaleText('toolbarPromptControlSendActionLabel')}
+              >
+                <div>
+                  <rootProps.slots.baseIconButton
+                    className={classes.sendButton}
+                    disabled={isLoading || isRecording || query === ''}
+                    color="primary"
+                    onClick={processPrompt}
+                    size="small"
+                    aria-label={apiRef.current.getLocaleText(
+                      'toolbarPromptControlSendActionAriaLabel',
+                    )}
+                    edge="end"
+                  >
+                    <rootProps.slots.toolbarPromptSendIcon fontSize="small" />
+                  </rootProps.slots.baseIconButton>
+                </div>
+              </rootProps.slots.baseTooltip>
             ),
           },
         }}

packages/x-data-grid/src/components/columnsManagement/GridColumnsManagement.tsx

@@ -235,11 +235,7 @@ function GridColumnsManagement(props: GridColumnsManagementProps) {
           type="search"
           slotProps={{
             input: {
-              startAdornment: (
-                <rootProps.slots.baseInputAdornment position="start">
-                  <rootProps.slots.quickFilterIcon />
-                </rootProps.slots.baseInputAdornment>
-              ),
+              startAdornment: <rootProps.slots.quickFilterIcon />,
               endAdornment: (
                 <rootProps.slots.baseIconButton
                   aria-label={apiRef.current.getLocaleText('columnsManagementDeleteIconLabel')}

packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx

@@ -78,9 +78,7 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) {
           ...textFieldProps?.slotProps,
           input: {
             endAdornment: applying ? (
-              <rootProps.slots.baseInputAdornment position="end">
-                <rootProps.slots.loadIcon fontSize="small" color="action" />
-              </rootProps.slots.baseInputAdornment>
+              <rootProps.slots.loadIcon fontSize="small" color="action" />
             ) : null,
             ...textFieldProps?.slotProps?.input,
           },

packages/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx

@@ -157,32 +157,26 @@ function GridToolbarQuickFilter(props: GridToolbarQuickFilterProps) {
       slotProps={{
         ...slotProps?.root.slotProps,
         input: {
-          startAdornment: (
-            <rootProps.slots.baseInputAdornment position="start">
-              <rootProps.slots.quickFilterIcon fontSize="small" />
-            </rootProps.slots.baseInputAdornment>
-          ),
+          startAdornment: <rootProps.slots.quickFilterIcon fontSize="small" />,
           endAdornment: (
-            <rootProps.slots.baseInputAdornment position="end">
-              <rootProps.slots.baseIconButton
-                aria-label={apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel')}
-                size="small"
-                edge="end"
-                style={
-                  searchValue
-                    ? {
-                        visibility: 'visible',
-                      }
-                    : {
-                        visibility: 'hidden',
-                      }
-                }
-                onClick={handleSearchReset}
-                {...rootProps.slotProps?.baseIconButton}
-              >
-                <rootProps.slots.quickFilterClearIcon fontSize="small" />
-              </rootProps.slots.baseIconButton>
-            </rootProps.slots.baseInputAdornment>
+            <rootProps.slots.baseIconButton
+              aria-label={apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel')}
+              size="small"
+              edge="end"
+              style={
+                searchValue
+                  ? {
+                      visibility: 'visible',
+                    }
+                  : {
+                      visibility: 'hidden',
+                    }
+              }
+              onClick={handleSearchReset}
+              {...rootProps.slotProps?.baseIconButton}
+            >
+              <rootProps.slots.quickFilterClearIcon fontSize="small" />
+            </rootProps.slots.baseIconButton>
           ),
           ...slotProps?.root.slotProps?.input,
         },

packages/x-data-grid/src/material/index.tsx

@@ -6,7 +6,7 @@ import MUICheckbox from '@mui/material/Checkbox';
 import MUIChip from '@mui/material/Chip';
 import MUICircularProgress from '@mui/material/CircularProgress';
 import MUIDivider from '@mui/material/Divider';
-import MUIInputBase from '@mui/material/InputBase';
+import MUIInputBase, { InputBaseProps as MUIInputBaseProps } from '@mui/material/InputBase';
 import MUIFocusTrap from '@mui/material/Unstable_TrapFocus';
 import MUILinearProgress from '@mui/material/LinearProgress';
 import MUIListItemIcon from '@mui/material/ListItemIcon';
@@ -68,7 +68,6 @@ export { useMaterialCSSVariables } from './variables';
 const ClickAwayListener = forwardRef(MUIClickAwayListener);
 
 const BaseSelect = forwardRef<any, GridSlotProps['baseSelect']>(function BaseSelect(props, ref) {
-  const rootProps = useGridRootProps();
   const {
     id,
     label,
@@ -86,13 +85,7 @@ const BaseSelect = forwardRef<any, GridSlotProps['baseSelect']>(function BaseSel
   } = props;
   return (
     <MUIFormControl size={size} fullWidth={fullWidth} style={style} disabled={disabled} ref={ref}>
-      <MUIInputLabel
-        id={labelId}
-        htmlFor={id}
-        shrink
-        variant="outlined"
-        {...rootProps.slotProps?.baseInputLabel}
-      >
+      <MUIInputLabel id={labelId} htmlFor={id} shrink variant="outlined">
         {label}
       </MUIInputLabel>
       <MUISelect
@@ -172,10 +165,8 @@ const baseSlots: GridBaseSlots = {
   baseTextField: BaseTextField,
   baseButton: MUIButton,
   baseIconButton: MUIIconButton,
-  baseInputAdornment: MUIInputAdornment,
   baseTooltip: MUITooltip,
   basePopper: BasePopper,
-  baseInputLabel: MUIInputLabel,
   baseSelect: BaseSelect,
   baseSelectOption: BaseSelectOption,
   baseSkeleton: MUISkeleton,
@@ -267,7 +258,7 @@ function BaseTextField(props: GridSlotProps['baseTextField']) {
       variant="outlined"
       {...rest}
       inputProps={slotProps?.htmlInput}
-      InputProps={slotProps?.input}
+      InputProps={transformInputProps(slotProps?.input as any)}
       InputLabelProps={{
         shrink: true,
         ...(slotProps as any)?.inputLabel,
@@ -340,8 +331,32 @@ function BaseAutocomplete(props: GridSlotProps['baseAutocomplete']) {
 }
 
 function BaseInput(props: GridSlotProps['baseInput']) {
+  return <MUIInputBase {...transformInputProps(props)} />;
+}
+
+function transformInputProps(props: GridSlotProps['baseInput'] | undefined) {
+  if (!props) {
+    return undefined;
+  }
+
   const { slotProps, ...rest } = props;
-  return <MUIInputBase {...rest} inputProps={slotProps?.htmlInput} />;
+  const result = rest as Partial<MUIInputBaseProps>;
+
+  if (result.startAdornment) {
+    result.startAdornment = (
+      <MUIInputAdornment position="start">{result.startAdornment}</MUIInputAdornment>
+    );
+  }
+
+  if (result.endAdornment) {
+    result.endAdornment = (
+      <MUIInputAdornment position="end">{result.endAdornment}</MUIInputAdornment>
+    );
+  }
+
+  result.inputProps = slotProps?.htmlInput;
+
+  return result;
 }
 
 const transformOrigin = {

packages/x-data-grid/src/models/gridBaseSlots.ts

@@ -290,11 +290,7 @@ export type TextFieldProps = {
   placeholder?: string;
   size?: 'small' | 'medium';
   slotProps?: {
-    input?: {
-      disabled?: boolean;
-      endAdornment?: React.ReactNode;
-      startAdornment?: React.ReactNode;
-    };
+    input?: Partial<InputProps>;
     inputLabel?: {};
     htmlInput?: React.InputHTMLAttributes<HTMLInputElement>;
   };

packages/x-data-grid/src/models/gridSlotsComponent.ts

@@ -45,11 +45,6 @@ export interface GridBaseSlots {
    * @default MenuItem
    */
   baseMenuItem: React.JSXElementConstructor<GridSlotProps['baseMenuItem']>;
-  /**
-   * The custom InputAdornment component used in the grid.
-   * @default InputAdornment
-   */
-  baseInputAdornment: React.JSXElementConstructor<GridSlotProps['baseInputAdornment']>;
   /**
    * The custom TextField component used in the grid.
    * @default TextField
@@ -85,11 +80,6 @@ export interface GridBaseSlots {
    * @default Popper
    */
   basePopper: React.JSXElementConstructor<GridSlotProps['basePopper']>;
-  /**
-   * The custom InputLabel component used in the grid.
-   * @default InputLabel
-   */
-  baseInputLabel: React.JSXElementConstructor<GridSlotProps['baseInputLabel']>;
   /**
    * The custom SelectOption component used in the grid.
    * @default SelectOption