Skip to content

Commit ccbf060

Browse files
tjgoforetjgofore
committed
feat: update to react 19 and hds 6
Refs: KK-1500
1 parent 896969b commit ccbf060

30 files changed

Lines changed: 1352 additions & 1163 deletions

File tree

‎package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,8 @@
6464
"@testing-library/testcafe": "^5.0.1",
6565
"@types/lodash": "^4.17.14",
6666
"@types/node": "^22.10.10",
67-
"@types/react": "^18.3.18",
68-
"@types/react-dom": "^18.3.5",
67+
"@types/react": "^19.2.15",
68+
"@types/react-dom": "^19.2.3",
6969
"@types/react-modal": "^3.16.3",
7070
"@types/validator": "^13.12.2",
7171
"@typescript-eslint/eslint-plugin": "^8.57.1",
@@ -90,22 +90,22 @@
9090
"eslint-plugin-jsx-a11y": "^6.10.2",
9191
"eslint-plugin-prettier": "^5.2.3",
9292
"eslint-plugin-react": "^7.37.5",
93-
"eslint-plugin-react-hooks": "^5.2.0",
93+
"eslint-plugin-react-hooks": "^6.1.1",
9494
"eslint-plugin-react-refresh": "^0.4.26",
9595
"eslint-plugin-testing-library": "^7.16.1",
9696
"formik": "^2.4.6",
9797
"globals": "^15.15.0",
98-
"hds-core": "4.9.0",
99-
"hds-react": "4.9.0",
98+
"hds-core": "6.0.2",
99+
"hds-react": "6.0.2",
100100
"i18next": "^24.2.2",
101101
"i18next-browser-languagedetector": "^8.0.2",
102102
"jsdom": "^26.1.0",
103103
"jsonwebtoken": "^9.0.3",
104104
"lodash": "^4.18.1",
105105
"msw": "^2.7.0",
106106
"prettier": "^3.4.2",
107-
"react": "^18.3.1",
108-
"react-dom": "^18.3.1",
107+
"react": "^19.2.6",
108+
"react-dom": "^19.2.6",
109109
"react-helmet-async": "^2.0.5",
110110
"react-i18next": "^15.4.0",
111111
"react-idle-timer": "^5.7.2",

‎pnpm-lock.yaml‎

Lines changed: 1024 additions & 738 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/common/components/button/__tests__/__snapshots__/Button.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`renders snapshot correctly 1`] = `
44
<div>
55
<button
6-
class="Button-module_button__1msFE Button-module_primary__2LfKB"
6+
class="Button-module_button__P7hTI Button-module_primary__b-5q5"
77
style="--color: var(--color-black); --color-hover: var(--color-black); --color-focus: var(--color-black-90); --color-hover-focus: var(--color-black-90); --background-color: var(--color-summer); --background-color-hover: var(--color-summer-dark); --background-color-focus: var(--color-summer); --background-color-hover-focus: var(--color-summer-dark); --background-selected: var(--color-summer); --border-color: var(--color-summer); --border-color-hover: var(--color-summer-dark); --border-color-focus: var(--color-summer-dark); --border-color-hover-focus: var(--color-summer-dark); --border-color-selected: var(--color-summer); --border-color-selected-hover: var(--color-summer-dark); --border-color-selected-focus: var(--color-summer); --border-color-selected-hover-focus: var(--color-summer);"
88
type="button"
99
>

‎src/common/components/card/__tests__/__snapshots__/Card.test.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,15 +28,15 @@ exports[`renders snapshot correctly 1`] = `
2828
>
2929
<button
3030
aria-label=""
31-
class="Button-module_button__1msFE Button-module_supplementary__3YKiS _actionWrapper_2a19a2"
31+
class="Button-module_button__P7hTI Button-module_supplementary__uEAdn _actionWrapper_2a19a2"
3232
style="--color: var(--color-black); --color-hover: var(--color-black); --color-focus: var(--color-black-90); --color-hover-focus: var(--color-black-90); --background-color: transparent; --background-color-hover: transparent; --background-color-focus: transparent; --background-color-hover-focus: transparent; --background-selected: var(--color-summer); --border-color: none; --border-color-hover: var(--color-summer-dark); --border-color-focus: var(--color-summer-dark); --border-color-hover-focus: var(--color-summer-dark); --border-color-selected: var(--color-summer); --border-color-selected-hover: var(--color-summer-dark); --border-color-selected-focus: var(--color-summer); --border-color-selected-hover-focus: var(--color-summer);"
3333
type="button"
3434
>
3535
<span>
3636
<svg
3737
aria-hidden="true"
3838
aria-label="angle-right"
39-
class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik"
39+
class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
4040
role="img"
4141
viewBox="0 0 24 24"
4242
xmlns="http://www.w3.org/2000/svg"

‎src/common/components/formikWrappers/Combobox.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import { Select as HDSSelect, SelectProps as HDSSelectProps, SupportedLanguage } from 'hds-react';
1+
import { Select as HDSSelect, SupportedLanguage } from 'hds-react';
2+
import type { ComponentProps } from 'react';
23
import { useField } from 'formik';
34
import { useTranslation } from 'react-i18next';
45

56
import { Option } from './types';
67
import styles from './formikInputs.module.scss';
78

