motion 10.17.1 → 11.11.12

package/dist/es/framer-motion/dist/es/gestures/drag/utils/lock.mjs

@@ -0,0 +1,53 @@
+function createLock(name) {
+    let lock = null;
+    return () => {
+        const openLock = () => {
+            lock = null;
+        };
+        if (lock === null) {
+            lock = name;
+            return openLock;
+        }
+        return false;
+    };
+}
+const globalHorizontalLock = createLock("dragHorizontal");
+const globalVerticalLock = createLock("dragVertical");
+function getGlobalLock(drag) {
+    let lock = false;
+    if (drag === "y") {
+        lock = globalVerticalLock();
+    }
+    else if (drag === "x") {
+        lock = globalHorizontalLock();
+    }
+    else {
+        const openHorizontal = globalHorizontalLock();
+        const openVertical = globalVerticalLock();
+        if (openHorizontal && openVertical) {
+            lock = () => {
+                openHorizontal();
+                openVertical();
+            };
+        }
+        else {
+            // Release the locks because we don't use them
+            if (openHorizontal)
+                openHorizontal();
+            if (openVertical)
+                openVertical();
+        }
+    }
+    return lock;
+}
+function isDragActive() {
+    // Check the gesture lock - if we get it, it means no drag gesture is active
+    // and we can safely fire the tap gesture.
+    const openGestureLock = getGlobalLock(true);
+    if (!openGestureLock)
+        return true;
+    openGestureLock();
+    return false;
+}
+
+export { createLock, getGlobalLock, isDragActive };

package/dist/es/framer-motion/dist/es/gestures/focus.mjs

@@ -0,0 +1,41 @@
+import { addDomEvent } from '../events/add-dom-event.mjs';
+import { Feature } from '../motion/features/Feature.mjs';
+import { pipe } from '../utils/pipe.mjs';
+
+class FocusGesture extends Feature {
+    constructor() {
+        super(...arguments);
+        this.isActive = false;
+    }
+    onFocus() {
+        let isFocusVisible = false;
+        /**
+         * If this element doesn't match focus-visible then don't
+         * apply whileHover. But, if matches throws that focus-visible
+         * is not a valid selector then in that browser outline styles will be applied
+         * to the element by default and we want to match that behaviour with whileFocus.
+         */
+        try {
+            isFocusVisible = this.node.current.matches(":focus-visible");
+        }
+        catch (e) {
+            isFocusVisible = true;
+        }
+        if (!isFocusVisible || !this.node.animationState)
+            return;
+        this.node.animationState.setActive("whileFocus", true);
+        this.isActive = true;
+    }
+    onBlur() {
+        if (!this.isActive || !this.node.animationState)
+            return;
+        this.node.animationState.setActive("whileFocus", false);
+        this.isActive = false;
+    }
+    mount() {
+        this.unmount = pipe(addDomEvent(this.node.current, "focus", () => this.onFocus()), addDomEvent(this.node.current, "blur", () => this.onBlur()));
+    }
+    unmount() { }
+}
+
+export { FocusGesture };

package/dist/es/framer-motion/dist/es/gestures/hover.mjs

@@ -0,0 +1,33 @@
+import { addPointerEvent } from '../events/add-pointer-event.mjs';
+import { pipe } from '../utils/pipe.mjs';
+import { isDragActive } from './drag/utils/lock.mjs';
+import { Feature } from '../motion/features/Feature.mjs';
+import { frame } from '../frameloop/frame.mjs';
+
+function addHoverEvent(node, isActive) {
+    const eventName = isActive ? "pointerenter" : "pointerleave";
+    const callbackName = isActive ? "onHoverStart" : "onHoverEnd";
+    const handleEvent = (event, info) => {
+        if (event.pointerType === "touch" || isDragActive())
+            return;
+        const props = node.getProps();
+        if (node.animationState && props.whileHover) {
+            node.animationState.setActive("whileHover", isActive);
+        }
+        const callback = props[callbackName];
+        if (callback) {
+            frame.postRender(() => callback(event, info));
+        }
+    };
+    return addPointerEvent(node.current, eventName, handleEvent, {
+        passive: !node.getProps()[callbackName],
+    });
+}
+class HoverGesture extends Feature {
+    mount() {
+        this.unmount = pipe(addHoverEvent(this.node, true), addHoverEvent(this.node, false));
+    }
+    unmount() { }
+}
+
+export { HoverGesture };

