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

@@ -88,6 +88,10 @@ jobs:
               run: |
                   npm run type-check
 
+            - name: Perform type checking with TypeScript (React 18 typings)
+              run: |
+                  npm run type-check:react18
+
             - name: Check React Compiler compatibility
               if: ${{ github.event_name == 'pull_request' }}
               run: |
@@ -129,10 +133,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 type-check:react18 && 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,8 +49,11 @@
         "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",
+        "type-check:react18": "tsc --noEmit -p ./tsconfig.react18.json",
         "lint": "eslint --format codeframe --cache --ext js,jsx,ts,tsx ./",
         "storybook": "storybook dev -p 6006",
         "prettify": "prettier --write \"./**/*.{js,jsx,ts,tsx,json,css,scss,less,md,mdx}\"",
@@ -59,10 +62,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 +97,10 @@
         "@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-18": "npm:@types/react@^18.3",
+        "@types/react-dom": "19.2.3",
+        "@types/react-dom-18": "npm:@types/react-dom@^18.3",
         "@typescript-eslint/eslint-plugin": "8.46.2",
         "@typescript-eslint/parser": "8.46.2",
         "@vitejs/plugin-react": "5.2.0",
@@ -125,11 +129,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 +160,12 @@
         "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"
+        },
+        "@types/react-dom-18": {
+            "@types/react": "$@types/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"