@slotted/react 0.1.0-beta.8 → 0.1.0-beta.9

package/dist/popover-Dwj841Zz.js

@@ -0,0 +1,500 @@
+import { n as e, t } from "./icon-DMdotKfc.js";
+import { r as n } from "./i18n-DpW8lqJ1.js";
+import { keyedProps as r, selectorKeyProps as i } from "@slotted/core/selector-key";
+import { createControllable as a } from "@slotted/core/state";
+import { Children as o, createContext as s, isValidElement as c, useCallback as l, useContext as u, useEffect as d, useId as f, useImperativeHandle as p, useLayoutEffect as m, useRef as h, useState as g } from "react";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+import { createPresence as b } from "@slotted/core/presence";
+import { createPortalRoot as ee, setPortalContainer as x } from "@slotted/core/portal";
+import { createDismissableLayer as te } from "@slotted/core/dismissable-layer";
+import { createPositioner as ne } from "@slotted/core/positioner";
+import { createPortal as S } from "react-dom";
+import { popoverMessages as C } from "@slotted/core/i18n";
+//#region src/popover/popover-defaults.tsx
+var w = {
+	align: "center",
+	alignOffset: 0,
+	arrow: !0,
+	arrowPadding: 12,
+	autoFocus: !0,
+	closeOnEscape: !0,
+	closeOnOutsidePress: !0,
+	collisionPadding: 8,
+	flip: !0,
+	hideWhenDetached: !1,
+	mount: "active",
+	portal: !0,
+	shift: !0,
+	side: "bottom",
+	sideOffset: 0,
+	size: "md",
+	strategy: "absolute",
+	width: "auto"
+}, T = s(w);
+function E() {
+	return u(T);
+}
+function D({ children: e, container: t, ...n }) {
+	let r = {
+		...E(),
+		...O(n)
+	};
+	return d(() => {
+		if (t !== void 0) return x(t), () => x(null);
+	}, [t]), /* @__PURE__ */ v(T.Provider, {
+		value: r,
+		children: e
+	});
+}
+function O(e) {
+	let t = Object.entries(e).filter(([, e]) => e !== void 0);
+	return Object.fromEntries(t);
+}
+//#endregion
+//#region src/popover/popover.tsx
+var k = s(void 0), A = s({ current: void 0 });
+function re() {
+	return u(A);
+}
+function j() {
+	let e = u(k);
+	if (e === void 0) throw Error("Every Popover part has to be inside a Popover.");
+	return e;
+}
+function M({ align: e, alignOffset: t, arrow: r, arrowPadding: i, autoFocus: o, children: s, closeOnEscape: c, closeOnOutsidePress: u, collisionPadding: d, defaultOpen: m, disabled: _, finalFocus: y, flip: b, hideWhenDetached: ee, initialFocus: x, messages: te, mount: ne, onOpenChange: S, open: w, portal: T, ref: D, shift: O, side: re, sideOffset: j, size: M, strategy: N, width: P }) {
+	let F = E(), ie = n(C, te), I = f(), [L, R] = g(m ?? !1), [z, B] = g(null), [V, H] = g(null), [U, W] = g(null), [G, K] = g(null), [q, J] = g(!1), [ae, Y] = g(!1), X = h(void 0), Z = _ === !0, Q = (w ?? L) && !Z, oe = h(Q);
+	Q && (oe.current = !0);
+	let se = h({
+		current: Q,
+		onOpenChange: S,
+		open: w
+	});
+	se.current = {
+		current: Q,
+		onOpenChange: S,
+		open: w
+	};
+	let $ = l((e, t, n) => {
+		let r = se.current;
+		if (e === r.current) return;
+		let i = !1, o = a({
+			controlled: r.open,
+			initial: r.current,
+			onRequest: (e) => {
+				i = e.cancelled, r.onOpenChange?.(e.value, e);
+			}
+		}).request(e, t, n);
+		i || o && R(e);
+	}, []);
+	p(D, () => ({
+		close: () => $(!1, "programmatic"),
+		open: () => $(!0, "programmatic"),
+		reposition: () => X.current?.()
+	}), [$]);
+	let ce = {
+		align: e ?? F.align,
+		alignOffset: t ?? F.alignOffset,
+		anchorNode: V,
+		arrowNode: U,
+		arrowPadding: i ?? F.arrowPadding,
+		autoFocus: o ?? F.autoFocus,
+		closeOnEscape: c ?? F.closeOnEscape,
+		closeOnOutsidePress: u ?? F.closeOnOutsidePress,
+		collisionPadding: d ?? F.collisionPadding,
+		contentId: `${I}panel`,
+		contentNode: G,
+		descriptionId: `${I}description`,
+		disabled: Z,
+		finalFocus: y,
+		flip: b ?? F.flip,
+		hasDescription: ae,
+		hasTitle: q,
+		hideWhenDetached: ee ?? F.hideWhenDetached,
+		initialFocus: x,
+		mount: ne ?? F.mount,
+		open: Q,
+		portal: T ?? F.portal,
+		seen: oe.current,
+		setAnchorNode: H,
+		setArrowNode: W,
+		setContentNode: K,
+		setHasDescription: Y,
+		setHasTitle: J,
+		setTriggerNode: B,
+		shift: O ?? F.shift,
+		showArrow: r ?? F.arrow,
+		side: re ?? F.side,
+		sideOffset: j ?? F.sideOffset,
+		size: M ?? F.size,
+		strategy: N ?? F.strategy,
+		t: ie,
+		titleId: `${I}title`,
+		toggle: $,
+		triggerNode: z,
+		width: P ?? F.width
+	};
+	return /* @__PURE__ */ v(k.Provider, {
+		value: ce,
+		children: /* @__PURE__ */ v(A.Provider, {
+			value: X,
+			children: s
+		})
+	});
+}
+//#endregion
+//#region src/popover/popover-parts.tsx
+function N(e, t) {
+	return (n) => {
+		e?.(n), n.defaultPrevented || t(n);
+	};
+}
+function P(e, ...t) {
+	for (let n of t) typeof n == "function" ? n(e) : n != null && (n.current = e);
+}
+function F(e, t) {
+	return e === void 0 ? null : typeof e == "string" ? t?.querySelector(e) ?? null : e instanceof Element ? e : e.current ?? null;
+}
+function ie(e, t, n, r) {
+	if (n === "center" || r === "anchor" && (t === "top" || t === "bottom")) return 0;
+	let i = Number.parseFloat(e.ownerDocument.defaultView?.getComputedStyle(e).paddingTop ?? "") || 0;
+	return n === "start" ? -i : i;
+}
+function I({ children: e, ref: t, render: n, ...r }) {
+	let i = j(), a = (e) => {
+		i.toggle(!i.open, e.detail === 0 ? "keyboard" : "pointer", e.nativeEvent);
+	}, o = {
+		...r,
+		children: e,
+		...i.contentNode === null ? {} : { "aria-controls": i.contentId },
+		"aria-expanded": i.open,
+		"aria-haspopup": "dialog",
+		...i.open ? { "data-open": "" } : {},
+		onClick: N(r.onClick, a)
+	}, s = l((e) => {
+		i.setTriggerNode(e), P(e, t);
+	}, [t, i.setTriggerNode]);
+	return n === void 0 ? /* @__PURE__ */ v("button", {
+		type: "button",
+		...o,
+		ref: s
+	}) : n({
+		...o,
+		ref: s
+	});
+}
+function L({ children: e, ref: t, render: n, ...r }) {
+	let i = j(), a = l((e) => {
+		i.setAnchorNode(e), P(e, t);
+	}, [t, i.setAnchorNode]), o = {
+		...r,
+		children: e
+	};
+	return n === void 0 ? /* @__PURE__ */ v("div", {
+		...o,
+		ref: a
+	}) : n({
+		...o,
+		ref: a
+	});
+}
+function R({ children: e, ref: t, render: n, ...i }) {
+	let a = j(), o = re(), [s, c] = g(null), [u, f] = g(null), [p, x] = g("unmounted"), [C, w] = g(!1), T = h(null), E = h(a);
+	E.current = a, d(() => {
+		let e = b({
+			present: E.current.open,
+			onStatusChange: x
+		});
+		return T.current = e, x(e.status), () => {
+			e.destroy(), T.current = null;
+		};
+	}, []), d(() => {
+		T.current?.sync(a.open);
+	}, [a.open]), d(() => {
+		T.current?.setNode(s);
+	}, [s]);
+	let D = a.mount === "eager" || a.mount === "lazy" && a.seen || a.open || p !== "unmounted";
+	d(() => {
+		let e = a.triggerNode;
+		if (e === null || C) return;
+		let t = () => w(!0);
+		return e.addEventListener("focusin", t), e.addEventListener("pointerdown", t), () => {
+			e.removeEventListener("focusin", t), e.removeEventListener("pointerdown", t);
+		};
+	}, [a.triggerNode, C]);
+	let O = D || C;
+	m(() => {
+		if (!O) {
+			f(null);
+			return;
+		}
+		let e = ee({
+			origin: a.anchorNode ?? a.triggerNode,
+			disabled: !a.portal
+		});
+		return f(e.container), () => e.release();
+	}, [
+		O,
+		a.anchorNode,
+		a.portal,
+		a.triggerNode
+	]);
+	let { align: k, alignOffset: A, arrowNode: M, arrowPadding: N, collisionPadding: I, flip: L, hideWhenDetached: R, shift: z, side: B, sideOffset: V, strategy: H, width: U } = a, W = a.anchorNode ?? a.triggerNode, G = h(null), K = h(0), q = h(!1), J = l((e, t) => {
+		e.update().then(() => {
+			if (G.current !== e || !E.current.open || (t.setAttribute("data-open", ""), q.current)) return;
+			q.current = !0;
+			let n = t.ownerDocument.defaultView;
+			n !== null && E.current.autoFocus && K.current === 0 && (K.current = n.requestAnimationFrame(() => {
+				K.current = 0;
+				let { contentNode: e, initialFocus: t, open: n } = E.current;
+				n && (F(t, e) ?? e)?.focus();
+			}));
+		});
+	}, []);
+	m(() => {
+		if (s === null || W === null) return;
+		let e = ne(W, s, {
+			align: k,
+			alignOffset: A + ie(s, B, k, U),
+			boundaryPadding: I,
+			flip: L,
+			hideWhenDetached: R,
+			matchWidth: U === "anchor",
+			shift: z,
+			side: B,
+			sideOffset: V,
+			strategy: H,
+			...M ? {
+				arrow: M,
+				arrowPadding: N
+			} : {}
+		});
+		return o.current = () => void e.update(), G.current = e, E.current.open && J(e, s), () => {
+			o.current = void 0, e.destroy(), G.current = null, s.removeAttribute("data-open");
+		};
+	}, [
+		k,
+		A,
+		W,
+		M,
+		N,
+		I,
+		L,
+		R,
+		s,
+		o,
+		z,
+		B,
+		V,
+		H,
+		U,
+		J
+	]), m(() => {
+		let e = G.current;
+		if (e !== null && s !== null) {
+			if (a.open) {
+				J(e, s);
+				return;
+			}
+			s.removeAttribute("data-open"), K.current !== 0 && (s.ownerDocument.defaultView?.cancelAnimationFrame(K.current), K.current = 0);
+		}
+	}, [
+		s,
+		J,
+		a.open
+	]), d(() => {
+		if (s === null || !a.open) return;
+		let e = [a.triggerNode, a.anchorNode].filter((e) => e !== null), t = te(s, {
+			escape: a.closeOnEscape,
+			focusOutside: !1,
+			modal: !1,
+			outsidePress: a.closeOnOutsidePress,
+			scrollLock: !1,
+			...e.length > 0 ? { branches: e } : {},
+			onDismiss: (e) => {
+				E.current.toggle(!1, e.reason === "escape" ? "escape" : "outsidePress", e.source);
+			}
+		});
+		return () => t.destroy();
+	}, [
+		s,
+		a.anchorNode,
+		a.closeOnEscape,
+		a.closeOnOutsidePress,
+		a.open,
+		a.triggerNode
+	]), d(() => {
+		let { contentNode: e, finalFocus: t, open: n, triggerNode: r } = E.current;
+		if (!n && q.current) {
+			q.current = !1;
+			let n = s?.ownerDocument.activeElement ?? null;
+			if (s !== null && n !== null && !s.contains(n)) return;
+			(F(t, e) ?? r)?.focus();
+		}
+	}, [s, a.open]);
+	let ae = () => {
+		let { toggle: e, triggerNode: t } = E.current;
+		e(!1, "keyboard"), t?.focus();
+	}, Y = l((e) => {
+		c(e), P(e, t);
+	}, [t]);
+	if (!D || a.portal && u === null) return null;
+	let X = /* @__PURE__ */ v("span", {
+		"aria-hidden": "true",
+		"data-part": "focus-guard",
+		"data-part-focus-guard": "",
+		onFocus: ae,
+		tabIndex: 0
+	}), Z = r({
+		...i,
+		children: /* @__PURE__ */ y(_, { children: [
+			X,
+			e,
+			X
+		] }),
+		"data-align": k,
+		"data-part": "root",
+		"data-size": a.size,
+		"data-ui": "popover",
+		"data-width": a.width
+	}), Q = n === void 0 ? /* @__PURE__ */ v("div", {
+		...Z,
+		ref: Y
+	}) : n({
+		...Z,
+		ref: Y
+	});
+	return u === null ? Q : S(Q, u);
+}
+function z({ children: e, ref: t, render: n, ...i }) {
+	let a = j(), o = l((e) => {
+		a.setContentNode(e), P(e, t);
+	}, [t, a.setContentNode]), s = r({
+		...i,
+		children: e,
+		...a.hasTitle ? { "aria-labelledby": a.titleId } : {},
+		...a.hasDescription ? { "aria-describedby": a.descriptionId } : {},
+		"data-part": "content",
+		id: a.contentId,
+		role: i.role ?? "dialog",
+		tabIndex: -1
+	});
+	return n === void 0 ? /* @__PURE__ */ v("div", {
+		...s,
+		ref: o
+	}) : n({
+		...s,
+		ref: o
+	});
+}
+function B({ children: e, ref: t, render: n, ...r }) {
+	let a = {
+		...r,
+		children: e,
+		"data-part": "header",
+		...i("part", "header")
+	};
+	return n === void 0 ? /* @__PURE__ */ v("div", {
+		...a,
+		ref: t
+	}) : n(a);
+}
+function V({ children: e, ref: t, render: n, ...i }) {
+	let a = j(), { setHasTitle: o } = a;
+	d(() => (o(!0), () => o(!1)), [o]);
+	let s = r({
+		...i,
+		children: e,
+		"data-part": "title",
+		id: a.titleId
+	});
+	return n === void 0 ? /* @__PURE__ */ v("div", {
+		...s,
+		ref: t
+	}) : n(s);
+}
+function H({ children: e, ref: t, render: n, ...i }) {
+	let a = j(), { setHasDescription: o } = a;
+	d(() => (o(!0), () => o(!1)), [o]);
+	let s = r({
+		...i,
+		children: e,
+		"data-part": "description",
+		id: a.descriptionId
+	});
+	return n === void 0 ? /* @__PURE__ */ v("p", {
+		...s,
+		ref: t
+	}) : n(s);
+}
+function U({ children: e, ref: t, render: n, ...r }) {
+	let a = {
+		...r,
+		children: e,
+		"data-part": "body",
+		...i("part", "body")
+	};
+	return n === void 0 ? /* @__PURE__ */ v("div", {
+		...a,
+		ref: t
+	}) : n(a);
+}
+function W({ children: e, ref: t, render: n, ...r }) {
+	let a = {
+		...r,
+		children: e,
+		"data-part": "footer",
+		...i("part", "footer")
+	};
+	return n === void 0 ? /* @__PURE__ */ v("div", {
+		...a,
+		ref: t
+	}) : n(a);
+}
+function G({ children: n, ref: i, render: a, ...o }) {
+	let s = j(), c = h(null), [u, d] = g(null);
+	m(() => {
+		c.current !== null && d((c.current.textContent ?? "").trim() !== "");
+	});
+	let f = u ?? K(n), p = (e) => {
+		s.toggle(!1, "dismiss", e.nativeEvent);
+	}, _ = l((e) => {
+		c.current = e, P(e, i);
+	}, [i]), y = r({
+		...o,
+		"aria-label": o["aria-label"] ?? (f ? void 0 : s.t("close")),
+		children: n ?? /* @__PURE__ */ v(t, {
+			size: "sm",
+			children: /* @__PURE__ */ v(e, { name: "x" })
+		}),
+		"data-part": "close",
+		onClick: N(o.onClick, p)
+	});
+	return a === void 0 ? /* @__PURE__ */ v("button", {
+		type: "button",
+		...y,
+		ref: _
+	}) : a({
+		...y,
+		ref: _
+	});
+}
+function K(e) {
+	return o.toArray(e).some((e) => typeof e == "string" || typeof e == "number" ? String(e).trim() !== "" : c(e) && K(e.props.children));
+}
+function q({ ref: e, render: t, ...n }) {
+	let i = j(), a = l((t) => {
+		i.setArrowNode(t), P(t, e);
+	}, [e, i.setArrowNode]);
+	if (!i.showArrow) return null;
+	let o = r({
+		...n,
+		"aria-hidden": !0,
+		"data-part": "arrow"
+	});
+	return t === void 0 ? /* @__PURE__ */ v("div", {
+		...o,
+		ref: a
+	}) : t(o);
+}
+//#endregion
+export { z as a, B as c, I as d, M as f, E as g, D as h, G as i, R as l, w as m, q as n, H as o, j as p, U as r, W as s, L as t, V as u };

package/dist/popover.js

@@ -1,2 +1,2 @@
-import { a as e, c as t, d as n, f as r, g as i, h as a, i as o, l as s, m as c, n as l, o as u, p as d, r as f, s as p, t as m, u as h } from "./popover-DEp8Bf3e.js";
+import { a as e, c as t, d as n, f as r, g as i, h as a, i as o, l as s, m as c, n as l, o as u, p as d, r as f, s as p, t as m, u as h } from "./popover-Dwj841Zz.js";
 export { c as POPOVER_FALLBACK, r as Popover, m as PopoverAnchor, l as PopoverArrow, f as PopoverBody, o as PopoverClose, e as PopoverContent, a as PopoverDefaultsProvider, u as PopoverDescription, p as PopoverFooter, t as PopoverHeader, s as PopoverLayer, h as PopoverTitle, n as PopoverTrigger, d as usePopover, i as usePopoverDefaults };