@etsoo/toolpad 1.0.12 → 1.0.13

package/build/cjs/DashboardLayout/DashboardSidebarSubNavigation.js

@@ -0,0 +1,185 @@
+"use client";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardSidebarSubNavigation = DashboardSidebarSubNavigation;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const material_1 = require("@mui/material");
+const Avatar_1 = __importDefault(require("@mui/material/Avatar"));
+const Collapse_1 = __importDefault(require("@mui/material/Collapse"));
+const Divider_1 = __importDefault(require("@mui/material/Divider"));
+const List_1 = __importDefault(require("@mui/material/List"));
+const ListItem_1 = __importDefault(require("@mui/material/ListItem"));
+const ListItemButton_1 = __importDefault(require("@mui/material/ListItemButton"));
+const ListItemIcon_1 = __importDefault(require("@mui/material/ListItemIcon"));
+const ListItemText_1 = __importDefault(require("@mui/material/ListItemText"));
+const ListSubheader_1 = __importDefault(require("@mui/material/ListSubheader"));
+const Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
+const ExpandLess_1 = __importDefault(require("@mui/icons-material/ExpandLess"));
+const ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
+const Link_1 = require("../shared/Link");
+const context_1 = require("../shared/context");
+const navigation_1 = require("../shared/navigation");
+const utils_1 = require("./utils");
+const NavigationListItemButton = (0, material_1.styled)(ListItemButton_1.default)(({ theme }) => ({
+    borderRadius: 8,
+    "&.Mui-selected": {
+        "& .MuiListItemIcon-root": {
+            color: (theme.vars ?? theme).palette.primary.dark
+        },
+        "& .MuiTypography-root": {
+            color: (theme.vars ?? theme).palette.primary.dark
+        },
+        "& .MuiSvgIcon-root": {
+            color: (theme.vars ?? theme).palette.primary.dark
+        },
+        "& .MuiAvatar-root": {
+            backgroundColor: (theme.vars ?? theme).palette.primary.dark
+        },
+        "& .MuiTouchRipple-child": {
+            backgroundColor: (theme.vars ?? theme).palette.primary.dark
+        }
+    },
+    "& .MuiSvgIcon-root": {
+        color: (theme.vars ?? theme).palette.action.active
+    },
+    "& .MuiAvatar-root": {
+        backgroundColor: (theme.vars ?? theme).palette.action.active
+    }
+}));
+/**
+ * @ignore - internal component.
+ */
+function DashboardSidebarSubNavigation({ subNavigation, basePath = "", depth = 0, onLinkClick, isMini = false, isFullyExpanded = true, hasDrawerTransitions = false, selectedItemId }) {
+    const routerContext = React.useContext(context_1.RouterContext);
+    const pathname = routerContext?.pathname ?? "/";
+    const initialExpandedSidebarItemIds = React.useMemo(() => subNavigation
+        .map((navigationItem, navigationItemIndex) => ({
+        navigationItem,
+        originalIndex: navigationItemIndex
+    }))
+        .filter(({ navigationItem }) => (0, navigation_1.hasSelectedNavigationChildren)(navigationItem, basePath, pathname))
+        .map(({ originalIndex }) => `${depth}-${originalIndex}`), [basePath, depth, pathname, subNavigation]);
+    const [expandedSidebarItemIds, setExpandedSidebarItemIds] = React.useState(initialExpandedSidebarItemIds);
+    const handleOpenFolderClick = React.useCallback((itemId) => () => {
+        setExpandedSidebarItemIds((previousValue) => previousValue.includes(itemId)
+            ? previousValue.filter((previousValueItemId) => previousValueItemId !== itemId)
+            : [...previousValue, itemId]);
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(List_1.default, { sx: { padding: 0, mb: depth === 0 ? 4 : 1, pl: 2 * depth }, children: subNavigation.map((navigationItem, navigationItemIndex) => {
+            if (navigationItem.kind === "header") {
+                return ((0, jsx_runtime_1.jsx)(ListSubheader_1.default, { component: "div", sx: {
+                        fontSize: 12,
+                        fontWeight: "700",
+                        height: isMini ? 0 : 40,
+                        ...(hasDrawerTransitions
+                            ? (0, utils_1.getDrawerSxTransitionMixin)(isFullyExpanded, "height")
+                            : {}),
+                        px: 2,
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                        zIndex: 2
+                    }, children: (0, navigation_1.getItemTitle)(navigationItem) }, `subheader-${depth}-${navigationItemIndex}`));
+            }
+            if (navigationItem.kind === "divider") {
+                const nextItem = subNavigation[navigationItemIndex + 1];
+                return ((0, jsx_runtime_1.jsx)(Divider_1.default, { sx: {
+                        borderBottomWidth: 2,
+                        mx: 1,
+                        mt: 1,
+                        mb: nextItem?.kind === "header" && !isMini ? 0 : 1,
+                        ...(hasDrawerTransitions
+                            ? (0, utils_1.getDrawerSxTransitionMixin)(isFullyExpanded, "margin")
+                            : {})
+                    } }, `divider-${depth}-${navigationItemIndex}`));
+            }
+            const navigationItemFullPath = (0, navigation_1.getPageItemFullPath)(basePath, navigationItem);
+            const navigationItemId = `${depth}-${navigationItemIndex}`;
+            const navigationItemTitle = (0, navigation_1.getItemTitle)(navigationItem);
+            const isNestedNavigationExpanded = expandedSidebarItemIds.includes(navigationItemId);
+            const nestedNavigationCollapseIcon = isNestedNavigationExpanded ? ((0, jsx_runtime_1.jsx)(ExpandLess_1.default, {})) : ((0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}));
+            const listItemIconSize = 34;
+            // If the item is selected, we don't want to select more
+            const isSelected = selectedItemId
+                ? false
+                : (0, navigation_1.isPageItemSelected)(navigationItem, basePath, pathname);
+            if (isSelected && !selectedItemId) {
+                selectedItemId = navigationItemId;
+            }
+            const listItem = ((0, jsx_runtime_1.jsx)(ListItem_1.default, { sx: {
+                    py: 0,
+                    px: 1,
+                    overflowX: "hidden"
+                }, children: (0, jsx_runtime_1.jsxs)(NavigationListItemButton, { selected: isSelected && (!navigationItem.children || isMini), sx: {
+                        px: 1.4,
+                        height: 48
+                    }, ...(navigationItem.children && !isMini
+                        ? {
+                            onClick: handleOpenFolderClick(navigationItemId)
+                        }
+                        : {
+                            LinkComponent: Link_1.Link,
+                            href: navigationItemFullPath,
+                            onClick: onLinkClick
+                        }), children: [navigationItem.icon || isMini ? ((0, jsx_runtime_1.jsxs)(ListItemIcon_1.default, { sx: {
+                                minWidth: listItemIconSize,
+                                mr: 1.2
+                            }, children: [navigationItem.icon ?? null, !navigationItem.icon && isMini ? ((0, jsx_runtime_1.jsx)(Avatar_1.default, { sx: {
+                                        width: listItemIconSize - 7,
+                                        height: listItemIconSize - 7,
+                                        fontSize: 12,
+                                        ml: "-2px"
+                                    }, children: navigationItemTitle
+                                        .split(" ")
+                                        .slice(0, 2)
+                                        .map((itemTitleWord) => itemTitleWord.charAt(0).toUpperCase()) })) : null] })) : null, (0, jsx_runtime_1.jsx)(ListItemText_1.default, { primary: navigationItemTitle, sx: {
+                                whiteSpace: "nowrap",
+                                zIndex: 1,
+                                "& .MuiTypography-root": {
+                                    fontWeight: "500"
+                                }
+                            } }), navigationItem.action && !isMini && isFullyExpanded
+                            ? navigationItem.action
+                            : null, navigationItem.children && !isMini && isFullyExpanded
+                            ? nestedNavigationCollapseIcon
+                            : null] }) }));
+            return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [isMini ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { title: navigationItemTitle, placement: "right", children: listItem })) : (listItem), navigationItem.children && !isMini ? ((0, jsx_runtime_1.jsx)(Collapse_1.default, { in: isNestedNavigationExpanded, timeout: "auto", unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(DashboardSidebarSubNavigation, { subNavigation: navigationItem.children, basePath: navigationItemFullPath, depth: depth + 1, onLinkClick: onLinkClick, selectedItemId: selectedItemId }) })) : null] }, navigationItemId));
+        }) }));
+}

