cx 26.2.1 → 26.2.3

package/src/widgets/overlay/Overlay.tsx

@@ -33,335 +33,425 @@ import { captureMouseOrTouch, getCursorPos } from "./captureMouse";
  */
 
 export interface OverlayConfig extends StyledContainerConfig {
-   /** Set to `true` to enable resizing. */
-   resizable?: BooleanProp;
+  /** Set to `true` to enable resizing. */
+  resizable?: BooleanProp;
 
-   /** Set to `true` to enable dragging the overlay. */
-   draggable?: BooleanProp;
+  /** Set to `true` to enable dragging the overlay. */
+  draggable?: BooleanProp;
 
-   /** Base CSS class to be applied to the field. Defaults to `overlay`. */
-   baseClass?: string;
+  /** Base CSS class to be applied to the field. Defaults to `overlay`. */
+  baseClass?: string;
 
-   /** Width of resize handle area. */
-   resizeWidth?: number;
+  /** Width of resize handle area. */
+  resizeWidth?: number;
 
-   /** Set to `true` to initially place the overlay in the center of the page. */
-   center?: boolean;
+  /** Set to `true` to initially place the overlay in the center of the page. */
+  center?: boolean;
 
-   /** Set to `true` to initially place the overlay in the center of the page horizontally. */
-   centerX?: boolean;
+  /** Set to `true` to initially place the overlay in the center of the page horizontally. */
+  centerX?: boolean;
 
-   /** Set to `true` to initially place the overlay in the center of the page vertically. */
-   centerY?: boolean;
+  /** Set to `true` to initially place the overlay in the center of the page vertically. */
+  centerY?: boolean;
 
-   /** Set to `true` to add a modal backdrop which masks mouse events for the rest of the page. */
-   modal?: boolean;
+  /** Set to `true` to add a modal backdrop which masks mouse events for the rest of the page. */
+  modal?: boolean;
 
-   /** Set to `true` to add a modal backdrop which will dismiss the window when clicked. */
-   backdrop?: boolean;
+  /** Set to `true` to add a modal backdrop which will dismiss the window when clicked. */
+  backdrop?: boolean;
 
-   /** Set to `true` to force the element to be rendered inline, instead of being appended to the body element.
-    * Inline overlays have z-index set to a very high value, to ensure they are displayed on top of the other content. */
-   inline?: boolean;
+  /** Set to `true` to force the element to be rendered inline, instead of being appended to the body element.
+   * Inline overlays have z-index set to a very high value, to ensure they are displayed on top of the other content. */
+  inline?: boolean;
 
-   /** Set to `true` to automatically focus the top level overlay element. */
-   autoFocus?: boolean;
+  /** Set to `true` to automatically focus the top level overlay element. */
+  autoFocus?: boolean;
 
-   /** Set to `true` to automatically focus the first focusable child in the overlay. */
-   autoFocusFirstChild?: boolean;
+  /** Set to `true` to automatically focus the first focusable child in the overlay. */
+  autoFocusFirstChild?: boolean;
 
-   /** Set to `true` to append the set animate state after the initial render. Appended CSS class may be used to add show/hide animations. */
-   animate?: boolean;
+  /** Set to `true` to append the set animate state after the initial render. Appended CSS class may be used to add show/hide animations. */
+  animate?: boolean;
 
-   /** Number of milliseconds to wait, before removing the element from the DOM. Used in combination with the animate property. */
-   destroyDelay?: number;
+  /** Number of milliseconds to wait, before removing the element from the DOM. Used in combination with the animate property. */
+  destroyDelay?: number;
 
-   /** Automatically dismiss overlay if it loses focus. */
-   dismissOnFocusOut?: boolean;
+  /** Automatically dismiss overlay if it loses focus. */
+  dismissOnFocusOut?: boolean;
 
-   /** Set to true to make the top level overlay element focusable. */
-   focusable?: boolean;
+  /** Set to true to make the top level overlay element focusable. */
+  focusable?: boolean;
 
-   /** Set to `true` to dismiss the window if the user presses the back button in the browser. */
-   dismissOnPopState?: boolean;
+  /** Set to `true` to dismiss the window if the user presses the back button in the browser. */
+  dismissOnPopState?: boolean;
 
-   /** A callback function which fires while the overlay is being moved around. */
-   onMove?: string | ((e: Event, instance: Instance, component: any) => void);
+  /** A callback function which fires while the overlay is being moved around. */
+  onMove?: string | ((e: Event, instance: Instance, component: any) => void);
 
-   /** A callback function which fires while the overlay is being resized. */
-   onResize?: string | ((e: Event, instance: Instance, component: any) => void);
+  /** A callback function which fires while the overlay is being resized. */
+  onResize?: string | ((e: Event, instance: Instance, component: any) => void);
 
-   /** zIndex */
-   zIndex?: NumberProp;
+  /** zIndex */
+  zIndex?: NumberProp;
 
-   /** Set to `true` to make the window automatically close if Esc is pressed on the keyboard. Default value is false.*/
-   closeOnEscape?: boolean;
+  /** Set to `true` to make the window automatically close if Esc is pressed on the keyboard. Default value is false.*/
+  closeOnEscape?: boolean;
 
-   /** Custom CSS styling for the container element. */
-   containerStyle?: string;
+  /** Custom CSS styling for the container element. */
+  containerStyle?: string;
 
-   /** Callback for focus out event. */
-   onFocusOut?: string;
+  /** Callback for focus out event. */
+  onFocusOut?: string;
 
-   /** Callback for mouse enter event. */
-   onMouseEnter?: string;
+  /** Callback for mouse enter event. */
+  onMouseEnter?: string;
 
-   /** Callback for mouse leave event. */
-   onMouseLeave?: string;
+  /** Callback for mouse leave event. */
+  onMouseLeave?: string;
 
-   /** Callback for backdrop click. */
-   onBackdropClick?: string;
+  /** Callback for backdrop click. */
+  onBackdropClick?: string;
 
-   /** Callback for mouse down event. */
-   onMouseDown?: string;
+  /** Callback for mouse down event. */
+  onMouseDown?: string;
 
-   /** Callback for key down event. */
-   onKeyDown?: string;
+  /** Callback for key down event. */
+  onKeyDown?: string;
 
-   /** Callback fired before dismiss. */
-   onBeforeDismiss?: string | (() => boolean);
+  /** Callback fired before dismiss. */
+  onBeforeDismiss?: string | (() => boolean);
 
-   /** Callback fired when overlay will dismiss. */
-   overlayWillDismiss?: (instance: Instance, component: any) => boolean;
+  /** Callback fired when overlay will dismiss. */
+  overlayWillDismiss?: (instance: Instance, component: any) => boolean;
 
-   /** Callback for click event. */
-   onClick?: string;
+  /** Callback for click event. */
+  onClick?: string;
 }
 
