@primer/components 0.0.0-202111194229 → 0.0.0-202111215914

package/lib/Autocomplete/Autocomplete.d.ts

@@ -20,17 +20,11 @@ declare const _default: React.FC<{
     } & {
         as?: string | React.ComponentType<any> | undefined;
         forwardedAs?: string | React.ComponentType<any> | undefined;
-    }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "size" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "leadingVisual" | "trailingVisual" | "contrast"> & {
+    }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "contrast"> & {
         className?: string | undefined;
         icon?: React.ComponentType<{
             className?: string | undefined;
         }> | undefined;
-        leadingVisual?: string | React.ComponentType<{
-            className?: string | undefined;
-        }> | undefined;
-        trailingVisual?: string | React.ComponentType<{
-            className?: string | undefined;
-        }> | undefined;
     } & Pick<{
         color?: string | undefined;
         maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -43,7 +37,6 @@ declare const _default: React.FC<{
         slot?: string | undefined;
         style?: React.CSSProperties | undefined;
         title?: string | undefined;
-        size?: "small" | "large" | undefined;
         block?: boolean | undefined;
         variant?: "small" | "large" | undefined;
         role?: React.AriaRole | undefined;
@@ -301,10 +294,9 @@ declare const _default: React.FC<{
         disabled?: boolean | undefined;
         hasIcon?: boolean | undefined;
         contrast?: boolean | undefined;
-        validationStatus?: "error" | "warning" | undefined;
     } & {
         theme?: any;
-    }, "maxWidth" | "minWidth" | "width" | "size" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, {
+    }, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, {
         as?: React.ComponentType<any> | undefined;
     }>;
     Menu: typeof AutocompleteMenu;

package/lib/Autocomplete/AutocompleteInput.d.ts

@@ -12,17 +12,11 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
 } & {
     as?: string | React.ComponentType<any> | undefined;
     forwardedAs?: string | React.ComponentType<any> | undefined;
-}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "size" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "leadingVisual" | "trailingVisual" | "contrast"> & {
+}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "contrast"> & {
     className?: string | undefined;
     icon?: React.ComponentType<{
         className?: string | undefined;
     }> | undefined;
-    leadingVisual?: string | React.ComponentType<{
-        className?: string | undefined;
-    }> | undefined;
-    trailingVisual?: string | React.ComponentType<{
-        className?: string | undefined;
-    }> | undefined;
 } & Pick<{
     color?: string | undefined;
     maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -35,7 +29,6 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
     slot?: string | undefined;
     style?: React.CSSProperties | undefined;
     title?: string | undefined;
-    size?: "small" | "large" | undefined;
     block?: boolean | undefined;
     variant?: "small" | "large" | undefined;
     role?: React.AriaRole | undefined;
@@ -293,9 +286,8 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
     disabled?: boolean | undefined;
     hasIcon?: boolean | undefined;
     contrast?: boolean | undefined;
-    validationStatus?: "error" | "warning" | undefined;
 } & {
     theme?: any;
-}, "maxWidth" | "minWidth" | "width" | "size" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, InternalAutocompleteInputProps>;
+}, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, InternalAutocompleteInputProps>;
 export declare type AutocompleteInputProps = ComponentProps<typeof AutocompleteInput>;
 export default AutocompleteInput;

package/lib/Checkbox.d.ts

