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

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