framer-motion 5.3.0 → 5.4.0-beta

package/dist/es/animation/utils/easing.mjs

@@ -27,7 +27,7 @@ var easingDefinitionToFunction = function (definition) {
     }
     else if (typeof definition === "string") {
         // Else lookup from table
-        invariant(easingLookup[definition] !== undefined, "Invalid easing type '" + definition + "'");
+        invariant(easingLookup[definition] !== undefined, "Invalid easing type '".concat(definition, "'"));
         return easingLookup[definition];
     }
     return definition;

package/dist/es/animation/utils/transitions.mjs

@@ -6,6 +6,8 @@ import { isAnimatable } from './is-animatable.mjs';
 import { getDefaultTransition } from './default-transitions.mjs';
 import { warning } from 'hey-listen';
 import { getAnimatableNone } from '../../render/dom/value-types/animatable-none.mjs';
+import { instantAnimationState } from '../../utils/use-instant-transition-state.mjs';
+import { resolveFinalValueInKeyframes } from '../../utils/resolve-value.mjs';
 
 /**
  * Decide whether a transition is defined on a given Transition.
@@ -124,7 +126,7 @@ function getAnimation(key, value, target, transition, onComplete) {
         target = getZeroUnit(origin);
     }
     var isOriginAnimatable = isAnimatable(key, origin);
-    warning(isOriginAnimatable === isTargetAnimatable, "You are trying to animate " + key + " from \"" + origin + "\" to \"" + target + "\". " + origin + " is not an animatable value - to enable this animation set " + origin + " to a value animatable to " + target + " via the `style` property.");
+    warning(isOriginAnimatable === isTargetAnimatable, "You are trying to animate ".concat(key, " from \"").concat(origin, "\" to \"").concat(target, "\". ").concat(origin, " is not an animatable value - to enable this animation set ").concat(origin, " to a value animatable to ").concat(target, " via the `style` property."));
     function start() {
         var options = {
             from: origin,
@@ -148,9 +150,10 @@ function getAnimation(key, value, target, transition, onComplete) {
     }
     function set() {
         var _a, _b;
-        value.set(target);
+        var finalTarget = resolveFinalValueInKeyframes(target);
+        value.set(finalTarget);
         onComplete();
-        (_a = valueTransition === null || valueTransition === void 0 ? void 0 : valueTransition.onUpdate) === null || _a === void 0 ? void 0 : _a.call(valueTransition, target);
+        (_a = valueTransition === null || valueTransition === void 0 ? void 0 : valueTransition.onUpdate) === null || _a === void 0 ? void 0 : _a.call(valueTransition, finalTarget);
         (_b = valueTransition === null || valueTransition === void 0 ? void 0 : valueTransition.onComplete) === null || _b === void 0 ? void 0 : _b.call(valueTransition);
         return { stop: function () { } };
     }
@@ -182,6 +185,9 @@ function getValueTransition(transition, key) {
  */
 function startAnimation(key, value, target, transition) {
     if (transition === void 0) { transition = {}; }
+    if (instantAnimationState.current) {
+        transition = { type: false };
+    }
     return value.start(function (onComplete) {
         var delayTimer;
         var controls;

package/dist/es/components/AnimatePresence/index.mjs

@@ -14,7 +14,7 @@ function updateChildLookup(children, allChildren) {
         var key = getChildKey(child);
         if (process.env.NODE_ENV !== "production" && seenChildren) {
             if (seenChildren.has(key)) {
-                console.warn("Children of AnimatePresence require unique keys. \"" + key + "\" is a duplicate.");
+                console.warn("Children of AnimatePresence require unique keys. \"".concat(key, "\" is a duplicate."));
             }
             seenChildren.add(key);
         }

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

@@ -38,34 +38,8 @@ function usePresence() {
     var safeToRemove = function () { return onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete(id); };
     return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
 }
-/**
- * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.
- * There is no `safeToRemove` function.
- *
- * ```jsx
- * import { useIsPresent } from "framer-motion"
- *
- * export const Component = () => {
- *   const isPresent = useIsPresent()
- *
- *   useEffect(() => {
- *     !isPresent && console.log("I've been removed!")
- *   }, [isPresent])
- *
- *   return <div />
- * }
- * ```
- *
- * @public
- */
-function useIsPresent() {
-    return isPresent(useContext(PresenceContext));
-}
-function isPresent(context) {
-    return context === null ? true : context.isPresent;
-}
 var counter = 0;
 var incrementId = function () { return counter++; };
 var useUniqueId = function () { return useConstant(incrementId); };
 
-export { isPresent, useIsPresent, usePresence };
+export { usePresence };

package/dist/es/components/AnimateSharedLayout.mjs

@@ -5,7 +5,7 @@ import { LayoutGroup } from './LayoutGroup/index.mjs';
 var id = 0;
 var AnimateSharedLayout = function (_a) {
     var children = _a.children;
-    return (React.createElement(LayoutGroup, { id: useConstant(function () { return "asl-" + id++; }) }, children));
+    return (React.createElement(LayoutGroup, { id: useConstant(function () { return "asl-".concat(id++); }) }, children));
 };
 
 export { AnimateSharedLayout };

package/dist/es/components/Reorder/Item.mjs

@@ -14,7 +14,7 @@ function useDefaultMotionValue(value, defaultValue) {
     return isMotionValue(value) ? value : useMotionValue(defaultValue);
 }
 function ReorderItem(_a, externalRef) {
-    var children = _a.children, style = _a.style, value = _a.value, _b = _a.as, as = _b === void 0 ? "li" : _b, props = __rest(_a, ["children", "style", "value", "as"]);
+    var children = _a.children, style = _a.style, value = _a.value, _b = _a.as, as = _b === void 0 ? "li" : _b, onDrag = _a.onDrag, props = __rest(_a, ["children", "style", "value", "as", "onDrag"]);
     var Component = useConstant(function () { return motion(as); });
     var context = useContext(ReorderContext);
     var point = {
@@ -23,7 +23,7 @@ function ReorderItem(_a, externalRef) {
     };
     var zIndex = useTransform([point.x, point.y], function (_a) {
         var _b = __read(_a, 2), latestX = _b[0], latestY = _b[1];
-        return latestX || latestY ? 1 : 0;
+        return latestX || latestY ? 1 : "unset";
     });
     var layout = useRef(null);
     invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");
@@ -31,10 +31,11 @@ function ReorderItem(_a, externalRef) {
     useEffect(function () {
         registerItem(value, layout.current);
     }, [context]);
-    return (React.createElement(Component, __assign({ drag: axis }, props, { dragSnapToOrigin: true, style: __assign(__assign({}, style), { x: point.x, y: point.y, zIndex: zIndex }), layout: true, onDrag: function (_event, _a) {
-            var velocity = _a.velocity;
+    return (React.createElement(Component, __assign({ drag: axis }, props, { dragSnapToOrigin: true, style: __assign(__assign({}, style), { x: point.x, y: point.y, zIndex: zIndex }), layout: true, onDrag: function (event, gesturePoint) {
+            var velocity = gesturePoint.velocity;
             velocity[axis] &&
                 updateOrder(value, point[axis].get(), velocity[axis]);
+            onDrag === null || onDrag === void 0 ? void 0 : onDrag(event, gesturePoint);
         }, onLayoutMeasure: function (measured) {
             layout.current = measured;
         }, ref: externalRef }), children));

package/dist/es/context/MotionContext/index.mjs

@@ -1,4 +1,4 @@
-import { useContext, createContext } from 'react';
+import { createContext, useContext } from 'react';
 
 var MotionContext = createContext({});
 function useVisualElementContext() {

package/dist/es/events/use-dom-event.mjs

@@ -1,37 +1,8 @@
-import { useEffect } from 'react';
+import 'react';
 
 function addDomEvent(target, eventName, handler, options) {
     target.addEventListener(eventName, handler, options);
     return function () { return target.removeEventListener(eventName, handler, options); };
 }
-/**
- * Attaches an event listener directly to the provided DOM element.
- *
- * Bypassing React's event system can be desirable, for instance when attaching non-passive
- * event handlers.
- *
- * ```jsx
- * const ref = useRef(null)
- *
- * useDomEvent(ref, 'wheel', onWheel, { passive: false })
- *
- * return <div ref={ref} />
- * ```
- *
- * @param ref - React.RefObject that's been provided to the element you want to bind the listener to.
- * @param eventName - Name of the event you want listen for.
- * @param handler - Function to fire when receiving the event.
- * @param options - Options to pass to `Event.addEventListener`.
- *
- * @public
- */
-function useDomEvent(ref, eventName, handler, options) {
-    useEffect(function () {
-        var element = ref.current;
-        if (handler && element) {
-            return addDomEvent(element, eventName, handler, options);
-        }
-    }, [ref, eventName, handler, options]);
-}
 
-export { addDomEvent, useDomEvent };
+export { addDomEvent };

package/dist/es/events/use-pointer-event.mjs

@@ -1,4 +1,4 @@
-import { useDomEvent, addDomEvent } from './use-dom-event.mjs';
+import { addDomEvent } from './use-dom-event.mjs';
 import { wrapHandler } from './event-info.mjs';
 import { supportsPointerEvents, supportsTouchEvents, supportsMouseEvents } from './utils.mjs';
 
@@ -33,8 +33,5 @@ function getPointerEventName(name) {
 function addPointerEvent(target, eventName, handler, options) {
     return addDomEvent(target, getPointerEventName(eventName), wrapHandler(handler, eventName === "pointerdown"), options);
 }
-function usePointerEvent(ref, eventName, handler, options) {
-    return useDomEvent(ref, getPointerEventName(eventName), handler && wrapHandler(handler, eventName === "pointerdown"), options);
-}
 
-export { addPointerEvent, usePointerEvent };
+export { addPointerEvent };

package/dist/es/gestures/use-hover-gesture.mjs

@@ -8,8 +8,11 @@ function createHoverEvent(visualElement, isActive, callback) {
         var _a;
         if (!isMouseEvent(event) || isDragActive())
             return;
-        callback === null || callback === void 0 ? void 0 : callback(event, info);
+        /**
+         * Ensure we trigger animations before firing event callback
+         */
         (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Hover, isActive);
+        callback === null || callback === void 0 ? void 0 : callback(event, info);
     };
 }
 function useHoverGesture(_a) {

package/dist/es/gestures/use-tap-gesture.mjs

@@ -50,8 +50,11 @@ function useTapGesture(_a) {
             return;
         isPressing.current = true;
         cancelPointerEndListeners.current = pipe(addPointerEvent(window, "pointerup", onPointerUp), addPointerEvent(window, "pointercancel", onPointerCancel));
-        onTapStart === null || onTapStart === void 0 ? void 0 : onTapStart(event, info);
+        /**
+         * Ensure we trigger animations before firing event callback
+         */
         (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Tap, true);
+        onTapStart === null || onTapStart === void 0 ? void 0 : onTapStart(event, info);
     }
     usePointerEvent(visualElement, "pointerdown", hasPressListeners ? onPointerDown : undefined);
     useUnmountEffect(removePointerEndListener);

package/dist/es/gestures/utils/event-type.mjs

@@ -1,13 +1,6 @@
-function isMouseEvent(event) {
-    // PointerEvent inherits from MouseEvent so we can't use a straight instanceof check.
-    if (typeof PointerEvent !== "undefined" && event instanceof PointerEvent) {
-        return !!(event.pointerType === "mouse");
-    }
-    return event instanceof MouseEvent;
-}
 function isTouchEvent(event) {
     var hasTouches = !!event.touches;
     return hasTouches;
 }
 
-export { isMouseEvent, isTouchEvent };
+export { isTouchEvent };

package/dist/es/index.mjs

@@ -31,6 +31,7 @@ export { useDomEvent } from './events/use-dom-event.mjs';
 export { createMotionComponent } from './motion/index.mjs';
 export { visualElement } from './render/index.mjs';
 export { addScaleCorrector } from './projection/styles/scale-correction.mjs';
+export { useInstantTransition } from './utils/use-instant-transition.mjs';
 export { useInstantLayoutTransition } from './projection/use-instant-layout-transition.mjs';
 export { useResetProjection } from './projection/use-reset-projection.mjs';
 export { MotionConfigContext } from './context/MotionConfigContext.mjs';

package/dist/es/motion/features/viewport/use-viewport.mjs

@@ -59,7 +59,7 @@ function useIntersectionObserver(shouldObserve, state, visualElement, _a) {
             var callback = isIntersecting
                 ? props.onViewportEnter
                 : props.onViewportLeave;
-            callback === null || callback === void 0 ? void 0 : callback();
+            callback === null || callback === void 0 ? void 0 : callback(entry);
         };
         return observeIntersection(visualElement.getInstance(), options, intersectionCallback);
     }, [shouldObserve, root, rootMargin, amount]);
@@ -88,7 +88,7 @@ function useMissingIntersectionObserver(shouldObserve, state, visualElement) {
             var _a;
             state.hasEnteredView = true;
             var onViewportEnter = visualElement.getProps().onViewportEnter;
-            onViewportEnter === null || onViewportEnter === void 0 ? void 0 : onViewportEnter();
+            onViewportEnter === null || onViewportEnter === void 0 ? void 0 : onViewportEnter(null);
             (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.InView, true);
         });
     }, [shouldObserve]);

package/dist/es/motion/index.mjs

@@ -78,7 +78,7 @@ function createMotionComponent(_a) {
          */
         return (React.createElement(VisualElementHandler, { visualElement: context.visualElement, props: __assign(__assign({}, config), props) },
             features,
-            React.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, config.isStatic))));
+            React.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, config.isStatic, context.visualElement))));
     }
     return forwardRef(MotionComponent);
 }

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

@@ -18,13 +18,17 @@ function makeState(_a, props, context, presenceContext) {
     }
     return state;
 }
-var makeUseVisualState = function (config) { return function (props, isStatic) {
-    var context = useContext(MotionContext);
-    var presenceContext = useContext(PresenceContext);
-    return isStatic
-        ? makeState(config, props, context, presenceContext)
-        : useConstant(function () { return makeState(config, props, context, presenceContext); });
-}; };
+var makeUseVisualState = function (config) {
+    return function (props, isStatic) {
+        var context = useContext(MotionContext);
+        var presenceContext = useContext(PresenceContext);
+        return isStatic
+            ? makeState(config, props, context, presenceContext)
+            : useConstant(function () {
+                return makeState(config, props, context, presenceContext);
+            });
+    };
+};
 function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
     var values = {};
     var blockInitialAnimation = (presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.initial) === false;
@@ -42,7 +46,8 @@ function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
         initial !== null && initial !== void 0 ? initial : (initial = context.initial);
         animate !== null && animate !== void 0 ? animate : (animate = context.animate);
     }
