From e3a02a6f9ad8b9353b5a9b7d038cfaa0704bdd3d Mon Sep 17 00:00:00 2001 From: Marcus Notheis Date: Wed, 7 Feb 2024 10:09:24 +0100 Subject: [PATCH] fix: revert "fix: use `react-jsx` transform (#5428)" (#5475) This reverts commit d0b7354de517b297dc5ca0926b254ec4133ab37c. --- .eslintrc.yml | 2 +- packages/base/src/Device/Media.cy.tsx | 2 +- packages/charts/src/components/BarChart/BarChart.tsx | 2 +- .../charts/src/components/BarChart/Placeholder.tsx | 1 + .../charts/src/components/BulletChart/BulletChart.tsx | 2 +- .../src/components/BulletChart/ComparisonLine.tsx | 1 + .../charts/src/components/BulletChart/Placeholder.tsx | 1 + .../charts/src/components/ColumnChart/ColumnChart.tsx | 2 +- .../charts/src/components/ColumnChart/Placeholder.tsx | 1 + .../ColumnChartWithTrend/ColumnChartWithTrend.tsx | 2 +- .../components/ColumnChartWithTrend/Placeholder.tsx | 1 + .../src/components/ComposedChart/Placeholder.tsx | 1 + .../charts/src/components/ComposedChart/index.tsx | 2 +- .../charts/src/components/DonutChart/DonutChart.tsx | 2 +- .../src/components/LineChart/LineChart.stories.tsx | 1 + .../charts/src/components/LineChart/LineChart.tsx | 2 +- .../charts/src/components/LineChart/Placeholder.tsx | 1 + .../src/components/MicroBarChart/MicroBarChart.tsx | 2 +- packages/charts/src/components/PieChart/PieChart.tsx | 2 +- .../charts/src/components/PieChart/Placeholder.tsx | 1 + .../charts/src/components/RadarChart/RadarChart.tsx | 2 +- .../charts/src/components/RadialChart/RadialChart.tsx | 2 +- .../src/components/ScatterChart/Placeholder.tsx | 1 + .../src/components/ScatterChart/ScatterChart.tsx | 2 +- .../src/components/TimelineChart/Placeholder.tsx | 1 + .../TimelineChart/TimeLineChart.stories.tsx | 1 + .../src/components/TimelineChart/TimelineChart.tsx | 10 +++++----- .../TimelineChart/TimelineChartAnnotation.tsx | 2 +- .../components/TimelineChart/TimelineChartHeaders.tsx | 2 +- .../TimelineChart/chartbody/TimelineChartBody.tsx | 2 +- .../TimelineChart/chartbody/TimelineChartGrid.tsx | 1 + .../TimelineChart/chartbody/TimelineChartLayer.tsx | 1 + .../TimelineChart/chartbody/TimelineChartRow.tsx | 8 ++++---- .../TimelineChart/chartbody/TimelineConnections.tsx | 2 +- .../components/TimelineChart/examples/Annotations.tsx | 2 +- packages/charts/src/internal/ChartContainer.tsx | 2 +- packages/charts/src/internal/ChartDataLabel.tsx | 2 +- packages/charts/src/internal/XAxisTicks.tsx | 1 + packages/charts/src/internal/YAxisTicks.tsx | 1 + packages/cypress-commands/CommandsAndQueries.tsx | 2 +- .../components/ActionSheet/ActionSheet.stories.tsx | 2 +- packages/main/src/components/ActionSheet/index.tsx | 2 +- packages/main/src/components/AnalyticalCard/index.tsx | 2 +- .../src/components/AnalyticalCardHeader/index.tsx | 2 +- .../AnalyticalTable/AnalyticalTable.stories.tsx | 2 +- .../ColumnHeader/ColumnHeaderContainer.tsx | 2 +- .../ColumnHeader/ColumnHeaderModal.tsx | 2 +- .../components/AnalyticalTable/ColumnHeader/index.tsx | 2 +- .../components/AnalyticalTable/TableBody/EmptyRow.tsx | 1 + .../AnalyticalTable/TableBody/RowSubComponent.tsx | 2 +- .../AnalyticalTable/TableBody/VirtualTableBody.tsx | 2 +- .../TableBody/VirtualTableBodyContainer.tsx | 2 +- .../src/components/AnalyticalTable/TitleBar/index.tsx | 2 +- .../components/AnalyticalTable/VerticalResizer.tsx | 2 +- .../AnalyticalTable/defaults/Column/Cell.tsx | 2 ++ .../AnalyticalTable/defaults/Column/Expandable.tsx | 1 + .../AnalyticalTable/defaults/Column/Grouped.tsx | 1 + .../AnalyticalTable/defaults/Column/PopIn.tsx | 1 + .../defaults/FilterComponent/index.tsx | 2 +- .../defaults/LoadingComponent/TablePlaceholder.tsx | 1 + .../defaults/LoadingComponent/index.tsx | 1 + .../defaults/NoDataComponent/index.tsx | 2 ++ .../AnalyticalTable/hooks/useRowHighlight.tsx | 1 + .../hooks/useRowNavigationIndicator.tsx | 1 + .../AnalyticalTable/hooks/useRowSelectionColumn.tsx | 1 + .../main/src/components/AnalyticalTable/index.tsx | 2 +- .../pluginHooks/useRowDisableSelection.tsx | 1 + .../AnalyticalTable/scrollbars/VerticalScrollbar.tsx | 2 +- packages/main/src/components/DynamicPage/CodeGen.tsx | 2 ++ packages/main/src/components/DynamicPage/index.tsx | 2 +- .../src/components/DynamicPageAnchorBar/index.tsx | 2 +- .../main/src/components/DynamicPageHeader/index.tsx | 2 +- .../src/components/DynamicPageTitle/ActionsSpacer.tsx | 1 + .../main/src/components/DynamicPageTitle/index.tsx | 11 ++++++++++- packages/main/src/components/ExpandableText/index.tsx | 2 +- .../main/src/components/FilterBar/FilterDialog.tsx | 11 +++++------ packages/main/src/components/FilterBar/index.tsx | 2 +- .../main/src/components/FilterGroupItem/index.tsx | 2 +- packages/main/src/components/FlexBox/index.tsx | 2 +- packages/main/src/components/Form/index.tsx | 2 +- .../main/src/components/FormGroup/FormGroupTitle.tsx | 1 + packages/main/src/components/FormGroup/index.tsx | 2 +- packages/main/src/components/FormItem/index.tsx | 2 +- packages/main/src/components/Grid/Grid.stories.tsx | 1 + packages/main/src/components/Grid/index.tsx | 2 +- packages/main/src/components/Loader/index.tsx | 2 +- packages/main/src/components/MessageBox/CodeGen.tsx | 1 + packages/main/src/components/MessageBox/index.tsx | 2 +- .../main/src/components/MessageView/MessageItem.tsx | 2 +- .../src/components/MessageView/MessageView.cy.tsx | 2 +- packages/main/src/components/MessageView/index.tsx | 2 +- .../MessageViewButton/MessageViewButton.cy.tsx | 1 + .../main/src/components/MessageViewButton/index.tsx | 2 +- packages/main/src/components/Modals/Modals.cy.tsx | 1 + .../main/src/components/Modals/Modals.stories.tsx | 1 + .../main/src/components/Modals/ModalsProvider.tsx | 2 +- .../src/components/NumericSideIndicator/index.tsx | 2 +- .../src/components/ObjectPage/CollapsedAvatar.tsx | 2 +- packages/main/src/components/ObjectPage/index.tsx | 11 ++++++++++- .../main/src/components/ObjectPageSection/index.tsx | 2 +- .../src/components/ObjectPageSubSection/index.tsx | 2 +- packages/main/src/components/ObjectStatus/index.tsx | 2 +- .../src/components/OverflowToolbarButton/index.tsx | 2 +- .../components/OverflowToolbarToggleButton/index.tsx | 2 +- .../src/components/ResponsiveGridLayout/index.tsx | 2 +- .../components/SelectDialog/SelectDialog.stories.tsx | 2 +- packages/main/src/components/SelectDialog/index.tsx | 2 +- packages/main/src/components/Splitter/index.tsx | 2 +- .../main/src/components/SplitterElement/index.tsx | 2 +- .../SplitterLayout/SplitterLayout.stories.tsx | 2 +- packages/main/src/components/SplitterLayout/index.tsx | 2 +- .../SplitterLayout/useConcatSplitterElements.tsx | 2 +- packages/main/src/components/Text/index.tsx | 2 +- packages/main/src/components/ThemeProvider/index.tsx | 1 + .../main/src/components/Toolbar/OverflowPopover.tsx | 2 +- packages/main/src/components/Toolbar/index.tsx | 2 +- .../main/src/components/ToolbarSeparator/index.tsx | 2 +- packages/main/src/components/ToolbarSpacer/index.tsx | 2 +- .../VariantManagement/ManageViewsDialog.tsx | 6 +++--- .../VariantManagement/ManageViewsTableRows.tsx | 2 +- .../components/VariantManagement/SaveViewDialog.tsx | 2 +- .../src/components/VariantManagement/VariantItem.tsx | 2 +- .../main/src/components/VariantManagement/index.tsx | 11 ++++++++++- packages/main/src/internal/I18nProvider.cy.tsx | 2 +- packages/main/src/internal/I18nProvider.tsx | 2 +- packages/main/src/internal/withWebComponent.tsx | 2 +- .../main/src/webComponents/AvatarGroup/CodeGen.tsx | 2 ++ packages/main/src/webComponents/Bar/CodeGen.tsx | 2 ++ packages/main/src/webComponents/Carousel/CodeGen.tsx | 2 ++ .../ColorPalettePopover.stories.tsx | 2 +- packages/main/src/webComponents/Dialog/CodeGen.tsx | 2 +- .../main/src/webComponents/Dialog/Dialog.stories.tsx | 2 +- .../src/webComponents/DynamicSideContent/CodeGen.tsx | 2 ++ .../MediaGallery/MediaGallery.stories.tsx | 2 +- packages/main/src/webComponents/Menu/Menu.stories.tsx | 2 +- packages/main/src/webComponents/Popover/CodeGen.tsx | 2 +- .../src/webComponents/ResponsivePopover/CodeGen.tsx | 2 +- packages/main/src/webComponents/Select/CodeGen.tsx | 2 +- .../src/webComponents/ShellBar/ShellBar.stories.tsx | 1 + packages/main/src/webComponents/Timeline/CodeGen.tsx | 2 ++ packages/main/src/webComponents/Toast/CodeGen.tsx | 2 +- .../ViewSettingsDialog/ViewSettingsDialog.stories.tsx | 2 +- packages/main/src/webComponents/Wizard/CodeGen.tsx | 2 ++ tsconfig.base.json | 2 +- 144 files changed, 193 insertions(+), 114 deletions(-) diff --git a/.eslintrc.yml b/.eslintrc.yml index 22123bced06..d8598d0da80 100644 --- a/.eslintrc.yml +++ b/.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' diff --git a/packages/base/src/Device/Media.cy.tsx b/packages/base/src/Device/Media.cy.tsx index a5e87fb53bf..5e8a7267efa 100644 --- a/packages/base/src/Device/Media.cy.tsx +++ b/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'; diff --git a/packages/charts/src/components/BarChart/BarChart.tsx b/packages/charts/src/components/BarChart/BarChart.tsx index 26c399131c5..3dc4df94c12 100644 --- a/packages/charts/src/components/BarChart/BarChart.tsx +++ b/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, diff --git a/packages/charts/src/components/BarChart/Placeholder.tsx b/packages/charts/src/components/BarChart/Placeholder.tsx index 8e93939bc21..f995f5cb880 100644 --- a/packages/charts/src/components/BarChart/Placeholder.tsx +++ b/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 = () => { diff --git a/packages/charts/src/components/BulletChart/BulletChart.tsx b/packages/charts/src/components/BulletChart/BulletChart.tsx index 977e72eaa36..95096621ee1 100644 --- a/packages/charts/src/components/BulletChart/BulletChart.tsx +++ b/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, diff --git a/packages/charts/src/components/BulletChart/ComparisonLine.tsx b/packages/charts/src/components/BulletChart/ComparisonLine.tsx index f923e676540..92a74e3d0dd 100644 --- a/packages/charts/src/components/BulletChart/ComparisonLine.tsx +++ b/packages/charts/src/components/BulletChart/ComparisonLine.tsx @@ -1,4 +1,5 @@ import type { CSSProperties } from 'react'; +import React from 'react'; interface ComparisonLine { x?: number; diff --git a/packages/charts/src/components/BulletChart/Placeholder.tsx b/packages/charts/src/components/BulletChart/Placeholder.tsx index af140ddc534..3a157c7b1d4 100644 --- a/packages/charts/src/components/BulletChart/Placeholder.tsx +++ b/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'; diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.tsx index de881fce167..2edd1cb9798 100644 --- a/packages/charts/src/components/ColumnChart/ColumnChart.tsx +++ b/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, diff --git a/packages/charts/src/components/ColumnChart/Placeholder.tsx b/packages/charts/src/components/ColumnChart/Placeholder.tsx index 61e2664b747..5c0d92cb5ff 100644 --- a/packages/charts/src/components/ColumnChart/Placeholder.tsx +++ b/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) => { diff --git a/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.tsx b/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.tsx index e122e0dc3b9..c3efdc5a613 100644 --- a/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.tsx +++ b/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'; diff --git a/packages/charts/src/components/ColumnChartWithTrend/Placeholder.tsx b/packages/charts/src/components/ColumnChartWithTrend/Placeholder.tsx index 0fcb975fc08..beb165c9d96 100644 --- a/packages/charts/src/components/ColumnChartWithTrend/Placeholder.tsx +++ b/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) => { diff --git a/packages/charts/src/components/ComposedChart/Placeholder.tsx b/packages/charts/src/components/ComposedChart/Placeholder.tsx index 63a1631a6b5..f5ab6487aa2 100644 --- a/packages/charts/src/components/ComposedChart/Placeholder.tsx +++ b/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'; diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx index 403a49f85ff..7cfea13ce7d 100644 --- a/packages/charts/src/components/ComposedChart/index.tsx +++ b/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, diff --git a/packages/charts/src/components/DonutChart/DonutChart.tsx b/packages/charts/src/components/DonutChart/DonutChart.tsx index f4b1e3aabc9..53a848f9ae1 100644 --- a/packages/charts/src/components/DonutChart/DonutChart.tsx +++ b/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'; diff --git a/packages/charts/src/components/LineChart/LineChart.stories.tsx b/packages/charts/src/components/LineChart/LineChart.stories.tsx index 4ebe61c6f48..2fff420a1de 100644 --- a/packages/charts/src/components/LineChart/LineChart.stories.tsx +++ b/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'; diff --git a/packages/charts/src/components/LineChart/LineChart.tsx b/packages/charts/src/components/LineChart/LineChart.tsx index b6494ca2d50..7db6e3cab19 100644 --- a/packages/charts/src/components/LineChart/LineChart.tsx +++ b/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, diff --git a/packages/charts/src/components/LineChart/Placeholder.tsx b/packages/charts/src/components/LineChart/Placeholder.tsx index db6475e2fe3..c8a1aad83bb 100644 --- a/packages/charts/src/components/LineChart/Placeholder.tsx +++ b/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) => { diff --git a/packages/charts/src/components/MicroBarChart/MicroBarChart.tsx b/packages/charts/src/components/MicroBarChart/MicroBarChart.tsx index 22ec0a654fc..9c428e5ead5 100644 --- a/packages/charts/src/components/MicroBarChart/MicroBarChart.tsx +++ b/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'; diff --git a/packages/charts/src/components/PieChart/PieChart.tsx b/packages/charts/src/components/PieChart/PieChart.tsx index 42fa1ebcbe8..53f021e001b 100644 --- a/packages/charts/src/components/PieChart/PieChart.tsx +++ b/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, diff --git a/packages/charts/src/components/PieChart/Placeholder.tsx b/packages/charts/src/components/PieChart/Placeholder.tsx index 58e4b58e469..42ce86e303c 100644 --- a/packages/charts/src/components/PieChart/Placeholder.tsx +++ b/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) => { diff --git a/packages/charts/src/components/RadarChart/RadarChart.tsx b/packages/charts/src/components/RadarChart/RadarChart.tsx index e82b23d0fe7..f8bb279f5c4 100644 --- a/packages/charts/src/components/RadarChart/RadarChart.tsx +++ b/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, diff --git a/packages/charts/src/components/RadialChart/RadialChart.tsx b/packages/charts/src/components/RadialChart/RadialChart.tsx index 9932bbd9a72..414125c512f 100644 --- a/packages/charts/src/components/RadialChart/RadialChart.tsx +++ b/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'; diff --git a/packages/charts/src/components/ScatterChart/Placeholder.tsx b/packages/charts/src/components/ScatterChart/Placeholder.tsx index afeb8973a71..a21158e4b9b 100644 --- a/packages/charts/src/components/ScatterChart/Placeholder.tsx +++ b/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) => { diff --git a/packages/charts/src/components/ScatterChart/ScatterChart.tsx b/packages/charts/src/components/ScatterChart/ScatterChart.tsx index e468b8a4967..cc09fd438ee 100644 --- a/packages/charts/src/components/ScatterChart/ScatterChart.tsx +++ b/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, diff --git a/packages/charts/src/components/TimelineChart/Placeholder.tsx b/packages/charts/src/components/TimelineChart/Placeholder.tsx index 7d87a2a3703..6b7e44033f4 100644 --- a/packages/charts/src/components/TimelineChart/Placeholder.tsx +++ b/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 = () => { diff --git a/packages/charts/src/components/TimelineChart/TimeLineChart.stories.tsx b/packages/charts/src/components/TimelineChart/TimeLineChart.stories.tsx index 01df003343f..129de7703c2 100644 --- a/packages/charts/src/components/TimelineChart/TimeLineChart.stories.tsx +++ b/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'; diff --git a/packages/charts/src/components/TimelineChart/TimelineChart.tsx b/packages/charts/src/components/TimelineChart/TimelineChart.tsx index 6cc2c4c6430..fb31973e062 100644 --- a/packages/charts/src/components/TimelineChart/TimelineChart.tsx +++ b/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( 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` diff --git a/packages/charts/src/components/TimelineChart/TimelineChartAnnotation.tsx b/packages/charts/src/components/TimelineChart/TimelineChartAnnotation.tsx index b915324272a..c79fff14751 100644 --- a/packages/charts/src/components/TimelineChart/TimelineChartAnnotation.tsx +++ b/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'; diff --git a/packages/charts/src/components/TimelineChart/TimelineChartHeaders.tsx b/packages/charts/src/components/TimelineChart/TimelineChartHeaders.tsx index 93d0091b9d5..dc249ed54b0 100644 --- a/packages/charts/src/components/TimelineChart/TimelineChartHeaders.tsx +++ b/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'; diff --git a/packages/charts/src/components/TimelineChart/chartbody/TimelineChartBody.tsx b/packages/charts/src/components/TimelineChart/chartbody/TimelineChartBody.tsx index 3f10ae50cd1..5930efcdee5 100644 --- a/packages/charts/src/components/TimelineChart/chartbody/TimelineChartBody.tsx +++ b/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'; diff --git a/packages/charts/src/components/TimelineChart/chartbody/TimelineChartGrid.tsx b/packages/charts/src/components/TimelineChart/chartbody/TimelineChartGrid.tsx index 7d99f7521e8..e4ec95858c6 100644 --- a/packages/charts/src/components/TimelineChart/chartbody/TimelineChartGrid.tsx +++ b/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 { diff --git a/packages/charts/src/components/TimelineChart/chartbody/TimelineChartLayer.tsx b/packages/charts/src/components/TimelineChart/chartbody/TimelineChartLayer.tsx index 904a1c6c3ac..f458a04f42b 100644 --- a/packages/charts/src/components/TimelineChart/chartbody/TimelineChartLayer.tsx +++ b/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 { diff --git a/packages/charts/src/components/TimelineChart/chartbody/TimelineChartRow.tsx b/packages/charts/src/components/TimelineChart/chartbody/TimelineChartRow.tsx index e41c25d936c..a8ab05ca210 100644 --- a/packages/charts/src/components/TimelineChart/chartbody/TimelineChartRow.tsx +++ b/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; diff --git a/packages/charts/src/components/TimelineChart/chartbody/TimelineConnections.tsx b/packages/charts/src/components/TimelineChart/chartbody/TimelineConnections.tsx index ad76c946045..9683140d435 100644 --- a/packages/charts/src/components/TimelineChart/chartbody/TimelineConnections.tsx +++ b/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'; diff --git a/packages/charts/src/components/TimelineChart/examples/Annotations.tsx b/packages/charts/src/components/TimelineChart/examples/Annotations.tsx index e7b11dd1b16..f8dcee6e7ab 100644 --- a/packages/charts/src/components/TimelineChart/examples/Annotations.tsx +++ b/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 { diff --git a/packages/charts/src/internal/ChartContainer.tsx b/packages/charts/src/internal/ChartContainer.tsx index ed0f8fdab79..493ee1b48bc 100644 --- a/packages/charts/src/internal/ChartContainer.tsx +++ b/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'; diff --git a/packages/charts/src/internal/ChartDataLabel.tsx b/packages/charts/src/internal/ChartDataLabel.tsx index 757062bf830..2df7f39c0fd 100644 --- a/packages/charts/src/internal/ChartDataLabel.tsx +++ b/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'; diff --git a/packages/charts/src/internal/XAxisTicks.tsx b/packages/charts/src/internal/XAxisTicks.tsx index 98cbfa2aae2..fd2c326f980 100644 --- a/packages/charts/src/internal/XAxisTicks.tsx +++ b/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'; diff --git a/packages/charts/src/internal/YAxisTicks.tsx b/packages/charts/src/internal/YAxisTicks.tsx index 6fd4b7352cd..2686a3720ff 100644 --- a/packages/charts/src/internal/YAxisTicks.tsx +++ b/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'; diff --git a/packages/cypress-commands/CommandsAndQueries.tsx b/packages/cypress-commands/CommandsAndQueries.tsx index 479f4f57b84..26d0ccfc61c 100644 --- a/packages/cypress-commands/CommandsAndQueries.tsx +++ b/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; diff --git a/packages/main/src/components/ActionSheet/ActionSheet.stories.tsx b/packages/main/src/components/ActionSheet/ActionSheet.stories.tsx index d360bc22ddf..32475849d85 100644 --- a/packages/main/src/components/ActionSheet/ActionSheet.stories.tsx +++ b/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'; diff --git a/packages/main/src/components/ActionSheet/index.tsx b/packages/main/src/components/ActionSheet/index.tsx index 0e43be26048..9cf1bcaf2e6 100644 --- a/packages/main/src/components/ActionSheet/index.tsx +++ b/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'; diff --git a/packages/main/src/components/AnalyticalCard/index.tsx b/packages/main/src/components/AnalyticalCard/index.tsx index 576e6b177e8..f02dad8fde1 100644 --- a/packages/main/src/components/AnalyticalCard/index.tsx +++ b/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'; diff --git a/packages/main/src/components/AnalyticalCardHeader/index.tsx b/packages/main/src/components/AnalyticalCardHeader/index.tsx index eb80f79094b..3e9fd97eefd 100644 --- a/packages/main/src/components/AnalyticalCardHeader/index.tsx +++ b/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 { diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx index eef525f8131..5345f176522 100644 --- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx +++ b/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, diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx index 441e7d5a9c7..21528e8e8bc 100644 --- a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx +++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx @@ -1,6 +1,6 @@ import type { Virtualizer } from '@tanstack/react-virtual'; import { ThemingParameters } from '@ui5/webcomponents-react-base'; -import { forwardRef, Fragment } from 'react'; +import React, { forwardRef, Fragment } from 'react'; import { createUseStyles } from 'react-jss'; import type { DivWithCustomScrollProp } from '../types/index.js'; import { ColumnHeader } from './index.js'; diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx index de327b673e9..64ac58025d5 100644 --- a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx +++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx @@ -5,7 +5,7 @@ import iconSortAscending from '@ui5/webcomponents-icons/dist/sort-ascending.js'; import iconSortDescending from '@ui5/webcomponents-icons/dist/sort-descending.js'; import { enrichEventWithDetails, ThemingParameters, useI18nBundle } from '@ui5/webcomponents-react-base'; import type { MutableRefObject } from 'react'; -import { useEffect, useRef } from 'react'; +import React, { useEffect, useRef } from 'react'; import { createPortal } from 'react-dom'; import { createUseStyles } from 'react-jss'; import { diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx index 0d3c3c546ca..9948ab31739 100644 --- a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx +++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx @@ -13,7 +13,7 @@ import type { MouseEventHandler, ReactNode } from 'react'; -import { useRef, useState } from 'react'; +import React, { useRef, useState } from 'react'; import { createUseStyles } from 'react-jss'; import { CustomThemingParameters } from '../../../themes/CustomVariables.js'; import { Icon } from '../../../webComponents/Icon/index.js'; diff --git a/packages/main/src/components/AnalyticalTable/TableBody/EmptyRow.tsx b/packages/main/src/components/AnalyticalTable/TableBody/EmptyRow.tsx index 95f8947cf2a..89ddfcc8b12 100644 --- a/packages/main/src/components/AnalyticalTable/TableBody/EmptyRow.tsx +++ b/packages/main/src/components/AnalyticalTable/TableBody/EmptyRow.tsx @@ -1,5 +1,6 @@ import type { VirtualItem } from '@tanstack/react-virtual'; import type { ReactNode } from 'react'; +import React from 'react'; export const EmptyRow = ({ virtualRow, diff --git a/packages/main/src/components/AnalyticalTable/TableBody/RowSubComponent.tsx b/packages/main/src/components/AnalyticalTable/TableBody/RowSubComponent.tsx index 50bebdce08f..b01fdfa7d17 100644 --- a/packages/main/src/components/AnalyticalTable/TableBody/RowSubComponent.tsx +++ b/packages/main/src/components/AnalyticalTable/TableBody/RowSubComponent.tsx @@ -1,7 +1,7 @@ import type { VirtualItem } from '@tanstack/react-virtual'; import { ThemingParameters } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { useEffect, useRef } from 'react'; +import React, { useEffect, useRef } from 'react'; import { createUseStyles } from 'react-jss'; const styles = { diff --git a/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx b/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx index d3d68927ba2..76aabe1db2f 100644 --- a/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx +++ b/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx @@ -2,7 +2,7 @@ import type { Virtualizer } from '@tanstack/react-virtual'; import { useVirtualizer } from '@tanstack/react-virtual'; import { clsx } from 'clsx'; import type { MutableRefObject, ReactNode } from 'react'; -import { useCallback, useEffect, useMemo, useRef } from 'react'; +import React, { useCallback, useEffect, useMemo, useRef } from 'react'; import { AnalyticalTableSubComponentsBehavior } from '../../../enums/index.js'; import type { ScrollToRefType } from '../interfaces.js'; import type { AnalyticalTablePropTypes, DivWithCustomScrollProp, TriggerScrollState } from '../types/index.js'; diff --git a/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBodyContainer.tsx b/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBodyContainer.tsx index 0feda8f6278..dd64d5e7cd8 100644 --- a/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBodyContainer.tsx +++ b/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBodyContainer.tsx @@ -1,6 +1,6 @@ import { enrichEventWithDetails } from '@ui5/webcomponents-react-base'; import type { MutableRefObject } from 'react'; -import { useCallback, useEffect, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useRef, useState } from 'react'; import type { AnalyticalTablePropTypes } from '../types/index.js'; interface VirtualTableBodyContainerProps { diff --git a/packages/main/src/components/AnalyticalTable/TitleBar/index.tsx b/packages/main/src/components/AnalyticalTable/TitleBar/index.tsx index 20d0f3b97ce..c47d5aa4170 100644 --- a/packages/main/src/components/AnalyticalTable/TitleBar/index.tsx +++ b/packages/main/src/components/AnalyticalTable/TitleBar/index.tsx @@ -1,5 +1,5 @@ import type { ReactNode } from 'react'; -import { forwardRef, isValidElement } from 'react'; +import React, { forwardRef, isValidElement } from 'react'; import { Title } from '../../../webComponents/Title/index.js'; const styles = { diff --git a/packages/main/src/components/AnalyticalTable/VerticalResizer.tsx b/packages/main/src/components/AnalyticalTable/VerticalResizer.tsx index 02d8f57e212..24de98641aa 100644 --- a/packages/main/src/components/AnalyticalTable/VerticalResizer.tsx +++ b/packages/main/src/components/AnalyticalTable/VerticalResizer.tsx @@ -1,6 +1,6 @@ import { ThemingParameters, useI18nBundle } from '@ui5/webcomponents-react-base'; import type { MutableRefObject } from 'react'; -import { useCallback, useEffect, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; import { createUseStyles } from 'react-jss'; import { DRAG_TO_RESIZE } from '../../i18n/i18n-defaults.js'; diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/Cell.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/Cell.tsx index 1170b0fa4cd..b5158dfa417 100644 --- a/packages/main/src/components/AnalyticalTable/defaults/Column/Cell.tsx +++ b/packages/main/src/components/AnalyticalTable/defaults/Column/Cell.tsx @@ -1,3 +1,5 @@ +import React from 'react'; + export const Cell = ({ cell: { value = '', isGrouped }, row, webComponentsReactProperties }) => { let cellContent = `${value ?? ''}`; if (isGrouped) { diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx index 11304ab3c19..0e88c93fdf6 100644 --- a/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx +++ b/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx @@ -2,6 +2,7 @@ import iconNavDownArrow from '@ui5/webcomponents-icons/dist/navigation-down-arro import iconNavRightArrow from '@ui5/webcomponents-icons/dist/navigation-right-arrow.js'; import { CssSizeVariables, ThemingParameters, useCurrentTheme } from '@ui5/webcomponents-react-base'; import type { CSSProperties } from 'react'; +import React from 'react'; import { createUseStyles } from 'react-jss'; import { ButtonDesign } from '../../../../enums/index.js'; import { Button, Icon } from '../../../../webComponents/index.js'; diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/Grouped.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/Grouped.tsx index bb38ddb8179..cfe7a47e131 100644 --- a/packages/main/src/components/AnalyticalTable/defaults/Column/Grouped.tsx +++ b/packages/main/src/components/AnalyticalTable/defaults/Column/Grouped.tsx @@ -1,6 +1,7 @@ import iconNavDownArrow from '@ui5/webcomponents-icons/dist/navigation-down-arrow.js'; import iconNavRightArrow from '@ui5/webcomponents-icons/dist/navigation-right-arrow.js'; import type { CSSProperties } from 'react'; +import React from 'react'; import { TextAlign } from '../../../../enums/index.js'; import { Icon } from '../../../../webComponents/index.js'; diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/PopIn.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/PopIn.tsx index ea4af32029a..3a96e44c3ad 100644 --- a/packages/main/src/components/AnalyticalTable/defaults/Column/PopIn.tsx +++ b/packages/main/src/components/AnalyticalTable/defaults/Column/PopIn.tsx @@ -1,4 +1,5 @@ import { ThemingParameters } from '@ui5/webcomponents-react-base'; +import React from 'react'; import { createUseStyles } from 'react-jss'; import { makeRenderer } from 'react-table'; import { FlexBoxAlignItems, FlexBoxDirection, FlexBoxWrap } from '../../../../enums/index.js'; diff --git a/packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx b/packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx index 8a6098dca53..aae47631e65 100644 --- a/packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx +++ b/packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx @@ -1,5 +1,5 @@ import type { FC } from 'react'; -import { useCallback } from 'react'; +import React, { useCallback } from 'react'; import { stopPropagation } from '../../../../internal/stopPropagation.js'; import { Input } from '../../../../webComponents/Input/index.js'; diff --git a/packages/main/src/components/AnalyticalTable/defaults/LoadingComponent/TablePlaceholder.tsx b/packages/main/src/components/AnalyticalTable/defaults/LoadingComponent/TablePlaceholder.tsx index 27a3480db1d..5a586f8e45c 100644 --- a/packages/main/src/components/AnalyticalTable/defaults/LoadingComponent/TablePlaceholder.tsx +++ b/packages/main/src/components/AnalyticalTable/defaults/LoadingComponent/TablePlaceholder.tsx @@ -1,6 +1,7 @@ import { CssSizeVariables, ThemingParameters } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; import type { CSSProperties, FC } from 'react'; +import React from 'react'; import { createUseStyles } from 'react-jss'; import { resolveCellAlignment } from '../../util/index.js'; diff --git a/packages/main/src/components/AnalyticalTable/defaults/LoadingComponent/index.tsx b/packages/main/src/components/AnalyticalTable/defaults/LoadingComponent/index.tsx index e9b5b775fda..51729fca3b2 100644 --- a/packages/main/src/components/AnalyticalTable/defaults/LoadingComponent/index.tsx +++ b/packages/main/src/components/AnalyticalTable/defaults/LoadingComponent/index.tsx @@ -1,4 +1,5 @@ import { CssSizeVariables } from '@ui5/webcomponents-react-base'; +import React from 'react'; import { createUseStyles } from 'react-jss'; import { Loader } from '../../../Loader/index.js'; diff --git a/packages/main/src/components/AnalyticalTable/defaults/NoDataComponent/index.tsx b/packages/main/src/components/AnalyticalTable/defaults/NoDataComponent/index.tsx index d50dfcf4fdc..ca54236ae89 100644 --- a/packages/main/src/components/AnalyticalTable/defaults/NoDataComponent/index.tsx +++ b/packages/main/src/components/AnalyticalTable/defaults/NoDataComponent/index.tsx @@ -1,3 +1,5 @@ +import React from 'react'; + export const DefaultNoDataComponent = ({ noDataText, className, style }) => { return (
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useRowHighlight.tsx b/packages/main/src/components/AnalyticalTable/hooks/useRowHighlight.tsx index bc7ae24735c..4281b04b405 100644 --- a/packages/main/src/components/AnalyticalTable/hooks/useRowHighlight.tsx +++ b/packages/main/src/components/AnalyticalTable/hooks/useRowHighlight.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { ValueState } from '../../../enums/index.js'; import type { ReactTableHooks } from '../types/index.js'; diff --git a/packages/main/src/components/AnalyticalTable/hooks/useRowNavigationIndicator.tsx b/packages/main/src/components/AnalyticalTable/hooks/useRowNavigationIndicator.tsx index 72c35de488e..64b81b05a46 100644 --- a/packages/main/src/components/AnalyticalTable/hooks/useRowNavigationIndicator.tsx +++ b/packages/main/src/components/AnalyticalTable/hooks/useRowNavigationIndicator.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import type { ReactTableHooks } from '../types/index.js'; const baseStyles = { diff --git a/packages/main/src/components/AnalyticalTable/hooks/useRowSelectionColumn.tsx b/packages/main/src/components/AnalyticalTable/hooks/useRowSelectionColumn.tsx index ee863ad8084..64cd18b2a85 100644 --- a/packages/main/src/components/AnalyticalTable/hooks/useRowSelectionColumn.tsx +++ b/packages/main/src/components/AnalyticalTable/hooks/useRowSelectionColumn.tsx @@ -1,5 +1,6 @@ import { CssSizeVariablesNames, enrichEventWithDetails } from '@ui5/webcomponents-react-base'; import type { CSSProperties } from 'react'; +import React from 'react'; import { AnalyticalTableSelectionBehavior, AnalyticalTableSelectionMode } from '../../../enums/index.js'; import { CheckBox } from '../../../webComponents/CheckBox/index.js'; import type { ReactTableHooks } from '../types/index.js'; diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx index 1998ecd788a..f22d95caa3a 100644 --- a/packages/main/src/components/AnalyticalTable/index.tsx +++ b/packages/main/src/components/AnalyticalTable/index.tsx @@ -13,7 +13,7 @@ import { } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; import type { CSSProperties, MutableRefObject } from 'react'; -import { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react'; +import React, { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react'; import { createUseStyles } from 'react-jss'; import { useColumnOrder, diff --git a/packages/main/src/components/AnalyticalTable/pluginHooks/useRowDisableSelection.tsx b/packages/main/src/components/AnalyticalTable/pluginHooks/useRowDisableSelection.tsx index 4e789332ba2..4114d147337 100644 --- a/packages/main/src/components/AnalyticalTable/pluginHooks/useRowDisableSelection.tsx +++ b/packages/main/src/components/AnalyticalTable/pluginHooks/useRowDisableSelection.tsx @@ -1,4 +1,5 @@ import { enrichEventWithDetails } from '@ui5/webcomponents-react-base'; +import React from 'react'; import { AnalyticalTableSelectionBehavior, AnalyticalTableSelectionMode } from '../../../enums/index.js'; import { CheckBox } from '../../../webComponents/CheckBox/index.js'; import type { ReactTableHooks } from '../types/index.js'; diff --git a/packages/main/src/components/AnalyticalTable/scrollbars/VerticalScrollbar.tsx b/packages/main/src/components/AnalyticalTable/scrollbars/VerticalScrollbar.tsx index 66051693cbb..d3caf4466a4 100644 --- a/packages/main/src/components/AnalyticalTable/scrollbars/VerticalScrollbar.tsx +++ b/packages/main/src/components/AnalyticalTable/scrollbars/VerticalScrollbar.tsx @@ -1,7 +1,7 @@ import { ThemingParameters, useSyncRef } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; import type { MutableRefObject, RefObject } from 'react'; -import { forwardRef, useEffect, useRef } from 'react'; +import React, { forwardRef, useEffect, useRef } from 'react'; import { createUseStyles } from 'react-jss'; import { FlexBoxDirection, GlobalStyleClasses } from '../../../enums/index.js'; import { CustomThemingParameters } from '../../../themes/CustomVariables.js'; diff --git a/packages/main/src/components/DynamicPage/CodeGen.tsx b/packages/main/src/components/DynamicPage/CodeGen.tsx index 7f7fbf679fe..89a42bcf9db 100644 --- a/packages/main/src/components/DynamicPage/CodeGen.tsx +++ b/packages/main/src/components/DynamicPage/CodeGen.tsx @@ -1 +1,3 @@ +import React from 'react'; + export const SpacingSpan = ; diff --git a/packages/main/src/components/DynamicPage/index.tsx b/packages/main/src/components/DynamicPage/index.tsx index f528ab2b836..914d9210876 100644 --- a/packages/main/src/components/DynamicPage/index.tsx +++ b/packages/main/src/components/DynamicPage/index.tsx @@ -3,7 +3,7 @@ import { debounce, ThemingParameters, useSyncRef } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; import type { ReactElement, ReactNode } from 'react'; -import { cloneElement, forwardRef, useEffect, useRef, useState } from 'react'; +import React, { cloneElement, forwardRef, useEffect, useRef, useState } from 'react'; import { createUseStyles } from 'react-jss'; import { GlobalStyleClasses, PageBackgroundDesign } from '../../enums/index.js'; import { useObserveHeights } from '../../internal/useObserveHeights.js'; diff --git a/packages/main/src/components/DynamicPageAnchorBar/index.tsx b/packages/main/src/components/DynamicPageAnchorBar/index.tsx index 9973610ff12..25071bcdd74 100644 --- a/packages/main/src/components/DynamicPageAnchorBar/index.tsx +++ b/packages/main/src/components/DynamicPageAnchorBar/index.tsx @@ -5,7 +5,7 @@ import iconArrowDown from '@ui5/webcomponents-icons/dist/slim-arrow-down.js'; import iconArrowUp from '@ui5/webcomponents-icons/dist/slim-arrow-up.js'; import { enrichEventWithDetails, ThemingParameters, useI18nBundle } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; -import { forwardRef, useCallback, useEffect, useRef } from 'react'; +import React, { forwardRef, useCallback, useEffect, useRef } from 'react'; import type { CSSProperties } from 'react'; import { createUseStyles } from 'react-jss'; import { COLLAPSE_HEADER, EXPAND_HEADER, PIN_HEADER, UNPIN_HEADER } from '../../i18n/i18n-defaults.js'; diff --git a/packages/main/src/components/DynamicPageHeader/index.tsx b/packages/main/src/components/DynamicPageHeader/index.tsx index 9180782cc17..a0fe9a4c046 100644 --- a/packages/main/src/components/DynamicPageHeader/index.tsx +++ b/packages/main/src/components/DynamicPageHeader/index.tsx @@ -2,7 +2,7 @@ import { clsx } from 'clsx'; import type { ReactNode } from 'react'; -import { forwardRef, useMemo } from 'react'; +import React, { forwardRef, useMemo } from 'react'; import { createUseStyles } from 'react-jss'; import type { CommonProps } from '../../types/index.js'; import { DynamicPageHeaderStyles } from './DynamicPageHeader.jss.js'; diff --git a/packages/main/src/components/DynamicPageTitle/ActionsSpacer.tsx b/packages/main/src/components/DynamicPageTitle/ActionsSpacer.tsx index c80fe0e1f50..2307ae643d0 100644 --- a/packages/main/src/components/DynamicPageTitle/ActionsSpacer.tsx +++ b/packages/main/src/components/DynamicPageTitle/ActionsSpacer.tsx @@ -1,4 +1,5 @@ import type { MouseEventHandler } from 'react'; +import React from 'react'; interface ActionsSpacerProps { onClick: MouseEventHandler; diff --git a/packages/main/src/components/DynamicPageTitle/index.tsx b/packages/main/src/components/DynamicPageTitle/index.tsx index 5ed3bbd499a..473d88fbef2 100644 --- a/packages/main/src/components/DynamicPageTitle/index.tsx +++ b/packages/main/src/components/DynamicPageTitle/index.tsx @@ -3,7 +3,16 @@ import { debounce, Device, useSyncRef } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; import type { MutableRefObject, ReactElement, ReactNode } from 'react'; -import { Children, cloneElement, forwardRef, isValidElement, useCallback, useEffect, useRef, useState } from 'react'; +import React, { + Children, + cloneElement, + forwardRef, + isValidElement, + useCallback, + useEffect, + useRef, + useState +} from 'react'; import { createUseStyles } from 'react-jss'; import { FlexBoxAlignItems, FlexBoxJustifyContent, ToolbarDesign, ToolbarStyle } from '../../enums/index.js'; import { stopPropagation } from '../../internal/stopPropagation.js'; diff --git a/packages/main/src/components/ExpandableText/index.tsx b/packages/main/src/components/ExpandableText/index.tsx index 80918dd67a7..e2ee1655091 100644 --- a/packages/main/src/components/ExpandableText/index.tsx +++ b/packages/main/src/components/ExpandableText/index.tsx @@ -2,7 +2,7 @@ import { useI18nBundle, useIsomorphicId } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; -import { forwardRef, useEffect, useRef, useState } from 'react'; +import React, { forwardRef, useEffect, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; import { createUseStyles } from 'react-jss'; import { CLOSE_POPOVER, SHOW_FULL_TEXT, SHOW_LESS, SHOW_MORE } from '../../i18n/i18n-defaults.js'; diff --git a/packages/main/src/components/FilterBar/FilterDialog.tsx b/packages/main/src/components/FilterBar/FilterDialog.tsx index 57113b73256..f4a6622ccd9 100644 --- a/packages/main/src/components/FilterBar/FilterDialog.tsx +++ b/packages/main/src/components/FilterBar/FilterDialog.tsx @@ -2,8 +2,7 @@ import group2Icon from '@ui5/webcomponents-icons/dist/group-2.js'; import listIcon from '@ui5/webcomponents-icons/dist/list.js'; import searchIcon from '@ui5/webcomponents-icons/dist/search.js'; import { enrichEventWithDetails, useI18nBundle, useIsomorphicId } from '@ui5/webcomponents-react-base'; -import type { Dispatch, MutableRefObject, SetStateAction } from 'react'; -import { Children, cloneElement, useEffect, useReducer, useRef, useState } from 'react'; +import React, { Children, cloneElement, useEffect, useReducer, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; import { createUseStyles } from 'react-jss'; import { @@ -126,7 +125,7 @@ interface FilterDialogPropTypes { showRestoreButton: boolean; handleRestoreFilters: (e, source, filterElements) => void; handleDialogSave: (e, newRefs, updatedToggledFilters) => void; - handleSearchValueChange: Dispatch>; + handleSearchValueChange: React.Dispatch>; handleSelectionChange?: ( event: Ui5CustomEvent< TableDomRef, @@ -136,11 +135,11 @@ interface FilterDialogPropTypes { handleDialogSearch?: (event: CustomEvent<{ value: string; element: HTMLElement }>) => void; handleDialogCancel?: (event: Ui5CustomEvent) => void; portalContainer: Element; - dialogRef: MutableRefObject; + dialogRef: React.MutableRefObject; isListView: boolean; - setIsListView: Dispatch>; + setIsListView: React.Dispatch>; filteredAttribute: string; - setFilteredAttribute: Dispatch>; + setFilteredAttribute: React.Dispatch>; onAfterFiltersDialogOpen: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/components/FilterBar/index.tsx b/packages/main/src/components/FilterBar/index.tsx index 5e03c159bac..a100a1cb4d0 100644 --- a/packages/main/src/components/FilterBar/index.tsx +++ b/packages/main/src/components/FilterBar/index.tsx @@ -4,7 +4,7 @@ import searchIcon from '@ui5/webcomponents-icons/dist/search.js'; import { debounce, Device, enrichEventWithDetails, useI18nBundle } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; import type { CSSProperties, ElementType, ReactElement, ReactNode } from 'react'; -import { Children, cloneElement, forwardRef, isValidElement, useEffect, useRef, useState } from 'react'; +import React, { Children, cloneElement, forwardRef, isValidElement, useEffect, useRef, useState } from 'react'; import { createUseStyles } from 'react-jss'; import { ButtonDesign, ToolbarStyle } from '../../enums/index.js'; import { diff --git a/packages/main/src/components/FilterGroupItem/index.tsx b/packages/main/src/components/FilterGroupItem/index.tsx index b7d00a8cfbf..4df9c9519a4 100644 --- a/packages/main/src/components/FilterGroupItem/index.tsx +++ b/packages/main/src/components/FilterGroupItem/index.tsx @@ -3,7 +3,7 @@ import circleTask2Icon from '@ui5/webcomponents-icons/dist/circle-task-2.js'; import { clsx } from 'clsx'; import type { ReactElement } from 'react'; -import { forwardRef } from 'react'; +import React, { forwardRef } from 'react'; import { createUseStyles } from 'react-jss'; import { FlexBoxDirection, BusyIndicatorSize } from '../../enums/index.js'; import { addCustomCSSWithScoping } from '../../internal/addCustomCSSWithScoping.js'; diff --git a/packages/main/src/components/FlexBox/index.tsx b/packages/main/src/components/FlexBox/index.tsx index 9af4e903b19..e9551cde4f8 100644 --- a/packages/main/src/components/FlexBox/index.tsx +++ b/packages/main/src/components/FlexBox/index.tsx @@ -2,7 +2,7 @@ import { clsx } from 'clsx'; import type { ElementType, ReactNode } from 'react'; -import { forwardRef } from 'react'; +import React, { forwardRef } from 'react'; import { createUseStyles } from 'react-jss'; import { FlexBoxAlignItems, FlexBoxDirection, FlexBoxJustifyContent, FlexBoxWrap } from '../../enums/index.js'; import type { CommonProps } from '../../types/index.js'; diff --git a/packages/main/src/components/Form/index.tsx b/packages/main/src/components/Form/index.tsx index 00f14bf20ae..baad6473bb9 100644 --- a/packages/main/src/components/Form/index.tsx +++ b/packages/main/src/components/Form/index.tsx @@ -3,7 +3,7 @@ import { Device, useSyncRef } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; import type { ElementType, ReactNode } from 'react'; -import { forwardRef, useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react'; +import React, { forwardRef, useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react'; import { createUseStyles } from 'react-jss'; import { FormBackgroundDesign, TitleLevel } from '../../enums/index.js'; import type { CommonProps } from '../../types/index.js'; diff --git a/packages/main/src/components/FormGroup/FormGroupTitle.tsx b/packages/main/src/components/FormGroup/FormGroupTitle.tsx index 2f9cd147248..a76eab9fac1 100644 --- a/packages/main/src/components/FormGroup/FormGroupTitle.tsx +++ b/packages/main/src/components/FormGroup/FormGroupTitle.tsx @@ -1,5 +1,6 @@ import { CssSizeVariables, ThemingParameters } from '@ui5/webcomponents-react-base'; import type { CSSProperties } from 'react'; +import React from 'react'; import { createUseStyles } from 'react-jss'; interface FormGroupTitlePropTypes { diff --git a/packages/main/src/components/FormGroup/index.tsx b/packages/main/src/components/FormGroup/index.tsx index 215a3f6c76f..2cfb842d539 100644 --- a/packages/main/src/components/FormGroup/index.tsx +++ b/packages/main/src/components/FormGroup/index.tsx @@ -2,7 +2,7 @@ import { useIsomorphicId } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { useEffect, useMemo } from 'react'; +import React, { useEffect, useMemo } from 'react'; import { GroupContext, useFormContext } from '../Form/FormContext.js'; import { FormGroupTitle } from './FormGroupTitle.js'; diff --git a/packages/main/src/components/FormItem/index.tsx b/packages/main/src/components/FormItem/index.tsx index 869b1ae9b83..5aca248bb10 100644 --- a/packages/main/src/components/FormItem/index.tsx +++ b/packages/main/src/components/FormItem/index.tsx @@ -3,7 +3,7 @@ import { useIsomorphicId } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; import type { CSSProperties, ReactElement, ReactNode } from 'react'; -import { cloneElement, Fragment, isValidElement, useEffect, useMemo } from 'react'; +import React, { cloneElement, Fragment, isValidElement, useEffect, useMemo } from 'react'; import { createUseStyles } from 'react-jss'; import { WrappingType } from '../../enums/index.js'; import { flattenFragments } from '../../internal/utils.js'; diff --git a/packages/main/src/components/Grid/Grid.stories.tsx b/packages/main/src/components/Grid/Grid.stories.tsx index 214f9aa9074..045bc5dda11 100644 --- a/packages/main/src/components/Grid/Grid.stories.tsx +++ b/packages/main/src/components/Grid/Grid.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; import { Grid } from './index.js'; const meta = { diff --git a/packages/main/src/components/Grid/index.tsx b/packages/main/src/components/Grid/index.tsx index 9037c641c92..f3a7644eb59 100644 --- a/packages/main/src/components/Grid/index.tsx +++ b/packages/main/src/components/Grid/index.tsx @@ -3,7 +3,7 @@ import { useViewportRange } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; import type { CSSProperties, ReactNode } from 'react'; -import { forwardRef, isValidElement } from 'react'; +import React, { forwardRef, isValidElement } from 'react'; import { createUseStyles } from 'react-jss'; import { GridPosition } from '../../enums/index.js'; import { flattenFragments } from '../../internal/utils.js'; diff --git a/packages/main/src/components/Loader/index.tsx b/packages/main/src/components/Loader/index.tsx index 3135e819e45..896caf6339f 100644 --- a/packages/main/src/components/Loader/index.tsx +++ b/packages/main/src/components/Loader/index.tsx @@ -3,7 +3,7 @@ import { useI18nBundle } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; import type { CSSProperties } from 'react'; -import { forwardRef, useEffect, useState } from 'react'; +import React, { forwardRef, useEffect, useState } from 'react'; import { createUseStyles } from 'react-jss'; import { LoaderType } from '../../enums/index.js'; import { PLEASE_WAIT } from '../../i18n/i18n-defaults.js'; diff --git a/packages/main/src/components/MessageBox/CodeGen.tsx b/packages/main/src/components/MessageBox/CodeGen.tsx index fcdae17e560..43e55ef10d8 100644 --- a/packages/main/src/components/MessageBox/CodeGen.tsx +++ b/packages/main/src/components/MessageBox/CodeGen.tsx @@ -2,6 +2,7 @@ import { forwardRef } from 'react'; import { createPortal } from 'react-dom'; import { DialogDomRef } from '../../webComponents/index.js'; import { MessageBox as OriginalMessageBox, MessageBoxPropTypes } from './index.js'; +import React from 'react'; export const MessageBox = forwardRef((args, ref) => createPortal(, document.body) diff --git a/packages/main/src/components/MessageBox/index.tsx b/packages/main/src/components/MessageBox/index.tsx index c6db1cb9b8f..d21c20a9e75 100644 --- a/packages/main/src/components/MessageBox/index.tsx +++ b/packages/main/src/components/MessageBox/index.tsx @@ -4,7 +4,7 @@ import iconSysHelp from '@ui5/webcomponents-icons/dist/sys-help-2.js'; import { enrichEventWithDetails, useI18nBundle, useIsomorphicId } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; import type { ReactNode } from 'react'; -import { cloneElement, forwardRef, isValidElement } from 'react'; +import React, { cloneElement, forwardRef, isValidElement } from 'react'; import { createUseStyles } from 'react-jss'; import { ButtonDesign, diff --git a/packages/main/src/components/MessageView/MessageItem.tsx b/packages/main/src/components/MessageView/MessageItem.tsx index db7c02da879..2bffd465a49 100644 --- a/packages/main/src/components/MessageView/MessageItem.tsx +++ b/packages/main/src/components/MessageView/MessageItem.tsx @@ -4,7 +4,7 @@ import iconArrowRight from '@ui5/webcomponents-icons/dist/slim-arrow-right.js'; import { CssSizeVariables, ThemingParameters } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; import type { ReactNode } from 'react'; -import { forwardRef, useContext } from 'react'; +import React, { forwardRef, useContext } from 'react'; import { createUseStyles } from 'react-jss'; import { FlexBoxAlignItems, FlexBoxDirection, ListItemType, ValueState } from '../../enums/index.js'; import { MessageViewContext } from '../../internal/MessageViewContext.js'; diff --git a/packages/main/src/components/MessageView/MessageView.cy.tsx b/packages/main/src/components/MessageView/MessageView.cy.tsx index e6854a47daa..d314d5ad65b 100644 --- a/packages/main/src/components/MessageView/MessageView.cy.tsx +++ b/packages/main/src/components/MessageView/MessageView.cy.tsx @@ -1,4 +1,4 @@ -import { useRef } from 'react'; +import React, { useRef } from 'react'; import { ValueState } from '../../enums/index.js'; import { MessageItem } from './MessageItem'; import { MessageView } from './index.js'; diff --git a/packages/main/src/components/MessageView/index.tsx b/packages/main/src/components/MessageView/index.tsx index eff2a3614d9..872a3ca2cc5 100644 --- a/packages/main/src/components/MessageView/index.tsx +++ b/packages/main/src/components/MessageView/index.tsx @@ -4,7 +4,7 @@ import iconSlimArrowLeft from '@ui5/webcomponents-icons/dist/slim-arrow-left.js' import { ThemingParameters, useI18nBundle, useSyncRef } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; import type { ReactElement, ReactNode } from 'react'; -import { Children, forwardRef, Fragment, isValidElement, useCallback, useEffect, useState } from 'react'; +import React, { Children, forwardRef, Fragment, isValidElement, useCallback, useEffect, useState } from 'react'; import { createUseStyles } from 'react-jss'; import { ButtonDesign, diff --git a/packages/main/src/components/MessageViewButton/MessageViewButton.cy.tsx b/packages/main/src/components/MessageViewButton/MessageViewButton.cy.tsx index f35f1152ed1..3646b6e8ab6 100644 --- a/packages/main/src/components/MessageViewButton/MessageViewButton.cy.tsx +++ b/packages/main/src/components/MessageViewButton/MessageViewButton.cy.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { ValueState } from '../../enums/index.js'; import { MessageViewButton } from './index.js'; diff --git a/packages/main/src/components/MessageViewButton/index.tsx b/packages/main/src/components/MessageViewButton/index.tsx index a6b2e12786f..f9e80c3d6d2 100644 --- a/packages/main/src/components/MessageViewButton/index.tsx +++ b/packages/main/src/components/MessageViewButton/index.tsx @@ -6,7 +6,7 @@ import informationIcon from '@ui5/webcomponents-icons/dist/information.js'; import sysEnter2Icon from '@ui5/webcomponents-icons/dist/sys-enter-2.js'; import { ThemingParameters } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; -import { forwardRef } from 'react'; +import React, { forwardRef } from 'react'; import { createUseStyles } from 'react-jss'; import { ValueState } from '../../enums/index.js'; import type { ButtonDomRef, ButtonPropTypes } from '../../webComponents/index.js'; diff --git a/packages/main/src/components/Modals/Modals.cy.tsx b/packages/main/src/components/Modals/Modals.cy.tsx index ffabf428cb3..d58364fcaa1 100644 --- a/packages/main/src/components/Modals/Modals.cy.tsx +++ b/packages/main/src/components/Modals/Modals.cy.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { Bar, Button, MenuItem } from '../../webComponents/index.js'; import { Modals } from './index.js'; diff --git a/packages/main/src/components/Modals/Modals.stories.tsx b/packages/main/src/components/Modals/Modals.stories.tsx index c60935e1cef..b5fe846d49a 100644 --- a/packages/main/src/components/Modals/Modals.stories.tsx +++ b/packages/main/src/components/Modals/Modals.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; import { MessageBoxTypes } from '../../enums/index.js'; import { Bar, Button, MenuItem } from '../../webComponents/index.js'; import { Modals } from './index.js'; diff --git a/packages/main/src/components/Modals/ModalsProvider.tsx b/packages/main/src/components/Modals/ModalsProvider.tsx index 988c5838f89..fea5cd63e65 100644 --- a/packages/main/src/components/Modals/ModalsProvider.tsx +++ b/packages/main/src/components/Modals/ModalsProvider.tsx @@ -1,5 +1,5 @@ import type { ReactNode } from 'react'; -import { useMemo, useReducer } from 'react'; +import React, { useMemo, useReducer } from 'react'; import { createPortal } from 'react-dom'; import type { ModalState, UpdateModalStateAction } from '../../internal/ModalsContext.js'; import { getModalContext } from '../../internal/ModalsContext.js'; diff --git a/packages/main/src/components/NumericSideIndicator/index.tsx b/packages/main/src/components/NumericSideIndicator/index.tsx index 2bee1d38ba3..09a00063774 100644 --- a/packages/main/src/components/NumericSideIndicator/index.tsx +++ b/packages/main/src/components/NumericSideIndicator/index.tsx @@ -1,7 +1,7 @@ 'use client'; import { clsx } from 'clsx'; -import { forwardRef } from 'react'; +import React, { forwardRef } from 'react'; import { createUseStyles } from 'react-jss'; import { ValueColor } from '../../enums/index.js'; import type { CommonProps } from '../../types/index.js'; diff --git a/packages/main/src/components/ObjectPage/CollapsedAvatar.tsx b/packages/main/src/components/ObjectPage/CollapsedAvatar.tsx index 8dbc6175d47..dc446f60ffc 100644 --- a/packages/main/src/components/ObjectPage/CollapsedAvatar.tsx +++ b/packages/main/src/components/ObjectPage/CollapsedAvatar.tsx @@ -1,6 +1,6 @@ import { clsx } from 'clsx'; import type { CSSProperties, ReactElement } from 'react'; -import { cloneElement, useEffect, useMemo, useRef, useState } from 'react'; +import React, { cloneElement, useEffect, useMemo, useRef, useState } from 'react'; import { createUseStyles } from 'react-jss'; import { AvatarSize } from '../../enums/index.js'; diff --git a/packages/main/src/components/ObjectPage/index.tsx b/packages/main/src/components/ObjectPage/index.tsx index 1656cadac5f..a4481cf53ad 100644 --- a/packages/main/src/components/ObjectPage/index.tsx +++ b/packages/main/src/components/ObjectPage/index.tsx @@ -3,7 +3,16 @@ import { debounce, enrichEventWithDetails, ThemingParameters, useSyncRef } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; import type { CSSProperties, ReactElement, ReactNode } from 'react'; -import { cloneElement, forwardRef, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import React, { + cloneElement, + forwardRef, + isValidElement, + useCallback, + useEffect, + useMemo, + useRef, + useState +} from 'react'; import { createUseStyles } from 'react-jss'; import { AvatarSize, GlobalStyleClasses, ObjectPageMode } from '../../enums/index.js'; import { addCustomCSSWithScoping } from '../../internal/addCustomCSSWithScoping.js'; diff --git a/packages/main/src/components/ObjectPageSection/index.tsx b/packages/main/src/components/ObjectPageSection/index.tsx index ee57c7f475c..7c46ce2f2d2 100644 --- a/packages/main/src/components/ObjectPageSection/index.tsx +++ b/packages/main/src/components/ObjectPageSection/index.tsx @@ -2,7 +2,7 @@ import { clsx } from 'clsx'; import type { ReactNode } from 'react'; -import { forwardRef } from 'react'; +import React, { forwardRef } from 'react'; import { createUseStyles } from 'react-jss'; import type { TitleLevel } from '../../enums/index.js'; import type { CommonProps } from '../../types/index.js'; diff --git a/packages/main/src/components/ObjectPageSubSection/index.tsx b/packages/main/src/components/ObjectPageSubSection/index.tsx index 7d4acd85e57..190b5af99e3 100644 --- a/packages/main/src/components/ObjectPageSubSection/index.tsx +++ b/packages/main/src/components/ObjectPageSubSection/index.tsx @@ -3,7 +3,7 @@ import { ThemingParameters } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; import type { ReactNode } from 'react'; -import { forwardRef } from 'react'; +import React, { forwardRef } from 'react'; import { createUseStyles } from 'react-jss'; import type { TitleLevel } from '../../enums/index.js'; import { FlexBoxAlignItems, FlexBoxDirection, FlexBoxJustifyContent } from '../../enums/index.js'; diff --git a/packages/main/src/components/ObjectStatus/index.tsx b/packages/main/src/components/ObjectStatus/index.tsx index 3151bf6c620..b8abbe180b1 100644 --- a/packages/main/src/components/ObjectStatus/index.tsx +++ b/packages/main/src/components/ObjectStatus/index.tsx @@ -13,7 +13,7 @@ import successIcon from '@ui5/webcomponents-icons/dist/sys-enter-2.js'; import { useI18nBundle } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; import type { MouseEventHandler, ReactNode } from 'react'; -import { forwardRef } from 'react'; +import React, { forwardRef } from 'react'; import { createUseStyles } from 'react-jss'; import type { IndicationColor } from '../../enums/index.js'; import { ValueState } from '../../enums/index.js'; diff --git a/packages/main/src/components/OverflowToolbarButton/index.tsx b/packages/main/src/components/OverflowToolbarButton/index.tsx index a13f8910edd..37aac89a468 100644 --- a/packages/main/src/components/OverflowToolbarButton/index.tsx +++ b/packages/main/src/components/OverflowToolbarButton/index.tsx @@ -1,7 +1,7 @@ 'use client'; import type { ReactNode } from 'react'; -import { forwardRef, useContext } from 'react'; +import React, { forwardRef, useContext } from 'react'; import { OverflowPopoverContext } from '../../internal/OverflowPopoverContext.js'; import type { ButtonDomRef, ButtonPropTypes } from '../../webComponents/index.js'; import { Button } from '../../webComponents/index.js'; diff --git a/packages/main/src/components/OverflowToolbarToggleButton/index.tsx b/packages/main/src/components/OverflowToolbarToggleButton/index.tsx index f8e6758ae08..5b575a6cd7d 100644 --- a/packages/main/src/components/OverflowToolbarToggleButton/index.tsx +++ b/packages/main/src/components/OverflowToolbarToggleButton/index.tsx @@ -1,7 +1,7 @@ 'use client'; import type { ReactNode } from 'react'; -import { forwardRef, useContext } from 'react'; +import React, { forwardRef, useContext } from 'react'; import { OverflowPopoverContext } from '../../internal/OverflowPopoverContext.js'; import type { ToggleButtonDomRef, ToggleButtonPropTypes } from '../../webComponents/index.js'; import { ToggleButton } from '../../webComponents/index.js'; diff --git a/packages/main/src/components/ResponsiveGridLayout/index.tsx b/packages/main/src/components/ResponsiveGridLayout/index.tsx index a10aa7e64a2..08d81887cb0 100644 --- a/packages/main/src/components/ResponsiveGridLayout/index.tsx +++ b/packages/main/src/components/ResponsiveGridLayout/index.tsx @@ -2,7 +2,7 @@ import { clsx } from 'clsx'; import type { CSSProperties, ReactNode } from 'react'; -import { forwardRef } from 'react'; +import React, { forwardRef } from 'react'; import { createUseStyles } from 'react-jss'; import type { CommonProps } from '../../types/index.js'; import { ResponsiveGridLayoutStyles } from './ResponsiveGridLayout.jss.js'; diff --git a/packages/main/src/components/SelectDialog/SelectDialog.stories.tsx b/packages/main/src/components/SelectDialog/SelectDialog.stories.tsx index 74f71cf1648..3f78eb499fd 100644 --- a/packages/main/src/components/SelectDialog/SelectDialog.stories.tsx +++ b/packages/main/src/components/SelectDialog/SelectDialog.stories.tsx @@ -4,7 +4,7 @@ import Pc1 from '@sb/demoImages/PC1.jpg'; import Pc2 from '@sb/demoImages/PC2.jpg'; import { isChromatic } from '@sb/utils'; import type { Meta, StoryObj } from '@storybook/react'; -import { forwardRef, useEffect, useRef, useState } from 'react'; +import React, { forwardRef, useEffect, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; import type { DialogDomRef } from '../..'; import { Button, FlexBox, Label, ListMode, StandardListItem, Text } from '../..'; diff --git a/packages/main/src/components/SelectDialog/index.tsx b/packages/main/src/components/SelectDialog/index.tsx index 9f1def93368..efd9bab2807 100644 --- a/packages/main/src/components/SelectDialog/index.tsx +++ b/packages/main/src/components/SelectDialog/index.tsx @@ -11,7 +11,7 @@ import { } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; import type { ReactNode } from 'react'; -import { forwardRef, useState } from 'react'; +import React, { forwardRef, useState } from 'react'; import { createUseStyles } from 'react-jss'; import { ButtonDesign, ListMode, ToolbarDesign } from '../../enums/index.js'; import { CANCEL, CLEAR, RESET, SEARCH, SELECT, SELECTED } from '../../i18n/i18n-defaults.js'; diff --git a/packages/main/src/components/Splitter/index.tsx b/packages/main/src/components/Splitter/index.tsx index 6e96ab93803..7639fb4de87 100644 --- a/packages/main/src/components/Splitter/index.tsx +++ b/packages/main/src/components/Splitter/index.tsx @@ -10,7 +10,7 @@ import { useIsRTL, useSyncRef } from '@ui5/webcomponents-react-base'; -import { forwardRef, useEffect, useRef, useState } from 'react'; +import React, { forwardRef, useEffect, useRef, useState } from 'react'; import { createUseStyles } from 'react-jss'; import { ButtonDesign } from '../../enums/index.js'; import { PRESS_ARROW_KEYS_TO_MOVE } from '../../i18n/i18n-defaults.js'; diff --git a/packages/main/src/components/SplitterElement/index.tsx b/packages/main/src/components/SplitterElement/index.tsx index ff8f8e6b818..eb811f15449 100644 --- a/packages/main/src/components/SplitterElement/index.tsx +++ b/packages/main/src/components/SplitterElement/index.tsx @@ -3,7 +3,7 @@ import { Device, useIsomorphicLayoutEffect, useSyncRef } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; import type { CSSProperties, ReactNode } from 'react'; -import { forwardRef, useContext, useEffect, useState } from 'react'; +import React, { forwardRef, useContext, useEffect, useState } from 'react'; import { createUseStyles } from 'react-jss'; import { SplitterLayoutContext } from '../../internal/SplitterLayoutContext.js'; import type { CommonProps } from '../../types/index.js'; diff --git a/packages/main/src/components/SplitterLayout/SplitterLayout.stories.tsx b/packages/main/src/components/SplitterLayout/SplitterLayout.stories.tsx index 58bcc340b7c..f1b73a684f4 100644 --- a/packages/main/src/components/SplitterLayout/SplitterLayout.stories.tsx +++ b/packages/main/src/components/SplitterLayout/SplitterLayout.stories.tsx @@ -1,7 +1,7 @@ import { SplitterElementContent } from '@sb/components/SplitterElementContent'; import { isChromatic } from '@sb/utils'; import type { Meta, StoryObj } from '@storybook/react'; -import { useEffect, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { Button, FlexBox, Label, SegmentedButton, SegmentedButtonItem, SplitterElement } from '../..'; import { SplitterLayout } from './index.js'; diff --git a/packages/main/src/components/SplitterLayout/index.tsx b/packages/main/src/components/SplitterLayout/index.tsx index 77fe6c457ef..8328ed5f7e3 100644 --- a/packages/main/src/components/SplitterLayout/index.tsx +++ b/packages/main/src/components/SplitterLayout/index.tsx @@ -3,7 +3,7 @@ import { debounce, useSyncRef } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; import type { CSSProperties, DependencyList, ReactElement } from 'react'; -import { forwardRef, useEffect, useRef, useState } from 'react'; +import React, { forwardRef, useEffect, useRef, useState } from 'react'; import { createUseStyles } from 'react-jss'; import { SplitterLayoutContext } from '../../internal/SplitterLayoutContext.js'; import type { CommonProps } from '../../types/index.js'; diff --git a/packages/main/src/components/SplitterLayout/useConcatSplitterElements.tsx b/packages/main/src/components/SplitterLayout/useConcatSplitterElements.tsx index 5e92d43490b..c35603ad6b9 100644 --- a/packages/main/src/components/SplitterLayout/useConcatSplitterElements.tsx +++ b/packages/main/src/components/SplitterLayout/useConcatSplitterElements.tsx @@ -1,6 +1,6 @@ import { CssSizeVariables } from '@ui5/webcomponents-react-base'; import type { CSSProperties, ReactElement } from 'react'; -import { Children, cloneElement, isValidElement, useMemo } from 'react'; +import React, { Children, cloneElement, isValidElement, useMemo } from 'react'; import { Splitter } from '../Splitter/index.js'; import type { SplitterElementPropTypes } from '../SplitterElement/index.js'; diff --git a/packages/main/src/components/Text/index.tsx b/packages/main/src/components/Text/index.tsx index e62fb92e234..d0e436e05b9 100644 --- a/packages/main/src/components/Text/index.tsx +++ b/packages/main/src/components/Text/index.tsx @@ -3,7 +3,7 @@ import { useI18nBundle } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; import type { CSSProperties, ReactNode } from 'react'; -import { forwardRef } from 'react'; +import React, { forwardRef } from 'react'; import { createUseStyles } from 'react-jss'; import { EMPTY_VALUE } from '../../i18n/i18n-defaults.js'; import type { CommonProps } from '../../types/index.js'; diff --git a/packages/main/src/components/ThemeProvider/index.tsx b/packages/main/src/components/ThemeProvider/index.tsx index fa2b13da284..47980da8663 100644 --- a/packages/main/src/components/ThemeProvider/index.tsx +++ b/packages/main/src/components/ThemeProvider/index.tsx @@ -4,6 +4,7 @@ import { getTheme } from '@ui5/webcomponents-base/dist/config/Theme.js'; import { attachThemeLoaded, detachThemeLoaded } from '@ui5/webcomponents-base/dist/theming/ThemeLoaded.js'; import { ThemingParameters, useIsomorphicLayoutEffect } from '@ui5/webcomponents-react-base'; import type { FC, ReactNode } from 'react'; +import React from 'react'; import { createUseStyles, ThemeProvider as ReactJssThemeProvider } from 'react-jss'; import { I18nProvider } from '../../internal/I18nProvider.js'; import { ModalsProvider } from '../Modals/ModalsProvider.js'; diff --git a/packages/main/src/components/Toolbar/OverflowPopover.tsx b/packages/main/src/components/Toolbar/OverflowPopover.tsx index d9f1599843a..8e87dcf9714 100644 --- a/packages/main/src/components/Toolbar/OverflowPopover.tsx +++ b/packages/main/src/components/Toolbar/OverflowPopover.tsx @@ -2,7 +2,7 @@ import iconOverflow from '@ui5/webcomponents-icons/dist/overflow.js'; import { Device, useSyncRef } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; import type { Dispatch, FC, ReactElement, ReactNode, Ref, SetStateAction } from 'react'; -import { cloneElement, useEffect, useRef, useState } from 'react'; +import React, { cloneElement, useEffect, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; import { ButtonDesign, PopoverPlacementType, PopupAccessibleRole } from '../../enums/index.js'; import { OverflowPopoverContext } from '../../internal/OverflowPopoverContext.js'; diff --git a/packages/main/src/components/Toolbar/index.tsx b/packages/main/src/components/Toolbar/index.tsx index 55cbe204470..8f75f1ad4d1 100644 --- a/packages/main/src/components/Toolbar/index.tsx +++ b/packages/main/src/components/Toolbar/index.tsx @@ -9,7 +9,7 @@ import { } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; import type { ElementType, HTMLAttributes, ReactElement, ReactNode, Ref, RefObject } from 'react'; -import { +import React, { Children, cloneElement, createRef, diff --git a/packages/main/src/components/ToolbarSeparator/index.tsx b/packages/main/src/components/ToolbarSeparator/index.tsx index e4b8e3ec9bd..ddc8e590d94 100644 --- a/packages/main/src/components/ToolbarSeparator/index.tsx +++ b/packages/main/src/components/ToolbarSeparator/index.tsx @@ -2,7 +2,7 @@ import { CssSizeVariables, ThemingParameters, useI18nBundle } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; -import { forwardRef } from 'react'; +import React, { forwardRef } from 'react'; import { createUseStyles } from 'react-jss'; import { SEPARATOR } from '../../i18n/i18n-defaults.js'; import type { CommonProps } from '../../types/index.js'; diff --git a/packages/main/src/components/ToolbarSpacer/index.tsx b/packages/main/src/components/ToolbarSpacer/index.tsx index b3a64de5e9a..9eef3cc68e0 100644 --- a/packages/main/src/components/ToolbarSpacer/index.tsx +++ b/packages/main/src/components/ToolbarSpacer/index.tsx @@ -1,4 +1,4 @@ -import { forwardRef } from 'react'; +import React, { forwardRef } from 'react'; import type { CommonProps } from '../../types/index.js'; export type ToolbarSpacerPropTypes = CommonProps; diff --git a/packages/main/src/components/VariantManagement/ManageViewsDialog.tsx b/packages/main/src/components/VariantManagement/ManageViewsDialog.tsx index c70b888f628..106ff172766 100644 --- a/packages/main/src/components/VariantManagement/ManageViewsDialog.tsx +++ b/packages/main/src/components/VariantManagement/ManageViewsDialog.tsx @@ -7,7 +7,7 @@ import { useIsomorphicId } from '@ui5/webcomponents-react-base'; import type { MouseEventHandler, ReactNode } from 'react'; -import { isValidElement, Children, useEffect, useRef, useState } from 'react'; +import React, { Children, useEffect, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; import { createUseStyles } from 'react-jss'; import { BarDesign, FlexBoxAlignItems, FlexBoxDirection, ButtonDesign } from '../../enums/index.js'; @@ -154,7 +154,7 @@ export const ManageViewsDialog = (props: ManageViewsDialogPropTypes) => { const [childrenProps, setChildrenProps] = useState( Children.map(children, (child) => { - if (!isValidElement(child)) { + if (!React.isValidElement(child)) { return {}; } return child.props; @@ -163,7 +163,7 @@ export const ManageViewsDialog = (props: ManageViewsDialogPropTypes) => { useEffect(() => { setChildrenProps( Children.map(children, (child) => { - if (!isValidElement(child)) { + if (!React.isValidElement(child)) { return {}; } return child.props; diff --git a/packages/main/src/components/VariantManagement/ManageViewsTableRows.tsx b/packages/main/src/components/VariantManagement/ManageViewsTableRows.tsx index 5163f1bce8b..ec198c2f9d9 100644 --- a/packages/main/src/components/VariantManagement/ManageViewsTableRows.tsx +++ b/packages/main/src/components/VariantManagement/ManageViewsTableRows.tsx @@ -2,7 +2,7 @@ import declineIcon from '@ui5/webcomponents-icons/dist/decline.js'; import favoriteIcon from '@ui5/webcomponents-icons/dist/favorite.js'; import unfavoriteIcon from '@ui5/webcomponents-icons/dist/unfavorite.js'; import { ThemingParameters, useI18nBundle } from '@ui5/webcomponents-react-base'; -import { useReducer, useRef, useState } from 'react'; +import React, { useReducer, useRef, useState } from 'react'; import { ButtonDesign, ValueState } from '../../enums/index.js'; import { APPLY_AUTOMATICALLY, diff --git a/packages/main/src/components/VariantManagement/SaveViewDialog.tsx b/packages/main/src/components/VariantManagement/SaveViewDialog.tsx index f47320dd570..2c62876719e 100644 --- a/packages/main/src/components/VariantManagement/SaveViewDialog.tsx +++ b/packages/main/src/components/VariantManagement/SaveViewDialog.tsx @@ -1,6 +1,6 @@ import { enrichEventWithDetails, useI18nBundle, useIsomorphicId } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; -import { useRef, useState } from 'react'; +import React, { useRef, useState } from 'react'; import { createPortal } from 'react-dom'; import { createUseStyles } from 'react-jss'; import { BarDesign, ButtonDesign, FlexBoxAlignItems, FlexBoxDirection } from '../../enums/index.js'; diff --git a/packages/main/src/components/VariantManagement/VariantItem.tsx b/packages/main/src/components/VariantManagement/VariantItem.tsx index 56fa9890746..72873c257b8 100644 --- a/packages/main/src/components/VariantManagement/VariantItem.tsx +++ b/packages/main/src/components/VariantManagement/VariantItem.tsx @@ -1,7 +1,7 @@ 'use client'; import { useSyncRef } from '@ui5/webcomponents-react-base'; -import { forwardRef, useContext, useEffect } from 'react'; +import React, { forwardRef, useContext, useEffect } from 'react'; import { VariantManagementContext } from '../../internal/VariantManagementContext.js'; import type { InputPropTypes } from '../../webComponents/index.js'; import type { StandardListItemDomRef, StandardListItemPropTypes } from '../../webComponents/StandardListItem/index.js'; diff --git a/packages/main/src/components/VariantManagement/index.tsx b/packages/main/src/components/VariantManagement/index.tsx index 3fa86061eb9..830237fdc2f 100644 --- a/packages/main/src/components/VariantManagement/index.tsx +++ b/packages/main/src/components/VariantManagement/index.tsx @@ -6,7 +6,16 @@ import searchIcon from '@ui5/webcomponents-icons/dist/search.js'; import { enrichEventWithDetails, ThemingParameters, useI18nBundle } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; import type { ComponentElement, ReactElement } from 'react'; -import { Children, cloneElement, forwardRef, isValidElement, useCallback, useEffect, useRef, useState } from 'react'; +import React, { + Children, + cloneElement, + forwardRef, + isValidElement, + useCallback, + useEffect, + useRef, + useState +} from 'react'; import { createPortal } from 'react-dom'; import { createUseStyles } from 'react-jss'; import { diff --git a/packages/main/src/internal/I18nProvider.cy.tsx b/packages/main/src/internal/I18nProvider.cy.tsx index 74ddb16bf84..e156b26325e 100644 --- a/packages/main/src/internal/I18nProvider.cy.tsx +++ b/packages/main/src/internal/I18nProvider.cy.tsx @@ -2,7 +2,7 @@ import { registerI18nLoader } from '@ui5/webcomponents-base/dist/asset-registrie import { setFetchDefaultLanguage, setLanguage } from '@ui5/webcomponents-base/dist/config/Language.js'; import { useI18nBundle } from '@ui5/webcomponents-react-base'; import { mount } from 'cypress/react18'; -import { useEffect, useRef } from 'react'; +import React, { useEffect, useRef } from 'react'; const TestComponent = () => { const i18nBundle = useI18nBundle('myApp'); diff --git a/packages/main/src/internal/I18nProvider.tsx b/packages/main/src/internal/I18nProvider.tsx index 013f1623cfe..e08e6b1584a 100644 --- a/packages/main/src/internal/I18nProvider.tsx +++ b/packages/main/src/internal/I18nProvider.tsx @@ -3,7 +3,7 @@ import { getI18nBundle } from '@ui5/webcomponents-base/dist/i18nBundle.js'; import { attachLanguageChange, detachLanguageChange } from '@ui5/webcomponents-base/dist/locale/languageChange.js'; import { getI18nContext } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { useCallback, useEffect, useReducer, useRef } from 'react'; +import React, { useCallback, useEffect, useReducer, useRef } from 'react'; export interface I18nProviderPropTypes { children: ReactNode; diff --git a/packages/main/src/internal/withWebComponent.tsx b/packages/main/src/internal/withWebComponent.tsx index a7731d398ef..461e0e354f4 100644 --- a/packages/main/src/internal/withWebComponent.tsx +++ b/packages/main/src/internal/withWebComponent.tsx @@ -3,7 +3,7 @@ import { getEffectiveScopingSuffixForTag } from '@ui5/webcomponents-base/dist/CustomElementsScope.js'; import { useIsomorphicLayoutEffect, useSyncRef } from '@ui5/webcomponents-react-base'; import type { ComponentType, ReactElement, ReactNode, Ref } from 'react'; -import { cloneElement, forwardRef, Fragment, isValidElement, useEffect, useState } from 'react'; +import React, { cloneElement, forwardRef, Fragment, isValidElement, useEffect, useState } from 'react'; import type { CommonProps, Ui5DomRef } from '../types/index.js'; import { useServerSideEffect } from './ssr.js'; import { camelToKebabCase, capitalizeFirstLetter, kebabToCamelCase } from './utils.js'; diff --git a/packages/main/src/webComponents/AvatarGroup/CodeGen.tsx b/packages/main/src/webComponents/AvatarGroup/CodeGen.tsx index 30f39c062d9..f070fc382d1 100644 --- a/packages/main/src/webComponents/AvatarGroup/CodeGen.tsx +++ b/packages/main/src/webComponents/AvatarGroup/CodeGen.tsx @@ -1,3 +1,5 @@ +import React from 'react'; + export const Avatar1 = ( Avatar1 ); diff --git a/packages/main/src/webComponents/Bar/CodeGen.tsx b/packages/main/src/webComponents/Bar/CodeGen.tsx index 5a2a7df5a95..6afccdf8043 100644 --- a/packages/main/src/webComponents/Bar/CodeGen.tsx +++ b/packages/main/src/webComponents/Bar/CodeGen.tsx @@ -1,3 +1,5 @@ +import React from 'react'; + export const StartContent = Start Content; export const CenterContent = Center Content; export const EndContent = End Content; diff --git a/packages/main/src/webComponents/Carousel/CodeGen.tsx b/packages/main/src/webComponents/Carousel/CodeGen.tsx index 6e5a625be3a..84b32a00adb 100644 --- a/packages/main/src/webComponents/Carousel/CodeGen.tsx +++ b/packages/main/src/webComponents/Carousel/CodeGen.tsx @@ -1,3 +1,5 @@ +import React from 'react'; + export const Img1 = img-sample 1; export const Img2 = img-sample 2; export const Img3 = img-sample 3; diff --git a/packages/main/src/webComponents/ColorPalettePopover/ColorPalettePopover.stories.tsx b/packages/main/src/webComponents/ColorPalettePopover/ColorPalettePopover.stories.tsx index 78c301e4c48..2853047350f 100644 --- a/packages/main/src/webComponents/ColorPalettePopover/ColorPalettePopover.stories.tsx +++ b/packages/main/src/webComponents/ColorPalettePopover/ColorPalettePopover.stories.tsx @@ -1,6 +1,6 @@ import { isChromatic } from '@sb/utils'; import type { Meta, StoryObj } from '@storybook/react'; -import { forwardRef, useEffect, useRef } from 'react'; +import React, { forwardRef, useEffect, useRef } from 'react'; import { createPortal } from 'react-dom'; import { Button } from '../Button'; import { ColorPaletteItem } from '../ColorPaletteItem'; diff --git a/packages/main/src/webComponents/Dialog/CodeGen.tsx b/packages/main/src/webComponents/Dialog/CodeGen.tsx index cef5c6005ef..eda00d6676a 100644 --- a/packages/main/src/webComponents/Dialog/CodeGen.tsx +++ b/packages/main/src/webComponents/Dialog/CodeGen.tsx @@ -1,4 +1,4 @@ -import { forwardRef } from 'react'; +import React, { forwardRef } from 'react'; import { createPortal } from 'react-dom'; import { Dialog as OriginalDialog, DialogDomRef, DialogPropTypes } from './index'; diff --git a/packages/main/src/webComponents/Dialog/Dialog.stories.tsx b/packages/main/src/webComponents/Dialog/Dialog.stories.tsx index 21749270d0b..ba96f6eda07 100644 --- a/packages/main/src/webComponents/Dialog/Dialog.stories.tsx +++ b/packages/main/src/webComponents/Dialog/Dialog.stories.tsx @@ -2,7 +2,7 @@ import { isChromatic } from '@sb/utils'; import type { Meta, StoryObj } from '@storybook/react'; import settingsIcon from '@ui5/webcomponents-icons/dist/settings.js'; import { clsx } from 'clsx'; -import { useEffect, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { BarDesign } from '../../enums'; import { Bar, Button, Icon, List, StandardListItem, Title } from '../index.js'; import { Dialog } from './CodeGen'; diff --git a/packages/main/src/webComponents/DynamicSideContent/CodeGen.tsx b/packages/main/src/webComponents/DynamicSideContent/CodeGen.tsx index 944cdeddefb..031e4d1051a 100644 --- a/packages/main/src/webComponents/DynamicSideContent/CodeGen.tsx +++ b/packages/main/src/webComponents/DynamicSideContent/CodeGen.tsx @@ -1,3 +1,5 @@ +import React from 'react'; + export const SideContent = (

Side Content

diff --git a/packages/main/src/webComponents/MediaGallery/MediaGallery.stories.tsx b/packages/main/src/webComponents/MediaGallery/MediaGallery.stories.tsx index 7ad188bf2c6..7452e458eaa 100644 --- a/packages/main/src/webComponents/MediaGallery/MediaGallery.stories.tsx +++ b/packages/main/src/webComponents/MediaGallery/MediaGallery.stories.tsx @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { useRef } from 'react'; +import React, { useRef } from 'react'; import { MediaGalleryLayout, MediaGalleryMenuHorizontalAlign, diff --git a/packages/main/src/webComponents/Menu/Menu.stories.tsx b/packages/main/src/webComponents/Menu/Menu.stories.tsx index a7991a0b79a..f42ef14f7ea 100644 --- a/packages/main/src/webComponents/Menu/Menu.stories.tsx +++ b/packages/main/src/webComponents/Menu/Menu.stories.tsx @@ -1,6 +1,6 @@ import { isChromatic } from '@sb/utils'; import type { Meta, StoryObj } from '@storybook/react'; -import { useEffect, useRef } from 'react'; +import React, { useEffect, useRef } from 'react'; import { Button } from '../Button/index.js'; import { MenuItem } from '../MenuItem/index.js'; import { Menu } from './index.js'; diff --git a/packages/main/src/webComponents/Popover/CodeGen.tsx b/packages/main/src/webComponents/Popover/CodeGen.tsx index 2f6f03617ef..6593aa0d510 100644 --- a/packages/main/src/webComponents/Popover/CodeGen.tsx +++ b/packages/main/src/webComponents/Popover/CodeGen.tsx @@ -1,6 +1,6 @@ import { createPortal } from 'react-dom'; import { Popover as OriginalPopover, PopoverDomRef, PopoverPropTypes } from './index'; -import { forwardRef } from 'react'; +import React, { forwardRef } from 'react'; export const Popover = forwardRef((args, ref) => createPortal(, document.body) diff --git a/packages/main/src/webComponents/ResponsivePopover/CodeGen.tsx b/packages/main/src/webComponents/ResponsivePopover/CodeGen.tsx index ae1299d741d..e07569fc317 100644 --- a/packages/main/src/webComponents/ResponsivePopover/CodeGen.tsx +++ b/packages/main/src/webComponents/ResponsivePopover/CodeGen.tsx @@ -4,7 +4,7 @@ import { ResponsivePopoverDomRef, ResponsivePopoverPropTypes } from './index'; -import { forwardRef } from 'react'; +import React, { forwardRef } from 'react'; export const ResponsivePopover = forwardRef((args, ref) => createPortal(, document.body) diff --git a/packages/main/src/webComponents/Select/CodeGen.tsx b/packages/main/src/webComponents/Select/CodeGen.tsx index d9c2bb7113a..c552f42e0c9 100644 --- a/packages/main/src/webComponents/Select/CodeGen.tsx +++ b/packages/main/src/webComponents/Select/CodeGen.tsx @@ -1,5 +1,5 @@ // todo remove once portals are supported inline, or general popovers are supported w/o having to mount them to the body -import { forwardRef } from 'react'; +import React, { forwardRef } from 'react'; import { createPortal } from 'react-dom'; import { SelectMenu as OriginalSelectMenu, SelectMenuDomRef, SelectMenuPropTypes } from '../SelectMenu'; diff --git a/packages/main/src/webComponents/ShellBar/ShellBar.stories.tsx b/packages/main/src/webComponents/ShellBar/ShellBar.stories.tsx index e29c5c7a1ba..f288bfd97f7 100644 --- a/packages/main/src/webComponents/ShellBar/ShellBar.stories.tsx +++ b/packages/main/src/webComponents/ShellBar/ShellBar.stories.tsx @@ -3,6 +3,7 @@ import image from '@sb/demoImages/Person.png'; import type { Meta, StoryObj } from '@storybook/react'; import addIcon from '@ui5/webcomponents-icons/dist/add.js'; import searchIcon from '@ui5/webcomponents-icons/dist/search.js'; +import React from 'react'; import { Avatar, Icon, Input, ShellBarItem, StandardListItem } from '../index'; import { ShellBar } from './index'; diff --git a/packages/main/src/webComponents/Timeline/CodeGen.tsx b/packages/main/src/webComponents/Timeline/CodeGen.tsx index 47263535375..caadd9e8839 100644 --- a/packages/main/src/webComponents/Timeline/CodeGen.tsx +++ b/packages/main/src/webComponents/Timeline/CodeGen.tsx @@ -1 +1,3 @@ +import React from 'react'; + export const Div =
MR SOF02 2.43
; diff --git a/packages/main/src/webComponents/Toast/CodeGen.tsx b/packages/main/src/webComponents/Toast/CodeGen.tsx index 90df4e9c1f3..7a65e47231d 100644 --- a/packages/main/src/webComponents/Toast/CodeGen.tsx +++ b/packages/main/src/webComponents/Toast/CodeGen.tsx @@ -1,4 +1,4 @@ -import { forwardRef } from 'react'; +import React, { forwardRef } from 'react'; import { createPortal } from 'react-dom'; import { Toast as OriginalToast, ToastDomRef, ToastPropTypes } from './index'; diff --git a/packages/main/src/webComponents/ViewSettingsDialog/ViewSettingsDialog.stories.tsx b/packages/main/src/webComponents/ViewSettingsDialog/ViewSettingsDialog.stories.tsx index 4896912d5bd..2c3fab1869f 100644 --- a/packages/main/src/webComponents/ViewSettingsDialog/ViewSettingsDialog.stories.tsx +++ b/packages/main/src/webComponents/ViewSettingsDialog/ViewSettingsDialog.stories.tsx @@ -1,6 +1,6 @@ import { isChromatic } from '@sb/utils'; import type { Meta, StoryObj } from '@storybook/react'; -import { forwardRef, useEffect, useRef } from 'react'; +import React, { forwardRef, useEffect, useRef } from 'react'; import { createPortal } from 'react-dom'; import type { ViewSettingsDialogPropTypes } from '../../index'; import { Button, FilterItem, FilterItemOption, SortItem } from '../../index'; diff --git a/packages/main/src/webComponents/Wizard/CodeGen.tsx b/packages/main/src/webComponents/Wizard/CodeGen.tsx index 93cc606f966..bbfc669631e 100644 --- a/packages/main/src/webComponents/Wizard/CodeGen.tsx +++ b/packages/main/src/webComponents/Wizard/CodeGen.tsx @@ -1 +1,3 @@ +import React from 'react'; + export const Br =
; diff --git a/tsconfig.base.json b/tsconfig.base.json index 073eb9fd3b0..cdccf306599 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -3,7 +3,7 @@ "module": "esnext", "target": "ES2021", "lib": ["ES2022", "dom"], - "jsx": "react-jsx", + "jsx": "react", "baseUrl": ".", "rootDir": ".", "composite": true,