@panneau/fields 5.0.0-alpha.15 → 5.0.0-alpha.17

package/dist/money/MoneyField.js

@@ -0,0 +1,269 @@
+import { getFieldProps, getRuleNumber, getSetting, isString } from "../shared/entry.js";
+import { messages } from "../shared/messages.js";
+import { CURRENCY_CODES, getCurrencyName, getMoneyFormatOptions, isMoneyValue, toMoneyValue } from "./money.js";
+import { c } from "react/compiler-runtime";
+import { fromMinorUnits } from "@panneau/protocol/runtime";
+import { useState } from "react";
+import { NumberInput, Select, usePanneauIntl } from "@panneau/ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/money/MoneyField.tsx
+/**
+* An amount and its currency, `{ amount, currency }`, with the amount in minor units (decision
+* 0053): typed in the currency format of the locale, with the digits of the currency, and turned
+* into minor units without floating point errors. A fixed `currency` shows in the amount; otherwise
+* a menu after the amount picks it. Clearing the amount gives `null`.
+*/
+function MoneyField(t0) {
+	const $ = c(54);
+	let currencies;
+	let disabled;
+	let fixed;
+	let max;
+	let min;
+	let onChange;
+	let props;
+	let readOnly;
+	let required;
+	let value;
+	if ($[0] !== t0) {
+		({value, onChange, currency: fixed, currencies, min, max, disabled, readOnly, required, ...props} = t0);
+		$[0] = t0;
+		$[1] = currencies;
+		$[2] = disabled;
+		$[3] = fixed;
+		$[4] = max;
+		$[5] = min;
+		$[6] = onChange;
+		$[7] = props;
+		$[8] = readOnly;
+		$[9] = required;
+		$[10] = value;
+	} else {
+		currencies = $[1];
+		disabled = $[2];
+		fixed = $[3];
+		max = $[4];
+		min = $[5];
+		onChange = $[6];
+		props = $[7];
+		readOnly = $[8];
+		required = $[9];
+		value = $[10];
+	}
+	const intl = usePanneauIntl();
+	const [picked, setPicked] = useState(null);
+	const current = isMoneyValue(value) ? value : null;
+	let t1;
+	if ($[11] !== currencies || $[12] !== fixed) {
+		t1 = fixed !== void 0 && fixed !== null ? [] : currencies !== void 0 && currencies !== null && currencies.length > 0 ? currencies : CURRENCY_CODES;
+		$[11] = currencies;
+		$[12] = fixed;
+		$[13] = t1;
+	} else t1 = $[13];
+	const choices = t1;
+	const currency = fixed ?? (current !== null ? current.currency : picked ?? currencies?.[0] ?? null);
+	const hasMenu = choices.length > 0;
+	let t2;
+	if ($[14] !== currency) {
+		t2 = (amount) => fromMinorUnits(amount, currency ?? "");
+		$[14] = currency;
+		$[15] = t2;
+	} else t2 = $[15];
+	const toMajor = t2;
+	let t3;
+	if ($[16] !== choices || $[17] !== currency || $[18] !== current || $[19] !== disabled || $[20] !== hasMenu || $[21] !== intl || $[22] !== onChange || $[23] !== readOnly || $[24] !== toMajor) {
+		t3 = hasMenu ? /* @__PURE__ */ jsx(Select, {
+			"aria-label": intl.formatMessage(messages.moneyCurrency),
+			appearance: "bare",
+			isRequired: true,
+			isDisabled: disabled === true || readOnly === true,
+			placeholder: intl.formatMessage(messages.moneyCurrency),
+			options: choices.map((code) => ({
+				value: code,
+				label: `${code} – ${getCurrencyName(code, intl.locale)}`
+			})),
+			value: currency,
+			renderValue: _temp,
+			onChange: (next) => {
+				const code_0 = next !== null ? String(next) : null;
+				setPicked(code_0);
+				if (current !== null) onChange?.(toMoneyValue(toMajor(current.amount), code_0));
+			}
+		}) : void 0;
+		$[16] = choices;
+		$[17] = currency;
+		$[18] = current;
+		$[19] = disabled;
+		$[20] = hasMenu;
+		$[21] = intl;
+		$[22] = onChange;
+		$[23] = readOnly;
+		$[24] = toMajor;
+		$[25] = t3;
+	} else t3 = $[25];
+	const menu = t3;
+	let t4;
+	if ($[26] !== current || $[27] !== toMajor) {
+		t4 = current !== null ? toMajor(current.amount) : null;
+		$[26] = current;
+		$[27] = toMajor;
+		$[28] = t4;
+	} else t4 = $[28];
+	let t5;
+	if ($[29] !== currency || $[30] !== onChange) {
+		t5 = (next_0) => onChange?.(next_0 === null ? null : toMoneyValue(next_0, currency));
+		$[29] = currency;
+		$[30] = onChange;
+		$[31] = t5;
+	} else t5 = $[31];
+	const t6 = hasMenu ? "narrowSymbol" : "symbol";
+	let t7;
+	if ($[32] !== currency || $[33] !== t6) {
+		t7 = getMoneyFormatOptions(currency, t6);
+		$[32] = currency;
+		$[33] = t6;
+		$[34] = t7;
+	} else t7 = $[34];
+	let t8;
+	if ($[35] !== min || $[36] !== toMajor) {
+		t8 = min !== void 0 ? { minValue: toMajor(min) } : {};
+		$[35] = min;
+		$[36] = toMajor;
+		$[37] = t8;
+	} else t8 = $[37];
+	let t9;
+	if ($[38] !== max || $[39] !== toMajor) {
+		t9 = max !== void 0 ? { maxValue: toMajor(max) } : {};
+		$[38] = max;
+		$[39] = toMajor;
+		$[40] = t9;
+	} else t9 = $[40];
+	let t10;
+	if ($[41] !== menu) {
+		t10 = menu !== void 0 ? { suffix: menu } : {};
+		$[41] = menu;
+		$[42] = t10;
+	} else t10 = $[42];
+	let t11;
+	if ($[43] !== disabled || $[44] !== props || $[45] !== readOnly || $[46] !== required || $[47] !== t10 || $[48] !== t4 || $[49] !== t5 || $[50] !== t7 || $[51] !== t8 || $[52] !== t9) {
+		t11 = /* @__PURE__ */ jsx(NumberInput, {
+			...props,
+			value: t4,
+			onChange: t5,
+			formatOptions: t7,
+			...t8,
+			...t9,
+			...t10,
+			isDisabled: disabled,
+			isReadOnly: readOnly,
+			isRequired: required
+		});
+		$[43] = disabled;
+		$[44] = props;
+		$[45] = readOnly;
+		$[46] = required;
+		$[47] = t10;
+		$[48] = t4;
+		$[49] = t5;
+		$[50] = t7;
+		$[51] = t8;
+		$[52] = t9;
+		$[53] = t11;
+	} else t11 = $[53];
+	return t11;
+}
+/** The `money` type: settings `currency` and `currencies`, `min` and `max` from its rules. */
+function _temp(option) {
+	return String(option.value);
+}
+function MoneyFieldEntry(props) {
+	const $ = c(26);
+	const { field } = props;
+	let t0;
+	if ($[0] !== field) {
+		t0 = getRuleNumber(field, "min");
+		$[0] = field;
+		$[1] = t0;
+	} else t0 = $[1];
+	const min = t0;
+	let t1;
+	if ($[2] !== field) {
+		t1 = getRuleNumber(field, "max");
+		$[2] = field;
+		$[3] = t1;
+	} else t1 = $[3];
+	const max = t1;
+	let t2;
+	if ($[4] !== field) {
+		t2 = getSetting(field, "currency", isString);
+		$[4] = field;
+		$[5] = t2;
+	} else t2 = $[5];
+	const currency = t2;
+	let t3;
+	if ($[6] !== field) {
+		t3 = getSetting(field, "currencies", _temp2);
+		$[6] = field;
+		$[7] = t3;
+	} else t3 = $[7];
+	const currencies = t3;
+	let t4;
+	if ($[8] !== props) {
+		t4 = getFieldProps(props);
+		$[8] = props;
+		$[9] = t4;
+	} else t4 = $[9];
+	const t5 = isMoneyValue(props.value) ? props.value : null;
+	let t6;
+	if ($[10] !== currency) {
+		t6 = currency !== void 0 ? { currency } : {};
+		$[10] = currency;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== currencies) {
+		t7 = currencies !== void 0 ? { currencies } : {};
+		$[12] = currencies;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== min) {
+		t8 = min !== void 0 ? { min } : {};
+		$[14] = min;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== max) {
+		t9 = max !== void 0 ? { max } : {};
+		$[16] = max;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] !== props.onChange || $[19] !== t4 || $[20] !== t5 || $[21] !== t6 || $[22] !== t7 || $[23] !== t8 || $[24] !== t9) {
+		t10 = /* @__PURE__ */ jsx(MoneyField, {
+			...t4,
+			value: t5,
+			onChange: props.onChange,
+			...t6,
+			...t7,
+			...t8,
+			...t9
+		});
+		$[18] = props.onChange;
+		$[19] = t4;
+		$[20] = t5;
+		$[21] = t6;
+		$[22] = t7;
+		$[23] = t8;
+		$[24] = t9;
+		$[25] = t10;
+	} else t10 = $[25];
+	return t10;
+}
+function _temp2(value) {
+	return Array.isArray(value) ? value.every(isString) : false;
+}
+//#endregion
+export { MoneyField, MoneyFieldEntry };
+
+//# sourceMappingURL=MoneyField.js.map

