motion 11.13.5 → 11.14.1

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

@@ -1,131 +1,30 @@
-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 '../../../../motion-dom/dist/es/gestures/drag/state/is-active.mjs';
-import { isNodeOrChild } from './utils/is-node-or-child.mjs';
-import '../../../../motion-utils/dist/es/errors.mjs';
-import { noop } from '../../../../motion-utils/dist/es/noop.mjs';
+import { press } from '../../../../motion-dom/dist/es/gestures/press/index.mjs';
+import { extractEventInfo } from '../events/event-info.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));
-        }
+function handlePressEvent(node, event, lifecycle) {
+    const { props } = node;
+    if (node.animationState && props.whileTap) {
+        node.animationState.setActive("whileTap", lifecycle === "Start");
     }
-    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));
-        }
+    const eventName = ("onTap" + (lifecycle === "End" ? "" : lifecycle));
+    const callback = props[eventName];
+    if (callback) {
+        frame.postRender(() => callback(event, extractEventInfo(event)));
     }
+}
+class PressGesture extends Feature {
     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();
+        const { current } = this.node;
+        if (!current)
+            return;
+        this.unmount = press(current, (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/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.13.5", `Attempting to mix Motion versions ${nextValue.version} with 11.13.5 may not work as expected.`);
+                warnOnce(nextValue.version === "11.14.1", `Attempting to mix Motion versions ${nextValue.version} with 11.14.1 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/framer-motion/dist/es/utils/get-context-window.mjs

@@ -1,4 +1,4 @@
-// Fixes https://github.com/framer/motion/issues/2270
+// Fixes https://github.com/motiondivision/motion/issues/2270
 const getContextWindow = ({ current }) => {
     return current ? current.ownerDocument.defaultView : null;
 };

package/dist/es/framer-motion/dist/es/value/index.mjs

@@ -34,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.13.5";
+        this.version = "11.14.1";
         /**
          * 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

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

@@ -1,5 +1,5 @@
-import { resolveElements } from '../utils/resolve-elements.mjs';
 import { isDragActive } from './drag/state/is-active.mjs';
+import { setupGesture } from './utils/setup.mjs';
 
 /**
  * Filter out events that are not pointer events, or are triggering
@@ -20,12 +20,7 @@ function filterEvents(callback) {
  * @public
  */
 function hover(elementOrSelector, onHoverStart, options = {}) {
-    const gestureAbortController = new AbortController();
-    const eventOptions = {
-        passive: true,
-        ...options,
-        signal: gestureAbortController.signal,
-    };
+    const [elements, eventOptions, cancel] = setupGesture(elementOrSelector, options);
     const onPointerEnter = filterEvents((enterEvent) => {
         const { target } = enterEvent;
         const onHoverEnd = onHoverStart(enterEvent);
@@ -37,10 +32,10 @@ function hover(elementOrSelector, onHoverStart, options = {}) {
         });
         target.addEventListener("pointerleave", onPointerLeave, eventOptions);
     });
-    resolveElements(elementOrSelector).forEach((element) => {
+    elements.forEach((element) => {
         element.addEventListener("pointerenter", onPointerEnter, eventOptions);
     });
-    return () => gestureAbortController.abort();
+    return cancel;
 }
 
 export { hover };

package/dist/es/motion-dom/dist/es/gestures/press/index.mjs

@@ -0,0 +1,75 @@
+import { isDragActive } from '../drag/state/is-active.mjs';
+import { isPrimaryPointer } from '../utils/is-primary-pointer.mjs';
+import { setupGesture } from '../utils/setup.mjs';
+import { enableKeyboardPress } from './utils/keyboard.mjs';
+import { isElementKeyboardAccessible } from './utils/is-keyboard-accessible.mjs';
+import { isNodeOrChild } from '../utils/is-node-or-child.mjs';
+import { isPressing } from './utils/state.mjs';
+
+/**
+ * Filter out events that are not primary pointer events, or are triggering
+ * while a Motion gesture is active.
+ */
+function isValidPressEvent(event) {
+    return isPrimaryPointer(event) && !isDragActive();
+}
+/**
+ * Create a press gesture.
+ *
+ * Press is different to `"pointerdown"`, `"pointerup"` in that it
+ * automatically filters out secondary pointer events like right
+ * click and multitouch.
+ *
+ * It also adds accessibility support for keyboards, where
+ * an element with a press gesture will receive focus and
+ *  trigger on Enter `"keydown"` and `"keyup"` events.
+ *
+ * This is different to a browser's `"click"` event, which does
+ * respond to keyboards but only for the `"click"` itself, rather
+ * than the press start and end/cancel. The element also needs
+ * to be focusable for this to work, whereas a press gesture will
+ * make an element focusable by default.
+ *
+ * @public
+ */
+function press(elementOrSelector, onPressStart, options = {}) {
+    const [elements, eventOptions, cancelEvents] = setupGesture(elementOrSelector, options);
+    const startPress = (startEvent) => {
+        const element = startEvent.currentTarget;
+        if (!isValidPressEvent(startEvent) || isPressing.has(element))
+            return;
+        isPressing.add(element);
+        const onPressEnd = onPressStart(startEvent);
+        const onPointerEnd = (endEvent, success) => {
+            window.removeEventListener("pointerup", onPointerUp);
+            window.removeEventListener("pointercancel", onPointerCancel);
+            if (!isValidPressEvent(endEvent) || !isPressing.has(element)) {
+                return;
+            }
+            isPressing.delete(element);
+            if (onPressEnd) {
+                onPressEnd(endEvent, { success });
+            }
+        };
+        const onPointerUp = (upEvent) => {
+            onPointerEnd(upEvent, options.useGlobalTarget ||
+                isNodeOrChild(element, upEvent.target));
+        };
+        const onPointerCancel = (cancelEvent) => {
+            onPointerEnd(cancelEvent, false);
+        };
+        window.addEventListener("pointerup", onPointerUp, eventOptions);
+        window.addEventListener("pointercancel", onPointerCancel, eventOptions);
+    };
+    elements.forEach((element) => {
+        if (!isElementKeyboardAccessible(element)) {
+            element.tabIndex = 0;
+        }
+        const target = options.useGlobalTarget ? window : element;
+        target.addEventListener("pointerdown", startPress, eventOptions);
+        element.addEventListener("focus", (event) => enableKeyboardPress(event, eventOptions), eventOptions);
+    });
+    return cancelEvents;
+}
+
+export { press };

package/dist/es/motion-dom/dist/es/gestures/press/utils/is-keyboard-accessible.mjs

@@ -0,0 +1,12 @@
+const focusableElements = new Set([
+    "BUTTON",
+    "INPUT",
+    "SELECT",
+    "TEXTAREA",
+    "A",
+]);
+function isElementKeyboardAccessible(element) {
+    return focusableElements.has(element.tagName) || element.tabIndex !== -1;
+}
+
+export { isElementKeyboardAccessible };

package/dist/es/motion-dom/dist/es/gestures/press/utils/keyboard.mjs

@@ -0,0 +1,38 @@
+import { isPressing } from './state.mjs';
+
+/**
+ * Filter out events that are not "Enter" keys.
+ */
+function filterEvents(callback) {
+    return (event) => {
+        if (event.key !== "Enter")
+            return;
+        callback(event);
+    };
+}
+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 handleKeydown = filterEvents(() => {
+        if (isPressing.has(element))
+            return;
+        firePointerEvent(element, "down");
+        const handleKeyup = filterEvents(() => {
+            firePointerEvent(element, "up");
+        });
+        const handleBlur = () => firePointerEvent(element, "cancel");
+        element.addEventListener("keyup", handleKeyup, eventOptions);
+        element.addEventListener("blur", handleBlur, eventOptions);
+    });
+    element.addEventListener("keydown", handleKeydown, eventOptions);
+    /**
+     * Add an event listener that fires on blur to remove the keydown events.
+     */
+    element.addEventListener("blur", () => element.removeEventListener("keydown", handleKeydown), eventOptions);
+};
+
+export { enableKeyboardPress };

package/dist/es/motion-dom/dist/es/gestures/press/utils/state.mjs

@@ -0,0 +1,3 @@
+const isPressing = new WeakSet();
+
+export { isPressing };

package/dist/es/motion-dom/dist/es/gestures/utils/setup.mjs

@@ -0,0 +1,15 @@
+import { resolveElements } from '../../utils/resolve-elements.mjs';
+
+function setupGesture(elementOrSelector, options) {
+    const elements = resolveElements(elementOrSelector);
+    const gestureAbortController = new AbortController();
+    const eventOptions = {
+        passive: true,
+        ...options,
+        signal: gestureAbortController.signal,
+    };
+    const cancel = () => gestureAbortController.abort();
+    return [elements, eventOptions, cancel];
+}
+
+export { setupGesture };

package/dist/motion.dev.js

@@ -21,6 +21,14 @@
         };
     }
 
+    const isDragging = {
+        x: false,
+        y: false,
+    };
+    function isDragActive() {
+        return isDragging.y;
+    }
+
     function resolveElements(elementOrSelector, scope, selectorCache) {
         var _a;
         if (elementOrSelector instanceof Element) {
@@ -42,14 +50,6 @@
         return Array.from(elementOrSelector);
     }
 
-    const isDragging = {
-        x: false,
-        y: false,
-    };
-    function isDragActive() {
-        return isDragging.y;
-    }
-
     function addUniqueItem(arr, item) {
         if (arr.indexOf(item) === -1)
             arr.push(item);
@@ -325,7 +325,7 @@
              * 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.13.5";
+            this.version = "11.14.1";
             /**
              * 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
@@ -4162,7 +4162,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "11.13.5", `Attempting to mix Motion versions ${nextValue.version} with 11.13.5 may not work as expected.`);
+                    warnOnce(nextValue.version === "11.14.1", `Attempting to mix Motion versions ${nextValue.version} with 11.14.1 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {