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

A React component library for building retro-style websites

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