motion 10.3.2 → 10.5.0-alpha.3

package/dist/targets/react/context.cjs.js

@@ -1,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-
-const AnimationContext = React.createContext({});
-
-exports.AnimationContext = AnimationContext;

package/dist/targets/react/context.es.js

@@ -1,5 +0,0 @@
-import { createContext } from 'react';
-
-const AnimationContext = createContext({});
-
-export { AnimationContext };

package/dist/targets/react/hooks/use-animation.cjs.js

@@ -1,47 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var animateStyle = require('../../dom/animate-style.cjs.js');
-var noop = require('../../../utils/noop.cjs.js');
-var hasChanged = require('../utils/has-changed.cjs.js');
-var options = require('../../dom/utils/options.cjs.js');
-
-function useAnimation(ref, initial, target, options$1, onStart, onComplete) {
-    const prevTarget = React.useRef(initial);
-    React.useEffect(() => {
-        const targetKeyframe = {};
-        const allKeys = new Set([
-            ...Object.keys(target),
-            ...Object.keys(prevTarget.current),
-        ]);
-        allKeys.forEach((key) => {
-            let next = target[key];
-            if (!hasChanged.hasChanged(next, prevTarget.current[key]))
-                return;
-            /**
-             * TODO: If next is undefined, throw error or record a "base value"
-             * to animate back down to
-             */
-            targetKeyframe[key] = next;
-        });
-        if (Object.keys(targetKeyframe).length && ref.current) {
-            onStart === null || onStart === void 0 ? void 0 : onStart(targetKeyframe);
-            const animationFactories = [];
-            for (const key in targetKeyframe) {
-                const animation = animateStyle.animateStyle(ref.current, key, targetKeyframe[key], options.getOptions(options$1, key));
-                animationFactories.push(animation);
-            }
-            const animations = animationFactories
-                .map((factory) => factory())
-                .filter(Boolean);
-            Promise.all(animations.map((animation) => animation.finished))
-                .then(() => onComplete === null || onComplete === void 0 ? void 0 : onComplete(targetKeyframe))
-                .catch(noop.noop);
-        }
-        prevTarget.current = target;
-    });
-}
-
-exports.useAnimation = useAnimation;

package/dist/targets/react/hooks/use-animation.es.js

@@ -1,43 +0,0 @@
-import { useRef, useEffect } from 'react';
-import { animateStyle } from '../../dom/animate-style.es.js';
-import { noop } from '../../../utils/noop.es.js';
-import { hasChanged } from '../utils/has-changed.es.js';
-import { getOptions } from '../../dom/utils/options.es.js';
-
-function useAnimation(ref, initial, target, options, onStart, onComplete) {
-    const prevTarget = useRef(initial);
-    useEffect(() => {
-        const targetKeyframe = {};
-        const allKeys = new Set([
-            ...Object.keys(target),
-            ...Object.keys(prevTarget.current),
-        ]);
-        allKeys.forEach((key) => {
-            let next = target[key];
-            if (!hasChanged(next, prevTarget.current[key]))
-                return;
-            /**
-             * TODO: If next is undefined, throw error or record a "base value"
-             * to animate back down to
-             */
-            targetKeyframe[key] = next;
-        });
-        if (Object.keys(targetKeyframe).length && ref.current) {
-            onStart === null || onStart === void 0 ? void 0 : onStart(targetKeyframe);
-            const animationFactories = [];
-            for (const key in targetKeyframe) {
-                const animation = animateStyle(ref.current, key, targetKeyframe[key], getOptions(options, key));
-                animationFactories.push(animation);
-            }
-            const animations = animationFactories
-                .map((factory) => factory())
-                .filter(Boolean);
-            Promise.all(animations.map((animation) => animation.finished))
-                .then(() => onComplete === null || onComplete === void 0 ? void 0 : onComplete(targetKeyframe))
-                .catch(noop);
-        }
-        prevTarget.current = target;
-    });
-}
-
-export { useAnimation };

package/dist/targets/react/hooks/use-exit.cjs.js

@@ -1,27 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var framerMotion = require('framer-motion');
-var React = require('react');
-var poses = require('../utils/poses.cjs.js');
-var updateTarget = require('../utils/update-target.cjs.js');
-
-function useExit(target, options, { exit, poses: poses$1 }, { exit: inheritedExit }) {
-    const [isPresent, onExitComplete] = framerMotion.usePresence();
-    /**
-     * In case we don't have an exit animation defined we still need to
-     * call onExitComplete if it exits so AnimatePresence knows it
-     * can remove this component.
-     */
-    React.useEffect(() => {
-        if (!exit)
-            onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete();
-    }, [isPresent]);
-    if (exit && !isPresent) {
-        updateTarget.updateTargetAndOptions(target, options, poses.resolvePose(exit, inheritedExit, poses$1));
-        return onExitComplete;
-    }
-}
-
-exports.useExit = useExit;

