Merge pull request #1602 from cultuurnet/dependabot/npm_and_yarn/mult…

…i-9a378e81aa

Bump react, react-dom and @types/react

package.json

@@ -23,8 +23,8 @@
         "dotenv": "^16.4.7",
         "i18next": "^24.2.0",
         "i18next-browser-languagedetector": "^8.0.2",
-        "react": "^18.2.0",
-        "react-dom": "^18.3.1",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
         "react-i18next": "^15.2.0",
         "tailwind-merge": "^2.6.0"
     },
@@ -34,7 +34,7 @@
         "@tailwindcss/forms": "^0.5.9",
         "@types/lodash": "^4.17.13",
         "@types/node": "^22.9.0",
-        "@types/react": "^18.3.12",
+        "@types/react": "^19.0.2",
         "@types/react-dom": "^18.3.1",
         "@typescript-eslint/eslint-plugin": "^8.18.1",
         "@typescript-eslint/parser": "^8.15.0",

resources/ts/Components/Card.tsx

@@ -8,18 +8,18 @@ import { useTranslateRoute } from "../hooks/useTranslateRoute";
 import { Link } from "@inertiajs/react";
 
 type Props = {
-  title?: ReactElement | string;
+  title?: ReactElement<Record<string, unknown>> | string;
   subtitle?: string;
   description?: string;
-  img?: ReactElement | string;
+  img?: ReactElement<Record<string, unknown>> | string;
   badge?: string;
-  icon?: ReactElement;
+  icon?: ReactElement<Record<string, unknown>>;
   active?: boolean;
   headless?: boolean;
   contentStyles?: string;
   textCenter?: boolean;
   border?: boolean;
-  iconButton?: ReactElement;
+  iconButton?: ReactElement<Record<string, unknown>>;
   clickableHeading?: boolean;
   id?: string;
   headingStyles?: string;

resources/ts/Components/FormElement.tsx

@@ -9,7 +9,7 @@ type LabelWeight = keyof Theme["fontWeight"];
 
 type WrapperProps = {
   labelPosition?: LabelPosition;
-  children: JSX.Element;
+  children: ReactElement<Record<string, unknown>>;
 };
 
 const Wrapper = ({ labelPosition, children }: WrapperProps) => {
@@ -34,7 +34,7 @@ const getAlignItems = (labelPosition: LabelPosition | undefined) => {
 
 type LabelProps = ComponentProps<"label"> & {
   id: string;
-  label: string | ReactElement;
+  label: string | ReactElement<Record<string, unknown>>;
   labelSize: LabelSize;
   required: boolean;
   labelWeight?: LabelWeight;
@@ -74,13 +74,13 @@ const InputStyle = {
 };
 
 export type Props = {
-  label?: string | ReactElement;
+  label?: string | ReactElement<Record<string, unknown>>;
   labelPosition?: LabelPosition;
   labelSize?: LabelSize;
   labelWeight?: LabelWeight;
   error?: string;
   info?: string;
-  component: ReactElement;
+  component: ReactElement<Record<string, unknown>>;
   elementId?: string;
   required?: boolean;
 } & ComponentProps<"div">;

resources/ts/Components/RadioButtonGroup.tsx

@@ -6,8 +6,8 @@ export const RadioButtonGroupLabel = ({
   name,
   description,
 }: {
-  name: string | ReactElement;
-  description: string | ReactElement;
+  name: string | ReactElement<Record<string, unknown>>;
+  description: string | ReactElement<Record<string, unknown>>;
 }) => (
   <div className="flex flex-col flex-grow justify-between md:flex-row items-center gap-2">
     <span>{name}</span>
@@ -18,7 +18,7 @@ export const RadioButtonGroupLabel = ({
 );
 
 type Option = {
-  label: string | ReactElement;
+  label: string | ReactElement<Record<string, unknown>>;
   value: string;
 };
 

resources/ts/Components/Tabs.tsx

@@ -1,4 +1,4 @@
-import type { ComponentProps, ReactElement } from "react";
+import type { ComponentProps, PropsWithChildren, ReactElement } from "react";
 import React, { cloneElement, useMemo } from "react";
 import { classNames } from "../utils/classNames";
 
@@ -32,7 +32,9 @@ export const Tabs = ({ children, active, onChange, ...props }: Props) => {
       React.Children.toArray(children).filter(
         (child) =>
           typeof child === "object" && "type" in child && child.type === Item
-      ) as ReactElement[],
+      ) as ReactElement<
+        PropsWithChildren<{ className?: string; type: string }>
+      >[],
     [children]
   );
 
@@ -42,7 +44,11 @@ export const Tabs = ({ children, active, onChange, ...props }: Props) => {
         const isActive = item.props.type === active;
 
         if (!isActive) {
-          return cloneElement(item, { ...item.props, onChange });
+          return cloneElement(item, {
+            ...item.props,
+            // @ts-expect-error
+            onChange,
+          });
         }
 
         return cloneElement(item, {
@@ -51,6 +57,7 @@ export const Tabs = ({ children, active, onChange, ...props }: Props) => {
             item.props.className,
             "text-publiq-blue-light border-publiq-blue border-b-[3px]"
           ),
+          // @ts-expect-error
           onChange,
         });
       }),