framer-motion 9.0.2 → 9.0.3

package/dist/es/motion/features/animation/index.mjs

@@ -0,0 +1,38 @@
+import { isAnimationControls } from '../../../animation/utils/is-animation-controls.mjs';
+import { createAnimationState } from '../../../render/utils/animation-state.mjs';
+import { Feature } from '../Feature.mjs';
+
+class AnimationFeature extends Feature {
+    /**
+     * We dynamically generate the AnimationState manager as it contains a reference
+     * to the underlying animation library. We only want to load that if we load this,
+     * so people can optionally code split it out using the `m` component.
+     */
+    constructor(node) {
+        super(node);
+        node.animationState || (node.animationState = createAnimationState(node));
+    }
+    updateAnimationControlsSubscription() {
+        const { animate } = this.node.getProps();
+        this.unmount();
+        if (isAnimationControls(animate)) {
+            this.unmount = animate.subscribe(this.node);
+        }
+    }
+    /**
+     * Subscribe any provided AnimationControls to the component's VisualElement
+     */
+    mount() {
+        this.updateAnimationControlsSubscription();
+    }
+    update() {
+        const { animate } = this.node.getProps();
+        const { animate: prevAnimate } = this.node.prevProps || {};
+        if (animate !== prevAnimate) {
+            this.updateAnimationControlsSubscription();
+        }
+    }
+    unmount() { }
+}
+
+export { AnimationFeature };

package/dist/es/motion/features/animations.mjs

@@ -1,42 +1,13 @@
-import { useEffect, useContext } from 'react';
-import { isAnimationControls } from '../../animation/utils/is-animation-controls.mjs';
-import { usePresence } from '../../components/AnimatePresence/use-presence.mjs';
-import { PresenceContext } from '../../context/PresenceContext.mjs';
-import { createAnimationState } from '../../render/utils/animation-state.mjs';
-import { AnimationType } from '../../render/utils/types.mjs';
-import { makeRenderlessComponent } from '../utils/make-renderless-component.mjs';
+import { AnimationFeature } from './animation/index.mjs';
+import { ExitAnimationFeature } from './animation/exit.mjs';
 
 const animations = {
-    animation: makeRenderlessComponent(({ visualElement, animate }) => {
-        /**
-         * We dynamically generate the AnimationState manager as it contains a reference
-         * to the underlying animation library. We only want to load that if we load this,
-         * so people can optionally code split it out using the `m` component.
-         */
-        visualElement.animationState || (visualElement.animationState = createAnimationState(visualElement));
-        /**
-         * Subscribe any provided AnimationControls to the component's VisualElement
-         */
-        if (isAnimationControls(animate)) {
-            useEffect(() => animate.subscribe(visualElement), [animate]);
-        }
-    }),
-    exit: makeRenderlessComponent((props) => {
-        const { custom, visualElement } = props;
-        const [isPresent, safeToRemove] = usePresence();
-        const presenceContext = useContext(PresenceContext);
-        useEffect(() => {
-            visualElement.isPresent = isPresent;
-            const animation = visualElement.animationState &&
-                visualElement.animationState.setActive(AnimationType.Exit, !isPresent, {
-                    custom: (presenceContext && presenceContext.custom) ||
-                        custom,
-                });
-            if (animation && !isPresent) {
-                animation.then(safeToRemove);
-            }
-        }, [isPresent]);
-    }),
+    animation: {
+        Feature: AnimationFeature,
+    },
+    exit: {
+        Feature: ExitAnimationFeature,
+    },
 };
 
 export { animations };

package/dist/es/motion/features/definitions.mjs

