feat: Raise minimum supported React version to 18 (#1514)

RocketChat · Jan 30, 2025 · c4d8300 · c4d8300
1 parent 78a43af
commit c4d8300
Show file tree

Hide file tree

Showing 125 changed files with 658 additions and 1,461 deletions.
diff --git a/.changeset/warm-items-sell.md b/.changeset/warm-items-sell.md
@@ -0,0 +1,11 @@
+---
+'@rocket.chat/fuselage-toastbar': minor
+'@rocket.chat/fuselage-hooks': minor
+'@rocket.chat/onboarding-ui': minor
+'@rocket.chat/fuselage': minor
+'@rocket.chat/layout': minor
+'@rocket.chat/styled': minor
+'@rocket.chat/logo': minor
+---
+
+feat: Raise minimum supported React version to 18
diff --git a/packages/fuselage-hooks/jest.config.ts b/packages/fuselage-hooks/jest.config.ts
@@ -3,36 +3,7 @@ import type { Config } from 'jest';
 export default {
   projects: [
     {
-      displayName: 'React 17',
-      preset: 'ts-jest',
-      errorOnDeprecated: true,
-      testMatch: [
-        '<rootDir>/src/**/*.spec.{ts,tsx}',
-        '!**/*.server.spec.{ts,tsx}',
-      ],
-      testEnvironment: 'jsdom',
-      setupFilesAfterEnv: ['testing-utils/setup/noErrorsLogged'],
-      moduleNameMapper: {
-        '^react($|/.+)': 'react$1',
-        '^react-dom/client$': 'react-dom$1',
-        '^react-dom($|/.+)': 'react-dom$1',
-      },
-    },
-    {
-      displayName: 'React 17 SSR',
-      preset: 'ts-jest',
-      errorOnDeprecated: true,
-      testMatch: ['<rootDir>/src/**/*.server.spec.{ts,tsx}'],
-      testEnvironment: 'node',
-      setupFilesAfterEnv: ['testing-utils/setup/noErrorsLogged'],
-      moduleNameMapper: {
-        '^react($|/.+)': 'react$1',
-        '^react-dom/client$': 'react-dom$1',
-        '^react-dom($|/.+)': 'react-dom$1',
-      },
-    },
-    {
-      displayName: 'React 18',
+      displayName: 'csr',
       preset: 'ts-jest',
       errorOnDeprecated: true,
       testMatch: [
@@ -44,13 +15,9 @@ export default {
         'testing-utils/setup/noErrorsLogged',
         '<rootDir>/src/jest-setup.ts',
       ],
-      moduleNameMapper: {
-        '^react($|/.+)': 'react18$1',
-        '^react-dom($|/.+)': 'react-dom18$1',
-      },
     },
     {
-      displayName: 'React 18 SSR',
+      displayName: 'ssr',
       preset: 'ts-jest',
       errorOnDeprecated: true,
       testMatch: ['<rootDir>/src/**/*.server.spec.{ts,tsx}'],
@@ -59,10 +26,6 @@ export default {
         'testing-utils/setup/noErrorsLogged',
         '<rootDir>/src/jest-setup.ts',
       ],
-      moduleNameMapper: {
-        '^react($|/.+)': 'react18$1',
-        '^react-dom($|/.+)': 'react-dom18$1',
-      },
     },
   ],
 } satisfies Config;
diff --git a/packages/fuselage-hooks/package.json b/packages/fuselage-hooks/package.json
@@ -50,20 +50,17 @@
     "@testing-library/react": "~16.1.0",
     "@testing-library/user-event": "~14.5.2",
     "@types/jest": "~29.5.14",
-    "@types/react": "~17.0.83",
-    "@types/react-dom": "~17.0.25",
+    "@types/react": "~18.3.18",
+    "@types/react-dom": "~18.3.5",
     "@types/resize-observer-browser": "~0.1.11",
-    "@types/use-sync-external-store": "~0.0.3",
     "eslint": "~9.18.0",
     "jest": "~29.7.0",
     "jest-environment-jsdom": "~29.7.0",
     "lint-all": "workspace:~",
     "npm-run-all": "^4.1.5",
     "prettier": "~3.4.2",
-    "react": "^17.0.2",
-    "react-dom": "~17.0.2",
-    "react-dom18": "npm:react-dom@18",
-    "react18": "npm:react@18",
+    "react": "~18.3.1",
+    "react-dom": "~18.3.1",
     "rimraf": "~5.0.0",
     "rollup": "~2.79.2",
     "rollup-plugin-terser": "~7.0.2",
@@ -74,9 +71,6 @@
   },
   "peerDependencies": {
     "@rocket.chat/fuselage-tokens": "*",
-    "react": "^17.0.2"
-  },
-  "dependencies": {
-    "use-sync-external-store": "~1.4.0"
+    "react": "*"
   }
 }
