@panneau/fields 4.1.1 → 5.0.0-alpha.1

package/dist/number/NumberField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.js","names":["min","max","disabled","readOnly","required","_c"],"sources":["../../src/number/NumberField.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { NumberInput } from '@panneau/ui';\n\nimport { getFieldProps, getRuleNumber, getSetting, isNumber, isString } from '../shared/entry';\nimport type { FieldEntryProps, FieldProps } from '../shared/types';\n\nexport interface NumberFieldProps extends FieldProps<number> {\n    placeholder?: string;\n    min?: number;\n    max?: number;\n    /** Step of the steppers and arrow keys. Defaults to 1. */\n    step?: number;\n    /** Format of the number, for the locale: decimals, percent, currency. */\n    formatOptions?: Intl.NumberFormatOptions;\n    /** Content after the number: a unit. */\n    suffix?: ReactNode;\n    controlClassName?: string;\n    inputClassName?: string;\n}\n\n/** A number, formatted for the locale. An empty field is `null`. */\nexport function NumberField({\n    value,\n    onChange,\n    min,\n    max,\n    disabled,\n    readOnly,\n    required,\n    ...props\n}: NumberFieldProps) {\n    return (\n        <NumberInput\n            {...props}\n            value={value ?? null}\n            onChange={(next) => onChange?.(next)}\n            minValue={min}\n            maxValue={max}\n            isDisabled={disabled}\n            isReadOnly={readOnly}\n            isRequired={required}\n        />\n    );\n}\n\n/**\n * The `number` type: `min` and `max` from its rules, and settings `step`, `decimals` (the most\n * digits after the decimal point) and `suffix`.\n */\nexport function NumberFieldEntry(props: FieldEntryProps) {\n    const { field } = props;\n    const min = getRuleNumber(field, 'min');\n    const max = getRuleNumber(field, 'max');\n    const step = getSetting(field, 'step', isNumber);\n    const decimals = getSetting(field, 'decimals', isNumber);\n    const suffix = getSetting(field, 'suffix', isString);\n    return (\n        <NumberField\n            {...getFieldProps(props)}\n            value={isNumber(props.value) ? props.value : null}\n            onChange={props.onChange}\n            {...(min !== undefined ? { min } : {})}\n            {...(max !== undefined ? { max } : {})}\n            {...(step !== undefined ? { step } : {})}\n            {...(decimals !== undefined\n                ? { formatOptions: { maximumFractionDigits: decimals } }\n                : {})}\n            {...(suffix !== undefined ? { suffix } : {})}\n        />\n    );\n}\n"],"mappings":"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"}

package/dist/number/index.d.ts

@@ -0,0 +1,2 @@
+export { NumberField, NumberFieldEntry, type NumberFieldProps } from './NumberField';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/number/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC"}

package/dist/number/index.js

@@ -0,0 +1 @@
+export { NumberField, NumberFieldEntry } from "./NumberField.js";

package/dist/relation/RelationField.css

