@etsoo/toolpad 1.0.9 → 1.0.11

package/build/Account/Account.d.ts

@@ -60,7 +60,4 @@ export interface AccountProps {
  * - [Account API](https://mui.com/toolpad/core/api/account)
  */
 declare function Account(props: AccountProps): import("react/jsx-runtime").JSX.Element | null;
-declare namespace Account {
-    var propTypes: any;
-}
 export { Account };

package/build/Account/Account.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import PropTypes from "prop-types";
 import Popover from "@mui/material/Popover";
 import Divider from "@mui/material/Divider";
 import Stack from "@mui/material/Stack";
@@ -64,44 +63,4 @@ function Account(props) {
                     ...slotProps?.popover?.slotProps
                 }, children: slots?.popoverContent ? (_jsx(slots.popoverContent, { ...slotProps?.popoverContent })) : (_jsxs(Stack, { direction: "column", ...slotProps?.popoverContent, children: [_jsx(AccountPopoverHeader, { children: _jsx(AccountPreview, { variant: "expanded" }) }), _jsx(Divider, {}), _jsx(AccountPopoverFooter, { children: _jsx(SignOutButton, { ...slotProps?.signOutButton }) })] })) }))] }));
 }
-Account.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 props used for each slot inside.
-     */
-    slotProps: PropTypes.shape({
-        popover: PropTypes.object,
-        popoverContent: PropTypes.object,
-        preview: PropTypes.shape({
-            handleClick: PropTypes.func,
-            open: PropTypes.bool,
-            slotProps: PropTypes.shape({
-                avatar: PropTypes.object,
-                avatarIconButton: PropTypes.object,
-                moreIconButton: PropTypes.object
-            }),
-            slots: PropTypes.shape({
-                avatar: PropTypes.elementType,
-                avatarIconButton: PropTypes.elementType,
-                moreIconButton: PropTypes.elementType
-            }),
-            variant: PropTypes.oneOf(["condensed", "expanded"])
-        }),
-        signInButton: PropTypes.object,
-        signOutButton: PropTypes.object
-    }),
-    /**
-     * The components used for each slot inside.
-     */
-    slots: PropTypes.shape({
-        popover: PropTypes.elementType,
-        popoverContent: PropTypes.elementType,
-        preview: PropTypes.elementType,
-        signInButton: PropTypes.elementType,
-        signOutButton: PropTypes.elementType
-    })
-};
 export { Account };

package/build/Account/AccountPreview.d.ts