diff --git a/packages/fuselage-hooks/src/jest-setup.ts b/packages/fuselage-hooks/src/jest-setup.ts
@@ -1,3 +1,7 @@
+import { TextEncoder } from 'node:util';
+
 import { configure } from '@testing-library/react';
 
 configure({ reactStrictMode: true });
+
+global.TextEncoder = TextEncoder;
diff --git a/packages/fuselage-hooks/src/testing.ts b/packages/fuselage-hooks/src/testing.ts
@@ -6,7 +6,6 @@ import {
   renderHook as _renderHook,
 } from '@testing-library/react';
 import { createElement } from 'react';
-import * as ReactDOMClient from 'react-dom';
 import { renderToString } from 'react-dom/server';
 
 type RendererableContainer = Element | Document | DocumentFragment;
@@ -37,9 +36,7 @@ export function renderHook<
     };
   }
 
-  if ('createRoot' in ReactDOMClient) return _renderHook(render, options);
-
-  return _renderHook(render, { ...options, legacyRoot: true });
+  return _renderHook(render, options);
 }
 
 export { act } from '@testing-library/react';
diff --git a/packages/fuselage-hooks/src/useMediaQueries.ts b/packages/fuselage-hooks/src/useMediaQueries.ts
@@ -1,5 +1,4 @@
-import { useCallback, useRef } from 'react';
-import { useSyncExternalStore } from 'use-sync-external-store/shim';
+import { useCallback, useRef, useSyncExternalStore } from 'react';
 
 import { useStableArray } from './useStableArray';
 

