motion 10.3.2 → 10.5.0-alpha.3

package/dist/targets/dom/utils/defaults.cjs.js

@@ -1,13 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const defaults = {
-    duration: 0.3,
-    delay: 0,
-    endDelay: 0,
-    repeat: 0,
-    easing: "ease",
-};
-
-exports.defaults = defaults;

package/dist/targets/dom/utils/defaults.es.js

@@ -1,9 +0,0 @@
-const defaults = {
-    duration: 0.3,
-    delay: 0,
-    endDelay: 0,
-    repeat: 0,
-    easing: "ease",
-};
-
-export { defaults };

package/dist/targets/dom/utils/easing.cjs.js

@@ -1,18 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var isNumber = require('../../../utils/is-number.cjs.js');
-
-const isCubicBezier = (easing) => Array.isArray(easing) && isNumber.isNumber(easing[0]);
-const isEasingList = (easing) => Array.isArray(easing) && !isNumber.isNumber(easing[0]);
-const isCustomEasing = (easing) => typeof easing === "object" &&
-    Boolean(easing.createAnimation);
-const convertEasing = (easing) => isCubicBezier(easing) ? cubicBezierAsString(easing) : easing;
-const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
-
-exports.convertEasing = convertEasing;
-exports.cubicBezierAsString = cubicBezierAsString;
-exports.isCubicBezier = isCubicBezier;
-exports.isCustomEasing = isCustomEasing;
-exports.isEasingList = isEasingList;

package/dist/targets/dom/utils/easing.es.js

@@ -1,10 +0,0 @@
-import { isNumber } from '../../../utils/is-number.es.js';
-
-const isCubicBezier = (easing) => Array.isArray(easing) && isNumber(easing[0]);
-const isEasingList = (easing) => Array.isArray(easing) && !isNumber(easing[0]);
-const isCustomEasing = (easing) => typeof easing === "object" &&
-    Boolean(easing.createAnimation);
-const convertEasing = (easing) => isCubicBezier(easing) ? cubicBezierAsString(easing) : easing;
-const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
-
-export { convertEasing, cubicBezierAsString, isCubicBezier, isCustomEasing, isEasingList };

package/dist/targets/dom/utils/feature-detection.cjs.js

@@ -1,31 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const testAnimation = (keyframes) => document.createElement("div").animate(keyframes, { duration: 0.001 });
-const featureTests = {
-    cssRegisterProperty: () => typeof CSS !== "undefined" &&
-        Object.hasOwnProperty.call(CSS, "registerProperty"),
-    waapi: () => Object.hasOwnProperty.call(Element.prototype, "animate"),
-    partialKeyframes: () => {
-        try {
-            testAnimation({ opacity: [1] });
-        }
-        catch (e) {
-            return false;
-        }
-        return true;
-    },
-    finished: () => Boolean(testAnimation({ opacity: [0, 1] }).finished),
-};
-const results = {};
-const supports = {};
-for (const key in featureTests) {
-    supports[key] = () => {
-        if (results[key] === undefined)
-            results[key] = featureTests[key]();
-        return results[key];
-    };
-}
-
-exports.supports = supports;

package/dist/targets/dom/utils/feature-detection.es.js

@@ -1,27 +0,0 @@
-const testAnimation = (keyframes) => document.createElement("div").animate(keyframes, { duration: 0.001 });
-const featureTests = {
-    cssRegisterProperty: () => typeof CSS !== "undefined" &&
-        Object.hasOwnProperty.call(CSS, "registerProperty"),
-    waapi: () => Object.hasOwnProperty.call(Element.prototype, "animate"),
-    partialKeyframes: () => {
-        try {
-            testAnimation({ opacity: [1] });
-        }
-        catch (e) {
-            return false;
-        }
-        return true;
-    },
-    finished: () => Boolean(testAnimation({ opacity: [0, 1] }).finished),
-};
-const results = {};
-const supports = {};
-for (const key in featureTests) {
-    supports[key] = () => {
-        if (results[key] === undefined)
-            results[key] = featureTests[key]();
-        return results[key];
-    };
-}
-
-export { supports };

package/dist/targets/dom/utils/get-style-name.cjs.js

@@ -1,13 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var transforms = require('./transforms.cjs.js');
-
-function getStyleName(key) {
-    if (transforms.transformAlias[key])
-        key = transforms.transformAlias[key];
-    return transforms.isTransform(key) ? transforms.asTransformCssVar(key) : key;
-}
-
-exports.getStyleName = getStyleName;

package/dist/targets/dom/utils/get-style-name.es.js

@@ -1,9 +0,0 @@
-import { isTransform, asTransformCssVar, transformAlias } from './transforms.es.js';
-
-function getStyleName(key) {
-    if (transformAlias[key])
-        key = transformAlias[key];
-    return isTransform(key) ? asTransformCssVar(key) : key;
-}
-
-export { getStyleName };