package/dist/targets/react/hooks/use-exit.es.js

@@ -1,23 +0,0 @@
-import { usePresence } from 'framer-motion';
-import { useEffect } from 'react';
-import { resolvePose } from '../utils/poses.es.js';
-import { updateTargetAndOptions } from '../utils/update-target.es.js';
-
-function useExit(target, options, { exit, poses }, { exit: inheritedExit }) {
-    const [isPresent, onExitComplete] = usePresence();
-    /**
-     * In case we don't have an exit animation defined we still need to
-     * call onExitComplete if it exits so AnimatePresence knows it
-     * can remove this component.
-     */
-    useEffect(() => {
-        if (!exit)
-            onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete();
-    }, [isPresent]);
-    if (exit && !isPresent) {
-        updateTargetAndOptions(target, options, resolvePose(exit, inheritedExit, poses));
-        return onExitComplete;
-    }
-}
-
-export { useExit };

package/dist/targets/react/hooks/use-gesture-state.cjs.js

@@ -1,17 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var poses = require('../utils/poses.cjs.js');
-var updateTarget = require('../utils/update-target.cjs.js');
-
-function useGestureState(target, options, stylesToApply, inheritedPose, poses$1) {
-    const [isGestureActive, setGestureState] = React.useState(false);
-    if (isGestureActive || inheritedPose) {
-        updateTarget.updateTargetAndOptions(target, options, poses.resolvePose(stylesToApply, inheritedPose, poses$1));
-    }
-    return [isGestureActive || Boolean(inheritedPose), setGestureState];
-}
-
-exports.useGestureState = useGestureState;

package/dist/targets/react/hooks/use-gesture-state.es.js

@@ -1,13 +0,0 @@
-import { useState } from 'react';
-import { resolvePose } from '../utils/poses.es.js';
-import { updateTargetAndOptions } from '../utils/update-target.es.js';
-
-function useGestureState(target, options, stylesToApply, inheritedPose, poses) {
-    const [isGestureActive, setGestureState] = useState(false);
-    if (isGestureActive || inheritedPose) {
-        updateTargetAndOptions(target, options, resolvePose(stylesToApply, inheritedPose, poses));
-    }
-    return [isGestureActive || Boolean(inheritedPose), setGestureState];
-}
-
-export { useGestureState };

package/dist/targets/react/hooks/use-hover.cjs.js

@@ -1,24 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var useGestureState = require('./use-gesture-state.cjs.js');
-
-function useHover(target, options, { hover, onPointerEnter, onPointerLeave, poses, } = {}, { hover: inheritedHover }, isPoseActive) {
-    const [isHoverActive, setHoverState] = useGestureState.useGestureState(target, options, hover, inheritedHover, poses);
-    isPoseActive.hover = isHoverActive;
-    return hover
-        ? {
-            onPointerEnter: (e) => {
-                onPointerEnter === null || onPointerEnter === void 0 ? void 0 : onPointerEnter(e);
-                setHoverState(true);
-            },
-            onPointerLeave: (e) => {
-                onPointerLeave === null || onPointerLeave === void 0 ? void 0 : onPointerLeave(e);
-                setHoverState(false);
-            },
-        }
-        : {};
-}
-
-exports.useHover = useHover;

package/dist/targets/react/hooks/use-hover.es.js

@@ -1,20 +0,0 @@
-import { useGestureState } from './use-gesture-state.es.js';
-
-function useHover(target, options, { hover, onPointerEnter, onPointerLeave, poses, } = {}, { hover: inheritedHover }, isPoseActive) {
-    const [isHoverActive, setHoverState] = useGestureState(target, options, hover, inheritedHover, poses);
-    isPoseActive.hover = isHoverActive;
-    return hover
-        ? {
-            onPointerEnter: (e) => {
-                onPointerEnter === null || onPointerEnter === void 0 ? void 0 : onPointerEnter(e);
-                setHoverState(true);
-            },
-            onPointerLeave: (e) => {
-                onPointerLeave === null || onPointerLeave === void 0 ? void 0 : onPointerLeave(e);
-                setHoverState(false);
-            },
-        }
-        : {};
-}
-
-export { useHover };

