@mui/material 6.0.0-alpha.7 → 6.0.0-alpha.9

package/Tabs/Tabs.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["aria-label", "aria-labelledby", "action", "centered", "children", "className", "component", "allowScrollButtonsMobile", "indicatorColor", "onChange", "orientation", "ScrollButtonComponent", "scrollButtons", "selectionFollowsFocus", "slots", "slotProps", "TabIndicatorProps", "TabScrollButtonProps", "textColor", "value", "variant", "visibleScrollbar"];
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
@@ -264,30 +261,30 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   const theme = useTheme();
   const isRtl = useRtl();
   const {
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledBy,
-      action,
-      centered = false,
-      children: childrenProp,
-      className,
-      component = 'div',
-      allowScrollButtonsMobile = false,
-      indicatorColor = 'primary',
-      onChange,
-      orientation = 'horizontal',
-      ScrollButtonComponent = TabScrollButton,
-      scrollButtons = 'auto',
-      selectionFollowsFocus,
-      slots = {},
-      slotProps = {},
-      TabIndicatorProps = {},
-      TabScrollButtonProps = {},
-      textColor = 'primary',
-      value,
-      variant = 'standard',
-      visibleScrollbar = false
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    action,
+    centered = false,
+    children: childrenProp,
+    className,
+    component = 'div',
+    allowScrollButtonsMobile = false,
+    indicatorColor = 'primary',
+    onChange,
+    orientation = 'horizontal',
+    ScrollButtonComponent = TabScrollButton,
+    scrollButtons = 'auto',
+    selectionFollowsFocus,
+    slots = {},
+    slotProps = {},
+    TabIndicatorProps = {},
+    TabScrollButtonProps = {},
+    textColor = 'primary',
+    value,
+    variant = 'standard',
+    visibleScrollbar = false,
+    ...other
+  } = props;
   const scrollable = variant === 'scrollable';
   const vertical = orientation === 'vertical';
   const scrollStart = vertical ? 'scrollTop' : 'scrollLeft';
@@ -295,7 +292,8 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   const end = vertical ? 'bottom' : 'right';
   const clientSize = vertical ? 'clientHeight' : 'clientWidth';
   const size = vertical ? 'height' : 'width';
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     component,
     allowScrollButtonsMobile,
     indicatorColor,
@@ -311,7 +309,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     scrollableY: scrollable && vertical,
     centered: centered && !scrollable,
     scrollButtonsHideMobile: !allowScrollButtonsMobile
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const startScrollButtonIconProps = useSlotProps({
     elementType: slots.StartScrollButtonIcon,
@@ -485,7 +483,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     }) : null;
     const scrollButtonsActive = displayStartScroll || displayEndScroll;
     const showScrollButtons = scrollable && (scrollButtons === 'auto' && scrollButtonsActive || scrollButtons === true);
-    conditionalElements.scrollButtonStart = showScrollButtons ? /*#__PURE__*/_jsx(ScrollButtonComponent, _extends({
+    conditionalElements.scrollButtonStart = showScrollButtons ? /*#__PURE__*/_jsx(ScrollButtonComponent, {
       slots: {
         StartScrollButtonIcon: slots.StartScrollButtonIcon
       },
@@ -495,11 +493,11 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       orientation: orientation,
       direction: isRtl ? 'right' : 'left',
       onClick: handleStartScrollClick,
-      disabled: !displayStartScroll
-    }, TabScrollButtonProps, {
+      disabled: !displayStartScroll,
+      ...TabScrollButtonProps,
       className: clsx(classes.scrollButtons, TabScrollButtonProps.className)
-    })) : null;
-    conditionalElements.scrollButtonEnd = showScrollButtons ? /*#__PURE__*/_jsx(ScrollButtonComponent, _extends({
+    }) : null;
+    conditionalElements.scrollButtonEnd = showScrollButtons ? /*#__PURE__*/_jsx(ScrollButtonComponent, {
       slots: {
         EndScrollButtonIcon: slots.EndScrollButtonIcon
       },
@@ -509,10 +507,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       orientation: orientation,
       direction: isRtl ? 'left' : 'right',
       onClick: handleEndScrollClick,
-      disabled: !displayEndScroll
-    }, TabScrollButtonProps, {
+      disabled: !displayEndScroll,
+      ...TabScrollButtonProps,
       className: clsx(classes.scrollButtons, TabScrollButtonProps.className)
-    })) : null;
+    }) : null;
     return conditionalElements;
   };
   const scrollSelectedIntoView = useEventCallback(animation => {
@@ -639,11 +637,15 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     updateIndicator: updateIndicatorState,
     updateScrollButtons: updateScrollButtonState
   }), [updateIndicatorState, updateScrollButtonState]);
