@etsoo/toolpad 1.0.28 → 1.0.30

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

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

package/build/cjs/DashboardLayout/DashboardLayout.test.js

@@ -131,6 +131,12 @@ const AppProviderComponent_1 = require("../AppProvider/AppProviderComponent");
                         segment: "traffic",
                         title: "Traffic",
                         icon: (0, jsx_runtime_1.jsx)(Description_1.default, {})
+                    },
+                    {
+                        segment: "hidden",
+                        title: "Hidden",
+                        icon: (0, jsx_runtime_1.jsx)(Description_1.default, {}),
+                        hidden: true
                     }
                 ]
             }
@@ -146,6 +152,7 @@ const AppProviderComponent_1 = require("../AppProvider/AppProviderComponent");
         });
         (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByText("Sales")).toBeTruthy();
         (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByText("Traffic")).toBeTruthy();
+        (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).queryByText("Hidden")).toBeNull();
     });
     (0, vitest_1.test)("shows correct selected page item", () => {
         const NAVIGATION = [
@@ -157,7 +164,14 @@ const AppProviderComponent_1 = require("../AppProvider/AppProviderComponent");
             {
                 title: "Orders",
                 segment: "orders",
-                icon: (0, jsx_runtime_1.jsx)(ShoppingCart_1.default, {})
+                icon: (0, jsx_runtime_1.jsx)(ShoppingCart_1.default, {}),
+                children: [
+                    {
+                        segment: "nested",
+                        title: "Nested",
+                        hidden: true
+                    }
+                ]
             },
             {
                 segment: "dynamic",
@@ -197,6 +211,8 @@ const AppProviderComponent_1 = require("../AppProvider/AppProviderComponent");
         rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/orders" }));
         (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Dashboard" })).not.toHaveClass("Mui-selected");
         (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Orders" })).toHaveClass("Mui-selected");
+        rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/orders/nested" }));
+        (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Orders" })).toHaveClass("Mui-selected");
         rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/dynamic" }));
         (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Dynamic" })).not.toHaveClass("Mui-selected");
         rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/dynamic/123" }));

package/build/cjs/DashboardLayout/DashboardSidebarSubNavigation.js

@@ -53,10 +53,10 @@ const Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
 const ExpandLess_1 = __importDefault(require("@mui/icons-material/ExpandLess"));
 const ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
 const Link_1 = require("../shared/Link");
-const context_1 = require("../shared/context");
 const navigation_1 = require("../shared/navigation");
 const utils_1 = require("./utils");
 const styles_1 = require("@mui/material/styles");
+const useActivePage_1 = require("../useActivePage/useActivePage");
 const NavigationListItemButton = (0, styles_1.styled)(ListItemButton_1.default)(({ theme }) => ({
     borderRadius: 8,
     "&.Mui-selected": {
@@ -87,8 +87,8 @@ const NavigationListItemButton = (0, styles_1.styled)(ListItemButton_1.default)(
  * @ignore - internal component.
  */
 function DashboardSidebarSubNavigation({ subNavigation, basePath = "", depth = 0, onLinkClick, isMini = false, isFullyExpanded = true, hasDrawerTransitions = false, selectedItemId }) {
-    const routerContext = React.useContext(context_1.RouterContext);
-    const pathname = routerContext?.pathname ?? "/";
+    const activePage = (0, useActivePage_1.useActivePage)();
+    const pathname = activePage?.sourcePath ?? "/";
     const initialExpandedSidebarItemIds = React.useMemo(() => subNavigation
         .map((navigationItem, navigationItemIndex) => ({
         navigationItem,
@@ -130,6 +130,13 @@ function DashboardSidebarSubNavigation({ subNavigation, basePath = "", depth = 0
                             : {})
                     } }, `divider-${depth}-${navigationItemIndex}`));
             }
+            if (navigationItem.hidden) {
+                return null;
+            }
+            let children = navigationItem.children?.filter((child) => child.kind === "divider" || child.kind === "header" || !child.hidden);
+            if (children && children.length === 0) {
+                children = undefined;
+            }
             const navigationItemFullPath = (0, navigation_1.getPageItemFullPath)(basePath, navigationItem);
             const navigationItemId = `${depth}-${navigationItemIndex}`;
             const navigationItemTitle = (0, navigation_1.getItemTitle)(navigationItem);
@@ -139,7 +146,10 @@ function DashboardSidebarSubNavigation({ subNavigation, basePath = "", depth = 0
             // If the item is selected, we don't want to select more
             const isSelected = selectedItemId
                 ? false
-                : (0, navigation_1.isPageItemSelected)(navigationItem, basePath, pathname);
+                : (0, navigation_1.isPageItemSelected)(navigationItem, basePath, pathname) ||
+                    navigationItem.children?.some((child) => (child.kind === "page" || child.kind == null) &&
+                        child.hidden &&
+                        (0, navigation_1.isPageItemSelected)(child, navigationItemFullPath, pathname));
             if (isSelected && !selectedItemId) {
                 selectedItemId = navigationItemId;
             }
@@ -147,10 +157,10 @@ function DashboardSidebarSubNavigation({ subNavigation, basePath = "", depth = 0
                     py: 0,
                     px: 1,
                     overflowX: "hidden"
-                }, children: (0, jsx_runtime_1.jsxs)(NavigationListItemButton, { selected: isSelected && (!navigationItem.children || isMini), sx: {
+                }, children: (0, jsx_runtime_1.jsxs)(NavigationListItemButton, { selected: isSelected && (!children || isMini), sx: {
                         px: 1.4,
                         height: 48
-                    }, ...(navigationItem.children && !isMini
+                    }, ...(children && !isMini
                         ? {
                             onClick: handleOpenFolderClick(navigationItemId)
                         }
@@ -177,9 +187,9 @@ function DashboardSidebarSubNavigation({ subNavigation, basePath = "", depth = 0
                                 }
                             } }), navigationItem.action && !isMini && isFullyExpanded
                             ? navigationItem.action
-                            : null, navigationItem.children && !isMini && isFullyExpanded
+                            : null, children && !isMini && isFullyExpanded
                             ? nestedNavigationCollapseIcon
                             : null] }) }));
-            return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [isMini ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { title: navigationItemTitle, placement: "right", children: listItem })) : (listItem), navigationItem.children && !isMini ? ((0, jsx_runtime_1.jsx)(Collapse_1.default, { in: isNestedNavigationExpanded, timeout: "auto", unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(DashboardSidebarSubNavigation, { subNavigation: navigationItem.children, basePath: navigationItemFullPath, depth: depth + 1, onLinkClick: onLinkClick, selectedItemId: selectedItemId }) })) : null] }, navigationItemId));
+            return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [isMini ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { title: navigationItemTitle, placement: "right", children: listItem })) : (listItem), children && !isMini ? ((0, jsx_runtime_1.jsx)(Collapse_1.default, { in: isNestedNavigationExpanded, timeout: "auto", unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(DashboardSidebarSubNavigation, { subNavigation: children, basePath: navigationItemFullPath, depth: depth + 1, onLinkClick: onLinkClick, selectedItemId: selectedItemId }) })) : null] }, navigationItemId));
         }) }));
 }

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

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 { state, dispatch } = React.useContext(exports.PageDataContext);
+    const { slots, slotProps } = props;
+    const { state } = React.useContext(exports.PageDataContext);
     const activePage = (0, useActivePage_1.useActivePage)();
