@semcore/utils - npm Package Compare versions

Comparing version 4.20.1 to 4.20.2-prerelease.1

CHANGELOG.md

@@ -5,4 +5,10 @@ # Changelog
 
-## [4.20.1-prerelease.1] - 2024-02-05
+## [4.20.2-prerelease.1] - 2024-02-08
 
+### Fixed
+
+- Fixed edge case bug when browser focus should be returned from modal, but a button that triggered modal opening is already unmounted.
+
+## [4.20.1] - 2024-02-05
+
 ### Changed
@@ -9,0 +15,0 @@

lib/components/invalid-state-pattern/InvalidStatePattern.js

@@ -13,4 +13,4 @@ "use strict";
 /*__reshadow-styles__:"./invalidStatePattern.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SPattern_jdey4_gg_{width:6px;height:100%;position:absolute;background-image:var(--intergalactic-border-critical-pattern, repeating-linear-gradient(315deg, rgba(209, 0, 47, 1) 0, rgba(209, 0, 47, 1) 2px, transparent 0, transparent 50%));background-size:6px 6px;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);border-bottom-left-radius:var(--intergalactic-control-rounded, 6px);border-top-left-radius:var(--intergalactic-control-rounded, 6px)}" /*__inner_css_end__*/, "jdey4_gg_") /*__reshadow_css_end__*/, {
-  "__SPattern": "___SPattern_jdey4_gg_"
+var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SPattern_1dhf5_gg_{width:6px;height:100%;position:absolute;background-image:var(--intergalactic-border-critical-pattern, repeating-linear-gradient(315deg, rgba(209, 0, 47, 1) 0, rgba(209, 0, 47, 1) 2px, transparent 0, transparent 50%));background-size:6px 6px;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);border-bottom-left-radius:var(--intergalactic-control-rounded, 6px);border-top-left-radius:var(--intergalactic-control-rounded, 6px)}" /*__inner_css_end__*/, "1dhf5_gg_") /*__reshadow_css_end__*/, {
+  "__SPattern": "___SPattern_1dhf5_gg_"
 });
