@servicetitan/design-system 13.3.1 → 14.0.0-react18.0

package/dist/components/ActionMenu/ActionMenu.css

@@ -166,7 +166,7 @@ span.Popover {
 }
 .ActionMenu .ActionMenuGroup__label,
 .ActionMenu .ActionMenuItem {
-  padding: 4px 16px;
+  padding: 5px 16px;
 }
 .ActionMenu .ActionMenuGroup__label,
 .ActionMenu .ActionMenuGroup__divider,
@@ -180,31 +180,27 @@ span.Popover {
   display: flex;
   flex-direction: row;
   min-height: 26px;
+  /* Changes due to use button tag instead of div */
+  /* Set color on root of component. It can be overridden after the @include */
+  color: var(--colorsTextDefault, #141414);
+  /* Make sure font-family goes across entire component */
+  font-family: "Nunito Sans", sans-serif;
+  font-size: 16px;
+  border: none;
+  width: 100%;
+  text-align: left;
 }
 .ActionMenu .ActionMenuItem:focus {
   outline: 0;
-}
-.ActionMenu .ActionMenuItem.ActionMenuItem--active:not(.ActionMenuItem--disabled), .ActionMenu .ActionMenuItem:hover:not(.ActionMenuItem--disabled), .ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus {
   background: var(--colorsSurfacePrimary, #0265dc);
   color: var(--colorsTextOnPrimary, white);
   cursor: pointer;
 }
-.ActionMenu .ActionMenuItem.ActionMenuItem--active:not(.ActionMenuItem--disabled) .ActionMenuItem__content > .Headline,
-.ActionMenu .ActionMenuItem.ActionMenuItem--active:not(.ActionMenuItem--disabled) .ActionMenuItem__content > .BodyText,
-.ActionMenu .ActionMenuItem.ActionMenuItem--active:not(.ActionMenuItem--disabled) .ActionMenuItem__content > .Eyebrow,
-.ActionMenu .ActionMenuItem.ActionMenuItem--active:not(.ActionMenuItem--disabled) .ActionMenuItem__content > .Text,
-.ActionMenu .ActionMenuItem.ActionMenuItem--active:not(.ActionMenuItem--disabled) .ActionMenuItem__content, .ActionMenu .ActionMenuItem:hover:not(.ActionMenuItem--disabled) .ActionMenuItem__content > .Headline,
-.ActionMenu .ActionMenuItem:hover:not(.ActionMenuItem--disabled) .ActionMenuItem__content > .BodyText,
-.ActionMenu .ActionMenuItem:hover:not(.ActionMenuItem--disabled) .ActionMenuItem__content > .Eyebrow,
-.ActionMenu .ActionMenuItem:hover:not(.ActionMenuItem--disabled) .ActionMenuItem__content > .Text,
-.ActionMenu .ActionMenuItem:hover:not(.ActionMenuItem--disabled) .ActionMenuItem__content, .ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus .ActionMenuItem__content > .Headline,
-.ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus .ActionMenuItem__content > .BodyText,
-.ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus .ActionMenuItem__content > .Eyebrow,
-.ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus .ActionMenuItem__content > .Text,
-.ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus .ActionMenuItem__content {
+.ActionMenu .ActionMenuItem:focus .ActionMenuItem__content,
+.ActionMenu .ActionMenuItem:focus .ActionMenuItem__content * {
   color: var(--colorsTextOnPrimary, white);
 }
-.ActionMenu .ActionMenuItem.ActionMenuItem--active:not(.ActionMenuItem--disabled) .ActionMenuItem__icon .a-Icon > svg, .ActionMenu .ActionMenuItem:hover:not(.ActionMenuItem--disabled) .ActionMenuItem__icon .a-Icon > svg, .ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus .ActionMenuItem__icon .a-Icon > svg {
+.ActionMenu .ActionMenuItem:focus .ActionMenuItem__icon .a-Icon > svg {
   fill: currentColor !important;
 }
 .ActionMenu .ActionMenuItem .ActionMenuItem__icon,
@@ -234,10 +230,6 @@ span.Popover {
   display: none;
 }
 
-:not(.ActionMenu) > .ActionMenu__TriggerWrapper {
-  display: inline-block;
-}
-
 .ActionMenuGroup__label.Divider {
   margin-left: 8px;
   margin-right: 8px;
@@ -247,4 +239,20 @@ span.Popover {
   opacity: 0.6;
 }
 
+.ActionMenu__TriggerWrapper {
+  display: inline-block;
+}
+.ActionMenu .ActionMenu__TriggerWrapper {
+  display: block;
+}
+
+.ActionMenu__ItemsWrapper:focus,
+.ActionMenu__OverlayWrapper:focus {
+  outline: none;
+}
+.ActionMenu__ItemsWrapper:focus-visible,
+.ActionMenu__OverlayWrapper:focus-visible {
+  outline: none;
+}
+
 /*# sourceMappingURL=ActionMenu.css.map */

package/dist/components/ActionMenu/ActionMenu.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Popover/Popover.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/core/tokens.scss","../../../src/components/ActionMenu/ActionMenu.scss"],"names":[],"mappings":"AAAA;ACIA;AAYA;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EAAe;;;AAEf;AC1BC;EACA;AAEA;EACA;EDyBA,YArB0B;EAsB1B,eEXiB;EFYjB;EACA;EACA;EACA;;AAEA;EACiB;;AAEjB;EACC;;;AAIF;EAAwB,eE1BN;;;AF4BlB;AACA;EACC;;;AAGD;EAAiB,WAhDM;;;AAiDvB;EAAgB,WAhDM;;;AAiDtB;EAAgB,WAhDM;;;AAiDtB;EAAgB,WAhDM;;;AAkDtB;EACC;EACA;;;AAGD;AAOC;AAAA;AAAA;EAGC;;AAGD;AAAA;EAEC;EACA;EACA;;AAGD;EAA8B;;;AAb9B;AAAA;AAAA;EAGC;;AAGD;AAAA;EAEC;EACA;EACA;;AAGD;EAA8B;;;AAb9B;AAAA;AAAA;EAGC;;AAGD;AAAA;EAEC;EACA;EACA;;AAGD;EAA8B;;;AAO/B;AACA;EACC;EACA;EACA;;;AAGD;EACC;EACA;;AAEA;EAAa;;;AAGd;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;AAAA;AAAA;AAAA;AAIA;EAAgC;;;AGxGhC;EACC;EACA,WHZsB;EGatB;;;AAGD;AFnBC;EACA;AAEA;EACA;EEkBA,WDiHa;EChHb,aDsHkB;ECrHlB,WHlBqB;EGmBrB;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEC;;AAGD;AAAA;AAAA;EAGC,YApCmB;EAqCnB;;AAGD;EACC;EACA,OArCkB;EAsClB;EACA;EACA,YAzCgB;;AA2ChB;EACC;;AAGD;EAGC,YA/CuB;EAgDvB,OAjDiB;EAkDjB;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAI2B,OAxDV;;AAyDjB;EAAsC;;AAGvC;AAAA;EAEC;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EAA+D;;AAE/D;EACC,OAjFc;EAkFd,QAlFc;;AAqFf;EACC;EACA,SDkBgB;;ACdlB;EAAyD;;;AAG1D;EACC;;;AAGD;EACC,aDkBW;ECjBX,cDiBW;;ACfX;EACC,OArGkB;EAsGlB,SDCiB","file":"ActionMenu.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Popover/Popover.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/core/tokens.scss","../../../src/components/ActionMenu/ActionMenu.scss"],"names":[],"mappings":"AAAA;ACIA;AAYA;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EAAe;;;AAEf;AC1BC;EACA;AAEA;EACA;EDyBA,YArB0B;EAsB1B,eEXiB;EFYjB;EACA;EACA;EACA;;AAEA;EACiB;;AAEjB;EACC;;;AAIF;EAAwB,eE1BN;;;AF4BlB;AACA;EACC;;;AAGD;EAAiB,WAhDM;;;AAiDvB;EAAgB,WAhDM;;;AAiDtB;EAAgB,WAhDM;;;AAiDtB;EAAgB,WAhDM;;;AAkDtB;EACC;EACA;;;AAGD;AAOC;AAAA;AAAA;EAGC;;AAGD;AAAA;EAEC;EACA;EACA;;AAGD;EAA8B;;;AAb9B;AAAA;AAAA;EAGC;;AAGD;AAAA;EAEC;EACA;EACA;;AAGD;EAA8B;;;AAb9B;AAAA;AAAA;EAGC;;AAGD;AAAA;EAEC;EACA;EACA;;AAGD;EAA8B;;;AAO/B;AACA;EACC;EACA;EACA;;;AAGD;EACC;EACA;;AAEA;EAAa;;;AAGd;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;AAAA;AAAA;AAAA;AAIA;EAAgC;;;AGxGhC;EACC;EACA,WHZsB;EGatB;;;AAGD;AFnBC;EACA;AAEA;EACA;EEkBA,WDiHa;EChHb,aDsHkB;ECrHlB,WHlBqB;EGmBrB;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEC;;AAGD;AAAA;AAAA;EAGC,YApCmB;EAqCnB;;AAGD;EACC;EACA,OArCkB;EAsClB;EACA;EACA,YAzCgB;AA2ChB;AFlDD;EACA;AAEA;EACA;EEiDC,WDkFY;ECjFZ;EACA;EACA;;AAEA;EACC;EACA,YAlDuB;EAmDvB,OApDiB;EAqDjB;;AAEA;AAAA;EAC6B,OAxDZ;;AAyDjB;EAAsC;;AAGvC;AAAA;EAEC;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EAA+D;;AAE/D;EACC,OAjFc;EAkFd,QAlFc;;AAqFf;EACC;EACA,SDkBgB;;ACdlB;EAAyD;;;AAG1D;EACC,aDsBW;ECrBX,cDqBW;;ACnBX;EACC,OAjGkB;EAkGlB,SDKiB;;;ACAnB;EACC;;AAEA;EAAgB;;;AAOhB;AAAA;EAAU;;AAGV;AAAA;EAAkB","file":"ActionMenu.css"}

package/dist/components/ActionMenu/ActionMenu.d.ts

@@ -1,14 +1,18 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import { PopoverProps } from '../Popover';
 import { ActionMenuGroup } from './ActionMenuGroup';
 import { ActionMenuItem } from './ActionMenuItem';
 /**
  * ActionMenu properties
  */
-export declare type ActionMenuProps = PopoverProps;
-export interface ActionMenu extends FC<ActionMenuProps> {
+export interface ActionMenu extends FC<PopoverProps> {
     /** Subcomponents */
     Group: typeof ActionMenuGroup;
     Item: typeof ActionMenuItem;
 }
+export interface ActionMenuContext {
+    itemsContainerRef: React.RefObject<HTMLElement>;
+    onClickOutside: PopoverProps['onClickOutside'];
+}
 export declare const ActionMenu: ActionMenu;
+export declare const ActionMenuContext: React.Context<ActionMenuContext[]>;

package/dist/components/ActionMenu/ActionMenu.js

@@ -14,11 +14,54 @@ import classnames from 'classnames';
 import { Popover } from '../Popover';
 import { ActionMenuGroup } from './ActionMenuGroup';
 import { ActionMenuItem } from './ActionMenuItem';
+import { useArrowNav } from '../../hooks/useArrowNav';
+import { useLatestEvent } from './useLatestEvent';
 export const ActionMenu = (_a) => {
-    var { children, className, direction = 'br', padding = null, // Disable Popover's default padding
-    wrapperClassName, width = 's' } = _a, props = __rest(_a, ["children", "className", "direction", "padding", "wrapperClassName", "width"]);
-    return (React.createElement(Popover, Object.assign({ className: classnames(className, 'ActionMenu__OverlayWrapper'), wrapperClassName: classnames(wrapperClassName, 'ActionMenu__TriggerWrapper'), popoverContentClassName: "ActionMenu", direction: direction, padding: padding, portal: true, width: width, "data-anvil-component": "ActionMenu" }, props), children));
+    var { children, className, direction = 'br', focusTrapOptions, padding = null, // Disable Popover's default padding
+    wrapperClassName, width = 's' } = _a, rest = __rest(_a, ["children", "className", "direction", "focusTrapOptions", "padding", "wrapperClassName", "width"]);
+    const menuContext = React.useContext(ActionMenuContext);
+    const isNested = () => (menuContext === null || menuContext === void 0 ? void 0 : menuContext.length) && (menuContext === null || menuContext === void 0 ? void 0 : menuContext.length) > 0;
+    const handleArrowKeys = (e, data) => {
+        var _a, _b, _c, _d, _e;
+        const cascadingItem = (_b = (_a = data.active) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('ActionMenuItem--cascading');
+        if (e.key === 'ArrowLeft' || e.key === 'ArrowRight')
+            data.disableOnce(); // Prevent focus move on left-right or when focus is not visible yet (no keyboard interaction)
+        if (e.key === 'ArrowLeft' && isNested())
+            (_c = rest.onClickOutside) === null || _c === void 0 ? void 0 : _c.call(rest, e); // Close ActionMenu, if nested
+        if (e.key === 'ArrowRight' && cascadingItem)
+            (_e = (_d = data.active) === null || _d === void 0 ? void 0 : _d.click) === null || _e === void 0 ? void 0 : _e.call(_d); // Open nested
+    };
+    const containerRef = useArrowNav({
+        disabled: !rest.open,
+        onKeyDown: handleArrowKeys,
+    });
+    const latestEvent = useLatestEvent();
+    React.useEffect(() => {
+        const el = containerRef.current;
+        const setFocus = () => {
+            var _a, _b;
+            if (!latestEvent.current)
+                return; // Latest event is undefined yet
+            if (((_a = latestEvent.current) === null || _a === void 0 ? void 0 : _a.type) === 'keydown') {
+                (_b = el.querySelector('button:not([disabled])')) === null || _b === void 0 ? void 0 : _b.focus(); // Keyboard event ? set focus first item
+            }
+            else {
+                el.tabIndex = 0;
+                el.focus(); // Pointer event ? set focus wrapper
+                el.addEventListener('blur', () => el.removeAttribute('tabIndex'));
+            }
+        };
+        if (rest.open && el)
+            Promise.resolve().then(setFocus);
+    }, [rest.open]); // eslint-disable-line
+    return (React.createElement(Popover, Object.assign({ className: classnames(className, 'ActionMenu__OverlayWrapper'), focusTrapOptions: Object.assign({ autoFocus: false, autoFocusContainer: false, focusLock: false, restoreFocus: true }, focusTrapOptions), wrapperClassName: classnames(wrapperClassName, 'ActionMenu__TriggerWrapper'), popoverContentClassName: "ActionMenu", direction: direction, padding: padding, portal: true, width: width, "data-anvil-component": "ActionMenu" }, rest),
+        React.createElement(ActionMenuContext.Provider, { value: menuContext.concat({
+                itemsContainerRef: containerRef,
+                onClickOutside: rest === null || rest === void 0 ? void 0 : rest.onClickOutside,
+            }) },
+            React.createElement("div", { className: "ActionMenu__ItemsWrapper", ref: containerRef }, children))));
 };
 ActionMenu.Group = ActionMenuGroup;
 ActionMenu.Item = ActionMenuItem;
+export const ActionMenuContext = React.createContext([]);
 //# sourceMappingURL=ActionMenu.js.map

package/dist/components/ActionMenu/ActionMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionMenu.js","sourceRoot":"","sources":["../../../src/components/ActionMenu/ActionMenu.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,OAAO,EAAgB,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAalD,MAAM,CAAC,MAAM,UAAU,GAAe,CAAC,EAQtC,EAAE,EAAE;QARkC,EACtC,QAAQ,EACR,SAAS,EACT,SAAS,GAAG,IAAI,EAChB,OAAO,GAAG,IAAI,EAAE,oCAAoC;IACpD,gBAAgB,EAChB,KAAK,GAAG,GAAG,OAEX,EADG,KAAK,cAP8B,8EAQtC,CADQ;IAER,OAAO,CACN,oBAAC,OAAO,kBACP,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,4BAA4B,CAAC,EAC9D,gBAAgB,EAAE,UAAU,CAC3B,gBAAgB,EAChB,4BAA4B,CAC5B,EACD,uBAAuB,EAAC,YAAY,EACpC,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,MAAM,QACN,KAAK,EAAE,KAAK,0BACS,YAAY,IAC7B,KAAK,GAER,QAAQ,CACA,CACV,CAAC;AACH,CAAC,CAAC;AAEF,UAAU,CAAC,KAAK,GAAG,eAAe,CAAC;AACnC,UAAU,CAAC,IAAI,GAAG,cAAc,CAAC"}
+{"version":3,"file":"ActionMenu.js","sourceRoot":"","sources":["../../../src/components/ActionMenu/ActionMenu.tsx"],"names":[],"mappings":"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"}

package/dist/components/ActionMenu/ActionMenu.stories.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import { ActionMenu } from '../../system';
+declare const _default: {
+    title: string;
+    component: ActionMenu;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+    includeStories: string[];
+};
+export default _default;
+export declare const Menu: (props: any) => JSX.Element;
+export declare const MenuItem: (props: any) => JSX.Element;
+export declare const actionMenu: {
+    (args: any): JSX.Element;
+    args: {
+        sharp: boolean;
+        width: string;
+        direction: string;
+        open: boolean;
+    };
+};
+export declare const testContextMenu: {
+    (args: any): JSX.Element;
+    args: {
+        direction: string;
+        width: string;
+    };
+};
+export declare const testOverlayComponents: {
+    (args: any): JSX.Element;
+    args: {
+        sharp: boolean;
+        width: string;
+        direction: string;
+    };
+};
+export declare const testActionMenuOverflow: (args: any) => JSX.Element;

package/dist/components/ActionMenu/ActionMenu.stories.js

@@ -0,0 +1,250 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useEffect, useState } from 'react';
+import { ActionMenu, ActionMenuContext, BodyText, Button, Card, Icon, Tooltip, Modal, Drawer, Dialog, Takeover, Popover, useStorybookFigmaAddon, } from '../../system';
+export default {
+    title: 'Components/ActionMenu',
+    component: ActionMenu,
+    parameters: Object.assign({}, useStorybookFigmaAddon('32%3A1082')),
+    includeStories: [
+        'actionMenu',
+        'testContextMenu',
+        'testOverlayComponents',
+        'testActionMenuOverflow',
+    ],
+};
+const log = () => console.log('item clicked, closing');
+export const Menu = (props) => {
+    var _a, _b;
+    const { direction, onClose, onOpen, trigger, portal = true } = props, rest = __rest(props, ["direction", "onClose", "onOpen", "trigger", "portal"]);
+    const [open, setOpen] = React.useState(rest.open || false);
+    const parentContext = (_a = React.useContext(ActionMenuContext)) === null || _a === void 0 ? void 0 : _a.slice(-1)[0];
+    const parentMenuContainer = (_b = parentContext === null || parentContext === void 0 ? void 0 : parentContext.itemsContainerRef) === null || _b === void 0 ? void 0 : _b.current;
+    const handleClickOutside = (e) => {
+        var _a, _b;
+        if (portal) {
+            setOpen(false); // Close current menu
+            if (e.key === 'ArrowLeft')
+                return; // Close only one menu
+            if (parentMenuContainer === null || parentMenuContainer === void 0 ? void 0 : parentMenuContainer.contains(e.target))
+                return;
+            (_a = parentContext === null || parentContext === void 0 ? void 0 : parentContext.onClickOutside) === null || _a === void 0 ? void 0 : _a.call(parentContext, e); // Close higher level menus
+        }
+        else {
+            if (parentMenuContainer === null || parentMenuContainer === void 0 ? void 0 : parentMenuContainer.contains(e.target)) {
+                const nestedMenus = Array.from(parentMenuContainer === null || parentMenuContainer === void 0 ? void 0 : parentMenuContainer.querySelectorAll('[data-anvil-component=ActionMenu]'));
+                // Exclude event on non-portaled submenu
+                if (!nestedMenus.some((el) => el.contains(e.target)))
+                    return;
+                setOpen(false); // Close current menu
+                if (e.key === 'ArrowLeft')
+                    return; // Close only one menu
+                (_b = parentContext === null || parentContext === void 0 ? void 0 : parentContext.onClickOutside) === null || _b === void 0 ? void 0 : _b.call(// Close only one menu
+                parentContext, e); // Close higher level menus
+            }
+        }
+    };
+    useEffect(() => {
+        open ? onOpen === null || onOpen === void 0 ? void 0 : onOpen() : onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [open]); // eslint-disable-line
+    return (React.createElement(ActionMenu, Object.assign({}, rest, { direction: direction || 'rb', open: open, onClickOutside: handleClickOutside, portal: portal, trigger: trigger === null || trigger === void 0 ? void 0 : trigger({ onClick: () => setOpen(!open) }) })));
+};
+export const MenuItem = (props) => {
+    var _a;
+    const parentContext = (_a = React.useContext(ActionMenuContext)) === null || _a === void 0 ? void 0 : _a.slice(-1)[0];
+    const handleClick = (e) => {
+        var _a, _b;
+        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        if (props.cascading)
+            return;
+        (_b = parentContext === null || parentContext === void 0 ? void 0 : parentContext.onClickOutside) === null || _b === void 0 ? void 0 : _b.call(parentContext, e);
+    };
+    const handleExit = (e) => {
+        var _a, _b;
+        (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        if (e.key === 'Escape' || e.key === 'Tab') {
+            (_b = parentContext === null || parentContext === void 0 ? void 0 : parentContext.onClickOutside) === null || _b === void 0 ? void 0 : _b.call(parentContext, e); // Close all the nested Menus
+            if (e.shiftKey && e.key === 'Tab')
+                e.preventDefault(); // To keep focus on trigger
+        }
+    };
+    return (React.createElement(ActionMenu.Item, Object.assign({}, props, { onClick: handleClick, onKeyDown: handleExit })));
+};
+const MenuItems = () => (React.createElement(React.Fragment, null,
+    React.createElement(MenuItem, { onClick: log }, "Item"),
+    React.createElement(MenuItem, { disabled: true }, "Disabled"),
+    React.createElement(Menu, { direction: "rb", trigger: (p) => (React.createElement(MenuItem, Object.assign({}, p, { cascading: true }), "Cascading")) },
+        React.createElement(ContactItems, null)),
+    React.createElement(ActionMenu.Group, null,
+        React.createElement(MenuItem, { disabled: true }, "Disabled"),
+        React.createElement(MenuItem, { onClick: log, icon: "help" }, "Icon"),
+        React.createElement(MenuItem, { onClick: log, icon: "help", disabled: true }, "Icon Disabled")),
+    React.createElement(ActionMenu.Group, { label: "Group with Label" },
+        React.createElement(MenuItem, { onClick: log, icon: "help" }, "Icon"),
+        React.createElement(Menu, { direction: "rb", trigger: (p) => (React.createElement(MenuItem, Object.assign({}, p, { cascading: true, icon: "help", iconColor: "red" }), "Colored Icon Cascading Submenu")) },
+            React.createElement(ContactItems, null)),
+        React.createElement(MenuItem, { onClick: log },
+            React.createElement(BodyText, { size: "medium", className: "m-b-0-i" }, "Download XLSX")))));
+const ContactItems = () => (React.createElement(React.Fragment, null,
+    React.createElement(ActionMenu.Group, { label: "Text" },
+        React.createElement(MenuItem, { onClick: log, icon: "phone_android" },
+            React.createElement(BodyText, { subdued: true, size: "xsmall" }, "Monica\u2019s cell"),
+            "(555) 123-4567")),
+    React.createElement(ActionMenu.Group, { label: "Call" },
+        React.createElement(MenuItem, { onClick: log, icon: "phone" },
+            React.createElement(BodyText, { subdued: true, size: "xsmall" }, "Home"),
+            "(555) 123-4567"),
+        React.createElement(MenuItem, { onClick: log, icon: "phone_android" },
+            React.createElement(BodyText, { subdued: true, size: "xsmall" }, "Monica\u2019s cell"),
+            "(555) 123-4567")),
+    React.createElement(ActionMenu.Group, { label: "Email" },
+        React.createElement(MenuItem, { onClick: log, icon: "email" },
+            React.createElement(BodyText, { subdued: true, size: "xsmall" }, "Monica's personal"),
+            "monicadoe@gmail.com"),
+        React.createElement(ActionMenu.Group, null,
+            React.createElement(Menu, { direction: "rb", trigger: (p) => (React.createElement(MenuItem, Object.assign({}, p, { cascading: true }), "One more menu")) },
+                React.createElement(MenuItem, { onClick: log }, "Item 1"),
+                React.createElement(MenuItem, { onClick: log }, "Item 2"),
+                React.createElement(MenuItem, { onClick: log }, "Item 3")),
+            React.createElement(Menu, { direction: "rb", trigger: (p) => (React.createElement(MenuItem, Object.assign({}, p, { cascading: true }), "Another menu")) },
+                React.createElement(MenuItem, { onClick: log }, "Item 4"),
+                React.createElement(MenuItem, { onClick: log }, "Item 5"),
+                React.createElement(MenuItem, { onClick: log }, "Item 6"))))));
+export const actionMenu = (args) => {
+    const [key, setKey] = React.useState(0);
+    const refresh = () => setKey(key + 1);
+    return (React.createElement("div", { key: key, className: "p-4 ta-center" },
+        loremIpsum,
+        React.createElement(Menu, Object.assign({}, args, { className: "classname-test", wrapperClassName: "wrapper-classname-test", trigger: (props) => (React.createElement(Button, Object.assign({}, props, { iconName: "more_vert", iconPosition: "right" }), "Action Menu")), onOpen: () => console.log('onOpen fired'), onClose: () => console.log('onClose fired') }),
+            React.createElement(MenuItems, null)),
+        loremIpsum,
+        React.createElement("div", { className: "m-x-8 ta-left" },
+            React.createElement(Button, { onClick: refresh }, "Refresh"))));
+};
+actionMenu.args = {
+    sharp: false,
+    width: 's',
+    direction: 'bl',
+    open: true,
+};
+export const testContextMenu = (args) => {
+    const [open, setOpen] = useState(false);
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+    const close = () => setOpen(false);
+    const handleEscape = (e) => ['Tab', 'Escape'].includes(e.key) && close();
+    const handleContextMenu = (e) => {
+        e.preventDefault();
+        e.persist();
+        setOpen(true);
+        setPosition({
+            x: e.pageX,
+            y: e.pageY,
+        });
+    };
+    const styles = {
+        position: 'absolute',
+        width: 0,
+        height: 0,
+        top: position.y,
+        left: position.x,
+    };
+    return (React.createElement("div", { className: "p-8 ta-center ta-c cursor-default" },
+        React.createElement(Card, { onContextMenu: handleContextMenu, style: { textAlign: 'center' } },
+            React.createElement(BodyText, null, "Right-click here to reveal context menu.")),
+        React.createElement("div", { style: styles },
+            React.createElement(ActionMenu, Object.assign({}, args, { open: open, onClickOutside: close, onKeyDown: handleEscape }),
+                React.createElement(MenuItems, null)))));
+};
+testContextMenu.args = {
+    direction: 'br',
+    width: 's',
+};
+export const testOverlayComponents = (args) => {
+    const [modalOpen, setModalOpen] = useState(false);
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [takeoverOpen, setTakeoverOpen] = useState(false);
+    const [popoverOpen, setPopoverOpen] = useState(false);
+    const [counter, setCounter] = useState(0);
+    const overlays = [
+        { name: 'Modal', fn: () => setModalOpen(!modalOpen) },
+        { name: 'Drawer', fn: () => setDrawerOpen(!drawerOpen) },
+        { name: 'Dialog', fn: () => setDialogOpen(!dialogOpen) },
+        { name: 'Takeover', fn: () => setTakeoverOpen(!takeoverOpen) },
+        {
+            name: 'Popover',
+            fn: () => setPopoverOpen(!popoverOpen),
+            skipFromButtons: true,
+        },
+    ];
+    const CounterButton = () => (React.createElement(Button, { className: "m-x-1", iconName: "plus_one", onClick: () => {
+            setCounter(counter + 1);
+            console.log('counter:', counter);
+        } }));
+    const SecondaryMenu = () => (React.createElement(Menu, { trigger: (props) => (React.createElement(Button, Object.assign({}, props),
+            "Action Menu",
+            React.createElement(Icon, { name: "more_vert", size: "24", className: "m-l-2" }))) }, ['1', '2', '3'].map((i, ix) => (React.createElement(MenuItem, { key: ix },
+        "Item ",
+        i)))));
+    return (React.createElement("div", null,
+        React.createElement(BodyText, { className: "m-y-2" }, "ActionMenu to open Modal, Drawer, Dialog, Takeover, Popover, Tooltip:"),
+        React.createElement(Menu, Object.assign({ trigger: (props) => (React.createElement(Button, Object.assign({}, props),
+                "Action Menu",
+                React.createElement(Icon, { name: "more_vert", size: "24", className: "m-l-2" }))) }, args),
+            overlays.map((i, ix) => (React.createElement(MenuItem, { onClick: i.fn, key: ix },
+                "Open ",
+                i.name))),
+            React.createElement(MenuItem, { icon: "help" },
+                React.createElement(Tooltip, { text: "Tooltip Text", el: "div", direction: "r" }, "Show Tooltip"))),
+        React.createElement(BodyText, { className: "m-y-2" }, "ActionMenu placed inside Modal, Drawer, Dialog, Takeover, Popover:"),
+        overlays
+            .filter((i) => i.skipFromButtons !== true)
+            .map((i, ix) => (React.createElement("div", { className: "m-y-2", key: ix },
+            React.createElement(Button, { onClick: i.fn },
+                "Open ",
+                i.name)))),
+        React.createElement(Modal, { title: "Modal", open: modalOpen, closable: true, onClose: () => overlays[0].fn() },
+            React.createElement(SecondaryMenu, null),
+            React.createElement(CounterButton, null)),
+        React.createElement(Drawer, { header: "Drawer", backdrop: true, open: drawerOpen, onClose: () => overlays[1].fn(), footer: React.createElement(Button, { onClick: overlays[1].fn }, "Close Drawer") },
+            React.createElement(SecondaryMenu, null),
+            React.createElement(CounterButton, null)),
+        React.createElement(Dialog, { title: "Dialog", open: dialogOpen, onClose: () => overlays[2].fn(), onPrimaryActionClick: overlays[2].fn, primaryActionName: "Close Dialog" },
+            React.createElement(SecondaryMenu, null),
+            React.createElement(CounterButton, null)),
+        takeoverOpen && (React.createElement(Takeover, { title: "Takeover", onClose: () => overlays[3].fn() },
+            React.createElement(SecondaryMenu, null),
+            React.createElement(CounterButton, null))),
+        React.createElement(Popover, { header: "Popover", open: popoverOpen, onClickOutside: () => (popoverOpen ? overlays[4].fn() : null), portal: true, trigger: React.createElement(Button, { onClick: overlays[4].fn }, "Open Popover"), direction: "tr" },
+            React.createElement(SecondaryMenu, null),
+            React.createElement(CounterButton, null))));
+};
+testOverlayComponents.args = {
+    sharp: false,
+    width: 's',
+    direction: 'bl',
+};
+export const testActionMenuOverflow = (args) => {
+    return (React.createElement("div", { style: { width: '740px' } },
+        React.createElement(Menu, Object.assign({}, args, { direction: "br", width: "xs", scrollHeight: "256px", trigger: (p) => React.createElement(Button, Object.assign({}, p), "Action Menu") }),
+            React.createElement(MenuItem, null, "Item 1"),
+            React.createElement(MenuItem, { disabled: true }, "Item 2 (disabled)"),
+            React.createElement(MenuItem, null, "Item 3"),
+            React.createElement(MenuItem, null, "Item 4"),
+            React.createElement(MenuItem, null, "Item 5"),
+            React.createElement(Menu, { direction: "rb", trigger: (p) => (React.createElement(MenuItem, Object.assign({}, p, { cascading: true, className: "bg-blue-100" }), "Submenu 1")) },
+                React.createElement(ContactItems, null)),
+            React.createElement(MenuItem, null, "Item 6")),
+        loremIpsum));
+};
+const loremIpsum = (React.createElement(BodyText, { className: "m-x-8 m-y-4 ta-left" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."));
+//# sourceMappingURL=ActionMenu.stories.js.map

package/dist/components/ActionMenu/ActionMenu.stories.js.map

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

package/dist/components/ActionMenu/ActionMenuItem.js

@@ -11,19 +11,16 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import classnames from 'classnames';
-import { useFocusVisible } from '../../hooks/useFocusVisible';
 import { Icon } from '../Icon';
 export const ActionMenuItem = React.forwardRef((_a, ref) => {
-    var { cascading = false, children, className, disabled, icon: iconName, iconColor, onFocus, onBlur } = _a, props = __rest(_a, ["cascading", "children", "className", "disabled", "icon", "iconColor", "onFocus", "onBlur"]);
+    var { cascading = false, children, className, disabled, icon: iconName, iconColor } = _a, rest = __rest(_a, ["cascading", "children", "className", "disabled", "icon", "iconColor"]);
     const newRef = React.useRef(null);
     const itemRef = ref ? ref : newRef;
-    const { isFocusVisible, focusFunction, blurFunction } = useFocusVisible(itemRef, onBlur, onFocus);
     const ActionMenuItemClasses = classnames('ActionMenuItem', className, {
         'ActionMenuItem--disabled': disabled,
         'ActionMenuItem--cascading': cascading,
-        'ActionMenuItem--focus-visible': isFocusVisible,
     });
-    return (React.createElement("div", Object.assign({ className: ActionMenuItemClasses, ref: itemRef, onFocus: focusFunction, onBlur: blurFunction, tabIndex: disabled ? undefined : 0 }, props),
+    return (React.createElement("button", Object.assign({ className: ActionMenuItemClasses, disabled: disabled, onMouseEnter: () => { var _a; return (_a = itemRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, ref: itemRef, role: "button" }, rest),
         iconName ? (React.createElement("span", { className: "ActionMenuItem__icon" },
             React.createElement(Icon, { name: iconName, color: iconColor !== null && iconColor !== void 0 ? iconColor : 'currentColor' }))) : null,
         React.createElement("span", { className: "ActionMenuItem__content" }, children),

package/dist/components/ActionMenu/ActionMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionMenuItem.js","sourceRoot":"","sources":["../../../src/components/ActionMenu/ActionMenuItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAmB,MAAM,SAAS,CAAC;AA2BhD,MAAM,CAAC,MAAM,cAAc,GAA4B,KAAK,CAAC,UAAU,CACtE,CACC,EAUC,EACD,GAAiC,EAChC,EAAE;QAZH,EACC,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,IAAI,EAAE,QAAQ,EACd,SAAS,EACT,OAAO,EACP,MAAM,OAEN,EADG,KAAK,cATT,4FAUC,CADQ;IAIT,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAClC,MAAM,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;IAEnC,MAAM,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,GAAG,eAAe,CACtE,OAAO,EACP,MAAM,EACN,OAAO,CACP,CAAC;IAEF,MAAM,qBAAqB,GAAG,UAAU,CAAC,gBAAgB,EAAE,SAAS,EAAE;QACrE,0BAA0B,EAAE,QAAQ;QACpC,2BAA2B,EAAE,SAAS;QACtC,+BAA+B,EAAE,cAAc;KAC/C,CAAC,CAAC;IAEH,OAAO,CACN,2CACC,SAAS,EAAE,qBAAqB,EAChC,GAAG,EAAE,OAAO,EACZ,OAAO,EAAE,aAAa,EACtB,MAAM,EAAE,YAAY,EACpB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,IAC9B,KAAK;QAER,QAAQ,CAAC,CAAC,CAAC,CACX,8BAAM,SAAS,EAAC,sBAAsB;YACrC,oBAAC,IAAI,IACJ,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,cAAc,GACjC,CACI,CACP,CAAC,CAAC,CAAC,IAAI;QACR,8BAAM,SAAS,EAAC,yBAAyB,IAAE,QAAQ,CAAQ;QAC1D,SAAS,CAAC,CAAC,CAAC,CACZ,8BAAM,SAAS,EAAC,sBAAsB;YACrC,oBAAC,IAAI,IAAC,IAAI,EAAC,eAAe,GAAG,CACvB,CACP,CAAC,CAAC,CAAC,IAAI,CACH,CACN,CAAC;AACH,CAAC,CACD,CAAC"}
+{"version":3,"file":"ActionMenuItem.js","sourceRoot":"","sources":["../../../src/components/ActionMenu/ActionMenuItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,EAAmB,MAAM,SAAS,CAAC;AA2BhD,MAAM,CAAC,MAAM,cAAc,GAA4B,KAAK,CAAC,UAAU,CACtE,CACC,EAQC,EACD,GAAuC,EACtC,EAAE;QAVH,EACC,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,IAAI,EAAE,QAAQ,EACd,SAAS,OAET,EADG,IAAI,cAPR,uEAQC,CADO;IAIR,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAClC,MAAM,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;IAEnC,MAAM,qBAAqB,GAAG,UAAU,CAAC,gBAAgB,EAAE,SAAS,EAAE;QACrE,0BAA0B,EAAE,QAAQ;QACpC,2BAA2B,EAAE,SAAS;KACtC,CAAC,CAAC;IAEH,OAAO,CACN,8CACC,SAAS,EAAE,qBAAqB,EAChC,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,OAAO,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,EAAA,EAC5C,GAAG,EAAE,OAAO,EACZ,IAAI,EAAC,QAAQ,IACT,IAAI;QAEP,QAAQ,CAAC,CAAC,CAAC,CACX,8BAAM,SAAS,EAAC,sBAAsB;YACrC,oBAAC,IAAI,IACJ,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,cAAc,GACjC,CACI,CACP,CAAC,CAAC,CAAC,IAAI;QACR,8BAAM,SAAS,EAAC,yBAAyB,IAAE,QAAQ,CAAQ;QAC1D,SAAS,CAAC,CAAC,CAAC,CACZ,8BAAM,SAAS,EAAC,sBAAsB;YACrC,oBAAC,IAAI,IAAC,IAAI,EAAC,eAAe,GAAG,CACvB,CACP,CAAC,CAAC,CAAC,IAAI,CACA,CACT,CAAC;AACH,CAAC,CACD,CAAC"}

package/dist/components/ActionMenu/index.css

@@ -166,7 +166,7 @@ span.Popover {
 }
 .ActionMenu .ActionMenuGroup__label,
 .ActionMenu .ActionMenuItem {
-  padding: 4px 16px;
+  padding: 5px 16px;
 }
 .ActionMenu .ActionMenuGroup__label,
 .ActionMenu .ActionMenuGroup__divider,
@@ -180,31 +180,27 @@ span.Popover {
   display: flex;
   flex-direction: row;
   min-height: 26px;
+  /* Changes due to use button tag instead of div */
+  /* Set color on root of component. It can be overridden after the @include */
+  color: var(--colorsTextDefault, #141414);
+  /* Make sure font-family goes across entire component */
+  font-family: "Nunito Sans", sans-serif;
+  font-size: 16px;
+  border: none;
+  width: 100%;
+  text-align: left;
 }
 .ActionMenu .ActionMenuItem:focus {
   outline: 0;
-}
-.ActionMenu .ActionMenuItem.ActionMenuItem--active:not(.ActionMenuItem--disabled), .ActionMenu .ActionMenuItem:hover:not(.ActionMenuItem--disabled), .ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus {
   background: var(--colorsSurfacePrimary, #0265dc);
   color: var(--colorsTextOnPrimary, white);
   cursor: pointer;
 }
-.ActionMenu .ActionMenuItem.ActionMenuItem--active:not(.ActionMenuItem--disabled) .ActionMenuItem__content > .Headline,
-.ActionMenu .ActionMenuItem.ActionMenuItem--active:not(.ActionMenuItem--disabled) .ActionMenuItem__content > .BodyText,
-.ActionMenu .ActionMenuItem.ActionMenuItem--active:not(.ActionMenuItem--disabled) .ActionMenuItem__content > .Eyebrow,
-.ActionMenu .ActionMenuItem.ActionMenuItem--active:not(.ActionMenuItem--disabled) .ActionMenuItem__content > .Text,
-.ActionMenu .ActionMenuItem.ActionMenuItem--active:not(.ActionMenuItem--disabled) .ActionMenuItem__content, .ActionMenu .ActionMenuItem:hover:not(.ActionMenuItem--disabled) .ActionMenuItem__content > .Headline,
-.ActionMenu .ActionMenuItem:hover:not(.ActionMenuItem--disabled) .ActionMenuItem__content > .BodyText,
-.ActionMenu .ActionMenuItem:hover:not(.ActionMenuItem--disabled) .ActionMenuItem__content > .Eyebrow,
-.ActionMenu .ActionMenuItem:hover:not(.ActionMenuItem--disabled) .ActionMenuItem__content > .Text,
-.ActionMenu .ActionMenuItem:hover:not(.ActionMenuItem--disabled) .ActionMenuItem__content, .ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus .ActionMenuItem__content > .Headline,
-.ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus .ActionMenuItem__content > .BodyText,
-.ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus .ActionMenuItem__content > .Eyebrow,
-.ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus .ActionMenuItem__content > .Text,
-.ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus .ActionMenuItem__content {
+.ActionMenu .ActionMenuItem:focus .ActionMenuItem__content,
+.ActionMenu .ActionMenuItem:focus .ActionMenuItem__content * {
   color: var(--colorsTextOnPrimary, white);
 }
-.ActionMenu .ActionMenuItem.ActionMenuItem--active:not(.ActionMenuItem--disabled) .ActionMenuItem__icon .a-Icon > svg, .ActionMenu .ActionMenuItem:hover:not(.ActionMenuItem--disabled) .ActionMenuItem__icon .a-Icon > svg, .ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus .ActionMenuItem__icon .a-Icon > svg {
+.ActionMenu .ActionMenuItem:focus .ActionMenuItem__icon .a-Icon > svg {
   fill: currentColor !important;
 }
 .ActionMenu .ActionMenuItem .ActionMenuItem__icon,
@@ -234,10 +230,6 @@ span.Popover {
   display: none;
 }
 
-:not(.ActionMenu) > .ActionMenu__TriggerWrapper {
-  display: inline-block;
-}
-
 .ActionMenuGroup__label.Divider {
   margin-left: 8px;
   margin-right: 8px;
@@ -247,4 +239,20 @@ span.Popover {
   opacity: 0.6;
 }
 
+.ActionMenu__TriggerWrapper {
+  display: inline-block;
+}
+.ActionMenu .ActionMenu__TriggerWrapper {
+  display: block;
+}
+
+.ActionMenu__ItemsWrapper:focus,
+.ActionMenu__OverlayWrapper:focus {
+  outline: none;
+}
+.ActionMenu__ItemsWrapper:focus-visible,
+.ActionMenu__OverlayWrapper:focus-visible {
+  outline: none;
+}
+
 /*# sourceMappingURL=index.css.map */