chore: use React18

.github/workflows/docs-stable.yml

@@ -35,10 +35,6 @@ jobs:
 
       - name: Build Storybook
         run: |
-          # TODO remove as soon as https://github.com/recharts/recharts/issues/4558 is resolved
-          yarn set resolution "@types/react@npm:*" "18"
-          yarn set resolution "@types/react-dom@npm:*" "18"
-          yarn add react@18 react-dom@18
           yarn build:storybook
           yarn build:storybook-sitemap --basePath "v${{ env.MAJOR_VERSION }}"
         env:

.github/workflows/main.yml

@@ -73,12 +73,12 @@ jobs:
       - name: Install
         run: yarn install --immutable
 
-      - name: Install 18
-        if: ${{ matrix.react == '18' }}
+      - name: Install 19
+        if: ${{ matrix.react == '19' }}
         run: |
-          yarn set resolution "@types/react@npm:*" "18"
-          yarn set resolution "@types/react-dom@npm:*" "18"
-          yarn add react@18 react-dom@18
+          echo "$(jq '.resolutions += {"@types/react": "npm:types-react@rc", "@types/react-dom": "npm:types-react-dom@rc" }' package.json)" > package.json
+          yarn add react@rc react-dom@rc
+          yarn
 
       - name: Build
         run: yarn build
@@ -122,10 +122,6 @@ jobs:
       - name: Install and Build
         run: |
           yarn install --immutable
-          # TODO remove as soon as https://github.com/recharts/recharts/issues/4558 is resolved
-          yarn set resolution "@types/react@npm:*" "18"
-          yarn set resolution "@types/react-dom@npm:*" "18"
-          yarn add react@18 react-dom@18
           yarn build:storybook
         env:
           NODE_OPTIONS: '--max-old-space-size=4096'

.github/workflows/test.yml

@@ -34,12 +34,12 @@ jobs:
       - name: Install
         run: yarn install --immutable
 
-      - name: Install 18
-        if: ${{ matrix.react == '18' }}
+      - name: Install 19
+        if: ${{ matrix.react == '19' }}
         run: |
-          yarn set resolution "@types/react@npm:*" "18"
-          yarn set resolution "@types/react-dom@npm:*" "18"
-          yarn add react@18 react-dom@18
+          yarn set resolution "@types/react@npm:*" "npm:types-react@rc"
+          yarn set resolution "@types/react-dom@npm:*" "npm:types-react-dom@rc"
+          yarn add react@rc react-dom@rc
 
       - name: Cypress run
         if: ${{ (matrix.react == '19' && matrix.spec == 'charts') != true }}

package.json

@@ -44,8 +44,8 @@
     "@ui5/webcomponents-compat": "2.1.2",
     "@ui5/webcomponents-fiori": "2.1.2",
     "@ui5/webcomponents-icons": "2.1.2",
-    "react": "19.0.0-rc-f38c22b244-20240704",
-    "react-dom": "19.0.0-rc-f38c22b244-20240704",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "remark-gfm": "^4.0.0",
     "tocbot": "4.29.0"
   },
@@ -60,8 +60,8 @@
     "@testing-library/cypress": "^10.0.0",
     "@types/jscodeshift": "^0.11.11",
     "@types/node": "^20.0.0",
-    "@types/react": "npm:types-react@rc",
-    "@types/react-dom": "npm:types-react-dom@rc",
+    "@types/react": "^18.3.4",
+    "@types/react-dom": "^18.3.0",
     "@types/use-sync-external-store": "^0.0.6",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
@@ -111,8 +111,6 @@
     ]
   },
   "resolutions": {
-    "@types/react": "npm:types-react@rc",
-    "@types/react-dom": "npm:types-react-dom@rc",
     "tocbot": "4.29.0",
     "@joshwooding/vite-plugin-react-docgen-typescript": "0.3.0"
   },

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

@@ -76,7 +76,7 @@
    * @param measure {IChartMeasure} Current measure object
    * @param dataElement {object} Current data element
    */
   highlightColor?: (value: number, measure: MeasureConfig, dataElement: Record<string, any>) => CSSProperties['color'];
 }
 
 interface DimensionConfig extends IChartDimension {
@@ -186,7 +186,7 @@
     ? dataKeys.findIndex((key) => key === chartConfig.secondYAxis?.dataKey)
     : 0;
 
   const [componentRef, chartRef] = useSyncRef<any>(ref);
 
   const onItemLegendClick = useLegendItemClick(onLegendClick);
   const labelFormatter = useLabelFormatter(primaryDimension);
@@ -236,7 +236,8 @@
       resizeDebounce={chartConfig.resizeDebounce}
       {...propsWithoutOmitted}
     >
-      {/*@ts-expect-error: todo not yet compatible with React19*/}
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/*// @ts-ignore:: todo not yet compatible with React19*/}
       <BarChartLib
         syncId={syncId}
         onClick={onClickInternal}

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

