feat(clerk-js,types): Add option to disable portaling within UserButt…

…on and OrgSwitcher components

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

@@ -1,14 +1,16 @@
 import { useId } from 'react';
 
-import { AcceptedInvitationsProvider, withCoreUserGuard } from '../../contexts';
+import { AcceptedInvitationsProvider, useOrganizationSwitcherContext, withCoreUserGuard } from '../../contexts';
 import { Flow } from '../../customizables';
 import { Popover, withCardStateProvider, withFloatingTree } from '../../elements';
 import { usePopover } from '../../hooks';
 import { OrganizationSwitcherPopover } from './OrganizationSwitcherPopover';
 import { OrganizationSwitcherTrigger } from './OrganizationSwitcherTrigger';
 
 const _OrganizationSwitcher = withFloatingTree(() => {
+  const { defaultOpen, portal } = useOrganizationSwitcherContext();
   const { floating, reference, styles, toggle, isOpen, nodeId, context } = usePopover({
+    defaultOpen,
     placement: 'bottom-start',
     offset: 8,
   });
@@ -32,6 +34,7 @@ const _OrganizationSwitcher = withFloatingTree(() => {
           nodeId={nodeId}
           context={context}
           isOpen={isOpen}
+          portal={portal}
         >
           <OrganizationSwitcherPopover
             id={switcherButtonMenuId}

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

@@ -8,7 +8,7 @@ import { UserButtonPopover } from './UserButtonPopover';
 import { UserButtonTrigger } from './UserButtonTrigger';
 
 const _UserButton = withFloatingTree(() => {
-  const { defaultOpen } = useUserButtonContext();
+  const { defaultOpen, portal } = useUserButtonContext();
   const { floating, reference, styles, toggle, isOpen, nodeId, context } = usePopover({
     defaultOpen,
     placement: 'bottom-end',
@@ -33,6 +33,7 @@ const _UserButton = withFloatingTree(() => {
         nodeId={nodeId}
         context={context}
         isOpen={isOpen}
+        portal={portal}
       >
         <UserButtonPopover
           id={userButtonMenuId}

packages/types/src/clerk.ts

@@ -894,6 +894,11 @@ export type UserButtonProps = UserButtonProfileMode & {
    * Controls the default state of the UserButton
    */
   defaultOpen?: boolean;
+  /**
+   * By default, the popover will be rendered outside of the app root and into the body.
+   * @default true
+   */
+  portal?: boolean;
   /**
    * Full URL or path to navigate after sign out is complete
    * @deprecated Configure `afterSignOutUrl` as a global configuration, either in <ClerkProvider/> or in await Clerk.load()
@@ -949,6 +954,11 @@ export type OrganizationSwitcherProps = CreateOrganizationMode &
      * Controls the default state of the OrganizationSwitcher
      */
     defaultOpen?: boolean;
+    /**
+     * By default, the popover will be rendered outside of the app root and into the body.
+     * @default true
+     */
+    portal?: boolean;
     /**
      * By default, users can switch between organization and their personal account.
      * This option controls whether OrganizationSwitcher will include the user's personal account