@primer/components 0.0.0-2021113144816 → 0.0.0-2021113174023

package/lib/ActionList2/Item.jsx

@@ -0,0 +1,174 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Item = exports.TEXT_ROW_HEIGHT = exports.Slot = exports.getVariantStyles = void 0;
+const react_1 = __importDefault(require("react"));
+const ssr_1 = require("@react-aria/ssr");
+const styled_components_1 = __importDefault(require("styled-components"));
+const ThemeProvider_1 = require("../ThemeProvider");
+const Box_1 = __importDefault(require("../Box"));
+const sx_1 = __importStar(require("../sx"));
+const create_slots_1 = __importDefault(require("../utils/create-slots"));
+const List_1 = require("./List");
+const Selection_1 = require("./Selection");
+const getVariantStyles = (variant, disabled) => {
+    if (disabled) {
+        return {
+            color: 'primer.fg.disabled',
+            iconColor: 'primer.fg.disabled',
+            annotationColor: 'primer.fg.disabled'
+        };
+    }
+    switch (variant) {
+        case 'danger':
+            return {
+                color: 'danger.fg',
+                iconColor: 'danger.fg',
+                annotationColor: 'fg.muted',
+                hoverColor: 'actionListItem.danger.hoverText'
+            };
+        default:
+            return {
+                color: 'fg.default',
+                iconColor: 'fg.muted',
+                annotationColor: 'fg.muted',
+                hoverColor: 'fg.default'
+            };
+    }
+};
+exports.getVariantStyles = getVariantStyles;
+const { Slots, Slot } = create_slots_1.default(['LeadingVisual', 'InlineDescription', 'BlockDescription', 'TrailingVisual']);
+exports.Slot = Slot;
+const LiBox = styled_components_1.default.li(sx_1.default);
+exports.TEXT_ROW_HEIGHT = '20px'; // custom value off the scale
+exports.Item = react_1.default.forwardRef(({ variant = 'default', disabled = false, selected = undefined, onSelect = () => null, sx: sxProp = {}, id, _PrivateItemWrapper, ...props }, forwardedRef) => {
+    const { variant: listVariant, showDividers } = react_1.default.useContext(List_1.ListContext);
+    const { theme } = ThemeProvider_1.useTheme();
+    const styles = {
+        display: 'flex',
+        paddingX: 2,
+        fontSize: 1,
+        paddingY: '6px',
+        lineHeight: exports.TEXT_ROW_HEIGHT,
+        minHeight: 5,
+        marginX: listVariant === 'inset' ? 2 : 0,
+        borderRadius: listVariant === 'inset' ? 2 : 0,
+        transition: 'background 33.333ms linear',
+        color: exports.getVariantStyles(variant, disabled).color,
+        cursor: 'pointer',
+        '&[aria-disabled]': { cursor: 'not-allowed' },
+        '@media (hover: hover) and (pointer: fine)': {
+            ':hover:not([aria-disabled])': {
+                backgroundColor: `actionListItem.${variant}.hoverBg`,
+                color: exports.getVariantStyles(variant, disabled).hoverColor
+            },
+            ':focus:not([data-focus-visible-added])': {
+                backgroundColor: `actionListItem.${variant}.selectedBg`,
+                color: exports.getVariantStyles(variant, disabled).hoverColor,
+                outline: 'none'
+            },
+            '&[data-focus-visible-added]': {
+                // we don't use :focus-visible because not all browsers (safari) have it yet
+                outline: 'none',
+                border: `2 solid`,
+                boxShadow: `0 0 0 2px ${theme?.colors.accent.emphasis}`
+            },
+            ':active:not([aria-disabled])': {
+                backgroundColor: `actionListItem.${variant}.activeBg`,
+                color: exports.getVariantStyles(variant, disabled).hoverColor
+            }
+        },
+        /** Divider styles */
+        '[data-component="ActionList.Item--DividerContainer"]': {
+            position: 'relative'
+        },
+        '[data-component="ActionList.Item--DividerContainer"]::before': {
+            content: '" "',
+            display: 'block',
+            position: 'absolute',
+            width: '100%',
+            top: '-7px',
+            border: '0 solid',
+            borderTopWidth: showDividers ? `1px` : '0',
+            borderColor: 'var(--divider-color, transparent)'
+        },
+        // show between 2 items
+        ':not(:first-of-type)': { '--divider-color': theme?.colors.actionListItem.inlineDivider },
+        // hide divider after dividers & group header, with higher importance!
+        '[data-component="ActionList.Divider"] + &': { '--divider-color': 'transparent !important' },
+        // hide border on current and previous item
+        '&:hover:not([aria-disabled]), &:focus:not([aria-disabled]), &[data-focus-visible-added]:not([aria-disabled])': {
+            '--divider-color': 'transparent'
+        },
+        '&:hover:not([aria-disabled]) + &, &:focus:not([aria-disabled]) + &, &[data-focus-visible-added] + li': {
+            '--divider-color': 'transparent'
+        }
+    };
+    const clickHandler = react_1.default.useCallback(event => {
+        if (disabled)
+            return;
+        if (!event.defaultPrevented)
+            onSelect(event);
+    }, [onSelect, disabled]);
+    const keyPressHandler = react_1.default.useCallback(event => {
+        if (disabled)
+            return;
+        if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
+            onSelect(event);
+        }
+    }, [onSelect, disabled]);
+    // use props.id if provided, otherwise generate one.
+    const labelId = ssr_1.useSSRSafeId(id);
+    const inlineDescriptionId = ssr_1.useSSRSafeId(id && `${id}--inline-description`);
+    const blockDescriptionId = ssr_1.useSSRSafeId(id && `${id}--block-description`);
+    const ItemWrapper = _PrivateItemWrapper || react_1.default.Fragment;
+    return (<Slots context={{ variant, disabled, inlineDescriptionId, blockDescriptionId }}>
+        {slots => (<LiBox ref={forwardedRef} sx={sx_1.merge(styles, sxProp)} onClick={clickHandler} onKeyPress={keyPressHandler} aria-selected={selected} aria-disabled={disabled ? true : undefined} tabIndex={disabled || _PrivateItemWrapper ? undefined : 0} aria-labelledby={`${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`} aria-describedby={slots.BlockDescription ? blockDescriptionId : undefined} {...props}>
+            <ItemWrapper>
+              <Selection_1.Selection selected={selected}/>
+              {slots.LeadingVisual}
+              <Box_1.default data-component="ActionList.Item--DividerContainer" sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1, minWidth: 0 }}>
+                <ConditionalBox if={Boolean(slots.TrailingVisual)} sx={{ display: 'flex', flexGrow: 1 }}>
+                  <ConditionalBox if={Boolean(slots.InlineDescription)} sx={{ display: 'flex', flexGrow: 1, alignItems: 'baseline', minWidth: 0 }}>
+                    <Box_1.default as="span" id={labelId} sx={{ flexGrow: slots.InlineDescription ? 0 : 1 }}>
+                      {props.children}
+                    </Box_1.default>
+                    {slots.InlineDescription}
+                  </ConditionalBox>
+                  {slots.TrailingVisual}
+                </ConditionalBox>
+                {slots.BlockDescription}
+              </Box_1.default>
+            </ItemWrapper>
+          </LiBox>)}
+      </Slots>);
+});
+exports.Item.displayName = 'ActionList.Item';
+const ConditionalBox = props => {
+    const { if: condition, ...rest } = props;
+    if (condition)
+        return <Box_1.default {...rest}>{props.children}</Box_1.default>;
+    else
+        return <>{props.children}</>;
+};

