chore(Popup|MenuButton): remove mountDocument prop (#2286)

* chore(Popup|MenuButton): remove `mountDocument` prop

* add changelog entry

Author: layershifter

CHANGELOG.md

@@ -26,6 +26,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add logic for mounting/removing elements when they are shown/hidden using the `Animation` component; `Animation` component is not rendering element anymore, just applying classes to it's children @mnajdova ([#2115](https://github.com/microsoft/fluent-ui-react/pull/2115))
 - Restricted prop set in the `Button`, `Avatar`, `Box` and `Image` styles; changed `avatarBorderWidth` and `statusBorderWidth` avatar variables types from number to string and updated styles in Teams theme @mnajdova ([#2238](https://github.com/microsoft/fluent-ui-react/pull/2238))
 - Restricted prop set in the `List` & `ListItem` @layershifter ([#2238](https://github.com/microsoft/fluent-ui-react/pull/2238))
+- Remove `mountDocument` prop in `Popup` & `MenuButton` components @layershifter ([#2286](https://github.com/microsoft/fluent-ui-react/pull/2286))
 
 ### Fixes
 - Fix event listener leak in `FocusZone` @miroslavstastny ([#2227](https://github.com/microsoft/fluent-ui-react/pull/2227))

packages/react/src/components/MenuButton/MenuButton.tsx

@@ -39,9 +39,6 @@ export interface MenuButtonProps extends StyledComponentProps<MenuButtonProps>,
   /** Initial value for 'open'. */
   defaultOpen?: boolean
 
-  /** Existing document the popup should add listeners. */
-  mountDocument?: Document
-
   /** Existing element the popup should be bound to. */
   mountNode?: HTMLElement
 
@@ -118,7 +115,6 @@ export default class MenuButton extends AutoControlledComponent<MenuButtonProps,
     }),
     align: PropTypes.oneOf(ALIGNMENTS),
     defaultOpen: PropTypes.bool,
-    mountDocument: PropTypes.object,
     mountNode: customPropTypes.domNode,
     mouseLeaveDelay: PropTypes.number,
     offset: PropTypes.string,
@@ -214,7 +210,6 @@ export default class MenuButton extends AutoControlledComponent<MenuButtonProps,
       align,
       className,
       defaultOpen,
-      mountDocument,
       mountNode,
       mouseLeaveDelay,
       offset,
@@ -236,7 +231,6 @@ export default class MenuButton extends AutoControlledComponent<MenuButtonProps,
       align,
       className,
       defaultOpen,
-      mountDocument,
       mountNode,
       mouseLeaveDelay,
       offset,

packages/react/src/components/Popup/Popup.tsx

@@ -70,9 +70,6 @@ export interface PopupProps
   /** Whether the Popup should be rendered inline with the trigger or in the body. */
   inline?: boolean
 
-  /** Existing document the popup should add listeners. */
-  mountDocument?: Document
-
   /** Existing element the popup should be bound to. */
   mountNode?: HTMLElement
 
@@ -151,7 +148,6 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
     align: PropTypes.oneOf(ALIGNMENTS),
     defaultOpen: PropTypes.bool,
     inline: PropTypes.bool,
-    mountDocument: PropTypes.object,
     mountNode: customPropTypes.domNode,
     mouseLeaveDelay: PropTypes.number,
     offset: PropTypes.string,
@@ -288,7 +284,7 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
     const isLastOpenedPopup: boolean =
       lastContentRef && lastContentRef.current === this.popupDomElement
 
-    const activeDocument = this.props.mountDocument || this.context.target
+    const activeDocument: HTMLDocument = this.context.target
     const bodyHasFocus: boolean = activeDocument.activeElement === activeDocument.body
 
     if (keyCode === keyboardKey.Escape && bodyHasFocus && isLastOpenedPopup) {
@@ -499,14 +495,13 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
       content: propsContent,
       renderContent,
       contentRef,
-      mountDocument,
       pointing,
       trapFocus,
       autoFocus,
     } = this.props
 
     const content = renderContent ? renderContent(scheduleUpdate) : propsContent
-    const targetRef = toRefObject(mountDocument || this.context.target)
+    const targetRef = toRefObject(this.context.target)
 
     const popupContent = Popup.Content.create(content || {}, {
       defaultProps: () => ({
@@ -621,9 +616,7 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
    * Can be either trigger DOM element itself or the element inside it.
    */
   updateTriggerFocusableDomElement() {
-    const { mountDocument } = this.props
-
-    const activeDocument = mountDocument || this.context.target
+    const activeDocument: HTMLDocument = this.context.target
     const activeElement = activeDocument.activeElement
 
     this.triggerFocusableDomElement =