framer-motion 5.5.4 → 5.5.7

package/dist/cjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var useMotionValue = require('./use-motion-value-3615b5bb.js');
+var useMotionValue = require('./use-motion-value-1c6ad062.js');
 var React = require('react');
 var styleValueTypes = require('style-value-types');
 var popmotion = require('popmotion');
@@ -2695,13 +2695,7 @@ function MotionConfig(_a) {
      * Creating a new config context object will re-render every `motion` component
      * every time it renders. So we only want to create a new one sparingly.
      */
-    var transitionDependency = typeof config.transition === "object"
-        ? config.transition.toString()
-        : "";
-    var context = React.useMemo(function () { return config; }, [
-        transitionDependency,
-        config.transformPagePoint,
-    ]);
+    var context = React.useMemo(function () { return config; }, [JSON.stringify(config.transition), config.transformPagePoint]);
     return (React__namespace.createElement(useMotionValue.MotionConfigContext.Provider, { value: context }, children));
 }
 

package/dist/cjs/three-entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var useMotionValue = require('./use-motion-value-3615b5bb.js');
+var useMotionValue = require('./use-motion-value-1c6ad062.js');
 var React = require('react');
 var popmotion = require('popmotion');
 var three = require('three');
@@ -295,6 +295,12 @@ var motion = new Proxy(custom, {
 
 var MotionCanvasContext = React.createContext(undefined);
 
+var devicePixelRatio = typeof window !== "undefined" ? window.devicePixelRatio : 1;
+var calculateDpr = function (dpr) {
+    return Array.isArray(dpr)
+        ? popmotion.clamp(dpr[0], dpr[1], devicePixelRatio)
+        : dpr || devicePixelRatio;
+};
 /**
  * This file contains a version of R3F's Canvas component that uses our projection
  * system for layout measurements instead of use-react-measure so we can keep the
@@ -368,7 +374,11 @@ function CanvasComponent(_a, forwardedRef) {
     if (size.width > 0 && size.height > 0) {
         fiber.render(React__namespace.createElement(ErrorBoundary, { set: setError },
             React__namespace.createElement(React__namespace.Suspense, { fallback: React__namespace.createElement(Block, { set: setBlock }) },
-                React__namespace.createElement(MotionCanvasContext.Provider, { value: { dimensions: dimensions, layoutCamera: layoutCamera } },
+                React__namespace.createElement(MotionCanvasContext.Provider, { value: {
+                        dimensions: dimensions,
+                        layoutCamera: layoutCamera,
+                        requestedDpr: calculateDpr(props.dpr),
+                    } },
                     React__namespace.createElement(useMotionValue.MotionConfigContext.Provider, { value: configContext },
                         React__namespace.createElement(useMotionValue.MotionContext.Provider, { value: motionContext }, children))))), canvasRef.current, tslib.__assign(tslib.__assign({}, props), { dpr: dpr || props.dpr, size: size, events: events || fiber.events }));
     }
@@ -392,7 +402,7 @@ function useLayoutCamera(_a, updateCamera) {
     var _b = _a.makeDefault, makeDefault = _b === void 0 ? true : _b;
     var context = React.useContext(MotionCanvasContext);
     heyListen.invariant(Boolean(context), "No MotionCanvas detected. Replace Canvas from @react-three/fiber with MotionCanvas from framer-motion.");
-    var _c = context, dimensions = _c.dimensions, layoutCamera = _c.layoutCamera;
+    var _c = context, dimensions = _c.dimensions, layoutCamera = _c.layoutCamera, requestedDpr = _c.requestedDpr;
     var advance = fiber.useThree(function (three) { return three.advance; });
     var set = fiber.useThree(function (three) { return three.set; });
     var camera = fiber.useThree(function (three) { return three.camera; });
@@ -418,7 +428,7 @@ function useLayoutCamera(_a, updateCamera) {
          */
         var removeLayoutMeasureListener = projection.addEventListener("measure", function (newLayout) {
             var newSize = calcBoxSize(newLayout);
-            var dpr = window.devicePixelRatio;
+            var dpr = requestedDpr;
             var _a = dimensions.current.size, width = _a.width, height = _a.height;
             var xScale = width / newSize.width;
             var yScale = height / newSize.height;
@@ -443,7 +453,7 @@ function useLayoutCamera(_a, updateCamera) {
                     updateCamera(newSize);
                     dimensions.current = { size: newSize };
                     gl.setSize(newSize.width, newSize.height);
-                    gl.setPixelRatio(window.devicePixelRatio);
+                    gl.setPixelRatio(requestedDpr);
                 }, 50);
             }
         });