package/dist/targets/react/hooks/use-press.cjs.js

@@ -1,25 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var useGestureState = require('./use-gesture-state.cjs.js');
-
-function usePress(target, options, { press, onPointerDown, poses } = {}, { press: inheritedPress }, isPoseActive) {
-    const [isPressActive, setPressState] = useGestureState.useGestureState(target, options, press, inheritedPress, poses);
-    isPoseActive.press = isPressActive;
-    if (!press)
-        return {};
-    const onPointerUp = () => {
-        setPressState(false);
-        window.removeEventListener("pointerup", onPointerUp);
-    };
-    return {
-        onPointerDown: (e) => {
-            onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(e);
-            setPressState(true);
-            window.addEventListener("pointerup", onPointerUp);
-        },
-    };
-}
-
-exports.usePress = usePress;

package/dist/targets/react/hooks/use-press.es.js

@@ -1,21 +0,0 @@
-import { useGestureState } from './use-gesture-state.es.js';
-
-function usePress(target, options, { press, onPointerDown, poses } = {}, { press: inheritedPress }, isPoseActive) {
-    const [isPressActive, setPressState] = useGestureState(target, options, press, inheritedPress, poses);
-    isPoseActive.press = isPressActive;
-    if (!press)
-        return {};
-    const onPointerUp = () => {
-        setPressState(false);
-        window.removeEventListener("pointerup", onPointerUp);
-    };
-    return {
-        onPointerDown: (e) => {
-            onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(e);
-            setPressState(true);
-            window.addEventListener("pointerup", onPointerUp);
-        },
-    };
-}
-
-export { usePress };

package/dist/targets/react/hooks/use-viewport.cjs.js

@@ -1,37 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var useGestureState = require('./use-gesture-state.cjs.js');
-
-function useViewport(ref, target, options, { inViewport, poses, viewport = {}, onViewportEnter, onViewportLeave, }, { inViewport: inheritedInViewport }, isPoseActive) {
-    const { root, margin: rootMargin, once, threshold } = viewport;
-    const [isInViewport, setViewportState] = useGestureState.useGestureState(target, options, inViewport, inheritedInViewport, poses);
-    isPoseActive.inViewport = isInViewport;
-    let shouldObserve = !!inViewport || !!onViewportEnter || !!onViewportLeave;
-    if (once && isInViewport)
-        shouldObserve = false;
-    React.useEffect(() => {
-        if (!shouldObserve || typeof IntersectionObserver === "undefined")
-            return;
-        const observer = new IntersectionObserver(([entry]) => {
-            setViewportState(entry.isIntersecting);
-            const callback = entry.isIntersecting
-                ? onViewportEnter
-                : onViewportLeave;
-            callback && callback(entry);
-        }, { root: root === null || root === void 0 ? void 0 : root.current, rootMargin, threshold });
-        observer.observe(ref.current);
-        return () => observer.disconnect();
-    }, [
-        inViewport,
-        onViewportEnter,
-        onViewportLeave,
-        root,
-        rootMargin,
-        threshold,
-    ]);
-}
-
-exports.useViewport = useViewport;

package/dist/targets/react/hooks/use-viewport.es.js

@@ -1,33 +0,0 @@
-import { useEffect } from 'react';
-import { useGestureState } from './use-gesture-state.es.js';
-
-function useViewport(ref, target, options, { inViewport, poses, viewport = {}, onViewportEnter, onViewportLeave, }, { inViewport: inheritedInViewport }, isPoseActive) {
-    const { root, margin: rootMargin, once, threshold } = viewport;
-    const [isInViewport, setViewportState] = useGestureState(target, options, inViewport, inheritedInViewport, poses);
-    isPoseActive.inViewport = isInViewport;
-    let shouldObserve = !!inViewport || !!onViewportEnter || !!onViewportLeave;
-    if (once && isInViewport)
-        shouldObserve = false;
-    useEffect(() => {
-        if (!shouldObserve || typeof IntersectionObserver === "undefined")
-            return;
-        const observer = new IntersectionObserver(([entry]) => {
-            setViewportState(entry.isIntersecting);
-            const callback = entry.isIntersecting
-                ? onViewportEnter
-                : onViewportLeave;
-            callback && callback(entry);
-        }, { root: root === null || root === void 0 ? void 0 : root.current, rootMargin, threshold });
-        observer.observe(ref.current);
-        return () => observer.disconnect();
-    }, [
-        inViewport,
-        onViewportEnter,
-        onViewportLeave,
-        root,
-        rootMargin,
-        threshold,
-    ]);
-}
-
-export { useViewport };

