framer-motion 4.1.14 → 4.1.17

package/CHANGELOG.md

@@ -2,7 +2,26 @@
 
 Framer Motion adheres to [Semantic Versioning](http://semver.org/).
 
-## [4.1.14] 2021-05-10
+## [4.1.17] 2021-05-17
+
+### Fixed
+
+-   Fixing SVG `gradientTransform`.
+-   Removing hover event suspension during layout measurements.
+
+## [4.1.16] 2021-05-12
+
+### Fixed
+
+-   Use with changing external refs.
+
+## [4.1.15] 2021-05-11
+
+### Fixed
+
+-   Correctly firing `onAnimationComplete` when a spring animation defined by `bounce` and no `duration` is completed.
+
+## [4.1.14] 2021-05-11
 
 ### Fixed
 

package/dist/es/gestures/use-hover-gesture.js

@@ -2,16 +2,12 @@ import { isMouseEvent } from './utils/event-type.js';
 import { AnimationType } from '../render/utils/types.js';
 import { usePointerEvent } from '../events/use-pointer-event.js';
 import { isDragActive } from './drag/utils/lock.js';
-import { layoutState } from '../render/dom/utils/batch-layout.js';
 
 function createHoverEvent(visualElement, isActive, callback) {
     return function (event, info) {
         var _a;
-        if (!isMouseEvent(event) ||
-            layoutState.isMeasuringLayout ||
-            isDragActive()) {
+        if (!isMouseEvent(event) || isDragActive())
             return;
-        }
         callback === null || callback === void 0 ? void 0 : callback(event, info);
         (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Hover, isActive);
     };

package/dist/es/motion/utils/use-motion-ref.js

@@ -22,7 +22,13 @@ function useMotionRef(visualState, visualElement, externalRef) {
                 externalRef.current = instance;
             }
         }
-    }, [visualElement, externalRef]);
+    }, 
+    /**
+     * Only pass a new ref callback to React if we've received a visual element
+     * factory. Otherwise we'll be mounting/remounting every time externalRef
+     * or other dependencies change.
+     */
+    [visualElement]);
 }
 
 export { useMotionRef };

package/dist/es/render/dom/utils/batch-layout.js

@@ -1,9 +1,4 @@
-import sync from 'framesync';
-
 var unresolvedJobs = new Set();
-var layoutState = {
-    isMeasuringLayout: false,
-};
 function pushJob(stack, job, pointer) {
     if (!stack[pointer])
         stack[pointer] = [];
@@ -32,24 +27,6 @@ function flushLayout() {
         pointer = 0;
     });
     unresolvedJobs.clear();
-    /**
-     * Mark that we're currently measuring layouts. This allows us to, for instance, ignore
-     * hover events that might be triggered as a result of resetting transforms.
-     *
-     * The postRender/setTimeout combo seems like an odd bit of scheduling but what it's saying
-     * is *after* the next render, wait 10ms before re-enabling hover events. Waiting until the
-     * next frame completely will result in missed, valid hover events. But events seem to
-     * be fired async from their actual action, so setting this to false too soon can still
-     * trigger events from layout measurements.
-     *
-     * Note: If we figure out a way of measuring layout while transforms remain applied, this can be removed.
-     * I have attempted unregistering event listeners and setting CSS to pointer-events: none
-     * but neither seem to work as expected.
-     */
-    layoutState.isMeasuringLayout = true;
-    sync.postRender(function () {
-        setTimeout(function () { return (layoutState.isMeasuringLayout = false); }, 10);
-    });
     /**
      * Execute jobs
      */
@@ -61,4 +38,4 @@ function flushLayout() {
 }
 var executeJob = function (job) { return job(); };
 
-export { batchLayout, flushLayout, layoutState };
+export { batchLayout, flushLayout };

package/dist/es/render/svg/utils/camel-case-attrs.js

@@ -20,6 +20,7 @@ var camelCaseAttributes = new Set([
     "stdDeviation",
     "tableValues",
     "viewBox",
+    "gradientTransform",
 ]);
 
 export { camelCaseAttributes };

package/dist/framer-motion.cjs.js

@@ -6,8 +6,8 @@ var tslib = require('tslib');
 var React = require('react');
 var heyListen = require('hey-listen');
 var styleValueTypes = require('style-value-types');
-var sync = require('framesync');
 var popmotion = require('popmotion');
+var sync = require('framesync');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -300,7 +300,13 @@ function useMotionRef(visualState, visualElement, externalRef) {
                 externalRef.current = instance;
             }
         }
