Fix Types For Tab Children

[bestickley]

Before creating a new issue, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have tried disabling all browser extensions or using a different browser
• [X] I have tried deleting the node_modules folder and reinstalling my dependencies
• [X] I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Primitive components

How is your app built?

Vite

What browsers are you seeing the problem on?

Chrome

Please describe your bug.

See below TS error:

What's the expected behaviour?

<Tabs> should accept null as child as documented here

Help us reproduce the bug!

Conditionally render <TabItem> within <Tab> and see TS error.

Code Snippet

let RequestTabItem: ReactElement | null = null;
  if (canViewRequests) {
    RequestTabItem = (
      <TabItem
        title={<RequestsBadge count={length} loading={isFetching} />}
        onClick={() => navigate("requests")}
      />
    );
  }
  return (
    <>
      <Tabs currentIndex={tab} onChange={handleChange} marginBottom="small">
        <TabItem title="Members" onClick={() => navigate("members")} />

        {RequestTabItem}
      </Tabs>

Additional information and screenshots

Amplify UI does correctly not log warning message when null. This is just a TS issue.

[reesscot]

@bestickley Thanks for reporting this, we'll get it fixed!

[dbanksdesign]

This should be fixed in #3270 and go out in the next release!

[reesscot]

Fixed by https://github.com/aws-amplify/amplify-ui/pull/3270