nexus-shared 2.0.0 → 3.0.0

package/dist/Components/Viewers/DataTableColumns.js

@@ -0,0 +1,243 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { iconArrowBackUp, iconColumns3, iconGripVertical, iconPin, InlineIcon } from "nexus-icons";
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { followAnchor, isPopoverOpen, placeUnderAnchor } from "../../Helpers/PopoverHelpers.js";
+import { Button } from "../Documents/Button.js";
+/** The rows of the panel: a band for every run of neighbours that name the same group, as the header draws them. */
+function panelRows(columns, groups) {
+    const rows = [];
+    for (const column of columns) {
+        const group = groups.get(column.key);
+        const last = rows[rows.length - 1];
+        if (group && last && last.band === group)
+            last.columns.push(column);
+        else if (group)
+            rows.push({ band: group, columns: [column] });
+        else
+            rows.push({ band: null, column });
+    }
+    return rows;
+}
+/** The keys of a row, in order: one column, or every column of a band. */
+function rowKeys(row) {
+    return row.band === null ? [row.column.key] : row.columns.map(column => column.key);
+}
+/** Moves `from` to `to` in a list. */
+function moveItem(items, from, to) {
+    const next = [...items];
+    const [item] = next.splice(from, 1);
+    if (item === undefined)
+        return next;
+    next.splice(to, 0, item);
+    return next;
+}
+/** Which place the pointer is over, by the middle of each row: the index the row held would take. */
+function dropIndex(boxes, y, from) {
+    for (let index = 0; index < boxes.length; index++) {
+        const box = boxes[index];
+        if (y < box.top + box.height / 2)
+            return index > from ? index - 1 : index;
+    }
+    return boxes.length - 1;
+}
+/** The room kept between the panel and the window's edge, and the least height it is ever given. */
+const PANEL_MARGIN = 8;
+const PANEL_MIN_HEIGHT = 160;
+/** The text of a label that may be a node, for an accessible name. */
+function textOf(label) {
+    return typeof label === "string" || typeof label === "number" ? String(label) : "the column";
+}
+/**
+ * The button that opens the Columns panel, and the panel itself: a checkbox per column, bands with their columns under
+ * them, and a handle to drag a row into another place. The panel is a popover under the button, so it closes on Esc,
+ * on a click outside, and on Tab.
+ *
+ * @example
+ * <TableColumnsPanel columns={columns} hidden={state.hidden} pinned={state.pinned}
+ *   onToggle={(key, hide) => table.setHidden(key, hide)} onOrder={keys => table.setOrder(keys)} />
+ */
+export function TableColumnsPanel({ columns, hidden, pinned, reorderable = true, size = "md", changed = false, onToggle, onOrder, onReset, "aria-label": ariaLabel = "Columns", }) {
+    const id = useId();
+    const panelId = `${id}-columns`;
+    const triggerId = `${id}-columns-trigger`;
+    const triggerRef = useRef(null);
+    const panelRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    // Set on pointer down while the panel is open: that press closes it, and its click must not open it again.
+    const dismissing = useRef(false);
+    // While a row is held: its key, the list it may move in, and where it would land.
+    const [drag, setDrag] = useState(null);
+    const [said, setSaid] = useState("");
+    // The columns of a band that were already hidden when its checkbox was cleared: shown again, the band keeps them off.
+    const bandMemory = useRef(new Map());
+    const all = columns.map(column => ({
+        key: column.key,
+        label: column.label,
+        shown: !hidden.has(column.key),
+        pin: pinned[column.key] ?? column.pinned ?? null,
+        movable: reorderable && column.movable !== false,
+        hideable: column.hideable !== false,
+    }));
+    const groups = new Map(columns.map(column => [column.key, column.group]));
+    const rows = panelRows(all, groups);
+    const shownCount = all.filter(column => column.shown).length;
+    const bands = rows.some(row => row.band !== null);
+    function place() {
+        const panel = panelRef.current;
+        const trigger = triggerRef.current;
+        if (!panel || !trigger)
+            return;
+        // Measured at its own height, then capped to the room on the side it landed on: a table with many columns keeps
+        // its heading, its note and Reset in the window, and the list of columns scrolls instead.
+        panel.style.maxHeight = "";
+        placeUnderAnchor(panel, trigger.getBoundingClientRect(), { align: "end" });
+        const top = panel.getBoundingClientRect().top;
+        panel.style.maxHeight = `${Math.max(PANEL_MIN_HEIGHT, window.innerHeight - top - PANEL_MARGIN)}px`;
+    }
+    // The panel is fixed, so it follows the button while the page or a scroller moves.
+    useLayoutEffect(() => {
+        if (!open)
+            return;
+        return followAnchor(place);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    // A panel opened again starts without the last move's message, so a screen reader is not told about an old move.
+    useEffect(() => {
+        if (!open)
+            setSaid("");
+    }, [open]);
+    /** The whole order after moving a row of `list` ("" for the panel itself, a band's name for its own columns). */
+    function moved(list, from, to) {
+        if (list === "") {
+            const next = moveItem(rows, from, to);
+            return next.flatMap(rowKeys);
+        }
+        const band = rows.find(row => row.band === list);
+        if (!band || band.band === null)
+            return null;
+        const next = moveItem(band.columns, from, to);
+        return rows.flatMap(row => (row.band === list ? next.map(column => column.key) : rowKeys(row)));
+    }
+    function move(list, from, to, label) {
+        const length = list === "" ? rows.length : rows.find(row => row.band === list)?.columns.length;
+        if (!length)
+            return;
+        const target = Math.min(Math.max(to, 0), length - 1);
+        if (target === from)
+            return;
+        const order = moved(list, from, target);
+        if (!order)
+            return;
+        onOrder(order);
+        setSaid(list === "" ? `${label} is now ${target + 1} of ${length}.` : `${label} is now ${target + 1} of ${length} in ${list}.`);
+    }
+    function onHandleKeyDown(event, list, index, label) {
+        const length = list === "" ? rows.length : (rows.find(row => row.band === list)?.columns.length ?? 0);
+        const step = event.key === "ArrowUp" ? -1 : event.key === "ArrowDown" ? 1 : event.key === "Home" ? -index : event.key === "End" ? length - 1 - index : 0;
+        if (!step)
+            return;
+        event.preventDefault();
+        move(list, index, index + step, label);
+    }
+    function onHandlePointerDown(event, list, index, key, label) {
+        if (event.button !== 0)
+            return;
+        // A row moves inside its own list only: a band among the bands, a column of a band among its siblings.
+        const owner = event.currentTarget.closest("[data-list]");
+        if (!owner)
+            return;
+        const handle = event.currentTarget;
+        const boxes = [...owner.children].map(child => child.getBoundingClientRect());
+        handle.setPointerCapture(event.pointerId);
+        setDrag({ key, list, to: index });
+        const end = (done, y) => {
+            handle.removeEventListener("pointermove", onMove);
+            handle.removeEventListener("pointerup", up);
+            handle.removeEventListener("pointercancel", cancel);
+            handle.removeEventListener("keydown", escape);
+            setDrag(null);
+            if (done && y !== undefined)
+                move(list, index, dropIndex(boxes, y, index), label);
+        };
+        const onMove = (moved) => setDrag({ key, list, to: dropIndex(boxes, moved.clientY, index) });
+        const up = (moved) => {
+            if (handle.hasPointerCapture(moved.pointerId))
+                handle.releasePointerCapture(moved.pointerId);
+            end(true, moved.clientY);
+        };
+        const cancel = () => end(false);
+        // Esc puts the row back where it was.
+        const escape = (key) => {
+            if (key.key !== "Escape")
+                return;
+            key.preventDefault();
+            key.stopPropagation();
+            end(false);
+        };
+        handle.addEventListener("pointermove", onMove);
+        handle.addEventListener("pointerup", up);
+        handle.addEventListener("pointercancel", cancel);
+        handle.addEventListener("keydown", escape);
+    }
+    /** The band's checkbox: off hides every column under it, on brings back the ones it was not already hiding. */
+    function toggleBand(band, columnsOfBand, show) {
+        if (show) {
+            const kept = new Set(bandMemory.current.get(band) ?? []);
+            bandMemory.current.delete(band);
+            for (const column of columnsOfBand)
+                if (!column.shown && !kept.has(column.key))
+                    onToggle(column.key, false);
+            return;
+        }
+        bandMemory.current.set(band, columnsOfBand.filter(column => !column.shown).map(column => column.key));
+        for (const column of columnsOfBand)
+            if (column.shown)
+                onToggle(column.key, true);
+    }
+    function hidePopover(panel) {
+        if (isPopoverOpen(panel))
+            panel.hidePopover();
+    }
+    /** One column's row: the handle, the checkbox, the label, and a mark when it is pinned. */
+    function columnRow(column, list, index, inBand, bandOff) {
+        const lastShown = column.shown && shownCount <= 1;
+        return (_jsxs("li", { className: cx("nx-columns__row", inBand && "nx-columns__row--child"), "data-held": drag?.key === column.key ? "" : undefined, "data-drop": drag && drag.list === list && drag.key !== column.key && drag.to === index ? "" : undefined, children: [column.movable && !bandOff ? (_jsx("button", { type: "button", className: "nx-columns__handle", "aria-label": `Move ${textOf(column.label)}`, title: inBand ? `Drag to move it inside ${list}, or use the arrow keys` : "Drag to move, or use the arrow keys", onPointerDown: event => onHandlePointerDown(event, list, index, column.key, textOf(column.label)), onKeyDown: event => onHandleKeyDown(event, list, index, textOf(column.label)), children: _jsx(InlineIcon, { icon: iconGripVertical }) })) : (_jsx("span", { className: "nx-columns__handle nx-columns__handle--fixed", "aria-hidden": "true" })), _jsxs("label", { className: "nx-choice nx-choice--sm nx-columns__choice", children: [_jsx("input", { type: "checkbox", className: "nx-choice__control nx-choice__control--checkbox", checked: column.shown && !bandOff, disabled: bandOff || !column.hideable || lastShown, title: bandOff ? `${list} is hidden` : column.hideable ? undefined : "Always shown", onChange: event => onToggle(column.key, !event.currentTarget.checked) }), _jsx("span", { className: "nx-choice__text", children: _jsx("span", { className: "nx-choice__label nx-columns__label", children: column.label }) })] }), column.pin && (_jsxs("span", { className: "nx-columns__pin", title: `Pinned to the ${column.pin === "left" ? "left" : "right"}`, children: [_jsx(InlineIcon, { icon: iconPin }), _jsx("span", { className: "nx-visually-hidden", children: `Pinned to the ${column.pin === "left" ? "left" : "right"}` })] }))] }, column.key));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { ref: triggerRef, id: triggerId, size: size === "sm" ? "sm" : "md", icon: _jsx(InlineIcon, { icon: iconColumns3 }), "aria-label": ariaLabel, "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": panelId, title: "Columns: show, hide, and arrange", onPointerDown: () => {
+                    dismissing.current = isPopoverOpen(panelRef.current);
+                }, onClick: () => {
+                    if (dismissing.current) {
+                        dismissing.current = false;
+                        return;
+                    }
+                    const panel = panelRef.current;
+                    if (!panel)
+                        return;
+                    if (isPopoverOpen(panel))
+                        hidePopover(panel);
+                    else {
+                        panel.showPopover();
+                        place();
+                        panel.focus();
+                    }
+                } }), _jsxs("div", { ref: panelRef, id: panelId, popover: "auto", role: "dialog", tabIndex: -1, "aria-labelledby": `${panelId}-title`, className: cx("nx-popover", "nx-columns", size === "sm" && "nx-columns--sm"), "data-dragging": drag ? "" : undefined, onToggle: (event) => setOpen(event.newState === "open"), onKeyDown: event => {
+                    if (event.key === "Tab")
+                        hidePopover(event.currentTarget);
+                }, children: [_jsxs("div", { className: "nx-columns__head", children: [_jsx("span", { className: "nx-columns__title", id: `${panelId}-title`, children: "Columns" }), _jsxs("span", { className: "nx-columns__count", children: [shownCount, " of ", all.length, " shown"] })] }), _jsx("ul", { className: "nx-columns__list", "data-list": "", children: rows.map((row, index) => {
+                            if (row.band === null)
+                                return columnRow(row.column, "", index, false, false);
+                            const band = row.band;
+                            // A band whose columns were split into two runs is drawn twice, so a row is known by its first column, never
+                            // by the band's name: two rows under one name would be one row to React.
+                            const bandId = `band:${row.columns[0].key}`;
+                            const shown = row.columns.filter(column => column.shown).length;
+                            const movable = row.columns.every(column => column.movable);
+                            const last = shown > 0 && shownCount - shown < 1;
+                            return (_jsxs("li", { className: "nx-columns__row nx-columns__row--band", "data-held": drag?.key === bandId ? "" : undefined, "data-drop": drag && drag.list === "" && drag.key !== bandId && drag.to === index ? "" : undefined, children: [_jsxs("div", { className: "nx-columns__band", children: [movable ? (_jsx("button", { type: "button", className: "nx-columns__handle", "aria-label": `Move ${band}`, title: "Drag to move the whole band, or use the arrow keys", onPointerDown: event => onHandlePointerDown(event, "", index, bandId, band), onKeyDown: event => onHandleKeyDown(event, "", index, band), children: _jsx(InlineIcon, { icon: iconGripVertical }) })) : (_jsx("span", { className: "nx-columns__handle nx-columns__handle--fixed", "aria-hidden": "true" })), _jsxs("label", { className: "nx-choice nx-choice--sm nx-columns__choice", children: [_jsx("input", { type: "checkbox", className: "nx-choice__control nx-choice__control--checkbox", checked: shown > 0, disabled: last, ref: input => {
+                                                            if (input)
+                                                                input.indeterminate = shown > 0 && shown < row.columns.length;
+                                                        }, "aria-label": `${band}: ${shown} of ${row.columns.length} shown`, onChange: event => toggleBand(band, row.columns, event.currentTarget.checked) }), _jsx("span", { className: "nx-choice__text", children: _jsx("span", { className: "nx-choice__label nx-columns__label", children: band }) })] }), _jsxs("span", { className: "nx-columns__band-count", children: [shown, " / ", row.columns.length] })] }), _jsx("ul", { className: "nx-columns__children", "data-list": band, children: row.columns.map((column, childIndex) => columnRow(column, band, childIndex, true, shown === 0)) })] }, bandId));
+                        }) }), _jsxs("p", { className: "nx-columns__note", children: [reorderable ? "Drag a handle, or move it with the arrow keys." : "This table keeps the order of its columns.", bands ? " A column under a band moves inside it; the band moves as one." : ""] }), onReset && (_jsx("div", { className: "nx-columns__foot", children: _jsx(Button, { size: "sm", variant: "ghost", icon: _jsx(InlineIcon, { icon: iconArrowBackUp }), disabled: !changed, onClick: () => onReset(), children: "Reset columns" }) })), _jsx("span", { className: "nx-visually-hidden", "aria-live": "polite", children: said })] })] }));
+}

