fix(Popup): fix broken background with pointing and FocusTrap (#1689)

* fix(Popup): fix broken background with pointing and FocusTrap

* update CHANGELOG

* fix for render callback

* fix comment

Author: layershifter

CHANGELOG.md

@@ -23,6 +23,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Fixes
 - Fix a gap in `Checkbox` in RTL mode @layershifter ([#1683](https://github.com/stardust-ui/react/pull/1683))
+- Fix broken background in `Popup` with `pointing` and `FocusTrap` @layershifter ([#1689](https://github.com/stardust-ui/react/pull/1689))
 
 <!--------------------------------[ v0.34.1 ]------------------------------- -->
 ## [v0.34.1](https://github.com/stardust-ui/react/tree/v0.34.1) (2019-07-11)

packages/react/src/themes/teams/components/Popup/popupStyles.ts

@@ -1,16 +1,35 @@
+import * as _ from 'lodash'
+import * as React from 'react'
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { PopupProps } from '../../../../components/Popup/Popup'
 import { PopupVariables } from './popupVariables'
 
 const popupStyles: ComponentSlotStylesInput<PopupProps, PopupVariables> = {
   root: (): ICSSInJSStyle => ({}),
 
-  popup: ({ variables: v }): ICSSInJSStyle => ({
+  popup: ({ props: p, variables: v }): ICSSInJSStyle => ({
     zIndex: v.zIndex,
     position: 'absolute',
     textAlign: 'left',
-    color: v.contentColor,
-    background: v.contentBackgroundColor,
+
+    /*
+     * This fix handles all cases with wrapped focus trap.
+     */
+    ...((React.isValidElement(p.content) || _.isFunction(p.content)) && {
+      // when FocusTrap exists and `context` is JSX element or render() callback
+      color: v.contentColor,
+      background: v.contentBackgroundColor,
+    }),
+    '&.ui-popup__content': {
+      // when there is no FocusTrap
+      color: v.contentColor,
+      background: v.contentBackgroundColor,
+    },
+    '& .ui-popup__content': {
+      // when FocusTrap exists
+      color: v.contentColor,
+      background: v.contentBackgroundColor,
+    },
   }),
 }