@andreagiugni/tailwind-dashboard-ui 0.5.17 → 0.5.18

package/dist/index.d.cts

@@ -83,6 +83,8 @@ interface DropdownProps extends React.HTMLAttributes<HTMLDivElement> {
     onClose: () => void;
     /** Render under document.body so menus are not clipped by overflow containers. Default: true. */
     portal?: boolean;
+    /** Optional ref to the trigger element. Useful when the trigger is not adjacent to the menu. */
+    triggerRef?: React.RefObject<HTMLElement | null>;
 }
 declare const Dropdown: React.FC<DropdownProps>;
 

package/dist/index.d.ts

@@ -83,6 +83,8 @@ interface DropdownProps extends React.HTMLAttributes<HTMLDivElement> {
     onClose: () => void;
     /** Render under document.body so menus are not clipped by overflow containers. Default: true. */
     portal?: boolean;
+    /** Optional ref to the trigger element. Useful when the trigger is not adjacent to the menu. */
+    triggerRef?: React.RefObject<HTMLElement | null>;
 }
 declare const Dropdown: React.FC<DropdownProps>;
 

package/dist/index.js

@@ -410,12 +410,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
 }) => {
@@ -424,7 +432,8 @@ var Dropdown = ({
   const [position, setPosition] = useState();
   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();
       }
     };
@@ -432,13 +441,13 @@ var Dropdown = ({
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, [onClose]);
+  }, [onClose, triggerRef]);
   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();
@@ -459,7 +468,7 @@ var Dropdown = ({
       window.removeEventListener("resize", updatePosition);
       window.removeEventListener("scroll", updatePosition, true);
     };
-  }, [isOpen, portal]);
+  }, [isOpen, portal, triggerRef]);
   if (!isOpen) return null;
   const menu = /* @__PURE__ */ jsx(
     "div",