@octopusdeploy/design-system-components
Version:
The design systems component library.
37 lines (36 loc) • 2.04 kB
JavaScript
;
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 react_1 = require("react");
const IconButton_1 = require("../IconButton");
const SimpleMenu_1 = require("./SimpleMenu");
const useMenuState_1 = require("./useMenuState");
const OverflowMenu = ({ menuItems, accessibleName, stopTriggerClickPropagation }) => {
const [onOpen, menuState, buttonAriaAttributes] = (0, useMenuState_1.useMenuState)();
const onTriggerClick = (0, react_1.useCallback)((event) => {
if (stopTriggerClickPropagation) {
event.preventDefault();
event.stopPropagation();
}
onOpen(event);
}, [onOpen, stopTriggerClickPropagation]);
// Render nothing when there are no visible items, rather than showing a trigger that opens an empty menu.
if (!menuItems.some((item) => item.isVisible ?? true)) {
return null;
}
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: onTriggerClick, 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]}`,
},
});