react-transitioning/dist/index.esm.js

React components for easily implementing basic CSS animations and transitions

var L=Object.defineProperty,$=Object.defineProperties;var j=Object.getOwnPropertyDescriptors;var C=Object.getOwnPropertySymbols;var w=Object.prototype.hasOwnProperty,g=Object.prototype.propertyIsEnumerable;var k=(n,e,t)=>e in n?L(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t,E=(n,e)=>{for(var t in e||(e={}))w.call(e,t)&&k(n,t,e[t]);if(C)for(var t of C(e))g.call(e,t)&&k(n,t,e[t]);return n},A=(n,e)=>$(n,j(e));var _=(n,e)=>{var t={};for(var s in n)w.call(n,s)&&e.indexOf(s)<0&&(t[s]=n[s]);if(n!=null&&C)for(var s of C(n))e.indexOf(s)<0&&g.call(n,s)&&(t[s]=n[s]);return t};import{useState as B,useEffect as H,useMemo as J}from"react";import{useLayoutEffect as q,useEffect as z}from"react";var x=typeof window!="undefined"&&window.document?q:z;var y=500;var D=(r=>(r.APPEAR="appear",r.APPEAR_ACTIVE="appearActive",r.APPEAR_DONE="appearDone",r.ENTER="enter",r.ENTER_ACTIVE="enterActive",r.ENTER_DONE="enterDone",r.EXIT="exit",r.EXIT_ACTIVE="exitActive",r.EXIT_DONE="exitDone",r))(D||{}),G=(a=>(a.ENTER="onEnter",a.ENTERING="onEntering",a.ENTERED="onEntered",a.EXIT="onExit",a.EXITING="onExiting",a.EXITED="onExited",a))(G||{}),v={appear:["onEnter","appearActive"],appearActive:["onEntering","appearDone",!0],appearDone:["onEntered"],enter:["onEnter","enterActive"],enterActive:["onEntering","enterDone",!0],enterDone:["onEntered"],exit:["onExit","exitActive"],exitActive:["onExiting","exitDone",!0],exitDone:["onExited"]};function S(n){let{children:e,in:t=!1,appear:s=!1,enter:o=!0,exit:c=!0,duration:a=500,alwaysMounted:I=!1,addEndListener:R}=n,[r,d]=B(()=>{switch(!0){case!t:return"exitDone";case!!s:return"appear";default:return"appearDone"}});H(()=>{let{setTimeout:p,clearTimeout:N}=window,[f,i,T]=v[r],{[f]:l}=n;l==null||l();let P=0,u=0;return i&&(T?R?R(r,()=>d(i)):P=p(d,a,i):u=requestAnimationFrame(()=>d(i))),()=>{N(P),cancelAnimationFrame(u)}},[r,a]),x(()=>{let p=["exit","exitActive","exitDone"].includes(r);t&&p&&d(o?"enter":"enterDone"),!t&&!p&&d(c?"exit":"exitDone")},[t]);let m=J(()=>Object.keys(v).reduce((p,N)=>A(E({},p),{[N]:r===N}),{}),[r]);return!I&&(c?r==="exitDone":!t)?null:typeof e=="function"?e(m,r):e}import{Children as K,cloneElement as Q,useRef as U,isValidElement as W}from"react";function Y(n){let{children:e,appear:t=!1,enter:s=!0,exit:o=!1,duration:c=500}=n,a=U(!1),I=U([]),R=[],r=[],d={},m=[];K.toArray(e).forEach(i=>{W(i)&&(d[i.key]=m.length,m.push(i))});let p=(i,T)=>{var P,u,h,X,b;let l=Q(i,{in:!T,alwaysMounted:!1,exit:(P=i.props.exit)!=null?P:o,enter:(u=i.props.enter)!=null?u:s,duration:(h=i.props.duration)!=null?h:c,appear:a.current?(X=i.props.enter)!=null?X:s:(b=i.props.appear)!=null?b:t});R.push({element:i,removeTimeout:T}),r.push(l)},N=i=>{var T;return window.setTimeout(()=>{let{current:l}=I,P=l.findIndex(({element:u})=>u.key===i.key);P>=0&&l.splice(P,1)},(T=i.props.duration)!=null?T:c)},f=0;I.current.forEach(({element:i,removeTimeout:T})=>{var P,u;let l=(P=d[i.key])!=null?P:-1;if(l<0)T?p(i,T):((u=i.props.exit)!=null?u:o)&&p(i,N(i));else{T&&window.clearTimeout(T);for(let h=f;h<=l;h+=1)p(m[h])}f=Math.max(f,l+1)});for(let i=f;i<m.length;i+=1)p(m[i]);return x(()=>{a.current=!0},[]),I.current=R,r}import{cloneElement as Z,useMemo as ee,isValidElement as ne}from"react";import{jsx as F}from"react/jsx-runtime";var te=(n,e)=>{let t=e[n];switch(n){case"appearActive":return E(E({},e.appear),t);case"enterActive":return E(E({},e.enter),t);case"exitActive":return E(E({},e.exit),t);default:return t}};function ie(n){let{children:e,styles:t,phase:s}=n;if(!ne(e))return null;let{style:o}=e.props,c=ee(()=>E(E({},o),te(s,t)),[o,t,s]);return Z(e,{style:c})}function se(n){let o=n,{children:e,styles:t}=o,s=_(o,["children","styles"]);return F(S,A(E({},s),{children:(c,a)=>F(ie,{children:e,styles:t,phase:a})}))}import{cloneElement as re,isValidElement as oe,useMemo as ae}from"react";import{jsx as M}from"react/jsx-runtime";var Ee={appear:"-appear",appearActive:"-appear-active",appearDone:"-appear-done",enter:"-enter",enterActive:"-enter-active",enterDone:"-enter-done",exit:"-exit",exitActive:"-exit-active",exitDone:"-exit-done"},Te=(n,e)=>`${n}${e}`,O=(...n)=>n.filter(e=>!!e).join(" "),V=(n,e)=>typeof e=="string"?Te(e,Ee[n]):e[n],le=(n,e)=>{let t=V(n,e);switch(n){case"appearActive":return O(V("appear",e),t);case"enterActive":return O(V("enter",e),t);case"exitActive":return O(V("exit",e),t);default:return t}};function ce(n){let{children:e,classNames:t,phase:s}=n;if(!oe(e))return null;let{className:o}=e.props,c=ae(()=>O(o,le(s,t)),[o,t,s]);return re(e,{className:c})}function pe(n){let o=n,{children:e,classNames:t}=o,s=_(o,["children","classNames"]);return M(S,A(E({},s),{children:(c,a)=>M(ce,{children:e,classNames:t,phase:a})}))}export{pe as CSSTransition,y as DEFAULT_TRANSITION_DURATION,se as StyleTransition,S as Transition,Y as TransitionGroup,D as TransitionPhase,G as TransitionPhaseEvent};
//# sourceMappingURL=index.esm.js.map