@epic-web/workshop-app 4.5.0 → 4.5.1

package/node_modules/framer-motion/dist/cjs/{dom-entry-fJy-kji5.js → dom-entry-DSxBucW4.js}

@@ -1491,14 +1491,17 @@ class DOMKeyframesResolver extends KeyframeResolver {
          * 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;
+                    }
                 }
             }
         }
@@ -3250,6 +3253,99 @@ class AcceleratedAnimation extends BaseAnimation {
     }
 }
 
+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) || {};
     /**
@@ -3332,7 +3428,9 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
                 options.onUpdate(finalKeyframe);
                 options.onComplete();
             });
-            return;
+            // We still want to return some animation controls here rather
+            // than returning undefined
+            return new GroupPlaybackControls([]);
         }
     }
     /**
@@ -3449,7 +3547,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 = "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
@@ -3753,6 +3851,10 @@ function setTarget(visualElement, definition) {
     }
 }
 
+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
@@ -3793,8 +3895,7 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
          */
         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) {
@@ -4080,100 +4181,6 @@ function resolveElements(elements, scope, selectorCache) {
 
 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);
 }
@@ -4220,7 +4227,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                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)) {
@@ -5933,6 +5940,7 @@ exports.easeOut = easeOut;
 exports.featureDefinitions = featureDefinitions;
 exports.frame = frame;
 exports.frameData = frameData;
+exports.getOptimisedAppearId = getOptimisedAppearId;
 exports.getValueTransition = getValueTransition$1;
 exports.has2DTranslate = has2DTranslate;
 exports.hasReducedMotionListener = hasReducedMotionListener;

package/node_modules/framer-motion/dist/cjs/dom-entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var domEntry = require('./dom-entry-fJy-kji5.js');
+var domEntry = require('./dom-entry-DSxBucW4.js');
 
 
 

package/node_modules/framer-motion/dist/cjs/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var domEntry = require('./dom-entry-fJy-kji5.js');
+var domEntry = require('./dom-entry-DSxBucW4.js');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -2876,6 +2876,25 @@ function resetDistortingTransform(key, visualElement, values, sharedAnimationVal
         }
     }
 }
+function isOptimisedAppearTree(projectionNode) {
+    projectionNode.hasCheckedOptimisedAppear = true;
+    if (projectionNode.root === projectionNode)
+        return false;
+    const { visualElement } = projectionNode.options;
+    if (!visualElement) {
+        return false;
+    }
+    else if (domEntry.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()) {
@@ -2951,6 +2970,13 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              * 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
@@ -3156,15 +3182,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             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++;
         }
@@ -3178,6 +3195,22 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 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;

package/node_modules/framer-motion/dist/dom-entry.d.ts

@@ -726,7 +726,7 @@ declare class GroupPlaybackControls implements AnimationPlaybackControls {
     private runAll;
     play(): void;
     pause(): void;
-    stop(): void;
+    stop: () => void;
     cancel(): void;
     complete(): void;
 }