@@ -17,0 +17,0 @@ var InvalidStatePatternComponent = function InvalidStatePatternComponent() {

lib/injectStyle.js

@@ -33,3 +33,3 @@ "use strict";
         // @ts-ignore
-        var version = "4.20.1-prerelease.1";
+        var version = "4.20.2-prerelease.1";
         sh = document.createElement('style');
@@ -36,0 +36,0 @@ sh.setAttribute('data-ui-v', version);

lib/use/useFocusLock.d.ts

@@ -1,4 +0,5 @@
-export declare const useFocusLock: (trapRef: React.RefObject<HTMLElement>, autoFocus: boolean, returnFocusTo: React.RefObject<HTMLElement> | null | 'auto', disabled?: boolean, focusMaster?: boolean) => any;
+import { isFocusInside } from '../focus-lock/isFocusInside';
+import { setFocus } from '../focus-lock/setFocus';
+export { isFocusInside, setFocus };
+export declare const useFocusLock: (trapRef: React.RefObject<HTMLElement>, autoFocus: boolean, returnFocusTo: React.RefObject<HTMLElement> | null | 'auto', disabled?: boolean, focusMaster?: boolean, onFocusOut?: ((event: Event) => void) | undefined) => any;
 export declare const hasFocusableIn: (element: HTMLElement) => boolean;
-export declare const isFocusInside: (topNode: HTMLElement | HTMLElement[]) => boolean;
-export declare const setFocus: (topNode: HTMLElement, lastNode?: Element) => void;

lib/use/useFocusLock.js

 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -8,81 +7,25 @@ Object.defineProperty(exports, "__esModule", {
 });
-exports.useFocusLock = exports.setFocus = exports.isFocusInside = exports.hasFocusableIn = void 0;
+exports.hasFocusableIn = void 0;
+Object.defineProperty(exports, "isFocusInside", {
+  enumerable: true,
+  get: function get() {
+    return _isFocusInside.isFocusInside;
+  }
+});
+Object.defineProperty(exports, "setFocus", {
+  enumerable: true,
+  get: function get() {
+    return _setFocus.setFocus;
+  }
+});
+exports.useFocusLock = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _canUseDOM = _interopRequireDefault(require("../canUseDOM"));
-var _focusLock = _interopRequireWildcard(require("focus-lock"));
 var _react = _interopRequireDefault(require("react"));
-/** "safe" focus movement means that function wrapper tries
- * to detect focus war (when two focus locks are trying to
- * control focus recursively) and disables it for 10 seconds
- */
-var focusMoveRequests = [];
-var focusMoveDisabledUntil = 0;
-var lastUserAction = 0;
-var safeMoveFocusInside = function safeMoveFocusInside() {
-  if (focusMoveDisabledUntil > Date.now()) return;
-  focusMoveRequests.push(Date.now());
-  if (focusMoveRequests.length > 10 && Date.now() - lastUserAction > 600) {
-    var lastFocusMoveRequests = focusMoveRequests.slice(-10);
-    var timeBetweenFocusMoveRequests = lastFocusMoveRequests.slice(1).map(function (time, index) {
-      return Math.abs(time - lastFocusMoveRequests[index]);
-    });
-    if (timeBetweenFocusMoveRequests.every(function (time) {
-      return time < 250;
-    })) {
-      focusMoveDisabledUntil = Date.now() + 10000;
-      focusMoveRequests = [];
-      console.error('[useFocusLock] Probably the focus war was detected. It is a process when multiple browser focus control subjects are reacting to "blur" event on their element and are trying to get it back. Focus move function was disabled for 10 seconds. Probably your page has different focus lock systems. If you have multiple versions of Intergalactic components, updated them to the latest version (at least to 15.16.3).');
-      return;
-    }
-  }
-  if (focusMoveRequests.length > 500) focusMoveRequests = focusMoveRequests.slice(-10);
-  return _focusLock["default"].apply(void 0, arguments);
-};
-if ((0, _canUseDOM["default"])()) {
-  document.addEventListener('keydown', function () {
-    lastUserAction = Date.now();
-  });
-  document.addEventListener('mousedown', function () {
-    lastUserAction = Date.now();
-  });
-}
+var _isFocusInside = require("../focus-lock/isFocusInside");
+var _setFocus = require("../focus-lock/setFocus");
+var _getFocusableIn = require("../focus-lock/getFocusableIn");
+var _focusBorders = require("../focus-lock/focusBorders");
 var focusBordersConsumers = new Set();
-var focusBordersRefs = {
-  before: null,
-  after: null
-};
-var addBorders = function addBorders() {
-  if (!focusBordersRefs.before) {
-    focusBordersRefs.before = document.createElement('div');
-    focusBordersRefs.before.setAttribute('tabindex', '0');
-    focusBordersRefs.before.style.position = 'fixed';
-    focusBordersRefs.before.dataset.id = '__intergalactic-focus-border-before';
-    document.body.prepend(focusBordersRefs.before);
-  }
-  if (!focusBordersRefs.after) {
-    focusBordersRefs.after = document.createElement('div');
-    focusBordersRefs.after.setAttribute('tabindex', '0');
-    focusBordersRefs.after.dataset.id = '__intergalactic-focus-border-after';
-    focusBordersRefs.after.style.position = 'fixed';
-    document.body.append(focusBordersRefs.after);
-  }
-};
-var removeBorders = function removeBorders() {
-  var _focusBordersRefs$bef, _focusBordersRefs$aft;
-  (_focusBordersRefs$bef = focusBordersRefs.before) === null || _focusBordersRefs$bef === void 0 ? void 0 : _focusBordersRefs$bef.remove();
-  (_focusBordersRefs$aft = focusBordersRefs.after) === null || _focusBordersRefs$aft === void 0 ? void 0 : _focusBordersRefs$aft.remove();
-  focusBordersRefs.before = null;
-  focusBordersRefs.after = null;
-};
-var areBordersPlacedCorrectly = function areBordersPlacedCorrectly() {
-  if (!focusBordersRefs.before || !focusBordersRefs.after) return true;
-  if (document.body.children[0] !== focusBordersRefs.before) return false;
-  if (document.body.children[document.body.children.length - 1] !== focusBordersRefs.after) return false;
-  return true;
-};
-var uniqueId = 0;
-var getUniqueId = function getUniqueId(prefix) {
-  return "".concat(prefix, "-").concat(Math.random().toString(36).slice(2), "-").concat(uniqueId++);
-};
 var useFocusBorders = function useFocusBorders(React, disabled) {
@@ -95,10 +38,15 @@ useUniqueIdHookMock(React);
     }
-    if (!areBordersPlacedCorrectly()) removeBorders();
-    if (focusBordersConsumers.size > 0) addBorders();
+    if (!(0, _focusBorders.areFocusBordersPlacedCorrectly)()) (0, _focusBorders.removeFocusBorders)();
+    if (focusBordersConsumers.size > 0) (0, _focusBorders.addFocusBorders)();
     return function () {
       focusBordersConsumers["delete"](id);
-      if (focusBordersConsumers.size === 0) removeBorders();
+      if (focusBordersConsumers.size === 0) (0, _focusBorders.removeFocusBorders)();
     };
   }, [disabled]);
 };
