@react-aria/interactions 3.8.2 → 3.9.0

package/dist/module.js

@@ -1,4 +1,4 @@
-import {mergeProps as $bx7SL$mergeProps, useSyncRef as $bx7SL$useSyncRef, useGlobalListeners as $bx7SL$useGlobalListeners, focusWithoutScrolling as $bx7SL$focusWithoutScrolling, isIOS as $bx7SL$isIOS, runAfterTransition as $bx7SL$runAfterTransition, isMac as $bx7SL$isMac, useEvent as $bx7SL$useEvent, useDescription as $bx7SL$useDescription} from "@react-aria/utils";
+import {mergeProps as $bx7SL$mergeProps, useSyncRef as $bx7SL$useSyncRef, useGlobalListeners as $bx7SL$useGlobalListeners, focusWithoutScrolling as $bx7SL$focusWithoutScrolling, isIOS as $bx7SL$isIOS, runAfterTransition as $bx7SL$runAfterTransition, useLayoutEffect as $bx7SL$useLayoutEffect, isMac as $bx7SL$isMac, useEvent as $bx7SL$useEvent, useDescription as $bx7SL$useDescription} from "@react-aria/utils";
 import $bx7SL$react, {useRef as $bx7SL$useRef, useContext as $bx7SL$useContext, useState as $bx7SL$useState, useMemo as $bx7SL$useMemo, useEffect as $bx7SL$useEffect, useCallback as $bx7SL$useCallback} from "react";
 
 function $parcel$export(e, n, v, s) {
@@ -64,11 +64,104 @@ function $14c0b72509d70225$export$b0d6fa1ab32e3295(target) {
 
 
 
+
+
 function $8a9cb279dc87e130$export$60278871457622de(event) {
     // JAWS/NVDA with Firefox.
     if (event.mozInputSource === 0 && event.isTrusted) return true;
     return event.detail === 0 && !event.pointerType;
 }
+class $8a9cb279dc87e130$export$905e7fc544a71f36 {
+    isDefaultPrevented() {
+        return this.nativeEvent.defaultPrevented;
+    }
+    preventDefault() {
+        this.defaultPrevented = true;
+        this.nativeEvent.preventDefault();
+    }
+    stopPropagation() {
+        this.nativeEvent.stopPropagation();
+        this.isPropagationStopped = ()=>true
+        ;
+    }
+    isPropagationStopped() {
+        return false;
+    }
+    persist() {
+    }
+    constructor(type, nativeEvent){
+        this.nativeEvent = nativeEvent;
+        this.target = nativeEvent.target;
+        this.currentTarget = nativeEvent.currentTarget;
+        this.relatedTarget = nativeEvent.relatedTarget;
+        this.bubbles = nativeEvent.bubbles;
+        this.cancelable = nativeEvent.cancelable;
+        this.defaultPrevented = nativeEvent.defaultPrevented;
+        this.eventPhase = nativeEvent.eventPhase;
+        this.isTrusted = nativeEvent.isTrusted;
+        this.timeStamp = nativeEvent.timeStamp;
+        this.type = type;
+    }
+}
+function $8a9cb279dc87e130$export$715c682d09d639cc(onBlur) {
+    let stateRef = $bx7SL$useRef({
+        isFocused: false,
+        onBlur: onBlur,
+        observer: null
+    });
+    stateRef.current.onBlur = onBlur;
+    // Clean up MutationObserver on unmount. See below.
+    // eslint-disable-next-line arrow-body-style
+    $bx7SL$useLayoutEffect(()=>{
+        const state = stateRef.current;
+        return ()=>{
+            if (state.observer) {
+                state.observer.disconnect();
+                state.observer = null;
+            }
+        };
+    }, []);
+    // This function is called during a React onFocus event.
+    return $bx7SL$useCallback((e1)=>{
+        // React does not fire onBlur when an element is disabled. https://github.com/facebook/react/issues/9142
+        // Most browsers fire a native focusout event in this case, except for Firefox. In that case, we use a
+        // MutationObserver to watch for the disabled attribute, and dispatch these events ourselves.
+        // For browsers that do, focusout fires before the MutationObserver, so onBlur should not fire twice.
+        if (e1.target instanceof HTMLButtonElement || e1.target instanceof HTMLInputElement || e1.target instanceof HTMLTextAreaElement || e1.target instanceof HTMLSelectElement) {
+            stateRef.current.isFocused = true;
+            let target = e1.target;
+            let onBlurHandler = (e)=>{
+                var // For backward compatibility, dispatch a (fake) React synthetic event.
+                _current, ref;
+                stateRef.current.isFocused = false;
+                if (target.disabled) (ref = (_current = stateRef.current).onBlur) === null || ref === void 0 ? void 0 : ref.call(_current, new $8a9cb279dc87e130$export$905e7fc544a71f36('blur', e));
+                // We no longer need the MutationObserver once the target is blurred.
+                if (stateRef.current.observer) {
+                    stateRef.current.observer.disconnect();
+                    stateRef.current.observer = null;
+                }
+            };
+            target.addEventListener('focusout', onBlurHandler, {
+                once: true
+            });
+            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
+                    }));
+                }
+            });
+            stateRef.current.observer.observe(target, {
+                attributes: true,
+                attributeFilter: [
+                    'disabled'
+                ]
+            });
+        }
+    }, []);
+}
 
 
 
