nexus-shared 1.1.20 → 2.0.0

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

@@ -0,0 +1,87 @@
+import { type ChangeEvent, type ComponentPropsWithRef, type CSSProperties, type ReactNode } from "react";
+import type { NumberFormatOptions, SliderMark, ValidateOn } from "../../Interfaces/InputInterfaces.ts";
+import type { Size } from "../../Interfaces/TypeInterfaces.ts";
+interface SliderBaseProps extends NumberFormatOptions {
+    label?: ReactNode;
+    /** Help text under the slider. An error takes its place. */
+    hint?: ReactNode;
+    /** An error from outside, such as a server message. */
+    error?: string | null;
+    /** Default `md`. */
+    size?: Size;
+    /** Default 0. */
+    min?: number;
+    /** Default 100. */
+    max?: number;
+    /** Default 1. */
+    step?: number;
+    /** Text before the shown value, e.g. "Rs ". Include a space if one is wanted. */
+    prefix?: string;
+    /** Text after the shown value, e.g. "%" or " nights". */
+    suffix?: string;
+    /** Writes the shown value; replaces the number format, `prefix`, and `suffix`. For example, hours as "14:30". */
+    format?: (value: number) => string;
+    /** Shows the value beside the label. Default true. */
+    showValue?: boolean;
+    /** Shows the value above the thumb while it is hovered, focused, or dragged. Best with `showValue={false}`. */
+    tooltip?: boolean;
+    /** Labelled points under the track. */
+    marks?: readonly SliderMark[];
+    disabled?: boolean;
+    /** Can be focused but not moved; the value is still sent with a form. A lock follows the label, and a try to move it shows a note. */
+    readOnly?: boolean;
+    /** What a read-only slider says when someone tries to move it. Default "Read-only: this value cannot be changed." ("this range" for a range slider). */
+    readOnlyMessage?: string;
+    /** Form field name. A range slider sends two values under it: start, then end. */
+    name?: string;
+    id?: string;
+    /** Name used in messages. Default: the label, when it is text. */
+    fieldName?: string;
+    /** When a `validate` message shows. Default `blur`; submitting a form always shows it. */
+    validateOn?: ValidateOn;
+    className?: string;
+    style?: CSSProperties;
+}
+type NativeInputProps = Omit<ComponentPropsWithRef<"input">, keyof SliderBaseProps | "type" | "value" | "defaultValue" | "onChange" | "children">;
+export interface SliderProps extends SliderBaseProps, NativeInputProps {
+    value?: number;
+    /** Default: `min`. */
+    defaultValue?: number;
+    /** Returns a message to fail, e.g. a deposit below a minimum. */
+    validate?: (value: number) => string | null | undefined;
+    /** Every change while dragging or stepping. */
+    onValueChange?: (value: number, event: ChangeEvent<HTMLElement>) => void;
+    /** Once the thumb is released or a key step ends: the moment to call an API. */
+    onValueCommit?: (value: number) => void;
+    inputClassName?: string;
+}
+export interface RangeSliderProps extends SliderBaseProps {
+    /** `[start, end]`. With `value`, the slider is controlled. */
+    value?: readonly [number, number];
+    /** Default: `[min, max]`. */
+    defaultValue?: readonly [number, number];
+    /** Smallest gap between start and end. Default 0. */
+    minDistance?: number;
+    /** Names of the two thumbs for screen readers, after the label. Default `["minimum", "maximum"]`. */
+    thumbLabels?: readonly [string, string];
+    validate?: (value: [number, number]) => string | null | undefined;
+    onValueChange?: (value: [number, number], event: ChangeEvent<HTMLElement>) => void;
+    onValueCommit?: (value: [number, number]) => void;
+    "aria-label"?: string;
+}
+/**
+ * Pick a number by dragging, with the arrow keys (Page Up and Page Down for bigger steps, Home and End for the
+ * limits), or by clicking a mark. A native range input, so touch and screen readers work as usual. Dragging writes
+ * the fill and the shown value straight to the DOM: nothing re-renders.
+ *
+ * @example <Slider name="discount" label="Discount" max={50} suffix="%" defaultValue={10} />
+ */
+export declare function Slider({ value, defaultValue, validate, onValueChange, onValueCommit, inputClassName, ...props }: SliderProps): import("react").JSX.Element;
+/**
+ * Pick a range with two thumbs, such as a price filter. Clicking the track moves the nearer thumb, and the thumbs
+ * keep `minDistance` apart.
+ *
+ * @example <RangeSlider name="price" label="Price per night" min={1000} max={30000} step={500} prefix="Rs " grouping />
+ */
+export declare function RangeSlider({ value, defaultValue, minDistance, thumbLabels, validate, onValueChange, onValueCommit, ...props }: RangeSliderProps): import("react").JSX.Element;
+export {};

package/dist/Components/Inputs/Slider.js

