@panneau/lists 5.0.0-alpha.16 → 5.0.0-alpha.18

package/dist/displays/displays.js

@@ -1,10 +1,11 @@
 import { messages } from "../messages.js";
-import { findOption, getFieldOptions, toText } from "../values.js";
+import { findOption, getFieldOptions, isRecord, toText } from "../values.js";
+import { getImageUrl } from "../images.js";
 import Displays_module_default from "./Displays.module.js";
 import { c } from "react/compiler-runtime";
 import { fieldsMessages } from "@panneau/intl";
 import { Badge, Icon, usePanneauIntl } from "@panneau/ui";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Check, File, FileText, Globe, Hash, Mail, Minus, Phone } from "lucide-react";
 import { toReferences } from "@panneau/fields";
 import { formatAddress, isAddress } from "@panneau/fields/address";
@@ -14,7 +15,7 @@ import { formatDateRange, getDateRangeSettings } from "@panneau/fields/daterange
 import { formatDuration, getDurationUnits } from "@panneau/fields/duration";
 import { getLinkText, isLink } from "@panneau/fields/link";
 import { formatMoney } from "@panneau/fields/money";
-import { getRegionCountry, getRegionName } from "@panneau/fields/region";
+import { RegionFlag, getRegionCountry, getRegionName } from "@panneau/fields/region";
 import { parsePhone, splitExtension } from "@panneau/fields/tel";
 //#region src/displays/displays.tsx
 /** What a cell shows without a value. Hidden from assistive technologies, which skip the cell. */
