@primer/react-brand 0.78.0-rc.6fbe9fb5 → 0.78.0-rc.85e39cb4

package/esm/SubNav/SubNav.js

@@ -4,16 +4,17 @@ import { useProvidedRefOrCreate as n } from "../hooks/useRef.js";
 import { Text as r } from "../Text/Text.js";
 import { Button as i } from "../Button/Button.js";
 import { ThemeProvider as a } from "../ThemeProvider/ThemeProvider.js";
-import { useOnClickOutside as o } from "../hooks/useOnClickOutside.js";
-import { useKeyboardEscape as s } from "../hooks/useKeyboardEscape.js";
-import { TriangleDownIcon as c } from "../node_modules/@primer/octicons-react/dist/icons/TriangleDownIcon.js";
-import { TriangleUpIcon as l } from "../node_modules/@primer/octicons-react/dist/icons/TriangleUpIcon.js";
-import { useWindowSize as u } from "../hooks/useWindowSize.js";
-import { useFocusTrap as d } from "../hooks/useFocusTrap.js";
-import { useContainsFocus as f } from "./useContainsFocus.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/sub-nav/colors-with-modes-5gfdihUt.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/sub-nav/base-DIkvLW-s.css';/* empty css                                                                                        */
+import { useKeyboardEscape as o } from "../hooks/useKeyboardEscape.js";
+import { TriangleDownIcon as s } from "../node_modules/@primer/octicons-react/dist/icons/TriangleDownIcon.js";
+import { TriangleUpIcon as c } from "../node_modules/@primer/octicons-react/dist/icons/TriangleUpIcon.js";
+import { useWindowSize as l } from "../hooks/useWindowSize.js";
+import { useContainsFocus as u } from "./useContainsFocus.js";
+import d from "./SubNav.module.js";
+import { useAnchorMenu as f } from "./useAnchorMenu.js";
+import { useNarrowMenu as p } from "./useNarrowMenu.js";
+import { useWideMenu as ee } from "./useWideMenu.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/sub-nav/colors-with-modes-Bna3nyXf.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/sub-nav/base-Dl5rLq0_.css';/* empty css                                                                                        */
 /* empty css                                                                                                     */
-import p from "./SubNav.module.js";
 import m, { Children as h, createContext as g, forwardRef as _, isValidElement as v, memo as y, useCallback as b, useContext as x, useEffect as S, useMemo as C, useRef as w, useState as T } from "react";
 import { jsx as E, jsxs as D } from "react/jsx-runtime";
 import { createPortal as O } from "react-dom";
