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