From 7c68f99cb5f6ad1759bf98e3e3f00063aee1fe65 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Wed, 15 Nov 2023 15:10:33 +0200
Subject: [PATCH] feat(clerk-js,types): Add id's to the organizationPreview
 descriptor to allow better customization

---
 .../OrganizationSwitcher/OrganizationSwitcherPopover.tsx    | 2 +-
 .../OrganizationSwitcher/OrganizationSwitcherTrigger.tsx    | 2 +-
 .../OrganizationSwitcher/UserInvitationSuggestionList.tsx   | 2 +-
 .../components/OrganizationSwitcher/UserMembershipList.tsx  | 2 +-
 packages/types/src/elementIds.ts                            | 6 +++++-
 5 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
index ed8b95db73c..f584cc151bb 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
@@ -141,7 +141,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
             {currentOrg ? (
               <>
                 <OrganizationPreview
-                  elementId={'organizationSwitcher'}
+                  elementId={'organizationSwitcherActiveOrganization'}
                   gap={4}
                   organization={currentOrg}
                   user={user}
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
index f7a02c5cb15..6d178b51ea1 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
@@ -40,7 +40,7 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
       >
         {organization && (
           <OrganizationPreview
-            elementId={'organizationSwitcher'}
+            elementId={'organizationSwitcherTrigger'}
             gap={3}
             size={'sm'}
             organization={organization}
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
index 847ccfea658..13b7becea80 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
@@ -120,7 +120,7 @@ const InvitationPreview = withCardStateProvider(
         })}
       >
         <OrganizationPreview
-          elementId='organizationSwitcher'
+          elementId='organizationSwitcherTrigger'
           avatarSx={t => ({ margin: `0 calc(${t.space.$3}/2)` })}
           organization={publicOrganizationData}
           size='sm'
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx
index c3aa09dc32a..5d40e722668 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx
@@ -94,7 +94,7 @@ export const UserMembershipList = (props: UserMembershipListProps) => {
           role='menuitem'
         >
           <OrganizationPreview
-            elementId='organizationSwitcher'
+            elementId='organizationSwitcherListedOrganization'
             avatarSx={t => ({ margin: `0 calc(${t.space.$3}/2)` })}
             organization={organization}
             size='sm'
diff --git a/packages/types/src/elementIds.ts b/packages/types/src/elementIds.ts
index 88c52f3bef0..7b5e4cf4020 100644
--- a/packages/types/src/elementIds.ts
+++ b/packages/types/src/elementIds.ts
@@ -38,7 +38,11 @@ export type ProfileSectionId =
 export type ProfilePageId = 'account' | 'security' | 'organizationSettings' | 'organizationMembers';
 
 export type UserPreviewId = 'userButton' | 'personalWorkspace';
-export type OrganizationPreviewId = 'organizationSwitcher' | 'organizationList';
+export type OrganizationPreviewId =
+  | 'organizationSwitcherTrigger'
+  | 'organizationList'
+  | 'organizationSwitcherListedOrganization'
+  | 'organizationSwitcherActiveOrganization';
 
 export type FooterActionId = 'havingTrouble' | 'alternativeMethods' | 'signUp' | 'signIn';