@etsoo/toolpad 1.0.11 → 1.0.13

package/build/cjs/AppProvider/AppThemeProvider.js

@@ -0,0 +1,111 @@
+"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.AppThemeProvider = AppThemeProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const InitColorSchemeScript_1 = __importDefault(require("@mui/material/InitColorSchemeScript"));
+const CssBaseline_1 = __importDefault(require("@mui/material/CssBaseline"));
+const invariant_1 = __importDefault(require("invariant"));
+const useLocalStorageState_1 = require("../useLocalStorageState");
+const context_1 = require("../shared/context");
+const COLOR_SCHEME_ATTRIBUTE = "data-toolpad-color-scheme";
+const COLOR_SCHEME_STORAGE_KEY = "toolpad-color-scheme";
+const MODE_STORAGE_KEY = "toolpad-mode";
+function usePreferredMode(window) {
+    const prefersDarkMode = (0, material_1.useMediaQuery)("(prefers-color-scheme: dark)", window && {
+        matchMedia: window.matchMedia
+    });
+    return prefersDarkMode ? "dark" : "light";
+}
+function isCssVarsTheme(theme) {
+    return "vars" in theme;
+}
+/**
+ * Compatibility layer for classic v5 themes. It will handle state management for the theme switcher.
+ * In the v6 theme, this state management is handled by `useColorScheme`. But this hook will crash if
+ * not run under context with a css vars theme.
+ */
+function LegacyThemeProvider(props) {
+    const { children, theme, window: appWindow } = props;
+    (0, invariant_1.default)(!isCssVarsTheme(theme), "This provider only accepts legacy themes.");
+    const isDualTheme = "light" in theme || "dark" in theme;
+    const preferredMode = usePreferredMode(appWindow);
+    const [userMode, setUserMode] = (0, useLocalStorageState_1.useLocalStorageState)(MODE_STORAGE_KEY, "system");
+    const paletteMode = !userMode || userMode === "system" ? preferredMode : userMode;
+    const dualAwareTheme = React.useMemo(() => isDualTheme
+        ? theme[paletteMode === "dark" ? "dark" : "light"] ??
+            theme[paletteMode === "dark" ? "light" : "dark"]
+        : theme, [isDualTheme, paletteMode, theme]);
+    // The v5 shim, based on local state
+    const paletteModeContextValue = React.useMemo(() => ({
+        paletteMode,
+        setPaletteMode: setUserMode,
+        isDualTheme
+    }), [isDualTheme, paletteMode, setUserMode]);
+    return ((0, jsx_runtime_1.jsx)(styles_1.ThemeProvider, { theme: dualAwareTheme, children: (0, jsx_runtime_1.jsxs)(context_1.PaletteModeContext.Provider, { value: paletteModeContextValue, children: [(0, jsx_runtime_1.jsx)(CssBaseline_1.default, { enableColorScheme: true }), children] }) }));
+}
+function CssVarsPaletteModeProvider(props) {
+    const { children, window: appWindow } = props;
+    const preferredMode = usePreferredMode(appWindow);
+    const { mode, setMode, allColorSchemes } = (0, styles_1.useColorScheme)();
+    // The v6 API, based on `useColorScheme`
+    const paletteModeContextValue = React.useMemo(() => {
+        return {
+            paletteMode: !mode || mode === "system" ? preferredMode : mode,
+            setPaletteMode: setMode,
+            isDualTheme: allColorSchemes.length > 1
+        };
+    }, [allColorSchemes, mode, preferredMode, setMode]);
+    return ((0, jsx_runtime_1.jsx)(context_1.PaletteModeContext.Provider, { value: paletteModeContextValue, children: children }));
+}
+function CssVarsThemeProvider(props) {
+    const { children, theme, window: appWindow } = props;
+    (0, invariant_1.default)(isCssVarsTheme(theme), "This provider only accepts CSS vars themes.");
+    return ((0, jsx_runtime_1.jsxs)(styles_1.ThemeProvider, { theme: theme, documentNode: appWindow?.document, colorSchemeNode: appWindow?.document.documentElement, disableNestedContext: true, colorSchemeStorageKey: COLOR_SCHEME_STORAGE_KEY, modeStorageKey: MODE_STORAGE_KEY, children: [(0, jsx_runtime_1.jsx)(InitColorSchemeScript_1.default, { attribute: COLOR_SCHEME_ATTRIBUTE, colorSchemeStorageKey: COLOR_SCHEME_STORAGE_KEY, modeStorageKey: MODE_STORAGE_KEY }), (0, jsx_runtime_1.jsxs)(CssVarsPaletteModeProvider, { window: appWindow, children: [(0, jsx_runtime_1.jsx)(CssBaseline_1.default, { enableColorScheme: true }), children] })] }));
+}
+/**
+ * @ignore - internal component.
+ */
+function AppThemeProvider(props) {
+    const { children, theme, ...rest } = props;
+    const useCssVarsProvider = isCssVarsTheme(theme);
+    return useCssVarsProvider ? ((0, jsx_runtime_1.jsx)(CssVarsThemeProvider, { theme: theme, ...rest, children: children })) : ((0, jsx_runtime_1.jsx)(LegacyThemeProvider, { theme: theme, ...rest, children: children }));
+}

