@tamagui/react-native-use-pressable 1.88.13 → 1.88.14

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+  Copyright (c) 2020 Nate Wienert
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in all
+  copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.

package/dist/esm/PressResponder.mjs

@@ -0,0 +1,247 @@
+const DELAY = "DELAY",
+  ERROR = "ERROR",
+  LONG_PRESS_DETECTED = "LONG_PRESS_DETECTED",
+  NOT_RESPONDER = "NOT_RESPONDER",
+  RESPONDER_ACTIVE_LONG_PRESS_START = "RESPONDER_ACTIVE_LONG_PRESS_START",
+  RESPONDER_ACTIVE_PRESS_START = "RESPONDER_ACTIVE_PRESS_START",
+  RESPONDER_INACTIVE_PRESS_START = "RESPONDER_INACTIVE_PRESS_START",
+  RESPONDER_GRANT = "RESPONDER_GRANT",
+  RESPONDER_RELEASE = "RESPONDER_RELEASE",
+  RESPONDER_TERMINATED = "RESPONDER_TERMINATED",
+  Transitions = Object.freeze({
+    NOT_RESPONDER: {
+      DELAY: ERROR,
+      RESPONDER_GRANT: RESPONDER_INACTIVE_PRESS_START,
+      RESPONDER_RELEASE: ERROR,
+      RESPONDER_TERMINATED: ERROR,
+      LONG_PRESS_DETECTED: ERROR
+    },
+    RESPONDER_INACTIVE_PRESS_START: {
+      DELAY: RESPONDER_ACTIVE_PRESS_START,
+      RESPONDER_GRANT: ERROR,
+      RESPONDER_RELEASE: NOT_RESPONDER,
+      RESPONDER_TERMINATED: NOT_RESPONDER,
+      LONG_PRESS_DETECTED: ERROR
+    },
+    RESPONDER_ACTIVE_PRESS_START: {
+      DELAY: ERROR,
+      RESPONDER_GRANT: ERROR,
+      RESPONDER_RELEASE: NOT_RESPONDER,
+      RESPONDER_TERMINATED: NOT_RESPONDER,
+      LONG_PRESS_DETECTED: RESPONDER_ACTIVE_LONG_PRESS_START
+    },
+    RESPONDER_ACTIVE_LONG_PRESS_START: {
+      DELAY: ERROR,
+      RESPONDER_GRANT: ERROR,
+      RESPONDER_RELEASE: NOT_RESPONDER,
+      RESPONDER_TERMINATED: NOT_RESPONDER,
+      LONG_PRESS_DETECTED: RESPONDER_ACTIVE_LONG_PRESS_START
+    },
+    ERROR: {
+      DELAY: NOT_RESPONDER,
+      RESPONDER_GRANT: RESPONDER_INACTIVE_PRESS_START,
+      RESPONDER_RELEASE: NOT_RESPONDER,
+      RESPONDER_TERMINATED: NOT_RESPONDER,
+      LONG_PRESS_DETECTED: NOT_RESPONDER
+    }
+  }),
+  isActiveSignal = signal => signal === RESPONDER_ACTIVE_PRESS_START || signal === RESPONDER_ACTIVE_LONG_PRESS_START,
+  isButtonRole = element => element.getAttribute("role") === "button",
+  isPressStartSignal = signal => signal === RESPONDER_INACTIVE_PRESS_START || signal === RESPONDER_ACTIVE_PRESS_START || signal === RESPONDER_ACTIVE_LONG_PRESS_START,
+  isTerminalSignal = signal => signal === RESPONDER_TERMINATED || signal === RESPONDER_RELEASE,
+  isValidKeyPress = event => {
+    const key = event.key,
+      role = event.target.getAttribute("role");
+    return key === "Enter" || (key === " " || key === "Spacebar") && role === "button";
+  },
+  DEFAULT_LONG_PRESS_DELAY_MS = 450,
+  DEFAULT_PRESS_DELAY_MS = 50;
+class PressResponder {
+  _touchActivatePosition = null;
+  _pressDelayTimeout = 0;
+  _selectionTerminated = !1;
+  _isPointerTouch = !1;
+  _longPressDelayTimeout = 0;
+  _longPressDispatched = !1;
+  _pressOutDelayTimeout = 0;
+  _touchState = NOT_RESPONDER;
+  _config = null;
+  _eventHandlers = null;
+  constructor(config) {
+    this.configure(config);
+  }
+  configure(config) {
+    this._config = config;
+  }
+  /**
+   * Resets any pending timers. This should be called on unmount.
+   */
+  reset() {
+    this._cancelLongPressDelayTimeout(), this._cancelPressDelayTimeout(), this._cancelPressOutDelayTimeout();
+  }
+  /**
+   * Returns a set of props to spread into the interactive element.
+   */
+  getEventHandlers() {
+    return this._eventHandlers == null && (this._eventHandlers = this._createEventHandlers()), this._eventHandlers;
+  }
+  _createEventHandlers() {
+    const start = (event, shouldDelay) => {
+        event.persist(), this._cancelPressOutDelayTimeout(), this._longPressDispatched = !1, this._selectionTerminated = !1, this._touchState = NOT_RESPONDER, this._isPointerTouch = event.nativeEvent.type === "touchstart", this._receiveSignal(RESPONDER_GRANT, event);
+        const delayPressStart = normalizeDelay(this._config.delayPressStart, 0, DEFAULT_PRESS_DELAY_MS);
+        shouldDelay !== !1 && delayPressStart > 0 ? this._pressDelayTimeout = setTimeout(() => {
+          this._receiveSignal(DELAY, event);
+        }, delayPressStart) : this._receiveSignal(DELAY, event);
+        const delayLongPress = normalizeDelay(this._config.delayLongPress, 10, DEFAULT_LONG_PRESS_DELAY_MS);
+        this._longPressDelayTimeout = setTimeout(() => {
+          this._handleLongPress(event);
+        }, delayLongPress + delayPressStart);
+      },
+      end = event => {
+        this._receiveSignal(RESPONDER_RELEASE, event);
+      },
+      keyupHandler = event => {
+        const onPress = this._config.onPress,
+          target = event.target;
+        if (this._touchState !== NOT_RESPONDER && isValidKeyPress(event)) {
+          end(event), document.removeEventListener("keyup", keyupHandler);
+          const role = target.getAttribute("role"),
+            elementType = target.tagName.toLowerCase(),
+            isNativeInteractiveElement = role === "link" || elementType === "a" || elementType === "button" || elementType === "input" || elementType === "select" || elementType === "textarea";
+          onPress != null && !isNativeInteractiveElement && onPress(event);
+        }
+      };
+    return {
+      onStartShouldSetResponder: event => {
+        const disabled = this._config.disabled;
+        return disabled && isButtonRole(event.currentTarget) && event.stopPropagation(), disabled == null ? !0 : !disabled;
+      },
+      onKeyDown: event => {
+        const disabled = this._config.disabled,
+          key = event.key,
+          target = event.target;
+        if (!disabled && isValidKeyPress(event)) {
+          this._touchState === NOT_RESPONDER && (start(event, !1), document.addEventListener("keyup", keyupHandler));
+          const role = target.getAttribute("role");
+          (key === " " || key === "Spacebar") && (role === "button" || role === "menuitem") && event.preventDefault(), event.stopPropagation();
+        }
+      },
+      onResponderGrant: event => start(event),
+      onResponderMove: event => {
+        this._config.onPressMove != null && this._config.onPressMove(event);
+        const touch = getTouchFromResponderEvent(event);
+        if (this._touchActivatePosition != null) {
+          const deltaX = this._touchActivatePosition.pageX - touch.pageX,
+            deltaY = this._touchActivatePosition.pageY - touch.pageY;
+          Math.hypot(deltaX, deltaY) > 10 && this._cancelLongPressDelayTimeout();
+        }
+      },
+      onResponderRelease: event => end(event),
+      onResponderTerminate: event => {
+        event.nativeEvent.type === "selectionchange" && (this._selectionTerminated = !0), this._receiveSignal(RESPONDER_TERMINATED, event);
+      },
+      onResponderTerminationRequest: event => {
+        const _this$_config = this._config,
+          cancelable = _this$_config.cancelable,
+          disabled = _this$_config.disabled,
+          onLongPress = _this$_config.onLongPress;
+        return !disabled && onLongPress != null && this._isPointerTouch && event.nativeEvent.type === "contextmenu" ? !1 : cancelable ?? !0;
+      },
+      // NOTE: this diverges from react-native in 3 significant ways:
+      // * The `onPress` callback is not connected to the responder system (the native
+      //  `click` event must be used but is dispatched in many scenarios where no pointers
+      //   are on the screen.) Therefore, it's possible for `onPress` to be called without
+      //   `onPress{Start,End}` being called first.
+      // * The `onPress` callback is only be called on the first ancestor of the native
+      //   `click` target that is using the PressResponder.
+      // * The event's `nativeEvent` is a `MouseEvent` not a `TouchEvent`.
+      onClick: event => {
+        const _this$_config2 = this._config,
+          disabled = _this$_config2.disabled,
+          onPress = _this$_config2.onPress;
+        disabled ? isButtonRole(event.currentTarget) && event.stopPropagation() : (event.stopPropagation(), this._longPressDispatched || this._selectionTerminated ? event.preventDefault() : onPress != null && event.altKey === !1 && onPress(event));
+      },
+      // If `onLongPress` is provided and a touch pointer is being used, prevent the
+      // default context menu from opening.
+      onContextMenu: event => {
+        const _this$_config3 = this._config,
+          disabled = _this$_config3.disabled,
+          onLongPress = _this$_config3.onLongPress;
+        disabled ? isButtonRole(event.currentTarget) && event.stopPropagation() : onLongPress != null && this._isPointerTouch && !event.defaultPrevented && (event.preventDefault(), event.stopPropagation());
+      }
+    };
+  }
+  /**
+   * Receives a state machine signal, performs side effects of the transition
+   * and stores the new state. Validates the transition as well.
+   */
+  _receiveSignal(signal, event) {
+    const prevState = this._touchState;
+    let nextState = null;
+    Transitions[prevState] != null && (nextState = Transitions[prevState][signal]), !(this._touchState === NOT_RESPONDER && signal === RESPONDER_RELEASE) && (nextState == null || nextState === ERROR ? console.error(`PressResponder: Invalid signal ${signal} for state ${prevState} on responder`) : prevState !== nextState && (this._performTransitionSideEffects(prevState, nextState, signal, event), this._touchState = nextState));
+  }
+  /**
+   * Performs a transition between touchable states and identify any activations
+   * or deactivations (and callback invocations).
+   */
+  _performTransitionSideEffects(prevState, nextState, signal, event) {
+    if (isTerminalSignal(signal) && (setTimeout(() => {
+      this._isPointerTouch = !1;
+    }, 0), this._touchActivatePosition = null, this._cancelLongPressDelayTimeout()), isPressStartSignal(prevState) && signal === LONG_PRESS_DETECTED) {
+      const onLongPress = this._config.onLongPress;
+      onLongPress != null && event.nativeEvent.key == null && (onLongPress(event), this._longPressDispatched = !0);
+    }
+    const isPrevActive = isActiveSignal(prevState),
+      isNextActive = isActiveSignal(nextState);
+    if (!isPrevActive && isNextActive ? this._activate(event) : isPrevActive && !isNextActive && this._deactivate(event), isPressStartSignal(prevState) && signal === RESPONDER_RELEASE) {
+      const _this$_config4 = this._config,
+        _onLongPress = _this$_config4.onLongPress;
+      _this$_config4.onPress != null && (_onLongPress != null && prevState === RESPONDER_ACTIVE_LONG_PRESS_START || isNextActive || isPrevActive || (this._activate(event), this._deactivate(event)));
+    }
+    this._cancelPressDelayTimeout();
+  }
+  _activate(event) {
+    const _this$_config5 = this._config,
+      onPressChange = _this$_config5.onPressChange,
+      onPressStart = _this$_config5.onPressStart,
+      touch = getTouchFromResponderEvent(event);
+    this._touchActivatePosition = {
+      pageX: touch.pageX,
+      pageY: touch.pageY
+    }, onPressStart?.(event), onPressChange?.(!0);
+  }
+  _deactivate(event) {
+    const _this$_config6 = this._config,
+      onPressChange = _this$_config6.onPressChange,
+      onPressEnd = _this$_config6.onPressEnd;
+    function end() {
+      onPressEnd?.(event), onPressChange?.(!1);
+    }
+    const delayPressEnd = normalizeDelay(this._config.delayPressEnd);
+    delayPressEnd > 0 ? this._pressOutDelayTimeout = setTimeout(() => {
+      end();
+    }, delayPressEnd) : end();
+  }
+  _handleLongPress(event) {
+    (this._touchState === RESPONDER_ACTIVE_PRESS_START || this._touchState === RESPONDER_ACTIVE_LONG_PRESS_START) && this._receiveSignal(LONG_PRESS_DETECTED, event);
+  }
+  _cancelLongPressDelayTimeout() {
+    this._longPressDelayTimeout != null && (clearTimeout(this._longPressDelayTimeout), this._longPressDelayTimeout = null);
+  }
+  _cancelPressDelayTimeout() {
+    this._pressDelayTimeout != null && (clearTimeout(this._pressDelayTimeout), this._pressDelayTimeout = null);
+  }
+  _cancelPressOutDelayTimeout() {
+    this._pressOutDelayTimeout != null && (clearTimeout(this._pressOutDelayTimeout), this._pressOutDelayTimeout = null);
+  }
+}
+function normalizeDelay(delay, min, fallback) {
+  return min === void 0 && (min = 0), fallback === void 0 && (fallback = 0), Math.max(min, delay ?? fallback);
+}
+function getTouchFromResponderEvent(event) {
+  const _event$nativeEvent = event.nativeEvent,
+    changedTouches = _event$nativeEvent.changedTouches,
+    touches = _event$nativeEvent.touches;
+  return touches != null && touches.length > 0 ? touches[0] : changedTouches != null && changedTouches.length > 0 ? changedTouches[0] : event.nativeEvent;
+}
+export { PressResponder as default };

package/dist/esm/index.mjs

@@ -0,0 +1,13 @@
+import { useDebugValue, useEffect, useRef } from "react";
+import PressResponder from "./PressResponder.mjs";
+function usePressEvents(_, config) {
+  const pressResponderRef = useRef(null);
+  pressResponderRef.current == null && (pressResponderRef.current = new PressResponder(config));
+  const pressResponder = pressResponderRef.current;
+  return useEffect(() => {
+    pressResponder.configure(config);
+  }, [config, pressResponder]), useEffect(() => () => {
+    pressResponder.reset();
+  }, [pressResponder]), useDebugValue(config), pressResponder.getEventHandlers();
+}
+export { usePressEvents };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/react-native-use-pressable",
-  "version": "1.88.13",
+  "version": "1.88.14",
   "types": "./types/index.d.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -30,7 +30,7 @@
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.88.13",
+    "@tamagui/build": "1.88.14",
     "react": "^18.2.0"
   },
   "publishConfig": {