@etsoo/toolpad 1.0.29 → 1.0.31

package/build/cjs/AppProvider/AppProvider.d.ts

@@ -28,6 +28,7 @@ export interface NavigationPageItem {
     action?: React.ReactNode;
     children?: Navigation;
     hidden?: boolean;
+    pageHeader?: React.ReactNode;
 }
 export interface NavigationSubheaderItem {
     kind: "header";

package/build/cjs/PageContainer/PageContainer.d.ts

@@ -25,8 +25,7 @@ export type PageData = {
     title?: string;
     page?: string;
     breadcrumbs?: Breadcrumb[];
-    noBreadcrumbs?: boolean;
-    noPageHeader?: boolean;
+    pageHeader?: React.ReactNode;
 };
 type PageDataAction = PageData;
 export declare const PageDataContext: React.Context<{
@@ -35,10 +34,6 @@ export declare const PageDataContext: React.Context<{
 }>;
 export declare function PageDataContextProvider(props: React.PropsWithChildren<PageData>): import("react/jsx-runtime").JSX.Element;
 type PageContainerBarProps = {
-    /**
-     * The default title of the page.
-     */
-    defaultTitle?: string;
     /**
      * The components used for each slot inside.
      */
@@ -47,6 +42,10 @@ type PageContainerBarProps = {
      * The props used for each slot inside.
      */
     slotProps?: PageContainerSlotProps;
+    /**
+     * The component that renders the actions toolbar.
+     */
+    titleBar?: false | ((title: string) => React.ReactNode);
 };
 export type PageContainerProps = React.PropsWithChildren<StackProps & PageContainerBarProps>;
 /**

package/build/cjs/PageContainer/PageContainer.js

@@ -64,7 +64,7 @@ function reducer(state, action) {
     let key;
     let isSame = true;
     for (key in action) {
-        if (action[key] !== state[key]) {
+        if (action[key] != state[key]) {
             isSame = false;
             break;
         }
@@ -76,38 +76,30 @@ function reducer(state, action) {
 }
 function PageDataContextProvider(props) {
     // Destruct
-    const { title, page, breadcrumbs, noBreadcrumbs, noPageHeader, ...rest } = props;
+    const { title, page, breadcrumbs, pageHeader, ...rest } = props;
     // useReducer hook to manage state with our reducer function and initial state
     const [state, dispatch] = React.useReducer(reducer, {
         title,
         page,
         breadcrumbs,
-        noBreadcrumbs,
-        noPageHeader
+        pageHeader
     });
     // Provide the state and dispatch function to the context value
     return (0, jsx_runtime_1.jsx)(exports.PageDataContext.Provider, { value: { state, dispatch }, ...rest });
 }
 function PageContainerBar(props) {
-    const { defaultTitle, slots, slotProps } = props;
+    const { slots, slotProps, titleBar } = props;
     const { state } = React.useContext(exports.PageDataContext);
     const activePage = (0, useActivePage_1.useActivePage)();
-    React.useLayoutEffect(() => {
-        // Reset the state without rerendering
-        state.breadcrumbs = undefined;
-        state.noBreadcrumbs = undefined;
-        state.noPageHeader = undefined;
-        state.page = undefined;
-        state.title = undefined;
+    React.useEffect(() => {
+        return () => {
+            // Reset the state when the component unmounts
+            state.breadcrumbs = undefined;
+            state.page = undefined;
+            state.pageHeader = undefined;
+            state.title = undefined;
+        };
     }, [activePage?.sourcePath]);
-    let resolvedBreadcrumbs = state.breadcrumbs ?? activePage?.breadcrumbs ?? [];
-    const title = state.title ?? defaultTitle ?? activePage?.title ?? "";
-    if (state.page) {
-        resolvedBreadcrumbs = [
-            ...resolvedBreadcrumbs,
-            { title: state.page, path: "#" }
-        ];
-    }
     const ToolbarComponent = slots?.toolbar ?? PageContainerToolbar_1.PageContainerToolbar;
     const toolbarSlotProps = (0, useSlotProps_1.default)({
         elementType: ToolbarComponent,
@@ -115,11 +107,21 @@ function PageContainerBar(props) {
         externalSlotProps: slotProps?.toolbar,
         additionalProps: {}
     });
-    return state.noPageHeader !== true ? ((0, jsx_runtime_1.jsxs)(Stack_1.default, { children: [state.noBreadcrumbs !== true && ((0, jsx_runtime_1.jsx)(Breadcrumbs_1.default, { "aria-label": "breadcrumb", children: resolvedBreadcrumbs
-                    ? resolvedBreadcrumbs.map((item, index) => {
-                        return index < resolvedBreadcrumbs.length - 1 ? ((0, jsx_runtime_1.jsx)(Link_1.default, { component: Link_2.Link, underline: "hover", color: "inherit", href: item.path, children: (0, navigation_1.getItemTitle)(item) }, item.path)) : ((0, jsx_runtime_1.jsx)(Typography_1.default, { color: "text.primary", children: (0, navigation_1.getItemTitle)(item) }, item.path));
-                    })
-                    : null })), (0, jsx_runtime_1.jsxs)(PageContentHeader, { children: [title ? (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "h4", children: title }) : null, (0, jsx_runtime_1.jsx)(ToolbarComponent, { ...toolbarSlotProps })] })] })) : undefined;
+    const breadcrumbs = state.breadcrumbs ?? activePage?.breadcrumbs ?? [];
+    const title = state.title ?? activePage?.title ?? "";
+    const pageHeader = state.pageHeader ?? activePage?.pageHeader ?? null;
+    // No page header
+    if (pageHeader === false)
+        return undefined;
+    // Custom page header
+    if (pageHeader != null)
+        return pageHeader;
+    if (state.page) {
+        breadcrumbs.push({ title: state.page, path: "#" });
+    }
+    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { children: [breadcrumbs && ((0, jsx_runtime_1.jsx)(Breadcrumbs_1.default, { "aria-label": "breadcrumb", children: breadcrumbs.map((item, index) => {
+                    return index < breadcrumbs.length - 1 ? ((0, jsx_runtime_1.jsx)(Link_1.default, { component: Link_2.Link, underline: "hover", color: "inherit", href: item.path, children: (0, navigation_1.getItemTitle)(item) }, item.path)) : ((0, jsx_runtime_1.jsx)(Typography_1.default, { color: "text.primary", children: (0, navigation_1.getItemTitle)(item) }, item.path));
+                }) })), (0, jsx_runtime_1.jsxs)(PageContentHeader, { children: [typeof titleBar === "function" ? (titleBar(title)) : titleBar === false ? undefined : ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "h4", children: title })), (0, jsx_runtime_1.jsx)(ToolbarComponent, { ...toolbarSlotProps })] })] }));
 }
 /**
  * A container component to provide a title and breadcrumbs for your pages.
@@ -133,6 +135,6 @@ function PageContainerBar(props) {
  * - [PageContainer API](https://mui.com/toolpad/core/api/page-container)
  */
 function PageContainer(props) {
-    const { children, defaultTitle, slots, slotProps, ...rest } = props;
-    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { sx: { mx: 3, my: 2 }, spacing: 2, ...rest, children: [(0, jsx_runtime_1.jsx)(PageContainerBar, { defaultTitle: defaultTitle, slots: slots, slotProps: slotProps }), children] }));
+    const { children, slots, slotProps, titleBar, ...rest } = props;
+    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { sx: { mx: 3, my: 2 }, spacing: 2, ...rest, children: [(0, jsx_runtime_1.jsx)(PageContainerBar, { slots: slots, slotProps: slotProps, titleBar: titleBar }), children] }));
 }

