framer-motion 8.1.4 → 8.1.6

package/dist/cjs/index.js

@@ -1560,14 +1560,6 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
     useUnmountEffect(removePointerEndListener);
 }
 
-/**
- * Browser-safe usage of process
- */
-const defaultEnvironment = "production";
-const env = typeof process === "undefined" || process.env === undefined
-    ? defaultEnvironment
-    : process.env.NODE_ENV || defaultEnvironment;
-
 const warned = new Set();
 function warnOnce(condition, message, element) {
     if (condition || warned.has(message))
@@ -1695,7 +1687,7 @@ function useMissingIntersectionObserver(shouldObserve, state, visualElement, { f
     React.useEffect(() => {
         if (!shouldObserve || !fallback)
             return;
-        if (env !== "production") {
+        if (process.env.NODE_ENV !== "production") {
             warnOnce(false, "IntersectionObserver not available on this device. whileInView animations will trigger on mount.");
         }
         /**
@@ -2061,7 +2053,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 = "8.1.4";
+        this.version = "8.1.6";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -5883,7 +5875,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "8.1.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.1.4 may not work as expected.`);
+                warnOnce(nextValue.version === "8.1.6", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.1.6 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -6066,6 +6058,9 @@ class VisualElement {
                 : this.reducedMotionConfig === "always"
                     ? true
                     : prefersReducedMotion.current;
+        if (process.env.NODE_ENV !== "production") {
+            warnOnce(this.shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.");
+        }
         if (this.parent)
             this.parent.children.add(this);
         this.setProps(this.props);
@@ -6115,7 +6110,9 @@ class VisualElement {
          * If we're in development mode, check to make sure we're not rendering a motion component
          * as a child of LazyMotion, as this will break the file-size benefits of using it.
          */
-        if (env !== "production" && preloadedFeatures && isStrict) {
+        if (process.env.NODE_ENV !== "production" &&
+            preloadedFeatures &&
+            isStrict) {
             heyListen.invariant(false, "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.");
         }
         for (let i = 0; i < numFeatures; i++) {
@@ -8627,7 +8624,9 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exi
     // Support deprecated exitBeforeEnter prop
     if (exitBeforeEnter) {
         mode = "wait";
-        warnOnce(false, "Replace exitBeforeEnter with mode='wait'");
+        if (process.env.NODE_ENV !== "production") {
+            warnOnce(false, "Replace exitBeforeEnter with mode='wait'");
+        }
     }
     // We want to force a re-render once all exiting animations have finished. We
     // either use a local forceRender function, or one from a parent context if it exists.
@@ -8713,7 +8712,7 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exi
         const key = child.key;
         return exiting.has(key) ? (child) : (React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));
     });
-    if (env !== "production" &&
+    if (process.env.NODE_ENV !== "production" &&
         mode === "wait" &&
         childrenToRender.length > 1) {
         console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
@@ -9250,7 +9249,9 @@ function useScroll({ container, target, layoutEffect = true, ...options } = {})
  * @deprecated useElementScroll is deprecated. Convert to useScroll({ container: ref })
  */
 function useElementScroll(ref) {
-    warnOnce(false, "useElementScroll is deprecated. Convert to useScroll({ container: ref }).");
+    if (process.env.NODE_ENV === "development") {
+        warnOnce(false, "useElementScroll is deprecated. Convert to useScroll({ container: ref }).");
+    }
     return useScroll({ container: ref });
 }
 
@@ -9258,7 +9259,9 @@ function useElementScroll(ref) {
  * @deprecated useViewportScroll is deprecated. Convert to useScroll()
  */
 function useViewportScroll() {
-    warnOnce(false, "useViewportScroll is deprecated. Convert to useScroll().");
+    if (process.env.NODE_ENV !== "production") {
+        warnOnce(false, "useViewportScroll is deprecated. Convert to useScroll().");
+    }
     return useScroll();
 }
 
@@ -9368,6 +9371,9 @@ function useReducedMotion() {
      */
     !hasReducedMotionListener.current && initPrefersReducedMotion();
     const [shouldReduceMotion] = React.useState(prefersReducedMotion.current);
+    if (process.env.NODE_ENV !== "production") {
+        warnOnce(shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.");
+    }
     /**
      * TODO See if people miss automatically updating shouldReduceMotion setting
      */

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useContext, useRef, cloneElement, Children, isValidElement } from 'react';
-import { env } from '../../utils/process.mjs';
 import { useForceUpdate } from '../../utils/use-force-update.mjs';
 import { useIsMounted } from '../../utils/use-is-mounted.mjs';
 import { PresenceChild } from './PresenceChild.mjs';
@@ -62,7 +61,9 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exi
     // Support deprecated exitBeforeEnter prop
     if (exitBeforeEnter) {
         mode = "wait";
-        warnOnce(false, "Replace exitBeforeEnter with mode='wait'");
+        if (process.env.NODE_ENV !== "production") {
+            warnOnce(false, "Replace exitBeforeEnter with mode='wait'");
+        }
     }
     // We want to force a re-render once all exiting animations have finished. We
     // either use a local forceRender function, or one from a parent context if it exists.
@@ -148,7 +149,7 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exi
         const key = child.key;
         return exiting.has(key) ? (child) : (React.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));
     });
-    if (env !== "production" &&
+    if (process.env.NODE_ENV !== "production" &&
         mode === "wait" &&
         childrenToRender.length > 1) {
         console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);

package/dist/es/motion/features/viewport/use-viewport.mjs

@@ -1,4 +1,3 @@
-import { env } from '../../../utils/process.mjs';
 import { useRef, useEffect } from 'react';
 import { AnimationType } from '../../../render/utils/types.mjs';
 import { warnOnce } from '../../../utils/warn-once.mjs';
@@ -73,7 +72,7 @@ function useMissingIntersectionObserver(shouldObserve, state, visualElement, { f
     useEffect(() => {
         if (!shouldObserve || !fallback)
             return;
-        if (env !== "production") {
+        if (process.env.NODE_ENV !== "production") {
             warnOnce(false, "IntersectionObserver not available on this device. whileInView animations will trigger on mount.");
         }
         /**

package/dist/es/render/VisualElement.mjs

@@ -4,7 +4,6 @@ import { createElement } from 'react';
 import { featureDefinitions } from '../motion/features/definitions.mjs';
 import { createBox } from '../projection/geometry/models.mjs';
 import { isRefObject } from '../utils/is-ref-object.mjs';
-import { env } from '../utils/process.mjs';
 import { initPrefersReducedMotion } from '../utils/reduced-motion/index.mjs';
 import { hasReducedMotionListener, prefersReducedMotion } from '../utils/reduced-motion/state.mjs';
 import { SubscriptionManager } from '../utils/subscription-manager.mjs';
@@ -17,6 +16,7 @@ import { isControllingVariants, isVariantNode } from './utils/is-controlling-var
 import { isVariantLabel } from './utils/is-variant-label.mjs';
 import { updateMotionValuesFromProps } from './utils/motion-values.mjs';
 import { resolveVariantFromProps } from './utils/resolve-variants.mjs';
+import { warnOnce } from '../utils/warn-once.mjs';
 
 const featureNames = Object.keys(featureDefinitions);
 const numFeatures = featureNames.length;
@@ -163,6 +163,9 @@ class VisualElement {
                 : this.reducedMotionConfig === "always"
                     ? true
                     : prefersReducedMotion.current;
+        if (process.env.NODE_ENV !== "production") {
+            warnOnce(this.shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.");
+        }
         if (this.parent)
             this.parent.children.add(this);
         this.setProps(this.props);
@@ -212,7 +215,9 @@ class VisualElement {
          * If we're in development mode, check to make sure we're not rendering a motion component
          * as a child of LazyMotion, as this will break the file-size benefits of using it.
          */
-        if (env !== "production" && preloadedFeatures && isStrict) {
+        if (process.env.NODE_ENV !== "production" &&
+            preloadedFeatures &&
+            isStrict) {
             invariant(false, "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.");
         }
         for (let i = 0; i < numFeatures; i++) {

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

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

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

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { initPrefersReducedMotion } from './index.mjs';
+import { warnOnce } from '../warn-once.mjs';
 import { hasReducedMotionListener, prefersReducedMotion } from './state.mjs';
 
 /**
@@ -34,6 +35,9 @@ function useReducedMotion() {
      */
     !hasReducedMotionListener.current && initPrefersReducedMotion();
     const [shouldReduceMotion] = useState(prefersReducedMotion.current);
+    if (process.env.NODE_ENV !== "production") {
+        warnOnce(shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.");
+    }
     /**
      * TODO See if people miss automatically updating shouldReduceMotion setting
      */

package/dist/es/value/index.mjs

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

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

@@ -5,7 +5,9 @@ import { useScroll } from '../use-scroll.mjs';
  * @deprecated useElementScroll is deprecated. Convert to useScroll({ container: ref })
  */
 function useElementScroll(ref) {
-    warnOnce(false, "useElementScroll is deprecated. Convert to useScroll({ container: ref }).");
+    if (process.env.NODE_ENV === "development") {
+        warnOnce(false, "useElementScroll is deprecated. Convert to useScroll({ container: ref }).");
+    }
     return useScroll({ container: ref });
 }
 

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

@@ -5,7 +5,9 @@ import { useScroll } from '../use-scroll.mjs';
  * @deprecated useViewportScroll is deprecated. Convert to useScroll()
  */
 function useViewportScroll() {
-    warnOnce(false, "useViewportScroll is deprecated. Convert to useScroll().");
+    if (process.env.NODE_ENV !== "production") {
+        warnOnce(false, "useViewportScroll is deprecated. Convert to useScroll().");
+    }
     return useScroll();
 }
 

package/dist/framer-motion.dev.js

@@ -1558,14 +1558,6 @@
         useUnmountEffect(removePointerEndListener);
     }
 
-    /**
-     * Browser-safe usage of process
-     */
-    const defaultEnvironment = "production";
-    const env = typeof process === "undefined" || process.env === undefined
-        ? defaultEnvironment
-        : "development" ;
-
     const warned = new Set();
     function warnOnce(condition, message, element) {
         if (condition || warned.has(message))
@@ -1693,7 +1685,7 @@
         React.useEffect(() => {
             if (!shouldObserve || !fallback)
                 return;
-            if (env !== "production") {
+            {
                 warnOnce(false, "IntersectionObserver not available on this device. whileInView animations will trigger on mount.");
             }
             /**
@@ -2059,7 +2051,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 = "8.1.4";
+            this.version = "8.1.6";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -5896,7 +5888,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "8.1.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.1.4 may not work as expected.`);
+                    warnOnce(nextValue.version === "8.1.6", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.1.6 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -6079,6 +6071,9 @@
                     : this.reducedMotionConfig === "always"
                         ? true
                         : prefersReducedMotion.current;
+            {
+                warnOnce(this.shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.");
+            }
             if (this.parent)
                 this.parent.children.add(this);
             this.setProps(this.props);
@@ -6128,7 +6123,8 @@
              * If we're in development mode, check to make sure we're not rendering a motion component
              * as a child of LazyMotion, as this will break the file-size benefits of using it.
              */
-            if (env !== "production" && preloadedFeatures && isStrict) {
+            if (preloadedFeatures &&
+                isStrict) {
                 invariant(false, "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.");
             }
             for (let i = 0; i < numFeatures; i++) {
@@ -8640,7 +8636,9 @@
         // Support deprecated exitBeforeEnter prop
         if (exitBeforeEnter) {
             mode = "wait";
-            warnOnce(false, "Replace exitBeforeEnter with mode='wait'");
+            {
+                warnOnce(false, "Replace exitBeforeEnter with mode='wait'");
+            }
         }
         // We want to force a re-render once all exiting animations have finished. We
         // either use a local forceRender function, or one from a parent context if it exists.
@@ -8726,8 +8724,7 @@
             const key = child.key;
             return exiting.has(key) ? (child) : (React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));
         });
-        if (env !== "production" &&
-            mode === "wait" &&
+        if (mode === "wait" &&
             childrenToRender.length > 1) {
             console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
         }
@@ -9871,7 +9868,9 @@
      * @deprecated useElementScroll is deprecated. Convert to useScroll({ container: ref })
      */
     function useElementScroll(ref) {
-        warnOnce(false, "useElementScroll is deprecated. Convert to useScroll({ container: ref }).");
+        {
+            warnOnce(false, "useElementScroll is deprecated. Convert to useScroll({ container: ref }).");
+        }
         return useScroll({ container: ref });
     }
 
@@ -9879,7 +9878,9 @@
      * @deprecated useViewportScroll is deprecated. Convert to useScroll()
      */
     function useViewportScroll() {
-        warnOnce(false, "useViewportScroll is deprecated. Convert to useScroll().");
+        {
+            warnOnce(false, "useViewportScroll is deprecated. Convert to useScroll().");
+        }
         return useScroll();
     }
 
@@ -9989,6 +9990,9 @@
          */
         !hasReducedMotionListener.current && initPrefersReducedMotion();
         const [shouldReduceMotion] = React.useState(prefersReducedMotion.current);
+        {
+            warnOnce(shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.");
+        }
         /**
          * TODO See if people miss automatically updating shouldReduceMotion setting
          */