mui · romgrk · Jan 14, 2025 · Jan 14, 2025 · Jan 14, 2025 · Jan 14, 2025
diff --git a/packages/x-data-grid-premium/src/components/promptControl/GridToolbarPromptControl.tsx b/packages/x-data-grid-premium/src/components/promptControl/GridToolbarPromptControl.tsx
@@ -215,7 +215,6 @@ function GridToolbarPromptControl(props: GridToolbarPromptControlProps) {
   return (
     <GridToolbarPromptControlRoot ownerState={rootProps} className={classes.root}>
       <rootProps.slots.baseTextField
-        variant="outlined"
         placeholder={
           isRecording
             ? apiRef.current.getLocaleText('toolbarPromptControlRecordingPlaceholder')
@@ -230,44 +229,46 @@ function GridToolbarPromptControl(props: GridToolbarPromptControlProps) {
         onKeyDown={handleKeyDown}
         error={!!error}
         helperText={error}
-        InputProps={{
-          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>
-          ),
-          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>
-          ),
+        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>
+            ),
+            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>
+            ),
+          },
         }}
       />
     </GridToolbarPromptControlRoot>

diff --git a/packages/x-data-grid/src/components/columnsManagement/GridColumnsManagement.tsx b/packages/x-data-grid/src/components/columnsManagement/GridColumnsManagement.tsx
@@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import { styled } from '@mui/material/styles';
-import TextField, { TextFieldProps } from '@mui/material/TextField';
 import { inputBaseClasses } from '@mui/material/InputBase';
+import { TextFieldProps } from '../../models/gridBaseSlots';
 import {
   gridColumnDefinitionsSelector,
   gridColumnVisibilityModelSelector,
@@ -392,7 +392,7 @@ const GridColumnsManagementHeader = styled('div', {
   padding: theme.spacing(1.5, 3),
 }));
 
