@box-kite/react 1.0.0 → 2.0.1

package/components/menu.mjs

@@ -0,0 +1,422 @@
+"use client";
+import { l as e, u 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 l from "./overlay.mjs";
+import { t as u } from "../layer.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";
+//#region src/utils/menu/menuUtils.ts
+var b;
+(function(e) {
+	let t = e.ITEM_SELECTOR = "[role=\"menuitem\"],[role=\"menuitemcheckbox\"],[role=\"menuitemradio\"]";
+	function n(e, t) {
+		return t instanceof Element && t.closest("[role=\"menu\"]") === e;
+	}
+	e.owns = n;
+	function r(e) {
+		return [...e.querySelectorAll(t)].filter((t) => n(e, t));
+	}
+	e.items = r;
+	function i(e) {
+		return e.getAttribute("aria-disabled") === "true";
+	}
+	e.isDisabled = i;
+	function a(e) {
+		return e.getAttribute("aria-haspopup") === "menu";
+	}
+	e.isSubTrigger = a;
+	function o(e, t, n) {
+		if (e.length !== 0) return e[t < 0 ? n > 0 ? 0 : e.length - 1 : ((t + n) % e.length + e.length) % e.length];
+	}
+	e.step = o;
+	function c(e, t, n) {
+		let r = s.target(t, n, e.length, (t) => e[t].textContent ?? "");
+		return r < 0 ? void 0 : e[r];
+	}
+	e.typeaheadTarget = c;
+})(b ||= {});
+var x = b, S = d(null);
+function C(e) {
+	let t = p(S);
+	if (!t) throw Error(`<${e}> must be rendered inside a <Menu>.`);
+	return t;
+}
+function w(e) {
+	let [t, n] = g([]);
+	return {
+		panels: t,
+		registerLayer: f((t) => {
+			n((e) => [...e, t]);
+			let r = e?.(t);
+			return () => {
+				n((e) => e.filter((e) => e !== t)), r?.();
+			};
+		}, [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: l = "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 = u({
+		haspopup: "menu",
+		idPrefix: "menu",
+		id: C.id,
+		open: r,
+		defaultOpen: a,
+		onOpenChange: o,
+		onOpened: E,
+		inside: O
+	}), 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, {
+			reason: "trigger",
+			event: e
+		}));
+	}), M = m(() => ({
+		ref: A.trigger.ref,
+		props: {
+			...A.trigger.props,
+			onKeyDown: j
+		}
+	}), [j, A.trigger]), N = i((e) => A.setOpen(!1, e)), P = m(() => ({
+		open: A.isOpen,
+		closeAll: N,
+		registerLayer: k
+	}), [
+		N,
+		A.isOpen,
+		k
+	]);
+	return /* @__PURE__ */ y(_, { children: [t(M), /* @__PURE__ */ v(S.Provider, {
+		value: P,
+		children: /* @__PURE__ */ v(D, {
+			layer: A,
+			side: l,
+			align: d,
+			offset: f,
+			flip: p,
+			matchWidth: g,
+			label: s,
+			labelledBy: c ?? (s ? void 0 : A.triggerId),
+			contentProps: b,
+			...C,
+			children: n
+		})
+	})] });
+}
+function D(e) {
+	let { layer: n, side: a, align: o, offset: u, flip: d, matchWidth: f, label: p, labelledBy: m, contentProps: g, closeSelf: _, children: y, ...b } = e, { platform: S, isOpen: w, id: T, triggerElement: E, setPanel: D } = n, O = C("Menu"), k = h({
+		query: "",
+		at: 0
+	}), A = c({
+		side: a,
+		align: o,
+		offset: u,
+		flip: d,
+		matchWidth: f,
+		anchor: E
+	}), j = {
+		role: "menu",
+		"aria-label": p,
+		"aria-labelledby": m,
+		tabIndex: -1,
+		onKeyDown: i((e) => {
+			let n = e.currentTarget;
+			if (!x.owns(n, e.target)) return;
+			let r = x.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(x.step(r, i, 1));
+				case "ArrowUp": return a(x.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: e
+				});
+				case o: return _ ? (e.preventDefault(), _({
+					reason: "trigger",
+					event: e
+				})) : void 0;
+			}
+			if (s.isPrintable(e)) {
+				let t = s.push(k.current, e.key, e.timeStamp);
+				a(x.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();
+		}),
+		...g
+	};
+	return S ? /* @__PURE__ */ v(r, {
+		ref: D,
+		component: "menu",
+		...b,
+		variant: [b.variant, { topLayer: !0 }],
+		...A.layerProps,
+		id: T,
+		props: {
+			popover: "auto",
+			...j
+		},
+		children: y
+	}) : w ? /* @__PURE__ */ v(l, {
+		contentRef: D,
+		anchor: E,
+		side: a,
+		align: o,
+		offset: u,
+		flip: d,
+		matchWidth: f,
+		component: "menu",
+		...b,
+		id: T,
+		props: j,
+		children: y
+	}) : null;
+}
+function O(a) {
+	let { label: s, children: c, disabled: l, 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) => {
+		e && t?.focus();
+	}), { panels: j, registerLayer: M } = w(E.registerLayer), N = u({
+		haspopup: "menu",
+		idPrefix: "menu-sub",
+		id: T.id,
+		onOpened: k,
+		onClosing: A,
+		inside: j
+	});
+	n(() => {
+		if (!(!N.isOpen || !N.panelElement)) return E.registerLayer(N.panelElement);
+	}, [
+		N.isOpen,
+		N.panelElement,
+		E.registerLayer
+	]), n(() => {
+		E.open || N.setOpen(!1, { reason: "imperative" });
+	}, [E.open, N.setOpen]), n(() => {
+		if (!N.isOpen) return;
+		let t = new AbortController();
+		return document.addEventListener("focusin", (t) => {
+			e(t, [N.panelElement, N.triggerElement]) || N.setOpen(!1, {
+				reason: "imperative",
+				event: t
+			});
+		}, { signal: t.signal }), () => t.abort();
+	}, [
+		N.isOpen,
+		N.panelElement,
+		N.triggerElement,
+		N.setOpen
+	]);
+	let P = i((e) => {
+		let n = t(e.currentTarget) ? "ArrowLeft" : "ArrowRight";
+		l || e.key !== n || (e.preventDefault(), N.setOpen(!0, {
+			reason: "trigger",
+			event: e
+		}));
+	}), F = i((e) => {
+		l || N.setOpen(!0, {
+			reason: "trigger",
+			event: e
+		});
+	}), I = m(() => ({
+		open: N.isOpen,
+		closeAll: E.closeAll,
+		registerLayer: M
+	}), [
+		N.isOpen,
+		E.closeAll,
+		M
+	]);
+	return /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ y(r, {
+		tag: "button",
+		ref: l ? void 0 : N.trigger.ref,
+		component: "menu.item",
+		variant: { sub: !0 },
+		id: O,
+		props: {
+			type: "button",
+			role: "menuitem",
+			tabIndex: -1,
+			"aria-disabled": l || void 0,
+			...N.trigger.props,
+			...g,
+			onKeyDown: P,
+			onPointerEnter: F
+		},
+		children: [s, /* @__PURE__ */ v(r, { component: "menu.arrow" })]
+	}), !l && /* @__PURE__ */ v(S.Provider, {
+		value: I,
+		children: /* @__PURE__ */ v(D, {
+			layer: N,
+			side: d,
+			align: f,
+			offset: p,
+			flip: h,
+			matchWidth: !1,
+			labelledBy: O,
+			contentProps: b,
+			closeSelf: (e) => N.setOpen(!1, e),
+			...T,
+			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({
+			reason: "select",
+			event: e
+		}));
+	});
+	return /* @__PURE__ */ v(r, {
+		tag: "button",
+		component: "menu.item",
+		...c,
+		props: {
+			type: "button",
+			role: "menuitem",
+			tabIndex: -1,
+			"aria-disabled": n || void 0,
+			...o,
+			onClick: u
+		},
+		children: s
+	});
+}
+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({
+		value: t,
+		defaultValue: n,
+		onChange: o
+	}), h = i((e) => {
+		s || (m(!p, {
+			reason: "select",
+			event: e
+		}), c && f.closeAll({
+			reason: "select",
+			event: e
+		}));
+	});
+	return /* @__PURE__ */ y(r, {
+		tag: "button",
+		component: "menu.item",
+		...d,
+		props: {
+			type: "button",
+			role: "menuitemcheckbox",
+			tabIndex: -1,
+			"aria-checked": p,
+			"aria-disabled": s || void 0,
+			...l,
+			onClick: h
+		},
+		children: [/* @__PURE__ */ v(r, {
+			component: "menu.indicator",
+			children: p && /* @__PURE__ */ v(r, { component: "menu.check" })
+		}), u]
+	});
+}
+function j(e) {
+	let { label: t, value: n, defaultValue: r = "", onValueChange: o, children: s, ...c } = e, [l, u] = a({
+		value: n,
+		defaultValue: r,
+		onChange: o
+	}), d = i((e, t) => u(e, {
+		reason: "select",
+		event: t
+	})), f = m(() => ({
+		value: l,
+		select: d
+	}), [l, d]);
+	return /* @__PURE__ */ v(T.Provider, {
+		value: f,
+		children: /* @__PURE__ */ v(N, {
+			label: t,
+			...c,
+			children: s
+		})
+	});
+}
+function M(e) {
+	let { value: t, disabled: n, closeOnSelect: a = !1, props: o, children: s, ...c } = e, l = C("Menu.RadioItem"), u = p(T);
+	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({
+			reason: "select",
+			event: e
+		}));
+	});
+	return /* @__PURE__ */ y(r, {
+		tag: "button",
+		component: "menu.item",
+		...c,
+		props: {
+			type: "button",
+			role: "menuitemradio",
+			tabIndex: -1,
+			"aria-checked": d,
+			"aria-disabled": n || void 0,
+			...o,
+			onClick: f
+		},
+		children: [/* @__PURE__ */ v(r, {
+			component: "menu.indicator",
+			children: d && /* @__PURE__ */ v(r, { component: "menu.dot" })
+		}), s]
+	});
+}
+function N(e) {
+	let { label: t, props: n, children: i, ...a } = e, s = o("menu-group");
+	return /* @__PURE__ */ y(r, {
+		component: "menu.group",
+		...a,
+		props: {
+			role: "group",
+			"aria-labelledby": t ? s : void 0,
+			...n
+		},
+		children: [t && /* @__PURE__ */ v(r, {
+			component: "menu.label",
+			id: s,
+			props: { role: "presentation" },
+			children: t
+		}), i]
+	});
+}
+function P(e) {
+	let { props: t, ...n } = e;
+	return /* @__PURE__ */ v(r, {
+		component: "menu.separator",
+		...n,
+		props: {
+			role: "separator",
+			...t
+		}
+	});
+}
+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
+});
+E.displayName = "Menu";
+//#endregion
+export { F as default };