@@ -25,5 +25,5 @@ export declare type CheckboxProps = {
 /**
  * An accessible, native checkbox component
  */
-declare const Checkbox: React.ForwardRefExoticComponent<Pick<CheckboxProps, "sx" | keyof React.InputHTMLAttributes<HTMLInputElement> | "validationStatus" | "indeterminate"> & React.RefAttributes<HTMLInputElement>>;
+declare const Checkbox: React.ForwardRefExoticComponent<Pick<CheckboxProps, "sx" | keyof React.InputHTMLAttributes<HTMLInputElement> | "indeterminate" | "validationStatus"> & React.RefAttributes<HTMLInputElement>>;
 export default Checkbox;

package/lib/SelectMenu/SelectMenu.d.ts

@@ -39,17 +39,11 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
     } & {
         as?: string | React.ComponentType<any> | undefined;
         forwardedAs?: string | React.ComponentType<any> | undefined;
-    }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "size" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "leadingVisual" | "trailingVisual" | "contrast"> & {
+    }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "contrast"> & {
         className?: string | undefined;
         icon?: React.ComponentType<{
             className?: string | undefined;
         }> | undefined;
-        leadingVisual?: string | React.ComponentType<{
-            className?: string | undefined;
-        }> | undefined;
-        trailingVisual?: string | React.ComponentType<{
-            className?: string | undefined;
-        }> | undefined;
     } & Pick<{
         color?: string | undefined;
         maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -62,7 +56,6 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
         slot?: string | undefined;
         style?: React.CSSProperties | undefined;
         title?: string | undefined;
-        size?: "small" | "large" | undefined;
         block?: boolean | undefined;
         variant?: "small" | "large" | undefined;
         role?: React.AriaRole | undefined;
@@ -320,10 +313,9 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
         disabled?: boolean | undefined;
         hasIcon?: boolean | undefined;
         contrast?: boolean | undefined;
-        validationStatus?: "error" | "warning" | undefined;
     } & {
         theme?: any;
-    }, "maxWidth" | "minWidth" | "width" | "size" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
+    }, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
     Footer: import("styled-components").StyledComponent<"footer", any, SxProp, never>;
     Item: React.ForwardRefExoticComponent<Pick<{
         as?: React.ElementType<any> | undefined;

package/lib/TextInput.d.ts

@@ -4,17 +4,10 @@ import UnstyledTextInput from './_UnstyledTextInput';
 import TextInputWrapper from './_TextInputWrapper';
 declare type NonPassthroughProps = {
     className?: string;
-    /** @deprecated Use `leadingVisual` or `trailingVisual` prop instead */
     icon?: React.ComponentType<{
         className?: string;
     }>;
-    leadingVisual?: string | React.ComponentType<{
-        className?: string;
-    }>;
-    trailingVisual?: string | React.ComponentType<{
-        className?: string;
-    }>;
-} & Pick<ComponentProps<typeof TextInputWrapper>, 'block' | 'contrast' | 'disabled' | 'sx' | 'width' | 'maxWidth' | 'minWidth' | 'variant' | 'size'>;
+} & Pick<ComponentProps<typeof TextInputWrapper>, 'block' | 'contrast' | 'disabled' | 'sx' | 'theme' | 'width' | 'maxWidth' | 'minWidth' | 'variant'>;
 declare type TextInputInternalProps = Merge<React.ComponentPropsWithoutRef<typeof UnstyledTextInput>, NonPassthroughProps>;
 declare const TextInput: React.ForwardRefExoticComponent<Pick<TextInputInternalProps, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
 export declare type TextInputProps = ComponentProps<typeof TextInput>;

package/lib/TextInput.js