-const SearchInput = styled(TextField, {
+const SearchInput = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnsManagementSearchInput',
   overridesResolver: (props, styles) => styles.columnsManagementSearchInput,

diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx
@@ -600,7 +600,6 @@ const GridFilterForm = forwardRef<HTMLDivElement, GridFilterFormProps>(
         >
           {currentOperator?.InputComponent ? (
             <currentOperator.InputComponent
-              variant="outlined"
               size="small"
               apiRef={apiRef}
               item={item}

diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { TextFieldProps } from '@mui/material/TextField';
 import { refType, unstable_useId as useId } from '@mui/utils';
-import { GridFilterInputValueProps } from './GridFilterInputValueProps';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
+import { TextFieldProps } from '../../../models/gridBaseSlots';
+import { GridFilterInputValueProps } from '../../../models/gridFilterInputComponent';
 
-export type GridFilterInputBooleanProps = GridFilterInputValueProps &
-  TextFieldProps & {
-    headerFilterMenu?: React.ReactNode;
-    clearButton?: React.ReactNode | null;
-    /**
-     * It is `true` if the filter either has a value or an operator with no value
-     * required is selected (for example `isEmpty`)
-     */
-    isFilterActive?: boolean;
-  };
+export type GridFilterInputBooleanProps = GridFilterInputValueProps & TextFieldProps;
 
 function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
   const {

diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx
@@ -1,22 +1,15 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { TextFieldProps } from '@mui/material/TextField';
 import { unstable_useId as useId } from '@mui/utils';
 import { useTimeout } from '../../../hooks/utils/useTimeout';
-import { GridFilterInputValueProps } from './GridFilterInputValueProps';
+import { GridFilterInputValueProps } from '../../../models/gridFilterInputComponent';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { GridFilterItem } from '../../../models/gridFilterItem';
+import { TextFieldProps } from '../../../models/gridBaseSlots';
 
 export type GridFilterInputDateProps = GridFilterInputValueProps &
   TextFieldProps & {
-    headerFilterMenu?: React.ReactNode;
-    clearButton?: React.ReactNode | null;
     type?: 'date' | 'datetime-local';
-    /**
-     * It is `true` if the filter either has a value or an operator with no value
-     * required is selected (for example `isEmpty`)
-     */
-    isFilterActive?: boolean;
   };
 
 function convertFilterItemValueToInputValue(
@@ -50,7 +43,7 @@ function GridFilterInputDate(props: GridFilterInputDateProps) {
     type,
     apiRef,
     focusElementRef,
-    InputProps,
+    slotProps,
     isFilterActive,
     headerFilterMenu,
     clearButton,
@@ -96,22 +89,21 @@ function GridFilterInputDate(props: GridFilterInputDateProps) {
         placeholder={apiRef.current.getLocaleText('filterPanelInputPlaceholder')}
         value={filterValueState}
         onChange={onFilterChange}
-        variant="standard"
         type={type || 'text'}
         disabled={disabled}
-        InputLabelProps={{
-          shrink: true,
-        }}
         inputRef={focusElementRef}
-        InputProps={{
-          endAdornment: applying ? (
-            <rootProps.slots.loadIcon fontSize="small" color="action" />
-          ) : null,
-          ...InputProps,
-          inputProps: {
+        slotProps={{
+          ...slotProps,
+          input: {
+            endAdornment: applying ? (
+              <rootProps.slots.loadIcon fontSize="small" color="action" />
+            ) : null,
+            ...slotProps?.input,
+          },
+          htmlInput: {
             max: type === 'datetime-local' ? '9999-12-31T23:59' : '9999-12-31',
             tabIndex,
-            ...InputProps?.inputProps,
+            ...slotProps?.htmlInput,
           },
         }}
         {...rootProps.slotProps?.baseTextField}

diff --git a/...ages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.tsx b/...ages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.tsx
@@ -4,7 +4,7 @@ import Autocomplete, { AutocompleteProps, createFilterOptions } from '@mui/mater
 import { unstable_useId as useId } from '@mui/utils';
 import { getValueOptions, isSingleSelectColDef } from './filterPanelUtils';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
-import { GridFilterInputValueProps } from './GridFilterInputValueProps';
+import { GridFilterInputValueProps } from '../../../models/gridFilterInputComponent';
 import type { GridSingleSelectColDef, ValueOptions } from '../../../models/colDef/gridColDef';
 
 export interface GridFilterInputMultipleSingleSelectProps
@@ -126,10 +126,6 @@ function GridFilterInputMultipleSingleSelect(props: GridFilterInputMultipleSingl
           {...params}
           label={apiRef.current.getLocaleText('filterPanelInputLabel')}
           placeholder={apiRef.current.getLocaleText('filterPanelInputPlaceholder')}
-          InputLabelProps={{
-            ...params.InputLabelProps,
-            shrink: true,
-          }}
           inputRef={focusElementRef}
           type="singleSelect"
           {...TextFieldProps}

diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleValue.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleValue.tsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Autocomplete, { AutocompleteProps } from '@mui/material/Autocomplete';
 import { unstable_useId as useId } from '@mui/utils';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
-import { GridFilterInputValueProps } from './GridFilterInputValueProps';
+import { GridFilterInputValueProps } from '../../../models/gridFilterInputComponent';
 
 export type GridFilterInputMultipleValueProps = {
   type?: 'text' | 'number' | 'date' | 'datetime-local';
@@ -22,7 +22,6 @@ function GridFilterInputMultipleValue(props: GridFilterInputMultipleValueProps)
     helperText,
     size,
     variant = 'outlined',
-    ...other
   } = props;
   const TextFieldProps = {
     color,
@@ -91,17 +90,12 @@ function GridFilterInputMultipleValue(props: GridFilterInputMultipleValueProps)
           {...params}
           label={apiRef.current.getLocaleText('filterPanelInputLabel')}
           placeholder={apiRef.current.getLocaleText('filterPanelInputPlaceholder')}
-          InputLabelProps={{
-            ...params.InputLabelProps,
-            shrink: true,
-          }}
           inputRef={focusElementRef}
           type={type || 'text'}
           {...TextFieldProps}
           {...rootProps.slotProps?.baseTextField}
         />
       )}
-      {...other}
     />
   );
 }

diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { TextFieldProps } from '@mui/material/TextField';
-import { SelectChangeEvent } from '@mui/material/Select';
 import { unstable_useId as useId } from '@mui/utils';
-import { GridFilterInputValueProps } from './GridFilterInputValueProps';
+import { SelectChangeEvent } from '@mui/material/Select';
+import { TextFieldProps } from '../../../models/gridBaseSlots';
+import { GridFilterInputValueProps } from '../../../models/gridFilterInputComponent';
 import { GridSingleSelectColDef } from '../../../models/colDef/gridColDef';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import {
@@ -47,13 +47,6 @@ const renderSingleSelectOptions = ({
 
 export type GridFilterInputSingleSelectProps = GridFilterInputValueProps &
   TextFieldProps & {
-    headerFilterMenu?: React.ReactNode;
-    clearButton?: React.ReactNode | null;
-    /**
-     * It is `true` if the filter either has a value or an operator with no value
-     * required is selected (for example `isEmpty`)
-     */
-    isFilterActive?: boolean;
     type?: 'singleSelect';
   };
 
@@ -71,6 +64,7 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
     isFilterActive,
     clearButton,
     headerFilterMenu,
+    slotProps,
     InputProps,
     InputLabelProps,
     sx,

diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx
@@ -1,22 +1,15 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { TextFieldProps } from '@mui/material/TextField';
 import { unstable_useId as useId } from '@mui/utils';
 import { useTimeout } from '../../../hooks/utils/useTimeout';
+import { TextFieldProps } from '../../../models/gridBaseSlots';
 import { GridFilterItem } from '../../../models/gridFilterItem';
-import { GridFilterInputValueProps } from './GridFilterInputValueProps';
+import { GridFilterInputValueProps } from '../../../models/gridFilterInputComponent';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 
 export type GridTypeFilterInputValueProps = GridFilterInputValueProps &
   TextFieldProps & {
     type?: 'text' | 'number' | 'date' | 'datetime-local';
-    headerFilterMenu?: React.ReactNode;
-    clearButton?: React.ReactNode | null;
-    /**
-     * It is `true` if the filter either has a value or an operator with no value
-     * required is selected (for example `isEmpty`)
-     */
-    isFilterActive?: boolean;
   };
 
 type ItemPlusTag = GridFilterItem & { fromInput?: string };
@@ -31,10 +24,9 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) {
     tabIndex,
     disabled,
     isFilterActive,
+    slotProps,
     clearButton,
     headerFilterMenu,
-    InputProps,
-    variant = 'outlined',
     ...others
   } = props;
 
@@ -80,24 +72,22 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) {
         placeholder={apiRef.current.getLocaleText('filterPanelInputPlaceholder')}
         value={filterValueState ?? ''}
         onChange={onFilterChange}
-        variant={variant}
         type={type || 'text'}
         disabled={disabled}
-        InputProps={{
-          endAdornment: applying ? (
-            <rootProps.slots.baseInputAdornment position="end">
-              <rootProps.slots.loadIcon fontSize="small" color="action" />
-            </rootProps.slots.baseInputAdornment>
-          ) : null,
-          ...InputProps,
-          inputProps: {
+        slotProps={{
+          input: {
+            endAdornment: applying ? (
+              <rootProps.slots.baseInputAdornment position="end">
+                <rootProps.slots.loadIcon fontSize="small" color="action" />
+              </rootProps.slots.baseInputAdornment>
+            ) : null,
+            ...slotProps?.input,
+          },
+          htmlInput: {
             tabIndex,
-            ...InputProps?.inputProps,
+            ...slotProps?.htmlInput,
           },
         }}
-        InputLabelProps={{
-          shrink: true,
-        }}
         inputRef={focusElementRef}
         {...rootProps.slotProps?.baseTextField}
         {...others}

diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValueProps.ts b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValueProps.ts
diff --git a/packages/x-data-grid/src/components/panel/filterPanel/index.ts b/packages/x-data-grid/src/components/panel/filterPanel/index.ts
@@ -4,7 +4,6 @@ export * from './GridFilterInputDate';
 export * from './GridFilterInputSingleSelect';
 export { GridFilterInputBoolean } from './GridFilterInputBoolean';
 export type { GridFilterInputBooleanProps } from './GridFilterInputBoolean';
-export * from './GridFilterInputValueProps';
 export { GridFilterPanel } from './GridFilterPanel';
 export type { GetColumnForNewFilterArgs } from './GridFilterPanel';
 export * from './GridFilterInputMultipleValue';