package/lib/ActionList2/LinkItem.jsx

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkItem = void 0;
+const react_1 = __importDefault(require("react"));
+const Link_1 = __importDefault(require("../Link"));
+const sx_1 = require("../sx");
+const Item_1 = require("./Item");
+exports.LinkItem = react_1.default.forwardRef(({ sx = {}, as: Component, ...props }, forwardedRef) => {
+    const styles = {
+        // occupy full size of Item
+        paddingX: 2,
+        paddingY: '6px',
+        display: 'flex',
+        flexGrow: 1,
+        borderRadius: 2,
+        // inherit Item styles
+        color: 'inherit',
+        '&:hover': { color: 'inherit', textDecoration: 'none' }
+    };
+    return (<Item_1.Item sx={{ paddingY: 0, paddingX: 0 }} _PrivateItemWrapper={({ children }) => (<Link_1.default as={Component} sx={sx_1.merge(styles, sx)} {...props} ref={forwardedRef}>
+          {children}
+        </Link_1.default>)}>
+      {props.children}
+    </Item_1.Item>);
+});

package/lib/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/ActionList2/List.js

@@ -11,8 +11,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _sx = _interopRequireWildcard(require("../sx"));
 
-var _MenuContext = require("./MenuContext");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 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; }
@@ -27,14 +25,13 @@ exports.ListContext = ListContext;
 
 const ListBox = _styledComponents.default.ul.withConfig({
   displayName: "List__ListBox",
-  componentId: "sc-cvbq60-0"
+  componentId: "cvbq60-0"
 })(_sx.default);
 
 const List = /*#__PURE__*/_react.default.forwardRef(({
   variant = 'inset',
   selectionVariant,
   showDividers = false,
-  role,
   sx: sxProp = {},
   ...props
 }, forwardedRef) => {
@@ -44,15 +41,9 @@ const List = /*#__PURE__*/_react.default.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.default.useContext(_MenuContext.MenuContext);
-
   return /*#__PURE__*/_react.default.createElement(ListBox, _extends({
     sx: (0, _sx.merge)(styles, sxProp),
-    role: role || listRole
+    "aria-multiselectable": selectionVariant === 'multiple' ? true : undefined
   }, props, {
     ref: forwardedRef
   }), /*#__PURE__*/_react.default.createElement(ListContext.Provider, {

package/lib/ActionList2/List.jsx

@@ -0,0 +1,41 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.List = exports.ListContext = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const sx_1 = __importStar(require("../sx"));
+exports.ListContext = react_1.default.createContext({});
+const ListBox = styled_components_1.default.ul(sx_1.default);
+exports.List = react_1.default.forwardRef(({ variant = 'inset', selectionVariant, showDividers = false, sx: sxProp = {}, ...props }, forwardedRef) => {
+    const styles = {
+        margin: 0,
+        paddingInlineStart: 0,
+        paddingY: variant === 'inset' ? 2 : 0
+    };
+    return (<ListBox sx={sx_1.merge(styles, sxProp)} aria-multiselectable={selectionVariant === 'multiple' ? true : undefined} {...props} ref={forwardedRef}>
+        <exports.ListContext.Provider value={{ variant, selectionVariant, showDividers }}>{props.children}</exports.ListContext.Provider>
+      </ListBox>);
+});
+exports.List.displayName = 'ActionList';

package/lib/ActionList2/Selection.js

@@ -13,8 +13,6 @@ var _List = require("./List");
 
 var _Group = require("./Group");
 
-var _MenuContext = require("./MenuContext");
-
 var _Visuals = require("./Visuals");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,10 +27,6 @@ const Selection = ({
   const {
     selectionVariant: groupSelectionVariant
   } = _react.default.useContext(_Group.GroupContext);
-
-  const {
-    parent
-  } = _react.default.useContext(_MenuContext.MenuContext);
   /** selectionVariant in Group can override the selectionVariant in List root */
 
 
@@ -44,11 +38,6 @@ 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.default.createElement(_Visuals.LeadingVisualContainer, null, selected && /*#__PURE__*/_react.default.createElement(_octiconsReact.CheckIcon, null));
   }
@@ -64,9 +53,7 @@ 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/ActionList2/Selection.jsx

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Selection = void 0;
+const react_1 = __importDefault(require("react"));
+const octicons_react_1 = require("@primer/octicons-react");
+const List_1 = require("./List");
+const Group_1 = require("./Group");
+const Visuals_1 = require("./Visuals");
+const Selection = ({ selected }) => {
+    const { selectionVariant: listSelectionVariant } = react_1.default.useContext(List_1.ListContext);
+    const { selectionVariant: groupSelectionVariant } = react_1.default.useContext(Group_1.GroupContext);
+    /** 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
+    if (!selectionVariant) {
+        // to avoid confusion, fail loudly instead of silently ignoring
+        if (selected)
+            throw new Error('For Item to be selected, ActionList or ActionList.Group needs to have a selectionVariant defined');
+        return null;
+    }
+    if (selectionVariant === 'single') {
+        return <Visuals_1.LeadingVisualContainer>{selected && <octicons_react_1.CheckIcon />}</Visuals_1.LeadingVisualContainer>;
+    }
+    /**
+     * selectionVariant is multiple
+     * we use a svg instead of an input because there should not
+     * be an interactive element inside an option
+     * svg copied from primer/css
+     */
+    return (<Visuals_1.LeadingVisualContainer sx={{
+            rect: {
+                fill: selected ? 'accent.fg' : 'canvas.default',
+                stroke: selected ? 'accent.fg' : 'border.default'
+            },
+            path: {
+                fill: 'fg.onEmphasis',
+                boxShadow: 'shadow.small',
+                opacity: selected ? 1 : 0
+            }
+        }}>
+      <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+        <rect x="2" y="2" width="12" height="12" rx="4"></rect>
+        <path fillRule="evenodd" strokeWidth="0" d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"/>
+      </svg>
+    </Visuals_1.LeadingVisualContainer>);
+};
+exports.Selection = Selection;

package/lib/ActionList2/Visuals.jsx

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TrailingVisual = exports.LeadingVisual = exports.LeadingVisualContainer = void 0;
+const react_1 = __importDefault(require("react"));
+const Box_1 = __importDefault(require("../Box"));
+const sx_1 = require("../sx");
+const constants_1 = require("../constants");
+const Item_1 = require("./Item");
+const LeadingVisualContainer = ({ sx = {}, ...props }) => {
+    return (<Box_1.default as="span" sx={sx_1.merge({
+            height: Item_1.TEXT_ROW_HEIGHT,
+            minWidth: constants_1.get('space.3'),
+            maxWidth: Item_1.TEXT_ROW_HEIGHT,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            flexShrink: 0,
+            marginRight: 2
+        }, sx)} {...props}/>);
+};
+exports.LeadingVisualContainer = LeadingVisualContainer;
+const LeadingVisual = ({ sx = {}, ...props }) => {
+    return (<Item_1.Slot name="LeadingVisual">
+      {({ variant, disabled }) => (<exports.LeadingVisualContainer sx={sx_1.merge({
+                color: Item_1.getVariantStyles(variant, disabled).iconColor,
+                svg: { fontSize: 0 }
+            }, sx)} {...props}>
+          {props.children}
+        </exports.LeadingVisualContainer>)}
+    </Item_1.Slot>);
+};
+exports.LeadingVisual = LeadingVisual;
+const TrailingVisual = ({ sx = {}, ...props }) => {
+    return (<Item_1.Slot name="TrailingVisual">
+      {({ variant, disabled }) => (<Box_1.default as="span" sx={sx_1.merge({
+                height: '20px',
+                flexShrink: 0,
+                color: Item_1.getVariantStyles(variant, disabled).annotationColor,
+                marginLeft: 2
+            }, sx)} {...props}>
+          {props.children}
+        </Box_1.default>)}
+    </Item_1.Slot>);
+};
+exports.TrailingVisual = TrailingVisual;

package/lib/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. */

package/lib/ActionList2/index.js

@@ -1,47 +1,29 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionList = void 0;
-
-var _List = require("./List");
-
-var _Group = require("./Group");
-
-var _Item = require("./Item");
-
-var _LinkItem = require("./LinkItem");
-
-var _Divider = require("./Divider");
-
-var _Description = require("./Description");
-
-var _Visuals = require("./Visuals");
-
+const List_1 = require("./List");
+const Group_1 = require("./Group");
+const Item_1 = require("./Item");
+const LinkItem_1 = require("./LinkItem");
+const Divider_1 = require("./Divider");
+const Description_1 = require("./Description");
+const Visuals_1 = require("./Visuals");
 /**
  * Collection of list-related components.
  */
-const ActionList = Object.assign(_List.List, {
-  /** Collects related `Items` in an `ActionList`. */
-  Group: _Group.Group,
-
-  /** An actionable or selectable `Item` */
-  Item: _Item.Item,
-
-  /** A `Item` that renders a full-size anchor inside ListItem */
-  LinkItem: _LinkItem.LinkItem,
-
-  /** Visually separates `Item`s or `Group`s in an `ActionList`. */
-  Divider: _Divider.Divider,
-
-  /** Secondary text which provides additional information about an `Item`. */
-  Description: _Description.Description,
-
-  /** Icon (or similar) positioned before `Item` text. */
-  LeadingVisual: _Visuals.LeadingVisual,
-
-  /** Icon (or similar) positioned after `Item` text. */
-  TrailingVisual: _Visuals.TrailingVisual
+exports.ActionList = Object.assign(List_1.List, {
+    /** Collects related `Items` in an `ActionList`. */
+    Group: Group_1.Group,
+    /** An actionable or selectable `Item` */
+    Item: Item_1.Item,
+    /** A `Item` that renders a full-size anchor inside ListItem */
+    LinkItem: LinkItem_1.LinkItem,
+    /** Visually separates `Item`s or `Group`s in an `ActionList`. */
+    Divider: Divider_1.Divider,
+    /** Secondary text which provides additional information about an `Item`. */
+    Description: Description_1.Description,
+    /** Icon (or similar) positioned before `Item` text. */
+    LeadingVisual: Visuals_1.LeadingVisual,
+    /** Icon (or similar) positioned after `Item` text. */
+    TrailingVisual: Visuals_1.TrailingVisual
 });
-exports.ActionList = ActionList;

package/lib/ActionMenu.jsx

@@ -0,0 +1,73 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionMenu = void 0;
+const List_1 = require("./ActionList/List");
+const Item_1 = require("./ActionList/Item");
+const Divider_1 = require("./ActionList/Divider");
+const Button_1 = __importDefault(require("./Button"));
+const react_1 = __importStar(require("react"));
+const AnchoredOverlay_1 = require("./AnchoredOverlay");
+const useProvidedStateOrCreate_1 = require("./hooks/useProvidedStateOrCreate");
+const hooks_1 = require("./hooks");
+const ActionMenuItem = (props) => <Item_1.Item role="menuitem" {...props}/>;
+ActionMenuItem.displayName = 'ActionMenu.Item';
+const ActionMenuBase = ({ anchorContent, renderAnchor = (props) => <Button_1.default {...props}/>, anchorRef: externalAnchorRef, onAction, open, setOpen, overlayProps, items, ...listProps }) => {
+    const [combinedOpenState, setCombinedOpenState] = useProvidedStateOrCreate_1.useProvidedStateOrCreate(open, setOpen, false);
+    const anchorRef = hooks_1.useProvidedRefOrCreate(externalAnchorRef);
+    const onOpen = react_1.useCallback(() => setCombinedOpenState(true), [setCombinedOpenState]);
+    const onClose = react_1.useCallback(() => setCombinedOpenState(false), [setCombinedOpenState]);
+    const renderMenuAnchor = react_1.useMemo(() => {
+        if (renderAnchor === null) {
+            return null;
+        }
+        return (props) => {
+            return renderAnchor({
+                'aria-label': 'menu',
+                children: anchorContent,
+                ...props
+            });
+        };
+    }, [anchorContent, renderAnchor]);
+    const itemsToRender = react_1.useMemo(() => {
+        return items.map(item => {
+            return {
+                ...item,
+                role: 'menuitem',
+                onAction: (props, event) => {
+                    const actionCallback = item.onAction ?? onAction;
+                    actionCallback?.(props, event);
+                    if (!event.defaultPrevented) {
+                        onClose();
+                    }
+                }
+            };
+        });
+    }, [items, onAction, onClose]);
+    return (<AnchoredOverlay_1.AnchoredOverlay renderAnchor={renderMenuAnchor} anchorRef={anchorRef} open={combinedOpenState} onOpen={onOpen} onClose={onClose} overlayProps={overlayProps}>
+      <List_1.List {...listProps} role="menu" items={itemsToRender}/>
+    </AnchoredOverlay_1.AnchoredOverlay>);
+};
+ActionMenuBase.displayName = 'ActionMenu';
+exports.ActionMenu = Object.assign(ActionMenuBase, { Divider: Divider_1.Divider, Item: ActionMenuItem });