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

package/dist/components/layout/index.js

@@ -3657,6 +3657,7 @@ function HeadbarNavMenuItem({
 }) {
   const [open, setOpen] = react.useState(false);
   const closeTimerRef = react.useRef(null);
+  const wasOpenOnPointerDownRef = react.useRef(false);
   const clearCloseTimer = () => {
     if (!closeTimerRef.current) return;
     clearTimeout(closeTimerRef.current);
@@ -3673,6 +3674,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;
+  };
   react.useEffect(() => clearCloseTimer, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu__namespace.Root, { modal: false, open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3685,7 +3693,22 @@ function HeadbarNavMenuItem({
         endIcon: /* @__PURE__ */ jsxRuntime.jsx(HeadbarChevronIcon, { open }),
         label: /* @__PURE__ */ jsxRuntime.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),
@@ -3724,7 +3747,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(