motion 10.18.0 → 11.11.13

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

@@ -0,0 +1,51 @@
+import { noop } from '../utils/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/framer-motion/dist/es/easing/ease.mjs

@@ -0,0 +1,7 @@
+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/framer-motion/dist/es/easing/modifiers/mirror.mjs

@@ -0,0 +1,5 @@
+// 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/framer-motion/dist/es/easing/modifiers/reverse.mjs

@@ -0,0 +1,5 @@
+// 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/framer-motion/dist/es/easing/steps.mjs

@@ -0,0 +1,15 @@
+import { clamp } from '../utils/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/framer-motion/dist/es/easing/utils/create-generator-easing.mjs

@@ -0,0 +1,17 @@
+import { calcGeneratorDuration, maxGeneratorDuration } from '../../animation/generators/utils/calc-duration.mjs';
+import { millisecondsToSeconds } from '../../utils/time-conversion.mjs';
+
+/**
+ * Create a progress => progress easing function from a generator.
+ */
+function createGeneratorEasing(options, scale = 100, createGenerator) {
+    const generator = createGenerator({ ...options, keyframes: [0, scale] });
+    const duration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
+    return {
+        type: "keyframes",
+        ease: (progress) => generator.next(duration * progress).value / scale,
+        duration: millisecondsToSeconds(duration),
+    };
+}
+
+export { createGeneratorEasing };

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

@@ -0,0 +1,8 @@
+import { wrap } from '../../utils/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/framer-motion/dist/es/easing/utils/is-bezier-definition.mjs

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

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

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

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

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

package/dist/es/framer-motion/dist/es/events/add-dom-event.mjs

@@ -0,0 +1,6 @@
+function addDomEvent(target, eventName, handler, options = { passive: true }) {
+    target.addEventListener(eventName, handler, options);
+    return () => target.removeEventListener(eventName, handler);
+}
+
+export { addDomEvent };

package/dist/es/framer-motion/dist/es/events/add-pointer-event.mjs

@@ -0,0 +1,8 @@
+import { addDomEvent } from './add-dom-event.mjs';
+import { addPointerInfo } from './event-info.mjs';
+
+function addPointerEvent(target, eventName, handler, options) {
+    return addDomEvent(target, eventName, addPointerInfo(handler), options);
+}
+
+export { addPointerEvent };

package/dist/es/framer-motion/dist/es/events/event-info.mjs

@@ -0,0 +1,15 @@
+import { isPrimaryPointer } from './utils/is-primary-pointer.mjs';
+
+function extractEventInfo(event, pointType = "page") {
+    return {
+        point: {
+            x: event[`${pointType}X`],
+            y: event[`${pointType}Y`],
+        },
+    };
+}
+const addPointerInfo = (handler) => {
+    return (event) => isPrimaryPointer(event) && handler(event, extractEventInfo(event));
+};
+
+export { addPointerInfo, extractEventInfo };

package/dist/es/framer-motion/dist/es/events/use-dom-event.mjs

@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+import { addDomEvent } from './add-dom-event.mjs';
+
+/**
+ * Attaches an event listener directly to the provided DOM element.
+ *
+ * Bypassing React's event system can be desirable, for instance when attaching non-passive
+ * event handlers.
+ *
+ * ```jsx
+ * const ref = useRef(null)
+ *
+ * useDomEvent(ref, 'wheel', onWheel, { passive: false })
+ *
+ * return <div ref={ref} />
+ * ```
+ *
+ * @param ref - React.RefObject that's been provided to the element you want to bind the listener to.
+ * @param eventName - Name of the event you want listen for.
+ * @param handler - Function to fire when receiving the event.
+ * @param options - Options to pass to `Event.addEventListener`.
+ *
+ * @public
+ */
+function useDomEvent(ref, eventName, handler, options) {
+    useEffect(() => {
+        const element = ref.current;
+        if (handler && element) {
+            return addDomEvent(element, eventName, handler, options);
+        }
+    }, [ref, eventName, handler, options]);
+}
+
+export { useDomEvent };

