@box-kite/react 2.2.6 → 2.2.8

package/components/menu.mjs

@@ -1,17 +1,18 @@
 "use client";
-import { d as e, u as t } from "../platform.mjs";
+import { f as e, p as t } from "../platform.mjs";
 import { n } from "../effects.mjs";
 import r from "../box.mjs";
 import { a as i, i as a } from "../behavior.mjs";
 import { t as o } from "../identity.mjs";
 import { t as s } from "../keyboard.mjs";
 import { t as c } from "../placement.mjs";
-import { t as l } from "../layer.mjs";
-import u from "./overlay.mjs";
-import { createContext as d, useCallback as f, useContext as p, useMemo as m, useRef as h, useState as g } from "react";
-import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+import { a as l, i as u } from "../reporting.mjs";
+import { t as d } from "../layer.mjs";
+import f from "./overlay.mjs";
+import { createContext as p, useCallback as m, useContext as h, useMemo as g, useRef as _, useState as v } from "react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
 //#region src/utils/menu/menuUtils.ts
-var b;
+var S;
 (function(e) {
 	let t = e.ITEM_SELECTOR = "[role=\"menuitem\"],[role=\"menuitemcheckbox\"],[role=\"menuitemradio\"]";
 	function n(e, t) {
@@ -39,18 +40,18 @@ var b;
 		return r < 0 ? void 0 : e[r];
 	}
 	e.typeaheadTarget = c;
-})(b ||= {});
-var x = b, S = d(null);
-function C(e) {
-	let t = p(S);
+})(S ||= {});
+var C = S, w = p(null);
+function T(e) {
+	let t = h(w);
 	if (!t) throw Error(`<${e}> must be rendered inside a <Menu>.`);
 	return t;
 }