-    var variantToSet = blockInitialAnimation || initial === false ? animate : initial;
+    var initialAnimationIsBlocked = blockInitialAnimation || initial === false;
+    var variantToSet = initialAnimationIsBlocked ? animate : initial;
     if (variantToSet &&
         typeof variantToSet !== "boolean" &&
         !isAnimationControls(variantToSet)) {
@@ -52,8 +57,22 @@ function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
             if (!resolved)
                 return;
             var transitionEnd = resolved.transitionEnd; resolved.transition; var target = __rest(resolved, ["transitionEnd", "transition"]);
-            for (var key in target)
-                values[key] = target[key];
+            for (var key in target) {
+                var valueTarget = target[key];
+                if (Array.isArray(valueTarget)) {
+                    /**
+                     * Take final keyframe if the initial animation is blocked because
+                     * we want to initialise at the end of that blocked animation.
+                     */
+                    var index = initialAnimationIsBlocked
+                        ? valueTarget.length - 1
+                        : 0;
+                    valueTarget = valueTarget[index];
+                }
+                if (valueTarget !== null) {
+                    values[key] = valueTarget;
+                }
+            }
             for (var key in transitionEnd)
                 values[key] = transitionEnd[key];
         });

package/dist/es/motion/utils/valid-prop.mjs