@@ -0,0 +1,216 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect, useEffectEvent, useRef, } from "react";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { clampNumber, countDecimals, formatNumber, roundDecimal } from "../../Helpers/NumberHelpers.js";
+import { GroupFooter, leavesField, OPTION_ATTRIBUTE, useChoiceField } from "./ChoiceField.js";
+import { hasContent } from "./Field.js";
+import { setInputValue } from "./InputField.js";
+import { useReadOnlyNotice } from "./ReadOnlyNotice.js";
+/**
+ * Pick a number by dragging, with the arrow keys (Page Up and Page Down for bigger steps, Home and End for the
+ * limits), or by clicking a mark. A native range input, so touch and screen readers work as usual. Dragging writes
+ * the fill and the shown value straight to the DOM: nothing re-renders.
+ *
+ * @example <Slider name="discount" label="Discount" max={50} suffix="%" defaultValue={10} />
+ */
+export function Slider({ value, defaultValue, validate, onValueChange, onValueCommit, inputClassName, ...props }) {
+    const base = pickBase(props);
+    const inputProps = omitBase(props);
+    return (_jsx(SliderField, { ...base, values: value === undefined ? undefined : [value], defaultValues: [defaultValue ?? base.min ?? 0], validate: validate && (values => validate(values[0])), onValues: onValueChange && ((values, event) => onValueChange(values[0], event)), onCommit: onValueCommit && (values => onValueCommit(values[0])), inputProps: inputProps, inputClassName: inputClassName }));
+}
+/**
+ * Pick a range with two thumbs, such as a price filter. Clicking the track moves the nearer thumb, and the thumbs
+ * keep `minDistance` apart.
+ *
+ * @example <RangeSlider name="price" label="Price per night" min={1000} max={30000} step={500} prefix="Rs " grouping />
+ */
+export function RangeSlider({ value, defaultValue, minDistance = 0, thumbLabels = ["minimum", "maximum"], validate, onValueChange, onValueCommit, ...props }) {
+    const base = pickBase(props);
+    const min = base.min ?? 0;
+    const max = base.max ?? 100;
+    const start = defaultValue ?? [min, max];
+    return (_jsx(SliderField, { ...base, range: true, values: value, defaultValues: [Math.min(start[0], start[1]), Math.max(start[0], start[1])], minDistance: minDistance, thumbLabels: thumbLabels, validate: validate && (values => validate([values[0], values[1]])), onValues: onValueChange && ((values, event) => onValueChange([values[0], values[1]], event)), onCommit: onValueCommit && (values => onValueCommit([values[0], values[1]])), inputProps: { "aria-label": props["aria-label"] } }));
+}
+const BASE_KEYS = [
+    "label", "hint", "error", "size", "min", "max", "step", "prefix", "suffix", "format", "showValue", "tooltip", "marks", "disabled", "readOnly", "readOnlyMessage",
+    "name", "id", "fieldName", "validateOn", "className", "style", "decimals", "fixedDecimals", "grouping", "locale",
+];
+function pickBase(props) {
+    const base = {};
+    for (const key of BASE_KEYS)
+        if (key in props)
+            base[key] = props[key];
+    return base;
+}
+function omitBase(props) {
+    const rest = { ...props };
+    for (const key of BASE_KEYS)
+        delete rest[key];
+    return rest;
+}
+function SliderField(props) {
+    const { label, hint, size = "md", min = 0, max = 100, step = 1, prefix, suffix, format, showValue = true, tooltip = false, marks, disabled = false, readOnly = false, name, fieldName, className, style, decimals, fixedDecimals, grouping, locale, range = false, values, defaultValues, minDistance = 0, thumbLabels = [], validate, onValues, onCommit, inputProps, inputClassName, } = props;
+    const { readOnlyMessage = range ? "Read-only: this range cannot be changed." : "Read-only: this value cannot be changed." } = props;
+    const span = max - min || 1;
+    const initial = (values ?? defaultValues).map(value => clampNumber(value, min, max));
+    const text = (value) => (format ? format(value) : `${prefix ?? ""}${formatNumber(value, { decimals, fixedDecimals, grouping, locale })}${suffix ?? ""}`);
+    const fraction = (value) => (clampNumber(value, min, max) - min) / span;
+    const controlRef = useRef(null);
+    const valueRef = useRef(null);
+    const tooltipRefs = useRef([]);
+    // The last values, so a read-only slider can put a moved thumb straight back.
+    const lastRef = useRef(initial);
+    const field = useChoiceField(props, {
+        check: inputs => validate?.(read(inputs)) || null,
+        checkKeys: [values?.join(), validate, min, max],
+        sync,
+    });
+    const read = (inputs) => inputs.map(input => Number(input.value));
+    // A read-only slider puts a moved thumb straight back: a lock after the label, and a note under the track, say why.
+    const readOnlyNotice = useReadOnlyNotice(readOnly && !disabled, field.containerRef, readOnlyMessage, {
+        anchor: target => target.closest(".nx-slider__control"),
+        typing: false,
+        keys: ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End"],
+        lock: "label",
+    });
+    /** Writes the fill, the shown value, the tooltips, and each thumb's spoken value straight to the DOM. */
+    function sync(inputs) {
+        const current = read(inputs);
+        const control = controlRef.current;
+        if (!control || current.length === 0)
+            return;
+        control.style.setProperty("--nx-slider-start", String(range ? fraction(current[0]) : 0));
+        control.style.setProperty("--nx-slider-end", String(fraction(current[current.length - 1])));
+        inputs.forEach((input, index) => {
+            const valueText = text(current[index]);
+            input.setAttribute("aria-valuetext", valueText);
+            const bubble = tooltipRefs.current[index];
+            if (bubble) {
+                bubble.textContent = valueText;
+                bubble.style.setProperty("--nx-slider-at", String(fraction(current[index])));
+            }
+        });
+        if (valueRef.current)
+            valueRef.current.textContent = current.map(text).join(" – ");
+        lastRef.current = current;
+    }
+    function handleChange(event) {
+        const input = event.target;
+        if (!(input instanceof HTMLInputElement) || !input.hasAttribute(OPTION_ATTRIBUTE))
+            return;
+        const index = Number(input.getAttribute(OPTION_ATTRIBUTE));
+        if (readOnly) {
+            input.value = String(lastRef.current[index]);
+            return;
+        }
+        const inputs = field.inputs();
+        if (range && inputs.length === 2) {
+            // The thumbs never cross, and keep minDistance apart.
+            const [start, end] = inputs;
+            if (index === 0 && Number(start.value) > Number(end.value) - minDistance)
+                start.value = String(Math.max(min, Number(end.value) - minDistance));
+            if (index === 1 && Number(end.value) < Number(start.value) + minDistance)
+                end.value = String(Math.min(max, Number(start.value) + minDistance));
+            controlRef.current?.setAttribute("data-active", String(index));
+        }
+        field.onChange();
+        onValues?.(read(inputs), event);
+    }
+    // A released thumb, or a finished key step, fires the native change event.
+    const commit = useEffectEvent(() => onCommit?.(read(field.inputs())));
+    useEffect(() => {
+        const control = controlRef.current;
+        if (!control)
+            return;
+        const onNativeChange = () => commit();
+        control.addEventListener("change", onNativeChange);
+        return () => control.removeEventListener("change", onNativeChange);
+    }, []);
+    /** The value under a pointer's x position, on the step grid. */
+    function valueAt(clientX) {
+        const control = controlRef.current;
+        const rect = control.getBoundingClientRect();
+        const thumb = parseFloat(getComputedStyle(control).getPropertyValue("--nx-slider-thumb")) || 16;
+        const position = clampNumber((clientX - rect.left - thumb / 2) / Math.max(1, rect.width - thumb), 0, 1);
+        const stepped = min + Math.round((position * span) / step) * step;
+        return clampNumber(roundDecimal(stepped, Math.max(countDecimals(step), countDecimals(min))), min, max);
+    }
+    /** Moves the thumb nearest to a value there, as a click on the track or on a mark does. */
+    function moveTo(value, focus = true) {
+        const input = nearestInput(value);
+        if (disabled || readOnly || !input)
+            return null;
+        if (focus)
+            input.focus();
+        setInputValue(input, String(value));
+        return input;
+    }
+    /** The thumb a press at a value would move: the only one, or the nearer of two. */
+    function nearestInput(value) {
+        const inputs = field.inputs();
+        if (inputs.length < 2)
+            return inputs[0];
+        const [start, end] = read(inputs);
+        return inputs[value <= start ? 0 : value >= end ? 1 : value - start <= end - value ? 0 : 1];
+    }
+    function commitInput(input) {
+        input.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+    function handleControlPointerDown(event) {
+        if (!readOnly) {
+            if (range)
+                handleTrackPointerDown(event);
+            return;
+        }
+        // A press on a range slider's track focuses the nearer thumb, as when editable, so focus stays in the slider
+        // and the note stays up.
+        if (range && event.button === 0 && !(event.target instanceof HTMLInputElement)) {
+            event.preventDefault();
+            nearestInput(valueAt(event.clientX))?.focus();
+        }
+        readOnlyNotice.show(event.currentTarget);
+    }
+    function handleBlur(event) {
+        if (leavesField(event))
+            readOnlyNotice.hide();
+        field.onBlur(event);
+    }
+    // A range slider's inputs only take pointer events on their thumbs, so a press on the track lands here.
+    function handleTrackPointerDown(event) {
+        if (event.button !== 0 || event.target instanceof HTMLInputElement)
+            return;
+        const input = moveTo(valueAt(event.clientX));
+        if (!input)
+            return;
+        event.preventDefault();
+        const control = event.currentTarget;
+        control.setPointerCapture(event.pointerId);
+        const move = (moveEvent) => setInputValue(input, String(valueAt(moveEvent.clientX)));
+        const end = () => {
+            control.removeEventListener("pointermove", move);
+            control.removeEventListener("lostpointercapture", end);
+            commitInput(input);
+        };
+        control.addEventListener("pointermove", move);
+        control.addEventListener("lostpointercapture", end);
+    }
+    const labelId = `${field.fieldId}-label`;
+    const inputId = (index) => (index === 0 ? field.fieldId : `${field.fieldId}-${index}`);
+    const describedBy = field.error || hint ? field.messageId : undefined;
+    const nameText = fieldName ?? (typeof label === "string" ? label : undefined);
+    const controlStyle = { "--nx-slider-start": range ? fraction(initial[0]) : 0, "--nx-slider-end": fraction(initial[initial.length - 1]) };
+    return (_jsxs("div", { ref: field.containerRef, role: range ? "group" : undefined, "aria-labelledby": range && hasContent(label) ? labelId : undefined, className: cx("nx-slider", `nx-slider--${size}`, range && "nx-slider--range", className), style: style, "data-invalid": field.error ? true : undefined, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, onChange: handleChange, onKeyDown: readOnlyNotice.onKeyDown, onBlur: handleBlur, children: [(hasContent(label) || showValue) && (_jsxs("div", { className: "nx-slider__head", children: [hasContent(label) &&
+                        (range ? (_jsxs("span", { id: labelId, className: "nx-field__label", children: [label, readOnlyNotice.lock] })) : (_jsxs("label", { id: labelId, htmlFor: field.fieldId, className: "nx-field__label", children: [label, readOnlyNotice.lock] }))), showValue && (_jsx("output", { ref: valueRef, className: "nx-slider__value", htmlFor: initial.map((_, index) => inputId(index)).join(" "), "aria-hidden": "true", children: initial.map(text).join(" – ") }))] })), _jsxs("div", { ref: controlRef, className: "nx-slider__control", style: controlStyle, onPointerDown: range || readOnly ? handleControlPointerDown : undefined, children: [_jsx("span", { className: "nx-slider__track", "aria-hidden": "true", children: _jsx("span", { className: "nx-slider__fill" }) }), initial.map((value, index) => (_jsxs(Fragment, { children: [_jsx("input", { ...(index === 0 ? inputProps : undefined), [OPTION_ATTRIBUTE]: index, id: inputId(index), type: "range", className: cx("nx-slider__input", inputClassName), name: name, min: min, max: max, step: step, value: values ? value : undefined, defaultValue: values ? undefined : value, disabled: disabled, "aria-label": range ? [nameText, thumbLabels[index]].filter(Boolean).join(" ") || undefined : inputProps["aria-label"], "aria-readonly": readOnly || undefined, "aria-invalid": field.error ? true : undefined, "aria-describedby": describedBy, "aria-valuetext": text(value), onInvalid: field.onInvalid, 
+                                // A controlled value changes through onValueChange; this silences React's missing-onChange warning.
+                                onChange: values ? noop : undefined }), tooltip && (_jsx("span", { ref: node => {
+                                    tooltipRefs.current[index] = node;
+                                }, className: "nx-slider__tooltip", style: { "--nx-slider-at": fraction(value) }, "aria-hidden": "true", children: text(value) }))] }, index)))] }), marks && marks.length > 0 && (_jsx("div", { className: "nx-slider__marks", "aria-hidden": "true", children: marks.map(mark => (_jsx("button", { type: "button", tabIndex: -1, className: "nx-slider__mark", style: { "--nx-slider-at": fraction(mark.value) }, "data-edge": mark.value <= min ? "start" : mark.value >= max ? "end" : undefined, disabled: disabled, onClick: () => {
+                        const input = moveTo(mark.value);
+                        if (input)
+                            commitInput(input);
+                        else
+                            readOnlyNotice.show(controlRef.current);
+                    }, children: mark.label ?? text(mark.value) }, mark.value))) })), _jsx(GroupFooter, { id: field.messageId, hint: hint, error: field.error }), readOnlyNotice.notice] }));
+}
+function noop() { }

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

@@ -0,0 +1,23 @@
+import type { RowValue, TabularFormProps } from "../../Interfaces/FormInterfaces.ts";
+/**
+ * Rows of inputs in a table, one column per input: a person's emails or addresses, invoice lines, a salary sheet. The
+ * value is an array of row objects, one value per input, with any other fields the rows came with (such as ids). Inputs
+ * come as params, the same objects a form takes, so the same list can show as sections in a `GroupForm`.
+ *
+ * Only the rows in view are on the page, so a sheet of thousands of rows opens and types as fast as a short one; the
+ * values live in a store outside React, and typing renders nothing. The header, the row numbers, and the remove buttons
+ * stay in place while the table scrolls. A row number opens the row's menu (insert, duplicate, move, remove). Enter in
+ * a text or number cell moves down the column, and on the last row adds a row.
+ *
+ * Inside a `<form>`, the rows are sent as JSON under `name`; a row with a problem blocks submit, and the first one
+ * scrolls into view with focus.
+ *
+ * @example
+ * <TabularForm name="emails" label="Emails" itemLabel="Email" max={5} unique={["email"]} inputs={[
+ *   { type: "email", name: "email", label: "Email", required: true, pattern: TEXT_PATTERNS.email },
+ *   { type: "dropdown", name: "type", label: "Type", options: EMAIL_TYPES },
+ *   { type: "checkbox", name: "isVerified", label: "Verified" },
+ *   { type: "radio", name: "isPrimary", label: "Primary", required: true },
+ * ]} />
+ */
+export declare function TabularForm<TRow extends RowValue = RowValue>(props: TabularFormProps<TRow>): import("react").JSX.Element;

package/dist/Components/Inputs/TabularForm.js

@@ -0,0 +1,283 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { iconArrowDown, iconArrowUp, iconCopy, iconDotsVertical, iconRowInsertBottom, iconRowInsertTop, iconTrash, iconX, InlineIcon } from "nexus-icons";
+import { memo, useCallback, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { Button } from "../Documents/Button.js";
+import { Menu } from "../Documents/Menu.js";
+import { firstFocusable, labelText, RowCell, rowName, RowsFooter, RowsLegend, useRowsFrame, useRowsInput, useRowVersion } from "./RowsInput.js";
+/** Height of a row: the input's box and the line under it. Measured from the first row once it renders. */
+const ROW_HEIGHT = { sm: 29, md: 35, lg: 41 };
+/** Rows rendered above and below the ones in view, so Tab and Enter always find the next row on the page. */
+const OVERSCAN = 8;
+const DEFAULT_MAX_HEIGHT = 440;
+/** A column's width by input type, when its params give none. */
+const COLUMN_WIDTH = {
+    text: "10rem",
+    email: "13rem",
+    password: "10rem",
+    search: "10rem",
+    tel: "9rem",
+    url: "13rem",
+    textarea: "14rem",
+    number: "7.5rem",
+    checkbox: "6rem",
+    switch: "6rem",
+    radio: "6rem",
+    "checkbox-group": "16rem",
+    "radio-group": "16rem",
+    dropdown: "10rem",
+    date: "10rem",
+    "date-range": "15rem",
+    time: "8rem",
+    "date-time": "14rem",
+    slider: "10rem",
+    "range-slider": "12rem",
+};
+/** Columns that keep their width instead of sharing the spare room. */
+const FIXED_TYPES = new Set(["checkbox", "switch", "radio"]);
+const ENTER_MOVES = new Set(["text", "email", "tel", "url", "search", "password", "number"]);
+const cssLength = (value) => (typeof value === "number" ? `${value}px` : value);
+/** How a cell lines up: numbers at the end, checkboxes and radios in the middle, the rest at the start. */
+function cellKind(params) {
+    if (params.type === "number")
+        return "number";
+    if (FIXED_TYPES.has(params.type))
+        return "check";
+    return "text";
+}
+function columnWidth(params) {
+    return cssLength(params.width ?? COLUMN_WIDTH[params.type] ?? "12rem");
+}
+/** One row of inputs. It renders again only when its position, its messages, or a value set from code change. */
+const TabularRow = memo(function TabularRow({ store, rowKey, index, count, columns, context, onAction }) {
+    useRowVersion(store, rowKey);
+    const name = rowName(store, index);
+    const title = `${store.names.title} ${index + 1}`;
+    const invalid = context.showAll && store.rowProblems(rowKey) > 0;
+    const items = [];
+    if (context.canAdd) {
+        items.push({ value: "insert-above", label: "Insert above", icon: _jsx(InlineIcon, { icon: iconRowInsertTop }) }, { value: "insert-below", label: "Insert below", icon: _jsx(InlineIcon, { icon: iconRowInsertBottom }) }, { value: "duplicate", label: "Duplicate", icon: _jsx(InlineIcon, { icon: iconCopy }) });
+    }
+    if (context.sortable) {
+        if (items.length)
+            items.push({ separator: true });
+        items.push({ value: "move-up", label: "Move up", icon: _jsx(InlineIcon, { icon: iconArrowUp }), disabled: index === 0 }, { value: "move-down", label: "Move down", icon: _jsx(InlineIcon, { icon: iconArrowDown }), disabled: index === count - 1 });
+    }
+    if (context.removable) {
+        if (items.length)
+            items.push({ separator: true });
+        items.push({ value: "remove", label: "Remove", icon: _jsx(InlineIcon, { icon: iconTrash }), tone: "danger" });
+    }
+    // Leaving an input counts as using it: a repeated value shows its message from then on.
+    function onBlur(event) {
+        const cell = event.target.closest("[data-nx-cell]");
+        if (!cell || (event.relatedTarget instanceof Node && cell.contains(event.relatedTarget)))
+            return;
+        store.touch(rowKey, cell.dataset.nxCell ?? "");
+    }
+    return (_jsxs("div", { role: "row", className: "nx-tabular__row", "aria-rowindex": index + 2, "data-nx-row": rowKey, "data-problem": invalid || undefined, onBlur: onBlur, children: [context.numbered && (_jsx("div", { role: "cell", className: "nx-tabular__num", children: items.length > (context.removable ? 1 : 0) ? (_jsx(Menu, { items: items, onSelect: value => onAction(value, rowKey), "aria-label": `${title} actions`, children: _jsxs("button", { type: "button", className: "nx-tabular__num-button", "aria-label": `${title} actions`, title: `${title} actions`, "data-nx-row-actions": "", children: [_jsx("span", { className: "nx-tabular__num-text", children: index + 1 }), _jsx(InlineIcon, { icon: iconDotsVertical, className: "nx-tabular__num-icon" })] }) })) : (_jsx("span", { className: "nx-tabular__num-text", children: index + 1 })) })), columns.map(params => (_jsx("div", { role: "cell", className: cx("nx-tabular__cell", `nx-tabular__cell--${cellKind(params)}`), "data-nx-cell": params.name, children: _jsx(RowCell, { store: store, rowKey: rowKey, params: params, index: index, error: store.shownError(rowKey, params.name), layout: "tabular", idPrefix: context.idPrefix, size: context.size, readOnly: context.readOnly, disabled: context.disabled }, store.revision(rowKey, params.name)) }, params.name))), context.removable && (_jsx("div", { role: "cell", className: "nx-tabular__end", children: _jsx(Button, { variant: "ghost", size: "sm", hoverTone: "danger", className: "nx-tabular__remove", icon: _jsx(InlineIcon, { icon: iconX }), "aria-label": `Remove ${name}`, title: `Remove ${name}`, onClick: () => onAction("remove", rowKey) }) }))] }));
+});
+/**
+ * Rows of inputs in a table, one column per input: a person's emails or addresses, invoice lines, a salary sheet. The
+ * value is an array of row objects, one value per input, with any other fields the rows came with (such as ids). Inputs
+ * come as params, the same objects a form takes, so the same list can show as sections in a `GroupForm`.
+ *
+ * Only the rows in view are on the page, so a sheet of thousands of rows opens and types as fast as a short one; the
+ * values live in a store outside React, and typing renders nothing. The header, the row numbers, and the remove buttons
+ * stay in place while the table scrolls. A row number opens the row's menu (insert, duplicate, move, remove). Enter in
+ * a text or number cell moves down the column, and on the last row adds a row.
+ *
+ * Inside a `<form>`, the rows are sent as JSON under `name`; a row with a problem blocks submit, and the first one
+ * scrolls into view with focus.
+ *
+ * @example
+ * <TabularForm name="emails" label="Emails" itemLabel="Email" max={5} unique={["email"]} inputs={[
+ *   { type: "email", name: "email", label: "Email", required: true, pattern: TEXT_PATTERNS.email },
+ *   { type: "dropdown", name: "type", label: "Type", options: EMAIL_TYPES },
+ *   { type: "checkbox", name: "isVerified", label: "Verified" },
+ *   { type: "radio", name: "isPrimary", label: "Primary", required: true },
+ * ]} />
+ */
+export function TabularForm(props) {
+    const { inputs, label, hint, error, size = "md", maxHeight = DEFAULT_MAX_HEIGHT, numbered = true, readOnly = false, disabled = false, required, max, className, style } = props;
+    const addable = props.addable !== false && !readOnly;
+    const removable = props.removable !== false && !readOnly && !disabled;
+    const sortable = Boolean(props.sortable) && !readOnly && !disabled;
+    const layoutRef = useRef(null);
+    const rows = useRowsInput(props, "Row", layoutRef);
+    const store = rows.store;
+    const { snapshot } = rows;
+    const frame = useRowsFrame(props, store);
+    const columns = useMemo(() => inputs.filter(params => !params.hidden), [inputs]);
+    const count = snapshot.keys.length;
+    const viewportRef = useRef(null);
+    const headRef = useRef(null);
+    const bodyRef = useRef(null);
+    const [rowHeight, setRowHeight] = useState(ROW_HEIGHT[size]);
+    const pageRows = Math.ceil((typeof maxHeight === "number" ? maxHeight : 600) / rowHeight);
+    const [range, setRange] = useState({ start: 0, end: pageRows + OVERSCAN });
+    const [status, setStatus] = useState(null);
+    const pendingRef = useRef(null);
+    const start = Math.min(range.start, count);
+    const end = Math.min(count, Math.max(range.end, start + 1));
+    const shownKeys = snapshot.keys.slice(start, end);
+    /** The rows in view, from the scroll position, and a margin around them. */
+    const updateRange = useCallback(() => {
+        const viewport = viewportRef.current;
+        if (!viewport)
+            return;
+        const head = headRef.current?.offsetHeight ?? 0;
+        const top = Math.max(0, viewport.scrollTop - head);
+        const first = Math.max(0, Math.floor(top / rowHeight) - OVERSCAN);
+        const last = Math.ceil((top + Math.max(viewport.clientHeight - head, rowHeight)) / rowHeight) + OVERSCAN;
+        // Focus in a row that is about to leave the page moves to the table, so the keyboard keeps its place.
+        const active = document.activeElement;
+        const activeRow = active instanceof Element ? active.closest("[data-nx-row]") : null;
+        if (activeRow && bodyRef.current?.contains(activeRow)) {
+            const index = store.indexOf(activeRow.dataset.nxRow ?? "");
+            if (index >= 0 && (index < first || index >= last))
+                viewport.focus({ preventScroll: true });
+        }
+        setRange(current => (current.start === first && current.end === last ? current : { start: first, end: last }));
+    }, [rowHeight, store]);
+    // The real row height, once a row is on the page (custom styles may change it).
+    useLayoutEffect(() => {
+        const row = bodyRef.current?.querySelector(":scope > .nx-tabular__row");
+        const height = row?.offsetHeight;
+        if (height && height !== rowHeight)
+            setRowHeight(height);
+    });
+    // A resize, a new row height, or fewer rows change which rows are in view.
+    useLayoutEffect(() => {
+        const viewport = viewportRef.current;
+        if (!viewport)
+            return;
+        updateRange();
+        const observer = new ResizeObserver(updateRange);
+        observer.observe(viewport);
+        return () => observer.disconnect();
+    }, [updateRange, count]);
+    function tryFocus() {
+        const pending = pendingRef.current;
+        const body = bodyRef.current;
+        if (!pending || !body)
+            return;
+        const row = body.querySelector(`:scope > [data-nx-row="${CSS.escape(pending.key)}"]`);
+        if (!row)
+            return;
+        pendingRef.current = null;
+        const { target } = pending;
+        let element;
+        if (typeof target === "string")
+            element = firstFocusable(row.querySelector(`[data-nx-cell="${CSS.escape(target)}"]`));
+        else if ("actions" in target)
+            element = row.querySelector("[data-nx-row-actions]") ?? firstFocusable(row);
+        else
+            element = firstFocusable(row.querySelector("[data-nx-cell]")) ?? firstFocusable(row);
+        element?.focus();
+    }
+    layoutRef.current = {
+        focusRow(key, target) {
+            const index = store.indexOf(key);
+            const viewport = viewportRef.current;
+            if (index < 0 || !viewport)
+                return;
+            pendingRef.current = { key, target };
+            // Scroll the row into view below the header, and render the rows around it before the scroll event comes.
+            const head = headRef.current?.offsetHeight ?? 0;
+            const top = index * rowHeight;
+            if (top < viewport.scrollTop)
+                viewport.scrollTop = top;
+            else if (head + top + rowHeight > viewport.scrollTop + viewport.clientHeight)
+                viewport.scrollTop = head + top + rowHeight - viewport.clientHeight;
+            setRange(current => (index >= current.start && index < current.end ? current : { start: Math.max(0, index - OVERSCAN), end: index + pageRows + OVERSCAN }));
+            // After the render that brings the row (a layout effect), or in the next frame when nothing renders.
+            requestAnimationFrame(tryFocus);
+        },
+    };
+    useLayoutEffect(tryFocus);
+    const actionsRef = useRef(rows.actions);
+    actionsRef.current = rows.actions;
+    const onAction = useCallback((action, key) => {
+        const index = store.indexOf(key);
+        const run = actionsRef.current;
+        if (action === "insert-above")
+            run.add(undefined, index);
+        else if (action === "insert-below")
+            run.add(undefined, index + 1);
+        else if (action === "duplicate")
+            run.duplicate(key);
+        else if (action === "move-up")
+            run.move(key, -1);
+        else if (action === "move-down")
+            run.move(key, 1);
+        else
+            run.remove(key);
+    }, [store]);
+    /** The message or hint of the input with focus, shown under the table: cells have no room for their own. */
+    function readStatus() {
+        const active = document.activeElement;
+        const cell = active instanceof Element ? active.closest("[data-nx-cell]") : null;
+        const row = cell?.closest("[data-nx-row]");
+        let next = null;
+        if (cell && row && bodyRef.current?.contains(cell)) {
+            const message = cell.querySelector(".nx-field__message");
+            const text = message?.textContent?.trim() ?? "";
+            const isError = Boolean(message?.classList.contains("nx-field__message--error"));
+            const params = columns.find(item => item.name === cell.dataset.nxCell);
+            if (text)
+                next = { text: isError ? `${store.names.title} ${store.indexOf(row.dataset.nxRow ?? "") + 1}: ${text}` : `${params ? labelText(params) : ""}: ${text}`, error: isError };
+        }
+        setStatus(current => (current?.text === next?.text && current?.error === next?.error ? current : next));
+    }
+    const readStatusSoon = () => requestAnimationFrame(readStatus);
+    useLayoutEffect(() => {
+        if (status)
+            readStatus();
+    });
+    /** Enter moves down the column, Shift+Enter up; on the last row Enter adds a row. */
+    function onBodyKeyDown(event) {
+        if (event.key !== "Enter" || event.altKey || event.ctrlKey || event.metaKey || event.nativeEvent.isComposing)
+            return;
+        const target = event.target;
+        if (!(target instanceof HTMLInputElement) || !ENTER_MOVES.has(target.type) || target.hasAttribute("aria-haspopup") || target.getAttribute("role") === "combobox")
+            return;
+        const cell = target.closest("[data-nx-cell]");
+        const row = target.closest("[data-nx-row]");
+        if (!cell || !row)
+            return;
+        event.preventDefault();
+        const name = cell.dataset.nxCell ?? "";
+        const index = store.indexOf(row.dataset.nxRow ?? "") + (event.shiftKey ? -1 : 1);
+        if (index < 0)
+            return;
+        const next = store.keyAt(index);
+        if (next)
+            layoutRef.current?.focusRow(next, name);
+        else if (!event.shiftKey && rows.canAdd) {
+            const key = store.add();
+            layoutRef.current?.focusRow(key, name);
+        }
+    }
+    const context = useMemo(() => ({ idPrefix: frame.id, size, readOnly, disabled, numbered, removable, sortable, canAdd: rows.canAdd, showAll: snapshot.showAll }), [frame.id, size, readOnly, disabled, numbered, removable, sortable, rows.canAdd, snapshot.showAll]);
+    const numberWidth = `calc(${Math.max(2, String(count).length)}ch + 24px)`;
+    const widths = columns.map(columnWidth);
+    const template = [
+        numbered ? numberWidth : null,
+        ...columns.map((params, index) => {
+            const grow = params.grow ?? (FIXED_TYPES.has(params.type) ? 0 : 1);
+            return grow > 0 ? `minmax(${widths[index]}, ${grow}fr)` : widths[index];
+        }),
+        removable ? "var(--nx-tabular-end)" : null,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const minWidth = `calc(${[numbered ? numberWidth : "0px", ...widths, removable ? "var(--nx-tabular-end)" : "0px"].join(" + ")})`;
+    const tableStyle = { "--nx-tabular-columns": template, minWidth };
+    const invalid = Boolean(error || snapshot.message || snapshot.invalidRows);
+    return (_jsxs("fieldset", { id: frame.id, className: cx("nx-rows", "nx-tabular", `nx-tabular--${size}`, className), style: style, disabled: disabled, "data-problem": invalid || undefined, "data-readonly": readOnly || undefined, "aria-label": props["aria-label"], "aria-describedby": frame.messageId, children: [_jsx(RowsLegend, { id: frame.legendId, label: label, required: required || (props.min ?? 0) > 0, lock: frame.lock }), _jsx("input", { ref: rows.proxyRef, className: "nx-visually-hidden", tabIndex: -1, "aria-hidden": "true", form: props.form, onInvalid: rows.onInvalid }), _jsx("div", { ref: viewportRef, className: "nx-tabular__viewport", tabIndex: -1, style: { maxHeight: cssLength(maxHeight) }, onScroll: updateRange, children: _jsxs("div", { role: "table", className: "nx-tabular__table", style: tableStyle, "aria-labelledby": label ? frame.legendId : undefined, "aria-label": label ? undefined : props["aria-label"], "aria-rowcount": count + 1, children: [_jsx("div", { ref: headRef, role: "rowgroup", className: "nx-tabular__head", children: _jsxs("div", { role: "row", className: "nx-tabular__row", "aria-rowindex": 1, children: [numbered && (_jsxs("div", { role: "columnheader", className: "nx-tabular__num", children: [_jsx("span", { "aria-hidden": "true", children: "#" }), _jsx("span", { className: "nx-visually-hidden", children: store.names.title })] })), columns.map(params => {
+                                        const columnHint = params.hint;
+                                        return (_jsxs("div", { role: "columnheader", className: cx("nx-tabular__head-cell", `nx-tabular__cell--${cellKind(params)}`), title: typeof columnHint === "string" ? columnHint : undefined, children: [_jsx("span", { className: "nx-tabular__head-label", children: params.label ?? params.name }), params.required && (_jsx("span", { className: "nx-field__required", "aria-hidden": "true", children: "*" }))] }, params.name));
+                                    }), removable && (_jsx("div", { role: "columnheader", className: "nx-tabular__end", children: _jsx("span", { className: "nx-visually-hidden", children: "Remove" }) }))] }) }), _jsx("div", { ref: bodyRef, role: "rowgroup", className: "nx-tabular__body", style: { paddingTop: start * rowHeight, paddingBottom: Math.max(0, count - end) * rowHeight }, onKeyDown: onBodyKeyDown, onFocus: readStatus, onBlur: readStatusSoon, onInput: readStatusSoon, children: count === 0 ? (_jsx("div", { role: "row", className: "nx-tabular__row nx-tabular__row--empty", children: _jsx("div", { role: "cell", className: "nx-tabular__empty", children: frame.emptyMessage }) })) : (shownKeys.map((key, offset) => (_jsx(TabularRow, { store: store, rowKey: key, index: start + offset, count: count, columns: columns, context: context, onAction: onAction }, `${snapshot.generation}:${key}`)))) })] }) }), _jsx(RowsFooter, { messageId: frame.messageId, store: store, snapshot: snapshot, error: error, hint: hint, status: status, addLabel: frame.addLabel, addable: addable, canAdd: rows.canAdd, max: max, maxMessage: frame.maxMessage, size: size, onAdd: () => rows.actions.add(), onUndo: () => rows.actions.undo() })] }));
+}