From ee2bb8e8e69ab7cc302db13c9a977238b3170f9c Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Date: Mon, 25 Mar 2019 20:32:19 +0200
Subject: [PATCH] breaking(Popup): switch to Popper.js (#3532)

* breaking(Popup): switch to Popper.js

* chore(package): update react-hot-loader

* update UTs

* fix offset, update docs

* rework docs
---
 docs/src/App.js                               |   4 +-
 docs/src/components/Document.js               |  16 +-
 .../modules/Popup/Types/PopupExample.js       |   2 +-
 ...ExampleTitled.js => PopupExampleHeader.js} |  14 +-
 .../modules/Popup/Types/PopupExampleHtml.js   |  26 -
 .../Popup/Types/PopupExampleTrigger.js        |  27 +
 .../src/examples/modules/Popup/Types/index.js |  12 +-
 .../Popup/Usage/PopupExampleActions.js        |  38 ++
 .../modules/Popup/Usage/PopupExampleClick.js  |  13 -
 .../Popup/Usage/PopupExampleContext.js        |   4 +-
 .../Popup/Usage/PopupExampleControlled.js     |   9 +-
 .../Popup/Usage/PopupExampleDefaultOpen.js    |   7 +-
 .../modules/Popup/Usage/PopupExampleFocus.js  |  13 -
 .../PopupExampleHideOnScroll.js               |   8 +-
 .../modules/Popup/Usage/PopupExampleHover.js  |  12 -
 .../PopupExampleOffset.js                     |  12 +-
 .../src/examples/modules/Popup/Usage/index.js |  64 ++-
 .../Popup/Variations/PopupExampleInverted.js  |  10 +-
 .../Popup/Variations/PopupExampleSize.js      |   4 +-
 .../Popup/Variations/PopupExampleWide.js      |  19 +-
 .../modules/Popup/Variations/index.js         |  33 +-
 gulp/plugins/util/parseType.js                |  37 +-
 package.json                                  |  11 +-
 src/modules/Popup/Popup.d.ts                  |  16 +-
 src/modules/Popup/Popup.js                    | 294 +++-------
 src/modules/Popup/lib/createReferenceProxy.js |  38 ++
 src/modules/Popup/lib/positions.js            |  18 +
 test/specs/modules/Popup/Popup-test.js        | 543 +++++-------------
 yarn.lock                                     | 132 +++--
 29 files changed, 598 insertions(+), 838 deletions(-)
 rename docs/src/examples/modules/Popup/Types/{PopupExampleTitled.js => PopupExampleHeader.js} (82%)
 delete mode 100644 docs/src/examples/modules/Popup/Types/PopupExampleHtml.js
 create mode 100644 docs/src/examples/modules/Popup/Types/PopupExampleTrigger.js
 create mode 100644 docs/src/examples/modules/Popup/Usage/PopupExampleActions.js
 delete mode 100644 docs/src/examples/modules/Popup/Usage/PopupExampleClick.js
 delete mode 100644 docs/src/examples/modules/Popup/Usage/PopupExampleFocus.js
 rename docs/src/examples/modules/Popup/{Variations => Usage}/PopupExampleHideOnScroll.js (74%)
 delete mode 100644 docs/src/examples/modules/Popup/Usage/PopupExampleHover.js
 rename docs/src/examples/modules/Popup/{Variations => Usage}/PopupExampleOffset.js (85%)
 create mode 100644 src/modules/Popup/lib/createReferenceProxy.js
 create mode 100644 src/modules/Popup/lib/positions.js

diff --git a/docs/src/App.js b/docs/src/App.js
index 98e4835cdd..8aeda90e42 100644
--- a/docs/src/App.js
+++ b/docs/src/App.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { hot } from 'react-hot-loader'
+import { hot } from 'react-hot-loader/root'
 import { Router, Switch } from 'react-static'
 import Routes from 'react-static-routes'
 
@@ -11,4 +11,4 @@ const App = () => (
   </Router>
 )
 
-export default hot(module)(App)
+export default hot(App)
diff --git a/docs/src/components/Document.js b/docs/src/components/Document.js
index 36a9692eba..b60749d83c 100644
--- a/docs/src/components/Document.js
+++ b/docs/src/components/Document.js
@@ -16,9 +16,7 @@ const Document = ({ Body, children, Head, Html, siteData: { dev, versions } }) =
         href={`https://cdn.jsdelivr.net/npm/semantic-ui@${versions.sui}/dist/semantic.min.css`}
       />
 
-      <script
-        src='https://cdn.jsdelivr.net/npm/@babel/polyfill@7.0.0/dist/polyfill.min.js'
-      />
+      <script src='https://cdn.jsdelivr.net/npm/@babel/polyfill@7.0.0/dist/polyfill.min.js' />
       <script
         src={`https://cdnjs.cloudflare.com/ajax/libs/anchor-js/${versions.anchor}/anchor.min.js`}
       />
@@ -57,9 +55,15 @@ const Document = ({ Body, children, Head, Html, siteData: { dev, versions } }) =
         }.js`}
       />
       <script
-        src={`https://cdn.jsdelivr.net/npm/react-dom@${versions.react}/umd/react-dom${
-          dev ? '.development' : '.production.min'
-        }.js`}
+        src={
+          dev
+            ? ` https://cdn.jsdelivr.net/npm/@hot-loader/react-dom@${
+                versions.react
+              }/umd/react-dom.development.js`
+            : `https://cdn.jsdelivr.net/npm/react-dom@${
+                versions.react
+              }/umd/react-dom.production.min.js`
+        }
       />
       <script
         src={`https://cdn.jsdelivr.net/npm/react-dom@${
diff --git a/docs/src/examples/modules/Popup/Types/PopupExample.js b/docs/src/examples/modules/Popup/Types/PopupExample.js
index 2f5a4f564f..a43bdf4c16 100644
--- a/docs/src/examples/modules/Popup/Types/PopupExample.js
+++ b/docs/src/examples/modules/Popup/Types/PopupExample.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { Button, Popup } from 'semantic-ui-react'
 
 const PopupExample = () => (
-  <Popup trigger={<Button icon='add' />} content='Add users to your feed' />
+  <Popup content='Add users to your feed' trigger={<Button icon='add' />} />
 )
 
 export default PopupExample
diff --git a/docs/src/examples/modules/Popup/Types/PopupExampleTitled.js b/docs/src/examples/modules/Popup/Types/PopupExampleHeader.js
similarity index 82%
rename from docs/src/examples/modules/Popup/Types/PopupExampleTitled.js
rename to docs/src/examples/modules/Popup/Types/PopupExampleHeader.js
index 9796cc9c89..4c9ae76985 100644
--- a/docs/src/examples/modules/Popup/Types/PopupExampleTitled.js
+++ b/docs/src/examples/modules/Popup/Types/PopupExampleHeader.js
@@ -19,17 +19,17 @@ const users = [
   },
 ]
 
