Upgrade react to 19

src/caretogether-pwa/package.json

@@ -6,33 +6,33 @@
   "dependencies": {
     "@azure/msal-browser": "^3.19.0",
     "@azure/storage-blob": "^12.23.0",
-    "@date-io/date-fns": "^3.0.0",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
+    "@date-io/date-fns": "3.2.1",
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.1",
     "@fullcalendar/core": "^6.1.15",
     "@fullcalendar/daygrid": "^6.1.15",
     "@fullcalendar/list": "^6.1.15",
     "@fullcalendar/react": "^6.1.15",
     "@hookform/resolvers": "^5.2.2",
     "@microsoft/applicationinsights-react-js": "^17.3.0",
     "@microsoft/applicationinsights-web": "^3.3.0",
-    "@mui/icons-material": "^5.16.1",
-    "@mui/lab": "5.0.0-alpha.172",
-    "@mui/material": "^5.16.1",
-    "@mui/system": "^5.16.1",
-    "@mui/x-date-pickers": "^6.20.2",
+    "@mui/icons-material": "7.3.11",
+    "@mui/lab": "7.0.1-beta.25",
+    "@mui/material": "7.3.11",
+    "@mui/system": "7.3.11",
+    "@mui/x-date-pickers": "7.29.4",
     "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^14.3.1",
+    "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "^14.5.2",
-    "date-fns": "^3.6.0",
+    "date-fns": "3.6.0",
     "dexie": "^3.2.7",
     "dexie-react-hooks": "^1.1.7",
     "posthog-js": "^1.369.2",
     "powerbi-client-react": "^2.0.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "19.2.6",
+    "react-dom": "19.2.6",
     "react-hook-form": "^7.58.1",
-    "react-lazyload": "^3.2.1",
+    "react-is": "19.2.6",
     "react-router-dom": "^6.24.1",
     "react-to-print": "^3.0.5",
     "recoil": "^0.7.7",
@@ -44,9 +44,8 @@
     "@eslint/js": "^9.0.0",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.14.10",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@types/react-lazyload": "^3.2.3",
+    "@types/react": "19.2.15",
+    "@types/react-dom": "19.2.3",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
     "@vitejs/plugin-react-swc": "^4.3.0",
@@ -76,5 +75,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "overrides": {
+    "react-is": "19.2.6"
   }
 }

src/caretogether-pwa/src/Activities/ActivityTimeline.tsx

@@ -39,7 +39,7 @@ import { buildGroupedV1ReferralTimelineEntries } from '../V1Referrals/referralTi
 type ActivityTimelineProps = {
   family: CombinedFamilyInfo;
   referrals: V1Referral[];
-  printContentRef: React.RefObject<HTMLDivElement>;
+  printContentRef: React.RefObject<HTMLDivElement | null>;
 };
 
 type ActivitySorting = 'activity' | 'created' | 'edited' | 'approved';

src/caretogether-pwa/src/Communities/AddEditCommunity.tsx

