framer-motion 7.0.3 → 7.1.2

package/dist/es/utils/transform.mjs

@@ -1,22 +1,17 @@
-import { __assign } from 'tslib';
 import { interpolate } from 'popmotion';
 
-var isCustomValueType = function (v) {
+const isCustomValueType = (v) => {
     return typeof v === "object" && v.mix;
 };
-var getMixer = function (v) { return (isCustomValueType(v) ? v.mix : undefined); };
-function transform() {
-    var args = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        args[_i] = arguments[_i];
-    }
-    var useImmediate = !Array.isArray(args[0]);
-    var argOffset = useImmediate ? 0 : -1;
-    var inputValue = args[0 + argOffset];
-    var inputRange = args[1 + argOffset];
-    var outputRange = args[2 + argOffset];
-    var options = args[3 + argOffset];
-    var interpolator = interpolate(inputRange, outputRange, __assign({ mixer: getMixer(outputRange[0]) }, options));
+const getMixer = (v) => (isCustomValueType(v) ? v.mix : undefined);
+function transform(...args) {
+    const useImmediate = !Array.isArray(args[0]);
+    const argOffset = useImmediate ? 0 : -1;
+    const inputValue = args[0 + argOffset];
+    const inputRange = args[1 + argOffset];
+    const outputRange = args[2 + argOffset];
+    const options = args[3 + argOffset];
+    const interpolator = interpolate(inputRange, outputRange, Object.assign({ mixer: getMixer(outputRange[0]) }, options));
     return useImmediate ? interpolator(inputValue) : interpolator;
 }
 

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

@@ -3,19 +3,18 @@ import { useRef, useContext, useEffect } from 'react';
 import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
 
 function useAnimationFrame(callback) {
-    var initialTimestamp = useRef(0);
-    var isStatic = useContext(MotionConfigContext).isStatic;
-    useEffect(function () {
+    const initialTimestamp = useRef(0);
+    const { isStatic } = useContext(MotionConfigContext);
+    useEffect(() => {
         if (isStatic)
             return;
-        var provideTimeSinceStart = function (_a) {
-            var timestamp = _a.timestamp;
+        const provideTimeSinceStart = ({ timestamp }) => {
             if (!initialTimestamp.current)
                 initialTimestamp.current = timestamp;
             callback(timestamp - initialTimestamp.current);
         };
         sync.update(provideTimeSinceStart, true);
-        return function () { return cancelSync.update(provideTimeSinceStart); };
+        return () => cancelSync.update(provideTimeSinceStart);
     }, [callback]);
 }
 

package/dist/es/utils/use-constant.mjs

@@ -8,7 +8,7 @@ import { useRef } from 'react';
  * you can ensure that initialisers don't execute twice or more.
  */
 function useConstant(init) {
-    var ref = useRef(null);
+    const ref = useRef(null);
     if (ref.current === null) {
         ref.current = init();
     }

package/dist/es/utils/use-cycle.mjs

@@ -1,4 +1,3 @@
-import { __read, __spreadArray } from 'tslib';
 import { wrap } from 'popmotion';
 import { useRef, useState, useCallback } from 'react';
 
@@ -28,20 +27,20 @@ import { useRef, useState, useCallback } from 'react';
  *
  * @public
  */
-function useCycle() {
-    var items = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        items[_i] = arguments[_i];
-    }
-    var index = useRef(0);
-    var _a = __read(useState(items[index.current]), 2), item = _a[0], setItem = _a[1];
-    var runCycle = useCallback(function (next) {
+function useCycle(...items) {
+    const index = useRef(0);
+    const [item, setItem] = useState(items[index.current]);
+    const runCycle = useCallback((next) => {
         index.current =
             typeof next !== "number"
                 ? wrap(0, items.length, index.current + 1)
                 : next;
         setItem(items[index.current]);
-    }, __spreadArray([items.length], __read(items), false));
+    }, 
+    // The array will change on each call, but by putting items.length at
+    // the front of this array, we guarantee the dependency comparison will match up
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [items.length, ...items]);
     return [item, runCycle];
 }
 

package/dist/es/utils/use-force-update.mjs

@@ -1,19 +1,18 @@
-import { __read } from 'tslib';
 import sync from 'framesync';
 import { useState, useCallback } from 'react';
 import { useIsMounted } from './use-is-mounted.mjs';
 
 function useForceUpdate() {
-    var isMounted = useIsMounted();
-    var _a = __read(useState(0), 2), forcedRenderCount = _a[0], setForcedRenderCount = _a[1];
-    var forceRender = useCallback(function () {
+    const isMounted = useIsMounted();
+    const [forcedRenderCount, setForcedRenderCount] = useState(0);
+    const forceRender = useCallback(() => {
         isMounted.current && setForcedRenderCount(forcedRenderCount + 1);
     }, [forcedRenderCount]);
     /**
      * Defer this to the end of the next animation frame in case there are multiple
      * synchronous calls.
      */
-    var deferredForceRender = useCallback(function () { return sync.postRender(forceRender); }, [forceRender]);
+    const deferredForceRender = useCallback(() => sync.postRender(forceRender), [forceRender]);
     return [deferredForceRender, forcedRenderCount];
 }
 

package/dist/es/utils/use-in-view.mjs

@@ -1,21 +1,19 @@
-import { __read } from 'tslib';
 import { useState, useEffect } from 'react';
 import { inView } from '@motionone/dom';
 
-function useInView(ref, _a) {
-    var _b = _a === void 0 ? {} : _a, root = _b.root, margin = _b.margin, amount = _b.amount, _c = _b.once, once = _c === void 0 ? false : _c;
-    var _d = __read(useState(false), 2), isInView = _d[0], setInView = _d[1];
-    useEffect(function () {
+function useInView(ref, { root, margin, amount, once = false } = {}) {
+    const [isInView, setInView] = useState(false);
+    useEffect(() => {
         var _a;
         if (!ref.current || (once && isInView))
             return;
-        var onEnter = function () {
+        const onEnter = () => {
             setInView(true);
-            return once ? undefined : function () { return setInView(false); };
+            return once ? undefined : () => setInView(false);
         };
-        var options = {
+        const options = {
             root: (_a = root === null || root === void 0 ? void 0 : root.current) !== null && _a !== void 0 ? _a : undefined,
-            margin: margin,
+            margin,
             amount: amount === "some" ? "any" : amount,
         };
         return inView(ref.current, onEnter, options);

package/dist/es/utils/use-instant-transition-state.mjs

@@ -1,4 +1,4 @@
-var instantAnimationState = {
+const instantAnimationState = {
     current: false,
 };
 

package/dist/es/utils/use-instant-transition.mjs

@@ -1,4 +1,3 @@
-import { __read } from 'tslib';
 import sync from 'framesync';
 import { useEffect } from 'react';
 import { useInstantLayoutTransition } from '../projection/use-instant-layout-transition.mjs';
@@ -6,18 +5,16 @@ import { useForceUpdate } from './use-force-update.mjs';
 import { instantAnimationState } from './use-instant-transition-state.mjs';
 
 function useInstantTransition() {
-    var _a = __read(useForceUpdate(), 2), forceUpdate = _a[0], forcedRenderCount = _a[1];
-    var startInstantLayoutTransition = useInstantLayoutTransition();
-    useEffect(function () {
+    const [forceUpdate, forcedRenderCount] = useForceUpdate();
+    const startInstantLayoutTransition = useInstantLayoutTransition();
+    useEffect(() => {
         /**
          * Unblock after two animation frames, otherwise this will unblock too soon.
          */
-        sync.postRender(function () {
-            return sync.postRender(function () { return (instantAnimationState.current = false); });
-        });
+        sync.postRender(() => sync.postRender(() => (instantAnimationState.current = false)));
     }, [forcedRenderCount]);
-    return function (callback) {
-        startInstantLayoutTransition(function () {
+    return (callback) => {
+        startInstantLayoutTransition(() => {
             instantAnimationState.current = true;
             forceUpdate();
             callback();

package/dist/es/utils/use-is-mounted.mjs

@@ -2,10 +2,10 @@ import { useRef } from 'react';
 import { useIsomorphicLayoutEffect } from './use-isomorphic-effect.mjs';
 
 function useIsMounted() {
-    var isMounted = useRef(false);
-    useIsomorphicLayoutEffect(function () {
+    const isMounted = useRef(false);
+    useIsomorphicLayoutEffect(() => {
         isMounted.current = true;
-        return function () {
+        return () => {
             isMounted.current = false;
         };
     }, []);

package/dist/es/utils/use-isomorphic-effect.mjs

@@ -1,6 +1,6 @@
 import { useLayoutEffect, useEffect } from 'react';
 import { isBrowser } from './is-browser.mjs';
 
-var useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
+const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
 
 export { useIsomorphicLayoutEffect };

package/dist/es/utils/use-reduced-motion.mjs

@@ -1,21 +1,18 @@
-import { __read } from 'tslib';
 import { useState, useContext } from 'react';
 import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
 import { isBrowser } from './is-browser.mjs';
 
 // Does this device prefer reduced motion? Returns `null` server-side.
-var prefersReducedMotion = { current: null };
-var hasDetected = false;
+const prefersReducedMotion = { current: null };
+let hasDetected = false;
 function initPrefersReducedMotion() {
     hasDetected = true;
     if (!isBrowser)
         return;
     if (window.matchMedia) {
-        var motionMediaQuery_1 = window.matchMedia("(prefers-reduced-motion)");
-        var setReducedMotionPreferences = function () {
-            return (prefersReducedMotion.current = motionMediaQuery_1.matches);
-        };
-        motionMediaQuery_1.addListener(setReducedMotionPreferences);
+        const motionMediaQuery = window.matchMedia("(prefers-reduced-motion)");
+        const setReducedMotionPreferences = () => (prefersReducedMotion.current = motionMediaQuery.matches);
+        motionMediaQuery.addListener(setReducedMotionPreferences);
         setReducedMotionPreferences();
     }
     else {
@@ -53,15 +50,15 @@ function useReducedMotion() {
      * Lazy initialisation of prefersReducedMotion
      */
     !hasDetected && initPrefersReducedMotion();
-    var _a = __read(useState(prefersReducedMotion.current), 1), shouldReduceMotion = _a[0];
+    const [shouldReduceMotion] = useState(prefersReducedMotion.current);
     /**
      * TODO See if people miss automatically updating shouldReduceMotion setting
      */
     return shouldReduceMotion;
 }
 function useReducedMotionConfig() {
-    var reducedMotionPreference = useReducedMotion();
-    var reducedMotion = useContext(MotionConfigContext).reducedMotion;
+    const reducedMotionPreference = useReducedMotion();
+    const { reducedMotion } = useContext(MotionConfigContext);
     if (reducedMotion === "never") {
         return false;
     }

package/dist/es/utils/use-unmount-effect.mjs

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 
 function useUnmountEffect(callback) {
-    return useEffect(function () { return function () { return callback(); }; }, []);
+    return useEffect(() => () => callback(), []);
 }
 
 export { useUnmountEffect };

package/dist/es/utils/warn-once.mjs

@@ -1,4 +1,4 @@
-var warned = new Set();
+const warned = new Set();
 function warnOnce(condition, message, element) {
     if (condition || warned.has(message))
         return;

package/dist/es/value/index.mjs

@@ -2,7 +2,7 @@ import sync, { getFrameData } from 'framesync';
 import { velocityPerSecond } from 'popmotion';
 import { SubscriptionManager } from '../utils/subscription-manager.mjs';
 
-var isFloat = function (value) {
+const isFloat = (value) => {
     return !isNaN(parseFloat(value));
 };
 /**
@@ -10,7 +10,7 @@ var isFloat = function (value) {
  *
  * @public
  */
-var MotionValue = /** @class */ (function () {
+class MotionValue {
     /**
      * @param init - The initiating value
      * @param config - Optional configuration options
@@ -19,13 +19,12 @@ var MotionValue = /** @class */ (function () {
      *
      * @internal
      */
-    function MotionValue(init) {
-        var _this = this;
+    constructor(init) {
         /**
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "7.0.3";
+        this.version = "7.1.2";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -64,28 +63,27 @@ var MotionValue = /** @class */ (function () {
          * @internal
          */
         this.canTrackVelocity = false;
-        this.updateAndNotify = function (v, render) {
-            if (render === void 0) { render = true; }
-            _this.prev = _this.current;
-            _this.current = v;
+        this.updateAndNotify = (v, render = true) => {
+            this.prev = this.current;
+            this.current = v;
             // Update timestamp
-            var _a = getFrameData(), delta = _a.delta, timestamp = _a.timestamp;
-            if (_this.lastUpdated !== timestamp) {
-                _this.timeDelta = delta;
-                _this.lastUpdated = timestamp;
-                sync.postRender(_this.scheduleVelocityCheck);
+            const { delta, timestamp } = getFrameData();
+            if (this.lastUpdated !== timestamp) {
+                this.timeDelta = delta;
+                this.lastUpdated = timestamp;
+                sync.postRender(this.scheduleVelocityCheck);
             }
             // Update update subscribers
-            if (_this.prev !== _this.current) {
-                _this.updateSubscribers.notify(_this.current);
+            if (this.prev !== this.current) {
+                this.updateSubscribers.notify(this.current);
             }
             // Update velocity subscribers
-            if (_this.velocityUpdateSubscribers.getSize()) {
-                _this.velocityUpdateSubscribers.notify(_this.getVelocity());
+            if (this.velocityUpdateSubscribers.getSize()) {
+                this.velocityUpdateSubscribers.notify(this.getVelocity());
             }
             // Update render subscribers
             if (render) {
-                _this.renderSubscribers.notify(_this.current);
+                this.renderSubscribers.notify(this.current);
             }
         };
         /**
@@ -96,7 +94,7 @@ var MotionValue = /** @class */ (function () {
          *
          * @internal
          */
-        this.scheduleVelocityCheck = function () { return sync.postRender(_this.velocityCheck); };
+        this.scheduleVelocityCheck = () => sync.postRender(this.velocityCheck);
         /**
          * Updates `prev` with `current` if the value hasn't been updated this frame.
          * This ensures velocity calculations return `0`.
@@ -106,11 +104,10 @@ var MotionValue = /** @class */ (function () {
          *
          * @internal
          */
-        this.velocityCheck = function (_a) {
-            var timestamp = _a.timestamp;
-            if (timestamp !== _this.lastUpdated) {
-                _this.prev = _this.current;
-                _this.velocityUpdateSubscribers.notify(_this.getVelocity());
+        this.velocityCheck = ({ timestamp }) => {
+            if (timestamp !== this.lastUpdated) {
+                this.prev = this.current;
+                this.velocityUpdateSubscribers.notify(this.getVelocity());
             }
         };
         this.hasAnimated = false;
@@ -165,12 +162,12 @@ var MotionValue = /** @class */ (function () {
      *
      * @public
      */
-    MotionValue.prototype.onChange = function (subscription) {
+    onChange(subscription) {
         return this.updateSubscribers.add(subscription);
-    };
-    MotionValue.prototype.clearListeners = function () {
+    }
+    clearListeners() {
         this.updateSubscribers.clear();
-    };
+    }
     /**
      * Adds a function that will be notified when the `MotionValue` requests a render.
      *
@@ -179,19 +176,19 @@ var MotionValue = /** @class */ (function () {
      *
      * @internal
      */
-    MotionValue.prototype.onRenderRequest = function (subscription) {
+    onRenderRequest(subscription) {
         // Render immediately
         subscription(this.get());
         return this.renderSubscribers.add(subscription);
-    };
+    }
     /**
      * Attaches a passive effect to the `MotionValue`.
      *
      * @internal
      */
-    MotionValue.prototype.attach = function (passiveEffect) {
+    attach(passiveEffect) {
         this.passiveEffect = passiveEffect;
-    };
+    }
     /**
      * Sets the state of the `MotionValue`.
      *
@@ -207,15 +204,14 @@ var MotionValue = /** @class */ (function () {
      *
      * @public
      */
-    MotionValue.prototype.set = function (v, render) {
-        if (render === void 0) { render = true; }
+    set(v, render = true) {
         if (!render || !this.passiveEffect) {
             this.updateAndNotify(v, render);
         }
         else {
             this.passiveEffect(v, this.updateAndNotify);
         }
-    };
+    }
     /**
      * Returns the latest state of `MotionValue`
      *
@@ -223,15 +219,15 @@ var MotionValue = /** @class */ (function () {
      *
      * @public
      */
-    MotionValue.prototype.get = function () {
+    get() {
         return this.current;
-    };
+    }
     /**
      * @public
      */
-    MotionValue.prototype.getPrevious = function () {
+    getPrevious() {
         return this.prev;
-    };
+    }
     /**
      * Returns the latest velocity of `MotionValue`
      *
@@ -239,14 +235,14 @@ var MotionValue = /** @class */ (function () {
      *
      * @public
      */
-    MotionValue.prototype.getVelocity = function () {
+    getVelocity() {
         // This could be isFloat(this.prev) && isFloat(this.current), but that would be wasteful
         return this.canTrackVelocity
             ? // These casts could be avoided if parseFloat would be typed better
                 velocityPerSecond(parseFloat(this.current) -
                     parseFloat(this.prev), this.timeDelta)
             : 0;
-    };
+    }
     /**
      * Registers a new animation to control this `MotionValue`. Only one
      * animation can drive a `MotionValue` at one time.
@@ -259,35 +255,34 @@ var MotionValue = /** @class */ (function () {
      *
      * @internal
      */
-    MotionValue.prototype.start = function (animation) {
-        var _this = this;
+    start(animation) {
         this.stop();
-        return new Promise(function (resolve) {
-            _this.hasAnimated = true;
-            _this.stopAnimation = animation(resolve);
-        }).then(function () { return _this.clearAnimation(); });
-    };
+        return new Promise((resolve) => {
+            this.hasAnimated = true;
+            this.stopAnimation = animation(resolve);
+        }).then(() => this.clearAnimation());
+    }
     /**
      * Stop the currently active animation.
      *
      * @public
      */
-    MotionValue.prototype.stop = function () {
+    stop() {
         if (this.stopAnimation)
             this.stopAnimation();
         this.clearAnimation();
-    };
+    }
     /**
      * Returns `true` if this value is currently animating.
      *
      * @public
      */
-    MotionValue.prototype.isAnimating = function () {
+    isAnimating() {
         return !!this.stopAnimation;
-    };
-    MotionValue.prototype.clearAnimation = function () {
+    }
+    clearAnimation() {
         this.stopAnimation = null;
-    };
+    }
     /**
      * Destroy and clean up subscribers to this `MotionValue`.
      *
@@ -297,13 +292,12 @@ var MotionValue = /** @class */ (function () {
      *
      * @public
      */
-    MotionValue.prototype.destroy = function () {
+    destroy() {
         this.updateSubscribers.clear();
         this.renderSubscribers.clear();
         this.stop();
-    };
-    return MotionValue;
-}());
+    }
+}
 function motionValue(init) {
     return new MotionValue(init);
 }

package/dist/es/value/use-combine-values.mjs

@@ -6,14 +6,14 @@ function useCombineMotionValues(values, combineValues) {
     /**
      * Initialise the returned motion value. This remains the same between renders.
      */
-    var value = useMotionValue(combineValues());
+    const value = useMotionValue(combineValues());
     /**
      * Create a function that will update the template motion value with the latest values.
      * This is pre-bound so whenever a motion value updates it can schedule its
      * execution in Framesync. If it's already been scheduled it won't be fired twice
      * in a single frame.
      */
-    var updateValue = function () { return value.set(combineValues()); };
+    const updateValue = () => value.set(combineValues());
     /**
      * Synchronously update the motion value with the latest values during the render.
      * This ensures that within a React render, the styles applied to the DOM are up-to-date.
@@ -23,7 +23,7 @@ function useCombineMotionValues(values, combineValues) {
      * Subscribe to all motion values found within the template. Whenever any of them change,
      * schedule an update.
      */
-    useMultiOnChange(values, function () { return sync.update(updateValue, false, true); });
+    useMultiOnChange(values, () => sync.update(updateValue, false, true));
     return value;
 }
 

package/dist/es/value/use-inverted-scale.mjs

@@ -6,11 +6,9 @@ import { useVisualElementContext } from '../context/MotionContext/index.mjs';
 // Keep things reasonable and avoid scale: Infinity. In practise we might need
 // to add another value, opacity, that could interpolate scaleX/Y [0,0.01] => [0,1]
 // to simply hide content at unreasonable scales.
-var maxScale = 100000;
-var invertScale = function (scale) {
-    return scale > 0.001 ? 1 / scale : maxScale;
-};
-var hasWarned = false;
+const maxScale = 100000;
+const invertScale = (scale) => scale > 0.001 ? 1 / scale : maxScale;
+let hasWarned = false;
 /**
  * Returns a `MotionValue` each for `scaleX` and `scaleY` that update with the inverse
  * of their respective parent scales.
@@ -31,9 +29,9 @@ var hasWarned = false;
  * @deprecated
  */
 function useInvertedScale(scale) {
-    var parentScaleX = useMotionValue(1);
-    var parentScaleY = useMotionValue(1);
-    var visualElement = useVisualElementContext();
+    let parentScaleX = useMotionValue(1);
+    let parentScaleY = useMotionValue(1);
+    const visualElement = useVisualElementContext();
     invariant(!!(scale || visualElement), "If no scale values are provided, useInvertedScale must be used within a child of another motion component.");
     warning(hasWarned, "useInvertedScale is deprecated and will be removed in 3.0. Use the layout prop instead.");
     hasWarned = true;
@@ -45,9 +43,9 @@ function useInvertedScale(scale) {
         parentScaleX = visualElement.getValue("scaleX", 1);
         parentScaleY = visualElement.getValue("scaleY", 1);
     }
-    var scaleX = useTransform(parentScaleX, invertScale);
-    var scaleY = useTransform(parentScaleY, invertScale);
-    return { scaleX: scaleX, scaleY: scaleY };
+    const scaleX = useTransform(parentScaleX, invertScale);
+    const scaleY = useTransform(parentScaleY, invertScale);
+    return { scaleX, scaleY };
 }
 
 export { invertScale, useInvertedScale };

package/dist/es/value/use-motion-template.mjs

@@ -22,20 +22,16 @@ import { useCombineMotionValues } from './use-combine-values.mjs';
  *
  * @public
  */
-function useMotionTemplate(fragments) {
-    var values = [];
-    for (var _i = 1; _i < arguments.length; _i++) {
-        values[_i - 1] = arguments[_i];
-    }
+function useMotionTemplate(fragments, ...values) {
     /**
      * Create a function that will build a string from the latest motion values.
      */
-    var numFragments = fragments.length;
+    const numFragments = fragments.length;
     function buildValue() {
-        var output = "";
-        for (var i = 0; i < numFragments; i++) {
+        let output = ``;
+        for (let i = 0; i < numFragments; i++) {
             output += fragments[i];
-            var value = values[i];
+            const value = values[i];
             if (value)
                 output += values[i].get();
         }