@actioneer/ads 0.7.0 → 1.0.0

package/components/table.js

@@ -3,7 +3,7 @@ import { jsx as d, jsxs as T } from "react/jsx-runtime";
 import * as n from "react";
 import { cn as m } from "../lib/cn.js";
 import { Checkbox as ne } from "./checkbox.js";
-import { ChevronUp as ve, ChevronDown as we, SortIcon as ye } from "../lib/icons.js";
+import { ChevronUp as ve, ChevronDown as ye, SortIcon as we } from "../lib/icons.js";
 const se = (r) => r === "center" ? "text-center" : r === "right" ? "text-right" : "text-left", ae = (r, t = !1) => r === "left" ? m(
   "sticky left-0 z-10",
   // Scroll-aware: the smudge only appears once content is actually
@@ -17,18 +17,16 @@ const se = (r) => r === "center" ? "text-center" : r === "right" ? "text-right"
   !t && "group-data-[scroll-right=true]/table-shell:shadow-table-smudge-right"
 ) : void 0, ie = n.createContext(!1), le = (r) => m(
   "bg-card align-middle transition-colors",
-  // The header is the first NG1 band, so the first body row stays white.
-  "group-even/row:bg-ng1",
   // Functional row hairline; the table shell carries the outer stroke.
   "border-b border-table-stroke group-last/row:border-b-0",
   r && m(
-    // Use NG2 without introducing a new
+    // Use WG3 without introducing a new
     // rounded silhouette. The wash is pre-composited so scrolled text
     // cannot show through sticky cells.
     "group-hover/row:bg-(--table-row-hover) group-focus-within/row:bg-(--table-row-hover)",
     "group-data-[selected]/row:bg-(--table-row-selected)"
   )
-), ce = "bg-ng1", ue = m(
+), ce = "bg-wg1", ue = m(
   "after:pointer-events-none after:absolute after:right-0 after:top-1/2",
   "after:h-4 after:w-px after:-translate-y-1/2 after:rounded-sm",
   "after:bg-border-strong last:after:hidden"
@@ -98,19 +96,19 @@ function Ne(r) {
     if (!n.isValidElement(s) || s.type !== Z)
       return s;
     let u = 0;
-    const f = V(s.props.children).map((e) => {
+    const p = V(s.props.children).map((e) => {
       if (!n.isValidElement(e)) return e;
       for (; (t[u] ?? 0) > c; )
         u += 1;
-      const N = Math.max(1, Number(e.props.colSpan ?? 1)), x = Math.max(1, Number(e.props.rowSpan ?? 1)), w = u;
+      const N = Math.max(1, Number(e.props.colSpan ?? 1)), x = Math.max(1, Number(e.props.rowSpan ?? 1)), y = u;
       for (let g = 0; g < N; g += 1)
-        t[w + g] = Math.max(
-          t[w + g] ?? 0,
+        t[y + g] = Math.max(
+          t[y + g] ?? 0,
           c + x
         );
-      return u += N, e.type !== be ? e : n.cloneElement(e, { _sortColumnIndex: w });
+      return u += N, e.type !== be ? e : n.cloneElement(e, { _sortColumnIndex: y });
     });
-    return n.cloneElement(s, void 0, f);
+    return n.cloneElement(s, void 0, p);
   });
   return n.cloneElement(r, void 0, o);
 }
@@ -137,7 +135,7 @@ function me(r, t) {
     o,
     void 0,
     me(o.props.children, t)
-  ) : o.type === pe ? Ne(o) : o.type === fe && t && Number.isInteger(a) && a >= 0 ? ke(o, a, t.direction) : o : o);
+  ) : o.type === fe ? Ne(o) : o.type === pe && t && Number.isInteger(a) && a >= 0 ? ke(o, a, t.direction) : o : o);
 }
 const ze = n.forwardRef(
   ({
@@ -149,18 +147,18 @@ const ze = n.forwardRef(
     selectionMode: c = "none",
     selectedKeys: u,
     onSelectionChange: h,
-    rowKeys: f,
+    rowKeys: p,
     elevatedActionColumn: e = !1,
     actionColumnWidth: N = "3rem",
     sortDescriptor: x,
-    onSortChange: w,
+    onSortChange: y,
     allowsSorting: g = !0,
     isStatic: A = !1,
     resizableColumns: E = !0,
     maxBodyHeight: k,
     ..._
   }, O) => {
-    const C = n.useMemo(() => f ?? [], [f]), z = u === "all", v = z ? null : u ?? /* @__PURE__ */ new Set(), D = n.useCallback(
+    const C = n.useMemo(() => p ?? [], [p]), z = u === "all", v = z ? null : u ?? /* @__PURE__ */ new Set(), D = n.useCallback(
       (i) => z || !!(v != null && v.has(i)),
       [z, v]
     ), R = C.length > 0 && (z || C.every((i) => v == null ? void 0 : v.has(i))), W = !R && (z || C.some((i) => v == null ? void 0 : v.has(i))), $ = n.useCallback(
@@ -176,25 +174,25 @@ const ze = n.forwardRef(
       [h, c, D, z, C, v]
     ), I = n.useCallback(() => {
       h && h(R ? /* @__PURE__ */ new Set() : new Set(C));
-    }, [h, R, C]), [H, U] = n.useState(), p = g && !w, l = p ? H ?? x : x, S = n.useCallback(
+    }, [h, R, C]), [H, U] = n.useState(), f = g && !y, l = f ? H ?? x : x, S = n.useCallback(
       (i) => {
         if (!g) return;
-        const b = (l == null ? void 0 : l.column) === i && l.direction === "ascending" ? "descending" : "ascending", y = { column: i, direction: b };
-        w ? w(y) : U(y);
+        const b = (l == null ? void 0 : l.column) === i && l.direction === "ascending" ? "descending" : "ascending", w = { column: i, direction: b };
+        y ? y(w) : U(w);
       },
-      [l, g, w]
+      [l, g, y]
     ), j = n.useMemo(
-      () => p ? me(s, l) : s,
-      [l, p, s]
+      () => f ? me(s, l) : s,
+      [l, f, s]
     ), M = n.useRef(null), [F, he] = n.useState({
       left: !1,
       right: !1
     }), q = n.useCallback(() => {
       const i = M.current;
       if (!i) return;
-      const b = i.scrollWidth - i.clientWidth, y = i.scrollLeft > 1, L = i.scrollLeft < b - 1;
+      const b = i.scrollWidth - i.clientWidth, w = i.scrollLeft > 1, L = i.scrollLeft < b - 1;
       he(
-        (K) => K.left === y && K.right === L ? K : { left: y, right: L }
+        (K) => K.left === w && K.right === L ? K : { left: w, right: L }
       );
     }, []);
     n.useEffect(() => {
@@ -203,8 +201,8 @@ const ze = n.forwardRef(
       if (!i || typeof ResizeObserver > "u") return;
       const b = new ResizeObserver(q);
       b.observe(i);
-      const y = i.querySelector("table");
-      return y && b.observe(y), () => b.disconnect();
+      const w = i.querySelector("table");
+      return w && b.observe(w), () => b.disconnect();
     }, [q]);
     const [P, J] = n.useState(
       null
@@ -213,15 +211,15 @@ const ze = n.forwardRef(
         J(
           (b) => b ?? Array.from(
             i.cells,
-            (y) => y.getBoundingClientRect().width
+            (w) => w.getBoundingClientRect().width
           )
         );
       },
       []
     ), te = n.useCallback((i, b) => {
-      J((y) => {
-        if (!y) return y;
-        const L = [...y];
+      J((w) => {
+        if (!w) return w;
+        const L = [...w];
         return L[i] = Math.max(Q, b), L;
       });
     }, []), re = n.useCallback(
@@ -238,7 +236,7 @@ const ze = n.forwardRef(
         isStatic: A,
         sortDescriptor: l,
         requestSort: g ? S : void 0,
-        automaticSorting: p,
+        automaticSorting: f,
         elevatedActionColumn: e,
         resizableColumns: E,
         columnWidths: P,
@@ -257,7 +255,7 @@ const ze = n.forwardRef(
         A,
         l,
         g,
-        p,
+        f,
         S,
         e,
         E,
@@ -275,7 +273,7 @@ const ze = n.forwardRef(
         "data-scroll-left": F.left ? "true" : "false",
         "data-scroll-right": F.right ? "true" : "false",
         className: m(
-          "group/table-shell overflow-clip rounded-m border border-table-stroke bg-white",
+          "group/table-shell overflow-clip rounded-m border border-table-stroke bg-table-shell",
           "[--table-card-radius:var(--radius-m)]",
           t
         ),
@@ -366,24 +364,24 @@ const ze = n.forwardRef(
   }
 );
 ze.displayName = "Table";
-const pe = n.forwardRef(({ className: r, ...t }, a) => {
+const fe = n.forwardRef(({ className: r, ...t }, a) => {
   const o = B();
   return /* @__PURE__ */ d(Y.Provider, { value: "header", children: /* @__PURE__ */ d(
     "thead",
     {
       ref: a,
       className: m(
-        "text-s font-medium uppercase text-table-header-foreground",
-        (o == null ? void 0 : o.elevatedActionColumn) && "relative z-30 bg-ng1",
+        "text-s font-medium text-table-header-foreground",
+        (o == null ? void 0 : o.elevatedActionColumn) && "relative z-30 bg-wg1",
         r
       ),
       ...t
     }
   ) });
 });
-pe.displayName = "TableHeader";
-const fe = n.forwardRef(({ className: r, ...t }, a) => /* @__PURE__ */ d(Y.Provider, { value: "body", children: /* @__PURE__ */ d("tbody", { ref: a, className: m(r), ...t }) }));
-fe.displayName = "TableBody";
+fe.displayName = "TableHeader";
+const pe = n.forwardRef(({ className: r, ...t }, a) => /* @__PURE__ */ d(Y.Provider, { value: "body", children: /* @__PURE__ */ d("tbody", { ref: a, className: m(r), ...t }) }));
+pe.displayName = "TableBody";
 const Z = n.forwardRef(
   ({
     className: r,
@@ -394,14 +392,14 @@ const Z = n.forwardRef(
     role: c,
     ...u
   }, h) => {
-    const f = B(), e = n.useContext(Y), N = !!f && f.selectionMode !== "none", x = e === "body" && !(f != null && f.isStatic) && (o || N || typeof s == "function" || c === "button" || u["aria-expanded"] !== void 0), w = N && e === "body" && t !== void 0 ? f.isSelected(t) : !1;
+    const p = B(), e = n.useContext(Y), N = !!p && p.selectionMode !== "none", x = e === "body" && !(p != null && p.isStatic) && (o || N || typeof s == "function" || c === "button" || u["aria-expanded"] !== void 0), y = N && e === "body" && t !== void 0 ? p.isSelected(t) : !1;
     return /* @__PURE__ */ d(ie.Provider, { value: x, children: /* @__PURE__ */ T(
       "tr",
       {
         ref: h,
         "data-interactive": x || void 0,
-        "data-selected": w || void 0,
-        className: m("group/row", e === "body" && "h-12", r),
+        "data-selected": y || void 0,
+        className: m("group/row", e === "body" && "h-16", r),
         onClick: s,
         role: c,
         ...u,
@@ -422,14 +420,14 @@ const Z = n.forwardRef(
               ),
               children: [
                 /* @__PURE__ */ d("span", { className: "sr-only", children: "Row selection" }),
-                f.selectionMode === "multiple" && /* @__PURE__ */ d(
+                p.selectionMode === "multiple" && /* @__PURE__ */ d(
                   ne,
                   {
                     size: "sm",
                     "aria-label": "Select all rows",
-                    checked: f.allSelected,
-                    indeterminate: f.someSelected,
-                    onChange: f.toggleAll
+                    checked: p.allSelected,
+                    indeterminate: p.someSelected,
+                    onChange: p.toggleAll
                   }
                 )
               ]
@@ -438,7 +436,7 @@ const Z = n.forwardRef(
             "td",
             {
               className: m(
-                "h-12 w-10 px-4 py-2",
+                "h-16 w-10 px-4 py-2",
                 le(x),
                 "sticky left-0 z-10"
               ),
@@ -448,8 +446,8 @@ const Z = n.forwardRef(
                 {
                   size: "sm",
                   "aria-label": `Select ${t}`,
-                  checked: w,
-                  onChange: () => f.toggleKey(t)
+                  checked: y,
+                  onChange: () => p.toggleKey(t)
                 }
               )
             }
@@ -471,38 +469,38 @@ const be = n.forwardRef(
     _sortColumnIndex: c,
     children: u,
     ...h
-  }, f) => {
+  }, p) => {
     var I, H, U;
-    const e = B(), x = (e != null && e.automaticSorting && c !== void 0 ? `${G}${c}` : void 0) ?? o, w = Number(h.colSpan ?? 1) === 1, g = String(X(u)).trim(), A = g.length > 0, E = s && w && a !== "right" && A && !!x && !!(e != null && e.requestSort), k = E && ((I = e == null ? void 0 : e.sortDescriptor) == null ? void 0 : I.column) === x, _ = (H = e == null ? void 0 : e.sortDescriptor) == null ? void 0 : H.direction, O = !!(e != null && e.resizableColumns) && w && a !== "right", C = n.useRef(null), [z, v] = n.useState(!1), D = (p) => {
-      if (p.button !== 0 || !e) return;
-      const l = p.currentTarget.parentElement, S = l == null ? void 0 : l.parentElement;
+    const e = B(), x = (e != null && e.automaticSorting && c !== void 0 ? `${G}${c}` : void 0) ?? o, y = Number(h.colSpan ?? 1) === 1, g = String(X(u)).trim(), A = g.length > 0, E = s && y && a !== "right" && A && !!x && !!(e != null && e.requestSort), k = E && ((I = e == null ? void 0 : e.sortDescriptor) == null ? void 0 : I.column) === x, _ = (H = e == null ? void 0 : e.sortDescriptor) == null ? void 0 : H.direction, O = !!(e != null && e.resizableColumns) && y && a !== "right", C = n.useRef(null), [z, v] = n.useState(!1), D = (f) => {
+      if (f.button !== 0 || !e) return;
+      const l = f.currentTarget.parentElement, S = l == null ? void 0 : l.parentElement;
       if (!(!l || !S)) {
         e.snapshotColumnWidths(S), C.current = {
           index: l.cellIndex,
-          startX: p.clientX,
+          startX: f.clientX,
           startWidth: l.getBoundingClientRect().width
         }, v(!0);
         try {
-          p.currentTarget.setPointerCapture(p.pointerId);
+          f.currentTarget.setPointerCapture(f.pointerId);
         } catch {
         }
-        p.preventDefault();
+        f.preventDefault();
       }
-    }, R = (p) => {
+    }, R = (f) => {
       const l = C.current;
       !l || !e || e.setColumnWidth(
         l.index,
-        l.startWidth + (p.clientX - l.startX)
+        l.startWidth + (f.clientX - l.startX)
       );
     }, W = () => {
       C.current = null, v(!1);
-    }, $ = (p) => {
-      if (p.key !== "ArrowLeft" && p.key !== "ArrowRight" || !e) return;
-      p.preventDefault();
-      const l = p.currentTarget.parentElement, S = l == null ? void 0 : l.parentElement;
+    }, $ = (f) => {
+      if (f.key !== "ArrowLeft" && f.key !== "ArrowRight" || !e) return;
+      f.preventDefault();
+      const l = f.currentTarget.parentElement, S = l == null ? void 0 : l.parentElement;
       if (!l || !S) return;
       e.snapshotColumnWidths(S);
-      const j = p.shiftKey ? 32 : 8, M = p.key === "ArrowRight" ? j : -j;
+      const j = f.shiftKey ? 32 : 8, M = f.key === "ArrowRight" ? j : -j;
       e.setColumnWidth(
         l.cellIndex,
         l.getBoundingClientRect().width + M
@@ -511,21 +509,21 @@ const be = n.forwardRef(
     return /* @__PURE__ */ T(
       "th",
       {
-        ref: f,
+        ref: p,
         scope: "col",
         "aria-sort": k ? _ === "ascending" ? "ascending" : "descending" : E ? "none" : void 0,
         className: m(
           // whitespace-nowrap: header labels hug their content — the table
           // scrolls horizontally, so wrapping "Null %" to two lines only
           // wastes header height without saving any width.
-          "relative whitespace-nowrap border-b border-table-stroke px-4 py-2.5 font-medium uppercase",
+          "relative whitespace-nowrap border-b border-table-stroke px-4 py-2.5 text-s font-medium text-table-header-foreground",
           ce,
           ue,
           // The resize handle carries its own tick visual, so drop the
           // decorative one; the last column never shows a handle.
           O && "after:hidden [&:last-child>[data-slot=resize-handle]]:hidden",
           // Capped-height tables scroll under the header: pin it to the
-          // viewport top, painted NG1 so rows pass beneath.
+          // viewport top, painted WG1 so rows pass beneath.
           (e == null ? void 0 : e.stickyHeader) && "sticky top-0 z-30",
           se(t),
           a && (a === "right" && (e != null && e.elevatedActionColumn) ? m(
@@ -548,14 +546,14 @@ const be = n.forwardRef(
               type: "button",
               onClick: () => e.requestSort(x),
               className: m(
-                "group/sort -mx-1 inline-flex items-center gap-1 rounded px-1 uppercase outline-none transition-colors",
+                "group/sort -mx-1 inline-flex items-center gap-1 rounded px-1 outline-none transition-colors",
                 "hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
                 t === "right" && "flex-row-reverse",
                 k && "font-medium"
               ),
               children: [
                 u,
-                k ? _ === "ascending" ? /* @__PURE__ */ d(ve, { className: "size-3.5" }) : /* @__PURE__ */ d(we, { className: "size-3.5" }) : /* @__PURE__ */ d(ye, { className: "size-3.5 opacity-0 transition-opacity group-hover/sort:opacity-60" })
+                k ? _ === "ascending" ? /* @__PURE__ */ d(ve, { className: "size-3.5" }) : /* @__PURE__ */ d(ye, { className: "size-3.5" }) : /* @__PURE__ */ d(we, { className: "size-3.5 opacity-0 transition-opacity group-hover/sort:opacity-60" })
               ]
             }
           ) : A ? u : /* @__PURE__ */ d("span", { className: "sr-only", children: h["aria-label"] ?? "Table column" }),
@@ -606,7 +604,7 @@ const be = n.forwardRef(
 be.displayName = "TableColumn";
 const Se = n.forwardRef(
   ({ className: r, align: t, sticky: a, sortValue: o, ...s }, c) => {
-    const u = B(), h = n.useContext(ie), f = a === "right" && (u == null ? void 0 : u.elevatedActionColumn);
+    const u = B(), h = n.useContext(ie), p = a === "right" && (u == null ? void 0 : u.elevatedActionColumn);
     return /* @__PURE__ */ d(
       "td",
       {
@@ -617,18 +615,19 @@ const Se = n.forwardRef(
           // overflow-x-auto viewport scrolls horizontally instead, matching the
           // header cells. Opt back into wrapping with `whitespace-normal` for
           // deliberate multi-line content (e.g. an EmptyState in a colSpan cell).
-          "h-12 whitespace-nowrap px-4 py-2",
+          // Cell values own the ADS 14px body-text contract instead of relying
+          // on inheritance from <Table>; nested content stays 14px by default.
+          "h-16 whitespace-nowrap px-4 py-2 text-m",
           le(h),
           se(t),
           a && ae(a, u == null ? void 0 : u.elevatedActionColumn),
-          f && m(
+          p && m(
             "w-[var(--table-action-column-width)]",
             "min-w-[var(--table-action-column-width)]",
             "max-w-[var(--table-action-column-width)]",
             "px-2",
             "bg-elevated",
-            // Keep the action column off the zebra wash.
-            "group-even/row:bg-elevated",
+            // Keep the action column on its elevated surface during hover.
             "group-hover/row:bg-elevated group-focus-within/row:bg-elevated"
           ),
           r
@@ -641,9 +640,9 @@ const Se = n.forwardRef(
 Se.displayName = "TableCell";
 export {
   ze as Table,
-  fe as TableBody,
+  pe as TableBody,
   Se as TableCell,
   be as TableColumn,
-  pe as TableHeader,
+  fe as TableHeader,
   Z as TableRow
 };