framer-motion 7.3.0 → 7.3.3

package/dist/cjs/index.js

@@ -286,6 +286,8 @@ class VisualElementHandler extends React__default["default"].Component {
  */
 const SwitchLayoutGroupContext = React.createContext({});
 
+const motionComponentSymbol = Symbol.for("motionComponentSymbol");
+
 /**
  * Create a `motion` component.
  *
@@ -337,7 +339,9 @@ function createMotionComponent({ preloadedFeatures, createVisualElement, project
             const lazyStrictMode = React.useContext(LazyContext).strict;
             const initialLayoutGroupConfig = React.useContext(SwitchLayoutGroupContext);
             if (context.visualElement) {
-                features = context.visualElement.loadFeatures(props, lazyStrictMode, preloadedFeatures, projectionId, projectionNodeConstructor ||
+                features = context.visualElement.loadFeatures(
+                // Note: Pass the full new combined props to correctly re-render dynamic feature components.
+                configAndProps, lazyStrictMode, preloadedFeatures, projectionId, projectionNodeConstructor ||
                     featureDefinitions.projectionNodeConstructor, initialLayoutGroupConfig);
             }
         }
@@ -349,7 +353,9 @@ function createMotionComponent({ preloadedFeatures, createVisualElement, project
             features,
             React__namespace.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement))));
     }
-    return React.forwardRef(MotionComponent);
+    const ForwardRefComponent = React.forwardRef(MotionComponent);
+    ForwardRefComponent[motionComponentSymbol] = Component;
+    return ForwardRefComponent;
 }
 function useLayoutId({ layoutId }) {
     const layoutGroupId = React.useContext(LayoutGroupContext).id;
@@ -483,6 +489,7 @@ const transformPropOrder = [
     "rotate",
     "rotateX",
     "rotateY",
+    "rotateZ",
     "skew",
     "skewX",
     "skewY",
@@ -2235,7 +2242,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.3.0";
+        this.version = "7.3.3";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -4211,7 +4218,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "7.3.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.3.0 may not work as expected.`);
+                warnOnce(nextValue.version === "7.3.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.3.3 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -8198,6 +8205,28 @@ function useDragControls() {
     return useConstant(createDragControls);
 }
 
+/**
+ * Checks if a component is a `motion` component.
+ */
+function isMotionComponent(component) {
+    return (component !== null &&
+        typeof component === "object" &&
+        motionComponentSymbol in component);
+}
+
+/**
+ * Unwraps a `motion` component and returns either a string for `motion.div` or
+ * the React component for `motion(Component)`.
+ *
+ * If the component is not a `motion` component it returns undefined.
+ */
+function unwrapMotionComponent(component) {
+    if (isMotionComponent(component)) {
+        return component[motionComponentSymbol];
+    }
+    return undefined;
+}
+
 function useInstantLayoutTransition() {
     return startTransition;
 }
@@ -8360,6 +8389,7 @@ exports.domMax = domMax;
 exports.filterProps = filterProps;
 exports.isBrowser = isBrowser;
 exports.isDragActive = isDragActive;
+exports.isMotionComponent = isMotionComponent;
 exports.isMotionValue = isMotionValue;
 exports.isValidMotionProp = isValidMotionProp;
 exports.m = m;
@@ -8368,6 +8398,7 @@ exports.motion = motion;
 exports.motionValue = motionValue;
 exports.resolveMotionValue = resolveMotionValue;
 exports.transform = transform;
+exports.unwrapMotionComponent = unwrapMotionComponent;
 exports.useAnimation = useAnimation;
 exports.useAnimationControls = useAnimationControls;
 exports.useAnimationFrame = useAnimationFrame;

package/dist/es/index.mjs

@@ -35,6 +35,8 @@ export { useInView } from './utils/use-in-view.mjs';
 export { DragControls, useDragControls } from './gestures/drag/use-drag-controls.mjs';
 export { useDomEvent } from './events/use-dom-event.mjs';
 export { createMotionComponent } from './motion/index.mjs';
+export { isMotionComponent } from './motion/utils/is-motion-component.mjs';
+export { unwrapMotionComponent } from './motion/utils/unwrap-motion-component.mjs';
 export { visualElement } from './render/index.mjs';
 export { addScaleCorrector } from './projection/styles/scale-correction.mjs';
 export { useInstantTransition } from './utils/use-instant-transition.mjs';

package/dist/es/motion/index.mjs

@@ -13,6 +13,7 @@ import { LayoutGroupContext } from '../context/LayoutGroupContext.mjs';
 import { VisualElementHandler } from './utils/VisualElementHandler.mjs';
 import { LazyContext } from '../context/LazyContext.mjs';
 import { SwitchLayoutGroupContext } from '../context/SwitchLayoutGroupContext.mjs';
+import { motionComponentSymbol } from './utils/symbol.mjs';
 
 /**
  * Create a `motion` component.
@@ -65,7 +66,9 @@ function createMotionComponent({ preloadedFeatures, createVisualElement, project
             const lazyStrictMode = useContext(LazyContext).strict;
             const initialLayoutGroupConfig = useContext(SwitchLayoutGroupContext);
             if (context.visualElement) {
-                features = context.visualElement.loadFeatures(props, lazyStrictMode, preloadedFeatures, projectionId, projectionNodeConstructor ||
+                features = context.visualElement.loadFeatures(
+                // Note: Pass the full new combined props to correctly re-render dynamic feature components.
+                configAndProps, lazyStrictMode, preloadedFeatures, projectionId, projectionNodeConstructor ||
                     featureDefinitions.projectionNodeConstructor, initialLayoutGroupConfig);
             }
         }
@@ -77,7 +80,9 @@ function createMotionComponent({ preloadedFeatures, createVisualElement, project
             features,
             React.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement))));
     }
-    return forwardRef(MotionComponent);
+    const ForwardRefComponent = forwardRef(MotionComponent);
+    ForwardRefComponent[motionComponentSymbol] = Component;
+    return ForwardRefComponent;
 }
 function useLayoutId({ layoutId }) {
     const layoutGroupId = useContext(LayoutGroupContext).id;

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

@@ -0,0 +1,12 @@
+import { motionComponentSymbol } from './symbol.mjs';
+
+/**
+ * Checks if a component is a `motion` component.
+ */
+function isMotionComponent(component) {
+    return (component !== null &&
+        typeof component === "object" &&
+        motionComponentSymbol in component);
+}
+
+export { isMotionComponent };

package/dist/es/motion/utils/symbol.mjs

@@ -0,0 +1,3 @@
+const motionComponentSymbol = Symbol.for("motionComponentSymbol");
+
+export { motionComponentSymbol };

package/dist/es/motion/utils/unwrap-motion-component.mjs

@@ -0,0 +1,17 @@
+import { isMotionComponent } from './is-motion-component.mjs';
+import { motionComponentSymbol } from './symbol.mjs';
+
+/**
+ * Unwraps a `motion` component and returns either a string for `motion.div` or
+ * the React component for `motion(Component)`.
+ *
+ * If the component is not a `motion` component it returns undefined.
+ */
+function unwrapMotionComponent(component) {
+    if (isMotionComponent(component)) {
+        return component[motionComponentSymbol];
+    }
+    return undefined;
+}
+
+export { unwrapMotionComponent };

package/dist/es/render/html/utils/transform.mjs

@@ -15,6 +15,7 @@ const transformPropOrder = [
     "rotate",
     "rotateX",
     "rotateY",
+    "rotateZ",
     "skew",
     "skewX",
     "skewY",

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 === "7.3.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.3.0 may not work as expected.`);
+                warnOnce(nextValue.version === "7.3.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.3.3 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.3.0";
+        this.version = "7.3.3";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/framer-motion.dev.js

@@ -280,6 +280,8 @@
      */
     const SwitchLayoutGroupContext = React.createContext({});
 
+    const motionComponentSymbol = Symbol.for("motionComponentSymbol");
+
     /**
      * Create a `motion` component.
      *
@@ -331,7 +333,9 @@
                 const lazyStrictMode = React.useContext(LazyContext).strict;
                 const initialLayoutGroupConfig = React.useContext(SwitchLayoutGroupContext);
                 if (context.visualElement) {
-                    features = context.visualElement.loadFeatures(props, lazyStrictMode, preloadedFeatures, projectionId, projectionNodeConstructor ||
+                    features = context.visualElement.loadFeatures(
+                    // Note: Pass the full new combined props to correctly re-render dynamic feature components.
+                    configAndProps, lazyStrictMode, preloadedFeatures, projectionId, projectionNodeConstructor ||
                         featureDefinitions.projectionNodeConstructor, initialLayoutGroupConfig);
                 }
             }
@@ -343,7 +347,9 @@
                 features,
                 React__namespace.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement))));
         }
-        return React.forwardRef(MotionComponent);
+        const ForwardRefComponent = React.forwardRef(MotionComponent);
+        ForwardRefComponent[motionComponentSymbol] = Component;
+        return ForwardRefComponent;
     }
     function useLayoutId({ layoutId }) {
         const layoutGroupId = React.useContext(LayoutGroupContext).id;
@@ -477,6 +483,7 @@
         "rotate",
         "rotateX",
         "rotateY",
+        "rotateZ",
         "skew",
         "skewX",
         "skewY",
@@ -3403,7 +3410,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.3.0";
+            this.version = "7.3.3";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -5379,7 +5386,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "7.3.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.3.0 may not work as expected.`);
+                    warnOnce(nextValue.version === "7.3.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.3.3 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -9947,6 +9954,28 @@
         return useConstant(createDragControls);
     }
 
+    /**
+     * Checks if a component is a `motion` component.
+     */
+    function isMotionComponent(component) {
+        return (component !== null &&
+            typeof component === "object" &&
+            motionComponentSymbol in component);
+    }
+
+    /**
+     * Unwraps a `motion` component and returns either a string for `motion.div` or
+     * the React component for `motion(Component)`.
+     *
+     * If the component is not a `motion` component it returns undefined.
+     */
+    function unwrapMotionComponent(component) {
+        if (isMotionComponent(component)) {
+            return component[motionComponentSymbol];
+        }
+        return undefined;
+    }
+
     function useInstantLayoutTransition() {
         return startTransition;
     }
@@ -10109,6 +10138,7 @@
     exports.filterProps = filterProps;
     exports.isBrowser = isBrowser;
     exports.isDragActive = isDragActive;
+    exports.isMotionComponent = isMotionComponent;
     exports.isMotionValue = isMotionValue;
     exports.isValidMotionProp = isValidMotionProp;
     exports.m = m;
@@ -10117,6 +10147,7 @@
     exports.motionValue = motionValue;
     exports.resolveMotionValue = resolveMotionValue;
     exports.transform = transform;
+    exports.unwrapMotionComponent = unwrapMotionComponent;
     exports.useAnimation = useAnimation;
     exports.useAnimationControls = useAnimationControls;
     exports.useAnimationFrame = useAnimationFrame;