package/dist/cjs/{use-motion-value-3615b5bb.js → use-motion-value-1c6ad062.js}

@@ -1139,6 +1139,12 @@ function animate(from, to, transition) {
 
 var borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
 var numBorders = borders.length;
+var asNumber = function (value) {
+    return typeof value === "string" ? parseFloat(value) : value;
+};
+var isPx = function (value) {
+    return typeof value === "number" || styleValueTypes.px.test(value);
+};
 function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {
     var _a, _b, _c, _d;
     if (shouldCrossfadeOpacity) {
@@ -1162,15 +1168,17 @@ function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnl
             continue;
         followRadius || (followRadius = 0);
         leadRadius || (leadRadius = 0);
-        /**
-         * Currently we're only crossfading between numerical border radius.
-         * It would be possible to crossfade between percentages for a little
-         * extra bundle size.
-         */
-        if (typeof followRadius === "number" &&
-            typeof leadRadius === "number") {
-            var radius = Math.max(popmotion.mix(followRadius, leadRadius, progress), 0);
-            target[borderLabel] = radius;
+        var canMix = followRadius === 0 ||
+            leadRadius === 0 ||
+            isPx(followRadius) === isPx(leadRadius);
+        if (canMix) {
+            target[borderLabel] = Math.max(popmotion.mix(asNumber(followRadius), asNumber(leadRadius), progress), 0);
+            if (styleValueTypes.percent.test(leadRadius) || styleValueTypes.percent.test(followRadius)) {
+                target[borderLabel] += "%";
+            }
+        }
+        else {
+            target[borderLabel] = leadRadius;
         }
     }
     /**

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

@@ -36,13 +36,7 @@ function MotionConfig(_a) {
      * Creating a new config context object will re-render every `motion` component
      * every time it renders. So we only want to create a new one sparingly.
      */
-    var transitionDependency = typeof config.transition === "object"
-        ? config.transition.toString()
-        : "";
-    var context = useMemo(function () { return config; }, [
-        transitionDependency,
-        config.transformPagePoint,
-    ]);
+    var context = useMemo(function () { return config; }, [JSON.stringify(config.transition), config.transformPagePoint]);
     return (React.createElement(MotionConfigContext.Provider, { value: context }, children));
 }
 

package/dist/es/components/three/MotionCanvas.mjs

@@ -8,7 +8,14 @@ import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs
 import { MotionConfigContext } from '../../context/MotionConfigContext.mjs';
 import { MotionCanvasContext } from './MotionCanvasContext.mjs';
 import { useForceUpdate } from '../../utils/use-force-update.mjs';
+import { clamp } from 'popmotion';
 
+var devicePixelRatio = typeof window !== "undefined" ? window.devicePixelRatio : 1;
+var calculateDpr = function (dpr) {
+    return Array.isArray(dpr)
+        ? clamp(dpr[0], dpr[1], devicePixelRatio)
+        : dpr || devicePixelRatio;
+};
 /**
  * This file contains a version of R3F's Canvas component that uses our projection
  * system for layout measurements instead of use-react-measure so we can keep the
@@ -82,7 +89,11 @@ function CanvasComponent(_a, forwardedRef) {
     if (size.width > 0 && size.height > 0) {
         render(React.createElement(ErrorBoundary, { set: setError },
             React.createElement(React.Suspense, { fallback: React.createElement(Block, { set: setBlock }) },
-                React.createElement(MotionCanvasContext.Provider, { value: { dimensions: dimensions, layoutCamera: layoutCamera } },
+                React.createElement(MotionCanvasContext.Provider, { value: {
+                        dimensions: dimensions,
+                        layoutCamera: layoutCamera,
+                        requestedDpr: calculateDpr(props.dpr),
+                    } },
                     React.createElement(MotionConfigContext.Provider, { value: configContext },
                         React.createElement(MotionContext.Provider, { value: motionContext }, children))))), canvasRef.current, __assign(__assign({}, props), { dpr: dpr || props.dpr, size: size, events: events$1 || events }));
     }

package/dist/es/components/three/use-layout-camera.mjs

@@ -17,7 +17,7 @@ function useLayoutCamera(_a, updateCamera) {
     var _b = _a.makeDefault, makeDefault = _b === void 0 ? true : _b;
     var context = useContext(MotionCanvasContext);
     invariant(Boolean(context), "No MotionCanvas detected. Replace Canvas from @react-three/fiber with MotionCanvas from framer-motion.");
-    var _c = context, dimensions = _c.dimensions, layoutCamera = _c.layoutCamera;
+    var _c = context, dimensions = _c.dimensions, layoutCamera = _c.layoutCamera, requestedDpr = _c.requestedDpr;
     var advance = useThree(function (three) { return three.advance; });
     var set = useThree(function (three) { return three.set; });
     var camera = useThree(function (three) { return three.camera; });
@@ -43,7 +43,7 @@ function useLayoutCamera(_a, updateCamera) {
          */
         var removeLayoutMeasureListener = projection.addEventListener("measure", function (newLayout) {
             var newSize = calcBoxSize(newLayout);
-            var dpr = window.devicePixelRatio;
+            var dpr = requestedDpr;
             var _a = dimensions.current.size, width = _a.width, height = _a.height;
             var xScale = width / newSize.width;
             var yScale = height / newSize.height;
@@ -68,7 +68,7 @@ function useLayoutCamera(_a, updateCamera) {
                     updateCamera(newSize);
                     dimensions.current = { size: newSize };
                     gl.setSize(newSize.width, newSize.height);
-                    gl.setPixelRatio(window.devicePixelRatio);
+                    gl.setPixelRatio(requestedDpr);
                 }, 50);
             }
         });

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