package/dist/es/framer-motion/dist/es/gestures/pan/PanSession.mjs

@@ -0,0 +1,156 @@
+import { extractEventInfo } from '../../events/event-info.mjs';
+import { secondsToMilliseconds, millisecondsToSeconds } from '../../utils/time-conversion.mjs';
+import { addPointerEvent } from '../../events/add-pointer-event.mjs';
+import { pipe } from '../../utils/pipe.mjs';
+import { distance2D } from '../../utils/distance.mjs';
+import { isPrimaryPointer } from '../../events/utils/is-primary-pointer.mjs';
+import { frame, cancelFrame, frameData } from '../../frameloop/frame.mjs';
+
+/**
+ * @internal
+ */
+class PanSession {
+    constructor(event, handlers, { transformPagePoint, contextWindow, dragSnapToOrigin = false } = {}) {
+        /**
+         * @internal
+         */
+        this.startEvent = null;
+        /**
+         * @internal
+         */
+        this.lastMoveEvent = null;
+        /**
+         * @internal
+         */
+        this.lastMoveEventInfo = null;
+        /**
+         * @internal
+         */
+        this.handlers = {};
+        /**
+         * @internal
+         */
+        this.contextWindow = window;
+        this.updatePoint = () => {
+            if (!(this.lastMoveEvent && this.lastMoveEventInfo))
+                return;
+            const info = getPanInfo(this.lastMoveEventInfo, this.history);
+            const isPanStarted = this.startEvent !== null;
+            // Only start panning if the offset is larger than 3 pixels. If we make it
+            // any larger than this we'll want to reset the pointer history
+            // on the first update to avoid visual snapping to the cursoe.
+            const isDistancePastThreshold = distance2D(info.offset, { x: 0, y: 0 }) >= 3;
+            if (!isPanStarted && !isDistancePastThreshold)
+                return;
+            const { point } = info;
+            const { timestamp } = frameData;
+            this.history.push({ ...point, timestamp });
+            const { onStart, onMove } = this.handlers;
+            if (!isPanStarted) {
+                onStart && onStart(this.lastMoveEvent, info);
+                this.startEvent = this.lastMoveEvent;
+            }
+            onMove && onMove(this.lastMoveEvent, info);
+        };
+        this.handlePointerMove = (event, info) => {
+            this.lastMoveEvent = event;
+            this.lastMoveEventInfo = transformPoint(info, this.transformPagePoint);
+            // Throttle mouse move event to once per frame
+            frame.update(this.updatePoint, true);
+        };
+        this.handlePointerUp = (event, info) => {
+            this.end();
+            const { onEnd, onSessionEnd, resumeAnimation } = this.handlers;
+            if (this.dragSnapToOrigin)
+                resumeAnimation && resumeAnimation();
+            if (!(this.lastMoveEvent && this.lastMoveEventInfo))
+                return;
+            const panInfo = getPanInfo(event.type === "pointercancel"
+                ? this.lastMoveEventInfo
+                : transformPoint(info, this.transformPagePoint), this.history);
+            if (this.startEvent && onEnd) {
+                onEnd(event, panInfo);
+            }
+            onSessionEnd && onSessionEnd(event, panInfo);
+        };
+        // If we have more than one touch, don't start detecting this gesture
+        if (!isPrimaryPointer(event))
+            return;
+        this.dragSnapToOrigin = dragSnapToOrigin;
+        this.handlers = handlers;
+        this.transformPagePoint = transformPagePoint;
+        this.contextWindow = contextWindow || window;
+        const info = extractEventInfo(event);
+        const initialInfo = transformPoint(info, this.transformPagePoint);
+        const { point } = initialInfo;
+        const { timestamp } = frameData;
+        this.history = [{ ...point, timestamp }];
+        const { onSessionStart } = handlers;
+        onSessionStart &&
+            onSessionStart(event, getPanInfo(initialInfo, this.history));
+        this.removeListeners = pipe(addPointerEvent(this.contextWindow, "pointermove", this.handlePointerMove), addPointerEvent(this.contextWindow, "pointerup", this.handlePointerUp), addPointerEvent(this.contextWindow, "pointercancel", this.handlePointerUp));
+    }
+    updateHandlers(handlers) {
+        this.handlers = handlers;
+    }
+    end() {
+        this.removeListeners && this.removeListeners();
+        cancelFrame(this.updatePoint);
+    }
+}
+function transformPoint(info, transformPagePoint) {
+    return transformPagePoint ? { point: transformPagePoint(info.point) } : info;
+}
+function subtractPoint(a, b) {
+    return { x: a.x - b.x, y: a.y - b.y };
+}
+function getPanInfo({ point }, history) {
+    return {
+        point,
+        delta: subtractPoint(point, lastDevicePoint(history)),
+        offset: subtractPoint(point, startDevicePoint(history)),
+        velocity: getVelocity(history, 0.1),
+    };
+}
+function startDevicePoint(history) {
+    return history[0];
+}
+function lastDevicePoint(history) {
+    return history[history.length - 1];
+}
+function getVelocity(history, timeDelta) {
+    if (history.length < 2) {
+        return { x: 0, y: 0 };
+    }
+    let i = history.length - 1;
+    let timestampedPoint = null;
+    const lastPoint = lastDevicePoint(history);
+    while (i >= 0) {
+        timestampedPoint = history[i];
+        if (lastPoint.timestamp - timestampedPoint.timestamp >
+            secondsToMilliseconds(timeDelta)) {
+            break;
+        }
+        i--;
+    }
+    if (!timestampedPoint) {
+        return { x: 0, y: 0 };
+    }
+    const time = millisecondsToSeconds(lastPoint.timestamp - timestampedPoint.timestamp);
+    if (time === 0) {
+        return { x: 0, y: 0 };
+    }
+    const currentVelocity = {
+        x: (lastPoint.x - timestampedPoint.x) / time,
+        y: (lastPoint.y - timestampedPoint.y) / time,
+    };
+    if (currentVelocity.x === Infinity) {
+        currentVelocity.x = 0;
+    }
+    if (currentVelocity.y === Infinity) {
+        currentVelocity.y = 0;
+    }
+    return currentVelocity;
+}
+
+export { PanSession };

