react-focus-lock - npm Package Compare versions

Comparing version 2.5.2 to 2.6.0

dist/cjs/Lock.js

@@ -90,17 +90,28 @@ "use strict";
   }, [onDeactivationCallback]);
+  (0, React.useEffect)(function () {
+    if (!disabled) {
+      // cleanup return focus on trap deactivation
+      // sideEffect/returnFocus should happen by this time
+      originalFocusedElement.current = null;
+    }
+  }, []);
   var returnFocus = React.useCallback(function (allowDefer) {
-    var current = originalFocusedElement.current;
+    var returnFocusTo = originalFocusedElement.current;
 
-    if (Boolean(shouldReturnFocus) && current && current.focus) {
-      var focusOptions = (0, _typeof2["default"])(shouldReturnFocus) === 'object' ? shouldReturnFocus : undefined;
-      originalFocusedElement.current = null;
+    if (returnFocusTo && returnFocusTo.focus) {
+      var howToReturnFocus = typeof shouldReturnFocus === 'function' ? shouldReturnFocus(returnFocusTo) : shouldReturnFocus;
 
-      if (allowDefer) {
-        // React might return focus after update
-        // it's safer to defer the action
-        Promise.resolve().then(function () {
-          return current.focus(focusOptions);
-        });
-      } else {
-        current.focus(focusOptions);
+      if (Boolean(howToReturnFocus)) {
+        var focusOptions = (0, _typeof2["default"])(howToReturnFocus) === 'object' ? howToReturnFocus : undefined;
+        originalFocusedElement.current = null;
+
+        if (allowDefer) {
+          // React might return focus after update
+          // it's safer to defer the action
+          Promise.resolve().then(function () {
+            return returnFocusTo.focus(focusOptions);
+          });
+        } else {
+          returnFocusTo.focus(focusOptions);
+        }
       }
@@ -107,0 +118,0 @@ }

dist/cjs/Trap.js

@@ -212,3 +212,3 @@ "use strict";
 var attachHandler = function attachHandler() {
-  document.addEventListener('focusin', onTrap, true);
+  document.addEventListener('focusin', onTrap);
   document.addEventListener('focusout', onBlur);
@@ -219,3 +219,3 @@ window.addEventListener('blur', onWindowBlur);
 var detachHandler = function detachHandler() {
-  document.removeEventListener('focusin', onTrap, true);
+  document.removeEventListener('focusin', onTrap);
   document.removeEventListener('focusout', onBlur);
@@ -222,0 +222,0 @@ window.removeEventListener('blur', onWindowBlur);

dist/es2015/Lock.js

@@ -8,2 +8,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { mediumFocus, mediumBlur, mediumSidecar } from './medium';
+import { useEffect } from "react";
 var emptyArray = [];
@@ -61,17 +62,28 @@ var FocusLock = /*#__PURE__*/React.forwardRef(function FocusLockUI(props, parentRef) {
   }, [onDeactivationCallback]);
+  useEffect(function () {
+    if (!disabled) {
+      // cleanup return focus on trap deactivation
+      // sideEffect/returnFocus should happen by this time
+      originalFocusedElement.current = null;
+    }
+  }, []);
   var returnFocus = React.useCallback(function (allowDefer) {
-    var current = originalFocusedElement.current;
+    var returnFocusTo = originalFocusedElement.current;
 
-    if (Boolean(shouldReturnFocus) && current && current.focus) {
-      var focusOptions = typeof shouldReturnFocus === 'object' ? shouldReturnFocus : undefined;
-      originalFocusedElement.current = null;
+    if (returnFocusTo && returnFocusTo.focus) {
+      var howToReturnFocus = typeof shouldReturnFocus === 'function' ? shouldReturnFocus(returnFocusTo) : shouldReturnFocus;
 
-      if (allowDefer) {
-        // React might return focus after update
-        // it's safer to defer the action
-        Promise.resolve().then(function () {
-          return current.focus(focusOptions);
-        });
-      } else {
-        current.focus(focusOptions);
+      if (Boolean(howToReturnFocus)) {
+        var focusOptions = typeof howToReturnFocus === 'object' ? howToReturnFocus : undefined;
+        originalFocusedElement.current = null;
+
+        if (allowDefer) {
+          // React might return focus after update
+          // it's safer to defer the action
+          Promise.resolve().then(function () {
+            return returnFocusTo.focus(focusOptions);
+          });
+        } else {
+          returnFocusTo.focus(focusOptions);
+        }
       }
@@ -78,0 +90,0 @@ }

dist/es2015/Trap.js

@@ -194,3 +194,3 @@ import * as React from 'react';
 var attachHandler = function attachHandler() {
-  document.addEventListener('focusin', onTrap, true);
+  document.addEventListener('focusin', onTrap);
   document.addEventListener('focusout', onBlur);
@@ -201,3 +201,3 @@ window.addEventListener('blur', onWindowBlur);
 var detachHandler = function detachHandler() {
-  document.removeEventListener('focusin', onTrap, true);
+  document.removeEventListener('focusin', onTrap);
   document.removeEventListener('focusout', onBlur);
@@ -204,0 +204,0 @@ window.removeEventListener('blur', onWindowBlur);

interfaces.d.ts

@@ -11,4 +11,7 @@ import * as React from 'react';
    * more precisely (ie. `{ preventScroll: true }`)
+   *
+   * can also accept a function with the first argument equals to element focus will be returned to
+   * in order to provide full control to the user space
    */
-  returnFocus?: boolean | FocusOptions;
+  returnFocus?: boolean | FocusOptions | ((returnTo: Element)=> boolean | FocusOptions);
 
@@ -15,0 +18,0 @@ /**

package.json

 {
   "name": "react-focus-lock",
-  "version": "2.5.2",
+  "version": "2.6.0",
   "description": "It is a trap! (for a focus)",
@@ -51,3 +51,3 @@ "main": "dist/cjs/index.js",
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
@@ -98,3 +98,3 @@ "devDependencies": {
     "@babel/runtime": "^7.0.0",
-    "focus-lock": "^0.9.1",
+    "focus-lock": "^0.9.2",
     "prop-types": "^15.6.2",
@@ -101,0 +101,0 @@ "react-clientside-effect": "^1.2.5",

react-focus-lock.d.ts

@@ -7,3 +7,3 @@ import * as React from 'react';
  */
-declare const ReactFocusLock:React.FC<ReactFocusLockProps>;
+declare const ReactFocusLock: React.FC<ReactFocusLockProps>;
 
@@ -10,0 +10,0 @@ export default ReactFocusLock;

README.md

@@ -327,3 +327,3 @@ <div align="left">
 
-You may use [react-focus-on](https://github.com/theKashey/react-focus-on) to archive everything above, assembled in the right order.
+You may use [react-focus-on](https://github.com/theKashey/react-focus-on) to achieve everything above, assembled in the right order.
 
@@ -330,0 +330,0 @@ # Licence

UI/UI.d.ts

@@ -7,3 +7,3 @@ import * as React from 'react';
  */
-declare const ReactFocusLock:React.FC<ReactFocusLockProps & {sideCar: React.SFC<any>}>;
+declare const ReactFocusLock: React.FC<ReactFocusLockProps & { sideCar: React.SFC<any> }>;
 
@@ -39,2 +39,2 @@ export default ReactFocusLock;
  */
-export function useFocusInside(node: React.RefObject<HTMLElement>):void;
+export function useFocusInside(node: React.RefObject<HTMLElement>): void;

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

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

Improved metrics

Total package byte prevSize

73990

increased by1.47%

Lines of code

1531

increased by1.59%

Dependency changes

• + Addedreact@18.3.1(transitive)

• - Removedreact@17.0.2(transitive)

• Updatedfocus-lock@^0.9.2