@octopusdeploy/design-system-components/dist/src/components/MenuItems/MenuItemInformation/MenuItemInformation.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MenuItemInformation = MenuItemInformation;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const material_1 = require("@mui/material");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const menuItemStyles_1 = require("../menuItemStyles");
function MenuItemInformation({ children, compact }) {
    const classes = (0, css_1.cx)(menuItemInformationStyles, compact ? compactMenuItemStyles : nonCompactMenuItemStyles);
    return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { component: "div", role: "none", disabled: true, className: classes, children: children }));
}
MenuItemInformation.displayName = "MenuItemInformation";
const menuItemInformationStyles = (0, css_1.cx)(menuItemStyles_1.menuItemStyles, (0, css_1.css)({
    [`&.${menuItemStyles_1.menuItemClasses.root}`]: {
        // These information items aren't quite like single line buttons, but can instead have wrapping text content
        whiteSpace: "inherit",
        "&.Mui-disabled": {
            // Material UI sets a lower opacity on the menu items if they are disabled.
            // In this case, we don't really have anything that is "disabled" so we opt out of this style
            opacity: "inherit",
            "&.MuiButtonBase-root": {
                // Allow normal pointer events because we aren't trying to prevent button clicks, text selection, etc.
                pointerEvents: "inherit",
            },
        },
        [`&.${menuItemStyles_1.menuItemClasses.root}`]: {
            // Allow text selection, because why not?
            userSelect: "inherit",
            "&:hover": {
                backgroundColor: "inherit",
            },
            // MUI MenuItems have a tabIndex of -1 so this informational div menu item is focusable. We have to manually override this style so it doesn't look focused.
            "&:focus": {
                backgroundColor: "inherit",
            },
        },
    },
}));
const compactMenuItemStyles = (0, css_1.css)({
    [`&.${menuItemStyles_1.menuItemClasses.root}`]: {
        minHeight: "auto",
    },
});
const nonCompactMenuItemStyles = (0, css_1.css)({
    [`&.${menuItemStyles_1.menuItemClasses.root}`]: {
        minHeight: design_system_tokens_1.space[48], // copied from material-ui's base styles, that would otherwise be overriden by a media query
    },
});