fix: fix issues with react 18 types and implicit children

Author: mainframev

packages/react-components/react-accordion/library/src/components/AccordionHeader/useAccordionHeader.test.tsx

@@ -9,7 +9,7 @@ import { mockAccordionContextValue, mockAccordionItemContextValue } from '../../
 describe('useAccordionHeader_unstable', () => {
   it('should return button props as disabled even when it is not disabled (forceDisabled)', () => {
     const ref = React.createRef<HTMLElement>();
-    const wrapper: React.FC = ({ children }) => (
+    const wrapper: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
       <AccordionProvider
         value={mockAccordionContextValue({
           openItems: [1],

packages/react-components/react-accordion/library/src/components/AccordionPanel/AccordionPanel.test.tsx

@@ -6,7 +6,7 @@ import { AccordionItemProvider } from '../../contexts/accordionItem';
 import { mockAccordionItemContextValue } from '../../testing/mockContextValue';
 
 describe('AccordionPanel', () => {
-  const Wrapper: React.FC = props => (
+  const Wrapper: React.FC<React.PropsWithChildren<unknown>> = props => (
     <AccordionItemProvider
       value={mockAccordionItemContextValue({
         open: true,

packages/react-components/react-context-selector/src/useContextSelector.test.tsx

@@ -16,7 +16,7 @@ const TestComponent: React.FC<{ index: number; onUpdate?: () => void }> = props
   return <div className="test-component" data-active={active} />;
 };
 
-const TestProvider: React.FC = props => {
+const TestProvider: React.FC<React.PropsWithChildren<unknown>> = props => {
   const [index, setIndex] = React.useState<number>(0);
 
   return (

packages/react-components/react-context-selector/src/useHasParentContext.test.tsx

@@ -8,7 +8,9 @@ const TestContext = createContext<number>(1);
 describe('useHasParentContext', () => {
   it('should return true if wrapped with context', () => {
     // Arrange
-    const wrapper: React.FC = ({ children }) => <TestContext.Provider value={1}>{children}</TestContext.Provider>;
+    const wrapper: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
+      <TestContext.Provider value={1}>{children}</TestContext.Provider>
+    );
     const { result } = renderHook(() => useHasParentContext(TestContext), { wrapper });
 
     // Assert

packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx

@@ -47,7 +47,7 @@ export const withFluentProvider = (StoryFn: () => JSX.Element, context: FluentSt
   );
 };
 
-const FluentExampleContainer: React.FC<{ theme: Theme }> = props => {
+const FluentExampleContainer: React.FC<{ theme: Theme; children: React.ReactNode }> = props => {
   const { theme } = props;
 
   const backgroundColor = theme.colorNeutralBackground2;

packages/react-components/react-tabster/src/hooks/useFocusVisible.test.tsx

@@ -20,7 +20,7 @@ const createDocumentMock = (): Document => {
 describe('useFocusVisible', () => {
   describe('targetWindow', () => {
     it('uses a window from context by default', () => {
-      const Wrapper: React.FC<{ targetDocument: Document | undefined }> = props => (
+      const Wrapper: React.FC<{ targetDocument: Document | undefined; children?: React.ReactNode }> = props => (
         <Provider_unstable value={{ dir: 'ltr', targetDocument: props.targetDocument }}>
           {props.children}
         </Provider_unstable>
@@ -49,7 +49,7 @@ describe('useFocusVisible', () => {
       const element = targetDocument.createElement('div');
 
       const { result, rerender } = renderHook<
-        { targetDocument: Document | undefined },
+        { targetDocument: Document | undefined; children?: React.ReactNode },
         React.MutableRefObject<HTMLElement | null>
       >(props => useFocusVisible({ targetDocument: props.targetDocument }), {
         wrapper: props => (

packages/react-components/react-toast/library/src/components/AriaLive/AriaLive.tsx

@@ -7,7 +7,7 @@ import type { AriaLiveProps } from './AriaLive.types';
 /**
  * A component that manages aria live announcements imperatively
  */
-export const AriaLive: React.FC<AriaLiveProps> = props => {
+export const AriaLive: React.FC<React.PropsWithChildren<AriaLiveProps>> = props => {
   const state = useAriaLive_unstable(props);
 
   useAriaLiveStyles_unstable(state);

packages/react-components/react-utilities/src/hooks/useId.test.tsx

@@ -41,7 +41,9 @@ describe('useId', () => {
 
   it('consumers prefix from a context', () => {
     const { result } = renderHook(() => useId(), {
-      wrapper: ({ children }) => <IdPrefixProvider value="scope-">{children}</IdPrefixProvider>,
+      wrapper: ({ children }: { children: React.ReactNode }) => (
+        <IdPrefixProvider value="scope-">{children}</IdPrefixProvider>
+      ),
     });
 
     expect(result.current).toMatch(/^scope-fui-/);

packages/react-components/react-utilities/src/trigger/applyTriggerPropsToChildren.test.tsx

@@ -3,7 +3,8 @@ import { render } from '@testing-library/react';
 import { applyTriggerPropsToChildren } from './applyTriggerPropsToChildren';
 import type { FluentTriggerComponent } from './types';
 
-export const TestTrigger: React.FC<{ id?: string }> & FluentTriggerComponent = props => <>{props.children}</>;
+export const TestTrigger: React.FC<{ id?: string; children: React.ReactNode | (() => React.JSX.Element) }> &
+  FluentTriggerComponent = props => <>{props.children}</>;
 TestTrigger.displayName = 'TestTrigger';
 TestTrigger.isFluentTriggerComponent = true;
 

packages/react-components/recipes/src/recipes/media-object/code-snippets/MediaObject.tsx

@@ -40,7 +40,7 @@ const MediaObject: React.VoidFunctionComponent<MediaObjectTypes> = ({
   );
 };
 
-const Legend: React.FC<{ colorClassName: string }> = ({ children, colorClassName }) => {
+const Legend: React.FC<React.PropsWithChildren<{ colorClassName: string }>> = ({ children, colorClassName }) => {
   const skeletonStyles = useSkeletonStyles();
   return (
     <div className={skeletonStyles.legend}>