motion 12.18.1 → 12.19.0

package/dist/es/motion-dom/dist/es/view/start.mjs

@@ -1,155 +0,0 @@
-import { GroupAnimation } from '../animation/GroupAnimation.mjs';
-import { NativeAnimation } from '../animation/NativeAnimation.mjs';
-import { NativeAnimationWrapper } from '../animation/NativeAnimationWrapper.mjs';
-import { getValueTransition } from '../animation/utils/get-value-transition.mjs';
-import { mapEasingToNativeEasing } from '../animation/waapi/easing/map-easing.mjs';
-import { applyGeneratorOptions } from '../animation/waapi/utils/apply-generator.mjs';
-import { chooseLayerType } from './utils/choose-layer-type.mjs';
-import { css } from './utils/css.mjs';
-import { getLayerName } from './utils/get-layer-name.mjs';
-import { getViewAnimations } from './utils/get-view-animations.mjs';
-import { hasTarget } from './utils/has-target.mjs';
-import { secondsToMilliseconds } from '../../../../motion-utils/dist/es/time-conversion.mjs';
-
-const definitionNames = ["layout", "enter", "exit", "new", "old"];
-function startViewAnimation(builder) {
-    const { update, targets, options: defaultOptions } = builder;
-    if (!document.startViewTransition) {
-        return new Promise(async (resolve) => {
-            await update();
-            resolve(new GroupAnimation([]));
-        });
-    }
-    // TODO: Go over existing targets and ensure they all have ids
-    /**
-     * If we don't have any animations defined for the root target,
-     * remove it from being captured.
-     */
-    if (!hasTarget("root", targets)) {
-        css.set(":root", {
-            "view-transition-name": "none",
-        });
-    }
-    /**
-     * Set the timing curve to linear for all view transition layers.
-     * This gets baked into the keyframes, which can't be changed
-     * without breaking the generated animation.
-     *
-     * This allows us to set easing via updateTiming - which can be changed.
-     */
-    css.set("::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*)", { "animation-timing-function": "linear !important" });
-    css.commit(); // Write
-    const transition = document.startViewTransition(async () => {
-        await update();
-        // TODO: Go over new targets and ensure they all have ids
-    });
-    transition.finished.finally(() => {
-        css.remove(); // Write
-    });
-    return new Promise((resolve) => {
-        transition.ready.then(() => {
-            const generatedViewAnimations = getViewAnimations();
-            const animations = [];
-            /**
-             * Create animations for each of our explicitly-defined subjects.
-             */
-            targets.forEach((definition, target) => {
-                // TODO: If target is not "root", resolve elements
-                // and iterate over each
-                for (const key of definitionNames) {
-                    if (!definition[key])
-                        continue;
-                    const { keyframes, options } = definition[key];
-                    for (let [valueName, valueKeyframes] of Object.entries(keyframes)) {
-                        if (!valueKeyframes)
-                            continue;
-                        const valueOptions = {
-                            ...getValueTransition(defaultOptions, valueName),
-                            ...getValueTransition(options, valueName),
-                        };
-                        const type = chooseLayerType(key);
-                        /**
-                         * If this is an opacity animation, and keyframes are not an array,
-                         * we need to convert them into an array and set an initial value.
-                         */
-                        if (valueName === "opacity" &&
-                            !Array.isArray(valueKeyframes)) {
-                            const initialValue = type === "new" ? 0 : 1;
-                            valueKeyframes = [initialValue, valueKeyframes];
-                        }
-                        /**
-                         * Resolve stagger function if provided.
-                         */
-                        if (typeof valueOptions.delay === "function") {
-                            valueOptions.delay = valueOptions.delay(0, 1);
-                        }
-                        valueOptions.duration && (valueOptions.duration = secondsToMilliseconds(valueOptions.duration));
-                        valueOptions.delay && (valueOptions.delay = secondsToMilliseconds(valueOptions.delay));
-                        const animation = new NativeAnimation({
-                            ...valueOptions,
-                            element: document.documentElement,
-                            name: valueName,
-                            pseudoElement: `::view-transition-${type}(${target})`,
-                            keyframes: valueKeyframes,
-                        });
-                        animations.push(animation);
-                    }
-                }
-            });
-            /**
-             * Handle browser generated animations
-             */
-            for (const animation of generatedViewAnimations) {
-                if (animation.playState === "finished")
-                    continue;
-                const { effect } = animation;
-                if (!effect || !(effect instanceof KeyframeEffect))
-                    continue;
-                const { pseudoElement } = effect;
-                if (!pseudoElement)
-                    continue;
-                const name = getLayerName(pseudoElement);
-                if (!name)
-                    continue;
-                const targetDefinition = targets.get(name.layer);
-                if (!targetDefinition) {
-                    /**
-                     * If transition name is group then update the timing of the animation
-                     * whereas if it's old or new then we could possibly replace it using
-                     * the above method.
-                     */
-                    const transitionName = name.type === "group" ? "layout" : "";
-                    let animationTransition = {
-                        ...getValueTransition(defaultOptions, transitionName),
-                    };
-                    animationTransition.duration && (animationTransition.duration = secondsToMilliseconds(animationTransition.duration));
-                    animationTransition =
-                        applyGeneratorOptions(animationTransition);
-                    const easing = mapEasingToNativeEasing(animationTransition.ease, animationTransition.duration);
-                    effect.updateTiming({
-                        delay: secondsToMilliseconds(animationTransition.delay ?? 0),
-                        duration: animationTransition.duration,
-                        easing,
-                    });
-                    animations.push(new NativeAnimationWrapper(animation));
-                }
-                else if (hasOpacity(targetDefinition, "enter") &&
-                    hasOpacity(targetDefinition, "exit") &&
-                    effect
-                        .getKeyframes()
-                        .some((keyframe) => keyframe.mixBlendMode)) {
-                    animations.push(new NativeAnimationWrapper(animation));
-                }
-                else {
-                    animation.cancel();
-                }
-            }
-            resolve(new GroupAnimation(animations));
-        });
-    });
-}
-function hasOpacity(target, key) {
-    return target?.[key]?.keyframes.opacity;
-}
-
-export { startViewAnimation };

