fix: remove react-focus-lock

Author: cscheffauer

package.json

@@ -150,7 +150,6 @@
     "object-assign": "4.1.1",
     "react-aria": "^3.10.0",
     "react-aria-modal": "^2.11.1",
-    "react-focus-lock": "2.11.3",
     "react-toastify": "^9.0.8",
     "react-uid": "^2.2.0",
     "react-verification-input": "^4.1.2",

src/components/ModalContainer/ModalContainer.types.ts

@@ -1,6 +1,6 @@
-import { CSSProperties, ReactNode, ComponentProps, AriaRole } from 'react';
+import { CSSProperties, ReactNode, AriaRole } from 'react';
 import type { PlacementType } from '../ModalArrow/ModalArrow.types';
-import { FocusScope } from '@react-aria/focus';
+import type { FocusScopeProps } from '@react-aria/focus';
 import { AriaLabelRequired } from '../../utils/a11y';
 
 export type Color = 'primary' | 'secondary' | 'tertiary' | 'quaternary';
@@ -86,5 +86,5 @@ export type Props = AriaLabelRequired & {
   /**
    * Props to be passed to FocusLock
    */
-  focusLockProps?: Omit<ComponentProps<typeof FocusScope>, 'children' | 'key' | 'css'>;
+  focusLockProps?: Omit<FocusScopeProps, 'children' | 'key' | 'css'>;
 };

src/components/OverlayAlert/OverlayAlert.types.ts

@@ -1,5 +1,5 @@
-import type { CSSProperties, ReactElement, ReactNode, ComponentProps } from 'react';
-import FocusLock from 'react-focus-lock';
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
+import type { FocusScopeProps } from '@react-aria/focus';
 
 import type { ButtonControlProps } from '../ButtonControl';
 import type { ButtonSimpleProps } from '../ButtonSimple';
@@ -21,8 +21,9 @@ export type Props = OverlayProps &
          */
         title: string;
       }
