nexus-shared 3.2.0 → 4.1.0

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

@@ -63,6 +63,24 @@ export interface ChoiceItemProps<T extends OptionValue> {
 }
 /** One option of a group: a native input and its label, icon, and description, all inside one clickable label. */
 export declare function ChoiceItem<T extends OptionValue>({ type, groupId, name, option, index, size, checked, defaultChecked, invalid, readOnly, onInvalid }: ChoiceItemProps<T>): import("react").JSX.Element;
+/**
+ * One option of a group drawn as tabs (`design="tabs"`): the native input out of sight inside a tab of the `TabButtons`
+ * track. Its description is its tooltip, and the input's description for a screen reader: `descriptionId` names the
+ * group's note for this option (`ChoiceTabNotes`), which a hidden note still gives.
+ */
+export declare function ChoiceTab<T extends OptionValue>({ type, groupId, name, option, index, checked, defaultChecked, invalid, readOnly, onInvalid }: Omit<ChoiceItemProps<T>, "size">): import("react").JSX.Element;
+/**
+ * The descriptions of a group drawn as tabs, under the track: the chosen option's shows (a phone has no tooltip), the
+ * rest stay hidden but still describe their inputs. `chosen` is the option chosen when the group is drawn; after that
+ * `showChosenNote` follows the inputs, as the group's `sync` rule.
+ */
+export declare function ChoiceTabNotes<T extends OptionValue>({ groupId, options, chosen }: {
+    groupId: string;
+    options: readonly ChoiceOption<T>[];
+    chosen: number;
+}): (import("react").JSX.Element | null)[];
+/** Shows the note of the option checked now and hides the others (a `useChoiceField` `sync` rule). */
+export declare function showChosenNote(inputs: HTMLInputElement[]): void;
 /** The legend of a choice group, with the required mark and, when read-only, a lock. */
 export declare function ChoiceLegend({ label, required, lock }: {
     label: ReactNode;
@@ -108,7 +126,9 @@ type GroupStyle = CSSProperties & {
     "--nx-choices-columns"?: number;
 };
 /** Class names and inline style of a group's fieldset and options list. */
-export declare function groupLayout(props: ChoiceGroupProps<OptionValue>): {
+export declare function groupLayout(props: Omit<ChoiceGroupProps<OptionValue>, "design"> & {
+    design?: ChoiceDesign | "tabs";
+}): {
     className: string;
     optionsStyle: GroupStyle | undefined;
 };

package/dist/Components/Inputs/ChoiceField.js

@@ -123,7 +123,7 @@ export function preventChange(event) {
  * reaches the input too), or pressed with Space or an arrow key, which browsers turn into a click.
  */
 export function optionAnchor(target) {
-    return target instanceof HTMLInputElement ? target.closest(".nx-choice") : null;
+    return target instanceof HTMLInputElement ? target.closest(".nx-choice, .nx-tabs__option") : null;
 }
 /** Hides a field's read-only note when focus leaves the field, not when it moves between its options. */
 export function leavesField(event) {
@@ -146,6 +146,32 @@ export function ChoiceItem({ type, groupId, name, option, index, size, checked,
                 onChange: checked === undefined ? undefined : noop }), hasContent(option.icon) && (_jsx("span", { className: "nx-choice__icon", "aria-hidden": "true", children: option.icon })), _jsxs("span", { className: "nx-choice__text", children: [_jsx("span", { id: labelId, className: "nx-choice__label", children: option.label }), descriptionId && (_jsx("span", { id: descriptionId, className: "nx-choice__description", children: option.description }))] })] }));
 }
 function noop() { }
