framer-motion 8.2.4 → 8.3.0

package/dist/cjs/index.js

@@ -1057,10 +1057,20 @@ function createUseRender(forwardMotionProps = false) {
             ...visualProps,
             ref,
         };
+        /**
+         * If component has been handed a motion value as its child,
+         * memoise its initial value and render that. Subsequent updates
+         * will be handled by the onChange handler
+         */
+        const { children } = props;
+        const renderedChildren = React.useMemo(() => (isMotionValue(children) ? children.get() : children), [children]);
         if (projectionId) {
             elementProps["data-projection-id"] = projectionId;
         }
-        return React.createElement(Component, elementProps);
+        return React.createElement(Component, {
+            ...elementProps,
+            children: renderedChildren,
+        });
     };
     return useRender;
 }
@@ -2062,7 +2072,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.2.4";
+        this.version = "8.3.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -5918,7 +5928,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "8.2.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.2.4 may not work as expected.`);
+                warnOnce(nextValue.version === "8.3.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.3.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -6147,7 +6157,7 @@ class VisualElement {
             return 0;
         return this.sortInstanceNodePosition(this.current, other.current);
     }
-    loadFeatures(renderedProps, isStrict, preloadedFeatures, projectionId, ProjectionNodeConstructor, initialLayoutGroupConfig) {
+    loadFeatures({ children, ...renderedProps }, isStrict, preloadedFeatures, projectionId, ProjectionNodeConstructor, initialLayoutGroupConfig) {
         const features = [];
         /**
          * If we're in development mode, check to make sure we're not rendering a motion component
@@ -6252,6 +6262,9 @@ class VisualElement {
             }
         }
         this.prevMotionValues = updateMotionValuesFromProps(this, this.scrapeMotionValuesFromProps(props, prevProps), this.prevMotionValues);
+        if (this.handleChildMotionValue) {
+            this.handleChildMotionValue();
+        }
     }
     getProps() {
         return this.props;
@@ -6481,6 +6494,19 @@ class HTMLVisualElement extends DOMVisualElement {
     scrapeMotionValuesFromProps(props, prevProps) {
         return scrapeMotionValuesFromProps$1(props, prevProps);
     }
+    handleChildMotionValue() {
+        if (this.childSubscription) {
+            this.childSubscription();
+            delete this.childSubscription;
+        }
+        const { children } = this.props;
+        if (isMotionValue(children)) {
+            this.childSubscription = children.on("change", (latest) => {
+                if (this.current)
+                    this.current.textContent = `${latest}`;
+            });
+        }
+    }
     renderInstance(instance, renderState, styleProp, projection) {
         renderHTML(instance, renderState, styleProp, projection);
     }

package/dist/es/render/VisualElement.mjs

@@ -209,7 +209,7 @@ class VisualElement {
             return 0;
         return this.sortInstanceNodePosition(this.current, other.current);
     }
-    loadFeatures(renderedProps, isStrict, preloadedFeatures, projectionId, ProjectionNodeConstructor, initialLayoutGroupConfig) {
+    loadFeatures({ children, ...renderedProps }, isStrict, preloadedFeatures, projectionId, ProjectionNodeConstructor, initialLayoutGroupConfig) {
         const features = [];
         /**
          * If we're in development mode, check to make sure we're not rendering a motion component
@@ -314,6 +314,9 @@ class VisualElement {
             }
         }
         this.prevMotionValues = updateMotionValuesFromProps(this, this.scrapeMotionValuesFromProps(props, prevProps), this.prevMotionValues);
+        if (this.handleChildMotionValue) {
+            this.handleChildMotionValue();
+        }
     }
     getProps() {
         return this.props;

package/dist/es/render/dom/use-render.mjs

@@ -1,8 +1,9 @@
-import { createElement } from 'react';
+import { useMemo, createElement } from 'react';
 import { useHTMLProps } from '../html/use-props.mjs';
 import { filterProps } from './utils/filter-props.mjs';
 import { isSVGComponent } from './utils/is-svg-component.mjs';
 import { useSVGProps } from '../svg/use-props.mjs';
+import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
 
 function createUseRender(forwardMotionProps = false) {
     const useRender = (Component, props, projectionId, ref, { latestValues }, isStatic) => {
@@ -16,10 +17,20 @@ function createUseRender(forwardMotionProps = false) {
             ...visualProps,
             ref,
         };
+        /**
+         * If component has been handed a motion value as its child,
+         * memoise its initial value and render that. Subsequent updates
+         * will be handled by the onChange handler
+         */
+        const { children } = props;
+        const renderedChildren = useMemo(() => (isMotionValue(children) ? children.get() : children), [children]);
         if (projectionId) {
             elementProps["data-projection-id"] = projectionId;
         }
-        return createElement(Component, elementProps);
+        return createElement(Component, {
+            ...elementProps,
+            children: renderedChildren,
+        });
     };
     return useRender;
 }

package/dist/es/render/html/HTMLVisualElement.mjs

@@ -6,6 +6,7 @@ import { renderHTML } from './utils/render.mjs';
 import { getDefaultValueType } from '../dom/value-types/defaults.mjs';
 import { measureViewportBox } from '../../projection/utils/measure.mjs';
 import { DOMVisualElement } from '../dom/DOMVisualElement.mjs';
+import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
 
 function getComputedStyle(element) {
     return window.getComputedStyle(element);
@@ -33,6 +34,19 @@ class HTMLVisualElement extends DOMVisualElement {
     scrapeMotionValuesFromProps(props, prevProps) {
         return scrapeMotionValuesFromProps(props, prevProps);
     }
+    handleChildMotionValue() {
+        if (this.childSubscription) {
+            this.childSubscription();
+            delete this.childSubscription;
+        }
+        const { children } = this.props;
+        if (isMotionValue(children)) {
+            this.childSubscription = children.on("change", (latest) => {
+                if (this.current)
+                    this.current.textContent = `${latest}`;
+            });
+        }
+    }
     renderInstance(instance, renderState, styleProp, projection) {
         renderHTML(instance, renderState, styleProp, projection);
     }

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

package/dist/framer-motion.dev.js

@@ -1055,10 +1055,20 @@
                 ...visualProps,
                 ref,
             };
+            /**
+             * If component has been handed a motion value as its child,
+             * memoise its initial value and render that. Subsequent updates
+             * will be handled by the onChange handler
+             */
+            const { children } = props;
+            const renderedChildren = React.useMemo(() => (isMotionValue(children) ? children.get() : children), [children]);
             if (projectionId) {
                 elementProps["data-projection-id"] = projectionId;
             }
-            return React.createElement(Component, elementProps);
+            return React.createElement(Component, {
+                ...elementProps,
+                children: renderedChildren,
+            });
         };
         return useRender;
     }
@@ -2060,7 +2070,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.2.4";
+            this.version = "8.3.0";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -5931,7 +5941,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "8.2.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.2.4 may not work as expected.`);
+                    warnOnce(nextValue.version === "8.3.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.3.0 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -6160,7 +6170,7 @@
                 return 0;
             return this.sortInstanceNodePosition(this.current, other.current);
         }
