motion 11.11.12 → 11.11.14

package/dist/es/framer-motion/dist/es/gestures/drag/use-drag-controls.mjs

@@ -0,0 +1,88 @@
+import { useConstant } from '../../utils/use-constant.mjs';
+
+/**
+ * Can manually trigger a drag gesture on one or more `drag`-enabled `motion` components.
+ *
+ * ```jsx
+ * const dragControls = useDragControls()
+ *
+ * function startDrag(event) {
+ *   dragControls.start(event, { snapToCursor: true })
+ * }
+ *
+ * return (
+ *   <>
+ *     <div onPointerDown={startDrag} />
+ *     <motion.div drag="x" dragControls={dragControls} />
+ *   </>
+ * )
+ * ```
+ *
+ * @public
+ */
+class DragControls {
+    constructor() {
+        this.componentControls = new Set();
+    }
+    /**
+     * Subscribe a component's internal `VisualElementDragControls` to the user-facing API.
+     *
+     * @internal
+     */
+    subscribe(controls) {
+        this.componentControls.add(controls);
+        return () => this.componentControls.delete(controls);
+    }
+    /**
+     * Start a drag gesture on every `motion` component that has this set of drag controls
+     * passed into it via the `dragControls` prop.
+     *
+     * ```jsx
+     * dragControls.start(e, {
+     *   snapToCursor: true
+     * })
+     * ```
+     *
+     * @param event - PointerEvent
+     * @param options - Options
+     *
+     * @public
+     */
+    start(event, options) {
+        this.componentControls.forEach((controls) => {
+            controls.start(event.nativeEvent || event, options);
+        });
+    }
+}
+const createDragControls = () => new DragControls();
+/**
+ * Usually, dragging is initiated by pressing down on a `motion` component with a `drag` prop
+ * and moving it. For some use-cases, for instance clicking at an arbitrary point on a video scrubber, we
+ * might want to initiate that dragging from a different component than the draggable one.
+ *
+ * By creating a `dragControls` using the `useDragControls` hook, we can pass this into
+ * the draggable component's `dragControls` prop. It exposes a `start` method
+ * that can start dragging from pointer events on other components.
+ *
+ * ```jsx
+ * const dragControls = useDragControls()
+ *
+ * function startDrag(event) {
+ *   dragControls.start(event, { snapToCursor: true })
+ * }
+ *
+ * return (
+ *   <>
+ *     <div onPointerDown={startDrag} />
+ *     <motion.div drag="x" dragControls={dragControls} />
+ *   </>
+ * )
+ * ```
+ *
+ * @public
+ */
+function useDragControls() {
+    return useConstant(createDragControls);
+}
+
+export { DragControls, useDragControls };

package/dist/es/framer-motion/dist/es/motion/utils/is-motion-component.mjs

@@ -0,0 +1,12 @@
+import { motionComponentSymbol } from './symbol.mjs';
+
+/**
+ * Checks if a component is a `motion` component.
+ */
+function isMotionComponent(component) {
+    return (component !== null &&
+        typeof component === "object" &&
+        motionComponentSymbol in component);
+}
+
+export { isMotionComponent };

package/dist/es/framer-motion/dist/es/motion/utils/unwrap-motion-component.mjs

@@ -0,0 +1,17 @@
+import { isMotionComponent } from './is-motion-component.mjs';
+import { motionComponentSymbol } from './symbol.mjs';
+
+/**
+ * Unwraps a `motion` component and returns either a string for `motion.div` or
+ * the React component for `motion(Component)`.
+ *
+ * If the component is not a `motion` component it returns undefined.
+ */
+function unwrapMotionComponent(component) {
+    if (isMotionComponent(component)) {
+        return component[motionComponentSymbol];
+    }
+    return undefined;
+}
+
+export { unwrapMotionComponent };

package/dist/es/framer-motion/dist/es/projection/node/group.mjs

@@ -0,0 +1,24 @@
+const notify = (node) => !node.isLayoutDirty && node.willUpdate(false);
+function nodeGroup() {
+    const nodes = new Set();
+    const subscriptions = new WeakMap();
+    const dirtyAll = () => nodes.forEach(notify);
+    return {
+        add: (node) => {
+            nodes.add(node);
+            subscriptions.set(node, node.addEventListener("willUpdate", dirtyAll));
+        },
+        remove: (node) => {
+            nodes.delete(node);
+            const unsubscribe = subscriptions.get(node);
+            if (unsubscribe) {
+                unsubscribe();
+                subscriptions.delete(node);
+            }
+            dirtyAll();
+        },
+        dirty: dirtyAll,
+    };
+}
+
+export { nodeGroup };

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