package/dist/es/framer-motion/dist/es/gestures/pan/index.mjs

@@ -0,0 +1,50 @@
+import { PanSession } from './PanSession.mjs';
+import { addPointerEvent } from '../../events/add-pointer-event.mjs';
+import { Feature } from '../../motion/features/Feature.mjs';
+import { noop } from '../../utils/noop.mjs';
+import { getContextWindow } from '../../utils/get-context-window.mjs';
+import { frame } from '../../frameloop/frame.mjs';
+
+const asyncHandler = (handler) => (event, info) => {
+    if (handler) {
+        frame.postRender(() => handler(event, info));
+    }
+};
+class PanGesture extends Feature {
+    constructor() {
+        super(...arguments);
+        this.removePointerDownListener = noop;
+    }
+    onPointerDown(pointerDownEvent) {
+        this.session = new PanSession(pointerDownEvent, this.createPanHandlers(), {
+            transformPagePoint: this.node.getTransformPagePoint(),
+            contextWindow: getContextWindow(this.node),
+        });
+    }
+    createPanHandlers() {
+        const { onPanSessionStart, onPanStart, onPan, onPanEnd } = this.node.getProps();
+        return {
+            onSessionStart: asyncHandler(onPanSessionStart),
+            onStart: asyncHandler(onPanStart),
+            onMove: onPan,
+            onEnd: (event, info) => {
+                delete this.session;
+                if (onPanEnd) {
+                    frame.postRender(() => onPanEnd(event, info));
+                }
+            },
+        };
+    }
+    mount() {
+        this.removePointerDownListener = addPointerEvent(this.node.current, "pointerdown", (event) => this.onPointerDown(event));
+    }
+    update() {
+        this.session && this.session.updateHandlers(this.createPanHandlers());
+    }
+    unmount() {
+        this.removePointerDownListener();
+        this.session && this.session.end();
+    }
+}
+
+export { PanGesture };

