framer-motion 9.0.0 → 9.0.2

package/README.md

@@ -3,8 +3,20 @@
 </p>
 <h1 align="center">Framer Motion</h1>
 <h3 align="center">
-  An open source motion library for React, <a href="https://www.framer.com">made by Framer</a>.
+  An open source motion library for React, made by Framer. Motion powers Framer, the web builder for creative pros. Design and ship your dream site. Zero code, maximum speed.
 </h3>
+<br/>
+<p align="center">
+  <a href="https://www.framer.com?utm_source=motion">
+    <img src="https://framerusercontent.com/images/atXqxn4JhKm4LXVncdNjkKV7yCU.png" width="140" alt="Start for free" />
+  </a>
+</p>
+<br/>
+<p align="center">
+  <a href="https://www.framer.com?utm_source=motion">
+    <img src="https://framerusercontent.com/images/pMSOmGP2V8sSaZRV2D7i4HTBTe4.png" width="1000" alt="Framer Banner" />
+  </a>
+</p>
 
 <br>
 
@@ -23,6 +35,8 @@
   </a>
 </p>
 
+<br>
+<hr>
 <br>
 
 Framer Motion is an open source, production-ready library that’s designed for all creative developers.
@@ -85,4 +99,4 @@ export const MyComponent = ({ isVisible }) => (
 
 ### ✨ Framer
 
--   Design and publish sites that inspire. [Try Framer for free](https://www.framer.com/).
+-   Design and publish sites that inspire. [Try Framer for free](https://www.framer.com/?utm_source=motion-readme).

package/dist/cjs/index.js

@@ -344,12 +344,11 @@ function createMotionComponent({ preloadedFeatures, createVisualElement, project
              * Load Motion gesture and animation features. These are rendered as renderless
              * components so each feature can optionally make use of React lifecycle methods.
              */
-            const lazyStrictMode = React.useContext(LazyContext).strict;
             const initialLayoutGroupConfig = React.useContext(SwitchLayoutGroupContext);
             if (context.visualElement) {
                 features = context.visualElement.loadFeatures(
                 // Note: Pass the full new combined props to correctly re-render dynamic feature components.
-                configAndProps, lazyStrictMode, preloadedFeatures, projectionId, projectionNodeConstructor ||
+                configAndProps, React.useContext(LazyContext).strict, preloadedFeatures, projectionId, projectionNodeConstructor ||
                     featureDefinitions.projectionNodeConstructor, initialLayoutGroupConfig);
             }
         }
@@ -855,6 +854,7 @@ const validMotionProps = new Set([
     "onHoverEnd",
     "onViewportEnter",
     "onViewportLeave",
+    "ignoreStrict",
     "viewport",
 ]);
 /**
@@ -1550,7 +1550,6 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
     const hasPressListeners = onTap || onTapStart || onTapCancel || whileTap;
     const isPressing = React.useRef(false);
     const cancelPointerEndListeners = React.useRef(null);
-    const suspendedTabIndex = React.useRef(null);
     /**
      * Only set listener to passive if there are no external listeners.
      */
@@ -1571,9 +1570,6 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
         if (latestProps.whileTap && visualElement.animationState) {
             visualElement.animationState.setActive(exports.AnimationType.Tap, false);
         }
-        if (suspendedTabIndex.current !== null) {
-            visualElement.current.setAttribute("tabindex", suspendedTabIndex.current);
-        }
         return !isDragActive();
     }
     function onPointerUp(event, info) {
@@ -1616,9 +1612,6 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
         if (isPressing.current)
             return;
         isPressing.current = true;
-        suspendedTabIndex.current =
-            visualElement.current.getAttribute("tabindex");
-        visualElement.current.setAttribute("tabindex", "-1");
         cancelPointerEndListeners.current = pipe(addPointerEvent(window, "pointerup", onPointerUp, eventOptions), addPointerEvent(window, "pointercancel", onPointerCancel, eventOptions));
         onPointerStart(event, info);
     }, callbackDependencies);
@@ -2140,7 +2133,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 = "9.0.0";
+        this.version = "9.0.2";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -5989,7 +5982,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "9.0.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.0.0 may not work as expected.`);
+                warnOnce(nextValue.version === "9.0.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.0.2 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -6227,7 +6220,10 @@ class VisualElement {
         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.");
+            const strictMessage = "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";
+            renderedProps.ignoreStrict
+                ? heyListen.warning(false, strictMessage)
+                : heyListen.invariant(false, strictMessage);
         }
         for (let i = 0; i < numFeatures; i++) {
             const name = featureNames[i];
@@ -9091,7 +9087,7 @@ function ReorderGroup({ children, as = "ul", axis = "y", onReorder, values, ...p
     React.useEffect(() => {
         isReordering.current = false;
     });
-    return (React__namespace.createElement(Component, { ...props, ref: externalRef },
+    return (React__namespace.createElement(Component, { ...props, ref: externalRef, ignoreStrict: true },
         React__namespace.createElement(ReorderContext.Provider, { value: context }, children)));
 }
 const Group = React.forwardRef(ReorderGroup);
@@ -9228,7 +9224,7 @@ function ReorderItem({ children, style = {}, value, as = "li", onDrag, layout =
             onDrag && onDrag(event, gesturePoint);
         }, onLayoutMeasure: (measured) => {
             measuredLayout.current = measured;
-        }, ref: externalRef }, children));
+        }, ref: externalRef, ignoreStrict: true }, children));
 }
 const Item = React.forwardRef(ReorderItem);
 