package/build/cjs/useActivePage/useActivePage.d.ts

@@ -1,8 +1,10 @@
+import * as React from "react";
 import type { Breadcrumb } from "../PageContainer";
 export interface ActivePage {
     title: string;
     path: string;
     sourcePath: string;
     breadcrumbs: Breadcrumb[];
+    pageHeader?: React.ReactNode;
 }
 export declare function useActivePage(): ActivePage | null;

package/build/cjs/useActivePage/useActivePage.js

@@ -41,14 +41,13 @@ const navigation_1 = require("../shared/navigation");
 function useActivePage() {
     const navigationContext = React.useContext(context_1.NavigationContext);
     const routerContext = React.useContext(context_1.RouterContext);
-    const pageRef = React.useRef(null);
-    let pathname = routerContext?.pathname ?? "/";
+    const pathname = routerContext?.pathname ?? "/";
     const activeItem = (0, navigation_1.matchPath)(navigationContext, pathname);
     const rootItem = (0, navigation_1.matchPath)(navigationContext, "/");
-    if (!activeItem) {
-        pageRef.current = null;
-    }
-    else {
+    return React.useMemo(() => {
+        if (!activeItem) {
+            return null;
+        }
         const breadcrumbs = [];
         if (rootItem) {
             breadcrumbs.push({
@@ -74,19 +73,12 @@ function useActivePage() {
                 });
             }
         }
-        const title = (0, navigation_1.getItemTitle)(activeItem);
-        const path = (0, navigation_1.getItemPath)(navigationContext, activeItem);
-        if (pageRef.current == null ||
-            pageRef.current.title !== title ||
-            pageRef.current.path !== path ||
-            pageRef.current.sourcePath !== pathname) {
-            pageRef.current = {
-                title,
-                path,
-                sourcePath: pathname,
-                breadcrumbs
-            };
-        }
-    }
-    return pageRef.current;
+        return {
+            title: (0, navigation_1.getItemTitle)(activeItem),
+            path: (0, navigation_1.getItemPath)(navigationContext, activeItem),
+            sourcePath: pathname,
+            breadcrumbs,
+            pageHeader: activeItem.pageHeader
+        };
+    }, [activeItem, rootItem, pathname, navigationContext]);
 }

