@mongodb-js/compass-components 1.32.1 → 1.32.2

package/lib/components/actions/action-glyph.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Icon } from '../leafygreen';
+import type { ItemActionButtonSize } from './constants';
+type IconProps = React.ComponentProps<typeof Icon>;
+type ActionGlyphProps = Omit<IconProps, 'size' | 'glyph'> & {
+    glyph?: React.ReactChild;
+    size?: ItemActionButtonSize;
+};
+export declare const ActionGlyph: ({ glyph, size, ...props }: ActionGlyphProps) => React.JSX.Element | null;
+export {};
+//# sourceMappingURL=action-glyph.d.ts.map

package/lib/components/actions/action-glyph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-glyph.d.ts","sourceRoot":"","sources":["../../../src/components/actions/action-glyph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAKxD,KAAK,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AACnD,KAAK,gBAAgB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG;IAC1D,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC;IACzB,IAAI,CAAC,EAAE,oBAAoB,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,WAAW,8BAA+B,gBAAgB,6BAUtE,CAAC"}

package/lib/components/actions/action-glyph.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionGlyph = void 0;
+const react_1 = __importDefault(require("react"));
+const leafygreen_1 = require("../leafygreen");
+const ActionGlyph = ({ glyph, size, ...props }) => {
+    if (typeof glyph === 'string') {
+        return react_1.default.createElement(leafygreen_1.Icon, { size: size, glyph: glyph, ...props });
+    }
+    if (react_1.default.isValidElement(glyph)) {
+        return glyph;
+    }
+    return null;
+};
+exports.ActionGlyph = ActionGlyph;
+//# sourceMappingURL=action-glyph.js.map

package/lib/components/actions/action-glyph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-glyph.js","sourceRoot":"","sources":["../../../src/components/actions/action-glyph.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,8CAAqC;AAY9B,MAAM,WAAW,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK,EAAoB,EAAE,EAAE;IACzE,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC7B,OAAO,8BAAC,iBAAI,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK,GAAI,CAAC;KACtD;IAED,IAAI,eAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;QAC/B,OAAO,KAAK,CAAC;KACd;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAVW,QAAA,WAAW,eAUtB"}

package/lib/components/actions/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const ItemActionButtonSize: {
+    readonly XSmall: "xsmall";
+    readonly Small: "small";
+    readonly Default: "default";
+};
+export type ItemActionButtonSize = typeof ItemActionButtonSize[keyof typeof ItemActionButtonSize];
+//# sourceMappingURL=constants.d.ts.map

package/lib/components/actions/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/actions/constants.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB;;;;CAIvB,CAAC;AAEX,MAAM,MAAM,oBAAoB,GAC9B,OAAO,oBAAoB,CAAC,MAAM,OAAO,oBAAoB,CAAC,CAAC"}

package/lib/components/actions/constants.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemActionButtonSize = void 0;
+exports.ItemActionButtonSize = {
+    XSmall: 'xsmall',
+    Small: 'small',
+    Default: 'default',
+};
+//# sourceMappingURL=constants.js.map

package/lib/components/actions/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/components/actions/constants.tsx"],"names":[],"mappings":";;;AAAa,QAAA,oBAAoB,GAAG;IAClC,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,SAAS;CACV,CAAC"}

package/lib/components/actions/dropdown-menu-button.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { ButtonProps } from '@leafygreen-ui/button';
+import type { RenderMode } from '@leafygreen-ui/popover';
+import { ItemActionButtonSize } from './constants';
+import { type MenuAction } from './item-action-menu';
+export type DropdownMenuButtonProps<Action extends string> = {
+    actions: MenuAction<Action>[];
+    onAction(actionName: Action): void;
+    renderMode?: RenderMode;
+    iconSize?: ItemActionButtonSize;
+    isVisible?: boolean;
+    activeAction?: Action;
+    'data-testid'?: string;
+    buttonText: string;
+    buttonProps: ButtonProps;
+    hideOnNarrow?: boolean;
+};
+export declare function DropdownMenuButton<Action extends string>({ isVisible, actions, onAction, renderMode, activeAction, buttonText, buttonProps, iconSize, 'data-testid': dataTestId, hideOnNarrow, }: DropdownMenuButtonProps<Action>): React.JSX.Element | null;
+//# sourceMappingURL=dropdown-menu-button.d.ts.map