+/**
+ * One option of a group drawn as tabs (`design="tabs"`): the native input out of sight inside a tab of the `TabButtons`
+ * track. Its description is its tooltip, and the input's description for a screen reader: `descriptionId` names the
+ * group's note for this option (`ChoiceTabNotes`), which a hidden note still gives.
+ */
+export function ChoiceTab({ type, groupId, name, option, index, checked, defaultChecked, invalid, readOnly, onInvalid }) {
+    const descriptionId = hasContent(option.description) ? `${groupId}-${index}-description` : undefined;
+    return (_jsxs("label", { className: "nx-tabs__option", title: typeof option.description === "string" ? option.description : undefined, children: [_jsx("input", { id: `${groupId}-${index}`, type: type, name: name, value: String(option.value), [OPTION_ATTRIBUTE]: index, className: "nx-visually-hidden", checked: checked, defaultChecked: checked === undefined ? defaultChecked : undefined, disabled: option.disabled, "aria-invalid": invalid || undefined, "aria-describedby": descriptionId, onClick: readOnly ? preventChange : undefined, onInvalid: onInvalid, onChange: checked === undefined ? undefined : noop }), option.icon, _jsx("span", { className: "nx-tabs__label", children: _jsx("span", { className: "nx-tabs__text", children: option.label }) })] }));
+}
+/**
+ * The descriptions of a group drawn as tabs, under the track: the chosen option's shows (a phone has no tooltip), the
+ * rest stay hidden but still describe their inputs. `chosen` is the option chosen when the group is drawn; after that
+ * `showChosenNote` follows the inputs, as the group's `sync` rule.
+ */
+export function ChoiceTabNotes({ groupId, options, chosen }) {
+    return options.map((option, index) => hasContent(option.description) ? (_jsx("p", { id: `${groupId}-${index}-description`, className: "nx-choices__note", "data-nx-note": index, hidden: index !== chosen, children: option.description }, String(option.value))) : null);
+}
+/** Shows the note of the option checked now and hides the others (a `useChoiceField` `sync` rule). */
+export function showChosenNote(inputs) {
+    const group = inputs[0]?.closest(".nx-choices");
+    if (!group)
+        return;
+    const chosen = inputs.find(input => input.checked)?.getAttribute(OPTION_ATTRIBUTE) ?? null;
+    for (const note of Array.from(group.querySelectorAll("[data-nx-note]")))
+        note.hidden = note.dataset.nxNote !== chosen;
+}
 /** The legend of a choice group, with the required mark and, when read-only, a lock. */
 export function ChoiceLegend({ label, required, lock }) {
     if (!hasContent(label))
@@ -156,7 +182,7 @@ export function ChoiceLegend({ label, required, lock }) {
 export function groupLayout(props) {
     const { size = "md", design = "default", orientation = "vertical", columns } = props;
     return {
-        className: cx("nx-choices", `nx-choices--${size}`, design === "cards" && "nx-choices--cards", orientation === "horizontal" && "nx-choices--horizontal", props.className),
+        className: cx("nx-choices", `nx-choices--${size}`, design === "cards" && "nx-choices--cards", design === "tabs" && "nx-choices--tabs", orientation === "horizontal" && "nx-choices--horizontal", props.className),
         optionsStyle: (columns && columns > 1 ? { "--nx-choices-columns": columns } : undefined),
     };
 }

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

@@ -0,0 +1,51 @@
+import { type FormValues, type InputParams } from "../../Interfaces/FormInterfaces.ts";
+import type { InputDesign } from "../../Interfaces/InputInterfaces.ts";
+import type { Size } from "../../Interfaces/TypeInterfaces.ts";
+/** An input's name in messages: its `fieldName`, its label when it is text, or its name. */
+export declare function formInputLabel(params: InputParams | undefined, name?: string): string;
+/** What the line under a worked-out input that was typed in says: what was set, or why nothing was. */
+export interface ComputedNote {
+    text: string;
+    /** The figure was refused: nothing was set. */
+    refused: boolean;
+}
+export interface ComputedInputProps {
+    params: InputParams;
+    /** The control's id. */
+    id: string;
+    /** The values it is worked out from as they are now: the form's, or the row's. Read on every draw and commit. */
+    read: () => FormValues;
+    /** The page's `computeWith`, handed to `compute.value` and `compute.solve`. */
+    withValue?: unknown;
+    /** Takes the values `compute.solve` answered as the person's own change. Not called for a refusal or for nothing new. */
+    write: (values: FormValues) => void;
+    /** Another input's params by name, as they are now: its name in the note, its number format, and whether it may change. */
+    inputParams: (name: string) => InputParams | undefined;
+    /** The control id of an input it is worked out from, for the `<output>`'s `for`. */
+    sourceId?: (name: string) => string;
+    size: Size;
+    /** The design around it (a form's); its params' own wins. */
+    design?: InputDesign;
+    /** The values are loading: it shows nothing and takes nothing. */
+    loading?: boolean;
+    readOnly?: boolean;
+    disabled?: boolean;
+    /** Why a box that can be typed in is read-only here, for its note. */
+    readOnlyMessage?: string;
+    /**
+     * Drawn in a table cell: no label (the column header is it), named `aria-label` for screen readers, the standard
+     * design, and the line under the box handed to `onNote` - a table cell has no line under it.
+     */
+    cell?: {
+        "aria-label": string;
+    };
+    /** Hears the note as it comes and goes (`cell`): a table shows it in the line under the rows. */
+    onNote?: (note: ComputedNote | null) => void;
+}
+/**
+ * An input worked out from others (`compute`): the field's frame (label, hint, prefix, suffix, size, design) around an
+ * `<output>` that says the value as it is now, in the person's number format, on the read-only tint - never typed in, so
+ * no lock, no note, no steppers and no Tab stop. Blank while the values load, and for a value that is no figure. A Number
+ * input with `compute.solve` is a box that can be typed in instead (`SolvableField`).
+ */
+export declare function ComputedInput(props: ComputedInputProps): import("react").JSX.Element;

package/dist/Components/Inputs/ComputedInput.js

@@ -0,0 +1,179 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { iconAlertCircle, InlineIcon } from "nexus-icons";
+import { useLayoutEffect, useState } from "react";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { computedText, computedValue } from "../../Helpers/InputConditions.js";
+import { inputFieldName } from "../../Helpers/InputParamsHelpers.js";
+import { formatNumber, parseNumber, roundDecimal } from "../../Helpers/NumberHelpers.js";
+import { useInputDesign, useNumberLocale } from "../../Helpers/UserPreferences.js";
+import { EInputTypes } from "../../Interfaces/FormInterfaces.js";
+import { Field } from "./Field.js";
+import { NumberBox } from "./NumberBox.js";
+/*
+ * An input worked out from others (`compute`), wherever it is drawn: a form's cell or a row's. It holds no value of its
+ * own; it reads the values it comes from through `read` and, when it can be typed in (`compute.solve`), writes the ones
+ * the typed figure gives through `write`, as the person's own change (`FormStore.setFromPerson`, `RowsStore.setFromPerson`).
+ */
+/** An input's name in messages: its `fieldName`, its label when it is text, or its name. */
+export function formInputLabel(params, name = "") {
+    if (!params)
+        return name;
+    return inputFieldName(params) ?? (typeof params.label === "string" ? params.label : params.name);
+}
+/**
+ * An input worked out from others (`compute`): the field's frame (label, hint, prefix, suffix, size, design) around an
+ * `<output>` that says the value as it is now, in the person's number format, on the read-only tint - never typed in, so
+ * no lock, no note, no steppers and no Tab stop. Blank while the values load, and for a value that is no figure. A Number
+ * input with `compute.solve` is a box that can be typed in instead (`SolvableField`).
+ */
+export function ComputedInput(props) {
+    const { params, id, read, withValue, sourceId, size, loading = false, cell } = props;
+    const locale = useNumberLocale();
+    const own = params;
+    const design = useInputDesign(cell ? "standard" : (own.design ?? props.design));
+    const disabled = Boolean(props.disabled) || Boolean(own.disabled);
+    const text = loading ? "" : computedText(params, computedValue(params, read(), withValue), locale);
+    if (params.compute?.solve && params.type === EInputTypes.Number) {
+        return _jsx(SolvableField, { ...props, text: text, design: design, disabled: disabled });
+    }
+    const messageId = `${id}-message`;
+    const hint = cell ? undefined : own.hint;
+    // The inputs it is worked out from, as an output names them.
+    const from = sourceId ? params.compute?.from.map(sourceId).join(" ") : "";
+    return (_jsx(Field, { controlId: id, messageId: messageId, label: cell ? undefined : params.label, hint: hint, design: design, size: own.size ?? size, icon: own.icon, iconEnd: own.iconEnd, prefix: own.prefix, suffix: own.suffix, readOnly: true, disabled: disabled, raiseLabel: true, className: own.className, children: _jsx("output", { id: id, htmlFor: from || undefined, className: cx("nx-field__control", "nx-field__control--output", params.type === EInputTypes.Number && "nx-field__control--number"), "aria-live": "polite", "aria-label": cell?.["aria-label"], "aria-describedby": hint ? messageId : undefined, "aria-disabled": disabled || undefined, children: _jsx("span", { className: "nx-field__output-text", children: text }) }) }));
+}
+/**
+ * A worked-out Number input that can be typed in (`compute.solve`): a NumberBox showing the figure worked forward, its
+ * own Tab stop, in the person's number format. Typing does nothing until the person leaves the box or presses Enter;
+ * then `solve` answers the inputs' values that give the figure, `write` takes them as the person's change, and the box
+ * shows the figure worked forward again, with a line under it that says what was set (or why nothing was). The hint and
+ * that line share one place, so nothing below moves when it comes and goes. Escape puts back what the box showed.
+ */
+function SolvableField(props) {
+    const { params, id, read, withValue, write, inputParams, size, loading = false, cell, onNote, readOnlyMessage, text, design, disabled } = props;
+    const own = params;
+    const preferred = useNumberLocale();
+    const [note, setNote] = useState(null);
+    const format = { decimals: own.decimals, fixedDecimals: own.fixedDecimals ?? own.decimals !== undefined, grouping: own.grouping ?? true, locale: own.locale ?? preferred };
+    const readOnly = Boolean(props.readOnly) || Boolean(own.readOnly);
+    const shownNote = note && note.at === text ? note : null;
+    const shownText = shownNote?.text ?? null;
+    const shownRefused = Boolean(shownNote?.refused);
+    // A table hears the note as it comes and goes, and that it went with the cell (its row scrolled away).
+    useLayoutEffect(() => {
+        if (!onNote)
+            return;
+        onNote(shownText === null ? null : { text: shownText, refused: shownRefused });
+    }, [onNote, shownText, shownRefused]);
+    useLayoutEffect(() => (onNote ? () => onNote(null) : undefined), [onNote]);
+    /** The figure worked forward from the values as they are now: as a number, and as the box writes it. */
+    const forward = () => {
+        const value = computedValue(params, read(), withValue);
+        const number = typeof value === "number" ? value : typeof value === "string" && value.trim() !== "" ? Number(value) : Number.NaN;
+        return Number.isFinite(number) ? { number, text: formatNumber(number, format) } : { number: null, text: "" };
+    };
+    const number = loading ? null : forward().number;
+    /** The box shows the figure worked forward: without group marks while it is being typed in. */
+    function showForward(input) {
+        const now = forward();
+        input.value = now.number === null ? "" : formatNumber(now.number, document.activeElement === input ? { ...format, grouping: false } : format);
+    }
+    /** A source input's value as its box writes it, for the line under the box. */
+    function written(name, value) {
+        const sourceParams = inputParams(name);
+        if (typeof value === "number" && (!sourceParams || sourceParams.type === EInputTypes.Number)) {
+            const decimals = sourceParams?.decimals;
+            return formatNumber(value, { decimals, fixedDecimals: sourceParams?.fixedDecimals ?? decimals !== undefined, grouping: sourceParams?.grouping ?? true, locale: sourceParams?.locale ?? preferred });
+        }
+        return value === null || value === undefined ? "nothing" : String(value);
+    }
+    /** Works the typed figure back into the inputs it comes from. Answers whether the box had a new figure to take. */
+    function commit(input) {
+        const solve = params.compute?.solve;
+        const now = forward();
+        const parsed = parseNumber(input.value, format.locale);
+        if (!solve || loading || readOnly || disabled || parsed === null || Number.isNaN(parsed)) {
+            showForward(input);
+            return false;
+        }
+        const typed = own.decimals === undefined ? parsed : roundDecimal(parsed, own.decimals);
+        const typedText = formatNumber(typed, format);
+        if (typedText === now.text) {
+            showForward(input);
+            return false;
+        }
+        let answer;
+        try {
+            answer = solve.call(params.compute, typed, read(), withValue);
+        }
+        catch (error) {
+            console.error(`Working "${params.name}" backwards failed:`, error);
+            answer = `${typedText} could not be worked back into the figures it comes from.`;
+        }
+        if (answer && typeof answer === "object") {
+            // A figure is never written into an input the person could not change themselves.
+            const locked = Object.keys(answer.values)
+                .map(name => inputParams(name))
+                .find(found => found && (found.readOnly || found.disabled));
+            if (locked)
+                answer = `${formInputLabel(locked, locked.name)} cannot be changed here, so ${typedText} cannot be set.`;
+        }
+        if (typeof answer === "string") {
+            setNote({ text: answer, refused: true, at: now.text });
+            showForward(input);
+            return true;
+        }
+        if (!answer) {
+            showForward(input);
+            return true;
+        }
+        const before = read();
+        write(answer.values);
+        const after = read();
+        const reached = forward();
+        const set = Object.keys(answer.values)
+            .filter(name => !Object.is(before[name], after[name]))
+            .map(name => `${formInputLabel(inputParams(name), name)} set to ${written(name, after[name])}`);
+        const said = set.length ? `${set.join(", ")}.` : "";
+        const words = answer.note ?? (reached.text === typedText ? said : `${typedText} cannot be reached exactly; nearest is ${reached.text}.${said ? ` ${said}` : ""}`);
+        setNote(words ? { text: words, refused: false, at: reached.text } : null);
+        showForward(input);
+        return true;
+    }
+    const hint = own.hint;
+    // In a table the line goes under the rows (`onNote`); a hidden live region still says it from the cell.
+    const footer = cell ? undefined : (_jsxs("span", { className: "nx-field__notes", children: [_jsx("span", { className: cx(shownNote && "nx-field__note--off"), children: hint }), _jsxs("span", { className: cx("nx-field__note", shownNote?.refused && "nx-field__note--refused"), "aria-live": "polite", children: [shownNote?.refused && _jsx(InlineIcon, { icon: iconAlertCircle }), shownNote?.text] })] }));
+    const box = (_jsx(NumberBox, { id: id, label: cell ? undefined : params.label, "aria-label": cell?.["aria-label"], hint: footer, design: design, size: own.size ?? size, icon: own.icon, iconEnd: own.iconEnd, prefix: own.prefix, suffix: own.suffix, placeholder: own.placeholder, decimals: format.decimals, fixedDecimals: format.fixedDecimals, grouping: format.grouping, locale: own.locale, value: number, readOnly: readOnly, readOnlyMessage: readOnlyMessage, disabled: disabled || loading, className: own.className, onBlur: event => {
+            // Where the focus was going: a box the answer sets (a click into Price) mounts again with its value, so the
+            // focus would fall to the page; it goes to the box that took its place (the same id) instead.
+            const next = event.relatedTarget instanceof HTMLElement ? event.relatedTarget : null;
+            if (!commit(event.currentTarget) || !next?.id)
+                return;
+            const nextId = next.id;
+            setTimeout(() => {
+                const active = document.activeElement;
+                if (next.isConnected || (active && active !== document.body))
+                    return;
+                document.getElementById(nextId)?.focus();
+            });
+        }, onKeyDown: event => {
+            if (event.key !== "Enter" && event.key !== "Escape")
+                return;
+            const input = event.currentTarget;
+            const parsed = parseNumber(input.value, format.locale);
+            const shown = parsed === null || Number.isNaN(parsed) ? "" : formatNumber(own.decimals === undefined ? parsed : roundDecimal(parsed, own.decimals), format);
+            // Nothing new in the box: Enter submits the form (or moves down a table's column) and Escape closes a popup.
+            if (shown === forward().text)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            if (event.key === "Enter")
+                commit(input);
+            else
+                showForward(input);
+        } }));
+    if (!cell)
+        return box;
+    return (_jsxs(_Fragment, { children: [box, _jsx("span", { className: "nx-visually-hidden", "aria-live": "polite", children: shownNote?.text })] }));
+}

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

@@ -8,6 +8,11 @@ interface DropdownBaseProps<TItem extends DropdownItem, TValue extends OptionVal
     hint?: ReactNode;
     /** An error from outside, such as a server message. Shown before the field's own message. */
     error?: string | null;
+    /**
+     * Drawn as invalid with no message line, for a box whose reason the page says elsewhere (`Field` `invalid`); a screen
+     * reader hears that reason through `aria-describedby`. A CRUD's narrowing box is drawn so while it asks for a pick.
+     */
+    invalid?: boolean;
     /** Default `standard`. */
     design?: InputDesign;
     /** Default `md`. */
@@ -29,6 +34,14 @@ interface DropdownBaseProps<TItem extends DropdownItem, TValue extends OptionVal
     selectedOptions?: readonly TItem[];
     /** Loads the items of values that no list or `selectedOptions` has, e.g. by id. Values it does not return show as "Not found". */
     resolveOptions?: (values: TValue[]) => Promise<readonly TItem[]>;
+    /**
+     * The item of a value (as text) that the page already holds, at once and with no call: a list kept for the page, a
+     * record looked up before. Asked before `resolveOptions`, so a value it knows is named from the first draw - and a form
+     * can name the values it holds without a call (a CRUD's save does). It answers only what is fresh: a record marked old
+     * since may have changed, and the dropdown then asks `resolveOptions`. With `aged` it answers an old one too, which a
+     * CRUD's save takes over no name at all. `crudPicker` gives one.
+     */
+    peekOption?: (key: string, aged?: boolean) => TItem | null | undefined;
     /** The item field that holds the value. Default `value`. */
     valueKey?: string;
     /** The item field shown as its name, in the box and in the list. Default `label`. */

package/dist/Components/Inputs/Dropdown.js

@@ -7,7 +7,7 @@ import { columnTrack, defaultSearchKeys, filterItems, foldSearchText, indexItems
 import { followAnchor, isPopoverOpen, placeListPanel } from "../../Helpers/PopoverHelpers.js";
 import { DEFAULT_FIELD_NAME, validateSelection } from "../../Helpers/ValidationHelpers.js";
 import { Button } from "../Documents/Button.js";
-import { DropdownChip, DropdownMedia, DropdownOption, DropdownTag, hasIcon } from "./DropdownParts.js";
+import { columnAlignStyle, DropdownChip, DropdownMedia, DropdownOption, DropdownTag, hasIcon } from "./DropdownParts.js";
 import { Field } from "./Field.js";
 import { useInputField } from "./InputField.js";
 import { useReadOnlyNotice } from "./ReadOnlyNotice.js";
@@ -28,7 +28,7 @@ const NAMES_LISTED = 20;
 const SKELETON_WIDTHS = ["72%", "54%", "64%", "46%"];
 const IDLE_LIST = { search: "", loadKey: undefined, items: [], page: 0, hasMore: false, total: undefined, status: "idle", errorPage: 1, firstKeys: new Set() };
 export function Dropdown(props) {
-    const { label, hint, error, design: ownDesign, size = "md", icon, options, loadOptions, loadKey, pageSize = 50, selectedOptions, resolveOptions, valueKey = "value", labelKey = "label", descriptionKey = "description", iconKey = "icon", columns, searchKeys, isOptionDisabled = isDisabledItem, isOptionInactive = isInactiveItem, searchable: searchableProp, clearable = true, loading = false, emptyMessage = "No options", renderValue, panelWidth, readOnlyMessage, fieldName, validateOn, className, inputClassName, style, required, validate, name, form, placeholder, disabled, readOnly, ref, onBlur, onFocus, onKeyDown, onClick, onInvalid, multiple: multipleProp, value: valueProp, defaultValue, onValueChange, min, max, selectAll = true, maxChips = 10, ...inputProps } = props;
+    const { label, hint, error, invalid = false, design: ownDesign, size = "md", icon, options, loadOptions, loadKey, pageSize = 50, selectedOptions, resolveOptions, peekOption, valueKey = "value", labelKey = "label", descriptionKey = "description", iconKey = "icon", columns, searchKeys, isOptionDisabled = isDisabledItem, isOptionInactive = isInactiveItem, searchable: searchableProp, clearable = true, loading = false, emptyMessage = "No options", renderValue, panelWidth, readOnlyMessage, fieldName, validateOn, className, inputClassName, style, required, validate, name, form, placeholder, disabled, readOnly, ref, onBlur, onFocus, onKeyDown, onClick, onInvalid, multiple: multipleProp, value: valueProp, defaultValue, onValueChange, min, max, selectAll = true, maxChips = 10, ...inputProps } = props;
     // The person's input design (the quick preferences) when this page and its form name none, for a labelled input.
     const design = useInputDesign(ownDesign, Boolean(label));
     const multiple = multipleProp === true;
@@ -48,7 +48,7 @@ export function Dropdown(props) {
     const optionIndex = useMemo(() => (options ? indexItems(options, valueKey) : null), [options, valueKey]);
     const selectedIndex = useMemo(() => (selectedOptions ? indexItems(selectedOptions, valueKey) : null), [selectedOptions, valueKey]);
     const knownRef = useRef(new Map());
-    const findItem = (key) => optionIndex?.get(key) ?? knownRef.current.get(key) ?? selectedIndex?.get(key) ?? null;
+    const findItem = (key) => optionIndex?.get(key) ?? knownRef.current.get(key) ?? selectedIndex?.get(key) ?? peekOption?.(key) ?? null;
     const labelOf = (item) => itemLabel(item, labelKey, valueKey);
     const listId = `${useId()}-list`;
     const selectionId = `${listId}-selection`;
@@ -305,7 +305,9 @@ export function Dropdown(props) {
     const activeIndex = !open ? -1 : active >= 0 && active < rows.length ? active : fallbackActive();
     const staleRows = Boolean(loadOptions) && server.status === "loading" && server.items.length > 0;
     // An open server list that has not started its first request yet is loading too: its placeholder rows already show.
-    const busy = loading || pendingRef.current.size > 0 || (Boolean(loadOptions) && (server.status === "loading" || server.status === "more" || (open && server.status === "idle")));
+    // The value itself is still coming (`loading`: a form asking a picker for a remembered value; or its items resolving).
+    const valueBusy = loading || pendingRef.current.size > 0;
+    const busy = valueBusy || (Boolean(loadOptions) && (server.status === "loading" || server.status === "more" || (open && server.status === "idle")));
     // Select all and Clear act on every option the list holds for the search, rendered yet or not, and on the current
     // values shown at its top. The options are split once per list and selection, not on every highlight move.
     const showBulk = open && multiple && selectAll;
@@ -777,7 +779,7 @@ export function Dropdown(props) {
         const failed = Boolean(loadOptions) && server.status === "error";
         const empty = rows.length === 0 && !skeleton && !failed;
         const typed = deferredSearch.trim();
-        listContent = (_jsxs(_Fragment, { children: [showHeader && (_jsxs("div", { className: "nx-dropdown-list__header", "aria-hidden": "true", children: [_jsx("span", {}), typedColumns.map((column, index) => (_jsx("span", { className: "nx-dropdown-list__heading", style: column.align && column.align !== "start" ? { justifySelf: column.align, textAlign: column.align } : undefined, children: column.header }, index)))] })), rows.map((row, index) => {
+        listContent = (_jsxs(_Fragment, { children: [showHeader && (_jsxs("div", { className: "nx-dropdown-list__header", "aria-hidden": "true", children: [_jsx("span", {}), typedColumns.map((column, index) => (_jsx("span", { className: "nx-dropdown-list__heading", style: columnAlignStyle(column), children: column.header }, index)))] })), rows.map((row, index) => {
                     const labelField = row.item ? readField(row.item, labelKey) : undefined;
                     const description = row.item && !typedColumns ? readField(row.item, descriptionKey) : undefined;
                     const pending = isPending(row.key, row.item);
@@ -809,7 +811,7 @@ export function Dropdown(props) {
     // The check column, the columns, and an empty last track whose gap keeps text off the row's end.
     const gridColumns = columns ? `auto ${columns.map(column => columnTrack(column)).join(" ")} 0px` : undefined;
     const panelStyle = panelWidth === undefined ? undefined : { width: typeof panelWidth === "number" ? `${panelWidth}px` : panelWidth };
-    return (_jsxs(_Fragment, { children: [_jsxs(Field, { controlId: field.controlId, messageId: field.messageId, label: label, required: required, design: design, size: size, hint: hint, error: field.error, icon: icon, actions: _jsxs(_Fragment, { children: [busy && (_jsx("span", { className: "nx-dropdown__spinner", title: "Loading", "aria-hidden": "true", children: _jsx(InlineIcon, { icon: iconLoader2, className: "nx-spin" }) })), showClear && (_jsx("button", { type: "button", className: "nx-field__action nx-dropdown__clear", tabIndex: -1, "aria-label": "Clear", title: "Clear", onMouseDown: event => event.preventDefault(), onClick: clear, children: _jsx(InlineIcon, { icon: iconX }) })), readOnlyNotice.lock, !readOnly && (_jsx("button", { type: "button", className: "nx-field__action nx-dropdown__toggle", tabIndex: -1, "aria-label": open ? "Close the list" : "Open the list", "aria-expanded": open, "aria-controls": open ? listId : undefined, disabled: disabled, onMouseDown: event => event.preventDefault(), onClick: () => (open ? closePanel() : openPanel()), children: _jsx(InlineIcon, { icon: iconChevronDown }) }))] }), disabled: disabled, readOnly: readOnly, raiseLabel: values.length > 0 || Boolean(placeholder), className: cx("nx-field--dropdown", className), style: style, children: [_jsxs("div", { className: cx("nx-dropdown__control", multiple ? "nx-dropdown__control--multiple" : "nx-dropdown__control--single"), "data-searchable": searchable || undefined, "data-has-value": values.length > 0 || undefined, onMouseDown: handleControlMouseDown, children: [boxContent, _jsx("input", { autoComplete: "off", spellCheck: false, ...inputProps, ...field.controlProps, type: "text", role: "combobox", "aria-expanded": open, "aria-haspopup": "listbox", "aria-controls": open ? listId : undefined, "aria-activedescendant": activeIndex >= 0 ? `${listId}-${activeIndex}` : undefined, "aria-autocomplete": searchable ? "list" : "none", inputMode: searchable ? inputProps.inputMode : "none", name: undefined, form: form, className: cx("nx-field__control", "nx-dropdown__input", inputClassName), placeholder: values.length > 0 ? " " : placeholder || " ", disabled: disabled, readOnly: readOnly, onBlur: handleBlur, onFocus: onFocus, onKeyDown: handleKeyDown, onClick: handleClick }), _jsx("span", { id: selectionId, className: "nx-visually-hidden", children: values.length > 0 ? `Selected: ${namesOf(values)}` : "" })] }), name &&
+    return (_jsxs(_Fragment, { children: [_jsxs(Field, { controlId: field.controlId, messageId: field.messageId, label: label, required: required, design: design, size: size, hint: hint, error: field.error, invalid: invalid, icon: icon, actions: _jsxs(_Fragment, { children: [busy && (_jsx("span", { className: "nx-dropdown__spinner", title: "Loading", "aria-hidden": "true", children: _jsx(InlineIcon, { icon: iconLoader2, className: "nx-spin" }) })), showClear && (_jsx("button", { type: "button", className: "nx-field__action nx-dropdown__clear", tabIndex: -1, "aria-label": "Clear", title: "Clear", onMouseDown: event => event.preventDefault(), onClick: clear, children: _jsx(InlineIcon, { icon: iconX }) })), readOnlyNotice.lock, !readOnly && (_jsx("button", { type: "button", className: "nx-field__action nx-dropdown__toggle", tabIndex: -1, "aria-label": open ? "Close the list" : "Open the list", "aria-expanded": open, "aria-controls": open ? listId : undefined, disabled: disabled, onMouseDown: event => event.preventDefault(), onClick: () => (open ? closePanel() : openPanel()), children: _jsx(InlineIcon, { icon: iconChevronDown }) }))] }), disabled: disabled, readOnly: readOnly, raiseLabel: values.length > 0 || Boolean(placeholder), className: cx("nx-field--dropdown", className), style: style, children: [_jsxs("div", { className: cx("nx-dropdown__control", multiple ? "nx-dropdown__control--multiple" : "nx-dropdown__control--single"), "data-searchable": searchable || undefined, "data-has-value": values.length > 0 || undefined, onMouseDown: handleControlMouseDown, children: [boxContent, _jsx("input", { autoComplete: "off", spellCheck: false, ...inputProps, ...field.controlProps, type: "text", role: "combobox", "aria-expanded": open, "aria-haspopup": "listbox", "aria-controls": open ? listId : undefined, "aria-activedescendant": activeIndex >= 0 ? `${listId}-${activeIndex}` : undefined, "aria-autocomplete": searchable ? "list" : "none", "aria-busy": valueBusy || undefined, inputMode: searchable ? inputProps.inputMode : "none", name: undefined, form: form, className: cx("nx-field__control", "nx-dropdown__input", inputClassName), placeholder: values.length > 0 ? " " : placeholder || " ", disabled: disabled, readOnly: readOnly, onBlur: handleBlur, onFocus: onFocus, onKeyDown: handleKeyDown, onClick: handleClick }), _jsx("span", { id: selectionId, className: "nx-visually-hidden", children: values.length > 0 ? `Selected: ${namesOf(values)}` : valueBusy ? "Loading" : "" })] }), name &&
                         (multiple ? (values.map(value => _jsx("input", { type: "hidden", name: name, form: form, disabled: disabled, value: optionKey(value) }, optionKey(value)))) : (_jsx("input", { type: "hidden", name: name, form: form, disabled: disabled, value: optionKey(values[0]) })))] }), readOnlyNotice.notice, !readOnly && (_jsx("div", { ref: panelRef, popover: "manual", className: cx("nx-popover", "nx-dropdown-panel", `nx-dropdown-panel--${size}`), style: panelStyle, onKeyDown: handlePanelKeyDown, onBlur: handlePanelBlur, 
                 // The box keeps focus while rows and buttons are pressed. A press on the list itself is left alone, so its
                 // scroll bar can be dragged.

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

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import { type CSSProperties, type ReactNode } from "react";
 import type { DropdownColumn, DropdownItem } from "../../Interfaces/InputInterfaces.ts";
 /**
  * Why a current value cannot be picked again:
@@ -24,6 +24,8 @@ export declare function DropdownImage({ src }: {
 export declare function iconNode(icon: unknown): ReactNode;
 /** Whether an icon field has something to draw. */
 export declare function hasIcon(icon: unknown): boolean;
+/** A column's cells and heading where they sit (`dropdownColumnAlign`): nothing to say for `start`. */
+export declare const columnAlignStyle: (column: Pick<AnyColumn, "type" | "align">) => CSSProperties | undefined;
 /** One cell of a row with columns. `label` names the avatar's initials; `tag` follows the text. */
 export declare function DropdownCell({ column, item, label, tag }: {
     column: AnyColumn;

package/dist/Components/Inputs/DropdownParts.js

@@ -3,7 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Icon, iconCheck, iconX, InlineIcon } from "nexus-icons";
 import { isValidElement, memo, useState } from "react";
 import { cx } from "../../Helpers/ClassHelpers.js";
-import { isMediaColumn, readField } from "../../Helpers/DropdownHelpers.js";
+import { dropdownColumnAlign, isMediaColumn, readField } from "../../Helpers/DropdownHelpers.js";
+import { formatMoney } from "../../Helpers/NumberHelpers.js";
+import { useNumberLocale } from "../../Helpers/UserPreferences.js";
 import { Avatar } from "../Viewers/Avatar.js";
 export const DROPDOWN_STATE_LABELS = {
     inactive: "Inactive",
@@ -38,11 +40,21 @@ export function iconNode(icon) {
 export function hasIcon(icon) {
     return (typeof icon === "string" && icon !== "") || isValidElement(icon);
 }
-const alignStyle = (align) => align && align !== "start" ? { justifySelf: align, textAlign: align } : undefined;
+/** A column's cells and heading where they sit (`dropdownColumnAlign`): nothing to say for `start`. */
+export const columnAlignStyle = (column) => {
+    const align = dropdownColumnAlign(column);
+    return align !== "start" ? { justifySelf: align, textAlign: align } : undefined;
+};
+/** A money column's figure: 2 places in the person's number format; nothing for a missing one or one that is no figure. */
+function DropdownMoney({ value }) {
+    const locale = useNumberLocale();
+    const figure = typeof value === "number" ? value : typeof value === "string" && value.trim() !== "" ? Number(value) : Number.NaN;
+    return _jsx("span", { className: "nx-dropdown-cell__text", children: formatMoney(Number.isFinite(figure) ? figure : null, { locale }) });
+}
 /** One cell of a row with columns. `label` names the avatar's initials; `tag` follows the text. */
 export function DropdownCell({ column, item, label, tag }) {
     const type = column.type ?? "text";
-    const style = alignStyle(column.align);
+    const style = columnAlignStyle(column);
     if (column.render) {
         return (_jsxs("span", { className: cx("nx-dropdown-cell", `nx-dropdown-cell--${type}`), style: style, children: [column.render(item), tag] }));
     }
@@ -51,7 +63,7 @@ export function DropdownCell({ column, item, label, tag }) {
         return (_jsx("span", { className: "nx-dropdown-cell nx-dropdown-cell--media", style: style, "aria-hidden": "true", children: type === "avatar" ? _jsx(DropdownAvatar, { src: value, name: label }) : type === "image" ? _jsx(DropdownImage, { src: value }) : _jsx("span", { className: "nx-dropdown-icon", children: iconNode(value) }) }));
     }
     const text = value === null || value === undefined ? "" : String(value);
-    return (_jsxs("span", { className: cx("nx-dropdown-cell", `nx-dropdown-cell--${type}`), style: style, children: [_jsx("span", { className: "nx-dropdown-cell__text", children: text }), tag] }));
+    return (_jsxs("span", { className: cx("nx-dropdown-cell", `nx-dropdown-cell--${type}`), style: style, children: [type === "money" ? _jsx(DropdownMoney, { value: value }) : _jsx("span", { className: "nx-dropdown-cell__text", children: text }), tag] }));
 }
 /** The picture that leads a value in the box or a chip: the first avatar, image, or icon column, or the icon field. */
 export function DropdownMedia({ item, label, columns, iconKey }) {

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

@@ -17,6 +17,12 @@ export interface FieldProps {
     hint?: ReactNode;
     /** Error message. Marks the field invalid and replaces the hint. */
     error?: ReactNode;
+    /**
+     * Draws the field as invalid, the look an error gives it, with no message line of its own: for a field the page says
+     * why about elsewhere, such as a CRUD's narrowing box while its list asks for a pick. Nothing is said to a screen
+     * reader by it: point the control's `aria-describedby` at the words that say why.
+     */
+    invalid?: boolean;
     /** Id of the hint or error line, for the control's `aria-describedby`. */
     messageId?: string;
     /** Decorative icon at the start of the box. */
@@ -48,6 +54,6 @@ export interface FieldProps {
  * The frame around every input: label, box, icons, and the hint or error line. It has no state, so it renders
  * anywhere; inputs such as `TextBox` build on it, and so can custom controls.
  */
-export declare function Field({ controlId, label, labelId, required, design, size, hint, error, messageId, icon, iconEnd, prefix, suffix, actionsStart, actions, aside, disabled, readOnly, raiseLabel, multiline, className, style, children, }: FieldProps): import("react").JSX.Element;
+export declare function Field({ controlId, label, labelId, required, design, size, hint, error, invalid, messageId, icon, iconEnd, prefix, suffix, actionsStart, actions, aside, disabled, readOnly, raiseLabel, multiline, className, style, children, }: FieldProps): import("react").JSX.Element;
 /** Whether a node renders something: not `undefined`, `null`, `false`, or "". */
 export declare const hasContent: (node: ReactNode) => boolean;

package/dist/Components/Inputs/Field.js

@@ -5,12 +5,12 @@ import { cx } from "../../Helpers/ClassHelpers.js";
  * The frame around every input: label, box, icons, and the hint or error line. It has no state, so it renders
  * anywhere; inputs such as `TextBox` build on it, and so can custom controls.
  */
-export function Field({ controlId, label, labelId, required = false, design = "standard", size = "md", hint, error, messageId, icon, iconEnd, prefix, suffix, actionsStart, actions, aside, disabled = false, readOnly = false, raiseLabel = false, multiline = false, className, style, children, }) {
+export function Field({ controlId, label, labelId, required = false, design = "standard", size = "md", hint, error, invalid = false, messageId, icon, iconEnd, prefix, suffix, actionsStart, actions, aside, disabled = false, readOnly = false, raiseLabel = false, multiline = false, className, style, children, }) {
     const hasLabel = hasContent(label);
     const hasError = hasContent(error);
     const message = hasError ? error : hint;
     const labelElement = hasLabel && (_jsxs("label", { id: labelId, className: "nx-field__label", htmlFor: controlId, children: [label, required && (_jsx("span", { className: "nx-field__required", "aria-hidden": "true", children: "*" }))] }));
-    return (_jsxs("div", { className: cx("nx-field", `nx-field--${design}`, `nx-field--${size}`, multiline && "nx-field--multiline", className), "data-invalid": hasError || undefined, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, "data-raised": raiseLabel || undefined, style: style, children: [design === "standard" && labelElement, _jsxs("div", { className: "nx-field__box", children: [actionsStart && _jsx("span", { className: "nx-field__actions nx-field__actions--start", children: actionsStart }), icon && (_jsx("span", { className: "nx-field__icon", "aria-hidden": "true", children: icon })), hasContent(prefix) && (_jsx("span", { id: `${controlId}-prefix`, className: "nx-field__affix", children: prefix })), children, design !== "standard" && labelElement, hasContent(suffix) && (_jsx("span", { id: `${controlId}-suffix`, className: "nx-field__affix nx-field__affix--end", children: suffix })), actions && _jsx("span", { className: "nx-field__actions", children: actions }), iconEnd && (_jsx("span", { className: "nx-field__icon nx-field__icon--end", "aria-hidden": "true", children: iconEnd }))] }), (message || aside) && (_jsxs("div", { className: "nx-field__footer", children: [message && (_jsxs("p", { id: messageId, className: cx("nx-field__message", hasError && "nx-field__message--error"), children: [hasError && _jsx(InlineIcon, { icon: iconAlertCircle }), _jsx("span", { children: message })] })), aside && _jsx("span", { className: "nx-field__aside", children: aside })] }))] }));
+    return (_jsxs("div", { className: cx("nx-field", `nx-field--${design}`, `nx-field--${size}`, multiline && "nx-field--multiline", className), "data-invalid": hasError || invalid || undefined, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, "data-raised": raiseLabel || undefined, style: style, children: [design === "standard" && labelElement, _jsxs("div", { className: "nx-field__box", children: [actionsStart && _jsx("span", { className: "nx-field__actions nx-field__actions--start", children: actionsStart }), icon && (_jsx("span", { className: "nx-field__icon", "aria-hidden": "true", children: icon })), hasContent(prefix) && (_jsx("span", { id: `${controlId}-prefix`, className: "nx-field__affix", children: prefix })), children, design !== "standard" && labelElement, hasContent(suffix) && (_jsx("span", { id: `${controlId}-suffix`, className: "nx-field__affix nx-field__affix--end", children: suffix })), actions && _jsx("span", { className: "nx-field__actions", children: actions }), iconEnd && (_jsx("span", { className: "nx-field__icon nx-field__icon--end", "aria-hidden": "true", children: iconEnd }))] }), (message || aside) && (_jsxs("div", { className: "nx-field__footer", children: [message && (_jsxs("p", { id: messageId, className: cx("nx-field__message", hasError && "nx-field__message--error"), children: [hasError && _jsx(InlineIcon, { icon: iconAlertCircle }), _jsx("span", { children: message })] })), aside && _jsx("span", { className: "nx-field__aside", children: aside })] }))] }));
 }
 /** Whether a node renders something: not `undefined`, `null`, `false`, or "". */
 export const hasContent = (node) => node !== undefined && node !== null && node !== false && node !== "";

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

@@ -1,4 +1,4 @@
-import type { GroupFormProps, RowValue } from "../../Interfaces/FormInterfaces.ts";
+import { type GroupFormProps, type RowValue } from "../../Interfaces/FormInterfaces.ts";
 /**
  * The rows of a `TabularForm` as sections: each row's inputs with their own labels, on a 12-column grid (`span` in
  * each input's params). The same params, value, rules, and form behavior as `TabularForm`; only the layout differs. It
@@ -10,11 +10,11 @@ import type { GroupFormProps, RowValue } from "../../Interfaces/FormInterfaces.t
  *
  * @example
  * <GroupForm name="addresses" label="Addresses" itemLabel="Address" max={5} inputs={[
- *   { type: "dropdown", name: "country", label: "Country", required: true, options: countries, span: 6 },
- *   { type: "text", name: "city", label: "City", required: true, span: 6 },
- *   { type: "text", name: "zipCode", label: "Zip code", span: 4 },
- *   { type: "dropdown", name: "type", label: "Type", options: ADDRESS_TYPES, span: 4 },
- *   { type: "radio", name: "isPrimary", label: "Primary address", span: 4, required: true },
+ *   { type: EInputTypes.Dropdown, name: "country", label: "Country", required: true, options: countries, span: 6 },
+ *   { type: EInputTypes.Text, name: "city", label: "City", required: true, span: 6 },
+ *   { type: EInputTypes.Text, name: "zipCode", label: "Zip code", span: 4 },
+ *   { type: EInputTypes.Dropdown, name: "type", label: "Type", options: ADDRESS_TYPES, span: 4 },
+ *   { type: EInputTypes.Radio, name: "isPrimary", label: "Primary address", span: 4, required: true },
  * ]} />
  */
 export declare function GroupForm<TRow extends RowValue = RowValue>(props: GroupFormProps<TRow>): import("react").JSX.Element;