package/build/cjs/DashboardLayout/ThemeSwitcher.js

@@ -0,0 +1,84 @@
+"use client";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeSwitcher = ThemeSwitcher;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const material_1 = require("@mui/material");
+const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
+const Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
+const DarkMode_1 = __importDefault(require("@mui/icons-material/DarkMode"));
+const LightMode_1 = __importDefault(require("@mui/icons-material/LightMode"));
+const context_1 = require("../shared/context");
+const useSsr_1 = __importDefault(require("../utils/hooks/useSsr"));
+const LocaleContext_1 = require("../shared/locales/LocaleContext");
+// TODO: When we use this component as the default for a slot, make it non-internal
+/**
+ * @ignore - internal component.
+ */
+function ThemeSwitcher() {
+    const isSsr = (0, useSsr_1.default)();
+    const theme = (0, material_1.useTheme)();
+    const localeText = (0, LocaleContext_1.useLocaleText)();
+    const { paletteMode, setPaletteMode, isDualTheme } = React.useContext(context_1.PaletteModeContext);
+    const toggleMode = React.useCallback(() => {
+        setPaletteMode(paletteMode === "dark" ? "light" : "dark");
+    }, [paletteMode, setPaletteMode]);
+    return isDualTheme ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { title: isSsr
+            ? localeText.switchModeTitle
+            : paletteMode === "dark"
+                ? localeText.lightModeTitle
+                : localeText.darkModeTitle, enterDelay: 1000, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(IconButton_1.default, { "aria-label": isSsr
+                    ? localeText.switchThemeModeAriaLabel
+                    : paletteMode === "dark"
+                        ? localeText.switchToLightModeAriaLabel
+                        : localeText.switchToDarkModeAriaLabel, onClick: toggleMode, sx: {
+                    color: (theme.vars ?? theme).palette.primary.dark
+                }, children: theme.getColorSchemeSelector ? ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(DarkMode_1.default, { sx: {
+                                display: "inline",
+                                [theme.getColorSchemeSelector("dark")]: {
+                                    display: "none"
+                                }
+                            } }), (0, jsx_runtime_1.jsx)(LightMode_1.default, { sx: {
+                                display: "none",
+                                [theme.getColorSchemeSelector("dark")]: {
+                                    display: "inline"
+                                }
+                            } })] })) : ((0, jsx_runtime_1.jsx)(React.Fragment, { children: isSsr || paletteMode !== "dark" ? ((0, jsx_runtime_1.jsx)(DarkMode_1.default, {})) : ((0, jsx_runtime_1.jsx)(LightMode_1.default, {})) })) }) }) })) : null;
+}

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

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function TitleBar(): number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | undefined;

