framer-motion 7.1.1 → 7.1.2

package/dist/cjs/index.js

@@ -2376,7 +2376,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "7.1.1";
+        this.version = "7.1.2";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -4282,7 +4282,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "7.1.1", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.1.1 may not work as expected.`);
+                warnOnce(nextValue.version === "7.1.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.1.2 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -7691,6 +7691,48 @@ function useTime() {
     return time;
 }
 
+class WillChangeMotionValue extends MotionValue {
+    constructor() {
+        super(...arguments);
+        this.members = [];
+        this.transforms = new Set();
+    }
+    add(name) {
+        let memberName;
+        if (isTransformProp(name)) {
+            this.transforms.add(name);
+            memberName = "transform";
+        }
+        else if (!isTransformOriginProp(name) &&
+            !isCSSVariable$1(name) &&
+            name !== "willChange") {
+            memberName = camelToDash(name);
+        }
+        if (memberName) {
+            addUniqueItem(this.members, memberName);
+            this.update();
+        }
+    }
+    remove(name) {
+        if (isTransformProp(name)) {
+            this.transforms.delete(name);
+            if (!this.transforms.size) {
+                removeItem(this.members, "transform");
+            }
+        }
+        else {
+            removeItem(this.members, camelToDash(name));
+        }
+        this.update();
+    }
+    update() {
+        this.set(this.members.length ? this.members.join(", ") : "auto");
+    }
+}
+function useWillChange() {
+    return useConstant(() => new WillChangeMotionValue("auto"));
+}
+
 /**
  * @public
  */
@@ -8147,5 +8189,6 @@ exports.useUnmountEffect = useUnmountEffect;
 exports.useVelocity = useVelocity;
 exports.useViewportScroll = useViewportScroll;
 exports.useVisualElementContext = useVisualElementContext;
+exports.useWillChange = useWillChange;
 exports.visualElement = visualElement;
 exports.wrapHandler = wrapHandler;

package/dist/es/index.mjs

@@ -19,6 +19,7 @@ export { useScroll } from './value/use-scroll.mjs';
 export { useElementScroll } from './value/scroll/use-element-scroll.mjs';
 export { useViewportScroll } from './value/scroll/use-viewport-scroll.mjs';
 export { useTime } from './value/use-time.mjs';
+export { useWillChange } from './value/use-will-change/index.mjs';
 export { useReducedMotion, useReducedMotionConfig } from './utils/use-reduced-motion.mjs';
 export { animationControls } from './animation/animation-controls.mjs';
 export { useAnimation, useAnimationControls } from './animation/use-animation.mjs';

package/dist/es/render/utils/motion-values.mjs

@@ -23,7 +23,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "7.1.1", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.1.1 may not work as expected.`);
+                warnOnce(nextValue.version === "7.1.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.1.2 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/value/index.mjs

@@ -24,7 +24,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "7.1.1";
+        this.version = "7.1.2";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/es/value/use-will-change/index.mjs

@@ -0,0 +1,50 @@
+import { isCSSVariable } from '../../render/dom/utils/is-css-variable.mjs';
+import { isTransformProp, isTransformOriginProp } from '../../render/html/utils/transform.mjs';
+import { addUniqueItem, removeItem } from '../../utils/array.mjs';
+import { useConstant } from '../../utils/use-constant.mjs';
+import { MotionValue } from '../index.mjs';
+import { camelToDash } from '../../render/dom/utils/camel-to-dash.mjs';
+
+class WillChangeMotionValue extends MotionValue {
+    constructor() {
+        super(...arguments);
+        this.members = [];
+        this.transforms = new Set();
+    }
+    add(name) {
+        let memberName;
+        if (isTransformProp(name)) {
+            this.transforms.add(name);
+            memberName = "transform";
+        }
+        else if (!isTransformOriginProp(name) &&
+            !isCSSVariable(name) &&
+            name !== "willChange") {
+            memberName = camelToDash(name);
+        }
+        if (memberName) {
+            addUniqueItem(this.members, memberName);
+            this.update();
+        }
+    }
+    remove(name) {
+        if (isTransformProp(name)) {
+            this.transforms.delete(name);
+            if (!this.transforms.size) {
+                removeItem(this.members, "transform");
+            }
+        }
+        else {
+            removeItem(this.members, camelToDash(name));
+        }
+        this.update();
+    }
+    update() {
+        this.set(this.members.length ? this.members.join(", ") : "auto");
+    }
+}
+function useWillChange() {
+    return useConstant(() => new WillChangeMotionValue("auto"));
+}
+
+export { WillChangeMotionValue, useWillChange };

package/dist/framer-motion.dev.js

@@ -3543,7 +3543,7 @@
              * This will be replaced by the build step with the latest version number.
              * When MotionValues are provided to motion components, warn if versions are mixed.
              */
-            this.version = "7.1.1";
+            this.version = "7.1.2";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -5449,7 +5449,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "7.1.1", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.1.1 may not work as expected.`);
+                    warnOnce(nextValue.version === "7.1.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.1.2 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -9439,6 +9439,48 @@
         return time;
     }
 
+    class WillChangeMotionValue extends MotionValue {
+        constructor() {
+            super(...arguments);
+            this.members = [];
+            this.transforms = new Set();
+        }
+        add(name) {
+            let memberName;
+            if (isTransformProp(name)) {
+                this.transforms.add(name);
+                memberName = "transform";
+            }
+            else if (!isTransformOriginProp(name) &&
+                !isCSSVariable$1(name) &&
+                name !== "willChange") {
+                memberName = camelToDash(name);
+            }
+            if (memberName) {
+                addUniqueItem(this.members, memberName);
+                this.update();
+            }
+        }
+        remove(name) {
+            if (isTransformProp(name)) {
+                this.transforms.delete(name);
+                if (!this.transforms.size) {
+                    removeItem(this.members, "transform");
+                }
+            }
+            else {
+                removeItem(this.members, camelToDash(name));
+            }
+            this.update();
+        }
+        update() {
+            this.set(this.members.length ? this.members.join(", ") : "auto");
+        }
+    }
+    function useWillChange() {
+        return useConstant(() => new WillChangeMotionValue("auto"));
+    }
+
     /**
      * @public
      */
@@ -9895,6 +9937,7 @@
     exports.useVelocity = useVelocity;
     exports.useViewportScroll = useViewportScroll;
     exports.useVisualElementContext = useVisualElementContext;
+    exports.useWillChange = useWillChange;
     exports.visualElement = visualElement;
     exports.wrapHandler = wrapHandler;