@react-aria/interactions 3.15.1 → 3.17.0

package/src/usePress.ts

@@ -16,8 +16,8 @@
 // See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
 
 import {disableTextSelection, restoreTextSelection} from './textSelection';
-import {DOMAttributes, FocusableElement, PointerType, PressEvents} from '@react-types/shared';
-import {focusWithoutScrolling, isVirtualClick, isVirtualPointerEvent, mergeProps, useGlobalListeners, useSyncRef} from '@react-aria/utils';
+import {DOMAttributes, FocusableElement, PressEvent as IPressEvent, PointerType, PressEvents} from '@react-types/shared';
+import {focusWithoutScrolling, isVirtualClick, isVirtualPointerEvent, mergeProps, useEffectEvent, useGlobalListeners, useSyncRef} from '@react-aria/utils';
 import {PressResponderContext} from './context';
 import {RefObject, useContext, useEffect, useMemo, useRef, useState} from 'react';
 
@@ -84,6 +84,35 @@ function usePressResponderContext(props: PressHookProps): PressHookProps {
   return props;
 }
 
+class PressEvent implements IPressEvent {
+  type: IPressEvent['type'];
+  pointerType: PointerType;
+  target: Element;
+  shiftKey: boolean;
+  ctrlKey: boolean;
+  metaKey: boolean;
+  altKey: boolean;
+  #shouldStopPropagation = true;
+
+  constructor(type: IPressEvent['type'], pointerType: PointerType, originalEvent: EventBase) {
+    this.type = type;
+    this.pointerType = pointerType;
+    this.target = originalEvent.currentTarget as Element;
+    this.shiftKey = originalEvent.shiftKey;
+    this.metaKey = originalEvent.metaKey;
+    this.ctrlKey = originalEvent.ctrlKey;
+    this.altKey = originalEvent.altKey;
+  }
+
+  continuePropagation() {
+    this.#shouldStopPropagation = false;
+  }
+
+  get shouldStopPropagation() {
+    return this.#shouldStopPropagation;
+  }
+}
+
 /**
  * Handles press interactions across mouse, touch, keyboard, and screen readers.
  * It normalizes behavior across browsers and platforms, and handles many nuances
@@ -105,8 +134,6 @@ export function usePress(props: PressHookProps): PressResult {
     ref: _, // Removing `ref` from `domProps` because TypeScript is dumb
     ...domProps
   } = usePressResponderContext(props);
-  let propsRef = useRef<PressHookProps>(null);
-  propsRef.current = {onPress, onPressChange, onPressStart, onPressEnd, onPressUp, isDisabled, shouldCancelOnPointerExit};
 
   let [isPressed, setPressed] = useState(false);
   let ref = useRef<PressState>({
@@ -122,129 +149,122 @@ export function usePress(props: PressHookProps): PressResult {
 
   let {addGlobalListener, removeAllGlobalListeners} = useGlobalListeners();
 
-  let pressProps = useMemo(() => {
+  let triggerPressStart = useEffectEvent((originalEvent: EventBase, pointerType: PointerType) => {
     let state = ref.current;
-    let triggerPressStart = (originalEvent: EventBase, pointerType: PointerType) => {
-      let {onPressStart, onPressChange, isDisabled} = propsRef.current;
-      if (isDisabled || state.didFirePressStart) {
-        return;
-      }
+    if (isDisabled || state.didFirePressStart) {
+      return;
+    }
 
-      if (onPressStart) {
-        onPressStart({
-          type: 'pressstart',
-          pointerType,
-          target: originalEvent.currentTarget as Element,
-          shiftKey: originalEvent.shiftKey,
-          metaKey: originalEvent.metaKey,
-          ctrlKey: originalEvent.ctrlKey,
-          altKey: originalEvent.altKey
-        });
-      }
+    let shouldStopPropagation = true;
+    if (onPressStart) {
+      let event = new PressEvent('pressstart', pointerType, originalEvent);
+      onPressStart(event);
+      shouldStopPropagation = event.shouldStopPropagation;
+    }
 
-      if (onPressChange) {
-        onPressChange(true);
-      }
+    if (onPressChange) {
+      onPressChange(true);
+    }
 
-      state.didFirePressStart = true;
-      setPressed(true);
-    };
+    state.didFirePressStart = true;
+    setPressed(true);
+    return shouldStopPropagation;
+  });
 
-    let triggerPressEnd = (originalEvent: EventBase, pointerType: PointerType, wasPressed = true) => {
-      let {onPressEnd, onPressChange, onPress, isDisabled} = propsRef.current;
-      if (!state.didFirePressStart) {
-        return;
-      }
+  let triggerPressEnd = useEffectEvent((originalEvent: EventBase, pointerType: PointerType, wasPressed = true) => {
+    let state = ref.current;
+    if (!state.didFirePressStart) {
+      return;
+    }
 
-      state.ignoreClickAfterPress = true;
-      state.didFirePressStart = false;
-
-      if (onPressEnd) {
-        onPressEnd({
-          type: 'pressend',
-          pointerType,
-          target: originalEvent.currentTarget as Element,
-          shiftKey: originalEvent.shiftKey,
-          metaKey: originalEvent.metaKey,
-          ctrlKey: originalEvent.ctrlKey,
-          altKey: originalEvent.altKey
-        });
-      }
+    state.ignoreClickAfterPress = true;
+    state.didFirePressStart = false;
 
-      if (onPressChange) {
-        onPressChange(false);
-      }
+    let shouldStopPropagation = true;
+    if (onPressEnd) {
+      let event = new PressEvent('pressend', pointerType, originalEvent);
+      onPressEnd(event);
+      shouldStopPropagation = event.shouldStopPropagation;
+    }
 
-      setPressed(false);
-
-      if (onPress && wasPressed && !isDisabled) {
-        onPress({
-          type: 'press',
-          pointerType,
-          target: originalEvent.currentTarget as Element,
-          shiftKey: originalEvent.shiftKey,
-          metaKey: originalEvent.metaKey,
-          ctrlKey: originalEvent.ctrlKey,
-          altKey: originalEvent.altKey
-        });
-      }
-    };
+    if (onPressChange) {
+      onPressChange(false);
+    }
 
-    let triggerPressUp = (originalEvent: EventBase, pointerType: PointerType) => {
-      let {onPressUp, isDisabled} = propsRef.current;
-      if (isDisabled) {
-        return;
-      }
+    setPressed(false);
 
-      if (onPressUp) {
-        onPressUp({
-          type: 'pressup',
-          pointerType,
-          target: originalEvent.currentTarget as Element,
-          shiftKey: originalEvent.shiftKey,
-          metaKey: originalEvent.metaKey,
-          ctrlKey: originalEvent.ctrlKey,
-          altKey: originalEvent.altKey
-        });
-      }
-    };
+    if (onPress && wasPressed && !isDisabled) {
+      let event = new PressEvent('press', pointerType, originalEvent);
+      onPress(event);
+      shouldStopPropagation &&= event.shouldStopPropagation;
+    }
 
-    let cancel = (e: EventBase) => {
-      if (state.isPressed) {
-        if (state.isOverTarget) {
-          triggerPressEnd(createEvent(state.target, e), state.pointerType, false);
-        }
-        state.isPressed = false;
-        state.isOverTarget = false;
-        state.activePointerId = null;
-        state.pointerType = null;
-        removeAllGlobalListeners();
-        if (!allowTextSelectionOnPress) {
-          restoreTextSelection(state.target);
-        }
+    return shouldStopPropagation;
+  });
+
+  let triggerPressUp = useEffectEvent((originalEvent: EventBase, pointerType: PointerType) => {
+    if (isDisabled) {
+      return;
+    }
+
+    if (onPressUp) {
+      let event = new PressEvent('pressup', pointerType, originalEvent);
+      onPressUp(event);
+      return event.shouldStopPropagation;
+    }
+
+    return true;
+  });
+
+  let cancel = useEffectEvent((e: EventBase) => {
+    let state = ref.current;
+    if (state.isPressed) {
+      if (state.isOverTarget) {
+        triggerPressEnd(createEvent(state.target, e), state.pointerType, false);
       }
-    };
+      state.isPressed = false;
+      state.isOverTarget = false;
+      state.activePointerId = null;
+      state.pointerType = null;
+      removeAllGlobalListeners();
+      if (!allowTextSelectionOnPress) {
+        restoreTextSelection(state.target);
+      }
+    }
+  });
+
+  let cancelOnPointerExit = useEffectEvent((e: EventBase) => {
+    if (shouldCancelOnPointerExit) {
+      cancel(e);
+    }
+  });
 
+  let pressProps = useMemo(() => {
+    let state = ref.current;
     let pressProps: DOMAttributes = {
       onKeyDown(e) {
         if (isValidKeyboardEvent(e.nativeEvent, e.currentTarget) && e.currentTarget.contains(e.target as Element)) {
           if (shouldPreventDefaultKeyboard(e.target as Element, e.key)) {
             e.preventDefault();
           }
-          e.stopPropagation();
 
           // If the event is repeating, it may have started on a different element
           // after which focus moved to the current element. Ignore these events and
           // only handle the first key down event.
+          let shouldStopPropagation = true;
           if (!state.isPressed && !e.repeat) {
             state.target = e.currentTarget;
             state.isPressed = true;
-            triggerPressStart(e, 'keyboard');
+            shouldStopPropagation = triggerPressStart(e, 'keyboard');
 
             // Focus may move before the key up event, so register the event on the document
             // instead of the same element where the key down event occurred.
             addGlobalListener(document, 'keyup', onKeyUp, false);
           }
+
+          if (shouldStopPropagation) {
+            e.stopPropagation();
+          }
         } else if (e.key === 'Enter' && isHTMLAnchorLink(e.currentTarget)) {
           // If the target is a link, we won't have handled this above because we want the default
           // browser behavior to open the link when pressing Enter. But we still need to prevent
@@ -263,7 +283,7 @@ export function usePress(props: PressHookProps): PressResult {
         }
 
         if (e && e.button === 0) {
-          e.stopPropagation();
+          let shouldStopPropagation = true;
           if (isDisabled) {
             e.preventDefault();
           }
@@ -276,13 +296,17 @@ export function usePress(props: PressHookProps): PressResult {
               focusWithoutScrolling(e.currentTarget);
             }
 
-            triggerPressStart(e, 'virtual');
-            triggerPressUp(e, 'virtual');
-            triggerPressEnd(e, 'virtual');
+            let stopPressStart = triggerPressStart(e, 'virtual');
+            let stopPressUp = triggerPressUp(e, 'virtual');
+            let stopPressEnd = triggerPressEnd(e, 'virtual');
+            shouldStopPropagation = stopPressStart && stopPressUp && stopPressEnd;
           }
 
           state.ignoreEmulatedMouseEvents = false;
           state.ignoreClickAfterPress = false;
+          if (shouldStopPropagation) {
+            e.stopPropagation();
+          }
         }
       }
     };
@@ -292,13 +316,16 @@ export function usePress(props: PressHookProps): PressResult {
         if (shouldPreventDefaultKeyboard(e.target as Element, e.key)) {
           e.preventDefault();
         }
-        e.stopPropagation();
 
         state.isPressed = false;
         let target = e.target as Element;
-        triggerPressEnd(createEvent(state.target, e), 'keyboard', state.target.contains(target));
+        let shouldStopPropagation = triggerPressEnd(createEvent(state.target, e), 'keyboard', state.target.contains(target));
         removeAllGlobalListeners();
 
+        if (shouldStopPropagation) {
+          e.stopPropagation();
+        }
+
         // If the target is a link, trigger the click method to open the URL,
         // but defer triggering pressEnd until onClick event handler.
         if (state.target instanceof HTMLElement && state.target.contains(target) && (isHTMLAnchorLink(state.target) || state.target.getAttribute('role') === 'link')) {
@@ -331,7 +358,7 @@ export function usePress(props: PressHookProps): PressResult {
 
         state.pointerType = e.pointerType;
 
-        e.stopPropagation();
+        let shouldStopPropagation = true;
         if (!state.isPressed) {
           state.isPressed = true;
           state.isOverTarget = true;
@@ -346,12 +373,16 @@ export function usePress(props: PressHookProps): PressResult {
             disableTextSelection(state.target);
           }
 
-          triggerPressStart(e, state.pointerType);
+          shouldStopPropagation = triggerPressStart(e, state.pointerType);
 
           addGlobalListener(document, 'pointermove', onPointerMove, false);
           addGlobalListener(document, 'pointerup', onPointerUp, false);
           addGlobalListener(document, 'pointercancel', onPointerCancel, false);
         }
+
+        if (shouldStopPropagation) {
+          e.stopPropagation();
+        }
       };
 
       pressProps.onMouseDown = (e) => {
@@ -401,9 +432,7 @@ export function usePress(props: PressHookProps): PressResult {
         } else if (state.isOverTarget) {
           state.isOverTarget = false;
           triggerPressEnd(createEvent(state.target, e), state.pointerType, false);
-          if (propsRef.current.shouldCancelOnPointerExit) {
-            cancel(e);
-          }
+          cancelOnPointerExit(e);
         }
       };
 
@@ -451,8 +480,8 @@ export function usePress(props: PressHookProps): PressResult {
           e.preventDefault();
         }
 
-        e.stopPropagation();
         if (state.ignoreEmulatedMouseEvents) {
+          e.stopPropagation();
           return;
         }
 
@@ -465,7 +494,10 @@ export function usePress(props: PressHookProps): PressResult {
           focusWithoutScrolling(e.currentTarget);
         }
 
-        triggerPressStart(e, state.pointerType);
+        let shouldStopPropagation = triggerPressStart(e, state.pointerType);
+        if (shouldStopPropagation) {
+          e.stopPropagation();
+        }
 
         addGlobalListener(document, 'mouseup', onMouseUp, false);
       };
@@ -475,10 +507,14 @@ export function usePress(props: PressHookProps): PressResult {
           return;
         }
 
-        e.stopPropagation();
+        let shouldStopPropagation = true;
         if (state.isPressed && !state.ignoreEmulatedMouseEvents) {
           state.isOverTarget = true;
-          triggerPressStart(e, state.pointerType);
+          shouldStopPropagation = triggerPressStart(e, state.pointerType);
+        }
+
+        if (shouldStopPropagation) {
+          e.stopPropagation();
         }
       };
 
@@ -487,13 +523,15 @@ export function usePress(props: PressHookProps): PressResult {
           return;
         }
 
-        e.stopPropagation();
+        let shouldStopPropagation = true;
         if (state.isPressed && !state.ignoreEmulatedMouseEvents) {
           state.isOverTarget = false;
-          triggerPressEnd(e, state.pointerType, false);
-          if (propsRef.current.shouldCancelOnPointerExit) {
-            cancel(e);
-          }
+          shouldStopPropagation = triggerPressEnd(e, state.pointerType, false);
+          cancelOnPointerExit(e);
+        }
+
+        if (shouldStopPropagation) {
+          e.stopPropagation();
         }
       };
 
@@ -535,7 +573,6 @@ export function usePress(props: PressHookProps): PressResult {
           return;
         }
 
-        e.stopPropagation();
         let touch = getTouchFromEvent(e.nativeEvent);
         if (!touch) {
           return;
@@ -557,7 +594,10 @@ export function usePress(props: PressHookProps): PressResult {
           disableTextSelection(state.target);
         }
 
-        triggerPressStart(e, state.pointerType);
+        let shouldStopPropagation = triggerPressStart(e, state.pointerType);
+        if (shouldStopPropagation) {
+          e.stopPropagation();
+        }
 
         addGlobalListener(window, 'scroll', onScroll, true);
       };
@@ -567,23 +607,26 @@ export function usePress(props: PressHookProps): PressResult {
           return;
         }
 
-        e.stopPropagation();
         if (!state.isPressed) {
+          e.stopPropagation();
           return;
         }
 
         let touch = getTouchById(e.nativeEvent, state.activePointerId);
+        let shouldStopPropagation = true;
         if (touch && isOverTarget(touch, e.currentTarget)) {
           if (!state.isOverTarget) {
             state.isOverTarget = true;
-            triggerPressStart(e, state.pointerType);
+            shouldStopPropagation = triggerPressStart(e, state.pointerType);
           }
         } else if (state.isOverTarget) {
           state.isOverTarget = false;
-          triggerPressEnd(e, state.pointerType, false);
-          if (propsRef.current.shouldCancelOnPointerExit) {
-            cancel(e);
-          }
+          shouldStopPropagation = triggerPressEnd(e, state.pointerType, false);
+          cancelOnPointerExit(e);
+        }
+
+        if (shouldStopPropagation) {
+          e.stopPropagation();
         }
       };
 
@@ -592,17 +635,22 @@ export function usePress(props: PressHookProps): PressResult {
           return;
         }
 
-        e.stopPropagation();
         if (!state.isPressed) {
+          e.stopPropagation();
           return;
         }
 
         let touch = getTouchById(e.nativeEvent, state.activePointerId);
+        let shouldStopPropagation = true;
         if (touch && isOverTarget(touch, e.currentTarget)) {
           triggerPressUp(e, state.pointerType);
-          triggerPressEnd(e, state.pointerType);
+          shouldStopPropagation = triggerPressEnd(e, state.pointerType);
         } else if (state.isOverTarget) {
-          triggerPressEnd(e, state.pointerType, false);
+          shouldStopPropagation = triggerPressEnd(e, state.pointerType, false);
+        }
+
+        if (shouldStopPropagation) {
+          e.stopPropagation();
         }
 
         state.isPressed = false;
@@ -648,7 +696,18 @@ export function usePress(props: PressHookProps): PressResult {
     }
 
     return pressProps;
-  }, [addGlobalListener, isDisabled, preventFocusOnPress, removeAllGlobalListeners, allowTextSelectionOnPress]);
+  }, [
+    addGlobalListener,
+    isDisabled,
+    preventFocusOnPress,
+    removeAllGlobalListeners,
+    allowTextSelectionOnPress,
+    cancel,
+    cancelOnPointerExit,
+    triggerPressEnd,
+    triggerPressStart,
+    triggerPressUp
+  ]);
 
   // Remove user-select: none in case component unmounts immediately after pressStart
   // eslint-disable-next-line arrow-body-style
@@ -779,7 +838,7 @@ function shouldPreventDefaultKeyboard(target: Element, key: string) {
   }
 
   if (target instanceof HTMLButtonElement) {
-    return target.type !== 'submit';
+    return target.type !== 'submit' && target.type !== 'reset';
   }
 
   return true;

package/src/utils.ts

@@ -11,7 +11,7 @@
  */
 
 import {FocusEvent as ReactFocusEvent, useCallback, useRef} from 'react';
