@mortenbrudvik/waveui 0.7.0 → 0.9.0

package/dist/components/input/TagPicker.mjs

@@ -2,248 +2,278 @@
 import { cn as e } from "../../lib/cn.mjs";
 import { warnDeprecated as t, warnOnce as n } from "../../lib/dev.mjs";
 import { composeEventHandlers as r } from "../../lib/composeEventHandlers.mjs";
-import { useControllable as i } from "../../hooks/useControllable.mjs";
-import { useId as a } from "../../hooks/useId.mjs";
-import { getArrowIntent as o, getDirection as ee } from "../../lib/direction.mjs";
-import { useMergedRefs as s } from "../../hooks/useMergedRefs.mjs";
+import { tagPickerClassNames as i } from "../../lib/classNames.mjs";
+import { useControllable as a } from "../../hooks/useControllable.mjs";
+import { useId as o } from "../../hooks/useId.mjs";
+import { getArrowIntent as s, getDirection as ee } from "../../lib/direction.mjs";
+import { useMergedRefs as c } from "../../hooks/useMergedRefs.mjs";
 import { useIsClient as te } from "../../hooks/useIsClient.mjs";
-import { joinIds as c } from "../../lib/aria.mjs";
-import { useFieldContext as l, useFieldControl as ne } from "../../hooks/useFieldControl.mjs";
-import { useAnnounce as re } from "../../hooks/useAnnounce.mjs";
-import { focusRing as u, inputFocusWithin as ie } from "../../lib/styles.mjs";
-import { DismissIcon as d } from "../../lib/icons.mjs";
-import { isInvalidLook as ae } from "./Input.mjs";
-import { useFormReset as oe } from "../../hooks/useFormReset.mjs";
-import { HiddenInput as se } from "../internal/HiddenInput.mjs";
-import { useListbox as ce } from "../../hooks/useListbox.mjs";
-import { ListboxSurface as le, Option as ue, useListboxPopup as de } from "./Option.mjs";
-import { usePreserveFocus as f } from "../../hooks/usePreserveFocus.mjs";
-import * as p from "react";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { joinIds as ne } from "../../lib/aria.mjs";
+import { useFieldContext as re, useFieldControl as ie } from "../../hooks/useFieldControl.mjs";
+import { useAnnounce as ae } from "../../hooks/useAnnounce.mjs";
+import { focusRing as l, inputAppearanceClasses as oe, inputFocusWithin as se } from "../../lib/styles.mjs";
+import { DismissIcon as u } 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 { useListbox as fe } from "../../hooks/useListbox.mjs";
+import { ListboxSurface as pe, Option as me, useListboxPopup as he } from "./Option.mjs";
+import { usePreserveFocus as d } from "../../hooks/usePreserveFocus.mjs";
+import * as f from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/components/input/TagPicker.tsx
-var fe = (e) => `Remove ${e}`, pe = (e) => `Selected: ${e.join(", ")}`, me = (e, t) => `${e} added, ${t} selected`, he = (e, t) => `${e} removed, ${t} selected`, g = [];
-function ge(e, t) {
+var ge = (e) => `Remove ${e}`, _e = (e) => `Selected: ${e.join(", ")}`, ve = (e, t) => `${e} added, ${t} selected`, ye = (e, t) => `${e} removed, ${t} selected`, be = [
+	"medium",
+	"large",
+	"extra-large"
+], xe = {
+	medium: {
+		control: "gap-1 px-2 py-1.5",
+		tag: "px-2 py-0.5 text-body-1",
+		input: "py-0.5 text-body-1"
+	},
+	large: {
+		control: "gap-1.5 px-2.5 py-2",
+		tag: "px-2 py-1 text-body-1",
+		input: "py-1 text-body-1"
+	},
+	"extra-large": {
+		control: "gap-1.5 px-3 py-2.5",
+		tag: "px-2.5 py-1 text-body-2",
+		input: "py-1 text-body-2"
+	}
+}, h = [];
+function Se(e, t) {
 	return e.length === t.length && e.every((e, n) => e === t[n]);
 }
-function _e({ label: t, disabled: n, onClick: r, onKeyDown: i, getFallback: a }) {
-	let o = p.useRef(null);
-	return f(o, a), /* @__PURE__ */ m("button", {
-		ref: o,
+function Ce({ label: t, disabled: n, onClick: r, onKeyDown: a, getFallback: o }) {
+	let s = f.useRef(null);
+	return d(s, o), /* @__PURE__ */ p("button", {
+		ref: s,
 		type: "button",
 		"data-wave-tagpicker-remove": "",
 		disabled: n,
 		"aria-label": t,
-		className: e("ms-0.5 inline-flex rounded-sm bg-transparent p-0 text-muted-foreground not-disabled:not-aria-disabled:hover:text-foreground disabled:cursor-not-allowed", u),
+		className: e(i.removeButton, "ms-0.5 inline-flex rounded-sm bg-transparent p-0 text-muted-foreground not-disabled:not-aria-disabled:hover:text-foreground disabled:cursor-not-allowed", l),
 		onClick: r,
-		onKeyDown: i,
-		children: /* @__PURE__ */ m(d, { size: 12 })
+		onKeyDown: a,
+		children: /* @__PURE__ */ p(u, { size: 12 })
 	});
 }
-var _ = (u) => {
-	let { options: d, value: f, defaultValue: _, onValueChange: ve, onChange: v, open: ye, defaultOpen: be, onOpenChange: xe, placeholder: Se = "Select...", disabled: y = !1, name: Ce, form: b, required: x, autoComplete: we = "off", autoCapitalize: Te, autoCorrect: Ee, maxLength: S, readOnly: C, labels: w, inputMode: T, spellCheck: E, enterKeyHint: D, autoFocus: De, tabIndex: Oe, id: ke, "aria-label": Ae, "aria-labelledby": je, "aria-describedby": Me, "aria-invalid": Ne, "aria-required": Pe, "aria-errormessage": Fe, "aria-details": Ie, onFocus: Le, onBlur: Re, onKeyDown: ze, onKeyUp: Be, controlRef: Ve, className: He, ref: Ue, ...We } = u;
-	v !== void 0 && t("TagPicker", "onChange", "onValueChange");
-	let O = l(), Ge = (x ?? O?.required ?? !1) && !C, k = ne({
-		id: ke,
-		"aria-label": Ae,
-		"aria-labelledby": je,
-		"aria-describedby": Me,
-		"aria-invalid": Ne,
-		"aria-required": Pe ?? x
-	}), Ke = ae(!1, k["aria-invalid"]), [A, j] = i(f, _ ?? g, (e) => {
+var g = (l) => {
+	let { options: u, value: d, defaultValue: g, onValueChange: we, onChange: _, open: Te, defaultOpen: Ee, onOpenChange: De, placeholder: Oe = "Select...", disabled: v = !1, size: ke, appearance: Ae, name: je, form: y, required: b, autoComplete: x = "off", autoCapitalize: S, autoCorrect: Me, maxLength: Ne, readOnly: C, labels: w, inputMode: Pe, spellCheck: Fe, enterKeyHint: Ie, autoFocus: Le, tabIndex: Re, id: ze, "aria-label": Be, "aria-labelledby": Ve, "aria-describedby": He, "aria-invalid": Ue, "aria-required": We, "aria-errormessage": Ge, "aria-details": Ke, onFocus: qe, onBlur: T, onKeyDown: Je, onKeyUp: Ye, controlRef: Xe, className: Ze, ref: Qe, ...$e } = l;
+	_ !== void 0 && t("TagPicker", "onChange", "onValueChange");
+	let E = re(), et = (b ?? E?.required ?? !1) && !C, D = ie({
+		id: ze,
+		"aria-label": Be,
+		"aria-labelledby": Ve,
+		"aria-describedby": He,
+		"aria-invalid": Ue,
+		"aria-required": We ?? b
+	}), tt = le(!1, D["aria-invalid"]), { size: O, appearance: k } = ce(ke, Ae, {
+		sizes: be,
+		defaultSize: "medium"
+	}), A = xe[O], [j, M] = a(d, g ?? h, (e) => {
 		let t = [...e];
-		ve?.(t), v?.(t);
-	}), M = !y && !C, [N, P] = i(ye, (be ?? !1) && M, xe), qe = te(), F = N && M && qe, [I, L] = p.useState(""), [Je, Ye] = p.useState(M);
-	Je !== M && (Ye(M), M || L(""));
-	let R = !M && N;
-	p.useEffect(() => {
-		R && P(!1);
-	}, [R, P]);
-	let z = re(), B = p.useRef(null), V = p.useRef(null), H = a("tagpicker-summary"), U = p.useMemo(() => {
+		we?.(t), _?.(t);
+	}), N = !v && !C, [P, F] = a(Te, (Ee ?? !1) && N, De), nt = te(), I = P && N && nt, [L, R] = f.useState(""), [rt, it] = f.useState(N);
+	rt !== N && (it(N), N || R(""));
+	let z = !N && P;
+	f.useEffect(() => {
+		z && F(!1);
+	}, [z, F]);
+	let B = ae(), V = f.useRef(null), H = f.useRef(null), U = o("tagpicker-summary"), W = f.useMemo(() => {
 		let e = /* @__PURE__ */ new Map();
-		for (let t of d) e.has(t.value) || e.set(t.value, t.label);
+		for (let t of u) e.has(t.value) || e.set(t.value, t.label);
 		return e;
-	}, [d]), W = (e) => U.get(e) ?? e, Xe = p.useMemo(() => {
-		let e = new Set(A);
-		return d.filter((t) => !e.has(t.value)).map((e) => ({
+	}, [u]), G = (e) => W.get(e) ?? e, at = f.useMemo(() => {
+		let e = new Set(j);
+		return u.filter((t) => !e.has(t.value)).map((e) => ({
 			value: e.value,
 			label: e.label
 		}));
-	}, [d, A]), Ze = p.useMemo(() => I ? (e) => e.label.toLowerCase().includes(I.toLowerCase()) : void 0, [I]), G = A.filter((e) => !U.has(e)).join("\0");
-	p.useEffect(() => {
-		G && n("TagPicker:unknown-value", `TagPicker: the selected value(s) ${G.split("\0").map((e) => `"${e}"`).join(", ")} match no option; the raw value is shown as the tag label.`);
-	}, [G]);
-	let Qe = () => V.current, K = () => V.current?.focus(), $e = (e) => {
-		if (!M || A.includes(e)) return;
-		let t = [...A, e];
-		j(t), L(""), z((w?.added ?? me)(W(e), t.length));
-	}, q = (e) => {
-		if (!M) return;
-		let t = A.filter((t) => t !== e);
-		j(t), z((w?.removed ?? he)(W(e), t.length)), K();
-	}, J = ce({
-		open: F,
-		onOpenChange: (e) => P(e),
+	}, [u, j]), ot = f.useMemo(() => L ? (e) => e.label.toLowerCase().includes(L.toLowerCase()) : void 0, [L]), K = j.filter((e) => !W.has(e)).join("\0");
+	f.useEffect(() => {
+		K && n("TagPicker:unknown-value", `TagPicker: the selected value(s) ${K.split("\0").map((e) => `"${e}"`).join(", ")} match no option; the raw value is shown as the tag label.`);
+	}, [K]);
+	let st = () => H.current, q = () => H.current?.focus(), ct = (e) => {
+		if (!N || j.includes(e)) return;
+		let t = [...j, e];
+		M(t), R(""), B((w?.added ?? ve)(G(e), t.length));
+	}, J = (e) => {
+		if (!N) return;
+		let t = j.filter((t) => t !== e);
+		M(t), B((w?.removed ?? ye)(G(e), t.length)), q();
+	}, Y = fe({
+		open: I,
+		onOpenChange: (e) => F(e),
 		mode: "editable",
 		multiple: !0,
-		selectedValues: A,
-		onSelect: (e) => $e(e),
-		items: Xe,
-		filter: Ze,
-		autoHighlight: I ? "first" : !1,
+		selectedValues: j,
+		onSelect: (e) => ct(e),
+		items: at,
+		filter: ot,
+		autoHighlight: L ? "first" : !1,
 		idPrefix: "tagpicker-listbox",
-		onClearDraft: I ? () => L("") : void 0
-	}), Y = F && J.items.length > 0, X = w?.noMatches ?? "No matches", Z = F && (Y || I !== ""), Q = Z && !Y, { layerId: et, setReference: tt, surfaceRef: nt, floatingProps: rt } = de({
-		open: F,
-		surfaceOpen: Z,
-		onDismiss: () => P(!1),
-		rootRef: B,
-		anchorRef: V
-	}), it = s(B, Ue), at = s(V, Ve);
-	oe(V, () => {
-		let e = _ ?? g;
-		j((t) => ge(t, e) ? t : [...e]), L("");
-	}, b);
-	let $ = (e) => Array.from(e.closest("[data-wave-tagpicker-control]")?.querySelectorAll("[data-wave-tagpicker-remove]") ?? []), ot = (e) => {
-		if (M) {
-			if (e.key === "Escape" && F && !Z && !e.nativeEvent.isComposing) {
-				P(!1);
+		onClearDraft: L ? () => R("") : void 0
+	}), X = I && Y.items.length > 0, Z = w?.noMatches ?? "No matches", Q = I && (X || L !== ""), lt = Q && !X, { layerId: ut, setReference: dt, surfaceRef: ft, floatingProps: pt } = he({
+		open: I,
+		surfaceOpen: Q,
+		onDismiss: () => F(!1),
+		rootRef: V,
+		anchorRef: H
+	}), mt = c(V, Qe), ht = c(H, Xe);
+	ue(H, () => {
+		let e = g ?? h;
+		M((t) => Se(t, e) ? t : [...e]), R("");
+	}, y);
+	let $ = (e) => Array.from(e.closest("[data-wave-tagpicker-control]")?.querySelectorAll("[data-wave-tagpicker-remove]") ?? []), gt = (e) => {
+		if (N) {
+			if (e.key === "Escape" && I && !Q && !e.nativeEvent.isComposing) {
+				F(!1);
 				return;
 			}
-			if (e.key === "Backspace" && I === "" && A.length > 0) {
+			if (e.key === "Backspace" && L === "" && j.length > 0) {
 				e.preventDefault(), $(e.currentTarget).at(-1)?.focus();
 				return;
 			}
-			J.onKeyDown(e);
+			Y.onKeyDown(e);
 		}
-	}, st = (e, t) => {
-		if (!M) return;
+	}, _t = (e, t) => {
+		if (!N) return;
 		let n = $(e.currentTarget), r = n.indexOf(e.currentTarget);
 		if (e.key === "Backspace" || e.key === "Delete") {
-			e.preventDefault(), q(t);
+			e.preventDefault(), J(t);
 			return;
 		}
 		if (e.key === "Escape") {
-			e.preventDefault(), K();
+			e.preventDefault(), q();
 			return;
 		}
-		let i = o(e.key, {
+		let i = s(e.key, {
 			orientation: "horizontal",
 			dir: ee(e.currentTarget)
 		});
-		i === "prev" && r > 0 ? (e.preventDefault(), n[r - 1].focus()) : i === "next" && (e.preventDefault(), r < n.length - 1 ? n[r + 1].focus() : K());
-	}, ct = k["aria-label"] === void 0 ? k["aria-labelledby"] ?? O?.labelId : k["aria-labelledby"];
-	return /* @__PURE__ */ h("div", {
-		...We,
-		ref: it,
-		className: e("relative", He),
+		i === "prev" && r > 0 ? (e.preventDefault(), n[r - 1].focus()) : i === "next" && (e.preventDefault(), r < n.length - 1 ? n[r + 1].focus() : q());
+	}, vt = D["aria-label"] === void 0 ? D["aria-labelledby"] ?? E?.labelId : D["aria-labelledby"];
+	return /* @__PURE__ */ m("div", {
+		"data-size": O,
+		"data-appearance": k,
+		...$e,
+		ref: mt,
+		className: e(i.root, "relative", Ze),
 		children: [
-			/* @__PURE__ */ h("div", {
-				ref: tt,
+			/* @__PURE__ */ m("div", {
+				ref: dt,
 				"data-wave-tagpicker-control": "",
 				role: "group",
-				"aria-disabled": y || void 0,
-				className: e("flex flex-wrap items-center gap-1 rounded border border-input border-b-stroke-accessible bg-background px-2 py-1.5", ie, Ke && "border-destructive focus-within:border-b-destructive", y && "cursor-not-allowed opacity-50"),
+				"aria-disabled": v || void 0,
+				className: e(i.control, "flex flex-wrap items-center", A.control, oe[k], se, tt && "border-destructive", v && "cursor-not-allowed opacity-50"),
 				onClick: (e) => {
-					y || e.target.closest("button") || (K(), !F && M && P(!0));
+					v || e.target.closest("button") || (q(), !I && N && F(!0));
 				},
 				children: [
-					A.length > 0 && /* @__PURE__ */ m("div", {
+					j.length > 0 && /* @__PURE__ */ p("div", {
 						role: "list",
 						"aria-label": w?.selected ?? "Selected",
-						className: "flex flex-wrap items-center gap-1",
-						children: A.map((e) => {
-							let t = W(e);
-							return /* @__PURE__ */ h("div", {
+						className: e(i.group, "flex flex-wrap items-center gap-1"),
+						children: j.map((t) => {
+							let n = G(t);
+							return /* @__PURE__ */ m("div", {
 								role: "listitem",
-								className: "inline-flex items-center gap-1 rounded bg-muted px-2 py-0.5 text-body-1 text-foreground",
-								children: [t, !C && /* @__PURE__ */ m(_e, {
-									label: (w?.remove ?? fe)(t),
-									disabled: y,
-									onClick: () => q(e),
-									onKeyDown: (t) => st(t, e),
-									getFallback: Qe
+								className: e(i.tag, "inline-flex items-center gap-1 rounded bg-muted text-foreground", A.tag),
+								children: [n, !C && /* @__PURE__ */ p(Ce, {
+									label: (w?.remove ?? ge)(n),
+									disabled: v,
+									onClick: () => J(t),
+									onKeyDown: (e) => _t(e, t),
+									getFallback: st
 								})]
-							}, e);
+							}, t);
 						})
 					}),
-					A.length > 0 && /* @__PURE__ */ m("span", {
-						id: H,
+					j.length > 0 && /* @__PURE__ */ p("span", {
+						id: U,
 						hidden: !0,
-						children: (w?.summary ?? pe)(A.map(W))
+						children: (w?.summary ?? _e)(j.map(G))
 					}),
-					/* @__PURE__ */ m("input", {
+					/* @__PURE__ */ p("input", {
 						type: "text",
-						autoComplete: we,
-						...k,
-						...J.getComboboxProps(),
-						"aria-expanded": Y,
-						"aria-describedby": c(k["aria-describedby"], A.length > 0 ? H : void 0),
-						"aria-errormessage": Fe,
-						"aria-details": Ie,
-						ref: at,
-						disabled: y,
+						autoComplete: x,
+						...D,
+						...Y.getComboboxProps(),
+						"aria-expanded": X,
+						"aria-describedby": ne(D["aria-describedby"], j.length > 0 ? U : void 0),
+						"aria-errormessage": Ge,
+						"aria-details": Ke,
+						ref: ht,
+						disabled: v,
 						readOnly: C,
-						placeholder: A.length === 0 ? Se : "",
-						autoCapitalize: Te,
-						autoCorrect: Ee,
-						maxLength: S,
-						inputMode: T,
-						spellCheck: E,
-						enterKeyHint: D,
-						autoFocus: De,
-						tabIndex: Oe,
-						value: I,
+						placeholder: j.length === 0 ? Oe : "",
+						autoCapitalize: S,
+						autoCorrect: Me,
+						maxLength: Ne,
+						inputMode: Pe,
+						spellCheck: Fe,
+						enterKeyHint: Ie,
+						autoFocus: Le,
+						tabIndex: Re,
+						value: L,
 						onChange: (e) => {
-							M && (L(e.target.value), F || P(!0));
+							N && (R(e.target.value), I || F(!0));
 						},
-						onKeyDown: r(ze, ot),
-						onKeyUp: r(Be, J.onKeyUp),
-						onFocus: Le,
-						onBlur: Re,
-						className: "min-w-15 flex-1 bg-transparent py-0.5 text-body-1 text-foreground placeholder:text-muted-foreground focus:outline-hidden"
+						onKeyDown: r(Je, gt),
+						onKeyUp: r(Ye, Y.onKeyUp),
+						onFocus: qe,
+						onBlur: T,
+						className: e(i.input, "min-w-15 flex-1 bg-transparent text-foreground placeholder:text-muted-foreground focus:outline-hidden", A.input)
 					})
 				]
 			}),
-			/* @__PURE__ */ m("span", {
+			/* @__PURE__ */ p("span", {
 				role: "status",
 				className: "sr-only",
-				children: Q && X
+				children: lt && Z
 			}),
-			/* @__PURE__ */ m(le, {
-				listbox: J,
-				layerId: et,
-				surfaceRef: nt,
-				floatingProps: rt,
-				open: F,
-				expanded: Y,
+			/* @__PURE__ */ p(pe, {
+				listbox: Y,
+				layerId: ut,
+				surfaceRef: ft,
+				floatingProps: pt,
+				open: I,
+				expanded: X,
 				showCheck: !1,
-				emptyContent: I === "" ? void 0 : /* @__PURE__ */ m("div", {
+				listboxClassName: i.listbox,
+				surfaceClassName: i.surface,
+				emptyContent: L === "" ? void 0 : /* @__PURE__ */ p("div", {
 					"aria-hidden": "true",
-					className: "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: Z
 				}),
-				"aria-label": k["aria-label"],
-				"aria-labelledby": ct,
-				children: Y && J.items.map((e) => /* @__PURE__ */ m(ue, {
+				"aria-label": D["aria-label"],
+				"aria-labelledby": vt,
+				children: X && Y.items.map((e) => /* @__PURE__ */ p(me, {
 					value: e.value,
 					label: e.label,
+					className: i.option,
 					children: e.label
 				}, e.value))
 			}),
-			/* @__PURE__ */ m(se, {
-				name: Ce,
-				form: b,
-				disabled: y,
-				value: A,
+			/* @__PURE__ */ p(de, {
+				name: je,
+				form: y,
+				disabled: v,
+				value: j,
 				type: "text",
-				required: Ge,
-				onInvalid: K
+				required: et,
+				onInvalid: q
 			})
 		]
 	});
 };
-_.displayName = "TagPicker";
+g.displayName = "TagPicker";
 //#endregion
-export { _ as TagPicker };
+export { g as TagPicker };
 
 //# sourceMappingURL=TagPicker.mjs.map