fixup! chore(react-components): resolve issues related to React 18 types

Author: mainframev

packages/react-components/react-avatar/library/src/components/AvatarGroupItem/AvatarGroupItem.test.tsx

@@ -6,7 +6,7 @@ import { isConformant } from '../../testing/isConformant';
 
 const testId = 'testId';
 
-const ContextWrapper: React.FC = ({ children }) => (
+const ContextWrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
   <AvatarGroupContext.Provider value={{ isOverflow: true }}>{children}</AvatarGroupContext.Provider>
 );
 

packages/react-components/react-breadcrumb/stories/src/Breadcrumb/index.stories.tsx

@@ -1,4 +1,5 @@
 import { Breadcrumb, BreadcrumbButton, BreadcrumbItem, BreadcrumbDivider } from '@fluentui/react-components';
+import * as React from 'react';
 import descriptionMd from './BreadcrumbDescription.md';
 export { Default } from './BreadcrumbDefault.stories';
 export { BreadcrumbSize } from './BreadcrumbSize.stories';
@@ -7,13 +8,13 @@ export { BreadcrumbWithTooltip } from './BreadcrumbWithTooltip.stories';
 
 import type { Meta } from '@storybook/react';
 
-const metadata: Meta<typeof Breadcrumb> = {
+const metadata = {
   title: 'Components/Breadcrumb',
   component: Breadcrumb,
   subcomponents: {
-    BreadcrumbItem,
-    BreadcrumbButton,
-    BreadcrumbDivider,
+    BreadcrumbItem: BreadcrumbItem as React.ComponentType<unknown>,
+    BreadcrumbButton: BreadcrumbButton as React.ComponentType<unknown>,
+    BreadcrumbDivider: BreadcrumbDivider as React.ComponentType<unknown>,
   },
   parameters: {
     docs: {
@@ -22,6 +23,6 @@ const metadata: Meta<typeof Breadcrumb> = {
       },
     },
   },
-};
+} satisfies Meta<typeof Breadcrumb>;
 
 export default metadata;

packages/react-components/react-overflow/library/src/useOverflowItem.test.tsx

@@ -23,7 +23,9 @@ describe('useOverflowItem', () => {
         (ref as React.MutableRefObject<HTMLDivElement>).current = document.createElement('div');
       },
       {
-        wrapper: ({ children }) => <OverflowContext.Provider value={value}>{children}</OverflowContext.Provider>,
+        wrapper: ({ children }: { children: React.ReactNode }) => (
+          <OverflowContext.Provider value={value}>{children}</OverflowContext.Provider>
+        ),
       },
     );
 
@@ -50,7 +52,9 @@ describe('useOverflowItem', () => {
         (ref as React.MutableRefObject<HTMLDivElement>).current = document.createElement('div');
       },
       {
-        wrapper: ({ children }) => <OverflowContext.Provider value={value}>{children}</OverflowContext.Provider>,
+        wrapper: ({ children }: { children: React.ReactNode }) => (
+          <OverflowContext.Provider value={value}>{children}</OverflowContext.Provider>
+        ),
       },
     );
 

packages/react-components/react-portal-compat/src/PortalCompatProvider.test.tsx

@@ -10,7 +10,7 @@ import { PortalCompatProvider, useProviderThemeClasses } from './PortalCompatPro
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop = () => {};
 
