@nocoo/basalt 2.0.3 → 2.1.0

package/dist/components/typeahead-field.js

@@ -3,165 +3,226 @@ import { cn as e } from "../utils/cn.js";
 import { overlayItemClass as t, overlayPanelClass as n } from "./overlay.js";
 import { Input as r } from "./input.js";
 import { useEffect as i, useId as a, useRef as o, useState as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { jsx as c, jsxs as ee } from "react/jsx-runtime";
+import * as l from "@radix-ui/react-popover";
 //#region src/components/typeahead-field.tsx
-function u({ items: u, value: p, defaultValue: m = "", onValueChange: h, name: g, placeholder: _ = "Select…", disabled: v = !1, loading: y = !1, size: b = "default", className: x, id: S, allowFreeform: C, "aria-label": w, "aria-describedby": T, "aria-invalid": E, onBlur: D, ...O }) {
-	let [k, A] = s(m), j = p ?? k, [M, N] = s(d(u, j)), [P, F] = s(p), [I, L] = s(!1), [R, z] = s(null), B = a(), V = o(null), H = o(!1);
-	p !== P && (F(p), p === void 0 ? P !== void 0 && (A(P), N(d(u, P))) : N(d(u, p)));
-	let U = d(u, j), [W, G] = s(U);
-	U !== W && (G(U), (!I || M === W) && N(U)), i(() => {
-		let e = V.current?.form;
+function u({ items: u, value: p, defaultValue: m = "", onValueChange: h, name: g, placeholder: _ = "Select…", disabled: v = !1, loading: y = !1, size: b = "default", className: x, id: S, allowFreeform: C, "aria-label": w, "aria-describedby": T, "aria-invalid": te, onBlur: ne, ...E }) {
+	let [D, O] = s(m), k = p ?? D, [A, j] = s(d(u, k)), [M, N] = s(p), [P, F] = s(!1), [I, L] = s(null), R = a(), z = o(null), B = o(!1), V = o(null);
+	p !== M && (N(p), p === void 0 ? M !== void 0 && (O(M), j(d(u, M))) : j(d(u, p)));
+	let H = d(u, k), [U, W] = s(H);
+	H !== U && (W(H), (!P || A === U) && j(H));
+	let G = o({
+		defaultValue: m,
+		items: u,
+		value: p
+	});
+	i(() => {
+		G.current = {
+			defaultValue: m,
+			items: u,
+			value: p
+		};
+	}), i(() => {
+		let e = z.current?.form;
 		if (!e) return;
-		let t = (e) => {
-			queueMicrotask(() => {
-				e.defaultPrevented || (p === void 0 ? (A(m), N(d(u, m))) : N(d(u, p)), L(!1), z(null));
-			});
+		let t = !1, n = /* @__PURE__ */ new Set(), r = (e) => {
+			let r = setTimeout(() => {
+				if (n.delete(r), t || e.defaultPrevented) return;
+				let i = G.current;
+				i.value === void 0 ? (O(i.defaultValue), j(d(i.items, i.defaultValue))) : j(d(i.items, i.value)), F(!1), L(null);
+			}, 0);
+			n.add(r);
 		};
-		return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
-	}, [
-		m,
-		u,
-		p
-	]);
-	let K = f(u, M, !C), q = R === null || K.length === 0 ? null : Math.min(R, K.length - 1), J = q === null ? void 0 : K[q], Y = I && K.length > 0, X = v || y;
+		return e.addEventListener("reset", r), () => {
+			t = !0;
+			for (let e of n) clearTimeout(e);
+			n.clear(), e.removeEventListener("reset", r);
+		};
+	}, []);
+	let K = f(u, A, !C), q = I === null || K.length === 0 ? null : Math.min(I, K.length - 1), J = q === null ? void 0 : K[q], Y = P && K.length > 0, X = v || y;
 	i(() => {
-		if (!I) return;
-		let e = f(u, M, !C).length;
-		z((t) => t === null || e === 0 ? null : Math.min(t, e - 1));
+		if (!Y || q === null) return;
+		let e = document.getElementById(`${R}-opt-${q}`);
+		typeof e?.scrollIntoView == "function" && e.scrollIntoView({ block: "nearest" });
+	}, [
+		q,
+		R,
+		Y
+	]), i(() => {
+		if (!P) return;
+		let e = f(u, A, !C).length;
+		L((t) => t === null || e === 0 ? null : Math.min(t, e - 1));
 	}, [
 		C,
 		u,
-		I,
-		M
+		P,
+		A
 	]);
-	function Z(e, t) {
-		p === void 0 ? (A(e), N(t)) : N(d(u, p)), L(!1), z(null), h?.(e), V.current && document.activeElement !== V.current && (H.current = !0, V.current.focus());
+	function Z(e, t, n = !0) {
+		p === void 0 ? (O(e), j(t)) : j(d(u, p)), F(!1), L(null), h?.(e), n && z.current && document.activeElement !== z.current && (B.current = !0, z.current.focus());
 	}
-	function Q(e) {
-		e.disabled || Z(e.value, e.label);
+	function Q(e, t = !0) {
+		e.disabled || Z(e.value, e.label, t);
 	}
-	function $(e) {
-		let t = e.trim(), n = u.find((e) => !e.disabled && (e.label.toLowerCase() === t.toLowerCase() || e.value === t));
-		if (n) {
-			Q(n);
+	function $(e, t = !0) {
+		let n = e.trim(), r = u.find((e) => !e.disabled && (e.label.toLowerCase() === n.toLowerCase() || e.value === n));
+		if (r) {
+			Q(r, t);
 			return;
 		}
-		Z(t, t);
+		Z(n, n, t);
 	}
 	return i(() => {
-		if (!I) return;
+		if (!P) return;
 		let e = (e) => {
-			e.key !== "Escape" || e.isComposing || (e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation(), L(!1), N(d(u, j)), z(null));
+			e.key !== "Escape" || e.isComposing || (e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation(), F(!1), j(d(u, k)), L(null));
 		};
 		return window.addEventListener("keydown", e, !0), document.addEventListener("keydown", e, !0), () => {
 			window.removeEventListener("keydown", e, !0), document.removeEventListener("keydown", e, !0);
 		};
 	}, [
 		u,
-		I,
-		j
-	]), /* @__PURE__ */ l("div", {
-		...O,
-		className: e("relative w-full", x),
-		onBlur: (e) => {
-			if (D?.(e), !e.currentTarget.contains(e.relatedTarget)) {
-				if (C) {
-					if (M.trim() !== d(u, j)) {
-						$(M);
-						return;
-					}
-				} else N(d(u, j));
-				L(!1), z(null);
-			}
+		P,
+		k
+	]), /* @__PURE__ */ c(l.Root, {
+		open: Y,
+		onOpenChange: (e) => {
+			e || (F(!1), L(null), C || j(d(u, k)));
 		},
-		children: [
-			g ? /* @__PURE__ */ c("input", {
-				type: "hidden",
-				name: g,
-				value: j,
-				disabled: X
-			}) : null,
-			/* @__PURE__ */ c(r, {
-				ref: V,
-				id: S,
-				value: M,
-				disabled: X,
-				size: b,
-				"aria-busy": y || void 0,
-				"aria-invalid": E,
-				"aria-describedby": T,
-				onChange: (e) => {
-					N(e.target.value), L(!0), z(null);
-				},
-				onFocus: () => {
-					if (!X) {
-						if (H.current) {
-							H.current = !1;
+		children: /* @__PURE__ */ ee("div", {
+			...E,
+			className: e("relative w-full", x),
+			onBlur: (e) => {
+				ne?.(e);
+				let t = e.relatedTarget, n = document.getElementById(R);
+				if (!e.currentTarget.contains(t) && !n?.contains(t)) {
+					if (C) {
+						if (A.trim() !== d(u, k)) {
+							$(A, !1);
 							return;
 						}
-						z(null), L(!0);
-					}
-				},
-				onClick: () => {
-					X || (I || z(null), L(!0));
-				},
-				onKeyDown: (e) => {
-					if (!(e.nativeEvent.isComposing || e.key === "Process")) {
-						if (e.key === "ArrowDown") {
-							if (e.preventDefault(), L(!0), K.length === 0) {
-								z(null);
-								return;
+					} else j(d(u, k));
+					F(!1), L(null);
+				}
+			},
+			children: [
+				g ? /* @__PURE__ */ c("input", {
+					type: "hidden",
+					name: g,
+					value: k,
+					disabled: X
+				}) : null,
+				/* @__PURE__ */ c(l.Anchor, {
+					asChild: !0,
+					children: /* @__PURE__ */ c(r, {
+						ref: z,
+						id: S,
+						value: A,
+						disabled: X,
+						size: b,
+						"aria-busy": y || void 0,
+						"aria-invalid": te,
+						"aria-describedby": T,
+						onChange: (e) => {
+							j(e.target.value), F(!0), L(null);
+						},
+						onFocus: () => {
+							if (!X) {
+								if (B.current) {
+									B.current = !1;
+									return;
+								}
+								L(null), F(!0);
 							}
-							z((e) => e === null ? 0 : (e + 1) % K.length);
-							return;
-						}
-						if (e.key === "ArrowUp") {
-							if (e.preventDefault(), L(!0), K.length === 0) {
-								z(null);
-								return;
-							}
-							z((e) => e === null ? K.length - 1 : (e - 1 + K.length) % K.length);
-							return;
-						}
-						if (e.key === "Enter") {
-							if (I && J) {
-								e.preventDefault(), Q(J);
-								return;
+						},
+						onClick: () => {
+							X || (P || L(null), F(!0));
+						},
+						onKeyDown: (e) => {
+							if (!(e.nativeEvent.isComposing || e.key === "Process")) {
+								if (e.key === "ArrowDown") {
+									if (e.preventDefault(), F(!0), K.length === 0) {
+										L(null);
+										return;
+									}
+									L((e) => e === null ? 0 : (e + 1) % K.length);
+									return;
+								}
+								if (e.key === "ArrowUp") {
+									if (e.preventDefault(), F(!0), K.length === 0) {
+										L(null);
+										return;
+									}
+									L((e) => e === null ? K.length - 1 : (e - 1 + K.length) % K.length);
+									return;
+								}
+								if (e.key === "Enter") {
+									if (P && J) {
+										e.preventDefault(), Q(J);
+										return;
+									}
+									C && A.trim() !== d(u, k) && (e.preventDefault(), $(A));
+								}
 							}
-							C && M.trim() !== d(u, j) && (e.preventDefault(), $(M));
-						}
-					}
-				},
-				placeholder: _,
-				role: "combobox",
-				"aria-label": w ?? (S ? void 0 : _),
-				"aria-expanded": Y,
-				"aria-autocomplete": "list",
-				"aria-controls": Y ? B : void 0,
-				"aria-activedescendant": Y && J && q !== null ? `${B}-opt-${q}` : void 0
-			}),
-			Y ? /* @__PURE__ */ c("div", {
-				id: B,
-				role: "listbox",
-				className: n("absolute top-full z-20 mt-1 w-full"),
-				children: K.map((n, r) => /* @__PURE__ */ c("button", {
-					type: "button",
-					id: `${B}-opt-${r}`,
-					role: "option",
-					tabIndex: -1,
-					disabled: n.disabled,
-					"aria-disabled": n.disabled || void 0,
-					"aria-selected": r === q,
-					className: e(t("hover:bg-basalt-accent"), r === q && "bg-basalt-accent", n.disabled && "opacity-50"),
-					onMouseEnter: () => {
-						n.disabled || z(r);
+						},
+						placeholder: _,
+						role: "combobox",
+						"aria-label": w ?? (S ? void 0 : _),
+						"aria-expanded": Y,
+						"aria-autocomplete": "list",
+						"aria-controls": Y ? R : void 0,
+						"aria-activedescendant": Y && J && q !== null ? `${R}-opt-${q}` : void 0
+					})
+				}),
+				Y ? /* @__PURE__ */ c(l.Portal, { children: /* @__PURE__ */ c(l.Content, {
+					side: "bottom",
+					sideOffset: 4,
+					align: "start",
+					avoidCollisions: !0,
+					collisionPadding: 8,
+					onPointerMove: (e) => {
+						V.current && V.current.x === e.clientX && V.current.y === e.clientY || (V.current = {
+							x: e.clientX,
+							y: e.clientY
+						});
+					},
+					onEscapeKeyDown: (e) => {
+						let t = e;
+						(t.isComposing || t.nativeEvent?.isComposing) && e.preventDefault();
+					},
+					onOpenAutoFocus: (e) => e.preventDefault(),
+					onCloseAutoFocus: (e) => e.preventDefault(),
+					onInteractOutside: (e) => {
+						let t = e.target;
+						z.current?.contains(t) && e.preventDefault();
 					},
-					onMouseDown: (e) => e.preventDefault(),
-					onClick: () => Q(n),
-					children: n.label
-				}, `${B}-opt-${r}`))
-			}) : null
-		]
+					id: R,
+					role: "listbox",
+					className: n("w-[var(--radix-popover-trigger-width)] max-h-[var(--radix-popover-content-available-height)] overflow-y-auto"),
+					children: K.map((n, r) => /* @__PURE__ */ c("button", {
+						type: "button",
+						id: `${R}-opt-${r}`,
+						role: "option",
+						tabIndex: -1,
+						disabled: n.disabled,
+						"aria-disabled": n.disabled || void 0,
+						"aria-selected": r === q,
+						className: e(t("hover:bg-basalt-accent"), r === q && "bg-basalt-accent", n.disabled && "opacity-50"),
+						onPointerMove: (e) => {
+							if (n.disabled) return;
+							let { clientX: t, clientY: i } = e;
+							V.current && V.current.x === t && V.current.y === i || (V.current = {
+								x: t,
+								y: i
+							}, L(r));
+						},
+						onMouseDown: (e) => e.preventDefault(),
+						onClick: () => Q(n),
+						children: n.label
+					}, `${R}-opt-${r}`))
+				}) }) : null
+			]
+		})
 	});
 }
 function d(e, t) {

package/dist/components/typeahead-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"typeahead-field.js","names":[],"sources":["../../src/components/typeahead-field.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, useEffect, useId, useRef, useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { Input, type InputSize } from \"./input\";\nimport { overlayItemClass, overlayPanelClass } from \"./overlay\";\n\nexport type TypeaheadItem = {\n\tvalue: string;\n\tlabel: string;\n\tdisabled?: boolean;\n};\n\nexport function TypeaheadField({\n\titems,\n\tvalue,\n\tdefaultValue = \"\",\n\tonValueChange,\n\tname,\n\tplaceholder = \"Select…\",\n\tdisabled = false,\n\tloading = false,\n\tsize = \"default\",\n\tclassName,\n\tid,\n\tallowFreeform,\n\t\"aria-label\": ariaLabel,\n\t\"aria-describedby\": ariaDescribedBy,\n\t\"aria-invalid\": ariaInvalid,\n\tonBlur,\n\t...rest\n}: {\n\titems: TypeaheadItem[];\n\tvalue?: string;\n\tdefaultValue?: string;\n\tonValueChange?: (value: string) => void;\n\tname?: string;\n\tplaceholder?: string;\n\tdisabled?: boolean;\n\tloading?: boolean;\n\tsize?: InputSize;\n\tclassName?: string;\n\tid?: string;\n\tallowFreeform: boolean;\n\t\"aria-label\"?: string;\n\t\"aria-describedby\"?: string;\n\t\"aria-invalid\"?: boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\";\n} & Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"defaultValue\" | \"onChange\">) {\n\tconst [uncontrolled, setUncontrolled] = useState(defaultValue);\n\tconst selected = value ?? uncontrolled;\n\tconst [query, setQuery] = useState(displayOf(items, selected));\n\tconst [prevValue, setPrevValue] = useState(value);\n\tconst [open, setOpen] = useState(false);\n\tconst [active, setActive] = useState<number | null>(null);\n\tconst listId = useId();\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\tconst skipFocusOpen = useRef(false);\n\tif (value !== prevValue) {\n\t\tsetPrevValue(value);\n\t\tif (value !== undefined) {\n\t\t\tsetQuery(displayOf(items, value));\n\t\t} else if (prevValue !== undefined) {\n\t\t\tsetUncontrolled(prevValue);\n\t\t\tsetQuery(displayOf(items, prevValue));\n\t\t}\n\t}\n\tconst selectedDisplay = displayOf(items, selected);\n\tconst [prevDisplay, setPrevDisplay] = useState(selectedDisplay);\n\tif (selectedDisplay !== prevDisplay) {\n\t\tsetPrevDisplay(selectedDisplay);\n\t\tif (!open || query === prevDisplay) {\n\t\t\tsetQuery(selectedDisplay);\n\t\t}\n\t}\n\tuseEffect(() => {\n\t\tconst node = inputRef.current;\n\t\tconst form = node?.form;\n\t\tif (!form) {\n\t\t\treturn;\n\t\t}\n\t\tconst onReset = (event: Event) => {\n\t\t\tqueueMicrotask(() => {\n\t\t\t\tif (event.defaultPrevented) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (value === undefined) {\n\t\t\t\t\tsetUncontrolled(defaultValue);\n\t\t\t\t\tsetQuery(displayOf(items, defaultValue));\n\t\t\t\t} else {\n\t\t\t\t\tsetQuery(displayOf(items, value));\n\t\t\t\t}\n\t\t\t\tsetOpen(false);\n\t\t\t\tsetActive(null);\n\t\t\t});\n\t\t};\n\t\tform.addEventListener(\"reset\", onReset);\n\t\treturn () => form.removeEventListener(\"reset\", onReset);\n\t}, [defaultValue, items, value]);\n\tconst filtered = filterItems(items, query, !allowFreeform);\n\tconst activeIndex =\n\t\tactive === null || filtered.length === 0 ? null : Math.min(active, filtered.length - 1);\n\tconst activeItem = activeIndex === null ? undefined : filtered[activeIndex];\n\tconst listOpen = open && filtered.length > 0;\n\tconst busy = disabled || loading;\n\n\tuseEffect(() => {\n\t\tif (!open) {\n\t\t\treturn;\n\t\t}\n\t\tconst nextLen = filterItems(items, query, !allowFreeform).length;\n\t\tsetActive((current) => {\n\t\t\tif (current === null || nextLen === 0) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\treturn Math.min(current, nextLen - 1);\n\t\t});\n\t}, [allowFreeform, items, open, query]);\n\n\tfunction commitValue(next: string, display: string) {\n\t\tif (value === undefined) {\n\t\t\tsetUncontrolled(next);\n\t\t\tsetQuery(display);\n\t\t} else {\n\t\t\tsetQuery(displayOf(items, value));\n\t\t}\n\t\tsetOpen(false);\n\t\tsetActive(null);\n\t\tonValueChange?.(next);\n\t\tif (inputRef.current && document.activeElement !== inputRef.current) {\n\t\t\tskipFocusOpen.current = true;\n\t\t\tinputRef.current.focus();\n\t\t}\n\t}\n\n\tfunction commitItem(item: TypeaheadItem) {\n\t\tif (item.disabled) {\n\t\t\treturn;\n\t\t}\n\t\tcommitValue(item.value, item.label);\n\t}\n\n\tfunction commitFreeform(text: string) {\n\t\tconst trimmed = text.trim();\n\t\tconst match = items.find(\n\t\t\t(item) =>\n\t\t\t\t!item.disabled &&\n\t\t\t\t(item.label.toLowerCase() === trimmed.toLowerCase() || item.value === trimmed),\n\t\t);\n\t\tif (match) {\n\t\t\tcommitItem(match);\n\t\t\treturn;\n\t\t}\n\t\tcommitValue(trimmed, trimmed);\n\t}\n\n\tuseEffect(() => {\n\t\tif (!open) {\n\t\t\treturn;\n\t\t}\n\t\tconst onKey = (event: KeyboardEvent) => {\n\t\t\tif (event.key !== \"Escape\" || event.isComposing) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tevent.preventDefault();\n\t\t\tevent.stopPropagation();\n\t\t\tevent.stopImmediatePropagation();\n\t\t\tsetOpen(false);\n\t\t\tsetQuery(displayOf(items, selected));\n\t\t\tsetActive(null);\n\t\t};\n\t\twindow.addEventListener(\"keydown\", onKey, true);\n\t\tdocument.addEventListener(\"keydown\", onKey, true);\n\t\treturn () => {\n\t\t\twindow.removeEventListener(\"keydown\", onKey, true);\n\t\t\tdocument.removeEventListener(\"keydown\", onKey, true);\n\t\t};\n\t}, [items, open, selected]);\n\n\treturn (\n\t\t<div\n\t\t\t{...rest}\n\t\t\tclassName={cn(\"relative w-full\", className)}\n\t\t\tonBlur={(event) => {\n\t\t\t\tonBlur?.(event);\n\t\t\t\tif (!event.currentTarget.contains(event.relatedTarget as Node | null)) {\n\t\t\t\t\tif (allowFreeform) {\n\t\t\t\t\t\tif (query.trim() !== displayOf(items, selected)) {\n\t\t\t\t\t\t\tcommitFreeform(query);\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetQuery(displayOf(items, selected));\n\t\t\t\t\t}\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t\tsetActive(null);\n\t\t\t\t}\n\t\t\t}}\n\t\t>\n\t\t\t{name ? <input type=\"hidden\" name={name} value={selected} disabled={busy} /> : null}\n\t\t\t<Input\n\t\t\t\tref={inputRef}\n\t\t\t\tid={id}\n\t\t\t\tvalue={query}\n\t\t\t\tdisabled={busy}\n\t\t\t\tsize={size}\n\t\t\t\taria-busy={loading || undefined}\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\taria-describedby={ariaDescribedBy}\n\t\t\t\tonChange={(event) => {\n\t\t\t\t\tsetQuery(event.target.value);\n\t\t\t\t\tsetOpen(true);\n\t\t\t\t\tsetActive(null);\n\t\t\t\t}}\n\t\t\t\tonFocus={() => {\n\t\t\t\t\tif (busy) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tif (skipFocusOpen.current) {\n\t\t\t\t\t\tskipFocusOpen.current = false;\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tsetActive(null);\n\t\t\t\t\tsetOpen(true);\n\t\t\t\t}}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tif (busy) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tif (!open) {\n\t\t\t\t\t\tsetActive(null);\n\t\t\t\t\t}\n\t\t\t\t\tsetOpen(true);\n\t\t\t\t}}\n\t\t\t\tonKeyDown={(event) => {\n\t\t\t\t\tif (event.nativeEvent.isComposing || event.key === \"Process\") {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tif (event.key === \"ArrowDown\") {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tsetOpen(true);\n\t\t\t\t\t\tif (filtered.length === 0) {\n\t\t\t\t\t\t\tsetActive(null);\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsetActive((current) => (current === null ? 0 : (current + 1) % filtered.length));\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tif (event.key === \"ArrowUp\") {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tsetOpen(true);\n\t\t\t\t\t\tif (filtered.length === 0) {\n\t\t\t\t\t\t\tsetActive(null);\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsetActive((current) =>\n\t\t\t\t\t\t\tcurrent === null\n\t\t\t\t\t\t\t\t? filtered.length - 1\n\t\t\t\t\t\t\t\t: (current - 1 + filtered.length) % filtered.length,\n\t\t\t\t\t\t);\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tif (event.key === \"Enter\") {\n\t\t\t\t\t\tif (open && activeItem) {\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tcommitItem(activeItem);\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (allowFreeform && query.trim() !== displayOf(items, selected)) {\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tcommitFreeform(query);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\trole=\"combobox\"\n\t\t\t\taria-label={ariaLabel ?? (id ? undefined : placeholder)}\n\t\t\t\taria-expanded={listOpen}\n\t\t\t\taria-autocomplete=\"list\"\n\t\t\t\taria-controls={listOpen ? listId : undefined}\n\t\t\t\taria-activedescendant={\n\t\t\t\t\tlistOpen && activeItem && activeIndex !== null\n\t\t\t\t\t\t? `${listId}-opt-${activeIndex}`\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{listOpen ? (\n\t\t\t\t<div\n\t\t\t\t\tid={listId}\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\tclassName={overlayPanelClass(\"absolute top-full z-20 mt-1 w-full\")}\n\t\t\t\t>\n\t\t\t\t\t{filtered.map((item, index) => (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tkey={`${listId}-opt-${index}`}\n\t\t\t\t\t\t\tid={`${listId}-opt-${index}`}\n\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\tdisabled={item.disabled}\n\t\t\t\t\t\t\taria-disabled={item.disabled || undefined}\n\t\t\t\t\t\t\taria-selected={index === activeIndex}\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\toverlayItemClass(\"hover:bg-basalt-accent\"),\n\t\t\t\t\t\t\t\tindex === activeIndex && \"bg-basalt-accent\",\n\t\t\t\t\t\t\t\titem.disabled && \"opacity-50\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\tonMouseEnter={() => {\n\t\t\t\t\t\t\t\tif (!item.disabled) {\n\t\t\t\t\t\t\t\t\tsetActive(index);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonMouseDown={(event) => event.preventDefault()}\n\t\t\t\t\t\t\tonClick={() => commitItem(item)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t</div>\n\t);\n}\n\nfunction displayOf(items: TypeaheadItem[], value: string) {\n\treturn items.find((item) => item.value === value)?.label ?? value;\n}\n\nfunction filterItems(items: TypeaheadItem[], query: string, showAllWhenEmpty: boolean) {\n\tconst needle = query.trim().toLowerCase();\n\tif (needle === \"\") {\n\t\treturn showAllWhenEmpty ? items : [];\n\t}\n\treturn items.filter((item) => item.label.toLowerCase().includes(needle));\n}\n"],"mappings":"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"}
+{"version":3,"file":"typeahead-field.js","names":[],"sources":["../../src/components/typeahead-field.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { type ComponentPropsWithoutRef, useEffect, useId, useRef, useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { Input, type InputSize } from \"./input\";\nimport { OVERLAY_GAP, overlayItemClass, overlayPanelClass } from \"./overlay\";\n\nexport type TypeaheadItem = {\n\tvalue: string;\n\tlabel: string;\n\tdisabled?: boolean;\n};\n\nexport function TypeaheadField({\n\titems,\n\tvalue,\n\tdefaultValue = \"\",\n\tonValueChange,\n\tname,\n\tplaceholder = \"Select…\",\n\tdisabled = false,\n\tloading = false,\n\tsize = \"default\",\n\tclassName,\n\tid,\n\tallowFreeform,\n\t\"aria-label\": ariaLabel,\n\t\"aria-describedby\": ariaDescribedBy,\n\t\"aria-invalid\": ariaInvalid,\n\tonBlur,\n\t...rest\n}: {\n\titems: TypeaheadItem[];\n\tvalue?: string;\n\tdefaultValue?: string;\n\tonValueChange?: (value: string) => void;\n\tname?: string;\n\tplaceholder?: string;\n\tdisabled?: boolean;\n\tloading?: boolean;\n\tsize?: InputSize;\n\tclassName?: string;\n\tid?: string;\n\tallowFreeform: boolean;\n\t\"aria-label\"?: string;\n\t\"aria-describedby\"?: string;\n\t\"aria-invalid\"?: boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\";\n} & Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"defaultValue\" | \"onChange\">) {\n\tconst [uncontrolled, setUncontrolled] = useState(defaultValue);\n\tconst selected = value ?? uncontrolled;\n\tconst [query, setQuery] = useState(displayOf(items, selected));\n\tconst [prevValue, setPrevValue] = useState(value);\n\tconst [open, setOpen] = useState(false);\n\tconst [active, setActive] = useState<number | null>(null);\n\tconst listId = useId();\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\tconst skipFocusOpen = useRef(false);\n\tconst lastPointerPos = useRef<{ x: number; y: number } | null>(null);\n\tif (value !== prevValue) {\n\t\tsetPrevValue(value);\n\t\tif (value !== undefined) {\n\t\t\tsetQuery(displayOf(items, value));\n\t\t} else if (prevValue !== undefined) {\n\t\t\tsetUncontrolled(prevValue);\n\t\t\tsetQuery(displayOf(items, prevValue));\n\t\t}\n\t}\n\tconst selectedDisplay = displayOf(items, selected);\n\tconst [prevDisplay, setPrevDisplay] = useState(selectedDisplay);\n\tif (selectedDisplay !== prevDisplay) {\n\t\tsetPrevDisplay(selectedDisplay);\n\t\tif (!open || query === prevDisplay) {\n\t\t\tsetQuery(selectedDisplay);\n\t\t}\n\t}\n\tconst latestConfigRef = useRef({\n\t\tdefaultValue,\n\t\titems,\n\t\tvalue,\n\t});\n\tuseEffect(() => {\n\t\tlatestConfigRef.current = {\n\t\t\tdefaultValue,\n\t\t\titems,\n\t\t\tvalue,\n\t\t};\n\t});\n\n\tuseEffect(() => {\n\t\tconst node = inputRef.current;\n\t\tconst form = node?.form;\n\t\tif (!form) {\n\t\t\treturn;\n\t\t}\n\t\tlet disposed = false;\n\t\tconst timers = new Set<ReturnType<typeof setTimeout>>();\n\t\tconst onReset = (event: Event) => {\n\t\t\tconst timer = setTimeout(() => {\n\t\t\t\ttimers.delete(timer);\n\t\t\t\tif (disposed || event.defaultPrevented) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst cfg = latestConfigRef.current;\n\t\t\t\tif (cfg.value === undefined) {\n\t\t\t\t\tsetUncontrolled(cfg.defaultValue);\n\t\t\t\t\tsetQuery(displayOf(cfg.items, cfg.defaultValue));\n\t\t\t\t} else {\n\t\t\t\t\tsetQuery(displayOf(cfg.items, cfg.value));\n\t\t\t\t}\n\t\t\t\tsetOpen(false);\n\t\t\t\tsetActive(null);\n\t\t\t}, 0);\n\t\t\ttimers.add(timer);\n\t\t};\n\t\tform.addEventListener(\"reset\", onReset);\n\t\treturn () => {\n\t\t\tdisposed = true;\n\t\t\tfor (const timer of timers) {\n\t\t\t\tclearTimeout(timer);\n\t\t\t}\n\t\t\ttimers.clear();\n\t\t\tform.removeEventListener(\"reset\", onReset);\n\t\t};\n\t}, []);\n\tconst filtered = filterItems(items, query, !allowFreeform);\n\tconst activeIndex =\n\t\tactive === null || filtered.length === 0 ? null : Math.min(active, filtered.length - 1);\n\tconst activeItem = activeIndex === null ? undefined : filtered[activeIndex];\n\tconst listOpen = open && filtered.length > 0;\n\tconst busy = disabled || loading;\n\n\tuseEffect(() => {\n\t\tif (!listOpen || activeIndex === null) {\n\t\t\treturn;\n\t\t}\n\t\tconst optionElement = document.getElementById(`${listId}-opt-${activeIndex}`);\n\t\tif (typeof optionElement?.scrollIntoView === \"function\") {\n\t\t\toptionElement.scrollIntoView({ block: \"nearest\" });\n\t\t}\n\t}, [activeIndex, listId, listOpen]);\n\n\tuseEffect(() => {\n\t\tif (!open) {\n\t\t\treturn;\n\t\t}\n\t\tconst nextLen = filterItems(items, query, !allowFreeform).length;\n\t\tsetActive((current) => {\n\t\t\tif (current === null || nextLen === 0) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\treturn Math.min(current, nextLen - 1);\n\t\t});\n\t}, [allowFreeform, items, open, query]);\n\n\tfunction commitValue(next: string, display: string, restoreFocus = true) {\n\t\tif (value === undefined) {\n\t\t\tsetUncontrolled(next);\n\t\t\tsetQuery(display);\n\t\t} else {\n\t\t\tsetQuery(displayOf(items, value));\n\t\t}\n\t\tsetOpen(false);\n\t\tsetActive(null);\n\t\tonValueChange?.(next);\n\t\tif (restoreFocus && inputRef.current && document.activeElement !== inputRef.current) {\n\t\t\tskipFocusOpen.current = true;\n\t\t\tinputRef.current.focus();\n\t\t}\n\t}\n\n\tfunction commitItem(item: TypeaheadItem, restoreFocus = true) {\n\t\tif (item.disabled) {\n\t\t\treturn;\n\t\t}\n\t\tcommitValue(item.value, item.label, restoreFocus);\n\t}\n\n\tfunction commitFreeform(text: string, restoreFocus = true) {\n\t\tconst trimmed = text.trim();\n\t\tconst match = items.find(\n\t\t\t(item) =>\n\t\t\t\t!item.disabled &&\n\t\t\t\t(item.label.toLowerCase() === trimmed.toLowerCase() || item.value === trimmed),\n\t\t);\n\t\tif (match) {\n\t\t\tcommitItem(match, restoreFocus);\n\t\t\treturn;\n\t\t}\n\t\tcommitValue(trimmed, trimmed, restoreFocus);\n\t}\n\n\tuseEffect(() => {\n\t\tif (!open) {\n\t\t\treturn;\n\t\t}\n\t\tconst onKey = (event: KeyboardEvent) => {\n\t\t\tif (event.key !== \"Escape\" || event.isComposing) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tevent.preventDefault();\n\t\t\tevent.stopPropagation();\n\t\t\tevent.stopImmediatePropagation();\n\t\t\tsetOpen(false);\n\t\t\tsetQuery(displayOf(items, selected));\n\t\t\tsetActive(null);\n\t\t};\n\t\twindow.addEventListener(\"keydown\", onKey, true);\n\t\tdocument.addEventListener(\"keydown\", onKey, true);\n\t\treturn () => {\n\t\t\twindow.removeEventListener(\"keydown\", onKey, true);\n\t\t\tdocument.removeEventListener(\"keydown\", onKey, true);\n\t\t};\n\t}, [items, open, selected]);\n\n\treturn (\n\t\t<PopoverPrimitive.Root\n\t\t\topen={listOpen}\n\t\t\tonOpenChange={(nextOpen) => {\n\t\t\t\tif (!nextOpen) {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t\tsetActive(null);\n\t\t\t\t\tif (!allowFreeform) {\n\t\t\t\t\t\tsetQuery(displayOf(items, selected));\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\t{...rest}\n\t\t\t\tclassName={cn(\"relative w-full\", className)}\n\t\t\t\tonBlur={(event) => {\n\t\t\t\t\tonBlur?.(event);\n\t\t\t\t\tconst related = event.relatedTarget as Node | null;\n\t\t\t\t\tconst listbox = document.getElementById(listId);\n\t\t\t\t\tif (!event.currentTarget.contains(related) && !listbox?.contains(related)) {\n\t\t\t\t\t\tif (allowFreeform) {\n\t\t\t\t\t\t\tif (query.trim() !== displayOf(items, selected)) {\n\t\t\t\t\t\t\t\tcommitFreeform(query, false);\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetQuery(displayOf(items, selected));\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsetOpen(false);\n\t\t\t\t\t\tsetActive(null);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{name ? <input type=\"hidden\" name={name} value={selected} disabled={busy} /> : null}\n\t\t\t\t<PopoverPrimitive.Anchor asChild>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tref={inputRef}\n\t\t\t\t\t\tid={id}\n\t\t\t\t\t\tvalue={query}\n\t\t\t\t\t\tdisabled={busy}\n\t\t\t\t\t\tsize={size}\n\t\t\t\t\t\taria-busy={loading || undefined}\n\t\t\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\t\t\taria-describedby={ariaDescribedBy}\n\t\t\t\t\t\tonChange={(event) => {\n\t\t\t\t\t\t\tsetQuery(event.target.value);\n\t\t\t\t\t\t\tsetOpen(true);\n\t\t\t\t\t\t\tsetActive(null);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonFocus={() => {\n\t\t\t\t\t\t\tif (busy) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif (skipFocusOpen.current) {\n\t\t\t\t\t\t\t\tskipFocusOpen.current = false;\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsetActive(null);\n\t\t\t\t\t\t\tsetOpen(true);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (busy) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif (!open) {\n\t\t\t\t\t\t\t\tsetActive(null);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsetOpen(true);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonKeyDown={(event) => {\n\t\t\t\t\t\t\tif (event.nativeEvent.isComposing || event.key === \"Process\") {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif (event.key === \"ArrowDown\") {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tsetOpen(true);\n\t\t\t\t\t\t\t\tif (filtered.length === 0) {\n\t\t\t\t\t\t\t\t\tsetActive(null);\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tsetActive((current) => (current === null ? 0 : (current + 1) % filtered.length));\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif (event.key === \"ArrowUp\") {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tsetOpen(true);\n\t\t\t\t\t\t\t\tif (filtered.length === 0) {\n\t\t\t\t\t\t\t\t\tsetActive(null);\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tsetActive((current) =>\n\t\t\t\t\t\t\t\t\tcurrent === null\n\t\t\t\t\t\t\t\t\t\t? filtered.length - 1\n\t\t\t\t\t\t\t\t\t\t: (current - 1 + filtered.length) % filtered.length,\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif (event.key === \"Enter\") {\n\t\t\t\t\t\t\t\tif (open && activeItem) {\n\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\tcommitItem(activeItem);\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif (allowFreeform && query.trim() !== displayOf(items, selected)) {\n\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\tcommitFreeform(query);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\t\taria-label={ariaLabel ?? (id ? undefined : placeholder)}\n\t\t\t\t\t\taria-expanded={listOpen}\n\t\t\t\t\t\taria-autocomplete=\"list\"\n\t\t\t\t\t\taria-controls={listOpen ? listId : undefined}\n\t\t\t\t\t\taria-activedescendant={\n\t\t\t\t\t\t\tlistOpen && activeItem && activeIndex !== null\n\t\t\t\t\t\t\t\t? `${listId}-opt-${activeIndex}`\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</PopoverPrimitive.Anchor>\n\t\t\t\t{listOpen ? (\n\t\t\t\t\t<PopoverPrimitive.Portal>\n\t\t\t\t\t\t<PopoverPrimitive.Content\n\t\t\t\t\t\t\tside=\"bottom\"\n\t\t\t\t\t\t\tsideOffset={OVERLAY_GAP}\n\t\t\t\t\t\t\talign=\"start\"\n\t\t\t\t\t\t\tavoidCollisions\n\t\t\t\t\t\t\tcollisionPadding={8}\n\t\t\t\t\t\t\tonPointerMove={(event) => {\n\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\tlastPointerPos.current &&\n\t\t\t\t\t\t\t\t\tlastPointerPos.current.x === event.clientX &&\n\t\t\t\t\t\t\t\t\tlastPointerPos.current.y === event.clientY\n\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tlastPointerPos.current = { x: event.clientX, y: event.clientY };\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonEscapeKeyDown={(e) => {\n\t\t\t\t\t\t\t\tconst evt = e as unknown as {\n\t\t\t\t\t\t\t\t\tisComposing?: boolean;\n\t\t\t\t\t\t\t\t\tnativeEvent?: { isComposing?: boolean };\n\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\tif (evt.isComposing || evt.nativeEvent?.isComposing) {\n\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonOpenAutoFocus={(e) => e.preventDefault()}\n\t\t\t\t\t\t\tonCloseAutoFocus={(e) => e.preventDefault()}\n\t\t\t\t\t\t\tonInteractOutside={(e) => {\n\t\t\t\t\t\t\t\tconst target = e.target as Node | null;\n\t\t\t\t\t\t\t\tif (inputRef.current?.contains(target)) {\n\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tid={listId}\n\t\t\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\t\t\tclassName={overlayPanelClass(\n\t\t\t\t\t\t\t\t\"w-[var(--radix-popover-trigger-width)] max-h-[var(--radix-popover-content-available-height)] overflow-y-auto\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{filtered.map((item, index) => (\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tkey={`${listId}-opt-${index}`}\n\t\t\t\t\t\t\t\t\tid={`${listId}-opt-${index}`}\n\t\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t\t\tdisabled={item.disabled}\n\t\t\t\t\t\t\t\t\taria-disabled={item.disabled || undefined}\n\t\t\t\t\t\t\t\t\taria-selected={index === activeIndex}\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\toverlayItemClass(\"hover:bg-basalt-accent\"),\n\t\t\t\t\t\t\t\t\t\tindex === activeIndex && \"bg-basalt-accent\",\n\t\t\t\t\t\t\t\t\t\titem.disabled && \"opacity-50\",\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\tonPointerMove={(event) => {\n\t\t\t\t\t\t\t\t\t\tif (item.disabled) {\n\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tconst { clientX, clientY } = event;\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\tlastPointerPos.current &&\n\t\t\t\t\t\t\t\t\t\t\tlastPointerPos.current.x === clientX &&\n\t\t\t\t\t\t\t\t\t\t\tlastPointerPos.current.y === clientY\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tlastPointerPos.current = { x: clientX, y: clientY };\n\t\t\t\t\t\t\t\t\t\tsetActive(index);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonMouseDown={(event) => event.preventDefault()}\n\t\t\t\t\t\t\t\t\tonClick={() => commitItem(item)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</PopoverPrimitive.Content>\n\t\t\t\t\t</PopoverPrimitive.Portal>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t</PopoverPrimitive.Root>\n\t);\n}\n\nfunction displayOf(items: TypeaheadItem[], value: string) {\n\treturn items.find((item) => item.value === value)?.label ?? value;\n}\n\nfunction filterItems(items: TypeaheadItem[], query: string, showAllWhenEmpty: boolean) {\n\tconst needle = query.trim().toLowerCase();\n\tif (needle === \"\") {\n\t\treturn showAllWhenEmpty ? items : [];\n\t}\n\treturn items.filter((item) => item.label.toLowerCase().includes(needle));\n}\n"],"mappings":"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"}

package/dist/components/upload-queue.d.ts

@@ -0,0 +1,51 @@
+import type { ReactNode } from "react";
+export interface UploadFile {
+    /** Stable queue identifier. */
+    id: string;
+    /** Display filename. */
+    name: string;
+    /** Optional size in bytes. */
+    size?: number;
+    /** Application-owned transport state. */
+    status: "queued" | "uploading" | "success" | "error" | "cancelled";
+    /** Progress percentage; omitted means indeterminate. */
+    progress?: number;
+    /** Application's error message. */
+    error?: string;
+    /** Optional image/icon. The caller creates and revokes any object URLs. */
+    preview?: ReactNode;
+}
+export interface UploadLabels {
+    queued?: string;
+    uploading?: string;
+    success?: string;
+    error?: string;
+    cancelled?: string;
+    cancel?: string;
+    retry?: string;
+    remove?: string;
+}
+export interface UploadItemProps {
+    /** Current queue entry. The component does not start a network request. */
+    file: UploadFile;
+    /** Cancel a queued or uploading entry. */
+    onCancel?: (id: string) => void;
+    /** Retry a failed or cancelled entry. */
+    onRetry?: (id: string) => void;
+    /** Remove an entry that is not currently uploading. */
+    onRemove?: (id: string) => void;
+    /** Localized statuses and action labels. */
+    labels?: UploadLabels;
+    /** Additional root classes. */
+    className?: string;
+}
+export declare function UploadItem({ file, onCancel, onRetry, onRemove, labels, className, }: UploadItemProps): import("react").JSX.Element;
+export interface UploadQueueProps extends Omit<UploadItemProps, "file"> {
+    /** Accessible queue name. */
+    label: string;
+    /** Application-owned queue entries. */
+    files: readonly UploadFile[];
+    /** Empty queue text. @default "No files selected." */
+    emptyLabel?: string;
+}
+export declare function UploadQueue({ label, files, emptyLabel, className, ...actions }: UploadQueueProps): import("react").JSX.Element;

package/dist/components/upload-queue.js

@@ -0,0 +1,116 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
+import { Button as n } from "./button.js";
+import { Check as r, FileText as i, RotateCcw as a, Trash2 as o, X as s } from "lucide-react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/upload-queue.tsx
+var u = {
+	queued: "Queued",
+	uploading: "Uploading",
+	success: "Uploaded",
+	error: "Upload failed",
+	cancelled: "Cancelled",
+	cancel: "Cancel",
+	retry: "Retry",
+	remove: "Remove"
+};
+function d({ file: d, onCancel: f, onRetry: p, onRemove: m, labels: h, className: g }) {
+	let _ = {
+		...u,
+		...h
+	}, v = typeof d.progress == "number" && Number.isFinite(d.progress) ? Math.max(0, Math.min(100, d.progress)) : void 0, y = d.status === "queued" || d.status === "uploading";
+	return /* @__PURE__ */ l("div", {
+		className: e(t, "flex min-w-0 items-start gap-3 rounded-basalt-lg border border-basalt-border bg-basalt-card p-3", g),
+		children: [
+			/* @__PURE__ */ c("span", {
+				className: "flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-basalt-md bg-basalt-accent",
+				children: d.preview ?? /* @__PURE__ */ c(i, {
+					className: "size-5 text-basalt-muted-foreground",
+					"aria-hidden": "true"
+				})
+			}),
+			/* @__PURE__ */ l("div", {
+				className: "min-w-0 flex-1 space-y-1",
+				children: [
+					/* @__PURE__ */ c("p", {
+						className: "break-words text-sm font-medium",
+						children: d.name
+					}),
+					/* @__PURE__ */ l("p", {
+						className: "text-xs text-basalt-muted-foreground",
+						children: [d.size !== void 0 && `${Math.ceil(d.size / 1024).toLocaleString()} KB · `, _[d.status]]
+					}),
+					d.status === "uploading" && /* @__PURE__ */ c("div", {
+						role: "progressbar",
+						"aria-label": d.name,
+						"aria-valuemin": 0,
+						"aria-valuemax": 100,
+						"aria-valuenow": v,
+						className: "h-1.5 overflow-hidden rounded-full bg-basalt-accent",
+						children: /* @__PURE__ */ c("div", {
+							style: { width: v === void 0 ? "40%" : `${v}%` },
+							className: e("h-full rounded-full bg-basalt-primary", v === void 0 && "animate-pulse motion-reduce:animate-none")
+						})
+					}),
+					d.status === "error" && d.error && /* @__PURE__ */ c("p", {
+						role: "alert",
+						className: "break-words text-xs text-basalt-destructive",
+						children: d.error
+					})
+				]
+			}),
+			/* @__PURE__ */ l("div", {
+				className: "flex shrink-0 items-center gap-1",
+				children: [
+					d.status === "success" && /* @__PURE__ */ c(r, {
+						className: "size-4 text-basalt-success",
+						"aria-hidden": "true"
+					}),
+					y && f && /* @__PURE__ */ c(n, {
+						size: "icon",
+						variant: "ghost",
+						"aria-label": `${_.cancel} ${d.name}`,
+						onClick: () => f(d.id),
+						children: /* @__PURE__ */ c(s, {})
+					}),
+					(d.status === "error" || d.status === "cancelled") && p && /* @__PURE__ */ c(n, {
+						size: "icon",
+						variant: "ghost",
+						"aria-label": `${_.retry} ${d.name}`,
+						onClick: () => p(d.id),
+						children: /* @__PURE__ */ c(a, {})
+					}),
+					d.status !== "uploading" && m && /* @__PURE__ */ c(n, {
+						size: "icon",
+						variant: "ghost",
+						"aria-label": `${_.remove} ${d.name}`,
+						onClick: () => m(d.id),
+						children: /* @__PURE__ */ c(o, {})
+					})
+				]
+			})
+		]
+	});
+}
+function f({ label: n, files: r, emptyLabel: i = "No files selected.", className: a, ...o }) {
+	return /* @__PURE__ */ c("div", {
+		className: e(t, "min-w-0 space-y-2", a),
+		children: r.length === 0 ? /* @__PURE__ */ c("p", {
+			role: "status",
+			className: "text-sm text-basalt-muted-foreground",
+			children: i
+		}) : /* @__PURE__ */ c("ul", {
+			"aria-label": n,
+			className: "m-0 list-none space-y-2 p-0",
+			children: r.map((e) => /* @__PURE__ */ c("li", { children: /* @__PURE__ */ c(d, {
+				file: e,
+				...o
+			}) }, e.id))
+		})
+	});
+}
+//#endregion
+export { d as UploadItem, f as UploadQueue };
+
+//# sourceMappingURL=upload-queue.js.map

package/dist/components/upload-queue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload-queue.js","names":[],"sources":["../../src/components/upload-queue.tsx"],"sourcesContent":["import { Check, FileText, RotateCcw, Trash2, X } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Button } from \"./button\";\n\nexport interface UploadFile {\n\t/** Stable queue identifier. */\n\tid: string;\n\t/** Display filename. */\n\tname: string;\n\t/** Optional size in bytes. */\n\tsize?: number;\n\t/** Application-owned transport state. */\n\tstatus: \"queued\" | \"uploading\" | \"success\" | \"error\" | \"cancelled\";\n\t/** Progress percentage; omitted means indeterminate. */\n\tprogress?: number;\n\t/** Application's error message. */\n\terror?: string;\n\t/** Optional image/icon. The caller creates and revokes any object URLs. */\n\tpreview?: ReactNode;\n}\nexport interface UploadLabels {\n\tqueued?: string;\n\tuploading?: string;\n\tsuccess?: string;\n\terror?: string;\n\tcancelled?: string;\n\tcancel?: string;\n\tretry?: string;\n\tremove?: string;\n}\nconst DEFAULT_LABELS = {\n\tqueued: \"Queued\",\n\tuploading: \"Uploading\",\n\tsuccess: \"Uploaded\",\n\terror: \"Upload failed\",\n\tcancelled: \"Cancelled\",\n\tcancel: \"Cancel\",\n\tretry: \"Retry\",\n\tremove: \"Remove\",\n};\n\nexport interface UploadItemProps {\n\t/** Current queue entry. The component does not start a network request. */\n\tfile: UploadFile;\n\t/** Cancel a queued or uploading entry. */\n\tonCancel?: (id: string) => void;\n\t/** Retry a failed or cancelled entry. */\n\tonRetry?: (id: string) => void;\n\t/** Remove an entry that is not currently uploading. */\n\tonRemove?: (id: string) => void;\n\t/** Localized statuses and action labels. */\n\tlabels?: UploadLabels;\n\t/** Additional root classes. */\n\tclassName?: string;\n}\n\nexport function UploadItem({\n\tfile,\n\tonCancel,\n\tonRetry,\n\tonRemove,\n\tlabels,\n\tclassName,\n}: UploadItemProps) {\n\tconst text = { ...DEFAULT_LABELS, ...labels };\n\tconst progress =\n\t\ttypeof file.progress === \"number\" && Number.isFinite(file.progress)\n\t\t\t? Math.max(0, Math.min(100, file.progress))\n\t\t\t: undefined;\n\tconst active = file.status === \"queued\" || file.status === \"uploading\";\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"flex min-w-0 items-start gap-3 rounded-basalt-lg border border-basalt-border bg-basalt-card p-3\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t<span className=\"flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-basalt-md bg-basalt-accent\">\n\t\t\t\t{file.preview ?? (\n\t\t\t\t\t<FileText className=\"size-5 text-basalt-muted-foreground\" aria-hidden=\"true\" />\n\t\t\t\t)}\n\t\t\t</span>\n\t\t\t<div className=\"min-w-0 flex-1 space-y-1\">\n\t\t\t\t<p className=\"break-words text-sm font-medium\">{file.name}</p>\n\t\t\t\t<p className=\"text-xs text-basalt-muted-foreground\">\n\t\t\t\t\t{file.size !== undefined && `${Math.ceil(file.size / 1024).toLocaleString()} KB · `}\n\t\t\t\t\t{text[file.status]}\n\t\t\t\t</p>\n\t\t\t\t{file.status === \"uploading\" && (\n\t\t\t\t\t<div\n\t\t\t\t\t\trole=\"progressbar\"\n\t\t\t\t\t\taria-label={file.name}\n\t\t\t\t\t\taria-valuemin={0}\n\t\t\t\t\t\taria-valuemax={100}\n\t\t\t\t\t\taria-valuenow={progress}\n\t\t\t\t\t\tclassName=\"h-1.5 overflow-hidden rounded-full bg-basalt-accent\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{ width: progress === undefined ? \"40%\" : `${progress}%` }}\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"h-full rounded-full bg-basalt-primary\",\n\t\t\t\t\t\t\t\tprogress === undefined && \"animate-pulse motion-reduce:animate-none\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{file.status === \"error\" && file.error && (\n\t\t\t\t\t<p role=\"alert\" className=\"break-words text-xs text-basalt-destructive\">\n\t\t\t\t\t\t{file.error}\n\t\t\t\t\t</p>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<div className=\"flex shrink-0 items-center gap-1\">\n\t\t\t\t{file.status === \"success\" && (\n\t\t\t\t\t<Check className=\"size-4 text-basalt-success\" aria-hidden=\"true\" />\n\t\t\t\t)}\n\t\t\t\t{active && onCancel && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\taria-label={`${text.cancel} ${file.name}`}\n\t\t\t\t\t\tonClick={() => onCancel(file.id)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<X />\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\t\t\t\t{(file.status === \"error\" || file.status === \"cancelled\") && onRetry && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\taria-label={`${text.retry} ${file.name}`}\n\t\t\t\t\t\tonClick={() => onRetry(file.id)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<RotateCcw />\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\t\t\t\t{file.status !== \"uploading\" && onRemove && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\taria-label={`${text.remove} ${file.name}`}\n\t\t\t\t\t\tonClick={() => onRemove(file.id)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Trash2 />\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport interface UploadQueueProps extends Omit<UploadItemProps, \"file\"> {\n\t/** Accessible queue name. */\n\tlabel: string;\n\t/** Application-owned queue entries. */\n\tfiles: readonly UploadFile[];\n\t/** Empty queue text. @default \"No files selected.\" */\n\temptyLabel?: string;\n}\n\nexport function UploadQueue({\n\tlabel,\n\tfiles,\n\temptyLabel = \"No files selected.\",\n\tclassName,\n\t...actions\n}: UploadQueueProps) {\n\treturn (\n\t\t<div className={cn(BASALT_UI_CLASS, \"min-w-0 space-y-2\", className)}>\n\t\t\t{files.length === 0 ? (\n\t\t\t\t<p role=\"status\" className=\"text-sm text-basalt-muted-foreground\">\n\t\t\t\t\t{emptyLabel}\n\t\t\t\t</p>\n\t\t\t) : (\n\t\t\t\t<ul aria-label={label} className=\"m-0 list-none space-y-2 p-0\">\n\t\t\t\t\t{files.map((file) => (\n\t\t\t\t\t\t<li key={file.id}>\n\t\t\t\t\t\t\t<UploadItem file={file} {...actions} />\n\t\t\t\t\t\t</li>\n\t\t\t\t\t))}\n\t\t\t\t</ul>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}