package/dist/es/framer-motion/dist/es/events/utils/is-primary-pointer.mjs

@@ -0,0 +1,18 @@
+const isPrimaryPointer = (event) => {
+    if (event.pointerType === "mouse") {
+        return typeof event.button !== "number" || event.button <= 0;
+    }
+    else {
+        /**
+         * isPrimary is true for all mice buttons, whereas every touch point
+         * is regarded as its own input. So subsequent concurrent touch points
+         * will be false.
+         *
+         * Specifically match against false here as incomplete versions of
+         * PointerEvents in very old browser might have it set as undefined.
+         */
+        return event.isPrimary !== false;
+    }
+};
+
+export { isPrimaryPointer };

package/dist/es/framer-motion/dist/es/frameloop/batcher.mjs

@@ -0,0 +1,74 @@
+import { MotionGlobalConfig } from '../utils/GlobalConfig.mjs';
+import { createRenderStep } from './render-step.mjs';
+
+const stepsOrder = [
+    "read", // Read
+    "resolveKeyframes", // Write/Read/Write/Read
+    "update", // Compute
+    "preRender", // Compute
+    "render", // Write
+    "postRender", // Compute
+];
+const maxElapsed = 40;
+function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
+    let runNextFrame = false;
+    let useDefaultElapsed = true;
+    const state = {
+        delta: 0.0,
+        timestamp: 0.0,
+        isProcessing: false,
+    };
+    const flagRunNextFrame = () => (runNextFrame = true);
+    const steps = stepsOrder.reduce((acc, key) => {
+        acc[key] = createRenderStep(flagRunNextFrame);
+        return acc;
+    }, {});
+    const { read, resolveKeyframes, update, preRender, render, postRender } = steps;
+    const processBatch = () => {
+        const timestamp = MotionGlobalConfig.useManualTiming
+            ? state.timestamp
+            : performance.now();
+        runNextFrame = false;
+        state.delta = useDefaultElapsed
+            ? 1000 / 60
+            : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);
+        state.timestamp = timestamp;
+        state.isProcessing = true;
+        // Unrolled render loop for better per-frame performance
+        read.process(state);
+        resolveKeyframes.process(state);
+        update.process(state);
+        preRender.process(state);
+        render.process(state);
+        postRender.process(state);
+        state.isProcessing = false;
+        if (runNextFrame && allowKeepAlive) {
+            useDefaultElapsed = false;
+            scheduleNextBatch(processBatch);
+        }
+    };
+    const wake = () => {
+        runNextFrame = true;
+        useDefaultElapsed = true;
+        if (!state.isProcessing) {
+            scheduleNextBatch(processBatch);
+        }
+    };
+    const schedule = stepsOrder.reduce((acc, key) => {
+        const step = steps[key];
+        acc[key] = (process, keepAlive = false, immediate = false) => {
+            if (!runNextFrame)
+                wake();
+            return step.schedule(process, keepAlive, immediate);
+        };
+        return acc;
+    }, {});
+    const cancel = (process) => {
+        for (let i = 0; i < stepsOrder.length; i++) {
+            steps[stepsOrder[i]].cancel(process);
+        }
+    };
+    return { schedule, cancel, state, steps };
+}
+
+export { createRenderBatcher, stepsOrder };

package/dist/es/framer-motion/dist/es/frameloop/frame.mjs

@@ -0,0 +1,6 @@
+import { noop } from '../utils/noop.mjs';
+import { createRenderBatcher } from './batcher.mjs';
+
+const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
+
+export { cancelFrame, frame, frameData, frameSteps };

package/dist/es/framer-motion/dist/es/frameloop/index-legacy.mjs

@@ -0,0 +1,20 @@
+import { stepsOrder } from './batcher.mjs';
+import { frame, cancelFrame } from './frame.mjs';
+
+/**
+ * @deprecated
+ *
+ * Import as `frame` instead.
+ */
+const sync = frame;
+/**
+ * @deprecated
+ *
+ * Use cancelFrame(callback) instead.
+ */
+const cancelSync = stepsOrder.reduce((acc, key) => {
+    acc[key] = (process) => cancelFrame(process);
+    return acc;
+}, {});
+
+export { cancelSync, sync };

