@andreagiugni/tailwind-dashboard-ui 0.5.16 → 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",
@@ -733,15 +742,63 @@ var alignClass = {
   right: "text-right"
 };
 function SortIcon({
-  active,
-  direction
+  state
 }) {
-  const on = "text-brand-500";
-  const off = "text-gray-400 dark:text-gray-600";
-  return /* @__PURE__ */ jsxs("span", { className: "inline-flex flex-col leading-none", children: [
-    /* @__PURE__ */ jsx("svg", { width: "10", height: "6", viewBox: "0 0 10 6", fill: "currentColor", "aria-hidden": "true", className: active && direction === "asc" ? on : off, children: /* @__PURE__ */ jsx("path", { d: "M5 0 9 5H1z" }) }),
-    /* @__PURE__ */ jsx("svg", { width: "10", height: "6", viewBox: "0 0 10 6", fill: "currentColor", "aria-hidden": "true", className: active && direction === "desc" ? on : off, children: /* @__PURE__ */ jsx("path", { d: "M5 6 1 1h8z" }) })
-  ] });
+  const active = "text-brand-500";
+  const inactive = "text-gray-400 dark:text-gray-500";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-sort-state": state,
+      className: "inline-flex shrink-0 flex-col items-center -space-y-1",
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            "data-sort-direction": "asc",
+            width: "12",
+            height: "12",
+            viewBox: "0 0 12 12",
+            fill: "none",
+            "aria-hidden": "true",
+            className: state === "asc" ? active : inactive,
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M3.5 7.25 6 4.75l2.5 2.5",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            "data-sort-direction": "desc",
+            width: "12",
+            height: "12",
+            viewBox: "0 0 12 12",
+            fill: "none",
+            "aria-hidden": "true",
+            className: state === "desc" ? active : inactive,
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "m3.5 4.75 2.5 2.5 2.5-2.5",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
 }
 function DataDrivenTable({
   data,
@@ -791,10 +848,14 @@ function DataDrivenTable({
   const pageRows = pagination ? filtered.slice(start, start + pageSize) : filtered;
   const toggleSort = (col) => {
     if (!col.sortable) return;
-    if (sortKey === col.key) setSortDir((d) => d === "asc" ? "desc" : "asc");
-    else {
+    if (sortKey !== col.key) {
       setSortKey(col.key);
       setSortDir("asc");
+    } else if (sortDir === "asc") {
+      setSortDir("desc");
+    } else {
+      setSortKey(void 0);
+      setSortDir("asc");
     }
     setPage(1);
   };
@@ -872,8 +933,9 @@ function DataDrivenTable({
               TableCell,
               {
                 isHeader: true,
+                "aria-sort": col.sortable ? isActive ? sortDir === "asc" ? "ascending" : "descending" : "none" : void 0,
                 className: cn(
-                  "whitespace-nowrap px-5 py-3 text-xs font-semibold text-gray-700 dark:text-gray-300",
+                  "whitespace-nowrap px-5 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400",
                   alignClass[col.align ?? "left"],
                   col.className
                 ),
@@ -883,10 +945,10 @@ function DataDrivenTable({
                     type: "button",
                     onClick: () => toggleSort(col),
                     "aria-label": `Sort by ${typeof col.header === "string" ? col.header : col.key}`,
-                    className: "inline-flex select-none items-center gap-1.5 hover:text-gray-900 dark:hover:text-white",
+                    className: "inline-flex select-none items-center gap-2 text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200",
                     children: [
-                      col.header,
-                      /* @__PURE__ */ jsx(SortIcon, { active: isActive, direction: isActive ? sortDir : "asc" })
+                      /* @__PURE__ */ jsx(SortIcon, { state: isActive ? sortDir : "none" }),
+                      col.header
                     ]
                   }
                 ) : col.header