package/lib/components/actions/dropdown-menu-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu-button.d.ts","sourceRoot":"","sources":["../../../src/components/actions/dropdown-menu-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAKzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAGnD,OAAO,EAAyB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAS5E,MAAM,MAAM,uBAAuB,CAAC,MAAM,SAAS,MAAM,IAAI;IAC3D,OAAO,EAAE,UAAU,CAAC,MAAM,CAAC,EAAE,CAAC;IAC9B,QAAQ,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,oBAAoB,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,WAAW,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,MAAM,SAAS,MAAM,EAAE,EACxD,SAAgB,EAChB,OAAO,EACP,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,UAAU,EACV,WAAW,EACX,QAAuC,EACvC,aAAa,EAAE,UAAU,EACzB,YAAmB,GACpB,EAAE,uBAAuB,CAAC,MAAM,CAAC,4BAmFjC"}

package/lib/components/actions/dropdown-menu-button.js

@@ -0,0 +1,75 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownMenuButton = void 0;
+const react_1 = __importStar(require("react"));
+const emotion_1 = require("@leafygreen-ui/emotion");
+const leafygreen_1 = require("../leafygreen");
+const workspace_container_1 = require("../workspace-container");
+const constants_1 = require("./constants");
+const utils_1 = require("./utils");
+const action_glyph_1 = require("./action-glyph");
+const item_action_menu_1 = require("./item-action-menu");
+const hiddenOnNarrowStyles = (0, emotion_1.css)({
+    [`@container ${workspace_container_1.WorkspaceContainer.toolbarContainerQueryName} (width < 900px)`]: {
+        display: 'none',
+    },
+});
+function DropdownMenuButton({ isVisible = true, actions, onAction, renderMode, activeAction, buttonText, buttonProps, iconSize = constants_1.ItemActionButtonSize.Default, 'data-testid': dataTestId, hideOnNarrow = true, }) {
+    // this ref is used by the Menu component to calculate the height and position
+    // of the menu, and by us to give back the focus to the trigger when the menu
+    // is closed (https://jira.mongodb.org/browse/PD-1674).
+    const menuTriggerRef = (0, react_1.useRef)(null);
+    const [isMenuOpen, setIsMenuOpen] = (0, react_1.useState)(false);
+    const onClick = (0, react_1.useCallback)((evt) => {
+        evt.stopPropagation();
+        if (evt.currentTarget.dataset.menuitem) {
+            setIsMenuOpen(false);
+            // Workaround for https://jira.mongodb.org/browse/PD-1674
+            menuTriggerRef.current?.focus();
+        }
+        onAction(evt.currentTarget.dataset.action);
+    }, [onAction]);
+    const shouldRender = isMenuOpen || (isVisible && actions.length > 0);
+    if (!shouldRender) {
+        return null;
+    }
+    return (react_1.default.createElement(leafygreen_1.Menu, { open: isMenuOpen, setOpen: setIsMenuOpen, justify: "start", refEl: menuTriggerRef, renderMode: renderMode, "data-testid": dataTestId, trigger: ({ onClick, children, }) => {
+            return (react_1.default.createElement(leafygreen_1.Button, { ...buttonProps, ref: menuTriggerRef, "data-testid": dataTestId ? `${dataTestId}-show-actions` : undefined, onClick: (evt) => {
+                    evt.stopPropagation();
+                    onClick && onClick(evt);
+                }, rightGlyph: react_1.default.createElement(leafygreen_1.Icon, { glyph: 'CaretDown' }), title: buttonText },
+                react_1.default.createElement("span", { className: hideOnNarrow ? hiddenOnNarrowStyles : undefined }, buttonText),
+                children));
+        } }, actions.map((menuAction, idx) => {
+        if ((0, item_action_menu_1.isSeparatorMenuAction)(menuAction)) {
+            return react_1.default.createElement(leafygreen_1.MenuSeparator, { key: `separator-${idx}` });
+        }
+        const { action, label, icon } = menuAction;
+        return (react_1.default.createElement(leafygreen_1.MenuItem, { active: activeAction === action, key: action, "data-testid": (0, utils_1.actionTestId)(dataTestId, action), "data-action": action, "data-menuitem": true, glyph: react_1.default.createElement(action_glyph_1.ActionGlyph, { glyph: icon, size: iconSize }), onClick: onClick }, label));
+    })));
+}
+exports.DropdownMenuButton = DropdownMenuButton;
+//# sourceMappingURL=dropdown-menu-button.js.map

package/lib/components/actions/dropdown-menu-button.js.map

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

package/lib/components/actions/item-action-button.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ItemComponentProps } from './types';
+export declare function ItemActionButton<Action extends string>({ action, icon, label, tooltip, iconSize, onClick, iconClassName, className, iconStyle, isDisabled, 'data-testid': dataTestId, }: ItemComponentProps<Action>): React.JSX.Element;
+//# sourceMappingURL=item-action-button.d.ts.map

