@epic-web/workshop-app 4.6.5 → 4.7.0

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

@@ -257,7 +257,19 @@
 
     const { schedule: microtask, cancel: cancelMicrotask } = createRenderBatcher(queueMicrotask, false);
 
-    function useVisualElement(Component, visualState, props, createVisualElement) {
+    function isRefObject(ref) {
+        return (ref &&
+            typeof ref === "object" &&
+            Object.prototype.hasOwnProperty.call(ref, "current"));
+    }
+
+    /**
+     * Internal, exported only for usage in Framer
+     */
+    const SwitchLayoutGroupContext = React$1.createContext({});
+
+    let scheduleHandoffComplete = false;
+    function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor) {
         const { visualElement: parent } = React$1.useContext(MotionContext);
         const lazyContext = React$1.useContext(LazyContext);
         const presenceContext = React$1.useContext(PresenceContext);
@@ -280,6 +292,17 @@
             });
         }
         const visualElement = visualElementRef.current;
+        /**
+         * Load Motion gesture and animation features. These are rendered as renderless
+         * components so each feature can optionally make use of React lifecycle methods.
+         */
+        const initialLayoutGroupConfig = React$1.useContext(SwitchLayoutGroupContext);
+        if (visualElement &&
+            !visualElement.projection &&
+            ProjectionNodeConstructor &&
+            (visualElement.type === "html" || visualElement.type === "svg")) {
+            createProjectionNode$1(visualElementRef.current, props, ProjectionNodeConstructor, initialLayoutGroupConfig);
+        }
         React$1.useInsertionEffect(() => {
             visualElement && visualElement.update(props, presenceContext);
         });
@@ -292,6 +315,7 @@
         useIsomorphicLayoutEffect(() => {
             if (!visualElement)
                 return;
+            visualElement.updateFeatures();
             microtask.render(visualElement.render);
             /**
              * Ideally this function would always run in a useEffect.
@@ -310,23 +334,53 @@
         React$1.useEffect(() => {
             if (!visualElement)
                 return;
-            visualElement.updateFeatures();
             if (!wantsHandoff.current && visualElement.animationState) {
                 visualElement.animationState.animateChanges();
             }
             if (wantsHandoff.current) {
                 wantsHandoff.current = false;
                 // This ensures all future calls to animateChanges() will run in useEffect
-                window.HandoffComplete = true;
+                if (!scheduleHandoffComplete) {
+                    scheduleHandoffComplete = true;
+                    queueMicrotask(completeHandoff);
+                }
             }
         });
         return visualElement;
     }
-
-    function isRefObject(ref) {
-        return (ref &&
-            typeof ref === "object" &&
-            Object.prototype.hasOwnProperty.call(ref, "current"));
+    function completeHandoff() {
+        window.HandoffComplete = true;
+    }
+    function createProjectionNode$1(visualElement, props, ProjectionNodeConstructor, initialPromotionConfig) {
+        const { layoutId, layout, drag, dragConstraints, layoutScroll, layoutRoot, } = props;
+        visualElement.projection = new ProjectionNodeConstructor(visualElement.latestValues, props["data-framer-portal-id"]
+            ? undefined
+            : getClosestProjectingNode(visualElement.parent));
+        visualElement.projection.setOptions({
+            layoutId,
+            layout,
+            alwaysMeasureLayout: Boolean(drag) || (dragConstraints && isRefObject(dragConstraints)),
+            visualElement,
+            scheduleRender: () => visualElement.scheduleRender(),
+            /**
+             * TODO: Update options in an effect. This could be tricky as it'll be too late
+             * to update by the time layout animations run.
+             * We also need to fix this safeToRemove by linking it up to the one returned by usePresence,
+             * ensuring it gets called if there's no potential layout animations.
+             *
+             */
+            animationType: typeof layout === "string" ? layout : "both",
+            initialPromotionConfig,
+            layoutScroll,
+            layoutRoot,
+        });
+    }
+    function getClosestProjectingNode(visualElement) {
+        if (!visualElement)
+            return undefined;
+        return visualElement.options.allowProjection !== false
+            ? visualElement.projection
+            : getClosestProjectingNode(visualElement.parent);
     }
 
     /**
@@ -337,9 +391,12 @@
         return React$1.useCallback((instance) => {
             instance && visualState.mount && visualState.mount(instance);
             if (visualElement) {
-                instance
-                    ? visualElement.mount(instance)
-                    : visualElement.unmount();
+                if (instance) {
+                    visualElement.mount(instance);
+                }
+                else {
+                    visualElement.unmount();
+                }
             }
             if (externalRef) {
                 if (typeof externalRef === "function") {
@@ -449,13 +506,25 @@
 
     const LayoutGroupContext = React$1.createContext({});
 
-    /**
-     * Internal, exported only for usage in Framer
-     */
-    const SwitchLayoutGroupContext = React$1.createContext({});
-
     const motionComponentSymbol = Symbol.for("motionComponentSymbol");
 
