feat!: React 18

.yarnrc.yml

@@ -6,4 +6,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.5.1.cjs
+yarnPath: .yarn/releases/yarn-4.5.3.cjs

package.json

@@ -56,8 +56,5 @@
     "node": "22.9.0",
     "yarn": "4.5.1"
   },
-  "packageManager": "[email protected]",
-  "resolutions": {
-    "jsdom": "25.0.1"
-  }
+  "packageManager": "[email protected]"
 }

packages/fuselage-hooks/jest.config.ts

@@ -2,35 +2,6 @@ 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',
       preset: 'ts-jest',
@@ -44,10 +15,6 @@ export default {
         'testing-utils/setup/noErrorsLogged',
         '<rootDir>/src/jest-setup.ts',
       ],
-      moduleNameMapper: {
-        '^react($|/.+)': 'react18$1',
-        '^react-dom($|/.+)': 'react-dom18$1',
-      },
     },
     {
       displayName: 'React 18 SSR',
@@ -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;

packages/fuselage-hooks/package.json

@@ -50,8 +50,8 @@
     "@testing-library/react": "~16.1.0",
     "@testing-library/user-event": "~14.5.2",
     "@types/jest": "~29.5.14",
-    "@types/react": "~17.0.80",
-    "@types/react-dom": "~17.0.25",
+    "@types/react": "~18.3.17",
+    "@types/react-dom": "~18.3.5",
     "@types/resize-observer-browser": "~0.1.11",
     "@types/use-sync-external-store": "~0.0.3",
     "eslint": "~9.14.0",
@@ -60,10 +60,8 @@
     "lint-all": "workspace:~",
     "npm-run-all": "^4.1.5",
     "prettier": "~3.3.3",
-    "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,7 +72,7 @@
   },
   "peerDependencies": {
     "@rocket.chat/fuselage-tokens": "*",
-    "react": "^17.0.2"
+    "react": "*"
   },
   "dependencies": {
     "use-sync-external-store": "~1.2.0"

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;

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';

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;

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.80",
-    "@types/react-dom": "~17.0.25",
+    "@types/react": "~18.3.17",
+    "@types/react-dom": "~18.3.5",
     "eslint": "~9.14.0",
     "jest": "~29.7.0",
     "jest-environment-jsdom": "~29.7.0",
     "lint-all": "workspace:~",
     "npm-run-all": "^4.1.5",
     "prettier": "~3.3.3",
-    "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"

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}

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';

packages/fuselage/jest.config.ts

@@ -11,6 +11,5 @@ export default {
   ],
   moduleNameMapper: {
     '\\.scss$': 'testing-utils/lazySingletonStyleTagModule',
-    '^react-dom/client$': 'react-dom',
   },
 } satisfies Config;

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.80",
-    "@types/react-dom": "~17.0.25",
+    "@types/react": "~18.3.17",
+    "@types/react-dom": "~18.3.5",
     "autoprefixer": "~10.4.20",
     "babel-loader": "~9.2.1",
     "caniuse-lite": "~1.0.30001688",
@@ -115,8 +115,8 @@
     "postcss-scss": "~4.0.9",
     "postcss-svg": "~3.0.0",
     "prettier": "~3.3.3",
-    "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",

packages/fuselage/src/components/AnimatedVisibility/AnimatedVisibility.tsx

