nexus-shared 2.0.0 → 3.0.0

package/dist/Components/Forms/ExcelImport.js

@@ -0,0 +1,190 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { iconAlertTriangle, iconChevronDown, iconCircleCheck, iconCopy, iconDownload, iconFileImport, iconTable, iconUpload, InlineIcon } from "nexus-icons";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { EXCEL_FILE_ACCEPT, excelColumnInputs, excelCount, excelEditorRows, excelPlural, excelProblemPlace, excelProblems, excelRowsOfKind, excelSheetRows, excelText, excelWritableRows, isExcelRowEdited, } from "../../Helpers/ExcelHelpers.js";
+import { ExcelRowKind } from "../../Interfaces/ExcelInterfaces.js";
+import { downloadExcelTemplate, excelSettings, importExcelRows, verifyExcelFile } from "../../Services/ExcelApi.js";
+import { toast } from "../Layouts/Toaster.js";
+import { openPopup } from "../Layouts/PopupHost.js";
+import { Button } from "../Documents/Button.js";
+import { TabularForm } from "../Inputs/TabularForm.js";
+const DEFAULT_MAX_HEIGHT = 320;
+/**
+ * The three steps of an import in one panel: the template, the file, and the review.
+ *
+ * @example
+ * <ExcelImport endpoints={CITY_SHEET} subject="city" onImported={() => table.reload()} />
+ */
+export function ExcelImport({ endpoints, subject: given, params, onImported, onClose, templateDownload, maxHeight = DEFAULT_MAX_HEIGHT, className }) {
+    const id = useId();
+    const fileRef = useRef(null);
+    const newRef = useRef(null);
+    const sameRef = useRef(null);
+    const [settings, setSettings] = useState(null);
+    const [file, setFile] = useState(null);
+    const [verify, setVerify] = useState(null);
+    const [imported, setImported] = useState(null);
+    const [failure, setFailure] = useState(null);
+    const [busy, setBusy] = useState("settings");
+    /** Bumped on every answer: the editors take their rows again instead of being told to change them. */
+    const [generation, setGeneration] = useState(0);
+    // A page may well write its endpoints and its params as literals, which are a new object every render. What they
+    // say is what matters, so the settings are asked for again only when that changes.
+    const sheetKey = `${String(endpoints.settings.module)}|${endpoints.settings.path}|${JSON.stringify(params ?? null)}`;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const callOptions = useMemo(() => ({ params }), [sheetKey]);
+    useEffect(() => {
+        let left = false;
+        void (async () => {
+            const answer = await excelSettings(endpoints, callOptions);
+            if (left)
+                return;
+            if (answer.ok && answer.result)
+                setSettings(answer.result);
+            setBusy(null);
+        })();
+        return () => {
+            left = true;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sheetKey]);
+    const subject = given ?? verify?.subject ?? settings?.subject ?? "row";
+    const columns = verify?.columns ?? settings?.columns ?? [];
+    const inputs = useMemo(() => excelColumnInputs(columns), [columns]);
+    const fresh = useMemo(() => (verify ? excelWritableRows(verify.rows) : []), [verify]);
+    const same = useMemo(() => (verify ? excelRowsOfKind(verify.rows, ExcelRowKind.Duplicate) : []), [verify]);
+    const freshRows = useMemo(() => excelEditorRows(fresh, columns), [fresh, columns]);
+    const sameRows = useMemo(() => excelEditorRows(same, columns), [same, columns]);
+    function reset() {
+        setFile(null);
+        setVerify(null);
+        setImported(null);
+        setFailure(null);
+        setGeneration(value => value + 1);
+        if (fileRef.current)
+            fileRef.current.value = "";
+    }
+    async function onTemplate() {
+        setBusy("template");
+        await downloadExcelTemplate(endpoints, callOptions);
+        setBusy(null);
+    }
+    async function onPicked(picked) {
+        if (!picked)
+            return;
+        setFile(picked);
+        setVerify(null);
+        setImported(null);
+        setFailure(null);
+        setBusy("checking");
+        const answer = await verifyExcelFile(endpoints, picked, callOptions);
+        setBusy(null);
+        // Clearing the input is what lets the same file be picked again after a fix in the spreadsheet.
+        if (fileRef.current)
+            fileRef.current.value = "";
+        if (!answer.ok || !answer.result) {
+            setFailure(answer.message ?? excelText("verifyFailed"));
+            return;
+        }
+        setVerify(answer.result);
+        setGeneration(value => value + 1);
+    }
+    async function onImport() {
+        if (!verify)
+            return;
+        const newValues = newRef.current?.getValue() ?? freshRows;
+        const sameValues = sameRef.current?.getValue() ?? sameRows;
+        // A duplicate is never updated, so one the person left alone is not sent at all; one they edited is a new record.
+        const edited = sameValues.filter(row => isExcelRowEdited(row, columns));
+        if (newValues.length && newRef.current && !newRef.current.validate())
+            return;
+        if (edited.length && sameRef.current && !sameRef.current.validate())
+            return;
+        const rows = excelSheetRows([...newValues, ...edited], columns);
+        if (!rows.length) {
+            setFailure(excelText("importNothing"));
+            return;
+        }
+        setBusy("importing");
+        const answer = await importExcelRows(endpoints, rows, callOptions);
+        setBusy(null);
+        if (!answer.ok) {
+            setFailure(answer.message ?? excelText("importedNone"));
+            if (answer.result)
+                setImported(answer.result);
+            return;
+        }
+        const written = answer.result;
+        if (!written)
+            return;
+        setFailure(null);
+        setImported(written);
+        toast.success(`${excelCount(written.created, subject)} imported`, { message: written.note });
+        // What was written is gone from the file's point of view: only what was refused stays to be fixed and sent again,
+        // and the counts are what those rows are now - not what the verify said about a file that has been half written.
+        const left = written.refused ?? [];
+        setVerify(current => current
+            ? {
+                ...current,
+                rows: left,
+                read: left.length,
+                new: left.filter(row => row.kind === ExcelRowKind.New).length,
+                duplicates: left.filter(row => row.kind === ExcelRowKind.Duplicate).length,
+                invalid: left.filter(row => row.kind === ExcelRowKind.Invalid).length,
+                isReady: false,
+            }
+            : current);
+        setGeneration(value => value + 1);
+        onImported?.(written);
+    }
+    /** A problem names a cell: clicking it brings that row into view and puts the caret in it. */
+    const goTo = (editor, list) => (problem) => {
+        const index = list.findIndex(row => row.number === problem.row);
+        if (index >= 0)
+            editor.current?.focusRow(index, problem.field);
+    };
+    const checking = busy === "checking";
+    const importing = busy === "importing";
+    const canImport = Boolean(verify) && !busy && (fresh.length > 0 || same.length > 0);
+    return (_jsxs("section", { className: cx("nx-excel", className), "aria-label": `Import ${excelPlural(subject)} from a spreadsheet`, "data-nx-excel": "", children: [_jsxs("ol", { className: "nx-excel__steps", children: [_jsxs("li", { children: ["Download the template", templateDownload === false ? "" : " below", ": every list in it is a dropdown, and the ids beside a choice fill themselves."] }), _jsxs("li", { children: ["Fill in one row per ", subject, ". Leave the locked columns alone."] }), _jsx("li", { children: "Send it here to be checked. Nothing is written until you import." })] }), _jsxs("div", { className: "nx-excel__pick", children: [templateDownload !== false && (_jsx(Button, { icon: _jsx(InlineIcon, { icon: iconDownload }), loading: busy === "template", onClick: onTemplate, children: excelText("template") })), _jsx("input", { ref: fileRef, id: `${id}-file`, className: "nx-visually-hidden", type: "file", accept: EXCEL_FILE_ACCEPT, onChange: event => void onPicked(event.currentTarget.files?.[0]) }), _jsx(Button, { variant: "primary", icon: _jsx(InlineIcon, { icon: iconFileImport }), loading: checking, onClick: () => fileRef.current?.click(), children: file ? excelText("change") : excelText("choose") }), _jsx("p", { className: "nx-excel__file", "data-nx-excel-file": "", children: checking ? (_jsxs(_Fragment, { children: [excelText("checking"), " ", _jsx("strong", { children: file?.name }), String.fromCharCode(8230)] })) : file ? (_jsx("strong", { children: file.name })) : (_jsx("span", { className: "nx-excel__muted", children: excelText("nothingPicked") })) }), settings && (_jsxs("p", { className: "nx-excel__limits", children: [excelCount(settings.maxImportRows, "row"), " at most per file"] }))] }), failure && (_jsxs("p", { className: "nx-excel__failure", role: "alert", "data-nx-excel-failure": "", children: [_jsx(InlineIcon, { icon: iconAlertTriangle, "aria-hidden": "true" }), _jsx("span", { children: failure })] })), imported && _jsx(ImportedReport, { answer: imported, subject: subject }), verify && (_jsxs("div", { className: "nx-excel__review", "data-nx-excel-review": "", children: [!imported && _jsx("p", { className: "nx-excel__note", children: verify.note }), _jsx(ReviewSection, { id: `${id}-new`, title: excelText("newRows"), tone: verify.invalid > 0 ? "warning" : "neutral", count: fresh.length, hint: verify.invalid > 0 ? `${excelCount(verify.invalid, "row")} to fix before anything is written.` : undefined, rows: fresh, onGo: goTo(newRef, fresh), open: true, children: _jsx(TabularForm, { ref: newRef, "aria-label": excelText("newRows"), inputs: inputs, itemLabel: subject, defaultValue: freshRows, addable: false, sortable: false, maxHeight: maxHeight, size: "sm" }, `new-${generation}`) }), _jsx(ReviewSection, { id: `${id}-same`, title: excelText("duplicates"), tone: "muted", count: same.length, hint: excelText("duplicateHint"), rows: same, onGo: goTo(sameRef, same), children: _jsx(TabularForm, { ref: sameRef, "aria-label": excelText("duplicates"), inputs: inputs, itemLabel: subject, defaultValue: sameRows, addable: false, removable: false, sortable: false, maxHeight: maxHeight, size: "sm" }, `same-${generation}`) })] })), _jsxs("footer", { className: "nx-excel__actions", children: [verify && (fresh.length > 0 || same.length > 0) && (_jsxs("p", { className: "nx-excel__sending", "data-nx-excel-sending": "", children: [fresh.length > 0 ? `${excelCount(fresh.length, subject)} to send.` : "Nothing to send yet.", same.length > 0 ? ` Edit ${same.length === 1 ? `the one ${subject}` : `one of the ${excelCount(same.length, subject)}`} already there to send it too.` : ""] })), _jsxs("div", { className: "nx-excel__buttons", children: [file && !busy && (_jsx(Button, { variant: "ghost", onClick: reset, children: excelText("startOver") })), onClose && (_jsx(Button, { variant: "secondary", onClick: onClose, children: excelText("close") })), _jsx(Button, { variant: "primary", icon: _jsx(InlineIcon, { icon: iconUpload }), loading: importing, disabled: !canImport, onClick: () => void onImport(), children: excelText("importLabel") })] })] })] }));
+}
+/**
+ * One half of the review: a line that says what these rows are and how many, and the editor under it. Collapsible,
+ * because a person with twenty duplicates and three new rows is looking at the three.
+ */
+function ReviewSection({ id, title, count, tone, hint, rows, onGo, open: openByDefault = false, children }) {
+    const [open, setOpen] = useState(openByDefault);
+    const problems = useMemo(() => excelProblems(rows), [rows]);
+    const duplicates = useMemo(() => rows.filter(row => row.duplicate), [rows]);
+    if (count === 0)
+        return null;
+    return (_jsxs("section", { className: "nx-excel__section", "data-open": open || undefined, "data-tone": tone, "data-nx-excel-section": title, children: [_jsx("h3", { className: "nx-excel__section-head", children: _jsxs("button", { type: "button", className: "nx-excel__toggle", "aria-expanded": open, "aria-controls": open ? id : undefined, onClick: () => setOpen(!open), children: [_jsx(InlineIcon, { icon: iconChevronDown, className: "nx-excel__chevron", "aria-hidden": "true" }), _jsx("span", { className: "nx-excel__title", children: title }), _jsx("span", { className: "nx-excel__tag", children: count.toLocaleString("en-US") }), hint && _jsx("span", { className: "nx-excel__hint", children: hint })] }) }), open && (_jsxs("div", { className: "nx-excel__section-body", id: id, children: [children, problems.length > 0 && _jsx(ProblemList, { problems: problems, onGo: onGo }), duplicates.length > 0 && (_jsxs("div", { className: "nx-excel__problems nx-excel__problems--same", "data-nx-excel-duplicates": "", children: [_jsxs("p", { className: "nx-excel__problems-head", children: [_jsx(InlineIcon, { icon: iconCopy, "aria-hidden": "true" }), _jsx("span", { children: excelText("whyDuplicate") })] }), _jsx("ul", { children: duplicates.map(row => (_jsxs("li", { children: [_jsxs("span", { className: "nx-excel__place", children: ["Row ", row.number] }), _jsx("span", { children: row.duplicate })] }, row.number))) })] }))] }))] }));
+}
+/** What the server found wrong, each naming the cell the person reads, and taking them to it. */
+function ProblemList({ problems, onGo }) {
+    return (_jsxs("div", { className: "nx-excel__problems", "data-nx-excel-problems": "", children: [_jsxs("p", { className: "nx-excel__problems-head", children: [_jsx(InlineIcon, { icon: iconAlertTriangle, "aria-hidden": "true" }), _jsx("span", { children: excelText("toFix") })] }), _jsx("ul", { children: problems.map(problem => (_jsxs("li", { children: [onGo ? (_jsx("button", { type: "button", className: "nx-excel__place nx-excel__go", onClick: () => onGo(problem), children: excelProblemPlace(problem) })) : (_jsx("span", { className: "nx-excel__place", children: excelProblemPlace(problem) })), _jsx("span", { children: problem.message })] }, `${problem.row}:${problem.column}:${problem.message}`))) })] }));
+}
+/** What the import did, in the backend's own words, and what it did not write. */
+function ImportedReport({ answer, subject }) {
+    const wrote = answer.created > 0;
+    return (_jsxs("div", { className: cx("nx-excel__result", wrote ? "nx-excel__result--ok" : "nx-excel__result--none"), role: "status", "data-nx-excel-result": "", children: [_jsxs("p", { className: "nx-excel__result-head", children: [_jsx(InlineIcon, { icon: wrote ? iconCircleCheck : iconAlertTriangle, "aria-hidden": "true" }), _jsx("strong", { children: wrote ? `${excelCount(answer.created, subject)} added` : excelText("importedNone") })] }), _jsx("p", { className: "nx-excel__result-note", children: answer.note }), (answer.refused?.length ?? 0) > 0 && (_jsx("ul", { className: "nx-excel__refused", children: answer.refused?.map(row => (_jsxs("li", { children: [_jsxs("span", { className: "nx-excel__place", children: ["Row ", row.number] }), _jsx("span", { children: row.duplicate ?? row.problems?.[0]?.message ?? excelText("refused") })] }, row.number))) }))] }));
+}
+/**
+ * Opens the import panel as a window. This is the one line a data table's Import entry needs.
+ *
+ * @example onImport={() => openExcelImport({ endpoints: CITY_SHEET, subject: "city", onImported: reload })}
+ */
+export function openExcelImport({ title, popupKey, ...props }) {
+    const subject = props.subject ?? "row";
+    return openPopup({
+        key: popupKey ?? `nx-excel:${String(props.endpoints.import.module)}:${props.endpoints.import.path}`,
+        title: title ?? `Import ${excelPlural(subject)} from a spreadsheet`,
+        icon: _jsx(InlineIcon, { icon: iconTable }),
+        size: "xl",
+        closeOnBackdrop: false,
+        // No Close of its own: the window's title bar already has one, and two ways out of one panel is one too many.
+        content: _jsx(ExcelImport, { ...props }),
+    });
+}

package/dist/Components/Forms/Form.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
 import { iconAlertCircle, iconHistory, iconX, InlineIcon } from "nexus-icons";
 import { memo, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, } from "react";
 import { cx } from "../../Helpers/ClassHelpers.js";
@@ -124,6 +125,9 @@ const FormCell = memo(function FormCell({ store, params, context }) {
     useSyncExternalStore(subscribe, version, version);
     const stamp = store.stamp(name);
     const span = spanOf(params);
+    // An input that follows others is asked whether it shows each time it draws: it comes and goes with their values.
+    if (params.dependsOn?.length && params.hidden)
+        return null;
     // Leaving the input shows the form's own rule message on it, such as "Passwords do not match".
     function onBlur(event) {
         if (event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget))
@@ -315,5 +319,5 @@ export function Form(props) {
     const context = useMemo(() => ({ idPrefix, size, design, readOnly, disabled, scopeNames: !inForm }), [idPrefix, size, design, readOnly, disabled, inForm]);
     // With FormButtons on the page, the form's message is in their status line.
     const ownMessage = status.buttons === 0 ? status.message : null;
-    return (_jsxs("div", { ref: rootRef, id: id, className: cx("nx-form", `nx-form--${size}`, className), style: style, "data-nx-form": "", "aria-busy": loading || undefined, children: [status.restored && !loading && _jsx(DraftNotice, { store: anyStore, restored: status.restored, inputs: inputs, preferences: preferences }), _jsx("div", { className: "nx-form__grid", children: inputs.map(params => params.hidden ? null : loading ? (_jsx(SkeletonCell, { params: params, design: design }, params.name)) : (_jsx(FormCell, { store: anyStore, params: params, context: context }, params.name))) }), loading && (_jsx("p", { className: "nx-visually-hidden", role: "status", children: "Loading\u2026" })), _jsx("input", { ref: proxyRef, className: "nx-visually-hidden", tabIndex: -1, "aria-hidden": "true", disabled: locked, onInvalid: onProxyInvalid }), ownMessage && (_jsxs("p", { className: "nx-form__message nx-field__message nx-field__message--error", role: "alert", children: [_jsx(InlineIcon, { icon: iconAlertCircle }), _jsx("span", { children: ownMessage })] }))] }));
+    return (_jsxs("div", { ref: rootRef, id: id, className: cx("nx-form", `nx-form--${size}`, className), style: style, "data-nx-form": "", "aria-busy": loading || undefined, children: [status.restored && !loading && _jsx(DraftNotice, { store: anyStore, restored: status.restored, inputs: inputs, preferences: preferences }), _jsx("div", { className: "nx-form__grid", children: inputs.filter(params => params.dependsOn?.length || !params.hidden).map((params, index, visible) => (_jsxs(Fragment, { children: [params.section && (index === 0 || visible[index - 1]?.section !== params.section) && _jsx("h3", { className: "nx-form__section", children: params.section }), loading ? _jsx(SkeletonCell, { params: params, design: design }) : _jsx(FormCell, { store: anyStore, params: params, context: context })] }, params.name))) }), loading && (_jsx("p", { className: "nx-visually-hidden", role: "status", children: "Loading\u2026" })), _jsx("input", { ref: proxyRef, className: "nx-visually-hidden", tabIndex: -1, "aria-hidden": "true", disabled: locked, onInvalid: onProxyInvalid }), ownMessage && (_jsxs("p", { className: "nx-form__message nx-field__message nx-field__message--error", role: "alert", children: [_jsx(InlineIcon, { icon: iconAlertCircle }), _jsx("span", { children: ownMessage })] }))] }));
 }

package/dist/Components/Inputs/DateTimePicker.js

@@ -188,7 +188,8 @@ export function DateTimePicker(props) {
             const cap = natural > room ? `${Math.max(0, room)}px` : "";
             if (panel.style.maxHeight !== cap)
                 panel.style.maxHeight = cap;
-            placeUnderAnchor(panel, anchor, { gap: PANEL_GAP, margin: PANEL_MARGIN });
+            // No arrow: the panel opens flush under the box and is read as the field's own calendar.
+            placeUnderAnchor(panel, anchor, { gap: PANEL_GAP, margin: PANEL_MARGIN, arrow: false });
         };
         place();
         if (focusPanelRef.current) {

package/dist/Components/Inputs/GroupForm.js

@@ -64,7 +64,7 @@ const GroupSection = memo(function GroupSection({ store, rowKey, index, count, i
         store.touch(rowKey, cell.dataset.nxCell ?? "");
     }
     const heading = (_jsxs(_Fragment, { children: [_jsx("span", { id: titleId, className: "nx-group-form__title", children: title }), tags.map(tag => (_jsx("span", { className: "nx-group-form__tag", children: tag }, tag))), summary && _jsx("span", { className: "nx-group-form__summary", children: summary }), problems > 0 && (_jsxs("span", { className: "nx-group-form__problems", children: [_jsx(InlineIcon, { icon: iconAlertCircle }), problems, " to fix"] }))] }));
-    return (_jsxs("li", { className: "nx-group-form__section", "data-nx-row": rowKey, "data-open": open || undefined, "data-problem": problems > 0 || undefined, children: [_jsxs("div", { className: "nx-group-form__head", children: [context.collapsible ? (_jsxs("button", { type: "button", className: "nx-group-form__toggle", "aria-expanded": open, "aria-controls": open ? bodyId : undefined, "data-nx-row-actions": "", onClick: () => setCollapsed(open), children: [_jsx(InlineIcon, { icon: iconChevronDown, className: "nx-group-form__chevron" }), heading] })) : (_jsx("div", { className: "nx-group-form__heading", children: heading })), (context.sortable || context.canAdd || context.removable) && (_jsxs("div", { className: "nx-group-form__actions", children: [context.sortable && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconArrowUp }), "aria-label": `Move ${name} up`, title: "Move up", disabled: index === 0, onClick: () => onAction("move-up", rowKey) }), _jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconArrowDown }), "aria-label": `Move ${name} down`, title: "Move down", disabled: index === count - 1, onClick: () => onAction("move-down", rowKey) })] })), context.canAdd && (_jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconCopy }), "aria-label": `Duplicate ${name}`, title: "Duplicate", onClick: () => onAction("duplicate", rowKey) })), context.removable && (_jsx(Button, { variant: "ghost", size: "sm", hoverTone: "danger", icon: _jsx(InlineIcon, { icon: iconTrash }), "aria-label": `Remove ${name}`, title: "Remove", onClick: () => onAction("remove", rowKey) }))] }))] }), open && (_jsx("div", { id: bodyId, role: "group", "aria-labelledby": titleId, className: "nx-group-form__body", onBlur: onBlur, children: inputs.map(params => params.hidden ? null : (_jsx("div", { className: cx("nx-group-form__cell", CHOICE_TYPES.has(params.type) && "nx-group-form__cell--choice"), style: { "--nx-span": Math.max(1, Math.min(12, params.span ?? 12)) }, "data-nx-cell": params.name, children: _jsx(RowCell, { store: store, rowKey: rowKey, params: params, index: index, error: store.shownError(rowKey, params.name), layout: "group", idPrefix: context.idPrefix, size: context.size, design: context.design, readOnly: context.readOnly, disabled: context.disabled }, store.revision(rowKey, params.name)) }, params.name))) }))] }));
+    return (_jsxs("li", { className: "nx-group-form__section", "data-nx-row": rowKey, "data-open": open || undefined, "data-problem": problems > 0 || undefined, children: [_jsxs("div", { className: "nx-group-form__head", children: [context.collapsible ? (_jsxs("button", { type: "button", className: "nx-group-form__toggle", "aria-expanded": open, "aria-controls": open ? bodyId : undefined, "data-nx-row-actions": "", onClick: () => setCollapsed(open), children: [_jsx(InlineIcon, { icon: iconChevronDown, className: "nx-group-form__chevron" }), heading] })) : (_jsx("div", { className: "nx-group-form__heading", children: heading })), (context.sortable || context.canAdd || context.removable) && (_jsxs("div", { className: "nx-group-form__actions", children: [context.sortable && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconArrowUp }), "aria-label": `Move ${name} up`, title: "Move up", disabled: index === 0, onClick: () => onAction("move-up", rowKey) }), _jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconArrowDown }), "aria-label": `Move ${name} down`, title: "Move down", disabled: index === count - 1, onClick: () => onAction("move-down", rowKey) })] })), context.canAdd && (_jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconCopy }), "aria-label": `Duplicate ${name}`, title: "Duplicate", onClick: () => onAction("duplicate", rowKey) })), context.removable && (_jsx(Button, { variant: "ghost", size: "sm", hoverTone: "danger", icon: _jsx(InlineIcon, { icon: iconTrash }), "aria-label": `Remove ${name}`, title: "Remove", onClick: () => onAction("remove", rowKey) }))] }))] }), open && (_jsx("div", { id: bodyId, role: "group", "aria-labelledby": titleId, className: "nx-group-form__body", onBlur: onBlur, children: inputs.map(params => params.hidden ? null : (_jsx("div", { className: cx("nx-group-form__cell", CHOICE_TYPES.has(params.type) && "nx-group-form__cell--choice"), style: { "--nx-span": Math.max(1, Math.min(12, params.span ?? 12)) }, "data-nx-cell": params.name, children: _jsx(RowCell, { store: store, rowKey: rowKey, params: context.cellParams(rowKey, params, index), index: index, error: store.shownError(rowKey, params.name), layout: "group", idPrefix: context.idPrefix, size: context.size, design: context.design, readOnly: context.readOnly, disabled: context.disabled, lock: context.cellLock(rowKey, params.name, index) }, store.revision(rowKey, params.name)) }, params.name))) }))] }));
 });
 /**
  * The rows of a `TabularForm` as sections: each row's inputs with their own labels, on a 12-column grid (`span` in
@@ -153,6 +153,8 @@ export function GroupForm(props) {
         idPrefix: frame.id,
         size,
         design,
+        cellLock: rows.cellLock,
+        cellParams: rows.cellParams,
         readOnly,
         disabled,
         removable,
@@ -164,7 +166,7 @@ export function GroupForm(props) {
         preferences,
         sectionTitle,
         summary,
-    }), [frame.id, size, design, readOnly, disabled, removable, sortable, rows.canAdd, collapsible, defaultCollapsed, snapshot.showAll, preferences, sectionTitle, summary]);
+    }), [frame.id, size, design, rows.cellLock, rows.cellParams, readOnly, disabled, removable, sortable, rows.canAdd, collapsible, defaultCollapsed, snapshot.showAll, preferences, sectionTitle, summary]);
     const invalid = Boolean(error || snapshot.message || snapshot.invalidRows);
     return (_jsxs("fieldset", { id: frame.id, className: cx("nx-rows", "nx-group-form", `nx-group-form--${size}`, className), style: style, disabled: disabled, "data-problem": invalid || undefined, "data-readonly": readOnly || undefined, "aria-label": props["aria-label"], "aria-describedby": frame.messageId, children: [_jsx(RowsLegend, { id: frame.legendId, label: label, required: required || (props.min ?? 0) > 0, lock: frame.lock }), _jsx("input", { ref: rows.proxyRef, className: "nx-visually-hidden", tabIndex: -1, "aria-hidden": "true", form: props.form, onInvalid: rows.onInvalid }), count === 0 ? (_jsx("p", { className: "nx-group-form__empty", children: frame.emptyMessage })) : (_jsx("ol", { ref: listRef, className: "nx-group-form__list", children: snapshot.keys.map((key, index) => (_jsx(GroupSection, { store: store, rowKey: key, index: index, count: count, inputs: inputs, context: context, isNew: !loadedKeys.has(key), onAction: onAction }, `${snapshot.generation}:${key}`))) })), _jsx(RowsFooter, { messageId: frame.messageId, store: store, snapshot: snapshot, error: error, hint: hint, addLabel: frame.addLabel, addable: addable, canAdd: rows.canAdd, max: max, maxMessage: frame.maxMessage, size: size, onAdd: () => rows.actions.add(), onUndo: () => rows.actions.undo() })] }));
 }

package/dist/Components/Inputs/InputRenderer.d.ts

@@ -21,6 +21,8 @@ export interface InputOverrides {
     design?: InputDesign;
     /** On top of the params: `true` makes the input read-only even when its params do not. */
     readOnly?: boolean;
