https://ai.stackspot.com/assets/AnimatedHeight-DHchK51g.js

1import{r as e}from"./chunk-QTnfLwEv.js";import{n as t,nt as n,rt as r,tt as i}from"./dist-Dwy9VqNa.js";import{t as a}from"./manual-render-B9rtB3jc.js";var o=n(),s=e(r(),1),c=i.div`
2  overflow-y: clip; // <-- do not use hidden, it's buggy in Chrome.
3  transition: height ease-in-out ${({$animationMs:e})=>e/1e3}s;
4
5  .wrapper {
6    display: flex;
7    flex-direction: column;
8  }
9
10  &.initial {
11    opacity: 0;
12    pointer-events: none;
13    overflow: inherit;
14    transition: none;
15
16    &.content {
17      overflow: inherit;
18      transition: none;
19    }
20  }
21
22  .content {
23    overflow: hidden;
24    transition: height ease-in-out ${({$animationMs:e})=>e/1e3}s;
25  }
26`;function l(e){let t=e.firstChild;if(!t||!(`tagName`in t))throw Error(`AnimatedHeight could not find any content to animate`);return t}function u(e,t){let n=new ResizeObserver(e=>{let n=e[0].borderBoxSize[0].blockSize;t(n)});return n.observe(e),()=>n.disconnect()}var d=({children:e,footer:n,header:r,visible:i=!0,duration:d=300,className:f,style:p,outerClassName:m,outerStyle:h})=>{let{repaint:g}=a(),_=(0,s.useRef)(null),v=(0,s.useRef)(null),y=(0,s.useRef)(null),b=(0,s.useRef)(null),x=(0,s.useRef)(null),S=(0,s.useRef)({content:0,footer:0,header:0,extra:0}),C=(0,s.useRef)(`initial`),w=(0,s.useCallback)(()=>{_.current&&(_.current.style.height=`${S.current.content+S.current.header+S.current.footer+S.current.extra}px`),b.current&&(b.current.style.height=`${S.current.content}px`)},[]);return(0,s.useLayoutEffect)(()=>{let e;return y.current&&(S.current.header=y.current.getBoundingClientRect().height),b.current&&(S.current.content=b.current.getBoundingClientRect().height,e=u(l(b.current),e=>{S.current.content=e,C.current===`visible`&&_.current&&w()})),x.current&&(S.current.footer=x.current.getBoundingClientRect().height),v.current&&(S.current.extra=v.current.getBoundingClientRect().height-S.current.header-S.current.footer-S.current.content),C.current=i?`visible`:`hidden`,g(),e},[]),(0,s.useEffect)(()=>{C.current!==`initial`&&(C.current=i?`visible`:`hidden`,i?w():_.current&&(_.current.style.height=`0`))},[i]),(0,o.jsx)(c,{ref:_,$animationMs:d,className:t([m,C.current===`initial`&&`initial`]),style:h,children:(0,o.jsxs)(`div`,{ref:v,className:t([`wrapper`,f]),style:p,children:[r&&(0,o.jsx)(`div`,{ref:y,children:r}),(0,o.jsx)(`div`,{ref:b,className:`content`,children:e}),n&&(0,o.jsx)(`div`,{ref:x,children:n})]})})};export{d as t};