Merge pull request #544 from shlinkio/dependabot/npm_and_yarn/types-8…

…5341e045b

Bump the types group across 1 directory with 3 updates

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": {
@@ -85,9 +85,9 @@
     "@testing-library/user-event": "^14.5.2",
     "@total-typescript/shoehorn": "^0.1.2",
     "@total-typescript/ts-reset": "^0.6.1",
-    "@types/leaflet": "^1.9.14",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/leaflet": "^1.9.15",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/coverage-v8": "^2.1.8",
     "axe-core": "^4.10.2",

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'}
       >