@flanksource/clicky-ui 0.2.18 → 0.2.20

package/dist/data/DataTable.cjs

@@ -648,7 +648,7 @@ function DataTableInner({
   return /* @__PURE__ */ jsxRuntime.jsx(densityProvider.DensityValueProvider, { density: densityOverride ?? "comfortable", children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: utils.cn("flex min-h-0 flex-col gap-3", className),
+      className: utils.cn("flex min-h-0 min-w-0 flex-col gap-3", className),
       "data-density": densityOverride,
       children: [
         showFilterBar && /* @__PURE__ */ jsxRuntime.jsx(
@@ -671,11 +671,11 @@ function DataTableInner({
           "div",
           {
             className: utils.cn(
-              "overflow-auto rounded-md border border-border",
+              "max-w-full overflow-auto overscroll-x-contain rounded-md border border-border",
               scrollContainerClassName ?? "min-h-0 flex-1"
             ),
             "aria-busy": loading || void 0,
-            children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-max table-auto text-left text-sm", children: [
+            children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-max min-w-full table-auto text-left text-sm", children: [
               /* @__PURE__ */ jsxRuntime.jsx("colgroup", { children: visibleColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
                 "col",
                 {
@@ -736,7 +736,7 @@ function DataTableInner({
                         role: "separator",
                         "aria-label": `Resize ${labelText(column)} column`,
                         "aria-orientation": "vertical",
-                        className: "absolute right-0 top-0 flex h-full w-3 cursor-col-resize touch-none items-center justify-center border-r border-border/70 bg-gradient-to-l from-border/30 to-transparent transition-colors hover:border-primary hover:from-primary/20",
+                        className: "absolute right-0 top-0 hidden h-full w-3 cursor-col-resize touch-none items-center justify-center border-r border-border/70 bg-gradient-to-l from-border/30 to-transparent transition-colors hover:border-primary hover:from-primary/20 md:flex",
                         onClick: (event) => {
                           event.preventDefault();
                           event.stopPropagation();
@@ -935,9 +935,9 @@ function DataTablePaginationFooter({
   const rangeStart = total === 0 || !hasVisibleRows ? 0 : safePage * pageSize + 1;
   const rangeEnd = total != null && hasVisibleRows ? Math.min(total, rangeStart + Math.max(visibleRowCount - 1, 0)) : visibleRowCount;
   const rangeLabel = total != null ? `${rangeStart}-${rangeEnd} of ${total}` : `${visibleRowCount} row${visibleRowCount === 1 ? "" : "s"}`;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-9 flex-wrap items-center justify-between gap-3 border-t border-border/70 px-1 pt-2 text-xs text-muted-foreground", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-9 flex-col items-stretch gap-3 border-t border-border/70 px-1 pt-2 text-xs text-muted-foreground sm:flex-row sm:flex-wrap sm:items-center sm:justify-between", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-live": "polite", children: loading ? loadingMessage : rangeLabel }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2 sm:gap-3", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-1.5", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Rows per page" }),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -1075,7 +1075,7 @@ function HeaderFilterMenu({
     {
       role: "dialog",
       "aria-label": `${label} column filter`,
-      className: "fixed z-50 rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-lg shadow-black/5",
+      className: "fixed z-50 max-h-[calc(100vh-1rem)] max-w-[calc(100vw-1rem)] overflow-auto rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-lg shadow-black/5",
       style: { left: anchor.x, top: anchor.y },
       onClick: (event) => event.stopPropagation(),
       onContextMenu: (event) => event.preventDefault(),
@@ -1167,7 +1167,7 @@ function ColumnVisibilityMenu({
     {
       role: "menu",
       "aria-label": "Column menu",
-      className: "fixed z-50 min-w-[16rem] rounded-md border border-border bg-popover p-1.5 text-popover-foreground shadow-lg shadow-black/5",
+      className: "fixed z-50 max-h-[calc(100vh-1rem)] min-w-[16rem] max-w-[calc(100vw-1rem)] overflow-auto rounded-md border border-border bg-popover p-1.5 text-popover-foreground shadow-lg shadow-black/5",
       style: { left: anchor.x, top: anchor.y },
       onClick: (event) => event.stopPropagation(),
       onContextMenu: (event) => event.preventDefault(),
@@ -1275,53 +1275,76 @@ function ColumnVisibilityMenu({
     }
   );
 }
+function groupMenuActions(actions) {
+  const groups = [];
+  for (const action of actions) {
+    const section = action.section ?? "Download";
+    let group = groups.find((g) => g.section === section);
+    if (!group) {
+      group = { section, actions: [] };
+      groups.push(group);
+    }
+    group.actions.push(action);
+  }
+  return groups;
+}
 function MenuActionSection({
   actions,
   separated,
   onClose
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn(separated && "mt-1 border-t border-border pt-1"), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground", children: "Download" }),
-    actions.map((action) => {
-      const hasDescription = Boolean(action.description);
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          role: "menuitem",
-          disabled: action.disabled,
-          className: utils.cn(
-            "flex w-full gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none",
-            hasDescription ? "items-start" : "items-center",
-            action.disabled && "cursor-not-allowed opacity-50"
-          ),
-          onClick: () => {
-            if (action.disabled) return;
-            action.onSelect();
-            onClose();
-          },
-          children: [
-            action.icon && /* @__PURE__ */ jsxRuntime.jsx(
-              Icon.Icon,
-              {
-                icon: action.icon,
-                className: utils.cn(
-                  "shrink-0 text-sm",
-                  hasDescription && "mt-0.5",
-                  action.iconClassName ?? "text-muted-foreground"
-                )
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn(hasDescription && "font-medium"), children: action.label }),
-              action.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: action.description })
-            ] })
-          ]
-        },
-        action.id
-      );
-    })
-  ] });
+  const groups = groupMenuActions(actions);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: groups.map((group, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        (separated || index > 0) && "mt-1 border-t border-border pt-1"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground", children: group.section }),
+        group.actions.map((action) => {
+          const hasDescription = Boolean(action.description);
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              disabled: action.disabled,
+              className: utils.cn(
+                "flex w-full gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none",
+                hasDescription ? "items-start" : "items-center",
+                action.disabled && "cursor-not-allowed opacity-50"
+              ),
+              onClick: () => {
+                if (action.disabled) return;
+                action.onSelect();
+                onClose();
+              },
+              children: [
+                action.icon && /* @__PURE__ */ jsxRuntime.jsx(
+                  Icon.Icon,
+                  {
+                    icon: action.icon,
+                    className: utils.cn(
+                      "shrink-0 text-sm",
+                      hasDescription && "mt-0.5",
+                      action.iconClassName ?? "text-muted-foreground"
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn(hasDescription && "font-medium"), children: action.label }),
+                  action.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: action.description })
+                ] })
+              ]
+            },
+            action.id
+          );
+        })
+      ]
+    },
+    group.section
+  )) });
 }
 function DensityMenuSection({
   densityOverride,