[core] Add toolbarActions and toolbarAccount slots to DashboardLayout

docs/pages/toolpad/core/api/dashboard-layout.json

@@ -1,10 +1,29 @@
 {
-  "props": { "children": { "type": { "name": "node" }, "required": true } },
+  "props": {
+    "children": { "type": { "name": "node" }, "required": true },
+    "slotProps": {
+      "type": { "name": "shape", "description": "{ toolbarActions?: object }" },
+      "default": "{}"
+    },
+    "slots": {
+      "type": { "name": "shape", "description": "{ toolbarActions?: elementType }" },
+      "default": "{}",
+      "additionalInfo": { "slotsApi": true }
+    }
+  },
   "name": "DashboardLayout",
   "imports": [
     "import { DashboardLayout } from '@toolpad/core/DashboardLayout';",
     "import { DashboardLayout } from '@toolpad/core';"
   ],
+  "slots": [
+    {
+      "name": "toolbarActions",
+      "description": "The toolbar actions component used in the layout header.",
+      "default": "ToolbarActions",
+      "class": null
+    }
+  ],
   "classes": [],
   "spread": true,
   "themeDefaultProps": null,

docs/pages/toolpad/core/api/sign-in-page.json

@@ -33,6 +33,38 @@
     "import { SignInPage } from '@toolpad/core/SignInPage';",
     "import { SignInPage } from '@toolpad/core';"
   ],
+  "slots": [
+    {
+      "name": "emailField",
+      "description": "The custom email field component used in the credentials form.",
+      "default": "TextField",
+      "class": null
+    },
+    {
+      "name": "passwordField",
+      "description": "The custom password field component used in the credentials form.",
+      "default": "TextField",
+      "class": null
+    },
+    {
+      "name": "submitButton",
+      "description": "The custom submit button component used in the credentials form.",
+      "default": "LoadingButton",
+      "class": null
+    },
+    {
+      "name": "forgotPasswordLink",
+      "description": "The custom forgot password link component used in the credentials form.",
+      "default": "Link",
+      "class": null
+    },
+    {
+      "name": "signUpLink",
+      "description": "The custom sign up link component used in the credentials form.",
+      "default": "Link",
+      "class": null
+    }
+  ],
   "classes": [],
   "spread": true,
   "themeDefaultProps": false,

docs/translations/api-docs/dashboard-layout/dashboard-layout.json

@@ -1,5 +1,12 @@
 {
   "componentDescription": "",
-  "propDescriptions": { "children": { "description": "The content of the dashboard." } },
-  "classDescriptions": {}
+  "propDescriptions": {
+    "children": { "description": "The content of the dashboard." },
+    "slotProps": { "description": "The props used for each slot inside." },
+    "slots": { "description": "The components used for each slot inside." }
+  },
+  "classDescriptions": {},
+  "slotDescriptions": {
+    "toolbarActions": "The toolbar actions component used in the layout header."
+  }
 }

docs/translations/api-docs/sign-in-page/sign-in-page.json

@@ -13,5 +13,12 @@
     "slotProps": { "description": "The props used for each slot inside." },
     "slots": { "description": "The components used for each slot inside." }
   },
-  "classDescriptions": {}
+  "classDescriptions": {},
+  "slotDescriptions": {
+    "emailField": "The custom email field component used in the credentials form.",
+    "forgotPasswordLink": "The custom forgot password link component used in the credentials form.",
+    "passwordField": "The custom password field component used in the credentials form.",
+    "signUpLink": "The custom sign up link component used in the credentials form.",
+    "submitButton": "The custom submit button component used in the credentials form."
+  }
 }

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

@@ -70,10 +70,10 @@ export interface Authentication {
   signOut: () => void;
 }
 
-export const SessionContext = React.createContext<Session | null>(null);
-
 export const AuthenticationContext = React.createContext<Authentication | null>(null);
 
