framer-motion 6.3.16 → 6.4.0

package/dist/cjs/index.js

@@ -8,6 +8,7 @@ var heyListen = require('hey-listen');
 var sync = require('framesync');
 var popmotion = require('popmotion');
 var styleValueTypes = require('style-value-types');
+var dom = require('@motionone/dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -472,7 +473,7 @@ var MotionValue = /** @class */ (function () {
          * 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 = "6.3.16";
+        this.version = "6.4.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -5983,7 +5984,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "6.3.16", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.3.16 may not work as expected."));
+                warnOnce(nextValue.version === "6.4.0", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.4.0 may not work as expected."));
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -8185,6 +8186,27 @@ function useCycle() {
     return [item, runCycle];
 }
 
+function useInView(ref, _a) {
+    var _b = _a === void 0 ? {} : _a, root = _b.root, margin = _b.margin, amount = _b.amount, _c = _b.once, once = _c === void 0 ? false : _c;
+    var _d = tslib.__read(React.useState(false), 2), isInView = _d[0], setInView = _d[1];
+    React.useEffect(function () {
+        var _a;
+        if (!ref.current || (once && isInView))
+            return;
+        var onEnter = function () {
+            setInView(true);
+            return once ? undefined : function () { return setInView(false); };
+        };
+        var options = {
+            root: (_a = root === null || root === void 0 ? void 0 : root.current) !== null && _a !== void 0 ? _a : undefined,
+            margin: margin,
+            amount: amount === "some" ? "any" : amount,
+        };
+        return dom.inView(ref.current, onEnter, options);
+    }, [root, ref, margin, once]);
+    return isInView;
+}
+
 /**
  * Can manually trigger a drag gesture on one or more `drag`-enabled `motion` components.
  *
@@ -8458,6 +8480,7 @@ exports.useDomEvent = useDomEvent;
 exports.useDragControls = useDragControls;
 exports.useElementScroll = useElementScroll;
 exports.useForceUpdate = useForceUpdate;
+exports.useInView = useInView;
 exports.useInstantLayoutTransition = useInstantLayoutTransition;
 exports.useInstantTransition = useInstantTransition;
 exports.useIsPresent = useIsPresent;

package/dist/es/index.mjs

@@ -28,6 +28,7 @@ export { useCycle } from './utils/use-cycle.mjs';
 export { transform } from './utils/transform.mjs';
 export { isValidMotionProp } from './motion/utils/valid-prop.mjs';
 export { useIsPresent, usePresence } from './components/AnimatePresence/use-presence.mjs';
+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';

package/dist/es/render/utils/motion-values.mjs

@@ -18,7 +18,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "6.3.16", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.3.16 may not work as expected."));
+                warnOnce(nextValue.version === "6.4.0", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.4.0 may not work as expected."));
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/utils/use-in-view.mjs

@@ -0,0 +1,26 @@
+import { __read } from 'tslib';
+import { useState, useEffect } from 'react';
+import { inView } from '@motionone/dom';
+
+function useInView(ref, _a) {
+    var _b = _a === void 0 ? {} : _a, root = _b.root, margin = _b.margin, amount = _b.amount, _c = _b.once, once = _c === void 0 ? false : _c;
+    var _d = __read(useState(false), 2), isInView = _d[0], setInView = _d[1];
+    useEffect(function () {
+        var _a;
+        if (!ref.current || (once && isInView))
+            return;
+        var onEnter = function () {
+            setInView(true);
+            return once ? undefined : function () { return setInView(false); };
+        };
+        var options = {
+            root: (_a = root === null || root === void 0 ? void 0 : root.current) !== null && _a !== void 0 ? _a : undefined,
+            margin: margin,
+            amount: amount === "some" ? "any" : amount,
+        };
+        return inView(ref.current, onEnter, options);
+    }, [root, ref, margin, once]);
+    return isInView;
+}
+
+export { useInView };

package/dist/es/value/index.mjs

@@ -25,7 +25,7 @@ var MotionValue = /** @class */ (function () {
          * 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 = "6.3.16";
+        this.version = "6.4.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/framer-motion.dev.js

@@ -1706,7 +1706,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 = "6.3.16";
+            this.version = "6.4.0";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -7217,7 +7217,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "6.3.16", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.3.16 may not work as expected."));
+                    warnOnce(nextValue.version === "6.4.0", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.4.0 may not work as expected."));
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -9419,6 +9419,96 @@
         return [item, runCycle];
     }
 
+    function resolveElements(elements, selectorCache) {
+        var _a;
+        if (typeof elements === "string") {
+            if (selectorCache) {
+                (_a = selectorCache[elements]) !== null && _a !== void 0 ? _a : (selectorCache[elements] = document.querySelectorAll(elements));
+                elements = selectorCache[elements];
+            }
+            else {
+                elements = document.querySelectorAll(elements);
+            }
+        }
+        else if (elements instanceof Element) {
+            elements = [elements];
+        }
+        /**
+         * Return an empty array
+         */
+        return Array.from(elements || []);
+    }
+
+    const thresholds = {
+        any: 0,
+        all: 1,
+    };
+    function inView(elements, onStart, { root, margin: rootMargin, amount = "any" } = {}) {
+        /**
+         * If this browser doesn't support IntersectionObserver, return a dummy stop function.
+         * Default triggering of onStart is tricky - it could be used for starting/stopping
+         * videos, lazy loading content etc. We could provide an option to enable a fallback, or
+         * provide a fallback callback option.
+         */
+        if (typeof IntersectionObserver === "undefined") {
+            return () => { };
+        }
+        const resolvedElements = resolveElements(elements);
+        const activeIntersections = new WeakMap();
+        const onIntersectionChange = (entries) => {
+            entries.forEach((entry) => {
+                const onEnd = activeIntersections.get(entry.target);
+                /**
+                 * If there's no change to the intersection, we don't need to
+                 * do anything here.
+                 */
+                if (entry.isIntersecting === Boolean(onEnd))
+                    return;
+                if (entry.isIntersecting) {
+                    const newOnEnd = onStart(entry);
+                    if (typeof newOnEnd === "function") {
+                        activeIntersections.set(entry.target, newOnEnd);
+                    }
+                    else {
+                        observer.unobserve(entry.target);
+                    }
+                }
+                else if (onEnd) {
+                    onEnd(entry);
+                    activeIntersections.delete(entry.target);
+                }
+            });
+        };
+        const observer = new IntersectionObserver(onIntersectionChange, {
+            root,
+            rootMargin,
+            threshold: typeof amount === "number" ? amount : thresholds[amount],
+        });
+        resolvedElements.forEach((element) => observer.observe(element));
+        return () => observer.disconnect();
+    }
+
+    function useInView(ref, _a) {
+        var _b = _a === void 0 ? {} : _a, root = _b.root, margin = _b.margin, amount = _b.amount, _c = _b.once, once = _c === void 0 ? false : _c;
+        var _d = __read(React.useState(false), 2), isInView = _d[0], setInView = _d[1];
+        React.useEffect(function () {
+            var _a;
+            if (!ref.current || (once && isInView))
+                return;
+            var onEnter = function () {
+                setInView(true);
+                return once ? undefined : function () { return setInView(false); };
+            };
+            var options = {
+                root: (_a = root === null || root === void 0 ? void 0 : root.current) !== null && _a !== void 0 ? _a : undefined,
+                margin: margin,
+                amount: amount === "some" ? "any" : amount,
+            };
+            return inView(ref.current, onEnter, options);
+        }, [root, ref, margin, once]);
+        return isInView;
+    }
+
     /**
      * Can manually trigger a drag gesture on one or more `drag`-enabled `motion` components.
      *
@@ -9692,6 +9782,7 @@
     exports.useDragControls = useDragControls;
     exports.useElementScroll = useElementScroll;
     exports.useForceUpdate = useForceUpdate;
+    exports.useInView = useInView;
     exports.useInstantLayoutTransition = useInstantLayoutTransition;
     exports.useInstantTransition = useInstantTransition;
     exports.useIsPresent = useIsPresent;