[PageContainer] Allow full-size content

docs/data/toolpad/core/components/page-container/ActionsPageContainer.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useDemoRouter } from '@toolpad/core/internal';
-import { PageContainer, PageContainerToolbar } from '@toolpad/core/PageContainer';
+import { PageContainer, PageHeaderToolbar } from '@toolpad/core/PageContainer';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
@@ -21,7 +21,7 @@ const NAVIGATION = [
 // preview-start
 function PageToolbar() {
   return (
-    <PageContainerToolbar>
+    <PageHeaderToolbar>
       <Button startIcon={<FileDownloadIcon />} color="inherit">
         Export
       </Button>
@@ -32,7 +32,7 @@ function PageToolbar() {
         slotProps={{ field: { size: 'small' } }}
         label="Period"
       />
-    </PageContainerToolbar>
+    </PageHeaderToolbar>
   );
 }
 // preview-end

docs/data/toolpad/core/components/page-container/ActionsPageContainer.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useDemoRouter } from '@toolpad/core/internal';
-import { PageContainer, PageContainerToolbar } from '@toolpad/core/PageContainer';
+import { PageContainer, PageHeaderToolbar } from '@toolpad/core/PageContainer';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
@@ -21,7 +21,7 @@ const NAVIGATION = [
 // preview-start
 function PageToolbar() {
   return (
-    <PageContainerToolbar>
+    <PageHeaderToolbar>
       <Button startIcon={<FileDownloadIcon />} color="inherit">
         Export
       </Button>
@@ -32,7 +32,7 @@ function PageToolbar() {
         slotProps={{ field: { size: 'small' } as any }}
         label="Period"
       />
-    </PageContainerToolbar>
+    </PageHeaderToolbar>
   );
 }
 // preview-end

docs/data/toolpad/core/components/page-container/ActionsPageContainer.tsx.preview

@@ -1,6 +1,6 @@
 function PageToolbar() {
   return (
-    <PageContainerToolbar>
+    <PageHeaderToolbar>
       <Button startIcon={<FileDownloadIcon />} color="inherit">
         Export
       </Button>
@@ -11,6 +11,6 @@ function PageToolbar() {
         slotProps={{ field: { size: 'small' } as any }}
         label="Period"
       />
-    </PageContainerToolbar>
+    </PageHeaderToolbar>
   );
 }

docs/data/toolpad/core/components/page-container/PageContainerFullScreen.js

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { createTheme } from '@mui/material/styles';
+import MapIcon from '@mui/icons-material/Map';
+import { AppProvider } from '@toolpad/core/AppProvider';
+import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+import { PageContainer } from '@toolpad/core/PageContainer';
+import { useDemoRouter } from '@toolpad/core/internal';
+
+const NAVIGATION = [
+  {
+    segment: 'map',
+    title: 'Map',
+    icon: <MapIcon />,
+  },
+];
+
+const demoTheme = createTheme({
+  cssVariables: {
+    colorSchemeSelector: 'data-toolpad-color-scheme',
+  },
+  colorSchemes: { light: true, dark: true },
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 600,
+      lg: 1200,
+      xl: 1536,
+    },
+  },
+});
+
+function PageContainerFullScreen(props) {
+  const { window } = props;
+
+  const router = useDemoRouter('/map');
+
+  // Remove this const when copying and pasting into your project.
+  const demoWindow = window !== undefined ? window() : undefined;
+
+  return (
+    <AppProvider
+      navigation={NAVIGATION}
+      router={router}
+      theme={demoTheme}
+      window={demoWindow}
+    >
+      <DashboardLayout defaultSidebarCollapsed>
+        <PageContainer>
+          <iframe
+            title="Google Map"
+            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387190.2799181496!2d-74.25987571760744!3d40.69767006358627!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259af18b60165%3A0x8b621f8a7a7d28a4!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2s!4v1633452834502!5m2!1sen!2s"
+            style={{ flex: 1, border: 0 }}
+            allowFullScreen
+            loading="lazy"
+          />
+        </PageContainer>
+      </DashboardLayout>
+    </AppProvider>
+  );
+}
+
+PageContainerFullScreen.propTypes = {
+  /**
+   * Injected by the documentation to work in an iframe.
+   * Remove this when copying and pasting into your project.
+   */
+  window: PropTypes.func,
+};
+
+export default PageContainerFullScreen;

docs/data/toolpad/core/components/page-container/PageContainerFullScreen.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { createTheme } from '@mui/material/styles';
+import MapIcon from '@mui/icons-material/Map';
+import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
+import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+import { PageContainer } from '@toolpad/core/PageContainer';
+import { useDemoRouter } from '@toolpad/core/internal';
+
+const NAVIGATION: Navigation = [
+  {
+    segment: 'map',
+    title: 'Map',
+    icon: <MapIcon />,
+  },
+];
+
+const demoTheme = createTheme({
+  cssVariables: {
+    colorSchemeSelector: 'data-toolpad-color-scheme',
+  },
+  colorSchemes: { light: true, dark: true },
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 600,
+      lg: 1200,
+      xl: 1536,
+    },
+  },
+});
+
+interface DemoProps {
+  /**
+   * Injected by the documentation to work in an iframe.
+   * Remove this when copying and pasting into your project.
+   */
+  window?: () => Window;
+}
+
+export default function PageContainerFullScreen(props: DemoProps) {
+  const { window } = props;
+
+  const router = useDemoRouter('/map');
+
+  // Remove this const when copying and pasting into your project.
+  const demoWindow = window !== undefined ? window() : undefined;
+
+  return (
+    <AppProvider
+      navigation={NAVIGATION}
+      router={router}
+      theme={demoTheme}
+      window={demoWindow}
+    >
+      <DashboardLayout defaultSidebarCollapsed>
+        <PageContainer>
+          <iframe
+            title="Google Map"
+            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387190.2799181496!2d-74.25987571760744!3d40.69767006358627!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259af18b60165%3A0x8b621f8a7a7d28a4!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2s!4v1633452834502!5m2!1sen!2s"
+            style={{ flex: 1, border: 0 }}
+            allowFullScreen
+            loading="lazy"
+          />
+        </PageContainer>
+      </DashboardLayout>
+    </AppProvider>
+  );
+}

