Merge remote-tracking branch 'upstream/master' into optional-segment-…

…proposal
mui · Jul 24, 2024 · 2ffd07d · 2ffd07d
2 parents 296c02f + a8d3674
commit 2ffd07d
Show file tree

Hide file tree

Showing 45 changed files with 1,121 additions and 122 deletions.
diff --git a/docs/data/toolpad/core/components/page-container/ActionsPageContainer.js b/docs/data/toolpad/core/components/page-container/ActionsPageContainer.js
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { useDemoRouter } from '@toolpad/core/internals/demo';
+import { PageContainer, PageContainerToolbar } 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';
+import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
+import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
+import Button from '@mui/material/Button';
+import FileDownloadIcon from '@mui/icons-material/FileDownload';
+import dayjs from 'dayjs';
+import { Paper, useTheme } from '@mui/material';
+import PageContent from './PageContent';
+
+const NAVIGATION = [
+  { segment: '', title: 'Weather' },
+  { segment: 'orders', title: 'Orders' },
+];
+
+// preview-start
+function PageToolbar() {
+  return (
+    <PageContainerToolbar>
+      <Button startIcon={<FileDownloadIcon />} color="inherit">
+        Export
+      </Button>
+      <DateRangePicker
+        sx={{ width: 220 }}
+        defaultValue={[dayjs(), dayjs().add(14, 'day')]}
+        slots={{ field: SingleInputDateRangeField }}
+        slotProps={{ field: { size: 'small' } }}
+        label="Period"
+      />
+    </PageContainerToolbar>
+  );
+}
+// preview-end
+
+export default function ActionsPageContainer() {
+  const router = useDemoRouter();
+
+  const theme = useTheme();
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <AppProvider navigation={NAVIGATION} router={router} theme={theme}>
+        <Paper sx={{ width: '100%' }}>
+          <PageContainer slots={{ toolbar: PageToolbar }}>
+            <PageContent />
+          </PageContainer>
+        </Paper>
+      </AppProvider>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/toolpad/core/components/page-container/ActionsPageContainer.tsx b/docs/data/toolpad/core/components/page-container/ActionsPageContainer.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { useDemoRouter } from '@toolpad/core/internals/demo';
+import { PageContainer, PageContainerToolbar } 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';
+import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
+import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
+import Button from '@mui/material/Button';
+import FileDownloadIcon from '@mui/icons-material/FileDownload';
+import dayjs from 'dayjs';
+import { Paper, useTheme } from '@mui/material';
+import PageContent from './PageContent';
+
+const NAVIGATION = [
+  { segment: '', title: 'Weather' },
+  { segment: 'orders', title: 'Orders' },
+];
+
+// preview-start
+function PageToolbar() {
+  return (
+    <PageContainerToolbar>
+      <Button startIcon={<FileDownloadIcon />} color="inherit">
+        Export
+      </Button>
+      <DateRangePicker
+        sx={{ width: 220 }}
+        defaultValue={[dayjs(), dayjs().add(14, 'day')]}
+        slots={{ field: SingleInputDateRangeField }}
+        slotProps={{ field: { size: 'small' } as any }}
+        label="Period"
+      />
+    </PageContainerToolbar>
+  );
+}
+// preview-end
+
+export default function ActionsPageContainer() {
+  const router = useDemoRouter();
+
+  const theme = useTheme();
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <AppProvider navigation={NAVIGATION} router={router} theme={theme}>
+        <Paper sx={{ width: '100%' }}>
+          <PageContainer slots={{ toolbar: PageToolbar }}>
+            <PageContent />
+          </PageContainer>
+        </Paper>
+      </AppProvider>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/toolpad/core/components/page-container/ActionsPageContainer.tsx.preview b/docs/data/toolpad/core/components/page-container/ActionsPageContainer.tsx.preview
@@ -0,0 +1,16 @@
+function PageToolbar() {
+  return (
+    <PageContainerToolbar>
+      <Button startIcon={<FileDownloadIcon />} color="inherit">
+        Export
+      </Button>
+      <DateRangePicker
+        sx={{ width: 220 }}
+        defaultValue={[dayjs(), dayjs().add(14, 'day')]}
+        slots={{ field: SingleInputDateRangeField }}
+        slotProps={{ field: { size: 'small' } as any }}
+        label="Period"
+      />
+    </PageContainerToolbar>
+  );
+}
diff --git a/docs/data/toolpad/core/components/page-container/BasicPageContainer.js b/docs/data/toolpad/core/components/page-container/BasicPageContainer.js
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { PageContainer } from '@toolpad/core/PageContainer';
+import { AppProvider } from '@toolpad/core/AppProvider';
+import { useDemoRouter } from '@toolpad/core/internals/demo';
+import { Paper, useTheme } from '@mui/material';
+
+const NAVIGATION = [
+  { segment: '', title: 'Home' },
+  { segment: 'orders', title: 'Orders' },
+];
+
+export default function BasicPageContainer() {
+  const router = useDemoRouter('/orders');
+
+  const theme = useTheme();
+
+  return (
+    <AppProvider navigation={NAVIGATION} router={router} theme={theme}>
+      <Paper sx={{ width: '100%' }}>
+        {/* preview-start */}
+        <PageContainer>Page content</PageContainer>
+        {/* preview-end */}
+      </Paper>
+    </AppProvider>
+  );
+}
diff --git a/docs/data/toolpad/core/components/page-container/BasicPageContainer.tsx b/docs/data/toolpad/core/components/page-container/BasicPageContainer.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { PageContainer } from '@toolpad/core/PageContainer';
+import { AppProvider } from '@toolpad/core/AppProvider';
+import { useDemoRouter } from '@toolpad/core/internals/demo';
+import { Paper, useTheme } from '@mui/material';
+
+const NAVIGATION = [
+  { segment: '', title: 'Home' },
+  { segment: 'orders', title: 'Orders' },
+];
+
+export default function BasicPageContainer() {
+  const router = useDemoRouter('/orders');
+
+  const theme = useTheme();
+
+  return (
+    <AppProvider navigation={NAVIGATION} router={router} theme={theme}>
+      <Paper sx={{ width: '100%' }}>
+        {/* preview-start */}
+        <PageContainer>Page content</PageContainer>
+        {/* preview-end */}
+      </Paper>
+    </AppProvider>
+  );
+}
diff --git a/docs/data/toolpad/core/components/page-container/BasicPageContainer.tsx.preview b/docs/data/toolpad/core/components/page-container/BasicPageContainer.tsx.preview
@@ -0,0 +1 @@
+<PageContainer>Page content</PageContainer>
diff --git a/docs/data/toolpad/core/components/page-container/PageContent.js b/docs/data/toolpad/core/components/page-container/PageContent.js
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Unstable_Grid2';
+
+export default function PageContent() {
+  return (
+    <Grid container spacing={3}>
+      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+        <Card variant="outlined">
+          <CardContent>
+            <Typography variant="caption">Temperature</Typography>
+            <Typography variant="h4">24°C</Typography>
+          </CardContent>
+        </Card>
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+        <Card variant="outlined">
+          <CardContent>
+            <Typography variant="caption">Precipitation</Typography>
+            <Typography variant="h4">5%</Typography>
+          </CardContent>
+        </Card>
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+        <Card variant="outlined">
+          <CardContent>
+            <Typography variant="caption">Wind</Typography>
+            <Typography variant="h4">18km/h</Typography>
+          </CardContent>
+        </Card>
+      </Grid>
+    </Grid>
+  );
+}
diff --git a/docs/data/toolpad/core/components/page-container/PageContent.tsx b/docs/data/toolpad/core/components/page-container/PageContent.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Unstable_Grid2';
+
+export default function PageContent() {
+  return (
+    <Grid container spacing={3}>
+      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+        <Card variant="outlined">
+          <CardContent>
+            <Typography variant="caption">Temperature</Typography>
+            <Typography variant="h4">24°C</Typography>
+          </CardContent>
+        </Card>
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+        <Card variant="outlined">
+          <CardContent>
+            <Typography variant="caption">Precipitation</Typography>
+            <Typography variant="h4">5%</Typography>
+          </CardContent>
+        </Card>
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+        <Card variant="outlined">
+          <CardContent>
+            <Typography variant="caption">Wind</Typography>
+            <Typography variant="h4">18km/h</Typography>
+          </CardContent>
+        </Card>
+      </Grid>
+    </Grid>
+  );
+}
diff --git a/docs/data/toolpad/core/components/page-container/TitleBreadcrumbsPageContainer.js b/docs/data/toolpad/core/components/page-container/TitleBreadcrumbsPageContainer.js
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { PageContainer } from '@toolpad/core/PageContainer';
+import { AppProvider } from '@toolpad/core/AppProvider';
+import { useDemoRouter } from '@toolpad/core/internals/demo';
+import { Paper, useTheme } from '@mui/material';
+
+const NAVIGATION = [
+  {
+    segment: 'home',
+    title: 'Home',
+    children: [
+      {
+        segment: 'orders',
+        title: 'Orders',
+      },
+    ],
+  },
+];
+
+export default function TitleBreadcrumbsPageContainer() {
+  const router = useDemoRouter('/home/orders');
+
+  const theme = useTheme();
+
+  return (
+    <AppProvider
+      branding={{ title: 'ACME' }}
+      navigation={NAVIGATION}
+      router={router}
+      theme={theme}
+    >
+      <Paper sx={{ width: '100%' }}>
+        <PageContainer />
+      </Paper>
+    </AppProvider>
+  );
+}
diff --git a/docs/data/toolpad/core/components/page-container/TitleBreadcrumbsPageContainer.tsx b/docs/data/toolpad/core/components/page-container/TitleBreadcrumbsPageContainer.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { PageContainer } from '@toolpad/core/PageContainer';
+import { AppProvider } from '@toolpad/core/AppProvider';
+import { useDemoRouter } from '@toolpad/core/internals/demo';
+import { Paper, useTheme } from '@mui/material';
+
+const NAVIGATION = [
+  {
+    segment: 'home',
+    title: 'Home',
+    children: [
+      {
+        segment: 'orders',
+        title: 'Orders',
+      },
+    ],
+  },
+];
+
+export default function TitleBreadcrumbsPageContainer() {
+  const router = useDemoRouter('/home/orders');
+
+  const theme = useTheme();
+
+  return (
+    <AppProvider
+      branding={{ title: 'ACME' }}
+      navigation={NAVIGATION}
+      router={router}
+      theme={theme}
+    >
+      <Paper sx={{ width: '100%' }}>
+        <PageContainer />
+      </Paper>
+    </AppProvider>
+  );
+}
diff --git a/docs/data/toolpad/core/components/page-container/TitleBreadcrumbsPageContainer.tsx.preview b/docs/data/toolpad/core/components/page-container/TitleBreadcrumbsPageContainer.tsx.preview
@@ -0,0 +1,3 @@
+<Paper sx={{ width: '100%' }}>
+  <PageContainer />
+</Paper>
diff --git a/docs/data/toolpad/core/components/page-container/page-container.md b/docs/data/toolpad/core/components/page-container/page-container.md
@@ -0,0 +1,55 @@
+---
+productId: toolpad-core
+title: Page Container
+components: PageContainer, PageContainerToolbar
+---
+
+# Page Container
+
+<p class="description">A component that wraps page content and provides a title, breadcrumbs, and page actions.</p>
+
+`PageContent` is the ideal wrapper for the content of your dashboard. It shows the current page title, and provides breadcrumbs to navigate back into the current hierarchy. It makes your page responsive through the use of the Material&nbsp;UI Container component under the hood.
+
+Just like [`DashboardLayout`](/toolpad/core/react-dashboard-layout/), `PageContainer` uses the navigation structure that is defined in the [`AppProvider`](/toolpad/core/react-app-provider/) to build up its breadcrumbs and title.
+
+{{"demo": "BasicPageContainer.js", "height": 300}}
+
+## Title and Breadcrumbs
+
+The breacrumbs are formed by matching the current pathname with the navigation structure defined in the [`AppProvider`](/toolpad/core/react-app-provider/). The title of the matched segment is used as the page title. You can override the page title with the `title` property.
+
+For example, under the following navigation structure:
+
+```tsx
+<AppProvider
+  branding={{ title: 'ACME' }}
+  navigation={[
+    {
+      segment: 'home',
+      title: 'Home',
+      children: [
+        {
+          segment: 'orders',
+          title: 'Orders',
+        },
+      ],
+    },
+  ]}
+>
+  ...
+</AppProvider>
+```
+
+The breadcrumbs contains **ACME / Home / Orders** when you visit the path **/home/orders**, and the page has a title of **Orders**.
+
+{{"demo": "TitleBreadcrumbsPageContainer.js", "height": 300, "hideToolbar": true}}
+
+## 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:
+
+{{"demo": "ActionsPageContainer.js", "height": 300}}
+
+## Responsiveness
+
+The Page Container component inherits the properties of the Material&nbsp;UI [Container](https://mui.com/material-ui/react-container/) component. You can use its `maxWidth` and `fixed` properties to control the bounds of the page.