motion 12.0.0-alpha.2 → 12.0.0

package/dist/es/framer-motion/dist/es/animation/utils/default-transitions.mjs

@@ -1,4 +1,4 @@
-import { transformProps } from '../../render/html/utils/transform.mjs';
+import { transformProps } from '../../render/html/utils/keys-transform.mjs';
 
 const underDampedSpring = {
     type: "spring",

package/dist/es/framer-motion/dist/es/components/AnimatePresence/index.mjs

@@ -1,10 +1,10 @@
 "use client";
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { useMemo, useRef, useState, useContext } from 'react';
-import { PresenceChild } from './PresenceChild.mjs';
 import { LayoutGroupContext } from '../../context/LayoutGroupContext.mjs';
-import { invariant } from '../../utils/errors.mjs';
 import { useConstant } from '../../utils/use-constant.mjs';
+import { PresenceChild } from './PresenceChild.mjs';
+import { usePresence } from './use-presence.mjs';
 import { onlyElements, getChildKey } from './utils.mjs';
 import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
 
@@ -41,8 +41,8 @@ import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs
  *
  * @public
  */
-const AnimatePresence = ({ children, exitBeforeEnter, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = "sync", }) => {
-    invariant(!exitBeforeEnter, "Replace exitBeforeEnter with mode='wait'");
+const AnimatePresence = ({ children, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = "sync", propagate = false, }) => {
+    const [isParentPresent, safeToRemove] = usePresence(propagate);
     /**
      * Filter any children that aren't ReactElements. We can only track components
      * between renders with a props.key.
@@ -52,7 +52,7 @@ const AnimatePresence = ({ children, exitBeforeEnter, custom, initial = true, on
      * Track the keys of the currently rendered children. This is used to
      * determine which children are exiting.
      */
-    const presentKeys = presentChildren.map(getChildKey);
+    const presentKeys = propagate && !isParentPresent ? [] : presentChildren.map(getChildKey);
     /**
      * If `initial={false}` we only want to pass this to components in the first render.
      */
@@ -134,8 +134,10 @@ const AnimatePresence = ({ children, exitBeforeEnter, custom, initial = true, on
     const { forceRender } = useContext(LayoutGroupContext);
     return (jsx(Fragment, { children: renderedChildren.map((child) => {
             const key = getChildKey(child);
-            const isPresent = presentChildren === renderedChildren ||
-                presentKeys.includes(key);
+            const isPresent = propagate && !isParentPresent
+                ? false
+                : presentChildren === renderedChildren ||
+                    presentKeys.includes(key);
             const onExit = () => {
                 if (exitComplete.has(key)) {
                     exitComplete.set(key, true);
@@ -151,6 +153,7 @@ const AnimatePresence = ({ children, exitBeforeEnter, custom, initial = true, on
                 if (isEveryExitComplete) {
                     forceRender === null || forceRender === void 0 ? void 0 : forceRender();
                     setRenderedChildren(pendingPresentChildren.current);
+                    propagate && (safeToRemove === null || safeToRemove === void 0 ? void 0 : safeToRemove());
                     onExitComplete && onExitComplete();
                 }
             };

package/dist/es/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs

@@ -24,7 +24,7 @@ import { PresenceContext } from '../../context/PresenceContext.mjs';
  *
  * @public
  */
-function usePresence() {
+function usePresence(subscribe = true) {
     const context = useContext(PresenceContext);
     if (context === null)
         return [true, null];
@@ -32,8 +32,11 @@ function usePresence() {
     // It's safe to call the following hooks conditionally (after an early return) because the context will always
     // either be null or non-null for the lifespan of the component.
     const id = useId();
-    useEffect(() => register(id), []);
-    const safeToRemove = useCallback(() => onExitComplete && onExitComplete(id), [id, onExitComplete]);
+    useEffect(() => {
+        if (subscribe)
+            register(id);
+    }, [subscribe]);
+    const safeToRemove = useCallback(() => subscribe && onExitComplete && onExitComplete(id), [id, onExitComplete, subscribe]);
     return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
 }
 /**

package/dist/es/framer-motion/dist/es/components/AnimateSharedLayout.mjs

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { invariant } from '../utils/errors.mjs';
+import { invariant } from '../../../../motion-utils/dist/es/errors.mjs';
 import * as React from 'react';
 import { useConstant } from '../utils/use-constant.mjs';
 import { LayoutGroup } from './LayoutGroup/index.mjs';

package/dist/es/framer-motion/dist/es/components/Reorder/Group.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { invariant } from '../../utils/errors.mjs';
+import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
 import { forwardRef, useRef, useEffect } from 'react';
 import { ReorderContext } from '../../context/ReorderContext.mjs';
 import { motion } from '../../render/components/motion/proxy.mjs';

package/dist/es/framer-motion/dist/es/components/Reorder/Item.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { invariant } from '../../utils/errors.mjs';
+import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
 import { forwardRef, useContext } from 'react';
 import { ReorderContext } from '../../context/ReorderContext.mjs';
 import { motion } from '../../render/components/motion/proxy.mjs';

package/dist/es/framer-motion/dist/es/easing/cubic-bezier.mjs

@@ -1,4 +1,5 @@
-import { noop } from '../utils/noop.mjs';
+import '../../../../motion-utils/dist/es/errors.mjs';
+import { noop } from '../../../../motion-utils/dist/es/noop.mjs';
 
 /*
   Bezier function generator

package/dist/es/framer-motion/dist/es/easing/utils/map.mjs

@@ -1,11 +1,11 @@
-import { invariant } from '../../utils/errors.mjs';
+import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
+import { noop } from '../../../../../motion-utils/dist/es/noop.mjs';
+import { isBezierDefinition } from '../../../../../motion-dom/dist/es/utils/is-bezier-definition.mjs';
+import { anticipate } from '../anticipate.mjs';
+import { backIn, backInOut, backOut } from '../back.mjs';
+import { circIn, circInOut, circOut } from '../circ.mjs';
 import { cubicBezier } from '../cubic-bezier.mjs';
-import { noop } from '../../utils/noop.mjs';
 import { easeIn, easeInOut, easeOut } from '../ease.mjs';
-import { circIn, circInOut, circOut } from '../circ.mjs';
-import { backIn, backInOut, backOut } from '../back.mjs';
-import { anticipate } from '../anticipate.mjs';
-import { isBezierDefinition } from './is-bezier-definition.mjs';
 
 const easingLookup = {
     linear: noop,

package/dist/es/framer-motion/dist/es/events/event-info.mjs

@@ -1,10 +1,11 @@
-import { isPrimaryPointer } from './utils/is-primary-pointer.mjs';
+import '../../../../motion-utils/dist/es/errors.mjs';
+import { isPrimaryPointer } from '../../../../motion-dom/dist/es/gestures/utils/is-primary-pointer.mjs';
 
-function extractEventInfo(event, pointType = "page") {
+function extractEventInfo(event) {
     return {
         point: {
-            x: event[`${pointType}X`],
-            y: event[`${pointType}Y`],
+            x: event.pageX,
+            y: event.pageY,
         },
     };
 }

package/dist/es/framer-motion/dist/es/frameloop/frame.mjs

@@ -1,4 +1,5 @@
-import { noop } from '../utils/noop.mjs';
+import '../../../../motion-utils/dist/es/errors.mjs';
+import { noop } from '../../../../motion-utils/dist/es/noop.mjs';
 import { createRenderBatcher } from './batcher.mjs';
 
 const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);

package/dist/es/framer-motion/dist/es/frameloop/render-step.mjs

@@ -63,10 +63,11 @@ function createRenderStep(runNextFrame) {
             }
             isProcessing = true;
             [thisFrame, nextFrame] = [nextFrame, thisFrame];
-            // Clear the next frame queue
-            nextFrame.clear();
             // Execute this frame
             thisFrame.forEach(triggerCallback);
+            // Clear the frame so no callbacks remain. This is to avoid
+            // memory leaks should this render step not run for a while.
+            thisFrame.clear();
             isProcessing = false;
             if (flushNextFrame) {
                 flushNextFrame = false;

package/dist/es/framer-motion/dist/es/gestures/drag/VisualElementDragControls.mjs

@@ -1,6 +1,6 @@
-import { invariant } from '../../utils/errors.mjs';
+import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
+import { setDragLock } from '../../../../../motion-dom/dist/es/gestures/drag/state/set-active.mjs';
 import { PanSession } from '../pan/PanSession.mjs';
-import { getGlobalLock } from './utils/lock.mjs';
 import { isRefObject } from '../../utils/is-ref-object.mjs';
 import { addPointerEvent } from '../../events/add-pointer-event.mjs';
 import { applyConstraints, calcRelativeConstraints, resolveDragElastic, calcViewportConstraints, rebaseAxisConstraints, calcOrigin, defaultElastic } from './utils/constraints.mjs';
@@ -25,10 +25,7 @@ const elementDragControls = new WeakMap();
 // let latestPointerEvent: PointerEvent
 class VisualElementDragControls {
     constructor(visualElement) {
-        // This is a reference to the global drag gesture lock, ensuring only one component
-        // can "capture" the drag of one or both axes.
-        // TODO: Look into moving this into pansession?
-        this.openGlobalLock = null;
+        this.openDragLock = null;
         this.isDragging = false;
         this.currentDirection = null;
         this.originPoint = { x: 0, y: 0 };
@@ -56,18 +53,18 @@ class VisualElementDragControls {
             // the component.
             dragSnapToOrigin ? this.pauseAnimation() : this.stopAnimation();
             if (snapToCursor) {
-                this.snapToCursor(extractEventInfo(event, "page").point);
+                this.snapToCursor(extractEventInfo(event).point);
             }
         };
         const onStart = (event, info) => {
             // Attempt to grab the global drag gesture lock - maybe make this part of PanSession
             const { drag, dragPropagation, onDragStart } = this.getProps();
             if (drag && !dragPropagation) {
-                if (this.openGlobalLock)
-                    this.openGlobalLock();
-                this.openGlobalLock = getGlobalLock(drag);
+                if (this.openDragLock)
+                    this.openDragLock();
+                this.openDragLock = setDragLock(drag);
                 // If we don 't have the lock, don't start dragging
-                if (!this.openGlobalLock)
+                if (!this.openDragLock)
                     return;
             }
             this.isDragging = true;
@@ -109,7 +106,7 @@ class VisualElementDragControls {
             // latestPointerEvent = event
             const { dragPropagation, dragDirectionLock, onDirectionLock, onDrag, } = this.getProps();
             // If we didn't successfully receive the gesture lock, early return.
-            if (!dragPropagation && !this.openGlobalLock)
+            if (!dragPropagation && !this.openDragLock)
                 return;
             const { offset } = info;
             // Attempt to detect drag direction if directionLock is true
@@ -177,9 +174,9 @@ class VisualElementDragControls {
         this.panSession && this.panSession.end();
         this.panSession = undefined;
         const { dragPropagation } = this.getProps();
-        if (!dragPropagation && this.openGlobalLock) {
-            this.openGlobalLock();
-            this.openGlobalLock = null;
+        if (!dragPropagation && this.openDragLock) {
+            this.openDragLock();
+            this.openDragLock = null;
         }
         animationState && animationState.setActive("whileDrag", false);
     }

package/dist/es/framer-motion/dist/es/gestures/drag/index.mjs

@@ -1,5 +1,6 @@
 import { Feature } from '../../motion/features/Feature.mjs';
-import { noop } from '../../utils/noop.mjs';
+import '../../../../../motion-utils/dist/es/errors.mjs';
+import { noop } from '../../../../../motion-utils/dist/es/noop.mjs';
 import { VisualElementDragControls } from './VisualElementDragControls.mjs';
 
 class DragGesture extends Feature {

package/dist/es/framer-motion/dist/es/gestures/drag/utils/constraints.mjs

@@ -1,4 +1,5 @@
-import { progress } from '../../../utils/progress.mjs';
+import '../../../../../../motion-utils/dist/es/errors.mjs';
+import { progress } from '../../../../../../motion-utils/dist/es/progress.mjs';
 import { calcLength } from '../../../projection/geometry/delta-calc.mjs';
 import { clamp } from '../../../utils/clamp.mjs';
 import { mixNumber } from '../../../utils/mix/number.mjs';

package/dist/es/framer-motion/dist/es/gestures/hover.mjs

@@ -1,31 +1,29 @@
-import { addPointerEvent } from '../events/add-pointer-event.mjs';
-import { pipe } from '../utils/pipe.mjs';
-import { isDragActive } from './drag/utils/lock.mjs';
+import '../../../../motion-utils/dist/es/errors.mjs';
+import { hover } from '../../../../motion-dom/dist/es/gestures/hover.mjs';
+import { extractEventInfo } from '../events/event-info.mjs';
 import { Feature } from '../motion/features/Feature.mjs';
 import { frame } from '../frameloop/frame.mjs';
 
-function addHoverEvent(node, isActive) {
-    const eventName = isActive ? "pointerenter" : "pointerleave";
-    const callbackName = isActive ? "onHoverStart" : "onHoverEnd";
-    const handleEvent = (event, info) => {
-        if (event.pointerType === "touch" || isDragActive())
-            return;
-        const props = node.getProps();
-        if (node.animationState && props.whileHover) {
-            node.animationState.setActive("whileHover", isActive);
-        }
-        const callback = props[callbackName];
-        if (callback) {
-            frame.postRender(() => callback(event, info));
-        }
-    };
-    return addPointerEvent(node.current, eventName, handleEvent, {
-        passive: !node.getProps()[callbackName],
-    });
+function handleHoverEvent(node, event, lifecycle) {
+    const { props } = node;
+    if (node.animationState && props.whileHover) {
+        node.animationState.setActive("whileHover", lifecycle === "Start");
+    }
+    const eventName = ("onHover" + lifecycle);
+    const callback = props[eventName];
+    if (callback) {
+        frame.postRender(() => callback(event, extractEventInfo(event)));
+    }
 }
 class HoverGesture extends Feature {
     mount() {
-        this.unmount = pipe(addHoverEvent(this.node, true), addHoverEvent(this.node, false));
+        const { current } = this.node;
+        if (!current)
+            return;
+        this.unmount = hover(current, (_element, startEvent) => {
+            handleHoverEvent(this.node, startEvent, "Start");
+            return (endEvent) => handleHoverEvent(this.node, endEvent, "End");
+        });
     }
     unmount() { }
 }

package/dist/es/framer-motion/dist/es/gestures/pan/PanSession.mjs

@@ -1,16 +1,17 @@
-import { extractEventInfo } from '../../events/event-info.mjs';
-import { secondsToMilliseconds, millisecondsToSeconds } from '../../utils/time-conversion.mjs';
+import '../../../../../motion-utils/dist/es/errors.mjs';
+import { secondsToMilliseconds, millisecondsToSeconds } from '../../../../../motion-utils/dist/es/time-conversion.mjs';
+import { isPrimaryPointer } from '../../../../../motion-dom/dist/es/gestures/utils/is-primary-pointer.mjs';
 import { addPointerEvent } from '../../events/add-pointer-event.mjs';
-import { pipe } from '../../utils/pipe.mjs';
+import { extractEventInfo } from '../../events/event-info.mjs';
 import { distance2D } from '../../utils/distance.mjs';
-import { isPrimaryPointer } from '../../events/utils/is-primary-pointer.mjs';
+import { pipe } from '../../utils/pipe.mjs';
 import { frame, cancelFrame, frameData } from '../../frameloop/frame.mjs';
 
 /**
  * @internal
  */
 class PanSession {
-    constructor(event, handlers, { transformPagePoint, contextWindow, dragSnapToOrigin = false } = {}) {
+    constructor(event, handlers, { transformPagePoint, contextWindow, dragSnapToOrigin = false, } = {}) {
         /**
          * @internal
          */

package/dist/es/framer-motion/dist/es/gestures/pan/index.mjs

@@ -1,7 +1,8 @@
 import { PanSession } from './PanSession.mjs';
 import { addPointerEvent } from '../../events/add-pointer-event.mjs';
 import { Feature } from '../../motion/features/Feature.mjs';
-import { noop } from '../../utils/noop.mjs';
+import '../../../../../motion-utils/dist/es/errors.mjs';
+import { noop } from '../../../../../motion-utils/dist/es/noop.mjs';
 import { getContextWindow } from '../../utils/get-context-window.mjs';
 import { frame } from '../../frameloop/frame.mjs';
 

package/dist/es/framer-motion/dist/es/gestures/press.mjs

@@ -1,130 +1,31 @@
+import '../../../../motion-utils/dist/es/errors.mjs';
+import { press } from '../../../../motion-dom/dist/es/gestures/press/index.mjs';
 import { extractEventInfo } from '../events/event-info.mjs';
-import { addDomEvent } from '../events/add-dom-event.mjs';
-import { addPointerEvent } from '../events/add-pointer-event.mjs';
 import { Feature } from '../motion/features/Feature.mjs';
-import { pipe } from '../utils/pipe.mjs';
-import { isDragActive } from './drag/utils/lock.mjs';
-import { isNodeOrChild } from './utils/is-node-or-child.mjs';
-import { noop } from '../utils/noop.mjs';
 import { frame } from '../frameloop/frame.mjs';
 
-function fireSyntheticPointerEvent(name, handler) {
-    if (!handler)
-        return;
-    const syntheticPointerEvent = new PointerEvent("pointer" + name);
-    handler(syntheticPointerEvent, extractEventInfo(syntheticPointerEvent));
-}
-class PressGesture extends Feature {
-    constructor() {
-        super(...arguments);
-        this.removeStartListeners = noop;
-        this.removeEndListeners = noop;
-        this.removeAccessibleListeners = noop;
-        this.startPointerPress = (startEvent, startInfo) => {
-            if (this.isPressing)
-                return;
-            this.removeEndListeners();
-            const props = this.node.getProps();
-            const endPointerPress = (endEvent, endInfo) => {
-                if (!this.checkPressEnd())
-                    return;
-                const { onTap, onTapCancel, globalTapTarget } = this.node.getProps();
-                /**
-                 * We only count this as a tap gesture if the event.target is the same
-                 * as, or a child of, this component's element
-                 */
-                const handler = !globalTapTarget &&
-                    !isNodeOrChild(this.node.current, endEvent.target)
-                    ? onTapCancel
-                    : onTap;
-                if (handler) {
-                    frame.update(() => handler(endEvent, endInfo));
-                }
-            };
-            const removePointerUpListener = addPointerEvent(window, "pointerup", endPointerPress, {
-                passive: !(props.onTap || props["onPointerUp"]),
-            });
-            const removePointerCancelListener = addPointerEvent(window, "pointercancel", (cancelEvent, cancelInfo) => this.cancelPress(cancelEvent, cancelInfo), {
-                passive: !(props.onTapCancel ||
-                    props["onPointerCancel"]),
-            });
-            this.removeEndListeners = pipe(removePointerUpListener, removePointerCancelListener);
-            this.startPress(startEvent, startInfo);
-        };
-        this.startAccessiblePress = () => {
-            const handleKeydown = (keydownEvent) => {
-                if (keydownEvent.key !== "Enter" || this.isPressing)
-                    return;
-                const handleKeyup = (keyupEvent) => {
-                    if (keyupEvent.key !== "Enter" || !this.checkPressEnd())
-                        return;
-                    fireSyntheticPointerEvent("up", (event, info) => {
-                        const { onTap } = this.node.getProps();
-                        if (onTap) {
-                            frame.postRender(() => onTap(event, info));
-                        }
-                    });
-                };
-                this.removeEndListeners();
-                this.removeEndListeners = addDomEvent(this.node.current, "keyup", handleKeyup);
-                fireSyntheticPointerEvent("down", (event, info) => {
-                    this.startPress(event, info);
-                });
-            };
-            const removeKeydownListener = addDomEvent(this.node.current, "keydown", handleKeydown);
-            const handleBlur = () => {
-                if (!this.isPressing)
-                    return;
-                fireSyntheticPointerEvent("cancel", (cancelEvent, cancelInfo) => this.cancelPress(cancelEvent, cancelInfo));
-            };
-            const removeBlurListener = addDomEvent(this.node.current, "blur", handleBlur);
-            this.removeAccessibleListeners = pipe(removeKeydownListener, removeBlurListener);
-        };
-    }
-    startPress(event, info) {
-        this.isPressing = true;
-        const { onTapStart, whileTap } = this.node.getProps();
-        /**
-         * Ensure we trigger animations before firing event callback
-         */
-        if (whileTap && this.node.animationState) {
-            this.node.animationState.setActive("whileTap", true);
-        }
-        if (onTapStart) {
-            frame.postRender(() => onTapStart(event, info));
-        }
+function handlePressEvent(node, event, lifecycle) {
+    const { props } = node;
+    if (node.animationState && props.whileTap) {
+        node.animationState.setActive("whileTap", lifecycle === "Start");
     }
-    checkPressEnd() {
-        this.removeEndListeners();
-        this.isPressing = false;
-        const props = this.node.getProps();
-        if (props.whileTap && this.node.animationState) {
-            this.node.animationState.setActive("whileTap", false);
-        }
-        return !isDragActive();
-    }
-    cancelPress(event, info) {
-        if (!this.checkPressEnd())
-            return;
-        const { onTapCancel } = this.node.getProps();
-        if (onTapCancel) {
-            frame.postRender(() => onTapCancel(event, info));
-        }
+    const eventName = ("onTap" + (lifecycle === "End" ? "" : lifecycle));
+    const callback = props[eventName];
+    if (callback) {
+        frame.postRender(() => callback(event, extractEventInfo(event)));
     }
+}
+class PressGesture extends Feature {
     mount() {
-        const props = this.node.getProps();
-        const removePointerListener = addPointerEvent(props.globalTapTarget ? window : this.node.current, "pointerdown", this.startPointerPress, {
-            passive: !(props.onTapStart ||
-                props["onPointerStart"]),
-        });
-        const removeFocusListener = addDomEvent(this.node.current, "focus", this.startAccessiblePress);
-        this.removeStartListeners = pipe(removePointerListener, removeFocusListener);
-    }
-    unmount() {
-        this.removeStartListeners();
-        this.removeEndListeners();
-        this.removeAccessibleListeners();
+        const { current } = this.node;
+        if (!current)
+            return;
+        this.unmount = press(current, (_element, startEvent) => {
+            handlePressEvent(this.node, startEvent, "Start");
+            return (endEvent, { success }) => handlePressEvent(this.node, endEvent, success ? "End" : "Cancel");
+        }, { useGlobalTarget: this.node.props.globalTapTarget });
     }
+    unmount() { }
 }
 
 export { PressGesture };

package/dist/es/framer-motion/dist/es/motion/index.mjs

@@ -1,18 +1,18 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { warning, invariant } from '../../../../motion-utils/dist/es/errors.mjs';
 import { forwardRef, useContext } from 'react';
+import { LayoutGroupContext } from '../context/LayoutGroupContext.mjs';
+import { LazyContext } from '../context/LazyContext.mjs';
 import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
 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 { loadFeatures } from './features/load-features.mjs';
 import { isBrowser } from '../utils/is-browser.mjs';
-import { LayoutGroupContext } from '../context/LayoutGroupContext.mjs';
-import { LazyContext } from '../context/LazyContext.mjs';
-import { motionComponentSymbol } from './utils/symbol.mjs';
-import { warning, invariant } from '../utils/errors.mjs';
 import { featureDefinitions } from './features/definitions.mjs';
+import { loadFeatures } from './features/load-features.mjs';
+import { motionComponentSymbol } from './utils/symbol.mjs';
+import { useMotionRef } from './utils/use-motion-ref.mjs';
+import { useVisualElement } from './utils/use-visual-element.mjs';
 
 /**
  * Create a `motion` component.
@@ -24,6 +24,7 @@ import { featureDefinitions } from './features/definitions.mjs';
  * component "offline", or outside the React render cycle.
  */
 function createRendererMotionComponent({ preloadedFeatures, createVisualElement, useRender, useVisualState, Component, }) {
+    var _a, _b;
     preloadedFeatures && loadFeatures(preloadedFeatures);
     function MotionComponent(props, externalRef) {
         /**
@@ -57,6 +58,9 @@ function createRendererMotionComponent({ preloadedFeatures, createVisualElement,
          */
         return (jsxs(MotionContext.Provider, { value: context, children: [MeasureLayout && context.visualElement ? (jsx(MeasureLayout, { visualElement: context.visualElement, ...configAndProps })) : null, useRender(Component, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement)] }));
     }
+    MotionComponent.displayName = `motion.${typeof Component === "string"
+        ? Component
+        : `create(${(_b = (_a = Component.displayName) !== null && _a !== void 0 ? _a : Component.name) !== null && _b !== void 0 ? _b : ""})`}`;
     const ForwardRefMotionComponent = forwardRef(MotionComponent);
     ForwardRefMotionComponent[motionComponentSymbol] = Component;
     return ForwardRefMotionComponent;

package/dist/es/framer-motion/dist/es/motion/utils/is-forced-motion-value.mjs

@@ -1,5 +1,5 @@
 import { scaleCorrectors } from '../../projection/styles/scale-correction.mjs';
-import { transformProps } from '../../render/html/utils/transform.mjs';
+import { transformProps } from '../../render/html/utils/keys-transform.mjs';
 
 function isForcedMotionValue(key, { layout, layoutId }) {
     return (transformProps.has(key) ||

package/dist/es/framer-motion/dist/es/motion/utils/use-motion-ref.mjs

@@ -7,7 +7,9 @@ import { isRefObject } from '../../utils/is-ref-object.mjs';
  */
 function useMotionRef(visualState, visualElement, externalRef) {
     return useCallback((instance) => {
-        instance && visualState.mount && visualState.mount(instance);
+        if (instance) {
+            visualState.onMount && visualState.onMount(instance);
+        }
         if (visualElement) {
             if (instance) {
                 visualElement.mount(instance);

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

@@ -15,7 +15,7 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
     const lazyContext = useContext(LazyContext);
     const presenceContext = useContext(PresenceContext);
     const reducedMotionConfig = useContext(MotionConfigContext).reducedMotion;
-    const visualElementRef = useRef(undefined);
+    const visualElementRef = useRef(null);
     /**
      * If we haven't preloaded a renderer, check to see if we have one lazy-loaded
      */

package/dist/es/framer-motion/dist/es/motion/utils/use-visual-state.mjs

@@ -1,19 +1,25 @@
 import { useContext } from 'react';
 import { isAnimationControls } from '../../animation/utils/is-animation-controls.mjs';
+import { MotionContext } from '../../context/MotionContext/index.mjs';
 import { PresenceContext } from '../../context/PresenceContext.mjs';
+import { isControllingVariants, isVariantNode } from '../../render/utils/is-controlling-variants.mjs';
 import { resolveVariantFromProps } from '../../render/utils/resolve-variants.mjs';
 import { useConstant } from '../../utils/use-constant.mjs';
 import { resolveMotionValue } from '../../value/utils/resolve-motion-value.mjs';
-import { MotionContext } from '../../context/MotionContext/index.mjs';
-import { isControllingVariants, isVariantNode } from '../../render/utils/is-controlling-variants.mjs';
 
-function makeState({ scrapeMotionValuesFromProps, createRenderState, onMount, }, props, context, presenceContext) {
+function makeState({ scrapeMotionValuesFromProps, createRenderState, onUpdate, }, props, context, presenceContext) {
     const state = {
         latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps),
         renderState: createRenderState(),
     };
-    if (onMount) {
-        state.mount = (instance) => onMount(props, instance, state);
+    if (onUpdate) {
+        /**
+         * onMount works without the VisualElement because it could be
+         * called before the VisualElement payload has been hydrated.
+         * (e.g. if someone is using m components <m.circle />)
+         */
+        state.onMount = (instance) => onUpdate({ props, current: instance, ...state });
+        state.onUpdate = (visualElement) => onUpdate(visualElement);
     }
     return state;
 }

package/dist/es/framer-motion/dist/es/projection/animation/mix-values.mjs

@@ -1,7 +1,8 @@
+import '../../../../../motion-utils/dist/es/errors.mjs';
+import { noop } from '../../../../../motion-utils/dist/es/noop.mjs';
+import { progress } from '../../../../../motion-utils/dist/es/progress.mjs';
 import { circOut } from '../../easing/circ.mjs';
-import { progress } from '../../utils/progress.mjs';
 import { mixNumber } from '../../utils/mix/number.mjs';
-import { noop } from '../../utils/noop.mjs';
 import { percent, px } from '../../value/types/numbers/units.mjs';
 
 const borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];