framer-motion 5.3.0 → 5.4.0-beta

package/dist/es/projection/styles/scale-border-radius.mjs

@@ -34,7 +34,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, "%");
     },
 };
 

package/dist/es/projection/styles/transform.mjs

@@ -8,17 +8,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;
 }
 

package/dist/es/render/dom/motion-proxy.mjs

@@ -19,6 +19,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.

package/dist/es/render/dom/utils/css-variables-conversion.mjs

@@ -24,7 +24,7 @@ function parseCSSVariable(current) {
 var maxDepth = 4;
 function getVariableValue(current, element, depth) {
     if (depth === void 0) { depth = 1; }
-    invariant(depth <= maxDepth, "Max CSS variable fallback depth detected in property \"" + current + "\". This may indicate a circular fallback dependency.");
+    invariant(depth <= maxDepth, "Max CSS variable fallback depth detected in property \"".concat(current, "\". This may indicate a circular fallback dependency."));
     var _a = __read(parseCSSVariable(current), 2), token = _a[0], fallback = _a[1];
     // No CSS variable detected
     if (!token)
@@ -51,7 +51,7 @@ function resolveCSSVariables(visualElement, _a, transitionEnd) {
     var _b;
     var target = __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.

package/dist/es/render/dom/utils/filter-props.mjs

@@ -34,7 +34,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];
         }
     }

package/dist/es/render/dom/value-types/dimensions.mjs

@@ -1,16 +1,9 @@
 import { number, px, percent, degrees, vw, vh } from 'style-value-types';
-import { testValueType } from './test.mjs';
 import { auto } from './type-auto.mjs';
 
 /**
  * A list of value types commonly used for dimensions
  */
 var dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];
-/**
- * Tests a dimensional value against the list of dimension ValueTypes
- */
-var findDimensionValueType = function (v) {
-    return dimensionValueTypes.find(testValueType(v));
-};
 
-export { dimensionValueTypes, findDimensionValueType };
+export { dimensionValueTypes };

package/dist/es/render/html/use-props.mjs

@@ -38,17 +38,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;

package/dist/es/render/html/utils/build-transform.mjs

@@ -26,7 +26,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;
     }
@@ -52,7 +52,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);
 }
 
 export { buildTransform, buildTransformOrigin };

package/dist/es/render/svg/utils/path.mjs

@@ -29,7 +29,7 @@ function buildSVGPath(attrs, length, spacing, offset, useDashCase) {
     // Build the dash array
     var pathLength = px.transform(length);
     var pathSpacing = px.transform(spacing);
-    attrs[keys.array] = pathLength + " " + pathSpacing;
+    attrs[keys.array] = "".concat(pathLength, " ").concat(pathSpacing);
 }
 
 export { buildSVGPath };

package/dist/es/render/svg/utils/transform-origin.mjs

