[core] Generify props with component property

[ypresto]

This PR apply #15193 to all¹ components not only Button. (See #15827 (comment))
It would fix component={...} prop type mismatch issue (#15827) when you use Props type and component props at same time (e.g. (props: IconButtonProps) => <IconButtonProps {...props} component={...} /> ).

New generic parameters have default value to keep original (non-parametric) type.

(ListItem.d.ts is more difficult as it switches div and li by button flag, so kept unchanged.)

Edit @eps1lon:
Closes #16846

¹

• Avatar
• ToggleButton
• BottomNavigationAction
• Breadcrumbs
• Button
• ButtonBase
• ButtonGroup
• CardActionArea
• Chip
• Didiver
• ExpansionPanelSummary
• Fab
• FormControl
• FormLabel
• Grid
• IconButton
• Link
• List
• MenuItem
• Skeleton
• StepButton
• Tab
• TablePagination
• TableSortLabel
• TabScrollButton
• Tabs

[mui-pr-bot]

No bundle size changes comparing fba5135...5bb044c

Generated by 🚫 dangerJS against 5bb044c

[ypresto]

I'm in doubt how to omit or override some propreties of D. For example, I have custom IconButton with integrated react-router Link component, and to property is optional. Only when to is specified it'll pass `component={Link}.

[ypresto]

import { IconButtonTypeMap as MuiIconButtonTypeMap } from '@material-ui/core/IconButton'
import { ForwardRefLink } from '../compat/ForwardRefLink'
import { ExtendButtonBaseTypeMap } from '@material-ui/core/ButtonBase'
import { OverrideProps } from '@material-ui/core/OverridableComponent'

export type IconButtonTypeMap<
  P = {},
  D extends React.ElementType = MuiIconButtonTypeMap['defaultComponent']
> = ExtendButtonBaseTypeMap<{
  props: P &
    MuiIconButtonTypeMap['props'] & {
      (custom props...)
    }
  defaultComponent: D
  classKey: MuiIconButtonTypeMap['classKey']
}>

export type IconButtonPropsWithTo<P = {}> = OverrideProps<
  IconButtonTypeMap<P & { to: LinkProps['to'] }, typeof ForwardRefLink>,
  typeof ForwardRefLink
>

export type IconButtonPropsWithoutTo<P = {}> = OverrideProps<
  IconButtonTypeMap<P>,
  IconButtonTypeMap['defaultComponent']
>

export type IconButtonProps<P = {}> = IconButtonPropsWithoutTo<P & { to?: undefined }> | IconButtonPropsWithTo<P>

function IconButton(props: IconButtonPropsWithTo): JSX.Element
function IconButton(props: IconButtonPropsWithoutTo): JSX.Element
function IconButton(props: IconButtonProps) {
  ...
}

hmm... looks ugly 😂

[akomm]

I'm in doubt how to omit or override some propreties of D. For example, I have custom IconButton with integrated react-router Link component, and to property is optional. Only when to is specified it'll pass `component={Link}.

@ypresto tried conditional types? Example:

type IconButtonProps<P> = P extends {to: string} ? A : B;
// more variants
type X<P> = 
  P extends X1 ? A :
  P extends X2 ? B :
  P extends X3 ? C :
  D

[eps1lon]

Really appreciate that you pushed this effort. This looks good to me. Just would like to clarify the default types usage.

[eps1lon]

@ypresto Much appreciated, thanks.

[jraoult]

It seems that after this PR, TextField's onFocus prop type is not resolved properly (and probably any component overriding FormControl props). For example, this snippet was passing type checking because the target was inferred to be an HTMLInputElement:

 <TextField onFocus={({ target }) => target.select()} />

This is failing now because the event is just a React.EventHandler<any> (the default for onFocus in the newly introduced FormControlTypeMap). Is it the expected behaviour?

FYI: I'm using TS 3.6.2

[eps1lon]

@jraoult Please open a new issue and fill out the template. This would help a lot.

[oliviertassinari]

#17369