@legion-ui-kit/react-core/dist/cjs/components/Dropdown/Dropdown.cjs

<div align="center"> <img height="108" width="116" src="https://legion.digitaltelkom.id/favicon.svg?v=4643a71fb65fa61a5f2b266b769ea7b1" /> <h1 align="center">Legion UI Kit - React Core</h1> </div>

"use client";
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("react-dom"),n=require("classnames"),o=require("./styles.module.scss.cjs"),i=require("./DropdownDialogue.cjs"),s=require("../../hooks/useMounted.cjs"),u=require("./Dropdown.helper.cjs"),c=require("./Dropdown.constant.cjs");function l(e){return e&&e.__esModule?e:{default:e}}var d=l(n);exports.default=n=>{const{children:l,className:a,dropdownDialogueClassName:f,dropdownDialogueStyle:p,position:w=c.DROPDOWN_DEFAULT_PROPS.position,style:g,trigger:h,...m}=n,O=d.default(o.default.legion_dropdown,a),D=r.useRef(null),E=r.useRef(null),v=r.useRef(null),N=r.useRef(null),_=s.default(),[R,A]=r.useState(c.DROPDOWN_DEFAULT_OPEN_STATE),[T,y]=r.useState(c.DROPDOWN_DEFAULT_STYLE),{isOpen:L,isShow:P}=R,{height:j,left:q,top:S}=T,k=L?j:0,I=()=>{if(!E.current||!D.current||"undefined"==typeof window)return;const e=E?.current.getBoundingClientRect(),r=D?.current.getBoundingClientRect();if(0!==r.height&&0!==r.width){const{top:t,left:n}=u.getDropdownPosition({position:w,triggerHeight:e.height,triggerWidth:e.width,triggerTop:e.top+window.scrollY,triggerLeft:e.left+window.scrollX,dropdownHeight:r.height,dropdownWidth:r.width});y({height:r.height,top:t,left:n})}},W=r.useMemo(()=>r.cloneElement(h,{...h.props,ref:E,onClick:e=>{h.props.onClick?.(e),A(e=>e.isOpen?{...e,isOpen:!1}:{...e,isShow:!0})},style:{...h.props.style,cursor:"pointer"}}),[L]);return r.useEffect(()=>{P&&(null!==v?.current&&(clearTimeout(v.current),v.current=null),A(e=>({...e,isOpen:!0})))},[P]),r.useEffect(()=>(L||(v.current=window.setTimeout(()=>{A(e=>({...e,isShow:!1})),v.current=null},c.DROPDOWN_ANIMATION_DURATION+c.DROPDOWN_ANIMATION_DELAY)),()=>{null!==v.current&&(clearTimeout(v.current),v.current=null)}),[L]),r.useEffect(()=>{if(L){const e=requestAnimationFrame(()=>{I()});return()=>cancelAnimationFrame(e)}},[P,w]),r.useEffect(()=>{const e=e=>{const r=e.target;E.current&&!E.current.contains(r)&&D.current&&!D.current.contains(r)&&A(e=>({...e,isOpen:!1}))},r=e=>{"Escape"===e.key&&A(e=>({...e,isOpen:!1}))};return L&&(document.addEventListener("click",e),document.addEventListener("keydown",r)),()=>{document.removeEventListener("click",e),document.removeEventListener("keydown",r)}},[L]),r.useEffect(()=>{if(!L)return;"undefined"!=typeof ResizeObserver&&(N.current=new ResizeObserver(()=>{I()}),E.current&&N.current.observe(E.current),D.current&&N.current.observe(D.current));const e=()=>I();return window.addEventListener("scroll",e,!0),window.addEventListener("resize",e),()=>{N.current?.disconnect(),N.current=null,window.removeEventListener("scroll",e,!0),window.removeEventListener("resize",e)}},[L]),e.jsxs(e.Fragment,{children:[_&&t.createPortal(P&&e.jsx("div",{className:O,style:{...g,height:k,left:q,top:S,transitionDuration:`${c.DROPDOWN_ANIMATION_DURATION}ms`},...m,children:e.jsx(i.default,{ref:D,className:f,style:p,children:l})}),document.body),W]})};
//# sourceMappingURL=Dropdown.cjs.map