nexus-shared 2.0.0 → 3.1.0

package/dist/Components/Documents/SplitButton.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { iconChevronDown, InlineIcon } from "nexus-icons";
 import { useId, useLayoutEffect, useRef, useState } from "react";
 import { cx } from "../../Helpers/ClassHelpers.js";
-import { followAnchor, isPopoverOpen, placeUnderAnchor } from "../../Helpers/PopoverHelpers.js";
+import { followAnchor, isPopoverOpen, placeUnderAnchor, showPanel } from "../../Helpers/PopoverHelpers.js";
 import { Button } from "./Button.js";
 import { MenuPanel } from "./Menu.js";
 const STORAGE_PREFIX = "nx-split:";
@@ -37,7 +37,7 @@ function saveChoice(key, value) {
  *   { value: "draft", label: "Create draft pull request", description: "Cannot be merged until marked ready" },
  * ]} />
  */
-export function SplitButton({ options, onAction, defaultValue, value, onValueChange, storageKey, runOnSelect = false, variant = "primary", size = "md", loading = false, disabled = false, block = false, type = "button", form, name, menuLabel = "More actions", align = "end", className, style, }) {
+export function SplitButton({ options, onAction, defaultValue, value, onValueChange, storageKey, runOnSelect = false, fixed = false, variant = "primary", size = "md", loading = false, disabled = false, block = false, type = "button", form, name, menuLabel = "More actions", align = "end", className, style, }) {
     const id = useId();
     const panelId = `${id}-menu`;
     const toggleRef = useRef(null);
@@ -58,15 +58,17 @@ export function SplitButton({ options, onAction, defaultValue, value, onValueCha
         return null;
     function place() {
         const panel = panelRef.current;
-        const anchor = toggleRef.current?.parentElement;
-        if (panel && anchor)
-            placeUnderAnchor(panel, anchor.getBoundingClientRect(), { align });
+        const toggle = toggleRef.current;
+        const anchor = toggle?.parentElement;
+        // The menu lines up with the whole button, and its arrow points at the half that opened it.
+        if (panel && toggle && anchor)
+            placeUnderAnchor(panel, anchor.getBoundingClientRect(), { align, arrowAt: toggle.getBoundingClientRect() });
     }
     function show(focusFirst) {
         const panel = panelRef.current;
         if (!panel || typeof panel.showPopover !== "function" || isPopoverOpen(panel))
             return;
-        panel.showPopover();
+        showPanel(panel);
         place();
         if (focusFirst)
             panel.querySelector('.nx-menu__item:not([aria-disabled="true"])')?.focus();
@@ -90,6 +92,8 @@ export function SplitButton({ options, onAction, defaultValue, value, onValueCha
         const option = usable(next);
         if (!option || !current)
             return;
+        if (fixed)
+            return onAction(next, option);
         if (value === undefined)
             setChosen(next);
         saveChoice(storageKey, next);
@@ -98,7 +102,7 @@ export function SplitButton({ options, onAction, defaultValue, value, onValueCha
         if (runOnSelect)
             onAction(next, option);
     }
-    const items = options.map(option => ({
+    const items = (fixed ? options.filter(option => option.value !== current.value) : options).map(option => ({
         value: option.value,
         label: option.label,
         description: option.description,
@@ -123,5 +127,5 @@ export function SplitButton({ options, onAction, defaultValue, value, onValueCha
                         event.preventDefault();
                         show(true);
                     }
-                } }), _jsx(MenuPanel, { ref: panelRef, id: panelId, kind: "radio", size: size, items: items, onSelect: pick, "aria-label": menuLabel, onToggle: onToggle, className: "nx-split__menu" })] }));
+                } }), _jsx(MenuPanel, { ref: panelRef, id: panelId, kind: fixed ? "menu" : "radio", size: size, items: items, onSelect: pick, "aria-label": menuLabel, onToggle: onToggle, className: "nx-split__menu" })] }));
 }

package/dist/Components/Documents/TabButtons.d.ts

@@ -13,15 +13,15 @@ export interface TabButtonOption<T extends string = string> {
     /** Tooltip. With `labels="selected"`, a text label is the default tooltip. */
     title?: string;
 }
