framer-motion 10.16.1 → 10.16.2

package/dist/cjs/dom-entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var indexLegacy = require('./index-legacy-22d86ed2.js');
+var indexLegacy = require('./index-legacy-ccd59e4d.js');
 
 
 

package/dist/cjs/{index-legacy-22d86ed2.js → index-legacy-ccd59e4d.js}

@@ -553,16 +553,37 @@ const resolveFinalValueInKeyframes = (v) => {
 
 const noop = (any) => any;
 
+class Queue {
+    constructor() {
+        this.order = [];
+        this.scheduled = new Set();
+    }
+    add(process) {
+        if (!this.scheduled.has(process)) {
+            this.scheduled.add(process);
+            this.order.push(process);
+            return true;
+        }
+    }
+    remove(process) {
+        const index = this.order.indexOf(process);
+        if (index !== -1) {
+            this.order.splice(index, 1);
+            this.scheduled.delete(process);
+        }
+    }
+    clear() {
+        this.order.length = 0;
+        this.scheduled.clear();
+    }
+}
 function createRenderStep(runNextFrame) {
     /**
-     * We create and reuse two arrays, one to queue jobs for the current frame
+     * We create and reuse two queues, one to queue jobs for the current frame
      * and one for the next. We reuse to avoid triggering GC after x frames.
      */
-    let toRun = [];
-    let toRunNextFrame = [];
-    /**
-     *
-     */
+    let thisFrame = new Queue();
+    let nextFrame = new Queue();
     let numToRun = 0;
     /**
      * Track whether we're currently processing jobs in this step. This way
@@ -580,15 +601,12 @@ function createRenderStep(runNextFrame) {
          */
         schedule: (callback, keepAlive = false, immediate = false) => {
             const addToCurrentFrame = immediate && isProcessing;
-            const buffer = addToCurrentFrame ? toRun : toRunNextFrame;
+            const queue = addToCurrentFrame ? thisFrame : nextFrame;
             if (keepAlive)
                 toKeepAlive.add(callback);
-            // If the buffer doesn't already contain this callback, add it
-            if (buffer.indexOf(callback) === -1) {
-                buffer.push(callback);
-                // If we're adding it to the currently running buffer, update its measured size
-                if (addToCurrentFrame && isProcessing)
-                    numToRun = toRun.length;
+            if (queue.add(callback) && addToCurrentFrame && isProcessing) {
+                // If we're adding it to the currently running queue, update its measured size
+                numToRun = thisFrame.order.length;
             }
             return callback;
         },
@@ -596,9 +614,7 @@ function createRenderStep(runNextFrame) {
          * Cancel the provided callback from running on the next frame.
          */
         cancel: (callback) => {
-            const index = toRunNextFrame.indexOf(callback);
-            if (index !== -1)
-                toRunNextFrame.splice(index, 1);
+            nextFrame.remove(callback);
             toKeepAlive.delete(callback);
         },
         /**
@@ -615,14 +631,14 @@ function createRenderStep(runNextFrame) {
                 return;
             }
             isProcessing = true;
-            [toRun, toRunNextFrame] = [toRunNextFrame, toRun];
-            // Clear the next frame list
-            toRunNextFrame.length = 0;
+            [thisFrame, nextFrame] = [nextFrame, thisFrame];
+            // Clear the next frame queue
+            nextFrame.clear();
             // Execute this frame
-            numToRun = toRun.length;
+            numToRun = thisFrame.order.length;
             if (numToRun) {
                 for (let i = 0; i < numToRun; i++) {
-                    const callback = toRun[i];
+                    const callback = thisFrame.order[i];
                     callback(frameData);
                     if (toKeepAlive.has(callback)) {
                         step.schedule(callback);
@@ -2662,7 +2678,7 @@ class MotionValue {
          * 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 = "10.16.1";
+        this.version = "10.16.2";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -3880,7 +3896,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "10.16.1", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.16.1 may not work as expected.`);
+                warnOnce(nextValue.version === "10.16.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.16.2 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -5071,7 +5087,7 @@ function updateScrollInfo(element, info, time) {
 }
 
 function calcInset(element, container) {
-    let inset = { x: 0, y: 0 };
+    const inset = { x: 0, y: 0 };
     let current = element;
     while (current && current !== container) {
         if (current instanceof HTMLElement) {
@@ -5079,16 +5095,36 @@ function calcInset(element, container) {
             inset.y += current.offsetTop;
             current = current.offsetParent;
         }
-        else if (current instanceof SVGGraphicsElement && "getBBox" in current) {
-            const { top, left } = current.getBBox();
-            inset.x += left;
-            inset.y += top;
+        else if (current.tagName === "svg") {
             /**
-             * Assign the next parent element as the <svg /> tag.
+             * This isn't an ideal approach to measuring the offset of <svg /> tags.
+             * It would be preferable, given they behave like HTMLElements in most ways
+             * to use offsetLeft/Top. But these don't exist on <svg />. Likewise we
+             * can't use .getBBox() like most SVG elements as these provide the offset
+             * relative to the SVG itself, which for <svg /> is usually 0x0.
              */
-            while (current && current.tagName !== "svg") {
-                current = current.parentNode;
+            const svgBoundingBox = current.getBoundingClientRect();
+            current = current.parentElement;
+            const parentBoundingBox = current.getBoundingClientRect();
+            inset.x += svgBoundingBox.left - parentBoundingBox.left;
+            inset.y += svgBoundingBox.top - parentBoundingBox.top;
+        }
+        else if (current instanceof SVGGraphicsElement) {
+            const { x, y } = current.getBBox();
+            inset.x += x;
+            inset.y += y;
+            let svg = null;
+            let parent = current.parentNode;
+            while (!svg) {
+                if (parent.tagName === "svg") {
+                    svg = parent;
+                }
+                parent = current.parentNode;
             }
+            current = svg;
+        }
+        else {
+            break;
         }
     }
     return inset;
@@ -5190,6 +5226,11 @@ function resolveOffset(offset, containerLength, targetLength, targetInset) {
 }
 
 const point = { x: 0, y: 0 };
+function getTargetSize(target) {
+    return "getBBox" in target && target.tagName !== "svg"
+        ? target.getBBox()
+        : { width: target.clientWidth, height: target.clientHeight };
+}
 function resolveOffsets(container, info, options) {
     let { offset: offsetDefinition = ScrollOffset.All } = options;
     const { target = container, axis = "y" } = options;
@@ -5202,7 +5243,7 @@ function resolveOffsets(container, info, options) {
      */
     const targetSize = target === container
         ? { width: container.scrollWidth, height: container.scrollHeight }
-        : { width: target.clientWidth, height: target.clientHeight };
+        : getTargetSize(target);
     const containerSize = {
         width: container.clientWidth,
         height: container.clientHeight,

package/dist/cjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var indexLegacy = require('./index-legacy-22d86ed2.js');
+var indexLegacy = require('./index-legacy-ccd59e4d.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/es/frameloop/render-step.mjs

@@ -1,13 +1,34 @@
+class Queue {
+    constructor() {
+        this.order = [];
+        this.scheduled = new Set();
+    }
+    add(process) {
+        if (!this.scheduled.has(process)) {
+            this.scheduled.add(process);
+            this.order.push(process);
+            return true;
+        }
+    }
+    remove(process) {
+        const index = this.order.indexOf(process);
+        if (index !== -1) {
+            this.order.splice(index, 1);
+            this.scheduled.delete(process);
+        }
+    }
+    clear() {
+        this.order.length = 0;
+        this.scheduled.clear();
+    }
+}
 function createRenderStep(runNextFrame) {
     /**
-     * We create and reuse two arrays, one to queue jobs for the current frame
+     * We create and reuse two queues, one to queue jobs for the current frame
      * and one for the next. We reuse to avoid triggering GC after x frames.
      */
-    let toRun = [];
-    let toRunNextFrame = [];
-    /**
-     *
-     */
+    let thisFrame = new Queue();
+    let nextFrame = new Queue();
     let numToRun = 0;
     /**
      * Track whether we're currently processing jobs in this step. This way
@@ -25,15 +46,12 @@ function createRenderStep(runNextFrame) {
          */
         schedule: (callback, keepAlive = false, immediate = false) => {
             const addToCurrentFrame = immediate && isProcessing;
-            const buffer = addToCurrentFrame ? toRun : toRunNextFrame;
+            const queue = addToCurrentFrame ? thisFrame : nextFrame;
             if (keepAlive)
                 toKeepAlive.add(callback);
-            // If the buffer doesn't already contain this callback, add it
-            if (buffer.indexOf(callback) === -1) {
-                buffer.push(callback);
-                // If we're adding it to the currently running buffer, update its measured size
-                if (addToCurrentFrame && isProcessing)
-                    numToRun = toRun.length;
+            if (queue.add(callback) && addToCurrentFrame && isProcessing) {
+                // If we're adding it to the currently running queue, update its measured size
+                numToRun = thisFrame.order.length;
             }
             return callback;
         },
@@ -41,9 +59,7 @@ function createRenderStep(runNextFrame) {
          * Cancel the provided callback from running on the next frame.
          */
         cancel: (callback) => {
-            const index = toRunNextFrame.indexOf(callback);
-            if (index !== -1)
-                toRunNextFrame.splice(index, 1);
+            nextFrame.remove(callback);
             toKeepAlive.delete(callback);
         },
         /**
@@ -60,14 +76,14 @@ function createRenderStep(runNextFrame) {
                 return;
             }
             isProcessing = true;
-            [toRun, toRunNextFrame] = [toRunNextFrame, toRun];
-            // Clear the next frame list
-            toRunNextFrame.length = 0;
+            [thisFrame, nextFrame] = [nextFrame, thisFrame];
+            // Clear the next frame queue
+            nextFrame.clear();
             // Execute this frame
-            numToRun = toRun.length;
+            numToRun = thisFrame.order.length;
             if (numToRun) {
                 for (let i = 0; i < numToRun; i++) {
-                    const callback = toRun[i];
+                    const callback = thisFrame.order[i];
                     callback(frameData);
                     if (toKeepAlive.has(callback)) {
                         step.schedule(callback);

package/dist/es/render/dom/scroll/offsets/index.mjs

@@ -5,6 +5,11 @@ import { interpolate } from '../../../../utils/interpolate.mjs';
 import { defaultOffset } from '../../../../utils/offsets/default.mjs';
 
 const point = { x: 0, y: 0 };
+function getTargetSize(target) {
+    return "getBBox" in target && target.tagName !== "svg"
+        ? target.getBBox()
+        : { width: target.clientWidth, height: target.clientHeight };
+}
 function resolveOffsets(container, info, options) {
     let { offset: offsetDefinition = ScrollOffset.All } = options;
     const { target = container, axis = "y" } = options;
@@ -17,7 +22,7 @@ function resolveOffsets(container, info, options) {
      */
     const targetSize = target === container
         ? { width: container.scrollWidth, height: container.scrollHeight }
-        : { width: target.clientWidth, height: target.clientHeight };
+        : getTargetSize(target);
     const containerSize = {
         width: container.clientWidth,
         height: container.clientHeight,

package/dist/es/render/dom/scroll/offsets/inset.mjs

@@ -1,5 +1,5 @@
 function calcInset(element, container) {
-    let inset = { x: 0, y: 0 };
+    const inset = { x: 0, y: 0 };
     let current = element;
     while (current && current !== container) {
         if (current instanceof HTMLElement) {
@@ -7,16 +7,36 @@ function calcInset(element, container) {
             inset.y += current.offsetTop;
             current = current.offsetParent;
         }
-        else if (current instanceof SVGGraphicsElement && "getBBox" in current) {
-            const { top, left } = current.getBBox();
-            inset.x += left;
-            inset.y += top;
+        else if (current.tagName === "svg") {
             /**
-             * Assign the next parent element as the <svg /> tag.
+             * This isn't an ideal approach to measuring the offset of <svg /> tags.
+             * It would be preferable, given they behave like HTMLElements in most ways
+             * to use offsetLeft/Top. But these don't exist on <svg />. Likewise we
+             * can't use .getBBox() like most SVG elements as these provide the offset
+             * relative to the SVG itself, which for <svg /> is usually 0x0.
              */
-            while (current && current.tagName !== "svg") {
-                current = current.parentNode;
+            const svgBoundingBox = current.getBoundingClientRect();
+            current = current.parentElement;
+            const parentBoundingBox = current.getBoundingClientRect();
+            inset.x += svgBoundingBox.left - parentBoundingBox.left;
+            inset.y += svgBoundingBox.top - parentBoundingBox.top;
+        }
+        else if (current instanceof SVGGraphicsElement) {
+            const { x, y } = current.getBBox();
+            inset.x += x;
+            inset.y += y;
+            let svg = null;
+            let parent = current.parentNode;
+            while (!svg) {
+                if (parent.tagName === "svg") {
+                    svg = parent;
+                }
+                parent = current.parentNode;
             }
+            current = svg;
+        }
+        else {
+            break;
         }
     }
     return inset;

package/dist/es/render/utils/motion-values.mjs

@@ -22,7 +22,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "10.16.1", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.16.1 may not work as expected.`);
+                warnOnce(nextValue.version === "10.16.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.16.2 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/value/index.mjs

@@ -28,7 +28,7 @@ class MotionValue {
          * 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 = "10.16.1";
+        this.version = "10.16.2";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/framer-motion.dev.js

@@ -1218,16 +1218,37 @@
 
     const noop = (any) => any;
 
+    class Queue {
+        constructor() {
+            this.order = [];
+            this.scheduled = new Set();
+        }
+        add(process) {
+            if (!this.scheduled.has(process)) {
+                this.scheduled.add(process);
+                this.order.push(process);
+                return true;
+            }
+        }
+        remove(process) {
+            const index = this.order.indexOf(process);
+            if (index !== -1) {
+                this.order.splice(index, 1);
+                this.scheduled.delete(process);
+            }
+        }
+        clear() {
+            this.order.length = 0;
+            this.scheduled.clear();
+        }
+    }
     function createRenderStep(runNextFrame) {
         /**
-         * We create and reuse two arrays, one to queue jobs for the current frame
+         * We create and reuse two queues, one to queue jobs for the current frame
          * and one for the next. We reuse to avoid triggering GC after x frames.
          */
-        let toRun = [];
-        let toRunNextFrame = [];
-        /**
-         *
-         */
+        let thisFrame = new Queue();
+        let nextFrame = new Queue();
         let numToRun = 0;
         /**
          * Track whether we're currently processing jobs in this step. This way
@@ -1245,15 +1266,12 @@
              */
             schedule: (callback, keepAlive = false, immediate = false) => {
                 const addToCurrentFrame = immediate && isProcessing;
-                const buffer = addToCurrentFrame ? toRun : toRunNextFrame;
+                const queue = addToCurrentFrame ? thisFrame : nextFrame;
                 if (keepAlive)
                     toKeepAlive.add(callback);
-                // If the buffer doesn't already contain this callback, add it
-                if (buffer.indexOf(callback) === -1) {
-                    buffer.push(callback);
-                    // If we're adding it to the currently running buffer, update its measured size
-                    if (addToCurrentFrame && isProcessing)
-                        numToRun = toRun.length;
+                if (queue.add(callback) && addToCurrentFrame && isProcessing) {
+                    // If we're adding it to the currently running queue, update its measured size
+                    numToRun = thisFrame.order.length;
                 }
                 return callback;
             },
@@ -1261,9 +1279,7 @@
              * Cancel the provided callback from running on the next frame.
              */
             cancel: (callback) => {
-                const index = toRunNextFrame.indexOf(callback);
-                if (index !== -1)
-                    toRunNextFrame.splice(index, 1);
+                nextFrame.remove(callback);
                 toKeepAlive.delete(callback);
             },
             /**
@@ -1280,14 +1296,14 @@
                     return;
                 }
                 isProcessing = true;
-                [toRun, toRunNextFrame] = [toRunNextFrame, toRun];
-                // Clear the next frame list
-                toRunNextFrame.length = 0;
+                [thisFrame, nextFrame] = [nextFrame, thisFrame];
+                // Clear the next frame queue
+                nextFrame.clear();
                 // Execute this frame
-                numToRun = toRun.length;
+                numToRun = thisFrame.order.length;
                 if (numToRun) {
                     for (let i = 0; i < numToRun; i++) {
-                        const callback = toRun[i];
+                        const callback = thisFrame.order[i];
                         callback(frameData);
                         if (toKeepAlive.has(callback)) {
                             step.schedule(callback);
@@ -3809,7 +3825,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 = "10.16.1";
+            this.version = "10.16.2";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -6656,7 +6672,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "10.16.1", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.16.1 may not work as expected.`);
+                    warnOnce(nextValue.version === "10.16.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.16.2 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -7846,7 +7862,7 @@
     }
 
     function calcInset(element, container) {
-        let inset = { x: 0, y: 0 };
+        const inset = { x: 0, y: 0 };
         let current = element;
         while (current && current !== container) {
             if (current instanceof HTMLElement) {
@@ -7854,16 +7870,36 @@
                 inset.y += current.offsetTop;
                 current = current.offsetParent;
             }
-            else if (current instanceof SVGGraphicsElement && "getBBox" in current) {
-                const { top, left } = current.getBBox();
-                inset.x += left;
-                inset.y += top;
+            else if (current.tagName === "svg") {
                 /**
-                 * Assign the next parent element as the <svg /> tag.
+                 * This isn't an ideal approach to measuring the offset of <svg /> tags.
+                 * It would be preferable, given they behave like HTMLElements in most ways
+                 * to use offsetLeft/Top. But these don't exist on <svg />. Likewise we
+                 * can't use .getBBox() like most SVG elements as these provide the offset
+                 * relative to the SVG itself, which for <svg /> is usually 0x0.
                  */
-                while (current && current.tagName !== "svg") {
-                    current = current.parentNode;
+                const svgBoundingBox = current.getBoundingClientRect();
+                current = current.parentElement;
+                const parentBoundingBox = current.getBoundingClientRect();
+                inset.x += svgBoundingBox.left - parentBoundingBox.left;
+                inset.y += svgBoundingBox.top - parentBoundingBox.top;
+            }
+            else if (current instanceof SVGGraphicsElement) {
+                const { x, y } = current.getBBox();
+                inset.x += x;
+                inset.y += y;
+                let svg = null;
+                let parent = current.parentNode;
+                while (!svg) {
+                    if (parent.tagName === "svg") {
+                        svg = parent;
+                    }
+                    parent = current.parentNode;
                 }
+                current = svg;
+            }
+            else {
+                break;
             }
         }
         return inset;
@@ -7965,6 +8001,11 @@
     }
 
     const point = { x: 0, y: 0 };
+    function getTargetSize(target) {
+        return "getBBox" in target && target.tagName !== "svg"
+            ? target.getBBox()
+            : { width: target.clientWidth, height: target.clientHeight };
+    }
     function resolveOffsets(container, info, options) {
         let { offset: offsetDefinition = ScrollOffset.All } = options;
         const { target = container, axis = "y" } = options;
@@ -7977,7 +8018,7 @@
          */
         const targetSize = target === container
             ? { width: container.scrollWidth, height: container.scrollHeight }
-            : { width: target.clientWidth, height: target.clientHeight };
+            : getTargetSize(target);
         const containerSize = {
             width: container.clientWidth,
             height: container.clientHeight,