Upgrade MUI 7 to 9

src/caretogether-pwa/package.json

@@ -6,33 +6,35 @@
   "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": "9.0.1",
+    "@mui/lab": "9.0.0-beta.3",
+    "@mui/material": "9.0.1",
+    "@mui/material-pigment-css": "9.0.1",
+    "@mui/system": "9.0.1",
+    "@mui/x-date-pickers": "9.3.0",
+    "@pigment-css/react": "0.0.30",
     "@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 +46,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 +77,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "overrides": {
+    "react-is": "19.2.6"
   }
 }

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

@@ -1,12 +1,12 @@
 import {
-  Timeline,
-  TimelineItem,
-  TimelineOppositeContent,
-  TimelineSeparator,
-  TimelineDot,
-  TimelineConnector,
-  TimelineContent,
-} from '@mui/lab';
+  AppTimeline,
+  AppTimelineConnector,
+  AppTimelineContent,
+  AppTimelineDot,
+  AppTimelineItem,
+  AppTimelineOppositeContent,
+  AppTimelineSeparator,
+} from '../Generic/AppTimeline';
 import { format } from 'date-fns';
 import {
   Activity,
@@ -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';
@@ -414,10 +414,10 @@ export function ActivityTimeline({
             return (
               <Box
                 key={activity.activityTimestampUtc?.toString()}
-                p={2}
-                border={note.isPinned ? 2 : 1}
-                borderRadius={2}
                 sx={{
+                  p: 2,
+                  border: note.isPinned ? 2 : 1,
+                  borderRadius: 2,
                   breakInside: 'avoid',
                   borderColor: note.isPinned ? 'primary.main' : undefined,
                   backgroundColor: note.isPinned
@@ -510,7 +510,7 @@ export function ActivityTimeline({
         </Stack>
       </div>
 
-      <Timeline position="right" sx={{ padding: 0 }}>
+      <AppTimeline position="right" sx={{ padding: 0 }}>
         <Box sx={{ display: 'flex', justifyContent: 'flex-start', mb: 1 }}>
           <FormControl size="small" sx={{ minWidth: 160 }}>
             <InputLabel>Sort by</InputLabel>
@@ -539,10 +539,10 @@ export function ActivityTimeline({
                 Boolean(nextItem.note?.isPinned);
 
           return (
-            <TimelineItem key={`${item.kind}:${i}`}>
-              <TimelineOppositeContent sx={{ display: 'none' }} />
-              <TimelineSeparator>
-                <TimelineDot
+            <AppTimelineItem key={`${item.kind}:${i}`}>
+              <AppTimelineOppositeContent sx={{ display: 'none' }} />
+              <AppTimelineSeparator>
+                <AppTimelineDot
                   sx={{
                     width: 36,
                     height: 36,
@@ -562,12 +562,12 @@ export function ActivityTimeline({
                   ) : (
                     <EditIcon fontSize="small" />
                   )}
-                </TimelineDot>
+                </AppTimelineDot>
                 {!hideBottomConnector && i < mergedTimelineItems.length - 1 && (
-                  <TimelineConnector />
+                  <AppTimelineConnector />
                 )}
-              </TimelineSeparator>
-              <TimelineContent
+              </AppTimelineSeparator>
+              <AppTimelineContent
                 style={{
                   width: 200,
                   wordWrap: 'break-word',
@@ -650,13 +650,13 @@ export function ActivityTimeline({
                     </Box>
                   </>
                 )}
-              </TimelineContent>
-            </TimelineItem>
+              </AppTimelineContent>
+            </AppTimelineItem>
           );
         })}
 
         {noteAccessLevelDialog}
-      </Timeline>
+      </AppTimeline>
     </>
   );
 }

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,
@@ -68,11 +69,11 @@ export function AddEditCommunity({
   }
 
   return (
-    <Grid container spacing={2} maxWidth={500}>
-      <Grid item xs={12}>
+    <Grid container spacing={2} sx={{ maxWidth: 500 }}>
+      <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/Grid';
 import {
   Autocomplete,
   Button,
   FormControl,
-  Grid,
   TextField,
 } from '@mui/material';
 import { AddCommunityMemberFamily, Community } from '../GeneratedClient';
@@ -88,11 +88,11 @@ export function AddMemberFamiliesForm({
     );
 
   return (
-    <Grid container spacing={2} maxWidth={500}>
-      <Grid item xs={12}>
+    <Grid container spacing={2} sx={{ maxWidth: 500 }}>
+      <Grid size={12}>
         <h3>Add Member Families</h3>
       </Grid>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <FormControl required fullWidth size="small" sx={{ marginTop: 1 }}>
           <Autocomplete
             multiple
@@ -113,7 +113,7 @@ export function AddMemberFamiliesForm({
           />
         </FormControl>
       </Grid>
-      <Grid item xs={12} sx={{ textAlign: 'right' }}>
+      <Grid size={12} sx={{ textAlign: 'right' }}>
         <Button
           color="secondary"
           variant="contained"

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

@@ -1,11 +1,11 @@
+import Grid from '@mui/material/Grid';
 import {
   Alert,
   Autocomplete,
   Button,
   FormControl,
   FormControlLabel,
   FormLabel,
-  Grid,
   Radio,
   RadioGroup,
   TextField,
@@ -97,11 +97,11 @@ export function AddRoleAssignmentForm({
       null);
 
   return (
-    <Grid container spacing={2} maxWidth={500}>
-      <Grid item xs={12}>
+    <Grid container spacing={2} sx={{ maxWidth: 500 }}>
+      <Grid size={12}>
         <h3>Add Community Role Assignments</h3>
       </Grid>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <FormControl required fullWidth size="small" sx={{ marginTop: 1 }}>
           <Autocomplete
             clearOnEscape
@@ -120,7 +120,7 @@ export function AddRoleAssignmentForm({
           />
         </FormControl>
       </Grid>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <FormControl required>
           <FormLabel id="role">Role</FormLabel>
           <RadioGroup
@@ -139,14 +139,14 @@ export function AddRoleAssignmentForm({
           </RadioGroup>
         </FormControl>
       </Grid>
-      <Grid item xs={12}>
+      <Grid size={12}>
         {duplicate && (
           <Alert severity="error">
             {person?.label} already has the {role} role in this community!
           </Alert>
         )}
       </Grid>
-      <Grid item xs={12} sx={{ textAlign: 'right' }}>
+      <Grid size={12} sx={{ textAlign: 'right' }}>
         <Button
           color="secondary"
           variant="contained"

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';
@@ -67,14 +68,14 @@ export function CommunityDocumentUpload({
   }
 
   return (
-    <Grid container spacing={2} maxWidth={500}>
-      <Grid item xs={12}>
+    <Grid container spacing={2} sx={{ maxWidth: 500 }}>
+      <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

@@ -84,7 +84,7 @@ export function CommunityDocuments({ communityInfo }: CommunityDocumentsProps) {
   const theme = useTheme();
 
   return (
-    <List sx={{ '& .MuiListItemIcon-root': { minWidth: 36 } }}>
+    <List>
       {documents.map((doc) => (
         <ListItem
           key={doc.document.uploadedDocumentId}
@@ -108,18 +108,20 @@ export function CommunityDocuments({ communityInfo }: CommunityDocumentsProps) {
               sx={{ paddingTop: 0, paddingBottom: 0 }}
               onClick={() => downloadDocument(doc.document)}
             >
-              <ListItemIcon>
+              <ListItemIcon sx={{ minWidth: 36 }}>
                 <InsertDriveFileOutlinedIcon color="primary" />
               </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>
           ) : (
             <>
-              <ListItemIcon>
+              <ListItemIcon sx={{ minWidth: 36 }}>
                 <InsertDriveFileOutlinedIcon />
               </ListItemIcon>
               <ListItemText