@@ -61,7 +61,4 @@ export interface AccountPreviewProps {
  * - [AccountPreview API](https://mui.com/toolpad/core/api/account-preview)
  */
 declare function AccountPreview(props: AccountPreviewProps): import("react/jsx-runtime").JSX.Element | null;
-declare namespace AccountPreview {
-    var propTypes: any;
-}
 export { AccountPreview };

package/build/Account/AccountPreview.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import PropTypes from "prop-types";
 import Avatar from "@mui/material/Avatar";
 import Typography from "@mui/material/Typography";
 import Tooltip from "@mui/material/Tooltip";
@@ -56,40 +55,4 @@ function AccountPreview(props) {
     }
     return (_jsx(Tooltip, { title: session.user.name ?? "Account", children: slots?.avatarIconButton ? (_jsx(slots.avatarIconButton, {})) : (_jsx(IconButton, { onClick: handleClick, "aria-label": localeText.accountIconButtonAriaLabel, size: "small", "aria-controls": open ? "account-menu" : undefined, "aria-haspopup": "true", "aria-expanded": open ? "true" : undefined, ...slotProps?.avatarIconButton, children: avatarContent })) }));
 }
-AccountPreview.propTypes /* remove-proptypes */ = {
-    // ┌────────────────────────────── Warning ──────────────────────────────┐
-    // │ These PropTypes are generated from the TypeScript type definitions. │
-    // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
-    // └─────────────────────────────────────────────────────────────────────┘
-    /**
-     * The handler used when the preview is expanded
-     */
-    handleClick: PropTypes.func,
-    /**
-     * The state of the Account popover
-     * @default false
-     */
-    open: PropTypes.bool,
-    /**
-     * The props used for each slot inside.
-     */
-    slotProps: PropTypes.shape({
-        avatar: PropTypes.object,
-        avatarIconButton: PropTypes.object,
-        moreIconButton: PropTypes.object
-    }),
-    /**
-     * The components used for each slot inside.
-     */
-    slots: PropTypes.shape({
-        avatar: PropTypes.elementType
-    }),
-    /**
-     * The type of account details to display.
-     * @property {'condensed'} condensed - Shows only the user's avatar.
-     * @property {'expanded'} expanded - Displays the user's avatar, name, and email if available.
-     * @default 'condensed'
-     */
-    variant: PropTypes.oneOf(["condensed", "expanded"])
-};
 export { AccountPreview };

package/build/AppProvider/AppProvider.d.ts

@@ -16,7 +16,7 @@ export interface Router {
     navigate: Navigate;
 }
 export interface Branding {
-    title?: string | React.ReactNode | [string, (handler: React.MouseEvent<HTMLSpanElement>) => void];
+    title?: React.ReactNode | [string, (handler: React.MouseEvent<HTMLSpanElement>) => void];
     logo?: React.ReactNode;
 }
 export interface NavigationPageItem {
@@ -27,6 +27,7 @@ export interface NavigationPageItem {
     pattern?: string;
     action?: React.ReactNode;
     children?: Navigation;
+    subs?: string[];
 }
 export interface NavigationSubheaderItem {
     kind: "header";

package/build/AppProvider/AppProviderComponent.d.ts

@@ -11,7 +11,4 @@ import { AppProviderProps } from "./AppProvider";
  * - [AppProvider API](https://mui.com/toolpad/core/api/app-provider)
  */
 declare function AppProvider(props: AppProviderProps): import("react/jsx-runtime").JSX.Element;
-declare namespace AppProvider {
-    var propTypes: any;
-}
 export { AppProvider };

package/build/AppProvider/AppProviderComponent.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import PropTypes from "prop-types";
 import { BrandingContext, NavigationContext, RouterContext, WindowContext } from "../shared/context";
 import { AppThemeProvider } from "./AppThemeProvider";
 import { createTheme as createMuiTheme } from "@mui/material/styles";
@@ -29,93 +28,4 @@ function AppProvider(props) {
     const { children, theme = createTheme(), branding = null, localeText, navigation = [], router = null, authentication = null, session = null, window: appWindow } = props;
     return (_jsx(WindowContext.Provider, { value: appWindow, children: _jsx(AuthenticationContext.Provider, { value: authentication, children: _jsx(SessionContext.Provider, { value: session, children: _jsx(RouterContext.Provider, { value: router, children: _jsx(AppThemeProvider, { theme: theme, window: appWindow, children: _jsx(LocaleProvider, { localeText: localeText, children: _jsx(BrandingContext.Provider, { value: branding, children: _jsx(NavigationContext.Provider, { value: navigation, children: children }) }) }) }) }) }) }) }));
 }
-AppProvider.propTypes /* remove-proptypes */ = {
-    // ┌────────────────────────────── Warning ──────────────────────────────┐
-    // │ These PropTypes are generated from the TypeScript type definitions. │
-    // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
-    // └─────────────────────────────────────────────────────────────────────┘
-    /**
-     * Authentication methods.
-     * @default null
-     */
-    authentication: PropTypes.shape({
-        signIn: PropTypes.func.isRequired,
-        signOut: PropTypes.func.isRequired
-    }),
-    /**
-     * Branding options for the app.
-     * @default null
-     */
-    branding: PropTypes.shape({
-        logo: PropTypes.node,
-        title: PropTypes.node
-    }),
-    /**
-     * The content of the app provider.
-     */
-    children: PropTypes.node,
-    /**
-     * Navigation definition for the app.
-     * @default []
-     */
-    navigation: PropTypes.arrayOf(PropTypes.oneOfType([
-        PropTypes.shape({
-            action: PropTypes.node,
-            children: PropTypes.arrayOf(PropTypes.oneOfType([
-                PropTypes.object,
-                PropTypes.shape({
-                    kind: PropTypes.oneOf(["header"]).isRequired,
-                    title: PropTypes.string.isRequired
-                }),
-                PropTypes.shape({
-                    kind: PropTypes.oneOf(["divider"]).isRequired
-                })
-            ]).isRequired),
-            icon: PropTypes.node,
-            kind: PropTypes.oneOf(["page"]),
-            pattern: PropTypes.string,
-            segment: PropTypes.string,
-            title: PropTypes.string
-        }),
-        PropTypes.shape({
-            kind: PropTypes.oneOf(["header"]).isRequired,
-            title: PropTypes.string.isRequired
-        }),
-        PropTypes.shape({
-            kind: PropTypes.oneOf(["divider"]).isRequired
-        })
-    ]).isRequired),
-    /**
-     * Router implementation used inside Toolpad components.
-     * @default null
-     */
-    router: PropTypes.shape({
-        navigate: PropTypes.func.isRequired,
-        pathname: PropTypes.string.isRequired,
-        searchParams: PropTypes.instanceOf(URLSearchParams).isRequired
-    }),
-    /**
-     * Session info about the current user.
-     * @default null
-     */
-    session: PropTypes.shape({
-        user: PropTypes.shape({
-            email: PropTypes.string,
-            id: PropTypes.string,
-            image: PropTypes.string,
-            name: PropTypes.string
-        })
-    }),
-    /**
-     * [Theme or themes](https://mui.com/toolpad/core/react-app-provider/#theming) to be used by the app in light/dark mode. A [CSS variables theme](https://mui.com/material-ui/customization/css-theme-variables/overview/) is recommended.
-     * @default createTheme()
-     */
-    theme: PropTypes.object,
-    /**
-     * The window where the application is rendered.
-     * This is needed when rendering the app inside an iframe, for example.
-     * @default window
-     */
-    window: PropTypes.object
-};
 export { AppProvider };

package/build/DashboardLayout/DashboardLayout.d.ts

@@ -88,7 +88,4 @@ export interface DashboardLayoutProps {
  * - [DashboardLayout API](https://mui.com/toolpad/core/api/dashboard-layout)
  */
 declare function DashboardLayout(props: DashboardLayoutProps): import("react/jsx-runtime").JSX.Element;
-declare namespace DashboardLayout {
-    var propTypes: any;
-}
 export { DashboardLayout };

package/build/DashboardLayout/DashboardLayout.js

@@ -1,7 +1,6 @@
 "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";
@@ -191,85 +190,4 @@ function DashboardLayout(props) {
                             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/DashboardLayout/DashboardSidebarSubNavigation.js

@@ -97,12 +97,10 @@ function DashboardSidebarSubNavigation({ subNavigation, basePath = "", depth = 0
             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 the item is selected, we don't want to select more
+            const isSelected = selectedItemId
+                ? false
+                : isPageItemSelected(navigationItem, basePath, pathname);
             if (isSelected && !selectedItemId) {
                 selectedItemId = navigationItemId;
             }

package/build/DashboardLayout/TitleBar.js

@@ -42,7 +42,10 @@ export function TitleBar() {
         }
         return [title, false];
     }, [title]);
-    if (!hasLink)
+    if (hasLink) {
+        return (_jsx(Link, { href: "/", style: { color: "inherit", textDecoration: "none" }, children: _jsxs(Stack, { direction: "row", alignItems: "center", children: [branding?.logo && _jsx(LogoContainer, { children: branding.logo }), titleUI] }) }));
+    }
+    else {
         return titleUI;
-    return (_jsx(Link, { href: "/", style: { color: "inherit", textDecoration: "none" }, children: _jsxs(Stack, { direction: "row", alignItems: "center", children: [branding?.logo && _jsx(LogoContainer, { children: branding.logo }), titleUI] }) }));
+    }
 }

package/build/PageContainer/PageContainer.d.ts

@@ -21,20 +21,18 @@ export interface Breadcrumb {
      */
     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.
-     */
+export type PageData = {
     title?: string;
-    /**
-     * The breadcrumbs of the page. Leave blank to use the active page breadcrumbs.
-     */
+    page?: string;
     breadcrumbs?: Breadcrumb[];
+};
+type PageDataAction = PageData | true;
+export declare const PageDataContext: React.Context<{
+    state: PageData;
+    dispatch: React.Dispatch<PageDataAction>;
+}>;
+export declare function PageDataContextProvider(props: React.PropsWithChildren<PageData>): import("react/jsx-runtime").JSX.Element;
+export type PageContainerProps = React.PropsWithChildren<ContainerProps & {
     /**
      * The components used for each slot inside.
      */
@@ -43,7 +41,7 @@ export interface PageContainerProps extends ContainerProps {
      * The props used for each slot inside.
      */
     slotProps?: PageContainerSlotProps;
-}
+}>;
 /**
  * A container component to provide a title and breadcrumbs for your pages.
  *
@@ -56,7 +54,4 @@ export interface PageContainerProps extends ContainerProps {
  * - [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/PageContainer/PageContainer.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import PropTypes from "prop-types";
+import * as React from "react";
 import Breadcrumbs from "@mui/material/Breadcrumbs";
 import Container from "@mui/material/Container";
 import Link from "@mui/material/Link";
@@ -18,6 +18,29 @@ const PageContentHeader = styled("div")(({ theme }) => ({
     justifyContent: "space-between",
     gap: theme.spacing(2)
 }));
+export const PageDataContext = React.createContext({ state: {}, dispatch: (value) => value });
+function reducer(state, action) {
+    if (action === true) {
+        // Reset the state
+        if (state.breadcrumbs == null &&
+            state.title == null &&
+            state.page == null) {
+            return state;
+        }
+        else {
+            return {};
+        }
+    }
+    return { ...state, ...action };
+}
+export function PageDataContextProvider(props) {
+    // Destruct
+    const { title, breadcrumbs, ...rest } = props;
+    // useReducer hook to manage state with our reducer function and initial state
+    const [state, dispatch] = React.useReducer(reducer, { title, breadcrumbs });
+    // Provide the state and dispatch function to the context value
+    return _jsx(PageDataContext.Provider, { value: { state, dispatch }, ...rest });
+}
 /**
  * A container component to provide a title and breadcrumbs for your pages.
  *
@@ -30,11 +53,26 @@ const PageContentHeader = styled("div")(({ theme }) => ({
  * - [PageContainer API](https://mui.com/toolpad/core/api/page-container)
  */
 function PageContainer(props) {
-    const { children, slots, slotProps, breadcrumbs, ...rest } = props;
+    const { children, slots, slotProps, ...rest } = props;
+    const loaded = React.useRef(false);
+    const { state, dispatch } = React.useContext(PageDataContext);
     const activePage = useActivePage();
-    // TODO: Remove `props.breadCrumbs` in the next major version
-    const resolvedBreadcrumbs = breadcrumbs ?? activePage?.breadcrumbs ?? [];
-    const title = props.title ?? activePage?.title ?? "";
+    React.useLayoutEffect(() => {
+        if (loaded.current) {
+            dispatch(true);
+        }
+        else {
+            loaded.current = true;
+        }
+    }, [activePage?.sourcePath]);
+    let resolvedBreadcrumbs = state.breadcrumbs ?? activePage?.breadcrumbs ?? [];
+    const title = state.title ?? activePage?.title ?? "";
+    if (state.page) {
+        resolvedBreadcrumbs = [
+            ...resolvedBreadcrumbs,
+            { title: state.page, path: "#" }
+        ];
+    }
     const ToolbarComponent = props?.slots?.toolbar ?? PageContainerToolbar;
     const toolbarSlotProps = useSlotProps({
         elementType: ToolbarComponent,
@@ -48,39 +86,4 @@ function PageContainer(props) {
                                 })
                                 : 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
-    })),
-    /**
-     * @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/PageContainer/PageContainer.test.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { expect, describe, test, vi } from "vitest";
-import { render, within, screen } from "@testing-library/react";
+import { render, within, screen, act } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
-import { PageContainer } from "./PageContainer";
+import { PageContainer, PageDataContextProvider } from "./PageContainer";
 import describeConformance from "../utils/describeConformance";
 import { AppProvider } from "../AppProvider/AppProviderComponent";
 describe("PageContainer", () => {
@@ -13,16 +13,18 @@ describe("PageContainer", () => {
         }
     }));
     test("renders page container correctly", async () => {
-        const user = await userEvent.setup();
+        const user = 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, {}) }));
+        act(() => {
+            render(_jsx(AppProvider, { navigation: [
+                    { segment: "", title: "Home" },
+                    { segment: "orders", title: "Orders" }
+                ], router: router, children: _jsx(PageDataContextProvider, { children: _jsx(PageContainer, {}) }) }));
+        });
         const breadcrumbs = screen.getByRole("navigation", { name: "breadcrumb" });
         const homeLink = within(breadcrumbs).getByRole("link", { name: "Home" });
         await user.click(homeLink);
@@ -51,23 +53,27 @@ describe("PageContainer", () => {
             navigate: vi.fn()
         };
         const branding = { title: "ACME" };
-        render(_jsx(AppProvider, { branding: branding, navigation: navigation, router: router, children: _jsx(PageContainer, {}) }));
+        act(() => {
+            render(_jsx(AppProvider, { branding: branding, navigation: navigation, router: router, children: _jsx(PageDataContextProvider, { 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 user = 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, {}) }));
+        act(() => {
+            render(_jsx(AppProvider, { navigation: [
+                    { segment: "", title: "Home" },
+                    { segment: "orders", title: "Orders", pattern: "orders/:id" }
+                ], router: router, children: _jsx(PageDataContextProvider, { children: _jsx(PageContainer, {}) }) }));
+        });
         const breadcrumbs = screen.getByRole("navigation", { name: "breadcrumb" });
         const homeLink = within(breadcrumbs).getByRole("link", { name: "Home" });
         await user.click(homeLink);
@@ -82,29 +88,33 @@ describe("PageContainer", () => {
             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, {}) }));
+        act(() => {
+            render(_jsx(AppProvider, { navigation: [
+                    {
+                        segment: "users",
+                        title: "Users",
+                        children: [
+                            {
+                                segment: "invoices",
+                                title: "Invoices",
+                                pattern: "invoices/:id"
+                            }
+                        ]
+                    }
+                ], router: router, children: _jsx(PageDataContextProvider, { 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" }
-            ] }));
+        act(() => {
+            render(_jsx(PageDataContextProvider, { breadcrumbs: [
+                    { title: "Hello", path: "/hello" },
+                    { title: "World", path: "/world" }
+                ], children: _jsx(PageContainer, {}) }));
+        });
         const breadcrumbs = screen.getByRole("navigation", { name: "breadcrumb" });
         const helloLink = within(breadcrumbs).getByRole("link", { name: "Hello" });
         expect(helloLink.getAttribute("href")).toBe("/hello");