[material-ui][Select] TS errors with the updated SelectProps and when used in Storybook #41410
Description
Steps to reproduce
Reproduction steps
- Go to https://stackblitz.com/edit/github-cxka5a?preset=node
- Open affected files: the
Select.tsxandSelect.stories.tsxto see the errors.
- 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.tsxcomponent. It has created multiple TS errors forSelect.tsxandSelect.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