-  const indicator = /*#__PURE__*/_jsx(TabsIndicator, _extends({}, TabIndicatorProps, {
+  const indicator = /*#__PURE__*/_jsx(TabsIndicator, {
+    ...TabIndicatorProps,
     className: clsx(classes.indicator, TabIndicatorProps.className),
     ownerState: ownerState,
-    style: _extends({}, indicatorStyle, TabIndicatorProps.style)
-  }));
+    style: {
+      ...indicatorStyle,
+      ...TabIndicatorProps.style
+    }
+  });
   let childIndex = 0;
   const children = React.Children.map(childrenProp, child => {
     if (! /*#__PURE__*/React.isValidElement(child)) {
@@ -658,17 +660,18 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     valueToIndex.set(childValue, childIndex);
     const selected = childValue === value;
     childIndex += 1;
-    return /*#__PURE__*/React.cloneElement(child, _extends({
+    return /*#__PURE__*/React.cloneElement(child, {
       fullWidth: variant === 'fullWidth',
       indicator: selected && !mounted && indicator,
       selected,
       selectionFollowsFocus,
       onChange,
       textColor,
-      value: childValue
-    }, childIndex === 1 && value === false && !child.props.tabIndex ? {
-      tabIndex: 0
-    } : {}));
+      value: childValue,
+      ...(childIndex === 1 && value === false && !child.props.tabIndex ? {
+        tabIndex: 0
+      } : {})
+    });
   });
   const handleKeyDown = event => {
     const list = tabListRef.current;
@@ -709,12 +712,12 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     }
   };
   const conditionalElements = getConditionalElements();
