@mortenbrudvik/waveui 0.8.0 → 0.10.0

package/dist/components/input/Combobox.mjs

@@ -1,192 +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, inputBase as re, inputFocus as ie } from "../../lib/styles.mjs";
-import { DismissIcon as ae } from "../../lib/icons.mjs";
-import { isInvalidLook as oe } from "./Input.mjs";
-import { useFormReset as se } from "../../hooks/useFormReset.mjs";
-import { HiddenInput as ce } from "../internal/HiddenInput.mjs";
-import { collectOptionLabels as le, useListbox as ue } from "../../hooks/useListbox.mjs";
-import { pickerEndPadding as de } from "./pickerStyles.mjs";
-import { PickerExpandButton as fe, showsExpandButton as pe } from "./Combobox.expand.mjs";
-import { ListboxSurface as me, Option as o, OptionGroup as s, useListboxPopup as he } from "./Option.mjs";
+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 u } from "react/jsx-runtime";
+import { jsx as l, jsxs as Fe } from "react/jsx-runtime";
 //#region src/components/input/Combobox.tsx
-function ge(e, t) {
+var u = /* @__PURE__ */ new Set(["historyUndo", "historyRedo"]);
+function Ie(e, t) {
 	return (e.textValue ?? e.label).toLowerCase().includes(t.toLowerCase());
 }
 var d = (o) => {
-	let { value: s, defaultValue: d, onValueChange: f, onOptionSelect: p, open: m, defaultOpen: _e, onOpenChange: ve, placeholder: ye, disabled: h = !1, freeform: g = !1, name: be, form: _, required: v, autoComplete: xe = "off", autoCapitalize: Se, autoCorrect: Ce, maxLength: we, readOnly: y, clearable: Te = !1, expandIcon: b, labels: x, inputMode: Ee, spellCheck: De, enterKeyHint: S, autoFocus: C, tabIndex: w, id: T, "aria-label": E, "aria-labelledby": Oe, "aria-describedby": ke, "aria-invalid": Ae, "aria-required": je, "aria-errormessage": Me, "aria-details": Ne, onFocus: Pe, onBlur: Fe, onKeyDown: Ie, onKeyUp: Le, controlRef: Re, className: ze, children: D, ref: Be, ...Ve } = 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 O = ee(), He = (v ?? O?.required ?? !1) && !y, k = te({
-		id: T,
-		"aria-label": E,
-		"aria-labelledby": Oe,
-		"aria-describedby": ke,
-		"aria-invalid": Ae,
-		"aria-required": je ?? v
-	}), Ue = oe(!1, k["aria-invalid"]), [A, j] = i(s, d ?? "", f), M = !h && !y, [N, P] = i(m, (_e ?? !1) && M, ve), F = N && M, [I, L] = c.useState(null), [We, Ge] = c.useState(M);
-	We !== M && (Ge(M), M || L(null));
-	let R = !M && N;
+	let y = We && !s, Et = We && s;
 	c.useEffect(() => {
-		R && P(!1);
-	}, [R, P]);
-	let [Ke, z] = c.useState(null), B = c.useRef(null), V = c.useRef(null), qe = c.useMemo(() => le(D), [D]), Je = c.useMemo(() => I ? (e) => ge(e, I) : void 0, [I]), H = (e) => {
-		z(e), j(e), p?.(e);
-	}, U = () => {
-		P(!1), L(null);
-	}, W;
-	g ? W = () => {
-		L(null), H("");
-	} : I && (W = () => L(null));
-	let G = ue({
-		open: F,
+		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 ? P(!0) : U();
+			e ? k(!0) : H();
 		},
 		mode: "editable",
-		selectedValues: A ? [A] : [],
-		onSelect: (e) => {
-			j(e), p?.(e), L(null), z(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: Je,
-		autoHighlight: !g && I ? "first" : !1,
+		filter: Rt,
+		autoHighlight: !y && F ? "first" : !1,
+		onActiveValueChange: Ye,
 		idPrefix: "combobox-listbox",
-		onClearDraft: W
-	}), K = A ? G.getItem(A)?.label ?? qe.get(A) : void 0, q;
-	q = g ? A === Ke ? A : K ?? A : I ?? K ?? "", g && I !== null && I !== q && L(q);
-	let J = F && G.items.length > 0, Y = x?.noMatches ?? "No matches", X = F && (J || !!I), Ye = X && !J, { layerId: Xe, setReference: Ze, surfaceRef: Qe, floatingProps: $e } = he({
-		open: F,
-		surfaceOpen: X,
-		onDismiss: U,
-		rootRef: B,
-		anchorRef: V
-	}), Z = a(B, Be), et = a(V, Re, Ze);
-	se(V, () => {
-		j(d ?? ""), L(null), z(null);
-	}, _);
-	let tt = (e) => {
-		if (e.key === "Escape" && F && !X && !e.nativeEvent.isComposing) {
-			U(), W && e.currentTarget.value !== "" && (e.preventDefault(), W());
+		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;
 		}
-		G.onKeyDown(e);
-	}, nt = (e) => {
-		let t = e.target.value;
-		L(t), F || P(!0), g && H(t);
-	}, rt = () => {
-		M && (F ? U() : P(!0), V.current?.focus());
-	}, it = () => {
-		j(""), z(null), L(null), P(!1), V.current?.focus();
-	}, Q = pe(b), $ = Te && A !== "" && !y, at = k["aria-label"] === void 0 ? k["aria-labelledby"] ?? O?.labelId : k["aria-labelledby"];
-	return /* @__PURE__ */ u("div", {
-		...Ve,
-		ref: Z,
-		className: e(r.root, "relative inline-flex flex-col", ze),
+		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__ */ u("div", {
+			s && /* @__PURE__ */ l(Oe, {}),
+			/* @__PURE__ */ Fe("div", {
 				className: "relative flex items-center",
 				children: [
 					/* @__PURE__ */ l("input", {
 						type: "text",
-						autoComplete: xe,
-						...k,
-						...G.getComboboxProps(),
+						autoComplete: $e,
+						...x,
+						...W.getComboboxProps(),
 						"aria-expanded": J,
-						"aria-errormessage": Me,
-						"aria-details": Ne,
-						ref: et,
-						disabled: h,
-						readOnly: y,
-						placeholder: ye,
-						autoCapitalize: Se,
-						autoCorrect: Ce,
-						maxLength: we,
-						inputMode: Ee,
-						spellCheck: De,
-						enterKeyHint: S,
-						autoFocus: C,
-						tabIndex: w,
+						"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: nt,
+						onChange: tn,
 						onClick: () => {
-							!F && M && P(!0);
+							!A && D && k(!0);
 						},
-						onKeyDown: n(Ie, y ? void 0 : tt),
-						onKeyUp: n(Le, G.onKeyUp),
-						onFocus: Pe,
-						onBlur: n(Fe, () => L(null), { checkDefaultPrevented: !1 }),
-						className: e(r.input, re, "border-b-stroke-accessible", ie, ne, Ue && "border-destructive focus:border-b-destructive", de(Number($) + Number(Q)))
+						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__ */ l("button", {
+					an && /* @__PURE__ */ l("button", {
 						type: "button",
-						"aria-label": x?.clear ?? "Clear selection",
-						disabled: h,
+						"aria-label": _?.clear ?? "Clear selection",
+						disabled: m,
 						onMouseDown: (e) => e.preventDefault(),
-						onClick: it,
-						className: e(r.clearButton, "absolute flex h-6 w-6 items-center justify-center rounded bg-transparent p-0 text-muted-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:hover:text-foreground", Q ? "end-7" : "end-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(ae, {})
+						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__ */ l(fe, {
+					$ && /* @__PURE__ */ l(Se, {
 						component: "Combobox",
-						expandIcon: b,
-						label: x?.expand ?? "Show options",
+						expandIcon: it,
+						label: _?.expand ?? "Show options",
 						expanded: J,
-						listboxId: G.listboxId,
-						disabled: h || !!y,
-						onToggle: rt,
-						className: r.expandButton,
-						iconClassName: r.expandIcon
+						listboxId: W.listboxId,
+						disabled: m || !!g,
+						onToggle: nn,
+						size: S,
+						appearance: C,
+						className: i.expandButton,
+						iconClassName: i.expandIcon
 					})
 				]
 			}),
 			/* @__PURE__ */ l("span", {
 				role: "status",
 				className: "sr-only",
-				children: Ye && Y
+				children: Ut && Ht
 			}),
-			/* @__PURE__ */ l(me, {
-				listbox: G,
-				layerId: Xe,
-				surfaceRef: Qe,
-				floatingProps: $e,
-				open: F,
+			/* @__PURE__ */ l(Ee, {
+				listbox: W,
+				layerId: Wt,
+				surfaceRef: Kt,
+				floatingProps: qt,
+				open: A,
 				expanded: J,
-				listboxClassName: r.listbox,
-				surfaceClassName: r.surface,
-				emptyContent: I ? /* @__PURE__ */ l("div", {
+				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: Y
+					className: e(i.emptyMessage, "px-3 py-1.5 text-body-1 text-muted-foreground"),
+					children: Ht
 				}) : void 0,
-				"aria-label": k["aria-label"],
-				"aria-labelledby": at,
-				children: D
+				"aria-label": x["aria-label"],
+				"aria-labelledby": on,
+				children: v
 			}),
-			/* @__PURE__ */ l(ce, {
-				name: be,
-				form: _,
-				disabled: h,
-				value: A,
+			/* @__PURE__ */ l(_e, {
+				name: Ze,
+				form: h,
+				disabled: m,
+				value: s ? T : E,
 				type: "text",
-				required: He,
-				onInvalid: () => V.current?.focus()
+				required: Ot,
+				onInvalid: () => R.current?.focus()
 			})
 		]
 	});
 };
 d.displayName = "Combobox";
-var f = o, p = s, m = /* @__PURE__ */ Object.assign(d, {
+var f = o, Le = s, p = /* @__PURE__ */ Object.assign(d, {
 	Option: o,
 	OptionGroup: s
 });
 //#endregion
-export { m as Combobox, f as ComboboxOption, p as ComboboxOptionGroup, o as Option, s as OptionGroup };
+export { p as Combobox, f as ComboboxOption, Le as ComboboxOptionGroup, o as Option, s as OptionGroup };
 
 //# sourceMappingURL=Combobox.mjs.map