focus-lock - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

dist/constants.js

@@ -6,6 +6,5 @@ 'use strict';
 });
-var FOCUS_GROUP = 'data-focus-lock';
-var FOCUS_DISABLED = 'data-focus-lock-disabled';
-
-exports.FOCUS_DISABLED = FOCUS_DISABLED;
-exports.FOCUS_GROUP = FOCUS_GROUP;
+var FOCUS_GROUP = exports.FOCUS_GROUP = 'data-focus-lock';
+var FOCUS_DISABLED = exports.FOCUS_DISABLED = 'data-focus-lock-disabled';
+var FOCUS_ALLOW = exports.FOCUS_ALLOW = 'data-no-focus-lock';
+var FOCUS_AUTO = exports.FOCUS_AUTO = 'data-autofocus-inside';

dist/focusInside.js

@@ -26,4 +26,9 @@ 'use strict';
 var focusInside = function focusInside(topNode) {
+  var activeElement = document && document.activeElement;
+
+  if (!activeElement || activeElement.dataset.focusGuard) {
+    return false;
+  }
   return (0, _allAffected2.default)(topNode).reduce(function (result, node) {
-    return result || node.querySelector('*:focus') || focusInsideIframe(topNode);
+    return result || node.contains(activeElement) || focusInsideIframe(topNode);
   }, false);
@@ -30,0 +35,0 @@ };

dist/focusMerge.js

@@ -99,9 +99,16 @@ 'use strict';
 
