[dialog, overlay] allow closing dialog on escape key

src/dialog/Dialog.jsx

@@ -1,15 +1,36 @@
 import { Overlay } from '../overlay/Overlay.jsx';
 import style from './dialog.css';
 
-function Dialog ({}, children) {
+function Dialog ({closeOnEsc = true}, children) {
+    function createHandlers (closeDialog) {
+        function handleKeyDown ({which}) {
+            (which === 27) && closeDialog();
+        }
+
+        return {
+            onCreate () {
+                document.addEventListener('keydown', handleKeyDown, true);
+            },
+
+            onRemove (element, done) {
+                document.removeEventListener('keydown', handleKeyDown, true);
+                done();
+            }
+        };
+    }
+
     return function (state, actions) {
         if (!state.dialog.isOpen) {
             return null;
         }
 
+        const closeDialog = actions.dialog.close;
+        const elementHandlers = closeOnEsc ? createHandlers(closeDialog) : {};
+        const {onCreate, onRemove} = elementHandlers;
+
         return (
-            <Overlay onBackgroundClick={actions.dialog.close}>
-                <button className={style.close} onclick={actions.dialog.close} />
+            <Overlay oncreate={onCreate} onremove={onRemove} onBackgroundClick={closeDialog}>
+                <button className={style.close} onclick={closeDialog} />
 
                 <div className={style.content}>
                     {children}

src/overlay/Overlay.jsx

@@ -4,14 +4,14 @@ function preventPropagation (event) {
     event.stopPropagation();
 }
 
-function Overlay ({onBackgroundClick}, children) {
+function Overlay ({onBackgroundClick, ...props}, children) {
     return (
-        <div className={style.overlay} onclick={onBackgroundClick}>
+        <div className={style.overlay} onclick={onBackgroundClick} {...props}>
             <div className={style.contentWrapper} onclick={preventPropagation}>
                 {children}
             </div>
         </div>
-    )
+    );
 }
 
 export {