package/dist/es/motion-dom/dist/es/view/utils/choose-layer-type.mjs

@@ -1,11 +0,0 @@
-function chooseLayerType(valueName) {
-    if (valueName === "layout")
-        return "group";
-    if (valueName === "enter" || valueName === "new")
-        return "new";
-    if (valueName === "exit" || valueName === "old")
-        return "old";
-    return "group";
-}
-
-export { chooseLayerType };

package/dist/es/motion-dom/dist/es/view/utils/css.mjs

@@ -1,32 +0,0 @@
-let pendingRules = {};
-let style = null;
-const css = {
-    set: (selector, values) => {
-        pendingRules[selector] = values;
-    },
-    commit: () => {
-        if (!style) {
-            style = document.createElement("style");
-            style.id = "motion-view";
-        }
-        let cssText = "";
-        for (const selector in pendingRules) {
-            const rule = pendingRules[selector];
-            cssText += `${selector} {\n`;
-            for (const [property, value] of Object.entries(rule)) {
-                cssText += `  ${property}: ${value};\n`;
-            }
-            cssText += "}\n";
-        }
-        style.textContent = cssText;
-        document.head.appendChild(style);
-        pendingRules = {};
-    },
-    remove: () => {
-        if (style && style.parentElement) {
-            style.parentElement.removeChild(style);
-        }
-    },
-};
-
-export { css };

package/dist/es/motion-dom/dist/es/view/utils/get-layer-name.mjs

@@ -1,8 +0,0 @@
-function getLayerName(pseudoElement) {
-    const match = pseudoElement.match(/::view-transition-(old|new|group|image-pair)\((.*?)\)/);
-    if (!match)
-        return null;
-    return { layer: match[2], type: match[1] };
-}
-
-export { getLayerName };

package/dist/es/motion-dom/dist/es/view/utils/get-view-animations.mjs

@@ -1,12 +0,0 @@
-function filterViewAnimations(animation) {
-    const { effect } = animation;
-    if (!effect)
-        return false;
-    return (effect.target === document.documentElement &&
-        effect.pseudoElement?.startsWith("::view-transition"));
-}
-function getViewAnimations() {
-    return document.getAnimations().filter(filterViewAnimations);
-}
-
-export { getViewAnimations };

package/dist/es/motion-dom/dist/es/view/utils/has-target.mjs

@@ -1,5 +0,0 @@
-function hasTarget(target, targets) {
-    return targets.has(target) && Object.keys(targets.get(target)).length > 0;
-}
-
-export { hasTarget };

package/dist/es/motion-utils/dist/es/array.mjs