+    /** Replaces the params' own read-only note, for a cell locked by `cellReadOnly` rather than by its params. */
+    readOnlyMessage?: string;
     /** On top of the params, like `readOnly`. */
     disabled?: boolean;
     fieldName?: string;

package/dist/Components/Inputs/InputRenderer.js

@@ -25,7 +25,7 @@ import { TreeView } from "./TreeView.js";
 export function renderInput(params, overrides = {}) {
     if (params.hidden)
         return null;
-    const { type, span: _span, width: _width, grow: _grow, hidden: _hidden, onValueChange: ownChange, ...rest } = params;
+    const { type, section: _section, span: _span, width: _width, grow: _grow, hidden: _hidden, dependsOn: _dependsOn, onValueChange: ownChange, ...rest } = params;
     const { defaultValue, onValueChange, readOnly, disabled, ...set } = overrides;
     const props = { ...rest, ...set };
     if (readOnly)

package/dist/Components/Inputs/ReadOnlyNotice.js

@@ -88,7 +88,8 @@ function ReadOnlyNote({ ref, message }) {
             return;
         if (!isPopoverOpen(note))
             note.showPopover?.();
-        const place = () => placeUnderAnchor(note, shown.anchor.getBoundingClientRect(), { align: shown.align });
+        // No arrow: the note is not a panel, and it answers the whole box rather than one button in it.
+        const place = () => placeUnderAnchor(note, shown.anchor.getBoundingClientRect(), { align: shown.align, arrow: false });
         place();
         return followAnchor(place);
     }, [shown]);

