feat: support React 19

.eslintignore

@@ -1,5 +1,6 @@
 lint-staged.config.js
 jest.config.js
+jest.config.react18.js
 babel.config.js
 plopfile.mjs
 release.config.js

.github/workflows/check-ci-validation.yml

@@ -129,10 +129,14 @@ jobs:
               run: |
                   npm ci
 
-            - name: Test codebase correctness
+            - name: Test codebase correctness (React 19)
               run: |
                   npm run test
 
+            - name: Test codebase correctness (React 18)
+              run: |
+                  npm run test:react18
+
     build-package:
         name: Build Package
         runs-on: ubuntu-latest

jest.config.react18.js

@@ -0,0 +1,13 @@
+const baseConfig = require('./jest.config')
+
+// Runs the Jest suite against React 18 by remapping react/react-dom to the aliased 18 packages.
+module.exports = {
+    ...baseConfig,
+    moduleNameMapper: {
+        ...baseConfig.moduleNameMapper,
+        '^react$': 'react-18',
+        '^react/(.*)$': 'react-18/$1',
+        '^react-dom$': 'react-dom-18',
+        '^react-dom/(.*)$': 'react-dom-18/$1',
+    },
+}

package.json

@@ -38,7 +38,7 @@
     "scripts": {
         "postinstall": "patch-package",
         "setup": "npm install && npm run validate",
-        "validate": "npm run lint && npm run type-check && npm run test",
+        "validate": "npm run lint && npm run type-check && npm run test && npm run test:react18",
         "start": "ON_SUCCESS=\"./scripts/organize-styles.sh\" rollup -c --watch --no-watch.clearScreen",
         "prestart:yalc": "npm run clean && yalc publish",
         "start:yalc": "ON_SUCCESS=\"npm run start:yalc:success\" rollup -c --watch --no-watch.clearScreen",
@@ -49,6 +49,8 @@
         "clean": "rimraf es lib styles dist",
         "test": "jest --passWithNoTests",
         "test:watch": "npm run test -- --watch",
+        "test:react18": "jest --config jest.config.react18.js",
+        "test:react18:watch": "npm run test:react18 -- --watch",
         "test:coverage": "npm run test -- --coverage",
         "type-check": "tsc --noEmit -p ./tsconfig.json",
         "lint": "eslint --format codeframe --cache --ext js,jsx,ts,tsx ./",
@@ -59,10 +61,9 @@
     "peerDependencies": {
         "@ariakit/react": "~0.4.19",
         "classnames": "^2.2.5",
-        "prop-types": "^15.6.2",
-        "react": ">=18.0.0 <19.0.0",
+        "react": ">=18.0.0 <20.0.0",
         "react-compiler-runtime": "^1.0.0",
-        "react-dom": ">=18.0.0 <19.0.0"
+        "react-dom": ">=18.0.0 <20.0.0"
     },
     "devDependencies": {
         "@ariakit/react": "0.4.19",
@@ -95,8 +96,8 @@
         "@types/jest": "28.1.8",
         "@types/jest-axe": "^3.5.3",
         "@types/marked": "^4.0.8",
-        "@types/react": "18.3.1",
-        "@types/react-dom": "18.3.0",
+        "@types/react": "19.2.17",
+        "@types/react-dom": "19.2.3",
         "@typescript-eslint/eslint-plugin": "8.46.2",
         "@typescript-eslint/parser": "8.46.2",
         "@vitejs/plugin-react": "5.2.0",
@@ -125,11 +126,13 @@
         "mockdate": "^3.0.2",
         "plop": "^3.1.1",
         "prettier": "3.6.2",
-        "react": "18.3.1",
+        "react": "19.2.7",
+        "react-18": "npm:react@18.3.1",
         "react-compiler-runtime": "1.0.0",
-        "react-dom": "18.3.1",
         "react-docgen-typescript": "2.4.0",
-        "react-is": "18.3.1",
+        "react-dom": "19.2.7",
+        "react-dom-18": "npm:react-dom@18.3.1",
+        "react-is": "19.2.7",
         "rimraf": "^3.0.2",
         "rollup": "2.79.2",
         "rollup-plugin-styles": "4.0.0",
@@ -154,6 +157,9 @@
         "pretty-format": {
             "react-is": "$react-is"
         },
-        "react-element-to-jsx-string": "15.0.0"
+        "react-element-to-jsx-string": "15.0.0",
+        "react-dom-18": {
+            "react": "$react"
+        }
     }
 }

