framer-motion 11.2.10 → 12.0.0-alpha.0

package/dist/cjs/{dom-entry-Dvf42Jkp.js → dom-entry-BZuxIay2.js}

@@ -179,12 +179,6 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
     return { schedule, cancel, state, steps };
 }
 
-function isRefObject(ref) {
-    return (ref &&
-        typeof ref === "object" &&
-        Object.prototype.hasOwnProperty.call(ref, "current"));
-}
-
 /**
  * Decides if the supplied variable is variant label
  */
@@ -244,6 +238,23 @@ for (const key in featureProps) {
     };
 }
 
+const noop = (any) => any;
+
+exports.warning = noop;
+exports.invariant = noop;
+if (process.env.NODE_ENV !== "production") {
+    exports.warning = (check, message) => {
+        if (!check && typeof console !== "undefined") {
+            console.warn(message);
+        }
+    };
+    exports.invariant = (check, message) => {
+        if (!check) {
+            throw new Error(message);
+        }
+    };
+}
+
 const scaleCorrectors = {};
 function addScaleCorrector(correctors) {
     Object.assign(scaleCorrectors, correctors);
@@ -755,8 +766,6 @@ const resolveFinalValueInKeyframes = (v) => {
     return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
 };
 
-const noop = (any) => any;
-
 const { schedule: frame, cancel: cancelFrame, state: frameData, steps, } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
 
 /**
@@ -893,21 +902,6 @@ function isNone(value) {
     }
 }
 
-exports.warning = noop;
-exports.invariant = noop;
-if (process.env.NODE_ENV !== "production") {
-    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"
  */
@@ -3553,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.10";
+        this.version = "12.0.0-alpha.0";
         /**
          * 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
@@ -4233,7 +4227,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.2.10", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.2.10 may not work as expected.`);
+                warnOnce(nextValue.version === "12.0.0-alpha.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 12.0.0-alpha.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -4284,8 +4278,6 @@ const valueTypes = [...dimensionValueTypes, color, complex];
  */
 const findValueType = (v) => valueTypes.find(testValueType(v));
 
-const featureNames = Object.keys(featureDefinitions);
-const numFeatures = featureNames.length;
 const propEventHandlers = [
     "AnimationStart",
     "AnimationComplete",
@@ -4296,13 +4288,6 @@ const propEventHandlers = [
     "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.
@@ -4454,7 +4439,6 @@ class VisualElement {
         this.update(this.props, this.presenceContext);
     }
     unmount() {
-        var _a;
         visualElementStore.delete(this.current);
         this.projection && this.projection.unmount();
         cancelFrame(this.notifyUpdate);
@@ -4466,7 +4450,11 @@ class VisualElement {
             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;
     }
@@ -4498,73 +4486,33 @@ class VisualElement {
         }
         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 (process.env.NODE_ENV !== "production" &&
-            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;
+                }
             }
         }
     }
@@ -5964,7 +5912,6 @@ exports.isCustomValue = isCustomValue;
 exports.isForcedMotionValue = isForcedMotionValue;
 exports.isKeyframesTarget = isKeyframesTarget;
 exports.isMotionValue = isMotionValue;
-exports.isRefObject = isRefObject;
 exports.isSVGElement = isSVGElement;
 exports.isSVGTag = isSVGTag;
 exports.isVariantLabel = isVariantLabel;

package/dist/cjs/dom-entry.js

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

package/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-Dvf42Jkp.js');
+var domEntry = require('./dom-entry-BZuxIay2.js');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -47,12 +47,24 @@ const LazyContext = React.createContext({ strict: false });
 
 const { schedule: microtask, cancel: cancelMicrotask } = domEntry.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.createContext({});
+
+let scheduleHandoffComplete = false;
+function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor) {
     const { visualElement: parent } = React.useContext(MotionContext);
     const lazyContext = React.useContext(LazyContext);
     const presenceContext = React.useContext(PresenceContext);
     const reducedMotionConfig = React.useContext(MotionConfigContext).reducedMotion;
-    const visualElementRef = React.useRef();
+    const visualElementRef = React.useRef(undefined);
     /**
      * If we haven't preloaded a renderer, check to see if we have one lazy-loaded
      */
@@ -70,6 +82,17 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
         });
     }
     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.useContext(SwitchLayoutGroupContext);
+    if (visualElement &&
+        !visualElement.projection &&
+        ProjectionNodeConstructor &&
+        (visualElement.type === "html" || visualElement.type === "svg")) {
+        createProjectionNode$1(visualElementRef.current, props, ProjectionNodeConstructor, initialLayoutGroupConfig);
+    }
     React.useInsertionEffect(() => {
         visualElement && visualElement.update(props, presenceContext);
     });
