Update to React 19

package.json

@@ -19,18 +19,18 @@
   },
   "devDependencies": {
     "@opencast/eslint-config-ts-react": "^0.3.0",
-    "@types/react": "^18.2.13",
-    "@types/react-dom": "^18.2.19",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
     "eslint": "^9.20.1",
     "typescript": "^5.1.3 <5.8.4"
   },
   "peerDependencies": {
     "@emotion/react": "^11.11.4",
     "@floating-ui/react": "^0.27.5",
     "focus-trap-react": "^10.2.3 || ^11.0.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "react-icons": "^5.5.0",
-    "react-merge-refs": "^2.0.2"
+    "react-merge-refs": "^3.0.2"
   }
 }

src/button.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { JSX } from "react";
 import { Interpolation, Theme } from "@emotion/react";
 import { AppkitConfig, focusStyle, match, useAppkitConfig, useColorScheme } from ".";
 

src/card.tsx

@@ -1,5 +1,6 @@
 import { LuTriangleAlert, LuInfo } from "react-icons/lu";
 import { match, useAppkitConfig } from ".";
+import { JSX } from "react";
 
 
 type Props = JSX.IntrinsicElements["div"] & {

src/confirmationModal.tsx

@@ -6,6 +6,7 @@ import {
   useState,
   useRef,
   useImperativeHandle,
+  JSX,
 } from "react";
 import { ModalProps, ModalHandle, Modal, Spinner, Button, boxError } from ".";
 import { currentRef } from "./util";

src/errorBox.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { JSX, ReactNode } from "react";
 
 import { Card } from ".";
 

src/floating.tsx

@@ -18,7 +18,7 @@ import {
   useListNavigation,
   useRole,
 } from "@floating-ui/react";
-import React, { ReactNode, ReactElement, useRef, useState, useImperativeHandle } from "react";
+import React, { ReactNode, ReactElement, useRef, useState, useImperativeHandle, HTMLAttributes } from "react";
 import { mergeRefs } from "react-merge-refs";
 
 import { bug, unreachable } from "./err";
@@ -47,8 +47,8 @@ type Context = {
         };
     };
     refs: Pick<UseFloatingReturn["refs"], "setReference" | "setFloating"> & {
-        arrowRef: React.MutableRefObject<HTMLDivElement | null>;
-        listRef: React.MutableRefObject<Array<HTMLElement | null>>;
+        arrowRef: React.RefObject<HTMLDivElement | null>;
+        listRef: React.RefObject<Array<HTMLElement | null>>;
     };
     getReferenceProps: ReturnType<typeof useInteractions>["getReferenceProps"];
     getFloatingProps: ReturnType<typeof useInteractions>["getFloatingProps"];
@@ -259,7 +259,7 @@ export const FloatingContainer = React.forwardRef<FloatingHandle, FloatingContai
 // ===== <FloatingTrigger> ======================================================================
 
 export type FloatingTriggerProps = {
-    children: ReactElement;
+    children: ReactElement<HTMLAttributes<HTMLElement>>
 };
 
 /**
@@ -273,9 +273,9 @@ export type FloatingTriggerProps = {
 export const FloatingTrigger: React.FC<FloatingTriggerProps> = ({ children }) => {
   const context = useFloatingContext();
 
-  return React.cloneElement(children, {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return React.cloneElement<any>(children, {
     "data-floating-state": context.open ? "open" : "closed",
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
     ...context.getReferenceProps({
       ref: context.refs.setReference,
       onClick: () => context.open && context.setOpen?.(false),
@@ -437,7 +437,7 @@ export const Floating = React.forwardRef<HTMLDivElement, FloatingProps>(
 // ===== Convenience Components ==================================================================
 
 export type WithTooltipProps = {
-    children: ReactElement;
+    children: FloatingTriggerProps["children"]
     tooltip: ReactNode;
     tooltipCss?: CSSObject;
 } & Partial<Omit<FloatingContainerProps, "trigger">>;

src/header.tsx

@@ -1,10 +1,11 @@
-import { ReactElement, ReactNode, forwardRef, useRef } from "react";
+import { JSX, ReactNode, forwardRef, useRef } from "react";
 import { CSSObject, jsx } from "@emotion/react";
 import { FiArrowLeft, FiCheck } from "react-icons/fi";
 
 import {
   useAppkitConfig, Floating, FloatingContainer, FloatingContainerProps, FloatingHandle,
   FloatingTrigger, ProtoButton, focusStyle, useColorScheme, match, useFloatingItemProps,
+  FloatingTriggerProps,
 } from ".";
 
 
@@ -14,7 +15,7 @@ export type WithHeaderMenuProps = {
   menu: Omit<HeaderMenuProps, "close">,
   /** Overrides for the floating container */
   floatingContainer?: Partial<FloatingContainerProps>,
-  children: ReactElement;
+  children: FloatingTriggerProps["children"]
 };
 
 /**
@@ -205,7 +206,13 @@ export const HeaderMenuItem = forwardRef<HTMLElement, HeaderMenuItemProps>(
         }}
         {...!wrapper && {
           className,
-          ref: r => typeof ref === "function" ? ref(r) : (ref ? ref.current = r : {}),
+          ref: r => {
+            if (typeof ref === "function") {
+              ref(r);
+            } else if (ref && "current" in ref) {
+              ref.current = r;
+            }
+          },
         }}
       >
         {jsx(wrapperElem.type, {

src/modal.tsx

@@ -7,7 +7,7 @@ import {
 } from "react";
 import ReactDOM from "react-dom";
 import { LuX } from "react-icons/lu";
-import FocusTrap from "focus-trap-react";
+import { FocusTrap } from "focus-trap-react";
 import {
   useAppkitConfig, ProtoButton, focusStyle, useColorScheme,
 } from ".";

src/spinner.tsx

@@ -1,5 +1,5 @@
 import { keyframes } from "@emotion/react";
-import React from "react";
+import React, { JSX } from "react";
 
 type Props = JSX.IntrinsicElements["svg"] & {
   size?: number | string;

src/util.tsx

@@ -1,4 +1,4 @@
-import { MutableRefObject, useEffect } from "react";
+import { RefObject, useEffect } from "react";
 import { bug } from "./err";
 
 /**
@@ -131,7 +131,7 @@ export const screenWidthAbove = (w: number) => `@media not all and (max-width: $
 
 /** Helper to react to clicks outside of the DOM element referred to by `ref`. */
 export const useOnOutsideClick = (
-  ref: MutableRefObject<Node | null>,
+  ref: RefObject<Node | null>,
   callback: () => void,
 ): void => {
   useEffect(() => {
@@ -153,6 +153,6 @@ export const useOnOutsideClick = (
  * This is mainly for accessing refs in event handlers for elements
  * that are guaranteed to be alive as long as the ref itself.
  */
-export const currentRef = <T, >(ref: React.RefObject<T>): T => (
+export const currentRef = <T, >(ref: React.RefObject<T | null>): T => (
   ref.current ?? bug("ref unexpectedly unbound")
 );