feat: React19 and HDSv6 migration HCRC-196

eslint.config.mjs

@@ -42,6 +42,9 @@ export default [
       '@eslint-react/prop-types': 'off',
       '@eslint-react/require-default-props': 'off',
       '@eslint-react/react-in-jsx-scope': 'off',
+      // `use()` is intended for conditional context access; for unconditional
+      // reads `useContext()` remains the simpler, preferred approach here.
+      '@eslint-react/no-use-context': 'off',
       // Extra
       '@eslint-react/jsx-no-useless-fragment': 'warn',
       '@eslint-react/no-array-index-key': 'error',

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@city-of-helsinki/react-helsinki-headless-cms",
   "engines": {
-    "node": ">=22.11.0"
+    "node": "^24"
   },
   "packageManager": "pnpm@11.1.2",
   "version": "3.0.3",
@@ -53,9 +53,9 @@
   "homepage": "https://github.com/City-of-Helsinki/react-helsinki-headless-cms#readme",
   "peerDependencies": {
     "@apollo/client": "^3.14.0",
-    "hds-react": ">=4.8.1",
-    "react": "^18",
-    "react-dom": "^18"
+    "hds-react": "^6.0.2",
+    "react": "^19",
+    "react-dom": "^19"
   },
   "peerDependenciesMeta": {
     "@apollo/client": {
@@ -96,8 +96,8 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^24.12.4",
-    "@types/react": "^18.3.27",
-    "@types/react-dom": "18.3.7",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
     "@vitest/coverage-v8": "^4.1.4",
     "babel-loader": "^9.2.1",
@@ -115,8 +115,8 @@
     "git-rev-sync": "^3.0.2",
     "globals": "^17.4.0",
     "graphql": "^16.12.0",
-    "hds-core": "^4.8.1",
-    "hds-react": "4.8.1",
+    "hds-core": "^6.0.2",
+    "hds-react": "6.0.2",
     "husky": "^9.1.7",
     "jsdom": "^29.0.2",
     "lint-staged": "^16.2.7",
@@ -125,9 +125,9 @@
     "postcss": "^8.5.6",
     "postcss-scss": "^4.0.9",
     "prettier": "3.7.4",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-helmet-async": "^2.0.5",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-helmet-async": "^3.0.0",
     "rollup": "^4.59.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-delete": "^3.0.2",
@@ -151,7 +151,7 @@
     "classnames": "^2.5.1",
     "date-fns": "^4.1.0",
     "doctoc": "^2.3.0",
-    "hds-design-tokens": "^4.8.1",
+    "hds-design-tokens": "^6.0.2",
     "html-entities": "^2.6.0",
     "html-react-parser": "^5.2.5",
     "isomorphic-dompurify": "^2.36.0",

src/apollo/pageContent/PageContent.tsx

@@ -12,7 +12,7 @@ export type PageProps = Omit<PageContentPropsWithoutData, 'page'> & {
   /**
    * Page content if data not found or missing from cms.
    */
-  notFoundPageContent?: JSX.Element;
+  notFoundPageContent?: React.JSX.Element;
   // All other props
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   [x: string]: any;

src/apollo/pageWithTemplateContent/PageWithTemplateContent.tsx

@@ -16,7 +16,7 @@ export type PageProps = Omit<PageContentPropsWithoutData, 'page'> & {
   /**
    * Page content if data not found or missing from cms.
    */
-  notFoundPageContent?: JSX.Element;
+  notFoundPageContent?: React.JSX.Element;
   // All other props
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   [x: string]: any;

src/common/components/container/Container.tsx

@@ -4,11 +4,11 @@ type ContainerProps = {
   /**
    * Additional children to render inside the container.
    */
-  children: JSX.Element | string;
+  children: React.JSX.Element | string;
   /**
    * Optional wrapper element for the container.
    */
-  wrapper?: JSX.Element;
+  wrapper?: React.JSX.Element;
 };
 
 export default function Container({ wrapper, children }: ContainerProps) {

src/common/components/list/List.tsx

@@ -3,15 +3,15 @@ import classNames from 'classnames';
 
 import styles from './list.module.scss';
 
-function getKey(...elements: JSX.Element[]): string {
+function getKey(...elements: React.JSX.Element[]): string {
   return elements.reduce((acc, element) => `${acc}${element.key}`, '');
 }
 
 type ListProps = {
   /**
    * List item elements.
    */
-  items?: (JSX.Element | JSX.Element[] | null | false)[];
+  items?: (React.JSX.Element | React.JSX.Element[] | null | false)[];
   /**
    * List item variant options.
    */

src/core/archiveSearchPageContent/ArchiveSearchPageContent.tsx

@@ -131,7 +131,7 @@ export interface SearchPageContentProps {
   /**
    * Custom content react components to be dispayed on the page.
    */
-  customContent?: string | JSX.Element;
+  customContent?: string | React.JSX.Element;
   /**
    * Archive collection items..
    */

src/core/carousel/components/CarouselSliderPage.tsx

@@ -20,9 +20,9 @@ export function CarouselSliderPage({
   const styleWidth = `${100 / itemsPerSlide}%`;
   return (
     <li
-      ref={(node) =>
-        node && node.toggleAttribute('inert', itemSetIndex !== currentSlide)
-      }
+      ref={(node) => {
+        node?.toggleAttribute('inert', itemSetIndex !== currentSlide);
+      }}
       aria-hidden={itemSetIndex !== currentSlide}
       className={classNames(
         styles.slide,

src/core/carousel/components/__tests__/CarouselSlideButton.test.tsx

@@ -35,7 +35,7 @@ describe('CarouselSlideButton', () => {
     providerProps: Partial<CarouselContextType>,
   ) =>
     render(
-      <CarouselContext.Provider
+      <CarouselContext
         value={{
           ...initialCarouselContextStateValues,
           // Dummy functions for context fields that require them
@@ -50,7 +50,7 @@ describe('CarouselSlideButton', () => {
         }}
       >
         {ui}
-      </CarouselContext.Provider>,
+      </CarouselContext>,
     );
 
   beforeEach(() => {

src/core/carousel/components/__tests__/CarouselSlider.test.tsx

@@ -23,7 +23,7 @@ const renderWithContext = (
   providerProps: Partial<CarouselContextType>,
 ) =>
   render(
-    <CarouselContext.Provider
+    <CarouselContext
       value={{
         ...initialCarouselContextStateValues,
         // Dummy functions for context fields that require them
@@ -37,7 +37,7 @@ const renderWithContext = (
       }}
     >
       {ui}
-    </CarouselContext.Provider>,
+    </CarouselContext>,
   );
 
 describe('CarouselSlider', () => {

src/core/carousel/components/__tests__/CarouselSliderDot.test.tsx

@@ -23,7 +23,7 @@ const renderWithContext = (
   providerProps: Partial<CarouselContextType>,
 ) =>
   render(
-    <CarouselContext.Provider
+    <CarouselContext
       value={{
         ...initialCarouselContextStateValues,
         // Dummy functions for context fields that require them
@@ -36,7 +36,7 @@ const renderWithContext = (
       }}
     >
       {ui}
-    </CarouselContext.Provider>,
+    </CarouselContext>,
   );
 
 describe('CarouselSlideDots', () => {

src/core/carousel/components/__tests__/CarouselSliderPage.test.tsx

@@ -15,7 +15,7 @@ const renderWithContext = (
   providerProps: Partial<CarouselContextType>,
 ) =>
   render(
-    <CarouselContext.Provider
+    <CarouselContext
       value={{
         ...initialCarouselContextStateValues,
         // Dummy functions for context fields that require them
@@ -29,7 +29,7 @@ const renderWithContext = (
       }}
     >
       {ui}
-    </CarouselContext.Provider>,
+    </CarouselContext>,
   );
 
 describe('CarouselSliderPage', () => {

src/core/carousel/context/CarouselContextProvider.tsx

@@ -77,9 +77,5 @@ export function CarouselContextProvider({
     }),
     [numberOfItems, carouselContext, backwardCompatibleProps],
   );
-  return (
-    <CarouselContext.Provider value={value}>
-      {children}
-    </CarouselContext.Provider>
-  );
+  return <CarouselContext value={value}>{children}</CarouselContext>;
 }

src/core/collection/Collection.tsx

@@ -150,7 +150,7 @@ export function Collection({
   const {
     copy: { loadMoreButtonLabelText, showAllText },
   } = useConfig();
-  const componentForType: Record<CollectionProps['type'], JSX.Element> = {
+  const componentForType: Record<CollectionProps['type'], React.JSX.Element> = {
     carousel: (
       <CollectionCarousel
         cards={cards}

src/core/configProvider/ConfigProvider.tsx

@@ -27,7 +27,5 @@ export function ConfigProvider({
     [userConfig],
   );
 
-  return (
-    <ConfigContext.Provider value={config}>{children}</ConfigContext.Provider>
-  );
+  return <ConfigContext value={config}>{children}</ConfigContext>;
 }

src/core/configProvider/configContext.ts

@@ -86,12 +86,16 @@ export type Config = {
    * React component replacements for defined html elements.
    */
   components: {
-    A: (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => JSX.Element;
-    Img: (props: React.ImgHTMLAttributes<HTMLImageElement>) => JSX.Element;
+    A: (
+      props: React.AnchorHTMLAttributes<HTMLAnchorElement>,
+    ) => React.JSX.Element;
+    Img: (
+      props: React.ImgHTMLAttributes<HTMLImageElement>,
+    ) => React.JSX.Element;
     Link?: (
       props: React.AnchorHTMLAttributes<HTMLAnchorElement>,
-    ) => JSX.Element;
-    Head?: (props: { children: React.ReactNode }) => JSX.Element;
+    ) => React.JSX.Element;
+    Head?: (props: { children: React.ReactNode }) => React.JSX.Element;
     EventCardContent?: React.FC<Record<string, unknown>>;
     VenueCardContent?: React.FC<Record<string, unknown>>;
     ArticleCardContent?: React.FC<Record<string, unknown>>;

src/core/hero/Hero.tsx

@@ -48,7 +48,7 @@ export type HeroComponentProps = {
   /**
    * Hero container wrapper component.
    */
-  container?: JSX.Element;
+  container?: React.JSX.Element;
 } & HeroProps;
 
 export default function Hero({

src/core/imageGallery/ImageGalleryProvider.tsx

@@ -32,9 +32,5 @@ export function ImageGalleryProvider({ children }: ImageGalleryProviderProps) {
     [imageIndex, isLightboxVisible, selectedImageIndex, toggleLightbox],
   );
 
-  return (
-    <ImageGalleryContext.Provider value={config}>
-      {children}
-    </ImageGalleryContext.Provider>
-  );
+  return <ImageGalleryContext value={config}>{children}</ImageGalleryContext>;
 }

src/core/imageGallery/Lightbox.tsx

@@ -40,7 +40,7 @@ interface ActionsProps {
 export function Lightbox({
   images,
   lightboxUid,
-}: LightboxProps): JSX.Element | null {
+}: LightboxProps): React.JSX.Element | null {
   const lightboxRef = useRef<HTMLDivElement | null>(null);
   const barrierRef = useRef<HTMLHeadingElement | null>(null);
 
@@ -97,7 +97,7 @@ export function Lightbox({
   const imagePhotogrpher = images[imageIndex].photographer;
   const imageUrl = images[imageIndex].url;
 
-  const renderLightboxComponent = (): JSX.Element => (
+  const renderLightboxComponent = (): React.JSX.Element => (
     <div
       id={lightboxUid}
       role="dialog"

src/core/link/LinkBase.tsx

@@ -10,7 +10,7 @@ import styles from './LinkBase.module.scss';
 // issue is created to hds: https://github.com/City-of-Helsinki/helsinki-design-system/issues/808
 
 export type LinkProps = Omit<
-  React.ComponentPropsWithoutRef<'a'>,
+  React.ComponentPropsWithRef<'a'>,
   'target' | 'href' | 'onPointerEnterCapture' | 'onPointerLeaveCapture'
 > & {
   /**
@@ -118,26 +118,24 @@ export const getTextFromReactChildren = (children: ReactNode): string => {
   ) as string;
 };
 
-function LinkBase(
-  {
-    children,
-    className,
-    disableVisitedStyles = true,
-    external = false,
-    showExternalIcon = true,
-    href,
-    iconLeft,
-    iconRight,
-    openInNewTab = false,
-    openInExternalDomainAriaLabel,
-    openInNewTabAriaLabel,
-    style = {},
-    size = 'M',
-    inlineIcons = false,
-    ...rest
-  }: LinkProps,
-  ref: React.Ref<HTMLAnchorElement>,
-) {
+function LinkBase({
+  children,
+  className,
+  disableVisitedStyles = true,
+  external = false,
+  showExternalIcon = true,
+  href,
+  iconLeft,
+  iconRight,
+  openInNewTab = false,
+  openInExternalDomainAriaLabel,
+  openInNewTabAriaLabel,
+  style = {},
+  size = 'M',
+  inlineIcons = false,
+  ref,
+  ...rest
+}: LinkProps) {
   const composeAriaLabel = () => {
     let childrenText = getTextFromReactChildren(children);
     const newTabText = openInNewTab
@@ -237,7 +235,10 @@ function LinkBase(
     >
       {!inlineIcons && leftIcon}
       <span
-        className={classNames(styles.content, iconLeft && styles.withLeftIcon)}
+        className={classNames(
+          styles.content,
+          !!iconLeft && styles.withLeftIcon,
+        )}
       >
         {inlineIcons && leftIcon}
         {children}
@@ -250,4 +251,4 @@ function LinkBase(
   );
 }
 
-export default React.forwardRef<HTMLAnchorElement, LinkProps>(LinkBase);
+export default LinkBase;

src/core/pageContent/PageContentLayout.tsx

@@ -10,7 +10,7 @@ import type { HeroProps } from './types';
 export type PageContentLayoutProps = {
   id: string;
   breadcrumbs?: React.ReactNode;
-  heroContainer?: JSX.Element;
+  heroContainer?: React.JSX.Element;
   content: React.ReactNode;
   shareLinks?: React.ReactNode;
   collections?: React.ReactNode;