react-transitioning/dist/index.esm.js

React components for easily implementing basic CSS animations and transitions

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