feat(Popup): add positionFixed to support fixed mode in Popper.JS (#3760)

* feat(Popup): add positionFixed to support popper fixed mode (#3718)

Add support for popper.js to position the popup correctly if used with a mountNode inside a `position: fixed` container

* feat(Popup): add `positionFixed` to support fixed mode in `Popper.JS`

Simplify code

* Update Popup-test.js

* Update Popup.d.ts

* Update Popup.js

Author: fxOne

src/modules/Popup/Popup.d.ts

@@ -107,6 +107,9 @@ export interface StrictPopupProps extends StrictPortalProps {
     | 'top center'
     | 'bottom center'
 
+  /** Tells `Popper.js` to use the `position: fixed` strategy to position the popover. */
+  positionFixed?: boolean
+
   /** An object containing custom settings for the Popper.js modifiers. */
   popperModifiers?: object
 

src/modules/Popup/Popup.js

@@ -127,6 +127,9 @@ export default class Popup extends Component {
     /** Position for the popover. */
     position: PropTypes.oneOf(positions),
 
+    /** Tells `Popper.js` to use the `position: fixed` strategy to position the popover. */
+    positionFixed: PropTypes.bool,
+
     /** An object containing custom settings for the Popper.js modifiers. */
     popperModifiers: PropTypes.object,
 
@@ -333,6 +336,7 @@ export default class Popup extends Component {
       pinned,
       popperModifiers,
       position,
+      positionFixed,
       trigger,
     } = this.props
     const { closed, portalRestProps } = this.state
@@ -369,6 +373,7 @@ export default class Popup extends Component {
           eventsEnabled={eventsEnabled}
           modifiers={modifiers}
           placement={positionsMapping[position]}
+          positionFixed={positionFixed}
           referenceElement={referenceElement}
         >
           {this.renderContent}

test/specs/modules/Popup/Popup-test.js

@@ -4,7 +4,7 @@ import React from 'react'
 import Portal from 'src/addons/Portal/Portal'
 import { SUI } from 'src/lib'
 import Popup from 'src/modules/Popup/Popup'
-import { positionsMapping } from 'src/modules/Popup/lib/positions.js'
+import { positionsMapping } from 'src/modules/Popup/lib/positions'
 import PopupHeader from 'src/modules/Popup/PopupHeader'
 import PopupContent from 'src/modules/Popup/PopupContent'
 import * as common from 'test/specs/commonTests'
@@ -289,6 +289,20 @@ describe('Popup', () => {
     })
   })
 
+  describe('positionFixed', () => {
+    it(`is not defiend by default`, () => {
+      wrapperMount(<Popup open />)
+
+      wrapper.should.not.have.prop('positionFixed')
+      wrapper.find('Popper').should.not.have.prop('positionFixed')
+    })
+
+    it(`can be set to "true"`, () => {
+      wrapperMount(<Popup positionFixed open />)
+      wrapper.find('Popper').should.have.prop('positionFixed', true)
+    })
+  })
+
   describe('popperModifiers', () => {
     it('are passed to Popper', () => {
       const modifiers = {