@eifi1/ui-kit 0.6.1 → 0.7.0

package/dist/components/measured-grid.js

@@ -0,0 +1,559 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { ClipboardPaste, Eraser, Plus, Trash2 } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { horizontalStep } from "../lib/direction.js";
+import { cellNumber, isCellNumber, parseRows, splitRow } from "../lib/table-text.js";
+import { useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
+import { useWindowedRows } from "../hooks/use-windowed-rows.js";
+import { ToggleGroup } from "./toggle-group.js";
+import { Button, FIELD_INVALID, Textarea } from "./ui.js";
+const DEFAULT_MEASURED_GRID_LABELS = {
+  view: "Table view",
+  cellsView: "Cells",
+  textView: "Text",
+  addRow: "Add row",
+  removeRow: (row) => `Remove row ${row}`,
+  clear: "Clear table",
+  pasteHint: "Paste a block from a spreadsheet into any cell",
+  cell: (column, row) => `${column}, row ${row}`,
+  rowNumber: "Row",
+  rowActions: "Row actions",
+  keyboardHint: "Arrow keys move between cells. Type to replace a cell, F2 to edit it, Escape to undo the edit. Enter moves down and adds a row at the end.",
+  lineError: (line) => `Line ${line} could not be read`,
+  points: (count) => count === 1 ? "1 point" : `${count} points`,
+  problems: (count) => count === 1 ? "1 cell is not a number" : `${count} cells are not numbers`
+};
+const BLANK = "";
+const DEFAULT_ROW_HEIGHT = 28;
+const ALL_VIEWS = ["cells", "text"];
+function decimalMark(locale) {
+  try {
+    const part = new Intl.NumberFormat(locale).formatToParts(1.5).find((p) => p.type === "decimal");
+    return part?.value === "," ? "," : ".";
+  } catch {
+    return ".";
+  }
+}
+const withMark = (cell, mark) => mark === "," && isCellNumber(cell) ? cell.replace(".", ",") : cell;
+const formatCell = (value, digits, mark) => withMark(String(Number(value.toFixed(digits))), mark);
+const hasContent = (row) => row.some((cell) => cell.trim() !== "");
+function useMeasuredRows(initial, options = {}) {
+  const { digits = 4 } = options;
+  const mark = decimalMark(useKitLocale(options.locale));
+  const [cells, setCells] = useState(
+    () => (typeof initial === "function" ? initial() : initial).map(
+      (row) => row.map((value) => formatCell(value, digits, mark))
+    )
+  );
+  const { rows, ready, problems } = useMemo(() => {
+    const filled = cells.filter(hasContent);
+    const whole = filled.length >= 2 && filled.every((row) => row.every(isCellNumber));
+    return {
+      rows: whole ? filled.map((row) => row.map(cellNumber)) : [],
+      ready: whole,
+      problems: filled.flat().filter((cell) => cell.trim() !== "" && !isCellNumber(cell)).length
+    };
+  }, [cells]);
+  const setRows = useCallback(
+    (next) => setCells(next.map((row) => row.map((value) => formatCell(value, digits, mark)))),
+    [digits, mark]
+  );
+  const props = useMemo(() => ({ cells, onCells: setCells }), [cells]);
+  return { cells, setCells, rows, setRows, ready, problems, props };
+}
+function MeasuredGrid({
+  label,
+  hint,
+  columns,
+  cells,
+  onCells,
+  disabled,
+  views = ALL_VIEWS,
+  rowHeight = DEFAULT_ROW_HEIGHT,
+  locale: localeProp,
+  labels: labelsProp,
+  className,
+  ...rest
+}) {
+  const labels = useKitLabels("measuredGrid", DEFAULT_MEASURED_GRID_LABELS, labelsProp);
+  const locale = useKitLocale(localeProp);
+  const mark = decimalMark(locale);
+  const id = useId();
+  const labelId = `${id}-label`;
+  const hintId = `${id}-hint`;
+  const keysId = `${id}-keys`;
+  const offered = views.length ? views : ALL_VIEWS;
+  const [chosen, setChosen] = useState(offered[0]);
+  const view = offered.includes(chosen) ? chosen : offered[0];
+  return (
+    // `relative` so the keyboard description below can be `sr-only` without escaping
+    // to the initial containing block (see sr-only-containment.test).
+    /* @__PURE__ */ jsxs("div", { ...rest, className: cn("relative", className), children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-1 flex flex-wrap items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx("span", { id: labelId, className: "text-[11px] font-medium text-[var(--text-muted)]", children: label }),
+        offered.length > 1 && /* @__PURE__ */ jsx(
+          ToggleGroup,
+          {
+            className: "w-auto",
+            "aria-label": labels.view,
+            value: view,
+            onChange: setChosen,
+            options: offered.map((value) => ({
+              value,
+              label: value === "cells" ? labels.cellsView : labels.textView
+            }))
+          }
+        )
+      ] }),
+      view === "cells" ? /* @__PURE__ */ jsx(
+        CellGrid,
+        {
+          columns,
+          cells,
+          onCells,
+          disabled,
+          rowHeight,
+          locale,
+          mark,
+          labels,
+          labelledBy: labelId,
+          describedBy: hint ? `${keysId} ${hintId}` : keysId
+        }
+      ) : /* @__PURE__ */ jsx(
+        TextView,
+        {
+          columns,
+          cells,
+          onCells,
+          disabled,
+          mark,
+          labels,
+          labelledBy: labelId,
+          describedBy: hint ? hintId : void 0
+        }
+      ),
+      hint && /* @__PURE__ */ jsx("p", { id: hintId, className: "mt-1 px-1 text-[11px] text-[var(--text-muted)]", children: hint }),
+      view === "cells" && /* @__PURE__ */ jsx("span", { id: keysId, className: "sr-only", children: labels.keyboardHint })
+    ] })
+  );
+}
+function CellGrid({
+  columns,
+  cells,
+  onCells,
+  disabled,
+  rowHeight,
+  locale,
+  mark,
+  labels,
+  labelledBy,
+  describedBy
+}) {
+  const scrollRef = useRef(null);
+  const headRef = useRef(null);
+  const width = columns.length;
+  const blankRow = () => columns.map(() => BLANK);
+  const grid = cells.length ? cells : [blankRow()];
+  const { first, last, totalHeight } = useWindowedRows(grid.length, rowHeight, scrollRef);
+  const rowNumber = useMemo(() => new Intl.NumberFormat(locale), [locale]);
+  const removable = !disabled && cells.length > 0;
+  const lastColumn = removable ? width : width - 1;
+  const [caret, setCaret] = useState({ row: 0, column: 0 });
+  const at = { row: Math.min(caret.row, grid.length - 1), column: Math.min(caret.column, lastColumn) };
+  const [editing, setEditing] = useState(false);
+  const pending = useRef(null);
+  const origin = useRef(BLANK);
+  const pointer = useRef(false);
+  useEffect(() => {
+    const target = pending.current;
+    if (!target) return;
+    const element = scrollRef.current?.querySelector(
+      `[data-cell="${target.row}:${target.column}"]`
+    );
+    if (!element) return;
+    pending.current = null;
+    element.focus({ preventScroll: true });
+    if (target.select && element instanceof HTMLInputElement) element.select();
+  });
+  const pad = (row) => Array.from({ length: width }, (_, index) => row?.[index] ?? BLANK);
+  const setCell = (row, column, value) => {
+    const next = grid.map(pad);
+    next[row][column] = value;
+    onCells(next);
+  };
+  const reveal = (row) => {
+    const element = scrollRef.current;
+    if (!element) return;
+    const room = element.clientHeight - (headRef.current?.offsetHeight ?? 0);
+    if (room <= 0) return;
+    const top = row * rowHeight;
+    if (top < element.scrollTop) element.scrollTop = top;
+    else if (top + rowHeight > element.scrollTop + room) element.scrollTop = top + rowHeight - room;
+  };
+  const focusCell = (row, column) => {
+    reveal(row);
+    pending.current = { row, column, select: true };
+    setCaret({ row, column });
+    setEditing(false);
+  };
+  const go = (row, column) => {
+    const target = {
+      row: Math.max(0, Math.min(row, grid.length - 1)),
+      column: Math.max(0, Math.min(column, lastColumn))
+    };
+    if (target.row === at.row && target.column === at.column) return;
+    focusCell(target.row, target.column);
+  };
+  const down = (row, column) => {
+    if (row + 1 < grid.length) return go(row + 1, column);
+    if (disabled || !hasContent(grid[row])) return;
+    onCells([...grid.map(pad), blankRow()]);
+    focusCell(row + 1, Math.min(column, width - 1));
+  };
+  const page = () => {
+    const element = scrollRef.current;
+    const room = element ? element.clientHeight - (headRef.current?.offsetHeight ?? 0) : 0;
+    return room > 0 ? Math.max(1, Math.floor(room / rowHeight) - 1) : 10;
+  };
+  const onCellKeyDown = (event, row, column) => {
+    const input = event.currentTarget instanceof HTMLInputElement ? event.currentTarget : null;
+    const inText = Boolean(input) && editing;
+    const modified = event.ctrlKey || event.metaKey;
+    switch (event.key) {
+      case "ArrowUp":
+        event.preventDefault();
+        return go(row - 1, column);
+      case "ArrowDown":
+        event.preventDefault();
+        return down(row, column);
+      case "Enter":
+        if (!input) return;
+        event.preventDefault();
+        return event.shiftKey ? go(row - 1, column) : down(row, column);
+      case "ArrowLeft":
+      case "ArrowRight": {
+        const forward = horizontalStep(event.key, event.currentTarget) === 1;
+        if (inText && input) {
+          const edge = forward ? input.value.length : 0;
+          if (input.selectionStart !== edge || input.selectionEnd !== edge) return;
+        }
+        event.preventDefault();
+        return go(row, column + (forward ? 1 : -1));
+      }
+      case "Home":
+      case "End": {
+        if (inText && !modified) return;
+        event.preventDefault();
+        const home = event.key === "Home";
+        if (modified) return go(home ? 0 : grid.length - 1, home ? 0 : width - 1);
+        return go(row, home ? 0 : width - 1);
+      }
+      case "PageUp":
+        event.preventDefault();
+        return go(row - page(), column);
+      case "PageDown":
+        event.preventDefault();
+        return go(row + page(), column);
+      case "F2":
+        if (!input || disabled) return;
+        event.preventDefault();
+        setEditing(true);
+        input.setSelectionRange(input.value.length, input.value.length);
+        return;
+      case "Escape":
+        if (!input || !editing) return;
+        event.preventDefault();
+        event.stopPropagation();
+        if (input.value !== origin.current) setCell(row, column, origin.current);
+        pending.current = { row, column, select: true };
+        setEditing(false);
+        return;
+    }
+  };
+  const paste = (row, column, text) => {
+    const lines = text.split(/\r?\n/).filter((line) => line.trim() !== "");
+    if (!lines.length) return;
+    const block = lines.map(splitRow);
+    if (block.length > 1 && block[0].some((cell) => !isCellNumber(cell))) block.shift();
+    const height = Math.max(grid.length, row + block.length);
+    const next = Array.from({ length: height }, (_, index) => pad(grid[index]));
+    block.forEach((line, downwards) => {
+      line.forEach((cell, across) => {
+        const target = column + across;
+        if (target < width) next[row + downwards][target] = withMark(cell.trim(), mark);
+      });
+    });
+    onCells(next);
+    pending.current = { row, column, select: true };
+    setEditing(false);
+  };
+  const template = `2.5rem repeat(${width}, minmax(5.5rem, 1fr)) 2rem`;
+  const mounted = [];
+  for (let index = first; index < last; index += 1) mounted.push(index);
+  if (at.row < first || at.row >= last) mounted.push(at.row);
+  const filled = cells.filter(hasContent);
+  const problems = filled.flat().filter((cell) => cell.trim() !== "" && !isCellNumber(cell)).length;
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-[var(--border)] bg-[var(--bg-surface)]", children: [
+    /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "max-h-72 overflow-auto", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "grid",
+        "aria-labelledby": labelledBy,
+        "aria-describedby": describedBy,
+        "aria-rowcount": grid.length + 1,
+        "aria-colcount": width + 2,
+        "aria-readonly": disabled || void 0,
+        className: "text-xs",
+        style: { minWidth: `calc(4.5rem + ${width} * 5.5rem)` },
+        children: [
+          /* @__PURE__ */ jsx("div", { ref: headRef, role: "rowgroup", className: "sticky top-0 z-10 bg-[var(--bg-surface-2)]", children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "row",
+              "aria-rowindex": 1,
+              className: "grid border-b border-[var(--border)]",
+              style: { gridTemplateColumns: template },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    role: "columnheader",
+                    "aria-label": labels.rowNumber,
+                    className: "flex items-end justify-end px-1 py-1 text-[10px] text-[var(--text-placeholder)]",
+                    children: "#"
+                  }
+                ),
+                columns.map((column, index) => /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    role: "columnheader",
+                    className: "min-w-0 border-s border-[var(--border)] px-2 py-1 text-end",
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "block truncate font-medium text-[var(--text-primary)]", children: column.label }),
+                      column.unit && /* @__PURE__ */ jsx("span", { className: "block truncate text-[10px] text-[var(--text-muted)]", children: column.unit })
+                    ]
+                  },
+                  index
+                )),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    role: "columnheader",
+                    "aria-label": labels.rowActions,
+                    className: "border-s border-[var(--border)]"
+                  }
+                )
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { role: "rowgroup", className: "relative", style: { height: totalHeight }, children: mounted.map((index) => {
+            const row = grid[index];
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                role: "row",
+                "aria-rowindex": index + 2,
+                className: "absolute inset-x-0 grid hover:bg-[var(--bg-hover)]",
+                style: { top: index * rowHeight, height: rowHeight, gridTemplateColumns: template },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      role: "rowheader",
+                      className: "flex items-center justify-end px-1 text-[10px] tabular-nums text-[var(--text-placeholder)]",
+                      children: rowNumber.format(index + 1)
+                    }
+                  ),
+                  columns.map((column, columnIndex) => {
+                    const value = row[columnIndex] ?? BLANK;
+                    const bad = value.trim() !== "" && !isCellNumber(value);
+                    const isCaret = at.row === index && at.column === columnIndex;
+                    return /* @__PURE__ */ jsx("div", { role: "gridcell", className: "min-w-0 border-s border-[var(--border)]", children: /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        "data-cell": `${index}:${columnIndex}`,
+                        value,
+                        readOnly: disabled,
+                        tabIndex: isCaret ? 0 : -1,
+                        inputMode: "decimal",
+                        spellCheck: false,
+                        autoComplete: "off",
+                        "aria-label": labels.cell(column.label, index + 1),
+                        "aria-invalid": bad || void 0,
+                        className: cn(
+                          "block size-full bg-transparent px-2 text-end tabular-nums text-[var(--text-primary)] outline-none",
+                          // Arriving selects the text (typing replaces it); editing
+                          // in place is the plain surface with a caret in it.
+                          "focus:bg-[var(--brand-bg)] focus:ring-2 focus:ring-inset focus:ring-[var(--brand)]",
+                          isCaret && editing && "focus:bg-[var(--bg-surface)]",
+                          disabled && "text-[var(--text-muted)]",
+                          bad && cn(FIELD_INVALID, "ring-inset")
+                        ),
+                        onMouseDown: (event) => {
+                          if (document.activeElement === event.currentTarget) setEditing(!disabled);
+                          else pointer.current = true;
+                        },
+                        onFocus: (event) => {
+                          origin.current = event.currentTarget.value;
+                          if (!isCaret) setCaret({ row: index, column: columnIndex });
+                          const byPointer = pointer.current;
+                          pointer.current = false;
+                          setEditing(byPointer && !disabled);
+                          if (!byPointer) event.currentTarget.select();
+                        },
+                        onBlur: () => setEditing(false),
+                        onChange: (event) => {
+                          setCell(index, columnIndex, event.target.value);
+                          setEditing(true);
+                        },
+                        onPaste: (event) => {
+                          if (disabled) return;
+                          const text = event.clipboardData.getData("text/plain");
+                          if (!/[\t\n;]/.test(text)) return;
+                          event.preventDefault();
+                          paste(index, columnIndex, text);
+                        },
+                        onKeyDown: (event) => onCellKeyDown(event, index, columnIndex)
+                      }
+                    ) }, columnIndex);
+                  }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      role: "gridcell",
+                      className: "flex items-center justify-center border-s border-[var(--border)]",
+                      children: /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          "data-cell": `${index}:${width}`,
+                          disabled: !removable,
+                          tabIndex: at.row === index && at.column === width ? 0 : -1,
+                          "aria-label": labels.removeRow(index + 1),
+                          className: "rounded p-1 text-[var(--text-placeholder)] outline-none hover:text-[var(--danger)] focus-visible:ring-2 focus-visible:ring-[var(--brand)] disabled:cursor-default disabled:hover:text-[var(--text-placeholder)]",
+                          onKeyDown: (event) => onCellKeyDown(event, index, width),
+                          onFocus: () => {
+                            if (at.row !== index || at.column !== width) setCaret({ row: index, column: width });
+                          },
+                          onClick: () => {
+                            const next = grid.filter((_, other) => other !== index);
+                            onCells(next);
+                            if (next.length) focusCell(Math.min(index, next.length - 1), width);
+                            else focusCell(0, 0);
+                          },
+                          children: /* @__PURE__ */ jsx(Trash2, { "aria-hidden": true, className: "size-3.5" })
+                        }
+                      )
+                    }
+                  )
+                ]
+              },
+              index
+            );
+          }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1 border-t border-[var(--border)] px-2 py-1.5", children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "ghost",
+          className: "px-2 py-1 text-xs",
+          disabled,
+          onClick: () => {
+            onCells([...grid.map(pad), blankRow()]);
+            focusCell(grid.length, 0);
+          },
+          children: [
+            /* @__PURE__ */ jsx(Plus, { "aria-hidden": true, className: "size-3.5" }),
+            " ",
+            labels.addRow
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "ghost",
+          className: "px-2 py-1 text-xs text-[var(--text-muted)]",
+          disabled: disabled || !cells.length,
+          onClick: () => {
+            onCells([]);
+            focusCell(0, 0);
+          },
+          children: [
+            /* @__PURE__ */ jsx(Eraser, { "aria-hidden": true, className: "size-3.5" }),
+            " ",
+            labels.clear
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-[11px] tabular-nums text-[var(--text-muted)]", children: labels.points(filled.length) }),
+      problems > 0 && /* @__PURE__ */ jsx("span", { className: "text-[11px] text-[var(--danger)]", children: labels.problems(problems) }),
+      /* @__PURE__ */ jsxs("span", { className: "ms-auto flex items-center gap-1 text-[11px] text-[var(--text-muted)]", children: [
+        /* @__PURE__ */ jsx(ClipboardPaste, { "aria-hidden": true, className: "size-3.5" }),
+        " ",
+        labels.pasteHint
+      ] })
+    ] })
+  ] });
+}
+const textOf = (cells) => cells.map((row) => row.join("	")).join("\n");
+function TextView({ columns, cells, onCells, disabled, mark, labels, labelledBy, describedBy }) {
+  const text = textOf(cells);
+  const [draft, setDraft] = useState(text);
+  const [errorLine, setErrorLine] = useState(null);
+  const [seen, setSeen] = useState(text);
+  if (seen !== text) {
+    setSeen(text);
+    setDraft(text);
+    setErrorLine(null);
+  }
+  const commit = () => {
+    if (draft === text) return;
+    if (!draft.trim()) {
+      setErrorLine(null);
+      onCells([]);
+      return;
+    }
+    const parsed = parseRows(draft, columns.length);
+    if ("error" in parsed) {
+      setErrorLine(parsed.error);
+      return;
+    }
+    setErrorLine(null);
+    onCells(parsed.rows.map((row) => row.map((value) => withMark(String(value), mark))));
+  };
+  const lines = draft.split("\n").filter((line) => line.trim()).length;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        "aria-labelledby": labelledBy,
+        "aria-describedby": describedBy,
+        rows: 10,
+        value: draft,
+        readOnly: disabled,
+        spellCheck: false,
+        className: "font-mono text-xs",
+        error: errorLine !== null ? labels.lineError(errorLine) : void 0,
+        onChange: (event) => setDraft(event.target.value),
+        onBlur: commit
+      }
+    ),
+    /* @__PURE__ */ jsxs("p", { className: "mt-1 px-1 text-[11px] text-[var(--text-muted)]", children: [
+      columns.map((column) => column.label).join(" \xB7 "),
+      " \u2014 ",
+      labels.points(lines)
+    ] })
+  ] });
+}
+export {
+  DEFAULT_MEASURED_GRID_LABELS,
+  MeasuredGrid,
+  useMeasuredRows
+};
+//# sourceMappingURL=measured-grid.js.map