fix: update focus-lock to support Shadow Dom

theKashey · Feb 14, 2022 · 668a559 · 668a559
1 parent 6db9980
commit 668a559
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 19 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## [2.7.1](https://github.com/theKashey/react-focus-lock/compare/v2.7.0...v2.7.1) (2021-12-14)
+
+
+
 # [2.7.0](https://github.com/theKashey/react-focus-lock/compare/v2.6.0...v2.7.0) (2021-12-12)
 
 

diff --git a/_tests/FocusLock.spec.js b/_tests/FocusLock.spec.js
@@ -269,12 +269,12 @@ d-action
       const wrapper = mount(<div>
         <div>
           text
-          <button className="action1">action1</button>
+          <button className="action1" autoFocus>action1</button>
           text
         </div>
         <FocusLock>
           <div>
-            text
+            note - first action is disabled
             <button className="action2-false" tabIndex={1} disabled>action2-false</button>
             <button className="action2" tabIndex={1}>2-action2</button>
             text

diff --git a/package.json b/package.json
@@ -94,7 +94,7 @@
   "homepage": "https://github.com/theKashey/react-focus-lock#readme",
   "dependencies": {
     "@babel/runtime": "^7.0.0",
-    "focus-lock": "^0.10.1",
+    "focus-lock": "^0.10.2",
     "prop-types": "^15.6.2",
     "react-clientside-effect": "^1.2.5",
     "use-callback-ref": "^1.2.5",

diff --git a/src/Lock.js b/src/Lock.js
@@ -3,11 +3,11 @@ import {
   node, bool, string, any, arrayOf, oneOfType, object, func,
 } from 'prop-types';
 import * as constants from 'focus-lock/constants';
-import {useMergeRefs} from 'use-callback-ref';
+import { useMergeRefs } from 'use-callback-ref';
 
-import {hiddenGuard} from './FocusGuard';
-import {mediumFocus, mediumBlur, mediumSidecar} from './medium';
-import {useEffect} from "react";
+import { useEffect } from 'react';
+import { hiddenGuard } from './FocusGuard';
+import { mediumFocus, mediumBlur, mediumSidecar } from './medium';
 
 const emptyArray = [];
 
@@ -71,10 +71,10 @@ const FocusLock = React.forwardRef(function FocusLockUI(props, parentRef) {
   }, []);
 
   const returnFocus = React.useCallback((allowDefer) => {
-    const {current: returnFocusTo} = originalFocusedElement;
+    const { current: returnFocusTo } = originalFocusedElement;
     if (returnFocusTo && returnFocusTo.focus) {
       const howToReturnFocus = typeof shouldReturnFocus === 'function' ? shouldReturnFocus(returnFocusTo) : shouldReturnFocus;
-      if (Boolean(howToReturnFocus)) {
+      if (howToReturnFocus) {
         const returnFocusOptions = typeof howToReturnFocus === 'object' ? howToReturnFocus : undefined;
         originalFocusedElement.current = null;
 
@@ -138,11 +138,11 @@ const FocusLock = React.forwardRef(function FocusLockUI(props, parentRef) {
     <React.Fragment>
       {hasLeadingGuards && [
         // nearest focus guard
-        <div key="guard-first" data-focus-guard tabIndex={disabled ? -1 : 0} style={hiddenGuard}/>,
+        <div key="guard-first" data-focus-guard tabIndex={disabled ? -1 : 0} style={hiddenGuard} />,
 
         // first tabbed element guard
         hasPositiveIndices
-          ? <div key="guard-nearest" data-focus-guard tabIndex={disabled ? -1 : 1} style={hiddenGuard}/>
+          ? <div key="guard-nearest" data-focus-guard tabIndex={disabled ? -1 : 1} style={hiddenGuard} />
           : null,
       ]}
       {!disabled && (
@@ -173,7 +173,7 @@ const FocusLock = React.forwardRef(function FocusLockUI(props, parentRef) {
       </Container>
       {
         hasTailingGuards
-        && <div data-focus-guard tabIndex={disabled ? -1 : 0} style={hiddenGuard}/>
+        && <div data-focus-guard tabIndex={disabled ? -1 : 0} style={hiddenGuard} />
       }
     </React.Fragment>
   );
@@ -185,7 +185,7 @@ FocusLock.propTypes = {
   returnFocus: oneOfType([bool, object, func]),
   focusOptions: object,
   noFocusGuards: bool,
-  usePositiveIndices: bool,
+  hasPositiveIndices: bool,
 
   allowTextSelection: bool,
   autoFocus: bool,
@@ -216,7 +216,7 @@ FocusLock.defaultProps = {
   autoFocus: true,
   persistentFocus: false,
   crossFrame: true,
-  usePositiveIndices: undefined,
+  hasPositiveIndices: undefined,
   allowTextSelection: undefined,
   group: undefined,
   className: undefined,

diff --git a/src/Trap.js b/src/Trap.js
@@ -101,7 +101,7 @@ const activateTrap = () => {
               }
               document.body.focus();
             } else {
-              result = moveFocusInside(workingArea, lastActiveFocus, {focusOptions});
+              result = moveFocusInside(workingArea, lastActiveFocus, { focusOptions });
               lastPortaledElement = {};
             }
           }

diff --git a/yarn.lock b/yarn.lock
@@ -5444,10 +5444,10 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-focus-lock@^0.10.1:
-  version "0.10.1"
-  resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.10.1.tgz#5f46fa74fefb87144479c2f8e276f0eedd8081b2"
-  integrity sha512-b9yUklCi4fTu2GXn7dnaVf4hiLVVBp7xTiZarAHMODV2To6Bitf6F/UI67RmKbdgJQeVwI1UO0d9HYNbXt3GkA==
+focus-lock@^0.10.2:
+  version "0.10.2"
+  resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.10.2.tgz#561c62bae8387ecba1dd8e58a6df5ec29835c644"
+  integrity sha512-DSaI/UHZ/02sg1P616aIWgToQcrKKBmcCvomDZ1PZvcJFj350PnWhSJxJ76T3e5/GbtQEARIACtbrdlrF9C5kA==
   dependencies:
     tslib "^2.0.3"