@etsoo/toolpad 1.0.0

package/build/src/DashboardLayout/DashboardLayout.js

@@ -0,0 +1,286 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import PropTypes from "prop-types";
+import { styled, useTheme } from "@mui/material";
+import MuiAppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import Drawer from "@mui/material/Drawer";
+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 { 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";
+const AppBar = styled(MuiAppBar)(({ theme }) => ({
+    borderWidth: 0,
+    borderBottomWidth: 1,
+    borderStyle: "solid",
+    borderColor: (theme.vars ?? theme).palette.divider,
+    boxShadow: "none",
+    zIndex: theme.zIndex.drawer + 1
+}));
+const LogoContainer = styled("div")({
+    position: "relative",
+    height: 40,
+    "& img": {
+        maxHeight: 40
+    }
+});
+/**
+ *
+ * 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, 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 [isDesktopNavigationExpanded, setIsDesktopNavigationExpanded] = React.useState(!defaultSidebarCollapsed);
+    const [isMobileNavigationExpanded, setIsMobileNavigationExpanded] = React.useState(false);
+    const isUnderMdViewport = useMediaQuery(theme.breakpoints.down("md"), appWindow && {
+        matchMedia: appWindow.matchMedia
+    });
+    const isOverSmViewport = useMediaQuery(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) => {
+        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, {}) }) }) }));
+    }, [toggleNavigationExpanded]);
+    const hasDrawerTransitions = isOverSmViewport && (disableCollapsibleSidebar || !isUnderMdViewport);
+    const ToolbarActionsSlot = slots?.toolbarActions ?? ToolbarActions;
+    const ToolbarAccountSlot = slots?.toolbarAccount ?? Account;
+    const SidebarFooterSlot = slots?.sidebarFooter ?? null;
+    const getDrawerContent = React.useCallback((isMini, viewport) => (_jsxs(React.Fragment, { children: [_jsx(Toolbar, {}), _jsxs(Box, { 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
+                        ? getDrawerSxTransitionMixin(isNavigationFullyExpanded, "padding")
+                        : {})
+                }, children: [_jsx(DashboardSidebarSubNavigation, { subNavigation: navigation, onLinkClick: handleNavigationLinkClick, isMini: isMini, isFullyExpanded: isNavigationFullyExpanded, hasDrawerTransitions: hasDrawerTransitions, selectedItemId: selectedItemIdRef.current }), SidebarFooterSlot ? (_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,
+            ...getDrawerWidthTransitionMixin(isNavigationExpanded),
+            ...(isTemporary ? { position: "absolute" } : {}),
+            [`& .MuiDrawer-paper`]: {
+                position: "absolute",
+                width: drawerWidth,
+                boxSizing: "border-box",
+                backgroundImage: "none",
+                ...getDrawerWidthTransitionMixin(isNavigationExpanded)
+            }
+        };
+    }, [isNavigationExpanded, sidebarExpandedWidth]);
+    const layoutRef = React.useRef(null);
+    return (_jsxs(Box, { ref: layoutRef, sx: {
+            position: "relative",
+            display: "flex",
+            overflow: "hidden",
+            height: "100vh",
+            width: "100vw",
+            ...sx
+        }, children: [_jsx(AppBar, { color: "inherit", position: "absolute", children: _jsxs(Toolbar, { sx: { backgroundColor: "inherit", mx: { xs: -0.75, sm: -1.5 } }, children: [!hideNavigation ? (_jsxs(React.Fragment, { children: [_jsx(Box, { sx: {
+                                        mr: { sm: disableCollapsibleSidebar ? 0 : 1 },
+                                        display: { md: "none" }
+                                    }, children: getMenuIcon(isMobileNavigationExpanded) }), _jsx(Box, { sx: {
+                                        display: {
+                                            xs: "none",
+                                            md: disableCollapsibleSidebar ? "none" : "block"
+                                        },
+                                        mr: disableCollapsibleSidebar ? 0 : 1
+                                    }, children: getMenuIcon(isDesktopNavigationExpanded) })] })) : null, _jsx(Box, { sx: {
+                                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: {
+                            keepMounted: true // Better open performance on mobile.
+                        }, sx: {
+                            display: {
+                                xs: "block",
+                                sm: disableCollapsibleSidebar ? "block" : "none",
+                                md: "none"
+                            },
+                            ...getDrawerSharedSx(false, true)
+                        }, children: getDrawerContent(false, "phone") }), _jsx(Drawer, { variant: "permanent", sx: {
+                            display: {
+                                xs: "none",
+                                sm: disableCollapsibleSidebar ? "none" : "block",
+                                md: "none"
+                            },
+                            ...getDrawerSharedSx(isMobileMini, false)
+                        }, children: getDrawerContent(isMobileMini, "tablet") }), _jsx(Drawer, { variant: "permanent", sx: {
+                            display: { xs: "none", md: "block" },
+                            ...getDrawerSharedSx(isDesktopMini, false)
+                        }, children: getDrawerContent(isDesktopMini, "desktop") })] })) : null, _jsxs(Box, { sx: {
+                    display: "flex",
+                    flexDirection: "column",
+                    flex: 1
+                }, children: [_jsx(Toolbar, {}), _jsx(Box, { component: "main", sx: {
+                            display: "flex",
+                            flexDirection: "column",
+                            flex: 1,
+                            overflow: "auto"
+                        }, children: children })] })] }));
+}
+DashboardLayout.propTypes /* remove-proptypes */ = {
+    // ┌────────────────────────────── Warning ──────────────────────────────┐
+    // │ These PropTypes are generated from the TypeScript type definitions. │
+    // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+    // └─────────────────────────────────────────────────────────────────────┘
+    /**
+     * The content of the dashboard.
+     */
+    children: PropTypes.node,
+    /**
+     * Whether the sidebar should start collapsed in desktop size screens.
+     * @default false
+     */
+    defaultSidebarCollapsed: PropTypes.bool,
+    /**
+     * Whether the sidebar should not be collapsible to a mini variant in desktop and tablet viewports.
+     * @default false
+     */
+    disableCollapsibleSidebar: PropTypes.bool,
+    /**
+     * Whether the navigation bar and menu icon should be hidden
+     * @default false
+     */
+    hideNavigation: PropTypes.bool,
+    /**
+     * Width of the sidebar when expanded.
+     * @default 320
+     */
+    sidebarExpandedWidth: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.string
+    ]),
+    /**
+     * The props used for each slot inside.
+     * @default {}
+     */
+    slotProps: PropTypes.shape({
+        sidebarFooter: PropTypes.shape({
+            mini: PropTypes.bool.isRequired
+        }),
+        toolbarAccount: PropTypes.shape({
+            localeText: PropTypes.shape({
+                iconButtonAriaLabel: PropTypes.string,
+                signInLabel: PropTypes.string,
+                signOutLabel: PropTypes.string
+            }),
+            slotProps: PropTypes.shape({
+                popover: PropTypes.object,
+                popoverContent: PropTypes.object,
+                preview: PropTypes.object,
+                signInButton: PropTypes.object,
+                signOutButton: PropTypes.object
+            }),
+            slots: PropTypes.shape({
+                popover: PropTypes.elementType,
+                popoverContent: PropTypes.elementType,
+                preview: PropTypes.elementType,
+                signInButton: PropTypes.elementType,
+                signOutButton: PropTypes.elementType
+            })
+        }),
+        toolbarActions: PropTypes.object
+    }),
+    /**
+     * The components used for each slot inside.
+     * @default {}
+     */
+    slots: PropTypes.shape({
+        sidebarFooter: PropTypes.elementType,
+        toolbarAccount: PropTypes.elementType,
+        toolbarActions: PropTypes.elementType
+    }),
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
+        PropTypes.func,
+        PropTypes.object
+    ])
+};
+export { DashboardLayout };

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

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";

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

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

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

@@ -0,0 +1,16 @@
+import type { Navigation } from "../AppProvider";
+interface DashboardSidebarSubNavigationProps {
+    subNavigation: Navigation;
+    basePath?: string;
+    depth?: number;
+    onLinkClick: () => void;
+    isMini?: boolean;
+    isFullyExpanded?: boolean;
+    hasDrawerTransitions?: boolean;
+    selectedItemId: string;
+}
+/**
+ * @ignore - internal component.
+ */
+declare function DashboardSidebarSubNavigation({ subNavigation, basePath, depth, onLinkClick, isMini, isFullyExpanded, hasDrawerTransitions, selectedItemId }: DashboardSidebarSubNavigationProps): import("react/jsx-runtime").JSX.Element;
+export { DashboardSidebarSubNavigation };