+var notAGuard = function notAGuard(node) {
+  return !node.dataset.focusGuard;
+};
+
 var getFocusMerge = function getFocusMerge(topNode, lastNode) {
   var activeElement = document.activeElement;
-  var entries = (0, _allAffected2.default)(topNode);
+  var entries = (0, _allAffected2.default)(topNode).filter(notAGuard);
 
   var commonParent = getTopCommonParent(activeElement || topNode, topNode, entries);
 
-  var innerElements = (0, _DOMutils.getTabbableNodes)(entries);
+  var innerElements = (0, _DOMutils.getTabbableNodes)(entries).filter(function (_ref) {
+    var node = _ref.node;
+    return notAGuard(node);
+  });
   if (!innerElements[0]) {
@@ -111,9 +118,9 @@ return undefined;
 
-  var innerNodes = innerElements.map(function (_ref) {
-    var node = _ref.node;
+  var innerNodes = innerElements.map(function (_ref2) {
+    var node = _ref2.node;
     return node;
   });
 
-  var outerNodes = (0, _tabOrder.orderByTabIndex)((0, _tabUtils.getFocusables)([commonParent])).map(function (_ref2) {
-    var node = _ref2.node;
+  var outerNodes = (0, _tabOrder.orderByTabIndex)((0, _tabUtils.getFocusables)([commonParent])).map(function (_ref3) {
+    var node = _ref3.node;
     return node;
@@ -120,0 +127,0 @@ });

dist/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.getAllAffectedNodes = exports.constants = exports.focusMerge = exports.focusInside = exports.tabHook = undefined;
+exports.getAllAffectedNodes = exports.constants = exports.focusMerge = exports.focusIsHidden = exports.focusInside = exports.tabHook = undefined;
 
@@ -21,2 +21,6 @@ var _tabHook = require('./tabHook');
 
+var _focusIsHidden = require('./focusIsHidden');
+
+var _focusIsHidden2 = _interopRequireDefault(_focusIsHidden);
+
 var _setFocus = require('./setFocus');
@@ -40,2 +44,3 @@
 exports.focusInside = _focusInside2.default;
+exports.focusIsHidden = _focusIsHidden2.default;
 exports.focusMerge = _focusMerge2.default;
@@ -42,0 +47,0 @@ exports.constants = constants;

dist/setFocus.js

@@ -21,8 +21,28 @@ 'use strict';
 
+var guardCount = 0;
+var lockDisabled = false;
+
 exports.default = function (topNode, lastNode) {
   var focusable = (0, _focusMerge2.default)(topNode, lastNode);
 
+  if (lockDisabled) {
+    return;
+  }
+
   if (focusable) {
+    if (guardCount > 2) {
+      if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line no-console
+        console.error('FocusLock: focus-fighting detected. Only one focus management system could be active. ' + 'See https://github.com/theKashey/focus-lock/#focus-fighting');
+        lockDisabled = true;
+        setTimeout(function () {
+          lockDisabled = false;
+        }, 1);
+      }
+      return;
+    }
+    guardCount++;
     focusOn(focusable.node);
+    guardCount--;
   }
 };

dist/utils/all-affected.js

@@ -1,2 +0,2 @@
-"use strict";
+'use strict';
 
@@ -9,5 +9,5 @@ Object.defineProperty(exports, "__esModule", {
 
-var _constants = require("../constants");
+var _constants = require('../constants');
 
-var _array = require("./array");
+var _array = require('./array');
 
@@ -32,3 +32,3 @@ var filterNested = function filterNested(nodes) {
 
-      if ((typeof _ret === "undefined" ? "undefined" : _typeof(_ret)) === "object") return _ret.v;
+      if ((typeof _ret === 'undefined' ? 'undefined' : _typeof(_ret)) === "object") return _ret.v;
     }
@@ -46,3 +46,3 @@ }
   if (group) {
-    return filterNested((0, _array.toArray)(getTopParent(node).querySelectorAll("[" + _constants.FOCUS_GROUP + "=\"" + group + "\"]:not([" + _constants.FOCUS_DISABLED + "=\"disabled\"])")));
+    return filterNested((0, _array.toArray)(getTopParent(node).querySelectorAll('[' + _constants.FOCUS_GROUP + '="' + group + '"]:not([' + _constants.FOCUS_DISABLED + '="disabled"])')));
   }
@@ -49,0 +49,0 @@ return [node];

dist/utils/array.js

@@ -8,3 +8,3 @@ "use strict";
   var ret = Array(a.length);
-  for (var i = 0; i < a.length; i++) {
+  for (var i = 0; i < a.length; ++i) {
     ret[i] = a[i];
@@ -11,0 +11,0 @@ }

dist/utils/tabOrder.js

@@ -1,2 +0,2 @@
-"use strict";
+'use strict';
 
@@ -8,3 +8,3 @@ Object.defineProperty(exports, "__esModule", {
 
-var _array = require("./array");
+var _array = require('./array');
 
@@ -11,0 +11,0 @@ var tabSort = exports.tabSort = function tabSort(a, b) {

dist/utils/tabUtils.js

@@ -14,2 +14,4 @@ 'use strict';
 
+var _constants = require('../constants');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -24,3 +26,3 @@
 var getParentAutofocusables = exports.getParentAutofocusables = function getParentAutofocusables(parent) {
-  var parentFocus = parent.querySelectorAll('[data-autofocus-inside]');
+  var parentFocus = parent.querySelectorAll('[' + _constants.FOCUS_AUTO + ']');
   return (0, _array.toArray)(parentFocus).map(function (node) {
@@ -27,0 +29,0 @@ return getFocusables([node]);

package.json

 {
   "name": "focus-lock",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "DOM trap for a focus",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -37,2 +37,17 @@ # focus-lock
 
+# Focus fighting
+It is possible, that more that one "focus management system" is present on the site.
+For example you are using FocusLock for your content, and also using some
+Modal dialog, with FocusTrap inside.
+
+Both system will try to do their best, and move focus into their managed areas.
+Stack overflow. Both are dead.
+
+Focus Lock(React-Focus-Lock, Vue-Focus-Lock and so on) implements anti-fighting
+protection - once the battle is detected focus-lock will surrender(as long there is no way to win this fight).
+
+You may also land a peace by special data attribute - `data-no-focus-lock`(constants.FOCUS_ALLOW). It will
+remove focus management from all nested elements, letting you open modals, forms, or 
+use any third party component safely. Focus lock will just do nothing, while focus is on the marked elements. 
+
 # API
@@ -39,0 +54,0 @@

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

137289

increased by1.85%

Number of package files

20

increased by5.26%

Lines of code

439

increased by10.86%

Number of lines in readme file

60

increased by33.33%

Worsened metrics

Number of low supply chain risk alerts

1

increased byInfinity%

No dependency changes