@mortenbrudvik/waveui 0.14.1 → 0.16.0

package/dist/components/input/Combobox.mjs

@@ -19,208 +19,222 @@ import { pickerButtonOffset as _e, pickerEndPadding as ve, pickerGlyphSize as ye
 import { PickerExpandButton as xe, showsExpandButton as Se } from "./Combobox.expand.mjs";
 import { insertedText as Ce, replacedText as we } from "./Combobox.text.mjs";
 import { ListboxSurface as Te, Option as s, OptionGroup as c, useListboxPopup as Ee } from "./Option.mjs";
-import { PickerAnnouncer as De, announceToggle as Oe, defaultSelectionLabel as ke } from "./pickerLabels.mjs";
-import { EMPTY_VALUES as Ae, resetValues as je, toValues as Me, toggleValue as Ne } from "./pickerValues.mjs";
+import { renderListboxItems as De, renderListboxWindow as Oe, useDataModeWarnings as ke, useItemsAndChildrenWarning as Ae, useShownListScroll as je } from "./Option.data.mjs";
+import { PickerAnnouncer as Me, announceToggle as Ne, defaultSelectionLabel as Pe } from "./pickerLabels.mjs";
+import { EMPTY_VALUES as Fe, resetValues as Ie, toValues as Le, toggleValue as Re } from "./pickerValues.mjs";
 import * as l from "react";
-import { jsx as u, jsxs as Pe } from "react/jsx-runtime";
+import { jsx as u, jsxs as ze } from "react/jsx-runtime";
 //#region src/components/input/Combobox.tsx
-var d = /* @__PURE__ */ new Set(["historyUndo", "historyRedo"]);
-function Fe(e, t) {
+var d = /* @__PURE__ */ new Set(["historyUndo", "historyRedo"]), Be = /* @__PURE__ */ new Map();
+function Ve(e, t) {
 	return (e.textValue ?? e.label).toLowerCase().includes(t.toLowerCase());
 }
 var f = (s) => {
-	let { multiselect: c = !1, value: f, defaultValue: p, onValueChange: Ie, onOptionSelect: m, open: Le, defaultOpen: Re, onOpenChange: ze, placeholder: Be, disabled: h = !1, size: Ve, positioning: He, appearance: Ue, freeform: g = !1, filter: We, query: Ge, defaultQuery: Ke, onQueryChange: qe, onActiveOptionChange: Je, disabledOptionsFocusable: Ye = !1, name: Xe, form: Ze, required: Qe, autoComplete: $e = "off", autoCapitalize: et, autoCorrect: tt, maxLength: nt, readOnly: _, clearable: rt = !1, expandIcon: it, labels: v, inputMode: at, spellCheck: ot, enterKeyHint: st, autoFocus: ct, tabIndex: lt, id: ut, "aria-label": dt, "aria-labelledby": ft, "aria-describedby": pt, "aria-invalid": mt, "aria-required": ht, "aria-errormessage": gt, "aria-details": _t, onFocus: vt, onBlur: yt, onKeyDown: bt, onKeyUp: xt, controlRef: St, className: Ct, children: y, ref: wt, ...Tt } = s;
+	let { multiselect: c = !1, value: f, defaultValue: p, onValueChange: He, onOptionSelect: m, open: Ue, defaultOpen: We, onOpenChange: Ge, placeholder: Ke, disabled: h = !1, size: qe, positioning: Je, appearance: Ye, freeform: Xe = !1, filter: Ze, query: Qe, defaultQuery: $e, onQueryChange: et, onActiveOptionChange: tt, disabledOptionsFocusable: nt = !1, name: rt, form: it, required: at, autoComplete: ot = "off", autoCapitalize: st, autoCorrect: ct, maxLength: lt, readOnly: g, clearable: ut = !1, expandIcon: dt, labels: _, items: v, renderOption: ft, virtualWindow: pt, inputMode: mt, spellCheck: ht, enterKeyHint: gt, autoFocus: _t, tabIndex: vt, id: yt, "aria-label": bt, "aria-labelledby": xt, "aria-describedby": St, "aria-invalid": Ct, "aria-required": wt, "aria-errormessage": Tt, "aria-details": Et, onFocus: Dt, onBlur: Ot, onKeyDown: kt, onKeyUp: At, controlRef: jt, className: Mt, children: y, ref: Nt, ...Pt } = s;
 	m !== void 0 && t("Combobox", "onOptionSelect", "onValueChange");
-	let b = g && !c, Et = g && c;
+	let b = Xe && !c, Ft = Xe && c;
 	l.useEffect(() => {
-		Et && n("Combobox:freeform-multiselect", "Combobox: `freeform` is not available with `multiselect`: a multi-select Combobox selects options only.");
-	}, [Et]);
-	let Dt = b && (Ge !== void 0 || Ke !== void 0);
+		Ft && n("Combobox:freeform-multiselect", "Combobox: `freeform` is not available with `multiselect`: a multi-select Combobox selects options only.");
+	}, [Ft]);
+	let It = b && (Qe !== void 0 || $e !== void 0);
 	l.useEffect(() => {
-		Dt && n("Combobox:query-freeform", "Combobox: `query` and `defaultQuery` are not used with `freeform`: the typed text is the value (`value`, `onValueChange`).");
-	}, [Dt]);
-	let Ot = ne(), kt = (Qe ?? Ot?.required ?? !1) && !_, x = re({
-		id: ut,
-		"aria-label": dt,
-		"aria-labelledby": ft,
-		"aria-describedby": pt,
-		"aria-invalid": mt,
-		"aria-required": ht ?? Qe
-	}), At = me(!1, x["aria-invalid"]), { size: S, appearance: C } = pe(Ve, Ue), [jt, w] = a(f, p ?? (c ? Ae : ""), (e) => {
-		Ie?.(typeof e == "string" ? e : [...e]);
-	}), T = Me(jt), E = c ? "" : jt, D = !h && !_, [Mt, O] = a(Le, (Re ?? !1) && D, ze), k = Mt && D, [Nt, A] = a(b ? void 0 : Ge, D ? Ke ?? "" : "", b ? void 0 : qe), [Pt, j] = l.useState(!1), [M, N] = l.useState(null), P = b ? M : D && (Pt || Nt !== "") ? Nt : null, [F, Ft] = l.useState(D ? "unlocked" : "mounted-locked");
-	D && F !== "unlocked" ? Ft("unlocked") : !D && F === "unlocked" && (Ft("locked"), j(!1), N(null)), l.useEffect(() => {
+		It && n("Combobox:query-freeform", "Combobox: `query` and `defaultQuery` are not used with `freeform`: the typed text is the value (`value`, `onValueChange`).");
+	}, [It]);
+	let Lt = ne(), Rt = (at ?? Lt?.required ?? !1) && !g, x = re({
+		id: yt,
+		"aria-label": bt,
+		"aria-labelledby": xt,
+		"aria-describedby": St,
+		"aria-invalid": Ct,
+		"aria-required": wt ?? at
+	}), zt = me(!1, x["aria-invalid"]), { size: S, appearance: C } = pe(qe, Ye), [Bt, w] = a(f, p ?? (c ? Fe : ""), (e) => {
+		He?.(typeof e == "string" ? e : [...e]);
+	}), T = Le(Bt), E = c ? "" : Bt, D = !h && !g, [Vt, O] = a(Ue, (We ?? !1) && D, Ge), k = Vt && D, [Ht, A] = a(b ? void 0 : Qe, D ? $e ?? "" : "", b ? void 0 : et), [Ut, j] = l.useState(!1), [M, N] = l.useState(null), P = b ? M : D && (Ut || Ht !== "") ? Ht : null, [F, Wt] = l.useState(D ? "unlocked" : "mounted-locked");
+	D && F !== "unlocked" ? Wt("unlocked") : !D && F === "unlocked" && (Wt("locked"), j(!1), N(null)), l.useEffect(() => {
 		F === "locked" && A("");
 	}, [F, A]);
-	let It = !D && Mt;
+	let Gt = !D && Vt;
 	l.useEffect(() => {
-		It && O(!1);
-	}, [It, O]);
-	let [Lt, I] = l.useState(null), Rt = l.useRef(null), L = l.useRef(null), zt = l.useMemo(() => ie(y), [y]), R = P ?? "", Bt = l.useMemo(() => R ? (e) => (We ?? Fe)(e, R) : void 0, [R, We]), z = (e) => {
+		Gt && O(!1);
+	}, [Gt, O]);
+	let [Kt, I] = l.useState(null), qt = l.useRef(null), L = l.useRef(null), R = v !== void 0, Jt = l.useMemo(() => R ? Be : ie(y), [R, y]);
+	Ae("Combobox", v, y), ke("Combobox", {
+		items: v,
+		renderOption: ft,
+		virtualWindow: pt,
+		children: y
+	});
+	let z = R ? pt : void 0, B = P ?? "", Yt = l.useMemo(() => B ? (e) => (Ze ?? Ve)(e, B) : void 0, [B, Ze]), V = (e) => {
 		b ? N(e) : (j(!0), A(e));
-	}, B = () => {
+	}, H = () => {
 		b ? N(null) : (j(!1), A(""));
-	}, Vt = (e) => {
+	}, Xt = (e) => {
 		I(e), w(e), m?.(e);
-	}, V = () => {
-		O(!1), B();
-	}, H;
-	b ? H = () => {
-		N(null), Vt("");
-	} : P && (H = B);
-	let U = ae({
+	}, U = () => {
+		O(!1), H();
+	}, W;
+	b ? W = () => {
+		N(null), Xt("");
+	} : P && (W = H);
+	let G = ae({
 		open: k,
 		onOpenChange: (e) => {
-			e ? O(!0) : V();
+			e ? O(!0) : U();
 		},
 		mode: "editable",
 		multiselect: c,
-		disabledOptionsFocusable: Ye,
+		disabledOptionsFocusable: nt,
+		items: v,
 		selectedValues: T,
 		onSelect: (e, t) => {
 			if (!c) {
-				w(e), m?.(e), B(), I(null);
+				w(e), m?.(e), H(), I(null);
 				return;
 			}
-			let { values: n, added: r } = Ne(T, e);
-			w(n), m?.(e), Oe(v, t?.item.label ?? zt.get(e) ?? e, r, n.length), B();
+			let { values: n, added: r } = Re(T, e);
+			w(n), m?.(e), Ne(_, t?.item.label ?? Jt.get(e) ?? e, r, n.length), H();
 		},
-		filter: Bt,
+		filter: Yt,
 		autoHighlight: !b && P ? "first" : !1,
-		onActiveValueChange: Je,
+		onActiveValueChange: tt,
+		onScrollToItem: z ? (e) => z.scrollToIndex(e, { align: "auto" }) : void 0,
 		idPrefix: "combobox-listbox",
-		onClearDraft: H
-	}), Ht = (e) => U.getItem(e)?.label ?? zt.get(e), W = "";
+		onClearDraft: W
+	}), Zt = (e) => G.getItem(e)?.label ?? Jt.get(e), K = "";
 	if (c) {
-		let e = T.map(Ht).filter((e) => e !== void 0);
-		e.length > 0 && (W = (v?.selection ?? ke)(e));
+		let e = T.map(Zt).filter((e) => e !== void 0);
+		e.length > 0 && (K = (_?.selection ?? Pe)(e));
 	}