-  return /*#__PURE__*/_jsxs(TabsRoot, _extends({
+  return /*#__PURE__*/_jsxs(TabsRoot, {
     className: clsx(classes.root, className),
     ownerState: ownerState,
     ref: ref,
-    as: component
-  }, other, {
+    as: component,
+    ...other,
     children: [conditionalElements.scrollButtonStart, conditionalElements.scrollbarSizeListener, /*#__PURE__*/_jsxs(TabsScroller, {
       className: classes.scroller,
       ownerState: ownerState,
@@ -735,7 +738,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         children: children
       }), mounted && indicator]
     }), conditionalElements.scrollButtonEnd]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Tabs.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/TextField/TextField.d.ts

@@ -12,10 +12,50 @@ import { InputLabelProps } from '../InputLabel';
 import { SelectProps } from '../Select';
 import { Theme } from '../styles';
 import { TextFieldClasses } from './textFieldClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export interface TextFieldPropsColorOverrides {}
 export interface TextFieldPropsSizeOverrides {}
 
+export interface TextFieldSlots {
+  /**
+   * The component that renders the input.
+   * @default OutlinedInput
+   */
+  input?: React.ElementType;
+  /**
+   * The component that renders the input's label.
+   * @default InputLabel
+   */
+  inputLabel?: React.ElementType;
+  /**
+   * The html input element.
+   * @default 'input'
+   */
+  htmlInput?: React.ElementType;
+  /**
+   * The component that renders the helper text.
+   * @default FormHelperText
+   */
+  formHelperText?: React.ElementType;
+  /**
+   * The component that renders the select.
+   * @default Select
+   */
+  select?: React.ElementType;
+}
+
+export type TextFieldSlotsAndSlotProps<InputPropsType> = CreateSlotsAndSlotProps<
+  TextFieldSlots,
+  {
+    input: SlotProps<React.ElementType<InputPropsType>, {}, TextFieldOwnerState>;
+    inputLabel: SlotProps<React.ElementType<InputLabelProps>, {}, TextFieldOwnerState>;
+    htmlInput: SlotProps<React.ElementType<InputBaseProps['inputProps']>, {}, TextFieldOwnerState>;
+    formHelperText: SlotProps<React.ElementType<FormHelperTextProps>, {}, TextFieldOwnerState>;
+    select: SlotProps<React.ElementType<SelectProps>, {}, TextFieldOwnerState>;
+  }
+>;
+
 export interface BaseTextFieldProps
   extends StandardProps<
     FormControlProps,
@@ -67,6 +107,7 @@ export interface BaseTextFieldProps
   error?: boolean;
   /**
    * Props applied to the [`FormHelperText`](/material-ui/api/form-helper-text/) element.
+   * @deprecated Use `slotProps.formHelperText` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   FormHelperTextProps?: Partial<FormHelperTextProps>;
   /**
@@ -86,10 +127,12 @@ export interface BaseTextFieldProps
   /**
    * Props applied to the [`InputLabel`](/material-ui/api/input-label/) element.
    * Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
+   * @deprecated Use `slotProps.inputLabel` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputLabelProps?: Partial<InputLabelProps>;
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+   * @deprecated Use `slotProps.htmlInput` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   inputProps?: InputBaseProps['inputProps'];
   /**
@@ -140,6 +183,7 @@ export interface BaseTextFieldProps
   select?: boolean;
   /**
    * Props applied to the [`Select`](/material-ui/api/select/) element.
+   * @deprecated Use `slotProps.select` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   SelectProps?: Partial<SelectProps>;
   /**
@@ -160,7 +204,9 @@ export interface BaseTextFieldProps
   value?: unknown;
 }
 
-export interface StandardTextFieldProps extends BaseTextFieldProps {
+export interface StandardTextFieldProps
+  extends BaseTextFieldProps,
+    TextFieldSlotsAndSlotProps<StandardInputProps> {
   /**
    * Callback fired when the value is changed.
    *
@@ -178,11 +224,14 @@ export interface StandardTextFieldProps extends BaseTextFieldProps {
    * It will be a [`FilledInput`](/material-ui/api/filled-input/),
    * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
    * component depending on the `variant` prop value.
+   * @deprecated Use `slotProps.input` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputProps?: Partial<StandardInputProps>;
 }
 
-export interface FilledTextFieldProps extends BaseTextFieldProps {
+export interface FilledTextFieldProps
+  extends BaseTextFieldProps,
+    TextFieldSlotsAndSlotProps<FilledInputProps> {
   /**
    * Callback fired when the value is changed.
    *
@@ -200,11 +249,14 @@ export interface FilledTextFieldProps extends BaseTextFieldProps {
    * It will be a [`FilledInput`](/material-ui/api/filled-input/),
    * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
    * component depending on the `variant` prop value.
+   * @deprecated Use `slotProps.input` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputProps?: Partial<FilledInputProps>;
 }
 
-export interface OutlinedTextFieldProps extends BaseTextFieldProps {
+export interface OutlinedTextFieldProps
+  extends BaseTextFieldProps,
+    TextFieldSlotsAndSlotProps<OutlinedInputProps> {
   /**
    * Callback fired when the value is changed.
    *
@@ -222,6 +274,7 @@ export interface OutlinedTextFieldProps extends BaseTextFieldProps {
    * It will be a [`FilledInput`](/material-ui/api/filled-input/),
    * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
    * component depending on the `variant` prop value.
+   * @deprecated Use `slotProps.input` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputProps?: Partial<OutlinedInputProps>;
 }
@@ -235,6 +288,8 @@ export type TextFieldProps<Variant extends TextFieldVariants = TextFieldVariants
       ? StandardTextFieldProps
       : OutlinedTextFieldProps;
 
+export type TextFieldOwnerState = BaseTextFieldProps;
+
 /**
  * The `TextField` is a convenience wrapper for the most common cases (80%).
  * It cannot be all things to all people, otherwise the API would grow out of control.
@@ -285,4 +340,4 @@ export default function TextField<Variant extends TextFieldVariants>(
      */
     variant?: Variant;
   } & Omit<TextFieldProps, 'variant'>,
-): JSX.Element;
+): React.JSX.Element;

