feat(clerk-js,types): Standalone UserButton and OrganizationSwitcher by panteliselef · Pull Request #4042 · clerk/javascript

panteliselef · 2024-08-28T14:56:36Z

Description

Introducing asProvider and asStandalone to UserButton and OrganizationSwitcher. This PR brings a solutions to these questions:

How to provide my own custom trigger for UserButton and OrganizationSwitcher
Can I use radix instead of floating UI with the prebuilt UI components ?

`<UserButton />` component

In this example we are mounting the UI of UserButton’s popover directly into our page. When asStandalone is passed to <UserButton.Outlet /> the component will not render in a portal or any overlay.

<UserButton asProvider afterSignOutUrl='/'>
  <UserButton.UserProfilePage label="Custom Page" url="/custom-page"> 
    <h1> This is my page available to all children </h1>
  </UserButton.UserProfilePage>
  <UserButton.Outlet asStandalone />
</UserButton>

`<OrganizationSwitcher />` component

asStandalone controls whether the component renders the trigger or it will be standalone. Defaults to false
<OrganizationSwitcher asProvider> converts the OrganizationSwitcher to a provider that will pass its configuration down to <OrganizationSwitcher.Outlet /> . Rendering is deferred until <OrganizationSwitcher.Outlet /> is mounted.

<OrganizationSwitcher asProvider afterSignOutUrl='/'>
  <OrganizationSwitcher.OrganizationProfilePage label="Custom Page" url="/custom-page"> 
    <h1> This is my page available to all children </h1>
  </OrganizationSwitcher.OrganizationProfilePage>
	
  <OrganizationSwitcher.Outlet asStandalone />
</OrganizationSwitcher>

Custom trigger for OrganizationSwitcher with shadcn/ui

'use client';

import { OrganizationSwitcher } from '@clerk/nextjs';
import * as Popover from '@radix-ui/react-popover';

export function ShadcnOrganizationSwitcher({
  children,
}: PropsWithChildren ) {
  return (
    <Popover.Root>
      <Popover.Trigger asChild>
        <Button variant="outline">Open</Button>
      </Popover.Trigger>

      <OrganizationSwitcher
        asProvider
        afterSelectPersonalUrl='/'
        afterSelectOrganizationUrl='/'
      >
        <OrganizationSwitcher.OrganizationProfilePage label="Custom Page" url="/custom-page"> 
          <h1> This is my page available to all children </h1>
        </OrganizationSwitcher.OrganizationProfilePage>
        
        <Popover.Portal>
          <Popover.Content>
          
            <OrganizationSwitcher.Outlet asStandalone  />
          
          </Popover.Content>
        </Popover.Portal>
      </OrganizationSwitcher>
    </Popover.Root>
  );
}

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

changeset-bot · 2024-08-28T14:56:40Z

🦋 Changeset detected

Latest commit: 65fe1c8

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-react	Minor
@clerk/clerk-js	Minor
@clerk/types	Minor
@clerk/chrome-extension	Patch
@clerk/elements	Patch
@clerk/clerk-expo	Patch
@clerk/nextjs	Patch
@clerk/remix	Patch
@clerk/tanstack-start	Patch
@clerk/astro	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

This reverts commit d27b4ce.

panteliselef · 2024-08-28T18:34:00Z

!snapshot

clerk-cookie · 2024-08-28T18:38:04Z

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

Package	Version
@clerk/astro	1.2.4-snapshot.v2f69080
@clerk/backend	1.8.4-snapshot.v2f69080
@clerk/chrome-extension	1.2.7-snapshot.v2f69080
@clerk/clerk-js	5.18.0-snapshot.v2f69080
@clerk/elements	0.14.4-snapshot.v2f69080
@clerk/clerk-expo	2.2.5-snapshot.v2f69080
@clerk/express	0.0.34-snapshot.v2f69080
@clerk/fastify	1.0.36-snapshot.v2f69080
@clerk/localizations	2.7.1-snapshot.v2f69080
@clerk/nextjs	5.3.7-snapshot.v2f69080
@clerk/clerk-react	5.4.6-snapshot.v2f69080
@clerk/remix	4.2.20-snapshot.v2f69080
@clerk/clerk-sdk-node	5.0.33-snapshot.v2f69080
@clerk/shared	2.5.6-snapshot.v2f69080
@clerk/tanstack-start	0.3.3-snapshot.v2f69080
@clerk/testing	1.2.16-snapshot.v2f69080
@clerk/themes	2.1.25-snapshot.v2f69080
@clerk/types	4.17.0-snapshot.v2f69080

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