@@ -12,7 +12,7 @@ function calcOrigin(origin, offset, size) {
 function calcSVGTransformOrigin(dimensions, originX, originY) {
     var pxOriginX = calcOrigin(originX, dimensions.x, dimensions.width);
     var pxOriginY = calcOrigin(originY, dimensions.y, dimensions.height);
-    return pxOriginX + " " + pxOriginY;
+    return "".concat(pxOriginX, " ").concat(pxOriginY);
 }
 
 export { calcSVGTransformOrigin };

package/dist/es/render/three/create-visual-element.mjs

@@ -0,0 +1,42 @@
+import { visualElement } from '../index.mjs';
+import { createBox } from '../../projection/geometry/models.mjs';
+import { checkTargetForNewValues } from '../utils/setters.mjs';
+import { setThreeValue } from './utils/set-value.mjs';
+import { readThreeValue } from './utils/read-value.mjs';
+
+var scrapeMotionValuesFromProps = function () { return ({}); };
+var createRenderState = function () { return ({}); };
+var threeVisualElement = visualElement({
+    treeType: "three",
+    readValueFromInstance: readThreeValue,
+    getBaseTarget: function (_props, _key) {
+        return 0;
+    },
+    sortNodePosition: function (_a, _b) {
+        return 0;
+    },
+    makeTargetAnimatable: function (element, target) {
+        checkTargetForNewValues(element, target, {});
+        return target;
+    },
+    restoreTransform: function () { },
+    resetTransform: function () { },
+    removeValueFromRenderState: function (_key, _renderState) { },
+    measureViewportBox: createBox,
+    scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
+    build: function (_element, state, latestValues) {
+        for (var key in latestValues) {
+            state[key] = latestValues[key];
+        }
+    },
+    render: function (instance, renderState) {
+        for (var key in renderState) {
+            setThreeValue(instance, key, renderState);
+        }
+    },
+});
+var createVisualElement = function (_, options) {
+    return threeVisualElement(options);
+};
+
+export { createRenderState, createVisualElement, scrapeMotionValuesFromProps, threeVisualElement };

package/dist/es/render/three/gestures/use-hover.mjs

@@ -0,0 +1,22 @@
+import { AnimationType } from '../../utils/types.mjs';
+
+function useHover(isStatic, _a, visualElement) {
+    var whileHover = _a.whileHover, onHoverStart = _a.onHoverStart, onHoverEnd = _a.onHoverEnd, onPointerOver = _a.onPointerOver, onPointerOut = _a.onPointerOut;
+    var isHoverEnabled = whileHover || onHoverStart || onHoverEnd;
+    if (isStatic || !visualElement || !isHoverEnabled)
+        return {};
+    return {
+        onPointerOver: function (event) {
+            var _a;
+            (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Hover, true);
+            onPointerOver === null || onPointerOver === void 0 ? void 0 : onPointerOver(event);
+        },
+        onPointerOut: function (event) {
+            var _a;
+            (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Hover, false);
+            onPointerOut === null || onPointerOut === void 0 ? void 0 : onPointerOut(event);
+        },
+    };
+}
+
+export { useHover };

package/dist/es/render/three/gestures/use-tap.mjs

@@ -0,0 +1,56 @@
+import { pipe } from 'popmotion';
+import { useRef } from 'react';
+import { wrapHandler } from '../../../events/event-info.mjs';
+import { addPointerEvent } from '../../../events/use-pointer-event.mjs';
+import { isDragActive } from '../../../gestures/drag/utils/lock.mjs';
+import { AnimationType } from '../../utils/types.mjs';
+
+function useTap(isStatic, _a, visualElement) {
+    var whileTap = _a.whileTap, onTapStart = _a.onTapStart, onTap = _a.onTap, onTapCancel = _a.onTapCancel, onPointerDown = _a.onPointerDown;
+    var isTapEnabled = onTap || onTapStart || onTapCancel || whileTap;
+    var isPressing = useRef(false);
+    var cancelPointerEndListeners = useRef(null);
+    if (isStatic || !visualElement || !isTapEnabled)
+        return {};
+    function removePointerEndListener() {
+        var _a;
+        (_a = cancelPointerEndListeners.current) === null || _a === void 0 ? void 0 : _a.call(cancelPointerEndListeners);
+        cancelPointerEndListeners.current = null;
+    }
+    function checkPointerEnd() {
+        var _a;
+        removePointerEndListener();
+        isPressing.current = false;
+        (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Tap, false);
+        return !isDragActive();
+    }
+    function onPointerUp(event, info) {
+        if (!checkPointerEnd())
+            return;
+        /**
+         * We only count this as a tap gesture if the event.target is the same
+         * as, or a child of, this component's element
+         */
+        onTap === null || onTap === void 0 ? void 0 : onTap(event, info);
+    }
+    function onPointerCancel(event, info) {
+        if (!checkPointerEnd())
+            return;
+        onTapCancel === null || onTapCancel === void 0 ? void 0 : onTapCancel(event, info);
+    }
+    return {
+        onPointerDown: wrapHandler(function (event, info) {
+            var _a;
+            removePointerEndListener();
+            if (isPressing.current)
+                return;
+            isPressing.current = true;
+            cancelPointerEndListeners.current = pipe(addPointerEvent(window, "pointerup", onPointerUp), addPointerEvent(window, "pointercancel", onPointerCancel));
+            (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Tap, true);
+            onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
+            onTapStart === null || onTapStart === void 0 ? void 0 : onTapStart(event, info);
+        }, true),
+    };
+}
+
+export { useTap };

package/dist/es/render/three/motion.mjs

@@ -0,0 +1,30 @@
+import { __assign } from 'tslib';
+import { createMotionComponent } from '../../motion/index.mjs';
+import { animations } from '../../motion/features/animations.mjs';
+import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';
+import { useRender } from './use-render.mjs';
+import { scrapeMotionValuesFromProps, createRenderState, createVisualElement } from './create-visual-element.mjs';
+
+var useVisualState = makeUseVisualState({
+    scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
+    createRenderState: createRenderState,
+});
+var preloadedFeatures = __assign({}, animations);
+function custom(Component) {
+    return createMotionComponent({
+        Component: Component,
+        preloadedFeatures: preloadedFeatures,
+        useRender: useRender,
+        useVisualState: useVisualState,
+        createVisualElement: createVisualElement,
+    });
+}
+var componentCache = new Map();
+var motion = new Proxy(custom, {
+    get: function (_, key) {
+        !componentCache.has(key) && componentCache.set(key, custom(key));
+        return componentCache.get(key);
+    },
+});
+
+export { motion };

package/dist/es/render/three/use-render.mjs

@@ -0,0 +1,11 @@
+import { __assign } from 'tslib';
+import { createElement } from 'react';
+import { filterProps } from '../dom/utils/filter-props.mjs';
+import { useHover } from './gestures/use-hover.mjs';
+import { useTap } from './gestures/use-tap.mjs';
+
+var useRender = function (Component, props, _projectionId, ref, _state, isStatic, visualElement) {
+    return createElement(Component, __assign(__assign(__assign(__assign({ ref: ref }, filterProps(props, false, false)), { onUpdate: props.onInstanceUpdate }), useHover(isStatic, props, visualElement)), useTap(isStatic, props, visualElement)));
+};
+
+export { useRender };

package/dist/es/render/three/utils/read-value.mjs

@@ -0,0 +1,43 @@
+import { Color } from 'three';
+
+var readVector = function (name, defaultValue) {
+    return function (axis) {
+        return function (instance) {
+            var value = instance[name];
+            return value ? value[axis] : defaultValue;
+        };
+    };
+};
+var readPosition = readVector("position", 0);
+var readScale = readVector("scale", 1);
+var readRotation = readVector("rotation", 0);
+var readers = {
+    x: readPosition("x"),
+    y: readPosition("y"),
+    z: readPosition("z"),
+    scale: readScale("x"),
+    scaleX: readScale("x"),
+    scaleY: readScale("y"),
+    scaleZ: readScale("z"),
+    rotateX: readRotation("x"),
+    rotateY: readRotation("y"),
+    rotateZ: readRotation("z"),
+};
+function readAnimatableValue(value) {
+    if (!value)
+        return;
+    if (value instanceof Color) {
+        return value.getStyle();
+    }
+    else {
+        return value;
+    }
+}
+function readThreeValue(instance, name) {
+    var _a;
+    return readers[name]
+        ? readers[name](instance)
+        : (_a = readAnimatableValue(instance[name])) !== null && _a !== void 0 ? _a : 0;
+}
+
+export { readThreeValue };

package/dist/es/render/three/utils/set-value.mjs

@@ -0,0 +1,59 @@
+import { Vector3, Euler, Color } from 'three';
+
+var setVector = function (name, defaultValue) {
+    return function (i) {
+        return function (instance, value) {
+            var _a;
+            (_a = instance[name]) !== null && _a !== void 0 ? _a : (instance[name] = new Vector3(defaultValue));
+            var vector = instance[name];
+            vector.setComponent(i, value);
+        };
+    };
+};
+var setEuler = function (name, defaultValue) {
+    return function (axis) {
+        return function (instance, value) {
+            var _a;
+            (_a = instance[name]) !== null && _a !== void 0 ? _a : (instance[name] = new Euler(defaultValue));
+            var euler = instance[name];
+            euler[axis] = value;
+        };
+    };
+};
+var setColor = function (name) { return function (instance, value) {
+    var _a;
+    (_a = instance[name]) !== null && _a !== void 0 ? _a : (instance[name] = new Color(value));
+    instance[name].set(value);
+}; };
+var setScale = setVector("scale", 1);
+var setPosition = setVector("position", 0);
+var setRotation = setEuler("rotation", 0);
+var setters = {
+    x: setPosition(0),
+    y: setPosition(1),
+    z: setPosition(2),
+    scale: function (instance, value) {
+        var _a;
+        (_a = instance.scale) !== null && _a !== void 0 ? _a : (instance.scale = new Vector3(1));
+        var scale = instance.scale;
+        scale.set(value, value, value);
+    },
+    scaleX: setScale(0),
+    scaleY: setScale(1),
+    scaleZ: setScale(2),
+    rotateX: setRotation("x"),
+    rotateY: setRotation("y"),
+    rotateZ: setRotation("z"),
+    color: setColor("color"),
+    specular: setColor("specular"),
+};
+function setThreeValue(instance, key, values) {
+    if (setters[key]) {
+        setters[key](instance, values[key]);
+    }
+    else {
+        instance[key] = values[key];
+    }
+}
+
+export { setThreeValue };

package/dist/es/render/utils/animation-state.mjs

@@ -135,7 +135,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 &&
@@ -186,7 +187,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 {
@@ -303,7 +304,7 @@ function createAnimationState(visualElement) {
         getState: function () { return state; },
     };
 }
-function variantsHaveChanged(prev, next) {
+function checkVariantsDidChange(prev, next) {
     if (typeof next === "string") {
         return next !== prev;
     }
@@ -334,4 +335,4 @@ function createState() {
         _a;
 }
 
-export { createAnimationState, variantPriorityOrder, variantsHaveChanged };
+export { checkVariantsDidChange, createAnimationState, variantPriorityOrder };

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

@@ -119,9 +119,6 @@ function animateChildren(visualElement, variant, delayChildren, staggerChildren,
     });
     return Promise.all(animations);
 }
-function stopAnimation(visualElement) {
-    visualElement.forEachValue(function (value) { return value.stop(); });
-}
 function sortByTreeOrder(a, b) {
     return a.sortNodePosition(b);
 }
@@ -138,4 +135,4 @@ function shouldBlockAnimation(_a, key) {
     return shouldBlock;
 }
 
-export { animateVisualElement, sortByTreeOrder, stopAnimation };
+export { animateVisualElement, sortByTreeOrder };

package/dist/es/render/utils/setters.mjs

@@ -1,4 +1,4 @@
-import { __rest, __assign, __spreadArray, __read } from 'tslib';
+import { __rest, __assign } from 'tslib';
 import { complex } from 'style-value-types';
 import { isNumericalString } from '../../utils/is-numerical-string.mjs';
 import { isZeroValueString } from '../../utils/is-zero-value-string.mjs';
@@ -22,37 +22,13 @@ 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 = __rest(_a, ["transitionEnd", "transition"]);
+    var _a = resolved ? visualElement.makeTargetAnimatable(resolved, false) : {}, _b = _a.transitionEnd, transitionEnd = _b === void 0 ? {} : _b; _a.transition; var target = __rest(_a, ["transitionEnd", "transition"]);
     target = __assign(__assign({}, target), transitionEnd);
     for (var key in target) {
         var value = resolveFinalValueInKeyframes(target[key]);
         setMotionValue(visualElement, key, value);
     }
 }