package/lib/components/actions/item-action-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"item-action-button.d.ts","sourceRoot":"","sources":["../../../src/components/actions/item-action-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAUlD,wBAAgB,gBAAgB,CAAC,MAAM,SAAS,MAAM,EAAE,EACtD,MAAM,EACN,IAAY,EACZ,KAAK,EACL,OAAO,EACP,QAAuC,EACvC,OAAO,EACP,aAAa,EACb,SAAS,EACT,SAAS,EACT,UAAU,EACV,aAAa,EAAE,UAAU,GAC1B,EAAE,kBAAkB,CAAC,MAAM,CAAC,qBAgB5B"}

package/lib/components/actions/item-action-button.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemActionButton = void 0;
+const react_1 = __importDefault(require("react"));
+const emotion_1 = require("@leafygreen-ui/emotion");
+const tokens_1 = require("@leafygreen-ui/tokens");
+const constants_1 = require("./constants");
+const small_icon_button_1 = require("./small-icon-button");
+// TODO: Move to a parent component - or a flex gap
+const buttonStyle = (0, emotion_1.css)({
+    '&:not(:first-child)': {
+        marginLeft: tokens_1.spacing[100],
+    },
+});
+function ItemActionButton({ action, icon = react_1.default.createElement(react_1.default.Fragment, null), label, tooltip, iconSize = constants_1.ItemActionButtonSize.Default, onClick, iconClassName, className, iconStyle, isDisabled, 'data-testid': dataTestId, }) {
+    return (react_1.default.createElement(small_icon_button_1.SmallIconButton, { key: action, glyph: icon, label: label, title: !tooltip ? label : undefined, size: iconSize, "data-action": action, "data-testid": dataTestId, onClick: onClick, className: (0, emotion_1.cx)(buttonStyle, iconClassName, className), style: iconStyle, disabled: isDisabled }));
+}
+exports.ItemActionButton = ItemActionButton;
+//# sourceMappingURL=item-action-button.js.map

package/lib/components/actions/item-action-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item-action-button.js","sourceRoot":"","sources":["../../../src/components/actions/item-action-button.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,oDAAiD;AACjD,kDAAgD;AAEhD,2CAAmD;AAEnD,2DAAsD;AAEtD,mDAAmD;AACnD,MAAM,WAAW,GAAG,IAAA,aAAG,EAAC;IACtB,qBAAqB,EAAE;QACrB,UAAU,EAAE,gBAAO,CAAC,GAAG,CAAC;KACzB;CACF,CAAC,CAAC;AAEH,SAAgB,gBAAgB,CAAwB,EACtD,MAAM,EACN,IAAI,GAAG,6DAAK,EACZ,KAAK,EACL,OAAO,EACP,QAAQ,GAAG,gCAAoB,CAAC,OAAO,EACvC,OAAO,EACP,aAAa,EACb,SAAS,EACT,SAAS,EACT,UAAU,EACV,aAAa,EAAE,UAAU,GACE;IAC3B,OAAO,CACL,8BAAC,mCAAe,IACd,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,IAAI,EACX,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EACnC,IAAI,EAAE,QAAQ,iBACD,MAAM,iBACN,UAAU,EACvB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,IAAA,YAAE,EAAC,WAAW,EAAE,aAAa,EAAE,SAAS,CAAC,EACpD,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,UAAU,GACpB,CACH,CAAC;AACJ,CAAC;AA5BD,4CA4BC"}

package/lib/components/actions/item-action-controls.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { RenderMode } from '@leafygreen-ui/popover';
+import { ItemActionButtonSize } from './constants';
+import type { ItemAction, ItemSeparator } from './types';
+export type ItemActionControlsProps<Action extends string> = {
+    isVisible?: boolean;
+    actions: (ItemAction<Action> | ItemSeparator)[];
+    onAction(actionName: Action): void;
+    className?: string;
+    menuClassName?: string;
+    iconSize?: ItemActionButtonSize;
+    iconClassName?: string;
+    iconStyle?: React.CSSProperties;
+    collapseAfter?: number;
+    collapseToMenuThreshold?: number;
+    renderMode?: RenderMode;
+    'data-testid'?: string;
+};
+export declare function ItemActionControls<Action extends string>({ isVisible, actions, onAction, className, menuClassName, iconClassName, iconStyle, iconSize, renderMode, collapseAfter, collapseToMenuThreshold, 'data-testid': dataTestId, }: ItemActionControlsProps<Action>): React.JSX.Element | null;
+//# sourceMappingURL=item-action-controls.d.ts.map

