@mortenbrudvik/waveui 0.8.0 → 0.10.0

package/dist/hooks/useListbox.mjs

@@ -5,29 +5,27 @@ import { useEventCallback as i } from "./useEventCallback.mjs";
 import { useId as a } from "./useId.mjs";
 import { isAltGraphCharacter as o, useTypeahead as s } from "./useTypeahead.mjs";
 import { useMergedRefs as c } from "./useMergedRefs.mjs";
-import * as l from "react";
-import { useCallback as u, useContext as d, useEffect as f, useLayoutEffect as p, useMemo as m, useRef as h, useState as g, useSyncExternalStore as ee } from "react";
+import { useActiveDescendant as l } from "./useActiveDescendant.mjs";
+import * as u from "react";
+import { useCallback as d, useContext as f, useEffect as p, useLayoutEffect as m, useMemo as h, useRef as g, useState as _, useSyncExternalStore as v } from "react";
 //#region src/hooks/useListbox.ts
-var _ = [], v = /* @__PURE__ */ new Set();
-function y() {
-	return _;
+var y = [], b = /* @__PURE__ */ new Set();
+function x() {
+	return y;
 }
-function b(e, t) {
+function S(e, t) {
 	if (e === t) return !0;
 	if (e.size !== t.size) return !1;
 	for (let n of e) if (!t.has(n)) return !1;
 	return !0;
 }
-function x(e, t) {
-	return e.value === t.value && e.label === t.label && e.textValue === t.textValue && !!e.disabled == !!t.disabled && !!e.hidden == !!t.hidden;
-}
-function S(e, t) {
-	return e === t || e.length === t.length && e.every((e, n) => x(e, t[n]));
-}
 function C(e, t) {
-	return e === t || e.length === t.length && e.every((e, n) => e.value === t[n].value);
+	return e.value === t.value && e.label === t.label && e.textValue === t.textValue && !!e.disabled == !!t.disabled && !!e.hidden == !!t.hidden;
 }
 function w(e, t) {
+	return e === t || e.length === t.length && e.every((e, n) => C(e, t[n]));
+}
+function T(e, t) {
 	let n = e.element.current, r = t.element.current;
 	if (n && r && n !== r && n.isConnected && r.isConnected) {
 		let e = n.compareDocumentPosition(r);
@@ -36,7 +34,7 @@ function w(e, t) {
 	}
 	return e.seq - t.seq;
 }
-var T = class {
+var E = class {
 	indexByValue = /* @__PURE__ */ new Map();
 	registrations = /* @__PURE__ */ new Set();
 	stateListeners = /* @__PURE__ */ new Set();
@@ -46,7 +44,7 @@ var T = class {
 	dirty = !1;
 	flushScheduled = !1;
 	itemsStale = !1;
-	itemsSnapshot = _;
+	itemsSnapshot = y;
 	sorted = [];
 	observer = null;
 	observed = null;
@@ -55,7 +53,7 @@ var T = class {
 	registrationMode = !0;
 	active = null;
 	selected;
-	hidden = v;
+	hidden = b;
 	constructor(e) {
 		this.selected = new Set(e);
 	}
@@ -85,21 +83,21 @@ var T = class {
 	getItems = () => {
 		if (this.itemsStale) {
 			this.itemsStale = !1;
-			let e = Array.from(this.registrations).sort(w);
+			let e = Array.from(this.registrations).sort(T);
 			this.sorted = e;
 			let t = /* @__PURE__ */ new Set(), n = [];
 			for (let { item: r } of e) t.has(r.value) || (t.add(r.value), n.push(r));
-			S(n, this.itemsSnapshot) || (this.itemsSnapshot = n);
+			w(n, this.itemsSnapshot) || (this.itemsSnapshot = n);
 		}
 		return this.itemsSnapshot;
 	};
-	getElement(e) {
+	getElement = (e) => {
 		for (let { item: t, element: n } of this.registrations) {
 			let r = n.current;
 			if (t.value === e && r && r.isConnected) return r;
 		}
 		return null;
-	}
+	};
 	setRegistrationMode(e) {
 		e !== this.registrationMode && (this.registrationMode = e, this.syncObserver());
 	}
@@ -129,7 +127,7 @@ var T = class {
 	}
 	setRenderState(e, t, n) {
 		let r = !1;
-		if (e !== this.active && (this.active = e, r = !0), b(t, this.selected) || (this.selected = t, r = !0), b(n, this.hidden) || (this.hidden = n, r = !0), r) for (let e of Array.from(this.stateListeners)) e();
+		if (e !== this.active && (this.active = e, r = !0), S(t, this.selected) || (this.selected = t, r = !0), S(n, this.hidden) || (this.hidden = n, r = !0), r) for (let e of Array.from(this.stateListeners)) e();
 	}
 	notifyItems() {
 		for (let e of Array.from(this.itemListeners)) e();
@@ -139,7 +137,7 @@ var T = class {
 	};
 	syncObserver() {
 		let e = this.connected && this.registrationMode && typeof MutationObserver < "u" ? this.commonAncestor() : null;
-		e !== this.observed && (this.observer?.disconnect(), this.observed = e, this.watching = !1, e && (t && D(e), this.observer ??= new MutationObserver(this.onMutation), this.observer.observe(e, {
+		e !== this.observed && (this.observer?.disconnect(), this.observed = e, this.watching = !1, e && (t && O(e), this.observer ??= new MutationObserver(this.onMutation), this.observer.observe(e, {
 			childList: !0,
 			subtree: !0
 		})));
@@ -166,66 +164,69 @@ var T = class {
 	}
 	warnDuplicates() {
 		let e = /* @__PURE__ */ new Set();
-		for (let { item: t } of this.registrations) e.has(t.value) && E(t.value), e.add(t.value);
+		for (let { item: t } of this.registrations) e.has(t.value) && D(t.value), e.add(t.value);
 	}
 };
-function E(e) {
+function D(e) {
 	r(`useListbox:duplicate:${e}`, `Listbox: several options share the value "${e}". Option values must be unique within a listbox; only the first one can be highlighted and selected.`);
 }
-function D(e) {
+function O(e) {
 	let t = e.ownerDocument;
 	!t || e !== t.body && e !== t.documentElement || r("useListbox:single-container", "Listbox: the options of one listbox are rendered in more than one container (for example an inline list kept mounted next to a portaled one). All options must live in a single container at a time: render the list inline only while closed and in the portal only while open.");
 }
-var O = l.createContext(null);
-O.displayName = "ListboxContext";
-var k = null;
-function A() {
-	return k ??= {
+var k = u.createContext(null);
+k.displayName = "ListboxContext";
+var A = null;
+function j() {
+	return A ??= {
 		listboxId: "wave-listbox-inert",
-		store: new T([]),
+		store: new E([]),
+		multiselect: !1,
+		mode: "select-only",
 		select: () => {},
-		highlight: () => {}
-	}, k;
+		highlight: () => {},
+		press: () => {}
+	}, A;
 }
-function j(e) {
-	return d(O) || (n(e, "a listbox (Combobox or Dropdown)"), A());
+function M(e) {
+	return f(k) || (n(e, "a listbox (Listbox, Combobox, Dropdown or a ListboxProvider)"), j());
 }
-var M = Symbol.for("@mortenbrudvik/waveui/listbox-element-kind");
-function N(e, t) {
-	return Object.defineProperty(e, M, {
+var N = Symbol.for("@mortenbrudvik/waveui/listbox-element-kind");
+function P(e, t) {
+	return Object.defineProperty(e, N, {
 		value: t,
 		configurable: !0
 	}), e;
 }
-function P(e) {
+function F(e) {
 	if (typeof e != "function" && typeof e != "object" || e === null) return;
-	let t = e[M];
+	let t = e[N];
 	return t === "option" || t === "group" ? t : void 0;
 }
-function F(e) {
+function I(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 (l.isValidElement(e)) return typeof e.type == "string" || e.type === l.Fragment ? F(e.props.children) : "";
+	if (u.isValidElement(e)) return typeof e.type == "string" || e.type === u.Fragment ? I(e.props.children) : "";
 	if (typeof e == "object" && Symbol.iterator in e) {
 		let t = "";
-		for (let n of e) t += F(n);
+		for (let n of e) t += I(n);
 		return t;
 	}
 	return "";
 }
-function I(e, t) {
-	return typeof e.label == "string" ? e.label : typeof e.textValue == "string" ? e.textValue : e.children === null || e.children === void 0 ? t : F(e.children).trim() || void 0;
+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;
 }
 function L(t, n) {
-	l.Children.forEach(t, (t) => {
-		if (!l.isValidElement(t)) return;
+	u.Children.forEach(t, (t) => {
+		if (!u.isValidElement(t)) return;
 		let r = e(t);
-		if (r === l.Fragment) {
+		if (r === u.Fragment) {
 			L(t.props.children, n);
 			return;
 		}
-		let i = P(r);
+		let i = F(r);
 		if (i === "group") {
 			L(t.props.children, n);
 			return;
@@ -233,7 +234,7 @@ function L(t, n) {
 		if (i !== "option") return;
 		let { value: a } = t.props;
 		if (typeof a != "string" || n.has(a)) return;
-		let o = I(t.props, a);
+		let o = ee(t.props, a);
 		o !== void 0 && n.set(a, o);
 	});
 }
@@ -241,15 +242,7 @@ function R(e) {
 	let t = /* @__PURE__ */ new Map();
 	return L(e, t), t;
 }
-function te(e, t, n, r) {
-	let i = e.length;
-	if (i === 0) return null;
-	let a = t === null ? -1 : e.indexOf(t);
-	if (a === -1) return n > 0 ? e[0] : e[i - 1];
-	let o = a + n;
-	return (o < 0 || o >= i) && (o = r && Math.abs(n) === 1 ? (o + i) % i : Math.max(0, Math.min(i - 1, o))), e[o];
-}
-function ne(e) {
+function te(e) {
 	return (e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement) && e.value !== "";
 }
 var z = /* @__PURE__ */ new Set([
@@ -258,172 +251,216 @@ var z = /* @__PURE__ */ new Set([
 	"z",
 	"y"
 ]);
-function re(e) {
+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;
 }
-function ie(e) {
+function re(e) {
 	e.preventDefault();
 }
 function B(e) {
-	let { open: t, onOpenChange: n, mode: r, multiple: c = !1, selectedValues: l, onSelect: d, items: _, filter: b, loop: x = !1, typeahead: S = r === "select-only", autoHighlight: w = "selected", highlightOnFilter: D = !1, idPrefix: O, onClearDraft: k } = e, A = a(O ?? "listbox"), [j] = g(() => new T(l)), M = _ !== void 0, N = ee(j.subscribeItems, M ? y : j.getItems, y), P = _ ?? N, F = m(() => P.filter((e) => !e.hidden && (!b || b(e))), [P, b]), I = m(() => F.filter((e) => !e.disabled).map((e) => e.value), [F]), L = m(() => new Set(I), [I]), R = m(() => {
+	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(() => {
 		let e = /* @__PURE__ */ new Map();
-		for (let t of P) e.has(t.value) || e.set(t.value, t);
+		for (let t of V) e.has(t.value) || e.set(t.value, t);
 		return e;
-	}, [P]), z = m(() => {
-		if (F.length === P.length) return v;
-		let e = new Set(F.map((e) => e.value)), t = /* @__PURE__ */ new Set();
-		for (let n of P) e.has(n.value) || t.add(n.value);
+	}, [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);
 		return t;
-	}, [P, F]), B = new Set(l), [V, H] = g(null), U = t ? V : null, [W, G] = g(() => ({
-		open: t,
-		items: F
-	}));
-	if (D) {
-		let e = !C(W.items, F);
-		(e || W.open !== t) && (G({
-			open: t,
-			items: F
-		}), t && e && (U = I[0] ?? null));
-	}
-	U !== null && !L.has(U) && (U = null), U !== V && H(U);
-	let K = I.find((e) => B.has(e)) ?? null, q = null;
-	w === "selected" ? q = K ?? I[0] ?? null : w === "first" && (q = I[0] ?? null);
-	let J = t ? U ?? q : null, Y = u((e) => `${A}-opt-${j.getIndex(e)}`, [A, j]), X = J === null ? void 0 : Y(J), ae = u((e) => R.get(e), [R]), Z = h(null), Q = u((e) => {
-		Z.current = null, H(e);
-	}, []), oe = Q, $ = i((e, t, r) => {
-		let i = R.get(e) ?? r;
-		i && !i.disabled && (d(e, i), c && t === "select" ? Q(e) : (Q(null), n(!1, t)));
-	}), se = i((e, t) => {
-		$(e, "select", t);
-	}), ce = i((e) => {
-		t && L.has(e) && e !== J && (Z.current = e, H(e));
-	}), { onTypeahead: le } = s({
-		getItems: () => F.map((e) => ({
+	}, [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,
+		enabled: t,
+		fallback: J,
+		loop: w,
+		activateFirstOnChange: A,
+		getElement: R.getElement,
+		onActiveValueChange: j
+	}), { activeValue: Z, activeDescendantId: Q } = X, $ = i((e, t, n, r) => {
+		let i = W.get(e) ?? r;
+		i && !i.disabled && (y(e, {
+			item: i,
+			event: n
+		}), P || u && t === "select" ? X.setActiveValue(e) : (X.setActiveValue(null), F?.(!1, {
+			reason: t,
+			event: n
+		})));
+	}), ae = 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) => ({
 			value: e.value,
 			text: e.textValue ?? e.label,
-			disabled: e.disabled
+			disabled: !O && e.disabled
 		})),
 		onMatch: (e) => {
-			Q(e), t || n(!0, "keyboard");
+			X.setActiveValue(e);
+			let n = se.current;
+			!t && n && F?.(!0, {
+				reason: "keyboard",
+				event: n
+			});
 		}
-	}), ue = i((e) => {
+	}), le = i((e) => {
 		if (e.defaultPrevented || e.nativeEvent.isComposing) return;
-		r === "editable" && t && re(e) && Q(D ? I[0] ?? null : null);
-		let i = o(e);
-		if (e.ctrlKey && !i || e.metaKey) return;
-		let { key: a, altKey: s } = e, l = r === "select-only", u = I[0] ?? null, d = I[I.length - 1] ?? null, f = (e) => {
-			Q(e), t || n(!0, "keyboard");
-		}, p = (e) => Q(te(I, J, e, x)), m = () => {
-			J === null ? c || n(!1, "keyboard") : $(J, "select");
+		se.current = e.nativeEvent, c === "editable" && t && ne(e) && X.setActiveValue(A ? U[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, {
+				reason: "keyboard",
+				event: e.nativeEvent
+			});
+		}, p = () => {
+			Z === null ? u || F?.(!1, {
+				reason: "keyboard",
+				event: e.nativeEvent
+			}) : $(Z, "select", e.nativeEvent);
 		};
-		switch (a) {
+		switch (r) {
 			case "ArrowDown":
-				e.preventDefault(), s ? t || n(!0, "keyboard") : t ? p(1) : f(K ?? u);
+				e.preventDefault(), i ? t || F?.(!0, {
+					reason: "keyboard",
+					event: e.nativeEvent
+				}) : t ? X.next() : f(q ?? l);
 				return;
 			case "ArrowUp":
-				if (e.preventDefault(), s) {
+				if (e.preventDefault(), i) {
 					if (!t) return;
-					l && !c && J !== null ? $(J, "select") : n(!1, "keyboard");
-				} else t ? p(-1) : f(K ?? d);
+					a && !u && Z !== null && !W.get(Z)?.disabled ? $(Z, "select", e.nativeEvent) : F?.(!1, {
+						reason: "keyboard",
+						event: e.nativeEvent
+					});
+				} else t ? X.prev() : f(q ?? d);
 				return;
 			case "Home":
 			case "End":
-				if (!l) return;
-				e.preventDefault(), f(a === "Home" ? u : d);
+				if (s) return;
+				e.preventDefault(), f(r === "Home" ? l : d);
 				return;
 			case "PageUp":
 			case "PageDown":
-				if (!l || !t) return;
-				e.preventDefault(), p(a === "PageDown" ? 10 : -10);
+				if (s || !t) return;
+				e.preventDefault(), X.move(r === "PageDown" ? 10 : -10);
 				return;
 			case "Enter":
-				if (!l) {
-					t && J !== null && (e.preventDefault(), $(J, "select"));
+				if (s) {
+					t && Z !== null && (e.preventDefault(), $(Z, "select", e.nativeEvent));
 					return;
 				}
-				e.preventDefault(), t ? m() : n(!0, "keyboard");
+				e.preventDefault(), t ? p() : F?.(!0, {
+					reason: "keyboard",
+					event: e.nativeEvent
+				});
 				return;
 			case "Escape":
-				t ? (e.preventDefault(), n(!1, "escape")) : !l && k && ne(e.currentTarget) && (e.preventDefault(), k());
+				t ? (e.preventDefault(), F?.(!1, {
+					reason: "escape",
+					event: e.nativeEvent
+				})) : s && N && te(e.currentTarget) && (e.preventDefault(), N());
 				return;
 			case "Tab":
 				if (!t) return;
-				l && !c && J !== null ? $(J, "tab") : n(!1, "tab");
+				a && !u && Z !== null && !W.get(Z)?.disabled ? $(Z, "tab", e.nativeEvent) : F?.(!1, {
+					reason: "tab",
+					event: e.nativeEvent
+				});
 				return;
 		}
-		if (a !== " " || l) {
-			if (!S || s && !i || a.length !== 1) {
-				a === " " && l && (e.preventDefault(), t ? m() : n(!0, "keyboard"));
+		if (!(r === " " && s)) {
+			if (!T || i && !n || r.length !== 1) {
+				r === " " && !s && (e.preventDefault(), t ? p() : F?.(!0, {
+					reason: "keyboard",
+					event: e.nativeEvent
+				}));
 				return;
 			}
-			if (le(e, t ? J : K)) {
+			if (ce(e, t ? Z : q)) {
 				e.preventDefault();
 				return;
 			}
-			if (a === " ") {
-				e.preventDefault(), t ? m() : n(!0, "keyboard");
+			if (r === " ") {
+				e.preventDefault(), t ? p() : F?.(!0, {
+					reason: "keyboard",
+					event: e.nativeEvent
+				});
 				return;
 			}
-			l && !t && (e.preventDefault(), n(!0, "keyboard"));
+			a && !t && (e.preventDefault(), F?.(!0, {
+				reason: "keyboard",
+				event: e.nativeEvent
+			}));
 		}
-	}), de = i((e) => {
-		r === "select-only" && e.key === " " && e.preventDefault();
+	}), ue = i((e) => {
+		c === "select-only" && e.key === " " && e.preventDefault();
 	});
-	return p(() => {
-		j.setRegistrationMode(!M), j.flush(), j.checkOrderAfterCommit(), j.setRenderState(J, B, z);
-	}), p(() => (j.connect(), () => j.disconnect()), [j]), p(() => {
-		let e = J !== null && J === Z.current;
-		Z.current = null, !(J === null || e) && (j.getElement(J) ?? (typeof document < "u" ? document.getElementById(Y(J)) : null))?.scrollIntoView?.({ block: "nearest" });
-	}, [
-		J,
-		Y,
-		j
-	]), f(() => {
-		if (!_) return;
+	m(() => {
+		R.setRegistrationMode(!z), R.flush(), R.checkOrderAfterCommit(), R.setRenderState(Z, K, G);
+	}), m(() => (R.connect(), () => R.disconnect()), [R]), p(() => {
+		if (!S) return;
 		let e = /* @__PURE__ */ new Set();
-		for (let t of _) e.has(t.value) && E(t.value), e.add(t.value);
-	}, [_]), {
-		listboxId: A,
-		activeValue: J,
-		activeDescendantId: X,
-		items: F,
-		getItem: ae,
+		for (let t of S) e.has(t.value) && D(t.value), e.add(t.value);
+	}, [S]);
+	let de = h(() => ({
+		listboxId: L,
+		store: R,
+		multiselect: u,
+		mode: c,
+		select: ae,
+		highlight: X.highlight,
+		press: oe
+	}), [
+		L,
+		R,
+		u,
+		c,
+		ae,
+		X.highlight,
+		oe
+	]);
+	return {
+		listboxId: L,
+		activeValue: Z,
+		activeDescendantId: Q,
+		items: H,
+		getItem: ie,
 		getOptionId: Y,
-		setActiveValue: oe,
-		onKeyDown: ue,
-		onKeyUp: de,
+		setActiveValue: X.setActiveValue,
+		onKeyDown: le,
+		onKeyUp: ue,
 		getComboboxProps: () => {
 			let e = {
 				role: "combobox",
 				"aria-expanded": t,
-				"aria-controls": A,
+				"aria-controls": L,
 				"aria-haspopup": "listbox"
 			};
-			return X !== void 0 && (e["aria-activedescendant"] = X), r === "editable" && (e["aria-autocomplete"] = "list"), e;
+			return Q !== void 0 && (e["aria-activedescendant"] = Q), c === "editable" && (e["aria-autocomplete"] = "list"), e;
 		},
 		getListboxProps: () => {
-			let e = {
-				id: A,
+			let e = P ? {
+				id: L,
+				role: "listbox",
+				tabIndex: 0,
+				ref: ee
+			} : {
+				id: L,
 				role: "listbox",
 				tabIndex: -1,
-				onMouseDown: ie
+				onMouseDown: re
 			};
-			return c && (e["aria-multiselectable"] = !0), e;
+			return P && Q !== void 0 && (e["aria-activedescendant"] = Q), u && (e["aria-multiselectable"] = !0), e;
 		},
-		context: m(() => ({
-			listboxId: A,
-			store: j,
-			select: se,
-			highlight: ce
-		}), [
-			A,
-			j,
-			se,
-			ce
-		])
+		context: de
 	};
 }
 var V = 1, H = 2, U = 4;
@@ -431,62 +468,65 @@ function W(e, t) {
 	return (e.isActive(t) ? V : 0) | (e.isSelected(t) ? H : 0) | (e.isHidden(t) ? U : 0);
 }
 function G(e, t) {
-	let { store: n, listboxId: r, select: i, highlight: a } = j("Option"), { value: o, label: s, textValue: l, disabled: d = !1, hidden: f = !1 } = e, m = `${r}-opt-${n.getIndex(o)}`, g = ee(n.subscribe, () => W(n, o), () => W(n, o)), _ = (g & V) !== 0, v = (g & H) !== 0, y = f || (g & U) !== 0, b = h(null), S = u((e) => {
-		b.current = e;
-	}, []), C = c(t, S), w = h(null);
-	p(() => {
-		let e = s === void 0 && l === void 0 ? b.current?.textContent?.trim() : void 0, t = {
-			value: o,
-			label: s ?? l ?? (e || o)
+	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);
+	m(() => {
+		let e = f === void 0 && p === void 0 ? T.current?.textContent?.trim() : void 0, t = {
+			value: u,
+			label: f ?? p ?? (e || u)
 		};
-		l !== void 0 && (t.textValue = l), d && (t.disabled = !0), f && (t.hidden = !0);
-		let r = w.current;
-		r && r.store === n && x(r.item, t) || (r?.unregister(), w.current = {
+		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 = {
 			store: n,
 			item: t,
-			unregister: n.register(t, b)
+			unregister: n.register(t, T)
 		});
-	}), p(() => () => {
-		w.current?.unregister(), w.current = null;
+	}), m(() => () => {
+		O.current?.unregister(), O.current = null;
 	}, []);
-	let T = {
-		id: m,
+	let k = d((e) => {
+		if (h) return;
+		let t = {
+			value: u,
+			label: f ?? p ?? u
+		};
+		p !== void 0 && (t.textValue = p), o(u, t, e.nativeEvent);
+	}, [
+		o,
+		u,
+		f,
+		p,
+		h
+	]), A = d(() => {
+		!h && !n.isActive(u) && s(u);
+	}, [
+		s,
+		n,
+		u,
+		h
+	]), j = d((e) => {
+		e.button === 0 && (e.preventDefault(), l(u));
+	}, [l, u]), N = {
+		id: y,
 		role: "option",
-		"aria-selected": v,
-		onClick: u(() => {
-			if (d) return;
-			let e = {
-				value: o,
-				label: s ?? l ?? o
-			};
-			l !== void 0 && (e.textValue = l), i(o, e);
-		}, [
-			i,
-			o,
-			s,
-			l,
-			d
-		]),
-		onPointerMove: u(() => {
-			!d && !n.isActive(o) && a(o);
-		}, [
-			a,
-			n,
-			o,
-			d
-		]),
-		ref: C
+		"aria-selected": S,
+		onClick: k,
+		onPointerMove: A,
+		ref: D
 	};
-	return d && (T["aria-disabled"] = !0, T["data-disabled"] = ""), y && (T.hidden = !0), _ && (T["data-active"] = ""), v && (T["data-selected"] = ""), {
-		id: m,
-		selected: v,
-		active: _,
-		disabled: d,
-		hidden: y,
-		optionProps: T
+	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,
+		multiselect: i,
+		optionProps: N
 	};
 }
 //#endregion
-export { O as ListboxContext, R as collectOptionLabels, N as markListboxElement, B as useListbox, G as useListboxOption };
+export { k as ListboxContext, R as collectOptionLabels, P as markListboxElement, B as useListbox, G as useListboxOption };
 
 //# sourceMappingURL=useListbox.mjs.map