+export const SessionContext = React.createContext<Session | null>(null);
+
 export type AppTheme = Theme | { light: Theme; dark: Theme };
 
 export interface AppProviderProps {

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

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { styled, useTheme } from '@mui/material';
+import { styled } from '@mui/material';
 import MuiAppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import Collapse from '@mui/material/Collapse';
@@ -19,23 +19,20 @@ import Toolbar from '@mui/material/Toolbar';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import type {} from '@mui/material/themeCssVarsAugmentation';
-import DarkModeIcon from '@mui/icons-material/DarkMode';
-import LightModeIcon from '@mui/icons-material/LightMode';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import MenuIcon from '@mui/icons-material/Menu';
 import MenuOpenIcon from '@mui/icons-material/MenuOpen';
-import useSsr from '@toolpad/utils/hooks/useSsr';
-import { Account } from '../Account';
 import { Link } from '../shared/Link';
 import {
   BrandingContext,
   NavigationContext,
-  PaletteModeContext,
   RouterContext,
   WindowContext,
 } from '../shared/context';
 import type { Navigation } from '../AppProvider';
+import { ThemeSwitcher } from './ThemeSwitcher';
+import { ToolbarActions } from './ToolbarActions';
 import { ToolpadLogo } from './ToolpadLogo';
 import {
   getItemTitle,
@@ -86,65 +83,6 @@ const NavigationListItemButton = styled(ListItemButton)(({ theme }) => ({
   },
 }));
 
-function ThemeSwitcher() {
-  const isSsr = useSsr();
-  const theme = useTheme();
-
-  const { paletteMode, setPaletteMode, isDualTheme } = React.useContext(PaletteModeContext);
-
-  const toggleMode = React.useCallback(() => {
-    setPaletteMode(paletteMode === 'dark' ? 'light' : 'dark');
-  }, [paletteMode, setPaletteMode]);
-
-  return isDualTheme ? (
-    <Tooltip
-      title={isSsr ? 'Switch mode' : `${paletteMode === 'dark' ? 'Light' : 'Dark'} mode`}
-      enterDelay={1000}
-    >
-      <div>
-        <IconButton
-          aria-label={
-            isSsr
-              ? 'Switch theme mode'
-              : `Switch to ${paletteMode === 'dark' ? 'light' : 'dark'} mode`
-          }
-          onClick={toggleMode}
-          sx={{
-            color: (theme.vars ?? theme).palette.primary.dark,
-            padding: 1,
-            marginRight: 1,
-          }}
-        >
-          {theme.getColorSchemeSelector ? (
-            <React.Fragment>
-              <DarkModeIcon
-                sx={{
-                  display: 'inline',
-                  [theme.getColorSchemeSelector('dark')]: {
-                    display: 'none',
-                  },
-                }}
-              />
-              <LightModeIcon
-                sx={{
-                  display: 'none',
-                  [theme.getColorSchemeSelector('dark')]: {
-                    display: 'inline',
-                  },
-                }}
-              />
-            </React.Fragment>
-          ) : (
-            <React.Fragment>
-              {isSsr || paletteMode !== 'dark' ? <DarkModeIcon /> : <LightModeIcon />}
-            </React.Fragment>
-          )}
-        </IconButton>
-      </div>
-    </Tooltip>
-  ) : null;
-}
-
 interface DashboardSidebarSubNavigationProps {
   subNavigation: Navigation;
   basePath?: string;
@@ -313,11 +251,31 @@ function DashboardSidebarSubNavigation({
   );
 }
 
+export interface DashboardLayoutSlots {
+  /**
+   * The toolbar actions component used in the layout header.
+   * @default ToolbarActions
+   */
+  toolbarActions?: React.JSXElementConstructor<{}>;
+}
+
 export interface DashboardLayoutProps {
   /**
    * The content of the dashboard.
    */
   children: React.ReactNode;
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots?: DashboardLayoutSlots;
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps?: {
+    toolbarActions?: {};
+  };
 }
 
 /**
@@ -331,7 +289,7 @@ export interface DashboardLayoutProps {
  * - [DashboardLayout API](https://mui.com/toolpad/core/api/dashboard-layout)
  */
 function DashboardLayout(props: DashboardLayoutProps) {
-  const { children } = props;
+  const { children, slots, slotProps } = props;
 
   const branding = React.useContext(BrandingContext);
   const navigation = React.useContext(NavigationContext);
@@ -429,7 +387,11 @@ function DashboardLayout(props: DashboardLayoutProps) {
           </Box>
           <Box sx={{ flexGrow: 1 }} />
           <ThemeSwitcher />
-          <Account />
+          {slots?.toolbarActions ? (
+            <slots.toolbarActions {...slotProps?.toolbarActions} />
+          ) : (
+            <ToolbarActions {...slotProps?.toolbarActions} />
+          )}
         </Toolbar>
       </AppBar>
       <Drawer
@@ -493,6 +455,20 @@ DashboardLayout.propTypes /* remove-proptypes */ = {
    * The content of the dashboard.
    */
   children: PropTypes.node,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    toolbarActions: PropTypes.object,
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    toolbarActions: PropTypes.elementType,
+  }),
 } as any;
 
 export { DashboardLayout };

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

@@ -0,0 +1,73 @@
+'use client';
+import * as React from 'react';
+import { useTheme } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import DarkModeIcon from '@mui/icons-material/DarkMode';
+import LightModeIcon from '@mui/icons-material/LightMode';
+import useSsr from '@toolpad/utils/hooks/useSsr';
+import { PaletteModeContext } from '../shared/context';
+
+/**
+ * @ignore - internal component.
+ */
+function ThemeSwitcher() {
+  const isSsr = useSsr();
+  const theme = useTheme();
+
+  const { paletteMode, setPaletteMode, isDualTheme } = React.useContext(PaletteModeContext);
+
+  const toggleMode = React.useCallback(() => {
+    setPaletteMode(paletteMode === 'dark' ? 'light' : 'dark');
+  }, [paletteMode, setPaletteMode]);
+
+  return isDualTheme ? (
+    <Tooltip
+      title={isSsr ? 'Switch mode' : `${paletteMode === 'dark' ? 'Light' : 'Dark'} mode`}
+      enterDelay={1000}
+    >
+      <div>
+        <IconButton
+          aria-label={
+            isSsr
+              ? 'Switch theme mode'
+              : `Switch to ${paletteMode === 'dark' ? 'light' : 'dark'} mode`
+          }
+          onClick={toggleMode}
+          sx={{
+            color: (theme.vars ?? theme).palette.primary.dark,
+            padding: 1,
+            marginRight: 1,
+          }}
+        >
+          {theme.getColorSchemeSelector ? (
+            <React.Fragment>
+              <DarkModeIcon
+                sx={{
+                  display: 'inline',
+                  [theme.getColorSchemeSelector('dark')]: {
+                    display: 'none',
+                  },
+                }}
+              />
+              <LightModeIcon
+                sx={{
+                  display: 'none',
+                  [theme.getColorSchemeSelector('dark')]: {
+                    display: 'inline',
+                  },
+                }}
+              />
+            </React.Fragment>
+          ) : (
+            <React.Fragment>
+              {isSsr || paletteMode !== 'dark' ? <DarkModeIcon /> : <LightModeIcon />}
+            </React.Fragment>
+          )}
+        </IconButton>
+      </div>
+    </Tooltip>
+  ) : null;
+}
+
+export { ThemeSwitcher };

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

@@ -0,0 +1,12 @@
+'use client';
+import * as React from 'react';
+import { Account } from '../Account';
+
+/**
+ * @ignore - internal component.
+ */
+function ToolbarActions() {
+  return <Account />;
+}
+
+export { ToolbarActions };

packages/toolpad-core/src/DashboardLayout/index.ts

@@ -1 +1,4 @@
 export * from './DashboardLayout';
+
+// Default slots components
+export * from './ToolbarActions';