Merge pull request #276 from commitd/stuarthendren/issue275

fix(componentsprovider): explicitly add children prop

Author: stuarthendren

src/components/ComponentsProvider/ComponentsProvider.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import React, { FC, PropsWithChildren } from 'react'
 import { ConditionalWrapper } from '../../utils'
 import { ThemeProvider, ThemeProviderProps } from '../ThemeProvider'
 import { ToastProvider, ToastViewport } from '../Toast'
@@ -51,13 +51,9 @@ export type ComponentsProviderProps = {
  * For each provider/component a configuration object can be passed with the relevant props.
  * To disable a particular provider set the configuration parameter to `false`.
  */
-export const ComponentsProvider: FC<ComponentsProviderProps> = ({
-  theme = {},
-  tooltip = {},
-  toast = {},
-  viewport = {},
-  children,
-}) => (
+export const ComponentsProvider: FC<
+  PropsWithChildren<ComponentsProviderProps>
+> = ({ theme = {}, tooltip = {}, toast = {}, viewport = {}, children }) => (
   <ConditionalWrapper
     condition={toast}
     wrapper={(wrappedChildren) => (

src/utils/test-utils.tsx

@@ -10,7 +10,7 @@ import '@testing-library/jest-dom'
 import '@testing-library/jest-dom/extend-expect'
 import { render, RenderOptions, RenderResult } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 import ResizeObserver from 'resize-observer-polyfill'
 import { ComponentsProvider } from '..'
 import './domrect-polyfill'
@@ -24,13 +24,13 @@ global.ResizeObserver = ResizeObserver
 // releasePointerCapture called by some radix components but not in js-dom
 global.HTMLElement.prototype.releasePointerCapture = () => undefined
 
-const LightTheme: React.FC = ({ children }) => (
+const LightTheme: React.FC<PropsWithChildren<unknown>> = ({ children }) => (
   <ComponentsProvider theme={{ choice: 'light' }}>
     {children}
   </ComponentsProvider>
 )
 
-const DarkTheme: React.FC = ({ children }) => (
+const DarkTheme: React.FC<PropsWithChildren<unknown>> = ({ children }) => (
   <ComponentsProvider theme={{ choice: 'dark' }}>{children}</ComponentsProvider>
 )