fix(dialog): Attempt to use native HTML Dialog element and pollyfill

package.json

@@ -23,6 +23,7 @@
     "prepublish": "typings install && tsc",
     "test": "mocha src/index.test.js",
     "testw": "mocha src/index.test.js -w",
+    "sass": "cpx './src/**/*.scss' ./lib",
     "semantic-release": "semantic-release pre && npm publish && semantic-release post"
   },
   "release": {
@@ -38,6 +39,7 @@
   },
   "dependencies": {
     "classnames": "^2.2.3",
+    "dialog-polyfill": "0.4.3",
     "lodash": "^4.6.0",
     "rx-combine-latest-obj": "^1.0.2"
   },
@@ -51,6 +53,7 @@
   "devDependencies": {
     "chai": "^3.5.0",
     "condition-circle": "1.2.0",
+    "cpx": "^1.3.1",
     "ghooks": "1.0.3",
     "mocha": "^2.4.5",
     "semantic-release": "^4.3.5",

src/dialog/Dialog.ts

@@ -1,12 +1,11 @@
 import { Observable as $ } from 'rx';
-const { div, h6, nav, section, p } = require('cycle-snabbdom');
+const { h, h6, nav, section } = require('cycle-snabbdom');
+const dialogPolyfill = require('dialog-polyfill/dialog-polyfill.js');
 import * as classNames from 'classnames';
-const style = require('react-toolbox/lib/dialog/style');
+const style = require('./style');
 import { componentFactory } from '../helpers/componentFactory';
 import { CycleDomComponent, CycleComponent, CycleUiComponentProps }
   from '../helpers/cycleDomInterfaces';
-import { Overlay } from '../overlay';
-import { Button } from '../button';
 const { concat } = require('lodash');
 
 export interface DialogProps extends CycleUiComponentProps {
@@ -49,18 +48,33 @@ export function DialogFactory(props$: $<DialogProps>,
       [style.active]: props.active
     }, props.className);
 
+    const insert = (vnode: any) => {
+      const dialog: any = document.querySelector('dialog');
+      dialogPolyfill.registerDialog(dialog);
+      if (props.active) {
+        dialog.showModal();
+      } else {
+        const overlay: any = document.querySelector('._dialog_overlay');
+        if (overlay != null) {
+          console.log('removing dialog overlay');
+          overlay.parentNode.removeChild(overlay);
+        }
+      }
+    };
+
     return (
-      Overlay( { active: props.active }, [
-        div( { props: { className }, attrs: { 'data-cycle-ui': 'dialog' } }, [
-          section( { props: { role: 'body', className: style.body } }, concat([],
+//      Overlay( { active: props.active }, [
+        h('dialog', {hook: {insert}, props: { className }, attrs: { 'data-cycle-ui': 'dialog' } }, [
+          section( { props: { className: style.body },
+            attrs: { role: 'body' } }, concat([],
             props.title && h6( { props: { className: style.title } }, props.title),
             children
           )),
           nav( { props: { role: 'navigation', className: style.navigation } },
             actionsDOM
           )
         ])
-      ]).DOM
+//      ]).DOM
     );
   });
 

src/dialog/style.scss

@@ -0,0 +1,37 @@
+@import "../../node_modules/react-toolbox/lib/base";
+@import "../../node_modules/react-toolbox/lib/dialog/config";
+@import "../../node_modules/react-toolbox/lib/dialog/style";
+//@import "../../node_modules/dialog-polyfill/dialog-polyfill.css";
+
+.root {
+  position: absolute;
+  left: 0; right: 0;
+  // width: fit-content;
+  // height: fit-content;
+  margin: auto;
+  display: none;
+}
+
+dialog[open] {
+  display: block;
+}
+
+dialog + :global(.backdrop) {
+  position: fixed;
+  top: 0; right: 0; bottom: 0; left: 0;
+  background: rgba(0,0,0,0.1);
+}
+
+/* for small devices, modal dialogs go full-screen */
+@media screen and (max-width: 540px) {
+  dialog[_polyfill_modal] {  /* TODO: implement */
+    top: 0;
+    width: auto;
+    margin: 1em;
+  }
+}
+
+:global(._dialog_overlay) {
+  position: fixed;
+  top: 0; right: 0; bottom: 0; left: 0;
+}