feat(clerk-js,clerk-react,types): Introduce UserButton custom menu items

[nikospapcom]

Description

Introduce support for custom menu items in <UserButton/>.

• Use <UserButton.MenuItems> as a child component to wrap custom menu items.
• Use <UserButton.Link/> for creating external or internal links.
• Use <UserButton.Action/> for opening a specific custom page of "UserProfile" or to trigger your own custom logic via onClick.
• If needed, reorder existing items like manageAccount and signOut

<UserButton>
  <UserButton.MenuItems>
    <UserButton.Link label='Terms' labelIcon={<Icon />} href='/terms' />
    <UserButton.Action label='Help' labelIcon={<Icon />} open='help' /> // Opens help page in UserProfileModal
    <UserButton.Action label='manageAccount' labelIcon={<Icon />} />
    <UserButton.Action label='Chat Modal' labelIcon={<Icon />} onClick={() => setModal(true)} />
  </UserButton.MenuItems>
</UserButton>

Custom Item

Custom Items and reordered default items

Multi-session with custom item

Multi-session custom items and reordered default items

Checklist

• npm test runs as expected.
• npm run build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

[changeset-bot]

🦋 Changeset detected

Latest commit: 80e991f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 18 packages

Name	Type
@clerk/clerk-js	Minor
@clerk/clerk-react	Minor
@clerk/types	Minor
@clerk/astro	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch
@clerk/elements	Patch
@clerk/nextjs	Patch
@clerk/remix	Patch
@clerk/tanstack-start	Patch
@clerk/backend	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/localizations	Patch
@clerk/clerk-sdk-node	Patch
@clerk/shared	Patch
@clerk/testing	Patch
@clerk/themes	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[nikospapcom]

!snapshot

[nikospapcom]

!snapshot

[nikospapcom]

!snapshot

[panteliselef]

I did a first pass on it.

[panteliselef]

❓ Do we allow for <UserProfile.MenuItems/> ? What's the reason we need this ?

[nikospapcom]

@panteliselef We can define custom pages through UserButton component and we need to allow MenuItems as children component.
For custom pages we use the useUserProfileCustomPages for both UserProfile and UserButton, maybe we should create 2 separate utils here in order to be able to determine the correct component and validate the component only if is it UserButton, wdyt?

[panteliselef]

After our discussion, I confirm that this change is necessary. Regarding your question, this is definitely a good suggestion but nothing that needs to delay this PR any longer.

[octoper]

!preview

[clerk-cookie]

Hey @octoper, your preview is available.

Status	Preview	Updated (UTC)
🍪 Deployed	Visit preview	Jul 29, 2024 04:14 PM

[anagstef]

Amazing work! 💯 🚀

[nikospapcom]

!snapshot

[clerk-cookie]

Hey @nikospapcom - the snapshot version command generated the following package versions:

Package	Version
@clerk/astro	1.0.5-snapshot.v12ddd71
@clerk/backend	1.5.0-snapshot.v12ddd71
@clerk/chrome-extension	1.1.8-snapshot.v12ddd71
@clerk/clerk-js	5.11.0-snapshot.v12ddd71
@clerk/elements	0.10.8-snapshot.v12ddd71
@clerk/clerk-expo	2.0.1-snapshot.v12ddd71
@clerk/express	0.0.22-snapshot.v12ddd71
@clerk/fastify	1.0.24-snapshot.v12ddd71
gatsby-plugin-clerk	5.0.0-beta.45
@clerk/localizations	2.5.3-snapshot.v12ddd71
@clerk/nextjs	5.2.9-snapshot.v12ddd71
@clerk/clerk-react	5.3.0-snapshot.v12ddd71
@clerk/remix	4.2.8-snapshot.v12ddd71
@clerk/clerk-sdk-node	5.0.21-snapshot.v12ddd71
@clerk/shared	2.4.2-snapshot.v12ddd71
@clerk/tanstack-start	0.1.12-snapshot.v12ddd71
@clerk/testing	1.2.4-snapshot.v12ddd71
@clerk/themes	2.1.15-snapshot.v12ddd71
@clerk/types	4.10.0-snapshot.v12ddd71

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/astro

npm i @clerk/astro@1.0.5-snapshot.v12ddd71 --save-exact

@clerk/backend

npm i @clerk/backend@1.5.0-snapshot.v12ddd71 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@1.1.8-snapshot.v12ddd71 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.11.0-snapshot.v12ddd71 --save-exact

@clerk/elements

npm i @clerk/elements@0.10.8-snapshot.v12ddd71 --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@2.0.1-snapshot.v12ddd71 --save-exact

@clerk/express

npm i @clerk/express@0.0.22-snapshot.v12ddd71 --save-exact

@clerk/fastify

npm i @clerk/fastify@1.0.24-snapshot.v12ddd71 --save-exact

gatsby-plugin-clerk

npm i gatsby-plugin-clerk@5.0.0-beta.45 --save-exact

@clerk/localizations

npm i @clerk/localizations@2.5.3-snapshot.v12ddd71 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@5.2.9-snapshot.v12ddd71 --save-exact

@clerk/clerk-react

npm i @clerk/clerk-react@5.3.0-snapshot.v12ddd71 --save-exact

@clerk/remix

npm i @clerk/remix@4.2.8-snapshot.v12ddd71 --save-exact

@clerk/clerk-sdk-node

npm i @clerk/clerk-sdk-node@5.0.21-snapshot.v12ddd71 --save-exact

@clerk/shared

npm i @clerk/shared@2.4.2-snapshot.v12ddd71 --save-exact

@clerk/tanstack-start

npm i @clerk/tanstack-start@0.1.12-snapshot.v12ddd71 --save-exact

@clerk/testing

npm i @clerk/testing@1.2.4-snapshot.v12ddd71 --save-exact

@clerk/themes

npm i @clerk/themes@2.1.15-snapshot.v12ddd71 --save-exact

@clerk/types

npm i @clerk/types@4.10.0-snapshot.v12ddd71 --save-exact

[panteliselef]

After our discussion, I confirm that this change is necessary. Regarding your question, this is definitely a good suggestion but nothing that needs to delay this PR any longer.