retro-react/dist/esm/components/popover/Popover.js

A React component library for building retro-style websites

import{__rest as t}from"../../_virtual/_tslib.js";import{forwardRef as e,useState as i,useRef as o,useEffect as s,Children as r,cloneElement as n}from"react";import{jsx as l}from"../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js";import{classNames as d}from"../../utils/classNames.js";import{Button as c}from"../button/Button.js";import{Portal as a}from"../portal/Portal.js";import{PopoverContent as p}from"./Popover.styled.js";const h=e(((e,i)=>{var{sx:o,children:s,className:r,id:n,isOpen:a}=e,p=t(e,["sx","children","className","id","isOpen"]);return l(c,Object.assign({ref:i,id:n,sx:o,className:d("popover-button-root",a?"retro-active":"",r)},p,{children:s}),void 0)}));h.displayName="PopoverButton";const m=e(((e,i)=>{var{id:o,className:s,children:r,position:n,sx:c}=e,a=t(e,["id","className","children","position","sx"]);return l(p,Object.assign({ref:i,id:o,sx:c,$top:null==n?void 0:n.top,$left:null==n?void 0:n.left,className:d("popover-content-root",s)},a,{children:r}),void 0)}));m.displayName="PopoverContent";const u=e(((e,d)=>{var{children:c,position:p="bottom",closeOnClickOutside:u=!0,sx:v}=e,f=t(e,["children","position","closeOnClickOutside","sx"]);const[g,b]=i(!1),[x,j]=i({top:0,left:0}),O=o(null),N=o(null);s((()=>{var t,e;if(!g)return;const i=(null===(t=O.current)||void 0===t?void 0:t.getBoundingClientRect())||{top:0,left:0,width:0,height:0,right:0,bottom:0},o=(null===(e=N.current)||void 0===e?void 0:e.getBoundingClientRect())||{width:0,height:0};let s={top:0,left:0};switch(p){case"top":s={top:i.top-o.height-i.height/2,left:i.left+i.width/2};break;case"bottom":s={top:i.bottom,left:i.left+i.width/2};break;case"right":s={top:i.top+i.height/2-o.height/2,left:i.right+i.width};break;case"left":s={top:i.top+i.height/2-o.height/2,left:i.left-i.width}}j(s)}),[g,p]),s((()=>{const t=t=>{N.current&&!N.current.contains(t.target)&&O.current&&!O.current.contains(t.target)&&b(!1)};return u&&document.addEventListener("mousedown",t),()=>{document.removeEventListener("mousedown",t)}}),[g,u,N,O]);const w=()=>{b(!g)},y=r.map(c,(t=>t?t.type===h?n(t,{onClick:w,ref:O,isOpen:g}):t.type===m?l(a,{children:l(m,Object.assign({ref:N,position:g?x:void 0,"data-visible":g,style:{position:"fixed",visibility:g?"visible":"hidden",transition:"visibility 0s linear 0.2s",left:g?void 0:"-9999px"}},{children:t.props.children}),void 0)},void 0):t:null));return l("div",Object.assign({},f,{ref:d,sx:Object.assign({position:"relative"},v)},{children:y}),void 0)}));u.displayName="Popover";export{u as Popover,h as PopoverButton,m as PopoverContent};