@@ -1,21 +0,0 @@
-function addUniqueItem(arr, item) {
-    if (arr.indexOf(item) === -1)
-        arr.push(item);
-}
-function removeItem(arr, item) {
-    const index = arr.indexOf(item);
-    if (index > -1)
-        arr.splice(index, 1);
-}
-// Adapted from array-move
-function moveItem([...arr], fromIndex, toIndex) {
-    const startIndex = fromIndex < 0 ? arr.length + fromIndex : fromIndex;
-    if (startIndex >= 0 && startIndex < arr.length) {
-        const endIndex = toIndex < 0 ? arr.length + toIndex : toIndex;
-        const [item] = arr.splice(fromIndex, 1);
-        arr.splice(endIndex, 0, item);
-    }
-    return arr;
-}
-
-export { addUniqueItem, moveItem, removeItem };

package/dist/es/motion-utils/dist/es/clamp.mjs

@@ -1,9 +0,0 @@
-const clamp = (min, max, v) => {
-    if (v > max)
-        return max;
-    if (v < min)
-        return min;
-    return v;
-};
-
-export { clamp };

package/dist/es/motion-utils/dist/es/easing/anticipate.mjs

@@ -1,5 +0,0 @@
-import { backIn } from './back.mjs';
-
-const anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
-
-export { anticipate };

package/dist/es/motion-utils/dist/es/easing/back.mjs

@@ -1,9 +0,0 @@
-import { cubicBezier } from './cubic-bezier.mjs';
-import { mirrorEasing } from './modifiers/mirror.mjs';
-import { reverseEasing } from './modifiers/reverse.mjs';
-
-const backOut = /*@__PURE__*/ cubicBezier(0.33, 1.53, 0.69, 0.99);
-const backIn = /*@__PURE__*/ reverseEasing(backOut);
-const backInOut = /*@__PURE__*/ mirrorEasing(backIn);
-
-export { backIn, backInOut, backOut };

package/dist/es/motion-utils/dist/es/easing/circ.mjs

@@ -1,8 +0,0 @@
-import { mirrorEasing } from './modifiers/mirror.mjs';
-import { reverseEasing } from './modifiers/reverse.mjs';
-
-const circIn = (p) => 1 - Math.sin(Math.acos(p));
-const circOut = reverseEasing(circIn);
-const circInOut = mirrorEasing(circIn);
-
-export { circIn, circInOut, circOut };

package/dist/es/motion-utils/dist/es/easing/cubic-bezier.mjs

@@ -1,51 +0,0 @@
-import { noop } from '../noop.mjs';
-
-/*
-  Bezier function generator
-  This has been modified from Gaëtan Renaudeau's BezierEasing
-  https://github.com/gre/bezier-easing/blob/master/src/index.js
-  https://github.com/gre/bezier-easing/blob/master/LICENSE
-  
-  I've removed the newtonRaphsonIterate algo because in benchmarking it
-  wasn't noticiably faster than binarySubdivision, indeed removing it
-  usually improved times, depending on the curve.
-  I also removed the lookup table, as for the added bundle size and loop we're
-  only cutting ~4 or so subdivision iterations. I bumped the max iterations up
-  to 12 to compensate and this still tended to be faster for no perceivable
-  loss in accuracy.
-  Usage
-    const easeOut = cubicBezier(.17,.67,.83,.67);
-    const x = easeOut(0.5); // returns 0.627...
-*/
-// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
-const calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) *
-    t;
-const subdivisionPrecision = 0.0000001;
-const subdivisionMaxIterations = 12;
-function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
-    let currentX;
-    let currentT;
-    let i = 0;
-    do {
-        currentT = lowerBound + (upperBound - lowerBound) / 2.0;
-        currentX = calcBezier(currentT, mX1, mX2) - x;
-        if (currentX > 0.0) {
-            upperBound = currentT;
-        }
-        else {
-            lowerBound = currentT;
-        }
-    } while (Math.abs(currentX) > subdivisionPrecision &&
-        ++i < subdivisionMaxIterations);
-    return currentT;
-}
-function cubicBezier(mX1, mY1, mX2, mY2) {
-    // If this is a linear gradient, return linear easing
-    if (mX1 === mY1 && mX2 === mY2)
-        return 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);
-}
-
-export { cubicBezier };

package/dist/es/motion-utils/dist/es/easing/ease.mjs

@@ -1,7 +0,0 @@
-import { cubicBezier } from './cubic-bezier.mjs';
-
-const easeIn = /*@__PURE__*/ cubicBezier(0.42, 0, 1, 1);
-const easeOut = /*@__PURE__*/ cubicBezier(0, 0, 0.58, 1);
-const easeInOut = /*@__PURE__*/ cubicBezier(0.42, 0, 0.58, 1);
-
-export { easeIn, easeInOut, easeOut };

