UNPKG

framer-motion

Version:

A simple and powerful JavaScript animation library

2 lines (1 loc) • 7.29 kB
import{jsxs as t,jsx as n}from"react/jsx-runtime";import{createContext as o,useContext as e,useMemo as r,Fragment as a,createElement as i,useRef as s,useInsertionEffect as u,useCallback as c,useLayoutEffect as l,useEffect as d,forwardRef as f}from"react";import{i as m,a as p,b as y,c as g,d as v,e as h,f as w,g as S,P as M,r as b,h as P,j as E,k as A,s as T,l as C,m as j,n as V,S as x,o as I,p as L,L as k}from"./size-rollup-dom-max-assets.js";const W=o({strict:!1}),H=o({transformPagePoint:t=>t,isStatic:!1,reducedMotion:"never"}),O=o({});function D(t){const{initial:n,animate:o}=function(t,n){if(m(t)){const{initial:n,animate:o}=t;return{initial:!1===n||p(n)?n:void 0,animate:p(o)?o:void 0}}return!1!==t.inherit?n:{}}(t,e(O));return r(()=>({initial:n,animate:o}),[F(n),F(o)])}function F(t){return Array.isArray(t)?t.join(" "):t}const R=()=>({style:{},transform:{},transformOrigin:{},vars:{}});function N(t,n,o){for(const e in n)y(n[e])||g(e,o)||(t[e]=n[e])}function B(t,n){const o={};return N(o,t.style||{},t),Object.assign(o,function({transformTemplate:t},n){return r(()=>{const o={style:{},transform:{},transformOrigin:{},vars:{}};return v(o,n,t),Object.assign({},o.vars,o.style)},[n])}(t,n)),o}function U(t,n){const o={},e=B(t,n);return t.drag&&!1!==t.dragListener&&(o.draggable=!1,e.userSelect=e.WebkitUserSelect=e.WebkitTouchCallout="none",e.touchAction=!0===t.drag?"none":"pan-"+("x"===t.drag?"y":"x")),void 0===t.tabIndex&&(t.onTap||t.onTapStart||t.whileTap)&&(o.tabIndex=0),o.style=e,o}const $=()=>({style:{},transform:{},transformOrigin:{},vars:{},attrs:{}});function _(t,n,o,e){const a=r(()=>{const o={style:{},transform:{},transformOrigin:{},vars:{},attrs:{}};return h(o,n,w(e),t.transformTemplate,t.style),{...o.attrs,style:{...o.style}}},[n]);if(t.style){const n={};N(n,t.style,t),a.style={...n,...a.style}}return a}const q=new Set(["animate","exit","variants","initial","style","values","variants","transition","transformTemplate","custom","inherit","onBeforeLayoutMeasure","onAnimationStart","onAnimationComplete","onUpdate","onDragStart","onDrag","onDragEnd","onMeasureDragConstraints","onDirectionLock","onDragTransitionEnd","_dragX","_dragY","onHoverStart","onHoverEnd","onViewportEnter","onViewportLeave","globalTapTarget","propagate","ignoreStrict","viewport"]);function z(t){return t.startsWith("while")||t.startsWith("drag")&&"draggable"!==t||t.startsWith("layout")||t.startsWith("onTap")||t.startsWith("onPan")||t.startsWith("onLayout")||q.has(t)}function G(t,n){return t.startsWith("on")?!z(t):n?.(t)??!z(t)}function X(t,n,o,{latestValues:e},s,u=!1,c,l){const d=(c??S(t)?_:U)(n,e,s,t),f=function(t,n,o,e){const r={};for(const a in t)"values"===a&&"object"==typeof t.values||y(t[a])||(G(a,e)||!0===o&&z(a)||!n&&!z(a)||t.draggable&&a.startsWith("onDrag"))&&(r[a]=t[a]);return r}(n,"string"==typeof t,u,l),m=t!==a?{...f,...d,ref:o}:{},{children:p}=n,g=r(()=>y(p)?p.get():p,[p]);return i(t,{...m,children:g})}function Y(t,n,o,e){const r={},a=e(t,{});for(const t in a)r[t]=b(a[t]);let{initial:i,animate:s}=t;const u=m(t),c=P(t);n&&c&&!u&&!1!==t.inherit&&(void 0===i&&(i=n.initial),void 0===s&&(s=n.animate));let l=!!o&&!1===o.initial;l=l||!1===i;const d=l?s:i;if(d&&"boolean"!=typeof d&&!E(d)){const n=Array.isArray(d)?d:[d];for(let o=0;o<n.length;o++){const e=A(t,n[o]);if(e){const{transitionEnd:t,transition:n,...o}=e;for(const t in o){let n=o[t];if(Array.isArray(n)){n=n[l?n.length-1:0]}null!==n&&(r[t]=n)}for(const n in t)r[n]=t[n]}}}return r}const J=t=>(n,o)=>{const r=e(O),a=e(M),i=()=>function({scrapeMotionValuesFromProps:t,createRenderState:n},o,e,r){return{latestValues:Y(o,e,r,t),renderState:n()}}(t,n,r,a);return o?i():function(t){const n=s(null);return null===n.current&&(n.current=t()),n.current}(i)},K=J({scrapeMotionValuesFromProps:T,createRenderState:R}),Q=J({scrapeMotionValuesFromProps:C,createRenderState:$}),Z={animation:["animate","variants","whileHover","whileTap","exit","whileInView","whileFocus","whileDrag"],exit:["exit"],drag:["drag","dragControls"],focus:["whileFocus"],hover:["whileHover","onHoverStart","onHoverEnd"],tap:["whileTap","onTap","onTapStart","onTapCancel"],pan:["onPan","onPanStart","onPanSessionStart","onPanEnd"],inView:["whileInView","onViewportEnter","onViewportLeave"],layout:["layout","layoutId"]};let tt=!1;function nt(){return function(){if(tt)return;const t={};for(const n in Z)t[n]={isEnabled:t=>Z[n].some(n=>!!t[n])};V(t),tt=!0}(),j()}const ot=Symbol.for("motionComponentSymbol");function et(t,n,o){const e=s(o);u(()=>{e.current=o});const r=s(null);return c(o=>{o&&t.onMount?.(o),n&&(o?n.mount(o):n.unmount());const a=e.current;if("function"==typeof a)if(o){const t=a(o);"function"==typeof t&&(r.current=t)}else r.current?(r.current(),r.current=null):a(o);else a&&(a.current=o)},[n])}const rt="undefined"!=typeof window?l:d;function at(t,n,o,r,a,i){const{visualElement:c}=e(O),l=e(W),f=e(M),m=e(H),p=m.reducedMotion,y=m.skipAnimations,g=s(null),v=s(!1);r=r||l.renderer,!g.current&&r&&(g.current=r(t,{visualState:n,parent:c,props:o,presenceContext:f,blockInitialAnimation:!!f&&!1===f.initial,reducedMotionConfig:p,skipAnimations:y,isSVG:i}),v.current&&g.current&&(g.current.manuallyAnimateOnMount=!0));const h=g.current,w=e(x);!h||h.projection||!a||"html"!==h.type&&"svg"!==h.type||function(t,n,o,e){const{layoutId:r,layout:a,drag:i,dragConstraints:s,layoutScroll:u,layoutRoot:c,layoutAnchor:l,layoutCrossfade:d}=n;t.projection=new o(t.latestValues,n["data-framer-portal-id"]?void 0:it(t.parent)),t.projection.setOptions({layoutId:r,layout:a,alwaysMeasureLayout:Boolean(i)||s&&L(s),visualElement:t,animationType:"string"==typeof a?a:"both",initialPromotionConfig:e,crossfade:d,layoutScroll:u,layoutRoot:c,layoutAnchor:l})}(g.current,o,a,w);const S=s(!1);u(()=>{h&&S.current&&h.update(o,f)});const b=o[I],P=s(Boolean(b)&&"undefined"!=typeof window&&!window.MotionHandoffIsComplete?.(b)&&window.MotionHasOptimisedAnimation?.(b));return rt(()=>{v.current=!0,h&&(S.current=!0,window.MotionIsMounted=!0,h.updateFeatures(),h.scheduleRenderMicrotask(),P.current&&h.animationState&&h.animationState.animateChanges())}),d(()=>{h&&(!P.current&&h.animationState&&h.animationState.animateChanges(),P.current&&(queueMicrotask(()=>{window.MotionHandoffMarkAsComplete?.(b)}),P.current=!1),h.enteringChildren=void 0)}),h}function it(t){if(t)return!1!==t.options.allowProjection?t.projection:it(t.parent)}function st(o,{forwardMotionProps:r=!1,type:a}={},i,s){const u=a?"svg"===a:S(o),c=u?Q:K;function l(a,i){let l;const d={...e(H),...a,layoutId:ut(a)},{isStatic:f,isValidProp:m}=d,p=D(a),y=c(a,f);if(!f&&"undefined"!=typeof window){e(W).strict;const t=function(t){const n=nt(),{drag:o,layout:e}=n;if(!o&&!e)return{};const r={...o,...e};return{MeasureLayout:o?.isEnabled(t)||e?.isEnabled(t)?r.MeasureLayout:void 0,ProjectionNode:r.ProjectionNode}}(d);l=t.MeasureLayout,p.visualElement=at(o,y,d,s,t.ProjectionNode,u)}return t(O.Provider,{value:p,children:[l&&p.visualElement?n(l,{visualElement:p.visualElement,...d}):null,X(o,a,et(y,p.visualElement,i),y,f,r,u,m)]})}l.displayName=`motion.${"string"==typeof o?o:`create(${o.displayName??o.name??""})`}`;const d=f(l);return d[ot]=o,d}function ut({layoutId:t}){const n=e(k).id;return n&&void 0!==t?n+"-"+t:t}function ct(t,n){return st(t,n)}const lt=ct("div");export{lt as MotionDiv};