@start-base/start-ui/Popover/index.js

<p align="center"> <a href="https://startbase.dev" target="_blank"> <img src="https://startbase.dev/apple-touch-icon.png" width="60px" style="padding-top: 60px" /> </a> </p>

"use strict";var e=require("react"),t=require("@floating-ui/core"),l=require("@floating-ui/dom"),r=require("@floating-ui/react"),n=require("clsx");function o(e){return e&&e.__esModule?e:{default:e}}var u=o(e),a=o(n);var i="SUI-FloatingArrow-module-arrow-8vgzo",c="SUI-FloatingArrow-module-top-pK86K",s="SUI-FloatingArrow-module-bottom-SSlO1",d="SUI-FloatingArrow-module-left-UiHRj",m="SUI-FloatingArrow-module-right-As3oX",f=e.forwardRef((({placement:e="bottom",x:t,y:l},r)=>{let n={};switch(e){case"top":n={bottom:(null!=l?l:0)-5,left:null!=t?t:0};break;case"top-end":n={bottom:(null!=l?l:0)-5,left:(null!=t?t:0)+10};break;case"top-start":n={bottom:(null!=l?l:0)-5,left:(null!=t?t:0)-10};break;case"bottom":n={top:(null!=l?l:0)-5,left:null!=t?t:0};break;case"bottom-start":n={top:(null!=l?l:0)-5,left:(null!=t?t:0)-10};break;case"bottom-end":n={top:(null!=l?l:0)-5,left:(null!=t?t:0)+10};break;case"left":n={top:null!=l?l:0,right:(null!=t?t:0)-5};break;case"left-start":n={top:(null!=l?l:0)-5,right:(null!=t?t:0)-5};break;case"left-end":n={top:(null!=l?l:0)+5,right:(null!=t?t:0)-5};break;case"right":n={top:null!=l?l:0,left:(null!=t?t:0)-5};break;case"right-start":n={top:(null!=l?l:0)-5,left:(null!=t?t:0)-5};break;case"right-end":n={top:(null!=l?l:0)+5,left:(null!=t?t:0)-5}}return u.default.createElement("div",{ref:r,className:a.default(i,{[c]:["top","top-end","top-start"].includes(e),[s]:["bottom","bottom-end","bottom-start"].includes(e),[d]:["left","left-end","left-start"].includes(e),[m]:["right","right-end","right-start"].includes(e)}),style:n})}));f.displayName="FloatingArrow";var v=f,p="SUI-Popover-module-popover-kN79i",g="SUI-Popover-module-visible-YyomU",b="SUI-Popover-module-hidden-1kn48",h="SUI-Popover-module-animate-1dIT8",w=e.forwardRef((({popper:n,open:o=!1,placement:i="bottom",trigger:c="click",className:s,spacing:d=0,hideArrow:m=!0,openDelay:f=!1,closeDelay:w=!0,clickToClose:k=!0,children:E},y)=>{var S,L;const[R,U]=e.useState(o),[x,F]=e.useState(!1),I=e.useRef(null),A=e.useRef(null),T=e.useRef(null),C=e.useRef(null);let N=[];m||(N=[t.arrow({element:null==T?void 0:T.current})]);const{x:P,y:q,strategy:D,refs:K,middlewareData:M}=r.useFloating({placement:i,whileElementsMounted:l.autoUpdate,middleware:[t.offset(4+d),t.flip({padding:4}),t.shift({padding:4,crossAxis:!0}),...N]}),_=e.useCallback((()=>{I.current&&clearTimeout(I.current),A.current&&clearTimeout(A.current);let e=0;"boolean"==typeof f?e=300:"number"==typeof f&&(e=f),F(!1),A.current=window.setTimeout((()=>{U(!0)}),e)}),[f]),j=e.useCallback((()=>{I.current&&clearTimeout(I.current),A.current&&clearTimeout(A.current),F(!0),I.current=window.setTimeout((()=>{U(!1),F(!1)}),!0===w?200:!1===w?0:w)}),[w]),z=e.useCallback((()=>{"hover"===c&&k&&j(),"click"===c&&(R?j():_())}),[c,k,j,R,_]),H=e.useCallback((()=>{"hover"===c&&_()}),[_,c]),O=e.useCallback((()=>{"hover"===c&&C.current&&!C.current.matches(":hover")&&j()}),[j,c]),W=e.useCallback((()=>{j()}),[j]);e.useEffect((()=>{var e;const t=null==(e=null==K?void 0:K.domReference)?void 0:e.current,l=C.current;return t&&(t.addEventListener("click",z),t.addEventListener("mouseenter",H),t.addEventListener("mouseleave",O)),l&&(l.addEventListener("mouseenter",H),l.addEventListener("mouseleave",O)),function(){t&&(t.removeEventListener("click",z),t.removeEventListener("mouseenter",H),t.removeEventListener("mouseleave",O)),l&&(l.removeEventListener("mouseenter",H),l.removeEventListener("mouseleave",O))}}),[K,z,H,O]),function({ref:t,handler:l,withoutRef:r}){e.useEffect((()=>{function e(e){(null==t?void 0:t.current)&&!(null==t?void 0:t.current.contains(e.target))&&((null==r?void 0:r.current)&&((null==r?void 0:r.current)===e.currentTarget||(null==r?void 0:r.current.contains(e.target)))||l())}return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[l,t,r])}({ref:null==K?void 0:K.domReference,handler:W,withoutRef:K.floating});const X=u.default.createElement("div",{ref:e=>{C.current=e,K.setFloating(e)},style:{position:D,top:null!=q?q:0,left:null!=P?P:2,width:"max-content",maxWidth:"calc(100svw - 8px)"},className:a.default(p,{[g]:R,[b]:!R,[h]:x},s&&{[s]:!0})},!m&&u.default.createElement(v,{placement:i,ref:T,x:null==(S=null==M?void 0:M.arrow)?void 0:S.x,y:null==(L=null==M?void 0:M.arrow)?void 0:L.y}),E);return u.default.createElement(u.default.Fragment,null,e.cloneElement(n,{ref:e=>{K.setReference(e),"function"==typeof y?y(e):y&&(y.current=e)}}),u.default.createElement(r.FloatingPortal,null,X))}));w.displayName="Popover";var k=w;module.exports=k;