motion/dist/size-react.js

The Motion library for the web

import*as t from"react";import{useRef as e,useEffect as n,useState as r,createContext as i,useContext as s,forwardRef as o,createElement as a,useMemo as c}from"react";const l=new WeakMap;function u(t){return l.has(t)||l.set(t,{activeTransforms:[],activeAnimations:{}}),l.get(t)}const p=()=>{},f=t=>t,h=["","X","Y","Z"],y={x:"translateX",y:"translateY",z:"translateZ"},m={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},d={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:m,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:f},skew:m},v=new Map,g=t=>`--motion-${t}`,w=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{h.forEach((e=>{w.push(t+e),v.set(g(t+e),d[t])}))}));const b=(t,e)=>w.indexOf(t)-w.indexOf(e),O=new Set(w),x=t=>O.has(t),S=t=>t.sort(b).reduce(j,"").trim(),j=(t,e)=>`${t} ${e}(var(${g(e)}))`,P=t=>t.startsWith("--"),A=new Set;const T=t=>1e3*t;const V=t=>Array.isArray(t)&&"number"!=typeof t[0],k=t=>(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?M(t):t,M=([t,e,n,r])=>`cubic-bezier(${t}, ${e}, ${n}, ${r})`,D=t=>document.createElement("div").animate(t,{duration:.001}),E={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{D({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(D({opacity:[0,1]}).finished)},$={},C=Object.keys(E).reduce(((t,e)=>(t[e]=()=>(void 0===$[e]&&($[e]=E[e]()),$[e]),t)),{}),L={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},U=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function I(t,e,n,r){if(t===e&&n===r)return f;const i=e=>function(t,e,n,r,i){let s,o,a=0;do{o=e+(n-e)/2,s=U(o,r,i)-t,s>0?n=o:e=o}while(Math.abs(s)>1e-7&&++a<12);return o}(e,0,1,t,n);return t=>0===t||1===t?t:U(i(t),e,r)}var R=function(t,e,n){var r=e-t;return 0===r?1:(n-t)/r},F=function(t,e,n){return-n*t+n*e+t},W=function(t,e){return void 0===e&&(e="end"),function(n){var r,i,s,o=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,a="end"===e?Math.floor(o):Math.ceil(o);return r=0,i=1,s=a/t,Math.min(Math.max(s,r),i)}};const z={ease:I(.25,.1,.25,1),"ease-in":I(.42,0,1,1),"ease-in-out":I(.42,0,.58,1),"ease-out":I(0,0,.58,1)},q=/\((.*?)\)/;function B(t){if("function"==typeof t)return t;if(Array.isArray(t))return I(...t);if(z[t])return z[t];if(t.startsWith("steps")){const e=q.exec(t);if(e){const t=e[1].split(",");return W(parseFloat(t[0]),t[1].trim())}}return f}function K(t,e){const n=t[t.length-1];for(let r=1;r<=e;r++){const i=R(0,e,r);t.push(F(n,1,i))}}function X(t,e=function(t){const e=[0];return K(e,t-1),e}(t.length),n=f){const r=t.length,i=r-e.length;return i>0&&K(e,i),i=>{let s=0;for(;s<r-2&&!(i<e[s+1]);s++);let o=(a=R(e[s],e[s+1],i),Math.min(1,Math.max(a,0)));var a;return o=function(t,e){return V(t)?t[(n=0,r=t.length,i=e,s=r-n,((i-n)%s+s)%s+n)]:t;var n,r,i,s}(n,s)(o),F(t[s],t[s+1],o)}}class Y{constructor(t,e,{easing:n=L.easing,duration:r=L.duration,delay:i=L.delay,endDelay:s=L.endDelay,offset:o,repeat:a=L.repeat,direction:c="normal"}){this.startTime=0,this.rate=1,this.t=0,this.cancelT=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e}));const l=r*(a+1),u=X(e,o,V(n)?n.map(B):B(n));this.tick=e=>{if("finished"===this.playState){const e=u(1);return t(e),void this.resolve(e)}this.pauseTime&&(e=this.pauseTime);let n=(e-this.startTime)*this.rate;this.t=n,n/=1e3,n=Math.max(n-i,0);const o=n/r;let a=Math.floor(o),p=o%1;!p&&o>=1&&(p=1),1===p&&a--;const f=a%2;("reverse"===c||"alternate"===c&&f||"alternate-reverse"===c&&!f)&&(p=1-p);const h=n>=l?1:Math.min(p,1),y=u(h);t(y);n>=l+s?(this.playState="finished",this.resolve(y)):"idle"!==this.playState&&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(){this.playState="idle",this.tick(this.cancelT),this.reject(!1)}reverse(){this.rate*=-1}commitStyles(){this.cancelT=this.t}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,e)=>{let n=P(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!n&&0!==n){const t=v.get(e);t&&(n=t.initialValue)}return n};function G(t,e,n,r={}){let{duration:i=L.duration,delay:s=L.delay,endDelay:o=L.endDelay,repeat:a=L.repeat,easing:c=L.easing,direction:l,offset:f,allowWebkitAcceleration:h=!1}=r;const m=u(t);let d=C.waapi(),w=p;const b=x(e);b&&(y[e]&&(e=y[e]),((t,e)=>{const{activeTransforms:n}=u(t);var r,i;i=e,-1===(r=n).indexOf(i)&&r.push(i),t.style.transform=S(n)})(t,e),e=g(e));const O=v.get(e);let j,M=function(t,e,n){for(let r=0;r<t.length;r++)null===t[r]&&(t[r]=r?t[r-1]:Z(e,n));return t}((t=>Array.isArray(t)?t:[t])(n),t,e);if(function(t,e){t.activeAnimations[e]&&(!function(t){try{t.commitStyles(),t.cancel()}catch(t){}}(t.activeAnimations[e]),t.activeAnimations[e]=void 0)}(m,e),P(e)?(w=((t,e)=>n=>t.style.setProperty(e,n))(t,e),C.cssRegisterProperty()?function(t){if(!A.has(t)){A.add(t);try{const{syntax:e,initialValue:n}=v.has(t)?v.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}(e):d=!1):w=((t,e)=>n=>t.style[e]=n)(t,e),d){O&&(M=M.map((t=>"number"==typeof t?O.toDefaultUnit(t):t))),C.partialKeyframes()||1!==M.length||M.unshift(Z(t,e));const n={delay:T(s),duration:T(i),endDelay:T(o),easing:V(c)?void 0:k(c),direction:l,iterations:a+1};j=t.animate({[e]:M,offset:f,easing:V(c)?c.map(k):void 0},n),j.finished||(j.finished=new Promise(((t,e)=>{j.onfinish=t,j.oncancel=e})));const r=M[M.length-1];j.finished.then((()=>w(r))).catch(p),h||(j.playbackRate=1.000001)}else if(b&&M.every(H)){if(1===M.length&&M.unshift(Z(t,e)||(null==O?void 0:O.initialValue)||0),M=M.map((t=>"string"==typeof t?parseFloat(t):t)),O){const t=w;w=e=>t(O.toDefaultUnit(e))}j=function(t,e=[0,1],n={}){return new Y(t,e,n)}(w,M,r)}else{const t=M[M.length-1];w(O&&"number"==typeof t?O.toDefaultUnit(t):t)}return m.activeAnimations[e]=j,j}const H=t=>"number"==typeof t;const J=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):Object.assign({},t);function N(t,r,i,s,o,a){const c=e(r);n((()=>{const e={};if(new Set([...Object.keys(i),...Object.keys(c.current)]).forEach((t=>{let n=i[t];var r,s;(r=n,s=c.current[t],typeof r==typeof s&&(Array.isArray(r)&&Array.isArray(s)?function(t,e){const n=e.length;if(n!==t.length)return!1;for(let r=0;r<n;r++)if(e[r]!==t[r])return!1;return!0}(r,s):r===s))||(e[t]=n)})),Object.keys(e).length&&t.current){null==o||o(e);const n=[];for(const r in e){const i=G(t.current,r,e[r],J(s,r));i&&n.push(i)}Promise.all(n.map((t=>t.finished))).then((()=>null==a?void 0:a(e))).catch(p)}c.current=i}))}function Q(t,e,n={}){return t?"string"==typeof t?n[t]:t:e?n[e]:void 0}function _(t,e,n){if(n)for(const r in n)"options"!==r&&(t[r]=n[r],n.options&&(e[r]=J(n.options,r)))}function tt(t,e,n,i,s){const[o,a]=r(!1);return(o||i)&&_(t,e,Q(n,i,s)),[o||Boolean(i),a]}var et=i(null);var nt=0,rt=function(){return nt++},it=function(){return t=rt,null===(n=e(null)).current&&(n.current=t()),n.current;var t,n};function st(t,e,{exit:r,poses:i},{exit:o}){const[a,c]=function(){var t=s(et);if(null===t)return[!0,null];var e=t.isPresent,r=t.onExitComplete,i=t.register,o=it();return n((function(){return i(o)}),[]),!e&&r?[!1,function(){return null==r?void 0:r(o)}]:[!0]}();if(n((()=>{r||null==c||c()}),[a]),r&&!a)return _(t,e,Q(r,o,i)),c}const ot=i({});function at(r){return o((function(i,o){const l=e(null),{options:u,style:p,initial:f,hover:h,press:m,exit:d,inViewport:w,viewport:b,poses:O,onStart:j,onComplete:P,onViewportEnter:A,onViewportLeave:T,inherit:V=!0}=i,k=function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(t);i<r.length;i++)e.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(t,r[i])&&(n[r[i]]=t[r[i]])}return n}(i,["options","style","initial","hover","press","exit","inViewport","viewport","poses","onStart","onComplete","onViewportEnter","onViewportLeave","inherit"]),M={initial:!0,style:!0};let D=s(ot);V||(D={});const E=Q(p,D.style,O),$=Q(f,D.initial,O),C=Object.assign(Object.assign({},E),$),L=Object.assign(Object.assign({},$),E),U=Object.assign(Object.assign({},u),null==E?void 0:E.options),I=e(null);I.current||(I.current=function(t){const e={},n=[];for(let r in t){const i=t[r];x(r)&&(y[r]&&(r=y[r]),n.push(r),r=g(r));let s=Array.isArray(i)?i[0]:i;const o=v.get(r);o&&(s="number"==typeof i?o.toDefaultUnit(i):i),e[r]=s}return n.length&&(e.transform=S(n)),e}(C));const R=function(t,e,{hover:n,onPointerEnter:r,onPointerLeave:i,poses:s}={},{hover:o},a){const[c,l]=tt(t,e,n,o,s);return a.hover=c,n?{onPointerEnter:t=>{null==r||r(t),l(!0)},onPointerLeave:t=>{null==i||i(t),l(!1)}}:{}}(L,U,i,D,M),F=function(t,e,{press:n,onPointerDown:r,poses:i}={},{press:s},o){const[a,c]=tt(t,e,n,s,i);if(o.press=a,!n)return{};const l=()=>{c(!1),window.removeEventListener("pointerup",l)};return{onPointerDown:t=>{null==r||r(t),c(!0),window.addEventListener("pointerup",l)}}}(L,U,i,D,M);!function(t,e,r,{inViewport:i,poses:s,viewport:o={},onViewportEnter:a,onViewportLeave:c},{inViewport:l},u){const{root:p,margin:f,once:h,threshold:y}=o,[m,d]=tt(e,r,i,l,s);u.inViewport=m;let v=!!i||!!a||!!c;h&&m&&(v=!1),n((()=>{if(!v||"undefined"==typeof IntersectionObserver)return;const e=new IntersectionObserver((([t])=>{d(t.isIntersecting);const e=t.isIntersecting?a:c;e&&e(t)}),{root:null==p?void 0:p.current,rootMargin:f,threshold:y});return e.observe(t.current),()=>e.disconnect()}),[i,a,c,p,f,y])}(l,L,U,i,D,M);const W=st(L,U,i,D);N(l,C,L,U,j,(t=>{P&&P(t),W&&W()}));const z=a(r,Object.assign({},k,R,F,{style:I.current,ref:l})),q=ct.reduce(((t,e)=>(t[e]=void 0,i[e]?"string"==typeof i[e]&&M[e]&&(t[e]=i[e]):D[e]&&(t[e]=D[e]),t)),{}),B=c((()=>q),Object.values(q));return t.createElement(ot.Provider,{value:B},z)}))}const ct=["initial","style","hover","press","inViewport","exit"],lt=new Map,ut=new Proxy({},{get:(t,e)=>(lt.has(e)||lt.set(e,at(e)),lt.get(e))});export{ut as animated};