koval-ui/dist/src/internal/Transitions/Transition.cjs

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),S=require("../hooks/useEventListener.cjs"),p=require("../hooks/useIsFirstRender.cjs"),o=require("../hooks/useSafeLayoutEffect.cjs"),y=({show:r=!1,children:L,exitClassName:i="transition-exit",exitDoneClassName:n="transition-exit-done",enterClassName:c="transition-enter",enterDoneClassName:u="transition-enter-done",nodeRef:e,unmountNode:d,onExit:v=()=>{},onEnter:m=()=>{}})=>{const x=p.useIsFirstRender(),[s,a]=l.useState(r);o.useSafeLayoutEffect(()=>{r&&a(r)},[r]);const t=l.useMemo(()=>({enter:c.split(" "),exit:i.split(" "),exitDone:n.split(" "),enterDone:u.split(" ")}),[c,u,i,n]);o.useSafeLayoutEffect(()=>{r?(e.current?.classList.add(...t.enter),e.current?.classList.remove(...t.exit),e.current?.classList.remove(...t.exitDone)):(e.current?.classList.add(...t.exit),e.current?.classList.remove(...t.enter),e.current?.classList.remove(...t.enterDone))},[t,e,r,s,x]);const E=()=>{r&&s?(m(),e.current?.classList.remove(...t.enter),e.current?.classList.add(...t.enterDone)):s&&(v(),e.current?.classList.remove(...t.exit),e.current?.classList.add(...t.exitDone),a(!1))};return S.useEventListener("animationend",E,e.current),(s||!d)&&L};exports.Transition=y;
//# sourceMappingURL=Transition.cjs.map