framer-motion 9.1.0 → 9.1.2

package/dist/es/render/dom/scroll/offsets/offset.mjs

@@ -0,0 +1,35 @@
+import { namedEdges, resolveEdge } from './edge.mjs';
+
+const defaultOffset = [0, 0];
+function resolveOffset(offset, containerLength, targetLength, targetInset) {
+    let offsetDefinition = Array.isArray(offset) ? offset : defaultOffset;
+    let targetPoint = 0;
+    let containerPoint = 0;
+    if (typeof offset === "number") {
+        /**
+         * If we're provided offset: [0, 0.5, 1] then each number x should become
+         * [x, x], so we default to the behaviour of mapping 0 => 0 of both target
+         * and container etc.
+         */
+        offsetDefinition = [offset, offset];
+    }
+    else if (typeof offset === "string") {
+        offset = offset.trim();
+        if (offset.includes(" ")) {
+            offsetDefinition = offset.split(" ");
+        }
+        else {
+            /**
+             * If we're provided a definition like "100px" then we want to apply
+             * that only to the top of the target point, leaving the container at 0.
+             * Whereas a named offset like "end" should be applied to both.
+             */
+            offsetDefinition = [offset, namedEdges[offset] ? offset : `0`];
+        }
+    }
+    targetPoint = resolveEdge(offsetDefinition[0], targetLength, targetInset);
+    containerPoint = resolveEdge(offsetDefinition[1], containerLength);
+    return targetPoint - containerPoint;
+}
+
+export { resolveOffset };

package/dist/es/render/dom/scroll/offsets/presets.mjs

@@ -0,0 +1,20 @@
+const ScrollOffset = {
+    Enter: [
+        [0, 1],
+        [1, 1],
+    ],
+    Exit: [
+        [0, 0],
+        [1, 0],
+    ],
+    Any: [
+        [1, 0],
+        [0, 1],
+    ],
+    All: [
+        [0, 0],
+        [1, 1],
+    ],
+};
+
+export { ScrollOffset };

package/dist/es/render/dom/scroll/on-scroll-handler.mjs

@@ -0,0 +1,38 @@
+import { updateScrollInfo } from './info.mjs';
+import { resolveOffsets } from './offsets/index.mjs';
+
+function measure(container, target = container, info) {
+    /**
+     * Find inset of target within scrollable container
+     */
+    info.x.targetOffset = 0;
+    info.y.targetOffset = 0;
+    if (target !== container) {
+        let node = target;
+        while (node && node !== container) {
+            info.x.targetOffset += node.offsetLeft;
+            info.y.targetOffset += node.offsetTop;
+            node = node.offsetParent;
+        }
+    }
+    info.x.targetLength =
+        target === container ? target.scrollWidth : target.clientWidth;
+    info.y.targetLength =
+        target === container ? target.scrollHeight : target.clientHeight;
+    info.x.containerLength = container.clientWidth;
+    info.y.containerLength = container.clientHeight;
+}
+function createOnScrollHandler(element, onScroll, info, options = {}) {
+    return {
+        measure: () => measure(element, options.target, info),
+        update: (time) => {
+            updateScrollInfo(element, info, time);
+            if (options.offset || options.target) {
+                resolveOffsets(element, info, options);
+            }
+        },
+        notify: () => onScroll(info),
+    };
+}
+
+export { createOnScrollHandler };

package/dist/es/render/dom/utils/css-variables-conversion.mjs

@@ -1,8 +1,6 @@
-import { invariant } from 'hey-listen';
+import { invariant } from '../../../utils/errors.mjs';
+import { isCSSVariableToken } from './is-css-variable.mjs';
 
-function isCSSVariable(value) {
-    return typeof value === "string" && value.startsWith("var(--");
-}
 /**
  * Parse Framer's special CSS variable format into a CSS token and a fallback.
  *
@@ -32,7 +30,7 @@ function getVariableValue(current, element, depth = 1) {
     if (resolved) {
         return resolved.trim();
     }
-    else if (isCSSVariable(fallback)) {
+    else if (isCSSVariableToken(fallback)) {
         // The fallback might itself be a CSS variable, in which case we attempt to resolve it too.
         return getVariableValue(fallback, element, depth + 1);
     }
@@ -57,7 +55,7 @@ function resolveCSSVariables(visualElement, { ...target }, transitionEnd) {
     // Go through existing `MotionValue`s and ensure any existing CSS variables are resolved
     visualElement.values.forEach((value) => {
         const current = value.get();
-        if (!isCSSVariable(current))
+        if (!isCSSVariableToken(current))
             return;
         const resolved = getVariableValue(current, element);
         if (resolved)
@@ -67,7 +65,7 @@ function resolveCSSVariables(visualElement, { ...target }, transitionEnd) {
     // we only read single-var properties like `var(--foo)`, not `calc(var(--foo) + 20px)`
     for (const key in target) {
         const current = target[key];
-        if (!isCSSVariable(current))
+        if (!isCSSVariableToken(current))
             continue;
         const resolved = getVariableValue(current, element);
         if (!resolved)

package/dist/es/render/dom/utils/is-css-variable.mjs

@@ -1,8 +1,5 @@
-/**
- * Returns true if the provided key is a CSS variable
- */
-function isCSSVariable(key) {
-    return key.startsWith("--");
-}
+const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
+const isCSSVariableName = checkStringStartsWith("--");
+const isCSSVariableToken = checkStringStartsWith("var(--");
 
