motion 12.18.1 → 12.19.0

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

@@ -1,129 +0,0 @@
-import { calcLength } from '../../../projection/geometry/delta-calc.mjs';
-import { mixNumber } from '../../../../../../motion-dom/dist/es/utils/mix/number.mjs';
-import { progress } from '../../../../../../motion-utils/dist/es/progress.mjs';
-import { clamp } from '../../../../../../motion-utils/dist/es/clamp.mjs';
-
-/**
- * Apply constraints to a point. These constraints are both physical along an
- * axis, and an elastic factor that determines how much to constrain the point
- * by if it does lie outside the defined parameters.
- */
-function applyConstraints(point, { min, max }, elastic) {
-    if (min !== undefined && point < min) {
-        // If we have a min point defined, and this is outside of that, constrain
-        point = elastic
-            ? mixNumber(min, point, elastic.min)
-            : Math.max(point, min);
-    }
-    else if (max !== undefined && point > max) {
-        // If we have a max point defined, and this is outside of that, constrain
-        point = elastic
-            ? mixNumber(max, point, elastic.max)
-            : Math.min(point, max);
-    }
-    return point;
-}
-/**
- * Calculate constraints in terms of the viewport when defined relatively to the
- * measured axis. This is measured from the nearest edge, so a max constraint of 200
- * on an axis with a max value of 300 would return a constraint of 500 - axis length
- */
-function calcRelativeAxisConstraints(axis, min, max) {
-    return {
-        min: min !== undefined ? axis.min + min : undefined,
-        max: max !== undefined
-            ? axis.max + max - (axis.max - axis.min)
-            : undefined,
-    };
-}
-/**
- * Calculate constraints in terms of the viewport when
- * defined relatively to the measured bounding box.
- */
-function calcRelativeConstraints(layoutBox, { top, left, bottom, right }) {
-    return {
-        x: calcRelativeAxisConstraints(layoutBox.x, left, right),
-        y: calcRelativeAxisConstraints(layoutBox.y, top, bottom),
-    };
-}
-/**
- * Calculate viewport constraints when defined as another viewport-relative axis
- */
-function calcViewportAxisConstraints(layoutAxis, constraintsAxis) {
-    let min = constraintsAxis.min - layoutAxis.min;
-    let max = constraintsAxis.max - layoutAxis.max;
-    // If the constraints axis is actually smaller than the layout axis then we can
-    // flip the constraints
-    if (constraintsAxis.max - constraintsAxis.min <
-        layoutAxis.max - layoutAxis.min) {
-        [min, max] = [max, min];
-    }
-    return { min, max };
-}
-/**
- * Calculate viewport constraints when defined as another viewport-relative box
- */
-function calcViewportConstraints(layoutBox, constraintsBox) {
-    return {
-        x: calcViewportAxisConstraints(layoutBox.x, constraintsBox.x),
-        y: calcViewportAxisConstraints(layoutBox.y, constraintsBox.y),
-    };
-}
-/**
- * Calculate a transform origin relative to the source axis, between 0-1, that results
- * in an asthetically pleasing scale/transform needed to project from source to target.
- */
-function calcOrigin(source, target) {
-    let origin = 0.5;
-    const sourceLength = calcLength(source);
-    const targetLength = calcLength(target);
-    if (targetLength > sourceLength) {
-        origin = progress(target.min, target.max - sourceLength, source.min);
-    }
-    else if (sourceLength > targetLength) {
-        origin = progress(source.min, source.max - targetLength, target.min);
-    }
-    return clamp(0, 1, origin);
-}
-/**
- * Rebase the calculated viewport constraints relative to the layout.min point.
- */
-function rebaseAxisConstraints(layout, constraints) {
-    const relativeConstraints = {};
-    if (constraints.min !== undefined) {
-        relativeConstraints.min = constraints.min - layout.min;
-    }
-    if (constraints.max !== undefined) {
-        relativeConstraints.max = constraints.max - layout.min;
-    }
-    return relativeConstraints;
-}
-const defaultElastic = 0.35;
-/**
- * Accepts a dragElastic prop and returns resolved elastic values for each axis.
- */
-function resolveDragElastic(dragElastic = defaultElastic) {
-    if (dragElastic === false) {
-        dragElastic = 0;
-    }
-    else if (dragElastic === true) {
-        dragElastic = defaultElastic;
-    }
-    return {
-        x: resolveAxisElastic(dragElastic, "left", "right"),
-        y: resolveAxisElastic(dragElastic, "top", "bottom"),
-    };
-}
-function resolveAxisElastic(dragElastic, minLabel, maxLabel) {
-    return {
-        min: resolvePointElastic(dragElastic, minLabel),
-        max: resolvePointElastic(dragElastic, maxLabel),
-    };
-}
-function resolvePointElastic(dragElastic, label) {
-    return typeof dragElastic === "number"
-        ? dragElastic
-        : dragElastic[label] || 0;
-}
-
-export { applyConstraints, calcOrigin, calcRelativeAxisConstraints, calcRelativeConstraints, calcViewportAxisConstraints, calcViewportConstraints, defaultElastic, rebaseAxisConstraints, resolveAxisElastic, resolveDragElastic, resolvePointElastic };

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