package/dist/es/components/Reorder/Group.mjs

@@ -38,7 +38,7 @@ function ReorderGroup({ children, as = "ul", axis = "y", onReorder, values, ...p
     useEffect(() => {
         isReordering.current = false;
     });
-    return (React.createElement(Component, { ...props, ref: externalRef },
+    return (React.createElement(Component, { ...props, ref: externalRef, ignoreStrict: true },
         React.createElement(ReorderContext.Provider, { value: context }, children)));
 }
 const Group = forwardRef(ReorderGroup);

package/dist/es/components/Reorder/Item.mjs

@@ -32,7 +32,7 @@ function ReorderItem({ children, style = {}, value, as = "li", onDrag, layout =
             onDrag && onDrag(event, gesturePoint);
         }, onLayoutMeasure: (measured) => {
             measuredLayout.current = measured;
-        }, ref: externalRef }, children));
+        }, ref: externalRef, ignoreStrict: true }, children));
 }
 const Item = forwardRef(ReorderItem);
 

package/dist/es/gestures/use-tap-gesture.mjs

@@ -22,7 +22,6 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
     const hasPressListeners = onTap || onTapStart || onTapCancel || whileTap;
     const isPressing = useRef(false);
     const cancelPointerEndListeners = useRef(null);
-    const suspendedTabIndex = useRef(null);
     /**
      * Only set listener to passive if there are no external listeners.
      */
@@ -43,9 +42,6 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
         if (latestProps.whileTap && visualElement.animationState) {
             visualElement.animationState.setActive(AnimationType.Tap, false);
         }
-        if (suspendedTabIndex.current !== null) {
-            visualElement.current.setAttribute("tabindex", suspendedTabIndex.current);
-        }
         return !isDragActive();
     }
     function onPointerUp(event, info) {
@@ -88,9 +84,6 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
         if (isPressing.current)
             return;
         isPressing.current = true;
-        suspendedTabIndex.current =
-            visualElement.current.getAttribute("tabindex");
-        visualElement.current.setAttribute("tabindex", "-1");
         cancelPointerEndListeners.current = pipe(addPointerEvent(window, "pointerup", onPointerUp, eventOptions), addPointerEvent(window, "pointercancel", onPointerCancel, eventOptions));
         onPointerStart(event, info);
     }, callbackDependencies);

package/dist/es/motion/index.mjs

