@mortenbrudvik/waveui 0.9.0 → 0.10.0

package/dist/components/input/Combobox.mjs

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