@etsoo/toolpad 1.0.39 → 1.0.40

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

@@ -24,7 +24,7 @@ export interface Breadcrumb {
 export type PageData = {
     title?: string;
     page?: string;
-    breadcrumbs?: Breadcrumb[];
+    breadcrumbs?: Breadcrumb[] | ((source: Breadcrumb[]) => Breadcrumb[]);
     pageHeader?: React.ReactNode;
 };
 type PageDataAction = PageData | true;

package/build/cjs/PageContainer/PageContainer.js

@@ -58,19 +58,12 @@ const PageContentHeader = (0, styles_1.styled)("div")(({ theme }) => ({
     justifyContent: "space-between",
     gap: theme.spacing(2)
 }));
-function jsonSerialize(obj) {
-    return JSON.stringify(obj, (_key, value) => value == null ? undefined : value);
-}
 exports.PageDataContext = React.createContext({ state: {}, dispatch: (value) => value });
 function reducer(state, action) {
     // Check if the action is 'reset'
     if (action === true) {
         return {};
     }
-    // Check if the action is the same as the current state
-    if (jsonSerialize(state) === jsonSerialize(action)) {
-        return state;
-    }
     return { ...state, ...action };
 }
 function PageDataContextProvider(props) {
@@ -97,7 +90,7 @@ function PageContainerBar(props) {
         externalSlotProps: slotProps?.toolbar,
         additionalProps: {}
     });
-    const breadcrumbs = [...(state.breadcrumbs ?? activePage?.breadcrumbs ?? [])];
+    const breadcrumbs = [...(activePage?.breadcrumbs ?? [])];
     const title = state.title ?? activePage?.title ?? "";
     const pageHeader = state.pageHeader ?? activePage?.pageHeader ?? null;
     // No page header
@@ -109,8 +102,11 @@ function PageContainerBar(props) {
     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));
