chore(react): upgrade React typings to use a more explicit children prop declaration

packages/auth/src/AuthProvider.tsx

@@ -76,7 +76,7 @@ export const AuthContext = React.createContext<AuthContextInterface>({
   hasError: false,
 })
 
-type AuthProviderProps =
+type AuthProviderProps = (
   | {
       client: SupportedAuthClients
       type: Omit<SupportedAuthTypes, 'dbAuth' | 'clerk'>
@@ -95,6 +95,7 @@ type AuthProviderProps =
       config?: SupportedAuthConfig
       skipFetchCurrentUser?: boolean
     }
+) & { children?: React.ReactNode }
 
 type AuthProviderState = {
   loading: boolean

packages/router/src/location.tsx

@@ -18,6 +18,7 @@ interface LocationProviderProps {
     hash?: string
   }
   trailingSlashes?: TrailingSlashesTypes
+  children?: React.ReactNode
 }
 
 class LocationProvider extends React.Component<LocationProviderProps> {

packages/router/src/params.tsx

@@ -13,6 +13,7 @@ export const ParamsContext = createNamedContext<ParamsContextProps>('Params')
 interface Props {
   path?: string
   location?: LocationContextType
+  children?: React.ReactNode
 }
 
 export const ParamsProvider: React.FC<Props> = ({

packages/router/src/router-context.tsx

@@ -22,6 +22,7 @@ const RouterSetContext = createContext<
 export interface RouterContextProviderProps
   extends Omit<RouterState, 'useAuth'> {
   useAuth?: typeof useAuth
+  children?: React.ReactNode
 }
 
 function stateReducer(state: RouterState, newState: Partial<RouterState>) {

packages/router/src/router.tsx

@@ -131,9 +131,10 @@ function isRoute(
   return isReactElement(node) && node.type === Route
 }
 
-interface RouterProps extends RouterContextProviderProps {
+export interface RouterProps extends RouterContextProviderProps {
   trailingSlashes?: TrailingSlashesTypes
   pageLoadingDelay?: number
+  children?: React.ReactNode
 }
 
 const Router: React.FC<RouterProps> = ({

packages/testing/src/web/MockParamsProvider.tsx

@@ -4,6 +4,7 @@ import { useLocation, ParamsContext, parseSearch } from '@redwoodjs/router'
 
 interface Props {
   path?: string
+  children?: React.ReactNode
 }
 
 export const MockParamsProvider: React.FC<Props> = ({ children }) => {

packages/testing/src/web/MockProviders.tsx

@@ -60,7 +60,10 @@ export const mockAuthClient: AuthClient = {
   type: 'custom',
 }
 
-export const MockProviders: React.FunctionComponent = ({ children }) => {
+// TODO(pc): see if there are props we want to allow to be passed into our mock provider (e.g. AuthProviderProps)
+export const MockProviders: React.FunctionComponent<{
+  children?: React.ReactNode
+}> = ({ children }) => {
   return (
     <AuthProvider client={mockAuthClient} type="custom">
       <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">

packages/testing/src/web/MockRouter.tsx

@@ -5,7 +5,7 @@ import React from 'react'
 // for jest and Storybook. Not doing so would cause an infinite loop.
 // See: ./packages/core/config/src/configs/browser/jest.createConfig.ts
 // @ts-ignore
-import { isRoute } from '@redwoodjs/router/dist/router'
+import { isRoute, RouterProps } from '@redwoodjs/router/dist/router'
 import { flattenAll, replaceParams } from '@redwoodjs/router/dist/util'
 // @ts-ignore
 export * from '@redwoodjs/router/dist/index'
@@ -16,7 +16,7 @@ export const routes: { [routeName: string]: () => string } = {}
  * We overwrite the default `Router` export.
  * It populates the `routes.<pagename>()` utility object.
  */
-export const Router: React.FunctionComponent = ({ children }) => {
+export const Router: React.FunctionComponent<RouterProps> = ({ children }) => {
   const flatChildArray = flattenAll(children)
 
   flatChildArray.forEach((child) => {

packages/web/src/apollo/index.tsx

@@ -97,6 +97,7 @@ const ApolloProviderWithFetchConfig: React.FunctionComponent<{
   }
   useAuth: UseAuthProp
   logLevel: F.Return<typeof setLogVerbosity>
+  children?: React.ReactNode
 }> = ({ config, children, useAuth, logLevel }) => {
   /**
    * Should they run into it,
@@ -255,6 +256,7 @@ type ComponentDidCatch = React.ComponentLifecycle<any, any>['componentDidCatch']
 interface ErrorBoundaryProps {
   error?: unknown
   onError: NonNullable<ComponentDidCatch>
+  children?: React.ReactNode
 }
 
 class ErrorBoundary extends React.Component<ErrorBoundaryProps> {
@@ -272,6 +274,7 @@ export const RedwoodApolloProvider: React.FunctionComponent<{
   graphQLClientConfig?: GraphQLClientConfigProp
   useAuth?: UseAuthProp
   logLevel?: F.Return<typeof setLogVerbosity>
+  children?: React.ReactNode
 }> = ({
   graphQLClientConfig,
   useAuth = useRWAuth,

packages/web/src/components/FetchConfigProvider.tsx

@@ -24,6 +24,7 @@ type UseAuthType = () => AuthContextInterface
  */
 export const FetchConfigProvider: React.FunctionComponent<{
   useAuth?: UseAuthType
+  children?: React.ReactNode
 }> = ({
   useAuth = global.__REDWOOD__USE_AUTH ?? (() => defaultAuthState),
   ...rest