@octopusdeploy/design-system-components
Version:
The design systems component library.
133 lines (132 loc) • 9.04 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.SimpleMenuItems = exports.dividerMenuItem = 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 type_utils_1 = require("@octopusdeploy/type-utils");
const react_1 = require("react");
const noOp_1 = require("../../utils/noOp");
const MenuItemButton_1 = require("./MenuItemButton/MenuItemButton");
const MenuItemDownloadLink_1 = require("./MenuItemDownloadLink/MenuItemDownloadLink");
const MenuItemExternalLink_1 = require("./MenuItemExternalLink/MenuItemExternalLink");
const MenuItemInformation_1 = require("./MenuItemInformation/MenuItemInformation");
const MenuItemInternalLink_1 = require("./MenuItemInternalLink/MenuItemInternalLink");
const MenuItemToggle_1 = require("./MenuItemToggle/MenuItemToggle");
const NestedMenu_1 = require("./NestedMenu/NestedMenu");
exports.dividerMenuItem = { type: "divider" };
// The forwardRef here is not important, but needed to prevent console errors that would otherwise say a ref hasn't been appropriately forwarded.
// This requirement has been removed in later versions of material-ui (v5 onwards).
// See https://github.com/mui-org/material-ui/pull/25691/files#diff-ad4b8459eb1cd3c5e6882eb705e3e341e551bd7bf4ab9a6941ef12017eb1cb06L177-L188
exports.SimpleMenuItems = (0, react_1.forwardRef)(({ autoFocus, onClose, items, compact = false }, ref) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: items.map((item, index) => {
const key = item.type === "information" ? (item.key ?? index) : item.type === "divider" ? index : item.label;
if (item.isVisible ?? true) {
return (0, jsx_runtime_1.jsx)(SimpleMenuItemComponent, { item: item, onClose: onClose ?? noOp_1.noOp, autoFocus: index === 0 && Boolean(autoFocus) && (item.autoFocus ?? true), compact: compact }, key);
}
}) })));
exports.SimpleMenuItems.displayName = "SimpleMenuItems";
function SimpleMenuItemComponent({ item, autoFocus, onClose, compact }) {
switch (item.type) {
case "button":
return (0, jsx_runtime_1.jsx)(SimpleMenuItemButton, { item: item, onClose: onClose, autoFocus: autoFocus, compact: compact });
case "icon-button":
return (0, jsx_runtime_1.jsx)(SimpleMenuItemIconButton, { item: item, onClose: onClose, autoFocus: autoFocus, compact: compact });
case "internal-link":
return (0, jsx_runtime_1.jsx)(SimpleMenuItemInternalLink, { item: item, onClose: onClose, autoFocus: autoFocus, size: compact ? "compact" : "default" });
case "external-link":
return (0, jsx_runtime_1.jsx)(SimpleMenuItemExternalLink, { item: item, onClose: onClose, autoFocus: autoFocus, compact: compact });
case "download-link":
return (0, jsx_runtime_1.jsx)(SimpleMenuItemDownloadLink, { item: item, onClose: onClose, autoFocus: autoFocus, compact: compact });
case "nested-menu":
return (0, jsx_runtime_1.jsx)(NestedMenuItemsComponent, { item: item, onClose: onClose, autoFocus: autoFocus, compact: compact });
case "toggle":
return (0, jsx_runtime_1.jsx)(ToggleMenuItemComponent, { item: item, autoFocus: autoFocus, compact: compact });
case "information":
return (0, jsx_runtime_1.jsx)(InformationMenuItemComponent, { item: item, compact: compact });
case "divider":
return (0, jsx_runtime_1.jsx)(material_1.Divider, {});
case "disabled":
return (0, jsx_runtime_1.jsx)(DisabledMenuItemComponent, { item: item, compact: compact });
default:
(0, type_utils_1.exhaustiveCheck)(item, "Unexpected simple menu item type");
}
}
function SimpleMenuItemButton({ item, onClose, autoFocus, compact }) {
const itemOnClick = item.onClick;
const onClick = (0, react_1.useCallback)(() => {
itemOnClick();
onClose();
}, [itemOnClick, onClose]);
return ((0, jsx_runtime_1.jsx)(MenuItemButton_1.MenuItemButton, { onClick: onClick, autoFocus: autoFocus, compact: compact, title: item.title, isSelected: item.isSelected, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(styles.menuItemContainer, { [styles.destructive]: item.isDestructive }), children: [item.label, item.description && (0, jsx_runtime_1.jsx)("span", { className: styles.description, children: item.description })] }) }));
}
SimpleMenuItemButton.displayName = "SimpleMenuItemButton";
function SimpleMenuItemIconButton({ item, onClose, autoFocus, compact }) {
const itemOnClick = item.onClick;
const onClick = (0, react_1.useCallback)(() => {
itemOnClick();
if (!item.disableClose) {
onClose();
}
}, [item.disableClose, itemOnClick, onClose]);
return ((0, jsx_runtime_1.jsxs)(MenuItemButton_1.MenuItemButton, { onClick: onClick, autoFocus: autoFocus, compact: compact, title: item.title, isSelected: item.isSelected, children: [(0, jsx_runtime_1.jsx)("span", { children: item.isSelected && (0, jsx_runtime_1.jsx)(design_system_icons_1.CheckIcon, { size: 20 }) }), item.icon, item.label] }));
}
SimpleMenuItemIconButton.displayName = "SimpleMenuItemIconButton";
function SimpleMenuItemInternalLink({ item, onClose, autoFocus, size }) {
const itemOnClick = item.onClick;
const onClick = (0, react_1.useCallback)(() => {
itemOnClick?.();
onClose();
}, [itemOnClick, onClose]);
return ((0, jsx_runtime_1.jsx)(MenuItemInternalLink_1.MenuItemInternalLink, { onClick: onClick, autoFocus: autoFocus, label: item.label, shortDescription: item.description, showLinkAsActive: item.showAsActive, path: item.path, size: size, disableImplicitEventTracking: item.disableImplicitEventTracking }));
}
SimpleMenuItemInternalLink.displayName = "SimpleMenuItemInternalLink";
function SimpleMenuItemExternalLink({ item, onClose, autoFocus, compact }) {
const itemOnClick = item.onClick;
const onClick = (0, react_1.useCallback)(() => {
itemOnClick?.();
onClose();
}, [itemOnClick, onClose]);
return (0, jsx_runtime_1.jsx)(MenuItemExternalLink_1.MenuItemExternalLink, { href: item.href, label: item.label, shortDescription: item.description, onClick: onClick, autoFocus: autoFocus, compact: compact });
}
SimpleMenuItemExternalLink.displayName = "SimpleMenuItemExternalLink";
function SimpleMenuItemDownloadLink({ item, onClose, autoFocus, compact }) {
const itemOnClick = item.onClick;
const onClick = (0, react_1.useCallback)(() => {
itemOnClick?.();
onClose();
}, [itemOnClick, onClose]);
return (0, jsx_runtime_1.jsx)(MenuItemDownloadLink_1.MenuItemDownloadLink, { href: item.href, label: item.label, shortDescription: item.description, onClick: onClick, autoFocus: autoFocus, compact: compact, downloadFileName: item.downloadFileName });
}
SimpleMenuItemExternalLink.displayName = "SimpleMenuItemDownloadLink";
function NestedMenuItemsComponent({ item, onClose, autoFocus, compact }) {
return (0, jsx_runtime_1.jsx)(NestedMenu_1.NestedMenu, { onClose: onClose, autoFocus: autoFocus, label: item.label, childMenuItems: item.children, compact: compact });
}
NestedMenuItemsComponent.displayName = "NestedMenuItemsComponent";
function ToggleMenuItemComponent({ item: { setIsEnabled, isEnabled, label }, autoFocus, compact }) {
return (0, jsx_runtime_1.jsx)(MenuItemToggle_1.MenuItemToggle, { isEnabled: isEnabled, label: label, setIsEnabled: setIsEnabled, autoFocus: autoFocus, compact: compact });
}
ToggleMenuItemComponent.displayName = "ToggleMenuItemComponent";
function InformationMenuItemComponent({ item, compact }) {
return (0, jsx_runtime_1.jsx)(MenuItemInformation_1.MenuItemInformation, { compact: compact, children: item.content });
}
InformationMenuItemComponent.displayName = "InformationMenuItemComponent";
function DisabledMenuItemComponent({ item, compact }) {
return ((0, jsx_runtime_1.jsx)(MenuItemButton_1.MenuItemButton, { compact: compact, disabled: true, disableReason: item.disableReason, children: (0, jsx_runtime_1.jsxs)("div", { className: styles.menuItemContainer, children: [item.label, item.description && (0, jsx_runtime_1.jsx)("span", { className: styles.description, children: item.description })] }) }));
}
DisabledMenuItemComponent.displayName = "DisabledMenuItemComponent";
SimpleMenuItemButton.displayName = "SimpleMenuItemButton";
const styles = {
menuItemContainer: (0, css_1.css)({
display: "flex",
flexDirection: "column",
}),
description: (0, css_1.css)({
color: design_system_tokens_1.themeTokens.color.text.secondary,
font: design_system_tokens_1.text.body.regular.small,
}),
destructive: (0, css_1.css)({
color: design_system_tokens_1.themeTokens.color.text.danger,
}),
};