@andreagiugni/tailwind-dashboard-ui 0.5.15 → 0.5.17

package/README.md

@@ -167,11 +167,11 @@ 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) |
-| `Table` (data-driven) | pass `data` + `columns` (`key`, `header`, `sortable?`, `align?`, `render?`, `className?`) to get search + per-column sort + pagination: `rowsPerPage?` (max rows/page, default 10), `rowsPerPageOptions?`, `searchKeys?` (**search box shown only when provided**), `searchPlaceholder?`, `defaultSortKey?` / `defaultSortDirection?`, `pagination?`, `paginationAlign?` (`left`/`center`/`right`/`full`, default `right`), `showSizeSelector?`, `onRowClick?`, `getRowId?`, `emptyContent?` |
+| `Table` (data-driven) | pass `data` + `columns` (`key`, `header`, `sortable?`, `align?`, `render?`, `className?`) to get search + three-state per-column sort (neutral/ascending/descending) + pagination: `rowsPerPage?` (max rows/page, default 10), `rowsPerPageOptions?`, `searchKeys?` (**search box shown only when provided**), `searchPlaceholder?`, `defaultSortKey?` / `defaultSortDirection?`, `pagination?`, `paginationAlign?` (`left`/`center`/`right`/`full`, default `right`), `showSizeSelector?`, `onRowClick?`, `getRowId?`, `emptyContent?` |
 | `Pagination` | `currentPage`, `totalPages`, `onPageChange`, `align?` (`left`/`center`/`right`/`full` — `full` pins Previous/Next to the edges with page indices centered) |
 | `Breadcrumb` | `pageTitle`, `items?`, (+native) |
 | `ThemeToggleButton` | `theme?` (controlled), `onToggle?`, (+native button) |

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 = {
@@ -697,15 +739,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__ */ jsxRuntime.jsxs("span", { className: "inline-flex flex-col leading-none", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "10", height: "6", viewBox: "0 0 10 6", fill: "currentColor", "aria-hidden": "true", className: active && direction === "asc" ? on : off, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 0 9 5H1z" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "10", height: "6", viewBox: "0 0 10 6", fill: "currentColor", "aria-hidden": "true", className: active && direction === "desc" ? on : off, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 6 1 1h8z" }) })
-  ] });
+  const active = "text-brand-500";
+  const inactive = "text-gray-400 dark:text-gray-500";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      "data-sort-state": state,
+      className: "inline-flex shrink-0 flex-col items-center -space-y-1",
+      children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d: "M3.5 7.25 6 4.75l2.5 2.5",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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,
@@ -755,10 +845,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);
   };
@@ -836,8 +930,9 @@ function DataDrivenTable({
               TableCell,
               {
                 isHeader: true,
+                "aria-sort": col.sortable ? isActive ? sortDir === "asc" ? "ascending" : "descending" : "none" : void 0,
                 className: chunkYERNSNT4_cjs.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
                 ),
@@ -847,10 +942,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__ */ jsxRuntime.jsx(SortIcon, { active: isActive, direction: isActive ? sortDir : "asc" })
+                      /* @__PURE__ */ jsxRuntime.jsx(SortIcon, { state: isActive ? sortDir : "none" }),
+                      col.header
                     ]
                   }
                 ) : col.header