@@ -81,6 +82,7 @@ function TextDisplay(t0) {
 	if ($[8] !== text) {
 		t2 = /* @__PURE__ */ jsx("span", {
 			className: Displays_module_default.text,
+			"data-clamp": "",
 			children: text
 		});
 		$[8] = text;
@@ -103,6 +105,7 @@ function RichTextDisplay(t0) {
 	if ($[2] !== text) {
 		t2 = text === "" ? /* @__PURE__ */ jsx(EmptyValue, {}) : /* @__PURE__ */ jsx("span", {
 			className: Displays_module_default.text,
+			"data-clamp": "",
 			children: text
 		});
 		$[2] = text;
@@ -334,6 +337,7 @@ function DateRangeDisplay(t0) {
 	if ($[6] !== text) {
 		t3 = /* @__PURE__ */ jsx("span", {
 			className: Displays_module_default.text,
+			"data-clamp": "",
 			children: text
 		});
 		$[6] = text;
@@ -477,48 +481,54 @@ function SelectDisplay(t0) {
 }
 /** The labels of related items. */
 function RelationDisplay(t0) {
-	const $ = c(8);
+	const $ = c(10);
 	const { value } = t0;
 	let t1;
 	let t2;
 	let t3;
+	let t4;
 	if ($[0] !== value) {
-		t3 = Symbol.for("react.early_return_sentinel");
+		t4 = Symbol.for("react.early_return_sentinel");
 		bb0: {
 			const references = toReferences(value);
 			if (references.length === 0) {
-				let t4;
-				if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-					t4 = /* @__PURE__ */ jsx(EmptyValue, {});
-					$[4] = t4;
-				} else t4 = $[4];
-				t3 = t4;
+				let t5;
+				if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+					t5 = /* @__PURE__ */ jsx(EmptyValue, {});
+					$[5] = t5;
+				} else t5 = $[5];
+				t4 = t5;
 				break bb0;
 			}
 			t1 = Displays_module_default.text;
-			t2 = references.map(_temp).join(", ");
+			t2 = "";
+			t3 = references.map(_temp).join(", ");
 		}
 		$[0] = value;
 		$[1] = t1;
 		$[2] = t2;
 		$[3] = t3;
+		$[4] = t4;
 	} else {
 		t1 = $[1];
 		t2 = $[2];
 		t3 = $[3];
+		t4 = $[4];
 	}
-	if (t3 !== Symbol.for("react.early_return_sentinel")) return t3;
-	let t4;
-	if ($[5] !== t1 || $[6] !== t2) {
-		t4 = /* @__PURE__ */ jsx("span", {
+	if (t4 !== Symbol.for("react.early_return_sentinel")) return t4;
+	let t5;
+	if ($[6] !== t1 || $[7] !== t2 || $[8] !== t3) {
+		t5 = /* @__PURE__ */ jsx("span", {
 			className: t1,
-			children: t2
+			"data-clamp": t2,
+			children: t3
 		});
-		$[5] = t1;
-		$[6] = t2;
-		$[7] = t4;
-	} else t4 = $[7];
-	return t4;
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t5;
+	} else t5 = $[9];
+	return t5;
 }
 /** A link that opens the URL. */
 function _temp(reference) {
@@ -697,6 +707,7 @@ function Country(t0) {
 		if ($[0] !== code) {
 			t1 = /* @__PURE__ */ jsx("span", {
 				className: Displays_module_default.text,
+				"data-clamp": "",
 				children: code
 			});
 			$[0] = code;
@@ -731,6 +742,7 @@ function Country(t0) {
 	if ($[9] !== t3) {
 		t4 = /* @__PURE__ */ jsx("span", {
 			className: Displays_module_default.text,
+			"data-clamp": "",
 			children: t3
 		});
 		$[9] = t3;
@@ -798,8 +810,9 @@ function CountryDisplay(t0) {
 	return t4;
 }
 /**
-* A region: its name in the user's locale, from its country in the item (the field's `from`) or
-* the field's settings. A region that Panneau doesn't know shows as it is.
+* A region: its flag, when it has one, and its name in the user's locale, from its country in the
+* item (the field's `from`) or the field's settings. A region that Panneau doesn't know shows as it
+* is.
 */
 function _temp3(code_0) {
 	return /* @__PURE__ */ jsx(Country, { code: code_0 }, code_0);
@@ -808,7 +821,7 @@ function _temp2(code) {
 	return typeof code === "string" && code !== "";
 }
 function RegionDisplay(t0) {
-	const $ = c(10);
+	const $ = c(17);
 	const { value, field, item } = t0;
 	const intl = usePanneauIntl();
 	if (typeof value !== "string" || value === "") {
@@ -819,33 +832,67 @@ function RegionDisplay(t0) {
 		} else t1 = $[0];
 		return t1;
 	}
+	let country;
 	let t1;
-	let t2;
 	if ($[1] !== field || $[2] !== intl.locale || $[3] !== item || $[4] !== value) {
-		const country = field !== null ? getRegionCountry(field, item) : null;
-		t1 = Displays_module_default.text;
-		t2 = getRegionName(country, value, intl.locale) ?? value;
+		country = field !== null ? getRegionCountry(field, item) : null;
+		t1 = getRegionName(country, value, intl.locale);
 		$[1] = field;
 		$[2] = intl.locale;
 		$[3] = item;
 		$[4] = value;
-		$[5] = t1;
-		$[6] = t2;
+		$[5] = country;
+		$[6] = t1;
 	} else {
-		t1 = $[5];
-		t2 = $[6];
+		country = $[5];
+		t1 = $[6];
+	}
+	const name = t1;
+	if (name === null) {
+		let t2;
+		if ($[7] !== value) {
+			t2 = /* @__PURE__ */ jsx("span", {
+				className: Displays_module_default.text,
+				"data-clamp": "",
+				children: value
+			});
+			$[7] = value;
+			$[8] = t2;
+		} else t2 = $[8];
+		return t2;
 	}
+	let t2;
+	if ($[9] !== country || $[10] !== value) {
+		t2 = /* @__PURE__ */ jsx(RegionFlag, {
+			country,
+			code: value,
+			className: Displays_module_default.regionFlag
+		});
+		$[9] = country;
+		$[10] = value;
+		$[11] = t2;
+	} else t2 = $[11];
 	let t3;
-	if ($[7] !== t1 || $[8] !== t2) {
+	if ($[12] !== name) {
 		t3 = /* @__PURE__ */ jsx("span", {
-			className: t1,
-			children: t2
+			className: Displays_module_default.text,
+			"data-clamp": "",
+			children: name
 		});
-		$[7] = t1;
-		$[8] = t2;
-		$[9] = t3;
-	} else t3 = $[9];
-	return t3;
+		$[12] = name;
+		$[13] = t3;
+	} else t3 = $[13];
+	let t4;
+	if ($[14] !== t2 || $[15] !== t3) {
+		t4 = /* @__PURE__ */ jsxs("span", {
+			className: Displays_module_default.flagged,
+			children: [t2, t3]
+		});
+		$[14] = t2;
+		$[15] = t3;
+		$[16] = t4;
+	} else t4 = $[16];
+	return t4;
 }
 /**
 * A duration with its units, `1 h 5 min` or `2 d 4 h`: in the unit of its field (seconds by
@@ -1038,6 +1085,7 @@ function EmbedDisplay(t0) {
 	if ($[6] !== t2) {
 		t3 = /* @__PURE__ */ jsx("span", {
 			className: Displays_module_default.text,
+			"data-clamp": "",
 			children: t2
 		});
 		$[6] = t2;
@@ -1078,6 +1126,7 @@ function LocationDisplay(t0) {
 		if ($[1] !== address) {
 			t1 = /* @__PURE__ */ jsx("span", {
 				className: Displays_module_default.text,
+				"data-clamp": "",
 				children: address
 			});
 			$[1] = address;
@@ -1183,6 +1232,7 @@ function AddressDisplay(t0) {
 	if ($[12] !== t3) {
 		t4 = /* @__PURE__ */ jsx("span", {
 			className: Displays_module_default.text,
+			"data-clamp": "",
 			children: t3
 		});
 		$[12] = t3;
@@ -1256,6 +1306,7 @@ function LinkDisplay(t0) {
 		if ($[7] !== text) {
 			t4 = /* @__PURE__ */ jsx("span", {
 				className: Displays_module_default.text,
+				"data-clamp": "",
 				children: text
 			});
 			$[7] = text;
@@ -1341,6 +1392,7 @@ function ColorDisplay(t0) {
 				if ($[8] !== t4) {
 					t5 = /* @__PURE__ */ jsx("span", {
 						className: Displays_module_default.text,
+						"data-clamp": "",
 						children: t4
 					});
 					$[8] = t4;
@@ -1387,12 +1439,27 @@ function ColorDisplay(t0) {
 	} else t3 = $[17];
 	return t3;
 }
-/** A thumbnail and the name of a media item (or of the first one). */
+/** The text of a media, a reference or a file: its label, name or file name. */
+function mediaLabel(value) {
+	for (const key of [
+		"label",
+		"name",
+		"filename"
+	]) {
+		const text = value[key];
+		if (typeof text === "string" && text !== "") return text;
+	}
+	return "";
+}
+/**
+* A thumbnail and the name of a media (or of the first one), for `media` and `image` values:
+* a media reference (`{ id, label, media }`), or a media with its URLs.
+*/
 function MediaDisplay(t0) {
-	const $ = c(8);
+	const $ = c(12);
 	const { value } = t0;
 	const media = Array.isArray(value) ? value[0] : value;
-	if (media === null || typeof media !== "object") {
+	if (!isRecord(media)) {
 		let t1;
 		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 			t1 = /* @__PURE__ */ jsx(EmptyValue, {});
@@ -1400,45 +1467,133 @@ function MediaDisplay(t0) {
 		} else t1 = $[0];
 		return t1;
 	}
-	const { thumbnailUrl, url, name, filename } = media;
-	const source = typeof thumbnailUrl === "string" ? thumbnailUrl : typeof url === "string" ? url : null;
-	const label = typeof name === "string" ? name : typeof filename === "string" ? filename : "";
 	let t1;
-	if ($[1] !== source) {
-		t1 = source !== null ? /* @__PURE__ */ jsx("img", {
-			className: Displays_module_default.thumbnail,
-			src: source,
-			alt: ""
-		}) : null;
-		$[1] = source;
+	if ($[1] !== media) {
+		t1 = getImageUrl(media);
+		$[1] = media;
 		$[2] = t1;
 	} else t1 = $[2];
+	const source = t1;
 	let t2;
-	if ($[3] !== label) {
-		t2 = label !== "" ? /* @__PURE__ */ jsx("span", {
+	if ($[3] !== media) {
+		t2 = mediaLabel(media);
+		$[3] = media;
+		$[4] = t2;
+	} else t2 = $[4];
+	const label = t2;
+	let t3;
+	if ($[5] !== source) {
+		t3 = source !== null ? /* @__PURE__ */ jsx("img", {
+			className: Displays_module_default.thumbnail,
+			src: source,
+			alt: "",
+			loading: "lazy"
+		}) : null;
+		$[5] = source;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== label) {
+		t4 = label !== "" ? /* @__PURE__ */ jsx("span", {
 			className: Displays_module_default.text,
+			"data-clamp": "",
 			children: label
 		}) : null;
-		$[3] = label;
-		$[4] = t2;
-	} else t2 = $[4];
+		$[7] = label;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t3 || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("span", {
+			className: Displays_module_default.media,
+			children: [t3, t4]
+		});
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
+}
+/**
+* Stored files (`file` values): the thumbnail of an image, or an icon, and the name of each file,
+* linked to its URL.
+*/
+function FileDisplay(t0) {
+	const $ = c(8);
+	const { value } = t0;
+	let t1;
+	let t2;
 	let t3;
+	if ($[0] !== value) {
+		t3 = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			const files = (Array.isArray(value) ? value : [value]).filter(isRecord);
+			if (files.length === 0) {
+				let t4;
+				if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+					t4 = /* @__PURE__ */ jsx(EmptyValue, {});
+					$[4] = t4;
+				} else t4 = $[4];
+				t3 = t4;
+				break bb0;
+			}
+			t1 = Displays_module_default.files;
+			t2 = files.map(_temp5);
+		}
+		$[0] = value;
+		$[1] = t1;
+		$[2] = t2;
+		$[3] = t3;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+		t3 = $[3];
+	}
+	if (t3 !== Symbol.for("react.early_return_sentinel")) return t3;
+	let t4;
 	if ($[5] !== t1 || $[6] !== t2) {
-		t3 = /* @__PURE__ */ jsxs("span", {
-			className: Displays_module_default.media,
-			children: [t1, t2]
+		t4 = /* @__PURE__ */ jsx("span", {
+			className: t1,
+			children: t2
 		});
 		$[5] = t1;
 		$[6] = t2;
-		$[7] = t3;
-	} else t3 = $[7];
-	return t3;
+		$[7] = t4;
+	} else t4 = $[7];
+	return t4;
 }
 /**
 * The built-in displays, by name. A column's display is its `display`, its field's `display`, or
 * its field's type: field types are display names. Values without a known display are shown as
 * text.
 */
+function _temp5(file, index) {
+	const image = getImageUrl(file);
+	const name = mediaLabel(file);
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [image !== null ? /* @__PURE__ */ jsx("img", {
+		className: Displays_module_default.thumbnail,
+		src: image,
+		alt: "",
+		loading: "lazy"
+	}) : /* @__PURE__ */ jsx(Icon, {
+		icon: File,
+		size: "sm"
+	}), /* @__PURE__ */ jsx("span", {
+		className: Displays_module_default.text,
+		"data-clamp": "",
+		children: name !== "" ? name : typeof file.url === "string" ? file.url : ""
+	})] });
+	return typeof file.url === "string" && file.url !== "" ? /* @__PURE__ */ jsx("a", {
+		className: `${Displays_module_default.link} ${Displays_module_default.media}`,
+		href: file.url,
+		target: "_blank",
+		rel: "noreferrer",
+		children: content
+	}, index) : /* @__PURE__ */ jsx("span", {
+		className: Displays_module_default.media,
+		children: content
+	}, index);
+}
 var builtInDisplays = {
 	text: TextDisplay,
 	textarea: TextDisplay,
@@ -1455,6 +1610,8 @@ var builtInDisplays = {
 	email: EmailDisplay,
 	color: ColorDisplay,
 	media: MediaDisplay,
+	image: MediaDisplay,
+	file: FileDisplay,
 	tel: TelDisplay,
 	range: NumberDisplay,
 	duration: DurationDisplay,
@@ -1470,6 +1627,6 @@ var builtInDisplays = {
 	money: MoneyDisplay
 };
 //#endregion
-export { AddressDisplay, BooleanDisplay, ColorDisplay, CountryDisplay, DateDisplay, DateRangeDisplay, DateTimeDisplay, DurationDisplay, EmailDisplay, EmbedDisplay, EmptyValue, JsonDisplay, LinkDisplay, LocationDisplay, MediaDisplay, MoneyDisplay, NumberDisplay, RegionDisplay, RelationDisplay, RichTextDisplay, SelectDisplay, TagsDisplay, TelDisplay, TextDisplay, TimeDisplay, UrlDisplay, builtInDisplays };
+export { AddressDisplay, BooleanDisplay, ColorDisplay, CountryDisplay, DateDisplay, DateRangeDisplay, DateTimeDisplay, DurationDisplay, EmailDisplay, EmbedDisplay, EmptyValue, FileDisplay, JsonDisplay, LinkDisplay, LocationDisplay, MediaDisplay, MoneyDisplay, NumberDisplay, RegionDisplay, RelationDisplay, RichTextDisplay, SelectDisplay, TagsDisplay, TelDisplay, TextDisplay, TimeDisplay, UrlDisplay, builtInDisplays };
 
 //# sourceMappingURL=displays.js.map