-/** `all`: every option shows its label. `selected`: options show only their icon, and the selected one adds its label. */
-export type TabButtonLabels = "all" | "selected";
+/**
+ * `all`: every option shows its label. `selected`: options show only their icon, and the selected one adds its label.
+ * `auto`: every label while its container (a data table) is at least 900px wide, `selected` below that.
+ */
+export type TabButtonLabels = "all" | "selected" | "auto";
 /** `nav`: a horizontal track with a sliding indicator. `list`: a vertical list of rows, for settings pages and side panels. */
 export type TabButtonDesign = "nav" | "list";
 interface TabButtonsBaseProps<T extends string> {
     options: readonly TabButtonOption<T>[];
-    /** The selected option. A value that matches no option leaves every option unselected. */
-    value: T;
-    onChange: (value: T) => void;
     /** Default `nav`. `list` stacks the options as full-width rows with a bar at the selected one. */
     design?: TabButtonDesign;
     /** Default `md`. */
@@ -35,7 +35,7 @@ interface TabButtonsBaseProps<T extends string> {
     labels?: TabButtonLabels;
     /** Fills the width of its container. With `labels="all"`, options share the width equally. A `list` always fills it. */
     block?: boolean;
-    /** Radio group name, for forms. Default: a unique id. */
+    /** Radio (or checkbox) group name, for forms. Default: a unique id. */
     name?: string;
     /**
      * Id of the form the choice belongs to, as the HTML `form` attribute. An id that matches no form keeps the choice out
@@ -44,8 +44,26 @@ interface TabButtonsBaseProps<T extends string> {
     form?: string;
     className?: string;
 }
+/** One option at a time: radio buttons, and an indicator that slides to the selection. */
+interface TabButtonsOneProps<T extends string> {
+    multiple?: false;
+    /** The selected option. A value that matches no option leaves every option unselected. */
+    value: T;
+    onChange: (value: T) => void;
+}
+/**
+ * Several options at once: checkboxes, each chosen option raised on its own, and the options wrap onto more rows when
+ * they do not fit, so a picker of 26 letters or 33 symbols stays one control on a phone.
+ */
+interface TabButtonsManyProps<T extends string> {
+    multiple: true;
+    /** The chosen options. Values that match no option are ignored, and never handed back. */
+    value: readonly T[];
+    /** The chosen values after each change, in option order. */
+    onChange: (values: T[]) => void;
+}
 /** A label is required: pass `aria-label`, or `aria-labelledby` pointing at a visible heading. */
-export type TabButtonsProps<T extends string = string> = TabButtonsBaseProps<T> & ({
+export type TabButtonsProps<T extends string = string> = TabButtonsBaseProps<T> & (TabButtonsOneProps<T> | TabButtonsManyProps<T>) & ({
     "aria-label": string;
     "aria-labelledby"?: never;
 } | {
@@ -57,6 +75,9 @@ export type TabButtonsProps<T extends string = string> = TabButtonsBaseProps<T>
  * The `nav` design slides an indicator to the selection; the `list` design stacks the options as rows, each with an
  * icon, a label, a description, and a badge, for settings pages and side panels. Built on native radio buttons, so
  * arrow keys move the selection and screen readers announce it. To switch between page panels, use tabs with panels instead.
+ *
+ * `multiple` picks several at once, such as the weekdays a rule runs on: native checkboxes (Tab moves between them,
+ * Space toggles one), every chosen option raised as the single choice's indicator is, and the options wrap.
  */
-export declare function TabButtons<T extends string>({ options, value, onChange, design, size, tone, labels, block, name, form, className, ...labelling }: TabButtonsProps<T>): import("react").JSX.Element;
+export declare function TabButtons<T extends string>(props: TabButtonsProps<T>): import("react").JSX.Element;
 export {};

package/dist/Components/Documents/TabButtons.js

@@ -7,13 +7,32 @@ import { cx } from "../../Helpers/ClassHelpers.js";
  * The `nav` design slides an indicator to the selection; the `list` design stacks the options as rows, each with an
  * icon, a label, a description, and a badge, for settings pages and side panels. Built on native radio buttons, so
  * arrow keys move the selection and screen readers announce it. To switch between page panels, use tabs with panels instead.
+ *
+ * `multiple` picks several at once, such as the weekdays a rule runs on: native checkboxes (Tab moves between them,
+ * Space toggles one), every chosen option raised as the single choice's indicator is, and the options wrap.
  */
-export function TabButtons({ options, value, onChange, design = "nav", size = "md", tone = "neutral", labels = "all", block = false, name, form, className, ...labelling }) {
+export function TabButtons(props) {
+    const { options, design = "nav", size = "md", tone = "neutral", labels = "all", block = false, name, form, className, multiple: _multiple, value: _value, onChange: _onChange, ...labelling } = props;
     const generatedName = useId();
     const groupName = name ?? generatedName;
-    const index = options.findIndex(option => option.value === value);
-    const style = { "--nx-tabs-count": Math.max(options.length, 1), "--nx-tabs-index": Math.max(index, 0) };
     const list = design === "list";
-    const labelsSelected = !list && labels === "selected";
-    return (_jsxs("div", { role: "radiogroup", "aria-orientation": list ? "vertical" : undefined, ...labelling, className: cx("nx-tabs", `nx-tabs--${size}`, list && "nx-tabs--list", tone === "primary" && "nx-tabs--primary", labelsSelected && "nx-tabs--labels-selected", block && "nx-tabs--block", className), style: list ? undefined : style, children: [index >= 0 && !list && !labelsSelected && _jsx("span", { className: "nx-tabs__indicator", "aria-hidden": "true" }), options.map(option => (_jsxs("label", { className: "nx-tabs__option", title: option.title ?? (labelsSelected && typeof option.label === "string" ? option.label : undefined), children: [_jsx("input", { type: "radio", className: "nx-visually-hidden", name: groupName, form: form, value: option.value, checked: option.value === value, disabled: option.disabled, onChange: () => onChange(option.value) }), 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 && _jsx("span", { className: "nx-tabs__badge", children: option.badge })] }, option.value)))] }));
+    const labelsSelected = !list && labels !== "all";
+    const chosen = props.multiple ? new Set(props.value) : null;
+    // One choice slides one indicator; several have no single place for it, so each chosen option draws its own.
+    const index = chosen ? -1 : options.findIndex(option => option.value === props.value);
+    const style = { "--nx-tabs-count": Math.max(options.length, 1), "--nx-tabs-index": Math.max(index, 0) };
+    const isChecked = (option) => (chosen ? chosen.has(option.value) : option.value === props.value);
+    const toggle = (option, checked) => {
+        if (!props.multiple) {
+            props.onChange(option.value);
+            return;
+        }
+        const next = new Set(props.value);
+        if (checked)
+            next.add(option.value);
+        else
+            next.delete(option.value);
+        props.onChange(options.filter(one => next.has(one.value)).map(one => one.value));
+    };
+    return (_jsxs("div", { role: chosen ? "group" : "radiogroup", "aria-orientation": list && !chosen ? "vertical" : undefined, ...labelling, className: cx("nx-tabs", `nx-tabs--${size}`, list && "nx-tabs--list", tone === "primary" && "nx-tabs--primary", labelsSelected && "nx-tabs--labels-selected", !list && labels === "auto" && "nx-tabs--labels-auto", chosen && !list && "nx-tabs--multiple", block && "nx-tabs--block", className), style: list || chosen ? undefined : style, children: [index >= 0 && !list && !labelsSelected && _jsx("span", { className: "nx-tabs__indicator", "aria-hidden": "true" }), options.map(option => (_jsxs("label", { className: "nx-tabs__option", title: option.title ?? (labelsSelected && typeof option.label === "string" ? option.label : undefined), children: [_jsx("input", { type: chosen ? "checkbox" : "radio", className: "nx-visually-hidden", name: groupName, form: form, value: option.value, checked: isChecked(option), disabled: option.disabled, onChange: event => toggle(option, event.currentTarget.checked) }), 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 && _jsx("span", { className: "nx-tabs__badge", children: option.badge })] }, option.value)))] }));
 }

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

@@ -2,10 +2,12 @@ import type { ApiFormProps, FormValues } from "../../Interfaces/FormInterfaces.t
 /**
  * A `SubmitForm` that sends its values to an API: an endpoint (`ROOMS.update`, or `{ module, path, method }` in place),
  * a URL outside the app's modules (`{ url, method }`, as JSON), both sent through the app's `api` without its toasts, or
- * a function that sends them with a client of the app's own. The answer is read as Nexus API responses (`{ isSuccess, message,
- * inputName, result }`), ASP.NET Core problem details, or any JSON by its status. On success a toast says so and the
- * values become the form's own; on failure the server's messages show on the inputs they name, the rest under the form,
- * and the first input with a message takes focus. `loadValue` loads the record to edit, with placeholders and Retry.
+ * a function that sends them with a client of the app's own. The answer is read as Nexus API responses
+ * (`{ isSuccess, errorMessages: [{ message, inputName }], result }`, or one message at the top level), ASP.NET Core problem
+ * details, or any JSON by its status. On success a toast says so and the values become the form's own; on failure the
+ * server's own words show - every message it sent, on the inputs they name and the rest under the form, with our message
+ * by status only for an answer that explains nothing - and the first input with a message takes focus. `loadValue` loads
+ * the record to edit: the inputs show disabled until it lands, and a failure offers Retry.
  *
  * @example
  * const ROOMS = apiController(NexusModule.Reservation, "Room", "room");

package/dist/Components/Forms/ApiForm.js

@@ -2,12 +2,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { iconAlertCircle, iconRefresh, InlineIcon } from "nexus-icons";
 import { useEffect, useRef, useState } from "react";
-import { abortError, apiRequestOptions, matchFieldErrors, toApiResult } from "../../Helpers/ApiFormHelpers.js";
-import { apiStatusMessage, errorMessage, isAbortError, readApiResponse } from "../../Helpers/ApiResponses.js";
+import { abortError, apiRequestOptions, formErrorsFromResult, toApiResult } from "../../Helpers/ApiFormHelpers.js";
+import { errorMessage, isAbortError, readApiResponse } from "../../Helpers/ApiResponses.js";
 import { isApiEndpoint } from "../../Helpers/ApiRoutes.js";
 import { cx } from "../../Helpers/ClassHelpers.js";
 import { messages } from "../../Helpers/MessageBuilder.js";
-import { api as browserApi } from "../../Services/BrowserApi.js";
+import { api as browserApi, getApiReader } from "../../Services/BrowserApi.js";
 import { Button } from "../Documents/Button.js";
 import { toast } from "../Layouts/Toaster.js";
 import { useFormStore } from "./Form.js";
@@ -15,10 +15,12 @@ import { SubmitForm } from "./SubmitForm.js";
 /**
  * A `SubmitForm` that sends its values to an API: an endpoint (`ROOMS.update`, or `{ module, path, method }` in place),
  * a URL outside the app's modules (`{ url, method }`, as JSON), both sent through the app's `api` without its toasts, or
- * a function that sends them with a client of the app's own. The answer is read as Nexus API responses (`{ isSuccess, message,
- * inputName, result }`), ASP.NET Core problem details, or any JSON by its status. On success a toast says so and the
- * values become the form's own; on failure the server's messages show on the inputs they name, the rest under the form,
- * and the first input with a message takes focus. `loadValue` loads the record to edit, with placeholders and Retry.
+ * a function that sends them with a client of the app's own. The answer is read as Nexus API responses
+ * (`{ isSuccess, errorMessages: [{ message, inputName }], result }`, or one message at the top level), ASP.NET Core problem
+ * details, or any JSON by its status. On success a toast says so and the values become the form's own; on failure the
+ * server's own words show - every message it sent, on the inputs they name and the rest under the form, with our message
+ * by status only for an answer that explains nothing - and the first input with a message takes focus. `loadValue` loads
+ * the record to edit: the inputs show disabled until it lands, and a failure offers Retry.
  *
  * @example
  * const ROOMS = apiController(NexusModule.Reservation, "Room", "room");
@@ -58,12 +60,13 @@ export function ApiForm(props) {
         return () => controller.abort();
     }, [store, attempt]);
     async function send(values, context) {
-        const { api, transform, readResponse = readApiResponse } = latest.current;
+        // 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;
         let answer;
         if (typeof api === "function")
-            answer = await toApiResult(await api(body, context), readResponse);
+            answer = await toApiResult(await api(body, context), readResponse ?? getApiReader() ?? readApiResponse);
         else {
             // The form shows its own messages, so the call shows no toasts.
             const options = isApiEndpoint(api) ? { body, signal: context.signal, read: readResponse } : apiRequestOptions(api, body, { signal: context.signal, read: readResponse });
@@ -76,12 +79,10 @@ export function ApiForm(props) {
             return { ok: true };
         }
         latest.current.onError?.(answer, values);
+        // Every message the server sent: the ones it put on inputs (Nexus `inputName`) show there, the rest under the form.
         const names = store.inputs.filter(params => !params.hidden).map(params => params.name);
-        const { fields, others } = matchFieldErrors(answer.errors, names);
-        // A message the server put on inputs (Nexus `inputName`) shows there, not twice.
-        const onInputs = Boolean(answer.message) && Object.values(fields).includes(answer.message);
-        const message = [onInputs ? undefined : answer.message, ...others].filter(Boolean).join(" ");
-        return { ok: false, errors: fields, message: message || (Object.keys(fields).length ? null : apiStatusMessage(answer.status)) };
+        const { errors, message } = formErrorsFromResult(answer, names);
+        return { ok: false, errors, message };
     }
     function saved(values) {
         const answer = answerRef.current;