From 9ca6419f6f3c6a83abcf54384425e0bf4d2cecd6 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Thu, 15 Aug 2024 12:57:22 -0700
Subject: [PATCH 01/22] feat(astro): Add custom menu items

---
 packages/astro/src/astro-components/index.ts  |  3 +-
 .../UserButton/MenuItemRenderer.astro         | 51 +++++++++++++++++++
 .../interactive/UserButton/UserButton.astro   | 10 ++++
 .../UserButton/UserButtonAction.astro         | 14 +++++
 .../UserButton/UserButtonLink.astro           | 14 +++++
 .../UserButton/UserButtonMenuItems.astro      |  1 +
 .../interactive/UserButton/index.ts           | 10 ++++
 7 files changed, 102 insertions(+), 1 deletion(-)
 create mode 100644 packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
 create mode 100644 packages/astro/src/astro-components/interactive/UserButton/UserButton.astro
 create mode 100644 packages/astro/src/astro-components/interactive/UserButton/UserButtonAction.astro
 create mode 100644 packages/astro/src/astro-components/interactive/UserButton/UserButtonLink.astro
 create mode 100644 packages/astro/src/astro-components/interactive/UserButton/UserButtonMenuItems.astro
 create mode 100644 packages/astro/src/astro-components/interactive/UserButton/index.ts

diff --git a/packages/astro/src/astro-components/index.ts b/packages/astro/src/astro-components/index.ts
index f9714851fbd..dbcead6bcf0 100644
--- a/packages/astro/src/astro-components/index.ts
+++ b/packages/astro/src/astro-components/index.ts
@@ -18,7 +18,8 @@ export { default as SignOutButton } from './unstyled/SignOutButton.astro';
  */
 export { default as SignIn } from './interactive/SignIn.astro';
 export { default as SignUp } from './interactive/SignUp.astro';
-export { default as UserButton } from './interactive/UserButton.astro';
+// export { default as UserButton } from './interactive/UserButton.astro';
+export { UserButton } from './interactive/UserButton';
 export { default as UserProfile } from './interactive/UserProfile.astro';
 export { default as OrganizationProfile } from './interactive/OrganizationProfile.astro';
 export { default as OrganizationSwitcher } from './interactive/OrganizationSwitcher.astro';
diff --git a/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro b/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
new file mode 100644
index 00000000000..41720b81540
--- /dev/null
+++ b/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
@@ -0,0 +1,51 @@
+---
+interface Props {
+  label: string
+  href?: string
+  action?: string
+}
+
+const { label, href, action } = Astro.props
+
+let labelIcon = '';
+
+if (Astro.slots.has('label-icon')) {
+  labelIcon = await Astro.slots.render('label-icon');
+}
+---
+
+<script is:inline define:vars={{ label, href, action, labelIcon }}>
+// Get the user button map from window that we set in the `<InternalUIComponentRenderer />`.
+const userButtonComponentMap = window.__astro_clerk_component_props.get('user-button');
+// Get all available user buttons in current page.
+const userButtonElements = document.querySelectorAll('[data-clerk-id^="clerk-user-button"]');
+// It doesn't make sense to have multiple user buttons in page, so first one should be safe.
+const userButton = userButtonElements[0];
+
+const safeId = userButton.getAttribute('data-clerk-id');
+const currentOptions = userButtonComponentMap.get(safeId);
+
+const newMenuItem = {
+  label,
+  mountIcon: (el) => {
+    el.innerHTML = labelIcon
+  },
+  unmountIcon: () => { /* What to clean up? */}
+}
+
+if (href) {
+  newMenuItem.href = href;
+}
+
+if (action) {
+  newMenuItem.action = action;
+}
+
+userButtonComponentMap.set(safeId, {
+  ...currentOptions,
+  customMenuItems: [
+    ...(currentOptions?.customMenuItems ?? []),
+    newMenuItem,
+  ]
+})
+</script>
diff --git a/packages/astro/src/astro-components/interactive/UserButton/UserButton.astro b/packages/astro/src/astro-components/interactive/UserButton/UserButton.astro
new file mode 100644
index 00000000000..4ad95743a38
--- /dev/null
+++ b/packages/astro/src/astro-components/interactive/UserButton/UserButton.astro
@@ -0,0 +1,10 @@
+---
+import type { UserButtonProps } from "@clerk/types";
+type Props = UserButtonProps
+
+import InternalUIComponentRenderer from '../InternalUIComponentRenderer.astro'
+---
+
+<InternalUIComponentRenderer {...Astro.props} component="user-button" />
+
+<slot />
diff --git a/packages/astro/src/astro-components/interactive/UserButton/UserButtonAction.astro b/packages/astro/src/astro-components/interactive/UserButton/UserButtonAction.astro
new file mode 100644
index 00000000000..e6c3f9d292a
--- /dev/null
+++ b/packages/astro/src/astro-components/interactive/UserButton/UserButtonAction.astro
@@ -0,0 +1,14 @@
+---
+import MenuItemRenderer from './MenuItemRenderer.astro';
+
+interface Props {
+  label: string
+  action: string
+}
+
+const { label, action } = Astro.props
+---
+
+<MenuItemRenderer label={label} action={action}>
+  <slot name="label-icon" slot="label-icon" />
+</MenuItemRenderer>
diff --git a/packages/astro/src/astro-components/interactive/UserButton/UserButtonLink.astro b/packages/astro/src/astro-components/interactive/UserButton/UserButtonLink.astro
new file mode 100644
index 00000000000..2b113d7e78c
--- /dev/null
+++ b/packages/astro/src/astro-components/interactive/UserButton/UserButtonLink.astro
@@ -0,0 +1,14 @@
+---
+import MenuItemRenderer from './MenuItemRenderer.astro';
+
+interface Props {
+  label: string
+  href: string
+}
+
+const { label, href } = Astro.props
+---
+
+<MenuItemRenderer label={label} href={href}>
+    <slot name="label-icon" slot="label-icon" />
+</MenuItemRenderer>
diff --git a/packages/astro/src/astro-components/interactive/UserButton/UserButtonMenuItems.astro b/packages/astro/src/astro-components/interactive/UserButton/UserButtonMenuItems.astro
new file mode 100644
index 00000000000..4fa864ce7aa
--- /dev/null
+++ b/packages/astro/src/astro-components/interactive/UserButton/UserButtonMenuItems.astro
@@ -0,0 +1 @@
+<slot />
diff --git a/packages/astro/src/astro-components/interactive/UserButton/index.ts b/packages/astro/src/astro-components/interactive/UserButton/index.ts
new file mode 100644
index 00000000000..bf217872259
--- /dev/null
+++ b/packages/astro/src/astro-components/interactive/UserButton/index.ts
@@ -0,0 +1,10 @@
+import UserButtonMain from './UserButton.astro'
+import UserButtonLink from './UserButtonLink.astro'
+import UserButtonAction from './UserButtonAction.astro'
+import UserButtonMenuItems from './UserButtonMenuItems.astro'
+
+export const UserButton = Object.assign(UserButtonMain, {
+  MenuItems: UserButtonMenuItems,
+  Link: UserButtonLink,
+  Action: UserButtonAction,
+})

From 5b0ec29ff9cffc6a88291ff515e2efcbf0654405 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Thu, 15 Aug 2024 13:29:31 -0700
Subject: [PATCH 02/22] chore(astro): Add custom user profile page

---
 .../UserButtonUserProfilePage.astro           | 54 +++++++++++++++++++
 .../interactive/UserButton/index.ts           |  2 +
 2 files changed, 56 insertions(+)
 create mode 100644 packages/astro/src/astro-components/interactive/UserButton/UserButtonUserProfilePage.astro