+var uniqueId = 0;
+var getUniqueId = function getUniqueId(prefix) {
+  return "".concat(prefix, "-").concat(Math.random().toString(36).slice(2), "-").concat(uniqueId++);
+};
+
 /**
@@ -155,7 +103,9 @@ * # Focus lock hook merging
   var focusMaster = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  var onFocusOut = arguments.length > 6 ? arguments[6] : undefined;
   useFocusBorders(React, disabled);
   var autoTriggerRef = React.useRef(null);
   var lastUserInteractionRef = React.useRef(undefined);
-  var handleFocusIn = React.useCallback(function (event) {
-    var focusCameFrom = event.relatedTarget;
+  var handleFocusOut = React.useCallback(function (event) {
+    var focusCameFrom = event.target;
+    var focusMovedTo = event.relatedTarget;
     setTimeout(function () {
@@ -172,8 +122,9 @@ if (!focusCameFrom) return;
       var trapNodes = currentFocusMaster ? [trapRef.current] : [trapRef.current].concat((0, _toConsumableArray2["default"])(focusLockAllTraps));
-      if ((0, _focusLock.focusInside)(trapNodes)) return;
+      if ((0, _isFocusInside.isFocusInside)(trapNodes, focusMovedTo)) return;
       if (focusCameFrom) {
-        safeMoveFocusInside(trapRef.current, focusCameFrom);
+        (0, _setFocus.setFocus)(trapRef.current, focusCameFrom, focusMovedTo);
       }
+      onFocusOut === null || onFocusOut === void 0 ? void 0 : onFocusOut(event);
     });
-  }, []);
+  }, [onFocusOut]);
   var handleMouseEvent = React.useCallback(function () {
@@ -187,7 +138,7 @@ lastUserInteractionRef.current = 'mouse';
     var trapNode = trapRef.current;
-    if (!(0, _focusLock.focusInside)(trapNode)) return;
+    if (trapNode && !(0, _isFocusInside.isFocusInside)(trapNode)) return;
     if ((0, _typeof2["default"])(returnFocusTo) === 'object' && returnFocusTo !== null && returnFocusTo !== void 0 && returnFocusTo.current) {
       var returnFocusNode = returnFocusTo === null || returnFocusTo === void 0 ? void 0 : returnFocusTo.current;
       setTimeout(function () {
-        return safeMoveFocusInside(returnFocusNode, trapNode);
+        return (0, _setFocus.setFocus)(returnFocusNode, trapNode);
       }, 0);
@@ -198,3 +149,3 @@ }
       setTimeout(function () {
-        return safeMoveFocusInside(autoTrigger, trapNode);
+        return (0, _setFocus.setFocus)(autoTrigger, trapNode);
       }, 0);
@@ -212,3 +163,3 @@ }
     };
-  }, []);
+  }, [disabled]);
   React.useEffect(function () {
@@ -236,12 +187,12 @@ if ((0, _typeof2["default"])(trapRef) !== 'object' || trapRef === null) return;
     var focusableChildren = Array.from(trapRef.current.children).flatMap(function (node) {
-      return (0, _focusLock.getFocusableIn)(node);
+      return (0, _getFocusableIn.getFocusableIn)(node);
     });
     if (focusableChildren.length === 0) return;
-    document.body.addEventListener('focusin', handleFocusIn);
+    document.body.addEventListener('focusout', handleFocusOut);
     document.body.addEventListener('mousedown', handleMouseEvent);
     document.body.addEventListener('touchstart', handleMouseEvent);
     document.body.addEventListener('keydown', handleKeyboardEvent);
-    if (autoFocus) safeMoveFocusInside(trapRef.current, (0, _typeof2["default"])(returnFocusTo) === 'object' ? returnFocusTo === null || returnFocusTo === void 0 ? void 0 : returnFocusTo.current : document.body);
+    if (autoFocus) (0, _setFocus.setFocus)(trapRef.current, (0, _typeof2["default"])(returnFocusTo) === 'object' ? returnFocusTo === null || returnFocusTo === void 0 ? void 0 : returnFocusTo.current : document.body);
     return function () {
-      document.body.removeEventListener('focusin', handleFocusIn);
+      document.body.removeEventListener('focusout', handleFocusOut);
       document.body.removeEventListener('mousedown', handleMouseEvent);
@@ -287,4 +238,5 @@ document.body.removeEventListener('touchstart', handleMouseEvent);
   var focusMaster = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  var onFocusOut = arguments.length > 5 ? arguments[5] : undefined;
   var hook = (_globalFocusLockHookK2 = (_globalFocusLockHookK3 = globalThis[globalFocusLockHookKey]) === null || _globalFocusLockHookK3 === void 0 ? void 0 : _globalFocusLockHookK3.hook) !== null && _globalFocusLockHookK2 !== void 0 ? _globalFocusLockHookK2 : useFocusLockHook;
-  return hook(_react["default"], trapRef, autoFocus, returnFocusTo, disabled, focusMaster);
+  return hook(_react["default"], trapRef, autoFocus, returnFocusTo, disabled, focusMaster, onFocusOut);
 };
@@ -294,10 +246,6 @@ exports.useFocusLock = useFocusLock;
   return Array.from(element.children).flatMap(function (node) {
-    return (0, _focusLock.getFocusableIn)(node);
+    return (0, _getFocusableIn.getFocusableIn)(node);
   }).length > 0;
 };
 exports.hasFocusableIn = hasFocusableIn;
-var isFocusInside = _focusLock.focusInside;
-exports.isFocusInside = isFocusInside;
-var setFocus = safeMoveFocusInside;
-exports.setFocus = setFocus;
 //# sourceMappingURL=useFocusLock.js.map

package.json

 {
   "name": "@semcore/utils",
   "description": "Semrush Utils Component",
-  "version": "4.20.1",
+  "version": "4.20.2-prerelease.1",
   "main": "lib/index.js",
@@ -27,3 +27,2 @@ "sideEffects": false,
     "classnames": "2.2.6",
-    "focus-lock": "0.11.3",
     "hoist-non-react-statics": "3.3.2",
@@ -33,3 +32,3 @@ "@phytonmk/nano-css": "5.3.7"
   "peerDependencies": {
-    "@semcore/core": "^2.17.1",
+    "@semcore/core": "^2.17.2-prerelease.1",
     "react": "16.8 - 18",
@@ -36,0 +35,0 @@ "react-dom": "16.8 - 18"

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1078304

increased by3.01%

Dependency count

7

decreased by-12.5%

Number of package files

358

increased by9.15%

Lines of code

11682

increased by2.1%

Worsened metrics

Number of low quality alerts

2

increased by100%

Dependency changes

• - Removedfocus-lock@0.11.3

• - Removedfocus-lock@0.11.3(transitive)

• - Removedtslib@2.6.3(transitive)