@motech-development/breeze-ui 3.2.0 → 3.3.1

package/lib/index.js

@@ -510,9 +510,18 @@ function zn({ children: e, className: t, ref: n, targetId: r, ...i }) {
 }
 //#endregion
 //#region src/patterns/ApplicationShell/ApplicationShell.tsx
-function Bn({ account: e, brand: t, children: n, className: r, compactBrand: i, compactNavigationOpen: o, context: s, defaultCompactNavigationOpen: l, mainId: u = "main-content", navigation: d, navigationLabel: f, onCompactNavigationOpenChange: p, ref: m, skipLinkLabel: g, ..._ }) {
-	let { messages: v } = F(), y = /* @__PURE__ */ N(j, { children: [/* @__PURE__ */ M(U.Trigger, {
-		"aria-label": f,
+function Bn({ account: e, brand: t, children: n, className: r, compactBrand: i, compactNavigationOpen: o, context: s, contentFocusKey: l, defaultCompactNavigationOpen: u, mainId: d = "main-content", navigation: f, navigationLabel: p, onCompactNavigationOpenChange: m, ref: g, skipLinkLabel: _, ...v }) {
+	let { messages: b } = F(), x = C(null), S = C(l);
+	y(() => {
+		let e = S.current;
+		if (S.current = l, l === void 0 || l === e) return;
+		let t = window.requestAnimationFrame(() => {
+			x.current?.focus();
+		});
+		return () => window.cancelAnimationFrame(t);
+	}, [l]);
+	let w = /* @__PURE__ */ N(j, { children: [/* @__PURE__ */ M(U.Trigger, {
+		"aria-label": p,
 		appearance: "ghost",
 		className: "size-11 border-0 p-0 text-[var(--breeze-ink-inverse)] data-[hovered]:bg-[var(--breeze-shell-soft)]",
 		variant: "light",
@@ -528,10 +537,10 @@ function Bn({ account: e, brand: t, children: n, className: r, compactBrand: i,
 					/* @__PURE__ */ M("div", { children: t }),
 					/* @__PURE__ */ M(U.Title, {
 						className: "sr-only",
-						children: f
+						children: p
 					}),
 					/* @__PURE__ */ M(U.Close, {
-						"aria-label": v.close,
+						"aria-label": b.close,
 						appearance: "ghost",
 						className: "size-11 border-0 p-0 text-[var(--breeze-ink-inverse)] data-[hovered]:bg-[var(--breeze-shell-soft)]",
 						variant: "light",
@@ -541,34 +550,34 @@ function Bn({ account: e, brand: t, children: n, className: r, compactBrand: i,
 			}),
 			/* @__PURE__ */ M(U.Description, {
 				className: "sr-only",
-				children: f
+				children: p
 			}),
 			/* @__PURE__ */ M("div", {
 				className: "min-h-0 flex-1 overflow-y-auto px-3 py-6 [&_a]:flex [&_a]:min-h-11 [&_a]:items-center [&_a]:gap-3 [&_a]:text-[var(--breeze-ink-inverse-muted)] [&_a]:no-underline [&_a[data-current]]:bg-[var(--breeze-primary-selected)] [&_a[data-current]]:text-white [&_a[data-current][data-hovered]]:bg-[var(--breeze-primary-selected)] [&_a[data-hovered]]:bg-[var(--breeze-shell-soft)] [&_a[data-hovered]]:text-white",
-				children: d
+				children: f
 			}),
-			/* @__PURE__ */ N("footer", {
+			/* @__PURE__ */ M("footer", {
 				className: "grid gap-2 border-t border-[var(--breeze-shell-soft)] p-3",
-				children: [s, e]
+				children: s
 			})
 		]
-	})] }), b = o === void 0 ? /* @__PURE__ */ M(U.Root, {
-		defaultOpen: l,
-		onOpenChange: p,
-		children: y
+	})] }), T = o === void 0 ? /* @__PURE__ */ M(U.Root, {
+		defaultOpen: u,
+		onOpenChange: m,
+		children: w
 	}) : /* @__PURE__ */ M(U.Root, {
-		onOpenChange: p,
+		onOpenChange: m,
 		open: o,
-		children: y
+		children: w
 	});
 	return h("div", {
-		..._,
+		...v,
 		className: `min-h-dvh bg-[var(--breeze-canvas)] text-[var(--breeze-ink)] ${r ?? ""}`,
-		ref: P(m)
+		ref: P(g)
 	}, /* @__PURE__ */ N(j, { children: [
 		/* @__PURE__ */ M(zn, {
-			targetId: u,
-			children: g
+			targetId: d,
+			children: _
 		}),
 		/* @__PURE__ */ N("aside", {
 			className: "fixed inset-y-0 start-0 z-20 hidden w-64 flex-col bg-[var(--breeze-shell)] text-[var(--breeze-ink-inverse)] md:flex",
@@ -579,7 +588,7 @@ function Bn({ account: e, brand: t, children: n, className: r, compactBrand: i,
 				}),
 				/* @__PURE__ */ M("div", {
 					className: "min-h-0 flex-1 overflow-y-auto px-3 py-7 [&_a]:flex [&_a]:min-h-11 [&_a]:items-center [&_a]:gap-3 [&_a]:text-[var(--breeze-ink-inverse-muted)] [&_a]:no-underline [&_a[data-current]]:bg-[var(--breeze-primary-selected)] [&_a[data-current]]:text-white [&_a[data-current][data-hovered]]:bg-[var(--breeze-primary-selected)] [&_a[data-hovered]]:bg-[var(--breeze-shell-soft)] [&_a[data-hovered]]:text-white",
-					children: d
+					children: f
 				}),
 				/* @__PURE__ */ N("footer", {
 					className: "grid gap-2 border-t border-[var(--breeze-shell-soft)] p-3",
@@ -590,7 +599,7 @@ function Bn({ account: e, brand: t, children: n, className: r, compactBrand: i,
 		/* @__PURE__ */ N("header", {
 			className: "grid min-h-16 grid-cols-[2.75rem_minmax(0,1fr)_2.75rem] items-center gap-3 bg-[var(--breeze-shell)] px-3 text-[var(--breeze-ink-inverse)] md:hidden",
 			children: [
-				b,
+				T,
 				/* @__PURE__ */ M("div", {
 					className: "min-w-0 justify-self-center font-[family-name:var(--breeze-font-display)] text-xl font-semibold",
 					children: i ?? t
@@ -603,7 +612,8 @@ function Bn({ account: e, brand: t, children: n, className: r, compactBrand: i,
 		}),
 		/* @__PURE__ */ M("main", {
 			className: "min-h-dvh px-4 py-6 sm:px-8 sm:py-12 md:ms-64 lg:px-12",
-			id: u,
+			id: d,
+			ref: x,
 			tabIndex: -1,
 			children: n
 		})