From 582cc914bdec2116ab719ba3f43b0d291191b62a Mon Sep 17 00:00:00 2001
From: Tom Milewski <me@tm.codes>
Date: Tue, 31 Oct 2023 17:10:11 -0700
Subject: [PATCH] feat(clerk-js): Enable element descriptors & ids for active
 devices [SDK-859]

---
 .changeset/mean-houses-juggle.md              | 11 ++++++++
 .../UserProfile/ActiveDevicesSection.tsx      | 14 ++++++++---
 .../ui/customizables/elementDescriptors.ts    |  2 ++
 .../clerk-js/src/ui/elements/Accordion.tsx    | 25 +++++++++++--------
 packages/types/src/appearance.ts              |  2 ++
 5 files changed, 39 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/mean-houses-juggle.md

diff --git a/.changeset/mean-houses-juggle.md b/.changeset/mean-houses-juggle.md
new file mode 100644
index 00000000000..add15725882
--- /dev/null
+++ b/.changeset/mean-houses-juggle.md
@@ -0,0 +1,11 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Introduces new element appearance descriptors:
+
+- `activeDeviceListItem` allows you to customize the appearance of the active device list (accordion) item
+  - `activeDeviceListItem__current` allows you to customize the appearance of the _current_ active device list (accordion) item
+- `activeDevice` allows you to customize the appearance of the active device item
+  - `activeDevice__current` allows you to customize the appearance of the _current_ active device item
diff --git a/packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx
index dbc417bc716..10fd409133a 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx
@@ -47,21 +47,25 @@ const DeviceAccordion = (props: { session: SessionWithActivitiesResource }) => {
   };
 
   return (
-    <UserProfileAccordion title={<DeviceInfo session={props.session} />}>
+    <UserProfileAccordion
+      elementDescriptor={descriptors.activeDeviceListItem}
+      elementId={isCurrent ? descriptors.activeDeviceListItem.setId('current') : undefined}
+      title={<DeviceInfo session={props.session} />}
+    >
       <Col gap={4}>
         {isCurrent && (
           <LinkButtonWithDescription
-            title={localizationKeys('userProfile.start.activeDevicesSection.detailsTitle')}
             subtitle={localizationKeys('userProfile.start.activeDevicesSection.detailsSubtitle')}
+            title={localizationKeys('userProfile.start.activeDevicesSection.detailsTitle')}
           />
         )}
         {!isCurrent && (
           <LinkButtonWithDescription
-            title={localizationKeys('userProfile.start.activeDevicesSection.destructiveActionTitle')}
-            subtitle={localizationKeys('userProfile.start.activeDevicesSection.destructiveActionSubtitle')}
             actionLabel={localizationKeys('userProfile.start.activeDevicesSection.destructiveAction')}
             colorScheme='danger'
             onClick={revoke}
+            subtitle={localizationKeys('userProfile.start.activeDevicesSection.destructiveActionSubtitle')}
+            title={localizationKeys('userProfile.start.activeDevicesSection.destructiveActionTitle')}
           />
         )}
       </Col>
@@ -82,6 +86,8 @@ const DeviceInfo = (props: { session: SessionWithActivitiesResource }) => {
 
   return (
     <Flex
+      elementDescriptor={descriptors.activeDevice}
+      elementId={isCurrent ? descriptors.activeDevice.setId('current') : undefined}
       align='center'
       sx={t => ({
         gap: t.space.$8,
diff --git a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
index 2a98c8463e5..d676a2256aa 100644
--- a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
+++ b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
@@ -246,6 +246,8 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'page',
   'pageHeader',
 
+  'activeDevice',
+  'activeDeviceListItem',
   'activeDeviceIcon',
 
   'impersonationFab',
diff --git a/packages/clerk-js/src/ui/elements/Accordion.tsx b/packages/clerk-js/src/ui/elements/Accordion.tsx
index 70ca445eae7..863b4e3be1c 100644
--- a/packages/clerk-js/src/ui/elements/Accordion.tsx
+++ b/packages/clerk-js/src/ui/elements/Accordion.tsx
@@ -2,18 +2,20 @@ import React from 'react';
 
 import { Col, descriptors } from '../customizables';
 import { Caret } from '../icons';
+import type { PropsOfComponent } from '../styledSystem';
 import { animations } from '../styledSystem';
 import { ArrowBlockButton } from './ArrowBlockButton';
 
-type AccordionItemProps = React.PropsWithChildren<{
-  title: React.ReactElement | string;
-  icon?: React.ReactElement;
-  badge?: React.ReactElement;
-  defaultOpen?: boolean;
-  toggleable?: boolean;
-  scrollOnOpen?: boolean;
-  onCloseCallback?: () => void;
-}>;
+type AccordionItemProps = Omit<PropsOfComponent<typeof Col>, 'title'> &
+  React.PropsWithChildren<{
+    title: React.ReactElement | string;
+    icon?: React.ReactElement;
+    badge?: React.ReactElement;
+    defaultOpen?: boolean;
+    toggleable?: boolean;
+    scrollOnOpen?: boolean;
+    onCloseCallback?: () => void;
+  }>;
 
 export const AccordionItem = (props: AccordionItemProps) => {
   const {
@@ -25,6 +27,7 @@ export const AccordionItem = (props: AccordionItemProps) => {
     scrollOnOpen = false,
     badge,
     onCloseCallback = null,
+    ...rest
   } = props;
   const [isOpen, setIsOpen] = React.useState(defaultOpen);
   const contentRef = React.useRef<HTMLDivElement>(null);
@@ -52,10 +55,10 @@ export const AccordionItem = (props: AccordionItemProps) => {
     }
 
     return () => cancelAnimationFrame(requestRef);
-  }, [isOpen]);
+  }, [isOpen, scrollOnOpen]);
 
   return (
-    <Col>
+    <Col {...rest}>
       <ArrowBlockButton
         elementDescriptor={descriptors.accordionTriggerButton}
         variant='ghost'
diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts
index 63c9a79ff87..9f2846b6c52 100644
--- a/packages/types/src/appearance.ts
+++ b/packages/types/src/appearance.ts
@@ -399,6 +399,8 @@ export type ElementsConfig = {
   page: WithOptions;
   pageHeader: WithOptions;
 
+  activeDevice: WithOptions<'current'>;
+  activeDeviceListItem: WithOptions<'current'>;
   activeDeviceIcon: WithOptions<'mobile' | 'desktop'>;
 
   impersonationFab: WithOptions;