@inf-monkeys-tech/monkeys-design 1.0.18 → 1.0.19

package/dist/components/layout/index.mjs

@@ -3634,6 +3634,7 @@ function HeadbarNavMenuItem({
 }) {
   const [open, setOpen] = useState(false);
   const closeTimerRef = useRef(null);
+  const wasOpenOnPointerDownRef = useRef(false);
   const clearCloseTimer = () => {
     if (!closeTimerRef.current) return;
     clearTimeout(closeTimerRef.current);
@@ -3650,6 +3651,13 @@ function HeadbarNavMenuItem({
       closeTimerRef.current = null;
     }, 120);
   };
+  const navigateToFirstEnabledChild = () => {
+    const firstEnabledChild = item.children?.find((child) => !child.disabled);
+    if (!firstEnabledChild) return false;
+    setOpen(false);
+    onNavigate?.(firstEnabledChild.id);
+    return true;
+  };
   useEffect(() => clearCloseTimer, []);
   return /* @__PURE__ */ jsxs(DropdownMenu.Root, { modal: false, open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
@@ -3662,7 +3670,22 @@ function HeadbarNavMenuItem({
         endIcon: /* @__PURE__ */ jsx(HeadbarChevronIcon, { open }),
         label: /* @__PURE__ */ jsx("span", { className: "truncate whitespace-nowrap", children: label }),
         disabled: item.disabled,
-        onClick: () => setOpen(true),
+        onClick: () => {
+          const wasOpenOnPointerDown = wasOpenOnPointerDownRef.current;
+          wasOpenOnPointerDownRef.current = false;
+          if (wasOpenOnPointerDown && navigateToFirstEnabledChild()) return;
+          setOpen(true);
+        },
+        onPointerDown: () => {
+          wasOpenOnPointerDownRef.current = open;
+        },
+        onPointerCancel: () => {
+          wasOpenOnPointerDownRef.current = false;
+        },
+        onKeyDown: (event) => {
+          if (!open || event.key !== "Enter" && event.key !== " ") return;
+          if (navigateToFirstEnabledChild()) event.preventDefault();
+        },
         onMouseEnter: openMenu,
         onMouseLeave: scheduleCloseMenu,
         style: getHeadbarItemStyle(isActive || open, useTokenRadius),
@@ -3701,7 +3724,7 @@ function HeadbarNavMenuItem({
           {
             disabled: child.disabled,
             className: cn2(
-              "relative flex cursor-pointer select-none items-center gap-2.5 px-3 py-2 text-sm outline-none transition-colors hover:bg-[var(--monkeys-component-navigation-headbar-item-hover-background,hsl(var(--accent)))]",
+              "relative flex cursor-pointer select-none items-center gap-2.5 px-3 py-2 text-sm outline-none transition-colors hover:bg-[var(--monkeys-component-navigation-headbar-item-hover-background,hsl(var(--accent)))] focus:bg-[var(--monkeys-component-navigation-headbar-item-hover-background,hsl(var(--accent)))] [&[data-highlighted]]:bg-[var(--monkeys-component-navigation-headbar-item-hover-background,hsl(var(--accent)))]",
               menuItemRadiusClass
             ),
             style: getHeadbarItemStyle(