@andreagiugni/tailwind-dashboard-ui 0.5.17 → 0.5.18

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`, `portal?` (default `true`, prevents clipping inside tables/overflow containers), (+native div) |
+| `Dropdown` | `isOpen`, `onClose`, `children`, `portal?` (default `true`, prevents clipping inside cards/tables/overflow containers), `triggerRef?` (optional custom trigger anchor), (+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

@@ -416,12 +416,20 @@ var AvatarText = ({
     }
   );
 };
+function getTriggerElement(anchor, triggerRef) {
+  if (triggerRef?.current) return triggerRef.current;
+  if (!anchor) return null;
+  const previous = anchor.previousElementSibling;
+  const adjacentTrigger = previous?.matches(".dropdown-toggle, button, [aria-haspopup='menu']") ? previous : previous?.querySelector(".dropdown-toggle, button, [aria-haspopup='menu']");
+  return adjacentTrigger ?? anchor.parentElement?.querySelector(".dropdown-toggle");
+}
 var Dropdown = ({
   isOpen,
   onClose,
   children,
   className,
   portal = true,
+  triggerRef,
   style,
   ...rest
 }) => {
@@ -430,7 +438,8 @@ var Dropdown = ({
   const [position, setPosition] = React5.useState();
   React5.useEffect(() => {
     const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target) && !event.target.closest(".dropdown-toggle")) {
+      const trigger = getTriggerElement(anchorRef.current, triggerRef);
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target) && !trigger?.contains(event.target)) {
         onClose();
       }
     };
@@ -438,13 +447,13 @@ var Dropdown = ({
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, [onClose]);
+  }, [onClose, triggerRef]);
   React5.useLayoutEffect(() => {
     if (!isOpen || !portal) return;
     const updatePosition = () => {
       const anchor = anchorRef.current;
       const menu2 = dropdownRef.current;
-      const trigger = anchor?.parentElement?.querySelector(".dropdown-toggle");
+      const trigger = getTriggerElement(anchor, triggerRef);
       if (!anchor || !menu2) return;
       const triggerRect = (trigger ?? anchor).getBoundingClientRect();
       const menuRect = menu2.getBoundingClientRect();
@@ -465,7 +474,7 @@ var Dropdown = ({
       window.removeEventListener("resize", updatePosition);
       window.removeEventListener("scroll", updatePosition, true);
     };
-  }, [isOpen, portal]);
+  }, [isOpen, portal, triggerRef]);
   if (!isOpen) return null;
   const menu = /* @__PURE__ */ jsxRuntime.jsx(
     "div",