Upgrade codebase to latest React, Redux, and TS (#10646)

* Bump React, RTK, TS, and others to latest

* Fix TS target settings

* Update React override types

* Update Activity and JSX imports

* Fix Picker types

* Update ReactNode usages

* Update Redux store types

* Bump headlessui

* Fix remaining TS issues

* Bump nested React

* Bump RTL and fix RDT fork for React 19

* Transform ESM packages

* Replace act imports

* Remove uses of `react-transition-group`

* Remove react-transition-group

* Bump Next to 15.x

* Reset tsconfig

Author: markerikson

.yarn/patches/@replayio-react-devtools-inline-npm-4.28.6-9200d215d5.patch

@@ -0,0 +1,37 @@
+diff --git a/dist/backend.js b/dist/backend.js
+index 3f760fc6b271b12d6ac05bcab347c0a6eea30e28..90a6da63c6cba3a3d8f4afd87e574c1b4515a60b 100644
+--- a/dist/backend.js
++++ b/dist/backend.js
+@@ -5627,7 +5627,7 @@ const external_react_namespaceObject = require("react");
+  * 
+  */
+ 
+-const ReactSharedInternals = external_react_namespaceObject.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
++const ReactSharedInternals = external_react_namespaceObject.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED || (function() { var ni = external_react_namespaceObject.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE; return ni ? { ReactCurrentDispatcher: { get current() { return ni.H; }, set current(v) { ni.H = v; } }, ReactCurrentOwner: { get current() { return ni.A; }, set current(v) { ni.A = v; } }, ReactCurrentBatchConfig: { get transition() { return ni.T; }, set transition(v) { ni.T = v; } } } : {}; })();
+ /* harmony default export */ const shared_ReactSharedInternals = (ReactSharedInternals);
+ ;// CONCATENATED MODULE: ../react-reconciler/src/ReactWorkTags.js
+ /**
+@@ -14841,8 +14841,8 @@ function initBackend(hook, agent, global) {
+     let rendererInterface = hook.rendererInterfaces.get(id); // Inject any not-yet-injected renderers (if we didn't reload-and-profile)
+ 
+     if (rendererInterface == null) {
+-      if (typeof renderer.findFiberByHostInstance === 'function') {
+-        // react-reconciler v16+
++      if (typeof renderer.findFiberByHostInstance === 'function' || typeof renderer.getCurrentFiber === 'function') {
++        // react-reconciler v16+ (findFiberByHostInstance) or React 19+ (getCurrentFiber)
+         rendererInterface = attach(hook, id, renderer, global);
+       } else if (renderer.ComponentTree) {
+         // react-dom v15
+diff --git a/dist/frontend.js b/dist/frontend.js
+index 3cee5fd2a7483b4bf3d742e824a9a4af668c7a17..4ba7a1c940cf390e8006432758a4e077f86f69d2 100644
+--- a/dist/frontend.js
++++ b/dist/frontend.js
+@@ -23242,7 +23242,7 @@ function Button_Button({
+ const Pending = 0;
+ const Resolved = 1;
+ const Rejected = 2;
+-const ReactCurrentDispatcher = external_react_namespaceObject.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher;
++const ReactCurrentDispatcher = (external_react_namespaceObject.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED || {}).ReactCurrentDispatcher || { get current() { return (external_react_namespaceObject.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE || {}).H; }, set current(v) { (external_react_namespaceObject.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE || {}).H = v; } };
+ 
+ function readContext(Context) {
+   const dispatcher = ReactCurrentDispatcher.current;

jest.config.js

@@ -72,6 +72,9 @@ module.exports = {
     // Handle text file imports
     "^.+\\.properties$": "<rootDir>/test/jest/jest-text-transformer.js",
   },
-  transformIgnorePatterns: ["/node_modules/", "^.+\\.module\\.(css|sass|scss)$"],
+  transformIgnorePatterns: [
+    "/node_modules/(?!(suspense|array-sorting-utilities|interval-utilities|point-utilities)/)",
+    "^.+\\.module\\.(css|sass|scss)$",
+  ],
   setupFilesAfterEnv: ["<rootDir>/test/jest/setupEnv.js"],
 };

package.json

@@ -149,9 +149,10 @@ export const Accordion: FC<{
       };
     }
 
+    const props = (c as ReactElement).props as Record<string, any>;
     return {
-      expanded: !!(c as ReactElement).props.expanded ?? false,
-      initialHeight: (c as ReactElement).props.initialHeight,
+      expanded: !!props.expanded,
+      initialHeight: props.initialHeight,
     };
   });
   const [state, dispatch] = useReducer(reducer, getInitialState(initialState!));

packages/accordion/index.tsx

@@ -2,7 +2,6 @@ import classNames from "classnames";
 import type { MouseEventHandler } from "react";
 import { forwardRef, useRef, useState } from "react";
 import mergeRefs from "react-merge-refs";
-import { Transition } from "react-transition-group";
 
 import { Icon } from "design/Icon";
 
@@ -67,23 +66,15 @@ export const AddCommentButton = forwardRef<HTMLButtonElement, AddCommentButtonPr
   }
 );
 
-// Duration must match `transition` rule in module.css file
-const duration = 100;
-
-const states = {
-  entering: { opacity: 0, transform: "scale(0.98)" },
-  entered: { opacity: 1, transform: "scale(1)" },
-  exiting: { opacity: 0, transform: "scale(0.98)" },
-  exited: { display: "none", opacity: 0, transform: "scale(0.98)" },
-  unmounted: { display: "none", opacity: 0, transform: "scale(0.98)" },
-};
-
 const TextFade = ({ children, visible }: { children: React.ReactNode; visible: boolean }) => (
-  <Transition in={visible} timeout={duration}>
-    {state => (
-      <span className={styles.TextFade} style={states[state]}>
-        {children}
-      </span>
-    )}
-  </Transition>
+  <span
+    className={styles.TextFade}
+    style={
+      visible
+        ? { opacity: 1, transform: "scale(1)" }
+        : { display: "none", opacity: 0, transform: "scale(0.98)" }
+    }
+  >
+    {children}
+  </span>
 );

packages/accordion/website/package.json

@@ -66,15 +66,20 @@ export function Picker<Values extends any>({
           throw Error("Picker children must be a valid React element.");
         }
 
+        // @ts-expect-error Can't enforce props type
         if (!child.props.id) {
           const name = typeof child.type === "string" ? child.type : child.type.name;
           throw Error(`Immediate Picker child "${name}" must pass an "id" prop.`);
         }
 
+        // @ts-expect-error Can't enforce props type
         const isToggle = child.props.id === "toggle";
         const showToggle = value === undefined && isToggle;
+        // @ts-expect-error Can't enforce props type
         const isChildActive = value === child.props.id || showToggle;
+        // @ts-expect-error Can't enforce props type
         const wasChildActive = previousId.current === child.props.id;
+        // @ts-expect-error Can't enforce props type
         const childVariants = child.props.variants || {};
         const onSelect = () => {
           const nextIsOpen = !isOpen;
@@ -93,8 +98,10 @@ export function Picker<Values extends any>({
             transitioning.current = true;
           }
 
+          // @ts-expect-error Can't enforce props type
           const nextActiveId = isToggle ? undefined : child.props.id;
 
+          // @ts-expect-error Can't enforce props type
           previousId.current = isChildActive ? child.props.id : undefined;
 
           onChange(nextActiveId);
@@ -116,12 +123,14 @@ export function Picker<Values extends any>({
           },
           transition: {
             ...transition,
+            // @ts-expect-error Can't enforce props type
             ...child.props.transition,
           },
           style: {
             zIndex: isChildActive || wasChildActive ? 10 : 1,
             gridColumn: isOpen ? undefined : 1,
             gridRow: 1,
+            // @ts-expect-error Can't enforce props type
             ...child.props.style,
           },
           onClick: onSelect,

packages/design/AddCommentButton/index.tsx

@@ -1,4 +1,4 @@
-import { unstable_Activity as Activity, ReactNode, useEffect, useRef } from "react";
+import { Activity, ReactNode, useEffect, useRef } from "react";
 
 // Wrapper around the Activity API that defers rendering the Activity tree initially,
 // until it's been explicitly marked as "visible".

packages/design/PrefixBadgePicker/Picker.tsx

@@ -24,7 +24,7 @@ export default function Popup({
 }: Omit<HTMLAttributes<HTMLDivElement>, "onClick"> & {
   children: ReactNode;
   clientX?: number | null;
-  containerRef?: RefObject<HTMLElement> | null;
+  containerRef?: RefObject<HTMLElement | null> | null;
   dismiss: Dismiss;
   dismissOnMouseLeave?: boolean;
   horizontalAlignment?: "left" | "center" | "right";

packages/replay-next/components/LazyActivity.tsx

@@ -22,7 +22,11 @@ import EagerEvaluationResult from "./EagerEvaluationResult";
 import useTerminalHistory from "./hooks/useTerminalHistory";
 import styles from "./ConsoleInput.module.css";
 
-export default function ConsoleInput({ inputRef }: { inputRef?: RefObject<ImperativeHandle> }) {
+export default function ConsoleInput({
+  inputRef,
+}: {
+  inputRef?: RefObject<ImperativeHandle | null>;
+}) {
   const { executionPoint } = useContext(TimelineContext);
   const { enterFocusMode } = useContext(FocusContext);
 
@@ -69,7 +73,7 @@ export default function ConsoleInput({ inputRef }: { inputRef?: RefObject<Impera
   );
 }
 
-function ConsoleInputSuspends({ inputRef }: { inputRef?: RefObject<ImperativeHandle> }) {
+function ConsoleInputSuspends({ inputRef }: { inputRef?: RefObject<ImperativeHandle | null> }) {
   const [searchState] = useContext(ConsoleSearchContext);
   const { selectedPauseAndFrameId } = useContext(SelectedFrameContext);
   const replayClient = useContext(ReplayClientContext);