@mortenbrudvik/waveui 0.10.0 → 0.12.0

package/dist/hooks/useRovingTabIndex.mjs

@@ -7,7 +7,37 @@ import { getFirstTabbable as o, isHiddenInput as s } from "../lib/focus.mjs";
 import { isAltGraphCharacter as c, useTypeahead as l } from "./useTypeahead.mjs";
 import * as u from "react";
 //#region src/hooks/useRovingTabIndex.ts
-var d = "[data-roving-value]", f = /* @__PURE__ */ new Set([
+function d(e, t, n) {
+	let r = t.querySelectorAll("[role=\"row\"]");
+	if (r.length > 0) return Array.from(r).map((t) => e.filter((e) => t.contains(e.element)));
+	if (n !== void 0 && n > 0) {
+		let t = [];
+		for (let r = 0; r < e.length; r += n) t.push(e.slice(r, r + n));
+		return t;
+	}
+	return null;
+}
+function f(e, t, n) {
+	let r = e.key === "ArrowUp" || e.key === "ArrowDown", i = e.key === "Home" || e.key === "End";
+	if (!n || !r && !i) return;
+	let a = t.findIndex((e) => e.includes(n));
+	if (a < 0) return;
+	if (i) {
+		let r = (e.ctrlKey ? t.flat() : t[a]).filter((e) => !e.disabled), i = e.key === "Home" ? r[0] : r[r.length - 1];
+		return i && i !== n ? [i] : "stay";
+	}
+	let o = t[a].indexOf(n), s = e.key === "ArrowDown" ? 1 : -1;
+	for (let e = a + s; e >= 0 && e < t.length; e += s) {
+		let n, r = Infinity;
+		if (t[e].forEach((e, t) => {
+			if (e.disabled) return;
+			let i = Math.abs(t - o);
+			i < r && (n = e, r = i);
+		}), n) return [n];
+	}
+	return "stay";
+}
+var p = "[data-roving-value]", m = /* @__PURE__ */ new Set([
 	"radiogroup",
 	"listbox",
 	"grid",
@@ -17,12 +47,12 @@ var d = "[data-roving-value]", f = /* @__PURE__ */ new Set([
 	"menubar",
 	"tree",
 	"spinbutton"
-]), p = /* @__PURE__ */ new Set([
+]), h = /* @__PURE__ */ new Set([
 	"slider",
 	"spinbutton",
 	"textbox",
 	"searchbox"
-]), m = /* @__PURE__ */ new Set([
+]), g = /* @__PURE__ */ new Set([
 	"button",
 	"checkbox",
 	"color",
@@ -32,7 +62,7 @@ var d = "[data-roving-value]", f = /* @__PURE__ */ new Set([
 	"radio",
 	"reset",
 	"submit"
-]), h = [
+]), _ = [
 	"disabled",
 	"aria-disabled",
 	"data-disabled-focusable",
@@ -47,32 +77,47 @@ var d = "[data-roving-value]", f = /* @__PURE__ */ new Set([
 	"type",
 	"contenteditable"
 ];
-function g(e, t) {
+function v(e, t) {
 	if (e.hasAttribute("data-roving-container")) return !0;
 	if (!t || e.hasAttribute("data-roving-transparent")) return !1;
 	let n = e.getAttribute("role");
-	return n !== null && f.has(n);
+	return n !== null && m.has(n);
 }
-function _(e, t, n) {
-	for (let r = e; r && r !== t; r = r.parentElement) if (g(r, n)) return !0;
+function y(e, t, n) {
+	for (let r = e; r && r !== t; r = r.parentElement) if (v(r, n)) return !0;
 	return !1;
 }
-function v(e) {
+var b = "[tabindex], [data-roving-value]";
+function x(e, t) {
+	try {
+		return e.matches(t);
+	} catch {
+		return !1;
+	}
+}
+function S(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 C(e) {
 	return e.tabIndex >= 0 && !e.hasAttribute("disabled");
 }
-function y(e) {
+function w(e) {
 	let { element: t } = e;
-	if (!e.nested || v(t)) return t;
+	if (!e.nested || C(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 T(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" || E(e) ? !0 : !e.hasAttribute("data-disabled-focusable") && e.getAttribute("aria-disabled") === "true";
 }
-function x(e) {
+function E(e) {
 	if (e.disabled === !0) return !0;
 	try {
 		return e.matches(":disabled");
@@ -80,20 +125,20 @@ function x(e) {
 		return !1;
 	}
 }
-function S(e) {
+function D(e) {
 	if (!e || e.nodeType !== 1) return !1;
 	let t = e, n = t.getAttribute("role");
-	if (n !== null && p.has(n)) return !0;
+	if (n !== null && h.has(n)) return !0;
 	let r = t.localName;
 	if (r === "textarea" || r === "select") return !0;
-	if (r === "input") return !m.has(t.type);
+	if (r === "input") return !g.has(t.type);
 	let i = t.closest("[contenteditable]");
 	return i !== null && i.getAttribute("contenteditable") !== "false";
 }
-function C(e) {
-	return !e.nested && !S(e.element);
+function O(e) {
+	return !e.nested && !D(e.element);
 }
-function w(e, t, n) {
+function k(e, t, n) {
 	let r = e.ownerDocument.defaultView;
 	if (!r) return !1;
 	for (let i = e; i && i !== t; i = i.parentElement) {
@@ -118,14 +163,14 @@ function te(e) {
 		return !1;
 	}
 }
-function T(e) {
-	return [e.value, e.disabled ? 0 : C(e) ? 1 : 2];
+function A(e) {
+	return [e.value, e.disabled ? 0 : O(e) ? 1 : 2];
 }
-function E(e, t, n, r) {
+function j(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 M(e, t) {
 	if (!t) return e;
 	let n = new Map(e.map((e) => [e.value, e])), r = [];
 	for (let e of t) {
@@ -134,11 +179,11 @@ function D(e, t) {
 	}
 	return r;
 }
-var O = class {
+var N = class {
 	container = null;
 	lastFocused = null;
 	options = {
-		itemSelector: d,
+		itemSelector: p,
 		manageTabIndex: !1,
 		items: void 0,
 		activeValue: null,
@@ -155,20 +200,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(A))), 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);
+		O(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 M(this.resolveOwn(e), this.options.items);
 	}
 	resolveOwn(e = this.container) {
 		if (!e) return [];
@@ -181,7 +228,7 @@ var O = class {
 		let a = [], o = /* @__PURE__ */ new Set(), c = /* @__PURE__ */ new Map();
 		for (let t of i) {
 			let i = null, l = !1;
-			for (let n = t; n && n !== e; n = n.parentElement) g(n, r) && (i = n), (n.hidden || n.hasAttribute("inert")) && (l = !0);
+			for (let n = t; n && n !== e; n = n.parentElement) v(n, r) && (i = n), (n.hidden || n.hasAttribute("inert")) && (l = !0);
 			if (l) continue;
 			let u = i ?? t;
 			if (o.has(u)) continue;
@@ -192,39 +239,45 @@ var O = class {
 				value: this.valueOf(u, d),
 				element: u,
 				nested: d,
-				disabled: b(u)
+				disabled: T(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 && !w(f) && (f.disabled = !0), n && !f.disabled && k(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 : j(e.map(A), 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 = S(n), { itemSelector: i, roleComposites: a } = this.options;
+		for (let n of Array.from(e.querySelectorAll(b))) {
+			let o = this.stamped.get(n);
+			if (!o || t === "stale" && x(n, i) && !y(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 S(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,20 +285,21 @@ 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,
-			attributeFilter: h
+			attributeOldValue: !0,
+			attributeFilter: _
 		}), this.dirty = !0);
 	}
 	disconnect() {
 		this.observer?.disconnect(), this.observer = null;
 	}
 };
-function k(e) {
+function P(e) {
 	if (e === "") return null;
 	try {
 		return JSON.parse(e);
@@ -253,13 +307,13 @@ function k(e) {
 		return null;
 	}
 }
-function A(e) {
+function F(e) {
 	return e.getAttribute("data-roving-text") ?? e.textContent ?? "";
 }
-function j(e, t) {
+function I(e, t) {
 	return !t || typeof t.nodeType != "number" ? !1 : t === e || e.contains(t);
 }
-function M(e, t, n) {
+function L(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,97 +322,102 @@ function M(e, t, n) {
 	}
 	return null;
 }
-function N(e, t, n) {
-	return e ? t === y(e) : t === n;
+function R(e, t, n) {
+	return e ? t === w(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 z(o, s) {
+	let m = s === void 0 ? void 0 : o, { activeValue: h = null, items: g, orientation: _ = "horizontal", columns: v, loop: y = !0, dir: b, itemSelector: x = p, typeahead: S = !1, homeEndKeys: C = !0, tabStop: T = "active", manageTabIndex: E = !1, onFocusMove: k } = s ?? o, [A] = u.useState(() => new N()), M = u.useSyncExternalStore(A.subscribe, A.getSnapshot, A.getServerSnapshot), [z, B] = u.useState(null), [V, ne] = u.useState(null), re = m === void 0 && g === void 0;
 	u.useLayoutEffect(() => {
-		P.setOptions({
-			itemSelector: v,
-			manageTabIndex: T,
-			items: m,
-			activeValue: p,
-			tabStop: w,
-			roleComposites: B
-		}), f && P.setContainer(f.current), P.stamp();
+		A.setOptions({
+			itemSelector: x,
+			manageTabIndex: E,
+			items: g,
+			activeValue: h,
+			tabStop: T,
+			roleComposites: re
+		}), m && A.setContainer(m.current), A.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(() => {
-		if (!m) return V;
-		if (V) {
-			let e = new Map(V), t = m.flatMap((t) => {
+		e && !te(x) && t(`useRovingTabIndex:itemSelector:${x}`, `useRovingTabIndex: itemSelector "${x}" is not a valid CSS selector in this browser; no item is navigable or tabbable.`);
+	}, [x]), u.useEffect(() => {
+		if (!e || _ !== "grid" || v) return;
+		let n = A.container;
+		n && n.querySelector("[role=\"row\"]") === null && t("useRovingTabIndex:grid-rows", "useRovingTabIndex: orientation \"grid\" needs role=\"row\" elements around the items or a `columns` count; without either it acts as \"both\".");
+	});
+	let H = u.useMemo(() => P(M), [M]), U = u.useMemo(() => {
+		if (!g) return H;
+		if (H) {
+			let e = new Map(H), t = g.flatMap((t) => {
 				let n = e.get(t);
 				return n === void 0 ? [] : [[t, n]];
 			});
 			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({
+		return g.map((e) => [e, 1]);
+	}, [g, H]), W = T === "none" ? null : U ? j(U, h, T, V) : h || null, ie = u.useCallback((e) => e === W ? 0 : -1, [W]), G = u.useCallback((e) => {
+		A.setContainer(e), m && n(m, e);
+	}, [A, m]), K = u.useRef([]), q = u.useRef([]), { onTypeahead: ae, isSearching: oe } = 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 = w(e);
+		return !t || (t.focus(), !ee(t)) ? !1 : (A.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 (s.length === 0) return;
-		let l = M(o, e.target, r), u = !1, d = [], f = t ? null : i(e.key, {
-			orientation: h,
-			dir: _ ?? a(e.currentTarget)
+		let n = _ === "grid" && e.ctrlKey && !e.altKey && (e.key === "Home" || e.key === "End"), r = e.metaKey || (e.altKey || e.ctrlKey) && !c(e) && !n;
+		if (e.defaultPrevented || r || D(e.target)) return;
+		let o = A.container ?? e.currentTarget;
+		if (!I(o, e.target)) return;
+		let s = A.resolve(o), l = s.filter((e) => !e.disabled);
+		if (l.length === 0) return;
+		let u = L(s, e.target, o), p = !1, m = [], h = _ === "grid" && !t ? d(s, o, v) : null, g = h ? f(e, h, u) : void 0, x = t || g ? null : i(e.key, {
+			orientation: _ === "grid" ? h ? "horizontal" : "both" : _,
+			dir: b ?? a(e.currentTarget)
 		});
-		if (f) {
-			if (u = !0, !l) d = f === "next" ? s : [...s].reverse();
+		if (g) p = !0, m = g === "stay" ? [] : g;
+		else if (x) {
+			if (p = !0, !u) m = x === "next" ? l : [...l].reverse();
 			else {
-				let e = f === "next" ? 1 : -1, t = o.length, n = o.indexOf(l);
+				let e = x === "next" ? 1 : -1, t = s.length, n = s.indexOf(u);
 				for (let r = 1; r < t; r++) {
 					if (n += e, n < 0 || n >= t) {
-						if (!g) break;
+						if (!y) break;
 						n = (n + t) % t;
 					}
-					o[n].disabled || d.push(o[n]);
+					s[n].disabled || m.push(s[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 && C && (e.key === "Home" || e.key === "End") ? (p = !0, m = e.key === "Home" ? l : [...l].reverse()) : S && R(u, e.target, o) && (K.current = s.map((e) => ({
 			value: e.value,
-			text: A(e.element),
+			text: F(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) {
+		})), q.current = [], ae(e, u?.value ?? null) && (p = !0, m = q.current.flatMap((e) => l.filter((t) => t.value === e))));
+		if (p) {
 			e.preventDefault();
-			for (let t of d) {
-				if (t === l) return;
+			for (let t of m) {
+				if (t === u) return;
 				if (J(t)) {
-					D?.(t.value, e);
+					k?.(t.value, e);
 					return;
 				}
 			}
 		}
 	}), Z = r((e) => X(e, !1)), Q = r((e) => {
-		b && e.key === " " && re() && X(e, !0);
+		S && e.key === " " && oe() && 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());
-	}), ie = r((e) => {
-		J(P.resolve().find((t) => t.value === e));
-	}), ae = r(() => {
-		Y(P.resolve().filter((e) => !e.disabled));
-	}), oe = r(() => {
-		Y(P.resolve().filter((e) => !e.disabled).reverse());
+		let t = A.container ?? e.currentTarget;
+		if (!I(t, e.target)) return;
+		let n = L(A.resolve(t), e.target, t);
+		n && (A.recordFocus(n), B(n.value), O(n) && ne(n.value), A.stamp());
+	}), se = r((e) => {
+		J(A.resolve().find((t) => t.value === e));
+	}), ce = r(() => {
+		Y(A.resolve().filter((e) => !e.disabled));
+	}), le = r(() => {
+		Y(A.resolve().filter((e) => !e.disabled).reverse());
 	});
 	return {
 		containerProps: u.useMemo(() => ({
@@ -376,14 +435,14 @@ function P(o, s) {
 		handleKeyDown: Z,
 		handleKeyDownCapture: Q,
 		handleFocus: $,
-		getTabIndex: W,
-		focusedValue: I,
-		focusValue: ie,
-		focusFirst: ae,
-		focusLast: oe
+		getTabIndex: ie,
+		focusedValue: z,
+		focusValue: se,
+		focusFirst: ce,
+		focusLast: le
 	};
 }
 //#endregion
-export { w as isHiddenByCss, P as useRovingTabIndex };
+export { k as isHiddenByCss, z as useRovingTabIndex };
 
 //# sourceMappingURL=useRovingTabIndex.mjs.map