-const PopupExampleTitled = () => (
-  <div>
-    {users.map(user => (
+const PopupExampleHeader = () => (
+  <React.Fragment>
+    {users.map((user) => (
       <Popup
+        content={user.bio}
         key={user.name}
-        trigger={<Image src={user.avatar} avatar />}
         header={user.name}
-        content={user.bio}
+        trigger={<Image src={user.avatar} avatar />}
       />
     ))}
-  </div>
+  </React.Fragment>
 )
 
-export default PopupExampleTitled
+export default PopupExampleHeader
diff --git a/docs/src/examples/modules/Popup/Types/PopupExampleHtml.js b/docs/src/examples/modules/Popup/Types/PopupExampleHtml.js
deleted file mode 100644
index 20a5f3262a..0000000000
--- a/docs/src/examples/modules/Popup/Types/PopupExampleHtml.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react'
-import { Popup, Card, Rating, Image } from 'semantic-ui-react'
-
-const IndividualCard = (
-  <Card>
-    <Image src='/images/movies/totoro-horizontal.jpg' />
-    <Card.Content>
-      <Card.Header>My Neighbor Totoro</Card.Header>
-      <Card.Description>
-        Two sisters move to the country with their father in order to be closer to their
-        hospitalized mother, and discover the surrounding trees are inhabited by magical spirits.
-      </Card.Description>
-    </Card.Content>
-  </Card>
-)
-
-const PopupExampleHtml = () => (
-  <Popup trigger={IndividualCard}>
-    <Popup.Header>User Rating</Popup.Header>
-    <Popup.Content>
-      <Rating icon='star' defaultRating={3} maxRating={4} />
-    </Popup.Content>
-  </Popup>
-)
-
-export default PopupExampleHtml
diff --git a/docs/src/examples/modules/Popup/Types/PopupExampleTrigger.js b/docs/src/examples/modules/Popup/Types/PopupExampleTrigger.js
new file mode 100644
index 0000000000..8d59a456f4
--- /dev/null
+++ b/docs/src/examples/modules/Popup/Types/PopupExampleTrigger.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { Popup, Card, Image, Rating } from 'semantic-ui-react'
+
+const PopupExampleTrigger = () => (
+  <Popup
+    trigger={
+      <Card>
+        <Image src='/images/movies/totoro-horizontal.jpg' />
+        <Card.Content>
+          <Card.Header>My Neighbor Totoro</Card.Header>
+          <Card.Description>
+            Two sisters move to the country with their father in order to be
+            closer to their hospitalized mother, and discover the surrounding
+            trees are inhabited by magical spirits.
+          </Card.Description>
+        </Card.Content>
+      </Card>
+    }
+  >
+    <Popup.Header>User Rating</Popup.Header>
+    <Popup.Content>
+      <Rating icon='star' defaultRating={3} maxRating={4} />
+    </Popup.Content>
+  </Popup>
+)
+
+export default PopupExampleTrigger
diff --git a/docs/src/examples/modules/Popup/Types/index.js b/docs/src/examples/modules/Popup/Types/index.js
index 43c3ad6781..149bc79344 100644
--- a/docs/src/examples/modules/Popup/Types/index.js
+++ b/docs/src/examples/modules/Popup/Types/index.js
@@ -10,14 +10,14 @@ const PopupTypesExamples = () => (
       examplePath='modules/Popup/Types/PopupExample'
     />
     <ComponentExample
-      title='Titled'
-      description='An element can specify popup content with a title.'
-      examplePath='modules/Popup/Types/PopupExampleTitled'
+      title='Header'
+      description='An element can specify popup content with a header.'
+      examplePath='modules/Popup/Types/PopupExampleHeader'
     />
     <ComponentExample
-      title='HTML'
-      description='An element can specify HTML for a popup.'
-      examplePath='modules/Popup/Types/PopupExampleHtml'
+      title='Trigger'
+      description='A trigger can be complex element.'
+      examplePath='modules/Popup/Types/PopupExampleTrigger'
     />
   </ExampleSection>
 )
diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleActions.js b/docs/src/examples/modules/Popup/Usage/PopupExampleActions.js
new file mode 100644
index 0000000000..3c47111415
--- /dev/null
+++ b/docs/src/examples/modules/Popup/Usage/PopupExampleActions.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import { Button, Grid, Input, Popup } from 'semantic-ui-react'
+
+const PopupExampleActions = () => (
+  <Grid columns={1}>
+    <Grid.Column>
+      <Popup
+        trigger={<Button icon='add' content='Add a friend' />}
+        content='Sends an email invite to a friend.'
+        on='hover'
+      />
+      <Popup
+        trigger={
+          <Button color='red' icon='flask' content='Activate doomsday device' />
+        }
+        content={<Button color='green' content='Confirm the launch' />}
+        on='click'
+        position='top right'
+      />
+      <Popup
+        trigger={<Input icon='search' placeholder='Search...' />}
+        header='Movie Search'
+        content='You may search by genre, header, year and actors'
+        on='focus'
+      />
+    </Grid.Column>
+    <Grid.Column>
+      <Popup
+        trigger={<Button icon>Click me or Hover me</Button>}
+        header='Movie Search'
+        content='Multiple events can trigger a popup'
+        on={['hover', 'click']}
+      />
+    </Grid.Column>
+  </Grid>
+)
+
+export default PopupExampleActions
diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleClick.js b/docs/src/examples/modules/Popup/Usage/PopupExampleClick.js
deleted file mode 100644
index d7cd61cf67..0000000000
--- a/docs/src/examples/modules/Popup/Usage/PopupExampleClick.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-import { Button, Popup } from 'semantic-ui-react'
-
-const PopupExampleClick = () => (
-  <Popup
-    trigger={<Button color='red' icon='flask' content='Activate doomsday device' />}
-    content={<Button color='green' content='Confirm the launch' />}
-    on='click'
-    position='top right'
-  />
-)
-
-export default PopupExampleClick
diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleContext.js b/docs/src/examples/modules/Popup/Usage/PopupExampleContext.js
index d721b141a7..eceb732e15 100644
--- a/docs/src/examples/modules/Popup/Usage/PopupExampleContext.js
+++ b/docs/src/examples/modules/Popup/Usage/PopupExampleContext.js
@@ -6,7 +6,7 @@ class PopupExampleContextControlled extends React.Component {
 
   render() {
     return (
-      <div>
+      <React.Fragment>
         <Popup
           trigger={<Button content='Trigger Popup' />}
           context={this.contextRef}
@@ -15,7 +15,7 @@ class PopupExampleContextControlled extends React.Component {
         />
         ---------->
         <strong ref={this.contextRef}>here</strong>
-      </div>
+      </React.Fragment>
     )
   }
 }
diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleControlled.js b/docs/src/examples/modules/Popup/Usage/PopupExampleControlled.js
index d5837f7071..41b060bf03 100644
--- a/docs/src/examples/modules/Popup/Usage/PopupExampleControlled.js
+++ b/docs/src/examples/modules/Popup/Usage/PopupExampleControlled.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Grid, Header, Popup } from 'semantic-ui-react'
+import { Button, Grid, Header, Popup, Segment } from 'semantic-ui-react'
 
 const timeoutLength = 2500
 
@@ -25,7 +25,8 @@ class PopupExampleControlled extends React.Component {
         <Grid.Column width={8}>
           <Popup
             trigger={<Button content='Open controlled popup' />}
-            content={`This message will self-destruct in ${timeoutLength / 1000} seconds!`}
+            content={`This message will self-destruct in ${timeoutLength /
+              1000} seconds!`}
             on='click'
             open={this.state.isOpen}
             onClose={this.handleClose}
@@ -35,7 +36,9 @@ class PopupExampleControlled extends React.Component {
         </Grid.Column>
         <Grid.Column width={8}>
           <Header>State</Header>
-          <pre>{JSON.stringify(this.state, null, 2)}</pre>
+          <Segment secondary>
+            <pre>{JSON.stringify(this.state, null, 2)}</pre>
+          </Segment>
         </Grid.Column>
       </Grid>
     )
diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleDefaultOpen.js b/docs/src/examples/modules/Popup/Usage/PopupExampleDefaultOpen.js
index 436e4772e1..4e7341eccf 100644
--- a/docs/src/examples/modules/Popup/Usage/PopupExampleDefaultOpen.js
+++ b/docs/src/examples/modules/Popup/Usage/PopupExampleDefaultOpen.js
@@ -2,7 +2,12 @@ import React from 'react'
 import { Button, Popup } from 'semantic-ui-react'
 
 const PopupExampleDefaultOpen = () => (
-  <Popup open trigger={<Button content='Already Open' />} content='Hello' position='top center' />
+  <Popup
+    content='Hello'
+    open
+    position='top center'
+    trigger={<Button content='Already Open' />}
+  />
 )
 
 export default PopupExampleDefaultOpen
diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleFocus.js b/docs/src/examples/modules/Popup/Usage/PopupExampleFocus.js
deleted file mode 100644
index 24f13248dc..0000000000
--- a/docs/src/examples/modules/Popup/Usage/PopupExampleFocus.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-import { Input, Popup } from 'semantic-ui-react'
-
-const PopupExampleFocus = () => (
-  <Popup
-    trigger={<Input icon='search' placeholder='Search...' />}
-    header='Movie Search'
-    content='You may search by genre, header, year and actors'
-    on='focus'
-  />
-)
-
-export default PopupExampleFocus
diff --git a/docs/src/examples/modules/Popup/Variations/PopupExampleHideOnScroll.js b/docs/src/examples/modules/Popup/Usage/PopupExampleHideOnScroll.js
similarity index 74%
rename from docs/src/examples/modules/Popup/Variations/PopupExampleHideOnScroll.js
rename to docs/src/examples/modules/Popup/Usage/PopupExampleHideOnScroll.js
index 00f5d95f09..2f1ae0cc67 100644
--- a/docs/src/examples/modules/Popup/Variations/PopupExampleHideOnScroll.js
+++ b/docs/src/examples/modules/Popup/Usage/PopupExampleHideOnScroll.js
@@ -2,19 +2,19 @@ import React from 'react'
 import { Button, Popup } from 'semantic-ui-react'
 
 const PopupExampleHideOnScroll = () => (
-  <div>
+  <React.Fragment>
     <Popup
-      trigger={<Button icon>Click me</Button>}
+      trigger={<Button>Click me</Button>}
       content='Hide the popup on any scroll event'
       on='click'
       hideOnScroll
     />
     <Popup
-      trigger={<Button icon>Hover me</Button>}
+      trigger={<Button>Hover me</Button>}
       content='Hide the popup on any scroll event'
       hideOnScroll
     />
-  </div>
+  </React.Fragment>
 )
 
 export default PopupExampleHideOnScroll
diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleHover.js b/docs/src/examples/modules/Popup/Usage/PopupExampleHover.js
deleted file mode 100644
index 5b97104acf..0000000000
--- a/docs/src/examples/modules/Popup/Usage/PopupExampleHover.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react'
-import { Button, Popup } from 'semantic-ui-react'
-
-const PopupExampleHover = () => (
-  <Popup
-    trigger={<Button icon='add' content='Add a friend' />}
-    content='Sends an email invite to a friend.'
-    on='hover'
-  />
-)
-
-export default PopupExampleHover
diff --git a/docs/src/examples/modules/Popup/Variations/PopupExampleOffset.js b/docs/src/examples/modules/Popup/Usage/PopupExampleOffset.js
similarity index 85%
rename from docs/src/examples/modules/Popup/Variations/PopupExampleOffset.js
rename to docs/src/examples/modules/Popup/Usage/PopupExampleOffset.js
index 960308995a..ae24a0991a 100644
--- a/docs/src/examples/modules/Popup/Variations/PopupExampleOffset.js
+++ b/docs/src/examples/modules/Popup/Usage/PopupExampleOffset.js
@@ -2,32 +2,32 @@ import React from 'react'
 import { Icon, Popup } from 'semantic-ui-react'
 
 const PopupExampleOffset = () => (
-  <div>
+  <React.Fragment>
     <Popup
       trigger={<Icon size='large' name='heart' circular />}
       content='Way off to the left'
-      horizontalOffset={50}
+      offset='0, 50px'
       position='left center'
     />
     <Popup
       trigger={<Icon size='large' name='heart' circular />}
       content='As expected this popup is way off to the right'
-      horizontalOffset={50}
+      offset='0, 50px'
       position='right center'
     />
     <Popup
       trigger={<Icon size='large' name='heart' circular />}
       content='Way off to the top'
-      verticalOffset={50}
+      offset='0, 50px'
       position='top center'
     />
     <Popup
       trigger={<Icon size='large' name='heart' circular />}
       content='As expected this popup is way off to the bottom'
-      verticalOffset={50}
+      offset='0, 50px'
       position='bottom center'
     />
-  </div>
+  </React.Fragment>
 )
 
 export default PopupExampleOffset
diff --git a/docs/src/examples/modules/Popup/Usage/index.js b/docs/src/examples/modules/Popup/Usage/index.js
index 9c0c22e18a..9bce71752d 100644
--- a/docs/src/examples/modules/Popup/Usage/index.js
+++ b/docs/src/examples/modules/Popup/Usage/index.js
@@ -1,34 +1,59 @@
 import React from 'react'
+import { Button, Message } from 'semantic-ui-react'
+
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
 const PopupUsageExamples = () => (
   <ExampleSection title='Usage'>
     <ComponentExample
-      title='Hover'
-      description='A popup can be triggered on hover.'
-      examplePath='modules/Popup/Usage/PopupExampleHover'
-    />
-    <ComponentExample
-      title='Click'
-      description='A popup can be triggered on click.'
-      examplePath='modules/Popup/Usage/PopupExampleClick'
-    />
+      title='Offset'
+      description='A popup position can be offset from its position.'
+      examplePath='modules/Popup/Variations/PopupExampleOffset'
+    >
+      <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:
+        </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'
+        icon='book'
+        target='_blank'
+      />
+    </ComponentExample>
     <ComponentExample
-      title='Focus'
-      description='A popup can be triggered on focus.'
-      examplePath='modules/Popup/Usage/PopupExampleFocus'
+      title='Actions'
+      description='A popup can be triggered on hover, click, focus or multiple actions.'
+      examplePath='modules/Popup/Usage/PopupExampleActions'
     />
     <ComponentExample
       title='Nesting'
       description='A popup can be nested inside another.'
       examplePath='modules/Popup/Usage/PopupExampleNested'
     />
-    <ComponentExample
-      title='Multiple'
-      description='A popup can be triggered on multiple events.'
-      examplePath='modules/Popup/Usage/PopupExampleMultiple'
-    />
     <ComponentExample
       title='Controlled'
       description='A popup can have its visibility controlled from outside.'
@@ -43,6 +68,11 @@ const PopupUsageExamples = () => (
       description='A popup can open over a DOM node when controlled.'
       examplePath='modules/Popup/Usage/PopupExampleContextControlled'
     />
+    <ComponentExample
+      title='Hide on scroll'
+      description='A popup can be hidden on a scroll event.'
+      examplePath='modules/Popup/Variations/PopupExampleHideOnScroll'
+    />
     <ComponentExample
       title='Default Open'
       description='A popup can appear open by default.'
diff --git a/docs/src/examples/modules/Popup/Variations/PopupExampleInverted.js b/docs/src/examples/modules/Popup/Variations/PopupExampleInverted.js
index b535145a0f..0f62b9ec70 100644
--- a/docs/src/examples/modules/Popup/Variations/PopupExampleInverted.js
+++ b/docs/src/examples/modules/Popup/Variations/PopupExampleInverted.js
@@ -2,14 +2,18 @@ import React from 'react'
 import { Button, Icon, Popup } from 'semantic-ui-react'
 
 const PopupExampleInverted = () => (
-  <div>
-    <Popup trigger={<Button icon='add' />} content='Hello. This is an inverted popup' inverted />
+  <React.Fragment>
+    <Popup
+      trigger={<Button icon='add' />}
+      content='Hello. This is an inverted popup'
+      inverted
+    />
     <Popup
       trigger={<Icon circular name='heart' />}
       content='Hello. This is an inverted popup'
       inverted
     />
-  </div>
+  </React.Fragment>
 )
 
 export default PopupExampleInverted
diff --git a/docs/src/examples/modules/Popup/Variations/PopupExampleSize.js b/docs/src/examples/modules/Popup/Variations/PopupExampleSize.js
index 653aa936ce..13c2fd811f 100644
--- a/docs/src/examples/modules/Popup/Variations/PopupExampleSize.js
+++ b/docs/src/examples/modules/Popup/Variations/PopupExampleSize.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { Icon, Popup } from 'semantic-ui-react'
 
 const PopupExampleSize = () => (
-  <div>
+  <React.Fragment>
     <Popup
       trigger={<Icon circular name='heart' />}
       content='Hello. This is a mini popup'
@@ -28,7 +28,7 @@ const PopupExampleSize = () => (
       content='Hello. This is a huge popup'
       size='huge'
     />
-  </div>
+  </React.Fragment>
 )
 
 export default PopupExampleSize
diff --git a/docs/src/examples/modules/Popup/Variations/PopupExampleWide.js b/docs/src/examples/modules/Popup/Variations/PopupExampleWide.js
index 32ebb3b37a..bef46603d1 100644
--- a/docs/src/examples/modules/Popup/Variations/PopupExampleWide.js
+++ b/docs/src/examples/modules/Popup/Variations/PopupExampleWide.js
@@ -2,20 +2,23 @@ import React from 'react'
 import { Icon, Popup } from 'semantic-ui-react'
 
 const PopupExampleWide = () => (
-  <div>
+  <React.Fragment>
     <Popup trigger={<Icon circular name='heart' />}>
-      Hello. This is a regular pop-up which does not allow for lots of content. You cannot fit a lot
-      of words here as the paragraphs will be pretty narrow.
+      Hello. This is a regular pop-up which does not allow for lots of content.
+      You cannot fit a lot of words here as the paragraphs will be pretty
+      narrow.
     </Popup>
     <Popup trigger={<Icon circular name='heart' />} wide>
-      Hello. This is a wide pop-up which allows for lots of content with additional space. You can
-      fit a lot of words here and the paragraphs will be pretty wide.
+      Hello. This is a wide pop-up which allows for lots of content with
+      additional space. You can fit a lot of words here and the paragraphs will
+      be pretty wide.
     </Popup>
     <Popup trigger={<Icon circular name='heart' />} wide='very'>
-      Hello. This is a very wide pop-up which allows for lots of content with additional space. You
-      can fit a lot of words here and the paragraphs will be pretty wide.
+      Hello. This is a very wide pop-up which allows for lots of content with
+      additional space. You can fit a lot of words here and the paragraphs will
+      be pretty wide.
     </Popup>
-  </div>
+  </React.Fragment>
 )
 
 export default PopupExampleWide
diff --git a/docs/src/examples/modules/Popup/Variations/index.js b/docs/src/examples/modules/Popup/Variations/index.js
index 507309f45d..84ee47a0bb 100644
--- a/docs/src/examples/modules/Popup/Variations/index.js
+++ b/docs/src/examples/modules/Popup/Variations/index.js
@@ -1,4 +1,5 @@
 import React from 'react'
+
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
@@ -10,9 +11,14 @@ const PopupVariationsExamples = () => (
       examplePath='modules/Popup/Variations/PopupExampleBasic'
     />
     <ComponentExample
-      title='Wide'
-      description='A popup can be extra wide to allow for longer content.'
-      examplePath='modules/Popup/Variations/PopupExampleWide'
+      title='Position'
+      description='A popup can be position around its trigger.'
+      examplePath='modules/Popup/Variations/PopupExamplePosition'
+    />
+    <ComponentExample
+      title='Flowing'
+      description='A popup can have no maximum width and continue to flow to fit its content.'
+      examplePath='modules/Popup/Variations/PopupExampleFlowing'
     />
     <ComponentExample
       title='Size'
@@ -20,35 +26,20 @@ const PopupVariationsExamples = () => (
       examplePath='modules/Popup/Variations/PopupExampleSize'
     />
     <ComponentExample
-      title='Flowing'
-      description='A popup can have no maximum width and continue to flow to fit its content.'
-      examplePath='modules/Popup/Variations/PopupExampleFlowing'
+      title='Wide'
+      description='A popup can be extra wide to allow for longer content.'
+      examplePath='modules/Popup/Variations/PopupExampleWide'
     />
     <ComponentExample
       title='Inverted'
       description='A popup can have its colors inverted.'
       examplePath='modules/Popup/Variations/PopupExampleInverted'
     />
-    <ComponentExample
-      title='Position'
-      description='A popup can be position around its trigger.'
-      examplePath='modules/Popup/Variations/PopupExamplePosition'
-    />
-    <ComponentExample
-      title='Offset'
-      description='A popup position can be offset from its position.'
-      examplePath='modules/Popup/Variations/PopupExampleOffset'
-    />
     <ComponentExample
       title='Style'
       description='A popup accepts custom styles.'
       examplePath='modules/Popup/Variations/PopupExampleStyle'
     />
-    <ComponentExample
-      title='Hide on scroll'
-      description='A popup can be hidden on a scroll event.'
-      examplePath='modules/Popup/Variations/PopupExampleHideOnScroll'
-    />
   </ExampleSection>
 )
 
diff --git a/gulp/plugins/util/parseType.js b/gulp/plugins/util/parseType.js
index 4c21f9751c..a787a40a0c 100644
--- a/gulp/plugins/util/parseType.js
+++ b/gulp/plugins/util/parseType.js
@@ -1,18 +1,22 @@
 const _ = require('lodash')
 const { names } = require('../../../src/elements/Flag/Flag') // eslint-disable-line no-unused-vars
+const { positions } = require('../../../src/modules/Popup/lib/positions') // eslint-disable-line no-unused-vars
 const SUI = require('../../../src/lib/SUI') // eslint-disable-line no-unused-vars
 
-const evalValue = value => eval(value) // eslint-disable-line no-eval
+const evalValue = (value) => eval(value) // eslint-disable-line no-eval
 
-const isTransformable = value => typeof value === 'string' && (value.includes('SUI') || value.includes('names'))
+const isTransformable = (value) =>
+  typeof value === 'string' &&
+  (value.includes('SUI') || value.includes('names') || value.includes('positions'))
 
-const uniqValues = values => _.uniqWith(values, (val, other) => `${val}` === `${other}`)
+const uniqValues = (values) => _.uniqWith(values, (val, other) => `${val}` === `${other}`)
 
-const transformEnumValues = values => _.flatMap(values, ({ value }) => {
-  if (value === 'names') return evalValue(value)
-  if (_.startsWith(value, '...SUI')) return evalValue(value.substring(3))
-  return value.replace(/'/g, '')
-})
+const transformEnumValues = (values) =>
+  _.flatMap(values, ({ value }) => {
+    if (value === 'names') return evalValue(value)
+    if (_.startsWith(value, '...SUI')) return evalValue(value.substring(3))
+    return value.replace(/'/g, '')
+  })
 
 const parseEnum = (type) => {
   const { value } = type
@@ -23,10 +27,9 @@ const parseEnum = (type) => {
 
 const parseUnion = (union) => {
   const { value } = union
-  const values = _.flatten(_.map(
-    _.filter(value, { name: 'enum' }),
-    type => parseEnum(type).value,
-  ))
+  const values = _.flatten(
+    _.map(_.filter(value, { name: 'enum' }), (type) => parseEnum(type).value),
+  )
 
   return {
     ...union,
@@ -42,10 +45,12 @@ const parsers = {
 
 export default (propName, { type }) => {
   if (type === undefined) {
-    throw new Error([
-      `The prop "${propName}" does not contain propType definition. This happens if the property is in the `,
-      'defaultProps, but it is not in the propTypes',
-    ].join(' '))
+    throw new Error(
+      [
+        `The prop "${propName}" does not contain propType definition. This happens if the property is in the `,
+        'defaultProps, but it is not in the propTypes',
+      ].join(' '),
+    )
   }
 
   const parser = parsers[type.name]
diff --git a/package.json b/package.json
index 46b998e6f7..706d8d8430 100644
--- a/package.json
+++ b/package.json
@@ -82,6 +82,7 @@
     "lodash": "^4.17.11",
     "prop-types": "^15.6.2",
     "react-is": "^16.7.0",
+    "react-popper": "^1.3.3",
     "shallowequal": "^1.1.0"
   },
   "devDependencies": {
@@ -151,9 +152,9 @@
     "react-codesandboxer": "^3.1.3",
     "react-docgen": "^4.1.0",
     "react-dom": "^16.8.4",
-    "react-hot-loader": "^4.3.11",
-    "react-router": "^4.4.0",
-    "react-router-dom": "^4.4.0",
+    "react-hot-loader": "^4.8.0",
+    "react-router": "^5.0.0",
+    "react-router-dom": "^5.0.0",
     "react-source-render": "^1.2.0",
     "react-static": "^5.9.7",
     "react-static-routes": "^1.0.0",
@@ -181,6 +182,8 @@
   },
   "resolutions": {
     "babel-plugin-universal-import": "^2.0.2",
-    "react-universal-component": "^3.0.3"
+    "react-universal-component": "^3.0.3",
+    "react-router": "^5.0.0",
+    "react-router-dom": "^5.0.0"
   }
 }
diff --git a/src/modules/Popup/Popup.d.ts b/src/modules/Popup/Popup.d.ts
index 5649e67a10..f73939edd1 100644
--- a/src/modules/Popup/Popup.d.ts
+++ b/src/modules/Popup/Popup.d.ts
@@ -46,11 +46,14 @@ export interface StrictPopupProps extends StrictPortalProps {
   /** Invert the colors of the popup */
   inverted?: boolean
 
-  /** Horizontal offset in pixels to be applied to the popup. */
-  horizontalOffset?: number
-
-  /** Vertical offset in pixels to be applied to the popup. */
-  verticalOffset?: number
+  /** 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?: number | string
 
   /** Events triggering the popup. */
   on?: 'hover' | 'click' | 'focus' | ('hover' | 'click' | 'focus')[]
@@ -109,9 +112,6 @@ export interface StrictPopupProps extends StrictPortalProps {
 
   /** Popup width. */
   wide?: boolean | 'very'
-
-  /** Element to be rendered within the confines of the viewport whenever possible. */
-  keepInViewPort?: boolean
 }
 
 interface PopupComponent extends React.ComponentClass<PopupProps> {
diff --git a/src/modules/Popup/Popup.js b/src/modules/Popup/Popup.js
index 2212c2aa78..26b038f890 100644
--- a/src/modules/Popup/Popup.js
+++ b/src/modules/Popup/Popup.js
@@ -1,7 +1,9 @@
+import EventStack from '@semantic-ui-react/event-stack'
 import cx from 'classnames'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React, { Component, createRef } from 'react'
+import { Popper } from 'react-popper'
 
 import {
   eventStack,
@@ -9,31 +11,20 @@ import {
   customPropTypes,
   getElementType,
   getUnhandledProps,
-  isBrowser,
   makeDebugger,
   SUI,
   useKeyOnly,
   useKeyOrValueAndKey,
-  isRefObject,
 } from '../../lib'
 import Portal from '../../addons/Portal'
 import Ref from '../../addons/Ref'
+import { placementMapping, positions, positionsMapping } from './lib/positions'
+import createReferenceProxy from './lib/createReferenceProxy'
 import PopupContent from './PopupContent'
 import PopupHeader from './PopupHeader'
 
 const debug = makeDebugger('popup')
 
-export const POSITIONS = [
-  'top left',
-  'top right',
-  'bottom right',
-  'bottom left',
-  'right center',
-  'left center',
-  'top center',
-  'bottom center',
-]
-
 /**
  * A Popup displays additional information on top of a page.
  */
@@ -79,11 +70,14 @@ export default class Popup extends Component {
     /** Invert the colors of the Popup. */
     inverted: PropTypes.bool,
 
-    /** Horizontal offset in pixels to be applied to the Popup. */
-    horizontalOffset: PropTypes.number,
-
-    /** Vertical offset in pixels to be applied to the Popup. */
-    verticalOffset: PropTypes.number,
+    /** 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: PropTypes.oneOfType(PropTypes.number, PropTypes.string),
 
     /** Events triggering the popup. */
     on: PropTypes.oneOfType([
@@ -124,7 +118,7 @@ export default class Popup extends Component {
     onUnmount: PropTypes.func,
 
     /** Position for the popover. */
-    position: PropTypes.oneOf(POSITIONS),
+    position: PropTypes.oneOf(positions),
 
     /** Popup size. */
     size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium', 'big', 'massive')),
@@ -137,156 +131,41 @@ export default class Popup extends Component {
 
     /** Popup width. */
     wide: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['very'])]),
-
-    /** Element to be rendered within the confines of the viewport whenever possible. */
-    keepInViewPort: PropTypes.bool,
   }
 
   static defaultProps = {
-    position: 'top left',
-    on: 'hover',
-    keepInViewPort: true,
     disabled: false,
+    offset: 0,
+    on: 'hover',
+    position: 'top left',
   }
 
   static Content = PopupContent
   static Header = PopupHeader
 
   state = {}
+  triggerRef = createRef()
 
-  componentDidUpdate(prevProps) {
-    // if horizontal/vertical offsets change, re-calculate the CSS style
-    const { horizontalOffset, verticalOffset } = this.props
-    if (
-      horizontalOffset !== prevProps.horizontalOffset ||
-      verticalOffset !== prevProps.verticalOffset
-    ) {
-      this.setPopupStyle()
-    }
-  }
-
-  componentWillUnmount() {
-    clearTimeout(this.timeoutId)
-  }
-
-  computePopupStyle = (positions) => {
-    const style = { position: 'absolute' }
-    const context = this.getContext()
-
-    // Do not access window/document when server side rendering
-    if (!isBrowser()) return style
-    debug('computePopupStyle()')
-
-    const { horizontalOffset, verticalOffset } = this.props
-    const { pageYOffset, pageXOffset } = window
-    const { clientWidth, clientHeight } = document.documentElement
-
-    const coords = this.coords || context.getBoundingClientRect()
-    if (_.includes(positions, 'right')) {
-      style.right = Math.round(clientWidth - (coords.right + pageXOffset))
-      style.left = 'auto'
-    } else if (_.includes(positions, 'left')) {
-      style.left = Math.round(coords.left + pageXOffset)
-      style.right = 'auto'
-    } else {
-      // if not left nor right, we are horizontally centering the element
-      const xOffset = (coords.width - this.popupCoords.width) / 2
-      style.left = Math.round(coords.left + xOffset + pageXOffset)
-      style.right = 'auto'
-    }
-
-    if (_.includes(positions, 'top')) {
-      style.bottom = Math.round(clientHeight - (coords.top + pageYOffset))
-      style.top = 'auto'
-    } else if (_.includes(positions, 'bottom')) {
-      style.top = Math.round(coords.bottom + pageYOffset)
-      style.bottom = 'auto'
-    } else {
-      // if not top nor bottom, we are vertically centering the element
-      const yOffset = (coords.height + this.popupCoords.height) / 2
-      style.top = Math.round(coords.bottom + pageYOffset - yOffset)
-      style.bottom = 'auto'
-
-      const xOffset = this.popupCoords.width + 8
-      if (_.includes(positions, 'right')) {
-        style.right -= xOffset
-      } else {
-        style.left -= xOffset
-      }
-    }
-
-    if (horizontalOffset) {
-      if (_.isNumber(style.right)) {
-        style.right -= horizontalOffset
-      } else {
-        style.left -= horizontalOffset
-      }
-    }
-
-    if (verticalOffset) {
-      if (_.isNumber(style.top)) {
-        style.top += verticalOffset
-      } else {
-        style.bottom += verticalOffset
-      }
-    }
+  static getDerivedStateFromProps(props, state) {
+    if (state.closed || state.disabled) return {}
 
-    return style
-  }
-
-  // check if the style would display
-  // the popup outside of the view port
-  isStyleInViewport = (style) => {
-    debug(`isStyleInViewport(${style})`)
-    const { pageYOffset, pageXOffset } = window
-    const { clientWidth, clientHeight } = document.documentElement
-
-    const element = {
-      top: style.top,
-      left: style.left,
-      width: this.popupCoords.width,
-      height: this.popupCoords.height,
-    }
-    if (_.isNumber(style.right)) {
-      element.left = clientWidth - style.right - element.width
-    }
-    if (_.isNumber(style.bottom)) {
-      element.top = clientHeight - style.bottom - element.height
-    }
+    const unhandledProps = getUnhandledProps(Popup, props)
+    const contentRestProps = _.reduce(
+      unhandledProps,
+      (acc, val, key) => {
+        if (!_.includes(Portal.handledProps, key)) acc[key] = val
 
-    // hidden on top
-    if (element.top < pageYOffset) return false
-    // hidden on the bottom
-    if (element.top + element.height > pageYOffset + clientHeight) return false
-    // hidden the left
-    if (element.left < pageXOffset) return false
-    // hidden on the right
-    if (element.left + element.width > pageXOffset + clientWidth) return false
+        return acc
+      },
+      {},
+    )
+    const portalRestProps = _.pick(unhandledProps, Portal.handledProps)
 
-    return true
+    return { contentRestProps, portalRestProps }
   }
 
-  setPopupStyle = () => {
-    const context = this.getContext()
-    if ((!this.coords && !context) || !this.popupCoords) return
-    debug('setPopupStyle()')
-    let position = this.props.position
-    let style = this.computePopupStyle(position)
-    const { keepInViewPort } = this.props
-
-    if (keepInViewPort) {
-      // Lets detect if the popup is out of the viewport and adjust
-      // the position accordingly
-      const positions = _.without(POSITIONS, position).concat([position])
-      for (let i = 0; !this.isStyleInViewport(style) && i < positions.length; i += 1) {
-        style = this.computePopupStyle(positions[i])
-        position = positions[i]
-      }
-    }
-
-    // Append 'px' to every numerical values in the style
-    style = _.mapValues(style, value => (_.isNumber(value) ? `${value}px` : value))
-    this.setState({ style, position })
+  componentWillUnmount() {
+    clearTimeout(this.timeoutId)
   }
 
   getPortalProps = () => {
@@ -334,73 +213,43 @@ export default class Popup extends Component {
 
   handleClose = (e) => {
     debug('handleClose()')
-
     _.invoke(this.props, 'onClose', e, this.props)
   }
 
   handleOpen = (e) => {
     debug('handleOpen()')
-
-    this.coords = this.getContext().getBoundingClientRect()
     _.invoke(this.props, 'onOpen', e, this.props)
   }
 
   handlePortalMount = (e) => {
     debug('handlePortalMount()')
-    const { hideOnScroll } = this.props
-
-    if (hideOnScroll) eventStack.sub('scroll', this.hideOnScroll, { target: window })
-    this.setPopupStyle()
     _.invoke(this.props, 'onMount', e, this.props)
   }
 
   handlePortalUnmount = (e) => {
     debug('handlePortalUnmount()')
-    const { hideOnScroll } = this.props
-
-    if (hideOnScroll) eventStack.unsub('scroll', this.hideOnScroll, { target: window })
     _.invoke(this.props, 'onUnmount', e, this.props)
   }
 
-  handlePopupRef = (popupRef) => {
-    debug(`handlePopupRef(${popupRef})`)
-    this.popupCoords = popupRef ? popupRef.getBoundingClientRect() : null
-    this.setPopupStyle()
-  }
-
-  handleTriggerRef = (triggerRef) => {
-    debug(`handleTriggerRef(${triggerRef})`)
-    this.triggerRef = triggerRef
-    this.setPopupStyle()
-  }
-
-  getContext = () => {
-    const { context } = this.props
-    const contextFromProp = isRefObject(context) ? context.current : context
-
-    return contextFromProp || this.triggerRef
-  }
-
-  render() {
+  renderContent = ({ placement: popperPlacement, ref: popperRef, style: popperStyle }) => {
     const {
       basic,
       children,
       className,
       content,
+      hideOnScroll,
       flowing,
       header,
       inverted,
       size,
-      trigger,
+      style,
       wide,
-      disabled,
     } = this.props
+    const { contentRestProps } = this.state
 
-    const { position, closed } = this.state
-    const style = _.assign({}, this.state.style, this.props.style)
     const classes = cx(
       'ui',
-      position,
+      placementMapping[popperPlacement],
       size,
       useKeyOrValueAndKey(wide, 'wide'),
       useKeyOnly(basic, 'basic'),
@@ -409,36 +258,45 @@ export default class Popup extends Component {
       'popup transition visible',
       className,
     )
-
-    if (closed || disabled) return trigger
-
-    const unhandled = getUnhandledProps(Popup, this.props)
-    const portalPropNames = Portal.handledProps
-
-    const rest = _.reduce(
-      unhandled,
-      (acc, val, key) => {
-        if (!_.includes(portalPropNames, key)) acc[key] = val
-
-        return acc
-      },
-      {},
-    )
-    const portalProps = _.pick(unhandled, portalPropNames)
     const ElementType = getElementType(Popup, this.props)
+    const styles = {
+      // Heads up! We need default styles to get working correctly `flowing`
+      left: 'auto',
+      right: 'auto',
+      ...popperStyle,
+      ...style,
+    }
 
-    const popupJSX = (
-      <Ref innerRef={this.handlePopupRef}>
-        <ElementType {...rest} className={classes} style={style}>
-          {children}
-          {childrenUtils.isNil(children) && PopupHeader.create(header, { autoGenerateKey: false })}
-          {childrenUtils.isNil(children) &&
-            PopupContent.create(content, { autoGenerateKey: false })}
+    return (
+      <Ref innerRef={popperRef}>
+        <ElementType {...contentRestProps} className={classes} style={styles}>
+          {childrenUtils.isNil(children) ? (
+            <React.Fragment>
+              {PopupHeader.create(header, { autoGenerateKey: false })}
+              {PopupContent.create(content, { autoGenerateKey: false })}
+            </React.Fragment>
+          ) : (
+            children
+          )}
+          {hideOnScroll && <EventStack on={this.hideOnScroll} name='scroll' target='window' />}
         </ElementType>
       </Ref>
     )
+  }
+
+  render() {
+    const { context, disabled, offset, position, trigger } = this.props
+    const { closed, portalRestProps } = this.state
+
+    if (closed || disabled) return trigger
+
+    const modifiers = {
+      arrow: { enabled: false },
+      offset: { offset },
+    }
+    const referenceElement = createReferenceProxy(_.isNil(context) ? this.triggerRef : context)
 
-    const mergedPortalProps = { ...this.getPortalProps(), ...portalProps }
+    const mergedPortalProps = { ...this.getPortalProps(), ...portalRestProps }
     debug('portal props:', mergedPortalProps)
 
     return (
@@ -449,9 +307,15 @@ export default class Popup extends Component {
         onOpen={this.handleOpen}
         onUnmount={this.handlePortalUnmount}
         trigger={trigger}
-        triggerRef={this.handleTriggerRef}
+        triggerRef={this.triggerRef}
       >
-        {popupJSX}
+        <Popper
+          modifiers={modifiers}
+          placement={positionsMapping[position]}
+          referenceElement={referenceElement}
+        >
+          {this.renderContent}
+        </Popper>
       </Portal>
     )
   }
diff --git a/src/modules/Popup/lib/createReferenceProxy.js b/src/modules/Popup/lib/createReferenceProxy.js
new file mode 100644
index 0000000000..9e57a85a0e
--- /dev/null
+++ b/src/modules/Popup/lib/createReferenceProxy.js
@@ -0,0 +1,38 @@
+import _ from 'lodash'
+import { isRefObject } from '../../../lib/refUtils'
+
+class CreateReferenceProxy {
+  constructor(refObject) {
+    this.ref = refObject
+  }
+
+  getBoundingClientRect() {
+    return _.invoke(this.ref.current, 'getBoundingClientRect', {})
+  }
+
+  get clientWidth() {
+    return this.getBoundingClientRect().width
+  }
+
+  get clientHeight() {
+    return this.getBoundingClientRect().height
+  }
+}
+
+/**
+ * Popper.js does not support ref objects from `createRef()` as referenceElement. If we will pass
+ * directly `ref`, `ref.current` will be `null` at the render process. We use memoize to keep the
+ * same reference between renders.
+ *
+ * @see https://popper.js.org/popper-documentation.html#referenceObject
+ */
+const createReferenceProxy = _.memoize(
+  (reference) =>
+    new CreateReferenceProxy(
+      // TODO: use toRefObject from Stardust
+      // https://github.com/stardust-ui/react/issues/998
+      isRefObject(reference) ? reference : { current: reference },
+    ),
+)
+
+export default createReferenceProxy
diff --git a/src/modules/Popup/lib/positions.js b/src/modules/Popup/lib/positions.js
new file mode 100644
index 0000000000..479ab37577
--- /dev/null
+++ b/src/modules/Popup/lib/positions.js
@@ -0,0 +1,18 @@
+import _ from 'lodash'
+
+export const positionsMapping = {
+  'top center': 'top',
+  'top left': 'top-start',
+  'top right': 'top-end',
+
+  'bottom center': 'bottom',
+  'bottom left': 'bottom-start',
+  'bottom right': 'bottom-end',
+
+  'right center': 'right',
+  'left center': 'left',
+}
+
+export const positions = _.keys(positionsMapping)
+
+export const placementMapping = _.invert(positionsMapping)
diff --git a/test/specs/modules/Popup/Popup-test.js b/test/specs/modules/Popup/Popup-test.js
index d6590dbda7..3a46c3f177 100644
--- a/test/specs/modules/Popup/Popup-test.js
+++ b/test/specs/modules/Popup/Popup-test.js
@@ -3,7 +3,8 @@ import React from 'react'
 
 import Portal from 'src/addons/Portal/Portal'
 import { SUI } from 'src/lib'
-import Popup, { POSITIONS } from 'src/modules/Popup/Popup'
+import Popup from 'src/modules/Popup/Popup'
+import { positionsMapping } from 'src/modules/Popup/lib/positions.js'
 import PopupHeader from 'src/modules/Popup/PopupHeader'
 import PopupContent from 'src/modules/Popup/PopupContent'
 import * as common from 'test/specs/commonTests'
@@ -37,9 +38,8 @@ describe('Popup', () => {
     if (wrapper && wrapper.unmount) wrapper.unmount()
   })
 
-  common.isConformant(Popup, { rendersPortal: true })
+  common.isConformant(Popup, { rendersChildren: false, rendersPortal: true })
   common.hasSubcomponents(Popup, [PopupHeader, PopupContent])
-  common.hasValidTypings(Popup)
 
   // Heads up!
   //
@@ -47,250 +47,81 @@ describe('Popup', () => {
   // Nor do they handle components rendered to the body with Portal.
   // The Popup is wrapped in a Portal, so we manually test a few things here.
 
-  it('renders a Portal', () => {
-    wrapperShallow(<Popup />)
-      .type()
-      .should.equal(Portal)
-  })
-
-  it('renders to the document body', () => {
-    wrapperMount(<Popup open />)
-    assertInBody('.ui.popup.visible')
-  })
-
-  it('renders child text', () => {
-    wrapperMount(<Popup open>child text</Popup>)
-
-    document.querySelector('.ui.popup.visible').innerText.should.equal('child text')
-  })
-
-  it('renders child components', () => {
-    const child = <div data-child />
-    wrapperMount(<Popup open>{child}</Popup>)
-
-    document
-      .querySelector('.ui.popup.visible')
-      .querySelector('[data-child]')
-      .should.not.equal(null, 'Popup did not render the child component.')
-  })
-
-  it('should add className to the Popup wrapping node', () => {
-    wrapperMount(<Popup className='some-class' open />)
-    assertInBody('.ui.popup.visible.some-class')
-  })
-
-  describe('offset', () => {
-    it('accepts an offset to the left', () => {
-      wrapperMount(
-        <Popup
-          horizontalOffset={50}
-          position='bottom right'
-          content='foo'
-          trigger={<button>foo</button>}
-        />,
-      )
-
-      wrapper.find('button').simulate('click')
-      assertInBody('.ui.popup.visible')
+  describe('children', () => {
+    it('renders a Portal', () => {
+      wrapperShallow(<Popup />)
+        .type()
+        .should.equal(Portal)
     })
-    it('accepts an offset to the right', () => {
-      wrapperMount(
-        <Popup
-          horizontalOffset={50}
-          position='bottom left'
-          content='foo'
-          trigger={<button>foo</button>}
-        />,
-      )
 
-      wrapper.find('button').simulate('click')
+    it('renders to the document body', () => {
+      wrapperMount(<Popup open />)
       assertInBody('.ui.popup.visible')
     })
-    it('causes the style to be updated', () => {
-      wrapperMount(
-        <Popup
-          horizontalOffset={50}
-          position='bottom left'
-          content='foo'
-          trigger={<button>foo</button>}
-        />,
-      )
 
-      wrapper.find('button').simulate('click')
-      const element = document.querySelector('.popup.ui')
-      element.style.should.have.property('left', '-50px')
-      wrapper.setProps({ horizontalOffset: 60 })
-      element.style.should.have.property('left', '-60px')
-    })
-  })
+    it('renders child text', () => {
+      wrapperMount(<Popup open>child text</Popup>)
 
-  describe('verticalOffset', () => {
-    it('accepts a vertical offset to the top', () => {
-      wrapperMount(
-        <Popup
-          verticalOffset={50}
-          position='bottom right'
-          content='foo'
-          trigger={<button>foo</button>}
-        />,
-      )
-
-      wrapper.find('button').simulate('click')
-      assertInBody('.ui.popup.visible')
+      document.querySelector('.ui.popup.visible').innerText.should.equal('child text')
     })
-    it('accepts a vertical offset to the bottom', () => {
-      wrapperMount(
-        <Popup
-          verticalOffset={50}
-          position='top left'
-          content='foo'
-          trigger={<button>foo</button>}
-        />,
-      )
 
-      wrapper.find('button').simulate('click')
-      assertInBody('.ui.popup.visible')
-    })
-    it('causes the style to be updated', () => {
-      wrapperMount(
-        <Popup
-          verticalOffset={50}
-          position='bottom right'
-          content='foo'
-          trigger={<button>foo</button>}
-        />,
-      )
+    it('renders child components', () => {
+      const child = <div data-child />
+      wrapperMount(<Popup open>{child}</Popup>)
 
-      wrapper.find('button').simulate('click')
-      const element = document.querySelector('.popup.ui')
-      element.style.should.have.property('top', '50px')
-      wrapper.setProps({ verticalOffset: 60 })
-      element.style.should.have.property('top', '60px')
+      document
+        .querySelector('.ui.popup.visible')
+        .querySelector('[data-child]')
+        .should.not.equal(null, 'Popup did not render the child component.')
     })
   })
 
-  describe('position', () => {
-    POSITIONS.forEach((position) => {
-      it(`"${position}" is always within the viewport when the trigger is clicked`, () => {
-        wrapperMount(
-          <Popup content='_' position={position} trigger={<button>foo</button>} on='click' />,
-        )
-        wrapper.find('button').simulate('click')
-
-        const rect = document.querySelector('.popup.ui').getBoundingClientRect()
-        const { top, right, bottom, left } = rect
-        expect(top).to.be.at.least(0)
-        expect(left).to.be.at.least(0)
-        expect(bottom).to.be.at.most(document.documentElement.clientHeight)
-        expect(right).to.be.at.most(document.documentElement.clientWidth)
-      })
-      it(`"${position}" is positioned properly when open property is set`, (done) => {
-        wrapperMount(<Popup content='_' position={position} open trigger={<button>foo</button>} />)
-        setTimeout(() => {
-          const element = document.querySelector('.popup.ui')
-          const { top, left, bottom, right } = element.style
-          expect(element.style.position).to.equal('absolute')
-          expect(top).to.not.equal('')
-          expect(left).to.not.equal('')
-          expect(bottom).to.not.equal('')
-          expect(right).to.not.equal('')
-          done()
-        }, 1)
-      })
-      it(`"${position}" is the original if no horizontal position fits within the viewport`, () => {
-        wrapperMount(
-          <Popup
-            content='_'
-            position={position}
-            trigger={<button>foo</button>}
-            on='click'
-            horizontalOffset={999}
-          />,
-        )
-        wrapper.find('button').simulate('click')
-        const selectedPosition = wrapper.state('position')
-
-        expect(selectedPosition).to.equal(position)
-      })
-
-      it(`"${position}" is the original if no vertical position fits within the viewport`, () => {
-        wrapperMount(
-          <Popup
-            content='_'
-            position={position}
-            trigger={<button>foo</button>}
-            on='click'
-            verticalOffset={3000}
-          />,
-        )
-        wrapper.find('button').simulate('click')
-        const selectedPosition = wrapper.state('position')
-
-        expect(selectedPosition).to.equal(position)
-      })
+  describe('className', () => {
+    it('should add className to the wrapping node', () => {
+      wrapperMount(<Popup className='some-class' open />)
+      assertInBody('.ui.popup.visible.some-class')
     })
   })
 
-  describe('keepInViewPort', () => {
-    it('will not alter the position and render outside the viewport if set to false', () => {
-      wrapperMount(
-        <Popup
-          content='_'
-          position='top center'
-          trigger={<button>foo</button>}
-          on='click'
-          keepInViewPort={false}
-        />,
-      )
-      wrapper.find('button').simulate('click')
-
-      const rect = document.querySelector('.popup.ui').getBoundingClientRect()
-      const { top } = rect
-
-      const selectedPosition = wrapper.state('position')
-
-      expect(selectedPosition).to.equal('top center')
-      expect(top).to.be.below(0)
+  describe('basic', () => {
+    it('adds basic to the popup className', () => {
+      wrapperMount(<Popup basic open />)
+      assertInBody('.ui.basic.popup.visible')
     })
+  })
 
-    it('is enabled by default', () => {
-      expect(Popup.defaultProps.keepInViewPort).to.equal(true)
+  describe('disabled', () => {
+    it('is not disabled by default', () => {
+      shallow(<Popup />)
+        .find('Portal')
+        .should.exist()
     })
 
-    it('alters the position when true and renders within the viewport', () => {
-      wrapperMount(
-        <Popup
-          content='_'
-          position='top center'
-          trigger={<button>foo</button>}
-          on='click'
-          keepInViewPort
-        />,
-      )
-      wrapper.find('button').simulate('click')
-
-      const rect = document.querySelector('.popup.ui').getBoundingClientRect()
-      const { top } = rect
-
-      const selectedPosition = wrapper.state('position')
+    it('does not render Portal if disabled', () => {
+      shallow(<Popup disabled />)
+        .find('Portal')
+        .should.not.exist()
+    })
 
-      expect(selectedPosition).to.not.equal('top center')
-      expect(top).to.be.at.least(0)
+    it('does not render Portal even with open prop', () => {
+      shallow(<Popup open disabled />)
+        .find('Portal')
+        .should.not.exist()
     })
   })
 
-  describe('hoverable', () => {
-    it('can be set to stay visible while hovering the popup', () => {
-      shallow(<Popup hoverable open />)
-        .find('Portal')
-        .should.have.prop('closeOnPortalMouseLeave', true)
+  describe('flowing', () => {
+    it('adds flowing to the popup className', () => {
+      wrapperMount(<Popup flowing open />)
+      assertInBody('.ui.flowing.popup.visible')
     })
   })
 
-  describe('hide on scroll', () => {
+  describe('hideOnScroll', () => {
+    const trigger = <button>foo</button>
+
     it('hides on window scroll', () => {
-      const trigger = <button>foo</button>
-      wrapperMount(<Popup hideOnScroll content='foo' trigger={trigger} />)
+      wrapperMount(<Popup content='foo' hideOnScroll trigger={<button>foo</button>} />)
 
       wrapper.find('button').simulate('click')
       assertInBody('.ui.popup.visible')
@@ -301,130 +132,74 @@ describe('Popup', () => {
 
     it('is called with (e, props) when scroll', () => {
       const onClose = sandbox.spy()
-      const trigger = <button>foo</button>
 
       wrapperMount(<Popup content='foo' hideOnScroll onClose={onClose} trigger={trigger} />)
-        .find('button')
-        .simulate('click')
 
+      wrapper.find('button').simulate('click')
       domEvent.scroll(window)
+
       onClose.should.have.been.calledOnce()
       onClose.should.have.been.calledWithMatch({}, { content: 'foo', onClose, trigger })
     })
   })
 
-  describe('trigger', () => {
-    it('it appears on click', () => {
-      const trigger = <button>foo</button>
-      wrapperMount(<Popup on='click' content='foo' header='bar' trigger={trigger} />)
+  describe('hoverable', () => {
+    it('can be set to stay visible while hovering the popup', () => {
+      shallow(<Popup hoverable open />)
+        .find('Portal')
+        .should.have.prop('closeOnPortalMouseLeave', true)
+    })
+  })
 
-      wrapper.find('button').simulate('click')
-      assertInBody('.ui.popup.visible')
+  describe('inverted', () => {
+    it('adds inverted to the popup className', () => {
+      wrapperMount(<Popup inverted open />)
+      assertInBody('.ui.inverted.popup.visible')
     })
+  })
 
-    it('it appears on hover', (done) => {
-      const trigger = <button>foo</button>
-      wrapperMount(<Popup content='foo' trigger={trigger} mouseEnterDelay={0} />)
+  describe('offset', () => {
+    it('passes values to Popper', () => {
+      wrapperMount(<Popup content='foo' open offset='50, 100' position='bottom right' />)
 
-      wrapper.find('button').simulate('mouseenter')
-      setTimeout(() => {
-        assertInBody('.ui.popup.visible')
-        done()
-      }, 1)
+      const modifiers = wrapper.find('Popper').prop('modifiers')
+      const offset = modifiers.offset
+
+      offset.should.have.property('offset', '50, 100')
     })
+  })
 
-    it('it appears on focus', () => {
-      const trigger = <input type='text' />
-      wrapperMount(<Popup on='focus' content='foo' trigger={trigger} />)
+  describe('onClose', () => {
+    it('is not called on click inside of the popup', () => {
+      const onClose = sandbox.spy()
+      wrapperMount(<Popup defaultOpen onClose={onClose} />)
 
-      wrapper.find('input').simulate('focus')
-      assertInBody('.ui.popup.visible')
+      domEvent.click('.ui.popup')
+      onClose.should.not.have.been.calledOnce()
     })
 
-    it('it appears on multiple', (done) => {
-      const trigger = <button>foo</button>
-      const button = wrapperMount(
-        <Popup on={['click', 'hover']} content='foo' header='bar' trigger={trigger} />,
-      ).find('button')
-
-      button.simulate('click')
-      assertInBody('.ui.popup.visible')
+    it('is called on body click', () => {
+      const onClose = sandbox.spy()
+      wrapperMount(<Popup defaultOpen onClose={onClose} />)
 
       domEvent.click('body')
+      onClose.should.have.been.calledOnce()
+    })
 
-      button.simulate('mouseenter')
-      setTimeout(() => {
-        assertInBody('.ui.popup.visible')
-        done()
-      }, 51)
+    it('is called when pressing escape', () => {
+      const onClose = sandbox.spy()
+      wrapperMount(<Popup defaultOpen onClose={onClose} />)
+
+      domEvent.keyDown(document, { key: 'Escape' })
+      onClose.should.have.been.calledOnce()
     })
-  })
 
-  describe('context', () => {
-    // We're expecting to see this:
-    //
-    // |- context -----------------------------|
-    // |             99px x 10px               |
-    // |---------------------------------------|
-    //                  ---^---
-    //                 | popup |
-    //                  -------
-
-    it('aligns the popup to the context node', () => {
-      const context = document.createElement('div')
-      context.innerText = '.'
-      context.style.marginTop = '400px'
-      context.style.marginLeft = '400px'
-      context.style.width = '99px'
-      context.style.height = '10px'
-
-      document.body.appendChild(context)
-      const contextRect = context.getBoundingClientRect()
-
-      wrapperMount(
-        <Popup id='context-popup' context={context} content='.' position='bottom center' open />,
-      )
-
-      const popupRect = document.querySelector('#context-popup').getBoundingClientRect()
-
-      document.body.removeChild(context)
-
-      popupRect.top.should.equal(
-        contextRect.bottom,
-        "The popup's top should have been equal to the context's bottom.",
-      )
-    })
-
-    it('aligns the popup to the context node even when there is a trigger', () => {
-      const context = document.createElement('div')
-      context.innerText = '.'
-      context.style.marginTop = '400px'
-      context.style.marginLeft = '400px'
-      context.style.width = '99px'
-      context.style.height = '10px'
-
-      document.body.appendChild(context)
-      const contextRect = context.getBoundingClientRect()
-
-      wrapperMount(
-        <Popup
-          id='context-popup'
-          trigger={<button />}
-          context={context}
-          content='.'
-          position='bottom center'
-          open
-        />,
-      )
-
-      const popupRect = document.querySelector('#context-popup').getBoundingClientRect()
-
-      document.body.removeChild(context)
-
-      popupRect.top.should.equal(
-        contextRect.bottom,
-        "The popup's top should have been equal to the context's bottom.",
-      )
+    it('is not called when the open prop changes to false', () => {
+      const onClose = sandbox.spy()
+      wrapperMount(<Popup defaultOpen onClose={onClose} />)
+
+      wrapper.setProps({ open: false })
+      onClose.should.not.have.been.called()
     })
   })
 
@@ -435,13 +210,11 @@ describe('Popup', () => {
     })
 
     it('is passed to Portal open', () => {
-      shallow(<Popup open />)
-        .find('Portal')
-        .should.have.prop('open', true)
+      wrapperShallow(<Popup open />)
+      wrapper.find('Portal').should.have.prop('open', true)
 
-      shallow(<Popup open={false} />)
-        .find('Portal')
-        .should.have.prop('open', false)
+      wrapperShallow(<Popup open={false} />)
+      wrapper.find('Portal').should.have.prop('open', false)
     })
 
     it('does not show the popup when false', () => {
@@ -454,7 +227,6 @@ describe('Popup', () => {
       assertInBody('.ui.popup.visible', false)
 
       wrapper.setProps({ open: true })
-
       assertInBody('.ui.popup.visible')
     })
 
@@ -463,63 +235,17 @@ describe('Popup', () => {
       assertInBody('.ui.popup.visible')
 
       wrapper.setProps({ open: false })
-
       assertInBody('.ui.popup.visible', false)
     })
   })
 
-  describe('disabled', () => {
-    it('is not disabled by default', () => {
-      shallow(<Popup />)
-        .find('Portal')
-        .should.exist()
-    })
-
-    it('does not render Portal if disabled', () => {
-      shallow(<Popup disabled />)
-        .find('Portal')
-        .should.not.exist()
-    })
-
-    it('does not render Portal even with open prop', () => {
-      shallow(<Popup open disabled />)
-        .find('Portal')
-        .should.not.exist()
-    })
-  })
-
-  describe('basic', () => {
-    it('adds basic to the popup className', () => {
-      wrapperMount(<Popup basic open />)
-      assertInBody('.ui.basic.popup.visible')
-    })
-  })
-
-  describe('flowing', () => {
-    it('adds flowing to the popup className', () => {
-      wrapperMount(<Popup flowing open />)
-      assertInBody('.ui.flowing.popup.visible')
-    })
-  })
-
-  describe('inverted', () => {
-    it('adds inverted to the popup className', () => {
-      wrapperMount(<Popup inverted open />)
-      assertInBody('.ui.inverted.popup.visible')
-    })
-  })
-
-  describe('wide', () => {
-    it('adds wide to the popup className', () => {
-      wrapperMount(<Popup wide open />)
-      assertInBody('.ui.wide.popup.visible')
-    })
-  })
+  describe('position', () => {
+    _.forEach(positionsMapping, (placement, position) => {
+      it(`passes the "${position}" as "${placement}" to Popper`, () => {
+        wrapperMount(<Popup open position={position} />)
 
-  describe('very wide', () => {
-    it('adds very wide to the popup className', () => {
-      wrapperMount(<Popup wide='very' open />)
-      assertInBody('.ui.very.wide.popup.visible')
+        wrapper.find('Popper').prop('placement', placement)
+      })
     })
   })
 
@@ -534,32 +260,57 @@ describe('Popup', () => {
     })
   })
 
-  describe('onClose', () => {
-    let spy
+  describe('trigger', () => {
+    it('opens Popup on click', () => {
+      wrapperMount(<Popup on='click' content='foo' trigger={<button />} />)
 
-    beforeEach(() => {
-      spy = sandbox.spy()
-      wrapperMount(<Popup onClose={spy} defaultOpen />)
+      wrapper.find('button').simulate('click')
+      assertInBody('.ui.popup.visible')
     })
 
-    it('is not called on click inside of the popup', () => {
-      domEvent.click(document.querySelector('.ui.popup'))
-      spy.should.not.have.been.calledOnce()
+    it('opens Popup on hover', (done) => {
+      wrapperMount(<Popup content='foo' mouseEnterDelay={0} trigger={<button />} />)
+
+      wrapper.find('button').simulate('mouseenter')
+      setTimeout(() => {
+        assertInBody('.ui.popup.visible')
+        done()
+      }, 1)
     })
 
-    it('is called on body click', () => {
+    it('opens Popup on focus', () => {
+      wrapperMount(<Popup on='focus' content='foo' trigger={<input />} />)
+
+      wrapper.find('input').simulate('focus')
+      assertInBody('.ui.popup.visible')
+    })
+
+    it('opens Popup on multiple', (done) => {
+      wrapperMount(<Popup on={['click', 'hover']} content='foo' trigger={<button />} />)
+      const button = wrapper.find('button')
+
+      button.simulate('click')
+      assertInBody('.ui.popup.visible')
+
       domEvent.click('body')
-      spy.should.have.been.calledOnce()
+
+      button.simulate('mouseenter')
+      setTimeout(() => {
+        assertInBody('.ui.popup.visible')
+        done()
+      }, 51)
     })
+  })
 
-    it('is called when pressing escape', () => {
-      domEvent.keyDown(document, { key: 'Escape' })
-      spy.should.have.been.calledOnce()
+  describe('wide', () => {
+    it('adds to the popup className', () => {
+      wrapperMount(<Popup wide open />)
+      assertInBody('.ui.wide.popup.visible')
     })
 
-    it('is not called when the open prop changes to false', () => {
-      wrapper.setProps({ open: false })
-      spy.should.not.have.been.called()
+    it('adds "very" to the popup className', () => {
+      wrapperMount(<Popup wide='very' open />)
+      assertInBody('.ui.very.wide.popup.visible')
     })
   })
 })
diff --git a/yarn.lock b/yarn.lock
index 6e1c80534e..d555cc0190 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3885,6 +3885,14 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+create-react-context@<=0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.2.tgz#9836542f9aaa22868cd7d4a6f82667df38019dca"
+  integrity sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==
+  dependencies:
+    fbjs "^0.8.0"
+    gud "^1.0.0"
+
 create-react-context@^0.2.2:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3"
@@ -6663,7 +6671,7 @@ header-case@^1.0.0:
     no-case "^2.2.0"
     upper-case "^1.1.3"
 
-history@^4.8.0-beta.0, history@^4.9.0:
+history@^4.9.0:
   version "4.9.0"
   resolved "https://registry.yarnpkg.com/history/-/history-4.9.0.tgz#84587c2068039ead8af769e9d6a6860a14fa1bca"
   integrity sha512-H2DkjCjXf0Op9OAr6nJ56fcRkTSNrUiv41vNJ6IswJjif6wlpZK0BTfFbi7qK9dXLSYZxkq5lBsj3vUjlYBYZA==
@@ -6687,11 +6695,7 @@ hoist-non-react-statics@^2.2.1:
   version "2.5.5"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
 
-hoist-non-react-statics@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz#d2ca2dfc19c5a91c5a6615ce8e564ef0347e2a40"
-
-hoist-non-react-statics@^3.1.0:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b"
   integrity sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==
@@ -9685,6 +9689,11 @@ pluralize@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
 
+popper.js@^1.14.4:
+  version "1.14.7"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.7.tgz#e31ec06cfac6a97a53280c3e55e4e0c860e7738e"
+  integrity sha512-4q1hNvoUre/8srWsH7hnoSJ5xVmIL4qgz+s4qf2TnJIMyZFUFMGH+9vE7mXynAlHSZ/NdTmmow86muD0myUkVQ==
+
 portfinder@^1.0.9:
   version "1.0.13"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
@@ -10078,7 +10087,7 @@ prop-types@^15.5.10, prop-types@^15.6.2:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
-prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0:
+prop-types@^15.5.4, prop-types@^15.5.8:
   version "15.6.0"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
   dependencies:
@@ -10403,33 +10412,31 @@ react-helmet@^5.2.0:
     prop-types "^15.5.4"
     react-side-effect "^1.1.0"
 
-react-hot-loader@^4:
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.3.4.tgz#4f9bdd55bb20d77a6ae8931fa1c187e5f0ce6279"
-  dependencies:
-    fast-levenshtein "^2.0.6"
-    global "^4.3.0"
-    hoist-non-react-statics "^2.5.0"
-    prop-types "^15.6.1"
-    react-lifecycles-compat "^3.0.4"
-    shallowequal "^1.0.2"
-
-react-hot-loader@^4.3.11:
-  version "4.3.11"
-  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.3.11.tgz#fe5cf7be7700c249b58293f977c1e6e0900f0d87"
+react-hot-loader@^4, react-hot-loader@^4.8.0:
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.8.0.tgz#0b7c7dd9407415e23eb8246fdd28b0b839f54cb6"
+  integrity sha512-HY9F0vITYSVmXhAR6tPkMk240nxmoH8+0rca9iO2B82KVguiCiBJkieS0Wb4CeSIzLWecYx3iOcq8dcbnp0bxA==
   dependencies:
     fast-levenshtein "^2.0.6"
     global "^4.3.0"
-    hoist-non-react-statics "^2.5.0"
+    hoist-non-react-statics "^3.3.0"
+    loader-utils "^1.1.0"
+    lodash "^4.17.11"
     prop-types "^15.6.1"
     react-lifecycles-compat "^3.0.4"
     shallowequal "^1.0.2"
+    source-map "^0.7.3"
 
 react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
   version "16.8.4"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2"
   integrity sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA==
 
+react-is@^16.8.5:
+  version "16.8.5"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.5.tgz#c54ac229dd66b5afe0de5acbe47647c3da692ff8"
+  integrity sha512-sudt2uq5P/2TznPV4Wtdi+Lnq3yaYW8LfvPKLM9BKD8jJNBkxMVyB0C9/GmVhLw7Jbdmndk/73n7XQGeN9A3QQ==
+
 react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -10439,23 +10446,35 @@ react-node-resolver@^1.0.1:
   resolved "https://registry.yarnpkg.com/react-node-resolver/-/react-node-resolver-1.0.1.tgz#1798a729c0e218bf2f0e8ddf79c550d4af61d83a"
   integrity sha1-F5inKcDiGL8vDo3fecVQ1K9h2Do=
 
-react-router-dom@^4.2.2, react-router-dom@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.4.0.tgz#fad67b46375f7081a76d1c92a83a92d28b5abc35"
-  integrity sha512-r4knbi8lanTGrwoUXFaWALrJZOAl3h9bdFUz4woHgEm7/bYcpBGfnYhPU82xjXrPeJyWF6OmIxpwXjxos30gOQ==
+react-popper@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.3.tgz#2c6cef7515a991256b4f0536cd4bdcb58a7b6af6"
+  integrity sha512-ynMZBPkXONPc5K4P5yFWgZx5JGAUIP3pGGLNs58cfAPgK67olx7fmLp+AdpZ0+GoQ+ieFDa/z4cdV6u7sioH6w==
   dependencies:
     "@babel/runtime" "^7.1.2"
-    history "^4.8.0-beta.0"
+    create-react-context "<=0.2.2"
+    popper.js "^1.14.4"
+    prop-types "^15.6.1"
+    typed-styles "^0.0.7"
+    warning "^4.0.2"
+
+react-router-dom@^4.2.2, react-router-dom@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.0.0.tgz#542a9b86af269a37f0b87218c4c25ea8dcf0c073"
+  integrity sha512-wSpja5g9kh5dIteZT3tUoggjnsa+TPFHSMrpHXMpFsaHhQkm/JNVGh2jiF9Dkh4+duj4MKCkwO6H08u6inZYgQ==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    history "^4.9.0"
     loose-envify "^1.3.1"
     prop-types "^15.6.2"
-    react-router "^4.4.0"
+    react-router "5.0.0"
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-router@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.4.0.tgz#e8b8b88329f564d4c48b7ee631b10310188c6888"
-  integrity sha512-qTGsOSF2b02zOsUfcnHjw7muI0Ejx+yA2e4P9qqzB2O+N3Icpca4epViXRgkBIvBjagXBtroxXqH0RJhYDMUbg==
+react-router@5.0.0, react-router@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.0.0.tgz#349863f769ffc2fa10ee7331a4296e86bc12879d"
+  integrity sha512-6EQDakGdLG/it2x9EaCt9ZpEEPxnd0OCLBHQ1AcITAAx7nCnyvnzf76jKWG1s2/oJ7SSviUgfWHofdYljFexsA==
   dependencies:
     "@babel/runtime" "^7.1.2"
     create-react-context "^0.2.2"
@@ -10561,23 +10580,15 @@ react-static@^5.9.7:
     webpack-flush-chunks "^1.2.3"
     webpack-node-externals "^1.6.0"
 
-react-test-renderer@^16.0.0-0:
-  version "16.1.1"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.1.1.tgz#a05184688d564be799f212449262525d1e350537"
-  dependencies:
-    fbjs "^0.8.16"
-    object-assign "^4.1.1"
-    prop-types "^15.6.0"
-
-react-test-renderer@^16.8.4:
-  version "16.8.4"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.8.4.tgz#abee4c2c3bf967a8892a7b37f77370c5570d5329"
-  integrity sha512-jQ9Tf/ilIGSr55Cz23AZ/7H3ABEdo9oy2zF9nDHZyhLHDSLKuoILxw2ifpBfuuwQvj4LCoqdru9iZf7gwFH28A==
+react-test-renderer@^16.0.0-0, react-test-renderer@^16.8.4:
+  version "16.8.5"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.8.5.tgz#4cba7a8aad73f7e8a0bc4379a0fe21632886a563"
+  integrity sha512-/pFpHYQH4f35OqOae/DgOCXJDxBqD3K3akVfDhLgR0qYHoHjnICI/XS9QDwIhbrOFHWL7okVW9kKMaHuKvt2ng==
   dependencies:
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    react-is "^16.8.4"
-    scheduler "^0.13.4"
+    react-is "^16.8.5"
+    scheduler "^0.13.5"
 
 react-universal-component@^2.8.1, react-universal-component@^3.0.3:
   version "3.0.3"
@@ -11277,6 +11288,14 @@ scheduler@^0.13.4:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.13.5:
+  version "0.13.5"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.5.tgz#b7226625167041298af3b98088a9dbbf6d7733a8"
+  integrity sha512-K98vjkQX9OIt/riLhp6F+XtDPtMQhqNcf045vsh+pcuvHq+PHy1xCrH3pq1P40m6yR46lpVvVhKdEOtnimuUJw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf"
@@ -11735,20 +11754,29 @@ source-map-url@^0.4.0:
 source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
 source-map@^0.4.4:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
+  integrity sha1-66T12pwNyZneaAMti092FzZSA2s=
   dependencies:
     amdefine ">=0.0.4"
 
 source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+source-map@^0.7.3:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
+  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
 
 source-map@~0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.2.0.tgz#dab73fbcfc2ba819b4de03bd6f6eaa48164b3f9d"
+  integrity sha1-2rc/vPwrqBm03gO9b26qSBZLP50=
   dependencies:
     amdefine ">=0.0.4"
 
@@ -12567,6 +12595,11 @@ type-is@~1.6.16:
     media-typer "0.3.0"
     mime-types "~2.1.18"
 
+typed-styles@^0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/typed-styles/-/typed-styles-0.0.7.tgz#93392a008794c4595119ff62dde6809dbc40a3d9"
+  integrity sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==
+
 typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
@@ -13147,6 +13180,13 @@ void-elements@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
 
+warning@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 watchpack@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.4.0.tgz#4a1472bcbb952bd0a9bb4036801f954dfb39faac"