retro-react/dist/cjs/components/modal/Modal.js

A React component library for building retro-style websites

"use strict";var e=require("../../_virtual/_tslib.js"),o=require("react"),s=require("../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js"),l=require("../../utils/classNames.js"),r=require("../../constants/commonClassNames.js"),a=require("../portal/Portal.js"),i=require("./Modal.styled.js");const d=o.forwardRef(((d,t)=>{var{id:n,className:c,children:u,open:m=!1,onClose:j,color:v="primary",backdrop:p=!0,title:x="Dialog",sx:h}=d,k=e.__rest(d,["id","className","children","open","onClose","color","backdrop","title","sx"]);return o.useEffect((()=>{const e=e=>{"Escape"===e.key&&m&&(null==j||j(e))};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)}),[m,j]),s.jsxs(a.Portal,{children:[p&&s.jsx(i.ModalBackdrop,{$open:m,onClick:e=>null==j?void 0:j(e)},void 0),s.jsxs(i.Modal,Object.assign({$color:v,$backdrop:p,$open:m,ref:t,id:n,sx:h,role:"dialog","aria-modal":"true",className:l.classNames("modal-root",c,r.default)},k,{children:[s.jsxs(i.ModalTitleBar,{children:[s.jsx(i.ModalTitle,{children:x},void 0),s.jsx(i.CloseButton,{className:"modal-close-button",onClick:e=>null==j?void 0:j(e),"aria-label":"Close Modal"},void 0)]},void 0),s.jsx(i.ModalContent,Object.assign({className:"modal-content"},{children:u}),void 0)]}),void 0)]},void 0)}));d.displayName="Modal",exports.Modal=d;