feat(clerk-js, types): asStandalone accepts a callback (#4423)

.changeset/few-swans-cough.md

@@ -0,0 +1,6 @@
+---
+"@clerk/clerk-js": patch
+"@clerk/types": patch
+---
+
+Experimental: `asStandalone` now accepts a callback that notifies if the standalone popover needs to unmount.

packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcher.tsx

@@ -54,7 +54,9 @@ const _OrganizationSwitcher = () => {
     >
       <AcceptedInvitationsProvider>
         {__experimental_asStandalone ? (
-          <OrganizationSwitcherPopover />
+          <OrganizationSwitcherPopover
+            close={typeof __experimental_asStandalone === 'function' ? __experimental_asStandalone : undefined}
+          />
         ) : (
           <OrganizationSwitcherWithFloatingTree>
             <OrganizationSwitcherPopover />

packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx

@@ -20,9 +20,7 @@ import { useRouter } from '../../router';
 import type { PropsOfComponent, ThemableCssProp } from '../../styledSystem';
 import { OrganizationActionList } from './OtherOrganizationActions';
 
-type OrganizationSwitcherPopoverProps = {
-  close?: (open: boolean | ((prevState: boolean) => boolean)) => void;
-} & PropsOfComponent<typeof PopoverCard.Root>;
+type OrganizationSwitcherPopoverProps = { close?: (open: boolean) => void } & PropsOfComponent<typeof PopoverCard.Root>;
 
 export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, OrganizationSwitcherPopoverProps>(
   (props, ref) => {

packages/clerk-js/src/ui/components/UserButton/UserButton.tsx

@@ -52,7 +52,9 @@ const _UserButton = () => {
       sx={{ display: 'inline-flex' }}
     >
       {__experimental_asStandalone ? (
-        <UserButtonPopover />
+        <UserButtonPopover
+          close={typeof __experimental_asStandalone === 'function' ? __experimental_asStandalone : undefined}
+        />
       ) : (
         <UserButtonWithFloatingTree>
           <UserButtonPopover />

packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx

@@ -9,11 +9,11 @@ import type { PropsOfComponent } from '../../styledSystem';
 import { MultiSessionActions, SignOutAllActions, SingleSessionActions } from './SessionActions';
 import { useMultisessionActions } from './useMultisessionActions';
 
-type UserButtonPopoverProps = { close?: () => void } & PropsOfComponent<typeof PopoverCard.Root>;
+type UserButtonPopoverProps = { close?: (open: boolean) => void } & PropsOfComponent<typeof PopoverCard.Root>;
 
 export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopoverProps>((props, ref) => {
   const { close: unsafeClose, ...rest } = props;
-  const close = () => unsafeClose?.();
+  const close = () => unsafeClose?.(false);
   const { session } = useSession() as { session: ActiveSessionResource };
   const { __experimental_asStandalone } = useUserButtonContext();
   const { authConfig } = useEnvironment();

packages/types/src/clerk.ts

@@ -1071,7 +1071,7 @@ export type UserButtonProps = UserButtonProfileMode & {
    * @experimental This API is experimental and may change at any moment.
    * @default undefined
    */
-  __experimental_asStandalone?: boolean;
+  __experimental_asStandalone?: boolean | ((opened: boolean) => void);
 
   /**
    * Full URL or path to navigate after sign out is complete
@@ -1140,7 +1140,7 @@ export type OrganizationSwitcherProps = CreateOrganizationMode &
      * @experimental This API is experimental and may change at any moment.
      * @default undefined
      */
-    __experimental_asStandalone?: boolean;
+    __experimental_asStandalone?: boolean | ((opened: boolean) => void);
 
     /**
      * By default, users can switch between organization and their personal account.