@eifi1/ui-kit 0.31.1 → 0.32.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, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment2, isValidElement, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import {
   ArrowDown,
@@ -16,7 +16,9 @@ import {
   Trash2,
   X
 } from "lucide-react";
-import { Card, IconButton, Select, Spinner } from "./ui.js";
+import { Card, FOCUS_RING, IconButton, Select, Spinner } from "./ui.js";
+import { RowActions } from "./row-actions.js";
+import { useLargeText } from "../hooks/use-large-text.js";
 import { cn } from "../lib/cn.js";
 import {
   defaultFilterState,
@@ -33,7 +35,7 @@ import { useBodyScrollLock } from "../hooks/use-body-scroll-lock.js";
 import { useOverlayHistory } from "../hooks/use-overlay-history.js";
 import { FullBleedDialog } from "./full-bleed-dialog.js";
 import { Popover } from "./popover.js";
-import { useMediaQuery } from "../hooks/use-media-query.js";
+import { useBreakpoint } from "../hooks/use-breakpoint.js";
 import { useAnnounce } from "../hooks/use-announce.js";
 import { DEFAULT_DATA_TABLE_LABELS, resolveDataTableLabels } from "./data-table-labels.js";
 import { useKitLabelOverrides, useKitLocale } from "../i18n/kit-labels.js";
@@ -73,6 +75,16 @@ async function runRowAction(action, row) {
   if (action.confirm && !await action.confirm(row)) return;
   action.onAction(row);
 }
+function toRowAction(a, row) {
+  return {
+    key: a.key,
+    label: a.label,
+    icon: isValidElement(a.icon) ? a.icon : a.icon != null && a.icon !== false ? /* @__PURE__ */ jsx(Fragment, { children: a.icon }) : void 0,
+    tone: a.tone,
+    disabledReason: a.action.disabledReason?.(row),
+    onSelect: () => void runRowAction(a.action, row)
+  };
+}
 function physicalSwipe(actions, dir) {
   const rtl = dir === "rtl";
   return {
@@ -102,6 +114,27 @@ function columnLabel(col, labels) {
   if (col.key === ROW_ACTIONS_KEY && labels) return labels.actions;
   return col.headerText ?? (typeof col.header === "string" ? col.header : col.key);
 }
+const CARD_NO_TRUNCATE = "large:[&_.truncate]:whitespace-normal large:[&_.truncate]:[overflow-wrap:anywhere]";
+function StackedFields({ columns, row, compact }) {
+  return /* @__PURE__ */ jsx(
+    "dl",
+    {
+      "data-card-fields": "stacked",
+      className: cn("relative flex min-w-0 flex-col", compact ? "gap-1.5 text-xs" : "gap-2.5 text-sm", CARD_NO_TRUNCATE),
+      children: columns.map((col) => /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-xs uppercase tracking-wide text-[var(--text-muted)]", children: col.header }),
+        /* @__PURE__ */ jsx(
+          "dd",
+          {
+            ...dataAttrsOf(col.cellProps?.(row)),
+            className: "mt-0.5 min-w-0 break-words text-[var(--text-secondary)]",
+            children: col.cell(row)
+          }
+        )
+      ] }, col.key))
+    }
+  );
+}
 const DEFAULT_DATA_TABLE_SORT_LABELS = {
   sortBy: DEFAULT_DATA_TABLE_LABELS.sortBy,
   sortDefault: DEFAULT_DATA_TABLE_LABELS.sortDefault,
@@ -129,7 +162,9 @@ function MobileSort({
     {
       "data-table-mobile-sort": "",
       className: cn(
-        "flex items-center gap-2 border-b border-[var(--border)]",
+        // At Large the direction button shows its words (IconButton's label, §4); the
+        // row wraps so the select keeps a usable width on a 240 px card.
+        "flex flex-wrap items-center gap-2 border-b border-[var(--border)]",
         compact ? "px-3 py-1.5" : "px-4 py-2"
       ),
       children: [
@@ -139,7 +174,7 @@ function MobileSort({
           {
             id: selectId,
             size: compact ? "sm" : "md",
-            className: "min-w-0 flex-1",
+            className: "min-w-0 flex-1 large:basis-40",
             value: primary?.key ?? "",
             onChange: (e) => onPick(e.target.value || null),
             children: [
@@ -245,6 +280,8 @@ function DataTable({
   locale: localeProp,
   storageKeyPrefix = DEFAULT_PERSIST_PREFIX,
   mobileExpandAsDialog = false,
+  mobileDetailsInRow = false,
+  rowName,
   mobileDialogBackCloses = true,
   mobileGroupBy,
   mobileGroupLabel,
@@ -295,19 +332,21 @@ function DataTable({
       {
         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,
+        // Through RowActions (0.32, §10.8): the icons inline at Normal, one "⋯"
+        // menu at Large once there are two — every label at once does not fit a
+        // row. Each control stops its own click: the row's handler already skips
+        // its controls, and this is for the caller who wraps the table in a
+        // clickable element of their own.
+        cell: (row) => /* @__PURE__ */ jsx(
+          RowActions,
           {
+            actions: rowActionsFor(row).map((a) => toRowAction(a, row)),
+            name: rowName?.(row),
             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
-        )) }),
+            labels: { actions: labels.actions },
+            className: "justify-end"
+          }
+        ),
         className: "w-px whitespace-nowrap text-end",
         headClassName: "w-px",
         // On a phone the same actions are the card's swipes.
@@ -315,7 +354,7 @@ function DataTable({
         noRowLink: true
       }
     ] : columnsProp,
-    [columnsProp, rowActions, rowActionsFor, labels.actions, density]
+    [columnsProp, rowActions, rowActionsFor, rowName, labels.actions, density]
   );
   const swipesFromActions = (row) => {
     const swipes = rowActionsFor(row).filter((a) => a.swipe && !a.action.disabledReason?.(row));
@@ -598,12 +637,23 @@ function DataTable({
   const footerValue = (col) => col.footer?.(sorted, slice);
   const footerHeadingId = useId();
   const columnsCountLabel = rowActions ? labels.columnsCount(visibleCount - 1, totalCount - 1) : labels.columnsCount(visibleCount, totalCount);
-  const isMdUp = useMediaQuery("(min-width: 768px)", true);
+  const isMdUp = useBreakpoint("md", true);
   const desktopScroller = useRef(null);
   const edgeFadeProps = useEdgeFade(desktopScroller, edgeFade && isMdUp);
   const mobileColumns = visibleColumns.filter((c) => !c.mobileHidden);
   const mobilePrimaryCol = mobileColumns.find((c) => c.mobilePrimary) ?? mobileColumns[0] ?? null;
   const mobileSecondaryColumns = mobileColumns.filter((c) => c !== mobilePrimaryCol);
+  const mobileDetailColumns = mobileDetailsInRow ? visibleColumns.filter((c) => c.mobileHidden) : [];
+  const large = useLargeText();
+  const opensRow = !!expandedRow || mobileDetailColumns.length > 0;
+  const openedRowContent = (row) => {
+    const detail = expandedRow?.(row) ?? null;
+    if (mobileDetailColumns.length === 0) return detail;
+    return /* @__PURE__ */ jsxs("div", { "data-row-details": "", className: cn("flex flex-col", compact ? "gap-2" : "gap-3"), children: [
+      /* @__PURE__ */ jsx(StackedFields, { columns: mobileDetailColumns, row, compact }),
+      detail
+    ] });
+  };
   const mobileCardLinkable = mobileColumns.every((c) => !c.noRowLink);
   const [mobileDir, setMobileDir] = useState("ltr");
   const mobileRootRef = (el) => {
@@ -640,24 +690,25 @@ function DataTable({
     return true;
   };
   const mobileDialogRow = mobileExpandAsDialog && !isMdUp ? mobileSlice.find((r) => isExpanded?.(r)) : void 0;
-  const mobileDialogContent = mobileDialogRow ? expandedRow?.(mobileDialogRow) : null;
+  const mobileDialogContent = mobileDialogRow ? openedRowContent(mobileDialogRow) : null;
   const dialogOpen = !!(mobileDialogRow && mobileDialogContent);
   const closeDialog = () => {
     if (mobileDialogRow) onRowClick?.(mobileDialogRow);
   };
   const renderMobileRow = (row) => {
     const expanded = isExpanded?.(row) ?? false;
-    const expansion = expanded ? expandedRow?.(row) : null;
+    const expansion = expanded ? openedRowContent(row) : null;
     const tint = rowClassName?.(row);
     const interactive = !!onRowClick;
-    const opensDetail = interactive && !!expandedRow;
+    const opensDetail = interactive && opensRow;
     const swipeActions = swipeActionsFor?.(row);
     const swipe = swipeActions ? physicalSwipe(swipeActions, mobileDir) : null;
     const swipeEnabled = !!swipe && !expanded;
     const href = mobileCardLinkable ? rowHref?.(row) : void 0;
     const cardClass = cn(
       "w-full text-start flex items-center",
-      compact ? "px-3 py-2 gap-2 text-sm" : "px-4 py-3 gap-3",
+      // §4: more room per row at Large — a taller row is a bigger tap target too.
+      compact ? "px-3 py-2 gap-2 text-sm large:py-3" : "px-4 py-3 gap-3 large:py-4",
       // Live #320's other half: the card acknowledges the touch before the sheet
       // arrives. On a cold route the data can take a beat, and an unacknowledged tap
       // reads as "did that register?" — which is most of what "abrupt" means here.
@@ -672,32 +723,49 @@ function DataTable({
       // AppShell main's `overflow-x-clip` — so the frame went missing on one side. A press
       // keeps the fill and the squeeze above; an outline on every tap of a long list would
       // be louder than the acknowledgement it replaces.
-      interactive && "[-webkit-tap-highlight-color:transparent] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]"
+      interactive && cn("[-webkit-tap-highlight-color:transparent] focus-visible:ring-inset", FOCUS_RING)
     );
     const cardInner = /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 flex-1 flex-col", compact ? "gap-1" : "gap-2"), children: mobileCard ? mobileCard(row) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        mobilePrimaryCol && /* @__PURE__ */ jsx("div", { ...dataAttrsOf(mobilePrimaryCol.cellProps?.(row)), className: "font-medium", children: mobilePrimaryCol.cell(row) }),
-        mobileSecondaryColumns.length > 0 && /* @__PURE__ */ jsx(
-          "dl",
-          {
-            className: cn(
-              "grid grid-cols-[auto_1fr] gap-x-3",
-              compact ? "gap-y-0.5 text-xs" : "gap-y-1 text-sm"
-            ),
-            children: mobileSecondaryColumns.map((col) => /* @__PURE__ */ jsxs(Fragment2, { children: [
-              /* @__PURE__ */ jsx("dt", { className: "text-xs uppercase tracking-wide text-[var(--text-muted)] self-center", children: col.header }),
-              /* @__PURE__ */ jsx(
-                "dd",
-                {
-                  ...dataAttrsOf(col.cellProps?.(row)),
-                  className: "min-w-0 text-[var(--text-secondary)] self-center",
-                  children: col.cell(row)
-                }
-              )
-            ] }, col.key))
-          }
-        )
-      ] }) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex min-w-0 flex-1 flex-col",
+            compact ? "gap-1 large:gap-2" : "gap-2 large:gap-3",
+            // §4 "nothing truncates": at Large a cell's own `truncate` wraps instead —
+            // the reader who chose bigger type is the one an ellipsis fails. A caller's
+            // `mobileCard` is its own layout and keeps what it chose.
+            !mobileCard && CARD_NO_TRUNCATE
+          ),
+          children: mobileCard ? mobileCard(row) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            mobilePrimaryCol && /* @__PURE__ */ jsx("div", { ...dataAttrsOf(mobilePrimaryCol.cellProps?.(row)), className: "min-w-0 break-words font-medium", children: mobilePrimaryCol.cell(row) }),
+            mobileSecondaryColumns.length > 0 && large ? (
+              // §4: each label ABOVE its value at Large. Side by side, a label column
+              // sized to the widest label leaves a value a sliver of a 240 px card.
+              /* @__PURE__ */ jsx(StackedFields, { columns: mobileSecondaryColumns, row, compact })
+            ) : mobileSecondaryColumns.length > 0 && /* @__PURE__ */ jsx(
+              "dl",
+              {
+                className: cn(
+                  "grid grid-cols-[auto_1fr] gap-x-3",
+                  compact ? "gap-y-0.5 text-xs" : "gap-y-1 text-sm"
+                ),
+                children: mobileSecondaryColumns.map((col) => /* @__PURE__ */ jsxs(Fragment2, { children: [
+                  /* @__PURE__ */ jsx("dt", { className: "text-xs uppercase tracking-wide text-[var(--text-muted)] self-center", children: col.header }),
+                  /* @__PURE__ */ jsx(
+                    "dd",
+                    {
+                      ...dataAttrsOf(col.cellProps?.(row)),
+                      className: "min-w-0 text-[var(--text-secondary)] self-center",
+                      children: col.cell(row)
+                    }
+                  )
+                ] }, col.key))
+              }
+            )
+          ] })
+        }
+      ),
       opensDetail && // `aria-hidden`: the row already announces itself as a button with
       // `aria-expanded`, so the icon would only add a second, wordless stop.
       (mobileExpandAsDialog ? (
@@ -729,7 +797,7 @@ function DataTable({
         {
           href,
           onActivate: () => onRowClick(row),
-          "aria-expanded": expandedRow ? expanded : void 0,
+          "aria-expanded": opensRow ? expanded : void 0,
           className: cardClass,
           onKeyDown: (e) => {
             if (e.key !== " ") return;
@@ -759,7 +827,7 @@ function DataTable({
               onRowClick(row);
             }
           } : void 0,
-          "aria-expanded": expandedRow ? expanded : void 0,
+          "aria-expanded": opensRow ? expanded : void 0,
           className: cardClass,
           children: cardInner
         }
@@ -1049,14 +1117,14 @@ function DataTable({
                                       children: [
                                         /* @__PURE__ */ jsx("span", { children: col.header }),
                                         sortable && /* @__PURE__ */ jsx(Icon, { className: cn("size-3", active ? "opacity-100" : "opacity-40") }),
-                                        active && sorts.length > 1 && /* @__PURE__ */ jsx("span", { className: "text-[9px] font-semibold leading-none text-brand", children: sortIdx + 1 })
+                                        active && sorts.length > 1 && /* @__PURE__ */ jsx("span", { className: "text-micro font-semibold leading-none text-brand", children: sortIdx + 1 })
                                       ]
                                     }
                                   ) }),
                                   filter && /* @__PURE__ */ jsx(
                                     Popover,
                                     {
-                                      width: filter.type === "date" ? 420 : void 0,
+                                      width: filter.type === "date" ? "26.25rem" : void 0,
                                       labels: { panel: labels.filter },
                                       trigger: ({ toggle, ref }) => /* @__PURE__ */ jsx(
                                         "button",
@@ -1152,7 +1220,10 @@ function DataTable({
                                     className: cn(
                                       "border-t border-[var(--border)]",
                                       rowInteractive && "cursor-pointer hover:bg-[var(--bg-hover)]",
-                                      rowsFocusable && "focus-visible:bg-[var(--bg-hover)] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]",
+                                      // The kit's focus frame width (§5, `--focus-ring-width`), drawn as an
+                                      // OUTLINE rather than FOCUS_RING's box-shadow: a shadow on a `<tr>`
+                                      // is not painted by every engine, an outline is.
+                                      rowsFocusable && "focus-visible:bg-[var(--bg-hover)] focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]",
                                       rowClassName?.(row)
                                     ),
                                     onClick: rowInteractive ? (e) => {
@@ -1471,7 +1542,7 @@ function MobileFilters({
         children: [
           /* @__PURE__ */ jsx(Filter, { className: "size-4" }),
           /* @__PURE__ */ jsx("span", { children: labels.filters }),
-          activeCount > 0 && /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-4 items-center justify-center rounded-full bg-[var(--info-bg)] px-1 text-[11px] font-semibold text-[var(--info)]", children: activeCount })
+          activeCount > 0 && /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-4 items-center justify-center rounded-full bg-[var(--info-bg)] px-1 text-caption font-semibold text-[var(--info)]", children: activeCount })
         ]
       }
     ),