analytica-frontend-lib 1.2.38 → 1.2.44

package/dist/NotificationCard/index.mjs

@@ -14,12 +14,14 @@ import { CaretRight, SignOut, User } from "phosphor-react";
 import {
   forwardRef as forwardRef2,
   useEffect as useEffect4,
+  useLayoutEffect,
   useRef,
   isValidElement,
   Children,
   cloneElement,
   useState as useState2
 } from "react";
+import { createPortal } from "react-dom";
 import { create as create2, useStore } from "zustand";
 
 // src/components/Button/Button.tsx
@@ -692,7 +694,7 @@ var DropdownMenu = ({
       ).filter((el) => el instanceof HTMLElement);
       if (items.length === 0) return;
       const focusedItem = document.activeElement;
-      const currentIndex = items.findIndex((item) => item === focusedItem);
+      const currentIndex = items.indexOf(focusedItem);
       let nextIndex;
       if (event.key === "ArrowDown") {
         nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
@@ -710,9 +712,14 @@ var DropdownMenu = ({
     }
   };
   const handleClickOutside = (event) => {
-    if (menuRef.current && !menuRef.current.contains(event.target)) {
-      setOpen(false);
+    const target = event.target;
+    if (menuRef.current?.contains(target)) {
+      return;
+    }
+    if (target instanceof Element && target.closest('[data-dropdown-content="true"]')) {
+      return;
     }
+    setOpen(false);
   };
   useEffect4(() => {
     if (open) {
@@ -734,40 +741,30 @@ var DropdownMenu = ({
   }, [propOpen]);
   return /* @__PURE__ */ jsx6("div", { className: "relative", ref: menuRef, children: injectStore(children, store) });
 };
-var DropdownMenuTrigger = ({
-  className,
-  children,
-  onClick,
-  store: externalStore,
-  ...props
-}) => {
+var DropdownMenuTrigger = forwardRef2(({ className, children, onClick, store: externalStore, ...props }, ref) => {
   const store = useDropdownStore(externalStore);
   const open = useStore(store, (s) => s.open);
   const toggleOpen = () => store.setState({ open: !open });
   return /* @__PURE__ */ jsx6(
-    "div",
+    "button",
     {
+      ref,
+      type: "button",
       onClick: (e) => {
         e.stopPropagation();
         toggleOpen();
-        if (onClick) onClick(e);
-      },
-      role: "button",
-      onKeyDown: (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          toggleOpen();
-          if (onClick) onClick(e);
-        }
+        onClick?.(e);
       },
-      tabIndex: 0,
       "aria-expanded": open,
-      className: cn(className),
+      className: cn(
+        "appearance-none bg-transparent border-none p-0",
+        className
+      ),
       ...props,
       children
     }
   );
-};
+});
 DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
 var ITEM_SIZE_CLASSES = {
   small: "text-sm",
@@ -808,11 +805,15 @@ var DropdownMenuContent = forwardRef2(
     sideOffset = 4,
     children,
     store: externalStore,
+    portal = false,
+    triggerRef,
     ...props
   }, ref) => {
     const store = useDropdownStore(externalStore);
     const open = useStore(store, (s) => s.open);
     const [isVisible, setIsVisible] = useState2(open);
+    const [portalPosition, setPortalPosition] = useState2({ top: 0, left: 0 });
+    const contentRef = useRef(null);
     useEffect4(() => {
       if (open) {
         setIsVisible(true);
@@ -821,18 +822,61 @@ var DropdownMenuContent = forwardRef2(
         return () => clearTimeout(timer);
       }
     }, [open]);
+    useLayoutEffect(() => {
+      if (portal && open && triggerRef?.current) {
+        const rect = triggerRef.current.getBoundingClientRect();
+        let top = rect.bottom + sideOffset;
+        let left = rect.left;
+        if (side === "left") {
+          left = rect.left - sideOffset;
+          top = rect.top;
+        } else if (side === "right") {
+          left = rect.right + sideOffset;
+          top = rect.top;
+        } else {
+          if (align === "end") {
+            left = rect.right;
+          } else if (align === "center") {
+            left = rect.left + rect.width / 2;
+          }
+          if (side === "top") {
+            top = rect.top - sideOffset;
+          }
+        }
+        setPortalPosition({ top, left });
+      }
+    }, [portal, open, triggerRef, align, side, sideOffset]);
     if (!isVisible) return null;
     const getPositionClasses = () => {
+      if (portal) {
+        return "fixed";
+      }
       const vertical = SIDE_CLASSES[side];
       const horizontal = ALIGN_CLASSES[align];
       return `absolute ${vertical} ${horizontal}`;
     };
+    const getPortalAlignStyle = () => {
+      if (!portal) return {};
+      const baseStyle = {
+        top: portalPosition.top
+      };
+      if (align === "end") {
+        baseStyle.right = window.innerWidth - portalPosition.left;
+      } else if (align === "center") {
+        baseStyle.left = portalPosition.left;
+        baseStyle.transform = "translateX(-50%)";
+      } else {
+        baseStyle.left = portalPosition.left;
+      }
+      return baseStyle;
+    };
     const variantClasses = MENUCONTENT_VARIANT_CLASSES[variant];
-    return /* @__PURE__ */ jsx6(
+    const content = /* @__PURE__ */ jsx6(
       "div",
       {
-        ref,
+        ref: portal ? contentRef : ref,
         role: "menu",
+        "data-dropdown-content": "true",
         className: `
         bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md border-border-100
         ${open ? "animate-in fade-in-0 zoom-in-95" : "animate-out fade-out-0 zoom-out-95"}
@@ -841,15 +885,21 @@ var DropdownMenuContent = forwardRef2(
         ${className}
       `,
         style: {
-          marginTop: side === "bottom" ? sideOffset : void 0,
-          marginBottom: side === "top" ? sideOffset : void 0,
-          marginLeft: side === "right" ? sideOffset : void 0,
-          marginRight: side === "left" ? sideOffset : void 0
+          ...portal ? getPortalAlignStyle() : {
+            marginTop: side === "bottom" ? sideOffset : void 0,
+            marginBottom: side === "top" ? sideOffset : void 0,
+            marginLeft: side === "right" ? sideOffset : void 0,
+            marginRight: side === "left" ? sideOffset : void 0
+          }
         },
         ...props,
         children
       }
     );
+    if (portal && typeof document !== "undefined") {
+      return createPortal(content, document.body);
+    }
+    return content;
   }
 );
 DropdownMenuContent.displayName = "DropdownMenuContent";