@mortenbrudvik/waveui 0.11.0 → 0.12.0

package/dist/components/overlays/Popover.mjs

@@ -10,16 +10,17 @@ 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 { useDismiss as ne } from "../../hooks/useDismiss.mjs";
-import { Portal as p } from "../portal/Portal.mjs";
-import { usePopupPosition as re } from "../../hooks/usePopupPosition.mjs";
+import { resolvePositioning as ne, usePopupPosition as re } from "../../hooks/usePopupPosition.mjs";
+import { useDismiss as p } from "../../hooks/useDismiss.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 { Portal as h } from "../portal/Portal.mjs";
+import { useHoverIntent as g } from "../../hooks/useHoverIntent.mjs";
+import { PopoverBeak as _, getTabbableThrough as v, isFocusInSurfaceTree as y, usePopoverTabOrder as ie } from "./Popover.shared.mjs";
+import { getTriggerFocusTarget as b, useTriggerElement as x, useTriggerFocusRef as ae } from "../../hooks/useTriggerElement.mjs";
+import { usePopupTarget as S } from "../../hooks/useResolvedTarget.mjs";
+import { useContextMenuAnchor as oe } from "../../hooks/useContextMenuAnchor.mjs";
 import * as C from "react";
-import { jsx as w, jsxs as T } from "react/jsx-runtime";
+import { Fragment as se, jsx as w, jsxs as T } from "react/jsx-runtime";
 //#region src/components/overlays/Popover.tsx
 var E = C.createContext(null);
 E.displayName = "PopoverContext";
@@ -54,64 +55,71 @@ function O() {
 			style: {}
 		},
 		arrowStyles: {},
-		placedSide: "bottom"
+		placedSide: "bottom",
+		fitViewport: !1
 	}, D;
 }
 function k(e) {
 	return C.useContext(E) || (n(e, "Popover"), O());
 }