package/lib/components/actions/item-action-controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"item-action-controls.d.ts","sourceRoot":"","sources":["../../../src/components/actions/item-action-controls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAGzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAiBzD,MAAM,MAAM,uBAAuB,CAAC,MAAM,SAAS,MAAM,IAAI;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,GAAG,aAAa,CAAC,EAAE,CAAC;IAChD,QAAQ,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,oBAAoB,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAEhC,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,MAAM,SAAS,MAAM,EAAE,EACxD,SAAgB,EAChB,OAAO,EACP,QAAQ,EACR,SAAS,EACT,aAAa,EACb,aAAa,EACb,SAAS,EACT,QAAuC,EACvC,UAAU,EACV,aAAiB,EACjB,uBAA2B,EAC3B,aAAa,EAAE,UAAU,GAC1B,EAAE,uBAAuB,CAAC,MAAM,CAAC,4BAoEjC"}

package/lib/components/actions/item-action-controls.js

@@ -0,0 +1,85 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemActionControls = void 0;
+const react_1 = __importStar(require("react"));
+const tokens_1 = require("@leafygreen-ui/tokens");
+const emotion_1 = require("@leafygreen-ui/emotion");
+const item_action_menu_1 = require("./item-action-menu");
+const constants_1 = require("./constants");
+const item_action_group_1 = require("./item-action-group");
+const actionControlsStyle = (0, emotion_1.css)({
+    flex: 'none',
+    marginLeft: 'auto',
+    alignItems: 'center',
+    display: 'flex',
+});
+// Action buttons are rendered 4px apart from each other. With this we keep the
+// same spacing also when action buttons are rendered alongside action menu
+// (happens when collapseAfter prop is specified)
+const actionMenuWithActionControlsStyles = (0, emotion_1.css)({
+    marginLeft: tokens_1.spacing[100],
+});
+function ItemActionControls({ isVisible = true, actions, onAction, className, menuClassName, iconClassName, iconStyle, iconSize = constants_1.ItemActionButtonSize.Default, renderMode, collapseAfter = 0, collapseToMenuThreshold = 2, 'data-testid': dataTestId, }) {
+    const sharedProps = (0, react_1.useMemo)(() => ({
+        isVisible,
+        onAction,
+        className: (0, emotion_1.cx)('item-action-controls', className),
+        iconClassName,
+        iconStyle,
+        iconSize,
+        'data-testid': dataTestId,
+    }), [
+        isVisible,
+        onAction,
+        className,
+        iconClassName,
+        iconStyle,
+        iconSize,
+        dataTestId,
+    ]);
+    const sharedMenuProps = (0, react_1.useMemo)(() => ({
+        menuClassName,
+        renderMode,
+    }), [menuClassName, renderMode]);
+    if (actions.length === 0) {
+        return null;
+    }
+    // When user wants to show a few actions and collapse the rest into a menu
+    if (collapseAfter > 0) {
+        const visibleActions = actions.slice(0, collapseAfter);
+        const collapsedActions = actions.slice(collapseAfter);
+        return (react_1.default.createElement("div", { className: actionControlsStyle },
+            react_1.default.createElement(item_action_group_1.ItemActionGroup, { actions: visibleActions, ...sharedProps }),
+            react_1.default.createElement(item_action_menu_1.ItemActionMenu, { actions: collapsedActions, ...sharedProps, ...sharedMenuProps, className: (0, emotion_1.cx)(actionMenuWithActionControlsStyles, sharedProps.className) })));
+    }
+    const shouldShowMenu = actions.length >= collapseToMenuThreshold;
+    if (shouldShowMenu) {
+        return (react_1.default.createElement(item_action_menu_1.ItemActionMenu, { actions: actions, ...sharedProps, ...sharedMenuProps }));
+    }
+    return react_1.default.createElement(item_action_group_1.ItemActionGroup, { actions: actions, ...sharedProps });
+}
+exports.ItemActionControls = ItemActionControls;
+//# sourceMappingURL=item-action-controls.js.map

