@mui/material 7.3.8 → 7.3.10

package/esm/Fab/Fab.d.ts

@@ -16,48 +16,48 @@ export interface FabOwnProps {
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<FabClasses>;
+  classes?: Partial<FabClasses> | undefined;
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the
    * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    * @default 'default'
    */
-  color?: OverridableStringUnion<PropTypes.Color | 'success' | 'error' | 'info' | 'warning', FabPropsColorOverrides>;
+  color?: OverridableStringUnion<PropTypes.Color | 'success' | 'error' | 'info' | 'warning', FabPropsColorOverrides> | undefined;
   /**
    * If `true`, the component is disabled.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * If `true`, the  keyboard focus ripple is disabled.
    * @default false
    */
-  disableFocusRipple?: boolean;
+  disableFocusRipple?: boolean | undefined;
   /**
    * If `true`, the ripple effect is disabled.
    */
-  disableRipple?: boolean;
+  disableRipple?: boolean | undefined;
   /**
    * The URL to link to when the button is clicked.
    * If defined, an `a` element will be used as the root node.
    */
-  href?: string;
+  href?: string | undefined;
   /**
    * The size of the component.
    * `small` is equivalent to the dense button styling.
    * @default 'large'
    */
-  size?: OverridableStringUnion<'small' | 'medium' | 'large', FabPropsSizeOverrides>;
+  size?: OverridableStringUnion<'small' | 'medium' | 'large', FabPropsSizeOverrides> | undefined;
   /**
    * The variant to use.
    * @default 'circular'
    */
-  variant?: OverridableStringUnion<'circular' | 'extended', FabPropsVariantOverrides>;
+  variant?: OverridableStringUnion<'circular' | 'extended', FabPropsVariantOverrides> | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
 }
 export type FabTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'button'> = ExtendButtonBaseTypeMap<{
   props: AdditionalProps & FabOwnProps;
@@ -68,15 +68,15 @@ export type FabTypeMap<AdditionalProps = {}, RootComponent extends React.Element
  *
  * Demos:
  *
- * - [Floating Action Button](https://mui.com/material-ui/react-floating-action-button/)
+ * - [Floating Action Button](https://v7.mui.com/material-ui/react-floating-action-button/)
  *
  * API:
  *
- * - [Fab API](https://mui.com/material-ui/api/fab/)
- * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
+ * - [Fab API](https://v7.mui.com/material-ui/api/fab/)
+ * - inherits [ButtonBase API](https://v7.mui.com/material-ui/api/button-base/)
  */
 declare const Fab: ExtendButtonBase<FabTypeMap>;
 export type FabProps<RootComponent extends React.ElementType = FabTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<FabTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 };
 export default Fab;

package/esm/Fade/Fade.d.ts

@@ -6,7 +6,7 @@ export interface FadeProps extends Omit<TransitionProps, 'children'> {
    * Set this to `false` to disable this behavior.
    * @default true
    */
-  appear?: boolean;
+  appear?: boolean | undefined;
   /**
    * A single child content element.
    */
@@ -15,12 +15,12 @@ export interface FadeProps extends Omit<TransitionProps, 'children'> {
    * The transition timing function.
    * You may specify a single easing or a object containing enter and exit values.
    */
-  easing?: TransitionProps['easing'];
+  easing?: TransitionProps['easing'] | undefined;
   /**
    * If `true`, the component will transition in.
    */
-  in?: boolean;
-  ref?: React.Ref<unknown>;
+  in?: boolean | undefined;
+  ref?: React.Ref<unknown> | undefined;
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
@@ -29,20 +29,20 @@ export interface FadeProps extends Omit<TransitionProps, 'children'> {
    *   exit: theme.transitions.duration.leavingScreen,
    * }
    */
-  timeout?: TransitionProps['timeout'];
+  timeout?: TransitionProps['timeout'] | undefined;
 }
 
 /**
- * The Fade transition is used by the [Modal](https://mui.com/material-ui/react-modal/) component.
+ * The Fade transition is used by the [Modal](https://v7.mui.com/material-ui/react-modal/) component.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  *
  * Demos:
  *
- * - [Transitions](https://mui.com/material-ui/transitions/)
+ * - [Transitions](https://v7.mui.com/material-ui/transitions/)
  *
  * API:
  *
- * - [Fade API](https://mui.com/material-ui/api/fade/)
+ * - [Fade API](https://v7.mui.com/material-ui/api/fade/)
  * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition/#Transition-props)
  */
 export default function Fade(props: FadeProps): React.JSX.Element;

package/esm/Fade/Fade.js

@@ -6,7 +6,7 @@ import { Transition } from 'react-transition-group';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
 import getReactElementRef from '@mui/utils/getReactElementRef';
 import { useTheme } from "../zero-styled/index.js";
-import { reflow, getTransitionProps } from "../transitions/utils.js";
+import { normalizedTransitionCallback, reflow, getTransitionProps, getTransitionChildStyle } from "../transitions/utils.js";
 import useForkRef from "../utils/useForkRef.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
@@ -15,8 +15,18 @@ const styles = {
   },
   entered: {
     opacity: 1
+  },
+  exiting: {
+    opacity: 0
+  },
+  exited: {
+    opacity: 0
   }
 };
+const hiddenStyles = {
+  opacity: 0,
+  visibility: 'hidden'
+};
 
 /**
  * The Fade transition is used by the [Modal](/material-ui/react-modal/) component.
@@ -42,27 +52,12 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     onExiting,
     style,
     timeout = defaultTimeout,
-    // eslint-disable-next-line react/prop-types
-    TransitionComponent = Transition,
     ...other
   } = props;
-  const enableStrictModeCompat = true;
   const nodeRef = React.useRef(null);
   const handleRef = useForkRef(nodeRef, getReactElementRef(children), ref);
-  const normalizedTransitionCallback = callback => maybeIsAppearing => {
-    if (callback) {
-      const node = nodeRef.current;
-
-      // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
-      if (maybeIsAppearing === undefined) {
-        callback(node);
-      } else {
-        callback(node, maybeIsAppearing);
-      }
-    }
-  };
-  const handleEntering = normalizedTransitionCallback(onEntering);
-  const handleEnter = normalizedTransitionCallback((node, isAppearing) => {
+  const handleEntering = normalizedTransitionCallback(nodeRef, onEntering);
+  const handleEnter = normalizedTransitionCallback(nodeRef, (node, isAppearing) => {
     reflow(node); // So the animation always start from the start.
 
     const transitionProps = getTransitionProps({
@@ -72,15 +67,14 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     }, {
       mode: 'enter'
     });
-    node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
     node.style.transition = theme.transitions.create('opacity', transitionProps);
     if (onEnter) {
       onEnter(node, isAppearing);
     }
   });
-  const handleEntered = normalizedTransitionCallback(onEntered);
-  const handleExiting = normalizedTransitionCallback(onExiting);
-  const handleExit = normalizedTransitionCallback(node => {
+  const handleEntered = normalizedTransitionCallback(nodeRef, onEntered);
+  const handleExiting = normalizedTransitionCallback(nodeRef, onExiting);
+  const handleExit = normalizedTransitionCallback(nodeRef, node => {
     const transitionProps = getTransitionProps({
       style,
       timeout,
@@ -88,23 +82,30 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     }, {
       mode: 'exit'
     });
-    node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
     node.style.transition = theme.transitions.create('opacity', transitionProps);
     if (onExit) {
       onExit(node);
     }
   });
-  const handleExited = normalizedTransitionCallback(onExited);
+  const handleExited = normalizedTransitionCallback(nodeRef, node => {
+    // Clear the transition CSS to release the compositor layer when the
+    // element is fully exited (prevents idle CPU usage on fixed elements
+    // like Backdrop). handleEnter re-sets it on the next open.
+    node.style.transition = '';
+    if (onExited) {
+      onExited(node);
+    }
+  });
   const handleAddEndListener = next => {
     if (addEndListener) {
       // Old call signature before `react-transition-group` implemented `nodeRef`
       addEndListener(nodeRef.current, next);
     }
   };
-  return /*#__PURE__*/_jsx(TransitionComponent, {
+  return /*#__PURE__*/_jsx(Transition, {
     appear: appear,
     in: inProp,
-    nodeRef: enableStrictModeCompat ? nodeRef : undefined,
+    nodeRef: nodeRef,
     onEnter: handleEnter,
     onEntered: handleEntered,
     onEntering: handleEntering,
@@ -118,14 +119,9 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
       ownerState,
       ...restChildProps
     }) => {
+      const childStyle = getTransitionChildStyle(state, inProp, styles, hiddenStyles, style, children.props.style);
       return /*#__PURE__*/React.cloneElement(children, {
-        style: {
-          opacity: 0,
-          visibility: state === 'exited' && !inProp ? 'hidden' : undefined,
-          ...styles[state],
-          ...style,
-          ...children.props.style
-        },
+        style: childStyle,
         ref: handleRef,
         ...restChildProps
       });

package/esm/FilledInput/FilledInput.d.ts

@@ -7,35 +7,35 @@ export interface FilledInputProps extends StandardProps<InputBaseProps> {
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<FilledInputClasses>;
+  classes?: Partial<FilledInputClasses> | undefined;
   /**
    * If `true`, the label is hidden.
    * This is used to increase density for a `FilledInput`.
    * Be sure to add `aria-label` to the `input` element.
    * @default false
    */
-  hiddenLabel?: boolean;
+  hiddenLabel?: boolean | undefined;
   /**
    * If `true`, the input will not have an underline.
    * @default false
    */
-  disableUnderline?: boolean;
+  disableUnderline?: boolean | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
 }
 
 /**
  *
  * Demos:
  *
- * - [Text Field](https://mui.com/material-ui/react-text-field/)
+ * - [Text Field](https://v7.mui.com/material-ui/react-text-field/)
  *
  * API:
  *
- * - [FilledInput API](https://mui.com/material-ui/api/filled-input/)
- * - inherits [InputBase API](https://mui.com/material-ui/api/input-base/)
+ * - [FilledInput API](https://v7.mui.com/material-ui/api/filled-input/)
+ * - inherits [InputBase API](https://v7.mui.com/material-ui/api/input-base/)
  */
 declare const FilledInput: ((props: FilledInputProps) => React.JSX.Element) & {
   muiName: string;

package/esm/FilledInput/FilledInput.js

@@ -108,7 +108,7 @@ const FilledInputRoot = styled(InputBaseRoot, {
           borderBottom: `1px solid ${theme.vars ? theme.alpha(theme.vars.palette.common.onBackground, theme.vars.opacity.inputUnderline) : bottomLineColor}`,
           left: 0,
           bottom: 0,
-          content: '"\\00a0"',
+          content: '""',
           position: 'absolute',
           right: 0,
           transition: theme.transitions.create('border-bottom-color', {

package/esm/FormControl/FormControl.d.ts

@@ -10,68 +10,68 @@ export interface FormControlOwnProps {
   /**
    * The content of the component.
    */
-  children?: React.HTMLAttributes<HTMLDivElement>['children'];
+  children?: React.HTMLAttributes<HTMLDivElement>['children'] | undefined;
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<FormControlClasses>;
+  classes?: Partial<FormControlClasses> | undefined;
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the
    * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    * @default 'primary'
    */
-  color?: OverridableStringUnion<'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', FormControlPropsColorOverrides>;
+  color?: OverridableStringUnion<'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', FormControlPropsColorOverrides> | undefined;
   /**
    * If `true`, the label, input and helper text should be displayed in a disabled state.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * If `true`, the label is displayed in an error state.
    * @default false
    */
-  error?: boolean;
+  error?: boolean | undefined;
   /**
    * If `true`, the component will take up the full width of its container.
    * @default false
    */
-  fullWidth?: boolean;
+  fullWidth?: boolean | undefined;
   /**
    * If `true`, the component is displayed in focused state.
    */
-  focused?: boolean;
+  focused?: boolean | undefined;
   /**
    * If `true`, the label is hidden.
    * This is used to increase density for a `FilledInput`.
    * Be sure to add `aria-label` to the `input` element.
    * @default false
    */
-  hiddenLabel?: boolean;
+  hiddenLabel?: boolean | undefined;
   /**
    * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
    * @default 'none'
    */
-  margin?: 'dense' | 'normal' | 'none';
+  margin?: 'dense' | 'normal' | 'none' | undefined;
   /**
    * If `true`, the label will indicate that the `input` is required.
    * @default false
    */
-  required?: boolean;
+  required?: boolean | undefined;
   /**
    * The size of the component.
    * @default 'medium'
    */
-  size?: OverridableStringUnion<'small' | 'medium', FormControlPropsSizeOverrides>;
+  size?: OverridableStringUnion<'small' | 'medium', FormControlPropsSizeOverrides> | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
   /**
    * The variant to use.
    * @default 'outlined'
    */
-  variant?: 'standard' | 'outlined' | 'filled';
+  variant?: 'standard' | 'outlined' | 'filled' | undefined;
 }
 export interface FormControlTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
   props: AdditionalProps & FormControlOwnProps;
@@ -89,7 +89,7 @@ export interface FormControlTypeMap<AdditionalProps = {}, RootComponent extends
  * * Input
  * * InputLabel
  *
- * You can find one composition example below and more going to [the demos](https://mui.com/material-ui/react-text-field/#components).
+ * You can find one composition example below and more going to [the demos](https://v7.mui.com/material-ui/react-text-field/#components).
  *
  * ```jsx
  * <FormControl>
@@ -104,18 +104,18 @@ export interface FormControlTypeMap<AdditionalProps = {}, RootComponent extends
  *
  * Demos:
  *
- * - [Checkbox](https://mui.com/material-ui/react-checkbox/)
- * - [Number Field](https://mui.com/material-ui/react-number-field/)
- * - [Radio Group](https://mui.com/material-ui/react-radio-button/)
- * - [Switch](https://mui.com/material-ui/react-switch/)
- * - [Text Field](https://mui.com/material-ui/react-text-field/)
+ * - [Checkbox](https://v7.mui.com/material-ui/react-checkbox/)
+ * - [Number Field](https://v7.mui.com/material-ui/react-number-field/)
+ * - [Radio Group](https://v7.mui.com/material-ui/react-radio-button/)
+ * - [Switch](https://v7.mui.com/material-ui/react-switch/)
+ * - [Text Field](https://v7.mui.com/material-ui/react-text-field/)
  *
  * API:
  *
- * - [FormControl API](https://mui.com/material-ui/api/form-control/)
+ * - [FormControl API](https://v7.mui.com/material-ui/api/form-control/)
  */
 declare const FormControl: OverridableComponent<FormControlTypeMap>;
 export type FormControlProps<RootComponent extends React.ElementType = FormControlTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<FormControlTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 };
 export default FormControl;

package/esm/FormControlLabel/FormControlLabel.d.ts

@@ -20,11 +20,11 @@ export interface FormControlLabelProps extends StandardProps<React.LabelHTMLAttr
   /**
    * If `true`, the component appears selected.
    */
-  checked?: boolean;
+  checked?: boolean | undefined;
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<FormControlLabelClasses>;
+  classes?: Partial<FormControlLabelClasses> | undefined;
   /**
    * The props used for each slot inside.
    * @default {}
@@ -36,8 +36,8 @@ export interface FormControlLabelProps extends StandardProps<React.LabelHTMLAttr
      * This is unused if disableTypography is true.
      * @default {}
      */
-    typography?: TypographyProps;
-  };
+    typography?: TypographyProps | undefined;
+  } | undefined;
   /**
    * A control element. For instance, it can be a `Radio`, a `Switch` or a `Checkbox`.
    */
@@ -45,15 +45,15 @@ export interface FormControlLabelProps extends StandardProps<React.LabelHTMLAttr
   /**
    * If `true`, the control is disabled.
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * If `true`, the label is rendered as it is passed without an additional typography node.
    */
-  disableTypography?: boolean;
+  disableTypography?: boolean | undefined;
   /**
    * Pass a ref to the `input` element.
    */
-  inputRef?: React.Ref<any>;
+  inputRef?: React.Ref<any> | undefined;
   /**
    * A text or an element to be used in an enclosing label element.
    */
@@ -62,23 +62,23 @@ export interface FormControlLabelProps extends StandardProps<React.LabelHTMLAttr
    * The position of the label.
    * @default 'end'
    */
-  labelPlacement?: 'end' | 'start' | 'top' | 'bottom';
-  name?: string;
+  labelPlacement?: 'end' | 'start' | 'top' | 'bottom' | undefined;
+  name?: string | undefined;
   /**
    * Callback fired when the state is changed.
    *
    * @param {React.SyntheticEvent} event The event source of the callback.
    * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    */
-  onChange?: (event: React.SyntheticEvent, checked: boolean) => void;
+  onChange?: ((event: React.SyntheticEvent, checked: boolean) => void) | undefined;
   /**
    * If `true`, the label will indicate that the `input` is required.
    */
-  required?: boolean;
+  required?: boolean | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
   /**
    * The value of the component.
    */
@@ -91,12 +91,12 @@ export interface FormControlLabelProps extends StandardProps<React.LabelHTMLAttr
  *
  * Demos:
  *
- * - [Checkbox](https://mui.com/material-ui/react-checkbox/)
- * - [Radio Group](https://mui.com/material-ui/react-radio-button/)
- * - [Switch](https://mui.com/material-ui/react-switch/)
+ * - [Checkbox](https://v7.mui.com/material-ui/react-checkbox/)
+ * - [Radio Group](https://v7.mui.com/material-ui/react-radio-button/)
+ * - [Switch](https://v7.mui.com/material-ui/react-switch/)
  *
  * API:
  *
- * - [FormControlLabel API](https://mui.com/material-ui/api/form-control-label/)
+ * - [FormControlLabel API](https://v7.mui.com/material-ui/api/form-control-label/)
  */
 export default function FormControlLabel(props: FormControlLabelProps): React.JSX.Element;

package/esm/FormGroup/FormGroup.d.ts

@@ -11,16 +11,16 @@ export interface FormGroupProps extends StandardProps<React.HTMLAttributes<HTMLD
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<FormGroupClasses>;
+  classes?: Partial<FormGroupClasses> | undefined;
   /**
    * Display group of elements in a compact row.
    * @default false
    */
-  row?: boolean;
+  row?: boolean | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
 }
 
 /**
@@ -30,11 +30,11 @@ export interface FormGroupProps extends StandardProps<React.HTMLAttributes<HTMLD
  *
  * Demos:
  *
- * - [Checkbox](https://mui.com/material-ui/react-checkbox/)
- * - [Switch](https://mui.com/material-ui/react-switch/)
+ * - [Checkbox](https://v7.mui.com/material-ui/react-checkbox/)
+ * - [Switch](https://v7.mui.com/material-ui/react-switch/)
  *
  * API:
  *
- * - [FormGroup API](https://mui.com/material-ui/api/form-group/)
+ * - [FormGroup API](https://v7.mui.com/material-ui/api/form-group/)
  */
 export default function FormGroup(props: FormGroupProps): React.JSX.Element;

package/esm/FormHelperText/FormHelperText.d.ts

@@ -15,40 +15,40 @@ export interface FormHelperTextOwnProps {
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<FormHelperTextClasses>;
+  classes?: Partial<FormHelperTextClasses> | undefined;
   /**
    * If `true`, the helper text should be displayed in a disabled state.
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * If `true`, helper text should be displayed in an error state.
    */
-  error?: boolean;
+  error?: boolean | undefined;
   /**
    * If `true`, the helper text should use filled classes key.
    */
-  filled?: boolean;
+  filled?: boolean | undefined;
   /**
    * If `true`, the helper text should use focused classes key.
    */
-  focused?: boolean;
+  focused?: boolean | undefined;
   /**
    * If `dense`, will adjust vertical spacing. This is normally obtained via context from
    * FormControl.
    */
-  margin?: 'dense';
+  margin?: 'dense' | undefined;
   /**
    * If `true`, the helper text should use required classes key.
    */
-  required?: boolean;
+  required?: boolean | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
   /**
    * The variant to use.
    */
-  variant?: OverridableStringUnion<'standard' | 'outlined' | 'filled', FormHelperTextPropsVariantOverrides>;
+  variant?: OverridableStringUnion<'standard' | 'outlined' | 'filled', FormHelperTextPropsVariantOverrides> | undefined;
 }
 export interface FormHelperTextTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'p'> {
   props: AdditionalProps & FormHelperTextOwnProps;
@@ -58,15 +58,15 @@ export interface FormHelperTextTypeMap<AdditionalProps = {}, RootComponent exten
  *
  * Demos:
  *
- * - [Number Field](https://mui.com/material-ui/react-number-field/)
- * - [Text Field](https://mui.com/material-ui/react-text-field/)
+ * - [Number Field](https://v7.mui.com/material-ui/react-number-field/)
+ * - [Text Field](https://v7.mui.com/material-ui/react-text-field/)
  *
  * API:
  *
- * - [FormHelperText API](https://mui.com/material-ui/api/form-helper-text/)
+ * - [FormHelperText API](https://v7.mui.com/material-ui/api/form-helper-text/)
  */
 declare const FormHelperText: OverridableComponent<FormHelperTextTypeMap>;
 export type FormHelperTextProps<RootComponent extends React.ElementType = FormHelperTextTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<FormHelperTextTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 };
 export default FormHelperText;