framer-motion 6.5.1 → 7.0.2

package/dist/framer-motion.dev.js

@@ -27,7 +27,7 @@
     var React__namespace = /*#__PURE__*/_interopNamespace(React);
     var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-    /*! *****************************************************************************
+    /******************************************************************************
     Copyright (c) Microsoft Corporation.
 
     Permission to use, copy, modify, and/or distribute this software for any
@@ -69,7 +69,7 @@
         return __assign.apply(this, arguments);
     };
 
-    function __rest$1(s, e) {
+    function __rest(s, e) {
         var t = {};
         for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
             t[p] = s[p];
@@ -890,8 +890,8 @@
     const clamp$2 = (min, max) => (v) => Math.max(Math.min(v, max), min);
     const sanitize = (v) => (v % 1 ? Number(v.toFixed(5)) : v);
     const floatRegex = /(-)?([\d]*\.?[\d])+/g;
-    const colorRegex = /(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))/gi;
-    const singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))$/i;
+    const colorRegex = /(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2}(-?[\d\.]+%?)\s*[\,\/]?\s*[\d\.]*%?\))/gi;
+    const singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2}(-?[\d\.]+%?)\s*[\,\/]?\s*[\d\.]*%?\))$/i;
     function isString$1(v) {
         return typeof v === 'string';
     }
@@ -1457,7 +1457,7 @@
     function buildSVGAttrs(state, _a, options, transformTemplate) {
         var attrX = _a.attrX, attrY = _a.attrY, originX = _a.originX, originY = _a.originY, pathLength = _a.pathLength, _b = _a.pathSpacing, pathSpacing = _b === void 0 ? 1 : _b, _c = _a.pathOffset, pathOffset = _c === void 0 ? 0 : _c, 
         // This is object creation, which we try to avoid per-frame.
-        latest = __rest$1(_a, ["attrX", "attrY", "originX", "originY", "pathLength", "pathSpacing", "pathOffset"]);
+        latest = __rest(_a, ["attrX", "attrY", "originX", "originY", "pathLength", "pathSpacing", "pathOffset"]);
         buildHTMLStyles(state, latest, options, transformTemplate);
         state.attrs = state.style;
         state.style = {};
@@ -1671,7 +1671,7 @@
                 var resolved = resolveVariantFromProps(props, definition);
                 if (!resolved)
                     return;
-                var transitionEnd = resolved.transitionEnd; resolved.transition; var target = __rest$1(resolved, ["transitionEnd", "transition"]);
+                var transitionEnd = resolved.transitionEnd; resolved.transition; var target = __rest(resolved, ["transitionEnd", "transition"]);
                 for (var key in target) {
                     var valueTarget = target[key];
                     if (Array.isArray(valueTarget)) {
@@ -2101,7 +2101,7 @@
         return springOptions;
     }
     function spring(_a) {
-        var { from = 0.0, to = 1.0, restSpeed = 2, restDelta } = _a, options = __rest$1(_a, ["from", "to", "restSpeed", "restDelta"]);
+        var { from = 0.0, to = 1.0, restSpeed = 2, restDelta } = _a, options = __rest(_a, ["from", "to", "restSpeed", "restDelta"]);
         const state = { done: false, value: from };
         let { stiffness, damping, mass, velocity, duration, isResolvedFromDuration, } = getSpringOptions(options);
         let resolveSpring = zero;
@@ -2567,12 +2567,12 @@
     }
 
     const defaultTimestep = (1 / 60) * 1000;
-    const getCurrentTime$1 = typeof performance !== "undefined"
+    const getCurrentTime = typeof performance !== "undefined"
         ? () => performance.now()
         : () => Date.now();
     const onNextFrame = typeof window !== "undefined"
         ? (callback) => window.requestAnimationFrame(callback)
-        : (callback) => setTimeout(() => callback(getCurrentTime$1()), defaultTimestep);
+        : (callback) => setTimeout(() => callback(getCurrentTime()), defaultTimestep);
 
     function createRenderStep(runNextFrame) {
         let toRun = [];
@@ -2709,7 +2709,7 @@
     };
     function animate$1(_a) {
         var _b, _c;
-        var { from, autoplay = true, driver = framesync, elapsed = 0, repeat: repeatMax = 0, repeatType = "loop", repeatDelay = 0, onPlay, onStop, onComplete, onRepeat, onUpdate } = _a, options = __rest$1(_a, ["from", "autoplay", "driver", "elapsed", "repeat", "repeatType", "repeatDelay", "onPlay", "onStop", "onComplete", "onRepeat", "onUpdate"]);
+        var { from, autoplay = true, driver = framesync, elapsed = 0, repeat: repeatMax = 0, repeatType = "loop", repeatDelay = 0, onPlay, onStop, onComplete, onRepeat, onUpdate } = _a, options = __rest(_a, ["from", "autoplay", "driver", "elapsed", "repeat", "repeatType", "repeatDelay", "onPlay", "onStop", "onComplete", "onRepeat", "onUpdate"]);
         let { to } = options;
         let driverControls;
         let repeatCount = 0;
@@ -3029,7 +3029,7 @@
         entries.forEach(fireObserverCallback);
     };
     function initIntersectionObserver(_a) {
-        var root = _a.root, options = __rest$1(_a, ["root"]);
+        var root = _a.root, options = __rest(_a, ["root"]);
         var lookupRoot = root || document;
         /**
          * If we don't have an observer lookup map for this root, create one.
@@ -3162,18 +3162,6 @@
         hover: makeRenderlessComponent(useHoverGesture),
     };
 
-    var counter = 0;
-    var incrementId = function () { return counter++; };
-    var useId = function () { return useConstant(incrementId); };
-    /**
-     * Ideally we'd use the following code to support React 18 optionally.
-     * But this fairly fails in Webpack (otherwise treeshaking wouldn't work at all).
-     * Need to come up with a different way of figuring this out.
-     */
-    // export const useId = (React as any).useId
-    //     ? (React as any).useId
-    //     : () => useConstant(incrementId)
-
     /**
      * When a component is the child of `AnimatePresence`, it can use `usePresence`
      * to access information about whether it's still present in the React tree.
@@ -3205,7 +3193,7 @@
         // It's safe to call the following hooks conditionally (after an early return) because the context will always
         // either be null or non-null for the lifespan of the component.
         // Replace with useId when released in React
-        var id = useId();
+        var id = React.useId();
         React.useEffect(function () { return register(id); }, []);
         var safeToRemove = function () { return onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete(id); };
         return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
@@ -3401,7 +3389,7 @@
      * 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$1(_a, ["when", "delay", "delayChildren", "staggerChildren", "staggerDirection", "repeat", "repeatType", "repeatDelay", "from"]);
+        _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"]);
         return !!Object.keys(transition).length;
     }
     var legacyRepeatWarning = false;
@@ -3409,7 +3397,7 @@
      * 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$1(_a, ["ease", "times", "yoyo", "flip", "loop"]);
+        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);
         if (times)
             options["offset"] = times;
@@ -3682,7 +3670,7 @@
              * 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 = "6.5.1";
+            this.version = "7.0.2";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -4012,7 +4000,7 @@
     }
     function setTarget(visualElement, definition) {
         var resolved = resolveVariant(visualElement, definition);
-        var _a = resolved ? visualElement.makeTargetAnimatable(resolved, false) : {}, _b = _a.transitionEnd, transitionEnd = _b === void 0 ? {} : _b; _a.transition; var target = __rest$1(_a, ["transitionEnd", "transition"]);
+        var _a = resolved ? visualElement.makeTargetAnimatable(resolved, false) : {}, _b = _a.transitionEnd, transitionEnd = _b === void 0 ? {} : _b; _a.transition; var target = __rest(_a, ["transitionEnd", "transition"]);
         target = __assign(__assign({}, target), transitionEnd);
         for (var key in target) {
             var value = resolveFinalValueInKeyframes(target[key]);
@@ -4172,7 +4160,7 @@
     function animateTarget(visualElement, definition, _a) {
         var _b;
         var _c = _a === void 0 ? {} : _a, _d = _c.delay, delay = _d === void 0 ? 0 : _d, transitionOverride = _c.transitionOverride, type = _c.type;
-        var _e = visualElement.makeTargetAnimatable(definition), _f = _e.transition, transition = _f === void 0 ? visualElement.getDefaultTransition() : _f, transitionEnd = _e.transitionEnd, target = __rest$1(_e, ["transition", "transitionEnd"]);
+        var _e = visualElement.makeTargetAnimatable(definition), _f = _e.transition, transition = _f === void 0 ? visualElement.getDefaultTransition() : _f, transitionEnd = _e.transitionEnd, target = __rest(_e, ["transition", "transitionEnd"]);
         if (transitionOverride)
             transition = transitionOverride;
         var animations = [];
@@ -4272,7 +4260,7 @@
         var buildResolvedTypeValues = function (acc, definition) {
             var resolved = resolveVariant(visualElement, definition);
             if (resolved) {
-                resolved.transition; var transitionEnd = resolved.transitionEnd, target = __rest$1(resolved, ["transition", "transitionEnd"]);
+                resolved.transition; var transitionEnd = resolved.transitionEnd, target = __rest(resolved, ["transition", "transitionEnd"]);
                 acc = __assign(__assign(__assign({}, acc), target), transitionEnd);
             }
             return acc;
@@ -4608,8 +4596,8 @@
      */
     var PanSession = /** @class */ (function () {
         function PanSession(event, handlers, _a) {
-            var _this = this;
             var _b = _a === void 0 ? {} : _a, transformPagePoint = _b.transformPagePoint;
+            var _this = this;
             /**
              * @internal
              */
@@ -5480,7 +5468,7 @@
              * If the element's layout changes, calculate the delta and apply that to
              * the drag gesture's origin point.
              */
-            projection.addEventListener("didUpdate", (function (_a) {
+            var stopLayoutUpdateListener = projection.addEventListener("didUpdate", (function (_a) {
                 var delta = _a.delta, hasLayoutChanged = _a.hasLayoutChanged;
                 if (_this.isDragging && hasLayoutChanged) {
                     eachAxis(function (axis) {
@@ -5497,6 +5485,7 @@
                 stopResizeListener();
                 stopPointerListener();
                 stopMeasureLayoutListener();
+                stopLayoutUpdateListener === null || stopLayoutUpdateListener === void 0 ? void 0 : stopLayoutUpdateListener();
             };
         };
         VisualElementDragControls.prototype.getProps = function () {
@@ -5651,7 +5640,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "6.5.1", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.5.1 may not work as expected."));
+                    warnOnce(nextValue.version === "7.0.2", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 7.0.2 may not work as expected."));
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -6124,7 +6113,7 @@
      */
     function resolveCSSVariables(visualElement, _a, transitionEnd) {
         var _b;
-        var target = __rest$1(_a, []);
+        var target = __rest(_a, []);
         var element = visualElement.getInstance();
         if (!(element instanceof Element))
             return { target: target, transitionEnd: transitionEnd };
@@ -6490,9 +6479,9 @@
          * can be animated by Motion.
          */
         makeTargetAnimatable: function (element, _a, _b, isMounted) {
+            var transition = _a.transition, transitionEnd = _a.transitionEnd, target = __rest(_a, ["transition", "transitionEnd"]);
             var transformValues = _b.transformValues;
             if (isMounted === void 0) { isMounted = true; }
-            var transition = _a.transition, transitionEnd = _a.transitionEnd, target = __rest$1(_a, ["transition", "transitionEnd"]);
             var origin = getOrigin(target, transition || {}, element);
             /**
              * If Framer has provided a function to convert `Color` etc value types, convert them
@@ -7152,9 +7141,9 @@
         var attachResizeListener = _a.attachResizeListener, defaultParent = _a.defaultParent, measureScroll = _a.measureScroll, checkIsScrollRoot = _a.checkIsScrollRoot, resetTransform = _a.resetTransform;
         return /** @class */ (function () {
             function ProjectionNode(id, latestValues, parent) {
-                var _this = this;
                 if (latestValues === void 0) { latestValues = {}; }
                 if (parent === void 0) { parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent(); }
+                var _this = this;
                 /**
                  * A Set containing all this component's children. This is used to iterate
                  * through the children.
@@ -8422,7 +8411,7 @@
     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 id = React.useId();
         var context = React.useMemo(function () { return ({
             id: id,
             initial: initial,
@@ -8704,7 +8693,7 @@
      * @public
      */
     function MotionConfig(_a) {
-        var children = _a.children, isValidProp = _a.isValidProp, config = __rest$1(_a, ["children", "isValidProp"]);
+        var children = _a.children, isValidProp = _a.isValidProp, config = __rest(_a, ["children", "isValidProp"]);
         isValidProp && loadExternalIsValidProp(isValidProp);
         /**
          * Inherit props from any parent MotionConfig components
@@ -8766,14 +8755,14 @@
          * If this is a synchronous load, load features immediately
          */
         if (!isLazyBundle(features)) {
-            var renderer = features.renderer, loadedFeatures = __rest$1(features, ["renderer"]);
+            var renderer = features.renderer, loadedFeatures = __rest(features, ["renderer"]);
             loadedRenderer.current = renderer;
             loadFeatures(loadedFeatures);
         }
         React.useEffect(function () {
             if (isLazyBundle(features)) {
                 features().then(function (_a) {
-                    var renderer = _a.renderer, loadedFeatures = __rest$1(_a, ["renderer"]);
+                    var renderer = _a.renderer, loadedFeatures = __rest(_a, ["renderer"]);
                     loadFeatures(loadedFeatures);
                     loadedRenderer.current = renderer;
                     setIsLoaded(true);
@@ -8809,7 +8798,7 @@
     }
 
     function ReorderGroup(_a, externalRef) {
-        var children = _a.children, _b = _a.as, as = _b === void 0 ? "ul" : _b, _c = _a.axis, axis = _c === void 0 ? "y" : _c, onReorder = _a.onReorder, values = _a.values, props = __rest$1(_a, ["children", "as", "axis", "onReorder", "values"]);
+        var children = _a.children, _b = _a.as, as = _b === void 0 ? "ul" : _b, _c = _a.axis, axis = _c === void 0 ? "y" : _c, onReorder = _a.onReorder, values = _a.values, props = __rest(_a, ["children", "as", "axis", "onReorder", "values"]);
         var Component = useConstant(function () { return motion(as); });
         var order = [];
         var isReordering = React.useRef(false);
@@ -8969,7 +8958,7 @@
         return isMotionValue(value) ? value : useMotionValue(defaultValue);
     }
     function ReorderItem(_a, externalRef) {
-        var children = _a.children, style = _a.style, value = _a.value, _b = _a.as, as = _b === void 0 ? "li" : _b, onDrag = _a.onDrag, _c = _a.layout, layout = _c === void 0 ? true : _c, props = __rest$1(_a, ["children", "style", "value", "as", "onDrag", "layout"]);
+        var children = _a.children, style = _a.style, value = _a.value, _b = _a.as, as = _b === void 0 ? "li" : _b, onDrag = _a.onDrag, _c = _a.layout, layout = _c === void 0 ? true : _c, props = __rest(_a, ["children", "style", "value", "as", "onDrag", "layout"]);
         var Component = useConstant(function () { return motion(as); });
         var context = React.useContext(ReorderContext);
         var point = {
@@ -9123,7 +9112,7 @@
     const clamp = (min, max, v) => Math.min(Math.max(v, min), max);
 
     const isNumber = (value) => typeof value === "number";
-    const isString = (value) => typeof value === "string";
+
     const isEasingList = (easing) => Array.isArray(easing) && !isNumber(easing[0]);
 
     const wrap = (min, max, v) => {
@@ -9179,6 +9168,10 @@
         };
     }
 
+    const isFunction = (value) => typeof value === "function";
+
+    const isString = (value) => typeof value === "string";
+
     /*
       Convert velocity into velocity per second
 
@@ -9209,33 +9202,6 @@
         return Array.from(elements || []);
     }
 
-    /******************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-
-    function __rest(s, e) {
-        var t = {};
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-            t[p] = s[p];
-        if (s != null && typeof Object.getOwnPropertySymbols === "function")
-            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                    t[p[i]] = s[p[i]];
-            }
-        return t;
-    }
-
     const thresholds = {
         any: 0,
         all: 1,
@@ -9263,7 +9229,7 @@
                     return;
                 if (entry.isIntersecting) {
                     const newOnEnd = onStart(entry);
-                    if (typeof newOnEnd === "function") {
+                    if (isFunction(newOnEnd)) {
                         activeIntersections.set(entry.target, newOnEnd);
                     }
                     else {
@@ -9376,7 +9342,7 @@
     }
 
     function resize(a, b) {
-        return typeof a === "function" ? resizeWindow(a) : resizeElement(a, b);
+        return isFunction(a) ? resizeWindow(a) : resizeElement(a, b);
     }
 
     /**
@@ -9626,7 +9592,7 @@
                     resolveOffsets(element, info, options);
                 }
             },
-            notify: typeof onScroll === "function"
+            notify: isFunction(onScroll)
                 ? () => onScroll(info)
                 : scrubAnimation(onScroll, info[axis]),
         };
@@ -9732,7 +9698,7 @@
     }); };
     function useScroll(_a) {
         if (_a === void 0) { _a = {}; }
-        var container = _a.container, target = _a.target, options = __rest$1(_a, ["container", "target"]);
+        var container = _a.container, target = _a.target, options = __rest(_a, ["container", "target"]);
         var values = useConstant(createScrollMotionValues);
         useIsomorphicLayoutEffect(function () {
             return scroll(function (_a) {
@@ -9746,28 +9712,33 @@
         return values;
     }
 
+    /**
+     * @deprecated useElementScroll is deprecated. Convert to useScroll({ container: ref })
+     */
     function useElementScroll(ref) {
         warnOnce(false, "useElementScroll is deprecated. Convert to useScroll({ container: ref }).");
         return useScroll({ container: ref });
     }
 
+    /**
+     * @deprecated useViewportScroll is deprecated. Convert to useScroll()
+     */
     function useViewportScroll() {
         warnOnce(false, "useViewportScroll is deprecated. Convert to useScroll().");
         return useScroll();
     }
 
-    var getCurrentTime = typeof performance !== "undefined"
-        ? function () { return performance.now(); }
-        : function () { return Date.now(); };
     function useAnimationFrame(callback) {
-        var initialTimestamp = useConstant(getCurrentTime);
+        var initialTimestamp = React.useRef(0);
         var isStatic = React.useContext(MotionConfigContext).isStatic;
         React.useEffect(function () {
             if (isStatic)
                 return;
             var provideTimeSinceStart = function (_a) {
                 var timestamp = _a.timestamp;
-                callback(timestamp - initialTimestamp);
+                if (!initialTimestamp.current)
+                    initialTimestamp.current = timestamp;
+                callback(timestamp - initialTimestamp.current);
             };
             sync.update(provideTimeSinceStart, true);
             return function () { return cancelSync.update(provideTimeSinceStart); };
@@ -10094,7 +10065,7 @@
             return options.initialState[key] || 0;
         },
         makeTargetAnimatable: function (element, _a) {
-            var transition = _a.transition, transitionEnd = _a.transitionEnd, target = __rest$1(_a, ["transition", "transitionEnd"]);
+            var transition = _a.transition, transitionEnd = _a.transitionEnd, target = __rest(_a, ["transition", "transitionEnd"]);
             var origin = getOrigin(target, transition || {}, element);
             checkTargetForNewValues(element, target, origin);
             return __assign({ transition: transition, transitionEnd: transitionEnd }, target);