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

A React component library for building retro-style websites

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