@@ -20,21 +20,16 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 // using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input
 const TextInput = /*#__PURE__*/_react.default.forwardRef(({
   icon: IconComponent,
-  leadingVisual: LeadingVisual,
-  trailingVisual: TrailingVisual,
   block,
   className,
   contrast,
   disabled,
-  validationStatus,
   sx: sxProp,
-  size: sizeProp,
-  // start deprecated props
+  theme,
   width: widthProp,
   minWidth: minWidthProp,
   maxWidth: maxWidthProp,
   variant: variantProp,
-  // end deprecated props
   ...inputProps
 }, ref) => {
   // this class is necessary to style FilterSearch, plz no touchy!
@@ -42,27 +37,21 @@ const TextInput = /*#__PURE__*/_react.default.forwardRef(({
   return /*#__PURE__*/_react.default.createElement(_TextInputWrapper.default, {
     block: block,
     className: wrapperClasses,
-    validationStatus: validationStatus,
     contrast: contrast,
     disabled: disabled,
+    hasIcon: !!IconComponent,
     sx: sxProp,
-    size: sizeProp,
+    theme: theme,
     width: widthProp,
     minWidth: minWidthProp,
     maxWidth: maxWidthProp,
     variant: variantProp
   }, IconComponent && /*#__PURE__*/_react.default.createElement(IconComponent, {
     className: "TextInput-icon"
-  }), LeadingVisual && /*#__PURE__*/_react.default.createElement("span", {
-    "data-component": "leadingVisual"
-  }, typeof LeadingVisual === 'function' ? /*#__PURE__*/_react.default.createElement(LeadingVisual, null) : LeadingVisual), /*#__PURE__*/_react.default.createElement(_UnstyledTextInput.default, _extends({
+  }), /*#__PURE__*/_react.default.createElement(_UnstyledTextInput.default, _extends({
     ref: ref,
     disabled: disabled
-  }, inputProps, {
-    "data-component": "input"
-  })), TrailingVisual && /*#__PURE__*/_react.default.createElement("span", {
-    "data-component": "leadingVisual"
-  }, typeof TrailingVisual === 'function' ? /*#__PURE__*/_react.default.createElement(TrailingVisual, null) : TrailingVisual));
+  }, inputProps)));
 });
 
 TextInput.defaultProps = {

package/lib/TextInputWithTokens.d.ts

@@ -44,17 +44,11 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
 } & {
     as?: string | React.ComponentType<any> | undefined;
     forwardedAs?: string | React.ComponentType<any> | undefined;
-}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "size" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "leadingVisual" | "trailingVisual" | "contrast"> & {
+}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "contrast"> & {
     className?: string | undefined;
     icon?: React.ComponentType<{
         className?: string | undefined;
     }> | undefined;
-    leadingVisual?: string | React.ComponentType<{
-        className?: string | undefined;
-    }> | undefined;
-    trailingVisual?: string | React.ComponentType<{
-        className?: string | undefined;
-    }> | undefined;
 } & Pick<{
     color?: string | undefined;
     maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -67,7 +61,6 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
     slot?: string | undefined;
     style?: React.CSSProperties | undefined;
     title?: string | undefined;
-    size?: "small" | "large" | undefined;
     block?: boolean | undefined;
     variant?: "small" | "large" | undefined;
     role?: React.AriaRole | undefined;
@@ -325,10 +318,9 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
     disabled?: boolean | undefined;
     hasIcon?: boolean | undefined;
     contrast?: boolean | undefined;
-    validationStatus?: "error" | "warning" | undefined;
 } & {
     theme?: any;
-}, "maxWidth" | "minWidth" | "width" | "size" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement> & {
+}, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement> & {
     selectedTokenIndex: number | undefined;
     setSelectedTokenIndex: React.Dispatch<React.SetStateAction<number | undefined>>;
 }, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;

package/lib/_TextInputWrapper.d.ts

@@ -5,9 +5,6 @@ declare const TextInputWrapper: import("styled-components").StyledComponent<"spa
     hasIcon?: boolean | undefined;
     block?: boolean | undefined;
     contrast?: boolean | undefined;
-    validationStatus?: "error" | "warning" | undefined;
-    /** @deprecated Use `size` prop instead */
     variant?: "small" | "large" | undefined;
-    size?: "small" | "large" | undefined;
 } & WidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Width<import("styled-system").TLengthStyledSystem>> & MinWidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.MinWidth<import("styled-system").TLengthStyledSystem>> & MaxWidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>> & SxProp, never>;
 export default TextInputWrapper;

package/lib/_TextInputWrapper.js

