@mui/material 5.14.1 → 5.14.3

package/Accordion/Accordion.d.ts

@@ -6,9 +6,12 @@ import { AccordionClasses } from './accordionClasses';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { ExtendPaperTypeMap } from '../Paper/Paper';
 
-export type AccordionTypeMap<P = {}, D extends React.ElementType = 'div'> = ExtendPaperTypeMap<
+export type AccordionTypeMap<
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'div',
+> = ExtendPaperTypeMap<
   {
-    props: P & {
+    props: AdditionalProps & {
       /**
        * The content of the component.
        */
@@ -62,7 +65,7 @@ export type AccordionTypeMap<P = {}, D extends React.ElementType = 'div'> = Exte
        */
       TransitionProps?: TransitionProps;
     };
-    defaultComponent: D;
+    defaultComponent: DefaultComponent;
   },
   'onChange' | 'classes'
 >;
@@ -81,8 +84,10 @@ export type AccordionTypeMap<P = {}, D extends React.ElementType = 'div'> = Exte
 declare const Accordion: OverridableComponent<AccordionTypeMap>;
 
 export type AccordionProps<
-  D extends React.ElementType = AccordionTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<AccordionTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = AccordionTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<AccordionTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Accordion;

package/AccordionSummary/AccordionSummary.d.ts

@@ -6,10 +6,10 @@ import { Theme } from '..';
 import { AccordionSummaryClasses } from './accordionSummaryClasses';
 
 export type AccordionSummaryTypeMap<
-  P = {},
-  D extends React.ElementType = 'div',
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'div',
 > = ExtendButtonBaseTypeMap<{
-  props: P & {
+  props: AdditionalProps & {
     /**
      * The content of the component.
      */
@@ -27,7 +27,7 @@ export type AccordionSummaryTypeMap<
      */
     sx?: SxProps<Theme>;
   };
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }>;
 
 /**
@@ -44,8 +44,10 @@ export type AccordionSummaryTypeMap<
 declare const AccordionSummary: ExtendButtonBase<AccordionSummaryTypeMap>;
 
 export type AccordionSummaryProps<
-  D extends React.ElementType = AccordionSummaryTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<AccordionSummaryTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = AccordionSummaryTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<AccordionSummaryTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default AccordionSummary;

package/AppBar/AppBar.d.ts

@@ -8,9 +8,12 @@ import { ExtendPaperTypeMap } from '../Paper/Paper';
 
 export interface AppBarPropsColorOverrides {}
 
-export type AppBarTypeMap<P = {}, D extends React.ElementType = 'header'> = ExtendPaperTypeMap<
+export type AppBarTypeMap<
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'header',
+> = ExtendPaperTypeMap<
   {
-    props: P & {
+    props: AdditionalProps & {
       /**
        * Override or extend the styles applied to the component.
        */
@@ -39,7 +42,7 @@ export type AppBarTypeMap<P = {}, D extends React.ElementType = 'header'> = Exte
        */
       sx?: SxProps<Theme>;
     };
-    defaultComponent: D;
+    defaultComponent: DefaultComponent;
   },
   'position' | 'color' | 'classes'
 >;
@@ -59,8 +62,10 @@ export type AppBarTypeMap<P = {}, D extends React.ElementType = 'header'> = Exte
 declare const AppBar: OverridableComponent<AppBarTypeMap>;
 
 export type AppBarProps<
-  D extends React.ElementType = AppBarTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<AppBarTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = AppBarTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<AppBarTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default AppBar;

package/Autocomplete/Autocomplete.d.ts

@@ -1,8 +1,4 @@
 import * as React from 'react';