@@ -0,0 +1,14 @@
+import { rootProjectionNode } from './node/HTMLProjectionNode.mjs';
+
+function useInstantLayoutTransition() {
+    return startTransition;
+}
+function startTransition(callback) {
+    if (!rootProjectionNode.current)
+        return;
+    rootProjectionNode.current.isUpdating = false;
+    rootProjectionNode.current.blockUpdate();
+    callback && callback();
+}
+
+export { useInstantLayoutTransition };

package/dist/es/framer-motion/dist/es/projection/use-reset-projection.mjs

@@ -0,0 +1,14 @@
+import { useCallback } from 'react';
+import { rootProjectionNode } from './node/HTMLProjectionNode.mjs';
+
+function useResetProjection() {
+    const reset = useCallback(() => {
+        const root = rootProjectionNode.current;
+        if (!root)
+            return;
+        root.resetTree();
+    }, []);
+    return reset;
+}
+
+export { useResetProjection };

package/dist/es/framer-motion/dist/es/render/components/create-proxy.mjs

@@ -0,0 +1,38 @@
+import { warnOnce } from '../../utils/warn-once.mjs';
+
+function createDOMMotionComponentProxy(componentFactory) {
+    if (typeof Proxy === "undefined") {
+        return componentFactory;
+    }
+    /**
+     * A cache of generated `motion` components, e.g `motion.div`, `motion.input` etc.
+     * Rather than generating them anew every render.
+     */
+    const componentCache = new Map();
+    const deprecatedFactoryFunction = (...args) => {
+        if (process.env.NODE_ENV !== "production") {
+            warnOnce(false, "motion() is deprecated. Use motion.create() instead.");
+        }
+        return componentFactory(...args);
+    };
+    return new Proxy(deprecatedFactoryFunction, {
+        /**
+         * Called when `motion` is referenced with a prop: `motion.div`, `motion.input` etc.
+         * The prop name is passed through as `key` and we can use that to generate a `motion`
+         * DOM component with that name.
+         */
+        get: (_target, key) => {
+            if (key === "create")
+                return componentFactory;
+            /**
+             * If this element doesn't exist in the component cache, create it and cache.
+             */
+            if (!componentCache.has(key)) {
+                componentCache.set(key, componentFactory(key));
+            }
+            return componentCache.get(key);
+        },
+    });
+}
+
+export { createDOMMotionComponentProxy };

package/dist/es/framer-motion/dist/es/render/components/m/proxy.mjs

@@ -0,0 +1,6 @@
+import { createDOMMotionComponentProxy } from '../create-proxy.mjs';
+import { createMinimalMotionComponent } from './create.mjs';
+
+const m = /*@__PURE__*/ createDOMMotionComponentProxy(createMinimalMotionComponent);
+
+export { m };

package/dist/es/framer-motion/dist/es/render/components/motion/proxy.mjs

@@ -0,0 +1,6 @@
+import { createDOMMotionComponentProxy } from '../create-proxy.mjs';
+import { createMotionComponent } from './create.mjs';
+
+const motion = /*@__PURE__*/ createDOMMotionComponentProxy(createMotionComponent);
+
+export { motion };

package/dist/es/framer-motion/dist/es/render/dom/features-animation.mjs

@@ -0,0 +1,14 @@
+import { animations } from '../../motion/features/animations.mjs';
+import { gestureAnimations } from '../../motion/features/gestures.mjs';
+import { createDomVisualElement } from './create-visual-element.mjs';
+
+/**
+ * @public
+ */
+const domAnimation = {
+    renderer: createDomVisualElement,
+    ...animations,
+    ...gestureAnimations,
+};
+
+export { domAnimation };

package/dist/es/framer-motion/dist/es/render/dom/features-max.mjs

@@ -0,0 +1,14 @@
+import { drag } from '../../motion/features/drag.mjs';
+import { layout } from '../../motion/features/layout.mjs';
+import { domAnimation } from './features-animation.mjs';
+
+/**
+ * @public
+ */
+const domMax = {
+    ...domAnimation,
+    ...drag,
+    ...layout,
+};
+
+export { domMax };

