@octopusdeploy/design-system-components
Version:
The design systems component library.
34 lines (33 loc) • 2 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.LinksMenu = LinksMenu;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_icons_1 = require("@octopusdeploy/design-system-icons");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const react_1 = require("react");
const Menu_1 = require("../Menu");
function LinksMenu(props) {
const [openMenu, menuState, buttonAriaAttributes] = (0, Menu_1.useMenuState)();
// TODO: Pass a better accessible name in
const accessibleName = "links";
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(LinksMenuButton, { onClick: openMenu, label: props.label, className: props.className, ariaAttributes: buttonAriaAttributes }), (0, jsx_runtime_1.jsx)(Menu_1.SimpleMenu, { menuState: menuState, items: props.items.map(convertMenuNodeToSimpleMenuItem), accessibleName: accessibleName })] }));
}
function convertMenuNodeToSimpleMenuItem(menuNode) {
return { type: "internal-link", path: menuNode.url, label: menuNode.text, showAsActive: menuNode.exact ? "if path matches exactly" : "if path partially matches" };
}
function LinksMenuButton({ label, onClick, className, ariaAttributes }) {
const onClickCallback = (0, react_1.useCallback)((event) => {
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
if (event.currentTarget.contains(event.target)) {
event.preventDefault();
onClick(event);
}
}, [onClick]);
return ((0, jsx_runtime_1.jsxs)("a", { onClick: onClickCallback, href: "#", className: className, ...ariaAttributes, children: [(0, jsx_runtime_1.jsx)("span", { className: styles.label, children: label }), (0, jsx_runtime_1.jsx)(design_system_icons_1.CaretDownIcon, { size: 16 })] }));
}
const styles = {
label: (0, css_1.css)({
marginRight: design_system_tokens_1.space[4],
}),
};