package/dist/Components/Inputs/RowsInput.d.ts

@@ -34,7 +34,16 @@ export declare function useRowsInput<TRow extends RowValue>(props: RowsInputProp
         move(key: string, delta: number): void;
         undo(): void;
     };
+    cellLock: (key: string, name: string, index: number) => string | boolean | null | undefined;
+    rowLock: (key: string | null, index: number) => string | boolean | null | undefined;
+    cellParams: (key: string, params: InputParams, index: number) => InputParams;
 };
+/** What a layout asks for each cell: the reason it is generated, `true` for no reason, or nothing. */
+export type CellLock = (key: string, name: string, index: number) => string | boolean | null | undefined;
+/** What a layout asks for each cell: its own params, which are the column's unless `cellParams` answers for its row. */
+export type CellParams = (key: string, params: InputParams, index: number) => InputParams;
+/** What a layout asks for each row: the reason nobody may change it, `true` for no reason, or nothing. From `rowReadOnly`. */
+export type RowLock = (key: string | null, index: number) => string | boolean | null | undefined;
 /** The first control of an element that takes focus. */
 export declare function firstFocusable(element: Element | null): HTMLElement | null;
 /** Subscribes a row's component to its row: it renders again only when the row's messages or code-set values change. */
@@ -55,13 +64,15 @@ export interface RowCellProps {
     design?: InputDesign;
     readOnly: boolean;
     disabled: boolean;
+    /** This one cell holds a generated value: the reason, `true` for no reason, or nothing. From `cellReadOnly`. */
+    lock?: string | boolean | null;
 }
 /**
  * One input of one row. It starts from the store's value when it mounts and writes every change back, so typing renders
  * nothing; a value set from code mounts it again (its key holds the value's revision). In a table the column header is
  * the label, so the input is named "City, row 2" for screen readers and its messages still say "City".
  */
