BREAKING CHANGE: update to react 19

package.json

@@ -15,8 +15,15 @@
   "publishConfig": {
     "access": "public"
   },
+  "peerDependencies": {
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
   "overrides": {
-
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3"
   },
   "scripts": {
     "dev": "vite build --watch",
@@ -49,9 +56,9 @@
     "@kyper/tokenprovider": "^4.0.1",
     "@kyper/userfeedback": "^2.0.0",
     "@kyper/utilityrow": "^2.1.0",
-    "@mui/icons-material": "^6.1.5",
-    "@mui/material": "^6.1.5",
-    "@mxenabled/mxui": "^1.5.4",
+    "@mui/icons-material": "^7.3.9",
+    "@mui/material": "^7.3.9",
+    "@mxenabled/mxui": "^2.2.4",
     "@reduxjs/toolkit": "^2.2.7",
     "@types/node": "^22.1.0",
     "axios": "^1.8.4",
@@ -63,23 +70,21 @@
     "js-sha256": "^0.11.0",
     "lodash": "^4.17.21",
     "numeral": "^2.0.6",
-    "react": "^18.3.1",
-    "react-confetti": "^6.1.0",
-    "react-dom": "^18.3.1",
-    "react-redux": "^9.1.2",
+    "react-confetti": "^6.4.0",
+    "react-redux": "^9.2.0",
     "rxjs": "^7.8.1",
     "uuid": "^11.1.0",
     "velocity-animate": "^1.5.2",
     "vite-plugin-dts": "^4.0.0-beta.2"
   },
   "devDependencies": {
     "@mx-cartographer/kyper-mui": "^2.2.0-alpha1",
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.4.8",
-    "@testing-library/react": "^16.0.0",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^8.56.1",
     "@typescript-eslint/parser": "^8.56.1",
@@ -100,20 +105,26 @@
     "lint-staged": "^15.2.8",
     "markdown-eslint-parser": "^1.2.1",
     "prettier": "3.7.4",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "rollup": "^4.59.0",
     "semantic-release": "^25.0.3",
     "typescript": "^5.2.2",
     "typescript-eslint": "^8.56.1",
     "vite": "^7.3.1",
     "vite-plugin-svgr": "^4.2.0",
-    "vitest": "^3.1.4"
+    "vitest": "^4.0.18"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx}": [
       "npm run lint",
       "npx prettier . --write"
     ]
   },
