Socket
Socket
Sign inDemoInstall

@motionone/react

Package Overview
Dependencies
Maintainers
2
Versions
51
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@motionone/react - npm Package Compare versions

Comparing version 10.6.0-rc.4 to 10.6.0-rc.5

2

dist/size.js

@@ -1,1 +0,1 @@

import*as t from"react";import{createContext as e,useEffect as n,forwardRef as i,useContext as r,useMemo as a,useRef as s,createElement as o}from"react";function c(t,e){var n={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(t);r<i.length;r++)e.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(t,i[r])&&(n[i[r]]=t[i[r]])}return n}const l=new WeakMap;function u(t){return l.has(t)||l.set(t,{transforms:[],animations:{},generators:{},prevGeneratorState:{}}),l.get(t)}function h(t,e){-1===t.indexOf(e)&&t.push(e)}const f={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},p=t=>"number"==typeof t,d=t=>"object"==typeof t&&Boolean(t.createAnimation),m=t=>Array.isArray(t)&&!p(t[0]),v=(t,e,n)=>-n*t+n*e+t,y=()=>{},g=t=>t,b=(t,e,n)=>e-t==0?1:(n-t)/(e-t);function w(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const r=b(0,e,i);t.push(v(n,1,r))}}const E=t=>1e3*t,O=["","X","Y","Z"],S={x:"translateX",y:"translateY",z:"translateZ"},A={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},x={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:A,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:g},skew:A},j=new Map,T=t=>`--motion-${t}`,M=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{O.forEach((e=>{M.push(t+e),j.set(T(t+e),x[t])}))}));const P=(t,e)=>M.indexOf(t)-M.indexOf(e),V=new Set(M),k=t=>V.has(t),D=t=>t.sort(P).reduce(L,"").trim(),L=(t,e)=>`${t} ${e}(var(${T(e)}))`,C=t=>t.startsWith("--"),I=new Set;const U=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function B(t,e,n,i){if(t===e&&n===i)return g;const r=e=>function(t,e,n,i,r){let a,s,o=0;do{s=e+(n-e)/2,a=U(s,i,r)-t,a>0?n=s:e=s}while(Math.abs(a)>1e-7&&++o<12);return s}(e,0,1,t,n);return t=>0===t||1===t?t:U(r(t),e,i)}const R=(t,e="end")=>n=>{const i=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,r="end"===e?Math.floor(i):Math.ceil(i);return a=0,s=1,o=r/t,Math.min(Math.max(o,a),s);var a,s,o},$={ease:B(.25,.1,.25,1),"ease-in":B(.42,0,1,1),"ease-in-out":B(.42,0,.58,1),"ease-out":B(0,0,.58,1)},q=/\((.*?)\)/;function F(t){if("function"==typeof t)return t;if(Array.isArray(t))return B(...t);if($[t])return $[t];if(t.startsWith("steps")){const e=q.exec(t);if(e){const t=e[1].split(",");return R(parseFloat(t[0]),t[1].trim())}}return g}function H(t,e=function(t){const e=[0];return w(e,t-1),e}(t.length),n=g){const i=t.length,r=i-e.length;return r>0&&w(e,r),r=>{let a=0;for(;a<i-2&&!(r<e[a+1]);a++);let s=(o=b(e[a],e[a+1],r),Math.min(1,Math.max(o,0)));var o;const c=function(t,e){return m(t)?t[((t,e,n)=>{const i=e-t;return((n-t)%i+i)%i+t})(0,t.length,e)]:t}(n,a);return s=c(s),v(t[a],t[a+1],s)}}class W{constructor(t,e=[0,1],{easing:n=f.easing,duration:i=f.duration,delay:r=f.delay,endDelay:a=f.endDelay,repeat:s=f.repeat,offset:o,direction:c="normal"}={}){this.startTime=0,this.rate=1,this.t=0,this.cancelTimestamp=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e}));const l=i*(s+1);d(n)&&(n="ease");const u=H(e,o,m(n)?n.map(F):F(n));this.tick=e=>{var n;this.pauseTime&&(e=this.pauseTime);let s=(e-this.startTime)*this.rate;this.t=s,s/=1e3,s=Math.max(s-r,0),"finished"===this.playState&&(s=l);const o=s/i;let h=Math.floor(o),f=o%1;!f&&o>=1&&(f=1),1===f&&h--;const p=h%2;("reverse"===c||"alternate"===c&&p||"alternate-reverse"===c&&!p)&&(f=1-f);const d=u(s>=l?1:Math.min(f,1));t(d);"finished"===this.playState||s>=l+a?(this.playState="finished",null===(n=this.resolve)||void 0===n||n.call(this,d)):"idle"!==this.playState&&(this.frameRequestId=requestAnimationFrame(this.tick))},this.play()}play(){const t=performance.now();this.playState="running",this.pauseTime?this.startTime=t-(this.pauseTime-this.startTime):this.startTime||(this.startTime=t),this.pauseTime=void 0,requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=performance.now()}finish(){this.playState="finished",this.tick(0)}cancel(){var t;this.playState="idle",this.tick(this.cancelTimestamp),null===(t=this.reject)||void 0===t||t.call(this,!1),void 0!==this.frameRequestId&&cancelAnimationFrame(this.frameRequestId)}reverse(){this.rate*=-1}commitStyles(){this.cancelTimestamp=performance.now()}get currentTime(){return this.t}set currentTime(t){this.pauseTime||0===this.rate?this.pauseTime=t:this.startTime=performance.now()-t/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}const z=t=>(t=>Array.isArray(t)&&p(t[0]))(t)?G(t):t,G=([t,e,n,i])=>`cubic-bezier(${t}, ${e}, ${n}, ${i})`,K=t=>document.createElement("div").animate(t,{duration:.001}),N={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{K({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(K({opacity:[0,1]}).finished)},X={},Y={};for(const t in N)Y[t]=()=>(void 0===X[t]&&(X[t]=N[t]()),X[t]);function Z(t){return S[t]&&(t=S[t]),k(t)?T(t):t}const _=(t,e)=>{e=Z(e);let n=C(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!n&&0!==n){const t=j.get(e);t&&(n=t.initialValue)}return n},J=(t,e,n)=>{e=Z(e),C(e)?t.style.setProperty(e,n):t.style[e]=n};function Q(t,e,n,i={}){let r,{duration:a=f.duration,delay:s=f.delay,endDelay:o=f.endDelay,repeat:c=f.repeat,easing:l=f.easing,direction:v,offset:g,allowWebkitAcceleration:b=!1}=i;const w=u(t);let O=Y.waapi();const A=k(e);A&&((t,e)=>{S[e]&&(e=S[e]);const{transforms:n}=u(t);h(n,e),t.style.transform=D(n)})(t,e);const x=Z(e),T=j.get(x);return function(t){if(t&&"finished"!==t.playState)try{t.commitStyles(),t.cancel()}catch(t){}}(w.animations[x]),()=>{const e=()=>{var e,n;return null!==(n=null!==(e=_(t,x))&&void 0!==e?e:null==T?void 0:T.initialValue)&&void 0!==n?n:0};let u=function(t,e){for(let n=0;n<t.length;n++)null===t[n]&&(t[n]=n?t[n-1]:e());return t}((t=>Array.isArray(t)?t:[t])(n),e);if(d(l)){const t=l.createAnimation(u,e,A,x,w);l=t.easing,void 0!==t.keyframes&&(u=t.keyframes),void 0!==t.duration&&(a=t.duration)}if(C(x)&&(Y.cssRegisterProperty()?function(t){if(!I.has(t)){I.add(t);try{const{syntax:e,initialValue:n}=j.has(t)?j.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}(x):O=!1),O){T&&(u=u.map((t=>p(t)?T.toDefaultUnit(t):t))),Y.partialKeyframes()||1!==u.length||u.unshift(e());const n={delay:E(s),duration:E(a),endDelay:E(o),easing:m(l)?void 0:z(l),direction:v,iterations:c+1,fill:"both"};r=t.animate({[x]:u,offset:g,easing:m(l)?l.map(z):void 0},n),r.finished||(r.finished=new Promise(((t,e)=>{r.onfinish=t,r.oncancel=e})));const i=u[u.length-1];r.finished.then((()=>{J(t,x,i),r.cancel()})).catch(y),b||(r.playbackRate=1.000001)}else if(A&&u.every(p)){1===u.length&&u.unshift(parseFloat(e()));r=new W((e=>{T&&(e=T.toDefaultUnit(e)),J(t,x,e)}),u,Object.assign(Object.assign({},i),{duration:a,easing:l}))}else{const e=u[u.length-1];J(t,x,T&&p(e)?T.toDefaultUnit(e):e)}return w.animations[x]=r,null==r||r.finished.then((()=>{w.animations[x]=void 0,w.generators[x]=void 0,w.prevGeneratorState[x]=void 0})).catch(y),r}}const tt=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):Object.assign({},t);var et=function(){};function nt(t,e){return function(t){return"object"==typeof t}(t)?t:t&&e?e[t]:void 0}let it;function rt(){if(!it)return;const t=it.sort(st).map(ot);t.forEach(ct),t.forEach(ct),it=void 0}function at(t){it?h(it,t):(it=[t],requestAnimationFrame(rt))}"production"!==process.env.NODE_ENV&&(et=function(t,e){if(!t)throw new Error(e)});const st=(t,e)=>t.getDepth()-e.getDepth(),ot=t=>t.animateUpdates(),ct=t=>t.next(),lt=(t,e)=>new CustomEvent(t,{detail:{target:e}});function ut(t,e,n){t.dispatchEvent(new CustomEvent(e,{detail:{originalEvent:n}}))}function ht(t,e,n){t.dispatchEvent(new CustomEvent(e,{detail:{originalEntry:n}}))}const ft=(t,e,n)=>i=>{i.pointerType&&"mouse"!==i.pointerType||(n(),ut(t,e,i))},pt={inView:{isActive:t=>Boolean(t.inView),subscribe:(t,{enable:e,disable:n})=>{let i=!1;if("undefined"!=typeof IntersectionObserver){const r=new IntersectionObserver((([r])=>{!i&&r.isIntersecting?(e(),ht(t,"viewenter",r)):i&&!r.isIntersecting&&(n(),ht(t,"viewleave",r)),i=r.isIntersecting}));return r.observe(t),()=>{r.unobserve(t),r.disconnect()}}return e(),()=>{}}},hover:{isActive:t=>Boolean(t.hover),subscribe:(t,{enable:e,disable:n})=>{const i=ft(t,"hoverstart",e),r=ft(t,"hoverend",n);return t.addEventListener("pointerenter",i),t.addEventListener("pointerleave",r),()=>{t.removeEventListener("pointerenter",i),t.removeEventListener("pointerleave",r)}}},press:{isActive:t=>Boolean(t.press),subscribe:(t,{enable:e,disable:n})=>{const i=e=>{n(),ut(t,"pressend",e),window.removeEventListener("pointerup",i)},r=n=>{e(),ut(t,"pressstart",n),window.addEventListener("pointerup",i)};return t.addEventListener("pointerdown",r),()=>{t.removeEventListener("pointerdown",r),window.removeEventListener("pointerup",i)}}}},dt=["initial","animate",...Object.keys(pt),"exit"],mt=new WeakMap;function vt(t={},e){let n,i=e?e.getDepth()+1:0;const r={initial:!0,animate:!0},a={},s={};for(const n of dt)s[n]="string"==typeof t[n]?t[n]:null==e?void 0:e.getContext()[n];const o=!1===t.initial?"animate":"initial";let l=c(nt(t[o]||s[o],t.variants)||{},["transition"]);const u=Object.assign({},l);const h=(t,e)=>()=>{r[t]=e,at(p)},f=()=>{for(const e in pt){const i=pt[e].isActive(t),r=a[e];i&&!r?a[e]=pt[e].subscribe(n,{enable:h(e,!0),disable:h(e,!1)}):!i&&r&&(r(),delete a[e])}},p={update:e=>{n&&(t=e,f(),at(p))},setActive:(t,e)=>{n&&(r[t]=e,at(p))},animateUpdates:function*(){var e,i;const a=l;l={};const s={},o={},c={};for(const n of dt){if(!r[n])continue;const a=nt(t[n]);if(a){s[n]=a;for(const r in a)"transition"!==r&&(l[r]=a[r],c[r]=tt(null!==(i=null!==(e=a.transition)&&void 0!==e?e:t.transition)&&void 0!==i?i:{},r),o[r]=n)}}const h=new Set([...Object.keys(l),...Object.keys(a)]),f=[];h.forEach((t=>{var e,i,r;void 0===l[t]&&(l[t]=u[t]),i=a[t],r=l[t],typeof i==typeof r&&(Array.isArray(i)&&Array.isArray(r)?function(t,e){const n=e.length;if(n!==t.length)return!1;for(let i=0;i<n;i++)if(e[i]!==t[i])return!1;return!0}(i,r):i===r)||(null!==(e=u[t])&&void 0!==e||(u[t]=_(n,t)),f.push(Q(n,t,l[t],c[t])))})),yield;const p=f.map((t=>t())).filter(Boolean);if(!p.length)return;const d=l;n.dispatchEvent(lt("motionstart",d)),Promise.all(p.map((t=>t.finished))).then((()=>{n.dispatchEvent(lt("motioncomplete",d))})).catch(y)},getDepth:()=>i,getTarget:()=>l,getOptions:()=>t,getContext:()=>s,mount:t=>(et(Boolean(t),"Animation state must be mounted with valid Element"),n=t,mt.set(n,p),f(),()=>{mt.delete(n),function(t){it&&function(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}(it,t)}(p);for(const t in a)a[t]()}),isMounted:()=>Boolean(n)};return p}const yt=e(void 0);function gt(e){return i((function(i,l){var{initial:u,animate:h,press:f,hover:d,inView:m,variants:v,style:y,transition:g,onMotionStart:b,onMotionComplete:w,onHoverStart:E,onHoverEnd:O,onPressStart:A,onPressEnd:x,onViewEnter:M,onViewLeave:P}=i,V=c(i,["initial","animate","press","hover","inView","variants","style","transition","onMotionStart","onMotionComplete","onHoverStart","onHoverEnd","onPressStart","onPressEnd","onViewEnter","onViewLeave"]);const L={initial:u,animate:h,press:f,hover:d,inView:m,variants:v,transition:g},C=vt(L,r(yt)),I=a((()=>function(t){const e={},n=[];for(let i in t){const r=t[i];k(i)&&(S[i]&&(i=S[i]),n.push(i),i=T(i));let a=Array.isArray(r)?r[0]:r;const s=j.get(i);s&&(a=p(r)?s.toDefaultUnit(r):r),e[i]=a}return n.length&&(e.transform=D(n)),e}(C.getTarget())),[]),U=l||s(null);n((()=>C.mount(U.current)),[]),n((()=>C.update(L))),function(t,e){n((()=>{const n=Object.keys(e).map((n=>{return i=t.current,r=n.replace("on","").toLowerCase(),a=e[n],i.addEventListener(r,a,s),()=>i.removeEventListener(r,a,s);var i,r,a,s}));return()=>{n.forEach((t=>t()))}}))}(U,{onMotionStart:b,onMotionComplete:w,onHoverStart:E,onHoverEnd:O,onPressStart:A,onPressEnd:x,onViewEnter:M,onViewLeave:P});const B=o(e,Object.assign(Object.assign({},V),{ref:U,style:Object.assign(Object.assign({},y),I)}));return t.createElement(yt.Provider,{value:C},B)}))}const bt=new Map,wt=new Proxy({},{get:(t,e)=>(!bt.has(e)&&bt.set(e,gt(e)),bt.get(e))});export{wt as motion};
import*as t from"react";import{createContext as e,useEffect as n,forwardRef as i,useContext as r,useMemo as a,useRef as s,createElement as o}from"react";function c(t,e){var n={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(t);r<i.length;r++)e.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(t,i[r])&&(n[i[r]]=t[i[r]])}return n}const l=new WeakMap;function u(t){return l.has(t)||l.set(t,{transforms:[],animations:{},generators:{},prevGeneratorState:{}}),l.get(t)}function f(t,e){-1===t.indexOf(e)&&t.push(e)}const h={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},p=t=>"number"==typeof t,d=t=>"object"==typeof t&&Boolean(t.createAnimation),m=t=>Array.isArray(t)&&!p(t[0]),v=(t,e,n)=>-n*t+n*e+t,y=()=>{},g=t=>t,b=(t,e,n)=>e-t==0?1:(n-t)/(e-t);function w(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const r=b(0,e,i);t.push(v(n,1,r))}}const E=t=>1e3*t,O=["","X","Y","Z"],S={x:"translateX",y:"translateY",z:"translateZ"},A={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},x={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:A,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:g},skew:A},j=new Map,T=t=>`--motion-${t}`,M=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{O.forEach((e=>{M.push(t+e),j.set(T(t+e),x[t])}))}));const P=(t,e)=>M.indexOf(t)-M.indexOf(e),k=new Set(M),V=t=>k.has(t),D=t=>t.sort(P).reduce(L,"").trim(),L=(t,e)=>`${t} ${e}(var(${T(e)}))`,C=t=>t.startsWith("--"),I=new Set;const U=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function B(t,e,n,i){if(t===e&&n===i)return g;const r=e=>function(t,e,n,i,r){let a,s,o=0;do{s=e+(n-e)/2,a=U(s,i,r)-t,a>0?n=s:e=s}while(Math.abs(a)>1e-7&&++o<12);return s}(e,0,1,t,n);return t=>0===t||1===t?t:U(r(t),e,i)}const R=(t,e="end")=>n=>{const i=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,r="end"===e?Math.floor(i):Math.ceil(i);return a=0,s=1,o=r/t,Math.min(Math.max(o,a),s);var a,s,o},$={ease:B(.25,.1,.25,1),"ease-in":B(.42,0,1,1),"ease-in-out":B(.42,0,.58,1),"ease-out":B(0,0,.58,1)},q=/\((.*?)\)/;function F(t){if("function"==typeof t)return t;if(Array.isArray(t))return B(...t);if($[t])return $[t];if(t.startsWith("steps")){const e=q.exec(t);if(e){const t=e[1].split(",");return R(parseFloat(t[0]),t[1].trim())}}return g}function H(t,e=function(t){const e=[0];return w(e,t-1),e}(t.length),n=g){const i=t.length,r=i-e.length;return r>0&&w(e,r),r=>{let a=0;for(;a<i-2&&!(r<e[a+1]);a++);let s=(o=b(e[a],e[a+1],r),Math.min(1,Math.max(o,0)));var o;const c=function(t,e){return m(t)?t[((t,e,n)=>{const i=e-t;return((n-t)%i+i)%i+t})(0,t.length,e)]:t}(n,a);return s=c(s),v(t[a],t[a+1],s)}}class W{constructor(t,e=[0,1],{easing:n=h.easing,duration:i=h.duration,delay:r=h.delay,endDelay:a=h.endDelay,repeat:s=h.repeat,offset:o,direction:c="normal"}={}){this.startTime=0,this.rate=1,this.t=0,this.cancelTimestamp=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e}));const l=i*(s+1);if(d(n)){const t=n.createAnimation(e,(()=>"0"),!0);n=t.easing,void 0!==t.keyframes&&(e=t.keyframes),void 0!==t.duration&&(i=t.duration)}const u=H(e,o,m(n)?n.map(F):F(n));this.tick=e=>{var n;this.pauseTime&&(e=this.pauseTime);let s=(e-this.startTime)*this.rate;this.t=s,s/=1e3,s=Math.max(s-r,0),"finished"===this.playState&&(s=l);const o=s/i;let f=Math.floor(o),h=o%1;!h&&o>=1&&(h=1),1===h&&f--;const p=f%2;("reverse"===c||"alternate"===c&&p||"alternate-reverse"===c&&!p)&&(h=1-h);const d=u(s>=l?1:Math.min(h,1));t(d);"finished"===this.playState||s>=l+a?(this.playState="finished",null===(n=this.resolve)||void 0===n||n.call(this,d)):"idle"!==this.playState&&(this.frameRequestId=requestAnimationFrame(this.tick))},this.play()}play(){const t=performance.now();this.playState="running",this.pauseTime?this.startTime=t-(this.pauseTime-this.startTime):this.startTime||(this.startTime=t),this.pauseTime=void 0,requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=performance.now()}finish(){this.playState="finished",this.tick(0)}cancel(){var t;this.playState="idle",this.tick(this.cancelTimestamp),null===(t=this.reject)||void 0===t||t.call(this,!1),void 0!==this.frameRequestId&&cancelAnimationFrame(this.frameRequestId)}reverse(){this.rate*=-1}commitStyles(){this.cancelTimestamp=performance.now()}get currentTime(){return this.t}set currentTime(t){this.pauseTime||0===this.rate?this.pauseTime=t:this.startTime=performance.now()-t/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}const z=t=>(t=>Array.isArray(t)&&p(t[0]))(t)?G(t):t,G=([t,e,n,i])=>`cubic-bezier(${t}, ${e}, ${n}, ${i})`,K=t=>document.createElement("div").animate(t,{duration:.001}),N={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{K({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(K({opacity:[0,1]}).finished)},X={},Y={};for(const t in N)Y[t]=()=>(void 0===X[t]&&(X[t]=N[t]()),X[t]);function Z(t){return S[t]&&(t=S[t]),V(t)?T(t):t}const _=(t,e)=>{e=Z(e);let n=C(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!n&&0!==n){const t=j.get(e);t&&(n=t.initialValue)}return n},J=(t,e,n)=>{e=Z(e),C(e)?t.style.setProperty(e,n):t.style[e]=n};function Q(t,e,n,i={}){let r,{duration:a=h.duration,delay:s=h.delay,endDelay:o=h.endDelay,repeat:c=h.repeat,easing:l=h.easing,direction:v,offset:g,allowWebkitAcceleration:b=!1}=i;const w=u(t);let O=Y.waapi();const A=V(e);A&&((t,e)=>{S[e]&&(e=S[e]);const{transforms:n}=u(t);f(n,e),t.style.transform=D(n)})(t,e);const x=Z(e),T=j.get(x);return function(t){if(t&&"finished"!==t.playState)try{t.commitStyles(),t.cancel()}catch(t){}}(w.animations[x]),()=>{const e=()=>{var e,n;return null!==(n=null!==(e=_(t,x))&&void 0!==e?e:null==T?void 0:T.initialValue)&&void 0!==n?n:0};let u=function(t,e){for(let n=0;n<t.length;n++)null===t[n]&&(t[n]=n?t[n-1]:e());return t}((t=>Array.isArray(t)?t:[t])(n),e);if(d(l)){const t=l.createAnimation(u,e,A,x,w);l=t.easing,void 0!==t.keyframes&&(u=t.keyframes),void 0!==t.duration&&(a=t.duration)}if(C(x)&&(Y.cssRegisterProperty()?function(t){if(!I.has(t)){I.add(t);try{const{syntax:e,initialValue:n}=j.has(t)?j.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}(x):O=!1),O){T&&(u=u.map((t=>p(t)?T.toDefaultUnit(t):t))),Y.partialKeyframes()||1!==u.length||u.unshift(e());const n={delay:E(s),duration:E(a),endDelay:E(o),easing:m(l)?void 0:z(l),direction:v,iterations:c+1,fill:"both"};r=t.animate({[x]:u,offset:g,easing:m(l)?l.map(z):void 0},n),r.finished||(r.finished=new Promise(((t,e)=>{r.onfinish=t,r.oncancel=e})));const i=u[u.length-1];r.finished.then((()=>{J(t,x,i),r.cancel()})).catch(y),b||(r.playbackRate=1.000001)}else if(A&&u.every(p)){1===u.length&&u.unshift(parseFloat(e()));r=new W((e=>{T&&(e=T.toDefaultUnit(e)),J(t,x,e)}),u,Object.assign(Object.assign({},i),{duration:a,easing:l}))}else{const e=u[u.length-1];J(t,x,T&&p(e)?T.toDefaultUnit(e):e)}return w.animations[x]=r,null==r||r.finished.then((()=>{w.animations[x]=void 0,w.generators[x]=void 0,w.prevGeneratorState[x]=void 0})).catch(y),r}}const tt=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):Object.assign({},t);var et=function(){};function nt(t,e){return function(t){return"object"==typeof t}(t)?t:t&&e?e[t]:void 0}let it;function rt(){if(!it)return;const t=it.sort(st).map(ot);t.forEach(ct),t.forEach(ct),it=void 0}function at(t){it?f(it,t):(it=[t],requestAnimationFrame(rt))}"production"!==process.env.NODE_ENV&&(et=function(t,e){if(!t)throw new Error(e)});const st=(t,e)=>t.getDepth()-e.getDepth(),ot=t=>t.animateUpdates(),ct=t=>t.next(),lt=(t,e)=>new CustomEvent(t,{detail:{target:e}});function ut(t,e,n){t.dispatchEvent(new CustomEvent(e,{detail:{originalEvent:n}}))}function ft(t,e,n){t.dispatchEvent(new CustomEvent(e,{detail:{originalEntry:n}}))}const ht=(t,e,n)=>i=>{i.pointerType&&"mouse"!==i.pointerType||(n(),ut(t,e,i))},pt={inView:{isActive:t=>Boolean(t.inView),subscribe:(t,{enable:e,disable:n})=>{let i=!1;if("undefined"!=typeof IntersectionObserver){const r=new IntersectionObserver((([r])=>{!i&&r.isIntersecting?(e(),ft(t,"viewenter",r)):i&&!r.isIntersecting&&(n(),ft(t,"viewleave",r)),i=r.isIntersecting}));return r.observe(t),()=>{r.unobserve(t),r.disconnect()}}return e(),()=>{}}},hover:{isActive:t=>Boolean(t.hover),subscribe:(t,{enable:e,disable:n})=>{const i=ht(t,"hoverstart",e),r=ht(t,"hoverend",n);return t.addEventListener("pointerenter",i),t.addEventListener("pointerleave",r),()=>{t.removeEventListener("pointerenter",i),t.removeEventListener("pointerleave",r)}}},press:{isActive:t=>Boolean(t.press),subscribe:(t,{enable:e,disable:n})=>{const i=e=>{n(),ut(t,"pressend",e),window.removeEventListener("pointerup",i)},r=n=>{e(),ut(t,"pressstart",n),window.addEventListener("pointerup",i)};return t.addEventListener("pointerdown",r),()=>{t.removeEventListener("pointerdown",r),window.removeEventListener("pointerup",i)}}}},dt=["initial","animate",...Object.keys(pt),"exit"],mt=new WeakMap;function vt(t={},e){let n,i=e?e.getDepth()+1:0;const r={initial:!0,animate:!0},a={},s={};for(const n of dt)s[n]="string"==typeof t[n]?t[n]:null==e?void 0:e.getContext()[n];const o=!1===t.initial?"animate":"initial";let l=c(nt(t[o]||s[o],t.variants)||{},["transition"]);const u=Object.assign({},l);const f=(t,e)=>()=>{r[t]=e,at(p)},h=()=>{for(const e in pt){const i=pt[e].isActive(t),r=a[e];i&&!r?a[e]=pt[e].subscribe(n,{enable:f(e,!0),disable:f(e,!1)}):!i&&r&&(r(),delete a[e])}},p={update:e=>{n&&(t=e,h(),at(p))},setActive:(t,e)=>{n&&(r[t]=e,at(p))},animateUpdates:function*(){var e,i;const a=l;l={};const s={},o={},c={};for(const n of dt){if(!r[n])continue;const a=nt(t[n]);if(a){s[n]=a;for(const r in a)"transition"!==r&&(l[r]=a[r],c[r]=tt(null!==(i=null!==(e=a.transition)&&void 0!==e?e:t.transition)&&void 0!==i?i:{},r),o[r]=n)}}const f=new Set([...Object.keys(l),...Object.keys(a)]),h=[];f.forEach((t=>{var e,i,r;void 0===l[t]&&(l[t]=u[t]),i=a[t],r=l[t],typeof i==typeof r&&(Array.isArray(i)&&Array.isArray(r)?function(t,e){const n=e.length;if(n!==t.length)return!1;for(let i=0;i<n;i++)if(e[i]!==t[i])return!1;return!0}(i,r):i===r)||(null!==(e=u[t])&&void 0!==e||(u[t]=_(n,t)),h.push(Q(n,t,l[t],c[t])))})),yield;const p=h.map((t=>t())).filter(Boolean);if(!p.length)return;const d=l;n.dispatchEvent(lt("motionstart",d)),Promise.all(p.map((t=>t.finished))).then((()=>{n.dispatchEvent(lt("motioncomplete",d))})).catch(y)},getDepth:()=>i,getTarget:()=>l,getOptions:()=>t,getContext:()=>s,mount:t=>(et(Boolean(t),"Animation state must be mounted with valid Element"),n=t,mt.set(n,p),h(),()=>{mt.delete(n),function(t){it&&function(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}(it,t)}(p);for(const t in a)a[t]()}),isMounted:()=>Boolean(n)};return p}const yt=e(void 0);function gt(e){return i((function(i,l){var{initial:u,animate:f,press:h,hover:d,inView:m,variants:v,style:y,transition:g,onMotionStart:b,onMotionComplete:w,onHoverStart:E,onHoverEnd:O,onPressStart:A,onPressEnd:x,onViewEnter:M,onViewLeave:P}=i,k=c(i,["initial","animate","press","hover","inView","variants","style","transition","onMotionStart","onMotionComplete","onHoverStart","onHoverEnd","onPressStart","onPressEnd","onViewEnter","onViewLeave"]);const L={initial:u,animate:f,press:h,hover:d,inView:m,variants:v,transition:g},C=vt(L,r(yt)),I=a((()=>function(t){const e={},n=[];for(let i in t){const r=t[i];V(i)&&(S[i]&&(i=S[i]),n.push(i),i=T(i));let a=Array.isArray(r)?r[0]:r;const s=j.get(i);s&&(a=p(r)?s.toDefaultUnit(r):r),e[i]=a}return n.length&&(e.transform=D(n)),e}(C.getTarget())),[]),U=l||s(null);n((()=>C.mount(U.current)),[]),n((()=>C.update(L))),function(t,e){n((()=>{const n=Object.keys(e).map((n=>{return i=t.current,r=n.replace("on","").toLowerCase(),a=e[n],i.addEventListener(r,a,s),()=>i.removeEventListener(r,a,s);var i,r,a,s}));return()=>{n.forEach((t=>t()))}}))}(U,{onMotionStart:b,onMotionComplete:w,onHoverStart:E,onHoverEnd:O,onPressStart:A,onPressEnd:x,onViewEnter:M,onViewLeave:P});const B=o(e,Object.assign(Object.assign({},k),{ref:U,style:Object.assign(Object.assign({},y),I)}));return t.createElement(yt.Provider,{value:C},B)}))}const bt=new Map,wt=new Proxy({},{get:(t,e)=>(!bt.has(e)&&bt.set(e,gt(e)),bt.get(e))});export{wt as motion};
{
"name": "@motionone/react",
"version": "10.6.0-rc.4",
"version": "10.6.0-rc.5",
"description": "A tiny, performant animation library for React",

@@ -17,3 +17,3 @@ "license": "MIT",

"dependencies": {
"@motionone/dom": "^10.6.0-rc.4",
"@motionone/dom": "^10.6.0-rc.5",
"hey-listen": "^1.0.8",

@@ -49,3 +49,3 @@ "tslib": "^2.3.1"

],
"gitHead": "e7a396e4a128cae6885d0a1a9abdc04c510d1a56"
"gitHead": "6fc943b6f24709de235d1bff0fb09e0f71de2bfb"
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc