support react 19

.github/workflows/testing.yml

@@ -452,19 +452,21 @@ jobs:
           retention-days: 7
 
   test-main:
-    name: Main Dash Tests (Python ${{ matrix.python-version }}, Group ${{ matrix.test-group }})
+    name: Main Dash Tests (Python ${{ matrix.python-version }}, React ${{ matrix.react-version }}, Group ${{ matrix.test-group }})
     needs: build
     runs-on: ubuntu-latest
     timeout-minutes: 30
     strategy:
       fail-fast: false
       matrix:
         python-version: ["3.8", "3.12"]
+        react-version: ["18.3.1", "19.2.0"]
         test-group: ["1", "2", "3"]
 
     env:
-      PERCY_TOKEN: ${{ matrix.python-version == '3.12' && secrets.PERCY_TOKEN || '' }}
-      PERCY_ENABLE: ${{ matrix.python-version == '3.12' && '1' || '0' }}
+      REACT_VERSION: ${{ matrix.react-version }}
+      PERCY_TOKEN: ${{ matrix.python-version == '3.12' && matrix.react-version == '18.3.1' && secrets.PERCY_TOKEN || '' }}
+      PERCY_ENABLE: ${{ matrix.python-version == '3.12' && matrix.react-version == '18.3.1' && '1' || '0' }}
       PERCY_PARALLEL_TOTAL: -1
 
     steps:
@@ -516,7 +518,7 @@ jobs:
 
       - name: Run main integration tests
         run: |
-          if [ "${{ matrix.python-version }}" == "3.12" ]; then
+          if [ "${{ matrix.python-version }}" == "3.12" ] && [ "${{ matrix.react-version }}" == "18.3.1" ]; then
             npx percy exec -- pytest --headless --nopercyfinalize --junitxml=test-reports/junit_intg.xml tests/integration --splits 3 --group ${{ matrix.test-group }}
           else
             pytest --headless --nopercyfinalize --junitxml=test-reports/junit_intg.xml tests/integration --splits 3 --group ${{ matrix.test-group }}
@@ -526,21 +528,21 @@ jobs:
         if: always()
         uses: actions/upload-artifact@v4
         with:
-          name: test-main-results-py${{ matrix.python-version }}-group${{ matrix.test-group }}
+          name: test-main-results-py${{ matrix.python-version }}-react${{ matrix.react-version }}-group${{ matrix.test-group }}
           path: test-reports/
           retention-days: 7
 
       - name: Upload dash artifacts
         if: always()
         uses: actions/upload-artifact@v4
         with:
-          name: test-main-dash-artifacts-py${{ matrix.python-version }}-group${{ matrix.test-group }}
+          name: test-main-dash-artifacts-py${{ matrix.python-version }}-react${{ matrix.react-version }}-group${{ matrix.test-group }}
           path: /tmp/dash_artifacts
           retention-days: 7
           if-no-files-found: ignore
 
   html-test:
