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

Author: mainframev

packages/react-components/react-aria/library/etc/react-aria.api.md

@@ -103,7 +103,7 @@ export type AriaLiveAnnouncerState = {
 };
 
 // @public (undocumented)
-export const renderAriaLiveAnnouncer_unstable: (state: AriaLiveAnnouncerState, contextValues: AriaLiveAnnouncerContextValues) => JSX.Element;
+export const renderAriaLiveAnnouncer_unstable: (state: AriaLiveAnnouncerState, contextValues: AriaLiveAnnouncerContextValues) => React_2.JSX.Element;
 
 // @public (undocumented)
 export function useActiveDescendant<TActiveParentElement extends HTMLElement, TListboxElement extends HTMLElement>(options: ActiveDescendantOptions): UseActiveDescendantReturn<TActiveParentElement, TListboxElement>;

packages/react-components/react-aria/library/src/AriaLiveAnnouncer/useAriaLiveAnnouncer.test.tsx

@@ -19,7 +19,7 @@ describe('useAriaLiveAnnouncer', () => {
       },
       defaultView: global,
     } as unknown as Document;
-    const ContextWrapper: React.FC = props => {
+    const ContextWrapper: React.FC<React.PropsWithChildren> = props => {
       return <Provider value={{ dir: 'ltr', targetDocument }}>{props.children}</Provider>;
     };
 

packages/react-components/react-aria/library/src/activedescendant/useActiveDescendant.cy.tsx

@@ -16,8 +16,8 @@ describe('onActiveOptionChange', () => {
       const [lastActive, setLastActive] = React.useState('');
 
       const onActiveDescendantChange = React.useCallback(
-        event => {
-          setLastActive(event ? event.detail.id : 'no event');
+        (event: CustomEventInit<{ id: string }>) => {
+          setLastActive(event && event.detail ? event.detail.id : 'no event');
         },
         [setLastActive],
       );

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-button/library/src/utils/useToggleState.ts

@@ -20,7 +20,7 @@ export function useToggleState<
   const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';
 
   const onToggleClick = React.useCallback(
-    ev => {
+    (ev: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
       if (!disabled && !disabledFocusable) {
         if (ev.defaultPrevented) {
           return;

packages/react-components/react-combobox/library/config/tests.js

@@ -1,5 +1,4 @@
 // @ts-check
-/* eslint-disable */
 
 const { readFileSync } = require('node:fs');
 const { join } = require('node:path');
@@ -29,6 +28,6 @@ module.exports = {
     '^.+\\.tsx?$': ['@swc/jest', swcJestConfig],
   },
   coverageDirectory: './coverage',
-  setupFilesAfterEnv: ['./config/tests.js'],
+  setupFilesAfterEnv: ['./config/tests.ts'],
   snapshotSerializers: ['@griffel/jest-serializer'],
 };

packages/react-components/react-combobox/library/jest.config.js

@@ -3,9 +3,10 @@
   "compilerOptions": {
     "module": "CommonJS",
     "outDir": "dist",
-    "types": ["jest", "node", "@testing-library/jest-dom"]
+    "types": ["jest", "node"]
   },
   "include": [
+    "./config/tests.ts",
     "**/*.spec.ts",
     "**/*.spec.tsx",
     "**/*.test.ts",

packages/react-components/react-combobox/library/tsconfig.spec.json

@@ -5,6 +5,7 @@ import { teamsLightTheme } from '@fluentui/react-theme';
 
 import { List } from './List';
 import { ListItem } from '../ListItem';
+import type { ListProps } from './List.types';
 import { SelectionItemId } from '@fluentui/react-utilities';
 
 const mount = (element: JSX.Element) => {
@@ -72,11 +73,11 @@ type SelectionTestListProps = {
 const SelectionTestList = ({ selectionMode, defaultSelectedItems, controlled }: SelectionTestListProps) => {
   const [selectedItems, setSelectedItems] = React.useState(defaultSelectedItems || []);
 
-  const onChange = React.useCallback((_, { selectedItems: selected }) => {
+  const onChange = React.useCallback<NonNullable<ListProps['onSelectionChange']>>((_, { selectedItems: selected }) => {
     setSelectedItems(selected);
   }, []);
 
-  const onSelectLastClick = React.useCallback(_ => {
+  const onSelectLastClick = React.useCallback(() => {
     setSelectedItems(['list-item-3']);
   }, []);