@slotted/react 0.1.0-beta.1 → 0.1.0-beta.11

package/dist/tooltip-DrFiRlH8.js

@@ -0,0 +1,411 @@
+import { keyedProps as e } from "@slotted/core/selector-key";
+import { createControllable as t } from "@slotted/core/state";
+import { createContext as n, useCallback as r, useContext as i, useEffect as a, useId as o, useImperativeHandle as s, useLayoutEffect as c, useRef as l, useState as u } from "react";
+import { jsx as d } from "react/jsx-runtime";
+import { isClipped as f } from "@slotted/core/overflow";
+import { createPresence as ee } from "@slotted/core/presence";
+import { createPortalRoot as p, setPortalContainer as m } from "@slotted/core/portal";
+import { createDismissableLayer as h } from "@slotted/core/dismissable-layer";
+import { createPositioner as g } from "@slotted/core/positioner";
+import { createPortal as _ } from "react-dom";
+//#region src/tooltip/tooltip-defaults.tsx
+var v = {
+	align: "center",
+	alignOffset: 0,
+	arrow: !0,
+	arrowPadding: 8,
+	closeDelay: 150,
+	closeOnPress: !0,
+	collisionPadding: 8,
+	describes: "description",
+	flip: !0,
+	groupDelay: 400,
+	hideWhenDetached: !0,
+	hoverable: !0,
+	mount: "active",
+	openDelay: 600,
+	openOn: "hover",
+	portal: !0,
+	shift: !0,
+	side: "top",
+	sideOffset: 0,
+	size: "md",
+	strategy: "absolute",
+	touchDelay: 500,
+	variant: "inverse",
+	whenClipped: !1
+}, y = n({
+	defaults: v,
+	group: { lastClosedAt: 0 }
+});
+function b() {
+	return i(y).defaults;
+}
+function te() {
+	return i(y).group;
+}
+function x({ children: e, container: t, ...n }) {
+	let r = b(), i = l({ lastClosedAt: 0 }), o = {
+		defaults: {
+			...r,
+			...S(n)
+		},
+		group: i.current
+	};
+	return a(() => {
+		if (t !== void 0) return m(t), () => m(null);
+	}, [t]), /* @__PURE__ */ d(y.Provider, {
+		value: o,
+		children: e
+	});
+}
+function S(e) {
+	let t = Object.entries(e).filter(([, e]) => e !== void 0);
+	return Object.fromEntries(t);
+}
+//#endregion
+//#region src/tooltip/tooltip.tsx
+var C = n(void 0), w = n({ current: void 0 });
+function ne() {
+	return i(w);
+}
+function T() {
+	let e = i(C);
+	if (e === void 0) throw Error("TooltipTrigger, TooltipLayer, TooltipContent and TooltipArrow have to be inside a Tooltip.");
+	return e;
+}
+function E({ align: e, alignOffset: n, arrow: i, arrowPadding: c, children: ee, closeDelay: p, closeOnPress: m, collisionPadding: h, defaultOpen: g, describes: _, disabled: v, flip: y, hideWhenDetached: x, hoverable: S, mount: ne, onOpenChange: T, open: E, openDelay: D, openOn: O, portal: k, ref: A, shift: j, side: M, sideOffset: N, size: P, strategy: F, touchDelay: I, variant: L, whenClipped: R }) {
+	let z = b(), B = te(), V = `${o()}tooltip`, [H, U] = u(g ?? !1), [W, re] = u(null), [G, K] = u(null), q = l(void 0), J = v === !0, Y = (E ?? H) && !J, ie = _ ?? z.describes, ae = ie === "label" ? "eager" : ne ?? z.mount, X = D ?? z.openDelay, oe = p ?? z.closeDelay, se = I ?? z.touchDelay, ce = z.groupDelay, le = l(Y);
+	Y && (le.current = !0);
+	let Z = l(void 0), ue = R ?? z.whenClipped, de = l({
+		current: Y,
+		disabled: J,
+		group: B,
+		onOpenChange: T,
+		open: E,
+		triggerNode: W,
+		whenClipped: ue
+	});
+	de.current = {
+		current: Y,
+		disabled: J,
+		group: B,
+		onOpenChange: T,
+		open: E,
+		triggerNode: W,
+		whenClipped: ue
+	};
+	let Q = r(() => {
+		Z.current !== void 0 && clearTimeout(Z.current), Z.current = void 0;
+	}, []), $ = r((e, n, r) => {
+		Q();
+		let i = de.current;
+		if (e === i.current || e && i.disabled || e && i.whenClipped && i.triggerNode !== null && !f(i.triggerNode)) return;
+		let a = !1, o = t({
+			controlled: i.open,
+			initial: i.current,
+			onRequest: (e) => {
+				a = e.cancelled, i.onOpenChange?.(e.value, e);
+			}
+		}).request(e, n, r);
+		a || (e || (i.group.lastClosedAt = Date.now()), o && U(e));
+	}, [Q]), fe = r((e) => {
+		Q();
+		let t = Date.now() - de.current.group.lastClosedAt;
+		if (X <= 0 || t < ce) {
+			$(!0, "pointer", e);
+			return;
+		}
+		Z.current = setTimeout(() => $(!0, "pointer", e), X);
+	}, [
+		Q,
+		ce,
+		X,
+		$
+	]), pe = r((e) => {
+		if (Q(), oe <= 0) {
+			$(!1, "pointer", e);
+			return;
+		}
+		Z.current = setTimeout(() => $(!1, "pointer", e), oe);
+	}, [
+		Q,
+		oe,
+		$
+	]), me = r((e) => {
+		Q(), Z.current = setTimeout(() => $(!0, "pointer", e), se);
+	}, [
+		Q,
+		se,
+		$
+	]);
+	a(() => Q, [Q]), a(() => {
+		J && (Q(), U(!1));
+	}, [Q, J]), s(A, () => ({
+		close: () => $(!1, "programmatic"),
+		open: () => $(!0, "programmatic"),
+		reposition: () => q.current?.()
+	}), [$]);
+	let he = {
+		align: e ?? z.align,
+		alignOffset: n ?? z.alignOffset,
+		arrowNode: G,
+		arrowPadding: c ?? z.arrowPadding,
+		cancelPending: Q,
+		closeAfterDelay: pe,
+		closeOnPress: m ?? z.closeOnPress,
+		collisionPadding: h ?? z.collisionPadding,
+		contentId: V,
+		describes: ie,
+		disabled: J,
+		flip: y ?? z.flip,
+		hideWhenDetached: x ?? z.hideWhenDetached,
+		hoverable: S ?? z.hoverable,
+		mount: ae,
+		open: Y,
+		openAfterDelay: fe,
+		openOn: O ?? z.openOn,
+		portal: k ?? z.portal,
+		pressAndHold: me,
+		seen: le.current,
+		setArrowNode: K,
+		setTriggerNode: re,
+		shift: j ?? z.shift,
+		showArrow: i ?? z.arrow,
+		side: M ?? z.side,
+		sideOffset: N ?? z.sideOffset,
+		size: P ?? z.size,
+		strategy: F ?? z.strategy,
+		toggle: $,
+		triggerNode: W,
+		variant: L ?? z.variant
+	};
+	return /* @__PURE__ */ d(C.Provider, {
+		value: he,
+		children: /* @__PURE__ */ d(w.Provider, {
+			value: q,
+			children: ee
+		})
+	});
+}
+//#endregion
+//#region src/tooltip/tooltip-parts.tsx
+function D(e, t) {
+	return (n) => {
+		e?.(n), n.defaultPrevented || t(n);
+	};
+}
+function O(e, ...t) {
+	for (let n of t) typeof n == "function" ? n(e) : n != null && (n.current = e);
+}
+function k({ children: e, ref: t, render: n, ...i }) {
+	let a = T(), o = l(!1), s = (e) => {
+		a.openOn === "hover" && e.pointerType !== "touch" && a.openAfterDelay(e.nativeEvent);
+	}, c = (e) => {
+		o.current = !1, a.openOn !== "manual" && a.closeAfterDelay(e.nativeEvent);
+	}, u = (e) => {
+		if (e.pointerType === "touch") {
+			o.current = !0, a.pressAndHold(e.nativeEvent);
+			return;
+		}
+		a.closeOnPress && a.open && a.toggle(!1, "pointer", e.nativeEvent);
+	}, f = (e) => {
+		o.current && (o.current = !1, a.cancelPending());
+	}, ee = (e) => {
+		a.openOn !== "manual" && e.target.matches(":focus-visible") && a.toggle(!0, "keyboard", e.nativeEvent);
+	}, p = (e) => {
+		a.openOn !== "manual" && a.toggle(!1, "blur", e.nativeEvent);
+	}, m = (e) => {
+		a.closeOnPress && a.open && a.toggle(!1, e.detail === 0 ? "keyboard" : "pointer", e.nativeEvent);
+	}, h = a.describes === "description", g = a.describes !== "none" && (a.open || a.describes === "label"), _ = {
+		...i,
+		children: e,
+		...g && h ? { "aria-describedby": a.contentId } : {},
+		"aria-labelledby": g && !h ? a.contentId : i["aria-labelledby"],
+		...a.open ? { "data-open": "" } : {},
+		onBlur: D(i.onBlur, p),
+		onClick: D(i.onClick, m),
+		onFocus: D(i.onFocus, ee),
+		onPointerCancel: D(i.onPointerCancel, f),
+		onPointerDown: D(i.onPointerDown, u),
+		onPointerEnter: D(i.onPointerEnter, s),
+		onPointerLeave: D(i.onPointerLeave, c),
+		onPointerUp: D(i.onPointerUp, f)
+	}, v = r((e) => {
+		a.setTriggerNode(e), O(e, t);
+	}, [t, a.setTriggerNode]);
+	return n === void 0 ? /* @__PURE__ */ d("button", {
+		type: "button",
+		..._,
+		ref: v
+	}) : n({
+		..._,
+		ref: v
+	});
+}
+function A({ children: t, ref: n, render: i, ...o }) {
+	let s = T(), f = ne(), [m, v] = u(null), [y, b] = u(null), [te, x] = u("unmounted"), [S, C] = u(!1), w = l(null), E = l(s);
+	E.current = s, a(() => {
+		let e = ee({
+			present: E.current.open,
+			onStatusChange: x
+		});
+		return w.current = e, x(e.status), () => {
+			e.destroy(), w.current = null;
+		};
+	}, []), a(() => {
+		w.current?.sync(s.open);
+	}, [s.open]), a(() => {
+		w.current?.setNode(m);
+	}, [m]);
+	let k = s.mount === "eager" || s.mount === "lazy" && s.seen || s.open || te !== "unmounted";
+	a(() => {
+		let e = s.triggerNode;
+		if (e === null || S) return;
+		let t = () => C(!0);
+		return e.addEventListener("focusin", t), e.addEventListener("pointerover", t), () => {
+			e.removeEventListener("focusin", t), e.removeEventListener("pointerover", t);
+		};
+	}, [s.triggerNode, S]);
+	let A = k || S;
+	c(() => {
+		if (!A) {
+			b(null);
+			return;
+		}
+		let e = p({
+			origin: s.triggerNode,
+			disabled: !s.portal
+		});
+		return b(e.container), () => e.release();
+	}, [
+		A,
+		s.portal,
+		s.triggerNode
+	]);
+	let { align: j, alignOffset: M, arrowNode: N, arrowPadding: P, collisionPadding: F, flip: I, hideWhenDetached: L, shift: R, side: z, sideOffset: B, strategy: V } = s, H = l(null), U = r((e, t) => {
+		e.update().then(() => {
+			H.current === e && E.current.open && t.setAttribute("data-open", "");
+		});
+	}, []);
+	c(() => {
+		if (m === null || s.triggerNode === null) return;
+		let e = g(s.triggerNode, m, {
+			align: j,
+			alignOffset: M,
+			boundaryPadding: F,
+			flip: I,
+			hideWhenDetached: L,
+			shift: R,
+			side: z,
+			sideOffset: B,
+			strategy: V,
+			...N ? {
+				arrow: N,
+				arrowPadding: P
+			} : {}
+		});
+		return f.current = () => void e.update(), H.current = e, E.current.open && U(e, m), () => {
+			f.current = void 0, e.destroy(), H.current = null, m.removeAttribute("data-open");
+		};
+	}, [
+		j,
+		M,
+		N,
+		P,
+		F,
+		I,
+		L,
+		m,
+		f,
+		R,
+		z,
+		B,
+		V,
+		s.triggerNode,
+		U
+	]), c(() => {
+		let e = H.current;
+		e !== null && m !== null && (s.open ? U(e, m) : m.removeAttribute("data-open"));
+	}, [
+		m,
+		U,
+		s.open
+	]), a(() => {
+		if (m === null || !s.open) return;
+		let e = h(m, {
+			escape: !0,
+			focusOutside: !1,
+			modal: !1,
+			outsidePress: !0,
+			scrollLock: !1,
+			...s.triggerNode ? { branches: [s.triggerNode] } : {},
+			onDismiss: (e) => {
+				E.current.toggle(!1, e.reason === "escape" ? "escape" : "pointer", e.source);
+			}
+		});
+		return () => e.destroy();
+	}, [
+		m,
+		s.open,
+		s.triggerNode
+	]);
+	let W = () => {
+		s.hoverable && s.cancelPending();
+	}, re = (e) => {
+		s.hoverable && s.closeAfterDelay(e.nativeEvent);
+	}, G = r((e) => {
+		v(e), O(e, n);
+	}, [n]);
+	if (!k) return null;
+	let K = e({
+		...o,
+		children: t,
+		"data-align": j,
+		...s.hoverable ? { "data-hoverable": "" } : {},
+		"data-part": "root",
+		"data-size": s.size,
+		"data-ui": "tooltip",
+		"data-variant": s.variant,
+		onPointerEnter: D(o.onPointerEnter, W),
+		onPointerLeave: D(o.onPointerLeave, re)
+	}), q = i === void 0 ? /* @__PURE__ */ d("div", {
+		...K,
+		ref: G
+	}) : i({
+		...K,
+		ref: G
+	});
+	return y === null ? q : _(q, y);
+}
+function j({ children: t, ref: n, render: r, ...i }) {
+	let a = T(), o = e({
+		...i,
+		children: t,
+		...a.describes === "none" ? { "aria-hidden": !0 } : {},
+		"data-part": "content",
+		id: a.contentId,
+		role: "tooltip"
+	});
+	return r === void 0 ? /* @__PURE__ */ d("div", {
+		...o,
+		ref: n
+	}) : r(o);
+}
+function M({ ref: t, render: n, ...i }) {
+	let a = T(), o = r((e) => {
+		a.setArrowNode(e), O(e, t);
+	}, [t, a.setArrowNode]);
+	if (!a.showArrow) return null;
+	let s = e({
+		...i,
+		"aria-hidden": !0,
+		"data-part": "arrow"
+	});
+	return n === void 0 ? /* @__PURE__ */ d("div", {
+		...s,
+		ref: o
+	}) : n(s);
+}
+//#endregion
+export { E as a, x as c, k as i, b as l, j as n, T as o, A as r, v as s, M as t };

package/dist/tooltip.js

@@ -1,2 +1,2 @@
-import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "./tooltip-BggqPDcW.js";
+import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "./tooltip-DrFiRlH8.js";
 export { s as TOOLTIP_FALLBACK, e as Tooltip, c as TooltipArrow, i as TooltipContent, t as TooltipDefaultsProvider, o as TooltipLayer, n as TooltipTrigger, a as useTooltip, r as useTooltipDefaults };