package/components/overlay.cjs

@@ -1 +1 @@
-"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../platform.cjs"),t=require("../client.cjs"),n=require("../box.cjs");let r=require("react"),i=require("react/jsx-runtime"),a=require("react-dom");var o=2;function s(s,c){let{onPositionChange:l,adjustTranslateX:u=`0px`,adjustTranslateY:d=`0px`,anchor:f,anchorSide:p=`top`,contentRef:m,matchWidth:h=!0,...g}=s,_=(0,r.useRef)(null),[v,y]=(0,r.useState)(),b=t.t(),x=(0,r.useCallback)((e,t)=>{let n=n=>{n.target.contains(e)&&t(e)},r=new AbortController;return document.addEventListener(`scroll`,n,{signal:r.signal,capture:!0}),()=>r.abort()},[]),S=(0,r.useCallback)((e,t)=>{let n=n=>{t(e)},r=new AbortController;return window.addEventListener(`resize`,n,{signal:r.signal,capture:!0}),()=>r.abort()},[]),C=(0,r.useCallback)(t=>{let n=t.getBoundingClientRect(),r=p===`bottom`?n.bottom:n.top,i=Math.round((r+window.scrollY)*o)/o,a=Math.round((n.left+window.scrollX)*o)/o,s=window.scrollX,c=window.scrollY,u=e.o(t);(v?.top!==i||v?.left!==a||v?.windowScrollX!==s||v?.windowScrollY!==c||v?.rtl!==u)&&(l?.({top:i,left:a,windowScrollX:s,windowScrollY:c}),y({top:i,left:a,width:n.width>0?n.width:void 0,windowScrollX:s,windowScrollY:c,rtl:u}))},[p,v,l]);return(0,r.useLayoutEffect)(()=>{let t=e.i(f)??_.current;if(t){C(t);let e=x(t,C),n=S(t,C);return()=>{e(),n()}}},[f,C,x,S]),(0,i.jsxs)(i.Fragment,{children:[!f&&(0,i.jsx)(n.default,{ref:_}),v&&b&&(0,a.createPortal)((0,i.jsx)(n.default,{ref:c,position:`absolute`,top:0,left:0,transition:`none`,props:{dir:v.rtl?`rtl`:`ltr`},style:{transform:`translate3d(calc(${v.left}px + ${u}),calc(${v.top}px + ${d}), 0)`,willChange:`transform`,width:h?v.width:void 0},children:(0,i.jsx)(n.default,{ref:m,...g})}),b)]})}var c=(0,r.forwardRef)(s);c.displayName=`Overlay`,exports.default=c;
+"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");let a=require("react"),o=require("react/jsx-runtime"),s=require("react-dom");function c(c,l){let{side:u=`bottom`,align:d=`center`,offset:f=0,flip:p=!0,onSideChange:m,anchor:h,contentRef:g,matchWidth:_=!0,...v}=c,[y,b]=(0,a.useState)(null),[x,S]=(0,a.useState)(!1),C=(0,a.useRef)(null),[w]=(0,a.useState)(e.a),T=(0,a.useRef)(null),E=t.t(!w),D=i.t({side:u,align:d,offset:f,flip:p,matchWidth:_,anchor:h??y,trackSide:!!m});n.n(()=>{let e=T.current;!w||!e||!e.isConnected||e.matches(`:popover-open`)||e.showPopover()}),n.n(()=>{if(w)return;let t=e.c(h)??y;S(!!t&&e.u(t))},[h,y,w]),n.n(()=>{C.current!==D.side&&(C.current=D.side,m?.(D.side))});let O=D.layerProps.ref,k=(0,a.useCallback)(e=>{O?.(e),T.current=e,typeof l==`function`?l(e):l&&(l.current=e)},[O,l]),A=(0,o.jsx)(r.default,{...D.layerProps,ref:k,transition:`none`,props:w?{popover:`manual`}:{dir:x?`rtl`:`ltr`},children:(0,o.jsx)(r.default,{ref:g,...v})});return(0,o.jsxs)(o.Fragment,{children:[!h&&(0,o.jsx)(r.default,{ref:b}),w?A:E&&(0,s.createPortal)(A,E)]})}var l=(0,a.forwardRef)(c);l.displayName=`Overlay`,exports.default=l;

