@react-aria/tooltip - npm Package Compare versions

Comparing version 3.0.0-nightly.710 to 3.0.0-nightly.715

dist/main.js

@@ -11,2 +11,3 @@ var {
 var {
+  getInteractionModality,
   isFocusVisible,
@@ -51,3 +52,5 @@ usePress,
   let handleShow = () => {
-    state.open(isFocused.current);
+    if (isHovered.current || isFocused.current) {
+      state.open(isFocused.current);
+    }
   };
@@ -73,5 +76,5 @@
     if (state.isOpen) {
-      document.addEventListener('keydown', onKeyDown);
+      document.addEventListener('keydown', onKeyDown, true);
       return () => {
-        document.removeEventListener('keydown', onKeyDown);
+        document.removeEventListener('keydown', onKeyDown, true);
       };
@@ -82,3 +85,12 @@ }
   let onHoverStart = () => {
-    isHovered.current = true;
+    // In chrome, if you hover a trigger, then another element obscures it, due to keyboard
+    // interactions for example, hover will end. When hover is restored after that element disappears,
+    // focus moves on for example, then the tooltip will reopen. We check the modality to know if the hover
+    // is the result of moving the mouse.
+    if (getInteractionModality() === 'pointer') {
+      isHovered.current = true;
+    } else {
+      isHovered.current = false;
+    }
+
     handleShow();
@@ -88,2 +100,4 @@ };
   let onHoverEnd = () => {
+    // no matter how the trigger is left, we should close the tooltip
+    isFocused.current = false;
     isHovered.current = false;
@@ -94,6 +108,5 @@ handleHide();
   let onPressStart = () => {
-    if (isFocused.current) {
-      isFocused.current = false;
-    }
-
+    // no matter how the trigger is pressed, we should close the tooltip
+    isFocused.current = false;
+    isHovered.current = false;
     handleHide();
@@ -113,2 +126,3 @@ };
     isFocused.current = false;
+    isHovered.current = false;
     handleHide();
@@ -115,0 +129,0 @@ };

dist/module.js

 import { useFocusable } from "@react-aria/focus";
 import { useEffect, useRef } from "react";
-import { isFocusVisible, usePress, useHover } from "@react-aria/interactions";
+import { getInteractionModality, isFocusVisible, usePress, useHover } from "@react-aria/interactions";
 import _babelRuntimeHelpersEsmExtends from "@babel/runtime/helpers/esm/extends";
@@ -25,3 +25,5 @@ import { filterDOMProps, mergeProps, useId } from "@react-aria/utils";
   let handleShow = () => {
-    state.open(isFocused.current);
+    if (isHovered.current || isFocused.current) {
+      state.open(isFocused.current);
+    }
   };
@@ -47,5 +49,5 @@
     if (state.isOpen) {
-      document.addEventListener('keydown', onKeyDown);
+      document.addEventListener('keydown', onKeyDown, true);
       return () => {
-        document.removeEventListener('keydown', onKeyDown);
+        document.removeEventListener('keydown', onKeyDown, true);
       };
@@ -56,3 +58,12 @@ }
   let onHoverStart = () => {
-    isHovered.current = true;
+    // In chrome, if you hover a trigger, then another element obscures it, due to keyboard
+    // interactions for example, hover will end. When hover is restored after that element disappears,
+    // focus moves on for example, then the tooltip will reopen. We check the modality to know if the hover
+    // is the result of moving the mouse.
+    if (getInteractionModality() === 'pointer') {
+      isHovered.current = true;
+    } else {
+      isHovered.current = false;
+    }
+
     handleShow();
@@ -62,2 +73,4 @@ };
   let onHoverEnd = () => {
+    // no matter how the trigger is left, we should close the tooltip
+    isFocused.current = false;
     isHovered.current = false;
@@ -68,6 +81,5 @@ handleHide();
   let onPressStart = () => {
-    if (isFocused.current) {
-      isFocused.current = false;
-    }
-
+    // no matter how the trigger is pressed, we should close the tooltip
+    isFocused.current = false;
+    isHovered.current = false;
     handleHide();
@@ -87,2 +99,3 @@ };
     isFocused.current = false;
+    isHovered.current = false;
     handleHide();
@@ -89,0 +102,0 @@ };

package.json

 {
   "name": "@react-aria/tooltip",
-  "version": "3.0.0-nightly.710+da1f0a8a",
+  "version": "3.0.0-nightly.715+bd9852ce",
   "description": "Spectrum UI components in React",
@@ -21,12 +21,12 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@react-aria/focus": "3.0.0-nightly.710+da1f0a8a",
-    "@react-aria/interactions": "3.0.0-nightly.710+da1f0a8a",
-    "@react-aria/overlays": "3.0.0-nightly.710+da1f0a8a",
-    "@react-aria/utils": "3.0.0-nightly.710+da1f0a8a",
-    "@react-stately/tooltip": "3.0.0-nightly.2388+da1f0a8a",
-    "@react-types/shared": "3.0.0-nightly.710+da1f0a8a",
-    "@react-types/tooltip": "3.0.0-nightly.2388+da1f0a8a"
+    "@react-aria/focus": "3.0.0-nightly.715+bd9852ce",
+    "@react-aria/interactions": "3.0.0-nightly.715+bd9852ce",
+    "@react-aria/overlays": "3.0.0-nightly.715+bd9852ce",
+    "@react-aria/utils": "3.0.0-nightly.715+bd9852ce",
+    "@react-stately/tooltip": "3.0.0-nightly.2393+bd9852ce",
+    "@react-types/shared": "3.0.0-nightly.715+bd9852ce",
+    "@react-types/tooltip": "3.0.0-nightly.2393+bd9852ce"
   },
   "peerDependencies": {
-    "react": "^16.8.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1"
   },
@@ -36,3 +36,3 @@ "publishConfig": {
   },
-  "gitHead": "da1f0a8a149db773b61c8ae61a99ec0139db7b29"
+  "gitHead": "bd9852ce71c11a970a135668373e16cf8962dc3c"
 }

src/useTooltipTrigger.ts

@@ -14,3 +14,3 @@ /*
 import {FocusEvents} from '@react-types/shared';
-import {HoverProps, isFocusVisible, PressProps, usePress} from '@react-aria/interactions';
+import {getInteractionModality, HoverProps, isFocusVisible, PressProps, usePress} from '@react-aria/interactions';
 import {HTMLAttributes, RefObject, useEffect, useRef} from 'react';
@@ -39,3 +39,5 @@ import {mergeProps, useId} from '@react-aria/utils';
   let handleShow = () => {
-    state.open(isFocused.current);
+    if (isHovered.current || isFocused.current) {
+      state.open(isFocused.current);
+    }
   };
@@ -60,5 +62,5 @@
     if (state.isOpen) {
-      document.addEventListener('keydown', onKeyDown);
+      document.addEventListener('keydown', onKeyDown, true);
       return () => {
-        document.removeEventListener('keydown', onKeyDown);
+        document.removeEventListener('keydown', onKeyDown, true);
       };
@@ -69,15 +71,28 @@ }
   let onHoverStart = () => {
-    isHovered.current = true;
+    // In chrome, if you hover a trigger, then another element obscures it, due to keyboard
+    // interactions for example, hover will end. When hover is restored after that element disappears,
+    // focus moves on for example, then the tooltip will reopen. We check the modality to know if the hover
+    // is the result of moving the mouse.
+    if (getInteractionModality() === 'pointer') {
+      isHovered.current = true;
+    } else {
+      isHovered.current = false;
+    }
     handleShow();
   };
+
   let onHoverEnd = () => {
+    // no matter how the trigger is left, we should close the tooltip
+    isFocused.current = false;
     isHovered.current = false;
     handleHide();
   };
+
   let onPressStart = () => {
-    if (isFocused.current) {
-      isFocused.current = false;
-    }
+    // no matter how the trigger is pressed, we should close the tooltip
+    isFocused.current = false;
+    isHovered.current = false;
     handleHide();
   };
+
   let onFocus = () => {
@@ -90,4 +105,6 @@ let isVisible = isFocusVisible();
   };
+
   let onBlur = () => {
     isFocused.current = false;
+    isHovered.current = false;
     handleHide();
@@ -94,0 +111,0 @@ };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

44108

increased by11.12%

Lines of code

414

increased by10.7%

Dependency changes

• + Addedreact@17.0.2(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact@16.14.0(transitive)

• - Removedreact-is@16.13.1(transitive)

• Updated@react-aria/focus@3.0.0-nightly.715+bd9852ce

• Updated@react-aria/interactions@3.0.0-nightly.715+bd9852ce

• Updated@react-aria/overlays@3.0.0-nightly.715+bd9852ce

• Updated@react-aria/utils@3.0.0-nightly.715+bd9852ce

• Updated@react-stately/tooltip@3.0.0-nightly.2393+bd9852ce

• Updated@react-types/shared@3.0.0-nightly.715+bd9852ce

• Updated@react-types/tooltip@3.0.0-nightly.2393+bd9852ce