-	let G = c && P === null && W !== "", Ut = E ? Ht(E) : void 0, K;
-	K = c ? P ?? W : b ? E === Lt ? E : Ut ?? E : P ?? Ut ?? "", b && M !== null && M !== K && N(K);
-	let q = k && U.items.length > 0, Wt = v?.noMatches ?? "No matches", J = k && (q || !!P), Gt = J && !q, { layerId: Kt, setReference: qt, surfaceRef: Jt, floatingProps: Yt } = Ee({
-		positioning: He,
+	let q = c && P === null && K !== "", Qt = E ? Zt(E) : void 0, J;
+	J = c ? P ?? K : b ? E === Kt ? E : Qt ?? E : P ?? Qt ?? "", b && M !== null && M !== J && N(J);
+	let Y = k && G.items.length > 0, $t = _?.noMatches ?? "No matches", X = k && (Y || !!P), en = X && !Y, { layerId: tn, setReference: nn, surfaceRef: rn, floatingProps: an } = Ee({
+		positioning: Je,
 		open: k,
-		surfaceOpen: J,
-		onDismiss: V,
-		rootRef: Rt,
+		surfaceOpen: X,
+		onDismiss: U,
+		rootRef: qt,
 		anchorRef: L
-	}), Xt = o(Rt, wt), Zt = o(L, St, qt);
-	he(L, () => {
-		w(c ? (e) => je(e, p) : p ?? ""), B(), I(null);
-	}, Ze);
-	let Y = l.useRef(!1), Qt = (e) => {
-		Y.current = G && !te(e.currentTarget);
-	}, $t = (e) => {
-		G && e.currentTarget.select();
-	}, en = (e) => {
-		Y.current && (Y.current = !1, e.preventDefault());
+	}), on = o(qt, Nt), sn = o(L, jt, nn), cn = o(Y ? z?.scrollRef : void 0);
+	je(Y, z, G.items, G.activeValue, T), he(L, () => {
+		w(c ? (e) => Ie(e, p) : p ?? ""), H(), I(null);
+	}, it);
+	let Z = l.useRef(!1), ln = (e) => {
+		Z.current = q && !te(e.currentTarget);
+	}, un = (e) => {
+		q && e.currentTarget.select();
+	}, dn = (e) => {
+		Z.current && (Z.current = !1, e.preventDefault());
 	};
 	l.useLayoutEffect(() => {
 		let e = L.current;
-		G && e && te(e) && e.select();
-	}, [G, W]);
-	let X = l.useRef(null), tn = l.useRef(null), Z = ee((e) => {
+		q && e && te(e) && e.select();
+	}, [q, K]);
+	let Q = l.useRef(null), fn = l.useRef(null), pn = ee((e) => {
 		let t = e.currentTarget;
-		G && t.value === W && (X.current = null, !d.has(e.inputType ?? "") && (tn.current = e, z(W), k || O(!0)));
+		q && t.value === K && (Q.current = null, !d.has(e.inputType ?? "") && (fn.current = e, V(K), k || O(!0)));
 	});
 	l.useEffect(() => {
 		let e = L.current;
 		if (!c || !e) return;
 		let t = (t) => {
 			let { inputType: n } = t, { selectionStart: r, selectionEnd: i } = e;
-			X.current = {
+			Q.current = {
 				inputType: n,
 				range: n === "insertFromDrop" || d.has(n) || r === null || i === null ? null : [r, i]
 			};
 		};
-		return e.addEventListener("beforeinput", t), e.addEventListener("input", Z), () => {
-			e.removeEventListener("beforeinput", t), e.removeEventListener("input", Z);
+		return e.addEventListener("beforeinput", t), e.addEventListener("input", pn), () => {
+			e.removeEventListener("beforeinput", t), e.removeEventListener("input", pn);
 		};
-	}, [c, Z]);
-	let nn = (e) => {
-		if (e.key === "Escape" && k && !J && !e.nativeEvent.isComposing) {
-			V(), H && e.currentTarget.value !== "" && (e.preventDefault(), H());
+	}, [c, pn]);
+	let mn = (e) => {
+		if (e.key === "Escape" && k && !X && !e.nativeEvent.isComposing) {
+			U(), W && e.currentTarget.value !== "" && (e.preventDefault(), W());
 			return;
 		}
-		U.onKeyDown(e);
-	}, rn = (e) => {
-		if (e.nativeEvent === tn.current) return;
-		let t = e.target.value, n = X.current;
-		X.current = null;
+		G.onKeyDown(e);
+	}, hn = (e) => {
+		if (e.nativeEvent === fn.current) return;
+		let t = e.target.value, n = Q.current;
+		Q.current = null;
 		let r = n && n.inputType === e.nativeEvent.inputType ? n : null;
-		if (!c) z(t);
-		else if (t === W && (r === null || d.has(r.inputType))) B();
-		else if (G) {
+		if (!c) V(t);
+		else if (t === K && (r === null || d.has(r.inputType))) H();
+		else if (q) {
 			let e = r?.range;
-			z((e && we(W, t, e[0], e[1])) ?? Ce(W, t));
-		} else z(t);
-		k || O(!0), b && Vt(t);
-	}, an = () => {
-		D && (k ? V() : O(!0), L.current?.focus());
-	}, on = () => {
-		w(c ? Ae : ""), I(null), B(), O(!1), L.current?.focus();
-	}, Q = Se(it), $ = rt && (c ? T.length > 0 : E !== "") && !_, sn = x["aria-label"] === void 0 ? x["aria-labelledby"] ?? Ot?.labelId : x["aria-labelledby"];
-	return /* @__PURE__ */ Pe("div", {
+			V((e && we(K, t, e[0], e[1])) ?? Ce(K, t));
+		} else V(t);
+		k || O(!0), b && Xt(t);
+	}, gn = () => {
+		D && (k ? U() : O(!0), L.current?.focus());
+	}, _n = () => {
+		w(c ? Fe : ""), I(null), H(), O(!1), L.current?.focus();
+	}, $ = Se(dt), vn = ut && (c ? T.length > 0 : E !== "") && !g, yn = x["aria-label"] === void 0 ? x["aria-labelledby"] ?? Lt?.labelId : x["aria-labelledby"], bn = {
+		selected: new Set(T),
+		activeValue: G.activeValue,
+		renderOption: ft
+	};
+	return /* @__PURE__ */ ze("div", {
 		"data-size": S,
 		"data-appearance": C,
-		...Tt,
-		ref: Xt,
-		className: e(i.root, "relative inline-flex flex-col", Ct),
+		...Pt,
+		ref: on,
+		className: e(i.root, "relative inline-flex flex-col", Mt),
 		children: [
-			c && /* @__PURE__ */ u(De, {}),
-			/* @__PURE__ */ Pe("div", {
+			c && /* @__PURE__ */ u(Me, {}),
+			/* @__PURE__ */ ze("div", {
 				className: "relative flex items-center",
 				children: [
 					/* @__PURE__ */ u("input", {
 						type: "text",
-						autoComplete: $e,
+						autoComplete: ot,
 						...x,
-						...U.getComboboxProps(),
-						"aria-expanded": q,
-						"aria-errormessage": gt,
-						"aria-details": _t,
-						ref: Zt,
+						...G.getComboboxProps(),
+						"aria-expanded": Y,
+						"aria-errormessage": Tt,
+						"aria-details": Et,
+						ref: sn,
 						disabled: h,
-						readOnly: _,
-						placeholder: c && W !== "" ? void 0 : Be,
-						autoCapitalize: et,
-						autoCorrect: tt,
-						maxLength: G ? void 0 : nt,
-						inputMode: at,
-						spellCheck: ot,
-						enterKeyHint: st,
-						autoFocus: ct,
-						tabIndex: lt,
-						value: K,
-						onChange: rn,
+						readOnly: g,
+						placeholder: c && K !== "" ? void 0 : Ke,
+						autoCapitalize: st,
+						autoCorrect: ct,
+						maxLength: q ? void 0 : lt,
+						inputMode: mt,
+						spellCheck: ht,
+						enterKeyHint: gt,
+						autoFocus: _t,
+						tabIndex: vt,
+						value: J,
+						onChange: hn,
 						onClick: () => {
 							!k && D && O(!0);
 						},
-						onMouseDown: Qt,
-						onMouseUp: en,
-						onKeyDown: r(bt, _ ? void 0 : nn),
-						onKeyUp: r(xt, U.onKeyUp),
-						onFocus: r(vt, $t),
-						onBlur: r(yt, B, { checkDefaultPrevented: !1 }),
-						className: e(i.input, le[S], "w-full", ue[S], de[S], se[C], "text-foreground placeholder:text-muted-foreground", ce, oe, At && "border-destructive", ve(Number($) + Number(Q), S))
+						onMouseDown: ln,
+						onMouseUp: dn,
+						onKeyDown: r(kt, g ? void 0 : mn),
+						onKeyUp: r(At, G.onKeyUp),
+						onFocus: r(Dt, un),
+						onBlur: r(Ot, H, { checkDefaultPrevented: !1 }),
+						className: e(i.input, le[S], "w-full", ue[S], de[S], se[C], "text-foreground placeholder:text-muted-foreground", ce, oe, zt && "border-destructive", ve(Number(vn) + Number($), S))
 					}),
-					$ && /* @__PURE__ */ u("button", {
+					vn && /* @__PURE__ */ u("button", {
 						type: "button",
-						"aria-label": v?.clear ?? "Clear selection",
+						"aria-label": _?.clear ?? "Clear selection",
 						disabled: h,
 						onMouseDown: (e) => e.preventDefault(),
-						onClick: on,
-						className: e(i.clearButton, be(S, C), _e(S, Q ? 2 : 1), "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", "disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100"),
+						onClick: _n,
+						className: e(i.clearButton, be(S, C), _e(S, $ ? 2 : 1), "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", "disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100"),
 						children: /* @__PURE__ */ u(fe, { size: ye(S, "icon") })
 					}),
-					Q && /* @__PURE__ */ u(xe, {
+					$ && /* @__PURE__ */ u(xe, {
 						component: "Combobox",
-						expandIcon: it,
-						label: v?.expand ?? "Show options",
-						expanded: q,
-						listboxId: U.listboxId,
-						disabled: h || !!_,
-						onToggle: an,
+						expandIcon: dt,
+						label: _?.expand ?? "Show options",
+						expanded: Y,
+						listboxId: G.listboxId,
+						disabled: h || !!g,
+						onToggle: gn,
 						size: S,
 						appearance: C,
 						className: i.expandButton,
@@ -231,44 +245,45 @@ var f = (s) => {
 			/* @__PURE__ */ u("span", {
 				role: "status",
 				className: "sr-only",
-				children: Gt && Wt
+				children: en && $t
 			}),
 			/* @__PURE__ */ u(Te, {
-				listbox: U,
-				layerId: Kt,
-				surfaceRef: Jt,
-				floatingProps: Yt,
+				listbox: G,
+				layerId: tn,
+				surfaceRef: rn,
+				floatingProps: an,
 				open: k,
-				expanded: q,
-				listClassName: i.listbox,
+				expanded: Y,
+				listClassName: e(i.listbox, z && "[overflow-anchor:none]"),
 				surfaceClassName: i.surface,
 				emptyContent: P ? /* @__PURE__ */ u("div", {
 					"aria-hidden": "true",
 					className: e(i.emptyMessage, "px-3 py-1.5 text-body-1 text-muted-foreground"),
-					children: Wt
+					children: $t
 				}) : void 0,
 				"aria-label": x["aria-label"],
-				"aria-labelledby": sn,
-				children: y
+				"aria-labelledby": yn,
+				listProps: z ? { ref: cn } : void 0,
+				children: R ? Y && (z ? Oe(G.items, z, bn, i.spacer) : De(G.items, bn)) : y
 			}),
 			/* @__PURE__ */ u(ge, {
-				name: Xe,
-				form: Ze,
+				name: rt,
+				form: it,
 				disabled: h,
 				value: c ? T : E,
 				type: "text",
-				required: kt,
+				required: Rt,
 				onInvalid: () => L.current?.focus()
 			})
 		]
 	});
 };
 f.displayName = "Combobox";
-var p = s, Ie = c, m = /* @__PURE__ */ Object.assign(f, {
+var p = s, He = c, m = /* @__PURE__ */ Object.assign(f, {
 	Option: s,
 	OptionGroup: c
 });
 //#endregion
-export { m as Combobox, p as ComboboxOption, Ie as ComboboxOptionGroup, s as Option, c as OptionGroup };
+export { m as Combobox, p as ComboboxOption, He as ComboboxOptionGroup, s as Option, c as OptionGroup };
 
 //# sourceMappingURL=Combobox.mjs.map