@jonmilner/ui 0.2.6 → 0.2.7

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, useMemo as S, useRef as C, useState as w } from "react";
-import { Toast as T } from "@base-ui/react/toast";
+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";
 //#region src/Toast/client.tsx
-var E = {
+var D = {
 	info: {
 		Icon: l,
 		color: "fgMuted"
@@ -27,13 +27,13 @@ var E = {
 		Icon: o,
 		color: "danger"
 	}
-}, D = y(null), O = y(null), k = (e) => e !== void 0 && Object.hasOwn(E, e);
-function A({ limit: e = 3, closeLabel: n = "Dismiss", regionLabel: r = "Notifications", className: i, style: o, children: s }) {
-	let { container: c, ref: l } = a(), [u] = w(T.createToastManager);
-	return /* @__PURE__ */ _(T.Provider, {
+}, 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, {
 		limit: e,
 		toastManager: u,
-		children: /* @__PURE__ */ v(D, {
+		children: /* @__PURE__ */ v(O, {
 			value: u,
 			children: [
 				/* @__PURE__ */ _(t, {
@@ -42,23 +42,23 @@ function A({ limit: e = 3, closeLabel: n = "Dismiss", regionLabel: r = "Notifica
 					ref: l
 				}),
 				s,
-				/* @__PURE__ */ _(M, {}),
-				/* @__PURE__ */ _(T.Portal, {
+				/* @__PURE__ */ _(N, {}),
+				/* @__PURE__ */ _(E.Portal, {
 					container: c,
-					children: /* @__PURE__ */ _(j, {
+					children: /* @__PURE__ */ _(M, {
 						className: i,
 						regionLabel: r,
 						style: o,
-						children: /* @__PURE__ */ _(N, { closeLabel: n })
+						children: /* @__PURE__ */ _(P, { closeLabel: n })
 					})
 				})
 			]
 		})
 	});
 }
-function j({ regionLabel: n, className: r, style: i, children: a }) {
-	let o = C(null);
-	return /* @__PURE__ */ _(T.Viewport, {
+function M({ regionLabel: n, className: r, style: i, children: a }) {
+	let o = w(null);
+	return /* @__PURE__ */ _(E.Viewport, {
 		"aria-atomic": void 0,
 		"aria-label": n,
 		"aria-live": "off",
@@ -75,15 +75,15 @@ function j({ regionLabel: n, className: r, style: i, children: a }) {
 		}),
 		children: /* @__PURE__ */ _("div", {
 			className: p,
-			children: /* @__PURE__ */ _(O, {
+			children: /* @__PURE__ */ _(k, {
 				value: o,
 				children: a
 			})
 		})
 	});
 }
-function M() {
-	let { toasts: e } = T.useToastManager(), t = (t) => e.filter((e) => e.type === "error" === t).map((e) => /* @__PURE__ */ v("div", { children: [
+function N() {
+	let { toasts: e } = E.useToastManager(), t = (t) => e.filter((e) => e.type === "error" === t).map((e) => /* @__PURE__ */ v("div", { children: [
 		e.title,
 		" ",
 		e.description
@@ -103,20 +103,29 @@ function M() {
 		})]
 	});
 }
-function N({ closeLabel: e }) {
-	let { toasts: t } = T.useToastManager();
-	return t.map((t) => /* @__PURE__ */ _(P, {
+function P({ closeLabel: e }) {
+	let { toasts: t } = E.useToastManager();
+	return t.map((t) => /* @__PURE__ */ _(F, {
 		closeLabel: e,
 		toast: t
 	}, t.id));
 }
-function P({ toast: a, closeLabel: o }) {
-	let c = k(a.type) ? a.type : "info", { Icon: l, color: u } = E[c], p = b(D), g = b(O), [y, S] = w(!1), C = x((e) => {
-		e && S(getComputedStyle(e).direction === "rtl");
-	}, []);
-	return /* @__PURE__ */ v(T.Root, {
+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(() => {
+		let e = a.ref?.current, t = e?.ownerDocument.activeElement;
+		if (!N || M.current || !t || !e.contains(t)) return;
+		let n = g?.current;
+		n instanceof HTMLElement && n.isConnected && n.focus({ preventScroll: !0 });
+	}, [
+		N,
+		g,
+		a.ref
+	]), /* @__PURE__ */ v(E.Root, {
 		"aria-modal": void 0,
-		ref: C,
+		ref: j,
 		render: /* @__PURE__ */ _(t, {
 			alignItems: "start",
 			backgroundColor: "bgRaised",
@@ -145,28 +154,28 @@ function P({ toast: a, closeLabel: o }) {
 				flexGrow: 1,
 				gap: "8",
 				children: [
-					/* @__PURE__ */ _(T.Title, { render: /* @__PURE__ */ _(r, {
+					/* @__PURE__ */ _(E.Title, { render: /* @__PURE__ */ _(r, {
 						as: "div",
 						weight: "medium"
 					}) }),
-					/* @__PURE__ */ _(T.Description, { render: /* @__PURE__ */ _(r, {
+					/* @__PURE__ */ _(E.Description, { render: /* @__PURE__ */ _(r, {
 						as: "div",
 						color: "fgMuted",
 						size: "sm"
 					}) }),
-					/* @__PURE__ */ _(T.Action, { render: /* @__PURE__ */ _(i, {
+					/* @__PURE__ */ _(E.Action, { render: /* @__PURE__ */ _(i, {
 						size: "sm",
 						variant: "secondary"
 					}) })
 				]
 			}),
-			/* @__PURE__ */ _(T.Close, {
+			/* @__PURE__ */ _(E.Close, {
 				"aria-hidden": !1,
 				"aria-label": o,
 				onClick: (e) => {
 					if (e.detail !== 0 || !p) return;
-					let t = a.ref?.current, n = (t && F(t)) ?? g?.current;
-					n instanceof HTMLElement && (e.preventBaseUIHandler(), p.close(a.id), requestAnimationFrame(() => {
+					let t = a.ref?.current, n = (t && I(t)) ?? g?.current;
+					n instanceof HTMLElement && (e.preventBaseUIHandler(), M.current = !0, p.close(a.id), requestAnimationFrame(() => {
 						n.isConnected && n.focus();
 					}));
 				},
@@ -181,14 +190,14 @@ function P({ toast: a, closeLabel: o }) {
 		]
 	});
 }
-function F(e) {
+function I(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 I() {
-	let e = b(D);
+function L() {
+	let e = b(O);
 	if (!e) throw Error("useToast must be called under Toast.Provider.");
-	return S(() => {
+	return C(() => {
 		let t = (t) => e.close(t);
 		return {
 			add: ({ title: n, description: r, variant: i = "info", duration: a = i === "error" ? 0 : 5e3, action: o }) => {
@@ -216,4 +225,4 @@ function I() {
 	}, [e]);
 }
 //#endregion
-export { M as ToastAnnouncer, P as ToastItem, A as ToastProvider, j as ToastStack, I as useToast };
+export { N as ToastAnnouncer, F as ToastItem, j as ToastProvider, M as ToastStack, L as useToast };

package/dist/docs/manifest.json

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

package/package.json

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