analytica-frontend-lib 1.2.38 → 1.2.44

package/dist/Search/index.js

@@ -29,6 +29,7 @@ var import_react6 = require("react");
 // src/components/DropdownMenu/DropdownMenu.tsx
 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
@@ -708,7 +709,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;
@@ -726,9 +727,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) {
@@ -750,40 +756,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",
@@ -824,11 +820,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);
@@ -837,18 +837,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"}
@@ -857,15 +900,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";