framer-motion 5.3.1 → 5.3.2

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

@@ -59,7 +59,7 @@ function useIntersectionObserver(shouldObserve, state, visualElement, _a) {
             var callback = isIntersecting
                 ? props.onViewportEnter
                 : props.onViewportLeave;
-            callback === null || callback === void 0 ? void 0 : callback();
+            callback === null || callback === void 0 ? void 0 : callback(entry);
         };
         return observeIntersection(visualElement.getInstance(), options, intersectionCallback);
     }, [shouldObserve, root, rootMargin, amount]);
@@ -88,7 +88,7 @@ function useMissingIntersectionObserver(shouldObserve, state, visualElement) {
             var _a;
             state.hasEnteredView = true;
             var onViewportEnter = visualElement.getProps().onViewportEnter;
-            onViewportEnter === null || onViewportEnter === void 0 ? void 0 : onViewportEnter();
+            onViewportEnter === null || onViewportEnter === void 0 ? void 0 : onViewportEnter(null);
             (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.InView, true);
         });
     }, [shouldObserve]);

package/dist/es/render/html/use-props.mjs

@@ -38,12 +38,14 @@ function useHTMLProps(props, visualState, isStatic) {
     // The `any` isn't ideal but it is the type of createElement props argument
     var htmlProps = {};
     var style = useStyle(props, visualState, isStatic);
-    if (Boolean(props.drag)) {
+    if (Boolean(props.drag) && props.dragListener !== false) {
         // Disable the ghost element when a user drags
         htmlProps.draggable = false;
         // Disable text selection
-        style.userSelect = style.WebkitUserSelect = style.WebkitTouchCallout =
-            "none";
+        style.userSelect =
+            style.WebkitUserSelect =
+                style.WebkitTouchCallout =
+                    "none";
         // Disable scrolling on the draggable direction
         style.touchAction =
             props.drag === true

package/dist/es/utils/use-force-update.mjs

@@ -1,17 +1,21 @@
 import { __read } from 'tslib';
-import { useCallback, useRef, useState } from 'react';
+import sync from 'framesync';
+import { useRef, useState, useCallback } from 'react';
 import { useUnmountEffect } from './use-unmount-effect.mjs';
 
 function useForceUpdate() {
-    var unloadingRef = useRef(false);
+    var isUnmountingRef = useRef(false);
     var _a = __read(useState(0), 2), forcedRenderCount = _a[0], setForcedRenderCount = _a[1];
-    useUnmountEffect(function () { return (unloadingRef.current = true); });
-    return [
-        useCallback(function () {
-            !unloadingRef.current && setForcedRenderCount(forcedRenderCount + 1);
-        }, [forcedRenderCount]),
-        forcedRenderCount,
-    ];
+    useUnmountEffect(function () { return (isUnmountingRef.current = true); });
+    var forceRender = useCallback(function () {
+        !isUnmountingRef.current && setForcedRenderCount(forcedRenderCount + 1);
+    }, [forcedRenderCount]);
+    /**
+     * Defer this to the end of the next animation frame in case there are multiple
+     * synchronous calls.
+     */
+    var deferredForceRender = useCallback(function () { return sync.postRender(forceRender); }, [forceRender]);
+    return [deferredForceRender, forcedRenderCount];
 }
 
 export { useForceUpdate };

package/dist/framer-motion.cjs.js

@@ -3310,12 +3310,14 @@ function useHTMLProps(props, visualState, isStatic) {
     // The `any` isn't ideal but it is the type of createElement props argument
     var htmlProps = {};
     var style = useStyle(props, visualState, isStatic);
-    if (Boolean(props.drag)) {
+    if (Boolean(props.drag) && props.dragListener !== false) {
         // Disable the ghost element when a user drags
         htmlProps.draggable = false;
         // Disable text selection
-        style.userSelect = style.WebkitUserSelect = style.WebkitTouchCallout =
-            "none";
+        style.userSelect =
+            style.WebkitUserSelect =
+                style.WebkitTouchCallout =
+                    "none";
         // Disable scrolling on the draggable direction
         style.touchAction =
             props.drag === true
@@ -4191,7 +4193,7 @@ function useIntersectionObserver(shouldObserve, state, visualElement, _a) {
             var callback = isIntersecting
                 ? props.onViewportEnter
                 : props.onViewportLeave;
-            callback === null || callback === void 0 ? void 0 : callback();
+            callback === null || callback === void 0 ? void 0 : callback(entry);
         };
         return observeIntersection(visualElement.getInstance(), options, intersectionCallback);
     }, [shouldObserve, root, rootMargin, amount]);
@@ -4220,7 +4222,7 @@ function useMissingIntersectionObserver(shouldObserve, state, visualElement) {
             var _a;
             state.hasEnteredView = true;
             var onViewportEnter = visualElement.getProps().onViewportEnter;
-            onViewportEnter === null || onViewportEnter === void 0 ? void 0 : onViewportEnter();
+            onViewportEnter === null || onViewportEnter === void 0 ? void 0 : onViewportEnter(null);
             (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.InView, true);
         });
     }, [shouldObserve]);
@@ -6978,15 +6980,18 @@ function createDomMotionComponent(key) {
 var m = createMotionProxy(createDomMotionConfig);
 
 function useForceUpdate() {
-    var unloadingRef = React.useRef(false);
+    var isUnmountingRef = React.useRef(false);
     var _a = tslib.__read(React.useState(0), 2), forcedRenderCount = _a[0], setForcedRenderCount = _a[1];
-    useUnmountEffect(function () { return (unloadingRef.current = true); });
-    return [
-        React.useCallback(function () {
-            !unloadingRef.current && setForcedRenderCount(forcedRenderCount + 1);
-        }, [forcedRenderCount]),
-        forcedRenderCount,
-    ];
+    useUnmountEffect(function () { return (isUnmountingRef.current = true); });
+    var forceRender = React.useCallback(function () {
+        !isUnmountingRef.current && setForcedRenderCount(forcedRenderCount + 1);
+    }, [forcedRenderCount]);
+    /**
+     * Defer this to the end of the next animation frame in case there are multiple
+     * synchronous calls.
+     */
+    var deferredForceRender = React.useCallback(function () { return sync__default['default'].postRender(forceRender); }, [forceRender]);
+    return [deferredForceRender, forcedRenderCount];
 }
 
 var presenceId = 0;

package/dist/framer-motion.dev.js

@@ -4541,12 +4541,14 @@
         // The `any` isn't ideal but it is the type of createElement props argument
         var htmlProps = {};
         var style = useStyle(props, visualState, isStatic);
-        if (Boolean(props.drag)) {
+        if (Boolean(props.drag) && props.dragListener !== false) {
             // Disable the ghost element when a user drags
             htmlProps.draggable = false;
             // Disable text selection
-            style.userSelect = style.WebkitUserSelect = style.WebkitTouchCallout =
-                "none";
+            style.userSelect =
+                style.WebkitUserSelect =
+                    style.WebkitTouchCallout =
+                        "none";
             // Disable scrolling on the draggable direction
             style.touchAction =
                 props.drag === true
@@ -5422,7 +5424,7 @@
                 var callback = isIntersecting
                     ? props.onViewportEnter
                     : props.onViewportLeave;
-                callback === null || callback === void 0 ? void 0 : callback();
+                callback === null || callback === void 0 ? void 0 : callback(entry);
             };
             return observeIntersection(visualElement.getInstance(), options, intersectionCallback);
         }, [shouldObserve, root, rootMargin, amount]);
@@ -5451,7 +5453,7 @@
                 var _a;
                 state.hasEnteredView = true;
                 var onViewportEnter = visualElement.getProps().onViewportEnter;
-                onViewportEnter === null || onViewportEnter === void 0 ? void 0 : onViewportEnter();
+                onViewportEnter === null || onViewportEnter === void 0 ? void 0 : onViewportEnter(null);
                 (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.InView, true);
             });
         }, [shouldObserve]);
@@ -8209,15 +8211,18 @@
     var m = createMotionProxy(createDomMotionConfig);
 
     function useForceUpdate() {
-        var unloadingRef = React.useRef(false);
+        var isUnmountingRef = React.useRef(false);
         var _a = __read(React.useState(0), 2), forcedRenderCount = _a[0], setForcedRenderCount = _a[1];
-        useUnmountEffect(function () { return (unloadingRef.current = true); });
-        return [
-            React.useCallback(function () {
-                !unloadingRef.current && setForcedRenderCount(forcedRenderCount + 1);
-            }, [forcedRenderCount]),
-            forcedRenderCount,
-        ];
+        useUnmountEffect(function () { return (isUnmountingRef.current = true); });
+        var forceRender = React.useCallback(function () {
+            !isUnmountingRef.current && setForcedRenderCount(forcedRenderCount + 1);
+        }, [forcedRenderCount]);
+        /**
+         * Defer this to the end of the next animation frame in case there are multiple
+         * synchronous calls.
+         */
+        var deferredForceRender = React.useCallback(function () { return sync.postRender(forceRender); }, [forceRender]);
+        return [deferredForceRender, forcedRenderCount];
     }
 
     var presenceId = 0;