From e1d76c030e93e0ec4c189d1d25fc03f57fc36051 Mon Sep 17 00:00:00 2001
From: christiancookbuzz <143699429+christiancookbuzz@users.noreply.github.com>
Date: Tue, 3 Dec 2024 21:00:40 +0000
Subject: [PATCH] [core][PageContainer] Do not spread PageContainer title to
 child Container (#4504)

---
 .../toolpad-core/src/PageContainer/PageContainer.test.tsx   | 6 ++++++
 packages/toolpad-core/src/PageContainer/PageContainer.tsx   | 6 +++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/toolpad-core/src/PageContainer/PageContainer.test.tsx b/packages/toolpad-core/src/PageContainer/PageContainer.test.tsx
index 54d287eeb12..1eee03441a4 100644
--- a/packages/toolpad-core/src/PageContainer/PageContainer.test.tsx
+++ b/packages/toolpad-core/src/PageContainer/PageContainer.test.tsx
@@ -180,4 +180,10 @@ describe('PageContainer', () => {
       'The PageContainer `breadCrumbs` prop is deprecated. Use `breadcrumbs` instead.',
     );
   });
+
+  test("doesn't spread title to child", async () => {
+    render(<PageContainer title="Hello World" />);
+
+    expect(screen.queryByTitle('Hello World')).not.toBeInTheDocument();
+  });
 });
diff --git a/packages/toolpad-core/src/PageContainer/PageContainer.tsx b/packages/toolpad-core/src/PageContainer/PageContainer.tsx
index 4f8d3dd56d4..6e7235684f0 100644
--- a/packages/toolpad-core/src/PageContainer/PageContainer.tsx
+++ b/packages/toolpad-core/src/PageContainer/PageContainer.tsx
@@ -87,7 +87,7 @@ export interface PageContainerProps extends ContainerProps {
  * - [PageContainer API](https://mui.com/toolpad/core/api/page-container)
  */
 function PageContainer(props: PageContainerProps) {
-  const { children, slots, slotProps, breadcrumbs, breadCrumbs, ...rest } = props;
+  const { children, slots, slotProps, breadcrumbs, breadCrumbs, title, ...rest } = props;
 
   if (process.env.NODE_ENV !== 'production' && breadCrumbs) {
     warnOnce('The PageContainer `breadCrumbs` prop is deprecated. Use `breadcrumbs` instead.');
@@ -97,7 +97,7 @@ function PageContainer(props: PageContainerProps) {
 
   // TODO: Remove `props.breadCrumbs` in the next major version
   const resolvedBreadcrumbs = breadcrumbs ?? breadCrumbs ?? activePage?.breadcrumbs ?? [];
-  const title = props.title ?? activePage?.title ?? '';
+  const resolvedTitle = title ?? activePage?.title ?? '';
 
   const ToolbarComponent = props?.slots?.toolbar ?? PageContainerToolbar;
   const toolbarSlotProps = useSlotProps({
@@ -134,7 +134,7 @@ function PageContainer(props: PageContainerProps) {
           </Breadcrumbs>
 
           <PageContentHeader>
-            {title ? <Typography variant="h4">{title}</Typography> : null}
+            {resolvedTitle ? <Typography variant="h4">{resolvedTitle}</Typography> : null}
             <ToolbarComponent {...toolbarSlotProps} />
           </PageContentHeader>
         </Stack>