Uses new WindowEvent component for Flyout "close on ESC"

CHANGELOG.md

@@ -1,5 +1,10 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added a new `EuiWindowEvent` component for declarative, safe management of `window` event listeners
+- Changed `Flyout` component to close on ESC keypress even if the flyout does not have focus
+
+## [`master`](https://github.com/elastic/eui/tree/master)
+
 - Added `zIndexAdjustment` to `EuiPopover` which allows tweaking the popover content's `z-index` ([#1097](https://github.com/elastic/eui/pull/1097))
 - Added new `EuiSuperSelect` component and `hasArrow` prop to `EuiPopover` ([#921](https://github.com/elastic/eui/pull/921))
 

src-docs/src/routes.js

@@ -216,6 +216,9 @@ import { ToolTipExample }
 import { ToggleExample }
   from './views/toggle/toggle_example';
 
+import { WindowEventExample }
+  from './views/window_event/window_event_example';
+
 import { XYChartExample }
   from './views/series_chart/series_chart_example';
 
@@ -395,6 +398,7 @@ const navigation = [{
     ToggleExample,
     UtilityClassesExample,
     MutationObserverExample,
+    WindowEventExample,
   ].map(example => createExample(example)),
 }, {
   name: 'Package',

src-docs/src/views/window_event/window_event.js

@@ -0,0 +1,51 @@
+import React, { Component } from 'react';
+
+import {
+  EuiWindowEvent,
+  EuiIcon,
+  EuiButton,
+  EuiSpacer,
+} from '../../../../src/components';
+
+export class WindowEvent extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      stars: []
+    };
+    this.add = this.add.bind(this);
+    this.remove = this.remove.bind(this);
+  }
+
+  add() {
+    this.setState((state) => ({ stars: [...state.stars, <EuiIcon type="starEmpty" />] }));
+  }
+
+  remove({ key }) {
+    if (key === 'Backspace' || key === 'Delete') {
+      this.setState((state) => ({ stars: state.stars.slice(0, -1) }));
+      return;
+    }
+  }
+
+  render() {
+    const { stars } = this.state;
+    return (
+      <div>
+        <EuiWindowEvent event="keydown" handler={this.remove} />
+        <EuiButton onClick={this.add}>Add a Star</EuiButton>
+
+        <EuiSpacer size="m" />
+
+        <p>To remove a star, press the backspace or delete key.</p>
+
+        <EuiSpacer size="m" />
+
+        <div className="stars-container">
+          {stars.map((star, i) => <span key={i} style={{ marginRight: '5px' }}>{star}</span>)}
+        </div>
+      </div>
+    );
+  }
+}

src-docs/src/views/window_event/window_event_example.js

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideSectionTypes,
+} from '../../components';
+
+import {
+  EuiCode,
+  EuiWindowEvent,
+} from '../../../../src/components';
+
+import { WindowEvent } from './window_event';
+const source = require('!!raw-loader!./window_event');
+const html = renderToHtml(WindowEvent);
+
+export const WindowEventExample = {
+  title: 'Window Event',
+  sections: [{
+    title: 'Window Event',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: source,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: html,
+    }],
+    text: (
+      <p>
+        Use an <EuiCode>EuiWindowEvent</EuiCode> to safely manage adding and auto-removing event listeners to <EuiCode>window</EuiCode>.
+      </p>
+    ),
+    components: { EuiWindowEvent },
+    demo: <WindowEvent />,
+  }],
+};

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();
+  });
+
+});