chore: upgrade to react@19 (#9182)

packages/excalidraw/components/ButtonIcon.tsx

@@ -1,4 +1,5 @@
 import { forwardRef } from "react";
+import type { JSX } from "react";
 import clsx from "clsx";
 
 import "./ButtonIcon.scss";

packages/excalidraw/components/ButtonIconCycle.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import clsx from "clsx";
 
 export const ButtonIconCycle = <T extends any>({

packages/excalidraw/components/ButtonIconSelect.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import clsx from "clsx";
 import { ButtonIcon } from "./ButtonIcon";
 

packages/excalidraw/components/FontPicker/FontPickerList.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import React, {
   useMemo,
   useState,

packages/excalidraw/components/FontPicker/keyboardNavHandlers.ts

@@ -4,7 +4,7 @@ import { type FontDescriptor } from "./FontPickerList";
 
 interface FontPickerKeyNavHandlerProps {
   event: React.KeyboardEvent<HTMLDivElement>;
-  inputRef: React.RefObject<HTMLInputElement>;
+  inputRef: React.RefObject<HTMLInputElement | null>;
   hoveredFont: Node<FontDescriptor> | undefined;
   filteredFonts: Node<FontDescriptor>[];
   onClose: () => void;

packages/excalidraw/components/HelpDialog.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import React from "react";
 import { t } from "../i18n";
 import { KEYS } from "../keys";

packages/excalidraw/components/IconPicker.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import React, { useEffect } from "react";
 import * as Popover from "@radix-ui/react-popover";
 import { isArrowKey, KEYS } from "../keys";

packages/excalidraw/components/MagicButton.tsx

@@ -1,8 +1,9 @@
-import "./ToolIcon.scss";
-
+import type { JSX } from "react";
 import clsx from "clsx";
 import type { ToolButtonSize } from "./ToolButton";
 
+import "./ToolIcon.scss";
+
 const DEFAULT_SIZE: ToolButtonSize = "small";
 
 export const ElementCanvasButton = (props: {

packages/excalidraw/components/MobileMenu.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import React from "react";
 import type {
   AppClassProperties,

packages/excalidraw/components/Sidebar/common.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import React from "react";
 import type { AppState, SidebarName, SidebarTabName } from "../../types";
 

packages/excalidraw/components/Stack.tsx

@@ -10,7 +10,6 @@ type StackProps = {
   justifyContent?: "center" | "space-around" | "space-between";
   className?: string | boolean;
   style?: React.CSSProperties;
-  ref: React.RefObject<HTMLDivElement>;
 };
 
 const RowStack = forwardRef(

packages/excalidraw/components/TTDDialog/TTDDialogOutput.tsx

@@ -13,7 +13,7 @@ const ErrorComp = ({ error }: { error: string }) => {
 
 interface TTDDialogOutputProps {
   error: Error | null;
-  canvasRef: React.RefObject<HTMLDivElement>;
+  canvasRef: React.RefObject<HTMLDivElement | null>;
   loaded: boolean;
 }
 

packages/excalidraw/components/TTDDialog/TTDDialogTrigger.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import type { ReactNode } from "react";
 import { useTunnels } from "../../context/tunnels";
 import DropdownMenu from "../dropdownMenu/DropdownMenu";

packages/excalidraw/components/TTDDialog/common.ts

@@ -12,7 +12,7 @@ const resetPreview = ({
   canvasRef,
   setError,
 }: {
-  canvasRef: React.RefObject<HTMLDivElement>;
+  canvasRef: React.RefObject<HTMLDivElement | null>;
   setError: (error: Error | null) => void;
 }) => {
   const canvasNode = canvasRef.current;
@@ -40,7 +40,7 @@ export interface MermaidToExcalidrawLibProps {
 }
 
 interface ConvertMermaidToExcalidrawFormatProps {
-  canvasRef: React.RefObject<HTMLDivElement>;
+  canvasRef: React.RefObject<HTMLDivElement | null>;
   mermaidToExcalidrawLib: MermaidToExcalidrawLibProps;
   mermaidDefinition: string;
   setError: (error: Error | null) => void;

packages/excalidraw/components/canvases/InteractiveCanvas.tsx

@@ -17,7 +17,7 @@ import { isRenderThrottlingEnabled } from "../../reactUtils";
 import { renderInteractiveScene } from "../../renderer/interactiveScene";
 
 type InteractiveCanvasProps = {
-  containerRef: React.RefObject<HTMLDivElement>;
+  containerRef: React.RefObject<HTMLDivElement | null>;
   canvas: HTMLCanvasElement | null;
   elementsMap: RenderableElementsMap;
   visibleElements: readonly NonDeletedExcalidrawElement[];

packages/excalidraw/components/dropdownMenu/DropdownMenuItem.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import React, { useEffect, useRef } from "react";
 import {
   getDropdownMenuItemClassName,

packages/excalidraw/components/dropdownMenu/DropdownMenuItemContent.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import { useDevice } from "../App";
 
 const MenuItemContent = ({

packages/excalidraw/components/dropdownMenu/DropdownMenuItemLink.tsx

@@ -1,4 +1,5 @@
 import MenuItemContent from "./DropdownMenuItemContent";
+import type { JSX } from "react";
 import React from "react";
 import {
   getDropdownMenuItemClassName,

packages/excalidraw/components/welcome-screen/WelcomeScreen.Center.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import { actionLoadScene, actionShortcuts } from "../../actions";
 import { getShortcutFromShortcutName } from "../../actions/shortcuts";
 import { t, useI18n } from "../../i18n";