[core] Generify props with component property (#16487)

Author: ypresto

packages/material-ui-lab/src/Skeleton/Skeleton.d.ts

@@ -1,19 +1,24 @@
 import * as React from 'react';
-import { OverridableComponent, SimplifiedPropsOf } from '@material-ui/core/OverridableComponent';
+import { OverridableComponent, OverrideProps } from '@material-ui/core/OverridableComponent';
 
-declare const Skeleton: OverridableComponent<{
-  props: {
+export interface SkeletonTypeMap<P = {}, D extends React.ElementType = 'hr'> {
+  props: P & {
     disableAnimate?: boolean;
     height?: number | string;
     variant?: 'text' | 'rect' | 'circle';
     width?: number | string;
   };
   defaultComponent: 'div';
   classKey: SkeletonClassKey;
-}>;
+}
+
+declare const Skeleton: OverridableComponent<SkeletonTypeMap>;
 
 export type SkeletonClassKey = 'root' | 'text' | 'rect' | 'circle' | 'animate';
 
-export type SkeletonProps = SimplifiedPropsOf<typeof Skeleton>;
+export type SkeletonProps<
+  D extends React.ElementType = SkeletonTypeMap['defaultComponent'],
+  P = {}
+> = OverrideProps<SkeletonTypeMap<P, D>, D>;
 
 export default Skeleton;

packages/material-ui-lab/src/ToggleButton/ToggleButton.d.ts

@@ -1,17 +1,29 @@
-import { ButtonBaseClassKey, ExtendButtonBase } from '@material-ui/core/ButtonBase';
-import { SimplifiedPropsOf } from '@material-ui/core/OverridableComponent';
+import {
+  ButtonBaseClassKey,
+  ExtendButtonBase,
+  ExtendButtonBaseTypeMap,
+} from '@material-ui/core/ButtonBase';
+import { OverrideProps } from '@material-ui/core/OverridableComponent';
 
-declare const ToggleButton: ExtendButtonBase<{
-  props: {
+export type ToggleButtonTypeMap<
+  P = {},
+  D extends React.ElementType = 'button'
+> = ExtendButtonBaseTypeMap<{
+  props: P & {
     disableFocusRipple?: boolean;
     selected?: boolean;
     value?: any;
   };
-  defaultComponent: 'button';
+  defaultComponent: D;
   classKey: ToggleButtonClassKey;
 }>;
 
-export type ToggleButtonProps = SimplifiedPropsOf<typeof ToggleButton>;
+declare const ToggleButton: ExtendButtonBase<ToggleButtonTypeMap>;
+
+export type ToggleButtonProps<
+  D extends React.ElementType = ToggleButtonTypeMap['defaultComponent'],
+  P = {}
+> = OverrideProps<ToggleButtonTypeMap<P, D>, D>;
 
 export type ToggleButtonClassKey =
   | 'root'

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

@@ -1,21 +1,26 @@
 import * as React from 'react';
-import { OverridableComponent, SimplifiedPropsOf } from '../OverridableComponent';
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
-declare const Avatar: OverridableComponent<{
-  props: {
+export interface AvatarTypeMap<P = {}, D extends React.ElementType = 'div'> {
+  props: P & {
     alt?: string;
     childrenClassName?: string;
     imgProps?: React.ImgHTMLAttributes<HTMLImageElement>;
     sizes?: string;
     src?: string;
     srcSet?: string;
   };
-  defaultComponent: 'div';
+  defaultComponent: D;
   classKey: AvatarClassKey;
-}>;
+}
+
+declare const Avatar: OverridableComponent<AvatarTypeMap>;
 
 export type AvatarClassKey = 'root' | 'colorDefault' | 'img';
 
-export type AvatarProps = SimplifiedPropsOf<typeof Avatar>;
+export type AvatarProps<
+  D extends React.ElementType = AvatarTypeMap['defaultComponent'],
+  P = {}
+> = OverrideProps<AvatarTypeMap<P, D>, D>;
 
 export default Avatar;

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

@@ -1,9 +1,12 @@
 import * as React from 'react';
-import { ButtonBaseTypeMap, ExtendButtonBase } from '../ButtonBase';
-import { SimplifiedPropsOf } from '../OverridableComponent';
+import { ButtonBaseTypeMap, ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
+import { OverrideProps } from '../OverridableComponent';
 
-declare const BottomNavigationAction: ExtendButtonBase<{
-  props: {
+export type BottomNavigationActionTypeMap<
+  P,
+  D extends React.ElementType
+> = ExtendButtonBaseTypeMap<{
+  props: P & {
     icon?: string | React.ReactElement;
     label?: React.ReactNode;
     onChange?: (event: React.ChangeEvent<{}>, value: any) => void;
@@ -12,12 +15,19 @@ declare const BottomNavigationAction: ExtendButtonBase<{
     showLabel?: boolean;
     value?: any;
   };
-  defaultComponent: ButtonBaseTypeMap['defaultComponent'];
+  defaultComponent: D;
   classKey: BottomNavigationActionClassKey;
 }>;
 
+declare const BottomNavigationAction: ExtendButtonBase<
+  BottomNavigationActionTypeMap<{}, ButtonBaseTypeMap['defaultComponent']>
+>;
+
 export type BottomNavigationActionClassKey = 'root' | 'selected' | 'iconOnly' | 'wrapper' | 'label';
 
-export type BottomNavigationActionProps = SimplifiedPropsOf<typeof BottomNavigationAction>;
+export type BottomNavigationActionProps<
+  D extends React.ElementType = ButtonBaseTypeMap['defaultComponent'],
+  P = {}
+> = OverrideProps<BottomNavigationActionTypeMap<P, D>, D>;
 
 export default BottomNavigationAction;

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

@@ -1,19 +1,24 @@
 import * as React from 'react';
-import { OverridableComponent, SimplifiedPropsOf } from '../OverridableComponent';
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
-declare const Breadcrumbs: OverridableComponent<{
-  props: {
+export interface BreadcrumbsTypeMap<P = {}, D extends React.ElementType = 'nav'> {
+  props: P & {
     itemsAfterCollapse?: number;
     itemsBeforeCollapse?: number;
     maxItems?: number;
     separator?: React.ReactNode;
   };
-  defaultComponent: 'nav';
+  defaultComponent: D;
   classKey: BreadcrumbsClassKey;
-}>;
+}
+
+declare const Breadcrumbs: OverridableComponent<BreadcrumbsTypeMap>;
 
 export type BreadcrumbsClassKey = 'root' | 'ol' | 'li' | 'separator';
 
-export type BreadcrumbsProps = SimplifiedPropsOf<typeof Breadcrumbs>;
+export type BreadcrumbsProps<
+  D extends React.ElementType = BreadcrumbsTypeMap['defaultComponent'],
+  P = {}
+> = OverrideProps<BreadcrumbsTypeMap<P, D>, D>;
 
 export default Breadcrumbs;

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

@@ -2,7 +2,10 @@ import { PropTypes } from '..';
 import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
 import { OverrideProps } from '../OverridableComponent';
 
-export type ButtonTypeMap<P, D extends React.ElementType> = ExtendButtonBaseTypeMap<{
+export type ButtonTypeMap<
+  P = {},
+  D extends React.ElementType = 'button'
+> = ExtendButtonBaseTypeMap<{
   props: P & {
     color?: PropTypes.Color;
     disableFocusRipple?: boolean;
@@ -15,12 +18,12 @@ export type ButtonTypeMap<P, D extends React.ElementType> = ExtendButtonBaseType
   classKey: ButtonClassKey;
 }>;
 
-declare const Button: ExtendButtonBase<ButtonTypeMap<{}, 'button'>>;
+declare const Button: ExtendButtonBase<ButtonTypeMap>;
 
-export type ButtonProps<D extends React.ElementType = 'button', P = {}> = OverrideProps<
-  ButtonTypeMap<P, D>,
-  D
->;
+export type ButtonProps<
+  D extends React.ElementType = ButtonTypeMap['defaultComponent'],
+  P = {}
+> = OverrideProps<ButtonTypeMap<P, D>, D>;
 
 export type ButtonClassKey =
   | 'root'

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

@@ -1,14 +1,9 @@
 import * as React from 'react';
 import { TouchRippleProps } from './TouchRipple';
-import {
-  OverrideProps,
-  OverridableComponent,
-  SimplifiedPropsOf,
-  OverridableTypeMap,
-} from '../OverridableComponent';
-
-export interface ButtonBaseTypeMap {
-  props: {
+import { OverrideProps, OverridableComponent, OverridableTypeMap } from '../OverridableComponent';
+
+export interface ButtonBaseTypeMap<P = {}, D extends React.ElementType = 'button'> {
+  props: P & {
     action?: React.Ref<ButtonBaseActions>;
     /**
      * Prefer `ref` instead.
@@ -23,7 +18,7 @@ export interface ButtonBaseTypeMap {
     onFocusVisible?: React.FocusEventHandler<any>;
     TouchRippleProps?: Partial<TouchRippleProps>;
   };
-  defaultComponent: 'button';
+  defaultComponent: D;
   classKey: ButtonBaseClassKey;
 }
 
@@ -45,7 +40,10 @@ export type ExtendButtonBase<M extends OverridableTypeMap> = ((
 
 declare const ButtonBase: ExtendButtonBase<ButtonBaseTypeMap>;
 
-export type ButtonBaseProps = SimplifiedPropsOf<typeof ButtonBase>;
+export type ButtonBaseProps<
+  D extends React.ElementType = ButtonBaseTypeMap['defaultComponent'],
+  P = {}
+> = OverrideProps<ButtonBaseTypeMap<P, D>, D>;
 
 export type ButtonBaseClassKey = 'root' | 'disabled' | 'focusVisible';
 

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { PropTypes } from '..';
-import { OverridableComponent, SimplifiedPropsOf } from '../OverridableComponent';
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
-declare const ButtonGroup: OverridableComponent<{
-  props: {
+export interface ButtonGroupTypeMap<P = {}, D extends React.ElementType = 'div'> {
+  props: P & {
     color?: PropTypes.Color;
     disabled?: boolean;
     disableFocusRipple?: boolean;
@@ -12,9 +12,11 @@ declare const ButtonGroup: OverridableComponent<{
     size?: 'small' | 'medium' | 'large';
     variant?: 'outlined' | 'contained';
   };
-  defaultComponent: 'div';
+  defaultComponent: D;
   classKey: ButtonGroupClassKey;
-}>;
+}
+
+declare const ButtonGroup: OverridableComponent<ButtonGroupTypeMap>;
 
 export type ButtonGroupClassKey =
   | 'root'
@@ -28,6 +30,9 @@ export type ButtonGroupClassKey =
   | 'groupedContainedPrimary'
   | 'groupedContainedSecondary';
 
-export type ButtonGroupProps = SimplifiedPropsOf<typeof ButtonGroup>;
+export type ButtonGroupProps<
+  D extends React.ElementType = ButtonGroupTypeMap['defaultComponent'],
+  P = {}
+> = OverrideProps<ButtonGroupTypeMap<P, D>, D>;
 
 export default ButtonGroup;

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

@@ -1,16 +1,23 @@
-import { ButtonBaseTypeMap, ExtendButtonBase } from '../ButtonBase';
-import { SimplifiedPropsOf } from '../OverridableComponent';
+import { ButtonBaseTypeMap, ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
+import { OverrideProps } from '../OverridableComponent';
 
-declare const CardActionArea: ExtendButtonBase<{
-  props: {
+export type CardActionAreaTypeMap<P, D extends React.ElementType> = ExtendButtonBaseTypeMap<{
+  props: P & {
     focusVisibleClassName?: string;
   };
-  defaultComponent: ButtonBaseTypeMap['defaultComponent'];
+  defaultComponent: D;
   classKey: CardActionAreaClassKey;
 }>;
 
+declare const CardActionArea: ExtendButtonBase<
+  CardActionAreaTypeMap<{}, ButtonBaseTypeMap['defaultComponent']>
+>;
+
 export type CardActionAreaClassKey = 'root' | 'focusVisible' | 'focusHighlight';
 
-export type CardActionAreaProps = SimplifiedPropsOf<typeof CardActionArea>;
+export type CardActionAreaProps<
+  D extends React.ElementType = ButtonBaseTypeMap['defaultComponent'],
+  P = {}
+> = OverrideProps<CardActionAreaTypeMap<P, D>, D>;
 
 export default CardActionArea;

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { PropTypes } from '..';
-import { OverridableComponent, SimplifiedPropsOf } from '../OverridableComponent';
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
-declare const Chip: OverridableComponent<{
-  props: {
+export interface ChipTypeMap<P = {}, D extends React.ElementType = 'div'> {
+  props: P & {
     avatar?: React.ReactElement;
     clickable?: boolean;
     color?: PropTypes.Color;
@@ -14,9 +14,11 @@ declare const Chip: OverridableComponent<{
     size?: 'small' | 'medium';
     variant?: 'default' | 'outlined';
   };
-  defaultComponent: 'div';
+  defaultComponent: D;
   classKey: ChipClassKey;
-}>;
+}
+
+declare const Chip: OverridableComponent<ChipTypeMap>;
 
 export type ChipClassKey =
   | 'root'
@@ -50,6 +52,9 @@ export type ChipClassKey =
   | 'deleteIconOutlinedColorPrimary'
   | 'deleteIconOutlinedColorSecondary';
 
-export type ChipProps = SimplifiedPropsOf<typeof Chip>;
+export type ChipProps<
+  D extends React.ElementType = ChipTypeMap['defaultComponent'],
+  P = {}
+> = OverrideProps<ChipTypeMap<P, D>, D>;
 
 export default Chip;

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

@@ -1,18 +1,23 @@
-import { OverridableComponent, SimplifiedPropsOf } from '../OverridableComponent';
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
-declare const Divider: OverridableComponent<{
-  props: {
+export interface DividerTypeMap<P = {}, D extends React.ElementType = 'hr'> {
+  props: P & {
     absolute?: boolean;
     light?: boolean;
     orientation?: 'horizontal' | 'vertical';
     variant?: 'fullWidth' | 'inset' | 'middle';
   };
-  defaultComponent: 'hr';
+  defaultComponent: D;
   classKey: DividerClassKey;
-}>;
+}
+
+declare const Divider: OverridableComponent<DividerTypeMap>;
 
 export type DividerClassKey = 'root' | 'absolute' | 'inset' | 'light' | 'middle' | 'vertical';
 
-export type DividerProps = SimplifiedPropsOf<typeof Divider>;
+export type DividerProps<
+  D extends React.ElementType = DividerTypeMap['defaultComponent'],
+  P = {}
+> = OverrideProps<DividerTypeMap<P, D>, D>;
 
 export default Divider;