package/dist/Components/Viewers/DataTableParts.d.ts

@@ -38,8 +38,10 @@ export declare function TableColumnGroup<TRow extends TableRow>({ columns, width
     colRefs: Map<string, HTMLTableColElement>;
 }): import("react").JSX.Element;
 /** The number of a row, its checkbox, or both: the number until the pointer is over the row or something is selected. */
-export declare function TableIndexCell({ heading, own, number, numbered, selectable, checkbox, }: {
+export declare function TableIndexCell({ heading, rowSpan, own, number, numbered, selectable, checkbox, }: {
     heading?: boolean;
+    /** 2 in the heading while the header has a band of group headings above the columns' own. */
+    rowSpan?: number;
     own: {
         offset: number;
         edge: boolean;
@@ -74,9 +76,11 @@ export interface TableRowViewProps<TRow extends TableRow> {
     onToggle: (row: TRow, on: boolean, event: MouseEvent<HTMLInputElement>) => void;
     onAction: (row: TRow, action: TableRowAction<TRow>) => void;
     onOpen?: (row: TRow) => void;
+    /** A single click opens the row, as a double-click does. */
+    openOnClick?: boolean;
 }
 /** One row. It renders again only when its row, its state, or the columns change. */
-declare function TableRowViewInner<TRow extends TableRow>({ row, rowKey, number, label, columns, cellOptions, selectable, selected, selectionFull, busy, flashed, numbered, pinned, frame, sized, actions, onToggle, onAction, onOpen, }: TableRowViewProps<TRow>): import("react").JSX.Element;
+declare function TableRowViewInner<TRow extends TableRow>({ row, rowKey, number, label, columns, cellOptions, selectable, selected, selectionFull, busy, flashed, numbered, pinned, frame, sized, actions, onToggle, onAction, onOpen, openOnClick, }: TableRowViewProps<TRow>): import("react").JSX.Element;
 export declare const TableRowView: typeof TableRowViewInner;
 /**
  * The head of the pinned section: one row across the table with a button that folds the pinned records open and shut,

package/dist/Components/Viewers/DataTableParts.js

@@ -75,7 +75,7 @@ export function TableColumnGroup({ columns, widths, frame, colRefs, }) {
     return (_jsxs("colgroup", { children: [own(TABLE_INDEX_COLUMN, Boolean(frame.index)), columns.map(view => (_jsx("col", { ref: hold(view.column.key), style: { width: widths[view.column.key] ?? cssLength(view.column.width) ?? FALLBACK_COLUMN_WIDTH } }, view.column.key))), _jsx("col", { className: "nx-table__col-filler" }), own(TABLE_ACTIONS_COLUMN, Boolean(frame.actions))] }));
 }
 /** The number of a row, its checkbox, or both: the number until the pointer is over the row or something is selected. */
-export function TableIndexCell({ heading, own, number, numbered, selectable, checkbox, }) {
+export function TableIndexCell({ heading, rowSpan, own, number, numbered, selectable, checkbox, }) {
     const shared = {
         className: cx(heading ? "nx-table__heading" : "nx-table__cell", "nx-table__cell--index"),
         "data-col": TABLE_INDEX_COLUMN,
@@ -86,19 +86,31 @@ export function TableIndexCell({ heading, own, number, numbered, selectable, che
         style: ownStyle(own, "left"),
     };
     const content = (_jsxs(_Fragment, { children: [numbered && (_jsx("span", { className: "nx-table__number", "aria-hidden": selectable || undefined, children: number })), checkbox] }));
-    return heading ? (_jsx("th", { scope: "col", ...shared, children: content })) : (_jsx("td", { ...shared, children: content }));
+    return heading ? (_jsx("th", { scope: "col", rowSpan: rowSpan, ...shared, children: content })) : (_jsx("td", { ...shared, children: content }));
+}
+/** What in a row is a control of its own: a click there does what the control does, and never opens the row. */
+const ROW_CONTROLS = "button, a, input, select, textarea, label, [role=menu], [role=menuitem]";
+/**
+ * Whether a click on a row should open it. Never on one of its controls. A single click also does not when it ends a
+ * text selection inside the row — somebody dragging across a cell to copy a code is not asking for a popup — but a
+ * double-click is not asked that, because a double-click selects the word under the pointer on its way in.
+ */
+function opensRow(event, single) {
+    if (event.target.closest(ROW_CONTROLS))
+        return false;
+    if (!single)
+        return true;
+    const selection = window.getSelection();
+    return !(selection && !selection.isCollapsed && event.currentTarget.contains(selection.anchorNode));
 }
 /** One row. It renders again only when its row, its state, or the columns change. */
-function TableRowViewInner({ row, rowKey, number, label, columns, cellOptions, selectable, selected, selectionFull, busy, flashed, numbered, pinned, frame, sized, actions, onToggle, onAction, onOpen, }) {
+function TableRowViewInner({ row, rowKey, number, label, columns, cellOptions, selectable, selected, selectionFull, busy, flashed, numbered, pinned, frame, sized, actions, onToggle, onAction, onOpen, openOnClick, }) {
     const inline = actions?.filter(action => action.inline && action.icon) ?? [];
     const inMenu = actions?.filter(action => !(action.inline && action.icon)) ?? [];
     const items = inMenu.map(action => ({ value: action.id, label: action.label, icon: action.icon, description: action.description, tone: action.tone, disabled: action.disabled }));
-    return (_jsxs("tr", { className: "nx-table__row", "data-key": rowKey, "data-pinned": pinned || undefined, "data-selected": selected || undefined, "data-busy": busy || undefined, "data-flash": flashed || undefined, "aria-busy": busy || undefined, onDoubleClick: onOpen &&
-            (event => {
-                if (event.target.closest("button, a, input, label, [role=menu]"))
-                    return;
-                onOpen(row);
-            }), children: [frame.index && (_jsx(TableIndexCell, { own: frame.index, number: pinned ? _jsx(InlineIcon, { icon: iconPin, className: "nx-table__pin-mark" }) : formatCount(number), numbered: numbered || Boolean(pinned), selectable: selectable, checkbox: selectable && (_jsx("label", { className: "nx-choice nx-choice--sm nx-table__check", title: selectionFull ? "No more rows can be selected." : undefined, children: _jsx("input", { type: "checkbox", className: "nx-choice__control nx-choice__control--checkbox", checked: selected, disabled: selectionFull && !selected, "aria-label": `Select ${label}`, onClick: event => onToggle(row, event.currentTarget.checked, event), onChange: () => undefined }) })) })), columns.map(view => (_jsx("td", { className: cx("nx-table__cell", `nx-table__cell--${columnAlign(view.column)}`, view.column.wrap && "nx-table__cell--wrap"), "data-col": view.column.key, "data-pin": view.pin ?? undefined, "data-pin-edge": (view.pin && view.edge) || undefined, style: columnStyle(view, sized), children: _jsx("span", { className: "nx-table__value", children: _jsx(TableCellValue, { column: view.column, row: row, options: cellOptions }) }) }, view.column.key))), sized && _jsx("td", { className: "nx-table__cell nx-table__cell--filler" }), frame.actions && (_jsx("td", { className: "nx-table__cell nx-table__cell--actions", "data-col": TABLE_ACTIONS_COLUMN, "data-pin": "right", "data-pin-edge": frame.actions.edge || undefined, style: ownStyle(frame.actions, "right"), children: _jsxs("div", { className: "nx-table__actions", children: [inline.map(action => (_jsx(Button, { variant: "ghost", size: "sm", icon: action.icon, hoverTone: action.tone === "danger" ? "danger" : undefined, "aria-label": `${action.label}: ${label}`, title: action.label, "data-action": action.id, disabled: busy || action.disabled, onClick: () => onAction(row, action) }, action.id))), items.length > 0 && (_jsx(Menu, { items: items, align: "end", "aria-label": `Actions: ${label}`, onSelect: value => onAction(row, inMenu.find(action => action.id === value)), children: _jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconDotsVertical }), loading: busy, "aria-label": `More actions: ${label}`, title: "More actions" }) })), items.length === 0 && busy && _jsx(Button, { variant: "ghost", size: "sm", loading: true, "aria-label": `Working: ${label}` })] }) }))] }));
+    return (_jsxs("tr", { className: "nx-table__row", "data-key": rowKey, "data-pinned": pinned || undefined, "data-selected": selected || undefined, "data-busy": busy || undefined, "data-flash": flashed || undefined, "aria-busy": busy || undefined, "data-open": (onOpen && openOnClick) || undefined, 
+        // One way in: with a single click the row is already open by the time a double-click would arrive.
+        onClick: onOpen && openOnClick ? event => opensRow(event, true) && onOpen(row) : undefined, onDoubleClick: onOpen && !openOnClick ? event => opensRow(event, false) && onOpen(row) : undefined, children: [frame.index && (_jsx(TableIndexCell, { own: frame.index, number: pinned ? _jsx(InlineIcon, { icon: iconPin, className: "nx-table__pin-mark" }) : formatCount(number), numbered: numbered || Boolean(pinned), selectable: selectable, checkbox: selectable && (_jsx("label", { className: "nx-choice nx-choice--sm nx-table__check", title: selectionFull ? "No more rows can be selected." : undefined, children: _jsx("input", { type: "checkbox", className: "nx-choice__control nx-choice__control--checkbox", checked: selected, disabled: selectionFull && !selected, "aria-label": `Select ${label}`, onClick: event => onToggle(row, event.currentTarget.checked, event), onChange: () => undefined }) })) })), columns.map(view => (_jsx("td", { className: cx("nx-table__cell", `nx-table__cell--${columnAlign(view.column)}`, view.column.wrap && "nx-table__cell--wrap"), "data-col": view.column.key, "data-pin": view.pin ?? undefined, "data-pin-edge": (view.pin && view.edge) || undefined, style: columnStyle(view, sized), children: _jsx("span", { className: "nx-table__value", children: _jsx(TableCellValue, { column: view.column, row: row, options: cellOptions }) }) }, view.column.key))), sized && _jsx("td", { className: "nx-table__cell nx-table__cell--filler" }), frame.actions && (_jsx("td", { className: "nx-table__cell nx-table__cell--actions", "data-col": TABLE_ACTIONS_COLUMN, "data-pin": "right", "data-pin-edge": frame.actions.edge || undefined, style: ownStyle(frame.actions, "right"), children: _jsxs("div", { className: "nx-table__actions", children: [inline.map(action => (_jsx(Button, { variant: "ghost", size: "sm", icon: action.icon, hoverTone: action.tone === "danger" ? "danger" : undefined, "aria-label": `${action.label}: ${label}`, title: action.label, "data-action": action.id, disabled: busy || action.disabled, onClick: () => onAction(row, action) }, action.id))), items.length > 0 && (_jsx(Menu, { items: items, align: "end", "aria-label": `Actions: ${label}`, onSelect: value => onAction(row, inMenu.find(action => action.id === value)), children: _jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconDotsVertical }), loading: busy, "aria-label": `More actions: ${label}`, title: "More actions" }) })), items.length === 0 && busy && _jsx(Button, { variant: "ghost", size: "sm", loading: true, "aria-label": `Working: ${label}` })] }) }))] }));
 }
 export const TableRowView = memo(TableRowViewInner);
 /**

package/dist/Helpers/ApiClient.d.ts

@@ -12,6 +12,22 @@ export interface ApiCall<TOptions = object> {
     /** What the call does and acts on, for its messages. */
     context: MessageContext;
 }