package/dist/es/framer-motion/dist/es/gestures/press.mjs

@@ -0,0 +1,130 @@
+import { extractEventInfo } from '../events/event-info.mjs';
+import { addDomEvent } from '../events/add-dom-event.mjs';
+import { addPointerEvent } from '../events/add-pointer-event.mjs';
+import { Feature } from '../motion/features/Feature.mjs';
+import { pipe } from '../utils/pipe.mjs';
+import { isDragActive } from './drag/utils/lock.mjs';
+import { isNodeOrChild } from './utils/is-node-or-child.mjs';
+import { noop } from '../utils/noop.mjs';
+import { frame } from '../frameloop/frame.mjs';
+
+function fireSyntheticPointerEvent(name, handler) {
+    if (!handler)
+        return;
+    const syntheticPointerEvent = new PointerEvent("pointer" + name);
+    handler(syntheticPointerEvent, extractEventInfo(syntheticPointerEvent));
+}
+class PressGesture extends Feature {
+    constructor() {
+        super(...arguments);
+        this.removeStartListeners = noop;
+        this.removeEndListeners = noop;
+        this.removeAccessibleListeners = noop;
+        this.startPointerPress = (startEvent, startInfo) => {
+            if (this.isPressing)
+                return;
+            this.removeEndListeners();
+            const props = this.node.getProps();
+            const endPointerPress = (endEvent, endInfo) => {
+                if (!this.checkPressEnd())
+                    return;
+                const { onTap, onTapCancel, globalTapTarget } = this.node.getProps();
+                /**
+                 * We only count this as a tap gesture if the event.target is the same
+                 * as, or a child of, this component's element
+                 */
+                const handler = !globalTapTarget &&
+                    !isNodeOrChild(this.node.current, endEvent.target)
+                    ? onTapCancel
+                    : onTap;
+                if (handler) {
+                    frame.update(() => handler(endEvent, endInfo));
+                }
+            };
+            const removePointerUpListener = addPointerEvent(window, "pointerup", endPointerPress, {
+                passive: !(props.onTap || props["onPointerUp"]),
+            });
+            const removePointerCancelListener = addPointerEvent(window, "pointercancel", (cancelEvent, cancelInfo) => this.cancelPress(cancelEvent, cancelInfo), {
+                passive: !(props.onTapCancel ||
+                    props["onPointerCancel"]),
+            });
+            this.removeEndListeners = pipe(removePointerUpListener, removePointerCancelListener);
+            this.startPress(startEvent, startInfo);
+        };
+        this.startAccessiblePress = () => {
+            const handleKeydown = (keydownEvent) => {
+                if (keydownEvent.key !== "Enter" || this.isPressing)
+                    return;
+                const handleKeyup = (keyupEvent) => {
+                    if (keyupEvent.key !== "Enter" || !this.checkPressEnd())
+                        return;
+                    fireSyntheticPointerEvent("up", (event, info) => {
+                        const { onTap } = this.node.getProps();
+                        if (onTap) {
+                            frame.postRender(() => onTap(event, info));
+                        }
+                    });
+                };
+                this.removeEndListeners();
+                this.removeEndListeners = addDomEvent(this.node.current, "keyup", handleKeyup);
+                fireSyntheticPointerEvent("down", (event, info) => {
+                    this.startPress(event, info);
+                });
+            };
+            const removeKeydownListener = addDomEvent(this.node.current, "keydown", handleKeydown);
+            const handleBlur = () => {
+                if (!this.isPressing)
+                    return;
+                fireSyntheticPointerEvent("cancel", (cancelEvent, cancelInfo) => this.cancelPress(cancelEvent, cancelInfo));
+            };
+            const removeBlurListener = addDomEvent(this.node.current, "blur", handleBlur);
+            this.removeAccessibleListeners = pipe(removeKeydownListener, removeBlurListener);
+        };
+    }
+    startPress(event, info) {
+        this.isPressing = true;
+        const { onTapStart, whileTap } = this.node.getProps();
+        /**
+         * Ensure we trigger animations before firing event callback
+         */
+        if (whileTap && this.node.animationState) {
+            this.node.animationState.setActive("whileTap", true);
+        }
+        if (onTapStart) {
+            frame.postRender(() => onTapStart(event, info));
+        }
+    }
+    checkPressEnd() {
+        this.removeEndListeners();
+        this.isPressing = false;
+        const props = this.node.getProps();
+        if (props.whileTap && this.node.animationState) {
+            this.node.animationState.setActive("whileTap", false);
+        }
+        return !isDragActive();
+    }
+    cancelPress(event, info) {
+        if (!this.checkPressEnd())
+            return;
+        const { onTapCancel } = this.node.getProps();
+        if (onTapCancel) {
+            frame.postRender(() => onTapCancel(event, info));
+        }
+    }
+    mount() {
+        const props = this.node.getProps();
+        const removePointerListener = addPointerEvent(props.globalTapTarget ? window : this.node.current, "pointerdown", this.startPointerPress, {
+            passive: !(props.onTapStart ||
+                props["onPointerStart"]),
+        });
+        const removeFocusListener = addDomEvent(this.node.current, "focus", this.startAccessiblePress);
+        this.removeStartListeners = pipe(removePointerListener, removeFocusListener);
+    }
+    unmount() {
+        this.removeStartListeners();
+        this.removeEndListeners();
+        this.removeAccessibleListeners();
+    }
+}
+
+export { PressGesture };