diff --git a/packages/fuselage-hooks/src/useOutsideClick.ts b/packages/fuselage-hooks/src/useOutsideClick.ts
@@ -11,7 +11,7 @@ import { useEffectEvent } from './useEffectEvent';
  */
 
 export function useOutsideClick<T extends Element>(
-  elements: RefObject<T>[],
+  elements: RefObject<T | null>[],
   cb: (e: MouseEvent) => void,
 ): void {
   const handleClickOutside = useEffectEvent(function handleClickOutside(

diff --git a/packages/fuselage-hooks/src/useUniqueId.ts b/packages/fuselage-hooks/src/useUniqueId.ts
@@ -5,6 +5,7 @@ import { useDebugValue, useRef, useMemo } from 'react';
  *
  * @returns the unique ID string
  * @public
+ * @deprecated use `useId` from `react` instead
  */
 export const useUniqueId = (): string => {
   const ref = useRef<string>();

diff --git a/packages/fuselage-toastbar/jest.config.ts b/packages/fuselage-toastbar/jest.config.ts
@@ -9,7 +9,4 @@ export default {
     '<rootDir>/jest-setup.ts',
     'testing-utils/setup/noErrorsLogged',
   ],
-  moduleNameMapper: {
-    '^react-dom/client$': 'react-dom',
-  },
 } satisfies Config;
diff --git a/packages/fuselage-toastbar/package.json b/packages/fuselage-toastbar/package.json
@@ -60,15 +60,15 @@
     "@testing-library/react": "~16.1.0",
     "@testing-library/user-event": "~14.5.2",
     "@types/jest": "~29.5.14",
-    "@types/react": "~17.0.83",
-    "@types/react-dom": "~17.0.25",
+    "@types/react": "~18.3.18",
+    "@types/react-dom": "~18.3.5",
     "eslint": "~9.18.0",
     "jest": "~29.7.0",
     "jest-environment-jsdom": "~29.7.0",
     "lint-all": "workspace:~",
     "npm-run-all": "^4.1.5",
     "prettier": "~3.4.2",
-    "react-dom": "~17.0.2",
+    "react-dom": "~18.3.1",
     "rimraf": "~3.0.2",
     "storybook": "~8.4.7",
     "storybook-dark-mode": "~4.0.2",
@@ -81,8 +81,8 @@
     "@rocket.chat/fuselage-hooks": "*",
     "@rocket.chat/fuselage-polyfills": "*",
     "@rocket.chat/styled": "*",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "*",
+    "react-dom": "*"
   },
   "volta": {
     "extends": "../../package.json"

diff --git a/packages/fuselage-toastbar/src/ToastBarTimed.tsx b/packages/fuselage-toastbar/src/ToastBarTimed.tsx
@@ -23,7 +23,7 @@ const ToastBarTimed = ({
       variant={type}
       onPointerEnter={() => pause()}
       onPointerLeave={() => resume()}
-      children={message}
+      children={String(message)}
       onClose={dismissToastMessage}
       id={id}
       time={time}

diff --git a/packages/fuselage-toastbar/src/testing.ts b/packages/fuselage-toastbar/src/testing.ts
@@ -1,34 +1 @@
-import type {
-  queries,
-  Queries,
-  RenderOptions,
-  RenderResult,
-} from '@testing-library/react';
-import { render as renderOriginal } from '@testing-library/react';
-import type React from 'react';
-import type ReactDOMClient from 'react-dom';
-
-type RendererableContainer = ReactDOMClient.Container;
-type HydrateableContainer = Parameters<(typeof ReactDOMClient)['hydrate']>[0];
-
-/**
- * Light wrapper around `react-testing-library` to provide a custom render function for transitioning to React 18
- */
-export function render<
-  Q extends Queries = typeof queries,
-  Container extends RendererableContainer | HydrateableContainer = HTMLElement,
-  BaseElement extends RendererableContainer | HydrateableContainer = Container,
->(
-  ui: React.ReactNode,
-  options: RenderOptions<Q, Container, BaseElement>,
-): RenderResult<Q, Container, BaseElement>;
-export function render(
-  ui: React.ReactNode,
-  options?: Omit<RenderOptions, 'queries'>,
-): RenderResult;
-export function render(ui: React.ReactNode, options?: any): any {
-  return renderOriginal(ui, {
-    legacyRoot: true,
-    ...options,
-  });
-}
+export { render } from '@testing-library/react';
diff --git a/packages/fuselage/jest-setup.ts b/packages/fuselage/jest-setup.ts
@@ -48,9 +48,3 @@ window.ResizeObserver = jest.fn().mockImplementation(() => ({
   unobserve: jest.fn(),
   disconnect: jest.fn(),
 }));
-
-let uniqueIdCounter = 0;
-jest.mock('@rocket.chat/fuselage-hooks', () => ({
-  ...jest.requireActual('@rocket.chat/fuselage-hooks'),
-  useUniqueId: () => `unique-id-${uniqueIdCounter++}`,
-}));
diff --git a/packages/fuselage/jest.config.ts b/packages/fuselage/jest.config.ts
@@ -11,6 +11,5 @@ export default {
   ],
   moduleNameMapper: {
     '\\.scss$': 'testing-utils/lazySingletonStyleTagModule',
-    '^react-dom/client$': 'react-dom',
   },
 } satisfies Config;
diff --git a/packages/fuselage/package.json b/packages/fuselage/package.json
@@ -47,8 +47,8 @@
     "@rocket.chat/fuselage-hooks": "*",
     "@rocket.chat/fuselage-polyfills": "*",
     "@rocket.chat/icons": "*",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "*",
+    "react-dom": "*",
     "react-virtuoso": "1.2.4"
   },
   "dependencies": {
@@ -89,8 +89,8 @@
     "@types/invariant": "^2.2.37",
     "@types/jest": "~29.5.14",
     "@types/jest-axe": "~3.5.9",
-    "@types/react": "~17.0.83",
-    "@types/react-dom": "~17.0.25",
+    "@types/react": "~18.3.18",
+    "@types/react-dom": "~18.3.5",
     "autoprefixer": "~10.4.20",
     "babel-loader": "~9.2.1",
     "caniuse-lite": "~1.0.30001689",
@@ -115,8 +115,8 @@
     "postcss-scss": "~4.0.9",
     "postcss-svg": "~3.0.0",
     "prettier": "~3.4.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "~18.3.1",
+    "react-dom": "~18.3.1",
     "react-virtuoso": "~3.1.5",
     "resolve-url-loader": "~5.0.0",
     "rimraf": "^3.0.2",

diff --git a/packages/fuselage/src/components/Accordion/AccordionItem.tsx b/packages/fuselage/src/components/Accordion/AccordionItem.tsx
@@ -1,5 +1,10 @@
-import { useToggle, useUniqueId } from '@rocket.chat/fuselage-hooks';
-import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
+import { useToggle } from '@rocket.chat/fuselage-hooks';
+import {
+  useId,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
+} from 'react';
 
 import { cx, cxx } from '../../helpers/composeClassNames';
 import { StylingBox } from '../Box';
@@ -31,8 +36,8 @@ const AccordionItem = ({
 
   const panelExpanded = noncollapsible || expanded;
 
-  const titleId = useUniqueId();
-  const panelId = useUniqueId();
+  const titleId = useId();
+  const panelId = useId();
 
   const handleClick = (e: MouseEvent<HTMLElement>) => {
     if (disabled) {