refactor: prepare react 19 types

@types/canvas-iframe.d.ts

@@ -1,10 +1,5 @@
-declare namespace JSX {
-  interface IntrinsicElements {
-    iframe: React.DetailedHTMLProps<
-      React.IframeHTMLAttributes<HTMLIFrameElement> & {
-        credentialless?: "true";
-      },
-      HTMLIFrameElement
-    >;
+declare namespace React {
+  interface IframeHTMLAttributes {
+    credentialless?: "true";
   }
 }

apps/builder/app/auth/brand-button.tsx

@@ -1,5 +1,5 @@
 import { css, textVariants, theme } from "@webstudio-is/design-system";
-import type { ComponentProps } from "react";
+import type { ComponentProps, JSX } from "react";
 
 export const buttonStyle = css({
   boxSizing: "border-box",

apps/builder/app/auth/login.stories.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import type { StoryFn } from "@storybook/react";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { Login } from "./login";

apps/builder/app/builder/builder.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { useEffect, useMemo, useState, type JSX, type ReactNode } from "react";
 import { useStore } from "@nanostores/react";
 import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { usePublish, $publisher } from "~/shared/pubsub";

apps/builder/app/builder/features/address-bar.tsx

@@ -143,7 +143,7 @@ const Suggestions = ({
   options,
   onSelect,
 }: {
-  containerRef: RefObject<HTMLFormElement>;
+  containerRef: RefObject<null | HTMLFormElement>;
   options: string[];
   onSelect: (option: string) => void;
 }) => {

apps/builder/app/builder/features/ai/ai-command-bar.tsx

@@ -71,7 +71,7 @@ export const AiCommandBar = () => {
 
   const [isAudioTranscribing, setIsAudioTranscribing] = useState(false);
   const [isAiRequesting, setIsAiRequesting] = useState(false);
-  const abortController = useRef<AbortController>();
+  const abortController = useRef<undefined | AbortController>(undefined);
   const recordButtonRef = useRef<HTMLButtonElement>(null);
   const guardIdRef = useRef(0);
   const { enableCanvasPointerEvents, disableCanvasPointerEvents } =

apps/builder/app/builder/features/ai/hooks/long-press-toggle.ts

@@ -15,7 +15,7 @@ type UseClickAndHoldProps = {
  * - `onCancel`: Pointer up outside target during long press.
  */
 export const useLongPressToggle = (props: UseClickAndHoldProps) => {
-  const currentTarget = useRef<Element>();
+  const currentTarget = useRef<undefined | Element>(undefined);
   const pointerDownTimeRef = useRef(0);
   const stateRef = useRef<"idle" | "active">("idle");
   const keyMapRef = useRef(new Set<string>());

apps/builder/app/builder/features/ai/hooks/media-recorder.ts

@@ -14,7 +14,7 @@ export const useMediaRecorder = (
   },
   options = DEFAULT_OPTIONS
 ) => {
-  const disposeRef = useRef<() => void>();
+  const disposeRef = useRef<undefined | (() => void)>(undefined);
 
   const cancelRef = useRef(false);
   const isActiveRef = useRef<boolean>(false);

apps/builder/app/builder/features/pages/folder-settings.tsx

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { type FocusEventHandler, useState, useCallback } from "react";
+import { type FocusEventHandler, useState, useCallback, type JSX } from "react";
 import { useStore } from "@nanostores/react";
 import { useDebouncedCallback } from "use-debounce";
 import slugify from "slugify";

apps/builder/app/builder/features/pages/form.tsx

@@ -1,3 +1,5 @@
+import type { JSX } from "react";
+
 export const Form = ({
   onSubmit,
   children,

apps/builder/app/builder/features/pages/page-settings.tsx

@@ -6,6 +6,7 @@ import {
   useCallback,
   useId,
   useEffect,
+  type JSX,
 } from "react";
 import { useStore } from "@nanostores/react";
 import { useDebouncedCallback } from "use-debounce";

apps/builder/app/builder/features/project-settings/project-settings.stories.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { ProjectSettingsView } from "./project-settings";
 import { $pages } from "~/shared/nano-states";

apps/builder/app/builder/features/settings-panel/variable-popover.tsx

@@ -590,7 +590,7 @@ const VariablePanel = forwardRef<
 VariablePanel.displayName = "VariablePanel";
 
 const VariablePopoverContext = createContext<{
-  containerRef?: RefObject<HTMLElement>;
+  containerRef?: RefObject<null | HTMLElement>;
 }>({});
 
 export const VariablePopoverProvider = VariablePopoverContext.Provider;
@@ -627,7 +627,7 @@ export const VariablePopoverTrigger = forwardRef<
   const { containerRef } = useContext(VariablePopoverContext);
   const [triggerRef, sideOffsset] = useSideOffset({ isOpen, containerRef });
   const bindingPopoverContainerRef = useRef<HTMLDivElement>(null);
-  const panelRef = useRef<undefined | PanelApi>();
+  const panelRef = useRef<undefined | PanelApi>(undefined);
   const formRef = useRef<HTMLFormElement>(null);
   const resources = useStore($resources);
   const { allowDynamicData } = useStore($userPlanFeatures);

apps/builder/app/builder/features/style-panel/controls/toggle-group/toggle-group-control.tsx

@@ -1,5 +1,6 @@
-import { useState, type ReactNode } from "react";
+import { useState, type JSX, type ReactNode } from "react";
 import { declarationDescriptions } from "@webstudio-is/css-data";
+import { AlertIcon } from "@webstudio-is/icons";
 import {
   Flex,
   rawTheme,
@@ -19,7 +20,6 @@ import {
   getPriorityStyleValueSource,
   PropertyInfo,
 } from "../../property-label";
-import { AlertIcon } from "@webstudio-is/icons";
 
 export const ToggleGroupTooltip = ({
   isOpen,

apps/builder/app/builder/features/style-panel/sections/layout/layout.tsx

@@ -1,4 +1,4 @@
-import { useState, type ReactNode } from "react";
+import { useState, type JSX, type ReactNode } from "react";
 import {
   theme,
   Box,

apps/builder/app/builder/features/style-panel/sections/shared/scrub.tsx

@@ -63,7 +63,7 @@ export const useScrub = <P extends StyleProperty>(props: {
   const nonDependencies = useRef({ props, values, properties });
   nonDependencies.current = { props, values, properties };
 
-  const unitRef = useRef<UnitValue["unit"]>();
+  const unitRef = useRef<undefined | UnitValue["unit"]>(undefined);
 
   useEffect(() => {
     if (finalTarget === undefined) {

apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.tsx

@@ -87,8 +87,8 @@ const useScrub = ({
   onChangeComplete: (value: StyleValue) => void;
   shouldHandleEvent?: (node: Node) => boolean;
 }): [
-  React.MutableRefObject<HTMLDivElement | null>,
-  React.MutableRefObject<HTMLInputElement | null>,
+  React.RefObject<HTMLDivElement | null>,
+  React.RefObject<HTMLInputElement | null>,
 ] => {
   const scrubRef = useRef<HTMLDivElement | null>(null);
   const inputRef = useRef<HTMLInputElement | null>(null);

apps/builder/app/builder/features/style-panel/shared/css-value-input/unit-select.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo } from "react";
+import { useState, useMemo, type JSX } from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import type { Unit } from "@webstudio-is/css-engine";
 import {

apps/builder/app/builder/features/style-panel/shared/filter-content.tsx

@@ -15,7 +15,7 @@ import {
   Select,
   Grid,
 } from "@webstudio-is/design-system";
-import { useEffect, useState } from "react";
+import { useEffect, useState, type JSX } from "react";
 import {
   CssValueInputContainer,
   type IntermediateStyleValue,

apps/builder/app/builder/features/style-panel/shared/repeated-style.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useMemo, type JSX } from "react";
 import type { RgbaColor } from "colord";
 import {
   toValue,

apps/builder/app/builder/features/style-panel/shared/show-more.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, type JSX } from "react";
 import { Flex, Button, Collapsible } from "@webstudio-is/design-system";
 import {
   ChevronFilledDownIcon,

apps/builder/app/builder/features/workspace/canvas-iframe.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useMemo, useRef, type RefObject } from "react";
+import { forwardRef, useMemo, useRef, type JSX, type RefObject } from "react";
 import {
   css,
   canvasPointerEventsPropertyName,
@@ -27,7 +27,7 @@ type CanvasIframeProps = JSX.IntrinsicElements["iframe"];
 const CanvasRectUpdater = ({
   iframeRef,
 }: {
-  iframeRef: RefObject<HTMLIFrameElement>;
+  iframeRef: RefObject<null | HTMLIFrameElement>;
 }) => {
   const [updateCallback, setUpdateCallback] = useState<
     undefined | (() => void)

apps/builder/app/builder/shared/assets/assets-shell.tsx

@@ -1,4 +1,10 @@
-import { useEffect, useRef, useState, type ComponentProps } from "react";
+import {
+  useEffect,
+  useRef,
+  useState,
+  type ComponentProps,
+  type JSX,
+} from "react";
 import type { AssetType } from "@webstudio-is/asset-uploader";
 import {
   Flex,

apps/builder/app/builder/shared/binding-popover.tsx

@@ -82,7 +82,7 @@ const BindingPanel = ({
   onChange: () => void;
   onSave: (value: string, invalid: boolean) => void;
 }) => {
-  const editorApiRef = useRef<undefined | EditorApi>();
+  const editorApiRef = useRef<undefined | EditorApi>(undefined);
   const [expression, setExpression] = useState(value);
   const usedIdentifiers = useMemo(
     () => getExpressionIdentifiers(value),
@@ -335,7 +335,7 @@ const BindingButton = forwardRef<
 BindingButton.displayName = "BindingButton";
 
 const BindingPopoverContext = createContext<{
-  containerRef?: RefObject<HTMLElement>;
+  containerRef?: RefObject<null | HTMLElement>;
   side?: "left" | "right";
 }>({});
 

apps/builder/app/builder/shared/code-editor-base.tsx

@@ -197,8 +197,8 @@ export const EditorContent = ({
 }: EditorContentProps) => {
   globalStyles();
 
-  const editorRef = useRef<null | HTMLDivElement>(null);
-  const viewRef = useRef<undefined | EditorView>();
+  const editorRef = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<undefined | EditorView>(undefined);
 
   const onChangeRef = useRef(onChange);
   onChangeRef.current = onChange;

apps/builder/app/builder/shared/floating-panel.tsx

@@ -1,11 +1,11 @@
 import {
-  type MutableRefObject,
   type RefObject,
   useContext,
   useRef,
   useState,
   createContext,
   useLayoutEffect,
+  type JSX,
 } from "react";
 import {
   FloatingPanelPopover,
@@ -23,9 +23,9 @@ export const useSideOffset = ({
 }: {
   side?: "left" | "right";
   isOpen: boolean;
-  containerRef?: RefObject<HTMLElement>;
-}): [MutableRefObject<HTMLButtonElement | null>, number] => {
-  const triggerRef = useRef<HTMLButtonElement | null>(null);
+  containerRef?: RefObject<null | HTMLElement>;
+}): [RefObject<HTMLButtonElement>, number] => {
+  const triggerRef = useRef<null | HTMLButtonElement>(null);
   const [sideOffset, setSideOffset] = useState(0);
 
   // use layout effect to avoid popover jumping
@@ -55,7 +55,7 @@ export const useSideOffset = ({
 };
 
 const FloatingPanelContext = createContext<{
-  container: RefObject<HTMLElement>;
+  container: RefObject<null | HTMLElement>;
 }>({
   container: {
     current: null,
@@ -67,7 +67,7 @@ export const FloatingPanelProvider = ({
   container,
 }: {
   children: JSX.Element;
-  container: RefObject<HTMLElement>;
+  container: RefObject<null | HTMLElement>;
 }) => (
   <FloatingPanelContext.Provider value={{ container }}>
     {children}

apps/builder/app/canvas/canvas.tsx

@@ -140,7 +140,7 @@ const useElementsTree = (
 
 const DesignMode = () => {
   const debounceEffect = useDebounceEffect();
-  const ref = useRef<Instances>();
+  const ref = useRef<undefined | Instances>(undefined);
 
   useDragAndDrop();
 
@@ -182,7 +182,7 @@ const DesignMode = () => {
 
 const ContentEditMode = () => {
   const debounceEffect = useDebounceEffect();
-  const ref = useRef<Instances>();
+  const ref = useRef<undefined | Instances>(undefined);
 
   useEffect(() => {
     const abortController = new AbortController();

apps/builder/app/canvas/elements.tsx

@@ -1,6 +1,7 @@
 import {
   Fragment,
   type ForwardRefExoticComponent,
+  type JSX,
   type RefAttributes,
   type RefObject,
 } from "react";

apps/builder/app/canvas/features/text-editor/text-editor.tsx

@@ -4,6 +4,7 @@ import {
   useLayoutEffect,
   useCallback,
   useRef,
+  type JSX,
 } from "react";
 import {
   KEY_ENTER_COMMAND,

apps/builder/app/canvas/features/webstudio-component/webstudio-component.tsx

@@ -7,6 +7,7 @@ import {
   useMemo,
   Fragment,
   type ReactNode,
+  type JSX,
 } from "react";
 import { $getSelection, $isRangeSelection } from "lexical";
 import { computed } from "nanostores";

apps/builder/app/canvas/shared/use-pointer-outline.ts

@@ -4,7 +4,7 @@ import type { Point } from "@webstudio-is/design-system";
 // Draw a point where we think the pointer is to visualize if calculations are based on the right position
 // Only needed for debugging.
 export const usePointerOutline = () => {
-  const ref = useRef<HTMLDivElement>();
+  const ref = useRef<undefined | HTMLDivElement>(undefined);
 
   useEffect(() => {
     const div = document.createElement("div");

apps/builder/app/dashboard/dashboard.stories.tsx

@@ -1,4 +1,5 @@
 import type { StoryFn } from "@storybook/react";
+import type { JSX } from "react";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { Dashboard } from "./dashboard";
 import type { UserPlanFeatures } from "~/shared/db/user-plan-features.server";

apps/builder/app/dashboard/projects/project-dialogs.tsx

@@ -1,5 +1,5 @@
 import { useRevalidator } from "@remix-run/react";
-import { useEffect, useState } from "react";
+import { useEffect, useState, type JSX } from "react";
 import {
   Box,
   Button,

apps/builder/app/shared/copy-paste/plugin-webflow/plugin-webflow.test.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import { test, expect, describe, beforeEach } from "vitest";
 import { nanoid } from "nanoid";
 import {

apps/builder/app/shared/matcher.test.tsx

@@ -1,4 +1,5 @@
 import { describe, expect, test, vi } from "vitest";
+import type { JSX } from "react";
 import { renderJsx, $, ExpressionValue } from "@webstudio-is/sdk/testing";
 import { coreMetas } from "@webstudio-is/react-sdk";
 import * as baseMetas from "@webstudio-is/sdk-components-react/metas";

apps/builder/app/shared/pubsub/create.ts

@@ -125,7 +125,9 @@ export const createPubsub = <PublishMap>() => {
      * To publish a postMessage event on the iframe and parent window from the parent window.
      */
     usePublish() {
-      const postMessageRef = useRef<typeof window.postMessage>();
+      const postMessageRef = useRef<undefined | typeof window.postMessage>(
+        undefined
+      );
 
       const iframeRefCallback = useCallback(
         (element: HTMLIFrameElement | null) => {

apps/builder/app/shared/style-object-model.test.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import { describe, expect, test } from "vitest";
 import type { HtmlTags } from "html-tags";
 import {

packages/design-system/src/components/__DEPRECATED__/list.tsx

@@ -2,6 +2,7 @@ import {
   type ComponentProps,
   type FocusEvent,
   forwardRef,
+  type JSX,
   type KeyboardEvent,
 } from "react";
 import { Text } from "../text";

packages/design-system/src/components/combobox.tsx

@@ -273,7 +273,7 @@ export const useCombobox = <Item,>({
   ...rest
 }: UseComboboxProps<Item>) => {
   const [isOpen, setIsOpen] = useState(false);
-  const selectedItemRef = useRef<Item>();
+  const selectedItemRef = useRef<undefined | Item>(undefined);
   const itemsCache = useRef<Item[]>([]);
   const [matchedItems, setMatchedItems] = useState<Item[]>([]);
 

packages/design-system/src/components/component-card.tsx

@@ -3,7 +3,7 @@
  * https://www.figma.com/file/sfCE7iLS0k25qCxiifQNLE/%F0%9F%93%9A-Webstudio-Library?node-id=2608-8921
  */
 
-import { forwardRef, type ComponentProps } from "react";
+import { forwardRef, type ComponentProps, type JSX } from "react";
 import { css, theme } from "../stitches.config";
 import { textVariants } from "./text";
 import { Tooltip } from "./tooltip";