package/components/overlay.d.ts

@@ -2,42 +2,46 @@ import { Ref, RefAttributes } from 'react';
 import { BoxProps } from '../box';
 import { ExtractElementFromTag } from '../react/reactTypes';
 import { ComponentsAndVariants } from '@box-kite/core/types';
+import { AnchorAlign, AnchorSide } from '../utils/anchor/anchorUtils';
 import { ElementLike } from '../utils/dom/domUtils';
-/**
- * A floating layer, rendered into the portal container at the place it is declared: it measures where it
- * sits, then renders its children into `#box-kite-portal` translated to that spot, so they escape
- * `overflow: hidden` and every clipped ancestor. It owns no open state, no ARIA and no dismissal — a
- * layer is not a pattern, and `Tooltip`, `Dropdown` and the DataGrid menu each need a different one.
- * (This was called `Tooltip` until A3, which is the one thing it is not.)
- */
 interface OverlayProps {
-    onPositionChange?(position: {
-        top: number;
-        left: number;
-        windowScrollX: number;
-        windowScrollY: number;
-    }): void;
-    adjustTranslateX?: string;
-    adjustTranslateY?: string;
     /**
-     * Measure this element instead of the layer's own placeholder — right when the layer belongs to an element
-     * next to it rather than to the spot it was declared in. The placeholder is a real box: inside a flex row
-     * it becomes a flex item, so opening the layer shifts everything after it by one `gap`.
+     * Which side of the anchor the layer sits on: `top`/`bottom` are the block axis, `start`/`end` the
+     * inline one, so a layer beside its anchor mirrors in a right-to-left page. Default `'bottom'`.
+     */
+    side?: AnchorSide;
+    /** Which of the anchor's edges to line up with along the other axis. Default `'center'`. */
+    align?: AnchorAlign;
+    /** The gap between anchor and layer, on the ÷4 spacing scale — `offset={2}` is 8px. Default `0`. */
+    offset?: number;
+    /**
+     * Whether a side with no room may be swapped for its opposite. Default `true`. It shadows the CSS prop
+     * of that name — a mirrored layer is a rarity, and one placement vocabulary across the hook, this and
+     * `Tooltip` is worth more than the transform, which a child of the layer can still take.
+     */
+    flip?: boolean;
+    /**
+     * Fires with the side the layer ended up on, which is the requested one unless a flip moved it — what
+     * a popup that grows away from its trigger needs to know to animate the right way. Asking for it is
+     * what turns on the one read the CSS path otherwise never does, so leave it out when nothing uses it.
+     */
+    onSideChange?(side: AnchorSide): void;
+    /**
+     * Anchor to this element rather than to the spot the layer was declared in. A trigger is almost always
+     * the right answer: the placeholder is a real box with no size, so `align` and `matchWidth` have
+     * nothing to work from, and inside a flex row it becomes a flex item of its own.
      */
     anchor?: ElementLike;
-    /** Which edge of the anchor the layer starts from. Default `'top'`. */
-    anchorSide?: 'top' | 'bottom';
     /**
-     * The content Box, which is the one that animates. `ref` is the positioning wrapper, whose transform
-     * follows the anchor and which therefore transitions nothing on purpose — so a `<Presence>` measuring
-     * an exit has to reach past it.
+     * The content Box, which is the one that animates. `ref` is the anchored layer, which transitions
+     * nothing on purpose — so a `<Presence>` measuring an exit has to reach past it.
      */
     contentRef?: Ref<HTMLDivElement>;
     /**
-     * Whether the layer takes the measured width of the anchor. Default true, so a dropdown popup
-     * lines up with its trigger; a tooltip sizes to its own content and turns it off.
+     * Whether the layer is at least as wide as its anchor. Default true, so a dropdown popup lines up with
+     * its trigger; a tooltip sizes to its own content and turns it off.
      */
     matchWidth?: boolean;
 }