package/dist/es/motion-utils/dist/es/easing/modifiers/mirror.mjs

@@ -1,5 +0,0 @@
-// Accepts an easing function and returns a new one that outputs mirrored values for
-// the second half of the animation. Turns easeIn into easeInOut.
-const mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;
-
-export { mirrorEasing };

package/dist/es/motion-utils/dist/es/easing/modifiers/reverse.mjs

@@ -1,5 +0,0 @@
-// Accepts an easing function and returns a new one that outputs reversed values.
-// Turns easeIn into easeOut.
-const reverseEasing = (easing) => (p) => 1 - easing(1 - p);
-
-export { reverseEasing };

package/dist/es/motion-utils/dist/es/easing/steps.mjs

@@ -1,15 +0,0 @@
-import { clamp } from '../clamp.mjs';
-
-function steps(numSteps, direction = "end") {
-    return (progress) => {
-        progress =
-            direction === "end"
-                ? Math.min(progress, 0.999)
-                : Math.max(progress, 0.001);
-        const expanded = progress * numSteps;
-        const rounded = direction === "end" ? Math.floor(expanded) : Math.ceil(expanded);
-        return clamp(0, 1, rounded / numSteps);
-    };
-}
-
-export { steps };

package/dist/es/motion-utils/dist/es/easing/utils/get-easing-for-segment.mjs

@@ -1,8 +0,0 @@
-import { wrap } from '../../wrap.mjs';
-import { isEasingArray } from './is-easing-array.mjs';
-
-function getEasingForSegment(easing, i) {
-    return isEasingArray(easing) ? easing[wrap(0, easing.length, i)] : easing;
-}
-
-export { getEasingForSegment };

package/dist/es/motion-utils/dist/es/easing/utils/is-bezier-definition.mjs

@@ -1,3 +0,0 @@
-const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
-
-export { isBezierDefinition };

package/dist/es/motion-utils/dist/es/easing/utils/is-easing-array.mjs

@@ -1,5 +0,0 @@
-const isEasingArray = (ease) => {
-    return Array.isArray(ease) && typeof ease[0] !== "number";
-};
-
-export { isEasingArray };

package/dist/es/motion-utils/dist/es/easing/utils/map.mjs

@@ -1,41 +0,0 @@
-import { invariant } from '../../errors.mjs';
-import { noop } from '../../noop.mjs';
-import { anticipate } from '../anticipate.mjs';
-import { backIn, backInOut, backOut } from '../back.mjs';
-import { circIn, circInOut, circOut } from '../circ.mjs';
-import { cubicBezier } from '../cubic-bezier.mjs';
-import { easeIn, easeInOut, easeOut } from '../ease.mjs';
-import { isBezierDefinition } from './is-bezier-definition.mjs';
-
-const easingLookup = {
-    linear: noop,
-    easeIn,
-    easeInOut,
-    easeOut,
-    circIn,
-    circInOut,
-    circOut,
-    backIn,
-    backInOut,
-    backOut,
-    anticipate,
-};
-const isValidEasing = (easing) => {
-    return typeof easing === "string";
-};
-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.`);
-        const [x1, y1, x2, y2] = definition;
-        return cubicBezier(x1, y1, x2, y2);
-    }
-    else if (isValidEasing(definition)) {
-        // Else lookup from table
-        invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`);
-        return easingLookup[definition];
-    }
-    return definition;
-};
-
-export { easingDefinitionToFunction };

package/dist/es/motion-utils/dist/es/errors.mjs

@@ -1,16 +0,0 @@
-let warning = () => { };
-let invariant = () => { };
-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/motion-utils/dist/es/global-config.mjs

@@ -1,3 +0,0 @@
-const MotionGlobalConfig = {};
-
-export { MotionGlobalConfig };

package/dist/es/motion-utils/dist/es/is-numerical-string.mjs

@@ -1,6 +0,0 @@
-/**
- * Check if value is a numerical string, ie a string that is purely a number eg "100" or "-100.1"
- */
-const isNumericalString = (v) => /^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(v);
-
-export { isNumericalString };

package/dist/es/motion-utils/dist/es/is-object.mjs

@@ -1,5 +0,0 @@
-function isObject(value) {
-    return typeof value === "object" && value !== null;
-}
-
-export { isObject };

package/dist/es/motion-utils/dist/es/is-zero-value-string.mjs

