cx 22.7.0 → 22.8.1

package/src/widgets/overlay/Dropdown.js

@@ -1,11 +1,11 @@
-import { Widget, VDOM } from "../../ui/Widget";
-import { Overlay } from "./Overlay";
-import { findFirst, isFocusable, getFocusedElement } from "../../util/DOM";
-import { isTouchDevice } from "../../util/isTouchDevice";
-import { ResizeManager } from "../../ui/ResizeManager";
 import { Localization } from "../../ui/Localization";
-import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
+import { ResizeManager } from "../../ui/ResizeManager";
+import { Widget, VDOM } from "../../ui/Widget";
 import { calculateNaturalElementHeight } from "../../util/calculateNaturalElementHeight";
+import { closestParent, findFirst, isFocusable } from "../../util/DOM";
+import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
+import { isTouchDevice } from "../../util/isTouchDevice";
+import { Overlay } from "./Overlay";
 
 /*
  Dropdown specific features:
@@ -568,6 +568,15 @@ export class Dropdown extends Overlay {
       }
       return [beacon, instance.relatedElement && super.render(context, instance, key)];
    }
+
+   getOverlayContainer() {
+      // this should be instance.relatedElement
+      if (this.relatedElement) {
+         let container = closestParent(this.relatedElement, (el) => el.dataset && el.dataset.focusableOverlayContainer);
+         if (container) return container;
+      }
+      return super.getOverlayContainer();
+   }
 }
 
 Dropdown.prototype.offset = 0;

package/src/widgets/overlay/Overlay.js

@@ -143,9 +143,14 @@ export class Overlay extends Container {
       if (this.onMouseEnter) instance.invoke("onMouseEnter", instance, component);
    }
 
+   getOverlayContainer() {
+      return document.body;
+   }
+
    containerFactory() {
       let el = document.createElement("div");
-      document.body.appendChild(el);
+      let container = this.getOverlayContainer();
+      container.appendChild(el);
       el.style.position = "absolute";
       if (this.containerStyle) Object.assign(el.style, parseStyle(this.containerStyle));
       return el;
@@ -255,6 +260,7 @@ class OverlayContent extends VDOM.Component {
             onMouseEnter={this.props.onMouseEnter}
             onMouseLeave={this.props.onMouseLeave}
             onClick={this.props.onClick}
+            data-focusable-overlay-container={this.props.focusableOverlayContainer}
          >
             {this.props.children}
          </div>
@@ -320,15 +326,8 @@ export class OverlayComponent extends VDOM.Component {
             onMouseEnter={this.onMouseEnter.bind(this)}
             onClick={this.onClick.bind(this)}
             onDidUpdate={this.overlayDidUpdate.bind(this)}
+            focusableOverlayContainer={widget.dismissOnFocusOut}
          >
-            {widget.modal ||
-               (widget.backdrop && (
-                  <div
-                     key="backdrop"
-                     className={CSS.element(baseClass, "modal-backdrop")}
-                     onClick={this.onBackdropClick.bind(this)}
-                  />
-               ))}
             {this.renderOverlayBody()}
          </OverlayContent>
       );
@@ -349,6 +348,13 @@ export class OverlayComponent extends VDOM.Component {
                })}
                style={parseStyle(data.shadowStyle)}
             >
+               {widget.backdrop && (
+                  <div
+                     key="backdrop"
+                     className={CSS.element("overlay", "modal-backdrop")}
+                     onClick={this.onBackdropClick.bind(this)}
+                  />
+               )}
                {content}
             </div>
          );
@@ -419,7 +425,11 @@ export class OverlayComponent extends VDOM.Component {
    }
 
    onMouseDown(e) {
-      let { data } = this.props.instance;
+      let { instance } = this.props;
+      let { widget, data } = instance;
+
+      if (widget.onMouseDown && instance.invoke("onMouseDown", e, instance) === false) return;
+
       let prefix = this.getResizePrefix(e);
       if (prefix) {
          //e.preventDefault();
@@ -437,7 +447,7 @@ export class OverlayComponent extends VDOM.Component {
       } else if (data.draggable) {
          ddMouseDown(e);
       }
-      e.stopPropagation();
+      //e.stopPropagation();
    }
 
    onBackdropClick(e) {