From 8dcf417a2bd0ccb15eb2155386c2947d3640ddd0 Mon Sep 17 00:00:00 2001
From: joschect <joschect@microsoft.com>
Date: Thu, 6 Oct 2016 12:56:31 -0700
Subject: [PATCH] Implement: Contextualmenu gets window from target element.
 (#387)

* added in the ability for contextualmenu projection.

* fixed lint problems
---
 src/components/Callout/CalloutContent.tsx     | 23 ++++++++++++-------
 .../ContextualMenu/ContextualMenu.tsx         |  9 +++++++-
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/components/Callout/CalloutContent.tsx b/src/components/Callout/CalloutContent.tsx
index dccf94daf57a5c..14edd1045b7f6f 100644
--- a/src/components/Callout/CalloutContent.tsx
+++ b/src/components/Callout/CalloutContent.tsx
@@ -37,6 +37,7 @@ export class CalloutContent extends BaseComponent<ICalloutProps, ICalloutState>
   private _didSetInitialFocus: boolean;
   private _hostElement: HTMLDivElement;
   private _calloutElement: HTMLDivElement;
+  private _targetWindow: Window;
 
   constructor(props: ICalloutProps) {
     super(props);
@@ -47,6 +48,12 @@ export class CalloutContent extends BaseComponent<ICalloutProps, ICalloutState>
       slideDirectionalClassName: null,
       calloutElementRect: null
     };
+    // This is used to allow the Callout to appear on a window other than the one the javascript is running in.
+    if (props.targetElement && props.targetElement.ownerDocument && props.targetElement.ownerDocument.defaultView) {
+      this._targetWindow = props.targetElement.ownerDocument.defaultView;
+    } else {
+      this._targetWindow = window;
+    }
   }
 
   public componentDidUpdate() {
@@ -90,11 +97,11 @@ export class CalloutContent extends BaseComponent<ICalloutProps, ICalloutState>
     }
   }
 
-  private _dismissOnLostFocus(ev: Event) {
+  protected _dismissOnLostFocus(ev: Event) {
     let { targetElement } = this.props;
     let target = ev.target as HTMLElement;
 
-    if (ev.target !== window &&
+    if (ev.target !== this._targetWindow &&
       this._hostElement &&
       !elementContains(this._hostElement, target) &&
       (!targetElement || !elementContains(targetElement, target))) {
@@ -103,7 +110,7 @@ export class CalloutContent extends BaseComponent<ICalloutProps, ICalloutState>
   }
 
   @autobind
-  private _setInitialFocus() {
+  protected _setInitialFocus() {
     if (this.props.setInitialFocus && !this._didSetInitialFocus && this.state.positions) {
       this._didSetInitialFocus = true;
       focusFirstChild(this._calloutElement);
@@ -111,13 +118,13 @@ export class CalloutContent extends BaseComponent<ICalloutProps, ICalloutState>
   }
 
   @autobind
-  private _onComponentDidMount() {
+  protected _onComponentDidMount() {
     // This is added so the callout will dismiss when the window is scrolled
     // but not when something inside the callout is scrolled.
-    this._events.on(window, 'scroll', this._dismissOnLostFocus, true);
-    this._events.on(window, 'resize', this.dismiss, true);
-    this._events.on(window, 'focus', this._dismissOnLostFocus, true);
-    this._events.on(window, 'click', this._dismissOnLostFocus, true);
+    this._events.on(this._targetWindow , 'scroll', this._dismissOnLostFocus, true);
+    this._events.on(this._targetWindow , 'resize', this.dismiss, true);
+    this._events.on(this._targetWindow , 'focus', this._dismissOnLostFocus, true);
+    this._events.on(this._targetWindow , 'click', this._dismissOnLostFocus, true);
 
     if (this.props.onLayerMounted) {
       this.props.onLayerMounted();
diff --git a/src/components/ContextualMenu/ContextualMenu.tsx b/src/components/ContextualMenu/ContextualMenu.tsx
index 4234c3c4a0e00b..eda76475d12568 100644
--- a/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/src/components/ContextualMenu/ContextualMenu.tsx
@@ -86,6 +86,7 @@ export class ContextualMenu extends React.Component<IContextualMenuProps, IConte
   private _events: EventGroup;
   private _async: Async;
   private _focusZone: FocusZone;
+  private _targetWindow: Window;
 
   constructor(props: IContextualMenuProps) {
     super(props);
@@ -100,6 +101,12 @@ export class ContextualMenu extends React.Component<IContextualMenuProps, IConte
     this._enterTimerId = 0;
     this._events = new EventGroup(this);
     this._async = new Async(this);
+    // This is used to allow the ContextualMenu to appear on a window other than the one the javascript is running in.
+    if (props.targetElement && props.targetElement.ownerDocument && props.targetElement.ownerDocument.defaultView) {
+      this._targetWindow = props.targetElement.ownerDocument.defaultView;
+    } else {
+      this._targetWindow = window;
+    }
 
   }
 
@@ -119,7 +126,7 @@ export class ContextualMenu extends React.Component<IContextualMenuProps, IConte
 
   // Invoked once, only on the client (not on the server), immediately after the initial rendering occurs.
   public componentDidMount() {
-    this._events.on(window, 'resize', this.dismiss);
+    this._events.on(this._targetWindow, 'resize', this.dismiss);
   }
 
   // Invoked when a component is receiving new props.