package/dist/es/framer-motion/dist/es/gestures/utils/is-node-or-child.mjs

@@ -0,0 +1,20 @@
+/**
+ * Recursively traverse up the tree to check whether the provided child node
+ * is the parent or a descendant of it.
+ *
+ * @param parent - Element to find
+ * @param child - Element to test against parent
+ */
+const isNodeOrChild = (parent, child) => {
+    if (!child) {
+        return false;
+    }
+    else if (parent === child) {
+        return true;
+    }
+    else {
+        return isNodeOrChild(parent, child.parentElement);
+    }
+};
+
+export { isNodeOrChild };

package/dist/es/framer-motion/dist/es/motion/features/Feature.mjs

@@ -0,0 +1,9 @@
+class Feature {
+    constructor(node) {
+        this.isMounted = false;
+        this.node = node;
+    }
+    update() { }
+}
+
+export { Feature };

package/dist/es/framer-motion/dist/es/motion/features/animation/exit.mjs

@@ -0,0 +1,31 @@
+import { Feature } from '../Feature.mjs';
+
+let id = 0;
+class ExitAnimationFeature extends Feature {
+    constructor() {
+        super(...arguments);
+        this.id = id++;
+    }
+    update() {
+        if (!this.node.presenceContext)
+            return;
+        const { isPresent, onExitComplete } = this.node.presenceContext;
+        const { isPresent: prevIsPresent } = this.node.prevPresenceContext || {};
+        if (!this.node.animationState || isPresent === prevIsPresent) {
+            return;
+        }
+        const exitAnimation = this.node.animationState.setActive("exit", !isPresent);
+        if (onExitComplete && !isPresent) {
+            exitAnimation.then(() => onExitComplete(this.id));
+        }
+    }
+    mount() {
+        const { register } = this.node.presenceContext || {};
+        if (register) {
+            this.unmount = register(this.id);
+        }
+    }
+    unmount() { }
+}
+
+export { ExitAnimationFeature };

package/dist/es/framer-motion/dist/es/motion/features/animation/index.mjs

