@andreagiugni/tailwind-dashboard-ui 0.5.14 → 0.5.16

package/dist/index.d.cts

@@ -81,6 +81,8 @@ declare const AvatarText: React.FC<AvatarTextProps>;
 interface DropdownProps extends React.HTMLAttributes<HTMLDivElement> {
     isOpen: boolean;
     onClose: () => void;
+    /** Render under document.body so menus are not clipped by overflow containers. Default: true. */
+    portal?: boolean;
 }
 declare const Dropdown: React.FC<DropdownProps>;
 

package/dist/index.d.ts

@@ -81,6 +81,8 @@ declare const AvatarText: React.FC<AvatarTextProps>;
 interface DropdownProps extends React.HTMLAttributes<HTMLDivElement> {
     isOpen: boolean;
     onClose: () => void;
+    /** Render under document.body so menus are not clipped by overflow containers. Default: true. */
+    portal?: boolean;
 }
 declare const Dropdown: React.FC<DropdownProps>;
 

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 export { BarChart } from './chunk-YAKIMPXZ.js';
 export { LineChart } from './chunk-NWIOJGF7.js';
-export { Calendar, Modal } from './chunk-DBV63VHC.js';
+export { Calendar, Modal } from './chunk-QGLKSM7S.js';
 export { CountryMap } from './chunk-R66LONPQ.js';
 export { Editor } from './chunk-DXUWFHPF.js';
 export { ColorPicker } from './chunk-X3OP55FG.js';
@@ -9,7 +9,8 @@ import { layers } from './chunk-VX7S6VYG.js';
 import { cn } from './chunk-ZLIYUUA4.js';
 export { cn } from './chunk-ZLIYUUA4.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React5, { useRef, useEffect, useState, useCallback, useId, useMemo } from 'react';
+import React5, { useRef, useState, useEffect, useLayoutEffect, useCallback, useId, useMemo } from 'react';
+import { createPortal } from 'react-dom';
 import flatpickr from 'flatpickr';
 import 'flatpickr/dist/flatpickr.css';
 
@@ -414,9 +415,13 @@ var Dropdown = ({
   onClose,
   children,
   className,
+  portal = true,
+  style,
   ...rest
 }) => {
   const dropdownRef = useRef(null);
+  const anchorRef = useRef(null);
+  const [position, setPosition] = useState();
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target) && !event.target.closest(".dropdown-toggle")) {
@@ -428,20 +433,57 @@ var Dropdown = ({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [onClose]);
+  useLayoutEffect(() => {
+    if (!isOpen || !portal) return;
+    const updatePosition = () => {
+      const anchor = anchorRef.current;
+      const menu2 = dropdownRef.current;
+      const trigger = anchor?.parentElement?.querySelector(".dropdown-toggle");
+      if (!anchor || !menu2) return;
+      const triggerRect = (trigger ?? anchor).getBoundingClientRect();
+      const menuRect = menu2.getBoundingClientRect();
+      const gap = 8;
+      const viewportPadding = 8;
+      const fitsBelow = triggerRect.bottom + gap + menuRect.height <= window.innerHeight - viewportPadding;
+      const top = fitsBelow ? triggerRect.bottom + gap : Math.max(viewportPadding, triggerRect.top - gap - menuRect.height);
+      const left = Math.min(
+        window.innerWidth - viewportPadding - menuRect.width,
+        Math.max(viewportPadding, triggerRect.right - menuRect.width)
+      );
+      setPosition({ top, left });
+    };
+    updatePosition();
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [isOpen, portal]);
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsx(
+  const menu = /* @__PURE__ */ jsx(
     "div",
     {
       ref: dropdownRef,
       className: cn(
-        "absolute right-0 mt-2 rounded-xl border border-gray-200 bg-white shadow-theme-lg dark:border-gray-800 dark:bg-gray-dark",
-        layers.menu,
+        "rounded-xl border border-gray-200 bg-white shadow-theme-lg dark:border-gray-800 dark:bg-gray-dark",
+        portal ? cn("fixed", layers.portal) : cn("absolute right-0 mt-2", layers.menu),
         className
       ),
+      style: {
+        ...portal && !position ? { visibility: "hidden" } : void 0,
+        ...portal ? position : void 0,
+        ...style
+      },
       ...rest,
       children
     }
   );
+  if (!portal || typeof document === "undefined") return menu;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { ref: anchorRef, "aria-hidden": "true", className: "pointer-events-none absolute" }),
+    createPortal(menu, document.body)
+  ] });
 };
 var variantBase = "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm font-medium transition";
 var variantClasses3 = {