package/dist/es/framer-motion/dist/es/render/dom/features-min.mjs

@@ -0,0 +1,12 @@
+import { animations } from '../../motion/features/animations.mjs';
+import { createDomVisualElement } from './create-visual-element.mjs';
+
+/**
+ * @public
+ */
+const domMin = {
+    renderer: createDomVisualElement,
+    ...animations,
+};
+
+export { domMin };

package/dist/es/framer-motion/dist/es/render/utils/motion-values.mjs

@@ -17,7 +17,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.11.12", `Attempting to mix Motion versions ${nextValue.version} with 11.11.12 may not work as expected.`);
+                warnOnce(nextValue.version === "11.11.13", `Attempting to mix Motion versions ${nextValue.version} with 11.11.13 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

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

@@ -7,5 +7,15 @@ function removeItem(arr, 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, removeItem };
+export { addUniqueItem, moveItem, removeItem };

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

@@ -0,0 +1,19 @@
+import { useContext } from 'react';
+import { MotionConfigContext } from '../../context/MotionConfigContext.mjs';
+import { useReducedMotion } from './use-reduced-motion.mjs';
+
+function useReducedMotionConfig() {
+    const reducedMotionPreference = useReducedMotion();
+    const { reducedMotion } = useContext(MotionConfigContext);
+    if (reducedMotion === "never") {
+        return false;
+    }
+    else if (reducedMotion === "always") {
+        return true;
+    }
+    else {
+        return reducedMotionPreference;
+    }
+}
+
+export { useReducedMotionConfig };

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/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-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-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/value/index.mjs

@@ -12,6 +12,9 @@ const MAX_VELOCITY_DELTA = 30;
 const isFloat = (value) => {
     return !isNaN(parseFloat(value));
 };
+const collectMotionValues = {
+    current: undefined,
+};
 /**
  * `MotionValue` is used to track the state and velocity of motion values.
  *
@@ -31,7 +34,7 @@ class MotionValue {
          * 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.12";
+        this.version = "11.11.13";
         /**
          * 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
@@ -210,6 +213,9 @@ class MotionValue {
      * @public
      */
     get() {
+        if (collectMotionValues.current) {
+            collectMotionValues.current.push(this);
+        }
         return this.current;
     }
     /**
@@ -310,4 +316,4 @@ function motionValue(init, options) {
     return new MotionValue(init, options);
 }
 
-export { MotionValue, motionValue };
+export { MotionValue, collectMotionValues, motionValue };

package/dist/es/framer-motion/dist/es/value/scroll/use-element-scroll.mjs

@@ -0,0 +1,14 @@
+import { warnOnce } from '../../utils/warn-once.mjs';
+import { useScroll } from '../use-scroll.mjs';
+
+/**
+ * @deprecated useElementScroll is deprecated. Convert to useScroll({ container: ref })
+ */
+function useElementScroll(ref) {
+    if (process.env.NODE_ENV === "development") {
+        warnOnce(false, "useElementScroll is deprecated. Convert to useScroll({ container: ref }).");
+    }
+    return useScroll({ container: ref });
+}
+
+export { useElementScroll };

package/dist/es/framer-motion/dist/es/value/scroll/use-viewport-scroll.mjs

@@ -0,0 +1,14 @@
+import { warnOnce } from '../../utils/warn-once.mjs';
+import { useScroll } from '../use-scroll.mjs';
+
+/**
+ * @deprecated useViewportScroll is deprecated. Convert to useScroll()
+ */
+function useViewportScroll() {
+    if (process.env.NODE_ENV !== "production") {
+        warnOnce(false, "useViewportScroll is deprecated. Convert to useScroll().");
+    }
+    return useScroll();
+}
+
+export { useViewportScroll };

package/dist/es/framer-motion/dist/es/value/types/color/rgba.mjs

@@ -1,5 +1,5 @@
 import { clamp } from '../../../utils/clamp.mjs';
-import { number, alpha } from '../numbers/index.mjs';
+import { alpha, number } from '../numbers/index.mjs';
 import { sanitize } from '../utils/sanitize.mjs';
 import { isColorString, splitColor } from './utils.mjs';