@nsail/ui 0.1.981 → 0.1.984

package/dist/dialog.js

@@ -9,8 +9,17 @@ const DialogContext = createContext(null);
 export function NsDialogHost({ children }) {
     const [pending, setPending] = useState(null);
     const dialog = useRef(null);
+    const open = useRef(null);
+    // A confirmation asked while another is open ends the first as declined: no caller waits forever.
     const confirm = useCallback((text, danger = false) => {
-        return new Promise((resolve) => setPending({ text, danger, resolve }));
+        return new Promise((resolve) => {
+            open.current?.resolve(false);
+            open.current = { text, danger, resolve };
+            setPending(open.current);
+        });
+    }, []);
+    useEffect(() => {
+        return () => open.current?.resolve(false);
     }, []);
     useEffect(() => {
         if (!pending || !dialog.current) {
@@ -34,7 +43,8 @@ export function NsDialogHost({ children }) {
         (pending.danger ? wayOut : act).focus();
     }, [pending]);
     function close(confirmed) {
-        pending?.resolve(confirmed);
+        open.current?.resolve(confirmed);
+        open.current = null;
         dialog.current?.close();
         setPending(null);
     }

package/dist/field.js

@@ -25,6 +25,9 @@ export function NsField({ name, multiline = false, autoFocus, label }) {
     }
     function number(event) {
         const raw = event.target.value;
+        if (raw !== "" && field.kind === "integer" && !Number.isInteger(Number(raw))) {
+            return;
+        }
         set(raw === "" ? (field.nullable ? null : undefined) : Number(raw));
     }
     // An emptied exact number is absent, as a number is: "" is no long the server reads.

package/dist/format.d.ts

@@ -1,3 +1,7 @@
 import type { Field, Strings } from "@nsail/stack";
+export interface DisplayOptions {
+    /** False renders a number without digit grouping. */
+    grouped?: boolean;
+}
 /** A wire value as a person reads it: the member's kind decides, the language formats. */
-export declare function display(strings: Strings, field: Field, value: unknown): string;
+export declare function display(strings: Strings, field: Field, value: unknown, options?: DisplayOptions): string;

package/dist/format.js

@@ -3,7 +3,9 @@
 const whole = /^-?\d+$/;
 const fixed = /^-?\d*(\.\d+)?$/;
 /** A wire value as a person reads it: the member's kind decides, the language formats. */
-export function display(strings, field, value) {
+export function display(strings, field, value, options) {
+    // Omitted, not true: true forces grouping of four digits, which the language's own default does not.
+    const useGrouping = options?.grouped === false ? false : undefined;
     if (value === null || value === undefined || value === "") {
         return "";
     }
@@ -21,24 +23,24 @@ export function display(strings, field, value) {
             return new Date(String(value)).toLocaleString(strings.language, { dateStyle: "short", timeStyle: "short" });
         // A value that is not the wire's text (a Number a product still writes) shows as a figure.
         case "bigint":
-            return whole.test(String(value)) ? BigInt(String(value)).toLocaleString(strings.language) : Number(value).toLocaleString(strings.language);
+            return whole.test(String(value)) ? BigInt(String(value)).toLocaleString(strings.language, { useGrouping }) : Number(value).toLocaleString(strings.language, { useGrouping });
         case "decimal":
-            return fixed.test(String(value)) ? decimal(strings.language, String(value)) : Number(value).toLocaleString(strings.language);
+            return fixed.test(String(value)) ? decimal(strings.language, String(value), useGrouping) : Number(value).toLocaleString(strings.language, { useGrouping });
         case "integer":
         case "number":
-            return Number(value).toLocaleString(strings.language);
+            return Number(value).toLocaleString(strings.language, { useGrouping });
         default:
             return String(value);
     }
 }
 // A decimal carries up to 28 fraction digits and Intl stops at 20 (and reads a string as a
 // Number before Intl V3): the whole part is grouped as a BigInt and the fraction kept as sent.
-function decimal(language, text) {
+function decimal(language, text, useGrouping) {
     const negative = text.startsWith("-");
     const [whole, fraction] = (negative ? text.slice(1) : text).split(".");
     const parts = new Intl.NumberFormat(language).formatToParts(-0.5);
     const point = parts.find((part) => part.type === "decimal")?.value ?? ".";
     const minus = parts.find((part) => part.type === "minusSign")?.value ?? "-";
-    const grouped = BigInt(whole === "" ? "0" : whole).toLocaleString(language);
+    const grouped = BigInt(whole === "" ? "0" : whole).toLocaleString(language, { useGrouping });
     return `${negative ? minus : ""}${grouped}${fraction ? `${point}${fraction}` : ""}`;
 }

package/dist/search.js

@@ -7,6 +7,9 @@ import { useStrings } from "@nsail/stack";
 export function NsSearch({ field, value, onSearch, delay = 300 }) {
     const strings = useStrings();
     const [term, setTerm] = useState(value ?? "");
+    useEffect(() => {
+        setTerm((current) => (current.trim() === (value ?? "") ? current : (value ?? "")));
+    }, [value]);
     useEffect(() => {
         const trimmed = term.trim();
         if (trimmed === (value ?? "")) {

package/dist/select.js

@@ -10,5 +10,5 @@ export function NsEnumSelect({ field, value, onChange, none = "Common.All" }) {
         throw new Error(`${field.key} is not an enum member.`);
     }
     const type = field.enum;
-    return (_jsxs("select", { className: "ns-select", "aria-label": strings.translate(field.key), value: value ?? "", onChange: (event) => onChange((event.target.value || null)), children: [field.nullable && _jsx("option", { value: "", children: strings.translate(none) }), type.values.map((option) => (_jsx("option", { value: option, children: strings.enumValue(type, option) }, option)))] }));
+    return (_jsxs("select", { className: "ns-select", "aria-label": strings.translate(field.key), value: value ?? "", onChange: (event) => onChange((event.target.value || null)), children: [(field.nullable || value === null || value === undefined) && (_jsx("option", { value: "", children: field.nullable ? strings.translate(none) : "" })), type.values.map((option) => (_jsx("option", { value: option, children: strings.enumValue(type, option) }, option)))] }));
 }

package/dist/table.d.ts

@@ -9,6 +9,8 @@ export interface NsTableProps<T> {
     actions?: (row: T) => ReactNode;
     /** A string key: what an empty answer says. */
     empty?: string;
+    /** Columns shown without digit grouping: a number that names something (a voucher), not a quantity. */
+    ungrouped?: readonly (keyof T & string)[];
 }
 /** Rows of a projection: each header is the member's key, each cell its value formatted by kind. */
-export declare function NsTable<T>({ model, rows, columns, rowKey, onRowClick, actions, empty }: NsTableProps<T>): import("react").JSX.Element;
+export declare function NsTable<T>({ model, rows, columns, rowKey, onRowClick, actions, empty, ungrouped }: NsTableProps<T>): import("react").JSX.Element;

package/dist/table.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memberOf, useStrings } from "@nsail/stack";
 import { display } from "./format";
 /** Rows of a projection: each header is the member's key, each cell its value formatted by kind. */
-export function NsTable({ model, rows, columns, rowKey, onRowClick, actions, empty = "Common.NoRecords" }) {
+export function NsTable({ model, rows, columns, rowKey, onRowClick, actions, empty = "Common.NoRecords", ungrouped }) {
     const strings = useStrings();
     if (rows.length === 0) {
         return _jsx("div", { className: "ns-empty", children: strings.translate(empty) });
@@ -10,8 +10,15 @@ export function NsTable({ model, rows, columns, rowKey, onRowClick, actions, emp
     return (_jsx("div", { className: "ns-table-scroll", children: _jsxs("table", { className: "ns-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [columns.map((column) => {
                                 const field = model.fields[column];
                                 return (_jsx("th", { className: `ns-col-${field.kind}`, children: strings.translate(field.key, memberOf(field)) }, column));
-                            }), actions && _jsx("th", { className: "ns-col-actions" })] }) }), _jsx("tbody", { children: rows.map((row) => (_jsxs("tr", { className: onRowClick ? "ns-clickable" : undefined, onClick: onRowClick ? () => onRowClick(row) : undefined, children: [columns.map((column) => {
+                            }), actions && _jsx("th", { className: "ns-col-actions" })] }) }), _jsx("tbody", { children: rows.map((row) => (_jsxs("tr", { className: onRowClick ? "ns-clickable" : undefined, tabIndex: onRowClick ? 0 : undefined, onClick: onRowClick ? () => onRowClick(row) : undefined, onKeyDown: onRowClick
+                            ? (event) => {
+                                if (event.target === event.currentTarget && (event.key === "Enter" || event.key === " ")) {
+                                    event.preventDefault();
+                                    onRowClick(row);
+                                }
+                            }
+                            : undefined, children: [columns.map((column) => {
                                 const field = model.fields[column];
-                                return (_jsx("td", { className: `ns-col-${field.kind}`, children: display(strings, field, row[column]) }, column));
+                                return (_jsx("td", { className: `ns-col-${field.kind}`, children: display(strings, field, row[column], { grouped: !ungrouped?.includes(column) }) }, column));
                             }), actions && (_jsx("td", { className: "ns-col-actions", onClick: (event) => event.stopPropagation(), children: actions(row) }))] }, String(row[rowKey])))) })] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nsail/ui",
-  "version": "0.1.981",
+  "version": "0.1.984",
   "description": "The Ns* components for a React client, drawn from the descriptors an Sdk generates.",
   "license": "MIT",
   "repository": {
@@ -35,7 +35,7 @@
     "react-dom": ">=19"
   },
   "dependencies": {
-    "@nsail/stack": "0.1.981"
+    "@nsail/stack": "0.1.984"
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json && node -e \"require('fs').copyFileSync('src/ns.css', 'dist/ns.css')\"",