@react-aria/interactions - npm Package Compare versions

Comparing version 3.0.0-nightly.1032 to 3.0.0-nightly.1037

dist/main.js

@@ -827,3 +827,7 @@ var _react2 = require("react");
 let $b83372066b2b4e1d9257843b2455c$var$hasSetupGlobalListeners = false;
-let $b83372066b2b4e1d9257843b2455c$var$hasEventBeforeFocus = false; // Only Tab or Esc keys will make focus visible on text input elements
+let $b83372066b2b4e1d9257843b2455c$var$hasEventBeforeFocus = false;
+let $b83372066b2b4e1d9257843b2455c$var$documentVisibilityState = {
+  current: null,
+  previous: null
+}; // Only Tab or Esc keys will make focus visible on text input elements
 
@@ -849,2 +853,13 @@ const $b83372066b2b4e1d9257843b2455c$var$FOCUS_VISIBLE_INPUT_KEYS = {
 
+function $b83372066b2b4e1d9257843b2455c$var$hasChangedTabRecently() {
+  // in Chrome visibilitychange event always happens before any focus event.
+  // situation is different for Firefox and Safari where visibilitychange fires after all initial focus events.
+  return $b83372066b2b4e1d9257843b2455c$var$documentVisibilityState.current === 'visible' && $b83372066b2b4e1d9257843b2455c$var$documentVisibilityState.previous === 'hidden' || $b83372066b2b4e1d9257843b2455c$var$documentVisibilityState.current === 'hidden';
+}
+
+function $b83372066b2b4e1d9257843b2455c$var$resetDocumentVisibilityState() {
+  $b83372066b2b4e1d9257843b2455c$var$documentVisibilityState.current = null;
+  $b83372066b2b4e1d9257843b2455c$var$documentVisibilityState.previous = null;
+}
+
 function $b83372066b2b4e1d9257843b2455c$var$handleKeyboardEvent(e) {
@@ -885,3 +900,3 @@ $b83372066b2b4e1d9257843b2455c$var$hasEventBeforeFocus = true;
 
-  if (!$b83372066b2b4e1d9257843b2455c$var$hasEventBeforeFocus) {
+  if (!$b83372066b2b4e1d9257843b2455c$var$hasEventBeforeFocus && !$b83372066b2b4e1d9257843b2455c$var$hasChangedTabRecently()) {
     $b83372066b2b4e1d9257843b2455c$var$currentModality = 'virtual';
@@ -891,2 +906,6 @@ $b83372066b2b4e1d9257843b2455c$var$triggerChangeHandlers('virtual', e);
 
+  if ($b83372066b2b4e1d9257843b2455c$var$documentVisibilityState.current === 'visible') {
+    $b83372066b2b4e1d9257843b2455c$var$resetDocumentVisibilityState();
+  }
+
   $b83372066b2b4e1d9257843b2455c$var$hasEventBeforeFocus = false;
@@ -900,2 +919,7 @@ }
 }
+
+function $b83372066b2b4e1d9257843b2455c$var$handleVisibilityChange() {
+  $b83372066b2b4e1d9257843b2455c$var$documentVisibilityState.previous = $b83372066b2b4e1d9257843b2455c$var$documentVisibilityState.current;
+  $b83372066b2b4e1d9257843b2455c$var$documentVisibilityState.current = document.visibilityState;
+}
 /**
@@ -924,3 +948,4 @@ * Setup global event listeners to control when keyboard focus style should be visible.
   document.addEventListener('keyup', $b83372066b2b4e1d9257843b2455c$var$handleKeyboardEvent, true);
-  document.addEventListener('click', $b83372066b2b4e1d9257843b2455c$var$handleClickEvent, true); // Register focus events on the window so they are sure to happen
+  document.addEventListener('click', $b83372066b2b4e1d9257843b2455c$var$handleClickEvent, true);
+  document.addEventListener('visibilitychange', $b83372066b2b4e1d9257843b2455c$var$handleVisibilityChange, true); // Register focus events on the window so they are sure to happen
   // before React's event listeners (registered on the document).
@@ -927,0 +952,0 @@

dist/module.js

@@ -791,3 +791,7 @@ import _react, { useContext, useEffect, useMemo, useRef, useState, useCallback } from "react";
 let $d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasSetupGlobalListeners = false;
-let $d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasEventBeforeFocus = false; // Only Tab or Esc keys will make focus visible on text input elements
+let $d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasEventBeforeFocus = false;
+let $d01f69bb2ab5f70dfd0005370a2a2cbc$var$documentVisibilityState = {
+  current: null,
+  previous: null
+}; // Only Tab or Esc keys will make focus visible on text input elements
 
@@ -813,2 +817,13 @@ const $d01f69bb2ab5f70dfd0005370a2a2cbc$var$FOCUS_VISIBLE_INPUT_KEYS = {
 
+function $d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasChangedTabRecently() {
+  // in Chrome visibilitychange event always happens before any focus event.
+  // situation is different for Firefox and Safari where visibilitychange fires after all initial focus events.
+  return $d01f69bb2ab5f70dfd0005370a2a2cbc$var$documentVisibilityState.current === 'visible' && $d01f69bb2ab5f70dfd0005370a2a2cbc$var$documentVisibilityState.previous === 'hidden' || $d01f69bb2ab5f70dfd0005370a2a2cbc$var$documentVisibilityState.current === 'hidden';
+}
+
+function $d01f69bb2ab5f70dfd0005370a2a2cbc$var$resetDocumentVisibilityState() {
+  $d01f69bb2ab5f70dfd0005370a2a2cbc$var$documentVisibilityState.current = null;
+  $d01f69bb2ab5f70dfd0005370a2a2cbc$var$documentVisibilityState.previous = null;
+}
+
 function $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handleKeyboardEvent(e) {
@@ -849,3 +864,3 @@ $d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasEventBeforeFocus = true;
 
-  if (!$d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasEventBeforeFocus) {
+  if (!$d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasEventBeforeFocus && !$d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasChangedTabRecently()) {
     $d01f69bb2ab5f70dfd0005370a2a2cbc$var$currentModality = 'virtual';
@@ -855,2 +870,6 @@ $d01f69bb2ab5f70dfd0005370a2a2cbc$var$triggerChangeHandlers('virtual', e);
 
+  if ($d01f69bb2ab5f70dfd0005370a2a2cbc$var$documentVisibilityState.current === 'visible') {
+    $d01f69bb2ab5f70dfd0005370a2a2cbc$var$resetDocumentVisibilityState();
+  }
+
   $d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasEventBeforeFocus = false;
@@ -864,2 +883,7 @@ }
 }
+
+function $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handleVisibilityChange() {
+  $d01f69bb2ab5f70dfd0005370a2a2cbc$var$documentVisibilityState.previous = $d01f69bb2ab5f70dfd0005370a2a2cbc$var$documentVisibilityState.current;
+  $d01f69bb2ab5f70dfd0005370a2a2cbc$var$documentVisibilityState.current = document.visibilityState;
+}
 /**
@@ -888,3 +912,4 @@ * Setup global event listeners to control when keyboard focus style should be visible.
   document.addEventListener('keyup', $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handleKeyboardEvent, true);
-  document.addEventListener('click', $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handleClickEvent, true); // Register focus events on the window so they are sure to happen
+  document.addEventListener('click', $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handleClickEvent, true);
+  document.addEventListener('visibilitychange', $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handleVisibilityChange, true); // Register focus events on the window so they are sure to happen
   // before React's event listeners (registered on the document).
@@ -891,0 +916,0 @@

package.json

 {
   "name": "@react-aria/interactions",
-  "version": "3.0.0-nightly.1032+303c671b4",
+  "version": "3.0.0-nightly.1037+82d5242b1",
   "description": "Spectrum UI components in React",
@@ -21,4 +21,4 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@react-aria/utils": "3.0.0-nightly.1032+303c671b4",
-    "@react-types/shared": "3.0.0-nightly.1032+303c671b4"
+    "@react-aria/utils": "3.0.0-nightly.1037+82d5242b1",
+    "@react-types/shared": "3.0.0-nightly.1037+82d5242b1"
   },
@@ -31,3 +31,3 @@ "peerDependencies": {
   },
-  "gitHead": "303c671b46a72c25b2b65741c481a43a895269a4"
+  "gitHead": "82d5242b191656663597887171d8d1f52c8bf9b7"
 }

src/useFocusVisible.ts

@@ -41,2 +41,6 @@ /*
 let hasEventBeforeFocus = false;
+let documentVisibilityState = {
+  current: null,
+  previous: null
+};
 
@@ -62,2 +66,13 @@ // Only Tab or Esc keys will make focus visible on text input elements
 
+function hasChangedTabRecently() {
+  // in Chrome visibilitychange event always happens before any focus event.
+  // situation is different for Firefox and Safari where visibilitychange fires after all initial focus events.
+  return (documentVisibilityState.current === 'visible' && documentVisibilityState.previous === 'hidden') || documentVisibilityState.current === 'hidden';
+}
+
+function resetDocumentVisibilityState() {
+  documentVisibilityState.current = null;
+  documentVisibilityState.previous = null;
+}
+
 function handleKeyboardEvent(e: KeyboardEvent) {
@@ -96,3 +111,3 @@ hasEventBeforeFocus = true;
   // This occurs, for example, when navigating a form with the next/previous buttons on iOS.
-  if (!hasEventBeforeFocus) {
+  if (!hasEventBeforeFocus && !hasChangedTabRecently()) {
     currentModality = 'virtual';
@@ -102,2 +117,6 @@ triggerChangeHandlers('virtual', e);
 
+  if (documentVisibilityState.current === 'visible') {
+    resetDocumentVisibilityState();
+  }
+
   hasEventBeforeFocus = false;
@@ -112,2 +131,7 @@ }
 
+function handleVisibilityChange() {
+  documentVisibilityState.previous = documentVisibilityState.current;
+  documentVisibilityState.current = document.visibilityState;
+}
+
 /**
@@ -134,2 +158,3 @@ * Setup global event listeners to control when keyboard focus style should be visible.
   document.addEventListener('click', handleClickEvent, true);
+  document.addEventListener('visibilitychange', handleVisibilityChange, true);
 
@@ -136,0 +161,0 @@ // Register focus events on the window so they are sure to happen

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

418667

increased by1.86%

Lines of code

4703

increased by1.36%

Dependency changes

• Updated@react-aria/utils@3.0.0-nightly.1037+82d5242b1

• Updated@react-types/shared@3.0.0-nightly.1037+82d5242b1