framer-motion 12.23.20 → 12.23.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/cjs/dom.js +2 -1
- package/dist/cjs/index.js +6 -1
- package/dist/dom-mini.js +1 -1
- package/dist/dom.d.ts +123 -1
- package/dist/dom.js +1 -1
- package/dist/es/components/AnimatePresence/PopChild.mjs +1 -1
- package/dist/es/index.mjs +1 -0
- package/dist/es/render/dom/scroll/attach-animation.mjs +2 -1
- package/dist/es/{components/AnimatePresence → utils}/use-composed-ref.mjs +3 -0
- package/dist/framer-motion.dev.js +31 -6
- package/dist/framer-motion.js +1 -1
- package/dist/mini.js +1 -1
- package/dist/size-rollup-animate.js +1 -1
- package/dist/size-rollup-dom-animation.js +1 -1
- package/dist/size-rollup-dom-max.js +1 -1
- package/dist/size-rollup-motion.js +1 -1
- package/dist/size-rollup-scroll.js +1 -1
- package/dist/size-rollup-waapi-animate.js +1 -1
- package/dist/types/index.d.ts +93 -82
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=(e,t,n)=>n>t?t:n<e?e:n;const t={};function n(e){return"object"==typeof e&&null!==e}function r(e){let t;return()=>(void 0===t&&(t=e()),t)}const s=e=>e,o=(e,t)=>n=>t(e(n)),i=(...e)=>e.reduce(o),a=(e,t,n)=>{const r=t-e;return 0===r?1:(n-e)/r};const c=["setup","read","resolveKeyframes","preUpdate","update","preRender","render","postRender"],u={value:null,addProjectionMetrics:null};function l(e,n){let r=!1,s=!0;const o={delta:0,timestamp:0,isProcessing:!1},i=()=>r=!0,a=c.reduce((e,t)=>(e[t]=function(e,t){let n=new Set,r=new Set,s=!1,o=!1;const i=new WeakSet;let a={delta:0,timestamp:0,isProcessing:!1},c=0;function l(t){i.has(t)&&(f.schedule(t),e()),c++,t(a)}const f={schedule:(e,t=!1,o=!1)=>{const a=o&&s?n:r;return t&&i.add(e),a.has(e)||a.add(e),e},cancel:e=>{r.delete(e),i.delete(e)},process:e=>{a=e,s?o=!0:(s=!0,[n,r]=[r,n],n.forEach(l),t&&u.value&&u.value.frameloop[t].push(c),c=0,n.clear(),s=!1,o&&(o=!1,f.process(e)))}};return f}(i,t),e),{}),{setup:l,read:f,resolveKeyframes:g,preUpdate:h,update:d,preRender:p,render:m,postRender:v}=a,y=()=>{const i=t.useManualTiming?o.timestamp:performance.now();r=!1,t.useManualTiming||(o.delta=s?1e3/60:Math.max(Math.min(i-o.timestamp,40),1)),o.timestamp=i,o.isProcessing=!0,l.process(o),f.process(o),g.process(o),h.process(o),d.process(o),p.process(o),m.process(o),v.process(o),o.isProcessing=!1,r&&n&&(s=!1,e(y))};return{schedule:c.reduce((t,n)=>{const i=a[n];return t[n]=(t,n=!1,a=!1)=>(r||(r=!0,s=!0,o.isProcessing||e(y)),i.schedule(t,n,a)),t},{}),cancel:e=>{for(let t=0;t<c.length;t++)a[c[t]].cancel(e)},state:o,steps:a}}const{schedule:f,cancel:g,state:h,steps:d}=l("undefined"!=typeof requestAnimationFrame?requestAnimationFrame:s,!0),p=(e=>t=>"string"==typeof t&&t.startsWith(e))("var(--"),m=/var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu,v={test:e=>"number"==typeof e,parse:parseFloat,transform:e=>e},y={...v,transform:t=>e(0,1,t)},b=e=>Math.round(1e5*e)/1e5,w=/-?(?:\d+(?:\.\d+)?|\.\d+)/gu;const x=/^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu,E=(e,t)=>n=>Boolean("string"==typeof n&&x.test(n)&&n.startsWith(e)||t&&!function(e){return null==e}(n)&&Object.prototype.hasOwnProperty.call(n,t)),W=(e,t,n)=>r=>{if("string"!=typeof r)return r;const[s,o,i,a]=r.match(w);return{[e]:parseFloat(s),[t]:parseFloat(o),[n]:parseFloat(i),alpha:void 0!==a?parseFloat(a):1}},L={...v,transform:t=>Math.round((t=>e(0,255,t))(t))},M={test:E("rgb","red"),parse:W("red","green","blue"),transform:({red:e,green:t,blue:n,alpha:r=1})=>"rgba("+L.transform(e)+", "+L.transform(t)+", "+L.transform(n)+", "+b(y.transform(r))+")"};const A={test:E("#"),parse:function(e){let t="",n="",r="",s="";return e.length>5?(t=e.substring(1,3),n=e.substring(3,5),r=e.substring(5,7),s=e.substring(7,9)):(t=e.substring(1,2),n=e.substring(2,3),r=e.substring(3,4),s=e.substring(4,5),t+=t,n+=n,r+=r,s+=s),{red:parseInt(t,16),green:parseInt(n,16),blue:parseInt(r,16),alpha:s?parseInt(s,16)/255:1}},transform:M.transform},B=(e=>({test:t=>"string"==typeof t&&t.endsWith(e)&&1===t.split(" ").length,parse:parseFloat,transform:t=>`${t}${e}`}))("%"),S={test:E("hsl","hue"),parse:W("hue","saturation","lightness"),transform:({hue:e,saturation:t,lightness:n,alpha:r=1})=>"hsla("+Math.round(e)+", "+B.transform(b(t))+", "+B.transform(b(n))+", "+b(y.transform(r))+")"},O={test:e=>M.test(e)||A.test(e)||S.test(e),parse:e=>M.test(e)?M.parse(e):S.test(e)?S.parse(e):A.parse(e),transform:e=>"string"==typeof e?e:e.hasOwnProperty("red")?M.transform(e):S.transform(e),getAnimatableNone:e=>{const t=O.parse(e);return t.alpha=0,O.transform(t)}},T=/(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;const z="number",H="color",F=/var\s*\(\s*--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)|#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\)|-?(?:\d+(?:\.\d+)?|\.\d+)/giu;function N(e){const t=e.toString(),n=[],r={color:[],number:[],var:[]},s=[];let o=0;const i=t.replace(F,e=>(O.test(e)?(r.color.push(o),s.push(H),n.push(O.parse(e))):e.startsWith("var(")?(r.var.push(o),s.push("var"),n.push(e)):(r.number.push(o),s.push(z),n.push(parseFloat(e))),++o,"${}")).split("${}");return{values:n,split:i,indexes:r,types:s}}function P(e){return N(e).values}function $(e){const{split:t,types:n}=N(e),r=t.length;return e=>{let s="";for(let o=0;o<r;o++)if(s+=t[o],void 0!==e[o]){const t=n[o];s+=t===z?b(e[o]):t===H?O.transform(e[o]):e[o]}return s}}const R=e=>"number"==typeof e?0:O.test(e)?O.getAnimatableNone(e):e;const k={test:function(e){return isNaN(e)&&"string"==typeof e&&(e.match(w)?.length||0)+(e.match(T)?.length||0)>0},parse:P,createTransformer:$,getAnimatableNone:function(e){const t=P(e);return $(e)(t.map(R))}};function j(e,t,n){return n<0&&(n+=1),n>1&&(n-=1),n<1/6?e+6*(t-e)*n:n<.5?t:n<2/3?e+(t-e)*(2/3-n)*6:e}function q(e,t){return n=>n>0?t:e}const I=(e,t,n)=>e+(t-e)*n,U=(e,t,n)=>{const r=e*e,s=n*(t*t-r)+r;return s<0?0:Math.sqrt(s)},G=[A,M,S];function C(e){const t=(n=e,G.find(e=>e.test(n)));var n;if(!Boolean(t))return!1;let r=t.parse(e);return t===S&&(r=function({hue:e,saturation:t,lightness:n,alpha:r}){e/=360,n/=100;let s=0,o=0,i=0;if(t/=100){const r=n<.5?n*(1+t):n+t-n*t,a=2*n-r;s=j(a,r,e+1/3),o=j(a,r,e),i=j(a,r,e-1/3)}else s=o=i=n;return{red:Math.round(255*s),green:Math.round(255*o),blue:Math.round(255*i),alpha:r}}(r)),r}const K=(e,t)=>{const n=C(e),r=C(t);if(!n||!r)return q(e,t);const s={...n};return e=>(s.red=U(n.red,r.red,e),s.green=U(n.green,r.green,e),s.blue=U(n.blue,r.blue,e),s.alpha=I(n.alpha,r.alpha,e),M.transform(s))},V=new Set(["none","hidden"]);function D(e,t){return n=>I(e,t,n)}function J(e){return"number"==typeof e?D:"string"==typeof e?p(t=e)&&m.test(t.split("/*")[0].trim())?q:O.test(e)?K:Y:Array.isArray(e)?Q:"object"==typeof e?O.test(e)?K:X:q;var t}function Q(e,t){const n=[...e],r=n.length,s=e.map((e,n)=>J(e)(e,t[n]));return e=>{for(let t=0;t<r;t++)n[t]=s[t](e);return n}}function X(e,t){const n={...e,...t},r={};for(const s in n)void 0!==e[s]&&void 0!==t[s]&&(r[s]=J(e[s])(e[s],t[s]));return e=>{for(const t in r)n[t]=r[t](e);return n}}const Y=(e,t)=>{const n=k.createTransformer(t),r=N(e),s=N(t);return r.indexes.var.length===s.indexes.var.length&&r.indexes.color.length===s.indexes.color.length&&r.indexes.number.length>=s.indexes.number.length?V.has(e)&&!s.values.length||V.has(t)&&!r.values.length?function(e,t){return V.has(e)?n=>n<=0?e:t:n=>n>=1?t:e}(e,t):i(Q(function(e,t){const n=[],r={color:0,var:0,number:0};for(let s=0;s<t.values.length;s++){const o=t.types[s],i=e.indexes[o][r[o]],a=e.values[i]??0;n[s]=a,r[o]++}return n}(r,s),s.values),n):q(e,t)};function Z(e,t,n){if("number"==typeof e&&"number"==typeof t&&"number"==typeof n)return I(e,t,n);return J(e)(e,t)}function _(n,r,{clamp:o=!0,ease:c,mixer:u}={}){const l=n.length;if(r.length,1===l)return()=>r[0];if(2===l&&r[0]===r[1])return()=>r[1];const f=n[0]===n[1];n[0]>n[l-1]&&(n=[...n].reverse(),r=[...r].reverse());const g=function(e,n,r){const o=[],a=r||t.mix||Z,c=e.length-1;for(let t=0;t<c;t++){let r=a(e[t],e[t+1]);if(n){const e=Array.isArray(n)?n[t]||s:n;r=i(e,r)}o.push(r)}return o}(r,c,u),h=g.length,d=e=>{if(f&&e<n[0])return r[0];let t=0;if(h>1)for(;t<n.length-2&&!(e<n[t+1]);t++);const s=a(n[t],n[t+1],e);return g[t](s)};return o?t=>d(e(n[0],n[l-1],t)):d}function ee(e){const t=[0];return function(e,t){const n=e[e.length-1];for(let r=1;r<=t;r++){const s=a(0,t,r);e.push(I(n,1,s))}}(t,e.length-1),t}const te=r(()=>void 0!==window.ScrollTimeline);function ne(e){return n(e)&&"offsetHeight"in e}const re=new WeakMap;let se;const oe=(e,t,r)=>(s,o)=>{return o&&o[0]?o[0][e+"Size"]:n(i=s)&&"ownerSVGElement"in i&&"getBBox"in s?s.getBBox()[t]:s[r];var i},ie=oe("inline","width","offsetWidth"),ae=oe("block","height","offsetHeight");function ce({target:e,borderBoxSize:t}){re.get(e)?.forEach(n=>{n(e,{get width(){return ie(e,t)},get height(){return ae(e,t)}})})}function ue(e){e.forEach(ce)}function le(e,t){se||"undefined"!=typeof ResizeObserver&&(se=new ResizeObserver(ue));const n=function(e){if(e instanceof EventTarget)return[e];if("string"==typeof e){const t=document.querySelectorAll(e);return t?Array.from(t):[]}return Array.from(e)}(e);return n.forEach(e=>{let n=re.get(e);n||(n=new Set,re.set(e,n)),n.add(t),se?.observe(e)}),()=>{n.forEach(e=>{const n=re.get(e);n?.delete(t),n?.size||se?.unobserve(e)})}}const fe=new Set;let ge;function he(e){return fe.add(e),ge||(ge=()=>{const e={get width(){return window.innerWidth},get height(){return window.innerHeight}};fe.forEach(t=>t(e))},window.addEventListener("resize",ge)),()=>{fe.delete(e),fe.size||"function"!=typeof ge||(window.removeEventListener("resize",ge),ge=void 0)}}function de(e,t){let n;const r=()=>{const{currentTime:r}=t,s=(null===r?0:r.value)/100;n!==s&&e(s),n=s};return f.preUpdate(r,!0),()=>g(r)}const pe={x:{length:"Width",position:"Left"},y:{length:"Height",position:"Top"}};function me(e,t,n,r){const s=n[t],{length:o,position:i}=pe[t],c=s.current,u=n.time;s.current=e[`scroll${i}`],s.scrollLength=e[`scroll${o}`]-e[`client${o}`],s.offset.length=0,s.offset[0]=0,s.offset[1]=s.scrollLength,s.progress=a(0,s.scrollLength,s.current);const l=r-u;var f,g;s.velocity=l>50?0:(f=s.current-c,(g=l)?f*(1e3/g):0)}const ve={start:0,center:.5,end:1};function ye(e,t,n=0){let r=0;if(e in ve&&(e=ve[e]),"string"==typeof e){const t=parseFloat(e);e.endsWith("px")?r=t:e.endsWith("%")?e=t/100:e.endsWith("vw")?r=t/100*document.documentElement.clientWidth:e.endsWith("vh")?r=t/100*document.documentElement.clientHeight:e=t}return"number"==typeof e&&(r=t*e),n+r}const be=[0,0];function we(e,t,n,r){let s=Array.isArray(e)?e:be,o=0,i=0;return"number"==typeof e?s=[e,e]:"string"==typeof e&&(s=(e=e.trim()).includes(" ")?e.split(" "):[e,ve[e]?e:"0"]),o=ye(s[0],n,r),i=ye(s[1],t),o-i}const xe={Enter:[[0,1],[1,1]],Exit:[[0,0],[1,0]],Any:[[1,0],[0,1]],All:[[0,0],[1,1]]},Ee={x:0,y:0};function We(t,n,r){const{offset:s=xe.All}=r,{target:o=t,axis:i="y"}=r,a="y"===i?"height":"width",c=o!==t?function(e,t){const n={x:0,y:0};let r=e;for(;r&&r!==t;)if(ne(r))n.x+=r.offsetLeft,n.y+=r.offsetTop,r=r.offsetParent;else if("svg"===r.tagName){const e=r.getBoundingClientRect();r=r.parentElement;const t=r.getBoundingClientRect();n.x+=e.left-t.left,n.y+=e.top-t.top}else{if(!(r instanceof SVGGraphicsElement))break;{const{x:e,y:t}=r.getBBox();n.x+=e,n.y+=t;let s=null,o=r.parentNode;for(;!s;)"svg"===o.tagName&&(s=o),o=r.parentNode;r=s}}return n}(o,t):Ee,u=o===t?{width:t.scrollWidth,height:t.scrollHeight}:function(e){return"getBBox"in e&&"svg"!==e.tagName?e.getBBox():{width:e.clientWidth,height:e.clientHeight}}(o),l={width:t.clientWidth,height:t.clientHeight};n[i].offset.length=0;let f=!n[i].interpolate;const g=s.length;for(let e=0;e<g;e++){const t=we(s[e],l[a],u[a],c[i]);f||t===n[i].interpolatorOffsets[e]||(f=!0),n[i].offset[e]=t}f&&(n[i].interpolate=_(n[i].offset,ee(s),{clamp:!1}),n[i].interpolatorOffsets=[...n[i].offset]),n[i].progress=e(0,1,n[i].interpolate(n[i].current))}function Le(e,t,n,r={}){return{measure:t=>{!function(e,t=e,n){if(n.x.targetOffset=0,n.y.targetOffset=0,t!==e){let r=t;for(;r&&r!==e;)n.x.targetOffset+=r.offsetLeft,n.y.targetOffset+=r.offsetTop,r=r.offsetParent}n.x.targetLength=t===e?t.scrollWidth:t.clientWidth,n.y.targetLength=t===e?t.scrollHeight:t.clientHeight,n.x.containerLength=e.clientWidth,n.y.containerLength=e.clientHeight}(e,r.target,n),function(e,t,n){me(e,"x",t,n),me(e,"y",t,n),t.time=n}(e,n,t),(r.offset||r.target)&&We(e,n,r)},notify:()=>t(n)}}const Me=new WeakMap,Ae=new WeakMap,Be=new WeakMap,Se=e=>e===document.scrollingElement?window:e;function Oe(e,{container:t=document.scrollingElement,...n}={}){if(!t)return s;let r=Be.get(t);r||(r=new Set,Be.set(t,r));const o=Le(t,e,{time:0,x:{current:0,offset:[],progress:0,scrollLength:0,targetOffset:0,targetLength:0,containerLength:0,velocity:0},y:{current:0,offset:[],progress:0,scrollLength:0,targetOffset:0,targetLength:0,containerLength:0,velocity:0}},n);if(r.add(o),!Me.has(t)){const e=()=>{for(const e of r)e.measure(h.timestamp);f.preUpdate(n)},n=()=>{for(const e of r)e.notify()},s=()=>f.read(e);Me.set(t,s);const o=Se(t);window.addEventListener("resize",s,{passive:!0}),t!==document.documentElement&&Ae.set(t,(a=s,"function"==typeof(i=t)?he(i):le(i,a))),o.addEventListener("scroll",s,{passive:!0}),s()}var i,a;const c=Me.get(t);return f.read(c,!1,!0),()=>{g(c);const e=Be.get(t);if(!e)return;if(e.delete(o),e.size)return;const n=Me.get(t);Me.delete(t),n&&(Se(t).removeEventListener("scroll",n),Ae.get(t)?.(),window.removeEventListener("resize",n))}}const Te=new Map;function ze({source:e,container:t,...n}){const{axis:r}=n;e&&(t=e);const s=Te.get(t)??new Map;Te.set(t,s);const o=n.target??"self",i=s.get(o)??{},a=r+(n.offset??[]).join(",");return i[a]||(i[a]=!n.target&&te()?new ScrollTimeline({source:t,axis:r}):function(e){const t={value:0},n=Oe(n=>{t.value=100*n[e.axis].progress},e);return{currentTime:t,cancel:n}}({container:t,...n})),i[a]}function He(e,{axis:t="y",container:n=document.scrollingElement,...r}={}){if(!n)return s;const o={axis:t,container:n,...r};return"function"==typeof e?function(e,t){return function(e){return 2===e.length}(e)?Oe(n=>{e(n[t.axis].progress,n)},t):de(e,ze(t))}(e,o):function(e,t){const n=ze(t);return e.attachTimeline({timeline:t.target?void 0:n,observe:e=>(e.pause(),de(t=>{e.time=e.duration*t},n))})}(e,o)}export{He as scroll};
|
|
1
|
+
const e=(e,t,n)=>n>t?t:n<e?e:n;const t={};function n(e){return"object"==typeof e&&null!==e}function r(e){let t;return()=>(void 0===t&&(t=e()),t)}const s=e=>e,o=(e,t)=>n=>t(e(n)),i=(...e)=>e.reduce(o),a=(e,t,n)=>{const r=t-e;return 0===r?1:(n-e)/r};const c=["setup","read","resolveKeyframes","preUpdate","update","preRender","render","postRender"],u={value:null,addProjectionMetrics:null};function l(e,n){let r=!1,s=!0;const o={delta:0,timestamp:0,isProcessing:!1},i=()=>r=!0,a=c.reduce((e,t)=>(e[t]=function(e,t){let n=new Set,r=new Set,s=!1,o=!1;const i=new WeakSet;let a={delta:0,timestamp:0,isProcessing:!1},c=0;function l(t){i.has(t)&&(f.schedule(t),e()),c++,t(a)}const f={schedule:(e,t=!1,o=!1)=>{const a=o&&s?n:r;return t&&i.add(e),a.has(e)||a.add(e),e},cancel:e=>{r.delete(e),i.delete(e)},process:e=>{a=e,s?o=!0:(s=!0,[n,r]=[r,n],n.forEach(l),t&&u.value&&u.value.frameloop[t].push(c),c=0,n.clear(),s=!1,o&&(o=!1,f.process(e)))}};return f}(i,t),e),{}),{setup:l,read:f,resolveKeyframes:g,preUpdate:h,update:d,preRender:p,render:m,postRender:v}=a,y=()=>{const i=t.useManualTiming?o.timestamp:performance.now();r=!1,t.useManualTiming||(o.delta=s?1e3/60:Math.max(Math.min(i-o.timestamp,40),1)),o.timestamp=i,o.isProcessing=!0,l.process(o),f.process(o),g.process(o),h.process(o),d.process(o),p.process(o),m.process(o),v.process(o),o.isProcessing=!1,r&&n&&(s=!1,e(y))};return{schedule:c.reduce((t,n)=>{const i=a[n];return t[n]=(t,n=!1,a=!1)=>(r||(r=!0,s=!0,o.isProcessing||e(y)),i.schedule(t,n,a)),t},{}),cancel:e=>{for(let t=0;t<c.length;t++)a[c[t]].cancel(e)},state:o,steps:a}}const{schedule:f,cancel:g,state:h,steps:d}=l("undefined"!=typeof requestAnimationFrame?requestAnimationFrame:s,!0),p=(e=>t=>"string"==typeof t&&t.startsWith(e))("var(--"),m=/var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu,v={test:e=>"number"==typeof e,parse:parseFloat,transform:e=>e},y={...v,transform:t=>e(0,1,t)},b=e=>Math.round(1e5*e)/1e5,w=/-?(?:\d+(?:\.\d+)?|\.\d+)/gu;const x=/^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu,E=(e,t)=>n=>Boolean("string"==typeof n&&x.test(n)&&n.startsWith(e)||t&&!function(e){return null==e}(n)&&Object.prototype.hasOwnProperty.call(n,t)),W=(e,t,n)=>r=>{if("string"!=typeof r)return r;const[s,o,i,a]=r.match(w);return{[e]:parseFloat(s),[t]:parseFloat(o),[n]:parseFloat(i),alpha:void 0!==a?parseFloat(a):1}},L={...v,transform:t=>Math.round((t=>e(0,255,t))(t))},M={test:E("rgb","red"),parse:W("red","green","blue"),transform:({red:e,green:t,blue:n,alpha:r=1})=>"rgba("+L.transform(e)+", "+L.transform(t)+", "+L.transform(n)+", "+b(y.transform(r))+")"};const A={test:E("#"),parse:function(e){let t="",n="",r="",s="";return e.length>5?(t=e.substring(1,3),n=e.substring(3,5),r=e.substring(5,7),s=e.substring(7,9)):(t=e.substring(1,2),n=e.substring(2,3),r=e.substring(3,4),s=e.substring(4,5),t+=t,n+=n,r+=r,s+=s),{red:parseInt(t,16),green:parseInt(n,16),blue:parseInt(r,16),alpha:s?parseInt(s,16)/255:1}},transform:M.transform},B=(e=>({test:t=>"string"==typeof t&&t.endsWith(e)&&1===t.split(" ").length,parse:parseFloat,transform:t=>`${t}${e}`}))("%"),S={test:E("hsl","hue"),parse:W("hue","saturation","lightness"),transform:({hue:e,saturation:t,lightness:n,alpha:r=1})=>"hsla("+Math.round(e)+", "+B.transform(b(t))+", "+B.transform(b(n))+", "+b(y.transform(r))+")"},O={test:e=>M.test(e)||A.test(e)||S.test(e),parse:e=>M.test(e)?M.parse(e):S.test(e)?S.parse(e):A.parse(e),transform:e=>"string"==typeof e?e:e.hasOwnProperty("red")?M.transform(e):S.transform(e),getAnimatableNone:e=>{const t=O.parse(e);return t.alpha=0,O.transform(t)}},T=/(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;const z="number",H="color",F=/var\s*\(\s*--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)|#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\)|-?(?:\d+(?:\.\d+)?|\.\d+)/giu;function N(e){const t=e.toString(),n=[],r={color:[],number:[],var:[]},s=[];let o=0;const i=t.replace(F,e=>(O.test(e)?(r.color.push(o),s.push(H),n.push(O.parse(e))):e.startsWith("var(")?(r.var.push(o),s.push("var"),n.push(e)):(r.number.push(o),s.push(z),n.push(parseFloat(e))),++o,"${}")).split("${}");return{values:n,split:i,indexes:r,types:s}}function P(e){return N(e).values}function $(e){const{split:t,types:n}=N(e),r=t.length;return e=>{let s="";for(let o=0;o<r;o++)if(s+=t[o],void 0!==e[o]){const t=n[o];s+=t===z?b(e[o]):t===H?O.transform(e[o]):e[o]}return s}}const R=e=>"number"==typeof e?0:O.test(e)?O.getAnimatableNone(e):e;const k={test:function(e){return isNaN(e)&&"string"==typeof e&&(e.match(w)?.length||0)+(e.match(T)?.length||0)>0},parse:P,createTransformer:$,getAnimatableNone:function(e){const t=P(e);return $(e)(t.map(R))}};function j(e,t,n){return n<0&&(n+=1),n>1&&(n-=1),n<1/6?e+6*(t-e)*n:n<.5?t:n<2/3?e+(t-e)*(2/3-n)*6:e}function q(e,t){return n=>n>0?t:e}const I=(e,t,n)=>e+(t-e)*n,U=(e,t,n)=>{const r=e*e,s=n*(t*t-r)+r;return s<0?0:Math.sqrt(s)},G=[A,M,S];function C(e){const t=(n=e,G.find(e=>e.test(n)));var n;if(!Boolean(t))return!1;let r=t.parse(e);return t===S&&(r=function({hue:e,saturation:t,lightness:n,alpha:r}){e/=360,n/=100;let s=0,o=0,i=0;if(t/=100){const r=n<.5?n*(1+t):n+t-n*t,a=2*n-r;s=j(a,r,e+1/3),o=j(a,r,e),i=j(a,r,e-1/3)}else s=o=i=n;return{red:Math.round(255*s),green:Math.round(255*o),blue:Math.round(255*i),alpha:r}}(r)),r}const K=(e,t)=>{const n=C(e),r=C(t);if(!n||!r)return q(e,t);const s={...n};return e=>(s.red=U(n.red,r.red,e),s.green=U(n.green,r.green,e),s.blue=U(n.blue,r.blue,e),s.alpha=I(n.alpha,r.alpha,e),M.transform(s))},V=new Set(["none","hidden"]);function D(e,t){return n=>I(e,t,n)}function J(e){return"number"==typeof e?D:"string"==typeof e?p(t=e)&&m.test(t.split("/*")[0].trim())?q:O.test(e)?K:Y:Array.isArray(e)?Q:"object"==typeof e?O.test(e)?K:X:q;var t}function Q(e,t){const n=[...e],r=n.length,s=e.map((e,n)=>J(e)(e,t[n]));return e=>{for(let t=0;t<r;t++)n[t]=s[t](e);return n}}function X(e,t){const n={...e,...t},r={};for(const s in n)void 0!==e[s]&&void 0!==t[s]&&(r[s]=J(e[s])(e[s],t[s]));return e=>{for(const t in r)n[t]=r[t](e);return n}}const Y=(e,t)=>{const n=k.createTransformer(t),r=N(e),s=N(t);return r.indexes.var.length===s.indexes.var.length&&r.indexes.color.length===s.indexes.color.length&&r.indexes.number.length>=s.indexes.number.length?V.has(e)&&!s.values.length||V.has(t)&&!r.values.length?function(e,t){return V.has(e)?n=>n<=0?e:t:n=>n>=1?t:e}(e,t):i(Q(function(e,t){const n=[],r={color:0,var:0,number:0};for(let s=0;s<t.values.length;s++){const o=t.types[s],i=e.indexes[o][r[o]],a=e.values[i]??0;n[s]=a,r[o]++}return n}(r,s),s.values),n):q(e,t)};function Z(e,t,n){if("number"==typeof e&&"number"==typeof t&&"number"==typeof n)return I(e,t,n);return J(e)(e,t)}function _(n,r,{clamp:o=!0,ease:c,mixer:u}={}){const l=n.length;if(r.length,1===l)return()=>r[0];if(2===l&&r[0]===r[1])return()=>r[1];const f=n[0]===n[1];n[0]>n[l-1]&&(n=[...n].reverse(),r=[...r].reverse());const g=function(e,n,r){const o=[],a=r||t.mix||Z,c=e.length-1;for(let t=0;t<c;t++){let r=a(e[t],e[t+1]);if(n){const e=Array.isArray(n)?n[t]||s:n;r=i(e,r)}o.push(r)}return o}(r,c,u),h=g.length,d=e=>{if(f&&e<n[0])return r[0];let t=0;if(h>1)for(;t<n.length-2&&!(e<n[t+1]);t++);const s=a(n[t],n[t+1],e);return g[t](s)};return o?t=>d(e(n[0],n[l-1],t)):d}function ee(e){const t=[0];return function(e,t){const n=e[e.length-1];for(let r=1;r<=t;r++){const s=a(0,t,r);e.push(I(n,1,s))}}(t,e.length-1),t}const te=r(()=>void 0!==window.ScrollTimeline);function ne(e){return n(e)&&"offsetHeight"in e}const re=new WeakMap;let se;const oe=(e,t,r)=>(s,o)=>{return o&&o[0]?o[0][e+"Size"]:n(i=s)&&"ownerSVGElement"in i&&"getBBox"in s?s.getBBox()[t]:s[r];var i},ie=oe("inline","width","offsetWidth"),ae=oe("block","height","offsetHeight");function ce({target:e,borderBoxSize:t}){re.get(e)?.forEach(n=>{n(e,{get width(){return ie(e,t)},get height(){return ae(e,t)}})})}function ue(e){e.forEach(ce)}function le(e,t){se||"undefined"!=typeof ResizeObserver&&(se=new ResizeObserver(ue));const n=function(e){if(e instanceof EventTarget)return[e];if("string"==typeof e){const t=document.querySelectorAll(e);return t?Array.from(t):[]}return Array.from(e)}(e);return n.forEach(e=>{let n=re.get(e);n||(n=new Set,re.set(e,n)),n.add(t),se?.observe(e)}),()=>{n.forEach(e=>{const n=re.get(e);n?.delete(t),n?.size||se?.unobserve(e)})}}const fe=new Set;let ge;function he(e){return fe.add(e),ge||(ge=()=>{const e={get width(){return window.innerWidth},get height(){return window.innerHeight}};fe.forEach(t=>t(e))},window.addEventListener("resize",ge)),()=>{fe.delete(e),fe.size||"function"!=typeof ge||(window.removeEventListener("resize",ge),ge=void 0)}}function de(e,t){let n;const r=()=>{const{currentTime:r}=t,s=(null===r?0:r.value)/100;n!==s&&e(s),n=s};return f.preUpdate(r,!0),()=>g(r)}const pe={x:{length:"Width",position:"Left"},y:{length:"Height",position:"Top"}};function me(e,t,n,r){const s=n[t],{length:o,position:i}=pe[t],c=s.current,u=n.time;s.current=e[`scroll${i}`],s.scrollLength=e[`scroll${o}`]-e[`client${o}`],s.offset.length=0,s.offset[0]=0,s.offset[1]=s.scrollLength,s.progress=a(0,s.scrollLength,s.current);const l=r-u;var f,g;s.velocity=l>50?0:(f=s.current-c,(g=l)?f*(1e3/g):0)}const ve={start:0,center:.5,end:1};function ye(e,t,n=0){let r=0;if(e in ve&&(e=ve[e]),"string"==typeof e){const t=parseFloat(e);e.endsWith("px")?r=t:e.endsWith("%")?e=t/100:e.endsWith("vw")?r=t/100*document.documentElement.clientWidth:e.endsWith("vh")?r=t/100*document.documentElement.clientHeight:e=t}return"number"==typeof e&&(r=t*e),n+r}const be=[0,0];function we(e,t,n,r){let s=Array.isArray(e)?e:be,o=0,i=0;return"number"==typeof e?s=[e,e]:"string"==typeof e&&(s=(e=e.trim()).includes(" ")?e.split(" "):[e,ve[e]?e:"0"]),o=ye(s[0],n,r),i=ye(s[1],t),o-i}const xe={Enter:[[0,1],[1,1]],Exit:[[0,0],[1,0]],Any:[[1,0],[0,1]],All:[[0,0],[1,1]]},Ee={x:0,y:0};function We(t,n,r){const{offset:s=xe.All}=r,{target:o=t,axis:i="y"}=r,a="y"===i?"height":"width",c=o!==t?function(e,t){const n={x:0,y:0};let r=e;for(;r&&r!==t;)if(ne(r))n.x+=r.offsetLeft,n.y+=r.offsetTop,r=r.offsetParent;else if("svg"===r.tagName){const e=r.getBoundingClientRect();r=r.parentElement;const t=r.getBoundingClientRect();n.x+=e.left-t.left,n.y+=e.top-t.top}else{if(!(r instanceof SVGGraphicsElement))break;{const{x:e,y:t}=r.getBBox();n.x+=e,n.y+=t;let s=null,o=r.parentNode;for(;!s;)"svg"===o.tagName&&(s=o),o=r.parentNode;r=s}}return n}(o,t):Ee,u=o===t?{width:t.scrollWidth,height:t.scrollHeight}:function(e){return"getBBox"in e&&"svg"!==e.tagName?e.getBBox():{width:e.clientWidth,height:e.clientHeight}}(o),l={width:t.clientWidth,height:t.clientHeight};n[i].offset.length=0;let f=!n[i].interpolate;const g=s.length;for(let e=0;e<g;e++){const t=we(s[e],l[a],u[a],c[i]);f||t===n[i].interpolatorOffsets[e]||(f=!0),n[i].offset[e]=t}f&&(n[i].interpolate=_(n[i].offset,ee(s),{clamp:!1}),n[i].interpolatorOffsets=[...n[i].offset]),n[i].progress=e(0,1,n[i].interpolate(n[i].current))}function Le(e,t,n,r={}){return{measure:t=>{!function(e,t=e,n){if(n.x.targetOffset=0,n.y.targetOffset=0,t!==e){let r=t;for(;r&&r!==e;)n.x.targetOffset+=r.offsetLeft,n.y.targetOffset+=r.offsetTop,r=r.offsetParent}n.x.targetLength=t===e?t.scrollWidth:t.clientWidth,n.y.targetLength=t===e?t.scrollHeight:t.clientHeight,n.x.containerLength=e.clientWidth,n.y.containerLength=e.clientHeight}(e,r.target,n),function(e,t,n){me(e,"x",t,n),me(e,"y",t,n),t.time=n}(e,n,t),(r.offset||r.target)&&We(e,n,r)},notify:()=>t(n)}}const Me=new WeakMap,Ae=new WeakMap,Be=new WeakMap,Se=e=>e===document.scrollingElement?window:e;function Oe(e,{container:t=document.scrollingElement,...n}={}){if(!t)return s;let r=Be.get(t);r||(r=new Set,Be.set(t,r));const o=Le(t,e,{time:0,x:{current:0,offset:[],progress:0,scrollLength:0,targetOffset:0,targetLength:0,containerLength:0,velocity:0},y:{current:0,offset:[],progress:0,scrollLength:0,targetOffset:0,targetLength:0,containerLength:0,velocity:0}},n);if(r.add(o),!Me.has(t)){const e=()=>{for(const e of r)e.measure(h.timestamp);f.preUpdate(n)},n=()=>{for(const e of r)e.notify()},s=()=>f.read(e);Me.set(t,s);const o=Se(t);window.addEventListener("resize",s,{passive:!0}),t!==document.documentElement&&Ae.set(t,(a=s,"function"==typeof(i=t)?he(i):le(i,a))),o.addEventListener("scroll",s,{passive:!0}),s()}var i,a;const c=Me.get(t);return f.read(c,!1,!0),()=>{g(c);const e=Be.get(t);if(!e)return;if(e.delete(o),e.size)return;const n=Me.get(t);Me.delete(t),n&&(Se(t).removeEventListener("scroll",n),Ae.get(t)?.(),window.removeEventListener("resize",n))}}const Te=new Map;function ze({source:e,container:t,...n}){const{axis:r}=n;e&&(t=e);const s=Te.get(t)??new Map;Te.set(t,s);const o=n.target??"self",i=s.get(o)??{},a=r+(n.offset??[]).join(",");return i[a]||(i[a]=!n.target&&te()?new ScrollTimeline({source:t,axis:r}):function(e){const t={value:0},n=Oe(n=>{t.value=100*n[e.axis].progress},e);return{currentTime:t,cancel:n}}({container:t,...n})),i[a]}function He(e,{axis:t="y",container:n=document.scrollingElement,...r}={}){if(!n)return s;const o={axis:t,container:n,...r};return"function"==typeof e?function(e,t){return function(e){return 2===e.length}(e)?Oe(n=>{e(n[t.axis].progress,n)},t):de(e,ze(t))}(e,o):function(e,t){const n=ze(t);return e.attachTimeline({timeline:t.target?void 0:n,observe:e=>(e.pause(),de(t=>{e.time=e.iterationDuration*t},n))})}(e,o)}export{He as scroll};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
function t(t){let e;return()=>(void 0===e&&(e=t()),e)}const e=t=>t,i=t=>1e3*t,n=t=>t/1e3,s=t=>null!==t;class a{constructor(){this.updateFinished()}get finished(){return this._finished}updateFinished(){this._finished=new Promise(t=>{this.resolve=t})}notifyFinished(){this.resolve()}then(t,e){return this.finished.then(t,e)}}function o(t){for(let e=1;e<t.length;e++)t[e]??(t[e]=t[e-1])}const r=t=>t.startsWith("--");const l=t(()=>void 0!==window.ScrollTimeline),u={};function h(e,i){const n=t(e);return()=>u[i]??n()}const
|
|
1
|
+
function t(t){let e;return()=>(void 0===e&&(e=t()),e)}const e=t=>t,i=t=>1e3*t,n=t=>t/1e3,s=t=>null!==t;class a{constructor(){this.updateFinished()}get finished(){return this._finished}updateFinished(){this._finished=new Promise(t=>{this.resolve=t})}notifyFinished(){this.resolve()}then(t,e){return this.finished.then(t,e)}}function o(t){for(let e=1;e<t.length;e++)t[e]??(t[e]=t[e-1])}const r=t=>t.startsWith("--");const l=t(()=>void 0!==window.ScrollTimeline),u={};function h(e,i){const n=t(e);return()=>u[i]??n()}const d=h(()=>{try{document.createElement("div").animate({opacity:0},{easing:"linear(0, 1)"})}catch(t){return!1}return!0},"linearEasing"),m=([t,e,i,n])=>`cubic-bezier(${t}, ${e}, ${i}, ${n})`,c={linear:"linear",ease:"ease",easeIn:"ease-in",easeOut:"ease-out",easeInOut:"ease-in-out",circIn:m([0,.65,.55,1]),circOut:m([.55,0,1,.45]),backIn:m([.31,.01,.66,-.59]),backOut:m([.33,1.53,.69,.99])};function p(t,e){return t?"function"==typeof t?d()?((t,e,i=10)=>{let n="";const s=Math.max(Math.round(e/i),2);for(let e=0;e<s;e++)n+=Math.round(1e4*t(e/(s-1)))/1e4+", ";return`linear(${n.substring(0,n.length-2)})`})(t,e):"ease-out":(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?m(t):Array.isArray(t)?t.map(t=>p(t,e)||c.easeOut):c[t]:void 0}class f extends a{constructor(t){if(super(),this.finishedTime=null,this.isStopped=!1,!t)return;const{element:e,name:i,keyframes:n,pseudoElement:a,allowFlatten:o=!1,finalKeyframe:l,onComplete:u}=t;this.isPseudoElement=Boolean(a),this.allowFlatten=o,this.options=t,t.type;const h=function({type:t,...e}){return function(t){return"function"==typeof t&&"applyToOptions"in t}(t)&&d()?t.applyToOptions(e):(e.duration??(e.duration=300),e.ease??(e.ease="easeOut"),e)}(t);this.animation=function(t,e,i,{delay:n=0,duration:s=300,repeat:a=0,repeatType:o="loop",ease:r="easeOut",times:l}={},u){const h={[e]:i};l&&(h.offset=l);const d=p(r,s);Array.isArray(d)&&(h.easing=d);const m={delay:n,duration:s,easing:Array.isArray(d)?"linear":d,fill:"both",iterations:a+1,direction:"reverse"===o?"alternate":"normal"};return u&&(m.pseudoElement=u),t.animate(h,m)}(e,i,n,h,a),!1===h.autoplay&&this.animation.pause(),this.animation.onfinish=()=>{if(this.finishedTime=this.time,!a){const t=function(t,{repeat:e,repeatType:i="loop"},n,a=1){const o=t.filter(s),r=a<0||e&&"loop"!==i&&e%2==1?0:o.length-1;return r&&void 0!==n?n:o[r]}(n,this.options,l,this.speed);this.updateMotionValue?this.updateMotionValue(t):function(t,e,i){r(e)?t.style.setProperty(e,i):t.style[e]=i}(e,i,t),this.animation.cancel()}u?.(),this.notifyFinished()}}play(){this.isStopped||(this.animation.play(),"finished"===this.state&&this.updateFinished())}pause(){this.animation.pause()}complete(){this.animation.finish?.()}cancel(){try{this.animation.cancel()}catch(t){}}stop(){if(this.isStopped)return;this.isStopped=!0;const{state:t}=this;"idle"!==t&&"finished"!==t&&(this.updateMotionValue?this.updateMotionValue():this.commitStyles(),this.isPseudoElement||this.cancel())}commitStyles(){this.isPseudoElement||this.animation.commitStyles?.()}get duration(){const t=this.animation.effect?.getComputedTiming?.().duration||0;return n(Number(t))}get iterationDuration(){const{delay:t=0}=this.options||{};return this.duration+n(t)}get time(){return n(Number(this.animation.currentTime)||0)}set time(t){this.finishedTime=null,this.animation.currentTime=i(t)}get speed(){return this.animation.playbackRate}set speed(t){t<0&&(this.finishedTime=null),this.animation.playbackRate=t}get state(){return null!==this.finishedTime?"finished":this.animation.playState}get startTime(){return Number(this.animation.startTime)}set startTime(t){this.animation.startTime=t}attachTimeline({timeline:t,observe:i}){return this.allowFlatten&&this.animation.effect?.updateTiming({easing:"linear"}),this.animation.onfinish=null,t&&l()?(this.animation.timeline=t,e):i(this)}}class y{constructor(t){this.stop=()=>this.runAll("stop"),this.animations=t.filter(Boolean)}get finished(){return Promise.all(this.animations.map(t=>t.finished))}getAll(t){return this.animations[0][t]}setAll(t,e){for(let i=0;i<this.animations.length;i++)this.animations[i][t]=e}attachTimeline(t){const e=this.animations.map(e=>e.attachTimeline(t));return()=>{e.forEach((t,e)=>{t&&t(),this.animations[e].stop()})}}get time(){return this.getAll("time")}set time(t){this.setAll("time",t)}get speed(){return this.getAll("speed")}set speed(t){this.setAll("speed",t)}get state(){return this.getAll("state")}get startTime(){return this.getAll("startTime")}get duration(){return g(this.animations,"duration")}get iterationDuration(){return g(this.animations,"iterationDuration")}runAll(t){this.animations.forEach(e=>e[t]())}play(){this.runAll("play")}pause(){this.runAll("pause")}cancel(){this.runAll("cancel")}complete(){this.runAll("complete")}}function g(t,e){let i=0;for(let n=0;n<t.length;n++){const s=t[n][e];null!==s&&s>i&&(i=s)}return i}class T extends y{then(t,e){return this.finished.finally(t).then(()=>{})}}const b=new WeakMap,A=(t,e="")=>`${t}:${e}`;function w(t){const e=b.get(t)||new Map;return b.set(t,e),e}function v(t,e){return t?.[e]??t?.default??t}const E=new Set(["borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderRadius","radius","borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius","width","maxWidth","height","maxHeight","top","right","bottom","left","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginTop","marginRight","marginBottom","marginLeft","backgroundPositionX","backgroundPositionY"]);function R(t,e){for(let i=0;i<t.length;i++)"number"==typeof t[i]&&E.has(e)&&(t[i]=t[i]+"px")}function S(t,e){const i=window.getComputedStyle(t);return r(e)?i.getPropertyValue(e):i[e]}function k(t,e,n,s){const a=function(t,e){if(t instanceof EventTarget)return[t];if("string"==typeof t){let i=document;e&&(i=e.current);const n=i.querySelectorAll(t);return n?Array.from(n):[]}return Array.from(t)}(t,s),r=a.length,l=[];for(let t=0;t<r;t++){const s=a[t],o={...n};"function"==typeof o.delay&&(o.delay=o.delay(t,r));for(const t in e){let n=e[t];Array.isArray(n)||(n=[n]);const a={...v(o,t)};a.duration&&(a.duration=i(a.duration)),a.delay&&(a.delay=i(a.delay));const r=w(s),u=A(t,a.pseudoElement||""),h=r.get(u);h&&h.stop(),l.push({map:r,key:u,unresolvedKeyframes:n,options:{...a,element:s,name:t,allowFlatten:!o.type&&!o.ease}})}}for(let t=0;t<l.length;t++){const{unresolvedKeyframes:e,options:i}=l[t],{element:n,name:s,pseudoElement:a}=i;a||null!==e[0]||(e[0]=S(n,s)),o(e),R(e,s),!a&&e.length<2&&e.unshift(S(n,s)),i.keyframes=e}const u=[];for(let t=0;t<l.length;t++){const{map:e,key:i,options:n}=l[t],s=new f(n);e.set(i,s),s.finished.finally(()=>e.delete(i)),u.push(s)}return u}const F=t=>function(e,i,n){return new T(k(e,i,n,t))},M=F();export{M as animateMini,F as createScopedWaapiAnimate};
|
package/dist/types/index.d.ts
CHANGED
|
@@ -298,87 +298,6 @@ interface MotionConfigProps extends Partial<MotionConfigContext> {
|
|
|
298
298
|
*/
|
|
299
299
|
declare function MotionConfig({ children, isValidProp, ...config }: MotionConfigProps): react_jsx_runtime.JSX.Element;
|
|
300
300
|
|
|
301
|
-
type ReorderElementTag = keyof HTMLElements;
|
|
302
|
-
type DefaultGroupElement = "ul";
|
|
303
|
-
type DefaultItemElement = "li";
|
|
304
|
-
|
|
305
|
-
interface Props$1<V, TagName extends ReorderElementTag = DefaultGroupElement> {
|
|
306
|
-
/**
|
|
307
|
-
* A HTML element to render this component as. Defaults to `"ul"`.
|
|
308
|
-
*
|
|
309
|
-
* @public
|
|
310
|
-
*/
|
|
311
|
-
as?: TagName;
|
|
312
|
-
/**
|
|
313
|
-
* The axis to reorder along. By default, items will be draggable on this axis.
|
|
314
|
-
* To make draggable on both axes, set `<Reorder.Item drag />`
|
|
315
|
-
*
|
|
316
|
-
* @public
|
|
317
|
-
*/
|
|
318
|
-
axis?: "x" | "y";
|
|
319
|
-
/**
|
|
320
|
-
* A callback to fire with the new value order. For instance, if the values
|
|
321
|
-
* are provided as a state from `useState`, this could be the set state function.
|
|
322
|
-
*
|
|
323
|
-
* @public
|
|
324
|
-
*/
|
|
325
|
-
onReorder: (newOrder: V[]) => void;
|
|
326
|
-
/**
|
|
327
|
-
* The latest values state.
|
|
328
|
-
*
|
|
329
|
-
* ```jsx
|
|
330
|
-
* function Component() {
|
|
331
|
-
* const [items, setItems] = useState([0, 1, 2])
|
|
332
|
-
*
|
|
333
|
-
* return (
|
|
334
|
-
* <Reorder.Group values={items} onReorder={setItems}>
|
|
335
|
-
* {items.map((item) => <Reorder.Item key={item} value={item} />)}
|
|
336
|
-
* </Reorder.Group>
|
|
337
|
-
* )
|
|
338
|
-
* }
|
|
339
|
-
* ```
|
|
340
|
-
*
|
|
341
|
-
* @public
|
|
342
|
-
*/
|
|
343
|
-
values: V[];
|
|
344
|
-
}
|
|
345
|
-
type ReorderGroupProps<V, TagName extends ReorderElementTag = DefaultGroupElement> = Props$1<V, TagName> & Omit<HTMLMotionProps<TagName>, "values"> & React$1.PropsWithChildren<{}>;
|
|
346
|
-
declare function ReorderGroupComponent<V, TagName extends ReorderElementTag = DefaultGroupElement>({ children, as, axis, onReorder, values, ...props }: ReorderGroupProps<V, TagName>, externalRef?: React$1.ForwardedRef<any>): JSX.Element;
|
|
347
|
-
declare const ReorderGroup: <V, TagName extends keyof HTMLElements = "ul">(props: ReorderGroupProps<V, TagName> & {
|
|
348
|
-
ref?: React$1.ForwardedRef<any>;
|
|
349
|
-
}) => ReturnType<typeof ReorderGroupComponent>;
|
|
350
|
-
|
|
351
|
-
interface Props<V, TagName extends ReorderElementTag = DefaultItemElement> {
|
|
352
|
-
/**
|
|
353
|
-
* A HTML element to render this component as. Defaults to `"li"`.
|
|
354
|
-
*
|
|
355
|
-
* @public
|
|
356
|
-
*/
|
|
357
|
-
as?: TagName;
|
|
358
|
-
/**
|
|
359
|
-
* The value in the list that this component represents.
|
|
360
|
-
*
|
|
361
|
-
* @public
|
|
362
|
-
*/
|
|
363
|
-
value: V;
|
|
364
|
-
/**
|
|
365
|
-
* A subset of layout options primarily used to disable layout="size"
|
|
366
|
-
*
|
|
367
|
-
* @public
|
|
368
|
-
* @default true
|
|
369
|
-
*/
|
|
370
|
-
layout?: true | "position";
|
|
371
|
-
}
|
|
372
|
-
type ReorderItemProps<V, TagName extends ReorderElementTag = DefaultItemElement> = Props<V, TagName> & Omit<HTMLMotionProps<TagName>, "value" | "layout"> & React$1.PropsWithChildren<{}>;
|
|
373
|
-
declare function ReorderItemComponent<V, TagName extends ReorderElementTag = DefaultItemElement>({ children, style, value, as, onDrag, layout, ...props }: ReorderItemProps<V, TagName>, externalRef?: React$1.ForwardedRef<any>): JSX.Element;
|
|
374
|
-
declare const ReorderItem: <V, TagName extends keyof HTMLElements = "li">(props: ReorderItemProps<V, TagName> & {
|
|
375
|
-
ref?: React$1.ForwardedRef<any>;
|
|
376
|
-
}) => ReturnType<typeof ReorderItemComponent>;
|
|
377
|
-
|
|
378
|
-
declare namespace namespace_d {
|
|
379
|
-
export { ReorderGroup as Group, ReorderItem as Item };
|
|
380
|
-
}
|
|
381
|
-
|
|
382
301
|
type ObjectTarget<O> = {
|
|
383
302
|
[K in keyof O]?: O[K] | UnresolvedValueKeyframe[];
|
|
384
303
|
};
|
|
@@ -527,6 +446,87 @@ declare function delay(callback: DelayedFunction, timeout: number): () => void;
|
|
|
527
446
|
declare const distance: (a: number, b: number) => number;
|
|
528
447
|
declare function distance2D(a: Point, b: Point): number;
|
|
529
448
|
|
|
449
|
+
type ReorderElementTag = keyof HTMLElements;
|
|
450
|
+
type DefaultGroupElement = "ul";
|
|
451
|
+
type DefaultItemElement = "li";
|
|
452
|
+
|
|
453
|
+
interface Props$1<V, TagName extends ReorderElementTag = DefaultGroupElement> {
|
|
454
|
+
/**
|
|
455
|
+
* A HTML element to render this component as. Defaults to `"ul"`.
|
|
456
|
+
*
|
|
457
|
+
* @public
|
|
458
|
+
*/
|
|
459
|
+
as?: TagName;
|
|
460
|
+
/**
|
|
461
|
+
* The axis to reorder along. By default, items will be draggable on this axis.
|
|
462
|
+
* To make draggable on both axes, set `<Reorder.Item drag />`
|
|
463
|
+
*
|
|
464
|
+
* @public
|
|
465
|
+
*/
|
|
466
|
+
axis?: "x" | "y";
|
|
467
|
+
/**
|
|
468
|
+
* A callback to fire with the new value order. For instance, if the values
|
|
469
|
+
* are provided as a state from `useState`, this could be the set state function.
|
|
470
|
+
*
|
|
471
|
+
* @public
|
|
472
|
+
*/
|
|
473
|
+
onReorder: (newOrder: V[]) => void;
|
|
474
|
+
/**
|
|
475
|
+
* The latest values state.
|
|
476
|
+
*
|
|
477
|
+
* ```jsx
|
|
478
|
+
* function Component() {
|
|
479
|
+
* const [items, setItems] = useState([0, 1, 2])
|
|
480
|
+
*
|
|
481
|
+
* return (
|
|
482
|
+
* <Reorder.Group values={items} onReorder={setItems}>
|
|
483
|
+
* {items.map((item) => <Reorder.Item key={item} value={item} />)}
|
|
484
|
+
* </Reorder.Group>
|
|
485
|
+
* )
|
|
486
|
+
* }
|
|
487
|
+
* ```
|
|
488
|
+
*
|
|
489
|
+
* @public
|
|
490
|
+
*/
|
|
491
|
+
values: V[];
|
|
492
|
+
}
|
|
493
|
+
type ReorderGroupProps<V, TagName extends ReorderElementTag = DefaultGroupElement> = Props$1<V, TagName> & Omit<HTMLMotionProps<TagName>, "values"> & React$1.PropsWithChildren<{}>;
|
|
494
|
+
declare function ReorderGroupComponent<V, TagName extends ReorderElementTag = DefaultGroupElement>({ children, as, axis, onReorder, values, ...props }: ReorderGroupProps<V, TagName>, externalRef?: React$1.ForwardedRef<any>): JSX.Element;
|
|
495
|
+
declare const ReorderGroup: <V, TagName extends keyof HTMLElements = "ul">(props: ReorderGroupProps<V, TagName> & {
|
|
496
|
+
ref?: React$1.ForwardedRef<any>;
|
|
497
|
+
}) => ReturnType<typeof ReorderGroupComponent>;
|
|
498
|
+
|
|
499
|
+
interface Props<V, TagName extends ReorderElementTag = DefaultItemElement> {
|
|
500
|
+
/**
|
|
501
|
+
* A HTML element to render this component as. Defaults to `"li"`.
|
|
502
|
+
*
|
|
503
|
+
* @public
|
|
504
|
+
*/
|
|
505
|
+
as?: TagName;
|
|
506
|
+
/**
|
|
507
|
+
* The value in the list that this component represents.
|
|
508
|
+
*
|
|
509
|
+
* @public
|
|
510
|
+
*/
|
|
511
|
+
value: V;
|
|
512
|
+
/**
|
|
513
|
+
* A subset of layout options primarily used to disable layout="size"
|
|
514
|
+
*
|
|
515
|
+
* @public
|
|
516
|
+
* @default true
|
|
517
|
+
*/
|
|
518
|
+
layout?: true | "position";
|
|
519
|
+
}
|
|
520
|
+
type ReorderItemProps<V, TagName extends ReorderElementTag = DefaultItemElement> = Props<V, TagName> & Omit<HTMLMotionProps<TagName>, "value" | "layout"> & React$1.PropsWithChildren<{}>;
|
|
521
|
+
declare function ReorderItemComponent<V, TagName extends ReorderElementTag = DefaultItemElement>({ children, style, value, as, onDrag, layout, ...props }: ReorderItemProps<V, TagName>, externalRef?: React$1.ForwardedRef<any>): JSX.Element;
|
|
522
|
+
declare const ReorderItem: <V, TagName extends keyof HTMLElements = "li">(props: ReorderItemProps<V, TagName> & {
|
|
523
|
+
ref?: React$1.ForwardedRef<any>;
|
|
524
|
+
}) => ReturnType<typeof ReorderItemComponent>;
|
|
525
|
+
|
|
526
|
+
declare namespace namespace_d {
|
|
527
|
+
export { ReorderGroup as Group, ReorderItem as Item };
|
|
528
|
+
}
|
|
529
|
+
|
|
530
530
|
type MotionComponentProps<Props> = {
|
|
531
531
|
[K in Exclude<keyof Props, keyof MotionProps>]?: Props[K];
|
|
532
532
|
} & MotionProps;
|
|
@@ -568,6 +568,17 @@ declare const createBox: () => Box;
|
|
|
568
568
|
|
|
569
569
|
declare const isBrowser: boolean;
|
|
570
570
|
|
|
571
|
+
/**
|
|
572
|
+
* Taken from https://github.com/radix-ui/primitives/blob/main/packages/react/compose-refs/src/compose-refs.tsx
|
|
573
|
+
*/
|
|
574
|
+
|
|
575
|
+
type PossibleRef<T> = React$1.Ref<T> | undefined;
|
|
576
|
+
/**
|
|
577
|
+
* A custom hook that composes multiple refs
|
|
578
|
+
* Accepts callback refs and RefObject(s)
|
|
579
|
+
*/
|
|
580
|
+
declare function useComposedRefs<T>(...refs: PossibleRef<T>[]): React$1.RefCallback<T>;
|
|
581
|
+
|
|
571
582
|
declare function useForceUpdate(): [VoidFunction, number];
|
|
572
583
|
|
|
573
584
|
declare const useIsomorphicLayoutEffect: typeof useEffect;
|
|
@@ -1239,4 +1250,4 @@ interface ScaleMotionValues {
|
|
|
1239
1250
|
*/
|
|
1240
1251
|
declare function useInvertedScale(scale?: Partial<ScaleMotionValues>): ScaleMotionValues;
|
|
1241
1252
|
|
|
1242
|
-
export { type AbsoluteKeyframe, AnimatePresence, type AnimatePresenceProps, AnimateSharedLayout, type AnimationSequence, type At, CreateVisualElement, type Cycle, type CycleState, DOMMotionComponents, type DOMSegment, type DOMSegmentWithTransition, type DelayedFunction, DeprecatedLayoutGroupContext, DragControls, type FeatureBundle, type FeatureDefinition, type FeatureDefinitions, type FeaturePackage, type FeaturePackages, HTMLMotionProps, type HydratedFeatureDefinition, type HydratedFeatureDefinitions, IProjectionNode, LayoutGroup, LayoutGroupContext, type LazyFeatureBundle$1 as LazyFeatureBundle, LazyMotion, type LazyProps, MotionConfig, MotionConfigContext, type MotionConfigProps, MotionContext, MotionProps, type MotionValueSegment, type MotionValueSegmentWithTransition, type ObjectSegment, type ObjectSegmentWithTransition, type ObjectTarget, namespace_d as Reorder, type ResolveKeyframes, type ResolvedAnimationDefinition, type ResolvedAnimationDefinitions, ResolvedValues, type ScrollMotionValues, type Segment, type SequenceLabel, type SequenceLabelWithTime, type SequenceMap, type SequenceOptions, type SequenceTime, type UseInViewOptions, type UseScrollOptions, type ValueSequence, VisualElement, WillChangeMotionValue, addPointerEvent, addPointerInfo, addScaleCorrector, animate, animateMini, animateVisualElement, animationControls, animations, buildTransform, calcLength, createBox, createScopedAnimate, delay, disableInstantTransitions, distance, distance2D, domAnimation, domMax, domMin, filterProps, inView, isBrowser, isMotionComponent, isValidMotionProp, m, motion, resolveMotionValue, scroll, scrollInfo, startOptimizedAppearAnimation, unwrapMotionComponent, useAnimate, useAnimateMini, useAnimation, useAnimationControls, useAnimationFrame, useCycle, useAnimatedState as useDeprecatedAnimatedState, useInvertedScale as useDeprecatedInvertedScale, useDomEvent, useDragControls, useElementScroll, useForceUpdate, useInView, useInstantLayoutTransition, useInstantTransition, useIsPresent, useIsomorphicLayoutEffect, useMotionTemplate, useMotionValue, useMotionValueEvent, usePageInView, usePresence, usePresenceData, useReducedMotion, useReducedMotionConfig, useResetProjection, useScroll, useSpring, useTime, useTransform, useUnmountEffect, useVelocity, useViewportScroll, useWillChange, visualElementStore };
|
|
1253
|
+
export { type AbsoluteKeyframe, AnimatePresence, type AnimatePresenceProps, AnimateSharedLayout, type AnimationSequence, type At, CreateVisualElement, type Cycle, type CycleState, DOMMotionComponents, type DOMSegment, type DOMSegmentWithTransition, type DelayedFunction, DeprecatedLayoutGroupContext, DragControls, type FeatureBundle, type FeatureDefinition, type FeatureDefinitions, type FeaturePackage, type FeaturePackages, HTMLElements, HTMLMotionProps, type HydratedFeatureDefinition, type HydratedFeatureDefinitions, IProjectionNode, LayoutGroup, LayoutGroupContext, type LazyFeatureBundle$1 as LazyFeatureBundle, LazyMotion, type LazyProps, MotionConfig, MotionConfigContext, type MotionConfigProps, MotionContext, MotionProps, type MotionValueSegment, type MotionValueSegmentWithTransition, type ObjectSegment, type ObjectSegmentWithTransition, type ObjectTarget, namespace_d as Reorder, type ResolveKeyframes, type ResolvedAnimationDefinition, type ResolvedAnimationDefinitions, ResolvedValues, type ScrollMotionValues, type Segment, type SequenceLabel, type SequenceLabelWithTime, type SequenceMap, type SequenceOptions, type SequenceTime, type UseInViewOptions, type UseScrollOptions, type ValueSequence, VisualElement, WillChangeMotionValue, addPointerEvent, addPointerInfo, addScaleCorrector, animate, animateMini, animateVisualElement, animationControls, animations, buildTransform, calcLength, createBox, createScopedAnimate, delay, disableInstantTransitions, distance, distance2D, domAnimation, domMax, domMin, filterProps, inView, isBrowser, isMotionComponent, isValidMotionProp, m, motion, resolveMotionValue, scroll, scrollInfo, startOptimizedAppearAnimation, unwrapMotionComponent, useAnimate, useAnimateMini, useAnimation, useAnimationControls, useAnimationFrame, useComposedRefs, useCycle, useAnimatedState as useDeprecatedAnimatedState, useInvertedScale as useDeprecatedInvertedScale, useDomEvent, useDragControls, useElementScroll, useForceUpdate, useInView, useInstantLayoutTransition, useInstantTransition, useIsPresent, useIsomorphicLayoutEffect, useMotionTemplate, useMotionValue, useMotionValueEvent, usePageInView, usePresence, usePresenceData, useReducedMotion, useReducedMotionConfig, useResetProjection, useScroll, useSpring, useTime, useTransform, useUnmountEffect, useVelocity, useViewportScroll, useWillChange, visualElementStore };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "framer-motion",
|
|
3
|
-
"version": "12.23.
|
|
3
|
+
"version": "12.23.22",
|
|
4
4
|
"description": "A simple and powerful JavaScript animation library",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/es/index.mjs",
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
"measure": "rollup -c ./rollup.size.config.mjs"
|
|
88
88
|
},
|
|
89
89
|
"dependencies": {
|
|
90
|
-
"motion-dom": "^12.23.
|
|
90
|
+
"motion-dom": "^12.23.21",
|
|
91
91
|
"motion-utils": "^12.23.6",
|
|
92
92
|
"tslib": "^2.4.0"
|
|
93
93
|
},
|
|
@@ -142,5 +142,5 @@
|
|
|
142
142
|
"maxSize": "2.26 kB"
|
|
143
143
|
}
|
|
144
144
|
],
|
|
145
|
-
"gitHead": "
|
|
145
|
+
"gitHead": "bb14a6dc82fea534f0f295439d60cc05dd9b935f"
|
|
146
146
|
}
|