-export { isCSSVariable };
+export { isCSSVariableName, isCSSVariableToken };

package/dist/es/render/dom/utils/resolve-element.mjs

@@ -0,0 +1,21 @@
+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 || []);
+}
+
+export { resolveElements };

package/dist/es/render/dom/utils/unit-conversion.mjs

@@ -1,5 +1,5 @@
 import { isKeyframesTarget } from '../../../animation/utils/is-keyframes-target.mjs';
-import { invariant } from 'hey-listen';
+import { invariant } from '../../../utils/errors.mjs';
 import { transformPropOrder } from '../../html/utils/transform.mjs';
 import { findDimensionValueType } from '../value-types/dimensions.mjs';
 import { isBrowser } from '../../../utils/is-browser.mjs';
@@ -21,15 +21,6 @@ const hasPositionalKey = (target) => {
     return Object.keys(target).some(isPositionalKey);
 };
 const isNumOrPxType = (v) => v === number || v === px;
-var BoundingBoxDimension;
-(function (BoundingBoxDimension) {
-    BoundingBoxDimension["width"] = "width";
-    BoundingBoxDimension["height"] = "height";
-    BoundingBoxDimension["left"] = "left";
-    BoundingBoxDimension["right"] = "right";
-    BoundingBoxDimension["top"] = "top";
-    BoundingBoxDimension["bottom"] = "bottom";
-})(BoundingBoxDimension || (BoundingBoxDimension = {}));
 const getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(", ")[pos]);
 const getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => {
     if (transform === "none" || !transform)
@@ -225,4 +216,4 @@ function unitConversion(visualElement, target, origin, transitionEnd) {
         : { target, transitionEnd };
 }
 
-export { BoundingBoxDimension, positionalValues, unitConversion };
+export { positionalValues, unitConversion };

package/dist/es/render/dom/viewport/index.mjs

@@ -0,0 +1,52 @@
+import { resolveElements } from '../utils/resolve-element.mjs';
+
+const thresholds = {
+    any: 0,
+    all: 1,
+};
+function inView(elementOrSelector, 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 elements = resolveElements(elementOrSelector);
+    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],
+    });
+    elements.forEach((element) => observer.observe(element));
+    return () => observer.disconnect();
+}
+
+export { inView };

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

@@ -1,5 +1,5 @@
 import { buildHTMLStyles } from './utils/build-styles.mjs';
-import { isCSSVariable } from '../dom/utils/is-css-variable.mjs';
+import { isCSSVariableName } from '../dom/utils/is-css-variable.mjs';
 import { transformProps } from './utils/transform.mjs';
 import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
 import { renderHTML } from './utils/render.mjs';
