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 />,
+  }],
+};