framer-motion 7.0.3 → 7.1.2

package/dist/es/animation/animate.mjs

@@ -29,13 +29,12 @@ import { startAnimation } from './utils/transitions.mjs';
  *
  * @public
  */
-function animate(from, to, transition) {
-    if (transition === void 0) { transition = {}; }
-    var value = isMotionValue(from) ? from : motionValue(from);
+function animate(from, to, transition = {}) {
+    const value = isMotionValue(from) ? from : motionValue(from);
     startAnimation("", value, to, transition);
     return {
-        stop: function () { return value.stop(); },
-        isAnimating: function () { return value.isAnimating(); },
+        stop: () => value.stop(),
+        isAnimating: () => value.isAnimating(),
     };
 }
 

package/dist/es/animation/animation-controls.mjs

@@ -1,4 +1,3 @@
-import { __spreadArray, __read } from 'tslib';
 import { invariant } from 'hey-listen';
 import { stopAnimation, animateVisualElement } from '../render/utils/animation.mjs';
 import { setValues } from '../render/utils/setters.mjs';
@@ -10,22 +9,22 @@ function animationControls() {
     /**
      * Track whether the host component has mounted.
      */
-    var hasMounted = false;
+    let hasMounted = false;
     /**
      * Pending animations that are started before a component is mounted.
      * TODO: Remove this as animations should only run in effects
      */
-    var pendingAnimations = [];
+    const pendingAnimations = [];
     /**
      * A collection of linked component animation controls.
      */
-    var subscribers = new Set();
-    var controls = {
-        subscribe: function (visualElement) {
+    const subscribers = new Set();
+    const controls = {
+        subscribe(visualElement) {
             subscribers.add(visualElement);
-            return function () { return void subscribers.delete(visualElement); };
+            return () => void subscribers.delete(visualElement);
         },
-        start: function (definition, transitionOverride) {
+        start(definition, transitionOverride) {
             /**
              * TODO: We only perform this hasMounted check because in Framer we used to
              * encourage the ability to start an animation within the render phase. This
@@ -33,41 +32,40 @@ function animationControls() {
              * we can ditch this.
              */
             if (hasMounted) {
-                var animations_1 = [];
-                subscribers.forEach(function (visualElement) {
-                    animations_1.push(animateVisualElement(visualElement, definition, {
-                        transitionOverride: transitionOverride,
+                const animations = [];
+                subscribers.forEach((visualElement) => {
+                    animations.push(animateVisualElement(visualElement, definition, {
+                        transitionOverride,
                     }));
                 });
-                return Promise.all(animations_1);
+                return Promise.all(animations);
             }
             else {
-                return new Promise(function (resolve) {
+                return new Promise((resolve) => {
                     pendingAnimations.push({
                         animation: [definition, transitionOverride],
-                        resolve: resolve,
+                        resolve,
                     });
                 });
             }
         },
-        set: function (definition) {
+        set(definition) {
             invariant(hasMounted, "controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook.");
-            return subscribers.forEach(function (visualElement) {
+            return subscribers.forEach((visualElement) => {
                 setValues(visualElement, definition);
             });
         },
-        stop: function () {
-            subscribers.forEach(function (visualElement) {
+        stop() {
+            subscribers.forEach((visualElement) => {
                 stopAnimation(visualElement);
             });
         },
-        mount: function () {
+        mount() {
             hasMounted = true;
-            pendingAnimations.forEach(function (_a) {
-                var animation = _a.animation, resolve = _a.resolve;
-                controls.start.apply(controls, __spreadArray([], __read(animation), false)).then(resolve);
+            pendingAnimations.forEach(({ animation, resolve }) => {
+                controls.start(...animation).then(resolve);
             });
-            return function () {
+            return () => {
                 hasMounted = false;
                 controls.stop();
             };

package/dist/es/animation/use-animated-state.mjs

@@ -1,4 +1,4 @@
-import { __rest, __assign, __read } from 'tslib';
+import { __rest } from 'tslib';
 import { useState, useEffect } from 'react';
 import { useConstant } from '../utils/use-constant.mjs';
 import { getOrigin, checkTargetForNewValues } from '../render/utils/setters.mjs';
@@ -7,26 +7,26 @@ import { animateVisualElement } from '../render/utils/animation.mjs';
 import { makeUseVisualState } from '../motion/utils/use-visual-state.mjs';
 import { createBox } from '../projection/geometry/models.mjs';
 
-var createObject = function () { return ({}); };
-var stateVisualElement = visualElement({
-    build: function () { },
+const createObject = () => ({});
+const stateVisualElement = visualElement({
+    build() { },
     measureViewportBox: createBox,
-    resetTransform: function () { },
-    restoreTransform: function () { },
-    removeValueFromRenderState: function () { },
-    render: function () { },
+    resetTransform() { },
+    restoreTransform() { },
+    removeValueFromRenderState() { },
+    render() { },
     scrapeMotionValuesFromProps: createObject,
-    readValueFromInstance: function (_state, key, options) {
+    readValueFromInstance(_state, key, options) {
         return options.initialState[key] || 0;
     },
-    makeTargetAnimatable: function (element, _a) {
-        var transition = _a.transition, transitionEnd = _a.transitionEnd, target = __rest(_a, ["transition", "transitionEnd"]);
-        var origin = getOrigin(target, transition || {}, element);
+    makeTargetAnimatable(element, _a) {
+        var { transition, transitionEnd } = _a, target = __rest(_a, ["transition", "transitionEnd"]);
+        const origin = getOrigin(target, transition || {}, element);
         checkTargetForNewValues(element, target, origin);
-        return __assign({ transition: transition, transitionEnd: transitionEnd }, target);
+        return Object.assign({ transition, transitionEnd }, target);
     },
 });
-var useVisualState = makeUseVisualState({
+const useVisualState = makeUseVisualState({
     scrapeMotionValuesFromProps: createObject,
     createRenderState: createObject,
 });
@@ -35,25 +35,23 @@ var useVisualState = makeUseVisualState({
  * on any version.
  */
 function useAnimatedState(initialState) {
-    var _a = __read(useState(initialState), 2), animationState = _a[0], setAnimationState = _a[1];
-    var visualState = useVisualState({}, false);
-    var element = useConstant(function () {
-        return stateVisualElement({ props: {}, visualState: visualState }, { initialState: initialState });
-    });
-    useEffect(function () {
+    const [animationState, setAnimationState] = useState(initialState);
+    const visualState = useVisualState({}, false);
+    const element = useConstant(() => stateVisualElement({ props: {}, visualState }, { initialState }));
+    useEffect(() => {
         element.mount({});
         return element.unmount;
     }, [element]);
-    useEffect(function () {
+    useEffect(() => {
         element.setProps({
-            onUpdate: function (v) {
-                setAnimationState(__assign({}, v));
+            onUpdate: (v) => {
+                setAnimationState(Object.assign({}, v));
             },
         });
     }, [setAnimationState, element]);
-    var startAnimation = useConstant(function () { return function (animationDefinition) {
+    const startAnimation = useConstant(() => (animationDefinition) => {
         return animateVisualElement(element, animationDefinition);
-    }; });
+    });
     return [animationState, startAnimation];
 }
 

package/dist/es/animation/use-animation.mjs

@@ -32,10 +32,10 @@ import { useConstant } from '../utils/use-constant.mjs';
  * @public
  */
 function useAnimationControls() {
-    var controls = useConstant(animationControls);
+    const controls = useConstant(animationControls);
     useEffect(controls.mount, []);
     return controls;
 }
-var useAnimation = useAnimationControls;
+const useAnimation = useAnimationControls;
 
 export { useAnimation, useAnimationControls };

package/dist/es/animation/utils/default-transitions.mjs

@@ -1,29 +1,28 @@
-import { __assign } from 'tslib';
 import { isKeyframesTarget } from './is-keyframes-target.mjs';
 
-var underDampedSpring = function () { return ({
+const underDampedSpring = () => ({
     type: "spring",
     stiffness: 500,
     damping: 25,
     restSpeed: 10,
-}); };
-var criticallyDampedSpring = function (to) { return ({
+});
+const criticallyDampedSpring = (to) => ({
     type: "spring",
     stiffness: 550,
     damping: to === 0 ? 2 * Math.sqrt(550) : 30,
     restSpeed: 10,
-}); };
-var linearTween = function () { return ({
+});
+const linearTween = () => ({
     type: "keyframes",
     ease: "linear",
     duration: 0.3,
-}); };
-var keyframes = function (values) { return ({
+});
+const keyframes = (values) => ({
     type: "keyframes",
     duration: 0.8,
-    values: values,
-}); };
-var defaultTransitions = {
+    values,
+});
+const defaultTransitions = {
     x: underDampedSpring,
     y: underDampedSpring,
     z: underDampedSpring,
@@ -39,8 +38,8 @@ var defaultTransitions = {
     color: linearTween,
     default: criticallyDampedSpring,
 };
-var getDefaultTransition = function (valueKey, to) {
-    var transitionFactory;
+const getDefaultTransition = (valueKey, to) => {
+    let transitionFactory;
     if (isKeyframesTarget(to)) {
         transitionFactory = keyframes;
     }
@@ -48,7 +47,7 @@ var getDefaultTransition = function (valueKey, to) {
         transitionFactory =
             defaultTransitions[valueKey] || defaultTransitions.default;
     }
-    return __assign({ to: to }, transitionFactory(to));
+    return Object.assign({ to }, transitionFactory(to));
 };
 
 export { criticallyDampedSpring, getDefaultTransition, linearTween, underDampedSpring };

package/dist/es/animation/utils/easing.mjs

@@ -1,38 +1,37 @@
-import { __read } from 'tslib';
 import { invariant } from 'hey-listen';
 import { cubicBezier, linear, easeIn, easeInOut, easeOut, circIn, circInOut, circOut, backIn, backInOut, backOut, anticipate, bounceIn, bounceInOut, bounceOut } from 'popmotion';
 
-var easingLookup = {
-    linear: linear,
-    easeIn: easeIn,
-    easeInOut: easeInOut,
-    easeOut: easeOut,
-    circIn: circIn,
-    circInOut: circInOut,
-    circOut: circOut,
-    backIn: backIn,
-    backInOut: backInOut,
-    backOut: backOut,
-    anticipate: anticipate,
-    bounceIn: bounceIn,
-    bounceInOut: bounceInOut,
-    bounceOut: bounceOut,
+const easingLookup = {
+    linear,
+    easeIn,
+    easeInOut,
+    easeOut,
+    circIn,
+    circInOut,
+    circOut,
+    backIn,
+    backInOut,
+    backOut,
+    anticipate,
+    bounceIn,
+    bounceInOut,
+    bounceOut,
 };
-var easingDefinitionToFunction = function (definition) {
+const easingDefinitionToFunction = (definition) => {
     if (Array.isArray(definition)) {
         // If cubic bezier definition, create bezier curve
-        invariant(definition.length === 4, "Cubic bezier arrays must contain four numerical values.");
-        var _a = __read(definition, 4), x1 = _a[0], y1 = _a[1], x2 = _a[2], y2 = _a[3];
+        invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`);
+        const [x1, y1, x2, y2] = definition;
         return cubicBezier(x1, y1, x2, y2);
     }
     else if (typeof definition === "string") {
         // Else lookup from table
-        invariant(easingLookup[definition] !== undefined, "Invalid easing type '".concat(definition, "'"));
+        invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`);
         return easingLookup[definition];
     }
     return definition;
 };
-var isEasingArray = function (ease) {
+const isEasingArray = (ease) => {
     return Array.isArray(ease) && typeof ease[0] !== "number";
 };
 

package/dist/es/animation/utils/is-animatable.mjs

@@ -9,7 +9,7 @@ import { complex } from 'style-value-types';
  *
  * @internal
  */
-var isAnimatable = function (key, value) {
+const isAnimatable = (key, value) => {
     // If the list of keys tat might be non-animatable grows, replace with Set
     if (key === "zIndex")
         return false;

package/dist/es/animation/utils/is-keyframes-target.mjs

@@ -1,4 +1,4 @@
-var isKeyframesTarget = function (v) {
+const isKeyframesTarget = (v) => {
     return Array.isArray(v);
 };
 

package/dist/es/animation/utils/transitions.mjs

@@ -1,4 +1,4 @@
-import { __assign, __rest, __spreadArray, __read } from 'tslib';
+import { __rest } from 'tslib';
 import { inertia, animate } from 'popmotion';
 import { secondsToMilliseconds } from '../../utils/time-conversion.mjs';
 import { isEasingArray, easingDefinitionToFunction } from './easing.mjs';
@@ -15,16 +15,16 @@ import { resolveFinalValueInKeyframes } from '../../utils/resolve-value.mjs';
  * if any options are left.
  */
 function isTransitionDefined(_a) {
-    _a.when; _a.delay; _a.delayChildren; _a.staggerChildren; _a.staggerDirection; _a.repeat; _a.repeatType; _a.repeatDelay; _a.from; var transition = __rest(_a, ["when", "delay", "delayChildren", "staggerChildren", "staggerDirection", "repeat", "repeatType", "repeatDelay", "from"]);
+    var transition = __rest(_a, ["when", "delay", "delayChildren", "staggerChildren", "staggerDirection", "repeat", "repeatType", "repeatDelay", "from"]);
     return !!Object.keys(transition).length;
 }
-var legacyRepeatWarning = false;
+let legacyRepeatWarning = false;
 /**
  * Convert Framer Motion's Transition type into Popmotion-compatible options.
  */
 function convertTransitionToAnimationOptions(_a) {
-    var ease = _a.ease, times = _a.times, yoyo = _a.yoyo, flip = _a.flip, loop = _a.loop, transition = __rest(_a, ["ease", "times", "yoyo", "flip", "loop"]);
-    var options = __assign({}, transition);
+    var { ease, times, yoyo, flip, loop } = _a, transition = __rest(_a, ["ease", "times", "yoyo", "flip", "loop"]);
+    const options = Object.assign({}, transition);
     if (times)
         options["offset"] = times;
     /**
@@ -78,12 +78,12 @@ function convertTransitionToAnimationOptions(_a) {
  */
 function getDelayFromTransition(transition, key) {
     var _a, _b;
-    var valueTransition = getValueTransition(transition, key) || {};
+    const valueTransition = getValueTransition(transition, key) || {};
     return (_b = (_a = valueTransition.delay) !== null && _a !== void 0 ? _a : transition.delay) !== null && _b !== void 0 ? _b : 0;
 }
 function hydrateKeyframes(options) {
     if (Array.isArray(options.to) && options.to[0] === null) {
-        options.to = __spreadArray([], __read(options.to), false);
+        options.to = [...options.to];
         options.to[0] = options.from;
     }
     return options;
@@ -98,18 +98,18 @@ function getPopmotionAnimationOptions(transition, options, key) {
      * Get a default transition if none is determined to be defined.
      */
     if (!isTransitionDefined(transition)) {
-        transition = __assign(__assign({}, transition), getDefaultTransition(key, options.to));
+        transition = Object.assign(Object.assign({}, transition), getDefaultTransition(key, options.to));
     }
-    return __assign(__assign({}, options), convertTransitionToAnimationOptions(transition));
+    return Object.assign(Object.assign({}, options), convertTransitionToAnimationOptions(transition));
 }
 /**
  *
  */
 function getAnimation(key, value, target, transition, onComplete) {
     var _a;
-    var valueTransition = getValueTransition(transition, key);
-    var origin = (_a = valueTransition.from) !== null && _a !== void 0 ? _a : value.get();
-    var isTargetAnimatable = isAnimatable(key, target);
+    const valueTransition = getValueTransition(transition, key);
+    let origin = (_a = valueTransition.from) !== null && _a !== void 0 ? _a : value.get();
+    const isTargetAnimatable = isAnimatable(key, target);
     if (origin === "none" && isTargetAnimatable && typeof target === "string") {
         /**
          * If we're trying to animate from "none", try and get an animatable version
@@ -125,24 +125,24 @@ function getAnimation(key, value, target, transition, onComplete) {
         typeof origin === "string") {
         target = getZeroUnit(origin);
     }
-    var isOriginAnimatable = isAnimatable(key, origin);
-    warning(isOriginAnimatable === isTargetAnimatable, "You are trying to animate ".concat(key, " from \"").concat(origin, "\" to \"").concat(target, "\". ").concat(origin, " is not an animatable value - to enable this animation set ").concat(origin, " to a value animatable to ").concat(target, " via the `style` property."));
+    const isOriginAnimatable = isAnimatable(key, origin);
+    warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${key} from "${origin}" to "${target}". ${origin} is not an animatable value - to enable this animation set ${origin} to a value animatable to ${target} via the \`style\` property.`);
     function start() {
-        var options = {
+        const options = {
             from: origin,
             to: target,
             velocity: value.getVelocity(),
-            onComplete: onComplete,
-            onUpdate: function (v) { return value.set(v); },
+            onComplete,
+            onUpdate: (v) => value.set(v),
         };
         return valueTransition.type === "inertia" ||
             valueTransition.type === "decay"
-            ? inertia(__assign(__assign({}, options), valueTransition))
-            : animate(__assign(__assign({}, getPopmotionAnimationOptions(valueTransition, options, key)), { onUpdate: function (v) {
+            ? inertia(Object.assign(Object.assign({}, options), valueTransition))
+            : animate(Object.assign(Object.assign({}, getPopmotionAnimationOptions(valueTransition, options, key)), { onUpdate: (v) => {
                     var _a;
                     options.onUpdate(v);
                     (_a = valueTransition.onUpdate) === null || _a === void 0 ? void 0 : _a.call(valueTransition, v);
-                }, onComplete: function () {
+                }, onComplete: () => {
                     var _a;
                     options.onComplete();
                     (_a = valueTransition.onComplete) === null || _a === void 0 ? void 0 : _a.call(valueTransition);
@@ -150,12 +150,12 @@ function getAnimation(key, value, target, transition, onComplete) {
     }
     function set() {
         var _a, _b;
-        var finalTarget = resolveFinalValueInKeyframes(target);
+        const finalTarget = resolveFinalValueInKeyframes(target);
         value.set(finalTarget);
         onComplete();
         (_a = valueTransition === null || valueTransition === void 0 ? void 0 : valueTransition.onUpdate) === null || _a === void 0 ? void 0 : _a.call(valueTransition, finalTarget);
         (_b = valueTransition === null || valueTransition === void 0 ? void 0 : valueTransition.onComplete) === null || _b === void 0 ? void 0 : _b.call(valueTransition);
-        return { stop: function () { } };
+        return { stop: () => { } };
     }
     return !isOriginAnimatable ||
         !isTargetAnimatable ||
@@ -181,24 +181,23 @@ function getValueTransition(transition, key) {
  * Start animation on a MotionValue. This function is an interface between
  * Framer Motion and Popmotion
  */
-function startAnimation(key, value, target, transition) {
-    if (transition === void 0) { transition = {}; }
+function startAnimation(key, value, target, transition = {}) {
     if (instantAnimationState.current) {
         transition = { type: false };
     }
-    return value.start(function (onComplete) {
-        var delayTimer;
-        var controls;
-        var animation = getAnimation(key, value, target, transition, onComplete);
-        var delay = getDelayFromTransition(transition, key);
-        var start = function () { return (controls = animation()); };
+    return value.start((onComplete) => {
+        let delayTimer;
+        let controls;
+        const animation = getAnimation(key, value, target, transition, onComplete);
+        const delay = getDelayFromTransition(transition, key);
+        const start = () => (controls = animation());
         if (delay) {
             delayTimer = window.setTimeout(start, secondsToMilliseconds(delay));
         }
         else {
             start();
         }
-        return function () {
+        return () => {
             clearTimeout(delayTimer);
             controls === null || controls === void 0 ? void 0 : controls.stop();
         };

package/dist/es/components/AnimatePresence/PresenceChild.mjs

@@ -1,56 +1,43 @@
-import { __values } from 'tslib';
 import * as React from 'react';
 import { useId, useMemo } from 'react';
 import { PresenceContext } from '../../context/PresenceContext.mjs';
 import { useConstant } from '../../utils/use-constant.mjs';
 
-var PresenceChild = function (_a) {
-    var children = _a.children, initial = _a.initial, isPresent = _a.isPresent, onExitComplete = _a.onExitComplete, custom = _a.custom, presenceAffectsLayout = _a.presenceAffectsLayout;
-    var presenceChildren = useConstant(newChildrenMap);
-    var id = useId();
-    var context = useMemo(function () { return ({
-        id: id,
-        initial: initial,
-        isPresent: isPresent,
-        custom: custom,
-        onExitComplete: function (childId) {
-            var e_1, _a;
+const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, }) => {
+    const presenceChildren = useConstant(newChildrenMap);
+    const id = useId();
+    const context = useMemo(() => ({
+        id,
+        initial,
+        isPresent,
+        custom,
+        onExitComplete: (childId) => {
             presenceChildren.set(childId, true);
-            try {
-                for (var _b = __values(presenceChildren.values()), _c = _b.next(); !_c.done; _c = _b.next()) {
-                    var isComplete = _c.value;
-                    if (!isComplete)
-                        return; // can stop searching when any is incomplete
-                }
-            }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-                }
-                finally { if (e_1) throw e_1.error; }
+            for (const isComplete of presenceChildren.values()) {
+                if (!isComplete)
+                    return; // can stop searching when any is incomplete
             }
             onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete();
         },
-        register: function (childId) {
+        register: (childId) => {
             presenceChildren.set(childId, false);
-            return function () { return presenceChildren.delete(childId); };
+            return () => presenceChildren.delete(childId);
         },
-    }); }, 
+    }), 
     /**
      * If the presence of a child affects the layout of the components around it,
      * we want to make a new context value to ensure they get re-rendered
      * so they can detect that layout change.
      */
     presenceAffectsLayout ? undefined : [isPresent]);
-    useMemo(function () {
-        presenceChildren.forEach(function (_, key) { return presenceChildren.set(key, false); });
+    useMemo(() => {
+        presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
     }, [isPresent]);
     /**
      * If there's no `motion` components to fire exit animations, we want to remove this
      * component immediately.
      */
-    React.useEffect(function () {
+    React.useEffect(() => {
         !isPresent && !presenceChildren.size && (onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete());
     }, [isPresent]);
     return (React.createElement(PresenceContext.Provider, { value: context }, children));