package/dist/targets/react/index.cjs.js

@@ -1,17 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var animated$1 = require('./animated.cjs.js');
-
-const components = new Map();
-const animated = new Proxy({}, {
-    get: (_, key) => {
-        if (!components.has(key)) {
-            components.set(key, animated$1.createAnimatedComponent(key));
-        }
-        return components.get(key);
-    },
-});
-
-exports.animated = animated;

package/dist/targets/react/index.es.js

@@ -1,13 +0,0 @@
-import { createAnimatedComponent } from './animated.es.js';
-
-const components = new Map();
-const animated = new Proxy({}, {
-    get: (_, key) => {
-        if (!components.has(key)) {
-            components.set(key, createAnimatedComponent(key));
-        }
-        return components.get(key);
-    },
-});
-
-export { animated };

package/dist/targets/react/utils/has-changed.cjs.js

@@ -1,24 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function hasChanged(a, b) {
-    if (typeof a !== typeof b)
-        return true;
-    if (Array.isArray(a) && Array.isArray(b))
-        return !shallowCompare(a, b);
-    return a !== b;
-}
-function shallowCompare(next, prev) {
-    const prevLength = prev.length;
-    if (prevLength !== next.length)
-        return false;
-    for (let i = 0; i < prevLength; i++) {
-        if (prev[i] !== next[i])
-            return false;
-    }
-    return true;
-}
-
-exports.hasChanged = hasChanged;
-exports.shallowCompare = shallowCompare;

package/dist/targets/react/utils/has-changed.es.js

@@ -1,19 +0,0 @@
-function hasChanged(a, b) {
-    if (typeof a !== typeof b)
-        return true;
-    if (Array.isArray(a) && Array.isArray(b))
-        return !shallowCompare(a, b);
-    return a !== b;
-}
-function shallowCompare(next, prev) {
-    const prevLength = prev.length;
-    if (prevLength !== next.length)
-        return false;
-    for (let i = 0; i < prevLength; i++) {
-        if (prev[i] !== next[i])
-            return false;
-    }
-    return true;
-}
-
-export { hasChanged, shallowCompare };

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

@@ -1,38 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var isNumber = require('../../../utils/is-number.cjs.js');
-var transforms = require('../../dom/utils/transforms.cjs.js');
-
-function convertKeyframesToStyles(keyframes) {
-    const initialKeyframes = {};
-    const transformKeys = [];
-    for (let key in keyframes) {
-        const value = keyframes[key];
-        if (transforms.isTransform(key)) {
-            if (transforms.transformAlias[key])
-                key = transforms.transformAlias[key];
-            transformKeys.push(key);
-            key = transforms.asTransformCssVar(key);
-        }
-        let initialKeyframe = Array.isArray(value) ? value[0] : value;
-        /**
-         * If this is a number and we have a default value type, convert the number
-         * to this type.
-         */
-        const definition = transforms.transformDefinitions.get(key);
-        if (definition) {
-            initialKeyframe = isNumber.isNumber(value)
-                ? definition.toDefaultUnit(value)
-                : value;
-        }
-        initialKeyframes[key] = initialKeyframe;
-    }
-    if (transformKeys.length) {
-        initialKeyframes.transform = transforms.buildTransformTemplate(transformKeys);
-    }
-    return initialKeyframes;
-}
-
-exports.convertKeyframesToStyles = convertKeyframesToStyles;

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

@@ -1,34 +0,0 @@
-import { isNumber } from '../../../utils/is-number.es.js';
-import { isTransform, transformAlias, asTransformCssVar, transformDefinitions, buildTransformTemplate } from '../../dom/utils/transforms.es.js';
-
-function convertKeyframesToStyles(keyframes) {
-    const initialKeyframes = {};
-    const transformKeys = [];
-    for (let key in keyframes) {
-        const value = keyframes[key];
-        if (isTransform(key)) {
-            if (transformAlias[key])
-                key = transformAlias[key];
-            transformKeys.push(key);
-            key = asTransformCssVar(key);
-        }
-        let initialKeyframe = Array.isArray(value) ? value[0] : value;
-        /**
-         * If this is a number and we have a default value type, convert the number
-         * to this type.
-         */
-        const definition = transformDefinitions.get(key);
-        if (definition) {
-            initialKeyframe = isNumber(value)
-                ? definition.toDefaultUnit(value)
-                : value;
-        }
-        initialKeyframes[key] = initialKeyframe;
-    }
-    if (transformKeys.length) {
-        initialKeyframes.transform = buildTransformTemplate(transformKeys);
-    }
-    return initialKeyframes;
-}
-
-export { convertKeyframesToStyles };