package/dist/money/MoneyField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MoneyField.js","names":["useState","fromMinorUnits","NumberInput","Select","usePanneauIntl","getFieldProps","getRuleNumber","getSetting","isString","messages","FieldEntryProps","FieldProps","CURRENCY_CODES","MoneyFieldValue","getCurrencyName","getMoneyFormatOptions","isMoneyValue","toMoneyValue","MoneyFieldProps","currency","currencies","min","max","placeholder","controlClassName","inputClassName","MoneyField","t0","$","_c","disabled","fixed","onChange","props","readOnly","required","value","intl","picked","setPicked","current","t1","undefined","length","choices","hasMenu","t2","amount","toMajor","t3","formatMessage","moneyCurrency","map","code","label","locale","_temp","next","code_0","String","menu","t4","t5","next_0","t6","t7","t8","minValue","t9","maxValue","t10","suffix","t11","option","MoneyFieldEntry","field","_temp2","Array","isArray","every","_c"],"sources":["../../src/money/MoneyField.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { fromMinorUnits } from '@panneau/protocol/runtime';\nimport { NumberInput, Select, usePanneauIntl } from '@panneau/ui';\n\nimport { getFieldProps, getRuleNumber, getSetting, isString } from '../shared/entry';\nimport { messages } from '../shared/messages';\nimport type { FieldEntryProps, FieldProps } from '../shared/types';\nimport {\n    CURRENCY_CODES,\n    type MoneyFieldValue,\n    getCurrencyName,\n    getMoneyFormatOptions,\n    isMoneyValue,\n    toMoneyValue,\n} from './money';\n\nexport interface MoneyFieldProps extends FieldProps<MoneyFieldValue> {\n    /** The currency of every amount (`CAD`): the field shows it, and can't change it. */\n    currency?: string | null;\n    /**\n     * The currencies the user picks from, the first one for a new amount. Without `currency` or\n     * `currencies`, every currency.\n     */\n    currencies?: readonly string[] | null;\n    /** The smallest amount, in minor units. */\n    min?: number;\n    /** The largest amount, in minor units. */\n    max?: number;\n    placeholder?: string;\n    controlClassName?: string;\n    inputClassName?: string;\n}\n\n/**\n * An amount and its currency, `{ amount, currency }`, with the amount in minor units (decision\n * 0053): typed in the currency format of the locale, with the digits of the currency, and turned\n * into minor units without floating point errors. A fixed `currency` shows in the amount; otherwise\n * a menu after the amount picks it. Clearing the amount gives `null`.\n */\nexport function MoneyField({\n    value,\n    onChange,\n    currency: fixed,\n    currencies,\n    min,\n    max,\n    disabled,\n    readOnly,\n    required,\n    ...props\n}: MoneyFieldProps) {\n    const intl = usePanneauIntl();\n    // The currency picked before an amount is typed: the value is still `null`.\n    const [picked, setPicked] = useState<string | null>(null);\n    const current = isMoneyValue(value) ? value : null;\n    const choices =\n        fixed !== undefined && fixed !== null\n            ? []\n            : currencies !== undefined && currencies !== null && currencies.length > 0\n              ? currencies\n              : CURRENCY_CODES;\n    const currency =\n        fixed ?? (current !== null ? current.currency : (picked ?? currencies?.[0] ?? null));\n    const hasMenu = choices.length > 0;\n    const toMajor = (amount: number) => fromMinorUnits(amount, currency ?? '');\n\n    const menu = hasMenu ? (\n        <Select\n            aria-label={intl.formatMessage(messages.moneyCurrency)}\n            appearance=\"bare\"\n            isRequired\n            isDisabled={disabled === true || readOnly === true}\n            placeholder={intl.formatMessage(messages.moneyCurrency)}\n            options={choices.map((code) => ({\n                value: code,\n                label: `${code} – ${getCurrencyName(code, intl.locale)}`,\n            }))}\n            value={currency}\n            renderValue={(option) => String(option.value)}\n            onChange={(next) => {\n                const code = next !== null ? String(next) : null;\n                setPicked(code);\n                if (current !== null) {\n                    // The same amount, in the digits of the currency picked.\n                    onChange?.(toMoneyValue(toMajor(current.amount), code));\n                }\n            }}\n        />\n    ) : undefined;\n\n    return (\n        <NumberInput\n            {...props}\n            value={current !== null ? toMajor(current.amount) : null}\n            onChange={(next) => onChange?.(next === null ? null : toMoneyValue(next, currency))}\n            formatOptions={getMoneyFormatOptions(currency, hasMenu ? 'narrowSymbol' : 'symbol')}\n            {...(min !== undefined ? { minValue: toMajor(min) } : {})}\n            {...(max !== undefined ? { maxValue: toMajor(max) } : {})}\n            {...(menu !== undefined ? { suffix: menu } : {})}\n            isDisabled={disabled}\n            isReadOnly={readOnly}\n            isRequired={required}\n        />\n    );\n}\n\n/** The `money` type: settings `currency` and `currencies`, `min` and `max` from its rules. */\nexport function MoneyFieldEntry(props: FieldEntryProps) {\n    const { field } = props;\n    const min = getRuleNumber(field, 'min');\n    const max = getRuleNumber(field, 'max');\n    const currency = getSetting(field, 'currency', isString);\n    const currencies = getSetting(field, 'currencies', (value): value is string[] =>\n        Array.isArray(value) ? value.every(isString) : false,\n    );\n    return (\n        <MoneyField\n            {...getFieldProps(props)}\n            value={isMoneyValue(props.value) ? props.value : null}\n            onChange={props.onChange}\n            {...(currency !== undefined ? { currency } : {})}\n            {...(currencies !== undefined ? { currencies } : {})}\n            {...(min !== undefined ? { min } : {})}\n            {...(max !== undefined ? { max } : {})}\n        />\n    );\n}\n"],"mappings":"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"}

package/dist/money/index.d.ts

@@ -0,0 +1,3 @@
+export { MoneyField, MoneyFieldEntry, type MoneyFieldProps } from './MoneyField.js';
+export { type MoneyFieldValue, formatMoney, getCurrencyName, getMoneyFormatOptions, isMoneyValue, toMoneyValue, } from './money.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/money/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/money/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AACjF,OAAO,EACH,KAAK,eAAe,EACpB,WAAW,EACX,eAAe,EACf,qBAAqB,EACrB,YAAY,EACZ,YAAY,GACf,MAAM,SAAS,CAAC"}

package/dist/money/index.js

@@ -0,0 +1,3 @@
+import { formatMoney, getCurrencyName, getMoneyFormatOptions, isMoneyValue, toMoneyValue } from "./money.js";
+import { MoneyField, MoneyFieldEntry } from "./MoneyField.js";
+export { MoneyField, MoneyFieldEntry, formatMoney, getCurrencyName, getMoneyFormatOptions, isMoneyValue, toMoneyValue };

package/dist/money/money.d.ts

@@ -0,0 +1,27 @@
+import { CURRENCY_CODES, fromMinorUnits, getCurrencyDigits, toMinorUnits } from '@panneau/protocol/runtime';
+/**
+ * A `money` value as a field holds it (decision 0053): an amount in minor units, and its currency,
+ * `null` while an amount is typed before a currency is picked, which the `money` rule refuses.
+ */
+export interface MoneyFieldValue {
+    amount: number;
+    currency: string | null;
+}
+/** Whether a value is a `money` value: an amount and a currency, as the field holds it. */
+export declare function isMoneyValue(value: unknown): value is MoneyFieldValue;
+/** The name of a currency in a locale (`dollar canadien`), or its code. */
+export declare function getCurrencyName(code: string, locale: string): string;
+/**
+ * The format of an amount of a currency in a locale, with the digits of the currency in ISO 4217:
+ * `12,50 $` for 12.50 CAD in French, `¥1,250` for JPY.
+ */
+export declare function getMoneyFormatOptions(currency: string | null, currencyDisplay?: Intl.NumberFormatOptions['currencyDisplay']): Intl.NumberFormatOptions;
+/**
+ * An amount in minor units with its currency, in the format of the locale: `1 250,00 $` for
+ * `{ "amount": 125000, "currency": "CAD" }` in French. `null` for a value that isn't money.
+ */
+export declare function formatMoney(value: unknown, locale: string): string | null;
+/** An amount typed in major units, in minor units of its currency. */
+export declare function toMoneyValue(major: number, currency: string | null): MoneyFieldValue;
+export { CURRENCY_CODES, fromMinorUnits, getCurrencyDigits, toMinorUnits };
+//# sourceMappingURL=money.d.ts.map

package/dist/money/money.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"money.d.ts","sourceRoot":"","sources":["../../src/money/money.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,cAAc,EACd,cAAc,EACd,iBAAiB,EAEjB,YAAY,EACf,MAAM,2BAA2B,CAAC;AAEnC;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAED,2FAA2F;AAC3F,wBAAgB,YAAY,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,eAAe,CAQrE;AAED,2EAA2E;AAC3E,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAMpE;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACjC,QAAQ,EAAE,MAAM,GAAG,IAAI,EACvB,eAAe,GAAE,IAAI,CAAC,mBAAmB,CAAC,iBAAiB,CAAY,GACxE,IAAI,CAAC,mBAAmB,CAS1B;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAYzE;AAED,sEAAsE;AACtE,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,eAAe,CAEpF;AAED,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,iBAAiB,EAAE,YAAY,EAAE,CAAC"}

package/dist/money/money.js

@@ -0,0 +1,56 @@
+import { CURRENCY_CODES, fromMinorUnits as fromMinorUnits$1, getCurrencyDigits, isCurrencyCode, toMinorUnits } from "@panneau/protocol/runtime";
+//#region src/money/money.ts
+/** Whether a value is a `money` value: an amount and a currency, as the field holds it. */
+function isMoneyValue(value) {
+	return typeof value === "object" && value !== null && typeof value.amount === "number" && "currency" in value && (typeof value.currency === "string" || value.currency === null);
+}
+/** The name of a currency in a locale (`dollar canadien`), or its code. */
+function getCurrencyName(code, locale) {
+	try {
+		return new Intl.DisplayNames([locale], { type: "currency" }).of(code) ?? code;
+	} catch {
+		return code;
+	}
+}
+/**
+* The format of an amount of a currency in a locale, with the digits of the currency in ISO 4217:
+* `12,50 $` for 12.50 CAD in French, `¥1,250` for JPY.
+*/
+function getMoneyFormatOptions(currency, currencyDisplay = "symbol") {
+	const digits = getCurrencyDigits(currency ?? "");
+	return {
+		...currency !== null && isCurrencyCode(currency) ? {
+			style: "currency",
+			currency,
+			currencyDisplay
+		} : {},
+		minimumFractionDigits: digits,
+		maximumFractionDigits: digits
+	};
+}
+/**
+* An amount in minor units with its currency, in the format of the locale: `1 250,00 $` for
+* `{ "amount": 125000, "currency": "CAD" }` in French. `null` for a value that isn't money.
+*/
+function formatMoney(value, locale) {
+	if (!isMoneyValue(value)) return null;
+	const { amount, currency } = value;
+	const major = fromMinorUnits$1(amount, currency ?? "");
+	try {
+		const text = new Intl.NumberFormat(locale, getMoneyFormatOptions(currency)).format(major);
+		return currency !== null && !isCurrencyCode(currency) ? `${text} ${currency}` : text;
+	} catch {
+		return `${String(major)} ${currency ?? ""}`.trim();
+	}
+}
+/** An amount typed in major units, in minor units of its currency. */
+function toMoneyValue(major, currency) {
+	return {
+		amount: toMinorUnits(major, currency ?? ""),
+		currency
+	};
+}
+//#endregion
+export { CURRENCY_CODES, formatMoney, fromMinorUnits$1 as fromMinorUnits, getCurrencyDigits, getCurrencyName, getMoneyFormatOptions, isMoneyValue, toMinorUnits, toMoneyValue };
+
+//# sourceMappingURL=money.js.map

package/dist/money/money.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"money.js","names":["CURRENCY_CODES","fromMinorUnits","getCurrencyDigits","isCurrencyCode","toMinorUnits","MoneyFieldValue","amount","currency","isMoneyValue","value","getCurrencyName","code","locale","Intl","DisplayNames","type","of","getMoneyFormatOptions","currencyDisplay","NumberFormatOptions","digits","style","minimumFractionDigits","maximumFractionDigits","formatMoney","major","text","NumberFormat","format","String","trim","toMoneyValue","fromMinorUnits"],"sources":["../../src/money/money.ts"],"sourcesContent":["import {\n    CURRENCY_CODES,\n    fromMinorUnits,\n    getCurrencyDigits,\n    isCurrencyCode,\n    toMinorUnits,\n} from '@panneau/protocol/runtime';\n\n/**\n * A `money` value as a field holds it (decision 0053): an amount in minor units, and its currency,\n * `null` while an amount is typed before a currency is picked, which the `money` rule refuses.\n */\nexport interface MoneyFieldValue {\n    amount: number;\n    currency: string | null;\n}\n\n/** Whether a value is a `money` value: an amount and a currency, as the field holds it. */\nexport function isMoneyValue(value: unknown): value is MoneyFieldValue {\n    return (\n        typeof value === 'object' &&\n        value !== null &&\n        typeof (value as { amount?: unknown }).amount === 'number' &&\n        'currency' in value &&\n        (typeof value.currency === 'string' || value.currency === null)\n    );\n}\n\n/** The name of a currency in a locale (`dollar canadien`), or its code. */\nexport function getCurrencyName(code: string, locale: string): string {\n    try {\n        return new Intl.DisplayNames([locale], { type: 'currency' }).of(code) ?? code;\n    } catch {\n        return code;\n    }\n}\n\n/**\n * The format of an amount of a currency in a locale, with the digits of the currency in ISO 4217:\n * `12,50 $` for 12.50 CAD in French, `¥1,250` for JPY.\n */\nexport function getMoneyFormatOptions(\n    currency: string | null,\n    currencyDisplay: Intl.NumberFormatOptions['currencyDisplay'] = 'symbol',\n): Intl.NumberFormatOptions {\n    const digits = getCurrencyDigits(currency ?? '');\n    return {\n        ...(currency !== null && isCurrencyCode(currency)\n            ? { style: 'currency', currency, currencyDisplay }\n            : {}),\n        minimumFractionDigits: digits,\n        maximumFractionDigits: digits,\n    };\n}\n\n/**\n * An amount in minor units with its currency, in the format of the locale: `1 250,00 $` for\n * `{ \"amount\": 125000, \"currency\": \"CAD\" }` in French. `null` for a value that isn't money.\n */\nexport function formatMoney(value: unknown, locale: string): string | null {\n    if (!isMoneyValue(value)) {\n        return null;\n    }\n    const { amount, currency } = value;\n    const major = fromMinorUnits(amount, currency ?? '');\n    try {\n        const text = new Intl.NumberFormat(locale, getMoneyFormatOptions(currency)).format(major);\n        return currency !== null && !isCurrencyCode(currency) ? `${text} ${currency}` : text;\n    } catch {\n        return `${String(major)} ${currency ?? ''}`.trim();\n    }\n}\n\n/** An amount typed in major units, in minor units of its currency. */\nexport function toMoneyValue(major: number, currency: string | null): MoneyFieldValue {\n    return { amount: toMinorUnits(major, currency ?? ''), currency };\n}\n\nexport { CURRENCY_CODES, fromMinorUnits, getCurrencyDigits, toMinorUnits };\n"],"mappings":";;;AAkBA,SAAgBQ,aAAaC,OAA0C;CACnE,OACI,OAAOA,UAAU,YACjBA,UAAU,QACV,OAAQA,MAA+BH,WAAW,YAClD,cAAcG,UACb,OAAOA,MAAMF,aAAa,YAAYE,MAAMF,aAAa;AAElE;;AAGA,SAAgBG,gBAAgBC,MAAcC,QAAwB;CAClE,IAAI;EACA,OAAO,IAAIC,KAAKC,aAAa,CAACF,MAAM,GAAG,EAAEG,MAAM,WAAW,CAAC,CAAC,CAACC,GAAGL,IAAI,KAAKA;CAC7E,QAAQ;EACJ,OAAOA;CACX;AACJ;;;;;AAMA,SAAgBM,sBACZV,UACAW,kBAA+D,UACvC;CACxB,MAAME,SAASlB,kBAAkBK,YAAY,EAAE;CAC/C,OAAO;EACH,GAAIA,aAAa,QAAQJ,eAAeI,QAAQ,IAC1C;GAAEc,OAAO;GAAYd;GAAUW;EAAgB,IAC/C,CAAC;EACPI,uBAAuBF;EACvBG,uBAAuBH;CAC3B;AACJ;;;;;AAMA,SAAgBI,YAAYf,OAAgBG,QAA+B;CACvE,IAAI,CAACJ,aAAaC,KAAK,GACnB,OAAO;CAEX,MAAM,EAAEH,QAAQC,aAAaE;CAC7B,MAAMgB,QAAQxB,iBAAeK,QAAQC,YAAY,EAAE;CACnD,IAAI;EACA,MAAMmB,OAAO,IAAIb,KAAKc,aAAaf,QAAQK,sBAAsBV,QAAQ,CAAC,CAAC,CAACqB,OAAOH,KAAK;EACxF,OAAOlB,aAAa,QAAQ,CAACJ,eAAeI,QAAQ,IAAI,GAAGmB,KAAI,GAAInB,aAAamB;CACpF,QAAQ;EACJ,OAAO,GAAGG,OAAOJ,KAAK,EAAC,GAAIlB,YAAY,KAAKuB,KAAK;CACrD;AACJ;;AAGA,SAAgBC,aAAaN,OAAelB,UAA0C;CAClF,OAAO;EAAED,QAAQF,aAAaqB,OAAOlB,YAAY,EAAE;EAAGA;CAAS;AACnE"}

package/dist/region/RegionField.d.ts

@@ -9,7 +9,8 @@ export interface RegionFieldProps extends FieldProps<string> {
 /**
  * A state, a province or a territory of a country. For the countries that Panneau knows the
  * regions of, a combo box of their names in the user's locale, whose value is the code of the
- * region without its country (`QC`). For the others, the region as typed.
+ * region without its country (`QC`), with their flags for the countries that have them (Canada and
+ * the United States). For the others, the region as typed.
  */
 export declare function RegionField({ country, placeholder, ...props }: RegionFieldProps): import("react").JSX.Element;
 /**

package/dist/region/RegionField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RegionField.d.ts","sourceRoot":"","sources":["../../src/region/RegionField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAM/C,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAInE,MAAM,WAAW,gBAAiB,SAAQ,UAAU,CAAC,MAAM,CAAC;IACxD,oGAAoG;IACpG,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAoB/E;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAQlF;AAED,wEAAwE;AACxE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,eAAe,+BAStD"}
+{"version":3,"file":"RegionField.d.ts","sourceRoot":"","sources":["../../src/region/RegionField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAM/C,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAMnE,MAAM,WAAW,gBAAiB,SAAQ,UAAU,CAAC,MAAM,CAAC;IACxD,oGAAoG;IACpG,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BA0B/E;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAQlF;AAED,wEAAwE;AACxE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,eAAe,+BAStD"}

package/dist/region/RegionField.js

@@ -1,7 +1,9 @@
 import { getFieldProps, getSetting, isString } from "../shared/entry.js";
 import { messages } from "../shared/messages.js";
-import { TextField } from "../text/TextField.js";
 import { CodeComboBox } from "../shared/CodeComboBox.js";
+import { TextField } from "../text/TextField.js";
+import { getRegionFlag, useRegionFlags } from "./flags.js";
+import { FlagImage } from "./RegionFlag.js";
 import { getRegions } from "./regions.js";
 import { c } from "react/compiler-runtime";
 import { usePanneauIntl } from "@panneau/ui";
@@ -10,10 +12,11 @@ import { jsx } from "react/jsx-runtime";
 /**
 * A state, a province or a territory of a country. For the countries that Panneau knows the
 * regions of, a combo box of their names in the user's locale, whose value is the code of the
-* region without its country (`QC`). For the others, the region as typed.
+* region without its country (`QC`), with their flags for the countries that have them (Canada and
+* the United States). For the others, the region as typed.
 */
 function RegionField(t0) {
-	const $ = c(22);
+	const $ = c(31);
 	let country;
 	let placeholder;
 	let props;
@@ -29,62 +32,97 @@ function RegionField(t0) {
 		props = $[3];
 	}
 	const intl = usePanneauIntl();
+	const flags = useRegionFlags(country);
+	let T0;
 	let t1;
-	if ($[4] !== country || $[5] !== intl.locale) {
-		t1 = getRegions(country, intl.locale);
-		$[4] = country;
-		$[5] = intl.locale;
-		$[6] = t1;
-	} else t1 = $[6];
-	const regions = t1;
-	if (regions === null) {
-		let t2;
-		if ($[7] !== placeholder) {
-			t2 = placeholder !== void 0 ? { placeholder } : {};
-			$[7] = placeholder;
-			$[8] = t2;
-		} else t2 = $[8];
-		let t3;
-		if ($[9] !== props || $[10] !== t2) {
-			t3 = /* @__PURE__ */ jsx(TextField, {
-				autoComplete: "address-level1",
-				...props,
-				...t2
-			});
-			$[9] = props;
-			$[10] = t2;
-			$[11] = t3;
-		} else t3 = $[11];
-		return t3;
-	}
 	let t2;
-	if ($[12] !== intl || $[13] !== placeholder) {
-		t2 = placeholder ?? intl.formatMessage(messages.regionPlaceholder);
-		$[12] = intl;
-		$[13] = placeholder;
-		$[14] = t2;
-	} else t2 = $[14];
 	let t3;
-	if ($[15] !== intl) {
-		t3 = intl.formatMessage(messages.noRegions);
-		$[15] = intl;
-		$[16] = t3;
-	} else t3 = $[16];
+	if ($[4] !== country || $[5] !== flags || $[6] !== intl.locale || $[7] !== placeholder || $[8] !== props) {
+		t3 = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			const regions = getRegions(country, intl.locale);
+			if (regions === null) {
+				let t4;
+				if ($[13] !== placeholder) {
+					t4 = placeholder !== void 0 ? { placeholder } : {};
+					$[13] = placeholder;
+					$[14] = t4;
+				} else t4 = $[14];
+				let t5;
+				if ($[15] !== props || $[16] !== t4) {
+					t5 = /* @__PURE__ */ jsx(TextField, {
+						autoComplete: "address-level1",
+						...props,
+						...t4
+					});
+					$[15] = props;
+					$[16] = t4;
+					$[17] = t5;
+				} else t5 = $[17];
+				t3 = t5;
+				break bb0;
+			}
+			T0 = CodeComboBox;
+			t1 = props;
+			let t4;
+			if ($[18] !== flags) {
+				t4 = (region) => {
+					const flag = getRegionFlag(flags, region.code);
+					return flag !== void 0 ? {
+						...region,
+						prefix: /* @__PURE__ */ jsx(FlagImage, { src: flag })
+					} : region;
+				};
+				$[18] = flags;
+				$[19] = t4;
+			} else t4 = $[19];
+			t2 = regions.map(t4);
+		}
+		$[4] = country;
+		$[5] = flags;
+		$[6] = intl.locale;
+		$[7] = placeholder;
+		$[8] = props;
+		$[9] = T0;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t3;
+	} else {
+		T0 = $[9];
+		t1 = $[10];
+		t2 = $[11];
+		t3 = $[12];
+	}
+	if (t3 !== Symbol.for("react.early_return_sentinel")) return t3;
 	let t4;
-	if ($[17] !== props || $[18] !== regions || $[19] !== t2 || $[20] !== t3) {
-		t4 = /* @__PURE__ */ jsx(CodeComboBox, {
-			...props,
-			choices: regions,
-			placeholder: t2,
-			emptyMessage: t3
+	if ($[20] !== intl || $[21] !== placeholder) {
+		t4 = placeholder ?? intl.formatMessage(messages.regionPlaceholder);
+		$[20] = intl;
+		$[21] = placeholder;
+		$[22] = t4;
+	} else t4 = $[22];
+	let t5;
+	if ($[23] !== intl) {
+		t5 = intl.formatMessage(messages.noRegions);
+		$[23] = intl;
+		$[24] = t5;
+	} else t5 = $[24];
+	let t6;
+	if ($[25] !== T0 || $[26] !== t1 || $[27] !== t2 || $[28] !== t4 || $[29] !== t5) {
+		t6 = /* @__PURE__ */ jsx(T0, {
+			...t1,
+			choices: t2,
+			placeholder: t4,
+			emptyMessage: t5
 		});
-		$[17] = props;
-		$[18] = regions;
-		$[19] = t2;
-		$[20] = t3;
-		$[21] = t4;
-	} else t4 = $[21];
-	return t4;
+		$[25] = T0;
+		$[26] = t1;
+		$[27] = t2;
+		$[28] = t4;
+		$[29] = t5;
+		$[30] = t6;
+	} else t6 = $[30];
+	return t6;
 }
 /**
 * The country of a `region` field: the value of the field that `from` names in the same object,

package/dist/region/RegionField.js.map

@@ -1 +1 @@
-{"version":3,"file":"RegionField.js","names":["Field","usePanneauIntl","CodeComboBox","getFieldProps","getSetting","isString","messages","FieldEntryProps","FieldProps","TextField","getRegions","RegionFieldProps","country","placeholder","controlClassName","RegionField","t0","$","_c","props","intl","t1","locale","regions","t2","undefined","t3","formatMessage","regionPlaceholder","noRegions","t4","getRegionCountry","field","parentValue","from","Record","RegionFieldEntry","value","onChange","_c"],"sources":["../../src/region/RegionField.tsx"],"sourcesContent":["import type { Field } from '@panneau/protocol';\nimport { usePanneauIntl } from '@panneau/ui';\n\nimport { CodeComboBox } from '../shared/CodeComboBox';\nimport { getFieldProps, getSetting, isString } from '../shared/entry';\nimport { messages } from '../shared/messages';\nimport type { FieldEntryProps, FieldProps } from '../shared/types';\nimport { TextField } from '../text/TextField';\nimport { getRegions } from './regions';\n\nexport interface RegionFieldProps extends FieldProps<string> {\n    /** The country of the region (`CA`). Without it, or for a country without known regions, a text. */\n    country?: string | null;\n    placeholder?: string;\n    controlClassName?: string;\n}\n\n/**\n * A state, a province or a territory of a country. For the countries that Panneau knows the\n * regions of, a combo box of their names in the user's locale, whose value is the code of the\n * region without its country (`QC`). For the others, the region as typed.\n */\nexport function RegionField({ country, placeholder, ...props }: RegionFieldProps) {\n    const intl = usePanneauIntl();\n    const regions = getRegions(country, intl.locale);\n    if (regions === null) {\n        return (\n            <TextField\n                autoComplete=\"address-level1\"\n                {...props}\n                {...(placeholder !== undefined ? { placeholder } : {})}\n            />\n        );\n    }\n    return (\n        <CodeComboBox\n            {...props}\n            choices={regions}\n            placeholder={placeholder ?? intl.formatMessage(messages.regionPlaceholder)}\n            emptyMessage={intl.formatMessage(messages.noRegions)}\n        />\n    );\n}\n\n/**\n * The country of a `region` field: the value of the field that `from` names in the same object,\n * or `settings.country`.\n */\nexport function getRegionCountry(field: Field, parentValue: unknown): string | null {\n    if (field.from !== undefined && parentValue !== null && typeof parentValue === 'object') {\n        const country = (parentValue as Record<string, unknown>)[field.from];\n        if (isString(country) && country !== '') {\n            return country;\n        }\n    }\n    return getSetting(field, 'country', isString) ?? null;\n}\n\n/** The `region` type: its country from `from` or `settings.country`. */\nexport function RegionFieldEntry(props: FieldEntryProps) {\n    return (\n        <RegionField\n            {...getFieldProps(props)}\n            country={getRegionCountry(props.field, props.parentValue)}\n            value={isString(props.value) ? props.value : null}\n            onChange={props.onChange}\n        />\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"RegionField.js","names":["Field","usePanneauIntl","CodeComboBox","getFieldProps","getSetting","isString","messages","FieldEntryProps","FieldProps","TextField","FlagImage","getRegionFlag","useRegionFlags","getRegions","RegionFieldProps","country","placeholder","controlClassName","RegionField","t0","$","_c","props","intl","flags","T0","t1","t2","t3","locale","Symbol","for","bb0","regions","t4","undefined","t5","region","flag","code","prefix","map","formatMessage","regionPlaceholder","noRegions","t6","getRegionCountry","field","parentValue","from","Record","RegionFieldEntry","value","onChange","_c"],"sources":["../../src/region/RegionField.tsx"],"sourcesContent":["import type { Field } from '@panneau/protocol';\nimport { usePanneauIntl } from '@panneau/ui';\n\nimport { CodeComboBox } from '../shared/CodeComboBox';\nimport { getFieldProps, getSetting, isString } from '../shared/entry';\nimport { messages } from '../shared/messages';\nimport type { FieldEntryProps, FieldProps } from '../shared/types';\nimport { TextField } from '../text/TextField';\nimport { FlagImage } from './RegionFlag';\nimport { getRegionFlag, useRegionFlags } from './flags';\nimport { getRegions } from './regions';\n\nexport interface RegionFieldProps extends FieldProps<string> {\n    /** The country of the region (`CA`). Without it, or for a country without known regions, a text. */\n    country?: string | null;\n    placeholder?: string;\n    controlClassName?: string;\n}\n\n/**\n * A state, a province or a territory of a country. For the countries that Panneau knows the\n * regions of, a combo box of their names in the user's locale, whose value is the code of the\n * region without its country (`QC`), with their flags for the countries that have them (Canada and\n * the United States). For the others, the region as typed.\n */\nexport function RegionField({ country, placeholder, ...props }: RegionFieldProps) {\n    const intl = usePanneauIntl();\n    const flags = useRegionFlags(country);\n    const regions = getRegions(country, intl.locale);\n    if (regions === null) {\n        return (\n            <TextField\n                autoComplete=\"address-level1\"\n                {...props}\n                {...(placeholder !== undefined ? { placeholder } : {})}\n            />\n        );\n    }\n    return (\n        <CodeComboBox\n            {...props}\n            choices={regions.map((region) => {\n                const flag = getRegionFlag(flags, region.code);\n                return flag !== undefined\n                    ? { ...region, prefix: <FlagImage src={flag} /> }\n                    : region;\n            })}\n            placeholder={placeholder ?? intl.formatMessage(messages.regionPlaceholder)}\n            emptyMessage={intl.formatMessage(messages.noRegions)}\n        />\n    );\n}\n\n/**\n * The country of a `region` field: the value of the field that `from` names in the same object,\n * or `settings.country`.\n */\nexport function getRegionCountry(field: Field, parentValue: unknown): string | null {\n    if (field.from !== undefined && parentValue !== null && typeof parentValue === 'object') {\n        const country = (parentValue as Record<string, unknown>)[field.from];\n        if (isString(country) && country !== '') {\n            return country;\n        }\n    }\n    return getSetting(field, 'country', isString) ?? null;\n}\n\n/** The `region` type: its country from `from` or `settings.country`. */\nexport function RegionFieldEntry(props: FieldEntryProps) {\n    return (\n        <RegionField\n            {...getFieldProps(props)}\n            country={getRegionCountry(props.field, props.parentValue)}\n            value={isString(props.value) ? props.value : null}\n            onChange={props.onChange}\n        />\n    );\n}\n"],"mappings":"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"}

package/dist/region/RegionFlag.css

@@ -0,0 +1,9 @@
+/* The size of a flag emoji, whatever the shape of the flag: about 4:3 in most emoji fonts. */
+.panneau-region-flag-flag {
+    display: inline-block;
+    flex: none;
+    width: 1.25em;
+    height: 0.9375em;
+    object-fit: contain;
+    vertical-align: -0.125em;
+}