@eifi1/ui-kit 0.47.0 → 0.48.0

package/src/components/alert-banner.tsx

@@ -1,3 +1,4 @@
+import { useId, useLayoutEffect, useRef, useState } from "react";
 import type { ComponentPropsWithoutRef, MouseEvent, ReactNode, Ref } from "react";
 import { AlertTriangle, CheckCircle2, ChevronRight, Info, X } from "lucide-react";
 import { cn } from "../lib/cn";
@@ -195,6 +196,34 @@ interface AlertBannerBaseProps extends Omit<ComponentPropsWithoutRef<"div">, "on
   /** Accessible name of the ×. Default: `common.dismiss` from the
    *  {@link UiKitProvider}, else "Dismiss". */
   dismissLabel?: string;
+  /**
+   * 0.48: on a phone (below the kit's text-size-aware `md`) hold the message to ONE line,
+   * with a "More" / "Less" toggle after it (`aria-expanded`, `aria-controls` the message;
+   * `common.showMore` / `common.showLess`). From `md` up nothing changes. The toggle only
+   * shows while the line actually cuts the message off.
+   *
+   * keksdose dev#611 (UX-1.2): its beta notice took three to four lines (~100px) above
+   * every phone screen, and the app built the clamp and the button around the banner's
+   * children by hand. Ignored on a whole-row banner (`href` / `onClick`): a toggle cannot
+   * sit inside the row's own link or button.
+   */
+  clampMobile?: boolean;
+  /**
+   * Where a box's {@link action} goes on a phone (below `sm`). 0.48.
+   *
+   * `own-line` (default): a line of its own under the message, lined up with it
+   * (kastlan 53 — a long message beside a long button squeezed into a column).
+   *
+   * `flow`: on the message's line while the message (with its glyph) keeps 10rem, else at the END of the
+   * next line — for a short message and a short action, which a line of their own each
+   * would stack for nothing. keksdose dev #623: the budget card's "5 underfunded
+   * categories" + "Assign" built this with descendant overrides on the kit's classes.
+   * The basis is in rem, so it grows with the text size: at Large the action drops a
+   * line sooner, by itself. The × stays at the top end either way; `clampMobile` works
+   * alongside. From `sm` up nothing changes. Ignored by `strip` (which flows like this
+   * already) and `inline`.
+   */
+  actionPlacement?: "own-line" | "flow";
   children: ReactNode;
   /**
    * The banner's frame — where the rest of the props go (0.34, API-2, refactor audit
@@ -245,6 +274,8 @@ export function AlertBanner({
   icon,
   onDismiss,
   dismissLabel,
+  clampMobile = false,
+  actionPlacement = "own-line",
   href,
   onClick,
   className,
@@ -262,6 +293,26 @@ export function AlertBanner({
   const inlineRow = inline && !block;
   const resolvedRole = role ?? (inline && live ? (tone === "danger" ? "alert" : "status") : undefined);
 
+  // `clampMobile`: the message's one-line clamp below `md`, and whether that line holds
+  // it all (then there is nothing to show "More" of). Measured while collapsed — the
+  // clamp is what makes `scrollHeight` exceed the box — and again whenever its box
+  // changes size, which a rotation or crossing `md` does. With no layout (a test, the
+  // server) the box is 0 tall, which reads as "may not fit": the toggle stays.
+  const clamp = clampMobile && !interactive;
+  const bodyId = useId();
+  const bodyRef = useRef<HTMLSpanElement>(null);
+  const [expanded, setExpanded] = useState(false);
+  const [fits, setFits] = useState(false);
+  useLayoutEffect(() => {
+    const el = bodyRef.current;
+    if (!clamp || expanded || !el) return;
+    const check = () => setFits(el.clientHeight > 0 && el.scrollHeight <= el.clientHeight + 1);
+    check();
+    const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(check);
+    ro?.observe(el);
+    return () => ro?.disconnect();
+  }, [clamp, expanded, children]);
+
   const Glyph = TONE_GLYPH[tone];
   // Onto the first line of a box's text: 2px at 14px/20px, 1px at 12px/16px.
   const nudge = inlineRow || strip ? undefined : sm ? "mt-px" : "mt-0.5";
@@ -285,7 +336,14 @@ export function AlertBanner({
   // squeezed "Please confirm your email address…" into a ~100px column beside a
   // "Resend verification email" button. There the action takes a line of its own under
   // the message, and the × stays at the top end; from sm up the box is one row as before.
-  const boxWraps = !inline && !strip && action !== undefined && action !== null;
+  const boxAction = !inline && !strip && action !== undefined && action !== null;
+  // `flow` (0.48): glyph + message and the action in a row of their own that wraps
+  // below sm; the × stays outside it, at the top end.
+  const flow = boxAction && actionPlacement === "flow";
+  const boxWraps = boxAction && !flow;
+  const flowRow = cn("flex min-w-0 flex-1 items-center max-sm:flex-wrap", sm ? "gap-1.5" : "gap-2");
+  // The 10rem the message keeps beside the action before the action wraps.
+  const flowBasis = flow ? "max-sm:basis-40" : undefined;
   const row = cn(
     inlineRow
       ? "inline-flex items-center"
@@ -309,10 +367,49 @@ export function AlertBanner({
       );
   const focusRing = cn(FOCUS_RING, "focus-visible:ring-offset-1 focus-visible:ring-offset-surface");
 
+  const contentBody = clamp ? (
+    // Below `md` a row: the message, clamped, then the toggle on its baseline. From
+    // `md` up a plain span with the message in it, as without the prop.
+    <span
+      className={cn(
+        !inlineRow && grow,
+        "min-w-0 text-start max-md:flex max-md:items-baseline max-md:gap-2",
+      )}
+    >
+      {/* The clamp is deliberate: the rest is one tap away behind More, so the size sweep's
+          truncation gate (scripts/screenshot-sizes.mjs) leaves it alone. */}
+      <span
+        id={bodyId}
+        ref={bodyRef}
+        data-truncate-ok=""
+        className={cn("max-md:min-w-0", !expanded && "max-md:line-clamp-1")}
+      >
+        {children}
+      </span>
+      {(expanded || !fits) && (
+        <button
+          type="button"
+          aria-expanded={expanded}
+          aria-controls={bodyId}
+          onClick={() => setExpanded((v) => !v)}
+          className={cn(
+            "relative z-10 shrink-0 rounded-sm font-medium underline underline-offset-2 md:hidden",
+            focusRing,
+          )}
+        >
+          {expanded ? common.showLess : common.showMore}
+        </button>
+      )}
+    </span>
+  ) : (
+    <span className={cn(!inlineRow && (nested ? "flex-1" : grow), "min-w-0 text-start")}>
+      {children}
+    </span>
+  );
   const content = (
     <>
       {glyph}
-      <span className={cn(!inlineRow && (nested ? "flex-1" : grow), "min-w-0 text-start")}>{children}</span>
+      {contentBody}
       {interactive && (
         <ChevronRight
           aria-hidden
@@ -354,7 +451,7 @@ export function AlertBanner({
         className={cn(
           "relative z-10 flex max-w-full shrink-0 flex-wrap items-center gap-2",
           !strip && !inlineRow && "self-center",
-          strip && "ms-auto",
+          (strip || flow) && "ms-auto",
           // Last, on a line of its own, lined up with the message (past the glyph).
           boxWraps && cn("max-sm:order-last max-sm:basis-full", glyph && (sm ? "max-sm:ps-5" : "max-sm:ps-6")),
         )}
@@ -378,8 +475,24 @@ export function AlertBanner({
         role={resolvedRole}
         className={cn(row, frame, TONE_TEXT[tone], className)}
       >
-        {content}
-        {trailing}
+        {flow ? (
+          <>
+            <div className={flowRow} data-action-flow="">
+              {/* The glyph rides with the message, on its first line; the two are
+                  centred against the action as one, as the whole-row button is. */}
+              <span className={cn("flex min-w-0 flex-1 items-start", flowBasis, sm ? "gap-1.5" : "gap-2")}>
+                {glyph}
+                {contentBody}
+              </span>
+              {trailing}
+            </div>
+          </>
+        ) : (
+          <>
+            {content}
+            {trailing}
+          </>
+        )}
         {dismiss}
       </div>
     );
@@ -393,6 +506,7 @@ export function AlertBanner({
     ? cn(
         "flex min-w-0 text-start",
         grow,
+        flowBasis,
         sm ? "gap-1.5" : "gap-2",
         inlineRow || strip ? "items-center" : "items-start",
         "outline-none after:absolute after:inset-0 after:content-['']",
@@ -440,8 +554,18 @@ export function AlertBanner({
       role={resolvedRole}
       className={cn("relative", row, frame, TONE_TEXT[tone], hover, className)}
     >
-      {rowAction}
-      {trailing}
+      {flow ? (
+        // Not positioned: the row's stretched `after:` target must still cover the frame.
+        <div className={flowRow} data-action-flow="">
+          {rowAction}
+          {trailing}
+        </div>
+      ) : (
+        <>
+          {rowAction}
+          {trailing}
+        </>
+      )}
       {dismiss}
     </div>
   );

package/src/components/button-look.ts

@@ -41,6 +41,12 @@ const BUTTON_BASE = cn(
  */
 export const TOUCH_TARGET_LARGE = "large:min-h-[48px] large:min-w-[48px]";
 
+/** The 48 px target at Large for a control whose BOX cannot grow (a chip's or a tab's
+ *  action, IconButton `2xs`; Tabs' overflow cues, 0.48 KS N3): an invisible `::after`
+ *  centred on it takes the taps a finger lands round the glyph. Not public. */
+export const HIT_AREA_LARGE =
+  "relative large:after:absolute large:after:inset-[calc((100%-48px)/2)] large:after:content-['']";
+
 export type ButtonSize = "sm" | "md";
 
 // Box geometry per size, split out of the base so the two cannot be merged into one

package/src/components/combobox-core.tsx

@@ -19,7 +19,7 @@ import { Spinner } from "./spinner";
 import { useAnchorDir } from "./use-anchor-dir";
 import { type AnchorRect } from "../hooks/use-anchored-rect";
 import { anchoredInline, useAnchoredPanel, viewportSize, type AnchoredPanel } from "../hooks/use-anchored-panel";
-import { takeEscape, useDismissLayer, useOutsideClick } from "../hooks/use-dismiss";
+import { pressInside, takeEscape, useDismissLayer, useOutsideClick } from "../hooks/use-dismiss";
 import { useOverlayHistory } from "../hooks/use-overlay-history";
 import { isImeEnter } from "../lib/ime";
 import { foldForSearch } from "../lib/text-match";
@@ -1066,6 +1066,12 @@ export function ComboboxPanel<V extends string | number>({
       ref={panelRef}
       dir={dir}
       onKeyDown={onKeyDown}
+      // A press in a panel opened from a row is inside this list for the core's outside
+      // press, though portalled elsewhere (dev#623).
+      onPointerDownCapture={(e) => {
+        rest.onPointerDownCapture?.(e);
+        pressInside(panelRef)?.(e);
+      }}
       // `placement` keeps the panel inside the region actually on screen: on a phone
       // the search box below pulls up the keyboard, and a panel pinned under a
       // low trigger would otherwise sit entirely behind it (feedback #135). Flipped

package/src/components/data-table-column-settings.tsx

@@ -17,6 +17,8 @@ export function ColumnSettingsPanel<T>({
   columns,
   hiddenCols,
   setHiddenCols,
+  autoHidden,
+  keepColumn,
   showSettings,
   setShowSettings,
   columnsCountLabel,
@@ -27,6 +29,11 @@ export function ColumnSettingsPanel<T>({
   columns: DataTableColumn<T>[];
   hiddenCols: Set<string>;
   setHiddenCols: Dispatch<SetStateAction<Set<string>>>;
+  /** The columns the table's width leaves out (`fitPriority`, 0.48): unticked, and
+   *  marked "hidden for width". */
+  autoHidden: Set<string>;
+  /** A tick keeps a column in whatever the width; an untick drops that (data-table-fit.ts). */
+  keepColumn: (key: string, on: boolean) => void;
   showSettings: boolean;
   setShowSettings: (open: boolean) => void;
   /** "Columns (n/m)", the rail's text and name. */
@@ -102,7 +109,10 @@ export function ColumnSettingsPanel<T>({
           <div className="flex flex-col gap-0.5">
             {columns.map((col) => {
               if (isTableOwnColumn(col.key)) return null;
-              const checked = !hiddenCols.has(col.key);
+              // Ticked = drawn: a column left out for width is unticked, so the boxes
+              // and "Columns (8/10)" say the same (keksdose live #451).
+              const forWidth = !hiddenCols.has(col.key) && autoHidden.has(col.key);
+              const checked = !hiddenCols.has(col.key) && !forWidth;
               const headerLabel = columnLabel(col);
               return (
                 <label
@@ -114,6 +124,7 @@ export function ColumnSettingsPanel<T>({
                     className="size-3.5 shrink-0"
                     checked={checked}
                     onChange={(e) => {
+                      keepColumn(col.key, e.target.checked);
                       setHiddenCols((s) => {
                         const next = new Set(s);
                         if (e.target.checked) next.delete(col.key);
@@ -125,7 +136,17 @@ export function ColumnSettingsPanel<T>({
                   {/* The panel is `w-56`: a long column name wraps from Large up rather
                       than reading "Accoun…" beside its box (text size §10.17, round
                       0.34 T1). */}
-                  <span className="min-w-0 truncate-until-large">{headerLabel}</span>
+                  {forWidth ? (
+                    // Under the name, as part of the box's name: "Email, hidden for width".
+                    <span className="flex min-w-0 flex-col">
+                      <span className="truncate-until-large">{headerLabel}</span>
+                      <span className="text-micro text-muted" data-hidden-for-width="">
+                        {labels.hiddenForWidth}
+                      </span>
+                    </span>
+                  ) : (
+                    <span className="min-w-0 truncate-until-large">{headerLabel}</span>
+                  )}
                 </label>
               );
             })}

package/src/components/data-table-fit.ts

@@ -0,0 +1,187 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import type { DataTableColumn } from "./data-table";
+
+// DataTable's fit to its own width (0.48, keksdose live #451: "On expanded sidebar for
+// desktop the table scrolls horizontally. On collapsed sidebar it fits […] Compute the
+// width selectively"). Two column options, both opt-in:
+//
+// - `grow`: the column takes what the others leave and ellipsises (`w-full max-w-0` on
+//   its cells: in an auto table layout that is "the rest of the row", never its content's
+//   width), so one long title can no longer widen the table.
+// - `fitPriority`: while the table is wider than its scroller — or, with a `grow` column,
+//   while that column would get less than {@link GROW_MIN_REM} — the table leaves out
+//   its `fitPriority` columns, the LOWEST number first (ties: the later column first),
+//   and brings them back in the reverse order as soon as the table, as it is NOW, has
+//   room for them (its need re-measured, plus the column's own header width from when
+//   it was left out), so narrower content (a filter, another page) counts as much as a
+//   wider scroller. The scroller's own width, through a ResizeObserver: a sidebar, a
+//   narrower window, the Columns drawer and Large text all count the same.
+
+/** The least a `grow` column keeps before the table starts leaving columns out: about
+ *  a sentence of a title. In rem, so Large text asks for more. */
+export const GROW_MIN_REM = 10;
+
+/** The `<th>`/`<td>` classes of a `grow` column. `truncate-until-large`: one line and an
+ *  ellipsis at Normal, a wrap from Large up (text size §10.17), as every kit title. The
+ *  header's `min-w-[10rem]` ({@link GROW_MIN_REM}) is the floor once no `fitPriority`
+ *  column is left to leave out: the table then scrolls sideways rather than crushing the
+ *  column it exists for (Kurvenschmiede S1, 0.48: Subject was 24px at 1100px). */
+export const GROW_HEAD_CLASS = "w-full max-w-0 min-w-[10rem]";
+export const GROW_CELL_CLASS = "w-full max-w-0 truncate-until-large";
+
+/** Every OTHER cell of a table with a `grow` column (kastlan S2, 0.48). A `w-full` column
+ *  squeezes the rest to their min-content width, so any text with a space broke in two
+ *  even at 1920px ("CHF 2'568.38", "Peter Mueller", a date with its time). One line at
+ *  Normal, so a column is never narrower than its text and `fitPriority` measures what
+ *  the columns really need; from Large up the cell wraps as before (§10.17). The headers
+ *  are `whitespace-nowrap` already. A column whose prose should wrap anyway passes
+ *  `not-large:whitespace-normal` in its `className`. */
+export const GROW_PEER_CELL_CLASS = "not-large:whitespace-nowrap";
+
+// A cell's own flex-wrap row (chips) is left to wrap beside a `grow` column: a row of
+// badges reads as well stacked, and held to one line it widened the user roster's Status
+// until kastlan's admin pane scrolled 21px at 1280px (0.48 build review 2, kastlan S1).
+
+/** The auto-hide order: lowest `fitPriority` first, the later column first on a tie. */
+export function fitHideOrder<T>(columns: DataTableColumn<T>[]): DataTableColumn<T>[] {
+  return columns
+    .map((col, index) => ({ col, index }))
+    .filter(({ col }) => col.fitPriority != null)
+    .sort((a, b) => a.col.fitPriority! - b.col.fitPriority! || b.index - a.index)
+    .map(({ col }) => col);
+}
+
+/**
+ * Which columns the table leaves out for width, and the Columns panel's "keep it".
+ *
+ * A column the user TICKS in the Columns panel is theirs: it is never left out for width
+ * again while the table is mounted (`keep`): the table makes room by leaving out the next
+ * candidate, and scrolls sideways once none is left — what they asked for. Unticking it hides it as before (the persisted `hiddenCols`) and
+ * drops the keep. Keeps are not persisted: on the next visit the table fits again.
+ */
+export function useColumnFit<T>({
+  columns,
+  hiddenCols,
+  headRefs,
+  scroller,
+  enabled,
+}: {
+  columns: DataTableColumn<T>[];
+  /** The user's hidden columns: never candidates (they are out already). */
+  hiddenCols: Set<string>;
+  headRefs: Map<string, HTMLTableCellElement>;
+  /** The desktop scroller, read after render (it is declared below the call). */
+  scroller: () => HTMLElement | null;
+  /** The wide layout. On a phone (the card list) nothing is left out for width. */
+  enabled: boolean;
+}): {
+  /** The columns left out for width now — empty while off. */
+  autoHidden: Set<string>;
+  /** The user's choice in the Columns panel: `true` keeps the column in whatever the width. */
+  keep: (key: string, on: boolean) => void;
+} {
+  const [kept, setKept] = useState<ReadonlySet<string>>(() => new Set());
+  const [hidden, setHidden] = useState<string[]>([]);
+  // A column's own header width, written when it is left out: it comes back once the
+  // table's need as it is now, plus this, fits the scroller (keksdose S3, 0.48: not the
+  // whole table's need at hide time, which went stale when the content narrowed).
+  const ownWidth = useRef(new Map<string, number>());
+
+  const hasFit = columns.some((c) => c.fitPriority != null);
+  const active = enabled && hasFit;
+  const order = useMemo(
+    () => fitHideOrder(columns).filter((c) => !hiddenCols.has(c.key) && !kept.has(c.key)),
+    [columns, hiddenCols, kept],
+  );
+  // Only the candidates still in play, in hide order — a column the user hid or kept
+  // since, or one the app dropped, is no longer "hidden for width".
+  const current = useMemo(
+    () => (active ? order.filter((c) => hidden.includes(c.key)).map((c) => c.key) : []),
+    [active, order, hidden],
+  );
+  const growKey = columns.find((c) => c.grow && !hiddenCols.has(c.key))?.key;
+
+  // What `measure` reads, refreshed after each render (before the measure below runs):
+  // the ResizeObserver's callback is set up once and must see the current columns.
+  const latest = useRef({ order, current, growKey, active, scroller });
+  useLayoutEffect(() => {
+    latest.current = { order, current, growKey, active, scroller };
+  });
+
+  const measure = useCallback(() => {
+    const { order, current, growKey, active, scroller } = latest.current;
+    const el = scroller();
+    if (!active || !el) return;
+    const table = el.querySelector("table");
+    const avail = el.clientWidth;
+    // Not laid out (display:none, jsdom): nothing to fit to.
+    if (!table || avail <= 0) return;
+    const growTh = growKey ? headRefs.get(growKey) : undefined;
+    const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+    let need = growTh
+      ? table.offsetWidth - growTh.offsetWidth + GROW_MIN_REM * rem
+      : table.offsetWidth;
+    if (!growTh && need <= avail + 0.5 && current.length > 0) {
+      // A `w-full` table is at least the scroller's width, which says nothing about how
+      // much room its content leaves: probe its content's width (what it takes once it
+      // overflows) for the bring-back below. Read and put back in one layout pass.
+      const before = table.style.width;
+      table.style.width = "min-content";
+      need = table.offsetWidth;
+      table.style.width = before;
+    }
+    if (need > avail + 0.5) {
+      // Leave out, in order, until the rest fits: each column saves its header's width
+      // (the others are at their content's width while a `grow` column takes the rest).
+      const next = [...current];
+      for (const col of order) {
+        if (need <= avail + 0.5) break;
+        if (next.includes(col.key)) continue;
+        const w = headRefs.get(col.key)?.offsetWidth ?? 0;
+        ownWidth.current.set(col.key, w);
+        need -= w;
+        next.push(col.key);
+      }
+      if (next.length !== current.length) setHidden(next);
+      return;
+    }
+    // Bring back, the last left out first, while the table as it is now has room for
+    // them. Should the column have grown since (wider content), the next measure leaves
+    // it out again before paint and records its new width, so it cannot flicker.
+    let n = current.length;
+    while (n > 0) {
+      const w = ownWidth.current.get(current[n - 1]);
+      if (w == null || need + w > avail + 0.5) break;
+      need += w;
+      n--;
+    }
+    if (n !== current.length) setHidden(current.slice(0, n));
+  }, [headRefs]);
+
+  // After every render: rows, a filter or a page can widen a column as much as a resize.
+  // Before paint, so a column the table cannot hold is never drawn first.
+  useLayoutEffect(() => {
+    measure();
+  });
+
+  useEffect(() => {
+    const el = latest.current.scroller();
+    if (!active || !el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => measure());
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [active, measure]);
+
+  const keep = useCallback((key: string, on: boolean) => {
+    setKept((s) => {
+      if (s.has(key) === on) return s;
+      const next = new Set(s);
+      if (on) next.add(key);
+      else next.delete(key);
+      return next;
+    });
+  }, []);
+
+  const autoHidden = useMemo(() => new Set(current), [current]);
+  return { autoHidden, keep };
+}