@@ -66,7 +66,7 @@
    * @param measure {IChartMeasure} Current measure object
    * @param dataElement {object} Current data element
    */
   highlightColor?: (value: number, measure: MeasureConfig, dataElement: Record<string, any>) => CSSProperties['color'];
 }
 
 interface DimensionConfig extends IChartDimension {
@@ -146,7 +146,7 @@
     ...rest
   } = props;
 
   const [componentRef, chartRef] = useSyncRef<any>(ref);
 
   const chartConfig: BulletChartProps['chartConfig'] = {
     yAxisVisible: false,
@@ -225,7 +225,7 @@
           );
         } else {
           onDataPointClick(
             enrichEventWithDetails({} as any, {
               value: eventOrIndex.value,
               dataKey: eventOrIndex.dataKey,
               dataIndex: eventOrIndex.index,
@@ -281,7 +281,8 @@
       resizeDebounce={chartConfig.resizeDebounce}
       {...propsWithoutOmitted}
     >
-      {/*@ts-expect-error: todo not yet compatible with React19*/}
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/*// @ts-ignore:: todo not yet compatible with React19*/}
       <ComposedChartLib
         syncId={syncId}
         onClick={onClickInternal}
@@ -301,7 +302,7 @@
         {chartConfig.xAxisVisible &&
           dimensions.map((dimension, index) => {
             let AxisComponent;
             const axisProps: any = {
               dataKey: dimension.accessor,
               interval: dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0),
               tickLine: index < 1,
@@ -439,7 +440,7 @@
           />
         )}
         {sortedMeasures?.map((element, index) => {
           const chartElementProps: any = {
             isAnimationActive: !noAnimation
           };
           let labelPosition = 'top';

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

@@ -235,7 +235,8 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
       resizeDebounce={chartConfig.resizeDebounce}
       {...propsWithoutOmitted}
     >
-      {/*@ts-expect-error: todo not yet compatible with React19*/}
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/*// @ts-ignore:: todo not yet compatible with React19*/}
       <ColumnChartLib
         syncId={syncId}
         onClick={onClickInternal}

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

@@ -286,7 +286,8 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
       resizeDebounce={chartConfig.resizeDebounce}
       {...propsWithoutOmitted}
     >
-      {/*@ts-expect-error: todo not yet compatible with React19*/}
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/*// @ts-ignore:: todo not yet compatible with React19*/}
       <ComposedChartLib
         syncId={syncId}
         onClick={onClickInternal}

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

@@ -224,7 +224,8 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
       resizeDebounce={chartConfig.resizeDebounce}
       {...propsWithoutOmitted}
     >
-      {/*@ts-expect-error: todo not yet compatible with React19*/}
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/*// @ts-ignore:: todo not yet compatible with React19*/}
       <LineChartLib
         syncId={syncId}
         margin={marginChart}

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

@@ -276,7 +276,8 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
       resizeDebounce={chartConfig.resizeDebounce}
       {...propsWithoutOmitted}
     >
-      {/*@ts-expect-error: todo not yet compatible with React19*/}
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/*// @ts-ignore:: todo not yet compatible with React19*/}
       <PieChartLib
         onClick={onClickInternal}
         margin={chartConfig.margin}

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

@@ -175,7 +175,8 @@ const RadarChart = forwardRef<HTMLDivElement, RadarChartProps>((props, ref) => {
       resizeDebounce={chartConfig.resizeDebounce}
       {...propsWithoutOmitted}
     >
-      {/*@ts-expect-error: todo not yet compatible with React19*/}
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/*// @ts-ignore:: todo not yet compatible with React19*/}
       <RadarChartLib
         onClick={onClickInternal}
         data={dataset}

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

@@ -141,7 +141,8 @@ const RadialChart = forwardRef<HTMLDivElement, RadialChartProps>((props, ref) =>
       style={style}
       {...rest}
     >
-      {/*@ts-expect-error: todo not yet compatible with React19*/}
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/*// @ts-ignore:: todo not yet compatible with React19*/}
       <RadialBarChart
         onClick={onClickInternal}
         innerRadius="90%"

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

@@ -226,7 +226,8 @@ const ScatterChart = forwardRef<HTMLDivElement, ScatterChartProps>((props, ref)
       resizeDebounce={chartConfig.resizeDebounce}
       {...propsWithoutOmitted}
     >
-      {/*@ts-expect-error: todo not yet compatible with React19*/}
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/*// @ts-ignore:: todo not yet compatible with React19*/}
       <ScatterChartLib
         onClick={onClickInternal}
         margin={marginChart}

yarn.lock

@@ -5859,6 +5859,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/prop-types@npm:*":
+  version: 15.7.12
+  resolution: "@types/prop-types@npm:15.7.12"
+  checksum: 10c0/1babcc7db6a1177779f8fde0ccc78d64d459906e6ef69a4ed4dd6339c920c2e05b074ee5a92120fe4e9d9f1a01c952f843ebd550bee2332fc2ef81d1706878f8
+  languageName: node
+  linkType: hard
+
 "@types/qs@npm:*":
   version: 6.9.7
   resolution: "@types/qs@npm:6.9.7"
@@ -5880,21 +5887,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:types-react-dom@rc":
-  version: 19.0.0-rc.0
-  resolution: "types-react-dom@npm:19.0.0-rc.0"
+"@types/react-dom@npm:^18.3.0":
+  version: 18.3.0
+  resolution: "@types/react-dom@npm:18.3.0"
   dependencies:
     "@types/react": "npm:*"
-  checksum: 10c0/a05f48aec358142f167f4765ed25e4a8185926fe24421c6f0e9af7bbd3029055e01198a300543621c7dd0c045ac84a536e71a74b3ad6d5d95300e4584ab8a0aa
+  checksum: 10c0/6c90d2ed72c5a0e440d2c75d99287e4b5df3e7b011838cdc03ae5cd518ab52164d86990e73246b9d812eaf02ec351d74e3b4f5bd325bf341e13bf980392fd53b
   languageName: node
   linkType: hard
 
-"@types/react@npm:types-react@rc":
-  version: 19.0.0-rc.0
-  resolution: "types-react@npm:19.0.0-rc.0"
+"@types/react@npm:*, @types/react@npm:^16.8.0 || ^17.0.0 || ^18.0.0, @types/react@npm:^18.3.4":
+  version: 18.3.4
+  resolution: "@types/react@npm:18.3.4"
   dependencies:
+    "@types/prop-types": "npm:*"
     csstype: "npm:^3.0.2"
-  checksum: 10c0/b8c035f3f6354b2b1e24473ec2fb981afab9db726177755cdc6a610f607e8d89ca2297f4a80be1464013aa073a5496627fa0a0125f60af12daa769ad508cf3ea
+  checksum: 10c0/5c52e1e6f540cff21e3c2a5212066d02e005f6fb21e4a536a29097fae878db9f407cd7a4b43778f51359349c5f692e08bc77ddb5f5cecbfca9ca4d4e3c91a48e
   languageName: node
   linkType: hard
 
@@ -19065,17 +19073,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:19.0.0-rc-f38c22b244-20240704":
-  version: 19.0.0-rc-f38c22b244-20240704
-  resolution: "react-dom@npm:19.0.0-rc-f38c22b244-20240704"
-  dependencies:
-    scheduler: "npm:0.25.0-rc-f38c22b244-20240704"
-  peerDependencies:
-    react: 19.0.0-rc-f38c22b244-20240704
-  checksum: 10c0/fecc3111fdd257686f720a3fa2b61d52bc17e208eee8fcf96928216de1dddfd6684e28d7bc6148ec9d9b9a35f5e75d513b4fd7b3011cc66a1cab6acb371aa264
-  languageName: node
-  linkType: hard
-
 "react-dom@npm:^16.8.0 || ^17.0.0 || ^18.0.0":
   version: 18.2.0
   resolution: "react-dom@npm:18.2.0"
@@ -19088,6 +19085,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-dom@npm:^18.3.1":
+  version: 18.3.1
+  resolution: "react-dom@npm:18.3.1"
+  dependencies:
+    loose-envify: "npm:^1.1.0"
+    scheduler: "npm:^0.23.2"
+  peerDependencies:
+    react: ^18.3.1
+  checksum: 10c0/a752496c1941f958f2e8ac56239172296fcddce1365ce45222d04a1947e0cc5547df3e8447f855a81d6d39f008d7c32eab43db3712077f09e3f67c4874973e85
+  languageName: node
+  linkType: hard
+
 "react-element-to-jsx-string@npm:^15.0.0":
   version: 15.0.0
   resolution: "react-element-to-jsx-string@npm:15.0.0"
@@ -19175,13 +19184,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:19.0.0-rc-f38c22b244-20240704":
-  version: 19.0.0-rc-f38c22b244-20240704
-  resolution: "react@npm:19.0.0-rc-f38c22b244-20240704"
-  checksum: 10c0/fe2a5365016ab8dc4e0ffc285cc107a73df7829c524ded753390c6c05346b4ec6dbdcb40843182f91a7cfbee735ad707f349ed524c4626417fc14078637410d6
-  languageName: node
-  linkType: hard
-
 "react@npm:^16.8.0 || ^17.0.0 || ^18.0.0":
   version: 18.2.0
   resolution: "react@npm:18.2.0"
@@ -19191,6 +19193,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react@npm:^18.3.1":
+  version: 18.3.1
+  resolution: "react@npm:18.3.1"
+  dependencies:
+    loose-envify: "npm:^1.1.0"
+  checksum: 10c0/283e8c5efcf37802c9d1ce767f302dd569dd97a70d9bb8c7be79a789b9902451e0d16334b05d73299b20f048cbc3c7d288bbbde10b701fa194e2089c237dbea3
+  languageName: node
+  linkType: hard
+
 "read-cache@npm:^1.0.0":
   version: 1.0.0
   resolution: "read-cache@npm:1.0.0"
@@ -20068,13 +20079,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:0.25.0-rc-f38c22b244-20240704":
-  version: 0.25.0-rc-f38c22b244-20240704
-  resolution: "scheduler@npm:0.25.0-rc-f38c22b244-20240704"
-  checksum: 10c0/370f144cac09f27ed12d8cad81972f1551206da9fd2c6e64a6e797bb5bb258c655192d8502f2f9e71140f6b3ee93f964534e59301e2fe50950a643f4d3d8c233
-  languageName: node
-  linkType: hard
-
 "scheduler@npm:^0.23.0":
   version: 0.23.0
   resolution: "scheduler@npm:0.23.0"
@@ -20084,6 +20088,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"scheduler@npm:^0.23.2":
+  version: 0.23.2
+  resolution: "scheduler@npm:0.23.2"
+  dependencies:
+    loose-envify: "npm:^1.1.0"
+  checksum: 10c0/26383305e249651d4c58e6705d5f8425f153211aef95f15161c151f7b8de885f24751b377e4a0b3dd42cce09aad3f87a61dab7636859c0d89b7daf1a1e2a5c78
+  languageName: node
+  linkType: hard
+
 "semver@npm:2 || 3 || 4 || 5, semver@npm:^5.6.0":
   version: 5.7.2
   resolution: "semver@npm:5.7.2"
@@ -21946,8 +21959,8 @@ __metadata:
     "@testing-library/cypress": "npm:^10.0.0"
     "@types/jscodeshift": "npm:^0.11.11"
     "@types/node": "npm:^20.0.0"
-    "@types/react": "npm:types-react@rc"
-    "@types/react-dom": "npm:types-react-dom@rc"
+    "@types/react": "npm:^18.3.4"
+    "@types/react-dom": "npm:^18.3.0"
     "@types/use-sync-external-store": "npm:^0.0.6"
     "@typescript-eslint/eslint-plugin": "npm:^7.0.0"
     "@typescript-eslint/parser": "npm:^7.0.0"
@@ -21983,8 +21996,8 @@ __metadata:
     postcss-modules: "npm:^6.0.0"
     postcss-nesting: "npm:^13.0.0"
     prettier: "npm:^3.0.0"
-    react: "npm:19.0.0-rc-f38c22b244-20240704"
-    react-dom: "npm:19.0.0-rc-f38c22b244-20240704"
+    react: "npm:^18.3.1"
+    react-dom: "npm:^18.3.1"
     remark-gfm: "npm:^4.0.0"
     rimraf: "npm:^6.0.0"
     storybook: "npm:8.2.9"