@@ -528,8 +621,9 @@ function $f6c31cce2adf654f$var$isVirtualPointerEvent(event) {
     // Android TalkBack double tap will sometimes return a event with width and height of 1
     // and pointerType === 'mouse' so we need to check for a specific combination of event attributes.
     // Cannot use "event.pressure === 0" as the sole check due to Safari pointer events always returning pressure === 0
-    // instead of .5, see https://bugs.webkit.org/show_bug.cgi?id=206216
-    return event.width === 0 && event.height === 0 || event.width === 1 && event.height === 1 && event.pressure === 0 && event.detail === 0;
+    // instead of .5, see https://bugs.webkit.org/show_bug.cgi?id=206216. event.pointerType === 'mouse' is to distingush
+    // Talkback double tap from Windows Firefox touch screen press
+    return event.width === 0 && event.height === 0 || event.width === 1 && event.height === 1 && event.pressure === 0 && event.detail === 0 && event.pointerType === 'mouse';
 }
 
 
@@ -581,28 +675,36 @@ const $f1ab8c75478c6f73$export$3351871ee4b288b8 = /*#__PURE__*/ $bx7SL$react.for
 var $a1ea59d68270f0dd$exports = {};
 
 $parcel$export($a1ea59d68270f0dd$exports, "useFocus", () => $a1ea59d68270f0dd$export$f8168d8dd8fd66e6);
+
+
 function $a1ea59d68270f0dd$export$f8168d8dd8fd66e6(props) {
-    if (props.isDisabled) return {
-        focusProps: {
-        }
-    };
-    let onFocus, onBlur;
-    if (props.onFocus || props.onFocusChange) onFocus = (e)=>{
+    let { isDisabled: isDisabled , onFocus: onFocusProp , onBlur: onBlurProp , onFocusChange: onFocusChange  } = props;
+    const onBlur = $bx7SL$useCallback((e)=>{
         if (e.target === e.currentTarget) {
-            if (props.onFocus) props.onFocus(e);
-            if (props.onFocusChange) props.onFocusChange(true);
+            if (onBlurProp) onBlurProp(e);
+            if (onFocusChange) onFocusChange(false);
+            return true;
         }
-    };
-    if (props.onBlur || props.onFocusChange) onBlur = (e)=>{
+    }, [
+        onBlurProp,
+        onFocusChange
+    ]);
+    const onSyntheticFocus = $8a9cb279dc87e130$export$715c682d09d639cc(onBlur);
+    const onFocus = $bx7SL$useCallback((e)=>{
         if (e.target === e.currentTarget) {
-            if (props.onBlur) props.onBlur(e);
-            if (props.onFocusChange) props.onFocusChange(false);
+            if (onFocusProp) onFocusProp(e);
+            if (onFocusChange) onFocusChange(true);
+            onSyntheticFocus(e);
         }
-    };
+    }, [
+        onFocusChange,
+        onFocusProp,
+        onSyntheticFocus
+    ]);
     return {
         focusProps: {
-            onFocus: onFocus,
-            onBlur: onBlur
+            onFocus: !isDisabled && (onFocusProp || onFocusChange || onBlurProp) ? onFocus : undefined,
+            onBlur: !isDisabled && (onBlurProp || onFocusChange) ? onBlur : null
         }
     };
 }
@@ -777,29 +879,43 @@ var $9ab94262bd0047c7$exports = {};
 
 $parcel$export($9ab94262bd0047c7$exports, "useFocusWithin", () => $9ab94262bd0047c7$export$420e68273165f4ec);
 
+
 function $9ab94262bd0047c7$export$420e68273165f4ec(props) {
+    let { isDisabled: isDisabled , onBlurWithin: onBlurWithin , onFocusWithin: onFocusWithin , onFocusWithinChange: onFocusWithinChange  } = props;
     let state = $bx7SL$useRef({
         isFocusWithin: false
-    }).current;
-    if (props.isDisabled) return {
-        focusWithinProps: {
-        }
-    };
-    let onFocus = (e)=>{
-        if (!state.isFocusWithin) {
-            if (props.onFocusWithin) props.onFocusWithin(e);
-            if (props.onFocusWithinChange) props.onFocusWithinChange(true);
-            state.isFocusWithin = true;
-        }
-    };
-    let onBlur = (e)=>{
+    });
+    let onBlur = $bx7SL$useCallback((e)=>{
         // We don't want to trigger onBlurWithin and then immediately onFocusWithin again
         // when moving focus inside the element. Only trigger if the currentTarget doesn't
         // include the relatedTarget (where focus is moving).
-        if (state.isFocusWithin && !e.currentTarget.contains(e.relatedTarget)) {
-            if (props.onBlurWithin) props.onBlurWithin(e);
-            if (props.onFocusWithinChange) props.onFocusWithinChange(false);
-            state.isFocusWithin = false;
+        if (state.current.isFocusWithin && !e.currentTarget.contains(e.relatedTarget)) {
+            state.current.isFocusWithin = false;
+            if (onBlurWithin) onBlurWithin(e);
+            if (onFocusWithinChange) onFocusWithinChange(false);
+        }
+    }, [
+        onBlurWithin,
+        onFocusWithinChange,
+        state
+    ]);
+    let onSyntheticFocus = $8a9cb279dc87e130$export$715c682d09d639cc(onBlur);
+    let onFocus = $bx7SL$useCallback((e)=>{
+        if (!state.current.isFocusWithin) {
+            if (onFocusWithin) onFocusWithin(e);
+            if (onFocusWithinChange) onFocusWithinChange(true);
+            state.current.isFocusWithin = true;
+            onSyntheticFocus(e);
+        }
+    }, [
+        onFocusWithin,
+        onFocusWithinChange,
+        onSyntheticFocus
+    ]);
+    if (isDisabled) return {
+        focusWithinProps: {
+            onFocus: null,
+            onBlur: null
         }
     };
     return {