Skip to content

Commit c78ab7f

Browse files
MarcusNotheisLukas742
MarcusNotheis
and
Lukas742
authored
feat: support React 19 (#5860)
https://react.dev/blog/2024/04/25/react-19-upgrade-guide BREAKING CHANGE: __ObjectPage (TypeScript):__ replace `headerTitle` type with `ReactElement<DynamicPageTitlePropTypes>` BREAKING CHANGE: __ObjectPage (TypeScript):__ replace `headerContent` type with `ReactElement<DynamicPageHeaderPropTypes>` BREAKING CHANGE: __ObjectPage (TypeScript):__ replace `image` type with `string | ReactElement<AvatarPropTypes>` --------- Co-authored-by: Lukas Harbarth <[email protected]>
1 parent 2bba948 commit c78ab7f

File tree

62 files changed

+518
-454
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+518
-454
lines changed

‎.github/workflows/main.yml

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,9 @@ jobs:
5757
needs: ['install']
5858
name: 'Build'
5959
runs-on: ubuntu-latest
60+
strategy:
61+
matrix:
62+
react: ['18', '19']
6063
env:
6164
CYPRESS_INSTALL_BINARY: 0
6265
steps:
@@ -67,10 +70,18 @@ jobs:
6770
node-version-file: '.nvmrc'
6871
cache: 'yarn'
6972

70-
- name: Install and Build
73+
- name: Install
74+
run: yarn install --immutable
75+
76+
- name: Install 18
77+
if: ${{ matrix.react == '18' }}
7178
run: |
72-
yarn install --immutable
73-
yarn build
79+
yarn set resolution "@types/react@npm:*" "18"
80+
yarn set resolution "@types/react-dom@npm:*" "18"
81+
yarn add react@18 react-dom@18
82+
83+
- name: Build
84+
run: yarn build
7485

7586
lint:
7687
needs: ['install']

‎.github/workflows/test.yml

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,21 +20,38 @@ jobs:
2020
- cypress-commands
2121
- main/src/components
2222
- main/src/internal
23+
react: ['18', '19']
2324
fail-fast: false
24-
2525
steps:
2626
- name: Checkout
2727
uses: actions/checkout@v4
2828

29+
- uses: actions/[email protected]
30+
with:
31+
node-version-file: '.nvmrc'
32+
cache: 'yarn'
33+
34+
- name: Install
35+
run: yarn install --immutable
36+
37+
- name: Install 18
38+
if: ${{ matrix.react == '18' }}
39+
run: |
40+
yarn set resolution "@types/react@npm:*" "18"
41+
yarn set resolution "@types/react-dom@npm:*" "18"
42+
yarn add react@18 react-dom@18
43+
2944
- name: Cypress run
45+
if: ${{ (matrix.react == '19' && matrix.spec == 'charts') != true }}
3046
uses: cypress-io/github-action@v6
3147
with:
3248
browser: chrome
3349
component: true
3450
spec: packages/${{ matrix.spec }}
51+
install: false
3552

3653
- uses: coverallsapp/[email protected]
37-
if: ${{ inputs.reportCoverage }}
54+
if: ${{ inputs.reportCoverage && (matrix.react == '19' && matrix.spec != 'charts' || matrix.react == '18' && matrix.spec == 'charts') }}
3855
with:
3956
file: temp/cypress-coverage/lcov.info
4057
github-token: ${{ secrets.GITHUB_TOKEN }}

‎package.json

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,8 @@
4242
"@ui5/webcomponents": "1.24.4",
4343
"@ui5/webcomponents-fiori": "1.24.4",
4444
"@ui5/webcomponents-icons": "1.24.4",
45-
"react": "18.3.1",
46-
"react-dom": "18.3.1",
45+
"react": "19.0.0-rc-827cbea417-20240606",
46+
"react-dom": "19.0.0-rc-827cbea417-20240606",
4747
"remark-gfm": "^4.0.0",
4848
"tocbot": "4.28.2"
4949
},
@@ -57,8 +57,8 @@
5757
"@semantic-release/github": "^10.0.0",
5858
"@testing-library/cypress": "^10.0.0",
5959
"@types/node": "^20.0.0",
60-
"@types/react": "18.3.3",
61-
"@types/react-dom": "^18.2.22",
60+
"@types/react": "npm:types-react@rc",
61+
"@types/react-dom": "npm:types-react-dom@rc",
6262
"@types/use-sync-external-store": "^0.0.6",
6363
"@typescript-eslint/eslint-plugin": "^7.0.0",
6464
"@typescript-eslint/parser": "^7.0.0",
@@ -108,7 +108,8 @@
108108
]
109109
},
110110
"resolutions": {
111-
"@types/react": "18.3.3",
111+
"@types/react": "npm:types-react@rc",
112+
"@types/react-dom": "npm:types-react-dom@rc",
112113
"tocbot": "4.28.2"
113114
},
114115
"type": "module",

