motion 11.12.0 → 11.13.0

package/.turbo/turbo-build.log

@@ -1,45 +1,45 @@
 
 lib/index.js → dist/motion.dev.js...
-created dist/motion.dev.js in 737ms
+created dist/motion.dev.js in 563ms
 
 lib/index.js → dist/motion.js...
-created dist/motion.js in 825ms
+created dist/motion.js in 897ms
 
 lib/index.js → dist/cjs...
-created dist/cjs in 227ms
+created dist/cjs in 237ms
 
 lib/react-client.js → dist/cjs...
 created dist/cjs in 271ms
 
 lib/react.js → dist/cjs...
-created dist/cjs in 3ms
+created dist/cjs in 2ms
 
 lib/mini.js → dist/cjs...
-created dist/cjs in 24ms
+created dist/cjs in 64ms
 
 lib/react-mini.js → dist/cjs...
-created dist/cjs in 34ms
+created dist/cjs in 76ms
 
 lib/react-m.js → dist/cjs...
-created dist/cjs in 70ms
+created dist/cjs in 55ms
 
 lib/index.js, lib/mini.js, lib/react.js, lib/react-mini.js, lib/react-client.js, lib/react-m.js → dist/es...
-created dist/es in 636ms
+created dist/es in 543ms
 
 types/index.d.ts → dist/index.d.ts...
-created dist/index.d.ts in 21ms
+created dist/index.d.ts in 8ms
 
 types/react.d.ts → dist/react.d.ts...
-created dist/react.d.ts in 13ms
+created dist/react.d.ts in 4ms
 
 types/react-mini.d.ts → dist/react-mini.d.ts...
-created dist/react-mini.d.ts in 12ms
+created dist/react-mini.d.ts in 2ms
 
 types/react-m.d.ts → dist/react-m.d.ts...
-created dist/react-m.d.ts in 58ms
+created dist/react-m.d.ts in 1ms
 
 types/mini.d.ts → dist/mini.d.ts...
-created dist/mini.d.ts in 13ms
+created dist/mini.d.ts in 2ms
 
 types/react-client.d.ts → dist/react-client.d.ts...
-created dist/react-client.d.ts in 6ms
+created dist/react-client.d.ts in 3ms

package/dist/cjs/index.js

