@primer/react-brand 0.77.1-rc.bd5b9efe → 0.78.0-rc.bcc08c15

package/esm/ActionMenu/ActionMenu.js

@@ -2,20 +2,22 @@ import { clsx as 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 { ThemeProvider as i } from "../ThemeProvider/ThemeProvider.js";
-import { useTheme as a } from "../ThemeProvider/useTheme.js";
-import { useAnchoredPosition as o } from "../hooks/useAnchoredPosition.js";
-import { useOnClickOutside as s } from "../hooks/useOnClickOutside.js";
-import { useKeyboardEscape as c } from "../hooks/useKeyboardEscape.js";
-import { CheckIcon as l } from "../node_modules/@primer/octicons-react/dist/icons/CheckIcon.js";
-import { ChevronDownIcon as u } from "../node_modules/@primer/octicons-react/dist/icons/ChevronDownIcon.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/action-menu/colors-with-modes-B69RzUbe.css';/* empty css                                                                                                         */
-import d from "./ActionMenu.module.js";
-import f, { Children as p, cloneElement as m, forwardRef as h, isValidElement as g, memo as _, useCallback as v, useEffect as y, useMemo as b, useRef as x, useState as S } from "react";
-import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
-import { FocusKeys as E, focusZone as D } from "@primer/behaviors";
+import { IconButton as i } from "../IconButton/IconButton.js";
+import { ThemeProvider as a } from "../ThemeProvider/ThemeProvider.js";
+import { useTheme as o } from "../ThemeProvider/useTheme.js";
+import { useAnchoredPosition as s } from "../hooks/useAnchoredPosition.js";
+import { useOnClickOutside as c } from "../hooks/useOnClickOutside.js";
+import { useKeyboardEscape as l } from "../hooks/useKeyboardEscape.js";
+import { ActionMenuButtonModes as u, ActionMenuProvider as d, ActionMenuSizes as f, useActionMenuContext as p } from "./ActionMenuContext.js";
+import { CheckIcon as m } from "../node_modules/@primer/octicons-react/dist/icons/CheckIcon.js";
+import { ChevronDownIcon as h } from "../node_modules/@primer/octicons-react/dist/icons/ChevronDownIcon.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/action-menu/colors-with-modes-mgXFtgvP.css';/* empty css                                                                                                         */
+import g from "./ActionMenu.module.js";
+import _, { Children as v, cloneElement as y, forwardRef as b, isValidElement as x, memo as S, useCallback as C, useEffect as w, useMemo as T, useRef as E, useState as D } from "react";
+import { Fragment as O, jsx as k, jsxs as A } from "react/jsx-runtime";
+import { FocusKeys as j, focusZone as M } from "@primer/behaviors";
 //#region src/ActionMenu/ActionMenu.tsx
-var O = {
+var N = {
 	root: "ActionMenu",
 	get button() {
 		return `${this.root}-button`;
@@ -29,7 +31,7 @@ var O = {
 	get item() {
 		return `${this.root}-list-item`;
 	}
-}, k = [
+}, P = [
 	"inside-top",
 	"inside-bottom",
 	"inside-left",
@@ -39,37 +41,27 @@ var O = {
 	"outside-bottom",
 	"outside-left",
 	"outside-right"
-], A = ["small", "medium"], j = ["default", "split-button"], M = f.createContext({}), N = () => f.useContext(M), P = ({ size: e, children: t, onMenuToggle: n }) => {
-	let [r, i] = S(e);
-	return /* @__PURE__ */ w(M.Provider, {
-		value: {
-			size: r,
-			setSize: i,
-			onMenuToggle: n
-		},
-		children: t
-	});
-}, F = _(({ id: n, children: r, "data-testid": i, disabled: a, open: l = !1, selectionVariant: u = "none", menuAlignment: f = "end", size: h = "medium", menuSide: _, onSelect: b, mode: C = "default" }) => {
-	let [k, A] = S(l), j = x(null), M = x(null), N = t(n);
-	s(j, () => A(!1), M), c(v(() => {
-		A(!1);
+], F = S(({ id: n, children: r, "data-testid": i, disabled: a, open: o = !1, selectionVariant: u = "none", menuAlignment: f = "end", size: p = "medium", menuSide: m, onSelect: h, mode: _ = "default" }) => {
+	let [b, S] = D(o), T = E(null), O = E(null), P = t(n);
+	c(T, () => S(!1), O), l(C(() => {
+		S(!1);
 	}, []));
-	let F = v(() => {
-		A(!k);
-	}, [k]), L = v((e) => {
-		b && b(e), F();
-	}, [b, F]), R = v((e) => {
-		L(e), F(), M.current?.focus();
+	let F = C(() => {
+		S(!b);
+	}, [b]), R = C((e) => {
+		h && h(e), F();
+	}, [h, F]), z = C((e) => {
+		R(e), F(), O.current?.focus();
 	}, [
-		L,
+		R,
 		F,
-		M
+		O
 	]);
-	y(() => {
-		if (k && j.current) {
-			let e = j.current, t = C === "split-button", n = t ? (e) => e.tagName === "A" : void 0;
-			D(j.current, {
-				bindKeys: E.ArrowVertical,
+	w(() => {
+		if (b && T.current) {
+			let e = T.current, t = _ === "split-button", n = t ? (e) => e.tagName === "A" : void 0;
+			M(T.current, {
+				bindKeys: j.ArrowVertical,
 				focusableElementFilter: n,
 				focusInStrategy: t ? "first" : void 0
 			}), e.addEventListener("keydown", (e) => {
@@ -77,12 +69,12 @@ var O = {
 					let t = e.target, n = t.tagName === "A" ? t.closest("li") : t;
 					if (!n || n.getAttribute("aria-disabled") === "true") return;
 					let r = n.getAttribute("data-value");
-					r && (L(r), A(!1), setTimeout(() => {
-						M.current?.focus();
+					r && (R(r), S(!1), setTimeout(() => {
+						O.current?.focus();
 					}, 10));
 				}
 			});
-			let r = t ? "a" : "li", i = j.current.querySelector(r);
+			let r = t ? "a" : "li", i = T.current.querySelector(r);
 			i && setTimeout(() => {
 				i.focus();
 			}, 10);
@@ -94,212 +86,299 @@ var O = {
 				let t = e;
 				t.key === "ArrowUp" && (t.preventDefault(), a.focus());
 			}), e.addEventListener("keydown", (e) => {
-				e.key === "Escape" && M.current?.focus();
+				e.key === "Escape" && O.current?.focus();
 			});
 		}
 	}, [
-		k,
-		j,
-		C,
-		R,
+		b,
+		T,
+		_,
+		z,
 		F,
-		L
+		R
 	]);
-	let { position: B } = o({
-		floatingElementRef: j,
-		anchorElementRef: M,
+	let { position: V } = s({
+		floatingElementRef: T,
+		anchorElementRef: O,
 		align: f,
 		allowOutOfBounds: !0,
-		side: _
-	}, [k]), { Button: V, Overlay: H } = p.toArray(r).reduce((t, n) => (g(n) && n.type === I ? t.Button = m(n, {
-		ref: M,
-		className: e(n.props.className, d[`ActionMenu__button--${C}`], k),
-		menuOpen: k,
+		side: m
+	}, [b]), H = v.toArray(r), U = H.find((e) => x(e) && e.type === B)?.props["aria-label"], { Button: W, Overlay: G } = H.reduce((t, n) => (x(n) && n.type === I ? t.Button = y(n, {
+		ref: O,
+		className: e(n.props.className, g[`ActionMenu__button--${_}`], b),
+		menuOpen: b,
+		disabled: a,
+		id: `${P}-button`,
+		size: p
+	}) : x(n) && n.type === L ? t.Button = y(n, {
+		ref: O,
+		className: e(n.props.className, _ === "split-button" && g["ActionMenu__button--split-button"]),
+		menuOpen: b,
 		disabled: a,
-		id: `${N}-button`,
-		size: h,
-		_mode: C
-	}) : g(n) && n.type === z && (t.Overlay = m(n, {
-		ref: j,
-		className: e(d.ActionMenu__menu, B && d["ActionMenu__menu--visible"], B && d[`ActionMenu__menu--pos-${B.anchorSide}`], d[`ActionMenu__menu--${h}`], C === "split-button" && "ActionMenu__menu--split"),
+		id: `${P}-button`,
+		size: p
+	}) : x(n) && n.type === B && (t.Overlay = y(n, {
+		ref: T,
+		className: e(g.ActionMenu__menu, V && g["ActionMenu__menu--visible"], V && g[`ActionMenu__menu--pos-${V.anchorSide}`], g[`ActionMenu__menu--${p}`], _ === "split-button" && "ActionMenu__menu--split"),
 		style: {
-			top: `${B?.top ?? 0}px`,
-			left: `${B?.left ?? 0}px`
+			top: `${V?.top ?? 0}px`,
+			left: `${V?.left ?? 0}px`
 		},
-		id: `${N}-menu`,
-		children: p.map(n.props.children, (e) => g(e) ? m(e, {
-			handler: R,
-			type: C === "split-button" ? "link" : u
+		id: `${P}-menu`,
+		children: v.map(n.props.children, (e) => x(e) ? y(e, {
+			handler: z,
+			type: _ === "split-button" ? "link" : u
 		}) : e)
 	})), t), {});
-	return /* @__PURE__ */ w(P, {
-		size: h,
+	return /* @__PURE__ */ k(d, {
+		size: p,
+		mode: _,
+		menuLabel: U,
 		onMenuToggle: F,
-		children: /* @__PURE__ */ T("div", {
-			id: N,
-			className: e(d.ActionMenu, a && d["ActionMenu--disabled"]),
-			"data-testid": i || O.root,
-			children: [V, k ? H : null]
+		children: /* @__PURE__ */ A("div", {
+			id: P,
+			className: e(g.ActionMenu, a && g["ActionMenu--disabled"]),
+			"data-testid": i || N.root,
+			children: [W, b ? G : null]
 		})
 	});
-}), I = h(({ as: t, href: n, id: i, children: a, className: o, "data-testid": s, disabled: c, menuOpen: l, size: f, _mode: p = "default", onClick: m, leadingVisual: h, variant: g, ..._ }, y) => {
-	let { onMenuToggle: b } = N(), x = v((e) => {
-		m?.(e), e.defaultPrevented || b?.();
-	}, [m, b]);
-	if (p === "split-button") {
-		let p = g ?? "primary";
-		return /* @__PURE__ */ T("div", {
-			className: e(d.ActionMenu__button, d[`ActionMenu__button--${f}`], o),
-			children: [/* @__PURE__ */ w(r, {
+}), I = b(({ as: t, href: n, id: i, children: a, className: o, "data-testid": s, disabled: c, menuOpen: l, size: u, onClick: d, leadingVisual: f, variant: m, ..._ }, v) => {
+	let { menuLabel: y, mode: b, onMenuToggle: x } = p(), S = C((e) => {
+		if (c) {
+			e.preventDefault();
+			return;
+		}
+		d?.(e), e.defaultPrevented || x?.();
+	}, [
+		c,
+		d,
+		x
+	]), w = C((e) => {
+		if (c) {
+			e.preventDefault();
+			return;
+		}
+		d?.(e);
+	}, [c, d]);
+	if (b === "split-button") {
+		let d = m ?? "primary";
+		return /* @__PURE__ */ A("div", {
+			className: e(g.ActionMenu__button, g[`ActionMenu__button--${u}`], o),
+			children: [/* @__PURE__ */ k(r, {
 				as: t,
 				href: n,
-				className: e(d["ActionMenu__innerButton--split-button"], d[`ActionMenu__innerButton--${p}`], d[`ActionMenu__innerButton--${f}`], c && d["ActionMenu__innerButton--disabled"]),
-				variant: p,
+				className: e(g["ActionMenu__innerButton--split-button"], g["ActionMenu__innerButton--split-button-primary"], g[`ActionMenu__innerButton--${d}`], g[`ActionMenu__innerButton--${u}`], c && g["ActionMenu__innerButton--disabled"]),
+				variant: d,
 				"aria-disabled": c,
-				"data-testid": s || O.button,
-				size: f,
-				leadingVisual: h,
-				onClick: m,
+				"data-testid": s || N.button,
+				size: u,
+				leadingVisual: f,
+				onClick: w,
 				..._,
-				children: /* @__PURE__ */ w("span", {
-					className: d["ActionMenu__button-text"],
+				children: /* @__PURE__ */ k("span", {
+					className: g["ActionMenu__button-text"],
 					children: a
 				})
-			}), /* @__PURE__ */ w(r, {
-				ref: y,
+			}), /* @__PURE__ */ k(r, {
+				ref: v,
 				id: i,
 				as: "button",
-				className: d["ActionMenu__innerButton--split-button"],
-				variant: p,
+				className: e(g["ActionMenu__innerButton--split-button"], g["ActionMenu__innerButton--split-button-menu"]),
+				variant: d,
 				"aria-haspopup": "true",
-				"aria-label": "Menu",
-				size: f,
+				"aria-label": y,
+				size: u,
 				"aria-expanded": l ? "true" : "false",
-				onClick: b,
+				onClick: x,
 				disabled: c,
-				children: /* @__PURE__ */ w(u, { className: d["ActionMenu__inner-button-dropdown-icon"] })
+				children: /* @__PURE__ */ k(h, { className: g["ActionMenu__inner-button-dropdown-icon"] })
 			})]
 		});
 	}
-	return /* @__PURE__ */ w(r, {
-		ref: y,
+	return /* @__PURE__ */ k(r, {
+		ref: v,
 		id: i,
-		className: e(d.ActionMenu__button, d[`ActionMenu__button--${f}`], o),
+		className: e(g.ActionMenu__button, g[`ActionMenu__button--${u}`], o),
 		"aria-haspopup": "true",
 		"aria-expanded": l ? "true" : "false",
 		disabled: c,
-		"data-testid": s || O.button,
-		size: f,
-		variant: g,
-		leadingVisual: h,
-		trailingVisual: /* @__PURE__ */ w(u, {}),
-		onClick: x,
+		"data-testid": s || N.button,
+		size: u,
+		variant: m,
+		leadingVisual: f,
+		trailingVisual: /* @__PURE__ */ k(h, {}),
+		onClick: S,
 		..._,
-		children: /* @__PURE__ */ w("span", {
-			className: d["ActionMenu__button-text"],
+		children: /* @__PURE__ */ k("span", {
+			className: g["ActionMenu__button-text"],
 			children: a
 		})
 	});
-}), L = {
+}), L = b(({ as: t, id: n, icon: r, className: a, "aria-label": o, "data-testid": s, disabled: c, menuOpen: l, size: u, variant: d, onClick: f, ...m }, _) => {
+	let { menuLabel: v, mode: y, onMenuToggle: b } = p(), x = C((e) => {
+		if (c) {
+			e.preventDefault();
+			return;
+		}
+		f?.(e), e.defaultPrevented || b?.();
+	}, [
+		c,
+		f,
+		b
+	]), S = C((e) => {
+		if (c) {
+			e.preventDefault();
+			return;
+		}
+		f?.(e);
+	}, [c, f]);
+	if (y === "split-button") {
+		let f = d ?? "primary";
+		return /* @__PURE__ */ A("div", {
+			className: e(g.ActionMenu__button, g[`ActionMenu__button--${u}`], a),
+			children: [/* @__PURE__ */ k(i, {
+				...m,
+				as: t,
+				icon: r,
+				"aria-label": o,
+				className: e(g["ActionMenu__innerButton--split-button"], g["ActionMenu__innerButton--split-button-primary"], g[`ActionMenu__innerButton--${f}`], g[`ActionMenu__innerButton--${u}`], c && g["ActionMenu__innerButton--disabled"]),
+				variant: f,
+				"aria-disabled": c,
+				"data-testid": s || N.button,
+				size: u,
+				onClick: S
+			}), /* @__PURE__ */ k(i, {
+				ref: _,
+				id: n,
+				icon: h,
+				"aria-label": v,
+				className: e(g["ActionMenu__innerButton--split-button"], g["ActionMenu__innerButton--split-button-menu"]),
+				variant: f,
+				"aria-haspopup": "menu",
+				size: u,
+				"aria-expanded": l ? "true" : "false",
+				onClick: b,
+				disabled: c
+			})]
+		});
+	}
+	return /* @__PURE__ */ k(i, {
+		...m,
+		ref: _,
+		as: t,
+		id: n,
+		icon: r,
+		"aria-label": o,
+		className: a,
+		"aria-haspopup": "menu",
+		"aria-expanded": l ? "true" : "false",
+		disabled: c,
+		"data-testid": s || N.button,
+		size: u,
+		variant: d,
+		onClick: x
+	});
+}), R = {
 	none: "menuitem",
 	single: "menuitemradio",
 	link: "menuitem"
-}, R = ({ as: t, children: r, className: i, disabled: a, handler: o, selected: s, type: c, value: u, onClick: p, onKeyDown: m, leadingVisual: h, ...g }) => {
-	let { size: _ } = N(), y = v((e) => {
-		p?.(e), a || o?.(String(u));
+}, z = ({ as: t, children: r, className: i, disabled: a, handler: o, selected: s, type: c, value: l, onClick: u, onKeyDown: d, leadingVisual: f, ...h }) => {
+	let { size: v } = p(), y = C((e) => {
+		u?.(e), a || o?.(String(l));
 	}, [
 		o,
-		u,
+		l,
 		a,
-		p
-	]), x = v((e) => {
-		m?.(e), !a && e.key === "Enter" && o?.(String(u));
+		u
+	]), b = C((e) => {
+		d?.(e), !a && e.key === "Enter" && o?.(String(l));
 	}, [
 		o,
-		u,
+		l,
 		a,
-		m
-	]), S = b(() => ({
-		className: e(d.ActionMenu__item, c === "single" && d[`ActionMenu__item--selection-type-${c}`], _ && d[`ActionMenu__item--${_}`], i),
-		role: L[c || "single"],
+		d
+	]), x = T(() => ({
+		className: e(g.ActionMenu__item, c === "single" && g[`ActionMenu__item--selection-type-${c}`], v && g[`ActionMenu__item--${v}`], i),
+		role: R[c || "single"],
 		"aria-disabled": a,
 		tabIndex: -1,
-		"data-value": u,
-		...g
+		"data-value": l,
+		...h
 	}), [
-		g,
+		h,
 		c,
-		_,
+		v,
 		i,
 		a,
-		u
-	]), E = b(() => /* @__PURE__ */ T(C, { children: [
-		f.isValidElement(h) ? f.cloneElement(h, {
-			width: h.props.width || 20,
-			height: h.props.width || 20
+		l
+	]), S = T(() => /* @__PURE__ */ A(O, { children: [
+		_.isValidElement(f) ? _.cloneElement(f, {
+			width: f.props.width || 20,
+			height: f.props.width || 20
 		}) : null,
-		c === "single" && /* @__PURE__ */ w("span", {
-			className: d["ActionMenu__item-leadingVisual"],
-			children: s && /* @__PURE__ */ w(l, {
-				className: e(d["ActionMenu__item-icon"], a && d["ActionMenu__item-icon--disabled"]),
+		c === "single" && /* @__PURE__ */ k("span", {
+			className: g["ActionMenu__item-leadingVisual"],
+			children: s && /* @__PURE__ */ k(m, {
+				className: e(g["ActionMenu__item-icon"], a && g["ActionMenu__item-icon--disabled"]),
 				size: 16
 			})
 		}),
-		/* @__PURE__ */ w("span", {
-			className: d["ActionMenu__item-text"],
-			children: /* @__PURE__ */ w(n, {
+		/* @__PURE__ */ k("span", {
+			className: g["ActionMenu__item-text"],
+			children: /* @__PURE__ */ k(n, {
 				variant: a ? "muted" : "default",
-				size: _ === "medium" ? "200" : "100",
-				className: e(a && d["ActionMenu__item-content--disabled"]),
+				size: v === "medium" ? "200" : "100",
+				className: e(a && g["ActionMenu__item-content--disabled"]),
 				children: r
 			})
 		})
 	] }), [
-		h,
+		f,
 		r,
 		s,
 		a,
-		_,
+		v,
 		c
 	]);
-	return t === "a" ? /* @__PURE__ */ w("li", {
+	return t === "a" ? /* @__PURE__ */ k("li", {
 		role: "menuitem",
-		...S,
-		onClick: p,
-		onKeyDown: m,
-		children: /* @__PURE__ */ w("a", {
-			className: e(d["ActionMenu__item-anchor"], a && d["ActionMenu__item--disabled"]),
-			href: g.href,
-			children: E
+		...x,
+		onClick: u,
+		onKeyDown: d,
+		children: /* @__PURE__ */ k("a", {
+			className: e(g["ActionMenu__item-anchor"], a && g["ActionMenu__item--disabled"]),
+			href: h.href,
+			children: S
 		})
-	}) : /* @__PURE__ */ w("li", {
+	}) : /* @__PURE__ */ k("li", {
 		role: "menuitem",
-		...S,
+		...x,
 		"aria-checked": c === "none" ? void 0 : s ? "true" : "false",
 		onClick: y,
-		onKeyDown: x,
-		children: E
+		onKeyDown: b,
+		children: S
 	});
-}, z = h(({ children: t, className: n, "data-testid": r, menuOpen: o, ...s }, c) => {
-	let { colorMode: l } = a();
-	return /* @__PURE__ */ w(i, {
+}, B = b(({ children: t, className: n, "data-testid": r, menuOpen: i, ...s }, c) => {
+	let { colorMode: l } = o();
+	return /* @__PURE__ */ k(a, {
 		colorMode: n?.includes("ActionMenu__menu--split") ? "light" : l,
-		children: /* @__PURE__ */ w("ul", {
+		children: /* @__PURE__ */ k("ul", {
 			ref: c,
 			className: e(n),
 			role: "menu",
-			"data-testid": r || O.list,
+			"data-testid": r || N.list,
 			...s,
 			children: t
 		})
 	});
-}), B = Object.assign(F, {
+}), V = Object.assign(F, {
 	Button: I,
-	Item: R,
-	Overlay: z,
-	testIds: O
+	IconButton: L,
+	Item: z,
+	Overlay: B,
+	testIds: N
 });
 //#endregion
-export { B as ActionMenu, j as ActionMenuButtonModes, P as ActionMenuProvider, A as ActionMenuSizes, k as actionMenuOverlaySides, N as useActionMenuContext };
+export { V as ActionMenu, u as ActionMenuButtonModes, d as ActionMenuProvider, f as ActionMenuSizes, P as actionMenuOverlaySides, p as useActionMenuContext };
 
 //# sourceMappingURL=ActionMenu.js.map