Typescript: "component" prop does not appear in type suggestion

[pratikkarad]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

The following components are missing the "component" prop in Typescript documentation, in @mui/material v5.9.3.

• Button
• Fab
• ListItem
• ListItemButton
• MenuItem
• ToggleButton

As per my initial research, I think the component prop will not be shown in Typescript documentation for any component that has inherited the ExtendButtonBase type.

Expected behavior 🤔

The component prop should be present in typescript documentation, as it says it exists in the documentation

Steps to reproduce 🕹

1. Visit button codesandbox
2. Type component in Button prop
3. Hit Ctrl + space to get suggestions from typescript
4. It does not show up in typescript documentation as the definition of component prop is missing from the documentation
5. But I check in Button API props documentation, I can see that component prop is available.

Context 🔦

We are using MUI as a base for a component library with different designs and icons. We observed that the component prop in typescript documentation was missing but was present on the official website documentation.

Your environment 🌎

npx @mui/envinfo

System:
  OS: Windows 10 10.0.19044
Binaries:
  Node: 17.8.0 - C:\Program Files\nodejs\node.EXE
  Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
  npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD
Browsers:
  Chrome: Not Found
  Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.77)
npmPackages:
  @emotion/react: ^11.10.0 => 11.10.0
  @emotion/styled: ^11.10.0 => 11.10.0
  @mui/base:  5.0.0-alpha.92
  @mui/icons-material: ^5.8.4 => 5.8.4
  @mui/material: ^5.9.3 => 5.9.3
  @mui/private-theming:  5.9.3
  @mui/styled-engine:  5.8.7
  @mui/system:  5.9.3
  @mui/types:  7.1.5
  @mui/utils:  5.9.3
  @types/react:  18.0.15
  react: ^18.2.0 => 18.2.0
  react-dom: ^18.2.0 => 18.2.0
  typescript:  4.7.4

[pratikkarad]

Also addresses #33710

[mnajdova]

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[pratikkarad]

Hi @mnajdova,
If you take a look at #33710, it is explained that the component prop is missing in typescript documentation for the MenuItem component but the documentation says otherwise. This issue is not only related to the MenuItem but also present in all the components mentioned in the description of the bug.

I have also updated the Steps to reproduce step in the description.

Approaches to fix the bug -

1. Simply add component prop in every missing component's <component>.d.ts file
2. Fix the ExtendButtonBase interface as all components mentioned in the issue's descriptions are extending the ExtendButtonBase interface.
   cc: @siriwatknp

[mnajdova]

It's not missing, see #33710 (comment) Please share codesandbox with a reproduction if this is not the case.

[pratikkarad]

If I type sx and hit Ctrl + space, typescript documentation gives me the suggestion like following
But if I type component and hit Ctrl + space, it doesn't give the suggestion in typescript documentation. Snapshot attached -

Codesandbox - example

Hi @mnajdova, If you take a look at #33710, it is explained that the component prop is missing in typescript documentation for the MenuItem component but the documentation says otherwise. This issue is not only related to the MenuItem but also present in all the components mentioned in the description of the bug.

I have also updated the Steps to reproduce step in the description.

Approaches to fix the bug -

1. Simply add component prop in every missing component's <component>.d.ts file
2. Fix the ExtendButtonBase interface as all components mentioned in the issue's descriptions are extending the ExtendButtonBase interface.
   cc: @siriwatknp

Although the component prop works fine, typescript documentation is missing from the d.ts file for the respective component. I have also mentioned the fix for the issue
@siriwatknp, Will you please take a look at this issue?

[zaverden]

@pratikkarad I bumped into this today.

Because of how types are written, TS does not gives you autocompletion for component prop. but TS knows about it

I mean, this code does not report any type error, so TS knows about component prop:

import { Link, MenuItem } from "@mui/material";

export default function App() {
  return (
    <MenuItem component={Link} href="/employees/list">
      MenuItem
    </MenuItem>
  );
}

if you click through "helpers types" from MenuItem definition you'll end up in OverridableComponent, and this is where component prop is defined

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

Lines 15 to 22 in dfc0b89

	<C extends React.ElementType>(
	props: {
	/**
	* The component used for the root node.
	* Either a string to use a HTML element or a component.
	*/
	component: C;
	} & OverrideProps<M, C>,

exact path is: MenuItem -> ExtendButtonBase -> OverridableComponent

[siriwatknp]

I don't think we can do anything with the autocomplete because of how we use the component prop with OverridableComponent.