@octopusdeploy/design-system-components/dist/src/components/Dialog/Overlay.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Overlay = Overlay;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const react_1 = require("react");
const react_dom_1 = require("react-dom");
function Overlay({ children, onClick, isClosing = false }) {
    const divRef = (0, react_1.useRef)(null);
    const handleClick = (event) => {
        if (event.target === divRef.current) {
            onClick?.();
        }
    };
    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { role: "presentation", "aria-label": "overlay", ref: divRef, onClick: handleClick, className: `${overlayStyles} ${isClosing ? overlayClosingStyles : ""}`, children: children }), document.body);
}
const overlayStyles = (0, css_1.css)({
    position: "fixed",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: design_system_tokens_1.themeTokens.color.overlay.primary,
    animation: "overlayFadeIn 200ms ease-in",
    "@keyframes overlayFadeIn": {
        from: {
            opacity: 0,
        },
        to: {
            opacity: 1,
        },
    },
});
const overlayClosingStyles = (0, css_1.css)({
    animation: "overlayFadeOut 200ms linear forwards",
    "@keyframes overlayFadeOut": {
        from: {
            opacity: 1,
        },
        to: {
            opacity: 0,
        },
    },
});