@epic-web/workshop-app 4.5.0 → 4.5.1

package/node_modules/framer-motion/dist/framer-motion.dev.js

@@ -2675,14 +2675,17 @@
              * If any keyframe is a CSS variable, we need to find its value by sampling the element
              */
             for (let i = 0; i < unresolvedKeyframes.length; i++) {
-                const keyframe = unresolvedKeyframes[i];
-                if (typeof keyframe === "string" && isCSSVariableToken(keyframe)) {
-                    const resolved = getVariableValue(keyframe, element.current);
-                    if (resolved !== undefined) {
-                        unresolvedKeyframes[i] = resolved;
-                    }
-                    if (i === unresolvedKeyframes.length - 1) {
-                        this.finalKeyframe = keyframe;
+                let keyframe = unresolvedKeyframes[i];
+                if (typeof keyframe === "string") {
+                    keyframe = keyframe.trim();
+                    if (isCSSVariableToken(keyframe)) {
+                        const resolved = getVariableValue(keyframe, element.current);
+                        if (resolved !== undefined) {
+                            unresolvedKeyframes[i] = resolved;
+                        }
+                        if (i === unresolvedKeyframes.length - 1) {
+                            this.finalKeyframe = keyframe;
+                        }
                     }
                 }
             }
@@ -4434,6 +4437,99 @@
         }
     }
 