npm i @clerk/astro@1.2.4-snapshot.v2f69080 --save-exact

@clerk/backend

npm i @clerk/backend@1.8.4-snapshot.v2f69080 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@1.2.7-snapshot.v2f69080 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.18.0-snapshot.v2f69080 --save-exact

@clerk/elements

npm i @clerk/elements@0.14.4-snapshot.v2f69080 --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@2.2.5-snapshot.v2f69080 --save-exact

@clerk/express

npm i @clerk/express@0.0.34-snapshot.v2f69080 --save-exact

@clerk/fastify

npm i @clerk/fastify@1.0.36-snapshot.v2f69080 --save-exact

@clerk/localizations

npm i @clerk/localizations@2.7.1-snapshot.v2f69080 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@5.3.7-snapshot.v2f69080 --save-exact

@clerk/clerk-react

npm i @clerk/clerk-react@5.4.6-snapshot.v2f69080 --save-exact

@clerk/remix

npm i @clerk/remix@4.2.20-snapshot.v2f69080 --save-exact

@clerk/clerk-sdk-node

npm i @clerk/clerk-sdk-node@5.0.33-snapshot.v2f69080 --save-exact

@clerk/shared

npm i @clerk/shared@2.5.6-snapshot.v2f69080 --save-exact

@clerk/tanstack-start

npm i @clerk/tanstack-start@0.3.3-snapshot.v2f69080 --save-exact

@clerk/testing

npm i @clerk/testing@1.2.16-snapshot.v2f69080 --save-exact

@clerk/themes

npm i @clerk/themes@2.1.25-snapshot.v2f69080 --save-exact

@clerk/types

npm i @clerk/types@4.17.0-snapshot.v2f69080 --save-exact

packages/types/src/clerk.ts

…serbutton-and-switcher

panteliselef · 2024-09-04T07:55:11Z

We discovered an issue where the usage of these experimental props will prevent custom pages from being rendered. We should resolve this before merging this one. We will add unit tests to cover this case

packages/clerk-js/src/ui/hooks/usePopover.ts

panteliselef · 2024-10-14T20:07:28Z

!snapshot

clerk-cookie · 2024-10-14T20:11:01Z

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

Package	Version
@clerk/astro	1.3.14-snapshot.v2f940fd
@clerk/backend	1.13.10-snapshot.v2f940fd
@clerk/chrome-extension	1.3.19-snapshot.v2f940fd
@clerk/clerk-js	5.27.0-snapshot.v2f940fd
@clerk/elements	0.16.1-snapshot.v2f940fd
@clerk/clerk-expo	2.2.25-snapshot.v2f940fd
@clerk/express	1.2.3-snapshot.v2f940fd
@clerk/fastify	2.0.1-snapshot.v2f940fd
@clerk/localizations	3.2.1-snapshot.v2f940fd
@clerk/nextjs	5.7.3-snapshot.v2f940fd
@clerk/clerk-react	5.11.1-snapshot.v2f940fd
@clerk/remix	4.2.37-snapshot.v2f940fd
@clerk/clerk-sdk-node	5.0.50-snapshot.v2f940fd
@clerk/shared	2.9.1-snapshot.v2f940fd
@clerk/tanstack-start	0.4.13-snapshot.v2f940fd
@clerk/testing	1.3.11-snapshot.v2f940fd
@clerk/themes	2.1.36-snapshot.v2f940fd
@clerk/types	4.26.0-snapshot.v2f940fd

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

npm i @clerk/astro@1.3.14-snapshot.v2f940fd --save-exact

@clerk/backend

npm i @clerk/backend@1.13.10-snapshot.v2f940fd --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@1.3.19-snapshot.v2f940fd --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.27.0-snapshot.v2f940fd --save-exact

@clerk/elements

npm i @clerk/elements@0.16.1-snapshot.v2f940fd --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@2.2.25-snapshot.v2f940fd --save-exact

@clerk/express

npm i @clerk/express@1.2.3-snapshot.v2f940fd --save-exact

@clerk/fastify

npm i @clerk/fastify@2.0.1-snapshot.v2f940fd --save-exact

@clerk/localizations

npm i @clerk/localizations@3.2.1-snapshot.v2f940fd --save-exact

@clerk/nextjs

npm i @clerk/nextjs@5.7.3-snapshot.v2f940fd --save-exact

@clerk/clerk-react

npm i @clerk/clerk-react@5.11.1-snapshot.v2f940fd --save-exact

