feat(clerk-js): Support open userProfile and organizationProfile modals to specific navitems

.changeset/cuddly-spoons-decide.md

@@ -0,0 +1,6 @@
+---
+"@clerk/clerk-js": patch
+"@clerk/types": patch
+---
+
+Add support for opening the `UserProfileModal` and `OrganizationProfileModal` to specific navigation items through the `UserButton` and `OrganizationSwitcher`.

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

@@ -285,8 +285,11 @@ const Components = (props: ComponentsProps) => {
       flowName={'userProfile'}
       onClose={() => componentsControls.closeModal('userProfile')}
       onExternalNavigate={() => componentsControls.closeModal('userProfile')}
-      startPath={buildVirtualRouterUrl({ base: '/user', path: urlStateParam?.path })}
-      componentName={'SignUpModal'}
+      startPath={buildVirtualRouterUrl({
+        base: '/user',
+        path: userProfileModal?.__experimental_startPath || urlStateParam?.path,
+      })}
+      componentName={'UserProfileModal'}
       modalContainerSx={{ alignItems: 'center' }}
       modalContentSx={t => ({ height: `min(${t.sizes.$176}, calc(100% - ${t.sizes.$12}))`, margin: 0 })}
     >
@@ -302,7 +305,10 @@ const Components = (props: ComponentsProps) => {
       flowName={'organizationProfile'}
       onClose={() => componentsControls.closeModal('organizationProfile')}
       onExternalNavigate={() => componentsControls.closeModal('organizationProfile')}
-      startPath={buildVirtualRouterUrl({ base: '/organizationProfile', path: urlStateParam?.path })}
+      startPath={buildVirtualRouterUrl({
+        base: '/organizationProfile',
+        path: organizationProfileModal?.__experimental_startPath || urlStateParam?.path,
+      })}
       componentName={'OrganizationProfileModal'}
       modalContainerSx={{ alignItems: 'center' }}
       modalContentSx={t => ({ height: `min(${t.sizes.$176}, calc(100% - ${t.sizes.$12}))`, margin: 0 })}

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

@@ -88,13 +88,15 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
       return openCreateOrganization({ afterCreateOrganizationUrl, skipInvitationScreen });
     };
 
-    const handleManageOrganizationClicked = () => {
+    const handleItemClick = (__experimental_startPath?: string) => {
       close();
       if (organizationProfileMode === 'navigation') {
         return navigateOrganizationProfile();
       }
+
       return openOrganizationProfile({
         ...organizationProfileProps,
+        ...(__experimental_startPath && { __experimental_startPath }),
         afterLeaveOrganizationUrl,
         //@ts-expect-error
         __unstable_manageBillingUrl,
@@ -112,7 +114,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
         iconElementDescriptor={descriptors.organizationSwitcherPopoverActionButtonIcon}
         iconElementId={descriptors.organizationSwitcherPopoverActionButtonIcon.setId('manageOrganization')}
         icon={CogFilled}
-        onClick={handleManageOrganizationClicked}
+        onClick={() => handleItemClick()}
         trailing={<NotificationCountBadgeManageButton />}
       />
     );
@@ -127,7 +129,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
         iconElementId={descriptors.organizationSwitcherPopoverActionButtonIcon.setId('manageOrganization')}
         icon={CogFilled}
         label={localizationKeys('organizationSwitcher.action__manageOrganization')}
-        onClick={handleManageOrganizationClicked}
+        onClick={() => handleItemClick()}
         trailing={<NotificationCountBadgeManageButton />}
       />
     );

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

@@ -41,11 +41,27 @@ export const useMultisessionActions = (opts: UseMultisessionActionsParams) => {
         })();
       });
     }
-
     openUserProfile(opts.userProfileProps);
     return opts.actionCompleteCallback?.();
   };
 
+  const handleUserProfileActionClicked = (__experimental_startPath?: string) => {
+    if (opts.userProfileMode === 'navigation') {
+      return navigate(opts.userProfileUrl || '').finally(() => {
+        void (async () => {
+          await sleep(300);
+          opts.actionCompleteCallback?.();
+        })();
+      });
+    }
+    openUserProfile({
+      ...opts.userProfileProps,
+      ...(__experimental_startPath && { __experimental_startPath }),
+    });
+
+    return opts.actionCompleteCallback?.();
+  };
+
   const handleSignOutAllClicked = () => {
     return signOut(opts.navigateAfterSignOut);
   };
@@ -66,6 +82,7 @@ export const useMultisessionActions = (opts: UseMultisessionActionsParams) => {
   return {
     handleSignOutSessionClicked,
     handleManageAccountClicked,
+    handleUserProfileActionClicked,
     handleSignOutAllClicked,
     handleSessionClicked,
     handleAddAccountClicked,

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

@@ -3,7 +3,8 @@ import { useRouter } from '../router';
 export const useNavigateToFlowStart = () => {
   const router = useRouter();
   const navigateToFlowStart = async () => {
-    const to = '/' + router.basePath + router.flowStartPath;
+    const to = router.indexPath;
+
     if (to !== router.currentPath) {
       return router.navigate(to);
     }

packages/types/src/clerk.ts

@@ -816,6 +816,7 @@ export type UserProfileProps = RoutingOptions & {
    * Provide custom pages and links to be rendered inside the UserProfile.
    */
   customPages?: CustomPage[];
+  __experimental_startPath?: string;
 };
 
 export type UserProfileModalProps = WithoutRouting<UserProfileProps>;
@@ -836,6 +837,7 @@ export type OrganizationProfileProps = RoutingOptions & {
    * Provide custom pages and links to be rendered inside the OrganizationProfile.
    */
   customPages?: CustomPage[];
+  __experimental_startPath?: string;
 };
 
 export type OrganizationProfileModalProps = WithoutRouting<OrganizationProfileProps>;