+    const noop = (any) => any;
+
+    exports.warning = noop;
+    exports.invariant = noop;
+    {
+        exports.warning = (check, message) => {
+            if (!check && typeof console !== "undefined") {
+                console.warn(message);
+            }
+        };
+        exports.invariant = (check, message) => {
+            if (!check) {
+                throw new Error(message);
+            }
+        };
+    }
+
     /**
      * Create a `motion` component.
      *
@@ -482,24 +551,16 @@
             const context = useCreateMotionContext(props);
             const visualState = useVisualState(props, isStatic);
             if (!isStatic && isBrowser) {
+                useStrictMode(configAndProps, preloadedFeatures);
+                const layoutProjection = getProjectionFunctionality(configAndProps);
+                MeasureLayout = layoutProjection.MeasureLayout;
                 /**
                  * Create a VisualElement for this component. A VisualElement provides a common
                  * interface to renderer-specific APIs (ie DOM/Three.js etc) as well as
                  * providing a way of rendering to these APIs outside of the React render loop
                  * for more performant animations and interactions
                  */
-                context.visualElement = useVisualElement(Component, visualState, configAndProps, createVisualElement);
-                /**
-                 * Load Motion gesture and animation features. These are rendered as renderless
-                 * components so each feature can optionally make use of React lifecycle methods.
-                 */
-                const initialLayoutGroupConfig = React$1.useContext(SwitchLayoutGroupContext);
-                const isStrict = React$1.useContext(LazyContext).strict;
-                if (context.visualElement) {
-                    MeasureLayout = context.visualElement.loadFeatures(
-                    // Note: Pass the full new combined props to correctly re-render dynamic feature components.
-                    configAndProps, isStrict, preloadedFeatures, initialLayoutGroupConfig);
-                }
+                context.visualElement = useVisualElement(Component, visualState, configAndProps, createVisualElement, layoutProjection.ProjectionNode);
             }
             /**
              * The mount order and hierarchy is specific to ensure our element ref
@@ -517,6 +578,32 @@
             ? layoutGroupId + "-" + layoutId
             : layoutId;
     }
+    function useStrictMode(configAndProps, preloadedFeatures) {
+        const isStrict = React$1.useContext(LazyContext).strict;
+        /**
+         * If we're in development mode, check to make sure we're not rendering a motion component
+         * as a child of LazyMotion, as this will break the file-size benefits of using it.
+         */
+        if (preloadedFeatures &&
+            isStrict) {
+            const strictMessage = "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";
+            configAndProps.ignoreStrict
+                ? exports.warning(false, strictMessage)
+                : exports.invariant(false, strictMessage);
+        }
+    }
+    function getProjectionFunctionality(props) {
+        const { drag, layout } = featureDefinitions;
+        if (!drag && !layout)
+            return {};
+        const combined = { ...drag, ...layout };
+        return {
+            MeasureLayout: (drag === null || drag === void 0 ? void 0 : drag.isEnabled(props)) || (layout === null || layout === void 0 ? void 0 : layout.isEnabled(props))
+                ? combined.MeasureLayout
+                : undefined,
+            ProjectionNode: combined.ProjectionNode,
+        };
+    }
 
     /**
      * Convert any React component into a `motion` component. The provided component
@@ -1446,8 +1533,6 @@
         return values;
     }
 
-    const noop = (any) => any;
-
     const { schedule: frame, cancel: cancelFrame, state: frameData, steps, } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
 
     const svgMotionConfig = {
@@ -2077,21 +2162,6 @@
         }
     }
 
-    exports.warning = noop;
-    exports.invariant = noop;
-    {
-        exports.warning = (check, message) => {
-            if (!check && typeof console !== "undefined") {
-                console.warn(message);
-            }
-        };
-        exports.invariant = (check, message) => {
-            if (!check) {
-                throw new Error(message);
-            }
-        };
-    }
-
     /**
      * Check if value is a numerical string, ie a string that is purely a number eg "100" or "-100.1"
      */
@@ -3427,6 +3497,10 @@
         };
     }
 
+    function mixImmediate(a, b) {
+        return (p) => (p > 0 ? b : a);
+    }
+
     // Linear color space blending
     // Explained https://www.youtube.com/watch?v=LKnqECcg6Gw
     // Demonstrated http://codepen.io/osublake/pen/xGVVaN