@@ -0,0 +1,43 @@
+.panneau-multiple-u9IXr- {
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-2);
+}
+
+.panneau-selected-PL7VcQ {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--panneau-space-1) var(--panneau-space-2);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.panneau-reference-J8YpaW {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--panneau-space-1);
+    min-height: var(--panneau-control-height-sm);
+    max-width: 100%;
+    padding-inline: var(--panneau-space-3) var(--panneau-space-1);
+    font-size: var(--panneau-font-size-sm);
+    background-color: var(--panneau-color-surface-sunken);
+    border: var(--panneau-border-width) solid var(--panneau-color-border);
+    border-radius: var(--panneau-radius-full);
+}
+
+.panneau-reference-J8YpaW:only-child,
+.panneau-readOnly-UunIK0 .panneau-reference-J8YpaW {
+    padding-inline-end: var(--panneau-space-3);
+}
+
+.panneau-referenceLabel-ydQ0bU {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.panneau-none-niMk7v {
+    font-size: var(--panneau-font-size-md);
+    color: var(--panneau-color-text-muted);
+}

package/dist/relation/RelationField.d.ts

@@ -0,0 +1,48 @@
+import { type RelationReference, type RelationSource } from '../shared/relation';
+import type { FieldEntryProps, FieldProps } from '../shared/types';
+/** Results of a search in a relation source, as it types. */
+export declare function useRelationSearch(source: RelationSource | null, resource: string, query: string, { enabled, delay }?: {
+    enabled?: boolean;
+    delay?: number;
+}): {
+    items: RelationReference[];
+    isLoading: boolean;
+};
+/** Props of both single and multiple relation fields. */
+export interface RelationFieldBaseProps extends Omit<FieldProps<never>, 'value' | 'onChange'> {
+    /** Id of the related resource, passed to the source. */
+    resource: string;
+    /** Where to search. Defaults to the fields context's. Without one, the field is read-only. */
+    source?: RelationSource | null;
+    /**
+     * Creates an item from the typed text, offered as "Create “…”" in the picker: it can open a
+     * dialog, and resolves with the new reference, or `null` when nothing was created. Defaults to
+     * the source's `create()`. `null` turns creating off.
+     */
+    onCreate?: ((text: string) => Promise<RelationReference | null>) | null;
+    placeholder?: string;
+    controlClassName?: string;
+}
+export interface SingleRelationFieldProps extends RelationFieldBaseProps {
+    multiple?: false;
+    value?: RelationReference | null;
+    onChange?: (value: RelationReference | null) => void;
+}
+export interface MultipleRelationFieldProps extends RelationFieldBaseProps {
+    multiple: true;
+    value?: readonly RelationReference[] | null;
+    /** Called with the references. An empty list is `null`. */
+    onChange?: (value: RelationReference[] | null) => void;
+}
+export type RelationFieldProps = SingleRelationFieldProps | MultipleRelationFieldProps;
+/**
+ * A reference to an item of another resource, or several with `multiple`, picked by searching a
+ * `RelationSource`. Values are references (`{ id, label }`), as items carry them; plain ids get
+ * their labels from the source's `resolve()`. When the source can `create()` (or with `onCreate`),
+ * the picker offers to create an item from the typed text. Without a source, the field shows its
+ * references and can't change them.
+ */
+export declare function RelationField(props: RelationFieldProps): import("react").JSX.Element;
+/** The `relation` type: `resource` and `multiple`. Items search the fields context's source. */
+export declare function RelationFieldEntry(props: FieldEntryProps): import("react").JSX.Element;
+//# sourceMappingURL=RelationField.d.ts.map

package/dist/relation/RelationField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelationField.d.ts","sourceRoot":"","sources":["../../src/relation/RelationField.tsx"],"names":[],"mappings":"AASA,OAAO,EACH,KAAK,iBAAiB,EACtB,KAAK,cAAc,EAGtB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAMnE,6DAA6D;AAC7D,wBAAgB,iBAAiB,CAC7B,MAAM,EAAE,cAAc,GAAG,IAAI,EAC7B,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,EAAE,OAAc,EAAE,KAAW,EAAE,GAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAO,GAC5E;IAAE,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAE,CAmCpD;AAED,yDAAyD;AACzD,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACzF,wDAAwD;IACxD,QAAQ,EAAE,MAAM,CAAC;IACjB,8FAA8F;IAC9F,MAAM,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC;IACxE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,wBAAyB,SAAQ,sBAAsB;IACpE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,KAAK,IAAI,CAAC;CACxD;AAED,MAAM,WAAW,0BAA2B,SAAQ,sBAAsB;IACtE,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,iBAAiB,EAAE,GAAG,IAAI,CAAC;IAC5C,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;CAC1D;AAED,MAAM,MAAM,kBAAkB,GAAG,wBAAwB,GAAG,0BAA0B,CAAC;AA+BvF;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BAyNtD;AAED,gGAAgG;AAChG,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,eAAe,+BAQxD"}

package/dist/relation/RelationField.js

@@ -0,0 +1,328 @@
+import { useFieldsContext } from "../shared/context.js";
+import { cx } from "../shared/cx.js";
+import { getFieldProps } from "../shared/entry.js";
+import { messages } from "../shared/messages.js";
+import { toReferences, useRelationReferences } from "../shared/relation.js";
+import RelationField_module_default from "./RelationField.module.js";
+import { c } from "react/compiler-runtime";
+import { ComboBox, Fieldset, IconButton, usePanneauIntl } from "@panneau/ui";
+import { useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+//#region src/relation/RelationField.tsx
+/** The id of the "Create “…”" option of the picker. */
+var CREATE_ID = "\0create";
+/** Results of a search in a relation source, as it types. */
+function useRelationSearch(source, resource, query, { enabled = true, delay = 250 } = {}) {
+	const [state, setState] = useState({
+		key: "",
+		items: [],
+		isLoading: false
+	});
+	const key = `${resource}\u0000${query}`;
+	useEffect(() => {
+		if (source === null || !enabled) return;
+		const controller = new AbortController();
+		const timer = setTimeout(() => {
+			setState((current) => ({
+				...current,
+				key,
+				isLoading: true
+			}));
+			source.search(resource, query, { signal: controller.signal }).then((items) => {
+				if (!controller.signal.aborted) setState({
+					key,
+					items,
+					isLoading: false
+				});
+			}).catch(() => {
+				if (!controller.signal.aborted) setState({
+					key,
+					items: [],
+					isLoading: false
+				});
+			});
+		}, delay);
+		return () => {
+			clearTimeout(timer);
+			controller.abort();
+		};
+	}, [
+		source,
+		resource,
+		query,
+		key,
+		enabled,
+		delay
+	]);
+	return {
+		items: state.items,
+		isLoading: state.isLoading || state.key !== key
+	};
+}
+function References(t0) {
+	const $ = c(12);
+	const { references, onRemove, removeLabel } = t0;
+	const t1 = onRemove === void 0 && RelationField_module_default.readOnly;
+	let t2;
+	if ($[0] !== t1) {
+		t2 = cx(RelationField_module_default.selected, t1);
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== onRemove || $[3] !== references || $[4] !== removeLabel) {
+		let t4;
+		if ($[6] !== onRemove || $[7] !== removeLabel) {
+			t4 = (reference) => /* @__PURE__ */ jsxs("li", {
+				className: RelationField_module_default.reference,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: RelationField_module_default.referenceLabel,
+					children: reference.label
+				}), onRemove !== void 0 ? /* @__PURE__ */ jsx(IconButton, {
+					icon: X,
+					size: "sm",
+					label: removeLabel(reference),
+					showTooltip: false,
+					onPress: () => onRemove(reference)
+				}) : null]
+			}, reference.id);
+			$[6] = onRemove;
+			$[7] = removeLabel;
+			$[8] = t4;
+		} else t4 = $[8];
+		t3 = references.map(t4);
+		$[2] = onRemove;
+		$[3] = references;
+		$[4] = removeLabel;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[9] !== t2 || $[10] !== t3) {
+		t4 = /* @__PURE__ */ jsx("ul", {
+			className: t2,
+			children: t3
+		});
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
+}
+/**
+* A reference to an item of another resource, or several with `multiple`, picked by searching a
+* `RelationSource`. Values are references (`{ id, label }`), as items carry them; plain ids get
+* their labels from the source's `resolve()`. When the source can `create()` (or with `onCreate`),
+* the picker offers to create an item from the typed text. Without a source, the field shows its
+* references and can't change them.
+*/
+function RelationField(props) {
+	const intl = usePanneauIntl();
+	const context = useFieldsContext();
+	const source = props.source === void 0 ? context.relationSource : props.source;
+	const { resource, label, description, errors, disabled, readOnly, required, placeholder = intl.formatMessage(messages.search), onBlur, name, id, className, labelClassName, descriptionClassName, errorsClassName, controlClassName } = props;
+	const selected = useRelationReferences(source, resource, toReferences(props.value));
+	const [query, setQuery] = useState(null);
+	const [creating, setCreating] = useState(false);
+	const [createError, setCreateError] = useState(null);
+	const editable = source !== null && disabled !== true && readOnly !== true;
+	const { items: found, isLoading: searching } = useRelationSearch(source, resource, query ?? "", { enabled: editable });
+	const sourceCreate = source?.create;
+	const create = props.onCreate !== void 0 ? props.onCreate : sourceCreate !== void 0 && source?.canCreate?.(resource) !== false ? (text) => sourceCreate.call(source, resource, text) : null;
+	const text_0 = (query ?? "").trim();
+	const items = create !== null && text_0 !== "" && !searching && ![...found, ...selected].some((item) => item.label.toLocaleLowerCase(intl.locale) === text_0.toLocaleLowerCase(intl.locale)) ? [...found, {
+		id: CREATE_ID,
+		label: intl.formatMessage(messages.createRelation, { text: text_0 })
+	}] : found;
+	const isLoading = searching || creating;
+	const allErrors = createError !== null ? [...errors ?? [], createError] : errors;
+	/** Creates an item from the text, then adds its reference with `add`. */
+	const createFrom = (add) => {
+		if (create === null) return;
+		setCreating(true);
+		setCreateError(null);
+		create(text_0).then((reference) => {
+			if (reference !== null) {
+				add(reference);
+				setQuery(null);
+			}
+		}).catch(() => setCreateError(intl.formatMessage(messages.createRelationFailed, { text: text_0 }))).finally(() => setCreating(false));
+	};
+	const removeLabel = (reference_0) => `${intl.formatMessage(messages.remove)} ${reference_0.label}`;
+	const chrome = {
+		legend: label,
+		errors: allErrors,
+		isRequired: required,
+		className,
+		legendClassName: labelClassName,
+		descriptionClassName,
+		errorsClassName
+	};
+	if (!editable) return /* @__PURE__ */ jsx(Fieldset, {
+		...chrome,
+		description: source === null && disabled !== true && readOnly !== true ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			description,
+			" ",
+			intl.formatMessage(messages.relationUnavailable)
+		] }) : description,
+		children: selected.length > 0 ? /* @__PURE__ */ jsx(References, {
+			references: selected,
+			removeLabel
+		}) : /* @__PURE__ */ jsx("span", {
+			className: RelationField_module_default.none,
+			children: intl.formatMessage(messages.noRelation)
+		})
+	});
+	const comboLabel = typeof label === "string" ? label : props["aria-label"];
+	if (props.multiple === true) {
+		const { onChange } = props;
+		const set = (next) => onChange?.(next.length > 0 ? next : null);
+		return /* @__PURE__ */ jsx(Fieldset, {
+			...chrome,
+			description,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: RelationField_module_default.multiple,
+				children: [selected.length > 0 ? /* @__PURE__ */ jsx(References, {
+					references: selected,
+					removeLabel,
+					onRemove: (reference_1) => set(selected.filter((entry) => entry.id !== reference_1.id))
+				}) : null, /* @__PURE__ */ jsx(ComboBox, {
+					"aria-label": comboLabel,
+					items: items.filter((item_0) => !selected.some((entry_0) => entry_0.id === item_0.id)).map((item_1) => ({
+						id: item_1.id,
+						label: item_1.label
+					})),
+					value: null,
+					inputValue: query ?? "",
+					onInputChange: setQuery,
+					onChange: (itemId) => {
+						if (itemId === CREATE_ID) {
+							createFrom((reference_2) => set([...selected, reference_2]));
+							return;
+						}
+						const reference_3 = found.find((item_2) => item_2.id === itemId);
+						if (reference_3 !== void 0) {
+							set([...selected, reference_3]);
+							setQuery(null);
+						}
+					},
+					isLoading,
+					placeholder,
+					emptyMessage: intl.formatMessage(messages.noResults),
+					...onBlur !== void 0 ? { onBlur: () => onBlur() } : {},
+					...name !== void 0 ? { name } : {},
+					...id !== void 0 ? { id } : {},
+					...controlClassName !== void 0 ? { controlClassName } : {}
+				})]
+			})
+		});
+	}
+	const { onChange: onChange_0 } = props;
+	const current = selected[0] ?? null;
+	const shown = current !== null && !items.some((item_3) => item_3.id === current.id) ? [current, ...items] : items;
+	return /* @__PURE__ */ jsx(ComboBox, {
+		label,
+		description,
+		errors: allErrors,
+		isRequired: required,
+		className,
+		labelClassName,
+		descriptionClassName,
+		errorsClassName,
+		...controlClassName !== void 0 ? { controlClassName } : {},
+		...props["aria-label"] !== void 0 ? { "aria-label": props["aria-label"] } : {},
+		items: shown.map((item_4) => ({
+			id: item_4.id,
+			label: item_4.label
+		})),
+		value: current?.id ?? null,
+		inputValue: query ?? current?.label ?? "",
+		onInputChange: (text_1) => {
+			setQuery(text_1);
+			if (text_1 === "" && current !== null) onChange_0?.(null);
+		},
+		onChange: (itemId_0) => {
+			if (itemId_0 === CREATE_ID) {
+				createFrom((reference_4) => onChange_0?.(reference_4));
+				return;
+			}
+			setQuery(null);
+			if (itemId_0 === null) return;
+			const reference_5 = shown.find((item_5) => item_5.id === itemId_0) ?? null;
+			if (reference_5?.id !== current?.id) onChange_0?.(reference_5);
+		},
+		isLoading,
+		placeholder,
+		emptyMessage: intl.formatMessage(messages.noResults),
+		...onBlur !== void 0 ? { onBlur: () => {
+			setQuery(null);
+			onBlur();
+		} } : { onBlur: () => setQuery(null) },
+		...name !== void 0 ? { name } : {},
+		...id !== void 0 ? { id } : {}
+	});
+}
+/** The `relation` type: `resource` and `multiple`. Items search the fields context's source. */
+function RelationFieldEntry(props) {
+	const $ = c(15);
+	const { field } = props;
+	let t0;
+	if ($[0] !== props.value) {
+		t0 = toReferences(props.value);
+		$[0] = props.value;
+		$[1] = t0;
+	} else t0 = $[1];
+	const references = t0;
+	let t1;
+	if ($[2] !== props) {
+		t1 = getFieldProps(props);
+		$[2] = props;
+		$[3] = t1;
+	} else t1 = $[3];
+	const t2 = field.resource ?? "";
+	let t3;
+	if ($[4] !== t1 || $[5] !== t2) {
+		t3 = {
+			...t1,
+			resource: t2
+		};
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	const shared = t3;
+	if (field.multiple === true) {
+		let t4;
+		if ($[7] !== props.onChange || $[8] !== references || $[9] !== shared) {
+			t4 = /* @__PURE__ */ jsx(RelationField, {
+				...shared,
+				multiple: true,
+				value: references,
+				onChange: props.onChange
+			});
+			$[7] = props.onChange;
+			$[8] = references;
+			$[9] = shared;
+			$[10] = t4;
+		} else t4 = $[10];
+		return t4;
+	}
+	const t4 = references[0] ?? null;
+	let t5;
+	if ($[11] !== props.onChange || $[12] !== shared || $[13] !== t4) {
+		t5 = /* @__PURE__ */ jsx(RelationField, {
+			...shared,
+			value: t4,
+			onChange: props.onChange
+		});
+		$[11] = props.onChange;
+		$[12] = shared;
+		$[13] = t4;
+		$[14] = t5;
+	} else t5 = $[14];
+	return t5;
+}
+//#endregion
+export { RelationField, RelationFieldEntry, useRelationSearch };
+
+//# sourceMappingURL=RelationField.js.map

package/dist/relation/RelationField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelationField.js","names":["X","text","reference","item","entry","onChange","itemId","references","_c","styles","_Fragment"],"sources":["../../src/relation/RelationField.tsx"],"sourcesContent":["import { X } from 'lucide-react';\nimport { useEffect, useState } from 'react';\n\nimport { ComboBox, Fieldset, IconButton, usePanneauIntl } from '@panneau/ui';\n\nimport { useFieldsContext } from '../shared/context';\nimport { cx } from '../shared/cx';\nimport { getFieldProps } from '../shared/entry';\nimport { messages } from '../shared/messages';\nimport {\n    type RelationReference,\n    type RelationSource,\n    toReferences,\n    useRelationReferences,\n} from '../shared/relation';\nimport type { FieldEntryProps, FieldProps } from '../shared/types';\nimport styles from './RelationField.module.css';\n\n/** The id of the \"Create “…”\" option of the picker. */\nconst CREATE_ID = '\\u0000create';\n\n/** Results of a search in a relation source, as it types. */\nexport function useRelationSearch(\n    source: RelationSource | null,\n    resource: string,\n    query: string,\n    { enabled = true, delay = 250 }: { enabled?: boolean; delay?: number } = {},\n): { items: RelationReference[]; isLoading: boolean } {\n    const [state, setState] = useState<{\n        key: string;\n        items: RelationReference[];\n        isLoading: boolean;\n    }>({ key: '', items: [], isLoading: false });\n    const key = `${resource}\\u0000${query}`;\n\n    useEffect(() => {\n        if (source === null || !enabled) {\n            return undefined;\n        }\n        const controller = new AbortController();\n        const timer = setTimeout(() => {\n            setState((current) => ({ ...current, key, isLoading: true }));\n            source\n                .search(resource, query, { signal: controller.signal })\n                .then((items) => {\n                    if (!controller.signal.aborted) {\n                        setState({ key, items, isLoading: false });\n                    }\n                })\n                .catch(() => {\n                    if (!controller.signal.aborted) {\n                        setState({ key, items: [], isLoading: false });\n                    }\n                });\n        }, delay);\n        return () => {\n            clearTimeout(timer);\n            controller.abort();\n        };\n    }, [source, resource, query, key, enabled, delay]);\n\n    return { items: state.items, isLoading: state.isLoading || state.key !== key };\n}\n\n/** Props of both single and multiple relation fields. */\nexport interface RelationFieldBaseProps extends Omit<FieldProps<never>, 'value' | 'onChange'> {\n    /** Id of the related resource, passed to the source. */\n    resource: string;\n    /** Where to search. Defaults to the fields context's. Without one, the field is read-only. */\n    source?: RelationSource | null;\n    /**\n     * Creates an item from the typed text, offered as \"Create “…”\" in the picker: it can open a\n     * dialog, and resolves with the new reference, or `null` when nothing was created. Defaults to\n     * the source's `create()`. `null` turns creating off.\n     */\n    onCreate?: ((text: string) => Promise<RelationReference | null>) | null;\n    placeholder?: string;\n    controlClassName?: string;\n}\n\nexport interface SingleRelationFieldProps extends RelationFieldBaseProps {\n    multiple?: false;\n    value?: RelationReference | null;\n    onChange?: (value: RelationReference | null) => void;\n}\n\nexport interface MultipleRelationFieldProps extends RelationFieldBaseProps {\n    multiple: true;\n    value?: readonly RelationReference[] | null;\n    /** Called with the references. An empty list is `null`. */\n    onChange?: (value: RelationReference[] | null) => void;\n}\n\nexport type RelationFieldProps = SingleRelationFieldProps | MultipleRelationFieldProps;\n\nfunction References({\n    references,\n    onRemove,\n    removeLabel,\n}: {\n    references: readonly RelationReference[];\n    onRemove?: (reference: RelationReference) => void;\n    removeLabel: (reference: RelationReference) => string;\n}) {\n    return (\n        <ul className={cx(styles.selected, onRemove === undefined && styles.readOnly)}>\n            {references.map((reference) => (\n                <li key={reference.id} className={styles.reference}>\n                    <span className={styles.referenceLabel}>{reference.label}</span>\n                    {onRemove !== undefined ? (\n                        <IconButton\n                            icon={X}\n                            size=\"sm\"\n                            label={removeLabel(reference)}\n                            showTooltip={false}\n                            onPress={() => onRemove(reference)}\n                        />\n                    ) : null}\n                </li>\n            ))}\n        </ul>\n    );\n}\n\n/**\n * A reference to an item of another resource, or several with `multiple`, picked by searching a\n * `RelationSource`. Values are references (`{ id, label }`), as items carry them; plain ids get\n * their labels from the source's `resolve()`. When the source can `create()` (or with `onCreate`),\n * the picker offers to create an item from the typed text. Without a source, the field shows its\n * references and can't change them.\n */\nexport function RelationField(props: RelationFieldProps) {\n    const intl = usePanneauIntl();\n    const context = useFieldsContext();\n    const source = props.source === undefined ? context.relationSource : props.source;\n    const {\n        resource,\n        label,\n        description,\n        errors,\n        disabled,\n        readOnly,\n        required,\n        placeholder = intl.formatMessage(messages.search),\n        onBlur,\n        name,\n        id,\n        className,\n        labelClassName,\n        descriptionClassName,\n        errorsClassName,\n        controlClassName,\n    } = props;\n    const selected = useRelationReferences(source, resource, toReferences(props.value));\n    const [query, setQuery] = useState<string | null>(null);\n    const [creating, setCreating] = useState(false);\n    const [createError, setCreateError] = useState<string | null>(null);\n    const editable = source !== null && disabled !== true && readOnly !== true;\n    const { items: found, isLoading: searching } = useRelationSearch(\n        source,\n        resource,\n        query ?? '',\n        { enabled: editable },\n    );\n    const sourceCreate = source?.create;\n    const create =\n        props.onCreate !== undefined\n            ? props.onCreate\n            : sourceCreate !== undefined && source?.canCreate?.(resource) !== false\n              ? (text: string) => sourceCreate.call(source, resource, text)\n              : null;\n    const text = (query ?? '').trim();\n    const offersCreate =\n        create !== null &&\n        text !== '' &&\n        !searching &&\n        ![...found, ...selected].some(\n            (item) =>\n                item.label.toLocaleLowerCase(intl.locale) === text.toLocaleLowerCase(intl.locale),\n        );\n    const items = offersCreate\n        ? [\n              ...found,\n              { id: CREATE_ID, label: intl.formatMessage(messages.createRelation, { text }) },\n          ]\n        : found;\n    const isLoading = searching || creating;\n    const allErrors = createError !== null ? [...(errors ?? []), createError] : errors;\n    /** Creates an item from the text, then adds its reference with `add`. */\n    const createFrom = (add: (reference: RelationReference) => void) => {\n        if (create === null) {\n            return;\n        }\n        setCreating(true);\n        setCreateError(null);\n        create(text)\n            .then((reference) => {\n                if (reference !== null) {\n                    add(reference);\n                    setQuery(null);\n                }\n            })\n            .catch(() =>\n                setCreateError(intl.formatMessage(messages.createRelationFailed, { text })),\n            )\n            .finally(() => setCreating(false));\n    };\n    const removeLabel = (reference: RelationReference) =>\n        `${intl.formatMessage(messages.remove)} ${reference.label}`;\n    const chrome = {\n        legend: label,\n        errors: allErrors,\n        isRequired: required,\n        className,\n        legendClassName: labelClassName,\n        descriptionClassName,\n        errorsClassName,\n    };\n\n    if (!editable) {\n        return (\n            <Fieldset\n                {...chrome}\n                description={\n                    source === null && disabled !== true && readOnly !== true ? (\n                        <>\n                            {description} {intl.formatMessage(messages.relationUnavailable)}\n                        </>\n                    ) : (\n                        description\n                    )\n                }\n            >\n                {selected.length > 0 ? (\n                    <References references={selected} removeLabel={removeLabel} />\n                ) : (\n                    <span className={styles.none}>{intl.formatMessage(messages.noRelation)}</span>\n                )}\n            </Fieldset>\n        );\n    }\n\n    const comboLabel = typeof label === 'string' ? label : props['aria-label'];\n\n    if (props.multiple === true) {\n        const { onChange } = props;\n        const set = (next: RelationReference[]) => onChange?.(next.length > 0 ? next : null);\n        return (\n            <Fieldset {...chrome} description={description}>\n                <div className={styles.multiple}>\n                    {selected.length > 0 ? (\n                        <References\n                            references={selected}\n                            removeLabel={removeLabel}\n                            onRemove={(reference) =>\n                                set(selected.filter((entry) => entry.id !== reference.id))\n                            }\n                        />\n                    ) : null}\n                    <ComboBox\n                        aria-label={comboLabel}\n                        items={items\n                            .filter((item) => !selected.some((entry) => entry.id === item.id))\n                            .map((item) => ({ id: item.id, label: item.label }))}\n                        value={null}\n                        inputValue={query ?? ''}\n                        onInputChange={setQuery}\n                        onChange={(itemId) => {\n                            if (itemId === CREATE_ID) {\n                                createFrom((reference) => set([...selected, reference]));\n                                return;\n                            }\n                            const reference = found.find((item) => item.id === itemId);\n                            if (reference !== undefined) {\n                                set([...selected, reference]);\n                                setQuery(null);\n                            }\n                        }}\n                        isLoading={isLoading}\n                        placeholder={placeholder}\n                        emptyMessage={intl.formatMessage(messages.noResults)}\n                        {...(onBlur !== undefined ? { onBlur: () => onBlur() } : {})}\n                        {...(name !== undefined ? { name } : {})}\n                        {...(id !== undefined ? { id } : {})}\n                        {...(controlClassName !== undefined ? { controlClassName } : {})}\n                    />\n                </div>\n            </Fieldset>\n        );\n    }\n\n    const { onChange } = props;\n    const current = selected[0] ?? null;\n    // The selected reference is among the items, so that the combo box knows its label.\n    const shown =\n        current !== null && !items.some((item) => item.id === current.id)\n            ? [current, ...items]\n            : items;\n    return (\n        <ComboBox\n            label={label}\n            description={description}\n            errors={allErrors}\n            isRequired={required}\n            className={className}\n            labelClassName={labelClassName}\n            descriptionClassName={descriptionClassName}\n            errorsClassName={errorsClassName}\n            {...(controlClassName !== undefined ? { controlClassName } : {})}\n            {...(props['aria-label'] !== undefined ? { 'aria-label': props['aria-label'] } : {})}\n            items={shown.map((item) => ({ id: item.id, label: item.label }))}\n            value={current?.id ?? null}\n            inputValue={query ?? current?.label ?? ''}\n            onInputChange={(text) => {\n                setQuery(text);\n                if (text === '' && current !== null) {\n                    onChange?.(null);\n                }\n            }}\n            onChange={(itemId) => {\n                if (itemId === CREATE_ID) {\n                    createFrom((reference) => onChange?.(reference));\n                    return;\n                }\n                setQuery(null);\n                if (itemId === null) {\n                    return;\n                }\n                const reference = shown.find((item) => item.id === itemId) ?? null;\n                if (reference?.id !== current?.id) {\n                    onChange?.(reference);\n                }\n            }}\n            isLoading={isLoading}\n            placeholder={placeholder}\n            emptyMessage={intl.formatMessage(messages.noResults)}\n            {...(onBlur !== undefined\n                ? {\n                      onBlur: () => {\n                          setQuery(null);\n                          onBlur();\n                      },\n                  }\n                : { onBlur: () => setQuery(null) })}\n            {...(name !== undefined ? { name } : {})}\n            {...(id !== undefined ? { id } : {})}\n        />\n    );\n}\n\n/** The `relation` type: `resource` and `multiple`. Items search the fields context's source. */\nexport function RelationFieldEntry(props: FieldEntryProps) {\n    const { field } = props;\n    const references = toReferences(props.value);\n    const shared = { ...getFieldProps(props), resource: field.resource ?? '' };\n    if (field.multiple === true) {\n        return <RelationField {...shared} multiple value={references} onChange={props.onChange} />;\n    }\n    return <RelationField {...shared} value={references[0] ?? null} onChange={props.onChange} />;\n}\n"],"mappings":";;;;;;;;;;;;;AAmBA,IAAM,YAAY;;AAGlB,SAAgB,kBACZ,QACA,UACA,OACA,EAAE,UAAU,MAAM,QAAQ,QAA+C,CAAC,GACxB;CAClD,MAAM,CAAC,OAAO,YAAY,SAIvB;EAAE,KAAK;EAAI,OAAO,CAAA;EAAI,WAAW;CAAM,CAAC;CAC3C,MAAM,MAAM,GAAG,SAAQ,QAAS;CAEhC,gBAAgB;EACZ,IAAI,WAAW,QAAQ,CAAC,SACpB;EAEJ,MAAM,aAAa,IAAI,gBAAgB;EACvC,MAAM,QAAQ,iBAAiB;GAC3B,UAAU,aAAa;IAAE,GAAG;IAAS;IAAK,WAAW;GAAK,EAAE;GAC5D,OACK,OAAO,UAAU,OAAO,EAAE,QAAQ,WAAW,OAAO,CAAC,CAAC,CACtD,MAAM,UAAU;IACb,IAAI,CAAC,WAAW,OAAO,SACnB,SAAS;KAAE;KAAK;KAAO,WAAW;IAAM,CAAC;GAEjD,CAAC,CAAC,CACD,YAAY;IACT,IAAI,CAAC,WAAW,OAAO,SACnB,SAAS;KAAE;KAAK,OAAO,CAAA;KAAI,WAAW;IAAM,CAAC;GAErD,CAAC;EACT,GAAG,KAAK;EACR,aAAa;GACT,aAAa,KAAK;GAClB,WAAW,MAAM;EACrB;CACJ,GAAG;EAAC;EAAQ;EAAU;EAAO;EAAK;EAAS;CAAK,CAAC;CAEjD,OAAO;EAAE,OAAO,MAAM;EAAO,WAAW,MAAM,aAAa,MAAM,QAAQ;CAAI;AACjF;AAiCA,SAAA,WAAA,IAAA;CAAA,MAAA,IAAAQ,EAAA,EAAA;CAAoB,MAAA,EAAA,YAAA,UAAA,gBAAA;CAUuB,MAAA,KAAA,aAAa,KAAA,KAAaC,6BAAM;CAAS,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAA7D,KAAA,GAAGA,6BAAM,UAAW,EAAyC;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,YAAA,EAAA,OAAA,cAAA,EAAA,OAAA,aAAA;EAAA,IAAA;EAAA,IAAA,EAAA,OAAA,YAAA,EAAA,OAAA,aAAA;GACzD,MAAA,cACZ,qBAAA,MAAA;IAAkC,WAAAA,6BAAM;IAAxC,UAAA,CACI,oBAAA,QAAA;KAAiB,WAAAA,6BAAM;KAAkB,UAAA,UAAS;IAAc,CAAA,GAC/D,aAAa,KAAA,IACV,oBAAC,YAAD;KACUT,MAAA;KACD,MAAA;KACE,OAAA,YAAY,SAAS;KACf,aAAA;KACJ,eAAM,SAAS,SAAS;IAAC,CAAA,IANzC,IASA;GAXI,GAAA,UAAS,EAWb;GACR,EAAA,KAAA;GAAA,EAAA,KAAA;GAAA,EAAA,KAAA;EAAA,OAAA,KAAA,EAAA;EAbA,KAAA,WAAU,IAAK,EAaf;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,EAAA,QAAA,IAAA;EAdN,KAAA,oBAAA,MAAA;GAAe,WAAA;GACV,UAAA;EAcA,CAAA;EAAA,EAAA,KAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAfL;AAeK;;;;;;;;AAWb,SAAgB,cAAc,OAA2B;CACrD,MAAM,OAAO,eAAe;CAC5B,MAAM,UAAU,iBAAiB;CACjC,MAAM,SAAS,MAAM,WAAW,KAAA,IAAY,QAAQ,iBAAiB,MAAM;CAC3E,MAAM,EACF,UACA,OACA,aACA,QACA,UACA,UACA,UACA,cAAc,KAAK,cAAc,SAAS,MAAM,GAChD,QACA,MACA,IACA,WACA,gBACA,sBACA,iBACA,qBACA;CACJ,MAAM,WAAW,sBAAsB,QAAQ,UAAU,aAAa,MAAM,KAAK,CAAC;CAClF,MAAM,CAAC,OAAO,YAAY,SAAwB,IAAI;CACtD,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,CAAC,aAAa,kBAAkB,SAAwB,IAAI;CAClE,MAAM,WAAW,WAAW,QAAQ,aAAa,QAAQ,aAAa;CACtE,MAAM,EAAE,OAAO,OAAO,WAAW,cAAc,kBAC3C,QACA,UACA,SAAS,IACT,EAAE,SAAS,SAAS,CACxB;CACA,MAAM,eAAe,QAAQ;CAC7B,MAAM,SACF,MAAM,aAAa,KAAA,IACb,MAAM,WACN,iBAAiB,KAAA,KAAa,QAAQ,YAAY,QAAQ,MAAM,SAC7D,SAAiB,aAAa,KAAK,QAAQ,UAAU,IAAI,IAC1D;CACZ,MAAMC,UAAQ,SAAS,GAAA,CAAI,KAAK;CAShC,MAAM,QAPF,WAAW,QACXA,WAAS,MACT,CAAC,aACD,CAAC,CAAC,GAAG,OAAO,GAAG,QAAQ,CAAC,CAAC,MACpB,SACG,KAAK,MAAM,kBAAkB,KAAK,MAAM,MAAMA,OAAK,kBAAkB,KAAK,MAAM,CACxF,IAEE,CACI,GAAG,OACH;EAAE,IAAI;EAAW,OAAO,KAAK,cAAc,SAAS,gBAAgB,EAAE,MAAAA,OAAK,CAAC;CAAE,CAAC,IAEnF;CACN,MAAM,YAAY,aAAa;CAC/B,MAAM,YAAY,gBAAgB,OAAO,CAAC,GAAI,UAAU,CAAA,GAAK,WAAW,IAAI;;CAE5E,MAAM,cAAc,QAAgD;EAChE,IAAI,WAAW,MACX;EAEJ,YAAY,IAAI;EAChB,eAAe,IAAI;EACnB,OAAOA,MAAI,CAAC,CACP,MAAM,cAAc;GACjB,IAAI,cAAc,MAAM;IACpB,IAAI,SAAS;IACb,SAAS,IAAI;GACjB;EACJ,CAAC,CAAC,CACD,YACG,eAAe,KAAK,cAAc,SAAS,sBAAsB,EAAE,MAAAA,OAAK,CAAC,CAAC,CAC9E,CAAC,CACA,cAAc,YAAY,KAAK,CAAC;CACzC;CACA,MAAM,eAAeC,gBACjB,GAAG,KAAK,cAAc,SAAS,MAAM,EAAC,GAAIA,YAAU;CACxD,MAAM,SAAS;EACX,QAAQ;EACR,QAAQ;EACR,YAAY;EACZ;EACA,iBAAiB;EACjB;EACA;CACJ;CAEA,IAAI,CAAC,UACD,OACI,oBAAC,UAAD;EACI,GAAI;EACJ,aACI,WAAW,QAAQ,aAAa,QAAQ,aAAa,OACjD,qBAAAQ,UAAA,EAAA,UAAA;GACK;GAAY;GAAE,KAAK,cAAc,SAAS,mBAAmB;EAClE,EAAA,CAAA,IAEA;EAIP,UAAA,SAAS,SAAS,IACf,oBAAC,YAAD;GAAY,YAAY;GAAuB;EAAY,CAAA,IAE3D,oBAAC,QAAD;GAAM,WAAWD,6BAAO;GAAO,UAAA,KAAK,cAAc,SAAS,UAAU;EAAQ,CAAA;CAE3E,CAAA;CAIlB,MAAM,aAAa,OAAO,UAAU,WAAW,QAAQ,MAAM;CAE7D,IAAI,MAAM,aAAa,MAAM;EACzB,MAAM,EAAE,aAAa;EACrB,MAAM,OAAO,SAA8B,WAAW,KAAK,SAAS,IAAI,OAAO,IAAI;EACnF,OACI,oBAAC,UAAD;GAAU,GAAI;GAAqB;GAC/B,UAAA,qBAAC,OAAD;IAAK,WAAWA,6BAAO;IAAvB,UAAA,CACK,SAAS,SAAS,IACf,oBAAC,YAAD;KACI,YAAY;KACC;KACb,WAAWP,gBACP,IAAI,SAAS,QAAQ,UAAU,MAAM,OAAOA,YAAU,EAAE,CAAC;IAC5D,CAAA,IAEL,MACJ,oBAAC,UAAD;KACI,cAAY;KACZ,OAAO,MACF,QAAQC,WAAS,CAAC,SAAS,MAAMC,YAAUA,QAAM,OAAOD,OAAK,EAAE,CAAC,CAAC,CACjE,KAAKA,YAAU;MAAE,IAAIA,OAAK;MAAI,OAAOA,OAAK;KAAM,EAAE;KACvD,OAAO;KACP,YAAY,SAAS;KACrB,eAAe;KACf,WAAW,WAAW;MAClB,IAAI,WAAW,WAAW;OACtB,YAAYD,gBAAc,IAAI,CAAC,GAAG,UAAUA,WAAS,CAAC,CAAC;OACvD;MACJ;MACA,MAAMA,cAAY,MAAM,MAAMC,WAASA,OAAK,OAAO,MAAM;MACzD,IAAID,gBAAc,KAAA,GAAW;OACzB,IAAI,CAAC,GAAG,UAAUA,WAAS,CAAC;OAC5B,SAAS,IAAI;MACjB;KACJ;KACW;KACE;KACb,cAAc,KAAK,cAAc,SAAS,SAAS;KACnD,GAAK,WAAW,KAAA,IAAY,EAAE,cAAc,OAAO,EAAE,IAAI,CAAC;KAC1D,GAAK,SAAS,KAAA,IAAY,EAAE,KAAK,IAAI,CAAC;KACtC,GAAK,OAAO,KAAA,IAAY,EAAE,GAAG,IAAI,CAAC;KAClC,GAAK,qBAAqB,KAAA,IAAY,EAAE,iBAAiB,IAAI,CAAC;IAAG,CAAA,CAEpE;;EACC,CAAA;CAElB;CAEA,MAAM,EAAE,UAAAG,eAAa;CACrB,MAAM,UAAU,SAAS,MAAM;CAE/B,MAAM,QACF,YAAY,QAAQ,CAAC,MAAM,MAAMF,WAASA,OAAK,OAAO,QAAQ,EAAE,IAC1D,CAAC,SAAS,GAAG,KAAK,IAClB;CACV,OACI,oBAAC,UAAD;EACW;EACM;EACb,QAAQ;EACR,YAAY;EACD;EACK;EACM;EACL;EACjB,GAAK,qBAAqB,KAAA,IAAY,EAAE,iBAAiB,IAAI,CAAC;EAC9D,GAAK,MAAM,kBAAkB,KAAA,IAAY,EAAE,cAAc,MAAM,cAAc,IAAI,CAAC;EAClF,OAAO,MAAM,KAAKA,YAAU;GAAE,IAAIA,OAAK;GAAI,OAAOA,OAAK;EAAM,EAAE;EAC/D,OAAO,SAAS,MAAM;EACtB,YAAY,SAAS,SAAS,SAAS;EACvC,gBAAgBF,WAAS;GACrB,SAASA,MAAI;GACb,IAAIA,WAAS,MAAM,YAAY,MAC3BI,aAAW,IAAI;EAEvB;EACA,WAAWC,aAAW;GAClB,IAAIA,aAAW,WAAW;IACtB,YAAYJ,gBAAcG,aAAWH,WAAS,CAAC;IAC/C;GACJ;GACA,SAAS,IAAI;GACb,IAAII,aAAW,MACX;GAEJ,MAAMJ,cAAY,MAAM,MAAMC,WAASA,OAAK,OAAOG,QAAM,KAAK;GAC9D,IAAIJ,aAAW,OAAO,SAAS,IAC3BG,aAAWH,WAAS;EAE5B;EACW;EACE;EACb,cAAc,KAAK,cAAc,SAAS,SAAS;EACnD,GAAK,WAAW,KAAA,IACV,EACI,cAAc;GACV,SAAS,IAAI;GACb,OAAO;EACX,EACJ,IACA,EAAE,cAAc,SAAS,IAAI,EAAE;EACrC,GAAK,SAAS,KAAA,IAAY,EAAE,KAAK,IAAI,CAAC;EACtC,GAAK,OAAO,KAAA,IAAY,EAAE,GAAG,IAAI,CAAC;CAAG,CAAA;AAGjD;;AAGA,SAAO,mBAAA,OAAA;CAAA,MAAA,IAAAM,EAAA,EAAA;CACH,MAAA,EAAA,UAAkB;CAAM,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,OAAA;EACL,KAAA,aAAa,MAAK,KAAM;EAAC,EAAA,KAAA,MAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAA5C,MAAA,aAAmB;CAA0B,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EACzB,KAAA,cAAc,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAY,MAAA,KAAA,MAAK,YAAL;CAAoB,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,EAAA,OAAA,IAAA;EAAzD,KAAA;GAAA,GAAK;GAAoB,UAAY;EAAqB;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAA1E,MAAA,SAAe;CACf,IAAI,MAAK,aAAc,MAAI;EAAA,IAAA;EAAA,IAAA,EAAA,OAAA,MAAA,YAAA,EAAA,OAAA,cAAA,EAAA,OAAA,QAAA;GAChB,KAAA,oBAAC,eAAD;IAAc,GAAK;IAAQ,UAAA;IAAgBD,OAAA;IAAsB,UAAA,MAAK;GAAS,CAAA;GAAI,EAAA,KAAA,MAAA;GAAA,EAAA,KAAA;GAAA,EAAA,KAAA;GAAA,EAAA,MAAA;EAAA,OAAA,KAAA,EAAA;EAAA,OAAnF;CAAmF;CAErD,MAAA,KAAA,WAAU,MAAV;CAAqB,IAAA;CAAA,IAAA,EAAA,QAAA,MAAA,YAAA,EAAA,QAAA,UAAA,EAAA,QAAA,IAAA;EAAvD,KAAA,oBAAC,eAAD;GAAc,GAAK;GAAe,OAAA;GAAiC,UAAA,MAAK;EAAS,CAAA;EAAI,EAAA,MAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAArF;AAAqF"}

package/dist/relation/RelationField.module.js

@@ -0,0 +1,20 @@
+import "./RelationField.css";
+//#region src/relation/RelationField.module.css
+var multiple = "panneau-multiple-u9IXr-";
+var selected = "panneau-selected-PL7VcQ";
+var reference = "panneau-reference-J8YpaW";
+var readOnly = "panneau-readOnly-UunIK0";
+var referenceLabel = "panneau-referenceLabel-ydQ0bU";
+var none = "panneau-none-niMk7v";
+var RelationField_module_default = {
+	multiple,
+	selected,
+	reference,
+	readOnly,
+	referenceLabel,
+	none
+};
+//#endregion
+export { RelationField_module_default as default, multiple, none, readOnly, reference, referenceLabel, selected };
+
+//# sourceMappingURL=RelationField.module.js.map

package/dist/relation/RelationField.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelationField.module.js","names":[],"sources":["../../src/relation/RelationField.module.css"],"sourcesContent":[".multiple {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-2);\n}\n\n.selected {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--panneau-space-1) var(--panneau-space-2);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.reference {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-1);\n    min-height: var(--panneau-control-height-sm);\n    max-width: 100%;\n    padding-inline: var(--panneau-space-3) var(--panneau-space-1);\n    font-size: var(--panneau-font-size-sm);\n    background-color: var(--panneau-color-surface-sunken);\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-radius: var(--panneau-radius-full);\n}\n\n.reference:only-child,\n.readOnly .reference {\n    padding-inline-end: var(--panneau-space-3);\n}\n\n.referenceLabel {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.none {\n    font-size: var(--panneau-font-size-md);\n    color: var(--panneau-color-text-muted);\n}\n"],"mappings":""}

package/dist/relation/index.d.ts

@@ -0,0 +1,3 @@
+export { type MultipleRelationFieldProps, type RelationFieldBaseProps, RelationField, RelationFieldEntry, type RelationFieldProps, type SingleRelationFieldProps, useRelationSearch, } from './RelationField';
+export { type RelationListAdapter, type RelationReference, type RelationSource, type RelationSourceOptions, createRelationSource, useRelationReferences, } from '../shared/relation';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/relation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,KAAK,0BAA0B,EAC/B,KAAK,sBAAsB,EAC3B,aAAa,EACb,kBAAkB,EAClB,KAAK,kBAAkB,EACvB,KAAK,wBAAwB,EAC7B,iBAAiB,GACpB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACH,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,qBAAqB,EAC1B,oBAAoB,EACpB,qBAAqB,GACxB,MAAM,oBAAoB,CAAC"}

package/dist/relation/index.js

@@ -0,0 +1,3 @@
+import { createRelationSource, useRelationReferences } from "../shared/relation.js";
+import { RelationField, RelationFieldEntry, useRelationSearch } from "./RelationField.js";
+export { RelationField, RelationFieldEntry, createRelationSource, useRelationReferences, useRelationSearch };

package/dist/repeater/RepeaterField.css

@@ -0,0 +1,80 @@
+.panneau-items-B5uTq4 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-3);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.panneau-item-cNAgol {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    background-color: var(--panneau-color-surface);
+    border: var(--panneau-border-width) solid var(--panneau-color-border);
+    border-radius: var(--panneau-radius-md);
+}
+
+.panneau-header-QLqgvh {
+    display: flex;
+    align-items: center;
+    gap: var(--panneau-space-2);
+    min-height: var(--panneau-control-height);
+    padding: var(--panneau-space-1) var(--panneau-space-1) var(--panneau-space-1)
+        var(--panneau-space-3);
+    background-color: var(--panneau-color-surface-sunken);
+    border-bottom: var(--panneau-border-width) solid var(--panneau-color-border);
+    border-start-start-radius: inherit;
+    border-start-end-radius: inherit;
+}
+
+.panneau-title-0eDHTu {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    font-size: var(--panneau-font-size-sm);
+    font-weight: var(--panneau-font-weight-medium);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.panneau-index-IrOBUU {
+    margin-inline-end: var(--panneau-space-2);
+    font-variant-numeric: tabular-nums;
+    color: var(--panneau-color-text-muted);
+}
+
+.panneau-tools-zbGiq2 {
+    display: flex;
+    flex: 0 0 auto;
+    gap: var(--panneau-space-1);
+}
+
+.panneau-body-iQtLK9 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-4);
+    padding: var(--panneau-space-4);
+}
+
+.panneau-empty-MST5Cj {
+    padding: var(--panneau-space-3);
+    font-size: var(--panneau-font-size-sm);
+    color: var(--panneau-color-text-muted);
+    text-align: center;
+    border: var(--panneau-border-width) dashed var(--panneau-color-border-control);
+    border-radius: var(--panneau-radius-md);
+}
+
+.panneau-footer-5jeHXH {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--panneau-space-2);
+}
+
+@media (max-width: 30rem) {
+    .panneau-body-iQtLK9 {
+        padding: var(--panneau-space-3);
+    }
+}

package/dist/repeater/RepeaterField.d.ts

@@ -0,0 +1,29 @@
+import type { BlockType, Field } from '@panneau/protocol';
+import type { FieldEntryProps, FieldProps } from '../shared/types';
+/** An item of a repeater. Typed blocks have their type in `type`. */
+export type RepeaterItem = Record<string, unknown>;
+export interface RepeaterFieldProps extends FieldProps<RepeaterItem[]> {
+    /** The fields of each item. */
+    fields?: readonly Field[];
+    /** Typed blocks: each item has a `type`, and the fields of that type. */
+    types?: readonly BlockType[];
+    /** Dot path of the list, the prefix of its fields' paths (`blocks.2.body`). Defaults to `name`. */
+    path?: string;
+    /** Fewest items: items can't be removed below it. */
+    min?: number;
+    /** Most items: no item can be added above it. */
+    max?: number;
+    itemClassName?: string;
+}
+/**
+ * A list of items, each with the same fields, or typed blocks with the fields of their type. Items
+ * can be added, moved and removed. Each field renders at the path `<list>.<index>.<field>`. An
+ * empty list is `null`.
+ */
+export declare function RepeaterField({ fields, types, path, name, value, onChange, onBlur, label, description, errors, disabled, readOnly, required, min, max, className, labelClassName, descriptionClassName, errorsClassName, itemClassName, }: RepeaterFieldProps): import("react").JSX.Element;
+/**
+ * The `repeater` type: `fields`, or `types` for typed blocks, with `min` and `max` items from its
+ * rules.
+ */
+export declare function RepeaterFieldEntry(props: FieldEntryProps): import("react").JSX.Element;
+//# sourceMappingURL=RepeaterField.d.ts.map

package/dist/repeater/RepeaterField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RepeaterField.d.ts","sourceRoot":"","sources":["../../src/repeater/RepeaterField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAe1D,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGnE,qEAAqE;AACrE,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAEnD,MAAM,WAAW,kBAAmB,SAAQ,UAAU,CAAC,YAAY,EAAE,CAAC;IAClE,+BAA+B;IAC/B,MAAM,CAAC,EAAE,SAAS,KAAK,EAAE,CAAC;IAC1B,yEAAyE;IACzE,KAAK,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;IAC7B,mGAAmG;IACnG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iDAAiD;IACjD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B;AAUD;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC1B,MAAW,EACX,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,WAAW,EACX,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAO,EACP,GAAG,EACH,SAAS,EACT,cAAc,EACd,oBAAoB,EACpB,eAAe,EACf,aAAa,GAChB,EAAE,kBAAkB,+BAuJpB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,eAAe,+BAwBxD"}