package/build/cjs/DashboardLayout/TitleBar.js

@@ -0,0 +1,57 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TitleBar = TitleBar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const Link_1 = require("../shared/Link");
+const react_1 = __importDefault(require("react"));
+const context_1 = require("../shared/context");
+const LogoContainer = (0, material_1.styled)("div")({
+    position: "relative",
+    height: 40,
+    "& img": {
+        maxHeight: 40
+    }
+});
+function TitleBar() {
+    // Theme
+    const theme = (0, material_1.useTheme)();
+    // Branding
+    const branding = react_1.default.useContext(context_1.BrandingContext);
+    // Application title
+    const title = branding?.title;
+    const [titleUI, hasLink] = react_1.default.useMemo(() => {
+        if (title == null)
+            return [undefined, true];
+        if (typeof title === "string" || Array.isArray(title)) {
+            let titleString;
+            let clickHandler;
+            if (Array.isArray(title)) {
+                titleString = title[0];
+                clickHandler = title[1];
+            }
+            else {
+                titleString = title;
+            }
+            return [
+                (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", sx: {
+                        color: (theme.vars ?? theme).palette.primary.main,
+                        fontWeight: "700",
+                        ml: 0.5,
+                        whiteSpace: "nowrap"
+                    }, onClick: clickHandler == null ? undefined : (e) => clickHandler(e), children: titleString }),
+                true
+            ];
+        }
+        return [title, false];
+    }, [title]);
+    if (hasLink) {
+        return ((0, jsx_runtime_1.jsx)(Link_1.Link, { href: "/", style: { color: "inherit", textDecoration: "none" }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", children: [branding?.logo && (0, jsx_runtime_1.jsx)(LogoContainer, { children: branding.logo }), titleUI] }) }));
+    }
+    else {
+        return titleUI;
+    }
+}

package/build/cjs/DashboardLayout/ToolbarActions.js

@@ -0,0 +1,11 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarActions = ToolbarActions;
+// TODO: When we add content to this component, make it non-internal
+/**
+ * @ignore - internal component.
+ */
+function ToolbarActions() {
+    return null;
+}

package/build/cjs/DashboardLayout/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DashboardLayout"), exports);
+// Default slots components
+__exportStar(require("./ToolbarActions"), exports);

package/build/cjs/DashboardLayout/utils.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDrawerSxTransitionMixin = getDrawerSxTransitionMixin;
+exports.getDrawerWidthTransitionMixin = getDrawerWidthTransitionMixin;
+function getDrawerSxTransitionMixin(isExpanded, property) {
+    return {
+        transition: (theme) => theme.transitions.create(property, {
+            easing: theme.transitions.easing.sharp,
+            duration: isExpanded
+                ? theme.transitions.duration.enteringScreen
+                : theme.transitions.duration.leavingScreen
+        })
+    };
+}
+function getDrawerWidthTransitionMixin(isExpanded) {
+    return {
+        ...getDrawerSxTransitionMixin(isExpanded, "width"),
+        overflowX: "hidden"
+    };
+}

package/build/{PageContainer → cjs/PageContainer}/PageContainer.d.ts

@@ -33,6 +33,10 @@ export declare const PageDataContext: React.Context<{
 }>;
 export declare function PageDataContextProvider(props: React.PropsWithChildren<PageData>): import("react/jsx-runtime").JSX.Element;
 export type PageContainerProps = React.PropsWithChildren<ContainerProps & {
+    /**
+     * The default title of the page.
+     */
+    defaultTitle?: string;
     /**
      * The components used for each slot inside.
      */

package/build/cjs/PageContainer/PageContainer.js

@@ -0,0 +1,133 @@
+"use client";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageDataContext = void 0;
+exports.PageDataContextProvider = PageDataContextProvider;
+exports.PageContainer = PageContainer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const Breadcrumbs_1 = __importDefault(require("@mui/material/Breadcrumbs"));
+const Container_1 = __importDefault(require("@mui/material/Container"));
+const Link_1 = __importDefault(require("@mui/material/Link"));
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
+const useSlotProps_1 = __importDefault(require("@mui/utils/useSlotProps"));
+const material_1 = require("@mui/material");
+const Link_2 = require("../shared/Link");
+const PageContainerToolbar_1 = require("./PageContainerToolbar");
+const navigation_1 = require("../shared/navigation");
+const useActivePage_1 = require("../useActivePage");
+const PageContentHeader = (0, material_1.styled)("div")(({ theme }) => ({
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    gap: theme.spacing(2)
+}));
+exports.PageDataContext = React.createContext({ state: {}, dispatch: (value) => value });
+function reducer(state, action) {
+    if (action === true) {
+        // Reset the state
+        if (state.breadcrumbs == null &&
+            state.title == null &&
+            state.page == null) {
+            return state;
+        }
+        else {
+            return {};
+        }
+    }
+    return { ...state, ...action };
+}
+function PageDataContextProvider(props) {
+    // Destruct
+    const { title, page, breadcrumbs, ...rest } = props;
+    // useReducer hook to manage state with our reducer function and initial state
+    const [state, dispatch] = React.useReducer(reducer, {
+        title,
+        page,
+        breadcrumbs
+    });
+    // Provide the state and dispatch function to the context value
+    return (0, jsx_runtime_1.jsx)(exports.PageDataContext.Provider, { value: { state, dispatch }, ...rest });
+}
+/**
+ * A container component to provide a title and breadcrumbs for your pages.
+ *
+ * Demos:
+ *
+ * - [Page Container](https://mui.com/toolpad/core/react-page-container/)
+ *
+ * API:
+ *
+ * - [PageContainer API](https://mui.com/toolpad/core/api/page-container)
+ */
+function PageContainer(props) {
+    const { children, defaultTitle, slots, slotProps, ...rest } = props;
+    const loaded = React.useRef(false);
+    const { state, dispatch } = React.useContext(exports.PageDataContext);
+    const activePage = (0, useActivePage_1.useActivePage)();
+    React.useLayoutEffect(() => {
+        if (loaded.current) {
+            dispatch(true);
+        }
+        else {
+            loaded.current = true;
+        }
+    }, [activePage?.sourcePath]);
+    let resolvedBreadcrumbs = state.breadcrumbs ?? activePage?.breadcrumbs ?? [];
+    const title = state.title ?? defaultTitle ?? activePage?.title ?? "";
+    if (state.page) {
+        resolvedBreadcrumbs = [
+            ...resolvedBreadcrumbs,
+            { title: state.page, path: "#" }
+        ];
+    }
+    const ToolbarComponent = props?.slots?.toolbar ?? PageContainerToolbar_1.PageContainerToolbar;
+    const toolbarSlotProps = (0, useSlotProps_1.default)({
+        elementType: ToolbarComponent,
+        ownerState: props,
+        externalSlotProps: props?.slotProps?.toolbar,
+        additionalProps: {}
+    });
+    return ((0, jsx_runtime_1.jsx)(Container_1.default, { ...rest, children: (0, jsx_runtime_1.jsxs)(Stack_1.default, { sx: { my: 2 }, spacing: 2, children: [(0, jsx_runtime_1.jsxs)(Stack_1.default, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_1.default, { "aria-label": "breadcrumb", children: resolvedBreadcrumbs
+                                ? resolvedBreadcrumbs.map((item, index) => {
+                                    return index < resolvedBreadcrumbs.length - 1 ? ((0, jsx_runtime_1.jsx)(Link_1.default, { component: Link_2.Link, underline: "hover", color: "inherit", href: item.path, children: (0, navigation_1.getItemTitle)(item) }, item.path)) : ((0, jsx_runtime_1.jsx)(Typography_1.default, { color: "text.primary", children: (0, navigation_1.getItemTitle)(item) }, item.path));
+                                })
+                                : null }), (0, jsx_runtime_1.jsxs)(PageContentHeader, { children: [title ? (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "h4", children: title }) : null, (0, jsx_runtime_1.jsx)(ToolbarComponent, { ...toolbarSlotProps })] })] }), (0, jsx_runtime_1.jsx)("div", { children: children })] }) }));
+}