@@ -19,24 +19,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const sizeDeprecatedVariants = (0, _styledSystem.variant)({
-  variants: {
-    small: {
-      minHeight: '28px',
-      px: 2,
-      py: '3px',
-      fontSize: 0,
-      lineHeight: '20px'
-    },
-    large: {
-      px: 2,
-      py: '10px',
-      fontSize: 3
-    }
-  }
-});
 const sizeVariants = (0, _styledSystem.variant)({
-  prop: 'size',
   variants: {
     small: {
       minHeight: '28px',
@@ -56,7 +39,13 @@ const sizeVariants = (0, _styledSystem.variant)({
 const TextInputWrapper = _styledComponents.default.span.withConfig({
   displayName: "_TextInputWrapper__TextInputWrapper",
   componentId: "sc-5vfcis-0"
-})(["width:max-content;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-color:", ";background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";cursor:text;padding:6px 12px;display:grid;grid-template-columns:auto 1fr auto;justify-items:end;& >:not(:last-child){margin-right:", ";}[data-component=' leadingVisual ']{align-self:center;color:", ";}[data-component=' trailingVisual ']{align-self:center;color:", ";}.TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.canvas.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('shadows.primer.shadow.inset'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('shadows.primer.shadow.focus'), props => props.contrast && (0, _styledComponents.css)(["background-color:", ";"], (0, _constants.get)('colors.canvas.inset')), props => props.disabled && (0, _styledComponents.css)(["color:", ";background-color:", ";border-color:", ";"], (0, _constants.get)('colors.primer.fg.disabled'), (0, _constants.get)('colors.input.disabledBg'), (0, _constants.get)('colors.border.default')), props => props.validationStatus === 'error' && (0, _styledComponents.css)(["border-color:", ";&:focus-within{border-color:", ";box-shadow:", ";}"], (0, _constants.get)('colors.danger.emphasis'), (0, _constants.get)('colors.danger.emphasis'), (0, _constants.get)('shadows.btn.danger.focusShadow')), props => props.validationStatus === 'warning' && (0, _styledComponents.css)(["border-color:", ";&:focus-within{border-color:", ";box-shadow:0 0 0 3px ", ";}"], (0, _constants.get)('colors.attention.emphasis'), (0, _constants.get)('colors.attention.emphasis'), (0, _constants.get)('colors.attention.muted')), props => props.block && (0, _styledComponents.css)(["width:100%;"]), (0, _constants.get)('breakpoints.1'), (0, _constants.get)('fontSizes.1'), _styledSystem.width, _styledSystem.minWidth, _styledSystem.maxWidth, sizeDeprecatedVariants, sizeVariants, _sx.default);
+})(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";cursor:text;", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('shadows.primer.shadow.inset'), props => {
+  if (props.hasIcon) {
+    return (0, _styledComponents.css)(["padding:0;"]);
+  } else {
+    return (0, _styledComponents.css)(["padding:6px 12px;"]);
+  }
+}, (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('shadows.primer.shadow.focus'), props => props.contrast && (0, _styledComponents.css)(["background-color:", ";"], (0, _constants.get)('colors.canvas.inset')), props => props.disabled && (0, _styledComponents.css)(["color:", ";background-color:", ";border-color:", ";"], (0, _constants.get)('colors.primer.fg.disabled'), (0, _constants.get)('colors.input.disabledBg'), (0, _constants.get)('colors.border.default')), props => props.block && (0, _styledComponents.css)(["display:block;width:100%;"]), props => props.block && props.hasIcon && (0, _styledComponents.css)(["display:flex;"]), (0, _constants.get)('breakpoints.1'), (0, _constants.get)('fontSizes.1'), _styledSystem.width, _styledSystem.minWidth, _styledSystem.maxWidth, sizeVariants, _sx.default);
 
 var _default = TextInputWrapper;
 exports.default = _default;

package/lib/drafts.d.ts

@@ -6,3 +6,4 @@
  */
 export * from './ActionList2';
 export * from './NewButton';
+export * from './ActionMenu2';

package/lib/drafts.js

@@ -28,4 +28,17 @@ Object.keys(_NewButton).forEach(function (key) {
       return _NewButton[key];
     }
   });
+});
+
+var _ActionMenu = require("./ActionMenu2");
+
+Object.keys(_ActionMenu).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ActionMenu[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ActionMenu[key];
+    }
+  });
 });

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

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

package/lib-esm/ActionList2/Divider.js

