framer-motion 5.3.0 → 5.4.0-beta

package/dist/framer-motion.cjs.js

@@ -20,14 +20,12 @@ function _interopNamespace(e) {
                 var d = Object.getOwnPropertyDescriptor(e, k);
                 Object.defineProperty(n, k, d.get ? d : {
                     enumerable: true,
-                    get: function () {
-                        return e[k];
-                    }
+                    get: function () { return e[k]; }
                 });
             }
         });
     }
-    n['default'] = e;
+    n["default"] = e;
     return Object.freeze(n);
 }
 
@@ -438,7 +436,7 @@ var MotionValue = /** @class */ (function () {
             if (_this.lastUpdated !== timestamp) {
                 _this.timeDelta = delta;
                 _this.lastUpdated = timestamp;
-                sync__default['default'].postRender(_this.scheduleVelocityCheck);
+                sync__default["default"].postRender(_this.scheduleVelocityCheck);
             }
             // Update update subscribers
             if (_this.prev !== _this.current) {
@@ -461,7 +459,7 @@ var MotionValue = /** @class */ (function () {
          *
          * @internal
          */
-        this.scheduleVelocityCheck = function () { return sync__default['default'].postRender(_this.velocityCheck); };
+        this.scheduleVelocityCheck = function () { return sync__default["default"].postRender(_this.velocityCheck); };
         /**
          * Updates `prev` with `current` if the value hasn't been updated this frame.
          * This ensures velocity calculations return `0`.
@@ -713,7 +711,7 @@ var easingDefinitionToFunction = function (definition) {
     }
     else if (typeof definition === "string") {
         // Else lookup from table
-        heyListen.invariant(easingLookup[definition] !== undefined, "Invalid easing type '" + definition + "'");
+        heyListen.invariant(easingLookup[definition] !== undefined, "Invalid easing type '".concat(definition, "'"));
         return easingLookup[definition];
     }
     return definition;
@@ -896,6 +894,18 @@ function getAnimatableNone(key, value) {
     return (_a = defaultValueType.getAnimatableNone) === null || _a === void 0 ? void 0 : _a.call(defaultValueType, value);
 }
 
+var instantAnimationState = {
+    current: false,
+};
+
+var isCustomValue = function (v) {
+    return Boolean(v && typeof v === "object" && v.mix && v.toValue);
+};
+var resolveFinalValueInKeyframes = function (v) {
+    // TODO maybe throw if v.length - 1 is placeholder token?
+    return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
+};
+
 /**
  * Decide whether a transition is defined on a given Transition.
  * This filters out orchestration options and returns true
@@ -1013,7 +1023,7 @@ function getAnimation(key, value, target, transition, onComplete) {
         target = getZeroUnit(origin);
     }
     var isOriginAnimatable = isAnimatable(key, origin);
-    heyListen.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.");
+    heyListen.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,
@@ -1037,9 +1047,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 () { } };
     }
@@ -1071,6 +1082,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;
@@ -1145,7 +1159,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)
@@ -1602,17 +1616,17 @@ function buildProjectionTransform(delta, treeScale, latestTransform) {
      */
     var xTranslate = delta.x.translate / treeScale.x;
     var yTranslate = delta.y.translate / treeScale.y;
-    var transform = "translate3d(" + xTranslate + "px, " + yTranslate + "px, 0) ";
+    var transform = "translate3d(".concat(xTranslate, "px, ").concat(yTranslate, "px, 0) ");
     if (latestTransform) {
         var rotate = latestTransform.rotate, rotateX = latestTransform.rotateX, rotateY = latestTransform.rotateY;
         if (rotate)
-            transform += "rotate(" + rotate + "deg) ";
+            transform += "rotate(".concat(rotate, "deg) ");
         if (rotateX)
-            transform += "rotateX(" + rotateX + "deg) ";
+            transform += "rotateX(".concat(rotateX, "deg) ");
         if (rotateY)
-            transform += "rotateY(" + rotateY + "deg) ";
+            transform += "rotateY(".concat(rotateY, "deg) ");
     }
-    transform += "scale(" + delta.x.scale + ", " + delta.y.scale + ")";
+    transform += "scale(".concat(delta.x.scale, ", ").concat(delta.y.scale, ")");
     return transform === identityProjection ? "none" : transform;
 }
 
@@ -1685,14 +1699,6 @@ var FlatTree = /** @class */ (function () {
     return FlatTree;
 }());
 
-var isCustomValue = function (v) {
-    return Boolean(v && typeof v === "object" && v.mix && v.toValue);
-};
-var resolveFinalValueInKeyframes = function (v) {
-    // TODO maybe throw if v.length - 1 is placeholder token?
-    return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
-};
-
 /**
  * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself
  *
@@ -2051,7 +2057,7 @@ function createProjectionNode(_a) {
             this.sharedNodes.forEach(removeLeadSnapshots);
         };
         ProjectionNode.prototype.scheduleUpdateProjection = function () {
-            sync__default['default'].preRender(this.updateProjection, false, true);
+            sync__default["default"].preRender(this.updateProjection, false, true);
         };
         ProjectionNode.prototype.scheduleCheckAfterUnmount = function () {
             var _this = this;
@@ -2060,7 +2066,7 @@ function createProjectionNode(_a) {
              * we manually call didUpdate to give a chance to the siblings to animate.
              * Otherwise, cleanup all snapshots to prevents future nodes from reusing them.
              */
-            sync__default['default'].postRender(function () {
+            sync__default["default"].postRender(function () {
                 if (_this.isLayoutDirty) {
                     _this.root.didUpdate();
                 }
@@ -2460,7 +2466,7 @@ function createProjectionNode(_a) {
              * where the target is the same as when the animation started, so we can
              * calculate the relative positions correctly for instant transitions.
              */
-            this.pendingAnimation = sync__default['default'].update(function () {
+            this.pendingAnimation = sync__default["default"].update(function () {
                 globalProjectionState.hasAnimatedSinceResize = true;
                 _this.currentAnimation = animate(0, animationTarget, tslib.__assign(tslib.__assign({}, options), { onUpdate: function (latest) {
                         var _a;
@@ -2651,7 +2657,7 @@ function createProjectionNode(_a) {
                 styles.transform = transformTemplate(valuesToRender, styles.transform);
             }
             var _g = this.projectionDelta, x = _g.x, y = _g.y;
-            styles.transformOrigin = x.origin * 100 + "% " + y.origin * 100 + "% 0";
+            styles.transformOrigin = "".concat(x.origin * 100, "% ").concat(y.origin * 100, "% 0");
             if (lead.animationValues) {
                 /**
                  * If the lead component is animating, assign this either the entering/leaving
@@ -2857,7 +2863,7 @@ function mountNodeEarly(node, id) {
         }
     }
     var searchElement = searchNode && searchNode !== node.root ? searchNode.instance : document;
-    var element = searchElement.querySelector("[data-projection-id=\"" + id + "\"]");
+    var element = searchElement.querySelector("[data-projection-id=\"".concat(id, "\"]"));
     if (element)
         node.mount(element, true);
 }
@@ -2940,7 +2946,7 @@ var VisualElementHandler = /** @class */ (function (_super) {
         return this.props.children;
     };
     return VisualElementHandler;
-}(React__default['default'].Component));
+}(React__default["default"].Component));
 
 /**
  * Create a `motion` component.
@@ -3006,7 +3012,7 @@ function createMotionComponent(_a) {
          */
         return (React__namespace.createElement(VisualElementHandler, { visualElement: context.visualElement, props: tslib.__assign(tslib.__assign({}, config), props) },
             features,
-            React__namespace.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, config.isStatic))));
+            React__namespace.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, config.isStatic, context.visualElement))));
     }
     return React.forwardRef(MotionComponent);
 }
@@ -3038,6 +3044,9 @@ function createMotionProxy(createConfig) {
         if (customMotionComponentConfig === void 0) { customMotionComponentConfig = {}; }
         return createMotionComponent(createConfig(Component, customMotionComponentConfig));
     }
+    if (typeof Proxy === "undefined") {
+        return custom;
+    }
     /**
      * A cache of generated `motion` components, e.g `motion.div`, `motion.input` etc.
      * Rather than generating them anew every render.
@@ -3154,7 +3163,7 @@ function buildTransform(_a, _b, transformIsDefault, transformTemplate) {
     var numTransformKeys = transformKeys.length;
     for (var i = 0; i < numTransformKeys; i++) {
         var key = transformKeys[i];
-        transformString += (translateAlias[key] || key) + "(" + transform[key] + ") ";
+        transformString += "".concat(translateAlias[key] || key, "(").concat(transform[key], ") ");
         if (key === "z")
             transformHasZ = true;
     }
@@ -3180,7 +3189,7 @@ function buildTransform(_a, _b, transformIsDefault, transformTemplate) {
  */
 function buildTransformOrigin(_a) {
     var _b = _a.originX, originX = _b === void 0 ? "50%" : _b, _c = _a.originY, originY = _c === void 0 ? "50%" : _c, _d = _a.originZ, originZ = _d === void 0 ? 0 : _d;
-    return originX + " " + originY + " " + originZ;
+    return "".concat(originX, " ").concat(originY, " ").concat(originZ);
 }
 
 /**
@@ -3302,17 +3311,19 @@ function useHTMLProps(props, visualState, isStatic) {
     // The `any` isn't ideal but it is the type of createElement props argument
     var htmlProps = {};
     var style = useStyle(props, visualState, isStatic);
-    if (Boolean(props.drag)) {
+    if (Boolean(props.drag) && props.dragListener !== false) {
         // Disable the ghost element when a user drags
         htmlProps.draggable = false;
         // Disable text selection
-        style.userSelect = style.WebkitUserSelect = style.WebkitTouchCallout =
-            "none";
+        style.userSelect =
+            style.WebkitUserSelect =
+                style.WebkitTouchCallout =
+                    "none";
         // Disable scrolling on the draggable direction
         style.touchAction =
             props.drag === true
                 ? "none"
-                : "pan-" + (props.drag === "x" ? "y" : "x");
+                : "pan-".concat(props.drag === "x" ? "y" : "x");
     }
     htmlProps.style = style;
     return htmlProps;
@@ -3337,6 +3348,7 @@ var validMotionProps = new Set([
     "inherit",
     "layout",
     "layoutId",
+    "layoutDependency",
     "onLayoutAnimationComplete",
     "onLayoutMeasure",
     "onBeforeLayoutMeasure",
@@ -3426,7 +3438,9 @@ function filterProps(props, isDom, forwardMotionProps) {
     for (var key in props) {
         if (shouldForward(key) ||
             (forwardMotionProps === true && isValidMotionProp(key)) ||
-            (!isDom && !isValidMotionProp(key))) {
+            (!isDom && !isValidMotionProp(key)) ||
+            // If trying to use native HTML drag events, forward drag listeners
+            (props["draggable"] && key.startsWith("onDrag"))) {
             filteredProps[key] = props[key];
         }
     }
@@ -3445,7 +3459,7 @@ function calcOrigin$1(origin, offset, size) {
 function calcSVGTransformOrigin(dimensions, originX, originY) {
     var pxOriginX = calcOrigin$1(originX, dimensions.x, dimensions.width);
     var pxOriginY = calcOrigin$1(originY, dimensions.y, dimensions.height);
-    return pxOriginX + " " + pxOriginY;
+    return "".concat(pxOriginX, " ").concat(pxOriginY);
 }
 
 var dashKeys = {
@@ -3477,7 +3491,7 @@ function buildSVGPath(attrs, length, spacing, offset, useDashCase) {
     // Build the dash array
     var pathLength = styleValueTypes.px.transform(length);
     var pathSpacing = styleValueTypes.px.transform(spacing);
-    attrs[keys.array] = pathLength + " " + pathSpacing;
+    attrs[keys.array] = "".concat(pathLength, " ").concat(pathSpacing);
 }
 
 /**
@@ -3638,13 +3652,17 @@ function makeState(_a, props, context, presenceContext) {
     }
     return state;
 }
-var makeUseVisualState = function (config) { return function (props, isStatic) {
-    var context = React.useContext(MotionContext);
-    var presenceContext = React.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 = React.useContext(MotionContext);
+        var presenceContext = React.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;
@@ -3662,7 +3680,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)) {
@@ -3672,8 +3691,22 @@ function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
             if (!resolved)
                 return;
             var transitionEnd = resolved.transitionEnd; resolved.transition; var target = tslib.__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];
         });
@@ -3954,8 +3987,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) {
@@ -4035,8 +4071,11 @@ function useTapGesture(_a) {
             return;
         isPressing.current = true;
         cancelPointerEndListeners.current = popmotion.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);
@@ -4157,7 +4196,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]);
@@ -4186,7 +4225,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]);
@@ -4340,9 +4379,7 @@ function setMotionValue(visualElement, key, value) {
 }
 function setTarget(visualElement, definition) {
     var resolved = resolveVariant(visualElement, definition);
-    var _a = resolved
-        ? visualElement.makeTargetAnimatable(resolved, false)
-        : {}, _b = _a.transitionEnd, transitionEnd = _b === void 0 ? {} : _b; _a.transition; var target = tslib.__rest(_a, ["transitionEnd", "transition"]);
+    var _a = resolved ? visualElement.makeTargetAnimatable(resolved, false) : {}, _b = _a.transitionEnd, transitionEnd = _b === void 0 ? {} : _b; _a.transition; var target = tslib.__rest(_a, ["transitionEnd", "transition"]);
     target = tslib.__assign(tslib.__assign({}, target), transitionEnd);
     for (var key in target) {
         var value = resolveFinalValueInKeyframes(target[key]);
@@ -4696,7 +4733,8 @@ function createAnimationState(visualElement) {
              * a changed value or a value that was removed in a higher priority, we set
              * this to true and add this prop to the animation list.
              */
-            var shouldAnimateType = variantsHaveChanged(typeState.prevProp, prop) ||
+            var variantDidChange = checkVariantsDidChange(typeState.prevProp, prop);
+            var shouldAnimateType = variantDidChange ||
                 // If we're making this variant active, we want to always make it active
                 (type === changedActiveType &&
                     typeState.isActive &&
@@ -4747,7 +4785,7 @@ function createAnimationState(visualElement) {
                      * detect whether any value has changed. If it has, we animate it.
                      */
                     if (isKeyframesTarget(next) && isKeyframesTarget(prev)) {
-                        if (!shallowCompare(next, prev)) {
+                        if (!shallowCompare(next, prev) || variantDidChange) {
                             markToAnimate(key);
                         }
                         else {
@@ -4864,7 +4902,7 @@ function createAnimationState(visualElement) {
         getState: function () { return state; },
     };
 }
-function variantsHaveChanged(prev, next) {
+function checkVariantsDidChange(prev, next) {
     if (typeof next === "string") {
         return next !== prev;
     }
@@ -4977,7 +5015,7 @@ var PanSession = /** @class */ (function () {
                 return;
             }
             // Throttle mouse move event to once per frame
-            sync__default['default'].update(_this.updatePoint, true);
+            sync__default["default"].update(_this.updatePoint, true);
         };
         this.handlePointerUp = function (event, info) {
             _this.end();
@@ -5882,7 +5920,7 @@ var visualElement = function (_a) {
         function bindToMotionValue(key, value) {
             var removeOnChange = value.onChange(function (latestValue) {
                 latestValues[key] = latestValue;
-                props.onUpdate && sync__default['default'].update(update, false, true);
+                props.onUpdate && sync__default["default"].update(update, false, true);
             });
             var removeOnRenderRequest = value.onRenderRequest(element.scheduleRender);
             valueSubscriptions.set(key, function () {
@@ -6141,7 +6179,7 @@ var visualElement = function (_a) {
              * Schedule a render on the next animation frame.
              */
             scheduleRender: function () {
-                sync__default['default'].render(render, false, true);
+                sync__default["default"].render(render, false, true);
             }, 
             /**
              * Synchronously fire render. It's prefered that we batch renders but
@@ -6223,7 +6261,7 @@ function parseCSSVariable(current) {
 var maxDepth = 4;
 function getVariableValue(current, element, depth) {
     if (depth === void 0) { depth = 1; }
-    heyListen.invariant(depth <= maxDepth, "Max CSS variable fallback depth detected in property \"" + current + "\". This may indicate a circular fallback dependency.");
+    heyListen.invariant(depth <= maxDepth, "Max CSS variable fallback depth detected in property \"".concat(current, "\". This may indicate a circular fallback dependency."));
     var _a = tslib.__read(parseCSSVariable(current), 2), token = _a[0], fallback = _a[1];
     // No CSS variable detected
     if (!token)
@@ -6250,7 +6288,7 @@ function resolveCSSVariables(visualElement, _a, transitionEnd) {
     var _b;
     var target = tslib.__rest(_a, []);
     var element = visualElement.getInstance();
-    if (!(element instanceof HTMLElement))
+    if (!(element instanceof Element))
         return { target: target, transitionEnd: transitionEnd };
     // If `transitionEnd` isn't `undefined`, clone it. We could clone `target` and `transitionEnd`
     // only if they change but I think this reads clearer and this isn't a performance-critical path.
@@ -6697,7 +6735,7 @@ var correctBorderRadius = {
          */
         var x = pixelsToPercent(latest, node.target.x);
         var y = pixelsToPercent(latest, node.target.y);
-        return x + "% " + y + "%";
+        return "".concat(x, "% ").concat(y, "%");
     },
 };
 
@@ -6815,7 +6853,7 @@ var MeasureLayoutWithContext = /** @class */ (function (_super) {
                  * it's in charge of the exit animation and therefore should
                  * be in charge of the safe to remove. Otherwise we call it here.
                  */
-                sync__default['default'].postRender(function () {
+                sync__default["default"].postRender(function () {
                     var _a;
                     if (!((_a = projection.getStack()) === null || _a === void 0 ? void 0 : _a.members.length)) {
                         _this.safeToRemove();
@@ -6853,11 +6891,11 @@ var MeasureLayoutWithContext = /** @class */ (function (_super) {
         return null;
     };
     return MeasureLayoutWithContext;
-}(React__default['default'].Component));
+}(React__default["default"].Component));
 function MeasureLayout(props) {
     var _a = tslib.__read(usePresence(), 2), isPresent = _a[0], safeToRemove = _a[1];
     var layoutGroup = React.useContext(LayoutGroupContext);
-    return (React__default['default'].createElement(MeasureLayoutWithContext, tslib.__assign({}, props, { layoutGroup: layoutGroup, switchLayoutGroup: React.useContext(SwitchLayoutGroupContext), isPresent: isPresent, safeToRemove: safeToRemove })));
+    return (React__default["default"].createElement(MeasureLayoutWithContext, tslib.__assign({}, props, { layoutGroup: layoutGroup, switchLayoutGroup: React.useContext(SwitchLayoutGroupContext), isPresent: isPresent, safeToRemove: safeToRemove })));
 }
 var defaultScaleCorrectors = {
     borderRadius: tslib.__assign(tslib.__assign({}, correctBorderRadius), { applyTo: [
@@ -6945,15 +6983,18 @@ function createDomMotionComponent(key) {
 var m = createMotionProxy(createDomMotionConfig);
 
 function useForceUpdate() {
-    var unloadingRef = React.useRef(false);
+    var isUnmountingRef = React.useRef(false);
     var _a = tslib.__read(React.useState(0), 2), forcedRenderCount = _a[0], setForcedRenderCount = _a[1];
-    useUnmountEffect(function () { return (unloadingRef.current = true); });
-    return [
-        React.useCallback(function () {
-            !unloadingRef.current && setForcedRenderCount(forcedRenderCount + 1);
-        }, [forcedRenderCount]),
-        forcedRenderCount,
-    ];
+    useUnmountEffect(function () { return (isUnmountingRef.current = true); });
+    var forceRender = React.useCallback(function () {
+        !isUnmountingRef.current && setForcedRenderCount(forcedRenderCount + 1);
+    }, [forcedRenderCount]);
+    /**
+     * Defer this to the end of the next animation frame in case there are multiple
+     * synchronous calls.
+     */
+    var deferredForceRender = React.useCallback(function () { return sync__default["default"].postRender(forceRender); }, [forceRender]);
+    return [deferredForceRender, forcedRenderCount];
 }
 
 var presenceId = 0;
@@ -7026,7 +7067,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);
         }
@@ -7227,7 +7268,7 @@ var LayoutGroup = function (_a) {
 var id = 0;
 var AnimateSharedLayout = function (_a) {
     var children = _a.children;
-    return (React__namespace.createElement(LayoutGroup, { id: useConstant(function () { return "asl-" + id++; }) }, children));
+    return (React__namespace.createElement(LayoutGroup, { id: useConstant(function () { return "asl-".concat(id++); }) }, children));
 };
 
 /**
@@ -7486,7 +7527,7 @@ function useCombineMotionValues(values, combineValues) {
      * Subscribe to all motion values found within the template. Whenever any of them change,
      * schedule an update.
      */
-    useMultiOnChange(values, function () { return sync__default['default'].update(updateValue, false, true); });
+    useMultiOnChange(values, function () { return sync__default["default"].update(updateValue, false, true); });
     return value;
 }
 
@@ -7518,7 +7559,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 = tslib.__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 = tslib.__rest(_a, ["children", "style", "value", "as", "onDrag"]);
     var Component = useConstant(function () { return motion(as); });
     var context = React.useContext(ReorderContext);
     var point = {
@@ -7527,7 +7568,7 @@ function ReorderItem(_a, externalRef) {
     };
     var zIndex = useTransform([point.x, point.y], function (_a) {
         var _b = tslib.__read(_a, 2), latestX = _b[0], latestY = _b[1];
-        return latestX || latestY ? 1 : 0;
+        return latestX || latestY ? 1 : "unset";
     });
     var layout = React.useRef(null);
     heyListen.invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");
@@ -7535,10 +7576,11 @@ function ReorderItem(_a, externalRef) {
     React.useEffect(function () {
         registerItem(value, layout.current);
     }, [context]);
-    return (React__namespace.createElement(Component, tslib.__assign({ drag: axis }, props, { dragSnapToOrigin: true, style: tslib.__assign(tslib.__assign({}, style), { x: point.x, y: point.y, zIndex: zIndex }), layout: true, onDrag: function (_event, _a) {
-            var velocity = _a.velocity;
+    return (React__namespace.createElement(Component, tslib.__assign({ drag: axis }, props, { dragSnapToOrigin: true, style: tslib.__assign(tslib.__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));
@@ -8100,6 +8142,26 @@ function startTransition(cb) {
     cb === null || cb === void 0 ? void 0 : cb();
 }
 
+function useInstantTransition() {
+    var _a = tslib.__read(useForceUpdate(), 2), forceUpdate = _a[0], forcedRenderCount = _a[1];
+    var startInstantLayoutTransition = useInstantLayoutTransition();
+    React.useEffect(function () {
+        /**
+         * Unblock after two animation frames, otherwise this will unblock too soon.
+         */
+        sync__default["default"].postRender(function () {
+            return sync__default["default"].postRender(function () { return (instantAnimationState.current = false); });
+        });
+    }, [forcedRenderCount]);
+    return function (callback) {
+        startInstantLayoutTransition(function () {
+            instantAnimationState.current = true;
+            forceUpdate();
+            callback();
+        });
+    };
+}
+
 function useResetProjection() {
     var reset = React__namespace.useCallback(function () {
         var root = rootProjectionNode.current;
@@ -8243,6 +8305,7 @@ exports.useDomEvent = useDomEvent;
 exports.useDragControls = useDragControls;
 exports.useElementScroll = useElementScroll;
 exports.useInstantLayoutTransition = useInstantLayoutTransition;
+exports.useInstantTransition = useInstantTransition;
 exports.useIsPresent = useIsPresent;
 exports.useMotionTemplate = useMotionTemplate;
 exports.useMotionValue = useMotionValue;