@mortenbrudvik/waveui 0.9.0 → 0.11.0

package/dist/hooks/useRovingTabIndex.mjs

@@ -57,22 +57,37 @@ function _(e, t, n) {
 	for (let r = e; r && r !== t; r = r.parentElement) if (g(r, n)) return !0;
 	return !1;
 }
-function v(e) {
+var v = "[tabindex], [data-roving-value]";
+function y(e, t) {
+	try {
+		return e.matches(t);
+	} catch {
+		return !1;
+	}
+}
+function b(e) {
+	let t = /* @__PURE__ */ new Map();
+	for (let n of e) n.type === "attributes" && n.attributeName === "tabindex" && t.set(n.target, n);
+	let n = /* @__PURE__ */ new Set();
+	for (let [e, r] of t) r.oldValue === e.getAttribute("tabindex") && n.add(e);
+	return n;
+}
+function x(e) {
 	return e.tabIndex >= 0 && !e.hasAttribute("disabled");
 }
-function y(e) {
+function S(e) {
 	let { element: t } = e;
-	if (!e.nested || v(t)) return t;
+	if (!e.nested || x(t)) return t;
 	let n = t.querySelector("[tabindex=\"0\"]");
 	if (n) return n;
 	let r = o(t);
 	return r instanceof HTMLElement ? r : null;
 }
-function b(e) {
+function C(e) {
 	let t = e.getAttribute("data-roving-disabled");
-	return t !== null && t !== "false" || x(e) ? !0 : !e.hasAttribute("data-disabled-focusable") && e.getAttribute("aria-disabled") === "true";
+	return t !== null && t !== "false" || w(e) ? !0 : !e.hasAttribute("data-disabled-focusable") && e.getAttribute("aria-disabled") === "true";
 }
-function x(e) {
+function w(e) {
 	if (e.disabled === !0) return !0;
 	try {
 		return e.matches(":disabled");
@@ -80,7 +95,7 @@ function x(e) {
 		return !1;
 	}
 }
-function S(e) {
+function T(e) {
 	if (!e || e.nodeType !== 1) return !1;
 	let t = e, n = t.getAttribute("role");
 	if (n !== null && p.has(n)) return !0;
@@ -90,10 +105,10 @@ function S(e) {
 	let i = t.closest("[contenteditable]");
 	return i !== null && i.getAttribute("contenteditable") !== "false";
 }
-function C(e) {
-	return !e.nested && !S(e.element);
+function E(e) {
+	return !e.nested && !T(e.element);
 }
-function w(e, t, n) {
+function D(e, t, n) {
 	let r = e.ownerDocument.defaultView;
 	if (!r) return !1;
 	for (let i = e; i && i !== t; i = i.parentElement) {
@@ -118,14 +133,14 @@ function te(e) {
 		return !1;
 	}
 }
-function T(e) {
-	return [e.value, e.disabled ? 0 : C(e) ? 1 : 2];
+function O(e) {
+	return [e.value, e.disabled ? 0 : E(e) ? 1 : 2];
 }
-function E(e, t, n, r) {
+function k(e, t, n, r) {
 	let i = e.some(([, e]) => e === 1) ? 1 : 2, a = e.filter(([, e]) => e === i).map(([e]) => e);
 	return n === "last-focused" && r !== null && a.includes(r) ? r : t !== null && t !== "" && a.includes(t) ? t : a[0] ?? null;
 }
-function D(e, t) {
+function A(e, t) {
 	if (!t) return e;
 	let n = new Map(e.map((e) => [e.value, e])), r = [];
 	for (let e of t) {
@@ -134,7 +149,7 @@ function D(e, t) {
 	}
 	return r;
 }
-var O = class {
+var j = class {
 	container = null;
 	lastFocused = null;
 	options = {
@@ -155,20 +170,22 @@ var O = class {
 	subscribe = (e) => (this.notify = e, this.observe(), () => {
 		this.notify = null, this.disconnect();
 	});
-	getSnapshot = () => this.container ? (this.dirty && (this.dirty = !1, this.snapshot = JSON.stringify(this.resolveOwn().map(T))), this.snapshot) : "";
+	getSnapshot = () => this.container ? (this.dirty && (this.dirty = !1, this.snapshot = JSON.stringify(this.resolveOwn().map(O))), this.snapshot) : "";
 	getServerSnapshot = () => "";
 	setContainer(e) {
-		e !== this.container && (this.disconnect(), this.container = e, this.dirty = !0, this.notify && (this.observe(), this.notify()));
+		if (e === this.container) return;
+		let t = this.takeRecords();
+		this.disconnect(), this.container && this.options.manageTabIndex && this.release(this.container, "all", t), this.container = e, this.dirty = !0, this.notify && (this.observe(), this.notify());
 	}
 	recordFocus(e) {
-		C(e) && (this.lastFocused = e.value);
+		E(e) && (this.lastFocused = e.value);
 	}
 	setOptions(e) {
 		let t = this.options;
-		this.options = e, (t.itemSelector !== e.itemSelector || t.manageTabIndex !== e.manageTabIndex || t.roleComposites !== e.roleComposites) && (this.dirty = !0, this.notify?.());
+		this.options = e, t.manageTabIndex && !e.manageTabIndex && this.container && this.release(this.container, "all", this.takeRecords()), (t.itemSelector !== e.itemSelector || t.manageTabIndex !== e.manageTabIndex || t.roleComposites !== e.roleComposites) && (this.dirty = !0, this.notify?.());
 	}
 	resolve(e = this.container) {
-		return D(this.resolveOwn(e), this.options.items);
+		return A(this.resolveOwn(e), this.options.items);
 	}
 	resolveOwn(e = this.container) {
 		if (!e) return [];
@@ -192,39 +209,45 @@ var O = class {
 				value: this.valueOf(u, d),
 				element: u,
 				nested: d,
-				disabled: b(u)
+				disabled: C(u)
 			};
-			d && !f.disabled && !y(f) && (f.disabled = !0), n && !f.disabled && w(u, e, c) && (f.disabled = !0), a.push(f);
+			d && !f.disabled && !S(f) && (f.disabled = !0), n && !f.disabled && D(u, e, c) && (f.disabled = !0), a.push(f);
 		}
 		return a;
 	}
 	stamp() {
 		if (!this.options.manageTabIndex || !this.container) return;
-		this.release(this.container);
-		let e = this.resolve(), t = this.options.tabStop === "none" ? null : E(e.map(T), this.options.activeValue, this.options.tabStop, this.lastFocused);
+		this.release(this.container, "stale");
+		let e = this.resolve(), t = this.options.tabStop === "none" ? null : k(e.map(O), this.options.activeValue, this.options.tabStop, this.lastFocused);
 		for (let n of e) {
 			if (n.nested) continue;
-			let { element: e } = n, r = this.stamped.get(e);
-			r || (r = {
-				tabIndex: e.getAttribute("tabindex"),
-				addedValue: !e.hasAttribute("data-roving-value")
-			}, this.stamped.set(e, r));
-			let i = n.value === t ? "0" : "-1";
-			e.getAttribute("tabindex") !== i && e.setAttribute("tabindex", i), e.hasAttribute("data-roving-value") || e.setAttribute("data-roving-value", n.value);
+			let { element: e } = n, r = n.value === t ? "0" : "-1", i = e.getAttribute("tabindex"), a = this.stamped.get(e);
+			a ? (i !== a.stamped && (a.tabIndex = i), a.stamped = r) : (a = {
+				tabIndex: i,
+				stamped: r,
+				addedValue: null
+			}, this.stamped.set(e, a)), i !== r && e.setAttribute("tabindex", r), e.hasAttribute("data-roving-value") || (e.setAttribute("data-roving-value", n.value), a.addedValue = n.value);
 		}
 	}
-	release(e) {
-		let t;
-		try {
-			t = Array.from(e.querySelectorAll(this.options.itemSelector));
-		} catch {
-			return;
+	release(e, t, n = []) {
+		let r = b(n), { itemSelector: i, roleComposites: a } = this.options;
+		for (let n of Array.from(e.querySelectorAll(v))) {
+			let o = this.stamped.get(n);
+			if (!o || t === "stale" && y(n, i) && !_(n, e, a)) continue;
+			this.stamped.delete(n);
+			let s = n.getAttribute("tabindex");
+			!(s !== o.stamped || r.has(n)) && s !== o.tabIndex && (o.tabIndex === null ? n.removeAttribute("tabindex") : n.setAttribute("tabindex", o.tabIndex)), o.addedValue !== null && n.getAttribute("data-roving-value") === o.addedValue && n.removeAttribute("data-roving-value");
 		}
-		for (let n of t) {
-			let t = this.stamped.get(n);
-			t && _(n, e, this.options.roleComposites) && (this.stamped.delete(n), t.tabIndex === null ? n.removeAttribute("tabindex") : n.setAttribute("tabindex", t.tabIndex), t.addedValue && n.removeAttribute("data-roving-value"));
+	}
+	adopt(e) {
+		for (let t of b(e)) {
+			let e = this.stamped.get(t);
+			e && (e.tabIndex = t.getAttribute("tabindex"));
 		}
 	}
+	takeRecords() {
+		return this.observer?.takeRecords() ?? [];
+	}
 	valueOf(e, t) {
 		let n = t ? null : e.getAttribute("data-roving-value");
 		if (n !== null) return n;
@@ -232,12 +255,13 @@ var O = class {
 		return r === void 0 && (this.autoCounter += 1, r = `auto-${this.autoCounter}`, this.autoValues.set(e, r)), r;
 	}
 	observe() {
-		this.container && !this.observer && typeof MutationObserver < "u" && (this.observer = new MutationObserver(() => {
-			this.stamp(), this.dirty = !0, this.notify?.();
+		this.container && !this.observer && typeof MutationObserver < "u" && (this.observer = new MutationObserver((e) => {
+			this.adopt(e), this.stamp(), this.dirty = !0, this.notify?.();
 		}), this.observer.observe(this.container, {
 			subtree: !0,
 			childList: !0,
 			attributes: !0,
+			attributeOldValue: !0,
 			attributeFilter: h
 		}), this.dirty = !0);
 	}
@@ -245,7 +269,7 @@ var O = class {
 		this.observer?.disconnect(), this.observer = null;
 	}
 };
-function k(e) {
+function M(e) {
 	if (e === "") return null;
 	try {
 		return JSON.parse(e);
@@ -253,13 +277,13 @@ function k(e) {
 		return null;
 	}
 }
-function A(e) {
+function N(e) {
 	return e.getAttribute("data-roving-text") ?? e.textContent ?? "";
 }
-function j(e, t) {
+function P(e, t) {
 	return !t || typeof t.nodeType != "number" ? !1 : t === e || e.contains(t);
 }
-function M(e, t, n) {
+function F(e, t, n) {
 	if (e.length === 0 || !t || typeof t.nodeType != "number") return null;
 	let r = new Map(e.map((e) => [e.element, e]));
 	for (let e = t; e && e !== n; e = e.parentNode) {
@@ -268,24 +292,24 @@ function M(e, t, n) {
 	}
 	return null;
 }
-function N(e, t, n) {
-	return e ? t === y(e) : t === n;
+function I(e, t, n) {
+	return e ? t === S(e) : t === n;
 }
-function P(o, s) {
-	let f = s === void 0 ? void 0 : o, { activeValue: p = null, items: m, orientation: h = "horizontal", loop: g = !0, dir: _, itemSelector: v = d, typeahead: b = !1, homeEndKeys: x = !0, tabStop: w = "active", manageTabIndex: T = !1, onFocusMove: D } = s ?? o, [P] = u.useState(() => new O()), F = u.useSyncExternalStore(P.subscribe, P.getSnapshot, P.getServerSnapshot), [I, L] = u.useState(null), [R, z] = u.useState(null), B = f === void 0 && m === void 0;
+function L(o, s) {
+	let f = s === void 0 ? void 0 : o, { activeValue: p = null, items: m, orientation: h = "horizontal", loop: g = !0, dir: _, itemSelector: v = d, typeahead: y = !1, homeEndKeys: b = !0, tabStop: x = "active", manageTabIndex: C = !1, onFocusMove: w } = s ?? o, [D] = u.useState(() => new j()), O = u.useSyncExternalStore(D.subscribe, D.getSnapshot, D.getServerSnapshot), [A, L] = u.useState(null), [R, z] = u.useState(null), B = f === void 0 && m === void 0;
 	u.useLayoutEffect(() => {
-		P.setOptions({
+		D.setOptions({
 			itemSelector: v,
-			manageTabIndex: T,
+			manageTabIndex: C,
 			items: m,
 			activeValue: p,
-			tabStop: w,
+			tabStop: x,
 			roleComposites: B
-		}), f && P.setContainer(f.current), P.stamp();
+		}), f && D.setContainer(f.current), D.stamp();
 	}), u.useEffect(() => {
 		e && !te(v) && t(`useRovingTabIndex:itemSelector:${v}`, `useRovingTabIndex: itemSelector "${v}" is not a valid CSS selector in this browser; no item is navigable or tabbable.`);
 	}, [v]);
-	let V = u.useMemo(() => k(F), [F]), H = u.useMemo(() => {
+	let V = u.useMemo(() => M(O), [O]), H = u.useMemo(() => {
 		if (!m) return V;
 		if (V) {
 			let e = new Map(V), t = m.flatMap((t) => {
@@ -295,27 +319,27 @@ function P(o, s) {
 			if (t.length > 0) return t;
 		}
 		return m.map((e) => [e, 1]);
-	}, [m, V]), U = w === "none" ? null : H ? E(H, p, w, R) : p || null, W = u.useCallback((e) => e === U ? 0 : -1, [U]), G = u.useCallback((e) => {
-		P.setContainer(e), f && n(f, e);
-	}, [P, f]), K = u.useRef([]), q = u.useRef([]), { onTypeahead: ne, isSearching: re } = l({
+	}, [m, V]), U = x === "none" ? null : H ? k(H, p, x, R) : p || null, W = u.useCallback((e) => e === U ? 0 : -1, [U]), G = u.useCallback((e) => {
+		D.setContainer(e), f && n(f, e);
+	}, [D, f]), K = u.useRef([]), q = u.useRef([]), { onTypeahead: ne, isSearching: re } = l({
 		getItems: () => K.current,
 		onMatch: (e, t) => {
 			q.current = t;
 		}
 	}), J = (e) => {
 		if (!e || e.disabled) return !1;
-		let t = y(e);
-		return !t || (t.focus(), !ee(t)) ? !1 : (P.recordFocus(e), !0);
+		let t = S(e);
+		return !t || (t.focus(), !ee(t)) ? !1 : (D.recordFocus(e), !0);
 	}, Y = (e) => {
 		for (let t of e) if (J(t)) return;
 	}, X = r((e, t) => {
 		let n = e.metaKey || (e.altKey || e.ctrlKey) && !c(e);
-		if (e.defaultPrevented || n || S(e.target)) return;
-		let r = P.container ?? e.currentTarget;
-		if (!j(r, e.target)) return;
-		let o = P.resolve(r), s = o.filter((e) => !e.disabled);
+		if (e.defaultPrevented || n || T(e.target)) return;
+		let r = D.container ?? e.currentTarget;
+		if (!P(r, e.target)) return;
+		let o = D.resolve(r), s = o.filter((e) => !e.disabled);
 		if (s.length === 0) return;
-		let l = M(o, e.target, r), u = !1, d = [], f = t ? null : i(e.key, {
+		let l = F(o, e.target, r), u = !1, d = [], f = t ? null : i(e.key, {
 			orientation: h,
 			dir: _ ?? a(e.currentTarget)
 		});
@@ -331,9 +355,9 @@ function P(o, s) {
 					o[n].disabled || d.push(o[n]);
 				}
 			}
-		} else !t && x && (e.key === "Home" || e.key === "End") ? (u = !0, d = e.key === "Home" ? s : [...s].reverse()) : b && N(l, e.target, r) && (K.current = o.map((e) => ({
+		} else !t && b && (e.key === "Home" || e.key === "End") ? (u = !0, d = e.key === "Home" ? s : [...s].reverse()) : y && I(l, e.target, r) && (K.current = o.map((e) => ({
 			value: e.value,
-			text: A(e.element),
+			text: N(e.element),
 			disabled: e.disabled
 		})), q.current = [], ne(e, l?.value ?? null) && (u = !0, d = q.current.flatMap((e) => s.filter((t) => t.value === e))));
 		if (u) {
@@ -341,24 +365,24 @@ function P(o, s) {
 			for (let t of d) {
 				if (t === l) return;
 				if (J(t)) {
-					D?.(t.value, e);
+					w?.(t.value, e);
 					return;
 				}
 			}
 		}
 	}), Z = r((e) => X(e, !1)), Q = r((e) => {
-		b && e.key === " " && re() && X(e, !0);
+		y && e.key === " " && re() && X(e, !0);
 	}), $ = r((e) => {
-		let t = P.container ?? e.currentTarget;
-		if (!j(t, e.target)) return;
-		let n = M(P.resolve(t), e.target, t);
-		n && (P.recordFocus(n), L(n.value), C(n) && z(n.value), P.stamp());
+		let t = D.container ?? e.currentTarget;
+		if (!P(t, e.target)) return;
+		let n = F(D.resolve(t), e.target, t);
+		n && (D.recordFocus(n), L(n.value), E(n) && z(n.value), D.stamp());
 	}), ie = r((e) => {
-		J(P.resolve().find((t) => t.value === e));
+		J(D.resolve().find((t) => t.value === e));
 	}), ae = r(() => {
-		Y(P.resolve().filter((e) => !e.disabled));
+		Y(D.resolve().filter((e) => !e.disabled));
 	}), oe = r(() => {
-		Y(P.resolve().filter((e) => !e.disabled).reverse());
+		Y(D.resolve().filter((e) => !e.disabled).reverse());
 	});
 	return {
 		containerProps: u.useMemo(() => ({
@@ -377,13 +401,13 @@ function P(o, s) {
 		handleKeyDownCapture: Q,
 		handleFocus: $,
 		getTabIndex: W,
-		focusedValue: I,
+		focusedValue: A,
 		focusValue: ie,
 		focusFirst: ae,
 		focusLast: oe
 	};
 }
 //#endregion
-export { w as isHiddenByCss, P as useRovingTabIndex };
+export { D as isHiddenByCss, L as useRovingTabIndex };
 
 //# sourceMappingURL=useRovingTabIndex.mjs.map