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.8.0 to 10.8.1

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

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

"dependencies": {
"@motionone/dom": "^10.8.0",
"@motionone/dom": "^10.8.1",
"hey-listen": "^1.0.8",

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

],
"gitHead": "9ef7c138604789f340e0b5c817aecd15040f5fc4"
"gitHead": "774d18dfd7a51a973a39ef8d185d1249827c000c"
}
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