@panneau/fields 5.0.0-alpha.2 → 5.0.0-alpha.20

package/dist/localized/LocalizedField.js

@@ -1,11 +1,16 @@
-import { useFieldsContext } from "../shared/context.js";
 import { cx } from "../shared/cx.js";
 import { getFieldProps } from "../shared/entry.js";
+import { useFieldsContext } from "../shared/context.js";
+import { messages } from "../shared/messages.js";
+import { useRevealer } from "../shared/reveal.js";
 import LocalizedField_module_default from "./LocalizedField.module.js";
 import { NestedField } from "../shared/DefinitionField.js";
 import { c } from "react/compiler-runtime";
-import { Fieldset, usePanneauIntl } from "@panneau/ui";
-import { jsx } from "react/jsx-runtime";
+import { isFilled } from "@panneau/protocol/runtime";
+import { Fieldset, Icon, SegmentedControl, usePanneauIntl } from "@panneau/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Plus } from "lucide-react";
+import { useState } from "react";
 //#region src/localized/LocalizedField.tsx
 /** The name of a locale in the UI's language, capitalized (`Français`, `English`). */
 function useLocaleName() {
@@ -29,27 +34,114 @@ function useLocaleName() {
 	return t0;
 }
 /**
-* A value per locale, with an input for each locale under one legend. A value without any locale
-* filled is `null`.
+* A value per locale: one locale at a time, under the field's label, with a switch at the end of
+* the label's line for the others. The switch marks the locales in error, and the empty ones: to
+* fill in when the field is required, to add otherwise. A value without any locale filled is
+* `null`.
 */
 function LocalizedField(t0) {
-	const $ = c(33);
-	const { locales, children, value, onChange, onBlur, label, description, errors, disabled, readOnly, required, className, labelClassName, descriptionClassName, errorsClassName, localeClassName } = t0;
+	const $ = c(58);
+	const { locales, children, value, onChange, onBlur, label, description, errors, disabled, readOnly, required, locale, onLocaleChange, invalidLocales: t1, className, labelClassName, descriptionClassName, errorsClassName, localeClassName } = t0;
+	let t2;
+	if ($[0] !== t1) {
+		t2 = t1 === void 0 ? [] : t1;
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	const invalidLocales = t2;
+	const intl = usePanneauIntl();
 	const localeName = useLocaleName();
-	let t1;
-	if ($[0] !== children || $[1] !== disabled || $[2] !== localeClassName || $[3] !== localeName || $[4] !== locales || $[5] !== onBlur || $[6] !== onChange || $[7] !== readOnly || $[8] !== required || $[9] !== value) {
-		let t2;
-		if ($[11] !== children || $[12] !== disabled || $[13] !== localeClassName || $[14] !== localeName || $[15] !== onBlur || $[16] !== onChange || $[17] !== readOnly || $[18] !== required || $[19] !== value) {
-			t2 = (locale) => /* @__PURE__ */ jsx("div", {
+	const [uncontrolled, setUncontrolled] = useState(locales[0]);
+	const wanted = locale ?? uncontrolled;
+	let t3;
+	if ($[2] !== locales || $[3] !== wanted) {
+		t3 = wanted !== void 0 && locales.includes(wanted) ? wanted : locales[0];
+		$[2] = locales;
+		$[3] = wanted;
+		$[4] = t3;
+	} else t3 = $[4];
+	const current = t3;
+	let t4;
+	if ($[5] !== intl || $[6] !== invalidLocales || $[7] !== localeName || $[8] !== locales || $[9] !== required || $[10] !== value) {
+		let t5;
+		if ($[12] !== intl || $[13] !== invalidLocales || $[14] !== localeName || $[15] !== required || $[16] !== value) {
+			t5 = (option, index) => {
+				const name = localeName(option);
+				const invalid = invalidLocales.includes(option);
+				const empty = !isFilled(value?.[option]);
+				const addable = !invalid && empty && required !== true && index > 0;
+				let textValue = name;
+				if (invalid) textValue = intl.formatMessage(messages.localeInvalid, { locale: name });
+				else if (addable) textValue = intl.formatMessage(messages.addLocale, { locale: name });
+				else if (empty) textValue = intl.formatMessage(messages.localeEmpty, { locale: name });
+				return {
+					value: option,
+					textValue,
+					label: /* @__PURE__ */ jsxs("span", {
+						className: LocalizedField_module_default.option,
+						children: [
+							addable ? /* @__PURE__ */ jsx(Icon, {
+								icon: Plus,
+								size: "sm"
+							}) : null,
+							option.toUpperCase(),
+							invalid ? /* @__PURE__ */ jsx("span", { className: cx(LocalizedField_module_default.marker, LocalizedField_module_default.invalid) }) : null,
+							!invalid && empty && required === true ? /* @__PURE__ */ jsx("span", { className: cx(LocalizedField_module_default.marker, LocalizedField_module_default.empty) }) : null
+						]
+					})
+				};
+			};
+			$[12] = intl;
+			$[13] = invalidLocales;
+			$[14] = localeName;
+			$[15] = required;
+			$[16] = value;
+			$[17] = t5;
+		} else t5 = $[17];
+		t4 = locales.map(t5);
+		$[5] = intl;
+		$[6] = invalidLocales;
+		$[7] = localeName;
+		$[8] = locales;
+		$[9] = required;
+		$[10] = value;
+		$[11] = t4;
+	} else t4 = $[11];
+	const options = t4;
+	let t5;
+	if ($[18] !== current || $[19] !== intl || $[20] !== locales.length || $[21] !== onLocaleChange || $[22] !== options) {
+		t5 = locales.length > 1 ? /* @__PURE__ */ jsx(SegmentedControl, {
+			size: "sm",
+			"aria-label": intl.formatMessage(messages.locales),
+			options,
+			...current !== void 0 ? { value: current } : {},
+			onChange: (next) => {
+				setUncontrolled(next);
+				onLocaleChange?.(next);
+			}
+		}) : void 0;
+		$[18] = current;
+		$[19] = intl;
+		$[20] = locales.length;
+		$[21] = onLocaleChange;
+		$[22] = options;
+		$[23] = t5;
+	} else t5 = $[23];
+	let t6;
+	if ($[24] !== children || $[25] !== current || $[26] !== disabled || $[27] !== localeClassName || $[28] !== localeName || $[29] !== locales || $[30] !== onBlur || $[31] !== onChange || $[32] !== readOnly || $[33] !== required || $[34] !== value) {
+		let t7;
+		if ($[36] !== children || $[37] !== current || $[38] !== disabled || $[39] !== localeClassName || $[40] !== localeName || $[41] !== onBlur || $[42] !== onChange || $[43] !== readOnly || $[44] !== required || $[45] !== value) {
+			t7 = (option_0) => /* @__PURE__ */ jsx("div", {
 				className: cx(LocalizedField_module_default.locale, localeClassName),
+				hidden: option_0 !== current,
 				children: children({
-					locale,
-					label: localeName(locale),
-					value: value?.[locale] ?? null,
-					onChange: (next) => {
+					locale: option_0,
+					label: localeName(option_0),
+					value: value?.[option_0] ?? null,
+					onChange: (next_0) => {
 						const updated = {
 							...value,
-							[locale]: next
+							[option_0]: next_0
 						};
 						const filled = Object.values(updated).some(_temp);
 						onChange?.(filled ? updated : null);
@@ -59,44 +151,38 @@ function LocalizedField(t0) {
 					...readOnly !== void 0 ? { readOnly } : {},
 					...required !== void 0 ? { required } : {}
 				})
-			}, locale);
-			$[11] = children;
-			$[12] = disabled;
-			$[13] = localeClassName;
-			$[14] = localeName;
-			$[15] = onBlur;
-			$[16] = onChange;
-			$[17] = readOnly;
-			$[18] = required;
-			$[19] = value;
-			$[20] = t2;
-		} else t2 = $[20];
-		t1 = locales.map(t2);
-		$[0] = children;
-		$[1] = disabled;
-		$[2] = localeClassName;
-		$[3] = localeName;
-		$[4] = locales;
-		$[5] = onBlur;
-		$[6] = onChange;
-		$[7] = readOnly;
-		$[8] = required;
-		$[9] = value;
-		$[10] = t1;
-	} else t1 = $[10];
-	let t2;
-	if ($[21] !== t1) {
-		t2 = /* @__PURE__ */ jsx("div", {
-			className: LocalizedField_module_default.locales,
-			children: t1
-		});
-		$[21] = t1;
-		$[22] = t2;
-	} else t2 = $[22];
-	let t3;
-	if ($[23] !== className || $[24] !== description || $[25] !== descriptionClassName || $[26] !== errors || $[27] !== errorsClassName || $[28] !== label || $[29] !== labelClassName || $[30] !== required || $[31] !== t2) {
-		t3 = /* @__PURE__ */ jsx(Fieldset, {
+			}, option_0);
+			$[36] = children;
+			$[37] = current;
+			$[38] = disabled;
+			$[39] = localeClassName;
+			$[40] = localeName;
+			$[41] = onBlur;
+			$[42] = onChange;
+			$[43] = readOnly;
+			$[44] = required;
+			$[45] = value;
+			$[46] = t7;
+		} else t7 = $[46];
+		t6 = locales.map(t7);
+		$[24] = children;
+		$[25] = current;
+		$[26] = disabled;
+		$[27] = localeClassName;
+		$[28] = localeName;
+		$[29] = locales;
+		$[30] = onBlur;
+		$[31] = onChange;
+		$[32] = readOnly;
+		$[33] = required;
+		$[34] = value;
+		$[35] = t6;
+	} else t6 = $[35];
+	let t7;
+	if ($[47] !== className || $[48] !== description || $[49] !== descriptionClassName || $[50] !== errors || $[51] !== errorsClassName || $[52] !== label || $[53] !== labelClassName || $[54] !== required || $[55] !== t5 || $[56] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Fieldset, {
 			legend: label,
+			legendEnd: t5,
 			description,
 			errors,
 			isRequired: required,
@@ -104,30 +190,36 @@ function LocalizedField(t0) {
 			legendClassName: labelClassName,
 			descriptionClassName,
 			errorsClassName,
-			children: t2
+			children: t6
 		});
-		$[23] = className;
-		$[24] = description;
-		$[25] = descriptionClassName;
-		$[26] = errors;
-		$[27] = errorsClassName;
-		$[28] = label;
-		$[29] = labelClassName;
-		$[30] = required;
-		$[31] = t2;
-		$[32] = t3;
-	} else t3 = $[32];
-	return t3;
+		$[47] = className;
+		$[48] = description;
+		$[49] = descriptionClassName;
+		$[50] = errors;
+		$[51] = errorsClassName;
+		$[52] = label;
+		$[53] = labelClassName;
+		$[54] = required;
+		$[55] = t5;
+		$[56] = t6;
+		$[57] = t7;
+	} else t7 = $[57];
+	return t7;
 }
-/**
-* A field of the definition with `localized: true`: the field of its type for each locale of the
-* fields context, each at its own path (`title.fr`).
-*/
+/** The locale of a path inside a localized field (`title.en`, `body.en.0` in `title`), if any. */
 function _temp(entry) {
 	return entry !== null && entry !== void 0 && entry !== "";
 }
+function localeOf(path, fieldPath, locales) {
+	return locales.find((locale) => path === `${fieldPath}.${locale}` || path.startsWith(`${fieldPath}.${locale}.`));
+}
+/**
+* A field of the definition with `localized: true`: the field of its type for each locale of the
+* fields context, each at its own path (`title.fr`). It shows the locale of a path the form
+* reveals, such as the first error on submit.
+*/
 function LocalizedFieldEntry(props) {
-	const $ = c(22);
+	const $ = c(36);
 	const { locales: contextLocales } = useFieldsContext();
 	const { field, path, value } = props;
 	let t0;
@@ -145,22 +237,56 @@ function LocalizedFieldEntry(props) {
 		$[4] = t1;
 	} else t1 = $[4];
 	const locales = t1;
+	const [locale, setLocale] = useState(locales[0]);
 	let t2;
-	if ($[5] !== props) {
-		t2 = getFieldProps(props);
-		$[5] = props;
-		$[6] = t2;
-	} else t2 = $[6];
-	let chrome;
-	if ($[7] !== t2) {
-		const { name: _name, onBlur: _onBlur, ...t3 } = t2;
-		chrome = t3;
+	if ($[5] !== locales || $[6] !== path) {
+		t2 = (revealed) => {
+			const found = localeOf(revealed, path, locales);
+			if (found !== void 0) setLocale(found);
+		};
+		$[5] = locales;
+		$[6] = path;
 		$[7] = t2;
-		$[8] = chrome;
-	} else chrome = $[8];
+	} else t2 = $[7];
+	useRevealer(t2);
 	let t3;
-	if ($[9] !== field || $[10] !== path || $[11] !== props.disabled || $[12] !== props.onBlur || $[13] !== props.parentValue || $[14] !== props.readOnly) {
-		t3 = (input) => /* @__PURE__ */ jsx(NestedField, {
+	if ($[8] !== locales || $[9] !== path || $[10] !== props.invalidPaths) {
+		let t4;
+		if ($[12] !== path || $[13] !== props.invalidPaths) {
+			t4 = (candidate) => (props.invalidPaths ?? []).some((invalid) => localeOf(invalid, path, [candidate]) !== void 0);
+			$[12] = path;
+			$[13] = props.invalidPaths;
+			$[14] = t4;
+		} else t4 = $[14];
+		t3 = locales.filter(t4);
+		$[8] = locales;
+		$[9] = path;
+		$[10] = props.invalidPaths;
+		$[11] = t3;
+	} else t3 = $[11];
+	const invalidLocales = t3;
+	let t4;
+	if ($[15] !== props) {
+		t4 = getFieldProps(props);
+		$[15] = props;
+		$[16] = t4;
+	} else t4 = $[16];
+	let chrome;
+	if ($[17] !== t4) {
+		const { name: _name, onBlur: _onBlur, ...t5 } = t4;
+		chrome = t5;
+		$[17] = t4;
+		$[18] = chrome;
+	} else chrome = $[18];
+	let t5;
+	if ($[19] !== locale) {
+		t5 = locale !== void 0 ? { locale } : {};
+		$[19] = locale;
+		$[20] = t5;
+	} else t5 = $[20];
+	let t6;
+	if ($[21] !== field || $[22] !== path || $[23] !== props.disabled || $[24] !== props.onBlur || $[25] !== props.parentValue || $[26] !== props.readOnly) {
+		t6 = (input) => /* @__PURE__ */ jsx(NestedField, {
 			field: {
 				...field,
 				localized: false,
@@ -172,34 +298,41 @@ function LocalizedFieldEntry(props) {
 			onChange: input.onChange,
 			...props.onBlur !== void 0 ? { onBlur: props.onBlur } : {},
 			parentValue: props.parentValue,
+			locale: input.locale,
+			hideLabel: true,
 			...props.disabled !== void 0 ? { disabled: props.disabled } : {},
 			...props.readOnly !== void 0 ? { readOnly: props.readOnly } : {}
 		});
-		$[9] = field;
-		$[10] = path;
-		$[11] = props.disabled;
-		$[12] = props.onBlur;
-		$[13] = props.parentValue;
-		$[14] = props.readOnly;
-		$[15] = t3;
-	} else t3 = $[15];
-	let t4;
-	if ($[16] !== chrome || $[17] !== locales || $[18] !== props.onChange || $[19] !== record || $[20] !== t3) {
-		t4 = /* @__PURE__ */ jsx(LocalizedField, {
+		$[21] = field;
+		$[22] = path;
+		$[23] = props.disabled;
+		$[24] = props.onBlur;
+		$[25] = props.parentValue;
+		$[26] = props.readOnly;
+		$[27] = t6;
+	} else t6 = $[27];
+	let t7;
+	if ($[28] !== chrome || $[29] !== invalidLocales || $[30] !== locales || $[31] !== props.onChange || $[32] !== record || $[33] !== t5 || $[34] !== t6) {
+		t7 = /* @__PURE__ */ jsx(LocalizedField, {
 			...chrome,
 			locales,
 			value: record,
 			onChange: props.onChange,
-			children: t3
+			...t5,
+			onLocaleChange: setLocale,
+			invalidLocales,
+			children: t6
 		});
-		$[16] = chrome;
-		$[17] = locales;
-		$[18] = props.onChange;
-		$[19] = record;
-		$[20] = t3;
-		$[21] = t4;
-	} else t4 = $[21];
-	return t4;
+		$[28] = chrome;
+		$[29] = invalidLocales;
+		$[30] = locales;
+		$[31] = props.onChange;
+		$[32] = record;
+		$[33] = t5;
+		$[34] = t6;
+		$[35] = t7;
+	} else t7 = $[35];
+	return t7;
 }
 //#endregion
 export { LocalizedField, LocalizedFieldEntry, useLocaleName };

package/dist/localized/LocalizedField.js.map

@@ -1 +1 @@
-{"version":3,"file":"LocalizedField.js","names":["name","locale","label","description","errors","required","className","labelClassName","descriptionClassName","errorsClassName","locales","record","_c","styles"],"sources":["../../src/localized/LocalizedField.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Fieldset, usePanneauIntl } from '@panneau/ui';\n\nimport { NestedField } from '../shared/DefinitionField';\nimport { useFieldsContext } from '../shared/context';\nimport { cx } from '../shared/cx';\nimport { getFieldProps } from '../shared/entry';\nimport type { FieldEntryProps, FieldProps } from '../shared/types';\nimport styles from './LocalizedField.module.css';\n\n/** A localized value: a value per locale (`{ fr: 'Été', en: 'Summer' }`). */\nexport type LocalizedValue<V> = Partial<Record<string, V | null>>;\n\n/** What `LocalizedField` gives the input of each locale. */\nexport interface LocalizedInputProps<V> {\n    locale: string;\n    /** Name of the locale in the UI's language, as the input's label. */\n    label: string;\n    value: V | null;\n    onChange: (value: V | null) => void;\n    onBlur?: () => void;\n    disabled?: boolean;\n    readOnly?: boolean;\n    required?: boolean;\n}\n\nexport interface LocalizedFieldProps<V> extends FieldProps<LocalizedValue<V>> {\n    /** Locales, in order. */\n    locales: readonly string[];\n    /** Renders the input of a locale. */\n    children: (props: LocalizedInputProps<V>) => ReactNode;\n    localeClassName?: string;\n}\n\n/** The name of a locale in the UI's language, capitalized (`Français`, `English`). */\nexport function useLocaleName(): (locale: string) => string {\n    const intl = usePanneauIntl();\n    return (locale) => {\n        let name: string | undefined;\n        try {\n            name = intl.formatDisplayName(locale, { type: 'language' });\n        } catch {\n            name = undefined;\n        }\n        const text = name ?? locale.toUpperCase();\n        return text.charAt(0).toLocaleUpperCase(intl.locale) + text.slice(1);\n    };\n}\n\n/**\n * A value per locale, with an input for each locale under one legend. A value without any locale\n * filled is `null`.\n */\nexport function LocalizedField<V>({\n    locales,\n    children,\n    value,\n    onChange,\n    onBlur,\n    label,\n    description,\n    errors,\n    disabled,\n    readOnly,\n    required,\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    localeClassName,\n}: LocalizedFieldProps<V>) {\n    const localeName = useLocaleName();\n    return (\n        <Fieldset\n            legend={label}\n            description={description}\n            errors={errors}\n            isRequired={required}\n            className={className}\n            legendClassName={labelClassName}\n            descriptionClassName={descriptionClassName}\n            errorsClassName={errorsClassName}\n        >\n            <div className={styles.locales}>\n                {locales.map((locale) => (\n                    <div key={locale} className={cx(styles.locale, localeClassName)}>\n                        {children({\n                            locale,\n                            label: localeName(locale),\n                            value: value?.[locale] ?? null,\n                            onChange: (next) => {\n                                const updated = { ...value, [locale]: next };\n                                const filled = Object.values(updated).some(\n                                    (entry) =>\n                                        entry !== null && entry !== undefined && entry !== '',\n                                );\n                                onChange?.(filled ? updated : null);\n                            },\n                            ...(onBlur !== undefined ? { onBlur } : {}),\n                            ...(disabled !== undefined ? { disabled } : {}),\n                            ...(readOnly !== undefined ? { readOnly } : {}),\n                            ...(required !== undefined ? { required } : {}),\n                        })}\n                    </div>\n                ))}\n            </div>\n        </Fieldset>\n    );\n}\n\n/**\n * A field of the definition with `localized: true`: the field of its type for each locale of the\n * fields context, each at its own path (`title.fr`).\n */\nexport function LocalizedFieldEntry(props: FieldEntryProps) {\n    const { locales: contextLocales } = useFieldsContext();\n    const { field, path, value } = props;\n    const record =\n        value !== null && typeof value === 'object' && !Array.isArray(value)\n            ? (value as Record<string, unknown>)\n            : {};\n    const locales = contextLocales.length > 0 ? contextLocales : Object.keys(record);\n    const { name: _name, onBlur: _onBlur, ...chrome } = getFieldProps(props);\n    return (\n        <LocalizedField<unknown>\n            {...chrome}\n            locales={locales}\n            value={record}\n            onChange={props.onChange}\n        >\n            {(input) => (\n                <NestedField\n                    field={{ ...field, localized: false, label: input.label, help: undefined }}\n                    path={`${path}.${input.locale}`}\n                    value={input.value}\n                    onChange={input.onChange}\n                    {...(props.onBlur !== undefined ? { onBlur: props.onBlur } : {})}\n                    parentValue={props.parentValue}\n                    {...(props.disabled !== undefined ? { disabled: props.disabled } : {})}\n                    {...(props.readOnly !== undefined ? { readOnly: props.readOnly } : {})}\n                />\n            )}\n        </LocalizedField>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"LocalizedField.js","names":["Plus","ReactNode","useState","isFilled","Fieldset","Icon","SegmentedControl","usePanneauIntl","NestedField","useFieldsContext","cx","getFieldProps","messages","useRevealer","FieldEntryProps","FieldProps","styles","LocalizedValue","Partial","Record","V","LocalizedInputProps","locale","label","value","onChange","onBlur","disabled","readOnly","required","LocalizedFieldProps","locales","children","props","onLocaleChange","invalidLocales","localeClassName","useLocaleName","$","_c","intl","t0","name","formatDisplayName","type","undefined","text","toUpperCase","charAt","toLocaleUpperCase","slice","LocalizedField","description","errors","t1","className","labelClassName","descriptionClassName","errorsClassName","t2","localeName","uncontrolled","setUncontrolled","wanted","t3","includes","current","t4","t5","option","index","invalid","empty","addable","textValue","formatMessage","localeInvalid","addLocale","localeEmpty","marker","map","options","length","next","t6","t7","option_0","next_0","updated","filled","Object","values","some","_temp","entry","localeOf","path","fieldPath","find","startsWith","LocalizedFieldEntry","contextLocales","field","Array","isArray","record","keys","setLocale","revealed","found","invalidPaths","candidate","filter","chrome","_name","_onBlur","parentValue","input","localized","help","_c","styles"],"sources":["../../src/localized/LocalizedField.tsx"],"sourcesContent":["import { Plus } from 'lucide-react';\nimport { type ReactNode, useState } from 'react';\n\nimport { isFilled } from '@panneau/protocol/runtime';\nimport { Fieldset, Icon, SegmentedControl, usePanneauIntl } from '@panneau/ui';\n\nimport { NestedField } from '../shared/DefinitionField';\nimport { useFieldsContext } from '../shared/context';\nimport { cx } from '../shared/cx';\nimport { getFieldProps } from '../shared/entry';\nimport { messages } from '../shared/messages';\nimport { useRevealer } from '../shared/reveal';\nimport type { FieldEntryProps, FieldProps } from '../shared/types';\nimport styles from './LocalizedField.module.css';\n\n/** A localized value: a value per locale (`{ fr: 'Été', en: 'Summer' }`). */\nexport type LocalizedValue<V> = Partial<Record<string, V | null>>;\n\n/** What `LocalizedField` gives the input of each locale. */\nexport interface LocalizedInputProps<V> {\n    locale: string;\n    /**\n     * Name of the locale in the UI's language. The field shows the locales: give it to the input\n     * as its `aria-label`, not as a visible label.\n     */\n    label: string;\n    value: V | null;\n    onChange: (value: V | null) => void;\n    onBlur?: () => void;\n    disabled?: boolean;\n    readOnly?: boolean;\n    required?: boolean;\n}\n\nexport interface LocalizedFieldProps<V> extends FieldProps<LocalizedValue<V>> {\n    /** Locales, in order. The first one shows first. */\n    locales: readonly string[];\n    /** Renders the input of a locale. */\n    children: (props: LocalizedInputProps<V>) => ReactNode;\n    /** The locale shown. Controlled with `onLocaleChange`. */\n    locale?: string;\n    onLocaleChange?: (locale: string) => void;\n    /** Locales whose value has errors: their switch shows it. */\n    invalidLocales?: readonly string[];\n    localeClassName?: string;\n}\n\n/** The name of a locale in the UI's language, capitalized (`Français`, `English`). */\nexport function useLocaleName(): (locale: string) => string {\n    const intl = usePanneauIntl();\n    return (locale) => {\n        let name: string | undefined;\n        try {\n            name = intl.formatDisplayName(locale, { type: 'language' });\n        } catch {\n            name = undefined;\n        }\n        const text = name ?? locale.toUpperCase();\n        return text.charAt(0).toLocaleUpperCase(intl.locale) + text.slice(1);\n    };\n}\n\n/**\n * A value per locale: one locale at a time, under the field's label, with a switch at the end of\n * the label's line for the others. The switch marks the locales in error, and the empty ones: to\n * fill in when the field is required, to add otherwise. A value without any locale filled is\n * `null`.\n */\nexport function LocalizedField<V>({\n    locales,\n    children,\n    value,\n    onChange,\n    onBlur,\n    label,\n    description,\n    errors,\n    disabled,\n    readOnly,\n    required,\n    locale,\n    onLocaleChange,\n    invalidLocales = [],\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    localeClassName,\n}: LocalizedFieldProps<V>) {\n    const intl = usePanneauIntl();\n    const localeName = useLocaleName();\n    const [uncontrolled, setUncontrolled] = useState(locales[0]);\n    const wanted = locale ?? uncontrolled;\n    const current = wanted !== undefined && locales.includes(wanted) ? wanted : locales[0];\n\n    const options = locales.map((option, index) => {\n        const name = localeName(option);\n        const invalid = invalidLocales.includes(option);\n        const empty = !isFilled(value?.[option]);\n        // An empty locale after the first is a translation to add, unless every locale is required.\n        const addable = !invalid && empty && required !== true && index > 0;\n        let textValue = name;\n        if (invalid) {\n            textValue = intl.formatMessage(messages.localeInvalid, { locale: name });\n        } else if (addable) {\n            textValue = intl.formatMessage(messages.addLocale, { locale: name });\n        } else if (empty) {\n            textValue = intl.formatMessage(messages.localeEmpty, { locale: name });\n        }\n        return {\n            value: option,\n            textValue,\n            label: (\n                <span className={styles.option}>\n                    {addable ? <Icon icon={Plus} size=\"sm\" /> : null}\n                    {option.toUpperCase()}\n                    {invalid ? <span className={cx(styles.marker, styles.invalid)} /> : null}\n                    {!invalid && empty && required === true ? (\n                        <span className={cx(styles.marker, styles.empty)} />\n                    ) : null}\n                </span>\n            ),\n        };\n    });\n\n    return (\n        <Fieldset\n            legend={label}\n            legendEnd={\n                locales.length > 1 ? (\n                    <SegmentedControl\n                        size=\"sm\"\n                        aria-label={intl.formatMessage(messages.locales)}\n                        options={options}\n                        {...(current !== undefined ? { value: current } : {})}\n                        onChange={(next) => {\n                            setUncontrolled(next);\n                            onLocaleChange?.(next);\n                        }}\n                    />\n                ) : undefined\n            }\n            description={description}\n            errors={errors}\n            isRequired={required}\n            className={className}\n            legendClassName={labelClassName}\n            descriptionClassName={descriptionClassName}\n            errorsClassName={errorsClassName}\n        >\n            {locales.map((option) => (\n                // Every locale stays mounted: inputs keep their state, and errors can be revealed.\n                <div\n                    key={option}\n                    className={cx(styles.locale, localeClassName)}\n                    hidden={option !== current}\n                >\n                    {children({\n                        locale: option,\n                        label: localeName(option),\n                        value: value?.[option] ?? null,\n                        onChange: (next) => {\n                            const updated = { ...value, [option]: next };\n                            const filled = Object.values(updated).some(\n                                (entry) => entry !== null && entry !== undefined && entry !== '',\n                            );\n                            onChange?.(filled ? updated : null);\n                        },\n                        ...(onBlur !== undefined ? { onBlur } : {}),\n                        ...(disabled !== undefined ? { disabled } : {}),\n                        ...(readOnly !== undefined ? { readOnly } : {}),\n                        ...(required !== undefined ? { required } : {}),\n                    })}\n                </div>\n            ))}\n        </Fieldset>\n    );\n}\n\n/** The locale of a path inside a localized field (`title.en`, `body.en.0` in `title`), if any. */\nfunction localeOf(path: string, fieldPath: string, locales: readonly string[]) {\n    return locales.find(\n        (locale) => path === `${fieldPath}.${locale}` || path.startsWith(`${fieldPath}.${locale}.`),\n    );\n}\n\n/**\n * A field of the definition with `localized: true`: the field of its type for each locale of the\n * fields context, each at its own path (`title.fr`). It shows the locale of a path the form\n * reveals, such as the first error on submit.\n */\nexport function LocalizedFieldEntry(props: FieldEntryProps) {\n    const { locales: contextLocales } = useFieldsContext();\n    const { field, path, value } = props;\n    const record =\n        value !== null && typeof value === 'object' && !Array.isArray(value)\n            ? (value as Record<string, unknown>)\n            : {};\n    const locales = contextLocales.length > 0 ? contextLocales : Object.keys(record);\n    const [locale, setLocale] = useState(locales[0]);\n    useRevealer((revealed) => {\n        const found = localeOf(revealed, path, locales);\n        if (found !== undefined) {\n            setLocale(found);\n        }\n    });\n    const invalidLocales = locales.filter((candidate) =>\n        (props.invalidPaths ?? []).some(\n            (invalid) => localeOf(invalid, path, [candidate]) !== undefined,\n        ),\n    );\n    const { name: _name, onBlur: _onBlur, ...chrome } = getFieldProps(props);\n    return (\n        <LocalizedField<unknown>\n            {...chrome}\n            locales={locales}\n            value={record}\n            onChange={props.onChange}\n            {...(locale !== undefined ? { locale } : {})}\n            onLocaleChange={setLocale}\n            invalidLocales={invalidLocales}\n        >\n            {(input) => (\n                <NestedField\n                    field={{ ...field, localized: false, label: input.label, help: undefined }}\n                    path={`${path}.${input.locale}`}\n                    value={input.value}\n                    onChange={input.onChange}\n                    {...(props.onBlur !== undefined ? { onBlur: props.onBlur } : {})}\n                    parentValue={props.parentValue}\n                    locale={input.locale}\n                    hideLabel\n                    {...(props.disabled !== undefined ? { disabled: props.disabled } : {})}\n                    {...(props.readOnly !== undefined ? { readOnly: props.readOnly } : {})}\n                />\n            )}\n        </LocalizedField>\n    );\n}\n"],"mappings":"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"}

package/dist/localized/LocalizedField.module.js

@@ -1,12 +1,18 @@
 import "./LocalizedField.css";
 //#region src/localized/LocalizedField.module.css
-var locales = "panneau-localized-field-locales";
 var locale = "panneau-localized-field-locale";
+var option = "panneau-localized-field-option";
+var marker = "panneau-localized-field-marker";
+var invalid = "panneau-localized-field-invalid";
+var empty = "panneau-localized-field-empty";
 var LocalizedField_module_default = {
-	locales,
-	locale
+	locale,
+	option,
+	marker,
+	invalid,
+	empty
 };
 //#endregion
-export { LocalizedField_module_default as default, locale, locales };
+export { LocalizedField_module_default as default, empty, invalid, locale, marker, option };
 
 //# sourceMappingURL=LocalizedField.module.js.map

package/dist/localized/LocalizedField.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"LocalizedField.module.js","names":[],"sources":["../../src/localized/LocalizedField.module.css"],"sourcesContent":[".locales {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-3);\n}\n\n.locale {\n    min-width: 0;\n}\n"],"mappings":""}
+{"version":3,"file":"LocalizedField.module.js","names":[],"sources":["../../src/localized/LocalizedField.module.css"],"sourcesContent":[".locale {\n    min-width: 0;\n}\n\n.locale[hidden] {\n    display: none;\n}\n\n.option {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-1);\n    letter-spacing: 0.02em;\n}\n\n.marker {\n    flex: 0 0 auto;\n    width: 0.45em;\n    height: 0.45em;\n    background-color: currentcolor;\n    border-radius: 50%;\n}\n\n.invalid {\n    color: var(--panneau-color-danger);\n}\n\n.empty {\n    color: var(--panneau-color-warning);\n}\n"],"mappings":""}

package/dist/localized/index.d.ts

@@ -1,2 +1,2 @@
-export { LocalizedField, LocalizedFieldEntry, type LocalizedFieldProps, type LocalizedInputProps, type LocalizedValue, useLocaleName, } from './LocalizedField';
+export { LocalizedField, LocalizedFieldEntry, type LocalizedFieldProps, type LocalizedInputProps, type LocalizedValue, useLocaleName, } from './LocalizedField.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/location/LocationField.css

@@ -0,0 +1,54 @@
+/* The search, the map, then the coordinates and the address. */
+.panneau-location-field-location {
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-2);
+}
+
+.panneau-location-field-map {
+    position: relative;
+    z-index: 0;
+    height: 16rem;
+    overflow: hidden;
+    background-color: var(--panneau-color-surface-sunken);
+    border: var(--panneau-border-width) solid var(--panneau-color-border-control);
+    border-radius: var(--panneau-radius-md);
+}
+
+.panneau-location-field-map:focus-visible {
+    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
+    outline-offset: 1px;
+}
+
+/* A pin: a round head pointing down at the point. */
+.panneau-location-field-marker {
+    background: none;
+    border: 0;
+}
+
+.panneau-location-field-pin {
+    display: block;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: var(--panneau-color-accent);
+    border: 2px solid var(--panneau-color-surface);
+    border-radius: 50% 50% 50% 0;
+    box-shadow: var(--panneau-shadow-sm);
+    rotate: -45deg;
+}
+
+.panneau-location-field-coordinates {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: var(--panneau-space-2);
+}
+
+.panneau-location-field-coordinate {
+    flex: 1 1 8rem;
+}
+
+.panneau-location-field-remove {
+    flex: none;
+}

package/dist/location/LocationField.d.ts

@@ -0,0 +1,31 @@
+import type { LocationValue } from '@panneau/protocol';
+import type { FieldEntryProps, FieldProps } from '../shared/types.js';
+import { type Point } from './LocationMap.js';
+import type { GeocodingSource, MapTiles } from './types.js';
+export type { LocationValue };
+/** OpenStreetMap's standard tiles: fine for an admin panel, with their credit. */
+export declare const OPEN_STREET_MAP_TILES: MapTiles;
+export interface LocationFieldProps extends FieldProps<LocationValue> {
+    /** The address search. Defaults to that of the `FieldsProvider`; without one, there is none. */
+    geocoding?: GeocodingSource | null;
+    /** The tiles of the map. Defaults to those of the `FieldsProvider`, or OpenStreetMap's. */
+    tiles?: MapTiles;
+    /** Where the map opens without a point. Defaults to the whole world. */
+    center?: Point;
+    /** Zoom of the map on a point. Defaults to 15. */
+    zoom?: number;
+}
+/** Whether a value is a point. */
+export declare function isLocation(value: unknown): value is LocationValue;
+/**
+ * A point on a map, and its address. Clicking the map or dragging the marker places the point,
+ * and its latitude and longitude can be typed. With an address search, a place found sets the
+ * point and the address; with a reverse search, placing a point fills an empty address.
+ */
+export declare function LocationField({ value, onChange, onBlur, geocoding: geocodingProp, tiles: tilesProp, center, zoom, label, description, errors, disabled, readOnly, required, className, }: LocationFieldProps): import("react").JSX.Element;
+/**
+ * The `location` type: settings `zoom`, `center` (`{ "lat", "lng" }`, where the map opens without
+ * a point) and `tiles` (`{ "url", "attribution" }`), over the maps of the `FieldsProvider`.
+ */
+export declare function LocationFieldEntry(props: FieldEntryProps): import("react").JSX.Element;
+//# sourceMappingURL=LocationField.d.ts.map

package/dist/location/LocationField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LocationField.d.ts","sourceRoot":"","sources":["../../src/location/LocationField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAavD,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAEnE,OAAO,EAAe,KAAK,KAAK,EAAE,MAAM,eAAe,CAAC;AAExD,OAAO,KAAK,EAAmB,eAAe,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAE1E,YAAY,EAAE,aAAa,EAAE,CAAC;AAE9B,kFAAkF;AAClF,eAAO,MAAM,qBAAqB,EAAE,QAKnC,CAAC;AAIF,MAAM,WAAW,kBAAmB,SAAQ,UAAU,CAAC,aAAa,CAAC;IACjE,gGAAgG;IAChG,SAAS,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACnC,2FAA2F;IAC3F,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,wEAAwE;IACxE,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,kCAAkC;AAClC,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,aAAa,CAOjE;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,SAAS,EAChB,MAAuB,EACvB,IAAS,EACT,KAAK,EACL,WAAW,EACX,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,GACZ,EAAE,kBAAkB,+BA0KpB;AAMD;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,eAAe,+BAwBxD"}