Upgrade React from 16.13.1 to 17.0.1

.eslintrc

@@ -37,6 +37,8 @@
     "react/jsx-indent": "off",
     "react/jsx-one-expression-per-line": "off",
     "react/jsx-wrap-multilines": "off",
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
     "react/prop-types": "off",
     "require-await": "error"
   },

app/javascript/packages/components/alert.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 /** @typedef {import('react').ReactNode} ReactNode */
 
 /**

app/javascript/packages/components/icon.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 /**
  * @typedef IconProps
  *

app/javascript/packages/components/package.json

@@ -3,6 +3,6 @@
   "private": true,
   "version": "1.0.0",
   "dependencies": {
-    "react": "^16.13.1"
+    "react": "^17.0.1"
   }
 }

app/javascript/packages/document-capture/components/acuant-capture-canvas.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from 'react';
+import { useContext, useEffect } from 'react';
 import AcuantContext from '../context/acuant';
 import useAsset from '../hooks/use-asset';
 import useI18n from '../hooks/use-i18n';

app/javascript/packages/document-capture/components/acuant-capture.jsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   forwardRef,
   useContext,
   useRef,

app/javascript/packages/document-capture/components/button.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 /** @typedef {import('react').MouseEvent} ReactMouseEvent */
 /** @typedef {import('react').ReactNode} ReactNode */
 /** @typedef {"button"|"reset"|"submit"} ButtonType */

app/javascript/packages/document-capture/components/desktop-document-disclosure.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import DeviceContext from '../context/device';
 import useI18n from '../hooks/use-i18n';
 

app/javascript/packages/document-capture/components/document-capture.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useContext } from 'react';
+import { useState, useMemo, useContext } from 'react';
 import { Alert } from '@18f/identity-components';
 import FormSteps from './form-steps';
 import { UploadFormEntriesError } from '../services/upload';

app/javascript/packages/document-capture/components/documents-step.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import AcuantCapture from './acuant-capture';
 import FormErrorMessage from './form-error-message';
 import useI18n from '../hooks/use-i18n';

app/javascript/packages/document-capture/components/file-image.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState, useEffect } from 'react';
+import { useContext, useState, useEffect } from 'react';
 import useIfStillMounted from '../hooks/use-if-still-mounted';
 import FileBase64CacheContext from '../context/file-base64-cache';
 

app/javascript/packages/document-capture/components/file-input.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState, useMemo, forwardRef } from 'react';
+import { useContext, useState, useMemo, forwardRef } from 'react';
 import FileImage from './file-image';
 import DeviceContext from '../context/device';
 import useInstanceId from '../hooks/use-instance-id';

app/javascript/packages/document-capture/components/form-error-message.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { UploadFormEntryError } from '../services/upload';
 import useI18n from '../hooks/use-i18n';
 

app/javascript/packages/document-capture/components/form-steps.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Alert } from '@18f/identity-components';
 import Button from './button';
 import PageHeading from './page-heading';

app/javascript/packages/document-capture/components/full-screen.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useCallback } from 'react';
+import { useRef, useEffect, useCallback } from 'react';
 import { createFocusTrap } from 'focus-trap';
 import useI18n from '../hooks/use-i18n';
 import useAsset from '../hooks/use-asset';

app/javascript/packages/document-capture/components/mobile-intro-step.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import ServiceProviderContext from '../context/service-provider';
 import useI18n from '../hooks/use-i18n';
 

app/javascript/packages/document-capture/components/page-heading.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 
 /**
  * @typedef PageHeadingProps

app/javascript/packages/document-capture/components/review-issues-step.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import { hasMediaAccess } from '@18f/identity-device';
 import useI18n from '../hooks/use-i18n';
 import DeviceContext from '../context/device';

app/javascript/packages/document-capture/components/selfie-capture.jsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   forwardRef,
   useRef,
   useState,

app/javascript/packages/document-capture/components/selfie-step.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import { hasMediaAccess } from '@18f/identity-device';
 import useI18n from '../hooks/use-i18n';
 import DeviceContext from '../context/device';

app/javascript/packages/document-capture/components/submission-complete.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext, useRef } from 'react';
+import { useState, useContext, useRef } from 'react';
 import SubmissionInterstitial from './submission-interstitial';
 import CallbackOnMount from './callback-on-mount';
 import UploadContext from '../context/upload';

app/javascript/packages/document-capture/components/submission-interstitial.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react';
+import { useRef, useEffect } from 'react';
 import useI18n from '../hooks/use-i18n';
 import useAsset from '../hooks/use-asset';
 import PageHeading from './page-heading';

app/javascript/packages/document-capture/components/submission-status.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import useAsync from '../hooks/use-async';
 import UploadContext from '../context/upload';
 import SubmissionComplete from './submission-complete';

app/javascript/packages/document-capture/components/submission.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import useAsync from '../hooks/use-async';
 import UploadContext from '../context/upload';
 import SubmissionComplete from './submission-complete';

app/javascript/packages/document-capture/components/suspense-error-boundary.jsx

@@ -1,4 +1,4 @@
-import React, { Component, Suspense } from 'react';
+import { Component, Suspense } from 'react';
 
 /** @typedef {import('react').ReactNode} ReactNode */
 /** @typedef {import('react').FunctionComponent} FunctionComponent */