‎packages/base/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
"peerDependencies": {
3232
"@types/react": "*",
3333
"@ui5/webcomponents-base": "~1.24.0",
34-
"react": "^16.14.0 || ^17.0.0 || ^18.0.0"
34+
"react": "^16.14.0 || ^17 || ^18 || ^19"
3535
},
3636
"peerDependenciesMeta": {
3737
"@types/react": {

‎packages/base/src/hooks/useResponsiveContentPadding.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export function useResponsiveContentPadding(
3636
export function useResponsiveContentPadding(element: HTMLElement | undefined | null, returnRangeString = false) {
3737
const [currentRange, setCurrentRange] = useState(() => getCurrentRange()?.name ?? 'Desktop');
3838
const classes = useStyles();
39-
const requestAnimationFrameRef = useRef<number | undefined>();
39+
const requestAnimationFrameRef = useRef<number | undefined>(undefined);
4040

4141
useEffect(() => {
4242
const observer = new ResizeObserver(([el]) => {

‎packages/charts/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
"peerDependencies": {
4141
"@ui5/webcomponents-react": "~1.29.0",
4242
"@ui5/webcomponents-react-base": "~1.29.0",
43-
"react": "^16.14.0 || ^17.0.0 || ^18.0.0"
43+
"react": "^16.14.0 || ^17 || ^18"
4444
},
4545
"publishConfig": {
4646
"access": "public"

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

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
146146
...rest
147147
} = props;
148148

149-
const chartConfig = {
149+
const chartConfig: BarChartProps['chartConfig'] = {
150150
margin: {},
151151
yAxisVisible: true,
152152
xAxisVisible: true,
@@ -234,6 +234,7 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
234234
resizeDebounce={chartConfig.resizeDebounce}
235235
{...propsWithoutOmitted}
236236
>
237+
{/*@ts-expect-error: todo not yet compatible with React19*/}
237238
<BarChartLib
238239
syncId={syncId}
239240
onClick={onClickInternal}
@@ -327,7 +328,7 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
327328
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
328329
// @ts-ignore
329330
onClick={onDataPointClickInternal}
330-
isAnimationActive={noAnimation === false}
331+
isAnimationActive={!noAnimation}
331332
onAnimationStart={handleBarAnimationStart}
332333
onAnimationEnd={handleBarAnimationEnd}
333334
>
@@ -392,11 +393,6 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
392393
);
393394
});
394395

395-
BarChart.defaultProps = {
396-
noLegend: false,
397-
noAnimation: false
398-
};
399-
400396
BarChart.displayName = 'BarChart';
401397

402398
export { BarChart };

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

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,8 @@ export interface BulletChartProps extends IChartBaseProps {
112112
/**
113113
* layout for showing measures. `horizontal` bars would equal the column chart, `vertical` would be a bar chart.
114114
* Default Value: `horizontal`
115+
*
116+
* @default `"horizontal"`
115117
*/
116118
layout?: 'horizontal' | 'vertical';
117119
}
@@ -133,7 +135,7 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
133135
tooltipConfig,
134136
onLegendClick,
135137
onClick,
136-
layout,
138+
layout = 'horizontal',
137139
style,
138140
className,
139141
slot,
@@ -145,7 +147,7 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
145147

146148
const [componentRef, chartRef] = useSyncRef<any>(ref);
147149

148-
const chartConfig = {
150+
const chartConfig: BulletChartProps['chartConfig'] = {
149151
yAxisVisible: false,
150152
xAxisVisible: true,
151153
gridStroke: ThemingParameters.sapList_BorderColor,
@@ -277,6 +279,7 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
277279
resizeDebounce={chartConfig.resizeDebounce}
278280
{...propsWithoutOmitted}
279281
>
282+
{/*@ts-expect-error: todo not yet compatible with React19*/}
280283
<ComposedChartLib
281284
syncId={syncId}
282285
onClick={onClickInternal}
@@ -435,7 +438,7 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
435438
)}
436439
{sortedMeasures?.map((element, index) => {
437440
const chartElementProps: any = {
438-
isAnimationActive: noAnimation === false
441+
isAnimationActive: !noAnimation
439442
};
440443
let labelPosition = 'top';
441444
switch (element.type) {
@@ -514,12 +517,6 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
514517
);
515518
});
516519

517-
BulletChart.defaultProps = {
518-
noLegend: false,
519-
noAnimation: false,
520-
layout: 'horizontal'
521-
};
522-
523520
BulletChart.displayName = 'BulletChart';
524521

525522
export { BulletChart };

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

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
144144
...rest
145145
} = props;
146146

147-
const chartConfig = {
147+
const chartConfig: ColumnChartProps['chartConfig'] = {
148148
yAxisVisible: false,
149149
xAxisVisible: true,
150150
gridStroke: ThemingParameters.sapList_BorderColor,
@@ -233,6 +233,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
233233
resizeDebounce={chartConfig.resizeDebounce}
234234
{...propsWithoutOmitted}
235235
>
236+
{/*@ts-expect-error: todo not yet compatible with React19*/}
236237
<ColumnChartLib
237238
syncId={syncId}
238239
onClick={onClickInternal}
@@ -321,7 +322,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
321322
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
322323
// @ts-ignore
323324
onClick={onDataPointClickInternal}
324-
isAnimationActive={noAnimation === false}
325+
isAnimationActive={!noAnimation}
325326
onAnimationStart={handleBarAnimationStart}
326327
onAnimationEnd={handleBarAnimationEnd}
327328
>
@@ -387,11 +388,6 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
387388
);
388389
});
389390

390-
ColumnChart.defaultProps = {
391-
noLegend: false,
392-
noAnimation: false
393-
};
394-
395391
ColumnChart.displayName = 'ColumnChart';
396392

397393
export { ColumnChart };

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

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ const ColumnChartWithTrend = forwardRef<HTMLDivElement, ColumnChartWithTrendProp
121121

122122
const syncId = useIsomorphicId();
123123

124-
const chartConfig = {
124+
const chartConfig: ColumnChartWithTrendProps['chartConfig'] = {
125125
yAxisVisible: false,
126126
xAxisVisible: true,
127127
gridStroke: ThemingParameters.sapList_BorderColor,
@@ -218,11 +218,6 @@ const ColumnChartWithTrend = forwardRef<HTMLDivElement, ColumnChartWithTrendProp
218218
);
219219
});
220220

221-
ColumnChartWithTrend.defaultProps = {
222-
noLegend: false,
223-
noAnimation: false
224-
};
225-
226221
ColumnChartWithTrend.displayName = 'ColumnChartWithTrend';
227222

228223
export { ColumnChartWithTrend };

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

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,8 @@ export interface ComposedChartProps extends IChartBaseProps {
121121
/**
122122
* layout for showing measures. `horizontal` bars would equal the column chart, `vertical` would be a bar chart.
123123
* Default Value: `horizontal`
124+
*
125+
* @default `"horizontal"`
124126
*/
125127
layout?: 'horizontal' | 'vertical';
126128
}
@@ -147,7 +149,7 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
147149
tooltipConfig,
148150
onLegendClick,
149151
onClick,
150-
layout,
152+
layout = 'horizontal',
151153
style,
152154
className,
153155
slot,
@@ -159,7 +161,7 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
159161

160162
const [componentRef, chartRef] = useSyncRef<any>(ref);
161163

162-
const chartConfig = {
164+
const chartConfig: ComposedChartProps['chartConfig'] = {
163165
yAxisLabelsVisible: true,
164166
yAxisVisible: false,
165167
xAxisVisible: true,
@@ -282,6 +284,7 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
282284
resizeDebounce={chartConfig.resizeDebounce}
283285
{...propsWithoutOmitted}
284286
>
287+
{/*@ts-expect-error: todo not yet compatible with React19*/}
285288
<ComposedChartLib
286289
syncId={syncId}
287290
onClick={onClickInternal}
@@ -443,7 +446,7 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
443446
const ChartElement = ChartTypes[element.type] as any as FC<any>;
444447

445448
const chartElementProps: any = {
446-
isAnimationActive: noAnimation === false
449+
isAnimationActive: !noAnimation
447450
};
448451
let labelPosition = 'top';
449452

@@ -538,12 +541,6 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
538541
);
539542
});
540543

541-
ComposedChart.defaultProps = {
542-
noLegend: false,
543-
noAnimation: false,
544-
layout: 'horizontal'
545-
};
546-
547544
ComposedChart.displayName = 'ComposedChart';
548545

549546
export { ComposedChart };

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { PieChart } from '../PieChart/PieChart.js';
1010
* A `DonutChart` is basically a `PieChart` with a hole.
1111
*/
1212
const DonutChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
13-
const chartConfig = {
13+
const chartConfig: PieChartProps['chartConfig'] = {
1414
legendPosition: 'bottom',
1515
paddingAngle: 0,
1616
innerRadius: '50%',

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

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
130130
...rest
131131
} = props;
132132

133-
const chartConfig = {
133+
const chartConfig: LineChartProps['chartConfig'] = {
134134
yAxisVisible: false,
135135
xAxisVisible: true,
136136
gridStroke: ThemingParameters.sapList_BorderColor,
@@ -222,6 +222,7 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
222222
resizeDebounce={chartConfig.resizeDebounce}
223223
{...propsWithoutOmitted}
224224
>
225+
{/*@ts-expect-error: todo not yet compatible with React19*/}
225226
<LineChartLib
226227
syncId={syncId}
227228
margin={marginChart}
@@ -304,8 +305,8 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
304305
dataKey={element.accessor}
305306
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
306307
strokeWidth={element.width}
307-
activeDot={{ onClick: onDataPointClickInternal } as any}
308-
isAnimationActive={noAnimation === false}
308+
activeDot={{ onClick: onDataPointClickInternal }}
309+
isAnimationActive={!noAnimation}
309310
{...element.lineConfig}
310311
/>
311312
);
@@ -355,11 +356,6 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
355356
);
356357
});
357358

358-
LineChart.defaultProps = {
359-
noLegend: false,
360-
noAnimation: false
361-
};
362-
363359
LineChart.displayName = 'LineChart';
364360

365361
export { LineChart };

0 commit comments

Comments
 (0)