@eifi1/ui-kit 0.6.1 → 0.7.1

package/src/components/use-anchor-dir.ts

@@ -0,0 +1,20 @@
+import { useLayoutEffect, useState } from "react";
+import type { RefObject } from "react";
+import { dirOf, type Direction } from "../lib/direction";
+
+/**
+ * The reading direction at a portalled panel's anchor — internal, not exported from
+ * the barrel. The field pickers' panels are portalled to `<body>`, out of the subtree
+ * their `dir` came from, so they carry it across on their own root.
+ *
+ * Read in a layout effect while `open`, rather than off the ref during render: the
+ * anchored rect these panels also wait for is measured the same way, so the panel's
+ * first painted frame already has both, and a render never reads a ref.
+ */
+export function useAnchorDir(ref: RefObject<Element | null>, open: boolean): Direction {
+  const [dir, setDir] = useState<Direction>("ltr");
+  useLayoutEffect(() => {
+    if (open) setDir(dirOf(ref.current));
+  }, [open, ref]);
+  return dir;
+}

package/src/components/use-mobile-reveal.ts

@@ -11,6 +11,11 @@ import { useEffect, useRef, useState } from "react";
  * is why nothing resets it: narrowing a filter cannot leave the limit pointing past the
  * end, and widening one does not have to re-reveal what the user already scrolled past.
  *