diff --git a/packages/astro/src/astro-components/interactive/UserButton/UserButtonUserProfilePage.astro b/packages/astro/src/astro-components/interactive/UserButton/UserButtonUserProfilePage.astro
new file mode 100644
index 00000000000..eb512192d0e
--- /dev/null
+++ b/packages/astro/src/astro-components/interactive/UserButton/UserButtonUserProfilePage.astro
@@ -0,0 +1,54 @@
+---
+interface Props {
+  url: string
+  label: string
+}
+
+const { url, label } = Astro.props
+
+let labelIcon = '';
+let content = ''
+
+if (Astro.slots.has('label-icon')) {
+  labelIcon = await Astro.slots.render('label-icon');
+}
+
+if (Astro.slots.has('default')) {
+  content = await Astro.slots.render('default');
+}
+---
+
+<script is:inline define:vars={{ url, label, content, labelIcon }}>
+// Get the user button map from window that we set in the `<InternalUIComponentRenderer />`.
+const userButtonComponentMap = window.__astro_clerk_component_props.get('user-button');
+// Get all available user buttons in current page.
+const userButtonElements = document.querySelectorAll('[data-clerk-id^="clerk-user-button"]');
+// It doesn't make sense to have multiple user buttons in page, so first one should be safe.
+const userButton = userButtonElements[0];
+
+const safeId = userButton.getAttribute('data-clerk-id');
+const currentOptions = userButtonComponentMap.get(safeId);
+
+const newCustomPage = {
+  label,
+  url,
+  mountIcon: (el) => {
+    el.innerHTML = labelIcon
+  },
+  unmountIcon: () => { /* What to clean up? */},
+  mount: (el) => {
+    el.innerHTML = content
+  },
+  unmount: () => { /* What to clean up? */},
+}
+
+userButtonComponentMap.set(safeId, {
+  ...currentOptions,
+  userProfileProps: {
+    customPages: [
+      ...(currentOptions?.userProfileProps?.customPages ?? []),
+      newCustomPage,
+    ]
+  }
+})
+</script>
diff --git a/packages/astro/src/astro-components/interactive/UserButton/index.ts b/packages/astro/src/astro-components/interactive/UserButton/index.ts
index bf217872259..21623e922b5 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/index.ts
+++ b/packages/astro/src/astro-components/interactive/UserButton/index.ts
@@ -2,9 +2,11 @@ import UserButtonMain from './UserButton.astro'
 import UserButtonLink from './UserButtonLink.astro'
 import UserButtonAction from './UserButtonAction.astro'
 import UserButtonMenuItems from './UserButtonMenuItems.astro'
+import UserButtonUserProfilePage from './UserButtonUserProfilePage.astro'
 
 export const UserButton = Object.assign(UserButtonMain, {
   MenuItems: UserButtonMenuItems,
   Link: UserButtonLink,
   Action: UserButtonAction,
+  UserProfilePage: UserButtonUserProfilePage,
 })

From c184539f36e4bb227a4be36b8535c31f776e0d16 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Thu, 15 Aug 2024 15:05:13 -0700
Subject: [PATCH 03/22] chore(astro): Replace action prop with open

---
 .../UserButton/MenuItemRenderer.astro            | 16 +++++++---------
 .../UserButton/UserButtonAction.astro            |  6 +++---
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro b/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
index 41720b81540..46a7f048b87 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
+++ b/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
@@ -1,11 +1,9 @@
 ---
-interface Props {
-  label: string
-  href?: string
-  action?: string
-}
+import type { CustomMenuItem } from '@clerk/types'
+
+type Props = Pick<CustomMenuItem, 'label' | 'href' | 'open'>
 
-const { label, href, action } = Astro.props
+const { label, href, open } = Astro.props
 
 let labelIcon = '';
 
@@ -14,7 +12,7 @@ if (Astro.slots.has('label-icon')) {
 }
 ---
 
-<script is:inline define:vars={{ label, href, action, labelIcon }}>
+<script is:inline define:vars={{ label, href, open, labelIcon }}>
 // Get the user button map from window that we set in the `<InternalUIComponentRenderer />`.
 const userButtonComponentMap = window.__astro_clerk_component_props.get('user-button');
 // Get all available user buttons in current page.
@@ -37,8 +35,8 @@ if (href) {
   newMenuItem.href = href;
 }
 
