Uses new WindowEvent component for Flyout "close on ESC"

src/components/flyout/flyout.js

@@ -7,6 +7,7 @@ import { keyCodes } from '../../services';
 
 import { EuiOverlayMask } from '../overlay_mask';
 import { EuiButtonIcon } from '../button';
+import { EuiWindowEvent } from '../window_event';
 
 const sizeToClassNameMap = {
   s: 'euiFlyout--small',
@@ -20,7 +21,6 @@ export class EuiFlyout extends Component {
   onKeyDown = event => {
     if (event.keyCode === keyCodes.ESCAPE) {
       event.preventDefault();
-      event.stopPropagation();
       this.props.onClose();
     }
   };
@@ -72,7 +72,6 @@ export class EuiFlyout extends Component {
         }}
         className={classes}
         tabIndex={0}
-        onKeyDown={this.onKeyDown}
         style={newStyle || style}
         {...rest}
       >
@@ -90,6 +89,7 @@ export class EuiFlyout extends Component {
 
     return (
       <span>
+        <EuiWindowEvent event="keydown" handler={this.onKeyDown} />
         {optionalOverlay}
         {/* Trap focus even when ownFocus={false}, otherwise closing the flyout won't return focus
         to the originating button */}

src/components/index.js

@@ -320,6 +320,10 @@ export {
   EuiToolTip,
 } from './tool_tip';
 
+export {
+  EuiWindowEvent
+} from './window_event';
+
 export {
   EuiHideFor,
   EuiShowFor,

src/components/window_event/index.js

@@ -0,0 +1 @@
+export { default as EuiWindowEvent } from './window_event';

src/components/window_event/window_event.js

@@ -0,0 +1,51 @@
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * Adds and removes window events for you (renders null)
+ * Usage:
+ * <WindowEvent event='keydown' handler={this.handleKeyDown} />
+ */
+export default class WindowEvent extends Component {
+
+  componentDidMount() {
+    this.addEvent(this.props);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.event !== this.props.event || prevProps.handler !== this.props.handler) {
+      this.removeEvent(prevProps);
+      this.addEvent(this.props);
+    }
+  }
+
+  componentWillUnmount() {
+    this.removeEvent(this.props);
+  }
+
+  addEvent({ event, handler }) {
+    window.addEventListener(event, handler);
+  }
+
+  removeEvent({ event, handler }) {
+    window.removeEventListener(event, handler);
+  }
+
+  render() {
+    return null;
+  }
+
+}
+
+WindowEvent.displayName = 'WindowEvent';
+
+WindowEvent.propTypes = {
+  /**
+   * Type of event
+   */
+  event: PropTypes.string.isRequired,
+  /**
+    * Event callback function
+    */
+  handler: PropTypes.func.isRequired
+};

src/components/window_event/window_event.test.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { EuiWindowEvent } from '.';
+
+describe('EuiWindowEvent', () => {
+
+  beforeEach(() => {
+    window.addEventListener = jest.fn();
+    window.removeEventListener = jest.fn();
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  test('attaches handler to window event on mount', () => {
+    const handler = () => null;
+    shallow(<EuiWindowEvent event="click" handler={handler} />);
+    expect(window.addEventListener).toHaveBeenCalledTimes(1);
+    expect(window.addEventListener).toHaveBeenCalledWith('click', handler);
+  });
+
+  test('removes handler on unmount', () => {
+    const handler = () => null;
+    const wrapper = shallow(<EuiWindowEvent event="click" handler={handler} />);
+    wrapper.unmount();
+    expect(window.removeEventListener).toHaveBeenLastCalledWith('click', handler);
+  });
+
+  test('removes and re-attaches handler to window event on update', () => {
+    const handler1 = () => null;
+    const handler2 = () => null;
+    const wrapper = shallow(<EuiWindowEvent event="click" handler={handler1} />);
+
+    expect(window.addEventListener).toHaveBeenLastCalledWith('click', handler1);
+
+    wrapper.setProps({ event: 'hover', handler: handler2 });
+
+    expect(window.removeEventListener).toHaveBeenLastCalledWith('click', handler1);
+    expect(window.addEventListener).toHaveBeenLastCalledWith('hover', handler2);
+  });
+
+  test('does not remove or re-attach handler if update is irrelevant', () => {
+    const handler = () => null;
+    const wrapper = shallow(<EuiWindowEvent event="click" handler={handler} />);
+    expect(window.addEventListener).toHaveBeenCalledTimes(1);
+
+    wrapper.setProps({ whatever: 'ugh' });
+    expect(window.addEventListener).toHaveBeenCalledTimes(1);
+    expect(window.removeEventListener).not.toHaveBeenCalled();
+  });
+
+});