@@ -63,12 +63,11 @@ function createMotionComponent({ preloadedFeatures, createVisualElement, project
              * Load Motion gesture and animation features. These are rendered as renderless
              * components so each feature can optionally make use of React lifecycle methods.
              */
-            const lazyStrictMode = useContext(LazyContext).strict;
             const initialLayoutGroupConfig = useContext(SwitchLayoutGroupContext);
             if (context.visualElement) {
                 features = context.visualElement.loadFeatures(
                 // Note: Pass the full new combined props to correctly re-render dynamic feature components.
-                configAndProps, lazyStrictMode, preloadedFeatures, projectionId, projectionNodeConstructor ||
+                configAndProps, useContext(LazyContext).strict, preloadedFeatures, projectionId, projectionNodeConstructor ||
                     featureDefinitions.projectionNodeConstructor, initialLayoutGroupConfig);
             }
         }

package/dist/es/motion/utils/valid-prop.mjs

@@ -36,6 +36,7 @@ const validMotionProps = new Set([
     "onHoverEnd",
     "onViewportEnter",
     "onViewportLeave",
+    "ignoreStrict",
     "viewport",
 ]);
 /**

package/dist/es/render/VisualElement.mjs

@@ -1,5 +1,5 @@
 import { sync, cancelSync } from '../frameloop/index.mjs';
-import { invariant } from 'hey-listen';
+import { warning, invariant } from 'hey-listen';
 import { createElement } from 'react';
 import { featureDefinitions } from '../motion/features/definitions.mjs';
 import { createBox } from '../projection/geometry/models.mjs';
@@ -218,7 +218,10 @@ class VisualElement {
         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.");
+            const strictMessage = "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";
+            renderedProps.ignoreStrict
+                ? warning(false, strictMessage)
+                : invariant(false, strictMessage);
         }
         for (let i = 0; i < numFeatures; i++) {
             const name = featureNames[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 === "9.0.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.0.0 may not work as expected.`);
+                warnOnce(nextValue.version === "9.0.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.0.2 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

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

package/dist/framer-motion.dev.js

@@ -342,12 +342,11 @@
                  * Load Motion gesture and animation features. These are rendered as renderless
                  * components so each feature can optionally make use of React lifecycle methods.
                  */
-                const lazyStrictMode = React.useContext(LazyContext).strict;
                 const initialLayoutGroupConfig = React.useContext(SwitchLayoutGroupContext);
                 if (context.visualElement) {
                     features = context.visualElement.loadFeatures(
                     // Note: Pass the full new combined props to correctly re-render dynamic feature components.
-                    configAndProps, lazyStrictMode, preloadedFeatures, projectionId, projectionNodeConstructor ||
+                    configAndProps, React.useContext(LazyContext).strict, preloadedFeatures, projectionId, projectionNodeConstructor ||
                         featureDefinitions.projectionNodeConstructor, initialLayoutGroupConfig);
                 }
             }
@@ -853,6 +852,7 @@
         "onHoverEnd",
         "onViewportEnter",
         "onViewportLeave",
+        "ignoreStrict",
         "viewport",
     ]);
     /**
@@ -1548,7 +1548,6 @@
         const hasPressListeners = onTap || onTapStart || onTapCancel || whileTap;
         const isPressing = React.useRef(false);
         const cancelPointerEndListeners = React.useRef(null);
-        const suspendedTabIndex = React.useRef(null);
         /**
          * Only set listener to passive if there are no external listeners.
          */
@@ -1569,9 +1568,6 @@
             if (latestProps.whileTap && visualElement.animationState) {
                 visualElement.animationState.setActive(exports.AnimationType.Tap, false);
             }
-            if (suspendedTabIndex.current !== null) {
-                visualElement.current.setAttribute("tabindex", suspendedTabIndex.current);
-            }
             return !isDragActive();
         }
         function onPointerUp(event, info) {
@@ -1614,9 +1610,6 @@
             if (isPressing.current)
                 return;
             isPressing.current = true;
-            suspendedTabIndex.current =
-                visualElement.current.getAttribute("tabindex");
-            visualElement.current.setAttribute("tabindex", "-1");
             cancelPointerEndListeners.current = pipe(addPointerEvent(window, "pointerup", onPointerUp, eventOptions), addPointerEvent(window, "pointercancel", onPointerCancel, eventOptions));
             onPointerStart(event, info);
         }, callbackDependencies);
@@ -2138,7 +2131,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 = "9.0.0";
+            this.version = "9.0.2";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -6002,7 +5995,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "9.0.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.0.0 may not work as expected.`);
+                    warnOnce(nextValue.version === "9.0.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.0.2 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -6239,7 +6232,10 @@
              */
             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.");
+                const strictMessage = "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";
+                renderedProps.ignoreStrict
+                    ? warning(false, strictMessage)
+                    : invariant(false, strictMessage);
             }
             for (let i = 0; i < numFeatures; i++) {
                 const name = featureNames[i];
@@ -9102,7 +9098,7 @@
         React.useEffect(() => {
             isReordering.current = false;
         });
-        return (React__namespace.createElement(Component, { ...props, ref: externalRef },
+        return (React__namespace.createElement(Component, { ...props, ref: externalRef, ignoreStrict: true },
             React__namespace.createElement(ReorderContext.Provider, { value: context }, children)));
     }
     const Group = React.forwardRef(ReorderGroup);
@@ -9239,7 +9235,7 @@
                 onDrag && onDrag(event, gesturePoint);
             }, onLayoutMeasure: (measured) => {
                 measuredLayout.current = measured;
-            }, ref: externalRef }, children));
+            }, ref: externalRef, ignoreStrict: true }, children));
     }
     const Item = React.forwardRef(ReorderItem);