Updated PopoverBase react-popper, added popper

• Updated:
- PopoverBase react-popper,

• Added:
- @popperjs/core

app/javascript/gabsocial/components/popover/popover_base.js

@@ -1,9 +1,8 @@
 import detectPassiveEvents from 'detect-passive-events'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
-import { Manager, Reference, Popper } from 'react-popper'
+import { Popper } from 'react-popper'
 import { CX } from '../../constants'
-import { isUserTouching } from '../../utils/is_mobile'
 
 const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false
 
@@ -130,25 +129,24 @@ class PopoverBase extends ImmutablePureComponent {
     const containerClasses = CX({
       default: 1,
       z4: 1,
+      boxShadowPopover: visible,
       displayNone: !visible,
     })
 
     return (
-      <Manager>
-        <Popper
-          placement={position}
-          referenceElement={targetRef}
-        >
-          {({ ref, style, placement, arrowProps }) => (
-            <div ref={ref} style={style} data-placement={placement} className={[_s.z4, _s.mt5, _s.mb5, _s.boxShadowPopover].join(' ')}>
-              <div ref={arrowProps.ref} style={arrowProps.style} />
-              <div ref={this.setRef} data-popover='true' onKeyDown={this.handleKeyDown} className={containerClasses}>
-                {children}
-              </div>
+      <Popper
+        placement={position}
+        referenceElement={targetRef}
+      >
+        {({ ref, style, placement, arrowProps }) => (
+          <div ref={ref} style={style} data-placement={placement} className={[_s.z4, _s.mt5, _s.mb5, _s.px5, _s.py5].join(' ')}>
+            <div ref={arrowProps.ref} style={arrowProps.style} />
+            <div ref={this.setRef} data-popover='true' onKeyDown={this.handleKeyDown} className={containerClasses}>
+              {children}
             </div>
-          )}
-        </Popper>
-      </Manager>
+          </div>
+        )}
+      </Popper>
     )
   }
 

package.json

@@ -70,6 +70,7 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/runtime": "^7.3.4",
     "@clusterws/cws": "^0.14.0",
+    "@popperjs/core": "^2.4.4",
     "array-includes": "^3.0.3",
     "autoprefixer": "^9.5.1",
     "axios": "^0.19.0",
@@ -138,7 +139,7 @@
     "react-immutable-pure-component": "^1.1.1",
     "react-intl": "^2.9.0",
     "react-motion": "^0.5.2",
-    "react-popper": "^1.3.7",
+    "react-popper": "^2.2.3",
     "react-redux": "^6.0.1",
     "react-redux-loading-bar": "^4.0.8",
     "react-router-dom": "^4.1.1",

yarn.lock

@@ -1043,6 +1043,11 @@
     "@types/istanbul-reports" "^1.1.1"
     "@types/yargs" "^13.0.0"
 
+"@popperjs/core@^2.4.4":
+  version "2.4.4"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.4.4.tgz#11d5db19bd178936ec89cd84519c4de439574398"
+  integrity sha512-1oO6+dN5kdIA3sKPZhRGJTfGVP4SWV6KqlMOwry4J3HfyD68sl/3KmG7DeYUzvN+RbhXDnv/D8vNNB8168tAMg==
+
 "@types/babel__core@^7.1.0", "@types/babel__core@^7.1.2":
   version "7.1.7"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.7.tgz#1dacad8840364a57c98d0dd4855c6dd3752c6b89"
@@ -7721,6 +7726,11 @@ react-event-listener@^0.6.0:
     prop-types "^15.6.0"
     warning "^4.0.1"
 
+react-fast-compare@^3.0.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
 react-hotkeys@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/react-hotkeys/-/react-hotkeys-1.1.4.tgz#a0712aa2e0c03a759fd7885808598497a4dace72"
@@ -7791,7 +7801,7 @@ react-onclickoutside@^6.9.0:
   resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.9.0.tgz#a54bc317ae8cf6131a5d78acea55a11067f37a1f"
   integrity sha512-8ltIY3bC7oGhj2nPAvWOGi+xGFybPNhJM0V1H8hY/whNcXgmDeaeoCMPPd8VatrpTsUWjb/vGzrmu6SrXVty3A==
 
-react-popper@^1.3.4, react-popper@^1.3.7:
+react-popper@^1.3.4:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.7.tgz#f6a3471362ef1f0d10a4963673789de1baca2324"
   integrity sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww==
@@ -7804,6 +7814,14 @@ react-popper@^1.3.4, react-popper@^1.3.7:
     typed-styles "^0.0.7"
     warning "^4.0.2"
 
+react-popper@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.2.3.tgz#33d425fa6975d4bd54d9acd64897a89d904b9d97"
+  integrity sha512-mOEiMNT1249js0jJvkrOjyHsGvqcJd3aGW/agkiMoZk3bZ1fXN1wQszIQSjHIai48fE67+zwF8Cs+C4fWqlfjw==
+  dependencies:
+    react-fast-compare "^3.0.1"
+    warning "^4.0.2"
+
 react-redux-loading-bar@^4.0.8:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/react-redux-loading-bar/-/react-redux-loading-bar-4.6.0.tgz#034a1771a97b43e7d835e67d2ba717ca378279f4"