@almadar/ui 5.29.0 → 5.30.0

package/dist/runtime/index.js

@@ -21495,7 +21495,84 @@ var init_DashboardLayout = __esm({
     NavLinkBottom.displayName = "NavLinkBottom";
   }
 });
-var Menu;
+function computeMenuStyle(position, triggerRect) {
+  const isTop = position.startsWith("top");
+  const isRight = position.endsWith("right") || position.endsWith("end");
+  if (isTop) {
+    return {
+      top: triggerRect.top - MENU_GAP,
+      transform: "translateY(-100%)",
+      ...isRight ? { right: window.innerWidth - triggerRect.right } : { left: triggerRect.left }
+    };
+  }
+  return {
+    top: triggerRect.bottom + MENU_GAP,
+    ...isRight ? { right: window.innerWidth - triggerRect.right } : { left: triggerRect.left }
+  };
+}
+function SubMenu({
+  items,
+  itemRef,
+  direction,
+  eventBus
+}) {
+  const [rect, setRect] = useState(null);
+  useEffect(() => {
+    if (itemRef) {
+      setRect(itemRef.getBoundingClientRect());
+    }
+  }, [itemRef]);
+  if (!rect) return null;
+  const isRtl = direction === "rtl";
+  const style = {
+    top: rect.top,
+    ...isRtl ? { right: window.innerWidth - rect.left } : { left: rect.right }
+  };
+  const panel = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("fixed z-50", menuContainerStyles),
+      style,
+      children: items.map((item, index) => {
+        const isDivider = item.id === "divider" || item.label === "divider";
+        const itemId = item.id ?? `item-${item.label.toLowerCase().replace(/\s+/g, "-")}-${index}`;
+        const isDanger = item.variant === "danger";
+        if (isDivider) {
+          return /* @__PURE__ */ jsx(Divider, { className: "my-1" }, `divider-${index}`);
+        }
+        return /* @__PURE__ */ jsxs(
+          Box,
+          {
+            as: "button",
+            onClick: () => {
+              if (item.disabled) return;
+              if (item.event) eventBus.emit(`UI:${item.event}`, { itemId, label: item.label });
+              item.onClick?.();
+            },
+            "aria-disabled": item.disabled || void 0,
+            "data-testid": item.event ? `action-${item.event}` : void 0,
+            className: cn(
+              "w-full flex items-center gap-3 px-4 py-2 text-start",
+              "text-sm transition-colors",
+              "hover:bg-muted focus:outline-none focus:bg-muted",
+              "disabled:opacity-50 disabled:cursor-not-allowed",
+              item.disabled && "cursor-not-allowed",
+              isDanger && "text-error hover:bg-error/10"
+            ),
+            children: [
+              item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: item.icon, size: "sm", className: "flex-shrink-0" }) : /* @__PURE__ */ jsx(Icon, { icon: item.icon, size: "sm", className: "flex-shrink-0" })),
+              /* @__PURE__ */ jsx(Typography, { variant: "small", className: cn("flex-1", isDanger && "text-red-600"), children: item.label }),
+              item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs font-medium", children: item.badge })
+            ]
+          },
+          itemId
+        );
+      })
+    }
+  );
+  return typeof document !== "undefined" ? createPortal(panel, document.body) : panel;
+}
+var MENU_GAP, menuContainerStyles, Menu;
 var init_Menu = __esm({
   "components/core/molecules/Menu.tsx"() {
     "use client";
@@ -21506,6 +21583,14 @@ var init_Menu = __esm({
     init_Badge();
     init_cn();
     init_useEventBus();
+    MENU_GAP = 4;
+    menuContainerStyles = cn(
+      "bg-card",
+      "border-[length:var(--border-width)] border-border",
+      "shadow-elevation-popover",
+      "rounded-sm",
+      "min-w-0 sm:min-w-[200px] max-w-[calc(100vw-1rem)] py-1"
+    );
     Menu = ({
       trigger,
       items,
@@ -21513,9 +21598,10 @@ var init_Menu = __esm({
       className
     }) => {
       const eventBus = useEventBus();
-      const { t, direction } = useTranslate();
+      const { direction } = useTranslate();
       const [isOpen, setIsOpen] = useState(false);
       const [activeSubMenu, setActiveSubMenu] = useState(null);
+      const [activeSubMenuRef, setActiveSubMenuRef] = useState(null);
       const [triggerRect, setTriggerRect] = useState(null);
       const triggerRef = useRef(null);
       const menuRef = useRef(null);
@@ -21530,13 +21616,14 @@ var init_Menu = __esm({
         }
         setIsOpen(!isOpen);
         setActiveSubMenu(null);
+        setActiveSubMenuRef(null);
       };
-      const handleItemClick = (item) => {
+      const handleItemClick = (item, itemId) => {
         if (item.disabled) return;
         if (item.subMenu && item.subMenu.length > 0) {
-          setActiveSubMenu(item.id ?? null);
+          setActiveSubMenu(itemId);
         } else {
-          if (item.event) eventBus.emit(`UI:${item.event}`, { itemId: item.id, label: item.label });
+          if (item.event) eventBus.emit(`UI:${item.event}`, { itemId, label: item.label });
           item.onClick?.();
           setIsOpen(false);
         }
@@ -21551,22 +21638,12 @@ var init_Menu = __esm({
           if (isOpen && menuRef.current && !menuRef.current.contains(e.target) && triggerRef.current && !triggerRef.current.contains(e.target)) {
             setIsOpen(false);
             setActiveSubMenu(null);
+            setActiveSubMenuRef(null);
           }
         };
         document.addEventListener("mousedown", handleClickOutside);
         return () => document.removeEventListener("mousedown", handleClickOutside);
       }, [isOpen]);
-      const positionClasses = {
-        "top-left": "bottom-full left-0 mb-2",
-        "top-right": "bottom-full right-0 mb-2",
-        "bottom-left": "top-full left-0 mt-2",
-        "bottom-right": "top-full right-0 mt-2",
-        // Aliases for pattern compatibility
-        "top-start": "bottom-full left-0 mb-2",
-        "top-end": "bottom-full right-0 mb-2",
-        "bottom-start": "top-full left-0 mt-2",
-        "bottom-end": "top-full right-0 mt-2"
-      };
       const rtlMirror = {
         "top-left": "top-right",
         "top-right": "top-left",
@@ -21578,7 +21655,6 @@ var init_Menu = __esm({
         "bottom-end": "bottom-start"
       };
       const effectivePosition = direction === "rtl" ? rtlMirror[position] ?? position : position;
-      const subMenuSideClass = direction === "rtl" ? "right-full mr-2" : "left-full ml-2";
       const triggerChild = React79__default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsx(Typography, { variant: "small", as: "span", children: trigger });
       const triggerElement = React79__default.cloneElement(
         triggerChild,
@@ -21587,94 +21663,83 @@ var init_Menu = __esm({
           onClick: handleToggle
         }
       );
-      const menuContainerStyles = cn(
-        "bg-card",
-        "border-[length:var(--border-width)] border-border",
-        "shadow-elevation-popover",
-        "rounded-sm",
-        "min-w-0 sm:min-w-[200px] max-w-[calc(100vw-1rem)] py-1"
-      );
-      const renderMenuItem = (item, hasSubMenu, index) => {
+      const renderMenuItems = (menuItems) => menuItems.map((item, index) => {
+        const isDivider = item.id === "divider" || item.label === "divider";
         const itemId = item.id ?? `item-${item.label.toLowerCase().replace(/\s+/g, "-")}-${index}`;
+        const hasSubMenu = !!(item.subMenu && item.subMenu.length > 0);
         const isDanger = item.variant === "danger";
-        return /* @__PURE__ */ jsx(
-          Box,
-          {
-            as: "button",
-            onClick: () => !item.disabled && handleItemClick({ ...item, id: itemId }),
-            "aria-disabled": item.disabled || void 0,
-            onMouseEnter: () => hasSubMenu && setActiveSubMenu(itemId),
-            "data-testid": item.event ? `action-${item.event}` : void 0,
-            className: cn(
-              "w-full flex items-center justify-between gap-3 px-4 py-2 text-start",
-              "text-sm transition-colors",
-              "hover:bg-muted",
-              "focus:outline-none focus:bg-muted",
-              "disabled:opacity-50 disabled:cursor-not-allowed",
-              item.disabled && "cursor-not-allowed",
-              isDanger && "text-error hover:bg-error/10"
-            ),
-            children: /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-3 flex-1 min-w-0", children: [
-              item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: item.icon, size: "sm", className: "flex-shrink-0" }) : /* @__PURE__ */ jsx(Icon, { icon: item.icon, size: "sm", className: "flex-shrink-0" })),
-              /* @__PURE__ */ jsx(
-                Typography,
-                {
-                  variant: "small",
-                  className: cn("flex-1", isDanger && "text-red-600"),
-                  children: item.label
+        if (isDivider) {
+          return /* @__PURE__ */ jsx(Divider, { className: "my-1" }, `divider-${index}`);
+        }
+        return /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              as: "button",
+              onClick: () => handleItemClick({ ...item, id: itemId }, itemId),
+              "aria-disabled": item.disabled || void 0,
+              onMouseEnter: (e) => {
+                if (hasSubMenu) {
+                  setActiveSubMenu(itemId);
+                  setActiveSubMenuRef(e.currentTarget);
                 }
+              },
+              "data-testid": item.event ? `action-${item.event}` : void 0,
+              className: cn(
+                "w-full flex items-center justify-between gap-3 px-4 py-2 text-start",
+                "text-sm transition-colors",
+                "hover:bg-muted",
+                "focus:outline-none focus:bg-muted",
+                "disabled:opacity-50 disabled:cursor-not-allowed",
+                item.disabled && "cursor-not-allowed",
+                isDanger && "text-error hover:bg-error/10"
               ),
-              item.badge !== void 0 && /* @__PURE__ */ jsx(Badge, { variant: "default", size: "sm", children: item.badge }),
-              hasSubMenu && /* @__PURE__ */ jsx(Icon, { name: direction === "rtl" ? "chevron-left" : "chevron-right", size: "sm", className: "flex-shrink-0" })
-            ] })
-          },
-          itemId
-        );
-      };
-      const renderMenuItems = (menuItems) => {
-        return menuItems.map((item, index) => {
-          const hasSubMenu = item.subMenu && item.subMenu.length > 0;
-          const isDivider = item.id === "divider" || item.label === "divider";
-          const itemId = item.id ?? `item-${item.label.toLowerCase().replace(/\s+/g, "-")}-${index}`;
-          if (isDivider) {
-            return /* @__PURE__ */ jsx(Divider, { className: "my-1" }, `divider-${index}`);
-          }
-          return /* @__PURE__ */ jsxs(Box, { children: [
-            renderMenuItem(item, !!hasSubMenu, index),
-            hasSubMenu && activeSubMenu === itemId && item.subMenu && /* @__PURE__ */ jsx(
-              Box,
-              {
-                className: cn(
-                  "absolute top-0 z-50",
-                  subMenuSideClass,
-                  menuContainerStyles
+              children: /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-3 flex-1 min-w-0", children: [
+                item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: item.icon, size: "sm", className: "flex-shrink-0" }) : /* @__PURE__ */ jsx(Icon, { icon: item.icon, size: "sm", className: "flex-shrink-0" })),
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "small",
+                    className: cn("flex-1", isDanger && "text-red-600"),
+                    children: item.label
+                  }
                 ),
-                children: renderMenuItems(item.subMenu)
-              }
-            )
-          ] }, itemId);
-        });
-      };
-      return /* @__PURE__ */ jsxs(Box, { className: "relative", children: [
+                item.badge !== void 0 && /* @__PURE__ */ jsx(Badge, { variant: "default", size: "sm", children: item.badge }),
+                hasSubMenu && /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    name: direction === "rtl" ? "chevron-left" : "chevron-right",
+                    size: "sm",
+                    className: "flex-shrink-0"
+                  }
+                )
+              ] })
+            }
+          ),
+          hasSubMenu && activeSubMenu === itemId && item.subMenu && /* @__PURE__ */ jsx(
+            SubMenu,
+            {
+              items: item.subMenu,
+              itemRef: activeSubMenuRef,
+              direction,
+              eventBus
+            }
+          )
+        ] }, itemId);
+      });
+      const panel = isOpen && triggerRect ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: menuRef,
+          className: cn("fixed z-50", menuContainerStyles, className),
+          style: computeMenuStyle(effectivePosition, triggerRect),
+          role: "menu",
+          children: renderMenuItems(items)
+        }
+      ) : null;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
         triggerElement,
-        isOpen && triggerRect && /* @__PURE__ */ jsx(
-          Box,
-          {
-            ref: menuRef,
-            className: cn(
-              "absolute z-50",
-              menuContainerStyles,
-              positionClasses[effectivePosition],
-              className
-            ),
-            style: {
-              left: effectivePosition.includes("left") ? 0 : "auto",
-              right: effectivePosition.includes("right") ? 0 : "auto"
-            },
-            role: "menu",
-            children: renderMenuItems(items)
-          }
-        )
+        panel && typeof document !== "undefined" ? createPortal(panel, document.body) : panel
       ] });
     };
     Menu.displayName = "Menu";
@@ -36080,7 +36145,6 @@ var init_DocumentViewer = __esm({
       showPrint = false,
       actions,
       documents,
-      entity,
       isLoading = false,
       error,
       className
@@ -42895,7 +42959,7 @@ function TraitSlot({
   size = "md",
   showTooltip = true,
   categoryColors,
-  tooltipFrameUrl,
+  tooltipFrameUrl = "",
   className,
   feedback,
   onItemDrop,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.29.0",
+  "version": "5.30.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [