@panneau/fields 5.0.0-alpha.6 → 5.0.0-alpha.7

package/dist/relation/RelationField.js

@@ -13,52 +13,92 @@ import { X } from "lucide-react";
 /** 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
-	});
+function useRelationSearch(source, resource, query, t0) {
+	const $ = c(14);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { enabled: t2, delay: t3 } = t1;
+	const enabled = t2 === void 0 ? true : t2;
+	const delay = t3 === void 0 ? 250 : t3;
+	let t4;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = {
+			key: "",
+			items: [],
+			isLoading: false
+		};
+		$[2] = t4;
+	} else t4 = $[2];
+	const [state, setState] = useState(t4);
 	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({
+	let t5;
+	let t6;
+	if ($[3] !== delay || $[4] !== enabled || $[5] !== key || $[6] !== query || $[7] !== resource || $[8] !== source) {
+		t5 = () => {
+			if (source === null || !enabled) return;
+			const controller = new AbortController();
+			const timer = setTimeout(() => {
+				setState((current) => ({
+					...current,
 					key,
-					items: [],
-					isLoading: false
+					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();
+			}, delay);
+			return () => {
+				clearTimeout(timer);
+				controller.abort();
+			};
 		};
-	}, [
-		source,
-		resource,
-		query,
-		key,
-		enabled,
-		delay
-	]);
-	return {
-		items: state.items,
-		isLoading: state.isLoading || state.key !== key
-	};
+		t6 = [
+			source,
+			resource,
+			query,
+			key,
+			enabled,
+			delay
+		];
+		$[3] = delay;
+		$[4] = enabled;
+		$[5] = key;
+		$[6] = query;
+		$[7] = resource;
+		$[8] = source;
+		$[9] = t5;
+		$[10] = t6;
+	} else {
+		t5 = $[9];
+		t6 = $[10];
+	}
+	useEffect(t5, t6);
+	const t7 = state.isLoading || state.key !== key;
+	let t8;
+	if ($[11] !== state.items || $[12] !== t7) {
+		t8 = {
+			items: state.items,
+			isLoading: t7
+		};
+		$[11] = state.items;
+		$[12] = t7;
+		$[13] = t8;
+	} else t8 = $[13];
+	return t8;
 }
 function References(t0) {
 	const $ = c(12);
@@ -117,81 +157,216 @@ function References(t0) {
 * references and can't change them.
 */
 function RelationField(props) {
+	const $ = c(143);
 	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 { resource, label, description, errors, disabled, readOnly, required, onBlur, name, id, className, labelClassName, descriptionClassName, errorsClassName, controlClassName } = props;
+	let t0;
+	if ($[0] !== intl || $[1] !== props.placeholder) {
+		t0 = props.placeholder ?? intl.formatMessage(messages.search);
+		$[0] = intl;
+		$[1] = props.placeholder;
+		$[2] = t0;
+	} else t0 = $[2];
+	const placeholder = t0;
+	let t1;
+	if ($[3] !== props.value) {
+		t1 = toReferences(props.value);
+		$[3] = props.value;
+		$[4] = t1;
+	} else t1 = $[4];
+	const selected = useRelationReferences(source, resource, t1);
 	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 });
+	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;
-	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);
+	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");
+		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) => {
+				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));
+			};
+			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 = {
+					legend: label,
+					errors: allErrors,
+					isRequired: required,
+					className,
+					legendClassName: labelClassName,
+					descriptionClassName,
+					errorsClassName
+				};
+				$[49] = allErrors;
+				$[50] = className;
+				$[51] = descriptionClassName;
+				$[52] = errorsClassName;
+				$[53] = label;
+				$[54] = labelClassName;
+				$[55] = required;
+				$[56] = t8;
+			} else t8 = $[56];
+			const chrome = t8;
+			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: [
+						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, {
+						references: selected,
+						removeLabel
+					}) : /* @__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, {
+						...chrome,
+						description: t9,
+						children: t10
+					});
+					$[67] = chrome;
+					$[68] = t10;
+					$[69] = t9;
+					$[70] = t11;
+				} else t11 = $[70];
+				t5 = t11;
+				break bb0;
 			}
-		}).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, {
+			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, {
+						references: selected,
+						removeLabel,
+						onRemove: (reference_1) => set(selected.filter((entry) => entry.id !== reference_1.id))
+					}) : 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: 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
-					})),
+					items: t12,
 					value: null,
 					inputValue: query ?? "",
 					onInputChange: setQuery,
@@ -208,40 +383,121 @@ function RelationField(props) {
 					},
 					isLoading,
 					placeholder,
-					emptyMessage: intl.formatMessage(messages.noResults),
-					...onBlur !== void 0 ? { onBlur: () => onBlur() } : {},
-					...name !== void 0 ? { name } : {},
-					...id !== void 0 ? { id } : {},
-					...controlClassName !== void 0 ? { controlClassName } : {}
-				})]
-			})
-		});
+					emptyMessage: t13,
+					...t14,
+					...t15,
+					...t16,
+					...t17
+				});
+				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;
+			}
+		}
+		$[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;
+	} else {
+		allErrors = $[39];
+		createFrom = $[40];
+		isLoading = $[41];
+		items = $[42];
+		t5 = $[43];
 	}
+	if (t5 !== Symbol.for("react.early_return_sentinel")) return t5;
 	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) => {
+	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);
-		},
-		onChange: (itemId_0) => {
+		};
+		$[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;
@@ -250,19 +506,103 @@ function RelationField(props) {
 			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: () => {
+		};
+		$[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];
+	let t15;
+	if ($[115] !== onBlur) {
+		t15 = onBlur !== void 0 ? { onBlur: () => {
 			setQuery(null);
 			onBlur();
-		} } : { onBlur: () => setQuery(null) },
-		...name !== void 0 ? { name } : {},
-		...id !== void 0 ? { id } : {}
-	});
+		} } : { onBlur: () => setQuery(null) };
+		$[115] = onBlur;
+		$[116] = t15;
+	} else t15 = $[116];
+	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
+		});
+		$[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;
 }
 /** The `relation` type: `resource` and `multiple`. Items search the fields context's source. */
+function _temp2(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;