[docs] Update Joy UI templates to use latest components

docs/data/joy/getting-started/templates/email/App.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { GlobalStyles } from '@mui/system';
 import { CssVarsProvider, useColorScheme } from '@mui/joy/styles';
-import type { Theme } from '@mui/joy/styles';
+import CssBaseline from '@mui/joy/CssBaseline';
 import Box from '@mui/joy/Box';
 import Typography from '@mui/joy/Typography';
-import TextField from '@mui/joy/TextField';
+import Input from '@mui/joy/Input';
 import IconButton from '@mui/joy/IconButton';
 
 // Icons import
@@ -57,14 +56,7 @@ export default function EmailExample() {
   const [drawerOpen, setDrawerOpen] = React.useState(false);
   return (
     <CssVarsProvider disableTransitionOnChange theme={emailTheme}>
-      <GlobalStyles<Theme>
-        styles={(theme) => ({
-          body: {
-            margin: 0,
-            fontFamily: theme.vars.fontFamily.body,
-          },
-        })}
-      />
+      <CssBaseline />
       {drawerOpen && (
         <Layout.SideDrawer onClose={() => setDrawerOpen(false)}>
           <Navigation />
@@ -106,7 +98,7 @@ export default function EmailExample() {
               Email
             </Typography>
           </Box>
-          <TextField
+          <Input
             size="sm"
             placeholder="Search anything…"
             startDecorator={<SearchRoundedIcon color="primary" />}

docs/data/joy/getting-started/templates/email/components/EmailContent.tsx

@@ -8,7 +8,7 @@ import Typography from '@mui/joy/Typography';
 import Button from '@mui/joy/Button';
 import IconButton from '@mui/joy/IconButton';
 import AspectRatio from '@mui/joy/AspectRatio';
-import ListDivider from '@mui/joy/ListDivider';
+import Divider from '@mui/joy/Divider';
 import Avatar from '@mui/joy/Avatar';
 
 // Icons import
@@ -25,7 +25,6 @@ export default function EmailContent() {
         borderRadius: 'sm',
         p: 2,
         mb: 3,
-        bgcolor: 'background.componentBg',
       }}
     >
       <Box
@@ -66,7 +65,7 @@ export default function EmailContent() {
           </IconButton>
         </Box>
       </Box>
-      <ListDivider component="hr" sx={{ mt: 2 }} />
+      <Divider sx={{ mt: 2 }} />
       <Box
         sx={{ py: 2, display: 'flex', flexDirection: 'column', alignItems: 'start' }}
       >
@@ -86,7 +85,6 @@ export default function EmailContent() {
             <Typography
               component="span"
               level="body2"
-              textColor="neutral.600"
               sx={{ mr: 1, display: 'inline-block' }}
             >
               From
@@ -99,7 +97,6 @@ export default function EmailContent() {
             <Typography
               component="span"
               level="body2"
-              textColor="neutral.600"
               sx={{ mr: 1, display: 'inline-block' }}
             >
               to
@@ -110,8 +107,8 @@ export default function EmailContent() {
           </Box>
         </Box>
       </Box>
-      <ListDivider component="hr" />
-      <Typography level="body2" textColor="text.secondary" mt={2} mb={2}>
+      <Divider />
+      <Typography level="body2" mt={2} mb={2}>
         Hello, my friend!
         <br />
         <br />
@@ -135,14 +132,8 @@ export default function EmailContent() {
         <br />
         See you soon, Alex Jonnold
       </Typography>
-      <ListDivider component="hr" />
-      <Typography
-        level="body2"
-        fontWeight="md"
-        textColor="text.primary"
-        mt={2}
-        mb={2}
-      >
+      <Divider />
+      <Typography fontWeight="md" fontSize="sm" mt={2} mb={2}>
         Attachments
       </Typography>
       <Box
@@ -178,13 +169,7 @@ export default function EmailContent() {
         <Card variant="outlined" row>
           <CardOverflow>
             <AspectRatio ratio="1" sx={{ minWidth: 80 }}>
-              <Box
-                sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}
-              >
+              <Box>
                 <FolderIcon />
               </Box>
             </AspectRatio>

docs/data/joy/getting-started/templates/email/components/Layout.tsx

@@ -8,7 +8,6 @@ function Root(props: BoxProps) {
       {...props}
       sx={[
         {
-          bgcolor: 'background.appBody',
           display: 'grid',
           gridTemplateColumns: {
             xs: '1fr',
@@ -34,7 +33,7 @@ function Header(props: BoxProps) {
         {
           p: 2,
           gap: 2,
-          bgcolor: 'background.componentBg',
+          bgcolor: 'background.surface',
           display: 'flex',
           flexDirection: 'row',
           justifyContent: 'space-between',
@@ -61,7 +60,7 @@ function SideNav(props: BoxProps) {
       sx={[
         {
           p: 2,
-          bgcolor: 'background.componentBg',
+          bgcolor: 'background.surface',
           borderRight: '1px solid',
           borderColor: 'divider',
           display: {
@@ -82,7 +81,7 @@ function SidePane(props: BoxProps) {
       {...props}
       sx={[
         {
-          bgcolor: 'background.componentBg',
+          bgcolor: 'background.surface',
           borderRight: '1px solid',
           borderColor: 'divider',
           display: {
@@ -136,7 +135,7 @@ function SideDrawer({
           height: '100%',
           p: 2,
           boxShadow: 'lg',
-          bgcolor: 'background.componentBg',
+          bgcolor: 'background.surface',
         }}
       >
         {props.children}

docs/data/joy/getting-started/templates/email/components/Menu.tsx

@@ -1,52 +1,6 @@
 import * as React from 'react';
-import { styled } from '@mui/joy/styles';
-import MenuUnstyled, { MenuUnstyledActions } from '@mui/base/MenuUnstyled';
-import MenuItemUnstyled from '@mui/base/MenuItemUnstyled';
-import PopperUnstyled from '@mui/base/PopperUnstyled';
-
-const Popper = styled(PopperUnstyled)({
-  zIndex: 1500,
-});
-
-const Listbox = styled('ul')(({ theme }) => ({
-  ...theme.variants.outlined.neutral,
-  marginBlock: '0.25rem',
-  padding: '0.45rem',
-  borderRadius: theme.vars.radius.sm,
-  boxShadow: theme.vars.shadow.md,
-  backgroundColor: theme.vars.palette.background.componentBg,
-  gap: theme.spacing(1),
-  display: 'flex',
-  flexDirection: 'column',
-  listStyle: 'none',
-}));
-
-const MenuItem = styled(MenuItemUnstyled, {
-  shouldForwardProp: (prop) => prop !== 'active',
-})<{ active?: boolean }>(({ theme, active }) => ({
-  listStyle: 'none',
-  fontFamily: theme.vars.fontFamily.body,
-  fontSize: theme.vars.fontSize.sm,
-  padding: '0.45rem 0.75rem',
-  borderRadius: theme.vars.radius.xs,
-  minWidth: 120,
-  textDecoration: 'none',
-  display: 'flex',
-  ...theme.variants.plain.neutral,
-  ...(active
-    ? {
-        ...theme.variants.soft.primary,
-        cursor: 'default',
-      }
-    : {
-        '&:hover': {
-          ...theme.variants.softHover.neutral,
-          cursor: 'pointer',
-        },
-        '&:active': theme.variants.outlinedHover.neutral,
-      }),
-  [theme.focus.selector]: theme.focus.default,
-}));
+import JoyMenu, { MenuUnstyledActions } from '@mui/joy/Menu';
+import MenuItem from '@mui/joy/MenuItem';
 
 function Menu({
   control,
@@ -96,17 +50,23 @@ function Menu({
         'aria-expanded': isOpen || undefined,
         'aria-haspopup': 'menu',
       })}
-      <MenuUnstyled
+      <JoyMenu
+        id={id}
+        placement="bottom-end"
         actions={menuActions}
         open={isOpen}
         onClose={close}
         anchorEl={anchorEl}
-        slots={{ root: Popper, listbox: Listbox }}
-        slotProps={{ root: { placement: 'bottom-end' }, listbox: { id } }}
+        sx={{ minWidth: 120 }}
       >
         {menus.map(({ label, active, ...item }) => {
           const menuItem = (
-            <MenuItem active={active} {...item}>
+            <MenuItem
+              selected={active}
+              variant={active ? 'soft' : 'plain'}
+              onClick={close}
+              {...item}
+            >
               {label}
             </MenuItem>
           );
@@ -119,7 +79,7 @@ function Menu({
           }
           return React.cloneElement(menuItem, { key: label });
         })}
-      </MenuUnstyled>
+      </JoyMenu>
     </React.Fragment>
   );
 }

docs/data/joy/getting-started/templates/email/components/Navigation.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import Box from '@mui/joy/Box';
-import Typography from '@mui/joy/Typography';
 import IconButton from '@mui/joy/IconButton';
 import List from '@mui/joy/List';
+import ListSubheader from '@mui/joy/ListSubheader';
 import ListItem from '@mui/joy/ListItem';
 import ListItemButton from '@mui/joy/ListItemButton';
 import ListItemDecorator from '@mui/joy/ListItemDecorator';
@@ -19,36 +19,18 @@ import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownR
 export default function EmailNav() {
   return (
     <List size="sm" sx={{ '--List-item-radius': '8px' }}>
-      <ListItem nested sx={{ p: 0 }}>
-        <Box
-          sx={{
-            mb: 1,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          }}
-        >
-          <Typography
-            id="nav-list-browse"
-            textColor="neutral.500"
-            fontWeight={700}
-            sx={{
-              fontSize: '10px',
-              textTransform: 'uppercase',
-              letterSpacing: '.1rem',
-            }}
-          >
-            Browse
-          </Typography>
+      <ListItem nested>
+        <ListSubheader>
+          Browse
           <IconButton
             size="sm"
             variant="plain"
             color="primary"
-            sx={{ '--IconButton-size': '24px' }}
+            sx={{ '--IconButton-size': '24px', ml: 'auto' }}
           >
             <KeyboardArrowDownRoundedIcon fontSize="small" color="primary" />
           </IconButton>
-        </Box>
+        </ListSubheader>
         <List
           aria-labelledby="nav-list-browse"
           sx={{
@@ -97,37 +79,18 @@ export default function EmailNav() {
           </ListItem>
         </List>
       </ListItem>
-      <ListItem nested>
-        <Box
-          sx={{
-            mt: 2,
-            mb: 1,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          }}
-        >
-          <Typography
-            id="nav-list-tags"
-            textColor="neutral.500"
-            fontWeight={700}
-            sx={{
-              fontSize: '10px',
-              textTransform: 'uppercase',
-              letterSpacing: '.1rem',
-            }}
-          >
-            Tags
-          </Typography>
+      <ListItem nested sx={{ mt: 2 }}>
+        <ListSubheader>
+          Tags
           <IconButton
             size="sm"
             variant="plain"
             color="primary"
-            sx={{ '--IconButton-size': '24px' }}
+            sx={{ '--IconButton-size': '24px', ml: 'auto' }}
           >
             <KeyboardArrowDownRoundedIcon fontSize="small" color="primary" />
           </IconButton>
-        </Box>
+        </ListSubheader>
         <List
           aria-labelledby="nav-list-tags"
           size="sm"

docs/data/joy/getting-started/templates/email/theme.tsx

@@ -1,33 +1,25 @@
 import { extendTheme } from '@mui/joy/styles';
 
-declare module '@mui/joy/styles' {
-  interface PaletteBackground {
-    appBody: string;
-    componentBg: string;
-  }
-}
-
 export default extendTheme({
   colorSchemes: {
     light: {
       palette: {
         background: {
-          appBody: 'var(--joy-palette-neutral-50)',
-          componentBg: 'var(--joy-palette-common-white)',
+          body: 'var(--joy-palette-neutral-50)',
         },
       },
     },
     dark: {
       palette: {
         background: {
-          appBody: 'var(--joy-palette-common-black)',
-          componentBg: 'var(--joy-palette-neutral-900)',
+          body: 'var(--joy-palette-common-black)',
+          surface: 'var(--joy-palette-neutral-900)',
         },
       },
     },
   },
   fontFamily: {
-    // display: "'Inter', var(--joy-fontFamily-fallback)",s
+    // display: "'Inter', var(--joy-fontFamily-fallback)",
     // body: "'Inter', var(--joy-fontFamily-fallback)",
   },
 });