framer-motion 5.5.4 → 5.5.5

package/dist/cjs/three-entry.js

@@ -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/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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "5.5.4",
+    "version": "5.5.5",
     "description": "A simple and powerful React animation library",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",

package/types/components/three/MotionCanvasContext.d.ts

@@ -9,5 +9,6 @@ export declare type SetDimensions = (state: DimensionsState) => void;
 export interface MotionCanvasContextProps {
     layoutCamera: RefObject<any>;
     dimensions: MutableRefObject<DimensionsState>;
+    requestedDpr: number;
 }
 export declare const MotionCanvasContext: import("react").Context<MotionCanvasContextProps | undefined>;