[material-ui][Select] TS errors with the updated SelectProps and when used in Storybook

[damisparks]

Steps to reproduce

Reproduction steps

1. Go to https://stackblitz.com/edit/github-cxka5a?preset=node
2. Open affected files: the Select.tsx and Select.stories.tsx to see the errors.

3. Go to the mui-material docs section to see the messed-up Storybook props table.

Current behavior

• The latest version of the MUI library is enforcing variant props to be present in the Select.tsx component. It has created multiple TS errors for Select.tsx and Select.stories.tsx.

Additionally, the latest change breaks the docgen table on the docs in Storybook. The docs are autogenerated by the react-docgen-typescript from @storybook/addon-docs.

See the image below.

Expected behavior

No Typescript errors. It should work as before.

Context

The root cause of the issue is that MUI has adjusted the types for Select & SelectProps type in a recent version.
This effectively makes the second Variant generic param required for mui's Select and SelectProps; if omitted, the type of variant prop effectively defaults to "outlined" (see types here).

Conceptually, MUI has combined multiple different components that have different props, HTML elements and styles into one Select component. The allowed props are different depending on the variant prop.

It makes sense that storybook is unable to generate the correct props documentation and controls for the MUI Select, because it can only generate one set of props to statically display, but this component doesn't have just one set of props. It has one set per variant.

Attempts at fixing

Fixing the types for Select

It is possible to fix the types for our Select wrapper component to make the typescript compiler happy (e.g. accepting a second generic parameter for the Variant on the wrapper component, passing it through to MuiSelect, and doing a clever union on the props argument to make variant optional again).

However we still have a dilemma with the stories, because of variant defaulting to outlined; typescript can't narrow the type for variant unless we explicitly provide the second generic argument.

Making typescript compiler happy in Select.stories.tsx

My next idea was to tweak the types in the stories file to make all of the errors go away; i.e. picking an arbitrary variant and supplying that as the second generic arg everywhere. The appearance of the component is correct and the variant can still be changed via controls; however, the prop table generated by react-docgen-typescript is incorrect and doesn't show accurate props for the selected variant.

The table is generated at build time, so there's no way to update it as the user interacts with the variant control.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Select, SelectProps

[damisparks]

@DiegoAndai FYI

[andreisocaciu]

When will this fix be released? I'm on v5.15.13 and it is still happening. Typescript version 5.4.2 (5.3.3 also reports an error)

[DiegoAndai]

Hey @andreisocaciu, this will be released this week on v5.15.14

[damisparks]

@andreisocaciu See the latest version here 👉🏾 v5.15.14