@etsoo/toolpad 1.0.0

package/build/src/DashboardLayout/DashboardSidebarSubNavigation.js

@@ -0,0 +1,149 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { styled } from "@mui/material";
+import Avatar from "@mui/material/Avatar";
+import Collapse from "@mui/material/Collapse";
+import Divider from "@mui/material/Divider";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import ListSubheader from "@mui/material/ListSubheader";
+import Tooltip from "@mui/material/Tooltip";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { Link } from "../shared/Link";
+import { RouterContext } from "../shared/context";
+import { getItemTitle, getPageItemFullPath, hasSelectedNavigationChildren, isPageItemSelected } from "../shared/navigation";
+import { getDrawerSxTransitionMixin } from "./utils";
+const NavigationListItemButton = styled(ListItemButton)(({ 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(RouterContext);
+    const pathname = routerContext?.pathname ?? "/";
+    const initialExpandedSidebarItemIds = React.useMemo(() => subNavigation
+        .map((navigationItem, navigationItemIndex) => ({
+        navigationItem,
+        originalIndex: navigationItemIndex
+    }))
+        .filter(({ navigationItem }) => 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 (_jsx(List, { sx: { padding: 0, mb: depth === 0 ? 4 : 1, pl: 2 * depth }, children: subNavigation.map((navigationItem, navigationItemIndex) => {
+            if (navigationItem.kind === "header") {
+                return (_jsx(ListSubheader, { component: "div", sx: {
+                        fontSize: 12,
+                        fontWeight: "700",
+                        height: isMini ? 0 : 40,
+                        ...(hasDrawerTransitions
+                            ? getDrawerSxTransitionMixin(isFullyExpanded, "height")
+                            : {}),
+                        px: 2,
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                        zIndex: 2
+                    }, children: getItemTitle(navigationItem) }, `subheader-${depth}-${navigationItemIndex}`));
+            }
+            if (navigationItem.kind === "divider") {
+                const nextItem = subNavigation[navigationItemIndex + 1];
+                return (_jsx(Divider, { sx: {
+                        borderBottomWidth: 2,
+                        mx: 1,
+                        mt: 1,
+                        mb: nextItem?.kind === "header" && !isMini ? 0 : 1,
+                        ...(hasDrawerTransitions
+                            ? getDrawerSxTransitionMixin(isFullyExpanded, "margin")
+                            : {})
+                    } }, `divider-${depth}-${navigationItemIndex}`));
+            }
+            const navigationItemFullPath = getPageItemFullPath(basePath, navigationItem);
+            const navigationItemId = `${depth}-${navigationItemIndex}`;
+            const navigationItemTitle = getItemTitle(navigationItem);
+            const isNestedNavigationExpanded = expandedSidebarItemIds.includes(navigationItemId);
+            const nestedNavigationCollapseIcon = isNestedNavigationExpanded ? (_jsx(ExpandLessIcon, {})) : (_jsx(ExpandMoreIcon, {}));
+            const listItemIconSize = 34;
+            const isSelected = isPageItemSelected(navigationItem, basePath, pathname);
+            if (process.env.NODE_ENV !== "production" &&
+                isSelected &&
+                selectedItemId) {
+                console.warn(`Duplicate selected path in navigation: ${navigationItemFullPath}`);
+            }
+            if (isSelected && !selectedItemId) {
+                selectedItemId = navigationItemId;
+            }
+            const listItem = (_jsx(ListItem, { sx: {
+                    py: 0,
+                    px: 1,
+                    overflowX: "hidden"
+                }, children: _jsxs(NavigationListItemButton, { selected: isSelected && (!navigationItem.children || isMini), sx: {
+                        px: 1.4,
+                        height: 48
+                    }, ...(navigationItem.children && !isMini
+                        ? {
+                            onClick: handleOpenFolderClick(navigationItemId)
+                        }
+                        : {
+                            LinkComponent: Link,
+                            href: navigationItemFullPath,
+                            onClick: onLinkClick
+                        }), children: [navigationItem.icon || isMini ? (_jsxs(ListItemIcon, { sx: {
+                                minWidth: listItemIconSize,
+                                mr: 1.2
+                            }, children: [navigationItem.icon ?? null, !navigationItem.icon && isMini ? (_jsx(Avatar, { 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, _jsx(ListItemText, { 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 (_jsxs(React.Fragment, { children: [isMini ? (_jsx(Tooltip, { title: navigationItemTitle, placement: "right", children: listItem })) : (listItem), navigationItem.children && !isMini ? (_jsx(Collapse, { in: isNestedNavigationExpanded, timeout: "auto", unmountOnExit: true, children: _jsx(DashboardSidebarSubNavigation, { subNavigation: navigationItem.children, basePath: navigationItemFullPath, depth: depth + 1, onLinkClick: onLinkClick, selectedItemId: selectedItemId }) })) : null] }, navigationItemId));
+        }) }));
+}
+export { DashboardSidebarSubNavigation };

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

@@ -0,0 +1,5 @@
+/**
+ * @ignore - internal component.
+ */
+declare function ThemeSwitcher(): import("react/jsx-runtime").JSX.Element | null;
+export { ThemeSwitcher };

package/build/src/DashboardLayout/ThemeSwitcher.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useTheme } from "@mui/material";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import DarkModeIcon from "@mui/icons-material/DarkMode";
+import LightModeIcon from "@mui/icons-material/LightMode";
+import { PaletteModeContext } from "../shared/context";
+import useSsr from "../utils/hooks/useSsr";
+// TODO: When we use this component as the default for a slot, make it non-internal
+/**
+ * @ignore - internal component.
+ */
+function ThemeSwitcher() {
+    const isSsr = useSsr();
+    const theme = useTheme();
+    const { paletteMode, setPaletteMode, isDualTheme } = React.useContext(PaletteModeContext);
+    const toggleMode = React.useCallback(() => {
+        setPaletteMode(paletteMode === "dark" ? "light" : "dark");
+    }, [paletteMode, setPaletteMode]);
+    return isDualTheme ? (_jsx(Tooltip, { title: isSsr
+            ? "Switch mode"
+            : `${paletteMode === "dark" ? "Light" : "Dark"} mode`, enterDelay: 1000, children: _jsx("div", { children: _jsx(IconButton, { "aria-label": isSsr
+                    ? "Switch theme mode"
+                    : `Switch to ${paletteMode === "dark" ? "light" : "dark"} mode`, onClick: toggleMode, sx: {
+                    color: (theme.vars ?? theme).palette.primary.dark
+                }, children: theme.getColorSchemeSelector ? (_jsxs(React.Fragment, { children: [_jsx(DarkModeIcon, { sx: {
+                                display: "inline",
+                                [theme.getColorSchemeSelector("dark")]: {
+                                    display: "none"
+                                }
+                            } }), _jsx(LightModeIcon, { sx: {
+                                display: "none",
+                                [theme.getColorSchemeSelector("dark")]: {
+                                    display: "inline"
+                                }
+                            } })] })) : (_jsx(React.Fragment, { children: isSsr || paletteMode !== "dark" ? (_jsx(DarkModeIcon, {})) : (_jsx(LightModeIcon, {})) })) }) }) })) : null;
+}
+export { ThemeSwitcher };

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

@@ -0,0 +1,5 @@
+/**
+ * @ignore - internal component.
+ */
+declare function ToolbarActions(): null;
+export { ToolbarActions };

package/build/src/DashboardLayout/ToolbarActions.js

@@ -0,0 +1,9 @@
+"use client";
+// TODO: When we add content to this component, make it non-internal
+/**
+ * @ignore - internal component.
+ */
+function ToolbarActions() {
+    return null;
+}
+export { ToolbarActions };

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

@@ -0,0 +1,2 @@
+export * from "./DashboardLayout";
+export * from "./ToolbarActions";

package/build/src/DashboardLayout/index.js

@@ -0,0 +1,3 @@
+export * from "./DashboardLayout";
+// Default slots components
+export * from "./ToolbarActions";

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

@@ -0,0 +1,8 @@
+import type { Theme } from "@mui/material";
+export declare function getDrawerSxTransitionMixin(isExpanded: boolean, property: string): {
+    transition: (theme: Theme) => string;
+};
+export declare function getDrawerWidthTransitionMixin(isExpanded: boolean): {
+    overflowX: string;
+    transition: (theme: Theme) => string;
+};

package/build/src/DashboardLayout/utils.js

@@ -0,0 +1,16 @@
+export 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
+        })
+    };
+}
+export function getDrawerWidthTransitionMixin(isExpanded) {
+    return {
+        ...getDrawerSxTransitionMixin(isExpanded, "width"),
+        overflowX: "hidden"
+    };
+}

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

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { ContainerProps } from "@mui/material/Container";
+import { PageContainerToolbarProps } from "./PageContainerToolbar";
+export interface PageContainerSlotProps {
+    toolbar: PageContainerToolbarProps;
+}
+export interface PageContainerSlots {
+    /**
+     * The component that renders the actions toolbar.
+     * @default Snackbar
+     */
+    toolbar: React.ElementType;
+}
+export interface Breadcrumb {
+    /**
+     * The title of the breadcrumb segment.
+     */
+    title: string;
+    /**
+     * The path the breadcrumb links to.
+     */
+    path: string;
+}
+/**
+ * @deprecated Use `Breadcrumb` instead.
+ */
+export type BreadCrumb = Breadcrumb;
+export interface PageContainerProps extends ContainerProps {
+    children?: React.ReactNode;
+    /**
+     * The title of the page. Leave blank to use the active page title.
+     */
+    title?: string;
+    /**
+     * The breadcrumbs of the page. Leave blank to use the active page breadcrumbs.
+     */
+    breadcrumbs?: Breadcrumb[];
+    /**
+     * @deprecated Use `breadcrumbs` instead.
+     */
+    breadCrumbs?: Breadcrumb[];
+    /**
+     * The components used for each slot inside.
+     */
+    slots?: PageContainerSlots;
+    /**
+     * The props used for each slot inside.
+     */
+    slotProps?: PageContainerSlotProps;
+}
+/**
+ * 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)
+ */
+declare function PageContainer(props: PageContainerProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageContainer {
+    var propTypes: any;
+}
+export { PageContainer };

package/build/src/PageContainer/PageContainer.js

@@ -0,0 +1,97 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import Breadcrumbs from "@mui/material/Breadcrumbs";
+import Container from "@mui/material/Container";
+import Link from "@mui/material/Link";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import useSlotProps from "@mui/utils/useSlotProps";
+import { styled } from "@mui/material";
+import { Link as ToolpadLink } from "../shared/Link";
+import { PageContainerToolbar } from "./PageContainerToolbar";
+import { getItemTitle } from "../shared/navigation";
+import { useActivePage } from "../useActivePage";
+import warnOnce from "../utils/warnOnce";
+const PageContentHeader = styled("div")(({ theme }) => ({
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    gap: theme.spacing(2)
+}));
+/**
+ * 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, slots, slotProps, breadcrumbs, breadCrumbs, ...rest } = props;
+    if (process.env.NODE_ENV !== "production" && breadCrumbs) {
+        warnOnce("The PageContainer `breadCrumbs` prop is deprecated. Use `breadcrumbs` instead.");
+    }
+    const activePage = useActivePage();
+    // TODO: Remove `props.breadCrumbs` in the next major version
+    const resolvedBreadcrumbs = breadcrumbs ?? breadCrumbs ?? activePage?.breadcrumbs ?? [];
+    const title = props.title ?? activePage?.title ?? "";
+    const ToolbarComponent = props?.slots?.toolbar ?? PageContainerToolbar;
+    const toolbarSlotProps = useSlotProps({
+        elementType: ToolbarComponent,
+        ownerState: props,
+        externalSlotProps: props?.slotProps?.toolbar,
+        additionalProps: {}
+    });
+    return (_jsx(Container, { ...rest, children: _jsxs(Stack, { sx: { my: 2 }, spacing: 2, children: [_jsxs(Stack, { children: [_jsx(Breadcrumbs, { "aria-label": "breadcrumb", children: resolvedBreadcrumbs
+                                ? resolvedBreadcrumbs.map((item, index) => {
+                                    return index < resolvedBreadcrumbs.length - 1 ? (_jsx(Link, { component: ToolpadLink, underline: "hover", color: "inherit", href: item.path, children: getItemTitle(item) }, item.path)) : (_jsx(Typography, { color: "text.primary", children: getItemTitle(item) }, item.path));
+                                })
+                                : null }), _jsxs(PageContentHeader, { children: [title ? _jsx(Typography, { variant: "h4", children: title }) : null, _jsx(ToolbarComponent, { ...toolbarSlotProps })] })] }), _jsx("div", { children: children })] }) }));
+}
+PageContainer.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 breadcrumbs of the page. Leave blank to use the active page breadcrumbs.
+     */
+    breadcrumbs: PropTypes.arrayOf(PropTypes.shape({
+        path: PropTypes.string.isRequired,
+        title: PropTypes.string.isRequired
+    })),
+    /**
+     * @deprecated Use `breadcrumbs` instead.
+     */
+    breadCrumbs: PropTypes.arrayOf(PropTypes.shape({
+        path: PropTypes.string.isRequired,
+        title: PropTypes.string.isRequired
+    })),
+    /**
+     * @ignore
+     */
+    children: PropTypes.node,
+    /**
+     * The props used for each slot inside.
+     */
+    slotProps: PropTypes.shape({
+        toolbar: PropTypes.shape({
+            children: PropTypes.node
+        }).isRequired
+    }),
+    /**
+     * The components used for each slot inside.
+     */
+    slots: PropTypes.shape({
+        toolbar: PropTypes.elementType
+    }),
+    /**
+     * The title of the page. Leave blank to use the active page title.
+     */
+    title: PropTypes.string
+};
+export { PageContainer };

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,127 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { expect, describe, test, vi } from "vitest";
+import { render, within, screen } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+import { PageContainer } from "./PageContainer";
+import describeConformance from "../utils/describeConformance";
+import { AppProvider } from "../AppProvider/AppProviderComponent";
+describe("PageContainer", () => {
+    describeConformance(_jsx(PageContainer, {}), () => ({
+        skip: ["themeDefaultProps"],
+        slots: {
+            toolbar: {}
+        }
+    }));
+    test("renders page container correctly", async () => {
+        const user = await userEvent.setup();
+        const router = {
+            pathname: "/orders",
+            searchParams: new URLSearchParams(),
+            navigate: vi.fn()
+        };
+        render(_jsx(AppProvider, { navigation: [
+                { segment: "", title: "Home" },
+                { segment: "orders", title: "Orders" }
+            ], router: router, children: _jsx(PageContainer, {}) }));
+        const breadcrumbs = screen.getByRole("navigation", { name: "breadcrumb" });
+        const homeLink = within(breadcrumbs).getByRole("link", { name: "Home" });
+        await user.click(homeLink);
+        expect(router.navigate).toHaveBeenCalledWith("/", expect.objectContaining({}));
+        router.navigate.mockClear();
+        expect(within(breadcrumbs).getByText("Orders")).toBeTruthy();
+        expect(screen.getByText("Orders", { ignore: "nav *" }));
+    });
+    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: vi.fn()
+        };
+        const branding = { title: "ACME" };
+        render(_jsx(AppProvider, { branding: branding, navigation: navigation, router: router, children: _jsx(PageContainer, {}) }));
+        const breadcrumbs = screen.getByRole("navigation", { name: "breadcrumb" });
+        expect(within(breadcrumbs).getByText("ACME")).toBeTruthy();
+        expect(within(breadcrumbs).getByText("Home")).toBeTruthy();
+        expect(within(breadcrumbs).getByText("Orders")).toBeTruthy();
+    });
+    test("renders dynamic correctly", async () => {
+        const user = await userEvent.setup();
+        const router = {
+            pathname: "/orders/123",
+            searchParams: new URLSearchParams(),
+            navigate: vi.fn()
+        };
+        render(_jsx(AppProvider, { navigation: [
+                { segment: "", title: "Home" },
+                { segment: "orders", title: "Orders", pattern: "orders/:id" }
+            ], router: router, children: _jsx(PageContainer, {}) }));
+        const breadcrumbs = screen.getByRole("navigation", { name: "breadcrumb" });
+        const homeLink = within(breadcrumbs).getByRole("link", { name: "Home" });
+        await user.click(homeLink);
+        expect(router.navigate).toHaveBeenCalledWith("/", expect.objectContaining({}));
+        router.navigate.mockClear();
+        expect(within(breadcrumbs).getByText("Orders")).toBeTruthy();
+        expect(screen.getByText("Orders", { ignore: "nav *" }));
+    });
+    test("renders nested dynamic correctly", async () => {
+        const router = {
+            pathname: "/users/invoices/123",
+            searchParams: new URLSearchParams(),
+            navigate: vi.fn()
+        };
+        render(_jsx(AppProvider, { navigation: [
+                {
+                    segment: "users",
+                    title: "Users",
+                    children: [
+                        {
+                            segment: "invoices",
+                            title: "Invoices",
+                            pattern: "invoices/:id"
+                        }
+                    ]
+                }
+            ], router: router, children: _jsx(PageContainer, {}) }));
+        const breadcrumbs = screen.getByRole("navigation", { name: "breadcrumb" });
+        const homeLink = within(breadcrumbs).getByRole("link", { name: "Users" });
+        expect(homeLink.getAttribute("href")).toBe("/users");
+        expect(within(breadcrumbs).getByText("Invoices")).toBeTruthy();
+    });
+    test("renders custom breadcrumbs", async () => {
+        render(_jsx(PageContainer, { breadcrumbs: [
+                { title: "Hello", path: "/hello" },
+                { title: "World", path: "/world" }
+            ] }));
+        const breadcrumbs = screen.getByRole("navigation", { name: "breadcrumb" });
+        const helloLink = within(breadcrumbs).getByRole("link", { name: "Hello" });
+        expect(helloLink.getAttribute("href")).toBe("/hello");
+        expect(within(breadcrumbs).getByText("World")).toBeTruthy();
+    });
+    // TODO: Remove in the next major version
+    test("renders legacy breadcrumbs prop", async () => {
+        vi.spyOn(console, "warn").mockImplementation(() => { });
+        render(_jsx(PageContainer, { breadCrumbs: [
+                { title: "Hello", path: "/hello" },
+                { title: "World", path: "/world" }
+            ] }));
+        const breadcrumbs = screen.getByRole("navigation", { name: "breadcrumb" });
+        const helloLink = within(breadcrumbs).getByRole("link", { name: "Hello" });
+        expect(helloLink.getAttribute("href")).toBe("/hello");
+        expect(within(breadcrumbs).getByText("World")).toBeTruthy();
+        expect(console.warn).toHaveBeenCalledOnce();
+        expect(console.warn).toHaveBeenCalledWith("The PageContainer `breadCrumbs` prop is deprecated. Use `breadcrumbs` instead.");
+    });
+});

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

@@ -0,0 +1,16 @@
+import * as React from "react";
+export interface PageContainerToolbarProps {
+    children?: React.ReactNode;
+}
+/**
+ *
+ * Demos:
+ *
+ * - [Page Container](https://mui.com/toolpad/core/react-page-container/)
+ *
+ * API:
+ *
+ * - [PageContainerToolbar API](https://mui.com/toolpad/core/api/page-container-toolbar)
+ */
+declare function PageContainerToolbar(props: PageContainerToolbarProps): import("react/jsx-runtime").JSX.Element;
+export { PageContainerToolbar };

package/build/src/PageContainer/PageContainerToolbar.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styled } from "@mui/material";
+const PageContainerToolbarRoot = styled("div")(({ theme }) => ({
+    display: "flex",
+    flexDirection: "row",
+    gap: theme.spacing(1),
+    // Ensure the toolbar is always on the right side, even after wrapping
+    marginLeft: "auto"
+}));
+/**
+ *
+ * Demos:
+ *
+ * - [Page Container](https://mui.com/toolpad/core/react-page-container/)
+ *
+ * API:
+ *
+ * - [PageContainerToolbar API](https://mui.com/toolpad/core/api/page-container-toolbar)
+ */
+function PageContainerToolbar(props) {
+    return _jsx(PageContainerToolbarRoot, { ...props });
+}
+export { PageContainerToolbar };

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, test } from "vitest";
+import { PageContainerToolbar } from "./PageContainerToolbar";
+import describeConformance from "../utils/describeConformance";
+describe("PageContainerToolbar", () => {
+    describeConformance(_jsx(PageContainerToolbar, {}), () => ({
+        skip: ["themeDefaultProps"]
+    }));
+    test("dummy test", () => { });
+});

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

@@ -0,0 +1,2 @@
+export * from "./PageContainer";
+export * from "./PageContainerToolbar";

package/build/src/PageContainer/index.js

@@ -0,0 +1,2 @@
+export * from "./PageContainer";
+export * from "./PageContainerToolbar";

package/build/src/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./AppProvider";
+export * from "./DashboardLayout";
+export * from "./Account";
+export * from "./PageContainer";
+export * from "./useActivePage";
+export * from "./useLocalStorageState";
+export * from "./useSessionStorageState";
+export * from "./persistence/codec";

package/build/src/index.js

@@ -0,0 +1,8 @@
+export * from "./AppProvider";
+export * from "./DashboardLayout";
+export * from "./Account";
+export * from "./PageContainer";
+export * from "./useActivePage";
+export * from "./useLocalStorageState";
+export * from "./useSessionStorageState";
+export * from "./persistence/codec";

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

@@ -0,0 +1,6 @@
+import type { AppProviderProps } from "../AppProvider";
+/**
+ * @ignore - internal component.
+ */
+declare function AppProvider(props: AppProviderProps): import("react/jsx-runtime").JSX.Element;
+export { AppProvider };

package/build/src/nextjs/AppProvider.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRouter } from "next/compat/router";
+import { AppProviderNextApp } from "./AppProviderNextApp";
+import { AppProviderNextPages } from "./AppProviderNextPages";
+/**
+ * @ignore - internal component.
+ */
+function AppProvider(props) {
+    const router = useRouter();
+    const AppProviderComponent = router
+        ? AppProviderNextPages
+        : AppProviderNextApp;
+    return _jsx(AppProviderComponent, { ...props });
+}
+export { AppProvider };

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

@@ -0,0 +1 @@
+export {};