@mortenbrudvik/waveui 0.15.0 → 0.16.0

package/dist/hooks/useListbox.mjs

@@ -176,9 +176,11 @@ function O(e) {
 }
 var k = u.createContext(null);
 k.displayName = "ListboxContext";
-var A = null;
-function j() {
-	return A ??= {
+var A = u.createContext(null);
+A.displayName = "ListboxOptionPositionContext";
+var j = null;
+function M() {
+	return j ??= {
 		listboxId: "wave-listbox-inert",
 		store: new E([]),
 		multiselect: !1,
@@ -186,49 +188,49 @@ function j() {
 		select: () => {},
 		highlight: () => {},
 		press: () => {}
-	}, A;
+	}, j;
 }
-function M(e) {
-	return f(k) || (n(e, "a listbox (Listbox, Combobox, Dropdown or a ListboxProvider)"), j());
+function N(e) {
+	return f(k) || (n(e, "a listbox (Listbox, Combobox, Dropdown or a ListboxProvider)"), M());
 }
-var N = Symbol.for("@mortenbrudvik/waveui/listbox-element-kind");
-function P(e, t) {
-	return Object.defineProperty(e, N, {
+var P = Symbol.for("@mortenbrudvik/waveui/listbox-element-kind");
+function F(e, t) {
+	return Object.defineProperty(e, P, {
 		value: t,
 		configurable: !0
 	}), e;
 }
-function F(e) {
+function I(e) {
 	if (typeof e != "function" && typeof e != "object" || e === null) return;
-	let t = e[N];
+	let t = e[P];
 	return t === "option" || t === "group" ? t : void 0;
 }
-function I(e) {
+function L(e) {
 	if (typeof e == "string") return e;
 	if (typeof e == "number" || typeof e == "bigint") return String(e);
 	if (e == null || typeof e == "boolean") return "";
-	if (u.isValidElement(e)) return typeof e.type == "string" || e.type === u.Fragment ? I(e.props.children) : "";
+	if (u.isValidElement(e)) return typeof e.type == "string" || e.type === u.Fragment ? L(e.props.children) : "";
 	if (typeof e == "object" && Symbol.iterator in e) {
 		let t = "";
-		for (let n of e) t += I(n);
+		for (let n of e) t += L(n);
 		return t;
 	}
 	return "";
 }
 function ee(e, t) {
-	return typeof e.label == "string" ? e.label : typeof e.textValue == "string" ? e.textValue : e.children === null || e.children === void 0 ? t : I(e.children).trim() || void 0;
+	return typeof e.label == "string" ? e.label : typeof e.textValue == "string" ? e.textValue : e.children === null || e.children === void 0 ? t : L(e.children).trim() || void 0;
 }
-function L(t, n) {
+function R(t, n) {
 	u.Children.forEach(t, (t) => {
 		if (!u.isValidElement(t)) return;
 		let r = e(t);
 		if (r === u.Fragment) {
-			L(t.props.children, n);
+			R(t.props.children, n);
 			return;
 		}
-		let i = F(r);
+		let i = I(r);
 		if (i === "group") {
-			L(t.props.children, n);
+			R(t.props.children, n);
 			return;
 		}
 		if (i !== "option") return;
@@ -238,14 +240,14 @@ function L(t, n) {
 		o !== void 0 && n.set(a, o);
 	});
 }
-function R(e) {
+function z(e) {
 	let t = /* @__PURE__ */ new Map();
-	return L(e, t), t;
+	return R(e, t), t;
 }
 function te(e) {
 	return (e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement) && e.value !== "";
 }
-var z = /* @__PURE__ */ new Set([
+var B = /* @__PURE__ */ new Set([
 	"x",
 	"v",
 	"z",
@@ -255,92 +257,96 @@ function ne(e) {
 	let t = e.currentTarget;
 	if ((t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement) && (t.readOnly || t.disabled)) return !1;
 	let { key: n } = e;
-	return n === "Backspace" || n === "Delete" || n === "Process" || n === "Unidentified" ? !0 : n.length === 1 ? !(e.metaKey || e.ctrlKey && !o(e)) || z.has(n.toLowerCase()) : !1;
+	return n === "Backspace" || n === "Delete" || n === "Process" || n === "Unidentified" ? !0 : n.length === 1 ? !(e.metaKey || e.ctrlKey && !o(e)) || B.has(n.toLowerCase()) : !1;
 }
 function re(e) {
 	e.preventDefault();
 }
-function B(e) {
-	let { open: t, onOpenChange: n, mode: c, multiselect: u = !1, selectedValues: f, onSelect: y, items: S, filter: C, loop: w = !1, typeahead: T = c !== "editable", disabledOptionsFocusable: O = !1, autoHighlight: k = "selected", highlightOnFilter: A = !1, onActiveValueChange: j, idPrefix: M, onClearDraft: N } = e, P = c === "standalone", F = P ? void 0 : n, [I, ee] = _(null), L = a(M ?? "listbox"), [R] = _(() => new E(f)), z = S !== void 0, B = v(R.subscribeItems, z ? x : R.getItems, x), V = S ?? B, H = h(() => V.filter((e) => !e.hidden && (!C || C(e))), [V, C]), U = h(() => O ? H.map((e) => e.value) : H.filter((e) => !e.disabled).map((e) => e.value), [H, O]), W = h(() => {
+function V(e) {
+	let { open: t, onOpenChange: n, mode: c, multiselect: u = !1, selectedValues: f, onSelect: y, items: S, filter: C, loop: w = !1, typeahead: T = c !== "editable", disabledOptionsFocusable: O = !1, autoHighlight: k = "selected", highlightOnFilter: A = !1, onActiveValueChange: j, onScrollToItem: M, idPrefix: N, onClearDraft: P } = e, F = c === "standalone", I = F ? void 0 : n, [L, ee] = _(null), R = a(N ?? "listbox"), [z] = _(() => new E(f)), B = S !== void 0, V = v(z.subscribeItems, B ? x : z.getItems, x), H = S ?? V, U = h(() => H.filter((e) => !e.hidden && (!C || C(e))), [H, C]), W = h(() => O ? U.map((e) => e.value) : U.filter((e) => !e.disabled).map((e) => e.value), [U, O]), G = h(() => {
 		let e = /* @__PURE__ */ new Map();
-		for (let t of V) e.has(t.value) || e.set(t.value, t);
+		for (let t of H) e.has(t.value) || e.set(t.value, t);
 		return e;
-	}, [V]), G = h(() => {
-		if (H.length === V.length) return b;
-		let e = new Set(H.map((e) => e.value)), t = /* @__PURE__ */ new Set();
-		for (let n of V) e.has(n.value) || t.add(n.value);
+	}, [H]), K = h(() => {
+		if (U.length === H.length) return b;
+		let e = new Set(U.map((e) => e.value)), t = /* @__PURE__ */ new Set();
+		for (let n of H) e.has(n.value) || t.add(n.value);
 		return t;
-	}, [V, H]), K = new Set(f), q = U.find((e) => K.has(e)) ?? null, J = null;
-	k === "selected" ? J = q ?? U[0] ?? null : k === "first" && (J = U[0] ?? null);
-	let Y = d((e) => `${L}-opt-${R.getIndex(e)}`, [L, R]), ie = d((e) => W.get(e), [W]), X = l({
-		items: U,
-		getId: Y,
+	}, [H, U]), q = new Set(f), J = W.find((e) => q.has(e)) ?? null, Y = null;
+	k === "selected" ? Y = J ?? W[0] ?? null : k === "first" && (Y = W[0] ?? null);
+	let ie = d((e) => `${R}-opt-${z.getIndex(e)}`, [R, z]), ae = d((e) => G.get(e), [G]), oe = i((e) => {
+		let t = W[e], n = U.findIndex((e) => e.value === t);
+		n !== -1 && M?.(n);
+	}), X = l({
+		items: W,
+		getId: ie,
 		enabled: t,
-		fallback: J,
+		fallback: Y,
 		loop: w,
 		activateFirstOnChange: A,
-		getElement: R.getElement,
+		getElement: z.getElement,
+		onScrollToItem: M ? oe : void 0,
 		onActiveValueChange: j
 	}), { activeValue: Z, activeDescendantId: Q } = X, $ = i((e, t, n, r) => {
-		let i = W.get(e) ?? r;
+		let i = G.get(e) ?? r;
 		i && !i.disabled && (y(e, {
 			item: i,
 			event: n
-		}), P || u && t === "select" ? X.setActiveValue(e) : (X.setActiveValue(null), F?.(!1, {
+		}), F || u && t === "select" ? X.setActiveValue(e) : (X.setActiveValue(null), I?.(!1, {
 			reason: t,
 			event: n
 		})));
-	}), ae = i((e, t, n) => {
+	}), se = i((e, t, n) => {
 		$(e, "select", n, t);
-	}), oe = i((e) => {
-		I ? I.focus({ preventScroll: !0 }) : P && r("useListbox:list-ref", "useListbox: the list element is unknown, so a pointer press cannot focus the list. Pass the `ref` of `getListboxProps()` to the list element, merged with your own ref."), U.includes(e) ? X.setActiveValue(e, { scroll: !1 }) : !t && J !== null && X.setActiveValue(J, { scroll: !1 });
-	}), se = g(null), { onTypeahead: ce } = s({
-		getItems: () => H.map((e) => ({
+	}), ce = i((e) => {
+		L ? L.focus({ preventScroll: !0 }) : F && r("useListbox:list-ref", "useListbox: the list element is unknown, so a pointer press cannot focus the list. Pass the `ref` of `getListboxProps()` to the list element, merged with your own ref."), W.includes(e) ? X.setActiveValue(e, { scroll: !1 }) : !t && Y !== null && X.setActiveValue(Y, { scroll: !1 });
+	}), le = g(null), { onTypeahead: ue } = s({
+		getItems: () => U.map((e) => ({
 			value: e.value,
 			text: e.textValue ?? e.label,
 			disabled: !O && e.disabled
 		})),
 		onMatch: (e) => {
 			X.setActiveValue(e);
-			let n = se.current;
-			!t && n && F?.(!0, {
+			let n = le.current;
+			!t && n && I?.(!0, {
 				reason: "keyboard",
 				event: n
 			});
 		}
-	}), le = i((e) => {
+	}), de = i((e) => {
 		if (e.defaultPrevented || e.nativeEvent.isComposing) return;
-		se.current = e.nativeEvent, c === "editable" && t && ne(e) && X.setActiveValue(A ? U[0] ?? null : null);
+		le.current = e.nativeEvent, c === "editable" && t && ne(e) && X.setActiveValue(A ? W[0] ?? null : null);
 		let n = o(e);
 		if (e.ctrlKey && !n || e.metaKey) return;
 		let { key: r, altKey: i } = e;
-		if (P && (r === "Tab" || r === "Escape" || i && r.startsWith("Arrow"))) return;
-		let a = c === "select-only", s = c === "editable", l = U[0] ?? null, d = U[U.length - 1] ?? null, f = (n) => {
-			X.setActiveValue(n), t || F?.(!0, {
+		if (F && (r === "Tab" || r === "Escape" || i && r.startsWith("Arrow"))) return;
+		let a = c === "select-only", s = c === "editable", l = W[0] ?? null, d = W[W.length - 1] ?? null, f = (n) => {
+			X.setActiveValue(n), t || I?.(!0, {
 				reason: "keyboard",
 				event: e.nativeEvent
 			});
 		}, p = () => {
-			Z === null ? u || F?.(!1, {
+			Z === null ? u || I?.(!1, {
 				reason: "keyboard",
 				event: e.nativeEvent
 			}) : $(Z, "select", e.nativeEvent);
 		};
 		switch (r) {
 			case "ArrowDown":
-				e.preventDefault(), i ? t || F?.(!0, {
+				e.preventDefault(), i ? t || I?.(!0, {
 					reason: "keyboard",
 					event: e.nativeEvent
-				}) : t ? X.next() : f(q ?? l);
+				}) : t ? X.next() : f(J ?? l);
 				return;
 			case "ArrowUp":
 				if (e.preventDefault(), i) {
 					if (!t) return;
-					a && !u && Z !== null && !W.get(Z)?.disabled ? $(Z, "select", e.nativeEvent) : F?.(!1, {
+					a && !u && Z !== null && !G.get(Z)?.disabled ? $(Z, "select", e.nativeEvent) : I?.(!1, {
 						reason: "keyboard",
 						event: e.nativeEvent
 					});
-				} else t ? X.prev() : f(q ?? d);
+				} else t ? X.prev() : f(J ?? d);
 				return;
 			case "Home":
 			case "End":
@@ -357,20 +363,20 @@ function B(e) {
 					t && Z !== null && (e.preventDefault(), $(Z, "select", e.nativeEvent));
 					return;
 				}
-				e.preventDefault(), t ? p() : F?.(!0, {
+				e.preventDefault(), t ? p() : I?.(!0, {
 					reason: "keyboard",
 					event: e.nativeEvent
 				});
 				return;
 			case "Escape":
-				t ? (e.preventDefault(), F?.(!1, {
+				t ? (e.preventDefault(), I?.(!1, {
 					reason: "escape",
 					event: e.nativeEvent
-				})) : s && N && te(e.currentTarget) && (e.preventDefault(), N());
+				})) : s && P && te(e.currentTarget) && (e.preventDefault(), P());
 				return;
 			case "Tab":
 				if (!t) return;
-				a && !u && Z !== null && !W.get(Z)?.disabled ? $(Z, "tab", e.nativeEvent) : F?.(!1, {
+				a && !u && Z !== null && !G.get(Z)?.disabled ? $(Z, "tab", e.nativeEvent) : I?.(!1, {
 					reason: "tab",
 					event: e.nativeEvent
 				});
@@ -378,155 +384,159 @@ function B(e) {
 		}
 		if (!(r === " " && s)) {
 			if (!T || i && !n || r.length !== 1) {
-				r === " " && !s && (e.preventDefault(), t ? p() : F?.(!0, {
+				r === " " && !s && (e.preventDefault(), t ? p() : I?.(!0, {
 					reason: "keyboard",
 					event: e.nativeEvent
 				}));
 				return;
 			}
-			if (ce(e, t ? Z : q)) {
+			if (ue(e, t ? Z : J)) {
 				e.preventDefault();
 				return;
 			}
 			if (r === " ") {
-				e.preventDefault(), t ? p() : F?.(!0, {
+				e.preventDefault(), t ? p() : I?.(!0, {
 					reason: "keyboard",
 					event: e.nativeEvent
 				});
 				return;
 			}
-			a && !t && (e.preventDefault(), F?.(!0, {
+			a && !t && (e.preventDefault(), I?.(!0, {
 				reason: "keyboard",
 				event: e.nativeEvent
 			}));
 		}
-	}), ue = i((e) => {
+	}), fe = i((e) => {
 		c === "select-only" && e.key === " " && e.preventDefault();
 	});
 	m(() => {
-		R.setRegistrationMode(!z), R.flush(), R.checkOrderAfterCommit(), R.setRenderState(Z, K, G);
-	}), m(() => (R.connect(), () => R.disconnect()), [R]), p(() => {
+		z.setRegistrationMode(!B), z.flush(), z.checkOrderAfterCommit(), z.setRenderState(Z, q, K);
+	}), m(() => (z.connect(), () => z.disconnect()), [z]), p(() => {
 		if (!S) return;
 		let e = /* @__PURE__ */ new Set();
 		for (let t of S) e.has(t.value) && D(t.value), e.add(t.value);
 	}, [S]);
-	let de = h(() => ({
-		listboxId: L,
-		store: R,
+	let pe = h(() => ({
+		listboxId: R,
+		store: z,
 		multiselect: u,
 		mode: c,
-		select: ae,
+		select: se,
 		highlight: X.highlight,
-		press: oe
+		press: ce
 	}), [
-		L,
 		R,
+		z,
 		u,
 		c,
-		ae,
+		se,
 		X.highlight,
-		oe
+		ce
 	]);
 	return {
-		listboxId: L,
+		listboxId: R,
 		activeValue: Z,
 		activeDescendantId: Q,
-		items: H,
-		getItem: ie,
-		getOptionId: Y,
+		items: U,
+		getItem: ae,
+		getOptionId: ie,
 		setActiveValue: X.setActiveValue,
-		onKeyDown: le,
-		onKeyUp: ue,
+		onKeyDown: de,
+		onKeyUp: fe,
 		getComboboxProps: () => {
 			let e = {
 				role: "combobox",
 				"aria-expanded": t,
-				"aria-controls": L,
+				"aria-controls": R,
 				"aria-haspopup": "listbox"
 			};
 			return Q !== void 0 && (e["aria-activedescendant"] = Q), c === "editable" && (e["aria-autocomplete"] = "list"), e;
 		},
 		getListboxProps: () => {
-			let e = P ? {
-				id: L,
+			let e = F ? {
+				id: R,
 				role: "listbox",
 				tabIndex: 0,
 				ref: ee
 			} : {
-				id: L,
+				id: R,
 				role: "listbox",
 				tabIndex: -1,
 				onMouseDown: re
 			};
-			return P && Q !== void 0 && (e["aria-activedescendant"] = Q), u && (e["aria-multiselectable"] = !0), e;
+			return F && Q !== void 0 && (e["aria-activedescendant"] = Q), u && (e["aria-multiselectable"] = !0), e;
 		},
-		context: de
+		context: pe
 	};
 }
-var V = 1, H = 2, U = 4;
-function W(e, t) {
-	return (e.isActive(t) ? V : 0) | (e.isSelected(t) ? H : 0) | (e.isHidden(t) ? U : 0);
-}
+var H = 1, U = 2, W = 4;
 function G(e, t) {
-	let { store: n, listboxId: r, multiselect: i, mode: a, select: o, highlight: s, press: l } = M("Option"), { value: u, label: f, textValue: p, disabled: h = !1, hidden: _ = !1 } = e, y = `${r}-opt-${n.getIndex(u)}`, b = v(n.subscribe, () => W(n, u), () => W(n, u)), x = (b & V) !== 0, S = (b & H) !== 0, w = _ || (b & U) !== 0, T = g(null), E = d((e) => {
-		T.current = e;
-	}, []), D = c(t, E), O = g(null);
+	return (e.isActive(t) ? H : 0) | (e.isSelected(t) ? U : 0) | (e.isHidden(t) ? W : 0);
+}
+function K(e, t) {
+	let { store: n, listboxId: r, multiselect: i, mode: a, select: o, highlight: s, press: l } = N("Option"), u = f(A), { value: p, label: h, textValue: _, disabled: y = !1, hidden: b = !1 } = e, x = `${r}-opt-${n.getIndex(p)}`, S = v(n.subscribe, () => G(n, p), () => G(n, p)), w = (S & H) !== 0, T = (S & U) !== 0, E = b || (S & W) !== 0, D = g(null), O = d((e) => {
+		D.current = e;
+	}, []), k = c(t, O), j = g(null);
 	m(() => {
-		let e = f === void 0 && p === void 0 ? T.current?.textContent?.trim() : void 0, t = {
-			value: u,
-			label: f ?? p ?? (e || u)
+		let e = h === void 0 && _ === void 0 ? D.current?.textContent?.trim() : void 0, t = {
+			value: p,
+			label: h ?? _ ?? (e || p)
 		};
-		p !== void 0 && (t.textValue = p), h && (t.disabled = !0), _ && (t.hidden = !0);
-		let r = O.current;
-		r && r.store === n && C(r.item, t) || (r?.unregister(), O.current = {
+		_ !== void 0 && (t.textValue = _), y && (t.disabled = !0), b && (t.hidden = !0);
+		let r = j.current;
+		r && r.store === n && C(r.item, t) || (r?.unregister(), j.current = {
 			store: n,
 			item: t,
-			unregister: n.register(t, T)
+			unregister: n.register(t, D)
 		});
 	}), m(() => () => {
-		O.current?.unregister(), O.current = null;
+		j.current?.unregister(), j.current = null;
 	}, []);
-	let k = d((e) => {
-		if (h) return;
+	let M = d((e) => {
+		if (y) return;
 		let t = {
-			value: u,
-			label: f ?? p ?? u
+			value: p,
+			label: h ?? _ ?? p
 		};
-		p !== void 0 && (t.textValue = p), o(u, t, e.nativeEvent);
+		_ !== void 0 && (t.textValue = _), o(p, t, e.nativeEvent);
 	}, [
 		o,
-		u,
-		f,
 		p,
-		h
-	]), A = d(() => {
-		!h && !n.isActive(u) && s(u);
+		h,
+		_,
+		y
+	]), P = d(() => {
+		!y && !n.isActive(p) && s(p);
 	}, [
 		s,
 		n,
-		u,
-		h
-	]), j = d((e) => {
-		e.button === 0 && (e.preventDefault(), l(u));
-	}, [l, u]), N = {
-		id: y,
+		p,
+		y
+	]), F = d((e) => {
+		e.button === 0 && (e.preventDefault(), l(p));
+	}, [l, p]), I = {
+		id: x,
 		role: "option",
-		"aria-selected": S,
-		onClick: k,
-		onPointerMove: A,
-		ref: D
+		"aria-selected": T,
+		onClick: M,
+		onPointerMove: P,
+		ref: k
 	};
-	return a === "standalone" && (N.onMouseDown = j), h && (N["aria-disabled"] = !0, N["data-disabled"] = ""), w && (N.hidden = !0), x && (N["data-active"] = ""), S && (N["data-selected"] = ""), {
-		id: y,
-		selected: S,
-		active: x,
-		disabled: h,
-		hidden: w,
+	return a === "standalone" && (I.onMouseDown = F), u && (I["aria-setsize"] = u.setSize, I["aria-posinset"] = u.index + 1, u.itemSize !== void 0 && (I.style = {
+		height: u.itemSize,
+		boxSizing: "border-box",
+		flexShrink: 0
+	})), y && (I["aria-disabled"] = !0, I["data-disabled"] = ""), E && (I.hidden = !0), w && (I["data-active"] = ""), T && (I["data-selected"] = ""), {
+		id: x,
+		selected: T,
+		active: w,
+		disabled: y,
+		hidden: E,
 		multiselect: i,
-		optionProps: N
+		optionProps: I
 	};
 }
 //#endregion
-export { k as ListboxContext, R as collectOptionLabels, P as markListboxElement, B as useListbox, G as useListboxOption };
+export { k as ListboxContext, A as ListboxOptionPositionContext, z as collectOptionLabels, F as markListboxElement, V as useListbox, K as useListboxOption };
 
 //# sourceMappingURL=useListbox.mjs.map