@octopusdeploy/design-system-components
Version:
The design systems component library.
68 lines (67 loc) • 3.84 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MenuItemButton = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const react_1 = require("react");
const menuItemStyles_1 = require("../menuItemStyles");
function isDisabledMenuItemProps(props) {
return props.disabled === true;
}
// 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.MenuItemButton = (0, react_1.forwardRef)((props, forwardedRef) => {
const onClick = "onClick" in props ? props.onClick : undefined;
const classes = (0, css_1.cx)(menuItemButtonStyles, { [compactMenuItemStyles]: props.compact });
if (isDisabledMenuItemProps(props)) {
//We need to wrap the menu item in a ToolTip when it's disabled to show the reason as a disabled menu item will also not
//show the tooltip from the title
return ((0, jsx_runtime_1.jsx)(MenuItem_1.default, { classes: { root: (0, css_1.cx)(disabledMenuItemStyles, classes), selected: selectedMenuItemStyles }, component: "button", ref: forwardedRef, disabled: props.disabled, title: props.disableReason, disableRipple: true, disableTouchRipple: true, children: props.children }));
}
const { autoFocus, children, disabled, menuButtonAttributes } = props;
const focusMenuItemStyles = { [unfocusMenuItemStyles]: !autoFocus };
return ((0, jsx_runtime_1.jsx)(MenuItem_1.default, { classes: { root: (0, css_1.cx)(classes, focusMenuItemStyles), selected: selectedMenuItemStyles }, selected: props.isSelected, component: "button", autoFocus: autoFocus, disabled: disabled, onClick: onClick, ref: forwardedRef, title: props.title, disableRipple: true, disableTouchRipple: true, ...menuButtonAttributes, children: children }));
});
exports.MenuItemButton.displayName = "MenuItemButton";
const menuItemButtonStyles = (0, css_1.cx)(menuItemStyles_1.menuItemStyles, (0, css_1.css)({
[`&.${menuItemStyles_1.menuItemClasses.root}`]: {
width: "100%",
minHeight: design_system_tokens_1.space[48],
minWidth: "184px",
gap: design_system_tokens_1.space[8],
},
}));
const compactMenuItemStyles = (0, css_1.css)({
[`&.${menuItemStyles_1.menuItemClasses.root}`]: {
minHeight: "auto",
},
});
const selectedMenuItemStyles = (0, css_1.css)({
[`&.${menuItemStyles_1.menuItemClasses.root}.Mui-selected`]: {
color: design_system_tokens_1.themeTokens.color.text.selected,
backgroundColor: design_system_tokens_1.themeTokens.color.background.primary.default,
},
});
//We need this to make the title tooltip to appear for disabled items, this needs to be as specific as possible
//to override MUI internal styles taking precedence
const disabledMenuItemStyles = (0, css_1.css)({
[`&.${menuItemStyles_1.menuItemClasses.root}`]: {
"&.Mui-disabled": {
pointerEvents: "auto",
},
},
});
const unfocusMenuItemStyles = (0, css_1.css)({
[`&.${menuItemStyles_1.menuItemClasses.root}`]: {
"&:focus": {
color: design_system_tokens_1.themeTokens.color.text.selected,
backgroundColor: design_system_tokens_1.themeTokens.color.background.primary.default,
},
},
});