fix(release): migrate popper.js from v1 to v2

ayasakov · ayasakov · commit c13cda1db691 · 2020-05-21T13:37:03.000+04:00
* update Popup module

* update docs
diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleEventsEnabled.js b/docs/src/examples/modules/Popup/Usage/PopupExampleEventsEnabled.js
diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleOffset.js b/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'
     />
   </React.Fragment>
diff --git a/docs/src/examples/modules/Popup/Usage/index.js b/docs/src/examples/modules/Popup/Usage/index.js
@@ -14,45 +14,30 @@ 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 their docs.
+        </p>
+        <p>
+          The basic offset accepts an array with two numbers in the form{' '}
+          <code>[skidding, distance].</code>
+        </p>
+        <p>
+          The first number, <code>skidding</code>, displaces the popper along
+          the reference element.
+        </p>
+        <p>
+          The second number, <code>distance</code>, displaces the popper 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.
         </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
-          </Message.Item>
-          <Message.Item>
-            <code>vh</code>, CSS viewport height unit
-          </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'
         target='_blank'
       />
     </ComponentExample>
-    <ComponentExample
-      title={<code>eventsEnabled</code>}
-      description={
-        <span>
-          Enables the <code>Popper.js</code> event listeners.
-        </span>
-      }
-      examplePath='modules/Popup/Usage/PopupExampleEventsEnabled'
-    />
     <ComponentExample
       title='Popper Dependencies'
       description={
diff --git a/package.json b/package.json
@@ -78,6 +78,7 @@
   "homepage": "https://github.com/Semantic-Org/Semantic-UI-React#readme",
   "dependencies": {
     "@babel/runtime": "^7.1.2",
+    "@popperjs/core": "2.4.0",
     "@semantic-ui-react/event-stack": "^3.1.0",
     "@stardust-ui/react-component-event-listener": "~0.38.0",
     "@stardust-ui/react-component-ref": "~0.38.0",
@@ -86,7 +87,7 @@
     "lodash": "^4.17.15",
     "prop-types": "^15.7.2",
     "react-is": "^16.8.6",
-    "react-popper": "^1.3.4",
+    "react-popper": "^2.2.3",
     "shallowequal": "^1.1.0"
   },
   "devDependencies": {
diff --git a/src/modules/Popup/Popup.d.ts b/src/modules/Popup/Popup.d.ts
@@ -31,9 +31,6 @@ export interface StrictPopupProps extends StrictPortalProps {
   /** A disabled popup only renders its trigger. */
   disabled?: boolean
 
-  /** Enables the Popper.js event listeners. */
-  eventsEnabled?: boolean
-
   /** A flowing Popup has no maximum width and continues to flow to fit its content. */
   flowing?: boolean
 
@@ -49,12 +46,14 @@ 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].
+   *
+   * The first number, skidding, displaces the popper along the reference element.
+   *
+   * The second number, distance, displaces the popper 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.
    */
   offset?: number | string
 
@@ -110,8 +109,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?: object
+  /** 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[]
diff --git a/src/modules/Popup/Popup.js b/src/modules/Popup/Popup.js
@@ -52,9 +52,6 @@ export default class Popup extends Component {
     /** A disabled popup only renders its trigger. */
     disabled: PropTypes.bool,
 
-    /** Enables the Popper.js event listeners. */
-    eventsEnabled: PropTypes.bool,
-
     /** A flowing Popup has no maximum width and continues to flow to fit its content. */
     flowing: PropTypes.bool,
 
@@ -74,14 +71,16 @@ export default class Popup extends Component {
     /** 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].
+     *
+     * The first number, skidding, displaces the popper along the reference element.
+     *
+     * The second number, distance, displaces the popper 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.
      */
-    offset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    offset: PropTypes.arrayOf(PropTypes.number),
 
     /** Events triggering the popup. */
     on: PropTypes.oneOfType([
@@ -130,8 +129,8 @@ export default class Popup extends Component {
     /** 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,
@@ -151,8 +150,7 @@ export default class Popup extends Component {
 
   static defaultProps = {
     disabled: false,
-    eventsEnabled: true,
-    offset: 0,
+    offset: [0, 0],
     on: ['click', 'hover'],
     pinned: false,
     position: 'top left',
@@ -331,7 +329,6 @@ export default class Popup extends Component {
     const {
       context,
       disabled,
-      eventsEnabled,
       offset,
       pinned,
       popperModifiers,
@@ -343,17 +340,17 @@ export default class Popup extends Component {
 
     if (closed || disabled) 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 defaultModifiers = [
+      { name: 'arrow', enabled: false },
+      { name: 'flip', enabled: !pinned },
+      { name: 'preventOverflow', enabled: !!offset },
+      { name: 'offset', options: { offset } },
+    ]
+    const modifiers = popperModifiers
+      ? _.unionBy(popperModifiers, defaultModifiers, 'name')
+      : defaultModifiers
+    debug('popper modifiers:', modifiers)
+
     const referenceElement = createReferenceProxy(_.isNil(context) ? this.triggerRef : context)
 
     const mergedPortalProps = { ...this.getPortalProps(), ...portalRestProps }
@@ -370,10 +367,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}
diff --git a/test/specs/modules/Popup/Popup-test.js b/test/specs/modules/Popup/Popup-test.js
@@ -110,20 +110,6 @@ describe('Popup', () => {
     })
   })
 
-  describe('eventsEnabled ', () => {
-    it(`is "true" by default`, () => {
-      wrapperMount(<Popup open />)
-
-      wrapper.should.have.prop('eventsEnabled', true)
-      wrapper.find('Popper').should.have.prop('eventsEnabled', true)
-    })
-
-    it(`can be set to "false"`, () => {
-      wrapperMount(<Popup eventsEnabled={false} open />)
-      wrapper.find('Popper').should.have.prop('eventsEnabled', false)
-    })
-  })
-
   describe('flowing', () => {
     it('adds flowing to the popup className', () => {
       wrapperMount(<Popup flowing open />)
@@ -174,12 +160,12 @@ describe('Popup', () => {
 
   describe('offset', () => {
     it('passes values to Popper', () => {
-      wrapperMount(<Popup content='foo' open offset='50, 100' position='bottom right' />)
+      wrapperMount(<Popup content='foo' open offset={[50, 100]} position='bottom right' />)
 
       const modifiers = wrapper.find('Popper').prop('modifiers')
-      const offset = modifiers.offset
+      const offset = _.find(modifiers, (m) => m.name === 'offset')
 
-      offset.should.have.property('offset', '50, 100')
+      offset.should.have.property('options').deep.include({ offset: [50, 100] })
     })
   })
 
@@ -254,10 +240,13 @@ describe('Popup', () => {
   })
 
   describe('pinned', () => {
-    it(`is "false" by default`, () => {
+    it(`is "true" by default`, () => {
       wrapperMount(<Popup open />)
 
-      wrapper.should.have.prop('pinned', false)
+      wrapper
+        .find('Popper')
+        .should.have.prop('modifiers')
+        .deep.include({ name: 'flip', enabled: true })
     })
 
     it(`disables "flip" modifier in PopperJS when is "true"`, () => {
@@ -266,7 +255,7 @@ describe('Popup', () => {
       wrapper
         .find('Popper')
         .should.have.prop('modifiers')
-        .deep.include({ flip: { enabled: false } })
+        .deep.include({ name: 'flip', enabled: false })
     })
 
     it(`enables "flip" modifier in PopperJS when is "false"`, () => {
@@ -275,7 +264,7 @@ describe('Popup', () => {
       wrapper
         .find('Popper')
         .should.have.prop('modifiers')
-        .deep.include({ flip: { enabled: true } })
+        .deep.include({ name: 'flip', enabled: true })
     })
   })
 
@@ -299,22 +288,21 @@ describe('Popup', () => {
 
     it(`can be set to "true"`, () => {
       wrapperMount(<Popup positionFixed open />)
-      wrapper.find('Popper').should.have.prop('positionFixed', true)
+      wrapper.find('Popper').should.have.prop('strategy', 'fixed')
     })
   })
 
   describe('popperModifiers', () => {
     it('are passed to Popper', () => {
-      const modifiers = {
-        keepTogether: { enabled: false },
-        preventOverflow: { padding: 0 },
-      }
-      wrapperMount(<Popup popperModifiers={modifiers} open />)
+      const modifierOffset = { name: 'offset', options: { offset: [0, 10] } }
+      const modifierPreventOverflow = { name: 'preventOverflow', options: { padding: 0 } }
+      wrapperMount(<Popup popperModifiers={[modifierOffset, modifierPreventOverflow]} open />)
 
       wrapper
         .find('Popper')
         .should.have.prop('modifiers')
-        .deep.include(modifiers)
+        .deep.include(modifierOffset)
+        .deep.include(modifierPreventOverflow)
     })
   })
 
diff --git a/yarn.lock b/yarn.lock
