@primer/react-brand 0.71.1-rc.ee7cd7e2 → 0.72.0-rc.44ea78b6

package/docs/components/ActionMenu/index.md

@@ -64,9 +64,6 @@ render(<App />)
 
 In this `mode`, the `ActionMenu` can be shown as a split button with an action (left) and dropdown button (right) with an additional list of actions.
 
-> In split-button mode, each action must be rendered as a link element using the as="a" prop, including the main button
-> and all menu items.
-
 ```jsx
 <ActionMenu mode="split-button">
   <ActionMenu.Button variant="subtle" as="a" href="#location-for-link" leadingVisual={<StarIcon />}>
@@ -129,11 +126,14 @@ In this `mode`, the `ActionMenu` can be shown as a split button with an action (
 
 ### ActionMenu.Button `Required`
 
-| name        | type           | default | required | description                        |
-| ----------- | -------------- | ------- | -------- | ---------------------------------- |
-| `className` | `string`       |         |          | Sets a custom class on the element |
-| `children`  | `ReactElement` |         |          |                                    |
-| `id`        | `string`       |         |          | Sets a custom `id`                 |
+| name            | type                                   | default     | required | description                                      |
+| --------------- | -------------------------------------- | ----------- | -------- | ------------------------------------------------ |
+| `className`     | `string`                               |             |          | Sets a custom class on the element               |
+| `children`      | `ReactElement`                         |             |          |                                                  |
+| `id`            | `string`                               |             |          | Sets a custom `id`                               |
+| `variant`       | `'primary' \| 'secondary' \| 'subtle'` |             | `false`  | Sets the button styling variation                |
+| `onClick`       | `(event: MouseEvent) => void`          | `undefined` | `false`  | Handles activation of the button                 |
+| `leadingVisual` | `ReactElement`                         | `undefined` | `false`  | Renders a leading visual before the button label |
 
 ### ActionMenu.Overlay `Required`
 

package/docs/components/River/index.md

@@ -10,7 +10,7 @@ keywords: ['feature', 'showcase', 'highlight', 'story']
 
 Use rivers to showcase features and introduce topics. Rivers are composed of images or videos paired alongside text content like headings, paragraphs, and links.
 
-A river’s content should be short and concise, no longer than 3 or 4 sentences and in a single paragraph when possible.
+A river’s content should be short and concise, no longer than 160 characters, and contained in a single paragraph when possible.
 
 **✅ Do**
 
@@ -26,21 +26,9 @@ _Don't overload the river with too much content._
 
 ### Stacked
 
-Two or more rivers can be stacked to guide the user through a set of features. When stacking rivers, alternate between left and right alignments to create a more dynamic reading flow. When alternating alignments, use a `40:60` image to text ratio, otherwise keep the ratio to `50:50`.
+Two or more rivers can be stacked to guide the user through a set of features. Keep rivers in a stack consistently aligned to create a predictable reading flow. For gridline rivers, always use start alignment. Don't use zig-zag layouts.
 
-It is possible to use 2 or more following left or right river to create a simple alignment promoting easy scroll scan.
-
-**✅ Do**
-
-![](https://github.com/primer/brand/assets/912236/a7f8bca8-78e6-4e29-a44b-5a305ffeeeae)
-
-_Alternate rivers with left and right alignments._
-
-**❌ Don't**
-
-![](https://github.com/primer/brand/assets/6951037/169d5c19-67f4-4f15-8e3b-80c877b34af1)
-
-_Don't break the flow in a stack of rivers that would otherwise stay aligned._
+Prefer the default 50:50 image-to-text ratio where possible. Use 60:40 only when the visual needs more space or emphasis.
 
 Note that too many rivers can make the design feel repetitive. In that situation, consider introducing a breakout section or break the content with a different component, such as [pillar](../Pillar/index.md) or [card](../Card/index.md) to provide a better visual hierarchy and experience. For example, use the river for the top features you want to highlight and then use pillars to showcase the rest.
 
@@ -170,7 +158,7 @@ The image is automatically styled to fit the width of the parent container. If y
 
 - We recommend using a river left as the first river of the flow to start with a visual and avoid stacking text with above section on mobile
 - River components stacks create a unit, the set should be considered to be the main parent section. The parent section should be spaced as a regular section with the largest spacing while internal elements should use smaller spacing
-- If the image is critical for the user to understand the message, default to right aligned. If the text is critical for the user to understand the image, choose left aligned.
+- For a standalone river, choose its alignment based on whether the visual or text needs emphasis. Keep every river in a stack consistently aligned.
 
 ### Link
 

package/docs/index.md

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.71.1-rc.ee7cd7e2)
+# Primer Brand docs (v0.72.0-rc.44ea78b6)
 
-These docs are bundled with `@primer/react-brand@0.71.1-rc.ee7cd7e2` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.72.0-rc.44ea78b6` and match your installed version.
 
 New here? Start with [Getting started](getting-started/index.md) for installation, global
 stylesheet and font setup. Component directories are named after their import (e.g.

package/esm/ActionMenu/ActionMenu.d.ts

@@ -59,9 +59,11 @@ export type ActionMenuProps = {
 type ActionMenuContextType = {
     size?: ActionMenuSizes;
     setSize?: React.Dispatch<React.SetStateAction<ActionMenuSizes | undefined>>;
+    onMenuToggle?: () => void;
 };
 export declare const useActionMenuContext: () => ActionMenuContextType;
-export declare const ActionMenuProvider: React.FC<ActionMenuProps>;
+type ActionMenuProviderProps = ActionMenuProps & Pick<ActionMenuContextType, 'onMenuToggle'>;
+export declare const ActionMenuProvider: React.FC<ActionMenuProviderProps>;
 type ActionMenuButtonProps = PropsWithChildren<BaseProps<HTMLButtonElement> & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'onClick'>> & {
     as?: ButtonProps<'a'>['as'];
     href?: ButtonProps<'a'>['href'];

package/esm/ActionMenu/ActionMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionMenu.d.ts","sourceRoot":"","sources":["../../src/ActionMenu/ActionMenu.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ActionMenu.d.ts","sourceRoot":"","sources":["../../src/ActionMenu/ActionMenu.tsx"],"names":[],"mappings":"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"}

package/esm/ActionMenu/ActionMenu.js

@@ -38,12 +38,13 @@ 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 }) => {
-	let [n, r] = S(e);
+], 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: n,
-			setSize: r
+			size: r,
+			setSize: i,
+			onMenuToggle: n
 		},
 		children: t
 	});
