@octopusdeploy/design-system-components
Version:
The design systems component library.
36 lines (35 loc) • 2.29 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.popoverPlacementOptions = void 0;
exports.Popover = Popover;
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 transition_1 = require("../../transition");
exports.popoverPlacementOptions = ["auto", "bottom-end", "bottom-start", "top-start", "top-end", "left-start", "left-end", "right-start", "right-end"];
function Popover({ children, open, anchorEl, placement = "auto", onClose, elementId, accessibleName, accessibleRole = "dialog", boundaryPadding }) {
const TransitionComponent = (0, transition_1.useTransitionComponentOverride)() ?? material_1.Fade;
const onCloseClicked = () => {
onClose?.();
};
if (!anchorEl) {
return null;
}
return ((0, jsx_runtime_1.jsx)(material_1.Popper, { id: elementId, role: accessibleRole, "aria-label": accessibleName, className: popoverContainerStyles, open: open, anchorEl: anchorEl, placement: placement === "auto" ? undefined : placement, modifiers: [
{ name: "offset", enabled: true, options: { offset: [0, 8] } },
{ name: "preventOverflow", enabled: true, options: { padding: boundaryPadding, boundariesElement: "window" } },
], transition: true, children: ({ TransitionProps }) => ((0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, { onClickAway: onCloseClicked, children: (0, jsx_runtime_1.jsx)(TransitionComponent, { ...TransitionProps, timeout: { enter: 350, exit: 100 }, children: (0, jsx_runtime_1.jsx)("div", { children: children }) }) })) }));
}
const popoverContainerStyles = (0, css_1.css)({
zIndex: "auto",
isolation: "isolate",
borderRadius: design_system_tokens_1.borderRadius.small,
border: `1px solid ${design_system_tokens_1.themeTokens.color.border.primary}`,
backgroundColor: design_system_tokens_1.themeTokens.color.background.primary.default,
boxShadow: design_system_tokens_1.themeTokens.shadow.medium,
overflow: "clip",
minHeight: "77px",
font: design_system_tokens_1.text.body.regular.medium,
color: design_system_tokens_1.themeTokens.color.text.primary,
});