@@ -0,0 +1,41 @@
+import { isAnimationControls } from '../../../animation/utils/is-animation-controls.mjs';
+import { createAnimationState } from '../../../render/utils/animation-state.mjs';
+import { Feature } from '../Feature.mjs';
+
+class AnimationFeature extends Feature {
+    /**
+     * We dynamically generate the AnimationState manager as it contains a reference
+     * to the underlying animation library. We only want to load that if we load this,
+     * so people can optionally code split it out using the `m` component.
+     */
+    constructor(node) {
+        super(node);
+        node.animationState || (node.animationState = createAnimationState(node));
+    }
+    updateAnimationControlsSubscription() {
+        const { animate } = this.node.getProps();
+        if (isAnimationControls(animate)) {
+            this.unmountControls = animate.subscribe(this.node);
+        }
+    }
+    /**
+     * Subscribe any provided AnimationControls to the component's VisualElement
+     */
+    mount() {
+        this.updateAnimationControlsSubscription();
+    }
+    update() {
+        const { animate } = this.node.getProps();
+        const { animate: prevAnimate } = this.node.prevProps || {};
+        if (animate !== prevAnimate) {
+            this.updateAnimationControlsSubscription();
+        }
+    }
+    unmount() {
+        var _a;
+        this.node.animationState.reset();
+        (_a = this.unmountControls) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+}
+
+export { AnimationFeature };

package/dist/es/framer-motion/dist/es/motion/features/animations.mjs

@@ -0,0 +1,13 @@
+import { AnimationFeature } from './animation/index.mjs';
+import { ExitAnimationFeature } from './animation/exit.mjs';
+
+const animations = {
+    animation: {
+        Feature: AnimationFeature,
+    },
+    exit: {
+        Feature: ExitAnimationFeature,
+    },
+};
+
+export { animations };

package/dist/es/framer-motion/dist/es/motion/features/definitions.mjs

@@ -0,0 +1,28 @@
+const featureProps = {
+    animation: [
+        "animate",
+        "variants",
+        "whileHover",
+        "whileTap",
+        "exit",
+        "whileInView",
+        "whileFocus",
+        "whileDrag",
+    ],
+    exit: ["exit"],
+    drag: ["drag", "dragControls"],
+    focus: ["whileFocus"],
+    hover: ["whileHover", "onHoverStart", "onHoverEnd"],
+    tap: ["whileTap", "onTap", "onTapStart", "onTapCancel"],
+    pan: ["onPan", "onPanStart", "onPanSessionStart", "onPanEnd"],
+    inView: ["whileInView", "onViewportEnter", "onViewportLeave"],
+    layout: ["layout", "layoutId"],
+};
+const featureDefinitions = {};
+for (const key in featureProps) {
+    featureDefinitions[key] = {
+        isEnabled: (props) => featureProps[key].some((name) => !!props[name]),
+    };
+}
+
+export { featureDefinitions };

package/dist/es/framer-motion/dist/es/motion/features/drag.mjs

@@ -0,0 +1,17 @@
+import { DragGesture } from '../../gestures/drag/index.mjs';
+import { PanGesture } from '../../gestures/pan/index.mjs';
+import { MeasureLayout } from './layout/MeasureLayout.mjs';
+import { HTMLProjectionNode } from '../../projection/node/HTMLProjectionNode.mjs';
+
+const drag = {
+    pan: {
+        Feature: PanGesture,
+    },
+    drag: {
+        Feature: DragGesture,
+        ProjectionNode: HTMLProjectionNode,
+        MeasureLayout,
+    },
+};
+
+export { drag };

package/dist/es/framer-motion/dist/es/motion/features/gestures.mjs

@@ -0,0 +1,21 @@
+import { HoverGesture } from '../../gestures/hover.mjs';
+import { FocusGesture } from '../../gestures/focus.mjs';
+import { PressGesture } from '../../gestures/press.mjs';
+import { InViewFeature } from './viewport/index.mjs';
+
+const gestureAnimations = {
+    inView: {
+        Feature: InViewFeature,
+    },
+    tap: {
+        Feature: PressGesture,
+    },
+    focus: {
+        Feature: FocusGesture,
+    },
+    hover: {
+        Feature: HoverGesture,
+    },
+};
+
+export { gestureAnimations };