@primer/react-brand/esm/SubdomainNavBar/SubdomainNavBar.js

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

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 { ChevronLeftIcon as r, LinkExternalIcon as i, MarkGithubIcon as a, SearchIcon as o, XIcon as s } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
import { Button as c } from "../Button/Button.js";
import { useWindowSize as l } from "../hooks/useWindowSize.js";
import { useOnClickOutside as u } from "../hooks/useOnClickOutside.js";
import d from "./SubdomainNavBar.module.js";
import { useKeyboardEscape as f } from "../hooks/useKeyboardEscape.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";
//#region src/SubdomainNavBar/SubdomainNavBar.tsx
var D = {
	root: "SubdomainNavBar",
	get innerContainer() {
		return `${this.root}-inner-container`;
	},
	get menuButton() {
		return `${this.root}-menuButton`;
	},
	get menuLinks() {
		return `${this.root}-menuLinks`;
	},
	get liveRegion() {
		return `${this.root}-search-live-region`;
	}
};
function O({ children: i, className: o, fixed: s = !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 } = l(), [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,
		restoreFocusOnCleanUp: !0,
		disabled: P
	}), f(() => {
		F(!0), O?.(!1);
	}), b(() => {
		z && (F(!0), O?.(!1));
	}, [
		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(d["SubdomainNavBar-outer-container"], s && d["SubdomainNavBar-outer-container--fixed"], Z && d["SubdomainNavBar-outer-container--has-actions"]),
		children: [/* @__PURE__ */ T(c, {
			as: "a",
			href: `#${H.current?.id || U}`,
			variant: "primary",
			className: e(d["SubdomainNavBar-skip-to-content"], !B && "visually-hidden"),
			onFocus: q,
			onBlur: J,
			children: "Skip to content"
		}), /* @__PURE__ */ T("header", {
			className: e(d.SubdomainNavBar, o),
			"data-testid": D.root,
			...N,
			children: /* @__PURE__ */ E("div", {
				ref: K,
				className: e(d["SubdomainNavBar-inner-container"], I && d["SubdomainNavBar-inner-container--search-open"], !u && d["SubdomainNavBar-inner-container--centered"]),
				"data-testid": D.innerContainer,
				children: [
					/* @__PURE__ */ T("nav", {
						"aria-label": "Header logo and title",
						children: /* @__PURE__ */ E("ol", {
							className: d["SubdomainNavBar-title-area"],
							children: [/* @__PURE__ */ T("li", { children: /* @__PURE__ */ E("a", {
								href: h,
								"aria-label": "Github Home",
								className: d["SubdomainNavBar-logo-mark"],
								children: [/* @__PURE__ */ T("span", {
									className: e(d["SubdomainNavBar-back-arrow"]),
									children: /* @__PURE__ */ T(r, {
										fill: "currentColor",
										size: 24
									})
								}), /* @__PURE__ */ T(a, {
									fill: "currentColor",
									size: 24
								})]
							}) }), g && R && /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ T("li", {
								role: "separator",
								className: d["SubdomainNavBar-title-separator"],
								"aria-hidden": !0,
								children: "/"
							}), /* @__PURE__ */ T("li", { children: /* @__PURE__ */ T("a", {
								href: v,
								"aria-label": `${g} home`,
								className: e(d["SubdomainNavBar-title"]),
								children: /* @__PURE__ */ T(n, {
									size: "400",
									weight: "medium",
									children: g
								})
							}) })] })]
						})
					}),
					Y && /* @__PURE__ */ T("nav", {
						id: "menu-navigation",
						"aria-label": g,
						className: d["SubdomainNavBar-primary-nav"],
						"data-testid": D.menuLinks,
						children: /* @__PURE__ */ T(p, {
							className: e(d["SubdomainNavBar-primary-nav-list--invisible"]),
							children: X
						})
					}),
					/* @__PURE__ */ E("div", {
						className: e(d["SubdomainNavBar-secondary-nav"]),
						children: [
							_.Children.toArray(i).map((e) => _.isValidElement(e) && e.type === A ? _.cloneElement(e, {
								active: I,
								handlerFn: G,
								title: g
							}) : null).filter(Boolean),
							Y && /* @__PURE__ */ E("button", {
								"aria-expanded": !P,
								"aria-label": "Menu",
								"aria-controls": "menu-navigation",
								"aria-haspopup": "true",
								className: e(d["SubdomainNavBar-menu-button"], d["SubdomainNavBar-mobile-menu-button"], !P && d["SubdomainNavBar-menu-button--close"]),
								"data-testid": D.menuButton,
								onClick: W,
								children: [
									/* @__PURE__ */ T("div", { className: e(d["SubdomainNavBar-menu-button-bar"]) }),
									/* @__PURE__ */ T("div", { className: e(d["SubdomainNavBar-menu-button-bar"]) }),
									/* @__PURE__ */ T("div", { className: e(d["SubdomainNavBar-menu-button-bar"]) })
								]
							}),
							z && /* @__PURE__ */ T("div", {
								className: e(d["SubdomainNavBar-button-area"], d["SubdomainNavBar-button-area--visible"]),
								children: /* @__PURE__ */ T("div", {
									className: d["SubdomainNavBar-button-area-inner"],
									children: _.Children.toArray(i).map((e) => _.isValidElement(e) && (e.type === j || e.type === M) ? e : null).filter(Boolean)
								})
							}),
							!z && /* @__PURE__ */ E("div", {
								className: e(d["SubdomainNavBar-menu-wrapper"], P && d["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(d["SubdomainNavBar-link"], d["SubdomainNavBar-link--title"]),
										children: g
									})
								}), Y && !P && /* @__PURE__ */ T(p, {
									className: e(d["SubdomainNavBar-primary-nav-list--visible"]),
									children: X
								})] }), /* @__PURE__ */ T("div", {
									className: e(d["SubdomainNavBar-button-area"], d["SubdomainNavBar-button-area--visible"]),
									children: /* @__PURE__ */ T("div", {
										className: d["SubdomainNavBar-button-area-inner"],
										children: _.Children.toArray(i).map((e) => _.isValidElement(e) && (e.type === j || e.type === M) ? e : null).filter(Boolean)
									})
								})]
							})
						]
					})
				]
			})
		})]
	}), !H.current && /* @__PURE__ */ T("div", {
		id: `${U}`,
		tabIndex: -1
	})] });
}
function k({ href: t, className: n, children: r, isExternal: a, ...o }) {
	return /* @__PURE__ */ T("li", {
		className: e(d["SubdomainNavBar-primary-nav-list-item"], n),
		...o,
		children: /* @__PURE__ */ E("a", {
			href: t,
			className: d["SubdomainNavBar-link"],
			children: [/* @__PURE__ */ T("span", {
				className: d["SubdomainNavBar-link-text"],
				children: r
			}), a && /* @__PURE__ */ T(i, {
				size: 16,
				"aria-label": "External link"
			})]
		})
	});
}
var A = v(({ active: t, title: r, searchResults: i, searchTerm: a, handlerFn: c, onSubmit: l, onChange: p }, _) => {
	let v = S(null);
	m({
		containerRef: v,
		restoreFocusOnCleanUp: !0,
		disabled: !t
	}), u(v, c);
	let [x, O] = C(-1), [k, A] = C(), [j, M] = C(!1), N = y((e) => {
		c && c(e), O(-1);
	}, [c]);
	u(v, N), f(() => {
		if (!k && t) return N(), !1;
		A(!1), O(-1);
	});
	let P = y((e) => {
		let t = [
			"ArrowDown",
			"ArrowUp",
			"Escape",
			"Enter"
		], n = x, r = i ? i.length : 0, a = v.current, o;
		if (!t.includes(e.key) || e.key === "Enter" && x === -1 || !a) return !1;
		e.preventDefault(), e.key === "ArrowDown" ? (o = n < r - 1 ? n + 1 : -1, O(o)) : e.key === "ArrowUp" && (o = n === -1 ? r - 1 : n - 1, O(o)), ["ArrowDown", "ArrowUp"].includes(e.key) && a.querySelector(`#subdomainnavbar-search-result-${o}`)?.scrollIntoView(), e.key === "Enter" && a.querySelector(`#subdomainnavbar-search-result-${x} a`).click();
	}, [i, x]), F = y(() => {
		M(!0), setTimeout(() => {
			t && M(!1);
		}, 200);
	}, [t]);
	return b(() => {
		A(!!(i && i.length)), F();
	}, [
		i,
		a,
		F
	]), /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ T("div", {
		className: e(d["SubdomainNavBar-search-trigger"]),
		children: /* @__PURE__ */ T("button", {
			"aria-label": "Toggle search bar",
			className: d["SubdomainNavBar-search-button"],
			onClick: c,
			"data-testid": "toggle-search",
			children: /* @__PURE__ */ T(o, { "aria-label": "Search icon" })
		})
	}), t && /* @__PURE__ */ E("div", {
		ref: v,
		role: "dialog",
		"aria-label": `Search ${r}`,
		"aria-modal": "true",
		tabIndex: -1,
		className: e(d["SubdomainNavBar-search-dialog"]),
		children: [/* @__PURE__ */ E("div", {
			className: e(d["SubdomainNavBar-search-dialog-control-area"]),
			children: [/* @__PURE__ */ T("form", {
				className: e(d["SubdomainNavBar-search-form"]),
				onSubmit: l,
				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(d["SubdomainNavBar-search-text-input"]),
						name: "search",
						role: "combobox",
						"aria-expanded": k,
						"aria-controls": "listbox-search-results",
						placeholder: `Search ${r}`,
						onChange: p,
						defaultValue: a,
						invisible: !0,
						leadingVisual: /* @__PURE__ */ T(o, { size: 16 }),
						"aria-activedescendant": x === -1 ? void 0 : `subdomainnavbar-search-result-${x}`,
						onKeyDown: P
					})]
				})
			}), /* @__PURE__ */ T("button", {
				"aria-label": "Close",
				className: e(d["SubdomainNavBar-menu-button"], d["SubdomainNavBar-menu-button--close"]),
				onClick: N,
				children: /* @__PURE__ */ T(s, { size: 24 })
			})]
		}), /* @__PURE__ */ E("div", {
			id: "listbox-search-results",
			children: [k && /* @__PURE__ */ E("div", {
				className: e(d["SubdomainNavBar-search-results-container"]),
				children: [/* @__PURE__ */ E(n, {
					id: "subdomainnavbar-search-results-heading",
					className: d["SubdomainNavBar-search-results-heading"],
					children: [
						"Results for “",
						a,
						"”"
					]
				}), /* @__PURE__ */ T("ul", {
					role: "listbox",
					tabIndex: 0,
					"aria-labelledby": "subdomainnavbar-search-results-heading",
					className: e(d["SubdomainNavBar-search-results"]),
					children: i?.map((e, t) => /* @__PURE__ */ E("li", {
						id: `subdomainnavbar-search-result-${t}`,
						className: d["SubdomainNavBar-search-result-item"],
						role: "option",
						"aria-selected": t === x,
						children: [
							/* @__PURE__ */ T("div", {
								className: d["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: d["SubdomainNavBar-search-result-item-desc"],
								children: e.description
							}),
							/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(n, {
								size: "100",
								className: d["SubdomainNavBar-search-result-item-desc"],
								children: e.date
							}), e.category && /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ E(n, {
								size: "100",
								className: d["SubdomainNavBar-search-result-item-desc"],
								children: [
									" ",
									"•",
									" "
								]
							}), /* @__PURE__ */ T(n, {
								size: "100",
								className: d["SubdomainNavBar-search-result-item-desc"],
								children: e.category
							})] })] })
						]
					}, `${e.title}-${t}`))
				})]
			}), /* @__PURE__ */ E("div", {
				"aria-live": "polite",
				"aria-atomic": "true",
				"data-testid": D.liveRegion,
				className: "visually-hidden",
				children: [`${i?.length} suggestions.`, j && /* @__PURE__ */ T("span", { children: "\xA0" })]
			})]
		})]
	})] });
});
function j({ children: t, href: n, ...r }) {
	return /* @__PURE__ */ T(c, {
		as: "a",
		href: n,
		className: e(d["SubdomainNavBar-cta-button"]),
		variant: "primary",
		size: "small",
		...r,
		children: t
	});
}
function M({ children: t, href: n, ...r }) {
	return /* @__PURE__ */ T(c, {
		as: "a",
		href: n,
		className: e(d["SubdomainNavBar-cta-button"], d["SubdomainNavBar-cta-button--secondary"]),
		size: "small",
		...r,
		children: t
	});
}
var N = Object.assign(O, {
	Link: k,
	Search: A,
	PrimaryAction: j,
	SecondaryAction: M,
	testIds: D
});
//#endregion
export { N as SubdomainNavBar };

//# sourceMappingURL=SubdomainNavBar.js.map