TS2322 Spreading declared MenuItemProps on MenuItem fails type checking

[SoulsD]

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

MenuItemProps should be typed with correct 'button' override by default the when imported

Current Behavior 😯

from core/MenuItem/MenuItem.d.ts:

declare const MenuItem: OverridableComponent<ListItemTypeMap<{ button: false }, 'li'>> &
  ExtendButtonBase<ListItemTypeMap<{ button?: true }, 'li'>>;

export type MenuItemProps<D extends React.ElementType = 'li', P = {}> = OverrideProps<
  ListItemTypeMap<P, D>,
  D
>;

P parameter of menu Item props default to {} instead of { button?: true } resulting in an error when you want to use it directly:

    var a: MenuItemProps = {};
    <MenuItem {...a}/>

    // error: 
    // Types of property 'button' are incompatible.
    //     Type 'boolean | undefined' is not assignable to type 'true | undefined'.
    //         Type 'false' is not assignable to type 'true | undefined'

To dismiss the error, type MenuItemProps needs to be declared like this:

MenuItemProps<'li', { button?: true }>

Steps to Reproduce 🕹

    import MenuItem, { MenuItemProps } from "@material-ui/core/MenuItem";
    /* ... */

    var a: MenuItemProps = {};
    <MenuItem {...a}/>

Link:

1. https://codesandbox.io/s/create-react-app-with-typescript-3j44q

Context 🔦

I am migrating to MUIv4 from v3. I had a component taking MenuItemProps in its own props to be passed to its children MenuItems. I am now forced to type this as MenuItemProps<'li', { button?: true }>.

Your Environment 🌎

Tech	Version
Material-UI	v4.1.1
React	v16.8
Browser	Chrome 74
TypeScript	3.4.1

[oliviertassinari]

This seems to be the same core issue than #16122.

[rosskevin]

Broken test pr in #16315, I don't think this is the same as #16122

[oliviertassinari]

How about we refactor MenuItem to be built on top of ButtonBase, not on top of ListItem? Would it help solve this TypeScript issue?

[DMR-coding]

How about we refactor MenuItem to be built on top of ButtonBase, not on top of ListItem? Would it help solve this TypeScript issue?

That would solve the issue for MenuItem specifically, but ListItem itself is broken identically. A solution which goes more to the root of the problem would be preferable.

[mnajdova]

The problem should be resolved now that #26591 is merged (The MenuItem no longer depends on the ListItem). Prove https://codesandbox.io/s/create-react-app-with-typescript-forked-9t9n3?file=/src/App.tsx (I've updated the original sandbox with the latest (next) release).

Regarding the ListItem, the problem seems to be solved with #26480 if I am not mistaken (sandbox - https://codesandbox.io/s/create-react-app-with-typescript-forked-zoiml?file=/src/App.tsx)

@SoulsD feel free to re-open if something was not addressed by the two changes mentioned above.