@octopusdeploy/design-system-components/dist/src/components/Popover/PopoverBasicWithTrigger.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PopoverBasicWithTrigger = PopoverBasicWithTrigger;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const react_1 = require("react");
const PopoverBasic_1 = require("./PopoverBasic");
function PopoverBasicWithTrigger({ onOpen, open, ...props }) {
    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
    const ref = (0, react_1.createRef)();
    const handleTriggerElementClick = () => {
        anchorEl ? handleClose() : handleOpen();
    };
    const handleOpen = () => {
        setAnchorEl(ref.current);
        onOpen?.();
    };
    const handleClose = () => {
        setAnchorEl(null);
    };
    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: styles.popoverandElement, children: [(0, jsx_runtime_1.jsx)("div", { onClick: handleTriggerElementClick, className: (0, css_1.cx)(styles.triggerElementWrapper, { [styles.triggerElementCenter]: props.triggerAlignment === "center" }), children: props.triggerElement }), (0, jsx_runtime_1.jsx)(PopoverBasic_1.PopoverBasic, { onClose: handleClose, anchorEl: anchorEl, open: open === undefined ? !!anchorEl : open, ...props })] }));
}
const styles = {
    popoverandElement: (0, css_1.css)({
        display: "inline-block",
        maxWidth: "100%",
    }),
    triggerElementWrapper: (0, css_1.css)({
        "&>div": {
            cursor: "pointer",
        },
    }),
    triggerElementCenter: (0, css_1.css)({
        display: "flex",
        alignItems: "center",
    }),
};