package/build/cjs/AppProvider/index.js

@@ -0,0 +1,17 @@
+"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("./AppProvider"), exports);

package/build/cjs/DashboardLayout/DashboardLayout.js

@@ -0,0 +1,230 @@
+"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.DashboardLayout = DashboardLayout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const material_1 = require("@mui/material");
+const AppBar_1 = __importDefault(require("@mui/material/AppBar"));
+const Box_1 = __importDefault(require("@mui/material/Box"));
+const Drawer_1 = __importDefault(require("@mui/material/Drawer"));
+const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
+const Toolbar_1 = __importDefault(require("@mui/material/Toolbar"));
+const Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
+const useMediaQuery_1 = __importDefault(require("@mui/material/useMediaQuery"));
+const Menu_1 = __importDefault(require("@mui/icons-material/Menu"));
+const MenuOpen_1 = __importDefault(require("@mui/icons-material/MenuOpen"));
+const context_1 = require("../shared/context");
+const Account_1 = require("../Account");
+const DashboardSidebarSubNavigation_1 = require("./DashboardSidebarSubNavigation");
+const ToolbarActions_1 = require("./ToolbarActions");
+const ThemeSwitcher_1 = require("./ThemeSwitcher");
+const utils_1 = require("./utils");
+const TitleBar_1 = require("./TitleBar");
+const LocaleContext_1 = require("../shared/locales/LocaleContext");
+/**
+ *
+ * Demos:
+ *
+ * - [Dashboard Layout](https://mui.com/toolpad/core/react-dashboard-layout/)
+ *
+ * API:
+ *
+ * - [DashboardLayout API](https://mui.com/toolpad/core/api/dashboard-layout)
+ */
+function DashboardLayout(props) {
+    const { children, disableCollapsibleSidebar = false, defaultSidebarCollapsed = false, hideNavigation = false, showThemeSwitcher = false, sidebarExpandedWidth = 320, slots, slotProps, sx } = props;
+    const theme = (0, material_1.useTheme)();
+    const navigation = React.useContext(context_1.NavigationContext);
+    const appWindow = React.useContext(context_1.WindowContext);
+    const localeText = (0, LocaleContext_1.useLocaleText)();
+    const [isDesktopNavigationExpanded, setIsDesktopNavigationExpanded] = React.useState(!defaultSidebarCollapsed);
+    const [isMobileNavigationExpanded, setIsMobileNavigationExpanded] = React.useState(false);
+    const isUnderMdViewport = (0, useMediaQuery_1.default)(theme.breakpoints.down("md"), appWindow && {
+        matchMedia: appWindow.matchMedia
+    });
+    const isOverSmViewport = (0, useMediaQuery_1.default)(theme.breakpoints.up("sm"), appWindow && {
+        matchMedia: appWindow.matchMedia
+    });
+    const isNavigationExpanded = isUnderMdViewport
+        ? isMobileNavigationExpanded
+        : isDesktopNavigationExpanded;
+    const setIsNavigationExpanded = React.useCallback((newExpanded) => {
+        if (isUnderMdViewport) {
+            setIsMobileNavigationExpanded(newExpanded);
+        }
+        else {
+            setIsDesktopNavigationExpanded(newExpanded);
+        }
+    }, [isUnderMdViewport]);
+    const [isNavigationFullyExpanded, setIsNavigationFullyExpanded] = React.useState(isNavigationExpanded);
+    React.useEffect(() => {
+        if (isNavigationExpanded) {
+            const drawerWidthTransitionTimeout = setTimeout(() => {
+                setIsNavigationFullyExpanded(true);
+            }, theme.transitions.duration.enteringScreen);
+            return () => clearTimeout(drawerWidthTransitionTimeout);
+        }
+        setIsNavigationFullyExpanded(false);
+        return () => { };
+    }, [isNavigationExpanded, theme]);
+    const selectedItemIdRef = React.useRef("");
+    const handleSetNavigationExpanded = React.useCallback((newExpanded) => () => {
+        setIsNavigationExpanded(newExpanded);
+    }, [setIsNavigationExpanded]);
+    const toggleNavigationExpanded = React.useCallback(() => {
+        setIsNavigationExpanded(!isNavigationExpanded);
+    }, [isNavigationExpanded, setIsNavigationExpanded]);
+    const handleNavigationLinkClick = React.useCallback(() => {
+        selectedItemIdRef.current = "";
+        setIsMobileNavigationExpanded(false);
+    }, [setIsMobileNavigationExpanded]);
+    // If useEffect was used, the reset would also happen on the client render after SSR which we don't need
+    React.useMemo(() => {
+        if (navigation) {
+            selectedItemIdRef.current = "";
+        }
+    }, [navigation]);
+    const isDesktopMini = !disableCollapsibleSidebar && !isDesktopNavigationExpanded;
+    const isMobileMini = !disableCollapsibleSidebar && !isMobileNavigationExpanded;
+    const getMenuIcon = React.useCallback((isExpanded) => {
+        return ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { title: isExpanded
+                ? localeText.collapseMenuTitle
+                : localeText.expandMenuTitle, enterDelay: 1000, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(IconButton_1.default, { "aria-label": isExpanded
+                        ? localeText.collapseNavMenuAriaLabel
+                        : localeText.expandNavMenuAriaLabel, onClick: toggleNavigationExpanded, children: isExpanded ? (0, jsx_runtime_1.jsx)(MenuOpen_1.default, {}) : (0, jsx_runtime_1.jsx)(Menu_1.default, {}) }) }) }));
+    }, [toggleNavigationExpanded]);
+    const hasDrawerTransitions = isOverSmViewport && (disableCollapsibleSidebar || !isUnderMdViewport);
+    const TitlebarSlot = slots?.titlebar ?? TitleBar_1.TitleBar;
+    const ToolbarActionsSlot = slots?.toolbarActions ?? ToolbarActions_1.ToolbarActions;
+    const ToolbarAccountSlot = slots?.toolbarAccount ?? Account_1.Account;
+    const SidebarFooterSlot = slots?.sidebarFooter ?? null;
+    const getDrawerContent = React.useCallback((isMini, viewport) => ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(Toolbar_1.default, {}), (0, jsx_runtime_1.jsxs)(Box_1.default, { component: "nav", "aria-label": `${viewport.charAt(0).toUpperCase()}${viewport.slice(1)}`, sx: {
+                    height: "100%",
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: "space-between",
+                    overflow: "auto",
+                    pt: navigation[0]?.kind === "header" && !isMini ? 0 : 2,
+                    ...(hasDrawerTransitions
+                        ? (0, utils_1.getDrawerSxTransitionMixin)(isNavigationFullyExpanded, "padding")
+                        : {})
+                }, children: [(0, jsx_runtime_1.jsx)(DashboardSidebarSubNavigation_1.DashboardSidebarSubNavigation, { subNavigation: navigation, onLinkClick: handleNavigationLinkClick, isMini: isMini, isFullyExpanded: isNavigationFullyExpanded, hasDrawerTransitions: hasDrawerTransitions, selectedItemId: selectedItemIdRef.current }), SidebarFooterSlot ? ((0, jsx_runtime_1.jsx)(SidebarFooterSlot, { mini: isMini, ...slotProps?.sidebarFooter })) : null] })] })), [
+        SidebarFooterSlot,
+        handleNavigationLinkClick,
+        hasDrawerTransitions,
+        isNavigationFullyExpanded,
+        navigation,
+        slotProps?.sidebarFooter
+    ]);
+    const getDrawerSharedSx = React.useCallback((isMini, isTemporary) => {
+        const drawerWidth = isMini ? 64 : sidebarExpandedWidth;
+        return {
+            width: drawerWidth,
+            flexShrink: 0,
+            ...(0, utils_1.getDrawerWidthTransitionMixin)(isNavigationExpanded),
+            ...(isTemporary ? { position: "absolute" } : {}),
+            [`& .MuiDrawer-paper`]: {
+                position: "absolute",
+                width: drawerWidth,
+                boxSizing: "border-box",
+                backgroundImage: "none",
+                ...(0, utils_1.getDrawerWidthTransitionMixin)(isNavigationExpanded)
+            }
+        };
+    }, [isNavigationExpanded, sidebarExpandedWidth]);
+    const layoutRef = React.useRef(null);
+    return ((0, jsx_runtime_1.jsxs)(Box_1.default, { ref: layoutRef, sx: {
+            position: "relative",
+            display: "flex",
+            overflow: "hidden",
+            height: "100vh",
+            width: "100vw",
+            ...sx
+        }, children: [(0, jsx_runtime_1.jsx)(AppBar_1.default, { color: "inherit", position: "absolute", sx: (theme) => ({
+                    borderWidth: 0,
+                    borderBottomWidth: 1,
+                    borderStyle: "solid",
+                    borderColor: theme.palette.divider,
+                    boxShadow: "none",
+                    zIndex: theme.zIndex.drawer + 1
+                }), children: (0, jsx_runtime_1.jsxs)(Toolbar_1.default, { sx: { backgroundColor: "inherit", mx: { xs: -0.75, sm: -1.5 } }, children: [!hideNavigation ? ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(Box_1.default, { sx: {
+                                        mr: { sm: disableCollapsibleSidebar ? 0 : 1 },
+                                        display: { md: "none" }
+                                    }, children: getMenuIcon(isMobileNavigationExpanded) }), (0, jsx_runtime_1.jsx)(Box_1.default, { sx: {
+                                        display: {
+                                            xs: "none",
+                                            md: disableCollapsibleSidebar ? "none" : "block"
+                                        },
+                                        mr: disableCollapsibleSidebar ? 0 : 1
+                                    }, children: getMenuIcon(isDesktopNavigationExpanded) })] })) : null, (0, jsx_runtime_1.jsx)(Box_1.default, { sx: {
+                                position: { xs: "absolute", md: "static" },
+                                left: { xs: "50%", md: "auto" },
+                                transform: { xs: "translateX(-50%)", md: "none" }
+                            }, children: (0, jsx_runtime_1.jsx)(TitlebarSlot, { ...slotProps?.titlebar }) }), (0, jsx_runtime_1.jsx)(Box_1.default, { sx: { flexGrow: 1 } }), (0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", spacing: 1, children: [(0, jsx_runtime_1.jsx)(ToolbarActionsSlot, { ...slotProps?.toolbarActions }), showThemeSwitcher && (0, jsx_runtime_1.jsx)(ThemeSwitcher_1.ThemeSwitcher, {}), (0, jsx_runtime_1.jsx)(ToolbarAccountSlot, { ...slotProps?.toolbarAccount })] })] }) }), !hideNavigation ? ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(Drawer_1.default, { container: layoutRef.current, variant: "temporary", open: isMobileNavigationExpanded, onClose: handleSetNavigationExpanded(false), ModalProps: {
+                            keepMounted: true // Better open performance on mobile.
+                        }, sx: {
+                            display: {
+                                xs: "block",
+                                sm: disableCollapsibleSidebar ? "block" : "none",
+                                md: "none"
+                            },
+                            ...getDrawerSharedSx(false, true)
+                        }, children: getDrawerContent(false, "phone") }), (0, jsx_runtime_1.jsx)(Drawer_1.default, { variant: "permanent", sx: {
+                            display: {
+                                xs: "none",
+                                sm: disableCollapsibleSidebar ? "none" : "block",
+                                md: "none"
+                            },
+                            ...getDrawerSharedSx(isMobileMini, false)
+                        }, children: getDrawerContent(isMobileMini, "tablet") }), (0, jsx_runtime_1.jsx)(Drawer_1.default, { variant: "permanent", sx: {
+                            display: { xs: "none", md: "block" },
+                            ...getDrawerSharedSx(isDesktopMini, false)
+                        }, children: getDrawerContent(isDesktopMini, "desktop") })] })) : null, (0, jsx_runtime_1.jsxs)(Box_1.default, { sx: {
+                    display: "flex",
+                    flexDirection: "column",
+                    flex: 1
+                }, children: [(0, jsx_runtime_1.jsx)(Toolbar_1.default, {}), (0, jsx_runtime_1.jsx)(Box_1.default, { component: "main", sx: {
+                            display: "flex",
+                            flexDirection: "column",
+                            flex: 1,
+                            overflow: "auto"
+                        }, children: children })] })] }));
+}

