analytica-frontend-lib 1.2.38 → 1.2.44

package/dist/DropdownMenu/index.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, ButtonHTMLAttributes, HTMLAttributes } from 'react';
+import { ReactNode, ButtonHTMLAttributes, HTMLAttributes, RefObject } from 'react';
 import { StoreApi } from 'zustand';
 interface DropdownStore {
     open: boolean;
@@ -13,13 +13,10 @@ interface DropdownMenuProps {
     onOpenChange?: (open: boolean) => void;
 }
 declare const DropdownMenu: ({ children, open: propOpen, onOpenChange, }: DropdownMenuProps) => import("react/jsx-runtime").JSX.Element;
-declare const DropdownMenuTrigger: {
-    ({ className, children, onClick, store: externalStore, ...props }: HTMLAttributes<HTMLDivElement> & {
-        disabled?: boolean;
-        store?: DropdownStoreApi;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const DropdownMenuTrigger: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
+    disabled?: boolean;
+    store?: DropdownStoreApi;
+} & import("react").RefAttributes<HTMLButtonElement>>;
 declare const MenuLabel: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     inset?: boolean;
     store?: DropdownStoreApi;
@@ -30,6 +27,8 @@ declare const DropdownMenuContent: import("react").ForwardRefExoticComponent<HTM
     variant?: "menu" | "profile";
     sideOffset?: number;
     store?: DropdownStoreApi;
+    portal?: boolean;
+    triggerRef?: RefObject<HTMLElement | null>;
 } & import("react").RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuItem: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     inset?: boolean;

package/dist/DropdownMenu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,SAAS,EACT,oBAAoB,EAGpB,cAAc,EAQf,MAAM,OAAO,CAAC;AACf,OAAO,EAAU,QAAQ,EAAY,MAAM,SAAS,CAAC;AASrD,UAAU,aAAa;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAClC;AAED,KAAK,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAEhD,wBAAgB,mBAAmB,IAAI,gBAAgB,CAKtD;AAED,eAAO,MAAM,gBAAgB,GAAI,gBAAgB,gBAAgB,qBAQhE,CAAC;AAoDF,UAAU,iBAAiB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,QAAA,MAAM,YAAY,GAAI,6CAInB,iBAAiB,4CAoFnB,CAAC;AAGF,QAAA,MAAM,mBAAmB;uEAMtB,cAAc,CAAC,cAAc,CAAC,GAAG;QAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,KAAK,CAAC,EAAE,gBAAgB,CAAC;KAC1B;;CA6BA,CAAC;AA0BF,QAAA,MAAM,SAAS;YAGH,OAAO;YACP,gBAAgB;kDAU1B,CAAC;AAGH,QAAA,MAAM,mBAAmB;YAGb,OAAO,GAAG,QAAQ,GAAG,KAAK;WAC3B,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM;cAChC,MAAM,GAAG,SAAS;iBACf,MAAM;YACX,gBAAgB;kDA8D3B,CAAC;AAGF,QAAA,MAAM,gBAAgB;YAGV,OAAO;WACR,OAAO,GAAG,QAAQ;eACd,SAAS;gBACR,SAAS;eACV,OAAO;cACR,SAAS,GAAG,MAAM;YACpB,gBAAgB;mBACT,OAAO;kDA8FzB,CAAC;AAGF,QAAA,MAAM,qBAAqB;YAEkB,gBAAgB;kDAO3D,CAAC;AAIH,QAAA,MAAM,kBAAkB;YAE8B,gBAAgB;qDA0BpE,CAAC;AAGH,QAAA,MAAM,iBAAiB;UAGb,MAAM;WACL,MAAM;eACF,MAAM,GAAG,IAAI;YAChB,gBAAgB;kDAuC1B,CAAC;AAGH,QAAA,MAAM,eAAe;gBAGL,MAAM;mBACH,MAAM;oBACL,MAAM;YACd,gBAAgB;kDAwC3B,CAAC;AAGF,QAAA,MAAM,kBAAkB;yCAGrB,cAAc,CAAC,cAAc,CAAC,GAAG;QAAE,KAAK,CAAC,EAAE,gBAAgB,CAAA;KAAE;;CAuF/D,CAAC;AAGF,QAAA,MAAM,kBAAkB;YAEqB,gBAAgB;kDAO3D,CAAC;AAGH,QAAA,MAAM,iBAAiB;uEAMpB,cAAc,CAAC,iBAAiB,CAAC,GAAG;QACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,KAAK,CAAC,EAAE,gBAAgB,CAAC;KAC1B;;CAqBA,CAAC;AAIF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAEL,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,EAChB,SAAS,EACT,qBAAqB,EAGrB,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,GAChB,CAAC"}
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,SAAS,EACT,oBAAoB,EAIpB,cAAc,EAQd,SAAS,EAEV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAU,QAAQ,EAAY,MAAM,SAAS,CAAC;AASrD,UAAU,aAAa;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAClC;AAED,KAAK,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAEhD,wBAAgB,mBAAmB,IAAI,gBAAgB,CAKtD;AAED,eAAO,MAAM,gBAAgB,GAAI,gBAAgB,gBAAgB,qBAQhE,CAAC;AAoDF,UAAU,iBAAiB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,QAAA,MAAM,YAAY,GAAI,6CAInB,iBAAiB,4CA+FnB,CAAC;AAGF,QAAA,MAAM,mBAAmB;eAGV,OAAO;YACV,gBAAgB;qDA2B1B,CAAC;AA0BH,QAAA,MAAM,SAAS;YAGH,OAAO;YACP,gBAAgB;kDAU1B,CAAC;AAGH,QAAA,MAAM,mBAAmB;YAGb,OAAO,GAAG,QAAQ,GAAG,KAAK;WAC3B,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM;cAChC,MAAM,GAAG,SAAS;iBACf,MAAM;YACX,gBAAgB;aACf,OAAO;iBACH,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC;kDAkI7C,CAAC;AAGF,QAAA,MAAM,gBAAgB;YAGV,OAAO;WACR,OAAO,GAAG,QAAQ;eACd,SAAS;gBACR,SAAS;eACV,OAAO;cACR,SAAS,GAAG,MAAM;YACpB,gBAAgB;mBACT,OAAO;kDA8FzB,CAAC;AAGF,QAAA,MAAM,qBAAqB;YAEkB,gBAAgB;kDAO3D,CAAC;AAIH,QAAA,MAAM,kBAAkB;YAE8B,gBAAgB;qDA0BpE,CAAC;AAGH,QAAA,MAAM,iBAAiB;UAGb,MAAM;WACL,MAAM;eACF,MAAM,GAAG,IAAI;YAChB,gBAAgB;kDAuC1B,CAAC;AAGH,QAAA,MAAM,eAAe;gBAGL,MAAM;mBACH,MAAM;oBACL,MAAM;YACd,gBAAgB;kDAwC3B,CAAC;AAGF,QAAA,MAAM,kBAAkB;yCAGrB,cAAc,CAAC,cAAc,CAAC,GAAG;QAAE,KAAK,CAAC,EAAE,gBAAgB,CAAA;KAAE;;CAuF/D,CAAC;AAGF,QAAA,MAAM,kBAAkB;YAEqB,gBAAgB;kDAO3D,CAAC;AAGH,QAAA,MAAM,iBAAiB;uEAMpB,cAAc,CAAC,iBAAiB,CAAC,GAAG;QACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,KAAK,CAAC,EAAE,gBAAgB,CAAC;KAC1B;;CAqBA,CAAC;AAIF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAEL,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,EAChB,SAAS,EACT,qBAAqB,EAGrB,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,GAChB,CAAC"}

package/dist/DropdownMenu/index.js

@@ -38,6 +38,7 @@ __export(DropdownMenu_exports, {
 module.exports = __toCommonJS(DropdownMenu_exports);
 var import_phosphor_react3 = require("phosphor-react");
 var import_react5 = require("react");
+var import_react_dom = require("react-dom");
 var import_zustand2 = require("zustand");
 
 // src/utils/utils.ts
@@ -717,7 +718,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;
@@ -735,9 +736,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_react5.useEffect)(() => {
     if (open) {
@@ -759,40 +765,30 @@ var DropdownMenu = ({
   }, [propOpen]);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "relative", ref: menuRef, children: injectStore(children, store) });
 };
-var DropdownMenuTrigger = ({
-  className,
-  children,
-  onClick,
-  store: externalStore,
-  ...props
-}) => {
+var DropdownMenuTrigger = (0, import_react5.forwardRef)(({ className, children, onClick, store: externalStore, ...props }, ref) => {
   const store = useDropdownStore(externalStore);
   const open = (0, import_zustand2.useStore)(store, (s) => s.open);
   const toggleOpen = () => store.setState({ open: !open });
   return /* @__PURE__ */ (0, import_jsx_runtime6.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",
@@ -833,11 +829,15 @@ var DropdownMenuContent = (0, import_react5.forwardRef)(
     sideOffset = 4,
     children,
     store: externalStore,
+    portal = false,
+    triggerRef,
     ...props
   }, ref) => {
     const store = useDropdownStore(externalStore);
     const open = (0, import_zustand2.useStore)(store, (s) => s.open);
     const [isVisible, setIsVisible] = (0, import_react5.useState)(open);
+    const [portalPosition, setPortalPosition] = (0, import_react5.useState)({ top: 0, left: 0 });
+    const contentRef = (0, import_react5.useRef)(null);
     (0, import_react5.useEffect)(() => {
       if (open) {
         setIsVisible(true);
@@ -846,18 +846,61 @@ var DropdownMenuContent = (0, import_react5.forwardRef)(
         return () => clearTimeout(timer);
       }
     }, [open]);
+    (0, import_react5.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_runtime6.jsx)(
+    const content = /* @__PURE__ */ (0, import_jsx_runtime6.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"}
@@ -866,15 +909,21 @@ var DropdownMenuContent = (0, import_react5.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";