+  "resolutions": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
   "volta": {
     "node": "24.14.0",
     "npm": "11.9.0"

src/ConnectedTokenProvider.tsx

@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux'
 
 import { Theme, ThemeProvider } from '@mui/material'
 import { deepmerge } from '@mui/utils'
-import { createMXTheme, Icon, IconWeight } from '@mxenabled/mxui'
+import { createMXTheme, Icon } from '@mxenabled/mxui'
 import { TokenProvider, THEMES } from '@kyper/tokenprovider'
 
 import { getPrimarySeedColor } from 'src/redux/selectors/ClientColorScheme'
@@ -66,9 +66,7 @@ const connectThemeOverrides = (palette: Theme['palette']) => ({
         },
       },
       defaultProps: {
-        expandIcon: (
-          <Icon color="secondary" name="stat_minus_1" size={24} weight={IconWeight.Dark} />
-        ),
+        expandIcon: <Icon color="secondary" name="stat_minus_1" size={24} />,
       },
     },
     MuiAccordionDetails: {

src/components/ActionTile.js

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types'
 
 import { useTokens } from '@kyper/tokenprovider'
 import { Text } from '@mxenabled/mxui'
-import { ChevronRightIcon } from '@mxenabled/mxui'
 import { Button } from '@mui/material'
+import ChevronRightIcon from '@mui/icons-material/ChevronRight'
 
 export const ActionTile = (props) => {
   const { icon, onSelectAction, subTitle, title } = props
@@ -19,7 +19,7 @@ export const ActionTile = (props) => {
   return (
     <div>
       <Button
-        endIcon={<ChevronRightIcon size={24} />}
+        endIcon={<ChevronRightIcon sx={{ fontSize: 24 }} />}
         fullWidth={true}
         onClick={onSelectAction}
         size="large"

src/components/DataClusterDropDown.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { useTokens } from '@mxenabled/mxui'
+import { useTokens } from '@kyper/tokenprovider'
 import {
   Accordion,
   AccordionSummary,
@@ -31,6 +31,7 @@ export const DataClusterDropDown: React.FC<DataClusterDropDownProps> = ({ dataCl
             component="p"
             data-test={dataCluster.dataTest}
             truncate={false}
+            // @ts-expect-error - Custom variant from @mxenabled/mxui
             variant="Paragraph"
           >
             <Icon sx={styles.icon}>{dataCluster.icon}</Icon>
@@ -43,6 +44,7 @@ export const DataClusterDropDown: React.FC<DataClusterDropDownProps> = ({ dataCl
           component="p"
           style={styles.accordionDetailText}
           truncate={false}
+          // @ts-expect-error - Custom variant from @mxenabled/mxui
           variant="ParagraphSmall"
         >
           {__('This includes:')}

src/views/consent/DynamicDisclosure.tsx

@@ -6,9 +6,9 @@ import type { RootState } from 'reduxify/Store'
 import { __, getLocale, setLocale } from 'src/utilities/Intl'
 
 import { Box, Button, IconButton, Link, Stack } from '@mui/material'
-import { Icon, IconWeight } from '@mxenabled/mxui'
+import { Icon } from '@mxenabled/mxui'
 import { Text } from '@mxenabled/mxui'
-import { useTokens } from '@mxenabled/mxui'
+import { useTokens } from '@kyper/tokenprovider'
 import { SlideDown } from 'src/components/SlideDown'
 import { getDelay } from 'src/utilities/getDelay'
 
@@ -167,6 +167,7 @@ export const DynamicDisclosure = React.forwardRef<any, DynamicDisclosureProps>(
               data-test="dynamic-disclosure-title"
               style={styles.title}
               truncate={false}
+              // @ts-expect-error - Custom variant from @mxenabled/mxui
               variant="H2"
             >
               {__('Share your data')}
@@ -179,6 +180,7 @@ export const DynamicDisclosure = React.forwardRef<any, DynamicDisclosureProps>(
                 data-test="dynamic-disclosure-p1"
                 style={styles.paragraph}
                 truncate={false}
+                // @ts-expect-error - Custom variant from @mxenabled/mxui
                 variant="Paragraph"
               >
                 {appName
@@ -189,13 +191,7 @@ export const DynamicDisclosure = React.forwardRef<any, DynamicDisclosureProps>(
                   onClick={() => setDialogIsOpen((prev) => !prev)}
                   sx={{ fontSize: 16, padding: 0, minWidth: 0, minHeight: 0 }}
                 >
-                  <Icon
-                    color="secondary"
-                    name="info"
-                    size={16}
-                    sx={{ marginBottom: '6px' }}
-                    weight={IconWeight.Dark}
-                  />
+                  <Icon color="secondary" name="info" size={16} sx={{ marginBottom: '6px' }} />
                 </IconButton>
                 {institution.name
                   ? __(' to securely access the following %1 data to', institution.name)
@@ -205,6 +201,7 @@ export const DynamicDisclosure = React.forwardRef<any, DynamicDisclosureProps>(
             </Stack>
             <div>{accordionElement}</div>
             <div style={styles.disclosureParagraph}>
+              {/* @ts-expect-error - Custom variant from @mxenabled/mxui */}
               <Text component="p" truncate={false} variant="XSmall">
                 {appName
                   ? __(

src/views/search/Search.js

@@ -364,7 +364,7 @@ export const Search = React.forwardRef((_, navigationRef) => {
           style={inlineStyles.headerText}
           tabIndex={-1}
           truncate={false}
-          variant="H2"
+          variant="h2"
         >
           {__('Select your institution')}
         </Text>

vite.config.ts

@@ -1,6 +1,6 @@
 /// <reference types="vitest" />
 /// <reference types="vite-plugin-svgr/client" />
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vitest/config'
 import path from 'path'
 import react from '@vitejs/plugin-react'
 import dts from 'vite-plugin-dts'
@@ -24,11 +24,18 @@ export default defineConfig({
       fileName: (format) => `index.${format}.js`,
     },
     rollupOptions: {
-      external: ['react', 'react-dom'],
+      external: [
+        'react',
+        'react-dom',
+        'react/jsx-runtime',
+        'react/jsx-dev-runtime',
+        'react-dom/client',
+      ],
       output: {
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
+          'react/jsx-runtime': 'react/jsx-runtime',
         },
         assetFileNames: (assetInfo) => {
           if (assetInfo.name && assetInfo.name.endsWith('.css')) {
@@ -67,6 +74,8 @@ export default defineConfig({
     alias: {
       src: path.resolve(__dirname, './src'),
       utils: path.join(__dirname, 'src/utils'),
+      '@mui/material/styles': path.resolve(__dirname, 'node_modules/@mui/material/styles/index.js'),
+      '@mui/material/colors': path.resolve(__dirname, 'node_modules/@mui/material/colors/index.js'),
     },
   },
 
@@ -82,7 +91,13 @@ export default defineConfig({
     include: ['**/*-{test,spec}.?(c|m)[jt]s?(x)'],
     server: {
       deps: {
-        inline: ['@mxenabled/mx-icons'],
+        inline: [
+          '@mxenabled/mx-icons',
+          '@mxenabled/mxui',
+          '@mui/material',
+          '@mui/x-date-pickers',
+          '@mui/x-date-pickers-pro',
+        ],
       },
     },
   },