package/dist/targets/react/utils/poses.cjs.js

@@ -1,14 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function resolvePose(definition, inheritedDefinition, poses = {}) {
-    if (definition) {
-        return typeof definition === "string" ? poses[definition] : definition;
-    }
-    else if (inheritedDefinition) {
-        return poses[inheritedDefinition];
-    }
-}
-
-exports.resolvePose = resolvePose;

package/dist/targets/react/utils/poses.es.js

@@ -1,10 +0,0 @@
-function resolvePose(definition, inheritedDefinition, poses = {}) {
-    if (definition) {
-        return typeof definition === "string" ? poses[definition] : definition;
-    }
-    else if (inheritedDefinition) {
-        return poses[inheritedDefinition];
-    }
-}
-
-export { resolvePose };

package/dist/targets/react/utils/update-target.cjs.js

@@ -1,20 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var options = require('../../dom/utils/options.cjs.js');
-
-function updateTargetAndOptions(target, options$1, toApply) {
-    if (!toApply)
-        return;
-    for (const key in toApply) {
-        if (key === "options")
-            continue;
-        target[key] = toApply[key];
-        if (toApply.options) {
-            options$1[key] = options.getOptions(toApply.options, key);
-        }
-    }
-}
-
-exports.updateTargetAndOptions = updateTargetAndOptions;

package/dist/targets/react/utils/update-target.es.js

@@ -1,16 +0,0 @@
-import { getOptions } from '../../dom/utils/options.es.js';
-
-function updateTargetAndOptions(target, options, toApply) {
-    if (!toApply)
-        return;
-    for (const key in toApply) {
-        if (key === "options")
-            continue;
-        target[key] = toApply[key];
-        if (toApply.options) {
-            options[key] = getOptions(toApply.options, key);
-        }
-    }
-}
-
-export { updateTargetAndOptions };

package/dist/utils/array.cjs.js

@@ -1,14 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function addUniqueItem(array, item) {
-    array.indexOf(item) === -1 && array.push(item);
-}
-function removeItem(arr, item) {
-    const index = arr.indexOf(item);
-    index > -1 && arr.splice(index, 1);
-}
-
-exports.addUniqueItem = addUniqueItem;
-exports.removeItem = removeItem;

package/dist/utils/array.es.js

@@ -1,9 +0,0 @@
-function addUniqueItem(array, item) {
-    array.indexOf(item) === -1 && array.push(item);
-}
-function removeItem(arr, item) {
-    const index = arr.indexOf(item);
-    index > -1 && arr.splice(index, 1);
-}
-
-export { addUniqueItem, removeItem };

package/dist/utils/clamp.cjs.js

@@ -1,7 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const clamp = (min, max, v) => Math.min(Math.max(v, min), max);
-
-exports.clamp = clamp;

package/dist/utils/clamp.es.js

@@ -1,3 +0,0 @@
-const clamp = (min, max, v) => Math.min(Math.max(v, min), max);
-
-export { clamp };

package/dist/utils/is-number.cjs.js

@@ -1,7 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const isNumber = (value) => typeof value === "number";
-
-exports.isNumber = isNumber;

package/dist/utils/is-number.es.js

@@ -1,3 +0,0 @@
-const isNumber = (value) => typeof value === "number";
-
-export { isNumber };

package/dist/utils/mix.cjs.js

@@ -1,28 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-/*
-  Value in range from progress
-
-  Given a lower limit and an upper limit, we return the value within
-  that range as expressed by progress (usually a number from 0 to 1)
-
-  So progress = 0.5 would change
-
-  from -------- to
-
-  to
-
-  from ---- to
-
-  E.g. from = 10, to = 20, progress = 0.5 => 15
-
-  @param [number]: Lower limit of range
-  @param [number]: Upper limit of range
-  @param [number]: The progress between lower and upper limits expressed 0-1
-  @return [number]: Value as calculated from progress within range (not limited within range)
-*/
-const mix = (from, to, progress) => -progress * from + progress * to + from;
-
-exports.mix = mix;