+    const bc = typeof state.breadcrumbs === "function"
+        ? state.breadcrumbs(breadcrumbs)
+        : state.breadcrumbs ?? breadcrumbs;
+    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { children: [bc.length > 0 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_1.default, { "aria-label": "breadcrumb", children: bc.map((item, index) => {
+                    return index < bc.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 })] })] }));
 }
 /**

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

@@ -24,7 +24,7 @@ export interface Breadcrumb {
 export type PageData = {
     title?: string;
     page?: string;
-    breadcrumbs?: Breadcrumb[];
+    breadcrumbs?: Breadcrumb[] | ((source: Breadcrumb[]) => Breadcrumb[]);
     pageHeader?: React.ReactNode;
 };
 type PageDataAction = PageData | true;

package/build/mjs/PageContainer/PageContainer.js

@@ -17,19 +17,12 @@ const PageContentHeader = styled("div")(({ theme }) => ({
     justifyContent: "space-between",
     gap: theme.spacing(2)
 }));
-function jsonSerialize(obj) {
-    return JSON.stringify(obj, (_key, value) => value == null ? undefined : value);
-}
 export const PageDataContext = React.createContext({ state: {}, dispatch: (value) => value });
 function reducer(state, action) {
     // Check if the action is 'reset'
     if (action === true) {
         return {};
     }
-    // Check if the action is the same as the current state
-    if (jsonSerialize(state) === jsonSerialize(action)) {
-        return state;
-    }
     return { ...state, ...action };
 }
 export function PageDataContextProvider(props) {
@@ -56,7 +49,7 @@ function PageContainerBar(props) {
         externalSlotProps: slotProps?.toolbar,
         additionalProps: {}
     });
-    const breadcrumbs = [...(state.breadcrumbs ?? activePage?.breadcrumbs ?? [])];
+    const breadcrumbs = [...(activePage?.breadcrumbs ?? [])];
     const title = state.title ?? activePage?.title ?? "";
     const pageHeader = state.pageHeader ?? activePage?.pageHeader ?? null;
     // No page header
@@ -68,8 +61,11 @@ function PageContainerBar(props) {
     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));
+    const bc = typeof state.breadcrumbs === "function"
+        ? state.breadcrumbs(breadcrumbs)
+        : state.breadcrumbs ?? breadcrumbs;
+    return (_jsxs(Stack, { children: [bc.length > 0 && (_jsx(Breadcrumbs, { "aria-label": "breadcrumb", children: bc.map((item, index) => {
+                    return index < bc.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 })] })] }));
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/toolpad",
-  "version": "1.0.39",
+  "version": "1.0.40",
   "author": "ETSOO",
   "description": "Dashboard framework extention based on Toolpad Core",
   "main": "build/cjs/index.js",
@@ -47,33 +47,33 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@mui/icons-material": "7.1.0",
-    "@mui/material": "7.1.0",
-    "@mui/utils": "7.1.0",
+    "@mui/icons-material": "7.1.2",
+    "@mui/material": "7.1.2",
+    "@mui/utils": "7.1.1",
     "invariant": "2.2.4",
     "path-to-regexp": "6.3.0",
     "react": "^19.1.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.27.2",
-    "@babel/core": "^7.27.1",
-    "@babel/plugin-transform-runtime": "^7.27.1",
+    "@babel/core": "^7.27.4",
+    "@babel/plugin-transform-runtime": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
-    "@babel/runtime-corejs3": "^7.27.1",
+    "@babel/runtime-corejs3": "^7.27.6",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/invariant": "2.2.37",
-    "@types/node": "^22.15.17",
-    "@types/react": "19.1.3",
-    "@types/react-dom": "19.1.3",
-    "@vitejs/plugin-react": "4.4.1",
-    "@vitest/browser": "3.1.3",
+    "@types/node": "^24.0.4",
+    "@types/react": "19.1.8",
+    "@types/react-dom": "19.1.6",
+    "@vitejs/plugin-react": "4.6.0",
+    "@vitest/browser": "3.2.4",
     "jsdom": "^26.1.0",
-    "next": "^15.3.2",
-    "next-router-mock": "^1.0.1",
-    "playwright": "^1.52.0",
-    "react-router-dom": "^7.6.0",
-    "vitest": "3.1.3"
+    "next": "^15.3.4",
+    "next-router-mock": "^1.0.2",
+    "playwright": "^1.53.1",
+    "react-router-dom": "^7.6.2",
+    "vitest": "3.2.4"
   },
   "peerDependenciesMeta": {
     "next": {

package/src/PageContainer/PageContainer.tsx

@@ -47,18 +47,12 @@ export interface Breadcrumb {
 export type PageData = {
   title?: string;
   page?: string;
-  breadcrumbs?: Breadcrumb[];
+  breadcrumbs?: Breadcrumb[] | ((source: Breadcrumb[]) => Breadcrumb[]);
   pageHeader?: React.ReactNode;
 };
 
 type PageDataAction = PageData | true;
 
-function jsonSerialize(obj: unknown) {
-  return JSON.stringify(obj, (_key, value) =>
-    value == null ? undefined : value
-  );
-}
-
 export const PageDataContext = React.createContext<{
   state: PageData;
   dispatch: React.Dispatch<PageDataAction>;
@@ -70,11 +64,6 @@ function reducer(state: PageData, action: PageDataAction) {
     return {};
   }
 
-  // Check if the action is the same as the current state
-  if (jsonSerialize(state) === jsonSerialize(action)) {
-    return state;
-  }
-
   return { ...state, ...action };
 }
 
@@ -128,7 +117,7 @@ function PageContainerBar(props: PageContainerBarProps) {
     additionalProps: {}
   });
 
-  const breadcrumbs = [...(state.breadcrumbs ?? activePage?.breadcrumbs ?? [])];
+  const breadcrumbs = [...(activePage?.breadcrumbs ?? [])];
   const title = state.title ?? activePage?.title ?? "";
   const pageHeader = state.pageHeader ?? activePage?.pageHeader ?? null;
 
@@ -142,12 +131,17 @@ function PageContainerBar(props: PageContainerBarProps) {
     breadcrumbs.push({ title: state.page, path: "#" });
   }
 
+  const bc =
+    typeof state.breadcrumbs === "function"
+      ? state.breadcrumbs(breadcrumbs)
+      : state.breadcrumbs ?? breadcrumbs;
+
   return (
     <Stack>
-      {breadcrumbs && (
+      {bc.length > 0 && (
         <Breadcrumbs aria-label="breadcrumb">
-          {breadcrumbs.map((item, index) => {
-            return index < breadcrumbs.length - 1 ? (
+          {bc.map((item, index) => {
+            return index < bc.length - 1 ? (
               <Link
                 key={item.path}
                 component={ToolpadLink}