From a4f2c5abd4361f6f2ecccf1b54ec3035c76adfce Mon Sep 17 00:00:00 2001
From: Dan Ribbens <DanRibbens@users.noreply.github.com>
Date: Tue, 12 Apr 2022 11:26:55 -0400
Subject: [PATCH] chore: update react 18 (#520)

* chore: update to react 18 and related dependencies
---
 package.json                                  |  6 +-
 src/admin/components/elements/Button/types.ts |  2 +-
 src/admin/components/elements/Pill/types.ts   |  1 +
 .../components/elements/StepNav/index.tsx     |  2 +-
 .../forms/FieldTypeGutter/context.tsx         |  2 +-
 .../components/forms/FieldTypeGutter/types.ts |  2 +
 src/admin/components/forms/Form/types.ts      |  2 +
 .../forms/field-types/RichText/RichText.tsx   |  1 -
 .../field-types/RichText/elements/types.ts    |  1 +
 .../components/templates/Default/types.ts     |  5 +-
 .../components/templates/Minimal/types.ts     |  1 +
 .../utilities/CustomProvider/index.tsx        |  2 +-
 .../utilities/DocumentInfo/types.ts           |  2 +
 .../components/utilities/Locale/index.tsx     |  2 +-
 .../utilities/Preferences/index.tsx           |  2 +-
 .../utilities/SearchParams/index.tsx          |  2 +-
 .../RenderFieldsToDiff/Label/index.tsx        |  2 +-
 .../components/views/Versions/columns.tsx     |  2 +-
 yarn.lock                                     | 75 ++++++++++---------
 19 files changed, 65 insertions(+), 49 deletions(-)

diff --git a/package.json b/package.json
index ea0e539de6..8d4367c600 100644
--- a/package.json
+++ b/package.json
@@ -152,12 +152,12 @@
     "process": "^0.11.10",
     "qs": "^6.9.1",
     "qs-middleware": "^1.0.3",
-    "react": "^17.0.2",
+    "react": "^18.0.0",
     "react-animate-height": "^2.0.20",
     "react-beautiful-dnd": "^13.0.0",
     "react-datepicker": "^3.3.0",
     "react-diff-viewer": "^3.1.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.0.0",
     "react-helmet": "^6.1.0",
     "react-router-dom": "^5.1.2",
     "react-router-navigation-prompt": "^1.8.11",
@@ -186,7 +186,7 @@
   "devDependencies": {
     "@release-it/conventional-changelog": "^2.0.0",
     "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.0.4",
+    "@testing-library/react": "^13.0.1",
     "@trbl/eslint-config": "^1.2.4",
     "@types/asap": "^2.0.0",
     "@types/babel__core": "^7.1.12",
diff --git a/src/admin/components/elements/Button/types.ts b/src/admin/components/elements/Button/types.ts
index 2ddce72171..3512c5c848 100644
--- a/src/admin/components/elements/Button/types.ts
+++ b/src/admin/components/elements/Button/types.ts
@@ -1,4 +1,4 @@
-import { MouseEvent } from 'react';
+import React, { MouseEvent } from 'react';
 
 export type Props = {
   className?: string,
diff --git a/src/admin/components/elements/Pill/types.ts b/src/admin/components/elements/Pill/types.ts
index 8010655e78..a4b045e785 100644
--- a/src/admin/components/elements/Pill/types.ts
+++ b/src/admin/components/elements/Pill/types.ts
@@ -1,4 +1,5 @@
 export type Props = {
+  children?: React.ReactNode,
   className?: string,
   to?: string,
   icon?: React.ReactNode,
diff --git a/src/admin/components/elements/StepNav/index.tsx b/src/admin/components/elements/StepNav/index.tsx
index c16ac8afa1..497acacfdc 100644
--- a/src/admin/components/elements/StepNav/index.tsx
+++ b/src/admin/components/elements/StepNav/index.tsx
@@ -9,7 +9,7 @@ import './index.scss';
 
 const Context = createContext({} as ContextType);
 
-const StepNavProvider: React.FC = ({ children }) => {
+const StepNavProvider: React.FC<{children?: React.ReactNode}> = ({ children }) => {
   const [stepNav, setStepNav] = useState([]);
 
   return (
diff --git a/src/admin/components/forms/FieldTypeGutter/context.tsx b/src/admin/components/forms/FieldTypeGutter/context.tsx
index cea8ac0fda..6e6fd55bbf 100644
--- a/src/admin/components/forms/FieldTypeGutter/context.tsx
+++ b/src/admin/components/forms/FieldTypeGutter/context.tsx
@@ -4,7 +4,7 @@ import { useWindowInfo } from '@faceless-ui/window-info';
 const context = createContext(false);
 const { Provider } = context;
 
-export const NegativeFieldGutterProvider: React.FC<{allow?: boolean}> = ({ children, allow }) => {
+export const NegativeFieldGutterProvider: React.FC<{allow?: boolean, children?: React.ReactNode}> = ({ children, allow }) => {
   const { breakpoints: { m: midBreak } } = useWindowInfo();
 
   return (
diff --git a/src/admin/components/forms/FieldTypeGutter/types.ts b/src/admin/components/forms/FieldTypeGutter/types.ts
index 9f6ce76159..cccf9c2206 100644
--- a/src/admin/components/forms/FieldTypeGutter/types.ts
+++ b/src/admin/components/forms/FieldTypeGutter/types.ts
@@ -1,3 +1,4 @@
+import React from 'react';
 import { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
 
 export type Props = {
@@ -5,4 +6,5 @@ export type Props = {
   verticalAlignment?: 'top' | 'center' | 'sticky'
   dragHandleProps?: DraggableProvidedDragHandleProps
   className?: string
+  children?: React.ReactNode
 }
diff --git a/src/admin/components/forms/Form/types.ts b/src/admin/components/forms/Form/types.ts
index 2c2ef60e18..98d0638dbe 100644
--- a/src/admin/components/forms/Form/types.ts
+++ b/src/admin/components/forms/Form/types.ts
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Field as FieldConfig, Condition, Validate } from '../../../../fields/config/types';
 
 export type Field = {
@@ -39,6 +40,7 @@ export type Props = {
   waitForAutocomplete?: boolean
   log?: boolean
   validationOperation?: 'create' | 'update'
+  children?: React.ReactNode
 }
 
 export type SubmitOptions = {
diff --git a/src/admin/components/forms/field-types/RichText/RichText.tsx b/src/admin/components/forms/field-types/RichText/RichText.tsx
index b76a3bd5d1..ded230d7d0 100644
--- a/src/admin/components/forms/field-types/RichText/RichText.tsx
+++ b/src/admin/components/forms/field-types/RichText/RichText.tsx
@@ -3,7 +3,6 @@ import isHotkey from 'is-hotkey';
 import { createEditor, Transforms, Node, Element as SlateElement, Text, BaseEditor } from 'slate';
 import { ReactEditor, Editable, withReact, Slate } from 'slate-react';
 import { HistoryEditor, withHistory } from 'slate-history';
-import { options } from 'joi';
 import { richText } from '../../../../../fields/validations';
 import useField from '../../useField';
 import withCondition from '../../withCondition';
diff --git a/src/admin/components/forms/field-types/RichText/elements/types.ts b/src/admin/components/forms/field-types/RichText/elements/types.ts
index 836ce8a5d5..a1cff922fa 100644
--- a/src/admin/components/forms/field-types/RichText/elements/types.ts
+++ b/src/admin/components/forms/field-types/RichText/elements/types.ts
@@ -2,4 +2,5 @@ export type ButtonProps = {
   format: string
   onClick?: (e: React.MouseEvent) => void
   className?: string
+  children?: React.ReactNode
 }
diff --git a/src/admin/components/templates/Default/types.ts b/src/admin/components/templates/Default/types.ts
index 8f2da3ac4b..a1b3349c92 100644
--- a/src/admin/components/templates/Default/types.ts
+++ b/src/admin/components/templates/Default/types.ts
@@ -1,3 +1,6 @@
+import React from 'react';
+
 export type Props = {
-  className?: string,
+  className?: string
+  children?: React.ReactNode
 };
diff --git a/src/admin/components/templates/Minimal/types.ts b/src/admin/components/templates/Minimal/types.ts
index 43b37a1af5..3cd1559cb3 100644
--- a/src/admin/components/templates/Minimal/types.ts
+++ b/src/admin/components/templates/Minimal/types.ts
@@ -4,4 +4,5 @@ export type Props = {
   className?: string,
   width?: 'normal' | 'wide'
   style?: React.CSSProperties
+  children?: React.ReactNode
 };
diff --git a/src/admin/components/utilities/CustomProvider/index.tsx b/src/admin/components/utilities/CustomProvider/index.tsx
index 1e4817b272..b07dc1a253 100644
--- a/src/admin/components/utilities/CustomProvider/index.tsx
+++ b/src/admin/components/utilities/CustomProvider/index.tsx
@@ -21,7 +21,7 @@ const NestProviders = ({ providers, children }) => {
   );
 };
 
-export const CustomProvider: React.FC<{ children }> = ({ children }) => {
+export const CustomProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const config = useConfig();
 
   const {
diff --git a/src/admin/components/utilities/DocumentInfo/types.ts b/src/admin/components/utilities/DocumentInfo/types.ts
index e21f4d21c3..f5fafd0f11 100644
--- a/src/admin/components/utilities/DocumentInfo/types.ts
+++ b/src/admin/components/utilities/DocumentInfo/types.ts
@@ -1,3 +1,4 @@
+import React from 'react';
 import { SanitizedCollectionConfig, TypeWithID, TypeWithTimestamps } from '../../../../collections/config/types';
 import { SanitizedGlobalConfig } from '../../../../globals/config/types';
 import { PaginatedDocs } from '../../../../mongoose/types';
@@ -21,4 +22,5 @@ export type Props = {
   collection?: SanitizedCollectionConfig
   global?: SanitizedGlobalConfig
   id?: string | number
+  children?: React.ReactNode
 }
diff --git a/src/admin/components/utilities/Locale/index.tsx b/src/admin/components/utilities/Locale/index.tsx
index b52921fad0..bb2867c5fe 100644
--- a/src/admin/components/utilities/Locale/index.tsx
+++ b/src/admin/components/utilities/Locale/index.tsx
@@ -7,7 +7,7 @@ import { useSearchParams } from '../SearchParams';
 
 const Context = createContext('');
 
-export const LocaleProvider: React.FC = ({ children }) => {
+export const LocaleProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
   const { localization } = useConfig();
   const { user } = useAuth();
   const defaultLocale = (localization && localization.defaultLocale) ? localization.defaultLocale : 'en';
diff --git a/src/admin/components/utilities/Preferences/index.tsx b/src/admin/components/utilities/Preferences/index.tsx
index 1a3a023869..d8aef0ec0a 100644
--- a/src/admin/components/utilities/Preferences/index.tsx
+++ b/src/admin/components/utilities/Preferences/index.tsx
@@ -17,7 +17,7 @@ const requestOptions = (value) => ({
   },
 });
 
-export const PreferencesProvider: React.FC = ({ children }) => {
+export const PreferencesProvider: React.FC<{children?: React.ReactNode}> = ({ children }) => {
   const contextRef = useRef({} as PreferencesContext);
   const preferencesRef = useRef({});
   const config = useConfig();
diff --git a/src/admin/components/utilities/SearchParams/index.tsx b/src/admin/components/utilities/SearchParams/index.tsx
index 6b6062f1bd..e083ba54f3 100644
--- a/src/admin/components/utilities/SearchParams/index.tsx
+++ b/src/admin/components/utilities/SearchParams/index.tsx
@@ -4,7 +4,7 @@ import qs from 'qs';
 
 const Context = createContext({});
 
-export const SearchParamsProvider: React.FC = ({ children }) => {
+export const SearchParamsProvider: React.FC<{children?: React.ReactNode}> = ({ children }) => {
   const location = useLocation();
 
   const params = qs.parse(
diff --git a/src/admin/components/views/Version/RenderFieldsToDiff/Label/index.tsx b/src/admin/components/views/Version/RenderFieldsToDiff/Label/index.tsx
index c4572488e2..147b13198d 100644
--- a/src/admin/components/views/Version/RenderFieldsToDiff/Label/index.tsx
+++ b/src/admin/components/views/Version/RenderFieldsToDiff/Label/index.tsx
@@ -4,7 +4,7 @@ import './index.scss';
 
 const baseClass = 'field-diff-label';
 
-const Label: React.FC = ({ children }) => (
+const Label: React.FC<{children?: React.ReactNode}> = ({ children }) => (
   <div className={baseClass}>
     {children}
   </div>
diff --git a/src/admin/components/views/Versions/columns.tsx b/src/admin/components/views/Versions/columns.tsx
index 6bd4f03127..5f2c50ef2f 100644
--- a/src/admin/components/views/Versions/columns.tsx
+++ b/src/admin/components/views/Versions/columns.tsx
@@ -31,7 +31,7 @@ const CreatedAtCell: React.FC<CreatedAtCellProps> = ({ collection, global, id, d
   );
 };
 
-const TextCell: React.FC = ({ children }) => (
+const TextCell: React.FC<{children?: React.ReactNode}> = ({ children }) => (
   <span>
     {children}
   </span>
diff --git a/yarn.lock b/yarn.lock
index fbac627a9d..2dd15264ba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1641,20 +1641,6 @@
   dependencies:
     defer-to-connect "^2.0.0"
 
-"@testing-library/dom@^7.28.1":
-  version "7.31.2"
-  resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-7.31.2.tgz#df361db38f5212b88555068ab8119f5d841a8c4a"
-  integrity sha512-3UqjCpey6HiTZT92vODYLPxTBWlM8ZOOjr3LX5F37/VRipW2M1kX6I/Cm4VXzteZqfGfagg8yXywpcOgQBlNsQ==
-  dependencies:
-    "@babel/code-frame" "^7.10.4"
-    "@babel/runtime" "^7.12.5"
-    "@types/aria-query" "^4.2.0"
-    aria-query "^4.2.2"
-    chalk "^4.1.0"
-    dom-accessibility-api "^0.5.6"
-    lz-string "^1.4.4"
-    pretty-format "^26.6.2"
-
 "@testing-library/dom@^8.11.1":
   version "8.11.3"
   resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-8.11.3.tgz#38fd63cbfe14557021e88982d931e33fb7c1a808"
@@ -1669,6 +1655,20 @@
     lz-string "^1.4.4"
     pretty-format "^27.0.2"
 
+"@testing-library/dom@^8.5.0":
+  version "8.13.0"
+  resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-8.13.0.tgz#bc00bdd64c7d8b40841e27a70211399ad3af46f5"
+  integrity sha512-9VHgfIatKNXQNaZTtLnalIy0jNZzY35a4S3oi08YAt9Hv1VsfZ/DfA45lM8D/UhtHBGJ4/lGwp0PZkVndRkoOQ==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/runtime" "^7.12.5"
+    "@types/aria-query" "^4.2.0"
+    aria-query "^5.0.0"
+    chalk "^4.1.0"
+    dom-accessibility-api "^0.5.9"
+    lz-string "^1.4.4"
+    pretty-format "^27.0.2"
+
 "@testing-library/jest-dom@^5.11.4":
   version "5.16.1"
   resolved "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.1.tgz#3db7df5ae97596264a7da9696fe14695ba02e51f"
@@ -1684,13 +1684,14 @@
     lodash "^4.17.15"
     redent "^3.0.0"
 
-"@testing-library/react@^11.0.4":
-  version "11.2.7"
-  resolved "https://registry.npmjs.org/@testing-library/react/-/react-11.2.7.tgz#b29e2e95c6765c815786c0bc1d5aed9cb2bf7818"
-  integrity sha512-tzRNp7pzd5QmbtXNG/mhdcl7Awfu/Iz1RaVHY75zTdOkmHCuzMhRL83gWHSgOAcjS3CCbyfwUHMZgRJb4kAfpA==
+"@testing-library/react@^13.0.1":
+  version "13.0.1"
+  resolved "https://registry.npmjs.org/@testing-library/react/-/react-13.0.1.tgz#00d223e182923d341a9610590561fb9dd1324110"
+  integrity sha512-zeHx3PohYYp+4bTJwrixQY8zSBZjWUGwYc7OhD1EpWTHS92RleApLoP72NdwaWxOrM1P1Uezt3XvGf6t2XSWPQ==
   dependencies:
     "@babel/runtime" "^7.12.5"
-    "@testing-library/dom" "^7.28.1"
+    "@testing-library/dom" "^8.5.0"
+    "@types/react-dom" "^18.0.0"
 
 "@tootallnate/once@1":
   version "1.1.2"
@@ -2312,6 +2313,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-dom@^18.0.0":
+  version "18.0.0"
+  resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.0.tgz#b13f8d098e4b0c45df4f1ed123833143b0c71141"
+  integrity sha512-49897Y0UiCGmxZqpC8Blrf6meL8QUla6eb+BBhn69dTXlmuOlzkfr7HHY/O8J25e1lTUMs+YYxSlVDAaGHCOLg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-helmet@^6.1.0":
   version "6.1.5"
   resolved "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.5.tgz#35f89a6b1646ee2bc342a33a9a6c8777933f9083"
@@ -10548,14 +10556,13 @@ react-diff-viewer@^3.1.1:
     memoize-one "^5.0.4"
     prop-types "^15.6.2"
 
-react-dom@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
-  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+react-dom@^18.0.0:
+  version "18.0.0"
+  resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.0.0.tgz#26b88534f8f1dbb80853e1eabe752f24100d8023"
+  integrity sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.20.2"
+    scheduler "^0.21.0"
 
 react-fast-compare@^3.1.1:
   version "3.2.0"
@@ -10694,13 +10701,12 @@ react-transition-group@^4.3.0, react-transition-group@^4.4.2:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+react@^18.0.0:
+  version "18.0.0"
+  resolved "https://registry.npmjs.org/react/-/react-18.0.0.tgz#b468736d1f4a5891f38585ba8e8fb29f91c3cb96"
+  integrity sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 read-pkg-up@^3.0.0:
   version "3.0.0"
@@ -11245,13 +11251,12 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.20.2:
-  version "0.20.2"
-  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
-  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+scheduler@^0.21.0:
+  version "0.21.0"
+  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz#6fd2532ff5a6d877b6edb12f00d8ab7e8f308820"
+  integrity sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 schema-utils@^2.6.5:
   version "2.7.1"