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

package/dist/relation/RelationField.js

@@ -5,10 +5,11 @@ 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 { Button, ComboBox, Fieldset, Icon, IconButton, getNamedIcon, usePanneauIntl } from "@panneau/ui";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { X } from "lucide-react";
-import { useEffect, useState } from "react";
+import { File, ImageOff, X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { Link } from "react-aria-components";
 //#region src/relation/RelationField.tsx
 /** The id of the "Create “…”" option of the picker. */
 var CREATE_ID = "\0create";
@@ -100,6 +101,7 @@ function useRelationSearch(source, resource, query, t0) {
 	} else t8 = $[13];
 	return t8;
 }
+/** The items of a compact field, as chips. */
 function References(t0) {
 	const $ = c(12);
 	const { references, onRemove, removeLabel } = t0;
@@ -149,80 +151,228 @@ function References(t0) {
 	} else t4 = $[11];
 	return t4;
 }
+/** The square before the label of a card or an option: the item's image, or the resource's icon. */
+function Thumbnail(t0) {
+	const $ = c(8);
+	const { reference, info, className } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = cx(RelationField_module_default.thumbnail, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== info || $[3] !== reference.imageUrl) {
+		t2 = reference.imageUrl !== void 0 ? /* @__PURE__ */ jsx("img", {
+			src: reference.imageUrl,
+			alt: "",
+			loading: "lazy"
+		}) : /* @__PURE__ */ jsx(Icon, { icon: info?.image === true ? ImageOff : info?.icon !== void 0 ? getNamedIcon(info.icon) : File });
+		$[2] = info;
+		$[3] = reference.imageUrl;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t1 || $[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx("span", {
+			className: t1,
+			"aria-hidden": "true",
+			children: t2
+		});
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	return t3;
+}
+/**
+* The chosen items, as cards (decision 0067): the image of each one, or its resource's icon, its
+* label, linked to the item when the source says where it opens, its description, and the buttons
+* that change or remove it.
+*/
+function RelationCards(t0) {
+	const $ = c(20);
+	const { references, info, getHref, onChange, onRemove, removeLabel, changeLabel, changeText, "aria-label": ariaLabel } = t0;
+	let t1;
+	if ($[0] !== changeLabel || $[1] !== changeText || $[2] !== getHref || $[3] !== info || $[4] !== onChange || $[5] !== onRemove || $[6] !== references || $[7] !== removeLabel) {
+		let t2;
+		if ($[9] !== changeLabel || $[10] !== changeText || $[11] !== getHref || $[12] !== info || $[13] !== onChange || $[14] !== onRemove || $[15] !== removeLabel) {
+			t2 = (reference) => {
+				const href = getHref(reference);
+				return /* @__PURE__ */ jsxs("li", {
+					className: RelationField_module_default.card,
+					"data-relation-card": "",
+					children: [
+						/* @__PURE__ */ jsx(Thumbnail, {
+							reference,
+							info
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: RelationField_module_default.cardText,
+							children: [href !== null ? /* @__PURE__ */ jsx(Link, {
+								href,
+								className: cx(RelationField_module_default.cardLabel, RelationField_module_default.link),
+								children: reference.label
+							}) : /* @__PURE__ */ jsx("span", {
+								className: RelationField_module_default.cardLabel,
+								children: reference.label
+							}), reference.description !== void 0 ? /* @__PURE__ */ jsx("span", {
+								className: RelationField_module_default.cardDescription,
+								children: reference.description
+							}) : null]
+						}),
+						onChange !== void 0 || onRemove !== void 0 ? /* @__PURE__ */ jsxs("span", {
+							className: RelationField_module_default.cardActions,
+							children: [onChange !== void 0 ? /* @__PURE__ */ jsx(Button, {
+								size: "sm",
+								appearance: "ghost",
+								"aria-label": changeLabel(reference),
+								onPress: () => onChange(reference),
+								children: changeText
+							}) : null, onRemove !== void 0 ? /* @__PURE__ */ jsx(IconButton, {
+								icon: X,
+								size: "sm",
+								label: removeLabel(reference),
+								onPress: () => onRemove(reference)
+							}) : null]
+						}) : null
+					]
+				}, reference.id);
+			};
+			$[9] = changeLabel;
+			$[10] = changeText;
+			$[11] = getHref;
+			$[12] = info;
+			$[13] = onChange;
+			$[14] = onRemove;
+			$[15] = removeLabel;
+			$[16] = t2;
+		} else t2 = $[16];
+		t1 = references.map(t2);
+		$[0] = changeLabel;
+		$[1] = changeText;
+		$[2] = getHref;
+		$[3] = info;
+		$[4] = onChange;
+		$[5] = onRemove;
+		$[6] = references;
+		$[7] = removeLabel;
+		$[8] = t1;
+	} else t1 = $[8];
+	let t2;
+	if ($[17] !== ariaLabel || $[18] !== t1) {
+		t2 = /* @__PURE__ */ jsx("ul", {
+			className: RelationField_module_default.cards,
+			"aria-label": ariaLabel,
+			children: t1
+		});
+		$[17] = ariaLabel;
+		$[18] = t1;
+		$[19] = t2;
+	} else t2 = $[19];
+	return t2;
+}
 /**
 * 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.
+* their labels from the source's `resolve()`. The chosen items show as cards (decision 0067), with
+* their image and their description when the source gives them, a link to each one
+* (`getItemHref()`), and buttons to change or remove them. 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 items and can't change them.
 */
 function RelationField(props) {
-	const $ = c(143);
+	const $ = c(159);
 	const intl = usePanneauIntl();
 	const context = useFieldsContext();
 	const source = props.source === void 0 ? context.relationSource : props.source;
-	const { resource, label, description, errors, disabled, readOnly, required, onBlur, name, id, className, labelClassName, descriptionClassName, errorsClassName, controlClassName } = props;
-	let t0;
+	const { resource, label, description, errors, disabled, readOnly, required, onBlur, name, id, className, labelClassName, descriptionClassName, errorsClassName, controlClassName, compact: t0 } = props;
+	const compact = t0 === void 0 ? false : t0;
+	let t1;
 	if ($[0] !== intl || $[1] !== props.placeholder) {
-		t0 = props.placeholder ?? intl.formatMessage(messages.search);
+		t1 = props.placeholder ?? intl.formatMessage(messages.search);
 		$[0] = intl;
 		$[1] = props.placeholder;
-		$[2] = t0;
-	} else t0 = $[2];
-	const placeholder = t0;
-	let t1;
+		$[2] = t1;
+	} else t1 = $[2];
+	const placeholder = t1;
+	let t2;
 	if ($[3] !== props.value) {
-		t1 = toReferences(props.value);
+		t2 = toReferences(props.value);
 		$[3] = props.value;
-		$[4] = t1;
-	} else t1 = $[4];
-	const selected = useRelationReferences(source, resource, t1);
+		$[4] = t2;
+	} else t2 = $[4];
+	const selected = useRelationReferences(source, resource, t2);
+	let t3;
+	if ($[5] !== resource || $[6] !== source) {
+		t3 = source?.describe?.(resource) ?? null;
+		$[5] = resource;
+		$[6] = source;
+		$[7] = t3;
+	} else t3 = $[7];
+	const info = t3;
 	const [query, setQuery] = useState(null);
 	const [creating, setCreating] = useState(false);
 	const [createError, setCreateError] = useState(null);
+	const [changing, setChanging] = useState(false);
+	const container = useRef(null);
+	const focusNext = useRef(null);
+	let t4;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = () => {
+			const target = focusNext.current;
+			if (target === null) return;
+			focusNext.current = null;
+			const cards = container.current?.querySelectorAll("[data-relation-card]") ?? [];
+			const card = target !== "picker" ? cards[Math.min(target, cards.length - 1)] : void 0;
+			(card !== void 0 ? card.querySelector("button") : container.current?.querySelector("input"))?.focus();
+		};
+		$[8] = t4;
+	} else t4 = $[8];
+	useEffect(t4);
 	const editable = source !== null && disabled !== true && readOnly !== true;
-	let t2;
-	if ($[5] !== editable) {
-		t2 = { enabled: editable };
-		$[5] = editable;
-		$[6] = t2;
-	} else t2 = $[6];
-	const { items: found, isLoading: searching } = useRelationSearch(source, resource, query ?? "", t2);
-	const sourceCreate = source?.create;
-	let t3;
-	if ($[7] !== props.onCreate || $[8] !== resource || $[9] !== source || $[10] !== sourceCreate) {
-		t3 = props.onCreate !== void 0 ? props.onCreate : sourceCreate !== void 0 && source?.canCreate?.(resource) !== false ? (text) => sourceCreate.call(source, resource, text) : null;
-		$[7] = props.onCreate;
-		$[8] = resource;
-		$[9] = source;
-		$[10] = sourceCreate;
-		$[11] = t3;
-	} else t3 = $[11];
-	const create = t3;
-	const t4 = query ?? "";
-	let allErrors;
-	let createFrom;
-	let isLoading;
-	let items;
 	let t5;
-	if ($[12] !== className || $[13] !== controlClassName || $[14] !== create || $[15] !== createError || $[16] !== creating || $[17] !== description || $[18] !== descriptionClassName || $[19] !== disabled || $[20] !== editable || $[21] !== errors || $[22] !== errorsClassName || $[23] !== found || $[24] !== id || $[25] !== intl || $[26] !== label || $[27] !== labelClassName || $[28] !== name || $[29] !== onBlur || $[30] !== placeholder || $[31] !== props || $[32] !== query || $[33] !== readOnly || $[34] !== required || $[35] !== searching || $[36] !== selected || $[37] !== source || $[38] !== t4) {
-		t5 = Symbol.for("react.early_return_sentinel");
+	if ($[9] !== editable) {
+		t5 = { enabled: editable };
+		$[9] = editable;
+		$[10] = t5;
+	} else t5 = $[10];
+	const { items: found, isLoading: searching } = useRelationSearch(source, resource, query ?? "", t5);
+	const sourceCreate = source?.create;
+	let t6;
+	if ($[11] !== props.onCreate || $[12] !== resource || $[13] !== source || $[14] !== sourceCreate) {
+		t6 = props.onCreate !== void 0 ? props.onCreate : sourceCreate !== void 0 && source?.canCreate?.(resource) !== false ? (text) => sourceCreate.call(source, resource, text) : null;
+		$[11] = props.onCreate;
+		$[12] = resource;
+		$[13] = source;
+		$[14] = sourceCreate;
+		$[15] = t6;
+	} else t6 = $[15];
+	const create = t6;
+	const t7 = query ?? "";
+	let T0;
+	let t10;
+	let t11;
+	let t12;
+	let t13;
+	let t14;
+	let t8;
+	let t9;
+	if ($[16] !== changing || $[17] !== className || $[18] !== compact || $[19] !== controlClassName || $[20] !== create || $[21] !== createError || $[22] !== creating || $[23] !== description || $[24] !== descriptionClassName || $[25] !== disabled || $[26] !== editable || $[27] !== errors || $[28] !== errorsClassName || $[29] !== found || $[30] !== id || $[31] !== info || $[32] !== intl || $[33] !== label || $[34] !== labelClassName || $[35] !== name || $[36] !== onBlur || $[37] !== placeholder || $[38] !== props || $[39] !== query || $[40] !== readOnly || $[41] !== required || $[42] !== resource || $[43] !== searching || $[44] !== selected || $[45] !== source || $[46] !== t7) {
+		t14 = Symbol.for("react.early_return_sentinel");
 		bb0: {
-			const text_0 = t4.trim();
-			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;
-			isLoading = searching || creating;
-			let t6;
-			if ($[44] !== createError || $[45] !== errors) {
-				t6 = createError !== null ? [...errors ?? [], createError] : errors;
-				$[44] = createError;
-				$[45] = errors;
-				$[46] = t6;
-			} else t6 = $[46];
-			allErrors = t6;
-			createFrom = (add) => {
+			const text_0 = t7.trim();
+			const offersCreate = create !== null && text_0 !== "" && !searching && ![...found, ...selected].some((item) => item.label.toLocaleLowerCase(intl.locale) === text_0.toLocaleLowerCase(intl.locale));
+			const isLoading = searching || creating;
+			let t15;
+			if ($[55] !== createError || $[56] !== errors) {
+				t15 = createError !== null ? [...errors ?? [], createError] : errors;
+				$[55] = createError;
+				$[56] = errors;
+				$[57] = t15;
+			} else t15 = $[57];
+			const allErrors = t15;
+			const createFrom = (add) => {
 				if (create === null) return;
 				setCreating(true);
 				setCreateError(null);
@@ -233,16 +383,54 @@ function RelationField(props) {
 					}
 				}).catch(() => setCreateError(intl.formatMessage(messages.createRelationFailed, { text: text_0 }))).finally(() => setCreating(false));
 			};
-			let t7;
-			if ($[47] !== intl) {
-				t7 = (reference_0) => `${intl.formatMessage(messages.remove)} ${reference_0.label}`;
-				$[47] = intl;
-				$[48] = t7;
-			} else t7 = $[48];
-			const removeLabel = t7;
-			let t8;
-			if ($[49] !== allErrors || $[50] !== className || $[51] !== descriptionClassName || $[52] !== errorsClassName || $[53] !== label || $[54] !== labelClassName || $[55] !== required) {
-				t8 = {
+			let t16;
+			if ($[58] !== intl) {
+				t16 = (reference_0) => `${intl.formatMessage(messages.remove)} ${reference_0.label}`;
+				$[58] = intl;
+				$[59] = t16;
+			} else t16 = $[59];
+			const removeLabel = t16;
+			let t17;
+			if ($[60] !== intl) {
+				t17 = (reference_1) => intl.formatMessage(messages.changeRelation, { item: reference_1.label });
+				$[60] = intl;
+				$[61] = t17;
+			} else t17 = $[61];
+			const changeLabel = t17;
+			let t18;
+			if ($[62] !== resource || $[63] !== source) {
+				t18 = (reference_2) => source?.getItemHref?.(resource, reference_2.id) ?? null;
+				$[62] = resource;
+				$[63] = source;
+				$[64] = t18;
+			} else t18 = $[64];
+			const getHref = t18;
+			let t19;
+			if ($[65] !== intl) {
+				t19 = intl.formatMessage(messages.change);
+				$[65] = intl;
+				$[66] = t19;
+			} else t19 = $[66];
+			let t20;
+			if ($[67] !== changeLabel || $[68] !== getHref || $[69] !== info || $[70] !== removeLabel || $[71] !== t19) {
+				t20 = {
+					info,
+					getHref,
+					removeLabel,
+					changeLabel,
+					changeText: t19
+				};
+				$[67] = changeLabel;
+				$[68] = getHref;
+				$[69] = info;
+				$[70] = removeLabel;
+				$[71] = t19;
+				$[72] = t20;
+			} else t20 = $[72];
+			const cards_0 = t20;
+			let t21;
+			if ($[73] !== allErrors || $[74] !== className || $[75] !== descriptionClassName || $[76] !== errorsClassName || $[77] !== label || $[78] !== labelClassName || $[79] !== required) {
+				t21 = {
 					legend: label,
 					errors: allErrors,
 					isRequired: required,
@@ -251,358 +439,432 @@ function RelationField(props) {
 					descriptionClassName,
 					errorsClassName
 				};
-				$[49] = allErrors;
-				$[50] = className;
-				$[51] = descriptionClassName;
-				$[52] = errorsClassName;
-				$[53] = label;
-				$[54] = labelClassName;
-				$[55] = required;
-				$[56] = t8;
-			} else t8 = $[56];
-			const chrome = t8;
+				$[73] = allErrors;
+				$[74] = className;
+				$[75] = descriptionClassName;
+				$[76] = errorsClassName;
+				$[77] = label;
+				$[78] = labelClassName;
+				$[79] = required;
+				$[80] = t21;
+			} else t21 = $[80];
+			const chrome = t21;
+			const comboLabel = typeof label === "string" ? label : props["aria-label"];
+			const options = (exclude) => [...found.filter((item_0) => !exclude.some((entry) => entry.id === item_0.id)).map((item_1) => ({
+				id: item_1.id,
+				label: item_1.label,
+				...item_1.description !== void 0 ? { description: item_1.description } : {},
+				...info?.image === true || item_1.imageUrl !== void 0 ? { prefix: /* @__PURE__ */ jsx(Thumbnail, {
+					reference: item_1,
+					info,
+					className: RelationField_module_default.optionThumbnail
+				}) } : {}
+			})), ...offersCreate ? [{
+				id: CREATE_ID,
+				label: intl.formatMessage(messages.createRelation, { text: text_0 })
+			}] : []];
+			const pick = (itemId, add_0) => {
+				if (itemId === CREATE_ID) {
+					createFrom(add_0);
+					return;
+				}
+				const reference_3 = found.find((item_2) => item_2.id === itemId);
+				if (reference_3 !== void 0) {
+					add_0(reference_3);
+					setQuery(null);
+				}
+			};
+			const t22 = query ?? "";
+			let t23;
+			if ($[81] !== intl) {
+				t23 = intl.formatMessage(messages.noResults);
+				$[81] = intl;
+				$[82] = t23;
+			} else t23 = $[82];
+			let t24;
+			if ($[83] !== onBlur) {
+				t24 = onBlur !== void 0 ? { onBlur: () => onBlur() } : {};
+				$[83] = onBlur;
+				$[84] = t24;
+			} else t24 = $[84];
+			let t25;
+			if ($[85] !== name) {
+				t25 = name !== void 0 ? { name } : {};
+				$[85] = name;
+				$[86] = t25;
+			} else t25 = $[86];
+			let t26;
+			if ($[87] !== id) {
+				t26 = id !== void 0 ? { id } : {};
+				$[87] = id;
+				$[88] = t26;
+			} else t26 = $[88];
+			let t27;
+			if ($[89] !== controlClassName) {
+				t27 = controlClassName !== void 0 ? { controlClassName } : {};
+				$[89] = controlClassName;
+				$[90] = t27;
+			} else t27 = $[90];
+			let t28;
+			if ($[91] !== comboLabel || $[92] !== isLoading || $[93] !== placeholder || $[94] !== required || $[95] !== t22 || $[96] !== t23 || $[97] !== t24 || $[98] !== t25 || $[99] !== t26 || $[100] !== t27) {
+				t28 = {
+					"aria-label": comboLabel,
+					inputValue: t22,
+					onInputChange: setQuery,
+					isLoading,
+					isRequired: required,
+					placeholder,
+					emptyMessage: t23,
+					...t24,
+					...t25,
+					...t26,
+					...t27
+				};
+				$[91] = comboLabel;
+				$[92] = isLoading;
+				$[93] = placeholder;
+				$[94] = required;
+				$[95] = t22;
+				$[96] = t23;
+				$[97] = t24;
+				$[98] = t25;
+				$[99] = t26;
+				$[100] = t27;
+				$[101] = t28;
+			} else t28 = $[101];
+			const pickerProps = t28;
 			if (!editable) {
-				let t9;
-				if ($[57] !== description || $[58] !== disabled || $[59] !== intl || $[60] !== readOnly || $[61] !== source) {
-					t9 = source === null && disabled !== true && readOnly !== true ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				let t29;
+				if ($[102] !== description || $[103] !== disabled || $[104] !== intl || $[105] !== readOnly || $[106] !== source) {
+					t29 = source === null && disabled !== true && readOnly !== true ? /* @__PURE__ */ jsxs(Fragment, { children: [
 						description,
 						" ",
 						intl.formatMessage(messages.relationUnavailable)
 					] }) : description;
-					$[57] = description;
-					$[58] = disabled;
-					$[59] = intl;
-					$[60] = readOnly;
-					$[61] = source;
-					$[62] = t9;
-				} else t9 = $[62];
-				let t10;
-				if ($[63] !== intl || $[64] !== removeLabel || $[65] !== selected) {
-					t10 = selected.length > 0 ? /* @__PURE__ */ jsx(References, {
+					$[102] = description;
+					$[103] = disabled;
+					$[104] = intl;
+					$[105] = readOnly;
+					$[106] = source;
+					$[107] = t29;
+				} else t29 = $[107];
+				let t30;
+				if ($[108] !== cards_0 || $[109] !== compact || $[110] !== intl || $[111] !== removeLabel || $[112] !== selected) {
+					t30 = selected.length > 0 && compact ? /* @__PURE__ */ jsx(References, {
 						references: selected,
 						removeLabel
+					}) : selected.length > 0 ? /* @__PURE__ */ jsx(RelationCards, {
+						...cards_0,
+						references: selected
 					}) : /* @__PURE__ */ jsx("span", {
 						className: RelationField_module_default.none,
 						children: intl.formatMessage(messages.noRelation)
 					});
-					$[63] = intl;
-					$[64] = removeLabel;
-					$[65] = selected;
-					$[66] = t10;
-				} else t10 = $[66];
-				let t11;
-				if ($[67] !== chrome || $[68] !== t10 || $[69] !== t9) {
-					t11 = /* @__PURE__ */ jsx(Fieldset, {
+					$[108] = cards_0;
+					$[109] = compact;
+					$[110] = intl;
+					$[111] = removeLabel;
+					$[112] = selected;
+					$[113] = t30;
+				} else t30 = $[113];
+				let t31;
+				if ($[114] !== chrome || $[115] !== t29 || $[116] !== t30) {
+					t31 = /* @__PURE__ */ jsx(Fieldset, {
 						...chrome,
-						description: t9,
-						children: t10
+						description: t29,
+						children: t30
 					});
-					$[67] = chrome;
-					$[68] = t10;
-					$[69] = t9;
-					$[70] = t11;
-				} else t11 = $[70];
-				t5 = t11;
+					$[114] = chrome;
+					$[115] = t29;
+					$[116] = t30;
+					$[117] = t31;
+				} else t31 = $[117];
+				t14 = t31;
 				break bb0;
 			}
-			const comboLabel = typeof label === "string" ? label : props["aria-label"];
 			if (props.multiple === true) {
 				const { onChange } = props;
-				let t9;
-				if ($[71] !== onChange) {
-					t9 = (next) => onChange?.(next.length > 0 ? next : null);
-					$[71] = onChange;
-					$[72] = t9;
-				} else t9 = $[72];
-				const set = t9;
-				let t10;
-				if ($[73] !== removeLabel || $[74] !== selected || $[75] !== set) {
-					t10 = selected.length > 0 ? /* @__PURE__ */ jsx(References, {
+				let t29;
+				if ($[118] !== onChange) {
+					t29 = (next) => onChange?.(next.length > 0 ? next : null);
+					$[118] = onChange;
+					$[119] = t29;
+				} else t29 = $[119];
+				const set = t29;
+				let t30;
+				if ($[120] !== cards_0 || $[121] !== compact || $[122] !== removeLabel || $[123] !== selected || $[124] !== set) {
+					t30 = selected.length > 0 && compact ? /* @__PURE__ */ jsx(References, {
 						references: selected,
 						removeLabel,
-						onRemove: (reference_1) => set(selected.filter((entry) => entry.id !== reference_1.id))
+						onRemove: (reference_4) => set(selected.filter((entry_0) => entry_0.id !== reference_4.id))
+					}) : selected.length > 0 ? /* @__PURE__ */ jsx(RelationCards, {
+						...cards_0,
+						references: selected,
+						onRemove: (reference_5) => {
+							set(selected.filter((entry_1) => entry_1.id !== reference_5.id));
+							focusNext.current = selected.indexOf(reference_5);
+						}
 					}) : null;
-					$[73] = removeLabel;
-					$[74] = selected;
-					$[75] = set;
-					$[76] = t10;
-				} else t10 = $[76];
-				let t11;
-				if ($[77] !== selected) {
-					t11 = (item_0) => !selected.some((entry_0) => entry_0.id === item_0.id);
-					$[77] = selected;
-					$[78] = t11;
-				} else t11 = $[78];
-				const t12 = items.filter(t11).map(_temp);
-				let t13;
-				if ($[79] !== intl) {
-					t13 = intl.formatMessage(messages.noResults);
-					$[79] = intl;
-					$[80] = t13;
-				} else t13 = $[80];
-				let t14;
-				if ($[81] !== onBlur) {
-					t14 = onBlur !== void 0 ? { onBlur: () => onBlur() } : {};
-					$[81] = onBlur;
-					$[82] = t14;
-				} else t14 = $[82];
-				let t15;
-				if ($[83] !== name) {
-					t15 = name !== void 0 ? { name } : {};
-					$[83] = name;
-					$[84] = t15;
-				} else t15 = $[84];
-				let t16;
-				if ($[85] !== id) {
-					t16 = id !== void 0 ? { id } : {};
-					$[85] = id;
-					$[86] = t16;
-				} else t16 = $[86];
-				let t17;
-				if ($[87] !== controlClassName) {
-					t17 = controlClassName !== void 0 ? { controlClassName } : {};
-					$[87] = controlClassName;
-					$[88] = t17;
-				} else t17 = $[88];
-				const t18 = /* @__PURE__ */ jsx(ComboBox, {
-					"aria-label": comboLabel,
-					items: t12,
-					value: null,
-					inputValue: query ?? "",
-					onInputChange: setQuery,
-					onChange: (itemId) => {
-						if (itemId === CREATE_ID) {
-							createFrom((reference_2) => set([...selected, reference_2]));
+					$[120] = cards_0;
+					$[121] = compact;
+					$[122] = removeLabel;
+					$[123] = selected;
+					$[124] = set;
+					$[125] = t30;
+				} else t30 = $[125];
+				const t31 = /* @__PURE__ */ jsxs("div", {
+					ref: container,
+					className: RelationField_module_default.multiple,
+					children: [t30, /* @__PURE__ */ jsx(ComboBox, {
+						...pickerProps,
+						items: options(selected),
+						value: null,
+						onChange: (itemId_0) => pick(itemId_0, (reference_6) => set([...selected, reference_6]))
+					})]
+				});
+				let t32;
+				if ($[126] !== chrome || $[127] !== description || $[128] !== t31) {
+					t32 = /* @__PURE__ */ jsx(Fieldset, {
+						...chrome,
+						description,
+						children: t31
+					});
+					$[126] = chrome;
+					$[127] = description;
+					$[128] = t31;
+					$[129] = t32;
+				} else t32 = $[129];
+				t14 = t32;
+				break bb0;
+			}
+			const { onChange: onChange_0 } = props;
+			const current = selected[0] ?? null;
+			const items = options([]);
+			const shown = current !== null && !items.some((item_3) => item_3.id === current.id) ? [current, ...items] : items;
+			if (compact) {
+				let t29;
+				if ($[130] !== controlClassName) {
+					t29 = controlClassName !== void 0 ? { controlClassName } : {};
+					$[130] = controlClassName;
+					$[131] = t29;
+				} else t29 = $[131];
+				let t30;
+				if ($[132] !== props) {
+					t30 = props["aria-label"] !== void 0 ? { "aria-label": props["aria-label"] } : {};
+					$[132] = props;
+					$[133] = t30;
+				} else t30 = $[133];
+				const t31 = shown.map(_temp);
+				let t32;
+				if ($[134] !== current || $[135] !== onChange_0) {
+					t32 = (text_1) => {
+						setQuery(text_1);
+						if (text_1 === "" && current !== null) onChange_0?.(null);
+					};
+					$[134] = current;
+					$[135] = onChange_0;
+					$[136] = t32;
+				} else t32 = $[136];
+				let t33;
+				if ($[137] !== intl) {
+					t33 = intl.formatMessage(messages.noResults);
+					$[137] = intl;
+					$[138] = t33;
+				} else t33 = $[138];
+				let t34;
+				if ($[139] !== onBlur) {
+					t34 = onBlur !== void 0 ? { onBlur: () => {
+						setQuery(null);
+						onBlur();
+					} } : { onBlur: () => setQuery(null) };
+					$[139] = onBlur;
+					$[140] = t34;
+				} else t34 = $[140];
+				let t35;
+				if ($[141] !== name) {
+					t35 = name !== void 0 ? { name } : {};
+					$[141] = name;
+					$[142] = t35;
+				} else t35 = $[142];
+				let t36;
+				if ($[143] !== id) {
+					t36 = id !== void 0 ? { id } : {};
+					$[143] = id;
+					$[144] = t36;
+				} else t36 = $[144];
+				t14 = /* @__PURE__ */ jsx(ComboBox, {
+					label,
+					description,
+					errors: allErrors,
+					isRequired: required,
+					className,
+					labelClassName,
+					descriptionClassName,
+					errorsClassName,
+					...t29,
+					...t30,
+					items: t31,
+					value: current?.id ?? null,
+					inputValue: query ?? current?.label ?? "",
+					onInputChange: t32,
+					onChange: (itemId_1) => {
+						if (itemId_1 === CREATE_ID) {
+							createFrom((reference_7) => onChange_0?.(reference_7));
 							return;
 						}
-						const reference_3 = found.find((item_2) => item_2.id === itemId);
-						if (reference_3 !== void 0) {
-							set([...selected, reference_3]);
-							setQuery(null);
-						}
+						setQuery(null);
+						if (itemId_1 === null) return;
+						const reference_8 = shown.find((item_5) => item_5.id === itemId_1) ?? null;
+						if (reference_8?.id !== current?.id) onChange_0?.(reference_8);
 					},
 					isLoading,
 					placeholder,
-					emptyMessage: t13,
-					...t14,
-					...t15,
-					...t16,
-					...t17
+					emptyMessage: t33,
+					...t34,
+					...t35,
+					...t36
 				});
-				let t19;
-				if ($[89] !== t10 || $[90] !== t18) {
-					t19 = /* @__PURE__ */ jsxs("div", {
-						className: RelationField_module_default.multiple,
-						children: [t10, t18]
-					});
-					$[89] = t10;
-					$[90] = t18;
-					$[91] = t19;
-				} else t19 = $[91];
-				let t20;
-				if ($[92] !== chrome || $[93] !== description || $[94] !== t19) {
-					t20 = /* @__PURE__ */ jsx(Fieldset, {
-						...chrome,
-						description,
-						children: t19
-					});
-					$[92] = chrome;
-					$[93] = description;
-					$[94] = t19;
-					$[95] = t20;
-				} else t20 = $[95];
-				t5 = t20;
 				break bb0;
 			}
+			let t29;
+			if ($[145] === Symbol.for("react.memo_cache_sentinel")) {
+				t29 = () => {
+					setChanging(false);
+					setQuery(null);
+					focusNext.current = 0;
+				};
+				$[145] = t29;
+			} else t29 = $[145];
+			const cancel = t29;
+			T0 = Fieldset;
+			t12 = chrome;
+			t13 = description;
+			t8 = container;
+			t9 = RelationField_module_default.single;
+			if ($[146] !== changing || $[147] !== current) {
+				t10 = (event) => {
+					if (event.key === "Escape" && changing && current !== null) cancel();
+				};
+				$[146] = changing;
+				$[147] = current;
+				$[148] = t10;
+			} else t10 = $[148];
+			t11 = current !== null && !changing ? /* @__PURE__ */ jsx(RelationCards, {
+				...cards_0,
+				references: [current],
+				onChange: () => {
+					setChanging(true);
+					focusNext.current = "picker";
+				},
+				onRemove: () => {
+					onChange_0?.(null);
+					focusNext.current = "picker";
+				}
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: RelationField_module_default.picker,
+				children: [/* @__PURE__ */ jsx(ComboBox, {
+					...pickerProps,
+					items: options(current !== null ? [current] : []),
+					value: null,
+					onChange: (itemId_2) => pick(itemId_2, (reference_9) => {
+						if (reference_9.id !== current?.id) onChange_0?.(reference_9);
+						setChanging(false);
+						focusNext.current = 0;
+					})
+				}), changing && current !== null ? /* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					appearance: "ghost",
+					onPress: cancel,
+					children: intl.formatMessage(messages.cancelChange)
+				}) : null]
+			});
 		}
-		$[12] = className;
-		$[13] = controlClassName;
-		$[14] = create;
-		$[15] = createError;
-		$[16] = creating;
-		$[17] = description;
-		$[18] = descriptionClassName;
-		$[19] = disabled;
-		$[20] = editable;
-		$[21] = errors;
-		$[22] = errorsClassName;
-		$[23] = found;
-		$[24] = id;
-		$[25] = intl;
-		$[26] = label;
-		$[27] = labelClassName;
-		$[28] = name;
-		$[29] = onBlur;
-		$[30] = placeholder;
-		$[31] = props;
-		$[32] = query;
-		$[33] = readOnly;
-		$[34] = required;
-		$[35] = searching;
-		$[36] = selected;
-		$[37] = source;
-		$[38] = t4;
-		$[39] = allErrors;
-		$[40] = createFrom;
-		$[41] = isLoading;
-		$[42] = items;
-		$[43] = t5;
+		$[16] = changing;
+		$[17] = className;
+		$[18] = compact;
+		$[19] = controlClassName;
+		$[20] = create;
+		$[21] = createError;
+		$[22] = creating;
+		$[23] = description;
+		$[24] = descriptionClassName;
+		$[25] = disabled;
+		$[26] = editable;
+		$[27] = errors;
+		$[28] = errorsClassName;
+		$[29] = found;
+		$[30] = id;
+		$[31] = info;
+		$[32] = intl;
+		$[33] = label;
+		$[34] = labelClassName;
+		$[35] = name;
+		$[36] = onBlur;
+		$[37] = placeholder;
+		$[38] = props;
+		$[39] = query;
+		$[40] = readOnly;
+		$[41] = required;
+		$[42] = resource;
+		$[43] = searching;
+		$[44] = selected;
+		$[45] = source;
+		$[46] = t7;
+		$[47] = T0;
+		$[48] = t10;
+		$[49] = t11;
+		$[50] = t12;
+		$[51] = t13;
+		$[52] = t14;
+		$[53] = t8;
+		$[54] = t9;
 	} else {
-		allErrors = $[39];
-		createFrom = $[40];
-		isLoading = $[41];
-		items = $[42];
-		t5 = $[43];
+		T0 = $[47];
+		t10 = $[48];
+		t11 = $[49];
+		t12 = $[50];
+		t13 = $[51];
+		t14 = $[52];
+		t8 = $[53];
+		t9 = $[54];
 	}
-	if (t5 !== Symbol.for("react.early_return_sentinel")) return t5;
-	const { onChange: onChange_0 } = props;
-	const current = selected[0] ?? null;
-	let t6;
-	if ($[96] !== current || $[97] !== items) {
-		t6 = current !== null && !items.some((item_3) => item_3.id === current.id) ? [current, ...items] : items;
-		$[96] = current;
-		$[97] = items;
-		$[98] = t6;
-	} else t6 = $[98];
-	const shown = t6;
-	let t7;
-	if ($[99] !== controlClassName) {
-		t7 = controlClassName !== void 0 ? { controlClassName } : {};
-		$[99] = controlClassName;
-		$[100] = t7;
-	} else t7 = $[100];
-	let t8;
-	if ($[101] !== props) {
-		t8 = props["aria-label"] !== void 0 ? { "aria-label": props["aria-label"] } : {};
-		$[101] = props;
-		$[102] = t8;
-	} else t8 = $[102];
-	let t9;
-	if ($[103] !== shown) {
-		t9 = shown.map(_temp2);
-		$[103] = shown;
-		$[104] = t9;
-	} else t9 = $[104];
-	const t10 = current?.id ?? null;
-	const t11 = query ?? current?.label ?? "";
-	let t12;
-	if ($[105] !== current || $[106] !== onChange_0) {
-		t12 = (text_1) => {
-			setQuery(text_1);
-			if (text_1 === "" && current !== null) onChange_0?.(null);
-		};
-		$[105] = current;
-		$[106] = onChange_0;
-		$[107] = t12;
-	} else t12 = $[107];
-	let t13;
-	if ($[108] !== createFrom || $[109] !== current?.id || $[110] !== onChange_0 || $[111] !== shown) {
-		t13 = (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);
-		};
-		$[108] = createFrom;
-		$[109] = current?.id;
-		$[110] = onChange_0;
-		$[111] = shown;
-		$[112] = t13;
-	} else t13 = $[112];
-	let t14;
-	if ($[113] !== intl) {
-		t14 = intl.formatMessage(messages.noResults);
-		$[113] = intl;
-		$[114] = t14;
-	} else t14 = $[114];
+	if (t14 !== Symbol.for("react.early_return_sentinel")) return t14;
 	let t15;
-	if ($[115] !== onBlur) {
-		t15 = onBlur !== void 0 ? { onBlur: () => {
-			setQuery(null);
-			onBlur();
-		} } : { onBlur: () => setQuery(null) };
-		$[115] = onBlur;
-		$[116] = t15;
-	} else t15 = $[116];
+	if ($[149] !== t10 || $[150] !== t11 || $[151] !== t8 || $[152] !== t9) {
+		t15 = /* @__PURE__ */ jsx("div", {
+			ref: t8,
+			className: t9,
+			onKeyDown: t10,
+			children: t11
+		});
+		$[149] = t10;
+		$[150] = t11;
+		$[151] = t8;
+		$[152] = t9;
+		$[153] = t15;
+	} else t15 = $[153];
 	let t16;
-	if ($[117] !== name) {
-		t16 = name !== void 0 ? { name } : {};
-		$[117] = name;
-		$[118] = t16;
-	} else t16 = $[118];
-	let t17;
-	if ($[119] !== id) {
-		t17 = id !== void 0 ? { id } : {};
-		$[119] = id;
-		$[120] = t17;
-	} else t17 = $[120];
-	let t18;
-	if ($[121] !== allErrors || $[122] !== className || $[123] !== description || $[124] !== descriptionClassName || $[125] !== errorsClassName || $[126] !== isLoading || $[127] !== label || $[128] !== labelClassName || $[129] !== placeholder || $[130] !== required || $[131] !== t10 || $[132] !== t11 || $[133] !== t12 || $[134] !== t13 || $[135] !== t14 || $[136] !== t15 || $[137] !== t16 || $[138] !== t17 || $[139] !== t7 || $[140] !== t8 || $[141] !== t9) {
-		t18 = /* @__PURE__ */ jsx(ComboBox, {
-			label,
-			description,
-			errors: allErrors,
-			isRequired: required,
-			className,
-			labelClassName,
-			descriptionClassName,
-			errorsClassName,
-			...t7,
-			...t8,
-			items: t9,
-			value: t10,
-			inputValue: t11,
-			onInputChange: t12,
-			onChange: t13,
-			isLoading,
-			placeholder,
-			emptyMessage: t14,
-			...t15,
-			...t16,
-			...t17
+	if ($[154] !== T0 || $[155] !== t12 || $[156] !== t13 || $[157] !== t15) {
+		t16 = /* @__PURE__ */ jsx(T0, {
+			...t12,
+			description: t13,
+			children: t15
 		});
-		$[121] = allErrors;
-		$[122] = className;
-		$[123] = description;
-		$[124] = descriptionClassName;
-		$[125] = errorsClassName;
-		$[126] = isLoading;
-		$[127] = label;
-		$[128] = labelClassName;
-		$[129] = placeholder;
-		$[130] = required;
-		$[131] = t10;
-		$[132] = t11;
-		$[133] = t12;
-		$[134] = t13;
-		$[135] = t14;
-		$[136] = t15;
-		$[137] = t16;
-		$[138] = t17;
-		$[139] = t7;
-		$[140] = t8;
-		$[141] = t9;
-		$[142] = t18;
-	} else t18 = $[142];
-	return t18;
+		$[154] = T0;
+		$[155] = t12;
+		$[156] = t13;
+		$[157] = t15;
+		$[158] = t16;
+	} else t16 = $[158];
+	return t16;
 }
 /** The `relation` type: `resource` and `multiple`. Items search the fields context's source. */
-function _temp2(item_4) {
+function _temp(item_4) {
 	return {
 		id: item_4.id,
 		label: item_4.label
 	};
 }
-function _temp(item_1) {
-	return {
-		id: item_1.id,
-		label: item_1.label
-	};
-}
 function RelationFieldEntry(props) {
 	const $ = c(15);
 	const { field } = props;