@@ -1,23 +1,26 @@
 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 function Divider() {
+
+export const Divider = ({
+  sx = {}
+}) => {
   return /*#__PURE__*/React.createElement(Box, {
     as: "li",
     role: "separator",
-    sx: {
+    sx: merge({
       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/Item.js

@@ -8,6 +8,7 @@ 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) {
@@ -54,6 +55,7 @@ export const Item = /*#__PURE__*/React.forwardRef(({
   onSelect,
   sx: sxProp = {},
   id,
+  role,
   _PrivateItemWrapper,
   ...props
 }, forwardedRef) => {
@@ -61,6 +63,10 @@ export const Item = /*#__PURE__*/React.forwardRef(({
     variant: listVariant,
     showDividers
   } = React.useContext(ListContext);
+  const {
+    itemRole,
+    afterSelect
+  } = React.useContext(MenuContext);
   const {
     theme
   } = useTheme();
@@ -135,16 +141,23 @@ export const Item = /*#__PURE__*/React.forwardRef(({
   const clickHandler = React.useCallback(event => {
     if (typeof onSelect !== 'function') return;
     if (disabled) return;
-    if (!event.defaultPrevented) onSelect(event);
-  }, [onSelect, disabled]);
+
+    if (!event.defaultPrevented) {
+      onSelect(event); // if this Item is inside a Menu, close the Menu
+
+      if (typeof afterSelect === 'function') afterSelect();
+    }
+  }, [onSelect, disabled, afterSelect]);
   const keyPressHandler = React.useCallback(event => {
     if (typeof onSelect !== 'function') return;
     if (disabled) return;
 
     if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
-      onSelect(event);
+      onSelect(event); // if this Item is inside a Menu, close the Menu
+
+      if (typeof afterSelect === 'function') afterSelect();
     }
-  }, [onSelect, disabled]); // use props.id if provided, otherwise generate one.
+  }, [onSelect, disabled, afterSelect]); // use props.id if provided, otherwise generate one.
 
   const labelId = useSSRSafeId(id);
   const inlineDescriptionId = useSSRSafeId(id && `${id}--inline-description`);
@@ -166,7 +179,8 @@ 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
+    "aria-describedby": slots.BlockDescription ? blockDescriptionId : undefined,
+    role: role || itemRole
   }, props), /*#__PURE__*/React.createElement(ItemWrapper, null, /*#__PURE__*/React.createElement(Selection, {
     selected: selected
   }), slots.LeadingVisual, /*#__PURE__*/React.createElement(Box, {

package/lib-esm/ActionList2/List.js

@@ -3,6 +3,7 @@ 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",
@@ -12,6 +13,7 @@ export const List = /*#__PURE__*/React.forwardRef(({
   variant = 'inset',
   selectionVariant,
   showDividers = false,
+  role,
   sx: sxProp = {},
   ...props
 }, forwardedRef) => {
@@ -21,8 +23,14 @@ 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)
+    sx: merge(styles, sxProp),
+    role: role || listRole
   }, props, {
     ref: forwardedRef
   }), /*#__PURE__*/React.createElement(ListContext.Provider, {

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

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

package/lib-esm/ActionList2/MenuContext.js

@@ -0,0 +1,3 @@
+/** This context can be used by components that compose ActionList inside a Menu */
+import React from 'react';
+export const MenuContext = /*#__PURE__*/React.createContext({});

package/lib-esm/ActionList2/Selection.js

@@ -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 { LeadingVisualContainer } from './Visuals';
 export const Selection = ({
   selected
@@ -12,6 +13,9 @@ 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
@@ -22,6 +26,11 @@ 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));
   }

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { Divider } from './Divider';
 export type { ListProps as ActionListProps } from './List';
 export type { GroupProps } from './Group';
 export type { ItemProps } from './Item';
@@ -26,7 +25,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: typeof Divider;
+    Divider: import("react").FC<import("../sx").SxProp>;
     /** Secondary text which provides additional information about an `Item`. */
     Description: import("react").FC<import("./Description").DescriptionProps>;
     /** Icon (or similar) positioned before `Item` text. */