@etsoo/toolpad 1.0.10 → 1.0.11

package/build/AppProvider/AppProvider.d.ts

@@ -27,6 +27,7 @@ export interface NavigationPageItem {
     pattern?: string;
     action?: React.ReactNode;
     children?: Navigation;
+    subs?: string[];
 }
 export interface NavigationSubheaderItem {
     kind: "header";

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/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.
  *

package/build/PageContainer/PageContainer.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import Breadcrumbs from "@mui/material/Breadcrumbs";
 import Container from "@mui/material/Container";
 import Link from "@mui/material/Link";
@@ -17,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.
  *
@@ -29,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,

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");

package/build/shared/navigation.js

@@ -9,9 +9,13 @@ export function getPageItemFullPath(basePath, navigationItem) {
     return `${basePath}${basePath && !navigationItem.segment ? "" : "/"}${navigationItem.segment ?? ""}`;
 }
 export function isPageItemSelected(navigationItem, basePath, pathname) {
-    return navigationItem.pattern
-        ? pathToRegexp(`${basePath}/${navigationItem.pattern}`).test(pathname)
-        : getPageItemFullPath(basePath, navigationItem) === pathname;
+    if (navigationItem.pattern) {
+        return pathToRegexp(`${basePath}/${navigationItem.pattern}`).test(pathname);
+    }
+    if (navigationItem.subs) {
+        return navigationItem.subs.some((sub) => new RegExp(sub).test(pathname));
+    }
+    return getPageItemFullPath(basePath, navigationItem) === pathname;
 }
 export function hasSelectedNavigationChildren(navigationItem, basePath, pathname) {
     if (isPageItem(navigationItem) && navigationItem.children) {
@@ -109,11 +113,15 @@ function getItemLookup(navigation) {
 export function matchPath(navigation, path) {
     const lookup = getItemLookup(navigation);
     for (const [key, item] of lookup.entries()) {
-        if (typeof key === "string" && key === path) {
-            return item;
+        if (typeof key === "string") {
+            if (key === path)
+                return item;
+            else if (item.subs?.some((sub) => new RegExp(sub).test(path)))
+                return item;
         }
-        if (key instanceof RegExp && key.test(path)) {
-            return item;
+        else if (key instanceof RegExp) {
+            if (key.test(path))
+                return item;
         }
     }
     return null;

package/build/useActivePage/useActivePage.d.ts

@@ -2,10 +2,7 @@ import type { Breadcrumb } from "../PageContainer";
 export interface ActivePage {
     title: string;
     path: string;
-    /**
-     * @deprecated Use `breadcrumbs` instead.
-     */
-    breadCrumbs: Breadcrumb[];
+    sourcePath: string;
     breadcrumbs: Breadcrumb[];
 }
 export declare function useActivePage(): ActivePage | null;

package/build/useActivePage/useActivePage.js

@@ -40,9 +40,8 @@ export function useActivePage() {
         return {
             title: getItemTitle(activeItem),
             path: getItemPath(navigationContext, activeItem),
-            breadcrumbs,
-            // TODO: Remove in the next major version
-            breadCrumbs: breadcrumbs
+            sourcePath: pathname,
+            breadcrumbs
         };
     }, [activeItem, rootItem, pathname, navigationContext]);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/toolpad",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "author": "ETSOO",
   "description": "Dashboard framework extention based on Toolpad Core",
   "main": "build/index.js",

package/src/AppProvider/AppProvider.tsx

@@ -35,6 +35,7 @@ export interface NavigationPageItem {
   pattern?: string;
   action?: React.ReactNode;
   children?: Navigation;
+  subs?: string[];
 }
 
 export interface NavigationSubheaderItem {

package/src/DashboardLayout/DashboardSidebarSubNavigation.tsx

@@ -175,21 +175,10 @@ function DashboardSidebarSubNavigation({
 
         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/src/PageContainer/PageContainer.test.tsx

@@ -1,7 +1,7 @@
 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";
 
@@ -14,23 +14,28 @@ 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(
-      <AppProvider
-        navigation={[
-          { segment: "", title: "Home" },
-          { segment: "orders", title: "Orders" }
-        ]}
-        router={router}
-      >
-        <PageContainer />
-      </AppProvider>
-    );
+
+    act(() => {
+      render(
+        <AppProvider
+          navigation={[
+            { segment: "", title: "Home" },
+            { segment: "orders", title: "Orders" }
+          ]}
+          router={router}
+        >
+          <PageDataContextProvider>
+            <PageContainer />
+          </PageDataContextProvider>
+        </AppProvider>
+      );
+    });
 
     const breadcrumbs = screen.getByRole("navigation", { name: "breadcrumb" });
 
@@ -70,11 +75,20 @@ describe("PageContainer", () => {
     };
 
     const branding = { title: "ACME" };
-    render(
-      <AppProvider branding={branding} navigation={navigation} router={router}>
-        <PageContainer />
-      </AppProvider>
-    );
+
+    act(() => {
+      render(
+        <AppProvider
+          branding={branding}
+          navigation={navigation}
+          router={router}
+        >
+          <PageDataContextProvider>
+            <PageContainer />
+          </PageDataContextProvider>
+        </AppProvider>
+      );
+    });
 
     const breadcrumbs = screen.getByRole("navigation", { name: "breadcrumb" });
 
@@ -84,27 +98,33 @@ describe("PageContainer", () => {
   });
 
   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(
-      <AppProvider
-        navigation={[
-          { segment: "", title: "Home" },
-          { segment: "orders", title: "Orders", pattern: "orders/:id" }
-        ]}
-        router={router}
-      >
-        <PageContainer />
-      </AppProvider>
-    );
+
+    act(() => {
+      render(
+        <AppProvider
+          navigation={[
+            { segment: "", title: "Home" },
+            { segment: "orders", title: "Orders", pattern: "orders/:id" }
+          ]}
+          router={router}
+        >
+          <PageDataContextProvider>
+            <PageContainer />
+          </PageDataContextProvider>
+        </AppProvider>
+      );
+    });
 
     const breadcrumbs = screen.getByRole("navigation", { name: "breadcrumb" });
 
     const homeLink = within(breadcrumbs).getByRole("link", { name: "Home" });
+
     await user.click(homeLink);
 
     expect(router.navigate).toHaveBeenCalledWith(
@@ -124,26 +144,31 @@ describe("PageContainer", () => {
       searchParams: new URLSearchParams(),
       navigate: vi.fn()
     };
-    render(
-      <AppProvider
-        navigation={[
-          {
-            segment: "users",
-            title: "Users",
-            children: [
-              {
-                segment: "invoices",
-                title: "Invoices",
-                pattern: "invoices/:id"
-              }
-            ]
-          }
-        ]}
-        router={router}
-      >
-        <PageContainer />
-      </AppProvider>
-    );
+
+    act(() => {
+      render(
+        <AppProvider
+          navigation={[
+            {
+              segment: "users",
+              title: "Users",
+              children: [
+                {
+                  segment: "invoices",
+                  title: "Invoices",
+                  pattern: "invoices/:id"
+                }
+              ]
+            }
+          ]}
+          router={router}
+        >
+          <PageDataContextProvider>
+            <PageContainer />
+          </PageDataContextProvider>
+        </AppProvider>
+      );
+    });
 
     const breadcrumbs = screen.getByRole("navigation", { name: "breadcrumb" });
 
@@ -153,14 +178,18 @@ describe("PageContainer", () => {
   });
 
   test("renders custom breadcrumbs", async () => {
-    render(
-      <PageContainer
-        breadcrumbs={[
-          { title: "Hello", path: "/hello" },
-          { title: "World", path: "/world" }
-        ]}
-      />
-    );
+    act(() => {
+      render(
+        <PageDataContextProvider
+          breadcrumbs={[
+            { title: "Hello", path: "/hello" },
+            { title: "World", path: "/world" }
+          ]}
+        >
+          <PageContainer />
+        </PageDataContextProvider>
+      );
+    });
 
     const breadcrumbs = screen.getByRole("navigation", { name: "breadcrumb" });
 

package/src/PageContainer/PageContainer.tsx

@@ -45,32 +45,62 @@ export interface Breadcrumb {
   path: string;
 }
 
-// TODO: Remove in the next major version
-/**
- * @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[];
-  /**
-   * The components used for each slot inside.
-   */
-  slots?: PageContainerSlots;
-  /**
-   * The props used for each slot inside.
-   */
-  slotProps?: PageContainerSlotProps;
+};
+
+type PageDataAction = PageData | true;
+
+export const PageDataContext = React.createContext<{
+  state: PageData;
+  dispatch: React.Dispatch<PageDataAction>;
+}>({ state: {}, dispatch: (value) => value });
+
+function reducer(state: PageData, action: PageDataAction) {
+  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: React.PropsWithChildren<PageData>
+) {
+  // 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 <PageDataContext.Provider value={{ state, dispatch }} {...rest} />;
+}
+
+export type PageContainerProps = React.PropsWithChildren<
+  ContainerProps & {
+    /**
+     * 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.
  *
@@ -83,13 +113,30 @@ export interface PageContainerProps extends ContainerProps {
  * - [PageContainer API](https://mui.com/toolpad/core/api/page-container)
  */
 function PageContainer(props: PageContainerProps) {
-  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({

package/src/shared/navigation.tsx

@@ -32,9 +32,15 @@ export function isPageItemSelected(
   basePath: string,
   pathname: string
 ) {
-  return navigationItem.pattern
-    ? pathToRegexp(`${basePath}/${navigationItem.pattern}`).test(pathname)
-    : getPageItemFullPath(basePath, navigationItem) === pathname;
+  if (navigationItem.pattern) {
+    return pathToRegexp(`${basePath}/${navigationItem.pattern}`).test(pathname);
+  }
+
+  if (navigationItem.subs) {
+    return navigationItem.subs.some((sub) => new RegExp(sub).test(pathname));
+  }
+
+  return getPageItemFullPath(basePath, navigationItem) === pathname;
 }
 
 export function hasSelectedNavigationChildren(
@@ -172,11 +178,12 @@ export function matchPath(
   const lookup = getItemLookup(navigation);
 
   for (const [key, item] of lookup.entries()) {
-    if (typeof key === "string" && key === path) {
-      return item;
-    }
-    if (key instanceof RegExp && key.test(path)) {
-      return item;
+    if (typeof key === "string") {
+      if (key === path) return item;
+      else if (item.subs?.some((sub) => new RegExp(sub).test(path)))
+        return item;
+    } else if (key instanceof RegExp) {
+      if (key.test(path)) return item;
     }
   }
 

package/src/useActivePage/useActivePage.ts

@@ -7,10 +7,7 @@ import type { Breadcrumb } from "../PageContainer";
 export interface ActivePage {
   title: string;
   path: string;
-  /**
-   * @deprecated Use `breadcrumbs` instead.
-   */
-  breadCrumbs: Breadcrumb[];
+  sourcePath: string;
   breadcrumbs: Breadcrumb[];
 }
 
@@ -58,9 +55,8 @@ export function useActivePage(): ActivePage | null {
     return {
       title: getItemTitle(activeItem),
       path: getItemPath(navigationContext, activeItem),
-      breadcrumbs,
-      // TODO: Remove in the next major version
-      breadCrumbs: breadcrumbs
+      sourcePath: pathname,
+      breadcrumbs
     };
   }, [activeItem, rootItem, pathname, navigationContext]);
 }