@twentyfirstmedia/ui-core 0.4.0 → 0.6.0

package/src/components/data-display.tsx

@@ -34,18 +34,26 @@ import type {
  * in de-DE, "$1,305.50" in en-US): the number animates, the text around it stays, and decimals and
  * grouping are kept. The final text is always `value` itself.
  */
+const useIsoLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
+
 export function CountUp(p: CountUpProps) {
   const { locale } = useFormat();
   const o = parseFormatted(p.value, locale),
     fmt = (n: number, shape: FormattedNumber) => formatLike(n, shape, locale),
     // numbers are shown in the locale too; strings end exactly as given
     final = o && typeof p.value === "number" ? fmt(p.value, o) : String(p.value),
-    st = React.useState(o ? fmt(0, o) : final),
+    // the server (and readers without scripts, print, share images) get the final value; the
+    // client starts at zero before the first paint and counts up
+    st = React.useState(final),
     last = React.useRef(0),
     first = React.useRef(true),
     el = React.useRef<HTMLSpanElement>(null);
+  useIsoLayoutEffect(() => {
+    if (o && p.animate !== false && !reduced(el.current)) st[1](fmt(0, o));
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- only before the first count
+  }, []);
   React.useEffect(() => {
-    if (!o || reduced(el.current)) {
+    if (!o || p.animate === false || reduced(el.current)) {
       st[1](final);
       return;
     }
@@ -77,7 +85,7 @@ export function CountUp(p: CountUpProps) {
     };
   }, [p.value, locale]);
   return (
-    <span ref={el} className={p.className}>
+    <span style={p.style} ref={el} className={p.className}>
       {st[0]}
     </span>
   );
@@ -86,6 +94,7 @@ export function StatTile(p: StatTileProps) {
   const tint = p.tint || "sky";
   return (
     <div
+      style={p.style}
       className={cx(
         "tf-stat",
         tint === "placeholder" ? "tf-stat-placeholder" : "tf-bg-" + tint,
@@ -150,7 +159,7 @@ export function EventCard(p: EventCardProps) {
   const k = KIND[p.kind || "meeting"] || (KIND.meeting as [IconName, Tint]),
     tint = p.tint || k[1];
   return (
-    <div className={cx("tf-event", "tf-bg-" + tint, p.className)}>
+    <div style={p.style} className={cx("tf-event", "tf-bg-" + tint, p.className)}>
       <div className="tf-event-head">
         <span className="tf-event-kind">
           <Icon name={p.icon || k[0]} size={14} />
@@ -195,7 +204,7 @@ export function Panel(p: PanelProps) {
 }
 export function PageHeader(p: PageHeaderProps) {
   return (
-    <header className="tf-header">
+    <header style={p.style} className={cx("tf-header", p.className)}>
       <div>
         {p.crumbs && (
           <div
@@ -203,7 +212,7 @@ export function PageHeader(p: PageHeaderProps) {
               marginBottom: 8,
             }}
           >
-            <Breadcrumb items={p.crumbs} />
+            <Breadcrumb items={p.crumbs} linkAs={p.crumbLinkAs} />
           </div>
         )}
         <h1 className="tf-header-title">{p.title}</h1>
@@ -255,8 +264,12 @@ export function Table(p: TableProps) {
   const box = React.useRef<HTMLDivElement>(null);
   useScrollFocus(box);
   return (
-    <div ref={box} className="tf-table-scroll">
-      <table className="tf-table">
+    <div
+      style={p.style}
+      ref={box}
+      className={cx("tf-table-scroll", p.stack && "tf-table-stackbox", p.className)}
+    >
+      <table className={cx("tf-table", p.stack && "stack")}>
         <thead>
           <tr>
             {cols.map((c) => (
@@ -287,7 +300,11 @@ export function Table(p: TableProps) {
           {(p.rows || []).map((r, i) => (
             <tr key={i}>
               {cols.map((c) => (
-                <td key={c.key} className={c.align === "right" ? "tf-num" : undefined}>
+                <td
+                  key={c.key}
+                  className={c.align === "right" ? "tf-num" : undefined}
+                  data-label={p.stack ? c.label : undefined}
+                >
                   {c.render ? c.render(r) : r[c.key]}
                 </td>
               ))}
@@ -300,34 +317,42 @@ export function Table(p: TableProps) {
 }
 export function ListRow(p: ListRowProps) {
   const t = useStrings(DATA_DISPLAY_STRINGS);
-  return (
-    <button
-      type="button"
-      className="tf-row-item"
-      aria-current={p.active ? "true" : undefined}
-      onClick={p.onClick}
-    >
+  const Link = (p.linkAs || "a") as React.ElementType;
+  const interactive = !!(p.onClick || p.href);
+  const lines = (n: number | undefined) =>
+    n ? ({ "--lines": n } as React.CSSProperties) : undefined;
+  const title = (
+    <span className={cx("tf-row-title", p.titleLines && "clamp")} style={lines(p.titleLines)}>
+      {p.unread && <span className="tf-unread" role="img" aria-label={t.unread} />}
+      {p.titleLines ? <span className="tf-row-clamp">{p.title}</span> : p.title}
+    </span>
+  );
+  const content = (hit: boolean) => (
+    <>
       {p.leading ||
         (p.avatar ? (
           <Avatar name={p.avatar} size={36} />
         ) : (
           <TintIcon icon={p.icon || "mail"} tint={p.tint || "plain"} size={36} />
         ))}
-      <span
-        style={{
-          minWidth: 0,
-        }}
-      >
-        <span className="tf-row-title">
-          {p.unread && <span className="tf-unread" role="img" aria-label={t.unread} />}
-          {p.title}
-        </span>
+      <span className="tf-row-text">
+        {hit && interactive ? (
+          p.href ? (
+            <Link className="tf-row-hit" href={p.href} onClick={p.onClick}>
+              {title}
+            </Link>
+          ) : (
+            <button type="button" className="tf-row-hit" onClick={p.onClick}>
+              {title}
+            </button>
+          )
+        ) : (
+          title
+        )}
         {p.subtitle && (
           <span
-            className="tf-row-sub"
-            style={{
-              display: "block",
-            }}
+            className={cx("tf-row-sub", (p.subtitleLines || 1) > 1 && "clamp")}
+            style={lines(p.subtitleLines)}
           >
             {p.subtitle}
           </span>
@@ -337,18 +362,59 @@ export function ListRow(p: ListRowProps) {
         {p.meta}
         {p.trailing}
       </span>
+      {p.actions && <span className="tf-row-actions">{p.actions}</span>}
+    </>
+  );
+  // own buttons, or nothing to click: a plain row (with a stretched hit area when interactive)
+  if (p.actions || !interactive)
+    return (
+      <div
+        style={p.style}
+        className={cx(
+          "tf-row-item",
+          interactive ? "has-hit" : "static",
+          p.actions && "has-actions",
+          p.className,
+        )}
+        aria-current={p.active ? "true" : undefined}
+      >
+        {content(true)}
+      </div>
+    );
+  if (p.href)
+    return (
+      <Link
+        href={p.href}
+        style={p.style}
+        className={cx("tf-row-item", p.className)}
+        aria-current={p.active ? "true" : undefined}
+        onClick={p.onClick}
+      >
+        {content(false)}
+      </Link>
+    );
+  return (
+    <button
+      style={p.style}
+      type="button"
+      className={cx("tf-row-item", p.className)}
+      aria-current={p.active ? "true" : undefined}
+      onClick={p.onClick}
+    >
+      {content(false)}
     </button>
   );
 }
 export function Timeline(p: TimelineProps) {
   return (
     <ol
-      className="tf-timeline tf-stagger"
-      style={
-        {
+      className={cx("tf-timeline tf-stagger", p.className)}
+      style={{
+        ...({
           "--base": (p.delay || 200) + "ms",
-        } as React.CSSProperties
-      }
+        } as React.CSSProperties),
+        ...p.style,
+      }}
     >
       {(p.items || []).map((it, i) => (
         <li key={i} className="tf-tl-item">
@@ -377,7 +443,7 @@ export function FileRow(p: FileRowProps) {
   const strings = useStrings(DATA_DISPLAY_STRINGS);
   const t = FT[p.kind || "doc"] || (FT.doc as [IconName, Tint]);
   return (
-    <div className="tf-file">
+    <div style={p.style} className={cx("tf-file", p.className)}>
       <TintIcon icon={t[0]} tint={t[1]} />
       <div
         style={{
@@ -395,7 +461,7 @@ export function FileRow(p: FileRowProps) {
 export function KanbanColumn(p: KanbanColumnProps) {
   const t = useStrings(DATA_DISPLAY_STRINGS);
   return (
-    <section className="tf-kanban" aria-label={p.title}>
+    <section style={p.style} className={cx("tf-kanban", p.className)} aria-label={p.title}>
       <div className="tf-kanban-head">
         <span
           className="tf-row"
@@ -442,7 +508,8 @@ export function Progress(p: ProgressProps) {
   const v = Math.max(0, Math.min(100, p.value || 0));
   return (
     <div
-      className={cx("tf-progress", p.tint && "tf-progress-" + p.tint)}
+      style={p.style}
+      className={cx("tf-progress", p.tint && "tf-progress-" + p.tint, p.className)}
       role="progressbar"
       aria-valuenow={v}
       aria-valuemin={0}
@@ -468,10 +535,11 @@ export function ProgressRing(p: ProgressRingProps) {
     on = useMounted(150);
   return (
     <div
-      className="tf-ring"
+      className={cx("tf-ring", p.className)}
       style={{
         width: size,
         height: size,
+        ...p.style,
       }}
       role="img"
       aria-label={(p.label || t.progress) + " " + formatPercent(v, { maximumFractionDigits: 2 })}

package/src/components/data-table.tsx

@@ -7,7 +7,7 @@ import { cx } from "../cx.js";
 import { SearchField } from "./inputs.js";
 import { Popover, Tooltip } from "./overlays.js";
 import { Menu } from "./feedback.js";
-import type { DataTableProps, FilterBarProps, FilterDef } from "./types.js";
+import type { BaseProps, DataTableProps, FilterBarProps, FilterDef } from "./types.js";
 
 /* ── Data table: sort, select + bulk bar, column toggles, sticky head, expandable rows ── */
 export function FilterBar(p: FilterBarProps) {
@@ -22,7 +22,7 @@ export function FilterBar(p: FilterBarProps) {
   }
   const avail = (p.filters || []).filter((f) => keys.indexOf(f.key) < 0);
   return (
-    <div className="tf-filterbar">
+    <div style={p.style} className={cx("tf-filterbar", p.className)}>
       {p.search && (
         <SearchField
           placeholder={p.search}
@@ -120,10 +120,12 @@ export function FilterBar(p: FilterBarProps) {
   );
 }
 
-export function AddFilterMenu(p: {
-  avail: FilterDef[];
-  onPick?: (key: string, option: string) => void;
-}) {
+export function AddFilterMenu(
+  p: BaseProps & {
+    avail: FilterDef[];
+    onPick?: (key: string, option: string) => void;
+  },
+) {
   const t = useStrings(DATA_TABLE_STRINGS);
   const step = React.useState<FilterDef | null>(null);
   const cur = step[0];
@@ -150,6 +152,8 @@ export function AddFilterMenu(p: {
     );
   return (
     <Menu
+      style={p.style}
+      className={p.className}
       items={p.avail.map((f) => ({
         label: f.label,
         icon: f.icon || "filter",
@@ -224,7 +228,7 @@ export function DataTable<R extends Record<string, any> = Record<string, any>>(
   const span = vis.length + (p.selectable ? 1 : 0) + (p.renderExpanded ? 1 : 0);
   const selRows = rows.filter((r) => selected.indexOf(r[rk]) >= 0);
   return (
-    <div className={cx("tf-dt", p.className)}>
+    <div className={cx("tf-dt", p.className)} style={p.style}>
       {(p.toolbar || p.columnToggle !== false) && (
         <div className="tf-dt-toolbar">
           {p.toolbar}

package/src/components/developer.tsx

@@ -38,6 +38,7 @@ export function LogView(p: LogViewProps) {
       className={cx("tf-log", p.className)}
       style={{
         maxHeight: p.maxHeight,
+        ...p.style,
       }}
     >
       {p.title && (
@@ -90,7 +91,7 @@ export function SecretField(p: SecretFieldProps) {
     copied = React.useState(false);
   const masked = (p.prefix || "") + "••••••••" + (p.last4 || "");
   return (
-    <div className="tf-secret">
+    <div style={p.style} className={cx("tf-secret", p.className)}>
       <Icon name="key" size={15} />
       <span className="tf-mono tf-secret-val">{shown[0] && p.value ? p.value : masked}</span>
       {p.meta && <span className="tf-secret-meta">{p.meta}</span>}
@@ -173,7 +174,15 @@ export function MoneyInput(p: MoneyInputProps) {
   }
   const sym = formatMoney(0, p.currency).replace(/[\d.,\s]/g, "");
   return (
-    <FormField id={id} label={p.label} hint={p.hint} error={p.error} required={p.required}>
+    <FormField
+      style={p.style}
+      className={p.className}
+      id={id}
+      label={p.label}
+      hint={p.hint}
+      error={p.error}
+      required={p.required}
+    >
       <div className="tf-money">
         <span
           className="tf-inputwrap"
@@ -248,7 +257,7 @@ export function MoneyInput(p: MoneyInputProps) {
 
 export function SettingsLayout(p: SettingsLayoutProps) {
   return (
-    <div className="tf-settings">
+    <div style={p.style} className={cx("tf-settings", p.className)}>
       {(p.sections || []).map((s, i) => (
         <section key={s.id || i} className="tf-settings-row">
           <div className="tf-settings-label">
@@ -321,7 +330,7 @@ export function StatCell(p: StatCellProps) {
   const up = p.delta != null && p.delta >= 0,
     good = p.invert ? !up : up;
   return (
-    <div className={cx("tf-statcell", p.tint && "tf-bg-" + p.tint, p.className)}>
+    <div style={p.style} className={cx("tf-statcell", p.tint && "tf-bg-" + p.tint, p.className)}>
       <div className="tf-statcell-top">
         <span className="tf-statcell-label">{p.label}</span>
         {p.icon && <TintIcon icon={p.icon} tint={p.iconTint || "plain"} />}
@@ -363,7 +372,7 @@ export function UptimeBar(p: UptimeBarProps) {
   const days = (p.days || []).map((d) => (typeof d === "string" ? { status: d } : d)),
     hov = React.useState<number | null>(null);
   return (
-    <div className="tf-uptime">
+    <div style={p.style} className={cx("tf-uptime", p.className)}>
       <div
         className="tf-uptime-bar"
         onPointerLeave={() => {
@@ -408,7 +417,7 @@ export function Meter(p: MeterProps) {
     tone =
       p.tone || (pct >= (p.danger || 90) ? "blush" : pct >= (p.warn || 75) ? "butter" : "mint");
   return (
-    <div className="tf-meter">
+    <div style={p.style} className={cx("tf-meter", p.className)}>
       <div className="tf-usage-top">
         <span>{p.label}</span>
         <b>{p.text || formatPercent(pct)}</b>

package/src/components/feedback.tsx

@@ -38,6 +38,7 @@ export function Skeleton(p: SkeletonProps) {
       style={{
         width: p.width,
         height: p.height || (v === "circle" ? p.width : undefined),
+        ...p.style,
       }}
     />
   );
@@ -185,7 +186,7 @@ export function Modal(p: ModalProps) {
   const pr = usePresence(p.open ?? true);
   if (!pr.mounted) return null;
   return (
-    <div {...leaving(pr.closing)} className="tf-modal-wrap" style={p.style}>
+    <div {...leaving(pr.closing)} className={cx("tf-modal-wrap", p.className)} style={p.style}>
       <div className="tf-backdrop" aria-hidden />
       <div className="tf-modal" role="dialog" aria-modal="true" aria-label={p.title}>
         <span className="tf-modal-close">
@@ -214,7 +215,7 @@ export function Modal(p: ModalProps) {
 
 export function Toast(p: ToastProps) {
   return (
-    <div className="tf-toast" role="status">
+    <div style={p.style} className={cx("tf-toast", p.className)} role="status">
       <TintIcon icon={p.icon || "check"} tint={p.tint || "mint"} />
       {p.children}
       {p.action && (
@@ -228,7 +229,7 @@ export function Toast(p: ToastProps) {
 
 export function EmptyState(p: EmptyStateProps) {
   return (
-    <div className="tf-empty tf-in">
+    <div style={p.style} className={cx("tf-empty tf-in", p.className)}>
       <TintIcon icon={p.icon || "sparkle"} tint={p.tint || "sky"} size={44} />
       <p className="tf-empty-title">{p.title}</p>
       {p.text && <p className="tf-empty-text">{p.text}</p>}
@@ -258,6 +259,7 @@ export function Alert(p: AlertProps) {
   const tone = p.tone || "info";
   return (
     <div
+      style={p.style}
       className={cx("tf-alert", "tf-alert-" + tone, p.className)}
       role={tone === "danger" || tone === "warning" ? "alert" : "status"}
     >