@mortenbrudvik/waveui 0.7.0 → 0.9.0

package/dist/components/overlays/Popover.mjs

@@ -3,28 +3,28 @@ import { cn as e } from "../../lib/cn.mjs";
 import { isDev as t, reportMissingContext as n, warnOnce as r } from "../../lib/dev.mjs";
 import { slotRendersContent as ee } from "../../lib/slot.mjs";
 import { composeEventHandlers as i } from "../../lib/composeEventHandlers.mjs";
-import { useEventCallback as a } from "../../hooks/useEventCallback.mjs";
-import { useControllable as o } from "../../hooks/useControllable.mjs";
-import { useId as s } from "../../hooks/useId.mjs";
-import { focusElement as c, getFirstTabbable as l, isConnectedAndFocusable as u } from "../../lib/focus.mjs";
+import { popoverContentClassNames as a } from "../../lib/classNames.mjs";
+import { useEventCallback as o } from "../../hooks/useEventCallback.mjs";
+import { useControllable as s } from "../../hooks/useControllable.mjs";
+import { useId as c } from "../../hooks/useId.mjs";
+import { focusElement as te, getFirstTabbable as l, isConnectedAndFocusable as u } from "../../lib/focus.mjs";
 import { useMergedRefs as d } from "../../hooks/useMergedRefs.mjs";
 import { useIsClient as f } from "../../hooks/useIsClient.mjs";
-import { getLayerTreeElements as p } from "../../lib/layers.mjs";
-import { useDismiss as te } from "../../hooks/useDismiss.mjs";
-import { Portal as m } from "../portal/Portal.mjs";
-import { usePopupPosition as h } from "../../hooks/usePopupPosition.mjs";
-import { useRestoreFocus as g } from "../../hooks/useRestoreFocus.mjs";
-import { getTriggerFocusTarget as _, useTriggerElement as ne, useTriggerFocusRef as v } from "../../hooks/useTriggerElement.mjs";
-import { useHoverIntent as y } from "../../hooks/useHoverIntent.mjs";
-import { useContextMenuAnchor as b } from "../../hooks/useContextMenuAnchor.mjs";
-import { PopoverBeak as re, getTabbableThrough as x, usePopoverTabOrder as S } from "./Popover.shared.mjs";
+import { useDismiss as ne } from "../../hooks/useDismiss.mjs";
+import { Portal as p } from "../portal/Portal.mjs";
+import { usePopupPosition as re } from "../../hooks/usePopupPosition.mjs";
+import { useRestoreFocus as m } from "../../hooks/useRestoreFocus.mjs";
+import { useHoverIntent as h } from "../../hooks/useHoverIntent.mjs";
+import { PopoverBeak as g, getTabbableThrough as _, isFocusInSurfaceTree as v, usePopoverTabOrder as y } from "./Popover.shared.mjs";
+import { getTriggerFocusTarget as b, useTriggerElement as x, useTriggerFocusRef as S } from "../../hooks/useTriggerElement.mjs";
+import { useContextMenuAnchor as ie } from "../../hooks/useContextMenuAnchor.mjs";
 import * as C from "react";
 import { jsx as w, jsxs as T } from "react/jsx-runtime";
 //#region src/components/overlays/Popover.tsx
 var E = C.createContext(null);
 E.displayName = "PopoverContext";
 var D = null;
