motion 14.4.0 → 14.5.0

package/dist/motion.dev.js

@@ -6136,6 +6136,43 @@
         return isObject(element) && "ownerSVGElement" in element;
     }
 
+    const activeScope = {};
+    /**
+     * Register `cleanup` with the active scope, if there is one, so stopping
+     * the scope also runs it.
+     */
+    function addToScope(cleanup) {
+        activeScope.current?.add(cleanup);
+        return cleanup;
+    }
+    /**
+     * Collect the animation a builder like `animateLayout()` or
+     * `animateView()` resolves with. If the scope stops first, the animation
+     * is stopped as soon as it starts.
+     */
+    function addBuilderToScope(builder) {
+        const scope = activeScope.current;
+        if (!scope)
+            return;
+        let isStopped = false;
+        let stop;
+        const remove = scope.add(() => {
+            isStopped = true;
+            stop?.();
+        });
+        builder.then((animation) => {
+            if (!animation)
+                return;
+            stop = () => animation.stop();
+            isStopped ? stop() : animation.finished.then(remove);
+        }, remove);
+    }
+    /**
+     * Bind `callback` to the active scope, so anything it starts later (for
+     * instance an animation in an `inView()` callback) is collected too.
+     */
+    const bindToScope = (callback) => activeScope.current ? activeScope.current.bind(callback) : callback;
+
     function resolveElements(elementOrSelector, scope, selectorCache) {
         if (elementOrSelector == null) {
             return [];
@@ -6144,10 +6181,9 @@
             return [elementOrSelector];
         }
         else if (typeof elementOrSelector === "string") {
-            let root = document;
-            if (scope) {
-                root = scope.current;
-            }
+            const root = scope
+                ? scope.current
+                : activeScope.current?.root || document;
             const elements = selectorCache?.[elementOrSelector] ??
                 root.querySelectorAll(elementOrSelector);
             return elements ? Array.from(elements) : [];
@@ -6937,12 +6973,20 @@
      * sharing values and a renderer.
      */
     function animateElement(element, keyframes, transition, visualElement) {
+        activeScope.current?.track(element);
         if (visualElement) {
             return animateValues((key) => visualElement.getValue(key, null), keyframes, transition, visualElement);
         }
         const effect = getElementEffect(element);
         return animateEffectSubject(effect, element, keyframes, transition, new EffectSubject(effect, element));
     }
+    /**
+     * Detach the values styleEffect/svgEffect bound to `element`, so the
+     * next animation reads its starting values from the DOM again.
+     */
+    const releaseElement = (element) => getElementEffect(element)
+        .state(element)
+        ?.release();
     /**
      * Hand the values styleEffect/svgEffect are rendering on `element`,
      * whether bound by animate() or directly, to a VisualElement that now
@@ -7026,6 +7070,7 @@
      */
     function delay(callback, timeout) {
         const start = time.now();
+        callback = bindToScope(callback);
         const checkElapsed = ({ timestamp }) => {
             const elapsed = timestamp - start;
             if (elapsed >= timeout) {
@@ -7034,7 +7079,7 @@
             }
         };
         frame.setup(checkElapsed, true);
-        return () => cancelFrame(checkElapsed);
+        return addToScope(() => cancelFrame(checkElapsed));
     }
     function delayInSeconds(callback, timeout) {
         return delay(callback, secondsToMilliseconds(timeout));
@@ -10455,7 +10500,7 @@
     function parseAnimateLayoutArgs(scopeOrUpdateDom, updateDomOrOptions, options) {
         if (typeof scopeOrUpdateDom === "function") {
             return {
-                scope: document,
+                scope: activeScope.current?.root || document,
                 updateDom: scopeOrUpdateDom,
                 defaultOptions: updateDomOrOptions,
             };
@@ -10591,7 +10636,7 @@
     }
 
     function resize(a, b) {
-        return typeof a === "function" ? resizeWindow(a) : resizeElement(a, b);
+        return addToScope(typeof a === "function" ? resizeWindow(a) : resizeElement(a, b));
     }
 
     const distance = (a, b) => Math.abs(a - b);
@@ -10656,6 +10701,12 @@
                 onMove && onMove(this.lastMoveEvent, info);
             };
             this.handlePointerMove = (event, info) => {
+                /**
+                 * This event's pageX/pageY already include any window scroll that
+                 * hasn't fired its scroll event yet. Settle it now, so that scroll
+                 * event doesn't add it to the new point a second time.
+                 */
+                this.handleScroll(window);
                 this.lastMoveEvent = event;
                 this.lastRawMoveEventInfo = info;
                 this.lastMoveEventInfo = transformPoint(info, this.transformPagePoint);
@@ -11687,7 +11738,20 @@
      */
     function drag(elementOrSelector, options = {}) {
         const props = toProps(options);
+        const scope = activeScope.current;
+        /**
+         * Run callbacks in the active scope, so work they start is collected.
+         */
+        if (scope) {
+            for (const key in props) {
+                const value = props[key];
+                if (typeof value === "function") {
+                    props[key] = scope.bind(value);
+                }
+            }
+        }
         const cleanups = resolveElements(elementOrSelector).map((element) => {
+            scope?.track(element);
             const [node, release] = acquireProjectionNode(element);
             /**
              * Measure layout even when not animating it, as constraints and
@@ -11701,10 +11765,11 @@
                 removeStyles();
                 removeListeners?.();
                 controls.cancel();
+                controls.stopAnimation();
                 release();
             };
         });
-        return () => cleanups.forEach((cleanup) => cleanup());
+        return addToScope(() => cleanups.forEach((cleanup) => cleanup()));
     }
 
     function setupGesture(elementOrSelector, options) {
@@ -11715,7 +11780,7 @@
             ...options,
             signal: gestureAbortController.signal,
         };
-        const cancel = () => gestureAbortController.abort();
+        const cancel = addToScope(() => gestureAbortController.abort());
         return [elements, eventOptions, cancel];
     }
 
@@ -11730,6 +11795,7 @@
      * @public
      */
     function hover(elementOrSelector, onHoverStart, options = {}) {
+        onHoverStart = bindToScope(onHoverStart);
         const [elements, eventOptions, cancel] = setupGesture(elementOrSelector, options);
         elements.forEach((element) => {
             let isPressed = false;
@@ -11818,26 +11884,36 @@
     function firePointerEvent(target, type) {
         target.dispatchEvent(new PointerEvent("pointer" + type, { isPrimary: true, bubbles: true }));
     }
-    const enableKeyboardPress = (focusEvent, eventOptions) => {
-        const element = focusEvent.currentTarget;
-        if (!element)
-            return;
+    const enableKeyboardPress = (element, eventOptions) => {
+        /**
+         * Listeners are scoped to this focus and all released on blur, rather
+         * than added per Enter press, so they can't accumulate and fire
+         * duplicate pointerup/pointercancel events. See #3935.
+         */
+        let isKeyPressing = false;
         const handleKeydown = filterEvents(() => {
             if (isPressing.has(element))
                 return;
+            isKeyPressing = true;
             firePointerEvent(element, "down");
-            const handleKeyup = filterEvents(() => {
-                firePointerEvent(element, "up");
-            });
-            const handleBlur = () => firePointerEvent(element, "cancel");
-            element.addEventListener("keyup", handleKeyup, eventOptions);
-            element.addEventListener("blur", handleBlur, eventOptions);
+        });
+        const handleKeyup = filterEvents(() => {
+            if (!isKeyPressing)
+                return;
+            isKeyPressing = false;
+            firePointerEvent(element, "up");
         });
         element.addEventListener("keydown", handleKeydown, eventOptions);
+        element.addEventListener("keyup", handleKeyup, eventOptions);
         /**
-         * Add an event listener that fires on blur to remove the keydown events.
+         * On blur, remove the key listeners and cancel any keyboard press.
          */
-        element.addEventListener("blur", () => element.removeEventListener("keydown", handleKeydown), eventOptions);
+        element.addEventListener("blur", () => {
+            element.removeEventListener("keydown", handleKeydown);
+            element.removeEventListener("keyup", handleKeyup);
+            if (isKeyPressing)
+                firePointerEvent(element, "cancel");
+        }, { ...eventOptions, once: true });
     };
 
     /**
@@ -11868,6 +11944,7 @@
      * @public
      */
     function press(targetOrSelector, onPressStart, options = {}) {
+        onPressStart = bindToScope(onPressStart);
         const [targets, eventOptions, cancelEvents] = setupGesture(targetOrSelector, options);
         const startPress = (startEvent) => {
             const target = startEvent.currentTarget;
@@ -11916,7 +11993,7 @@
             const pointerDownTarget = options.useGlobalTarget ? window : target;
             pointerDownTarget.addEventListener("pointerdown", startPress, eventOptions);
             if (isHTMLElement(target)) {
-                target.addEventListener("focus", (event) => enableKeyboardPress(event, eventOptions));
+                target.addEventListener("focus", () => enableKeyboardPress(target, eventOptions), eventOptions);
                 if (!isElementKeyboardAccessible(target) &&
                     !target.hasAttribute("tabindex")) {
                     target.tabIndex = 0;
@@ -11933,6 +12010,160 @@
             : computedStyle[name];
     }
 
+    const keywords = {
+        reducedMotion: "(prefers-reduced-motion: reduce)",
+        motion: "(prefers-reduced-motion: no-preference)",
+        dark: "(prefers-color-scheme: dark)",
+        light: "(prefers-color-scheme: light)",
+        hover: "(hover: hover) and (pointer: fine)",
+        touch: "(pointer: coarse)",
+        portrait: "(orientation: portrait)",
+        landscape: "(orientation: landscape)",
+    };
+    /**
+     * Turn a condition into a media query. Full media queries pass through
+     * unchanged. Otherwise each space-separated token must match:
+     *
+     * - A width comparison: `">=800"`, `"<1200px"`, `"> 40em"`
+     * - A keyword: `reducedMotion`, `motion`, `dark`, `light`, `hover`,
+     *   `touch`, `portrait`, `landscape`
+     *
+     * Prefix a token with `!` to negate it, for instance `">=800 !touch"`.
+     */
+    function toMediaQuery(condition) {
+        if (condition.includes("("))
+            return condition;
+        return condition
+            .replace(/([<>!]=?)\s+/g, "$1")
+            .trim()
+            .split(/\s+/)
+            .map((token) => {
+            const isNot = token[0] === "!";
+            if (isNot)
+                token = token.slice(1);
+            const width = /^([<>]=?)([\d.]+)([a-z]*)$/.exec(token);
+            const query = width
+                ? `(width ${width[1]} ${width[2]}${width[3] || "px"})`
+                : keywords[token] || token;
+            return isNot ? `(not (${query}))` : query;
+        })
+            .join(" and ");
+    }
+
+    function scopeMotion(...args) {
+        const root = typeof args[0] === "function" ? undefined : args.shift();
+        const [setup, options = {}] = args;
+        const { transition, matchMedia } = options;
+        const queries = [];
+        const styles = new Map();
+        let cleanups = [];
+        let isPending = false;
+        const active = {
+            root: resolveElements(root)[0],
+            transition,
+            add(cleanup) {
+                cleanups.push(cleanup);
+                return () => removeItem(cleanups, cleanup);
+            },
+            bind: (callback) => ((...args) => {
+                const result = scope.run(() => callback(...args));
+                return typeof result === "function"
+                    ? active.bind(result)
+                    : result;
+            }),
+            track(element) {
+                styles.has(element) ||
+                    styles.set(element, element.getAttribute("style"));
+            },
+        };
+        const clear = (restore) => {
+            const current = cleanups;
+            cleanups = [];
+            for (let i = current.length - 1; i >= 0; i--)
+                current[i]();
+            restore &&
+                styles.forEach((style, element) => {
+                    releaseElement(element);
+                    style === null
+                        ? element.removeAttribute("style")
+                        : element.setAttribute("style", style);
+                });
+            styles.clear();
+        };
+        const start = () => {
+            scope.state = "active";
+            let matches = !queries.length;
+            scope.media = {};
+            for (const [name, query] of queries) {
+                matches = (scope.media[name] = query.matches) || matches;
+            }
+            if (matches && setup) {
+                const cleanup = scope.run(() => setup(scope));
+                typeof cleanup === "function" && active.add(cleanup);
+            }
+        };
+        const onChange = () => {
+            if (isPending)
+                return;
+            isPending = true;
+            /**
+             * Several conditions can change together, for instance two
+             * breakpoints crossed by one resize. Refresh once.
+             */
+            queueMicrotask(() => {
+                isPending = false;
+                queries.length && scope.refresh();
+            });
+        };
+        const kill = (restore) => {
+            scope.state = restore ? "cancelled" : "stopped";
+            for (const [, query] of queries) {
+                query.removeEventListener("change", onChange);
+            }
+            queries.length = 0;
+            clear(restore);
+        };
+        const runIn = (target, callback) => {
+            const prev = activeScope.current;
+            activeScope.current = target;
+            try {
+                return callback();
+            }
+            finally {
+                activeScope.current = prev;
+            }
+        };
+        const scope = {
+            state: "active",
+            media: {},
+            run: (callback) => runIn(active, callback),
+            ignore: (callback) => runIn(undefined, callback),
+            bind: active.bind,
+            stop: () => kill(),
+            cancel: () => kill(true),
+            refresh() {
+                clear(true);
+                start();
+            },
+        };
+        if (matchMedia && typeof window !== "undefined") {
+            const conditions = typeof matchMedia === "string"
+                ? { matches: matchMedia }
+                : matchMedia;
+            for (const name in conditions) {
+                const query = window.matchMedia(toMediaQuery(conditions[name]));
+                query.addEventListener("change", onChange);
+                queries.push([name, query]);
+            }
+        }
+        /**
+         * A scope created inside another is cancelled with it.
+         */
+        addToScope(scope.cancel);
+        start();
+        return scope;
+    }
+
     function clearStatsBuffer() {
         statsBuffer.value = null;
         statsBuffer.addProjectionMetrics = null;
@@ -13549,7 +13780,9 @@
         }
     }
     function animateView(update, options = {}) {
-        return new ViewTransitionBuilder(update, options);
+        const builder = new ViewTransitionBuilder(update, options);
+        addBuilderToScope(builder);
+        return builder;
     }
 
     /**
@@ -14058,7 +14291,12 @@
      */
     function animateLayout(scopeOrUpdateDom, updateDomOrOptions, options) {
         const { scope, updateDom, defaultOptions } = parseAnimateLayoutArgs(scopeOrUpdateDom, updateDomOrOptions, options);
-        return new LayoutAnimationBuilder(scope, updateDom, defaultOptions);
+        const builder = new LayoutAnimationBuilder(scope, updateDom, {
+            ...activeScope.current?.transition,
+            ...defaultOptions,
+        });
+        addBuilderToScope(builder);
+        return builder;
     }
 
     /**
@@ -14577,6 +14815,8 @@
         function scopedAnimate(subjectOrSequence, optionsOrKeyframes, options) {
             let animations = [];
             let animationOnComplete;
+            const motionScope = activeScope.current;
+            const scopeTransition = motionScope?.transition;
             const inherited = {};
             if (reduceMotion !== undefined)
                 inherited.reduceMotion = reduceMotion;
@@ -14587,6 +14827,12 @@
                 if (typeof onComplete === "function") {
                     animationOnComplete = onComplete;
                 }
+                if (scopeTransition) {
+                    sequenceOptions.defaultTransition = {
+                        ...scopeTransition,
+                        ...sequenceOptions.defaultTransition,
+                    };
+                }
                 animations = animateSequence(subjectOrSequence, { ...inherited, ...sequenceOptions }, scope);
             }
             else {
@@ -14595,12 +14841,19 @@
                 if (typeof onComplete === "function") {
                     animationOnComplete = onComplete;
                 }
-                animations = animateSubject(subjectOrSequence, optionsOrKeyframes, { ...inherited, ...rest }, scope);
+                animations = animateSubject(subjectOrSequence, optionsOrKeyframes, {
+                    ...inherited,
+                    ...scopeTransition,
+                    ...rest,
+                }, scope);
             }
             const animation = new GroupAnimationWithThen(animations);
             if (animationOnComplete) {
                 animation.finished.then(animationOnComplete);
             }
+            if (motionScope) {
+                animation.finished.then(motionScope.add(() => animation.stop()));
+            }
             if (scope) {
                 scope.animations.push(animation);
                 animation.finished.then(() => {
@@ -15328,9 +15581,11 @@
             container: source || container,
             ...options,
         };
-        return typeof onScroll === "function"
-            ? scrollInfo((info) => onScroll(info[axis].progress, info), optionsWithDefaults)
-            : attachToAnimation(onScroll, optionsWithDefaults);
+        if (typeof onScroll === "function") {
+            const callback = bindToScope(onScroll);
+            return addToScope(scrollInfo((info) => callback(info[axis].progress, info), optionsWithDefaults));
+        }
+        return addToScope(attachToAnimation(onScroll, optionsWithDefaults));
     }
 
     const thresholds = {
@@ -15339,6 +15594,7 @@
     };
     function inView(elementOrSelector, onStart, { root, margin: rootMargin, amount = "some" } = {}) {
         const elements = resolveElements(elementOrSelector);
+        onStart = bindToScope(onStart);
         const activeIntersections = new WeakMap();
         const onIntersectionChange = (entries) => {
             entries.forEach((entry) => {
@@ -15370,7 +15626,7 @@
             threshold: typeof amount === "number" ? amount : thresholds[amount],
         });
         elements.forEach((element) => observer.observe(element));
-        return () => observer.disconnect();
+        return addToScope(() => observer.disconnect());
     }
 
     exports.AsyncMotionValueAnimation = AsyncMotionValueAnimation;
@@ -15401,7 +15657,9 @@
     exports.VisualElement = VisualElement;
     exports.VisualElementDragControls = VisualElementDragControls;
     exports.acceleratedValues = acceleratedValues;
+    exports.activeScope = activeScope;
     exports.addAttrValue = addAttrValue;
+    exports.addBuilderToScope = addBuilderToScope;
     exports.addDomEvent = addDomEvent;
     exports.addEffect = addEffect;
     exports.addPointerEvent = addPointerEvent;
@@ -15409,6 +15667,7 @@
     exports.addSVGValue = addSVGValue;
     exports.addScaleCorrector = addScaleCorrector;
     exports.addStyleValue = addStyleValue;
+    exports.addToScope = addToScope;
     exports.addUniqueItem = addUniqueItem;
     exports.addValueToWillChange = addValueToWillChange;
     exports.alpha = alpha;
@@ -15445,6 +15704,7 @@
     exports.backIn = backIn;
     exports.backInOut = backInOut;
     exports.backOut = backOut;
+    exports.bindToScope = bindToScope;
     exports.boxEquals = boxEquals;
     exports.boxEqualsRounded = boxEqualsRounded;
     exports.buildHTMLStyles = buildHTMLStyles;
@@ -15639,6 +15899,7 @@
     exports.readStyleValue = readStyleValue;
     exports.readTransformValue = readTransformValue;
     exports.recordStats = recordStats;
+    exports.releaseElement = releaseElement;
     exports.removeAxisDelta = removeAxisDelta;
     exports.removeAxisTransforms = removeAxisTransforms;
     exports.removeBoxTransforms = removeBoxTransforms;
@@ -15662,6 +15923,7 @@
     exports.scale = scale;
     exports.scaleCorrectors = scaleCorrectors;
     exports.scalePoint = scalePoint;
+    exports.scopeMotion = scopeMotion;
     exports.scrapeHTMLMotionValuesFromProps = scrapeMotionValuesFromProps$1;
     exports.scrapeSVGMotionValuesFromProps = scrapeMotionValuesFromProps;
     exports.scroll = scroll;
@@ -15692,6 +15954,7 @@
     exports.sync = sync;
     exports.testValueType = testValueType;
     exports.time = time;
+    exports.toMediaQuery = toMediaQuery;
     exports.transform = transform;
     exports.transformAxis = transformAxis;
     exports.transformBox = transformBox;