@clerk/remix

npm i @clerk/remix@4.2.37-snapshot.v2f940fd --save-exact

@clerk/clerk-sdk-node

npm i @clerk/clerk-sdk-node@5.0.50-snapshot.v2f940fd --save-exact

@clerk/shared

npm i @clerk/shared@2.9.1-snapshot.v2f940fd --save-exact

@clerk/tanstack-start

npm i @clerk/tanstack-start@0.4.13-snapshot.v2f940fd --save-exact

@clerk/testing

npm i @clerk/testing@1.3.11-snapshot.v2f940fd --save-exact

@clerk/themes

npm i @clerk/themes@2.1.36-snapshot.v2f940fd --save-exact

@clerk/types

npm i @clerk/types@4.26.0-snapshot.v2f940fd --save-exact

integration/tests/custom-pages.test.ts

packages/types/src/clerk.ts

packages/react/src/components/uiComponents.tsx

Co-authored-by: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>

…change-to-userbutton-and-switcher

LekoArts

Test coverage seems good 👍 Couple of questions and improvements here and there

.changeset/clean-mugs-wave.md

.changeset/shaggy-kids-fail.md

packages/react/src/components/uiComponents.tsx

packages/react/src/utils/useCustomPages.tsx

packages/types/src/clerk.ts

Co-authored-by: Lennart <lekoarts@gmail.com>

…serbutton-and-switcher

alexcarpenter · 2024-10-15T19:19:12Z

packages/types/src/clerk.ts

+   * @experimental This API is experimental and may change at any moment.
+   * @default undefined
+   */
+  __experimental_asStandalone?: boolean;


💭 non-blocking: we should consider disabling the animation on the PopoverCardRoot when __experimental_asStandalone is true. The assumption there is that they want to control the entrance within the popover implementation.

Similarly with the org switcher.

Example showing the animation happening when opening a radix popover that wouldn't be desired.

Screen.Recording.2024-10-15.at.3.28.02.PM.mov

I am wondering if we'd remove the z-index declaration too since you can see in the video above that it interferes with other elements on the page.

z-index in cards need to go for sure

I also hear your point about the animation, can't they disable animations ? i thought we offered this.

Its a CSS animation, so I don't think that respects the animation layout prop.

javascript/packages/clerk-js/src/ui/elements/PopoverCard.tsx

Line 24 in 069103c

animation: `${animations.dropdownSlideInScaleAndFade} ${t.transitionDuration.$fast}`,

Screen.Recording.2024-10-15.at.3.56.04.PM.mov

…serbutton-and-switcher

LekoArts

My review requests are solved 👍 I think adjusting for the animations like Alex said would be worthwhile

…change-to-userbutton-and-switcher

…serbutton-and-switcher

…4042) Co-authored-by: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com> Co-authored-by: Lennart <lekoarts@gmail.com>

clerk-cookie added types clerk-js labels Aug 28, 2024

panteliselef added 9 commits August 28, 2024 20:56

feat(clerk-js): Experimental controlled UserButton

3b240b7

chore(clerk-js): Add changeset

14f15ee

feat(clerk-js): Experimental controlled OrganizationSwitcher

92bbb91

feat(clerk-js): Standalone OrganizationSwitcher

0eb2bda

drop unwanted changes

74582c6

Revert "drop unwanted changes"

d187ba2

This reverts commit d27b4ce.

support hideTrigger in userButton

7cd9c0b

remove experimental open

75e0933

update naming and write jsdoc

d6f58e3

panteliselef force-pushed the elef/sdk-1754-add-open-and-onopenchange-to-userbutton-and-switcher branch from 4edbec3 to d6f58e3 Compare August 28, 2024 17:56

minor cleanup

2f69080

panteliselef self-assigned this Aug 28, 2024

panteliselef changed the title ~~feat(clerk-js): Experimental controlled UserButton~~ feat(clerk-js): Standalone UserButton and OrganizationSwitcher Aug 28, 2024

panteliselef changed the title ~~feat(clerk-js): Standalone UserButton and OrganizationSwitcher~~ feat(clerk-js,types): Standalone UserButton and OrganizationSwitcher Aug 28, 2024

panteliselef added 2 commits August 30, 2024 20:05

add unit tests

22691cb

update changeset

08a1b3e

panteliselef marked this pull request as ready for review August 30, 2024 17:08

panteliselef requested a review from a team August 30, 2024 17:10

alexcarpenter reviewed Aug 30, 2024

View reviewed changes