-import { IconButtonProps, InternalStandardProps as StandardProps, Theme } from '@mui/material';
-import { ChipProps, ChipTypeMap } from '@mui/material/Chip';
-import { PaperProps } from '@mui/material/Paper';
-import { PopperProps } from '@mui/material/Popper';
 import { SxProps } from '@mui/system';
 import { OverridableStringUnion } from '@mui/types';
 import {
@@ -13,7 +9,12 @@ import {
   AutocompleteInputChangeReason,
   createFilterOptions,
   UseAutocompleteProps,
+  AutocompleteFreeSoloValueMapping,
 } from '@mui/base';
+import { IconButtonProps, InternalStandardProps as StandardProps, Theme } from '@mui/material';
+import { ChipProps, ChipTypeMap } from '@mui/material/Chip';
+import { PaperProps } from '@mui/material/Paper';
+import { PopperProps } from '@mui/material/Popper';
 import { AutocompleteClasses } from './autocompleteClasses';
 
 export {
@@ -25,16 +26,17 @@ export {
 };
 
 export type AutocompleteOwnerState<
-  T,
+  Value,
   Multiple extends boolean | undefined,
   DisableClearable extends boolean | undefined,
   FreeSolo extends boolean | undefined,
   ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
-> = AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent> & {
+> = AutocompleteProps<Value, Multiple, DisableClearable, FreeSolo, ChipComponent> & {
   disablePortal: boolean;
   expanded: boolean;
   focused: boolean;
   fullWidth: boolean;
+  getOptionLabel: (option: Value | AutocompleteFreeSoloValueMapping<FreeSolo>) => string;
   hasClearIcon: boolean;
   hasPopupIcon: boolean;
   inputFocused: boolean;
@@ -81,12 +83,12 @@ export interface AutocompleteRenderInputParams {
 export interface AutocompletePropsSizeOverrides {}
 
 export interface AutocompleteProps<
-  T,
+  Value,
   Multiple extends boolean | undefined,
   DisableClearable extends boolean | undefined,
   FreeSolo extends boolean | undefined,
   ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
-> extends UseAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>,
+> extends UseAutocompleteProps<Value, Multiple, DisableClearable, FreeSolo>,
     StandardProps<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'children'> {
   /**
    * Props applied to the [`Chip`](/material-ui/api/chip/) element.
@@ -236,29 +238,29 @@ export interface AutocompleteProps<
    * Render the option, use `getOptionLabel` by default.
    *
    * @param {object} props The props to apply on the li element.
-   * @param {T} option The option to render.
+   * @param {Value} option The option to render.
    * @param {object} state The state of each option.
    * @param {object} ownerState The state of the Autocomplete component.
    * @returns {ReactNode}
    */
   renderOption?: (
     props: React.HTMLAttributes<HTMLLIElement>,
-    option: T,
+    option: Value,
     state: AutocompleteRenderOptionState,
-    ownerState: AutocompleteOwnerState<T, Multiple, DisableClearable, FreeSolo, ChipComponent>,
+    ownerState: AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>,
   ) => React.ReactNode;
   /**
    * Render the selected value.
    *
-   * @param {T[]} value The `value` provided to the component.
+   * @param {Value[]} value The `value` provided to the component.
    * @param {function} getTagProps A tag props getter.
    * @param {object} ownerState The state of the Autocomplete component.
    * @returns {ReactNode}
    */
   renderTags?: (
-    value: T[],
+    value: Value[],
     getTagProps: AutocompleteRenderGetTagProps,
-    ownerState: AutocompleteOwnerState<T, Multiple, DisableClearable, FreeSolo, ChipComponent>,
+    ownerState: AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>,
   ) => React.ReactNode;
   /**
    * The size of the component.
@@ -292,9 +294,11 @@ export interface AutocompleteProps<
  * - [Autocomplete API](https://mui.com/material-ui/api/autocomplete/)
  */
 export default function Autocomplete<
-  T,
+  Value,
   Multiple extends boolean | undefined = false,
   DisableClearable extends boolean | undefined = false,
   FreeSolo extends boolean | undefined = false,
   ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
->(props: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>): JSX.Element;
+>(
+  props: AutocompleteProps<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>,
+): JSX.Element;

package/Autocomplete/Autocomplete.js

@@ -373,6 +373,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     props: inProps,
     name: 'MuiAutocomplete'
   });
+
   /* eslint-disable @typescript-eslint/no-unused-vars */
   const {
       autoComplete = false,
@@ -401,10 +402,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       freeSolo = false,
       fullWidth = false,
       getLimitTagsText = more => `+${more}`,
-      getOptionLabel = option => {
-        var _option$label;
-        return (_option$label = option.label) != null ? _option$label : option;
-      },
+      getOptionLabel: getOptionLabelProp,
       groupBy,
       handleHomeEndKeys = !props.freeSolo,
       includeInputInList = false,
@@ -469,6 +467,11 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     } = _getListboxProps,
     otherListboxProps = _objectWithoutPropertiesLoose(_getListboxProps, _excluded2);
   const combinedListboxRef = useForkRef(listboxRef, externalListboxRef);
+  const defaultGetOptionLabel = option => {
+    var _option$label;
+    return (_option$label = option.label) != null ? _option$label : option;
+  };
+  const getOptionLabel = getOptionLabelProp || defaultGetOptionLabel;
 
   // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
   const ownerState = _extends({}, props, {
@@ -476,6 +479,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     expanded,
     focused,
     fullWidth,
+    getOptionLabel,
     hasClearIcon,
     hasPopupIcon,
     inputFocused: focusedTag === -1,
@@ -779,9 +783,9 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * A function that determines the filtered options to be rendered on search.
    *
    * @default createFilterOptions()
-   * @param {T[]} options The options to render.
+   * @param {Value[]} options The options to render.
    * @param {object} state The state of the component.
-   * @returns {T[]}
+   * @returns {Value[]}
    */
   filterOptions: PropTypes.func,
   /**
@@ -815,7 +819,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   /**
    * Used to determine the disabled state for a given option.
    *
-   * @param {T} option The option to test.
+   * @param {Value} option The option to test.
    * @returns {boolean}
    */
   getOptionDisabled: PropTypes.func,
@@ -825,7 +829,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    *
    * If used in free solo mode, it must accept both the type of the options and a string.
    *
-   * @param {T} option
+   * @param {Value} option
    * @returns {string}
    * @default (option) => option.label ?? option
    */
@@ -834,7 +838,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * If provided, the options will be grouped under the returned string.
    * The groupBy value is also used as the text for group headings when `renderGroup` is not provided.
    *
-   * @param {T} options The options to group.
+   * @param {Value} options The options to group.
    * @returns {string}
    */
   groupBy: PropTypes.func,
@@ -863,8 +867,8 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * Uses strict equality by default.
    * ⚠️ Both arguments need to be handled, an option can only match with one value.
    *
-   * @param {T} option The option to test.
-   * @param {T} value The value to test against.
+   * @param {Value} option The option to test.
+   * @param {Value} value The value to test against.
    * @returns {boolean}
    */
   isOptionEqualToValue: PropTypes.func,
@@ -912,7 +916,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * Callback fired when the value changes.
    *
    * @param {React.SyntheticEvent} event The event source of the callback.
-   * @param {T|T[]} value The new value of the component.
+   * @param {Value|Value[]} value The new value of the component.
    * @param {string} reason One of "createOption", "selectOption", "removeOption", "blur" or "clear".
    * @param {string} [details]
    */
@@ -929,7 +933,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * Callback fired when the highlight option changes.
    *
    * @param {React.SyntheticEvent} event The event source of the callback.
-   * @param {T} option The highlighted option.
+   * @param {Value} option The highlighted option.
    * @param {string} reason Can be: `"keyboard"`, `"auto"`, `"mouse"`, `"touch"`.
    */
   onHighlightChange: PropTypes.func,
@@ -1006,7 +1010,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * Render the option, use `getOptionLabel` by default.
    *
    * @param {object} props The props to apply on the li element.
-   * @param {T} option The option to render.
+   * @param {Value} option The option to render.
    * @param {object} state The state of each option.
    * @param {object} ownerState The state of the Autocomplete component.
    * @returns {ReactNode}
@@ -1015,7 +1019,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   /**
    * Render the selected value.
    *
-   * @param {T[]} value The `value` provided to the component.
+   * @param {Value[]} value The `value` provided to the component.
    * @param {function} getTagProps A tag props getter.
    * @param {object} ownerState The state of the Autocomplete component.
    * @returns {ReactNode}

package/Avatar/Avatar.d.ts

@@ -7,8 +7,11 @@ import { AvatarClasses } from './avatarClasses';
 
 export interface AvatarPropsVariantOverrides {}
 
-export interface AvatarTypeMap<P = {}, D extends React.ElementType = 'div'> {
-  props: P & {
+export interface AvatarTypeMap<
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'div',
+> {
+  props: AdditionalProps & {
     /**
      * Used in combination with `src` or `srcSet` to
      * provide an alt attribute for the rendered `img` element.
@@ -56,7 +59,7 @@ export interface AvatarTypeMap<P = {}, D extends React.ElementType = 'div'> {
       AvatarPropsVariantOverrides
     >;
   };
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }
 
 /**
@@ -72,8 +75,10 @@ export interface AvatarTypeMap<P = {}, D extends React.ElementType = 'div'> {
 declare const Avatar: OverridableComponent<AvatarTypeMap>;
 
 export type AvatarProps<
-  D extends React.ElementType = AvatarTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<AvatarTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = AvatarTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<AvatarTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Avatar;

package/AvatarGroup/AvatarGroup.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { InternalStandardProps as StandardProps, Theme } from '@mui/material';
 import { OverridableStringUnion } from '@mui/types';
 import { SxProps } from '@mui/system';
+import { InternalStandardProps as StandardProps, Theme } from '@mui/material';
 import { AvatarGroupClasses } from './avatarGroupClasses';
 import Avatar from '../Avatar';
 

package/Backdrop/Backdrop.d.ts

@@ -8,8 +8,11 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export interface BackdropComponentsPropsOverrides {}
 
-export interface BackdropTypeMap<P = {}, D extends React.ElementType = 'div'> {
-  props: P &
+export interface BackdropTypeMap<
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'div',
+> {
+  props: AdditionalProps &
     Partial<Omit<FadeProps, 'children'>> & {
       /**
        * The content of the component.
@@ -92,7 +95,7 @@ export interface BackdropTypeMap<P = {}, D extends React.ElementType = 'div'> {
         TransitionProps & { children: React.ReactElement<any, any> }
       >;
     };
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }
 
 type BackdropRootProps = NonNullable<BackdropTypeMap['props']['componentsProps']>['root'];
@@ -113,8 +116,10 @@ export declare const BackdropRoot: React.FC<BackdropRootProps>;
 declare const Backdrop: OverridableComponent<BackdropTypeMap>;
 
 export type BackdropProps<
-  D extends React.ElementType = BackdropTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<BackdropTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = BackdropTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<BackdropTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Backdrop;

package/Badge/Badge.d.ts

@@ -15,8 +15,11 @@ export interface BadgeOrigin {
   horizontal: 'left' | 'right';
 }
 
-export type BadgeTypeMap<D extends React.ElementType = 'span', P = {}> = ExtendBadgeTypeMap<{
-  props: P & {
+export type BadgeTypeMap<
+  DefaultComponent extends React.ElementType = 'span',
+  AdditionalProps = {},
+> = ExtendBadgeTypeMap<{
+  props: AdditionalProps & {
     /**
      * The anchor of the badge.
      * @default {
@@ -80,7 +83,7 @@ export type BadgeTypeMap<D extends React.ElementType = 'span', P = {}> = ExtendB
      */
     variant?: OverridableStringUnion<'standard' | 'dot', BadgePropsVariantOverrides>;
   };
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }>;
 
 type BadgeRootProps = NonNullable<BadgeTypeMap['props']['slotProps']>['root'];
@@ -103,8 +106,10 @@ export declare const BadgeMark: React.FC<BadgeBadgeProps>;
 declare const Badge: OverridableComponent<BadgeTypeMap>;
 
 export type BadgeProps<
-  D extends React.ElementType = BadgeTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<BadgeTypeMap<D, P>, D>;
+  RootComponent extends React.ElementType = BadgeTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<BadgeTypeMap<RootComponent, AdditionalProps>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Badge;

package/BottomNavigation/BottomNavigation.d.ts

@@ -4,8 +4,11 @@ import { Theme } from '..';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { BottomNavigationClasses } from './bottomNavigationClasses';
 
-export interface BottomNavigationTypeMap<P = {}, D extends React.ElementType = 'div'> {
-  props: P & {
+export interface BottomNavigationTypeMap<
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'div',
+> {
+  props: AdditionalProps & {
     /**
      * The content of the component.
      */
@@ -36,7 +39,7 @@ export interface BottomNavigationTypeMap<P = {}, D extends React.ElementType = '
      */
     value?: any;
   };
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }
 /**
  *
@@ -51,8 +54,10 @@ export interface BottomNavigationTypeMap<P = {}, D extends React.ElementType = '
 declare const BottomNavigation: OverridableComponent<BottomNavigationTypeMap>;
 
 export type BottomNavigationProps<
-  D extends React.ElementType = BottomNavigationTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<BottomNavigationTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = BottomNavigationTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<BottomNavigationTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default BottomNavigation;

package/BottomNavigationAction/BottomNavigationAction.d.ts

@@ -6,10 +6,10 @@ import { OverrideProps } from '../OverridableComponent';
 import { BottomNavigationActionClasses } from './bottomNavigationActionClasses';
 
 export type BottomNavigationActionTypeMap<
-  P,
-  D extends React.ElementType,
+  AdditionalProps,
+  DefaultComponent extends React.ElementType,
 > = ExtendButtonBaseTypeMap<{
-  props: P & {
+  props: AdditionalProps & {
     /**
      * This prop isn't supported.
      * Use the `component` prop if you need to change the children structure.
@@ -44,7 +44,7 @@ export type BottomNavigationActionTypeMap<
      */
     value?: any;
   };
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }>;
 
 /**
@@ -63,8 +63,10 @@ declare const BottomNavigationAction: ExtendButtonBase<
 >;
 
 export type BottomNavigationActionProps<
-  D extends React.ElementType = ButtonBaseTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<BottomNavigationActionTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = ButtonBaseTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<BottomNavigationActionTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default BottomNavigationAction;

package/Box/Box.d.ts

@@ -16,8 +16,8 @@ import { Theme as MaterialTheme } from '../styles';
 declare const Box: OverridableComponent<BoxTypeMap<{}, 'div', MaterialTheme>>;
 
 export type BoxProps<
-  D extends React.ElementType = BoxTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<BoxTypeMap<P, D, MaterialTheme>, D>;
+  RootComponent extends React.ElementType = BoxTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<BoxTypeMap<AdditionalProps, RootComponent, MaterialTheme>, RootComponent>;
 
 export default Box;

package/Breadcrumbs/Breadcrumbs.d.ts

@@ -12,8 +12,11 @@ export interface BreadcrumbsOwnerState extends BreadcrumbsProps {
   expanded: boolean;
 }
 
-export interface BreadcrumbsTypeMap<P = {}, D extends React.ElementType = 'nav'> {
-  props: P & {
+export interface BreadcrumbsTypeMap<
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'nav',
+> {
+  props: AdditionalProps & {
     /**
      * The content of the component.
      */
@@ -79,7 +82,7 @@ export interface BreadcrumbsTypeMap<P = {}, D extends React.ElementType = 'nav'>
      */
     sx?: SxProps<Theme>;
   };
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }
 
 /**
@@ -95,8 +98,10 @@ export interface BreadcrumbsTypeMap<P = {}, D extends React.ElementType = 'nav'>
 declare const Breadcrumbs: OverridableComponent<BreadcrumbsTypeMap>;
 
 export type BreadcrumbsProps<
-  D extends React.ElementType = BreadcrumbsTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<BreadcrumbsTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = BreadcrumbsTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<BreadcrumbsTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Breadcrumbs;

package/Button/Button.d.ts

@@ -13,10 +13,10 @@ export interface ButtonPropsColorOverrides {}
 export interface ButtonPropsSizeOverrides {}
 
 export type ButtonTypeMap<
-  P = {},
-  D extends React.ElementType = 'button',
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'button',
 > = ExtendButtonBaseTypeMap<{
-  props: P & {
+  props: AdditionalProps & {
     /**
      * The content of the component.
      */
@@ -87,7 +87,7 @@ export type ButtonTypeMap<
       ButtonPropsVariantOverrides
     >;
   };
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }>;
 
 /**
@@ -95,18 +95,18 @@ export type ButtonTypeMap<
  * This component has an additional overload if the `href` prop is set which
  * can make extension quite tricky
  */
