@octopusdeploy/design-system-components/dist/src/components/Menu/OverflowMenu.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.OverflowMenu = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const IconButton_1 = require("../IconButton");
const SimpleMenu_1 = require("./SimpleMenu");
const useMenuState_1 = require("./useMenuState");
const OverflowMenu = ({ menuItems, accessibleName }) => {
    const [onOpen, menuState, buttonAriaAttributes] = (0, useMenuState_1.useMenuState)();
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(IconButton_1.DeprecatedIconButton, { className: overflowButtonStyles, icon: "EllipsisVerticalIcon", ...buttonAriaAttributes, onClick: onOpen, accessibleName: accessibleName ?? "Overflow Menu Button" }), (0, jsx_runtime_1.jsx)(SimpleMenu_1.SimpleMenu, { menuState: menuState, items: menuItems, accessibleName: accessibleName ?? "Overflow Menu" })] }));
};
exports.OverflowMenu = OverflowMenu;
// Adding following style to make the new OverflowMenu has same style as the OverflowMenu in Portal,
// so that we do not introduce UI change when pulling the OverflowMenu into Design System.
// The Frontend Foundation team will look into the style of OverflowMenu.
const overflowButtonStyles = (0, css_1.css)({
    height: "2.25rem",
    width: "2.25rem",
    "&.MuiButtonBase-root": {
        margin: `0 ${design_system_tokens_1.space[6]}`,
    },
});