feat: migration to popper v2 (#333)

Co-authored-by: sgrishchenko <[email protected]>

Author: sgrishchenko

.flowconfig

@@ -1,16 +1,17 @@
 [ignore]
-.*/node_modules/config-chain/.*
 /lib/.*
 .*/.cache
 
 [include]
 
 [libs]
-node_modules/popper.js/index.js.flow
 
 [lints]
 
 [options]
 suppress_comment=\\(.\\|\n\\)*\\$FlowExpectError
 
 [strict]
+
+[declarations]
+<PROJECT_ROOT>/node_modules

.size-snapshot.json

@@ -1,25 +1,25 @@
 {
   "dist/index.umd.js": {
-    "bundled": 88323,
-    "minified": 32847,
-    "gzipped": 9575
+    "bundled": 84846,
+    "minified": 30911,
+    "gzipped": 9420
   },
   "dist/index.umd.min.js": {
-    "bundled": 52955,
-    "minified": 21926,
-    "gzipped": 6619
+    "bundled": 49580,
+    "minified": 20040,
+    "gzipped": 6478
   },
   "dist/index.esm.js": {
-    "bundled": 12824,
-    "minified": 7630,
-    "gzipped": 2103,
+    "bundled": 13500,
+    "minified": 7562,
+    "gzipped": 2164,
     "treeshaked": {
       "rollup": {
-        "code": 3829,
-        "import_statements": 163
+        "code": 3816,
+        "import_statements": 184
       },
       "webpack": {
-        "code": 4978
+        "code": 4957
       }
     }
   }

demo/index.js

@@ -47,21 +47,68 @@ const enhance = compose(
   withState('isPopper2Open', 'togglePopper2', false)
 );
 
-const modifiers = {
-  flip: { enabled: false },
-  preventOverflow: { enabled: false },
-  hide: { enabled: false },
-};
+const modifiers = [
+  {
+    name: 'flip',
+    enabled: false,
+  },
+  {
+    name: 'hide',
+    enabled: false,
+  },
+];
 
-const animatedModifiers = {
+const popperModifiers = [
   ...modifiers,
+  {
+    name: 'arrow',
+    options: {
+      padding: 5,
+    },
+  },
+  {
+    name: 'offset',
+    options: {
+      offset: [0, 14],
+    },
+  },
+];
+
+const dotModifiers = [
+  ...modifiers,
+  {
+    name: 'offset',
+    options: {
+      offset: [0, 56],
+    },
+  }
+];
+
+const mainModifiers = [
+  ...popperModifiers,
+  // We can't use adaptive styles with CSS transitions
+  {
+    name: 'computeStyles',
+    options: {
+      adaptive: false,
+    }
+  },
+];
+
+const animatedModifiers = [
+  ...popperModifiers,
   // We disable the built-in gpuAcceleration so that
   // Popper.js will return us easy to interpolate values
   // (top, left instead of transform: translate3d)
   // We'll then use these values to generate the needed
-  // css tranform values blended with the react-spring values
-  computeStyle: { gpuAcceleration: false },
-}
+  // css transform values blended with the react-spring values
+  {
+    name: 'computeStyles',
+    options: {
+      gpuAcceleration: false,
+    }
+  },
+];
 
 const Demo = enhance(
   ({ activePlacement, setActivePlacement, isPopper2Open, togglePopper2 }) => (
@@ -81,7 +128,7 @@ const Demo = enhance(
             )}
           </Reference>
           <PoppersContainer>
-            <Popper placement={activePlacement} modifiers={modifiers}>
+            <Popper placement={activePlacement} modifiers={mainModifiers}>
               {({ ref, style, placement, arrowProps }) => (
                 <TransitionedPopperBox innerRef={ref} style={style}>
                   {placement}
@@ -94,7 +141,7 @@ const Demo = enhance(
               )}
             </Popper>
             {placements.filter(p => p !== activePlacement).map(p => (
-              <Popper placement={p} key={p} modifiers={modifiers}>
+              <Popper placement={p} key={p} modifiers={dotModifiers}>
                 {({ ref, style }) => (
                   <PopperDot
                     innerRef={ref}
@@ -148,7 +195,7 @@ const Demo = enhance(
                           position,
                           padding: '1em',
                           width: '10em',
-                          transform: `translate3d(${left}px, ${top +
+                          transform: `translate3d(${left}, ${parseInt(top) +
                             topOffset}px, 0) scale(${scale}) rotate(${rotation})`,
                           transformOrigin: 'top center',
                         }}

demo/styles.js

@@ -60,7 +60,6 @@ export const PopperBox = styled('div')`
   background-color: #232323;
   color: #ffffff;
   border-radius: 10px;
-  margin: 0.9em;
   padding: 0.5em;
   text-align: center;
   ${props => props.popperStyle};
@@ -93,7 +92,6 @@ export const PopperDot = styled('button')`
   height: 1em;
   border-radius: 50%;
   background-color: #232323;
-  margin: 3.5em;
   animation: ${pulse} 2s ease infinite;
 `;
 

jest.setup.js

@@ -1,4 +1,5 @@
 // @flow
+import '@babel/polyfill';
 import Enzyme from 'enzyme';
 import EnzymeAdapter from 'enzyme-adapter-react-16';
 

package.json

@@ -15,21 +15,21 @@
     "/typings/react-popper.d.ts"
   ],
   "scripts": {
-    "build": "npm run build:clean && npm run build:esm && npm run build:cjs && npm run build:umd && npm run build:flow",
+    "build": "yarn build:clean && yarn build:esm && yarn build:cjs && yarn build:umd && yarn build:flow",
     "build:clean": "rimraf dist/ && rimraf lib/",
     "build:umd": "rollup -c && rimraf dist/index.esm.js",
     "build:esm": "cross-env BABEL_ENV=esm babel src --out-dir lib/esm",
     "build:cjs": "cross-env BABEL_ENV=cjs babel src --out-dir lib/cjs",
-    "build:flow": "flow-copy-source --ignore '{__mocks__/*,*.test}.js' src lib/cjs",
+    "build:flow": "flow-copy-source --ignore '{__typings__/*,*.test}.js' src lib/cjs",
     "demo:dev": "parcel --out-dir demo/dist demo/index.html",
     "demo:build": "parcel build --out-dir demo/dist demo/index.html --public-url=/react-popper",
     "demo:deploy": "yarn demo:build && gh-pages -d demo/dist",
-    "test": "npm run test:eslint && npm run test:flow && npm run test:ts && npm run test:jest",
+    "test": "yarn test:eslint && yarn test:flow && yarn test:ts && yarn test:jest",
     "test:ts": "tsc --project ./typings/tests",
     "test:flow": "flow check",
     "test:jest": "jest",
     "test:eslint": "eslint src",
-    "prepare": "npm run build",
+    "prepare": "yarn build",
     "precommit": "pretty-quick --staged && test",
     "prepublishOnly": "git-branch-is master"
   },
@@ -58,15 +58,14 @@
     "popover"
   ],
   "peerDependencies": {
+    "@popperjs/core": "^2.0.0",
     "react": "0.14.x || ^15.0.0 || ^16.0.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.1.2",
     "create-react-context": "^0.3.0",
     "deep-equal": "^1.1.1",
-    "popper.js": "^1.14.4",
     "prop-types": "^15.6.1",
-    "typed-styles": "^0.0.7",
     "warning": "^4.0.2"
   },
   "devDependencies": {
@@ -76,10 +75,12 @@
     "@babel/plugin-proposal-class-properties": "^7.1.0",
     "@babel/plugin-transform-modules-commonjs": "^7.1.0",
     "@babel/plugin-transform-runtime": "^7.1.0",
+    "@babel/polyfill": "^7.8.3",
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-stage-2": "^7.0.0",
+    "@popperjs/core": "^2.0.4",
     "@types/react": "^16.1.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^24.0.0",
@@ -94,8 +95,8 @@
     "eslint-plugin-jest": "^21.15.0",
     "eslint-plugin-promise": "^3.7.0",
     "eslint-plugin-react": "^7.7.0",
-    "flow-bin": "^0.69.0",
-    "flow-copy-source": "^1.3.0",
+    "flow-bin": "^0.117.0",
+    "flow-copy-source": "^2.0.9",
     "gh-pages": "^1.1.0",
     "git-branch-is": "^0.1.0",
     "jest": "^24.0.0",
@@ -115,6 +116,6 @@
     "rollup-plugin-replace": "^2.0.0",
     "rollup-plugin-size-snapshot": "^0.5.1",
     "rollup-plugin-uglify": "^4.0.0",
-    "typescript": "^2.8.1"
+    "typescript": "^3.7.5"
   }
 }

rollup.config.js

@@ -9,7 +9,7 @@ const input = './src/index.js';
 
 const umdGlobals = {
   react: 'React',
-  'popper.js': 'Popper',
+  '@popperjs/core': 'Popper',
 };
 
 const getBabelOptions = () => ({