-function ie() {
+function O() {
 	return D ??= {
 		open: !1,
 		setOpen: () => {},
@@ -57,17 +57,17 @@ function ie() {
 		placedSide: "bottom"
 	}, D;
 }
-function O(e) {
-	return C.useContext(E) || (n(e, "Popover"), ie());
+function k(e) {
+	return C.useContext(E) || (n(e, "Popover"), O());
 }
-function k(e, t) {
+function A(e, t) {
 	let n = (t ?? "").split(/\s+/).filter((t) => t && e.getElementById(t));
 	return n.length > 0 ? n.join(" ") : void 0;
 }
-function A(e, t) {
+function j(e, t) {
 	if (!e) return t;
-	let n = e.ownerDocument, r = (t ? n.getElementById(t) : null) ?? _(e) ?? e;
-	return k(n, r.getAttribute("aria-labelledby")) ?? (r.id || e.id || void 0);
+	let n = e.ownerDocument, r = (t ? n.getElementById(t) : null) ?? b(e) ?? e;
+	return A(n, r.getAttribute("aria-labelledby")) ?? (r.id || e.id || void 0);
 }
 function ae(e, t) {
 	return t.split(/\s+/).some((t) => {
@@ -76,182 +76,178 @@ function ae(e, t) {
 	});
 }
 var oe = () => () => {};
-function j(e, t) {
-	let n = e?.ownerDocument.activeElement;
-	return !e || !n ? !1 : e.contains(n) ? !0 : p(t, { includeOwnElements: !1 }).some((e) => e.contains(n));
-}
-function se(e) {
+function M(e) {
 	return !!e && typeof e.nodeType == "number";
 }
-function M(e) {
+function se(e) {
 	return { get current() {
 		return e();
 	} };
 }
 function ce(e, t, n) {
-	return _(e) ?? x(e, t, n);
+	return b(e) ?? _(e, t, n);
 }
-var N = ({ open: e, defaultOpen: t, onOpenChange: n, side: ee = "bottom", align: i = "start", ignoreOutsideRefs: p, openOnHover: m = !1, openDelay: ne = 250, closeDelay: re = 500, openOnContext: x = !1, target: T, children: D }) => {
-	let [ie, O] = o(e, t ?? !1, n), k = C.useRef(!1), A = a((e) => {
-		k.current = !1, O(e);
-	}), ae = C.useCallback(() => k.current, []), oe = f(), N = ie && oe, [P, F] = C.useState("other"), [I, L] = C.useState(!1), [le, R] = C.useState(N), z = P;
-	N !== le && (R(N), N && (z = I ? "hover" : "other")), z !== P && F(z), I && L(!1);
-	let B = s("popover-content"), [ue, V] = C.useState(void 0), H = ue ?? B, U = s("popover-trigger"), [de, fe] = C.useState(void 0), [W, pe] = C.useState(null), [G, me] = C.useState(null), K = C.useRef(null), q = C.useRef(null), he = C.useRef(null), ge = se(T) ? T : null, J = C.useRef(null);
+var N = ({ open: e, defaultOpen: t, onOpenChange: n, side: ee = "bottom", align: i = "start", ignoreOutsideRefs: a, openOnHover: p = !1, openDelay: g = 250, closeDelay: _ = 500, openOnContext: x = !1, target: T, children: D }) => {
+	let [O, k] = s(e, t ?? !1, n), A = C.useRef(!1), j = o((e) => {
+		A.current = !1, k(e);
+	}), ae = C.useCallback(() => A.current, []), oe = f(), N = O && oe, [P, F] = C.useState("other"), [I, L] = C.useState(!1), [R, le] = C.useState(N), z = P;
+	N !== R && (le(N), N && (z = I ? "hover" : "other")), z !== P && F(z), I && L(!1);
+	let B = c("popover-content"), [V, ue] = C.useState(void 0), H = V ?? B, de = c("popover-trigger"), [U, fe] = C.useState(void 0), [W, pe] = C.useState(null), [G, me] = C.useState(null), K = C.useRef(null), q = C.useRef(null), he = C.useRef(null), ge = M(T) ? T : null, J = C.useRef(null);
 	C.useInsertionEffect(() => {
 		J.current = ge;
 	}, [ge]);
-	let { setReference: _e, setFloating: ve, floatingProps: ye, arrowStyles: be, side: xe } = h({
+	let { setReference: _e, setFloating: ve, floatingProps: ye, arrowStyles: be, side: xe } = re({
 		open: N,
 		side: ee,
 		align: i,
 		offset: 8,
 		arrowRef: he
-	}), Se = C.useRef(null), Ce = a(() => {
+	}), Se = C.useRef(null), Y = o(() => {
 		let e = x ? Se.current?.current : null;
 		if (e && u(e)) return e;
-		let t = K.current, n = t ? _(t) : null;
+		let t = K.current, n = t ? b(t) : null;
 		if (n) return n;
 		let r = J.current;
 		return r && u(r) ? r : t;
-	}), we = C.useMemo(() => M(Ce), [Ce]), Te = a((e) => !(e.ctrlKey && K.current?.contains(e.target))), { layerId: Y } = te({
+	}), Ce = C.useMemo(() => se(Y), [Y]), we = o((e) => !(e.ctrlKey && K.current?.contains(e.target))), { layerId: X } = ne({
 		open: N,
-		onDismiss: () => A(!1),
+		onDismiss: () => j(!1),
 		refs: x ? [
 			q,
 			J,
-			...p ?? []
+			...a ?? []
 		] : [
 			q,
 			K,
 			J,
-			...p ?? []
+			...a ?? []
 		],
-		anchorRef: we,
+		anchorRef: Ce,
 		kind: "popover",
-		outsidePress: !x || Te
-	}), X = C.useRef(!1), { anchor: Ee, fromContext: De, origin: Oe, opener: Z, triggerHandlers: ke, surfaceHandlers: Ae } = b({
+		outsidePress: !x || we
+	}), Z = C.useRef(!1), { anchor: Te, fromContext: Ee, origin: De, opener: Q, triggerHandlers: Oe, surfaceHandlers: ke } = ie({
 		enabled: x,
 		open: N,
 		trigger: G,
-		layerId: Y,
+		layerId: X,
 		onOpen: (e) => {
-			X.current = e === "keyboard", A(!0);
+			Z.current = e === "keyboard", j(!0);
 		},
-		onClose: () => A(!1)
+		onClose: () => j(!1)
 	});
 	C.useInsertionEffect(() => {
-		Se.current = Z;
-	}, [Z]);
-	let je = v(K);
-	g({
+		Se.current = Q;
+	}, [Q]);
+	let Ae = S(K);
+	m({
 		enabled: N,
 		container: W,
-		triggerRef: x ? void 0 : je,
-		finalFocusRef: x ? Z : void 0,
-		fallback: Ce,
+		triggerRef: x ? void 0 : Ae,
+		finalFocusRef: x ? Q : void 0,
+		fallback: Y,
 		onlyIfFocusInside: !0,
 		isHoverClose: ae
 	}), C.useLayoutEffect(() => {
-		N && (k.current = !1);
+		N && (A.current = !1);
 	}, [N]);
-	let Me = d(K, me), Ne = d(q, pe, ve);
+	let je = d(K, me), Me = d(q, pe, ve);
 	C.useLayoutEffect(() => {
-		_e(De ? Ee ?? (G && (_(G) ?? G)) : T ?? G);
+		_e(Ee ? Te ?? (G && (b(G) ?? G)) : T ?? G);
 	}, [
+		Te,
 		Ee,
-		De,
 		T,
 		G,
 		_e
 	]), C.useLayoutEffect(() => {
-		if (X.current) {
+		if (Z.current) {
 			if (!N) {
-				X.current = !1;
+				Z.current = !1;
 				return;
 			}
-			W && (X.current = !1, c(l(W) ?? W, { preventScroll: !0 }));
+			W && (Z.current = !1, te(l(W) ?? W, { preventScroll: !0 }));
 		}
 	}), C.useEffect(() => {
-		m && x && r("Popover:hover-and-context", "Popover: `openOnHover` is ignored with `openOnContext`: a context popover opens on a right click, Shift+F10 or the ContextMenu key, not on hover.");
-	}, [m, x]);
-	let Q = m && !x, Pe = a(() => z === "hover" && !j(q.current, Y)), { triggerHandlers: Fe, surfaceHandlers: Ie, cancel: Le } = y({
-		enabled: Q,
+		p && x && r("Popover:hover-and-context", "Popover: `openOnHover` is ignored with `openOnContext`: a context popover opens on a right click, Shift+F10 or the ContextMenu key, not on hover.");
+	}, [p, x]);
+	let $ = p && !x, Ne = o(() => z === "hover" && !v(q.current, X)), { triggerHandlers: Pe, surfaceHandlers: Fe, cancel: Ie } = h({
+		enabled: $,
 		open: N,
-		openDelay: ne,
-		closeDelay: re,
+		openDelay: g,
+		closeDelay: _,
 		trigger: G,
 		surface: W,
 		onOpen: () => {
-			L(!0), A(!0);
+			L(!0), j(!0);
 		},
 		onClose: () => {
-			k.current = !0, O(!1);
+			A.current = !0, k(!1);
 		},
-		canClose: Pe
-	}), Re = a(() => {
-		Le(), N && z === "hover" ? F("other") : A((e) => !e);
-	}), $ = a(() => {
-		let e = K.current, t = x ? Z.current : null;
+		canClose: Ne
+	}), Le = o(() => {
+		Ie(), N && z === "hover" ? F("other") : j((e) => !e);
+	}), Re = o(() => {
+		let e = K.current, t = x ? Q.current : null;
 		return t && e?.contains(t) ? t : e ?? J.current;
-	}), ze = C.useMemo(() => M($), [$]), Be = a((e) => {
+	}), ze = C.useMemo(() => se(Re), [Re]), Be = o((e) => {
 		if (e.key !== "Tab" || e.shiftKey || !N) return;
 		if (x) {
-			let t = $();
-			if (!t || e.target !== (_(t) ?? t)) return;
+			let t = Re();
+			if (!t || e.target !== (b(t) ?? t)) return;
 		}
 		let t = q.current, n = t ? l(t) : null;
 		n && (e.preventDefault(), n.focus());
-	}), Ve = S({
+	}), Ve = y({
 		enabled: N,
 		surface: W,
 		anchorRef: ze,
 		getPreviousStop: ce
-	}), He = De && Oe === "keyboard", Ue = C.useMemo(() => ({
+	}), He = Ee && De === "keyboard", Ue = C.useMemo(() => ({
 		open: N,
-		setOpen: A,
+		setOpen: j,
 		contentId: H,
-		setCustomContentId: V,
-		triggerId: U,
-		resolvedTriggerId: de,
+		setCustomContentId: ue,
+		triggerId: de,
+		resolvedTriggerId: U,
 		setResolvedTriggerId: fe,
 		triggerRef: K,
 		triggerElement: G,
-		triggerElementRef: Me,
-		surfaceElementRef: Ne,
+		triggerElementRef: je,
+		surfaceElementRef: Me,
 		arrowRef: he,
-		onTriggerClick: Re,
+		onTriggerClick: Le,
 		onTriggerKeyDown: Be,
-		hoverTriggerHandlers: Q ? Fe : null,
-		hoverSurfaceHandlers: Q ? Ie : null,
+		hoverTriggerHandlers: $ ? Pe : null,
+		hoverSurfaceHandlers: $ ? Fe : null,
 		contextMode: x,
-		contextTriggerHandlers: x ? ke : null,
-		onContentContextMenu: Ae.onContextMenu,
+		contextTriggerHandlers: x ? Oe : null,
+		onContentContextMenu: ke.onContextMenu,
 		keyboardContext: He,
 		onContentKeyDown: Ve,
-		layerId: Y,
+		layerId: X,
 		floatingProps: ye,
 		arrowStyles: be,
 		placedSide: xe
 	}), [
 		N,
-		A,
+		j,
 		H,
-		U,
 		de,
+		U,
 		G,
+		je,
 		Me,
-		Ne,
-		Re,
+		Le,
 		Be,
-		Q,
+		$,
+		Pe,
 		Fe,
-		Ie,
 		x,
+		Oe,
 		ke,
-		Ae,
 		He,
 		Ve,
-		Y,
+		X,
 		ye,
 		be,
 		xe
@@ -262,32 +258,32 @@ var N = ({ open: e, defaultOpen: t, onOpenChange: n, side: ee = "bottom", align:
 	});
 };
 N.displayName = "Popover";
-var P = ({ children: e, asChild: t, id: n, onClick: r, onKeyDown: ee, onContextMenu: a, onPointerEnter: o, onPointerMove: s, onPointerLeave: c, ref: l, ...u }) => {
-	let { open: f, contentId: p, triggerId: te, triggerElementRef: m, setResolvedTriggerId: h, onTriggerClick: g, onTriggerKeyDown: _, hoverTriggerHandlers: v, contextMode: y, contextTriggerHandlers: b } = O("Popover.Trigger"), re = d(l, m), x = {
-		...u,
-		id: n ?? te,
+var P = ({ children: e, asChild: t, id: n, onClick: r, onKeyDown: ee, onContextMenu: a, onPointerEnter: o, onPointerMove: s, onPointerLeave: c, ref: te, ...l }) => {
+	let { open: u, contentId: f, triggerId: ne, triggerElementRef: p, setResolvedTriggerId: re, onTriggerClick: m, onTriggerKeyDown: h, hoverTriggerHandlers: g, contextMode: _, contextTriggerHandlers: v } = k("Popover.Trigger"), y = d(te, p), b = {
+		...l,
+		id: n ?? ne,
 		"aria-haspopup": "dialog",
-		"aria-expanded": !y && f,
-		"aria-controls": f && !y ? p : void 0,
-		onClick: i(r, y ? void 0 : g),
-		onKeyDown: i(ee, b ? i(b.onKeyDown, _) : _),
-		onContextMenu: b ? i(a, b.onContextMenu) : a,
-		onPointerEnter: v ? i(o, v.onPointerEnter) : o,
-		onPointerMove: v ? i(s, v.onPointerMove) : s,
-		onPointerLeave: v ? i(c, v.onPointerLeave) : c,
-		ref: re
+		"aria-expanded": !_ && u,
+		"aria-controls": u && !_ ? f : void 0,
+		onClick: i(r, _ ? void 0 : m),
+		onKeyDown: i(ee, v ? i(v.onKeyDown, h) : h),
+		onContextMenu: v ? i(a, v.onContextMenu) : a,
+		onPointerEnter: g ? i(o, g.onPointerEnter) : o,
+		onPointerMove: g ? i(s, g.onPointerMove) : s,
+		onPointerLeave: g ? i(c, g.onPointerLeave) : c,
+		ref: y
 	};
-	return ne(e, x, {
+	return x(e, b, {
 		componentName: "Popover.Trigger",
 		asChild: t,
-		onResolvedId: h,
-		omitStateAria: y
+		onResolvedId: re,
+		omitStateAria: _
 	});
 };
 P.displayName = "PopoverTrigger";
-var F = ({ children: n, title: a, id: o, className: c, style: l, "aria-label": u, "aria-labelledby": f, onKeyDown: p, onContextMenu: te, onPointerEnter: h, onPointerLeave: g, ref: _, ...ne }) => {
-	let { open: v, contentId: y, setCustomContentId: b, resolvedTriggerId: x, triggerRef: S, triggerElement: E, surfaceElementRef: D, arrowRef: ie, layerId: k, floatingProps: j, arrowStyles: se, placedSide: M, onContentKeyDown: ce, hoverSurfaceHandlers: N, contextMode: P, onContentContextMenu: F, keyboardContext: I } = O("Popover.Content"), L = s("popover-title"), le = d(_, D), R = ee(a), z = f === void 0 && !u && !R, B = v && z && !P, ue = C.useCallback((e) => {
-		if (!B || !E || typeof MutationObserver > "u") return oe();
+var F = ({ children: n, title: o, id: s, className: te, style: l, "aria-label": u, "aria-labelledby": f, onKeyDown: ne, onContextMenu: re, onPointerEnter: m, onPointerLeave: h, ref: _, ...v }) => {
+	let { open: y, contentId: b, setCustomContentId: x, resolvedTriggerId: S, triggerRef: ie, triggerElement: E, surfaceElementRef: D, arrowRef: O, layerId: A, floatingProps: M, arrowStyles: se, placedSide: ce, onContentKeyDown: N, hoverSurfaceHandlers: P, contextMode: F, onContentContextMenu: I, keyboardContext: L } = k("Popover.Content"), R = c("popover-title"), le = d(_, D), z = ee(o), B = f === void 0 && !u && !z, V = y && B && !F, ue = C.useCallback((e) => {
+		if (!V || !E || typeof MutationObserver > "u") return oe();
 		let t = new MutationObserver(e);
 		return t.observe(E, {
 			attributes: !0,
@@ -295,59 +291,60 @@ var F = ({ children: n, title: a, id: o, className: c, style: l, "aria-label": u
 			childList: !0,
 			subtree: !0
 		}), () => t.disconnect();
-	}, [B, E]), V = C.useSyncExternalStore(ue, () => B ? A(E, x) : void 0, () => B ? x : void 0), H = f ?? (u ? void 0 : R ? L : V), U = o || void 0;
-	return C.useEffect(() => (b(U), () => b(void 0)), [U, b]), C.useEffect(() => {
-		v && z && P && t && r("Popover.Content:name", "Popover.Content: the popover has no accessible name. A context popover (openOnContext) is not named by its region: pass `title`, `aria-label` or `aria-labelledby`.");
+	}, [V, E]), H = C.useSyncExternalStore(ue, () => V ? j(E, S) : void 0, () => V ? S : void 0), de = f ?? (u ? void 0 : z ? R : H), U = s || void 0;
+	return C.useEffect(() => (x(U), () => x(void 0)), [U, x]), C.useEffect(() => {
+		y && B && F && t && r("Popover.Content:name", "Popover.Content: the popover has no accessible name. A context popover (openOnContext) is not named by its region: pass `title`, `aria-label` or `aria-labelledby`.");
 	}, [
-		v,
-		z,
-		P
+		y,
+		B,
+		F
 	]), C.useEffect(() => {
-		if (!B || !t) return;
-		let e = S.current;
+		if (!V || !t) return;
+		let e = ie.current;
 		if (!e) {
 			r("Popover.Content:name", "Popover.Content: the popover has no accessible name. Pass `title`, `aria-label` or `aria-labelledby`, or open it from a Popover.Trigger.");
 			return;
 		}
-		let n = A(e, x);
+		let n = j(e, S);
 		n ? ae(e.ownerDocument, n) || r("Popover.Content:trigger-name", "Popover.Content: the popover is named by its trigger, but the trigger has no text to name it (an icon-only trigger needs `aria-label`, or `aria-labelledby` pointing at text), so the popover has no accessible name. Name the trigger, or pass `title`, `aria-label` or `aria-labelledby`.") : r("Popover.Content:trigger-id", "Popover.Content: the popover is named by its trigger, but the trigger element has no `id` (a render-prop child of Popover.Trigger must spread the `id` it receives), so the popover has no accessible name. Spread every trigger prop onto the element, or pass `title`, `aria-label` or `aria-labelledby`.");
 	}, [
-		B,
-		x,
+		V,
 		S,
-		V
-	]), v ? /* @__PURE__ */ w(m, {
-		layerId: k,
+		ie,
+		H
+	]), y ? /* @__PURE__ */ w(p, {
+		layerId: A,
 		children: /* @__PURE__ */ T("div", {
 			role: "dialog",
 			"aria-label": u,
-			"aria-labelledby": H,
-			tabIndex: I ? -1 : void 0,
-			...ne,
+			"aria-labelledby": de,
+			tabIndex: L ? -1 : void 0,
+			...v,
 			ref: le,
-			id: U ?? y,
-			"data-side": j["data-side"],
-			"data-align": j["data-align"],
+			id: U ?? b,
+			"data-side": M["data-side"],
+			"data-align": M["data-align"],
 			style: {
 				...l,
-				...j.style
+				...M.style
 			},
-			onKeyDown: i(p, ce),
-			onContextMenu: i(te, F),
-			onPointerEnter: N ? i(h, N.onPointerEnter) : h,
-			onPointerLeave: N ? i(g, N.onPointerLeave) : g,
-			className: e("w-64 rounded-md border border-border bg-background p-4 text-body-1 font-normal text-foreground normal-case tracking-normal text-start shadow-4", c),
+			onKeyDown: i(ne, N),
+			onContextMenu: i(re, I),
+			onPointerEnter: P ? i(m, P.onPointerEnter) : m,
+			onPointerLeave: P ? i(h, P.onPointerLeave) : h,
+			className: e(a.root, "w-64 rounded-md border border-border bg-background p-4 text-body-1 font-normal text-foreground normal-case tracking-normal text-start shadow-4", te),
 			children: [
-				/* @__PURE__ */ w(re, {
-					ref: ie,
-					side: M,
+				/* @__PURE__ */ w(g, {
+					ref: O,
+					side: ce,
 					style: se,
-					"data-wave-popover-arrow": ""
+					"data-wave-popover-arrow": "",
+					className: a.beak
 				}),
-				R && /* @__PURE__ */ w("h2", {
-					id: L,
-					className: "mb-2 text-subtitle-2 font-semibold",
-					children: a
+				z && /* @__PURE__ */ w("h2", {
+					id: R,
+					className: e(a.title, "mb-2 text-subtitle-2 font-semibold"),
+					children: o
 				}),
 				n
 			]