-        loadFeatures(renderedProps, isStrict, preloadedFeatures, projectionId, ProjectionNodeConstructor, initialLayoutGroupConfig) {
+        loadFeatures({ children, ...renderedProps }, isStrict, preloadedFeatures, projectionId, ProjectionNodeConstructor, initialLayoutGroupConfig) {
             const features = [];
             /**
              * If we're in development mode, check to make sure we're not rendering a motion component
@@ -6264,6 +6274,9 @@
                 }
             }
             this.prevMotionValues = updateMotionValuesFromProps(this, this.scrapeMotionValuesFromProps(props, prevProps), this.prevMotionValues);
+            if (this.handleChildMotionValue) {
+                this.handleChildMotionValue();
+            }
         }
         getProps() {
             return this.props;
@@ -6493,6 +6506,19 @@
         scrapeMotionValuesFromProps(props, prevProps) {
             return scrapeMotionValuesFromProps$1(props, prevProps);
         }
+        handleChildMotionValue() {
+            if (this.childSubscription) {
+                this.childSubscription();
+                delete this.childSubscription;
+            }
+            const { children } = this.props;
+            if (isMotionValue(children)) {
+                this.childSubscription = children.on("change", (latest) => {
+                    if (this.current)
+                        this.current.textContent = `${latest}`;
+                });
+            }
+        }
         renderInstance(instance, renderState, styleProp, projection) {
             renderHTML(instance, renderState, styleProp, projection);
         }