@eifi1/ui-kit 0.47.0 → 0.48.0

package/src/components/data-table-groups.tsx

@@ -0,0 +1,275 @@
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import type { ReactNode, RefObject } from "react";
+import { cn } from "../lib/cn";
+import { Button } from "./button";
+import { Spinner } from "./spinner";
+
+/**
+ * One level of {@link DataTableProps.groupBy} (0.48, keksdose dev #605): the rows are cut
+ * into consecutive runs of equal `key` — the rows must already be ordered so equal keys
+ * are contiguous, as for `mobileGroupBy` — and each run is headed by a full-width band.
+ *
+ * The same object drives the phone: `mobileGroupBy` takes a level too, so
+ * `groupBy={[period, day]} mobileGroupBy={period}` is one definition for both layouts.
+ */
+export interface DataTableGroupBy<T> {
+  /** The group a row belongs to. */
+  key: (row: T) => string;
+  /** The band's label. Default: the key itself. */
+  label?: (key: string, rows: T[]) => ReactNode;
+  /**
+   * The band's end slot — a count, a total ("176 · +8'782.30 · −3'200.10"). `rows` are
+   * the group's rows the table holds; an app whose total covers rows not yet loaded
+   * looks it up by `key` instead.
+   */
+  end?: (key: string, rows: T[]) => ReactNode;
+}
+
+/**
+ * {@link DataTableProps.loadMore} (0.48, keksdose dev #605): a footer in place of the
+ * pager that loads the next slice of rows — on its own as it scrolls into view (an
+ * IntersectionObserver), and through a button that is always there for the keyboard and
+ * the screen reader. The owner appends the rows; the table renders every row it is given.
+ */
+export interface DataTableLoadMore {
+  /** Whether there is anything left to load. False draws the end state. */
+  hasMore: boolean;
+  /** Load the next slice. Called at most once per row count while `loading` is false. */
+  onLoadMore: () => void;
+  /** A load is in flight: the button says "Loading…" and ignores presses. */
+  loading?: boolean;
+  /** The button's words — what it loads ("Load August 2026"). Default: the kit's "Load more". */
+  label?: ReactNode;
+  /** What the footer says once `hasMore` is false. Default: the kit's "All rows loaded";
+   *  `null` draws nothing. */
+  endLabel?: ReactNode;
+  /** Load as the footer scrolls into view. Default true; false leaves only the button. */
+  auto?: boolean;
+}
+
+/** A run of rows under one band; `start` is its first row's index in the slice. */
+export interface RowGroup<T> {
+  key: string;
+  rows: T[];
+  start: number;
+  /** The second level's runs inside this one, or null with one level. */
+  children: RowGroup<T>[] | null;
+}
+
+/** Consecutive runs by `level.key`, nested once for a second level. */
+export function groupRows<T>(rows: T[], levels: readonly DataTableGroupBy<T>[], offset = 0): RowGroup<T>[] {
+  const [level, ...rest] = levels;
+  if (!level) return [];
+  const out: RowGroup<T>[] = [];
+  rows.forEach((row, i) => {
+    const key = level.key(row);
+    const last = out[out.length - 1];
+    if (last && last.key === key) last.rows.push(row);
+    else out.push({ key, rows: [row], start: offset + i, children: null });
+  });
+  if (rest.length > 0) for (const g of out) g.children = groupRows(g.rows, rest.slice(0, 1), g.start);
+  return out;
+}
+
+/** `groupBy` as a list of at most two levels. */
+export function groupLevels<T>(
+  groupBy: DataTableGroupBy<T> | readonly [DataTableGroupBy<T>, DataTableGroupBy<T>?] | undefined,
+): DataTableGroupBy<T>[] {
+  if (!groupBy) return [];
+  const list = "key" in groupBy ? [groupBy] : (groupBy as readonly (DataTableGroupBy<T> | undefined)[]);
+  return list.filter((l): l is DataTableGroupBy<T> => !!l).slice(0, 2);
+}
+
+/**
+ * The bands' sticky offsets: the first level under the header (and under a sticky
+ * `leadingRow`), the second under the first. Measured — the header grows at Large text,
+ * a band's end slot can wrap — and followed with a ResizeObserver.
+ */
+export function useGroupBandTops(
+  tableRef: RefObject<HTMLTableElement | null>,
+  enabled: boolean,
+  signature: string,
+): [number, number] {
+  const [tops, setTops] = useState<[number, number]>([0, 0]);
+  useLayoutEffect(() => {
+    const table = tableRef.current;
+    if (!enabled || !table) return;
+    const parts = [
+      table.tHead,
+      table.querySelector<HTMLElement>("[data-leading-row='sticky']"),
+      table.querySelector<HTMLElement>("th[data-group-band='1']"),
+    ];
+    const measure = () => {
+      const [head, lead, band] = parts.map((el) => (el ? el.getBoundingClientRect().height : 0));
+      setTops((prev) => (prev[0] === head + lead && prev[1] === head + lead + band ? prev : [head + lead, head + lead + band]));
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    for (const el of parts) if (el) observer.observe(el);
+    return () => observer.disconnect();
+  }, [tableRef, enabled, signature]);
+  return tops;
+}
+
+/**
+ * A band row. A `<th scope="rowgroup">` spanning the row — the header of the `<tbody>` it
+ * opens, which a screen reader announces as the reader enters the group — and sticky on
+ * the cell, not the `<tr>`, as the header's and the leading row's are. Opaque, under the
+ * sticky leading row's `z-[5]`: the first level `z-[4]` over the second's `z-[3]`, so a
+ * period arriving from below covers the day still pinned under the one before. The line
+ * over it is the cell's own `::before`, which moves with the stuck cell.
+ */
+export function DataTableGroupBand({
+  level,
+  colSpan,
+  top,
+  compact,
+  label,
+  end,
+}: {
+  level: 1 | 2;
+  colSpan: number;
+  top: number;
+  compact: boolean;
+  label: ReactNode;
+  end: ReactNode;
+}) {
+  return (
+    <tr data-group-row={level}>
+      <th
+        scope="rowgroup"
+        colSpan={colSpan}
+        data-group-band={level}
+        style={{ top }}
+        className={cn(
+          "sticky p-0 text-start align-middle",
+          "before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:z-[1] before:h-px before:bg-[var(--border)] before:content-['']",
+          level === 1 ? "z-[4] bg-surface-2 font-semibold text-primary" : "z-[3] bg-surface font-medium text-secondary",
+          level === 1 ? (compact ? "text-xs" : "text-sm") : "text-xs",
+        )}
+      >
+        {/* Pinned to what the scroller shows, as the expansion row's panel is: the end
+            slot stays at the visible end of a table wider than its scroller. */}
+        <div className="w-0 min-w-full">
+          <div
+            className={cn(
+              "sticky start-0 flex w-[var(--dt-visible-w,100%)] max-w-full flex-wrap items-baseline justify-between gap-x-3",
+              compact ? "px-2 py-1" : level === 1 ? "px-3 py-2" : "px-3 py-1.5",
+            )}
+          >
+            <span className="min-w-0">{label}</span>
+            {end != null && end !== false && <span className="ms-auto tabular-nums">{end}</span>}
+          </div>
+        </div>
+      </th>
+    </tr>
+  );
+}
+
+/**
+ * The load-more footer. Observed against the viewport (an implicit root sees through the
+ * clipping scroller, so it works in a bounded body, under `fillHeight`, and in a page that
+ * scrolls), and guarded: one call per row count, none while `loading`, so an observer
+ * that reports twice — or a footer still in view while the owner sets `loading` — loads
+ * once. When the rows arrive and the footer is still in view (a short slice), it loads
+ * again, until the scroller is full.
+ */
+export function DataTableLoadMoreFooter({
+  loadMore,
+  rowCount,
+  labels,
+  compact,
+  as: Tag = "div",
+}: {
+  loadMore: DataTableLoadMore;
+  rowCount: number;
+  labels: { loadMore: string; allLoaded: string; loading: string };
+  compact: boolean;
+  as?: "div" | "li";
+}) {
+  const { hasMore, onLoadMore, loading = false, auto = true, label, endLabel } = loadMore;
+  const rootRef = useRef<HTMLElement | null>(null);
+  const endRef = useRef<HTMLParagraphElement | null>(null);
+  const firedAt = useRef<number | null>(null);
+  const buttonFocused = useRef(false);
+  // What the observer's callback acts on: the latest props, not the ones it was made with.
+  const latest = useRef({ onLoadMore, loading, rowCount });
+  useEffect(() => {
+    latest.current = { onLoadMore, loading, rowCount };
+  });
+
+  // A fresh observer whenever the rows or the in-flight flag change: its first report is
+  // the footer's position AFTER the new rows are laid out. Acting on a remembered "in
+  // view" instead fired a second load the moment the rows arrived, while the footer was
+  // still where the old last row had been (headless Chromium caught it).
+  useEffect(() => {
+    const el = rootRef.current;
+    if (!auto || !hasMore || loading || !el || typeof IntersectionObserver === "undefined") return;
+    const io = new IntersectionObserver(
+      (entries) => {
+        const now = latest.current;
+        if (!entries.some((e) => e.isIntersecting) || now.loading || firedAt.current === now.rowCount) return;
+        firedAt.current = now.rowCount;
+        now.onLoadMore();
+      },
+      { rootMargin: "200px" },
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, [auto, hasMore, loading, rowCount]);
+
+  // A focused button that goes away (nothing left) hands its focus to the end line.
+  useEffect(() => {
+    if (!hasMore && buttonFocused.current) {
+      buttonFocused.current = false;
+      endRef.current?.focus();
+    }
+  }, [hasMore]);
+
+  const end = endLabel === undefined ? labels.allLoaded : endLabel;
+  return (
+    <Tag
+      ref={(el: HTMLElement | null) => {
+        rootRef.current = el;
+      }}
+      data-table-load-more=""
+      className={cn(
+        "sticky start-0 flex w-[var(--dt-visible-w,100%)] max-w-full flex-col items-center border-t border-subtle text-center",
+        compact ? "px-2 py-2" : "px-3 py-3",
+      )}
+    >
+      {hasMore ? (
+        <Button
+          variant="secondary"
+          size="sm"
+          aria-busy={loading || undefined}
+          onFocus={() => (buttonFocused.current = true)}
+          onBlur={() => (buttonFocused.current = false)}
+          onClick={() => {
+            if (loading) return;
+            firedAt.current = rowCount;
+            onLoadMore();
+          }}
+        >
+          {loading ? (
+            <span className="inline-flex items-center gap-2">
+              <Spinner label={null} className="size-4" />
+              <bdi>{labels.loading}</bdi>
+            </span>
+          ) : (
+            (label ?? labels.loadMore)
+          )}
+        </Button>
+      ) : end != null && end !== false ? (
+        <p ref={endRef} tabIndex={-1} className="text-xs text-muted outline-none">
+          {end}
+        </p>
+      ) : null}
+      {/* Mounted throughout, so a screen reader hears the load start. */}
+      <span role="status" className="sr-only">
+        {loading ? labels.loading : ""}
+      </span>
+    </Tag>
+  );
+}

package/src/components/data-table-head.tsx

@@ -10,6 +10,7 @@ import { Tooltip } from "./tooltip";
 import type { DataTableLabels } from "./data-table-labels";
 import { isTableOwnColumn } from "./data-table-row-actions";
 import { columnLabel, logicalAlign, splitCellProps } from "./data-table-shared";
+import { GROW_HEAD_CLASS } from "./data-table-fit";
 import type { DataTableColumn, DataTableProps, FilterState } from "./data-table";
 
 // DataTable's `<thead>` on a wide screen: the select-all box, and per column the sort
@@ -147,6 +148,7 @@ export function DataTableHead<T>({
                 // Each <th> carries its own bg so the row doesn't render
                 // transparent over the data rows underneath.
                 "sticky top-0 z-10 bg-surface-2 backdrop-blur-sm",
+                col.grow && GROW_HEAD_CLASS,
                 logicalAlign(ownHead.className),
                 headClass,
               )}
@@ -223,7 +225,8 @@ export function DataTableHead<T>({
                   </Popover>
                 )}
               </div>
-              {resizable && !isTableOwnColumn(col.key) && (
+              {/* A `grow` column takes the rest: no width of its own to drag (0.48, KS N2). */}
+              {resizable && !isTableOwnColumn(col.key) && !col.grow && (
               /* 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. */

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

@@ -32,6 +32,9 @@ export interface DataTableLabels extends DataTableSortLabels {
    */
   rowDetails: string;
   autoSize: string;
+  /** Beside a column in the Columns panel that the table's width leaves out
+   *  (`fitPriority`, 0.48): "hidden for width". */
+  hiddenForWidth: string;
   loading: string;
   filters: string;
   clearAll: string;
@@ -112,6 +115,13 @@ export interface DataTableLabels extends DataTableSortLabels {
   booleanTrue: string;
   booleanFalse: string;
   booleanUnset: string;
+
+  // ---- Load more (0.48, keksdose dev #605) ----
+
+  /** The `loadMore` footer's button when the app names nothing ("Load August 2026"). */
+  loadMore: string;
+  /** The `loadMore` footer once nothing is left, unless the app says `endLabel`. */
+  allLoaded: string;
 }
 
 export const DEFAULT_DATA_TABLE_LABELS: DataTableLabels = {
@@ -125,6 +135,7 @@ export const DEFAULT_DATA_TABLE_LABELS: DataTableLabels = {
   cancelSelection: "Cancel",
   rowDetails: "Details",
   autoSize: "Auto-size columns",
+  hiddenForWidth: "hidden for width",
   loading: "Loading…",
   filters: "Filters",
   clearAll: "Clear all",
@@ -174,6 +185,8 @@ export const DEFAULT_DATA_TABLE_LABELS: DataTableLabels = {
   booleanTrue: "Yes",
   booleanFalse: "No",
   booleanUnset: "Not set",
+  loadMore: "Load more",
+  allLoaded: "All rows loaded",
   // The phone sort control (0.22.0). The same words as `DEFAULT_DATA_TABLE_SORT_LABELS`
   // in data-table.tsx, written out rather than spread in: importing that VALUE here
   // would make data-table.tsx and this module import each other (data-table.tsx reads

package/src/components/data-table-leading-row.tsx

@@ -0,0 +1,55 @@
+import { useLayoutEffect, useRef, useState } from "react";
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+/**
+ * The desktop table's `leadingRow`: one full-width cell above the data rows. With
+ * `sticky` (0.48, keksdose dev #603) the cell is pinned under the sticky header while the
+ * rows scroll — `top` is the header's height, measured and followed (a header that wraps
+ * at Large text grows). On the cell, not the `<tr>`: position:sticky on a table row is not
+ * reliable across browsers, the reason the header's sticky sits on each `<th>`. Opaque
+ * (`bg-surface`), so the rows pass beneath it; `z-[5]`, under the header's `z-10` and over
+ * the rows' own sticky cells. The line over it is the cell's own `::before`, drawn over
+ * the content (a full-width disclosure header paints its own fill) and moving with the
+ * cell; a collapsed table's row border would stay behind at the row's place.
+ */
+export function DataTableLeadingRow({
+  colSpan,
+  sticky = false,
+  children,
+}: {
+  colSpan: number;
+  sticky?: boolean;
+  children: ReactNode;
+}) {
+  const cellRef = useRef<HTMLTableCellElement>(null);
+  const [top, setTop] = useState(0);
+  useLayoutEffect(() => {
+    if (!sticky) return;
+    const head = cellRef.current?.closest("table")?.tHead;
+    if (!head) return;
+    const measure = () => setTop(head.getBoundingClientRect().height);
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(head);
+    return () => observer.disconnect();
+  }, [sticky]);
+  return (
+    <tr className={cn(!sticky && "border-t border-subtle")}>
+      <td
+        ref={cellRef}
+        colSpan={colSpan}
+        data-leading-row={sticky ? "sticky" : ""}
+        className={cn(
+          "p-0",
+          sticky &&
+            "sticky z-[5] bg-surface before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:z-[1] before:h-px before:bg-[var(--border)] before:content-['']",
+        )}
+        style={sticky ? { top } : undefined}
+      >
+        {children}
+      </td>
+    </tr>
+  );
+}

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

@@ -175,7 +175,8 @@ export function useColumnResize<T>({
       const next: Record<string, number> = {};
       const cols = columns.filter((c) => !hiddenCols.has(c.key));
       cols.forEach((col, idx) => {
-        if (idx === cols.length - 1) return;
+        // A `grow` column takes the rest by design: pinning it would undo that (0.48).
+        if (idx === cols.length - 1 || col.grow) return;
         const th = headRefs.get(col.key);
         if (th) next[col.key] = Math.ceil(th.getBoundingClientRect().width);
       });