package/dist/targets/dom/utils/keyframes.cjs.js

@@ -1,16 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function hydrateKeyframes(keyframes, readInitialValue) {
-    for (let i = 0; i < keyframes.length; i++) {
-        if (keyframes[i] === null) {
-            keyframes[i] = i ? keyframes[i - 1] : readInitialValue();
-        }
-    }
-    return keyframes;
-}
-const keyframesList = (keyframes) => Array.isArray(keyframes) ? keyframes : [keyframes];
-
-exports.hydrateKeyframes = hydrateKeyframes;
-exports.keyframesList = keyframesList;

package/dist/targets/dom/utils/keyframes.es.js

@@ -1,11 +0,0 @@
-function hydrateKeyframes(keyframes, readInitialValue) {
-    for (let i = 0; i < keyframes.length; i++) {
-        if (keyframes[i] === null) {
-            keyframes[i] = i ? keyframes[i - 1] : readInitialValue();
-        }
-    }
-    return keyframes;
-}
-const keyframesList = (keyframes) => Array.isArray(keyframes) ? keyframes : [keyframes];
-
-export { hydrateKeyframes, keyframesList };

package/dist/targets/dom/utils/options.cjs.js

@@ -1,13 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const getOptions = (options, key) => 
-/**
- * TODO: Make test for this
- * Always return a new object otherwise delay is overwritten by results of stagger
- * and this results in no stagger
- */
-options[key] ? Object.assign(Object.assign({}, options), options[key]) : Object.assign({}, options);
-
-exports.getOptions = getOptions;

package/dist/targets/dom/utils/options.es.js

@@ -1,9 +0,0 @@
-const getOptions = (options, key) => 
-/**
- * TODO: Make test for this
- * Always return a new object otherwise delay is overwritten by results of stagger
- * and this results in no stagger
- */
-options[key] ? Object.assign(Object.assign({}, options), options[key]) : Object.assign({}, options);
-
-export { getOptions };

package/dist/targets/dom/utils/resolve-elements.cjs.js

@@ -1,22 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-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 Array.from(elements);
-}
-
-exports.resolveElements = resolveElements;

package/dist/targets/dom/utils/resolve-elements.es.js

@@ -1,18 +0,0 @@
-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 Array.from(elements);
-}
-
-export { resolveElements };

package/dist/targets/dom/utils/stop-animation.cjs.js

@@ -1,19 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function stopAnimation(animation) {
-    if (!animation)
-        return;
-    // Suppress error thrown by WAAPI
-    try {
-        /**
-         * commitStyles has overhead so we only want to commit and cancel
-         */
-        animation.playState !== "finished" && animation.commitStyles();
-        animation.cancel();
-    }
-    catch (e) { }
-}
-
-exports.stopAnimation = stopAnimation;

package/dist/targets/dom/utils/stop-animation.es.js

@@ -1,15 +0,0 @@
-function stopAnimation(animation) {
-    if (!animation)
-        return;
-    // Suppress error thrown by WAAPI
-    try {
-        /**
-         * commitStyles has overhead so we only want to commit and cancel
-         */
-        animation.playState !== "finished" && animation.commitStyles();
-        animation.cancel();
-    }
-    catch (e) { }
-}
-
-export { stopAnimation };

package/dist/targets/dom/utils/time.cjs.js

@@ -1,7 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const ms = (seconds) => seconds * 1000;
-
-exports.ms = ms;

package/dist/targets/dom/utils/time.es.js

@@ -1,3 +0,0 @@
-const ms = (seconds) => seconds * 1000;
-
-export { ms };

package/dist/targets/dom/utils/transforms.cjs.js