-import {useLayoutEffect} from '@react-aria/utils';
+import {useEffectEvent, useLayoutEffect} from '@react-aria/utils';
 
 export class SyntheticFocusEvent<Target = Element> implements ReactFocusEvent<Target> {
   nativeEvent: FocusEvent;
@@ -64,10 +64,8 @@ export class SyntheticFocusEvent<Target = Element> implements ReactFocusEvent<Ta
 export function useSyntheticBlurEvent<Target = Element>(onBlur: (e: ReactFocusEvent<Target>) => void) {
   let stateRef = useRef({
     isFocused: false,
-    onBlur,
     observer: null as MutationObserver
   });
-  stateRef.current.onBlur = onBlur;
 
   // Clean up MutationObserver on unmount. See below.
   // eslint-disable-next-line arrow-body-style
@@ -81,6 +79,10 @@ export function useSyntheticBlurEvent<Target = Element>(onBlur: (e: ReactFocusEv
     };
   }, []);
 
+  let dispatchBlur = useEffectEvent((e: SyntheticFocusEvent<Target>) => {
+    onBlur?.(e);
+  });
+
   // This function is called during a React onFocus event.
   return useCallback((e: ReactFocusEvent<Target>) => {
     // React does not fire onBlur when an element is disabled. https://github.com/facebook/react/issues/9142
@@ -101,7 +103,7 @@ export function useSyntheticBlurEvent<Target = Element>(onBlur: (e: ReactFocusEv
 
         if (target.disabled) {
           // For backward compatibility, dispatch a (fake) React synthetic event.
-          stateRef.current.onBlur?.(new SyntheticFocusEvent('blur', e));
+          dispatchBlur(new SyntheticFocusEvent('blur', e));
         }
 
         // We no longer need the MutationObserver once the target is blurred.
@@ -116,12 +118,13 @@ export function useSyntheticBlurEvent<Target = Element>(onBlur: (e: ReactFocusEv
       stateRef.current.observer = new MutationObserver(() => {
         if (stateRef.current.isFocused && target.disabled) {
           stateRef.current.observer.disconnect();
-          target.dispatchEvent(new FocusEvent('blur'));
-          target.dispatchEvent(new FocusEvent('focusout', {bubbles: true}));
+          let relatedTargetEl = target === document.activeElement ? null : document.activeElement;
+          target.dispatchEvent(new FocusEvent('blur', {relatedTarget: relatedTargetEl}));
+          target.dispatchEvent(new FocusEvent('focusout', {bubbles: true, relatedTarget: relatedTargetEl}));
         }
       });
 
       stateRef.current.observer.observe(target, {attributes: true, attributeFilter: ['disabled']});
     }
-  }, []);
+  }, [dispatchBlur]);
 }