@@ -1,4 +1,5 @@
-import { Button, Grid, TextField } from '@mui/material';
+import { Button, TextField } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import {
   Community,
   CreateCommunity,
@@ -69,10 +70,10 @@ export function AddEditCommunity({
 
   return (
     <Grid container spacing={2} maxWidth={500}>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <h3>{community ? 'Edit Community' : 'Add New Community'}</h3>
       </Grid>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <TextField
           type="text"
           fullWidth
@@ -84,7 +85,7 @@ export function AddEditCommunity({
           onChange={(e) => setName(e.target.value)}
         />
       </Grid>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <TextField
           type="text"
           fullWidth
@@ -96,7 +97,7 @@ export function AddEditCommunity({
           onChange={(e) => setDescription(e.target.value)}
         />
       </Grid>
-      <Grid item xs={12} sx={{ textAlign: 'right' }}>
+      <Grid size={12} sx={{ textAlign: 'right' }}>
         <Button
           color="secondary"
           variant="contained"

src/caretogether-pwa/src/Communities/AddMemberFamiliesForm.tsx

@@ -1,8 +1,8 @@
+import Grid from '@mui/material/GridLegacy';
 import {
   Autocomplete,
   Button,
   FormControl,
-  Grid,
   TextField,
 } from '@mui/material';
 import { AddCommunityMemberFamily, Community } from '../GeneratedClient';

src/caretogether-pwa/src/Communities/AddRoleAssignmentForm.tsx

@@ -1,11 +1,11 @@
+import Grid from '@mui/material/GridLegacy';
 import {
   Alert,
   Autocomplete,
   Button,
   FormControl,
   FormControlLabel,
   FormLabel,
-  Grid,
   Radio,
   RadioGroup,
   TextField,

src/caretogether-pwa/src/Communities/CommunitiesList.tsx

@@ -103,10 +103,12 @@ export function CommunitiesList() {
           anchor="right"
           open={addDrawerOpen}
           onClose={() => setAddDrawerOpen(false)}
-          sx={{
-            '.MuiDrawer-paper': {
-              padding: 2,
-              paddingTop: { xs: 7, sm: 8, md: 6 },
+          slotProps={{
+            paper: {
+              sx: {
+                padding: 2,
+                paddingTop: { xs: 7, sm: 8, md: 6 },
+              },
             },
           }}
         >

src/caretogether-pwa/src/Communities/CommunityDocumentUploadForm.tsx

@@ -1,4 +1,5 @@
-import { Button, Grid, List, ListItem, ListItemText } from '@mui/material';
+import { Button, List, ListItem, ListItemText } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import { Community, UploadCommunityDocument } from '../GeneratedClient';
 import { useCommunityCommand } from '../Model/DirectoryModel';
 import { uploadCommunityFileToTenant } from '../Model/FilesModel';
@@ -68,13 +69,13 @@ export function CommunityDocumentUpload({
 
   return (
     <Grid container spacing={2} maxWidth={500}>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <h3>Upload Community Documents</h3>
       </Grid>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <p>Select one or more documents to upload for this community.</p>
       </Grid>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <input
           accept="*/*"
           multiple={true}
@@ -85,7 +86,7 @@ export function CommunityDocumentUpload({
           }}
         />
       </Grid>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <List dense disablePadding>
           {documentFiles &&
             Array.from(documentFiles).map((documentFile, i) => (
@@ -98,7 +99,7 @@ export function CommunityDocumentUpload({
             ))}
         </List>
       </Grid>
-      <Grid item xs={12} sx={{ textAlign: 'right' }}>
+      <Grid size={12} sx={{ textAlign: 'right' }}>
         <Button
           color="secondary"
           variant="contained"

src/caretogether-pwa/src/Communities/CommunityDocuments.tsx

@@ -113,7 +113,9 @@ export function CommunityDocuments({ communityInfo }: CommunityDocumentsProps) {
               </ListItemIcon>
               <ListItemText
                 primary={doc.document.uploadedFileName}
-                primaryTypographyProps={{ color: theme.palette.primary.main }}
+                slotProps={{
+                  primary: { color: theme.palette.primary.main },
+                }}
                 secondary={`${format(doc.document.timestampUtc!, 'PPp')} — ${personNameString(doc.uploader)}`}
               ></ListItemText>
             </ListItemButton>

src/caretogether-pwa/src/Communities/CommunityScreen.tsx

@@ -1,8 +1,8 @@
+import Grid from '@mui/material/GridLegacy';
 import {
   Button,
   Box,
   Container,
-  Grid,
   Toolbar,
   Typography,
   useMediaQuery,

src/caretogether-pwa/src/Dashboard/DashboardCalendar.tsx

@@ -1,4 +1,5 @@
-import { Grid, Typography } from '@mui/material';
+import Grid from '@mui/material/GridLegacy';
+import { Typography } from '@mui/material';
 import FullCalendar from '@fullcalendar/react';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import listPlugin from '@fullcalendar/list';

src/caretogether-pwa/src/Families/AddAdultDialog.tsx

@@ -1,4 +1,6 @@
-import { useState } from 'react';
+import Grid from '@mui/material/GridLegacy';
+import {
+  useState } from 'react';
 import {
   Button,
   Checkbox,
@@ -11,7 +13,6 @@ import {
   FormControlLabel,
   FormGroup,
   FormLabel,
-  Grid,
   InputAdornment,
   InputLabel,
   MenuItem,
@@ -411,12 +412,14 @@ export function AddAdultDialog({ onClose }: AddAdultDialogProps) {
                 minRows={2}
                 maxRows={5}
                 size="small"
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position="start">
-                      <WarningIcon />
-                    </InputAdornment>
-                  ),
+                slotProps={{
+                  input: {
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <WarningIcon />
+                      </InputAdornment>
+                    ),
+                  },
                 }}
                 value={concerns == null ? '' : concerns}
                 onChange={(e) =>

src/caretogether-pwa/src/Families/AddChildDialog.tsx

@@ -1,4 +1,6 @@
-import { useState } from 'react';
+import Grid from '@mui/material/GridLegacy';
+import {
+  useState } from 'react';
 import {
   Button,
   Dialog,
@@ -9,7 +11,6 @@ import {
   FormControl,
   FormControlLabel,
   FormLabel,
-  Grid,
   InputAdornment,
   InputLabel,
   MenuItem,
@@ -320,12 +321,14 @@ export function AddChildDialog({ onClose }: AddChildDialogProps) {
                 minRows={2}
                 maxRows={5}
                 size="small"
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position="start">
-                      <WarningIcon />
-                    </InputAdornment>
-                  ),
+                slotProps={{
+                  input: {
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <WarningIcon />
+                      </InputAdornment>
+                    ),
+                  },
                 }}
                 value={concerns == null ? '' : concerns}
                 onChange={(e) =>

src/caretogether-pwa/src/Families/AddressEditor.tsx

@@ -1,9 +1,9 @@
+import Grid from '@mui/material/GridLegacy';
 import {
   Button,
   Checkbox,
   Divider,
   FormControlLabel,
-  Grid,
   TextField,
 } from '@mui/material';
 import {

src/caretogether-pwa/src/Families/AdultCard.tsx

@@ -1,3 +1,4 @@
+import Grid from '@mui/material/GridLegacy';
 import {
   Card,
   CardHeader,
@@ -12,7 +13,6 @@ import {
   AccordionSummary,
   AccordionDetails,
   Badge,
-  Grid,
   Tooltip,
 } from '@mui/material';
 import { useState } from 'react';

src/caretogether-pwa/src/Families/AdultFamilyRelationshipEditor.tsx

@@ -1,9 +1,9 @@
+import Grid from '@mui/material/GridLegacy';
 import {
   Checkbox,
   FormControl,
   FormControlLabel,
   FormGroup,
-  Grid,
   InputLabel,
   MenuItem,
   Select,

src/caretogether-pwa/src/Families/AgeEditor.tsx

@@ -1,4 +1,4 @@
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/GridLegacy';
 import { useDirectoryModel } from '../Model/DirectoryModel';
 import { useInlineEditor } from '../Hooks/useInlineEditor';
 import { PersonEditorProps } from './PersonEditorProps';

src/caretogether-pwa/src/Families/AssignmentsSection.tsx

@@ -1,4 +1,5 @@
-import { Grid, Typography, Button } from '@mui/material';
+import Grid from '@mui/material/GridLegacy';
+import { Typography, Button } from '@mui/material';
 import { CombinedFamilyInfo } from '../GeneratedClient';
 import { AssignmentCard } from '../Families/AssignmentCard';
 import { useState } from 'react';

src/caretogether-pwa/src/Families/ChildCustodyRelationshipEditor.tsx

@@ -1,4 +1,5 @@
-import { FormControl, Grid, MenuItem, Select } from '@mui/material';
+import Grid from '@mui/material/GridLegacy';
+import { FormControl, MenuItem, Select } from '@mui/material';
 import { useDirectoryModel } from '../Model/DirectoryModel';
 import { useInlineEditor } from '../Hooks/useInlineEditor';
 import { PersonEditorProps } from './PersonEditorProps';

src/caretogether-pwa/src/Families/ConcernsEditor.tsx

@@ -1,4 +1,5 @@
-import { Grid, InputAdornment, TextField } from '@mui/material';
+import Grid from '@mui/material/GridLegacy';
+import { InputAdornment, TextField } from '@mui/material';
 import { Permission } from '../GeneratedClient';
 import { useDirectoryModel } from '../Model/DirectoryModel';
 import { useInlineEditor } from '../Hooks/useInlineEditor';
@@ -36,12 +37,14 @@ export function ConcernsEditor({ familyId, person }: PersonEditorProps) {
               minRows={2}
               maxRows={5}
               size="small"
-              InputProps={{
-                startAdornment: (
-                  <InputAdornment position="start">
-                    <WarningIcon />
-                  </InputAdornment>
-                ),
+              slotProps={{
+                input: {
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <WarningIcon />
+                    </InputAdornment>
+                  ),
+                },
               }}
               value={editor.value == null ? '' : editor.value}
               onChange={(e) => editor.setValue(e.target.value)}

src/caretogether-pwa/src/Families/EmailAddressEditor.tsx

@@ -1,11 +1,11 @@
+import Grid from '@mui/material/GridLegacy';
 import {
   Button,
   Checkbox,
   Divider,
   FormControl,
   FormControlLabel,
   FormLabel,
-  Grid,
   Radio,
   RadioGroup,
   TextField,