[TextField] Improve IntelliSense support for props

docs/pages/material-ui/api/input.json

@@ -71,6 +71,8 @@
       "input",
       "inputSizeSmall",
       "inputMultiline",
+      "inputAdornedStart",
+      "inputAdornedEnd",
       "inputTypeSearch"
     ],
     "globalClasses": { "focused": "Mui-focused", "disabled": "Mui-disabled", "error": "Mui-error" },

docs/translations/api-docs/input/input.json

@@ -92,6 +92,16 @@
       "nodeName": "the input element",
       "conditions": "<code>multiline={true}</code>"
     },
+    "inputAdornedStart": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the input element",
+      "conditions": "<code>startAdornment</code> is provided"
+    },
+    "inputAdornedEnd": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the input element",
+      "conditions": "<code>endAdornment</code> is provided"
+    },
     "inputTypeSearch": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the input element",

packages/mui-material/src/Input/inputClasses.ts

@@ -29,6 +29,10 @@ export interface InputClasses {
   inputSizeSmall: string;
   /** Styles applied to the input element if `multiline={true}`. */
   inputMultiline: string;
+  /** Styles applied to the input element if `startAdornment` is provided. */
+  inputAdornedStart: string;
+  /** Styles applied to the input element if `endAdornment` is provided. */
+  inputAdornedEnd: string;
   /** Styles applied to the input element if `type="search"`. */
   inputTypeSearch: string;
 }

packages/mui-material/src/TextField/TextField.d.ts

@@ -226,7 +226,14 @@ export interface OutlinedTextFieldProps extends BaseTextFieldProps {
   InputProps?: Partial<OutlinedInputProps>;
 }
 
-export type TextFieldProps = StandardTextFieldProps | FilledTextFieldProps | OutlinedTextFieldProps;
+export type TextFieldVariants = 'outlined' | 'standard' | 'filled';
+
+export type TextFieldProps<Variant extends TextFieldVariants = TextFieldVariants> =
+  Variant extends 'filled'
+    ? FilledTextFieldProps
+    : Variant extends 'standard'
+    ? StandardTextFieldProps
+    : OutlinedTextFieldProps;
 
 /**
  * The `TextField` is a convenience wrapper for the most common cases (80%).
@@ -270,4 +277,12 @@ export type TextFieldProps = StandardTextFieldProps | FilledTextFieldProps | Out
  * - [TextField API](https://mui.com/material-ui/api/text-field/)
  * - inherits [FormControl API](https://mui.com/material-ui/api/form-control/)
  */
-export default function TextField(props: TextFieldProps): JSX.Element;
+export default function TextField<V extends TextFieldVariants>(
+  props: {
+    /**
+     * The variant to use.
+     * @default 'outlined'
+     */
+    variant?: V;
+  } & Omit<TextFieldProps, 'variant'>,
+): JSX.Element;

packages/mui-material/src/TextField/TextField.spec.tsx

@@ -11,6 +11,22 @@ import { expectType } from '@mui/types';
     <TextField variant="standard" InputProps={{ classes: { inputTypeSearch: 'search-input' } }} />
   );
 
+  const StandardInputAdorned = (
+    <TextField
+      variant="standard"
+      InputProps={{
+        classes: { inputAdornedStart: 'search-input', inputAdornedEnd: 'search-input' },
+      }}
+    />
+  );
+  const DefaultInputAdorned = (
+    <TextField
+      InputProps={{
+        classes: { inputAdornedStart: 'search-input', inputAdornedEnd: 'search-input' },
+      }}
+    />
+  );
+
   const outlinedInputTypeSearch = (
     <TextField variant="outlined" InputProps={{ classes: { inputTypeSearch: 'search-input' } }} />
   );

packages/mui-material/test/typescript/hoc-interop.spec.tsx

@@ -19,25 +19,29 @@ const filledProps = {
   InputProps: { classes: { inputAdornedStart: 'adorned' } },
 };
 
+const outlinedProps = {
+  InputProps: { classes: { inputAdornedStart: 'adorned' } },
+};
+
 // baseline behavior
 <TextField variant="filled" {...filledProps} />;
-// @ts-expect-error
-<TextField {...filledProps} />; // desired to throw
+
+<TextField {...outlinedProps} />;
 
 // styled
 {
   const StyledTextField = styled(TextField)``;
   <StyledTextField variant="filled" {...filledProps} />; // desired to pass
-  // @ts-expect-error
-  <StyledTextField {...filledProps} />; // undesired, should throw
+
+  <StyledTextField {...outlinedProps} />;
 }
 
 // @emotion/styled
 {
   const StyledTextField = emotionStyled(TextField)``;
   <StyledTextField variant="filled" {...filledProps} />;
-  // @ts-expect-error
-  <StyledTextField {...filledProps} />; // desired to throw
+
+  <StyledTextField {...outlinedProps} />;
 }
 
 // https://github.com/mui/material-ui/issues/14586