-export interface ExtendButtonTypeMap<M extends OverridableTypeMap> {
-  props: M['props'] &
-    (M['props'] extends { classes?: Record<string, string> }
+export interface ExtendButtonTypeMap<TypeMap extends OverridableTypeMap> {
+  props: TypeMap['props'] &
+    (TypeMap['props'] extends { classes?: Record<string, string> }
       ? DistributiveOmit<ButtonTypeMap['props'], 'classes'>
       : ButtonTypeMap['props']);
-  defaultComponent: M['defaultComponent'];
+  defaultComponent: TypeMap['defaultComponent'];
 }
 
-export type ExtendButton<M extends OverridableTypeMap> = ((
-  props: { href: string } & OverrideProps<ExtendButtonBaseTypeMap<M>, 'a'>,
+export type ExtendButton<TypeMap extends OverridableTypeMap> = ((
+  props: { href: string } & OverrideProps<ExtendButtonBaseTypeMap<TypeMap>, 'a'>,
 ) => JSX.Element) &
-  OverridableComponent<ExtendButtonBaseTypeMap<M>>;
+  OverridableComponent<ExtendButtonBaseTypeMap<TypeMap>>;
 
 /**
  *
@@ -123,8 +123,10 @@ export type ExtendButton<M extends OverridableTypeMap> = ((
 declare const Button: ExtendButtonBase<ButtonTypeMap>;
 
 export type ButtonProps<
-  D extends React.ElementType = ButtonTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<ButtonTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = ButtonTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<ButtonTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Button;

package/Button/Button.js

@@ -307,7 +307,7 @@ process.env.NODE_ENV !== "production" ? Button.propTypes /* remove-proptypes */
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+  component: PropTypes.elementType,
   /**
    * If `true`, the component is disabled.
    * @default false