-function A(e, t) {
+function ce(e, t) {
 	let n = (t ?? "").split(/\s+/).filter((t) => t && e.getElementById(t));
 	return n.length > 0 ? n.join(" ") : void 0;
 }
-function j(e, t) {
+function A(e, t) {
 	if (!e) return t;
 	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);
+	return ce(n, r.getAttribute("aria-labelledby")) ?? (r.id || e.id || void 0);
 }
-function ae(e, t) {
+function j(e, t) {
 	return t.split(/\s+/).some((t) => {
 		let n = t ? e.getElementById(t) : null;
 		return n ? n.getAttribute("aria-label")?.trim() || n.textContent?.trim() ? !0 : !!n.querySelector("[aria-label]:not([aria-label=\"\"]), [alt]:not([alt=\"\"]), [title]:not([title=\"\"])") : !1;
 	});
 }
-var oe = () => () => {};
-function M(e) {
+var M = () => () => {};
+function le(e) {
 	return !!e && typeof e.nodeType == "number";
 }
-function se(e) {
+function ue(e) {
 	return { get current() {
 		return e();
 	} };
 }
-function ce(e, t, n) {
-	return b(e) ?? _(e, t, n);
+function de(e, t, n) {
+	return b(e) ?? v(e, t, n);
 }
-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);
+var N = ({ open: e, defaultOpen: t, onOpenChange: n, side: ee = "bottom", align: i = "start", ignoreOutsideRefs: a, openOnHover: h = !1, openDelay: _ = 250, closeDelay: v = 500, openOnContext: x = !1, target: se, positioning: T, children: D }) => {
+	let { target: O, pending: k } = S("Popover", se, T), [ce, A] = s(e, t ?? !1, n), j = C.useRef(!1), M = o((e) => {
+		j.current = !1, A(e);
+	}), N = C.useCallback(() => j.current, []), P = f(), F = ce && P, [I, L] = C.useState("other"), [fe, R] = C.useState(!1), [z, B] = C.useState(F), V = I;
+	F !== z && (B(F), F && (V = fe ? "hover" : "other")), V !== I && L(V), fe && R(!1);
+	let pe = c("popover-content"), [me, H] = C.useState(void 0), U = me ?? pe, he = c("popover-trigger"), [ge, _e] = C.useState(void 0), [W, ve] = C.useState(null), [G, ye] = C.useState(null), K = C.useRef(null), q = C.useRef(null), be = C.useRef(null), xe = le(O) ? O : null, J = C.useRef(null);
 	C.useInsertionEffect(() => {
-		J.current = ge;
-	}, [ge]);
-	let { setReference: _e, setFloating: ve, floatingProps: ye, arrowStyles: be, side: xe } = re({
-		open: N,
+		J.current = xe;
+	}, [xe]);
+	let { setReference: Se, setFloating: Ce, floatingProps: Y, arrowStyles: we, side: Te } = re({
+		open: F,
 		side: ee,
 		align: i,
-		offset: 8,
-		arrowRef: he
-	}), Se = C.useRef(null), Y = o(() => {
-		let e = x ? Se.current?.current : null;
+		arrowRef: be,
+		...ne(T, { offset: 8 })
+	}), Ee = C.useMemo(() => k ? {
+		...Y,
+		style: {
+			...Y.style,
+			visibility: "hidden"
+		}
+	} : Y, [k, Y]), De = C.useRef(null), Oe = o(() => {
+		let e = x ? De.current?.current : null;
 		if (e && u(e)) return e;
 		let t = K.current, n = t ? b(t) : null;
 		if (n) return n;
 		let r = J.current;
 		return r && u(r) ? r : t;
-	}), Ce = C.useMemo(() => se(Y), [Y]), we = o((e) => !(e.ctrlKey && K.current?.contains(e.target))), { layerId: X } = ne({
-		open: N,
-		onDismiss: () => j(!1),
+	}), ke = C.useMemo(() => ue(Oe), [Oe]), Ae = o((e) => !(e.ctrlKey && K.current?.contains(e.target))), { layerId: X } = p({
+		open: F,
+		onDismiss: () => M(!1),
 		refs: x ? [
 			q,
 			J,
@@ -122,144 +130,146 @@ var N = ({ open: e, defaultOpen: t, onOpenChange: n, side: ee = "bottom", align:
 			J,
 			...a ?? []
 		],
-		anchorRef: Ce,
+		anchorRef: ke,
 		kind: "popover",
-		outsidePress: !x || we
-	}), Z = C.useRef(!1), { anchor: Te, fromContext: Ee, origin: De, opener: Q, triggerHandlers: Oe, surfaceHandlers: ke } = ie({
+		outsidePress: !x || Ae
+	}), Z = C.useRef(!1), { anchor: je, fromContext: Me, origin: Ne, opener: Q, triggerHandlers: Pe, surfaceHandlers: Fe } = oe({
 		enabled: x,
-		open: N,
+		open: F,
 		trigger: G,
 		layerId: X,
 		onOpen: (e) => {
-			Z.current = e === "keyboard", j(!0);
+			Z.current = e === "keyboard", M(!0);
 		},
-		onClose: () => j(!1)
+		onClose: () => M(!1)
 	});
 	C.useInsertionEffect(() => {
-		Se.current = Q;
+		De.current = Q;
 	}, [Q]);
-	let Ae = S(K);
+	let Ie = ae(K);
 	m({
-		enabled: N,
+		enabled: F,
 		container: W,
-		triggerRef: x ? void 0 : Ae,
+		triggerRef: x ? void 0 : Ie,
 		finalFocusRef: x ? Q : void 0,
-		fallback: Y,
+		fallback: Oe,
 		onlyIfFocusInside: !0,
-		isHoverClose: ae
+		isHoverClose: N
 	}), C.useLayoutEffect(() => {
-		N && (A.current = !1);
-	}, [N]);
-	let je = d(K, me), Me = d(q, pe, ve);
+		F && (j.current = !1);
+	}, [F]);
+	let Le = d(K, ye), Re = d(q, ve, Ce);
 	C.useLayoutEffect(() => {
-		_e(Ee ? Te ?? (G && (b(G) ?? G)) : T ?? G);
+		Se(Me ? je ?? (G && (b(G) ?? G)) : O ?? G);
 	}, [
-		Te,
-		Ee,
-		T,
+		je,
+		Me,
+		O,
 		G,
-		_e
+		Se
 	]), C.useLayoutEffect(() => {
 		if (Z.current) {
-			if (!N) {
+			if (!F) {
 				Z.current = !1;
 				return;
 			}
 			W && (Z.current = !1, te(l(W) ?? W, { preventScroll: !0 }));
 		}
 	}), C.useEffect(() => {
-		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({
+		h && 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.");
+	}, [h, x]);
+	let $ = h && !x, ze = o(() => V === "hover" && !y(q.current, X)), { triggerHandlers: Be, surfaceHandlers: Ve, cancel: He } = g({
 		enabled: $,
-		open: N,
-		openDelay: g,
-		closeDelay: _,
+		open: F,
+		openDelay: _,
+		closeDelay: v,
 		trigger: G,
 		surface: W,
 		onOpen: () => {
-			L(!0), j(!0);
+			R(!0), M(!0);
 		},
 		onClose: () => {
-			A.current = !0, k(!1);
+			j.current = !0, A(!1);
 		},
-		canClose: Ne
-	}), Le = o(() => {
-		Ie(), N && z === "hover" ? F("other") : j((e) => !e);
-	}), Re = o(() => {
+		canClose: ze
+	}), Ue = o(() => {
+		He(), F && V === "hover" ? L("other") : M((e) => !e);
+	}), We = o(() => {
 		let e = K.current, t = x ? Q.current : null;
 		return t && e?.contains(t) ? t : e ?? J.current;
-	}), ze = C.useMemo(() => se(Re), [Re]), Be = o((e) => {
-		if (e.key !== "Tab" || e.shiftKey || !N) return;
+	}), Ge = C.useMemo(() => ue(We), [We]), Ke = o((e) => {
+		if (e.key !== "Tab" || e.shiftKey || !F) return;
 		if (x) {
-			let t = Re();
+			let t = We();
 			if (!t || e.target !== (b(t) ?? t)) return;
 		}
 		let t = q.current, n = t ? l(t) : null;
 		n && (e.preventDefault(), n.focus());
-	}), Ve = y({
-		enabled: N,
+	}), qe = ie({
+		enabled: F,
 		surface: W,
-		anchorRef: ze,
-		getPreviousStop: ce
-	}), He = Ee && De === "keyboard", Ue = C.useMemo(() => ({
-		open: N,
-		setOpen: j,
-		contentId: H,
-		setCustomContentId: ue,
-		triggerId: de,
-		resolvedTriggerId: U,
-		setResolvedTriggerId: fe,
+		anchorRef: Ge,
+		getPreviousStop: de
+	}), Je = Me && Ne === "keyboard", Ye = C.useMemo(() => ({
+		open: F,
+		setOpen: M,
+		contentId: U,
+		setCustomContentId: H,
+		triggerId: he,
+		resolvedTriggerId: ge,
+		setResolvedTriggerId: _e,
 		triggerRef: K,
 		triggerElement: G,
-		triggerElementRef: je,
-		surfaceElementRef: Me,
-		arrowRef: he,
-		onTriggerClick: Le,
-		onTriggerKeyDown: Be,
-		hoverTriggerHandlers: $ ? Pe : null,
-		hoverSurfaceHandlers: $ ? Fe : null,
+		triggerElementRef: Le,
+		surfaceElementRef: Re,
+		arrowRef: be,
+		onTriggerClick: Ue,
+		onTriggerKeyDown: Ke,
+		hoverTriggerHandlers: $ ? Be : null,
+		hoverSurfaceHandlers: $ ? Ve : null,
 		contextMode: x,
-		contextTriggerHandlers: x ? Oe : null,
-		onContentContextMenu: ke.onContextMenu,
-		keyboardContext: He,
-		onContentKeyDown: Ve,
+		contextTriggerHandlers: x ? Pe : null,
+		onContentContextMenu: Fe.onContextMenu,
+		keyboardContext: Je,
+		onContentKeyDown: qe,
 		layerId: X,
-		floatingProps: ye,
-		arrowStyles: be,
-		placedSide: xe
+		floatingProps: Ee,
+		arrowStyles: we,
+		placedSide: Te,
+		fitViewport: T?.fitViewport === !0
 	}), [
-		N,
-		j,
-		H,
-		de,
+		F,
+		M,
 		U,
+		he,
+		ge,
 		G,
-		je,
-		Me,
 		Le,
-		Be,
+		Re,
+		Ue,
+		Ke,
 		$,
+		Be,
+		Ve,
+		x,
 		Pe,
 		Fe,
-		x,
-		Oe,
-		ke,
-		He,
-		Ve,
+		Je,
+		qe,
 		X,
-		ye,
-		be,
-		xe
+		Ee,
+		we,
+		Te,
+		T?.fitViewport
 	]);
 	return /* @__PURE__ */ w(E.Provider, {
-		value: Ue,
+		value: Ye,
 		children: D
 	});
 };
 N.displayName = "Popover";
 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 = {
+	let { open: u, contentId: f, triggerId: ne, triggerElementRef: re, setResolvedTriggerId: p, onTriggerClick: m, onTriggerKeyDown: h, hoverTriggerHandlers: g, contextMode: _, contextTriggerHandlers: v } = k("Popover.Trigger"), y = d(te, re), ie = {
 		...l,
 		id: n ?? ne,
 		"aria-haspopup": "dialog",
@@ -273,83 +283,84 @@ var P = ({ children: e, asChild: t, id: n, onClick: r, onKeyDown: ee, onContextM
 		onPointerLeave: g ? i(c, g.onPointerLeave) : c,
 		ref: y
 	};
-	return x(e, b, {
+	return x(e, ie, {
 		componentName: "Popover.Trigger",
 		asChild: t,
-		onResolvedId: re,
+		onResolvedId: p,
 		omitStateAria: _
 	});
 };
 P.displayName = "PopoverTrigger";
-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();
+var F = ({ children: n, title: o, id: s, className: te, style: l, "aria-label": u, "aria-labelledby": f, onKeyDown: ne, onContextMenu: re, onPointerEnter: p, onPointerLeave: m, ref: g, ...v }) => {
+	let { open: y, contentId: ie, setCustomContentId: b, resolvedTriggerId: x, triggerRef: ae, triggerElement: S, surfaceElementRef: oe, arrowRef: E, layerId: D, floatingProps: O, arrowStyles: ce, placedSide: le, fitViewport: ue, onContentKeyDown: de, hoverSurfaceHandlers: N, contextMode: P, onContentContextMenu: F, keyboardContext: I } = k("Popover.Content"), L = c("popover-title"), fe = d(g, oe), R = ee(o), z = f === void 0 && !u && !R, B = y && z && !P, V = C.useCallback((e) => {
+		if (!B || !S || typeof MutationObserver > "u") return M();
 		let t = new MutationObserver(e);
-		return t.observe(E, {
+		return t.observe(S, {
 			attributes: !0,
 			attributeFilter: ["id", "aria-labelledby"],
 			childList: !0,
 			subtree: !0
 		}), () => t.disconnect();
-	}, [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`.");
+	}, [B, S]), pe = C.useSyncExternalStore(V, () => B ? A(S, x) : void 0, () => B ? x : void 0), me = f ?? (u ? void 0 : R ? L : pe), H = s || void 0;
+	if (C.useEffect(() => (b(H), () => b(void 0)), [H, b]), C.useEffect(() => {
+		y && 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`.");
 	}, [
 		y,
-		B,
-		F
+		z,
+		P
 	]), C.useEffect(() => {
-		if (!V || !t) return;
-		let e = ie.current;
+		if (!B || !t) return;
+		let e = ae.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 = 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`.");
+		let n = A(e, x);
+		n ? j(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`.");
 	}, [
-		V,
-		S,
-		ie,
-		H
-	]), y ? /* @__PURE__ */ w(p, {
-		layerId: A,
+		B,
+		x,
+		ae,
+		pe
+	]), !y) return null;
+	let U = /* @__PURE__ */ T(se, { children: [R && /* @__PURE__ */ w("h2", {
+		id: L,
+		className: e(a.title, "mb-2 text-subtitle-2 font-semibold"),
+		children: o
+	}), n] });
+	return /* @__PURE__ */ w(h, {
+		layerId: D,
 		children: /* @__PURE__ */ T("div", {
 			role: "dialog",
 			"aria-label": u,
-			"aria-labelledby": de,
-			tabIndex: L ? -1 : void 0,
+			"aria-labelledby": me,
+			tabIndex: I ? -1 : void 0,
 			...v,
-			ref: le,
-			id: U ?? b,
-			"data-side": M["data-side"],
-			"data-align": M["data-align"],
+			ref: fe,
+			id: H ?? ie,
+			"data-side": O["data-side"],
+			"data-align": O["data-align"],
 			style: {
 				...l,
-				...M.style
+				...O.style
 			},
-			onKeyDown: i(ne, N),
-			onContextMenu: i(re, I),
-			onPointerEnter: P ? i(m, P.onPointerEnter) : m,
-			onPointerLeave: P ? i(h, P.onPointerLeave) : h,
+			onKeyDown: i(ne, de),
+			onContextMenu: i(re, F),
+			onPointerEnter: N ? i(p, N.onPointerEnter) : p,
+			onPointerLeave: N ? i(m, N.onPointerLeave) : m,
 			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(g, {
-					ref: O,
-					side: ce,
-					style: se,
-					"data-wave-popover-arrow": "",
-					className: a.beak
-				}),
-				z && /* @__PURE__ */ w("h2", {
-					id: R,
-					className: e(a.title, "mb-2 text-subtitle-2 font-semibold"),
-					children: o
-				}),
-				n
-			]
+			children: [/* @__PURE__ */ w(_, {
+				ref: E,
+				side: le,
+				style: ce,
+				"data-wave-popover-arrow": "",
+				className: a.beak
+			}), ue ? /* @__PURE__ */ w("div", {
+				className: "overflow-y-auto max-h-[calc(var(--wave-popup-available-height)-2rem-2px)]",
+				children: U
+			}) : U]
 		})
-	}) : null;
+	});
 };
 F.displayName = "PopoverContent";
 var I = /* @__PURE__ */ Object.assign(N, {