@andreagiugni/tailwind-dashboard-ui 0.5.15 → 0.5.16

package/README.md

@@ -167,7 +167,7 @@ Legend: **(+native)** = also extends the element's native HTML attributes.
 | `Alert` | `variant` (success/error/warning/info), `title`, `message`, `showLink`, `linkHref`, `linkText`, `icon?` (override icon), (+native div) |
 | `Avatar` | `src`, `alt`, `size` (xsmall…xxlarge), `status` (online/offline/busy/none), `statusColor?`, (+native img) |
 | `AvatarText` | `children`, `className`, (+native div) |
-| `Dropdown` | `isOpen`, `onClose`, `children`, (+native div) |
+| `Dropdown` | `isOpen`, `onClose`, `children`, `portal?` (default `true`, prevents clipping inside tables/overflow containers), (+native div) |
 | `DropdownItem` | `variant` (default/primary/outline, like Button), `icon?`, `bgColor`/`textColor`/`borderColor` overrides, `tag` (a/button), `href`, `onClick`, `onItemClick`, `baseClassName` (full override) |
 | `Modal` | `isOpen`, `onClose`, `title?` (wrapping header aligned with close button), `showCloseButton`, `isFullscreen`, `closeOnBackdrop?`, `closeOnEsc?`; **alert preset** → `variant` (`success`/`info`/`warning`/`danger`) + `title`, `description`, `actionText?`, `onAction?`; (+native div) |
 | `Table` (composable) | `TableHeader` / `TableBody` / `TableRow` / `TableCell` with `children`, `isHeader` (cell), (+native table elements; `onClick` / `onDoubleClick` on rows & cells) |

package/dist/index.cjs

@@ -11,6 +11,7 @@ var chunkTF3G3E72_cjs = require('./chunk-TF3G3E72.cjs');
 var chunkYERNSNT4_cjs = require('./chunk-YERNSNT4.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var React5 = require('react');
+var reactDom = require('react-dom');
 var flatpickr = require('flatpickr');
 require('flatpickr/dist/flatpickr.css');
 
@@ -420,9 +421,13 @@ var Dropdown = ({
   onClose,
   children,
   className,
+  portal = true,
+  style,
   ...rest
 }) => {
   const dropdownRef = React5.useRef(null);
+  const anchorRef = React5.useRef(null);
+  const [position, setPosition] = React5.useState();
   React5.useEffect(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target) && !event.target.closest(".dropdown-toggle")) {
@@ -434,20 +439,57 @@ var Dropdown = ({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [onClose]);
+  React5.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__ */ jsxRuntime.jsx(
+  const menu = /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ref: dropdownRef,
       className: chunkYERNSNT4_cjs.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",
-        chunkTF3G3E72_cjs.layers.menu,
+        "rounded-xl border border-gray-200 bg-white shadow-theme-lg dark:border-gray-800 dark:bg-gray-dark",
+        portal ? chunkYERNSNT4_cjs.cn("fixed", chunkTF3G3E72_cjs.layers.portal) : chunkYERNSNT4_cjs.cn("absolute right-0 mt-2", chunkTF3G3E72_cjs.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { ref: anchorRef, "aria-hidden": "true", className: "pointer-events-none absolute" }),
+    reactDom.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 = {