retro-react/dist/cjs/components/drawer/Drawer.js

A React component library for building retro-style websites

"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react"),t=require("../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js"),n=require("../portal/Portal.js"),s=require("./Drawer.styled.js");const o=r.forwardRef(((o,i)=>{var{isOpen:c,setIsOpen:u,direction:d="right",color:a="primary",sx:l,children:m}=o,v=e.__rest(o,["isOpen","setIsOpen","direction","color","sx","children"]);const f=r.useRef(null),w=r.useRef(null);r.useEffect((()=>{const e=e=>{f.current&&!f.current.contains(e.target)&&u(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[u]),r.useEffect((()=>{var e;c&&f.current?(w.current=document.activeElement,f.current.focus()):null===(e=w.current)||void 0===e||e.focus()}),[c]),r.useEffect((()=>{const e=e=>{"Escape"===e.key&&u(!1)};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)}),[u]);const p=t.jsxs(r.Fragment,{children:[c&&t.jsx(s.Backdrop,{onClick:()=>u((e=>!e))},void 0),t.jsx(s.DrawerContainer,Object.assign({ref:e=>{i&&("function"==typeof i?i(e):i.current=e),f.current=e},$isOpen:c,$direction:d,$color:a,sx:l,role:"dialog","aria-modal":"true",tabIndex:-1},v,{children:m}),void 0)]},void 0);return t.jsx(n.Portal,{children:p},void 0)}));o.displayName="Drawer",exports.Drawer=o;