src/checkbox-field/checkbox-field.tsx

@@ -8,6 +8,8 @@ import { useForkRef } from './use-fork-ref'
 
 import styles from './checkbox-field.module.css'
 
+import type { JSX } from 'react'
+
 interface CheckboxFieldProps
     extends Omit<
         JSX.IntrinsicElements['input'],

src/components/color-picker/deprecated-button/deprecated-button.tsx

@@ -83,10 +83,4 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
 
 Button.displayName = 'Button'
 
-Button.defaultProps = {
-    size: 'default',
-    loading: false,
-    disabled: false,
-}
-
 export { Button }

src/components/color-picker/deprecated-dropdown/dropdown.tsx

@@ -1,12 +1,13 @@
 import './dropdown.less'
 
 import * as React from 'react'
-import ReactDOM from 'react-dom'
 
 import classNames from 'classnames'
 
 import Button from '../deprecated-button'
 
+import type { JSX } from 'react'
+
 type BoxProps = {
     onShowBody?: () => void
     onHideBody?: () => void
@@ -29,6 +30,8 @@ type BoxState = {
 class Box extends React.Component<BoxProps, BoxState> {
     public static displayName: string
 
+    private rootRef = React.createRef<HTMLDivElement>()
+
     constructor(props: BoxProps, context: React.Context<unknown>) {
         super(props, context)
         this.state = {
@@ -48,7 +51,7 @@ class Box extends React.Component<BoxProps, BoxState> {
     _timeout?: ReturnType<typeof setTimeout>
 
     _handleClickOutside = (event: MouseEvent) => {
-        const dropdownDOMNode = ReactDOM.findDOMNode(this)
+        const dropdownDOMNode = this.rootRef.current
 
         if (dropdownDOMNode && !dropdownDOMNode.contains(event.target as Node))
             this._toggleShowBody()
@@ -93,13 +96,12 @@ class Box extends React.Component<BoxProps, BoxState> {
             )
 
             if (scrollingParent) {
-                const dropdown = ReactDOM.findDOMNode(this)
+                const dropdown = this.rootRef.current
                 if (!dropdown) {
                     return
                 }
-                const dropdownVerticalPosition = (ReactDOM.findDOMNode(this) as HTMLElement)
-                    .offsetTop
-                const dropdownTrigger = (dropdown as Element).querySelector('.trigger')
+                const dropdownVerticalPosition = dropdown.offsetTop
+                const dropdownTrigger = dropdown.querySelector('.trigger')
                 if (!dropdownTrigger) {
                     return
                 }
@@ -160,6 +162,7 @@ class Box extends React.Component<BoxProps, BoxState> {
 
         return (
             <div
+                ref={this.rootRef}
                 style={{ display: 'inline-block' }}
                 className={className}
                 data-testid="reactist-dropdown-box"

src/components/icons/ThreeDotsIcon.svg.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react'
 
-import PropTypes from 'prop-types'
-
 const ThreeDotsIcon = ({ color = '#A5A5A5' }) => (
     <svg width="26px" height="26px" viewBox="0 0 26 26">
         <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
@@ -11,9 +9,5 @@ const ThreeDotsIcon = ({ color = '#A5A5A5' }) => (
         </g>
     </svg>
 )
-ThreeDotsIcon.propTypes = {
-    /** Color of the icon. */
-    color: PropTypes.string,
-}
 
 export default ThreeDotsIcon

src/icons/alert-icon.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 
+import type { JSX } from 'react'
 import type { AlertTone } from '../utils/common-types'
 
 const alertIconForTone: Record<AlertTone, typeof AlertInfoIcon> = {

src/icons/banner-icon.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 
 import styles from './banner-icon.module.css'
 
+import type { JSX } from 'react'
 import type { SystemBannerType } from '../banner/banner'
 
 const bannerIconForType: Record<SystemBannerType, typeof BannerInfoIcon> = {

src/icons/close-icon.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react'
 
+import type { JSX } from 'react'
+
 function CloseIcon(props: JSX.IntrinsicElements['svg']) {
     return (
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" {...props}>