-    name: HTML Components Tests (Python ${{ matrix.python-version }})
+    name: HTML Components Tests (Python ${{ matrix.python-version }}, React ${{ matrix.react-version }})
     needs: [build, changes_filter]
     if: |
       (github.event_name == 'push' && (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/dev')) ||
@@ -551,10 +553,12 @@ jobs:
       fail-fast: false
       matrix:
         python-version: ["3.8", "3.12"]
+        react-version: ["18.3.1", "19.2.0"]
 
     env:
-      PERCY_TOKEN: ${{ matrix.python-version == '3.12' && secrets.PERCY_TOKEN || '' }}
-      PERCY_ENABLE: ${{ matrix.python-version == '3.12' && '1' || '0' }}
+      REACT_VERSION: ${{ matrix.react-version }}
+      PERCY_TOKEN: ${{ matrix.python-version == '3.12' && matrix.react-version == '18.3.1' && secrets.PERCY_TOKEN || '' }}
+      PERCY_ENABLE: ${{ matrix.python-version == '3.12' && matrix.react-version == '18.3.1' && '1' || '0' }}
       PERCY_PARALLEL_TOTAL: -1
 
     steps:
@@ -605,7 +609,7 @@ jobs:
         working-directory: components/dash-html-components
         run: |
           npm ci
-          if [ "${{ matrix.python-version }}" == "3.12" ]; then
+          if [ "${{ matrix.python-version }}" == "3.12" ] && [ "${{ matrix.react-version }}" == "18.3.1" ]; then
             npx percy exec -- pytest --headless --nopercyfinalize --junitxml=test-reports/junit_html.xml
           else
             pytest --headless --nopercyfinalize --junitxml=test-reports/junit_html.xml
@@ -615,15 +619,15 @@ jobs:
         if: always()
         uses: actions/upload-artifact@v4
         with:
-          name: html-test-results-py${{ matrix.python-version }}
+          name: html-test-results-py${{ matrix.python-version }}-react${{ matrix.react-version }}
           path: components/dash-html-components/test-reports/
           retention-days: 7
 
       - name: Upload dash artifacts
         if: always()
         uses: actions/upload-artifact@v4
         with:
-          name: html-test-dash-artifacts-py${{ matrix.python-version }}
+          name: html-test-dash-artifacts-py${{ matrix.python-version }}-react${{ matrix.react-version }}
           path: /tmp/dash_artifacts
           retention-days: 7
           if-no-files-found: ignore
@@ -718,7 +722,7 @@ jobs:
           npm run lint
 
   dcc-test:
-    name: DCC Integration Tests (Python ${{ matrix.python-version }}, Group ${{ matrix.test-group }})
+    name: DCC Integration Tests (Python ${{ matrix.python-version }}, React ${{ matrix.react-version }}, Group ${{ matrix.test-group }})
     needs: [build, changes_filter]
     if: |
       (github.event_name == 'push' && (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/dev')) ||
@@ -729,11 +733,13 @@ jobs:
       fail-fast: false
       matrix:
         python-version: ["3.8", "3.12"]
+        react-version: ["18.3.1", "19.2.0"]
         test-group: ["1", "2", "3"]
 
     env:
-      PERCY_TOKEN: ${{ matrix.python-version == '3.12' && secrets.PERCY_TOKEN || '' }}
-      PERCY_ENABLE: ${{ matrix.python-version == '3.12' && '1' || '0' }}
+      REACT_VERSION: ${{ matrix.react-version }}
+      PERCY_TOKEN: ${{ matrix.python-version == '3.12' && matrix.react-version == '18.3.1' && secrets.PERCY_TOKEN || '' }}
+      PERCY_ENABLE: ${{ matrix.python-version == '3.12' && matrix.react-version == '18.3.1' && '1' || '0' }}
       PERCY_PARALLEL_TOTAL: -1
 
     steps:
@@ -792,15 +798,15 @@ jobs:
         if: always()
         uses: actions/upload-artifact@v4
         with:
-          name: dcc-test-results-py${{ matrix.python-version }}-group${{ matrix.test-group }}
+          name: dcc-test-results-py${{ matrix.python-version }}-react${{ matrix.react-version }}-group${{ matrix.test-group }}
           path: components/dash-core-components/test-reports/
           retention-days: 7
 
       - name: Upload dash artifacts
         if: always()
         uses: actions/upload-artifact@v4
         with:
-          name: dcc-dash-artifacts-py${{ matrix.python-version }}-group${{ matrix.test-group }}
+          name: dcc-dash-artifacts-py${{ matrix.python-version }}-react${{ matrix.react-version }}-group${{ matrix.test-group }}
           path: /tmp/dash_artifacts
           retention-days: 7
           if-no-files-found: ignore

.lintstagedrc.js

@@ -26,7 +26,7 @@ const sh_cd = (directory, command) => {
 
 module.exports = {
     // Python checks (run from root, using root venv)
-    "dash/*.py": (filenames) => [
+    "dash/**/*.py": (filenames) => [
         `${venvBin("python")} -m pylint --rcfile=.pylintrc ${filenames.join(
             " "
         )}`,

components/dash-core-components/tests/integration/input/test_number_input.py

@@ -99,26 +99,28 @@ def test_inni004_steppers(dash_dcc, debounce_number_app):
     dash_dcc.wait_for_text_to_equal("#div-fast", "106")
 
     # Test that steppers respect min constraint
+    # Use step-valid value: with min=10 and step=3, valid values are 10, 13, 16, ...
     dash_dcc.clear_input(input_elem)
-    input_elem.send_keys("11")  # Close to min=10
+    input_elem.send_keys("13")  # First valid value above min
+    time.sleep(0.3)  # Wait for debounce (0.25s) to settle before clicking
     decrement_btn.click()  # Should go to 10 (min)
     dash_dcc.wait_for_text_to_equal("#div-fast", "10")
 
     # Verify decrement button is disabled at minimum
-    assert (
-        decrement_btn.get_attribute("disabled") == "true"
-    ), "Decrement should be disabled at minimum"
+    decrement_btn = dash_dcc.find_element("#input-fast~.dash-stepper-decrement")
+    assert not decrement_btn.is_enabled(), "Decrement should be disabled at minimum"
 
     # Test that steppers respect max constraint
+    # Use step-valid value: 9997 = 10 + 3*3329, and 9997 + 3 = 10000
     dash_dcc.clear_input(input_elem)
-    input_elem.send_keys("9999")  # Close to max=10000
+    input_elem.send_keys("9997")  # Close to max=10000, step-valid
+    time.sleep(0.3)  # Wait for debounce (0.25s) to settle before clicking
     increment_btn.click()  # Should go to 10000 (max)
     dash_dcc.wait_for_text_to_equal("#div-fast", "10000")
 
     # Verify increment button is disabled at maximum
-    assert (
-        increment_btn.get_attribute("disabled") == "true"
-    ), "Increment should be disabled at maximum"
+    increment_btn = dash_dcc.find_element("#input-fast~.dash-stepper-increment")
+    assert not increment_btn.is_enabled(), "Increment should be disabled at maximum"
 
     assert dash_dcc.get_logs() == []
 

components/dash-core-components/webpack.config.js

@@ -38,6 +38,8 @@ module.exports = (env, argv) => {
     const externals = ('externals' in overrides) ? overrides.externals : ({
         react: 'React',
         'react-dom': 'ReactDOM',
+        'react/jsx-runtime': 'ReactJSXRuntime',
+        'react/jsx-dev-runtime': 'ReactJSXRuntime',
         'prop-types': 'PropTypes'
     });
 
@@ -56,11 +58,7 @@ module.exports = (env, argv) => {
         },
         externals,
         resolve: {
-            extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
-            alias: {
-                'react/jsx-runtime': require.resolve('react/jsx-runtime'),
-                'react/jsx-dev-runtime': require.resolve('react/jsx-dev-runtime'),
-            }
+            extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
         },
         module: {
             noParse: /node_modules[\\\/]plotly.js-dist-min/,

components/dash-html-components/webpack.config.js

@@ -37,6 +37,8 @@ module.exports = (env, argv) => {
     const externals = ('externals' in overrides) ? overrides.externals : ({
         react: 'React',
         'react-dom': 'ReactDOM',
+        'react/jsx-runtime': 'ReactJSXRuntime',
+        'react/jsx-dev-runtime': 'ReactJSXRuntime',
         'prop-types': 'PropTypes'
     });
 

components/dash-table/.config/webpack/base.js

@@ -35,6 +35,8 @@ module.exports = (options = {}) => {
         externals: {
             react: 'React',
             'react-dom': 'ReactDOM',
+            'react/jsx-runtime': 'ReactJSXRuntime',
+            'react/jsx-dev-runtime': 'ReactJSXRuntime',
         },
         module: {
             rules: [

dash/_dash_renderer.py

@@ -3,8 +3,8 @@
 
 __version__ = "3.0.0"
 
-_available_react_versions = {"18.3.1", "18.2.0", "16.14.0"}
-_available_reactdom_versions = {"18.3.1", "18.2.0", "16.14.0"}
+_available_react_versions = {"18.3.1", "18.2.0", "19.2.0"}
+_available_reactdom_versions = {"18.3.1", "18.2.0", "19.2.0"}
 _js_dist_dependencies: List[Dict[str, Any]] = []  # to be set by _set_react_version
 
 
@@ -19,19 +19,51 @@ def _set_react_version(v_react, v_reactdom=None):
     assert v_react in _available_react_versions, react_err
     assert v_reactdom in _available_reactdom_versions, reactdom_err
 
+    # React 19+ removed UMD builds, use umd-react package instead
+    is_react19 = v_react.startswith("19.")
+    is_reactdom19 = v_reactdom.startswith("19.")
+
+    if is_react19:
+        react_prod_url = (
+            f"https://unpkg.com/umd-react@{v_react}/dist/react.production.min.js"
+        )
+        react_dev_url = (
+            f"https://unpkg.com/umd-react@{v_react}/dist/react.development.js"
+        )
+    else:
+        react_prod_url = (
+            f"https://unpkg.com/react@{v_react}/umd/react.production.min.js"
+        )
+        react_dev_url = f"https://unpkg.com/react@{v_react}/umd/react.development.js"
+
+    if is_reactdom19:
+        reactdom_prod_url = (
+            f"https://unpkg.com/umd-react@{v_reactdom}/dist/react-dom.production.min.js"
+        )
+        reactdom_dev_url = (
+            f"https://unpkg.com/umd-react@{v_reactdom}/dist/react-dom.development.js"
+        )
+    else:
+        reactdom_prod_url = (
+            f"https://unpkg.com/react-dom@{v_reactdom}/umd/react-dom.production.min.js"
+        )
+        reactdom_dev_url = (
+            f"https://unpkg.com/react-dom@{v_reactdom}/umd/react-dom.development.js"
+        )
+
     _js_dist_dependencies[:] = [
         {
             "external_url": {
                 "prod": [
                     "https://unpkg.com/@babel/polyfill@7.12.1/dist/polyfill.min.js",
-                    f"https://unpkg.com/react@{v_react}/umd/react.production.min.js",
-                    f"https://unpkg.com/react-dom@{v_reactdom}/umd/react-dom.production.min.js",
+                    react_prod_url,
+                    reactdom_prod_url,
                     "https://unpkg.com/prop-types@15.8.1/prop-types.min.js",
                 ],
                 "dev": [
                     "https://unpkg.com/@babel/polyfill@7.12.1/dist/polyfill.min.js",
-                    f"https://unpkg.com/react@{v_react}/umd/react.development.js",
-                    f"https://unpkg.com/react-dom@{v_reactdom}/umd/react-dom.development.js",
+                    react_dev_url,
+                    reactdom_dev_url,
                     "https://unpkg.com/prop-types@15.8.1/prop-types.js",
                 ],
             },

dash/dash-renderer/init.template

@@ -19,19 +19,51 @@ def _set_react_version(v_react, v_reactdom=None):
     assert v_react in _available_react_versions, react_err
     assert v_reactdom in _available_reactdom_versions, reactdom_err
 
+    # React 19+ removed UMD builds, use umd-react package instead
+    is_react19 = v_react.startswith("19.")
+    is_reactdom19 = v_reactdom.startswith("19.")
+
+    if is_react19:
+        react_prod_url = (
+            f"https://unpkg.com/umd-react@{v_react}/dist/react.production.min.js"
+        )
+        react_dev_url = (
+            f"https://unpkg.com/umd-react@{v_react}/dist/react.development.js"
+        )
+    else:
+        react_prod_url = (
+            f"https://unpkg.com/react@{v_react}/umd/react.production.min.js"
+        )
+        react_dev_url = f"https://unpkg.com/react@{v_react}/umd/react.development.js"
+
+    if is_reactdom19:
+        reactdom_prod_url = (
+            f"https://unpkg.com/umd-react@{v_reactdom}/dist/react-dom.production.min.js"
+        )
+        reactdom_dev_url = (
+            f"https://unpkg.com/umd-react@{v_reactdom}/dist/react-dom.development.js"
+        )
+    else:
+        reactdom_prod_url = (
+            f"https://unpkg.com/react-dom@{v_reactdom}/umd/react-dom.production.min.js"
+        )
+        reactdom_dev_url = (
+            f"https://unpkg.com/react-dom@{v_reactdom}/umd/react-dom.development.js"
+        )
+
     _js_dist_dependencies[:] = [
         {
             "external_url": {
                 "prod": [
                     "https://unpkg.com/@babel/polyfill@$polyfill/dist/polyfill.min.js",
-                    f"https://unpkg.com/react@{v_react}/umd/react.production.min.js",
-                    f"https://unpkg.com/react-dom@{v_reactdom}/umd/react-dom.production.min.js",
+                    react_prod_url,
+                    reactdom_prod_url,
                     "https://unpkg.com/prop-types@$proptypes/prop-types.min.js",
                 ],
                 "dev": [
                     "https://unpkg.com/@babel/polyfill@$polyfill/dist/polyfill.min.js",
-                    f"https://unpkg.com/react@{v_react}/umd/react.development.js",
-                    f"https://unpkg.com/react-dom@{v_reactdom}/umd/react-dom.development.js",
+                    react_dev_url,
+                    reactdom_dev_url,
                     "https://unpkg.com/prop-types@$proptypes/prop-types.js",
                 ],
             },

dash/dash-renderer/src/index.js

@@ -1,3 +1,4 @@
+import './react19-shim'; // Must be first - React 19 compatibility
 import {DashRenderer} from './DashRenderer';
 import './utils/clientsideFunctions';