@@ -1,7 +1,14 @@
 import { mix, progress, linear, circOut } from 'popmotion';
+import { px, percent } from 'style-value-types';
 
 var borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
 var numBorders = borders.length;
+var asNumber = function (value) {
+    return typeof value === "string" ? parseFloat(value) : value;
+};
+var isPx = function (value) {
+    return typeof value === "number" || px.test(value);
+};
 function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {
     var _a, _b, _c, _d;
     if (shouldCrossfadeOpacity) {
@@ -25,15 +32,17 @@ function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnl
             continue;
         followRadius || (followRadius = 0);
         leadRadius || (leadRadius = 0);
-        /**
-         * Currently we're only crossfading between numerical border radius.
-         * It would be possible to crossfade between percentages for a little
-         * extra bundle size.
-         */
-        if (typeof followRadius === "number" &&
-            typeof leadRadius === "number") {
-            var radius = Math.max(mix(followRadius, leadRadius, progress), 0);
-            target[borderLabel] = radius;
+        var canMix = followRadius === 0 ||
+            leadRadius === 0 ||
+            isPx(followRadius) === isPx(leadRadius);
+        if (canMix) {
+            target[borderLabel] = Math.max(mix(asNumber(followRadius), asNumber(leadRadius), progress), 0);
+            if (percent.test(leadRadius) || percent.test(followRadius)) {
+                target[borderLabel] += "%";
+            }
+        }
+        else {
+            target[borderLabel] = leadRadius;
         }
     }
     /**

package/dist/framer-motion.dev.js

@@ -2374,6 +2374,12 @@
 
     var borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
     var numBorders = borders.length;
+    var asNumber = function (value) {
+        return typeof value === "string" ? parseFloat(value) : value;
+    };
+    var isPx = function (value) {
+        return typeof value === "number" || px.test(value);
+    };
     function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {
         var _a, _b, _c, _d;
         if (shouldCrossfadeOpacity) {
@@ -2397,15 +2403,17 @@
                 continue;
             followRadius || (followRadius = 0);
             leadRadius || (leadRadius = 0);
-            /**
-             * Currently we're only crossfading between numerical border radius.
-             * It would be possible to crossfade between percentages for a little
-             * extra bundle size.
-             */
-            if (typeof followRadius === "number" &&
-                typeof leadRadius === "number") {
-                var radius = Math.max(mix(followRadius, leadRadius, progress), 0);
-                target[borderLabel] = radius;
+            var canMix = followRadius === 0 ||
+                leadRadius === 0 ||
+                isPx(followRadius) === isPx(leadRadius);
+            if (canMix) {
+                target[borderLabel] = Math.max(mix(asNumber(followRadius), asNumber(leadRadius), progress), 0);
+                if (percent.test(leadRadius) || percent.test(followRadius)) {
+                    target[borderLabel] += "%";
+                }
+            }
+            else {
+                target[borderLabel] = leadRadius;
             }
         }
         /**
@@ -8535,13 +8543,7 @@
          * Creating a new config context object will re-render every `motion` component
          * every time it renders. So we only want to create a new one sparingly.
          */
-        var transitionDependency = typeof config.transition === "object"
-            ? config.transition.toString()
-            : "";
-        var context = React.useMemo(function () { return config; }, [
-            transitionDependency,
-            config.transformPagePoint,
-        ]);
+        var context = React.useMemo(function () { return config; }, [JSON.stringify(config.transition), config.transformPagePoint]);
         return (React__namespace.createElement(MotionConfigContext.Provider, { value: context }, children));
     }