docs/data/toolpad/core/components/page-container/PageContainerFullScreen.tsx.preview

@@ -0,0 +1,11 @@
+<DashboardLayout defaultSidebarCollapsed>
+  <PageContainer>
+    <iframe
+      title="Google Map"
+      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387190.2799181496!2d-74.25987571760744!3d40.69767006358627!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259af18b60165%3A0x8b621f8a7a7d28a4!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2s!4v1633452834502!5m2!1sen!2s"
+      style={{ flex: 1, border: 0 }}
+      allowFullScreen
+      loading="lazy"
+    />
+  </PageContainer>
+</DashboardLayout>

docs/data/toolpad/core/components/page-container/PageContainerHeader.js

@@ -0,0 +1,34 @@
+import * as React from 'react';
+// preview-start
+import { PageHeader } from '@toolpad/core/PageContainer';
+// preview-end
+import { AppProvider } from '@toolpad/core/AppProvider';
+import { useDemoRouter } from '@toolpad/core/internal';
+import { useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+import Paper from '@mui/material/Paper';
+
+const NAVIGATION = [
+  { segment: '', title: 'Home' },
+  { segment: 'orders', title: 'Orders' },
+];
+
+export default function PageContainerHeader() {
+  const router = useDemoRouter('/orders');
+
+  const theme = useTheme();
+
+  return (
+    <AppProvider navigation={NAVIGATION} router={router} theme={theme}>
+      <Paper sx={{ width: '100%' }}>
+        {/* preview-start */}
+        <Container sx={{ my: 2 }}>
+          <PageHeader />
+          <Box sx={{ mt: 1 }}>Page content</Box>
+        </Container>
+        {/* preview-end */}
+      </Paper>
+    </AppProvider>
+  );
+}

docs/data/toolpad/core/components/page-container/PageContainerHeader.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+// preview-start
+import { PageHeader } from '@toolpad/core/PageContainer';
+// preview-end
+import { AppProvider } from '@toolpad/core/AppProvider';
+import { useDemoRouter } from '@toolpad/core/internal';
+import { useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+import Paper from '@mui/material/Paper';
+
+const NAVIGATION = [
+  { segment: '', title: 'Home' },
+  { segment: 'orders', title: 'Orders' },
+];
+
+export default function PageContainerHeader() {
+  const router = useDemoRouter('/orders');
+
+  const theme = useTheme();
+
+  return (
+    <AppProvider navigation={NAVIGATION} router={router} theme={theme}>
+      <Paper sx={{ width: '100%' }}>
+        {/* preview-start */}
+        <Container sx={{ my: 2 }}>
+          <PageHeader />
+          <Box sx={{ mt: 1 }}>Page content</Box>
+        </Container>
+        {/* preview-end */}
+      </Paper>
+    </AppProvider>
+  );
+}

docs/data/toolpad/core/components/page-container/PageContainerHeader.tsx.preview

@@ -0,0 +1,8 @@
+import { PageHeader } from '@toolpad/core/PageContainer';
+
+// ...
+
+<Container sx={{ my: 2 }}>
+  <PageHeader />
+  <Box sx={{ mt: 1 }}>Page content</Box>
+</Container>

docs/data/toolpad/core/components/page-container/page-container.md

@@ -1,7 +1,7 @@
 ---
 productId: toolpad-core
 title: Page Container
-components: PageContainer, PageContainerToolbar
+components: PageContainer, PageHeader, PageHeaderToolbar
 ---
 
 # Page Container
@@ -102,10 +102,22 @@ export default function Example() {
 
 ## Actions
 
-You can configure additional actions in the area that is reserved on the right. To do so provide the `toolbar` slot to the `PageContainer` component. You can wrap the `PageContainerToolbar` component to create a custom toolbar component, as shown here:
+You can configure additional actions in the area that is reserved on the right. To do so provide the `toolbar` slot to the `PageContainer` component. You can wrap the `PageHeaderToolbar` component to create a custom toolbar component, as shown here:
 
 {{"demo": "ActionsPageContainer.js", "height": 300}}
 
 ## Responsiveness
 
 The Page Container component inherits the properties of the Material UI [Container](https://mui.com/material-ui/react-container/) component. You can use its [`maxWidth`](https://mui.com/material-ui/api/container/#container-prop-maxWidth) and [`fixed`](https://mui.com/material-ui/api/container/#container-prop-fixed) properties to control the bounds of the page. Set `maxWidth` to `false` to disable the container altogether and have the content bleed right up to the edges of the page.
+
+## Standalone page header
+
+The `PageHeader` component included in `PageContainer` can be imported and used by itself if you wish to do so, for more freedom of customization.
+
+{{"demo": "PageContainerHeader.js", "height": 300}}
+
+## Full-size content
+
+The content inside the container can take up the full remaining available area with styles such as `flex: 1` or `height: 100%`.
+
+{{"demo": "PageContainerFullScreen.js", "height": 400, "iframe": true}}

docs/data/toolpad/core/pagesApi.js

@@ -8,7 +8,8 @@ module.exports = [
   { pathname: '/toolpad/core/api/dialogs-provider' },
   { pathname: '/toolpad/core/api/notifications-provider' },
   { pathname: '/toolpad/core/api/page-container' },
-  { pathname: '/toolpad/core/api/page-container-toolbar' },
+  { pathname: '/toolpad/core/api/page-header' },
+  { pathname: '/toolpad/core/api/page-header-toolbar' },
   { pathname: '/toolpad/core/api/sign-in-button' },
   { pathname: '/toolpad/core/api/sign-in-page' },
   { pathname: '/toolpad/core/api/sign-out-button' },

docs/pages/toolpad/core/api/account-popover-footer.json

@@ -1,5 +1,13 @@
 {
-  "props": {},
+  "props": {
+    "sx": {
+      "type": {
+        "name": "union",
+        "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
+      },
+      "additionalInfo": { "sx": true }
+    }
+  },
   "name": "AccountPopoverFooter",
   "imports": ["import { AccountPopoverFooter } from '@toolpad/core/Account';"],
   "classes": [],

docs/pages/toolpad/core/api/account-popover-header.json

@@ -1,5 +1,5 @@
 {
-  "props": {},
+  "props": { "children": { "type": { "name": "node" } } },
   "name": "AccountPopoverHeader",
   "imports": ["import { AccountPopoverHeader } from '@toolpad/core/Account';"],
   "classes": [],