framer-motion 7.2.0 → 7.3.1

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

@@ -1,4 +1,3 @@
-import { __rest } 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';
@@ -6,7 +5,7 @@ import { resolveFinalValueInKeyframes } from '../../utils/resolve-value.mjs';
 import { motionValue } from '../../value/index.mjs';
 import { getAnimatableNone } from '../dom/value-types/animatable-none.mjs';
 import { findValueType } from '../dom/value-types/find.mjs';
-import { resolveVariant } from './variants.mjs';
+import { resolveVariant } from './resolve-dynamic-variants.mjs';
 
 /**
  * Set VisualElement's MotionValue, creating a new MotionValue for it if
@@ -22,8 +21,8 @@ function setMotionValue(visualElement, key, value) {
 }
 function setTarget(visualElement, definition) {
     const resolved = resolveVariant(visualElement, definition);
-    let _a = resolved ? visualElement.makeTargetAnimatable(resolved, false) : {}, { transitionEnd = {}, transition = {} } = _a, target = __rest(_a, ["transitionEnd", "transition"]);
-    target = Object.assign(Object.assign({}, target), transitionEnd);
+    let { transitionEnd = {}, transition = {}, ...target } = resolved ? visualElement.makeTargetAnimatable(resolved, false) : {};
+    target = { ...target, ...transitionEnd };
     for (const key in target) {
         const value = resolveFinalValueInKeyframes(target[key]);
         setMotionValue(visualElement, key, value);
@@ -52,8 +51,7 @@ function setValues(visualElement, definition) {
     }
 }
 function checkTargetForNewValues(visualElement, target, origin) {
-    var _a, _b, _c;
-    var _d;
+    var _a, _b;
     const newValueKeys = Object.keys(target).filter((key) => !visualElement.hasValue(key));
     const numNewValues = newValueKeys.length;
     if (!numNewValues)
@@ -92,7 +90,9 @@ function checkTargetForNewValues(visualElement, target, origin) {
             value = getAnimatableNone(key, targetValue);
         }
         visualElement.addValue(key, motionValue(value));
-        (_c = (_d = origin)[key]) !== null && _c !== void 0 ? _c : (_d[key] = value);
+        if (origin[key] === undefined) {
+            origin[key] = value;
+        }
         visualElement.setBaseTarget(key, value);
     }
 }
@@ -103,11 +103,14 @@ function getOriginFromTransition(key, transition) {
     return valueTransition.from;
 }
 function getOrigin(target, transition, visualElement) {
-    var _a, _b;
+    var _a;
     const origin = {};
     for (const key in target) {
+        const transitionOrigin = getOriginFromTransition(key, transition);
         origin[key] =
-            (_a = getOriginFromTransition(key, transition)) !== null && _a !== void 0 ? _a : (_b = visualElement.getValue(key)) === null || _b === void 0 ? void 0 : _b.get();
+            transitionOrigin !== undefined
+                ? transitionOrigin
+                : (_a = visualElement.getValue(key)) === null || _a === void 0 ? void 0 : _a.get();
     }
     return origin;
 }

package/dist/es/utils/reduced-motion/index.mjs

@@ -0,0 +1,19 @@
+import { isBrowser } from '../is-browser.mjs';
+import { hasReducedMotionListener, prefersReducedMotion } from './state.mjs';
+
+function initPrefersReducedMotion() {
+    hasReducedMotionListener.current = true;
+    if (!isBrowser)
+        return;
+    if (window.matchMedia) {
+        const motionMediaQuery = window.matchMedia("(prefers-reduced-motion)");
+        const setReducedMotionPreferences = () => (prefersReducedMotion.current = motionMediaQuery.matches);
+        motionMediaQuery.addListener(setReducedMotionPreferences);
+        setReducedMotionPreferences();
+    }
+    else {
+        prefersReducedMotion.current = false;
+    }
+}
+
+export { initPrefersReducedMotion };

package/dist/es/utils/reduced-motion/state.mjs

@@ -0,0 +1,5 @@
+// Does this device prefer reduced motion? Returns `null` server-side.
+const prefersReducedMotion = { current: null };
+const hasReducedMotionListener = { current: false };
+
+export { hasReducedMotionListener, prefersReducedMotion };

package/dist/es/utils/reduced-motion/use-reduced-motion-config.mjs

@@ -0,0 +1,19 @@
+import { useContext } from 'react';
+import { MotionConfigContext } from '../../context/MotionConfigContext.mjs';
+import { useReducedMotion } from './use-reduced-motion.mjs';
+
+function useReducedMotionConfig() {
+    const reducedMotionPreference = useReducedMotion();
+    const { reducedMotion } = useContext(MotionConfigContext);
+    if (reducedMotion === "never") {
+        return false;
+    }
+    else if (reducedMotion === "always") {
+        return true;
+    }
+    else {
+        return reducedMotionPreference;
+    }
+}
+
+export { useReducedMotionConfig };

package/dist/es/utils/reduced-motion/use-reduced-motion.mjs

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+import { initPrefersReducedMotion } from './index.mjs';
+import { hasReducedMotionListener, prefersReducedMotion } from './state.mjs';
+
+/**
+ * A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting.
+ *
+ * This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing
+ * `x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion.
+ *
+ * It will actively respond to changes and re-render your components with the latest setting.
+ *
+ * ```jsx
+ * export function Sidebar({ isOpen }) {
+ *   const shouldReduceMotion = useReducedMotion()
+ *   const closedX = shouldReduceMotion ? 0 : "-100%"
+ *
+ *   return (
+ *     <motion.div animate={{
+ *       opacity: isOpen ? 1 : 0,
+ *       x: isOpen ? 0 : closedX
+ *     }} />
+ *   )
+ * }
+ * ```
+ *
+ * @return boolean
+ *
+ * @public
+ */
+function useReducedMotion() {
+    /**
+     * Lazy initialisation of prefersReducedMotion
+     */
+    !hasReducedMotionListener.current && initPrefersReducedMotion();
+    const [shouldReduceMotion] = useState(prefersReducedMotion.current);
+    /**
+     * TODO See if people miss automatically updating shouldReduceMotion setting
+     */
+    return shouldReduceMotion;
+}
+
+export { useReducedMotion };

