@igne-agency/react-web-ui 0.5.0 → 0.6.0

package/dist/components/combobox-field/combobox-field.js

@@ -2,6 +2,8 @@ import { Field } from "../field/field.js";
 import { fieldStateAttributes } from "../field/field-state.js";
 import { useFieldState } from "../field/use-field-state.js";
 import { detachHiddenInput } from "../field/hidden-input.js";
+import { Spinner } from "../spinner/spinner.js";
+import { Tooltip } from "../tooltip/tooltip.js";
 import { Combobox } from "./combobox.js";
 import { itemsOf, loadOf } from "./combobox-items.js";
 import { ItemLookupsContext } from "./item-lookups.js";
@@ -15,7 +17,7 @@ import { use, useEffect, useRef, useState } from "react";
 var DEFAULT_SEARCH_DELAY = 300;
 var alwaysRetryable = () => true;
 var FieldBody = (t0) => {
-	const $ = c(120);
+	const $ = c(137);
 	const { chrome, source, derivations, mode, labels, unavailableIcon, values, states, onChange } = t0;
 	const { label, description, errors, requiredness, optionalLabel, dirty, touched, pending: t1, placeholder, readOnly, name, onBlur, retryable: t2, searchDelay: t3, className, icon, checkIcon } = chrome;
 	const pending = t1 === void 0 ? false : t1;
@@ -199,76 +201,122 @@ var FieldBody = (t0) => {
 	} else t22 = $[50];
 	const root = t22;
 	let t23;
-	if ($[51] !== label || $[52] !== optionalLabel || $[53] !== requiredness) {
-		t23 = /* @__PURE__ */ jsx(Field.Label, {
+	if ($[51] !== optionalLabel || $[52] !== requiredness) {
+		t23 = /* @__PURE__ */ jsx(Field.Requiredness, {
 			requiredness,
-			optionalLabel,
-			children: label
+			optionalLabel
 		});
-		$[51] = label;
-		$[52] = optionalLabel;
-		$[53] = requiredness;
-		$[54] = t23;
-	} else t23 = $[54];
+		$[51] = optionalLabel;
+		$[52] = requiredness;
+		$[53] = t23;
+	} else t23 = $[53];
 	let t24;
-	if ($[55] !== disabled || $[56] !== fieldState || $[57] !== first || $[58] !== icon || $[59] !== itemKey || $[60] !== mode || $[61] !== nameOf || $[62] !== onBlur || $[63] !== onChange || $[64] !== placeholder || $[65] !== readOnly || $[66] !== states || $[67] !== values || $[68] !== view) {
-		t24 = mode.multiple === true ? /* @__PURE__ */ jsx(Combobox.Control, {
-			ref: anchorRef,
-			state: fieldState,
-			icon,
-			onBlur,
-			tags: first === void 0 ? /* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				children: placeholder
-			}) : /* @__PURE__ */ jsx(Combobox.Tags, {
-				label: mode.selectedLabel,
-				items: states,
-				itemKey: _temp,
-				itemLabel: nameOf,
-				removeLabel: mode.removeLabel,
-				removeHint: (state_2) => mode.removeHint(nameOf(state_2)),
-				removeIcon: mode.removeIcon,
-				disabled,
-				readOnly,
-				onRemove: (remaining) => {
-					const kept = new Set(remaining.map(_temp2));
-					onChange(values.filter((value_0) => kept.has(itemKey(value_0))));
-				},
-				children: view
-			}),
-			children: first === void 0 ? placeholder : states.map(nameOf).join(", ")
-		}) : /* @__PURE__ */ jsx(Combobox.Control, {
-			ref: anchorRef,
-			state: fieldState,
-			icon,
-			onBlur,
-			children: first === void 0 ? placeholder : view(first)
-		});
-		$[55] = disabled;
-		$[56] = fieldState;
-		$[57] = first;
-		$[58] = icon;
+	if ($[54] !== label || $[55] !== t23) {
+		t24 = /* @__PURE__ */ jsxs(Field.Label, { children: [
+			label,
+			" ",
+			t23
+		] });
+		$[54] = label;
+		$[55] = t23;
+		$[56] = t24;
+	} else t24 = $[56];
+	let t25;
+	if ($[57] !== disabled || $[58] !== first || $[59] !== itemKey || $[60] !== mode || $[61] !== nameOf || $[62] !== onChange || $[63] !== placeholder || $[64] !== readOnly || $[65] !== states || $[66] !== values || $[67] !== view) {
+		t25 = mode.multiple === true && /* @__PURE__ */ jsx(Combobox.Chips, { children: first === void 0 ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			children: placeholder
+		}) : /* @__PURE__ */ jsx(Combobox.ChipList, {
+			label: mode.selectedLabel,
+			items: states,
+			itemKey: _temp,
+			disabled,
+			readOnly,
+			onRemove: (remaining) => {
+				const kept = new Set(remaining.map(_temp2));
+				onChange(values.filter((value_0) => kept.has(itemKey(value_0))));
+			},
+			children: (state_3) => /* @__PURE__ */ jsxs(Combobox.Chip, {
+				id: state_3.key,
+				textValue: nameOf(state_3),
+				children: [view(state_3), /* @__PURE__ */ jsx(Tooltip, {
+					content: mode.removeHint(nameOf(state_3)),
+					children: /* @__PURE__ */ jsx(Combobox.ChipRemove, {
+						"aria-label": mode.removeLabel,
+						children: mode.removeIcon
+					})
+				})]
+			}, state_3.key)
+		}) });
+		$[57] = disabled;
+		$[58] = first;
 		$[59] = itemKey;
 		$[60] = mode;
 		$[61] = nameOf;
-		$[62] = onBlur;
-		$[63] = onChange;
-		$[64] = placeholder;
-		$[65] = readOnly;
-		$[66] = states;
-		$[67] = values;
-		$[68] = view;
-		$[69] = t24;
-	} else t24 = $[69];
-	const t25 = source.query === void 0 ? items.length === 0 : search === "";
-	const t26 = mode.multiple === true;
+		$[62] = onChange;
+		$[63] = placeholder;
+		$[64] = readOnly;
+		$[65] = states;
+		$[66] = values;
+		$[67] = view;
+		$[68] = t25;
+	} else t25 = $[68];
+	let t26;
+	if ($[69] !== first || $[70] !== mode.multiple || $[71] !== nameOf || $[72] !== placeholder || $[73] !== states || $[74] !== view) {
+		t26 = mode.multiple === true ? /* @__PURE__ */ jsx(Combobox.SpokenValue, { children: first === void 0 ? placeholder : states.map(nameOf).join(", ") }) : /* @__PURE__ */ jsx(Combobox.TriggerValue, { children: first === void 0 ? placeholder : view(first) });
+		$[69] = first;
+		$[70] = mode.multiple;
+		$[71] = nameOf;
+		$[72] = placeholder;
+		$[73] = states;
+		$[74] = view;
+		$[75] = t26;
+	} else t26 = $[75];
 	let t27;
-	if ($[70] !== checkIcon || $[71] !== chrome.loadBrokenLabel || $[72] !== chrome.loadFailedLabel || $[73] !== chrome.loadingLabel || $[74] !== chrome.loadingMoreLabel || $[75] !== chrome.noOptionsLabel || $[76] !== chrome.noResultsLabel || $[77] !== chrome.resultsLabel || $[78] !== chrome.retryLabel || $[79] !== chrome.searchLabel || $[80] !== itemKey || $[81] !== load || $[82] !== renderItem || $[83] !== source.query || $[84] !== t25 || $[85] !== t26) {
-		t27 = /* @__PURE__ */ jsx(Combobox.Body, {
+	if ($[76] === Symbol.for("react.memo_cache_sentinel")) {
+		t27 = /* @__PURE__ */ jsx(Combobox.Pending, { children: /* @__PURE__ */ jsx(Spinner, { size: 1 }) });
+		$[76] = t27;
+	} else t27 = $[76];
+	let t28;
+	if ($[77] !== icon) {
+		t28 = /* @__PURE__ */ jsx(Combobox.Icon, { children: icon });
+		$[77] = icon;
+		$[78] = t28;
+	} else t28 = $[78];
+	let t29;
+	if ($[79] !== t26 || $[80] !== t28) {
+		t29 = /* @__PURE__ */ jsxs(Combobox.Trigger, { children: [
+			t26,
+			t27,
+			t28
+		] });
+		$[79] = t26;
+		$[80] = t28;
+		$[81] = t29;
+	} else t29 = $[81];
+	let t30;
+	if ($[82] !== fieldState || $[83] !== onBlur || $[84] !== t25 || $[85] !== t29) {
+		t30 = /* @__PURE__ */ jsxs(Combobox.Control, {
+			ref: anchorRef,
+			state: fieldState,
+			onBlur,
+			children: [t25, t29]
+		});
+		$[82] = fieldState;
+		$[83] = onBlur;
+		$[84] = t25;
+		$[85] = t29;
+		$[86] = t30;
+	} else t30 = $[86];
+	const t31 = source.query === void 0 ? items.length === 0 : search === "";
+	const t32 = mode.multiple === true;
+	let t33;
+	if ($[87] !== checkIcon || $[88] !== chrome.loadBrokenLabel || $[89] !== chrome.loadFailedLabel || $[90] !== chrome.loadingLabel || $[91] !== chrome.loadingMoreLabel || $[92] !== chrome.noOptionsLabel || $[93] !== chrome.noResultsLabel || $[94] !== chrome.resultsLabel || $[95] !== chrome.retryLabel || $[96] !== chrome.searchLabel || $[97] !== itemKey || $[98] !== load || $[99] !== renderItem || $[100] !== source.query || $[101] !== t31 || $[102] !== t32) {
+		t33 = /* @__PURE__ */ jsx(Combobox.Body, {
 			load,
 			query: source.query,
-			noOptions: t25,
-			multiple: t26,
+			noOptions: t31,
+			multiple: t32,
 			itemKey,
 			checkIcon,
 			loadingLabel: chrome.loadingLabel,
@@ -282,88 +330,88 @@ var FieldBody = (t0) => {
 			resultsLabel: chrome.resultsLabel,
 			children: renderItem
 		});
-		$[70] = checkIcon;
-		$[71] = chrome.loadBrokenLabel;
-		$[72] = chrome.loadFailedLabel;
-		$[73] = chrome.loadingLabel;
-		$[74] = chrome.loadingMoreLabel;
-		$[75] = chrome.noOptionsLabel;
-		$[76] = chrome.noResultsLabel;
-		$[77] = chrome.resultsLabel;
-		$[78] = chrome.retryLabel;
-		$[79] = chrome.searchLabel;
-		$[80] = itemKey;
-		$[81] = load;
-		$[82] = renderItem;
-		$[83] = source.query;
-		$[84] = t25;
-		$[85] = t26;
-		$[86] = t27;
-	} else t27 = $[86];
-	let t28;
-	if ($[87] !== label || $[88] !== t27) {
-		t28 = /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+		$[87] = checkIcon;
+		$[88] = chrome.loadBrokenLabel;
+		$[89] = chrome.loadFailedLabel;
+		$[90] = chrome.loadingLabel;
+		$[91] = chrome.loadingMoreLabel;
+		$[92] = chrome.noOptionsLabel;
+		$[93] = chrome.noResultsLabel;
+		$[94] = chrome.resultsLabel;
+		$[95] = chrome.retryLabel;
+		$[96] = chrome.searchLabel;
+		$[97] = itemKey;
+		$[98] = load;
+		$[99] = renderItem;
+		$[100] = source.query;
+		$[101] = t31;
+		$[102] = t32;
+		$[103] = t33;
+	} else t33 = $[103];
+	let t34;
+	if ($[104] !== label || $[105] !== t33) {
+		t34 = /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
 			anchor: anchorRef,
 			children: /* @__PURE__ */ jsx(Combobox.Popup, {
 				"aria-label": label,
-				children: t27
+				children: t33
 			})
 		}) });
-		$[87] = label;
-		$[88] = t27;
-		$[89] = t28;
-	} else t28 = $[89];
-	let t29;
-	if ($[90] !== labels || $[91] !== states) {
-		t29 = labels !== void 0 && /* @__PURE__ */ jsx(ValueStatesStatus, {
+		$[104] = label;
+		$[105] = t33;
+		$[106] = t34;
+	} else t34 = $[106];
+	let t35;
+	if ($[107] !== labels || $[108] !== states) {
+		t35 = labels !== void 0 && /* @__PURE__ */ jsx(ValueStatesStatus, {
 			states,
 			labels
 		});
-		$[90] = labels;
-		$[91] = states;
-		$[92] = t29;
-	} else t29 = $[92];
-	let t30;
-	if ($[93] !== description) {
-		t30 = /* @__PURE__ */ jsx(Field.Description, { children: description });
-		$[93] = description;
-		$[94] = t30;
-	} else t30 = $[94];
-	let t31;
-	if ($[95] !== errors) {
-		t31 = /* @__PURE__ */ jsx(Field.Error, { children: errors });
-		$[95] = errors;
-		$[96] = t31;
-	} else t31 = $[96];
-	let t32;
-	if ($[97] !== t23 || $[98] !== t24 || $[99] !== t28 || $[100] !== t29 || $[101] !== t30 || $[102] !== t31) {
-		t32 = /* @__PURE__ */ jsxs(Fragment, { children: [
-			t23,
+		$[107] = labels;
+		$[108] = states;
+		$[109] = t35;
+	} else t35 = $[109];
+	let t36;
+	if ($[110] !== description) {
+		t36 = /* @__PURE__ */ jsx(Field.Description, { children: description });
+		$[110] = description;
+		$[111] = t36;
+	} else t36 = $[111];
+	let t37;
+	if ($[112] !== errors) {
+		t37 = /* @__PURE__ */ jsx(Field.Error, { children: errors });
+		$[112] = errors;
+		$[113] = t37;
+	} else t37 = $[113];
+	let t38;
+	if ($[114] !== t24 || $[115] !== t30 || $[116] !== t34 || $[117] !== t35 || $[118] !== t36 || $[119] !== t37) {
+		t38 = /* @__PURE__ */ jsxs(Fragment, { children: [
 			t24,
-			t28,
-			t29,
 			t30,
-			t31
+			t34,
+			t35,
+			t36,
+			t37
 		] });
-		$[97] = t23;
-		$[98] = t24;
-		$[99] = t28;
-		$[100] = t29;
-		$[101] = t30;
-		$[102] = t31;
-		$[103] = t32;
-	} else t32 = $[103];
-	const parts = t32;
-	const t33 = field.invalid;
-	let t34;
-	if ($[104] !== fieldState) {
-		t34 = fieldStateAttributes(fieldState);
-		$[104] = fieldState;
-		$[105] = t34;
-	} else t34 = $[105];
-	let t35;
-	if ($[106] !== mode.multiple || $[107] !== onChange || $[108] !== parts || $[109] !== root || $[110] !== values) {
-		t35 = mode.multiple === true ? /* @__PURE__ */ jsx(Combobox.Root, {
+		$[114] = t24;
+		$[115] = t30;
+		$[116] = t34;
+		$[117] = t35;
+		$[118] = t36;
+		$[119] = t37;
+		$[120] = t38;
+	} else t38 = $[120];
+	const parts = t38;
+	const t39 = field.invalid;
+	let t40;
+	if ($[121] !== fieldState) {
+		t40 = fieldStateAttributes(fieldState);
+		$[121] = fieldState;
+		$[122] = t40;
+	} else t40 = $[122];
+	let t41;
+	if ($[123] !== mode.multiple || $[124] !== onChange || $[125] !== parts || $[126] !== root || $[127] !== values) {
+		t41 = mode.multiple === true ? /* @__PURE__ */ jsx(Combobox.Root, {
 			...root,
 			multiple: true,
 			value: [...values],
@@ -375,34 +423,34 @@ var FieldBody = (t0) => {
 			onValueChange: (next_1) => onChange(next_1 === null ? [] : [next_1]),
 			children: parts
 		});
-		$[106] = mode.multiple;
-		$[107] = onChange;
-		$[108] = parts;
-		$[109] = root;
-		$[110] = values;
-		$[111] = t35;
-	} else t35 = $[111];
-	let t36;
-	if ($[112] !== className || $[113] !== dirty || $[114] !== disabled || $[115] !== field.invalid || $[116] !== t34 || $[117] !== t35 || $[118] !== touched) {
-		t36 = /* @__PURE__ */ jsx(Field.Root, {
+		$[123] = mode.multiple;
+		$[124] = onChange;
+		$[125] = parts;
+		$[126] = root;
+		$[127] = values;
+		$[128] = t41;
+	} else t41 = $[128];
+	let t42;
+	if ($[129] !== className || $[130] !== dirty || $[131] !== disabled || $[132] !== field.invalid || $[133] !== t40 || $[134] !== t41 || $[135] !== touched) {
+		t42 = /* @__PURE__ */ jsx(Field.Root, {
 			className,
 			disabled,
-			invalid: t33,
+			invalid: t39,
 			dirty,
 			touched,
-			...t34,
-			children: t35
+			...t40,
+			children: t41
 		});
-		$[112] = className;
-		$[113] = dirty;
-		$[114] = disabled;
-		$[115] = field.invalid;
-		$[116] = t34;
-		$[117] = t35;
-		$[118] = touched;
-		$[119] = t36;
-	} else t36 = $[119];
-	return t36;
+		$[129] = className;
+		$[130] = dirty;
+		$[131] = disabled;
+		$[132] = field.invalid;
+		$[133] = t40;
+		$[134] = t41;
+		$[135] = touched;
+		$[136] = t42;
+	} else t42 = $[136];
+	return t42;
 };
 /**
 * The assembled combobox: a labelled field whose control shows the selection —
@@ -538,8 +586,8 @@ var ComboboxField = (props) => {
 function _temp(state_1) {
 	return state_1.key;
 }
-function _temp2(state_3) {
-	return state_3.key;
+function _temp2(state_2) {
+	return state_2.key;
 }
 function _temp3() {
 	return /* @__PURE__ */ new Set();