@jonmilner/ui 0.5.4 → 0.5.5

package/dist/Toast/client.mjs

@@ -11,10 +11,10 @@ import { CircleCheckIcon as c } from "../icons/CircleCheckIcon.mjs";
 import { InfoIcon as l } from "../icons/InfoIcon.mjs";
 import { announcer as u, close as d, content as f, list as p, root as m, toast as h, viewport as g } from "./Toast.css.mjs";
 import { jsx as _, jsxs as v } from "react/jsx-runtime";
-import { createContext as y, use as b, useCallback as x, useLayoutEffect as S, useMemo as C, useRef as w, useState as T } from "react";
-import { Toast as E } from "@base-ui/react/toast";
+import { createContext as y, use as b, useCallback as x, useEffect as S, useLayoutEffect as C, useMemo as w, useRef as T, useState as E } from "react";
+import { Toast as D } from "@base-ui/react/toast";
 //#region src/Toast/client.tsx
-var D = {
+var O = {
 	info: {
 		Icon: l,
 		color: "fgMuted"
@@ -27,13 +27,13 @@ var D = {
 		Icon: o,
 		color: "danger"
 	}
-}, O = y(null), k = y(null), A = (e) => e !== void 0 && Object.hasOwn(D, e);
-function j({ limit: e = 3, closeLabel: n = "Dismiss", regionLabel: r = "Notifications", className: i, style: o, children: s }) {
-	let { container: c, ref: l } = a(), [u] = T(E.createToastManager);
-	return /* @__PURE__ */ _(E.Provider, {
+}, k = y(null), A = y(null), j = (e) => e !== void 0 && Object.hasOwn(O, e);
+function M({ limit: e = 3, closeLabel: n = "Dismiss", regionLabel: r = "Notifications", className: i, style: o, children: s }) {
+	let { container: c, ref: l } = a(), [u] = E(D.createToastManager);
+	return /* @__PURE__ */ _(D.Provider, {
 		limit: e,
 		toastManager: u,
-		children: /* @__PURE__ */ v(O, {
+		children: /* @__PURE__ */ v(k, {
 			value: u,
 			children: [
 				/* @__PURE__ */ _(t, {
@@ -42,23 +42,38 @@ function j({ limit: e = 3, closeLabel: n = "Dismiss", regionLabel: r = "Notifica
 					ref: l
 				}),
 				s,
-				/* @__PURE__ */ _(N, {}),
-				/* @__PURE__ */ _(E.Portal, {
+				/* @__PURE__ */ _(P, {}),
+				/* @__PURE__ */ _(D.Portal, {
 					container: c,
-					children: /* @__PURE__ */ _(M, {
+					children: /* @__PURE__ */ _(N, {
 						className: i,
 						regionLabel: r,
 						style: o,
-						children: /* @__PURE__ */ _(P, { closeLabel: n })
+						children: /* @__PURE__ */ _(F, { closeLabel: n })
 					})
 				})
 			]
 		})
 	});
 }
-function M({ regionLabel: n, className: r, style: i, children: a }) {
-	let o = w(null);
-	return /* @__PURE__ */ _(E.Viewport, {
+function N({ regionLabel: n, className: r, style: i, children: a }) {
+	let o = T(null), s = T(null);
+	return S(() => {
+		let e = s.current;
+		if (!e) return;
+		let t = e.ownerDocument, n = !1, r = (t) => {
+			e.contains(t.target) ? n = !0 : n && (n = !1, e.dispatchEvent(new MouseEvent("mouseout", {
+				bubbles: !0,
+				relatedTarget: e.parentElement
+			})));
+		}, i = (t) => {
+			let r = t.relatedTarget;
+			(!r || !e.contains(r)) && (n = !1);
+		};
+		return t.addEventListener("mouseover", r), t.addEventListener("mouseout", i), () => {
+			t.removeEventListener("mouseover", r), t.removeEventListener("mouseout", i);
+		};
+	}, []), /* @__PURE__ */ _(D.Viewport, {
 		"aria-atomic": void 0,
 		"aria-label": n,
 		"aria-live": "off",
@@ -67,6 +82,7 @@ function M({ regionLabel: n, className: r, style: i, children: a }) {
 			let t = e.relatedTarget;
 			t && !e.currentTarget.contains(t) && (o.current = t);
 		},
+		ref: s,
 		render: /* @__PURE__ */ _(t, {
 			className: e(g, r),
 			position: "fixed",
@@ -75,15 +91,15 @@ function M({ regionLabel: n, className: r, style: i, children: a }) {
 		}),
 		children: /* @__PURE__ */ _("div", {
 			className: p,
-			children: /* @__PURE__ */ _(k, {
+			children: /* @__PURE__ */ _(A, {
 				value: o,
 				children: a
 			})
 		})
 	});
 }
-function N() {
-	let { toasts: e } = E.useToastManager(), t = (t) => e.filter((e) => e.type === "error" === t).map((e) => /* @__PURE__ */ v("div", { children: [
+function P() {
+	let { toasts: e } = D.useToastManager(), t = (t) => e.filter((e) => e.type === "error" === t).map((e) => /* @__PURE__ */ v("div", { children: [
 		e.title,
 		" ",
 		e.description
@@ -103,18 +119,18 @@ function N() {
 		})]
 	});
 }
-function P({ closeLabel: e }) {
-	let { toasts: t } = E.useToastManager();
-	return t.map((t) => /* @__PURE__ */ _(F, {
+function F({ closeLabel: e }) {
+	let { toasts: t } = D.useToastManager();
+	return t.map((t) => /* @__PURE__ */ _(I, {
 		closeLabel: e,
 		toast: t
 	}, t.id));
 }
-function F({ toast: a, closeLabel: o }) {
-	let c = A(a.type) ? a.type : "info", { Icon: l, color: u } = D[c], p = b(O), g = b(k), [y, C] = T(!1), j = x((e) => {
-		e && C(getComputedStyle(e).direction === "rtl");
-	}, []), M = w(!1), N = a.transitionStatus === "ending";
-	return S(() => {
+function I({ toast: a, closeLabel: o }) {
+	let c = j(a.type) ? a.type : "info", { Icon: l, color: u } = O[c], p = b(k), g = b(A), [y, S] = E(!1), w = x((e) => {
+		e && S(getComputedStyle(e).direction === "rtl");
+	}, []), M = T(!1), N = a.transitionStatus === "ending";
+	return C(() => {
 		let e = a.ref?.current, t = e?.ownerDocument.activeElement;
 		if (!N || M.current || !t || !e.contains(t)) return;
 		let n = g?.current;
@@ -123,9 +139,9 @@ function F({ toast: a, closeLabel: o }) {
 		N,
 		g,
 		a.ref
-	]), /* @__PURE__ */ v(E.Root, {
+	]), /* @__PURE__ */ v(D.Root, {
 		"aria-modal": void 0,
-		ref: j,
+		ref: w,
 		render: /* @__PURE__ */ _(t, {
 			alignItems: "start",
 			backgroundColor: "bgRaised",
@@ -154,27 +170,27 @@ function F({ toast: a, closeLabel: o }) {
 				flexGrow: 1,
 				gap: "8",
 				children: [
-					/* @__PURE__ */ _(E.Title, { render: /* @__PURE__ */ _(r, {
+					/* @__PURE__ */ _(D.Title, { render: /* @__PURE__ */ _(r, {
 						as: "div",
 						weight: "medium"
 					}) }),
-					/* @__PURE__ */ _(E.Description, { render: /* @__PURE__ */ _(r, {
+					/* @__PURE__ */ _(D.Description, { render: /* @__PURE__ */ _(r, {
 						as: "div",
 						color: "fgMuted",
 						size: "sm"
 					}) }),
-					/* @__PURE__ */ _(E.Action, { render: /* @__PURE__ */ _(i, {
+					/* @__PURE__ */ _(D.Action, { render: /* @__PURE__ */ _(i, {
 						size: "sm",
 						variant: "secondary"
 					}) })
 				]
 			}),
-			/* @__PURE__ */ _(E.Close, {
+			/* @__PURE__ */ _(D.Close, {
 				"aria-hidden": !1,
 				"aria-label": o,
 				onClick: (e) => {
 					if (e.detail !== 0 || !p) return;
-					let t = a.ref?.current, n = (t && I(t)) ?? g?.current;
+					let t = a.ref?.current, n = (t && L(t)) ?? g?.current;
 					n instanceof HTMLElement && (e.preventBaseUIHandler(), M.current = !0, p.close(a.id), requestAnimationFrame(() => {
 						n.isConnected && n.focus();
 					}));
@@ -190,14 +206,14 @@ function F({ toast: a, closeLabel: o }) {
 		]
 	});
 }
-function I(e) {
+function L(e) {
 	let t = (e, n) => !e || !e.matches("[data-ending-style]") ? e : t(n ? e.nextElementSibling : e.previousElementSibling, n);
 	return (t(e.nextElementSibling, !0) ?? t(e.previousElementSibling, !1))?.querySelector(`.${d}`);
 }
-function L() {
-	let e = b(O);
+function R() {
+	let e = b(k);
 	if (!e) throw Error("useToast must be called under Toast.Provider.");
-	return C(() => {
+	return w(() => {
 		let t = (t) => e.close(t);
 		return {
 			add: ({ title: n, description: r, variant: i = "info", duration: a = i === "error" ? 0 : 5e3, action: o }) => {
@@ -225,4 +241,4 @@ function L() {
 	}, [e]);
 }
 //#endregion
-export { N as ToastAnnouncer, F as ToastItem, j as ToastProvider, M as ToastStack, L as useToast };
+export { P as ToastAnnouncer, I as ToastItem, M as ToastProvider, N as ToastStack, R as useToast };

package/dist/docs/manifest.json

@@ -1,7 +1,7 @@
 {
   "$schema": "./manifest.schema.json",
   "package": "@jonmilner/ui",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "components": [
     {
       "name": "AlertDialog",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jonmilner/ui",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "files": [
     "dist",
     "THIRD_PARTY_NOTICES.md"