@primer/components 32.1.1-rc.b4502a34 → 33.0.0-rc.9f3670b7

package/lib-esm/stories/ActionMenu2.stories.js

@@ -0,0 +1,376 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import { ThemeProvider } from '..';
+import BaseStyles from '../BaseStyles';
+import { ActionMenu } from '../ActionMenu2';
+import { ActionList } from '../ActionList2';
+import Button, { ButtonInvisible } from '../Button';
+import Box from '../Box';
+import Text from '../Text';
+import TextInput from '../TextInput';
+import StyledOcticon from '../StyledOcticon';
+import FormGroup from '../FormGroup';
+import { ServerIcon, PlusCircleIcon, TriangleDownIcon, KebabHorizontalIcon, PencilIcon, ArchiveIcon, TrashIcon, ProjectIcon, ListUnorderedIcon, ArrowDownIcon, SearchIcon, VersionsIcon, TableIcon } from '@primer/octicons-react';
+const meta = {
+  title: 'Composite components/ActionMenu2',
+  component: ActionMenu,
+  decorators: [Story => /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null)))],
+  parameters: {
+    controls: {
+      disabled: true
+    }
+  }
+};
+export default meta;
+export function SimpleListStory() {
+  const [actionFired, fireAction] = React.useState('');
+
+  const onSelect = name => fireAction(name);
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Simple Menu"), /*#__PURE__*/React.createElement("h2", null, "Last option activated: ", actionFired), /*#__PURE__*/React.createElement(ActionMenu, null, /*#__PURE__*/React.createElement(ActionMenu.Button, null, "Menu"), /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionList.Item, {
+    onSelect: () => onSelect('Copy link')
+  }, "Copy link", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318C")), /*#__PURE__*/React.createElement(ActionList.Item, {
+    onSelect: () => onSelect('Quote reply')
+  }, "Quote reply", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318Q")), /*#__PURE__*/React.createElement(ActionList.Item, {
+    onSelect: () => onSelect('Edit comment')
+  }, "Edit comment", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318E")), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Item, {
+    variant: "danger",
+    onSelect: () => onSelect('Delete file')
+  }, "Delete file", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318D")))));
+}
+SimpleListStory.storyName = 'Simple Menu';
+export function ActionsStory() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Actions"), /*#__PURE__*/React.createElement(ActionMenu, {
+    overlayProps: {
+      width: 'medium'
+    }
+  }, /*#__PURE__*/React.createElement(ActionMenu.Button, {
+    "aria-label": "Open Actions Menu"
+  }, /*#__PURE__*/React.createElement(ServerIcon, null)), /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(ServerIcon, null)), "Open current Codespace", /*#__PURE__*/React.createElement(ActionList.Description, {
+    variant: "block"
+  }, "Your existing Codespace will be opened to its previous state, and you'll be asked to manually switch to new-branch."), /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318O")), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(PlusCircleIcon, null)), "Create new Codespace", /*#__PURE__*/React.createElement(ActionList.Description, {
+    variant: "block"
+  }, "Create a brand new Codespace with a fresh image and checkout this branch."), /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318C")))));
+}
+ActionsStory.storyName = 'Actions';
+export function ExternalAnchor() {
+  const [actionFired, fireAction] = React.useState('');
+
+  const onSelect = name => fireAction(name);
+
+  const [open, setOpen] = React.useState(false);
+  const triggerRef = /*#__PURE__*/React.createRef();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "External Anchor"), /*#__PURE__*/React.createElement("h2", null, "External Open State: ", open ? 'Open' : 'Closed'), /*#__PURE__*/React.createElement("h2", null, "Last option activated: ", actionFired), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    ref: triggerRef,
+    onClick: () => setOpen(!open)
+  }, open ? 'Close Menu' : 'Open Menu')), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(ActionMenu, {
+    open: open,
+    onOpenChange: setOpen,
+    anchorRef: triggerRef
+  }, /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionList.Item, {
+    onSelect: () => onSelect('Copy link')
+  }, "Copy link", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318C")), /*#__PURE__*/React.createElement(ActionList.Item, {
+    onSelect: () => onSelect('Quote reply')
+  }, "Quote reply", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318Q")), /*#__PURE__*/React.createElement(ActionList.Item, {
+    onSelect: () => onSelect('Edit comment')
+  }, "Edit comment", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318E")), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Item, {
+    variant: "danger",
+    onSelect: () => onSelect('Delete file')
+  }, "Delete file", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318D")))));
+}
+ExternalAnchor.storyName = 'External Anchor';
+export function ControlledMenu() {
+  const [actionFired, fireAction] = React.useState('');
+
+  const onSelect = name => fireAction(name);
+
+  const [open, setOpen] = React.useState(false);
+  const triggerRef = /*#__PURE__*/React.createRef();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Controlled Menu"), /*#__PURE__*/React.createElement("h2", null, "External Open State: ", open ? 'Open' : 'Closed'), /*#__PURE__*/React.createElement("h2", null, "Last option activated: ", actionFired), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    ref: triggerRef,
+    onClick: () => setOpen(!open)
+  }, open ? 'Close Menu' : 'Open Menu')), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(ActionMenu, {
+    open: open,
+    onOpenChange: setOpen,
+    overlayProps: {
+      // Because the component is controlled from outside, but the anchor is still internal,
+      // clicking the external button should not be counted as "clicking outside"
+      ignoreClickRefs: [triggerRef]
+    }
+  }, /*#__PURE__*/React.createElement(ActionMenu.Button, null, "Anchor"), /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionList.Item, {
+    onSelect: () => onSelect('Copy link')
+  }, "Copy link", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318C")), /*#__PURE__*/React.createElement(ActionList.Item, {
+    onSelect: () => onSelect('Quote reply')
+  }, "Quote reply", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318Q")), /*#__PURE__*/React.createElement(ActionList.Item, {
+    onSelect: () => onSelect('Edit comment')
+  }, "Edit comment", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318E")), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Item, {
+    variant: "danger",
+    onSelect: () => onSelect('Delete file')
+  }, "Delete file", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318D")))));
+}
+ControlledMenu.storyName = 'Controlled Menu';
+export function CustomAnchor() {
+  const [actionFired, fireAction] = React.useState('');
+
+  const onSelect = name => fireAction(name);
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Custom Anchor"), /*#__PURE__*/React.createElement("h2", null, "Last option activated: ", actionFired), /*#__PURE__*/React.createElement(ActionMenu, null, /*#__PURE__*/React.createElement(ActionMenu.Anchor, null, /*#__PURE__*/React.createElement("summary", {
+    style: {
+      cursor: 'pointer'
+    },
+    "aria-label": "Open column options"
+  }, /*#__PURE__*/React.createElement(KebabHorizontalIcon, null))), /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionList.Item, {
+    onSelect: () => onSelect('Rename')
+  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(PencilIcon, null)), "Rename"), /*#__PURE__*/React.createElement(ActionList.Item, {
+    onSelect: () => onSelect('Archive')
+  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(ArchiveIcon, null)), "Archive all cards"), /*#__PURE__*/React.createElement(ActionList.Item, {
+    variant: "danger",
+    onSelect: () => onSelect('Delete file')
+  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(TrashIcon, null)), "Delete"))));
+}
+CustomAnchor.storyName = 'Custom Anchor';
+export function MemexTableMenu() {
+  const [name, setName] = React.useState('Estimate');
+  const inputRef = /*#__PURE__*/React.createRef();
+  /** To add custom components to the Menu,
+   *  you need to switch to a controlled menu
+   */
+
+  const [open, setOpen] = React.useState(false);
+
+  const handleKeyPress = event => {
+    if (event.key === 'Enter') {
+      setName(event.currentTarget.value);
+      setOpen(false);
+    }
+  };
+  /** This requires inside knowledge. If you to do this with onBlur
+   *  on the input, it doesn't work :(
+   */
+
+
+  const handleClickOutside = () => {
+    if (inputRef.current) setName(inputRef.current.value);
+    setOpen(false);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Memex Table Menu"), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      width: 200,
+      display: 'flex',
+      justifyContent: 'space-between',
+      p: 2,
+      border: '1px solid',
+      borderColor: 'border.default'
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      fontSize: 0,
+      fontWeight: 'bold'
+    }
+  }, name), /*#__PURE__*/React.createElement(ActionMenu, {
+    open: open,
+    onOpenChange: setOpen,
+    overlayProps: {
+      onClickOutside: handleClickOutside
+    }
+  }, /*#__PURE__*/React.createElement(ActionMenu.Button, {
+    "aria-label": "Open Estimate column options menu",
+    sx: {
+      p: 0,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(TriangleDownIcon, null)), /*#__PURE__*/React.createElement(TextInput, {
+    ref: inputRef,
+    sx: {
+      m: 2
+    },
+    defaultValue: name,
+    onKeyPress: handleKeyPress
+  }), /*#__PURE__*/React.createElement(ActionMenu.Divider, {
+    sx: {
+      m: 0
+    }
+  }), /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionList.Item, null, "Sort ascending (123...)"), /*#__PURE__*/React.createElement(ActionList.Item, null, "Sort descending (123...)"), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Item, null, "Filter by values"), /*#__PURE__*/React.createElement(ActionList.Item, null, "Group by values"), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Item, {
+    disabled: true
+  }, "Hide field"), /*#__PURE__*/React.createElement(ActionList.Item, {
+    variant: "danger"
+  }, "Delete file")))));
+}
+MemexTableMenu.storyName = 'Memex Table Menu';
+/* copied from github/memex */
+
+const LayoutToggleItem = ({
+  selected,
+  children,
+  Icon,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(FormGroup, {
+    sx: {
+      flex: 'auto',
+      borderRadius: 2,
+      border: '1px solid',
+      borderColor: selected ? 'accent.emphasis' : 'border.default',
+      textAlign: 'center',
+      cursor: 'pointer',
+      backgroundColor: selected ? 'accent.subtle' : '',
+      boxShadow: selected ? theme => `inset 0 0 0 1px ${theme.colors.accent.emphasis}` : '',
+      mb: 2,
+      mt: 1,
+      '&:hover': {
+        backgroundColor: !selected ? 'canvas.subtle' : ''
+      },
+      '&:first-of-type': {
+        borderTopRightRadius: '0px',
+        borderBottomRightRadius: '0px',
+        borderRight: selected ? undefined : '0'
+      },
+      '&:last-of-type': {
+        borderTopLeftRadius: '0px',
+        borderBottomLeftRadius: '0px',
+        borderLeft: selected ? undefined : '0'
+      }
+    }
+  }, /*#__PURE__*/React.createElement(FormGroup.Label, _extends({
+    htmlFor: "layout-selector",
+    sx: {
+      fontWeight: 'normal',
+      cursor: 'pointer',
+      px: 3,
+      py: 2,
+      mb: 0
+    }
+  }, props), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      textAlign: 'center',
+      flexDirection: 'column',
+      m: 'auto',
+      alignItems: 'center',
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    size: "medium"
+  }), /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      color: selected ? 'fg.default' : 'fg.muted',
+      fontSize: 0
+    }
+  }, children))));
+};
+
+LayoutToggleItem.displayName = "LayoutToggleItem";
+
+/* copied from github/memex */
+const ViewChangeButtons = ({
+  setOpen
+}) => /*#__PURE__*/React.createElement(Box, {
+  sx: {
+    display: 'flex'
+  }
+}, /*#__PURE__*/React.createElement(ButtonInvisible, {
+  onClick: () => setOpen(false),
+  sx: {
+    flex: 'auto',
+    minWidth: '50%',
+    borderRight: '1px solid',
+    borderColor: 'border.default',
+    borderRadius: 0,
+    mt: -2,
+    mb: -2,
+    py: 3,
+    '&:hover': {
+      bg: 'canvas.inset'
+    }
+  }
+}, "Save changes"), /*#__PURE__*/React.createElement(ButtonInvisible, {
+  onClick: () => setOpen(false),
+  sx: {
+    flex: 'auto',
+    color: 'fg.muted',
+    borderRadius: 0,
+    mt: -2,
+    mb: -2,
+    py: 3,
+    fontWeight: 'normal',
+    '&:hover': {
+      bg: 'canvas.inset'
+    }
+  }
+}, "Discard changes"));
+
+ViewChangeButtons.displayName = "ViewChangeButtons";
+export function MemexViewOptionsMenu() {
+  const [open, setOpen] = React.useState(false);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Memex View Options Menu"), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      fontSize: 1,
+      mr: 3
+    }
+  }, /*#__PURE__*/React.createElement(StyledOcticon, {
+    icon: ProjectIcon,
+    sx: {
+      mr: 2
+    }
+  }), "React"), /*#__PURE__*/React.createElement(ActionMenu, {
+    open: open,
+    onOpenChange: setOpen,
+    overlayProps: {
+      width: 'medium'
+    }
+  }, /*#__PURE__*/React.createElement(ActionMenu.Button, {
+    "aria-label": "Open View options menu",
+    sx: {
+      p: 0,
+      width: 18,
+      height: 18,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(TriangleDownIcon, null)), /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionList.Group, {
+    title: "Layout"
+  }, /*#__PURE__*/React.createElement("li", {
+    style: {
+      listStyle: 'none'
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      mx: 3,
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React.createElement(LayoutToggleItem, {
+    selected: true,
+    Icon: TableIcon
+  }, "Table"), /*#__PURE__*/React.createElement(LayoutToggleItem, {
+    selected: false,
+    Icon: ProjectIcon
+  }, "Board")))), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Group, {
+    title: "Configuration"
+  }, /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(ListUnorderedIcon, null)), "Title, Assignees, Status, Labels, Repositories"), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(ListUnorderedIcon, null)), "group: none"), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(ArrowDownIcon, null)), "sort: manual"), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(SearchIcon, null)), "Search or filter this view")), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(PencilIcon, null)), "Rename view"), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(VersionsIcon, null)), "Save changes to new view"), /*#__PURE__*/React.createElement(ActionList.Item, {
+    disabled: true
+  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(TrashIcon, null)), "Delete view"), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement("li", {
+    style: {
+      listStyle: 'none'
+    }
+  }, /*#__PURE__*/React.createElement(ViewChangeButtons, {
+    setOpen: setOpen
+  }))))));
+}
+MemexViewOptionsMenu.storyName = 'Memex View Options Menu';
+export function UnexpectedSelectionVariant() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Expect error if selectionVariant is passed"), /*#__PURE__*/React.createElement(ActionMenu, null, /*#__PURE__*/React.createElement(ActionMenu.Button, null, "Menu"), /*#__PURE__*/React.createElement(ActionList, {
+    selectionVariant: "multiple"
+  }, /*#__PURE__*/React.createElement(ActionList.Item, null, "Copy link"), /*#__PURE__*/React.createElement(ActionList.Item, null, "Quote reply"), /*#__PURE__*/React.createElement(ActionList.Item, null, "Edit comment"), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Item, {
+    variant: "danger"
+  }, "Delete file"))));
+}
+UnexpectedSelectionVariant.storyName = 'Unexpected selectionVariant';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "32.1.1-rc.b4502a34",
+  "version": "33.0.0-rc.9f3670b7",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",