+/**
+ * Reads a server's answer as an `ApiResult`. A client's `read` is the app's default for every call that does not bring
+ * its own (`ApiCallOptions.read`); `call` says what was asked for, and is left out for an answer that came from
+ * somewhere other than a call (an app's own send function).
+ *
+ * @example
+ * // A backend that answers { success, message, data, error: { code, message, fields } }
+ * configureApi({
+ *   read: (body, status) => {
+ *     const answer = body as { success?: boolean; message?: string; data?: unknown; error?: { code: string; fields?: Record<string, string[]> } };
+ *     if (answer?.success) return { ok: true, status, result: answer.data, message: answer.message };
+ *     return { ok: false, status, message: answer?.message, messageCode: answer?.error?.code, errors: … };
+ *   },
+ * });
+ */
+export type ApiResponseReader<TOptions = object> = (body: unknown, status: number | undefined, call?: ApiCall<TOptions>) => ApiResult;
 export interface ApiClientConfig<TOptions = object> {
     /** The full URL of an endpoint, given its filled path: through the proxy in the browser, the module's root on a server. */
     resolveUrl: (endpoint: ApiEndpoint, path: string, call: ApiCall<TOptions>) => string | Promise<string>;
@@ -24,6 +40,12 @@ export interface ApiClientConfig<TOptions = object> {
     /** Milliseconds to wait for an answer. Default 60,000. */
     timeout?: number;
     credentials?: RequestCredentials;
+    /**
+     * Reads every answer the call itself did not bring a reader for. Default `readApiResponse`: Nexus API responses,
+     * ASP.NET Core problem details, and any JSON by its status. An app on another backend registers its own once, so
+     * components that call inside themselves (`Crud`, `ApiForm`) read that backend's envelope too.
+     */
+    read?: ApiResponseReader<TOptions>;
     /** Changes the request just before it is sent, such as Next.js caching on a server. */
     prepare?: (init: RequestInit, call: ApiCall<TOptions>) => RequestInit;
     /**

package/dist/Helpers/ApiClient.js

@@ -99,7 +99,10 @@ export function createApiClient(config) {
                 controller.abort();
             }, timeout)
             : undefined;
-        const read = options.read ?? ((answer, status) => readApiResponse(answer, status, call.context));
+        // The call's own reader, else the app's (`configureApi({ read })`), else the built-in one. The app's is looked up
+        // on every call, so registering it after a module was imported still takes effect.
+        const appRead = config.read;
+        const read = options.read ?? (appRead ? (answer, status) => appRead(answer, status, call) : (answer, status) => readApiResponse(answer, status, call.context));
         const stopped = () => caller?.aborted ? aborted() : timedOut ? { ok: false, timeout: true, message: buildMessage("reason", { ...call.context, timeout: true }) } : undefined;
         let init = { method, headers, body, credentials: options.credentials ?? config.credentials, signal: controller.signal };
         if (config.prepare)

package/dist/Helpers/ApiFormHelpers.d.ts

@@ -4,7 +4,10 @@ export interface SendApiOptions {
     signal?: AbortSignal;
     read?: (body: unknown, status: number | undefined) => ApiResult;
 }
-/** The call options of a form's `{ url, method, headers, bodyType, credentials }` request with its values. */
+/**
+ * The call options of a form's `{ url, method, headers, bodyType, credentials }` request with its values. Without a
+ * `read` the client's own reader is used: the app's (`configureApi({ read })`), else the built-in one.
+ */
 export declare function apiRequestOptions(request: ApiRequest, body: unknown, { signal, read }?: SendApiOptions): ApiCallOptions;
 /** An abort as the error `fetch` throws, for code that expects a stopped request to reject. */
 export declare function abortError(): Error;
@@ -16,11 +19,31 @@ export declare function sendApiRequest(request: ApiRequest, body: unknown, optio
 /** What an `ApiSend` function answered, read the same way: a `Response`, an `ApiResult`, or a body. */
 export declare function toApiResult(answer: unknown, read?: (body: unknown, status: number | undefined) => ApiResult): Promise<ApiResult>;
 /**
- * Puts a server's messages on the inputs they name. Names match without case, and a path matches its first part that is
- * an input ("Addresses[1].City" and "$.addresses" go to "addresses"; "dto.Email" to "email"). Messages that match no
- * input are returned in `others`, for the form's message.
+ * The input a server's field name belongs to, or `undefined` when the form has no such input. Names match without case,
+ * and a path matches its first part that is an input ("Addresses[1].City" and "$.addresses" go to "addresses";
+ * "dto.Email" to "email"). The one rule every server message is matched by.
+ */
+export declare function matchInputName(name: string, inputNames: readonly string[]): string | undefined;
+/**
+ * Puts a server's messages on the inputs they name, by `matchInputName`. Messages that match no input are returned in
+ * `others`, for the form's message.
  */
 export declare function matchFieldErrors(errors: Record<string, string> | undefined, inputNames: readonly string[]): {
     fields: FormErrors;
     others: string[];
 };
+/**
+ * A failed answer as what a form shows, through the one path a 400's field errors already take: every message the server
+ * put on an input (`inputName`, several named with "|") goes to that input, every other message - including one naming an
+ * input this form does not have - goes under the form, and nothing is shown twice. `message` is `null` when the inputs
+ * carry it all. An answer that explains nothing falls back to a message for its HTTP status; that is the only time our
+ * own wording is shown.
+ *
+ * @example
+ * const { errors, message } = formErrorsFromResult(answer, store.inputs.map(params => params.name));
+ * store.setErrors(errors, message);
+ */
+export declare function formErrorsFromResult(answer: ApiResult, inputNames: readonly string[]): {
+    errors: FormErrors;
+    message: string | null;
+};

package/dist/Helpers/ApiFormHelpers.js

@@ -1,7 +1,10 @@
 import { createApiClient } from "./ApiClient.js";
-import { isApiResult, readApiResponse, readFetchResponse } from "./ApiResponses.js";
-/** The call options of a form's `{ url, method, headers, bodyType, credentials }` request with its values. */
-export function apiRequestOptions(request, body, { signal, read = readApiResponse } = {}) {
+import { apiStatusMessage, isApiResult, readApiResponse, readFetchResponse } from "./ApiResponses.js";
+/**
+ * The call options of a form's `{ url, method, headers, bodyType, credentials }` request with its values. Without a
+ * `read` the client's own reader is used: the app's (`configureApi({ read })`), else the built-in one.
+ */
+export function apiRequestOptions(request, body, { signal, read } = {}) {
     const { method = "POST", headers, bodyType = "json", credentials } = request;
     return { method, headers, bodyType, credentials, signal, read, body: body ?? {} };
 }
@@ -33,20 +36,33 @@ export async function toApiResult(answer, read = readApiResponse) {
         return answer;
     return read(answer, undefined);
 }
+function inputsByName(inputNames) {
+    return new Map(inputNames.map(name => [name.toLowerCase(), name]));
+}
+function matchIn(key, byName) {
+    const parts = key.replace(/^\$\.?/, "").split(/[.[\]]+/).filter(Boolean);
+    return parts.slice(0, 2).map(part => byName.get(part.toLowerCase())).find(Boolean);
+}
 /**
- * Puts a server's messages on the inputs they name. Names match without case, and a path matches its first part that is
- * an input ("Addresses[1].City" and "$.addresses" go to "addresses"; "dto.Email" to "email"). Messages that match no
- * input are returned in `others`, for the form's message.
+ * The input a server's field name belongs to, or `undefined` when the form has no such input. Names match without case,
+ * and a path matches its first part that is an input ("Addresses[1].City" and "$.addresses" go to "addresses";
+ * "dto.Email" to "email"). The one rule every server message is matched by.
+ */
+export function matchInputName(name, inputNames) {
+    return matchIn(name, inputsByName(inputNames));
+}
+/**
+ * Puts a server's messages on the inputs they name, by `matchInputName`. Messages that match no input are returned in
+ * `others`, for the form's message.
  */
 export function matchFieldErrors(errors, inputNames) {
-    const byName = new Map(inputNames.map(name => [name.toLowerCase(), name]));
+    const byName = inputsByName(inputNames);
     const fields = {};
     const others = [];
     for (const [key, message] of Object.entries(errors ?? {})) {
         if (!message)
             continue;
-        const parts = key.replace(/^\$\.?/, "").split(/[.[\]]+/).filter(Boolean);
-        const name = parts.slice(0, 2).map(part => byName.get(part.toLowerCase())).find(Boolean);
+        const name = matchIn(key, byName);
         if (name)
             fields[name] = fields[name] && fields[name] !== message ? `${fields[name]} ${message}` : message;
         else if (!others.includes(message))
@@ -54,3 +70,51 @@ export function matchFieldErrors(errors, inputNames) {
     }
     return { fields, others };
 }
+/**
+ * A failed answer as what a form shows, through the one path a 400's field errors already take: every message the server
+ * put on an input (`inputName`, several named with "|") goes to that input, every other message - including one naming an
+ * input this form does not have - goes under the form, and nothing is shown twice. `message` is `null` when the inputs
+ * carry it all. An answer that explains nothing falls back to a message for its HTTP status; that is the only time our
+ * own wording is shown.
+ *
+ * @example
+ * const { errors, message } = formErrorsFromResult(answer, store.inputs.map(params => params.name));
+ * store.setErrors(errors, message);
+ */
+export function formErrorsFromResult(answer, inputNames) {
+    const byName = inputsByName(inputNames);
+    const fields = {};
+    const others = [];
+    const place = (message, key) => {
+        const sentence = message?.trim();
+        if (!sentence)
+            return;
+        const name = key ? matchIn(key, byName) : undefined;
+        if (name)
+            fields[name] = fields[name] && fields[name] !== sentence ? `${fields[name]} ${sentence}` : sentence;
+        else if (!others.includes(sentence))
+            others.push(sentence);
+    };
+    if (answer.errorMessages?.length) {
+        for (const problem of answer.errorMessages) {
+            const named = (problem.inputName?.split("|") ?? []).map(part => part.trim()).filter(name => name && matchIn(name, byName));
+            if (named.length)
+                for (const name of named)
+                    place(problem.message, name);
+            // No input of this form: shown with the others, never swallowed.
+            else
+                place(problem.message);
+        }
+    }
+    else {
+        for (const [key, message] of Object.entries(answer.errors ?? {}))
+            place(message, key);
+        // The answer's own message, when an input does not already show it.
+        if (!Object.values(fields).includes(answer.message ?? ""))
+            place(answer.message);
+    }
+    const message = others.join(" ");
+    if (message)
+        return { errors: fields, message };
+    return { errors: fields, message: Object.keys(fields).length ? null : apiStatusMessage(answer.status) };
+}

package/dist/Helpers/ApiModules.d.ts

@@ -84,8 +84,6 @@ export declare abstract class ApiModules<TModule extends ApiModuleValue = ApiMod
         delete: ApiEndpoint<TModule>;
         trash: ApiEndpoint<TModule>;
         trashFromDelete: ApiEndpoint<TModule>;
-        archive: ApiEndpoint<TModule>;
-        restore: ApiEndpoint<TModule>;
         recover: ApiEndpoint<TModule>;
         flag: ApiEndpoint<TModule>;
         pin: ApiEndpoint<TModule>;
@@ -93,14 +91,12 @@ export declare abstract class ApiModules<TModule extends ApiModuleValue = ApiMod
         accessActions: ApiEndpoint<TModule>;
         mass: {
             description: ApiEndpoint<TModule>;
-            archive: ApiEndpoint<TModule>;
             trash: ApiEndpoint<TModule>;
             trashFromDelete: ApiEndpoint<TModule>;
             flag: ApiEndpoint<TModule>;
             pin: ApiEndpoint<TModule>;
             delete: ApiEndpoint<TModule>;
             recover: ApiEndpoint<TModule>;
-            restore: ApiEndpoint<TModule>;
         };
         action: (method: import("../Shared.Index.ts").HttpMethod, action: string, extras?: Partial<Omit<ApiEndpoint<number>, "path" | "method" | "module">> | undefined) => ApiEndpoint<TModule>;
     };

package/dist/Helpers/ApiModules.js

@@ -115,6 +115,7 @@ export const NEXUS_MODULES = [
     { module: NexusModule.Enterprise, key: "enterprise", label: "Enterprise", env: "API_ENTERPRISE" },
     { module: NexusModule.Drive, key: "drive", label: "Drive", env: "API_DRIVE" },
     { module: NexusModule.Message, key: "message", label: "Message", env: "API_MESSAGE" },
+    { module: NexusModule.Chat, key: "chat", label: "Chat", env: "API_CHAT" },
     { module: NexusModule.Accounting, key: "accounting", label: "Accounting", env: "API_ACCOUNTING" },
     { module: NexusModule.Report, key: "report", label: "Report", env: "API_REPORT" },
     { module: NexusModule.Requisition, key: "requisition", label: "Requisition", env: "API_REQUISITION" },

package/dist/Helpers/ApiResponses.d.ts

@@ -1,17 +1,27 @@
-import type { ApiResult } from "../Interfaces/ApiInterfaces.ts";
+import type { ApiErrorMessage, ApiResult } from "../Interfaces/ApiInterfaces.ts";
 import type { MessageAction, MessageContext } from "../Interfaces/MessageInterfaces.ts";
 /** Shown when nothing reached the server (the default wording; `messages.reason({ network: true })` follows `configureMessages`). */
 export declare const NETWORK_ERROR_MESSAGE: string;
 /** A message for a failed request that came without one of its own, by HTTP status and what the request did. Default action `save`. */
 export declare function apiStatusMessage(status: number | undefined, action?: MessageAction): string;
+/**
+ * Every problem a body lists, in its order, however it listed them: `errorMessages` as a list or as one message object,
+ * `errorMessage` either way, or an `errors` list (an `errors` map by field name is read by `readErrorMap` instead).
+ * Plain sentences count. Empty for a body that lists nothing; `fallback` is then read as the one problem, which is how
+ * the message and codes at the top level of a Nexus answer are read.
+ */
+export declare function readErrorMessages(body: unknown, fallback?: unknown): ApiErrorMessage[];
 /**
  * Reads a server's answer as success or failure:
- * - Nexus API responses, `{ isSuccess, message, messageCode, errorCode, inputName, result }`: `inputName` names the
- *   inputs the message is about, several joined with "|".
+ * - Nexus API responses, `{ isSuccess, code, errorMessages: [{ message, messageCode, errorCode, inputName }], result }`:
+ *   every problem is kept, in the server's order, and `inputName` names the inputs a message is about (several with "|").
+ *   `errorMessages` may be one message object instead of a list, and an older answer carries its one message and codes at
+ *   the top level (`{ isSuccess, message, messageCode, errorCode, inputName }`); all of them are read the same way.
  * - ASP.NET Core problem details and validation errors, `{ title, detail, errors: { Email: ["…"] } }`.
  * - Anything else by its HTTP status; the body is the result.
  *
- * A failure without a message of its own gets one by status, worded for what the call did (`context`, default: a save).
+ * The server's own words are the message whenever it sent any. Only a failure that explains nothing gets a message by
+ * status, worded for what the call did (`context`, default: a save).
  */
 export declare function readApiResponse(body: unknown, status?: number, context?: MessageContext): ApiResult;
 /** Reads a `fetch` response: its JSON (or text) through `read`. */