From fd23d3ed71cbcf57b93000fee12a7b9ed2e9fa0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sofia=20Sj=C3=B6blad?= <ssjoblad@spotify.com>
Date: Mon, 6 Oct 2025 16:25:39 +0200
Subject: [PATCH] use react router for internal routing in menus
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Sofia Sjöblad <ssjoblad@spotify.com>
---
 packages/ui/src/components/Menu/Menu.tsx | 46 +++++++++++++++---------
 1 file changed, 30 insertions(+), 16 deletions(-)

diff --git a/packages/ui/src/components/Menu/Menu.tsx b/packages/ui/src/components/Menu/Menu.tsx
index a55d6fdafb..cea8aa2cb8 100644
--- a/packages/ui/src/components/Menu/Menu.tsx
+++ b/packages/ui/src/components/Menu/Menu.tsx
@@ -51,8 +51,8 @@ import {
   RiCheckLine,
   RiCloseCircleLine,
 } from '@remixicon/react';
-import { isExternalLink } from '../../utils/isExternalLink';
 import { useNavigate, useHref } from 'react-router-dom';
+import { isExternalLink } from '../../utils/isExternalLink';
 
 const MenuEmptyState = () => {
   const { classNames } = useStyles('Menu');
@@ -74,19 +74,22 @@ export const SubmenuTrigger = (props: SubmenuTriggerProps) => {
 export const Menu = (props: MenuProps<object>) => {
   const { placement = 'bottom start', ...rest } = props;
   const { classNames } = useStyles('Menu');
+  const navigate = useNavigate();
 
   return (
     <RAPopover className={classNames.popover} placement={placement}>
-      <ScrollArea.Root>
-        <ScrollArea.Viewport>
-          <RAMenu className={classNames.content} {...rest}>
-            {props.children}
-          </RAMenu>
-        </ScrollArea.Viewport>
-        <ScrollArea.Scrollbar orientation="vertical" style={{}}>
-          <ScrollArea.Thumb />
-        </ScrollArea.Scrollbar>
-      </ScrollArea.Root>
+      <RouterProvider navigate={navigate} useHref={useHref}>
+        <ScrollArea.Root>
+          <ScrollArea.Viewport>
+            <RAMenu className={classNames.content} {...rest}>
+              {props.children}
+            </RAMenu>
+          </ScrollArea.Viewport>
+          <ScrollArea.Scrollbar orientation="vertical" style={{}}>
+            <ScrollArea.Thumb />
+          </ScrollArea.Scrollbar>
+        </ScrollArea.Root>
+      </RouterProvider>
     </RAPopover>
   );
 };
@@ -201,7 +204,6 @@ export const MenuAutocompleteListbox = (
 export const MenuItem = (props: MenuItemProps) => {
   const { iconStart, color = 'primary', children, href, ...rest } = props;
   const { classNames } = useStyles('Menu');
-  const navigate = useNavigate();
 
   const isLink = href !== undefined;
   const isExternal = isExternalLink(href);
@@ -224,11 +226,23 @@ export const MenuItem = (props: MenuItemProps) => {
     </RAMenuItem>
   );
 
-  if (isLink && !isExternal) {
+  if (isLink && isExternal) {
     return (
-      <RouterProvider navigate={navigate} useHref={useHref}>
-        {content}
-      </RouterProvider>
+      <RAMenuItem
+        className={classNames.item}
+        data-color={color}
+        textValue={typeof children === 'string' ? children : undefined}
+        onAction={() => window.open(href, '_blank', 'noopener,noreferrer')}
+        {...rest}
+      >
+        <div className={classNames.itemContent}>
+          {iconStart}
+          {children}
+        </div>
+        <div className={classNames.itemArrow}>
+          <RiArrowRightSLine />
+        </div>
+      </RAMenuItem>
     );
   }