nexus-shared 3.0.0 → 3.1.0

package/dist/Components/Forms/Crud.js

@@ -1,15 +1,16 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { iconEye, iconFlag, iconFlagOff, iconList, iconLock, iconNotes, iconPencil, iconPin, iconPinnedOff, iconPlus, iconRestore, iconTrash, iconTrashX, InlineIcon, } from "nexus-icons";
+import { iconArrowBackUp, iconEye, iconFlag, iconFlagOff, iconInfoCircle, iconList, iconLoader2, iconLock, iconNotes, iconPencil, iconPin, iconPinnedOff, iconPlus, iconTrash, iconTrashX, InlineIcon, } from "nexus-icons";
 import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { abortError } from "../../Helpers/ApiFormHelpers.js";
-import { unwrapApiResult } from "../../Helpers/ApiResponses.js";
+import { isAbortError, unwrapApiResult } from "../../Helpers/ApiResponses.js";
 import { getCrudBackend } from "../../Helpers/CrudBackend.js";
 import { actionAllowed, availableModes, CRUD_CACHE_LIFETIME, CRUD_MODES, CRUD_ROW_ACTIONS, CrudCache, crudCacheMode, crudListEndpoint, crudMassActions, crudMessageAction, crudRowActions, crudRowEndpoint, getCrudSettings, leavesList, massActionAllowed, patchCachedList, pinRoom, } from "../../Helpers/CrudHelpers.js";
 import { cx } from "../../Helpers/ClassHelpers.js";
 import { FormStore } from "../../Helpers/FormStore.js";
 import { pluralize } from "../../Helpers/MessageBuilder.js";
 import { getPermissions, permissionsVersion, subscribePermissions } from "../../Helpers/Permissions.js";
+import { filterRequest } from "../../Helpers/TableFilters.js";
 import { columnValue, formatCellText, readPath } from "../../Helpers/TableHelpers.js";
 import { api as browserApi } from "../../Services/BrowserApi.js";
 import { Button } from "../Documents/Button.js";
@@ -29,13 +30,14 @@ import { confirmDiscard, FormButtons } from "./SubmitForm.js";
  */
 const ALL_ACTIONS = ["create", "view", "edit", "flag", "pin", "trash", "recover", "delete", "trashFromDelete", "description"];
 const MODE_INFO = {
-    normal: { label: "All", icon: iconList, empty: plural => `No ${plural} yet.` },
+    // "Active", not "All": the list leaves out what is in the trash and what is deleted, and "All" said otherwise.
+    normal: { label: "Active", icon: iconList, empty: plural => `No ${plural} yet.` },
     flag: { label: "Flagged", icon: iconFlag, empty: plural => `No flagged ${plural}.` },
     trash: { label: "Trash", icon: iconTrash, empty: () => "The trash is empty." },
     deleted: { label: "Deleted", icon: iconTrashX, empty: plural => `No deleted ${plural}.` },
 };
-/** Actions that take a record out of reach are asked about first; flags, pins and recover are undone by a click. */
-const ASKED = new Set(["trash", "delete", "trashFromDelete"]);
+/** Actions that move a record between the lists are asked about first; flags and pins are undone by a click. */
+const ASKED = new Set(["trash", "recover", "delete", "trashFromDelete"]);
 /** Actions that take a record out of the active lists, so it is no longer among the pinned records either. */
 const LEFT_ACTIVE = new Set(["trash", "delete", "trashFromDelete"]);
 /** The words of an action that flags some records and unflags others (a mass toggle of a mixed selection). */