@@ -1,9 +1,5 @@
-const createDefinition = (propNames) => ({
-    isEnabled: (props) => propNames.some((name) => !!props[name]),
-});
-const featureDefinitions = {
-    measureLayout: createDefinition(["layout", "layoutId", "drag"]),
-    animation: createDefinition([
+const featureProps = {
+    animation: [
         "animate",
         "exit",
         "variants",
@@ -12,23 +8,21 @@ const featureDefinitions = {
         "whileFocus",
         "whileDrag",
         "whileInView",
-    ]),
-    exit: createDefinition(["exit"]),
-    drag: createDefinition(["drag", "dragControls"]),
-    focus: createDefinition(["whileFocus"]),
-    hover: createDefinition(["whileHover", "onHoverStart", "onHoverEnd"]),
-    tap: createDefinition(["whileTap", "onTap", "onTapStart", "onTapCancel"]),
-    pan: createDefinition([
-        "onPan",
-        "onPanStart",
-        "onPanSessionStart",
-        "onPanEnd",
-    ]),
-    inView: createDefinition([
-        "whileInView",
-        "onViewportEnter",
-        "onViewportLeave",
-    ]),
+    ],
+    exit: ["exit"],
+    drag: ["drag", "dragControls"],
+    focus: ["whileFocus"],
+    hover: ["whileHover", "onHoverStart", "onHoverEnd"],
+    tap: ["whileTap", "onTap", "onTapStart", "onTapCancel"],
+    pan: ["onPan", "onPanStart", "onPanSessionStart", "onPanEnd"],
+    inView: ["whileInView", "onViewportEnter", "onViewportLeave"],
+    layout: ["layout", "layoutId"],
 };
+const featureDefinitions = {};
+for (const key in featureProps) {
+    featureDefinitions[key] = {
+        isEnabled: (props) => featureProps[key].some((name) => !!props[name]),
+    };
+}
 
 export { featureDefinitions };

package/dist/es/motion/features/drag.mjs

@@ -1,10 +1,17 @@
-import { useDrag } from '../../gestures/drag/use-drag.mjs';
-import { usePanGesture } from '../../gestures/use-pan-gesture.mjs';
-import { makeRenderlessComponent } from '../utils/make-renderless-component.mjs';
+import { DragGesture } from '../../gestures/drag/index.mjs';
+import { PanGesture } from '../../gestures/pan/index.mjs';
+import { MeasureLayout } from './layout/MeasureLayout.mjs';
+import { HTMLProjectionNode } from '../../projection/node/HTMLProjectionNode.mjs';
 
 const drag = {
-    pan: makeRenderlessComponent(usePanGesture),
-    drag: makeRenderlessComponent(useDrag),
+    pan: {
+        Feature: PanGesture,
+    },
+    drag: {
+        Feature: DragGesture,
+        ProjectionNode: HTMLProjectionNode,
+        MeasureLayout,
+    },
 };
 
 export { drag };

package/dist/es/motion/features/gestures.mjs

@@ -1,14 +1,21 @@
-import { useFocusGesture } from '../../gestures/use-focus-gesture.mjs';
-import { useHoverGesture } from '../../gestures/use-hover-gesture.mjs';
-import { useTapGesture } from '../../gestures/use-tap-gesture.mjs';
-import { useViewport } from './viewport/use-viewport.mjs';
-import { makeRenderlessComponent } from '../utils/make-renderless-component.mjs';
+import { HoverGesture } from '../../gestures/hover.mjs';
+import { FocusGesture } from '../../gestures/focus.mjs';
+import { PressGesture } from '../../gestures/press.mjs';
+import { InViewFeature } from './viewport/index.mjs';
 
 const gestureAnimations = {
-    inView: makeRenderlessComponent(useViewport),
-    tap: makeRenderlessComponent(useTapGesture),
-    focus: makeRenderlessComponent(useFocusGesture),
-    hover: makeRenderlessComponent(useHoverGesture),
+    inView: {
+        Feature: InViewFeature,
+    },
+    tap: {
+        Feature: PressGesture,
+    },
+    focus: {
+        Feature: FocusGesture,
+    },
+    hover: {
+        Feature: HoverGesture,
+    },
 };
 
 export { gestureAnimations };

package/dist/es/motion/features/layout/MeasureLayout.mjs

@@ -67,8 +67,8 @@ class MeasureLayoutWithContext extends React__default.Component {
                  * be in charge of the safe to remove. Otherwise we call it here.
                  */
                 sync.postRender(() => {
-                    var _a;
-                    if (!((_a = projection.getStack()) === null || _a === void 0 ? void 0 : _a.members.length)) {
+                    const stack = projection.getStack();
+                    if (!stack || !stack.members.length) {
                         this.safeToRemove();
                     }
                 });
@@ -90,15 +90,15 @@ class MeasureLayoutWithContext extends React__default.Component {
         const { projection } = visualElement;
         if (projection) {
             projection.scheduleCheckAfterUnmount();
-            if (layoutGroup === null || layoutGroup === void 0 ? void 0 : layoutGroup.group)
+            if (layoutGroup && layoutGroup.group)
                 layoutGroup.group.remove(projection);
-            if (promoteContext === null || promoteContext === void 0 ? void 0 : promoteContext.deregister)
+            if (promoteContext && promoteContext.deregister)
                 promoteContext.deregister(projection);
         }
     }
     safeToRemove() {
         const { safeToRemove } = this.props;
-        safeToRemove === null || safeToRemove === void 0 ? void 0 : safeToRemove();
+        safeToRemove && safeToRemove();
     }
     render() {
         return null;

package/dist/es/motion/features/layout.mjs

@@ -0,0 +1,11 @@
+import { HTMLProjectionNode } from '../../projection/node/HTMLProjectionNode.mjs';
+import { MeasureLayout } from './layout/MeasureLayout.mjs';
+
+const layout = {
+    layout: {
+        ProjectionNode: HTMLProjectionNode,
+        MeasureLayout,
+    },
+};
+
+export { layout };

package/dist/es/motion/features/load-features.mjs

@@ -2,12 +2,10 @@ import { featureDefinitions } from './definitions.mjs';
 
 function loadFeatures(features) {
     for (const key in features) {
-        if (key === "projectionNodeConstructor") {
-            featureDefinitions.projectionNodeConstructor = features[key];
-        }
-        else {
-            featureDefinitions[key].Component = features[key];
-        }
+        featureDefinitions[key] = {
+            ...featureDefinitions[key],
+            ...features[key],
+        };
     }
 }
 

package/dist/es/motion/features/viewport/index.mjs

@@ -0,0 +1,96 @@
+import { AnimationType } from '../../../render/utils/types.mjs';
+import { Feature } from '../Feature.mjs';
+import { observeIntersection } from './observers.mjs';
+
+const thresholdNames = {
+    some: 0,
+    all: 1,
+};
+class InViewFeature extends Feature {
+    constructor() {
+        super(...arguments);
+        this.hasEnteredView = false;
+        this.isInView = false;
+    }
+    /**
+     * TODO: Remove this in 10.0
+     */
+    viewportFallback() {
+        /**
+         * Fire this in an rAF because, at this point, the animation state
+         * won't have flushed for the first time and there's certain logic in
+         * there that behaves differently on the initial animation.
+         */
+        requestAnimationFrame(() => {
+            this.hasEnteredView = true;
+            const { onViewportEnter } = this.node.getProps();
+            onViewportEnter && onViewportEnter(null);
+            if (this.node.animationState) {
+                this.node.animationState.setActive(AnimationType.InView, true);
+            }
+        });
+    }
+    startObserver() {
+        this.unmount();
+        const { viewport = {} } = this.node.getProps();
+        const { root, margin: rootMargin, amount = "some", once, fallback = true, } = viewport;
+        if (typeof IntersectionObserver === "undefined") {
+            if (fallback)
+                this.viewportFallback();
+            return;
+        }
+        const options = {
+            root: root ? root.current : undefined,
+            rootMargin,
+            threshold: typeof amount === "number" ? amount : thresholdNames[amount],
+        };
+        const onIntersectionUpdate = (entry) => {
+            const { isIntersecting } = entry;
+            /**
+             * If there's been no change in the viewport state, early return.
+             */
+            if (this.isInView === isIntersecting)
+                return;
+            this.isInView = isIntersecting;
+            /**
+             * Handle hasEnteredView. If this is only meant to run once, and
+             * element isn't visible, early return. Otherwise set hasEnteredView to true.
+             */
+            if (once && !isIntersecting && this.hasEnteredView) {
+                return;
+            }
+            else if (isIntersecting) {
+                this.hasEnteredView = true;
+            }
+            if (this.node.animationState) {
+                this.node.animationState.setActive(AnimationType.InView, isIntersecting);
+            }
+            /**
+             * Use the latest committed props rather than the ones in scope
+             * when this observer is created
+             */
+            const { onViewportEnter, onViewportLeave } = this.node.getProps();
+            const callback = isIntersecting ? onViewportEnter : onViewportLeave;
+            callback && callback(entry);
+        };
+        return observeIntersection(this.node.current, options, onIntersectionUpdate);
+    }
+    mount() {
+        this.startObserver();
+    }
+    update() {
+        if (typeof IntersectionObserver === "undefined")
+            return;
+        const { props, prevProps } = this.node;
+        const hasOptionsChanged = ["amount", "margin", "root"].some(hasViewportOptionChanged(props, prevProps));
+        if (hasOptionsChanged) {
+            this.startObserver();
+        }
+    }
+    unmount() { }
+}
+function hasViewportOptionChanged({ viewport = {} }, { viewport: prevViewport = {} } = {}) {
+    return (name) => viewport[name] !== prevViewport[name];
+}
+
+export { InViewFeature };

package/dist/es/motion/index.mjs

@@ -5,12 +5,10 @@ import { MotionContext } from '../context/MotionContext/index.mjs';
 import { useVisualElement } from './utils/use-visual-element.mjs';
 import { useMotionRef } from './utils/use-motion-ref.mjs';
 import { useCreateMotionContext } from '../context/MotionContext/create.mjs';
-import { featureDefinitions } from './features/definitions.mjs';
 import { loadFeatures } from './features/load-features.mjs';
 import { isBrowser } from '../utils/is-browser.mjs';
 import { useProjectionId } from '../projection/node/id.mjs';
 import { LayoutGroupContext } from '../context/LayoutGroupContext.mjs';
-import { VisualElementHandler } from './utils/VisualElementHandler.mjs';
 import { LazyContext } from '../context/LazyContext.mjs';
 import { SwitchLayoutGroupContext } from '../context/SwitchLayoutGroupContext.mjs';
 import { motionComponentSymbol } from './utils/symbol.mjs';
@@ -24,16 +22,20 @@ import { motionComponentSymbol } from './utils/symbol.mjs';
  * Alongside this is a config option which provides a way of rendering the provided
  * component "offline", or outside the React render cycle.
  */
-function createMotionComponent({ preloadedFeatures, createVisualElement, projectionNodeConstructor, useRender, useVisualState, Component, }) {
+function createMotionComponent({ preloadedFeatures, createVisualElement, useRender, useVisualState, Component, }) {
     preloadedFeatures && loadFeatures(preloadedFeatures);
     function MotionComponent(props, externalRef) {
+        /**
+         * If we need to measure the element we load this functionality in a
+         * separate class component in order to gain access to getSnapshotBeforeUpdate.
+         */
+        let MeasureLayout;
         const configAndProps = {
             ...useContext(MotionConfigContext),
             ...props,
             layoutId: useLayoutId(props),
         };
         const { isStatic } = configAndProps;
-        let features = null;
         const context = useCreateMotionContext(props);
         /**
          * Create a unique projection ID for this component. If a new component is added
@@ -47,9 +49,6 @@ function createMotionComponent({ preloadedFeatures, createVisualElement, project
          * that gets forceRendered and layout animations are triggered on its layout effect.
          */
         const projectionId = isStatic ? undefined : useProjectionId();
-        /**
-         *
-         */
         const visualState = useVisualState(props, isStatic);
         if (!isStatic && isBrowser) {
             /**
@@ -64,20 +63,20 @@ function createMotionComponent({ preloadedFeatures, createVisualElement, project
              * components so each feature can optionally make use of React lifecycle methods.
              */
             const initialLayoutGroupConfig = useContext(SwitchLayoutGroupContext);
+            const isStrict = useContext(LazyContext).strict;
             if (context.visualElement) {
-                features = context.visualElement.loadFeatures(
+                MeasureLayout = context.visualElement.loadFeatures(
                 // Note: Pass the full new combined props to correctly re-render dynamic feature components.
-                configAndProps, useContext(LazyContext).strict, preloadedFeatures, projectionId, projectionNodeConstructor ||
-                    featureDefinitions.projectionNodeConstructor, initialLayoutGroupConfig);
+                configAndProps, isStrict, preloadedFeatures, projectionId, initialLayoutGroupConfig);
             }
         }
         /**
          * The mount order and hierarchy is specific to ensure our element ref
          * is hydrated by the time features fire their effects.
          */
-        return (React.createElement(VisualElementHandler, { visualElement: context.visualElement, props: configAndProps },
-            features,
-            React.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement))));
+        return (React.createElement(MotionContext.Provider, { value: context },
+            MeasureLayout && context.visualElement ? (React.createElement(MeasureLayout, { visualElement: context.visualElement, ...configAndProps })) : null,
+            useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement)));
     }
     const ForwardRefComponent = forwardRef(MotionComponent);
     ForwardRefComponent[motionComponentSymbol] = Component;

package/dist/es/motion/utils/use-visual-element.mjs

@@ -1,4 +1,4 @@
-import { useContext, useRef, useEffect } from 'react';
+import { useContext, useRef, useInsertionEffect, useEffect } from 'react';
 import { PresenceContext } from '../../context/PresenceContext.mjs';
 import { useVisualElementContext } from '../../context/MotionContext/index.mjs';
 import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
@@ -20,7 +20,7 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
             visualState,
             parent,
             props,
-            presenceId: presenceContext ? presenceContext.id : undefined,
+            presenceContext,
             blockInitialAnimation: presenceContext
                 ? presenceContext.initial === false
                 : false,
@@ -28,9 +28,15 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
         });
     }
     const visualElement = visualElementRef.current;
+    useInsertionEffect(() => {
+        visualElement && visualElement.update(props, presenceContext);
+    });
     useIsomorphicLayoutEffect(() => {
         visualElement && visualElement.render();
     });
+    useEffect(() => {
+        visualElement && visualElement.updateFeatures();
+    });
     /**
      * Ideally this function would always run in a useEffect.
      *

package/dist/es/projection/geometry/delta-apply.mjs

@@ -39,7 +39,6 @@ function applyBoxDelta(box, { x, y }) {
  * This is the final nested loop within updateLayoutDelta for future refactoring
  */
 function applyTreeDeltas(box, treeScale, treePath, isSharedTransition = false) {
-    var _a, _b;
     const treeLength = treePath.length;
     if (!treeLength)
         return;
@@ -50,8 +49,16 @@ function applyTreeDeltas(box, treeScale, treePath, isSharedTransition = false) {
     for (let i = 0; i < treeLength; i++) {
         node = treePath[i];
         delta = node.projectionDelta;
-        if (((_b = (_a = node.instance) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.display) === "contents")
+        /**
+         * TODO: Prefer to remove this, but currently we have motion components with
+         * display: contents in Framer.
+         */
+        const instance = node.instance;
+        if (instance &&
+            instance.style &&
+            instance.style.display === "contents") {
             continue;
+        }
         if (isSharedTransition &&
             node.options.layoutScroll &&
             node.scroll &&

package/dist/es/projection/geometry/delta-calc.mjs

@@ -18,8 +18,8 @@ function calcAxisDelta(delta, source, target, origin = 0.5) {
         delta.translate = 0;
 }
 function calcBoxDelta(delta, source, target, origin) {
-    calcAxisDelta(delta.x, source.x, target.x, origin === null || origin === void 0 ? void 0 : origin.originX);
-    calcAxisDelta(delta.y, source.y, target.y, origin === null || origin === void 0 ? void 0 : origin.originY);
+    calcAxisDelta(delta.x, source.x, target.x, origin ? origin.originX : undefined);
+    calcAxisDelta(delta.y, source.y, target.y, origin ? origin.originY : undefined);
 }
 function calcRelativeAxis(target, relative, parent) {
     target.min = parent.min + relative.min;

package/dist/es/projection/geometry/delta-remove.mjs

@@ -47,8 +47,8 @@ const yKeys = ["y", "scaleY", "originY"];
  * and acts as a bridge between motion values and removeAxisDelta
  */
 function removeBoxTransforms(box, transforms, originBox, sourceBox) {
-    removeAxisTransforms(box.x, transforms, xKeys, originBox === null || originBox === void 0 ? void 0 : originBox.x, sourceBox === null || sourceBox === void 0 ? void 0 : sourceBox.x);
-    removeAxisTransforms(box.y, transforms, yKeys, originBox === null || originBox === void 0 ? void 0 : originBox.y, sourceBox === null || sourceBox === void 0 ? void 0 : sourceBox.y);
+    removeAxisTransforms(box.x, transforms, xKeys, originBox ? originBox.x : undefined, sourceBox ? sourceBox.x : undefined);
+    removeAxisTransforms(box.y, transforms, yKeys, originBox ? originBox.y : undefined, sourceBox ? sourceBox.y : undefined);
 }
 
 export { removeAxisDelta, removeAxisTransforms, removeBoxTransforms, removePointDelta };

package/dist/es/projection/node/DocumentProjectionNode.mjs

@@ -1,5 +1,5 @@
 import { createProjectionNode } from './create-projection-node.mjs';
-import { addDomEvent } from '../../events/use-dom-event.mjs';
+import { addDomEvent } from '../../events/add-dom-event.mjs';
 
 const DocumentProjectionNode = createProjectionNode({
     attachResizeListener: (ref, notify) => addDomEvent(ref, "resize", notify),