[core] Update type defs to use OverridableComponent (mui#20110)

packages/material-ui/src/Badge/Badge.d.ts

@@ -1,54 +1,53 @@
 import * as React from 'react';
-import { StandardProps, PropTypes } from '..';
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export interface BadgeOrigin {
   vertical: 'top' | 'bottom';
   horizontal: 'left' | 'right';
 }
 
-export interface BadgeProps
-  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, BadgeClassKey> {
-  /**
-   * The anchor of the badge.
-   */
-  anchorOrigin?: BadgeOrigin;
-  /**
-   * Wrapped shape the badge should overlap.
-   */
-  overlap?: 'rectangle' | 'circle';
-  /**
-   * The content rendered within the badge.
-   */
-  badgeContent?: React.ReactNode;
-  /**
-   * The badge will be added relative to this node.
-   */
-  children: React.ReactNode;
-  /**
-   * The color of the component. It supports those theme colors that make sense for this component.
-   */
-  color?: 'primary' | 'secondary' | 'default' | 'error';
-  /**
-   * The component used for the root node.
-   * Either a string to use a DOM element or a component.
-   */
-  component?: React.ElementType<React.HTMLAttributes<HTMLDivElement>>;
-  /**
-   * If `true`, the badge will be invisible.
-   */
-  invisible?: boolean;
-  /**
-   * Max count to show.
-   */
-  max?: number;
-  /**
-   * Controls whether the badge is hidden when `badgeContent` is zero.
-   */
-  showZero?: boolean;
-  /**
-   * The variant to use.
-   */
-  variant?: 'standard' | 'dot';
+export interface BadgeTypeMap<P = {}, D extends React.ElementType = 'div'> {
+  props: P & {
+    /**
+     * The anchor of the badge.
+     */
+    anchorOrigin?: BadgeOrigin;
+    /**
+     * Wrapped shape the badge should overlap.
+     */
+    overlap?: 'rectangle' | 'circle';
+    /**
+     * The content rendered within the badge.
+     */
+    badgeContent?: React.ReactNode;
+    /**
+     * The badge will be added relative to this node.
+     */
+    children: React.ReactNode;
+    /**
+     * The color of the component.
+     * It supports those theme colors that make sense for this component.
+     */
+    color?: 'primary' | 'secondary' | 'default' | 'error';
+    /**
+     * If `true`, the badge will be invisible.
+     */
+    invisible?: boolean;
+    /**
+     * Max count to show.
+     */
+    max?: number;
+    /**
+     * Controls whether the badge is hidden when `badgeContent` is zero.
+     */
+    showZero?: boolean;
+    /**
+     * The variant to use.
+     */
+    variant?: 'standard' | 'dot';
+  };
+  defaultComponent: D;
+  classKey: BadgeClassKey;
 }
 
 export type BadgeClassKey =
@@ -67,4 +66,11 @@ export type BadgeClassKey =
   | 'anchorOriginTopLeftCircle'
   | 'invisible';
 
-export default function Badge(props: BadgeProps): JSX.Element | null;
+declare const Badge: OverridableComponent<BadgeTypeMap>;
+
+export type BadgeProps<
+  D extends React.ElementType = BadgeTypeMap['defaultComponent'],
+  P = {}
+> = OverrideProps<BadgeTypeMap<P, D>, D>;
+
+export default Badge;

packages/material-ui/src/BottomNavigation/BottomNavigation.d.ts

@@ -1,35 +1,36 @@
 import * as React from 'react';
-import { StandardProps } from '..';
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
-export interface BottomNavigationProps
-  extends StandardProps<
-    React.HTMLAttributes<HTMLDivElement>,
-    BottomNavigationClassKey,
-    'onChange'
-  > {
-  /**
-   * The component used for the root node.
-   * Either a string to use a DOM element or a component.
-   */
-  component?: React.ElementType<React.HTMLAttributes<HTMLDivElement>>;
-  /**
-   * Callback fired when the value changes.
-   *
-   * @param {object} event The event source of the callback.
-   * @param {any} value We default to the index of the child.
-   */
-  onChange?(event: React.ChangeEvent<{}>, value: any): void;
-  /**
-   * If `true`, all `BottomNavigationAction`s will show their labels.
-   * By default, only the selected `BottomNavigationAction` will show its label.
-   */
-  showLabels?: boolean;
-  /**
-   * The value of the currently selected `BottomNavigationAction`.
-   */
-  value?: any;
+export interface BottomNavigationTypeMap<P = {}, D extends React.ElementType = 'div'> {
+  props: P & {
+    /**
+     * Callback fired when the value changes.
+     *
+     * @param {object} event The event source of the callback.
+     * @param {any} value We default to the index of the child.
+     */
+    onChange?: (event: React.ChangeEvent<{}>, value: any) => void;
+    /**
+     * If `true`, all `BottomNavigationAction`s will show their labels.
+     * By default, only the selected `BottomNavigationAction` will show its label.
+     */
+    showLabels?: boolean;
+    /**
+     * The value of the currently selected `BottomNavigationAction`.
+     */
+    value?: any;
+  };
+  defaultComponent: D;
+  classKey: BottomNavigationClassKey;
 }
 
+declare const BottomNavigation: OverridableComponent<BottomNavigationTypeMap>;
+
 export type BottomNavigationClassKey = 'root';
 
-export default function BottomNavigation(props: BottomNavigationProps): JSX.Element;
+export type BottomNavigationProps<
+  D extends React.ElementType = BottomNavigationTypeMap['defaultComponent'],
+  P = {}
+> = OverrideProps<BottomNavigationTypeMap<P, D>, D>;
+
+export default BottomNavigation;

packages/material-ui/src/CardContent/CardContent.d.ts

@@ -1,13 +1,19 @@
 import * as React from 'react';
-import { StandardProps } from '..';
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
-export interface CardContentProps
-  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, CardContentClassKey> {
-  component?: React.ElementType<React.HTMLAttributes<HTMLDivElement>>;
+export interface CardContentTypeMap<P = {}, D extends React.ElementType = 'div'> {
+  props: P;
+  defaultComponent: D;
+  classKey: CardContentClassKey;
 }
 
+declare const CardContent: OverridableComponent<CardContentTypeMap>;
+
 export type CardContentClassKey = 'root';
 
-declare const CardContent: React.ComponentType<CardContentProps>;
+export type CardContentProps<
+  D extends React.ElementType = CardContentTypeMap['defaultComponent'],
+  P = {}
+> = OverrideProps<CardContentTypeMap<P, D>, D>;
 
 export default CardContent;

packages/material-ui/src/CardHeader/CardHeader.d.ts

@@ -1,21 +1,28 @@
 import * as React from 'react';
-import { StandardProps } from '..';
 import { TypographyProps } from '../Typography';
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
-export interface CardHeaderProps
-  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, CardHeaderClassKey, 'title'> {
-  action?: React.ReactNode;
-  avatar?: React.ReactNode;
-  component?: React.ElementType<React.HTMLAttributes<HTMLDivElement>>;
-  disableTypography?: boolean;
-  subheader?: React.ReactNode;
-  subheaderTypographyProps?: Partial<TypographyProps>;
-  title?: React.ReactNode;
-  titleTypographyProps?: Partial<TypographyProps>;
+export interface CardHeaderTypeMap<P = {}, D extends React.ElementType = 'div'> {
+  props: P & {
+    action?: React.ReactNode;
+    avatar?: React.ReactNode;
+    disableTypography?: boolean;
+    subheader?: React.ReactNode;
+    subheaderTypographyProps?: Partial<TypographyProps>;
+    title?: React.ReactNode;
+    titleTypographyProps?: Partial<TypographyProps>;
+  };
+  defaultComponent: D;
+  classKey: CardHeaderClassKey;
 }
 
+declare const CardHeader: OverridableComponent<CardHeaderTypeMap>;
+
 export type CardHeaderClassKey = 'root' | 'avatar' | 'action' | 'content' | 'title' | 'subheader';
 
-declare const CardHeader: React.ComponentType<CardHeaderProps>;
+export type CardHeaderProps<
+  D extends React.ElementType = CardHeaderTypeMap['defaultComponent'],
+  P = {}
+> = OverrideProps<CardHeaderTypeMap<P, D>, D>;
 
 export default CardHeader;

packages/material-ui/src/Container/Container.d.ts

@@ -1,14 +1,18 @@
 import * as React from 'react';
-import { StandardProps } from '..';
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
-export interface ContainerProps
-  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, ContainerClassKey> {
-  component?: React.ElementType<React.HTMLAttributes<HTMLDivElement>>;
-  disableGutters?: boolean;
-  fixed?: boolean;
-  maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
+export interface ContainerTypeMap<P = {}, D extends React.ElementType = 'div'> {
+  props: P & {
+    disableGutters?: boolean;
+    fixed?: boolean;
+    maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
+  };
+  defaultComponent: D;
+  classKey: ContainerClassKey;
 }
 
+declare const Container: OverridableComponent<ContainerTypeMap>;
+
 export type ContainerClassKey =
   | 'root'
   | 'disableGutters'
@@ -19,6 +23,9 @@ export type ContainerClassKey =
   | 'maxWidthLg'
   | 'maxWidthXl';
 
-declare const Container: React.ComponentType<ContainerProps>;
+export type ContainerProps<
+  D extends React.ElementType = ContainerTypeMap['defaultComponent'],
+  P = {}
+> = OverrideProps<ContainerTypeMap<P, D>, D>;
 
 export default Container;

packages/material-ui/src/FormHelperText/FormHelperText.d.ts

@@ -1,18 +1,22 @@
 import * as React from 'react';
-import { StandardProps } from '..';
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
-export interface FormHelperTextProps
-  extends StandardProps<React.HTMLAttributes<HTMLParagraphElement>, FormHelperTextClassKey> {
-  disabled?: boolean;
-  error?: boolean;
-  filled?: boolean;
-  focused?: boolean;
-  component?: React.ElementType<React.HTMLAttributes<HTMLParagraphElement>>;
-  margin?: 'dense';
-  required?: boolean;
-  variant?: 'standard' | 'outlined' | 'filled';
+export interface FormHelperTextTypeMap<P = {}, D extends React.ElementType = 'p'> {
+  props: P & {
+    disabled?: boolean;
+    error?: boolean;
+    filled?: boolean;
+    focused?: boolean;
+    margin?: 'dense';
+    required?: boolean;
+    variant?: 'standard' | 'outlined' | 'filled';
+  };
+  defaultComponent: D;
+  classKey: FormHelperTextClassKey;
 }
 
+declare const FormHelperText: OverridableComponent<FormHelperTextTypeMap>;
+
 export type FormHelperTextClassKey =
   | 'root'
   | 'error'
@@ -23,6 +27,9 @@ export type FormHelperTextClassKey =
   | 'contained'
   | 'required';
 
-declare const FormHelperText: React.ComponentType<FormHelperTextProps>;
+export type FormHelperTextProps<
+  D extends React.ElementType = FormHelperTextTypeMap['defaultComponent'],
+  P = {}
+> = OverrideProps<FormHelperTextTypeMap<P, D>, D>;
 
 export default FormHelperText;

packages/material-ui/src/GridList/GridList.d.ts

@@ -1,16 +1,23 @@
 import * as React from 'react';
-import { StandardProps } from '..';
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
-export interface GridListProps
-  extends StandardProps<React.HTMLAttributes<HTMLUListElement>, GridListClassKey> {
-  cellHeight?: number | 'auto';
-  cols?: number;
-  component?: React.ElementType<React.HTMLAttributes<HTMLUListElement>>;
-  spacing?: number;
+export interface GridListTypeMap<P = {}, D extends React.ElementType = 'ul'> {
+  props: P & {
+    cellHeight?: number | 'auto';
+    cols?: number;
+    spacing?: number;
+  };
+  defaultComponent: D;
+  classKey: GridListClassKey;
 }
 
+declare const GridList: OverridableComponent<GridListTypeMap>;
+
 export type GridListClassKey = 'root';
 
-declare const GridList: React.ComponentType<GridListProps>;
+export type GridListProps<
+  D extends React.ElementType = GridListTypeMap['defaultComponent'],
+  P = {}
+> = OverrideProps<GridListTypeMap<P, D>, D>;
 
 export default GridList;

packages/material-ui/src/GridListTile/GridListTile.d.ts

@@ -1,15 +1,22 @@
 import * as React from 'react';
-import { StandardProps } from '..';
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
-export interface GridListTileProps
-  extends StandardProps<React.HTMLAttributes<HTMLLIElement>, GridListTileClassKey> {
-  cols?: number;
-  component?: React.ElementType<React.HTMLAttributes<HTMLLIElement>>;
-  rows?: number;
+export interface GridListTileTypeMap<P = {}, D extends React.ElementType = 'li'> {
+  props: P & {
+    cols?: number;
+    rows?: number;
+  };
+  defaultComponent: D;
+  classKey: GridListTileClassKey;
 }
 
+declare const GridListTile: OverridableComponent<GridListTileTypeMap>;
+
 export type GridListTileClassKey = 'root' | 'tile' | 'imgFullHeight' | 'imgFullWidth';
 
-declare const GridListTile: React.ComponentType<GridListTileProps>;
+export type GridListTileProps<
+  D extends React.ElementType = GridListTileTypeMap['defaultComponent'],
+  P = {}
+> = OverrideProps<GridListTileTypeMap<P, D>, D>;
 
 export default GridListTile;