@@ -3439,7 +3513,9 @@
     const getColorType = (v) => colorTypes.find((type) => type.test(v));
     function asRGBA(color) {
         const type = getColorType(color);
-        exports.invariant(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`);
+        exports.warning(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`);
+        if (!Boolean(type))
+            return false;
         let model = type.parse(color);
         if (type === hsla) {
             // TODO Remove this cast - needed since Framer Motion's stricter typing
@@ -3450,6 +3526,9 @@
     const mixColor = (from, to) => {
         const fromRGBA = asRGBA(from);
         const toRGBA = asRGBA(to);
+        if (!fromRGBA || !toRGBA) {
+            return mixImmediate(from, to);
+        }
         const blended = { ...fromRGBA };
         return (v) => {
             blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v);
@@ -3475,9 +3554,6 @@
         }
     }
 
-    function mixImmediate(a, b) {
-        return (p) => (p > 0 ? b : a);
-    }
     function mixNumber(a, b) {
         return (p) => mixNumber$1(a, b, p);
     }
@@ -4731,7 +4807,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.9";
+            this.version = "11.2.12";
             /**
              * 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
@@ -5202,7 +5278,7 @@
     }
     function createAnimationState(visualElement) {
         let animate = animateList(visualElement);
-        const state = createState();
+        let state = createState();
         let isInitialRender = true;
         /**
          * This function will be used to reduce the animation definitions for
@@ -5479,6 +5555,10 @@
             setActive,
             setAnimateFunction,
             getState: () => state,
+            reset: () => {
+                state = createState();
+                isInitialRender = true;
+            },
         };
     }
     function checkVariantsDidChange(prev, next) {
@@ -5522,9 +5602,8 @@
         }
         updateAnimationControlsSubscription() {
             const { animate } = this.node.getProps();
-            this.unmount();
             if (isAnimationControls(animate)) {
-                this.unmount = animate.subscribe(this.node);
+                this.unmountControls = animate.subscribe(this.node);
             }
         }
         /**
@@ -5540,7 +5619,11 @@
                 this.updateAnimationControlsSubscription();
             }
         }
-        unmount() { }
+        unmount() {
+            var _a;
+            this.node.animationState.reset();
+            (_a = this.unmountControls) === null || _a === void 0 ? void 0 : _a.call(this);
+        }
     }
 
     let id$2 = 0;
@@ -6498,7 +6581,7 @@
             });
             const measureDragConstraints = () => {
                 const { dragConstraints } = this.getProps();
-                if (isRefObject(dragConstraints)) {
+                if (isRefObject(dragConstraints) && dragConstraints.current) {
                     this.constraints = this.resolveRefConstraints();
                 }
             };
@@ -6508,7 +6591,7 @@
                 projection.root && projection.root.updateScroll();
                 projection.updateLayout();
             }
-            measureDragConstraints();
+            frame.read(measureDragConstraints);
             /**
              * Attach a window resize listener to scale the draggable target within its defined
              * constraints as the window resizes.
@@ -7105,7 +7188,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "11.2.9", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.2.9 may not work as expected.`);
+                    warnOnce(nextValue.version === "11.2.12", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.2.12 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -7156,8 +7239,6 @@
      */
     const findValueType = (v) => valueTypes.find(testValueType(v));
 
-    const featureNames = Object.keys(featureDefinitions);
-    const numFeatures = featureNames.length;
     const propEventHandlers = [
         "AnimationStart",
         "AnimationComplete",
@@ -7168,13 +7249,6 @@
         "LayoutAnimationComplete",
     ];
     const numVariantProps = variantProps.length;
-    function getClosestProjectingNode(visualElement) {
-        if (!visualElement)
-            return undefined;
-        return visualElement.options.allowProjection !== false
-            ? visualElement.projection
-            : getClosestProjectingNode(visualElement.parent);
-    }
     /**
      * A VisualElement is an imperative abstraction around UI elements such as
      * HTMLElement, SVGElement, Three.Object3D etc.
@@ -7326,7 +7400,6 @@
             this.update(this.props, this.presenceContext);
         }
         unmount() {
-            var _a;
             visualElementStore.delete(this.current);
             this.projection && this.projection.unmount();
             cancelFrame(this.notifyUpdate);
@@ -7338,7 +7411,11 @@
                 this.events[key].clear();
             }
             for (const key in this.features) {
-                (_a = this.features[key]) === null || _a === void 0 ? void 0 : _a.unmount();
+                const feature = this.features[key];
+                if (feature) {
+                    feature.unmount();
+                    feature.isMounted = false;
+                }
             }
             this.current = null;
         }
@@ -7370,72 +7447,33 @@
             }
             return this.sortInstanceNodePosition(this.current, other.current);
         }
-        loadFeatures({ children, ...renderedProps }, isStrict, preloadedFeatures, initialLayoutGroupConfig) {
-            let ProjectionNodeConstructor;
-            let MeasureLayout;
-            /**
-             * If we're in development mode, check to make sure we're not rendering a motion component
-             * as a child of LazyMotion, as this will break the file-size benefits of using it.
-             */
-            if (preloadedFeatures &&
-                isStrict) {
-                const strictMessage = "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";
-                renderedProps.ignoreStrict
-                    ? exports.warning(false, strictMessage)
-                    : exports.invariant(false, strictMessage);
-            }
-            for (let i = 0; i < numFeatures; i++) {
-                const name = featureNames[i];
-                const { isEnabled, Feature: FeatureConstructor, ProjectionNode, MeasureLayout: MeasureLayoutComponent, } = featureDefinitions[name];
-                if (ProjectionNode)
-                    ProjectionNodeConstructor = ProjectionNode;
-                if (isEnabled(renderedProps)) {
-                    if (!this.features[name] && FeatureConstructor) {
-                        this.features[name] = new FeatureConstructor(this);
-                    }
-                    if (MeasureLayoutComponent) {
-                        MeasureLayout = MeasureLayoutComponent;
-                    }
-                }
-            }
-            if ((this.type === "html" || this.type === "svg") &&
-                !this.projection &&
-                ProjectionNodeConstructor) {
-                const { layoutId, layout, drag, dragConstraints, layoutScroll, layoutRoot, } = renderedProps;
-                this.projection = new ProjectionNodeConstructor(this.latestValues, renderedProps["data-framer-portal-id"]
-                    ? undefined
-                    : getClosestProjectingNode(this.parent));
-                this.projection.setOptions({
-                    layoutId,
-                    layout,
-                    alwaysMeasureLayout: Boolean(drag) ||
-                        (dragConstraints && isRefObject(dragConstraints)),
-                    visualElement: this,
-                    scheduleRender: () => this.scheduleRender(),
-                    /**
-                     * TODO: Update options in an effect. This could be tricky as it'll be too late
-                     * to update by the time layout animations run.
-                     * We also need to fix this safeToRemove by linking it up to the one returned by usePresence,
-                     * ensuring it gets called if there's no potential layout animations.
-                     *
-                     */
-                    animationType: typeof layout === "string" ? layout : "both",
-                    initialPromotionConfig: initialLayoutGroupConfig,
-                    layoutScroll,
-                    layoutRoot,
-                });
-            }
-            return MeasureLayout;
-        }
         updateFeatures() {
-            for (const key in this.features) {
-                const feature = this.features[key];
-                if (feature.isMounted) {
-                    feature.update();
+            let key = "animation";
+            for (key in featureDefinitions) {
+                const featureDefinition = featureDefinitions[key];
+                if (!featureDefinition)
+                    continue;
+                const { isEnabled, Feature: FeatureConstructor } = featureDefinition;
+                /**
+                 * If this feature is enabled but not active, make a new instance.
+                 */
+                if (!this.features[key] &&
+                    FeatureConstructor &&
+                    isEnabled(this.props)) {
+                    this.features[key] = new FeatureConstructor(this);
                 }
-                else {
-                    feature.mount();
-                    feature.isMounted = true;
+                /**
+                 * If we have a feature, mount or update it.
+                 */
+                if (this.features[key]) {
+                    const feature = this.features[key];
+                    if (feature.isMounted) {
+                        feature.update();
+                    }
+                    else {
+                        feature.mount();
+                        feature.isMounted = true;
+                    }
                 }
             }
         }
@@ -8913,6 +8951,7 @@
                 this.hasTreeAnimated = false;
                 // Note: Currently only running on root node
                 this.updateScheduled = false;
+                this.scheduleUpdate = () => this.update();
                 this.projectionUpdateScheduled = false;
                 this.checkUpdateFailed = () => {
                     if (this.isUpdating) {
@@ -9201,7 +9240,7 @@
             didUpdate() {
                 if (!this.updateScheduled) {
                     this.updateScheduled = true;
-                    microtask.read(() => this.update());
+                    microtask.read(this.scheduleUpdate);
                 }
             }
             clearAllSnapshots() {
@@ -9288,7 +9327,9 @@
             resetTransform() {
                 if (!resetTransform)
                     return;
-                const isResetRequested = this.isLayoutDirty || this.shouldResetTransform;
+                const isResetRequested = this.isLayoutDirty ||
+                    this.shouldResetTransform ||
+                    this.options.alwaysMeasureLayout;
                 const hasProjection = this.projectionDelta && !isDeltaZero(this.projectionDelta);
                 const transformTemplate = this.getTransformTemplate();
                 const transformTemplateValue = transformTemplate