react-box-tools/dist/dropdown-CkR4kz4M.cjs

Box tools react components, utils and hooks

"use strict";const m=require("react/jsx-runtime"),B=require("./clsx-CeOg4f1g.cjs"),n=require("react"),W=require("./useOutClick-BPW052ac.cjs"),y=require("./useUpdateEffect-DyqkA7tm.cjs"),z=require("./useResizeObserver-kdwFPGIj.cjs"),Y=n.forwardRef((I,U)=>{const{arrow:$,show:b,direction:v="down",mode:d="hover",offset:O=0,target:F,onFirstOpen:C,onOpen:E,onClose:q,className:M,contentClass:P,width:k="target",children:_,intersect:L=!0,...H}=I,[i,f]=n.useState(b),[a,c]=n.useState(v),[j,N]=n.useState(!1),[S,T]=n.useState(!1),x=n.useRef(null),g=n.useRef(null),D=n.useRef(null),u=$?10+O:O,R=()=>{if(!x.current||!g.current)return;const h=x.current,p=g.current,t=h.getBoundingClientRect(),s=p.getBoundingClientRect();k==="target"&&(p.style.width=`${t.width}px`);const o=h.offsetTop,r=h.offsetLeft,e={top:o,left:r};switch(a){case"down":e.top=o+t.height,e.left=r+t.width/2-s.width/2;break;case"down-left":e.top=o+t.height,e.left=r-s.width+t.width;break;case"down-right":e.top=o+t.height,e.left=r;break;case"left":e.top=o-s.height/2+t.height/2,e.left=r-s.width;break;case"left-top":e.top=o-s.height+t.height,e.left=r-s.width;break;case"left-bottom":e.top=o,e.left=r-s.width;break;case"up":e.top=o-s.height,e.left=r-s.width/2+t.width/2;break;case"up-left":e.top=o-s.height,e.left=r-s.width+t.width;break;case"up-right":e.top=o-s.height,e.left=r;break;case"right":e.top=o-s.height/2+t.height/2,e.left=r+t.width;break;case"right-top":e.top=o-s.height+t.height,e.left=r+t.width;break;case"right-bottom":e.top=o,e.left=r+t.width;break}if(k==="full"&&(e.left=0),p.style.top=`${e.top}px`,p.style.left=`${e.left}px`,D.current){const X=D.current;let w="";a.startsWith("up")?w=`-${u}px 0 ${u}px 0`:a.startsWith("down")?w=`${u}px 0 0 0`:a.startsWith("left")?w=`0 ${u}px 0 -${u}px`:a.startsWith("right")&&(w=`0 -${u}px 0 ${u}px`),X.style.margin=w}},V=()=>{d==="hover"&&f(!0)},A=()=>{d!=="toggle"&&f(!1)},G=h=>{const p=h.target,t=g.current;if(t!=null&&t.contains(p)){if(p.classList.contains("drp-item")){f(!1),h.stopPropagation();return}if(d==="toggle")return}d==="click"&&!i&&f(!0),d==="toggle"&&f(!i)},J=()=>{d!=="toggle"&&i&&f(!1)},l=z.useIntersectionObserver(g,{threshold:.5}),K=!!(l!=null&&l.isIntersecting);n.useImperativeHandle(U,()=>({posicionate:R,setOpen:f})),n.useEffect(()=>{f(b)},[b]),y.useUpdateEffect(()=>{i&&R()},[b,i,a,$,O,k]),y.useUpdateEffect(()=>{if(L&&i&&l&&l.intersectionRatio<1){const h=l.boundingClientRect;if(l.rootBounds)if(h.top<l.rootBounds.top)switch(a){case"up":c("down");break;case"up-right":c("down-right");break;case"up-left":c("down-left");break;case"left-top":c("left-bottom");break;case"right-top":c("right-bottom");break}else switch(a){case"down":c("up");break;case"down-right":c("up-right");break;case"down-left":c("up-left");break;case"left-bottom":c("left-top");break;case"right-bottom":c("right-top");break}}},[L,K]),n.useEffect(()=>{c(v)},[v]),W.useEventListener("resize",R),W.useOutClick(x,J),n.useEffect(()=>{!S&&i&&(T(!0),C&&C()),i&&!j&&(N(!0),E&&E()),!i&&j&&(N(!1),q&&q())},[i,j,S,E,q,C]);const Q=z.useResizeObserver(i?R:()=>{});return m.jsxs("div",{ref:x,onMouseOver:V,onMouseLeave:A,onClick:G,className:B.clsx(`dropdown ${M}`),children:[m.jsx("div",{ref:Q,children:F}),m.jsx("div",{...H,ref:g,className:B.clsx(`drp-panel ${i?"show":"unshown"} ${k}`),children:m.jsx("div",{ref:D,className:B.clsx(`drp-content ${a} ${P} ${$&&"arrow"}`),children:_})})]})});exports.DropDown=Y;