chore(deps): Update MetaMask design system and React to v18

sirtimid · claude · sirtimid · commit 5873a04b2f15 · 2026-01-13T21:12:18.000+01:00
- Update @metamask/design-system-react: ^0.1.0 → ^0.6.0
- Update @metamask/design-system-tailwind-preset: ^0.5.0 → ^0.6.1
- Update @metamask/design-tokens: ^8.0.0 → ^8.1.1
- Update react and react-dom: ^17.0.2 → ^18.3.1
- Update @types/react and @types/react-dom to v18
- Update @testing-library/react: ^12.1.5 → ^16.3.0
- Update @radix-ui/react-slot: 1.2.3 → 1.2.4 (removes patch)

Code changes for React 18 compatibility:
- Use createRoot API instead of deprecated render
- Explicitly type children prop in TableHeader (React 18 change)
- Update test imports from @testing-library/react-hooks to @testing-library/react
- Update Vite config for React externals

Co-Authored-By: Claude Opus 4.5 &lt;noreply@anthropic.com&gt;
diff --git a/.yarn/patches/@radix-ui-react-slot-npm-1.2.3-6e45e6d89b.patch b/.yarn/patches/@radix-ui-react-slot-npm-1.2.3-6e45e6d89b.patch
diff --git a/package.json b/package.json
@@ -125,7 +125,7 @@
     }
   },
   "resolutions": {
-    "@radix-ui/react-slot@npm:^1.1.0": "patch:@radix-ui/react-slot@npm%3A1.2.3#~/.yarn/patches/@radix-ui-react-slot-npm-1.2.3-6e45e6d89b.patch",
+    "@radix-ui/react-slot@npm:^1.1.0": "1.2.4",
     "cookie": "^0.7.0",
     "@chainsafe/libp2p-noise": "16.1.5",
     "@libp2p/interface": "2.11.0",
diff --git a/packages/extension/package.json b/packages/extension/package.json
@@ -51,8 +51,8 @@
     "@metamask/ocap-kernel": "workspace:^",
     "@metamask/streams": "workspace:^",
     "@metamask/utils": "^11.9.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "ses": "^1.14.0"
   },
   "devDependencies": {
@@ -67,8 +67,8 @@
     "@playwright/test": "^1.54.2",
     "@testing-library/jest-dom": "^6.6.3",
     "@types/chrome": "^0.0.313",
-    "@types/react": "^17.0.11",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@typescript-eslint/eslint-plugin": "^8.29.0",
     "@typescript-eslint/parser": "^8.29.0",
     "@typescript-eslint/utils": "^8.29.0",
diff --git a/packages/extension/src/popup.test.tsx b/packages/extension/src/popup.test.tsx
@@ -1,9 +1,13 @@
 import { App } from '@metamask/kernel-ui';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 
-vi.mock('react-dom', () => ({
-  render: vi.fn(),
+const mockRender = vi.fn();
+
+vi.mock('react-dom/client', () => ({
+  createRoot: vi.fn(() => ({
+    render: mockRender,
+  })),
 }));
 
 vi.mock('@metamask/kernel-ui', () => ({
@@ -13,15 +17,17 @@ vi.mock('@metamask/kernel-ui', () => ({
 describe('popup', () => {
   beforeEach(() => {
     document.body.innerHTML = '';
+    vi.clearAllMocks();
   });
 
-  it('should create root element and mount App', async () => {
+  it('creates root element and mounts App', async () => {
     const root = document.createElement('div');
     root.id = 'root';
     document.body.appendChild(root);
     await import('./popup.tsx');
-    expect(render).toHaveBeenCalledWith(expect.any(Object), root);
-    const renderArgs = vi.mocked(render).mock.calls[0];
+    expect(createRoot).toHaveBeenCalledWith(root);
+    expect(mockRender).toHaveBeenCalledWith(expect.any(Object));
+    const renderArgs = mockRender.mock.calls[0];
     expect(renderArgs).toBeDefined();
     expect(renderArgs?.[0]).toBeDefined();
     expect((renderArgs?.[0] as unknown as React.ReactElement)?.type).toBe(App);
diff --git a/packages/extension/src/popup.tsx b/packages/extension/src/popup.tsx
@@ -1,6 +1,8 @@
 import '@metamask/kernel-ui/styles.css';
 import { App } from '@metamask/kernel-ui';
 import { createElement } from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
-render(createElement(App), document.getElementById('root'));
+createRoot(document.getElementById('root') as HTMLElement).render(
+  createElement(App),
+);
diff --git a/packages/kernel-ui/package.json b/packages/kernel-ui/package.json
@@ -59,9 +59,9 @@
     "test:watch": "vitest --config vitest.config.ts"
   },
   "dependencies": {
-    "@metamask/design-system-react": "^0.1.0",
-    "@metamask/design-system-tailwind-preset": "^0.5.0",
-    "@metamask/design-tokens": "^8.0.0",
+    "@metamask/design-system-react": "^0.6.0",
+    "@metamask/design-system-tailwind-preset": "^0.6.1",
+    "@metamask/design-tokens": "^8.1.1",
     "@metamask/kernel-browser-runtime": "workspace:^",
     "@metamask/kernel-rpc-methods": "workspace:^",
     "@metamask/kernel-utils": "workspace:^",
@@ -71,8 +71,8 @@
     "tailwindcss": "^3.0.0"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.17.4",
@@ -84,14 +84,13 @@
     "@solana/addresses": "^2.0.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@ts-bridge/cli": "^0.6.3",
     "@ts-bridge/shims": "^0.1.1",
     "@types/chrome": "^0.0.313",
-    "@types/react": "^17.0.11",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@typescript-eslint/eslint-plugin": "^8.29.0",
     "@typescript-eslint/parser": "^8.29.0",
     "@typescript-eslint/utils": "^8.29.0",
diff --git a/packages/kernel-ui/src/components/table/TableHeader.tsx b/packages/kernel-ui/src/components/table/TableHeader.tsx
@@ -1,14 +1,17 @@
+import type { PropsWithChildren } from 'react';
 import {
   Text as TextComponent,
   TextVariant,
   TextColor,
   FontWeight,
 } from '@metamask/design-system-react';
 
-export const TableHeader: React.FC<{
-  first?: boolean;
-  variant?: TextVariant;
-}> = ({ first, variant = TextVariant.BodyXs, children }) => {
+export const TableHeader: React.FC<
+  PropsWithChildren<{
+    first?: boolean;
+    variant?: TextVariant;
+  }>
+> = ({ first, variant = TextVariant.BodyXs, children }) => {
   return (
     <th
       className={`text-left py-2 px-3 ${first ? 'border-r border-muted' : ''}`}
diff --git a/packages/kernel-ui/src/context/PanelContext.test.tsx b/packages/kernel-ui/src/context/PanelContext.test.tsx
@@ -1,5 +1,4 @@
-import { waitFor } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+import { waitFor, renderHook } from '@testing-library/react';
 import { describe, it, expect, vi } from 'vitest';
 
 vi.mock('@metamask/kernel-utils', () => ({
@@ -259,11 +258,10 @@ describe('PanelContext', () => {
   });
 
   describe('usePanelContext', () => {
-    it('should throw error when used outside of PanelProvider', async () => {
+    it('throws error when used outside of PanelProvider', async () => {
       const { usePanelContext } = await import('./PanelContext.tsx');
-      const { result } = renderHook(() => usePanelContext());
-      expect(result.error).toStrictEqual(
-        new Error('usePanelContext must be used within a PanelProvider'),
+      expect(() => renderHook(() => usePanelContext())).toThrow(
+        'usePanelContext must be used within a PanelProvider',
       );
     });
   });
diff --git a/packages/kernel-ui/src/hooks/useDarkMode.test.ts b/packages/kernel-ui/src/hooks/useDarkMode.test.ts
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 
 import { useDarkMode } from './useDarkMode.ts';
diff --git a/packages/kernel-ui/src/hooks/useDatabase.test.ts b/packages/kernel-ui/src/hooks/useDatabase.test.ts
@@ -1,5 +1,4 @@
-import { waitFor } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+import { waitFor, renderHook } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 
 import { useDatabase } from './useDatabase.ts';
diff --git a/packages/kernel-ui/src/hooks/useKernelActions.test.ts b/packages/kernel-ui/src/hooks/useKernelActions.test.ts
@@ -1,6 +1,5 @@
 import clusterConfig from '@metamask/kernel-browser-runtime/default-cluster' assert { type: 'json' };
-import { waitFor } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+import { waitFor, renderHook } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 
 vi.mock('../context/PanelContext.tsx', () => ({
diff --git a/packages/kernel-ui/src/hooks/useRegistry.test.ts b/packages/kernel-ui/src/hooks/useRegistry.test.ts
@@ -1,5 +1,4 @@
-import { waitFor } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+import { waitFor, renderHook } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 
 import { useRegistry } from './useRegistry.ts';
diff --git a/packages/kernel-ui/src/hooks/useStatusPolling.test.ts b/packages/kernel-ui/src/hooks/useStatusPolling.test.ts
@@ -1,6 +1,5 @@
 import clusterConfig from '@metamask/kernel-browser-runtime/default-cluster' assert { type: 'json' };
-import { waitFor } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+import { waitFor, renderHook } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 
 vi.mock('../services/logger.ts', () => ({
diff --git a/packages/kernel-ui/src/hooks/useStream.test.ts b/packages/kernel-ui/src/hooks/useStream.test.ts
@@ -1,5 +1,4 @@
-import { waitFor } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+import { waitFor, renderHook } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 
 import { useStream } from './useStream.ts';
diff --git a/packages/kernel-ui/src/hooks/useVats.test.ts b/packages/kernel-ui/src/hooks/useVats.test.ts
@@ -1,7 +1,6 @@
 import type { VatConfig } from '@metamask/ocap-kernel';
 import { setupOcapKernelMock } from '@ocap/repo-tools/test-utils';
-import { waitFor } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+import { waitFor, renderHook } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 
 import type { PanelContextType } from '../context/PanelContext.tsx';
diff --git a/packages/kernel-ui/vite.config.ts b/packages/kernel-ui/vite.config.ts
@@ -39,12 +39,11 @@ export default defineConfig(({ mode }) => {
         },
       },
       rollupOptions: {
-        external: [
-          'react',
-          'react-dom',
-          'react/jsx-runtime',
-          'react/jsx-dev-runtime',
-        ],
+        external: (id) =>
+          id === 'react' ||
+          id === 'react-dom' ||
+          id.startsWith('react/') ||
+          id.startsWith('react-dom/'),
         output: {
           globals: {
             react: 'React',
diff --git a/packages/kernel-ui/vitest.config.ts b/packages/kernel-ui/vitest.config.ts
@@ -11,11 +11,28 @@ export default defineConfig((args) => {
     args,
     defaultConfig,
     defineProject({
+      resolve: {
+        alias: {
+          // Handle packages that import react/jsx-runtime.js with .js extension
+          'react/jsx-runtime.js': 'react/jsx-runtime',
+          'react/jsx-dev-runtime.js': 'react/jsx-dev-runtime',
+        },
+      },
       test: {
         name: 'kernel-ui',
         environment: 'jsdom',
         setupFiles: path.resolve(import.meta.dirname, './test/setup.ts'),
         testTimeout: 3000,
+        deps: {
+          optimizer: {
+            web: {
+              include: [
+                '@radix-ui/react-slot',
+                '@metamask/design-system-react',
+              ],
+            },
+          },
+        },
       },
     }),
   );
diff --git a/packages/omnium-gatherum/package.json b/packages/omnium-gatherum/package.json
@@ -52,8 +52,8 @@
     "@metamask/ocap-kernel": "workspace:^",
     "@metamask/streams": "workspace:^",
     "@metamask/utils": "^11.9.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "ses": "^1.14.0"
   },
   "devDependencies": {
@@ -65,11 +65,12 @@
     "@ocap/cli": "workspace:^",
     "@ocap/repo-tools": "workspace:^",
     "@playwright/test": "^1.54.2",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^16.3.0",
     "@types/chrome": "^0.0.313",
-    "@types/react": "^17.0.11",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@types/webextension-polyfill": "^0",
     "@typescript-eslint/eslint-plugin": "^8.29.0",
     "@typescript-eslint/parser": "^8.29.0",
diff --git a/packages/omnium-gatherum/src/devtools/kernel-panel.tsx b/packages/omnium-gatherum/src/devtools/kernel-panel.tsx
@@ -1,6 +1,8 @@
 import '@metamask/kernel-ui/styles.css';
 import { App } from '@metamask/kernel-ui';
 import { createElement } from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
-render(createElement(App), document.getElementById('root'));
+createRoot(document.getElementById('root') as HTMLElement).render(
+  createElement(App),
+);
diff --git a/packages/omnium-gatherum/src/popup.test.tsx b/packages/omnium-gatherum/src/popup.test.tsx
@@ -1,10 +1,14 @@
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 
 import { App } from './ui/App.tsx';
 
-vi.mock('react-dom', () => ({
-  render: vi.fn(),
+const mockRender = vi.fn();
+
+vi.mock('react-dom/client', () => ({
+  createRoot: vi.fn(() => ({
+    render: mockRender,
+  })),
 }));
 
 vi.mock('./ui/App.tsx', () => ({
@@ -14,15 +18,17 @@ vi.mock('./ui/App.tsx', () => ({
 describe('popup', () => {
   beforeEach(() => {
     document.body.innerHTML = '';
+    vi.clearAllMocks();
   });
 
-  it('should create root element and mount App', async () => {
+  it('creates root element and mounts App', async () => {
     const root = document.createElement('div');
     root.id = 'root';
     document.body.appendChild(root);
     await import('./popup.tsx');
-    expect(render).toHaveBeenCalledWith(expect.any(Object), root);
-    const renderArgs = vi.mocked(render).mock.calls[0];
+    expect(createRoot).toHaveBeenCalledWith(root);
+    expect(mockRender).toHaveBeenCalledWith(expect.any(Object));
+    const renderArgs = mockRender.mock.calls[0];
     expect(renderArgs).toBeDefined();
     expect(renderArgs?.[0]).toBeDefined();
     expect((renderArgs?.[0] as unknown as React.ReactElement)?.type).toBe(App);
diff --git a/packages/omnium-gatherum/src/popup.tsx b/packages/omnium-gatherum/src/popup.tsx
@@ -1,7 +1,9 @@
 import '@metamask/kernel-ui/styles.css';
 import { createElement } from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import { App } from './ui/App.tsx';
 
-render(createElement(App), document.getElementById('root'));
+createRoot(document.getElementById('root') as HTMLElement).render(
+  createElement(App),
+);
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -125,7 +125,7 @@`
`125`	`125`	`}`
`126`	`126`	`},`
`127`	`127`	`"resolutions": {`
`128`		`- "@radix-ui/react-slot@npm:^1.1.0": "patch:@radix-ui/react-slot@npm%3A1.2.3#~/.yarn/patches/@radix-ui-react-slot-npm-1.2.3-6e45e6d89b.patch",`
	`128`	`+ "@radix-ui/react-slot@npm:^1.1.0": "1.2.4",`
`129`	`129`	`"cookie": "^0.7.0",`
`130`	`130`	`"@chainsafe/libp2p-noise": "16.1.5",`
`131`	`131`	`"@libp2p/interface": "2.11.0",`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { renderHook } from '@testing-library/react-hooks';`
	`1`	`+import { renderHook } from '@testing-library/react';`
`2`	`2`	`import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';`
`3`	`3`
`4`	`4`	`import { useDarkMode } from './useDarkMode.ts';`