package/TextField/TextField.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["autoComplete", "autoFocus", "children", "className", "color", "defaultValue", "disabled", "error", "FormHelperTextProps", "fullWidth", "helperText", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -18,6 +15,7 @@ import FormControl from '../FormControl';
 import FormHelperText from '../FormHelperText';
 import Select from '../Select';
 import { getTextFieldUtilityClass } from './textFieldClasses';
+import useSlot from '../utils/useSlot';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiTextField');
 const variantComponent = {
@@ -78,41 +76,44 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     name: 'MuiTextField'
   });
   const {
-      autoComplete,
-      autoFocus = false,
-      children,
-      className,
-      color = 'primary',
-      defaultValue,
-      disabled = false,
-      error = false,
-      FormHelperTextProps,
-      fullWidth = false,
-      helperText,
-      id: idOverride,
-      InputLabelProps,
-      inputProps,
-      InputProps,
-      inputRef,
-      label,
-      maxRows,
-      minRows,
-      multiline = false,
-      name,
-      onBlur,
-      onChange,
-      onFocus,
-      placeholder,
-      required = false,
-      rows,
-      select = false,
-      SelectProps,
-      type,
-      value,
-      variant = 'outlined'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    autoComplete,
+    autoFocus = false,
+    children,
+    className,
+    color = 'primary',
+    defaultValue,
+    disabled = false,
+    error = false,
+    FormHelperTextProps: FormHelperTextPropsProp,
+    fullWidth = false,
+    helperText,
+    id: idOverride,
+    InputLabelProps: InputLabelPropsProp,
+    inputProps: inputPropsProp,
+    InputProps: InputPropsProp,
+    inputRef,
+    label,
+    maxRows,
+    minRows,
+    multiline = false,
+    name,
+    onBlur,
+    onChange,
+    onFocus,
+    placeholder,
+    required = false,
+    rows,
+    select = false,
+    SelectProps: SelectPropsProp,
+    slots = {},
+    slotProps = {},
+    type,
+    value,
+    variant = 'outlined',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     autoFocus,
     color,
     disabled,
@@ -122,32 +123,70 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     required,
     select,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   if (process.env.NODE_ENV !== 'production') {
     if (select && !children) {
       console.error('MUI: `children` must be passed when using the `TextField` component with `select`.');
     }
   }
-  const InputMore = {};
+  const id = useId(idOverride);
+  const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
+  const inputLabelId = label && id ? `${id}-label` : undefined;
+  const InputComponent = variantComponent[variant];
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      input: InputPropsProp,
+      inputLabel: InputLabelPropsProp,
+      htmlInput: inputPropsProp,
+      formHelperText: FormHelperTextPropsProp,
+      select: SelectPropsProp,
+      ...slotProps
+    }
+  };
+  const inputAdditionalProps = {};
+  const inputLabelSlotProps = externalForwardedProps.slotProps.inputLabel;
   if (variant === 'outlined') {
-    if (InputLabelProps && typeof InputLabelProps.shrink !== 'undefined') {
-      InputMore.notched = InputLabelProps.shrink;
+    if (inputLabelSlotProps && typeof inputLabelSlotProps.shrink !== 'undefined') {
+      inputAdditionalProps.notched = inputLabelSlotProps.shrink;
     }
-    InputMore.label = label;
+    inputAdditionalProps.label = label;
   }
   if (select) {
     // unset defaults from textbox inputs
-    if (!SelectProps || !SelectProps.native) {
-      InputMore.id = undefined;
+    if (!SelectPropsProp || !SelectPropsProp.native) {
+      inputAdditionalProps.id = undefined;
     }
-    InputMore['aria-describedby'] = undefined;
+    inputAdditionalProps['aria-describedby'] = undefined;
   }
-  const id = useId(idOverride);
-  const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
-  const inputLabelId = label && id ? `${id}-label` : undefined;
-  const InputComponent = variantComponent[variant];
-  const InputElement = /*#__PURE__*/_jsx(InputComponent, _extends({
+  const [InputSlot, inputProps] = useSlot('input', {
+    elementType: InputComponent,
+    externalForwardedProps,
+    additionalProps: inputAdditionalProps,
+    ownerState
+  });
+  const [InputLabelSlot, inputLabelProps] = useSlot('inputLabel', {
+    elementType: InputLabel,
+    externalForwardedProps,
+    ownerState
+  });
+  const [HtmlInputSlot, htmlInputProps] = useSlot('htmlInput', {
+    elementType: 'input',
+    externalForwardedProps,
+    ownerState
+  });
+  const [FormHelperTextSlot, formHelperTextProps] = useSlot('formHelperText', {
+    elementType: FormHelperText,
+    externalForwardedProps,
+    ownerState
+  });
+  const [SelectSlot, selectProps] = useSlot('select', {
+    elementType: Select,
+    externalForwardedProps,
+    ownerState
+  });
+  const InputElement = /*#__PURE__*/_jsx(InputSlot, {
     "aria-describedby": helperTextId,
     autoComplete: autoComplete,
     autoFocus: autoFocus,
@@ -166,9 +205,13 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     onChange: onChange,
     onFocus: onFocus,
     placeholder: placeholder,
-    inputProps: inputProps
-  }, InputMore, InputProps));
-  return /*#__PURE__*/_jsxs(TextFieldRoot, _extends({
+    inputProps: htmlInputProps,
+    slots: {
+      input: slots.htmlInput ? HtmlInputSlot : undefined
+    },
+    ...inputProps
+  });
+  return /*#__PURE__*/_jsxs(TextFieldRoot, {
     className: clsx(classes.root, className),
     disabled: disabled,
     error: error,
@@ -177,27 +220,27 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     required: required,
     color: color,
     variant: variant,
-    ownerState: ownerState
-  }, other, {
-    children: [label != null && label !== '' && /*#__PURE__*/_jsx(InputLabel, _extends({
+    ownerState: ownerState,
+    ...other,
+    children: [label != null && label !== '' && /*#__PURE__*/_jsx(InputLabelSlot, {
       htmlFor: id,
-      id: inputLabelId
-    }, InputLabelProps, {
+      id: inputLabelId,
+      ...inputLabelProps,
       children: label
-    })), select ? /*#__PURE__*/_jsx(Select, _extends({
+    }), select ? /*#__PURE__*/_jsx(SelectSlot, {
       "aria-describedby": helperTextId,
       id: id,
       labelId: inputLabelId,
       value: value,
-      input: InputElement
-    }, SelectProps, {
+      input: InputElement,
+      ...selectProps,
       children: children
-    })) : InputElement, helperText && /*#__PURE__*/_jsx(FormHelperText, _extends({
-      id: helperTextId
-    }, FormHelperTextProps, {
+    }) : InputElement, helperText && /*#__PURE__*/_jsx(FormHelperTextSlot, {
+      id: helperTextId,
+      ...formHelperTextProps,
       children: helperText
-    }))]
-  }));
+    })]
+  });
 });
 process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -250,6 +293,7 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
   error: PropTypes.bool,
   /**
    * Props applied to the [`FormHelperText`](/material-ui/api/form-helper-text/) element.
+   * @deprecated Use `slotProps.formHelperText` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   FormHelperTextProps: PropTypes.object,
   /**
@@ -269,10 +313,12 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
   /**
    * Props applied to the [`InputLabel`](/material-ui/api/input-label/) element.
    * Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
+   * @deprecated Use `slotProps.inputLabel` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputLabelProps: PropTypes.object,
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+   * @deprecated Use `slotProps.htmlInput` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   inputProps: PropTypes.object,
   /**
@@ -280,6 +326,7 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
    * It will be a [`FilledInput`](/material-ui/api/filled-input/),
    * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
    * component depending on the `variant` prop value.
+   * @deprecated Use `slotProps.input` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputProps: PropTypes.object,
   /**
@@ -348,12 +395,35 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
   select: PropTypes.bool,
   /**
    * Props applied to the [`Select`](/material-ui/api/select/) element.
+   * @deprecated Use `slotProps.select` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   SelectProps: PropTypes.object,
   /**
    * The size of the component.
    */
   size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({
+    formHelperText: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    htmlInput: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    inputLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    select: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    formHelperText: PropTypes.elementType,
+    htmlInput: PropTypes.elementType,
+    input: PropTypes.elementType,
+    inputLabel: PropTypes.elementType,
+    select: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */