From aa8a72cd12c2105db9c6f05c97b09f494a56cf79 Mon Sep 17 00:00:00 2001
From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com>
Date: Tue, 26 Nov 2024 19:40:54 +0000
Subject: [PATCH 01/11] Allow full-size content in PageContainer
---
.../page-container/ActionsPageContainer.js | 6 +-
.../page-container/ActionsPageContainer.tsx | 6 +-
.../ActionsPageContainer.tsx.preview | 4 +-
.../page-container/PageContainerFullScreen.js | 72 +++++++++
.../PageContainerFullScreen.tsx | 69 +++++++++
.../PageContainerFullScreen.tsx.preview | 11 ++
.../page-container/PageContainerHeader.js | 34 +++++
.../page-container/PageContainerHeader.tsx | 34 +++++
.../PageContainerHeader.tsx.preview | 8 +
.../page-container/page-container.md | 16 +-
docs/data/toolpad/core/pagesApi.js | 3 +-
.../core/api/account-popover-footer.json | 10 +-
.../core/api/account-popover-header.json | 2 +-
.../core/api/page-container-toolbar.json | 13 --
.../toolpad/core/api/page-container.json | 9 +-
...iner-toolbar.js => page-header-toolbar.js} | 6 +-
.../toolpad/core/api/page-header-toolbar.json | 13 ++
docs/pages/toolpad/core/api/page-header.js | 23 +++
docs/pages/toolpad/core/api/page-header.json | 21 +++
.../toolpad/core/api/sign-in-button.json | 2 +-
.../toolpad/core/api/sign-out-button.json | 2 +-
.../account-popover-footer.json | 10 +-
.../account-popover-header.json | 6 +-
.../page-container/page-container.json | 3 +
.../page-header-toolbar.json} | 0
.../api-docs/page-header/page-header.json | 12 ++
.../sign-in-button/sign-in-button.json | 2 +-
.../sign-out-button/sign-out-button.json | 2 +-
packages/toolpad-core/package.json | 2 +
.../src/Account/AccountPopoverFooter.tsx | 24 ++-
.../src/Account/AccountPopoverHeader.tsx | 16 +-
.../toolpad-core/src/Account/SignInButton.tsx | 16 +-
.../src/Account/SignOutButton.tsx | 16 +-
.../src/AppProvider/AppThemeProvider.tsx | 49 ++++++
.../DashboardSidebarSubNavigation.tsx | 70 +++++++++
.../src/DashboardLayout/ToolpadLogo.tsx | 13 +-
.../src/PageContainer/PageContainer.test.tsx | 23 ---
.../src/PageContainer/PageContainer.tsx | 142 ++++++------------
.../PageContainer/PageContainerToolbar.tsx | 31 ----
.../src/PageContainer/PageHeader.tsx | 135 +++++++++++++++++
...ar.test.tsx => PageHeaderToolbar.test.tsx} | 6 +-
.../src/PageContainer/PageHeaderToolbar.tsx | 43 ++++++
.../toolpad-core/src/PageContainer/index.ts | 3 +-
pnpm-lock.yaml | 120 ++++++++++++++-
scripts/generateProptypes.ts | 2 +-
45 files changed, 905 insertions(+), 205 deletions(-)
create mode 100644 docs/data/toolpad/core/components/page-container/PageContainerFullScreen.js
create mode 100644 docs/data/toolpad/core/components/page-container/PageContainerFullScreen.tsx
create mode 100644 docs/data/toolpad/core/components/page-container/PageContainerFullScreen.tsx.preview
create mode 100644 docs/data/toolpad/core/components/page-container/PageContainerHeader.js
create mode 100644 docs/data/toolpad/core/components/page-container/PageContainerHeader.tsx
create mode 100644 docs/data/toolpad/core/components/page-container/PageContainerHeader.tsx.preview
delete mode 100644 docs/pages/toolpad/core/api/page-container-toolbar.json
rename docs/pages/toolpad/core/api/{page-container-toolbar.js => page-header-toolbar.js} (76%)
create mode 100644 docs/pages/toolpad/core/api/page-header-toolbar.json
create mode 100644 docs/pages/toolpad/core/api/page-header.js
create mode 100644 docs/pages/toolpad/core/api/page-header.json
rename docs/translations/api-docs/{page-container-toolbar/page-container-toolbar.json => page-header-toolbar/page-header-toolbar.json} (100%)
create mode 100644 docs/translations/api-docs/page-header/page-header.json
delete mode 100644 packages/toolpad-core/src/PageContainer/PageContainerToolbar.tsx
create mode 100644 packages/toolpad-core/src/PageContainer/PageHeader.tsx
rename packages/toolpad-core/src/PageContainer/{PageContainerToolbar.test.tsx => PageHeaderToolbar.test.tsx} (61%)
create mode 100644 packages/toolpad-core/src/PageContainer/PageHeaderToolbar.tsx
diff --git a/docs/data/toolpad/core/components/page-container/ActionsPageContainer.js b/docs/data/toolpad/core/components/page-container/ActionsPageContainer.js
index db7bf0f7bfa..3924adf43f7 100644
--- a/docs/data/toolpad/core/components/page-container/ActionsPageContainer.js
+++ b/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 (
-
+
} color="inherit">
Export
@@ -32,7 +32,7 @@ function PageToolbar() {
slotProps={{ field: { size: 'small' } }}
label="Period"
/>
-
+
);
}
// preview-end
diff --git a/docs/data/toolpad/core/components/page-container/ActionsPageContainer.tsx b/docs/data/toolpad/core/components/page-container/ActionsPageContainer.tsx
index c36edc6b872..37869bfd9fc 100644
--- a/docs/data/toolpad/core/components/page-container/ActionsPageContainer.tsx
+++ b/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 (
-
+
} color="inherit">
Export
@@ -32,7 +32,7 @@ function PageToolbar() {
slotProps={{ field: { size: 'small' } as any }}
label="Period"
/>
-
+
);
}
// preview-end
diff --git a/docs/data/toolpad/core/components/page-container/ActionsPageContainer.tsx.preview b/docs/data/toolpad/core/components/page-container/ActionsPageContainer.tsx.preview
index 99d697f9bbb..5fbcc68c340 100644
--- a/docs/data/toolpad/core/components/page-container/ActionsPageContainer.tsx.preview
+++ b/docs/data/toolpad/core/components/page-container/ActionsPageContainer.tsx.preview
@@ -1,6 +1,6 @@
function PageToolbar() {
return (
-
+
} color="inherit">
Export
@@ -11,6 +11,6 @@ function PageToolbar() {
slotProps={{ field: { size: 'small' } as any }}
label="Period"
/>
-
+
);
}
\ No newline at end of file
diff --git a/docs/data/toolpad/core/components/page-container/PageContainerFullScreen.js b/docs/data/toolpad/core/components/page-container/PageContainerFullScreen.js
new file mode 100644
index 00000000000..43d867e76ce
--- /dev/null
+++ b/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: ,
+ },
+];
+
+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 (
+
+
+
+
+
+
+
+ );
+}
+
+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;
diff --git a/docs/data/toolpad/core/components/page-container/PageContainerFullScreen.tsx b/docs/data/toolpad/core/components/page-container/PageContainerFullScreen.tsx
new file mode 100644
index 00000000000..4b3ff0fdb3c
--- /dev/null
+++ b/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: ,
+ },
+];
+
+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 (
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs/data/toolpad/core/components/page-container/PageContainerFullScreen.tsx.preview b/docs/data/toolpad/core/components/page-container/PageContainerFullScreen.tsx.preview
new file mode 100644
index 00000000000..973c30fdb99
--- /dev/null
+++ b/docs/data/toolpad/core/components/page-container/PageContainerFullScreen.tsx.preview
@@ -0,0 +1,11 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/data/toolpad/core/components/page-container/PageContainerHeader.js b/docs/data/toolpad/core/components/page-container/PageContainerHeader.js
new file mode 100644
index 00000000000..0883857f2d5
--- /dev/null
+++ b/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 (
+
+
+ {/* preview-start */}
+
+ Page content
+ Page content
+
+ {/* preview-end */}
+
+
+ );
+}
diff --git a/docs/data/toolpad/core/components/page-container/PageContainerHeader.tsx b/docs/data/toolpad/core/components/page-container/PageContainerHeader.tsx
new file mode 100644
index 00000000000..0883857f2d5
--- /dev/null
+++ b/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 (
+
+
+ {/* preview-start */}
+
+ Page content
+ Page content
+
+ {/* preview-end */}
+
+
+ );
+}
diff --git a/docs/data/toolpad/core/components/page-container/PageContainerHeader.tsx.preview b/docs/data/toolpad/core/components/page-container/PageContainerHeader.tsx.preview
new file mode 100644
index 00000000000..6e5a4707202
--- /dev/null
+++ b/docs/data/toolpad/core/components/page-container/PageContainerHeader.tsx.preview
@@ -0,0 +1,8 @@
+import { PageHeader } from '@toolpad/core/PageContainer';
+
+// ...
+
+
+ Page content
+ Page content
+
\ No newline at end of file
diff --git a/docs/data/toolpad/core/components/page-container/page-container.md b/docs/data/toolpad/core/components/page-container/page-container.md
index e8b37a36f8b..f0cc07388a1 100644
--- a/docs/data/toolpad/core/components/page-container/page-container.md
+++ b/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 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}}
diff --git a/docs/data/toolpad/core/pagesApi.js b/docs/data/toolpad/core/pagesApi.js
index 8a3bc6d2b60..c36b8e189db 100644
--- a/docs/data/toolpad/core/pagesApi.js
+++ b/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' },
diff --git a/docs/pages/toolpad/core/api/account-popover-footer.json b/docs/pages/toolpad/core/api/account-popover-footer.json
index 4d4b4d99d00..a10949e29d7 100644
--- a/docs/pages/toolpad/core/api/account-popover-footer.json
+++ b/docs/pages/toolpad/core/api/account-popover-footer.json
@@ -1,5 +1,13 @@
{
- "props": {},
+ "props": {
+ "sx": {
+ "type": {
+ "name": "union",
+ "description": "Array<func
| object
| bool>
| func
| object"
+ },
+ "additionalInfo": { "sx": true }
+ }
+ },
"name": "AccountPopoverFooter",
"imports": ["import { AccountPopoverFooter } from '@toolpad/core/Account';"],
"classes": [],
diff --git a/docs/pages/toolpad/core/api/account-popover-header.json b/docs/pages/toolpad/core/api/account-popover-header.json
index e2ec37ec671..1289db98b2e 100644
--- a/docs/pages/toolpad/core/api/account-popover-header.json
+++ b/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": [],
diff --git a/docs/pages/toolpad/core/api/page-container-toolbar.json b/docs/pages/toolpad/core/api/page-container-toolbar.json
deleted file mode 100644
index 4d789399e61..00000000000
--- a/docs/pages/toolpad/core/api/page-container-toolbar.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
- "props": {},
- "name": "PageContainerToolbar",
- "imports": ["import { PageContainerToolbar } from '@toolpad/core/PageContainer';"],
- "classes": [],
- "spread": true,
- "themeDefaultProps": false,
- "muiName": "PageContainerToolbar",
- "filename": "/packages/toolpad-core/src/PageContainer/PageContainerToolbar.tsx",
- "inheritance": null,
- "demos": "",
- "cssComponent": false
-}
diff --git a/docs/pages/toolpad/core/api/page-container.json b/docs/pages/toolpad/core/api/page-container.json
index e7a4835c201..3cc0b99a513 100644
--- a/docs/pages/toolpad/core/api/page-container.json
+++ b/docs/pages/toolpad/core/api/page-container.json
@@ -8,6 +8,13 @@
"type": { "name": "shape", "description": "{ toolbar?: elementType }" },
"additionalInfo": { "slotsApi": true }
},
+ "sx": {
+ "type": {
+ "name": "union",
+ "description": "Array<func
| object
| bool>
| func
| object"
+ },
+ "additionalInfo": { "sx": true }
+ },
"title": { "type": { "name": "string" } }
},
"name": "PageContainer",
@@ -19,7 +26,7 @@
{
"name": "toolbar",
"description": "The component that renders the actions toolbar.",
- "default": "Snackbar",
+ "default": "PageHeaderToolbar",
"class": null
}
],
diff --git a/docs/pages/toolpad/core/api/page-container-toolbar.js b/docs/pages/toolpad/core/api/page-header-toolbar.js
similarity index 76%
rename from docs/pages/toolpad/core/api/page-container-toolbar.js
rename to docs/pages/toolpad/core/api/page-header-toolbar.js
index c34ccdc8262..01adee5b6bd 100644
--- a/docs/pages/toolpad/core/api/page-container-toolbar.js
+++ b/docs/pages/toolpad/core/api/page-header-toolbar.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import ApiPage from 'docs/src/modules/components/ApiPage';
import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './page-container-toolbar.json';
+import jsonPageContent from './page-header-toolbar.json';
export default function Page(props) {
const { descriptions, pageContent } = props;
@@ -10,9 +10,9 @@ export default function Page(props) {
Page.getInitialProps = () => {
const req = require.context(
- 'docs-toolpad/translations/api-docs/page-container-toolbar',
+ 'docs-toolpad/translations/api-docs/page-header-toolbar',
false,
- /\.\/page-container-toolbar.*.json$/,
+ /\.\/page-header-toolbar.*.json$/,
);
const descriptions = mapApiPageTranslations(req);
diff --git a/docs/pages/toolpad/core/api/page-header-toolbar.json b/docs/pages/toolpad/core/api/page-header-toolbar.json
new file mode 100644
index 00000000000..6824539c9d3
--- /dev/null
+++ b/docs/pages/toolpad/core/api/page-header-toolbar.json
@@ -0,0 +1,13 @@
+{
+ "props": {},
+ "name": "PageHeaderToolbar",
+ "imports": ["import { PageHeaderToolbar } from '@toolpad/core/PageContainer';"],
+ "classes": [],
+ "spread": true,
+ "themeDefaultProps": false,
+ "muiName": "PageHeaderToolbar",
+ "filename": "/packages/toolpad-core/src/PageContainer/PageHeaderToolbar.tsx",
+ "inheritance": null,
+ "demos": "",
+ "cssComponent": false
+}
diff --git a/docs/pages/toolpad/core/api/page-header.js b/docs/pages/toolpad/core/api/page-header.js
new file mode 100644
index 00000000000..0ed0e513800
--- /dev/null
+++ b/docs/pages/toolpad/core/api/page-header.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './page-header.json';
+
+export default function Page(props) {
+ const { descriptions, pageContent } = props;
+ return ;
+}
+
+Page.getInitialProps = () => {
+ const req = require.context(
+ 'docs-toolpad/translations/api-docs/page-header',
+ false,
+ /\.\/page-header.*.json$/,
+ );
+ const descriptions = mapApiPageTranslations(req);
+
+ return {
+ descriptions,
+ pageContent: jsonPageContent,
+ };
+};
diff --git a/docs/pages/toolpad/core/api/page-header.json b/docs/pages/toolpad/core/api/page-header.json
new file mode 100644
index 00000000000..7878ae52a76
--- /dev/null
+++ b/docs/pages/toolpad/core/api/page-header.json
@@ -0,0 +1,21 @@
+{
+ "props": {
+ "breadcrumbs": {
+ "type": { "name": "arrayOf", "description": "Array<{ path: string, title: string }>" }
+ },
+ "slotProps": { "type": { "name": "shape", "description": "{ toolbar: { children?: node } }" } },
+ "slots": {
+ "type": { "name": "shape", "description": "{ toolbar?: elementType }" },
+ "additionalInfo": { "slotsApi": true }
+ },
+ "title": { "type": { "name": "string" } }
+ },
+ "name": "PageHeader",
+ "imports": ["import { PageHeader } from '@toolpad/core/PageContainer';"],
+ "classes": [],
+ "muiName": "PageHeader",
+ "filename": "/packages/toolpad-core/src/PageContainer/PageHeader.tsx",
+ "inheritance": null,
+ "demos": "",
+ "cssComponent": false
+}
diff --git a/docs/pages/toolpad/core/api/sign-in-button.json b/docs/pages/toolpad/core/api/sign-in-button.json
index 72ccc67fc4a..0d34a3b5cf4 100644
--- a/docs/pages/toolpad/core/api/sign-in-button.json
+++ b/docs/pages/toolpad/core/api/sign-in-button.json
@@ -1,5 +1,5 @@
{
- "props": {},
+ "props": { "children": { "type": { "name": "node" } } },
"name": "SignInButton",
"imports": ["import { SignInButton } from '@toolpad/core/Account';"],
"classes": [
diff --git a/docs/pages/toolpad/core/api/sign-out-button.json b/docs/pages/toolpad/core/api/sign-out-button.json
index 9305dc4de49..66fd2b0b73d 100644
--- a/docs/pages/toolpad/core/api/sign-out-button.json
+++ b/docs/pages/toolpad/core/api/sign-out-button.json
@@ -1,5 +1,5 @@
{
- "props": {},
+ "props": { "children": { "type": { "name": "node" } } },
"name": "SignOutButton",
"imports": ["import { SignOutButton } from '@toolpad/core/Account';"],
"classes": [
diff --git a/docs/translations/api-docs/account-popover-footer/account-popover-footer.json b/docs/translations/api-docs/account-popover-footer/account-popover-footer.json
index f93d4cbd8c7..6302728c133 100644
--- a/docs/translations/api-docs/account-popover-footer/account-popover-footer.json
+++ b/docs/translations/api-docs/account-popover-footer/account-popover-footer.json
@@ -1 +1,9 @@
-{ "componentDescription": "", "propDescriptions": {}, "classDescriptions": {} }
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "sx": {
+ "description": "The system prop that allows defining system overrides as well as additional CSS styles."
+ }
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs/account-popover-header/account-popover-header.json b/docs/translations/api-docs/account-popover-header/account-popover-header.json
index f93d4cbd8c7..6d480ad874c 100644
--- a/docs/translations/api-docs/account-popover-header/account-popover-header.json
+++ b/docs/translations/api-docs/account-popover-header/account-popover-header.json
@@ -1 +1,5 @@
-{ "componentDescription": "", "propDescriptions": {}, "classDescriptions": {} }
+{
+ "componentDescription": "",
+ "propDescriptions": { "children": { "description": "The content of the component." } },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs/page-container/page-container.json b/docs/translations/api-docs/page-container/page-container.json
index 3ff8ccbdbd2..072b33f3d2a 100644
--- a/docs/translations/api-docs/page-container/page-container.json
+++ b/docs/translations/api-docs/page-container/page-container.json
@@ -6,6 +6,9 @@
},
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
+ "sx": {
+ "description": "The system prop that allows defining system overrides as well as additional CSS styles."
+ },
"title": { "description": "The title of the page. Leave blank to use the active page title." }
},
"classDescriptions": {
diff --git a/docs/translations/api-docs/page-container-toolbar/page-container-toolbar.json b/docs/translations/api-docs/page-header-toolbar/page-header-toolbar.json
similarity index 100%
rename from docs/translations/api-docs/page-container-toolbar/page-container-toolbar.json
rename to docs/translations/api-docs/page-header-toolbar/page-header-toolbar.json
diff --git a/docs/translations/api-docs/page-header/page-header.json b/docs/translations/api-docs/page-header/page-header.json
new file mode 100644
index 00000000000..1bc373f3155
--- /dev/null
+++ b/docs/translations/api-docs/page-header/page-header.json
@@ -0,0 +1,12 @@
+{
+ "componentDescription": "A header component to provide a title and breadcrumbs for your pages.",
+ "propDescriptions": {
+ "breadcrumbs": {
+ "description": "The breadcrumbs of the page. Leave blank to use the active page breadcrumbs."
+ },
+ "slotProps": { "description": "The props used for each slot inside." },
+ "slots": { "description": "The components used for each slot inside." },
+ "title": { "description": "The title of the page. Leave blank to use the active page title." }
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs/sign-in-button/sign-in-button.json b/docs/translations/api-docs/sign-in-button/sign-in-button.json
index 18077dbb50a..77a6eff5224 100644
--- a/docs/translations/api-docs/sign-in-button/sign-in-button.json
+++ b/docs/translations/api-docs/sign-in-button/sign-in-button.json
@@ -1,6 +1,6 @@
{
"componentDescription": "",
- "propDescriptions": {},
+ "propDescriptions": { "children": { "description": "The content of the component." } },
"classDescriptions": {
"colorError": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
diff --git a/docs/translations/api-docs/sign-out-button/sign-out-button.json b/docs/translations/api-docs/sign-out-button/sign-out-button.json
index 18077dbb50a..77a6eff5224 100644
--- a/docs/translations/api-docs/sign-out-button/sign-out-button.json
+++ b/docs/translations/api-docs/sign-out-button/sign-out-button.json
@@ -1,6 +1,6 @@
{
"componentDescription": "",
- "propDescriptions": {},
+ "propDescriptions": { "children": { "description": "The content of the component." } },
"classDescriptions": {
"colorError": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
diff --git a/packages/toolpad-core/package.json b/packages/toolpad-core/package.json
index 5225a46d84e..f30cfb99a95 100644
--- a/packages/toolpad-core/package.json
+++ b/packages/toolpad-core/package.json
@@ -57,6 +57,8 @@
"@babel/runtime": "^7.26.0",
"@mui/lab": "6.0.0-beta.15",
"@mui/utils": "6.1.7",
+ "@mui/x-data-grid": "7.22.2",
+ "@mui/x-data-grid-pro": "^7.22.3",
"@toolpad/utils": "workspace:*",
"@vitejs/plugin-react": "4.3.3",
"client-only": "^0.0.1",
diff --git a/packages/toolpad-core/src/Account/AccountPopoverFooter.tsx b/packages/toolpad-core/src/Account/AccountPopoverFooter.tsx
index 62696b0b449..f21a99721cb 100644
--- a/packages/toolpad-core/src/Account/AccountPopoverFooter.tsx
+++ b/packages/toolpad-core/src/Account/AccountPopoverFooter.tsx
@@ -1,11 +1,12 @@
import * as React from 'react';
+import PropTypes from 'prop-types';
import Box, { BoxProps } from '@mui/material/Box';
export interface AccountPopoverFooterProps extends BoxProps {
children?: React.ReactNode;
}
-export /**
+/**
*
* Demos:
*
@@ -25,3 +26,24 @@ export /**
);
}
+
+AccountPopoverFooter.propTypes /* remove-proptypes */ = {
+ // ┌────────────────────────────── Warning ──────────────────────────────┐
+ // │ These PropTypes are generated from the TypeScript type definitions. │
+ // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+ // └─────────────────────────────────────────────────────────────────────┘
+ /**
+ * @ignore
+ */
+ children: PropTypes.node,
+ /**
+ * The system prop that allows defining system overrides as well as additional CSS styles.
+ */
+ sx: PropTypes.oneOfType([
+ PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
+ PropTypes.func,
+ PropTypes.object,
+ ]),
+} as any;
+
+export { AccountPopoverFooter };
diff --git a/packages/toolpad-core/src/Account/AccountPopoverHeader.tsx b/packages/toolpad-core/src/Account/AccountPopoverHeader.tsx
index f22591550d3..70bde153be5 100644
--- a/packages/toolpad-core/src/Account/AccountPopoverHeader.tsx
+++ b/packages/toolpad-core/src/Account/AccountPopoverHeader.tsx
@@ -1,11 +1,12 @@
import * as React from 'react';
+import PropTypes from 'prop-types';
import Stack, { StackProps } from '@mui/material/Stack';
export interface AccountPopoverHeaderProps extends StackProps {
children?: React.ReactNode;
}
-export /**
+/**
*
* Demos:
*
@@ -18,3 +19,16 @@ export /**
const { children, ...rest } = props;
return {children};
}
+
+AccountPopoverHeader.propTypes /* remove-proptypes */ = {
+ // ┌────────────────────────────── Warning ──────────────────────────────┐
+ // │ These PropTypes are generated from the TypeScript type definitions. │
+ // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+ // └─────────────────────────────────────────────────────────────────────┘
+ /**
+ * The content of the component.
+ */
+ children: PropTypes.node,
+} as any;
+
+export { AccountPopoverHeader };
diff --git a/packages/toolpad-core/src/Account/SignInButton.tsx b/packages/toolpad-core/src/Account/SignInButton.tsx
index 13d79b6ccde..d2327e6e3c3 100644
--- a/packages/toolpad-core/src/Account/SignInButton.tsx
+++ b/packages/toolpad-core/src/Account/SignInButton.tsx
@@ -1,9 +1,10 @@
import * as React from 'react';
+import PropTypes from 'prop-types';
import Button, { ButtonProps } from '@mui/material/Button';
import { AuthenticationContext } from '../AppProvider/AppProvider';
import { useLocaleText } from '../shared/locales/LocaleContext';
-export /**
+/**
*
* Demos:
*
@@ -38,3 +39,16 @@ export /**
);
}
+
+SignInButton.propTypes /* remove-proptypes */ = {
+ // ┌────────────────────────────── Warning ──────────────────────────────┐
+ // │ These PropTypes are generated from the TypeScript type definitions. │
+ // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+ // └─────────────────────────────────────────────────────────────────────┘
+ /**
+ * The content of the component.
+ */
+ children: PropTypes.node,
+} as any;
+
+export { SignInButton };
diff --git a/packages/toolpad-core/src/Account/SignOutButton.tsx b/packages/toolpad-core/src/Account/SignOutButton.tsx
index 03d87b1fcaf..a83895669d6 100644
--- a/packages/toolpad-core/src/Account/SignOutButton.tsx
+++ b/packages/toolpad-core/src/Account/SignOutButton.tsx
@@ -1,4 +1,5 @@
import * as React from 'react';
+import PropTypes from 'prop-types';
import Button, { ButtonProps } from '@mui/material/Button';
import LogoutIcon from '@mui/icons-material/Logout';
import { AuthenticationContext } from '../AppProvider/AppProvider';
@@ -6,7 +7,7 @@ import { useLocaleText } from '../shared/locales/LocaleContext';
export type SignOutButtonProps = ButtonProps;
-export /**
+/**
*
* Demos:
*
@@ -42,3 +43,16 @@ export /**
);
}
+
+SignOutButton.propTypes /* remove-proptypes */ = {
+ // ┌────────────────────────────── Warning ──────────────────────────────┐
+ // │ These PropTypes are generated from the TypeScript type definitions. │
+ // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+ // └─────────────────────────────────────────────────────────────────────┘
+ /**
+ * The content of the component.
+ */
+ children: PropTypes.node,
+} as any;
+
+export { SignOutButton };
diff --git a/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx b/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx
index 444fcb889d1..a3a0acc3f2e 100644
--- a/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx
+++ b/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx
@@ -1,4 +1,5 @@
import * as React from 'react';
+import PropTypes from 'prop-types';
import { PaletteMode, Theme, useMediaQuery } from '@mui/material';
import { ThemeProvider, useColorScheme } from '@mui/material/styles';
import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';
@@ -80,6 +81,16 @@ function LegacyThemeProvider(props: LegacyThemeProviderProps) {
);
}
+LegacyThemeProvider.propTypes /* remove-proptypes */ = {
+ // ┌────────────────────────────── Warning ──────────────────────────────┐
+ // │ These PropTypes are generated from the TypeScript type definitions. │
+ // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+ // └─────────────────────────────────────────────────────────────────────┘
+ children: PropTypes.node,
+ theme: PropTypes.object.isRequired,
+ window: PropTypes.object,
+} as any;
+
interface CssVarsPaletteModeProviderProps {
children: React.ReactNode;
window?: Window;
@@ -107,6 +118,15 @@ function CssVarsPaletteModeProvider(props: CssVarsPaletteModeProviderProps) {
);
}
+CssVarsPaletteModeProvider.propTypes /* remove-proptypes */ = {
+ // ┌────────────────────────────── Warning ──────────────────────────────┐
+ // │ These PropTypes are generated from the TypeScript type definitions. │
+ // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+ // └─────────────────────────────────────────────────────────────────────┘
+ children: PropTypes.node,
+ window: PropTypes.object,
+} as any;
+
interface CssVarsThemeProviderProps {
children: React.ReactNode;
theme: Theme;
@@ -139,6 +159,16 @@ function CssVarsThemeProvider(props: CssVarsThemeProviderProps) {
);
}
+CssVarsThemeProvider.propTypes /* remove-proptypes */ = {
+ // ┌────────────────────────────── Warning ──────────────────────────────┐
+ // │ These PropTypes are generated from the TypeScript type definitions. │
+ // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+ // └─────────────────────────────────────────────────────────────────────┘
+ children: PropTypes.node,
+ theme: PropTypes.object.isRequired,
+ window: PropTypes.object,
+} as any;
+
interface AppThemeProviderProps {
children: React.ReactNode;
theme: AppTheme;
@@ -164,4 +194,23 @@ function AppThemeProvider(props: AppThemeProviderProps) {
);
}
+AppThemeProvider.propTypes /* remove-proptypes */ = {
+ // ┌────────────────────────────── Warning ──────────────────────────────┐
+ // │ These PropTypes are generated from the TypeScript type definitions. │
+ // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+ // └─────────────────────────────────────────────────────────────────────┘
+ /**
+ * @ignore
+ */
+ children: PropTypes.node,
+ /**
+ * @ignore
+ */
+ theme: PropTypes.object.isRequired,
+ /**
+ * @ignore
+ */
+ window: PropTypes.object,
+} as any;
+
export { AppThemeProvider };
diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardSidebarSubNavigation.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardSidebarSubNavigation.tsx
index bb033205131..f2fefb4d5fe 100644
--- a/packages/toolpad-core/src/DashboardLayout/DashboardSidebarSubNavigation.tsx
+++ b/packages/toolpad-core/src/DashboardLayout/DashboardSidebarSubNavigation.tsx
@@ -1,5 +1,6 @@
'use client';
import * as React from 'react';
+import PropTypes from 'prop-types';
import { styled } from '@mui/material';
import Avatar from '@mui/material/Avatar';
import Collapse from '@mui/material/Collapse';
@@ -274,4 +275,73 @@ function DashboardSidebarSubNavigation({
);
}
+DashboardSidebarSubNavigation.propTypes /* remove-proptypes */ = {
+ // ┌────────────────────────────── Warning ──────────────────────────────┐
+ // │ These PropTypes are generated from the TypeScript type definitions. │
+ // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+ // └─────────────────────────────────────────────────────────────────────┘
+ /**
+ * @ignore
+ */
+ basePath: PropTypes.string,
+ /**
+ * @ignore
+ */
+ depth: PropTypes.number,
+ /**
+ * @ignore
+ */
+ hasDrawerTransitions: PropTypes.bool,
+ /**
+ * @ignore
+ */
+ isFullyExpanded: PropTypes.bool,
+ /**
+ * @ignore
+ */
+ isMini: PropTypes.bool,
+ /**
+ * @ignore
+ */
+ onLinkClick: PropTypes.func.isRequired,
+ /**
+ * @ignore
+ */
+ selectedItemId: PropTypes.string.isRequired,
+ /**
+ * @ignore
+ */
+ subNavigation: PropTypes.arrayOf(
+ PropTypes.oneOfType([
+ PropTypes.shape({
+ action: PropTypes.node,
+ children: PropTypes.arrayOf(
+ PropTypes.oneOfType([
+ PropTypes.object,
+ PropTypes.shape({
+ kind: PropTypes.oneOf(['header']).isRequired,
+ title: PropTypes.string.isRequired,
+ }),
+ PropTypes.shape({
+ kind: PropTypes.oneOf(['divider']).isRequired,
+ }),
+ ]).isRequired,
+ ),
+ icon: PropTypes.node,
+ kind: PropTypes.oneOf(['page']),
+ pattern: PropTypes.string,
+ segment: PropTypes.string,
+ title: PropTypes.string,
+ }),
+ PropTypes.shape({
+ kind: PropTypes.oneOf(['header']).isRequired,
+ title: PropTypes.string.isRequired,
+ }),
+ PropTypes.shape({
+ kind: PropTypes.oneOf(['divider']).isRequired,
+ }),
+ ]).isRequired,
+ ).isRequired,
+} as any;
+
export { DashboardSidebarSubNavigation };
diff --git a/packages/toolpad-core/src/DashboardLayout/ToolpadLogo.tsx b/packages/toolpad-core/src/DashboardLayout/ToolpadLogo.tsx
index 1a9eae2db7d..f56dba19e30 100644
--- a/packages/toolpad-core/src/DashboardLayout/ToolpadLogo.tsx
+++ b/packages/toolpad-core/src/DashboardLayout/ToolpadLogo.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
/**
* @ignore - internal component.
- */
+ */ import PropTypes from 'prop-types';
function ToolpadLogo({ size = 40 }: { size?: number }) {
return (