chore: Use React.JSX instead of the global JSX removed in React 19

vaadin · Jan 1, 2025 · 6eae918 · 6eae918
1 parent 877d13a
commit 6eae918
Show file tree

Hide file tree

Showing 10 changed files with 19 additions and 17 deletions.
diff --git a/packages/java/tests/spring/react-grid-test/frontend/views/AutoCrudView.tsx b/packages/java/tests/spring/react-grid-test/frontend/views/AutoCrudView.tsx
@@ -2,7 +2,7 @@ import { AutoCrud } from '@vaadin/hilla-react-crud';
 import PersonModel from 'Frontend/generated/com/vaadin/hilla/test/reactgrid/PersonModel.js';
 import { PersonService } from 'Frontend/generated/endpoints.js';
 
-export function AutoCrudView(): JSX.Element {
+export function AutoCrudView(): React.JSX.Element {
   /* page size is defined only to make testing easier */
   return (
     <div className="p-l">

diff --git a/packages/java/tests/spring/react-grid-test/frontend/views/AutoFormView.tsx b/packages/java/tests/spring/react-grid-test/frontend/views/AutoFormView.tsx
@@ -4,7 +4,7 @@ import type Appointment from 'Frontend/generated/com/vaadin/hilla/test/reactgrid
 import AppointmentModel from 'Frontend/generated/com/vaadin/hilla/test/reactgrid/AppointmentModel.js';
 import { AppointmentService } from 'Frontend/generated/endpoints.js';
 
-export function AutoFormView(): JSX.Element {
+export function AutoFormView(): React.JSX.Element {
   const [submitted, setSubmitted] = useState<Appointment | undefined>(undefined);
 
   function handleSubmit({ item }: SubmitEvent<Appointment>) {

diff --git a/packages/java/tests/spring/react-grid-test/frontend/views/GridUseDataProviderHookView.tsx b/packages/java/tests/spring/react-grid-test/frontend/views/GridUseDataProviderHookView.tsx
@@ -14,12 +14,12 @@ type GridBodyReactRendererProps<TItem> = {
   item: TItem;
 };
 
-function LuckyNumberRenderer({ item }: GridBodyReactRendererProps<Person>): JSX.Element {
+function LuckyNumberRenderer({ item }: GridBodyReactRendererProps<Person>): React.JSX.Element {
   const value = item.luckyNumber;
   return <span style={{ fontWeight: 'bold', color: value % 2 === 0 ? 'green' : 'red' }}>{value}</span>;
 }
 
-export function GridUseDataProviderHook(): JSX.Element {
+export function GridUseDataProviderHook(): React.JSX.Element {
   const [filter, setFilter] = useState<PropertyStringFilter>();
   const { dataProvider, refresh } = useDataProvider(PersonService, filter);
   const [savedPerson, setSavedPerson] = useState<Person | undefined>(undefined);

diff --git a/packages/java/tests/spring/react-grid-test/frontend/views/GridWithEntityReferences.tsx b/packages/java/tests/spring/react-grid-test/frontend/views/GridWithEntityReferences.tsx
@@ -2,7 +2,7 @@ import { AutoGrid } from '@vaadin/hilla-react-crud';
 import EmployeeModel from 'Frontend/generated/com/vaadin/hilla/test/reactgrid/entityreferences/EmployeeModel.js';
 import { EmployeeService } from 'Frontend/generated/endpoints.js';
 
-export function GridWithEntityReferences(): JSX.Element {
+export function GridWithEntityReferences(): React.JSX.Element {
   return <AutoGrid pageSize={10} service={EmployeeService} model={EmployeeModel} noHeaderFilters />;
   /* page size is defined only to make testing easier */
 }
diff --git a/packages/java/tests/spring/react-grid-test/frontend/views/ReadOnlyGrid.tsx b/packages/java/tests/spring/react-grid-test/frontend/views/ReadOnlyGrid.tsx
@@ -7,12 +7,12 @@ type GridBodyReactRendererProps<TItem> = {
   item: TItem;
 };
 
-function LuckyNumberRenderer({ item }: GridBodyReactRendererProps<Person>): JSX.Element {
+function LuckyNumberRenderer({ item }: GridBodyReactRendererProps<Person>): React.JSX.Element {
   const value = item.luckyNumber;
   return <span style={{ fontWeight: 'bold', color: value % 2 === 0 ? 'green' : 'red' }}>{value}</span>;
 }
 
-export function ReadOnlyGrid(): JSX.Element {
+export function ReadOnlyGrid(): React.JSX.Element {
   return (
     <AutoGrid
       pageSize={10}

diff --git a/packages/java/tests/spring/react-grid-test/frontend/views/ReadOnlyGridCustomFilter.tsx b/packages/java/tests/spring/react-grid-test/frontend/views/ReadOnlyGridCustomFilter.tsx
@@ -38,15 +38,15 @@ const HeaderFilterRenderer = ({ setFilter }: HeaderFilterRendererProps) => {
   );
 };
 
-const FullNameRenderer = ({ item }: { item: Person }): JSX.Element => (
+const FullNameRenderer = ({ item }: { item: Person }): React.JSX.Element => (
   <span>
     {item.firstName} {item.lastName}
   </span>
 );
 
 const HeaderRenderer = () => <div>Full Name (currently: {new Date().toLocaleString()})</div>;
 
-export function ReadOnlyGridCustomFilter(): JSX.Element {
+export function ReadOnlyGridCustomFilter(): React.JSX.Element {
   return (
     <div>
       <AutoGrid

diff --git a/packages/java/tests/spring/react-grid-test/frontend/views/ReadOnlyGridOrFilter.tsx b/packages/java/tests/spring/react-grid-test/frontend/views/ReadOnlyGridOrFilter.tsx
@@ -5,7 +5,7 @@ import type FilterUnion from 'Frontend/generated/com/vaadin/hilla/crud/filter/Fi
 import PersonModel from 'Frontend/generated/com/vaadin/hilla/test/reactgrid/PersonModel.js';
 import { PersonService } from 'Frontend/generated/endpoints.js';
 
-export function ReadOnlyGridOrFilter(): JSX.Element {
+export function ReadOnlyGridOrFilter(): React.JSX.Element {
   const [filter, setFilter] = useState<FilterUnion | undefined>(undefined);
 
   return (

diff --git a/...ges/java/tests/spring/react-grid-test/frontend/views/ReadOnlyGridSinglePropertyFilter.tsx b/...ges/java/tests/spring/react-grid-test/frontend/views/ReadOnlyGridSinglePropertyFilter.tsx
@@ -6,7 +6,7 @@ import Matcher from 'Frontend/generated/com/vaadin/hilla/crud/filter/PropertyStr
 import PersonModel from 'Frontend/generated/com/vaadin/hilla/test/reactgrid/PersonModel.js';
 import { PersonService } from 'Frontend/generated/endpoints.js';
 
-export function ReadOnlyGridSinglePropertyFilter(): JSX.Element {
+export function ReadOnlyGridSinglePropertyFilter(): React.JSX.Element {
   const [filter, setFilter] = useState<FilterUnion | undefined>(undefined);
   return (
     <div>

diff --git a/packages/java/tests/spring/react-grid-test/frontend/views/ReadOnlyGridWithHeaderFilter.tsx b/packages/java/tests/spring/react-grid-test/frontend/views/ReadOnlyGridWithHeaderFilter.tsx
@@ -6,7 +6,7 @@ import CompanyModel from 'Frontend/generated/com/vaadin/hilla/test/reactgrid/Com
 import PersonModel from 'Frontend/generated/com/vaadin/hilla/test/reactgrid/PersonModel.js';
 import { CompanyService, PersonService } from 'Frontend/generated/endpoints.js';
 
-export function ReadOnlyGridWithHeaderFilters(): JSX.Element {
+export function ReadOnlyGridWithHeaderFilters(): React.JSX.Element {
   const [model, setModel] = useState<Array<DetachedModelConstructor<AbstractModel>>>([PersonModel]);
   const [service, setService] = useState<CrudService<any>>(PersonService);
   const [noHeaderFilters, setNoHeaderFilters] = useState(false);

diff --git a/packages/ts/react-crud/test/autogrid.spec.tsx b/packages/ts/react-crud/test/autogrid.spec.tsx
@@ -1,4 +1,4 @@
-import { screen, render, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { GridColumn } from '@vaadin/react-components/GridColumn.js';
 import { TextField } from '@vaadin/react-components/TextField.js';
@@ -1167,8 +1167,10 @@ describe('@vaadin/hilla-react-crud', () => {
       });
 
       it('uses custom column options on top of the type defaults', async () => {
-        const NameRenderer = ({ item }: { item: Person }): JSX.Element => <span>{item.firstName.toUpperCase()}</span>;
-        const StreetRenderer = ({ item }: { item: Person }): JSX.Element => (
+        const NameRenderer = ({ item }: { item: Person }): React.JSX.Element => (
+          <span>{item.firstName.toUpperCase()}</span>
+        );
+        const StreetRenderer = ({ item }: { item: Person }): React.JSX.Element => (
           <span>{item.address?.street.toUpperCase()}</span>
         );
         const grid = await GridController.init(
@@ -1247,12 +1249,12 @@ describe('@vaadin/hilla-react-crud', () => {
     });
 
     describe('custom columns', () => {
-      const FullNameRenderer = ({ item }: { item: Person }): JSX.Element => (
+      const FullNameRenderer = ({ item }: { item: Person }): React.JSX.Element => (
         <span>
           {item.firstName} {item.lastName}
         </span>
       );
-      const FullNameHyphenRenderer = ({ item }: { item: Person }): JSX.Element => (
+      const FullNameHyphenRenderer = ({ item }: { item: Person }): React.JSX.Element => (
         <span>
           {item.firstName}-{item.lastName}
         </span>