From 85e2327f5f32e255ed4a6c8fcc91006c94abab51 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 23 Mar 2026 10:33:58 +0000
Subject: [PATCH] Cleaning

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../ui/src/components/Menu/Menu.module.css    | 19 ++++++++++++++++---
 packages/ui/src/components/Menu/Menu.tsx      |  9 ++++-----
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/packages/ui/src/components/Menu/Menu.module.css b/packages/ui/src/components/Menu/Menu.module.css
index 0fa530359a..31aae5a990 100644
--- a/packages/ui/src/components/Menu/Menu.module.css
+++ b/packages/ui/src/components/Menu/Menu.module.css
@@ -120,10 +120,23 @@
   }
 
   .bui-MenuItemListBox {
-    padding-inline: var(--bui-space-1);
-    display: block;
+    display: flex;
+    align-items: center;
+    height: 2rem;
+    padding-inline: var(--bui-space-2);
+    border-radius: var(--bui-radius-2);
+    outline: none;
+    cursor: default;
+    color: var(--bui-fg-primary);
+    font-size: var(--bui-font-size-3);
 
-    &:hover .bui-MenuItemWrapper {
+    &[data-focus-visible] {
+      outline: 2px solid var(--bui-ring);
+      outline-offset: -2px;
+    }
+
+    &[data-hovered],
+    &[data-focused] {
       background: var(--bui-bg-neutral-2);
       color: var(--bui-fg-primary);
     }
diff --git a/packages/ui/src/components/Menu/Menu.tsx b/packages/ui/src/components/Menu/Menu.tsx
index e8de1f6282..2c411dd4c9 100644
--- a/packages/ui/src/components/Menu/Menu.tsx
+++ b/packages/ui/src/components/Menu/Menu.tsx
@@ -66,7 +66,6 @@ import { isInternalLink } from '../../utils/linkUtils';
 import { getNodeText } from '../../analytics/getNodeText';
 import { Box } from '../Box';
 import { BgReset } from '../../hooks/useBg';
-import { useCallback } from 'react';
 
 // The height will be used for virtualized menus. It should match the size set in CSS for each menu item.
 const rowHeight = 32;
@@ -309,7 +308,7 @@ export const MenuItem = (props: MenuItemProps) => {
   );
   const { classes, iconStart, children, href } = ownProps;
 
-  const handleAction = useCallback(() => {
+  const captureHrefClick = () => {
     if (href) {
       const text =
         restProps['aria-label'] ?? getNodeText(children) ?? String(href);
@@ -317,7 +316,7 @@ export const MenuItem = (props: MenuItemProps) => {
         attributes: { to: String(href) },
       });
     }
-  }, [href, restProps, analytics, children]);
+  };
 
   // External links open in new tab via window.open instead of client-side routing
   if (href && !isInternalLink(href)) {
@@ -329,7 +328,7 @@ export const MenuItem = (props: MenuItemProps) => {
         {...restProps}
         onAction={() => {
           restProps.onAction?.();
-          handleAction();
+          captureHrefClick();
           window.open(href, '_blank', 'noopener,noreferrer');
         }}
       >
@@ -353,7 +352,7 @@ export const MenuItem = (props: MenuItemProps) => {
       {...restProps}
       onAction={() => {
         restProps.onAction?.();
-        handleAction();
+        captureHrefClick();
       }}
     >
       <div className={classes.itemContent}>