@react-aria/interactions 3.4.0 → 3.7.0

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes, RefObject, ReactElement, ReactNode, FocusEvent, SyntheticEvent } from "react";
-import { PressEvents, FocusEvents, HoverEvents, KeyboardEvents, MoveEvents, ScrollEvents } from "@react-types/shared";
+import { PressEvents, FocusEvents, HoverEvents, KeyboardEvents, MoveEvents, ScrollEvents, LongPressEvent } from "@react-types/shared";
 export interface PressProps extends PressEvents {
     /** Whether the target is in a controlled press state (e.g. an overlay it triggers is open). */
     isPressed?: boolean;
@@ -7,6 +7,15 @@ export interface PressProps extends PressEvents {
     isDisabled?: boolean;
     /** Whether the target should not receive focus on press. */
     preventFocusOnPress?: boolean;
+    /**
+     * Whether press events should be canceled when the pointer leaves the target while pressed.
+     * By default, this is `false`, which means if the pointer returns back over the target while
+     * still pressed, onPressStart will be fired again. If set to `true`, the press is canceled
+     * when the pointer leaves the target and onPressStart will not be fired if the pointer returns.
+     */
+    shouldCancelOnPointerExit?: boolean;
+    /** Whether text selection should be enabled on the pressable element. */
+    allowTextSelectionOnPress?: boolean;
 }
 export interface PressHookProps extends PressProps {
     /** A ref to the target element. */
@@ -46,6 +55,7 @@ interface FocusResult {
  */
 export function useFocus(props: FocusProps): FocusResult;
 type Modality = 'keyboard' | 'pointer' | 'virtual';
+type FocusVisibleHandler = (isFocusVisible: boolean) => void;
 interface FocusVisibleProps {
     /** Whether the element is a text input. */
     isTextInput?: boolean;
@@ -70,6 +80,12 @@ export function useInteractionModality(): Modality;
  * Manages focus visible state for the page, and subscribes individual components for updates.
  */
 export function useFocusVisible(props?: FocusVisibleProps): FocusVisibleResult;
+/**
+ * Listens for trigger change and reports if focus is visible (i.e., modality is not pointer).
+ */
+export function useFocusVisibleListener(fn: FocusVisibleHandler, deps: ReadonlyArray<any>, opts?: {
+    isTextInput?: boolean;
+}): void;
 interface FocusWithinProps {
     /** Whether the focus within events should be disabled. */
     isDisabled?: boolean;
@@ -105,6 +121,7 @@ export function useHover(props: HoverProps): HoverResult;
 interface InteractOutsideProps {
     ref: RefObject<Element>;
     onInteractOutside?: (e: SyntheticEvent) => void;
+    onInteractOutsideStart?: (e: SyntheticEvent) => void;
     /** Whether the interact outside events should be disabled. */
     isDisabled?: boolean;
 }
@@ -140,5 +157,40 @@ export interface ScrollWheelProps extends ScrollEvents {
     isDisabled?: boolean;
 }
 export function useScrollWheel(props: ScrollWheelProps, ref: RefObject<HTMLElement>): void;
+interface LongPressProps {
+    /** Whether long press events should be disabled. */
+    isDisabled?: boolean;
+    /** Handler that is called when a long press interaction starts. */
+    onLongPressStart?: (e: LongPressEvent) => void;
+    /**
+     * Handler that is called when a long press interaction ends, either
+     * over the target or when the pointer leaves the target.
+     */
+    onLongPressEnd?: (e: LongPressEvent) => void;
+    /**
+     * Handler that is called when the threshold time is met while
+     * the press is over the target.
+     */
+    onLongPress?: (e: LongPressEvent) => void;
+    /**
+     * The amount of time in milliseconds to wait before triggering a long press.
+     * @default 500ms
+     */
+    threshold?: number;
+    /**
+     * A description for assistive techology users indicating that a long press
+     * action is available, e.g. "Long press to open menu".
+     */
+    accessibilityDescription?: string;
+}
+interface LongPressResult {
+    /** Props to spread on the target element. */
+    longPressProps: HTMLAttributes<HTMLElement>;
+}
+/**
+ * Handles long press interactions across mouse and touch devices. Supports a customizable time threshold,
+ * accessibility description, and normalizes behavior across browsers and devices.
+ */
+export function useLongPress(props: LongPressProps): LongPressResult;
 
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":"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","sources":["./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/textSelection.ts","./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/utils.ts","./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/context.ts","./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/usePress.ts","./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/Pressable.tsx","./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/PressResponder.tsx","./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/useFocus.ts","./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/useFocusVisible.ts","./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/useFocusWithin.ts","./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/useHover.ts","./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/useInteractOutside.ts","./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/createEventHandler.ts","./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/useKeyboard.ts","./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/useMove.ts","./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/useScrollWheel.ts","./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":"A;A;AGwBA,2BAA4B,SAAQ,WAAW;IAC7C,+FAA+F;IAC/F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4DAA4D;IAC5D,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;A;A;A;A;OAKG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,yEAAyE;IACzE,yBAAyB,CAAC,EAAE,OAAO,CAAA;CACpC;AAED,+BAAgC,SAAQ,UAAU;IAChD,mCAAmC;IACnC,GAAG,CAAC,EAAE,UAAU,WAAW,CAAC,CAAA;CAC7B;AAsBD;IACE,+CAA+C;IAC/C,SAAS,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,UAAU,EAAE,eAAe,WAAW,CAAC,CAAA;CACxC;AAeD;A;A;A;GAIG;AACH,yBAAyB,KAAK,EAAE,cAAc,GAAG,WAAW,CAsjB3D;ACloBD,wBAAyB,SAAQ,UAAU;IACzC,QAAQ,EAAE,aAAa,eAAe,WAAW,CAAC,EAAE,MAAM,CAAC,CAAA;CAC5D;AAED,OAAO,MAAM,6FAUX,CAAC;ACbH,6BAA8B,SAAQ,UAAU;IAC9C,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,OAAO,MAAM,uGA8BX,CAAC;AC/BH,oBAAqB,SAAQ,WAAW;IACtC,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED;IACE,+CAA+C;IAC/C,UAAU,EAAE,eAAe,WAAW,CAAC,CAAA;CACxC;AAED;A;A;GAGG;AACH,yBAAyB,KAAK,EAAE,UAAU,GAAG,WAAW,CAwCvD;ACrDD,gBAAgB,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;AAGnD,2BAA2B,CAAC,gBAAgB,OAAO,KAAK,IAAI,CAAC;AAC7D;IACE,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;IACE,kDAAkD;IAClD,gBAAgB,OAAO,CAAA;CACxB;AA8HD;A;GAEG;AACH,kCAAkC,OAAO,CAExC;AAED,0CAA0C,QAAQ,CAEjD;AAED,uCAAuC,QAAQ,EAAE,QAAQ,QAGxD;AAED;A;GAEG;AACH,0CAA0C,QAAQ,CAgBjD;AAUD;A;GAEG;AACH,gCAAgC,KAAK,GAAE,iBAAsB,GAAG,kBAAkB,CAQjF;AAED;A;GAEG;AACH,wCAAwC,EAAE,EAAE,mBAAmB,EAAE,IAAI,EAAE,aAAa,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,EAAE;IAAC,WAAW,CAAC,EAAE,OAAO,CAAA;CAAC,GAAG,IAAI,CAa/H;ACxND;IACE,0DAA0D;IAC1D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qFAAqF;IACrF,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,qFAAqF;IACrF,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,sEAAsE;IACtE,mBAAmB,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,KAAK,IAAI,CAAA;CACvD;AAED;IACE,+CAA+C;IAC/C,gBAAgB,EAAE,eAAe,WAAW,CAAC,CAAA;CAC9C;AAED;A;GAEG;AACH,+BAA+B,KAAK,EAAE,gBAAgB,GAAG,iBAAiB,CA8CzE;AChED,2BAA4B,SAAQ,WAAW;IAC7C,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED;IACE,6CAA6C;IAC7C,UAAU,EAAE,eAAe,WAAW,CAAC,CAAC;IACxC,SAAS,EAAE,OAAO,CAAA;CACnB;AAoDD;A;A;GAGG;AACH,yBAAyB,KAAK,EAAE,UAAU,GAAG,WAAW,CAuHvD;ACzLD;IACE,GAAG,EAAE,UAAU,OAAO,CAAC,CAAC;IACxB,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAChD,sBAAsB,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IACrD,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED;A;A;GAGG;AACH,mCAAmC,KAAK,EAAE,oBAAoB,QA0E7D;AEzFD,8BAA+B,SAAQ,cAAc;IACnD,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED;IACE,+CAA+C;IAC/C,aAAa,EAAE,eAAe,WAAW,CAAC,CAAA;CAC3C;AAED;A;GAEG;AACH,4BAA4B,KAAK,EAAE,aAAa,GAAG,cAAc,CAOhE;ACnBD;IACE,6CAA6C;IAC7C,SAAS,EAAE,eAAe,WAAW,CAAC,CAAA;CACvC;AAED;A;A;A;GAIG;AACH,wBAAwB,KAAK,EAAE,UAAU,GAAG,UAAU,CA0LrD;ACrMD,iCAAkC,SAAQ,YAAY;IACpD,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAGD,+BAA+B,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAE,UAAU,WAAW,CAAC,GAAG,IAAI,CAkBzF;ACvBD;IACE,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAC/C;A;A;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C;A;A;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C;A;A;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;A;A;OAGG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAA;CAClC;AAED;IACE,6CAA6C;IAC7C,cAAc,EAAE,eAAe,WAAW,CAAC,CAAA;CAC5C;AAID;A;A;GAGG;AACH,6BAA6B,KAAK,EAAE,cAAc,GAAG,eAAe,CAwEnE","sources":["./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/textSelection.ts","./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/utils.ts","./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/context.ts","./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/usePress.ts","./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/Pressable.tsx","./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/PressResponder.tsx","./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/useFocus.ts","./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/useFocusVisible.ts","./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/useFocusWithin.ts","./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/useHover.ts","./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/useInteractOutside.ts","./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/createEventHandler.ts","./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/useKeyboard.ts","./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/useMove.ts","./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/useScrollWheel.ts","./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/useLongPress.ts","./packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/interactions",
-  "version": "3.4.0",
+  "version": "3.7.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -18,8 +18,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@react-aria/utils": "^3.8.0",
-    "@react-types/shared": "^3.6.0"
+    "@react-aria/utils": "^3.10.0",
+    "@react-types/shared": "^3.10.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0-rc.1"
@@ -27,5 +27,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3aae08e7d8a75382bedcddac7c86107e40db9296"
+  "gitHead": "896eabe5521a0349a675c4773ed7629addd4b8c4"
 }

package/src/PressResponder.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {mergeProps} from '@react-aria/utils';
+import {mergeProps, useSyncRef} from '@react-aria/utils';
 import {PressProps} from './usePress';
 import {PressResponderContext} from './context';
 import React, {ReactNode, RefObject, useContext, useEffect, useRef} from 'react';
@@ -24,7 +24,7 @@ export const PressResponder = React.forwardRef(({children, ...props}: PressRespo
   let prevContext = useContext(PressResponderContext);
   let context = mergeProps(prevContext || {}, {
     ...props,
-    ref,
+    ref: ref || prevContext?.ref,
     register() {
       isRegistered.current = true;
       if (prevContext) {
@@ -33,6 +33,8 @@ export const PressResponder = React.forwardRef(({children, ...props}: PressRespo
     }
   });
 
+  useSyncRef(prevContext, ref);
+
   useEffect(() => {
     if (!isRegistered.current) {
       console.warn(

package/src/index.ts

@@ -21,3 +21,4 @@ export * from './useKeyboard';
 export * from './useMove';
 export * from './usePress';
 export * from './useScrollWheel';
+export * from './useLongPress';

package/src/textSelection.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {runAfterTransition} from '@react-aria/utils';
+import {isIOS, runAfterTransition} from '@react-aria/utils';
 
 // Safari on iOS starts selecting text on long press. The only way to avoid this, it seems,
 // is to add user-select: none to the entire page. Adding it to the pressable element prevents
@@ -21,44 +21,75 @@ import {runAfterTransition} from '@react-aria/utils';
 // There are three possible states due to the delay before removing user-select: none after
 // pointer up. The 'default' state always transitions to the 'disabled' state, which transitions
 // to 'restoring'. The 'restoring' state can either transition back to 'disabled' or 'default'.
+
+// For non-iOS devices, we apply user-select: none to the pressed element instead to avoid possible
+// performance issues that arise from applying and removing user-select: none to the entire page
+// (see https://github.com/adobe/react-spectrum/issues/1609).
 type State = 'default' | 'disabled' | 'restoring';
 
+// Note that state only matters here for iOS. Non-iOS gets user-select: none applied to the target element
+// rather than at the document level so we just need to apply/remove user-select: none for each pressed element individually
 let state: State = 'default';
 let savedUserSelect = '';
+let modifiedElementMap = new WeakMap<HTMLElement, string>();
 
-export function disableTextSelection() {
-  if (state === 'default') {
-    savedUserSelect = document.documentElement.style.webkitUserSelect;
-    document.documentElement.style.webkitUserSelect = 'none';
-  }
+export function disableTextSelection(target?: HTMLElement) {
+  if (isIOS()) {
+    if (state === 'default') {
+      savedUserSelect = document.documentElement.style.webkitUserSelect;
+      document.documentElement.style.webkitUserSelect = 'none';
+    }
 
-  state = 'disabled';
+    state = 'disabled';
+  } else if (target) {
+    // If not iOS, store the target's original user-select and change to user-select: none
+    // Ignore state since it doesn't apply for non iOS
+    modifiedElementMap.set(target, target.style.userSelect);
+    target.style.userSelect = 'none';
+  }
 }
 
-export function restoreTextSelection() {
-  // If the state is already default, there's nothing to do.
-  // If it is restoring, then there's no need to queue a second restore.
-  if (state !== 'disabled') {
-    return;
-  }
+export function restoreTextSelection(target?: HTMLElement) {
+  if (isIOS()) {
+    // If the state is already default, there's nothing to do.
+    // If it is restoring, then there's no need to queue a second restore.
+    if (state !== 'disabled') {
+      return;
+    }
 
-  state = 'restoring';
+    state = 'restoring';
 
-  // There appears to be a delay on iOS where selection still might occur
-  // after pointer up, so wait a bit before removing user-select.
-  setTimeout(() => {
-    // Wait for any CSS transitions to complete so we don't recompute style
-    // for the whole page in the middle of the animation and cause jank.
-    runAfterTransition(() => {
-      // Avoid race conditions
-      if (state === 'restoring') {
-        if (document.documentElement.style.webkitUserSelect === 'none') {
-          document.documentElement.style.webkitUserSelect = savedUserSelect || '';
+    // There appears to be a delay on iOS where selection still might occur
+    // after pointer up, so wait a bit before removing user-select.
+    setTimeout(() => {
+      // Wait for any CSS transitions to complete so we don't recompute style
+      // for the whole page in the middle of the animation and cause jank.
+      runAfterTransition(() => {
+        // Avoid race conditions
+        if (state === 'restoring') {
+          if (document.documentElement.style.webkitUserSelect === 'none') {
+            document.documentElement.style.webkitUserSelect = savedUserSelect || '';
+          }
+
+          savedUserSelect = '';
+          state = 'default';
         }
+      });
+    }, 300);
+  } else {
+    // If not iOS, restore the target's original user-select if any
+    // Ignore state since it doesn't apply for non iOS
+    if (target && modifiedElementMap.has(target)) {
+      let targetOldUserSelect = modifiedElementMap.get(target);
+
+      if (target.style.userSelect === 'none') {
+        target.style.userSelect = targetOldUserSelect;
+      }
 
-        savedUserSelect = '';
-        state = 'default';
+      if (target.getAttribute('style') === '') {
+        target.removeAttribute('style');
       }
-    });
-  }, 300);
+      modifiedElementMap.delete(target);
+    }
+  }
 }

package/src/useFocusVisible.ts

@@ -22,6 +22,7 @@ import {useEffect, useState} from 'react';
 type Modality = 'keyboard' | 'pointer' | 'virtual';
 type HandlerEvent = PointerEvent | MouseEvent | KeyboardEvent | FocusEvent;
 type Handler = (modality: Modality, e: HandlerEvent) => void;
+type FocusVisibleHandler = (isFocusVisible: boolean) => void;
 interface FocusVisibleProps {
   /** Whether the element is a text input. */
   isTextInput?: boolean,
@@ -38,6 +39,7 @@ let currentModality = null;
 let changeHandlers = new Set<Handler>();
 let hasSetupGlobalListeners = false;
 let hasEventBeforeFocus = false;
+let hasBlurredWindowRecently = false;
 
 // Only Tab or Esc keys will make focus visible on text input elements
 const FOCUS_VISIBLE_INPUT_KEYS = {
@@ -55,9 +57,11 @@ function triggerChangeHandlers(modality: Modality, e: HandlerEvent) {
  * Helper function to determine if a KeyboardEvent is unmodified and could make keyboard focus styles visible.
  */
 function isValidKey(e: KeyboardEvent) {
-  return !(e.metaKey || (!isMac() && e.altKey) || e.ctrlKey);
+  // Control and Shift keys trigger when navigating back to the tab with keyboard.
+  return !(e.metaKey || (!isMac() && e.altKey) || e.ctrlKey || e.key === 'Control' || e.key === 'Shift' || e.key === 'Meta');
 }
 
+
 function handleKeyboardEvent(e: KeyboardEvent) {
   hasEventBeforeFocus = true;
   if (isValidKey(e)) {
@@ -91,18 +95,20 @@ function handleFocusEvent(e: FocusEvent) {
 
   // If a focus event occurs without a preceding keyboard or pointer event, switch to virtual modality.
   // This occurs, for example, when navigating a form with the next/previous buttons on iOS.
-  if (!hasEventBeforeFocus) {
+  if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {
     currentModality = 'virtual';
     triggerChangeHandlers('virtual', e);
   }
 
   hasEventBeforeFocus = false;
+  hasBlurredWindowRecently = false;
 }
 
 function handleWindowBlur() {
   // When the window is blurred, reset state. This is necessary when tabbing out of the window,
   // for example, since a subsequent focus event won't be fired.
   hasEventBeforeFocus = false;
+  hasBlurredWindowRecently = true;
 }
 
 /**
@@ -190,30 +196,41 @@ export function useInteractionModality(): Modality {
   return modality;
 }
 
+/**
+ * If this is attached to text input component, return if the event is a focus event (Tab/Escape keys pressed) so that
+ * focus visible style can be properly set.
+ */
+function isKeyboardFocusEvent(isTextInput: boolean, modality: Modality, e: HandlerEvent) {
+  return !(isTextInput && modality === 'keyboard' && e instanceof KeyboardEvent && !FOCUS_VISIBLE_INPUT_KEYS[e.key]);
+}
+
 /**
  * Manages focus visible state for the page, and subscribes individual components for updates.
  */
 export function useFocusVisible(props: FocusVisibleProps = {}): FocusVisibleResult {
-  setupGlobalFocusEvents();
-
   let {isTextInput, autoFocus} = props;
   let [isFocusVisibleState, setFocusVisible] = useState(autoFocus || isFocusVisible());
+  useFocusVisibleListener((isFocusVisible) => {
+    setFocusVisible(isFocusVisible);
+  }, [isTextInput], {isTextInput});
+
+  return {isFocusVisible: isFocusVisibleState};
+}
+
+/**
+ * Listens for trigger change and reports if focus is visible (i.e., modality is not pointer).
+ */
+export function useFocusVisibleListener(fn: FocusVisibleHandler, deps: ReadonlyArray<any>, opts?: {isTextInput?: boolean}): void {
+  setupGlobalFocusEvents();
+
   useEffect(() => {
     let handler = (modality: Modality, e: HandlerEvent) => {
-      // If this is a text input component, don't update the focus visible style when
-      // typing except for when the Tab and Escape keys are pressed.
-      if (isTextInput && modality === 'keyboard' && e instanceof KeyboardEvent && !FOCUS_VISIBLE_INPUT_KEYS[e.key]) {
+      if (!isKeyboardFocusEvent(opts?.isTextInput, modality, e)) {
         return;
       }
-
-      setFocusVisible(isFocusVisible());
+      fn(isFocusVisible());
     };
-
     changeHandlers.add(handler);
-    return () => {
-      changeHandlers.delete(handler);
-    };
-  }, [isTextInput]);
-
-  return {isFocusVisible: isFocusVisibleState};
+    return () => changeHandlers.delete(handler);
+  }, deps);
 }

package/src/useHover.ts

@@ -94,19 +94,23 @@ export function useHover(props: HoverProps): HoverResult {
   let [isHovered, setHovered] = useState(false);
   let state = useRef({
     isHovered: false,
-    ignoreEmulatedMouseEvents: false
+    ignoreEmulatedMouseEvents: false,
+    pointerType: '',
+    target: null
   }).current;
 
   useEffect(setupGlobalTouchEvents, []);
 
-  let hoverProps = useMemo(() => {
+  let {hoverProps, triggerHoverEnd} = useMemo(() => {
     let triggerHoverStart = (event, pointerType) => {
-      if (isDisabled || pointerType === 'touch' || state.isHovered) {
+      state.pointerType = pointerType;
+      if (isDisabled || pointerType === 'touch' || state.isHovered || !event.currentTarget.contains(event.target)) {
         return;
       }
 
       state.isHovered = true;
-      let target = event.target;
+      let target = event.currentTarget;
+      state.target = target;
 
       if (onHoverStart) {
         onHoverStart({
@@ -124,13 +128,15 @@ export function useHover(props: HoverProps): HoverResult {
     };
 
     let triggerHoverEnd = (event, pointerType) => {
+      state.pointerType = '';
+      state.target = null;
+
       if (pointerType === 'touch' || !state.isHovered) {
         return;
       }
 
       state.isHovered = false;
-      let target = event.target;
-
+      let target = event.currentTarget;
       if (onHoverEnd) {
         onHoverEnd({
           type: 'hoverend',
@@ -158,7 +164,9 @@ export function useHover(props: HoverProps): HoverResult {
       };
 
       hoverProps.onPointerLeave = (e) => {
-        triggerHoverEnd(e, e.pointerType);
+        if (!isDisabled && e.currentTarget.contains(e.target as HTMLElement)) {
+          triggerHoverEnd(e, e.pointerType);
+        }
       };
     } else {
       hoverProps.onTouchStart = () => {
@@ -174,14 +182,25 @@ export function useHover(props: HoverProps): HoverResult {
       };
 
       hoverProps.onMouseLeave = (e) => {
-        triggerHoverEnd(e, 'mouse');
+        if (!isDisabled && e.currentTarget.contains(e.target as HTMLElement)) {
+          triggerHoverEnd(e, 'mouse');
+        }
       };
     }
-    return hoverProps;
+    return {hoverProps, triggerHoverEnd};
   }, [onHoverStart, onHoverChange, onHoverEnd, isDisabled, state]);
 
+  useEffect(() => {
+    // Call the triggerHoverEnd as soon as isDisabled changes to true
+    // Safe to call triggerHoverEnd, it will early return if we aren't currently hovering
+    if (isDisabled) {
+      triggerHoverEnd({currentTarget: state.target}, state.pointerType);
+    }
+  }, [isDisabled]);
+
   return {
     hoverProps,
     isHovered
   };
 }
+

package/src/useInteractOutside.ts

@@ -20,6 +20,7 @@ import {RefObject, SyntheticEvent, useEffect, useRef} from 'react';
 interface InteractOutsideProps {
   ref: RefObject<Element>,
   onInteractOutside?: (e: SyntheticEvent) => void,
+  onInteractOutsideStart?: (e: SyntheticEvent) => void,
   /** Whether the interact outside events should be disabled. */
   isDisabled?: boolean
 }
@@ -29,31 +30,37 @@ interface InteractOutsideProps {
  * when a user clicks outside them.
  */
 export function useInteractOutside(props: InteractOutsideProps) {
-  let {ref, onInteractOutside, isDisabled} = props;
+  let {ref, onInteractOutside, isDisabled, onInteractOutsideStart} = props;
   let stateRef = useRef({
     isPointerDown: false,
-    ignoreEmulatedMouseEvents: false
+    ignoreEmulatedMouseEvents: false,
+    onInteractOutside,
+    onInteractOutsideStart
   });
   let state = stateRef.current;
+  state.onInteractOutside = onInteractOutside;
+  state.onInteractOutsideStart = onInteractOutsideStart;
 
   useEffect(() => {
+    if (isDisabled) {
+      return;
+    }
+
     let onPointerDown = (e) => {
-      if (isDisabled) {
-        return;
-      }
-      if (isValidEvent(e, ref)) {
+      if (isValidEvent(e, ref) && state.onInteractOutside) {
+        if (state.onInteractOutsideStart) {
+          state.onInteractOutsideStart(e);
+        }
         state.isPointerDown = true;
       }
     };
-    /*
-    // FF bug https://bugzilla.mozilla.org/show_bug.cgi?id=1675846 prevents us from using this pointerevent
-    // once it's fixed we can uncomment
+
     // Use pointer events if available. Otherwise, fall back to mouse and touch events.
     if (typeof PointerEvent !== 'undefined') {
       let onPointerUp = (e) => {
-        if (state.isPointerDown && onInteractOutside && isValidEvent(e, ref)) {
+        if (state.isPointerDown && state.onInteractOutside && isValidEvent(e, ref)) {
           state.isPointerDown = false;
-          onInteractOutside(e);
+          state.onInteractOutside(e);
         }
       };
 
@@ -65,42 +72,37 @@ export function useInteractOutside(props: InteractOutsideProps) {
         document.removeEventListener('pointerdown', onPointerDown, true);
         document.removeEventListener('pointerup', onPointerUp, true);
       };
-    } else {*/
-    let onMouseUp = (e) => {
-      if (isDisabled) {
-        return;
-      }
-      if (state.ignoreEmulatedMouseEvents) {
-        state.ignoreEmulatedMouseEvents = false;
-      } else if (state.isPointerDown && onInteractOutside && isValidEvent(e, ref)) {
-        state.isPointerDown = false;
-        onInteractOutside(e);
-      }
-    };
+    } else {
+      let onMouseUp = (e) => {
+        if (state.ignoreEmulatedMouseEvents) {
+          state.ignoreEmulatedMouseEvents = false;
+        } else if (state.isPointerDown && state.onInteractOutside && isValidEvent(e, ref)) {
+          state.isPointerDown = false;
+          state.onInteractOutside(e);
+        }
+      };
 
-    let onTouchEnd = (e) => {
-      if (isDisabled) {
-        return;
-      }
-      state.ignoreEmulatedMouseEvents = true;
-      if (onInteractOutside && state.isPointerDown && isValidEvent(e, ref)) {
-        state.isPointerDown = false;
-        onInteractOutside(e);
-      }
-    };
+      let onTouchEnd = (e) => {
+        state.ignoreEmulatedMouseEvents = true;
+        if (state.onInteractOutside && state.isPointerDown && isValidEvent(e, ref)) {
+          state.isPointerDown = false;
+          state.onInteractOutside(e);
+        }
+      };
 
-    document.addEventListener('mousedown', onPointerDown, true);
-    document.addEventListener('mouseup', onMouseUp, true);
-    document.addEventListener('touchstart', onPointerDown, true);
-    document.addEventListener('touchend', onTouchEnd, true);
+      document.addEventListener('mousedown', onPointerDown, true);
+      document.addEventListener('mouseup', onMouseUp, true);
+      document.addEventListener('touchstart', onPointerDown, true);
+      document.addEventListener('touchend', onTouchEnd, true);
 
-    return () => {
-      document.removeEventListener('mousedown', onPointerDown, true);
-      document.removeEventListener('mouseup', onMouseUp, true);
-      document.removeEventListener('touchstart', onPointerDown, true);
-      document.removeEventListener('touchend', onTouchEnd, true);
-    };
-  }, [onInteractOutside, ref, state.ignoreEmulatedMouseEvents, state.isPointerDown, isDisabled]);
+      return () => {
+        document.removeEventListener('mousedown', onPointerDown, true);
+        document.removeEventListener('mouseup', onMouseUp, true);
+        document.removeEventListener('touchstart', onPointerDown, true);
+        document.removeEventListener('touchend', onTouchEnd, true);
+      };
+    }
+  }, [ref, state, isDisabled]);
 }
 
 function isValidEvent(event, ref) {