packages/types/src/clerk.ts Outdated Show resolved Hide resolved

Merge branch 'main' into elef/sdk-1754-add-open-and-onopenchange-to-u…

3c38cd1

…serbutton-and-switcher

alexcarpenter approved these changes Sep 3, 2024

View reviewed changes

panteliselef changed the title ~~feat(clerk-js,types): Standalone UserButton and OrganizationSwitcher~~ DO NOT MERGE feat(clerk-js,types): Standalone UserButton and OrganizationSwitcher Sep 4, 2024

panteliselef marked this pull request as draft September 4, 2024 10:47

wip

57e39d9

panteliselef added 3 commits October 14, 2024 20:12

cleanup

131e99c

bring back pages

727ffed

revert necessary changes

2f940fd

panteliselef marked this pull request as ready for review October 14, 2024 17:54

LauraBeatris reviewed Oct 14, 2024

View reviewed changes

packages/clerk-js/src/ui/hooks/usePopover.ts Outdated Show resolved Hide resolved

LauraBeatris reviewed Oct 14, 2024

View reviewed changes

panteliselef and others added 5 commits October 15, 2024 10:10

Apply suggestions from code review

2516815

Co-authored-by: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>

update changeset

237af16

add changeset for react

957661c

Merge branch 'refs/heads/main' into elef/sdk-1754-add-open-and-onopen…

6152be0

…change-to-userbutton-and-switcher

fix formatting

7b7f8d5

LekoArts suggested changes Oct 15, 2024

View reviewed changes

panteliselef and others added 2 commits October 15, 2024 15:55

Apply suggestions from code review

3ef3bb5

Co-authored-by: Lennart <lekoarts@gmail.com>

address review comments

a84b075

panteliselef requested a review from LekoArts October 15, 2024 13:11

update bundlewatch.config.json

1d67a45

LauraBeatris approved these changes Oct 15, 2024

View reviewed changes

Merge branch 'main' into elef/sdk-1754-add-open-and-onopenchange-to-u…

04bb42b

…serbutton-and-switcher

alexcarpenter reviewed Oct 15, 2024

View reviewed changes

Merge branch 'main' into elef/sdk-1754-add-open-and-onopenchange-to-u…

7fee588

…serbutton-and-switcher

LekoArts approved these changes Oct 16, 2024

View reviewed changes

panteliselef added 3 commits October 16, 2024 12:19

Merge branch 'refs/heads/main' into elef/sdk-1754-add-open-and-onopen…

68fec36

…change-to-userbutton-and-switcher

when popover with asStandalone avoid entry animations

d4b8a12

Merge branch 'main' into elef/sdk-1754-add-open-and-onopenchange-to-u…

65fe1c8

…serbutton-and-switcher

panteliselef merged commit ce40ff6 into main Oct 16, 2024

panteliselef deleted the elef/sdk-1754-add-open-and-onopenchange-to-userbutton-and-switcher branch October 16, 2024 10:33

clerk-cookie mentioned this pull request Oct 16, 2024

ci(repo): Version packages #4336

Merged

wobsoriano pushed a commit that referenced this pull request Feb 8, 2025

feat(clerk-js,types): Standalone UserButton and OrganizationSwitcher (#…

e395848

…4042) Co-authored-by: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com> Co-authored-by: Lennart <lekoarts@gmail.com>

Conversation

panteliselef commented Aug 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

<UserButton /> component

<OrganizationSwitcher /> component

Custom trigger for OrganizationSwitcher with shadcn/ui

Checklist

Type of change

Uh oh!

changeset-bot bot commented Aug 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

panteliselef commented Aug 28, 2024

Uh oh!

clerk-cookie commented Aug 28, 2024

Uh oh!

Uh oh!

panteliselef commented Sep 4, 2024

Uh oh!

Uh oh!

panteliselef commented Oct 14, 2024

Uh oh!

clerk-cookie commented Oct 14, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

LekoArts left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

alexcarpenter Oct 15, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexcarpenter Oct 15, 2024

Choose a reason for hiding this comment

Uh oh!

panteliselef Oct 15, 2024

Choose a reason for hiding this comment

Uh oh!

alexcarpenter Oct 15, 2024

Choose a reason for hiding this comment

Uh oh!

LekoArts left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

panteliselef commented Aug 28, 2024 •

edited

Loading

`<UserButton />` component

`<OrganizationSwitcher />` component

changeset-bot bot commented Aug 28, 2024 •

edited

Loading

alexcarpenter Oct 15, 2024 •

edited

Loading