chore: update react 18 (#520)

* chore: update to react 18 and related dependencies

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,

src/admin/components/elements/Pill/types.ts

@@ -1,4 +1,5 @@
 export type Props = {
+  children?: React.ReactNode,
   className?: string,
   to?: string,
   icon?: React.ReactNode,

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 (

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 (

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
 }

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 = {

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';

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
 }

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
 };

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
 };

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 {

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
 }

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';

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();

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(

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>

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>