Add support for React 19

CHANGELOG.md

@@ -6,7 +6,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 ### Added
-* *Nothing*
+* Add support for React 19
 
 ### Changed
 * *Nothing*

package.json

@@ -44,14 +44,14 @@
     "@fortawesome/free-brands-svg-icons": "^6.4.2",
     "@fortawesome/free-regular-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@reduxjs/toolkit": "^2.0.1",
-    "@shlinkio/shlink-frontend-kit": "^0.7.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@reduxjs/toolkit": "^2.5.0",
+    "@shlinkio/shlink-frontend-kit": "^0.7.1",
     "@shlinkio/shlink-js-sdk": "^1.3.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-redux": "^9.0.1",
-    "react-router": "^7.0.2",
+    "react": "^18.3 || ^19.0",
+    "react-dom": "^18.3 || ^19.0",
+    "react-redux": "^9.2.0",
+    "react-router": "^7.1.1",
     "reactstrap": "^9.2.0"
   },
   "peerDependenciesMeta": {

src/ShlinkWebComponent.tsx

@@ -32,7 +32,7 @@ export const createShlinkWebComponent = (
   { serverVersion, apiClient, settings, routesPrefix = '', createNotFound, tagColorsStorage },
 ) => {
   const features = useFeatures(serverVersion);
-  const mainContent = useRef<ReactNode>();
+  const mainContent = useRef<ReactNode>(undefined);
   const [theStore, setStore] = useState<Store | undefined>();
 
   const inRouterContext = useInRouterContext();

src/domains/helpers/DomainStatusIcon.tsx

@@ -5,7 +5,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useElementRef } from '@shlinkio/shlink-frontend-kit';
-import type { FC } from 'react';
+import type { FC, RefObject } from 'react';
 import { ExternalLink } from 'react-external-link';
 import { UncontrolledTooltip } from 'reactstrap';
 import { useMaxResolution } from '../../utils/helpers/hooks';
@@ -33,7 +33,7 @@ export const DomainStatusIcon: FC<DomainStatusIconProps> = ({ status, matchMedia
           : <FontAwesomeIcon fixedWidth icon={invalidIcon} className="text-danger" />}
       </span>
       <UncontrolledTooltip
-        target={ref}
+        target={ref as RefObject<HTMLSpanElement>}
         placement={isMobile ? 'right' : 'left'}
         autohide={status === 'valid'}
       >

src/overview/helpers/HighlightCard.tsx

@@ -1,7 +1,7 @@
 import { faArrowAltCircleRight as linkIcon } from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useElementRef } from '@shlinkio/shlink-frontend-kit';
-import type { FC, PropsWithChildren, ReactNode } from 'react';
+import type { FC, PropsWithChildren, ReactNode, RefObject } from 'react';
 import { Link } from 'react-router';
 import { Card, CardText, CardTitle, UncontrolledTooltip } from 'reactstrap';
 import './HighlightCard.scss';
@@ -22,7 +22,9 @@ export const HighlightCard: FC<HighlightCardProps> = ({ children, title, link, t
         <CardTitle className="lh-sm fw-semibold text-uppercase fs-5 highlight-card__title">{title}</CardTitle>
         <CardText className="fs-2 fw-semibold lh-sm">{children}</CardText>
       </Card>
-      {tooltip && <UncontrolledTooltip target={ref} placement="bottom">{tooltip}</UncontrolledTooltip>}
+      {tooltip && (
+        <UncontrolledTooltip target={ref as RefObject<HTMLElement>} placement="bottom">{tooltip}</UncontrolledTooltip>
+      )}
     </>
   );
 };

src/short-urls/helpers/ShortUrlStatus.tsx

@@ -3,7 +3,7 @@ import { faCalendarXmark, faCheck, faLinkSlash } from '@fortawesome/free-solid-s
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useElementRef } from '@shlinkio/shlink-frontend-kit';
 import { isBefore } from 'date-fns';
-import type { FC, ReactNode } from 'react';
+import type { FC, ReactNode, RefObject } from 'react';
 import { UncontrolledTooltip } from 'reactstrap';
 import type { ShlinkShortUrl } from '../../api-contract';
 import { formatHumanFriendly, now, parseISO } from '../../utils/dates/helpers/date';
@@ -78,7 +78,7 @@ export const ShortUrlStatus: FC<ShortUrlStatusProps> = ({ shortUrl }) => {
       <span style={{ cursor: !description ? undefined : 'help' }} ref={tooltipRef}>
         <FontAwesomeIcon icon={icon} className={className} />
       </span>
-      <UncontrolledTooltip target={tooltipRef} placement="bottom">
+      <UncontrolledTooltip target={tooltipRef as RefObject<HTMLElement>} placement="bottom">
         {description}
       </UncontrolledTooltip>
     </>

src/short-urls/helpers/ShortUrlVisitsCount.tsx

@@ -2,6 +2,7 @@ import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useElementRef } from '@shlinkio/shlink-frontend-kit';
 import { clsx } from 'clsx';
+import type { RefObject } from 'react';
 import { UncontrolledTooltip } from 'reactstrap';
 import type { ShlinkShortUrl } from '../../api-contract';
 import { formatHumanFriendly, parseISO } from '../../utils/dates/helpers/date';
@@ -45,7 +46,7 @@ export const ShortUrlVisitsCount = (
           </sup>
         </small>
       </span>
-      <UncontrolledTooltip target={tooltipRef} placement="bottom">
+      <UncontrolledTooltip target={tooltipRef as RefObject<HTMLElement>} placement="bottom">
         <ul className="list-unstyled mb-0">
           {maxVisits && (
             <li className="short-url-visits-count__tooltip-list-item">

src/utils/components/InfoTooltip.tsx

@@ -2,7 +2,7 @@ import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { Placement } from '@popperjs/core';
 import { useElementRef } from '@shlinkio/shlink-frontend-kit';
-import type { FC, PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren, RefObject } from 'react';
 import { UncontrolledTooltip } from 'reactstrap';
 
 export type InfoTooltipProps = PropsWithChildren<{
@@ -18,7 +18,9 @@ export const InfoTooltip: FC<InfoTooltipProps> = ({ className = '', placement, c
       <span className={className} ref={ref}>
         <FontAwesomeIcon icon={infoIcon} />
       </span>
-      <UncontrolledTooltip target={ref} placement={placement}>{children}</UncontrolledTooltip>
+      <UncontrolledTooltip target={ref as RefObject<HTMLSpanElement>} placement={placement}>
+        {children}
+      </UncontrolledTooltip>
     </>
   );
 };