motion 11.11.17 → 11.13.0-beta.0

package/dist/motion.dev.js

@@ -4,6 +4,67 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Motion = {}));
 })(this, (function (exports) { 'use strict';
 
+    const noop = (any) => any;
+
+    exports.warning = noop;
+    exports.invariant = noop;
+    {
+        exports.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);
+    }
+
+    function hover(elementOrSelector, onHoverStart) {
+        const elements = resolveElements(elementOrSelector);
+        const cancelGesture = new AbortController();
+        const options = { signal: cancelGesture.signal };
+        const onPointerEnter = (enterEvent) => {
+            if (enterEvent.pointerType === "touch")
+                return;
+            const { target } = enterEvent;
+            const onHoverEnd = onHoverStart(enterEvent);
+            if (onHoverEnd && target) {
+                const onPointerLeave = (leaveEvent) => {
+                    onHoverEnd(leaveEvent);
+                    target.removeEventListener("pointerleave", onPointerLeave);
+                };
+                target.addEventListener("pointerleave", onPointerLeave, options);
+            }
+        };
+        elements.forEach((element) => {
+            element.addEventListener("pointerenter", onPointerEnter, options);
+        });
+        return () => cancelGesture.abort();
+    }
+
     function addUniqueItem(arr, item) {
         if (arr.indexOf(item) === -1)
             arr.push(item);
@@ -76,8 +137,6 @@
         useManualTiming: false,
     };
 
-    const noop = (any) => any;
-
     function createRenderStep(runNextFrame) {
         /**
          * We create and reuse two queues, one to queue jobs for the current frame
@@ -281,7 +340,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 = "11.11.17";
+            this.version = "11.13.0-beta.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
@@ -649,6 +708,34 @@
         }
     }
 
+    /*
+      Progress within given range
+
+      Given a lower limit and an upper limit, we return the progress
+      (expressed as a number 0-1) represented by the given value, and
+      limit that progress to within 0-1.
+
+      @param [number]: Lower limit
+      @param [number]: Upper limit
+      @param [number]: Value to find progress within given range
+      @return [number]: Progress of value within range as expressed 0-1
+    */
+    const progress = (from, to, value) => {
+        const toFromDifference = to - from;
+        return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
+    };
+
+    const generateLinearEasing = (easing, duration, // as milliseconds
+    resolution = 10 // as milliseconds
+    ) => {
+        let points = "";
+        const numPoints = Math.max(Math.round(duration / resolution), 2);
+        for (let i = 0; i < numPoints; i++) {
+            points += easing(progress(0, numPoints - 1, i)) + ", ";
+        }
+        return `linear(${points.substring(0, points.length - 2)})`;
+    };
+
     /**
      * Converts seconds to milliseconds
      *
@@ -664,21 +751,6 @@
         return velocityPerSecond(current - resolveValue(prevT), t - prevT);
     }
 
-    exports.warning = noop;
-    exports.invariant = noop;
-    {
-        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;
@@ -687,21 +759,43 @@
         return v;
     };
 
+    const springDefaults = {
+        // Default spring physics
+        stiffness: 100,
+        damping: 10,
+        mass: 1.0,
+        velocity: 0.0,
+        // Default duration/bounce-based options
+        duration: 800, // in ms
+        bounce: 0.3,
+        visualDuration: 0.3, // in seconds
+        // Rest thresholds
+        restSpeed: {
+            granular: 0.01,
+            default: 2,
+        },
+        restDelta: {
+            granular: 0.005,
+            default: 0.5,
+        },
+        // Limits
+        minDuration: 0.01, // in seconds
+        maxDuration: 10.0, // in seconds
+        minDamping: 0.05,
+        maxDamping: 1,
+    };
+
     const safeMin = 0.001;
-    const minDuration = 0.01;
-    const maxDuration$1 = 10.0;
-    const minDamping = 0.05;
-    const maxDamping = 1;
-    function findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1, }) {
+    function findSpring({ duration = springDefaults.duration, bounce = springDefaults.bounce, velocity = springDefaults.velocity, mass = springDefaults.mass, }) {
         let envelope;
         let derivative;
-        exports.warning(duration <= secondsToMilliseconds(maxDuration$1), "Spring duration must be 10 seconds or less");
+        exports.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.
          */
-        dampingRatio = clamp(minDamping, maxDamping, dampingRatio);
-        duration = clamp(minDuration, maxDuration$1, millisecondsToSeconds(duration));
+        dampingRatio = clamp(springDefaults.minDamping, springDefaults.maxDamping, dampingRatio);
+        duration = clamp(springDefaults.minDuration, springDefaults.maxDuration, millisecondsToSeconds(duration));
         if (dampingRatio < 1) {
             /**
              * Underdamped spring
@@ -745,8 +839,8 @@
         duration = secondsToMilliseconds(duration);
         if (isNaN(undampedFreq)) {
             return {
-                stiffness: 100,
-                damping: 10,
+                stiffness: springDefaults.stiffness,
+                damping: springDefaults.damping,
                 duration,
             };
         }
@@ -771,6 +865,22 @@
         return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
     }
 
+    /**
+     * Implement a practical max duration for keyframe generation
+     * to prevent infinite loops
+     */
+    const maxGeneratorDuration = 20000;
+    function calcGeneratorDuration(generator) {
+        let duration = 0;
+        const timeStep = 50;
+        let state = generator.next(duration);
+        while (!state.done && duration < maxGeneratorDuration) {
+            duration += timeStep;
+            state = generator.next(duration);
+        }
+        return duration >= maxGeneratorDuration ? Infinity : duration;
+    }
+
     const durationKeys = ["duration", "bounce"];
     const physicsKeys = ["stiffness", "damping", "mass"];
     function isSpringType(options, keys) {
@@ -778,29 +888,51 @@
     }
     function getSpringOptions(options) {
         let springOptions = {
-            velocity: 0.0,
-            stiffness: 100,
-            damping: 10,
-            mass: 1.0,
+            velocity: springDefaults.velocity,
+            stiffness: springDefaults.stiffness,
+            damping: springDefaults.damping,
+            mass: springDefaults.mass,
             isResolvedFromDuration: false,
             ...options,
         };
         // stiffness/damping/mass overrides duration/bounce
         if (!isSpringType(options, physicsKeys) &&
             isSpringType(options, durationKeys)) {
-            const derived = findSpring(options);
-            springOptions = {
-                ...springOptions,
-                ...derived,
-                mass: 1.0,
-            };
-            springOptions.isResolvedFromDuration = true;
+            if (options.visualDuration) {
+                const visualDuration = options.visualDuration;
+                const root = (2 * Math.PI) / (visualDuration * 1.2);
+                const stiffness = root * root;
+                const damping = 2 * clamp(0.05, 1, 1 - options.bounce) * Math.sqrt(stiffness);
+                springOptions = {
+                    ...springOptions,
+                    mass: springDefaults.mass,
+                    stiffness,
+                    damping,
+                };
+            }
+            else {
+                const derived = findSpring(options);
+                springOptions = {
+                    ...springOptions,
+                    ...derived,
+                    mass: springDefaults.mass,
+                };
+                springOptions.isResolvedFromDuration = true;
+            }
         }
         return springOptions;
     }
-    function spring({ keyframes, restDelta, restSpeed, ...options }) {
-        const origin = keyframes[0];
-        const target = keyframes[keyframes.length - 1];
+    function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce = springDefaults.bounce) {
+        const options = typeof optionsOrVisualDuration !== "object"
+            ? {
+                visualDuration: optionsOrVisualDuration,
+                keyframes: [0, 1],
+                bounce,
+            }
+            : optionsOrVisualDuration;
+        let { restSpeed, restDelta } = options;
+        const origin = options.keyframes[0];
+        const target = options.keyframes[options.keyframes.length - 1];
         /**
          * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
          * to reduce GC during animation.
@@ -822,8 +954,12 @@
          * ratio between feeling good and finishing as soon as changes are imperceptible.
          */
         const isGranularScale = Math.abs(initialDelta) < 5;
-        restSpeed || (restSpeed = isGranularScale ? 0.01 : 2);
-        restDelta || (restDelta = isGranularScale ? 0.005 : 0.5);
+        restSpeed || (restSpeed = isGranularScale
+            ? springDefaults.restSpeed.granular
+            : springDefaults.restSpeed.default);
+        restDelta || (restDelta = isGranularScale
+            ? springDefaults.restDelta.granular
+            : springDefaults.restDelta.default);
         let resolveSpring;
         if (dampingRatio < 1) {
             const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
@@ -864,7 +1000,7 @@
                         dampedAngularFreq);
             };
         }
-        return {
+        const generator = {
             calculatedDuration: isResolvedFromDuration ? duration || null : null,
             next: (t) => {
                 const current = resolveSpring(t);
@@ -892,23 +1028,13 @@
                 state.value = state.done ? target : current;
                 return state;
             },
+            toString: () => {
+                const calculatedDuration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
+                const easing = generateLinearEasing((progress) => generator.next(calculatedDuration * progress).value, calculatedDuration, 30);
+                return calculatedDuration + "ms " + easing;
+            },
         };
-    }
-
-    /**
-     * Implement a practical max duration for keyframe generation
-     * to prevent infinite loops
-     */
-    const maxGeneratorDuration = 20000;
-    function calcGeneratorDuration(generator) {
-        let duration = 0;
-        const timeStep = 50;
-        let state = generator.next(duration);
-        while (!state.done && duration < maxGeneratorDuration) {
-            duration += timeStep;
-            state = generator.next(duration);
-        }
-        return duration >= maxGeneratorDuration ? Infinity : duration;
+        return generator;
     }
 
     /**
@@ -949,23 +1075,6 @@
         return from + (to - from) * progress;
     };
 
-    /*
-      Progress within given range
-
-      Given a lower limit and an upper limit, we return the progress
-      (expressed as a number 0-1) represented by the given value, and
-      limit that progress to within 0-1.
-
-      @param [number]: Lower limit
-      @param [number]: Upper limit
-      @param [number]: Value to find progress within given range
-      @return [number]: Progress of value within range as expressed 0-1
-    */
-    const progress = (from, to, value) => {
-        const toFromDifference = to - from;
-        return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
-    };
-
     function fillOffset(offset, remaining) {
         const min = offset[offset.length - 1];
         for (let i = 1; i <= remaining; i++) {
@@ -982,31 +1091,6 @@
 
     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);
     }
@@ -3324,18 +3408,6 @@
         // "background-color"
     ]);
 
-    // Create a linear easing point for every 10 ms
-    const resolution = 10;
-    const generateLinearEasing = (easing, duration // as milliseconds
-    ) => {
-        let points = "";
-        const numPoints = Math.max(Math.round(duration / resolution), 2);
-        for (let i = 0; i < numPoints; i++) {
-            points += easing(progress(0, numPoints - 1, i)) + ", ";
-        }
-        return `linear(${points.substring(0, points.length - 2)})`;
-    };
-
     /**
      * Add the ability for test suites to manually set support flags
      * to better test more environments.
@@ -4105,7 +4177,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "11.11.17", `Attempting to mix Motion versions ${nextValue.version} with 11.11.17 may not work as expected.`);
+                    warnOnce(nextValue.version === "11.13.0-beta.0", `Attempting to mix Motion versions ${nextValue.version} with 11.13.0-beta.0 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -5253,6 +5325,7 @@
                 valueKeyframes = [valueKeyframes];
             }
             hydrateKeyframes(valueName, valueKeyframes, readInitialKeyframe);
+            // TODO: Replace this with toString()?
             if (isGenerator(options.type)) {
                 const generatorOptions = createGeneratorEasing(options, 100, options.type);
                 options.ease = supportsLinearEasing()
@@ -6125,6 +6198,7 @@
     exports.frame = frame;
     exports.frameData = frameData;
     exports.frameSteps = frameSteps;
+    exports.hover = hover;
     exports.inView = inView;
     exports.inertia = inertia;
     exports.interpolate = interpolate;
@@ -6132,8 +6206,10 @@
     exports.mirrorEasing = mirrorEasing;
     exports.mix = mix;
     exports.motionValue = motionValue;
+    exports.noop = noop;
     exports.pipe = pipe;
     exports.progress = progress;
+    exports.resolveElements = resolveElements;
     exports.reverseEasing = reverseEasing;
     exports.scroll = scroll;
     exports.scrollInfo = scrollInfo;