package/build/cjs/DashboardLayout/DashboardLayout.test.js

@@ -0,0 +1,296 @@
+"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 Dashboard_1 = __importDefault(require("@mui/icons-material/Dashboard"));
+const ShoppingCart_1 = __importDefault(require("@mui/icons-material/ShoppingCart"));
+const BarChart_1 = __importDefault(require("@mui/icons-material/BarChart"));
+const Description_1 = __importDefault(require("@mui/icons-material/Description"));
+const Layers_1 = __importDefault(require("@mui/icons-material/Layers"));
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+require("@testing-library/jest-dom/vitest");
+const DashboardLayout_1 = require("./DashboardLayout");
+const AppProviderComponent_1 = require("../AppProvider/AppProviderComponent");
+(0, vitest_1.describe)("DashboardLayout", () => {
+    (0, vitest_1.test)("renders content correctly", async () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(DashboardLayout_1.DashboardLayout, { children: "Hello world" }));
+        (0, vitest_1.expect)(react_1.screen.getByText("Hello world")).toBeTruthy();
+    });
+    (0, vitest_1.test)("renders branding correctly in header", async () => {
+        const BRANDING = {
+            title: "My Company",
+            logo: (0, jsx_runtime_1.jsx)("img", { src: "https://placehold.co/600x400", alt: "Placeholder Logo" })
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AppProviderComponent_1.AppProvider, { branding: BRANDING, children: (0, jsx_runtime_1.jsx)(DashboardLayout_1.DashboardLayout, { children: "Hello world" }) }));
+        const header = react_1.screen.getByRole("banner");
+        (0, vitest_1.expect)((0, react_1.within)(header).getByText("My Company")).toBeTruthy();
+        (0, vitest_1.expect)((0, react_1.within)(header).getByAltText("Placeholder Logo")).toBeTruthy();
+    });
+    (0, vitest_1.test)("can switch theme", async () => {
+        const user = user_event_1.default.setup();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AppProviderComponent_1.AppProvider, { children: (0, jsx_runtime_1.jsx)(DashboardLayout_1.DashboardLayout, { showThemeSwitcher: true, children: "Hello world" }) }));
+        const getBackgroundColorCSSVariable = () => getComputedStyle(document.documentElement).getPropertyValue("--mui-palette-common-background");
+        const header = react_1.screen.getByRole("banner");
+        const themeSwitcherButton = (0, react_1.within)(header).getByLabelText("Switch to dark mode");
+        (0, vitest_1.expect)(getBackgroundColorCSSVariable()).toBe("#fff");
+        await user.click(themeSwitcherButton);
+        (0, vitest_1.expect)(getBackgroundColorCSSVariable()).toBe("#000");
+        await user.click(themeSwitcherButton);
+        (0, vitest_1.expect)(getBackgroundColorCSSVariable()).toBe("#fff");
+    });
+    (0, vitest_1.test)("navigation works correctly", async () => {
+        const NAVIGATION = [
+            {
+                kind: "header",
+                title: "Main items"
+            },
+            {
+                title: "Dashboard",
+                segment: "dashboard",
+                icon: (0, jsx_runtime_1.jsx)(Dashboard_1.default, {})
+            },
+            {
+                title: "Orders",
+                segment: "orders",
+                icon: (0, jsx_runtime_1.jsx)(ShoppingCart_1.default, {})
+            },
+            {
+                kind: "divider"
+            },
+            {
+                kind: "header",
+                title: "Analytics"
+            },
+            {
+                segment: "reports",
+                title: "Reports",
+                icon: (0, jsx_runtime_1.jsx)(BarChart_1.default, {}),
+                children: [
+                    {
+                        segment: "sales",
+                        title: "Sales",
+                        icon: (0, jsx_runtime_1.jsx)(Description_1.default, {})
+                    },
+                    {
+                        segment: "traffic",
+                        title: "Traffic",
+                        icon: (0, jsx_runtime_1.jsx)(Description_1.default, {})
+                    }
+                ]
+            },
+            {
+                segment: "integrations",
+                title: "Integrations",
+                icon: (0, jsx_runtime_1.jsx)(Layers_1.default, {})
+            }
+        ];
+        const user = user_event_1.default.setup();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AppProviderComponent_1.AppProvider, { navigation: NAVIGATION, children: (0, jsx_runtime_1.jsx)(DashboardLayout_1.DashboardLayout, { children: "Hello world" }) }));
+        const desktopNavigation = react_1.screen.getByRole("navigation", {
+            name: "Desktop"
+        });
+        // List subheaders are present
+        (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByText("Main items")).toBeTruthy();
+        (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByText("Analytics")).toBeTruthy();
+        // List items and their links are present
+        const dashboardLink = (0, react_1.within)(desktopNavigation).getByRole("link", {
+            name: "Dashboard"
+        });
+        const ordersLink = (0, react_1.within)(desktopNavigation).getByRole("link", {
+            name: "Orders"
+        });
+        (0, vitest_1.expect)(dashboardLink.getAttribute("href")).toBe("/dashboard");
+        (0, vitest_1.expect)(ordersLink.getAttribute("href")).toBe("/orders");
+        const reportsItem = (0, react_1.within)(desktopNavigation).getByText("Reports");
+        (0, vitest_1.expect)(reportsItem).toBeTruthy();
+        (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByText("Integrations")).toBeTruthy();
+        // Nested list items show when parent item is clicked
+        (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).queryByText("Sales")).toBeNull();
+        (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).queryByText("Traffic")).toBeNull();
+        await user.click(reportsItem);
+        (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByText("Sales")).toBeTruthy();
+        (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByText("Traffic")).toBeTruthy();
+    });
+    (0, vitest_1.test)("starts with parent items expanded if any of their children is the current page", () => {
+        const NAVIGATION = [
+            {
+                segment: "reports",
+                title: "Reports",
+                icon: (0, jsx_runtime_1.jsx)(BarChart_1.default, {}),
+                children: [
+                    {
+                        segment: "sales",
+                        title: "Sales",
+                        icon: (0, jsx_runtime_1.jsx)(Description_1.default, {})
+                    },
+                    {
+                        segment: "traffic",
+                        title: "Traffic",
+                        icon: (0, jsx_runtime_1.jsx)(Description_1.default, {})
+                    }
+                ]
+            }
+        ];
+        const mockRouter = {
+            pathname: "/reports/sales",
+            searchParams: new URLSearchParams(),
+            navigate: vitest_1.vi.fn()
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AppProviderComponent_1.AppProvider, { navigation: NAVIGATION, router: mockRouter, children: (0, jsx_runtime_1.jsx)(DashboardLayout_1.DashboardLayout, { children: "Hello world" }) }));
+        const desktopNavigation = react_1.screen.getByRole("navigation", {
+            name: "Desktop"
+        });
+        (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByText("Sales")).toBeTruthy();
+        (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByText("Traffic")).toBeTruthy();
+    });
+    (0, vitest_1.test)("shows correct selected page item", () => {
+        const NAVIGATION = [
+            {
+                title: "Dashboard",
+                segment: "dashboard",
+                icon: (0, jsx_runtime_1.jsx)(Dashboard_1.default, {})
+            },
+            {
+                title: "Orders",
+                segment: "orders",
+                icon: (0, jsx_runtime_1.jsx)(ShoppingCart_1.default, {})
+            },
+            {
+                segment: "dynamic",
+                title: "Dynamic",
+                icon: (0, jsx_runtime_1.jsx)(BarChart_1.default, {}),
+                pattern: "dynamic/:dynamicId"
+            },
+            {
+                segment: "optional",
+                title: "Optional",
+                pattern: "optional{/:optionalId}?"
+            },
+            {
+                segment: "oneOrMore",
+                title: "One or more",
+                pattern: "oneormore{/:oneormoreId}+"
+            },
+            {
+                segment: "zeroOrMore",
+                title: "Zero or more",
+                pattern: "zeroormore{/:zeroormoreId}*"
+            }
+        ];
+        function AppWithPathname({ pathname }) {
+            const mockRouter = {
+                pathname,
+                searchParams: new URLSearchParams(),
+                navigate: vitest_1.vi.fn()
+            };
+            return ((0, jsx_runtime_1.jsx)(AppProviderComponent_1.AppProvider, { navigation: NAVIGATION, router: mockRouter, children: (0, jsx_runtime_1.jsx)(DashboardLayout_1.DashboardLayout, { children: "Hello world" }) }));
+        }
+        const { rerender } = (0, react_1.render)((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/dashboard" }));
+        const desktopNavigation = react_1.screen.getByRole("navigation", {
+            name: "Desktop"
+        });
+        (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Dashboard" })).toHaveClass("Mui-selected");
+        rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/orders" }));
+        (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Dashboard" })).not.toHaveClass("Mui-selected");
+        (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Orders" })).toHaveClass("Mui-selected");
+        rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/dynamic" }));
+        (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Dynamic" })).not.toHaveClass("Mui-selected");
+        rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/dynamic/123" }));
+        (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Dynamic" })).toHaveClass("Mui-selected");
+        rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/dynamic/123/456" }));
+        (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Dynamic" })).not.toHaveClass("Mui-selected");
+        rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/optional" }));
+        (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Optional" })).toHaveClass("Mui-selected");
+        rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/optional/123" }));
+        (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Optional" })).toHaveClass("Mui-selected");
+        rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/optional/123/456" }));
+        (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Optional" })).not.toHaveClass("Mui-selected");
+        rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/oneormore" }));
+        (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "One or more" })).not.toHaveClass("Mui-selected");
+        rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/oneormore/123" }));
+        (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "One or more" })).toHaveClass("Mui-selected");
+        rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/oneormore/123/456" }));
+        (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "One or more" })).toHaveClass("Mui-selected");
+        rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/zeroormore" }));
+        (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Zero or more" })).toHaveClass("Mui-selected");
+        rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/zeroormore/123" }));
+        (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Zero or more" })).toHaveClass("Mui-selected");
+        rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/zeroormore/123/456" }));
+        (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Zero or more" })).toHaveClass("Mui-selected");
+    });
+    (0, vitest_1.test)("renders navigation actions", async () => {
+        const NAVIGATION = [
+            {
+                title: "Item 1",
+                segment: "item1",
+                icon: (0, jsx_runtime_1.jsx)(Description_1.default, {}),
+                action: (0, jsx_runtime_1.jsx)("div", { children: "Action 1" })
+            },
+            {
+                title: "Item",
+                segment: "item2",
+                icon: (0, jsx_runtime_1.jsx)(Description_1.default, {}),
+                action: (0, jsx_runtime_1.jsx)("div", { children: "Action 2" })
+            }
+        ];
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AppProviderComponent_1.AppProvider, { navigation: NAVIGATION, children: (0, jsx_runtime_1.jsx)(DashboardLayout_1.DashboardLayout, { children: "Hello world" }) }));
+        const desktopNavigation = react_1.screen.getByRole("navigation", {
+            name: "Desktop"
+        });
+        (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByText("Action 1")).toBeTruthy();
+        (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByText("Action 2")).toBeTruthy();
+    });
+    (0, vitest_1.test)("renders sidebar footer slot content", async () => {
+        function SidebarFooter() {
+            return (0, jsx_runtime_1.jsx)("div", { children: "I am footer" });
+        }
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AppProviderComponent_1.AppProvider, { children: (0, jsx_runtime_1.jsx)(DashboardLayout_1.DashboardLayout, { slots: { sidebarFooter: SidebarFooter }, children: "Hello world" }) }));
+        const desktopNavigation = react_1.screen.getByRole("navigation", {
+            name: "Desktop"
+        });
+        (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByText("I am footer")).toBeTruthy();
+    });
+    (0, vitest_1.test)("renders without the navigation and toggle button", async () => {
+        const NAVIGATION = [
+            {
+                title: "Dashboard",
+                segment: "dashboard",
+                icon: (0, jsx_runtime_1.jsx)(Dashboard_1.default, {})
+            },
+            {
+                title: "Orders",
+                segment: "orders",
+                icon: (0, jsx_runtime_1.jsx)(ShoppingCart_1.default, {})
+            }
+        ];
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AppProviderComponent_1.AppProvider, { navigation: NAVIGATION, children: (0, jsx_runtime_1.jsx)(DashboardLayout_1.DashboardLayout, { hideNavigation: true, children: "Hello world" }) }));
+        const desktopNavigation = react_1.screen.queryByRole("navigation", {
+            name: "Desktop"
+        });
+        const navigationToggle = react_1.screen.queryByLabelText("Collapse menu");
+        // Expect that navigation and menu button are not rendered
+        (0, vitest_1.expect)(desktopNavigation).toBeNull();
+        (0, vitest_1.expect)(navigationToggle).toBeNull();
+        // Ensure that main content is still rendered
+        (0, vitest_1.expect)(react_1.screen.getByText("Hello world")).toBeTruthy();
+    });
+    (0, vitest_1.test)("renders without default collapsed navigation on desktop", async () => {
+        const NAVIGATION = [
+            {
+                title: "Dashboard",
+                segment: "dashboard",
+                icon: (0, jsx_runtime_1.jsx)(Dashboard_1.default, {})
+            }
+        ];
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AppProviderComponent_1.AppProvider, { navigation: NAVIGATION, children: (0, jsx_runtime_1.jsx)(DashboardLayout_1.DashboardLayout, { defaultSidebarCollapsed: true, children: "Hello world" }) }));
+        // Expect that menu button has expand action
+        (0, vitest_1.expect)(react_1.screen.getAllByLabelText("Expand menu")).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.queryByLabelText("Collapse menu")).toBeNull();
+        // Ensure that main content is still rendered
+        (0, vitest_1.expect)(react_1.screen.getByText("Hello world")).toBeTruthy();
+    });
+});