@primer/react-brand 0.74.0 → 0.75.0-rc.96de7cef

package/esm/SubdomainNavBar/SubdomainNavBar.js

@@ -2,20 +2,26 @@ import e from "../node_modules/clsx/dist/clsx.js";
 import { useId as t } from "../hooks/useId.js";
 import { Text as n } from "../Text/Text.js";
 import { Button as r } from "../Button/Button.js";
-import { useOnClickOutside as i } from "../hooks/useOnClickOutside.js";
-import { useKeyboardEscape as a } from "../hooks/useKeyboardEscape.js";
-import { ChevronLeftIcon as o, LinkExternalIcon as s, MarkGithubIcon as c, SearchIcon as l, XIcon as u } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
-import { useWindowSize as d } from "../hooks/useWindowSize.js";
-import f from "./SubdomainNavBar.module.js";
-import { NavigationVisbilityObserver as p } from "./NavigationVisbilityObserver.js";
-import { useFocusTrap as m } from "../hooks/useFocusTrap.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/subdomain-nav-bar/colors-with-modes-ehJCoExh.css';/* empty css                                                                                                               */
-import { TextInput as h } from "../forms/TextInput/TextInput.js";
-import { FormControl as g } from "../forms/FormControl/FormControl.js";
-import _, { forwardRef as v, useCallback as y, useEffect as b, useMemo as x, useRef as S, useState as C } from "react";
-import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
+import { useKeyboardEscape as i } from "../hooks/useKeyboardEscape.js";
+import { ArrowUpRightIcon as a, ChevronLeftIcon as o, LinkExternalIcon as s, MarkGithubIcon as ee, SearchIcon as c } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { useWindowSize as l } from "../hooks/useWindowSize.js";
+import u from "./SubdomainNavBar.module.js";
+import { SubdomainNavBarLinkContext as d, useSubdomainNavBarLinkContext as f } from "./SubdomainNavBarLinkContext.js";
+import { NavigationVisbilityObserver as te } from "./NavigationVisbilityObserver.js";
+import { useFocusTrap as ne } from "../hooks/useFocusTrap.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/subdomain-nav-bar/colors-with-modes-BGj0AiDW.css';/* empty css                                                                                                               */
+import { useSearchKeyboardShortcut as re } from "./useSearchKeyboardShortcut.js";
+import { useSearchResults as ie } from "./useSearchResults.js";
+import { TextInput as ae } from "../forms/TextInput/TextInput.js";
+import { FormControl as p } from "../forms/FormControl/FormControl.js";
+import m, { forwardRef as h, useCallback as g, useEffect as _, useImperativeHandle as v, useMemo as y, useRef as b, useState as x } from "react";
+import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
 //#region src/SubdomainNavBar/SubdomainNavBar.tsx
