[EuiFocusTrap] Use react-focus-on (#3631)

* WIP: react-focus-on * WIP: fix GuideFullScreen * noIsolation; onClickOutside * euiflyout snapshot updates * euiflyout snapshot updates * euimodal snapshot updates * euidatagrid snapshot updates * euicolorpalettepicker snapshot updates * euisuperselect snapshot updates * euicollapsible snapshot updates * euifocustrap snapshot updates * allow for array snapshots with takeMountedSnapshot * docs improvements * default to noIsolation=true and scrollLock=false * CL
elastic · Jul 16, 2020 · a7d7348 · a7d7348
1 parent ed0ef9a
commit a7d7348
Show file tree

Hide file tree

Showing 23 changed files with 338 additions and 2,336 deletions.
diff --git a/CHANGELOG.md b/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)
 

diff --git a/package.json b/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",

diff --git a/src-docs/src/views/focus_trap/focus_trap.js b/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);
 

diff --git a/src-docs/src/views/focus_trap/focus_trap_example.js b/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 },

diff --git a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap b/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
@@ -75,7 +75,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>,
@@ -90,12 +90,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
@@ -129,7 +129,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>,
@@ -148,12 +148,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
@@ -185,7 +185,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>,
@@ -198,12 +198,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
@@ -235,7 +235,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>,
@@ -248,12 +248,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
@@ -285,7 +285,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>,
@@ -345,12 +345,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
@@ -382,7 +382,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>,
@@ -400,12 +400,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
@@ -437,7 +437,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>,

diff --git a/src/components/collapsible_nav/collapsible_nav.test.tsx b/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();
     });
   });