Update MUI Joy package version and refactor z-index usage across components

package-lock.json

@@ -38,7 +38,7 @@
         "@jcesarmobile/capacitor-ocr": "^0.3.0",
         "@meauxt/react-swipeable-list": "^1.0.0",
         "@mui/icons-material": "^5.16.13",
-        "@mui/joy": "^5.0.0-beta.20",
+        "@mui/joy": "5.0.0-beta.52",
         "@mui/material": "^5.15.2",
         "@openreplay/tracker": "^14.0.4",
         "@revenuecat/purchases-capacitor": "^12.0.0",

package.json

@@ -70,7 +70,7 @@
     "@jcesarmobile/capacitor-ocr": "^0.3.0",
     "@meauxt/react-swipeable-list": "^1.0.0",
     "@mui/icons-material": "^5.16.13",
-    "@mui/joy": "^5.0.0-beta.20",
+    "@mui/joy": "5.0.0-beta.52",
     "@mui/material": "^5.15.2",
     "@openreplay/tracker": "^14.0.4",
     "@revenuecat/purchases-capacitor": "^12.0.0",

src/components/common/AppModal.jsx

@@ -2,7 +2,6 @@ import { Close } from '@mui/icons-material'
 import { Box, Divider, IconButton, Modal, Sheet, Typography } from '@mui/joy'
 import useMediaQuery from '@mui/material/useMediaQuery'
 import { forwardRef, useId } from 'react'
