Add TypeScript generics for component props

packages/material-ui/package.json

@@ -62,6 +62,9 @@
     "scroll": "^2.0.3",
     "warning": "^4.0.1"
   },
+  "devDependencies": {
+    "@types/react-router-dom": "^4.2.7"
+  },
   "sideEffects": false,
   "publishConfig": {
     "access": "public"

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

@@ -1,7 +1,8 @@
+import * as React from 'react';
 import { PropTypes, StandardProps } from '..';
 import { PaperProps } from '../Paper';
 
-export interface AppBarProps extends StandardProps<PaperProps, AppBarClassKey> {
+export interface AppBarProps<C = {}> extends StandardProps<PaperProps<C>, AppBarClassKey> {
   color?: PropTypes.Color;
   position?: 'fixed' | 'absolute' | 'sticky' | 'static';
 }
@@ -16,6 +17,6 @@ export type AppBarClassKey =
   | 'colorPrimary'
   | 'colorSecondary';
 
-declare const AppBar: React.ComponentType<AppBarProps>;
+declare class AppBar<C> extends React.Component<C & AppBarProps<C>> {}
 
 export default AppBar;

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

@@ -1,19 +1,21 @@
 import * as React from 'react';
-import { StandardProps } from '..';
+import { AnyComponent, PassthruProps, StandardProps } from '..';
 
-export interface AvatarProps
-  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, AvatarClassKey> {
+export type AvatarProps<C extends AnyComponent = AnyComponent> = StandardProps<
+  PassthruProps<C, 'div'>,
+  AvatarClassKey
+> & {
   alt?: string;
   childrenClassName?: string;
-  component?: React.ReactType<AvatarProps>;
+  component?: C;
   imgProps?: React.HtmlHTMLAttributes<HTMLImageElement>;
   sizes?: string;
   src?: string;
   srcSet?: string;
-}
+};
 
 export type AvatarClassKey = 'root' | 'colorDefault' | 'img';
 
-declare const Avatar: React.ComponentType<AvatarProps>;
+declare class Avatar<C extends AnyComponent> extends React.Component<AvatarProps<C>> {}
 
 export default Avatar;

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

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import { StandardProps, PropTypes } from '..';
 
-export interface BadgeProps
+export interface BadgeProps<C = {}>
   extends StandardProps<React.HTMLAttributes<HTMLDivElement>, BadgeClassKey> {
   badgeContent: React.ReactNode;
   children: React.ReactNode;
   color?: PropTypes.Color | 'error';
-  component?: React.ReactType<BadgeProps>;
+  component?: React.ReactType<C>;
 }
 
 export type BadgeClassKey = 'root' | 'badge' | 'colorPrimary' | 'colorSecondary';
 
-declare const Badge: React.ComponentType<BadgeProps>;
+declare class Badge<C> extends React.Component<C & BadgeProps<C>> {}
 
 export default Badge;

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

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { StandardProps } from '..';
 import { ButtonBaseProps } from '../ButtonBase';
 
-export interface BottomNavigationActionProps
-  extends StandardProps<ButtonBaseProps, BottomNavigationActionClassKey, 'onChange'> {
+export interface BottomNavigationActionProps<C = {}>
+  extends StandardProps<ButtonBaseProps<C>, BottomNavigationActionClassKey, 'onChange'> {
   icon?: string | React.ReactElement<any>;
   label?: React.ReactNode;
   onChange?: (event: React.ChangeEvent<{}>, value: any) => void;
@@ -15,6 +15,8 @@ export interface BottomNavigationActionProps
 
 export type BottomNavigationActionClassKey = 'root' | 'selected' | 'iconOnly' | 'wrapper' | 'label';
 
-declare const BottomNavigationAction: React.ComponentType<BottomNavigationActionProps>;
+declare class BottomNavigationAction<C> extends React.Component<
+  C & BottomNavigationActionProps<C>
+> {}
 
 export default BottomNavigationAction;

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

@@ -2,9 +2,10 @@ import * as React from 'react';
 import { StandardProps, PropTypes } from '..';
 import { ButtonBaseProps } from '../ButtonBase';
 
-export interface ButtonProps extends StandardProps<ButtonBaseProps, ButtonClassKey, 'component'> {
+export interface ButtonProps<C = {}>
+  extends StandardProps<ButtonBaseProps<C>, ButtonClassKey, 'component'> {
   color?: PropTypes.Color;
-  component?: React.ReactType<ButtonProps>;
+  component?: React.ReactType<C>;
   disabled?: boolean;
   disableFocusRipple?: boolean;
   disableRipple?: boolean;
@@ -41,6 +42,6 @@ export type ButtonClassKey =
   | 'sizeLarge'
   | 'fullWidth';
 
-declare const Button: React.ComponentType<ButtonProps>;
+declare class Button<C> extends React.Component<C & ButtonProps<C>> {}
 
 export default Button;

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

@@ -2,15 +2,15 @@ import * as React from 'react';
 import { StandardProps } from '..';
 import { TouchRippleProps } from './TouchRipple';
 
-export interface ButtonBaseProps
+export interface ButtonBaseProps<C = {}>
   extends StandardProps<
       React.AnchorHTMLAttributes<HTMLElement> & React.ButtonHTMLAttributes<HTMLElement>,
       ButtonBaseClassKey
     > {
   action?: (actions: ButtonBaseActions) => void;
   buttonRef?: React.Ref<any> | React.RefObject<any>;
   centerRipple?: boolean;
-  component?: React.ReactType<ButtonBaseProps>;
+  component?: React.ReactType<C>;
   disableRipple?: boolean;
   disableTouchRipple?: boolean;
   focusRipple?: boolean;
@@ -25,6 +25,6 @@ export interface ButtonBaseActions {
   focusVisible(): void;
 }
 
-declare const ButtonBase: React.ComponentType<ButtonBaseProps>;
+declare class ButtonBase<C> extends React.Component<C & ButtonBaseProps<C>> {}
 
 export default ButtonBase;

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

@@ -2,12 +2,12 @@ import * as React from 'react';
 import { StandardProps } from '..';
 import { PaperProps } from '../Paper';
 
-export interface CardProps extends StandardProps<PaperProps, CardClassKey> {
+export interface CardProps<C = {}> extends StandardProps<PaperProps<C>, CardClassKey> {
   raised?: boolean;
 }
 
 export type CardClassKey = 'root';
 
-declare const Card: React.ComponentType<CardProps>;
+declare class Card<C> extends React.Component<C & CardProps<C>> {}
 
 export default Card;

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

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { StandardProps } from '..';
 
-export interface CardContentProps
+export interface CardContentProps<C = {}>
   extends StandardProps<React.HTMLAttributes<HTMLDivElement>, CardContentClassKey> {
-  component?: React.ReactType<CardContentProps>;
+  component?: React.ReactType<C>;
 }
 
 export type CardContentClassKey = 'root';
 
-declare const CardContent: React.ComponentType<CardContentProps>;
+declare class CardContent<C> extends React.Component<C & CardContentProps<C>> {}
 
 export default CardContent;

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

@@ -2,17 +2,17 @@ import * as React from 'react';
 import { StandardProps } from '..';
 import { CardContentProps } from '../CardContent';
 
-export interface CardHeaderProps
+export interface CardHeaderProps<C = {}>
   extends StandardProps<React.HTMLAttributes<HTMLDivElement>, CardHeaderClassKey, 'title'> {
   action?: React.ReactNode;
   avatar?: React.ReactNode;
-  component?: React.ReactType<CardHeaderProps>;
+  component?: React.ReactType<C>;
   subheader?: React.ReactNode;
   title?: React.ReactNode;
 }
 
 export type CardHeaderClassKey = 'root' | 'avatar' | 'action' | 'content' | 'title' | 'subheader';
 
-declare const CardHeader: React.ComponentType<CardHeaderProps>;
+declare class CardHeader<C> extends React.Component<C & CardHeaderProps<C>> {}
 
 export default CardHeader;

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

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import { StandardProps } from '..';
 
-export interface CardMediaProps
+export interface CardMediaProps<C = {}>
   extends StandardProps<React.HTMLAttributes<HTMLDivElement>, CardMediaClassKey> {
-  component?: React.ReactType<CardMediaProps>;
+  component?: React.ReactType<C>;
   image?: string;
   src?: string;
 }
 
 export type CardMediaClassKey = 'root' | 'media';
 
-declare const CardMedia: React.ComponentType<CardMediaProps>;
+declare class CardMedia<C> extends React.Component<C & CardMediaProps<C>> {}
 
 export default CardMedia;

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

@@ -2,15 +2,15 @@ import * as React from 'react';
 import { StandardProps } from '..';
 import { SwitchBaseProps, SwitchBaseClassKey } from '../internal/SwitchBase';
 
-export interface CheckboxProps
-  extends StandardProps<SwitchBaseProps, CheckboxClassKey, 'checkedIcon' | 'color' | 'icon'> {
+export interface CheckboxProps<C = {}>
+  extends StandardProps<SwitchBaseProps<C>, CheckboxClassKey, 'checkedIcon' | 'color' | 'icon'> {
   checkedIcon?: React.ReactNode;
   color?: 'primary' | 'secondary' | 'default';
   icon?: React.ReactNode;
 }
 
 export type CheckboxClassKey = SwitchBaseClassKey | 'colorPrimary' | 'colorSecondary';
 
-declare const Checkbox: React.ComponentType<CheckboxProps>;
+declare class Checkbox<C> extends React.Component<C & CheckboxProps<C>> {}
 
 export default Checkbox;

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { StandardProps } from '..';
 
-export interface ChipProps
+export interface ChipProps<C = {}>
   extends StandardProps<React.HTMLAttributes<HTMLDivElement>, ChipClassKey> {
   avatar?: React.ReactElement<any>;
   clickable?: boolean;
-  component?: React.ReactType<ChipProps>;
+  component?: React.ReactType<C>;
   deleteIcon?: React.ReactElement<any>;
   label?: React.ReactNode;
   onDelete?: React.EventHandler<any>;
@@ -21,6 +21,6 @@ export type ChipClassKey =
   | 'label'
   | 'deleteIcon';
 
-declare const Chip: React.ComponentType<ChipProps>;
+declare class Chip<C> extends React.Component<C & ChipProps<C>> {}
 
 export default Chip;

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

@@ -3,16 +3,17 @@ import { StandardProps } from '..';
 import { Theme } from '../styles/createMuiTheme';
 import { TransitionProps } from '../transitions/transition';
 
-export interface CollapseProps extends StandardProps<TransitionProps, CollapseClassKey, 'timeout'> {
+export interface CollapseProps<C = {}>
+  extends StandardProps<TransitionProps, CollapseClassKey, 'timeout'> {
   children?: React.ReactNode;
   collapsedHeight?: string;
-  component?: React.ReactType<CollapseProps>;
+  component?: React.ReactType<C>;
   theme?: Theme;
   timeout?: TransitionProps['timeout'] | 'auto';
 }
 
 export type CollapseClassKey = 'container' | 'entered';
 
-declare const Collapse: React.ComponentType<CollapseProps>;
+declare class Collapse<C> extends React.Component<C & CollapseProps<C>> {}
 
 export default Collapse;

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

@@ -1,16 +1,15 @@
 import * as React from 'react';
 import { StandardProps } from '..';
-import { PaperProps } from '../Paper';
 import { ModalProps } from '../Modal';
 import { TransitionHandlerProps, TransitionProps } from '../transitions/transition';
 
-export interface DialogProps
+export interface DialogProps<C = {}>
   extends StandardProps<ModalProps & Partial<TransitionHandlerProps>, DialogClassKey, 'children'> {
   children?: React.ReactNode;
   fullScreen?: boolean;
   fullWidth?: boolean;
   maxWidth?: 'xs' | 'sm' | 'md' | false;
-  PaperProps?: Partial<PaperProps>;
+  PaperProps?: Partial<C>;
   scroll?: 'body' | 'paper';
   TransitionComponent?: React.ReactType;
   transitionDuration?: TransitionProps['timeout'];
@@ -30,6 +29,6 @@ export type DialogClassKey =
   | 'paperFullWidth'
   | 'paperFullScreen';
 
-declare const Dialog: React.ComponentType<DialogProps>;
+declare class Dialog<C> extends React.Component<C & DialogProps<C>> { }
 
 export default Dialog;

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

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import { StandardProps } from '..';
 
-export interface DividerProps
+export interface DividerProps<C = {}>
   extends StandardProps<React.HTMLAttributes<HTMLHRElement>, DividerClassKey> {
   absolute?: boolean;
-  component?: React.ReactType<DividerProps>;
+  component?: React.ReactType<C>;
   inset?: boolean;
   light?: boolean;
 }
 
 export type DividerClassKey = 'root' | 'absolute' | 'inset' | 'light';
 
-declare const Divider: React.ComponentType<DividerProps>;
+declare class Divider<C> extends React.Component<C & DividerProps<C>> {}
 
 export default Divider;

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

@@ -6,7 +6,7 @@ import { PaperProps } from '../Paper';
 import { Theme } from '../styles/createMuiTheme';
 import { TransitionHandlerProps, TransitionProps } from '../transitions/transition';
 
-export interface DrawerProps
+export interface DrawerProps<C = {}>
   extends StandardProps<
       ModalProps & Partial<TransitionHandlerProps>,
       DrawerClassKey,
@@ -17,7 +17,7 @@ export interface DrawerProps
   elevation?: number;
   ModalProps?: Partial<ModalProps>;
   open?: boolean;
-  PaperProps?: Partial<PaperProps>;
+  PaperProps?: Partial<PaperProps<C>>;
   SlideProps?: Partial<SlideProps>;
   theme?: Theme;
   transitionDuration?: TransitionProps['timeout'];
@@ -37,6 +37,6 @@ export type DrawerClassKey =
   | 'paperAnchorDockedBottom'
   | 'modal';
 
-declare const Drawer: React.ComponentType<DrawerProps>;
+declare class Drawer<C> extends React.Component<DrawerProps<C>> {}
 
 export default Drawer;

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

@@ -3,9 +3,9 @@ import { StandardProps } from '..';
 import { CollapseProps } from '../Collapse';
 import { PaperProps } from '../Paper';
 
-export interface ExpansionPanelProps
-  extends StandardProps<PaperProps, ExpansionPanelClassKey, 'onChange'> {
-  CollapseProps?: Partial<CollapseProps>;
+export interface ExpansionPanelProps<C = {}>
+  extends StandardProps<PaperProps<C>, ExpansionPanelClassKey, 'onChange'> {
+  CollapseProps?: Partial<CollapseProps<C>>;
   defaultExpanded?: boolean;
   disabled?: boolean;
   expanded?: boolean;
@@ -14,6 +14,6 @@ export interface ExpansionPanelProps
 
 export type ExpansionPanelClassKey = 'root' | 'expanded' | 'disabled';
 
-declare const ExpansionPanel: React.ComponentType<ExpansionPanelProps>;
+declare class ExpansionPanel<C> extends React.Component<ExpansionPanelProps<C>> {}
 
 export default ExpansionPanel;

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

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { StandardProps } from '..';
 import { ButtonBaseProps } from '../ButtonBase';
 
-export interface ExpansionPanelSummaryProps
-  extends StandardProps<ButtonBaseProps, ExpansionPanelSummaryClassKey> {
+export interface ExpansionPanelSummaryProps<C = {}>
+  extends StandardProps<ButtonBaseProps<C>, ExpansionPanelSummaryClassKey> {
   disabled?: boolean;
   expanded?: boolean;
   expandIcon?: React.ReactNode;
@@ -18,6 +18,6 @@ export type ExpansionPanelSummaryClassKey =
   | 'content'
   | 'expandIcon';
 
-declare const ExpansionPanelSummary: React.ComponentType<ExpansionPanelSummaryProps>;
+declare class ExpansionPanelSummary<C> extends React.Component<C & ExpansionPanelSummaryProps<C>> {}
 
 export default ExpansionPanelSummary;