@@ -1,85 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var array = require('../../../utils/array.cjs.js');
-var noop = require('../../../utils/noop.cjs.js');
-var data = require('../data.cjs.js');
-
-/**
- * A list of all transformable axes. We'll use this list to generated a version
- * of each axes for each transform.
- */
-const axes = ["", "X", "Y", "Z"];
-/**
- * An ordered array of each transformable value. By default, transform values
- * will be sorted to this order.
- */
-const order = ["translate", "scale", "rotate", "skew"];
-const transformAlias = {
-    x: "translateX",
-    y: "translateY",
-    z: "translateZ",
-};
-const rotation = {
-    syntax: "<angle>",
-    initialValue: "0deg",
-    toDefaultUnit: (v) => v + "deg",
-};
-const baseTransformProperties = {
-    translate: {
-        syntax: "<length-percentage>",
-        initialValue: "0px",
-        toDefaultUnit: (v) => v + "px",
-    },
-    rotate: rotation,
-    scale: {
-        syntax: "<number>",
-        initialValue: 1,
-        toDefaultUnit: noop.noopReturn,
-    },
-    skew: rotation,
-};
-const transformDefinitions = new Map();
-const asTransformCssVar = (name) => `--motion-${name}`;
-/**
- * Generate a list of every possible transform key
- */
-const transforms = ["x", "y", "z"];
-order.forEach((name) => {
-    axes.forEach((axis) => {
-        transforms.push(name + axis);
-        transformDefinitions.set(asTransformCssVar(name + axis), baseTransformProperties[name]);
-    });
-});
-/**
- * A function to use with Array.sort to sort transform keys by their default order.
- */
-const compareTransformOrder = (a, b) => transforms.indexOf(a) - transforms.indexOf(b);
-/**
- * Provide a quick way to check if a string is the name of a transform
- */
-const transformLookup = new Set(transforms);
-const isTransform = (name) => transformLookup.has(name);
-const addTransformToElement = (element, name) => {
-    // Map x to translateX etc
-    if (transformAlias[name])
-        name = transformAlias[name];
-    const { transforms } = data.getAnimationData(element);
-    array.addUniqueItem(transforms, name);
-    element.style.transform = buildTransformTemplate(transforms);
-};
-const buildTransformTemplate = (transforms) => transforms
-    .sort(compareTransformOrder)
-    .reduce(transformListToString, "")
-    .trim();
-const transformListToString = (template, name) => `${template} ${name}(var(${asTransformCssVar(name)}))`;
-
-exports.addTransformToElement = addTransformToElement;
-exports.asTransformCssVar = asTransformCssVar;
-exports.axes = axes;
-exports.buildTransformTemplate = buildTransformTemplate;
-exports.compareTransformOrder = compareTransformOrder;
-exports.isTransform = isTransform;
-exports.transformAlias = transformAlias;
-exports.transformDefinitions = transformDefinitions;

package/dist/targets/dom/utils/transforms.es.js

@@ -1,74 +0,0 @@
-import { addUniqueItem } from '../../../utils/array.es.js';
-import { noopReturn } from '../../../utils/noop.es.js';
-import { getAnimationData } from '../data.es.js';
-
-/**
- * A list of all transformable axes. We'll use this list to generated a version
- * of each axes for each transform.
- */
-const axes = ["", "X", "Y", "Z"];
-/**
- * An ordered array of each transformable value. By default, transform values
- * will be sorted to this order.
- */
-const order = ["translate", "scale", "rotate", "skew"];
-const transformAlias = {
-    x: "translateX",
-    y: "translateY",
-    z: "translateZ",
-};
-const rotation = {
-    syntax: "<angle>",
-    initialValue: "0deg",
-    toDefaultUnit: (v) => v + "deg",
-};
-const baseTransformProperties = {
-    translate: {
-        syntax: "<length-percentage>",
-        initialValue: "0px",
-        toDefaultUnit: (v) => v + "px",
-    },
-    rotate: rotation,
-    scale: {
-        syntax: "<number>",
-        initialValue: 1,
-        toDefaultUnit: noopReturn,
-    },
-    skew: rotation,
-};
-const transformDefinitions = new Map();
-const asTransformCssVar = (name) => `--motion-${name}`;
-/**
- * Generate a list of every possible transform key
- */
-const transforms = ["x", "y", "z"];
-order.forEach((name) => {
-    axes.forEach((axis) => {
-        transforms.push(name + axis);
-        transformDefinitions.set(asTransformCssVar(name + axis), baseTransformProperties[name]);
-    });
-});
-/**
- * A function to use with Array.sort to sort transform keys by their default order.
- */
-const compareTransformOrder = (a, b) => transforms.indexOf(a) - transforms.indexOf(b);
-/**
- * Provide a quick way to check if a string is the name of a transform
- */
-const transformLookup = new Set(transforms);
-const isTransform = (name) => transformLookup.has(name);
-const addTransformToElement = (element, name) => {
-    // Map x to translateX etc
-    if (transformAlias[name])
-        name = transformAlias[name];
-    const { transforms } = getAnimationData(element);
-    addUniqueItem(transforms, name);
-    element.style.transform = buildTransformTemplate(transforms);
-};
-const buildTransformTemplate = (transforms) => transforms
-    .sort(compareTransformOrder)
-    .reduce(transformListToString, "")
-    .trim();
-const transformListToString = (template, name) => `${template} ${name}(var(${asTransformCssVar(name)}))`;
-
-export { addTransformToElement, asTransformCssVar, axes, buildTransformTemplate, compareTransformOrder, isTransform, transformAlias, transformDefinitions };

package/dist/targets/js/NumberAnimation.cjs.js