package/dist/es/utils/transform.mjs

@@ -11,7 +11,10 @@ function transform(...args) {
     const inputRange = args[1 + argOffset];
     const outputRange = args[2 + argOffset];
     const options = args[3 + argOffset];
-    const interpolator = interpolate(inputRange, outputRange, Object.assign({ mixer: getMixer(outputRange[0]) }, options));
+    const interpolator = interpolate(inputRange, outputRange, {
+        mixer: getMixer(outputRange[0]),
+        ...options,
+    });
     return useImmediate ? interpolator(inputValue) : interpolator;
 }
 

package/dist/es/utils/use-in-view.mjs

@@ -4,7 +4,6 @@ import { inView } from '@motionone/dom';
 function useInView(ref, { root, margin, amount, once = false } = {}) {
     const [isInView, setInView] = useState(false);
     useEffect(() => {
-        var _a;
         if (!ref.current || (once && isInView))
             return;
         const onEnter = () => {
@@ -12,7 +11,7 @@ function useInView(ref, { root, margin, amount, once = false } = {}) {
             return once ? undefined : () => setInView(false);
         };
         const options = {
-            root: (_a = root === null || root === void 0 ? void 0 : root.current) !== null && _a !== void 0 ? _a : undefined,
+            root: (root && root.current) || undefined,
             margin,
             amount: amount === "some" ? "any" : amount,
         };

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.2.0";
+        this.version = "7.3.1";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

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

@@ -1,4 +1,3 @@
-import { __rest } from 'tslib';
 import { scroll } from '@motionone/dom';
 import { motionValue } from './index.mjs';
 import { useConstant } from '../utils/use-constant.mjs';
@@ -10,8 +9,7 @@ const createScrollMotionValues = () => ({
     scrollXProgress: motionValue(0),
     scrollYProgress: motionValue(0),
 });
-function useScroll(_a = {}) {
-    var { container, target } = _a, options = __rest(_a, ["container", "target"]);
+function useScroll({ container, target, ...options } = {}) {
     const values = useConstant(createScrollMotionValues);
     useIsomorphicLayoutEffect(() => {
         return scroll(({ x, y }) => {
@@ -19,7 +17,11 @@ function useScroll(_a = {}) {
             values.scrollXProgress.set(x.progress);
             values.scrollY.set(y.current);
             values.scrollYProgress.set(y.progress);
-        }, 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 }));
+        }, {
+            ...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

@@ -39,7 +39,13 @@ function useSpring(source, config = {}) {
             if (activeSpringAnimation.current) {
                 activeSpringAnimation.current.stop();
             }
-            activeSpringAnimation.current = animate(Object.assign(Object.assign({ from: value.get(), to: v, velocity: value.getVelocity() }, config), { onUpdate: set }));
+            activeSpringAnimation.current = animate({
+                from: value.get(),
+                to: v,
+                velocity: value.getVelocity(),
+                ...config,
+                onUpdate: set,
+            });
             return value.get();
         });
     }, [JSON.stringify(config)]);

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

@@ -1,5 +1,5 @@
 import { isCSSVariable } from '../../render/dom/utils/is-css-variable.mjs';
-import { isTransformProp, isTransformOriginProp } from '../../render/html/utils/transform.mjs';
+import { transformProps } 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';
@@ -13,11 +13,11 @@ class WillChangeMotionValue extends MotionValue {
     }
     add(name) {
         let memberName;
-        if (isTransformProp(name)) {
+        if (transformProps.has(name)) {
             this.transforms.add(name);
             memberName = "transform";
         }
-        else if (!isTransformOriginProp(name) &&
+        else if (!name.startsWith("origin") &&
             !isCSSVariable(name) &&
             name !== "willChange") {
             memberName = camelToDash(name);
@@ -28,7 +28,7 @@ class WillChangeMotionValue extends MotionValue {
         }
     }
     remove(name) {
-        if (isTransformProp(name)) {
+        if (transformProps.has(name)) {
             this.transforms.delete(name);
             if (!this.transforms.size) {
                 removeItem(this.members, "transform");

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

@@ -1,5 +1,3 @@
-const isMotionValue = (value) => {
-    return Boolean(value !== null && typeof value === "object" && value.getVelocity);
-};
+const isMotionValue = (value) => value === undefined ? false : !!value.getVelocity;
 
 export { isMotionValue };