-if (action) {
-  newMenuItem.action = action;
+if (open) {
+  newMenuItem.open = open.startsWith('/') ? open : `/${open}`;
 }
 
 userButtonComponentMap.set(safeId, {
diff --git a/packages/astro/src/astro-components/interactive/UserButton/UserButtonAction.astro b/packages/astro/src/astro-components/interactive/UserButton/UserButtonAction.astro
index e6c3f9d292a..cfd0ebafd20 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/UserButtonAction.astro
+++ b/packages/astro/src/astro-components/interactive/UserButton/UserButtonAction.astro
@@ -3,12 +3,12 @@ import MenuItemRenderer from './MenuItemRenderer.astro';
 
 interface Props {
   label: string
-  action: string
+  open?: string
 }
 
-const { label, action } = Astro.props
+const { label, open } = Astro.props
 ---
 
-<MenuItemRenderer label={label} action={action}>
+<MenuItemRenderer label={label} open={open}>
   <slot name="label-icon" slot="label-icon" />
 </MenuItemRenderer>

From 909127e2ed5ba58f24865ad5eee48bd265213473 Mon Sep 17 00:00:00 2001
From: Robert Soriano <sorianorobertc@gmail.com>
Date: Thu, 15 Aug 2024 15:11:28 -0700
Subject: [PATCH 04/22] chore(astro): Add changeset

---
 .changeset/eighty-timers-march.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/eighty-timers-march.md

diff --git a/.changeset/eighty-timers-march.md b/.changeset/eighty-timers-march.md
new file mode 100644
index 00000000000..9026af06355
--- /dev/null
+++ b/.changeset/eighty-timers-march.md
@@ -0,0 +1,5 @@
+---
+"@clerk/astro": patch
+---
+
+Add custom menu items to `<UserButton />` Astro component.

From b0727a838569c1a7eb22bb1af12e1542ca3a0b30 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Thu, 15 Aug 2024 15:12:37 -0700
Subject: [PATCH 05/22] chore(astro): Remove old component export

---
 packages/astro/src/astro-components/index.ts              | 1 -
 .../src/astro-components/interactive/UserButton.astro     | 8 --------
 2 files changed, 9 deletions(-)
 delete mode 100644 packages/astro/src/astro-components/interactive/UserButton.astro

diff --git a/packages/astro/src/astro-components/index.ts b/packages/astro/src/astro-components/index.ts
index dbcead6bcf0..e78da856ec3 100644
--- a/packages/astro/src/astro-components/index.ts
+++ b/packages/astro/src/astro-components/index.ts
@@ -18,7 +18,6 @@ export { default as SignOutButton } from './unstyled/SignOutButton.astro';
  */
 export { default as SignIn } from './interactive/SignIn.astro';
 export { default as SignUp } from './interactive/SignUp.astro';
-// export { default as UserButton } from './interactive/UserButton.astro';
 export { UserButton } from './interactive/UserButton';
 export { default as UserProfile } from './interactive/UserProfile.astro';
 export { default as OrganizationProfile } from './interactive/OrganizationProfile.astro';
diff --git a/packages/astro/src/astro-components/interactive/UserButton.astro b/packages/astro/src/astro-components/interactive/UserButton.astro
deleted file mode 100644
index acda2cd9258..00000000000
--- a/packages/astro/src/astro-components/interactive/UserButton.astro
+++ /dev/null
@@ -1,8 +0,0 @@
----
-import type { UserButtonProps } from "@clerk/types";
-type Props = UserButtonProps
-
-import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
----
-
-<InternalUIComponentRenderer {...Astro.props} component="user-button" />

From 4127d117bfb17634f3f0f9eaa4fb1ece2ad86c0e Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Thu, 15 Aug 2024 15:18:56 -0700
Subject: [PATCH 06/22] chore(astro): Select single element for user button

---
 .../interactive/UserButton/MenuItemRenderer.astro             | 4 +---
 .../interactive/UserButton/UserButtonUserProfilePage.astro    | 4 +---
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro b/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
index 46a7f048b87..46001bda585 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
+++ b/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
@@ -15,10 +15,8 @@ if (Astro.slots.has('label-icon')) {
 <script is:inline define:vars={{ label, href, open, labelIcon }}>
 // Get the user button map from window that we set in the `<InternalUIComponentRenderer />`.
 const userButtonComponentMap = window.__astro_clerk_component_props.get('user-button');
-// Get all available user buttons in current page.
-const userButtonElements = document.querySelectorAll('[data-clerk-id^="clerk-user-button"]');
 // It doesn't make sense to have multiple user buttons in page, so first one should be safe.
-const userButton = userButtonElements[0];
+const userButton = document.querySelector('[data-clerk-id^="clerk-user-button"]');
 
 const safeId = userButton.getAttribute('data-clerk-id');
 const currentOptions = userButtonComponentMap.get(safeId);
diff --git a/packages/astro/src/astro-components/interactive/UserButton/UserButtonUserProfilePage.astro b/packages/astro/src/astro-components/interactive/UserButton/UserButtonUserProfilePage.astro
index eb512192d0e..462fe80a3d2 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/UserButtonUserProfilePage.astro
+++ b/packages/astro/src/astro-components/interactive/UserButton/UserButtonUserProfilePage.astro
@@ -21,10 +21,8 @@ if (Astro.slots.has('default')) {
 <script is:inline define:vars={{ url, label, content, labelIcon }}>
 // Get the user button map from window that we set in the `<InternalUIComponentRenderer />`.
 const userButtonComponentMap = window.__astro_clerk_component_props.get('user-button');
-// Get all available user buttons in current page.
-const userButtonElements = document.querySelectorAll('[data-clerk-id^="clerk-user-button"]');
 // It doesn't make sense to have multiple user buttons in page, so first one should be safe.
-const userButton = userButtonElements[0];
+const userButton = document.querySelector('[data-clerk-id^="clerk-user-button"]');
 
 const safeId = userButton.getAttribute('data-clerk-id');
 const currentOptions = userButtonComponentMap.get(safeId);

From 74d14625a74616a78c3b7ba87af3925190d7c0c5 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Thu, 15 Aug 2024 19:55:36 -0700
Subject: [PATCH 07/22] test(astro): Add custom menu item action test

---
 .../src/components/CustomUserButton.astro     | 21 ++++++++++++++++++
 .../astro-node/src/layouts/Layout.astro       |  5 +++--
 integration/tests/astro/components.test.ts    | 22 +++++++++++++++++++
 3 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 integration/templates/astro-node/src/components/CustomUserButton.astro

diff --git a/integration/templates/astro-node/src/components/CustomUserButton.astro b/integration/templates/astro-node/src/components/CustomUserButton.astro
new file mode 100644
index 00000000000..18316644592
--- /dev/null
+++ b/integration/templates/astro-node/src/components/CustomUserButton.astro
@@ -0,0 +1,21 @@
+---
+import { UserButton } from '@clerk/astro/components';
+---
+
+<UserButton afterSignOutUrl="/">
+    <UserButton.MenuItems>
+        <UserButton.Link label="Custom link" href="/custom-link">
+            <div slot="label-icon">Icon</div>
+        </UserButton.Link>
+        <UserButton.Action label="Custom action" open="terms">
+            <div slot="label-icon">Icon</div>
+        </UserButton.Action>
+    </UserButton.MenuItems>
+    <UserButton.UserProfilePage label="Terms" url="terms">
+        <div slot="label-icon">Icon</div>
+        <div>
+            <h1>Custom Terms Page</h1>
+            <p>This is the custom terms page</p>
+        </div>
+    </UserButton.UserProfilePage>
+</UserButton>
diff --git a/integration/templates/astro-node/src/layouts/Layout.astro b/integration/templates/astro-node/src/layouts/Layout.astro
index f7c71edd9b5..8abf4093714 100644
--- a/integration/templates/astro-node/src/layouts/Layout.astro
+++ b/integration/templates/astro-node/src/layouts/Layout.astro
@@ -5,8 +5,9 @@ interface Props {
 
 const { title } = Astro.props;
 
-import { SignedIn, SignedOut, UserButton } from "@clerk/astro/components";
+import { SignedIn, SignedOut } from "@clerk/astro/components";
 import { LanguagePicker } from "../components/LanguagePicker";
+import CustomUserButton from "../components/CustomUserButton.astro";
 ---
 
 <!doctype html>
@@ -64,7 +65,7 @@ import { LanguagePicker } from "../components/LanguagePicker";
             <LanguagePicker client:idle />
 
             <SignedIn>
-              <UserButton afterSignOutUrl="/" />
+              <CustomUserButton />
             </SignedIn>
 
             <SignedOut>
diff --git a/integration/tests/astro/components.test.ts b/integration/tests/astro/components.test.ts
index 02b816d117d..5465bd115ce 100644
--- a/integration/tests/astro/components.test.ts
+++ b/integration/tests/astro/components.test.ts
@@ -77,6 +77,28 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
     await expect(u.page.getByText(/profile details/i)).toBeVisible();
   });
 
+  test('user button with custom menu items', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+    await u.page.goToRelative('/sign-in');
+    await u.po.signIn.waitForMounted();
+    await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
+    await u.page.waitForAppUrl('/');
+    await u.po.expect.toBeSignedIn();
+
+    await u.po.userButton.waitForMounted();
+    await u.po.userButton.toggleTrigger();
+    await u.po.userButton.waitForPopover();
+
+    await u.po.userButton.toHaveVisibleMenuItems([/Custom link/i, /Custom action$/i]);
+
+    // TODO: Test custom link and check if it navigates to the href provided
+
+    await u.page.getByRole('menuitem', { name: /Custom action/i }).click();
+    await u.po.userProfile.waitForUserProfileModal();
+
+    await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
+  });
+
   test('render user profile with streamed data', async ({ page, context }) => {
     const u = createTestUtils({ app, page, context });
     await u.page.goToRelative('/sign-in');

From 73cc657fd191903939e23cc31917517b5f7b71ac Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Thu, 15 Aug 2024 19:56:46 -0700
Subject: [PATCH 08/22] chore(astro): Update changeset

---
 .changeset/eighty-timers-march.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/eighty-timers-march.md b/.changeset/eighty-timers-march.md
index 9026af06355..6ff4b6f60d2 100644
--- a/.changeset/eighty-timers-march.md
+++ b/.changeset/eighty-timers-march.md
@@ -2,4 +2,4 @@
 "@clerk/astro": patch
 ---
 
-Add custom menu items to `<UserButton />` Astro component.
+Add support for custom menu items in the `<UserButton />` Astro component.

From 49b84888ba4d23a0edb311dd74b2fc5a46b877b3 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Thu, 15 Aug 2024 20:06:10 -0700
Subject: [PATCH 09/22] test(astro): Add custom menu item link test

---
 .../src/components/CustomUserButton.astro          |  2 +-
 integration/tests/astro/components.test.ts         | 14 +++++++++++---
 .../interactive/UserButton/index.ts                | 12 ++++++------
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/integration/templates/astro-node/src/components/CustomUserButton.astro b/integration/templates/astro-node/src/components/CustomUserButton.astro
index 18316644592..4ef0bcb9ca0 100644
--- a/integration/templates/astro-node/src/components/CustomUserButton.astro
+++ b/integration/templates/astro-node/src/components/CustomUserButton.astro
@@ -4,7 +4,7 @@ import { UserButton } from '@clerk/astro/components';
 
 <UserButton afterSignOutUrl="/">
     <UserButton.MenuItems>
-        <UserButton.Link label="Custom link" href="/custom-link">
+        <UserButton.Link label="Custom link" href="/user">
             <div slot="label-icon">Icon</div>
         </UserButton.Link>
         <UserButton.Action label="Custom action" open="terms">
diff --git a/integration/tests/astro/components.test.ts b/integration/tests/astro/components.test.ts
index 5465bd115ce..8fa78ea2451 100644
--- a/integration/tests/astro/components.test.ts
+++ b/integration/tests/astro/components.test.ts
@@ -89,14 +89,22 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
     await u.po.userButton.toggleTrigger();
     await u.po.userButton.waitForPopover();
 
+    // Check if custom menu items are visible
     await u.po.userButton.toHaveVisibleMenuItems([/Custom link/i, /Custom action$/i]);
 
-    // TODO: Test custom link and check if it navigates to the href provided
-
+    // Click custom action and check for custom page availbility
     await u.page.getByRole('menuitem', { name: /Custom action/i }).click();
     await u.po.userProfile.waitForUserProfileModal();
-
     await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
+
+    // Close the modal and trigger the popover again
+    await u.page.locator('.cl-modalCloseButton').click();
+    await u.po.userButton.toggleTrigger();
+    await u.po.userButton.waitForPopover();
+
+    // Click custom link and check navigation
+    await u.page.getByRole('menuitem', { name: /Custom link/i }).click();
+    await u.page.waitForAppUrl('/user');
   });
 
   test('render user profile with streamed data', async ({ page, context }) => {
diff --git a/packages/astro/src/astro-components/interactive/UserButton/index.ts b/packages/astro/src/astro-components/interactive/UserButton/index.ts
index 21623e922b5..7821ecbedab 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/index.ts
+++ b/packages/astro/src/astro-components/interactive/UserButton/index.ts
@@ -1,12 +1,12 @@
-import UserButtonMain from './UserButton.astro'
-import UserButtonLink from './UserButtonLink.astro'
-import UserButtonAction from './UserButtonAction.astro'
-import UserButtonMenuItems from './UserButtonMenuItems.astro'
-import UserButtonUserProfilePage from './UserButtonUserProfilePage.astro'
+import UserButtonMain from './UserButton.astro';
+import UserButtonLink from './UserButtonLink.astro';
+import UserButtonAction from './UserButtonAction.astro';
+import UserButtonMenuItems from './UserButtonMenuItems.astro';
+import UserButtonUserProfilePage from './UserButtonUserProfilePage.astro';
 
 export const UserButton = Object.assign(UserButtonMain, {
   MenuItems: UserButtonMenuItems,
   Link: UserButtonLink,
   Action: UserButtonAction,
   UserProfilePage: UserButtonUserProfilePage,
-})
+});

From 147cda4c98118ab21d24f9433964fd91f184ce1b Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Thu, 15 Aug 2024 20:34:04 -0700
Subject: [PATCH 10/22] chore(astro): Add custom menu items reordering

---
 .../UserButton/MenuItemRenderer.astro         | 26 ++++++++++++++-----
 .../interactive/UserButton/UserButton.astro   |  7 +++--
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro b/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
index 46001bda585..466c3a3874b 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
+++ b/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
@@ -6,13 +6,14 @@ type Props = Pick<CustomMenuItem, 'label' | 'href' | 'open'>
 const { label, href, open } = Astro.props
 
 let labelIcon = '';
+const hasLabelIcon = Astro.slots.has('label-icon');
 
-if (Astro.slots.has('label-icon')) {
+if (hasLabelIcon) {
   labelIcon = await Astro.slots.render('label-icon');
 }
 ---
 
-<script is:inline define:vars={{ label, href, open, labelIcon }}>
+<script is:inline define:vars={{ label, href, open, labelIcon, hasLabelIcon }}>
 // Get the user button map from window that we set in the `<InternalUIComponentRenderer />`.
 const userButtonComponentMap = window.__astro_clerk_component_props.get('user-button');
 // It doesn't make sense to have multiple user buttons in page, so first one should be safe.
@@ -21,12 +22,23 @@ const userButton = document.querySelector('[data-clerk-id^="clerk-user-button"]'
 const safeId = userButton.getAttribute('data-clerk-id');
 const currentOptions = userButtonComponentMap.get(safeId);
 
-const newMenuItem = {
+const reorderItemsLabels = ['manageAccount', 'signOut'];
+function isReorderItem() {
+  return !hasLabelIcon && reorderItemsLabels.includes(label);
+}
+
+let newMenuItem = {
   label,
-  mountIcon: (el) => {
-    el.innerHTML = labelIcon
-  },
-  unmountIcon: () => { /* What to clean up? */}
+}
+
+if (!isReorderItem()) {
+  newMenuItem = {
+    ...newMenuItem,
+    mountIcon: (el) => {
+      el.innerHTML = labelIcon
+    },
+    unmountIcon: () => { /* What to clean up? */}
+  }
 }
 
 if (href) {
diff --git a/packages/astro/src/astro-components/interactive/UserButton/UserButton.astro b/packages/astro/src/astro-components/interactive/UserButton/UserButton.astro
index 4ad95743a38..432186ac1c7 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/UserButton.astro
+++ b/packages/astro/src/astro-components/interactive/UserButton/UserButton.astro
@@ -1,6 +1,9 @@
 ---
-import type { UserButtonProps } from "@clerk/types";
-type Props = UserButtonProps
+import type { UserButtonProps, UserProfileProps, Without } from "@clerk/types";
+
+type Props = Without<UserButtonProps, 'userProfileProps'> & {
+  userProfileProps?: Pick<UserProfileProps, 'additionalOAuthScopes' | 'appearance'>;
+}
 
 import InternalUIComponentRenderer from '../InternalUIComponentRenderer.astro'
 ---

From dcd56d4f888801e84c69bce9ee48ca1859b5bad5 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Thu, 15 Aug 2024 21:52:20 -0700
Subject: [PATCH 11/22] chore(astro): Make sure items are wrapped in parent
 menu items component

---
 .../UserButton/MenuItemRenderer.astro         | 23 +++++++++++++++----
 .../UserButton/UserButtonMenuItems.astro      | 16 ++++++++++++-
 .../interactive/UserButton/index.ts           |  4 ++--
 3 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro b/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
index 466c3a3874b..68b927b1ebd 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
+++ b/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
@@ -11,9 +11,24 @@ const hasLabelIcon = Astro.slots.has('label-icon');
 if (hasLabelIcon) {
   labelIcon = await Astro.slots.render('label-icon');
 }
+
+const isDevMode = import.meta.env.DEV;
 ---
 
-<script is:inline define:vars={{ label, href, open, labelIcon, hasLabelIcon }}>
+<script is:inline define:vars={{ label, href, open, labelIcon, hasLabelIcon, isDevMode }}>
+const isParentExists = document.querySelector('[data-clerk-user-button-menu-items]');
+
+// There's no current way to get the parent element of the current component in Astro.
+// We used a web component in the parent with a data attribute that we can query here.
+if (!isParentExists) {
+  if (isDevMode) {
+    throw new Error(
+      `Clerk: <UserButton.MenuItems /> component can only accept <UserButton.Action /> and <UserButton.Link /> as its children. Any other provided component will be ignored.`
+    );
+  }
+  return
+}
+
 // Get the user button map from window that we set in the `<InternalUIComponentRenderer />`.
 const userButtonComponentMap = window.__astro_clerk_component_props.get('user-button');
 // It doesn't make sense to have multiple user buttons in page, so first one should be safe.
@@ -23,15 +38,13 @@ const safeId = userButton.getAttribute('data-clerk-id');
 const currentOptions = userButtonComponentMap.get(safeId);
 
 const reorderItemsLabels = ['manageAccount', 'signOut'];
-function isReorderItem() {
-  return !hasLabelIcon && reorderItemsLabels.includes(label);
-}
+const isReorderItem = !hasLabelIcon && reorderItemsLabels.includes(label);
 
 let newMenuItem = {
   label,
 }
 
-if (!isReorderItem()) {
+if (!isReorderItem) {
   newMenuItem = {
     ...newMenuItem,
     mountIcon: (el) => {
diff --git a/packages/astro/src/astro-components/interactive/UserButton/UserButtonMenuItems.astro b/packages/astro/src/astro-components/interactive/UserButton/UserButtonMenuItems.astro
index 4fa864ce7aa..c8d78d3bc48 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/UserButtonMenuItems.astro
+++ b/packages/astro/src/astro-components/interactive/UserButton/UserButtonMenuItems.astro
@@ -1 +1,15 @@
-<slot />
+<user-button-menu-items data-clerk-user-button-menu-items>
+ <slot />
+</user-button-menu-items>
+
+<script is:inline>
+class UserButtonMenuItems extends HTMLElement {
+  constructor() {
+    super();
+  }
+}
+
+if (!customElements.get('user-button-menu-items')) {
+  customElements.define('user-button-menu-items', UserButtonMenuItems);
+}
+</script>
diff --git a/packages/astro/src/astro-components/interactive/UserButton/index.ts b/packages/astro/src/astro-components/interactive/UserButton/index.ts
index 7821ecbedab..10f83b9f0e9 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/index.ts
+++ b/packages/astro/src/astro-components/interactive/UserButton/index.ts
@@ -1,10 +1,10 @@
-import UserButtonMain from './UserButton.astro';
+import _UserButton from './UserButton.astro';
 import UserButtonLink from './UserButtonLink.astro';
 import UserButtonAction from './UserButtonAction.astro';
 import UserButtonMenuItems from './UserButtonMenuItems.astro';
 import UserButtonUserProfilePage from './UserButtonUserProfilePage.astro';
 
-export const UserButton = Object.assign(UserButtonMain, {
+export const UserButton = Object.assign(_UserButton, {
   MenuItems: UserButtonMenuItems,
   Link: UserButtonLink,
   Action: UserButtonAction,

From cc63e131bf2d07261ff412eef4be73a05044fdb0 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Thu, 15 Aug 2024 22:00:43 -0700
Subject: [PATCH 12/22] chore(astro): Add more description to parent wrappers

---
 packages/astro/.eslintrc.cjs                                 | 2 +-
 .../interactive/UserButton/UserButtonMenuItems.astro         | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/astro/.eslintrc.cjs b/packages/astro/.eslintrc.cjs
index 0dff74e748b..7288f46d3b7 100644
--- a/packages/astro/.eslintrc.cjs
+++ b/packages/astro/.eslintrc.cjs
@@ -4,7 +4,7 @@ module.exports = {
   rules: {
     'import/no-unresolved': ['error', { ignore: ['^#'] }],
   },
-  ignorePatterns: ['src/astro-components/index.ts'],
+  ignorePatterns: ['src/astro-components/index.ts', 'src/astro-components/interactive/UserButton/index.ts'],
   overrides: [
     {
       files: ['./env.d.ts'],
diff --git a/packages/astro/src/astro-components/interactive/UserButton/UserButtonMenuItems.astro b/packages/astro/src/astro-components/interactive/UserButton/UserButtonMenuItems.astro
index c8d78d3bc48..36be430ba09 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/UserButtonMenuItems.astro
+++ b/packages/astro/src/astro-components/interactive/UserButton/UserButtonMenuItems.astro
@@ -3,6 +3,11 @@
 </user-button-menu-items>
 
 <script is:inline>
+/**
+ * In the React version, menu items need to be wrapped in a `<UserButton.MenuItems>` component.
+ * We are trying to replicate that behavior here by adding a wrapper component
+ * and check if it exists inside the menu items components.
+ */
 class UserButtonMenuItems extends HTMLElement {
   constructor() {
     super();

From 3f5ce80d8bdb72d84092f76d280209258031665f Mon Sep 17 00:00:00 2001
From: Robert Soriano <sorianorobertc@gmail.com>
Date: Fri, 16 Aug 2024 07:51:24 -0700
Subject: [PATCH 13/22] chore(astro): Update changeset

Co-authored-by: Lennart <lekoarts@gmail.com>
---
 .changeset/eighty-timers-march.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/eighty-timers-march.md b/.changeset/eighty-timers-march.md
index 6ff4b6f60d2..2920ae1a571 100644
--- a/.changeset/eighty-timers-march.md
+++ b/.changeset/eighty-timers-march.md
@@ -1,5 +1,5 @@
 ---
-"@clerk/astro": patch
+"@clerk/astro": minor
 ---
 
 Add support for custom menu items in the `<UserButton />` Astro component.

From e8842f2769d1e0a98df655d5d3541e4ce4cb7937 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Fri, 16 Aug 2024 10:15:52 -0700
Subject: [PATCH 14/22] chore(astro): Add click handler to menu items

---
 .../UserButton/MenuItemRenderer.astro         | 20 ++++++++++++-----
 .../UserButton/UserButtonAction.astro         | 22 ++++++++++++++-----
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro b/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
index 68b927b1ebd..2e614c006d9 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
+++ b/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
@@ -1,9 +1,12 @@
 ---
-import type { CustomMenuItem } from '@clerk/types'
-
-type Props = Pick<CustomMenuItem, 'label' | 'href' | 'open'>
+type Props = {
+  label: string
+  href?: string
+  open?: string
+  selector?: string
+}
 
-const { label, href, open } = Astro.props
+const { label, href, open, selector } = Astro.props
 
 let labelIcon = '';
 const hasLabelIcon = Astro.slots.has('label-icon');
@@ -15,7 +18,7 @@ if (hasLabelIcon) {
 const isDevMode = import.meta.env.DEV;
 ---
 
-<script is:inline define:vars={{ label, href, open, labelIcon, hasLabelIcon, isDevMode }}>
+<script is:inline define:vars={{ label, href, open, selector, labelIcon, hasLabelIcon, isDevMode }}>
 const isParentExists = document.querySelector('[data-clerk-user-button-menu-items]');
 
 // There's no current way to get the parent element of the current component in Astro.
@@ -62,6 +65,13 @@ if (open) {
   newMenuItem.open = open.startsWith('/') ? open : `/${open}`;
 }
 
+if (selector) {
+  const clickEvent = new CustomEvent('clerkUserButtonItemClick', { detail: selector });
+  newMenuItem.onClick = () => {
+    document.dispatchEvent(clickEvent);
+  }
+}
+
 userButtonComponentMap.set(safeId, {
   ...currentOptions,
   customMenuItems: [
diff --git a/packages/astro/src/astro-components/interactive/UserButton/UserButtonAction.astro b/packages/astro/src/astro-components/interactive/UserButton/UserButtonAction.astro
index cfd0ebafd20..e9b4d0b4a32 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/UserButtonAction.astro
+++ b/packages/astro/src/astro-components/interactive/UserButton/UserButtonAction.astro
@@ -1,14 +1,24 @@
 ---
 import MenuItemRenderer from './MenuItemRenderer.astro';
 
-interface Props {
-  label: string
-  open?: string
-}
+type ReorderItemsLabels = 'manageAccount' | 'signOut'
 
-const { label, open } = Astro.props
+type Props<Label extends string> = {
+  label: Label
+} & (Label extends ReorderItemsLabels
+  ? {
+      open?: string
+      selector?: string
+    }
+  : (
+      | { open: string; selector?: string }
+      | { open?: string; selector: string }
+    )
+)
+
+const { label, open, selector } = Astro.props
 ---
 
-<MenuItemRenderer label={label} open={open}>
+<MenuItemRenderer label={label} open={open} selector={selector}>
   <slot name="label-icon" slot="label-icon" />
 </MenuItemRenderer>

From 2a7fbaaf5e25620736a8140449e5bb892516dc6b Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Fri, 16 Aug 2024 10:20:01 -0700
Subject: [PATCH 15/22] chore(astro): Rename selector to clickIdentifier

---
 .../interactive/UserButton/MenuItemRenderer.astro      | 10 +++++-----
 .../interactive/UserButton/UserButtonAction.astro      |  8 ++++----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro b/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
index 2e614c006d9..5ec777d12e4 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
+++ b/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
@@ -3,10 +3,10 @@ type Props = {
   label: string
   href?: string
   open?: string
-  selector?: string
+  clickIdentifier?: string
 }
 
-const { label, href, open, selector } = Astro.props
+const { label, href, open, clickIdentifier } = Astro.props
 
 let labelIcon = '';
 const hasLabelIcon = Astro.slots.has('label-icon');
@@ -18,7 +18,7 @@ if (hasLabelIcon) {
 const isDevMode = import.meta.env.DEV;
 ---
 
-<script is:inline define:vars={{ label, href, open, selector, labelIcon, hasLabelIcon, isDevMode }}>
+<script is:inline define:vars={{ label, href, open, clickIdentifier, labelIcon, hasLabelIcon, isDevMode }}>
 const isParentExists = document.querySelector('[data-clerk-user-button-menu-items]');
 
 // There's no current way to get the parent element of the current component in Astro.
@@ -65,8 +65,8 @@ if (open) {
   newMenuItem.open = open.startsWith('/') ? open : `/${open}`;
 }
 
-if (selector) {
-  const clickEvent = new CustomEvent('clerkUserButtonItemClick', { detail: selector });
+if (clickIdentifier) {
+  const clickEvent = new CustomEvent('clerkUserButtonItemClick', { detail: clickIdentifier });
   newMenuItem.onClick = () => {
     document.dispatchEvent(clickEvent);
   }
diff --git a/packages/astro/src/astro-components/interactive/UserButton/UserButtonAction.astro b/packages/astro/src/astro-components/interactive/UserButton/UserButtonAction.astro
index e9b4d0b4a32..f4b366e3980 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/UserButtonAction.astro
+++ b/packages/astro/src/astro-components/interactive/UserButton/UserButtonAction.astro
@@ -11,14 +11,14 @@ type Props<Label extends string> = {
       selector?: string
     }
   : (
-      | { open: string; selector?: string }
-      | { open?: string; selector: string }
+      | { open: string; clickIdentifier?: string }
+      | { open?: string; clickIdentifier: string }
     )
 )
 
-const { label, open, selector } = Astro.props
+const { label, open, clickIdentifier } = Astro.props
 ---
 
-<MenuItemRenderer label={label} open={open} selector={selector}>
+<MenuItemRenderer label={label} open={open} clickIdentifier={clickIdentifier}>
   <slot name="label-icon" slot="label-icon" />
 </MenuItemRenderer>

From f5755fa33d2151910ed18cecbb32c4bae1e15d1c Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Fri, 16 Aug 2024 11:29:59 -0700
Subject: [PATCH 16/22] test(astro): Add menu item reordering test

---
 .../src/components/CustomUserButton.astro     |  2 ++
 integration/tests/astro/components.test.ts    | 21 +++++++++++++++++--
 .../UserButton/MenuItemRenderer.astro         |  7 +++----
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/integration/templates/astro-node/src/components/CustomUserButton.astro b/integration/templates/astro-node/src/components/CustomUserButton.astro
index 4ef0bcb9ca0..57205cb1272 100644
--- a/integration/templates/astro-node/src/components/CustomUserButton.astro
+++ b/integration/templates/astro-node/src/components/CustomUserButton.astro
@@ -4,6 +4,8 @@ import { UserButton } from '@clerk/astro/components';
 
 <UserButton afterSignOutUrl="/">
     <UserButton.MenuItems>
+        <UserButton.Action label="signOut" />
+        <UserButton.Action label="manageAccount" />
         <UserButton.Link label="Custom link" href="/user">
             <div slot="label-icon">Icon</div>
         </UserButton.Link>
diff --git a/integration/tests/astro/components.test.ts b/integration/tests/astro/components.test.ts
index 8fa78ea2451..60c66f244a2 100644
--- a/integration/tests/astro/components.test.ts
+++ b/integration/tests/astro/components.test.ts
@@ -57,7 +57,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
     await u.po.expect.toBeSignedIn();
   });
 
-  test('render user button', async ({ page, context }) => {
+  test('renders user button', async ({ page, context }) => {
     const u = createTestUtils({ app, page, context });
     await u.page.goToRelative('/sign-in');
     await u.po.signIn.waitForMounted();
@@ -77,7 +77,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
     await expect(u.page.getByText(/profile details/i)).toBeVisible();
   });
 
-  test('user button with custom menu items', async ({ page, context }) => {
+  test('renders user button with custom menu items', async ({ page, context }) => {
     const u = createTestUtils({ app, page, context });
     await u.page.goToRelative('/sign-in');
     await u.po.signIn.waitForMounted();
@@ -107,6 +107,23 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
     await u.page.waitForAppUrl('/user');
   });
 
+  test('reorders user button menu items and functions as expected', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+    await u.page.goToRelative('/sign-in');
+    await u.po.signIn.waitForMounted();
+    await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
+    await u.page.waitForAppUrl('/');
+    await u.po.expect.toBeSignedIn();
+
+    await u.po.userButton.waitForMounted();
+    await u.po.userButton.toggleTrigger();
+    await u.po.userButton.waitForPopover();
+
+    // First item should now be the sign out button
+    await u.page.getByRole('menuitem').first().click()
+    await u.po.expect.toBeSignedOut();
+  });
+
   test('render user profile with streamed data', async ({ page, context }) => {
     const u = createTestUtils({ app, page, context });
     await u.page.goToRelative('/sign-in');
diff --git a/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro b/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
index 5ec777d12e4..e83d6ffef12 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
+++ b/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
@@ -9,16 +9,15 @@ type Props = {
 const { label, href, open, clickIdentifier } = Astro.props
 
 let labelIcon = '';
-const hasLabelIcon = Astro.slots.has('label-icon');
 
-if (hasLabelIcon) {
+if (Astro.slots.has('label-icon')) {
   labelIcon = await Astro.slots.render('label-icon');
 }
 
 const isDevMode = import.meta.env.DEV;
 ---
 
-<script is:inline define:vars={{ label, href, open, clickIdentifier, labelIcon, hasLabelIcon, isDevMode }}>
+<script is:inline define:vars={{ label, href, open, clickIdentifier, labelIcon, isDevMode }}>
 const isParentExists = document.querySelector('[data-clerk-user-button-menu-items]');
 
 // There's no current way to get the parent element of the current component in Astro.
@@ -41,7 +40,7 @@ const safeId = userButton.getAttribute('data-clerk-id');
 const currentOptions = userButtonComponentMap.get(safeId);
 
 const reorderItemsLabels = ['manageAccount', 'signOut'];
-const isReorderItem = !hasLabelIcon && reorderItemsLabels.includes(label);
+const isReorderItem = reorderItemsLabels.includes(label);
 
 let newMenuItem = {
   label,

From 6158081e56f920ea83ff982388bded8a0df20f3d Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Fri, 16 Aug 2024 11:34:41 -0700
Subject: [PATCH 17/22] chore(astro): formatting update

---
 integration/tests/astro/components.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/integration/tests/astro/components.test.ts b/integration/tests/astro/components.test.ts
index 60c66f244a2..2bc347e5980 100644
--- a/integration/tests/astro/components.test.ts
+++ b/integration/tests/astro/components.test.ts
@@ -120,7 +120,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
     await u.po.userButton.waitForPopover();
 
     // First item should now be the sign out button
-    await u.page.getByRole('menuitem').first().click()
+    await u.page.getByRole('menuitem').first().click();
     await u.po.expect.toBeSignedOut();
   });
 

From bd90ce660547fe6140ef5db603ee6112a1502828 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Fri, 16 Aug 2024 13:22:17 -0700
Subject: [PATCH 18/22] chore(astro): Make sure multiple user buttons are
 properly scoped

---
 .../InternalUIComponentRenderer.astro         |  5 +++--
 .../UserButton/MenuItemRenderer.astro         | 22 ++++++++++++-------
 .../interactive/UserButton/UserButton.astro   | 16 ++++++++++++++
 .../UserButton/UserButtonAction.astro         |  5 +++--
 .../UserButton/UserButtonLink.astro           |  5 +++--
 .../UserButton/UserButtonMenuItems.astro      | 22 +++++++++----------
 .../UserButtonUserProfilePage.astro           | 14 ++++++++----
 7 files changed, 60 insertions(+), 29 deletions(-)

diff --git a/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro b/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro
index 32482beaea1..d7facd1f9a6 100644
--- a/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro
+++ b/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro
@@ -1,14 +1,15 @@
 ---
 interface Props {
   [key: string]: unknown
+  id?: string
   component: 'sign-in' | 'sign-up' | 'organization-list' | 'organization-profile' | 'organization-switcher' | 'user-button' | 'user-profile' | 'google-one-tap'
 }
 
 import { generateSafeId } from '@clerk/astro/internal';
 
-const safeId = generateSafeId();
+const { component, id, ...props } = Astro.props
 
-const { component, ...props } = Astro.props
+const safeId = id || generateSafeId();
 ---
 
 <div data-clerk-id={`clerk-${component}-${safeId}`}></div>
diff --git a/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro b/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
index e83d6ffef12..e462091a251 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
+++ b/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
@@ -4,9 +4,10 @@ type Props = {
   href?: string
   open?: string
   clickIdentifier?: string
+  parent?: string
 }
 
-const { label, href, open, clickIdentifier } = Astro.props
+const { label, href, open, clickIdentifier, parent } = Astro.props
 
 let labelIcon = '';
 
@@ -17,12 +18,12 @@ if (Astro.slots.has('label-icon')) {
 const isDevMode = import.meta.env.DEV;
 ---
 
-<script is:inline define:vars={{ label, href, open, clickIdentifier, labelIcon, isDevMode }}>
-const isParentExists = document.querySelector('[data-clerk-user-button-menu-items]');
+<script is:inline define:vars={{ label, href, open, clickIdentifier, labelIcon, isDevMode, parent }}>
+const parentElement = document.currentScript.parentElement;
 
-// There's no current way to get the parent element of the current component in Astro.
-// We used a web component in the parent with a data attribute that we can query here.
-if (!isParentExists) {
+// We used a web component in the `<UserButton.MenuItems>` component.
+const hasParentMenuItem = parentElement.tagName.toLowerCase() === 'user-button-menu-items';
+if (!hasParentMenuItem) {
   if (isDevMode) {
     throw new Error(
       `Clerk: <UserButton.MenuItems /> component can only accept <UserButton.Action /> and <UserButton.Link /> as its children. Any other provided component will be ignored.`
@@ -33,8 +34,13 @@ if (!isParentExists) {
 
 // Get the user button map from window that we set in the `<InternalUIComponentRenderer />`.
 const userButtonComponentMap = window.__astro_clerk_component_props.get('user-button');
-// It doesn't make sense to have multiple user buttons in page, so first one should be safe.
-const userButton = document.querySelector('[data-clerk-id^="clerk-user-button"]');
+
+let userButton
+if (parent) {
+  userButton = document.querySelector(`[data-clerk-id="clerk-user-button-${parent}"]`);
+} else {
+  userButton = document.querySelector('[data-clerk-id^="clerk-user-button"]');
+}
 
 const safeId = userButton.getAttribute('data-clerk-id');
 const currentOptions = userButtonComponentMap.get(safeId);
diff --git a/packages/astro/src/astro-components/interactive/UserButton/UserButton.astro b/packages/astro/src/astro-components/interactive/UserButton/UserButton.astro
index 432186ac1c7..669e35aa04a 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/UserButton.astro
+++ b/packages/astro/src/astro-components/interactive/UserButton/UserButton.astro
@@ -3,6 +3,22 @@ import type { UserButtonProps, UserProfileProps, Without } from "@clerk/types";
 
 type Props = Without<UserButtonProps, 'userProfileProps'> & {
   userProfileProps?: Pick<UserProfileProps, 'additionalOAuthScopes' | 'appearance'>;
+  /**
+   * If you have more than one UserButton on a page, providing a custom ID is required
+   * to properly scope menu items to the correct button.
+   *
+   * Example usage:
+   * ```tsx
+   * <UserButton id="someId">
+   *     <UserButton.MenuItems>
+   *         <UserButton.Link parent="someId" label="User" href="/user">
+   *             <Icon slot="label-icon" />
+   *         </UserButton.Link>
+   *     </UserButton.MenuItems>
+   * </UserButton>
+   * ```
+   */
+  id?: string;
 }
 
 import InternalUIComponentRenderer from '../InternalUIComponentRenderer.astro'
diff --git a/packages/astro/src/astro-components/interactive/UserButton/UserButtonAction.astro b/packages/astro/src/astro-components/interactive/UserButton/UserButtonAction.astro
index f4b366e3980..1b26fae75a0 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/UserButtonAction.astro
+++ b/packages/astro/src/astro-components/interactive/UserButton/UserButtonAction.astro
@@ -5,6 +5,7 @@ type ReorderItemsLabels = 'manageAccount' | 'signOut'
 
 type Props<Label extends string> = {
   label: Label
+  parent?: string
 } & (Label extends ReorderItemsLabels
   ? {
       open?: string
@@ -16,9 +17,9 @@ type Props<Label extends string> = {
     )
 )
 
-const { label, open, clickIdentifier } = Astro.props
+const { label, open, clickIdentifier, parent } = Astro.props
 ---
 
-<MenuItemRenderer label={label} open={open} clickIdentifier={clickIdentifier}>
+<MenuItemRenderer label={label} open={open} clickIdentifier={clickIdentifier} parent={parent}>
   <slot name="label-icon" slot="label-icon" />
 </MenuItemRenderer>
diff --git a/packages/astro/src/astro-components/interactive/UserButton/UserButtonLink.astro b/packages/astro/src/astro-components/interactive/UserButton/UserButtonLink.astro
index 2b113d7e78c..24d0faa4955 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/UserButtonLink.astro
+++ b/packages/astro/src/astro-components/interactive/UserButton/UserButtonLink.astro
@@ -4,11 +4,12 @@ import MenuItemRenderer from './MenuItemRenderer.astro';
 interface Props {
   label: string
   href: string
+  parent?: string
 }
 
-const { label, href } = Astro.props
+const { label, href, parent } = Astro.props
 ---
 
-<MenuItemRenderer label={label} href={href}>
+<MenuItemRenderer label={label} href={href} parent={parent}>
     <slot name="label-icon" slot="label-icon" />
 </MenuItemRenderer>
diff --git a/packages/astro/src/astro-components/interactive/UserButton/UserButtonMenuItems.astro b/packages/astro/src/astro-components/interactive/UserButton/UserButtonMenuItems.astro
index 36be430ba09..c1c36d33585 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/UserButtonMenuItems.astro
+++ b/packages/astro/src/astro-components/interactive/UserButton/UserButtonMenuItems.astro
@@ -1,20 +1,20 @@
-<user-button-menu-items data-clerk-user-button-menu-items>
+<user-button-menu-items>
  <slot />
 </user-button-menu-items>
 
 <script is:inline>
-/**
- * In the React version, menu items need to be wrapped in a `<UserButton.MenuItems>` component.
- * We are trying to replicate that behavior here by adding a wrapper component
- * and check if it exists inside the menu items components.
- */
-class UserButtonMenuItems extends HTMLElement {
-  constructor() {
-    super();
+if (!customElements.get('user-button-menu-items')) {
+  /**
+   * In the React version, menu items need to be wrapped in a `<UserButton.MenuItems>` component.
+   * We are trying to replicate that behavior here by adding a wrapper component
+   * and check if it exists inside the menu items components.
+   */
+  class UserButtonMenuItems extends HTMLElement {
+    constructor() {
+      super();
+    }
   }
-}
 
-if (!customElements.get('user-button-menu-items')) {
   customElements.define('user-button-menu-items', UserButtonMenuItems);
 }
 </script>
diff --git a/packages/astro/src/astro-components/interactive/UserButton/UserButtonUserProfilePage.astro b/packages/astro/src/astro-components/interactive/UserButton/UserButtonUserProfilePage.astro
index 462fe80a3d2..81284108b3c 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/UserButtonUserProfilePage.astro
+++ b/packages/astro/src/astro-components/interactive/UserButton/UserButtonUserProfilePage.astro
@@ -2,9 +2,10 @@
 interface Props {
   url: string
   label: string
+  parent?: string
 }
 
-const { url, label } = Astro.props
+const { url, label, parent } = Astro.props
 
 let labelIcon = '';
 let content = ''
@@ -18,11 +19,16 @@ if (Astro.slots.has('default')) {
 }
 ---
 
-<script is:inline define:vars={{ url, label, content, labelIcon }}>
+<script is:inline define:vars={{ url, label, content, labelIcon, parent }}>
 // Get the user button map from window that we set in the `<InternalUIComponentRenderer />`.
 const userButtonComponentMap = window.__astro_clerk_component_props.get('user-button');
-// It doesn't make sense to have multiple user buttons in page, so first one should be safe.
-const userButton = document.querySelector('[data-clerk-id^="clerk-user-button"]');
+
+let userButton
+if (parent) {
+  userButton = document.querySelector(`[data-clerk-id="clerk-user-button-${parent}"]`);
+} else {
+  userButton = document.querySelector('[data-clerk-id^="clerk-user-button"]');
+}
 
 const safeId = userButton.getAttribute('data-clerk-id');
 const currentOptions = userButtonComponentMap.get(safeId);

From c43c401f2c82fe174d7a00a17907e328025f1ea8 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Fri, 16 Aug 2024 13:45:36 -0700
Subject: [PATCH 19/22] chore(astro): Add clerk identifier to web component

---
 .../interactive/UserButton/MenuItemRenderer.astro      |  2 +-
 .../interactive/UserButton/UserButtonMenuItems.astro   | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro b/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
index e462091a251..fad61ed3ec1 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
+++ b/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
@@ -22,7 +22,7 @@ const isDevMode = import.meta.env.DEV;
 const parentElement = document.currentScript.parentElement;
 
 // We used a web component in the `<UserButton.MenuItems>` component.
-const hasParentMenuItem = parentElement.tagName.toLowerCase() === 'user-button-menu-items';
+const hasParentMenuItem = parentElement.tagName.toLowerCase() === 'clerk-user-button-menu-items';
 if (!hasParentMenuItem) {
   if (isDevMode) {
     throw new Error(
diff --git a/packages/astro/src/astro-components/interactive/UserButton/UserButtonMenuItems.astro b/packages/astro/src/astro-components/interactive/UserButton/UserButtonMenuItems.astro
index c1c36d33585..df78cec22ef 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/UserButtonMenuItems.astro
+++ b/packages/astro/src/astro-components/interactive/UserButton/UserButtonMenuItems.astro
@@ -1,20 +1,20 @@
-<user-button-menu-items>
+<clerk-user-button-menu-items>
  <slot />
-</user-button-menu-items>
+</clerk-user-button-menu-items>
 
 <script is:inline>
-if (!customElements.get('user-button-menu-items')) {
+if (!customElements.get('clerk-user-button-menu-items')) {
   /**
    * In the React version, menu items need to be wrapped in a `<UserButton.MenuItems>` component.
    * We are trying to replicate that behavior here by adding a wrapper component
    * and check if it exists inside the menu items components.
    */
-  class UserButtonMenuItems extends HTMLElement {
+  class ClerkUserButtonMenuItems extends HTMLElement {
     constructor() {
       super();
     }
   }
 
-  customElements.define('user-button-menu-items', UserButtonMenuItems);
+  customElements.define('clerk-user-button-menu-items', ClerkUserButtonMenuItems);
 }
 </script>

From 57313e1468f592fe84b3d06eeee822635fc8a5f1 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Fri, 16 Aug 2024 14:56:42 -0700
Subject: [PATCH 20/22] chore(astro): Remove unused prop type

---
 .../interactive/UserButton/UserButtonAction.astro                | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/astro/src/astro-components/interactive/UserButton/UserButtonAction.astro b/packages/astro/src/astro-components/interactive/UserButton/UserButtonAction.astro
index 1b26fae75a0..d95566d3038 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/UserButtonAction.astro
+++ b/packages/astro/src/astro-components/interactive/UserButton/UserButtonAction.astro
@@ -9,7 +9,6 @@ type Props<Label extends string> = {
 } & (Label extends ReorderItemsLabels
   ? {
       open?: string
-      selector?: string
     }
   : (
       | { open: string; clickIdentifier?: string }

From f89a32e1a866f3606d94ccbb6c219a418bf4ba8e Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Sun, 18 Aug 2024 08:04:39 -0700
Subject: [PATCH 21/22] chore(astro): Update click event name

---
 .../src/components/CustomUserButton.astro     |  3 +++
 integration/tests/astro/components.test.ts    | 23 +++++++++++++++++--
 .../UserButton/MenuItemRenderer.astro         | 22 ++++++++----------
 3 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/integration/templates/astro-node/src/components/CustomUserButton.astro b/integration/templates/astro-node/src/components/CustomUserButton.astro
index 57205cb1272..e2d26f48a98 100644
--- a/integration/templates/astro-node/src/components/CustomUserButton.astro
+++ b/integration/templates/astro-node/src/components/CustomUserButton.astro
@@ -12,6 +12,9 @@ import { UserButton } from '@clerk/astro/components';
         <UserButton.Action label="Custom action" open="terms">
             <div slot="label-icon">Icon</div>
         </UserButton.Action>
+        <UserButton.Action label="Custom click" clickIdentifier="custom_click">
+            <div slot="label-icon">Icon</div>
+        </UserButton.Action>
     </UserButton.MenuItems>
     <UserButton.UserProfilePage label="Terms" url="terms">
         <div slot="label-icon">Icon</div>
diff --git a/integration/tests/astro/components.test.ts b/integration/tests/astro/components.test.ts
index 2bc347e5980..7ddba1bdc3c 100644
--- a/integration/tests/astro/components.test.ts
+++ b/integration/tests/astro/components.test.ts
@@ -90,7 +90,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
     await u.po.userButton.waitForPopover();
 
     // Check if custom menu items are visible
-    await u.po.userButton.toHaveVisibleMenuItems([/Custom link/i, /Custom action$/i]);
+    await u.po.userButton.toHaveVisibleMenuItems([/Custom link/i, /Custom action/i, /Custom click/i]);
 
     // Click custom action and check for custom page availbility
     await u.page.getByRole('menuitem', { name: /Custom action/i }).click();
@@ -102,12 +102,31 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
     await u.po.userButton.toggleTrigger();
     await u.po.userButton.waitForPopover();
 
+    // Click custom action with click handler
+    const eventPromise = u.page.evaluate(() => {
+      return new Promise<string>(resolve => {
+        document.addEventListener(
+          'clerk:menu-item-click',
+          (e: CustomEvent<string>) => {
+            resolve(e.detail);
+          },
+          { once: true },
+        );
+      });
+    });
+    await u.page.getByRole('menuitem', { name: /Custom click/i }).click();
+    expect(await eventPromise).toBe('custom_click');
+
+    // Trigger the popover again
+    await u.po.userButton.toggleTrigger();
+    await u.po.userButton.waitForPopover();
+
     // Click custom link and check navigation
     await u.page.getByRole('menuitem', { name: /Custom link/i }).click();
     await u.page.waitForAppUrl('/user');
   });
 
-  test('reorders user button menu items and functions as expected', async ({ page, context }) => {
+  test('reorders default user button menu items and functions as expected', async ({ page, context }) => {
     const u = createTestUtils({ app, page, context });
     await u.page.goToRelative('/sign-in');
     await u.po.signIn.waitForMounted();
diff --git a/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro b/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
index fad61ed3ec1..e15f594b0d7 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
+++ b/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
@@ -60,20 +60,16 @@ if (!isReorderItem) {
     },
     unmountIcon: () => { /* What to clean up? */}
   }
-}
-
-if (href) {
-  newMenuItem.href = href;
-}
-
-if (open) {
-  newMenuItem.open = open.startsWith('/') ? open : `/${open}`;
-}
 
-if (clickIdentifier) {
-  const clickEvent = new CustomEvent('clerkUserButtonItemClick', { detail: clickIdentifier });
-  newMenuItem.onClick = () => {
-    document.dispatchEvent(clickEvent);
+  if (href) {
+    newMenuItem.href = href;
+  } else if (open) {
+    newMenuItem.open = open.startsWith('/') ? open : `/${open}`;
+  } else if (clickIdentifier) {
+    const clickEvent = new CustomEvent('clerk:menu-item-click', { detail: clickIdentifier });
+    newMenuItem.onClick = () => {
+      document.dispatchEvent(clickEvent);
+    }
   }
 }
 

From 7542e82a9c61fea45d7f22e733bb4ed5f2070f6f Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Sun, 18 Aug 2024 08:19:29 -0700
Subject: [PATCH 22/22] chore(astro): Update test preset

---
 integration/presets/astro.ts                  |  5 +++-
 .../UserButton/UserButtonMenuItems.astro      | 24 +++++++++----------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/integration/presets/astro.ts b/integration/presets/astro.ts
index f9a437e864c..a34a07e4776 100644
--- a/integration/presets/astro.ts
+++ b/integration/presets/astro.ts
@@ -9,7 +9,10 @@ const astroNode = applicationConfig()
   .setName('astro-node')
   .useTemplate(templates['astro-node'])
   .setEnvFormatter('public', key => `PUBLIC_${key}`)
-  .addScript('setup', 'npm i')
+  // When creating symlinks, the Astro vite plugin is unable to process `<script>` tags.
+  // Without `--install-link`, it throws this error:
+  // https://github.com/withastro/astro/blob/cb98b74881355de9ec9d90a613a3f1d27d154463/packages/astro/src/vite-plugin-astro/index.ts#L114
+  .addScript('setup', 'npm i --install-links')
   .addScript('dev', 'npm run dev')
   .addScript('build', 'npm run build')
   .addScript('serve', 'npm run preview')
diff --git a/packages/astro/src/astro-components/interactive/UserButton/UserButtonMenuItems.astro b/packages/astro/src/astro-components/interactive/UserButton/UserButtonMenuItems.astro
index df78cec22ef..41aeec7e576 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/UserButtonMenuItems.astro
+++ b/packages/astro/src/astro-components/interactive/UserButton/UserButtonMenuItems.astro
@@ -2,19 +2,17 @@
  <slot />
 </clerk-user-button-menu-items>
 
-<script is:inline>
-if (!customElements.get('clerk-user-button-menu-items')) {
-  /**
-   * In the React version, menu items need to be wrapped in a `<UserButton.MenuItems>` component.
-   * We are trying to replicate that behavior here by adding a wrapper component
-   * and check if it exists inside the menu items components.
-   */
-  class ClerkUserButtonMenuItems extends HTMLElement {
-    constructor() {
-      super();
-    }
+<script>
+/**
+ * In the React version, menu items need to be wrapped in a `<UserButton.MenuItems>` component.
+ * We are trying to replicate that behavior here by adding a wrapper component
+ * and check if it exists inside the menu items components.
+ */
+class ClerkUserButtonMenuItems extends HTMLElement {
+  constructor() {
+    super();
   }
-
-  customElements.define('clerk-user-button-menu-items', ClerkUserButtonMenuItems);
 }
+
+customElements.define('clerk-user-button-menu-items', ClerkUserButtonMenuItems);
 </script>