[typescript] Enable generic props for certain components

package.json

@@ -173,7 +173,7 @@
     "size-limit": "^0.21.0",
     "styled-components": "^4.1.1",
     "tslint": "^5.11.0",
-    "typescript": "3.1.6",
+    "typescript": "3.2.2",
     "url-loader": "^1.0.1",
     "vrtest": "^0.2.0",
     "webfontloader": "^1.6.28",

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

@@ -1,21 +1,23 @@
 import * as React from 'react';
-
 import { PropTypes, StandardProps } from '@material-ui/core';
-import { ButtonBaseClassKey, ButtonBaseProps } from '@material-ui/core/ButtonBase';
+import { ButtonBaseClassKey, ExtendButtonBase } from '@material-ui/core/ButtonBase';
+import { OverridableComponent, SimplifiedPropsOf } from '@material-ui/core/OverridableComponent';
 
-export interface ToggleButtonProps
-  extends StandardProps<ButtonBaseProps, ToggleButtonClassKey, 'component'> {
-  component?: React.ReactType<ToggleButtonProps>;
-  disabled?: boolean;
-  disableFocusRipple?: boolean;
-  disableRipple?: boolean;
-  selected?: boolean;
-  type?: string;
-  value?: any;
-}
+declare const ToggleButton: ExtendButtonBase<{
+  props: {
+    disabled?: boolean;
+    disableFocusRipple?: boolean;
+    disableRipple?: boolean;
+    selected?: boolean;
+    type?: string;
+    value?: any;
+  };
+  defaultComponent: 'button';
+  classKey: ToggleButtonClassKey;
+}>;
 
-export type ToggleButtonClassKey = ButtonBaseClassKey | 'label' | 'selected';
+export type ToggleButtonProps = SimplifiedPropsOf<typeof ToggleButton>;
 
-declare const ToggleButton: React.ComponentType<ToggleButtonProps>;
+export type ToggleButtonClassKey = ButtonBaseClassKey | 'label' | 'selected';
 
 export default ToggleButton;

packages/material-ui/package.json

@@ -65,6 +65,9 @@
     "recompose": "0.28.0 - 0.30.0",
     "warning": "^4.0.1"
   },
