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

<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>

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