@octopusdeploy/design-system-components
Version:
The design systems component library.
59 lines (58 loc) • 3.77 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.MenuItemExternalLink = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const material_1 = require("@mui/material");
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 menuItemStyles_1 = require("../menuItemStyles");
exports.MenuItemExternalLink = (0, react_1.forwardRef)(({ href, label, shortDescription, onClick, autoFocus, compact, hideIcon }, ref) => {
// We can't use the default li component that MenuItem renders here, because the parent element (CustomMenu or MenuList) is not a ul
return (0, jsx_runtime_1.jsx)(material_1.MenuItem, { component: LinkWrapper, href: href, label: label, shortDescription: shortDescription, onClick: onClick, autoFocus: autoFocus, compact: compact, hideIcon: hideIcon, ref: ref, disableTouchRipple: true, disableRipple: true });
});
exports.MenuItemExternalLink.displayName = "MenuItemExternalLink";
const LinkWrapper = (0, react_1.forwardRef)(({ href, label, shortDescription, onClick, className, children, autoFocus, compact, hideIcon, ...other }, ref) => {
const classes = (0, css_1.cx)(className, menuItemLinkStyles, compact ? compactMenuItemStyles : nonCompactMenuItemStyles);
const focusRef = (0, react_1.useRef)(null);
const combinedRef = (0, material_1.useForkRef)(focusRef, ref);
(0, react_1.useEffect)(() => {
if (autoFocus) {
focusRef.current?.focus();
}
}, [autoFocus]);
const onClickHandler = (0, react_1.useCallback)(() => {
onClick?.();
}, [onClick]);
// Ideally we would wrap an anchor tag in an li like in this example: https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-links.html
// <li role="none"><a role="menuitem">My Link</a></li>
// But if we do that, we lose out on keyboard navigation support from material ui's MenuList component
// Instead, we want to render an anchor tag so that we get the right native browser link behaviours,
// but make it appear like a menuitem for the accessibility tree
return ((0, jsx_runtime_1.jsxs)("a", { "aria-disabled": undefined, target: "_blank", rel: "noopener noreferrer", role: "menuItem", onClick: onClickHandler, href: href, tabIndex: -1, className: classes, ...other, ref: combinedRef, children: [(0, jsx_runtime_1.jsxs)("div", { className: textContainerStyles, children: [label, shortDescription && (0, jsx_runtime_1.jsx)("span", { className: descriptionStyles, children: shortDescription })] }), !hideIcon && (0, jsx_runtime_1.jsx)(design_system_icons_1.ArrowUpRightFromSquareIcon, { size: "font-size" }), children] }));
});
LinkWrapper.displayName = "LinkWrapper";
const menuItemLinkStyles = (0, css_1.cx)(menuItemStyles_1.menuItemStyles, (0, css_1.css)({
[`&.${menuItemStyles_1.menuItemClasses.root}`]: {
color: design_system_tokens_1.themeTokens.color.text.link.default,
"&:hover": {
color: "inherit",
},
},
}));
const nonCompactMenuItemStyles = (0, css_1.css)({
[`&.${menuItemStyles_1.menuItemClasses.root}`]: { minHeight: design_system_tokens_1.space[48] },
});
const compactMenuItemStyles = (0, css_1.css)({
[`&.${menuItemStyles_1.menuItemClasses.root}`]: { minHeight: "auto" },
});
const textContainerStyles = (0, css_1.css)({
display: "flex",
flexDirection: "column",
marginRight: design_system_tokens_1.space[4],
});
const descriptionStyles = (0, css_1.css)({
font: design_system_tokens_1.text.body.regular.small,
color: design_system_tokens_1.themeTokens.color.text.secondary,
});