-export class OverlayInstance<WidgetType extends OverlayBase<any, any> = Overlay> extends Instance<WidgetType> {
-   declare positionChangeSubscribers: SubscriberList;
-   declare dismiss?: () => void;
-   onBeforeDismiss?: () => boolean;
+export interface OverlayOpenOptions {
+  initiatingEvent?: React.SyntheticEvent;
+  name?: string;
+  dismiss?: () => void;
+  parentEl?: Element;
+  subscribeToBeforeDismiss?: (callback: () => boolean) => void;
+  destroyDelay?: number;
+  removeParentDOMElement?: boolean;
+}
+
+export interface ConfigureOverlayContainerContext {
+  relatedElement?: HTMLElement | null;
+  initiatingEvent?: React.SyntheticEvent;
+}
+
+export class OverlayInstance<
+  WidgetType extends OverlayBase<any, any> = Overlay,
+> extends Instance<WidgetType> {
+  declare positionChangeSubscribers: SubscriberList;
+  declare dismiss?: () => void;
+  onBeforeDismiss?: () => boolean;
+  declare beaconEl?: HTMLElement | null;
 }
 
 export class OverlayBase<
-   Config extends OverlayConfig = OverlayConfig,
-   InstanceType extends OverlayInstance<any> = OverlayInstance<any>,
+  Config extends OverlayConfig = OverlayConfig,
+  InstanceType extends OverlayInstance<any> = OverlayInstance<any>,
 > extends ContainerBase<Config, InstanceType> {
-   // Properties declared here to support prototype assignments
-   declare styled: true;
-   declare baseClass: string;
-   declare resizable?: BooleanProp;
-   declare resizeWidth: number;
-   declare center?: boolean;
-   declare centerX?: boolean;
-   declare centerY?: boolean;
-   declare modal?: boolean;
-   declare backdrop?: boolean;
-   declare inline?: boolean;
-   declare autoFocus?: boolean;
-   declare autoFocusFirstChild?: boolean;
-   declare animate?: boolean;
-   declare draggable?: BooleanProp;
-   declare destroyDelay?: number;
-   declare dismissOnFocusOut?: boolean;
-   declare focusable?: boolean;
-   declare containerStyle?: string;
-   declare dismissOnPopState?: boolean;
-   declare closeOnEscape?: boolean;
-   declare onFocusOut?: string;
-   declare onMouseLeave?: string;
-   declare onMouseEnter?: string;
-   declare onKeyDown?: string;
-   declare onMove?: string | ((e: Event, instance: Instance, component: any) => void);
-   declare onResize?: string | ((e: Event, instance: Instance, component: any) => void);
-   declare onClick?: string;
-   declare onMouseDown?: string;
-   declare onBackdropClick?: string;
-   declare overlayWillDismiss?: (instance: Instance, component: any) => boolean;
-   declare style?: any;
-   declare pad?: boolean;
-
-   init() {
-      if (this.center) this.centerX = this.centerY = this.center;
-
-      super.init();
-   }
-
-   declareData(...args: any[]) {
-      super.declareData(...args, {
-         shadowStyle: {
-            structured: true,
-         },
-         resizable: undefined,
-         draggable: undefined,
-         zIndex: undefined,
-      });
-   }
-
-   prepareData(context: RenderingContext, instance: InstanceType): void {
-      let { data } = instance;
-      data.stateMods = {
-         ...data.stateMods,
-         inline: this.inline,
-         modal: this.modal,
-         pad: this.pad,
-         resizable: data.resizable,
-         draggable: data.draggable,
-         animate: this.animate,
-         shadow: this.modal || this.backdrop,
-      };
-
-      super.prepareData(context, instance);
-   }
-
-   initInstance(context: RenderingContext, instance: InstanceType): void {
-      instance.positionChangeSubscribers = new SubscriberList();
-      super.initInstance(context, instance);
-   }
-
-   explore(context: RenderingContext, instance: InstanceType): void {
-      if (isBinding(this.visible)) {
-         if (!instance.dismiss) {
-            instance.dismiss = () => {
-               if (instance.onBeforeDismiss && instance.onBeforeDismiss() === false) return;
-               instance.set("visible", false);
-            };
-         }
-      } else if (context.options.dismiss) instance.dismiss = context.options.dismiss;
-
-      if (instance.dismiss) {
-         context.push("parentOptions", {
-            ...context.parentOptions,
-            dismiss: instance.dismiss,
-         });
+  static configureOverlayContainer?: (
+    containerEl: HTMLElement,
+    context: ConfigureOverlayContainerContext,
+  ) => void;
+
+  // Properties declared here to support prototype assignments
+  declare styled: true;
+  declare baseClass: string;
+  declare resizable?: BooleanProp;
+  declare resizeWidth: number;
+  declare center?: boolean;
+  declare centerX?: boolean;
+  declare centerY?: boolean;
+  declare modal?: boolean;
+  declare backdrop?: boolean;
+  declare inline?: boolean;
+  declare autoFocus?: boolean;
+  declare autoFocusFirstChild?: boolean;
+  declare animate?: boolean;
+  declare draggable?: BooleanProp;
+  declare destroyDelay?: number;
+  declare dismissOnFocusOut?: boolean;
+  declare focusable?: boolean;
+  declare containerStyle?: string;
+  declare dismissOnPopState?: boolean;
+  declare closeOnEscape?: boolean;
+  declare onFocusOut?: string;
+  declare onMouseLeave?: string;
+  declare onMouseEnter?: string;
+  declare onKeyDown?: string;
+  declare onMove?:
+    | string
+    | ((e: Event, instance: Instance, component: any) => void);
+  declare onResize?:
+    | string
+    | ((e: Event, instance: Instance, component: any) => void);
+  declare onClick?: string;
+  declare onMouseDown?: string;
+  declare onBackdropClick?: string;
+  declare overlayWillDismiss?: (instance: Instance, component: any) => boolean;
+  declare style?: any;
+  declare pad?: boolean;
+  declare needsBeacon: boolean;
+
+  init() {
+    if (this.center) this.centerX = this.centerY = this.center;
+
+    super.init();
+  }
+
+  declareData(...args: any[]) {
+    super.declareData(...args, {
+      shadowStyle: {
+        structured: true,
+      },
+      resizable: undefined,
+      draggable: undefined,
+      zIndex: undefined,
+    });
+  }
+
+  prepareData(context: RenderingContext, instance: InstanceType): void {
+    let { data } = instance;
+    data.stateMods = {
+      ...data.stateMods,
+      inline: this.inline,
+      modal: this.modal,
+      pad: this.pad,
+      resizable: data.resizable,
+      draggable: data.draggable,
+      animate: this.animate,
+      shadow: this.modal || this.backdrop,
+    };
+
+    super.prepareData(context, instance);
+  }
+
+  initInstance(context: RenderingContext, instance: InstanceType): void {
+    instance.positionChangeSubscribers = new SubscriberList();
+    super.initInstance(context, instance);
+  }
+
+  explore(context: RenderingContext, instance: InstanceType): void {
+    if (isBinding(this.visible)) {
+      if (!instance.dismiss) {
+        instance.dismiss = () => {
+          if (instance.onBeforeDismiss && instance.onBeforeDismiss() === false)
+            return;
+          instance.set("visible", false);
+        };
       }
+    } else if (context.options.dismiss)
+      instance.dismiss = context.options.dismiss;
+
+    if (instance.dismiss) {
+      context.push("parentOptions", {
+        ...context.parentOptions,
+        dismiss: instance.dismiss,
+      });
+    }
 
-      if (instance.cache("dismiss", instance.dismiss)) instance.markShouldUpdate(context);
+    if (instance.cache("dismiss", instance.dismiss))
+      instance.markShouldUpdate(context);
 
-      context.push("parentPositionChangeEvent", instance.positionChangeSubscribers);
+    context.push(
+      "parentPositionChangeEvent",
+      instance.positionChangeSubscribers,
+    );
 
-      super.explore(context, instance);
-   }
+    super.explore(context, instance);
+  }
 
-   exploreCleanup(context: RenderingContext, instance: InstanceType): void {
-      if (instance.dismiss) context.pop("parentOptions");
-      context.pop("parentPositionChangeEvent");
-   }
+  exploreCleanup(context: RenderingContext, instance: InstanceType): void {
+    if (instance.dismiss) context.pop("parentOptions");
+    context.pop("parentPositionChangeEvent");
+  }
 
-   render(context: RenderingContext, instance: InstanceType, key: string): any {
+  render(context: RenderingContext, instance: InstanceType, key: string): any {
+    if (this.needsBeacon)
       return (
-         <OverlayComponent
-            key={key}
-            instance={instance}
-            subscribeToBeforeDismiss={context.options.subscribeToBeforeDismiss}
-            parentEl={context.options.parentEl}
-         >
-            {this.renderContents(context, instance)}
-         </OverlayComponent>
+        <OverlayBeacon
+          key={key}
+          childrenFactory={(beaconEl) => (
+            <OverlayComponent
+              beaconEl={beaconEl}
+              instance={instance}
+              subscribeToBeforeDismiss={
+                context.options.subscribeToBeforeDismiss
+              }
+              parentEl={context.options.parentEl}
+            >
+              {this.renderContents(context, instance)}
+            </OverlayComponent>
+          )}
+        />
       );
-   }
-
-   renderContents(context: RenderingContext, instance: InstanceType): any {
-      return this.renderChildren(context, instance);
-   }
-
-   overlayDidMount(instance: InstanceType, component: any): void {
-      let { el } = component;
-      if (this.centerX) if (!el.style.left) el.style.left = `${(window.innerWidth - el.offsetWidth) / 2}px`;
-      if (this.centerY)
-         if (!el.style.top) el.style.top = `${Math.max(0, (window.innerHeight - el.offsetHeight) / 2)}px`;
-   }
-
-   overlayDidUpdate(instance: InstanceType, component: any): void {}
-
-   overlayWillUnmount(instance: InstanceType, component: any): void {}
-
-   handleFocusOut(instance: InstanceType, component: any): void {
-      if (this.onFocusOut) instance.invoke("onFocusOut", instance, component);
-
-      if (this.dismissOnFocusOut && instance.dismiss) instance.dismiss();
-   }
 
-   handleKeyDown(e: any, instance: InstanceType, component?: any): void | false {
-      if (this.onKeyDown && instance.invoke("onKeyDown", e, instance, component) === false) return false;
-
-      if (this.closeOnEscape && e.keyCode == KeyCode.esc && instance.dismiss) {
-         instance.dismiss();
-         e.stopPropagation();
-      }
-   }
-
-   handleMouseLeave(instance: InstanceType, component: any): void {
-      if (this.onMouseLeave) instance.invoke("onMouseLeave", instance, component);
-   }
-
-   handleMouseEnter(instance: InstanceType, component: any): void {
-      if (this.onMouseEnter) instance.invoke("onMouseEnter", instance, component);
-   }
-
-   getOverlayContainer(): HTMLElement {
-      return document.body;
-   }
-
-   containerFactory(): HTMLElement {
-      let el = document.createElement("div");
-      let container = this.getOverlayContainer();
-      container.appendChild(el);
-      el.style.position = "absolute";
-      if (this.containerStyle) Object.assign(el.style, parseStyle(this.containerStyle));
-      return el;
-   }
-
-   open(storeOrInstance?: View | Instance, options?: any): () => void {
-      if (!this.initialized) this.init();
-
-      let el = this.containerFactory();
-      el.style.display = "hidden";
-
-      let beforeDismiss: (() => boolean) | null = null;
-      let stop: any;
-
-      options = {
-         destroyDelay: this.destroyDelay,
-         removeParentDOMElement: true,
-         ...options,
-         parentEl: el,
-         dismiss: () => {
-            if (beforeDismiss && beforeDismiss() === false) return;
-            stop();
-            beforeDismiss = null;
-         },
-         subscribeToBeforeDismiss: (cb: () => boolean) => {
-            beforeDismiss = cb;
-         },
-      };
-      options.name = options.name || "overlay";
-      stop = startAppLoop(el, storeOrInstance, this, options);
-      return options.dismiss;
-   }
-
-   handleMove(e: any, instance: InstanceType, component: any): void {
-      let { widget } = instance;
-      if (!widget.onMove || instance.invoke("onMove", e, instance, component) !== false) {
-         instance.store.silently(() => {
-            if (isDataRecord(this.style) && isBindingObject(this.style.top)) {
-               instance.store.set(this.style.top.bind, component.el.style.top);
-            }
-
-            if (isDataRecord(this.style) && isBindingObject(this.style.left)) {
-               instance.store.set(this.style.left.bind, component.el.style.left);
-            }
-         });
-      }
-      instance.positionChangeSubscribers.notify();
-   }
-
-   handleResize(e: any, instance: InstanceType, component: any): void {
-      let { widget } = instance;
-      if (!widget.onResize || instance.invoke("onResize", e, instance, component) !== false) {
-         instance.store.silently(() => {
-            if (isDataRecord(this.style) && isBindingObject(this.style.width)) {
-               instance.store.set(this.style.width.bind, component.el.style.width);
-            }
+    return (
+      <OverlayComponent
+        beaconEl={null}
+        instance={instance}
+        subscribeToBeforeDismiss={context.options.subscribeToBeforeDismiss}
+        parentEl={context.options.parentEl}
+      >
+        {this.renderContents(context, instance)}
+      </OverlayComponent>
+    );
+  }
+
+  renderContents(context: RenderingContext, instance: InstanceType): any {
+    return this.renderChildren(context, instance);
+  }
+
+  getConfigureOverlayContainerContext(
+    instance?: InstanceType,
+    initiatingEvent?: React.SyntheticEvent,
+  ): ConfigureOverlayContainerContext {
+    return {
+      initiatingEvent,
+      relatedElement: instance?.beaconEl,
+    };
+  }
+
+  overlayDidMount(instance: InstanceType, component: any): void {
+    let { el } = component;
+    if (this.centerX)
+      if (!el.style.left)
+        el.style.left = `${(window.innerWidth - el.offsetWidth) / 2}px`;
+    if (this.centerY)
+      if (!el.style.top)
+        el.style.top = `${Math.max(0, (window.innerHeight - el.offsetHeight) / 2)}px`;
+  }
+
+  overlayDidUpdate(instance: InstanceType, component: any): void {}
+
+  overlayWillUnmount(instance: InstanceType, component: any): void {}
+
+  handleFocusOut(instance: InstanceType, component: any): void {
+    if (this.onFocusOut) instance.invoke("onFocusOut", instance, component);
+
+    if (this.dismissOnFocusOut && instance.dismiss) instance.dismiss();
+  }
+
+  handleKeyDown(e: any, instance: InstanceType, component?: any): void | false {
+    if (
+      this.onKeyDown &&
+      instance.invoke("onKeyDown", e, instance, component) === false
+    )
+      return false;
+
+    if (this.closeOnEscape && e.keyCode == KeyCode.esc && instance.dismiss) {
+      instance.dismiss();
+      e.stopPropagation();
+    }
+  }
+
+  handleMouseLeave(instance: InstanceType, component: any): void {
+    if (this.onMouseLeave) instance.invoke("onMouseLeave", instance, component);
+  }
+
+  handleMouseEnter(instance: InstanceType, component: any): void {
+    if (this.onMouseEnter) instance.invoke("onMouseEnter", instance, component);
+  }
+
+  getOverlayContainer(): HTMLElement {
+    return document.body;
+  }
+
+  containerFactory(
+    instance?: InstanceType,
+    initiatingEvent?: React.SyntheticEvent,
+  ): HTMLElement {
+    let el = document.createElement("div");
+    let container = this.getOverlayContainer();
+    container.appendChild(el);
+    el.style.position = "absolute";
+    if (this.containerStyle)
+      Object.assign(el.style, parseStyle(this.containerStyle));
+
+    if (OverlayBase.configureOverlayContainer)
+      OverlayBase.configureOverlayContainer(
+        el,
+        this.getConfigureOverlayContainerContext(instance, initiatingEvent),
+      );
 
-            if (isDataRecord(this.style) && isBindingObject(this.style.height)) {
-               instance.store.set(this.style.height.bind, component.el.style.height);
-            }
-         });
-      }
-      instance.positionChangeSubscribers.notify();
-   }
+    return el;
+  }
+
+  open(
+    storeOrInstance?: View | Instance,
+    options?: OverlayOpenOptions,
+  ): () => void {
+    if (!this.initialized) this.init();
+
+    let el = this.containerFactory(undefined, options?.initiatingEvent);
+    el.style.display = "hidden";
+
+    let beforeDismiss: (() => boolean) | null = null;
+    let stop: any;
+
+    options = {
+      destroyDelay: this.destroyDelay,
+      removeParentDOMElement: true,
+      ...options,
+      parentEl: el,
+      dismiss: () => {
+        if (beforeDismiss && beforeDismiss() === false) return;
+        stop();
+        beforeDismiss = null;
+      },
+      subscribeToBeforeDismiss: (cb: () => boolean) => {
+        beforeDismiss = cb;
+      },
+    };
+    options.name = options.name || "overlay";
+    stop = startAppLoop(el, storeOrInstance, this, options);
+    return options.dismiss!;
+  }
+
+  handleMove(e: any, instance: InstanceType, component: any): void {
+    let { widget } = instance;
+    if (
+      !widget.onMove ||
+      instance.invoke("onMove", e, instance, component) !== false
+    ) {
+      instance.store.silently(() => {
+        if (isDataRecord(this.style) && isBindingObject(this.style.top)) {
+          instance.store.set(this.style.top.bind, component.el.style.top);
+        }
+
+        if (isDataRecord(this.style) && isBindingObject(this.style.left)) {
+          instance.store.set(this.style.left.bind, component.el.style.left);
+        }
+      });
+    }
+    instance.positionChangeSubscribers.notify();
+  }
+
+  handleResize(e: any, instance: InstanceType, component: any): void {
+    let { widget } = instance;
+    if (
+      !widget.onResize ||
+      instance.invoke("onResize", e, instance, component) !== false
+    ) {
+      instance.store.silently(() => {
+        if (isDataRecord(this.style) && isBindingObject(this.style.width)) {
+          instance.store.set(this.style.width.bind, component.el.style.width);
+        }
+
+        if (isDataRecord(this.style) && isBindingObject(this.style.height)) {
+          instance.store.set(this.style.height.bind, component.el.style.height);
+        }
+      });
+    }
+    instance.positionChangeSubscribers.notify();
+  }
 }
 
 OverlayBase.prototype.styled = true;
@@ -384,565 +474,623 @@ OverlayBase.prototype.focusable = false;
 OverlayBase.prototype.containerStyle = undefined;
 OverlayBase.prototype.dismissOnPopState = false;
 OverlayBase.prototype.closeOnEscape = false;
+OverlayBase.prototype.needsBeacon = false;
 
 export class Overlay extends OverlayBase<OverlayConfig, OverlayInstance> {}
 
 Widget.alias("overlay", Overlay);
 
 interface OverlayContentProps {
-   onRef: (el: HTMLDivElement | null) => void;
-   className: string;
-   style: any;
-   tabIndex: number | undefined;
-   onFocus: () => void;
-   onBlur: () => void;
-   onKeyDown: (e: any) => void;
-   onMouseMove: (e: any, captureData?: any) => void;
-   onMouseUp: (e: any) => void;
-   onMouseDown: (e: any) => void;
-   onTouchStart: (e: any) => void;
-   onTouchEnd: (e: any) => void;
-   onTouchMove: (e: any, captureData?: any) => void;
-   onMouseEnter: (e: any) => void;
-   onMouseLeave: (e: any) => void;
-   onClick: (e: any) => void;
-   onDidUpdate: () => void;
-   focusableOverlayContainer?: boolean;
-   children: any;
+  onRef: (el: HTMLDivElement | null) => void;
+  className: string;
+  style: any;
+  tabIndex: number | undefined;
+  onFocus: () => void;
+  onBlur: () => void;
+  onKeyDown: (e: any) => void;
+  onMouseMove: (e: any, captureData?: any) => void;
+  onMouseUp: (e: any) => void;
+  onMouseDown: (e: any) => void;
+  onTouchStart: (e: any) => void;
+  onTouchEnd: (e: any) => void;
+  onTouchMove: (e: any, captureData?: any) => void;
+  onMouseEnter: (e: any) => void;
+  onMouseLeave: (e: any) => void;
+  onClick: (e: any) => void;
+  onDidUpdate: () => void;
+  focusableOverlayContainer?: boolean;
+  children: any;
 }
 
 //TODO: all el related logic should be moved here
 class OverlayContent extends VDOM.Component<OverlayContentProps, {}> {
-   render() {
-      return (
-         <div
-            ref={this.props.onRef}
-            className={this.props.className}
-            style={this.props.style}
-            tabIndex={this.props.tabIndex}
-            onFocus={this.props.onFocus}
-            onBlur={this.props.onBlur}
-            onKeyDown={this.props.onKeyDown}
-            onMouseMove={this.props.onMouseMove}
-            onMouseUp={this.props.onMouseUp}
-            onMouseDown={this.props.onMouseDown}
-            onTouchStart={this.props.onTouchStart}
-            onTouchEnd={this.props.onTouchEnd}
-            onTouchMove={this.props.onTouchMove}
-            onMouseEnter={this.props.onMouseEnter}
-            onMouseLeave={this.props.onMouseLeave}
-            onClick={this.props.onClick}
-            data-focusable-overlay-container={this.props.focusableOverlayContainer}
-         >
-            {this.props.children}
-         </div>
-      );
-   }
-
-   componentDidUpdate() {
-      this.props.onDidUpdate();
-   }
+  render() {
+    return (
+      <div
+        ref={this.props.onRef}
+        className={this.props.className}
+        style={this.props.style}
+        tabIndex={this.props.tabIndex}
+        onFocus={this.props.onFocus}
+        onBlur={this.props.onBlur}
+        onKeyDown={this.props.onKeyDown}
+        onMouseMove={this.props.onMouseMove}
+        onMouseUp={this.props.onMouseUp}
+        onMouseDown={this.props.onMouseDown}
+        onTouchStart={this.props.onTouchStart}
+        onTouchEnd={this.props.onTouchEnd}
+        onTouchMove={this.props.onTouchMove}
+        onMouseEnter={this.props.onMouseEnter}
+        onMouseLeave={this.props.onMouseLeave}
+        onClick={this.props.onClick}
+        data-focusable-overlay-container={this.props.focusableOverlayContainer}
+      >
+        {this.props.children}
+      </div>
+    );
+  }
+
+  componentDidUpdate() {
+    this.props.onDidUpdate();
+  }
 }
 
 export interface OverlayComponentProps {
-   instance: OverlayInstance;
-   parentEl?: HTMLElement;
-   subscribeToBeforeDismiss?: (cb: () => boolean) => void;
-   children: any;
+  instance: OverlayInstance;
+  parentEl?: HTMLElement;
+  subscribeToBeforeDismiss?: (cb: () => boolean) => void;
+  children: any;
+  beaconEl: HTMLElement | null;
 }
 
 export interface OverlayComponentState {
-   animated?: boolean;
-   mods?: Record<string, boolean>;
+  animated?: boolean;
+  mods?: Record<string, boolean>;
 }
 
 //TODO: This should be called OverlayPortal
 export class OverlayComponent<
-   Props extends OverlayComponentProps = OverlayComponentProps,
-   State extends OverlayComponentState = OverlayComponentState,
+  Props extends OverlayComponentProps = OverlayComponentProps,
+  State extends OverlayComponentState = OverlayComponentState,
 > extends VDOM.Component<Props, State> {
-   declare el?: HTMLElement | null;
-   declare containerEl?: HTMLElement | null;
-   declare ownedEl?: HTMLElement | null;
-   onOverlayRef?: (el: HTMLElement | null) => void;
-   declare shadowEl?: HTMLElement | null;
-   declare dismissed?: boolean;
-   declare unmounting?: boolean;
-   onPopState?: () => void;
-   unsubscribeWheelBlock?: () => void;
-   declare customStyle: any;
-   declare root: Root;
-
-   constructor(props: Props) {
-      super(props);
-      this.state = {} as State;
-      this.customStyle = {};
-   }
-
-   render() {
-      let { instance, parentEl } = this.props;
-      let { widget } = instance;
-
-      if (widget.inline || parentEl) return this.renderOverlay();
-
-      if (!this.containerEl) {
-         this.ownedEl = widget.containerFactory();
-         this.ownedEl.style.display = "hidden";
-         this.containerEl = this.ownedEl;
-      }
-
-      if (VDOM.DOM.createPortal) return VDOM.DOM.createPortal(this.renderOverlay(), this.containerEl);
-
-      //rendered in componentDidUpdate if portals are not supported
-      return null;
-   }
-
-   renderOverlay() {
-      let { widget, data } = this.props.instance;
-      let { CSS, baseClass } = widget;
+  declare el?: HTMLElement | null;
+  declare containerEl?: HTMLElement | null;
+  declare ownedEl?: HTMLElement | null;
+  onOverlayRef?: (el: HTMLElement | null) => void;
+  declare shadowEl?: HTMLElement | null;
+  declare dismissed?: boolean;
+  declare unmounting?: boolean;
+  onPopState?: () => void;
+  unsubscribeWheelBlock?: () => void;
+  declare customStyle: any;
+  declare root: Root;
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {} as State;
+    this.customStyle = {};
+  }
+
+  render() {
+    let { instance, parentEl } = this.props;
+    let { widget } = instance;
+
+    if (widget.inline || parentEl) return this.renderOverlay();
+
+    if (!this.containerEl) {
+      instance.beaconEl = this.props.beaconEl;
+      this.ownedEl = widget.containerFactory(instance);
+      this.ownedEl.style.display = "hidden";
+      this.containerEl = this.ownedEl;
+    }
+
+    // content is rendered in componentDidUpdate if portals are not supported
+    return VDOM.DOM.createPortal
+      ? VDOM.DOM.createPortal!(this.renderOverlay(), this.containerEl)
+      : null;
+  }
+
+  renderOverlay() {
+    let { widget, data } = this.props.instance;
+    let { CSS, baseClass } = widget;
+
+    if (!this.onOverlayRef)
+      this.onOverlayRef = (el) => {
+        this.el = el;
+      };
 
-      if (!this.onOverlayRef)
-         this.onOverlayRef = (el) => {
-            this.el = el;
-         };
-
-      let content = (
-         <OverlayContent
-            onRef={this.onOverlayRef}
-            className={data.classNames}
-            style={data.style}
-            tabIndex={widget.focusable ? 0 : undefined}
-            onFocus={this.onFocus.bind(this)}
-            onBlur={this.onBlur.bind(this)}
-            onKeyDown={this.onKeyDown.bind(this)}
-            onMouseDown={this.onMouseDown.bind(this)}
-            onMouseUp={this.onMouseUp.bind(this)}
-            onMouseMove={this.onMouseMove.bind(this)}
-            onTouchStart={this.onMouseDown.bind(this)}
-            onTouchEnd={this.onMouseUp.bind(this)}
-            onTouchMove={this.onMouseMove.bind(this)}
-            onMouseLeave={this.onMouseLeave.bind(this)}
-            onMouseEnter={this.onMouseEnter.bind(this)}
-            onClick={this.onClick.bind(this)}
-            onDidUpdate={this.overlayDidUpdate.bind(this)}
-            focusableOverlayContainer={widget.dismissOnFocusOut}
-         >
-            {this.renderOverlayBody()}
-         </OverlayContent>
+    let content = (
+      <OverlayContent
+        onRef={this.onOverlayRef}
+        className={data.classNames}
+        style={data.style}
+        tabIndex={widget.focusable ? 0 : undefined}
+        onFocus={this.onFocus.bind(this)}
+        onBlur={this.onBlur.bind(this)}
+        onKeyDown={this.onKeyDown.bind(this)}
+        onMouseDown={this.onMouseDown.bind(this)}
+        onMouseUp={this.onMouseUp.bind(this)}
+        onMouseMove={this.onMouseMove.bind(this)}
+        onTouchStart={this.onMouseDown.bind(this)}
+        onTouchEnd={this.onMouseUp.bind(this)}
+        onTouchMove={this.onMouseMove.bind(this)}
+        onMouseLeave={this.onMouseLeave.bind(this)}
+        onMouseEnter={this.onMouseEnter.bind(this)}
+        onClick={this.onClick.bind(this)}
+        onDidUpdate={this.overlayDidUpdate.bind(this)}
+        focusableOverlayContainer={widget.dismissOnFocusOut}
+      >
+        {this.renderOverlayBody()}
+      </OverlayContent>
+    );
+
+    let result = content;
+
+    if (widget.modal || widget.backdrop) {
+      result = (
+        <div
+          key="shadow"
+          ref={(el) => {
+            this.shadowEl = el;
+          }}
+          className={CSS.element(baseClass, "shadow", {
+            animated: this.state.animated,
+            "animate-enter": this.state.animated && !this.dismissed,
+            animate: widget.animate,
+          })}
+          style={parseStyle(data.shadowStyle)}
+        >
+          <div
+            key="backdrop"
+            className={CSS.element("overlay", "modal-backdrop")}
+            onClick={this.onBackdropClick.bind(this)}
+          />
+          {content}
+        </div>
       );
-
-      let result = content;
-
-      if (widget.modal || widget.backdrop) {
-         result = (
-            <div
-               key="shadow"
-               ref={(el) => {
-                  this.shadowEl = el;
-               }}
-               className={CSS.element(baseClass, "shadow", {
-                  animated: this.state.animated,
-                  "animate-enter": this.state.animated && !this.dismissed,
-                  animate: widget.animate,
-               })}
-               style={parseStyle(data.shadowStyle)}
-            >
-               <div
-                  key="backdrop"
-                  className={CSS.element("overlay", "modal-backdrop")}
-                  onClick={this.onBackdropClick.bind(this)}
-               />
-               {content}
-            </div>
-         );
-      }
-
-      return result;
-   }
-
-   renderOverlayBody() {
-      return this.props.children;
-   }
-
-   onFocus() {
-      FocusManager.nudge();
-      this.onFocusIn();
-      if (this.el) oneFocusOut(this, this.el, this.onFocusOut.bind(this));
-   }
-
-   onBlur() {
-      FocusManager.nudge();
-   }
-
-   onFocusIn() {}
-
-   onFocusOut() {
-      let { widget } = this.props.instance;
-      widget.handleFocusOut(this.props.instance, this);
-   }
-
-   onMouseEnter(e: React.MouseEvent) {
-      let { widget } = this.props.instance;
-      widget.handleMouseEnter(this.props.instance, this);
-   }
-
-   onMouseLeave(e: React.MouseEvent) {
-      let { widget } = this.props.instance;
-      widget.handleMouseLeave(this.props.instance, this);
-   }
-
-   onClick(e: React.MouseEvent) {
-      let { instance } = this.props;
-      let { widget } = instance;
-      if (widget.onClick) instance.invoke("onClick", e, instance, this);
-   }
-
-   onKeyDown(e: React.KeyboardEvent) {
-      let { widget } = this.props.instance;
-      widget.handleKeyDown(e, this.props.instance, this);
-   }
-
-   getResizePrefix(e: MouseEvent | React.MouseEvent | React.TouchEvent) {
-      let { widget, data } = this.props.instance;
-      if (!data.resizable) return "";
+    }
+
+    return result;
+  }
+
+  renderOverlayBody() {
+    return this.props.children;
+  }
+
+  onFocus() {
+    FocusManager.nudge();
+    this.onFocusIn();
+    if (this.el) oneFocusOut(this, this.el, this.onFocusOut.bind(this));
+  }
+
+  onBlur() {
+    FocusManager.nudge();
+  }
+
+  onFocusIn() {}
+
+  onFocusOut() {
+    let { widget } = this.props.instance;
+    widget.handleFocusOut(this.props.instance, this);
+  }
+
+  onMouseEnter(e: React.MouseEvent) {
+    let { widget } = this.props.instance;
+    widget.handleMouseEnter(this.props.instance, this);
+  }
+
+  onMouseLeave(e: React.MouseEvent) {
+    let { widget } = this.props.instance;
+    widget.handleMouseLeave(this.props.instance, this);
+  }
+
+  onClick(e: React.MouseEvent) {
+    let { instance } = this.props;
+    let { widget } = instance;
+    if (widget.onClick) instance.invoke("onClick", e, instance, this);
+  }
+
+  onKeyDown(e: React.KeyboardEvent) {
+    let { widget } = this.props.instance;
+    widget.handleKeyDown(e, this.props.instance, this);
+  }
+
+  getResizePrefix(e: MouseEvent | React.MouseEvent | React.TouchEvent) {
+    let { widget, data } = this.props.instance;
+    if (!data.resizable) return "";
+    let cursor = getCursorPos(e);
+    let bounds = getTopLevelBoundingClientRect(this.el!);
+    let leftMargin = cursor.clientX - bounds.left;
+    let rightMargin = bounds.right - cursor.clientX;
+    let topMargin = cursor.clientY - bounds.top;
+    let bottomMargin = bounds.bottom - cursor.clientY;
+    let prefix = "";
+
+    if (topMargin >= 0 && topMargin < widget.resizeWidth) prefix += "n";
+    else if (bottomMargin >= 0 && bottomMargin < widget.resizeWidth)
+      prefix += "s";
+
+    if (leftMargin >= 0 && leftMargin < widget.resizeWidth) prefix += "w";
+    else if (rightMargin >= 0 && rightMargin < widget.resizeWidth)
+      prefix += "e";
+    return prefix;
+  }
+
+  onMouseDown(e: React.MouseEvent | React.TouchEvent) {
+    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();
+      let rect = getTopLevelBoundingClientRect(this.el!);
+      let cursor = getCursorPos(e);
+      let captureData = {
+        prefix: prefix,
+        dl: cursor.clientX - rect.left,
+        dt: cursor.clientY - rect.top,
+        dr: cursor.clientX - rect.right,
+        db: cursor.clientY - rect.bottom,
+        rect: rect,
+      };
+      captureMouseOrTouch(
+        e,
+        this.onMouseMove.bind(this),
+        undefined,
+        captureData,
+        prefix + "-resize",
+      );
+    } else if (data.draggable) {
+      ddMouseDown(e);
+    }
+    //e.stopPropagation();
+  }
+
+  onBackdropClick(e: React.MouseEvent) {
+    e.stopPropagation();
+    let { instance } = this.props;
+    let { widget } = instance;
+
+    if (widget.onBackdropClick) instance.invoke("onBackdropClick", e, instance);
+
+    if (widget.backdrop) {
+      if (instance.dismiss) instance.dismiss();
+    } else if (widget.modal) {
+      FocusManager.focus(this.el!);
+    }
+  }
+
+  onMouseUp(e: React.MouseEvent | React.TouchEvent) {
+    ddMouseUp();
+    e.stopPropagation();
+  }
+
+  onMouseMove(e: MouseEvent, captureData: any) {
+    // handle dragging
+    let { instance } = this.props;
+    let { data, widget } = instance;
+    let detect = ddDetect(e);
+    if (data.draggable && detect) {
+      this.startMoveOperation(e);
+      return;
+    }
+
+    if (captureData && captureData.prefix) {
+      let { prefix, rect, dl, dt, dr, db } = captureData;
       let cursor = getCursorPos(e);
-      let bounds = getTopLevelBoundingClientRect(this.el!);
-      let leftMargin = cursor.clientX - bounds.left;
-      let rightMargin = bounds.right - cursor.clientX;
-      let topMargin = cursor.clientY - bounds.top;
-      let bottomMargin = bounds.bottom - cursor.clientY;
-      let prefix = "";
-
-      if (topMargin >= 0 && topMargin < widget.resizeWidth) prefix += "n";
-      else if (bottomMargin >= 0 && bottomMargin < widget.resizeWidth) prefix += "s";
-
-      if (leftMargin >= 0 && leftMargin < widget.resizeWidth) prefix += "w";
-      else if (rightMargin >= 0 && rightMargin < widget.resizeWidth) prefix += "e";
-      return prefix;
-   }
-
-   onMouseDown(e: React.MouseEvent | React.TouchEvent) {
-      let { instance } = this.props;
-      let { widget, data } = instance;
-
-      if (widget.onMouseDown && instance.invoke("onMouseDown", e, instance) === false) return;
 
+      if (prefix.indexOf("w") != -1)
+        this.setCustomStyle({
+          left: cursor.clientX - dl + "px",
+          width: rect.right - cursor.clientX + dl + "px",
+          right: "auto",
+        });
+
+      if (prefix.indexOf("n") != -1)
+        this.setCustomStyle({
+          top: cursor.clientY - dt + "px",
+          height: rect.bottom - cursor.clientY + dt + "px",
+          bottom: "auto",
+        });
+
+      if (prefix.indexOf("e") != -1)
+        this.setCustomStyle({
+          width: cursor.clientX - dr - rect.left + "px",
+          left: `${rect.left}px`,
+          right: "auto",
+        });
+
+      if (prefix.indexOf("s") != -1)
+        this.setCustomStyle({
+          height: cursor.clientY - db - rect.top + "px",
+          top: `${rect.top}px`,
+          bottom: "auto",
+        });
+
+      if (prefix.indexOf("w") >= 0 || prefix.indexOf("n") >= 0)
+        widget.handleMove(e, instance, this);
+
+      widget.handleResize(e, instance, this);
+    } else {
       let prefix = this.getResizePrefix(e);
-      if (prefix) {
-         //e.preventDefault();
-         let rect = getTopLevelBoundingClientRect(this.el!);
-         let cursor = getCursorPos(e);
-         let captureData = {
-            prefix: prefix,
-            dl: cursor.clientX - rect.left,
-            dt: cursor.clientY - rect.top,
-            dr: cursor.clientX - rect.right,
-            db: cursor.clientY - rect.bottom,
-            rect: rect,
-         };
-         captureMouseOrTouch(e, this.onMouseMove.bind(this), undefined, captureData, prefix + "-resize");
-      } else if (data.draggable) {
-         ddMouseDown(e);
-      }
-      //e.stopPropagation();
-   }
-
-   onBackdropClick(e: React.MouseEvent) {
-      e.stopPropagation();
-      let { instance } = this.props;
-      let { widget } = instance;
-
-      if (widget.onBackdropClick) instance.invoke("onBackdropClick", e, instance);
-
-      if (widget.backdrop) {
-         if (instance.dismiss) instance.dismiss();
-      } else if (widget.modal) {
-         FocusManager.focus(this.el!);
-      }
-   }
+      this.setCustomStyle({
+        cursor: prefix ? prefix + "-resize" : undefined,
+      });
+    }
+  }
 
-   onMouseUp(e: React.MouseEvent | React.TouchEvent) {
-      ddMouseUp();
+  startMoveOperation(e: MouseEvent | React.MouseEvent | React.TouchEvent) {
+    if (this.el && !this.getResizePrefix(e)) {
       e.stopPropagation();
-   }
+      let rect = getTopLevelBoundingClientRect(this.el);
+      let cursor = getCursorPos(e);
+      let data = {
+        dx: cursor.clientX - rect.left,
+        dy: cursor.clientY - rect.top,
+      };
 
-   onMouseMove(e: MouseEvent, captureData: any) {
-      // handle dragging
-      let { instance } = this.props;
-      let { data, widget } = instance;
-      let detect = ddDetect(e);
-      if (data.draggable && detect) {
-         this.startMoveOperation(e);
-         return;
-      }
+      captureMouseOrTouch(
+        e,
+        this.onMove.bind(this),
+        undefined,
+        data,
+        getComputedStyle(e.target as HTMLElement).cursor,
+      );
+    }
+  }
 
-      if (captureData && captureData.prefix) {
-         let { prefix, rect, dl, dt, dr, db } = captureData;
-         let cursor = getCursorPos(e);
-
-         if (prefix.indexOf("w") != -1)
-            this.setCustomStyle({
-               left: cursor.clientX - dl + "px",
-               width: rect.right - cursor.clientX + dl + "px",
-               right: "auto",
-            });
-
-         if (prefix.indexOf("n") != -1)
-            this.setCustomStyle({
-               top: cursor.clientY - dt + "px",
-               height: rect.bottom - cursor.clientY + dt + "px",
-               bottom: "auto",
-            });
-
-         if (prefix.indexOf("e") != -1)
-            this.setCustomStyle({
-               width: cursor.clientX - dr - rect.left + "px",
-               left: `${rect.left}px`,
-               right: "auto",
-            });
-
-         if (prefix.indexOf("s") != -1)
-            this.setCustomStyle({
-               height: cursor.clientY - db - rect.top + "px",
-               top: `${rect.top}px`,
-               bottom: "auto",
-            });
-
-         if (prefix.indexOf("w") >= 0 || prefix.indexOf("n") >= 0) widget.handleMove(e, instance, this);
-
-         widget.handleResize(e, instance, this);
-      } else {
-         let prefix = this.getResizePrefix(e);
-         this.setCustomStyle({
-            cursor: prefix ? prefix + "-resize" : undefined,
-         });
-      }
-   }
-
-   startMoveOperation(e: MouseEvent | React.MouseEvent | React.TouchEvent) {
-      if (this.el && !this.getResizePrefix(e)) {
-         e.stopPropagation();
-         let rect = getTopLevelBoundingClientRect(this.el);
-         let cursor = getCursorPos(e);
-         let data = {
-            dx: cursor.clientX - rect.left,
-            dy: cursor.clientY - rect.top,
-         };
-
-         captureMouseOrTouch(
-            e,
-            this.onMove.bind(this),
-            undefined,
-            data,
-            getComputedStyle(e.target as HTMLElement).cursor,
-         );
-      }
-   }
-
-   onMove(e: MouseEvent, data: any) {
-      if (data) {
-         let cursor = getCursorPos(e);
-         e.preventDefault();
-         this.setCustomStyle({
-            left: cursor.clientX - data.dx + "px",
-            top: cursor.clientY - data.dy + "px",
-            right: "auto",
-            bottom: "auto",
-         });
-
-         let { instance } = this.props;
-         let { widget } = instance;
-         widget.handleMove(e, instance, this);
-      }
-   }
+  onMove(e: MouseEvent, data: any) {
+    if (data) {
+      let cursor = getCursorPos(e);
+      e.preventDefault();
+      this.setCustomStyle({
+        left: cursor.clientX - data.dx + "px",
+        top: cursor.clientY - data.dy + "px",
+        right: "auto",
+        bottom: "auto",
+      });
 
-   onBeforeDismiss() {
       let { instance } = this.props;
       let { widget } = instance;
+      widget.handleMove(e, instance, this);
+    }
+  }
+
+  onBeforeDismiss() {
+    let { instance } = this.props;
+    let { widget } = instance;
+
+    if (
+      widget.overlayWillDismiss &&
+      widget.overlayWillDismiss(instance, this) === false
+    )
+      return false;
+
+    this.dismissed = true;
+
+    //this.el might be null if visible is set to false
+    if (this.el) {
+      this.el.className = this.getOverlayCssClass();
+
+      // if (widget.animate)
+      //    this.setState({
+      //       animated: false
+      //    });
+    }
+    return true;
+  }
+
+  componentDidMount() {
+    let { instance, subscribeToBeforeDismiss, parentEl } = this.props;
+    let { widget, data } = instance;
+
+    this.setZIndex(isNumber(data.zIndex) ? data.zIndex : ZIndexManager.next());
+
+    this.componentDidUpdate();
+    widget.overlayDidMount(instance, this);
+
+    if (this.containerEl) this.containerEl.style.removeProperty("display");
+    else if (parentEl) parentEl.style.removeProperty("display");
+
+    let childHasFocus = isSelfOrDescendant(this.el!, getActiveElement());
+
+    if (childHasFocus) oneFocusOut(this, this.el, this.onFocusOut.bind(this));
+    else {
+      if (
+        !widget.autoFocusFirstChild ||
+        !FocusManager.focusFirstChild(this.el!)
+      )
+        if (widget.focusable && widget.autoFocus) FocusManager.focus(this.el!);
+    }
+
+    instance.onBeforeDismiss = this.onBeforeDismiss.bind(this);
+
+    if (subscribeToBeforeDismiss) {
+      subscribeToBeforeDismiss(instance.onBeforeDismiss);
+    }
+
+    if (widget.animate) {
+      setTimeout(() => {
+        if (!this.unmounting)
+          this.setState({
+            animated: true,
+          });
+      }, 0);
+    }
+
+    if (widget.dismissOnPopState) {
+      this.onPopState = () => {
+        this.props.instance.dismiss?.();
+      };
+      window.addEventListener("popstate", this.onPopState);
+    }
+
+    if (this.shadowEl)
+      this.unsubscribeWheelBlock = addEventListenerWithOptions(
+        this.shadowEl,
+        "wheel",
+        (e) => {
+          if (e.shiftKey || e.ctrlKey) return;
+          //check if there is a scrollable element within the shadow or overlay contents
+          //such that its scrollbar is not at the very end
+          let scrollAllowed = false;
+          closest(e.target as Element, (el) => {
+            if (
+              (e.deltaY > 0 &&
+                el.scrollTop < el.scrollHeight - el.clientHeight) ||
+              (e.deltaY < 0 && el.scrollTop > 0)
+            ) {
+              scrollAllowed = true;
+              return true;
+            }
+            return el == e.currentTarget;
+          });
+          if (!scrollAllowed) e.preventDefault();
+        },
+        { passive: false },
+      );
+  }
 
-      if (widget.overlayWillDismiss && widget.overlayWillDismiss(instance, this) === false) return false;
-
-      this.dismissed = true;
-
-      //this.el might be null if visible is set to false
-      if (this.el) {
-         this.el.className = this.getOverlayCssClass();
-
-         // if (widget.animate)
-         //    this.setState({
-         //       animated: false
-         //    });
-      }
-      return true;
-   }
-
-   componentDidMount() {
-      let { instance, subscribeToBeforeDismiss, parentEl } = this.props;
-      let { widget, data } = instance;
-
-      this.setZIndex(isNumber(data.zIndex) ? data.zIndex : ZIndexManager.next());
-
-      this.componentDidUpdate();
-      widget.overlayDidMount(instance, this);
-
-      if (this.containerEl) this.containerEl.style.removeProperty("display");
-      else if (parentEl) parentEl.style.removeProperty("display");
-
-      let childHasFocus = isSelfOrDescendant(this.el!, getActiveElement());
-
-      if (childHasFocus) oneFocusOut(this, this.el, this.onFocusOut.bind(this));
-      else {
-         if (!widget.autoFocusFirstChild || !FocusManager.focusFirstChild(this.el!))
-            if (widget.focusable && widget.autoFocus) FocusManager.focus(this.el!);
-      }
-
-      instance.onBeforeDismiss = this.onBeforeDismiss.bind(this);
+  componentWillUnmount() {
+    if (this.onPopState)
+      window.removeEventListener("popstate", this.onPopState);
 
-      if (subscribeToBeforeDismiss) {
-         subscribeToBeforeDismiss(instance.onBeforeDismiss);
-      }
+    if (this.unsubscribeWheelBlock) this.unsubscribeWheelBlock();
 
-      if (widget.animate) {
-         setTimeout(() => {
-            if (!this.unmounting)
-               this.setState({
-                  animated: true,
-               });
-         }, 0);
-      }
+    offFocusOut(this);
+    this.unmounting = true;
 
-      if (widget.dismissOnPopState) {
-         this.onPopState = () => {
-            this.props.instance.dismiss?.();
-         };
-         window.addEventListener("popstate", this.onPopState);
-      }
+    let { widget } = this.props.instance;
+    let { baseClass, CSS } = widget;
 
+    // //we didn't have a chance to call onBeforeDismiss
+    if (this.state.animated && this.el) {
+      this.el.className = this.getOverlayCssClass();
       if (this.shadowEl)
-         this.unsubscribeWheelBlock = addEventListenerWithOptions(
-            this.shadowEl,
-            "wheel",
-            (e) => {
-               if (e.shiftKey || e.ctrlKey) return;
-               //check if there is a scrollable element within the shadow or overlay contents
-               //such that its scrollbar is not at the very end
-               let scrollAllowed = false;
-               closest(e.target as Element, (el) => {
-                  if (
-                     (e.deltaY > 0 && el.scrollTop < el.scrollHeight - el.clientHeight) ||
-                     (e.deltaY < 0 && el.scrollTop > 0)
-                  ) {
-                     scrollAllowed = true;
-                     return true;
-                  }
-                  return el == e.currentTarget;
-               });
-               if (!scrollAllowed) e.preventDefault();
-            },
-            { passive: false },
-         );
-   }
-
-   componentWillUnmount() {
-      if (this.onPopState) window.removeEventListener("popstate", this.onPopState);
-
-      if (this.unsubscribeWheelBlock) this.unsubscribeWheelBlock();
-
-      offFocusOut(this);
-      this.unmounting = true;
-
-      let { widget } = this.props.instance;
-      let { baseClass, CSS } = widget;
-
-      // //we didn't have a chance to call onBeforeDismiss
-      if (this.state.animated && this.el) {
-         this.el.className = this.getOverlayCssClass();
-         if (this.shadowEl)
-            this.shadowEl.className = CSS.element(baseClass, "shadow", {
-               animate: widget.animate,
-               "animate-leave": true,
-            });
+        this.shadowEl.className = CSS.element(baseClass, "shadow", {
+          animate: widget.animate,
+          "animate-leave": true,
+        });
+    }
+
+    widget.overlayWillUnmount(this.props.instance, this);
+
+    if (this.ownedEl) {
+      setTimeout(() => {
+        this.root?.unmount();
+        if (this.ownedEl?.parentNode)
+          this.ownedEl.parentNode.removeChild(this.ownedEl);
+        this.ownedEl = null;
+      }, widget.destroyDelay);
+    }
+
+    delete this.containerEl;
+  }
+
+  setZIndex(zIndex: number) {
+    if (this.shadowEl) this.shadowEl.style.zIndex = zIndex.toString();
+    this.setCustomStyle({
+      zIndex: zIndex.toString(),
+    });
+  }
+
+  setCustomStyle(style: Partial<CSSStyleDeclaration>) {
+    Object.assign(this.customStyle, style);
+    if (this.el) Object.assign(this.el.style, this.customStyle);
+  }
+
+  getOverlayStyle() {
+    let { data } = this.props.instance;
+    return {
+      ...data.style,
+      ...this.customStyle,
+    };
+  }
+
+  setCSSState(mods: Record<string, boolean>) {
+    let m: Record<string, boolean> = { ...this.state.mods };
+    let changed = false;
+    for (let k in mods)
+      if (m[k] !== mods[k]) {
+        m[k] = mods[k];
+        changed = true;
       }
 
-      widget.overlayWillUnmount(this.props.instance, this);
-
-      if (this.ownedEl) {
-         setTimeout(() => {
-            this.root?.unmount();
-            if (this.ownedEl?.parentNode) this.ownedEl.parentNode.removeChild(this.ownedEl);
-            this.ownedEl = null;
-         }, widget.destroyDelay);
-      }
-
-      delete this.containerEl;
-   }
-
-   setZIndex(zIndex: number) {
-      if (this.shadowEl) this.shadowEl.style.zIndex = zIndex.toString();
-      this.setCustomStyle({
-         zIndex: zIndex.toString(),
+    if (changed)
+      this.setState({
+        mods: mods,
       });
-   }
-
-   setCustomStyle(style: Partial<CSSStyleDeclaration>) {
-      Object.assign(this.customStyle, style);
-      if (this.el) Object.assign(this.el.style, this.customStyle);
-   }
-
-   getOverlayStyle() {
-      let { data } = this.props.instance;
-      return {
-         ...data.style,
-         ...this.customStyle,
-      };
-   }
-
-   setCSSState(mods: Record<string, boolean>) {
-      let m: Record<string, boolean> = { ...this.state.mods };
-      let changed = false;
-      for (let k in mods)
-         if (m[k] !== mods[k]) {
-            m[k] = mods[k];
-            changed = true;
-         }
-
-      if (changed)
-         this.setState({
-            mods: mods,
-         });
-   }
-
-   getOverlayCssClass() {
-      let { data, widget } = this.props.instance;
-      let { CSS } = widget;
+  }
+
+  getOverlayCssClass() {
+    let { data, widget } = this.props.instance;
+    let { CSS } = widget;
+
+    return (
+      CSS.expand(
+        data.classNames,
+        CSS.state({
+          ...this.state.mods,
+          animated: this.state.animated && !this.unmounting && !this.dismissed,
+          "animate-enter": this.state.animated && !this.dismissed,
+          "animate-leave": widget.animate && this.dismissed,
+        }),
+      ) ?? ""
+    );
+  }
+
+  overlayDidUpdate() {
+    if (this.el && !this.dismissed) {
+      let { widget } = this.props.instance;
+      widget.overlayDidUpdate(this.props.instance, this);
+      this.el.className = this.getOverlayCssClass();
+      Object.assign(this.el.style, this.getOverlayStyle());
+    }
+  }
+
+  componentDidUpdate() {
+    if (this.containerEl && !VDOM.DOM.createPortal) {
+      this.root = VDOM.DOM.createRoot(this.containerEl);
+      this.root.render(this.renderOverlay());
+    }
+    this.overlayDidUpdate();
+  }
+}
 
-      return (
-         CSS.expand(
-            data.classNames,
-            CSS.state({
-               ...this.state.mods,
-               animated: this.state.animated && !this.unmounting && !this.dismissed,
-               "animate-enter": this.state.animated && !this.dismissed,
-               "animate-leave": widget.animate && this.dismissed,
-            }),
-         ) ?? ""
-      );
-   }
-
-   overlayDidUpdate() {
-      if (this.el && !this.dismissed) {
-         let { widget } = this.props.instance;
-         widget.overlayDidUpdate(this.props.instance, this);
-         this.el.className = this.getOverlayCssClass();
-         Object.assign(this.el.style, this.getOverlayStyle());
-      }
-   }
+interface OverlayBeaconProps {
+  childrenFactory: (beacon: HTMLElement) => React.ReactNode;
+}
 
-   componentDidUpdate() {
-      if (this.containerEl && !VDOM.DOM.createPortal) {
-         this.root = VDOM.DOM.createRoot(this.containerEl);
-         this.root.render(this.renderOverlay());
-      }
-      this.overlayDidUpdate();
-   }
+export interface OverlayBeaconState {
+  children?: React.ReactNode;
+}
+
+export class OverlayBeacon extends VDOM.Component<
+  OverlayBeaconProps,
+  OverlayBeaconState
+> {
+  el: HTMLElement | null;
+  render() {
+    return (
+      <>
+        <div
+          ref={(el) => {
+            this.el = el;
+          }}
+          style={{ position: "absolute", display: "none" }}
+        />
+        {this.state?.children}
+      </>
+    );
+  }
+
+  componentDidMount(): void {
+    this.setState({ children: this.props.childrenFactory(this.el!) });
+  }
 }