@@ -1,144 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var defaults = require('../dom/utils/defaults.cjs.js');
-var easing = require('../dom/utils/easing.cjs.js');
-var getFunction = require('./easing/utils/get-function.cjs.js');
-var interpolate = require('./utils/interpolate.cjs.js');
-
-class NumberAnimation {
-    constructor(output, keyframes = [0, 1], { easing: easing$1 = defaults.defaults.easing, duration = defaults.defaults.duration, delay = defaults.defaults.delay, endDelay = defaults.defaults.endDelay, repeat = defaults.defaults.repeat, offset, direction = "normal", } = {}) {
-        this.startTime = 0;
-        this.rate = 1;
-        this.t = 0;
-        this.cancelTimestamp = 0;
-        this.playState = "idle";
-        this.finished = new Promise((resolve, reject) => {
-            this.resolve = resolve;
-            this.reject = reject;
-        });
-        const totalDuration = duration * (repeat + 1);
-        /**
-         * We don't currently support custom easing (spring, glide etc) in NumberAnimation
-         * (although this is completely possible), so this will have been hydrated by
-         * animateStyle.
-         */
-        if (easing.isCustomEasing(easing$1))
-            easing$1 = "ease";
-        const interpolate$1 = interpolate.slowInterpolateNumbers(keyframes, offset, easing.isEasingList(easing$1)
-            ? easing$1.map(getFunction.getEasingFunction)
-            : getFunction.getEasingFunction(easing$1));
-        this.tick = (timestamp) => {
-            if (this.pauseTime)
-                timestamp = this.pauseTime;
-            let t = (timestamp - this.startTime) * this.rate;
-            this.t = t;
-            // Convert to seconds
-            t /= 1000;
-            // Rebase on delay
-            t = Math.max(t - delay, 0);
-            /**
-             * If this animation has finished, set the current time
-             * to the total duration.
-             */
-            if (this.playState === "finished")
-                t = totalDuration;
-            /**
-             * Get the current progress (0-1) of the animation. If t is >
-             * than duration we'll get values like 2.5 (midway through the
-             * third iteration)
-             */
-            const progress = t / duration;
-            // TODO progress += iterationStart
-            /**
-             * Get the current iteration (0 indexed). For instance the floor of
-             * 2.5 is 2.
-             */
-            let currentIteration = Math.floor(progress);
-            /**
-             * Get the current progress of the iteration by taking the remainder
-             * so 2.5 is 0.5 through iteration 2
-             */
-            let iterationProgress = progress % 1.0;
-            if (!iterationProgress && progress >= 1) {
-                iterationProgress = 1;
-            }
-            /**
-             * If iteration progress is 1 we count that as the end
-             * of the previous iteration.
-             */
-            iterationProgress === 1 && currentIteration--;
-            /**
-             * Reverse progress if we're not running in "normal" direction
-             */
-            const iterationIsOdd = currentIteration % 2;
-            if (direction === "reverse" ||
-                (direction === "alternate" && iterationIsOdd) ||
-                (direction === "alternate-reverse" && !iterationIsOdd)) {
-                iterationProgress = 1 - iterationProgress;
-            }
-            const latest = interpolate$1(t >= totalDuration ? 1 : Math.min(iterationProgress, 1));
-            output(latest);
-            const isAnimationFinished = this.playState === "finished" || t >= totalDuration + endDelay;
-            if (isAnimationFinished) {
-                this.playState = "finished";
-                this.resolve(latest);
-            }
-            else if (this.playState !== "idle") {
-                requestAnimationFrame(this.tick);
-            }
-        };
-        this.play();
-    }
-    play() {
-        const now = performance.now();
-        this.playState = "running";
-        if (this.pauseTime) {
-            this.startTime = now - (this.pauseTime - this.startTime);
-        }
-        else if (!this.startTime) {
-            this.startTime = now;
-        }
-        this.pauseTime = undefined;
-        requestAnimationFrame(this.tick);
-    }
-    pause() {
-        this.playState = "paused";
-        this.pauseTime = performance.now();
-    }
-    finish() {
-        this.playState = "finished";
-        this.tick(0);
-    }
-    cancel() {
-        this.playState = "idle";
-        this.tick(this.cancelTimestamp);
-        this.reject(false);
-    }
-    reverse() {
-        this.rate *= -1;
-    }
-    commitStyles() {
-        this.cancelTimestamp = performance.now();
-    }
-    get currentTime() {
-        return this.t;
-    }
-    set currentTime(t) {
-        if (this.pauseTime || this.rate === 0) {
-            this.pauseTime = t;
-        }
-        else {
-            this.startTime = performance.now() - t / this.rate;
-        }
-    }
-    get playbackRate() {
-        return this.rate;
-    }
-    set playbackRate(rate) {
-        this.rate = rate;
-    }
-}
-
-exports.NumberAnimation = NumberAnimation;