Sidebar props not picked up correctly by TypeScript

[robinzigmond]

Current behaviour

For the Sidebar component, the prop types are not enforced correctly by the TypeScript compiler. This can be seen on both VS Code and on Codesandbox in the codesandbox demo below. Note how:

• the incorrect type given to disableEscKey is not flagged as an error at all by TS in the editor (although it does generate an error from PropTypes at runtime)
• the type of all props, seen if you hover over them, is simply inferred from what is entered, rather than picked up from the actual type declaration. Eg that disableEscKey prop is thought to be a string (when it should be boolean), while open is inferred as just the literal true when it again should be boolean.
• there is no autocompletion if you want to add another prop

Assuming this is consistent behaviour and not just a quirk of the editor (it seems to be consistent as I'm seeing the same on both VS Code and CodeSandbox - and even if it's specific to those VSC is a very common editor!), this needs to be fixed as it defeats the point of using TypeScript for this specific component.

Expected behaviour

TypeScript should check the types and flag an error for props of incorrect types, as well as show the correct declared type on hover for each prop.

CodeSandbox or Storybook URL

https://codesandbox.io/s/cool-satoshi-pdp5rp?file=/src/index.tsx

JIRA Ticket (Sage Only)

No response

Suggested Solution

No response

Carbon Version

111.1.0

Design Tokens Version

No response

What browsers are you seeing the problem on?

Chrome

What Operating System are you seeing the problem on?

MacOS

Anything else we should know?

on further investigation, I think this is due to the following in the DataProps interface, which are extended by TagProps which is in turn extended by SidebarProps (as well as other component props interfaces):

[restKeys: string]: any;

In particular, if I comment that out locally then the types on Sidebar seem to work correctly.

While other components use TagProps, Sidebar seems to be the only one that also uses forwardRef, and this does indeed seem to be the problem (due to how React itself types forwardRef). See this CSB demo for how adding [rest: string]: any to a props type causes type checking to fail when used with forwardRef, but not without.

I think the only solution is to remove the [restKeys: string]: any; and find some other way to achieve what we intended by that.

Confidentiality

• I confirm there is no confidential or commercially sensitive information included.

[nicktitchmarsh]

FE-5407

[carbonci]

🎉 This issue has been resolved in version 111.5.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