nexus-shared 3.2.0 → 4.0.0

package/dist/Helpers/RowsStore.js

@@ -1,4 +1,6 @@
-import { duplicateMessageFor, initialInputValue, inputValuesEqual, normalizeInputValue, rowsItemNames, rowsMessage, uniqueKeyOf, validateInput, } from "./InputParamsHelpers.js";
+import { EInputTypes } from "../Interfaces/FormInterfaces.js";
+import { findRememberedOpening, forgetInputMemory, isEmptyInputValue, isPickerInput, lastAddedRowKey, readInputMemory, rememberDependencies, rememberedOpeningNow, writeInputMemory, } from "./InputMemory.js";
+import { duplicateMessageFor, holdsValue, initialInputValue, inputValuesEqual, normalizeInputValue, rowsItemNames, rowsMessage, uniqueKeyOf, validateInput, } from "./InputParamsHelpers.js";
 export class RowsStore {
     options;
     inputByName = new Map();
@@ -17,6 +19,12 @@ export class RowsStore {
     showAll = false;
     touched = new Map();
     removed = null;
+    // Remembered row inputs (`remember`): where they are kept, the rows added since the rows were loaded (in the order they
+    // were added: a save keeps the last one's values), and the cells a picker is still asked about.
+    memory = null;
+    added = [];
+    asking = new Map();
+    memoryRound = null;
     // Rendering: a revision per value set from code (its input mounts again with it), a version per row.
     revisions = new Map();
     versions = new Map();
@@ -182,18 +190,25 @@ export class RowsStore {
         if (!this.showAll && this.duplicateErrors.get(key)?.has(name))
             this.bump(key);
     }
-    /** Adds a row with the inputs' defaults, `newRow`, and `values`, at `index` or at the end. Returns its key. */
+    /**
+     * Adds a row with the inputs' defaults, `newRow`, and `values`, at `index` or at the end. Returns its key. A remembered
+     * input (`remember`) that neither `newRow` nor `values` names with a value opens on the value kept for it, while its
+     * input offers it; a picker's opens once the picker answers, unless the person picked one first.
+     */
     add(values, index = this.entries.length) {
         const position = Math.max(0, Math.min(index, this.entries.length));
         const wasEmpty = this.entries.length === 0;
         const row = {};
         for (const params of this.options.inputs)
-            row[params.name] = initialInputValue(params);
+            if (holdsValue(params))
+                row[params.name] = initialInputValue(params);
         const { newRow } = this.options;
-        Object.assign(row, typeof newRow === "function" ? newRow(position) : newRow, values);
+        const named = { ...(typeof newRow === "function" ? newRow(position) : newRow), ...values };
+        Object.assign(row, named);
+        const asks = this.openRemembered(row, named);
         // The first row of a list has each radio on: the first address added is the primary one.
         for (const params of this.options.inputs) {
-            if (params.type === "radio" && wasEmpty && values?.[params.name] === undefined)
+            if (params.type === EInputTypes.Radio && wasEmpty && values?.[params.name] === undefined)
                 row[params.name] = true;
         }
         const entry = { key: this.newKey(), values: this.normalizeRow(row) };
@@ -203,15 +218,41 @@ export class RowsStore {
         for (const params of this.options.inputs) {
             this.checkCell(entry, params);
             // Only one row keeps a radio on: a new row that has it takes it from the others.
-            if (params.type === "radio" && entry.values[params.name] === true)
+            if (params.type === EInputTypes.Radio && entry.values[params.name] === true)
                 this.radioOn(entry, params.name, changed);
         }
         this.messageShown = true;
         this.removed = null;
+        this.added.push(entry.key);
         this.markUniqueDirty();
         this.settle(changed);
+        this.askPickers(entry.key, asks);
         return entry.key;
     }
+    /**
+     * The storage remembered row inputs read and keep (`InputLayoutParams.remember`), given once the rows are drawn in the
+     * browser: rows added from then on open on the kept values. The rows already there keep theirs.
+     */
+    attachMemory(storage) {
+        this.memory = storage;
+    }
+    /**
+     * A save of the form holding the rows: each remembered input keeps its value in the row added last that is still there
+     * (an empty value forgets), under that row's `per` value and where its `when` holds on that row. No row added since the
+     * rows were loaded: nothing is kept, since no new choice was made.
+     */
+    rememberAdded() {
+        if (!this.memory)
+            return;
+        const key = lastAddedRowKey(this.added, added => this.positions.has(added));
+        const row = key === null ? undefined : this.row(key);
+        if (!row)
+            return;
+        const read = (name) => row[name];
+        for (const params of this.options.inputs)
+            if (params.remember && !params.hidden)
+                writeInputMemory(this.memory, params, row[params.name], read);
+    }
     /** Adds a copy of a row after it, without its id and with its radios off. Returns the copy's key. */
     duplicate(key) {
         const index = this.positions.get(key);
@@ -222,7 +263,7 @@ export class RowsStore {
         if (this.options.rowKey)
             delete values[this.options.rowKey];
         for (const params of this.options.inputs)
-            if (params.type === "radio")
+            if (params.type === EInputTypes.Radio)
                 values[params.name] = false;
         return this.add(values, index + 1);
     }
@@ -243,7 +284,7 @@ export class RowsStore {
         const moved = [];
         const first = this.entries[0];
         for (const params of this.options.inputs) {
-            if (params.type !== "radio" || entry.values[params.name] !== true || !first)
+            if (params.type !== EInputTypes.Radio || entry.values[params.name] !== true || !first)
                 continue;
             this.write(first.key, params.name, true, "code", changed, 1);
             moved.push({ key: first.key, name: params.name });
@@ -306,6 +347,9 @@ export class RowsStore {
      */
     replace(rows, { asInitial = true, emit = false } = {}) {
         this.load(rows);
+        // Loaded rows: none of them was added here, and no picker's answer is wanted any more.
+        this.added = [];
+        this.stopAskingPickers();
         if (asInitial)
             this.initial = this.getValue();
         this.generation++;
@@ -363,7 +407,7 @@ export class RowsStore {
         });
         // Saved data with a radio on in more than one row keeps the first.
         for (const params of this.options.inputs) {
-            if (params.type !== "radio")
+            if (params.type !== EInputTypes.Radio)
                 continue;
             let found = false;
             for (const entry of this.entries) {
@@ -383,6 +427,76 @@ export class RowsStore {
         this.valueCache = null;
         this.keysCache = null;
     }
+    /**
+     * Opens a new row's remembered inputs on their kept values, where the row is not added with one: the company's
+     * `preferred`, else the person's last choice, while the input offers it (`rememberedOpeningNow`, `when` and `per` read
+     * in the row). A kept choice no longer offered is forgotten. Answers the pickers that must be asked first.
+     */
+    openRemembered(row, named) {
+        const asks = [];
+        const read = (name) => row[name];
+        for (const params of this.options.inputs) {
+            const { name } = params;
+            if (!params.remember || params.hidden || !holdsValue(params))
+                continue;
+            if (name in named && !isEmptyInputValue(params, named[name]))
+                continue;
+            if (!this.memory && isPickerInput(params))
+                continue;
+            const stored = this.memory ? readInputMemory(this.memory, params.remember, read) : undefined;
+            const opening = rememberedOpeningNow(params, stored, read);
+            if (opening.forget)
+                forgetInputMemory(this.memory, params.remember, read);
+            if (opening.ask)
+                asks.push({ params, stored });
+            if (opening.value !== undefined)
+                row[name] = opening.value;
+        }
+        return asks;
+    }
+    /** Stops asking pickers about remembered values: their answers no longer open anything. */
+    stopAskingPickers() {
+        this.memoryRound?.abort();
+        this.memoryRound = null;
+        this.asking.clear();
+    }
+    /**
+     * Asks each picker whether it still offers the remembered value of a new row's input (`findRememberedOpening`), judged
+     * on the row as it was added: an answer forgets a choice no longer offered (under that row's `per` value), and opens an
+     * offered one while the row is there, the person has not picked in that cell since, and the row's values it was judged
+     * on (`rememberDependencies`) are unchanged.
+     */
+    askPickers(key, asks) {
+        const added = this.row(key);
+        if (!asks.length || !added)
+            return;
+        this.memoryRound ??= new AbortController();
+        const round = this.memoryRound;
+        const memory = this.memory;
+        const names = this.asking.get(key) ?? new Set();
+        this.asking.set(key, names);
+        const opening = { ...added };
+        const read = (name) => opening[name];
+        for (const { params, stored } of asks) {
+            names.add(params.name);
+            const judgedOn = rememberDependencies(params);
+            void findRememberedOpening(params, stored, read, round.signal).then(answer => {
+                if (round.signal.aborted)
+                    return;
+                if (answer.forget)
+                    forgetInputMemory(memory, params.remember, read);
+                const waiting = this.asking.get(key);
+                if (!waiting?.delete(params.name))
+                    return;
+                if (!waiting.size)
+                    this.asking.delete(key);
+                const row = this.row(key);
+                if (answer.value === undefined || !row || !judgedOn.every(name => inputValuesEqual(row[name], opening[name])))
+                    return;
+                this.set(key, params.name, answer.value);
+            });
+        }
+    }
     /** Drops what the store knew about a removed row. */
     forget(key) {
         this.invalidCells -= this.invalidByRow.get(key) ?? 0;
@@ -391,6 +505,7 @@ export class RowsStore {
         this.duplicateErrors.delete(key);
         this.touched.delete(key);
         this.revisions.delete(key);
+        this.asking.delete(key);
     }
     write(key, name, value, source, changed, depth) {
         const index = this.positions.get(key);
@@ -399,6 +514,9 @@ export class RowsStore {
             return;
         const params = this.inputByName.get(name);
         const next = params && source === "code" ? normalizeInputValue(params, value) : value;
+        // The person's own pick: a picker's answer about a remembered value no longer replaces it.
+        if (source === "input")
+            this.asking.get(key)?.delete(name);
         if (inputValuesEqual(entry.values[name], next))
             return;
         const shownBefore = this.shownError(key, name);
@@ -414,7 +532,7 @@ export class RowsStore {
         }
         if (params) {
             this.checkCell(entry, params);
-            if (params.type === "radio") {
+            if (params.type === EInputTypes.Radio) {
                 // The row shows which radios it has on (a section's "Primary" tag), so it renders again, typed or not.
                 changed.add(key);
                 if (next === true)

package/dist/Helpers/ServerPreview.d.ts

@@ -0,0 +1,69 @@
+/** What a preview shows now. A new object after every change. */
+export interface ServerPreviewState<TQuestion, TResult> {
+    /** The last answer, kept while a newer question waits or runs, and after a newer one failed. Null before the first. */
+    result: TResult | null;
+    /** The question `result` answers: compare it with the values a save sends, to save only what was shown. */
+    question: TQuestion | null;
+    /** A question waits for its moment: the pause after the last request (`delay`). */
+    waiting: boolean;
+    /** A question is with the server. A page that says "Working it out…" says it while `waiting || loading`. */
+    loading: boolean;
+    /** Why the last question failed, in words; null once a newer answer came, or while a newer question waits. */
+    error: string | null;
+}
+/** Asks the server: the answer, or a throw whose message says why (an abort is not a failure). */
+export type ServerPreviewAsk<TQuestion, TResult> = (question: TQuestion, signal: AbortSignal) => Promise<TResult>;
+export interface ServerPreviewOptions {
+    /** Milliseconds after the last `request` before the question goes. Default 300. */
+    delay?: number;
+    /** The words of a failure whose error has none. Default "The preview cannot be worked out just now." */
+    failure?: string;
+}
+/** The preview's questions and answers, outside React. */
+export declare class ServerPreviewStore<TQuestion, TResult> {
+    private state;
+    private listeners;
+    private timer;
+    private running;
+    private asked;
+    /** Read on each question, so a page's latest function is the one asked. */
+    private readonly ask;
+    private readonly options;
+    constructor(ask: () => ServerPreviewAsk<TQuestion, TResult>, options?: ServerPreviewOptions);
+    getState: () => ServerPreviewState<TQuestion, TResult>;
+    subscribe: (listener: () => void) => (() => void);
+    private patch;
+    /** Stops the question waiting and the one running; their answers are never shown. */
+    private stop;
+    /** Asks about this question a moment after the last request (the delay), dropping any older one. */
+    request(question: TQuestion): void;
+    private send;
+    /** Drops the question waiting or running; the last answer stays. */
+    cancel(): void;
+    /** Drops every question and the last answer: nothing is shown. */
+    clear(): void;
+}
+/** A page's preview: its state, and `request`, `cancel` and `clear`. */
+export interface ServerPreview<TQuestion, TResult> extends ServerPreviewState<TQuestion, TResult> {
+    /** Asks about these values a moment after the last request; an older question is dropped. */
+    request: (question: TQuestion) => void;
+    /** Drops the question waiting or running (the form lacks what the server needs); the last answer stays. */
+    cancel: () => void;
+    /** Drops every question and the last answer. */
+    clear: () => void;
+}
+/**
+ * A preview the server works out a moment after the last change: `request(values)` on every change, and the page shows
+ * `result` (kept while a newer question runs), `waiting` (the pause), `loading` (with the server) and `error`. An older question is aborted and its late answer
+ * never shown; leaving the page stops what runs. `ask` throws to fail, with the words to show.
+ *
+ * @example
+ * const preview = useServerPreview(async (body: CounterBody, signal) => {
+ *   const answer = await api.send<CounterPreview>(COUNTER_PREVIEW, { body, signal, toast: false });
+ *   if (!answer.ok || !answer.result) throw new Error(answer.message ?? "This cannot be worked out just now.");
+ *   return answer.result;
+ * });
+ * <Form inputs={inputs} onValueChange={values => preview.request(counterBody(values))} />
+ * {preview.waiting || preview.loading ? "Working it out…" : preview.error ?? previewLine(preview.result)}
+ */
+export declare function useServerPreview<TQuestion, TResult>(ask: ServerPreviewAsk<TQuestion, TResult>, options?: ServerPreviewOptions): ServerPreview<TQuestion, TResult>;

package/dist/Helpers/ServerPreview.js

@@ -0,0 +1,99 @@
+"use client";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { isAbortError } from "./ApiResponses.js";
+const IDLE = { result: null, question: null, waiting: false, loading: false, error: null };
+/** The preview's questions and answers, outside React. */
+export class ServerPreviewStore {
+    state = IDLE;
+    listeners = new Set();
+    timer;
+    running = null;
+    asked = 0;
+    /** Read on each question, so a page's latest function is the one asked. */
+    ask;
+    options;
+    constructor(ask, options = {}) {
+        this.ask = ask;
+        this.options = options;
+    }
+    getState = () => this.state;
+    subscribe = (listener) => {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    };
+    patch(changes) {
+        this.state = { ...this.state, ...changes };
+        for (const listener of [...this.listeners])
+            listener();
+    }
+    /** Stops the question waiting and the one running; their answers are never shown. */
+    stop() {
+        clearTimeout(this.timer);
+        this.timer = undefined;
+        this.running?.abort();
+        this.running = null;
+        this.asked++;
+    }
+    /** Asks about this question a moment after the last request (the delay), dropping any older one. */
+    request(question) {
+        this.stop();
+        const turn = this.asked;
+        this.patch({ waiting: true, loading: false, error: null });
+        this.timer = setTimeout(() => void this.send(question, turn), this.options.delay ?? 300);
+    }
+    async send(question, turn) {
+        this.timer = undefined;
+        const controller = new AbortController();
+        this.running = controller;
+        this.patch({ waiting: false, loading: true });
+        try {
+            const result = await this.ask()(question, controller.signal);
+            if (turn !== this.asked)
+                return;
+            this.running = null;
+            this.patch({ result, question, loading: false, error: null });
+        }
+        catch (error) {
+            if (turn !== this.asked || isAbortError(error) || controller.signal.aborted)
+                return;
+            this.running = null;
+            const message = error instanceof Error && error.message ? error.message : (this.options.failure ?? "The preview cannot be worked out just now.");
+            this.patch({ loading: false, error: message });
+        }
+    }
+    /** Drops the question waiting or running; the last answer stays. */
+    cancel() {
+        this.stop();
+        if (this.state.waiting || this.state.loading)
+            this.patch({ waiting: false, loading: false });
+    }
+    /** Drops every question and the last answer: nothing is shown. */
+    clear() {
+        this.stop();
+        this.patch(IDLE);
+    }
+}
+/**
+ * A preview the server works out a moment after the last change: `request(values)` on every change, and the page shows
+ * `result` (kept while a newer question runs), `waiting` (the pause), `loading` (with the server) and `error`. An older question is aborted and its late answer
+ * never shown; leaving the page stops what runs. `ask` throws to fail, with the words to show.
+ *
+ * @example
+ * const preview = useServerPreview(async (body: CounterBody, signal) => {
+ *   const answer = await api.send<CounterPreview>(COUNTER_PREVIEW, { body, signal, toast: false });
+ *   if (!answer.ok || !answer.result) throw new Error(answer.message ?? "This cannot be worked out just now.");
+ *   return answer.result;
+ * });
+ * <Form inputs={inputs} onValueChange={values => preview.request(counterBody(values))} />
+ * {preview.waiting || preview.loading ? "Working it out…" : preview.error ?? previewLine(preview.result)}
+ */
+export function useServerPreview(ask, options) {
+    const latest = useRef(ask);
+    latest.current = ask;
+    const [store] = useState(() => new ServerPreviewStore(() => latest.current, options));
+    const state = useSyncExternalStore(store.subscribe, store.getState, store.getState);
+    // The same functions on every draw, so a page can name them in an effect's dependencies.
+    const [actions] = useState(() => ({ request: (question) => store.request(question), cancel: () => store.cancel(), clear: () => store.clear() }));
+    useEffect(() => () => store.cancel(), [store]);
+    return { ...state, ...actions };
+}

package/dist/Helpers/TableColumns.js

@@ -40,12 +40,13 @@ export function headLeafCells(head) {
     return cells;
 }
 /**
- * The headings a dragged one can be dropped between: the ones pinned to the same side, in the order they are drawn.
+ * The headings a dragged one can be dropped between: the ones pinned to the same side, in the order they are drawn -
+ * by the side chosen (`data-pin-side`), so a pinned column scrolling on a narrow table still moves among its side's.
  * They are taken from the whole header, so a column under a band and one beside it are the same list.
  */
 function dropTargets(head, heading) {
-    const pin = heading.getAttribute("data-pin") ?? "";
-    return headLeafCells(head).filter(cell => cell.hasAttribute(KEY) && (cell.getAttribute("data-pin") ?? "") === pin);
+    const side = heading.getAttribute("data-pin-side") ?? "";
+    return headLeafCells(head).filter(cell => cell.hasAttribute(KEY) && (cell.getAttribute("data-pin-side") ?? "") === side);
 }
 function clearDropMarks(head) {
     for (const cell of head?.querySelectorAll(`[${DROP_BEFORE}], [${DROP_AFTER}]`) ?? []) {

package/dist/Helpers/TableExport.d.ts

@@ -17,7 +17,13 @@ export interface TableOutput<TRow extends TableRow = TableRow> {
 export declare function tableToCsv<TRow extends TableRow>({ columns, rows, cellOptions }: TableOutput<TRow>): string;
 /** A file name without characters a file system refuses. */
 export declare function safeFileName(name: string): string;
-/** Hands the user a file to save, from text made in the browser. */
+/**
+ * Hands the user a file to save, from text made in the browser: a table's CSV, a person's recovery codes as a `.txt`.
+ * The text goes into a Blob behind a link put in the page, clicked and taken out again, and the Blob's address is let go
+ * ten seconds later. The file starts with a byte order mark, so Excel and Windows editors read it as UTF-8.
+ *
+ * @example downloadText("nexus-recovery-codes.txt", codes.join("\n"), "text/plain;charset=utf-8");
+ */
 export declare function downloadText(name: string, text: string, type: string): void;
 /** Writes the table as a CSV file the user saves. */
 export declare function exportTableCsv<TRow extends TableRow>(output: TableOutput<TRow>): void;

package/dist/Helpers/TableExport.js

@@ -10,14 +10,20 @@ function csvField(text) {
 export function tableToCsv({ columns, rows, cellOptions = {} }) {
     const lines = [columns.map(column => csvField(column.label)).join(",")];
     for (const row of rows)
-        lines.push(columns.map(column => csvField(formatCellText(column, columnValue(column, row), cellOptions))).join(","));
+        lines.push(columns.map(column => csvField(formatCellText(column, columnValue(column, row), cellOptions, row))).join(","));
     return lines.join(CRLF) + CRLF;
 }
 /** A file name without characters a file system refuses. */
 export function safeFileName(name) {
     return name.replace(/[\/:*?"<>|]+/g, " ").trim().replace(/\s+/g, "-").toLowerCase() || "table";
 }
-/** Hands the user a file to save, from text made in the browser. */
+/**
+ * Hands the user a file to save, from text made in the browser: a table's CSV, a person's recovery codes as a `.txt`.
+ * The text goes into a Blob behind a link put in the page, clicked and taken out again, and the Blob's address is let go
+ * ten seconds later. The file starts with a byte order mark, so Excel and Windows editors read it as UTF-8.
+ *
+ * @example downloadText("nexus-recovery-codes.txt", codes.join("\n"), "text/plain;charset=utf-8");
+ */
 export function downloadText(name, text, type) {
     // A BOM, so Excel reads the file as UTF-8 and shows accents and Devanagari.
     const blob = new Blob([String.fromCharCode(0xfeff) + text], { type });
@@ -57,7 +63,7 @@ export function tableToPrintHtml({ columns, rows, cellOptions = {}, name = "Tabl
     const cellClass = (column) => (align(column) === "end" ? ' class="nx-end"' : align(column) === "center" ? ' class="nx-center"' : "");
     const head = columns.map(column => "<th" + cellClass(column) + ">" + escapeHtml(column.label) + "</th>").join("");
     const body = rows
-        .map(row => "<tr>" + columns.map(column => "<td" + cellClass(column) + ">" + escapeHtml(formatCellText(column, columnValue(column, row), cellOptions)) + "</td>").join("") + "</tr>")
+        .map(row => "<tr>" + columns.map(column => "<td" + cellClass(column) + ">" + escapeHtml(formatCellText(column, columnValue(column, row), cellOptions, row)) + "</td>").join("") + "</tr>")
         .join("");
     return [
         "<!doctype html><html><head><meta charset=\"utf-8\"><title>" + escapeHtml(name) + "</title><style>" + PRINT_STYLE + "</style></head><body>",

package/dist/Helpers/TableFilters.d.ts

@@ -1,4 +1,4 @@
-import type { InputParams } from "../Interfaces/FormInterfaces.ts";
+import { type InputParams } from "../Interfaces/FormInterfaces.ts";
 import type { TableColumn, TableFilters, TableRow } from "../Interfaces/TableInterfaces.ts";
 /** The params as a filter: the same object without `required`, `defaultValue`, `defaultChecked`. */
 export declare function asFilterInput(params: InputParams): InputParams;

package/dist/Helpers/TableFilters.js

@@ -1,14 +1,15 @@
+import { EInputTypes } from "../Interfaces/FormInterfaces.js";
 import { addDays } from "./DateHelpers.js";
 import { fromLocalDateTime, toLocalDateTime, toUtcDateTime } from "./DateTimeHelpers.js";
 import { foldSearchText, searchWords } from "./DropdownHelpers.js";
-import { emptyInputValue, inputFieldName, inputValuesEqual, isEmptyInputValue } from "./InputParamsHelpers.js";
+import { emptyInputValue, inputFieldName, inputTypeName, inputValuesEqual, isEmptyInputValue } from "./InputParamsHelpers.js";
 import { columnValue, readPath, searchTextOf } from "./TableHelpers.js";
 /*
  * A data table's advanced filter, with no React: input params as filters, the values that filter, a client table's
  * test of a row, and the names a server takes.
  */
 // Inputs whose value cannot filter a row, and names a Nexus page request already uses for its paging.
-const UNSUPPORTED = new Set(["markdown", "rich-text", "tree", "tabular", "group", "password"]);
+const UNSUPPORTED = new Set([EInputTypes.Markdown, EInputTypes.RichText, EInputTypes.Tree, EInputTypes.Tabular, EInputTypes.Group, EInputTypes.Password, EInputTypes.Picture]);
 const RESERVED = new Set(["searchKeyword", "skipCount", "maxCount", "sorting", "sortType"]);
 const warned = new Set();
 function filterable(params) {
@@ -17,7 +18,7 @@ function filterable(params) {
         return true;
     if (!warned.has(params.name)) {
         warned.add(params.name);
-        console.warn(`DataTable: the filter "${params.name}" is ignored: ${reserved ? "a page request already sends that name" : `a ${params.type} input cannot filter rows`}.`);
+        console.warn(`DataTable: the filter "${params.name}" is ignored: ${reserved ? "a page request already sends that name" : `a ${inputTypeName(params.type)} input cannot filter rows`}.`);
     }
     return false;
 }
@@ -62,12 +63,12 @@ function cellTest(params, value, column, bound) {
     // A moment's day is the one the table shows it on; any other value is read as an ISO date.
     const dayOf = (cell) => (column?.format === "date-time" ? toLocalDateTime(cell)?.date : String(cell).slice(0, 10));
     switch (params.type) {
-        case "text":
-        case "email":
-        case "search":
-        case "tel":
-        case "url":
-        case "textarea": {
+        case EInputTypes.Text:
+        case EInputTypes.Email:
+        case EInputTypes.Search:
+        case EInputTypes.Tel:
+        case EInputTypes.Url:
+        case EInputTypes.TextArea: {
             // Every word, folded as the search folds it, in the text the cell shows (an option's label, Yes or No).
             const words = searchWords(String(value));
             return (cell, row) => {
@@ -75,31 +76,31 @@ function cellTest(params, value, column, bound) {
                 return words.every(word => text.includes(word));
             };
         }
-        case "checkbox":
-        case "switch":
-        case "radio":
+        case EInputTypes.CheckBox:
+        case EInputTypes.Switch:
+        case EInputTypes.Radio:
             return cell => cell === true || cell === "true" || cell === 1;
-        case "number":
-        case "slider": {
+        case EInputTypes.Number:
+        case EInputTypes.Slider: {
             const number = Number(value);
             return cell => (bound === "From" ? Number(cell) >= number : bound === "To" ? Number(cell) <= number : Number(cell) === number);
         }
-        case "range-slider": {
+        case EInputTypes.RangeSlider: {
             const [low, high] = value;
             return cell => Number(cell) >= low && Number(cell) <= high;
         }
-        case "date":
+        case EInputTypes.Date:
             return cell => dayOf(cell) === value;
-        case "date-range": {
+        case EInputTypes.DateRange: {
             const [from, to] = value;
             return cell => {
                 const day = dayOf(cell);
                 return day !== undefined && (!from || day >= from) && (!to || day <= to);
             };
         }
-        case "time":
+        case EInputTypes.Time:
             return cell => String(cell).slice(0, 5) === String(value).slice(0, 5);
-        case "date-time": {
+        case EInputTypes.DateTime: {
             // The same minute, however each side writes the moment ("…Z", "+05:45", or no zone for UTC).
             const minute = (moment) => toUtcDateTime(moment)?.slice(0, 16);
             const wanted = minute(value);
@@ -121,7 +122,7 @@ export function filterMatcher(columns, inputs, filters) {
     const tests = activeInputs(inputs, filters).map(([params, value]) => {
         const { name } = params;
         let column = columns.find(candidate => candidate.key === name);
-        const [, key, bound] = (!column && params.type === "number" && /^(.+)(From|To)$/.exec(name)) || [];
+        const [, key, bound] = (!column && params.type === EInputTypes.Number && /^(.+)(From|To)$/.exec(name)) || [];
         column ??= columns.find(candidate => candidate.key === key);
         const test = cellTest(params, value, column, column ? bound : undefined);
         return (row) => {
@@ -149,11 +150,11 @@ export function filterRequest(filters, inputs, columns, timeZone) {
             if (to)
                 request[`${name}Before`] = moments ? fromLocalDateTime(addDays(to, 1), "00:00", timeZone) : addDays(to, 1);
         };
-        if (params.type === "date-range")
+        if (params.type === EInputTypes.DateRange)
             days(...value);
-        else if (params.type === "date" && moments)
+        else if (params.type === EInputTypes.Date && moments)
             days(value, value);
-        else if (params.type === "range-slider")
+        else if (params.type === EInputTypes.RangeSlider)
             [request[`${name}From`], request[`${name}To`]] = value;
         else
             request[name] = value;

package/dist/Helpers/TableHelpers.d.ts

@@ -26,12 +26,17 @@ export interface CellTextOptions {
     timeZone?: string;
     /** How numbers are written: a locale, or the person's settings (`numberLocale`, `useNumberLocale`). Default `en-US`. */
     locale?: string;
+    /** The currency of a `money` column without its own (`DataTableProps.currency`): "Rs.". */
+    currency?: string | null;
 }
 /**
  * A value as the cell writes it, in the column's format: "1,250.00", "Rs. 4,500.00", "12.5%", the date and time in the
- * user's settings, "Yes" or "No", an option's label. Empty values give "".
+ * user's settings, "Yes" or "No", an option's label. Empty values give "". `row` is the record, for a currency the
+ * column reads from it (`currency: row => row.currencyText`).
  */
-export declare function formatCellText<TRow extends TableRow>(column: TableColumn<TRow>, value: unknown, options?: CellTextOptions): string;
+export declare function formatCellText<TRow extends TableRow>(column: TableColumn<TRow>, value: unknown, options?: CellTextOptions, row?: TRow): string;
+/** A money column's currency: its own (a text, or read from the row), else the table's; "" for none. */
+export declare function columnCurrency<TRow extends TableRow>(column: TableColumn<TRow>, options?: CellTextOptions, row?: TRow): string;
 /** Text the search looks in: the column's `text`, an option's label, or the value as text (dates as ISO text). */
 export declare function searchTextOf<TRow extends TableRow>(column: TableColumn<TRow>, row: TRow): string;
 /** Compares two values of a column for sorting: numbers as numbers, text as a person reads it ("Room 9" before "Room 10"). */
@@ -95,7 +100,23 @@ export interface ViewColumnsOptions extends ColumnRights {
     widths?: Readonly<Record<string, number>>;
     /** Pixels from the pinned side, measured from the columns before it. */
     offsets?: Readonly<Record<string, number>>;
+    /** Pinned columns that scroll for now, the table being too narrow for them (`releasedPins`): their `pin` is null. */
+    released?: ReadonlySet<string>;
 }
+/**
+ * The most of a table's width on screen that the columns staying in place may take: the numbers, the checkboxes and the
+ * actions, which always stay, and the pinned columns. Past it the pinned ones give way (`releasedPins`), so a phone
+ * keeps at least 40% of the table for the columns that scroll.
+ */
+export declare const PINNED_SHARE = 0.6;
+/**
+ * Which pinned columns scroll for now, the table being narrow: the pinned ones stay from the outer edge in - the left
+ * side first - while they and the columns that always stay (`frame`: the numbers and checkboxes, the actions; their
+ * width in pixels) take at most `share` of `view`, the width on screen; every one past that scrolls with the rest,
+ * and so do the ones inside it on the same side. `left` and `right`: each side's pinned columns with their widths,
+ * from the outer edge in. A table not laid out (`view` 0, in a closed tab) releases none.
+ */
+export declare function releasedPins(view: number, frame: number, left: readonly (readonly [string, number])[], right: readonly (readonly [string, number])[], share?: number): Set<string>;
 /**
  * The columns as the table draws them: in the user's order, with the pinned ones moved to their side (keeping their
  * order among themselves), each with its width, its distance from that edge, and what the user may do with it.