Move anchorRef back to component and install informed peer dependency

packages/peregrine/lib/talons/Checkout/usePaymentsFormItems.js

@@ -1,5 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-// TODO install informed?
+import { useCallback, useState } from 'react';
 import { useFormState } from 'informed';
 
 /**
@@ -20,7 +19,6 @@ export const usePaymentsFormItems = props => {
     // If they resolve it or we move away from informed we can probably get some
     // extra performance.
     const formState = useFormState();
-    const anchorRef = useRef(null);
     const addressDiffers = formState.values.addresses_same === false;
 
     const handleError = useCallback(() => {
@@ -63,22 +61,8 @@ export const usePaymentsFormItems = props => {
         [formState.values, setIsSubmitting, onSubmit]
     );
 
-    // When the address checkbox is unchecked, additional fields are rendered.
-    // This causes the form to grow, and potentially to overflow, so the new
-    // fields may go unnoticed. To reveal them, we scroll them into view.
-    useEffect(() => {
-        if (addressDiffers) {
-            const { current: element } = anchorRef;
-
-            if (element instanceof HTMLElement) {
-                element.scrollIntoView({ behavior: 'smooth' });
-            }
-        }
-    }, [addressDiffers]);
-
     return {
         addressDiffers,
-        anchorRef,
         handleError,
         handleSuccess,
         isDisabled: !isReady || isSubmitting,

packages/peregrine/package.json

@@ -30,6 +30,7 @@
   },
   "peerDependencies": {
     "@babel/runtime": "~7.4.2",
+    "informed": "~2.1.13",
     "react": "~16.9.0",
     "react-apollo": "2.5.5",
     "react-dom": "~16.9.0",

packages/venia-ui/lib/components/Checkout/paymentsFormItems.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useEffect, useRef } from 'react';
 import { array, bool, func, shape, string } from 'prop-types';
 
 import BraintreeDropin from './braintreeDropin';
@@ -21,16 +21,30 @@ import { usePaymentsFormItems } from '@magento/peregrine/lib/talons/Checkout/use
  */
 const PaymentsFormItems = props => {
     const { classes, countries, onCancel } = props;
+
     const {
         addressDiffers,
-        anchorRef,
         handleError,
         handleSuccess,
         isDisabled,
         isSubmitting,
         setIsReady
     } = usePaymentsFormItems(props);
 
+    const anchorRef = useRef(null);
+    // When the address checkbox is unchecked, additional fields are rendered.
+    // This causes the form to grow, and potentially to overflow, so the new
+    // fields may go unnoticed. To reveal them, we scroll them into view.
+    useEffect(() => {
+        if (addressDiffers) {
+            const { current: element } = anchorRef;
+
+            if (element instanceof HTMLElement) {
+                element.scrollIntoView({ behavior: 'smooth' });
+            }
+        }
+    }, [addressDiffers]);
+
     const billingAddressFields = addressDiffers ? (
         <Fragment>
             <div className={classes.firstname}>

yarn.lock

@@ -5807,7 +5807,7 @@ cross-spawn@^4.0.2:
     lru-cache "^4.0.1"
     which "^1.2.9"
 
-cross-spawn@^5.0.1:
+cross-spawn@^5.0.1, cross-spawn@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
   integrity sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=
@@ -8365,13 +8365,20 @@ graphql-upload@^8.0.2:
     http-errors "^1.7.2"
     object-path "^0.11.4"
 
-graphql@14.3.1, graphql@^0.13.1, graphql@^14.0.0, graphql@^14.0.2, graphql@~14.3.1:
+graphql@14.3.1, graphql@^14.0.0, graphql@^14.0.2, graphql@~14.3.1:
   version "14.3.1"
   resolved "https://registry.yarnpkg.com/graphql/-/graphql-14.3.1.tgz#b3aa50e61a841ada3c1f9ccda101c483f8e8c807"
   integrity sha512-FZm7kAa3FqKdXy8YSSpAoTtyDFMIYSpCDOr+3EqlI1bxmtHu+Vv/I2vrSeT1sBOEnEniX3uo4wFhFdS/8XN6gA==
   dependencies:
     iterall "^1.2.2"
 
+graphql@^0.13.1:
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.13.2.tgz#4c740ae3c222823e7004096f832e7b93b2108270"
+  integrity sha512-QZ5BL8ZO/B20VA8APauGBg3GyEgZ19eduvpLWoq5x7gMmWnHoy8rlQWPLmWgFvo1yNgjSEFMesmS4R6pPr7xog==
+  dependencies:
+    iterall "^1.2.1"
+
 "growl@~> 1.10.0":
   version "1.10.5"
   resolved "https://registry.yarnpkg.com/growl/-/growl-1.10.5.tgz#f2735dc2283674fa67478b10181059355c369e5e"
@@ -11619,7 +11626,7 @@ npm-packlist@^1.1.12, npm-packlist@^1.1.6, npm-packlist@^1.4.1:
     ignore-walk "^3.0.1"
     npm-bundled "^1.0.1"
 
-npm-path@^2.0.2, npm-path@^2.0.4:
+npm-path@^2.0.2, npm-path@^2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/npm-path/-/npm-path-2.0.4.tgz#c641347a5ff9d6a09e4d9bce5580c4f505278e64"
   integrity sha512-IFsj0R9C7ZdR5cP+ET342q77uSRdtWOlWpih5eC+lu29tIDbNEgDbzgVJ5UFvYHWhxDZ5TFkJafFioO0pPQjCw==
@@ -11674,15 +11681,17 @@ npm-run-path@^2.0.0:
   dependencies:
     path-key "^2.0.0"
 
-npm-run@4.1.2, npm-run@~5.0.0:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/npm-run/-/npm-run-5.0.1.tgz#1baea93389b50ae25a32382c8ca322398e50cd16"
-  integrity sha512-s7FyRpHUgaJfzkRgOnevX8rAWWsv1dofY1XS7hliWCF6LSQh+HtDfBvpigPS1krLvXw+Fi17CYMY8mUtblnyWw==
+npm-run@4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/npm-run/-/npm-run-4.1.2.tgz#1030e1ec56908c89fcc3fa366d03a2c2ba98eb99"
+  integrity sha1-EDDh7FaQjIn8w/o2bQOiwrqY65k=
   dependencies:
+    cross-spawn "^5.1.0"
     minimist "^1.2.0"
-    npm-path "^2.0.4"
+    npm-path "^2.0.3"
     npm-which "^3.0.1"
     serializerr "^1.0.3"
+    sync-exec "^0.6.2"
 
 npm-which@^3.0.1:
   version "3.0.1"
@@ -15150,6 +15159,11 @@ symbol.prototype.description@^1.0.0:
   dependencies:
     has-symbols "^1.0.0"
 
+sync-exec@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/sync-exec/-/sync-exec-0.6.2.tgz#717d22cc53f0ce1def5594362f3a89a2ebb91105"
+  integrity sha1-cX0izFPwzh3vVZQ2LzqJouu5EQU=
+
 table@^5.2.3:
   version "5.4.4"
   resolved "https://registry.yarnpkg.com/table/-/table-5.4.4.tgz#6e0f88fdae3692793d1077fd172a4667afe986a6"