@etsoo/toolpad 1.0.0 → 1.0.2

package/README.md

@@ -1,6 +1,6 @@
 ## Toolpad
 
-It's a project originally cloned from Toolpad Core (https://github.com/mui/toolpad/tree/master/packages/toolpad-core).Toolpad Core is a set of full-stack components for building dashboards, internal tools, and B2B web applications with React. Additional simplicity and new features have been implemented for ETSOO SmartERP SaaS platform development.
+It's a project originally cloned from Toolpad Core (https://github.com/mui/toolpad/tree/master/packages/toolpad-core). Toolpad Core is a set of full-stack components for building dashboards, internal tools, and B2B web applications with React. Additional simplicity and new features have been implemented for ETSOO SmartERP SaaS platform development.
 
 ## Installation
 

package/build/src/Account/Account.d.ts

@@ -4,7 +4,6 @@ import Popover from "@mui/material/Popover";
 import Stack from "@mui/material/Stack";
 import { SignInButton } from "./SignInButton";
 import { AccountPreviewProps } from "./AccountPreview";
-import { useLocaleText } from "../shared/locales/LocaleContext";
 export interface AccountSlots {
     /**
      * The component used for the account preview
@@ -47,10 +46,6 @@ export interface AccountProps {
         signInButton?: React.ComponentProps<typeof SignInButton>;
         signOutButton?: React.ComponentProps<typeof Button>;
     };
-    /**
-     * The labels for the account component.
-     */
-    localeText?: Partial<ReturnType<typeof useLocaleText>>;
 }
 /**
  *

package/build/src/Account/Account.js

@@ -10,7 +10,6 @@ import { AccountPreview } from "./AccountPreview";
 import { AccountPopoverHeader } from "./AccountPopoverHeader";
 import { AccountPopoverFooter } from "./AccountPopoverFooter";
 import { SessionContext, AuthenticationContext } from "../AppProvider/AppProvider";
-import { LocaleProvider } from "../shared/locales/LocaleContext";
 /**
  *
  * Demos:
@@ -24,7 +23,6 @@ import { LocaleProvider } from "../shared/locales/LocaleContext";
  * - [Account API](https://mui.com/toolpad/core/api/account)
  */
 function Account(props) {
-    const { localeText } = props;
     const { slots, slotProps } = props;
     const [anchorEl, setAnchorEl] = React.useState(null);
     const session = React.useContext(SessionContext);
@@ -40,9 +38,9 @@ function Account(props) {
         return null;
     }
     if (!session?.user) {
-        return (_jsx(LocaleProvider, { localeText: localeText, children: slots?.signInButton ? (_jsx(slots.signInButton, { onClick: authentication.signIn })) : (_jsx(SignInButton, { ...slotProps?.signInButton })) }));
+        return slots?.signInButton ? (_jsx(slots.signInButton, { onClick: authentication.signIn })) : (_jsx(SignInButton, { ...slotProps?.signInButton }));
     }
-    return (_jsxs(LocaleProvider, { localeText: localeText, children: [slots?.preview ? (_jsx(slots.preview, { handleClick: handleClick, open: open })) : (_jsx(AccountPreview, { variant: "condensed", handleClick: handleClick, open: open, ...slotProps?.preview })), slots?.popover ? (_jsx(slots.popover, { ...slotProps?.popover })) : (_jsx(Popover, { anchorEl: anchorEl, id: "account-menu", open: open, onClose: handleClose, onClick: handleClose, transformOrigin: { horizontal: "right", vertical: "top" }, anchorOrigin: { horizontal: "right", vertical: "bottom" }, ...slotProps?.popover, slotProps: {
+    return (_jsxs(React.Fragment, { children: [slots?.preview ? (_jsx(slots.preview, { handleClick: handleClick, open: open })) : (_jsx(AccountPreview, { variant: "condensed", handleClick: handleClick, open: open, ...slotProps?.preview })), slots?.popover ? (_jsx(slots.popover, { ...slotProps?.popover })) : (_jsx(Popover, { anchorEl: anchorEl, id: "account-menu", open: open, onClose: handleClose, onClick: handleClose, transformOrigin: { horizontal: "right", vertical: "top" }, anchorOrigin: { horizontal: "right", vertical: "bottom" }, ...slotProps?.popover, slotProps: {
                     paper: {
                         elevation: 0,
                         sx: {
@@ -71,14 +69,6 @@ Account.propTypes /* remove-proptypes */ = {
     // │ These PropTypes are generated from the TypeScript type definitions. │
     // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
     // └─────────────────────────────────────────────────────────────────────┘
-    /**
-     * The labels for the account component.
-     */
-    localeText: PropTypes.shape({
-        iconButtonAriaLabel: PropTypes.string,
-        signInLabel: PropTypes.string,
-        signOutLabel: PropTypes.string
-    }),
     /**
      * The props used for each slot inside.
      */

package/build/src/Account/AccountPreview.js

@@ -9,6 +9,25 @@ import IconButton from "@mui/material/IconButton";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
 import { SessionContext } from "../AppProvider";
 import { useLocaleText } from "../shared/locales/LocaleContext";
+function formatNameInitials(user) {
+    if (user == null)
+        return null;
+    const name = user.latinName || user.name;
+    if (name == null)
+        return null;
+    const chars = name
+        .trim()
+        .split(/\s+/g)
+        .map((part) => {
+        const firstChar = part.charAt(0).toUpperCase();
+        return firstChar >= "A" && firstChar <= "Z" ? firstChar : "";
+    })
+        .filter((c) => c)
+        .slice(-2);
+    if (chars.length === 0)
+        return null;
+    return chars.join("");
+}
 /**
  * The AccountPreview component displays user account information.
  *
@@ -30,12 +49,12 @@ function AccountPreview(props) {
     const avatarContent = slots?.avatar ? (_jsx(slots.avatar, {})) : (_jsx(Avatar, { src: session.user?.image || "", alt: session.user?.name || session.user?.email || "", sx: {
             height: variant === "expanded" ? 48 : 32,
             width: variant === "expanded" ? 48 : 32
-        }, ...slotProps?.avatar }));
+        }, ...slotProps?.avatar, children: session.user?.image ? null : formatNameInitials(session.user) }));
     if (variant === "expanded") {
         return (_jsxs(Stack, { direction: "row", justifyContent: "flex-start", spacing: 2, padding: 2, children: [avatarContent, _jsxs(Stack, { direction: "column", justifyContent: "space-evenly", children: [_jsx(Typography, { variant: "body2", fontWeight: "bolder", noWrap: true, children: session.user?.name }), _jsx(Typography, { variant: "caption", noWrap: true, children: session.user?.email })] }), handleClick &&
                     (slots?.moreIconButton ? (_jsx(slots.moreIconButton, {})) : (_jsx(IconButton, { size: "small", onClick: handleClick, ...slotProps?.moreIconButton, sx: { alignSelf: "flex-start", ...slotProps?.moreIconButton?.sx }, children: _jsx(MoreVertIcon, { fontSize: "small" }) })))] }));
     }
-    return (_jsx(Tooltip, { title: session.user.name ?? "Account", children: slots?.avatarIconButton ? (_jsx(slots.avatarIconButton, {})) : (_jsx(IconButton, { onClick: handleClick, "aria-label": localeText.iconButtonAriaLabel || "Current User", size: "small", "aria-controls": open ? "account-menu" : undefined, "aria-haspopup": "true", "aria-expanded": open ? "true" : undefined, ...slotProps?.avatarIconButton, children: avatarContent })) }));
+    return (_jsx(Tooltip, { title: session.user.name ?? "Account", children: slots?.avatarIconButton ? (_jsx(slots.avatarIconButton, {})) : (_jsx(IconButton, { onClick: handleClick, "aria-label": localeText.accountIconButtonAriaLabel, size: "small", "aria-controls": open ? "account-menu" : undefined, "aria-haspopup": "true", "aria-expanded": open ? "true" : undefined, ...slotProps?.avatarIconButton, children: avatarContent })) }));
 }
 AccountPreview.propTypes /* remove-proptypes */ = {
     // ┌────────────────────────────── Warning ──────────────────────────────┐

package/build/src/Account/SignInButton.js

@@ -22,5 +22,5 @@ export /**
             "&:hover": {
                 filter: "opacity(1)"
             }
-        }, ...props, children: localeText?.signInLabel || "Sign In" }));
+        }, ...props, children: localeText.signInLabel }));
 }

package/build/src/AppProvider/AppProvider.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { Theme } from "@mui/material/styles";
+import { LocaleContextType } from "../shared/locales/LocaleContext";
 export interface NavigateOptions {
     history?: "auto" | "push" | "replace";
 }
@@ -40,6 +41,7 @@ export interface Session {
     user?: {
         id?: string | null;
         name?: string | null;
+        latinName?: string | null;
         image?: string | null;
         email?: string | null;
     };
@@ -69,6 +71,10 @@ export interface AppProviderProps {
      * @default null
      */
     branding?: Branding | null;
+    /**
+     * The labels for the component.
+     */
+    localeText?: Partial<LocaleContextType>;
     /**
      * Navigation definition for the app.
      * @default []

package/build/src/AppProvider/AppProviderComponent.js

@@ -5,6 +5,7 @@ import { BrandingContext, NavigationContext, RouterContext, WindowContext } from
 import { AppThemeProvider } from "./AppThemeProvider";
 import { createTheme as createMuiTheme } from "@mui/material/styles";
 import { AuthenticationContext, SessionContext } from "./AppProvider";
+import { LocaleProvider } from "../shared/locales/LocaleContext";
 function createTheme() {
     return createMuiTheme({
         cssVariables: {
@@ -25,8 +26,8 @@ function createTheme() {
  * - [AppProvider API](https://mui.com/toolpad/core/api/app-provider)
  */
 function AppProvider(props) {
-    const { children, theme = createTheme(), branding = null, navigation = [], router = null, authentication = null, session = null, window: appWindow } = props;
-    return (_jsx(WindowContext.Provider, { value: appWindow, children: _jsx(AuthenticationContext.Provider, { value: authentication, children: _jsx(SessionContext.Provider, { value: session, children: _jsx(RouterContext.Provider, { value: router, children: _jsx(AppThemeProvider, { theme: theme, window: appWindow, children: _jsx(BrandingContext.Provider, { value: branding, children: _jsx(NavigationContext.Provider, { value: navigation, children: children }) }) }) }) }) }) }));
+    const { children, theme = createTheme(), branding = null, localeText, navigation = [], router = null, authentication = null, session = null, window: appWindow } = props;
+    return (_jsx(WindowContext.Provider, { value: appWindow, children: _jsx(AuthenticationContext.Provider, { value: authentication, children: _jsx(SessionContext.Provider, { value: session, children: _jsx(RouterContext.Provider, { value: router, children: _jsx(AppThemeProvider, { theme: theme, window: appWindow, children: _jsx(LocaleProvider, { localeText: localeText, children: _jsx(BrandingContext.Provider, { value: branding, children: _jsx(NavigationContext.Provider, { value: navigation, children: children }) }) }) }) }) }) }) }));
 }
 AppProvider.propTypes /* remove-proptypes */ = {
     // ┌────────────────────────────── Warning ──────────────────────────────┐

package/build/src/DashboardLayout/DashboardLayout.d.ts

@@ -5,11 +5,17 @@ export interface SidebarFooterProps {
     mini: boolean;
 }
 export interface DashboardLayoutSlotProps {
+    titlebar?: {};
     toolbarActions?: {};
     toolbarAccount?: AccountProps;
     sidebarFooter?: SidebarFooterProps;
 }
 export interface DashboardLayoutSlots {
+    /**
+     * The title bar component used in the layout header.
+     * @default TitleBar
+     */
+    titlebar?: React.JSXElementConstructor<{}>;
     /**
      * The toolbar actions component used in the layout header.
      * @default ToolbarActions
@@ -46,6 +52,11 @@ export interface DashboardLayoutProps {
      * @default false
      */
     hideNavigation?: boolean;
+    /**
+     * Whether the theme switcher should be shown in the toolbar.
+     * @default false
+     */
+    showThemeSwitcher?: boolean;
     /**
      * Width of the sidebar when expanded.
      * @default 320

package/build/src/DashboardLayout/DashboardLayout.js

@@ -10,18 +10,17 @@ import IconButton from "@mui/material/IconButton";
 import Stack from "@mui/material/Stack";
 import Toolbar from "@mui/material/Toolbar";
 import Tooltip from "@mui/material/Tooltip";
-import Typography from "@mui/material/Typography";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import MenuIcon from "@mui/icons-material/Menu";
 import MenuOpenIcon from "@mui/icons-material/MenuOpen";
-import { Link } from "../shared/Link";
-import { BrandingContext, NavigationContext, WindowContext } from "../shared/context";
+import { NavigationContext, WindowContext } from "../shared/context";
 import { Account } from "../Account";
-import { useApplicationTitle } from "../shared/branding";
 import { DashboardSidebarSubNavigation } from "./DashboardSidebarSubNavigation";
 import { ToolbarActions } from "./ToolbarActions";
 import { ThemeSwitcher } from "./ThemeSwitcher";
 import { getDrawerSxTransitionMixin, getDrawerWidthTransitionMixin } from "./utils";
+import { TitleBar } from "./TitleBar";
+import { useLocaleText } from "../shared/locales/LocaleContext";
 const AppBar = styled(MuiAppBar)(({ theme }) => ({
     borderWidth: 0,
     borderBottomWidth: 1,
@@ -30,13 +29,6 @@ const AppBar = styled(MuiAppBar)(({ theme }) => ({
     boxShadow: "none",
     zIndex: theme.zIndex.drawer + 1
 }));
-const LogoContainer = styled("div")({
-    position: "relative",
-    height: 40,
-    "& img": {
-        maxHeight: 40
-    }
-});
 /**
  *
  * Demos:
@@ -48,12 +40,11 @@ const LogoContainer = styled("div")({
  * - [DashboardLayout API](https://mui.com/toolpad/core/api/dashboard-layout)
  */
 function DashboardLayout(props) {
-    const { children, disableCollapsibleSidebar = false, defaultSidebarCollapsed = false, hideNavigation = false, sidebarExpandedWidth = 320, slots, slotProps, sx } = props;
+    const { children, disableCollapsibleSidebar = false, defaultSidebarCollapsed = false, hideNavigation = false, showThemeSwitcher = false, sidebarExpandedWidth = 320, slots, slotProps, sx } = props;
     const theme = useTheme();
-    const branding = React.useContext(BrandingContext);
     const navigation = React.useContext(NavigationContext);
     const appWindow = React.useContext(WindowContext);
-    const applicationTitle = useApplicationTitle();
+    const localeText = useLocaleText();
     const [isDesktopNavigationExpanded, setIsDesktopNavigationExpanded] = React.useState(!defaultSidebarCollapsed);
     const [isMobileNavigationExpanded, setIsMobileNavigationExpanded] = React.useState(false);
     const isUnderMdViewport = useMediaQuery(theme.breakpoints.down("md"), appWindow && {
@@ -104,11 +95,14 @@ function DashboardLayout(props) {
     const isDesktopMini = !disableCollapsibleSidebar && !isDesktopNavigationExpanded;
     const isMobileMini = !disableCollapsibleSidebar && !isMobileNavigationExpanded;
     const getMenuIcon = React.useCallback((isExpanded) => {
-        const expandMenuActionText = "Expand";
-        const collapseMenuActionText = "Collapse";
-        return (_jsx(Tooltip, { title: `${isExpanded ? collapseMenuActionText : expandMenuActionText} menu`, enterDelay: 1000, children: _jsx("div", { children: _jsx(IconButton, { "aria-label": `${isExpanded ? collapseMenuActionText : expandMenuActionText} navigation menu`, onClick: toggleNavigationExpanded, children: isExpanded ? _jsx(MenuOpenIcon, {}) : _jsx(MenuIcon, {}) }) }) }));
+        return (_jsx(Tooltip, { title: isExpanded
+                ? localeText.collapseMenuTitle
+                : localeText.expandMenuTitle, enterDelay: 1000, children: _jsx("div", { children: _jsx(IconButton, { "aria-label": isExpanded
+                        ? localeText.collapseNavMenuAriaLabel
+                        : localeText.expandNavMenuAriaLabel, onClick: toggleNavigationExpanded, children: isExpanded ? _jsx(MenuOpenIcon, {}) : _jsx(MenuIcon, {}) }) }) }));
     }, [toggleNavigationExpanded]);
     const hasDrawerTransitions = isOverSmViewport && (disableCollapsibleSidebar || !isUnderMdViewport);
+    const TitlebarSlot = slots?.titlebar ?? TitleBar;
     const ToolbarActionsSlot = slots?.toolbarActions ?? ToolbarActions;
     const ToolbarAccountSlot = slots?.toolbarAccount ?? Account;
     const SidebarFooterSlot = slots?.sidebarFooter ?? null;
@@ -167,12 +161,7 @@ function DashboardLayout(props) {
                                 position: { xs: "absolute", md: "static" },
                                 left: { xs: "50%", md: "auto" },
                                 transform: { xs: "translateX(-50%)", md: "none" }
-                            }, children: _jsx(Link, { href: "/", style: { color: "inherit", textDecoration: "none" }, children: _jsxs(Stack, { direction: "row", alignItems: "center", children: [branding?.logo && (_jsx(LogoContainer, { children: branding.logo })), _jsx(Typography, { variant: "h6", sx: {
-                                                color: (theme.vars ?? theme).palette.primary.main,
-                                                fontWeight: "700",
-                                                ml: 0.5,
-                                                whiteSpace: "nowrap"
-                                            }, children: applicationTitle })] }) }) }), _jsx(Box, { sx: { flexGrow: 1 } }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(ToolbarActionsSlot, { ...slotProps?.toolbarActions }), _jsx(ThemeSwitcher, {}), _jsx(ToolbarAccountSlot, { ...slotProps?.toolbarAccount })] })] }) }), !hideNavigation ? (_jsxs(React.Fragment, { children: [_jsx(Drawer, { container: layoutRef.current, variant: "temporary", open: isMobileNavigationExpanded, onClose: handleSetNavigationExpanded(false), ModalProps: {
+                            }, children: _jsx(TitlebarSlot, { ...slotProps?.titlebar }) }), _jsx(Box, { sx: { flexGrow: 1 } }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(ToolbarActionsSlot, { ...slotProps?.toolbarActions }), showThemeSwitcher && _jsx(ThemeSwitcher, {}), _jsx(ToolbarAccountSlot, { ...slotProps?.toolbarAccount })] })] }) }), !hideNavigation ? (_jsxs(React.Fragment, { children: [_jsx(Drawer, { container: layoutRef.current, variant: "temporary", open: isMobileNavigationExpanded, onClose: handleSetNavigationExpanded(false), ModalProps: {
                             keepMounted: true // Better open performance on mobile.
                         }, sx: {
                             display: {

package/build/src/DashboardLayout/DashboardLayout.test.js

@@ -27,7 +27,7 @@ describe("DashboardLayout", () => {
     });
     test("can switch theme", async () => {
         const user = userEvent.setup();
-        render(_jsx(AppProvider, { children: _jsx(DashboardLayout, { children: "Hello world" }) }));
+        render(_jsx(AppProvider, { children: _jsx(DashboardLayout, { showThemeSwitcher: true, children: "Hello world" }) }));
         const getBackgroundColorCSSVariable = () => getComputedStyle(document.documentElement).getPropertyValue("--mui-palette-common-background");
         const header = screen.getByRole("banner");
         const themeSwitcherButton = within(header).getByLabelText("Switch to dark mode");

package/build/src/DashboardLayout/ThemeSwitcher.js

@@ -8,6 +8,7 @@ import DarkModeIcon from "@mui/icons-material/DarkMode";
 import LightModeIcon from "@mui/icons-material/LightMode";
 import { PaletteModeContext } from "../shared/context";
 import useSsr from "../utils/hooks/useSsr";
+import { useLocaleText } from "../shared/locales/LocaleContext";
 // TODO: When we use this component as the default for a slot, make it non-internal
 /**
  * @ignore - internal component.
@@ -15,15 +16,20 @@ import useSsr from "../utils/hooks/useSsr";
 function ThemeSwitcher() {
     const isSsr = useSsr();
     const theme = useTheme();
+    const localeText = useLocaleText();
     const { paletteMode, setPaletteMode, isDualTheme } = React.useContext(PaletteModeContext);
     const toggleMode = React.useCallback(() => {
         setPaletteMode(paletteMode === "dark" ? "light" : "dark");
     }, [paletteMode, setPaletteMode]);
     return isDualTheme ? (_jsx(Tooltip, { title: isSsr
-            ? "Switch mode"
-            : `${paletteMode === "dark" ? "Light" : "Dark"} mode`, enterDelay: 1000, children: _jsx("div", { children: _jsx(IconButton, { "aria-label": isSsr
-                    ? "Switch theme mode"
-                    : `Switch to ${paletteMode === "dark" ? "light" : "dark"} mode`, onClick: toggleMode, sx: {
+            ? localeText.switchModeTitle
+            : paletteMode === "dark"
+                ? localeText.lightModeTitle
+                : localeText.darkModeTitle, enterDelay: 1000, children: _jsx("div", { children: _jsx(IconButton, { "aria-label": isSsr
+                    ? localeText.switchThemeModeAriaLabel
+                    : paletteMode === "dark"
+                        ? localeText.switchToLightModeAriaLabel
+                        : localeText.switchToDarkModeAriaLabel, onClick: toggleMode, sx: {
                     color: (theme.vars ?? theme).palette.primary.dark
                 }, children: theme.getColorSchemeSelector ? (_jsxs(React.Fragment, { children: [_jsx(DarkModeIcon, { sx: {
                                 display: "inline",

package/build/src/DashboardLayout/TitleBar.d.ts

@@ -0,0 +1 @@
+export declare function TitleBar(): import("react/jsx-runtime").JSX.Element;

package/build/src/DashboardLayout/TitleBar.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack, styled, Typography, useTheme } from "@mui/material";
+import { Link } from "../shared/Link";
+import { useApplicationTitle } from "../shared/branding";
+import React from "react";
+import { BrandingContext } from "../shared/context";
+const LogoContainer = styled("div")({
+    position: "relative",
+    height: 40,
+    "& img": {
+        maxHeight: 40
+    }
+});
+export function TitleBar() {
+    // Theme
+    const theme = useTheme();
+    // Application title
+    const applicationTitle = useApplicationTitle();
+    // Branding
+    const branding = React.useContext(BrandingContext);
+    return (_jsx(Link, { href: "/", style: { color: "inherit", textDecoration: "none" }, children: _jsxs(Stack, { direction: "row", alignItems: "center", children: [branding?.logo && _jsx(LogoContainer, { children: branding.logo }), _jsx(Typography, { variant: "h6", sx: {
+                        color: (theme.vars ?? theme).palette.primary.main,
+                        fontWeight: "700",
+                        ml: 0.5,
+                        whiteSpace: "nowrap"
+                    }, children: applicationTitle })] }) }));
+}

package/build/src/PageContainer/PageContainer.d.ts

@@ -35,10 +35,6 @@ export interface PageContainerProps extends ContainerProps {
      * The breadcrumbs of the page. Leave blank to use the active page breadcrumbs.
      */
     breadcrumbs?: Breadcrumb[];
-    /**
-     * @deprecated Use `breadcrumbs` instead.
-     */
-    breadCrumbs?: Breadcrumb[];
     /**
      * The components used for each slot inside.
      */

package/build/src/PageContainer/PageContainer.js

@@ -12,7 +12,6 @@ import { Link as ToolpadLink } from "../shared/Link";
 import { PageContainerToolbar } from "./PageContainerToolbar";
 import { getItemTitle } from "../shared/navigation";
 import { useActivePage } from "../useActivePage";
-import warnOnce from "../utils/warnOnce";
 const PageContentHeader = styled("div")(({ theme }) => ({
     display: "flex",
     flexDirection: "row",
@@ -31,13 +30,10 @@ const PageContentHeader = styled("div")(({ theme }) => ({
  * - [PageContainer API](https://mui.com/toolpad/core/api/page-container)
  */
 function PageContainer(props) {
-    const { children, slots, slotProps, breadcrumbs, breadCrumbs, ...rest } = props;
-    if (process.env.NODE_ENV !== "production" && breadCrumbs) {
-        warnOnce("The PageContainer `breadCrumbs` prop is deprecated. Use `breadcrumbs` instead.");
-    }
+    const { children, slots, slotProps, breadcrumbs, ...rest } = props;
     const activePage = useActivePage();
     // TODO: Remove `props.breadCrumbs` in the next major version
-    const resolvedBreadcrumbs = breadcrumbs ?? breadCrumbs ?? activePage?.breadcrumbs ?? [];
+    const resolvedBreadcrumbs = breadcrumbs ?? activePage?.breadcrumbs ?? [];
     const title = props.title ?? activePage?.title ?? "";
     const ToolbarComponent = props?.slots?.toolbar ?? PageContainerToolbar;
     const toolbarSlotProps = useSlotProps({
@@ -64,13 +60,6 @@ PageContainer.propTypes /* remove-proptypes */ = {
         path: PropTypes.string.isRequired,
         title: PropTypes.string.isRequired
     })),
-    /**
-     * @deprecated Use `breadcrumbs` instead.
-     */
-    breadCrumbs: PropTypes.arrayOf(PropTypes.shape({
-        path: PropTypes.string.isRequired,
-        title: PropTypes.string.isRequired
-    })),
     /**
      * @ignore
      */

package/build/src/PageContainer/PageContainer.test.js

@@ -110,18 +110,4 @@ describe("PageContainer", () => {
         expect(helloLink.getAttribute("href")).toBe("/hello");
         expect(within(breadcrumbs).getByText("World")).toBeTruthy();
     });
-    // TODO: Remove in the next major version
-    test("renders legacy breadcrumbs prop", async () => {
-        vi.spyOn(console, "warn").mockImplementation(() => { });
-        render(_jsx(PageContainer, { breadCrumbs: [
-                { title: "Hello", path: "/hello" },
-                { title: "World", path: "/world" }
-            ] }));
-        const breadcrumbs = screen.getByRole("navigation", { name: "breadcrumb" });
-        const helloLink = within(breadcrumbs).getByRole("link", { name: "Hello" });
-        expect(helloLink.getAttribute("href")).toBe("/hello");
-        expect(within(breadcrumbs).getByText("World")).toBeTruthy();
-        expect(console.warn).toHaveBeenCalledOnce();
-        expect(console.warn).toHaveBeenCalledWith("The PageContainer `breadCrumbs` prop is deprecated. Use `breadcrumbs` instead.");
-    });
 });

package/build/src/shared/locales/LocaleContext.d.ts

@@ -1,10 +1,35 @@
 import * as React from "react";
-export type LocaleContextType = {
-    signInLabel?: string;
-    signOutLabel?: string;
-    iconButtonAriaLabel?: string;
+declare const DEFAULT_LOCALE_TEXT: {
+    signInLabel: string;
+    signOutLabel: string;
+    accountIconButtonAriaLabel: string;
+    expandMenuTitle: string;
+    expandNavMenuAriaLabel: string;
+    collapseMenuTitle: string;
+    collapseNavMenuAriaLabel: string;
+    switchModeTitle: string;
+    darkModeTitle: string;
+    lightModeTitle: string;
+    switchThemeModeAriaLabel: string;
+    switchToDarkModeAriaLabel: string;
+    switchToLightModeAriaLabel: string;
 };
-export declare const LocaleContext: React.Context<LocaleContextType>;
+export type LocaleContextType = typeof DEFAULT_LOCALE_TEXT;
+export declare const LocaleContext: React.Context<{
+    signInLabel: string;
+    signOutLabel: string;
+    accountIconButtonAriaLabel: string;
+    expandMenuTitle: string;
+    expandNavMenuAriaLabel: string;
+    collapseMenuTitle: string;
+    collapseNavMenuAriaLabel: string;
+    switchModeTitle: string;
+    darkModeTitle: string;
+    lightModeTitle: string;
+    switchThemeModeAriaLabel: string;
+    switchToDarkModeAriaLabel: string;
+    switchToLightModeAriaLabel: string;
+}>;
 export interface LocaleProviderProps {
     localeText?: Partial<LocaleContextType>;
     children: React.ReactNode;
@@ -13,7 +38,19 @@ export interface LocaleProviderProps {
  * @ignore - internal component.
  */
 export declare function LocaleProvider({ localeText, children }: LocaleProviderProps): import("react/jsx-runtime").JSX.Element;
-/**
- * @ignore - internal hook.
- */
-export declare function useLocaleText(): LocaleContextType;
+export declare function useLocaleText(): {
+    signInLabel: string;
+    signOutLabel: string;
+    accountIconButtonAriaLabel: string;
+    expandMenuTitle: string;
+    expandNavMenuAriaLabel: string;
+    collapseMenuTitle: string;
+    collapseNavMenuAriaLabel: string;
+    switchModeTitle: string;
+    darkModeTitle: string;
+    lightModeTitle: string;
+    switchThemeModeAriaLabel: string;
+    switchToDarkModeAriaLabel: string;
+    switchToLightModeAriaLabel: string;
+};
+export {};

package/build/src/shared/locales/LocaleContext.js

@@ -1,7 +1,25 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
-import DEFAULT_LOCALE_TEXT from "./en";
+const DEFAULT_LOCALE_TEXT = {
+    // Account
+    signInLabel: "Sign In",
+    signOutLabel: "Sign Out",
+    // Account Preview
+    accountIconButtonAriaLabel: "Current User",
+    // Menu
+    expandMenuTitle: "Expand menu",
+    expandNavMenuAriaLabel: "Expand navigation menu",
+    collapseMenuTitle: "Collapse menu",
+    collapseNavMenuAriaLabel: "Collapse navigation menu",
+    // Theme
+    switchModeTitle: "Switch mode",
+    darkModeTitle: "Dark mode",
+    lightModeTitle: "Light mode",
+    switchThemeModeAriaLabel: "Switch theme mode",
+    switchToDarkModeAriaLabel: "Switch to dark mode",
+    switchToLightModeAriaLabel: "Switch to light mode"
+};
 export const LocaleContext = React.createContext(DEFAULT_LOCALE_TEXT);
 /**
  * @ignore - internal component.
@@ -10,9 +28,6 @@ export function LocaleProvider({ localeText, children }) {
     const mergedLocaleText = React.useMemo(() => ({ ...DEFAULT_LOCALE_TEXT, ...localeText }), [localeText]);
     return (_jsx(LocaleContext.Provider, { value: mergedLocaleText, children: children }));
 }
-/**
- * @ignore - internal hook.
- */
 export function useLocaleText() {
     return React.useContext(LocaleContext);
 }

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@etsoo/toolpad",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "author": "ETSOO",
   "description": "Dashboard framework extention based on Toolpad Core",
   "main": "build/index.js",
-  "type": "module",
   "types": "build/index.d.ts",
   "sideEffects": false,
   "keywords": [
@@ -16,25 +15,25 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ETSOO/toolpad.git"
+    "url": "git+https://github.com/ETSOO/etsoo-toolpad.git"
   },
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/ETSOO/toolpad/issues"
+    "url": "https://github.com/ETSOO/etsoo-toolpad/issues"
   },
-  "homepage": "https://github.com/ETSOO/toolpad#readme",
+  "homepage": "https://github.com/ETSOO/etsoo-toolpad#readme",
   "scripts": {
     "build": "tsc",
     "test": "vitest",
     "testb": "vitest --browser.enabled"
   },
   "dependencies": {
-    "@babel/runtime": "^7.25.7",
+    "@babel/runtime": "^7.26.0",
     "@emotion/css": "^11.13.4",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@mui/lab": "6.0.0-beta.12",
-    "@mui/utils": "6.1.4",
+    "@mui/lab": "6.0.0-beta.13",
+    "@mui/utils": "6.1.5",
     "@vitejs/plugin-react": "4.3.3",
     "invariant": "2.2.4",
     "path-to-regexp": "6.3.0",
@@ -42,19 +41,19 @@
     "react": "^18.3.1"
   },
   "devDependencies": {
-    "@mui/icons-material": "6.1.4",
-    "@mui/material": "6.1.4",
+    "@mui/icons-material": "6.1.5",
+    "@mui/material": "6.1.5",
     "@testing-library/jest-dom": "^6.6.2",
     "@testing-library/react": "^16.0.1",
     "@types/invariant": "2.2.37",
     "@types/prop-types": "15.7.13",
-    "@types/react": "18.3.11",
+    "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
-    "@vitest/browser": "2.1.2",
-    "next": "^14.2.15",
+    "@vitest/browser": "2.1.4",
+    "next": "^15.0.1",
     "next-router-mock": "^0.9.13",
-    "playwright": "^1.47.2",
-    "react-router-dom": "6.26.2",
-    "vitest": "2.1.2"
+    "playwright": "^1.48.2",
+    "react-router-dom": "6.27.0",
+    "vitest": "2.1.4"
   }
 }

package/src/Account/Account.tsx

@@ -13,7 +13,6 @@ import {
   SessionContext,
   AuthenticationContext
 } from "../AppProvider/AppProvider";
-import { LocaleProvider, useLocaleText } from "../shared/locales/LocaleContext";
 
 export interface AccountSlots {
   /**
@@ -58,10 +57,6 @@ export interface AccountProps {
     signInButton?: React.ComponentProps<typeof SignInButton>;
     signOutButton?: React.ComponentProps<typeof Button>;
   };
-  /**
-   * The labels for the account component.
-   */
-  localeText?: Partial<ReturnType<typeof useLocaleText>>;
 }
 /**
  *
@@ -76,7 +71,6 @@ export interface AccountProps {
  * - [Account API](https://mui.com/toolpad/core/api/account)
  */
 function Account(props: AccountProps) {
-  const { localeText } = props;
   const { slots, slotProps } = props;
   const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
   const session = React.useContext(SessionContext);
@@ -96,19 +90,15 @@ function Account(props: AccountProps) {
   }
 
   if (!session?.user) {
-    return (
-      <LocaleProvider localeText={localeText}>
-        {slots?.signInButton ? (
-          <slots.signInButton onClick={authentication.signIn} />
-        ) : (
-          <SignInButton {...slotProps?.signInButton} />
-        )}
-      </LocaleProvider>
+    return slots?.signInButton ? (
+      <slots.signInButton onClick={authentication.signIn} />
+    ) : (
+      <SignInButton {...slotProps?.signInButton} />
     );
   }
 
   return (
-    <LocaleProvider localeText={localeText}>
+    <React.Fragment>
       {slots?.preview ? (
         <slots.preview handleClick={handleClick} open={open} />
       ) : (
@@ -170,7 +160,7 @@ function Account(props: AccountProps) {
           )}
         </Popover>
       )}
-    </LocaleProvider>
+    </React.Fragment>
   );
 }
 
@@ -179,14 +169,6 @@ Account.propTypes /* remove-proptypes */ = {
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
   // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * The labels for the account component.
-   */
-  localeText: PropTypes.shape({
-    iconButtonAriaLabel: PropTypes.string,
-    signInLabel: PropTypes.string,
-    signOutLabel: PropTypes.string
-  }),
   /**
    * The props used for each slot inside.
    */

package/src/Account/AccountPreview.tsx

@@ -6,7 +6,7 @@ import Tooltip from "@mui/material/Tooltip";
 import Stack from "@mui/material/Stack";
 import IconButton, { IconButtonProps } from "@mui/material/IconButton";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
-import { SessionContext } from "../AppProvider";
+import { Session, SessionContext } from "../AppProvider";
 import { useLocaleText } from "../shared/locales/LocaleContext";
 
 export type AccountPreviewVariant = "condensed" | "expanded";
@@ -60,6 +60,27 @@ export interface AccountPreviewProps {
   open?: boolean;
 }
 
+function formatNameInitials(user?: Session["user"]) {
+  if (user == null) return null;
+
+  const name = user.latinName || user.name;
+  if (name == null) return null;
+
+  const chars = name
+    .trim()
+    .split(/\s+/g)
+    .map((part) => {
+      const firstChar = part.charAt(0).toUpperCase();
+      return firstChar >= "A" && firstChar <= "Z" ? firstChar : "";
+    })
+    .filter((c) => c)
+    .slice(-2);
+
+  if (chars.length === 0) return null;
+
+  return chars.join("");
+}
+
 /**
  * The AccountPreview component displays user account information.
  *
@@ -91,7 +112,9 @@ function AccountPreview(props: AccountPreviewProps) {
         width: variant === "expanded" ? 48 : 32
       }}
       {...slotProps?.avatar}
-    />
+    >
+      {session.user?.image ? null : formatNameInitials(session.user)}
+    </Avatar>
   );
 
   if (variant === "expanded") {
@@ -135,7 +158,7 @@ function AccountPreview(props: AccountPreviewProps) {
       ) : (
         <IconButton
           onClick={handleClick}
-          aria-label={localeText.iconButtonAriaLabel || "Current User"}
+          aria-label={localeText.accountIconButtonAriaLabel}
           size="small"
           aria-controls={open ? "account-menu" : undefined}
           aria-haspopup="true"

package/src/Account/SignInButton.tsx

@@ -32,7 +32,7 @@ export /**
       }}
       {...props}
     >
-      {localeText?.signInLabel || "Sign In"}
+      {localeText.signInLabel}
     </Button>
   );
 }

package/src/AppProvider/AppProvider.tsx

@@ -1,6 +1,7 @@
 "use client";
 import * as React from "react";
 import { Theme } from "@mui/material/styles";
+import { LocaleContextType } from "../shared/locales/LocaleContext";
 
 export interface NavigateOptions {
   history?: "auto" | "push" | "replace";
@@ -54,6 +55,7 @@ export interface Session {
   user?: {
     id?: string | null;
     name?: string | null;
+    latinName?: string | null;
     image?: string | null;
     email?: string | null;
   };
@@ -87,6 +89,10 @@ export interface AppProviderProps {
    * @default null
    */
   branding?: Branding | null;
+  /**
+   * The labels for the component.
+   */
+  localeText?: Partial<LocaleContextType>;
   /**
    * Navigation definition for the app.
    * @default []

package/src/AppProvider/AppProviderComponent.tsx

@@ -13,6 +13,7 @@ import {
   AuthenticationContext,
   SessionContext
 } from "./AppProvider";
+import { LocaleProvider } from "../shared/locales/LocaleContext";
 
 function createTheme(): Theme {
   return createMuiTheme({
@@ -39,6 +40,7 @@ function AppProvider(props: AppProviderProps) {
     children,
     theme = createTheme(),
     branding = null,
+    localeText,
     navigation = [],
     router = null,
     authentication = null,
@@ -52,11 +54,13 @@ function AppProvider(props: AppProviderProps) {
         <SessionContext.Provider value={session}>
           <RouterContext.Provider value={router}>
             <AppThemeProvider theme={theme} window={appWindow}>
-              <BrandingContext.Provider value={branding}>
-                <NavigationContext.Provider value={navigation}>
-                  {children}
-                </NavigationContext.Provider>
-              </BrandingContext.Provider>
+              <LocaleProvider localeText={localeText}>
+                <BrandingContext.Provider value={branding}>
+                  <NavigationContext.Provider value={navigation}>
+                    {children}
+                  </NavigationContext.Provider>
+                </BrandingContext.Provider>
+              </LocaleProvider>
             </AppThemeProvider>
           </RouterContext.Provider>
         </SessionContext.Provider>

package/src/DashboardLayout/DashboardLayout.test.tsx

@@ -41,7 +41,7 @@ describe("DashboardLayout", () => {
 
     render(
       <AppProvider>
-        <DashboardLayout>Hello world</DashboardLayout>
+        <DashboardLayout showThemeSwitcher>Hello world</DashboardLayout>
       </AppProvider>
     );
 

package/src/DashboardLayout/DashboardLayout.tsx

@@ -15,13 +15,8 @@ import type {} from "@mui/material/themeCssVarsAugmentation";
 import MenuIcon from "@mui/icons-material/Menu";
 import MenuOpenIcon from "@mui/icons-material/MenuOpen";
 import { Link } from "../shared/Link";
-import {
-  BrandingContext,
-  NavigationContext,
-  WindowContext
-} from "../shared/context";
+import { NavigationContext, WindowContext } from "../shared/context";
 import { Account, type AccountProps } from "../Account";
-import { useApplicationTitle } from "../shared/branding";
 import { DashboardSidebarSubNavigation } from "./DashboardSidebarSubNavigation";
 import { ToolbarActions } from "./ToolbarActions";
 import { ThemeSwitcher } from "./ThemeSwitcher";
@@ -29,6 +24,8 @@ import {
   getDrawerSxTransitionMixin,
   getDrawerWidthTransitionMixin
 } from "./utils";
+import { TitleBar } from "./TitleBar";
+import { useLocaleText } from "../shared/locales/LocaleContext";
 
 const AppBar = styled(MuiAppBar)(({ theme }) => ({
   borderWidth: 0,
@@ -39,25 +36,23 @@ const AppBar = styled(MuiAppBar)(({ theme }) => ({
   zIndex: theme.zIndex.drawer + 1
 }));
 
-const LogoContainer = styled("div")({
-  position: "relative",
-  height: 40,
-  "& img": {
-    maxHeight: 40
-  }
-});
-
 export interface SidebarFooterProps {
   mini: boolean;
 }
 
 export interface DashboardLayoutSlotProps {
+  titlebar?: {};
   toolbarActions?: {};
   toolbarAccount?: AccountProps;
   sidebarFooter?: SidebarFooterProps;
 }
 
 export interface DashboardLayoutSlots {
+  /**
+   * The title bar component used in the layout header.
+   * @default TitleBar
+   */
+  titlebar?: React.JSXElementConstructor<{}>;
   /**
    * The toolbar actions component used in the layout header.
    * @default ToolbarActions
@@ -95,6 +90,11 @@ export interface DashboardLayoutProps {
    * @default false
    */
   hideNavigation?: boolean;
+  /**
+   * Whether the theme switcher should be shown in the toolbar.
+   * @default false
+   */
+  showThemeSwitcher?: boolean;
   /**
    * Width of the sidebar when expanded.
    * @default 320
@@ -132,6 +132,7 @@ function DashboardLayout(props: DashboardLayoutProps) {
     disableCollapsibleSidebar = false,
     defaultSidebarCollapsed = false,
     hideNavigation = false,
+    showThemeSwitcher = false,
     sidebarExpandedWidth = 320,
     slots,
     slotProps,
@@ -140,10 +141,9 @@ function DashboardLayout(props: DashboardLayoutProps) {
 
   const theme = useTheme();
 
-  const branding = React.useContext(BrandingContext);
   const navigation = React.useContext(NavigationContext);
   const appWindow = React.useContext(WindowContext);
-  const applicationTitle = useApplicationTitle();
+  const localeText = useLocaleText();
 
   const [isDesktopNavigationExpanded, setIsDesktopNavigationExpanded] =
     React.useState(!defaultSidebarCollapsed);
@@ -227,21 +227,22 @@ function DashboardLayout(props: DashboardLayoutProps) {
 
   const getMenuIcon = React.useCallback(
     (isExpanded: boolean) => {
-      const expandMenuActionText = "Expand";
-      const collapseMenuActionText = "Collapse";
-
       return (
         <Tooltip
-          title={`${
-            isExpanded ? collapseMenuActionText : expandMenuActionText
-          } menu`}
+          title={
+            isExpanded
+              ? localeText.collapseMenuTitle
+              : localeText.expandMenuTitle
+          }
           enterDelay={1000}
         >
           <div>
             <IconButton
-              aria-label={`${
-                isExpanded ? collapseMenuActionText : expandMenuActionText
-              } navigation menu`}
+              aria-label={
+                isExpanded
+                  ? localeText.collapseNavMenuAriaLabel
+                  : localeText.expandNavMenuAriaLabel
+              }
               onClick={toggleNavigationExpanded}
             >
               {isExpanded ? <MenuOpenIcon /> : <MenuIcon />}
@@ -256,6 +257,7 @@ function DashboardLayout(props: DashboardLayoutProps) {
   const hasDrawerTransitions =
     isOverSmViewport && (disableCollapsibleSidebar || !isUnderMdViewport);
 
+  const TitlebarSlot = slots?.titlebar ?? TitleBar;
   const ToolbarActionsSlot = slots?.toolbarActions ?? ToolbarActions;
   const ToolbarAccountSlot = slots?.toolbarAccount ?? Account;
   const SidebarFooterSlot = slots?.sidebarFooter ?? null;
@@ -373,29 +375,12 @@ function DashboardLayout(props: DashboardLayoutProps) {
               transform: { xs: "translateX(-50%)", md: "none" }
             }}
           >
-            <Link href="/" style={{ color: "inherit", textDecoration: "none" }}>
-              <Stack direction="row" alignItems="center">
-                {branding?.logo && (
-                  <LogoContainer>{branding.logo}</LogoContainer>
-                )}
-                <Typography
-                  variant="h6"
-                  sx={{
-                    color: (theme.vars ?? theme).palette.primary.main,
-                    fontWeight: "700",
-                    ml: 0.5,
-                    whiteSpace: "nowrap"
-                  }}
-                >
-                  {applicationTitle}
-                </Typography>
-              </Stack>
-            </Link>
+            <TitlebarSlot {...slotProps?.titlebar} />
           </Box>
           <Box sx={{ flexGrow: 1 }} />
           <Stack direction="row" spacing={1}>
             <ToolbarActionsSlot {...slotProps?.toolbarActions} />
-            <ThemeSwitcher />
+            {showThemeSwitcher && <ThemeSwitcher />}
             <ToolbarAccountSlot {...slotProps?.toolbarAccount} />
           </Stack>
         </Toolbar>

package/src/DashboardLayout/ThemeSwitcher.tsx

@@ -7,6 +7,7 @@ import DarkModeIcon from "@mui/icons-material/DarkMode";
 import LightModeIcon from "@mui/icons-material/LightMode";
 import { PaletteModeContext } from "../shared/context";
 import useSsr from "../utils/hooks/useSsr";
+import { useLocaleText } from "../shared/locales/LocaleContext";
 
 // TODO: When we use this component as the default for a slot, make it non-internal
 /**
@@ -15,6 +16,7 @@ import useSsr from "../utils/hooks/useSsr";
 function ThemeSwitcher() {
   const isSsr = useSsr();
   const theme = useTheme();
+  const localeText = useLocaleText();
 
   const { paletteMode, setPaletteMode, isDualTheme } =
     React.useContext(PaletteModeContext);
@@ -27,8 +29,10 @@ function ThemeSwitcher() {
     <Tooltip
       title={
         isSsr
-          ? "Switch mode"
-          : `${paletteMode === "dark" ? "Light" : "Dark"} mode`
+          ? localeText.switchModeTitle
+          : paletteMode === "dark"
+          ? localeText.lightModeTitle
+          : localeText.darkModeTitle
       }
       enterDelay={1000}
     >
@@ -36,8 +40,10 @@ function ThemeSwitcher() {
         <IconButton
           aria-label={
             isSsr
-              ? "Switch theme mode"
-              : `Switch to ${paletteMode === "dark" ? "light" : "dark"} mode`
+              ? localeText.switchThemeModeAriaLabel
+              : paletteMode === "dark"
+              ? localeText.switchToLightModeAriaLabel
+              : localeText.switchToDarkModeAriaLabel
           }
           onClick={toggleMode}
           sx={{

package/src/DashboardLayout/TitleBar.tsx

@@ -0,0 +1,43 @@
+import { Stack, styled, Typography, useTheme } from "@mui/material";
+import { Link } from "../shared/Link";
+import { useApplicationTitle } from "../shared/branding";
+import React from "react";
+import { BrandingContext } from "../shared/context";
+
+const LogoContainer = styled("div")({
+  position: "relative",
+  height: 40,
+  "& img": {
+    maxHeight: 40
+  }
+});
+
+export function TitleBar() {
+  // Theme
+  const theme = useTheme();
+
+  // Application title
+  const applicationTitle = useApplicationTitle();
+
+  // Branding
+  const branding = React.useContext(BrandingContext);
+
+  return (
+    <Link href="/" style={{ color: "inherit", textDecoration: "none" }}>
+      <Stack direction="row" alignItems="center">
+        {branding?.logo && <LogoContainer>{branding.logo}</LogoContainer>}
+        <Typography
+          variant="h6"
+          sx={{
+            color: (theme.vars ?? theme).palette.primary.main,
+            fontWeight: "700",
+            ml: 0.5,
+            whiteSpace: "nowrap"
+          }}
+        >
+          {applicationTitle}
+        </Typography>
+      </Stack>
+    </Link>
+  );
+}

package/src/PageContainer/PageContainer.test.tsx

@@ -168,27 +168,4 @@ describe("PageContainer", () => {
     expect(helloLink.getAttribute("href")).toBe("/hello");
     expect(within(breadcrumbs).getByText("World")).toBeTruthy();
   });
-
-  // TODO: Remove in the next major version
-  test("renders legacy breadcrumbs prop", async () => {
-    vi.spyOn(console, "warn").mockImplementation(() => {});
-    render(
-      <PageContainer
-        breadCrumbs={[
-          { title: "Hello", path: "/hello" },
-          { title: "World", path: "/world" }
-        ]}
-      />
-    );
-
-    const breadcrumbs = screen.getByRole("navigation", { name: "breadcrumb" });
-
-    const helloLink = within(breadcrumbs).getByRole("link", { name: "Hello" });
-    expect(helloLink.getAttribute("href")).toBe("/hello");
-    expect(within(breadcrumbs).getByText("World")).toBeTruthy();
-    expect(console.warn).toHaveBeenCalledOnce();
-    expect(console.warn).toHaveBeenCalledWith(
-      "The PageContainer `breadCrumbs` prop is deprecated. Use `breadcrumbs` instead."
-    );
-  });
 });

package/src/PageContainer/PageContainer.tsx

@@ -15,7 +15,6 @@ import {
 } from "./PageContainerToolbar";
 import { getItemTitle } from "../shared/navigation";
 import { useActivePage } from "../useActivePage";
-import warnOnce from "../utils/warnOnce";
 
 const PageContentHeader = styled("div")(({ theme }) => ({
   display: "flex",
@@ -63,11 +62,6 @@ export interface PageContainerProps extends ContainerProps {
    * The breadcrumbs of the page. Leave blank to use the active page breadcrumbs.
    */
   breadcrumbs?: Breadcrumb[];
-  // TODO: Remove in the next major version
-  /**
-   * @deprecated Use `breadcrumbs` instead.
-   */
-  breadCrumbs?: Breadcrumb[];
   /**
    * The components used for each slot inside.
    */
@@ -90,20 +84,12 @@ export interface PageContainerProps extends ContainerProps {
  * - [PageContainer API](https://mui.com/toolpad/core/api/page-container)
  */
 function PageContainer(props: PageContainerProps) {
-  const { children, slots, slotProps, breadcrumbs, breadCrumbs, ...rest } =
-    props;
-
-  if (process.env.NODE_ENV !== "production" && breadCrumbs) {
-    warnOnce(
-      "The PageContainer `breadCrumbs` prop is deprecated. Use `breadcrumbs` instead."
-    );
-  }
+  const { children, slots, slotProps, breadcrumbs, ...rest } = props;
 
   const activePage = useActivePage();
 
   // TODO: Remove `props.breadCrumbs` in the next major version
-  const resolvedBreadcrumbs =
-    breadcrumbs ?? breadCrumbs ?? activePage?.breadcrumbs ?? [];
+  const resolvedBreadcrumbs = breadcrumbs ?? activePage?.breadcrumbs ?? [];
   const title = props.title ?? activePage?.title ?? "";
 
   const ToolbarComponent = props?.slots?.toolbar ?? PageContainerToolbar;
@@ -165,15 +151,6 @@ PageContainer.propTypes /* remove-proptypes */ = {
       title: PropTypes.string.isRequired
     })
   ),
-  /**
-   * @deprecated Use `breadcrumbs` instead.
-   */
-  breadCrumbs: PropTypes.arrayOf(
-    PropTypes.shape({
-      path: PropTypes.string.isRequired,
-      title: PropTypes.string.isRequired
-    })
-  ),
   /**
    * @ignore
    */

package/src/shared/locales/LocaleContext.tsx

@@ -1,16 +1,29 @@
 "use client";
 
 import * as React from "react";
-import DEFAULT_LOCALE_TEXT from "./en";
 
-export type LocaleContextType = {
+const DEFAULT_LOCALE_TEXT = {
   // Account
-  signInLabel?: string;
-  signOutLabel?: string;
+  signInLabel: "Sign In",
+  signOutLabel: "Sign Out",
   // Account Preview
-  iconButtonAriaLabel?: string;
+  accountIconButtonAriaLabel: "Current User",
+  // Menu
+  expandMenuTitle: "Expand menu",
+  expandNavMenuAriaLabel: "Expand navigation menu",
+  collapseMenuTitle: "Collapse menu",
+  collapseNavMenuAriaLabel: "Collapse navigation menu",
+  // Theme
+  switchModeTitle: "Switch mode",
+  darkModeTitle: "Dark mode",
+  lightModeTitle: "Light mode",
+  switchThemeModeAriaLabel: "Switch theme mode",
+  switchToDarkModeAriaLabel: "Switch to dark mode",
+  switchToLightModeAriaLabel: "Switch to light mode"
 };
 
+export type LocaleContextType = typeof DEFAULT_LOCALE_TEXT;
+
 export const LocaleContext =
   React.createContext<LocaleContextType>(DEFAULT_LOCALE_TEXT);
 
@@ -35,10 +48,6 @@ export function LocaleProvider({ localeText, children }: LocaleProviderProps) {
   );
 }
 
-/**
- * @ignore - internal hook.
- */
-
 export function useLocaleText() {
   return React.useContext(LocaleContext);
 }

package/tsconfig.json

@@ -3,7 +3,7 @@
     /* Visit https://aka.ms/tsconfig.json to read more about this file */
     "target": "ES2020",
     "module": "ESNext",
-    "moduleResolution": "Node10",
+    "moduleResolution": "bundler",
     "isolatedModules": true,
     "outDir": "build",
     "noEmit": false,

package/build/src/shared/locales/en.d.ts

@@ -1,6 +0,0 @@
-declare const TOOLPAD_CORE_DEFAULT_LOCALE_TEXT: {
-    signInLabel: string;
-    signOutLabel: string;
-    iconButtonAriaLabel: string;
-};
-export default TOOLPAD_CORE_DEFAULT_LOCALE_TEXT;

package/build/src/shared/locales/en.js

@@ -1,8 +0,0 @@
-const TOOLPAD_CORE_DEFAULT_LOCALE_TEXT = {
-    // Account
-    signInLabel: "Sign In",
-    signOutLabel: "Sign Out",
-    // Account Preview
-    iconButtonAriaLabel: "Current User"
-};
-export default TOOLPAD_CORE_DEFAULT_LOCALE_TEXT;

package/src/shared/locales/en.tsx

@@ -1,9 +0,0 @@
-const TOOLPAD_CORE_DEFAULT_LOCALE_TEXT = {
-  // Account
-  signInLabel: "Sign In",
-  signOutLabel: "Sign Out",
-  // Account Preview
-  iconButtonAriaLabel: "Current User"
-};
-
-export default TOOLPAD_CORE_DEFAULT_LOCALE_TEXT;