motion 10.18.0 → 11.11.13

package/dist/es/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.mjs

@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import { initPrefersReducedMotion } from './index.mjs';
+import { warnOnce } from '../warn-once.mjs';
+import { hasReducedMotionListener, prefersReducedMotion } from './state.mjs';
+
+/**
+ * A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting.
+ *
+ * This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing
+ * `x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion.
+ *
+ * It will actively respond to changes and re-render your components with the latest setting.
+ *
+ * ```jsx
+ * export function Sidebar({ isOpen }) {
+ *   const shouldReduceMotion = useReducedMotion()
+ *   const closedX = shouldReduceMotion ? 0 : "-100%"
+ *
+ *   return (
+ *     <motion.div animate={{
+ *       opacity: isOpen ? 1 : 0,
+ *       x: isOpen ? 0 : closedX
+ *     }} />
+ *   )
+ * }
+ * ```
+ *
+ * @return boolean
+ *
+ * @public
+ */
+function useReducedMotion() {
+    /**
+     * Lazy initialisation of prefersReducedMotion
+     */
+    !hasReducedMotionListener.current && initPrefersReducedMotion();
+    const [shouldReduceMotion] = useState(prefersReducedMotion.current);
+    if (process.env.NODE_ENV !== "production") {
+        warnOnce(shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.");
+    }
+    /**
+     * TODO See if people miss automatically updating shouldReduceMotion setting
+     */
+    return shouldReduceMotion;
+}
+
+export { useReducedMotion };

package/dist/es/framer-motion/dist/es/utils/resolve-value.mjs

@@ -0,0 +1,11 @@
+import { isKeyframesTarget } from '../animation/utils/is-keyframes-target.mjs';
+
+const isCustomValue = (v) => {
+    return Boolean(v && typeof v === "object" && v.mix && v.toValue);
+};
+const resolveFinalValueInKeyframes = (v) => {
+    // TODO maybe throw if v.length - 1 is placeholder token?
+    return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
+};
+
+export { isCustomValue, resolveFinalValueInKeyframes };

package/dist/es/framer-motion/dist/es/utils/shallow-compare.mjs

@@ -0,0 +1,14 @@
+function shallowCompare(next, prev) {
+    if (!Array.isArray(prev))
+        return false;
+    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 { shallowCompare };

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

@@ -0,0 +1,40 @@
+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/framer-motion/dist/es/utils/time-conversion.mjs

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

package/dist/es/framer-motion/dist/es/utils/transform.mjs

@@ -0,0 +1,21 @@
+import { interpolate } from './interpolate.mjs';
+
+const isCustomValueType = (v) => {
+    return v && typeof v === "object" && v.mix;
+};
+const getMixer = (v) => (isCustomValueType(v) ? v.mix : undefined);
+function transform(...args) {
+    const useImmediate = !Array.isArray(args[0]);
+    const argOffset = useImmediate ? 0 : -1;
+    const inputValue = args[0 + argOffset];
+    const inputRange = args[1 + argOffset];
+    const outputRange = args[2 + argOffset];
+    const options = args[3 + argOffset];
+    const interpolator = interpolate(inputRange, outputRange, {
+        mixer: getMixer(outputRange[0]),
+        ...options,
+    });
+    return useImmediate ? interpolator(inputValue) : interpolator;
+}
+
+export { transform };

package/dist/es/framer-motion/dist/es/utils/use-animation-frame.mjs

@@ -0,0 +1,21 @@
+import { useRef, useContext, useEffect } from 'react';
+import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
+import { frame, cancelFrame } from '../frameloop/frame.mjs';
+
+function useAnimationFrame(callback) {
+    const initialTimestamp = useRef(0);
+    const { isStatic } = useContext(MotionConfigContext);
+    useEffect(() => {
+        if (isStatic)
+            return;
+        const provideTimeSinceStart = ({ timestamp, delta }) => {
+            if (!initialTimestamp.current)
+                initialTimestamp.current = timestamp;
+            callback(timestamp - initialTimestamp.current, delta);
+        };
+        frame.update(provideTimeSinceStart, true);
+        return () => cancelFrame(provideTimeSinceStart);
+    }, [callback]);
+}
+
+export { useAnimationFrame };

package/dist/es/framer-motion/dist/es/utils/use-constant.mjs

@@ -0,0 +1,18 @@
+import { useRef } from 'react';
+
+/**
+ * Creates a constant value over the lifecycle of a component.
+ *
+ * Even if `useMemo` is provided an empty array as its final argument, it doesn't offer
+ * a guarantee that it won't re-run for performance reasons later on. By using `useConstant`
+ * you can ensure that initialisers don't execute twice or more.
+ */
+function useConstant(init) {
+    const ref = useRef(null);
+    if (ref.current === null) {
+        ref.current = init();
+    }
+    return ref.current;
+}
+
+export { useConstant };

package/dist/es/framer-motion/dist/es/utils/use-cycle.mjs

@@ -0,0 +1,47 @@
+import { useRef, useState, useCallback } from 'react';
+import { wrap } from './wrap.mjs';
+
+/**
+ * Cycles through a series of visual properties. Can be used to toggle between or cycle through animations. It works similar to `useState` in React. It is provided an initial array of possible states, and returns an array of two arguments.
+ *
+ * An index value can be passed to the returned `cycle` function to cycle to a specific index.
+ *
+ * ```jsx
+ * import * as React from "react"
+ * import { motion, useCycle } from "framer-motion"
+ *
+ * export const MyComponent = () => {
+ *   const [x, cycleX] = useCycle(0, 50, 100)
+ *
+ *   return (
+ *     <motion.div
+ *       animate={{ x: x }}
+ *       onTap={() => cycleX()}
+ *      />
+ *    )
+ * }
+ * ```
+ *
+ * @param items - items to cycle through
+ * @returns [currentState, cycleState]
+ *
+ * @public
+ */
+function useCycle(...items) {
+    const index = useRef(0);
+    const [item, setItem] = useState(items[index.current]);
+    const runCycle = useCallback((next) => {
+        index.current =
+            typeof next !== "number"
+                ? wrap(0, items.length, index.current + 1)
+                : next;
+        setItem(items[index.current]);
+    }, 
+    // The array will change on each call, but by putting items.length at
+    // the front of this array, we guarantee the dependency comparison will match up
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [items.length, ...items]);
+    return [item, runCycle];
+}
+
+export { useCycle };

package/dist/es/framer-motion/dist/es/utils/use-force-update.mjs

@@ -0,0 +1,19 @@
+import { useState, useCallback } from 'react';
+import { useIsMounted } from './use-is-mounted.mjs';
+import { frame } from '../frameloop/frame.mjs';
+
+function useForceUpdate() {
+    const isMounted = useIsMounted();
+    const [forcedRenderCount, setForcedRenderCount] = useState(0);
+    const forceRender = useCallback(() => {
+        isMounted.current && setForcedRenderCount(forcedRenderCount + 1);
+    }, [forcedRenderCount]);
+    /**
+     * Defer this to the end of the next animation frame in case there are multiple
+     * synchronous calls.
+     */
+    const deferredForceRender = useCallback(() => frame.postRender(forceRender), [forceRender]);
+    return [deferredForceRender, forcedRenderCount];
+}
+
+export { useForceUpdate };

package/dist/es/framer-motion/dist/es/utils/use-in-view.mjs

@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+import { inView } from '../render/dom/viewport/index.mjs';
+
+function useInView(ref, { root, margin, amount, once = false } = {}) {
+    const [isInView, setInView] = useState(false);
+    useEffect(() => {
+        if (!ref.current || (once && isInView))
+            return;
+        const onEnter = () => {
+            setInView(true);
+            return once ? undefined : () => setInView(false);
+        };
+        const options = {
+            root: (root && root.current) || undefined,
+            margin,
+            amount,
+        };
+        return inView(ref.current, onEnter, options);
+    }, [root, ref, margin, once, amount]);
+    return isInView;
+}
+
+export { useInView };

package/dist/es/framer-motion/dist/es/utils/use-instant-transition-state.mjs

@@ -0,0 +1,5 @@
+const instantAnimationState = {
+    current: false,
+};
+
+export { instantAnimationState };

package/dist/es/framer-motion/dist/es/utils/use-instant-transition.mjs

@@ -0,0 +1,41 @@
+import { useRef, useEffect } from 'react';
+import { useInstantLayoutTransition } from '../projection/use-instant-layout-transition.mjs';
+import { useForceUpdate } from './use-force-update.mjs';
+import { instantAnimationState } from './use-instant-transition-state.mjs';
+import { frame } from '../frameloop/frame.mjs';
+
+function useInstantTransition() {
+    const [forceUpdate, forcedRenderCount] = useForceUpdate();
+    const startInstantLayoutTransition = useInstantLayoutTransition();
+    const unlockOnFrameRef = useRef();
+    useEffect(() => {
+        /**
+         * Unblock after two animation frames, otherwise this will unblock too soon.
+         */
+        frame.postRender(() => frame.postRender(() => {
+            /**
+             * If the callback has been called again after the effect
+             * triggered this 2 frame delay, don't unblock animations. This
+             * prevents the previous effect from unblocking the current
+             * instant transition too soon. This becomes more likely when
+             * used in conjunction with React.startTransition().
+             */
+            if (forcedRenderCount !== unlockOnFrameRef.current)
+                return;
+            instantAnimationState.current = false;
+        }));
+    }, [forcedRenderCount]);
+    return (callback) => {
+        startInstantLayoutTransition(() => {
+            instantAnimationState.current = true;
+            forceUpdate();
+            callback();
+            unlockOnFrameRef.current = forcedRenderCount + 1;
+        });
+    };
+}
+function disableInstantTransitions() {
+    instantAnimationState.current = false;
+}
+
+export { disableInstantTransitions, useInstantTransition };

package/dist/es/framer-motion/dist/es/utils/use-is-mounted.mjs

@@ -0,0 +1,15 @@
+import { useRef } from 'react';
+import { useIsomorphicLayoutEffect } from './use-isomorphic-effect.mjs';
+
+function useIsMounted() {
+    const isMounted = useRef(false);
+    useIsomorphicLayoutEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    return isMounted;
+}
+
+export { useIsMounted };

package/dist/es/framer-motion/dist/es/utils/use-isomorphic-effect.mjs

@@ -0,0 +1,6 @@
+import { useLayoutEffect, useEffect } from 'react';
+import { isBrowser } from './is-browser.mjs';
+
+const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
+
+export { useIsomorphicLayoutEffect };

package/dist/es/framer-motion/dist/es/utils/use-motion-value-event.mjs

@@ -0,0 +1,13 @@
+import { useInsertionEffect } from 'react';
+
+function useMotionValueEvent(value, event, callback) {
+    /**
+     * useInsertionEffect will create subscriptions before any other
+     * effects will run. Effects run upwards through the tree so it
+     * can be that binding a useLayoutEffect higher up the tree can
+     * miss changes from lower down the tree.
+     */
+    useInsertionEffect(() => value.on(event, callback), [value, event, callback]);
+}
+
+export { useMotionValueEvent };

package/dist/es/framer-motion/dist/es/utils/use-unmount-effect.mjs

@@ -0,0 +1,7 @@
+import { useEffect } from 'react';
+
+function useUnmountEffect(callback) {
+    return useEffect(() => () => callback(), []);
+}
+
+export { useUnmountEffect };

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

@@ -0,0 +1,11 @@
+/*
+  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/framer-motion/dist/es/utils/warn-once.mjs

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

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

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