89
type SelectProps = Omit<
9-
HDSSelectProps,
10+
ComponentProps<typeof HDSSelect>,
1011
'onChange' | 'value' | 'defaultValue' | 'texts' | 'children'
1112
> & {
1213
onChange?: (values: string[]) => void;

‎src/common/components/formikWrappers/FormikDropdown.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
1-
import { Select, SelectProps as HDSDropdownProps, SupportedLanguage } from 'hds-react';
1+
import { Select, SupportedLanguage } from 'hds-react';
2+
import type { ComponentProps } from 'react';
23
import { useField } from 'formik';
34
import { useTranslation } from 'react-i18next';
45

56
import { Option } from './types';
67
import styles from './formikInputs.module.scss';
78

89
type DropdownProps = Omit<
9-
HDSDropdownProps<Option>,
10-
'value' | 'onChange' | 'options' | 'defaultValue' | 'texts' | 'className' | 'children'
10+
ComponentProps<typeof Select>,
11+
| 'value'
12+
| 'onChange'
13+
| 'options'
14+
| 'defaultValue'
15+
| 'texts'
16+
| 'className'
17+
| 'children'
1118
>;
1219

1320
type Props = DropdownProps & {

‎src/common/components/formikWrappers/__tests__/__snapshots__/FormikDropdown.test.tsx.snap‎

Lines changed: 15 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,51 +3,51 @@
33
exports[`renders snapshot correctly 1`] = `
44
<div>
55
<div
6-
class="_formField_69b114 Select-module_root__-GjU5"
6+
class="_formField_69b114 Select-module_root__7RUyk"
77
id="fooSelect"
88
name="fooSelect"
99
tabindex="-1"
1010
>
1111
<label
12-
class="FieldLabel-module_label__1zrXK "
12+
class="FieldLabel-module_label__EyKsf "
1313
for="fooSelect-main-button"
1414
id="fooSelect-label"
1515
>
1616
select label
1717
</label>
1818
<div
19-
class="Select-module_selectAndListContainer__vSJEv"
19+
class="Select-module_selectAndListContainer__0LfdG"
2020
>
2121
<div
22-
class="Select-module_selectedOptionsContainer__16tlC"
22+
class="Select-module_selectedOptionsContainer__7dBXl"
2323
>
2424
<button
2525
aria-controls="fooSelect-list"
2626
aria-disabled="false"
2727
aria-expanded="false"
2828
aria-haspopup="listbox"
2929
aria-label="select label. . 0 valittua vaihtoehtoa."
30-
class="Select-module_dropdownButton__2-_Ec Select-module_selectedOptions__VmvqD Select-module_placeholder__nKgDE Select-module_singleSelect__3hwAT"
30+
class="Select-module_dropdownButton__JCbQQ Select-module_selectedOptions__ZV-qI Select-module_placeholder__u-WLf Select-module_singleSelect__y5Oup"
3131
id="fooSelect-main-button"
3232
role="combobox"
3333
type="button"
3434
>
3535
<div
3636
aria-hidden="true"
37-
class="Select-module_labels__2FlKK"
37+
class="Select-module_labels__hujKB"
3838
>
3939
<span
40-
class="Select-module_dropdownButtonOption__3Tfsz"
40+
class="Select-module_dropdownButtonOption__QWCG-"
4141
data-testid="placeholder"
4242
/>
4343
</div>
4444
<div
45-
class="Select-module_arrowAndSpaceForClearButton__3Fufw Select-module_icon__3AwlD"
45+
class="Select-module_arrowAndSpaceForClearButton__x2ij8 Select-module_icon__WBy3J"
4646
>
4747
<svg
4848
aria-hidden="true"
4949
aria-label="angle-down"
50-
class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik Select-module_angleIcon__3A9li"
50+
class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo Select-module_angleIcon__tPtcz"
5151
role="img"
5252
viewBox="0 0 24 24"
5353
xmlns="http://www.w3.org/2000/svg"
@@ -62,28 +62,17 @@ exports[`renders snapshot correctly 1`] = `
6262
</div>
6363
</button>
6464
</div>
65-
<div
66-
aria-hidden="true"
67-
class="Select-module_listAndInputContainer__2gZ6q"
68-
id="fooSelect-sl-container"
69-
>
65+
<div>
7066
<div
71-
class="Select-module_listContainer__2PfQA"
72-
style="max-height: 286px;"
73-
>
74-
<ul
75-
aria-multiselectable="false"
76-
class="Select-module_list__2iKlZ"
77-
id="fooSelect-list"
78-
role="listbox"
79-
tabindex="-1"
80-
/>
81-
</div>
67+
aria-hidden="true"
68+
class="Select-module_listAndInputContainer__9hv5c"
69+
id="fooSelect-sl-container"
70+
/>
8271
</div>
8372
</div>
8473
<div
8574
aria-live="polite"
86-
class="Select-module_screenReaderNotifications__2wzzH"
75+
class="Select-module_screenReaderNotifications__I0-Hs"
8776
data-testid="hds-select-screen-reader-notifications"
8877
/>
8978
</div>

‎src/common/components/list/List.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import classNames from 'classnames';
44
import styles from './list.module.scss';
55

66
type Props = {
7-
items: (JSX.Element | null | false)[];
7+
items: (React.ReactElement | null | false)[];
88
variant?:
99
| 'spacing-4-xs'
1010
| 'spacing-3-xs'

‎src/common/components/prompt/Prompt.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ export type PromptProps = {
1010

1111
export const Prompt = ({ message, onConfirm, onCancel }: PromptProps) => {
1212
const { t } = useTranslation();
13-
const openConfirmationDialogButtonRef = React.useRef(null);
1413
const [isOpen, setIsOpen] = React.useState(false);
1514
const close = () => setIsOpen(false);
1615
const titleId = 'confirmation-dialog-title';
@@ -21,7 +20,6 @@ export const Prompt = ({ message, onConfirm, onCancel }: PromptProps) => {
2120
aria-labelledby={titleId}
2221
aria-describedby={descriptionId}
2322
isOpen={isOpen}
24-
focusAfterCloseRef={openConfirmationDialogButtonRef}
2523
>
2624
<Dialog.Header
2725
id={titleId}

0 commit comments

Comments
 (0)