nexus-shared 3.1.0 → 4.0.0

package/dist/Components/Documents/Tabs.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { cx } from "../../Helpers/ClassHelpers.js";
+/** The ids a tab and its panel are joined by. */
+export function tabIds(id, value) {
+    const safe = value.replace(/[^A-Za-z0-9_-]/g, "_");
+    return { tab: `${id}-tab-${safe}`, panel: `${id}-panel-${safe}` };
+}
+/** Whether the tabs are laid out in a row now: the `nav` track, or `auto`'s strip in a narrow container. */
+function laidInRow(list) {
+    const style = getComputedStyle(list);
+    return style.display.includes("flex") ? style.flexDirection.startsWith("row") : style.gridAutoFlow.startsWith("column");
+}
+/**
+ * Tabs: one button per panel, the chosen one marked `aria-selected`. Only the chosen tab is in the Tab order; the
+ * arrow keys move to the next or previous tab and open it (Up and Down, Left and Right, whichever way they lie), Home
+ * and End to the first and the last.
+ */
+export function Tabs({ options, value, onChange, id, design = "list", size = "md", tone = "neutral", className, ...labelling }) {
+    const listRef = useRef(null);
+    // Which way the tabs lie, for screen readers: `auto` lies in a column or a row with its container.
+    const [vertical, setVertical] = useState(design !== "nav");
+    useEffect(() => {
+        const list = listRef.current;
+        if (!list || design !== "auto" || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(() => setVertical(!laidInRow(list)));
+        observer.observe(list);
+        return () => observer.disconnect();
+    }, [design]);
+    const enabled = options.filter(option => !option.disabled);
+    const chosen = options.some(option => option.value === value && !option.disabled) ? value : enabled[0]?.value;
+    function move(event) {
+        const at = enabled.findIndex(option => option.value === chosen);
+        let next = -1;
+        if (event.key === "ArrowDown" || event.key === "ArrowRight")
+            next = (at + 1) % enabled.length;
+        else if (event.key === "ArrowUp" || event.key === "ArrowLeft")
+            next = (at - 1 + enabled.length) % enabled.length;
+        else if (event.key === "Home")
+            next = 0;
+        else if (event.key === "End")
+            next = enabled.length - 1;
+        const target = enabled[next]?.value;
+        if (target === undefined)
+            return;
+        event.preventDefault();
+        if (target !== chosen)
+            onChange(target);
+        listRef.current?.querySelector(`#${CSS.escape(tabIds(id, target).tab)}`)?.focus();
+    }
+    const list = design !== "nav";
+    return (_jsxs("div", { ref: listRef, role: "tablist", "aria-orientation": vertical ? "vertical" : "horizontal", ...labelling, className: cx("nx-tabs", `nx-tabs--${size}`, list && "nx-tabs--list", design === "auto" && "nx-tabs--auto", tone === "primary" && "nx-tabs--primary", className), style: list ? undefined : { "--nx-tabs-count": Math.max(options.length, 1), "--nx-tabs-index": Math.max(options.findIndex(option => option.value === chosen), 0) }, onKeyDown: move, children: [!list && _jsx("span", { className: "nx-tabs__indicator", "aria-hidden": "true" }), options.map(option => {
+                const ids = tabIds(id, option.value);
+                const selected = option.value === chosen;
+                return (_jsxs("button", { type: "button", role: "tab", id: ids.tab, "aria-selected": selected, "aria-controls": selected ? ids.panel : undefined, tabIndex: selected ? 0 : -1, disabled: option.disabled, className: "nx-tabs__option", title: option.title, onClick: () => {
+                        if (!selected)
+                            onChange(option.value);
+                    }, children: [option.icon, _jsxs("span", { className: "nx-tabs__label", children: [_jsx("span", { className: "nx-tabs__text", children: option.label }), list && option.description && _jsx("span", { className: "nx-tabs__description", children: option.description })] }), list && option.badge !== undefined && option.badge !== null && option.badge !== false && _jsx("span", { className: "nx-tabs__badge", children: option.badge })] }, option.value));
+            })] }));
+}
+/**
+ * The chosen tab's panel, joined to its tab. It takes the focus on Tab from the tabs (`tabIndex` 0), so a panel with
+ * nothing to focus is still reached and read.
+ */
+export function TabPanel({ tabs, value, className, children }) {
+    const ids = tabIds(tabs, value);
+    return (_jsx("div", { role: "tabpanel", id: ids.panel, "aria-labelledby": ids.tab, tabIndex: 0, className: cx("nx-tab-panel", className), children: children }));
+}

package/dist/Components/Forms/ApiForm.js

@@ -39,6 +39,8 @@ export function ApiForm(props) {
     const latest = useRef(props);
     latest.current = props;
     const answerRef = useRef(null);
+    // The body the question before a save showed (`confirm`), and the submit it is for.
+    const keptRef = useRef(null);
     const [load, setLoad] = useState(() => (loadValue ? { state: "loading" } : { state: "done" }));
     const [attempt, setAttempt] = useState(0);
     useEffect(() => {
@@ -59,11 +61,24 @@ export function ApiForm(props) {
         });
         return () => controller.abort();
     }, [store, attempt]);
+    /**
+     * With `confirm`, the body is made once, before the question, so the question shows exactly what is sent: kept with
+     * the submit it was made for, and sent by that submit alone. Without `confirm` nothing calls this.
+     */
+    async function makeBody(values, context) {
+        keptRef.current = null;
+        const { transform } = latest.current;
+        const body = transform ? await transform(values, context) : values;
+        keptRef.current = { context, body };
+        return body;
+    }
     async function send(values, context) {
         // No `readResponse` means the client's own reader: the app's (`configureApi({ read })`), else the built-in one.
         const { api, transform, readResponse } = latest.current;
         answerRef.current = null;
-        const body = transform ? await transform(values, context) : values;
+        const kept = keptRef.current;
+        keptRef.current = null;
+        const body = kept && kept.context === context ? kept.body : transform ? await transform(values, context) : values;
         let answer;
         if (typeof api === "function")
             answer = await toApiResult(await api(body, context), readResponse ?? getApiReader() ?? readApiResponse);
@@ -96,5 +111,7 @@ export function ApiForm(props) {
     if (load.state === "failed") {
         return (_jsxs("div", { className: cx("nx-form-load-failed", rest.className), style: rest.style, role: "alert", children: [_jsx(InlineIcon, { icon: iconAlertCircle }), _jsxs("p", { children: [_jsx("strong", { children: "Could not load the values." }), " ", load.message] }), _jsxs("div", { className: "nx-form-load-failed__actions", children: [rest.onCancel && (_jsx(Button, { size: "sm", onClick: rest.onCancel, children: rest.cancelLabel ?? "Cancel" })), _jsx(Button, { size: "sm", icon: _jsx(InlineIcon, { icon: iconRefresh }), onClick: () => setAttempt(count => count + 1), children: "Retry" })] })] }));
     }
-    return _jsx(SubmitForm, { ...rest, form: store, loading: Boolean(rest.loading) || load.state === "loading", onSubmit: send, onSaved: saved });
+    // `makeBody` is the package's own hand-over to its SubmitForm, not a prop of SubmitForm's.
+    const internals = { makeBody };
+    return _jsx(SubmitForm, { ...rest, ...internals, form: store, loading: Boolean(rest.loading) || load.state === "loading", onSubmit: send, onSaved: saved });
 }

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

@@ -1,5 +1,5 @@
 import type { CrudProps } from "../../Interfaces/CrudInterfaces.ts";
-import type { FormValues } from "../../Interfaces/FormInterfaces.ts";
+import { type FormValues } from "../../Interfaces/FormInterfaces.ts";
 /**
  * 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.
@@ -14,4 +14,4 @@ import type { FormValues } from "../../Interfaces/FormInterfaces.ts";
  *   paging="server"
  * />
  */
-export declare function Crud<TRow extends FormValues = FormValues>(props: CrudProps<TRow>): import("react").JSX.Element;
+export declare function Crud<TRow extends FormValues = FormValues>(given: CrudProps<TRow>): import("react").JSX.Element;