package/lib/components/actions/item-action-controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item-action-controls.js","sourceRoot":"","sources":["../../../src/components/actions/item-action-controls.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuC;AACvC,kDAAgD;AAChD,oDAAiD;AAGjD,yDAAoD;AACpD,2CAAmD;AAEnD,2DAAsD;AAEtD,MAAM,mBAAmB,GAAG,IAAA,aAAG,EAAC;IAC9B,IAAI,EAAE,MAAM;IACZ,UAAU,EAAE,MAAM;IAClB,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE,MAAM;CAChB,CAAC,CAAC;AAEH,+EAA+E;AAC/E,2EAA2E;AAC3E,iDAAiD;AACjD,MAAM,kCAAkC,GAAG,IAAA,aAAG,EAAC;IAC7C,UAAU,EAAE,gBAAO,CAAC,GAAG,CAAC;CACzB,CAAC,CAAC;AAmBH,SAAgB,kBAAkB,CAAwB,EACxD,SAAS,GAAG,IAAI,EAChB,OAAO,EACP,QAAQ,EACR,SAAS,EACT,aAAa,EACb,aAAa,EACb,SAAS,EACT,QAAQ,GAAG,gCAAoB,CAAC,OAAO,EACvC,UAAU,EACV,aAAa,GAAG,CAAC,EACjB,uBAAuB,GAAG,CAAC,EAC3B,aAAa,EAAE,UAAU,GACO;IAChC,MAAM,WAAW,GAAG,IAAA,eAAO,EACzB,GAAG,EAAE,CAAC,CAAC;QACL,SAAS;QACT,QAAQ;QACR,SAAS,EAAE,IAAA,YAAE,EAAC,sBAAsB,EAAE,SAAS,CAAC;QAChD,aAAa;QACb,SAAS;QACT,QAAQ;QACR,aAAa,EAAE,UAAU;KAC1B,CAAC,EACF;QACE,SAAS;QACT,QAAQ;QACR,SAAS;QACT,aAAa;QACb,SAAS;QACT,QAAQ;QACR,UAAU;KACX,CACF,CAAC;IACF,MAAM,eAAe,GAAG,IAAA,eAAO,EAC7B,GAAG,EAAE,CAAC,CAAC;QACL,aAAa;QACb,UAAU;KACX,CAAC,EACF,CAAC,aAAa,EAAE,UAAU,CAAC,CAC5B,CAAC;IACF,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;QACxB,OAAO,IAAI,CAAC;KACb;IAED,0EAA0E;IAC1E,IAAI,aAAa,GAAG,CAAC,EAAE;QACrB,MAAM,cAAc,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC;QACvD,MAAM,gBAAgB,GAAG,OAAO,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;QACtD,OAAO,CACL,uCAAK,SAAS,EAAE,mBAAmB;YACjC,8BAAC,mCAAe,IACd,OAAO,EAAE,cAAc,KACnB,WAAW,GACE;YACnB,8BAAC,iCAAc,IACb,OAAO,EAAE,gBAAgB,KACrB,WAAW,KACX,eAAe,EACnB,SAAS,EAAE,IAAA,YAAE,EACX,kCAAkC,EAClC,WAAW,CAAC,SAAS,CACtB,GACe,CACd,CACP,CAAC;KACH;IAED,MAAM,cAAc,GAAG,OAAO,CAAC,MAAM,IAAI,uBAAuB,CAAC;IAEjE,IAAI,cAAc,EAAE;QAClB,OAAO,CACL,8BAAC,iCAAc,IACb,OAAO,EAAE,OAAO,KACZ,WAAW,KACX,eAAe,GACH,CACnB,CAAC;KACH;IAED,OAAO,8BAAC,mCAAe,IAAC,OAAO,EAAE,OAAO,KAAM,WAAW,GAAoB,CAAC;AAChF,CAAC;AAjFD,gDAiFC"}

package/lib/components/actions/item-action-group.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Tooltip } from '../leafygreen';
+import { ItemActionButtonSize } from './constants';
+import type { ItemAction, ItemSeparator } from './types';
+export type GroupedItemAction<Action extends string> = ItemAction<Action> & {
+    tooltipProps?: Parameters<typeof Tooltip>;
+};
+export type ItemActionGroupProps<Action extends string> = {
+    actions: (GroupedItemAction<Action> | ItemSeparator)[];
+    onAction(actionName: Action): void;
+    className?: string;
+    iconClassName?: string;
+    iconStyle?: React.CSSProperties;
+    iconSize?: ItemActionButtonSize;
+    isVisible?: boolean;
+    'data-testid'?: string;
+};
+export declare function ItemActionGroup<Action extends string>({ actions, onAction, className, iconClassName, iconStyle, iconSize, isVisible, 'data-testid': dataTestId, }: ItemActionGroupProps<Action>): React.JSX.Element | null;
+//# sourceMappingURL=item-action-group.d.ts.map

package/lib/components/actions/item-action-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"item-action-group.d.ts","sourceRoot":"","sources":["../../../src/components/actions/item-action-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAI3C,OAAO,EAAiB,OAAO,EAAE,MAAM,eAAe,CAAC;AAEvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAKzD,MAAM,MAAM,iBAAiB,CAAC,MAAM,SAAS,MAAM,IAAI,UAAU,CAAC,MAAM,CAAC,GAAG;IAC1E,YAAY,CAAC,EAAE,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;CAC3C,CAAC;AAgBF,MAAM,MAAM,oBAAoB,CAAC,MAAM,SAAS,MAAM,IAAI;IACxD,OAAO,EAAE,CAAC,iBAAiB,CAAC,MAAM,CAAC,GAAG,aAAa,CAAC,EAAE,CAAC;IACvD,QAAQ,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC,QAAQ,CAAC,EAAE,oBAAoB,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,eAAe,CAAC,MAAM,SAAS,MAAM,EAAE,EACrD,OAAO,EACP,QAAQ,EACR,SAAS,EACT,aAAa,EACb,SAAS,EACT,QAAuC,EACvC,SAAgB,EAChB,aAAa,EAAE,UAAU,GAC1B,EAAE,oBAAoB,CAAC,MAAM,CAAC,4BAgE9B"}

