framer-motion 7.0.3 → 7.1.2

package/dist/es/value/use-motion-value.mjs

@@ -1,4 +1,3 @@
-import { __read } from 'tslib';
 import { useContext, useState, useEffect } from 'react';
 import { motionValue } from './index.mjs';
 import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
@@ -22,16 +21,16 @@ import { useConstant } from '../utils/use-constant.mjs';
  * @public
  */
 function useMotionValue(initial) {
-    var value = useConstant(function () { return motionValue(initial); });
+    const value = useConstant(() => motionValue(initial));
     /**
      * If this motion value is being used in static mode, like on
      * the Framer canvas, force components to rerender when the motion
      * value is updated.
      */
-    var isStatic = useContext(MotionConfigContext).isStatic;
+    const { isStatic } = useContext(MotionConfigContext);
     if (isStatic) {
-        var _a = __read(useState(initial), 2), setLatest_1 = _a[1];
-        useEffect(function () { return value.onChange(setLatest_1); }, []);
+        const [, setLatest] = useState(initial);
+        useEffect(() => value.onChange(setLatest), []);
     }
     return value;
 }

package/dist/es/value/use-on-change.mjs

@@ -2,15 +2,15 @@ import { isMotionValue } from './utils/is-motion-value.mjs';
 import { useIsomorphicLayoutEffect } from '../utils/use-isomorphic-effect.mjs';
 
 function useOnChange(value, callback) {
-    useIsomorphicLayoutEffect(function () {
+    useIsomorphicLayoutEffect(() => {
         if (isMotionValue(value))
             return value.onChange(callback);
     }, [callback]);
 }
 function useMultiOnChange(values, handler) {
-    useIsomorphicLayoutEffect(function () {
-        var subscriptions = values.map(function (value) { return value.onChange(handler); });
-        return function () { return subscriptions.forEach(function (unsubscribe) { return unsubscribe(); }); };
+    useIsomorphicLayoutEffect(() => {
+        const subscriptions = values.map((value) => value.onChange(handler));
+        return () => subscriptions.forEach((unsubscribe) => unsubscribe());
     });
 }
 

package/dist/es/value/use-scroll.mjs

@@ -1,27 +1,25 @@
-import { __rest, __assign } from 'tslib';
+import { __rest } from 'tslib';
 import { scroll } from '@motionone/dom';
 import { motionValue } from './index.mjs';
 import { useConstant } from '../utils/use-constant.mjs';
 import { useIsomorphicLayoutEffect } from '../utils/use-isomorphic-effect.mjs';
 
-var createScrollMotionValues = function () { return ({
+const createScrollMotionValues = () => ({
     scrollX: motionValue(0),
     scrollY: motionValue(0),
     scrollXProgress: motionValue(0),
     scrollYProgress: motionValue(0),
-}); };
-function useScroll(_a) {
-    if (_a === void 0) { _a = {}; }
-    var container = _a.container, target = _a.target, options = __rest(_a, ["container", "target"]);
-    var values = useConstant(createScrollMotionValues);
-    useIsomorphicLayoutEffect(function () {
-        return scroll(function (_a) {
-            var x = _a.x, y = _a.y;
+});
+function useScroll(_a = {}) {
+    var { container, target } = _a, options = __rest(_a, ["container", "target"]);
+    const values = useConstant(createScrollMotionValues);
+    useIsomorphicLayoutEffect(() => {
+        return scroll(({ x, y }) => {
             values.scrollX.set(x.current);
             values.scrollXProgress.set(x.progress);
             values.scrollY.set(y.current);
             values.scrollYProgress.set(y.progress);
-        }, __assign(__assign({}, options), { container: (container === null || container === void 0 ? void 0 : container.current) || undefined, target: (target === null || target === void 0 ? void 0 : target.current) || undefined }));
+        }, Object.assign(Object.assign({}, options), { container: (container === null || container === void 0 ? void 0 : container.current) || undefined, target: (target === null || target === void 0 ? void 0 : target.current) || undefined }));
     }, []);
     return values;
 }

package/dist/es/value/use-spring.mjs

@@ -1,4 +1,3 @@
-import { __assign } from 'tslib';
 import { useContext, useRef, useMemo } from 'react';
 import { animate } from 'popmotion';
 import { isMotionValue } from './utils/is-motion-value.mjs';
@@ -25,13 +24,12 @@ import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
  *
  * @public
  */
-function useSpring(source, config) {
-    if (config === void 0) { config = {}; }
-    var isStatic = useContext(MotionConfigContext).isStatic;
-    var activeSpringAnimation = useRef(null);
-    var value = useMotionValue(isMotionValue(source) ? source.get() : source);
-    useMemo(function () {
-        return value.attach(function (v, set) {
+function useSpring(source, config = {}) {
+    const { isStatic } = useContext(MotionConfigContext);
+    const activeSpringAnimation = useRef(null);
+    const value = useMotionValue(isMotionValue(source) ? source.get() : source);
+    useMemo(() => {
+        return value.attach((v, set) => {
             /**
              * A more hollistic approach to this might be to use isStatic to fix VisualElement animations
              * at that level, but this will work for now
@@ -41,11 +39,11 @@ function useSpring(source, config) {
             if (activeSpringAnimation.current) {
                 activeSpringAnimation.current.stop();
             }
-            activeSpringAnimation.current = animate(__assign(__assign({ from: value.get(), to: v, velocity: value.getVelocity() }, config), { onUpdate: set }));
+            activeSpringAnimation.current = animate(Object.assign(Object.assign({ from: value.get(), to: v, velocity: value.getVelocity() }, config), { onUpdate: set }));
             return value.get();
         });
     }, [JSON.stringify(config)]);
-    useOnChange(source, function (v) { return value.set(parseFloat(v)); });
+    useOnChange(source, (v) => value.set(parseFloat(v)));
     return value;
 }
 

package/dist/es/value/use-time.mjs

@@ -2,8 +2,8 @@ import { useAnimationFrame } from '../utils/use-animation-frame.mjs';
 import { useMotionValue } from './use-motion-value.mjs';
 
 function useTime() {
-    var time = useMotionValue(0);
-    useAnimationFrame(function (t) { return time.set(t); });
+    const time = useMotionValue(0);
+    useAnimationFrame((t) => time.set(t));
     return time;
 }
 

package/dist/es/value/use-transform.mjs

@@ -1,25 +1,21 @@
-import { __read } from 'tslib';
 import { transform } from '../utils/transform.mjs';
 import { useCombineMotionValues } from './use-combine-values.mjs';
 import { useConstant } from '../utils/use-constant.mjs';
 
 function useTransform(input, inputRangeOrTransformer, outputRange, options) {
-    var transformer = typeof inputRangeOrTransformer === "function"
+    const transformer = typeof inputRangeOrTransformer === "function"
         ? inputRangeOrTransformer
         : transform(inputRangeOrTransformer, outputRange, options);
     return Array.isArray(input)
         ? useListTransform(input, transformer)
-        : useListTransform([input], function (_a) {
-            var _b = __read(_a, 1), latest = _b[0];
-            return transformer(latest);
-        });
+        : useListTransform([input], ([latest]) => transformer(latest));
 }
 function useListTransform(values, transformer) {
-    var latest = useConstant(function () { return []; });
-    return useCombineMotionValues(values, function () {
+    const latest = useConstant(() => []);
+    return useCombineMotionValues(values, () => {
         latest.length = 0;
-        var numValues = values.length;
-        for (var i = 0; i < numValues; i++) {
+        const numValues = values.length;
+        for (let i = 0; i < numValues; i++) {
             latest[i] = values[i].get();
         }
         return transformer(latest);

package/dist/es/value/use-velocity.mjs

@@ -13,9 +13,9 @@ import { useMotionValue } from './use-motion-value.mjs';
  * @public
  */
 function useVelocity(value) {
-    var velocity = useMotionValue(value.getVelocity());
-    useEffect(function () {
-        return value.velocityUpdateSubscribers.add(function (newVelocity) {
+    const velocity = useMotionValue(value.getVelocity());
+    useEffect(() => {
+        return value.velocityUpdateSubscribers.add((newVelocity) => {
             velocity.set(newVelocity);
         });
     }, [value]);

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/es/value/use-will-change/is.mjs

@@ -0,0 +1,7 @@
+import { isMotionValue } from '../utils/is-motion-value.mjs';
+
+function isWillChangeMotionValue(value) {
+    return Boolean(isMotionValue(value) && value.add);
+}
+
+export { isWillChangeMotionValue };

package/dist/es/value/utils/is-motion-value.mjs

@@ -1,4 +1,4 @@
-var isMotionValue = function (value) {
+const isMotionValue = (value) => {
     return Boolean(value !== null && typeof value === "object" && value.getVelocity);
 };
 

package/dist/es/value/utils/resolve-motion-value.mjs

@@ -7,7 +7,7 @@ import { isMotionValue } from './is-motion-value.mjs';
  * TODO: Remove and move to library
  */
 function resolveMotionValue(value) {
-    var unwrappedValue = isMotionValue(value) ? value.get() : value;
+    const unwrappedValue = isMotionValue(value) ? value.get() : value;
     return isCustomValue(unwrappedValue)
         ? unwrappedValue.toValue()
         : unwrappedValue;