feat: Upgrade to popper-2 (#1100)

* feat(popper): Ugrade to popper-2

* feat(popper): Use core-js in storybook for docs site

* Update package.json

* Update package.json

* docs(readme): Add polyfill section to readme

* feat(popper): Upgrade popper-core to latest

Author: sam-kvale-sap

.storybook/main.js

@@ -15,6 +15,7 @@ module.exports = {
     ],
 
     webpackFinal: async(config) => {
+        config.entry = ['core-js', ...config.entry];
         config.module.rules.push({
             test: /\.stories\.js?$/,
             use: [{ loader: 'story-description-loader' }],

README.md

@@ -21,6 +21,15 @@ See [Component Documentation](https://sap.github.io/fundamental-react/) for exam
 
 You will need to install [Node and Node Package Manager](https://www.npmjs.com/get-npm).
 
+## Polyfills
+
+Fundamental React requires a polyfill for:
+- [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
+- [Array.find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)
+- [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
+
+You will need to add your own polyfills. See [core-js](https://github.com/zloirock/core-js#commonjs-api) for instructions.
+
 ## Getting Started
 
 For an existing react application, follow the steps below:

package-lock.json

@@ -45,6 +45,7 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.10.2",
+    "@popperjs/core": "^2.4.3",
     "chain-function": "^1.0.1",
     "classnames": "^2.2.6",
     "detect-browser": "^5.1.0",
@@ -55,7 +56,8 @@
     "react-foco": "^1.3.0",
     "react-focus-lock": "^2.3.1",
     "react-overlays": "^2.1.0",
-    "react-popper": "^1.3.3",
+    "react-popper": "^2.2.3",
+    "react-popper-2": "npm:react-popper@^2.2.3",
     "shortid": "^2.2.14",
     "tabbable": "^4.0.0"
   },

package.json

@@ -171,7 +171,6 @@ class Popover extends Component {
                     noArrow={noArrow}
                     onClickOutside={chain(this.handleOutsideClick, onClickOutside)}
                     onEscapeKey={chain(this.handleEscapeKey, onEscapeKey)}
-                    placementTargetRef={this.controlRef}
                     popperClassName={popperClassName}
                     popperPlacement={placement}
                     popperProps={{ ...popperProps, id }}