package/lib/components/actions/item-action-group.js

@@ -0,0 +1,69 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemActionGroup = void 0;
+const react_1 = __importStar(require("react"));
+const emotion_1 = require("@leafygreen-ui/emotion");
+const tokens_1 = require("@leafygreen-ui/tokens");
+const leafygreen_1 = require("../leafygreen");
+const constants_1 = require("./constants");
+const item_action_menu_1 = require("./item-action-menu");
+const item_action_button_1 = require("./item-action-button");
+const utils_1 = require("./utils");
+const containerStyle = (0, emotion_1.css)({
+    flex: 'none',
+    marginLeft: 'auto',
+    alignItems: 'center',
+    display: 'flex',
+});
+// TODO: Move to a parent component - or a flex gap
+const actionGroupButtonStyle = (0, emotion_1.css)({
+    '&:not(:first-child)': {
+        marginLeft: tokens_1.spacing[100],
+    },
+});
+function ItemActionGroup({ actions, onAction, className, iconClassName, iconStyle, iconSize = constants_1.ItemActionButtonSize.Default, isVisible = true, 'data-testid': dataTestId, }) {
+    const onClick = (0, react_1.useCallback)((evt) => {
+        evt.stopPropagation();
+        onAction(evt.currentTarget.dataset.action);
+    }, [onAction]);
+    const shouldRender = isVisible && actions.length > 0;
+    if (!shouldRender) {
+        return null;
+    }
+    return (react_1.default.createElement("div", { className: (0, emotion_1.cx)(containerStyle, className), "data-testid": dataTestId }, actions.map((menuItem, idx) => {
+        if ((0, item_action_menu_1.isSeparatorMenuAction)(menuItem)) {
+            return react_1.default.createElement(leafygreen_1.MenuSeparator, { key: `separator-${idx}` });
+        }
+        const { expandedAs: ItemComponent = item_action_button_1.ItemActionButton, tooltip, tooltipProps, ...itemProps } = menuItem;
+        const item = (react_1.default.createElement(ItemComponent, { key: itemProps.action, ...itemProps, iconSize: iconSize, iconStyle: iconStyle, iconClassName: iconClassName, onClick: onClick, "data-testid": (0, utils_1.actionTestId)(dataTestId, itemProps.action) }));
+        if (tooltip) {
+            return (react_1.default.createElement(leafygreen_1.Tooltip, { key: itemProps.action, ...tooltipProps, trigger: react_1.default.createElement("div", { className: actionGroupButtonStyle, style: { display: 'inherit' } }, item) }, tooltip));
+        }
+        return item;
+    })));
+}
+exports.ItemActionGroup = ItemActionGroup;
+//# sourceMappingURL=item-action-group.js.map

