fix(Popup): render element as body children (#302)

* render popup as body children

* changelog

CHANGELOG.md

@@ -20,6 +20,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Fixes
 - Fix Attachment `styles` prop typing @levithomason ([#299](https://github.com/stardust-ui/react/pull/299))
 - Fix generation of `key` for the `Accordion.Content` @mnajdova ([#305](https://github.com/stardust-ui/react/pull/305))
+- Ensure `Popup` is rendered as direct child of `body` element in the DOM tree @kuzhelov ([#302](https://github.com/stardust-ui/react/pull/302))
 
 ### Features
 - Add focus styles for `Menu.Item` component @Bugaa92 ([#286](https://github.com/stardust-ui/react/pull/286))

src/components/Popup/Popup.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react'
+import { createPortal } from 'react-dom'
 import * as PropTypes from 'prop-types'
 import _ from 'lodash'
 import { Popper, PopperChildrenProps } from 'react-popper'
 
-import { childrenExist, AutoControlledComponent, IRenderResultConfig } from '../../lib'
+import { childrenExist, AutoControlledComponent, IRenderResultConfig, isBrowser } from '../../lib'
 import {
   ComponentEventHandler,
   ItemShorthand,
@@ -107,6 +108,8 @@ export default class Popup extends AutoControlledComponent<Extendable<IPopupProp
 
   public static autoControlledProps = ['open']
 
+  private static isBrowserContext = isBrowser()
+
   protected actionHandlers: AccessibilityActionHandlers = {
     toggle: e =>
       _.invoke(this.props, 'onOpenChange', e, { ...this.props, ...{ open: !this.props.open } }),
@@ -138,7 +141,9 @@ export default class Popup extends AutoControlledComponent<Extendable<IPopupProp
             ...accessibility.keyHandlers.trigger,
           })}
         </Ref>
-        {open && this.renderPopupContent(rtl, accessibility)}
+        {open &&
+          Popup.isBrowserContext &&
+          createPortal(this.renderPopupContent(rtl, accessibility), document.body)}
       </>
     )
   }