Merge pull request #394 from clerkinc/user_button_open_prop

feat(clerk-js): Add open prop in user button

Author: raptisj

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

@@ -10,8 +10,9 @@ import { UserButtonPopover } from './UserButtonPopover';
 import { UserButtonTrigger } from './UserButtonTrigger';
 
 const _UserButton = () => {
+  const { defaultOpen } = useUserButtonContext();
   const { floating, reference, styles, toggle, isOpen } = usePopover({
-    defaultOpen: false,
+    defaultOpen,
     placement: 'bottom-end',
     offset: 8,
   });

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

@@ -7,7 +7,7 @@ import {
   useFloating,
   UseFloatingProps,
 } from '@floating-ui/react-dom-interactions';
-import React from 'react';
+import React, { useEffect } from 'react';
 
 type UsePopoverProps = {
   defaultOpen?: boolean;
@@ -18,13 +18,20 @@ type UsePopoverProps = {
 
 export const usePopover = (props: UsePopoverProps = {}) => {
   const [isOpen, setIsOpen] = React.useState(props.defaultOpen || false);
-  const { reference, floating, strategy, x, y, context } = useFloating({
+  const { update, reference, floating, strategy, x, y, context } = useFloating({
     open: isOpen,
     onOpenChange: setIsOpen,
     whileElementsMounted: props.autoUpdate === false ? undefined : autoUpdate,
     placement: props.placement || 'bottom-start',
     middleware: [offset(props.offset || 6), flip(), shift()],
   });
+
+  useEffect(() => {
+    if (props.defaultOpen) {
+      update();
+    }
+  }, []);
+
   useDismiss(context);
 
   const toggle = React.useCallback(() => setIsOpen(o => !o), [setIsOpen]);

packages/types/src/clerk.ts

@@ -445,6 +445,10 @@ export type UserButtonProps = {
    * Controls if the username is displayed next to the trigger button
    */
   showName?: boolean;
+  /**
+    Controls the default state of the UserButton
+   */
+  defaultOpen?: boolean;
   /**
    * Full URL or path to navigate after sign out is complete
    */