+ * `paginated={false}` opts out entirely: a table that is short by construction (an
+ * invoice's line items) renders every row on a phone too. It used to be chunked here
+ * regardless, so a twelve-line invoice showed its first ten lines and a "Loading…"
+ * sentinel for rows that were already in memory.
+ *
  * Lifted out of `DataTable` with the rest of its state; the sentinel ref belongs to the
  * caller's `<li>`.
  */
@@ -19,6 +24,7 @@ export function useMobileReveal<T>({
   slice,
   isServer,
   isMdUp,
+  unpaged = false,
   defaultPageSize,
 }: {
   /** The whole sorted list — what there is to reveal. */
@@ -27,11 +33,13 @@ export function useMobileReveal<T>({
   slice: T[];
   isServer: boolean;
   isMdUp: boolean;
+  /** `paginated={false}` on a client-side table: show every row, reveal nothing. */
+  unpaged?: boolean;
   defaultPageSize: number;
 }) {
   const [mobileLimit, setMobileLimit] = useState(defaultPageSize);
-  const mobileSlice = isServer ? slice : rows.slice(0, mobileLimit);
-  const canRevealMoreMobile = !isServer && !isMdUp && mobileLimit < rows.length;
+  const mobileSlice = isServer ? slice : unpaged ? rows : rows.slice(0, mobileLimit);
+  const canRevealMoreMobile = !isServer && !unpaged && !isMdUp && mobileLimit < rows.length;
   const loadMoreRef = useRef<HTMLLIElement | null>(null);
 
   useEffect(() => {

package/src/components/use-table-state.ts

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from "react";
-import type { useSearchParams } from "react-router";
+import { useSearchParams } from "react-router";
 import { readStored, writeStored } from "../lib/safe-storage";
 import {
   decodeFilterValue,
@@ -59,9 +59,17 @@ interface UrlState {
   page?: number; // 0-based
 }
 
-function readUrlState<T>(columns: DataTableColumn<T>[]): UrlState {
-  if (typeof window === "undefined") return {};
-  const sp = new URLSearchParams(window.location.search);
+/**
+ * The managed keys out of the ROUTER's query string — the one `setSearchParams` writes.
+ *
+ * This read `window.location.search` until 0.7.0, which is the same string only under a
+ * BrowserRouter. Under a HashRouter the router's query lives after the `#`
+ * (`/#/tx?f.payee=Rewe`) and `window.location.search` is empty: a shared link opened
+ * unfiltered, and the table's first write then replaced the link's filter with its own
+ * empty state. Reading and writing through `useSearchParams` is one source for both
+ * directions under every router, MemoryRouter included.
+ */
+function readUrlState<T>(sp: URLSearchParams, columns: DataTableColumn<T>[]): UrlState {
   const out: UrlState = {};
 
   const filters: FilterState = {};
@@ -179,13 +187,14 @@ function writeUrlState<T>(
  * * **Persistence writes on every change, the URL only when asked.** `storageKey` is the
  *   per-table identity; `urlSync` is opt-in because only some tables want their view in
  *   a shareable address.
+ * * **A controlled filter or sort that changes sends the table back to page 1.** See
+ *   the note at the reset below.
  */
 export function useTableState<T>({
   columns,
   storageKey,
   storageKeyPrefix,
   urlSync,
-  setSearchParams,
   defaultPageSize,
   sortsProp,
   filtersProp,
@@ -194,14 +203,18 @@ export function useTableState<T>({
   storageKey?: string;
   storageKeyPrefix: string;
   urlSync?: boolean;
-  setSearchParams: ReturnType<typeof useSearchParams>[1];
   defaultPageSize: number;
   sortsProp?: SortState[];
   filtersProp?: FilterState;
 }) {
+  // Called unconditionally (a Router is required either way — see src/data-table.ts),
+  // and the SAME pair is used to read and to write; see `readUrlState`.
+  const [searchParams, setSearchParams] = useSearchParams();
   // Read URL once on mount so URL-encoded views (e.g. shared links, deep links from
   // other pages) populate initial state. After mount, state is local.
-  const [urlInitial] = useState<UrlState>(() => (urlSync ? readUrlState(columns) : {}));
+  const [urlInitial] = useState<UrlState>(() =>
+    urlSync ? readUrlState(searchParams, columns) : {},
+  );
   const initial = useMemo(
     () => loadPersisted(storageKey, storageKeyPrefix),
     [storageKey, storageKeyPrefix],
@@ -217,6 +230,30 @@ export function useTableState<T>({
   const sorts = sortsProp ?? internalSorts;
   const filters = filtersProp ?? internalFilters;
   const [page, setPage] = useState(() => urlInitial.page ?? 0);
+
+  // ---- Controlled filters/sorts reset the page ----
+  //
+  // A self-owned table resets to page 1 in the filter handlers. A CONTROLLED one could
+  // not: the handlers hand the change to the owner and return, and `page` lives here,
+  // where the owner has no way to reach it — so narrowing a filter from outside (a
+  // saved view, a chip dismissed above the table) left a client-side table on page 4
+  // of what was now two pages, clamped to the last one instead of the first.
+  //
+  // So the table does it: whenever the controlled VALUE changes, back to the first
+  // page. Compared by value, because a controlled prop is a fresh object on every
+  // parent render. Adjusted during render rather than in an effect, so the stale page
+  // is never painted and never written to the URL. Not on mount: a deep link's `p=3`
+  // must survive the owner's first render. (In `serverPagination` mode this state is
+  // unused — the owner's `page` is the page, and resetting it stays the owner's job.)
+  const controlledSig =
+    sortsProp !== undefined || filtersProp !== undefined
+      ? JSON.stringify([sortsProp ?? null, filtersProp ?? null])
+      : null;
+  const [seenControlledSig, setSeenControlledSig] = useState(controlledSig);
+  if (seenControlledSig !== controlledSig) {
+    setSeenControlledSig(controlledSig);
+    setPage(0);
+  }
   const [pageSize, setPageSize] = useState<number>(() => {
     if (urlInitial.pageSize !== undefined) return urlInitial.pageSize;
     if (initial.pageSize === "all") return Infinity;

package/src/data-table.ts

@@ -16,4 +16,5 @@ export type {
   DataTableProps,
   ServerPagination,
   FilterState,
+  MobileSwipeActions,
 } from "./components/data-table";

package/src/feedback/feedback-attachment.tsx

@@ -2,12 +2,36 @@ import { cn } from "../lib/cn";
 import { useEffect, useRef, useState, type RefObject } from "react";
 import { Camera, FileText, Paperclip, X } from "lucide-react";
 import { Button } from "../components/ui";
-import { useKitFileLabels } from "../i18n/kit-labels";
+import { useKitFileLabels, useKitLabels } from "../i18n/kit-labels";
 import type { FeedbackAttachmentLabels } from "./feedback-dialog";
 
 export const DEFAULT_ATTACHMENT_ACCEPT = ["image/png", "image/jpeg", "image/webp", "image/gif"];
 export const DEFAULT_MAX_ATTACHMENT_BYTES = 10 * 1024 * 1024;
 
+/**
+ * The field's own strings — the `feedbackAttachment` namespace of `<UiKitProvider
+ * labels>`. The keys are {@link FeedbackAttachmentLabels}' own, so the `labels` prop
+ * (and a whole `FeedbackDialogLabels` handed down by the dialog) merges over them
+ * one to one. The optional heading, `attachment`, stays a prop: a note editor puts
+ * the buttons straight under its textarea and wants none.
+ *
+ * Before 0.7.0 the two optional keys fell back to hard-coded English, so a German app
+ * that relied on its provider got "Capture screenshot" under a German form.
+ */
+export interface FeedbackAttachmentFieldLabels {
+  attachmentAdd: string;
+  attachmentCapture: string;
+  attachmentPaste: string;
+  attachmentRemove: string;
+}
+
+export const DEFAULT_FEEDBACK_ATTACHMENT_LABELS: FeedbackAttachmentFieldLabels = {
+  attachmentAdd: "Attach image",
+  attachmentCapture: "Capture screenshot",
+  attachmentPaste: "…or paste a screenshot from the clipboard.",
+  attachmentRemove: "Remove attachment",
+};
+
 /**
  * Picking one picture: the file dialog, a capture of the app view, or a paste.
  *
@@ -40,7 +64,7 @@ export const DEFAULT_MAX_ATTACHMENT_BYTES = 10 * 1024 * 1024;
 export function FeedbackAttachmentField({
   value,
   onChange,
-  labels,
+  labels: labelsProp,
   accept = DEFAULT_ATTACHMENT_ACCEPT,
   maxBytes = DEFAULT_MAX_ATTACHMENT_BYTES,
   onError,
@@ -51,7 +75,9 @@ export function FeedbackAttachmentField({
 }: {
   value: File | null;
   onChange: (file: File | null) => void;
-  labels: FeedbackAttachmentLabels;
+  /** Prop > `<UiKitProvider labels={{ feedbackAttachment }}>` > English. Optional
+   *  since 0.7.0; `attachment` (the heading) is only ever read from here. */
+  labels?: Partial<FeedbackAttachmentLabels>;
   accept?: string[];
   maxBytes?: number;
   onError?: (kind: "type" | "size") => void;
@@ -73,6 +99,7 @@ export function FeedbackAttachmentField({
   const fileInputRef = useRef<HTMLInputElement>(null);
   // `file.size` from `<UiKitProvider labels>`, formatted in its locale — see FileDropzone.
   const fileText = useKitFileLabels();
+  const text = useKitLabels("feedbackAttachment", DEFAULT_FEEDBACK_ATTACHMENT_LABELS, labelsProp);
 
   // Object-URL preview lifecycle (create on change, revoke on cleanup).
   useEffect(() => {
@@ -151,9 +178,9 @@ export function FeedbackAttachmentField({
           : (event) => takeImage(event.clipboardData, () => event.preventDefault())
       }
     >
-      {labels.attachment && (
+      {labelsProp?.attachment && (
         <div className="mb-1 text-xs font-medium uppercase tracking-wide text-[var(--text-muted)]">
-          {labels.attachment}
+          {labelsProp.attachment}
         </div>
       )}
       {value ? (
@@ -180,7 +207,7 @@ export function FeedbackAttachmentField({
           <button
             type="button"
             onClick={() => onChange(null)}
-            aria-label={labels.attachmentRemove}
+            aria-label={text.attachmentRemove}
             className="rounded p-1.5 text-[var(--text-placeholder)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]"
           >
             <X className="size-4" />
@@ -190,7 +217,7 @@ export function FeedbackAttachmentField({
         <div className="space-y-1.5">
           <div className="flex flex-wrap gap-2">
             <Button type="button" variant="secondary" onClick={() => fileInputRef.current?.click()}>
-              <Paperclip className="size-4" /> {labels.attachmentAdd}
+              <Paperclip className="size-4" /> {text.attachmentAdd}
             </Button>
             {onCaptureScreenshot && (
               <Button
@@ -208,14 +235,14 @@ export function FeedbackAttachmentField({
                 }}
               >
                 <Camera className="size-4" />{" "}
-                {capturing ? "…" : (labels.attachmentCapture ?? "Capture screenshot")}
+                {capturing ? "…" : text.attachmentCapture}
               </Button>
             )}
           </div>
           {/* Said out loud, because a gesture with no affordance is a gesture
               nobody finds. */}
           <p className="text-xs text-[var(--text-muted)]">
-            {labels.attachmentPaste ?? "…or paste a screenshot from the clipboard."}
+            {text.attachmentPaste}
           </p>
         </div>
       )}

package/src/feedback/feedback-dialog.tsx

@@ -19,10 +19,11 @@ export interface FeedbackAttachmentLabels {
    *  straight under its textarea, where a second heading is noise. */
   attachment?: string;
   attachmentAdd: string;
-  /** Label for the "capture screenshot" button. Optional — falls back to an English default. */
+  /** Label for the "capture screenshot" button. Optional — falls back to the provider's
+   *  `feedbackAttachment.attachmentCapture`, then English. */
   attachmentCapture?: string;
   /** The line under the attachment buttons saying a screenshot can be pasted
-   *  straight in. Optional — falls back to an English default. */
+   *  straight in. Optional — falls back to the provider's `feedbackAttachment`, then English. */
   attachmentPaste?: string;
   attachmentRemove: string;
 }

package/src/hooks/use-windowed-rows.ts

@@ -0,0 +1,69 @@
+import { useEffect, useState } from "react";
+import type { RefObject } from "react";
+
+/** Rows kept mounted beyond each edge, so a flick-scroll has something to show
+ *  before the next render lands. */
+const OVERSCAN = 6;
+
+/** What {@link useWindowedRows} answers: render rows `first` up to (not including)
+ *  `last`, inside a scroll body `totalHeight` pixels tall. */
+export interface WindowedRows {
+  first: number;
+  last: number;
+  totalHeight: number;
+}
+
+/**
+ * Which rows of a fixed-height list are worth rendering.
+ *
+ * Hand-rolled rather than pulled from a virtualization library, for two reasons. With
+ * a fixed row height the whole problem is two divisions — a library earns its keep on
+ * measured, variable-height rows, and there are none here. And the obvious library for
+ * it (`@tanstack/react-virtual`) returns functions that cannot be memoized safely, so
+ * the React Compiler skips optimising any component that calls it: a list that exists
+ * to stay fast would opt out of the consumer's main source of speed.
+ *
+ * `scrollRef` is the element that scrolls. The rows are assumed to start at its top;
+ * a sticky header above them costs a row or two of the overscan, not correctness.
+ *
+ * Moved from Lenkbank, where `MeasuredGrid` and a segment list window the same way over
+ * rows of different heights — two copies of this would be two places to fix the day
+ * the overscan turns out to be wrong.
+ */
+export function useWindowedRows(
+  count: number,
+  rowHeight: number,
+  scrollRef: RefObject<HTMLElement | null>,
+): WindowedRows {
+  const [scrollTop, setScrollTop] = useState(0);
+  const [viewport, setViewport] = useState(0);
+
+  useEffect(() => {
+    const element = scrollRef.current;
+    if (!element) return;
+    const measure = () => {
+      setScrollTop(element.scrollTop);
+      setViewport(element.clientHeight);
+    };
+    measure();
+    element.addEventListener("scroll", measure, { passive: true });
+    // The pane usually sits in a responsive layout, so its height changes without the
+    // window's — a resize listener alone would miss every one of those. Guarded:
+    // jsdom and older embedded webviews have no ResizeObserver, and the list still
+    // has to render there.
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+    observer?.observe(element);
+    return () => {
+      element.removeEventListener("scroll", measure);
+      observer?.disconnect();
+    };
+  }, [scrollRef]);
+
+  const first = Math.max(0, Math.floor(scrollTop / rowHeight) - OVERSCAN);
+  // A viewport of 0 is the first render, before the pane has been laid out (and every
+  // render under jsdom). Rendering nothing then would leave the list blank until
+  // something scrolled it, so fall back to a screenful.
+  const visible = Math.ceil((viewport || 600) / rowHeight) + OVERSCAN * 2;
+  const last = Math.min(count, first + visible);
+  return { first, last, totalHeight: count * rowHeight };
+}

package/src/i18n/defaults.ts

@@ -19,6 +19,8 @@ import { DEFAULT_SWATCH_PICKER_LABELS } from "../components/swatch-picker";
 import { DEFAULT_ICON_PICKER_LABELS } from "../components/icon-picker";
 import { DEFAULT_DIALOG_FRAME_LABELS } from "../components/dialog-frame";
 import { DEFAULT_FILE_PICKER_LABELS } from "../components/file-button";
+import { DEFAULT_MEASURED_GRID_LABELS } from "../components/measured-grid";
+import { DEFAULT_FEEDBACK_ATTACHMENT_LABELS } from "../feedback/feedback-attachment";
 import {
   DEFAULT_APP_SHELL_LABELS,
   DEFAULT_CALCULATOR_LABELS,
@@ -76,4 +78,6 @@ export const DEFAULT_UI_KIT_LABELS: UiKitLabels = {
   iconPicker: DEFAULT_ICON_PICKER_LABELS,
   dialogFrame: DEFAULT_DIALOG_FRAME_LABELS,
   filePicker: DEFAULT_FILE_PICKER_LABELS,
+  measuredGrid: DEFAULT_MEASURED_GRID_LABELS,
+  feedbackAttachment: DEFAULT_FEEDBACK_ATTACHMENT_LABELS,
 };

package/src/i18n/kit-labels.tsx

@@ -21,6 +21,8 @@ import type { SwatchPickerLabels } from "../components/swatch-picker";
 import type { IconPickerLabels } from "../components/icon-picker";
 import type { DialogFrameLabels } from "../components/dialog-frame";
 import type { FilePickerLabels } from "../components/file-button";
+import type { MeasuredGridLabels } from "../components/measured-grid";
+import type { FeedbackAttachmentFieldLabels } from "../feedback/feedback-attachment";
 
 /**
  * EVERY string the kit renders, as one typed tree — and an optional provider that
@@ -208,6 +210,8 @@ export interface UiKitLabels {
   iconPicker: IconPickerLabels;
   dialogFrame: DialogFrameLabels;
   filePicker: FilePickerLabels;
+  measuredGrid: MeasuredGridLabels;
+  feedbackAttachment: FeedbackAttachmentFieldLabels;
 }
 
 /** Any subset of the tree, one level deep — each namespace may be partial, and a

package/src/i18n/locales/de-CH.ts

@@ -0,0 +1,30 @@
+import type { UiKitLabels } from "../kit-labels";
+import { uiKitLabelsDe } from "./de";
+
+/**
+ * Swiss Standard German: the German labels with Swiss spelling — "ss" for every "ß"
+ * (Schliessen, Grösse), which is the one systematic difference in UI text — and
+ * `de-CH` number formatting (1’234.5).
+ *
+ * Derived rather than duplicated, so a key added to the German labels is Swiss the
+ * moment it lands. Function labels are wrapped: their RESULT is respelled, so an
+ * argument the app passes in (a file name, a phrase to type) is respelled too — which
+ * is what a Swiss app writing "ss" everywhere wants.
+ */
+export const UI_KIT_LABELS_DE_CH: UiKitLabels = swiss(uiKitLabelsDe("de-CH"));
+
+function respell(text: string): string {
+  return text.replace(/ß/g, "ss").replace(/ẞ/g, "SS");
+}
+
+function swiss<T>(value: T): T {
+  if (typeof value === "string") return respell(value) as T;
+  if (typeof value === "function") {
+    const fn = value as (...args: unknown[]) => unknown;
+    return ((...args: unknown[]) => swiss(fn(...args))) as T;
+  }
+  if (value && typeof value === "object") {
+    return Object.fromEntries(Object.entries(value).map(([k, v]) => [k, swiss(v)])) as T;
+  }
+  return value;
+}