fix(core): compatibility with react-popper v2 & @popperjs monorepo

BREAKING CHANGES: - DropdownMenu: `modifiers` prop is now required to be an array - Added @popperjs/core as peerdep as it is a peerdep of react-popper v2
p3ol · May 28, 2020 · 56b0f9b · 56b0f9b
1 parent 3890528
commit 56b0f9b
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 50 deletions.
diff --git a/package.json b/package.json
@@ -19,7 +19,8 @@
   "peerDependencies": {
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
-    "react-popper": "^1.3.0"
+    "react-popper": "^2.2.0",
+    "@popperjs/core": "^2.4.0"
   },
   "devDependencies": {
     "@babel/cli": "7.10.1",
@@ -33,6 +34,7 @@
     "@babel/preset-react": "7.10.1",
     "@poool/eslint-config": "0.0.1-alpha.6",
     "@poool/eslint-config-react": "0.0.1-alpha.6",
+    "@popperjs/core": "^2.4.0",
     "@rollup/plugin-babel": "5.0.2",
     "@rollup/plugin-commonjs": "12.0.0",
     "@rollup/plugin-node-resolve": "8.0.0",
@@ -63,7 +65,7 @@
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-intl-tel-input": "8.0.2",
-    "react-popper": "1.3.7",
+    "react-popper": "2.2.3",
     "react-redux": "7.2.0",
     "react-router-dom": "5.2.0",
     "react-transition-group": "4.4.1",

diff --git a/src/DropdownMenu.js b/src/DropdownMenu.js
@@ -10,7 +10,7 @@ export default class DropdownMenu extends React.Component {
   static propTypes = {
     apparition: PropTypes.oneOf(['insert', 'css']),
     container: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    modifiers: PropTypes.object,
+    modifiers: PropTypes.array,
     tag: PropTypes.oneOfType([
       PropTypes.func,
       PropTypes.string,
@@ -22,7 +22,7 @@ export default class DropdownMenu extends React.Component {
 
   static defaultProps = {
     apparition: 'insert',
-    modifiers: {},
+    modifiers: [],
     tag: 'div',
   }
 
@@ -63,11 +63,19 @@ export default class DropdownMenu extends React.Component {
     const menu = (
       <Popper
         placement={placement}
-        modifiers={modifiers}
+        modifiers={[
+          ...modifiers,
+          {
+            name: 'offset',
+            options: {
+              offset: [0, 10],
+            },
+          },
+        ]}
         innerRef={ref => { this.innerRef = ref; }}
       >
-        { ({ ref, style, placement_, scheduleUpdate }) => {
-          this.scheduleUpdate = scheduleUpdate;
+        { ({ ref, style, placement_, update }) => {
+          this.scheduleUpdate = update;
 
           return (
             <Tag

diff --git a/src/Tooltip.js b/src/Tooltip.js
@@ -128,9 +128,18 @@ export default class Tooltip extends React.Component {
       <Popper
         {...popperOptions}
         placement={placement}
+        modifiers={[
+          ...(popperOptions?.modifiers || []),
+          {
+            name: 'offset',
+            options: {
+              offset: [0, 16],
+            },
+          },
+        ]}
       >
-        { ({ ref, style, placement, arrowProps, scheduleUpdate }) => {
-          this.scheduleUpdate = scheduleUpdate;
+        { ({ ref, style, placement, arrowProps, update }) => {
+          this.scheduleUpdate = update;
 
           return (
             <div

diff --git a/src/theme/components/Dropdown.styl b/src/theme/components/Dropdown.styl
@@ -9,8 +9,6 @@
 
   &.junipero-dropdown-menu
     z-index: 1000
-    margin-top: 10px
-    margin-bottom: 10px
 
     .junipero-dropdown-menu-inner
       background: $color-white

diff --git a/src/theme/components/Tooltip.styl b/src/theme/components/Tooltip.styl
@@ -31,31 +31,27 @@
     border-bottom: 8px solid transparent
 
   &[data-placement*="top"]
-    margin-bottom: 16px
 
     .arrow
       border-top-width: 8px
       border-top-style: solid
       bottom: -8px
 
   &[data-placement*="bottom"]
-    margin-top: 16px
 
     .arrow
       border-bottom-width: 8px
       border-bottom-style: solid
       top: -8px
 
   &[data-placement*="right"]
-    margin-left: 16px
 
     .arrow
       border-right-width: 8px
       border-right-style: solid
       left: -8px
 
   &[data-placement*="left"]
-    margin-right: 16px
 
     .arrow
       border-left-width: 8px

diff --git a/yarn.lock b/yarn.lock
@@ -1318,6 +1318,11 @@
   resolved "https://registry.yarnpkg.com/@poool/eslint-config/-/eslint-config-0.0.1-alpha.6.tgz#dffd93a47b803868e0a0050fb6eb13ed598ed5bc"
   integrity sha512-kh0r4Qi+ZrafoAtgw4rlzx+G2nLBi5H7hw53ZkXZQr8aGsfg1xsHlAo0MCy13uaBBx4uXfb968wR8FLOBNChZA==
 
+"@popperjs/core@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.4.0.tgz#0e1bdf8d021e7ea58affade33d9d607e11365915"
+  integrity sha512-NMrDy6EWh9TPdSRiHmHH2ye1v5U0gBD7pRYwSwJvomx7Bm4GG04vu63dYiVzebLOx2obPpJugew06xVP0Nk7hA==
+
 "@rollup/plugin-babel@5.0.2":
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.0.2.tgz#d9351b9545b0c586a193fc99830d4b1a25317ed5"
@@ -2996,14 +3001,6 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-create-react-context@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.3.0.tgz#546dede9dc422def0d3fc2fe03afe0bc0f4f7d8c"
-  integrity sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==
-  dependencies:
-    gud "^1.0.0"
-    warning "^4.0.3"
-
 cross-spawn@6.0.5, cross-spawn@^6.0.0:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
@@ -3323,7 +3320,7 @@ deep-diff@^0.3.5:
   resolved "https://registry.yarnpkg.com/deep-diff/-/deep-diff-0.3.8.tgz#c01de63efb0eec9798801d40c7e0dae25b582c84"
   integrity sha1-wB3mPvsO7JeYgB1Ax+Da4ltYLIQ=
 
-deep-equal@^1.0.1, deep-equal@^1.1.1:
+deep-equal@^1.0.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
   integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
@@ -4645,11 +4642,6 @@ growly@^1.3.0:
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
   integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
 
-gud@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
-  integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
-
 gzip-size@^5.0.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.1.1.tgz#cb9bee692f87c0612b232840a873904e4c135274"
@@ -7302,11 +7294,6 @@ pn@^1.1.0:
   resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
   integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==
 
-popper.js@^1.14.4:
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
-  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
-
 portfinder@^1.0.26:
   version "1.0.26"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.26.tgz#475658d56ca30bed72ac7f1378ed350bd1b64e70"
@@ -7960,6 +7947,11 @@ react-dom@16.13.1:
     prop-types "^15.6.2"
     scheduler "^0.19.1"
 
+react-fast-compare@^3.0.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.1.1.tgz#0becf31e3812fa70dc231e259f40d892d4767900"
+  integrity sha512-SCsAORWK59BvauR2L1BTdjQbJcSGJJz03U0awektk2hshLKrITDDFTlgGCqIZpTDlPC/NFlZee6xTMzXPVLiHw==
+
 react-intl-tel-input@8.0.2:
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/react-intl-tel-input/-/react-intl-tel-input-8.0.2.tgz#19a1cb312e4aff104015170ccbeb50c63177341f"
@@ -7976,17 +7968,12 @@ react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-i
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-popper@1.3.7:
-  version "1.3.7"
-  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.7.tgz#f6a3471362ef1f0d10a4963673789de1baca2324"
-  integrity sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww==
+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:
-    "@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"
+    react-fast-compare "^3.0.1"
     warning "^4.0.2"
 
 react-redux@7.2.0:
@@ -9538,11 +9525,6 @@ type-is@~1.6.17, type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
-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"
@@ -9822,7 +9804,7 @@ walker@^1.0.7, walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
-warning@^4.0.2, warning@^4.0.3:
+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==