From 82be9da75ec5909e9c037ff0fec5dbfa569b6bcf Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Tue, 16 Apr 2024 17:31:46 +0300
Subject: [PATCH 1/3] fix(clerk-js): Removing hoverable state from
 no-interactive sections in <UserProfile/>

---
 .changeset/two-bugs-relate.md                                | 5 +++++
 .../src/ui/components/UserProfile/ActiveDevicesSection.tsx   | 3 +--
 .../ui/components/UserProfile/ConnectedAccountsSection.tsx   | 5 +----
 .../clerk-js/src/ui/components/UserProfile/EmailsSection.tsx | 5 +----
 .../ui/components/UserProfile/EnterpriseAccountsSection.tsx  | 1 -
 .../clerk-js/src/ui/components/UserProfile/PhoneSection.tsx  | 5 +----
 .../clerk-js/src/ui/components/UserProfile/Web3Section.tsx   | 1 -
 7 files changed, 9 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/two-bugs-relate.md

diff --git a/.changeset/two-bugs-relate.md b/.changeset/two-bugs-relate.md
new file mode 100644
index 00000000000..44a2f696dc5
--- /dev/null
+++ b/.changeset/two-bugs-relate.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Removing hoverable state from no-interactive sections in `<UserProfile/>`
diff --git a/packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx
index 33874183ab9..3b2e7427dad 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx
@@ -28,7 +28,7 @@ export const ActiveDevicesSection = () => {
         {isLoading ? (
           <FullHeightLoader />
         ) : (
-          sessions?.sort(currentSessionFirst(session!.id)).map(sa => (
+          sessions?.sort(currentSessionFirst(session.id)).map(sa => (
             <DeviceItem
               key={sa.id}
               session={sa}
@@ -56,7 +56,6 @@ const DeviceItem = ({ session }: { session: SessionWithActivitiesResource }) =>
       id='activeDevices'
       elementDescriptor={descriptors.activeDeviceListItem}
       elementId={isCurrent ? descriptors.activeDeviceListItem.setId('current') : undefined}
-      hoverable
       sx={{
         alignItems: 'flex-start',
       }}
diff --git a/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx
index 9a3a755ac29..d29508e7235 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx
@@ -61,10 +61,7 @@ export const ConnectedAccountsSection = withCardStateProvider(() => {
 
             return (
               <Action.Root key={account.id}>
-                <ProfileSection.Item
-                  id='connectedAccounts'
-                  hoverable
-                >
+                <ProfileSection.Item id='connectedAccounts'>
                   <Flex sx={t => ({ overflow: 'hidden', gap: t.space.$2 })}>
                     <Image
                       elementDescriptor={[descriptors.providerIcon]}
diff --git a/packages/clerk-js/src/ui/components/UserProfile/EmailsSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/EmailsSection.tsx
index f061a467c90..37cafecaf5e 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/EmailsSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/EmailsSection.tsx
@@ -48,10 +48,7 @@ export const EmailsSection = () => {
         <ProfileSection.ItemList id='emailAddresses'>
           {sortIdentificationBasedOnVerification(user?.emailAddresses, user?.primaryEmailAddressId).map(email => (
             <Action.Root key={email.emailAddress}>
-              <ProfileSection.Item
-                id='emailAddresses'
-                hoverable
-              >
+              <ProfileSection.Item id='emailAddresses'>
                 <Flex sx={t => ({ overflow: 'hidden', gap: t.space.$1 })}>
                   <Text
                     sx={t => ({ color: t.colors.$colorText })}
diff --git a/packages/clerk-js/src/ui/components/UserProfile/EnterpriseAccountsSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/EnterpriseAccountsSection.tsx
index 43bfdeb46c5..6c49a841adf 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/EnterpriseAccountsSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/EnterpriseAccountsSection.tsx
@@ -28,7 +28,6 @@ export const EnterpriseAccountsSection = () => {
                 gap: t.space.$2,
                 justifyContent: 'start',
               })}
-              hoverable
               key={account.id}
             >
               <Image
diff --git a/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx
index 661d6147d9a..2308d68e437 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx
@@ -49,10 +49,7 @@ export const PhoneSection = () => {
           {sortIdentificationBasedOnVerification(user?.phoneNumbers, user?.primaryPhoneNumberId).map(phone => (
             <Action.Root key={phone.id}>
               <Action.Closed value=''>
-                <ProfileSection.Item
-                  id='phoneNumbers'
-                  hoverable
-                >
+                <ProfileSection.Item id='phoneNumbers'>
                   <Box sx={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
                     <Flex
                       gap={2}
diff --git a/packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx b/packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx
index e013a0031ca..edca7609799 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx
@@ -45,7 +45,6 @@ export const Web3Section = withCardStateProvider(() => {
                       key={wallet.id}
                       id='web3Wallets'
                       align='start'
-                      hoverable
                     >
                       <Flex sx={t => ({ alignItems: 'center', gap: t.space.$2, width: '100%' })}>
                         {strategyToDisplayData[strategy].iconUrl && (

From c0bed069a843056302d97ea319a28683351997d7 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Tue, 16 Apr 2024 17:32:05 +0300
Subject: [PATCH 2/3] chore(repo): Update Changeset

---
 .changeset/two-bugs-relate.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/two-bugs-relate.md b/.changeset/two-bugs-relate.md
index 44a2f696dc5..f068cfdfe6d 100644
--- a/.changeset/two-bugs-relate.md
+++ b/.changeset/two-bugs-relate.md
@@ -2,4 +2,4 @@
 '@clerk/clerk-js': patch
 ---
 
-Removing hoverable state from no-interactive sections in `<UserProfile/>`
+Removed hoverable state from no-interactive sections in `<UserProfile/>`

From 20978646c5a5e2db51b2132e3b7d387e4393bc95 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Tue, 16 Apr 2024 18:06:20 +0300
Subject: [PATCH 3/3] chore(clerk-js): Revert accidental change from eslint

---
 .../src/ui/components/UserProfile/ActiveDevicesSection.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx
index 3b2e7427dad..c17b230dc2e 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx
@@ -28,7 +28,7 @@ export const ActiveDevicesSection = () => {
         {isLoading ? (
           <FullHeightLoader />
         ) : (
-          sessions?.sort(currentSessionFirst(session.id)).map(sa => (
+          sessions?.sort(currentSessionFirst(session!.id)).map(sa => (
             <DeviceItem
               key={sa.id}
               session={sa}