-const TestWrapperWithMultipleClasses: React.FC = props => {
+const TestWrapperWithMultipleClasses: React.FC<React.PropsWithChildren> = props => {
   // Creates a second className with CSS variables
   const { styleTagId } = useFluentProviderThemeStyleTag({
     theme: { borderRadiusCircular: '50px' },
@@ -32,7 +32,7 @@ describe('useProviderThemeClasses', () => {
 
   it('handles classes from FluentProvider', () => {
     const { result } = renderHook(() => useProviderThemeClasses(), {
-      wrapper: props => (
+      wrapper: (props: React.PropsWithChildren) => (
         <FluentProvider theme={{ colorNeutralBackground1: '#ccc' }}>
           <PortalCompatProvider>{props.children}</PortalCompatProvider>
         </FluentProvider>
@@ -61,7 +61,7 @@ describe('useProviderThemeClasses', () => {
 
   it('handles classes with custom ID prefix', () => {
     const { result } = renderHook(() => useProviderThemeClasses(), {
-      wrapper: props => (
+      wrapper: (props: React.PropsWithChildren) => (
         <IdPrefixProvider value="custom1-">
           <FluentProvider theme={{ colorNeutralBackground1: '#ccc' }}>
             <PortalCompatProvider>{props.children}</PortalCompatProvider>
@@ -79,7 +79,7 @@ describe('useProviderThemeClasses', () => {
 
   it('handles classes with a React 18 compatible ID', () => {
     const { result } = renderHook(() => useProviderThemeClasses(), {
-      wrapper: props => (
+      wrapper: (props: React.PropsWithChildren) => (
         <ThemeClassNameProvider value="fui-FluentProviderR1a">
           <PortalCompatProvider>{props.children}</PortalCompatProvider>
         </ThemeClassNameProvider>
@@ -95,7 +95,7 @@ describe('useProviderThemeClasses', () => {
 
   it('returns only proper classes', () => {
     const { result } = renderHook(() => useProviderThemeClasses(), {
-      wrapper: props => (
+      wrapper: (props: React.PropsWithChildren) => (
         <ThemeClassNameProvider value="foo bar baz">
           <PortalCompatProvider>{props.children}</PortalCompatProvider>
         </ThemeClassNameProvider>
@@ -133,7 +133,7 @@ describe('PortalCompatProvider', () => {
   it('during register adds a className from "ThemeClassNameContext" context', () => {
     const element = document.createElement('div');
     const { result } = renderHook(() => usePortalCompat(), {
-      wrapper: props => (
+      wrapper: (props: React.PropsWithChildren) => (
         <FluentProvider theme={{ colorNeutralBackground1: '#ccc' }}>
           <PortalCompatProvider>{props.children}</PortalCompatProvider>
         </FluentProvider>
@@ -167,7 +167,7 @@ describe('PortalCompatProvider', () => {
     const element = document.createElement('div');
 
     const { result } = renderHook(() => usePortalCompat(), {
-      wrapper: props => (
+      wrapper: (props: React.PropsWithChildren) => (
         <FluentProvider theme={{ colorNeutralBackground1: '#ccc' }}>
           <PortalCompatProvider>{props.children}</PortalCompatProvider>
         </FluentProvider>

packages/react-components/react-provider/stories/src/Provider/FluentProviderFrame.stories.tsx

@@ -53,7 +53,7 @@ const FrameRenderer: React.FunctionComponent<FrameRendererProps> = ({ children }
   );
 };
 
-const Example: React.FC = props => {
+const Example: React.FC<React.PropsWithChildren> = props => {
   const styles = useExampleStyles();
 
   return (

packages/react-components/react-tags/stories/src/TagGroup/TagGroupOverflow.stories.tsx

@@ -87,7 +87,7 @@ const OverflowMenuItem = (props: OverflowMenuItemProps) => {
 
   return (
     <MenuItem key={tag.value} className={styles.menuItem}>
-      <Tag {...tag} as="span" className={styles.tag} />
+      <Tag {...tag} className={styles.tag} />
     </MenuItem>
   );
 };

packages/react-components/react-tree/library/src/hooks/useSubtree.ts

@@ -26,11 +26,7 @@ export function useSubtree(
     open,
     components: {
       root: 'div',
-      // TODO: remove once React v18 slot API is modified
-      // This is a problem at the moment due to UnknownSlotProps assumption
-      // that `children` property is `ReactNode`, which in this case is not valid
-      // as PresenceComponentProps['children'] is `ReactElement`
-      collapseMotion: Collapse as React.FC<PresenceMotionSlotProps>,
+      collapseMotion: Collapse,
     },
     level: parentLevel + 1,
     root: slot.always(