package/src/ActionList2/Divider.tsx

@@ -2,22 +2,27 @@ import React from 'react'
 import Box from '../Box'
 import {get} from '../constants'
 import {Theme} from '../ThemeProvider'
+import {SxProp, merge} from '../sx'
 
 /**
  * Visually separates `Item`s or `Group`s in an `ActionList`.
  */
-export function Divider(): JSX.Element {
+
+export const Divider: React.FC<SxProp> = ({sx = {}}) => {
   return (
     <Box
       as="li"
       role="separator"
-      sx={{
-        height: 1,
-        backgroundColor: 'actionListItem.inlineDivider',
-        marginTop: (theme: Theme) => `calc(${get('space.2')(theme)} - 1px)`,
-        marginBottom: 2,
-        listStyle: 'none' // hide the ::marker inserted by browser's stylesheet
-      }}
+      sx={merge(
+        {
+          height: 1,
+          backgroundColor: 'actionListItem.inlineDivider',
+          marginTop: (theme: Theme) => `calc(${get('space.2')(theme)} - 1px)`,
+          marginBottom: 2,
+          listStyle: 'none' // hide the ::marker inserted by browser's stylesheet
+        },
+        sx as SxProp
+      )}
       data-component="ActionList.Divider"
     />
   )

package/src/ActionList2/Item.tsx

@@ -8,6 +8,7 @@ import sx, {SxProp, merge} from '../sx'
 import createSlots from '../utils/create-slots'
 import {AriaRole} from '../utils/types'
 import {ListContext} from './List'
+import {MenuContext} from './MenuContext'
 import {Selection} from './Selection'
 
 export const getVariantStyles = (variant: ItemProps['variant'], disabled: ItemProps['disabled']) => {
@@ -94,12 +95,14 @@ export const Item = React.forwardRef<HTMLLIElement, ItemProps>(
       onSelect,
       sx: sxProp = {},
       id,
+      role,
       _PrivateItemWrapper,
       ...props
     },
     forwardedRef
   ): JSX.Element => {
     const {variant: listVariant, showDividers} = React.useContext(ListContext)
+    const {itemRole, afterSelect} = React.useContext(MenuContext)
 
     const {theme} = useTheme()
 
@@ -170,9 +173,13 @@ export const Item = React.forwardRef<HTMLLIElement, ItemProps>(
       event => {
         if (typeof onSelect !== 'function') return
         if (disabled) return
-        if (!event.defaultPrevented) onSelect(event)
+        if (!event.defaultPrevented) {
+          onSelect(event)
+          // if this Item is inside a Menu, close the Menu
+          if (typeof afterSelect === 'function') afterSelect()
+        }
       },
-      [onSelect, disabled]
+      [onSelect, disabled, afterSelect]
     )
 
     const keyPressHandler = React.useCallback(
@@ -181,9 +188,11 @@ export const Item = React.forwardRef<HTMLLIElement, ItemProps>(
         if (disabled) return
         if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
           onSelect(event)
+          // if this Item is inside a Menu, close the Menu
+          if (typeof afterSelect === 'function') afterSelect()
         }
       },
-      [onSelect, disabled]
+      [onSelect, disabled, afterSelect]
     )
 
     // use props.id if provided, otherwise generate one.
@@ -206,6 +215,7 @@ export const Item = React.forwardRef<HTMLLIElement, ItemProps>(
             tabIndex={disabled || _PrivateItemWrapper ? undefined : 0}
             aria-labelledby={`${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`}
             aria-describedby={slots.BlockDescription ? blockDescriptionId : undefined}
+            role={role || itemRole}
             {...props}
           >
             <ItemWrapper>

package/src/ActionList2/List.tsx

@@ -3,6 +3,7 @@ import {ForwardRefComponent as PolymorphicForwardRefComponent} from '@radix-ui/r
 import styled from 'styled-components'
 import sx, {SxProp, merge} from '../sx'
 import {AriaRole} from '../utils/types'
+import {MenuContext} from './MenuContext'
 
 export type ListProps = {
   /**
@@ -30,7 +31,7 @@ const ListBox = styled.ul<SxProp>(sx)
 
 export const List = React.forwardRef<HTMLUListElement, ListProps>(
   (
-    {variant = 'inset', selectionVariant, showDividers = false, sx: sxProp = {}, ...props},
+    {variant = 'inset', selectionVariant, showDividers = false, role, sx: sxProp = {}, ...props},
     forwardedRef
   ): JSX.Element => {
     const styles = {
@@ -39,8 +40,11 @@ export const List = React.forwardRef<HTMLUListElement, ListProps>(
       paddingY: variant === 'inset' ? 2 : 0
     }
 
+    /** if list is inside a Menu, it will get a role from the Menu */
+    const {listRole} = React.useContext(MenuContext)
+
     return (
-      <ListBox sx={merge(styles, sxProp as SxProp)} {...props} ref={forwardedRef}>
+      <ListBox sx={merge(styles, sxProp as SxProp)} role={role || listRole} {...props} ref={forwardedRef}>
         <ListContext.Provider value={{variant, selectionVariant, showDividers}}>{props.children}</ListContext.Provider>
       </ListBox>
     )

package/src/ActionList2/MenuContext.tsx

@@ -0,0 +1,6 @@
+/** This context can be used by components that compose ActionList inside a Menu */
+
+import React from 'react'
+
+type ContextProps = {parent?: string; listRole?: string; itemRole?: string; afterSelect?: () => void}
+export const MenuContext = React.createContext<ContextProps>({})

package/src/ActionList2/Selection.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import {CheckIcon} from '@primer/octicons-react'
 import {ListContext} from './List'
 import {GroupContext} from './Group'
+import {MenuContext} from './MenuContext'
 import {ItemProps} from './Item'
 import {LeadingVisualContainer} from './Visuals'
 
@@ -9,6 +10,7 @@ type SelectionProps = Pick<ItemProps, 'selected'>
 export const Selection: React.FC<SelectionProps> = ({selected}) => {
   const {selectionVariant: listSelectionVariant} = React.useContext(ListContext)
   const {selectionVariant: groupSelectionVariant} = React.useContext(GroupContext)
+  const {parent} = React.useContext(MenuContext)
 
   /** selectionVariant in Group can override the selectionVariant in List root */
   const selectionVariant = typeof groupSelectionVariant !== 'undefined' ? groupSelectionVariant : listSelectionVariant
@@ -23,6 +25,13 @@ export const Selection: React.FC<SelectionProps> = ({selected}) => {
     return null
   }
 
+  if (parent === 'ActionMenu') {
+    throw new Error(
+      'ActionList cannot have a selectionVariant inside ActionMenu, please use DropdownMenu or SelectPanel instead. More information: https://primer.style/design/components/action-list#application'
+    )
+    return null
+  }
+
   if (selectionVariant === 'single') {
     return <LeadingVisualContainer>{selected && <CheckIcon />}</LeadingVisualContainer>
   }

package/src/ActionMenu2.tsx

@@ -0,0 +1,94 @@
+import Button, {ButtonProps} from './Button'
+import React from 'react'
+import {AnchoredOverlay} from './AnchoredOverlay'
+import {useProvidedStateOrCreate} from './hooks/useProvidedStateOrCreate'
+import {OverlayProps} from './Overlay'
+import {useProvidedRefOrCreate} from './hooks'
+import {AnchoredOverlayWrapperAnchorProps} from './AnchoredOverlay/AnchoredOverlay'
+import {Divider} from './ActionList2/Divider'
+import {MenuContext as ActionListMenuContext} from './ActionList2/MenuContext'
+
+type ActionMenuBaseProps = {
+  /**
+   * Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with ActionList`
+   */
+  children: React.ReactElement[] | React.ReactElement
+
+  /**
+   * If defined, will control the open/closed state of the overlay. Must be used in conjuction with `onOpenChange`.
+   */
+  open?: boolean
+
+  /**
+   * If defined, will control the open/closed state of the overlay. Must be used in conjuction with `open`.
+   */
+  onOpenChange?: (s: boolean) => void
+
+  /**
+   * Props to be spread on the internal `Overlay` component.
+   */
+  overlayProps?: Partial<OverlayProps>
+}
+
+export type ActionMenuProps = ActionMenuBaseProps & AnchoredOverlayWrapperAnchorProps
+
+const ActionMenuBase: React.FC<ActionMenuProps> = ({
+  anchorRef: externalAnchorRef,
+  open,
+  onOpenChange,
+  overlayProps,
+  children
+}: ActionMenuProps) => {
+  const [combinedOpenState, setCombinedOpenState] = useProvidedStateOrCreate(open, onOpenChange, false)
+  const anchorRef = useProvidedRefOrCreate(externalAnchorRef)
+  const onOpen = React.useCallback(() => setCombinedOpenState(true), [setCombinedOpenState])
+  const onClose = React.useCallback(() => setCombinedOpenState(false), [setCombinedOpenState])
+
+  let renderAnchor: AnchoredOverlayWrapperAnchorProps['renderAnchor'] = null
+  const contents: React.ReactElement[] = []
+
+  React.Children.map(children, child => {
+    if (child.type === MenuButton || child.type === Anchor) {
+      renderAnchor = anchorProps => React.cloneElement(child, anchorProps)
+    } else {
+      contents.push(child)
+    }
+  })
+
+  return (
+    <AnchoredOverlay
+      renderAnchor={renderAnchor}
+      anchorRef={anchorRef}
+      open={combinedOpenState}
+      onOpen={onOpen}
+      onClose={onClose}
+      overlayProps={overlayProps}
+    >
+      <ActionListMenuContext.Provider
+        value={{parent: 'ActionMenu', listRole: 'menu', itemRole: 'menuitem', afterSelect: onClose}}
+      >
+        {contents}
+      </ActionListMenuContext.Provider>
+    </AnchoredOverlay>
+  )
+}
+
+type AnchorRef = AnchoredOverlayWrapperAnchorProps['anchorRef']
+
+export type MenuAnchorProps = {children: React.ReactElement}
+const Anchor = React.forwardRef<AnchorRef, MenuAnchorProps>(({children, ...anchorProps}, anchorRef) => {
+  return React.cloneElement(children, {...anchorProps, ref: anchorRef})
+})
+
+/** this component is syntactical sugar 🍭 */
+export type MenuButtonProps = ButtonProps
+const MenuButton = React.forwardRef<AnchorRef, ButtonProps>((props, anchorRef) => {
+  return (
+    <Anchor ref={anchorRef}>
+      <Button {...props} />
+    </Anchor>
+  )
+})
+
+ActionMenuBase.displayName = 'ActionMenu'
+export const ActionMenu = Object.assign(ActionMenuBase, {Button: MenuButton, Anchor, Divider})

package/src/Avatar.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
@@ -12,8 +12,7 @@ type StyledAvatarProps = {
   src: string
   /** Provide alt text when the Avatar is used without the user's name next to it. */
   alt?: string
-} & SystemCommonProps &
-  SxProp
+} & SxProp
 
 function getBorderRadius({size, square}: StyledAvatarProps) {
   if (square) {
@@ -32,7 +31,6 @@ const Avatar = styled.img.attrs<StyledAvatarProps>(props => ({
   line-height: ${get('lineHeights.condensedUltra')};
   vertical-align: middle;
   border-radius: ${props => getBorderRadius(props)};
-  ${COMMON};
   ${sx}
 `