-declare const _default: <TTag extends keyof React.JSX.IntrinsicElements = "div", TKey extends keyof ComponentsAndVariants = never>(props: BoxProps<TTag, TKey> & RefAttributes<ExtractElementFromTag<TTag>> & OverlayProps) => React.ReactNode;
+declare const _default: <TTag extends keyof React.JSX.IntrinsicElements = "div", TKey extends keyof ComponentsAndVariants = never>(props: Omit<BoxProps<TTag, TKey>, "flip"> & RefAttributes<ExtractElementFromTag<TTag>> & OverlayProps) => React.ReactNode;
 export default _default;

package/components/overlay.mjs

@@ -1,82 +1,52 @@
 "use client";
-import { i as e, o as t } from "../platform.mjs";
-import { t as n } from "../client.mjs";
-import r from "../box.mjs";
-import { forwardRef as i, useCallback as a, useLayoutEffect as o, useRef as s, useState as c } from "react";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
-import { createPortal as f } from "react-dom";
+import { a as e, c as t, u 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";
+import { forwardRef as s, useCallback as c, useRef as l, useState as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { createPortal as m } from "react-dom";
 //#region src/components/overlay.tsx
-var p = 2;
-function m(i, m) {
-	let { onPositionChange: h, adjustTranslateX: g = "0px", adjustTranslateY: _ = "0px", anchor: v, anchorSide: y = "top", contentRef: b, matchWidth: x = !0, ...S } = i, C = s(null), [w, T] = c(), E = n(), D = a((e, t) => {
-		let n = (n) => {
-			n.target.contains(e) && t(e);
-		}, r = new AbortController();
-		return document.addEventListener("scroll", n, {
-			signal: r.signal,
-			capture: !0
-		}), () => r.abort();
-	}, []), O = a((e, t) => {
-		let n = (n) => {
-			t(e);
-		}, r = new AbortController();
-		return window.addEventListener("resize", n, {
-			signal: r.signal,
-			capture: !0
-		}), () => r.abort();
-	}, []), k = a((e) => {
-		let n = e.getBoundingClientRect(), r = y === "bottom" ? n.bottom : n.top, i = Math.round((r + window.scrollY) * p) / p, a = Math.round((n.left + window.scrollX) * p) / p, o = window.scrollX, s = window.scrollY, c = t(e);
-		(w?.top !== i || w?.left !== a || w?.windowScrollX !== o || w?.windowScrollY !== s || w?.rtl !== c) && (h?.({
-			top: i,
-			left: a,
-			windowScrollX: o,
-			windowScrollY: s
-		}), T({
-			top: i,
-			left: a,
-			width: n.width > 0 ? n.width : void 0,
-			windowScrollX: o,
-			windowScrollY: s,
-			rtl: c
-		}));
+function h(s, h) {
+	let { side: g = "bottom", align: _ = "center", offset: v = 0, flip: y = !0, onSideChange: b, anchor: x, contentRef: S, matchWidth: C = !0, ...w } = s, [T, E] = u(null), [D, O] = u(!1), k = l(null), [A] = u(e), j = l(null), M = r(!A), N = o({
+		side: g,
+		align: _,
+		offset: v,
+		flip: y,
+		matchWidth: C,
+		anchor: x ?? T,
+		trackSide: !!b
+	});
+	i(() => {
+		let e = j.current;
+		!A || !e || !e.isConnected || e.matches(":popover-open") || e.showPopover();
+	}), i(() => {
+		if (A) return;
+		let e = t(x) ?? T;
+		O(!!e && n(e));
 	}, [
-		y,
-		w,
-		h
-	]);
-	return o(() => {
-		let t = e(v) ?? C.current;
-		if (t) {
-			k(t);
-			let e = D(t, k), n = O(t, k);
-			return () => {
-				e(), n();
-			};
-		}
-	}, [
-		v,
-		k,
-		D,
-		O
-	]), /* @__PURE__ */ d(l, { children: [!v && /* @__PURE__ */ u(r, { ref: C }), w && E && f(/* @__PURE__ */ u(r, {
-		ref: m,
-		position: "absolute",
-		top: 0,
-		left: 0,
+		x,
+		T,
+		A
+	]), i(() => {
+		k.current !== N.side && (k.current = N.side, b?.(N.side));
+	});
+	let P = N.layerProps.ref, F = c((e) => {
+		P?.(e), j.current = e, typeof h == "function" ? h(e) : h && (h.current = e);
+	}, [P, h]), I = /* @__PURE__ */ f(a, {
+		...N.layerProps,
+		ref: F,
 		transition: "none",
-		props: { dir: w.rtl ? "rtl" : "ltr" },
-		style: {
-			transform: `translate3d(calc(${w.left}px + ${g}),calc(${w.top}px + ${_}), 0)`,
-			willChange: "transform",
-			width: x ? w.width : void 0
-		},
-		children: /* @__PURE__ */ u(r, {
-			ref: b,
-			...S
+		props: A ? { popover: "manual" } : { dir: D ? "rtl" : "ltr" },
+		children: /* @__PURE__ */ f(a, {
+			ref: S,
+			...w
 		})
-	}), E)] });
+	});
+	return /* @__PURE__ */ p(d, { children: [!x && /* @__PURE__ */ f(a, { ref: E }), A ? I : M && m(I, M)] });
 }
-var h = i(m);
-h.displayName = "Overlay";
+var g = s(h);
+g.displayName = "Overlay";
 //#endregion
-export { h as default };
+export { g as default };

package/components/popover.cjs

@@ -0,0 +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("./overlay.cjs"),i=require("../layer.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}=i.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)(r.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;