package/lib/components/actions/item-action-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item-action-group.js","sourceRoot":"","sources":["../../../src/components/actions/item-action-group.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA2C;AAC3C,oDAAiD;AACjD,kDAAgD;AAEhD,8CAAuD;AAEvD,2CAAmD;AAEnD,yDAA2D;AAC3D,6DAAwD;AACxD,mCAAuC;AAMvC,MAAM,cAAc,GAAG,IAAA,aAAG,EAAC;IACzB,IAAI,EAAE,MAAM;IACZ,UAAU,EAAE,MAAM;IAClB,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE,MAAM;CAChB,CAAC,CAAC;AAEH,mDAAmD;AACnD,MAAM,sBAAsB,GAAG,IAAA,aAAG,EAAC;IACjC,qBAAqB,EAAE;QACrB,UAAU,EAAE,gBAAO,CAAC,GAAG,CAAC;KACzB;CACF,CAAC,CAAC;AAaH,SAAgB,eAAe,CAAwB,EACrD,OAAO,EACP,QAAQ,EACR,SAAS,EACT,aAAa,EACb,SAAS,EACT,QAAQ,GAAG,gCAAoB,CAAC,OAAO,EACvC,SAAS,GAAG,IAAI,EAChB,aAAa,EAAE,UAAU,GACI;IAC7B,MAAM,OAAO,GAAG,IAAA,mBAAW,EACzB,CAAC,GAAG,EAAE,EAAE;QACN,GAAG,CAAC,eAAe,EAAE,CAAC;QACtB,QAAQ,CAAC,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAC7C,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,YAAY,GAAG,SAAS,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;IAErD,IAAI,CAAC,YAAY,EAAE;QACjB,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,uCAAK,SAAS,EAAE,IAAA,YAAE,EAAC,cAAc,EAAE,SAAS,CAAC,iBAAe,UAAU,IACnE,OAAO,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,GAAG,EAAE,EAAE;QAC7B,IAAI,IAAA,wCAAqB,EAAC,QAAQ,CAAC,EAAE;YACnC,OAAO,8BAAC,0BAAa,IAAC,GAAG,EAAE,aAAa,GAAG,EAAE,GAAI,CAAC;SACnD;QAED,MAAM,EACJ,UAAU,EAAE,aAAa,GAAG,qCAAgB,EAC5C,OAAO,EACP,YAAY,EACZ,GAAG,SAAS,EACb,GAAG,QAAQ,CAAC;QAEb,MAAM,IAAI,GAAG,CACX,8BAAC,aAAa,IACZ,GAAG,EAAE,SAAS,CAAC,MAAM,KACjB,SAAS,EACb,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,iBACH,IAAA,oBAAY,EAAS,UAAU,EAAE,SAAS,CAAC,MAAM,CAAC,GAC/D,CACH,CAAC;QAEF,IAAI,OAAO,EAAE;YACX,OAAO,CACL,8BAAC,oBAAO,IACN,GAAG,EAAE,SAAS,CAAC,MAAM,KACjB,YAAY,EAChB,OAAO,EACL,uCACE,SAAS,EAAE,sBAAsB,EACjC,KAAK,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,IAE5B,IAAI,CACD,IAGP,OAAO,CACA,CACX,CAAC;SACH;QAED,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,CACE,CACP,CAAC;AACJ,CAAC;AAzED,0CAyEC"}

package/lib/components/actions/item-action-menu.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { RenderMode } from '@leafygreen-ui/popover';
+import { ItemActionButtonSize } from './constants';
+import type { ItemBase, ItemSeparator } from './types';
+export type MenuAction<Action extends string> = ItemBase<Action> | ItemSeparator;
+export declare function isSeparatorMenuAction(value: unknown): value is ItemSeparator;
+export type ItemActionMenuProps<Action extends string> = {
+    actions: MenuAction<Action>[];
+    onAction(actionName: Action): void;
+    className?: string;
+    menuClassName?: string;
+    renderMode?: RenderMode;
+    iconClassName?: string;
+    iconStyle?: React.CSSProperties;
+    iconSize?: ItemActionButtonSize;
+    isVisible?: boolean;
+    'data-testid'?: string;
+};
+export declare function ItemActionMenu<Action extends string>({ isVisible, actions, onAction, className, menuClassName, renderMode, iconClassName, iconStyle, iconSize, 'data-testid': dataTestId, }: ItemActionMenuProps<Action>): React.JSX.Element | null;
+//# sourceMappingURL=item-action-menu.d.ts.map

package/lib/components/actions/item-action-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"item-action-menu.d.ts","sourceRoot":"","sources":["../../../src/components/actions/item-action-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAG7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAIzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAEnD,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIvD,MAAM,MAAM,UAAU,CAAC,MAAM,SAAS,MAAM,IACxC,QAAQ,CAAC,MAAM,CAAC,GAChB,aAAa,CAAC;AAElB,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,aAAa,CAO5E;AAgBD,MAAM,MAAM,mBAAmB,CAAC,MAAM,SAAS,MAAM,IAAI;IACvD,OAAO,EAAE,UAAU,CAAC,MAAM,CAAC,EAAE,CAAC;IAC9B,QAAQ,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAEnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC,QAAQ,CAAC,EAAE,oBAAoB,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,cAAc,CAAC,MAAM,SAAS,MAAM,EAAE,EACpD,SAAgB,EAChB,OAAO,EACP,QAAQ,EACR,SAAS,EACT,aAAa,EACb,UAAU,EACV,aAAa,EACb,SAAS,EACT,QAAuC,EACvC,aAAa,EAAE,UAAU,GAC1B,EAAE,mBAAmB,CAAC,MAAM,CAAC,4BAkG7B"}

package/lib/components/actions/item-action-menu.js

