AP-6482 # update to react 19

.eslintrc.json

@@ -9,7 +9,8 @@
     "plugin:react-hooks/recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:@microsoft/eslint-plugin-sdl/recommended",
-    "prettier"
+    "prettier",
+    "plugin:react/jsx-runtime"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {

package.json

@@ -12,7 +12,9 @@
     "@emotion/styled": "^11.11.0",
     "@nylas/react": "^1.3.1",
     "@oneblink/sdk-core": "^8.11.1-beta.4",
-    "@react-google-maps/api": "2.19.2",
+    "@react-google-maps/api": "^2.20.8",
+    "@react-input/mask": "^2.0.4",
+    "@tanstack/react-table": "^8.21.3",
     "blueimp-load-image": "^5.16.0",
     "bulma": "^0.9.4",
     "bulma-slider": "2.0.4",
@@ -30,24 +32,21 @@
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
     "morph-expressions": "^1.1.1",
-    "qrcode.react": "^4.1.0",
+    "qrcode.react": "^4.2.0",
     "query-string": "^8.1.0",
     "react-google-recaptcha": "^3.1.0",
     "react-image-crop": "^11.0.10",
-    "react-input-mask": "^2.0.4",
-    "react-signature-canvas": "^1.0.6",
-    "react-table": "^7.8.0",
+    "react-signature-canvas": "^1.1.0-alpha.2",
     "sanitize-html": "^2.11.0",
-    "use-resize-observer": "^9.1.0",
+    "usehooks-ts": "^3.1.1",
     "uuid": "^9.0.1",
     "xml2js": "^0.6.2"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.23.9",
     "@microsoft/eslint-plugin-sdl": "^0.2.2",
-    "@mui/lab": "^5.0.0-alpha.152",
-    "@mui/material": "^5.15.6",
-    "@mui/x-date-pickers": "^6.20.2",
+    "@mui/material": "^7.3.6",
+    "@mui/x-date-pickers": "^8.22.1",
     "@oneblink/apps": "^23.7.0-beta.1",
     "@oneblink/release-cli": "^3.4.0-beta.1",
     "@oneblink/types": "github:oneblink/types",
@@ -58,12 +57,10 @@
     "@types/lodash.clonedeep": "^4.5.9",
     "@types/lodash.debounce": "^4.0.9",
     "@types/lodash.throttle": "^4.1.9",
-    "@types/react": "^17.0.73",
+    "@types/react": "^19.2.7",
     "@types/react-google-recaptcha": "^2.1.9",
-    "@types/react-input-mask": "^3.0.5",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-signature-canvas": "^1.0.5",
-    "@types/react-table": "^7.7.19",
     "@types/sanitize-html": "^2.9.5",
     "@types/ua-parser-js": "^0.7.39",
     "@types/uuid": "^9.0.8",
@@ -80,13 +77,13 @@
     "jsdom": "^27.2.0",
     "prettier": "^3.2.4",
     "prettier-plugin-jsdoc": "^1.3.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "react-router-dom": "^5.3.4",
     "sass": "^1.70.0",
     "tsc-watch": "^6.0.4",
-    "typedoc": "^0.26.9",
-    "typescript": "^5.6.3",
+    "typedoc": "^0.28.15",
+    "typescript": "^5.9.3",
     "vitest": "^4.0.9"
   },
   "directories": {
@@ -104,12 +101,11 @@
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@mui/lab": "^5.0.0 || ^5.0.0-alpha.152",
-    "@mui/material": "^5.6.1",
-    "@mui/x-date-pickers": "^6.20.2",
+    "@mui/material": "^7.3.6",
+    "@mui/x-date-pickers": "^8.22.1",
     "@oneblink/apps": "*",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "react-router-dom": "^5.2.0"
   },
   "publishConfig": {

src/OneBlinkFormBase.tsx

@@ -18,7 +18,7 @@ import {
 } from '@oneblink/types'
 import * as H from 'history'
 import { LocalizationProvider } from '@mui/x-date-pickers'
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV2'
 
 import Modal from './components/renderer/Modal'
 import cleanFormSubmissionModel from './services/cleanFormSubmissionModel'
@@ -516,7 +516,7 @@ function OneBlinkFormBase({
   // #region Validation
 
   const validationErrorToastFocusElementRef =
-    React.useRef<HTMLButtonElement>(null)
+    React.useRef<HTMLButtonElement | null>(null)
   const [isShowingValidationErrorsCard, setIsShowingValidationErrorsCard] =
     React.useState(false)
   const { validate } = useFormValidation(pages)

src/components/ArcGISWebMap.tsx

@@ -41,11 +41,11 @@ type Props = {
   onChange: FormElementValueChangeHandler<ArcGISWebMapElementValue>
   automatedSnapshotFileName: string
   'aria-describedby'?: string
-  takeScreenShotRef: React.MutableRefObject<
+  takeScreenShotRef: React.RefObject<
     | ((view?: ArcGISTypes.ArcGISWebMapElementValue['view']) => Promise<{
         dataUrl: string
       }>)
-    | undefined
+    | null
   >
 }
 
@@ -120,14 +120,14 @@ function FormElementArcGISWebMap({
   ...props
 }: Props) {
   const ref = React.useRef<HTMLDivElement | null>(null)
-  const layerPanelRef = React.useRef<Expand>()
-  const mapGalleryPanelRef = React.useRef<Expand>()
-  const sketchToolRef = React.useRef<Sketch>()
-  const drawingLayerRef = React.useRef<GraphicsLayer>()
-  const selectedGraphicForUpdate = React.useRef<string>()
-  const mapViewRef = React.useRef<MapView>()
-  const measurementLayerRef = React.useRef<GraphicsLayer>()
-  const defaultLayersRef = React.useRef<Layer[]>()
+  const layerPanelRef = React.useRef<Expand>(null)
+  const mapGalleryPanelRef = React.useRef<Expand>(null)
+  const sketchToolRef = React.useRef<Sketch>(null)
+  const drawingLayerRef = React.useRef<GraphicsLayer>(null)
+  const selectedGraphicForUpdate = React.useRef<string | undefined>(undefined)
+  const mapViewRef = React.useRef<MapView>(null)
+  const measurementLayerRef = React.useRef<GraphicsLayer>(null)
+  const defaultLayersRef = React.useRef<Layer[]>(null)
 
   const [loadError, setLoadError] = React.useState<Error>()
   const [isLoading, setIsLoading] = React.useState<boolean>(false)

src/components/ConfirmDialog.tsx

@@ -8,7 +8,6 @@ import {
   Portal,
   DialogProps,
 } from '@mui/material'
-import { LoadingButton } from '@mui/lab'
 import useIsMounted from '../hooks/useIsMounted'
 import ErrorSnackbar from './ErrorSnackbar'
 
@@ -27,7 +26,7 @@ type Props = {
     error?: string
     title?: string
   }
-  TransitionProps?: DialogProps['TransitionProps']
+  TransitionProps?: NonNullable<DialogProps['slotProps']>['transition']
   disabled?: boolean
 }
 
@@ -71,9 +70,11 @@ export default function ConfirmDialog({
         fullWidth
         onClose={!isConfirming ? onClose : undefined}
         data-cypress={cypress?.dialog}
-        TransitionProps={{
-          onExiting: () => setError(null),
-          ...(TransitionProps ? TransitionProps : {}),
+        slotProps={{
+          transition: {
+            onExiting: () => setError(null),
+            ...(TransitionProps ? TransitionProps : {}),
+          },
         }}
       >
         <DialogTitle data-cypress={cypress?.title}>{title}</DialogTitle>
@@ -87,7 +88,7 @@ export default function ConfirmDialog({
             Cancel
           </Button>
 
-          <LoadingButton
+          <Button
             variant="contained"
             loading={isConfirming}
             autoFocus
@@ -98,7 +99,7 @@ export default function ConfirmDialog({
             disabled={disabled}
           >
             {confirmButtonText}
-          </LoadingButton>
+          </Button>
         </DialogActions>
       </Dialog>
       <Portal>

src/components/ErrorSnackbar.tsx

@@ -8,11 +8,9 @@ import {
 } from '@mui/material'
 import MaterialIcon from './MaterialIcon'
 
-const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
-  function Alert(props, ref) {
-    return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />
-  },
-)
+function Alert({ ref, ...props }: AlertProps) {
+  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />
+}
 
 const StyledIcon = styled(MaterialIcon)(() => ({
   fontSize: 20,

src/components/ImageCropper/index.tsx

@@ -75,12 +75,12 @@ const ImageCropper = ({
     outputAspectRatio ? undefined : defaultCrop,
   )
 
-  const handleSetCrop = React.useCallback((_, c: PercentCrop) => {
+  const handleSetCrop = React.useCallback((_: unknown, c: PercentCrop) => {
     setCrop(c)
   }, [])
 
   const handleCropComplete = React.useCallback(
-    (_, c: PercentCrop) => {
+    (_: unknown, c: PercentCrop) => {
       onCropComplete(c)
     },
     [onCropComplete],

src/components/InputField.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react'
-import { TextField } from '@mui/material'
+import { TextField, TextFieldProps } from '@mui/material'
 import InputClear from './InputClear'
 
-type Props = React.ComponentProps<typeof TextField> & {
+type Props = TextFieldProps & {
   onClear?: () => void
+  InputProps?: NonNullable<TextFieldProps['slotProps']>['input']
 }
 
 const InputField = ({
@@ -33,7 +34,9 @@ const InputField = ({
     <TextField
       variant={variant}
       margin={margin}
-      InputProps={inputProps}
+      slotProps={{
+        input: inputProps,
+      }}
       size={size}
       {...props}
     />

src/components/LoadingWithMessage.tsx

@@ -8,14 +8,13 @@ const Loading = ({ message }: Props) => {
   return (
     <Box p={2} className="ob-loading-with-message">
       <Grid container spacing={2} className="ob-loading">
-        <Grid xs={12} container item justifyContent="center">
+        <Grid size={{ xs: 12 }} container justifyContent="center">
           <CircularProgress></CircularProgress>
         </Grid>
         {message && (
           <Grid
-            xs={12}
+            size={{ xs: 12 }}
             container
-            item
             justifyContent="center"
             className="ob-loading-message"
           >

src/components/MaterialIcon.tsx

@@ -2,10 +2,11 @@ import * as React from 'react'
 import { Icon } from '@mui/material'
 import clsx from 'clsx'
 
-export default React.forwardRef<
-  HTMLSpanElement,
-  React.ComponentProps<typeof Icon>
->(function MaterialIcon({ className, ...props }, ref) {
+export default function MaterialIcon({
+  className,
+  ref,
+  ...props
+}: React.ComponentProps<typeof Icon>) {
   return (
     <Icon
       ref={ref}
@@ -15,4 +16,4 @@ export default React.forwardRef<
       {...props}
     />
   )
-})
+}

src/components/NotificationGrid.tsx

@@ -39,7 +39,6 @@ export function NotificationGridItem({
 
   return (
     <Grid
-      item
       className={className}
       sx={(theme) => ({
         flexBasis: '100%',

src/components/SuccessSnackbar.tsx

@@ -30,12 +30,10 @@ function SuccessSnackbar({
         sx={{ bgcolor: 'success.main' }}
         message={
           <Grid container spacing={2} alignItems="center">
-            <Grid item xs="auto">
+            <Grid size={{ xs: 'auto' }}>
               <Icon>check_circle</Icon>
             </Grid>
-            <Grid item xs>
-              {children}
-            </Grid>
+            <Grid size={{ xs: 'grow' }}>{children}</Grid>
           </Grid>
         }
       />

src/components/ValidationErrorsCard.tsx

@@ -148,7 +148,7 @@ const ValidationErrorsCard = ({
   setPageId: ReturnType<typeof usePages>['setPageId']
   navigationTopOffset: number | 'CALCULATE'
   scrollableContainerId?: string
-  validationErrorToastFocusElementRef: React.RefObject<HTMLButtonElement>
+  validationErrorToastFocusElementRef: React.RefObject<HTMLButtonElement | null>
 }) => {
   const [isExpanded, expand, contract] = useBooleanState(false)
 

src/components/downloadable-files/resource-components.tsx

@@ -97,12 +97,12 @@ function DownloadableFilesDisplay({
         >
           {pdfFileNodes &&
             pdfFileNodes.map(({ node, key }) => (
-              <Grid item xs={12} sm={layout === 'GRID' ? 6 : 12} key={key}>
+              <Grid size={{ xs: 12, sm: layout === 'GRID' ? 6 : 12 }} key={key}>
                 {node}
               </Grid>
             ))}
           {attachments.map((attachment, index) => (
-            <Grid item xs={12} sm={layout === 'GRID' ? 6 : 12} key={index}>
+            <Grid size={{ xs: 12, sm: layout === 'GRID' ? 6 : 12 }} key={index}>
               <SingleFileDisplay attachment={attachment} />
             </Grid>
           ))}
@@ -189,7 +189,7 @@ export const OnlyPDFDisplay = ({
         justifyContent={children.length === 1 ? 'center' : undefined}
       >
         {children.map(({ node, key }) => (
-          <Grid item xs={12} sm={layout === 'GRID' ? 6 : 12} key={key}>
+          <Grid size={{ xs: 12, sm: layout === 'GRID' ? 6 : 12 }} key={key}>
             {node}
           </Grid>
         ))}

src/components/formStore/FormStoreTableProvider.tsx

@@ -6,7 +6,6 @@ import { formStoreService } from '@oneblink/apps'
 import useInfiniteScrollDataLoad from '../../hooks/useInfiniteScrollDataLoad'
 import useFormStoreTable from './table/useFormStoreTable'
 import { Box, Button, Grid } from '@mui/material'
-import { LoadingButton } from '@mui/lab'
 import { FormTypes } from '@oneblink/types'
 import useSubmissionIdValidationMessage, {
   validateIsUUID,
@@ -145,10 +144,12 @@ export function FormStoreTableProvider({
     onRefresh,
   })
 
+  const visibleColumns = formStoreTable.getVisibleFlatColumns()
+
   return (
     <FormStoreTableContext.Provider value={formStoreTable}>
       {children}
-      {formStoreTable.visibleColumns.length ? (
+      {visibleColumns?.length ? (
         <>
           {!formStoreRecords.length && !isLoading && !loadError && (
             <NoResourcesYet
@@ -203,7 +204,7 @@ export function FormStoreTableProvider({
       {!!nextOffset && !loadError && isLoading !== 'INITIAL' && (
         <Box padding={4} className="ob-form-store-load-more-button-container">
           <Grid container justifyContent="center">
-            <LoadingButton
+            <Button
               className="ob-form-store-load-more-button"
               variant="outlined"
               color="primary"
@@ -217,7 +218,7 @@ export function FormStoreTableProvider({
               }}
             >
               Load More
-            </LoadingButton>
+            </Button>
           </Grid>
         </Box>
       )}