[Bug]: TypeScript Errors in SideNav, SideNavItem and SideNavMenuItem Components of @carbon/react

[Yaren-IT]

Package

@carbon/react

Browser

No response

Package version

1.45.0

React version

18.2.0

Description

Missing 'placeholder' Property in SideNav Component:

• TypeScript (version 5.3.3) is flagging a missing but required property 'placeholder' in the SideNav component from the @carbon/react library.
• The corresponding d.ts file does not indicate such a requirement, and the documentation in the Storybook also lacks information on this property. Am I overlooking something?

app/page.tsx:16:8 - error TS2741: Property 'placeholder' is missing in type '{ children: Element; "aria-label": string; }' but required in type 'Pick<SideNavProps, "children" | "lang" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | ... 260 more ... | "onSideNavBlur">'.

16       <SideNav aria-label="Side Navigation">
          ~~~~~~~

My current workaround is setting placeholder as undefined:

<SideNav aria-label="Side Navigation" placeholder={undefined}>

TypeScript Errors for 'href' Prop in SideNavItem and SideNavMenuItem:

• TypeScript is generating errors for SideNavItem and SideNavMenuItem components, claiming they do not recognize the 'href' prop.
• Upon inspecting the library source code, I observed that the 'href' prop is passed to the nested Link Component using the ...rest prop. However, TypeScript seems unaware of this.

app/page.tsx:19:24 - error TS2322: Type '{ children: string; href: string; }' is not assignable to type 'IntrinsicAttributes & SideNavItemProps'.
  Property 'href' does not exist on type 'IntrinsicAttributes & SideNavItemProps'.

19           <SideNavItem href="/">Home</SideNavItem>
                          ~~~~

app/page.tsx:22:30 - error TS2322: Type '{ children: string; href: string; }' is not assignable to type 'IntrinsicAttributes & SideNavMenuItemProps & RefAttributes<HTMLElement>'.
  Property 'href' does not exist on type 'IntrinsicAttributes & SideNavMenuItemProps & RefAttributes<HTMLElement>'. Did you mean 'ref'?

22             <SideNavMenuItem href="/">Home</SideNavMenuItem>
                                ~~~~

My current workaround is passing the Linkprops as an Object:

<SideNavItem {...{href: "/"}>Home</SideNavItem> 

Request for Clarification

Could someone clarify whether the 'placeholder' property in the SideNav component is a recent addition or if there's any missing documentation?
Additionally, is there a specific TypeScript configuration needed to address the errors related to 'href' prop recognition in SideNavItem and SideNavMenuItem?

Reproduction/example

https://codesandbox.io/p/github/Yaren-IT/carbon-nextjs-sidenav/main

Steps to reproduce

1. open CodeSandbox
2. run task Run tsc
3. observe the errors

2023-12-11_20-59-00.mp4

Suggested Severity

Severity 4 = Unrelated to a user task, has a workaround or does not need a workaround.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[guidari]

I just opened your reproduction example and it seems it is working without any errors for the SideNav. But the "TypeScript Errors for 'href' Prop in SideNavItem and SideNavMenuItem" still going on and have to fixed.

Thanks for opening that!

[2nikhiltom]

Hey @Yaren-IT

1. Missing 'placeholder' Property in SideNav Component

It is working without any errors, can not see reproduction in codesandbox and In my local , It looks good.

2. TypeScript Errors for 'href' Prop in SideNavItem and SideNavMenuItem

SideNavMenuItem : is fixed via #16113

3. For SideNavItem : I believe SideNavLink component will be a better fit to pass href . it's specifically designed for handling links.

<SideNavLink href="/">Home</SideNavLink>

Please update if this helps or if you are encountering any other issues.