-var D = {
+var T = {
+	menuLabel: "Menu",
+	closeLabel: "Close",
+	overflowMenuLabel: "More"
+}, E = m.createContext("small"), D = {
 	root: "SubdomainNavBar",
 	get innerContainer() {
 		return `${this.root}-inner-container`;
@@ -30,366 +36,536 @@ var D = {
 		return `${this.root}-search-live-region`;
 	}
 };
-function O({ children: i, className: s, fixed: l = !0, fullWidth: u = !1, logoHref: h = "https://github.com", title: g, titleHref: v = "/", onNarrowMenuToggle: O, ...N }) {
-	let [P, F] = C(!0), [I, L] = C(!1), { isSmall: R, isMedium: z } = d(), [B, V] = C(!1), H = S(null), U = t("start-of-content"), W = () => {
-		let e = !P;
-		F(e), O?.(!e);
-	}, G = () => L(!I), K = S(null);
-	b(() => {
-		let e = document.querySelector("main");
-		e && (e.id = e.id || U, H.current = e);
-	}, [U]), m({
-		containerRef: K,
+function O(e) {
+	if (e.closest("[hidden], [inert], [aria-hidden=\"true\"]")) return !1;
+	for (let t = e; t; t = t.parentElement) {
+		let e = window.getComputedStyle(t);
+		if (e.display === "none" || e.visibility === "hidden") return !1;
+	}
+	return !0;
+}
+var k = h(function({ children: a, className: s, fixed: c = !0, fullWidth: f = !1, logoHref: ie = "https://github.com", style: ae, title: p, titleHref: h = "/", leadingComponent: k, trailingComponent: j, onNarrowMenuToggle: F, menuLabels: oe, skipToContentTargetId: I, ...se }, ce) {
+	let [L, le] = x(!0), [ue, R] = x(!1), [de, fe] = x(0), { isMedium: pe, isLarge: z } = l(), [me, he] = x(!1), [ge, B] = x(), V = b(null), _e = b(null), ve = t(), ye = `${ve}-main`, be = t(), H = {
+		...T,
+		...oe
+	}, U = g(() => {
+		fe(Math.max(0, V.current?.getBoundingClientRect().top ?? 0));
+	}, []), W = g(() => {
+		L || (le(!0), F?.(!1));
+	}, [L, F]), xe = () => {
+		if (!L) {
+			W();
+			return;
+		}
+		R(!1), U(), le(!1), F?.(!0);
+	}, Se = b(null), Ce = g(() => {
+		let e = Array.from(document.querySelectorAll("main")).find(O);
+		return e ? (e.id ||= document.getElementById("start-of-content") ? ye : "start-of-content", e) : _e.current;
+	}, [ye]), G = g(() => {
+		if (I) {
+			let e = document.getElementById(I);
+			if (e && O(e)) return e;
+		}
+		return Ce();
+	}, [Ce, I]), we = g(() => {
+		he(!0);
+		let e = G();
+		e && B(e.id);
+	}, [G]), Te = g((e) => {
+		if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+		let t = I ? document.getElementById(I) : null, n = I && (!t || !O(t)), r = G();
+		if (n && console.warn(`SubdomainNavBar could not find the skip-to-content target "${I}". Falling back to the page's main content.`), !r) return;
+		let i = `#${encodeURIComponent(r.id)}`;
+		e.currentTarget.setAttribute("href", i), B(r.id);
+		let a = r.tabIndex < 0 && !r.hasAttribute("tabindex");
+		a && (r.tabIndex = -1);
+		let o = r.style.scrollMarginBlockStart;
+		if (c) {
+			let e = V.current?.getBoundingClientRect().height ?? 0;
+			r.style.scrollMarginBlockStart = `${e}px`;
+		}
+		r.addEventListener("blur", () => {
+			a && r.removeAttribute("tabindex"), r.style.scrollMarginBlockStart = o;
+		}, { once: !0 }), r.focus({ preventScroll: !0 });
+	}, [
+		c,
+		G,
+		I
+	]);
+	_(() => {
+		let e = G();
+		e && B(e.id);
+	}, [G]), ne({
+		containerRef: Se,
 		restoreFocusOnCleanUp: !0,
-		disabled: P
-	}), a(() => {
-		F(!0), O?.(!1);
-	}), b(() => {
-		z && (F(!0), O?.(!1));
+		disabled: L
+	}), i(W), _(() => {
+		z && W();
+	}, [W, z]), _(() => {
+		if (L || z) return;
+		U();
+		let e = new ResizeObserver(U), t = V.current;
+		return t && e.observe(t), e.observe(document.documentElement), () => e.disconnect();
 	}, [
 		z,
-		P,
-		O
-	]), b(() => {
-		let e = P ? "auto" : "hidden";
-		document.body.style.overflow = e;
-	}, [P]);
-	let q = y(() => V(!0), []), J = y(() => V(!1), []), Y = x(() => _.Children.toArray(i).filter((e) => _.isValidElement(e) && typeof e.type != "string" && e.type === k), []).length > 0, X = x(() => _.Children.toArray(i).map((e, t) => {
-		if (_.isValidElement(e) && e.type === k) {
-			let n = typeof e.props.children == "string" ? e.props.children : `${t}`;
-			return _.cloneElement(e, {
-				"data-navitemid": n,
-				href: e.props.href,
-				children: e.props.children,
-				style: { "--animation-order": t }
-			});
-		}
-		return null;
-	}).filter(Boolean), [i]), Z = x(() => {
-		let e = _.Children.toArray(i).find((e) => _.isValidElement(e) && e.type === j), t = _.Children.toArray(i).find((e) => _.isValidElement(e) && e.type === M);
-		return !!e && !!t;
-	}, [i]);
-	return /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ E("div", {
-		className: e(f["SubdomainNavBar-outer-container"], l && f["SubdomainNavBar-outer-container--fixed"], Z && f["SubdomainNavBar-outer-container--has-actions"]),
-		children: [/* @__PURE__ */ T(r, {
+		L,
+		U
+	]), _(() => {
+		if (L) return;
+		let e = document.body.style.overflow;
+		return document.body.style.overflow = "hidden", () => {
+			document.body.style.overflow = e;
+		};
+	}, [L]);
+	let Ee = g(() => he(!1), []), K = y(() => m.Children.toArray(a).filter((e) => m.isValidElement(e) && typeof e.type != "string" && e.type === A), []).length > 0, q = y(() => m.Children.toArray(a).map((e, t) => m.isValidElement(e) && e.type === A ? m.cloneElement(e, {
+		href: e.props.href,
+		children: e.props.children,
+		style: { "--animation-order": t }
+	}) : null).filter(Boolean), [a]), J = y(() => m.Children.toArray(a).filter((e) => m.isValidElement(e) && (e.type === N || e.type === P)), [a]), De = y(() => J.map((e) => m.cloneElement(e, { onClick: (t) => {
+		e.props.onClick?.(t), t.defaultPrevented || W();
+	} })), [J, W]), Y = J.length > 0, Oe = y(() => m.Children.toArray(a).find((e) => m.isValidElement(e) && e.type === M), [a]), ke = !!Oe, X = g(() => {
+		ke && (W(), R(!0));
+	}, [W, ke]), Z = g(() => R(!1), []);
+	v(ce, () => V.current ? Object.assign(V.current, {
+		openSearch: X,
+		closeSearch: Z
+	}) : {
+		openSearch: X,
+		closeSearch: Z
+	}, [Z, X]), re({
+		disabled: ue,
+		keyboardShortcut: Oe?.props.keyboardShortcut,
+		onTrigger: X
+	});
+	let Q = k != null, $ = j != null, Ae = K || Y || Q || $, je = {
+		...ae,
+		"--SubdomainNavBar-menu-offset-block-start": `${de}px`
+	};
+	return /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ w("div", {
+		className: e(u["SubdomainNavBar-outer-container"], c && u["SubdomainNavBar-outer-container--fixed"]),
+		children: [/* @__PURE__ */ C(r, {
 			as: "a",
-			href: `#${H.current?.id || U}`,
+			href: `#${ge || I || ve}`,
 			variant: "primary",
-			className: e(f["SubdomainNavBar-skip-to-content"], !B && "visually-hidden"),
-			onFocus: q,
-			onBlur: J,
+			size: "small",
+			className: e(u["SubdomainNavBar-skip-to-content"], !me && "visually-hidden"),
+			onFocus: we,
+			onBlur: Ee,
+			onClick: Te,
 			children: "Skip to content"
-		}), /* @__PURE__ */ T("header", {
-			className: e(f.SubdomainNavBar, s),
+		}), /* @__PURE__ */ w("header", {
+			ref: V,
+			className: e(u.SubdomainNavBar, s),
 			"data-testid": D.root,
-			...N,
-			children: /* @__PURE__ */ E("div", {
-				ref: K,
-				className: e(f["SubdomainNavBar-inner-container"], I && f["SubdomainNavBar-inner-container--search-open"], !u && f["SubdomainNavBar-inner-container--centered"]),
+			style: je,
+			...se,
+			children: [/* @__PURE__ */ w("div", {
+				ref: Se,
+				className: e(u["SubdomainNavBar-inner-container"], ue && u["SubdomainNavBar-inner-container--search-open"], !f && u["SubdomainNavBar-inner-container--centered"]),
 				"data-testid": D.innerContainer,
 				children: [
-					/* @__PURE__ */ T("nav", {
+					/* @__PURE__ */ C("nav", {
 						"aria-label": "Header logo and title",
-						children: /* @__PURE__ */ E("ol", {
-							className: f["SubdomainNavBar-title-area"],
-							children: [/* @__PURE__ */ T("li", { children: /* @__PURE__ */ E("a", {
-								href: h,
+						children: /* @__PURE__ */ w("ol", {
+							className: u["SubdomainNavBar-title-area"],
+							children: [/* @__PURE__ */ C("li", { children: /* @__PURE__ */ w("a", {
+								href: ie,
 								"aria-label": "Github Home",
-								className: f["SubdomainNavBar-logo-mark"],
-								children: [/* @__PURE__ */ T("span", {
-									className: e(f["SubdomainNavBar-back-arrow"]),
-									children: /* @__PURE__ */ T(o, {
+								className: u["SubdomainNavBar-logo-mark"],
+								children: [/* @__PURE__ */ C("span", {
+									className: u["SubdomainNavBar-back-arrow"],
+									children: /* @__PURE__ */ C(o, {
 										fill: "currentColor",
 										size: 24
 									})
-								}), /* @__PURE__ */ T(c, {
+								}), /* @__PURE__ */ C(ee, {
 									fill: "currentColor",
 									size: 24
 								})]
-							}) }), g && R && /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ T("li", {
-								role: "separator",
-								className: f["SubdomainNavBar-title-separator"],
-								"aria-hidden": !0,
-								children: "/"
-							}), /* @__PURE__ */ T("li", { children: /* @__PURE__ */ T("a", {
-								href: v,
-								"aria-label": `${g} home`,
-								className: e(f["SubdomainNavBar-title"]),
-								children: /* @__PURE__ */ T(n, {
+							}) }), p && /* @__PURE__ */ C(S, { children: /* @__PURE__ */ C("li", { children: /* @__PURE__ */ C("a", {
+								href: h,
+								"aria-label": `${p} home`,
+								className: e(u["SubdomainNavBar-title"]),
+								children: /* @__PURE__ */ w(n, {
 									size: "400",
 									weight: "medium",
-									children: g
+									children: [
+										/* @__PURE__ */ C("span", {
+											className: u["SubdomainNavBar-title-prefix"],
+											children: "GitHub"
+										}),
+										" ",
+										/* @__PURE__ */ C("span", {
+											className: u["SubdomainNavBar-title-label"],
+											children: p
+										})
+									]
 								})
-							}) })] })]
+							}) }) })]
 						})
 					}),
-					Y && /* @__PURE__ */ T("nav", {
+					K && /* @__PURE__ */ C("nav", {
 						id: "menu-navigation",
-						"aria-label": g,
-						className: f["SubdomainNavBar-primary-nav"],
+						"aria-label": p,
+						className: u["SubdomainNavBar-primary-nav"],
 						"data-testid": D.menuLinks,
-						children: /* @__PURE__ */ T(p, {
-							className: e(f["SubdomainNavBar-primary-nav-list--invisible"]),
-							children: X
+						children: /* @__PURE__ */ C(te, {
+							className: e(u["SubdomainNavBar-primary-nav-list--invisible"]),
+							overflowMenuLabel: H.overflowMenuLabel,
+							children: q
 						})
 					}),
-					/* @__PURE__ */ E("div", {
-						className: e(f["SubdomainNavBar-secondary-nav"]),
+					z && Q && /* @__PURE__ */ C("div", {
+						className: u["SubdomainNavBar-leading-component"],
+						children: k
+					}),
+					/* @__PURE__ */ w("div", {
+						className: e(u["SubdomainNavBar-secondary-nav"]),
 						children: [
-							_.Children.toArray(i).map((e) => _.isValidElement(e) && e.type === A ? _.cloneElement(e, {
-								active: I,
-								handlerFn: G,
-								title: g
+							m.Children.toArray(a).map((t) => m.isValidElement(t) && t.type === M ? m.cloneElement(t, {
+								active: ue,
+								className: e(t.props.className, z && (Y || $) && u["SubdomainNavBar-search-trigger--has-trailing-item"]),
+								onSearchOpen: X,
+								onSearchClose: Z,
+								title: p
 							}) : null).filter(Boolean),
-							Y && /* @__PURE__ */ E("button", {
-								"aria-expanded": !P,
-								"aria-label": "Menu",
-								"aria-controls": "menu-navigation",
-								"aria-haspopup": "true",
-								className: e(f["SubdomainNavBar-menu-button"], f["SubdomainNavBar-mobile-menu-button"], !P && f["SubdomainNavBar-menu-button--close"]),
+							Ae && /* @__PURE__ */ w("button", {
+								"aria-expanded": !L,
+								"aria-label": L ? H.menuLabel : H.closeLabel,
+								"aria-controls": be,
+								className: e(u["SubdomainNavBar-menu-button"], u["SubdomainNavBar-mobile-menu-button"], !L && u["SubdomainNavBar-menu-button--close"]),
 								"data-testid": D.menuButton,
-								onClick: W,
-								children: [
-									/* @__PURE__ */ T("div", { className: e(f["SubdomainNavBar-menu-button-bar"]) }),
-									/* @__PURE__ */ T("div", { className: e(f["SubdomainNavBar-menu-button-bar"]) }),
-									/* @__PURE__ */ T("div", { className: e(f["SubdomainNavBar-menu-button-bar"]) })
-								]
+								onClick: xe,
+								children: [/* @__PURE__ */ w("span", {
+									className: u["SubdomainNavBar-menu-button-icon"],
+									"aria-hidden": "true",
+									children: [
+										/* @__PURE__ */ C("span", { className: u["SubdomainNavBar-menu-button-bar"] }),
+										/* @__PURE__ */ C("span", { className: u["SubdomainNavBar-menu-button-bar"] }),
+										/* @__PURE__ */ C("span", { className: u["SubdomainNavBar-menu-button-bar"] })
+									]
+								}), /* @__PURE__ */ C("span", {
+									className: u["SubdomainNavBar-menu-button-label"],
+									children: L ? H.menuLabel : H.closeLabel
+								})]
 							}),
-							z && /* @__PURE__ */ T("div", {
-								className: e(f["SubdomainNavBar-button-area"], f["SubdomainNavBar-button-area--visible"]),
-								children: /* @__PURE__ */ T("div", {
-									className: f["SubdomainNavBar-button-area-inner"],
-									children: _.Children.toArray(i).map((e) => _.isValidElement(e) && (e.type === j || e.type === M) ? e : null).filter(Boolean)
+							z && $ && /* @__PURE__ */ C("div", {
+								className: u["SubdomainNavBar-trailing-component"],
+								children: j
+							}),
+							z && Y && /* @__PURE__ */ C("div", {
+								className: e(u["SubdomainNavBar-button-area"], u["SubdomainNavBar-button-area--visible"], $ && u["SubdomainNavBar-button-area--has-leading-item"]),
+								children: /* @__PURE__ */ C("div", {
+									className: u["SubdomainNavBar-button-area-inner"],
+									children: J
 								})
 							}),
-							!z && /* @__PURE__ */ E("div", {
-								className: e(f["SubdomainNavBar-menu-wrapper"], P && f["SubdomainNavBar-menu-wrapper--close"]),
-								children: [/* @__PURE__ */ E("div", { children: [g && v && /* @__PURE__ */ T(n, {
-									as: "p",
-									children: /* @__PURE__ */ T("a", {
-										href: v,
-										"aria-label": `${g} home`,
-										className: e(f["SubdomainNavBar-link"], f["SubdomainNavBar-link--title"]),
-										children: g
-									})
-								}), Y && !P && /* @__PURE__ */ T(p, {
-									className: e(f["SubdomainNavBar-primary-nav-list--visible"]),
-									children: X
-								})] }), /* @__PURE__ */ T("div", {
-									className: e(f["SubdomainNavBar-button-area"], f["SubdomainNavBar-button-area--visible"]),
-									children: /* @__PURE__ */ T("div", {
-										className: f["SubdomainNavBar-button-area-inner"],
-										children: _.Children.toArray(i).map((e) => _.isValidElement(e) && (e.type === j || e.type === M) ? e : null).filter(Boolean)
+							!z && /* @__PURE__ */ w("div", {
+								id: be,
+								className: e(u["SubdomainNavBar-menu-wrapper"], L && u["SubdomainNavBar-menu-wrapper--close"]),
+								children: [!L && /* @__PURE__ */ w("div", { children: [Q && /* @__PURE__ */ C("div", {
+									className: u["SubdomainNavBar-leading-component"],
+									children: k
+								}), K && /* @__PURE__ */ C(d.Provider, {
+									value: { onLinkClick: W },
+									children: pe ? /* @__PURE__ */ C("ul", {
+										className: u["SubdomainNavBar-primary-nav-list--visible"],
+										children: q
+									}) : /* @__PURE__ */ C(te, {
+										className: e(u["SubdomainNavBar-primary-nav-list--visible"]),
+										overflowMenuLabel: H.overflowMenuLabel,
+										children: q
 									})
+								})] }), !L && (Y || $) && /* @__PURE__ */ w("div", {
+									className: e(u["SubdomainNavBar-menu-wrapper-footer"], (K || Q) && u["SubdomainNavBar-menu-wrapper-footer--has-leading-item"]),
+									children: [$ && /* @__PURE__ */ C("div", {
+										className: u["SubdomainNavBar-trailing-component"],
+										children: j
+									}), Y && /* @__PURE__ */ C("div", {
+										className: e(u["SubdomainNavBar-button-area"], u["SubdomainNavBar-button-area--visible"]),
+										children: /* @__PURE__ */ C("div", {
+											className: u["SubdomainNavBar-button-area-inner"],
+											children: /* @__PURE__ */ C(E.Provider, {
+												value: pe ? "small" : "medium",
+												children: De
+											})
+										})
+									})]
 								})]
 							})
 						]
 					})
 				]
-			})
+			}), !z && !L && /* @__PURE__ */ C("div", {
+				className: u["SubdomainNavBar-menu-backdrop"],
+				"aria-hidden": "true"
+			})]
 		})]
-	}), !H.current && /* @__PURE__ */ T("div", {
-		id: `${U}`,
+	}), /* @__PURE__ */ C("div", {
+		ref: _e,
+		id: ve,
 		tabIndex: -1
 	})] });
-}
-function k({ href: t, className: n, children: r, isExternal: i, ...a }) {
-	return /* @__PURE__ */ T("li", {
-		className: e(f["SubdomainNavBar-primary-nav-list-item"], n),
-		...a,
-		children: /* @__PURE__ */ E("a", {
+});
+function A({ href: t, className: n, children: r, isExternal: i, "aria-current": a, "aria-hidden": o, tabIndex: ee, ...c }) {
+	let { isOverflowed: l, onLinkClick: d } = f();
+	return /* @__PURE__ */ C("li", {
+		...c,
+		"aria-hidden": l ? !0 : o,
+		className: e(u["SubdomainNavBar-primary-nav-list-item"], n),
+		tabIndex: l ? -1 : ee,
+		children: /* @__PURE__ */ C("a", {
 			href: t,
-			className: f["SubdomainNavBar-link"],
-			children: [/* @__PURE__ */ T("span", {
-				className: f["SubdomainNavBar-link-text"],
-				children: r
-			}), i && /* @__PURE__ */ T(s, {
-				size: 16,
-				"aria-label": "External link"
-			})]
+			"aria-current": a,
+			className: u["SubdomainNavBar-link"],
+			onClick: d,
+			tabIndex: l ? -1 : void 0,
+			children: /* @__PURE__ */ w("span", {
+				className: u["SubdomainNavBar-link-content"],
+				children: [/* @__PURE__ */ C("span", {
+					className: u["SubdomainNavBar-link-text"],
+					children: r
+				}), i && /* @__PURE__ */ C(s, {
+					size: 16,
+					"aria-label": "External link"
+				})]
+			})
 		})
 	});
 }
-var A = v(({ active: t, title: r, searchResults: o, searchTerm: s, handlerFn: c, onSubmit: d, onChange: p }, _) => {
-	let v = S(null);
-	m({
-		containerRef: v,
-		restoreFocusOnCleanUp: !0,
-		disabled: !t
-	}), i(v, c);
-	let [x, O] = C(-1), [k, A] = C(), [j, M] = C(!1), N = y((e) => {
-		c && c(e), O(-1);
-	}, [c]);
-	i(v, N), a(() => {
-		if (!k && t) return N(), !1;
-		A(!1), O(-1);
-	});
-	let P = y((e) => {
-		let t = [
-			"ArrowDown",
-			"ArrowUp",
-			"Escape",
-			"Enter"
-		], n = x, r = o ? o.length : 0, i = v.current, a;
-		if (!t.includes(e.key) || e.key === "Enter" && x === -1 || !i) return !1;
-		e.preventDefault(), e.key === "ArrowDown" ? (a = n < r - 1 ? n + 1 : -1, O(a)) : e.key === "ArrowUp" && (a = n === -1 ? r - 1 : n - 1, O(a)), ["ArrowDown", "ArrowUp"].includes(e.key) && i.querySelector(`#subdomainnavbar-search-result-${a}`)?.scrollIntoView(), e.key === "Enter" && i.querySelector(`#subdomainnavbar-search-result-${x} a`).click();
-	}, [o, x]), F = y(() => {
-		M(!0), setTimeout(() => {
-			t && M(!1);
-		}, 200);
-	}, [t]);
-	return b(() => {
-		A(!!(o && o.length)), F();
-	}, [
-		o,
-		s,
-		F
-	]), /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ T("div", {
-		className: e(f["SubdomainNavBar-search-trigger"]),
-		children: /* @__PURE__ */ T("button", {
-			"aria-label": "Toggle search bar",
-			className: f["SubdomainNavBar-search-button"],
-			onClick: c,
-			"data-testid": "toggle-search",
-			children: /* @__PURE__ */ T(l, { "aria-label": "Search icon" })
-		})
-	}), t && /* @__PURE__ */ E("div", {
-		ref: v,
-		role: "dialog",
-		"aria-label": `Search ${r}`,
-		"aria-modal": "true",
-		tabIndex: -1,
-		className: e(f["SubdomainNavBar-search-dialog"]),
-		children: [/* @__PURE__ */ E("div", {
-			className: e(f["SubdomainNavBar-search-dialog-control-area"]),
-			children: [/* @__PURE__ */ T("form", {
-				className: e(f["SubdomainNavBar-search-form"]),
-				onSubmit: d,
-				role: "search",
-				children: /* @__PURE__ */ E(g, {
-					fullWidth: !0,
-					size: "medium",
-					children: [/* @__PURE__ */ T(g.Label, {
-						visuallyHidden: !0,
-						children: "Search"
-					}), /* @__PURE__ */ T(h, {
-						ref: _,
-						className: e(f["SubdomainNavBar-search-text-input"]),
-						name: "search",
-						role: "combobox",
-						"aria-expanded": k,
-						"aria-controls": "listbox-search-results",
-						placeholder: `Search ${r}`,
-						onChange: p,
-						defaultValue: s,
-						invisible: !0,
-						leadingVisual: /* @__PURE__ */ T(l, { size: 16 }),
-						"aria-activedescendant": x === -1 ? void 0 : `subdomainnavbar-search-result-${x}`,
-						onKeyDown: P
+var j = {
+	searchLabel: "Search",
+	closeLabel: "Close",
+	resultsLabel: "Results",
+	searchResultsLabel: "Search results",
+	formatSearchWithTitle: (e) => `Search ${e}`,
+	formatSearchTrigger: (e) => `${e} search`,
+	formatResultsHeading: (e) => `Results for “${e}”`,
+	formatResultsLabel: (e) => `Results for ${e}`,
+	formatSuggestions: (e) => `${e} suggestions.`
+}, M = h(({ active: t, className: r, title: i, searchResults: o, searchTerm: s, onSearchOpen: ee, onSearchClose: l, onSubmit: d, onChange: f, placeholder: te, shortcutLabel: ne, keyboardShortcut: re, labels: m }, h) => {
+	let v = b(null), y = b(null), x = {
+		...j,
+		...m
+	}, T = te ?? (i ? x.formatSearchWithTitle(i) : x.searchLabel), E = i ? x.formatSearchWithTitle(i) : x.searchLabel, O = ne ?? (re || ""), { activeDescendant: k, handleSearchResultKeyDown: A, hasGroupedSearchResults: M, hasSearchResults: N, normalizedSearchResultGroups: P, resetActiveDescendant: F, searchResultsLength: oe } = ie({
+		dialogRef: v,
+		searchResults: o
+	}), I = g(() => {
+		l?.(), F();
+	}, [l, F]), se = g((e) => {
+		if (y.current = e, typeof h == "function") {
+			h(e);
+			return;
+		}
+		h && (h.current = e);
+	}, [h]);
+	_(() => {
+		let e = v.current;
+		if (e) {
+			if (t) {
+				e.open || (typeof e.showModal == "function" ? e.showModal() : e.setAttribute("open", "")), y.current?.focus();
+				return;
+			}
+			e.open && (typeof e.close == "function" ? e.close() : e.removeAttribute("open"));
+		}
+	}, [t, y]), _(() => {
+		let e = v.current;
+		if (!e) return;
+		let t = (t) => {
+			if (t.target !== e) return;
+			let n = e.getBoundingClientRect();
+			t.clientX >= n.left && t.clientX <= n.right && t.clientY >= n.top && t.clientY <= n.bottom || I();
+		};
+		return e.addEventListener("click", t), () => e.removeEventListener("click", t);
+	}, [I]);
+	let ce = g((e) => {
+		e.preventDefault(), I();
+	}, [I]), L = ({ result: e, index: t }) => /* @__PURE__ */ w("li", {
+		className: u["SubdomainNavBar-search-result-item"],
+		role: "presentation",
+		children: [
+			/* @__PURE__ */ C("div", {
+				className: u["SubdomainNavBar-search-result-item-container"],
+				children: /* @__PURE__ */ w("a", {
+					id: `subdomainnavbar-search-result-${t}`,
+					href: e.url,
+					role: "option",
+					"aria-selected": t === k,
+					children: [/* @__PURE__ */ C("span", { children: e.title }), M && e.isExternal && /* @__PURE__ */ C(a, {
+						size: 20,
+						"aria-hidden": "true"
 					})]
 				})
-			}), /* @__PURE__ */ T("button", {
-				"aria-label": "Close",
-				className: e(f["SubdomainNavBar-menu-button"], f["SubdomainNavBar-menu-button--close"]),
-				onClick: N,
-				children: /* @__PURE__ */ T(u, { size: 24 })
+			}),
+			/* @__PURE__ */ C(n, {
+				as: "p",
+				size: "200",
+				id: `subdomainnavbar-search-result-item-desc${t}`,
+				className: u["SubdomainNavBar-search-result-item-desc"],
+				children: e.description
+			}),
+			/* @__PURE__ */ w("div", {
+				className: u["SubdomainNavBar-search-result-item-meta"],
+				children: [/* @__PURE__ */ C(n, {
+					size: "100",
+					className: u["SubdomainNavBar-search-result-item-desc"],
+					children: e.date
+				}), e.category && /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ w(n, {
+					size: "100",
+					className: u["SubdomainNavBar-search-result-item-desc"],
+					children: [
+						" ",
+						"•",
+						" "
+					]
+				}), /* @__PURE__ */ C(n, {
+					size: "100",
+					className: u["SubdomainNavBar-search-result-item-desc"],
+					children: e.category
+				})] })]
+			})
+		]
+	}, `${e.title}-${t}`);
+	return /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C("div", {
+		className: e(u["SubdomainNavBar-search-trigger"], r),
+		children: /* @__PURE__ */ w("button", {
+			"aria-label": x.formatSearchTrigger(T),
+			className: u["SubdomainNavBar-search-input-button"],
+			onClick: ee,
+			"data-testid": "toggle-search",
+			type: "button",
+			children: [/* @__PURE__ */ w("span", {
+				className: u["SubdomainNavBar-search-input-button-placeholder"],
+				children: [/* @__PURE__ */ C(c, {
+					"aria-hidden": "true",
+					size: 16
+				}), /* @__PURE__ */ C("span", { children: T })]
+			}), O && /* @__PURE__ */ C("span", {
+				className: u["SubdomainNavBar-search-input-button-shortcut"],
+				children: O
 			})]
-		}), /* @__PURE__ */ E("div", {
+		})
+	}), /* @__PURE__ */ C("dialog", {
+		ref: v,
+		"aria-label": E,
+		className: e(u["SubdomainNavBar-search-dialog"], N && u["SubdomainNavBar-search-dialog--has-results"]),
+		onCancel: ce,
+		children: t && /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C("div", {
+			className: e(u["SubdomainNavBar-search-dialog-control-area"]),
+			children: /* @__PURE__ */ w("div", {
+				className: u["SubdomainNavBar-search-input-area"],
+				children: [/* @__PURE__ */ C("form", {
+					className: e(u["SubdomainNavBar-search-form"]),
+					onSubmit: d,
+					role: "search",
+					children: /* @__PURE__ */ w(p, {
+						fullWidth: !0,
+						size: "medium",
+						children: [/* @__PURE__ */ C(p.Label, {
+							visuallyHidden: !0,
+							children: x.searchLabel
+						}), /* @__PURE__ */ C(ae, {
+							ref: se,
+							className: e(u["SubdomainNavBar-search-text-input"]),
+							name: "search",
+							role: "combobox",
+							autoComplete: "off",
+							"aria-autocomplete": "list",
+							"aria-expanded": N,
+							"aria-controls": "listbox-search-results",
+							placeholder: T,
+							onChange: f,
+							defaultValue: s,
+							invisible: !0,
+							leadingVisual: /* @__PURE__ */ C(c, { size: 16 }),
+							"aria-activedescendant": k === -1 ? void 0 : `subdomainnavbar-search-result-${k}`,
+							onKeyDown: A
+						})]
+					})
+				}), /* @__PURE__ */ C("button", {
+					"aria-label": x.closeLabel,
+					className: u["SubdomainNavBar-search-close-button"],
+					onClick: I,
+					type: "button",
+					children: x.closeLabel
+				})]
+			})
+		}), /* @__PURE__ */ w("div", {
 			id: "listbox-search-results",
-			children: [k && /* @__PURE__ */ E("div", {
-				className: e(f["SubdomainNavBar-search-results-container"]),
-				children: [/* @__PURE__ */ E(n, {
+			className: e(u["SubdomainNavBar-search-results-area"], N && u["SubdomainNavBar-search-results-area--visible"]),
+			children: [N && /* @__PURE__ */ w("div", {
+				className: e(u["SubdomainNavBar-search-results-container"]),
+				children: [!M && /* @__PURE__ */ C(n, {
 					id: "subdomainnavbar-search-results-heading",
-					className: f["SubdomainNavBar-search-results-heading"],
-					children: [
-						"Results for “",
-						s,
-						"”"
-					]
-				}), /* @__PURE__ */ T("ul", {
+					className: u["SubdomainNavBar-search-results-heading"],
+					children: x.formatResultsHeading(s ?? "")
+				}), /* @__PURE__ */ C("ul", {
 					role: "listbox",
 					tabIndex: 0,
-					"aria-labelledby": "subdomainnavbar-search-results-heading",
-					className: e(f["SubdomainNavBar-search-results"]),
-					children: o?.map((e, t) => /* @__PURE__ */ E("li", {
-						id: `subdomainnavbar-search-result-${t}`,
-						className: f["SubdomainNavBar-search-result-item"],
-						role: "option",
-						"aria-selected": t === x,
-						children: [
-							/* @__PURE__ */ T("div", {
-								className: f["SubdomainNavBar-search-result-item-container"],
-								children: /* @__PURE__ */ T("a", {
-									href: e.url,
-									children: e.title
-								})
-							}),
-							/* @__PURE__ */ T(n, {
-								as: "p",
-								size: "200",
-								id: `subdomainnavbar-search-result-item-desc${t}`,
-								className: f["SubdomainNavBar-search-result-item-desc"],
-								children: e.description
-							}),
-							/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(n, {
-								size: "100",
-								className: f["SubdomainNavBar-search-result-item-desc"],
-								children: e.date
-							}), e.category && /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ E(n, {
-								size: "100",
-								className: f["SubdomainNavBar-search-result-item-desc"],
-								children: [
-									" ",
-									"•",
-									" "
-								]
-							}), /* @__PURE__ */ T(n, {
-								size: "100",
-								className: f["SubdomainNavBar-search-result-item-desc"],
-								children: e.category
-							})] })] })
-						]
-					}, `${e.title}-${t}`))
+					"aria-labelledby": M ? void 0 : "subdomainnavbar-search-results-heading",
+					"aria-label": M ? s ? x.formatResultsLabel(s) : x.searchResultsLabel : void 0,
+					className: e(u["SubdomainNavBar-search-results"]),
+					children: M ? P.map((e, t) => {
+						let r = `subdomainnavbar-search-result-group-${t}`;
+						return /* @__PURE__ */ w("li", {
+							className: u["SubdomainNavBar-search-result-group"],
+							role: "presentation",
+							children: [e.title && /* @__PURE__ */ C(n, {
+								id: r,
+								className: u["SubdomainNavBar-search-result-group-heading"],
+								children: e.title
+							}), /* @__PURE__ */ C("ul", {
+								className: u["SubdomainNavBar-search-result-group-list"],
+								role: "group",
+								"aria-labelledby": e.title ? r : void 0,
+								"aria-label": e.title ? void 0 : x.resultsLabel,
+								children: e.results.map(L)
+							})]
+						}, e.title ?? `ungrouped-${t}`);
+					}) : P.flatMap((e) => e.results.map(L))
 				})]
-			}), /* @__PURE__ */ E("div", {
+			}), /* @__PURE__ */ w("div", {
 				"aria-live": "polite",
 				"aria-atomic": "true",
 				"data-testid": D.liveRegion,
 				className: "visually-hidden",
-				children: [`${o?.length} suggestions.`, j && /* @__PURE__ */ T("span", { children: "\xA0" })]
+				children: [x.formatSuggestions(oe), /* @__PURE__ */ C("span", { children: "\xA0" })]
 			})]
-		})]
+		})] })
 	})] });
 });
-function j({ children: t, href: n, ...i }) {
-	return /* @__PURE__ */ T(r, {
+k.displayName = "SubdomainNavBar";
+function N({ children: t, href: n, ...i }) {
+	let a = m.useContext(E);
+	return /* @__PURE__ */ C(r, {
 		as: "a",
 		href: n,
-		className: e(f["SubdomainNavBar-cta-button"]),
+		className: e(u["SubdomainNavBar-cta-button"]),
 		variant: "primary",
-		size: "small",
+		size: a,
 		...i,
 		children: t
 	});
 }
-function M({ children: t, href: n, ...i }) {
-	return /* @__PURE__ */ T(r, {
+function P({ children: t, href: n, ...i }) {
+	let a = m.useContext(E);
+	return /* @__PURE__ */ C(r, {
 		as: "a",
 		href: n,
-		className: e(f["SubdomainNavBar-cta-button"], f["SubdomainNavBar-cta-button--secondary"]),
-		size: "small",
+		className: e(u["SubdomainNavBar-cta-button"], u["SubdomainNavBar-cta-button--secondary"]),
+		size: a,
 		...i,
 		children: t
 	});
 }
-var N = Object.assign(O, {
-	Link: k,
-	Search: A,
-	PrimaryAction: j,
-	SecondaryAction: M,
+var F = Object.assign(k, {
+	Link: A,
+	Search: M,
+	PrimaryAction: N,
+	SecondaryAction: P,
 	testIds: D
 });
 //#endregion
-export { N as SubdomainNavBar };
+export { F as SubdomainNavBar };
 
 //# sourceMappingURL=SubdomainNavBar.js.map