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

package/dist/components/layout/index.mjs

@@ -2766,7 +2766,7 @@ function UserAccountMenu({
               DropdownMenu.Item,
               {
                 disabled: item.disabled,
-                onSelect: item.disabled ? void 0 : item.onSelect,
+                onSelect: 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,7 +2792,6 @@ function cn2(...inputs) {
 }
 function NavButton({
   active,
-  disabled,
   icon,
   postfix,
   onClick,
@@ -2800,17 +2799,11 @@ function NavButton({
   children
 }) {
   return /* @__PURE__ */ jsxs(
-    "button",
+    "div",
     {
-      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-left 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-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,
@@ -3103,8 +3096,6 @@ 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(
@@ -3129,11 +3120,10 @@ function SidebarNavList({
                   children: item.label
                 }
               ),
-              isExpanded && !item.disabled && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 mt-1", children: item.children.map((child) => /* @__PURE__ */ jsx(
+              isExpanded && /* @__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);
@@ -3149,7 +3139,6 @@ function SidebarNavList({
             {
               icon: item.icon,
               active: item.id === resolvedActiveItemId,
-              disabled: item.disabled,
               onClick: () => {
                 setLocalActiveItemId(item.id);
                 onNavigate?.(item.id);
@@ -3399,10 +3388,6 @@ 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,
@@ -3410,7 +3395,7 @@ function SidebarNavigationList({
     }));
   };
   useEffect(() => {
-    if (!revealRequest || !canRevealRequestedRoot) return;
+    if (!revealRequest) return;
     setExpandedByRoot((current) => ({
       ...current,
       [revealRequest.id]: true
@@ -3428,7 +3413,7 @@ function SidebarNavigationList({
       }
     });
     return () => window.cancelAnimationFrame(frameId);
-  }, [canRevealRequestedRoot, revealRequest]);
+  }, [revealRequest]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -3443,15 +3428,13 @@ 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 = !item.disabled && Boolean(expandedByRoot[item.id]);
-              const isActive = activeRootId === item.id;
+              const isExpanded = Boolean(expandedByRoot[item.id]);
+              const isActive = activeItemId === 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(
@@ -3480,7 +3463,6 @@ function SidebarNavigationList({
                     NavButton,
                     {
                       active: activeItemId === child.id,
-                      disabled: child.disabled,
                       onClick: () => onNavigate?.(child.id),
                       children: child.label
                     },
@@ -3492,7 +3474,6 @@ function SidebarNavigationList({
                 NavButton,
                 {
                   active: isActive,
-                  disabled: item.disabled,
                   icon: item.icon,
                   onClick: () => onNavigate?.(item.id),
                   children: item.label
@@ -3608,11 +3589,9 @@ 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;
@@ -3689,7 +3668,6 @@ function HeadbarNavMenuItem({
   useTokenRadius
 }) {
   const [open, setOpen] = useState(false);
-  const menuOpen = !item.disabled && open;
   const closeTimerRef = useRef(null);
   const wasOpenOnPointerDownRef = useRef(false);
   const clearCloseTimer = () => {
@@ -3698,7 +3676,6 @@ function HeadbarNavMenuItem({
     closeTimerRef.current = null;
   };
   const openMenu = () => {
-    if (item.disabled) return;
     clearCloseTimer();
     setOpen(true);
   };
@@ -3710,7 +3687,6 @@ function HeadbarNavMenuItem({
     }, 120);
   };
   const navigateToFirstEnabledChild = () => {
-    if (item.disabled) return false;
     const firstEnabledChild = item.children?.find((child) => !child.disabled);
     if (!firstEnabledChild) return false;
     setOpen(false);
@@ -3718,113 +3694,98 @@ function HeadbarNavMenuItem({
     return true;
   };
   useEffect(() => clearCloseTimer, []);
-  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,
-          {
-            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(
-              isActive || menuOpen,
-              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 || 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,
+  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,
           {
-            align: "start",
-            sideOffset: 5,
-            onCloseAutoFocus: (event) => event.preventDefault(),
-            onMouseEnter: openMenu,
-            onMouseLeave: scheduleCloseMenu,
+            disabled: child.disabled,
             className: cn2(
-              "z-50 min-w-56 border p-1.5 animate-in fade-in-0 zoom-in-95",
-              menuContentRadiusClass
+              "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: {
-              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))"
+            style: getHeadbarItemStyle(
+              child.id === activeItemId,
+              useTokenRadius
+            ),
+            onSelect: () => {
+              if (child.disabled) return;
+              setOpen(false);
+              onNavigate?.(child.id);
             },
-            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();
+            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 NavigationHeadbarMenu({
   activeItemId,
@@ -3891,13 +3852,10 @@ 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)))]",
-          item.disabled && "!cursor-not-allowed"
+          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)))]"
         ),
         style: getHeadbarCompoundStyle(isActive, useTokenRadius),
         children: [
@@ -3913,16 +3871,7 @@ function NavigationHeadbarMenu({
             "span",
             {
               "data-navigation-headbar-secondary-action": item.id,
-              "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"
-              ),
+              className: "inline-flex min-w-0 shrink-0 items-center",
               children: item.headbarSecondaryAction
             }
           )