package/dist/es/framer-motion/dist/es/frameloop/microtask.mjs

@@ -0,0 +1,5 @@
+import { createRenderBatcher } from './batcher.mjs';
+
+const { schedule: microtask, cancel: cancelMicrotask } = createRenderBatcher(queueMicrotask, false);
+
+export { cancelMicrotask, microtask };

package/dist/es/framer-motion/dist/es/frameloop/render-step.mjs

@@ -0,0 +1,80 @@
+function createRenderStep(runNextFrame) {
+    /**
+     * We create and reuse two queues, one to queue jobs for the current frame
+     * and one for the next. We reuse to avoid triggering GC after x frames.
+     */
+    let thisFrame = new Set();
+    let nextFrame = new Set();
+    /**
+     * Track whether we're currently processing jobs in this step. This way
+     * we can decide whether to schedule new jobs for this frame or next.
+     */
+    let isProcessing = false;
+    let flushNextFrame = false;
+    /**
+     * A set of processes which were marked keepAlive when scheduled.
+     */
+    const toKeepAlive = new WeakSet();
+    let latestFrameData = {
+        delta: 0.0,
+        timestamp: 0.0,
+        isProcessing: false,
+    };
+    function triggerCallback(callback) {
+        if (toKeepAlive.has(callback)) {
+            step.schedule(callback);
+            runNextFrame();
+        }
+        callback(latestFrameData);
+    }
+    const step = {
+        /**
+         * Schedule a process to run on the next frame.
+         */
+        schedule: (callback, keepAlive = false, immediate = false) => {
+            const addToCurrentFrame = immediate && isProcessing;
+            const queue = addToCurrentFrame ? thisFrame : nextFrame;
+            if (keepAlive)
+                toKeepAlive.add(callback);
+            if (!queue.has(callback))
+                queue.add(callback);
+            return callback;
+        },
+        /**
+         * Cancel the provided callback from running on the next frame.
+         */
+        cancel: (callback) => {
+            nextFrame.delete(callback);
+            toKeepAlive.delete(callback);
+        },
+        /**
+         * Execute all schedule callbacks.
+         */
+        process: (frameData) => {
+            latestFrameData = frameData;
+            /**
+             * If we're already processing we've probably been triggered by a flushSync
+             * inside an existing process. Instead of executing, mark flushNextFrame
+             * as true and ensure we flush the following frame at the end of this one.
+             */
+            if (isProcessing) {
+                flushNextFrame = true;
+                return;
+            }
+            isProcessing = true;
+            [thisFrame, nextFrame] = [nextFrame, thisFrame];
+            // Clear the next frame queue
+            nextFrame.clear();
+            // Execute this frame
+            thisFrame.forEach(triggerCallback);
+            isProcessing = false;
+            if (flushNextFrame) {
+                flushNextFrame = false;
+                step.process(frameData);
+            }
+        },
+    };
+    return step;
+}
+
+export { createRenderStep };

package/dist/es/framer-motion/dist/es/frameloop/sync-time.mjs

@@ -0,0 +1,31 @@
+import { MotionGlobalConfig } from '../utils/GlobalConfig.mjs';
+import { frameData } from './frame.mjs';
+
+let now;
+function clearTime() {
+    now = undefined;
+}
+/**
+ * An eventloop-synchronous alternative to performance.now().
+ *
+ * Ensures that time measurements remain consistent within a synchronous context.
+ * Usually calling performance.now() twice within the same synchronous context
+ * will return different values which isn't useful for animations when we're usually
+ * trying to sync animations to the same frame.
+ */
+const time = {
+    now: () => {
+        if (now === undefined) {
+            time.set(frameData.isProcessing || MotionGlobalConfig.useManualTiming
+                ? frameData.timestamp
+                : performance.now());
+        }
+        return now;
+    },
+    set: (newTime) => {
+        now = newTime;
+        queueMicrotask(clearTime);
+    },
+};
+
+export { time };