-function setVariants(visualElement, variantLabels) {
-    var reversedLabels = __spreadArray([], __read(variantLabels), false).reverse();
-    reversedLabels.forEach(function (key) {
-        var _a;
-        var variant = visualElement.getVariant(key);
-        variant && setTarget(visualElement, variant);
-        (_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.forEach(function (child) {
-            setVariants(child, variantLabels);
-        });
-    });
-}
-function setValues(visualElement, definition) {
-    if (Array.isArray(definition)) {
-        return setVariants(visualElement, definition);
-    }
-    else if (typeof definition === "string") {
-        return setVariants(visualElement, [definition]);
-    }
-    else {
-        setTarget(visualElement, definition);
-    }
-}
 function checkTargetForNewValues(visualElement, target, origin) {
     var _a, _b, _c;
     var _d;
@@ -98,20 +74,5 @@ function checkTargetForNewValues(visualElement, target, origin) {
         visualElement.setBaseTarget(key, value);
     }
 }
-function getOriginFromTransition(key, transition) {
-    if (!transition)
-        return;
-    var valueTransition = transition[key] || transition["default"] || transition;
-    return valueTransition.from;
-}
-function getOrigin(target, transition, visualElement) {
-    var _a, _b;
-    var origin = {};
-    for (var key in target) {
-        origin[key] =
-            (_a = getOriginFromTransition(key, transition)) !== null && _a !== void 0 ? _a : (_b = visualElement.getValue(key)) === null || _b === void 0 ? void 0 : _b.get();
-    }
-    return origin;
-}
 
-export { checkTargetForNewValues, getOrigin, getOriginFromTransition, setTarget, setValues };
+export { checkTargetForNewValues, setTarget };

package/dist/es/three-entry.mjs

@@ -0,0 +1 @@
+export { motion } from './render/three/motion.mjs';

package/dist/es/utils/array.mjs

@@ -1,4 +1,4 @@
-import { __read } from 'tslib';
+import 'tslib';
 
 function addUniqueItem(arr, item) {
     arr.indexOf(item) === -1 && arr.push(item);
@@ -7,16 +7,5 @@ function removeItem(arr, item) {
     var index = arr.indexOf(item);
     index > -1 && arr.splice(index, 1);
 }
-// Adapted from array-move
-function moveItem(_a, fromIndex, toIndex) {
-    var _b = __read(_a), arr = _b.slice(0);
-    var startIndex = fromIndex < 0 ? arr.length + fromIndex : fromIndex;
-    if (startIndex >= 0 && startIndex < arr.length) {
-        var endIndex = toIndex < 0 ? arr.length + toIndex : toIndex;
-        var _c = __read(arr.splice(fromIndex, 1), 1), item = _c[0];
-        arr.splice(endIndex, 0, item);
-    }
-    return arr;
-}
 
-export { addUniqueItem, moveItem, removeItem };
+export { addUniqueItem, removeItem };

package/dist/es/utils/use-force-update.mjs

@@ -1,17 +1,21 @@
 import { __read } from 'tslib';
-import { useCallback, useRef, useState } from 'react';
+import sync from 'framesync';
+import { useRef, useState, useCallback } from 'react';
 import { useUnmountEffect } from './use-unmount-effect.mjs';
 
 function useForceUpdate() {
-    var unloadingRef = useRef(false);
+    var isUnmountingRef = useRef(false);
     var _a = __read(useState(0), 2), forcedRenderCount = _a[0], setForcedRenderCount = _a[1];
-    useUnmountEffect(function () { return (unloadingRef.current = true); });
-    return [
-        useCallback(function () {
-            !unloadingRef.current && setForcedRenderCount(forcedRenderCount + 1);
-        }, [forcedRenderCount]),
-        forcedRenderCount,
-    ];
+    useUnmountEffect(function () { return (isUnmountingRef.current = true); });
+    var forceRender = 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 = useCallback(function () { return sync.postRender(forceRender); }, [forceRender]);
+    return [deferredForceRender, forcedRenderCount];
 }
 
 export { useForceUpdate };

package/dist/es/utils/use-instant-transition-state.mjs

@@ -0,0 +1,5 @@
+var instantAnimationState = {
+    current: false,
+};
+
+export { instantAnimationState };

package/dist/es/utils/use-instant-transition.mjs

@@ -0,0 +1,28 @@
+import { __read } from 'tslib';
+import sync from 'framesync';
+import { useEffect } from 'react';
+import { useInstantLayoutTransition } from '../projection/use-instant-layout-transition.mjs';
+import { useForceUpdate } from './use-force-update.mjs';
+import { instantAnimationState } from './use-instant-transition-state.mjs';
+
+function useInstantTransition() {
+    var _a = __read(useForceUpdate(), 2), forceUpdate = _a[0], forcedRenderCount = _a[1];
+    var startInstantLayoutTransition = useInstantLayoutTransition();
+    useEffect(function () {
+        /**
+         * Unblock after two animation frames, otherwise this will unblock too soon.
+         */
+        sync.postRender(function () {
+            return sync.postRender(function () { return (instantAnimationState.current = false); });
+        });
+    }, [forcedRenderCount]);
+    return function (callback) {
+        startInstantLayoutTransition(function () {
+            instantAnimationState.current = true;
+            forceUpdate();
+            callback();
+        });
+    };
+}
+
+export { useInstantTransition };