chore: update react-popper to v2 (#3947)

Co-authored-by: Oleksandr Fediashov <[email protected]>

Author: ayasakov

docs/src/examples/modules/Popup/Usage/PopupExampleOffset.js

@@ -6,25 +6,25 @@ const PopupExampleOffset = () => (
     <Popup
       trigger={<Icon size='large' name='heart' circular />}
       content='Way off to the left'
-      offset='0, 50px'
+      offset={[0, 50]}
       position='left center'
     />
     <Popup
       trigger={<Icon size='large' name='heart' circular />}
       content='As expected this popup is way off to the right'
-      offset='0, 50px'
+      offset={[0, 50]}
       position='right center'
     />
     <Popup
       trigger={<Icon size='large' name='heart' circular />}
       content='Way off to the top'
-      offset='0, 50px'
+      offset={[0, 50]}
       position='top center'
     />
     <Popup
       trigger={<Icon size='large' name='heart' circular />}
       content='As expected this popup is way off to the bottom'
-      offset='0, 50px'
+      offset={[0, 50]}
       position='bottom center'
     />
   </>

docs/src/examples/modules/Popup/Usage/PopupExampleOffsetFunction.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Icon, Popup } from 'semantic-ui-react'
+
+function PopupExampleOffsetFunction() {
+  const offset = ({ placement, popper }) => {
+    if (placement === 'bottom') {
+      return [0, popper.height / 2]
+    }
+
+    return []
+  }
+
+  return (
+    <>
+      <Popup
+        trigger={<Icon size='large' name='heart' circular />}
+        content='Has no offset'
+        offset={offset}
+        position='top center'
+      />
+      <Popup
+        trigger={<Icon size='large' name='heart' circular />}
+        content='Has a half width offset'
+        offset={offset}
+        position='bottom center'
+      />
+    </>
+  )
+}
+
+export default PopupExampleOffsetFunction

docs/src/examples/modules/Popup/Usage/index.js

@@ -14,33 +14,55 @@ const PopupUsageExamples = () => (
       <Message info>
         <p>
           We are using Popper.js for positioning, so you can use the{' '}
-          <code>offset</code> prop as it described in their docs. Accepts the
-          following units:
+          <code>offset</code> prop as it described in{' '}
+          <a
+            href='https://popper.js.org/docs/v2/modifiers/offset/'
+            rel='noreferrer'
+            target='_blank'
+          >
+            their docs
+          </a>
+          . The basic offset accepts an array with two numbers in the form{' '}
+          <code>[skidding, distance].</code>
         </p>
         <Message.List>
           <Message.Item>
-            <code>px</code> or unit-less, interpreted as pixels
-          </Message.Item>
-          <Message.Item>
-            <code>%</code>, percentage relative to the length of the trigger
-            element
-          </Message.Item>
-          <Message.Item>
-            <code>%p</code>, percentage relative to the length of the popup
-            element
-          </Message.Item>
-          <Message.Item>
-            <code>vw</code>, CSS viewport width unit
+            <code>skidding</code> displaces the <code>Popup</code> along the
+            reference element
           </Message.Item>
           <Message.Item>
-            <code>vh</code>, CSS viewport height unit
+            <code>distance</code> displaces the <code>Popup</code> away from, or
+            toward, the reference element in the direction of its placement. A
+            positive number displaces it further away, while a negative number
+            lets it overlap the reference
           </Message.Item>
         </Message.List>
       </Message>
       <Button
         content='Popper.JS: offset'
-        href='https://popper.js.org/popper-documentation.html#modifiers..offset'
+        href='https://popper.js.org/docs/v2/modifiers/offset/'
+        icon='book'
+        rel='noreferrer'
+        target='_blank'
+      />
+    </ComponentExample>
+    <ComponentExample
+      title='Offset as a function'
+      description='A popup position can accept computed offset via functions'
+      examplePath='modules/Popup/Usage/PopupExampleOffsetFunction'
+    >
+      <Message>
+        It's preferred to define <code>offset</code> as a tuple of values,
+        however it's also possible to use functions for more complex scenarios.
+        In this example, we are applying half the <code>Popup</code>'s height as
+        margin between the two elements only when the popper is positioned below
+        its reference element.
+      </Message>
+      <Button
+        content='Popper.JS: offset'
+        href='https://popper.js.org/docs/v2/modifiers/offset/'
         icon='book'
+        rel='noreferrer'
         target='_blank'
       />
     </ComponentExample>

package.json

@@ -70,14 +70,15 @@
     "@babel/runtime": "^7.10.5",
     "@fluentui/react-component-event-listener": "~0.51.1",
     "@fluentui/react-component-ref": "~0.51.1",
+    "@popperjs/core": "^2.5.2",
     "@semantic-ui-react/event-stack": "^3.1.0",
     "clsx": "^1.1.1",
     "keyboard-key": "^1.1.0",
     "lodash": "^4.17.19",
     "lodash-es": "^4.17.15",
     "prop-types": "^15.7.2",
     "react-is": "^16.8.6",
-    "react-popper": "^1.3.7",
+    "react-popper": "^2.2.3",
     "shallowequal": "^1.1.0"
   },
   "devDependencies": {

src/modules/Popup/Popup.d.ts

@@ -1,10 +1,18 @@
 import * as React from 'react'
+import * as Popper from '@popperjs/core'
 
 import { SemanticShorthandItem } from '../../generic'
 import { StrictPortalProps } from '../../addons/Portal'
 import PopupContent, { PopupContentProps } from './PopupContent'
 import PopupHeader, { PopupHeaderProps } from './PopupHeader'
 
+type PopperOffsetsFunctionParams = {
+  popper: Popper.Rect
+  reference: Popper.Rect
+  placement: Popper.Placement
+}
+type PopperOffsetsFunction = (params: PopperOffsetsFunctionParams) => [number?, number?]
+
 export interface PopupProps extends StrictPopupProps {
   [key: string]: any
 }
@@ -49,14 +57,15 @@ export interface StrictPopupProps extends StrictPortalProps {
   /** Invert the colors of the popup */
   inverted?: boolean
 
-  /** Offset value to apply to rendered popup. Accepts the following units:
-   * - px or unit-less, interpreted as pixels
-   * - %, percentage relative to the length of the trigger element
-   * - %p, percentage relative to the length of the popup element
-   * - vw, CSS viewport width unit
-   * - vh, CSS viewport height unit
+  /**
+   * Offset values in px unit to apply to rendered popup. The basic offset accepts an
+   * array with two numbers in the form [skidding, distance]:
+   * - `skidding` displaces the Popup along the reference element
+   * - `distance` displaces the Popup away from, or toward, the reference element in the direction of its placement. A positive number displaces it further away, while a negative number lets it overlap the reference.
+   *
+   * @see https://popper.js.org/docs/v2/modifiers/offset/
    */
-  offset?: number | string
+  offset?: [number, number?] | PopperOffsetsFunction
 
   /** Events triggering the popup. */
   on?: 'hover' | 'click' | 'focus' | ('hover' | 'click' | 'focus')[]
@@ -110,8 +119,8 @@ export interface StrictPopupProps extends StrictPortalProps {
   /** 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?: Record<string, any>
+  /** An array containing custom settings for the Popper.js modifiers. */
+  popperModifiers?: any[]
 
   /** A popup can have dependencies which update will schedule a position update. */
   popperDependencies?: any[]

src/modules/Popup/Popup.js

@@ -1,5 +1,4 @@
 import EventStack from '@semantic-ui-react/event-stack'
-import { Ref } from '@fluentui/react-component-ref'
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
@@ -136,12 +135,7 @@ export default class Popup extends Component {
     if (this.positionUpdate) this.positionUpdate()
   }
 
-  renderContent = ({
-    placement: popperPlacement,
-    ref: popperRef,
-    scheduleUpdate,
-    style: popperStyle,
-  }) => {
+  renderContent = ({ placement: popperPlacement, ref: popperRef, update, style: popperStyle }) => {
     const {
       basic,
       children,
@@ -157,7 +151,7 @@ export default class Popup extends Component {
     } = this.props
     const { contentRestProps } = this.state
 
-    this.positionUpdate = scheduleUpdate
+    this.positionUpdate = update
 
     const classes = cx(
       'ui',
@@ -175,12 +169,17 @@ export default class Popup extends Component {
       // Heads up! We need default styles to get working correctly `flowing`
       left: 'auto',
       right: 'auto',
-      ...popperStyle,
+      // This is required to be properly positioned inside wrapping `div`
+      position: 'initial',
       ...style,
     }
 
     return (
-      <Ref innerRef={popperRef}>
+      // https://github.com/popperjs/popper-core/blob/f1f9d1ab75b6b0e962f90a5b2a50f6cfd307d794/src/createPopper.js#L136-L137
+      // Heads up!
+      // A wrapping `div` there is a pure magic, it's required as Popper warns on margins that are
+      // defined by SUI CSS. It also means that this `div` will be positioned instead of `content`.
+      <div ref={popperRef} style={popperStyle}>
         <ElementType {...contentRestProps} className={classes} style={styles}>
           {childrenUtils.isNil(children) ? (
             <>
@@ -192,7 +191,7 @@ export default class Popup extends Component {
           )}
           {hideOnScroll && <EventStack on={this.hideOnScroll} name='scroll' target='window' />}
         </ElementType>
-      </Ref>
+      </div>
     )
   }
 
@@ -214,17 +213,16 @@ export default class Popup extends Component {
       return trigger
     }
 
-    const modifiers = _.merge(
-      {
-        arrow: { enabled: false },
-        flip: { enabled: !pinned },
-        // There are issues with `keepTogether` and `offset`
-        // https://github.com/FezVrasta/popper.js/issues/557
-        keepTogether: { enabled: !!offset },
-        offset: { offset },
-      },
-      popperModifiers,
-    )
+    const modifiers = [
+      { name: 'arrow', enabled: false },
+      { name: 'eventListeners', options: { scroll: !!eventsEnabled, resize: !!eventsEnabled } },
+      { name: 'flip', enabled: !pinned },
+      { name: 'preventOverflow', enabled: !!offset },
+      { name: 'offset', enabled: !!offset, options: { offset } },
+      ...popperModifiers,
+    ]
+    debug('popper modifiers:', modifiers)
+
     const referenceElement = createReferenceProxy(_.isNil(context) ? this.triggerRef : context)
 
     const mergedPortalProps = { ...this.getPortalProps(), ...portalRestProps }
@@ -241,10 +239,9 @@ export default class Popup extends Component {
         triggerRef={this.triggerRef}
       >
         <Popper
-          eventsEnabled={eventsEnabled}
           modifiers={modifiers}
           placement={positionsMapping[position]}
-          positionFixed={positionFixed}
+          strategy={positionFixed ? 'fixed' : null}
           referenceElement={referenceElement}
         >
           {this.renderContent}
@@ -298,14 +295,15 @@ Popup.propTypes = {
   /** Invert the colors of the Popup. */
   inverted: PropTypes.bool,
 
-  /** Offset value to apply to rendered popup. Accepts the following units:
-   * - px or unit-less, interpreted as pixels
-   * - %, percentage relative to the length of the trigger element
-   * - %p, percentage relative to the length of the popup element
-   * - vw, CSS viewport width unit
-   * - vh, CSS viewport height unit
+  /**
+   * Offset values in px unit to apply to rendered popup. The basic offset accepts an
+   * array with two numbers in the form [skidding, distance]:
+   * - `skidding` displaces the Popup along the reference element
+   * - `distance` displaces the Popup away from, or toward, the reference element in the direction of its placement. A positive number displaces it further away, while a negative number lets it overlap the reference.
+   *
+   * @see https://popper.js.org/docs/v2/modifiers/offset/
    */
-  offset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  offset: PropTypes.oneOfType([PropTypes.func, PropTypes.arrayOf(PropTypes.number)]),
 
   /** Events triggering the popup. */
   on: PropTypes.oneOfType([
@@ -354,8 +352,8 @@ Popup.propTypes = {
   /** 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,
+  /** An array containing custom settings for the Popper.js modifiers. */
+  popperModifiers: PropTypes.array,
 
   /** A popup can have dependencies which update will schedule a position update. */
   popperDependencies: PropTypes.array,
@@ -376,9 +374,9 @@ Popup.propTypes = {
 Popup.defaultProps = {
   disabled: false,
   eventsEnabled: true,
-  offset: 0,
   on: ['click', 'hover'],
   pinned: false,
+  popperModifiers: [],
   position: 'top left',
 }