analytica-frontend-lib 1.2.38 → 1.2.44

package/dist/ActivityFilters/index.js

@@ -1661,6 +1661,7 @@ var Radio_default = Radio;
 // src/components/DropdownMenu/DropdownMenu.tsx
 var import_phosphor_react5 = require("phosphor-react");
 var import_react8 = require("react");
+var import_react_dom = require("react-dom");
 var import_zustand3 = require("zustand");
 
 // src/components/ThemeToggle/ThemeToggle.tsx
@@ -1925,7 +1926,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;
@@ -1943,9 +1944,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);
   };
   (0, import_react8.useEffect)(() => {
     if (open) {
@@ -1967,40 +1973,30 @@ var DropdownMenu = ({
   }, [propOpen]);
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "relative", ref: menuRef, children: injectStore2(children, store) });
 };
-var DropdownMenuTrigger = ({
-  className,
-  children,
-  onClick,
-  store: externalStore,
-  ...props
-}) => {
+var DropdownMenuTrigger = (0, import_react8.forwardRef)(({ className, children, onClick, store: externalStore, ...props }, ref) => {
   const store = useDropdownStore(externalStore);
   const open = (0, import_zustand3.useStore)(store, (s) => s.open);
   const toggleOpen = () => store.setState({ open: !open });
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    "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",
@@ -2041,11 +2037,15 @@ var DropdownMenuContent = (0, import_react8.forwardRef)(
     sideOffset = 4,
     children,
     store: externalStore,
+    portal = false,
+    triggerRef,
     ...props
   }, ref) => {
     const store = useDropdownStore(externalStore);
     const open = (0, import_zustand3.useStore)(store, (s) => s.open);
     const [isVisible, setIsVisible] = (0, import_react8.useState)(open);
+    const [portalPosition, setPortalPosition] = (0, import_react8.useState)({ top: 0, left: 0 });
+    const contentRef = (0, import_react8.useRef)(null);
     (0, import_react8.useEffect)(() => {
       if (open) {
         setIsVisible(true);
@@ -2054,18 +2054,61 @@ var DropdownMenuContent = (0, import_react8.forwardRef)(
         return () => clearTimeout(timer);
       }
     }, [open]);
+    (0, import_react8.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__ */ (0, import_jsx_runtime11.jsx)(
+    const content = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "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"}
@@ -2074,15 +2117,21 @@ var DropdownMenuContent = (0, import_react8.forwardRef)(
         ${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 (0, import_react_dom.createPortal)(content, document.body);
+    }
+    return content;
   }
 );
 DropdownMenuContent.displayName = "DropdownMenuContent";
@@ -4332,6 +4381,8 @@ var CardAccordation = (0, import_react11.forwardRef)(
     onToggleExpanded,
     value,
     disabled = false,
+    triggerClassName,
+    contentClassName,
     ...props
   }, ref) => {
     const [internalExpanded, setInternalExpanded] = (0, import_react11.useState)(defaultExpanded);
@@ -4380,7 +4431,8 @@ var CardAccordation = (0, import_react11.forwardRef)(
               disabled,
               className: cn(
                 "w-full cursor-pointer not-aria-expanded:rounded-xl aria-expanded:rounded-t-xl flex items-center justify-between gap-3 text-left transition-colors duration-200 focus:outline-none focus:border-2 focus:border-primary-950 focus:ring-inset px-2",
-                disabled && "cursor-not-allowed text-text-400"
+                disabled && "cursor-not-allowed text-text-400",
+                triggerClassName
               ),
               "aria-expanded": isExpanded,
               "aria-controls": contentId,
@@ -4415,7 +4467,7 @@ var CardAccordation = (0, import_react11.forwardRef)(
               ),
               "data-testid": "accordion-content",
               "data-value": value,
-              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "p-4 pt-0", children })
+              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("p-4 pt-0", contentClassName), children })
             }
           )
         ]