@inf-monkeys-tech/monkeys-design 1.0.65 → 1.0.66

package/dist/components/layout/index.mjs

@@ -3681,6 +3681,14 @@ function HeadbarChevronIcon({ open }) {
     }
   );
 }
+function getHeadbarSummaryTitle(rootLabel, childLabel) {
+  if (typeof rootLabel !== "string" || typeof childLabel !== "string") {
+    return void 0;
+  }
+  const rootText = rootLabel.trim();
+  const childText = childLabel.trim();
+  return rootText && childText ? `${rootText} ${childText}` : void 0;
+}
 function HeadbarNavMenuItem({
   activeItemId,
   compound,
@@ -3691,6 +3699,7 @@ function HeadbarNavMenuItem({
   menuContentRadiusClass,
   menuItemRadiusClass,
   onNavigate,
+  title,
   useTokenRadius
 }) {
   const [open, setOpen] = useState(false);
@@ -3737,7 +3746,8 @@ function HeadbarNavMenuItem({
             active: isActive || isOpen,
             icon: item.icon,
             endIcon: /* @__PURE__ */ jsx(HeadbarChevronIcon, { open: isOpen }),
-            label: /* @__PURE__ */ jsx("span", { className: "truncate whitespace-nowrap", children: label }),
+            label,
+            title,
             disabled: item.disabled,
             onClick: () => {
               const wasOpenOnPointerDown = wasOpenOnPointerDownRef.current;
@@ -3764,7 +3774,7 @@ function HeadbarNavMenuItem({
             ),
             classNames: {
               icon: "text-[inherit] [&_*]:!text-[inherit] [&_svg]:!stroke-current",
-              label: "text-[inherit] [&_*]:!text-[inherit]"
+              label: "flex min-w-0 items-center text-[inherit] [&_*]:!text-[inherit]"
             },
             className: cn2(
               "max-w-[12rem] shrink-0 border shadow-none",
@@ -3783,10 +3793,13 @@ function HeadbarNavMenuItem({
             onMouseEnter: openMenu,
             onMouseLeave: scheduleCloseMenu,
             className: cn2(
-              "z-50 min-w-56 border p-1.5 animate-in fade-in-0 zoom-in-95",
+              "z-50 border p-1.5 animate-in fade-in-0 zoom-in-95",
               menuContentRadiusClass
             ),
             style: {
+              width: "max-content",
+              minWidth: "var(--radix-dropdown-menu-trigger-width)",
+              maxWidth: "min(20rem, var(--radix-dropdown-menu-content-available-width))",
               background: "var(--monkeys-component-navigation-headbar-menu-background, hsl(var(--popover)))",
               borderColor: "var(--monkeys-component-navigation-headbar-menu-border-color, hsl(var(--border)))",
               color: "var(--monkeys-component-navigation-headbar-menu-foreground, hsl(var(--popover-foreground)))",
@@ -3798,7 +3811,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)))] hover:!text-[var(--monkeys-component-navigation-headbar-item-hover-foreground,hsl(var(--accent-foreground)))] focus:!bg-[var(--monkeys-component-navigation-headbar-item-hover-background,hsl(var(--accent)))] focus:!text-[var(--monkeys-component-navigation-headbar-item-hover-foreground,hsl(var(--accent-foreground)))] data-[highlighted]:!bg-[var(--monkeys-component-navigation-headbar-item-hover-background,hsl(var(--accent)))] data-[highlighted]:!text-[var(--monkeys-component-navigation-headbar-item-hover-foreground,hsl(var(--accent-foreground)))]",
+                  "relative flex w-full min-w-0 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)))] hover:!text-[var(--monkeys-component-navigation-headbar-item-hover-foreground,hsl(var(--accent-foreground)))] focus:!bg-[var(--monkeys-component-navigation-headbar-item-hover-background,hsl(var(--accent)))] focus:!text-[var(--monkeys-component-navigation-headbar-item-hover-foreground,hsl(var(--accent-foreground)))] data-[highlighted]:!bg-[var(--monkeys-component-navigation-headbar-item-hover-background,hsl(var(--accent)))] data-[highlighted]:!text-[var(--monkeys-component-navigation-headbar-item-hover-foreground,hsl(var(--accent-foreground)))]",
                   menuItemRadiusClass
                 ),
                 style: getHeadbarItemStyle(
@@ -3842,7 +3855,24 @@ function NavigationHeadbarMenu({
   return /* @__PURE__ */ jsx("div", { className: "flex w-max min-w-0 shrink-0 items-center gap-1", children: items.map((item) => {
     const isActive = activeRootId === item.id || activeItemId === item.id;
     const hasSecondaryAction = Boolean(item.headbarSecondaryAction);
-    const label = item.headbarLabel ?? item.label;
+    const rootLabel = item.headbarLabel ?? item.label;
+    const activeChild = item.children?.find(
+      (child) => child.id === activeItemId
+    );
+    const activeChildLabel = activeChild ? activeChild.headbarLabel ?? activeChild.label : void 0;
+    const label = activeChild ? /* @__PURE__ */ jsxs(
+      "span",
+      {
+        "data-navigation-headbar-selected-child": activeChild.id,
+        className: "flex min-w-0 items-center gap-1.5 whitespace-nowrap",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "shrink-0", children: rootLabel }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: ": " }),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: activeChildLabel })
+        ]
+      }
+    ) : /* @__PURE__ */ jsx("span", { className: "truncate whitespace-nowrap", children: rootLabel });
+    const title = activeChild ? getHeadbarSummaryTitle(rootLabel, activeChildLabel) : void 0;
     const primaryAction = item.children?.length ? /* @__PURE__ */ jsx(
       HeadbarNavMenuItem,
       {
@@ -3855,6 +3885,7 @@ function NavigationHeadbarMenu({
         menuContentRadiusClass,
         menuItemRadiusClass,
         onNavigate,
+        title,
         useTokenRadius
       }
     ) : /* @__PURE__ */ jsx(