framer-motion 8.2.4 → 8.3.1

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;
 }
@@ -1537,6 +1547,7 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
         return !isDragActive();
     }
     function onPointerUp(event, info) {
+        var _a, _b, _c, _d;
         if (!checkPointerEnd())
             return;
         /**
@@ -1544,15 +1555,17 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
          * as, or a child of, this component's element
          */
         !isNodeOrChild(visualElement.current, event.target)
-            ? onTapCancel && onTapCancel(event, info)
-            : onTap && onTap(event, info);
+            ? (_b = (_a = visualElement.getProps()).onTapCancel) === null || _b === void 0 ? void 0 : _b.call(_a, event, info)
+            : (_d = (_c = visualElement.getProps()).onTap) === null || _d === void 0 ? void 0 : _d.call(_c, event, info);
     }
     function onPointerCancel(event, info) {
+        var _a, _b;
         if (!checkPointerEnd())
             return;
-        onTapCancel && onTapCancel(event, info);
+        (_b = (_a = visualElement.getProps()).onTapCancel) === null || _b === void 0 ? void 0 : _b.call(_a, event, info);
     }
     const startPress = React.useCallback((event, info) => {
+        var _a, _b;
         removePointerEndListener();
         if (isPressing.current)
             return;
@@ -1563,8 +1576,8 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
          */
         visualElement.animationState &&
             visualElement.animationState.setActive(exports.AnimationType.Tap, true);
-        onTapStart && onTapStart(event, info);
-    }, [onTapStart, visualElement]);
+        (_b = (_a = visualElement.getProps()).onTapStart) === null || _b === void 0 ? void 0 : _b.call(_a, event, info);
+    }, [Boolean(onTapStart), visualElement]);
     usePointerEvent(visualElement, "pointerdown", hasPressListeners ? startPress : undefined, eventOptions);
     useUnmountEffect(removePointerEndListener);
 }
@@ -2062,7 +2075,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.1";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -5918,7 +5931,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.1", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.3.1 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -6147,7 +6160,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 +6265,9 @@ class VisualElement {
             }
         }
         this.prevMotionValues = updateMotionValuesFromProps(this, this.scrapeMotionValuesFromProps(props, prevProps), this.prevMotionValues);
+        if (this.handleChildMotionValue) {
+            this.handleChildMotionValue();
+        }
     }
     getProps() {
         return this.props;
@@ -6481,6 +6497,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/gestures/use-tap-gesture.mjs

@@ -35,6 +35,7 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
         return !isDragActive();
     }
     function onPointerUp(event, info) {
+        var _a, _b, _c, _d;
         if (!checkPointerEnd())
             return;
         /**
@@ -42,15 +43,17 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
          * as, or a child of, this component's element
          */
         !isNodeOrChild(visualElement.current, event.target)
-            ? onTapCancel && onTapCancel(event, info)
-            : onTap && onTap(event, info);
+            ? (_b = (_a = visualElement.getProps()).onTapCancel) === null || _b === void 0 ? void 0 : _b.call(_a, event, info)
+            : (_d = (_c = visualElement.getProps()).onTap) === null || _d === void 0 ? void 0 : _d.call(_c, event, info);
     }
     function onPointerCancel(event, info) {
+        var _a, _b;
         if (!checkPointerEnd())
             return;
-        onTapCancel && onTapCancel(event, info);
+        (_b = (_a = visualElement.getProps()).onTapCancel) === null || _b === void 0 ? void 0 : _b.call(_a, event, info);
     }
     const startPress = useCallback((event, info) => {
+        var _a, _b;
         removePointerEndListener();
         if (isPressing.current)
             return;
@@ -61,8 +64,8 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
          */
         visualElement.animationState &&
             visualElement.animationState.setActive(AnimationType.Tap, true);
-        onTapStart && onTapStart(event, info);
-    }, [onTapStart, visualElement]);
+        (_b = (_a = visualElement.getProps()).onTapStart) === null || _b === void 0 ? void 0 : _b.call(_a, event, info);
+    }, [Boolean(onTapStart), visualElement]);
     usePointerEvent(visualElement, "pointerdown", hasPressListeners ? startPress : undefined, eventOptions);
     useUnmountEffect(removePointerEndListener);
 }

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.1", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.3.1 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.1";
         /**
          * 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;
     }
@@ -1535,6 +1545,7 @@
             return !isDragActive();
         }
         function onPointerUp(event, info) {
+            var _a, _b, _c, _d;
             if (!checkPointerEnd())
                 return;
             /**
@@ -1542,15 +1553,17 @@
              * as, or a child of, this component's element
              */
             !isNodeOrChild(visualElement.current, event.target)
-                ? onTapCancel && onTapCancel(event, info)
-                : onTap && onTap(event, info);
+                ? (_b = (_a = visualElement.getProps()).onTapCancel) === null || _b === void 0 ? void 0 : _b.call(_a, event, info)
+                : (_d = (_c = visualElement.getProps()).onTap) === null || _d === void 0 ? void 0 : _d.call(_c, event, info);
         }
         function onPointerCancel(event, info) {
+            var _a, _b;
             if (!checkPointerEnd())
                 return;
-            onTapCancel && onTapCancel(event, info);
+            (_b = (_a = visualElement.getProps()).onTapCancel) === null || _b === void 0 ? void 0 : _b.call(_a, event, info);
         }
         const startPress = React.useCallback((event, info) => {
+            var _a, _b;
             removePointerEndListener();
             if (isPressing.current)
                 return;
@@ -1561,8 +1574,8 @@
              */
             visualElement.animationState &&
                 visualElement.animationState.setActive(exports.AnimationType.Tap, true);
-            onTapStart && onTapStart(event, info);
-        }, [onTapStart, visualElement]);
+            (_b = (_a = visualElement.getProps()).onTapStart) === null || _b === void 0 ? void 0 : _b.call(_a, event, info);
+        }, [Boolean(onTapStart), visualElement]);
         usePointerEvent(visualElement, "pointerdown", hasPressListeners ? startPress : undefined, eventOptions);
         useUnmountEffect(removePointerEndListener);
     }
@@ -2060,7 +2073,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.1";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -5931,7 +5944,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.1", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.3.1 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -6160,7 +6173,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 +6277,9 @@
                 }
             }
             this.prevMotionValues = updateMotionValuesFromProps(this, this.scrapeMotionValuesFromProps(props, prevProps), this.prevMotionValues);
+            if (this.handleChildMotionValue) {
+                this.handleChildMotionValue();
+            }
         }
         getProps() {
             return this.props;
@@ -6493,6 +6509,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);
         }