@@ -1,6 +0,0 @@
-/**
- * Check if the value is a zero value string like "0px" or "0%"
- */
-const isZeroValueString = (v) => /^0[^.\s]+$/u.test(v);
-
-export { isZeroValueString };

package/dist/es/motion-utils/dist/es/memo.mjs

@@ -1,11 +0,0 @@
-/*#__NO_SIDE_EFFECTS__*/
-function memo(callback) {
-    let result;
-    return () => {
-        if (result === undefined)
-            result = callback();
-        return result;
-    };
-}
-
-export { memo };

package/dist/es/motion-utils/dist/es/noop.mjs

@@ -1,4 +0,0 @@
-/*#__NO_SIDE_EFFECTS__*/
-const noop = (any) => any;
-
-export { noop };

package/dist/es/motion-utils/dist/es/pipe.mjs

@@ -1,11 +0,0 @@
-/**
- * Pipe
- * Compose other transformers to run linearily
- * pipe(min(20), max(40))
- * @param  {...functions} transformers
- * @return {function}
- */
-const combineFunctions = (a, b) => (v) => b(a(v));
-const pipe = (...transformers) => transformers.reduce(combineFunctions);
-
-export { pipe };

package/dist/es/motion-utils/dist/es/progress.mjs

@@ -1,19 +0,0 @@
-/*
-  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
-*/
-/*#__NO_SIDE_EFFECTS__*/
-const progress = (from, to, value) => {
-    const toFromDifference = to - from;
-    return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
-};
-
-export { progress };

package/dist/es/motion-utils/dist/es/subscription-manager.mjs

@@ -1,40 +0,0 @@
-import { addUniqueItem, removeItem } from './array.mjs';
-
-class SubscriptionManager {
-    constructor() {
-        this.subscriptions = [];
-    }
-    add(handler) {
-        addUniqueItem(this.subscriptions, handler);
-        return () => removeItem(this.subscriptions, handler);
-    }
-    notify(a, b, c) {
-        const numSubscriptions = this.subscriptions.length;
-        if (!numSubscriptions)
-            return;
-        if (numSubscriptions === 1) {
-            /**
-             * If there's only a single handler we can just call it without invoking a loop.
-             */
-            this.subscriptions[0](a, b, c);
-        }
-        else {
-            for (let i = 0; i < numSubscriptions; i++) {
-                /**
-                 * Check whether the handler exists before firing as it's possible
-                 * the subscriptions were modified during this loop running.
-                 */
-                const handler = this.subscriptions[i];
-                handler && handler(a, b, c);
-            }
-        }
-    }
-    getSize() {
-        return this.subscriptions.length;
-    }
-    clear() {
-        this.subscriptions.length = 0;
-    }
-}
-
-export { SubscriptionManager };

package/dist/es/motion-utils/dist/es/time-conversion.mjs

@@ -1,12 +0,0 @@
-/**
- * Converts seconds to milliseconds
- *
- * @param seconds - Time in seconds.
- * @return milliseconds - Converted time in milliseconds.
- */
-/*#__NO_SIDE_EFFECTS__*/
-const secondsToMilliseconds = (seconds) => seconds * 1000;
-/*#__NO_SIDE_EFFECTS__*/
-const millisecondsToSeconds = (milliseconds) => milliseconds / 1000;
-
-export { millisecondsToSeconds, secondsToMilliseconds };

package/dist/es/motion-utils/dist/es/velocity-per-second.mjs

@@ -1,11 +0,0 @@
-/*
-  Convert velocity into velocity per second
-
-  @param [number]: Unit per frame
-  @param [number]: Frame duration in ms
-*/
-function velocityPerSecond(velocity, frameDuration) {
-    return frameDuration ? velocity * (1000 / frameDuration) : 0;
-}
-
-export { velocityPerSecond };

package/dist/es/motion-utils/dist/es/warn-once.mjs

@@ -1,14 +0,0 @@
-const warned = new Set();
-function hasWarned(message) {
-    return warned.has(message);
-}
-function warnOnce(condition, message, element) {
-    if (condition || warned.has(message))
-        return;
-    console.warn(message);
-    if (element)
-        console.warn(element);
-    warned.add(message);
-}
-
-export { hasWarned, warnOnce };

package/dist/es/motion-utils/dist/es/wrap.mjs

@@ -1,6 +0,0 @@
-const wrap = (min, max, v) => {
-    const rangeSize = max - min;
-    return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
-};
-
-export { wrap };