package/build/cjs/PageContainer/PageContainer.test.js

@@ -0,0 +1,128 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const vitest_1 = require("vitest");
+const react_1 = require("@testing-library/react");
+const user_event_1 = require("@testing-library/user-event");
+const PageContainer_1 = require("./PageContainer");
+const describeConformance_1 = __importDefault(require("../utils/describeConformance"));
+const AppProviderComponent_1 = require("../AppProvider/AppProviderComponent");
+(0, vitest_1.describe)("PageContainer", () => {
+    (0, describeConformance_1.default)((0, jsx_runtime_1.jsx)(PageContainer_1.PageContainer, {}), () => ({
+        skip: ["themeDefaultProps"],
+        slots: {
+            toolbar: {}
+        }
+    }));
+    (0, vitest_1.test)("renders page container correctly", async () => {
+        const user = user_event_1.userEvent.setup();
+        const router = {
+            pathname: "/orders",
+            searchParams: new URLSearchParams(),
+            navigate: vitest_1.vi.fn()
+        };
+        (0, react_1.act)(() => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(AppProviderComponent_1.AppProvider, { navigation: [
+                    { segment: "", title: "Home" },
+                    { segment: "orders", title: "Orders" }
+                ], router: router, children: (0, jsx_runtime_1.jsx)(PageContainer_1.PageDataContextProvider, { children: (0, jsx_runtime_1.jsx)(PageContainer_1.PageContainer, {}) }) }));
+        });
+        const breadcrumbs = react_1.screen.getByRole("navigation", { name: "breadcrumb" });
+        const homeLink = (0, react_1.within)(breadcrumbs).getByRole("link", { name: "Home" });
+        await user.click(homeLink);
+        (0, vitest_1.expect)(router.navigate).toHaveBeenCalledWith("/", vitest_1.expect.objectContaining({}));
+        router.navigate.mockClear();
+        (0, vitest_1.expect)((0, react_1.within)(breadcrumbs).getByText("Orders")).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getByText("Orders", { ignore: "nav *" }));
+    });
+    (0, vitest_1.test)("renders nested", async () => {
+        const navigation = [
+            { segment: "", title: "ACME" },
+            {
+                segment: "home",
+                title: "Home",
+                children: [
+                    {
+                        segment: "orders",
+                        title: "Orders"
+                    }
+                ]
+            }
+        ];
+        const router = {
+            pathname: "/home/orders",
+            searchParams: new URLSearchParams(),
+            navigate: vitest_1.vi.fn()
+        };
+        const branding = { title: "ACME" };
+        (0, react_1.act)(() => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(AppProviderComponent_1.AppProvider, { branding: branding, navigation: navigation, router: router, children: (0, jsx_runtime_1.jsx)(PageContainer_1.PageDataContextProvider, { children: (0, jsx_runtime_1.jsx)(PageContainer_1.PageContainer, {}) }) }));
+        });
+        const breadcrumbs = react_1.screen.getByRole("navigation", { name: "breadcrumb" });
+        (0, vitest_1.expect)((0, react_1.within)(breadcrumbs).getByText("ACME")).toBeTruthy();
+        (0, vitest_1.expect)((0, react_1.within)(breadcrumbs).getByText("Home")).toBeTruthy();
+        (0, vitest_1.expect)((0, react_1.within)(breadcrumbs).getByText("Orders")).toBeTruthy();
+    });
+    (0, vitest_1.test)("renders dynamic correctly", async () => {
+        const user = user_event_1.userEvent.setup();
+        const router = {
+            pathname: "/orders/123",
+            searchParams: new URLSearchParams(),
+            navigate: vitest_1.vi.fn()
+        };
+        (0, react_1.act)(() => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(AppProviderComponent_1.AppProvider, { navigation: [
+                    { segment: "", title: "Home" },
+                    { segment: "orders", title: "Orders", pattern: "orders/:id" }
+                ], router: router, children: (0, jsx_runtime_1.jsx)(PageContainer_1.PageDataContextProvider, { children: (0, jsx_runtime_1.jsx)(PageContainer_1.PageContainer, {}) }) }));
+        });
+        const breadcrumbs = react_1.screen.getByRole("navigation", { name: "breadcrumb" });
+        const homeLink = (0, react_1.within)(breadcrumbs).getByRole("link", { name: "Home" });
+        await user.click(homeLink);
+        (0, vitest_1.expect)(router.navigate).toHaveBeenCalledWith("/", vitest_1.expect.objectContaining({}));
+        router.navigate.mockClear();
+        (0, vitest_1.expect)((0, react_1.within)(breadcrumbs).getByText("Orders")).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getByText("Orders", { ignore: "nav *" }));
+    });
+    (0, vitest_1.test)("renders nested dynamic correctly", async () => {
+        const router = {
+            pathname: "/users/invoices/123",
+            searchParams: new URLSearchParams(),
+            navigate: vitest_1.vi.fn()
+        };
+        (0, react_1.act)(() => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(AppProviderComponent_1.AppProvider, { navigation: [
+                    {
+                        segment: "users",
+                        title: "Users",
+                        children: [
+                            {
+                                segment: "invoices",
+                                title: "Invoices",
+                                pattern: "invoices/:id"
+                            }
+                        ]
+                    }
+                ], router: router, children: (0, jsx_runtime_1.jsx)(PageContainer_1.PageDataContextProvider, { children: (0, jsx_runtime_1.jsx)(PageContainer_1.PageContainer, {}) }) }));
+        });
+        const breadcrumbs = react_1.screen.getByRole("navigation", { name: "breadcrumb" });
+        const homeLink = (0, react_1.within)(breadcrumbs).getByRole("link", { name: "Users" });
+        (0, vitest_1.expect)(homeLink.getAttribute("href")).toBe("/users");
+        (0, vitest_1.expect)((0, react_1.within)(breadcrumbs).getByText("Invoices")).toBeTruthy();
+    });
+    (0, vitest_1.test)("renders custom breadcrumbs", async () => {
+        (0, react_1.act)(() => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(PageContainer_1.PageDataContextProvider, { breadcrumbs: [
+                    { title: "Hello", path: "/hello" },
+                    { title: "World", path: "/world" }
+                ], children: (0, jsx_runtime_1.jsx)(PageContainer_1.PageContainer, {}) }));
+        });
+        const breadcrumbs = react_1.screen.getByRole("navigation", { name: "breadcrumb" });
+        const helloLink = (0, react_1.within)(breadcrumbs).getByRole("link", { name: "Hello" });
+        (0, vitest_1.expect)(helloLink.getAttribute("href")).toBe("/hello");
+        (0, vitest_1.expect)((0, react_1.within)(breadcrumbs).getByText("World")).toBeTruthy();
+    });
+});