@@ -110,7 +111,6 @@ var O = {
 		allowOutOfBounds: !0,
 		side: _
 	}, [k]), { Button: V, Overlay: H } = p.toArray(r).reduce((t, n) => (g(n) && n.type === I ? t.Button = m(n, {
-		onClick: F,
 		ref: M,
 		className: e(n.props.className, d[`ActionMenu__button--${C}`], k),
 		menuOpen: k,
@@ -133,6 +133,7 @@ var O = {
 	})), t), {});
 	return /* @__PURE__ */ w(P, {
 		size: h,
+		onMenuToggle: F,
 		children: /* @__PURE__ */ T("div", {
 			id: N,
 			className: e(d.ActionMenu, a && d["ActionMenu--disabled"]),
@@ -140,51 +141,65 @@ var O = {
 			children: [V, k ? H : null]
 		})
 	});
-}), I = h(({ as: t, href: n, children: r, className: o, "data-testid": s, disabled: c, menuOpen: l, size: u, _mode: f = "default", onClick: p, leadingVisual: m, variant: h = "primary", ...g }, _) => f === "split-button" ? /* @__PURE__ */ T("div", {
-	className: e(d.ActionMenu__button, d[`ActionMenu__button--${u}`], o),
-	children: [/* @__PURE__ */ w(a, {
-		as: t,
-		href: n,
-		className: e(d["ActionMenu__innerButton--split-button"], d[`ActionMenu__innerButton--${h}`], d[`ActionMenu__innerButton--${u}`], c && d["ActionMenu__innerButton--disabled"]),
-		variant: h,
-		"aria-disabled": c,
-		"data-testid": s || O.button,
-		size: u,
-		leadingVisual: m,
+}), I = h(({ as: t, href: n, id: r, children: o, className: s, "data-testid": c, disabled: l, menuOpen: u, 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}`], s),
+			children: [/* @__PURE__ */ w(a, {
+				as: t,
+				href: n,
+				className: e(d["ActionMenu__innerButton--split-button"], d[`ActionMenu__innerButton--${p}`], d[`ActionMenu__innerButton--${f}`], l && d["ActionMenu__innerButton--disabled"]),
+				variant: p,
+				"aria-disabled": l,
+				"data-testid": c || O.button,
+				size: f,
+				leadingVisual: h,
+				onClick: m,
+				..._,
+				children: /* @__PURE__ */ w("span", {
+					className: d["ActionMenu__button-text"],
+					children: o
+				})
+			}), /* @__PURE__ */ w(a, {
+				ref: y,
+				id: r,
+				as: "button",
+				className: d["ActionMenu__innerButton--split-button"],
+				variant: p,
+				"aria-haspopup": "true",
+				"aria-label": "Menu",
+				size: f,
+				"aria-expanded": u ? "true" : "false",
+				onClick: b,
+				disabled: l,
+				children: /* @__PURE__ */ w(i, { className: d["ActionMenu__inner-button-dropdown-icon"] })
+			})]
+		});
+	}
+	return /* @__PURE__ */ w(a, {
+		ref: y,
+		id: r,
+		className: e(d.ActionMenu__button, d[`ActionMenu__button--${f}`], s),
+		"aria-haspopup": "true",
+		"aria-expanded": u ? "true" : "false",
+		disabled: l,
+		"data-testid": c || O.button,
+		size: f,
+		variant: g,
+		leadingVisual: h,
+		trailingVisual: /* @__PURE__ */ w(i, {}),
+		onClick: x,
+		..._,
 		children: /* @__PURE__ */ w("span", {
 			className: d["ActionMenu__button-text"],
-			children: r
+			children: o
 		})
-	}), /* @__PURE__ */ w(a, {
-		ref: _,
-		as: "button",
-		className: d["ActionMenu__innerButton--split-button"],
-		variant: h,
-		"aria-haspopup": "true",
-		"aria-label": "Menu",
-		size: u,
-		"aria-expanded": l ? "true" : "false",
-		onClick: p,
-		disabled: c,
-		...g,
-		children: /* @__PURE__ */ w(i, { className: d["ActionMenu__inner-button-dropdown-icon"] })
-	})]
-}) : /* @__PURE__ */ w(a, {
-	ref: _,
-	className: e(d.ActionMenu__button, d[`ActionMenu__button--${u}`], o),
-	"aria-haspopup": "true",
-	"aria-expanded": l ? "true" : "false",
-	disabled: c,
-	"data-testid": s || O.button,
-	size: u,
-	trailingVisual: /* @__PURE__ */ w(i, {}),
-	onClick: p,
-	...g,
-	children: /* @__PURE__ */ w("span", {
-		className: d["ActionMenu__button-text"],
-		children: r
-	})
-})), L = {
+	});
+}), L = {
 	none: "menuitem",
 	single: "menuitemradio",
 	link: "menuitem"

package/esm/ActionMenu/ActionMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionMenu.js","names":[],"sources":["../../src/ActionMenu/ActionMenu.tsx"],"sourcesContent":["import React, {\n  Children,\n  isValidElement,\n  cloneElement,\n  useRef,\n  useCallback,\n  useState,\n  useEffect,\n  PropsWithChildren,\n  forwardRef,\n  memo,\n  ReactElement,\n  useMemo,\n} from 'react'\nimport {Button, ButtonProps, Text, ThemeProvider, useTheme} from '../'\nimport {useAnchoredPosition} from '../hooks/useAnchoredPosition'\nimport {useOnClickOutside} from '../hooks/useOnClickOutside'\nimport {useKeyboardEscape} from '../hooks/useKeyboardEscape'\n\nimport {clsx} from 'clsx'\nimport {CheckIcon, ChevronDownIcon, type Icon} from '@primer/octicons-react'\nimport {useId} from '../hooks/useId'\n\nimport {FocusKeys, type PositionSettings, focusZone} from '@primer/behaviors'\nimport type {BaseProps} from '../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/action-menu/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './ActionMenu.module.css'\n\nconst testIds = {\n  root: 'ActionMenu',\n  get button() {\n    return `${this.root}-button`\n  },\n  get overlay() {\n    return `${this.root}-overlay`\n  },\n  get list() {\n    return `${this.root}-list`\n  },\n  get item() {\n    return `${this.root}-list-item`\n  },\n}\n\n// primer behaviors doesn't export these values, recreating manually\n// https://github.com/primer/behaviors/blob/main/src/anchored-position.ts#L5\nexport const actionMenuOverlaySides = [\n  'inside-top',\n  'inside-bottom',\n  'inside-left',\n  'inside-right',\n  'inside-center',\n  'outside-top',\n  'outside-bottom',\n  'outside-left',\n  'outside-right',\n] as PositionSettings['side'][]\n\nexport const ActionMenuSizes = ['small', 'medium'] as const\n\nexport const ActionMenuButtonModes = ['default', 'split-button'] as const\nexport type ActionMenuButtonModes = (typeof ActionMenuButtonModes)[number]\n\nexport type ActionMenuSizes = (typeof ActionMenuSizes)[number]\n\nexport type ActionMenuProps = {\n  /**\n   * The content of the ActionMenu. Must be an ActionMenu.Button and an ActionMenu.Overlay\n   */\n  children:\n    | ReactElement<ActionMenuButtonProps>\n    | ReactElement<ActionMenuOverlayProps>\n    | Array<ReactElement<ActionMenuButtonProps> | ReactElement<ActionMenuOverlayProps>>\n  /**\n   * Determines whether the ActionMenu is disabled\n   */\n  disabled?: boolean\n  /**\n   * Determines whether the ActionMenu is open by default\n   */\n  open?: boolean\n  /**\n   * Callback that is called when an item is selected.\n   * The value of the selected item is passed as an argument.\n   */\n  onSelect?: (newValue: string) => void\n  /**\n   * The selection variant of the ActionMenu.\n   * - `single`: Only one item can be selected at a time. Menu items as a menuitemradio.\n   * - `none`: No items can be selected. Menu items as a menuitem.\n   */\n  selectionVariant?: 'single' | 'none'\n  /**\n   * Test id for the ActionMenu\n   */\n  'data-testid'?: string\n  /**\n   * Horizontal alignment of the menu relative to the bottom of the button\n   */\n  menuAlignment?: 'start' | 'end'\n  /**\n   * Size configuratin of the ActionMenu\n   */\n  size?: ActionMenuSizes\n  /*\n   * Side the menu overlay appears\n   */\n  menuSide?: PositionSettings['side']\n  /**\n   * Alternative behavior for the button and menu items\n   * - `default`: The button and menu items behave as a standard button and menu item.\n   * - `split-button`: The button behaves as a split button, and the menu items behave as links.\n   */\n  mode?: ActionMenuButtonModes\n} & BaseProps<HTMLDivElement>\n\ntype ActionMenuContextType = {\n  size?: ActionMenuSizes\n  setSize?: React.Dispatch<React.SetStateAction<ActionMenuSizes | undefined>>\n}\n\nconst ActionMenuContext = React.createContext<ActionMenuContextType>({})\n\nexport const useActionMenuContext = (): ActionMenuContextType => {\n  return React.useContext(ActionMenuContext)\n}\n\nexport const ActionMenuProvider: React.FC<ActionMenuProps> = ({size, children}) => {\n  const [currentSize, setSize] = useState(size)\n\n  return <ActionMenuContext.Provider value={{size: currentSize, setSize}}>{children}</ActionMenuContext.Provider>\n}\n\nconst _ActionMenuRoot = memo(\n  ({\n    id,\n    children,\n    'data-testid': testId,\n    disabled,\n    open = false,\n    selectionVariant = 'none',\n    menuAlignment = 'end',\n    size = 'medium',\n    menuSide,\n    onSelect,\n    mode = 'default',\n  }: ActionMenuProps) => {\n    const [showMenu, setShowMenu] = useState(open)\n    const floatingElementRef = useRef<HTMLUListElement>(null)\n    const anchorElementRef = useRef<HTMLButtonElement>(null)\n    const instanceId = useId(id)\n\n    useOnClickOutside(floatingElementRef, () => setShowMenu(false), anchorElementRef)\n\n    const closeMenuCallback = useCallback(() => {\n      setShowMenu(false)\n    }, [])\n\n    useKeyboardEscape(closeMenuCallback)\n\n    const toggleMenu = useCallback(() => {\n      setShowMenu(!showMenu)\n    }, [showMenu])\n\n    const handleOnSelect = useCallback(\n      (newValue: string) => {\n        if (onSelect) onSelect(newValue)\n        toggleMenu()\n      },\n      [onSelect, toggleMenu],\n    )\n\n    const handleItemSelection = useCallback(\n      (newValue: string) => {\n        handleOnSelect(newValue)\n        toggleMenu()\n        anchorElementRef.current?.focus()\n      },\n      [handleOnSelect, toggleMenu, anchorElementRef],\n    )\n\n    useEffect(() => {\n      if (showMenu && floatingElementRef.current) {\n        const floatingElement = floatingElementRef.current\n        const isSplitLayout = mode === 'split-button'\n        const splitLayoutFilter = isSplitLayout ? element => element.tagName === 'A' : undefined\n\n        focusZone(floatingElementRef.current, {\n          bindKeys: FocusKeys.ArrowVertical,\n          focusableElementFilter: splitLayoutFilter,\n          focusInStrategy: isSplitLayout ? 'first' : undefined,\n        })\n\n        // enter selects item\n        floatingElement.addEventListener('keydown', event => {\n          if (event.key === 'Enter') {\n            const target = event.target as HTMLElement\n\n            // Get the proper element containing the data-value\n            const targetElement = target.tagName === 'A' ? target.closest('li') : target\n\n            if (!targetElement || targetElement.getAttribute('aria-disabled') === 'true') return\n\n            const value = targetElement.getAttribute('data-value')\n            if (value) {\n              handleOnSelect(value)\n              setShowMenu(false)\n              setTimeout(() => {\n                anchorElementRef.current?.focus()\n              }, 10)\n            }\n          }\n        })\n\n        const targetSelector = isSplitLayout ? 'a' : 'li'\n\n        // focusses first item\n        const firstItem = floatingElementRef.current.querySelector(targetSelector)\n        if (firstItem) {\n          setTimeout(() => {\n            firstItem.focus()\n          }, 10)\n        }\n\n        const lastItem =\n          floatingElement.querySelectorAll(targetSelector)[floatingElement.querySelectorAll(targetSelector).length - 1]\n        lastItem.addEventListener('keydown', (event: Event) => {\n          const keyboardEvent = event as KeyboardEvent\n          if (keyboardEvent.key === 'ArrowDown') {\n            keyboardEvent.preventDefault()\n            firstItem?.focus()\n          }\n        })\n\n        firstItem?.addEventListener('keydown', (event: Event) => {\n          const keyboardEvent = event as KeyboardEvent\n          if (keyboardEvent.key === 'ArrowUp') {\n            keyboardEvent.preventDefault()\n            lastItem.focus()\n          }\n        })\n\n        //on escape refocus\n        floatingElement.addEventListener('keydown', (event: Event) => {\n          const keyboardEvent = event as KeyboardEvent\n          if (keyboardEvent.key === 'Escape') {\n            anchorElementRef.current?.focus()\n          }\n        })\n      }\n    }, [showMenu, floatingElementRef, mode, handleItemSelection, toggleMenu, handleOnSelect])\n\n    // Calculate the position of the menu\n    const {position} = useAnchoredPosition(\n      {\n        floatingElementRef,\n        anchorElementRef,\n        align: menuAlignment,\n        allowOutOfBounds: true,\n        side: menuSide,\n      },\n      [showMenu],\n    )\n\n    const {Button: SelectButton, Overlay: SelectOverlay} = Children.toArray(children).reduce<{\n      Button?: ReactElement<ActionMenuButtonProps>\n      Overlay?: ReactElement<ActionMenuOverlayProps>\n    }>((acc, child) => {\n      if (isValidElement<ActionMenuButtonProps>(child) && child.type === ActionMenuButton) {\n        acc.Button = cloneElement(child, {\n          onClick: toggleMenu,\n          ref: anchorElementRef as React.RefObject<HTMLButtonElement>,\n          className: clsx(child.props.className, styles[`ActionMenu__button--${mode}`], showMenu),\n          menuOpen: showMenu,\n          disabled,\n          id: `${instanceId}-button`,\n          size,\n          _mode: mode,\n        })\n      } else if (isValidElement<ActionMenuOverlayProps>(child) && child.type === ActionMenuOverlay) {\n        acc.Overlay = cloneElement(child, {\n          ref: floatingElementRef as React.RefObject<HTMLUListElement>,\n          className: clsx(\n            styles.ActionMenu__menu,\n            position && styles['ActionMenu__menu--visible'],\n            position && styles[`ActionMenu__menu--pos-${position.anchorSide}`],\n            styles[`ActionMenu__menu--${size}`],\n            mode === 'split-button' && 'ActionMenu__menu--split',\n          ),\n          style: {\n            top: `${position?.top ?? 0}px`,\n            left: `${position?.left ?? 0}px`,\n          },\n          id: `${instanceId}-menu`,\n          children: Children.map(child.props.children, item => {\n            if (isValidElement<ActionMenuItemBaseProps>(item)) {\n              return cloneElement(item, {\n                handler: handleItemSelection,\n                type: mode === 'split-button' ? 'link' : selectionVariant,\n              })\n            }\n            return item\n          }),\n        })\n      }\n      return acc\n    }, {})\n\n    return (\n      <ActionMenuProvider size={size}>\n        <div\n          id={instanceId}\n          className={clsx(styles.ActionMenu, disabled && styles['ActionMenu--disabled'])}\n          data-testid={testId || testIds.root}\n        >\n          {SelectButton}\n          {showMenu ? SelectOverlay : null}\n        </div>\n      </ActionMenuProvider>\n    )\n  },\n)\n\ntype ActionMenuButtonProps = PropsWithChildren<\n  BaseProps<HTMLButtonElement> & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'onClick'>\n> & {\n  as?: ButtonProps<'a'>['as']\n  href?: ButtonProps<'a'>['href']\n  menuOpen?: boolean\n  'data-testid'?: string\n  size?: ActionMenuSizes\n  _mode?: ActionMenuButtonModes\n  variant?: ButtonProps<'a'>['variant']\n  leadingVisual?: ButtonProps<'a'>['leadingVisual']\n}\n\nconst ActionMenuButton = forwardRef<HTMLButtonElement, ActionMenuButtonProps>(\n  (\n    {\n      as,\n      href,\n      children,\n      className,\n      'data-testid': testId,\n      disabled,\n      menuOpen,\n      size,\n      _mode = 'default',\n      onClick,\n      leadingVisual,\n      variant = 'primary',\n      ...props\n    },\n    ref,\n  ) => {\n    if (_mode === 'split-button') {\n      return (\n        <div className={clsx(styles.ActionMenu__button, styles[`ActionMenu__button--${size}`], className)}>\n          <Button\n            as={as}\n            href={href}\n            className={clsx(\n              styles['ActionMenu__innerButton--split-button'],\n              styles[`ActionMenu__innerButton--${variant}`],\n              styles[`ActionMenu__innerButton--${size}`],\n              disabled && styles['ActionMenu__innerButton--disabled'],\n            )}\n            variant={variant}\n            aria-disabled={disabled}\n            data-testid={testId || testIds.button}\n            size={size}\n            leadingVisual={leadingVisual}\n          >\n            <span className={styles['ActionMenu__button-text']}>{children}</span>\n          </Button>\n          <Button\n            ref={ref}\n            as=\"button\"\n            className={styles['ActionMenu__innerButton--split-button']}\n            variant={variant}\n            aria-haspopup=\"true\"\n            aria-label=\"Menu\"\n            size={size}\n            aria-expanded={menuOpen ? 'true' : 'false'}\n            onClick={onClick}\n            disabled={disabled}\n            {...props}\n          >\n            <ChevronDownIcon className={styles['ActionMenu__inner-button-dropdown-icon']} />\n          </Button>\n        </div>\n      )\n    }\n\n    return (\n      <Button\n        ref={ref}\n        className={clsx(styles.ActionMenu__button, styles[`ActionMenu__button--${size}`], className)}\n        aria-haspopup=\"true\"\n        aria-expanded={menuOpen ? 'true' : 'false'}\n        disabled={disabled}\n        data-testid={testId || testIds.button}\n        size={size}\n        trailingVisual={<ChevronDownIcon />}\n        onClick={onClick}\n        {...props}\n      >\n        <span className={styles['ActionMenu__button-text']}>{children}</span>\n      </Button>\n    )\n  },\n)\n\ntype ActionMenuItemBaseProps = {\n  handler?: (newValue: string) => void\n  type?: 'none' | 'single' | 'link'\n  disabled?: boolean\n  size?: ActionMenuSizes\n  leadingVisual?: React.ReactElement | React.ReactNode | Icon\n} & PropsWithChildren<React.HTMLProps<HTMLLIElement>>\n\ntype ActionMenuItemAnchorProps = ActionMenuItemBaseProps & {\n  as: 'a'\n} & Omit<React.HTMLProps<HTMLAnchorElement>, keyof ActionMenuItemBaseProps | 'as'>\n\n// Type for when 'as' is not set or is anything other than 'a'\ntype ActionMenuItemDefaultProps = ActionMenuItemBaseProps & {\n  as?: string\n  value?: string\n  selected?: boolean\n} & Omit<React.HTMLProps<HTMLLIElement>, keyof ActionMenuItemBaseProps | 'as'>\n\nconst roleTypeMap = {\n  none: 'menuitem',\n  single: 'menuitemradio',\n  link: 'menuitem',\n}\n\nconst ActionMenuItem = ({\n  as,\n  children,\n  className,\n  disabled,\n  handler,\n  selected,\n  type,\n  value,\n  onClick,\n  onKeyDown,\n  leadingVisual: LeadingVisual,\n  ...props\n}: ActionMenuItemAnchorProps | ActionMenuItemDefaultProps) => {\n  const {size} = useActionMenuContext()\n\n  const handleClick = useCallback(\n    (e: React.MouseEvent<HTMLLIElement>) => {\n      onClick?.(e)\n\n      if (!disabled) {\n        handler?.(String(value))\n      }\n    },\n    [handler, value, disabled, onClick],\n  )\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLLIElement>) => {\n      onKeyDown?.(e)\n\n      if (!disabled && e.key === 'Enter') {\n        handler?.(String(value))\n      }\n    },\n    [handler, value, disabled, onKeyDown],\n  )\n\n  const liProps = useMemo<React.HTMLProps<HTMLLIElement> & {'data-value': unknown}>(\n    () => ({\n      className: clsx(\n        styles.ActionMenu__item,\n        type === 'single' && styles[`ActionMenu__item--selection-type-${type}`],\n        size && styles[`ActionMenu__item--${size}`],\n        className,\n      ),\n      role: roleTypeMap[type || 'single'],\n      'aria-disabled': disabled,\n      tabIndex: -1,\n      'data-value': value,\n      ...props,\n    }),\n    [props, type, size, className, disabled, value],\n  )\n\n  const contents = useMemo(\n    () => (\n      <>\n        {React.isValidElement<{width?: number; height?: number}>(LeadingVisual)\n          ? React.cloneElement(LeadingVisual, {\n              width: LeadingVisual.props.width || 20,\n              height: LeadingVisual.props.width || 20,\n            })\n          : null}\n        {type === 'single' && (\n          <span className={styles['ActionMenu__item-leadingVisual']}>\n            {selected && (\n              <CheckIcon\n                className={clsx(styles['ActionMenu__item-icon'], disabled && styles['ActionMenu__item-icon--disabled'])}\n                size={16}\n              />\n            )}\n          </span>\n        )}\n\n        <span className={styles['ActionMenu__item-text']}>\n          <Text\n            variant={disabled ? 'muted' : 'default'}\n            size={size === 'medium' ? '200' : '100'}\n            className={clsx(disabled && styles['ActionMenu__item-content--disabled'])}\n          >\n            {children}\n          </Text>\n        </span>\n      </>\n    ),\n    [LeadingVisual, children, selected, disabled, size, type],\n  )\n\n  if (as === 'a') {\n    return (\n      <li\n        // This role will be overridden by the role prop in `liProps`. It's just here to keep the linter happy\n        role=\"menuitem\"\n        {...liProps}\n        // Intentionally not calling handle[Click/KeyDown] here so as to not call the handler\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n      >\n        <a\n          className={clsx(styles['ActionMenu__item-anchor'], disabled && styles['ActionMenu__item--disabled'])}\n          href={props.href}\n        >\n          {contents}\n        </a>\n      </li>\n    )\n  }\n\n  return (\n    // eslint-disable-next-line jsx-a11y/role-supports-aria-props\n    <li\n      // This role will be overridden by the role prop in `liProps`. It's just here to keep the linter happy\n      role=\"menuitem\"\n      {...liProps}\n      aria-checked={type === 'none' ? undefined : selected ? 'true' : 'false'}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n    >\n      {contents}\n    </li>\n  )\n}\n\ntype ActionMenuOverlayProps = PropsWithChildren<\n  BaseProps<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement>\n> & {\n  'aria-label': string\n  id?: string\n  'data-testid'?: string\n  menuOpen?: boolean\n  style?: React.CSSProperties\n}\n\nconst ActionMenuOverlay = forwardRef<HTMLUListElement, ActionMenuOverlayProps>(\n  ({children, className, 'data-testid': testId, menuOpen, ...rest}, ref) => {\n    const {colorMode: defaultColorMode} = useTheme()\n\n    const colorMode = className?.includes('ActionMenu__menu--split') ? 'light' : defaultColorMode\n\n    return (\n      <ThemeProvider colorMode={colorMode}>\n        <ul ref={ref} className={clsx(className)} role=\"menu\" data-testid={testId || testIds.list} {...rest}>\n          {children}\n        </ul>\n      </ThemeProvider>\n    )\n  },\n)\n\n/**\n * Use ActionMenu to display a list of actions or selections that expand through a trigger button.\n * @see https://primer.style/brand/components/ActionMenu\n */\nexport const ActionMenu = Object.assign(_ActionMenuRoot, {\n  Button: ActionMenuButton,\n  Item: ActionMenuItem,\n  Overlay: ActionMenuOverlay,\n  testIds,\n})\n"],"mappings":"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"}
+{"version":3,"file":"ActionMenu.js","names":[],"sources":["../../src/ActionMenu/ActionMenu.tsx"],"sourcesContent":["import React, {\n  Children,\n  isValidElement,\n  cloneElement,\n  useRef,\n  useCallback,\n  useState,\n  useEffect,\n  PropsWithChildren,\n  forwardRef,\n  memo,\n  ReactElement,\n  useMemo,\n} from 'react'\nimport {Button, ButtonProps, Text, ThemeProvider, useTheme} from '../'\nimport {useAnchoredPosition} from '../hooks/useAnchoredPosition'\nimport {useOnClickOutside} from '../hooks/useOnClickOutside'\nimport {useKeyboardEscape} from '../hooks/useKeyboardEscape'\n\nimport {clsx} from 'clsx'\nimport {CheckIcon, ChevronDownIcon, type Icon} from '@primer/octicons-react'\nimport {useId} from '../hooks/useId'\n\nimport {FocusKeys, type PositionSettings, focusZone} from '@primer/behaviors'\nimport type {BaseProps} from '../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/action-menu/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './ActionMenu.module.css'\n\nconst testIds = {\n  root: 'ActionMenu',\n  get button() {\n    return `${this.root}-button`\n  },\n  get overlay() {\n    return `${this.root}-overlay`\n  },\n  get list() {\n    return `${this.root}-list`\n  },\n  get item() {\n    return `${this.root}-list-item`\n  },\n}\n\n// primer behaviors doesn't export these values, recreating manually\n// https://github.com/primer/behaviors/blob/main/src/anchored-position.ts#L5\nexport const actionMenuOverlaySides = [\n  'inside-top',\n  'inside-bottom',\n  'inside-left',\n  'inside-right',\n  'inside-center',\n  'outside-top',\n  'outside-bottom',\n  'outside-left',\n  'outside-right',\n] as PositionSettings['side'][]\n\nexport const ActionMenuSizes = ['small', 'medium'] as const\n\nexport const ActionMenuButtonModes = ['default', 'split-button'] as const\nexport type ActionMenuButtonModes = (typeof ActionMenuButtonModes)[number]\n\nexport type ActionMenuSizes = (typeof ActionMenuSizes)[number]\n\nexport type ActionMenuProps = {\n  /**\n   * The content of the ActionMenu. Must be an ActionMenu.Button and an ActionMenu.Overlay\n   */\n  children:\n    | ReactElement<ActionMenuButtonProps>\n    | ReactElement<ActionMenuOverlayProps>\n    | Array<ReactElement<ActionMenuButtonProps> | ReactElement<ActionMenuOverlayProps>>\n  /**\n   * Determines whether the ActionMenu is disabled\n   */\n  disabled?: boolean\n  /**\n   * Determines whether the ActionMenu is open by default\n   */\n  open?: boolean\n  /**\n   * Callback that is called when an item is selected.\n   * The value of the selected item is passed as an argument.\n   */\n  onSelect?: (newValue: string) => void\n  /**\n   * The selection variant of the ActionMenu.\n   * - `single`: Only one item can be selected at a time. Menu items as a menuitemradio.\n   * - `none`: No items can be selected. Menu items as a menuitem.\n   */\n  selectionVariant?: 'single' | 'none'\n  /**\n   * Test id for the ActionMenu\n   */\n  'data-testid'?: string\n  /**\n   * Horizontal alignment of the menu relative to the bottom of the button\n   */\n  menuAlignment?: 'start' | 'end'\n  /**\n   * Size configuratin of the ActionMenu\n   */\n  size?: ActionMenuSizes\n  /*\n   * Side the menu overlay appears\n   */\n  menuSide?: PositionSettings['side']\n  /**\n   * Alternative behavior for the button and menu items\n   * - `default`: The button and menu items behave as a standard button and menu item.\n   * - `split-button`: The button behaves as a split button, and the menu items behave as links.\n   */\n  mode?: ActionMenuButtonModes\n} & BaseProps<HTMLDivElement>\n\ntype ActionMenuContextType = {\n  size?: ActionMenuSizes\n  setSize?: React.Dispatch<React.SetStateAction<ActionMenuSizes | undefined>>\n  onMenuToggle?: () => void\n}\n\nconst ActionMenuContext = React.createContext<ActionMenuContextType>({})\n\nexport const useActionMenuContext = (): ActionMenuContextType => {\n  return React.useContext(ActionMenuContext)\n}\n\ntype ActionMenuProviderProps = ActionMenuProps & Pick<ActionMenuContextType, 'onMenuToggle'>\n\nexport const ActionMenuProvider: React.FC<ActionMenuProviderProps> = ({size, children, onMenuToggle}) => {\n  const [currentSize, setSize] = useState(size)\n\n  return (\n    <ActionMenuContext.Provider value={{size: currentSize, setSize, onMenuToggle}}>\n      {children}\n    </ActionMenuContext.Provider>\n  )\n}\n\nconst _ActionMenuRoot = memo(\n  ({\n    id,\n    children,\n    'data-testid': testId,\n    disabled,\n    open = false,\n    selectionVariant = 'none',\n    menuAlignment = 'end',\n    size = 'medium',\n    menuSide,\n    onSelect,\n    mode = 'default',\n  }: ActionMenuProps) => {\n    const [showMenu, setShowMenu] = useState(open)\n    const floatingElementRef = useRef<HTMLUListElement>(null)\n    const anchorElementRef = useRef<HTMLButtonElement>(null)\n    const instanceId = useId(id)\n\n    useOnClickOutside(floatingElementRef, () => setShowMenu(false), anchorElementRef)\n\n    const closeMenuCallback = useCallback(() => {\n      setShowMenu(false)\n    }, [])\n\n    useKeyboardEscape(closeMenuCallback)\n\n    const toggleMenu = useCallback(() => {\n      setShowMenu(!showMenu)\n    }, [showMenu])\n\n    const handleOnSelect = useCallback(\n      (newValue: string) => {\n        if (onSelect) onSelect(newValue)\n        toggleMenu()\n      },\n      [onSelect, toggleMenu],\n    )\n\n    const handleItemSelection = useCallback(\n      (newValue: string) => {\n        handleOnSelect(newValue)\n        toggleMenu()\n        anchorElementRef.current?.focus()\n      },\n      [handleOnSelect, toggleMenu, anchorElementRef],\n    )\n\n    useEffect(() => {\n      if (showMenu && floatingElementRef.current) {\n        const floatingElement = floatingElementRef.current\n        const isSplitLayout = mode === 'split-button'\n        const splitLayoutFilter = isSplitLayout ? element => element.tagName === 'A' : undefined\n\n        focusZone(floatingElementRef.current, {\n          bindKeys: FocusKeys.ArrowVertical,\n          focusableElementFilter: splitLayoutFilter,\n          focusInStrategy: isSplitLayout ? 'first' : undefined,\n        })\n\n        // enter selects item\n        floatingElement.addEventListener('keydown', event => {\n          if (event.key === 'Enter') {\n            const target = event.target as HTMLElement\n\n            // Get the proper element containing the data-value\n            const targetElement = target.tagName === 'A' ? target.closest('li') : target\n\n            if (!targetElement || targetElement.getAttribute('aria-disabled') === 'true') return\n\n            const value = targetElement.getAttribute('data-value')\n            if (value) {\n              handleOnSelect(value)\n              setShowMenu(false)\n              setTimeout(() => {\n                anchorElementRef.current?.focus()\n              }, 10)\n            }\n          }\n        })\n\n        const targetSelector = isSplitLayout ? 'a' : 'li'\n\n        // focusses first item\n        const firstItem = floatingElementRef.current.querySelector(targetSelector)\n        if (firstItem) {\n          setTimeout(() => {\n            firstItem.focus()\n          }, 10)\n        }\n\n        const lastItem =\n          floatingElement.querySelectorAll(targetSelector)[floatingElement.querySelectorAll(targetSelector).length - 1]\n        lastItem.addEventListener('keydown', (event: Event) => {\n          const keyboardEvent = event as KeyboardEvent\n          if (keyboardEvent.key === 'ArrowDown') {\n            keyboardEvent.preventDefault()\n            firstItem?.focus()\n          }\n        })\n\n        firstItem?.addEventListener('keydown', (event: Event) => {\n          const keyboardEvent = event as KeyboardEvent\n          if (keyboardEvent.key === 'ArrowUp') {\n            keyboardEvent.preventDefault()\n            lastItem.focus()\n          }\n        })\n\n        //on escape refocus\n        floatingElement.addEventListener('keydown', (event: Event) => {\n          const keyboardEvent = event as KeyboardEvent\n          if (keyboardEvent.key === 'Escape') {\n            anchorElementRef.current?.focus()\n          }\n        })\n      }\n    }, [showMenu, floatingElementRef, mode, handleItemSelection, toggleMenu, handleOnSelect])\n\n    // Calculate the position of the menu\n    const {position} = useAnchoredPosition(\n      {\n        floatingElementRef,\n        anchorElementRef,\n        align: menuAlignment,\n        allowOutOfBounds: true,\n        side: menuSide,\n      },\n      [showMenu],\n    )\n\n    const {Button: SelectButton, Overlay: SelectOverlay} = Children.toArray(children).reduce<{\n      Button?: ReactElement<ActionMenuButtonProps>\n      Overlay?: ReactElement<ActionMenuOverlayProps>\n    }>((acc, child) => {\n      if (isValidElement<ActionMenuButtonProps>(child) && child.type === ActionMenuButton) {\n        acc.Button = cloneElement(child, {\n          ref: anchorElementRef as React.RefObject<HTMLButtonElement>,\n          className: clsx(child.props.className, styles[`ActionMenu__button--${mode}`], showMenu),\n          menuOpen: showMenu,\n          disabled,\n          id: `${instanceId}-button`,\n          size,\n          _mode: mode,\n        })\n      } else if (isValidElement<ActionMenuOverlayProps>(child) && child.type === ActionMenuOverlay) {\n        acc.Overlay = cloneElement(child, {\n          ref: floatingElementRef as React.RefObject<HTMLUListElement>,\n          className: clsx(\n            styles.ActionMenu__menu,\n            position && styles['ActionMenu__menu--visible'],\n            position && styles[`ActionMenu__menu--pos-${position.anchorSide}`],\n            styles[`ActionMenu__menu--${size}`],\n            mode === 'split-button' && 'ActionMenu__menu--split',\n          ),\n          style: {\n            top: `${position?.top ?? 0}px`,\n            left: `${position?.left ?? 0}px`,\n          },\n          id: `${instanceId}-menu`,\n          children: Children.map(child.props.children, item => {\n            if (isValidElement<ActionMenuItemBaseProps>(item)) {\n              return cloneElement(item, {\n                handler: handleItemSelection,\n                type: mode === 'split-button' ? 'link' : selectionVariant,\n              })\n            }\n            return item\n          }),\n        })\n      }\n      return acc\n    }, {})\n\n    return (\n      <ActionMenuProvider size={size} onMenuToggle={toggleMenu}>\n        <div\n          id={instanceId}\n          className={clsx(styles.ActionMenu, disabled && styles['ActionMenu--disabled'])}\n          data-testid={testId || testIds.root}\n        >\n          {SelectButton}\n          {showMenu ? SelectOverlay : null}\n        </div>\n      </ActionMenuProvider>\n    )\n  },\n)\n\ntype ActionMenuButtonProps = PropsWithChildren<\n  BaseProps<HTMLButtonElement> & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'onClick'>\n> & {\n  as?: ButtonProps<'a'>['as']\n  href?: ButtonProps<'a'>['href']\n  menuOpen?: boolean\n  'data-testid'?: string\n  size?: ActionMenuSizes\n  _mode?: ActionMenuButtonModes\n  variant?: ButtonProps<'a'>['variant']\n  leadingVisual?: ButtonProps<'a'>['leadingVisual']\n}\n\nconst ActionMenuButton = forwardRef<HTMLButtonElement, ActionMenuButtonProps>(\n  (\n    {\n      as,\n      href,\n      id,\n      children,\n      className,\n      'data-testid': testId,\n      disabled,\n      menuOpen,\n      size,\n      _mode = 'default',\n      onClick,\n      leadingVisual,\n      variant,\n      ...props\n    },\n    ref,\n  ) => {\n    const {onMenuToggle} = useActionMenuContext()\n    const handleClick = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(event)\n\n        if (!event.defaultPrevented) {\n          onMenuToggle?.()\n        }\n      },\n      [onClick, onMenuToggle],\n    )\n\n    if (_mode === 'split-button') {\n      const splitButtonVariant = variant ?? 'primary'\n\n      return (\n        <div className={clsx(styles.ActionMenu__button, styles[`ActionMenu__button--${size}`], className)}>\n          <Button\n            as={as}\n            href={href}\n            className={clsx(\n              styles['ActionMenu__innerButton--split-button'],\n              styles[`ActionMenu__innerButton--${splitButtonVariant}`],\n              styles[`ActionMenu__innerButton--${size}`],\n              disabled && styles['ActionMenu__innerButton--disabled'],\n            )}\n            variant={splitButtonVariant}\n            aria-disabled={disabled}\n            data-testid={testId || testIds.button}\n            size={size}\n            leadingVisual={leadingVisual}\n            onClick={onClick}\n            {...props}\n          >\n            <span className={styles['ActionMenu__button-text']}>{children}</span>\n          </Button>\n          <Button\n            ref={ref}\n            id={id}\n            as=\"button\"\n            className={styles['ActionMenu__innerButton--split-button']}\n            variant={splitButtonVariant}\n            aria-haspopup=\"true\"\n            aria-label=\"Menu\"\n            size={size}\n            aria-expanded={menuOpen ? 'true' : 'false'}\n            onClick={onMenuToggle}\n            disabled={disabled}\n          >\n            <ChevronDownIcon className={styles['ActionMenu__inner-button-dropdown-icon']} />\n          </Button>\n        </div>\n      )\n    }\n\n    return (\n      <Button\n        ref={ref}\n        id={id}\n        className={clsx(styles.ActionMenu__button, styles[`ActionMenu__button--${size}`], className)}\n        aria-haspopup=\"true\"\n        aria-expanded={menuOpen ? 'true' : 'false'}\n        disabled={disabled}\n        data-testid={testId || testIds.button}\n        size={size}\n        variant={variant}\n        leadingVisual={leadingVisual}\n        trailingVisual={<ChevronDownIcon />}\n        onClick={handleClick}\n        {...props}\n      >\n        <span className={styles['ActionMenu__button-text']}>{children}</span>\n      </Button>\n    )\n  },\n)\n\ntype ActionMenuItemBaseProps = {\n  handler?: (newValue: string) => void\n  type?: 'none' | 'single' | 'link'\n  disabled?: boolean\n  size?: ActionMenuSizes\n  leadingVisual?: React.ReactElement | React.ReactNode | Icon\n} & PropsWithChildren<React.HTMLProps<HTMLLIElement>>\n\ntype ActionMenuItemAnchorProps = ActionMenuItemBaseProps & {\n  as: 'a'\n} & Omit<React.HTMLProps<HTMLAnchorElement>, keyof ActionMenuItemBaseProps | 'as'>\n\n// Type for when 'as' is not set or is anything other than 'a'\ntype ActionMenuItemDefaultProps = ActionMenuItemBaseProps & {\n  as?: string\n  value?: string\n  selected?: boolean\n} & Omit<React.HTMLProps<HTMLLIElement>, keyof ActionMenuItemBaseProps | 'as'>\n\nconst roleTypeMap = {\n  none: 'menuitem',\n  single: 'menuitemradio',\n  link: 'menuitem',\n}\n\nconst ActionMenuItem = ({\n  as,\n  children,\n  className,\n  disabled,\n  handler,\n  selected,\n  type,\n  value,\n  onClick,\n  onKeyDown,\n  leadingVisual: LeadingVisual,\n  ...props\n}: ActionMenuItemAnchorProps | ActionMenuItemDefaultProps) => {\n  const {size} = useActionMenuContext()\n\n  const handleClick = useCallback(\n    (e: React.MouseEvent<HTMLLIElement>) => {\n      onClick?.(e)\n\n      if (!disabled) {\n        handler?.(String(value))\n      }\n    },\n    [handler, value, disabled, onClick],\n  )\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLLIElement>) => {\n      onKeyDown?.(e)\n\n      if (!disabled && e.key === 'Enter') {\n        handler?.(String(value))\n      }\n    },\n    [handler, value, disabled, onKeyDown],\n  )\n\n  const liProps = useMemo<React.HTMLProps<HTMLLIElement> & {'data-value': unknown}>(\n    () => ({\n      className: clsx(\n        styles.ActionMenu__item,\n        type === 'single' && styles[`ActionMenu__item--selection-type-${type}`],\n        size && styles[`ActionMenu__item--${size}`],\n        className,\n      ),\n      role: roleTypeMap[type || 'single'],\n      'aria-disabled': disabled,\n      tabIndex: -1,\n      'data-value': value,\n      ...props,\n    }),\n    [props, type, size, className, disabled, value],\n  )\n\n  const contents = useMemo(\n    () => (\n      <>\n        {React.isValidElement<{width?: number; height?: number}>(LeadingVisual)\n          ? React.cloneElement(LeadingVisual, {\n              width: LeadingVisual.props.width || 20,\n              height: LeadingVisual.props.width || 20,\n            })\n          : null}\n        {type === 'single' && (\n          <span className={styles['ActionMenu__item-leadingVisual']}>\n            {selected && (\n              <CheckIcon\n                className={clsx(styles['ActionMenu__item-icon'], disabled && styles['ActionMenu__item-icon--disabled'])}\n                size={16}\n              />\n            )}\n          </span>\n        )}\n\n        <span className={styles['ActionMenu__item-text']}>\n          <Text\n            variant={disabled ? 'muted' : 'default'}\n            size={size === 'medium' ? '200' : '100'}\n            className={clsx(disabled && styles['ActionMenu__item-content--disabled'])}\n          >\n            {children}\n          </Text>\n        </span>\n      </>\n    ),\n    [LeadingVisual, children, selected, disabled, size, type],\n  )\n\n  if (as === 'a') {\n    return (\n      <li\n        // This role will be overridden by the role prop in `liProps`. It's just here to keep the linter happy\n        role=\"menuitem\"\n        {...liProps}\n        // Intentionally not calling handle[Click/KeyDown] here so as to not call the handler\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n      >\n        <a\n          className={clsx(styles['ActionMenu__item-anchor'], disabled && styles['ActionMenu__item--disabled'])}\n          href={props.href}\n        >\n          {contents}\n        </a>\n      </li>\n    )\n  }\n\n  return (\n    // eslint-disable-next-line jsx-a11y/role-supports-aria-props\n    <li\n      // This role will be overridden by the role prop in `liProps`. It's just here to keep the linter happy\n      role=\"menuitem\"\n      {...liProps}\n      aria-checked={type === 'none' ? undefined : selected ? 'true' : 'false'}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n    >\n      {contents}\n    </li>\n  )\n}\n\ntype ActionMenuOverlayProps = PropsWithChildren<\n  BaseProps<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement>\n> & {\n  'aria-label': string\n  id?: string\n  'data-testid'?: string\n  menuOpen?: boolean\n  style?: React.CSSProperties\n}\n\nconst ActionMenuOverlay = forwardRef<HTMLUListElement, ActionMenuOverlayProps>(\n  ({children, className, 'data-testid': testId, menuOpen, ...rest}, ref) => {\n    const {colorMode: defaultColorMode} = useTheme()\n\n    const colorMode = className?.includes('ActionMenu__menu--split') ? 'light' : defaultColorMode\n\n    return (\n      <ThemeProvider colorMode={colorMode}>\n        <ul ref={ref} className={clsx(className)} role=\"menu\" data-testid={testId || testIds.list} {...rest}>\n          {children}\n        </ul>\n      </ThemeProvider>\n    )\n  },\n)\n\n/**\n * Use ActionMenu to display a list of actions or selections that expand through a trigger button.\n * @see https://primer.style/brand/components/ActionMenu\n */\nexport const ActionMenu = Object.assign(_ActionMenuRoot, {\n  Button: ActionMenuButton,\n  Item: ActionMenuItem,\n  Overlay: ActionMenuOverlay,\n  testIds,\n})\n"],"mappings":"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"}

package/lib/ActionMenu/ActionMenu.d.ts

@@ -59,9 +59,11 @@ export type ActionMenuProps = {
 type ActionMenuContextType = {
     size?: ActionMenuSizes;
     setSize?: React.Dispatch<React.SetStateAction<ActionMenuSizes | undefined>>;
+    onMenuToggle?: () => void;
 };
 export declare const useActionMenuContext: () => ActionMenuContextType;
-export declare const ActionMenuProvider: React.FC<ActionMenuProps>;
+type ActionMenuProviderProps = ActionMenuProps & Pick<ActionMenuContextType, 'onMenuToggle'>;
+export declare const ActionMenuProvider: React.FC<ActionMenuProviderProps>;
 type ActionMenuButtonProps = PropsWithChildren<BaseProps<HTMLButtonElement> & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'onClick'>> & {
     as?: ButtonProps<'a'>['as'];
     href?: ButtonProps<'a'>['href'];