@@ -37,6 +38,12 @@ var k = {
 	},
 	get subMenu() {
 		return `${this.root}-sub-menu`;
+	},
+	get overflowButton() {
+		return `${this.root}-overflow-button`;
+	},
+	get overflowMenu() {
+		return `${this.root}-overflow-menu`;
 	}
 }, A = ["dropdown", "anchor"], j = g(void 0), M = () => {
 	let e = x(j);
@@ -44,67 +51,50 @@ var k = {
 	return e;
 };
 function N({ children: t }) {
-	let n = m.useRef(null), r = m.useRef(null), i = C(() => ({ portalRef: r }), []);
-	return S(() => {
-		let e = n.current, t = new IntersectionObserver(([e]) => {
-			e.target.classList.toggle(p["SubNav__anchor-menu-outer-container--stuck"], e.intersectionRatio < 1);
-		}, { threshold: [1] });
-		return e && t.observe(e), () => {
-			e && t.unobserve(e);
-		};
-	}, []), /* @__PURE__ */ D(j.Provider, {
+	let { anchorMenuRef: n, portalRef: r } = f(), i = C(() => ({ portalRef: r }), [r]);
+	return /* @__PURE__ */ D(j.Provider, {
 		value: i,
 		children: [t, /* @__PURE__ */ E("div", {
-			className: p["SubNav__anchor-menu-outer-container"],
+			className: d["SubNav__anchor-menu-outer-container"],
 			ref: n,
 			children: /* @__PURE__ */ E("div", {
-				className: e(p["SubNav__anchor-menu-container"]),
+				className: e(d["SubNav__anchor-menu-container"]),
 				ref: r
 			})
 		})]
 	});
 }
-var P = y(_(({ id: i, children: a, className: f, "data-testid": g, fullWidth: _, hasShadow: y }, x) => {
-	let O = n(x), A = m.useRef(null), j = m.useRef(null), M = m.useRef(null), P = w(null), [L, V] = T(!1), H = t(), [ee, te] = T(!1), { isLarge: U } = u();
-	d({
-		containerRef: A,
-		disabled: !L
-	});
-	let W = h.toArray(a), G = b(() => {
-		U || V(!1);
-	}, [U]), K = b(() => {
-		U || V((e) => !e);
-	}, [U]);
-	o(A, G), s(G), S(() => {
-		let e = j.current, t = () => {
-			if (e) {
-				let t = e.getBoundingClientRect().top;
-				e.style.setProperty("--subnav-available-height", `${window.innerHeight - t}px`);
-			}
-		};
-		return L && !U ? (document.body.style.overflow = "hidden", t(), window.addEventListener("resize", t)) : (document.body.style.overflow = "auto", e && e.style.removeProperty("--subnav-available-height")), () => {
-			document.body.style.overflow = "auto", window.removeEventListener("resize", t), e && e.style.removeProperty("--subnav-available-height");
-		};
-	}, [L, U]);
-	let q = W.find((e) => v(e) && !!e.props["aria-current"]);
+var te = {
+	menuLabel: "Navigation menu",
+	closeLabel: "Close navigation menu",
+	activeLabel: "Navigation menu. Current page:",
+	closeActiveLabel: "Close navigation menu. Current page:",
+	overflowMenuLabel: "More"
+}, P = y(_(({ id: i, children: a, className: o, "data-testid": u, fullWidth: f, hasShadow: g, menuLabels: _ }, y) => {
+	let b = n(y), x = w(null), O = t(), A = t(), [j, M] = T(!1), P = {
+		...te,
+		..._
+	}, { isLarge: L } = l(), { navRef: V, narrowMenuRef: ne, isNarrowMenuOpen: H, closeNarrowMenu: U, toggleNarrowMenu: W } = p(L), G = h.toArray(a), re = G.find((e) => v(e) && !!e.props["aria-current"]);
 	S(() => {
-		let e = W.some((e) => {
+		let e = G.some((e) => {
 			if (v(e) && e.type === R) {
 				let t = h.toArray(e.props.children)[1];
 				if (v(t) && t.type === z && t.props.variant === "anchor") return !0;
 			}
 			return !1;
 		});
-		te(e);
-	}, [W]);
-	let { heading: J, subheading: Y, links: ne, action: re } = W.reduce((e, t) => {
+		M(e);
+	}, [G]);
+	let { heading: ie, subheading: K, links: q, action: ae } = G.reduce((e, t) => {
 		if (v(t)) if (t.type === F) e.heading = t;
 		else if (t.type === I) e.subheading = t;
 		else if (t.type === R) {
 			let n = t, [r, i] = h.toArray(n.props.children), a = v(i) && i.type === z && i.props.variant === "anchor";
 			e.links.push(m.cloneElement(n, {
 				...a ? { children: [r] } : {},
-				onClick: n.props["aria-current"] ? G : n.props.onClick
+				onClick: (e) => {
+					n.props.onClick?.(e), !e.defaultPrevented && n.props["aria-current"] && U();
+				}
 			}));
 		} else t.type === B && (e.action = t);
 		return e;
@@ -113,73 +103,143 @@ var P = y(_(({ id: i, children: a, className: f, "data-testid": g, fullWidth: _,
 		subheading: void 0,
 		links: [],
 		action: void 0
-	}), ie = q ? h.toArray(q.props.children) : [], X = ie[0], Z = ie[1], ae = v(Z) && Z.type === z && Z.props.variant === "anchor" ? Z : null, Q = v(Y) && Y.type === I && !!Y.props["aria-current"], $ = Y ? X : null, oe = C(() => /* @__PURE__ */ E("div", {
-		className: e(p["SubNav__overlay-toggle"], L && p["SubNav__overlay-toggle--open"]),
+	}), { overlayRef: oe, overflowRef: se, overflowButtonRef: ce, overflowMenuRef: le, visibleLinkCount: J, hasOverflow: Y, isOverflowMenuOpen: ue, closeOverflowMenu: de, handleOverflowMenuBlur: fe } = ee(a, L, q.length), pe = re ? h.toArray(re.props.children) : [], X = pe[0], Z = pe[1], me = v(Z) && Z.type === z && Z.props.variant === "anchor" ? Z : null, Q = v(K) && K.type === I && !!K.props["aria-current"], $ = K ? X : null, he = q.slice(J).some((e) => !!e.props["aria-current"] && e.props["aria-current"] !== "false"), ge = C(() => /* @__PURE__ */ E("div", {
+		className: e(d["SubNav__overlay-toggle"], H && d["SubNav__overlay-toggle--open"]),
 		children: /* @__PURE__ */ E("span", {
-			className: e(p["SubNav__overlay-toggle-content"], !$ && p["SubNav__overlay-toggle-content--end"]),
+			className: e(d["SubNav__overlay-toggle-content"], !$ && d["SubNav__overlay-toggle-content--end"]),
 			children: /* @__PURE__ */ D("button", {
-				ref: P,
-				className: p["SubNav__overlay-toggle-label"],
+				ref: x,
+				className: d["SubNav__overlay-toggle-label"],
 				"data-testid": k.button,
-				onClick: L ? G : K,
-				"aria-expanded": L ? "true" : "false",
-				"aria-controls": H,
-				"aria-label": X ? `Navigation menu. Current page: ${X}` : "Navigation menu",
+				onClick: H ? U : W,
+				"aria-expanded": H ? "true" : "false",
+				"aria-controls": O,
+				"aria-label": X ? `${H ? P.closeActiveLabel : P.activeLabel} ${X}` : H ? P.closeLabel : P.menuLabel,
 				children: [$ && /* @__PURE__ */ E(r, {
 					as: "span",
 					size: "100",
 					children: $
-				}), E(L ? l : c, {
-					className: p["SubNav__overlay-toggle-icon"],
+				}), E(H ? c : s, {
+					className: d["SubNav__overlay-toggle-icon"],
 					size: 13
 				})]
 			})
 		})
 	}), [
-		X,
-		G,
-		K,
+		U,
+		W,
+		O,
 		H,
-		L,
-		$
-	]);
+		X,
+		$,
+		P.closeLabel,
+		P.menuLabel,
+		P.activeLabel,
+		P.closeActiveLabel
+	]), _e = {
+		id: void 0,
+		ref: null,
+		"aria-activedescendant": void 0,
+		"aria-controls": void 0,
+		"aria-describedby": void 0,
+		"aria-details": void 0,
+		"aria-flowto": void 0,
+		"aria-labelledby": void 0,
+		"aria-owns": void 0
+	}, ve = (e) => h.map(e, (e) => {
+		if (!v(e)) return e;
+		let t = e.type === m.Fragment ? {} : _e;
+		return m.cloneElement(e, {
+			...t,
+			...e.props.children === void 0 ? {} : { children: ve(e.props.children) }
+		});
+	});
 	return /* @__PURE__ */ E("div", {
-		ref: O,
-		className: e(p.SubNav__container, Y && p["SubNav--has-sub-heading"], Y && Q && p["SubNav--subHeadingActive"], ee && p["SubNav__container--with-anchor-nav"]),
+		ref: b,
+		className: e(d.SubNav__container, K && d["SubNav--has-sub-heading"], K && Q && d["SubNav--subHeadingActive"], j && d["SubNav__container--with-anchor-nav"]),
 		children: /* @__PURE__ */ E(N, { children: /* @__PURE__ */ E("nav", {
-			ref: j,
+			ref: V,
 			id: i,
-			className: e(p.SubNav, L && p["SubNav--open"], y && p["SubNav--has-shadow"], _ && p["SubNav--full-width"], f),
-			"data-testid": g || k.root,
+			className: e(d.SubNav, H && d["SubNav--open"], g && d["SubNav--has-shadow"], f && d["SubNav--full-width"], o),
+			"data-testid": u || k.root,
 			children: /* @__PURE__ */ D("div", {
-				ref: A,
-				className: p["SubNav--header-container-outer"],
+				ref: ne,
+				className: d["SubNav--header-container-outer"],
 				children: [
 					/* @__PURE__ */ D("div", {
-						className: p["SubNav__header-container"],
+						className: d["SubNav__header-container"],
 						children: [
-							J && /* @__PURE__ */ E("div", {
-								className: p["SubNav__heading-container"],
-								children: J
+							ie && /* @__PURE__ */ E("div", {
+								className: d["SubNav__heading-container"],
+								children: ie
 							}),
-							Y && /* @__PURE__ */ E("div", {
-								className: e(p["SubNav__heading-container"], p["SubNav__subheading-container"], Q && p["SubNav__subheading-container-active"]),
-								children: Y
+							K && /* @__PURE__ */ E("div", {
+								className: e(d["SubNav__heading-container"], d["SubNav__subheading-container"], Q && d["SubNav__subheading-container-active"]),
+								children: K
 							}),
-							!U && (!Y || Q) && oe,
-							ae && ae
+							!L && (!K || Q) && ge,
+							me && me
 						]
 					}),
-					!U && Y && !Q && oe,
-					ne.length > 0 && /* @__PURE__ */ D("ul", {
-						ref: M,
-						id: H,
-						className: e(p["SubNav__links-overlay"], L && p["SubNav__links-overlay--open"]),
+					!L && K && !Q && ge,
+					q.length > 0 && /* @__PURE__ */ D("ul", {
+						ref: oe,
+						id: O,
+						className: e(d["SubNav__links-overlay"], H && d["SubNav__links-overlay--open"]),
 						"data-testid": k.overlay,
-						children: [ne, re && /* @__PURE__ */ E("li", {
-							className: p["SubNav__action-container"],
-							children: re
-						})]
+						children: [
+							q.map((t, n) => {
+								let r = !!L && n >= J, i = h.toArray(t.props.children).some((e) => v(e) && e.type === z);
+								return m.cloneElement(t, {
+									className: e(t.props.className, !i && d["SubNav__link--in-overlay"]),
+									_isOverflowed: r,
+									...r ? {
+										..._e,
+										children: ve(t.props.children)
+									} : {}
+								});
+							}),
+							/* @__PURE__ */ D("li", {
+								ref: se,
+								className: e(d["SubNav__overflow-container"], Y && d["SubNav__overflow-container--visible"]),
+								"aria-hidden": !Y || void 0,
+								onBlur: fe,
+								children: [/* @__PURE__ */ D("button", {
+									ref: ce,
+									type: "button",
+									className: e(d["SubNav__overflow-toggle"], he && d["SubNav__overflow-toggle--active"]),
+									"data-testid": k.overflowButton,
+									"aria-expanded": ue,
+									"aria-controls": A,
+									tabIndex: Y ? void 0 : -1,
+									children: [/* @__PURE__ */ E(r, {
+										as: "span",
+										size: "100",
+										className: d["SubNav__link-label"],
+										children: P.overflowMenuLabel
+									}), E(ue ? c : s, {})]
+								}), /* @__PURE__ */ E("div", {
+									ref: le,
+									id: A,
+									popover: "auto",
+									"data-testid": k.overflowMenu,
+									className: d["SubNav__overflow-menu"],
+									children: /* @__PURE__ */ E("ul", {
+										className: d["SubNav__overflow-menu-list"],
+										"aria-label": P.overflowMenuLabel,
+										children: q.slice(J).map((e) => m.cloneElement(e, {
+											_isOverflowed: !1,
+											_isOverflowMenu: !0,
+											_onOverflowLinkActivate: de
+										}))
+									})
+								})]
+							}),
+							ae && /* @__PURE__ */ E("li", {
+								className: d["SubNav__action-container"],
+								children: ae
+							})
+						]
 					})
 				]
 			})
@@ -187,73 +247,87 @@ var P = y(_(({ id: i, children: a, className: f, "data-testid": g, fullWidth: _,
 	});
 })), F = ({ href: t, children: n, className: r, "data-testid": i, ...a }) => /* @__PURE__ */ E("a", {
 	href: t,
-	className: e(p.SubNav__heading, r),
+	className: e(d.SubNav__heading, r),
 	"data-testid": k.heading || i,
 	...a,
 	children: n
 }), I = ({ href: t, children: n, className: r, "data-testid": i, ...a }) => /* @__PURE__ */ E("a", {
 	href: t,
-	className: e(p.SubNav__heading, p.SubNav__link, p.SubNav__subHeading, r),
+	className: e(d.SubNav__heading, d.SubNav__link, d.SubNav__subHeading, r),
 	"data-testid": k.heading || i,
 	...a,
 	children: n
-}), L = _(({ children: i, href: a, "aria-current": o, "data-testid": l, className: d, _subMenuVariant: m, variant: h, ...g }, _) => {
-	let v = t(), { isLarge: y } = u(), [x, C] = T(!1), O = n(_), A = w(null);
-	f(O, (e) => {
-		e || C(!1);
+}), L = _(({ children: i, href: a, "aria-current": c, "data-testid": f, className: p, _subMenuVariant: ee, _isOverflowMenu: h = !1, _onOverflowLinkActivate: g, variant: _, ...y }, x) => {
+	let C = t(), { isLarge: O } = l(), [A, j] = T(!1), M = n(x), N = w(null);
+	u(M, (e) => {
+		e || j(!1);
 	});
-	let j = b(() => C(!0), []), M = b(() => C(!1), []), N = b(() => C((e) => !e), []), P = !!o && o !== "false";
-	s(M), S(() => {
-		A.current && A.current.toggleAttribute("inert", y && !x);
-	}, [y, x]);
-	let [F, I] = i;
+	let te = b(() => j(!0), []), P = b(() => j(!1), []), F = b(() => j((e) => !e), []), I = !!c && c !== "false";
+	o(P), S(() => {
+		N.current && N.current.toggleAttribute("inert", !!O && !h && !A);
+	}, [
+		O,
+		h,
+		A
+	]);
+	let [L, R] = i, B = v(R) && R.type === z ? R.props["aria-label"] : void 0, V = h && v(R) && R.type === z ? m.cloneElement(R, {
+		_isOverflowMenu: h,
+		_onOverflowLinkActivate: g
+	}) : R;
 	return /* @__PURE__ */ D("div", {
-		className: e(p["SubNav__link--has-sub-menu"], x && p["SubNav__link--expanded"], P && p["SubNav__link--has-active-sub-menu"]),
-		"data-testid": l || k.subMenu,
-		ref: O,
-		onMouseOver: j,
-		onMouseOut: M,
+		className: e(d["SubNav__link--has-sub-menu"], A && d["SubNav__link--expanded"], I && d["SubNav__link--has-active-sub-menu"]),
+		"data-testid": f || k.subMenu,
+		ref: M,
+		onMouseOver: te,
+		onMouseOut: P,
 		onFocus: () => null,
 		onBlur: () => null,
 		children: [
 			/* @__PURE__ */ E("a", {
 				href: a,
-				className: e(p.SubNav__link, o && p["SubNav__link--active"], d),
-				"aria-current": o,
-				...g,
+				className: e(d.SubNav__link, c && d["SubNav__link--active"], p),
+				"aria-current": c,
+				...y,
+				onClick: (e) => {
+					y.onClick?.(e), e.defaultPrevented || g?.();
+				},
 				children: /* @__PURE__ */ E(r, {
 					as: "span",
 					size: "100",
 					weight: "medium",
-					className: p["SubNav__link-label"],
-					children: F
+					className: d["SubNav__link-label"],
+					children: L
 				})
 			}),
-			y && /* @__PURE__ */ E("button", {
-				className: p["SubNav__sub-menu-toggle"],
-				onClick: N,
-				"aria-expanded": x ? "true" : "false",
-				"aria-controls": v,
-				"aria-label": `${F?.toString().trim()} submenu`,
-				children: /* @__PURE__ */ E(c, {
-					className: p["SubNav__sub-menu-icon"],
+			O && !h && /* @__PURE__ */ E("button", {
+				className: d["SubNav__sub-menu-toggle"],
+				onClick: F,
+				"aria-expanded": A ? "true" : "false",
+				"aria-controls": C,
+				"aria-label": B ?? `${L?.toString().trim()} submenu`,
+				children: /* @__PURE__ */ E(s, {
+					className: d["SubNav__sub-menu-icon"],
 					size: 16
 				})
 			}),
 			/* @__PURE__ */ E("div", {
-				id: v,
-				className: p["SubNav__sub-menu-children"],
-				ref: A,
-				children: I
+				id: C,
+				className: d["SubNav__sub-menu-children"],
+				ref: N,
+				children: V
 			})
 		]
 	});
 }), R = _((t, n) => {
-	let [i, a] = T(!1), o = h.toArray(t.children), s = o.some((e) => {
+	let [i, a] = T(!1), o = w(null), { _isOverflowed: s, _isOverflowMenu: c = !1, _onOverflowLinkActivate: l, ...u } = t, f = h.toArray(t.children);
+	S(() => {
+		o.current?.toggleAttribute("inert", !!s);
+	}, [s]);
+	let p = f.some((e) => {
 		if (v(e)) return e.type === z;
 	});
 	if (S(() => {
-		if (s) return;
+		if (p) return;
 		let e = t.href.replace("#", ""), n = document.getElementById(e);
 		if (!n) return;
 		let r = new IntersectionObserver(([e]) => {
@@ -264,64 +338,89 @@ var P = y(_(({ id: i, children: a, className: f, "data-testid": g, fullWidth: _,
 			rootMargin: "0px 0px -100%"
 		});
 		return r.observe(n), () => r.disconnect();
-	}, [s, t.href]), s) {
-		let e = o.some((e) => v(e) && e.type === z && e.props.variant === "anchor");
-		return /* @__PURE__ */ E("li", { children: /* @__PURE__ */ E(L, {
-			ref: n,
-			...t,
-			_subMenuVariant: e ? "anchor" : void 0
-		}) });
+	}, [p, t.href]), p) {
+		let t = f.some((e) => v(e) && e.type === z && e.props.variant === "anchor");
+		return /* @__PURE__ */ E("li", {
+			ref: o,
+			"aria-hidden": s ? !0 : void 0,
+			className: e(d["SubNav__link-item"], s && d["SubNav__link-item--overflowed"]),
+			children: /* @__PURE__ */ E(L, {
+				ref: n,
+				...u,
+				_isOverflowMenu: c,
+				_onOverflowLinkActivate: l,
+				_subMenuVariant: t ? "anchor" : void 0
+			})
+		});
 	}
-	let { children: c, href: l, "aria-current": u, "data-testid": d, variant: f, className: m, ...g } = t;
-	return /* @__PURE__ */ E("li", { children: /* @__PURE__ */ E("a", {
-		href: l,
-		className: e(p.SubNav__link, u && p["SubNav__link--active"], i && p["SubNav__link--is-in-view"], m),
-		"aria-current": u,
-		"data-testid": d || k.link,
-		ref: n,
-		...g,
-		children: /* @__PURE__ */ E(r, {
-			as: "span",
-			size: "100",
-			weight: "medium",
-			className: p["SubNav__link-label"],
-			children: c
+	let { children: ee, href: m, "aria-current": g, "data-testid": _, variant: y, className: b, ...x } = u;
+	return /* @__PURE__ */ E("li", {
+		ref: o,
+		"aria-hidden": s ? !0 : void 0,
+		className: e(d["SubNav__link-item"], s && d["SubNav__link-item--overflowed"]),
+		children: /* @__PURE__ */ E("a", {
+			href: m,
+			className: e(d.SubNav__link, g && d["SubNav__link--active"], i && d["SubNav__link--is-in-view"], b),
+			"aria-current": g,
+			"data-testid": _ || k.link,
+			ref: n,
+			...x,
+			onClick: (e) => {
+				x.onClick?.(e), e.defaultPrevented || l?.();
+			},
+			children: /* @__PURE__ */ E(r, {
+				as: "span",
+				size: "100",
+				weight: "medium",
+				className: d["SubNav__link-label"],
+				children: ee
+			})
 		})
-	}) });
+	});
 });
-function z({ children: t, className: n, variant: r = "dropdown", ...i }) {
-	let o = m.useContext(j), s = w(null), { isLarge: c } = u();
+function z({ children: t, className: n, "aria-label": r = "Sub navigation", variant: i = "dropdown", _isOverflowMenu: o = !1, _onOverflowLinkActivate: s, ...c }) {
+	let u = m.useContext(j), f = w(null), { isLarge: p } = l();
 	return S(() => {
 		let e = (e) => {
-			s.current && !s.current.contains(e.target) || e.target instanceof HTMLAnchorElement || e.stopPropagation();
+			f.current && !f.current.contains(e.target) || e.target instanceof HTMLAnchorElement || e.stopPropagation();
 		};
-		return r === "anchor" && document.addEventListener("click", e, !0), () => {
+		return i === "anchor" && document.addEventListener("click", e, !0), () => {
 			document.removeEventListener("click", e, !0);
 		};
-	}, [r]), r === "anchor" && o?.portalRef.current ? O(/* @__PURE__ */ E("nav", {
-		ref: s,
-		className: e(p["SubNav__sub-menu"], p["SubNav__sub-menu--anchor"], n),
+	}, [i]), i === "anchor" && u?.portalRef.current ? O(/* @__PURE__ */ E("nav", {
+		ref: f,
+		className: e(d["SubNav__sub-menu"], d["SubNav__sub-menu--anchor"], n),
 		role: "navigation",
-		"aria-label": "Sub navigation",
+		"aria-label": r,
 		children: /* @__PURE__ */ E("ul", {
-			className: p["SubNav__sub-menu-list"],
-			...i,
-			children: m.Children.map(t, (e) => v(e) && e.type === R ? m.cloneElement(e, { onClick: (t) => {
-				e.props.onClick?.(t);
-			} }) : null)
+			className: d["SubNav__sub-menu-list"],
+			...c,
+			children: m.Children.map(t, (e) => v(e) && e.type === R ? m.cloneElement(e, {
+				...o ? {
+					_isOverflowMenu: o,
+					_onOverflowLinkActivate: s
+				} : {},
+				onClick: (t) => {
+					e.props.onClick?.(t);
+				}
+			}) : null)
 		})
-	}), o.portalRef.current) : /* @__PURE__ */ E(c ? a : m.Fragment, {
-		...c ? { colorMode: "light" } : {},
+	}), u.portalRef.current) : /* @__PURE__ */ E(p && !o ? a : m.Fragment, {
+		...p && !o ? { colorMode: "light" } : {},
 		children: /* @__PURE__ */ E("ul", {
-			className: e(p["SubNav__sub-menu"], p[`SubNav__sub-menu--${r}`], n),
-			...i,
-			children: t
+			className: e(d["SubNav__sub-menu"], d[`SubNav__sub-menu--${i}`], n),
+			"aria-label": r,
+			...c,
+			children: o ? h.map(t, (e) => v(e) && e.type === R ? m.cloneElement(e, {
+				_isOverflowMenu: o,
+				_onOverflowLinkActivate: s
+			}) : e) : t
 		})
 	});
 }
 function B({ children: e, href: t, variant: n = "primary", size: r = "small", ...a }) {
 	return /* @__PURE__ */ E(i, {
-		className: p.SubNav__action,
+		className: d.SubNav__action,
 		as: "a",
 		href: t,
 		variant: n,