@@ -0,0 +1,89 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemActionMenu = exports.isSeparatorMenuAction = void 0;
+const react_1 = __importStar(require("react"));
+const emotion_1 = require("@leafygreen-ui/emotion");
+const tokens_1 = require("@leafygreen-ui/tokens");
+const leafygreen_1 = require("../leafygreen");
+const constants_1 = require("./constants");
+const action_glyph_1 = require("./action-glyph");
+const small_icon_button_1 = require("./small-icon-button");
+const utils_1 = require("./utils");
+function isSeparatorMenuAction(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        'separator' in value &&
+        value.separator === true);
+}
+exports.isSeparatorMenuAction = isSeparatorMenuAction;
+const containerStyle = (0, emotion_1.css)({
+    flex: 'none',
+    marginLeft: 'auto',
+    alignItems: 'center',
+    display: 'flex',
+});
+// TODO: Move to a parent component - or a flex gap
+const buttonStyle = (0, emotion_1.css)({
+    '&:not(:first-child)': {
+        marginLeft: tokens_1.spacing[100],
+    },
+});
+function ItemActionMenu({ isVisible = true, actions, onAction, className, menuClassName, renderMode, iconClassName, iconStyle, iconSize = constants_1.ItemActionButtonSize.Default, 'data-testid': dataTestId, }) {
+    // this ref is used by the Menu component to calculate the height and position
+    // of the menu, and by us to give back the focus to the trigger when the menu
+    // is closed (https://jira.mongodb.org/browse/PD-1674).
+    const menuTriggerRef = (0, react_1.useRef)(null);
+    const [isMenuOpen, setIsMenuOpen] = (0, react_1.useState)(false);
+    const onClick = (0, react_1.useCallback)((evt) => {
+        evt.stopPropagation();
+        if (evt.currentTarget.dataset.menuitem) {
+            setIsMenuOpen(false);
+            // Workaround for https://jira.mongodb.org/browse/PD-1674
+            menuTriggerRef.current?.focus();
+        }
+        onAction(evt.currentTarget.dataset.action);
+    }, [onAction]);
+    const shouldRender = isMenuOpen || (isVisible && actions.length > 0);
+    if (!shouldRender) {
+        return null;
+    }
+    // TODO: Remove the wrapping div
+    return (react_1.default.createElement("div", { className: (0, emotion_1.cx)(containerStyle, className) },
+        react_1.default.createElement(leafygreen_1.Menu, { className: menuClassName, open: isMenuOpen, setOpen: setIsMenuOpen, refEl: menuTriggerRef, renderMode: renderMode, "data-testid": dataTestId, trigger: ({ onClick, children, }) => {
+                return (react_1.default.createElement(small_icon_button_1.SmallIconButton, { ref: menuTriggerRef, size: iconSize, glyph: "Ellipsis", label: "Show actions", title: "Show actions", "data-testid": dataTestId ? `${dataTestId}-show-actions` : undefined, onClick: (evt) => {
+                        evt.stopPropagation();
+                        onClick && onClick(evt);
+                    }, className: (0, emotion_1.cx)(buttonStyle, iconClassName), style: iconStyle }, children));
+            } }, actions.map((menuAction, idx) => {
+            if (isSeparatorMenuAction(menuAction)) {
+                return react_1.default.createElement(leafygreen_1.MenuSeparator, { key: `separator-${idx}` });
+            }
+            const { action, label, icon, variant, isDisabled, disabledDescription, } = menuAction;
+            return (react_1.default.createElement(leafygreen_1.MenuItem, { key: action, "data-testid": (0, utils_1.actionTestId)(dataTestId, action), "data-action": action, "data-menuitem": true, glyph: react_1.default.createElement(action_glyph_1.ActionGlyph, { glyph: icon, size: iconSize }), onClick: onClick, variant: variant || 'default', disabled: isDisabled, description: isDisabled ? disabledDescription : '' }, label));
+        }))));
+}
+exports.ItemActionMenu = ItemActionMenu;
+//# sourceMappingURL=item-action-menu.js.map

package/lib/components/actions/item-action-menu.js.map

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

package/lib/components/actions/small-icon-button.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ItemActionButtonSize } from './constants';
+export type SmallIconButtonProps = {
+    glyph: React.ReactChild;
+    label: string;
+    title?: string;
+    size: ItemActionButtonSize;
+    onClick(evt: React.MouseEvent<HTMLButtonElement>): void;
+} & Omit<React.HTMLProps<HTMLButtonElement>, 'size'>;
+export declare const SmallIconButton: React.ForwardRefExoticComponent<Omit<SmallIconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=small-icon-button.d.ts.map

package/lib/components/actions/small-icon-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"small-icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/actions/small-icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAM1C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AA2BxD,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,oBAAoB,CAAC;IAC3B,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAAC;CACzD,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,CAAC;AAErD,eAAO,MAAM,eAAe,6GAyB1B,CAAC"}