app/javascript/packages/document-capture/context/acuant.jsx

@@ -1,4 +1,4 @@
-import React, { createContext, useMemo, useEffect, useState } from 'react';
+import { createContext, useMemo, useEffect, useState } from 'react';
 
 /** @typedef {import('react').ReactNode} ReactNode */
 

app/javascript/packages/document-capture/context/upload.jsx

@@ -1,4 +1,4 @@
-import React, { createContext, useMemo } from 'react';
+import { createContext, useMemo } from 'react';
 import defaultUpload from '../services/upload';
 
 const UploadContext = createContext({

app/javascript/packages/document-capture/higher-order/with-background-encrypted-upload.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import UploadContext from '../context/upload';
 
 /**

app/javascript/packages/document-capture/package.json

@@ -4,6 +4,6 @@
   "version": "1.0.0",
   "dependencies": {
     "focus-trap": "^6.1.3",
-    "react": "^16.13.1"
+    "react": "^17.0.1"
   }
 }

app/javascript/packs/document-capture.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from 'react-dom';
 import {
   DocumentCapture,

babel.config.js

@@ -17,7 +17,12 @@ module.exports = function (api) {
 
   return {
     presets: [
-      '@babel/preset-react',
+      [
+        '@babel/preset-react',
+        {
+          runtime: 'automatic',
+        },
+      ],
       isTestEnv && [
         '@babel/preset-env',
         {

package.json

@@ -27,8 +27,8 @@
     "intl-tel-input": "^16.0.7",
     "libphonenumber-js": "^1.7.26",
     "normalize.css": "^4.2.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "uswds": "^2.8.0",
     "zxcvbn": "^4.4.2"
   },
@@ -42,28 +42,28 @@
     "@babel/register": "^7.12.1",
     "@peculiar/webcrypto": "^1.1.3",
     "@rails/webpacker": "^5.2.1",
-    "@testing-library/dom": "^7.21.8",
-    "@testing-library/react": "^10.4.8",
-    "@testing-library/react-hooks": "^3.4.1",
-    "@testing-library/user-event": "^12.0.11",
-    "@types/react": "^16.9.49",
+    "@testing-library/dom": "^7.28.0",
+    "@testing-library/react": "^11.2.1",
+    "@testing-library/react-hooks": "^3.4.2",
+    "@testing-library/user-event": "^12.2.2",
+    "@types/react": "^16.9.56",
     "chai": "^3.5.0",
     "dirty-chai": "^1.2.2",
     "eslint": "^7.6.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.20.3",
-    "eslint-plugin-react-hooks": "^4.0.6",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "jsdom": "^16.2.2",
     "mocha": "^8.1.3",
     "postcss-clean": "^1.1.0",
     "prettier": "^2.0.5",
-    "react-test-renderer": "^16.13.1",
+    "react-test-renderer": "^17.0.1",
     "sinon": "^9.0.2",
     "source-map-loader": "^1.1.0",
-    "typescript": "^4.0.3",
+    "typescript": "^4.1.2",
     "webpack-dev-server": "^3.11.0"
   }
 }

spec/javascripts/packages/components/alert-spec.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Alert } from '@18f/identity-components';
 import { render } from '../../support/document-capture';
 

spec/javascripts/packages/document-capture/components/acuant-capture-canvas-spec.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Provider as AcuantContextProvider } from '@18f/identity-document-capture/context/acuant';
 import AcuantCaptureCanvas from '@18f/identity-document-capture/components/acuant-capture-canvas';
 import { render, useAcuant } from '../../../support/document-capture';

spec/javascripts/packages/document-capture/components/acuant-capture-spec.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import sinon from 'sinon';
 import { fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';

spec/javascripts/packages/document-capture/components/button-spec.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import sinon from 'sinon';
 import userEvent from '@testing-library/user-event';
 import Button from '@18f/identity-document-capture/components/button';

spec/javascripts/packages/document-capture/components/callback-on-mount-spec.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import sinon from 'sinon';
 import { render } from '@testing-library/react';
 import CallbackOnMount from '@18f/identity-document-capture/components/callback-on-mount';

spec/javascripts/packages/document-capture/components/desktop-document-disclosure-spec.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { DeviceContext } from '@18f/identity-document-capture';
 import DesktopDocumentDisclosure from '@18f/identity-document-capture/components/desktop-document-disclosure';
 import { render } from '../../../support/document-capture';

spec/javascripts/packages/document-capture/components/document-capture-spec.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import sinon from 'sinon';
 import userEvent from '@testing-library/user-event';
 import { waitFor } from '@testing-library/dom';

spec/javascripts/packages/document-capture/components/documents-step-spec.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import userEvent from '@testing-library/user-event';
 import sinon from 'sinon';
 import DeviceContext from '@18f/identity-document-capture/context/device';

spec/javascripts/packages/document-capture/components/file-image-spec.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import FileImage from '@18f/identity-document-capture/components/file-image';
 import { render } from '../../../support/document-capture';
 

spec/javascripts/packages/document-capture/components/file-input-spec.jsx

@@ -1,4 +1,4 @@
-import React, { createRef } from 'react';
+import { createRef } from 'react';
 import sinon from 'sinon';
 import userEvent from '@testing-library/user-event';
 import { fireEvent } from '@testing-library/react';

spec/javascripts/packages/document-capture/components/form-error-message-spec.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import FormErrorMessage, {
   RequiredValueMissingError,
 } from '@18f/identity-document-capture/components/form-error-message';

spec/javascripts/packages/document-capture/components/form-steps-spec.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { waitFor } from '@testing-library/dom';
 import sinon from 'sinon';

spec/javascripts/packages/document-capture/components/full-screen-spec.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import sinon from 'sinon';
 import FullScreen from '@18f/identity-document-capture/components/full-screen';

spec/javascripts/packages/document-capture/components/mobile-intro-step-spec.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { I18nContext, ServiceProviderContext } from '@18f/identity-document-capture';
 import MobileIntroStep from '@18f/identity-document-capture/components/mobile-intro-step';
 import { render } from '../../../support/document-capture';

spec/javascripts/packages/document-capture/components/page-heading-spec.jsx

@@ -1,4 +1,4 @@
-import React, { createRef } from 'react';
+import { createRef } from 'react';
 import PageHeading from '@18f/identity-document-capture/components/page-heading';
 import { render } from '../../../support/document-capture';
 

spec/javascripts/packages/document-capture/components/prompt-on-navigate-spec.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import PromptOnNavigate from '@18f/identity-document-capture/components/prompt-on-navigate';
 

spec/javascripts/packages/document-capture/components/review-issues-step-spec.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import userEvent from '@testing-library/user-event';
 import sinon from 'sinon';
 import { I18nContext, ServiceProviderContext } from '@18f/identity-document-capture';

spec/javascripts/packages/document-capture/components/selfie-capture-spec.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import sinon from 'sinon';
 import userEvent from '@testing-library/user-event';
 import { cleanup } from '@testing-library/react';

spec/javascripts/packages/document-capture/components/selfie-step-spec.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { waitFor } from '@testing-library/dom';
 import sinon from 'sinon';

spec/javascripts/packages/document-capture/components/submission-complete-spec.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import sinon from 'sinon';
 import { waitFor } from '@testing-library/dom';
 import useAsync from '@18f/identity-document-capture/hooks/use-async';

spec/javascripts/packages/document-capture/components/submission-interstitial-spec.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import SubmissionInterstitial from '@18f/identity-document-capture/components/submission-interstitial';
 

spec/javascripts/packages/document-capture/components/suspense-error-boundary-spec.jsx

@@ -1,4 +1,4 @@
-import React, { lazy, useState } from 'react';
+import { lazy, useState } from 'react';
 import sinon from 'sinon';
 import { waitFor } from '@testing-library/dom';
 import SuspenseErrorBoundary from '@18f/identity-document-capture/components/suspense-error-boundary';

spec/javascripts/packages/document-capture/context/acuant-spec.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import { renderHook } from '@testing-library/react-hooks';
 import AcuantContext, {
   Provider as AcuantContextProvider,

spec/javascripts/packages/document-capture/context/upload-spec.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import { renderHook } from '@testing-library/react-hooks';
 import UploadContext, {
   Provider as UploadContextProvider,

spec/javascripts/packages/document-capture/higher-order/with-background-encrypted-upload-spec.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import sinon from 'sinon';
 import { UploadContextProvider } from '@18f/identity-document-capture';
 import withBackgroundEncryptedUpload, {

spec/javascripts/packages/document-capture/hooks/use-asset-spec.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { renderHook } from '@testing-library/react-hooks';
 import useAsset from '@18f/identity-document-capture/hooks/use-asset';
 import AssetContext from '@18f/identity-document-capture/context/asset';

spec/javascripts/packages/document-capture/hooks/use-async-spec.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import sinon from 'sinon';
 import useAsync from '@18f/identity-document-capture/hooks/use-async';
 import SuspenseErrorBoundary from '@18f/identity-document-capture/components/suspense-error-boundary';

spec/javascripts/packages/document-capture/hooks/use-focus-fallback-ref-spec.jsx

@@ -1,4 +1,4 @@
-import React, { createRef } from 'react';
+import { createRef } from 'react';
 import sinon from 'sinon';
 import useFocusFallbackRef from '@18f/identity-document-capture/hooks/use-focus-fallback-ref';
 import { render } from '../../../support/document-capture';