diff --git a/src/modules/Popup/Popup.d.ts b/src/modules/Popup/Popup.d.ts index bb1ecbb97e..ac91b25f60 100644 --- a/src/modules/Popup/Popup.d.ts +++ b/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 diff --git a/src/modules/Popup/Popup.js b/src/modules/Popup/Popup.js index 62b956dd59..ba068b0fb1 100644 --- a/src/modules/Popup/Popup.js +++ b/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} diff --git a/test/specs/modules/Popup/Popup-test.js b/test/specs/modules/Popup/Popup-test.js index 90ae3a4001..b2512929ae 100644 --- a/test/specs/modules/Popup/Popup-test.js +++ b/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() + + wrapper.should.not.have.prop('positionFixed') + wrapper.find('Popper').should.not.have.prop('positionFixed') + }) + + it(`can be set to "true"`, () => { + wrapperMount() + wrapper.find('Popper').should.have.prop('positionFixed', true) + }) + }) + describe('popperModifiers', () => { it('are passed to Popper', () => { const modifiers = {