fix: revert "fix: use react-jsx transform (#5428)" (#5475)

This reverts commit d0b7354.

Author: MarcusNotheis

.eslintrc.yml

@@ -57,7 +57,6 @@ overrides:
       - 'plugin:@typescript-eslint/recommended'
       - 'plugin:@typescript-eslint/recommended-requiring-type-checking'
       - 'plugin:import/typescript'
-      - 'plugin:react/jsx-runtime'
     settings:
       import/resolver:
         typescript: true
@@ -125,6 +124,7 @@ overrides:
       - no-only-tests
     rules:
       '@typescript-eslint/no-empty-function': 'off'
+      'react/react-in-jsx-scope': 'off'
       'import/order': 'warn'
       'import/no-unresolved': 'off'
       'react/no-unescaped-entities': 'off'

packages/base/src/Device/Media.cy.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { MediaEventProvider } from './EventProvider';
 import { attachMediaHandler, detachMediaHandler, getCurrentRange } from './Media';
 

packages/charts/src/components/BarChart/BarChart.tsx

@@ -2,7 +2,7 @@
 
 import { enrichEventWithDetails, ThemingParameters, useIsRTL, useSyncRef } from '@ui5/webcomponents-react-base';
 import type { CSSProperties } from 'react';
-import { forwardRef, useCallback } from 'react';
+import React, { forwardRef, useCallback } from 'react';
 import {
   Bar,
   BarChart as BarChartLib,

packages/charts/src/components/BarChart/Placeholder.tsx

@@ -1,4 +1,5 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
+import React from 'react';
 import ContentLoader from 'react-content-loader';
 
 export const BarChartPlaceholder = () => {

packages/charts/src/components/BulletChart/BulletChart.tsx

@@ -2,7 +2,7 @@
 
 import { enrichEventWithDetails, ThemingParameters, useIsRTL, useSyncRef } from '@ui5/webcomponents-react-base';
 import type { CSSProperties } from 'react';
-import { forwardRef, useCallback, useMemo } from 'react';
+import React, { forwardRef, useCallback, useMemo } from 'react';
 import {
   Bar,
   Brush,

packages/charts/src/components/BulletChart/ComparisonLine.tsx

@@ -1,4 +1,5 @@
 import type { CSSProperties } from 'react';
+import React from 'react';
 
 interface ComparisonLine {
   x?: number;

packages/charts/src/components/BulletChart/Placeholder.tsx

@@ -1,4 +1,5 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
+import React from 'react';
 import ContentLoader from 'react-content-loader';
 import type { IChartMeasure } from '../../interfaces/IChartMeasure.js';
 

packages/charts/src/components/ColumnChart/ColumnChart.tsx

@@ -2,7 +2,7 @@
 
 import { enrichEventWithDetails, ThemingParameters, useIsRTL, useSyncRef } from '@ui5/webcomponents-react-base';
 import type { CSSProperties } from 'react';
-import { forwardRef, useCallback } from 'react';
+import React, { forwardRef, useCallback } from 'react';
 import {
   Bar as Column,
   BarChart as ColumnChartLib,

packages/charts/src/components/ColumnChart/Placeholder.tsx

@@ -1,4 +1,5 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
+import React from 'react';
 import ContentLoader from 'react-content-loader';
 
 export const ColumnChartPlaceholder = (props) => {

packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.tsx

@@ -2,7 +2,7 @@
 
 import { ThemingParameters, useIsomorphicId } from '@ui5/webcomponents-react-base';
 import type { CSSProperties } from 'react';
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import type { TooltipProps } from 'recharts';
 import { useLongestYAxisLabel } from '../../hooks/useLongestYAxisLabel.js';
 import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures.js';

packages/charts/src/components/ColumnChartWithTrend/Placeholder.tsx

@@ -1,4 +1,5 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
+import React from 'react';
 import ContentLoader from 'react-content-loader';
 
 export const ColumnChartWithTrendPlaceholder = (props) => {

packages/charts/src/components/ComposedChart/Placeholder.tsx

@@ -1,4 +1,5 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
+import React from 'react';
 import ContentLoader from 'react-content-loader';
 import type { IChartMeasure } from '../../interfaces/IChartMeasure.js';
 

packages/charts/src/components/ComposedChart/index.tsx

@@ -2,7 +2,7 @@
 
 import { enrichEventWithDetails, ThemingParameters, useIsRTL, useSyncRef } from '@ui5/webcomponents-react-base';
 import type { CSSProperties, FC } from 'react';
-import { forwardRef, useCallback } from 'react';
+import React, { forwardRef, useCallback } from 'react';
 import {
   Area,
   Bar,

packages/charts/src/components/DonutChart/DonutChart.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import type { PieChartProps } from '../PieChart/PieChart.js';
 import { PieChart } from '../PieChart/PieChart.js';
 

packages/charts/src/components/LineChart/LineChart.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 import { bigDataSet, complexDataSet, secondaryDimensionDataSet, simpleDataSet } from '../../resources/DemoProps.js';
 import { LineChart } from './LineChart.js';
 

packages/charts/src/components/LineChart/LineChart.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { enrichEventWithDetails, ThemingParameters, useIsRTL, useSyncRef } from '@ui5/webcomponents-react-base';
-import { forwardRef, useCallback, useRef } from 'react';
+import React, { forwardRef, useCallback, useRef } from 'react';
 import type { LineProps } from 'recharts';
 import {
   Brush,

packages/charts/src/components/LineChart/Placeholder.tsx

@@ -1,4 +1,5 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
+import React from 'react';
 import ContentLoader from 'react-content-loader';
 
 export const LineChartPlaceholder = (props) => {

packages/charts/src/components/MicroBarChart/MicroBarChart.tsx

@@ -3,7 +3,7 @@
 import { enrichEventWithDetails, ThemingParameters } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import type { CSSProperties } from 'react';
-import { createElement, forwardRef, useCallback, useMemo } from 'react';
+import React, { createElement, forwardRef, useCallback, useMemo } from 'react';
 import { createUseStyles } from 'react-jss';
 import { getValueByDataKey } from 'recharts/lib/util/ChartUtils.js';
 import type { IChartBaseProps } from '../../interfaces/IChartBaseProps.js';

packages/charts/src/components/PieChart/PieChart.tsx

@@ -3,7 +3,7 @@
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import type { CSSProperties } from 'react';
-import { cloneElement, forwardRef, isValidElement, useCallback, useMemo } from 'react';
+import React, { cloneElement, forwardRef, isValidElement, useCallback, useMemo } from 'react';
 import { createUseStyles } from 'react-jss';
 import {
   Cell,

packages/charts/src/components/PieChart/Placeholder.tsx

@@ -1,4 +1,5 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
+import React from 'react';
 import ContentLoader from 'react-content-loader';
 
 export const PieChartPlaceholder = (props) => {

packages/charts/src/components/RadarChart/RadarChart.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { enrichEventWithDetails, ThemingParameters } from '@ui5/webcomponents-react-base';
-import { forwardRef, useCallback, useRef } from 'react';
+import React, { forwardRef, useCallback, useRef } from 'react';
 import {
   Legend,
   PolarAngleAxis,

packages/charts/src/components/RadialChart/RadialChart.tsx

@@ -3,7 +3,7 @@
 import type { CommonProps } from '@ui5/webcomponents-react';
 import { enrichEventWithDetails, ThemingParameters } from '@ui5/webcomponents-react-base';
 import type { CSSProperties } from 'react';
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import { PolarAngleAxis, RadialBar, RadialBarChart } from 'recharts';
 import { useOnClickInternal } from '../../hooks/useOnClickInternal.js';
 import { ChartContainer } from '../../internal/ChartContainer.js';

packages/charts/src/components/ScatterChart/Placeholder.tsx

@@ -1,4 +1,5 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
+import React from 'react';
 import ContentLoader from 'react-content-loader';
 
 export const ScatterChartPlaceholder = (props) => {

packages/charts/src/components/ScatterChart/ScatterChart.tsx

@@ -2,7 +2,7 @@
 
 import { enrichEventWithDetails, ThemingParameters, useIsRTL, useSyncRef } from '@ui5/webcomponents-react-base';
 import type { CSSProperties } from 'react';
-import { forwardRef, useCallback, useRef } from 'react';
+import React, { forwardRef, useCallback, useRef } from 'react';
 import type { ReferenceLineProps } from 'recharts';
 import {
   CartesianGrid,

packages/charts/src/components/TimelineChart/Placeholder.tsx

@@ -1,4 +1,5 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
+import React from 'react';
 import ContentLoader from 'react-content-loader';
 
 export const TimelineChartPlaceholder = () => {

packages/charts/src/components/TimelineChart/TimeLineChart.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
+import React from 'react';
 import { Invention, TimingFigure } from './examples/Annotations.js';
 import { dummyDataSet, dummyDiscreteDataSet, inventionDataset, schedulingEDFData } from './examples/Dataset.js';
 import { TimelineChart } from './TimelineChart.js';

packages/charts/src/components/TimelineChart/TimelineChart.tsx

@@ -1,7 +1,7 @@
 import type { CommonProps } from '@ui5/webcomponents-react';
 import { throttle } from '@ui5/webcomponents-react-base';
-import { forwardRef, useEffect, useRef, useState } from 'react';
-import type * as React from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { TimelineChartBody } from './chartbody/TimelineChartBody.js';
 import { TimelineChartPlaceholder } from './Placeholder.js';
 import { TimelineChartColumnLabel, TimelineChartRowTitle, TimelineChartRowLabels } from './TimelineChartHeaders.js';
@@ -35,7 +35,7 @@ interface TimelineChartProps extends CommonProps {
    * The total width of the chart. If not supplied, the chart's
    * width expands to fill its conatainer.
    */
-  width?: React.CSSProperties['width'];
+  width?: CSSProperties['width'];
 
   /**
    * The height the row of the timeline.
@@ -53,7 +53,7 @@ interface TimelineChartProps extends CommonProps {
    *
    * **Note:** Use the `TimelineChartAnnotation` component here.
    */
-  annotations?: React.ReactNode | React.ReactNode[];
+  annotations?: ReactNode | ReactNode[];
 
   /**
    * Toggles the visibility of the annotations applied to the chart.
@@ -149,7 +149,7 @@ const TimelineChart = forwardRef<HTMLDivElement, TimelineChartProps>(
     const numOfRows = dataset?.length ?? 0;
     const height = rowHeight * numOfRows + COLUMN_HEADER_HEIGHT;
 
-    const style: React.CSSProperties = {
+    const style: CSSProperties = {
       height: `${height}px`,
       width: width,
       gridTemplateColumns: `${ROW_TITLE_WIDTH}px auto`

packages/charts/src/components/TimelineChart/TimelineChartAnnotation.tsx

@@ -1,6 +1,6 @@
 import type { CommonProps } from '@ui5/webcomponents-react';
 import type { CSSProperties } from 'react';
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import { DEFAULT_ROW_HEIGHT } from './util/constants.js';
 import { useStyles } from './util/styles.js';
 

packages/charts/src/components/TimelineChart/TimelineChartHeaders.tsx

@@ -1,6 +1,6 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import type { CSSProperties, ReactElement } from 'react';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import type { ITimelineChartRow } from './types/TimelineChartTypes.js';
 import { DEFAULT_CHART_VERTICAL_COLS, SPACING, TICK_LENGTH, TOLERANCE } from './util/constants.js';
 import { useStyles } from './util/styles.js';

packages/charts/src/components/TimelineChart/chartbody/TimelineChartBody.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties, ReactNode } from 'react';
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import type { ITimelineChartRow } from '../types/TimelineChartTypes.js';
 import { MAX_BODY_WIDTH, SCALE_FACTOR } from '../util/constants.js';
 import { TimelineChartBodyCtx } from '../util/context.js';

packages/charts/src/components/TimelineChart/chartbody/TimelineChartGrid.tsx

@@ -1,5 +1,6 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import type { ReactElement } from 'react';
+import React from 'react';
 import { DEFAULT_CHART_VERTICAL_COLS, TOLERANCE } from '../util/constants.js';
 
 interface TimelineChartGridProps {

packages/charts/src/components/TimelineChart/chartbody/TimelineChartLayer.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import React from 'react';
 import { useStyles } from '../util/styles.js';
 
 interface TimelineChartLayerProps {

packages/charts/src/components/TimelineChart/chartbody/TimelineChartRow.tsx

@@ -1,6 +1,6 @@
 import { throttle } from '@ui5/webcomponents-react-base';
-import { useEffect, useRef, useState } from 'react';
-import type * as React from 'react';
+import type { CSSProperties } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import type { ITimelineChartRow } from '../types/TimelineChartTypes.js';
 import { HOVER_OPACITY, NORMAL_OPACITY, THROTTLE_INTERVAL } from '../util/constants.js';
 
@@ -107,7 +107,7 @@ interface TimelineTaskProps {
    */
   totalDuration: number;
 
-  color: React.CSSProperties['color'];
+  color: CSSProperties['color'];
 
   timelineStart: number;
 
@@ -199,7 +199,7 @@ interface TimelineMilestoneProps {
    */
   totalDuration: number;
 
-  color?: React.CSSProperties['color'];
+  color?: CSSProperties['color'];
 
   timelineStart: number;
 

packages/charts/src/components/TimelineChart/chartbody/TimelineConnections.tsx

@@ -1,6 +1,6 @@
 import { ThemingParameters, useIsomorphicLayoutEffect } from '@ui5/webcomponents-react-base';
 import type { ReactElement } from 'react';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import type { ITimelineChartMileStone, ITimelineChartRow, ITimelineChartTask } from '../types/TimelineChartTypes.js';
 import { TimelineChartConnection } from '../types/TimelineChartTypes.js';
 import { ARROWHEAD_HEIGHT, ARROWHEAD_WIDTH, ARROW_CLEARANCE } from '../util/constants.js';

packages/charts/src/components/TimelineChart/examples/Annotations.tsx

@@ -1,6 +1,6 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import type { CSSProperties } from 'react';
-import { useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { TimelineChartBodyCtx } from '../util/context.js';
 
 interface TimingFigureProps {

packages/charts/src/internal/ChartContainer.tsx

@@ -2,7 +2,7 @@ import { type CommonProps, Label, Loader } from '@ui5/webcomponents-react';
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import type { ComponentType, CSSProperties, ReactElement, ReactNode } from 'react';
-import { Component, forwardRef } from 'react';
+import React, { Component, forwardRef } from 'react';
 import { createUseStyles } from 'react-jss';
 import { ResponsiveContainer } from 'recharts';
 

packages/charts/src/internal/ChartDataLabel.tsx

@@ -1,5 +1,5 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
-import { createElement } from 'react';
+import React, { createElement } from 'react';
 import { Label } from 'recharts';
 import type { IChartMeasure } from '../interfaces/IChartMeasure.js';
 import { getTextWidth } from '../internal/Utils.js';

packages/charts/src/internal/XAxisTicks.tsx

@@ -1,4 +1,5 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
+import React from 'react';
 import type { IChartMeasure } from '../interfaces/IChartMeasure.js';
 import { getTextWidth, truncateLongLabel } from './Utils.js';
 

packages/charts/src/internal/YAxisTicks.tsx

@@ -1,4 +1,5 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
+import React from 'react';
 import type { IChartMeasure } from '../interfaces/IChartMeasure.js';
 import { defaultMaxYAxisWidth } from './defaults.js';
 import { getTextWidth, truncateLongLabel } from './Utils.js';

packages/cypress-commands/CommandsAndQueries.tsx

@@ -1,5 +1,5 @@
 import { Heading, Markdown } from '@storybook/blocks';
-import { Fragment } from 'react';
+import React, { Fragment } from 'react';
 
 interface CommandsAndQueries {
   id: number;

packages/main/src/components/ActionSheet/ActionSheet.stories.tsx

@@ -4,7 +4,7 @@ import declineIcon from '@ui5/webcomponents-icons/dist/decline.js';
 import deleteIcon from '@ui5/webcomponents-icons/dist/delete.js';
 import emailIcon from '@ui5/webcomponents-icons/dist/email.js';
 import forwardIcon from '@ui5/webcomponents-icons/dist/forward.js';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { PopoverHorizontalAlign, PopoverPlacementType, PopoverVerticalAlign } from '../../enums/index.js';
 import { Button } from '../../webComponents/index.js';
 import { ActionSheet } from './index.js';

packages/main/src/components/ActionSheet/index.tsx

@@ -4,7 +4,7 @@ import { isPhone } from '@ui5/webcomponents-base/dist/Device.js';
 import { useI18nBundle, useIsRTL, useSyncRef } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import type { ReactElement } from 'react';
-import { forwardRef, useReducer, useRef } from 'react';
+import React, { forwardRef, useReducer, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { createUseStyles } from 'react-jss';
 import { ButtonDesign } from '../../enums/index.js';

packages/main/src/components/AnalyticalCard/index.tsx

@@ -2,7 +2,7 @@
 
 import { deprecationNotice, useStylesheet } from '@ui5/webcomponents-react-base';
 import type { ReactNode } from 'react';
-import { forwardRef, useEffect } from 'react';
+import React, { forwardRef, useEffect } from 'react';
 import type { CommonProps } from '../../types/index.js';
 import type { CardDomRef } from '../../webComponents/index.js';
 import { Card } from '../../webComponents/index.js';

packages/main/src/components/AnalyticalCardHeader/index.tsx

@@ -5,7 +5,7 @@ import iconUp from '@ui5/webcomponents-icons/dist/up.js';
 import { useI18nBundle, useIsomorphicId } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import type { MouseEventHandler, ReactElement, ReactNode } from 'react';
-import { cloneElement, forwardRef } from 'react';
+import React, { cloneElement, forwardRef } from 'react';
 import { createUseStyles } from 'react-jss';
 import { DeviationIndicator, ValueColor } from '../../enums/index.js';
 import {

packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx

@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import '@ui5/webcomponents-icons/dist/delete.js';
 import '@ui5/webcomponents-icons/dist/edit.js';
 import '@ui5/webcomponents-icons/dist/settings.js';
-import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import {
   AnalyticalTableScaleWidthMode,
   AnalyticalTableSelectionBehavior,