-import { Z_INDEX } from '../../constants/zIndex'
 
 const WIDTH_BY_SIZE = {
   sm: 400,
@@ -27,6 +26,7 @@ const AppModal = forwardRef(
       size = 'md',
       fullWidth = true,
       isMobile: isMobileProp,
+      keepMounted = false,
       mobilePresentation = 'sheet',
       role = 'dialog',
       showCloseButton = true,
@@ -63,9 +63,16 @@ const AppModal = forwardRef(
         onClose={handleClose}
         aria-labelledby={titleId}
         aria-describedby={descriptionId}
-        keepMounted
+        keepMounted={keepMounted}
         sx={{
-          zIndex: Z_INDEX.MODAL_BACKDROP,
+          // Joy raises portaled listboxes above modals, but its selector misses
+          // Menu because Menu renders with role="menu". Keep the workaround in
+          // the modal primitive so individual menus never need a z-index.
+          ...(open && {
+            '& ~ [role="menu"]': {
+              '--unstable_popup-zIndex': 'calc(var(--joy-zIndex-modal) + 1)',
+            },
+          }),
           display: 'flex',
           alignItems: isSheet ? 'flex-end' : 'center',
           justifyContent: 'center',
@@ -85,7 +92,6 @@ const AppModal = forwardRef(
           aria-describedby={descriptionId}
           variant='outlined'
           sx={{
-            zIndex: Z_INDEX.MODAL_CONTENT,
             display: 'flex',
             flexDirection: 'column',
             width: isFullscreen

src/constants/zIndex.js

@@ -1,38 +0,0 @@
-// Z-index constants for consistent layering
-// Lower values appear behind higher values
-
-export const Z_INDEX = {
-  // Base layer (0-99)
-  BASE: 0,
-  CARD_OVERLAY: 1,
-  DROPDOWN_ITEM: 2,
-  TOOLTIP: 3,
-
-  // UI Components (100-999)
-  SAFE_AREA: 100,
-  CALENDAR: 110,
-  SMART_INPUT: 110,
-  AUTOCOMPLETE: 200,
-
-  // Navigation (1000-1999)
-  NAVBAR: 1000,
-  DRAWER: 999,
-
-  // Modals and Overlays (2000-8999)
-  MODAL_BACKDROP: 2000,
-  MODAL_CONTENT: 2001,
-  MODAL_CLOSE_BUTTON: 2002,
-  // Popups that must float above open modals (portaled to document.body)
-  MODAL_POPOVER: 2100,
-  TOAST: 3000,
-
-  // Critical System UI (9000-9999)
-  LOADING_SCREEN: 9000,
-  ALERTS: 9500,
-  NETWORK_BANNER: 9600,
-
-  // Maximum (10000+) - Reserved for absolute emergencies
-  EMERGENCY: 10000,
-}
-
-export default Z_INDEX

src/service/AlertsProvider.jsx

@@ -1,7 +1,6 @@
 import { Alert, Box } from '@mui/joy'
 import PropTypes from 'prop-types'
 import { createContext, useCallback, useContext, useState } from 'react'
-import Z_INDEX from '../constants/zIndex'
 
 const FADE_DURATION = 400 // ms
 const ALERT_DURATION = 5000 // ms
@@ -48,7 +47,7 @@ export const AlertsProvider = ({ children }) => {
             top: 0,
             left: 0,
             width: '100%',
-            zIndex: Z_INDEX.ALERTS,
+            zIndex: 'var(--joy-zIndex-snackbar)',
             overflow: 'hidden',
           }}
         >

src/views/Chores/components/ChoreToolbarPrototype.jsx

@@ -38,16 +38,17 @@ import {
   ButtonGroup,
   Chip,
   Divider,
+  Dropdown,
   IconButton,
   Input,
   Menu,
+  MenuButton,
   MenuItem,
   Typography,
 } from '@mui/joy'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useState } from 'react'
 import AppModal from '../../../components/common/AppModal'
 import ActiveFilterChips from '../../../components/common/filter/ActiveFilterChips'
-import { Z_INDEX } from '../../../constants/zIndex'
 import KeyboardShortcutHint from '../../../components/common/KeyboardShortcutHint'
 import { FILTER_COLORS } from '../../../utils/Colors'
 import Priorities from '../../../utils/Priorities'
@@ -229,9 +230,8 @@ const ChoreToolbar = ({
   const [localSelections, setLocalSelections] = useState(defaultSelections())
   const [savingFilter, setSavingFilter] = useState(false)
   const [saveFilterName, setSaveFilterName] = useState('')
-  const [saveMenuAnchorEl, setSaveMenuAnchorEl] = useState(null)
+  const [saveMenuOpen, setSaveMenuOpen] = useState(false)
   const [editingSavedFilter, setEditingSavedFilter] = useState(null)
-  const saveMenuRef = useRef(null)
   const activeConditions = selectionsToConditions(localSelections)
 
   // ── badge counts ─────────────────────────────────────────────────────────────
@@ -419,13 +419,13 @@ const ChoreToolbar = ({
     }
     setSavingFilter(false)
     setSaveFilterName('')
-    setSaveMenuAnchorEl(null)
+    setSaveMenuOpen(false)
     setFilterSheetOpen(true)
   }
 
   useEffect(() => {
     if (!filterSheetOpen || savingFilter || activeConditions.length === 0) {
-      setSaveMenuAnchorEl(null)
+      setSaveMenuOpen(false)
     }
   }, [filterSheetOpen, savingFilter, activeConditions.length])
 
@@ -504,7 +504,7 @@ const ChoreToolbar = ({
       onFilterSaved?.(editingSavedFilter.name)
     })
 
-    setSaveMenuAnchorEl(null)
+    setSaveMenuOpen(false)
     setFilterSheetOpen(false)
   }
 
@@ -681,7 +681,7 @@ const ChoreToolbar = ({
         open={filterSheetOpen}
         isMobile
         onClose={() => {
-          setSaveMenuAnchorEl(null)
+          setSaveMenuOpen(false)
           setFilterSheetOpen(false)
         }}
         maxHeight='92vh'
@@ -747,7 +747,7 @@ const ChoreToolbar = ({
                 disabled={!hasAnyActive && activeConditions.length === 0}
                 onClick={() => {
                   setLocalSelections(defaultSelections())
-                  setSaveMenuAnchorEl(null)
+                  setSaveMenuOpen(false)
                   onClearAllFilters?.()
                   setFilterSheetOpen(false)
                 }}
@@ -756,33 +756,29 @@ const ChoreToolbar = ({
               </Button>
 
               {activeConditions.length > 0 ? (
-                <>
+                <Dropdown
+                  open={saveMenuOpen}
+                  onOpenChange={(_event, isOpen) => setSaveMenuOpen(isOpen)}
+                >
                   <ButtonGroup variant='solid' color='primary'>
                     <Button
                       onClick={() => {
-                        setSaveMenuAnchorEl(null)
+                        setSaveMenuOpen(false)
                         setFilterSheetOpen(false)
                       }}
                       sx={{ minWidth: 140 }}
                     >
                       {resultCount != null ? `Show ${resultCount}` : 'Done'}
                     </Button>
-                    <IconButton
+                    <MenuButton
-                      ref={saveMenuRef}
+                      slots={{ root: IconButton }}
                       aria-label='More save options'
-                      onClick={e => setSaveMenuAnchorEl(e.currentTarget)}
                     >
                       <ArrowDropDown />
-                    </IconButton>
+                    </MenuButton>
                   </ButtonGroup>
 
-                  <Menu
+                  <Menu placement='top-end'>
-                    anchorEl={saveMenuAnchorEl}
-                    open={Boolean(saveMenuAnchorEl)}
-                    onClose={() => setSaveMenuAnchorEl(null)}
-                    placement='top-end'
-                    sx={{ zIndex: Z_INDEX.MODAL_CONTENT + 10 }}
-                  >
                     <MenuItem
                       onClick={handleUpdateFilter}
                       disabled={!editingSavedFilter}
@@ -792,7 +788,7 @@ const ChoreToolbar = ({
                     </MenuItem>
                     <MenuItem
                       onClick={() => {
-                        setSaveMenuAnchorEl(null)
+                        setSaveMenuOpen(false)
                         setSaveFilterName(
                           editingSavedFilter
                             ? `${editingSavedFilter.name} Copy`
@@ -805,13 +801,13 @@ const ChoreToolbar = ({
                       Save as New Filter
                     </MenuItem>
                   </Menu>
-                </>
+                </Dropdown>
               ) : (
                 <Button
                   variant='solid'
                   color='primary'
                   onClick={() => {
-                    setSaveMenuAnchorEl(null)
+                    setSaveMenuOpen(false)
                     setFilterSheetOpen(false)
                   }}
                   sx={{ minWidth: 140 }}

src/views/TestView/AutocompleteDropdown.jsx

@@ -3,8 +3,6 @@ import { Add } from '@mui/icons-material'
 import { Divider, Menu, MenuItem } from '@mui/joy'
 import React, { useEffect } from 'react'
 
-import { Z_INDEX } from '../../constants/zIndex'
-
 const AutocompleteDropdown = ({
   currentValue,
   onCreateSuggestion, // Called when the "Create new" row is chosen
@@ -62,7 +60,6 @@ const AutocompleteDropdown = ({
         position: 'relative',
         bottom: 0,
         left: 0,
-        zIndex: Z_INDEX.MODAL_POPOVER,
       }}
     >
       {filteredOptions.map((option, index) => (

src/views/components/AddTaskModal.jsx

@@ -18,7 +18,6 @@ import { flushSync } from 'react-dom'
 
 import KeyboardShortcutHint from '../../components/common/KeyboardShortcutHint'
 import ModalActions from '../../components/common/ModalActions'
-import { Z_INDEX } from '../../constants/zIndex'
 import { useDocumentScanner } from '../../hooks/useDocumentScanner'
 import { useFileUpload } from '../../hooks/useFileUpload'
 import { useResponsiveModal } from '../../hooks/useResponsiveModal'

src/views/components/AttachmentPickerField.jsx

@@ -18,7 +18,6 @@ import {
 import { ClickAwayListener, Popper } from '@mui/material'
 import { useEffect, useRef, useState } from 'react'
 
-import { Z_INDEX } from '../../constants/zIndex'
 import { useDocumentScanner } from '../../hooks/useDocumentScanner'
 import { useFileUpload } from '../../hooks/useFileUpload'
 import { useNotification } from '../../service/NotificationProvider'
@@ -223,7 +222,7 @@ const AttachmentPickerField = ({
               options: { fallbackPlacements: ['bottom-start', 'top-start'] },
             },
           ]}
-          sx={{ zIndex: Z_INDEX.MODAL_CLOSE_BUTTON + 1 }}
+          sx={{ zIndex: 'calc(var(--joy-zIndex-modal) + 1)' }}
         >
           <ClickAwayListener onClickAway={() => setIsOpen(false)}>
             <Sheet

src/views/components/BaseOptionPicker.jsx

@@ -2,7 +2,6 @@ import { Close } from '@mui/icons-material'
 import { Box, Button, IconButton, Sheet, Typography } from '@mui/joy'
 import { ClickAwayListener, Popper } from '@mui/material'
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { Z_INDEX } from '../../constants/zIndex'
 
 const BaseOptionPicker = ({
   items = [],
@@ -199,7 +198,7 @@ const BaseOptionPicker = ({
               },
             },
           ]}
-          sx={{ zIndex: Z_INDEX.MODAL_CLOSE_BUTTON + 1 }}
+          sx={{ zIndex: 'calc(var(--joy-zIndex-modal) + 1)' }}
         >
           <ClickAwayListener onClickAway={() => setIsOpen(false)}>
             <Sheet

src/views/components/NavBar.jsx

@@ -31,7 +31,6 @@ import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
 
 import { version } from '../../../package.json'
 import UserProfileAvatar from '../../components/UserProfileAvatar'
-import Z_INDEX from '../../constants/zIndex'
 import { useLocalization } from '../../contexts/LocalizationContext'
 import { useResource } from '../../queries/ResourceQueries'
 import { useGlobalSearch } from '../../search/GlobalSearchContext'
@@ -211,7 +210,7 @@ const NavBar = () => {
             ? `calc(var(--safe-area-inset-top, 0px))`
             : '',
         position: 'sticky',
-        zIndex: Z_INDEX.NAVBAR,
+        zIndex: 'var(--joy-zIndex-popup)',
         top: 0,
         minHeight: '35px',
         backgroundColor: 'var(--joy-palette-background-body)',
@@ -239,7 +238,6 @@ const NavBar = () => {
             // height:
             //   'calc(100vh - var(--safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, 0px))',
             overflow: 'auto',
-            zIndex: Z_INDEX.DRAWER,
           },
         }}
       >

src/views/components/NetworkBanner.jsx

@@ -1,7 +1,7 @@
 import { WifiOff } from '@mui/icons-material'
 import { Alert, Box } from '@mui/joy'
 import { useEffect, useState } from 'react'
-import Z_INDEX from '../../constants/zIndex'
+
 import { networkManager } from '../../hooks/NetworkManager'
 
 const NetworkBanner = () => {
@@ -56,7 +56,7 @@ const NetworkBanner = () => {
             paddingTop: `calc(var(--safe-area-inset-top, 0px))`,
             top: 0,
             left: 0,
-            zIndex: Z_INDEX.NETWORK_BANNER,
+            zIndex: 'var(--joy-zIndex-snackbar)',
             pt: `calc( env(safe-area-inset-top, 0px))`,
             width: '100%',
             justifyContent: 'center',