import{__rest as o}from"tslib";import e,{useState as r,useRef as t,useCallback as i,useEffect as l}from"react";import{twMerge as n}from"tailwind-merge";import s from"../../../hooks/useOnClickOutside.js";import a from"../../../hooks/useOnWindowResize.js";import{borderRadius as m,border as d,boxShadow as h}from"../../../lib/shape.js";import{spacing as f}from"../../../lib/spacing.js";import{colorPalette as w,DEFAULT_COLOR as u}from"../../../lib/theme.js";import{mergeRefs as c,getColorClassNames as p}from"../../../lib/utils.js";const g=e.forwardRef(((g,b)=>{const{showModal:j,setShowModal:v,parentRef:x,width:C,maxHeight:M="max-h-[228px]",children:R,className:y}=g,B=o(g,["showModal","setShowModal","parentRef","width","maxHeight","children","className"]),[N,O]=r(!1),k=t(null),W=i(((o,e)=>{if(!x.current)return!1;return e-(x.current.getBoundingClientRect().left+o)<0}),[x]);return s(k,(o=>{var e;!!x&&(null===(e=x.current)||void 0===e?void 0:e.contains(o.target))||v(!1)})),l((()=>{C&&O(W(C,window.innerWidth))}),[W,x,C]),a((()=>{C&&O(W(C,window.innerWidth))})),j?e.createElement("div",Object.assign({ref:c([k,b]),className:n("absolute z-10 divide-y overflow-y-auto",C?"":"w-full",N?f.none.right:f.none.left,M,p("white").bgColor,p(u,w.lightBorder).borderColor,p(u,w.lightBorder).divideColor,f.twoXs.marginTop,f.twoXs.marginBottom,m.md.all,d.sm.all,h.lg,y),style:{width:C}},B),R):null}));g.displayName="Modal";export{g as default};