-    | ({ title?: never } & AriaLabelRequired) // if a title is not provided, a label is required
+    | ({ title?: never } & AriaLabelRequired)
   ) & {
+    // if a title is not provided, a label is required
     /**
      * Actions associated with this OverlayAlert.
      */
@@ -71,7 +72,7 @@ export type Props = OverlayProps &
     /**
      * Props to be passed to Overlay for FocusLock, default `{returnFocus: true}`
      */
-    focusLockProps?: Omit<ComponentProps<typeof FocusLock>, 'children'>;
+    focusLockProps?: Omit<FocusScopeProps, 'children' | 'key' | 'css'>;
 
     /**
      * Callback function to be fired when Escape key is pressed.

src/legacy/EventOverlay/index.js

@@ -4,7 +4,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import omit from 'lodash/omit';
-import FocusLock from 'react-focus-lock';
+import { FocusScope } from '@react-aria/focus';
 
 const defaultDims = {
   offsetTop: 0,
@@ -984,7 +984,13 @@ class EventOverlay extends React.Component {
     );
 
     const withFocusLock = (content) =>
-      shouldLockFocus ? <FocusLock {...focusLockProps}>{content}</FocusLock> : content;
+      shouldLockFocus ? (
+        <FocusScope {...focusLockProps} contain>
+          {content}
+        </FocusScope>
+      ) : (
+        content
+      );
 
     const withPortal = (content) =>
       portalNode ? ReactDOM.createPortal(content, portalNode) : content;

yarn.lock

@@ -1786,7 +1786,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.14.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7":
+"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.14.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7":
   version: 7.14.8
   resolution: "@babel/runtime@npm:7.14.8"
   dependencies:
@@ -3110,7 +3110,6 @@ __metadata:
     react-aria: ^3.10.0
     react-aria-modal: ^2.11.1
     react-dom: 16.14.0
-    react-focus-lock: 2.11.3
     react-hot-loader: ^4.2.0
     react-router-dom: ^5.0.0
     react-test-renderer: ^16.8.0
@@ -12878,13 +12877,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"detect-node-es@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "detect-node-es@npm:1.1.0"
-  checksum: e46307d7264644975b71c104b9f028ed1d3d34b83a15b8a22373640ce5ea630e5640b1078b8ea15f202b54641da71e4aa7597093bd4b91f113db520a26a37449
-  languageName: node
-  linkType: hard
-
 "detect-node@npm:^2.0.4":
   version: 2.1.0
   resolution: "detect-node@npm:2.1.0"
@@ -15110,15 +15102,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"focus-lock@npm:^1.3.5":
-  version: 1.3.5
-  resolution: "focus-lock@npm:1.3.5"
-  dependencies:
-    tslib: ^2.0.3
-  checksum: 09fb0e4402694aabafa8f7d49a656f683bbf39c94efc0c0240934d880792ef86d8c11bb7d77ef6f5d68ccfdfb7f191ecc2b38a259182a6791bcf96860a408d1c
-  languageName: node
-  linkType: hard
-
 "focus-trap-react@npm:^3.0.4":
   version: 3.1.4
   resolution: "focus-trap-react@npm:3.1.4"
@@ -24755,17 +24738,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-clientside-effect@npm:^1.2.6":
-  version: 1.2.6
-  resolution: "react-clientside-effect@npm:1.2.6"
-  dependencies:
-    "@babel/runtime": ^7.12.13
-  peerDependencies:
-    react: ^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
-  checksum: 7db6110027a51458b1a46109d2b63dd822825f483c71afef7c0c0a671f3b1aa155049dbd8651c9d536ffac83601f8823b7c3f8916b4f4ee5c3cb7647a85cce4e
-  languageName: node
-  linkType: hard
-
 "react-colorful@npm:^5.1.2":
   version: 5.3.0
   resolution: "react-colorful@npm:5.3.0"
@@ -24910,26 +24882,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-focus-lock@npm:2.11.3":
-  version: 2.11.3
-  resolution: "react-focus-lock@npm:2.11.3"
-  dependencies:
-    "@babel/runtime": ^7.0.0
-    focus-lock: ^1.3.5
-    prop-types: ^15.6.2
-    react-clientside-effect: ^1.2.6
-    use-callback-ref: ^1.3.2
-    use-sidecar: ^1.1.2
-  peerDependencies:
-    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 2d2e191e802ecc9dc5cf5ebf5a8e71bba3e93caccadfa3d08276e08dad97bee90afb819054393a455423757acb8e028f2d1251fd71a46554b95a97aa0f0c18bf
-  languageName: node
-  linkType: hard
-
 "react-helmet-async@npm:^1.0.7":
   version: 1.0.9
   resolution: "react-helmet-async@npm:1.0.9"
@@ -29514,21 +29466,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"use-callback-ref@npm:^1.3.2":
-  version: 1.3.2
-  resolution: "use-callback-ref@npm:1.3.2"
-  dependencies:
-    tslib: ^2.0.0
-  peerDependencies:
-    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: df690f2032d56aabcea0400313a04621429f45bceb4d65d38829b3680cae3856470ce72958cb7224b332189d8faef54662a283c0867dd7c769f9a5beff61787d
-  languageName: node
-  linkType: hard
-
 "use-composed-ref@npm:^1.0.0":
   version: 1.1.0
   resolution: "use-composed-ref@npm:1.1.0"
@@ -29566,22 +29503,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"use-sidecar@npm:^1.1.2":
-  version: 1.1.2
-  resolution: "use-sidecar@npm:1.1.2"
-  dependencies:
-    detect-node-es: ^1.1.0
-    tslib: ^2.0.0
-  peerDependencies:
-    "@types/react": ^16.9.0 || ^17.0.0 || ^18.0.0
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 925d1922f9853e516eaad526b6fed1be38008073067274f0ecc3f56b17bb8ab63480140dd7c271f94150027c996cea4efe83d3e3525e8f3eda22055f6a39220b
-  languageName: node
-  linkType: hard
-
 "use@npm:^3.1.0":
   version: 3.1.1
   resolution: "use@npm:3.1.1"