@@ -104,7 +104,7 @@ const AnimatedVisibility = (props: AnimatedVisibilityProps) => {
   );
 
   const transformFn = useCallback(
-    (props) => {
+    (props: any) => {
       if (props.onAnimationEnd === undefined) {
         props.onAnimationEnd = handleAnimationEnd;
       }

packages/fuselage/src/components/Banner/Banner.tsx

@@ -3,6 +3,7 @@ import type {
   ReactNode,
   AllHTMLAttributes,
   HTMLAttributeAnchorTarget,
+  MouseEvent,
 } from 'react';
 import { useRef, useCallback, useMemo } from 'react';
 
@@ -65,7 +66,7 @@ const Banner = ({
   }, [onAction]);
 
   const handleCloseButtonClick = useCallback(
-    (event) => {
+    (event: MouseEvent) => {
       event.stopPropagation();
 
       if (onClose) {

packages/fuselage/src/components/Box/Box.tsx

@@ -16,7 +16,16 @@ import { useBoxTransform, BoxTransforms } from './BoxTransforms';
 import type { StylingProps } from './stylingProps';
 import { useStylingProps } from './useStylingProps';
 
-type BoxProps = {
+export interface BoxProps
+  extends Partial<StylingProps>,
+    Omit<
+      AllHTMLAttributes<HTMLElement>,
+      'ref' | 'is' | 'className' | 'size' | 'elevation' | keyof StylingProps
+    >,
+    Omit<
+      SVGAttributes<SVGElement>,
+      keyof AllHTMLAttributes<HTMLElement> | 'elevation' | keyof StylingProps
+    > {
   /**
    * The `is` prop is used to render the Box as a different HTML tag. It can also be used to render a different fuselage component.
    */
@@ -25,15 +34,7 @@ type BoxProps = {
   animated?: boolean;
   withRichContent?: boolean | 'inlineWithoutBreaks';
   htmlSize?: AllHTMLAttributes<HTMLElement>['size'];
-} & Partial<StylingProps> &
-  Omit<
-    AllHTMLAttributes<HTMLElement>,
-    'ref' | 'is' | 'className' | 'size' | 'elevation'
-  > &
-  Omit<
-    SVGAttributes<SVGElement>,
-    keyof AllHTMLAttributes<HTMLElement> | 'elevation'
-  >;
+}
 
 export const Box = forwardRef(function Box(
   { is = 'div', children, ...props }: BoxProps,

packages/fuselage/src/components/Box/index.ts

@@ -1,2 +1,2 @@
-export { default } from './Box';
+export { default, default as Box, BoxProps } from './Box';
 export { default as StylingBox, type StylingBoxProps } from './StylingBox';

packages/fuselage/src/components/Box/useStylingProps.ts

@@ -5,8 +5,8 @@ import type { StylingProps } from './stylingProps';
 import { extractStylingProps } from './stylingProps';
 
 export const useStylingProps = <TProps extends { className?: string }>(
-  originalProps: TProps & Partial<StylingProps>,
-): TProps => {
+  originalProps: TProps,
+): Omit<TProps, keyof StylingProps> => {
   const [props, styles] = extractStylingProps(originalProps);
 
   const newClassName = useStyle(styles, undefined);

packages/fuselage/src/components/Card/Card.stories.tsx

@@ -25,7 +25,7 @@ export default {
     CardCol: CardCol as ComponentType<any>,
     CardRow: CardRow as ComponentType<any>,
     CardBody: CardBody as ComponentType<any>,
-    CardControls,
+    CardControls: CardControls as ComponentType<any>,
   },
   parameters: {
     backgrounds: { default: 'dark' },

packages/fuselage/src/components/Flex/Flex.stories.tsx

@@ -1,12 +1,20 @@
 import type { Meta } from '@storybook/react';
+import type { ComponentType } from 'react';
 
 import Tile from '../Tile';
 
 import Flex from '.';
+import FlexContainer from './FlexContainer';
+import FlexItem from './FlexItem';
 
 export default {
   title: 'Layout/Flex',
-  subcomponents: { 'Flex.Container': Flex.Container, 'Flex.Item': Flex.Item },
+  subcomponents: {
+    'FlexContainer': FlexContainer as ComponentType<any>,
+    'FlexItem': FlexItem as ComponentType<any>,
+    'Flex.Container': Flex.Container as ComponentType<any>,
+    'Flex.Item': Flex.Item as ComponentType<any>,
+  },
 } satisfies Meta;
 
 export const example = () => (

packages/fuselage/src/components/Flex/FlexContainer.tsx

@@ -28,7 +28,7 @@ function FlexContainer({
   justifyContent,
 }: FlexContainerProps) {
   const transformFn = useCallback(
-    (props) => {
+    (props: any) => {
       if (inline !== undefined && props.display === undefined) {
         props.display = inline ? 'inline-flex' : 'flex';
       }

packages/fuselage/src/components/Flex/FlexItem.tsx

@@ -21,7 +21,7 @@ function FlexItem({
   align,
 }: FlexItemProps) {
   const transformFn = useCallback(
-    (props) => {
+    (props: any) => {
       if (order !== undefined && props.order === undefined) {
         props.order = order;
       }

packages/fuselage/src/components/InputBox/InputBox.tsx

@@ -1,6 +1,7 @@
 import { useMergedRefs } from '@rocket.chat/fuselage-hooks';
 import type {
   ComponentProps,
+  FormEvent,
   ForwardRefExoticComponent,
   ReactNode,
   Ref,
@@ -94,10 +95,10 @@
         !innerRef.current.checkValidity(),
       );
     }
   }, []);
 
   const handleChange = useCallback(
-    (event) => {
+    (event: FormEvent<HTMLElement>) => {
       if (addon && innerRef.current && innerRef.current.parentElement) {
         innerRef.current.parentElement.classList.toggle(
           'invalid',