[EuiFocusTrap] Use react-focus-on

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `27.1.0`.
+- Replaced `react-focus-lock` with `react-focus-on` ([#3631](https://github.com/elastic/eui/pull/3631))
 
 ## [`27.1.0`](https://github.com/elastic/eui/tree/v27.1.0)
 

package.json

@@ -64,7 +64,7 @@
     "prop-types": "^15.6.0",
     "react-ace": "^7.0.5",
     "react-beautiful-dnd": "^13.0.0",
-    "react-focus-lock": "^1.17.7",
+    "react-focus-on": "^3.4.1",
     "react-input-autosize": "^2.2.2",
     "react-is": "~16.3.0",
     "react-view": "^2.3.2",

src-docs/src/views/focus_trap/focus_trap.js

@@ -12,7 +12,7 @@ import {
 import FormExample from '../form_compressed/form_compressed';
 
 export default () => {
-  const [isDisabled, changeDisabled] = useState(false);
+  const [isDisabled, changeDisabled] = useState(true);
 
   const toggleDisabled = () => changeDisabled(!isDisabled);
 

src-docs/src/views/focus_trap/focus_trap_example.js

@@ -47,6 +47,10 @@ export const FocusTrapExample = {
             Use <EuiCode>clickOutsideDisables</EuiCode> to disable the focus
             trap when the user clicks outside the trap.
           </p>
+          <p>
+            Use <EuiCode>noIsolation=false</EuiCode> when pointer events on
+            outside elements should be disallowed.
+          </p>
         </React.Fragment>
       ),
       props: { EuiFocusTrap },

src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap

@@ -6,12 +6,12 @@ Array [
   <div>
     <div
       data-focus-guard="true"
-      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
     <div
       data-focus-guard="true"
-      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="1"
     />
     <div
@@ -24,7 +24,7 @@ Array [
     </div>
     <div
       data-focus-guard="true"
-      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
   </div>,
@@ -37,12 +37,12 @@ Array [
   <div>
     <div
       data-focus-guard="true"
-      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
     <div
       data-focus-guard="true"
-      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="1"
     />
     <div
@@ -76,7 +76,7 @@ Array [
     </div>
     <div
       data-focus-guard="true"
-      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
   </div>,
@@ -91,12 +91,12 @@ Array [
   <div>
     <div
       data-focus-guard="true"
-      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
     <div
       data-focus-guard="true"
-      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="1"
     />
     <div
@@ -131,7 +131,7 @@ Array [
     </div>
     <div
       data-focus-guard="true"
-      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
   </div>,
@@ -150,12 +150,12 @@ Array [
   <div>
     <div
       data-focus-guard="true"
-      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
     <div
       data-focus-guard="true"
-      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="1"
     />
     <div
@@ -188,7 +188,7 @@ Array [
     </div>
     <div
       data-focus-guard="true"
-      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
   </div>,
@@ -201,12 +201,12 @@ Array [
   <div>
     <div
       data-focus-guard="true"
-      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
     <div
       data-focus-guard="true"
-      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="1"
     />
     <div
@@ -239,7 +239,7 @@ Array [
     </div>
     <div
       data-focus-guard="true"
-      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
   </div>,
@@ -252,12 +252,12 @@ Array [
   <div>
     <div
       data-focus-guard="true"
-      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
     <div
       data-focus-guard="true"
-      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="1"
     />
     <div
@@ -290,7 +290,7 @@ Array [
     </div>
     <div
       data-focus-guard="true"
-      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
   </div>,
@@ -351,12 +351,12 @@ Array [
   <div>
     <div
       data-focus-guard="true"
-      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
     <div
       data-focus-guard="true"
-      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="1"
     />
     <div
@@ -389,7 +389,7 @@ Array [
     </div>
     <div
       data-focus-guard="true"
-      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
   </div>,
@@ -407,12 +407,12 @@ Array [
   <div>
     <div
       data-focus-guard="true"
-      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="-1"
     />
     <div
       data-focus-guard="true"
-      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="-1"
     />
     <div
@@ -445,7 +445,7 @@ Array [
     </div>
     <div
       data-focus-guard="true"
-      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="-1"
     />
   </div>,

src/components/collapsible_nav/collapsible_nav.test.tsx

@@ -18,8 +18,8 @@
  */
 
 import React from 'react';
-import { render } from 'enzyme';
-import { requiredProps } from '../../test/required_props';
+import { render, mount } from 'enzyme';
+import { requiredProps, takeMountedSnapshot } from '../../test';
 
 import { EuiCollapsibleNav } from './collapsible_nav';
 
@@ -33,20 +33,28 @@ const propsNeededToRender = { id: 'id', isOpen: true };
 
 describe('EuiCollapsibleNav', () => {
   test('is rendered', () => {
-    const component = render(
+    const component = mount(
       <EuiCollapsibleNav {...propsNeededToRender} {...requiredProps} />
     );
 
-    expect(component).toMatchSnapshot();
+    expect(
+      takeMountedSnapshot(component, {
+        hasArrayOutput: true,
+      })
+    ).toMatchSnapshot();
   });
 
   describe('props', () => {
     test('onClose', () => {
-      const component = render(
+      const component = mount(
         <EuiCollapsibleNav {...propsNeededToRender} onClose={() => {}} />
       );
 
-      expect(component).toMatchSnapshot();
+      expect(
+        takeMountedSnapshot(component, {
+          hasArrayOutput: true,
+        })
+      ).toMatchSnapshot();
     });
 
     test('isDocked', () => {
@@ -58,23 +66,31 @@ describe('EuiCollapsibleNav', () => {
     });
 
     test('dockedBreakpoint', () => {
-      const component = render(
+      const component = mount(
         <EuiCollapsibleNav {...propsNeededToRender} dockedBreakpoint={500} />
       );
 
-      expect(component).toMatchSnapshot();
+      expect(
+        takeMountedSnapshot(component, {
+          hasArrayOutput: true,
+        })
+      ).toMatchSnapshot();
     });
 
     test('button', () => {
-      const component = render(
+      const component = mount(
         <EuiCollapsibleNav {...propsNeededToRender} button={<button />} />
       );
 
-      expect(component).toMatchSnapshot();
+      expect(
+        takeMountedSnapshot(component, {
+          hasArrayOutput: true,
+        })
+      ).toMatchSnapshot();
     });
 
     test('showButtonIfDocked', () => {
-      const component = render(
+      const component = mount(
         <EuiCollapsibleNav
           {...propsNeededToRender}
           button={<button />}
@@ -83,39 +99,55 @@ describe('EuiCollapsibleNav', () => {
         />
       );
 
-      expect(component).toMatchSnapshot();
+      expect(
+        takeMountedSnapshot(component, {
+          hasArrayOutput: true,
+        })
+      ).toMatchSnapshot();
     });
 
     test('can alter mask props with maskProps without throwing error', () => {
-      const component = render(
+      const component = mount(
         <EuiCollapsibleNav
           {...propsNeededToRender}
           maskProps={{ headerZindexLocation: 'above' }}
         />
       );
 
-      expect(component).toMatchSnapshot();
+      expect(
+        takeMountedSnapshot(component, {
+          hasArrayOutput: true,
+        })
+      ).toMatchSnapshot();
     });
   });
 
   describe('close button', () => {
     test('can be hidden', () => {
-      const component = render(
+      const component = mount(
         <EuiCollapsibleNav {...propsNeededToRender} showCloseButton={false} />
       );
 
-      expect(component).toMatchSnapshot();
+      expect(
+        takeMountedSnapshot(component, {
+          hasArrayOutput: true,
+        })
+      ).toMatchSnapshot();
     });
 
     test('extends EuiButtonEmpty', () => {
-      const component = render(
+      const component = mount(
         <EuiCollapsibleNav
           {...propsNeededToRender}
           closeButtonProps={{ className: 'class', 'data-test-subj': 'test' }}
         />
       );
 
-      expect(component).toMatchSnapshot();
+      expect(
+        takeMountedSnapshot(component, {
+          hasArrayOutput: true,
+        })
+      ).toMatchSnapshot();
     });
   });