@@ -19,7 +19,7 @@ class HTMLVisualElement extends DOMVisualElement {
         }
         else {
             const computedStyle = getComputedStyle(instance);
-            const value = (isCSSVariable(key)
+            const value = (isCSSVariableName(key)
                 ? computedStyle.getPropertyValue(key)
                 : computedStyle[key]) || 0;
             return typeof value === "string" ? value.trim() : value;

package/dist/es/render/html/utils/build-styles.mjs

@@ -1,5 +1,5 @@
 import { buildTransform } from './build-transform.mjs';
-import { isCSSVariable } from '../../dom/utils/is-css-variable.mjs';
+import { isCSSVariableName } from '../../dom/utils/is-css-variable.mjs';
 import { transformProps } from './transform.mjs';
 import { getValueAsType } from '../../dom/value-types/get-as-type.mjs';
 import { numberValueTypes } from '../../dom/value-types/number.mjs';
@@ -22,7 +22,7 @@ function buildHTMLStyles(state, latestValues, options, transformTemplate) {
         /**
          * If this is a CSS variable we don't do any further processing.
          */
-        if (isCSSVariable(key)) {
+        if (isCSSVariableName(key)) {
             vars[key] = value;
             continue;
         }

package/dist/es/render/utils/animation-state.mjs

@@ -3,17 +3,16 @@ import { isKeyframesTarget } from '../../animation/utils/is-keyframes-target.mjs
 import { shallowCompare } from '../../utils/shallow-compare.mjs';
 import { animateVisualElement } from './animation.mjs';
 import { isVariantLabel } from './is-variant-label.mjs';
-import { AnimationType } from './types.mjs';
 import { resolveVariant } from './resolve-dynamic-variants.mjs';
 
 const variantPriorityOrder = [
-    AnimationType.Animate,
-    AnimationType.InView,
-    AnimationType.Focus,
-    AnimationType.Hover,
-    AnimationType.Tap,
-    AnimationType.Drag,
-    AnimationType.Exit,
+    "animate" /* AnimationType.Animate */,
+    "whileInView" /* AnimationType.InView */,
+    "whileFocus" /* AnimationType.Focus */,
+    "whileHover" /* AnimationType.Hover */,
+    "whileTap" /* AnimationType.Tap */,
+    "whileDrag" /* AnimationType.Drag */,
+    "exit" /* AnimationType.Exit */,
 ];
 const reversePriorityOrder = [...variantPriorityOrder].reverse();
 const numAnimationTypes = variantPriorityOrder.length;
@@ -276,16 +275,12 @@ function createAnimationState(visualElement) {
      * Change whether a certain animation type is active.
      */
     function setActive(type, isActive, options) {
+        var _a;
         // If the active state hasn't changed, we can safely do nothing here
         if (state[type].isActive === isActive)
             return Promise.resolve();
         // Propagate active change to children
-        if (visualElement.variantChildren) {
-            visualElement.variantChildren.forEach((child) => {
-                child.animationState &&
-                    child.animationState.setActive(type, isActive);
-            });
-        }
+        (_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.forEach((child) => { var _a; return (_a = child.animationState) === null || _a === void 0 ? void 0 : _a.setActive(type, isActive); });
         state[type].isActive = isActive;
         const animations = animateChanges(options, type);
         for (const key in state) {
@@ -319,13 +314,13 @@ function createTypeState(isActive = false) {
 }
 function createState() {
     return {
-        [AnimationType.Animate]: createTypeState(true),
-        [AnimationType.InView]: createTypeState(),
-        [AnimationType.Hover]: createTypeState(),
-        [AnimationType.Tap]: createTypeState(),
-        [AnimationType.Drag]: createTypeState(),
-        [AnimationType.Focus]: createTypeState(),
-        [AnimationType.Exit]: createTypeState(),
+        ["animate" /* AnimationType.Animate */]: createTypeState(true),
+        ["whileInView" /* AnimationType.InView */]: createTypeState(),
+        ["whileHover" /* AnimationType.Hover */]: createTypeState(),
+        ["whileTap" /* AnimationType.Tap */]: createTypeState(),
+        ["whileDrag" /* AnimationType.Drag */]: createTypeState(),
+        ["whileFocus" /* AnimationType.Focus */]: createTypeState(),
+        ["exit" /* AnimationType.Exit */]: createTypeState(),
     };
 }
 

package/dist/es/render/utils/is-controlling-variants.mjs

@@ -1,16 +1,7 @@
 import { isAnimationControls } from '../../animation/utils/is-animation-controls.mjs';
 import { isVariantLabel } from './is-variant-label.mjs';
+import { variantProps } from './variant-props.mjs';
 
-const variantProps = [
-    "initial",
-    "animate",
-    "exit",
-    "whileHover",
-    "whileDrag",
-    "whileTap",
-    "whileFocus",
-    "whileInView",
-];
 function isControllingVariants(props) {
     return (isAnimationControls(props.animate) ||
         variantProps.some((name) => isVariantLabel(props[name])));

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 === "9.1.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.1.0 may not work as expected.`);
+                warnOnce(nextValue.version === "9.1.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.1.2 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/render/utils/variant-props.mjs

@@ -0,0 +1,12 @@
+const variantPriorityOrder = [
+    "animate" /* AnimationType.Animate */,
+    "whileInView" /* AnimationType.InView */,
+    "whileFocus" /* AnimationType.Focus */,
+    "whileHover" /* AnimationType.Hover */,
+    "whileTap" /* AnimationType.Tap */,
+    "whileDrag" /* AnimationType.Drag */,
+    "exit" /* AnimationType.Exit */,
+];
+const variantProps = ["initial", ...variantPriorityOrder];
+
+export { variantPriorityOrder, variantProps };

package/dist/es/utils/errors.mjs

@@ -0,0 +1,18 @@
+import { noop } from './noop.mjs';
+
+let warning = noop;
+let invariant = noop;
+if (process.env.NODE_ENV !== "production") {
+    warning = (check, message) => {
+        if (!check && typeof console !== "undefined") {
+            console.warn(message);
+        }
+    };
+    invariant = (check, message) => {
+        if (!check) {
+            throw new Error(message);
+        }
+    };
+}
+
+export { invariant, warning };

package/dist/es/utils/interpolate.mjs

@@ -1,4 +1,4 @@
-import { invariant } from 'hey-listen';
+import { invariant } from './errors.mjs';
 import { color } from '../value/types/color/index.mjs';
 import { clamp } from './clamp.mjs';
 import { mix } from './mix.mjs';

package/dist/es/utils/mix-color.mjs

@@ -1,5 +1,5 @@
 import { mix } from './mix.mjs';
-import { invariant } from 'hey-listen';
+import { invariant } from './errors.mjs';
 import { hslaToRgba } from './hsla-to-rgba.mjs';
 import { hex } from '../value/types/color/hex.mjs';
 import { rgba } from '../value/types/color/rgba.mjs';

package/dist/es/utils/mix-complex.mjs

@@ -1,7 +1,7 @@
 import { mix } from './mix.mjs';
 import { mixColor } from './mix-color.mjs';
 import { pipe } from './pipe.mjs';
-import { warning } from 'hey-listen';
+import { warning } from './errors.mjs';
 import { color } from '../value/types/color/index.mjs';
 import { complex, analyseComplexValue } from '../value/types/complex/index.mjs';
 

package/dist/es/utils/offsets/default.mjs

@@ -0,0 +1,9 @@
+import { fillOffset } from './fill.mjs';
+
+function defaultOffset(arr) {
+    const offset = [0];
+    fillOffset(offset, arr.length - 1);
+    return offset;
+}
+
+export { defaultOffset };

package/dist/es/utils/offsets/fill.mjs

@@ -0,0 +1,12 @@
+import { mix } from '../mix.mjs';
+import { progress } from '../progress.mjs';
+
+function fillOffset(offset, remaining) {
+    const min = offset[offset.length - 1];
+    for (let i = 1; i <= remaining; i++) {
+        const offsetProgress = progress(0, remaining, i);
+        offset.push(mix(min, 1, offsetProgress));
+    }
+}
+
+export { fillOffset };

package/dist/es/utils/offsets/time.mjs

@@ -0,0 +1,5 @@
+function convertOffsetToTimes(offset, duration) {
+    return offset.map((o) => o * duration);
+}
+
+export { convertOffsetToTimes };

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

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { inView } from '@motionone/dom';
+import { inView } from '../render/dom/viewport/index.mjs';
 
 function useInView(ref, { root, margin, amount, once = false } = {}) {
     const [isInView, setInView] = useState(false);

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 = "9.1.0";
+        this.version = "9.1.2";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/es/value/use-inverted-scale.mjs

@@ -1,5 +1,5 @@
 import { useTransform } from './use-transform.mjs';
-import { invariant, warning } from 'hey-listen';
+import { invariant, warning } from '../utils/errors.mjs';
 import { useMotionValue } from './use-motion-value.mjs';
 import { useVisualElementContext } from '../context/MotionContext/index.mjs';
 

package/dist/es/value/use-scroll.mjs

@@ -1,8 +1,8 @@
-import { scroll } from '@motionone/dom';
 import { motionValue } from './index.mjs';
 import { useConstant } from '../utils/use-constant.mjs';
 import { useEffect } from 'react';
-import { warning } from 'hey-listen';
+import { warning } from '../utils/errors.mjs';
+import { scroll } from '../render/dom/scroll/index.mjs';
 import { useIsomorphicLayoutEffect } from '../utils/use-isomorphic-effect.mjs';
 
 function refWarning(name, ref) {

package/dist/es/value/use-will-change/index.mjs

@@ -1,4 +1,4 @@
-import { isCSSVariable } from '../../render/dom/utils/is-css-variable.mjs';
+import { isCSSVariableName } from '../../render/dom/utils/is-css-variable.mjs';
 import { transformProps } from '../../render/html/utils/transform.mjs';
 import { addUniqueItem, removeItem } from '../../utils/array.mjs';
 import { useConstant } from '../../utils/use-constant.mjs';
@@ -18,7 +18,7 @@ class WillChangeMotionValue extends MotionValue {
             memberName = "transform";
         }
         else if (!name.startsWith("origin") &&
-            !isCSSVariable(name) &&
+            !isCSSVariableName(name) &&
             name !== "willChange") {
             memberName = camelToDash(name);
         }