-export declare const RowCell: import("react").MemoExoticComponent<({ store, rowKey, params, index, error, layout, idPrefix, size, design, readOnly, disabled }: RowCellProps) => ReactNode>;
+export declare const RowCell: import("react").MemoExoticComponent<({ store, rowKey, params, index, error, layout, idPrefix, size, design, readOnly, disabled, lock }: RowCellProps) => ReactNode>;
 /** The legend of the rows, with the required mark and, when read-only, a lock. */
 export declare function RowsLegend({ id, label, required, lock }: {
     id: string;

package/dist/Components/Inputs/RowsInput.js

@@ -26,9 +26,9 @@ function sameRows(a, b) {
  * listener, a parent form's data and reset, and the handle given to `ref`.
  */
 export function useRowsInput(props, fallbackItem, layoutRef) {
-    const { inputs, required, min, max, unique, validate, rowKey, newRow, onRowChange, itemLabel, itemLabelPlural, value, defaultValue, name, readOnly = false, disabled = false, ref } = props;
+    const { inputs, required, min, max, unique, validate, rowKey, newRow, onRowChange, deriveRows, itemLabel, itemLabelPlural, value, defaultValue, name, readOnly = false, disabled = false, ref } = props;
     const preferences = useDatePreferences();
-    const options = { inputs, required, min, max, unique, validate, rowKey, newRow, onRowChange, itemLabel, itemLabelPlural, fallbackItem, context: { preferences } };
+    const options = { inputs, required, min, max, unique, validate, rowKey, newRow, onRowChange, deriveRows, itemLabel, itemLabelPlural, fallbackItem, context: { preferences } };
     const [store] = useState(() => new RowsStore(options, value ?? defaultValue ?? []));
     const snapshot = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
     const proxyRef = useRef(null);
@@ -160,7 +160,49 @@ export function useRowsInput(props, fallbackItem, layoutRef) {
     }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [store]);
-    return { store, snapshot, proxyRef, onInvalid, canAdd, actions };
+    // Stable, so a sheet of thousands of rows does not render again because the parent handed a new function.
+    const rowLock = useCallback((key, index) => {
+        const ask = latest.current.props.rowReadOnly;
+        if (!ask || !key)
+            return undefined;
+        const row = store.row(key);
+        return row ? ask(row, index) : undefined;
+    }, [store]);
+    const cellLock = useCallback((key, name, index) => {
+        // A row nobody may change locks every one of its cells, with the row's reason.
+        const whole = rowLock(key, index);
+        if (whole)
+            return whole;
+        const ask = latest.current.props.cellReadOnly;
+        if (!ask)
+            return undefined;
+        const row = store.row(key);
+        return row ? ask(row, name, index) : undefined;
+    }, [store, rowLock]);
+    // A cell's own params, merged once per answer: the same answer gives the same object, so the cell does not draw again.
+    const merged = useRef(new WeakMap());
+    const cellParams = useCallback((key, params, index) => {
+        const ask = latest.current.props.cellParams;
+        if (!ask)
+            return params;
+        const row = store.row(key);
+        const own = row ? ask(row, params.name, index) : null;
+        if (!own)
+            return params;
+        let byColumn = merged.current.get(own);
+        if (!byColumn)
+            merged.current.set(own, (byColumn = new WeakMap()));
+        let result = byColumn.get(params);
+        if (!result) {
+            // Descriptors rather than a spread, so a getter on either side is still read as the cell draws, as it would be
+            // on the column's own params; the column keeps its type and its name whatever the answer holds.
+            const { type: _type, name: _name, ...rest } = Object.getOwnPropertyDescriptors(own);
+            result = Object.defineProperties({}, { ...Object.getOwnPropertyDescriptors(params), ...rest });
+            byColumn.set(params, result);
+        }
+        return result;
+    }, [store]);
+    return { store, snapshot, proxyRef, onInvalid, canAdd, actions, cellLock, rowLock, cellParams };
 }
 function addButtonOf(proxy) {
     return proxy?.closest(".nx-rows")?.querySelector(":scope > .nx-rows__footer .nx-rows__add:not(:disabled)") ?? null;
@@ -191,7 +233,7 @@ export function labelText(params) {
  * nothing; a value set from code mounts it again (its key holds the value's revision). In a table the column header is
  * the label, so the input is named "City, row 2" for screen readers and its messages still say "City".
  */
-export const RowCell = memo(function RowCell({ store, rowKey, params, index, error, layout, idPrefix, size, design, readOnly, disabled }) {
+export const RowCell = memo(function RowCell({ store, rowKey, params, index, error, layout, idPrefix, size, design, readOnly, disabled, lock }) {
     const [initial] = useState(() => store.get(rowKey, params.name));
     const onValueChange = useCallback((next) => store.set(rowKey, params.name, next, "input"), [store, rowKey, params.name]);
     const needsName = params.type === "radio-group" || params.type === "checkbox-group";
@@ -205,6 +247,13 @@ export const RowCell = memo(function RowCell({ store, rowKey, params, index, err
         readOnly,
         disabled,
     };
+    // A generated cell: read-only however its params have it, and saying why, since a box that ignores typing without a
+    // word reads as broken. Code still writes it — that is what makes it generated rather than merely locked.
+    if (lock) {
+        overrides.readOnly = true;
+        if (typeof lock === "string")
+            overrides.readOnlyMessage = lock;
+    }
     if (error !== undefined)
         overrides.error = error;
     // A required radio means one row has it on, which the rows check; each radio alone is not required.

package/dist/Components/Inputs/TabularForm.d.ts

@@ -5,9 +5,13 @@ import type { RowValue, TabularFormProps } from "../../Interfaces/FormInterfaces
  * come as params, the same objects a form takes, so the same list can show as sections in a `GroupForm`.
  *
  * Only the rows in view are on the page, so a sheet of thousands of rows opens and types as fast as a short one; the
- * values live in a store outside React, and typing renders nothing. The header, the row numbers, and the remove buttons
- * stay in place while the table scrolls. A row number opens the row's menu (insert, duplicate, move, remove). Enter in
- * a text or number cell moves down the column, and on the last row adds a row.
+ * values live in a store outside React, and typing renders nothing. The header and the numbered column stay in place
+ * while the table scrolls. Each row has one control, beside its number and never in its place: a menu of insert,
+ * duplicate, move and remove. Enter in a text or number cell moves down the column, and on the last row adds a row.
+ *
+ * Every row is one line high, whatever it holds, so nothing shifts as the table is used; a column generated for every
+ * row (`cellReadOnly`) says so once on its header rather than on each of its cells; and `maxHeight` is brought down
+ * to whole rows, because a scroller that cuts the last one in half reads as broken rather than as scrollable.
  *
  * Inside a `<form>`, the rows are sent as JSON under `name`; a row with a problem blocks submit, and the first one
  * scrolls into view with focus.