From 8ab17a3ae76f427672e0e348361805bc08daab85 Mon Sep 17 00:00:00 2001
From: Rafael Grigorian <5500199+null93@users.noreply.github.com>
Date: Thu, 9 Jan 2025 03:17:29 -0600
Subject: [PATCH] [PageHeader] Allow multiple breadcrumbs that are not links
 (#4571)

Signed-off-by: Rafael Grigorian <5500199+null93@users.noreply.github.com>
Co-authored-by: Jan Potoms <2109932+Janpot@users.noreply.github.com>
---
 docs/pages/toolpad/core/api/page-container.json           | 4 ++--
 docs/pages/toolpad/core/api/page-header.json              | 2 +-
 packages/toolpad-core/src/PageContainer/PageContainer.tsx | 6 +++---
 packages/toolpad-core/src/PageContainer/PageHeader.tsx    | 8 ++++----
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/docs/pages/toolpad/core/api/page-container.json b/docs/pages/toolpad/core/api/page-container.json
index 95ddd5e232d..7102f8ecba1 100644
--- a/docs/pages/toolpad/core/api/page-container.json
+++ b/docs/pages/toolpad/core/api/page-container.json
@@ -1,12 +1,12 @@
 {
   "props": {
     "breadcrumbs": {
-      "type": { "name": "arrayOf", "description": "Array&lt;{ path: string, title: string }&gt;" }
+      "type": { "name": "arrayOf", "description": "Array&lt;{ path?: string, title: string }&gt;" }
     },
     "slotProps": {
       "type": {
         "name": "shape",
-        "description": "{ header: { breadcrumbs?: Array&lt;{ path: string, title: string }&gt;, slotProps?: { toolbar: object }, slots?: { toolbar?: elementType }, title?: string } }"
+        "description": "{ header: { breadcrumbs?: Array&lt;{ path?: string, title: string }&gt;, slotProps?: { toolbar: object }, slots?: { toolbar?: elementType }, title?: string } }"
       }
     },
     "slots": {
diff --git a/docs/pages/toolpad/core/api/page-header.json b/docs/pages/toolpad/core/api/page-header.json
index 68523c20a64..b6217f6ebc8 100644
--- a/docs/pages/toolpad/core/api/page-header.json
+++ b/docs/pages/toolpad/core/api/page-header.json
@@ -1,7 +1,7 @@
 {
   "props": {
     "breadcrumbs": {
-      "type": { "name": "arrayOf", "description": "Array&lt;{ path: string, title: string }&gt;" }
+      "type": { "name": "arrayOf", "description": "Array&lt;{ path?: string, title: string }&gt;" }
     },
     "slotProps": { "type": { "name": "shape", "description": "{ toolbar: { children?: node } }" } },
     "slots": {
diff --git a/packages/toolpad-core/src/PageContainer/PageContainer.tsx b/packages/toolpad-core/src/PageContainer/PageContainer.tsx
index 011794841f9..9e7efa226aa 100644
--- a/packages/toolpad-core/src/PageContainer/PageContainer.tsx
+++ b/packages/toolpad-core/src/PageContainer/PageContainer.tsx
@@ -15,7 +15,7 @@ export interface Breadcrumb {
   /**
    * The path the breadcrumb links to.
    */
-  path: string;
+  path?: string;
 }
 export interface PageContainerSlotProps {
   header: PageHeaderProps;
@@ -89,7 +89,7 @@ PageContainer.propTypes /* remove-proptypes */ = {
    */
   breadcrumbs: PropTypes.arrayOf(
     PropTypes.shape({
-      path: PropTypes.string.isRequired,
+      path: PropTypes.string,
       title: PropTypes.string.isRequired,
     }),
   ),
@@ -104,7 +104,7 @@ PageContainer.propTypes /* remove-proptypes */ = {
     header: PropTypes.shape({
       breadcrumbs: PropTypes.arrayOf(
         PropTypes.shape({
-          path: PropTypes.string.isRequired,
+          path: PropTypes.string,
           title: PropTypes.string.isRequired,
         }),
       ),
diff --git a/packages/toolpad-core/src/PageContainer/PageHeader.tsx b/packages/toolpad-core/src/PageContainer/PageHeader.tsx
index d72921abefa..8268213da7c 100644
--- a/packages/toolpad-core/src/PageContainer/PageHeader.tsx
+++ b/packages/toolpad-core/src/PageContainer/PageHeader.tsx
@@ -83,9 +83,9 @@ function PageHeader(props: PageHeaderProps) {
       <Breadcrumbs aria-label="breadcrumb">
         {resolvedBreadcrumbs
           ? resolvedBreadcrumbs.map((item, index) => {
-              return index < resolvedBreadcrumbs.length - 1 ? (
+              return item.path ? (
                 <Link
-                  key={item.path}
+                  key={index}
                   component={ToolpadLink}
                   underline="hover"
                   color="inherit"
@@ -94,7 +94,7 @@ function PageHeader(props: PageHeaderProps) {
                   {getItemTitle(item)}
                 </Link>
               ) : (
-                <Typography key={item.path} color="text.primary">
+                <Typography key={index} color="text.primary">
                   {getItemTitle(item)}
                 </Typography>
               );
@@ -120,7 +120,7 @@ PageHeader.propTypes /* remove-proptypes */ = {
    */
   breadcrumbs: PropTypes.arrayOf(
     PropTypes.shape({
-      path: PropTypes.string.isRequired,
+      path: PropTypes.string,
       title: PropTypes.string.isRequired,
     }),
   ),