From 739d19ead585df13268a35647f60829ca4066972 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Fri, 7 Jul 2023 12:01:35 +0300
Subject: [PATCH 1/3] fix(clerk-js): Remove user identifier from
 OrganizationSwitcherTrigger

---
 .../OrganizationSwitcher/OrganizationSwitcherTrigger.tsx     | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
index ea7a56048f..047e9b1275 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
@@ -13,7 +13,8 @@ type OrganizationSwitcherTriggerProps = PropsOfComponent<typeof Button> & {
 export const OrganizationSwitcherTrigger = withAvatarShimmer(
   forwardRef<HTMLButtonElement, OrganizationSwitcherTriggerProps>((props, ref) => {
     const { sx, ...rest } = props;
-    const user = useCoreUser();
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = useCoreUser();
     const { organization } = useCoreOrganization();
     const { hidePersonal } = useOrganizationSwitcherContext();
 
@@ -39,7 +40,7 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
           <PersonalWorkspacePreview
             size={'sm'}
             gap={3}
-            user={user}
+            user={userWithoutIdentifiers}
             title={
               hidePersonal
                 ? localizationKeys('organizationSwitcher.notSelected')

From e63125024e714dcf079b44a6826284245e7fda2a Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Fri, 7 Jul 2023 12:24:49 +0300
Subject: [PATCH 2/3] fix(clerk-js): Hide avatar in Organization Switcher when
 hidePersonal is true

---
 .../OrganizationSwitcherTrigger.tsx            |  1 +
 .../clerk-js/src/ui/elements/UserPreview.tsx   | 18 +++++++++++++++---
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
index 047e9b1275..0f80ebc9ed 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
@@ -41,6 +41,7 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
             size={'sm'}
             gap={3}
             user={userWithoutIdentifiers}
+            showAvatar={!hidePersonal}
             title={
               hidePersonal
                 ? localizationKeys('organizationSwitcher.notSelected')
diff --git a/packages/clerk-js/src/ui/elements/UserPreview.tsx b/packages/clerk-js/src/ui/elements/UserPreview.tsx
index ac03d61280..1b715b5f07 100644
--- a/packages/clerk-js/src/ui/elements/UserPreview.tsx
+++ b/packages/clerk-js/src/ui/elements/UserPreview.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import { getFullName, getIdentifier } from '../../utils/user';
 import type { LocalizationKey } from '../customizables';
 import { descriptors, Flex, Text, useLocalizations } from '../customizables';
-import type { PropsOfComponent, ThemableCssProp } from '../styledSystem';
+import type { InternalTheme, PropsOfComponent, ThemableCssProp } from '../styledSystem';
 import { UserAvatar } from './UserAvatar';
 
 // TODO Make this accept an interface with the superset of fields in:
@@ -66,6 +66,8 @@ export const UserPreview = (props: UserPreviewProps) => {
 
   const imageUrl = imageUrlProp || user?.imageUrl || externalAccount?.imageUrl;
 
+  const getAvatarSizes = (t: InternalTheme) => ({ sm: t.sizes.$8, md: t.sizes.$11, lg: t.sizes.$12x5 }[size]);
+
   return (
     <Flex
       elementDescriptor={descriptors.userPreview}
@@ -75,7 +77,7 @@ export const UserPreview = (props: UserPreviewProps) => {
       sx={[{ minWidth: '0px', width: '100%' }, sx]}
       {...rest}
     >
-      {showAvatar && (
+      {showAvatar ? (
         <Flex
           elementDescriptor={descriptors.userPreviewAvatarContainer}
           elementId={descriptors.userPreviewAvatarContainer.setId(elementId)}
@@ -90,13 +92,23 @@ export const UserPreview = (props: UserPreviewProps) => {
             {...samlAccount}
             name={name}
             avatarUrl={imageUrl}
-            size={t => ({ sm: t.sizes.$8, md: t.sizes.$11, lg: t.sizes.$12x5 }[size])}
+            size={getAvatarSizes}
             sx={avatarSx}
             rounded={rounded}
           />
 
           {icon && <Flex sx={{ position: 'absolute', left: 0, bottom: 0 }}>{icon}</Flex>}
         </Flex>
+      ) : (
+        // Reserve layout space when avatar is not visible
+        <Flex
+          elementDescriptor={descriptors.userPreviewAvatarContainer}
+          elementId={descriptors.userPreviewAvatarContainer.setId(elementId)}
+          justify='center'
+          sx={t => ({
+            height: getAvatarSizes(t),
+          })}
+        />
       )}
 
       <Flex

From d935c988dc4069c94d557b5ae76a340d65455a8f Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Fri, 7 Jul 2023 12:55:03 +0300
Subject: [PATCH 3/3] fix(clerk-js): Remove user identifier in
 OrganizationSwitcherPopover

---
 .changeset/six-carrots-visit.md                             | 6 ++++++
 .../OrganizationSwitcher/OrganizationSwitcherPopover.tsx    | 4 +++-
 2 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/six-carrots-visit.md

diff --git a/.changeset/six-carrots-visit.md b/.changeset/six-carrots-visit.md
new file mode 100644
index 0000000000..7b2f9e463a
--- /dev/null
+++ b/.changeset/six-carrots-visit.md
@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+---
+Changes to OrganizationSwitcher
+- Removal of user identifier from the trigger & popover
+- Hidden avatar of active user when `hidePersonal` is true
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
index afd887682f..51820cf05e 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
@@ -52,6 +52,8 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
     } = useOrganizationSwitcherContext();
 
     const user = useCoreUser();
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = user;
 
     if (!isLoaded) {
       return null;
@@ -139,7 +141,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
               !hidePersonal && (
                 <PersonalWorkspacePreview
                   gap={4}
-                  user={user}
+                  user={userWithoutIdentifiers}
                   sx={theme => ({ padding: `0 ${theme.space.$6}`, marginBottom: theme.space.$6 })}
                   title={localizationKeys('organizationSwitcher.personalWorkspace')}
                 />