@@ -2,6 +2,52 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+const noop = (any) => any;
+
+let warning = noop;
+exports.invariant = noop;
+if (process.env.NODE_ENV !== "production") {
+    warning = (check, message) => {
+        if (!check && typeof console !== "undefined") {
+            console.warn(message);
+        }
+    };
+    exports.invariant = (check, message) => {
+        if (!check) {
+            throw new Error(message);
+        }
+    };
+}
+
+function resolveElements(elementOrSelector, scope, selectorCache) {
+    var _a;
+    if (elementOrSelector instanceof Element) {
+        return [elementOrSelector];
+    }
+    else if (typeof elementOrSelector === "string") {
+        let root = document;
+        if (scope) {
+            // TODO: Refactor to utils package
+            // invariant(
+            //     Boolean(scope.current),
+            //     "Scope provided, but no element detected."
+            // )
+            root = scope.current;
+        }
+        const elements = (_a = selectorCache === null || selectorCache === void 0 ? void 0 : selectorCache[elementOrSelector]) !== null && _a !== void 0 ? _a : root.querySelectorAll(elementOrSelector);
+        return elements ? Array.from(elements) : [];
+    }
+    return Array.from(elementOrSelector);
+}
+
+const isDragging = {
+    x: false,
+    y: false,
+};
+function isDragActive() {
+    return isDragging.y;
+}
+
 function addUniqueItem(arr, item) {
     if (arr.indexOf(item) === -1)
         arr.push(item);
@@ -74,8 +120,6 @@ const MotionGlobalConfig = {
     useManualTiming: false,
 };
 
-const noop = (any) => any;
-
 function createRenderStep(runNextFrame) {
     /**
      * We create and reuse two queues, one to queue jobs for the current frame
@@ -279,7 +323,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
@@ -690,21 +734,6 @@ function calcGeneratorVelocity(resolveValue, t, current) {
     return velocityPerSecond(current - resolveValue(prevT), t - prevT);
 }
 
-exports.warning = noop;
-exports.invariant = noop;
-if (process.env.NODE_ENV !== "production") {
-    exports.warning = (check, message) => {
-        if (!check && typeof console !== "undefined") {
-            console.warn(message);
-        }
-    };
-    exports.invariant = (check, message) => {
-        if (!check) {
-            throw new Error(message);
-        }
-    };
-}
-
 const clamp = (min, max, v) => {
     if (v > max)
         return max;
@@ -743,7 +772,7 @@ const safeMin = 0.001;
 function findSpring({ duration = springDefaults.duration, bounce = springDefaults.bounce, velocity = springDefaults.velocity, mass = springDefaults.mass, }) {
     let envelope;
     let derivative;
-    exports.warning(duration <= secondsToMilliseconds(springDefaults.maxDuration), "Spring duration must be 10 seconds or less");
+    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.
@@ -1045,31 +1074,6 @@ function defaultOffset$1(arr) {
 
 const isMotionValue = (value) => Boolean(value && value.getVelocity);
 
-function resolveElements(elements, scope, selectorCache) {
-    var _a;
-    if (typeof elements === "string") {
-        let root = document;
-        if (scope) {
-            exports.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 || []);
-}
-
 function isDOMKeyframes(keyframes) {
     return typeof keyframes === "object" && !Array.isArray(keyframes);
 }
@@ -2439,7 +2443,7 @@ function canAnimate(keyframes, name, type, velocity) {
     const targetKeyframe = keyframes[keyframes.length - 1];
     const isOriginAnimatable = isAnimatable(originKeyframe, name);
     const isTargetAnimatable = isAnimatable(targetKeyframe, name);
-    exports.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.`);
+    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;
@@ -2742,7 +2746,7 @@ const colorTypes = [hex, rgba, hsla];
 const getColorType = (v) => colorTypes.find((type) => type.test(v));
 function asRGBA(color) {
     const type = getColorType(color);
-    exports.warning(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`);
+    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);
@@ -2861,7 +2865,7 @@ const mixComplex = (origin, target) => {
         return pipe(mixArray(matchOrder(originStats, targetStats), targetStats.values), template);
     }
     else {
-        exports.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.`);
+        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);
     }
 };
@@ -4156,7 +4160,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)) {
@@ -6180,10 +6184,12 @@ exports.frameSteps = frameSteps;
 exports.inView = inView;
 exports.inertia = inertia;
 exports.interpolate = interpolate;
+exports.isDragActive = isDragActive;
 exports.keyframes = keyframes;
 exports.mirrorEasing = mirrorEasing;
 exports.mix = mix;
 exports.motionValue = motionValue;
+exports.noop = noop;
 exports.pipe = pipe;
 exports.progress = progress;
 exports.reverseEasing = reverseEasing;

package/dist/cjs/mini.js

@@ -91,6 +91,27 @@ class GroupPlaybackControls {
     }
 }
 
+function resolveElements(elementOrSelector, scope, selectorCache) {
+    var _a;
+    if (elementOrSelector instanceof Element) {
+        return [elementOrSelector];
+    }
+    else if (typeof elementOrSelector === "string") {
+        let root = document;
+        if (scope) {
+            // TODO: Refactor to utils package
+            // invariant(
+            //     Boolean(scope.current),
+            //     "Scope provided, but no element detected."
+            // )
+            root = scope.current;
+        }
+        const elements = (_a = selectorCache === null || selectorCache === void 0 ? void 0 : selectorCache[elementOrSelector]) !== null && _a !== void 0 ? _a : root.querySelectorAll(elementOrSelector);
+        return elements ? Array.from(elements) : [];
+    }
+    return Array.from(elementOrSelector);
+}
+
 const noop = (any) => any;
 
 let invariant = noop;
@@ -102,31 +123,6 @@ if (process.env.NODE_ENV !== "production") {
     };
 }
 
-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
  *

package/dist/cjs/react-client.js

@@ -185,6 +185,21 @@ function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyfr
 
 const noop = (any) => any;
 
+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);
+        }
+    };
+}
+
 function createRenderStep(runNextFrame) {
     /**
      * We create and reuse two queues, one to queue jobs for the current frame
@@ -417,21 +432,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"
  */
@@ -3348,7 +3348,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
@@ -4254,6 +4254,102 @@ const animations = {
     },
 };
 
+function resolveElements(elementOrSelector, scope, selectorCache) {
+    var _a;
+    if (elementOrSelector instanceof Element) {
+        return [elementOrSelector];
+    }
+    else if (typeof elementOrSelector === "string") {
+        let root = document;
+        if (scope) {
+            // TODO: Refactor to utils package
+            // invariant(
+            //     Boolean(scope.current),
+            //     "Scope provided, but no element detected."
+            // )
+            root = scope.current;
+        }
+        const elements = (_a = selectorCache === null || selectorCache === void 0 ? void 0 : selectorCache[elementOrSelector]) !== null && _a !== void 0 ? _a : root.querySelectorAll(elementOrSelector);
+        return elements ? Array.from(elements) : [];
+    }
+    return Array.from(elementOrSelector);
+}
+
+const isDragging = {
+    x: false,
+    y: false,
+};
+function isDragActive() {
+    return isDragging.x || isDragging.y;
+}
+
+/**
+ * Filter out events that are not pointer events, or are triggering
+ * while a Motion gesture is active.
+ */
+function filterEvents(callback) {
+    return (event) => {
+        if (event.pointerType === "touch" || isDragActive())
+            return;
+        callback(event);
+    };
+}
+/**
+ * Create a hover gesture. hover() is different to .addEventListener("pointerenter")
+ * in that it has an easier syntax, filters out polyfilled touch events, interoperates
+ * with drag gestures, and automatically removes the "pointerennd" event listener when the hover ends.
+ *
+ * @public
+ */
+function hover(elementOrSelector, onHoverStart, options = {}) {
+    const gestureAbortController = new AbortController();
+    const eventOptions = {
+        passive: true,
+        ...options,
+        signal: gestureAbortController.signal,
+    };
+    const onPointerEnter = filterEvents((enterEvent) => {
+        const { target } = enterEvent;
+        const onHoverEnd = onHoverStart(enterEvent);
+        if (!onHoverEnd || !target)
+            return;
+        const onPointerLeave = filterEvents((leaveEvent) => {
+            onHoverEnd(leaveEvent);
+            target.removeEventListener("pointerleave", onPointerLeave);
+        });
+        target.addEventListener("pointerleave", onPointerLeave, eventOptions);
+    });
+    resolveElements(elementOrSelector).forEach((element) => {
+        element.addEventListener("pointerenter", onPointerEnter, eventOptions);
+    });
+    return () => gestureAbortController.abort();
+}
+
+function setDragLock(axis) {
+    if (axis === "x" || axis === "y") {
+        if (isDragging[axis]) {
+            return null;
+        }
+        else {
+            isDragging[axis] = true;
+            return () => {
+                isDragging[axis] = false;
+            };
+        }
+    }
+    else {
+        if (isDragging.x || isDragging.y) {
+            return null;
+        }
+        else {
+            isDragging.x = isDragging.y = true;
+            return () => {
+                isDragging.x = isDragging.y = false;
+            };
+        }
+    }
+}
+
 const isPrimaryPointer = (event) => {
     if (event.pointerType === "mouse") {
         return typeof event.button !== "number" || event.button <= 0;
@@ -4271,11 +4367,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 +4543,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 +4938,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 +4966,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 = 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 +5019,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 +5087,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);
     }
@@ -7686,28 +7727,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 = hover(current, (startEvent) => {
+            handleHoverEvent(this.node, startEvent, true);
+            return (endEvent) => handleHoverEvent(this.node, endEvent, false);
+        }, { passive: !props.onHoverStart && !props.onHoverEnd });
     }
     unmount() { }
 }
@@ -9091,7 +9129,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)) {