fix(react-components,react-charts): migrate to R19 compatible JSX.* namespace types (#34923)

Author: Hotell

apps/perf-test/.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": ["plugin:@fluentui/eslint-plugin/react"],
+  "extends": ["plugin:@fluentui/eslint-plugin/react--legacy"],
   "root": true,
   "rules": {
     "no-console": "off",

apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Flex/utils.stories.test.tsx

@@ -13,7 +13,7 @@ function mockMDXSourceCodeBlock(source: string) {
         },
       },
     },
-  } as JSX.Element;
+  } as React.ReactElement;
 }
 
 test('renders children', () => {

apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx

@@ -131,7 +131,7 @@ const VideoPreviews: React.FC<{
   );
 };
 
-const getNativeElementsList = (elements: SBEnumType['value']): JSX.Element => {
+const getNativeElementsList = (elements: SBEnumType['value']): React.ReactElement => {
   const elementsArr = elements?.map((el, idx) => [
     <code key={idx}>{`<${el}>`}</code>,
     idx !== elements.length - 1 ? ', ' : ' ',

apps/react-18-tests-v9/src/components/Dialog/Dialog.cy.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { mount as mountBase } from '@cypress/react';
 import { Dialog, DialogSurface, DialogTrigger, DialogBody, Button } from '@fluentui/react-components';
+import type { JSXElement } from '@fluentui/react-utilities';
 
 import { Provider } from '../Provider/Provider';
 
-const mount = (element: React.JSX.Element) => {
+const mount = (element: JSXElement) => {
   mountBase(<Provider>{element}</Provider>);
 };
 

apps/react-18-tests-v9/src/components/Menu/Menu.cy.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { mount as mountBase } from '@cypress/react';
 import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem } from '@fluentui/react-components';
+import type { JSXElement } from '@fluentui/react-utilities';
 
 import { Provider } from '../Provider/Provider';
 
-const mount = (element: React.JSX.Element) => {
+const mount = (element: JSXElement) => {
   mountBase(<Provider>{element}</Provider>);
 };
 

apps/react-18-tests-v9/src/components/Overflow/Overflow.cy.tsx

@@ -17,6 +17,7 @@ import {
   useIsOverflowItemVisible,
   useOverflowMenu,
 } from '@fluentui/react-components';
+import type { JSXElement } from '@fluentui/react-utilities';
 
 import { Provider } from '../Provider/Provider';
 
@@ -89,7 +90,7 @@ const OverflowMenu: React.FC<{ itemIds: string[] }> = ({ itemIds }) => {
   );
 };
 
-const mount = (element: React.JSX.Element) => {
+const mount = (element: JSXElement) => {
   mountBase(<Provider>{element}</Provider>);
 };
 

apps/react-18-tests-v9/src/components/Popover/Popover.cy.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { mount as mountBase } from '@cypress/react';
+import type { JSXElement } from '@fluentui/react-utilities';
 
 import { CustomPopover as Popover } from './Popover';
 import { Provider } from '../Provider/Provider';
 
-const mount = (element: React.JSX.Element) => {
+const mount = (element: JSXElement) => {
   mountBase(<Provider>{element}</Provider>);
 };
 

apps/react-18-tests-v9/src/components/Portal/Portal.cy.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { Portal } from '@fluentui/react-components';
 import { mount as mountBase } from '@cypress/react';
+import type { JSXElement } from '@fluentui/react-utilities';
 
 import { Provider } from '../../components/Provider/Provider';
 
-const mount = (element: React.JSX.Element) => {
+const mount = (element: JSXElement) => {
   mountBase(<Provider>{element}</Provider>);
 };
 

apps/react-19-tests-v9/src/components/Dialog/Dialog.cy.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { mount as mountBase } from '@cypress/react';
 import { Dialog, DialogSurface, DialogTrigger, DialogBody, Button } from '@fluentui/react-components';
+import type { JSXElement } from '@fluentui/react-utilities';
 
 import { Provider } from '../Provider/Provider';
 
-const mount = (element: React.JSX.Element) => {
+const mount = (element: JSXElement) => {
   mountBase(<Provider>{element}</Provider>);
 };
 

apps/react-19-tests-v9/src/components/Menu/Menu.cy.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { mount as mountBase } from '@cypress/react';
 import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem } from '@fluentui/react-components';
+import type { JSXElement } from '@fluentui/react-utilities';
 
 import { Provider } from '../Provider/Provider';
 
-const mount = (element: React.JSX.Element) => {
+const mount = (element: JSXElement) => {
   mountBase(<Provider>{element}</Provider>);
 };