-function w(e) {
-	let [t, n] = g([]);
+function E(e) {
+	let [t, n] = v([]);
 	return {
 		panels: t,
-		registerLayer: f((t) => {
+		registerLayer: m((t) => {
 			n((e) => [...e, t]);
 			let r = e?.(t);
 			return () => {
@@ -59,190 +60,198 @@ function w(e) {
 		}, [e])
 	};
 }
-var T = d(null);
-function E(e) {
-	let { trigger: t, children: n, open: r, defaultOpen: a = !1, onOpenChange: o, label: s, labelledBy: c, side: u = "bottom", align: d = "start", offset: f = 1, flip: p = !0, matchWidth: g = !1, props: b, ...C } = e, T = h("first"), E = i((e) => {
-		let t = x.items(e), n = T.current === "last" ? t[t.length - 1] : t[0];
-		T.current = "first", (n ?? e).focus();
-	}), { panels: O, registerLayer: k } = w(), A = l({
+var D = p(null);
+function O(e) {
+	let { trigger: t, children: n, open: r, defaultOpen: a = !1, onOpenChange: o, label: s, labelledBy: c, side: l = "bottom", align: u = "start", offset: f = 1, flip: p = !0, matchWidth: m = !1, props: h, ...v } = e, S = _("first"), T = i((e) => {
+		let t = C.items(e), n = S.current === "last" ? t[t.length - 1] : t[0];
+		S.current = "first", (n ?? e).focus();
+	}), { panels: D, registerLayer: O } = E(), A = d({
 		haspopup: "menu",
 		idPrefix: "menu",
-		id: C.id,
+		id: v.id,
 		open: r,
 		defaultOpen: a,
 		onOpenChange: o,
-		onOpened: E,
-		inside: O
+		interaction: {
+			component: "menu",
+			type: "openChange"
+		},
+		onOpened: T,
+		inside: D
 	}), j = i((e) => {
-		(e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), T.current = e.key === "ArrowUp" ? "last" : "first", A.isOpen && A.panelElement ? E(A.panelElement) : A.setOpen(!0, {
+		(e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), S.current = e.key === "ArrowUp" ? "last" : "first", A.isOpen && A.panelElement ? T(A.panelElement) : A.setOpen(!0, {
 			reason: "trigger",
 			event: e
 		}));
-	}), M = m(() => ({
+	}), M = g(() => ({
 		ref: A.trigger.ref,
 		props: {
 			...A.trigger.props,
 			onKeyDown: j
 		}
-	}), [j, A.trigger]), N = i((e) => A.setOpen(!1, e)), P = m(() => ({
+	}), [j, A.trigger]), N = i((e) => A.setOpen(!1, e)), P = g(() => ({
 		open: A.isOpen,
 		closeAll: N,
-		registerLayer: k
+		registerLayer: O
 	}), [
 		N,
 		A.isOpen,
-		k
+		O
 	]);
-	return /* @__PURE__ */ y(_, { children: [t(M), /* @__PURE__ */ v(S.Provider, {
+	return /* @__PURE__ */ x(y, { children: [t(M), /* @__PURE__ */ b(w.Provider, {
 		value: P,
-		children: /* @__PURE__ */ v(D, {
+		children: /* @__PURE__ */ b(k, {
 			layer: A,
-			side: u,
-			align: d,
+			side: l,
+			align: u,
 			offset: f,
 			flip: p,
-			matchWidth: g,
+			matchWidth: m,
 			label: s,
 			labelledBy: c ?? (s ? void 0 : A.triggerId),
-			contentProps: b,
-			...C,
+			contentProps: h,
+			...v,
 			children: n
 		})
 	})] });
 }
-function D(t) {
-	let { layer: n, side: a, align: o, offset: l, flip: d, matchWidth: f, label: p, labelledBy: m, contentProps: g, closeSelf: _, children: y, ...b } = t, { platform: S, isOpen: w, id: T, triggerElement: E, setPanel: D } = n, O = C("Menu"), k = h({
+function k(e) {
+	let { layer: n, side: a, align: o, offset: l, flip: u, matchWidth: d, label: p, labelledBy: m, contentProps: h, closeSelf: g, children: v, ...y } = e, { platform: x, isOpen: S, id: w, triggerElement: E, setPanel: D } = n, O = T("Menu"), k = _({
 		query: "",
 		at: 0
 	}), A = c({
 		side: a,
 		align: o,
 		offset: l,
-		flip: d,
-		matchWidth: f,
+		flip: u,
+		matchWidth: d,
 		anchor: E
 	}), j = {
 		role: "menu",
 		"aria-label": p,
 		"aria-labelledby": m,
 		tabIndex: -1,
-		onKeyDown: i((t) => {
-			let n = t.currentTarget;
-			if (!x.owns(n, t.target)) return;
-			let r = x.items(n), i = r.indexOf(document.activeElement), a = (e) => {
-				e && (t.preventDefault(), e.focus());
-			}, o = e(n) ? "ArrowRight" : "ArrowLeft";
-			switch (t.key) {
-				case "ArrowDown": return a(x.step(r, i, 1));
-				case "ArrowUp": return a(x.step(r, i, -1));
+		onKeyDown: i((e) => {
+			let n = e.currentTarget;
+			if (!C.owns(n, e.target)) return;
+			let r = C.items(n), i = r.indexOf(document.activeElement), a = (t) => {
+				t && (e.preventDefault(), t.focus());
+			}, o = t(n) ? "ArrowRight" : "ArrowLeft";
+			switch (e.key) {
+				case "ArrowDown": return a(C.step(r, i, 1));
+				case "ArrowUp": return a(C.step(r, i, -1));
 				case "Home": return a(r[0]);
 				case "End": return a(r[r.length - 1]);
 				case "Tab": return O.closeAll({
 					reason: "tab",
-					event: t
+					event: e
 				});
-				case o: return _ ? (t.preventDefault(), _({
+				case o: return g ? (e.preventDefault(), g({
 					reason: "trigger",
-					event: t
+					event: e
 				})) : void 0;
 			}
-			if (s.isPrintable(t)) {
-				let e = s.push(k.current, t.key, t.timeStamp);
-				a(x.typeaheadTarget(r, e, i));
+			if (s.isPrintable(e)) {
+				let t = s.push(k.current, e.key, e.timeStamp);
+				a(C.typeaheadTarget(r, t, i));
 			}
 		}),
 		onPointerOver: i((e) => {
-			let t = e.currentTarget, n = e.target?.closest(x.ITEM_SELECTOR);
-			!n || !x.owns(t, n) || n === document.activeElement || n.focus();
+			let t = e.currentTarget, n = e.target?.closest(C.ITEM_SELECTOR);
+			!n || !C.owns(t, n) || n === document.activeElement || n.focus();
 		}),
-		...g
+		...h
 	};
-	return S ? /* @__PURE__ */ v(r, {
+	return x ? /* @__PURE__ */ b(r, {
 		ref: D,
 		component: "menu",
-		...b,
-		variant: [b.variant, { topLayer: !0 }],
+		...y,
+		variant: [y.variant, { topLayer: !0 }],
 		...A.layerProps,
-		id: T,
+		id: w,
 		props: {
 			popover: "auto",
 			...j
 		},
-		children: y
-	}) : w ? /* @__PURE__ */ v(u, {
+		children: v
+	}) : S ? /* @__PURE__ */ b(f, {
 		contentRef: D,
 		anchor: E,
 		side: a,
 		align: o,
 		offset: l,
-		flip: d,
-		matchWidth: f,
+		flip: u,
+		matchWidth: d,
 		component: "menu",
-		...b,
-		id: T,
+		...y,
+		id: w,
 		props: j,
-		children: y
+		children: v
 	}) : null;
 }
-function O(a) {
-	let { label: s, children: c, disabled: u, side: d = "end", align: f = "start", offset: p = 0, flip: h = !0, itemProps: g, props: b, ...T } = a, E = C("Menu.Sub"), O = o("menu-sub"), k = i((e) => {
-		(x.items(e)[0] ?? e).focus();
-	}), A = i((e, t) => {
+function A(a) {
+	let { label: s, children: c, disabled: l, side: f = "end", align: p = "start", offset: m = 0, flip: h = !0, itemProps: _, props: v, ...S } = a, D = T("Menu.Sub"), O = o("menu-sub"), A = i((e) => {
+		(C.items(e)[0] ?? e).focus();
+	}), M = i((e, t) => {
 		e && t?.focus();
-	}), { panels: j, registerLayer: M } = w(E.registerLayer), N = l({
+	}), { panels: N, registerLayer: P } = E(D.registerLayer), F = u("menu.sub"), I = d({
 		haspopup: "menu",
 		idPrefix: "menu-sub",
-		id: T.id,
-		onOpened: k,
-		onClosing: A,
-		inside: j
+		id: S.id,
+		onOpened: A,
+		onClosing: M,
+		inside: N
 	});
 	n(() => {
-		if (!(!N.isOpen || !N.panelElement)) return E.registerLayer(N.panelElement);
+		if (!(!I.isOpen || !I.panelElement)) return D.registerLayer(I.panelElement);
 	}, [
-		N.isOpen,
-		N.panelElement,
-		E.registerLayer
+		I.isOpen,
+		I.panelElement,
+		D.registerLayer
 	]), n(() => {
-		E.open || N.setOpen(!1, { reason: "imperative" });
-	}, [E.open, N.setOpen]), n(() => {
-		if (!N.isOpen) return;
-		let e = new AbortController();
-		return document.addEventListener("focusin", (e) => {
-			t(e, [N.panelElement, N.triggerElement]) || N.setOpen(!1, {
+		D.open || I.setOpen(!1, { reason: "imperative" });
+	}, [D.open, I.setOpen]), n(() => {
+		if (!I.isOpen) return;
+		let t = new AbortController();
+		return document.addEventListener("focusin", (t) => {
+			e(t, [I.panelElement, I.triggerElement]) || I.setOpen(!1, {
 				reason: "imperative",
-				event: e
+				event: t
 			});
-		}, { signal: e.signal }), () => e.abort();
+		}, { signal: t.signal }), () => t.abort();
 	}, [
-		N.isOpen,
-		N.panelElement,
-		N.triggerElement,
-		N.setOpen
+		I.isOpen,
+		I.panelElement,
+		I.triggerElement,
+		I.setOpen
 	]);
-	let P = i((t) => {
-		let n = e(t.currentTarget) ? "ArrowLeft" : "ArrowRight";
-		u || t.key !== n || (t.preventDefault(), N.setOpen(!0, {
+	let L = i((e) => {
+		let n = t(e.currentTarget) ? "ArrowLeft" : "ArrowRight";
+		l || e.key !== n || (e.preventDefault(), I.setOpen(!0, {
 			reason: "trigger",
-			event: t
+			event: e
+		}), F("openChange", !0, {
+			reason: "keyboard",
+			event: e,
+			item: j(s)
 		}));
-	}), F = i((e) => {
-		u || N.setOpen(!0, {
+	}), R = i((e) => {
+		l || I.setOpen(!0, {
 			reason: "trigger",
 			event: e
 		});
-	}), I = m(() => ({
-		open: N.isOpen,
-		closeAll: E.closeAll,
-		registerLayer: M
+	}), z = g(() => ({
+		open: I.isOpen,
+		closeAll: D.closeAll,
+		registerLayer: P
 	}), [
-		N.isOpen,
-		E.closeAll,
-		M
+		I.isOpen,
+		D.closeAll,
+		P
 	]);
-	return /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ y(r, {
+	return /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ x(r, {
 		tag: "button",
-		ref: u ? void 0 : N.trigger.ref,
+		ref: l ? void 0 : I.trigger.ref,
 		component: "menu.item",
 		variant: { sub: !0 },
 		id: O,
@@ -250,108 +259,120 @@ function O(a) {
 			type: "button",
 			role: "menuitem",
 			tabIndex: -1,
-			"aria-disabled": u || void 0,
-			...N.trigger.props,
-			...g,
-			onKeyDown: P,
-			onPointerEnter: F
+			"aria-disabled": l || void 0,
+			...I.trigger.props,
+			..._,
+			onKeyDown: L,
+			onPointerEnter: R
 		},
-		children: [s, /* @__PURE__ */ v(r, { component: "menu.arrow" })]
-	}), !u && /* @__PURE__ */ v(S.Provider, {
-		value: I,
-		children: /* @__PURE__ */ v(D, {
-			layer: N,
-			side: d,
-			align: f,
-			offset: p,
+		children: [s, /* @__PURE__ */ b(r, { component: "menu.arrow" })]
+	}), !l && /* @__PURE__ */ b(w.Provider, {
+		value: z,
+		children: /* @__PURE__ */ b(k, {
+			layer: I,
+			side: f,
+			align: p,
+			offset: m,
 			flip: h,
 			matchWidth: !1,
 			labelledBy: O,
-			contentProps: b,
-			closeSelf: (e) => N.setOpen(!1, e),
-			...T,
+			contentProps: v,
+			closeSelf: (e) => I.setOpen(!1, e),
+			...S,
 			children: c
 		})
 	})] });
 }
-function k(e) {
-	let { onSelect: t, disabled: n, closeOnSelect: a = !0, props: o, children: s, ...c } = e, l = C("Menu.Item"), u = i((e) => {
-		n || (t?.(e), a && l.closeAll({
+var j = (e, t) => t ?? (typeof e == "string" ? e : void 0);
+function M(e) {
+	let { onSelect: t, disabled: n, closeOnSelect: a = !0, value: o, props: s, children: c, ...l } = e, d = T("Menu.Item"), f = u("menu.item"), p = i((e) => {
+		n || (t?.(e), f("select", j(c, o), {
+			reason: "select",
+			event: e
+		}), a && d.closeAll({
 			reason: "select",
 			event: e
 		}));
 	});
-	return /* @__PURE__ */ v(r, {
+	return /* @__PURE__ */ b(r, {
 		tag: "button",
 		component: "menu.item",
-		...c,
+		...l,
 		props: {
 			type: "button",
 			role: "menuitem",
 			tabIndex: -1,
 			"aria-disabled": n || void 0,
-			...o,
-			onClick: u
+			...s,
+			onClick: p
 		},
-		children: s
+		children: c
 	});
 }
-function A(e) {
-	let { checked: t, defaultChecked: n = !1, onCheckedChange: o, disabled: s, closeOnSelect: c = !1, props: l, children: u, ...d } = e, f = C("Menu.CheckboxItem"), [p, m] = a({
+function N(e) {
+	let { checked: t, defaultChecked: n = !1, onCheckedChange: o, disabled: s, closeOnSelect: c = !1, value: l, props: d, children: f, ...p } = e, m = T("Menu.CheckboxItem"), [h, g] = a({
 		value: t,
 		defaultValue: n,
 		onChange: o
-	}), h = i((e) => {
-		s || (m(!p, {
+	}), _ = u("menu.checkboxItem"), v = i((e) => {
+		s || (g(!h, {
 			reason: "select",
 			event: e
-		}), c && f.closeAll({
+		}), _("checkedChange", !h, {
+			reason: "select",
+			event: e,
+			item: j(f, l)
+		}), c && m.closeAll({
 			reason: "select",
 			event: e
 		}));
 	});
-	return /* @__PURE__ */ y(r, {
+	return /* @__PURE__ */ x(r, {
 		tag: "button",
 		component: "menu.item",
-		...d,
+		...p,
 		props: {
 			type: "button",
 			role: "menuitemcheckbox",
 			tabIndex: -1,
-			"aria-checked": p,
+			"aria-checked": h,
 			"aria-disabled": s || void 0,
-			...l,
-			onClick: h
+			...d,
+			onClick: v
 		},
-		children: [/* @__PURE__ */ v(r, {
+		children: [/* @__PURE__ */ b(r, {
 			component: "menu.indicator",
-			children: p && /* @__PURE__ */ v(r, { component: "menu.check" })
-		}), u]
+			children: h && /* @__PURE__ */ b(r, { component: "menu.check" })
+		}), f]
 	});
 }
-function j(e) {
-	let { label: t, value: n, defaultValue: r = "", onValueChange: o, children: s, ...c } = e, [l, u] = a({
+function P(e) {
+	let { label: t, value: n, defaultValue: r = "", onValueChange: a, children: o, ...s } = e, [c, u] = l({
 		value: n,
 		defaultValue: r,
-		onChange: o
+		onChange: a,
+		interaction: {
+			component: "menu.radioGroup",
+			type: "valueChange"
+		}
 	}), d = i((e, t) => u(e, {
 		reason: "select",
 		event: t
-	})), f = m(() => ({
-		value: l,
+	})), f = g(() => ({
+		value: c,
 		select: d
-	}), [l, d]);
-	return /* @__PURE__ */ v(T.Provider, {
+	}), [c, d]);
+	return /* @__PURE__ */ b(D.Provider, {
 		value: f,
-		children: /* @__PURE__ */ v(N, {
+		children: /* @__PURE__ */ b(I, {
 			label: t,
-			...c,
-			children: s
+			...s,
+			children: o
 		})
 	});
 }
-function M(e) {
-	let { value: t, disabled: n, closeOnSelect: a = !1, props: o, children: s, ...c } = e, l = C("Menu.RadioItem"), u = p(T);
+function F(e) {
+	let { value: t, disabled: n, closeOnSelect: a = !1, props: o, children: s, ...c } = e, l = T("Menu.RadioItem"), u = h(D);
 	if (!u) throw Error("<Menu.RadioItem> must be rendered inside a <Menu.RadioGroup>.");
 	let d = u.value === t, f = i((e) => {
 		n || (u.select(t, e), a && l.closeAll({
@@ -359,7 +380,7 @@ function M(e) {
 			event: e
 		}));
 	});
-	return /* @__PURE__ */ y(r, {
+	return /* @__PURE__ */ x(r, {
 		tag: "button",
 		component: "menu.item",
 		...c,
@@ -372,15 +393,15 @@ function M(e) {
 			...o,
 			onClick: f
 		},
-		children: [/* @__PURE__ */ v(r, {
+		children: [/* @__PURE__ */ b(r, {
 			component: "menu.indicator",
-			children: d && /* @__PURE__ */ v(r, { component: "menu.dot" })
+			children: d && /* @__PURE__ */ b(r, { component: "menu.dot" })
 		}), s]
 	});
 }
-function N(e) {
+function I(e) {
 	let { label: t, props: n, children: i, ...a } = e, s = o("menu-group");
-	return /* @__PURE__ */ y(r, {
+	return /* @__PURE__ */ x(r, {
 		component: "menu.group",
 		...a,
 		props: {
@@ -388,7 +409,7 @@ function N(e) {
 			"aria-labelledby": t ? s : void 0,
 			...n
 		},
-		children: [t && /* @__PURE__ */ v(r, {
+		children: [t && /* @__PURE__ */ b(r, {
 			component: "menu.label",
 			id: s,
 			props: { role: "presentation" },
@@ -396,9 +417,9 @@ function N(e) {
 		}), i]
 	});
 }
-function P(e) {
+function L(e) {
 	let { props: t, ...n } = e;
-	return /* @__PURE__ */ v(r, {
+	return /* @__PURE__ */ b(r, {
 		component: "menu.separator",
 		...n,
 		props: {
@@ -407,16 +428,16 @@ function P(e) {
 		}
 	});
 }
-k.displayName = "Menu.Item", A.displayName = "Menu.CheckboxItem", j.displayName = "Menu.RadioGroup", M.displayName = "Menu.RadioItem", N.displayName = "Menu.Group", P.displayName = "Menu.Separator", O.displayName = "Menu.Sub";
-var F = Object.assign(E, {
-	Item: k,
-	CheckboxItem: A,
-	RadioGroup: j,
-	RadioItem: M,
-	Group: N,
-	Separator: P,
-	Sub: O
+M.displayName = "Menu.Item", N.displayName = "Menu.CheckboxItem", P.displayName = "Menu.RadioGroup", F.displayName = "Menu.RadioItem", I.displayName = "Menu.Group", L.displayName = "Menu.Separator", A.displayName = "Menu.Sub";
+var R = Object.assign(O, {
+	Item: M,
+	CheckboxItem: N,
+	RadioGroup: P,
+	RadioItem: F,
+	Group: I,
+	Separator: L,
+	Sub: A
 });
-E.displayName = "Menu";
+O.displayName = "Menu";
 //#endregion
-export { F as default };
+export { R as default };

package/components/overlay.cjs

@@ -1 +1 @@
-"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../client.cjs"),t=require("../platform.cjs"),n=require("../effects.cjs"),r=require("../box.cjs"),i=require("../placement.cjs"),a=require("../layer.cjs");let o=require("react"),s=require("react/jsx-runtime"),c=require("react-dom");function l(l,u){let{side:d=`bottom`,align:f=`center`,offset:p=0,flip:m=!0,onSideChange:h,anchor:g,contentRef:_,matchWidth:v=!0,...y}=l,[b,x]=(0,o.useState)(null),[S,C]=(0,o.useState)(!1),w=(0,o.useRef)(null),T=a.n(),E=(0,o.useRef)(null),D=e.t(!T),O=i.t({side:d,align:f,offset:p,flip:m,matchWidth:v,anchor:g??b,trackSide:!!h});n.n(()=>{let e=E.current;!T||!t.o()||!e||!e.isConnected||e.matches(`:popover-open`)||e.showPopover()}),n.n(()=>{if(T)return;let e=t.l(g)??b;C(!!e&&t.d(e))},[g,b,T]),n.n(()=>{w.current!==O.side&&(w.current=O.side,h?.(O.side))});let k=O.layerProps.ref,A=(0,o.useCallback)(e=>{k?.(e),E.current=e,typeof u==`function`?u(e):u&&(u.current=e)},[k,u]),j=(0,s.jsx)(r.default,{...O.layerProps,ref:A,transition:`none`,props:T?{popover:`manual`}:{dir:S?`rtl`:`ltr`},children:(0,s.jsx)(r.default,{ref:_,...y})});return(0,s.jsxs)(s.Fragment,{children:[!g&&(0,s.jsx)(r.default,{ref:x}),T?j:D&&(0,c.createPortal)(j,D)]})}var u=(0,o.forwardRef)(l);u.displayName=`Overlay`,exports.default=u;
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../platform.cjs"),t=require("../client.cjs"),n=require("../effects.cjs"),r=require("../box.cjs"),i=require("../placement.cjs"),a=require("../layer.cjs");let o=require("react"),s=require("react/jsx-runtime"),c=require("react-dom");function l(l,u){let{side:d=`bottom`,align:f=`center`,offset:p=0,flip:m=!0,onSideChange:h,anchor:g,contentRef:_,matchWidth:v=!0,...y}=l,[b,x]=(0,o.useState)(null),[S,C]=(0,o.useState)(!1),w=(0,o.useRef)(null),T=a.n(),E=(0,o.useRef)(null),D=t.t(!T),O=i.t({side:d,align:f,offset:p,flip:m,matchWidth:v,anchor:g??b,trackSide:!!h});n.n(()=>{let t=E.current;!T||!e.c()||!t||!t.isConnected||t.matches(`:popover-open`)||t.showPopover()}),n.n(()=>{if(T)return;let t=e.d(g)??b;C(!!t&&e.p(t))},[g,b,T]),n.n(()=>{w.current!==O.side&&(w.current=O.side,h?.(O.side))});let k=O.layerProps.ref,A=(0,o.useCallback)(e=>{k?.(e),E.current=e,typeof u==`function`?u(e):u&&(u.current=e)},[k,u]),j=(0,s.jsx)(r.default,{...O.layerProps,ref:A,transition:`none`,props:T?{popover:`manual`}:{dir:S?`rtl`:`ltr`},children:(0,s.jsx)(r.default,{ref:_,...y})});return(0,s.jsxs)(s.Fragment,{children:[!g&&(0,s.jsx)(r.default,{ref:x}),T?j:D&&(0,c.createPortal)(j,D)]})}var u=(0,o.forwardRef)(l);u.displayName=`Overlay`,exports.default=u;

package/components/overlay.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { t as e } from "../client.mjs";
-import { d as t, l as n, o as r } from "../platform.mjs";
+import { c as e, d as t, p as n } from "../platform.mjs";
+import { t as r } from "../client.mjs";
 import { n as i } from "../effects.mjs";
 import a from "../box.mjs";
 import { t as o } from "../placement.mjs";
@@ -10,7 +10,7 @@ import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 import { createPortal as h } from "react-dom";
 //#region src/components/overlay.tsx
 function g(c, g) {
-	let { side: _ = "bottom", align: v = "center", offset: y = 0, flip: b = !0, onSideChange: x, anchor: S, contentRef: C, matchWidth: w = !0, ...T } = c, [E, D] = d(null), [O, k] = d(!1), A = u(null), j = s(), M = u(null), N = e(!j), P = o({
+	let { side: _ = "bottom", align: v = "center", offset: y = 0, flip: b = !0, onSideChange: x, anchor: S, contentRef: C, matchWidth: w = !0, ...T } = c, [E, D] = d(null), [O, k] = d(!1), A = u(null), j = s(), M = u(null), N = r(!j), P = o({
 		side: _,
 		align: v,
 		offset: y,
@@ -20,12 +20,12 @@ function g(c, g) {
 		trackSide: !!x
 	});
 	i(() => {
-		let e = M.current;
-		!j || !r() || !e || !e.isConnected || e.matches(":popover-open") || e.showPopover();
+		let t = M.current;
+		!j || !e() || !t || !t.isConnected || t.matches(":popover-open") || t.showPopover();
 	}), i(() => {
 		if (j) return;
-		let e = n(S) ?? E;
-		k(!!e && t(e));
+		let e = t(S) ?? E;
+		k(!!e && n(e));
 	}, [
 		S,
 		E,

package/components/popover.cjs

@@ -1 +1 @@
-"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../box.cjs"),t=require("../behavior.cjs"),n=require("../placement.cjs"),r=require("../layer.cjs"),i=require("./overlay.cjs");let a=require("react/jsx-runtime");function o(o){let{trigger:s,children:c,open:l,defaultOpen:u=!1,onOpenChange:d,label:f,labelledBy:p,side:m=`bottom`,align:h=`center`,offset:g=2,flip:_=!0,matchWidth:v=!1,autoFocus:y=!0,props:b,...x}=o,S=t.a(e=>{!y||e.contains(document.activeElement)||e.focus()}),{platform:C,isOpen:w,id:T,trigger:E,triggerElement:D,setPanel:O}=r.t({haspopup:`dialog`,idPrefix:`popover`,id:x.id,open:l,defaultOpen:u,onOpenChange:d,onOpened:S}),k=n.t({side:m,align:h,offset:g,flip:_,matchWidth:v,anchor:D}),A={"aria-label":f,"aria-labelledby":p},j=x;return C?(0,a.jsxs)(a.Fragment,{children:[s(E),(0,a.jsx)(e.default,{ref:O,component:`popover`,...j,variant:[j.variant,{topLayer:!0}],...k.layerProps,id:T,props:{popover:`auto`,role:`dialog`,...A,tabIndex:-1,...b},children:c})]}):(0,a.jsxs)(a.Fragment,{children:[s(E),w&&(0,a.jsx)(i.default,{contentRef:O,anchor:D,side:m,align:h,offset:g,flip:_,matchWidth:v,component:`popover`,...j,id:T,props:{role:`dialog`,...A,tabIndex:-1,...b},children:c})]})}var s=o;s.displayName=`Popover`,exports.default=s;
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../box.cjs"),t=require("../behavior.cjs"),n=require("../placement.cjs"),r=require("../layer.cjs"),i=require("./overlay.cjs");let a=require("react/jsx-runtime");function o(o){let{trigger:s,children:c,open:l,defaultOpen:u=!1,onOpenChange:d,label:f,labelledBy:p,side:m=`bottom`,align:h=`center`,offset:g=2,flip:_=!0,matchWidth:v=!1,autoFocus:y=!0,props:b,...x}=o,S=t.a(e=>{!y||e.contains(document.activeElement)||e.focus()}),{platform:C,isOpen:w,id:T,trigger:E,triggerElement:D,setPanel:O}=r.t({haspopup:`dialog`,idPrefix:`popover`,id:x.id,interaction:{component:`popover`,type:`openChange`},open:l,defaultOpen:u,onOpenChange:d,onOpened:S}),k=n.t({side:m,align:h,offset:g,flip:_,matchWidth:v,anchor:D}),A={"aria-label":f,"aria-labelledby":p},j=x;return C?(0,a.jsxs)(a.Fragment,{children:[s(E),(0,a.jsx)(e.default,{ref:O,component:`popover`,...j,variant:[j.variant,{topLayer:!0}],...k.layerProps,id:T,props:{popover:`auto`,role:`dialog`,...A,tabIndex:-1,...b},children:c})]}):(0,a.jsxs)(a.Fragment,{children:[s(E),w&&(0,a.jsx)(i.default,{contentRef:O,anchor:D,side:m,align:h,offset:g,flip:_,matchWidth:v,component:`popover`,...j,id:T,props:{role:`dialog`,...A,tabIndex:-1,...b},children:c})]})}var s=o;s.displayName=`Popover`,exports.default=s;

package/components/popover.mjs

@@ -13,6 +13,10 @@ function c(c) {
 		haspopup: "dialog",
 		idPrefix: "popover",
 		id: C.id,
+		interaction: {
+			component: "popover",
+			type: "openChange"
+		},
 		open: d,
 		defaultOpen: f,
 		onOpenChange: p,