@eifi1/ui-kit 0.11.0 → 0.13.0

package/dist/components/data-table.js

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createElement } from "react";
-import { Fragment as Fragment2, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment2, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import {
   ArrowDown,
@@ -10,9 +10,11 @@ import {
   ChevronDown,
   ChevronRight,
   Filter,
+  Pencil,
+  Trash2,
   X
 } from "lucide-react";
-import { Card, Spinner } from "./ui.js";
+import { Card, IconButton, Spinner } from "./ui.js";
 import { cn } from "../lib/cn.js";
 import {
   defaultFilterState,
@@ -52,6 +54,22 @@ function dataAttrsOf(props) {
   for (const [k, v] of Object.entries(props)) if (k.startsWith("data-") && k !== "data-col") out[k] = v;
   return out;
 }
+const ROW_ACTIONS_KEY = "__rowActions";
+function resolveRowAction(action, index, labels) {
+  const tone = action.tone ?? (action.kind === "delete" ? "danger" : "default");
+  return {
+    key: action.kind ?? `${index}:${action.label ?? ""}`,
+    label: action.label ?? (action.kind === "edit" ? labels.edit : action.kind === "delete" ? labels.delete : ""),
+    icon: action.icon ?? (action.kind === "edit" ? /* @__PURE__ */ jsx(Pencil, {}) : action.kind === "delete" ? /* @__PURE__ */ jsx(Trash2, {}) : null),
+    tone,
+    swipe: action.swipe ?? (tone === "danger" ? "start" : "end"),
+    action
+  };
+}
+async function runRowAction(action, row) {
+  if (action.confirm && !await action.confirm(row)) return;
+  action.onAction(row);
+}
 function physicalSwipe(actions, dir) {
   const rtl = dir === "rtl";
   return {
@@ -76,10 +94,14 @@ function cleanAttrs(attrs) {
   for (const [k, v] of Object.entries(attrs)) if (v !== void 0) out[k] = v;
   return out;
 }
-function columnLabel(col) {
+function columnLabel(col, labels) {
+  if (col.key === ROW_ACTIONS_KEY && labels) return labels.actions;
   return typeof col.header === "string" ? col.header : col.key;
 }
 const OWN_CONTROL = 'a[href],button,input,select,textarea,label,summary,[role="button"],[role="link"],[role="checkbox"],[role="switch"],[role="menuitem"],[role="option"],[contenteditable=""],[contenteditable="true"],[tabindex]:not([tabindex="-1"])';
+function fromOutside(target, row) {
+  return !(target instanceof Node) || !row.contains(target);
+}
 function fromOwnControl(target, row) {
   if (!(target instanceof Element)) return false;
   const hit = target.closest(OWN_CONTROL);
@@ -114,9 +136,11 @@ function RowLink({
       draggable: false,
       className,
       onClickCapture: (e) => {
+        if (fromOutside(e.target, e.currentTarget)) return;
         if (isPlainLeftClick(e)) e.preventDefault();
       },
       onClick: (e) => {
+        if (fromOutside(e.target, e.currentTarget)) return;
         if (!isPlainLeftClick(e)) {
           e.stopPropagation();
           return;
@@ -131,7 +155,7 @@ import { DEFAULT_PERSIST_PREFIX, useTableState } from "./use-table-state.js";
 import { useMobileReveal } from "./use-mobile-reveal.js";
 function DataTable({
   rows,
-  columns,
+  columns: columnsProp,
   rowKey,
   defaultPageSize = 25,
   onRowClick,
@@ -168,7 +192,9 @@ function DataTable({
   resizable: resizableProp,
   multiSort: multiSortProp,
   frame = true,
-  className
+  className,
+  rowActions,
+  toolbar
 }) {
   const compact = density === "compact";
   const minimal = chrome === "minimal";
@@ -189,6 +215,54 @@ function DataTable({
     [labelOverrides, labelsProp]
   );
   const locale = useKitLocale(localeProp);
+  const rowActionsFor = useCallback(
+    (row) => rowActions ? (typeof rowActions === "function" ? rowActions(row) : rowActions).filter((a) => !a.hidden?.(row)).map((a, i) => resolveRowAction(a, i, labels)) : [],
+    [rowActions, labels]
+  );
+  const columns = useMemo(
+    () => rowActions ? [
+      ...columnsProp,
+      {
+        key: ROW_ACTIONS_KEY,
+        header: /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels.actions }),
+        cell: (row) => /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end gap-0.5", children: rowActionsFor(row).map((a) => /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: density === "compact" ? "2xs" : "xs",
+            label: a.label,
+            tone: a.tone === "danger" ? "danger" : void 0,
+            disabledReason: a.action.disabledReason?.(row),
+            stopPropagation: true,
+            onClick: () => void runRowAction(a.action, row),
+            children: a.icon
+          },
+          a.key
+        )) }),
+        className: "w-px whitespace-nowrap text-end",
+        headClassName: "w-px",
+        // On a phone the same actions are the card's swipes.
+        mobileHidden: true,
+        noRowLink: true
+      }
+    ] : columnsProp,
+    [columnsProp, rowActions, rowActionsFor, labels.actions, density]
+  );
+  const swipesFromActions = (row) => {
+    const swipes = rowActionsFor(row).filter((a) => a.swipe && !a.action.disabledReason?.(row));
+    if (!swipes.length) return null;
+    const toSwipe = (a) => ({
+      label: a.label,
+      icon: a.icon,
+      onCommit: () => void runRowAction(a.action, row),
+      className: a.tone === "danger" ? "bg-[var(--danger)]" : "bg-[var(--brand)]",
+      armedClassName: a.tone === "danger" ? "bg-[var(--danger-hover)]" : "bg-[var(--brand-hover)]"
+    });
+    return {
+      start: swipes.filter((a) => a.swipe === "start").map(toSwipe),
+      end: swipes.filter((a) => a.swipe === "end").map(toSwipe)
+    };
+  };
+  const swipeActionsFor = mobileSwipeActions ?? (rowActions ? swipesFromActions : void 0);
   const { announce, regionProps } = useAnnounce();
   const {
     sorts,
@@ -291,7 +365,7 @@ function DataTable({
     });
     if (onSortsChange) onSortsChange(next);
     else setInternalSorts(next);
-    const name = col ? columnLabel(col) : key;
+    const name = col ? columnLabel(col, labels) : key;
     const entry = next.find((s) => s.key === key);
     announce(
       !entry ? labels.sortCleared(name) : entry.dir === "asc" ? labels.sortedAscending(name) : labels.sortedDescending(name)
@@ -443,7 +517,7 @@ function DataTable({
   const visibleCount = visibleColumns.length;
   const totalCount = columns.length;
   const totalColSpan = visibleCount + (selection ? 1 : 0);
-  const columnsCountLabel = labels.columnsCount(visibleCount, totalCount);
+  const columnsCountLabel = rowActions ? labels.columnsCount(visibleCount - 1, totalCount - 1) : labels.columnsCount(visibleCount, totalCount);
   const isMdUp = useMediaQuery("(min-width: 768px)", true);
   const mobileColumns = visibleColumns.filter((c) => !c.mobileHidden);
   const mobilePrimaryCol = mobileColumns.find((c) => c.mobilePrimary) ?? mobileColumns[0] ?? null;
@@ -495,7 +569,7 @@ function DataTable({
     const tint = rowClassName?.(row);
     const interactive = !!onRowClick;
     const opensDetail = interactive && !!expandedRow;
-    const swipeActions = mobileSwipeActions?.(row);
+    const swipeActions = swipeActionsFor?.(row);
     const swipe = swipeActions ? physicalSwipe(swipeActions, mobileDir) : null;
     const swipeEnabled = !!swipe && !expanded;
     const href = mobileCardLinkable ? rowHref?.(row) : void 0;
@@ -576,23 +650,31 @@ function DataTable({
           children: cardInner
         }
       )
-    ) : /* @__PURE__ */ jsx(
-      "div",
-      {
-        role: interactive ? "button" : void 0,
-        tabIndex: interactive ? 0 : void 0,
-        onClick: interactive ? () => onRowClick(row) : void 0,
-        onKeyDown: interactive ? (e) => {
-          if (e.target !== e.currentTarget) return;
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
+    ) : (
+      /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- the handlers are
+         only attached when `interactive`, and then so are role="button", tabIndex 0 and the
+         Enter/Space handler below; the rule cannot follow the conditional role. */
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: interactive ? "button" : void 0,
+          tabIndex: interactive ? 0 : void 0,
+          onClick: interactive ? (e) => {
+            if (fromOutside(e.target, e.currentTarget)) return;
             onRowClick(row);
-          }
-        } : void 0,
-        "aria-expanded": expandedRow ? expanded : void 0,
-        className: cardClass,
-        children: cardInner
-      }
+          } : void 0,
+          onKeyDown: interactive ? (e) => {
+            if (e.target !== e.currentTarget) return;
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              onRowClick(row);
+            }
+          } : void 0,
+          "aria-expanded": expandedRow ? expanded : void 0,
+          className: cardClass,
+          children: cardInner
+        }
+      )
     );
     return /* @__PURE__ */ jsxs("li", { className: cn(tint), ...cleanAttrs(rowAttributes?.(row)), children: [
       swipeEnabled ? /* @__PURE__ */ jsx(SwipeableRow, { enabled: true, left: swipe.left, right: swipe.right, children: body }) : body,
@@ -630,6 +712,17 @@ function DataTable({
       ),
       children: [
         /* @__PURE__ */ jsx("span", { ...regionProps }),
+        toolbar != null && toolbar !== false && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-table-toolbar": "",
+            className: cn(
+              "flex flex-wrap items-center gap-2",
+              frame ? cn("border-b border-[var(--border)]", compact ? "px-2 py-1.5" : "px-3 py-2") : "pb-3"
+            ),
+            children: toolbar
+          }
+        ),
         !isMdUp && /* @__PURE__ */ jsxs("div", { ref: mobileRootRef, children: [
           (!isServer || onFiltersChange) && /* @__PURE__ */ jsx(
             MobileFilters,
@@ -667,7 +760,7 @@ function DataTable({
                       "text-center text-[var(--text-muted)]",
                       compact ? "px-3 py-3 text-xs" : "px-4 py-6 text-sm"
                     ),
-                    children: isLoading ? /* @__PURE__ */ jsx(LoadingText, { label: labels.loading }) : empty ?? "\u2014"
+                    children: isLoading ? /* @__PURE__ */ jsx(LoadingText, { label: labels.loading }) : empty ?? labels.empty
                   }
                 ),
                 canRevealMoreMobile && /* @__PURE__ */ jsx(
@@ -842,7 +935,10 @@ function DataTable({
                                 ]
                               }
                             ),
-                            resizable && /* @__PURE__ */ jsx(
+                            resizable && col.key !== ROW_ACTIONS_KEY && /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- a
+                               pointer-only drag handle for a visual preference (column width); it is
+                               deliberately not a tab stop, and no content or action depends on it. */
+                            /* @__PURE__ */ jsx(
                               "span",
                               {
                                 role: "separator",
@@ -907,6 +1003,7 @@ function DataTable({
                                     ),
                                     onClick: rowInteractive ? (e) => {
                                       if (fromOwnControl(e.target, e.currentTarget)) return;
+                                      if (fromOutside(e.target, e.currentTarget)) return;
                                       if (selection && canSelect(row)) {
                                         if (e.shiftKey) {
                                           window.getSelection?.()?.removeAllRanges();
@@ -992,7 +1089,7 @@ function DataTable({
                               {
                                 colSpan: totalColSpan,
                                 className: cn("text-center text-[var(--text-muted)]", compact ? "px-2 py-2" : "px-3 py-4"),
-                                children: isLoading ? /* @__PURE__ */ jsx(LoadingText, { label: labels.loading }) : empty ?? "\u2014"
+                                children: isLoading ? /* @__PURE__ */ jsx(LoadingText, { label: labels.loading }) : empty ?? labels.empty
                               }
                             ) })
                           ]
@@ -1077,6 +1174,7 @@ function DataTable({
                     }
                   ),
                   /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children: columns.map((col) => {
+                    if (col.key === ROW_ACTIONS_KEY) return null;
                     const checked = !hiddenCols.has(col.key);
                     const headerLabel = columnLabel(col);
                     return /* @__PURE__ */ jsxs(