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

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

@@ -3,22 +3,21 @@ import { fieldStateAttributes } from "../field/field-state.js";
 import { useFieldState } from "../field/use-field-state.js";
 import { detachHiddenInput } from "../field/hidden-input.js";
 import { Combobox } from "./combobox.js";
-import { itemsOf, loadOf, pagedProgress } from "./combobox-items.js";
-import { ComboboxPopupBody } from "./combobox-popup-body.js";
+import { itemsOf, loadOf } from "./combobox-items.js";
 import { ItemLookupsContext } from "./item-lookups.js";
 import { defaultValues, emitValues, selectedValues } from "./selection.js";
 import { valueStateOf } from "./value-state.js";
 import { ValueStateView, ValueStatesStatus, valueStateName } from "./value-state-view.js";
 import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { use, useEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 // src/components/combobox-field/combobox-field.tsx
 var DEFAULT_SEARCH_DELAY = 300;
 var alwaysRetryable = () => true;
 var FieldBody = (t0) => {
-	const $ = c(112);
-	const { chrome, source, derivations, mode, labels, values, states, onChange } = t0;
-	const { label, description, errors, requiredness, optionalLabel, dirty, touched, pending: t1, placeholder, readOnly, name, onBlur, retryable: t2, searchDelay: t3, className } = chrome;
+	const $ = c(120);
+	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;
 	const retryable = t2 === void 0 ? alwaysRetryable : t2;
 	const searchDelay = t3 === void 0 ? DEFAULT_SEARCH_DELAY : t3;
@@ -113,60 +112,62 @@ var FieldBody = (t0) => {
 	} else t13 = $[23];
 	const nameOf = t13;
 	let t14;
-	if ($[24] !== itemLabel || $[25] !== labels || $[26] !== renderItem) {
+	if ($[24] !== itemLabel || $[25] !== labels || $[26] !== renderItem || $[27] !== unavailableIcon) {
 		t14 = (state_0) => /* @__PURE__ */ jsx(ValueStateView, {
 			state: state_0,
 			renderItem,
 			itemLabel,
-			labels
+			labels,
+			icon: unavailableIcon
 		});
 		$[24] = itemLabel;
 		$[25] = labels;
 		$[26] = renderItem;
-		$[27] = t14;
-	} else t14 = $[27];
+		$[27] = unavailableIcon;
+		$[28] = t14;
+	} else t14 = $[28];
 	const view = t14;
 	const [first] = states;
 	const t15 = source.query === void 0 ? void 0 : null;
 	let t16;
-	if ($[28] !== itemKey) {
+	if ($[29] !== itemKey) {
 		t16 = (item, value) => itemKey(item) === itemKey(value);
-		$[28] = itemKey;
-		$[29] = t16;
-	} else t16 = $[29];
+		$[29] = itemKey;
+		$[30] = t16;
+	} else t16 = $[30];
 	const t17 = name ?? ids.controlId;
 	let t18;
-	if ($[30] !== readOnly) {
+	if ($[31] !== readOnly) {
 		t18 = readOnly === true && { open: false };
-		$[30] = readOnly;
-		$[31] = t18;
-	} else t18 = $[31];
+		$[31] = readOnly;
+		$[32] = t18;
+	} else t18 = $[32];
 	const t19 = requiredness === "required";
 	let t20;
-	if ($[32] !== searchDelay || $[33] !== searchServer) {
+	if ($[33] !== searchDelay || $[34] !== searchServer) {
 		t20 = (next, details) => {
 			if (details.reason === "input-change") {
 				setSearch(next);
 				searchServer(next, searchDelay);
 			}
 		};
-		$[32] = searchDelay;
-		$[33] = searchServer;
-		$[34] = t20;
-	} else t20 = $[34];
+		$[33] = searchDelay;
+		$[34] = searchServer;
+		$[35] = t20;
+	} else t20 = $[35];
 	let t21;
-	if ($[35] !== searchServer) {
+	if ($[36] !== searchServer) {
 		t21 = (open) => {
 			if (!open) {
 				setSearch("");
 				searchServer("", 0);
 			}
 		};
-		$[35] = searchServer;
-		$[36] = t21;
-	} else t21 = $[36];
+		$[36] = searchServer;
+		$[37] = t21;
+	} else t21 = $[37];
 	let t22;
-	if ($[37] !== disabled || $[38] !== itemKey || $[39] !== itemLabel || $[40] !== items || $[41] !== readOnly || $[42] !== t15 || $[43] !== t16 || $[44] !== t17 || $[45] !== t18 || $[46] !== t19 || $[47] !== t20 || $[48] !== t21) {
+	if ($[38] !== disabled || $[39] !== itemKey || $[40] !== itemLabel || $[41] !== items || $[42] !== readOnly || $[43] !== t15 || $[44] !== t16 || $[45] !== t17 || $[46] !== t18 || $[47] !== t19 || $[48] !== t20 || $[49] !== t21) {
 		t22 = {
 			items,
 			filter: t15,
@@ -182,38 +183,39 @@ var FieldBody = (t0) => {
 			onInputValueChange: t20,
 			onOpenChangeComplete: t21
 		};
-		$[37] = disabled;
-		$[38] = itemKey;
-		$[39] = itemLabel;
-		$[40] = items;
-		$[41] = readOnly;
-		$[42] = t15;
-		$[43] = t16;
-		$[44] = t17;
-		$[45] = t18;
-		$[46] = t19;
-		$[47] = t20;
-		$[48] = t21;
-		$[49] = t22;
-	} else t22 = $[49];
+		$[38] = disabled;
+		$[39] = itemKey;
+		$[40] = itemLabel;
+		$[41] = items;
+		$[42] = readOnly;
+		$[43] = t15;
+		$[44] = t16;
+		$[45] = t17;
+		$[46] = t18;
+		$[47] = t19;
+		$[48] = t20;
+		$[49] = t21;
+		$[50] = t22;
+	} else t22 = $[50];
 	const root = t22;
 	let t23;
-	if ($[50] !== label || $[51] !== optionalLabel || $[52] !== requiredness) {
+	if ($[51] !== label || $[52] !== optionalLabel || $[53] !== requiredness) {
 		t23 = /* @__PURE__ */ jsx(Field.Label, {
 			requiredness,
 			optionalLabel,
 			children: label
 		});
-		$[50] = label;
-		$[51] = optionalLabel;
-		$[52] = requiredness;
-		$[53] = t23;
-	} else t23 = $[53];
+		$[51] = label;
+		$[52] = optionalLabel;
+		$[53] = requiredness;
+		$[54] = t23;
+	} else t23 = $[54];
 	let t24;
-	if ($[54] !== disabled || $[55] !== fieldState || $[56] !== first || $[57] !== itemKey || $[58] !== mode || $[59] !== nameOf || $[60] !== onBlur || $[61] !== onChange || $[62] !== placeholder || $[63] !== readOnly || $[64] !== states || $[65] !== values || $[66] !== view) {
+	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",
@@ -225,6 +227,7 @@ var FieldBody = (t0) => {
 				itemLabel: nameOf,
 				removeLabel: mode.removeLabel,
 				removeHint: (state_2) => mode.removeHint(nameOf(state_2)),
+				removeIcon: mode.removeIcon,
 				disabled,
 				readOnly,
 				onRemove: (remaining) => {
@@ -237,118 +240,130 @@ var FieldBody = (t0) => {
 		}) : /* @__PURE__ */ jsx(Combobox.Control, {
 			ref: anchorRef,
 			state: fieldState,
+			icon,
 			onBlur,
 			children: first === void 0 ? placeholder : view(first)
 		});
-		$[54] = disabled;
-		$[55] = fieldState;
-		$[56] = first;
-		$[57] = itemKey;
-		$[58] = mode;
-		$[59] = nameOf;
-		$[60] = onBlur;
-		$[61] = onChange;
-		$[62] = placeholder;
-		$[63] = readOnly;
-		$[64] = states;
-		$[65] = values;
-		$[66] = view;
-		$[67] = t24;
-	} else t24 = $[67];
-	let t25;
-	if ($[68] !== source) {
-		t25 = pagedProgress(source);
-		$[68] = source;
-		$[69] = t25;
-	} else t25 = $[69];
-	const t26 = source.query === void 0 ? items.length === 0 : search === "";
-	const t27 = mode.multiple === true;
-	let t28;
-	if ($[70] !== chrome || $[71] !== itemKey || $[72] !== load || $[73] !== renderItem || $[74] !== source.query || $[75] !== t25 || $[76] !== t26 || $[77] !== t27) {
-		t28 = /* @__PURE__ */ jsx(ComboboxPopupBody, {
-			copy: chrome,
+		$[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;
+		$[69] = t24;
+	} else t24 = $[69];
+	const t25 = source.query === void 0 ? items.length === 0 : search === "";
+	const t26 = mode.multiple === true;
+	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, {
 			load,
-			paged: t25,
-			pagedQuery: source.query,
-			noOptions: t26,
-			multiple: t27,
+			query: source.query,
+			noOptions: t25,
+			multiple: t26,
 			itemKey,
-			renderItem
+			checkIcon,
+			loadingLabel: chrome.loadingLabel,
+			loadFailedLabel: chrome.loadFailedLabel,
+			loadBrokenLabel: chrome.loadBrokenLabel,
+			retryLabel: chrome.retryLabel,
+			noOptionsLabel: chrome.noOptionsLabel,
+			noResultsLabel: chrome.noResultsLabel,
+			searchLabel: chrome.searchLabel,
+			loadingMoreLabel: chrome.loadingMoreLabel,
+			resultsLabel: chrome.resultsLabel,
+			children: renderItem
 		});
-		$[70] = chrome;
-		$[71] = itemKey;
-		$[72] = load;
-		$[73] = renderItem;
-		$[74] = source.query;
-		$[75] = t25;
-		$[76] = t26;
-		$[77] = t27;
-		$[78] = t28;
-	} else t28 = $[78];
-	let t29;
-	if ($[79] !== label || $[80] !== t28) {
-		t29 = /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+		$[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, {
 			anchor: anchorRef,
 			children: /* @__PURE__ */ jsx(Combobox.Popup, {
 				"aria-label": label,
-				children: t28
+				children: t27
 			})
 		}) });
-		$[79] = label;
-		$[80] = t28;
-		$[81] = t29;
-	} else t29 = $[81];
-	let t30;
-	if ($[82] !== labels || $[83] !== states) {
-		t30 = labels !== void 0 && /* @__PURE__ */ jsx(ValueStatesStatus, {
+		$[87] = label;
+		$[88] = t27;
+		$[89] = t28;
+	} else t28 = $[89];
+	let t29;
+	if ($[90] !== labels || $[91] !== states) {
+		t29 = labels !== void 0 && /* @__PURE__ */ jsx(ValueStatesStatus, {
 			states,
 			labels
 		});
-		$[82] = labels;
-		$[83] = states;
-		$[84] = t30;
-	} else t30 = $[84];
+		$[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 ($[85] !== description) {
-		t31 = /* @__PURE__ */ jsx(Field.Description, { children: description });
-		$[85] = description;
-		$[86] = t31;
-	} else t31 = $[86];
+	if ($[95] !== errors) {
+		t31 = /* @__PURE__ */ jsx(Field.Error, { children: errors });
+		$[95] = errors;
+		$[96] = t31;
+	} else t31 = $[96];
 	let t32;
-	if ($[87] !== errors) {
-		t32 = /* @__PURE__ */ jsx(Field.Error, { children: errors });
-		$[87] = errors;
-		$[88] = t32;
-	} else t32 = $[88];
-	let t33;
-	if ($[89] !== t23 || $[90] !== t24 || $[91] !== t29 || $[92] !== t30 || $[93] !== t31 || $[94] !== t32) {
-		t33 = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	if ($[97] !== t23 || $[98] !== t24 || $[99] !== t28 || $[100] !== t29 || $[101] !== t30 || $[102] !== t31) {
+		t32 = /* @__PURE__ */ jsxs(Fragment, { children: [
 			t23,
 			t24,
+			t28,
 			t29,
 			t30,
-			t31,
-			t32
+			t31
 		] });
-		$[89] = t23;
-		$[90] = t24;
-		$[91] = t29;
-		$[92] = t30;
-		$[93] = t31;
-		$[94] = t32;
-		$[95] = t33;
-	} else t33 = $[95];
-	const parts = t33;
-	const t34 = field.invalid;
+		$[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 ($[96] !== fieldState) {
-		t35 = fieldStateAttributes(fieldState);
-		$[96] = fieldState;
-		$[97] = t35;
-	} else t35 = $[97];
-	let t36;
-	if ($[98] !== mode.multiple || $[99] !== onChange || $[100] !== parts || $[101] !== root || $[102] !== values) {
-		t36 = mode.multiple === true ? /* @__PURE__ */ jsx(Combobox.Root, {
+	if ($[106] !== mode.multiple || $[107] !== onChange || $[108] !== parts || $[109] !== root || $[110] !== values) {
+		t35 = mode.multiple === true ? /* @__PURE__ */ jsx(Combobox.Root, {
 			...root,
 			multiple: true,
 			value: [...values],
@@ -360,34 +375,34 @@ var FieldBody = (t0) => {
 			onValueChange: (next_1) => onChange(next_1 === null ? [] : [next_1]),
 			children: parts
 		});
-		$[98] = mode.multiple;
-		$[99] = onChange;
-		$[100] = parts;
-		$[101] = root;
-		$[102] = values;
-		$[103] = t36;
-	} else t36 = $[103];
-	let t37;
-	if ($[104] !== className || $[105] !== dirty || $[106] !== disabled || $[107] !== field.invalid || $[108] !== t35 || $[109] !== t36 || $[110] !== touched) {
-		t37 = /* @__PURE__ */ jsx(Field.Root, {
+		$[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, {
 			className,
 			disabled,
-			invalid: t34,
+			invalid: t33,
 			dirty,
 			touched,
-			...t35,
-			children: t36
+			...t34,
+			children: t35
 		});
-		$[104] = className;
-		$[105] = dirty;
-		$[106] = disabled;
-		$[107] = field.invalid;
-		$[108] = t35;
-		$[109] = t36;
-		$[110] = touched;
-		$[111] = t37;
-	} else t37 = $[111];
-	return t37;
+		$[112] = className;
+		$[113] = dirty;
+		$[114] = disabled;
+		$[115] = field.invalid;
+		$[116] = t34;
+		$[117] = t35;
+		$[118] = touched;
+		$[119] = t36;
+	} else t36 = $[119];
+	return t36;
 };
 /**
 * The assembled combobox: a labelled field whose control shows the selection —
@@ -407,12 +422,14 @@ var FieldBody = (t0) => {
 * 	itemToStringLabel={user => user.name}
 * 	value={reviewer}
 * 	onValueChange={setReviewer}
+* 	icon={<ExpandMoreIcon />}
+* 	checkIcon={<CheckIcon />}
 * 	{...comboboxCopy}>
 * 	{user => user.name}
 * </ComboboxField>
 */
 var ComboboxField = (props) => {
-	const $ = c(21);
+	const $ = c(22);
 	const { itemKey } = props;
 	const Lookups = use(ItemLookupsContext);
 	let t0;
@@ -460,12 +477,13 @@ var ComboboxField = (props) => {
 					});
 				});
 			};
-			body = (states, labels) => /* @__PURE__ */ jsx(FieldBody, {
+			body = (states, labels, unavailableIcon) => /* @__PURE__ */ jsx(FieldBody, {
 				chrome: props,
 				source: props,
 				derivations: props,
 				mode: props,
 				labels,
+				unavailableIcon,
 				values,
 				states,
 				onChange: change
@@ -492,27 +510,29 @@ var ComboboxField = (props) => {
 	if (t1 !== Symbol.for("react.early_return_sentinel")) return t1;
 	if (Lookups === null) throw new Error("A ComboboxField with an itemQuery needs a <ComboboxItemQueries> above it.");
 	const labels_0 = props;
+	const { unavailableIcon: unavailableIcon_0 } = props;
 	let t2;
-	if ($[12] !== body || $[13] !== labels_0 || $[14] !== statesOf) {
-		t2 = (lookups_0) => body(statesOf(lookups_0), labels_0);
+	if ($[12] !== body || $[13] !== labels_0 || $[14] !== statesOf || $[15] !== unavailableIcon_0) {
+		t2 = (lookups_0) => body(statesOf(lookups_0), labels_0, unavailableIcon_0);
 		$[12] = body;
 		$[13] = labels_0;
 		$[14] = statesOf;
-		$[15] = t2;
-	} else t2 = $[15];
+		$[15] = unavailableIcon_0;
+		$[16] = t2;
+	} else t2 = $[16];
 	let t3;
-	if ($[16] !== Lookups || $[17] !== asked || $[18] !== props.itemQuery || $[19] !== t2) {
+	if ($[17] !== Lookups || $[18] !== asked || $[19] !== props.itemQuery || $[20] !== t2) {
 		t3 = /* @__PURE__ */ jsx(Lookups, {
 			keys: asked,
 			itemQuery: props.itemQuery,
 			children: t2
 		});
-		$[16] = Lookups;
-		$[17] = asked;
-		$[18] = props.itemQuery;
-		$[19] = t2;
-		$[20] = t3;
-	} else t3 = $[20];
+		$[17] = Lookups;
+		$[18] = asked;
+		$[19] = props.itemQuery;
+		$[20] = t2;
+		$[21] = t3;
+	} else t3 = $[21];
 	return t3;
 };
 function _temp(state_1) {

package/dist/components/combobox-field/combobox-items.d.ts

@@ -74,7 +74,7 @@ export declare const loadOf: <TItem>(source: ComboboxItems<TItem>, retryable: (e
  * A paged query's progress once it holds data, else nothing.
  *
  * @example
- * pagedProgress({ items: statuses }); // undefined
+ * pagedProgress(undefined); // undefined
  */
-export declare const pagedProgress: <TItem>(source: ComboboxItems<TItem>) => PagedProgress | undefined;
+export declare const pagedProgress: (query: Pick<PagedQuery<unknown>, "data" | "isFetchingNextPage"> | undefined) => PagedProgress | undefined;
 export {};

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

@@ -18,10 +18,10 @@ var loadOf = (source, retryable) => source.query === void 0 ? source.load ?? OPT
 * A paged query's progress once it holds data, else nothing.
 *
 * @example
-* pagedProgress({ items: statuses }); // undefined
+* pagedProgress(undefined); // undefined
 */
-var pagedProgress = (source) => source.query?.data === void 0 ? void 0 : {
-	totalCount: source.query.data.pages.at(0)?.totalCount,
-	isFetchingNextPage: source.query.isFetchingNextPage
+var pagedProgress = (query) => query?.data === void 0 ? void 0 : {
+	totalCount: query.data.pages.at(0)?.totalCount,
+	isFetchingNextPage: query.isFetchingNextPage
 };
 export { itemsOf, loadOf, pagedProgress };