@inf-monkeys-tech/monkeys-design 1.0.35 → 1.0.36

package/dist/components/layout/index.mjs

@@ -2766,7 +2766,7 @@ function UserAccountMenu({
               DropdownMenu.Item,
               {
                 disabled: item.disabled,
-                onSelect: item.onSelect,
+                onSelect: item.disabled ? void 0 : item.onSelect,
                 className: cn(
                   "relative flex cursor-pointer select-none items-center gap-2 px-2 py-2 text-sm outline-none transition-colors hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
                   radiusClass,
@@ -2792,6 +2792,7 @@ function cn2(...inputs) {
 }
 function NavButton({
   active,
+  disabled,
   icon,
   postfix,
   onClick,
@@ -2799,11 +2800,17 @@ function NavButton({
   children
 }) {
   return /* @__PURE__ */ jsxs(
-    "div",
+    "button",
     {
+      type: "button",
+      "aria-disabled": disabled || void 0,
+      "aria-pressed": active || void 0,
+      "data-disabled": disabled || void 0,
+      disabled,
       className: cn2(
-        "flex w-full cursor-pointer select-none items-center gap-2 rounded-xl border p-2 text-xs text-[hsl(var(--foreground))] transition-colors",
+        "flex w-full cursor-pointer select-none items-center gap-2 rounded-xl border p-2 text-left text-xs text-[hsl(var(--foreground))] transition-colors",
         active ? "border-[hsl(var(--input))] bg-[hsl(var(--muted))] font-bold" : "border-transparent hover:border-[hsl(var(--input))]/60 hover:bg-[hsl(var(--muted))]/60",
+        disabled && "!cursor-not-allowed opacity-60 hover:border-transparent hover:bg-transparent",
         className
       ),
       onClick,
@@ -3096,6 +3103,8 @@ function SidebarNavList({
               /* @__PURE__ */ jsx(
                 NavButton,
                 {
+                  active: item.id === resolvedActiveItemId,
+                  disabled: item.disabled,
                   icon: item.icon,
                   onClick: () => toggle(item.id),
                   postfix: /* @__PURE__ */ jsx("div", { className: "flex flex-1 justify-end", children: /* @__PURE__ */ jsx(
@@ -3120,10 +3129,11 @@ function SidebarNavList({
                   children: item.label
                 }
               ),
-              isExpanded && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 mt-1", children: item.children.map((child) => /* @__PURE__ */ jsx(
+              isExpanded && !item.disabled && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 mt-1", children: item.children.map((child) => /* @__PURE__ */ jsx(
                 NavButton,
                 {
                   active: child.id === resolvedActiveItemId,
+                  disabled: child.disabled,
                   onClick: () => {
                     setLocalActiveItemId(child.id);
                     onNavigate?.(child.id);
@@ -3139,6 +3149,7 @@ function SidebarNavList({
             {
               icon: item.icon,
               active: item.id === resolvedActiveItemId,
+              disabled: item.disabled,
               onClick: () => {
                 setLocalActiveItemId(item.id);
                 onNavigate?.(item.id);
@@ -3388,6 +3399,10 @@ function SidebarNavigationList({
   const [expandedByRoot, setExpandedByRoot] = useState(
     {}
   );
+  const canRevealRequestedRoot = revealRequest ? items.some(
+    (item) => item.id === revealRequest.id && !item.disabled
+  ) : false;
+  const activeRootId = findNavigationRootId(items, activeItemId);
   const toggleRoot = (id) => {
     setExpandedByRoot((current) => ({
       ...current,
@@ -3395,7 +3410,7 @@ function SidebarNavigationList({
     }));
   };
   useEffect(() => {
-    if (!revealRequest) return;
+    if (!revealRequest || !canRevealRequestedRoot) return;
     setExpandedByRoot((current) => ({
       ...current,
       [revealRequest.id]: true
@@ -3413,7 +3428,7 @@ function SidebarNavigationList({
       }
     });
     return () => window.cancelAnimationFrame(frameId);
-  }, [revealRequest]);
+  }, [canRevealRequestedRoot, revealRequest]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -3428,13 +3443,15 @@ function SidebarNavigationList({
             className: "monkeys-navigation-sidebar-nav flex w-full flex-col gap-2 text-xs text-[hsl(var(--foreground))]",
             children: items.map((item) => {
               const isGroup = Boolean(item.children?.length);
-              const isExpanded = Boolean(expandedByRoot[item.id]);
-              const isActive = activeItemId === item.id;
+              const isExpanded = !item.disabled && Boolean(expandedByRoot[item.id]);
+              const isActive = activeRootId === item.id;
               if (isGroup) {
                 return /* @__PURE__ */ jsxs("div", { "data-navigation-sidebar-root-id": item.id, children: [
                   /* @__PURE__ */ jsx(
                     NavButton,
                     {
+                      active: isActive,
+                      disabled: item.disabled,
                       icon: item.icon,
                       onClick: () => toggleRoot(item.id),
                       postfix: /* @__PURE__ */ jsx("div", { className: "flex flex-1 justify-end", children: /* @__PURE__ */ jsx(
@@ -3463,6 +3480,7 @@ function SidebarNavigationList({
                     NavButton,
                     {
                       active: activeItemId === child.id,
+                      disabled: child.disabled,
                       onClick: () => onNavigate?.(child.id),
                       children: child.label
                     },
@@ -3474,6 +3492,7 @@ function SidebarNavigationList({
                 NavButton,
                 {
                   active: isActive,
+                  disabled: item.disabled,
                   icon: item.icon,
                   onClick: () => onNavigate?.(item.id),
                   children: item.label
@@ -3589,9 +3608,11 @@ function Sidebar({
                     appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
                     tone: "muted",
                     active: isActive,
+                    disabled: item.disabled,
                     iconOnly: true,
                     icon: item.icon,
                     onClick: () => {
+                      if (item.disabled) return;
                       onRevealRoot?.(item.id);
                       onCollapsedChange?.(false);
                       if (item.children?.length) return;
@@ -3668,6 +3689,7 @@ function HeadbarNavMenuItem({
   useTokenRadius
 }) {
   const [open, setOpen] = useState(false);
+  const menuOpen = !item.disabled && open;
   const closeTimerRef = useRef(null);
   const wasOpenOnPointerDownRef = useRef(false);
   const clearCloseTimer = () => {
@@ -3676,6 +3698,7 @@ function HeadbarNavMenuItem({
     closeTimerRef.current = null;
   };
   const openMenu = () => {
+    if (item.disabled) return;
     clearCloseTimer();
     setOpen(true);
   };
@@ -3687,6 +3710,7 @@ function HeadbarNavMenuItem({
     }, 120);
   };
   const navigateToFirstEnabledChild = () => {
+    if (item.disabled) return false;
     const firstEnabledChild = item.children?.find((child) => !child.disabled);
     if (!firstEnabledChild) return false;
     setOpen(false);
@@ -3694,98 +3718,113 @@ function HeadbarNavMenuItem({
     return true;
   };
   useEffect(() => clearCloseTimer, []);
-  return /* @__PURE__ */ jsxs(DropdownMenu.Root, { modal: false, open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
-      BaseButton,
-      {
-        appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
-        tone: "muted",
-        active: isActive || open,
-        icon: item.icon,
-        endIcon: /* @__PURE__ */ jsx(HeadbarChevronIcon, { open }),
-        label: /* @__PURE__ */ jsx("span", { className: "truncate whitespace-nowrap", children: label }),
-        disabled: item.disabled,
-        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,
-          compound ? false : useTokenRadius
-        ),
-        classNames: {
-          icon: "text-[inherit] [&_*]:!text-[inherit] [&_svg]:!stroke-current",
-          label: "text-[inherit] [&_*]:!text-[inherit]"
-        },
-        className: cn2(
-          "max-w-[12rem] shrink-0 border shadow-none",
-          compound && "!rounded-none !border-0 !bg-transparent",
-          menuButtonRadiusClass,
-          isActive || open ? "" : "hover:!bg-[var(--monkeys-component-navigation-headbar-item-hover-background,hsl(var(--muted)))] hover:!text-[var(--monkeys-component-navigation-headbar-item-hover-foreground,hsl(var(--foreground)))]"
-        )
-      }
-    ) }),
-    /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(
-      DropdownMenu.Content,
-      {
-        align: "start",
-        sideOffset: 5,
-        onCloseAutoFocus: (event) => event.preventDefault(),
-        onMouseEnter: openMenu,
-        onMouseLeave: scheduleCloseMenu,
-        className: cn2(
-          "z-50 min-w-56 border p-1.5 animate-in fade-in-0 zoom-in-95",
-          menuContentRadiusClass
-        ),
-        style: {
-          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)))",
-          boxShadow: "var(--monkeys-component-navigation-headbar-menu-shadow, 0 10px 15px -3px rgb(0 0 0 / 0.1))",
-          backdropFilter: "blur(var(--monkeys-component-navigation-headbar-menu-backdrop-blur, 0px))"
-        },
-        children: item.children?.map((child) => /* @__PURE__ */ jsxs(
-          DropdownMenu.Item,
+  return /* @__PURE__ */ jsxs(
+    DropdownMenu.Root,
+    {
+      modal: false,
+      open: menuOpen,
+      onOpenChange: (nextOpen) => setOpen(item.disabled ? false : nextOpen),
+      children: [
+        /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          BaseButton,
           {
-            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)))]",
-              menuItemRadiusClass
-            ),
+            appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+            tone: "muted",
+            active: isActive || menuOpen,
+            icon: item.icon,
+            endIcon: /* @__PURE__ */ jsx(HeadbarChevronIcon, { open: menuOpen }),
+            label: /* @__PURE__ */ jsx("span", { className: "truncate whitespace-nowrap", children: label }),
+            disabled: item.disabled,
+            onClick: () => {
+              if (item.disabled) return;
+              const wasOpenOnPointerDown = wasOpenOnPointerDownRef.current;
+              wasOpenOnPointerDownRef.current = false;
+              if (wasOpenOnPointerDown && navigateToFirstEnabledChild()) return;
+              setOpen(true);
+            },
+            onPointerDown: () => {
+              if (item.disabled) return;
+              wasOpenOnPointerDownRef.current = menuOpen;
+            },
+            onPointerCancel: () => {
+              wasOpenOnPointerDownRef.current = false;
+            },
+            onKeyDown: (event) => {
+              if (item.disabled || !menuOpen || event.key !== "Enter" && event.key !== " ")
+                return;
+              if (navigateToFirstEnabledChild()) event.preventDefault();
+            },
+            onMouseEnter: openMenu,
+            onMouseLeave: scheduleCloseMenu,
             style: getHeadbarItemStyle(
-              child.id === activeItemId,
-              useTokenRadius
+              isActive || menuOpen,
+              compound ? false : useTokenRadius
             ),
-            onSelect: () => {
-              if (child.disabled) return;
-              setOpen(false);
-              onNavigate?.(child.id);
+            classNames: {
+              icon: "text-[inherit] [&_*]:!text-[inherit] [&_svg]:!stroke-current",
+              label: "text-[inherit] [&_*]:!text-[inherit]"
             },
-            children: [
-              child.icon ? /* @__PURE__ */ jsx("span", { className: "inline-flex h-4 w-4 shrink-0 items-center justify-center text-[hsl(var(--muted-foreground))]", children: child.icon }) : null,
-              /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: child.headbarLabel ?? child.label }),
-              child.trailing
-            ]
-          },
-          child.id
-        ))
-      }
-    ) })
-  ] });
+            className: cn2(
+              "max-w-[12rem] shrink-0 border shadow-none",
+              compound && "!rounded-none !border-0 !bg-transparent",
+              menuButtonRadiusClass,
+              isActive || menuOpen ? "" : "hover:!bg-[var(--monkeys-component-navigation-headbar-item-hover-background,hsl(var(--muted)))] hover:!text-[var(--monkeys-component-navigation-headbar-item-hover-foreground,hsl(var(--foreground)))]"
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(
+          DropdownMenu.Content,
+          {
+            align: "start",
+            sideOffset: 5,
+            onCloseAutoFocus: (event) => event.preventDefault(),
+            onMouseEnter: openMenu,
+            onMouseLeave: scheduleCloseMenu,
+            className: cn2(
+              "z-50 min-w-56 border p-1.5 animate-in fade-in-0 zoom-in-95",
+              menuContentRadiusClass
+            ),
+            style: {
+              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)))",
+              boxShadow: "var(--monkeys-component-navigation-headbar-menu-shadow, 0 10px 15px -3px rgb(0 0 0 / 0.1))",
+              backdropFilter: "blur(var(--monkeys-component-navigation-headbar-menu-backdrop-blur, 0px))"
+            },
+            children: item.children?.map((child) => /* @__PURE__ */ jsxs(
+              DropdownMenu.Item,
+              {
+                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)))]",
+                  menuItemRadiusClass
+                ),
+                style: getHeadbarItemStyle(
+                  child.id === activeItemId,
+                  useTokenRadius
+                ),
+                onSelect: () => {
+                  if (child.disabled) return;
+                  setOpen(false);
+                  onNavigate?.(child.id);
+                },
+                children: [
+                  child.icon ? /* @__PURE__ */ jsx("span", { className: "inline-flex h-4 w-4 shrink-0 items-center justify-center text-[hsl(var(--muted-foreground))]", children: child.icon }) : null,
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: child.headbarLabel ?? child.label }),
+                  child.trailing
+                ]
+              },
+              child.id
+            ))
+          }
+        ) })
+      ]
+    }
+  );
+}
+function preventDisabledNavigationInteraction(event) {
+  event.preventDefault();
+  event.stopPropagation();
 }
 function NavigationHeadbarMenu({
   activeItemId,
@@ -3852,10 +3891,13 @@ function NavigationHeadbarMenu({
       "div",
       {
         "data-navigation-headbar-compound-item": item.id,
+        "data-disabled": item.disabled || void 0,
+        "aria-disabled": item.disabled || void 0,
         className: cn2(
           "inline-flex min-w-0 shrink-0 items-center gap-0 overflow-hidden border shadow-none",
           menuButtonRadiusClass,
-          isActive ? "" : "hover:!bg-[var(--monkeys-component-navigation-headbar-item-hover-background,hsl(var(--muted)))] hover:!text-[var(--monkeys-component-navigation-headbar-item-hover-foreground,hsl(var(--foreground)))]"
+          isActive ? "" : "hover:!bg-[var(--monkeys-component-navigation-headbar-item-hover-background,hsl(var(--muted)))] hover:!text-[var(--monkeys-component-navigation-headbar-item-hover-foreground,hsl(var(--foreground)))]",
+          item.disabled && "!cursor-not-allowed"
         ),
         style: getHeadbarCompoundStyle(isActive, useTokenRadius),
         children: [
@@ -3871,7 +3913,16 @@ function NavigationHeadbarMenu({
             "span",
             {
               "data-navigation-headbar-secondary-action": item.id,
-              className: "inline-flex min-w-0 shrink-0 items-center",
+              "aria-disabled": item.disabled || void 0,
+              ...item.disabled ? { inert: "" } : {},
+              onClickCapture: item.disabled ? preventDisabledNavigationInteraction : void 0,
+              onKeyDownCapture: item.disabled ? preventDisabledNavigationInteraction : void 0,
+              onKeyUpCapture: item.disabled ? preventDisabledNavigationInteraction : void 0,
+              onPointerDownCapture: item.disabled ? preventDisabledNavigationInteraction : void 0,
+              className: cn2(
+                "inline-flex min-w-0 shrink-0 items-center",
+                item.disabled && "!cursor-not-allowed opacity-60"
+              ),
               children: item.headbarSecondaryAction
             }
           )