framer-motion 11.12.0 → 11.13.0

package/dist/cjs/client.js

@@ -2,6 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var motionUtils = require('motion-utils');
+var motionDom = require('motion-dom');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 
@@ -183,8 +185,6 @@ function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyfr
         : finalKeyframe;
 }
 
-const noop = (any) => any;
-
 function createRenderStep(runNextFrame) {
     /**
      * We create and reuse two queues, one to queue jobs for the current frame
@@ -332,7 +332,7 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
     return { schedule, cancel, state, steps };
 }
 
-const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
+const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : motionUtils.noop, true);
 
 /*
   Bezier function generator
@@ -376,7 +376,7 @@ function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
 function cubicBezier(mX1, mY1, mX2, mY2) {
     // If this is a linear gradient, return linear easing
     if (mX1 === mY1 && mX2 === mY2)
-        return noop;
+        return motionUtils.noop;
     const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
     // If animation is at start/end, return t without easing
     return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
@@ -417,21 +417,6 @@ function isNone(value) {
     }
 }
 
-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);
-        }
-    };
-}
-
 /**
  * Check if value is a numerical string, ie a string that is purely a number eg "100" or "-100.1"
  */
@@ -472,7 +457,7 @@ function parseCSSVariable(current) {
 }
 const maxDepth = 4;
 function getVariableValue(current, element, depth = 1) {
-    invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`);
+    motionUtils.invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`);
     const [token, fallback] = parseCSSVariable(current);
     // No CSS variable detected
     if (!token)
@@ -1360,7 +1345,7 @@ function canAnimate(keyframes, name, type, velocity) {
     const targetKeyframe = keyframes[keyframes.length - 1];
     const isOriginAnimatable = isAnimatable(originKeyframe, name);
     const isTargetAnimatable = isAnimatable(targetKeyframe, name);
-    warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${name} from "${originKeyframe}" to "${targetKeyframe}". ${originKeyframe} is not an animatable value - to enable this animation set ${originKeyframe} to a value animatable to ${targetKeyframe} via the \`style\` property.`);
+    motionUtils.warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${name} from "${originKeyframe}" to "${targetKeyframe}". ${originKeyframe} is not an animatable value - to enable this animation set ${originKeyframe} to a value animatable to ${targetKeyframe} via the \`style\` property.`);
     // Always skip if any of these are true
     if (!isOriginAnimatable || !isTargetAnimatable) {
         return false;
@@ -1553,7 +1538,7 @@ const safeMin = 0.001;
 function findSpring({ duration = springDefaults.duration, bounce = springDefaults.bounce, velocity = springDefaults.velocity, mass = springDefaults.mass, }) {
     let envelope;
     let derivative;
-    warning(duration <= secondsToMilliseconds(springDefaults.maxDuration), "Spring duration must be 10 seconds or less");
+    motionUtils.warning(duration <= secondsToMilliseconds(springDefaults.maxDuration), "Spring duration must be 10 seconds or less");
     let dampingRatio = 1 - bounce;
     /**
      * Restrict dampingRatio and duration to within acceptable ranges.
@@ -1895,7 +1880,7 @@ const isEasingArray = (ease) => {
 const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
 
 const easingLookup = {
-    linear: noop,
+    linear: motionUtils.noop,
     easeIn,
     easeInOut,
     easeOut,
@@ -1910,13 +1895,13 @@ const easingLookup = {
 const easingDefinitionToFunction = (definition) => {
     if (isBezierDefinition(definition)) {
         // If cubic bezier definition, create bezier curve
-        invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`);
+        motionUtils.invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`);
         const [x1, y1, x2, y2] = definition;
         return cubicBezier(x1, y1, x2, y2);
     }
     else if (typeof definition === "string") {
         // Else lookup from table
-        invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`);
+        motionUtils.invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`);
         return easingLookup[definition];
     }
     return definition;
@@ -2014,7 +1999,7 @@ const colorTypes = [hex, rgba, hsla];
 const getColorType = (v) => colorTypes.find((type) => type.test(v));
 function asRGBA(color) {
     const type = getColorType(color);
-    warning(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`);
+    motionUtils.warning(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`);
     if (!Boolean(type))
         return false;
     let model = type.parse(color);
@@ -2133,7 +2118,7 @@ const mixComplex = (origin, target) => {
         return pipe(mixArray(matchOrder(originStats, targetStats), targetStats.values), template);
     }
     else {
-        warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`);
+        motionUtils.warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`);
         return mixImmediate(origin, target);
     }
 };
@@ -2155,7 +2140,7 @@ function createMixers(output, ease, customMixer) {
     for (let i = 0; i < numMixers; i++) {
         let mixer = mixerFactory(output[i], output[i + 1]);
         if (ease) {
-            const easingFunction = Array.isArray(ease) ? ease[i] || noop : ease;
+            const easingFunction = Array.isArray(ease) ? ease[i] || motionUtils.noop : ease;
             mixer = pipe(easingFunction, mixer);
         }
         mixers.push(mixer);
@@ -2183,7 +2168,7 @@ function createMixers(output, ease, customMixer) {
  */
 function interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {}) {
     const inputLength = input.length;
-    invariant(inputLength === output.length, "Both input and output ranges must be the same length");
+    motionUtils.invariant(inputLength === output.length, "Both input and output ranges must be the same length");
     /**
      * If we're only provided a single input, we can just make a function
      * that returns the output.
@@ -2374,7 +2359,7 @@ class MainThreadAnimation extends BaseAnimation {
         if (generatorFactory !== keyframes &&
             typeof keyframes$1[0] !== "number") {
             if (process.env.NODE_ENV !== "production") {
-                invariant(keyframes$1.length === 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${keyframes$1}`);
+                motionUtils.invariant(keyframes$1.length === 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${keyframes$1}`);
             }
             mapPercentToKeyframes = pipe(percentToProgress, mix(keyframes$1[0], keyframes$1[1]));
             keyframes$1 = [0, 100];
@@ -2975,11 +2960,11 @@ class AcceleratedAnimation extends BaseAnimation {
         else {
             const { resolved } = this;
             if (!resolved)
-                return noop;
+                return motionUtils.noop;
             const { animation } = resolved;
             attachTimeline(animation, timeline);
         }
-        return noop;
+        return motionUtils.noop;
     }
     play() {
         if (this.isStopped)
@@ -3348,7 +3333,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 = "11.12.0";
+        this.version = "11.13.0";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -4271,11 +4256,11 @@ const isPrimaryPointer = (event) => {
     }
 };
 
-function extractEventInfo(event, pointType = "page") {
+function extractEventInfo(event) {
     return {
         point: {
-            x: event[`${pointType}X`],
-            y: event[`${pointType}Y`],
+            x: event.pageX,
+            y: event.pageY,
         },
     };
 }
@@ -4447,58 +4432,6 @@ function getVelocity(history, timeDelta) {
     return currentVelocity;
 }
 
-function createLock(name) {
-    let lock = null;
-    return () => {
-        const openLock = () => {
-            lock = null;
-        };
-        if (lock === null) {
-            lock = name;
-            return openLock;
-        }
-        return false;
-    };
-}
-const globalHorizontalLock = createLock("dragHorizontal");
-const globalVerticalLock = createLock("dragVertical");
-function getGlobalLock(drag) {
-    let lock = false;
-    if (drag === "y") {
-        lock = globalVerticalLock();
-    }
-    else if (drag === "x") {
-        lock = globalHorizontalLock();
-    }
-    else {
-        const openHorizontal = globalHorizontalLock();
-        const openVertical = globalVerticalLock();
-        if (openHorizontal && openVertical) {
-            lock = () => {
-                openHorizontal();
-                openVertical();
-            };
-        }
-        else {
-            // Release the locks because we don't use them
-            if (openHorizontal)
-                openHorizontal();
-            if (openVertical)
-                openVertical();
-        }
-    }
-    return lock;
-}
-function isDragActive() {
-    // Check the gesture lock - if we get it, it means no drag gesture is active
-    // and we can safely fire the tap gesture.
-    const openGestureLock = getGlobalLock(true);
-    if (!openGestureLock)
-        return true;
-    openGestureLock();
-    return false;
-}
-
 function isRefObject(ref) {
     return (ref &&
         typeof ref === "object" &&
@@ -4894,10 +4827,7 @@ const elementDragControls = new WeakMap();
 // let latestPointerEvent: PointerEvent
 class VisualElementDragControls {
     constructor(visualElement) {
-        // This is a reference to the global drag gesture lock, ensuring only one component
-        // can "capture" the drag of one or both axes.
-        // TODO: Look into moving this into pansession?
-        this.openGlobalLock = null;
+        this.openDragLock = null;
         this.isDragging = false;
         this.currentDirection = null;
         this.originPoint = { x: 0, y: 0 };
@@ -4925,18 +4855,18 @@ class VisualElementDragControls {
             // the component.
             dragSnapToOrigin ? this.pauseAnimation() : this.stopAnimation();
             if (snapToCursor) {
-                this.snapToCursor(extractEventInfo(event, "page").point);
+                this.snapToCursor(extractEventInfo(event).point);
             }
         };
         const onStart = (event, info) => {
             // Attempt to grab the global drag gesture lock - maybe make this part of PanSession
             const { drag, dragPropagation, onDragStart } = this.getProps();
             if (drag && !dragPropagation) {
-                if (this.openGlobalLock)
-                    this.openGlobalLock();
-                this.openGlobalLock = getGlobalLock(drag);
+                if (this.openDragLock)
+                    this.openDragLock();
+                this.openDragLock = motionDom.setDragLock(drag);
                 // If we don 't have the lock, don't start dragging
-                if (!this.openGlobalLock)
+                if (!this.openDragLock)
                     return;
             }
             this.isDragging = true;
@@ -4978,7 +4908,7 @@ class VisualElementDragControls {
             // latestPointerEvent = event
             const { dragPropagation, dragDirectionLock, onDirectionLock, onDrag, } = this.getProps();
             // If we didn't successfully receive the gesture lock, early return.
-            if (!dragPropagation && !this.openGlobalLock)
+            if (!dragPropagation && !this.openDragLock)
                 return;
             const { offset } = info;
             // Attempt to detect drag direction if directionLock is true
@@ -5046,9 +4976,9 @@ class VisualElementDragControls {
         this.panSession && this.panSession.end();
         this.panSession = undefined;
         const { dragPropagation } = this.getProps();
-        if (!dragPropagation && this.openGlobalLock) {
-            this.openGlobalLock();
-            this.openGlobalLock = null;
+        if (!dragPropagation && this.openDragLock) {
+            this.openDragLock();
+            this.openDragLock = null;
         }
         animationState && animationState.setActive("whileDrag", false);
     }
@@ -5108,7 +5038,7 @@ class VisualElementDragControls {
         if (!constraints || !isRefObject(constraints))
             return false;
         const constraintsElement = constraints.current;
-        invariant(constraintsElement !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.");
+        motionUtils.invariant(constraintsElement !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.");
         const { projection } = this.visualElement;
         // TODO
         if (!projection || !projection.layout)
@@ -5356,8 +5286,8 @@ function getCurrentDirection(offset, lockThreshold = 10) {
 class DragGesture extends Feature {
     constructor(node) {
         super(node);
-        this.removeGroupControls = noop;
-        this.removeListeners = noop;
+        this.removeGroupControls = motionUtils.noop;
+        this.removeListeners = motionUtils.noop;
         this.controls = new VisualElementDragControls(node);
     }
     mount() {
@@ -5367,7 +5297,7 @@ class DragGesture extends Feature {
         if (dragControls) {
             this.removeGroupControls = dragControls.subscribe(this.controls);
         }
-        this.removeListeners = this.controls.addListeners() || noop;
+        this.removeListeners = this.controls.addListeners() || motionUtils.noop;
     }
     unmount() {
         this.removeGroupControls();
@@ -5383,7 +5313,7 @@ const asyncHandler = (handler) => (event, info) => {
 class PanGesture extends Feature {
     constructor() {
         super(...arguments);
-        this.removePointerDownListener = noop;
+        this.removePointerDownListener = motionUtils.noop;
     }
     onPointerDown(pointerDownEvent) {
         this.session = new PanSession(pointerDownEvent, this.createPanHandlers(), {
@@ -5491,7 +5421,7 @@ function getRadius(values, radiusName) {
 //     )(p)
 // }
 const easeCrossfadeIn = /*@__PURE__*/ compress(0, 0.5, circOut);
-const easeCrossfadeOut = /*@__PURE__*/ compress(0.5, 0.95, noop);
+const easeCrossfadeOut = /*@__PURE__*/ compress(0.5, 0.95, motionUtils.noop);
 function compress(min, max, easing) {
     return (p) => {
         // Could replace ifs with clamp
@@ -5927,7 +5857,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.12.0", `Attempting to mix Motion versions ${nextValue.version} with 11.12.0 may not work as expected.`);
+                warnOnce(nextValue.version === "11.13.0", `Attempting to mix Motion versions ${nextValue.version} with 11.13.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -8362,7 +8292,7 @@ const userAgentContains = (string) => typeof navigator !== "undefined" &&
  */
 const roundPoint = userAgentContains("applewebkit/") && !userAgentContains("chrome/")
     ? Math.round
-    : noop;
+    : motionUtils.noop;
 function roundAxis(axis) {
     // Round to the nearest .5 pixels to support subpixel layouts
     axis.min = roundPoint(axis.min);
@@ -8662,28 +8592,25 @@ const drag = {
     },
 };
 
-function addHoverEvent(node, isActive) {
-    const eventName = isActive ? "pointerenter" : "pointerleave";
-    const callbackName = isActive ? "onHoverStart" : "onHoverEnd";
-    const handleEvent = (event, info) => {
-        if (event.pointerType === "touch" || isDragActive())
-            return;
-        const props = node.getProps();
-        if (node.animationState && props.whileHover) {
-            node.animationState.setActive("whileHover", isActive);
-        }
-        const callback = props[callbackName];
-        if (callback) {
-            frame.postRender(() => callback(event, info));
-        }
-    };
-    return addPointerEvent(node.current, eventName, handleEvent, {
-        passive: !node.getProps()[callbackName],
-    });
+function handleHoverEvent(node, event, isActive) {
+    const { props } = node;
+    if (node.animationState && props.whileHover) {
+        node.animationState.setActive("whileHover", isActive);
+    }
+    const callback = props[isActive ? "onHoverStart" : "onHoverEnd"];
+    if (callback) {
+        frame.postRender(() => callback(event, extractEventInfo(event)));
+    }
 }
 class HoverGesture extends Feature {
     mount() {
-        this.unmount = pipe(addHoverEvent(this.node, true), addHoverEvent(this.node, false));
+        const { current, props } = this.node;
+        if (!current)
+            return;
+        this.unmount = motionDom.hover(current, (startEvent) => {
+            handleHoverEvent(this.node, startEvent, true);
+            return (endEvent) => handleHoverEvent(this.node, endEvent, false);
+        }, { passive: !props.onHoverStart && !props.onHoverEnd });
     }
     unmount() { }
 }
@@ -8752,9 +8679,9 @@ function fireSyntheticPointerEvent(name, handler) {
 class PressGesture extends Feature {
     constructor() {
         super(...arguments);
-        this.removeStartListeners = noop;
-        this.removeEndListeners = noop;
-        this.removeAccessibleListeners = noop;
+        this.removeStartListeners = motionUtils.noop;
+        this.removeEndListeners = motionUtils.noop;
+        this.removeAccessibleListeners = motionUtils.noop;
         this.startPointerPress = (startEvent, startInfo) => {
             if (this.isPressing)
                 return;
@@ -8836,7 +8763,7 @@ class PressGesture extends Feature {
         if (props.whileTap && this.node.animationState) {
             this.node.animationState.setActive("whileTap", false);
         }
-        return !isDragActive();
+        return !motionDom.isDragActive();
     }
     cancelPress(event, info) {
         if (!this.checkPressEnd())
@@ -9265,8 +9192,8 @@ function useStrictMode(configAndProps, preloadedFeatures) {
         isStrict) {
         const strictMessage = "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";
         configAndProps.ignoreStrict
-            ? warning(false, strictMessage)
-            : invariant(false, strictMessage);
+            ? motionUtils.warning(false, strictMessage)
+            : motionUtils.invariant(false, strictMessage);
     }
 }
 function getProjectionFunctionality(props) {

package/dist/cjs/dom-mini.js

@@ -2,6 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var motionDom = require('motion-dom');
+var motionUtils = require('motion-utils');
+
 function memo(callback) {
     let result;
     return () => {
@@ -91,42 +94,6 @@ class GroupPlaybackControls {
     }
 }
 
-const noop = (any) => any;
-
-let invariant = noop;
-if (process.env.NODE_ENV !== "production") {
-    invariant = (check, message) => {
-        if (!check) {
-            throw new Error(message);
-        }
-    };
-}
-
-function resolveElements(elements, scope, selectorCache) {
-    var _a;
-    if (typeof elements === "string") {
-        let root = document;
-        if (scope) {
-            invariant(Boolean(scope.current), "Scope provided, but no element detected.");
-            root = scope.current;
-        }
-        if (selectorCache) {
-            (_a = selectorCache[elements]) !== null && _a !== void 0 ? _a : (selectorCache[elements] = root.querySelectorAll(elements));
-            elements = selectorCache[elements];
-        }
-        else {
-            elements = root.querySelectorAll(elements);
-        }
-    }
-    else if (elements instanceof Element) {
-        elements = [elements];
-    }
-    /**
-     * Return an empty array
-     */
-    return Array.from(elements || []);
-}
-
 /**
  * Converts seconds to milliseconds
  *
@@ -390,7 +357,7 @@ class NativeAnimation {
         this.setValue = isCSSVar ? setCSSVar : setStyle;
         this.options = options;
         this.updateFinishedPromise();
-        invariant(typeof options.type !== "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "framer-motion"?`);
+        motionUtils.invariant(typeof options.type !== "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "framer-motion"?`);
         const existingAnimation = getElementAnimationState(element).get(valueName);
         existingAnimation && existingAnimation.stop();
         const readInitialKeyframe = () => {
@@ -520,14 +487,14 @@ class NativeAnimation {
         else {
             attachTimeline(this.animation, timeline);
         }
-        return noop;
+        return motionUtils.noop;
     }
 }
 
 function animateElements(elementOrSelector, keyframes, options, scope) {
-    const elements = resolveElements(elementOrSelector, scope);
+    const elements = motionDom.resolveElements(elementOrSelector, scope);
     const numElements = elements.length;
-    invariant(Boolean(numElements), "No valid element provided.");
+    motionUtils.invariant(Boolean(numElements), "No valid element provided.");
     const animations = [];
     for (let i = 0; i < numElements; i++) {
         const element = elements[i];