@@ -1,41 +0,0 @@
-import { addDomEvent } from '../events/add-dom-event.mjs';
-import { Feature } from '../motion/features/Feature.mjs';
-import { pipe } from '../../../../motion-utils/dist/es/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

@@ -1,30 +0,0 @@
-import { extractEventInfo } from '../events/event-info.mjs';
-import { Feature } from '../motion/features/Feature.mjs';
-import { hover } from '../../../../motion-dom/dist/es/gestures/hover.mjs';
-import { frame } from '../../../../motion-dom/dist/es/frameloop/frame.mjs';
-
-function handleHoverEvent(node, event, lifecycle) {
-    const { props } = node;
-    if (node.animationState && props.whileHover) {
-        node.animationState.setActive("whileHover", lifecycle === "Start");
-    }
-    const eventName = ("onHover" + lifecycle);
-    const callback = props[eventName];
-    if (callback) {
-        frame.postRender(() => callback(event, extractEventInfo(event)));
-    }
-}
-class HoverGesture extends Feature {
-    mount() {
-        const { current } = this.node;
-        if (!current)
-            return;
-        this.unmount = hover(current, (_element, startEvent) => {
-            handleHoverEvent(this.node, startEvent, "Start");
-            return (endEvent) => handleHoverEvent(this.node, endEvent, "End");
-        });
-    }
-    unmount() { }
-}
-
-export { HoverGesture };

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

@@ -1,156 +0,0 @@
-import { addPointerEvent } from '../../events/add-pointer-event.mjs';
-import { extractEventInfo } from '../../events/event-info.mjs';
-import { distance2D } from '../../utils/distance.mjs';
-import { frame, cancelFrame, frameData } from '../../../../../motion-dom/dist/es/frameloop/frame.mjs';
-import { isPrimaryPointer } from '../../../../../motion-dom/dist/es/gestures/utils/is-primary-pointer.mjs';
-import { pipe } from '../../../../../motion-utils/dist/es/pipe.mjs';
-import { secondsToMilliseconds, millisecondsToSeconds } from '../../../../../motion-utils/dist/es/time-conversion.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

@@ -1,50 +0,0 @@
-import { addPointerEvent } from '../../events/add-pointer-event.mjs';
-import { Feature } from '../../motion/features/Feature.mjs';
-import { getContextWindow } from '../../utils/get-context-window.mjs';
-import { PanSession } from './PanSession.mjs';
-import { noop } from '../../../../../motion-utils/dist/es/noop.mjs';
-import { frame } from '../../../../../motion-dom/dist/es/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

@@ -1,33 +0,0 @@
-import { extractEventInfo } from '../events/event-info.mjs';
-import { Feature } from '../motion/features/Feature.mjs';
-import { press } from '../../../../motion-dom/dist/es/gestures/press/index.mjs';
-import { frame } from '../../../../motion-dom/dist/es/frameloop/frame.mjs';
-
-function handlePressEvent(node, event, lifecycle) {
-    const { props } = node;
-    if (node.current instanceof HTMLButtonElement && node.current.disabled) {
-        return;
-    }
-    if (node.animationState && props.whileTap) {
-        node.animationState.setActive("whileTap", lifecycle === "Start");
-    }
-    const eventName = ("onTap" + (lifecycle === "End" ? "" : lifecycle));
-    const callback = props[eventName];
-    if (callback) {
-        frame.postRender(() => callback(event, extractEventInfo(event)));
-    }
-}
-class PressGesture extends Feature {
-    mount() {
-        const { current } = this.node;
-        if (!current)
-            return;
-        this.unmount = press(current, (_element, startEvent) => {
-            handlePressEvent(this.node, startEvent, "Start");
-            return (endEvent, { success }) => handlePressEvent(this.node, endEvent, success ? "End" : "Cancel");
-        }, { useGlobalTarget: this.node.props.globalTapTarget });
-    }
-    unmount() { }
-}
-
-export { PressGesture };

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

@@ -1,9 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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, onExitComplete } = this.node.presenceContext || {};
-        if (onExitComplete) {
-            onExitComplete(this.id);
-        }
-        if (register) {
-            this.unmount = register(this.id);
-        }
-    }
-    unmount() { }
-}
-
-export { ExitAnimationFeature };

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

@@ -1,40 +0,0 @@
-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() {
-        this.node.animationState.reset();
-        this.unmountControls?.();
-    }
-}
-
-export { AnimationFeature };

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

@@ -1,13 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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 };