-    }, [visualElement, externalRef]);
+    }, 
+    /**
+     * Only pass a new ref callback to React if we've received a visual element
+     * factory. Otherwise we'll be mounting/remounting every time externalRef
+     * or other dependencies change.
+     */
+    [visualElement]);
 }
 
 /**
@@ -1176,6 +1182,7 @@ var camelCaseAttributes = new Set([
     "stdDeviation",
     "tableValues",
     "viewBox",
+    "gradientTransform",
 ]);
 
 function renderSVG(element, renderState) {
@@ -1568,75 +1575,11 @@ function isDragActive() {
     return false;
 }
 
-var unresolvedJobs = new Set();
-var layoutState = {
-    isMeasuringLayout: false,
-};
-function pushJob(stack, job, pointer) {
-    if (!stack[pointer])
-        stack[pointer] = [];
-    stack[pointer].push(job);
-}
-function batchLayout(callback) {
-    unresolvedJobs.add(callback);
-    return function () { return unresolvedJobs.delete(callback); };
-}
-function flushLayout() {
-    if (!unresolvedJobs.size)
-        return;
-    var pointer = 0;
-    var reads = [[]];
-    var writes = [];
-    var setRead = function (job) { return pushJob(reads, job, pointer); };
-    var setWrite = function (job) {
-        pushJob(writes, job, pointer);
-        pointer++;
-    };
-    /**
-     * Resolve jobs into their array stacks
-     */
-    unresolvedJobs.forEach(function (callback) {
-        callback(setRead, setWrite);
-        pointer = 0;
-    });
-    unresolvedJobs.clear();
-    /**
-     * Mark that we're currently measuring layouts. This allows us to, for instance, ignore
-     * hover events that might be triggered as a result of resetting transforms.
-     *
-     * The postRender/setTimeout combo seems like an odd bit of scheduling but what it's saying
-     * is *after* the next render, wait 10ms before re-enabling hover events. Waiting until the
-     * next frame completely will result in missed, valid hover events. But events seem to
-     * be fired async from their actual action, so setting this to false too soon can still
-     * trigger events from layout measurements.
-     *
-     * Note: If we figure out a way of measuring layout while transforms remain applied, this can be removed.
-     * I have attempted unregistering event listeners and setting CSS to pointer-events: none
-     * but neither seem to work as expected.
-     */
-    layoutState.isMeasuringLayout = true;
-    sync__default['default'].postRender(function () {
-        setTimeout(function () { return (layoutState.isMeasuringLayout = false); }, 10);
-    });
-    /**
-     * Execute jobs
-     */
-    var numStacks = writes.length;
-    for (var i = 0; i <= numStacks; i++) {
-        reads[i] && reads[i].forEach(executeJob);
-        writes[i] && writes[i].forEach(executeJob);
-    }
-}
-var executeJob = function (job) { return job(); };
-
 function createHoverEvent(visualElement, isActive, callback) {
     return function (event, info) {
         var _a;
-        if (!isMouseEvent(event) ||
-            layoutState.isMeasuringLayout ||
-            isDragActive()) {
+        if (!isMouseEvent(event) || isDragActive())
             return;
-        }
         callback === null || callback === void 0 ? void 0 : callback(event, info);
         (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Hover, isActive);
     };
@@ -3786,6 +3729,46 @@ function convertToRelativeProjection(visualElement, isLayoutDrag) {
     return true;
 }
 
+var unresolvedJobs = new Set();
+function pushJob(stack, job, pointer) {
+    if (!stack[pointer])
+        stack[pointer] = [];
+    stack[pointer].push(job);
+}
+function batchLayout(callback) {
+    unresolvedJobs.add(callback);
+    return function () { return unresolvedJobs.delete(callback); };
+}
+function flushLayout() {
+    if (!unresolvedJobs.size)
+        return;
+    var pointer = 0;
+    var reads = [[]];
+    var writes = [];
+    var setRead = function (job) { return pushJob(reads, job, pointer); };
+    var setWrite = function (job) {
+        pushJob(writes, job, pointer);
+        pointer++;
+    };
+    /**
+     * Resolve jobs into their array stacks
+     */
+    unresolvedJobs.forEach(function (callback) {
+        callback(setRead, setWrite);
+        pointer = 0;
+    });
+    unresolvedJobs.clear();
+    /**
+     * Execute jobs
+     */
+    var numStacks = writes.length;
+    for (var i = 0; i <= numStacks; i++) {
+        reads[i] && reads[i].forEach(executeJob);
+        writes[i] && writes[i].forEach(executeJob);
+    }
+}
+var executeJob = function (job) { return job(); };
+
 var elementDragControls = new WeakMap();
 /**
  *