@@ -82,6 +105,7 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
     useIsomorphicLayoutEffect(() => {
         if (!visualElement)
             return;
+        visualElement.updateFeatures();
         microtask.render(visualElement.render);
         /**
          * Ideally this function would always run in a useEffect.
@@ -100,18 +124,54 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
     React.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 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);
+}
 
 /**
  * Creates a ref function that, when called, hydrates the provided
@@ -121,15 +181,18 @@ function useMotionRef(visualState, visualElement, externalRef) {
     return React.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") {
                 externalRef(instance);
             }
-            else if (domEntry.isRefObject(externalRef)) {
+            else if (isRefObject(externalRef)) {
                 externalRef.current = instance;
             }
         }
@@ -174,11 +237,6 @@ function loadFeatures(features) {
 
 const LayoutGroupContext = React.createContext({});
 
-/**
- * Internal, exported only for usage in Framer
- */
-const SwitchLayoutGroupContext = React.createContext({});
-
 const motionComponentSymbol = Symbol.for("motionComponentSymbol");
 
 /**
@@ -207,24 +265,16 @@ function createMotionComponent({ preloadedFeatures, createVisualElement, useRend
         const context = useCreateMotionContext(props);
         const visualState = useVisualState(props, isStatic);
         if (!isStatic && domEntry.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.useContext(SwitchLayoutGroupContext);
-            const isStrict = React.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
@@ -242,6 +292,33 @@ function useLayoutId({ layoutId }) {
         ? layoutGroupId + "-" + layoutId
         : layoutId;
 }
+function useStrictMode(configAndProps, preloadedFeatures) {
+    const isStrict = React.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 (process.env.NODE_ENV !== "production" &&
+        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
+            ? domEntry.warning(false, strictMessage)
+            : domEntry.invariant(false, strictMessage);
+    }
+}
+function getProjectionFunctionality(props) {
+    const { drag, layout } = domEntry.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
@@ -1245,7 +1322,7 @@ function animateList(visualElement) {
 }
 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
@@ -1522,6 +1599,10 @@ function createAnimationState(visualElement) {
         setActive,
         setAnimateFunction,
         getState: () => state,
+        reset: () => {
+            state = createState();
+            isInitialRender = true;
+        },
     };
 }
 function checkVariantsDidChange(prev, next) {
@@ -1565,9 +1646,8 @@ class AnimationFeature extends Feature {
     }
     updateAnimationControlsSubscription() {
         const { animate } = this.node.getProps();
-        this.unmount();
         if (domEntry.isAnimationControls(animate)) {
-            this.unmount = animate.subscribe(this.node);
+            this.unmountControls = animate.subscribe(this.node);
         }
     }
     /**
@@ -1583,7 +1663,11 @@ class AnimationFeature extends Feature {
             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;
@@ -2125,7 +2209,7 @@ class VisualElementDragControls {
             ? this.visualElement.projection.measure(false)
             : (_a = this.visualElement.projection) === null || _a === void 0 ? void 0 : _a.layout;
         const prevConstraints = this.constraints;
-        if (dragConstraints && domEntry.isRefObject(dragConstraints)) {
+        if (dragConstraints && isRefObject(dragConstraints)) {
             if (!this.constraints) {
                 this.constraints = this.resolveRefConstraints();
             }
@@ -2157,7 +2241,7 @@ class VisualElementDragControls {
     }
     resolveRefConstraints() {
         const { dragConstraints: constraints, onMeasureDragConstraints } = this.getProps();
-        if (!constraints || !domEntry.isRefObject(constraints))
+        if (!constraints || !isRefObject(constraints))
             return false;
         const constraintsElement = constraints.current;
         domEntry.invariant(constraintsElement !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.");
@@ -2271,7 +2355,7 @@ class VisualElementDragControls {
             return;
         const { drag, dragConstraints } = this.getProps();
         const { projection } = this.visualElement;
-        if (!domEntry.isRefObject(dragConstraints) || !projection || !this.constraints)
+        if (!isRefObject(dragConstraints) || !projection || !this.constraints)
             return;
         /**
          * Stop current animations as there can be visual glitching if we try to do
@@ -2329,7 +2413,7 @@ class VisualElementDragControls {
         });
         const measureDragConstraints = () => {
             const { dragConstraints } = this.getProps();
-            if (domEntry.isRefObject(dragConstraints)) {
+            if (isRefObject(dragConstraints) && dragConstraints.current) {
                 this.constraints = this.resolveRefConstraints();
             }
         };
@@ -2339,7 +2423,7 @@ class VisualElementDragControls {
             projection.root && projection.root.updateScroll();
             projection.updateLayout();
         }
-        measureDragConstraints();
+        domEntry.frame.read(measureDragConstraints);
         /**
          * Attach a window resize listener to scale the draggable target within its defined
          * constraints as the window resizes.
@@ -2993,6 +3077,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             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) {
@@ -3281,7 +3366,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         didUpdate() {
             if (!this.updateScheduled) {
                 this.updateScheduled = true;
-                microtask.read(() => this.update());
+                microtask.read(this.scheduleUpdate);
             }
         }
         clearAllSnapshots() {
@@ -6049,7 +6134,7 @@ function startTransition(callback) {
 function useInstantTransition() {
     const [forceUpdate, forcedRenderCount] = useForceUpdate();
     const startInstantLayoutTransition = useInstantLayoutTransition();
-    const unlockOnFrameRef = React.useRef();
+    const unlockOnFrameRef = React.useRef(undefined);
     React.useEffect(() => {
         /**
          * Unblock after two animation frames, otherwise this will unblock too soon.
@@ -6113,6 +6198,7 @@ _value, frame) {
     }
     const { animation, startTime } = optimisedAnimation;
     const cancelAnimation = () => {
+        console.log("de;ete that shiz");
         appearAnimationStore.delete(storeId);
         if (frame) {
             /**