fix(deps): update react monorepo (major) (#1801)

* fix(deps): update react monorepo

* Updates

* Update

* Update

* Update

* Updates

* Updates

* Update

* Remove usages of react-test-renderer

* Fix

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Nathan Bierema <nbierema@gmail.com>

extension/package.json

@@ -37,10 +37,10 @@
     "jsan": "^3.1.14",
     "localforage": "^1.10.0",
     "lodash-es": "^4.17.21",
-    "react": "^18.3.1",
+    "react": "^19.1.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.1.0",
     "react-icons": "^5.5.0",
-    "react-is": "^18.3.1",
+    "react-is": "^19.1.0",
     "react-json-tree": "workspace:^",
     "react-redux": "^9.2.0",
     "redux": "^5.0.1",
@@ -58,8 +58,8 @@
     "@testing-library/react": "^16.3.0",
     "@types/chrome": "^0.0.323",
     "@types/lodash-es": "^4.17.12",
-    "@types/react": "^18.3.22",
+    "@types/react": "^19.1.6",
-    "@types/react-dom": "^18.3.7",
+    "@types/react-dom": "^19.1.5",
     "@types/styled-components": "^5.1.34",
     "chromedriver": "^126.0.5",
     "cross-env": "^7.0.3",

package.json

@@ -9,7 +9,7 @@
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-jest": "^28.11.0",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "jest": "^29.7.0",
     "prettier": "3.5.3",
     "typescript": "~5.8.3",

packages/react-dock/demo/package.json

@@ -10,12 +10,12 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "react": "^18.3.1",
+    "react": "^19.1.0",
     "react-bootstrap": "^2.10.10",
     "react-dock": "workspace:^",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.1.0",
     "react-icons": "^5.5.0",
-    "react-is": "^18.3.1",
+    "react-is": "^19.1.0",
     "styled-components": "^5.3.11"
   },
   "devDependencies": {
@@ -24,8 +24,8 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@types/node": "^22.15.21",
-    "@types/react": "^18.3.22",
+    "@types/react": "^19.1.6",
-    "@types/react-dom": "^18.3.7",
+    "@types/react-dom": "^19.1.5",
     "@types/styled-components": "^5.1.34",
     "babel-loader": "^10.0.0",
     "cross-env": "^7.0.3",

packages/react-dock/eslint.config.js

@@ -1,11 +1,9 @@
 import eslintJs from '../../eslint.js.config.base.mjs';
 import eslintTsReact from '../../eslint.ts.react.config.base.mjs';
-import eslintTsReactJest from '../../eslint.ts.react.jest.config.base.mjs';
 
 export default [
   ...eslintJs,
   ...eslintTsReact(import.meta.dirname),
-  ...eslintTsReactJest(import.meta.dirname),
   {
     ignores: ['demo', 'lib'],
   },

packages/react-dock/jest.config.cjs

@@ -1,13 +0,0 @@
-module.exports = {
-  testEnvironment: 'jsdom',
-  extensionsToTreatAsEsm: ['.ts', '.tsx'],
-  moduleNameMapper: {
-    '^(\\.{1,2}/.*)\\.js$': '$1',
-  },
-  transform: {
-    '^.+\\.tsx?$': [
-      'ts-jest',
-      { tsconfig: 'tsconfig.test.json', useESM: true },
-    ],
-  },
-};

packages/react-dock/package.json

@@ -29,26 +29,19 @@
   "scripts": {
     "build": "tsc",
     "clean": "rimraf lib",
-    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
     "lint": "eslint .",
     "type-check": "tsc --noEmit",
     "prepack": "pnpm run clean && pnpm run build",
-    "prepublish": "pnpm run lint && pnpm run test"
+    "prepublish": "pnpm run lint"
   },
   "dependencies": {
     "@types/lodash-es": "^4.17.12",
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
-    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.6",
-    "@types/react": "^18.3.22",
+    "react": "^19.1.0",
-    "@types/react-test-renderer": "^18.3.1",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "react": "^18.3.1",
-    "react-test-renderer": "^18.3.1",
     "rimraf": "^6.0.1",
-    "ts-jest": "^29.3.4",
     "typescript": "~5.8.3"
   },
   "peerDependencies": {

packages/react-dock/src/Dock.tsx

@@ -228,12 +228,12 @@ interface Props {
   dockHiddenStyle?: React.CSSProperties | null;
   duration: number;
   children?:
-    | React.FunctionComponent<{
+    | ((params: {
         position: 'left' | 'right' | 'top' | 'bottom';
         isResizing: boolean | undefined;
         size: number;
         isVisible: boolean | undefined;
-      }>
+      }) => ReactNode)
     | ReactNode;
 }
 
@@ -363,14 +363,7 @@ export default class Dock extends Component<Props, State> {
           />
           <div style={styles.dockContent}>
             {typeof children === 'function'
-              ? (
+              ? children({
-                  children as React.FunctionComponent<{
-                    position: 'left' | 'right' | 'top' | 'bottom';
-                    isResizing: boolean | undefined;
-                    size: number;
-                    isVisible: boolean | undefined;
-                  }>
-                )({
                   position,
                   isResizing,
                   size,

packages/react-dock/test/index.test.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import TestRenderer from 'react-test-renderer/shallow';
-import Dock from '../src/Dock.js';
-
-describe('Dock component', function () {
-  it('should have shallow rendering', function () {
-    const renderer = TestRenderer.createRenderer();
-    const DockEl = <Dock />;
-    renderer.render(DockEl);
-
-    const result = renderer.getRenderOutput();
-
-    expect(DockEl.props).toEqual({
-      position: 'left',
-      zIndex: 99999999,
-      fluid: true,
-      defaultSize: 0.3,
-      dimMode: 'opaque',
-      duration: 200,
-    });
-    expect(result.type).toBe('div');
-  });
-});

packages/react-json-tree/examples/package.json

@@ -20,9 +20,9 @@
   },
   "dependencies": {
     "immutable": "^5.1.2",
-    "react": "^18.3.1",
+    "react": "^19.1.0",
     "react-base16-styling": "workspace:^",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.1.0",
     "react-json-tree": "workspace:^"
   },
   "devDependencies": {
@@ -31,8 +31,8 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@types/node": "^22.15.21",
-    "@types/react": "^18.3.22",
+    "@types/react": "^19.1.6",
-    "@types/react-dom": "^18.3.7",
+    "@types/react-dom": "^19.1.5",
     "babel-loader": "^10.0.0",
     "cross-env": "^7.0.3",
     "fork-ts-checker-webpack-plugin": "^9.1.0",

packages/react-json-tree/package.json

@@ -45,11 +45,9 @@
   },
   "devDependencies": {
     "@types/jest": "^29.5.14",
-    "@types/react": "^18.3.22",
+    "@types/react": "^19.1.6",
-    "@types/react-test-renderer": "^18.3.1",
     "jest": "^29.7.0",
-    "react": "^18.3.1",
+    "react": "^19.1.0",
-    "react-test-renderer": "^18.3.1",
     "rimraf": "^6.0.1",
     "ts-jest": "^29.3.4",
     "typescript": "~5.8.3"

packages/react-json-tree/test/index.spec.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import TestRenderer from 'react-test-renderer/shallow';
-
-import { JSONTree } from '../src/index.js';
-import JSONNode from '../src/JSONNode.js';
-
-const BASIC_DATA = { a: 1, b: 'c' };
-
-function render(component: React.ReactElement) {
-  const renderer = TestRenderer.createRenderer();
-  renderer.render(component);
-  return renderer.getRenderOutput();
-}
-
-describe('JSONTree', () => {
-  it('should render basic tree', () => {
-    const result = render(<JSONTree data={BASIC_DATA} />);
-
-    expect(result.type).toBe('ul');
-    expect(result.props.children.type.name).toBe(JSONNode.name);
-  });
-});

packages/redux-devtools-app-core/package.json

@@ -50,7 +50,7 @@
     "jsan": "^3.1.14",
     "jsondiffpatch": "^0.7.3",
     "react-icons": "^5.5.0",
-    "react-is": "^18.3.1"
+    "react-is": "^19.1.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.27.2",
@@ -70,15 +70,15 @@
     "@types/jsan": "^3.1.5",
     "@types/json-schema": "^7.0.15",
     "@types/node": "^22.15.21",
-    "@types/react": "^18.3.22",
+    "@types/react": "^19.1.6",
-    "@types/react-dom": "^18.3.7",
+    "@types/react-dom": "^19.1.5",
     "@types/styled-components": "^5.1.34",
     "cross-env": "^7.0.3",
     "esbuild": "^0.25.4",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "react": "^18.3.1",
+    "react": "^19.1.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.1.0",
     "react-redux": "^9.2.0",
     "redux": "^5.0.1",
     "redux-persist": "^6.0.0",

packages/redux-devtools-app/package.json

@@ -62,8 +62,8 @@
     "@types/jsan": "^3.1.5",
     "@types/json-schema": "^7.0.15",
     "@types/node": "^22.15.21",
-    "@types/react": "^18.3.22",
+    "@types/react": "^19.1.6",
-    "@types/react-dom": "^18.3.7",
+    "@types/react-dom": "^19.1.5",
     "@types/socketcluster-client": "^19.1.0",
     "@types/styled-components": "^5.1.34",
     "@types/webpack-env": "^1.18.8",
@@ -75,8 +75,8 @@
     "globals": "^16.1.0",
     "html-loader": "^5.1.0",
     "html-webpack-plugin": "^5.6.3",
-    "react": "^18.3.1",
+    "react": "^19.1.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.1.0",
     "rimraf": "^6.0.1",
     "style-loader": "^4.0.0",
     "styled-components": "^5.3.11",

packages/redux-devtools-chart-monitor/package.json

@@ -53,8 +53,8 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@redux-devtools/core": "workspace:^",
-    "@types/react": "^18.3.22",
+    "@types/react": "^19.1.6",
-    "react": "^18.3.1",
+    "react": "^19.1.0",
     "redux": "^5.0.1",
     "rimraf": "^6.0.1",
     "typescript": "~5.8.3"

packages/redux-devtools-cli/package.json

@@ -45,7 +45,7 @@
     "@emotion/react": "^11.14.0",
     "@redux-devtools/app": "workspace:^",
     "@reduxjs/toolkit": "^2.8.2",
-    "@types/react": "^18.3.22",
+    "@types/react": "^19.1.6",
     "body-parser": "^1.20.3",
     "chalk": "^5.4.1",
     "cors": "^2.8.5",
@@ -59,9 +59,9 @@
     "minimist": "^1.2.8",
     "morgan": "^1.10.0",
     "open": "^10.1.2",
-    "react": "^18.3.1",
+    "react": "^19.1.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.1.0",
-    "react-is": "^18.3.1",
+    "react-is": "^19.1.0",
     "semver": "^7.7.2",
     "socketcluster-server": "^19.1.1",
     "sqlite3": "^5.1.7",

packages/redux-devtools-dock-monitor/package.json

@@ -55,8 +55,8 @@
     "@babel/preset-typescript": "^7.27.1",
     "@redux-devtools/core": "workspace:^",
     "@types/parse-key": "^0.2.2",
-    "@types/react": "^18.3.22",
+    "@types/react": "^19.1.6",
-    "react": "^18.3.1",
+    "react": "^19.1.0",
     "redux": "^5.0.1",
     "rimraf": "^6.0.1",
     "typescript": "~5.8.3"

packages/redux-devtools-inspector-monitor-test-tab/demo/package.json

@@ -18,9 +18,9 @@
     "@redux-devtools/ui": "workspace:^",
     "immutable": "^5.1.2",
     "lodash.shuffle": "^4.2.0",
-    "react": "^18.3.1",
+    "react": "^19.1.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.1.0",
-    "react-is": "^18.3.1",
+    "react-is": "^19.1.0",
     "react-redux": "^9.2.0",
     "react-router-dom": "^6.30.1",
     "redux": "^5.0.1",
@@ -34,8 +34,8 @@
     "@babel/preset-typescript": "^7.27.1",
     "@types/lodash.shuffle": "^4.2.9",
     "@types/node": "^22.15.21",
-    "@types/react": "^18.3.22",
+    "@types/react": "^19.1.6",
-    "@types/react-dom": "^18.3.7",
+    "@types/react-dom": "^19.1.5",
     "@types/redux-logger": "^3.0.13",
     "@types/styled-components": "^5.1.34",
     "@types/webpack-env": "^1.18.8",

packages/redux-devtools-inspector-monitor-test-tab/demo/src/DemoApp.tsx

@@ -70,7 +70,7 @@ interface Props
 }
 
 function DemoApp(props: Props) {
-  const timeout = useRef<number | undefined>();
+  const timeout = useRef<number | undefined>(undefined);
   const location = useLocation();
 
   const options = getOptions(location);

packages/redux-devtools-inspector-monitor-test-tab/package.json

@@ -69,11 +69,11 @@
     "@types/jest": "^29.5.14",
     "@types/jsan": "^3.1.5",
     "@types/object-path": "^0.11.4",
-    "@types/react": "^18.3.22",
+    "@types/react": "^19.1.6",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "react": "^18.3.1",
+    "react": "^19.1.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.1.0",
     "redux": "^5.0.1",
     "rimraf": "^6.0.1",
     "ts-jest": "^29.3.4",

packages/redux-devtools-inspector-monitor-trace-tab/package.json

@@ -56,13 +56,12 @@
     "@types/jest": "^29.5.14",
     "@types/node": "^22.15.21",
     "@types/path-browserify": "^1.0.3",
-    "@types/react": "^18.3.22",
+    "@types/react": "^19.1.6",
     "@types/source-map": "0.5.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "react": "^18.3.1",
+    "react": "^19.1.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.1.0",
-    "react-test-renderer": "^18.3.1",
     "redux": "^5.0.1",
     "rimraf": "^6.0.1",
     "ts-jest": "^29.3.4",

packages/redux-devtools-inspector-monitor/demo/package.json

@@ -16,10 +16,10 @@
     "@redux-devtools/inspector-monitor": "workspace:^",
     "immutable": "^5.1.2",
     "lodash.shuffle": "^4.2.0",
-    "react": "^18.3.1",
+    "react": "^19.1.0",
     "react-base16-styling": "workspace:^",
     "react-bootstrap": "^2.10.10",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.1.0",
     "react-redux": "^9.2.0",
     "react-router-dom": "^6.30.1",
     "redux": "^5.0.1",
@@ -32,8 +32,8 @@
     "@babel/preset-typescript": "^7.27.1",
     "@types/lodash.shuffle": "^4.2.9",
     "@types/node": "^22.15.21",
-    "@types/react": "^18.3.22",
+    "@types/react": "^19.1.6",
-    "@types/react-dom": "^18.3.7",
+    "@types/react-dom": "^19.1.5",
     "@types/redux-logger": "^3.0.13",
     "@types/webpack-env": "^1.18.8",
     "babel-loader": "^10.0.0",

packages/redux-devtools-inspector-monitor/demo/src/DemoApp.tsx

@@ -142,7 +142,7 @@ interface Props
 }
 
 function DemoApp(props: Props) {
-  const timeout = useRef<number | undefined>();
+  const timeout = useRef<number | undefined>(undefined);
   const location = useLocation();
   const navigate = useNavigate();
 

packages/redux-devtools-inspector-monitor/package.json

@@ -64,8 +64,8 @@
     "@types/dateformat": "^5.0.3",
     "@types/hex-rgba": "^1.0.3",
     "@types/lodash.debounce": "^4.0.9",
-    "@types/react": "^18.3.22",
+    "@types/react": "^19.1.6",
-    "react": "^18.3.1",
+    "react": "^19.1.0",
     "redux": "^5.0.1",
     "rimraf": "^6.0.1",
     "typescript": "~5.8.3"

packages/redux-devtools-inspector-monitor/src/ActionList.tsx

@@ -83,7 +83,7 @@ export default function ActionList<A extends Action<string>>({
   onReorderAction,
 }: Props<A>): JSX.Element {
   const nodeRef = useRef<HTMLDivElement | null>(null);
-  const prevLastActionId = useRef<number | undefined>();
+  const prevLastActionId = useRef<number | undefined>(undefined);
 
   useLayoutEffect(() => {
     if (nodeRef.current && prevLastActionId.current !== lastActionId) {

packages/redux-devtools-log-monitor/package.json

@@ -56,8 +56,8 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@redux-devtools/core": "workspace:^",
-    "@types/react": "^18.3.22",
+    "@types/react": "^19.1.6",
-    "react": "^18.3.1",
+    "react": "^19.1.0",
     "redux": "^5.0.1",
     "rimraf": "^6.0.1",
     "typescript": "~5.8.3"

packages/redux-devtools-rtk-query-monitor/demo/package.json

@@ -21,10 +21,10 @@
     "@reduxjs/toolkit": "^2.8.2",
     "framer-motion": "^11.18.2",
     "msw": "^2.8.7",
-    "react": "^18.3.1",
+    "react": "^19.1.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.1.0",
     "react-icons": "^5.5.0",
-    "react-is": "^18.3.1",
+    "react-is": "^19.1.0",
     "react-redux": "^9.2.0",
     "react-router-dom": "^6.30.1",
     "styled-components": "^5.3.11"
@@ -36,8 +36,8 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@types/node": "^22.15.21",
-    "@types/react": "^18.3.22",
+    "@types/react": "^19.1.6",
-    "@types/react-dom": "^18.3.7",
+    "@types/react-dom": "^19.1.5",
     "@types/styled-components": "^5.1.34",
     "babel-loader": "^10.0.0",
     "copy-webpack-plugin": "^13.0.0",

packages/redux-devtools-rtk-query-monitor/package.json

@@ -71,11 +71,11 @@
     "@types/jest": "^29.5.14",
     "@types/hex-rgba": "^1.0.3",
     "@types/lodash.debounce": "^4.0.9",
-    "@types/react": "^18.3.22",
+    "@types/react": "^19.1.6",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "react": "^18.3.1",
+    "react": "^19.1.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.1.0",
     "react-redux": "^9.2.0",
     "redux": "^5.0.1",
     "rimraf": "^6.0.1",

packages/redux-devtools-rtk-query-monitor/src/components/ArrowUpIcon.tsx

@@ -9,7 +9,7 @@ export type ArrowUpIconProps = Omit<
 /**
  * @see https://icons.getbootstrap.com/icons/arrow-up/
  */
-export function ArrowUpIcon(props: ArrowUpIconProps): JSX.Element {
+export function ArrowUpIcon(props: ArrowUpIconProps): React.JSX.Element {
   return (
     <svg
       fill="currentColor"

packages/redux-devtools-rtk-query-monitor/src/components/NoRtkQueryApi.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export function NoRtkQueryApi(): JSX.Element {
+export function NoRtkQueryApi(): React.JSX.Element {
   return (
     <div
       css={(theme) => ({

packages/redux-devtools-rtk-query-monitor/src/components/RegexIcon.tsx

@@ -9,7 +9,7 @@ export type RegexIconProps = Omit<
 // from https://commons.wikimedia.org/wiki/File:OOjs_UI_icon_regular-expression.svg
 export function RegexIcon(
   props: React.HTMLAttributes<SVGElement>,
-): JSX.Element {
+): React.JSX.Element {
   return (
     <svg fill="currentColor" {...props} viewBox="0 0 24 24">
       <g>

packages/redux-devtools-rtk-query-monitor/src/components/SortOrderButton.tsx

@@ -11,7 +11,7 @@ export function SortOrderButton({
   isAsc,
   onChange,
   id,
-}: SortOrderButtonProps): JSX.Element {
+}: SortOrderButtonProps): React.JSX.Element {
   const handleButtonClick = (): void => {
     if (!isAsc) {
       onChange(true);

packages/redux-devtools-rtk-query-monitor/src/components/UList.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 export type UListProps = React.HTMLAttributes<HTMLUListElement>;
 
-export function UList(props: UListProps): JSX.Element {
+export function UList(props: UListProps): React.JSX.Element {
   return (
     <ul
       {...props}

packages/redux-devtools-rtk-query-monitor/src/containers/QueryPreview.tsx

@@ -177,10 +177,7 @@ const tabs: ReadonlyArray<
 ];
 
 export class QueryPreview<S> extends React.PureComponent<QueryPreviewProps<S>> {
-  renderLabelWithCounter = (
+  renderLabelWithCounter = (label: string, counter: number): string => {
-    label: React.ReactText,
-    counter: number,
-  ): string => {
     let counterAsString = counter.toFixed(0);
 
     if (counterAsString.length > 3) {

packages/redux-devtools-slider-monitor/examples/todomvc/package.json

@@ -20,9 +20,9 @@
     "@redux-devtools/log-monitor": "workspace:^",
     "@redux-devtools/slider-monitor": "workspace:^",
     "classnames": "^2.5.1",
-    "react": "^18.3.1",
+    "react": "^19.1.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.1.0",
-    "react-is": "^18.3.1",
+    "react-is": "^19.1.0",
     "react-redux": "^9.2.0",
     "redux": "^5.0.1",
     "styled-components": "^5.3.11",
@@ -34,8 +34,8 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@types/node": "^22.15.21",
-    "@types/react": "^18.3.22",
+    "@types/react": "^19.1.6",
-    "@types/react-dom": "^18.3.7",
+    "@types/react-dom": "^19.1.5",
     "@types/styled-components": "^5.1.34",
     "@types/webpack-env": "^1.18.8",
     "babel-loader": "^10.0.0",

packages/redux-devtools-slider-monitor/package.json

@@ -45,8 +45,8 @@
     "@babel/preset-typescript": "^7.27.1",
     "@redux-devtools/core": "workspace:^",
     "@types/node": "^22.15.21",
-    "@types/react": "^18.3.22",
+    "@types/react": "^19.1.6",
-    "react": "^18.3.1",
+    "react": "^19.1.0",
     "redux": "^5.0.1",
     "rimraf": "^6.0.1",
     "typescript": "~5.8.3"

packages/redux-devtools-ui/package.json

@@ -72,16 +72,16 @@
     "@types/color": "^4.2.0",
     "@types/node": "^22.15.21",
     "@types/jest": "^29.5.14",
-    "@types/react": "^18.3.22",
+    "@types/react": "^19.1.6",
     "@types/styled-components": "^5.1.34",
     "babel-loader": "^10.0.0",
     "csstype": "^3.1.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "ncp": "^2.0.0",
-    "react": "^18.3.1",
+    "react": "^19.1.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.1.0",
-    "react-is": "^18.3.1",
+    "react-is": "^19.1.0",
     "rimraf": "^6.0.1",
     "storybook": "^9.0.2",
     "styled-components": "^5.3.11",

packages/redux-devtools-ui/src/ContextMenu/ContextMenu.tsx

@@ -5,7 +5,7 @@ import styles from './styles/index';
 const ContextMenuWrapper = createStyledComponent(styles);
 
 type ReactButtonElement = React.ReactElement<
-  JSX.IntrinsicElements['button'],
+  React.JSX.IntrinsicElements['button'],
   'button'
 >;
 type Item = { name: string; value?: string } | ReactButtonElement;

packages/redux-devtools-ui/src/Tabs/TabsHeader.tsx

@@ -8,7 +8,7 @@ import * as styles from './styles';
 const TabsWrapper = createStyledComponent(styles);
 
 export type ReactButtonElement = React.ReactElement<
-  JSX.IntrinsicElements['button'],
+  React.JSX.IntrinsicElements['button'],
   'button'
 >;
 

packages/redux-devtools-ui/src/utils/createStyledComponent.ts

@@ -11,7 +11,7 @@ import getDefaultTheme, { Theme } from '../themes/default';
 import { ThemeFromProvider } from './theme';
 
 type StyleFunction<
-  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
+  C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>,
   // eslint-disable-next-line @typescript-eslint/no-empty-object-type
   O extends object = {},
 > = InterpolationFunction<
@@ -19,7 +19,7 @@ type StyleFunction<
 >;
 
 interface StylesObject<
-  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
+  C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>,
   // eslint-disable-next-line @typescript-eslint/no-empty-object-type
   O extends object = {},
 > {
@@ -27,13 +27,13 @@ interface StylesObject<
 }
 
 type Styles<
-  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
+  C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>,
   // eslint-disable-next-line @typescript-eslint/no-empty-object-type
   O extends object = {},
 > = StylesObject<C, O> | StyleFunction<C, O>;
 
 function isStylesObject<
-  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
+  C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>,
   // eslint-disable-next-line @typescript-eslint/no-empty-object-type
   O extends object = {},
 >(styles: Styles<C>): styles is StylesObject<C, O> {
@@ -41,7 +41,7 @@ function isStylesObject<
 }
 
 const getStyle = <
-  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
+  C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>,
   // eslint-disable-next-line @typescript-eslint/no-empty-object-type
   O extends object = {},
 >(
@@ -56,7 +56,7 @@ function isThemeFromProvider(
 }
 
 export default function createStyledComponent<
-  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
+  C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>,
   // eslint-disable-next-line @typescript-eslint/no-empty-object-type
   O extends object = {},
 >(

packages/redux-devtools/examples/counter/package.json

@@ -22,8 +22,8 @@
     "@redux-devtools/core": "workspace:^",
     "@redux-devtools/dock-monitor": "workspace:^",
     "@redux-devtools/log-monitor": "workspace:^",
-    "react": "^18.3.1",
+    "react": "^19.1.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.1.0",
     "react-redux": "^9.2.0",
     "redux": "^5.0.1",
     "redux-thunk": "^3.1.0"
@@ -34,8 +34,8 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@types/node": "^22.15.21",
-    "@types/react": "^18.3.22",
+    "@types/react": "^19.1.6",
-    "@types/react-dom": "^18.3.7",
+    "@types/react-dom": "^19.1.5",
     "@types/webpack-env": "^1.18.8",
     "babel-loader": "^10.0.0",
     "cross-env": "^7.0.3",

packages/redux-devtools/examples/todomvc/package.json

@@ -35,8 +35,8 @@
     "@redux-devtools/dock-monitor": "workspace:^",
     "@redux-devtools/log-monitor": "workspace:^",
     "classnames": "^2.5.1",
-    "react": "^18.3.1",
+    "react": "^19.1.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.1.0",
     "react-redux": "^9.2.0",
     "redux": "^5.0.1",
     "todomvc-app-css": "^2.4.3"
@@ -47,8 +47,8 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@types/node": "^22.15.21",
-    "@types/react": "^18.3.22",
+    "@types/react": "^19.1.6",
-    "@types/react-dom": "^18.3.7",
+    "@types/react-dom": "^19.1.5",
     "@types/webpack-env": "^1.18.8",
     "babel-loader": "^10.0.0",
     "cross-env": "^7.0.3",

packages/redux-devtools/package.json

@@ -54,10 +54,10 @@
     "@babel/preset-typescript": "^7.27.1",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.15.21",
-    "@types/react": "^18.3.22",
+    "@types/react": "^19.1.6",
     "jest": "^29.7.0",
-    "react": "^18.3.1",
+    "react": "^19.1.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.1.0",
     "react-redux": "^9.2.0",
     "redux": "^5.0.1",
     "rimraf": "^6.0.1",

packages/redux-devtools/src/createDevTools.tsx

@@ -94,7 +94,7 @@ export default function createDevTools<
     constructor(props: Props<S, A, MonitorState>) {
       super(props);
 
-      if (ReactReduxContext) {
+      if (ReactReduxContext as typeof ReactReduxContext | undefined) {
         if (this.props.store && !this.props.store.liftedStore) {
           logError('NoLiftedStore');
         }

patches/@dnd-kit__core.patch

@@ -0,0 +1,59 @@
+diff --git a/dist/components/Accessibility/Accessibility.d.ts b/dist/components/Accessibility/Accessibility.d.ts
+index bb8c25b3e818b31da14a1dc64c7d8cc4ad2c1b2f..dc8a50037b90a7a4044d54f2abdf58d1b3dc4bd3 100644
+--- a/dist/components/Accessibility/Accessibility.d.ts
++++ b/dist/components/Accessibility/Accessibility.d.ts
+@@ -6,5 +6,5 @@ interface Props {
+     screenReaderInstructions?: ScreenReaderInstructions;
+     hiddenTextDescribedById: string;
+ }
+-export declare function Accessibility({ announcements, container, hiddenTextDescribedById, screenReaderInstructions, }: Props): JSX.Element | null;
++export declare function Accessibility({ announcements, container, hiddenTextDescribedById, screenReaderInstructions, }: Props): React.JSX.Element | null;
+ export {};
+diff --git a/dist/components/DragOverlay/DragOverlay.d.ts b/dist/components/DragOverlay/DragOverlay.d.ts
+index 36fc7a419fac52cbe265c90106cddc43fe95dcb8..e98ba4a1b81a8266d2b9aa657d6a79f8b4176bb1 100644
+--- a/dist/components/DragOverlay/DragOverlay.d.ts
++++ b/dist/components/DragOverlay/DragOverlay.d.ts
+@@ -5,7 +5,7 @@ import type { DropAnimation } from './hooks';
+ export interface Props extends Pick<PositionedOverlayProps, 'adjustScale' | 'children' | 'className' | 'style' | 'transition'> {
+     dropAnimation?: DropAnimation | null | undefined;
+     modifiers?: Modifiers;
+-    wrapperElement?: keyof JSX.IntrinsicElements;
++    wrapperElement?: keyof React.JSX.IntrinsicElements;
+     zIndex?: number;
+ }
+-export declare const DragOverlay: React.MemoExoticComponent<({ adjustScale, children, dropAnimation: dropAnimationConfig, style, transition, modifiers, wrapperElement, className, zIndex, }: Props) => JSX.Element>;
++export declare const DragOverlay: React.MemoExoticComponent<({ adjustScale, children, dropAnimation: dropAnimationConfig, style, transition, modifiers, wrapperElement, className, zIndex, }: Props) => React.JSX.Element>;
+diff --git a/dist/components/DragOverlay/components/AnimationManager/AnimationManager.d.ts b/dist/components/DragOverlay/components/AnimationManager/AnimationManager.d.ts
+index 8099a21266bdc99774a36a536428957338c4df41..1022ed4621ed50172909fae7ea695fb78a514091 100644
+--- a/dist/components/DragOverlay/components/AnimationManager/AnimationManager.d.ts
++++ b/dist/components/DragOverlay/components/AnimationManager/AnimationManager.d.ts
+@@ -5,4 +5,4 @@ export interface Props {
+     animation: Animation;
+     children: React.ReactElement | null;
+ }
+-export declare function AnimationManager({ animation, children }: Props): JSX.Element;
++export declare function AnimationManager({ animation, children }: Props): React.JSX.Element;
+diff --git a/dist/components/DragOverlay/components/NullifiedContextProvider/NullifiedContextProvider.d.ts b/dist/components/DragOverlay/components/NullifiedContextProvider/NullifiedContextProvider.d.ts
+index cae101110ecb6fdabf90e0fd5018fe1e13512230..c8b9f458b41952bbde8549f0a29d32c4eb2d75a3 100644
+--- a/dist/components/DragOverlay/components/NullifiedContextProvider/NullifiedContextProvider.d.ts
++++ b/dist/components/DragOverlay/components/NullifiedContextProvider/NullifiedContextProvider.d.ts
+@@ -2,5 +2,5 @@ import React from 'react';
+ interface Props {
+     children: React.ReactNode;
+ }
+-export declare function NullifiedContextProvider({ children }: Props): JSX.Element;
++export declare function NullifiedContextProvider({ children }: Props): React.JSX.Element;
+ export {};
+diff --git a/dist/components/DragOverlay/components/PositionedOverlay/PositionedOverlay.d.ts b/dist/components/DragOverlay/components/PositionedOverlay/PositionedOverlay.d.ts
+index 59dba0b1ca8e7b9fed4ea85036c8ad5c0e92caa6..badcc14baa5c99a4a16e6bcf47344deee88ae194 100644
+--- a/dist/components/DragOverlay/components/PositionedOverlay/PositionedOverlay.d.ts
++++ b/dist/components/DragOverlay/components/PositionedOverlay/PositionedOverlay.d.ts
+@@ -3,7 +3,7 @@ import type { Transform } from '@dnd-kit/utilities';
+ import type { ClientRect, UniqueIdentifier } from '../../../../types';
+ declare type TransitionGetter = (activatorEvent: Event | null) => React.CSSProperties['transition'] | undefined;
+ export interface Props {
+-    as: keyof JSX.IntrinsicElements;
++    as: keyof React.JSX.IntrinsicElements;
+     activatorEvent: Event | null;
+     adjustScale?: boolean;
+     children?: React.ReactNode;

patches/@dnd-kit__sortable.patch

@@ -0,0 +1,11 @@
+diff --git a/dist/components/SortableContext.d.ts b/dist/components/SortableContext.d.ts
+index 718e8db4aa98759ac82b151650c15568d9a9f538..98d5b11a96d27f1f094bf3aeedc889e2c7325c93 100644
+--- a/dist/components/SortableContext.d.ts
++++ b/dist/components/SortableContext.d.ts
+@@ -22,5 +22,5 @@ interface ContextDescriptor {
+     strategy: SortingStrategy;
+ }
+ export declare const Context: React.Context<ContextDescriptor>;
+-export declare function SortableContext({ children, id, items: userDefinedItems, strategy, disabled: disabledProp, }: Props): JSX.Element;
++export declare function SortableContext({ children, id, items: userDefinedItems, strategy, disabled: disabledProp, }: Props): React.JSX.Element;
+ export {};

patches/react-icons.patch

@@ -0,0 +1,10 @@
+diff --git a/lib/iconBase.d.ts b/lib/iconBase.d.ts
+index 9891a022c2be4d36ec8f7f80a0f5380023959e5e..96408ae39ab2025b77011485dd3096e6fb3b60ac 100644
+--- a/lib/iconBase.d.ts
++++ b/lib/iconBase.d.ts
+@@ -16,4 +16,4 @@ export interface IconBaseProps extends React.SVGAttributes<SVGElement> {
+ export type IconType = (props: IconBaseProps) => React.ReactNode;
+ export declare function IconBase(props: IconBaseProps & {
+     attr?: Record<string, string>;
+-}): JSX.Element;
++}): React.JSX.Element;

pnpm-workspace.yaml

@@ -18,3 +18,7 @@ onlyBuiltDependencies:
   - esbuild
   - msw
   - sqlite3
+patchedDependencies:
+  '@dnd-kit/core': patches/@dnd-kit__core.patch
+  '@dnd-kit/sortable': patches/@dnd-kit__sortable.patch
+  react-icons: patches/react-icons.patch