-    React.useLayoutEffect(() => {
-        // Reset the state when the active page changes 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,19 @@ 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;
+    if (pageHeader === false)
+        return undefined;
+    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: [title ? (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "h4", children: title }) : null, (0, jsx_runtime_1.jsx)(ToolbarComponent, { ...toolbarSlotProps })] })] }));
 }
 /**
  * A container component to provide a title and breadcrumbs for your pages.
@@ -133,6 +133,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, ...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 }), children] }));
 }

package/build/cjs/shared/navigation.js

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

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

@@ -77,7 +77,8 @@ function useActivePage() {
             title: (0, navigation_1.getItemTitle)(activeItem),
             path: (0, navigation_1.getItemPath)(navigationContext, activeItem),
             sourcePath: pathname,
-            breadcrumbs
+            breadcrumbs,
+            pageHeader: activeItem.pageHeader
         };
     }, [activeItem, rootItem, pathname, navigationContext]);
 }

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

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

package/build/mjs/DashboardLayout/DashboardLayout.test.js

@@ -126,6 +126,12 @@ describe("DashboardLayout", () => {
                         segment: "traffic",
                         title: "Traffic",
                         icon: _jsx(DescriptionIcon, {})
+                    },
+                    {
+                        segment: "hidden",
+                        title: "Hidden",
+                        icon: _jsx(DescriptionIcon, {}),
+                        hidden: true
                     }
                 ]
             }
@@ -141,6 +147,7 @@ describe("DashboardLayout", () => {
         });
         expect(within(desktopNavigation).getByText("Sales")).toBeTruthy();
         expect(within(desktopNavigation).getByText("Traffic")).toBeTruthy();
+        expect(within(desktopNavigation).queryByText("Hidden")).toBeNull();
     });
     test("shows correct selected page item", () => {
         const NAVIGATION = [
@@ -152,7 +159,14 @@ describe("DashboardLayout", () => {
             {
                 title: "Orders",
                 segment: "orders",
-                icon: _jsx(ShoppingCartIcon, {})
+                icon: _jsx(ShoppingCartIcon, {}),
+                children: [
+                    {
+                        segment: "nested",
+                        title: "Nested",
+                        hidden: true
+                    }
+                ]
             },
             {
                 segment: "dynamic",
@@ -192,6 +206,8 @@ describe("DashboardLayout", () => {
         rerender(_jsx(AppWithPathname, { pathname: "/orders" }));
         expect(within(desktopNavigation).getByRole("link", { name: "Dashboard" })).not.toHaveClass("Mui-selected");
         expect(within(desktopNavigation).getByRole("link", { name: "Orders" })).toHaveClass("Mui-selected");
+        rerender(_jsx(AppWithPathname, { pathname: "/orders/nested" }));
+        expect(within(desktopNavigation).getByRole("link", { name: "Orders" })).toHaveClass("Mui-selected");
         rerender(_jsx(AppWithPathname, { pathname: "/dynamic" }));
         expect(within(desktopNavigation).getByRole("link", { name: "Dynamic" })).not.toHaveClass("Mui-selected");
         rerender(_jsx(AppWithPathname, { pathname: "/dynamic/123" }));

package/build/mjs/DashboardLayout/DashboardSidebarSubNavigation.js

@@ -14,10 +14,10 @@ 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";
 import { styled } from "@mui/material/styles";
+import { useActivePage } from "../useActivePage/useActivePage";
 const NavigationListItemButton = styled(ListItemButton)(({ theme }) => ({
     borderRadius: 8,
     "&.Mui-selected": {
@@ -48,8 +48,8 @@ const NavigationListItemButton = styled(ListItemButton)(({ theme }) => ({
  * @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 activePage = useActivePage();
+    const pathname = activePage?.sourcePath ?? "/";
     const initialExpandedSidebarItemIds = React.useMemo(() => subNavigation
         .map((navigationItem, navigationItemIndex) => ({
         navigationItem,
@@ -91,6 +91,13 @@ function DashboardSidebarSubNavigation({ subNavigation, basePath = "", depth = 0
                             : {})
                     } }, `divider-${depth}-${navigationItemIndex}`));
             }
+            if (navigationItem.hidden) {
+                return null;
+            }
+            let children = navigationItem.children?.filter((child) => child.kind === "divider" || child.kind === "header" || !child.hidden);
+            if (children && children.length === 0) {
+                children = undefined;
+            }
             const navigationItemFullPath = getPageItemFullPath(basePath, navigationItem);
             const navigationItemId = `${depth}-${navigationItemIndex}`;
             const navigationItemTitle = getItemTitle(navigationItem);
@@ -100,7 +107,10 @@ function DashboardSidebarSubNavigation({ subNavigation, basePath = "", depth = 0
             // If the item is selected, we don't want to select more
             const isSelected = selectedItemId
                 ? false
-                : isPageItemSelected(navigationItem, basePath, pathname);
+                : isPageItemSelected(navigationItem, basePath, pathname) ||
+                    navigationItem.children?.some((child) => (child.kind === "page" || child.kind == null) &&
+                        child.hidden &&
+                        isPageItemSelected(child, navigationItemFullPath, pathname));
             if (isSelected && !selectedItemId) {
                 selectedItemId = navigationItemId;
             }
@@ -108,10 +118,10 @@ function DashboardSidebarSubNavigation({ subNavigation, basePath = "", depth = 0
                     py: 0,
                     px: 1,
                     overflowX: "hidden"
-                }, children: _jsxs(NavigationListItemButton, { selected: isSelected && (!navigationItem.children || isMini), sx: {
+                }, children: _jsxs(NavigationListItemButton, { selected: isSelected && (!children || isMini), sx: {
                         px: 1.4,
                         height: 48
-                    }, ...(navigationItem.children && !isMini
+                    }, ...(children && !isMini
                         ? {
                             onClick: handleOpenFolderClick(navigationItemId)
                         }
@@ -138,10 +148,10 @@ function DashboardSidebarSubNavigation({ subNavigation, basePath = "", depth = 0
                                 }
                             } }), navigationItem.action && !isMini && isFullyExpanded
                             ? navigationItem.action
-                            : null, navigationItem.children && !isMini && isFullyExpanded
+                            : null, 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));
+            return (_jsxs(React.Fragment, { children: [isMini ? (_jsx(Tooltip, { title: navigationItemTitle, placement: "right", children: listItem })) : (listItem), children && !isMini ? (_jsx(Collapse, { in: isNestedNavigationExpanded, timeout: "auto", unmountOnExit: true, children: _jsx(DashboardSidebarSubNavigation, { subNavigation: children, basePath: navigationItemFullPath, depth: depth + 1, onLinkClick: onLinkClick, selectedItemId: selectedItemId }) })) : null] }, navigationItemId));
         }) }));
 }
 export { DashboardSidebarSubNavigation };

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

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 { state, dispatch } = React.useContext(PageDataContext);
+    const { slots, slotProps } = props;
+    const { state } = React.useContext(PageDataContext);
     const activePage = useActivePage();
-    React.useLayoutEffect(() => {
-        // Reset the state when the active page changes 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,19 @@ 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;
+    if (pageHeader === false)
+        return undefined;
+    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: [title ? _jsx(Typography, { variant: "h4", children: title }) : null, _jsx(ToolbarComponent, { ...toolbarSlotProps })] })] }));
 }
 /**
  * A container component to provide a title and breadcrumbs for your pages.
@@ -92,7 +92,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, ...rest } = props;
+    return (_jsxs(Stack, { sx: { mx: 3, my: 2 }, spacing: 2, ...rest, children: [_jsx(PageContainerBar, { slots: slots, slotProps: slotProps }), children] }));
 }
 export { PageContainer };

package/build/mjs/shared/navigation.js

@@ -12,9 +12,6 @@ export function isPageItemSelected(navigationItem, basePath, 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) {
@@ -113,15 +110,11 @@ function getItemLookup(navigation) {
 export function matchPath(navigation, path) {
     const lookup = getItemLookup(navigation);
     for (const [key, item] of lookup.entries()) {
-        if (typeof key === "string") {
-            if (key === path)
-                return item;
-            else if (item.subs?.some((sub) => new RegExp(sub).test(path)))
-                return item;
+        if (typeof key === "string" && key === path) {
+            return item;
         }
-        else if (key instanceof RegExp) {
-            if (key.test(path))
-                return item;
+        if (key instanceof RegExp && key.test(path)) {
+            return item;
         }
     }
     return null;

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

@@ -41,7 +41,8 @@ export function useActivePage() {
             title: getItemTitle(activeItem),
             path: getItemPath(navigationContext, activeItem),
             sourcePath: pathname,
-            breadcrumbs
+            breadcrumbs,
+            pageHeader: activeItem.pageHeader
         };
     }, [activeItem, rootItem, pathname, navigationContext]);
 }

package/package.json

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

package/src/AppProvider/AppProvider.tsx

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

package/src/DashboardLayout/DashboardLayout.test.tsx

@@ -175,6 +175,12 @@ describe("DashboardLayout", () => {
             segment: "traffic",
             title: "Traffic",
             icon: <DescriptionIcon />
+          },
+          {
+            segment: "hidden",
+            title: "Hidden",
+            icon: <DescriptionIcon />,
+            hidden: true
           }
         ]
       }
@@ -198,6 +204,7 @@ describe("DashboardLayout", () => {
 
     expect(within(desktopNavigation).getByText("Sales")).toBeTruthy();
     expect(within(desktopNavigation).getByText("Traffic")).toBeTruthy();
+    expect(within(desktopNavigation).queryByText("Hidden")).toBeNull();
   });
 
   test("shows correct selected page item", () => {
@@ -210,7 +217,14 @@ describe("DashboardLayout", () => {
       {
         title: "Orders",
         segment: "orders",
-        icon: <ShoppingCartIcon />
+        icon: <ShoppingCartIcon />,
+        children: [
+          {
+            segment: "nested",
+            title: "Nested",
+            hidden: true
+          }
+        ]
       },
       {
         segment: "dynamic",
@@ -268,6 +282,11 @@ describe("DashboardLayout", () => {
       within(desktopNavigation).getByRole("link", { name: "Orders" })
     ).toHaveClass("Mui-selected");
 
+    rerender(<AppWithPathname pathname="/orders/nested" />);
+    expect(
+      within(desktopNavigation).getByRole("link", { name: "Orders" })
+    ).toHaveClass("Mui-selected");
+
     rerender(<AppWithPathname pathname="/dynamic" />);
     expect(
       within(desktopNavigation).getByRole("link", { name: "Dynamic" })

package/src/DashboardLayout/DashboardSidebarSubNavigation.tsx

@@ -14,7 +14,6 @@ import type {} from "@mui/material/themeCssVarsAugmentation";
 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 type { Navigation } from "../AppProvider";
 import {
   getItemTitle,
@@ -24,6 +23,7 @@ import {
 } from "../shared/navigation";
 import { getDrawerSxTransitionMixin } from "./utils";
 import { styled } from "@mui/material/styles";
+import { useActivePage } from "../useActivePage/useActivePage";
 
 const NavigationListItemButton = styled(ListItemButton)(({ theme }) => ({
   borderRadius: 8,
@@ -76,9 +76,9 @@ function DashboardSidebarSubNavigation({
   hasDrawerTransitions = false,
   selectedItemId
 }: DashboardSidebarSubNavigationProps) {
-  const routerContext = React.useContext(RouterContext);
+  const activePage = useActivePage();
 
-  const pathname = routerContext?.pathname ?? "/";
+  const pathname = activePage?.sourcePath ?? "/";
 
   const initialExpandedSidebarItemIds = React.useMemo(
     () =>
@@ -157,6 +157,18 @@ function DashboardSidebarSubNavigation({
           );
         }
 
+        if (navigationItem.hidden) {
+          return null;
+        }
+
+        let children = navigationItem.children?.filter(
+          (child) =>
+            child.kind === "divider" || child.kind === "header" || !child.hidden
+        );
+        if (children && children.length === 0) {
+          children = undefined;
+        }
+
         const navigationItemFullPath = getPageItemFullPath(
           basePath,
           navigationItem
@@ -178,7 +190,13 @@ function DashboardSidebarSubNavigation({
         // If the item is selected, we don't want to select more
         const isSelected = selectedItemId
           ? false
-          : isPageItemSelected(navigationItem, basePath, pathname);
+          : isPageItemSelected(navigationItem, basePath, pathname) ||
+            navigationItem.children?.some(
+              (child) =>
+                (child.kind === "page" || child.kind == null) &&
+                child.hidden &&
+                isPageItemSelected(child, navigationItemFullPath, pathname)
+            );
 
         if (isSelected && !selectedItemId) {
           selectedItemId = navigationItemId;
@@ -193,12 +211,12 @@ function DashboardSidebarSubNavigation({
             }}
           >
             <NavigationListItemButton
-              selected={isSelected && (!navigationItem.children || isMini)}
+              selected={isSelected && (!children || isMini)}
               sx={{
                 px: 1.4,
                 height: 48
               }}
-              {...(navigationItem.children && !isMini
+              {...(children && !isMini
                 ? {
                     onClick: handleOpenFolderClick(navigationItemId)
                   }
@@ -248,7 +266,7 @@ function DashboardSidebarSubNavigation({
               {navigationItem.action && !isMini && isFullyExpanded
                 ? navigationItem.action
                 : null}
-              {navigationItem.children && !isMini && isFullyExpanded
+              {children && !isMini && isFullyExpanded
                 ? nestedNavigationCollapseIcon
                 : null}
             </NavigationListItemButton>
@@ -265,14 +283,14 @@ function DashboardSidebarSubNavigation({
               listItem
             )}
 
-            {navigationItem.children && !isMini ? (
+            {children && !isMini ? (
               <Collapse
                 in={isNestedNavigationExpanded}
                 timeout="auto"
                 unmountOnExit
               >
                 <DashboardSidebarSubNavigation
-                  subNavigation={navigationItem.children}
+                  subNavigation={children}
                   basePath={navigationItemFullPath}
                   depth={depth + 1}
                   onLinkClick={onLinkClick}

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,10 +95,6 @@ export function PageDataContextProvider(
 }
 
 type PageContainerBarProps = {
-  /**
-   * The default title of the page.
-   */
-  defaultTitle?: string;
   /**
    * The components used for each slot inside.
    */