+  "devDependencies": {
+    "@types/react-router-dom": "^4.2.7"
+  },
   "sideEffects": false,
   "publishConfig": {
     "access": "public"

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

@@ -1,19 +1,22 @@
 import * as React from 'react';
-import { StandardProps } from '..';
+import { PropsOf } from '..';
+import { OverridableComponent, SimplifiedPropsOf } from '../OverridableComponent';
 
-export interface AvatarProps
-  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, AvatarClassKey> {
-  alt?: string;
-  childrenClassName?: string;
-  component?: React.ReactType<AvatarProps>;
-  imgProps?: React.HtmlHTMLAttributes<HTMLImageElement>;
-  sizes?: string;
-  src?: string;
-  srcSet?: string;
-}
+declare const Avatar: OverridableComponent<{
+  props: {
+    alt?: string;
+    childrenClassName?: string;
+    imgProps?: React.HtmlHTMLAttributes<HTMLImageElement>;
+    sizes?: string;
+    src?: string;
+    srcSet?: string;
+  };
+  defaultComponent: 'div';
+  classKey: AvatarClassKey;
+}>;
 
 export type AvatarClassKey = 'root' | 'colorDefault' | 'img';
 
-declare const Avatar: React.ComponentType<AvatarProps>;
+export type AvatarProps = SimplifiedPropsOf<typeof Avatar>;
 
 export default Avatar;

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

@@ -1,20 +1,25 @@
 import * as React from 'react';
-import { StandardProps, PropTypes } from '..';
-import { ButtonBaseProps } from '../ButtonBase';
+import { PropTypes } from '..';
+import { ExtendButtonBase } from '../ButtonBase';
+import { OverridableComponent, SimplifiedPropsOf, OverrideProps } from '../OverridableComponent';
 
-export interface ButtonProps extends StandardProps<ButtonBaseProps, ButtonClassKey, 'component'> {
-  color?: PropTypes.Color;
-  component?: React.ReactType<ButtonProps>;
-  disabled?: boolean;
-  disableFocusRipple?: boolean;
-  disableRipple?: boolean;
-  fullWidth?: boolean;
-  href?: string;
-  mini?: boolean;
-  size?: 'small' | 'medium' | 'large';
-  type?: string;
-  variant?: 'text' | 'flat' | 'outlined' | 'contained' | 'raised' | 'fab' | 'extendedFab';
-}
+declare const Button: ExtendButtonBase<{
+  props: {
+    color?: PropTypes.Color;
+    disabled?: boolean;
+    disableFocusRipple?: boolean;
+    disableRipple?: boolean;
+    fullWidth?: boolean;
+    mini?: boolean;
+    size?: 'small' | 'medium' | 'large';
+    type?: string;
+    variant?: 'text' | 'flat' | 'outlined' | 'contained' | 'raised' | 'fab' | 'extendedFab';
+  };
+  defaultComponent: 'button';
+  classKey: ButtonClassKey;
+}>;
+
+export type ButtonProps = SimplifiedPropsOf<typeof Button>;
 
 export type ButtonClassKey =
   | 'root'
@@ -44,6 +49,4 @@ export type ButtonClassKey =
   | 'sizeLarge'
   | 'fullWidth';
 
-declare const Button: React.ComponentType<ButtonProps>;
-
 export default Button;

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

@@ -1,30 +1,47 @@
 import * as React from 'react';
-import { StandardProps } from '..';
 import { TouchRippleProps } from './TouchRipple';
+import {
+  OverrideProps,
+  OverridableComponent,
+  SimplifiedPropsOf,
+  OverridableTypeMap,
+} from '../OverridableComponent';
 
-export interface ButtonBaseProps
-  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>;
-  disableRipple?: boolean;
-  disableTouchRipple?: boolean;
-  focusRipple?: boolean;
-  focusVisibleClassName?: string;
-  onFocusVisible?: React.FocusEventHandler<any>;
-  TouchRippleProps?: Partial<TouchRippleProps>;
+export interface ButtonBaseTypeMap {
+  props: {
+    action?: (actions: ButtonBaseActions) => void;
+    buttonRef?: React.Ref<any> | React.RefObject<any>;
+    centerRipple?: boolean;
+    disableRipple?: boolean;
+    disableTouchRipple?: boolean;
+    focusRipple?: boolean;
+    focusVisibleClassName?: string;
+    onFocusVisible?: React.FocusEventHandler<any>;
+    TouchRippleProps?: Partial<TouchRippleProps>;
+  };
+  defaultComponent: 'button';
+  classKey: ButtonBaseClassKey;
 }
 
+export interface ExtendButtonBaseTypeMap<M extends OverridableTypeMap> {
+  props: ButtonBaseTypeMap['props'] & M['props'];
+  defaultComponent: M['defaultComponent'];
+  classKey: M['classKey'];
+}
+
+export type ExtendButtonBase<M extends OverridableTypeMap> = ((
+  props: { href: string } & OverrideProps<ExtendButtonBaseTypeMap<M>, 'a'>,
+) => JSX.Element) &
+  OverridableComponent<ExtendButtonBaseTypeMap<M>>;
+
+declare const ButtonBase: ExtendButtonBase<ButtonBaseTypeMap>;
+
+export type ButtonBaseProps = SimplifiedPropsOf<typeof ButtonBase>;
+
 export type ButtonBaseClassKey = 'root' | 'disabled' | 'focusVisible';
 
 export interface ButtonBaseActions {
   focusVisible(): void;
 }
 
-declare const ButtonBase: React.ComponentType<ButtonBaseProps>;
-
 export default ButtonBase;

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

@@ -1,18 +1,23 @@
-import * as React from 'react';
-import { StandardProps, PropTypes } from '..';
-import { ButtonBaseProps } from '../ButtonBase';
+import { PropTypes } from '..';
+import { ExtendButtonBase } from '../ButtonBase';
+import { SimplifiedPropsOf } from '../OverridableComponent';
 
-export interface FabProps extends StandardProps<ButtonBaseProps, FabClassKey, 'component'> {
-  color?: PropTypes.Color;
-  component?: React.ReactType<FabProps>;
-  disabled?: boolean;
-  disableFocusRipple?: boolean;
-  disableRipple?: boolean;
-  href?: string;
-  size?: 'small' | 'medium' | 'large';
-  type?: string;
-  variant?: 'round' | 'extended';
-}
+declare const Fab: ExtendButtonBase<{
+  props: {
+    color?: PropTypes.Color;
+    disabled?: boolean;
+    disableFocusRipple?: boolean;
+    disableRipple?: boolean;
+    href?: string;
+    size?: 'small' | 'medium' | 'large';
+    type?: string;
+    variant?: 'round' | 'extended';
+  };
+  defaultComponent: 'button';
+  classKey: FabClassKey;
+}>;
+
+export type FabProps = SimplifiedPropsOf<typeof Fab>;
 
 export type FabClassKey =
   | 'root'
@@ -26,6 +31,4 @@ export type FabClassKey =
   | 'sizeSmall'
   | 'sizeMedium';
 
-declare const Fab: React.ComponentType<FabProps>;
-
 export default Fab;

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

@@ -1,25 +1,31 @@
 import * as React from 'react';
 import { StandardProps } from '..';
-import { ButtonBaseProps } from '../ButtonBase';
+import ButtonBase, { ButtonBaseProps } from '../ButtonBase';
+import {
+  OverridableComponent,
+  SimplifiedPropsOf,
+  OverrideProps,
+  AnyReactType,
+} from '../OverridableComponent';
 
-export interface ListItemProps
-  extends StandardProps<
-    ButtonBaseProps & React.LiHTMLAttributes<HTMLElement>,
-    ListItemClassKey,
-    'component'
-  > {
-  button?: boolean;
-  component?: React.ReactType<ListItemProps>;
-  ContainerComponent?: React.ReactType<React.HTMLAttributes<HTMLDivElement>>;
-  ContainerProps?: React.HTMLAttributes<HTMLDivElement>;
-  dense?: boolean;
-  disabled?: boolean;
-  disableGutters?: boolean;
-  divider?: boolean;
-  focusVisibleClassName?: string;
-  selected?: boolean;
+export interface ListItemTypeMap<P, D extends AnyReactType> {
+  props: P & {
+    ContainerComponent?: React.ReactType<React.HTMLAttributes<HTMLDivElement>>;
+    ContainerProps?: React.HTMLAttributes<HTMLDivElement>;
+    dense?: boolean;
+    disabled?: boolean;
+    disableGutters?: boolean;
+    divider?: boolean;
+    focusVisibleClassName?: string;
+    selected?: boolean;
+  };
+  defaultComponent: D;
+  classKey: ListItemClassKey;
 }
 
+declare const ListItem: OverridableComponent<ListItemTypeMap<{ button?: false }, 'li'>> &
+  OverridableComponent<ListItemTypeMap<{ button: true }, 'button'>>;
+
 export type ListItemClassKey =
   | 'root'
   | 'container'
@@ -33,6 +39,6 @@ export type ListItemClassKey =
   | 'secondaryAction'
   | 'selected';
 
-declare const ListItem: React.ComponentType<ListItemProps>;
+export type ListItemProps = SimplifiedPropsOf<typeof ListItem>;
 
 export default ListItem;

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

@@ -1,14 +1,12 @@
 import * as React from 'react';
 import { StandardProps } from '..';
-import { ListItemProps } from '../ListItem';
-
-export interface MenuItemProps extends StandardProps<ListItemProps, MenuItemClassKey> {
-  component?: React.ReactType<MenuItemProps>;
-  role?: string;
-}
+import { ListItemProps, ListItemTypeMap } from '../ListItem';
+import { SimplifiedPropsOf, OverridableComponent } from '../OverridableComponent';
 
 export type MenuItemClassKey = 'root' | 'gutters' | 'selected';
 
-declare const MenuItem: React.ComponentType<MenuItemProps>;
+declare const MenuItem: OverridableComponent<ListItemTypeMap<{ role?: string }, 'li'>>;
+
+export type MenuItemProps = SimplifiedPropsOf<typeof MenuItem>;
 
 export default MenuItem;

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

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { ConsistentWith, PropsOf, Omit } from '.';
+import { StyledComponentProps } from './styles';
+
+export interface OverridableComponent<M extends OverridableTypeMap> {
+  <C extends AnyReactType>(props: { component: C } & OverrideProps<M, C>): JSX.Element;
+  (props: DefaultProps<M>): JSX.Element;
+}
+
+// prettier-ignore
+export type OverrideProps<
+  M extends OverridableTypeMap,
+  C extends AnyReactType
+> = (
+  & BaseProps<M>
+  & Omit<PropsOf<C>, keyof UniversalProps<M>>
+);
+
+// prettier-ignore
+export type DefaultProps<M extends OverridableTypeMap> =
+  & BaseProps<M>
+  & Omit<PropsOf<M['defaultComponent']>, keyof BaseProps<M>>;
+
+// prettier-ignore
+export type BaseProps<M extends OverridableTypeMap> =
+  & M['props']
+  & UniversalProps<M>;
+
+export interface UniversalProps<M extends OverridableTypeMap>
+  extends StyledComponentProps<M['classKey']> {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export interface OverridableTypeMap {
+  props: {};
+  defaultComponent: AnyReactType;
+  classKey: string;
+}
+
+export type AnyReactType<P = any> = keyof JSX.IntrinsicElements | React.ComponentType<P>;
+
+export type Simplify<T> = { [K in keyof T]: T[K] };
+
+export type SimplifiedPropsOf<C> = Simplify<PropsOf<C>>;