package/build/mjs/AppProvider/AppProvider.d.ts

@@ -28,6 +28,7 @@ export interface NavigationPageItem {
     action?: React.ReactNode;
     children?: Navigation;
     hidden?: boolean;
+    pageHeader?: React.ReactNode;
 }
 export interface NavigationSubheaderItem {
     kind: "header";

package/build/mjs/PageContainer/PageContainer.d.ts

@@ -25,8 +25,7 @@ export type PageData = {
     title?: string;
     page?: string;
     breadcrumbs?: Breadcrumb[];
-    noBreadcrumbs?: boolean;
-    noPageHeader?: boolean;
+    pageHeader?: React.ReactNode;
 };
 type PageDataAction = PageData;
 export declare const PageDataContext: React.Context<{
@@ -35,10 +34,6 @@ export declare const PageDataContext: React.Context<{
 }>;
 export declare function PageDataContextProvider(props: React.PropsWithChildren<PageData>): import("react/jsx-runtime").JSX.Element;
 type PageContainerBarProps = {
-    /**
-     * The default title of the page.
-     */
-    defaultTitle?: string;
     /**
      * The components used for each slot inside.
      */
@@ -47,6 +42,10 @@ type PageContainerBarProps = {
      * The props used for each slot inside.
      */
     slotProps?: PageContainerSlotProps;
+    /**
+     * The component that renders the actions toolbar.
+     */
+    titleBar?: false | ((title: string) => React.ReactNode);
 };
 export type PageContainerProps = React.PropsWithChildren<StackProps & PageContainerBarProps>;
 /**

package/build/mjs/PageContainer/PageContainer.js

@@ -23,7 +23,7 @@ function reducer(state, action) {
     let key;
     let isSame = true;
     for (key in action) {
-        if (action[key] !== state[key]) {
+        if (action[key] != state[key]) {
             isSame = false;
             break;
         }
@@ -35,38 +35,30 @@ function reducer(state, action) {
 }
 export function PageDataContextProvider(props) {
     // Destruct
-    const { title, page, breadcrumbs, noBreadcrumbs, noPageHeader, ...rest } = props;
+    const { title, page, breadcrumbs, pageHeader, ...rest } = props;
     // useReducer hook to manage state with our reducer function and initial state
     const [state, dispatch] = React.useReducer(reducer, {
         title,
         page,
         breadcrumbs,
-        noBreadcrumbs,
-        noPageHeader
+        pageHeader
     });
     // Provide the state and dispatch function to the context value
     return _jsx(PageDataContext.Provider, { value: { state, dispatch }, ...rest });
 }
 function PageContainerBar(props) {
-    const { defaultTitle, slots, slotProps } = props;
+    const { slots, slotProps, titleBar } = props;
     const { state } = React.useContext(PageDataContext);
     const activePage = useActivePage();
-    React.useLayoutEffect(() => {
-        // Reset the state without rerendering
-        state.breadcrumbs = undefined;
-        state.noBreadcrumbs = undefined;
-        state.noPageHeader = undefined;
-        state.page = undefined;
-        state.title = undefined;
+    React.useEffect(() => {
+        return () => {
+            // Reset the state when the component unmounts
+            state.breadcrumbs = undefined;
+            state.page = undefined;
+            state.pageHeader = undefined;
+            state.title = undefined;
+        };
     }, [activePage?.sourcePath]);
-    let resolvedBreadcrumbs = state.breadcrumbs ?? activePage?.breadcrumbs ?? [];
-    const title = state.title ?? defaultTitle ?? activePage?.title ?? "";
-    if (state.page) {
-        resolvedBreadcrumbs = [
-            ...resolvedBreadcrumbs,
-            { title: state.page, path: "#" }
-        ];
-    }
     const ToolbarComponent = slots?.toolbar ?? PageContainerToolbar;
     const toolbarSlotProps = useSlotProps({
         elementType: ToolbarComponent,
@@ -74,11 +66,21 @@ function PageContainerBar(props) {
         externalSlotProps: slotProps?.toolbar,
         additionalProps: {}
     });
-    return state.noPageHeader !== true ? (_jsxs(Stack, { children: [state.noBreadcrumbs !== true && (_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 })] })] })) : undefined;
+    const breadcrumbs = state.breadcrumbs ?? activePage?.breadcrumbs ?? [];
+    const title = state.title ?? activePage?.title ?? "";
+    const pageHeader = state.pageHeader ?? activePage?.pageHeader ?? null;
+    // No page header
+    if (pageHeader === false)
+        return undefined;
+    // Custom page header
+    if (pageHeader != null)
+        return pageHeader;
+    if (state.page) {
+        breadcrumbs.push({ title: state.page, path: "#" });
+    }
+    return (_jsxs(Stack, { children: [breadcrumbs && (_jsx(Breadcrumbs, { "aria-label": "breadcrumb", children: breadcrumbs.map((item, index) => {
+                    return index < breadcrumbs.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));
+                }) })), _jsxs(PageContentHeader, { children: [typeof titleBar === "function" ? (titleBar(title)) : titleBar === false ? undefined : (_jsx(Typography, { variant: "h4", children: title })), _jsx(ToolbarComponent, { ...toolbarSlotProps })] })] }));
 }
 /**
  * A container component to provide a title and breadcrumbs for your pages.
@@ -92,7 +94,7 @@ function PageContainerBar(props) {
  * - [PageContainer API](https://mui.com/toolpad/core/api/page-container)
  */
 function PageContainer(props) {
-    const { children, defaultTitle, slots, slotProps, ...rest } = props;
-    return (_jsxs(Stack, { sx: { mx: 3, my: 2 }, spacing: 2, ...rest, children: [_jsx(PageContainerBar, { defaultTitle: defaultTitle, slots: slots, slotProps: slotProps }), children] }));
+    const { children, slots, slotProps, titleBar, ...rest } = props;
+    return (_jsxs(Stack, { sx: { mx: 3, my: 2 }, spacing: 2, ...rest, children: [_jsx(PageContainerBar, { slots: slots, slotProps: slotProps, titleBar: titleBar }), children] }));
 }
 export { PageContainer };

package/build/mjs/useActivePage/useActivePage.d.ts

@@ -1,8 +1,10 @@
+import * as React from "react";
 import type { Breadcrumb } from "../PageContainer";
 export interface ActivePage {
     title: string;
     path: string;
     sourcePath: string;
     breadcrumbs: Breadcrumb[];
+    pageHeader?: React.ReactNode;
 }
 export declare function useActivePage(): ActivePage | null;

package/build/mjs/useActivePage/useActivePage.js

@@ -5,14 +5,13 @@ import { getItemPath, getItemTitle, matchPath } from "../shared/navigation";
 export function useActivePage() {
     const navigationContext = React.useContext(NavigationContext);
     const routerContext = React.useContext(RouterContext);
-    const pageRef = React.useRef(null);
-    let pathname = routerContext?.pathname ?? "/";
+    const pathname = routerContext?.pathname ?? "/";
     const activeItem = matchPath(navigationContext, pathname);
     const rootItem = matchPath(navigationContext, "/");
-    if (!activeItem) {
-        pageRef.current = null;
-    }
-    else {
+    return React.useMemo(() => {
+        if (!activeItem) {
+            return null;
+        }
         const breadcrumbs = [];
         if (rootItem) {
             breadcrumbs.push({
@@ -38,19 +37,12 @@ export function useActivePage() {
                 });
             }
         }
-        const title = getItemTitle(activeItem);
-        const path = getItemPath(navigationContext, activeItem);
-        if (pageRef.current == null ||
-            pageRef.current.title !== title ||
-            pageRef.current.path !== path ||
-            pageRef.current.sourcePath !== pathname) {
-            pageRef.current = {
-                title,
-                path,
-                sourcePath: pathname,
-                breadcrumbs
-            };
-        }
-    }
-    return pageRef.current;
+        return {
+            title: getItemTitle(activeItem),
+            path: getItemPath(navigationContext, activeItem),
+            sourcePath: pathname,
+            breadcrumbs,
+            pageHeader: activeItem.pageHeader
+        };
+    }, [activeItem, rootItem, pathname, navigationContext]);
 }

package/package.json

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

package/src/AppProvider/AppProvider.tsx

@@ -36,6 +36,7 @@ export interface NavigationPageItem {
   action?: React.ReactNode;
   children?: Navigation;
   hidden?: boolean;
+  pageHeader?: React.ReactNode;
 }
 
 export interface NavigationSubheaderItem {

package/src/PageContainer/PageContainer.tsx

@@ -48,8 +48,7 @@ export type PageData = {
   title?: string;
   page?: string;
   breadcrumbs?: Breadcrumb[];
-  noBreadcrumbs?: boolean;
-  noPageHeader?: boolean;
+  pageHeader?: React.ReactNode;
 };
 
 type PageDataAction = PageData;
@@ -64,7 +63,7 @@ function reducer(state: PageData, action: PageDataAction) {
   let key: keyof PageDataAction;
   let isSame = true;
   for (key in action) {
-    if (action[key] !== state[key]) {
+    if (action[key] != state[key]) {
       isSame = false;
       break;
     }
@@ -81,16 +80,14 @@ export function PageDataContextProvider(
   props: React.PropsWithChildren<PageData>
 ) {
   // Destruct
-  const { title, page, breadcrumbs, noBreadcrumbs, noPageHeader, ...rest } =
-    props;
+  const { title, page, breadcrumbs, pageHeader, ...rest } = props;
 
   // useReducer hook to manage state with our reducer function and initial state
   const [state, dispatch] = React.useReducer(reducer, {
     title,
     page,
     breadcrumbs,
-    noBreadcrumbs,
-    noPageHeader
+    pageHeader
   });
 
   // Provide the state and dispatch function to the context value
@@ -98,46 +95,39 @@ export function PageDataContextProvider(
 }
 
 type PageContainerBarProps = {
-  /**
-   * The default title of the page.
-   */
-  defaultTitle?: string;
   /**
    * The components used for each slot inside.
    */
   slots?: PageContainerSlots;
+
   /**
    * The props used for each slot inside.
    */
   slotProps?: PageContainerSlotProps;
+
+  /**
+   * The component that renders the actions toolbar.
+   */
+  titleBar?: false | ((title: string) => React.ReactNode);
 };
 
 function PageContainerBar(props: PageContainerBarProps) {
-  const { defaultTitle, slots, slotProps } = props;
+  const { slots, slotProps, titleBar } = props;
 
   const { state } = React.useContext(PageDataContext);
 
   const activePage = useActivePage();
 
-  React.useLayoutEffect(() => {
-    // Reset the state without rerendering
-    state.breadcrumbs = undefined;
-    state.noBreadcrumbs = undefined;
-    state.noPageHeader = undefined;
-    state.page = undefined;
-    state.title = undefined;
+  React.useEffect(() => {
+    return () => {
+      // Reset the state when the component unmounts
+      state.breadcrumbs = undefined;
+      state.page = undefined;
+      state.pageHeader = undefined;
+      state.title = undefined;
+    };
   }, [activePage?.sourcePath]);
 
-  let resolvedBreadcrumbs = state.breadcrumbs ?? activePage?.breadcrumbs ?? [];
-  const title = state.title ?? defaultTitle ?? activePage?.title ?? "";
-
-  if (state.page) {
-    resolvedBreadcrumbs = [
-      ...resolvedBreadcrumbs,
-      { title: state.page, path: "#" }
-    ];
-  }
-
   const ToolbarComponent = slots?.toolbar ?? PageContainerToolbar;
   const toolbarSlotProps = useSlotProps({
     elementType: ToolbarComponent,
@@ -146,37 +136,53 @@ function PageContainerBar(props: PageContainerBarProps) {
     additionalProps: {}
   });
 
-  return state.noPageHeader !== true ? (
+  const breadcrumbs = state.breadcrumbs ?? activePage?.breadcrumbs ?? [];
+  const title = state.title ?? activePage?.title ?? "";
+  const pageHeader = state.pageHeader ?? activePage?.pageHeader ?? null;
+
+  // No page header
+  if (pageHeader === false) return undefined;
+
+  // Custom page header
+  if (pageHeader != null) return pageHeader;
+
+  if (state.page) {
+    breadcrumbs.push({ title: state.page, path: "#" });
+  }
+
+  return (
     <Stack>
-      {state.noBreadcrumbs !== true && (
+      {breadcrumbs && (
         <Breadcrumbs aria-label="breadcrumb">
-          {resolvedBreadcrumbs
-            ? resolvedBreadcrumbs.map((item, index) => {
-                return index < resolvedBreadcrumbs.length - 1 ? (
-                  <Link
-                    key={item.path}
-                    component={ToolpadLink}
-                    underline="hover"
-                    color="inherit"
-                    href={item.path}
-                  >
-                    {getItemTitle(item)}
-                  </Link>
-                ) : (
-                  <Typography key={item.path} color="text.primary">
-                    {getItemTitle(item)}
-                  </Typography>
-                );
-              })
-            : null}
+          {breadcrumbs.map((item, index) => {
+            return index < breadcrumbs.length - 1 ? (
+              <Link
+                key={item.path}
+                component={ToolpadLink}
+                underline="hover"
+                color="inherit"
+                href={item.path}
+              >
+                {getItemTitle(item)}
+              </Link>
+            ) : (
+              <Typography key={item.path} color="text.primary">
+                {getItemTitle(item)}
+              </Typography>
+            );
+          })}
         </Breadcrumbs>
       )}
       <PageContentHeader>
-        {title ? <Typography variant="h4">{title}</Typography> : null}
+        {typeof titleBar === "function" ? (
+          titleBar(title)
+        ) : titleBar === false ? undefined : (
+          <Typography variant="h4">{title}</Typography>
+        )}
         <ToolbarComponent {...toolbarSlotProps} />
       </PageContentHeader>
     </Stack>
-  ) : undefined;
+  );
 }
 
 export type PageContainerProps = React.PropsWithChildren<
@@ -195,14 +201,14 @@ export type PageContainerProps = React.PropsWithChildren<
  * - [PageContainer API](https://mui.com/toolpad/core/api/page-container)
  */
 function PageContainer(props: PageContainerProps) {
-  const { children, defaultTitle, slots, slotProps, ...rest } = props;
+  const { children, slots, slotProps, titleBar, ...rest } = props;
 
   return (
     <Stack sx={{ mx: 3, my: 2 }} spacing={2} {...rest}>
       <PageContainerBar
-        defaultTitle={defaultTitle}
         slots={slots}
         slotProps={slotProps}
+        titleBar={titleBar}
       />
       {children}
     </Stack>

package/src/useActivePage/useActivePage.ts

@@ -9,22 +9,23 @@ export interface ActivePage {
   path: string;
   sourcePath: string;
   breadcrumbs: Breadcrumb[];
+  pageHeader?: React.ReactNode;
 }
 
 export function useActivePage(): ActivePage | null {
   const navigationContext = React.useContext(NavigationContext);
   const routerContext = React.useContext(RouterContext);
 
-  const pageRef = React.useRef<ActivePage>(null);
-
-  let pathname = routerContext?.pathname ?? "/";
+  const pathname = routerContext?.pathname ?? "/";
   const activeItem = matchPath(navigationContext, pathname);
 
   const rootItem = matchPath(navigationContext, "/");
 
-  if (!activeItem) {
-    pageRef.current = null;
-  } else {
+  return React.useMemo(() => {
+    if (!activeItem) {
+      return null;
+    }
+
     const breadcrumbs: Breadcrumb[] = [];
 
     if (rootItem) {
@@ -53,23 +54,12 @@ export function useActivePage(): ActivePage | null {
       }
     }
 
-    const title = getItemTitle(activeItem);
-    const path = getItemPath(navigationContext, activeItem);
-
-    if (
-      pageRef.current == null ||
-      pageRef.current.title !== title ||
-      pageRef.current.path !== path ||
-      pageRef.current.sourcePath !== pathname
-    ) {
-      pageRef.current = {
-        title,
-        path,
-        sourcePath: pathname,
-        breadcrumbs
-      };
-    }
-  }
-
-  return pageRef.current;
+    return {
+      title: getItemTitle(activeItem),
+      path: getItemPath(navigationContext, activeItem),
+      sourcePath: pathname,
+      breadcrumbs,
+      pageHeader: activeItem.pageHeader
+    };
+  }, [activeItem, rootItem, pathname, navigationContext]);
 }