@@ -113,31 +106,22 @@ type PageContainerBarProps = {
 };
 
 function PageContainerBar(props: PageContainerBarProps) {
-  const { defaultTitle, slots, slotProps } = props;
+  const { slots, slotProps } = props;
 
-  const { state, dispatch } = React.useContext(PageDataContext);
+  const { state } = React.useContext(PageDataContext);
 
   const activePage = useActivePage();
 
-  React.useLayoutEffect(() => {
-    // Reset the state when the active page changes 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,29 +130,38 @@ 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;
+
+  if (pageHeader === false) return undefined;
+  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>
@@ -176,7 +169,7 @@ function PageContainerBar(props: PageContainerBarProps) {
         <ToolbarComponent {...toolbarSlotProps} />
       </PageContentHeader>
     </Stack>
-  ) : undefined;
+  );
 }
 
 export type PageContainerProps = React.PropsWithChildren<
@@ -195,15 +188,11 @@ 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, ...rest } = props;
 
   return (
     <Stack sx={{ mx: 3, my: 2 }} spacing={2} {...rest}>
-      <PageContainerBar
-        defaultTitle={defaultTitle}
-        slots={slots}
-        slotProps={slotProps}
-      />
+      <PageContainerBar slots={slots} slotProps={slotProps} />
       {children}
     </Stack>
   );

package/src/shared/navigation.tsx

@@ -36,10 +36,6 @@ export function isPageItemSelected(
     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;
 }
 
@@ -178,12 +174,11 @@ export function matchPath(
   const lookup = getItemLookup(navigation);
 
   for (const [key, item] of lookup.entries()) {
-    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;
+    if (typeof key === "string" && key === path) {
+      return item;
+    }
+    if (key instanceof RegExp && key.test(path)) {
+      return item;
     }
   }
 

package/src/useActivePage/useActivePage.ts

@@ -9,11 +9,13 @@ 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 pathname = routerContext?.pathname ?? "/";
   const activeItem = matchPath(navigationContext, pathname);
 
@@ -56,7 +58,8 @@ export function useActivePage(): ActivePage | null {
       title: getItemTitle(activeItem),
       path: getItemPath(navigationContext, activeItem),
       sourcePath: pathname,
-      breadcrumbs
+      breadcrumbs,
+      pageHeader: activeItem.pageHeader
     };
   }, [activeItem, rootItem, pathname, navigationContext]);
 }