@primer/components 0.0.0-2021113144816 → 0.0.0-2021113174023

package/lib-esm/ActionList/Item.js

@@ -8,10 +8,43 @@ import Truncate from '../Truncate';
 import styled from 'styled-components';
 import { StyledHeader } from './Header';
 import { StyledDivider } from './Divider';
-import { useTheme } from '../ThemeProvider';
+import { useColorSchemeVar, useTheme } from '../ThemeProvider';
 import { activeDescendantActivatedDirectly, activeDescendantActivatedIndirectly, isActiveDescendantAttribute } from '../behaviors/focusZone';
 import { useSSRSafeId } from '@react-aria/ssr';
 
+/**
+ * These colors are not yet in our default theme.  Need to remove this once they are added.
+ */
+const customItemThemes = {
+  default: {
+    hover: {
+      light: 'rgba(46, 77, 108, 0.06)',
+      dark: 'rgba(201, 206, 212, 0.12)',
+      dark_dimmed: 'rgba(201, 206, 212, 0.12)'
+    },
+    focus: {
+      light: 'rgba(54, 77, 100, 0.16)',
+      dark: 'rgba(201, 206, 212, 0.24)',
+      dark_dimmed: 'rgba(201, 206, 212, 0.24)'
+    }
+  },
+  danger: {
+    hover: {
+      light: 'rgba(234, 74, 90, 0.08)',
+      dark: 'rgba(248, 81, 73, 0.16)',
+      dark_dimmed: 'rgba(248, 81, 73, 0.16)'
+    },
+    focus: {
+      light: 'rgba(234, 74, 90, 0.14)',
+      dark: 'rgba(248, 81, 73, 0.24)',
+      dark_dimmed: 'rgba(248, 81, 73, 0.24)'
+    }
+  }
+};
+/**
+ * Contract for props passed to the `Item` component.
+ */
+
 const getItemVariant = (variant = 'default', disabled) => {
   if (disabled) {
     return {
@@ -28,10 +61,7 @@ const getItemVariant = (variant = 'default', disabled) => {
         color: get('colors.danger.fg'),
         iconColor: get('colors.danger.fg'),
         annotationColor: get('colors.fg.muted'),
-        hoverCursor: 'pointer',
-        hoverBg: get('colors.actionListItem.danger.hoverBg'),
-        focusBg: get('colors.actionListItem.danger.activeBg'),
-        hoverText: get('colors.actionListItem.danger.hoverText')
+        hoverCursor: 'pointer'
       };
 
     default:
@@ -39,34 +69,28 @@ const getItemVariant = (variant = 'default', disabled) => {
         color: get('colors.fg.default'),
         iconColor: get('colors.fg.muted'),
         annotationColor: get('colors.fg.muted'),
-        hoverCursor: 'pointer',
-        hoverBg: get('colors.actionListItem.default.hoverBg'),
-        focusBg: get('colors.actionListItem.default.activeBg')
+        hoverCursor: 'pointer'
       };
   }
 };
 
 const DividedContent = styled.div.withConfig({
   displayName: "Item__DividedContent",
-  componentId: "sc-jqpvy8-0"
+  componentId: "jqpvy8-0"
 })(["display:flex;min-width:0;position:relative;flex-grow:1;"]);
 const MainContent = styled.div.withConfig({
   displayName: "Item__MainContent",
-  componentId: "sc-jqpvy8-1"
+  componentId: "jqpvy8-1"
 })(["align-items:baseline;display:flex;min-width:0;flex-direction:var(--main-content-flex-direction);flex-grow:1;"]);
 const StyledItem = styled.div.withConfig({
   displayName: "Item__StyledItem",
-  componentId: "sc-jqpvy8-2"
-})(["padding:6px ", ";display:flex;border-radius:", ";color:", ";transition:background 33.333ms linear;text-decoration:none;@media (hover:hover) and (pointer:fine){:hover{background:var( --item-hover-bg-override,", " );color:", ";cursor:", ";}}:not(:first-of-type):not(", " + &):not(", " + &){margin-top:", ";", "::before{content:' ';display:block;position:absolute;width:100%;top:-7px;border:0 solid ", ";border-top-width:", ";}}&:hover ", "::before,:hover + * ", "::before{border-color:var(--item-hover-divider-border-color-override,transparent) !important;}&:focus ", "::before,:focus + * ", "::before,&[", "] ", "::before,[", "] + & ", "::before{border-color:transparent !important;}&[", "='", "']{background:", ";}&[", "='", "']{background:", ";}&:focus{background:", ";outline:none;}&:active{background:", ";}", ""], get('space.2'), get('radii.2'), ({
+  componentId: "jqpvy8-2"
+})(["padding:6px ", ";display:flex;border-radius:", ";color:", ";transition:background 33.333ms linear;text-decoration:none;@media (hover:hover) and (pointer:fine){:hover{background:var(--item-hover-bg-override,", ");cursor:", ";}}:not(:first-of-type):not(", " + &):not(", " + &){margin-top:", ";", "::before{content:' ';display:block;position:absolute;width:100%;top:-7px;border:0 solid ", ";border-top-width:", ";}}&:hover ", "::before,:hover + * ", "::before{border-color:var(--item-hover-divider-border-color-override,transparent) !important;}&:focus ", "::before,:focus + * ", "::before,&[", "] ", "::before,[", "] + & ", "::before{border-color:transparent !important;}&[", "='", "']{background:", ";}&[", "='", "']{background:", ";}&:focus{background:", ";outline:none;}&:active{background:", ";}", ""], get('space.2'), get('radii.2'), ({
   variant,
   item
 }) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).color, ({
-  variant,
-  item
-}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverBg, ({
-  variant,
-  item
-}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverText, ({
+  hoverBackground
+}) => hoverBackground, ({
   variant,
   item
 }) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverCursor, StyledDivider, StyledHeader, ({
@@ -74,52 +98,48 @@ const StyledItem = styled.div.withConfig({
 }) => showDivider ? `1px` : '0', DividedContent, get('colors.border.muted'), ({
   showDivider
 }) => showDivider ? `1px` : '0', DividedContent, DividedContent, DividedContent, DividedContent, isActiveDescendantAttribute, DividedContent, isActiveDescendantAttribute, DividedContent, isActiveDescendantAttribute, activeDescendantActivatedDirectly, ({
-  variant,
-  item
-}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, isActiveDescendantAttribute, activeDescendantActivatedIndirectly, ({
-  variant,
-  item
-}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverBg, ({
-  variant,
-  item
-}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, ({
-  variant,
-  item
-}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, sx);
+  focusBackground
+}) => focusBackground, isActiveDescendantAttribute, activeDescendantActivatedIndirectly, ({
+  hoverBackground
+}) => hoverBackground, ({
+  focusBackground
+}) => focusBackground, ({
+  focusBackground
+}) => focusBackground, sx);
 export const TextContainer = styled.span.withConfig({
   displayName: "Item__TextContainer",
-  componentId: "sc-jqpvy8-3"
+  componentId: "jqpvy8-3"
 })([""]);
 const BaseVisualContainer = styled.div.withConfig({
   displayName: "Item__BaseVisualContainer",
-  componentId: "sc-jqpvy8-4"
-})(["height:20px;width:", ";margin-right:", ";display:flex;justify-content:center;align-items:center;flex-shrink:0;"], get('space.3'), get('space.2'));
+  componentId: "jqpvy8-4"
+})(["height:20px;width:", ";margin-right:", ";display:flex;justify-content:center;align-items:center;"], get('space.3'), get('space.2'));
 const ColoredVisualContainer = styled(BaseVisualContainer).withConfig({
   displayName: "Item__ColoredVisualContainer",
-  componentId: "sc-jqpvy8-5"
+  componentId: "jqpvy8-5"
 })(["svg{fill:", ";font-size:", ";}"], ({
   variant,
   disabled
 }) => getItemVariant(variant, disabled).iconColor, get('fontSizes.0'));
 const LeadingVisualContainer = styled(ColoredVisualContainer).withConfig({
   displayName: "Item__LeadingVisualContainer",
-  componentId: "sc-jqpvy8-6"
-})(["display:flex;flex-direction:column;justify-content:center;"]);
+  componentId: "jqpvy8-6"
+})(["flex-shrink:0;display:flex;flex-direction:column;justify-content:center;"]);
 const TrailingContent = styled(ColoredVisualContainer).withConfig({
   displayName: "Item__TrailingContent",
-  componentId: "sc-jqpvy8-7"
+  componentId: "jqpvy8-7"
 })(["color:", "};margin-left:", ";margin-right:0;width:auto;div:nth-child(2){margin-left:", ";}"], ({
   variant,
   disabled
 }) => getItemVariant(variant, disabled).annotationColor, get('space.2'), get('space.2'));
 const DescriptionContainer = styled.span.withConfig({
   displayName: "Item__DescriptionContainer",
-  componentId: "sc-jqpvy8-8"
+  componentId: "jqpvy8-8"
 })(["color:", ";font-size:", ";line-height:16px;margin-left:var(--description-container-margin-left);min-width:0;flex-grow:1;flex-basis:var(--description-container-flex-basis);"], get('colors.fg.muted'), get('fontSizes.0'));
 const MultiSelectIcon = styled.svg.withConfig({
   displayName: "Item__MultiSelectIcon",
-  componentId: "sc-jqpvy8-9"
-})(["rect{fill:", ";stroke:", ";shape-rendering:auto;}path{fill:", ";boxshadow:", ";opacity:", ";}"], ({
+  componentId: "jqpvy8-9"
+})(["rect{fill:", ";stroke:", ";}path{fill:", ";boxshadow:", ";opacity:", ";}"], ({
   selected
 }) => selected ? get('colors.accent.fg') : get('colors.canvas.default'), ({
   selected
@@ -176,6 +196,9 @@ export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
       onAction === null || onAction === void 0 ? void 0 : onAction(itemProps, event);
     }
   }, [onAction, disabled, itemProps, onClick]);
+  const customItemTheme = customItemThemes[variant];
+  const hoverBackground = useColorSchemeVar(customItemTheme.hover, 'inherit');
+  const focusBackground = useColorSchemeVar(customItemTheme.focus, 'inherit');
   const {
     theme
   } = useTheme();
@@ -191,7 +214,9 @@ export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
   }, props, {
     "data-id": id,
     onKeyPress: keyPressHandler,
-    onClick: clickHandler
+    onClick: clickHandler,
+    hoverBackground: disabled ? 'inherit' : hoverBackground,
+    focusBackground: disabled ? 'inherit' : focusBackground
   }), !!selected === selected && /*#__PURE__*/React.createElement(BaseVisualContainer, null, selectionVariant === 'multiple' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MultiSelectIcon, {
     selected: selected,
     width: "16",

package/lib-esm/ActionList/List.js

@@ -22,7 +22,7 @@ function isGroupedListProps(props) {
 
 const StyledList = styled.div.withConfig({
   displayName: "List__StyledList",
-  componentId: "sc-yr2k7d-0"
+  componentId: "yr2k7d-0"
 })(["font-size:", ";line-height:20px;&[", "],&:focus-within{--item-hover-bg-override:none;--item-hover-divider-border-color-override:", ";}"], get('fontSizes.1'), hasActiveDescendantAttribute, get('colors.border.muted'));
 /**
  * Returns `sx` prop values for `List` children matching the given `List` style variation.

package/lib-esm/ActionList2/Divider.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
-import { SxProp } from '../sx';
+/// <reference types="react" />
 /**
  * Visually separates `Item`s or `Group`s in an `ActionList`.
  */
-export declare const Divider: React.FC<SxProp>;
+export declare function Divider(): JSX.Element;

package/lib-esm/ActionList2/Divider.js

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

package/lib-esm/ActionList2/Group.d.ts

@@ -1,37 +1,11 @@
 import React from 'react';
 import { SxProp } from '../sx';
+import { HeaderProps } from './Header';
 import { ListProps } from './List';
-import { AriaRole } from '../utils/types';
-export declare type GroupProps = {
-    /**
-     * Style variations. Usage is discretionary.
-     *
-     * - `"filled"` - Superimposed on a background, offset from nearby content
-     * - `"subtle"` - Relatively less offset from nearby content
-     */
-    variant?: 'subtle' | 'filled';
-    /**
-     * Primary text which names a `Group`.
-     */
-    title?: string;
-    /**
-     * Secondary text which provides additional information about a `Group`.
-     */
-    auxiliaryText?: string;
-    /**
-     * The ARIA role describing the function of the list inside `Group` component. `listbox` or `menu` are a common values.
-     */
-    role?: AriaRole;
-} & SxProp & {
-    /**
-     * Whether multiple Items or a single Item can be selected in the Group. Overrides value on ActionList root.
-     */
+export declare type GroupProps = HeaderProps & SxProp & {
     selectionVariant?: ListProps['selectionVariant'] | false;
 };
 declare type ContextProps = Pick<GroupProps, 'selectionVariant'>;
 export declare const GroupContext: React.Context<ContextProps>;
 export declare const Group: React.FC<GroupProps>;
-export declare type HeaderProps = Pick<GroupProps, 'variant' | 'title' | 'auxiliaryText'> & {
-    labelId: string;
-};
 export {};

package/lib-esm/ActionList2/Group.js

@@ -1,20 +1,17 @@
 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 { useSSRSafeId } from '@react-aria/ssr';
 import Box from '../Box';
-import { ListContext } from './List';
+import { Header } from './Header';
 export const GroupContext = /*#__PURE__*/React.createContext({});
 export const Group = ({
   title,
-  variant = 'subtle',
+  variant,
   auxiliaryText,
   selectionVariant,
-  role,
   sx = {},
   ...props
 }) => {
-  const labelId = useSSRSafeId();
   return /*#__PURE__*/React.createElement(Box, _extends({
     as: "li",
     sx: {
@@ -28,8 +25,7 @@ export const Group = ({
   }, props), title && /*#__PURE__*/React.createElement(Header, {
     title: title,
     variant: variant,
-    auxiliaryText: auxiliaryText,
-    labelId: labelId
+    auxiliaryText: auxiliaryText
   }), /*#__PURE__*/React.createElement(GroupContext.Provider, {
     value: {
       selectionVariant
@@ -38,50 +34,7 @@ export const Group = ({
     as: "ul",
     sx: {
       paddingInlineStart: 0
-    },
-    "aria-labelledby": title ? labelId : undefined,
-    role: role
+    }
   }, props.children)));
 };
-Group.displayName = "Group";
-
-/**
- * Displays the name and description of a `Group`.
- *
- * For visual presentation only. It's hidden from screen readers.
- */
-const Header = ({
-  variant,
-  title,
-  auxiliaryText,
-  labelId,
-  ...props
-}) => {
-  const {
-    variant: listVariant
-  } = React.useContext(ListContext);
-  const styles = {
-    paddingY: '6px',
-    paddingX: listVariant === 'full' ? 2 : 3,
-    fontSize: 0,
-    fontWeight: 'bold',
-    color: 'fg.muted',
-    ...(variant === 'filled' && {
-      backgroundColor: 'canvas.subtle',
-      marginX: 0,
-      marginBottom: 2,
-      borderTop: '1px solid',
-      borderBottom: '1px solid',
-      borderColor: 'neutral.muted'
-    })
-  };
-  return /*#__PURE__*/React.createElement(Box, _extends({
-    sx: styles,
-    role: "presentation",
-    "aria-hidden": "true"
-  }, props), /*#__PURE__*/React.createElement("span", {
-    id: labelId
-  }, title), auxiliaryText && /*#__PURE__*/React.createElement("span", null, auxiliaryText));
-};
-
-Header.displayName = "Header";
+Group.displayName = "Group";

package/lib-esm/ActionList2/Header.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { SxProp } from '../sx';
+/**
+ * Contract for props passed to the `Header` component.
+ */
+export declare type HeaderProps = {
+    /**
+     * Style variations. Usage is discretionary.
+     *
+     * - `"filled"` - Superimposed on a background, offset from nearby content
+     * - `"subtle"` - Relatively less offset from nearby content
+     */
+    variant?: 'subtle' | 'filled';
+    /**
+     * Primary text which names a `Group`.
+     */
+    title?: string;
+    /**
+     * Secondary text which provides additional information about a `Group`.
+     */
+    auxiliaryText?: string;
+} & SxProp;
+/**
+ * Displays the name and description of a `Group`.
+ */
+export declare const Header: ({ variant, title, auxiliaryText, sx, ...props }: HeaderProps) => JSX.Element;

package/lib-esm/ActionList2/Header.js

@@ -0,0 +1,44 @@
+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 Box from '../Box';
+import { ListContext } from './List';
+/**
+ * Contract for props passed to the `Header` component.
+ */
+
+/**
+ * Displays the name and description of a `Group`.
+ */
+export const Header = ({
+  variant = 'subtle',
+  title,
+  auxiliaryText,
+  sx = {},
+  ...props
+}) => {
+  const {
+    variant: listVariant
+  } = React.useContext(ListContext);
+  const styles = {
+    paddingY: '6px',
+    paddingX: listVariant === 'full' ? 2 : 3,
+    fontSize: 0,
+    fontWeight: 'bold',
+    color: 'fg.muted',
+    ...(variant === 'filled' && {
+      backgroundColor: 'canvas.subtle',
+      marginX: 0,
+      marginBottom: 2,
+      borderTop: '1px solid',
+      borderBottom: '1px solid',
+      borderColor: 'neutral.muted'
+    }),
+    ...sx
+  };
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    sx: styles,
+    role: "heading"
+  }, props), title, auxiliaryText && /*#__PURE__*/React.createElement("span", null, auxiliaryText));
+};
+Header.displayName = "Header";

package/lib-esm/ActionList2/Item.js

@@ -8,7 +8,6 @@ import Box from '../Box';
 import sx, { merge } from '../sx';
 import createSlots from '../utils/create-slots';
 import { ListContext } from './List';
-import { MenuContext } from './MenuContext';
 import { Selection } from './Selection';
 export const getVariantStyles = (variant, disabled) => {
   if (disabled) {
@@ -44,7 +43,7 @@ const {
 export { Slot };
 const LiBox = styled.li.withConfig({
   displayName: "Item__LiBox",
-  componentId: "sc-c3scat-0"
+  componentId: "c3scat-0"
 })(sx);
 export const TEXT_ROW_HEIGHT = '20px'; // custom value off the scale
 
@@ -52,10 +51,9 @@ export const Item = /*#__PURE__*/React.forwardRef(({
   variant = 'default',
   disabled = false,
   selected = undefined,
-  onSelect,
+  onSelect = () => null,
   sx: sxProp = {},
   id,
-  role,
   _PrivateItemWrapper,
   ...props
 }, forwardedRef) => {
@@ -63,10 +61,6 @@ export const Item = /*#__PURE__*/React.forwardRef(({
     variant: listVariant,
     showDividers
   } = React.useContext(ListContext);
-  const {
-    itemRole,
-    afterSelect
-  } = React.useContext(MenuContext);
   const {
     theme
   } = useTheme();
@@ -139,25 +133,16 @@ export const Item = /*#__PURE__*/React.forwardRef(({
     }
   };
   const clickHandler = React.useCallback(event => {
-    if (typeof onSelect !== 'function') return;
     if (disabled) return;
-
-    if (!event.defaultPrevented) {
-      onSelect(event); // if this Item is inside a Menu, close the Menu
-
-      if (typeof afterSelect === 'function') afterSelect();
-    }
-  }, [onSelect, disabled, afterSelect]);
+    if (!event.defaultPrevented) onSelect(event);
+  }, [onSelect, disabled]);
   const keyPressHandler = React.useCallback(event => {
-    if (typeof onSelect !== 'function') return;
     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(event);
     }
-  }, [onSelect, disabled, afterSelect]); // use props.id if provided, otherwise generate one.
+  }, [onSelect, disabled]); // use props.id if provided, otherwise generate one.
 
   const labelId = useSSRSafeId(id);
   const inlineDescriptionId = useSSRSafeId(id && `${id}--inline-description`);
@@ -179,8 +164,7 @@ export const Item = /*#__PURE__*/React.forwardRef(({
     "aria-disabled": disabled ? true : undefined,
     tabIndex: disabled || _PrivateItemWrapper ? undefined : 0,
     "aria-labelledby": `${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`,
-    "aria-describedby": slots.BlockDescription ? blockDescriptionId : undefined,
-    role: role || itemRole
+    "aria-describedby": slots.BlockDescription ? blockDescriptionId : undefined
   }, props), /*#__PURE__*/React.createElement(ItemWrapper, null, /*#__PURE__*/React.createElement(Selection, {
     selected: selected
   }), slots.LeadingVisual, /*#__PURE__*/React.createElement(Box, {

package/lib-esm/ActionList2/List.d.ts

@@ -20,7 +20,7 @@ export declare type ListProps = {
      */
     role?: AriaRole;
 } & SxProp;
-declare type ContextProps = Pick<ListProps, 'variant' | 'selectionVariant' | 'showDividers'>;
+declare type ContextProps = Omit<ListProps, 'sx'>;
 export declare const ListContext: React.Context<ContextProps>;
 export declare const List: PolymorphicForwardRefComponent<"ul", ListProps>;
 export {};

package/lib-esm/ActionList2/List.js

@@ -3,17 +3,15 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React from 'react';
 import styled from 'styled-components';
 import sx, { merge } from '../sx';
-import { MenuContext } from './MenuContext';
 export const ListContext = /*#__PURE__*/React.createContext({});
 const ListBox = styled.ul.withConfig({
   displayName: "List__ListBox",
-  componentId: "sc-cvbq60-0"
+  componentId: "cvbq60-0"
 })(sx);
 export const List = /*#__PURE__*/React.forwardRef(({
   variant = 'inset',
   selectionVariant,
   showDividers = false,
-  role,
   sx: sxProp = {},
   ...props
 }, forwardedRef) => {
@@ -23,14 +21,9 @@ export const List = /*#__PURE__*/React.forwardRef(({
     // reset ul styles
     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 /*#__PURE__*/React.createElement(ListBox, _extends({
     sx: merge(styles, sxProp),
-    role: role || listRole
+    "aria-multiselectable": selectionVariant === 'multiple' ? true : undefined
   }, props, {
     ref: forwardedRef
   }), /*#__PURE__*/React.createElement(ListContext.Provider, {

package/lib-esm/ActionList2/Selection.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { CheckIcon } from '@primer/octicons-react';
 import { ListContext } from './List';
 import { GroupContext } from './Group';
-import { MenuContext } from './MenuContext';
 import { LeadingVisualContainer } from './Visuals';
 export const Selection = ({
   selected
@@ -13,9 +12,6 @@ export const Selection = ({
   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; // if selectionVariant is not set on List, don't show selection
@@ -26,11 +22,6 @@ export const Selection = ({
     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 /*#__PURE__*/React.createElement(LeadingVisualContainer, null, selected && /*#__PURE__*/React.createElement(CheckIcon, null));
   }
@@ -46,9 +37,7 @@ export const Selection = ({
     sx: {
       rect: {
         fill: selected ? 'accent.fg' : 'canvas.default',
-        stroke: selected ? 'accent.fg' : 'border.default',
-        shapeRendering: 'auto' // this is a workaround to override global style in github/github, see primer/react#1666
-
+        stroke: selected ? 'accent.fg' : 'border.default'
       },
       path: {
         fill: 'fg.onEmphasis',

package/lib-esm/ActionList2/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { Divider } from './Divider';
 export type { ListProps as ActionListProps } from './List';
 export type { GroupProps } from './Group';
 export type { ItemProps } from './Item';
@@ -25,7 +26,7 @@ export declare const ActionList: import("@radix-ui/react-polymorphic").ForwardRe
         referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     }>;
     /** Visually separates `Item`s or `Group`s in an `ActionList`. */
-    Divider: import("react").FC<import("../sx").SxProp>;
+    Divider: typeof Divider;
     /** Secondary text which provides additional information about an `Item`. */
     Description: import("react").FC<import("./Description").DescriptionProps>;
     /** Icon (or similar) positioned before `Item` text. */