+    function observeTimeline(update, timeline) {
+        let prevProgress;
+        const onFrame = () => {
+            const { currentTime } = timeline;
+            const percentage = currentTime === null ? 0 : currentTime.value;
+            const progress = percentage / 100;
+            if (prevProgress !== progress) {
+                update(progress);
+            }
+            prevProgress = progress;
+        };
+        frame.update(onFrame, true);
+        return () => cancelFrame(onFrame);
+    }
+
+    const supportsScrollTimeline = memo(() => window.ScrollTimeline !== undefined);
+
+    class GroupPlaybackControls {
+        constructor(animations) {
+            // Bound to accomodate common `return animation.stop` pattern
+            this.stop = () => this.runAll("stop");
+            this.animations = animations.filter(Boolean);
+        }
+        then(onResolve, onReject) {
+            return Promise.all(this.animations).then(onResolve).catch(onReject);
+        }
+        /**
+         * TODO: Filter out cancelled or stopped animations before returning
+         */
+        getAll(propName) {
+            return this.animations[0][propName];
+        }
+        setAll(propName, newValue) {
+            for (let i = 0; i < this.animations.length; i++) {
+                this.animations[i][propName] = newValue;
+            }
+        }
+        attachTimeline(timeline) {
+            const cancelAll = this.animations.map((animation) => {
+                if (supportsScrollTimeline() && animation.attachTimeline) {
+                    animation.attachTimeline(timeline);
+                }
+                else {
+                    animation.pause();
+                    return observeTimeline((progress) => {
+                        animation.time = animation.duration * progress;
+                    }, timeline);
+                }
+            });
+            return () => {
+                cancelAll.forEach((cancelTimeline, i) => {
+                    if (cancelTimeline)
+                        cancelTimeline();
+                    this.animations[i].stop();
+                });
+            };
+        }
+        get time() {
+            return this.getAll("time");
+        }
+        set time(time) {
+            this.setAll("time", time);
+        }
+        get speed() {
+            return this.getAll("speed");
+        }
+        set speed(speed) {
+            this.setAll("speed", speed);
+        }
+        get duration() {
+            let max = 0;
+            for (let i = 0; i < this.animations.length; i++) {
+                max = Math.max(max, this.animations[i].duration);
+            }
+            return max;
+        }
+        runAll(methodName) {
+            this.animations.forEach((controls) => controls[methodName]());
+        }
+        play() {
+            this.runAll("play");
+        }
+        pause() {
+            this.runAll("pause");
+        }
+        cancel() {
+            this.runAll("cancel");
+        }
+        complete() {
+            this.runAll("complete");
+        }
+    }
+
     const animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {
         const valueTransition = getValueTransition$1(transition, name) || {};
         /**
@@ -4516,7 +4612,9 @@
                     options.onUpdate(finalKeyframe);
                     options.onComplete();
                 });
-                return;
+                // We still want to return some animation controls here rather
+                // than returning undefined
+                return new GroupPlaybackControls([]);
             }
         }
         /**
@@ -4633,7 +4731,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 = "11.2.6";
+            this.version = "11.2.9";
             /**
              * Tracks whether this value can output a velocity. Currently this is only true
              * if the value is numerical, but we might be able to widen the scope here and support
@@ -4937,6 +5035,10 @@
         }
     }
 
+    function getOptimisedAppearId(visualElement) {
+        return visualElement.getProps()[optimizedAppearDataAttribute];
+    }
+
     /**
      * Decide whether we should block this animation. Previously, we achieved this
      * just by checking whether the key was listed in protectedKeys, but this
@@ -4977,8 +5079,7 @@
              */
             let isHandoff = false;
             if (window.HandoffAppearAnimations) {
-                const props = visualElement.getProps();
-                const appearId = props[optimizedAppearDataAttribute];
+                const appearId = getOptimisedAppearId(visualElement);
                 if (appearId) {
                     const elapsed = window.HandoffAppearAnimations(appearId, key, value, frame);
                     if (elapsed !== null) {
@@ -6958,100 +7059,6 @@
 
     const visualElementStore = new WeakMap();
 
-    function observeTimeline(update, timeline) {
-        let prevProgress;
-        const onFrame = () => {
-            const { currentTime } = timeline;
-            const percentage = currentTime === null ? 0 : currentTime.value;
-            const progress = percentage / 100;
-            if (prevProgress !== progress) {
-                update(progress);
-            }
-            prevProgress = progress;
-        };
-        frame.update(onFrame, true);
-        return () => cancelFrame(onFrame);
-    }
-
-    const supportsScrollTimeline = memo(() => window.ScrollTimeline !== undefined);
-
-    class GroupPlaybackControls {
-        constructor(animations) {
-            this.animations = animations.filter(Boolean);
-        }
-        then(onResolve, onReject) {
-            return Promise.all(this.animations).then(onResolve).catch(onReject);
-        }
-        /**
-         * TODO: Filter out cancelled or stopped animations before returning
-         */
-        getAll(propName) {
-            return this.animations[0][propName];
-        }
-        setAll(propName, newValue) {
-            for (let i = 0; i < this.animations.length; i++) {
-                this.animations[i][propName] = newValue;
-            }
-        }
-        attachTimeline(timeline) {
-            const cancelAll = this.animations.map((animation) => {
-                if (supportsScrollTimeline() && animation.attachTimeline) {
-                    animation.attachTimeline(timeline);
-                }
-                else {
-                    animation.pause();
-                    return observeTimeline((progress) => {
-                        animation.time = animation.duration * progress;
-                    }, timeline);
-                }
-            });
-            return () => {
-                cancelAll.forEach((cancelTimeline, i) => {
-                    if (cancelTimeline)
-                        cancelTimeline();
-                    this.animations[i].stop();
-                });
-            };
-        }
-        get time() {
-            return this.getAll("time");
-        }
-        set time(time) {
-            this.setAll("time", time);
-        }
-        get speed() {
-            return this.getAll("speed");
-        }
-        set speed(speed) {
-            this.setAll("speed", speed);
-        }
-        get duration() {
-            let max = 0;
-            for (let i = 0; i < this.animations.length; i++) {
-                max = Math.max(max, this.animations[i].duration);
-            }
-            return max;
-        }
-        runAll(methodName) {
-            this.animations.forEach((controls) => controls[methodName]());
-        }
-        play() {
-            this.runAll("play");
-        }
-        pause() {
-            this.runAll("pause");
-        }
-        stop() {
-            this.runAll("stop");
-        }
-        cancel() {
-            this.runAll("cancel");
-        }
-        complete() {
-            this.runAll("complete");
-        }
-    }
-
     function isDOMKeyframes(keyframes) {
         return typeof keyframes === "object" && !Array.isArray(keyframes);
     }
@@ -7098,7 +7105,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "11.2.6", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.2.6 may not work as expected.`);
+                    warnOnce(nextValue.version === "11.2.9", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.2.9 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -8789,6 +8796,25 @@
             }
         }
     }
+    function isOptimisedAppearTree(projectionNode) {
+        projectionNode.hasCheckedOptimisedAppear = true;
+        if (projectionNode.root === projectionNode)
+            return false;
+        const { visualElement } = projectionNode.options;
+        if (!visualElement) {
+            return false;
+        }
+        else if (getOptimisedAppearId(visualElement)) {
+            return true;
+        }
+        else if (projectionNode.parent &&
+            !projectionNode.parent.hasCheckedOptimisedAppear) {
+            return isOptimisedAppearTree(projectionNode.parent);
+        }
+        else {
+            return false;
+        }
+    }
     function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
         return class ProjectionNode {
             constructor(latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {
@@ -8864,6 +8890,13 @@
                  * Flags whether this node should have its transform reset prior to measuring.
                  */
                 this.shouldResetTransform = false;
+                /**
+                 * Store whether this node has been checked for optimised appear animations. As
+                 * effects fire bottom-up, and we want to look up the tree for appear animations,
+                 * this makes sure we only check each path once, stopping at nodes that
+                 * have already been checked.
+                 */
+                this.hasCheckedOptimisedAppear = false;
                 /**
                  * An object representing the calculated contextual/accumulated/tree scale.
                  * This will be used to scale calculcated projection transforms, as these are
@@ -9069,15 +9102,6 @@
                 if (this.isUpdateBlocked())
                     return;
                 this.isUpdating = true;
-                /**
-                 * If we're running optimised appear animations then these must be
-                 * cancelled before measuring the DOM. This is so we can measure
-                 * the true layout of the element rather than the WAAPI animation
-                 * which will be unaffected by the resetSkewAndRotate step.
-                 */
-                if (window.HandoffCancelAllAnimations) {
-                    window.HandoffCancelAllAnimations();
-                }
                 this.nodes && this.nodes.forEach(resetSkewAndRotation);
                 this.animationId++;
             }
@@ -9091,6 +9115,22 @@
                     this.options.onExitComplete && this.options.onExitComplete();
                     return;
                 }
+                /**
+                 * If we're running optimised appear animations then these must be
+                 * cancelled before measuring the DOM. This is so we can measure
+                 * the true layout of the element rather than the WAAPI animation
+                 * which will be unaffected by the resetSkewAndRotate step.
+                 *
+                 * Note: This is a DOM write. Worst case scenario is this is sandwiched
+                 * between other snapshot reads which will cause unnecessary style recalculations.
+                 * This has to happen here though, as we don't yet know which nodes will need
+                 * snapshots in startUpdate(), but we only want to cancel optimised animations
+                 * if a layout animation measurement is actually going to be affected by them.
+                 */
+                if (window.HandoffCancelAllAnimations &&
+                    isOptimisedAppearTree(this)) {
+                    window.HandoffCancelAllAnimations();
+                }
                 !this.root.isUpdating && this.root.startUpdate();
                 if (this.isLayoutDirty)
                     return;