@@ -65,6 +67,65 @@ function CrudFormBody({ aside, details, children }) {
 function addsToRow(row, full) {
     return Object.entries(full).some(([name, value]) => JSON.stringify(value) !== JSON.stringify(row[name]));
 }
+/**
+ * A details record that lands sooner than this says nothing: the demo answers in about 0.3s and most backends sooner,
+ * and a word shown for a frame or two is the flicker this avoids. Longer than the popup's 160ms fade, so the word
+ * never lands on a half-faded popup.
+ */
+const DETAILS_STATUS_DELAY = 400;
+/** Once "Loading…" shows, it stays at least this long, so a record that lands just after the delay does not blink it. */
+const DETAILS_STATUS_HOLD = 300;
+/** One details popup's load state, shared by the details (which load) and the footer (which says so), as a form popup shares its FormStore with FormButtons. */
+function detailsLoad(initial) {
+    let state = initial;
+    const listeners = new Set();
+    return {
+        get: () => state,
+        set(next) {
+            if (next === state)
+                return;
+            state = next;
+            for (const listener of listeners)
+                listener();
+        },
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+    };
+}
+/**
+ * A details popup's footer: a form's bar, its status line on the left and Edit and Close on the right. The line is
+ * always there, so what it says never moves anything: "Loading…" only for a slow record, "Not all fields loaded." for
+ * one that failed.
+ */
+function DetailsFooter({ load, children }) {
+    const state = useSyncExternalStore(load.subscribe, load.get, load.get);
+    const [said, setSaid] = useState(null);
+    const since = useRef(0);
+    useEffect(() => {
+        if (state === "loading") {
+            if (said === "loading")
+                return;
+            const timer = window.setTimeout(() => {
+                since.current = performance.now();
+                setSaid("loading");
+            }, DETAILS_STATUS_DELAY);
+            return () => window.clearTimeout(timer);
+        }
+        const next = state === "failed" ? "failed" : null;
+        const left = said === "loading" ? since.current + DETAILS_STATUS_HOLD - performance.now() : 0;
+        if (left <= 0) {
+            setSaid(next);
+            return;
+        }
+        const timer = window.setTimeout(() => setSaid(next), left);
+        return () => window.clearTimeout(timer);
+    }, [state, said]);
+    return (_jsxs("div", { className: "nx-form-buttons nx-form-buttons--end nx-crud-details__foot", children: [_jsxs("p", { className: "nx-form-status nx-form-status--muted", "aria-live": "polite", children: [said === "loading" && (_jsxs(_Fragment, { children: [_jsx(InlineIcon, { icon: iconLoader2, className: "nx-spin" }), _jsx("span", { children: "Loading\u2026" })] })), said === "failed" && (_jsxs(_Fragment, { children: [_jsx(InlineIcon, { icon: iconInfoCircle }), _jsx("span", { children: "Not all fields loaded." })] }))] }), _jsx("div", { className: "nx-form-buttons__actions", children: children })] }));
+}
 /**
  * A CRUD page in one component: a data table of a controller's records with its lists, Add and Edit popups, details,
  * and actions on one record or many, each shown only when its endpoint exists and the user may call it.
@@ -201,13 +262,14 @@ export function Crud(props) {
             return new Promise(() => undefined);
         const endpoint = crudListEndpoint(api, mode, paging);
         const sortColumn = query.sort ? latest.current.columns.find(column => column.key === query.sort.key) : undefined;
-        const key = paging === "server" ? `${mode}|${query.search}|${query.sort ? `${query.sort.key}:${query.sort.direction}` : ""}|${query.page}|${query.pageSize}` : mode;
+        const filters = query.filters ? JSON.stringify(query.filters) : "";
+        const key = paging === "server" ? `${mode}|${query.search}|${query.sort ? `${query.sort.key}:${query.sort.direction}` : ""}|${query.page}|${query.pageSize}|${filters}` : mode;
         const kept = cache.get(key);
         if (kept)
             return kept;
         const options = { signal, toast: false, subject: plural };
         if (paging === "server")
-            options.body = backend.pageRequest(query, sortColumn?.sortKey ?? sortColumn?.key);
+            options.body = backend.pageRequest(query, sortColumn?.sortKey ?? sortColumn?.key, filterRequest(query.filters, latest.current.table?.filterInputs ?? [], latest.current.columns));
         return browserApi.send(endpoint, options).then(answer => {
             if (answer.aborted)
                 throw abortError();
@@ -229,27 +291,43 @@ export function Crud(props) {
      * A server page is not patched when a record joined it or left it: its order, its last row and its counts are the
      * server's, so that page is dropped and the next one loads. One whose rows only changed is written in place.
      */
-    function syncCaches(changes) {
+    function syncCaches(changes, written) {
         const shown = modeRef.current;
         if (changes.length)
             cache.map((key, value) => patchCachedList(value, crudCacheMode(key), changes, row => table.keyOf(row), member));
         else
             cache.clear();
-        // The list on screen is the table's own, every row of it, so it is written back whole rather than patched.
-        if (paging === "client" && shown)
+        // The list on screen is the table's own, every row of it, so it is written back whole rather than patched - when
+        // the change was written into it. When it was not (see `holds`), the table is read again from the lists just
+        // patched, or loaded when it has none, and a load still out for it is stopped: it may have been asked before the
+        // change, and would land without it.
+        if (!written)
+            void table.reload({ quiet: true });
+        else if (paging === "client" && shown)
             cache.update(shown, table.getRows());
     }
-    function afterChange(action, rows, changes) {
-        syncCaches(changes);
+    /**
+     * Whether the table holds the list an action was asked from, every row of it, so the answer can be written into it.
+     * Not when the user moved to another list while a slow answer was out - the table holds that list then - and not
+     * while a list is loading: a switch keeps the old list's rows until the new ones land, and writing those back would
+     * file one list under another's name.
+     */
+    function holds(from) {
+        return (from === undefined || from === modeRef.current) && table.getState().status === "ready";
+    }
+    function afterChange(action, rows, changes, written) {
+        syncCaches(changes, written);
         const shown = modeRef.current;
         if (shown)
             latest.current.onChange?.({ action, rows, mode: shown });
     }
     function applyChange(action, rows, options = {}) {
-        const { result, mass = false, markOn, values } = options;
+        const { result, mass = false, markOn, values, from } = options;
         const shown = modeRef.current;
         if (!shown)
             return;
+        // Every table write below is for the list the action was asked from; when the table holds another, none is made.
+        const write = holds(from);
         const answered = rows.length > 1 ? backend.answeredKeys(result, rowKey) : null;
         const done = answered ? rows.filter(row => answered.has(table.keyOf(row))) : rows;
         const changes = backend.answeredChanges(result, rowKey);
@@ -270,16 +348,18 @@ export function Crud(props) {
                     next = { ...next, ...change };
                 if (one)
                     next = { ...next, ...one };
-                if (leavesList(action, shown, backend.isFlagged(next)))
-                    leaving.push(key);
-                else
-                    table.upsert(next, { flash: false });
+                if (write) {
+                    if (leavesList(action, shown, backend.isFlagged(next)))
+                        leaving.push(key);
+                    else
+                        table.upsert(next, { flash: false });
+                }
                 updated.push(next);
                 moved.push({ key, row: next, before: current });
             }
             table.remove(leaving);
             patchPins(updated);
-            afterChange(action, updated, moved);
+            afterChange(action, updated, moved, write);
             return;
         }
         if (action === "pin") {
@@ -295,13 +375,13 @@ export function Crud(props) {
                 if (one)
                     next = { ...next, ...one };
                 // A pin changes the section above the list, never the list itself: the record stays where it is, on its page.
-                if (table.getRow(key))
+                if (write && table.getRow(key))
                     table.upsert(next, { flash: false });
                 updated.push(next);
                 moved.push({ key, row: next, before: current });
             }
             applyPins(updated);
-            afterChange(action, updated, moved);
+            afterChange(action, updated, moved, write);
             return;
         }
         if (action === "description") {
@@ -310,12 +390,13 @@ export function Crud(props) {
                 const key = table.keyOf(row);
                 const current = table.getRow(key) ?? row;
                 const next = { ...current, ...values };
-                table.upsert(next);
+                if (write)
+                    table.upsert(next);
                 updated.push(next);
                 moved.push({ key, row: next, before: current });
             }
             patchPins(updated);
-            afterChange(action, updated, moved);
+            afterChange(action, updated, moved, write);
             return;
         }
         // Trash, recover, delete and the move back to the trash take the record to another band, and only the answer
@@ -334,11 +415,11 @@ export function Crud(props) {
         }
         if (moved.length !== done.length)
             moved.length = 0;
-        if (leavesList(action, shown))
+        if (write && leavesList(action, shown))
             table.remove(keys);
         if (LEFT_ACTIVE.has(action))
             dropPins(keys);
-        afterChange(action, updated, moved);
+        afterChange(action, updated, moved, write);
     }
     /**
      * Records a page's own action changed, written exactly where the built-in ones write theirs. The handle's `apply`.
@@ -351,6 +432,10 @@ export function Crud(props) {
         const updated = [];
         const leaving = [];
         let pinned = false;
+        // The page asked from whichever list it did; the record's band decides, so only a table still loading is not
+        // written. A record that joined the list on screen - asked from another list, answered after a switch - is not in
+        // the table to be updated, so the table is read again from the patched lists instead.
+        let write = holds(undefined);
         for (const given of rows) {
             const next = { ...(table.getRow(table.keyOf(given)) ?? {}), ...given };
             const key = table.keyOf(next);
@@ -360,21 +445,24 @@ export function Crud(props) {
             // The record decides whether it is still in the list on screen; a backend that cannot say keeps it there.
             if (gone || member(next, shown) === false)
                 leaving.push(key);
-            else if (before)
+            else if (!before && member(next, shown))
+                write = false;
+            else if (before && write)
                 table.upsert(next, { flash: false });
             if (before && backend.isPinned(next) !== backend.isPinned(before))
                 pinned = true;
             updated.push(next);
             moved.push({ key, row: next, before, gone });
         }
-        table.remove(leaving);
+        if (write)
+            table.remove(leaving);
         if (gone)
             dropPins(leaving);
         else if (pinned)
             applyPins(updated);
         else
             patchPins(updated);
-        syncCaches(moved);
+        syncCaches(moved, write);
     }
     /* Row actions */
     async function runRowAction(action, row) {
@@ -382,6 +470,7 @@ export function Crud(props) {
         if (!endpoint)
             return;
         const key = rawKey(row);
+        const from = modeRef.current;
         const markOn = action === "flag" ? !backend.isFlagged(row) : action === "pin" ? !backend.isPinned(row) : undefined;
         if (action === "pin" && markOn && pinRoom(pinned?.length) < 1) {
             toast.warning(pinsFull());
@@ -390,7 +479,7 @@ export function Crud(props) {
         const options = { params: { id: key, [rowKey]: key }, subject: labelOf(row), action: crudMessageAction(action, markOn) };
         const answer = ASKED.has(action) ? await browserApi.confirm(endpoint, options) : await browserApi.send(endpoint, options);
         if (answer?.ok)
-            applyChange(action, [row], { result: answer.result, markOn });
+            applyChange(action, [row], { result: answer.result, markOn, from });
     }
     async function runMassAction(action, rows) {
         if (action === "description") {
@@ -424,10 +513,11 @@ export function Crud(props) {
         }
         const messageAction = action === "flag" && markOn === undefined ? TOGGLED_FLAG : crudMessageAction(action, markOn);
         const options = { body: backend.massRequest(action, sent.map(rawKey)), subject, plural: props.subjectPlural, count: sent.length, action: messageAction };
+        const from = modeRef.current;
         const answer = ASKED.has(action) ? await browserApi.confirm(endpoint, options) : await browserApi.send(endpoint, options);
         if (!answer?.ok)
             return;
-        applyChange(action, sent, { result: answer.result, mass: true, markOn });
+        applyChange(action, sent, { result: answer.result, mass: true, markOn, from });
         table.clearSelection();
         if (over > 0)
             toast.warning(`${sent.length} of ${sent.length + over} ${plural} pinned: you can pin up to ${maxPins}.`);
@@ -510,9 +600,10 @@ export function Crud(props) {
             return;
         const before = table.getRow(key);
         const next = { ...(before ?? record), ...full };
-        if (before)
+        const write = holds(undefined);
+        if (write && before)
             table.upsert(next, { flash: false });
-        syncCaches([{ key, row: next, before }]);
+        syncCaches([{ key, row: next, before }], write);
     }
     function onSaved(action, row, result, values) {
         // The record as the server now has it: what was sent, over the row it came from, with whatever the answer added.
@@ -523,9 +614,11 @@ export function Crud(props) {
         if (action === "edit") {
             const key = table.keyOf(record);
             const before = table.getRow(key);
-            table.upsert(record);
+            const write = holds(undefined);
+            if (write)
+                table.upsert(record);
             patchPins([record]);
-            afterChange("edit", [record], key ? [{ key, row: record, before }] : []);
+            afterChange("edit", [record], key ? [{ key, row: record, before }] : [], write);
             return;
         }
         // A new record belongs to the list of every record. An answer that is only the new key still gives it one, so
@@ -536,13 +629,11 @@ export function Crud(props) {
                 record[rowKey] = given;
         }
         const key = table.keyOf(record);
-        if (shown === "normal") {
-            if (key)
-                table.upsert(record);
-            else
-                void table.reload({ quiet: true });
-        }
-        afterChange("create", [record], key ? [{ key, row: record, before: undefined }] : []);
+        // Without a key the lists are dropped and the one on screen loads again (`syncCaches`).
+        const write = Boolean(key) && holds(undefined);
+        if (write && shown === "normal")
+            table.upsert(record);
+        afterChange("create", [record], key ? [{ key, row: record, before: undefined }] : [], write);
         if (key && !answered && api.details)
             void fillSaved(key, record);
     }
@@ -553,6 +644,7 @@ export function Crud(props) {
         const key = table.keyOf(row);
         const canEdit = allowed.edit && modeRef.current !== undefined && CRUD_ROW_ACTIONS[modeRef.current].includes("edit");
         const endpoint = api.details;
+        const status = detailsLoad(endpoint ? "loading" : "done");
         // The panel's record: the row at once, so it has something to show while the full one loads, and that one after.
         const shown = typeof details?.aside === "function" ? new FormStore() : null;
         shown?.load(row, { draft: false });
@@ -568,18 +660,28 @@ export function Crud(props) {
             // draw: a panel that renders at once (a Copy button) would otherwise take it, and one that loads would not.
             initialFocus: aside ? ".nx-popup__foot button" : undefined,
             content: (_jsx(CrudFormBody, { aside: aside, details: true, children: _jsx(CrudDetails, { row: row, columns: details?.columns ?? latest.current.columns, render: details?.render, load: endpoint
-                        ? signal => browserApi
-                            .get(endpoint, { params: { id: rawKey(row), [rowKey]: rawKey(row) }, signal, toast: false })
-                            .then(unwrapApiResult)
-                            .then(full => {
-                            // Only when it adds something: a panel that renders from the record would otherwise ask again
-                            // for exactly what it is already showing.
-                            if (shown && isRecord(full) && addsToRow(row, full))
-                                shown.load({ ...row, ...full }, { draft: false });
-                            return full;
-                        })
+                        ? signal => {
+                            const loading = browserApi
+                                .get(endpoint, { params: { id: rawKey(row), [rowKey]: rawKey(row) }, signal, toast: false })
+                                .then(unwrapApiResult)
+                                .then(full => {
+                                // Only when it adds something: a panel that renders from the record would otherwise ask again
+                                // for exactly what it is already showing.
+                                if (shown && isRecord(full) && addsToRow(row, full))
+                                    shown.load({ ...row, ...full }, { draft: false });
+                                return full;
+                            });
+                            // The footer follows the very promise the details do, with the same test for a popup closed meanwhile.
+                            void loading.then(() => status.set("done"), error => {
+                                if (!signal.aborted && !isAbortError(error))
+                                    status.set("failed");
+                            });
+                            return loading;
+                        }
                         : undefined }) })),
-            footer: popup => (_jsxs(_Fragment, { children: [canEdit && (_jsx(Button, { icon: _jsx(InlineIcon, { icon: iconPencil }), onClick: () => {
+            footer: popup => (_jsxs(DetailsFooter, { load: status, children: [details?.actions
+                        ?.filter(action => (!action.endpoint || (ready && can(action.endpoint))) && !action.hidden?.(row))
+                        .map(action => (_jsx(Button, { icon: action.icon, "data-action": action.id, onClick: () => action.onSelect(table.getRow(key) ?? row, popup), children: action.label }, action.id))), canEdit && (_jsx(Button, { icon: _jsx(InlineIcon, { icon: iconPencil }), onClick: () => {
                             popup.close();
                             void openForm("edit", table.getRow(key) ?? row);
                         }, children: "Edit" })), _jsx(Button, { variant: "primary", onClick: () => popup.close(), children: "Close" })] })),
@@ -624,9 +726,9 @@ export function Crud(props) {
             flag: flagged ? { label: "Unflag", icon: _jsx(InlineIcon, { icon: iconFlagOff }) } : { label: "Flag", icon: _jsx(InlineIcon, { icon: iconFlag }) },
             pin: isPinned ? { label: "Unpin", icon: _jsx(InlineIcon, { icon: iconPinnedOff }) } : { label: "Pin", icon: _jsx(InlineIcon, { icon: iconPin }) },
             trash: { label: "Move to trash", icon: _jsx(InlineIcon, { icon: iconTrash }), tone: "danger" },
-            recover: { label: "Recover", description: "Back to the active list", icon: _jsx(InlineIcon, { icon: iconRestore }), inline: true },
+            recover: { label: "Recover", description: "Back to the active list", icon: _jsx(InlineIcon, { icon: iconArrowBackUp }), inline: true },
             delete: { label: "Delete permanently", icon: _jsx(InlineIcon, { icon: iconTrashX }), tone: "danger" },
-            trashFromDelete: { label: "Move back to trash", icon: _jsx(InlineIcon, { icon: iconRestore }), inline: true },
+            trashFromDelete: { label: "Move back to trash", icon: _jsx(InlineIcon, { icon: iconArrowBackUp }), inline: true },
         };
         for (const action of crudRowActions(mode, candidate => allowed[candidate], trashless)) {
             if (action === "view" && latest.current.details === false)
@@ -650,9 +752,9 @@ export function Crud(props) {
                 flag: flagged === rows.length ? { label: "Unflag", icon: _jsx(InlineIcon, { icon: iconFlagOff }) } : { label: flagged ? "Flag / unflag" : "Flag", icon: _jsx(InlineIcon, { icon: iconFlag }) },
                 pin: unpinned === 0 ? { label: "Unpin", icon: _jsx(InlineIcon, { icon: iconPinnedOff }) } : { label: "Pin", icon: _jsx(InlineIcon, { icon: iconPin }) },
                 trash: { label: "Move to trash", icon: _jsx(InlineIcon, { icon: iconTrash }), tone: "danger" },
-                recover: { label: "Recover", icon: _jsx(InlineIcon, { icon: iconRestore }) },
+                recover: { label: "Recover", icon: _jsx(InlineIcon, { icon: iconArrowBackUp }) },
                 delete: { label: "Delete permanently", icon: _jsx(InlineIcon, { icon: iconTrashX }), tone: "danger" },
-                trashFromDelete: { label: "Move back to trash", icon: _jsx(InlineIcon, { icon: iconRestore }) },
+                trashFromDelete: { label: "Move back to trash", icon: _jsx(InlineIcon, { icon: iconArrowBackUp }) },
                 description: { label: "Description", icon: _jsx(InlineIcon, { icon: iconNotes }) },
             };
             list.push({ ...info[action], id: action, onSelect });
@@ -691,12 +793,29 @@ export function Crud(props) {
         return (_jsxs("div", { id: id, className: cx("nx-crud", "nx-crud--denied", className), style: style, role: "status", children: [_jsx(InlineIcon, { icon: iconLock, className: "nx-crud__denied-icon" }), _jsxs("p", { className: "nx-crud__denied-title", children: ["You do not have permission to see ", plural, "."] }), _jsx("p", { className: "nx-crud__denied-detail", children: "Ask an administrator for access." })] }));
     }
     const modeOptions = modes.map(value => ({ value, label: MODE_INFO[value].label, icon: _jsx(InlineIcon, { icon: MODE_INFO[value].icon }) }));
-    const addButton = allowed.create ? (_jsxs(Button, { variant: "primary", size: "sm", icon: _jsx(InlineIcon, { icon: iconPlus }), onClick: () => void run.current.openForm("create", null), children: ["Add ", subject] })) : null;
+    const add = allowed.create ? { label: `Add ${subject}`, onClick: () => void run.current.openForm("create", null) } : undefined;
+    // In the main list, select again by pin and by flag, the way the mass actions act on them.
+    const selectBy = mode === "normal"
+        ? [
+            ...(massAllowed.pin
+                ? [
+                    { label: "Pinned", icon: _jsx(InlineIcon, { icon: iconPin }), test: (row) => backend.isPinned(row) },
+                    { label: "Not pinned", icon: _jsx(InlineIcon, { icon: iconPinnedOff }), test: (row) => !backend.isPinned(row) },
+                ]
+                : []),
+            ...(massAllowed.flag
+                ? [
+                    { label: "Flagged", icon: _jsx(InlineIcon, { icon: iconFlag }), test: (row) => backend.isFlagged(row) },
+                    { label: "Not flagged", icon: _jsx(InlineIcon, { icon: iconFlagOff }), test: (row) => !backend.isFlagged(row) },
+                ]
+                : []),
+        ]
+        : [];
     const selectable = props.massActions !== false && Boolean(mode) && (crudMassActions(mode, action => massAllowed[action], massTrashless).length > 0 || Boolean(props.massActions));
-    return (_jsx("div", { id: id, className: cx("nx-crud", className), style: style, "data-mode": mode, children: _jsx(DataTable, { table: table, columns: columns, load: load, loadKey: mode ?? "waiting", paging: paging, rowKey: rowKey, rowLabel: labelOf, "aria-label": tableLabel, "aria-labelledby": props["aria-labelledby"], toolbar: modes.length > 1 && mode ? (_jsx(TabButtons, { size: "sm", labels: "selected", options: modeOptions, value: mode, onChange: setChosenMode, "aria-label": `${capitalize(plural)}: lists` })) : undefined, actions: _jsxs(_Fragment, { children: [props.toolbar, addButton] }), selectable: selectable, massActions: massActionsFor, rowActions: rowActions, pinnedRows: mode === "normal" && pinsOn ? (pinned ?? undefined) : undefined, pinnedLoading: pinsLoading, pinnedLabel: `Pinned ${plural}`, pinnedMax: maxPins, onRowOpen: onRowOpen, openOnClick: tableOptions?.openOnClick, onReload: () => {
+    return (_jsx("div", { id: id, className: cx("nx-crud", className), style: style, "data-mode": mode, children: _jsx(DataTable, { table: table, columns: columns, load: load, loadKey: mode ?? "waiting", paging: paging, rowKey: rowKey, rowLabel: labelOf, "aria-label": tableLabel, "aria-labelledby": props["aria-labelledby"], toolbar: modes.length > 1 && mode ? (_jsx(TabButtons, { size: "sm", labels: "auto", options: modeOptions, value: mode, onChange: setChosenMode, "aria-label": `${capitalize(plural)}: lists` })) : undefined, actions: props.toolbar, add: add, selectable: selectable, massActions: massActionsFor, selectBy: selectBy, rowActions: rowActions, pinnedRows: mode === "normal" && pinsOn ? (pinned ?? undefined) : undefined, pinnedLoading: pinsLoading, pinnedLabel: `Pinned ${plural}`, pinnedMax: maxPins, onRowOpen: onRowOpen, openOnClick: tableOptions?.openOnClick, onReload: () => {
                 cache.clear();
                 reloadPins();
-            }, emptyMessage: tableOptions?.emptyMessage ?? (mode ? MODE_INFO[mode].empty(plural) : undefined), emptyAction: mode === "normal" ? addButton : undefined, searchPlaceholder: tableOptions?.searchPlaceholder ?? `Search ${plural}…`, stateKey: tableOptions?.stateKey ?? `crud:${name}`, pageSize: tableOptions?.pageSize, pageSizes: tableOptions?.pageSizes, defaultSort: tableOptions?.defaultSort, numbered: tableOptions?.numbered, maxHeight: tableOptions?.maxHeight, fill: tableOptions?.fill, size: tableOptions?.size, maxSelection: tableOptions?.maxSelection, columnsMenu: tableOptions?.columnsMenu, searchDelay: tableOptions?.searchDelay, reorderable: tableOptions?.reorderable, resizable: tableOptions?.resizable, pinnable: tableOptions?.pinnable, moreActions: tableOptions?.moreActions, exportable: tableOptions?.exportable, printable: tableOptions?.printable, exportName: tableOptions?.exportName, onImport: tableOptions?.onImport, excel: tableOptions?.excel && {
+            }, emptyMessage: tableOptions?.emptyMessage ?? (mode ? MODE_INFO[mode].empty(plural) : undefined), emptyAction: mode === "normal" ? undefined : null, searchPlaceholder: tableOptions?.searchPlaceholder ?? `Search ${plural}…`, stateKey: tableOptions?.stateKey ?? `crud:${name}`, pageSize: tableOptions?.pageSize, pageSizes: tableOptions?.pageSizes, defaultSort: tableOptions?.defaultSort, numbered: tableOptions?.numbered, maxHeight: tableOptions?.maxHeight, fill: tableOptions?.fill, size: tableOptions?.size, maxSelection: tableOptions?.maxSelection, columnsMenu: tableOptions?.columnsMenu, searchDelay: tableOptions?.searchDelay, filterInputs: tableOptions?.filterInputs, reorderable: tableOptions?.reorderable, resizable: tableOptions?.resizable, pinnable: tableOptions?.pinnable, moreActions: tableOptions?.moreActions, exportable: tableOptions?.exportable, printable: tableOptions?.printable, exportName: tableOptions?.exportName, onImport: tableOptions?.onImport, excel: tableOptions?.excel && {
                 ...tableOptions.excel,
                 // A spreadsheet wrote records straight into the database: every list this CRUD kept is out of date.
                 onImported: () => {

package/dist/Components/Forms/CrudParts.d.ts

@@ -6,7 +6,11 @@ export interface CrudDetailsProps<TRow extends FormValues = FormValues> {
     row: TRow;
     /** The fields, as the table's columns describe them; hidden columns included. */
     columns: readonly TableColumn<TRow>[];
-    /** Loads the full record (fields the list leaves out); its values replace the row's when they come. */
+    /**
+     * Loads the full record (fields the list leaves out); its values replace the row's when they come. Meanwhile a field
+     * the row lacks keeps its line blank, and reads "Not loaded" if the load fails; the details say nothing else about
+     * the load (`aria-busy` while it runs), so the popup around them never changes size for it.
+     */
     load?: (signal: AbortSignal) => Promise<Partial<TRow> | null | undefined>;
     /** Draws the details instead of the list of fields. */
     render?: (row: TRow) => ReactNode;

package/dist/Components/Forms/CrudParts.js

@@ -1,18 +1,30 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { iconInfoCircle, iconLoader2, InlineIcon } from "nexus-icons";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { motionAllowed } from "../../Helpers/AnimationHelpers.js";
 import { isAbortError } from "../../Helpers/ApiResponses.js";
 import { cx } from "../../Helpers/ClassHelpers.js";
 import { useBrowserTimeZone, useDatePreferences } from "../../Helpers/DatePreferences.js";
+import { readPath } from "../../Helpers/TableHelpers.js";
+import { useNumberLocale } from "../../Helpers/UserPreferences.js";
 import { TableCellValue } from "../Viewers/DataTableParts.js";
+/**
+ * An element's height as its `height` would set it: unrounded, unlike `offsetHeight`, so an unroll between two of
+ * them starts and ends exactly where the details are and the popup never steps by a fraction of a pixel. NaN while
+ * not drawn.
+ */
+const usedHeight = (element) => parseFloat(getComputedStyle(element).height);
 /** A record's fields as label and value, two to a line where there is room, in the formats of the table's columns. */
 export function CrudDetails({ row, columns, load, render }) {
     const [record, setRecord] = useState(row);
     const [state, setState] = useState(load ? "loading" : "done");
+    const rootRef = useRef(null);
+    // The details' height just before the full record went in, kept only when the change may be animated.
+    const grownFrom = useRef(null);
     const preferences = useDatePreferences();
     const timeZone = useBrowserTimeZone();
-    const options = useMemo(() => ({ preferences, timeZone: timeZone ?? undefined }), [preferences, timeZone]);
+    const locale = useNumberLocale();
+    const options = useMemo(() => ({ preferences, timeZone: timeZone ?? undefined, locale }), [preferences, timeZone, locale]);
     useEffect(() => {
         if (!load)
             return;
@@ -20,8 +32,11 @@ export function CrudDetails({ row, columns, load, render }) {
         load(controller.signal).then(full => {
             if (controller.signal.aborted)
                 return;
-            if (full)
+            if (full) {
+                if (motionAllowed() && rootRef.current)
+                    grownFrom.current = usedHeight(rootRef.current);
                 setRecord(current => ({ ...current, ...full }));
+            }
             setState("done");
         }, error => {
             if (controller.signal.aborted || isAbortError(error))
@@ -32,5 +47,22 @@ export function CrudDetails({ row, columns, load, render }) {
         // The record loads once per popup.
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return (_jsxs("div", { className: "nx-crud-details", "aria-busy": state === "loading" || undefined, children: [state === "loading" && (_jsxs("p", { className: "nx-crud-details__note", role: "status", children: [_jsx(InlineIcon, { icon: iconLoader2, className: "nx-spin" }), "Loading the full record\u2026"] })), state === "failed" && (_jsxs("p", { className: "nx-crud-details__note", role: "status", children: [_jsx(InlineIcon, { icon: iconInfoCircle }), "The full record could not be loaded; these are the values from the list."] })), render ? (render(record)) : (_jsx("dl", { className: "nx-crud-details__list", children: columns.map(column => (_jsxs("div", { className: cx("nx-crud-details__item", column.wrap && "nx-crud-details__item--wide"), children: [_jsx("dt", { className: "nx-crud-details__label", children: column.label }), _jsx("dd", { className: "nx-crud-details__value", children: _jsx(TableCellValue, { column: column, row: record, options: options }) })] }, column.key))) }))] }));
+    // A record that makes the details taller (a long note the list did not have) unrolls to its height when motion is
+    // allowed, as maximize does; without motion it changes at once. Nothing waits on it.
+    useLayoutEffect(() => {
+        const from = grownFrom.current;
+        grownFrom.current = null;
+        const root = rootRef.current;
+        if (!from || !root || typeof root.animate !== "function")
+            return;
+        const to = usedHeight(root);
+        if (!to || Math.abs(to - from) < 1)
+            return;
+        const animation = root.animate([{ height: `${from}px`, overflow: "clip" }, { height: `${to}px`, overflow: "clip" }], { duration: 200, easing: "cubic-bezier(0.2, 0, 0, 1)" });
+        return () => animation.cancel();
+    }, [record]);
+    // A field the list's row does not carry can only be filled by the full record. Columns that draw or work out their
+    // own value (`render`, `value`) draw as always, because only they know what they read.
+    const awaited = (column) => state !== "done" && !column.render && !column.value && readPath(record, column.key) === undefined;
+    return (_jsx("div", { ref: rootRef, className: "nx-crud-details", "aria-busy": state === "loading" || undefined, children: render ? (render(record)) : (_jsx("dl", { className: "nx-crud-details__list", children: columns.map(column => (_jsxs("div", { className: cx("nx-crud-details__item", column.wrap && "nx-crud-details__item--wide"), children: [_jsx("dt", { className: "nx-crud-details__label", children: column.label }), _jsx("dd", { className: "nx-crud-details__value", children: !awaited(column) ? _jsx(TableCellValue, { column: column, row: record, options: options }) : state === "failed" ? _jsx("span", { className: "nx-crud-details__missing", children: "Not loaded" }) : null })] }, column.key))) })) }));
 }

package/dist/Components/Forms/ExcelImport.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import { type ReactNode, type Ref } from "react";
 import type { ExcelEndpoints, ExcelImportAnswer } from "../../Interfaces/ExcelInterfaces.ts";
 import { type ExcelCallOptions } from "../../Services/ExcelApi.ts";
 import { type PopupHandle } from "../Layouts/PopupHost.tsx";
@@ -18,24 +18,40 @@ export interface ExcelImportProps {
     templateDownload?: false;
     /** The tallest each editor grows before its rows scroll. Default 320. */
     maxHeight?: number;
+    /**
+     * `"file"` (the default): a filled template is sent to be checked, and its rows come back to be gone over.
+     * `"bulk"`: no file - the rows are typed here, from one empty row, and imported with the same checks. A sheet with a
+     * required list cannot be typed in (its key is picked in the spreadsheet), and the panel says so.
+     */
+    mode?: "file" | "bulk";
+    /** What closing the panel would lose, so a window can ask first: `openExcelImport` passes one. */
+    ref?: Ref<ExcelImportHandle>;
     className?: string;
 }
+/** What `ref` gives on an import panel. */
+export interface ExcelImportHandle {
+    /** The rows only this screen has - typed here, or a sheet's row edited here - which closing the panel loses. */
+    unsavedRows: () => number;
+}
 /**
- * The three steps of an import in one panel: the template, the file, and the review.
+ * The three steps of an import in one panel: the template, the file, and the review - or, for a bulk insert, the rows
+ * typed in and the import.
  *
  * @example
  * <ExcelImport endpoints={CITY_SHEET} subject="city" onImported={() => table.reload()} />
+ * <ExcelImport endpoints={REGION_SHEET} subject="region" mode="bulk" onImported={() => table.reload()} />
  */
-export declare function ExcelImport({ endpoints, subject: given, params, onImported, onClose, templateDownload, maxHeight, className }: ExcelImportProps): import("react").JSX.Element;
+export declare function ExcelImport({ endpoints, subject: given, params, onImported, onClose, templateDownload, maxHeight, mode, ref, className }: ExcelImportProps): import("react").JSX.Element;
 /** Options of the import popup: the panel's, plus what the window looks like. */
-export interface OpenExcelImportOptions extends Omit<ExcelImportProps, "onClose"> {
-    /** The window's title. Default: "Import <subjects> from a spreadsheet". */
+export interface OpenExcelImportOptions extends Omit<ExcelImportProps, "onClose" | "ref"> {
+    /** The window's title. Default: "Import <subjects> from a spreadsheet", or "Bulk insert <subjects>". */
     title?: ReactNode;
-    /** One popup per key. Default: the import endpoint's path, so one model opens one. */
+    /** One popup per key. Default: the import endpoint's path and the mode, so one model opens one of each. */
     popupKey?: string;
 }
 /**
- * Opens the import panel as a window. This is the one line a data table's Import entry needs.
+ * Opens the import panel as a window. This is the one line a data table's Import entry needs - and, with
+ * `mode: "bulk"`, its Bulk insert entry.
  *
  * @example onImport={() => openExcelImport({ endpoints: CITY_SHEET, subject: "city", onImported: reload })}
  */