@servicetitan/design-system 13.4.0 → 14.0.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,4 +1,4 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import { PopoverProps } from '../Popover';
 import { ActionMenuGroup } from './ActionMenuGroup';
 import { ActionMenuItem } from './ActionMenuItem';
@@ -6,9 +6,15 @@ import { ActionMenuItem } from './ActionMenuItem';
  * ActionMenu properties
  */
 export declare type ActionMenuProps = PopoverProps;
-export interface ActionMenu extends FC<ActionMenuProps> {
+export interface ActionMenuContext {
+    itemsContainerRef: React.RefObject<HTMLElement>;
+    onClickOutside: PopoverProps['onClickOutside'];
+}
+interface ActionMenu extends FC<ActionMenuProps> {
     /** Subcomponents */
     Group: typeof ActionMenuGroup;
     Item: typeof ActionMenuItem;
 }
 export declare const ActionMenu: ActionMenu;
+export declare const ActionMenuContext: React.Context<ActionMenuContext[]>;
+export {};

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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","sourcesContent":["import React, { FC } from 'react';\nimport classnames from 'classnames';\n\nimport { Popover, PopoverProps } from '../Popover';\nimport { ActionMenuGroup } from './ActionMenuGroup';\nimport { ActionMenuItem } from './ActionMenuItem';\nimport { useArrowNav } from '../../hooks/useArrowNav';\nimport { useLatestEvent } from './useLatestEvent';\n\n/**\n * ActionMenu properties\n */\nexport type ActionMenuProps = PopoverProps;\nexport interface ActionMenuContext {\n\titemsContainerRef: React.RefObject<HTMLElement>;\n\tonClickOutside: PopoverProps['onClickOutside'];\n}\n\ninterface ActionMenu extends FC<ActionMenuProps> {\n\t/** Subcomponents */\n\tGroup: typeof ActionMenuGroup;\n\tItem: typeof ActionMenuItem;\n}\n\nexport const ActionMenu: ActionMenu = ({\n\tchildren,\n\tclassName,\n\tdirection = 'br',\n\tfocusTrapOptions,\n\tpadding = null, // Disable Popover's default padding\n\twrapperClassName,\n\twidth = 's',\n\t...rest\n}) => {\n\tconst menuContext = React.useContext(ActionMenuContext);\n\tconst isNested = () => menuContext?.length && menuContext?.length > 0;\n\n\tconst handleArrowKeys = (e: KeyboardEvent, data: any) => {\n\t\tconst cascadingItem = data.active?.classList?.contains(\n\t\t\t'ActionMenuItem--cascading'\n\t\t);\n\n\t\tif (e.key === 'ArrowLeft' || e.key === 'ArrowRight') data.disableOnce(); // Prevent focus move on left-right or when focus is not visible yet (no keyboard interaction)\n\t\tif (e.key === 'ArrowLeft' && isNested())\n\t\t\trest.onClickOutside?.(e as any); // Close ActionMenu, if nested\n\t\tif (e.key === 'ArrowRight' && cascadingItem) data.active?.click?.(); // Open nested\n\t};\n\n\tconst containerRef = useArrowNav({\n\t\tdisabled: !rest.open,\n\t\tonKeyDown: handleArrowKeys,\n\t});\n\n\tconst latestEvent = useLatestEvent();\n\n\tReact.useEffect(() => {\n\t\tconst el = containerRef.current;\n\n\t\tconst setFocus = () => {\n\t\t\tif (!latestEvent.current) return; // Latest event is undefined yet\n\t\t\tif (latestEvent.current?.type === 'keydown') {\n\t\t\t\tel.querySelector('button:not([disabled])')?.focus(); // Keyboard event ? set focus first item\n\t\t\t} else {\n\t\t\t\tel.tabIndex = 0;\n\t\t\t\tel.focus(); // Pointer event ? set focus wrapper\n\t\t\t\tel.addEventListener('blur', () =>\n\t\t\t\t\tel.removeAttribute('tabIndex')\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\n\t\tif (rest.open && el) Promise.resolve().then(setFocus);\n\t}, [rest.open]); // eslint-disable-line\n\n\treturn (\n\t\t<Popover\n\t\t\tclassName={classnames(className, 'ActionMenu__OverlayWrapper')}\n\t\t\tfocusTrapOptions={{\n\t\t\t\tautoFocus: false,\n\t\t\t\tautoFocusContainer: false,\n\t\t\t\tfocusLock: false,\n\t\t\t\trestoreFocus: true,\n\t\t\t\t...focusTrapOptions,\n\t\t\t}}\n\t\t\twrapperClassName={classnames(\n\t\t\t\twrapperClassName,\n\t\t\t\t'ActionMenu__TriggerWrapper'\n\t\t\t)}\n\t\t\tpopoverContentClassName=\"ActionMenu\"\n\t\t\tdirection={direction}\n\t\t\tpadding={padding}\n\t\t\tportal\n\t\t\twidth={width}\n\t\t\tdata-anvil-component=\"ActionMenu\"\n\t\t\t{...rest}\n\t\t>\n\t\t\t<ActionMenuContext.Provider\n\t\t\t\tvalue={menuContext.concat({\n\t\t\t\t\titemsContainerRef: containerRef,\n\t\t\t\t\tonClickOutside: rest?.onClickOutside,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<div className=\"ActionMenu__ItemsWrapper\" ref={containerRef}>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</ActionMenuContext.Provider>\n\t\t</Popover>\n\t);\n};\n\nActionMenu.Group = ActionMenuGroup;\nActionMenu.Item = ActionMenuItem;\n\nexport const ActionMenuContext = React.createContext<ActionMenuContext[]>([]);\n"]}

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

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    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,249 @@
+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',
+    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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","sourcesContent":["import React, { useEffect, useState } from 'react';\nimport {\n\tActionMenu,\n\tActionMenuContext,\n\tBodyText,\n\tButton,\n\tCard,\n\tIcon,\n\tTooltip,\n\tModal,\n\tDrawer,\n\tDialog,\n\tTakeover,\n\tPopover,\n\tuseStorybookFigmaAddon,\n} from '../../system';\n\nexport default {\n\ttitle: 'Components/ActionMenu',\n\tparameters: {\n\t\t...useStorybookFigmaAddon('32%3A1082'),\n\t},\n\tincludeStories: [\n\t\t'actionMenu',\n\t\t'testContextMenu',\n\t\t'testOverlayComponents',\n\t\t'testActionMenuOverflow',\n\t],\n};\n\nconst log = () => console.log('item clicked, closing');\n\nexport const Menu = (props: any) => {\n\tconst {\n\t\tdirection,\n\t\tonClose,\n\t\tonOpen,\n\t\ttrigger,\n\t\tportal = true,\n\t\t...rest\n\t} = props;\n\tconst [open, setOpen] = React.useState(rest.open || false);\n\tconst parentContext = React.useContext(ActionMenuContext)?.slice(-1)[0];\n\tconst parentMenuContainer = parentContext?.itemsContainerRef?.current;\n\tconst handleClickOutside = (e: any) => {\n\t\tif (portal) {\n\t\t\tsetOpen(false); // Close current menu\n\t\t\tif (e.key === 'ArrowLeft') return; // Close only one menu\n\t\t\tif (parentMenuContainer?.contains(e.target)) return;\n\t\t\tparentContext?.onClickOutside?.(e); // Close higher level menus\n\t\t} else {\n\t\t\tif (parentMenuContainer?.contains(e.target)) {\n\t\t\t\tconst nestedMenus = Array.from(\n\t\t\t\t\tparentMenuContainer?.querySelectorAll(\n\t\t\t\t\t\t'[data-anvil-component=ActionMenu]'\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t\t// Exclude event on non-portaled submenu\n\t\t\t\tif (!nestedMenus.some((el: any) => el.contains(e.target)))\n\t\t\t\t\treturn;\n\t\t\t\tsetOpen(false); // Close current menu\n\t\t\t\tif (e.key === 'ArrowLeft') return; // Close only one menu\n\t\t\t\tparentContext?.onClickOutside?.(e); // Close higher level menus\n\t\t\t}\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\topen ? onOpen?.() : onClose?.();\n\t}, [open]); // eslint-disable-line\n\n\treturn (\n\t\t<ActionMenu\n\t\t\t{...rest}\n\t\t\tdirection={direction || 'rb'}\n\t\t\topen={open}\n\t\t\tonClickOutside={handleClickOutside}\n\t\t\tportal={portal}\n\t\t\ttrigger={trigger?.({ onClick: () => setOpen(!open) })}\n\t\t/>\n\t);\n};\n\nexport const MenuItem = (props: any) => {\n\tconst parentContext = React.useContext(ActionMenuContext)?.slice(-1)[0];\n\tconst handleClick = (e: any) => {\n\t\tprops.onClick?.(e);\n\t\tif (props.cascading) return;\n\t\tparentContext?.onClickOutside?.(e);\n\t};\n\tconst handleExit = (e: React.KeyboardEvent) => {\n\t\tprops.onKeyDown?.(e);\n\t\tif (e.key === 'Escape' || e.key === 'Tab') {\n\t\t\tparentContext?.onClickOutside?.(e as any); // Close all the nested Menus\n\t\t\tif (e.shiftKey && e.key === 'Tab') e.preventDefault(); // To keep focus on trigger\n\t\t}\n\t};\n\n\treturn (\n\t\t<ActionMenu.Item\n\t\t\t{...props}\n\t\t\tonClick={handleClick}\n\t\t\tonKeyDown={handleExit}\n\t\t/>\n\t);\n};\n\nconst MenuItems = () => (\n\t<>\n\t\t<MenuItem onClick={log}>Item</MenuItem>\n\t\t<MenuItem disabled>Disabled</MenuItem>\n\t\t<Menu\n\t\t\tdirection=\"rb\"\n\t\t\ttrigger={(p: any) => (\n\t\t\t\t<MenuItem {...p} cascading>\n\t\t\t\t\tCascading\n\t\t\t\t</MenuItem>\n\t\t\t)}\n\t\t>\n\t\t\t<ContactItems />\n\t\t</Menu>\n\t\t<ActionMenu.Group>\n\t\t\t<MenuItem disabled>Disabled</MenuItem>\n\t\t\t<MenuItem onClick={log} icon=\"help\">\n\t\t\t\tIcon\n\t\t\t</MenuItem>\n\t\t\t<MenuItem onClick={log} icon=\"help\" disabled>\n\t\t\t\tIcon Disabled\n\t\t\t</MenuItem>\n\t\t</ActionMenu.Group>\n\t\t<ActionMenu.Group label=\"Group with Label\">\n\t\t\t<MenuItem onClick={log} icon=\"help\">\n\t\t\t\tIcon\n\t\t\t</MenuItem>\n\t\t\t<Menu\n\t\t\t\tdirection=\"rb\"\n\t\t\t\ttrigger={(p: any) => (\n\t\t\t\t\t<MenuItem {...p} cascading icon=\"help\" iconColor=\"red\">\n\t\t\t\t\t\tColored Icon Cascading Submenu\n\t\t\t\t\t</MenuItem>\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<ContactItems />\n\t\t\t</Menu>\n\t\t\t<MenuItem onClick={log}>\n\t\t\t\t<BodyText size=\"medium\" className=\"m-b-0-i\">\n\t\t\t\t\tDownload XLSX\n\t\t\t\t</BodyText>\n\t\t\t</MenuItem>\n\t\t</ActionMenu.Group>\n\t</>\n);\n\nconst ContactItems = () => (\n\t<>\n\t\t<ActionMenu.Group label=\"Text\">\n\t\t\t<MenuItem onClick={log} icon=\"phone_android\">\n\t\t\t\t<BodyText subdued size=\"xsmall\">\n\t\t\t\t\tMonica’s cell\n\t\t\t\t</BodyText>\n\t\t\t\t(555) 123-4567\n\t\t\t</MenuItem>\n\t\t</ActionMenu.Group>\n\t\t<ActionMenu.Group label=\"Call\">\n\t\t\t<MenuItem onClick={log} icon=\"phone\">\n\t\t\t\t<BodyText subdued size=\"xsmall\">\n\t\t\t\t\tHome\n\t\t\t\t</BodyText>\n\t\t\t\t(555) 123-4567\n\t\t\t</MenuItem>\n\t\t\t<MenuItem onClick={log} icon=\"phone_android\">\n\t\t\t\t<BodyText subdued size=\"xsmall\">\n\t\t\t\t\tMonica’s cell\n\t\t\t\t</BodyText>\n\t\t\t\t(555) 123-4567\n\t\t\t</MenuItem>\n\t\t</ActionMenu.Group>\n\t\t<ActionMenu.Group label=\"Email\">\n\t\t\t<MenuItem onClick={log} icon=\"email\">\n\t\t\t\t<BodyText subdued size=\"xsmall\">\n\t\t\t\t\tMonica's personal\n\t\t\t\t</BodyText>\n\t\t\t\tmonicadoe@gmail.com\n\t\t\t</MenuItem>\n\t\t\t<ActionMenu.Group>\n\t\t\t\t<Menu\n\t\t\t\t\tdirection=\"rb\"\n\t\t\t\t\ttrigger={(p: any) => (\n\t\t\t\t\t\t<MenuItem {...p} cascading>\n\t\t\t\t\t\t\tOne more menu\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<MenuItem onClick={log}>Item 1</MenuItem>\n\t\t\t\t\t<MenuItem onClick={log}>Item 2</MenuItem>\n\t\t\t\t\t<MenuItem onClick={log}>Item 3</MenuItem>\n\t\t\t\t</Menu>\n\t\t\t\t<Menu\n\t\t\t\t\tdirection=\"rb\"\n\t\t\t\t\ttrigger={(p: any) => (\n\t\t\t\t\t\t<MenuItem {...p} cascading>\n\t\t\t\t\t\t\tAnother menu\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<MenuItem onClick={log}>Item 4</MenuItem>\n\t\t\t\t\t<MenuItem onClick={log}>Item 5</MenuItem>\n\t\t\t\t\t<MenuItem onClick={log}>Item 6</MenuItem>\n\t\t\t\t</Menu>\n\t\t\t</ActionMenu.Group>\n\t\t</ActionMenu.Group>\n\t</>\n);\n\nexport const actionMenu = (args: any) => {\n\tconst [key, setKey]: [number, Function] = React.useState(0);\n\tconst refresh = () => setKey(key + 1);\n\n\treturn (\n\t\t<div key={key} className=\"p-4 ta-center\">\n\t\t\t{loremIpsum}\n\t\t\t<Menu\n\t\t\t\t{...args}\n\t\t\t\tclassName=\"classname-test\"\n\t\t\t\twrapperClassName=\"wrapper-classname-test\"\n\t\t\t\ttrigger={(props: any) => (\n\t\t\t\t\t<Button\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t\ticonName=\"more_vert\"\n\t\t\t\t\t\ticonPosition=\"right\"\n\t\t\t\t\t>\n\t\t\t\t\t\tAction Menu\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\t\t\t\tonOpen={() => console.log('onOpen fired')}\n\t\t\t\tonClose={() => console.log('onClose fired')}\n\t\t\t>\n\t\t\t\t<MenuItems />\n\t\t\t</Menu>\n\t\t\t{loremIpsum}\n\t\t\t<div className=\"m-x-8 ta-left\">\n\t\t\t\t<Button onClick={refresh}>Refresh</Button>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\nactionMenu.args = {\n\tsharp: false,\n\twidth: 's',\n\tdirection: 'bl',\n\topen: true,\n};\n\nexport const testContextMenu = (args: any) => {\n\tconst [open, setOpen] = useState(false);\n\tconst [position, setPosition] = useState({ x: 0, y: 0 });\n\n\tconst close = () => setOpen(false);\n\tconst handleEscape = (e: any) =>\n\t\t['Tab', 'Escape'].includes(e.key) && close();\n\n\tconst handleContextMenu = (e: any) => {\n\t\te.preventDefault();\n\t\te.persist();\n\t\tsetOpen(true);\n\t\tsetPosition({\n\t\t\tx: e.pageX,\n\t\t\ty: e.pageY,\n\t\t});\n\t};\n\n\tconst styles: React.CSSProperties = {\n\t\tposition: 'absolute',\n\t\twidth: 0,\n\t\theight: 0,\n\t\ttop: position.y,\n\t\tleft: position.x,\n\t};\n\n\treturn (\n\t\t<div className=\"p-8 ta-center ta-c cursor-default\">\n\t\t\t<Card\n\t\t\t\tonContextMenu={handleContextMenu}\n\t\t\t\tstyle={{ textAlign: 'center' }}\n\t\t\t>\n\t\t\t\t<BodyText>Right-click here to reveal context menu.</BodyText>\n\t\t\t</Card>\n\t\t\t<div style={styles}>\n\t\t\t\t<ActionMenu\n\t\t\t\t\t{...args}\n\t\t\t\t\topen={open}\n\t\t\t\t\tonClickOutside={close}\n\t\t\t\t\tonKeyDown={handleEscape}\n\t\t\t\t>\n\t\t\t\t\t<MenuItems />\n\t\t\t\t</ActionMenu>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\ntestContextMenu.args = {\n\tdirection: 'br',\n\twidth: 's',\n};\n\nexport const testOverlayComponents = (args: any) => {\n\tconst [modalOpen, setModalOpen] = useState(false);\n\tconst [drawerOpen, setDrawerOpen] = useState(false);\n\tconst [dialogOpen, setDialogOpen] = useState(false);\n\tconst [takeoverOpen, setTakeoverOpen] = useState(false);\n\tconst [popoverOpen, setPopoverOpen] = useState(false);\n\n\tconst [counter, setCounter] = useState(0);\n\n\tconst overlays = [\n\t\t{ name: 'Modal', fn: () => setModalOpen(!modalOpen) },\n\t\t{ name: 'Drawer', fn: () => setDrawerOpen(!drawerOpen) },\n\t\t{ name: 'Dialog', fn: () => setDialogOpen(!dialogOpen) },\n\t\t{ name: 'Takeover', fn: () => setTakeoverOpen(!takeoverOpen) },\n\t\t{\n\t\t\tname: 'Popover',\n\t\t\tfn: () => setPopoverOpen(!popoverOpen),\n\t\t\tskipFromButtons: true,\n\t\t},\n\t];\n\n\tconst CounterButton = () => (\n\t\t<Button\n\t\t\tclassName=\"m-x-1\"\n\t\t\ticonName=\"plus_one\"\n\t\t\tonClick={() => {\n\t\t\t\tsetCounter(counter + 1);\n\t\t\t\tconsole.log('counter:', counter);\n\t\t\t}}\n\t\t/>\n\t);\n\n\tconst SecondaryMenu = () => (\n\t\t<Menu\n\t\t\ttrigger={(props: any) => (\n\t\t\t\t<Button {...props}>\n\t\t\t\t\tAction Menu\n\t\t\t\t\t<Icon name=\"more_vert\" size=\"24\" className=\"m-l-2\" />\n\t\t\t\t</Button>\n\t\t\t)}\n\t\t>\n\t\t\t{['1', '2', '3'].map((i, ix) => (\n\t\t\t\t<MenuItem key={ix}>Item {i}</MenuItem>\n\t\t\t))}\n\t\t</Menu>\n\t);\n\n\treturn (\n\t\t<div>\n\t\t\t<BodyText className=\"m-y-2\">\n\t\t\t\tActionMenu to open Modal, Drawer, Dialog, Takeover, Popover,\n\t\t\t\tTooltip:\n\t\t\t</BodyText>\n\t\t\t<Menu\n\t\t\t\ttrigger={(props: any) => (\n\t\t\t\t\t<Button {...props}>\n\t\t\t\t\t\tAction Menu\n\t\t\t\t\t\t<Icon name=\"more_vert\" size=\"24\" className=\"m-l-2\" />\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\t\t\t\t{...args}\n\t\t\t>\n\t\t\t\t{overlays.map((i, ix) => (\n\t\t\t\t\t<MenuItem onClick={i.fn} key={ix}>\n\t\t\t\t\t\tOpen {i.name}\n\t\t\t\t\t</MenuItem>\n\t\t\t\t))}\n\t\t\t\t<MenuItem icon=\"help\">\n\t\t\t\t\t<Tooltip text=\"Tooltip Text\" el=\"div\" direction=\"r\">\n\t\t\t\t\t\tShow Tooltip\n\t\t\t\t\t</Tooltip>\n\t\t\t\t</MenuItem>\n\t\t\t</Menu>\n\t\t\t<BodyText className=\"m-y-2\">\n\t\t\t\tActionMenu placed inside Modal, Drawer, Dialog, Takeover,\n\t\t\t\tPopover:\n\t\t\t</BodyText>\n\t\t\t{overlays\n\t\t\t\t.filter((i) => i.skipFromButtons !== true)\n\t\t\t\t.map((i, ix) => (\n\t\t\t\t\t<div className=\"m-y-2\" key={ix}>\n\t\t\t\t\t\t<Button onClick={i.fn}>Open {i.name}</Button>\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t<Modal\n\t\t\t\ttitle=\"Modal\"\n\t\t\t\topen={modalOpen}\n\t\t\t\tclosable\n\t\t\t\tonClose={() => overlays[0].fn()}\n\t\t\t>\n\t\t\t\t<SecondaryMenu />\n\t\t\t\t<CounterButton />\n\t\t\t</Modal>\n\t\t\t<Drawer\n\t\t\t\theader=\"Drawer\"\n\t\t\t\tbackdrop\n\t\t\t\topen={drawerOpen}\n\t\t\t\tonClose={() => overlays[1].fn()}\n\t\t\t\tfooter={<Button onClick={overlays[1].fn}>Close Drawer</Button>}\n\t\t\t>\n\t\t\t\t<SecondaryMenu />\n\t\t\t\t<CounterButton />\n\t\t\t</Drawer>\n\t\t\t<Dialog\n\t\t\t\ttitle=\"Dialog\"\n\t\t\t\topen={dialogOpen}\n\t\t\t\tonClose={() => overlays[2].fn()}\n\t\t\t\tonPrimaryActionClick={overlays[2].fn}\n\t\t\t\tprimaryActionName=\"Close Dialog\"\n\t\t\t>\n\t\t\t\t<SecondaryMenu />\n\t\t\t\t<CounterButton />\n\t\t\t</Dialog>\n\t\t\t{takeoverOpen && (\n\t\t\t\t<Takeover title=\"Takeover\" onClose={() => overlays[3].fn()}>\n\t\t\t\t\t<SecondaryMenu />\n\t\t\t\t\t<CounterButton />\n\t\t\t\t</Takeover>\n\t\t\t)}\n\t\t\t<Popover\n\t\t\t\theader=\"Popover\"\n\t\t\t\topen={popoverOpen}\n\t\t\t\tonClickOutside={() => (popoverOpen ? overlays[4].fn() : null)}\n\t\t\t\tportal\n\t\t\t\ttrigger={<Button onClick={overlays[4].fn}>Open Popover</Button>}\n\t\t\t\tdirection=\"tr\"\n\t\t\t>\n\t\t\t\t<SecondaryMenu />\n\t\t\t\t<CounterButton />\n\t\t\t</Popover>\n\t\t</div>\n\t);\n};\ntestOverlayComponents.args = {\n\tsharp: false,\n\twidth: 's',\n\tdirection: 'bl',\n};\n\nexport const testActionMenuOverflow = (args: any) => {\n\treturn (\n\t\t<div style={{ width: '740px' }}>\n\t\t\t<Menu\n\t\t\t\t{...args}\n\t\t\t\tdirection=\"br\"\n\t\t\t\twidth=\"xs\"\n\t\t\t\tscrollHeight=\"256px\"\n\t\t\t\ttrigger={(p: any) => <Button {...p}>Action Menu</Button>}\n\t\t\t>\n\t\t\t\t<MenuItem>Item 1</MenuItem>\n\t\t\t\t<MenuItem disabled>Item 2 (disabled)</MenuItem>\n\t\t\t\t<MenuItem>Item 3</MenuItem>\n\t\t\t\t<MenuItem>Item 4</MenuItem>\n\t\t\t\t<MenuItem>Item 5</MenuItem>\n\t\t\t\t<Menu\n\t\t\t\t\tdirection=\"rb\"\n\t\t\t\t\ttrigger={(p: any) => (\n\t\t\t\t\t\t<MenuItem {...p} cascading className=\"bg-blue-100\">\n\t\t\t\t\t\t\tSubmenu 1\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<ContactItems />\n\t\t\t\t</Menu>\n\t\t\t\t<MenuItem>Item 6</MenuItem>\n\t\t\t</Menu>\n\t\t\t{loremIpsum}\n\t\t</div>\n\t);\n};\n\nconst loremIpsum = (\n\t<BodyText className=\"m-x-8 m-y-4 ta-left\">\n\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n\t\ttempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim\n\t\tveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea\n\t\tcommodo consequat. Duis aute irure dolor in reprehenderit in voluptate\n\t\tvelit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n\t\toccaecat cupidatat non proident, sunt in culpa qui officia deserunt\n\t\tmollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur\n\t\tadipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n\t\tmagna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\n\t\tlaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n\t\tin reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n\t\tpariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa\n\t\tqui officia deserunt mollit anim id est laborum.\n\t</BodyText>\n);\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ActionMenu.test.js","sourceRoot":"","sources":["../../../src/components/ActionMenu/ActionMenu.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC3B,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IAE/C,EAAE,CAAC,gDAAgD,EAAE,GAAG,EAAE;QACzD,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,MAAM,CACxC,oBAAC,UAAU,IAAC,IAAI;YACf,oBAAC,UAAU,CAAC,KAAK,IAChB,KAAK,EAAC,MAAM,mBACE,qBAAqB;gBAEnC,oBAAC,UAAU,CAAC,IAAI,IAAC,IAAI,EAAC,eAAe;oBACpC,oBAAC,QAAQ,IAAC,OAAO,QAAC,IAAI,EAAC,QAAQ,yBAEpB;qCAEM,CACA,CACP,CACb,CAAC;QAEF;;;WAGG;QACH,MAAM,gBAAgB,GAAG,SAAS,CAAC,aAAa,CAC/C,uCAAuC,CACvC,CAAC;QACF,MAAM,aAAa,GAAG,WAAW,CAAC,aAAa,CAC9C,uCAAuC,CACvC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,CAAC,QAAQ,EAAE,CAAC;QACpC,MAAM,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"ActionMenu.test.js","sourceRoot":"","sources":["../../../src/components/ActionMenu/ActionMenu.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC3B,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IAE/C,EAAE,CAAC,gDAAgD,EAAE,GAAG,EAAE;QACzD,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,MAAM,CACxC,oBAAC,UAAU,IAAC,IAAI;YACf,oBAAC,UAAU,CAAC,KAAK,IAChB,KAAK,EAAC,MAAM,mBACE,qBAAqB;gBAEnC,oBAAC,UAAU,CAAC,IAAI,IAAC,IAAI,EAAC,eAAe;oBACpC,oBAAC,QAAQ,IAAC,OAAO,QAAC,IAAI,EAAC,QAAQ,yBAEpB;qCAEM,CACA,CACP,CACb,CAAC;QAEF;;;WAGG;QACH,MAAM,gBAAgB,GAAG,SAAS,CAAC,aAAa,CAC/C,uCAAuC,CACvC,CAAC;QACF,MAAM,aAAa,GAAG,WAAW,CAAC,aAAa,CAC9C,uCAAuC,CACvC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,CAAC,QAAQ,EAAE,CAAC;QACpC,MAAM,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport { ActionMenu } from './ActionMenu';\nimport { BodyText } from '../BodyText';\n\ndescribe('ActionMenu', () => {\n\tbeforeEach(() => jest.spyOn(console, 'error'));\n\n\tit('should pass through data automation attributes', () => {\n\t\tconst { container, baseElement } = render(\n\t\t\t<ActionMenu open>\n\t\t\t\t<ActionMenu.Group\n\t\t\t\t\tlabel=\"Text\"\n\t\t\t\t\tdata-auto-sel=\"automation-selector\"\n\t\t\t\t>\n\t\t\t\t\t<ActionMenu.Item icon=\"phone_android\">\n\t\t\t\t\t\t<BodyText subdued size=\"xsmall\">\n\t\t\t\t\t\t\tMonica’s cell\n\t\t\t\t\t\t</BodyText>\n\t\t\t\t\t\t(555) 123-4567\n\t\t\t\t\t</ActionMenu.Item>\n\t\t\t\t</ActionMenu.Group>\n\t\t\t</ActionMenu>\n\t\t);\n\n\t\t/**\n\t\t * NOTE: Using \"baseElement\" instead of \"container\" because\n\t\t *       ActionMenu's children are rendered in a portal\n\t\t */\n\t\tconst nonPortalElement = container.querySelector(\n\t\t\t'[data-auto-sel=\"automation-selector\"]'\n\t\t);\n\t\tconst portalElement = baseElement.querySelector(\n\t\t\t'[data-auto-sel=\"automation-selector\"]'\n\t\t);\n\n\t\texpect(nonPortalElement).toBeNull();\n\t\texpect(portalElement).not.toBeNull();\n\t});\n});\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ActionMenuGroup.js","sourceRoot":"","sources":["../../../src/components/ActionMenu/ActionMenuGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAkBrC,MAAM,CAAC,MAAM,eAAe,GAA6B,CAAC,EAKzD,EAAE,EAAE;QALqD,EACzD,QAAQ,EACR,SAAS,EACT,KAAK,OAEL,EADG,KAAK,cAJiD,kCAKzD,CADQ;IACH,OAAA,CACL,2CAAK,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC,IAAM,KAAK;QAClE,oBAAC,OAAO,IACP,YAAY,EAAC,OAAO,EACpB,EAAE,EAAC,KAAK,EACR,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,EAC7B,SAAS,EAAE,UAAU,CACpB,KAAK,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,0BAA0B,CAC7D,IAEA,KAAK,CAAC,CAAC,CAAC,oBAAC,OAAO,IAAC,SAAS,EAAC,OAAO,IAAE,KAAK,CAAW,CAAC,CAAC,CAAC,IAAI,CACnD;QACT,QAAQ,CACJ,CACN,CAAA;CAAA,CAAC"}
+{"version":3,"file":"ActionMenuGroup.js","sourceRoot":"","sources":["../../../src/components/ActionMenu/ActionMenuGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAkBrC,MAAM,CAAC,MAAM,eAAe,GAA6B,CAAC,EAKzD,EAAE,EAAE;QALqD,EACzD,QAAQ,EACR,SAAS,EACT,KAAK,OAEL,EADG,KAAK,cAJiD,kCAKzD,CADQ;IACH,OAAA,CACL,2CAAK,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC,IAAM,KAAK;QAClE,oBAAC,OAAO,IACP,YAAY,EAAC,OAAO,EACpB,EAAE,EAAC,KAAK,EACR,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,EAC7B,SAAS,EAAE,UAAU,CACpB,KAAK,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,0BAA0B,CAC7D,IAEA,KAAK,CAAC,CAAC,CAAC,oBAAC,OAAO,IAAC,SAAS,EAAC,OAAO,IAAE,KAAK,CAAW,CAAC,CAAC,CAAC,IAAI,CACnD;QACT,QAAQ,CACJ,CACN,CAAA;CAAA,CAAC","sourcesContent":["import React, { FC } from 'react';\nimport classnames from 'classnames';\n\nimport { Divider } from '../Divider';\nimport { Eyebrow } from '../Eyebrow';\n\n/**\n * ActionMenu.Group properties\n */\nexport interface ActionMenuGroupPropsStrict {\n\t/** Adds one or more classnames for an element */\n\tclassName?: string;\n\n\t/** Adds a label for group of menu items */\n\tlabel?: string;\n}\n\nexport interface ActionMenuGroupProps extends ActionMenuGroupPropsStrict {\n\t/** Unstrict Props */\n\t[propName: string]: any;\n}\n\nexport const ActionMenuGroup: FC<ActionMenuGroupProps> = ({\n\tchildren,\n\tclassName,\n\tlabel,\n\t...props\n}) => (\n\t<div className={classnames('ActionMenuGroup', className)} {...props}>\n\t\t<Divider\n\t\t\talignContent=\"start\"\n\t\t\tel=\"div\"\n\t\t\tspacing={label ? 'half' : '1'}\n\t\t\tclassName={classnames(\n\t\t\t\tlabel ? 'ActionMenuGroup__label' : 'ActionMenuGroup__divider'\n\t\t\t)}\n\t\t>\n\t\t\t{label ? <Eyebrow className=\"m-r-1\">{label}</Eyebrow> : null}\n\t\t</Divider>\n\t\t{children}\n\t</div>\n);\n"]}

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","sourcesContent":["import React, { FC } from 'react';\nimport classnames from 'classnames';\nimport { Icon, IconPropsStrict } from '../Icon';\n\n/**\n * ActionMenu.Item properties\n */\nexport interface ActionMenuItemPropsStrict {\n\t/** Shows up cascading menu indicator (an arrow on the right side) */\n\tcascading?: boolean;\n\n\t/** Adds one or more classnames for an element */\n\tclassName?: string;\n\n\t/** Disabled item, non-interactive */\n\tdisabled?: boolean;\n\n\t/** Name of icon to render inside of item */\n\ticon?: IconPropsStrict['name'];\n\n\t/** Fill color of icon */\n\ticonColor?: string;\n}\n\nexport interface ActionMenuItemProps extends ActionMenuItemPropsStrict {\n\t/** Unstrict Props */\n\t[propName: string]: any;\n}\n\nexport const ActionMenuItem: FC<ActionMenuItemProps> = React.forwardRef(\n\t(\n\t\t{\n\t\t\tcascading = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tdisabled,\n\t\t\ticon: iconName,\n\t\t\ticonColor,\n\t\t\t...rest\n\t\t},\n\t\tref: React.RefObject<HTMLButtonElement>\n\t) => {\n\t\tconst newRef = React.useRef(null);\n\t\tconst itemRef = ref ? ref : newRef;\n\n\t\tconst ActionMenuItemClasses = classnames('ActionMenuItem', className, {\n\t\t\t'ActionMenuItem--disabled': disabled,\n\t\t\t'ActionMenuItem--cascading': cascading,\n\t\t});\n\n\t\treturn (\n\t\t\t<button\n\t\t\t\tclassName={ActionMenuItemClasses}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tonMouseEnter={() => itemRef.current?.focus()}\n\t\t\t\tref={itemRef}\n\t\t\t\trole=\"button\"\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{iconName ? (\n\t\t\t\t\t<span className=\"ActionMenuItem__icon\">\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tname={iconName}\n\t\t\t\t\t\t\tcolor={iconColor ?? 'currentColor'}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</span>\n\t\t\t\t) : null}\n\t\t\t\t<span className=\"ActionMenuItem__content\">{children}</span>\n\t\t\t\t{cascading ? (\n\t\t\t\t\t<span className=\"ActionMenuItem__icon\">\n\t\t\t\t\t\t<Icon name=\"chevron_right\" />\n\t\t\t\t\t</span>\n\t\t\t\t) : null}\n\t\t\t</button>\n\t\t);\n\t}\n);\n"]}