First cut of hoist dialog with isDraggable option.

desktop/cmp/dialog/Dialog.js

@@ -0,0 +1,143 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | [email protected])
+ *
+ * Copyright © 2019 Extremely Heavy Industries Inc.
+ */
+
+import React, {Component} from 'react';
+import ReactDOM from 'react-dom';
+import Draggable from 'react-draggable';
+// import {isNil} from 'lodash';
+
+// import {action, bindable} from '@xh/hoist/mobx';
+import {HoistComponent, LayoutSupport, elemFactory} from '@xh/hoist/core';
+import {createObservableRef} from '@xh/hoist/utils/react';
+
+import {div, hbox, vbox, span, filler} from '@xh/hoist/cmp/layout';
+import {splitLayoutProps} from '@xh/hoist/utils/react';
+
+import './DialogStyles.scss';
+
+// to add:
+// click outside to close option?
+// centered with backmask (traditional modal)
+
+// see https://reactjs.org/docs/portals.html#event-bubbling-through-portals
+// and
+// https://github.com/palantir/blueprint/blob/develop/packages/core/src/components/portal/portal.tsx
+
+export class Dialog extends Component {
+
+    dialogRootId = 'xh-dialog-root';
+
+    dialogWrapperRef = createObservableRef();
+
+    constructor(props) {
+        super(props);
+        this.dialogRoot = document.getElementById(this.dialogRootId);
+        if (!this.dialogRoot) {
+            this.dialogRoot = document.createElement('div');
+            this.dialogRoot.setAttribute('id', this.dialogRootId);
+            document.body.appendChild(this.dialogRoot);
+        }
+
+        this.el = document.createElement('div');
+    }
+
+    componentDidMount() {
+        // The portal element is inserted in the DOM tree after
+        // the Modal's children are mounted, meaning that children
+        // will be mounted on a detached DOM node. If a child
+        // component requires to be attached to the DOM tree
+        // immediately when mounted, for example to measure a
+        // DOM node, or uses 'autoFocus' in a descendant, add
+        // state to Modal and only render the children when Modal
+        // is inserted in the DOM tree.
+        this.dialogRoot.appendChild(this.el);
+
+    }
+
+    componentDidUpdate() {
+        this.dialogWrapperRef.current?.focus();
+    }
+
+    componentWillUnmount() {
+        this.dialogRoot.removeChild(this.el);
+    }
+
+    render() {
+        const {dragOptions, isDraggable, isOpen} = this.props;
+
+        if (isOpen === false)  return null;
+
+        return ReactDOM.createPortal(
+            dragOptions || isDraggable ?
+                this.makeDraggable() :
+                this.makeDialog(),
+            this.el
+        );
+    }
+
+    makeDraggable() {
+        const [layoutProps, nonLayoutProps] = splitLayoutProps(this.props),
+            {minHeight, height, minWidth, width, ...restLayoutProps} = layoutProps,
+            {dragOptions = {}} = nonLayoutProps;
+
+        if (!dragOptions.handle && this.props.children?.type?.displayName == 'Panel') {
+            dragOptions.handle = '.xh-panel-header__title';
+        }
+
+        return <Draggable
+            bounds='body'
+            {...dragOptions}
+        >
+            {
+                div({
+                    onKeyDown: (evt) => this.handleKeyDown(evt),
+                    tabIndex: '0',
+                    ref: this.dialogWrapperRef,
+                    className: 'xh-dialog-root__draggable xh-dialog-root__content',
+                    style: {
+                        top: height || minHeight ? 'calc(50vh - ' + parseFloat(height || minHeight)/2 + 'px)' : null,
+                        left: width || minWidth ? 'calc(50vw - ' + parseFloat(width || minWidth)/2 + 'px)' : null,
+                        ...restLayoutProps
+                    },
+                    items: this.props.children
+                })
+            }
+        </Draggable>;
+    }
+
+    makeDialog() {
+        const [layoutProps] = splitLayoutProps(this.props);
+
+        return div({
+            onKeyDown: (evt) => this.handleKeyDown(evt),
+            tabIndex: '0',
+            ref: this.dialogWrapperRef,
+            className: 'xh-dialog-root__fixed',
+            item: div({
+                className: 'xh-dialog-root__content',
+                style: {
+                    ...layoutProps
+                },
+                items: this.props.children
+            })
+        });
+    }
+
+    handleKeyDown(evt) {
+        switch (evt.key) {
+            case 'Escape':
+                this.handleEscapKey(evt); break;
+        }
+    }
+
+    handleEscapKey(evt) {
+        const {canEscapeKeyClose, close} = this.props;
+        if (canEscapeKeyClose) close(evt);
+    }
+}
+
+export const dialog = elemFactory(Dialog);

desktop/cmp/dialog/DialogStyles.scss

@@ -0,0 +1,53 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | [email protected])
+ *
+ * Copyright © 2019 Extremely Heavy Industries Inc.
+ */
+
+
+#xh-dialog-root {
+    .xh-dialog-root__content {
+        box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1),
+            0 4px 8px rgba(16, 22, 26, 0.2),
+            0 18px 46px 6px rgba(16, 22, 26, 0.2);
+        border: var(--xh-border-solid);
+
+        > .xh-panel > .xh-panel-header {
+            padding-right: 0px;
+        }
+    }
+
+    .xh-dialog-root__draggable {
+        z-index: 1;
+        position: absolute;
+
+        &.xh-dialog-root__content {
+            > .xh-panel > .xh-panel-header {
+                .xh-panel-header__title {
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+
+    .xh-dialog-root__fixed {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        opacity: 1;
+        background-color: rgba(16, 22, 26, 0.7);
+        overflow: auto;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}
+
+

desktop/cmp/dialog/index.js

@@ -0,0 +1,7 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | [email protected])
+ *
+ * Copyright © 2019 Extremely Heavy Industries Inc.
+ */
+export * from './Dialog';

package.json

@@ -56,6 +56,7 @@
     "qs": "~6.9.1",
     "react-beautiful-dnd": "~11.0.5",
     "react-dates": "~21.5.0",
+    "react-draggable": "^4.2.0",
     "react-dropzone": "~10.1.9",
     "react-onsenui": "~1.11.2",
     "react-select": "~3.0.8",

yarn.lock

@@ -2749,7 +2749,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2, classnames@~2.2.6:
+classnames@^2.2, classnames@^2.2.5, classnames@~2.2.6:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
@@ -8389,6 +8389,14 @@ react-dom@~16.8.0:
     prop-types "^15.6.2"
     scheduler "^0.13.6"
 
+react-draggable@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.2.0.tgz#40cc5209082ca7d613104bf6daf31372cc0e1114"
+  integrity sha512-5wFq//gEoeTYprnd4ze8GrFc+Rbnx+9RkOMR3vk4EbWxj02U6L6T3yrlKeiw4X5CtjD2ma2+b3WujghcXNRzkw==
+  dependencies:
+    classnames "^2.2.5"
+    prop-types "^15.6.0"
+
 react-dropzone@~10.1.9:
   version "10.1.10"
   resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-10.1.10.tgz#f340290dfc26ac09ad68abc020ab6232c23d6cf3"