[account] [docs] Add <Account /> in sidebarFooter

docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.js

@@ -75,11 +75,15 @@ DemoPageContent.propTypes = {
 };
 
 function AccountSidebarPreview(props) {
-  const { handleClick, open } = props;
+  const { handleClick, open, mini } = props;
   return (
-    <Stack direction="column">
+    <Stack direction="column" p={0} overflow="hidden">
       <Divider />
-      <AccountPreview variant="expanded" handleClick={handleClick} open={open} />
+      <AccountPreview
+        variant={mini ? 'condensed' : 'expanded'}
+        handleClick={handleClick}
+        open={open}
+      />
     </Stack>
   );
 }
@@ -89,6 +93,7 @@ AccountSidebarPreview.propTypes = {
    * The handler used when the preview is expanded
    */
   handleClick: PropTypes.func,
+  mini: PropTypes.bool.isRequired,
   /**
    * The state of the Account popover
    * @default false
@@ -164,24 +169,59 @@ function SidebarFooterAccountPopover() {
           </MenuItem>
         ))}
       </MenuList>
+      <Divider />
       <AccountPopoverFooter>
         <SignOutButton />
       </AccountPopoverFooter>
     </Stack>
   );
 }
-
-function SidebarFooterAccount() {
+function SidebarFooterAccount({ mini }) {
   return (
     <Account
       slots={{
-        preview: AccountSidebarPreview,
+        preview: ({ handleClick, open }) => (
+          <AccountSidebarPreview handleClick={handleClick} open={open} mini={mini} />
+        ),
         popoverContent: SidebarFooterAccountPopover,
       }}
+      slotProps={{
+        popover: {
+          transformOrigin: { horizontal: 'left', vertical: 'top' },
+          anchorOrigin: { horizontal: 'right', vertical: 'bottom' },
+          slotProps: {
+            paper: {
+              elevation: 0,
+              sx: {
+                overflow: 'visible',
+                filter: (theme) =>
+                  `drop-shadow(0px 2px 8px ${theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.32)'})`,
+                mt: 1,
+                '&::before': {
+                  content: '""',
+                  display: 'block',
+                  position: 'absolute',
+                  bottom: 10,
+                  left: 0,
+                  width: 10,
+                  height: 10,
+                  bgcolor: 'background.paper',
+                  transform: 'translate(-50%, -50%) rotate(45deg)',
+                  zIndex: 0,
+                },
+              },
+            },
+          },
+        },
+      }}
     />
   );
 }
 
+SidebarFooterAccount.propTypes = {
+  mini: PropTypes.bool.isRequired,
+};
+
 const demoSession = {
   user: {
     name: 'Bharat Kashyap',

docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.tsx

@@ -12,7 +12,7 @@ import { createTheme } from '@mui/material/styles';
 import DashboardIcon from '@mui/icons-material/Dashboard';
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import { AppProvider } from '@toolpad/core/AppProvider';
-import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+import { DashboardLayout, SidebarFooterProps } from '@toolpad/core/DashboardLayout';
 import {
   Account,
   AccountPreview,
@@ -70,13 +70,16 @@ function DemoPageContent({ pathname }: { pathname: string }) {
     </Box>
   );
 }
-
-function AccountSidebarPreview(props: AccountPreviewProps) {
-  const { handleClick, open } = props;
+function AccountSidebarPreview(props: AccountPreviewProps & { mini: boolean }) {
+  const { handleClick, open, mini } = props;
   return (
-    <Stack direction="column">
+    <Stack direction="column" p={0} overflow="hidden">
       <Divider />
-      <AccountPreview variant="expanded" handleClick={handleClick} open={open} />
+      <AccountPreview
+        variant={mini ? 'condensed' : 'expanded'}
+        handleClick={handleClick}
+        open={open}
+      />
     </Stack>
   );
 }
@@ -149,20 +152,51 @@ function SidebarFooterAccountPopover() {
           </MenuItem>
         ))}
       </MenuList>
+      <Divider />
       <AccountPopoverFooter>
         <SignOutButton />
       </AccountPopoverFooter>
     </Stack>
   );
 }
-
-function SidebarFooterAccount() {
+function SidebarFooterAccount({ mini }: SidebarFooterProps) {
   return (
     <Account
       slots={{
-        preview: AccountSidebarPreview,
+        preview: ({ handleClick, open }) => (
+          <AccountSidebarPreview handleClick={handleClick} open={open} mini={mini} />
+        ),
         popoverContent: SidebarFooterAccountPopover,
       }}
+      slotProps={{
+        popover: {
+          transformOrigin: { horizontal: 'right', vertical: 'bottom' },
+          anchorOrigin: { horizontal: 'right', vertical: 'bottom' },
+          slotProps: {
+            paper: {
+              elevation: 0,
+              sx: {
+                overflow: 'visible',
+                filter: (theme) =>
+                  `drop-shadow(0px 2px 8px ${theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.32)'})`,
+                mt: 1,
+                '&::before': {
+                  content: '""',
+                  display: 'block',
+                  position: 'absolute',
+                  bottom: 10,
+                  left: 0,
+                  width: 10,
+                  height: 10,
+                  bgcolor: 'background.paper',
+                  transform: 'translate(-50%, -50%) rotate(45deg)',
+                  zIndex: 0,
+                },
+              },
+            },
+          },
+        },
+      }}
     />
   );
 }

docs/pages/toolpad/core/api/account-preview.json

@@ -9,9 +9,19 @@
       }
     },
     "slots": {
-      "type": { "name": "shape", "description": "{ avatar?: elementType }" },
+      "type": {
+        "name": "shape",
+        "description": "{ avatar?: elementType, avatarIconButton?: elementType, moreIconButton?: elementType }"
+      },
       "additionalInfo": { "slotsApi": true }
     },
+    "sx": {
+      "type": {
+        "name": "union",
+        "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
+      },
+      "additionalInfo": { "sx": true }
+    },
     "variant": {
       "type": { "name": "enum", "description": "'condensed'<br>&#124;&nbsp;'expanded'" },
       "default": "'condensed'"

docs/pages/toolpad/core/api/account.json

@@ -9,7 +9,7 @@
     "slotProps": {
       "type": {
         "name": "shape",
-        "description": "{ popover?: object, popoverContent?: object, preview?: { handleClick?: func, open?: bool, slotProps?: { avatar?: object, avatarIconButton?: object, moreIconButton?: object }, slots?: { avatar?: elementType, avatarIconButton?: elementType, moreIconButton?: elementType }, variant?: 'condensed'<br>&#124;&nbsp;'expanded' }, signInButton?: object, signOutButton?: object }"
+        "description": "{ popover?: object, popoverContent?: object, preview?: { handleClick?: func, open?: bool, slotProps?: { avatar?: object, avatarIconButton?: object, moreIconButton?: object }, slots?: { avatar?: elementType, avatarIconButton?: elementType, moreIconButton?: elementType }, sx?: Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object, variant?: 'condensed'<br>&#124;&nbsp;'expanded' }, signInButton?: object, signOutButton?: object }"
       }
     },
     "slots": {

docs/translations/api-docs/account-preview/account-preview.json

@@ -5,6 +5,9 @@
     "open": { "description": "The state of the Account popover" },
     "slotProps": { "description": "The props used for each slot inside." },
     "slots": { "description": "The components used for each slot inside." },
+    "sx": {
+      "description": "To override the default <code>sx</code> value on the <code>Stack</code> component in the &quot;expanded&quot; variant"
+    },
     "variant": { "description": "The type of account details to display." }
   },
   "classDescriptions": {},

packages/toolpad-core/src/Account/Account.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import Button from '@mui/material/Button';
-import Popover from '@mui/material/Popover';
+import Button, { ButtonProps } from '@mui/material/Button';
+import Popover, { PopoverProps } from '@mui/material/Popover';
 import Divider from '@mui/material/Divider';
-import Stack from '@mui/material/Stack';
+import Stack, { StackProps } from '@mui/material/Stack';
 import { SignInButton } from './SignInButton';
 import { SignOutButton } from './SignOutButton';
 import { AccountPreview, AccountPreviewProps } from './AccountPreview';
@@ -17,27 +17,27 @@ export interface AccountSlots {
    * The component used for the account preview
    * @default AccountPreview
    */
-  preview?: React.ElementType;
+  preview?: React.JSXElementConstructor<AccountPreviewProps>;
   /**
    * The component used for the account popover menu
    * @default Popover
    */
-  popover?: React.ElementType;
+  popover?: React.JSXElementConstructor<PopoverProps>;
   /**
    * The component used for the content of account popover
    * @default Stack
    */
-  popoverContent?: React.ElementType;
+  popoverContent?: React.JSXElementConstructor<StackProps>;
   /**
    * The component used for the sign in button.
    * @default Button
    */
-  signInButton?: React.ElementType;
+  signInButton?: React.JSXElementConstructor<ButtonProps>;
   /**
    * The component used for the sign out button.
    * @default Button
    */
-  signOutButton?: React.ElementType;
+  signOutButton?: React.JSXElementConstructor<ButtonProps>;
 }
 
 export interface AccountProps {
@@ -50,7 +50,7 @@ export interface AccountProps {
    */
   slotProps?: {
     preview?: AccountPreviewProps;
-    popover?: React.ComponentProps<typeof Popover>;
+    popover?: Omit<React.ComponentProps<typeof Popover>, 'open'>;
     popoverContent?: React.ComponentProps<typeof Stack>;
     signInButton?: React.ComponentProps<typeof SignInButton>;
     signOutButton?: React.ComponentProps<typeof Button>;
@@ -118,14 +118,20 @@ function Account(props: AccountProps) {
         />
       )}
       {slots?.popover ? (
-        <slots.popover {...slotProps?.popover} />
+        <slots.popover
+          open={open}
+          onClick={handleClick}
+          onClose={handleClose}
+          {...slotProps?.popover}
+        />
       ) : (
         <Popover
           anchorEl={anchorEl}
           id="account-menu"
           open={open}
           onClose={handleClose}
           onClick={handleClose}
+          disableAutoFocus
           transformOrigin={{ horizontal: 'right', vertical: 'top' }}
           anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
           {...slotProps?.popover}
@@ -134,7 +140,8 @@ function Account(props: AccountProps) {
               elevation: 0,
               sx: {
                 overflow: 'visible',
-                filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
+                filter: (theme) =>
+                  `drop-shadow(0px 2px 8px ${theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.32)'})`,
                 mt: 1,
                 '&::before': {
                   content: '""',
@@ -204,6 +211,11 @@ Account.propTypes /* remove-proptypes */ = {
         avatarIconButton: PropTypes.elementType,
         moreIconButton: PropTypes.elementType,
       }),
+      sx: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
+        PropTypes.func,
+        PropTypes.object,
+      ]),
       variant: PropTypes.oneOf(['condensed', 'expanded']),
     }),
     signInButton: PropTypes.object,

packages/toolpad-core/src/Account/AccountPreview.tsx

@@ -8,6 +8,7 @@ import IconButton, { IconButtonProps } from '@mui/material/IconButton';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { SessionContext } from '../AppProvider';
 import { useLocaleText } from '../shared/locales/LocaleContext';
+import type { SxProps } from '@mui/material/styles';
 
 export type AccountPreviewVariant = 'condensed' | 'expanded';
 
@@ -58,6 +59,10 @@ export interface AccountPreviewProps {
    * @default false
    */
   open?: boolean;
+  /**
+   * To override the default `sx` value on the `Stack` component in the "expanded" variant
+   */
+  sx?: SxProps;
 }
 
 /**
@@ -72,7 +77,7 @@ export interface AccountPreviewProps {
  * - [AccountPreview API](https://mui.com/toolpad/core/api/account-preview)
  */
 function AccountPreview(props: AccountPreviewProps) {
-  const { slots, variant = 'condensed', slotProps, open, handleClick } = props;
+  const { slots, variant = 'condensed', slotProps, open, handleClick, sx } = props;
   const session = React.useContext(SessionContext);
   const localeText = useLocaleText();
 
@@ -93,7 +98,7 @@ function AccountPreview(props: AccountPreviewProps) {
 
   if (variant === 'expanded') {
     return (
-      <Stack direction="row" justifyContent="space-between" spacing={2} padding={2}>
+      <Stack direction="row" justifyContent="space-between" sx={{ py: 1, px: 2, gap: 2, ...sx }}>
         <Stack direction="row" justifyContent="flex-start" spacing={2}>
           {avatarContent}
           <Stack direction="column" justifyContent="space-evenly">
@@ -113,7 +118,7 @@ function AccountPreview(props: AccountPreviewProps) {
               size="small"
               onClick={handleClick}
               {...slotProps?.moreIconButton}
-              sx={{ alignSelf: 'flex-start', ...slotProps?.moreIconButton?.sx }}
+              sx={{ alignSelf: 'center', ...slotProps?.moreIconButton?.sx }}
             >
               <MoreVertIcon fontSize="small" />
             </IconButton>
@@ -131,6 +136,7 @@ function AccountPreview(props: AccountPreviewProps) {
           onClick={handleClick}
           aria-label={localeText.iconButtonAriaLabel || 'Current User'}
           size="small"
+          sx={{ width: 'fit-content', margin: '0 auto' }}
           aria-controls={open ? 'account-menu' : undefined}
           aria-haspopup="true"
           aria-expanded={open ? 'true' : undefined}
@@ -170,7 +176,17 @@ AccountPreview.propTypes /* remove-proptypes */ = {
    */
   slots: PropTypes.shape({
     avatar: PropTypes.elementType,
+    avatarIconButton: PropTypes.elementType,
+    moreIconButton: PropTypes.elementType,
   }),
+  /**
+   * To override the default `sx` value on the `Stack` component in the "expanded" variant
+   */
+  sx: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
+    PropTypes.func,
+    PropTypes.object,
+  ]),
   /**
    * The type of account details to display.
    * @property {'condensed'} condensed - Shows only the user's avatar.

packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx

@@ -66,7 +66,7 @@ export interface DashboardLayoutSlots {
    * Optional footer component used in the layout sidebar.
    * @default null
    */
-  sidebarFooter?: React.ElementType;
+  sidebarFooter?: React.JSXElementConstructor<SidebarFooterProps>;
 }
 
 export interface DashboardLayoutProps {