@@ -17,6 +17,7 @@ var validMotionProps = new Set([
     "inherit",
     "layout",
     "layoutId",
+    "layoutDependency",
     "onLayoutAnimationComplete",
     "onLayoutMeasure",
     "onBeforeLayoutMeasure",

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

@@ -18,7 +18,7 @@ function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnl
      * Mix border radius
      */
     for (var i = 0; i < numBorders; i++) {
-        var borderLabel = "border" + borders[i] + "Radius";
+        var borderLabel = "border".concat(borders[i], "Radius");
         var followRadius = getRadius(follow, borderLabel);
         var leadRadius = getRadius(lead, borderLabel);
         if (followRadius === undefined && leadRadius === undefined)

package/dist/es/projection/geometry/models.mjs

@@ -1,17 +1,7 @@
-var createAxisDelta = function () { return ({
-    translate: 0,
-    scale: 1,
-    origin: 0,
-    originPoint: 0,
-}); };
-var createDelta = function () { return ({
-    x: createAxisDelta(),
-    y: createAxisDelta(),
-}); };
 var createAxis = function () { return ({ min: 0, max: 0 }); };
 var createBox = function () { return ({
     x: createAxis(),
     y: createAxis(),
 }); };
 
-export { createAxis, createAxisDelta, createBox, createDelta };
+export { createAxis, createBox };