From cf0c2a40d5e1c473d5d299e57f4d5e56d82f673b Mon Sep 17 00:00:00 2001
From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com>
Date: Tue, 23 Jul 2024 14:02:56 +0530
Subject: [PATCH 01/29] add-four-links
---
docs/data/material/components/app-bar/app-bar.md | 4 ++++
docs/data/material/components/dialogs/dialogs.md | 4 ++++
docs/data/material/components/drawers/drawers.md | 4 ++++
docs/data/material/components/snackbars/snackbars.md | 4 ++++
4 files changed, 16 insertions(+)
diff --git a/docs/data/material/components/app-bar/app-bar.md b/docs/data/material/components/app-bar/app-bar.md
index c067e4ee03ac22..87dded6f9b9da7 100644
--- a/docs/data/material/components/app-bar/app-bar.md
+++ b/docs/data/material/components/app-bar/app-bar.md
@@ -16,6 +16,10 @@ It can transform into a contextual action bar or be used as a navbar.
{{"component": "@mui/docs/ComponentLinkHeader"}}
+:::info
+A [DashboardLayout](https://mui.com/toolpad/core/react-dashboard-layout/) is an extension of a drawer. It provides a header and sidebar with navigation, as well as a scrollable area for page content.
+:::
+
## Basic App bar
{{"demo": "ButtonAppBar.js", "bg": true}}
diff --git a/docs/data/material/components/dialogs/dialogs.md b/docs/data/material/components/dialogs/dialogs.md
index c352355a2982a2..8fb2bec7e5858a 100644
--- a/docs/data/material/components/dialogs/dialogs.md
+++ b/docs/data/material/components/dialogs/dialogs.md
@@ -17,6 +17,10 @@ Dialogs are purposefully interruptive, so they should be used sparingly.
{{"component": "@mui/docs/ComponentLinkHeader"}}
+:::info
+The [useDialogs](https://mui.com/toolpad/core/react-use-dialogs/) hook from @toolpad/core offers the functionality to open and close dialogs, and allows dialogs to be stacked on top of each other.
+:::
+
## Introduction
Dialogs are implemented using a collection of related components:
diff --git a/docs/data/material/components/drawers/drawers.md b/docs/data/material/components/drawers/drawers.md
index 7199a9466051e9..75ffcb30310336 100644
--- a/docs/data/material/components/drawers/drawers.md
+++ b/docs/data/material/components/drawers/drawers.md
@@ -16,6 +16,10 @@ A navigation drawer can either be permanently on-screen or controlled by a navig
{{"component": "@mui/docs/ComponentLinkHeader"}}
+:::info
+A [DashboardLayout](https://mui.com/toolpad/core/react-dashboard-layout/) is an extension of a drawer. It provides a header and sidebar with navigation, as well as a scrollable area for page content.
+:::
+
## Temporary drawer
Temporary navigation drawers can toggle open or closed. Closed by default, the drawer opens temporarily above all other content until a section is selected.
diff --git a/docs/data/material/components/snackbars/snackbars.md b/docs/data/material/components/snackbars/snackbars.md
index f860e82866a5f8..f0f636fe210ec5 100644
--- a/docs/data/material/components/snackbars/snackbars.md
+++ b/docs/data/material/components/snackbars/snackbars.md
@@ -20,6 +20,10 @@ The demo below, inspired by Google Keep, shows a basic Snackbar with a text elem
{{"demo": "SimpleSnackbar.js"}}
+:::info
+The [useNotifications](https://mui.com/toolpad/core/react-use-notifications/) hook from @toolpad/core offers a set of abstractions that make it easier to interact with notifications.
+:::
+
### Usage
Snackbars differ from [Alerts](/material-ui/react-alert/) in that Snackbars have a fixed position and a high z-index, so they're intended to break out of the document flow; Alerts, on the other hand, are usually part of the flow—except when they're [used as children of a Snackbar](#use-with-alerts).
From 423ef56bd6394284e36c6a8322fbb431ed30e6c4 Mon Sep 17 00:00:00 2001
From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com>
Date: Tue, 23 Jul 2024 15:23:40 +0530
Subject: [PATCH 02/29] edits
---
docs/data/material/components/app-bar/app-bar.md | 2 +-
docs/data/material/components/dialogs/dialogs.md | 3 +--
docs/data/material/components/drawers/drawers.md | 2 +-
docs/data/material/components/snackbars/snackbars.md | 2 +-
4 files changed, 4 insertions(+), 5 deletions(-)
diff --git a/docs/data/material/components/app-bar/app-bar.md b/docs/data/material/components/app-bar/app-bar.md
index 87dded6f9b9da7..2bffc915ae390d 100644
--- a/docs/data/material/components/app-bar/app-bar.md
+++ b/docs/data/material/components/app-bar/app-bar.md
@@ -17,7 +17,7 @@ It can transform into a contextual action bar or be used as a navbar.
{{"component": "@mui/docs/ComponentLinkHeader"}}
:::info
-A [DashboardLayout](https://mui.com/toolpad/core/react-dashboard-layout/) is an extension of a drawer. It provides a header and sidebar with navigation, as well as a scrollable area for page content.
+The [DashboardLayout](https://mui.com/toolpad/core/react-dashboard-layout/) from `@toolpad/core` is an extension of the app bar component. It provides a headerbar, a sidebar with navigation, and a scrollable area for page content.
:::
## Basic App bar
diff --git a/docs/data/material/components/dialogs/dialogs.md b/docs/data/material/components/dialogs/dialogs.md
index 8fb2bec7e5858a..1edf7324e11127 100644
--- a/docs/data/material/components/dialogs/dialogs.md
+++ b/docs/data/material/components/dialogs/dialogs.md
@@ -18,8 +18,7 @@ Dialogs are purposefully interruptive, so they should be used sparingly.
{{"component": "@mui/docs/ComponentLinkHeader"}}
:::info
-The [useDialogs](https://mui.com/toolpad/core/react-use-dialogs/) hook from @toolpad/core offers the functionality to open and close dialogs, and allows dialogs to be stacked on top of each other.
-:::
+The [useDialogs](https://mui.com/toolpad/core/react-use-dialogs/) hook from `@toolpad/core` offers imperative APIs that make interacting with dialogs simpler.
## Introduction
diff --git a/docs/data/material/components/drawers/drawers.md b/docs/data/material/components/drawers/drawers.md
index 75ffcb30310336..7bb509fde582b9 100644
--- a/docs/data/material/components/drawers/drawers.md
+++ b/docs/data/material/components/drawers/drawers.md
@@ -17,7 +17,7 @@ A navigation drawer can either be permanently on-screen or controlled by a navig
{{"component": "@mui/docs/ComponentLinkHeader"}}
:::info
-A [DashboardLayout](https://mui.com/toolpad/core/react-dashboard-layout/) is an extension of a drawer. It provides a header and sidebar with navigation, as well as a scrollable area for page content.
+The [DashboardLayout](https://mui.com/toolpad/core/react-dashboard-layout/) from `@toolpad/core` is an extension of the drawer component. It provides a headerbar, a sidebar with navigation, and a scrollable area for page content.
:::
## Temporary drawer
diff --git a/docs/data/material/components/snackbars/snackbars.md b/docs/data/material/components/snackbars/snackbars.md
index f0f636fe210ec5..5dcbdeef4e80a0 100644
--- a/docs/data/material/components/snackbars/snackbars.md
+++ b/docs/data/material/components/snackbars/snackbars.md
@@ -21,7 +21,7 @@ The demo below, inspired by Google Keep, shows a basic Snackbar with a text elem
{{"demo": "SimpleSnackbar.js"}}
:::info
-The [useNotifications](https://mui.com/toolpad/core/react-use-notifications/) hook from @toolpad/core offers a set of abstractions that make it easier to interact with notifications.
+The [useNotifications](https://mui.com/toolpad/core/react-use-notifications/) hook from `@toolpad/core` offers imperative APIs that make interacting with app notifications simpler.
:::
### Usage
From 56328ab9a6d0373e15a2cdc7cf8d54f9a5cdcdb1 Mon Sep 17 00:00:00 2001
From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com>
Date: Tue, 23 Jul 2024 15:39:46 +0530
Subject: [PATCH 03/29] add to templates
---
docs/data/material/getting-started/templates/templates.md | 4 ++++
1 file changed, 4 insertions(+)
diff --git a/docs/data/material/getting-started/templates/templates.md b/docs/data/material/getting-started/templates/templates.md
index 9e46486f534c8d..2fe1f77c873470 100644
--- a/docs/data/material/getting-started/templates/templates.md
+++ b/docs/data/material/getting-started/templates/templates.md
@@ -25,6 +25,10 @@ the purpose of each file.
See any room for improvement?
Please feel free to open an [issue](https://github.com/mui/material-ui/issues/new/choose) or [pull request](https://github.com/mui/material-ui/pulls) on GitHub.
+:::info
+[Toolpad Core](https://mui.com/toolpad/core/introduction/) is a framework designed to build full-stack apps. It leverages the existing suite of components offered by MUI and ties them together to help you create dashboards, internal tools quickly.
+:::
+
## Premium templates
Looking for something more? You can find complete templates and themes in the premium template section.
From 904d637a82c85497c7c4e0176c2632c24c5af426 Mon Sep 17 00:00:00 2001
From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com>
Date: Thu, 25 Jul 2024 10:20:50 +0530
Subject: [PATCH 04/29] experimental-apis
---
.../app-bar/DashboardLayoutBasic.js | 85 +
.../app-bar/DashboardLayoutBasic.tsx | 86 +
.../app-bar/DashboardLayoutBasic.tsx.preview | 12 +
.../material/components/app-bar/app-bar.md | 13 +-
.../components/dialogs/ToolpadDialogDemo.js | 61 +
.../components/dialogs/ToolpadDialogDemo.tsx | 44 +
.../dialogs/ToolpadDialogDemo.tsx.preview | 1 +
.../material/components/dialogs/dialogs.md | 14 +-
.../material/components/drawers/drawers.md | 13 +-
.../snackbars/ToolpadNotificationDemo.js | 22 +
.../snackbars/ToolpadNotificationDemo.tsx | 24 +
.../ToolpadNotificationDemo.tsx.preview | 3 +
.../components/snackbars/snackbars.md | 12 +-
.../getting-started/templates/templates.md | 9 +-
package.json | 1 +
pnpm-lock.yaml | 6931 +++++++++--------
16 files changed, 4088 insertions(+), 3243 deletions(-)
create mode 100644 docs/data/material/components/app-bar/DashboardLayoutBasic.js
create mode 100644 docs/data/material/components/app-bar/DashboardLayoutBasic.tsx
create mode 100644 docs/data/material/components/app-bar/DashboardLayoutBasic.tsx.preview
create mode 100644 docs/data/material/components/dialogs/ToolpadDialogDemo.js
create mode 100644 docs/data/material/components/dialogs/ToolpadDialogDemo.tsx
create mode 100644 docs/data/material/components/dialogs/ToolpadDialogDemo.tsx.preview
create mode 100644 docs/data/material/components/snackbars/ToolpadNotificationDemo.js
create mode 100644 docs/data/material/components/snackbars/ToolpadNotificationDemo.tsx
create mode 100644 docs/data/material/components/snackbars/ToolpadNotificationDemo.tsx.preview
diff --git a/docs/data/material/components/app-bar/DashboardLayoutBasic.js b/docs/data/material/components/app-bar/DashboardLayoutBasic.js
new file mode 100644
index 00000000000000..25d3e62948be6b
--- /dev/null
+++ b/docs/data/material/components/app-bar/DashboardLayoutBasic.js
@@ -0,0 +1,85 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
+import BarChartIcon from '@mui/icons-material/BarChart';
+import DescriptionIcon from '@mui/icons-material/Description';
+import LayersIcon from '@mui/icons-material/Layers';
+import { AppProvider } from '@toolpad/core/AppProvider';
+import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+
+const NAVIGATION = [
+ {
+ kind: 'header',
+ title: 'Main items',
+ },
+ {
+ slug: '/dashboard',
+ title: 'Dashboard',
+ icon: ,
+ },
+ {
+ slug: '/orders',
+ title: 'Orders',
+ icon: ,
+ },
+ {
+ kind: 'divider',
+ },
+ {
+ kind: 'header',
+ title: 'Analytics',
+ },
+ {
+ slug: '/reports',
+ title: 'Reports',
+ icon: ,
+ children: [
+ {
+ slug: '/sales',
+ title: 'Sales',
+ icon: ,
+ },
+ {
+ slug: '/traffic',
+ title: 'Traffic',
+ icon: ,
+ },
+ ],
+ },
+ {
+ slug: '/integrations',
+ title: 'Integrations',
+ icon: ,
+ },
+];
+
+export default function DashboardLayoutBasic() {
+ const [pathname, setPathname] = React.useState('/page');
+
+ const router = React.useMemo(() => {
+ return {
+ pathname,
+ searchParams: new URLSearchParams(),
+ navigate: (path) => setPathname(String(path)),
+ };
+ }, [pathname]);
+
+ return (
+
+
+
+ Dashboard content for {pathname}
+
+
+
+ );
+}
diff --git a/docs/data/material/components/app-bar/DashboardLayoutBasic.tsx b/docs/data/material/components/app-bar/DashboardLayoutBasic.tsx
new file mode 100644
index 00000000000000..73d1000def887f
--- /dev/null
+++ b/docs/data/material/components/app-bar/DashboardLayoutBasic.tsx
@@ -0,0 +1,86 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
+import BarChartIcon from '@mui/icons-material/BarChart';
+import DescriptionIcon from '@mui/icons-material/Description';
+import LayersIcon from '@mui/icons-material/Layers';
+import { AppProvider, Router } from '@toolpad/core/AppProvider';
+import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+import type { Navigation } from '@toolpad/core';
+
+const NAVIGATION: Navigation = [
+ {
+ kind: 'header',
+ title: 'Main items',
+ },
+ {
+ slug: '/dashboard',
+ title: 'Dashboard',
+ icon: ,
+ },
+ {
+ slug: '/orders',
+ title: 'Orders',
+ icon: ,
+ },
+ {
+ kind: 'divider',
+ },
+ {
+ kind: 'header',
+ title: 'Analytics',
+ },
+ {
+ slug: '/reports',
+ title: 'Reports',
+ icon: ,
+ children: [
+ {
+ slug: '/sales',
+ title: 'Sales',
+ icon: ,
+ },
+ {
+ slug: '/traffic',
+ title: 'Traffic',
+ icon: ,
+ },
+ ],
+ },
+ {
+ slug: '/integrations',
+ title: 'Integrations',
+ icon: ,
+ },
+];
+
+export default function DashboardLayoutBasic() {
+ const [pathname, setPathname] = React.useState('/page');
+
+ const router = React.useMemo(() => {
+ return {
+ pathname,
+ searchParams: new URLSearchParams(),
+ navigate: (path) => setPathname(String(path)),
+ };
+ }, [pathname]);
+
+ return (
+
+
+
+ Dashboard content for {pathname}
+
+
+
+ );
+}
diff --git a/docs/data/material/components/app-bar/DashboardLayoutBasic.tsx.preview b/docs/data/material/components/app-bar/DashboardLayoutBasic.tsx.preview
new file mode 100644
index 00000000000000..0058ac9f89bd4a
--- /dev/null
+++ b/docs/data/material/components/app-bar/DashboardLayoutBasic.tsx.preview
@@ -0,0 +1,12 @@
+
+
+ Dashboard content for {pathname}
+
+;
diff --git a/docs/data/material/components/app-bar/app-bar.md b/docs/data/material/components/app-bar/app-bar.md
index 2bffc915ae390d..405d2c7987bfa8 100644
--- a/docs/data/material/components/app-bar/app-bar.md
+++ b/docs/data/material/components/app-bar/app-bar.md
@@ -16,10 +16,6 @@ It can transform into a contextual action bar or be used as a navbar.
{{"component": "@mui/docs/ComponentLinkHeader"}}
-:::info
-The [DashboardLayout](https://mui.com/toolpad/core/react-dashboard-layout/) from `@toolpad/core` is an extension of the app bar component. It provides a headerbar, a sidebar with navigation, and a scrollable area for page content.
-:::
-
## Basic App bar
{{"demo": "ButtonAppBar.js", "bg": true}}
@@ -156,3 +152,12 @@ Following the [Material Design guidelines](https://m2.material.io/design/color/d
You can override this behavior by setting the `enableColorOnDark` prop to `true`.
{{"demo": "EnableColorOnDarkAppBar.js", "bg": true}}
+
+
+## Experimental APIs
+
+### DashboardLayout
+
+The [DashboardLayout](https://mui.com/toolpad/core/react-dashboard-layout/) from `@toolpad/core` is an extension of the app bar component. It provides a headerbar, a sidebar with navigation, and a scrollable area for page content.
+
+{{"demo": "DashboardLayoutBasic.js", "height": 500, "iframe": true}}
\ No newline at end of file
diff --git a/docs/data/material/components/dialogs/ToolpadDialogDemo.js b/docs/data/material/components/dialogs/ToolpadDialogDemo.js
new file mode 100644
index 00000000000000..cf3cc7d9b0f132
--- /dev/null
+++ b/docs/data/material/components/dialogs/ToolpadDialogDemo.js
@@ -0,0 +1,61 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { DialogsProvider, useDialogs } from '@toolpad/core/useDialogs';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+
+function MyCustomDialog({ open, onClose }) {
+ return (
+
+ );
+}
+
+MyCustomDialog.propTypes = {
+ /**
+ * A function to call when the dialog should be closed. If the dialog has a return
+ * value, it should be passed as an argument to this function. You should use the promise
+ * that is returned to show a loading state while the dialog is performing async actions
+ * on close.
+ * @param result The result to return from the dialog.
+ * @returns A promise that resolves when the dialog can be fully closed.
+ */
+ onClose: PropTypes.func.isRequired,
+ /**
+ * Whether the dialog is open.
+ */
+ open: PropTypes.bool.isRequired,
+};
+
+function DemoContent() {
+ const dialogs = useDialogs();
+ return (
+
+
+
+ );
+}
+
+export default function ToolpadDialogDemo() {
+ return (
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/docs/data/material/components/dialogs/ToolpadDialogDemo.tsx b/docs/data/material/components/dialogs/ToolpadDialogDemo.tsx
new file mode 100644
index 00000000000000..b6e43a46413cbc
--- /dev/null
+++ b/docs/data/material/components/dialogs/ToolpadDialogDemo.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { DialogsProvider, useDialogs, DialogProps } from '@toolpad/core/useDialogs';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+
+function MyCustomDialog({ open, onClose }: DialogProps) {
+ return (
+
+ );
+}
+
+function DemoContent() {
+ const dialogs = useDialogs();
+ return (
+
+
+
+ );
+}
+
+export default function ToolpadDialogDemo() {
+ return (
+
+
+
+ );
+}
diff --git a/docs/data/material/components/dialogs/ToolpadDialogDemo.tsx.preview b/docs/data/material/components/dialogs/ToolpadDialogDemo.tsx.preview
new file mode 100644
index 00000000000000..3c31a5c7950053
--- /dev/null
+++ b/docs/data/material/components/dialogs/ToolpadDialogDemo.tsx.preview
@@ -0,0 +1 @@
+await dialogs.open(MyCustomDialog);
\ No newline at end of file
diff --git a/docs/data/material/components/dialogs/dialogs.md b/docs/data/material/components/dialogs/dialogs.md
index 1edf7324e11127..379f6266eab3cf 100644
--- a/docs/data/material/components/dialogs/dialogs.md
+++ b/docs/data/material/components/dialogs/dialogs.md
@@ -17,9 +17,6 @@ Dialogs are purposefully interruptive, so they should be used sparingly.
{{"component": "@mui/docs/ComponentLinkHeader"}}
-:::info
-The [useDialogs](https://mui.com/toolpad/core/react-use-dialogs/) hook from `@toolpad/core` offers imperative APIs that make interacting with dialogs simpler.
-
## Introduction
Dialogs are implemented using a collection of related components:
@@ -169,3 +166,14 @@ The package [`material-ui-confirm`](https://github.com/jonatanklosko/material-ui
## Accessibility
Follow the [Modal accessibility section](/material-ui/react-modal/#accessibility).
+
+## Experimental APIs
+
+### useDialogs
+
+[useDialogs](https://mui.com/toolpad/core/react-use-dialogs/) exported from `@toolpad/core` is an imperative API to manage dialogs in your application. System dialogs that adapt to your application theme are also included.
+
+
+{{"demo": "ToolpadDialogDemo.js"}}
+
+
diff --git a/docs/data/material/components/drawers/drawers.md b/docs/data/material/components/drawers/drawers.md
index 7bb509fde582b9..fc556a7617276e 100644
--- a/docs/data/material/components/drawers/drawers.md
+++ b/docs/data/material/components/drawers/drawers.md
@@ -16,10 +16,6 @@ A navigation drawer can either be permanently on-screen or controlled by a navig
{{"component": "@mui/docs/ComponentLinkHeader"}}
-:::info
-The [DashboardLayout](https://mui.com/toolpad/core/react-dashboard-layout/) from `@toolpad/core` is an extension of the drawer component. It provides a headerbar, a sidebar with navigation, and a scrollable area for page content.
-:::
-
## Temporary drawer
Temporary navigation drawers can toggle open or closed. Closed by default, the drawer opens temporarily above all other content until a section is selected.
@@ -138,3 +134,12 @@ Apps focused on information consumption that use a left-to-right hierarchy.
Apps focused on productivity that require balance across the screen.
{{"demo": "ClippedDrawer.js", "iframe": true}}
+
+
+## Experimental APIs
+
+### DashboardLayout
+
+The [DashboardLayout](https://mui.com/toolpad/core/react-dashboard-layout/) from `@toolpad/core` is an extension of the drawer component. It provides a headerbar, a sidebar with navigation, and a scrollable area for page content.
+
+{{"demo": "../app-bar/DashboardLayoutBasic.js", "height": 500, "iframe": true}}
\ No newline at end of file
diff --git a/docs/data/material/components/snackbars/ToolpadNotificationDemo.js b/docs/data/material/components/snackbars/ToolpadNotificationDemo.js
new file mode 100644
index 00000000000000..7958b213b1c5e5
--- /dev/null
+++ b/docs/data/material/components/snackbars/ToolpadNotificationDemo.js
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { useNotifications } from '@toolpad/core/useNotifications';
+import Button from '@mui/material/Button';
+
+export default function ToolpadNotificationDemo() {
+ const notifications = useNotifications();
+ return (
+
+
+
+ );
+}
diff --git a/docs/data/material/components/snackbars/ToolpadNotificationDemo.tsx b/docs/data/material/components/snackbars/ToolpadNotificationDemo.tsx
new file mode 100644
index 00000000000000..490c3a718fa018
--- /dev/null
+++ b/docs/data/material/components/snackbars/ToolpadNotificationDemo.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import * as React from 'react';
+import { useNotifications } from '@toolpad/core/useNotifications';
+import Button from '@mui/material/Button';
+
+export default function ToolpadNotificationDemo() {
+ const notifications = useNotifications();
+ return (
+
+
+
+ );
+}
diff --git a/docs/data/material/components/snackbars/ToolpadNotificationDemo.tsx.preview b/docs/data/material/components/snackbars/ToolpadNotificationDemo.tsx.preview
new file mode 100644
index 00000000000000..d782fa22794bcb
--- /dev/null
+++ b/docs/data/material/components/snackbars/ToolpadNotificationDemo.tsx.preview
@@ -0,0 +1,3 @@
+notifications.show('Consider yourself notified!', {
+ autoHideDuration: 3000,
+});
\ No newline at end of file
diff --git a/docs/data/material/components/snackbars/snackbars.md b/docs/data/material/components/snackbars/snackbars.md
index 5dcbdeef4e80a0..1156b83315e8f1 100644
--- a/docs/data/material/components/snackbars/snackbars.md
+++ b/docs/data/material/components/snackbars/snackbars.md
@@ -20,9 +20,6 @@ The demo below, inspired by Google Keep, shows a basic Snackbar with a text elem
{{"demo": "SimpleSnackbar.js"}}
-:::info
-The [useNotifications](https://mui.com/toolpad/core/react-use-notifications/) hook from `@toolpad/core` offers imperative APIs that make interacting with app notifications simpler.
-:::
### Usage
@@ -143,3 +140,12 @@ The Snackbar component is composed of a root `
` that houses interior elemen
The [useNotifications](https://mui.com/toolpad/core/react-use-notifications/) hook from `@toolpad/core` offers imperative APIs that make interacting with app notifications simpler.
-
-{{"demo": "ToolpadNotificationDemo.js"}}
\ No newline at end of file
+{{"demo": "ToolpadNotificationDemo.js"}}
diff --git a/docs/data/material/getting-started/templates/templates.md b/docs/data/material/getting-started/templates/templates.md
index c5b8c5e8be270e..aa5d3e7dc64e92 100644
--- a/docs/data/material/getting-started/templates/templates.md
+++ b/docs/data/material/getting-started/templates/templates.md
@@ -25,7 +25,6 @@ the purpose of each file.
See any room for improvement?
Please feel free to open an [issue](https://github.com/mui/material-ui/issues/new/choose) or [pull request](https://github.com/mui/material-ui/pulls) on GitHub.
-
## Premium templates
Looking for something more? You can find complete templates and themes in the premium template section.
@@ -39,8 +38,6 @@ Looking for something more? You can find complete templates and themes in the
-
## Toolpad Core
[Toolpad Core](https://mui.com/toolpad/core/introduction/) is a framework designed to build full-stack apps. It leverages the existing suite of components offered by MUI and ties them together to help you create dashboards and internal tools quickly.
-
From d8a71d83a582ee6d5420408ad845bd92c1c58762 Mon Sep 17 00:00:00 2001
From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com>
Date: Thu, 25 Jul 2024 12:44:57 +0530
Subject: [PATCH 08/29] lint
---
docs/data/material/components/dialogs/ToolpadDialogDemo.js | 2 +-
.../material/components/dialogs/ToolpadDialogDemo.tsx.preview | 2 +-
.../material/components/snackbars/ToolpadNotificationDemo.js | 1 +
.../components/snackbars/ToolpadNotificationDemo.tsx.preview | 2 +-
4 files changed, 4 insertions(+), 3 deletions(-)
diff --git a/docs/data/material/components/dialogs/ToolpadDialogDemo.js b/docs/data/material/components/dialogs/ToolpadDialogDemo.js
index cf3cc7d9b0f132..75994fbbb40a4c 100644
--- a/docs/data/material/components/dialogs/ToolpadDialogDemo.js
+++ b/docs/data/material/components/dialogs/ToolpadDialogDemo.js
@@ -58,4 +58,4 @@ export default function ToolpadDialogDemo() {
);
-}
\ No newline at end of file
+}
diff --git a/docs/data/material/components/dialogs/ToolpadDialogDemo.tsx.preview b/docs/data/material/components/dialogs/ToolpadDialogDemo.tsx.preview
index 3c31a5c7950053..d1e8de3651ef5c 100644
--- a/docs/data/material/components/dialogs/ToolpadDialogDemo.tsx.preview
+++ b/docs/data/material/components/dialogs/ToolpadDialogDemo.tsx.preview
@@ -1 +1 @@
-await dialogs.open(MyCustomDialog);
\ No newline at end of file
+await dialogs.open(MyCustomDialog);
diff --git a/docs/data/material/components/snackbars/ToolpadNotificationDemo.js b/docs/data/material/components/snackbars/ToolpadNotificationDemo.js
index 7958b213b1c5e5..7b62b78296183d 100644
--- a/docs/data/material/components/snackbars/ToolpadNotificationDemo.js
+++ b/docs/data/material/components/snackbars/ToolpadNotificationDemo.js
@@ -20,3 +20,4 @@ export default function ToolpadNotificationDemo() {
- );
-}
-
-export default function ToolpadDialogDemo() {
- return (
-
-
-
- );
-}
diff --git a/docs/data/material/components/dialogs/ToolpadDialogDemo.tsx b/docs/data/material/components/dialogs/ToolpadDialogDemo.tsx
deleted file mode 100644
index b6e43a46413cbc..00000000000000
--- a/docs/data/material/components/dialogs/ToolpadDialogDemo.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import * as React from 'react';
-import { DialogsProvider, useDialogs, DialogProps } from '@toolpad/core/useDialogs';
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import DialogTitle from '@mui/material/DialogTitle';
-import DialogContent from '@mui/material/DialogContent';
-import DialogActions from '@mui/material/DialogActions';
-
-function MyCustomDialog({ open, onClose }: DialogProps) {
- return (
-
- );
-}
-
-function DemoContent() {
- const dialogs = useDialogs();
- return (
-
-
-
- );
-}
-
-export default function ToolpadDialogDemo() {
- return (
-
-
-
- );
-}
diff --git a/docs/data/material/components/dialogs/ToolpadDialogDemo.tsx.preview b/docs/data/material/components/dialogs/ToolpadDialogDemo.tsx.preview
deleted file mode 100644
index a552fd4edf0f98..00000000000000
--- a/docs/data/material/components/dialogs/ToolpadDialogDemo.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/dialogs/dialogs.md b/docs/data/material/components/dialogs/dialogs.md
index 893e52967ca64e..476402e7718cd4 100644
--- a/docs/data/material/components/dialogs/dialogs.md
+++ b/docs/data/material/components/dialogs/dialogs.md
@@ -169,8 +169,6 @@ Follow the [Modal accessibility section](/material-ui/react-modal/#accessibility
## Experimental APIs
-### useDialogs
+### Imperative API
-[useDialogs](https://mui.com/toolpad/core/react-use-dialogs/) exported from `@toolpad/core` is an imperative API to manage dialogs in your application. System dialogs that adapt to your application theme are also included.
-
-{{"demo": "ToolpadDialogDemo.js"}}
+You can create and manipulate dialogs imperatively with the [`useDialog`](https://mui.com/toolpad/core/react-use-dialogs/) API in `@toolpad/core`. This API provides state management for opening and closing dialogs and for passing data to the dialog and back. It allows for stacking multiple dialogs. It also provides themed alternatives for `window.alert`, `window.confirm` and `window.prompt`.
diff --git a/docs/data/material/components/drawers/drawers.md b/docs/data/material/components/drawers/drawers.md
index 22260bea443de1..767e3fbcfa4068 100644
--- a/docs/data/material/components/drawers/drawers.md
+++ b/docs/data/material/components/drawers/drawers.md
@@ -139,6 +139,6 @@ Apps focused on productivity that require balance across the screen.
### DashboardLayout
-The [DashboardLayout](https://mui.com/toolpad/core/react-dashboard-layout/) from `@toolpad/core` is an extension of the drawer component. It provides a headerbar, a sidebar with navigation, and a scrollable area for page content.
+The [DashboardLayout](https://mui.com/toolpad/core/react-dashboard-layout/) component from `@toolpad/core` is the starting point for dashboarding applications. It takes care of application layout, theming, navigation and more. An example usage of this component:
-{{"demo": "../app-bar/DashboardLayoutBasic.js", "height": 500, "iframe": true}}
+{{"demo": "../app-bar/DashboardLayoutBasic.js", "height": 400, "iframe": true, "hideToolbar": true}}
diff --git a/docs/data/material/components/snackbars/snackbars.md b/docs/data/material/components/snackbars/snackbars.md
index 8baff4194df51b..c3e53f8b347c65 100644
--- a/docs/data/material/components/snackbars/snackbars.md
+++ b/docs/data/material/components/snackbars/snackbars.md
@@ -142,8 +142,6 @@ The Snackbar component is composed of a root `
` that houses interior elemen
## Experimental APIs
-### useNotifications
+### Imperative API
-The [useNotifications](https://mui.com/toolpad/core/react-use-notifications/) hook from `@toolpad/core` offers imperative APIs that make interacting with app notifications simpler.
-
-{{"demo": "ToolpadNotificationDemo.js"}}
+You can create and manipulate notifications imperatively with the [`useNotifications`](https://mui.com/toolpad/core/react-use-notifications/) API in `@toolpad/core`. This API provides state management for opening and closing snackbars. It also allows for queueing multiple notifications at once.
From c3f66c88d7bda430142ae9598846bad5e72c18e8 Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Thu, 1 Aug 2024 09:57:22 +0200
Subject: [PATCH 18/29] Update DashboardLayoutBasic.js
---
docs/data/material/components/app-bar/DashboardLayoutBasic.js | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/docs/data/material/components/app-bar/DashboardLayoutBasic.js b/docs/data/material/components/app-bar/DashboardLayoutBasic.js
index b8e008ec131531..9b8b484325b7c4 100644
--- a/docs/data/material/components/app-bar/DashboardLayoutBasic.js
+++ b/docs/data/material/components/app-bar/DashboardLayoutBasic.js
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { extendTheme } from '@mui/material/styles';
+import { extendTheme, styled } from '@mui/material/styles';
import DashboardIcon from '@mui/icons-material/Dashboard';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
import BarChartIcon from '@mui/icons-material/BarChart';
@@ -9,7 +9,6 @@ import { AppProvider } from '@toolpad/core/AppProvider';
import { DashboardLayout } from '@toolpad/core/DashboardLayout';
import { PageContainer } from '@toolpad/core/PageContainer';
import Grid from '@mui/material/Grid2';
-import { styled } from '@mui/material/styles';
const NAVIGATION = [
{
From 83520ac770bbbb4d751e2ca2b32e238221279211 Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Thu, 1 Aug 2024 09:57:53 +0200
Subject: [PATCH 19/29] Update DashboardLayoutBasic.js
---
docs/data/material/components/app-bar/DashboardLayoutBasic.js | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/docs/data/material/components/app-bar/DashboardLayoutBasic.js b/docs/data/material/components/app-bar/DashboardLayoutBasic.js
index 9b8b484325b7c4..b8e008ec131531 100644
--- a/docs/data/material/components/app-bar/DashboardLayoutBasic.js
+++ b/docs/data/material/components/app-bar/DashboardLayoutBasic.js
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { extendTheme, styled } from '@mui/material/styles';
+import { extendTheme } from '@mui/material/styles';
import DashboardIcon from '@mui/icons-material/Dashboard';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
import BarChartIcon from '@mui/icons-material/BarChart';
@@ -9,6 +9,7 @@ import { AppProvider } from '@toolpad/core/AppProvider';
import { DashboardLayout } from '@toolpad/core/DashboardLayout';
import { PageContainer } from '@toolpad/core/PageContainer';
import Grid from '@mui/material/Grid2';
+import { styled } from '@mui/material/styles';
const NAVIGATION = [
{
From b1c28a55971f3d82a0129bd03b1ef590bf35e764 Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Thu, 1 Aug 2024 10:09:29 +0200
Subject: [PATCH 20/29] types
---
.../app-bar/DashboardLayoutBasic.js | 17 ++++++++------
.../app-bar/DashboardLayoutBasic.tsx | 21 ++++++++++--------
.../snackbars/ToolpadNotificationDemo.js | 22 -------------------
.../snackbars/ToolpadNotificationDemo.tsx | 22 -------------------
.../ToolpadNotificationDemo.tsx.preview | 11 ----------
5 files changed, 22 insertions(+), 71 deletions(-)
delete mode 100644 docs/data/material/components/snackbars/ToolpadNotificationDemo.js
delete mode 100644 docs/data/material/components/snackbars/ToolpadNotificationDemo.tsx
delete mode 100644 docs/data/material/components/snackbars/ToolpadNotificationDemo.tsx.preview
diff --git a/docs/data/material/components/app-bar/DashboardLayoutBasic.js b/docs/data/material/components/app-bar/DashboardLayoutBasic.js
index b8e008ec131531..2ad9fdc88f1423 100644
--- a/docs/data/material/components/app-bar/DashboardLayoutBasic.js
+++ b/docs/data/material/components/app-bar/DashboardLayoutBasic.js
@@ -5,8 +5,11 @@ import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
import BarChartIcon from '@mui/icons-material/BarChart';
import DescriptionIcon from '@mui/icons-material/Description';
import LayersIcon from '@mui/icons-material/Layers';
+
import { AppProvider } from '@toolpad/core/AppProvider';
+
import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+
import { PageContainer } from '@toolpad/core/PageContainer';
import Grid from '@mui/material/Grid2';
import { styled } from '@mui/material/styles';
@@ -118,30 +121,30 @@ export default function DashboardLayoutBasic(props) {
-
+
-
+
-
+
-
+
-
+
-
+
-
+
diff --git a/docs/data/material/components/app-bar/DashboardLayoutBasic.tsx b/docs/data/material/components/app-bar/DashboardLayoutBasic.tsx
index 4bae23a8726ed0..cc37900a720ffc 100644
--- a/docs/data/material/components/app-bar/DashboardLayoutBasic.tsx
+++ b/docs/data/material/components/app-bar/DashboardLayoutBasic.tsx
@@ -5,8 +5,11 @@ import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
import BarChartIcon from '@mui/icons-material/BarChart';
import DescriptionIcon from '@mui/icons-material/Description';
import LayersIcon from '@mui/icons-material/Layers';
+// @ts-ignore TODO: provide types in Toolpad that are resolvable under moduleResolution: node
import { AppProvider } from '@toolpad/core/AppProvider';
+// @ts-ignore TODO: provide types in Toolpad that are resolvable under moduleResolution: node
import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+// @ts-ignore TODO: provide types in Toolpad that are resolvable under moduleResolution: node
import { PageContainer } from '@toolpad/core/PageContainer';
import Grid from '@mui/material/Grid2';
import { styled } from '@mui/material/styles';
@@ -78,7 +81,7 @@ function useDemoRouter(initialPath: string) {
return {
pathname,
searchParams: new URLSearchParams(),
- navigate: (path) => setPathname(String(path)),
+ navigate: (path: string) => setPathname(String(path)),
};
}, [pathname]);
@@ -92,7 +95,7 @@ const Skeleton = styled('div')<{ height: number }>(({ theme, height }) => ({
content: '" "',
}));
-export default function DashboardLayoutBasic(props) {
+export default function DashboardLayoutBasic(props: any) {
const { window } = props;
const router = useDemoRouter('/dashboard');
@@ -118,30 +121,30 @@ export default function DashboardLayoutBasic(props) {
-
+
-
+
-
+
-
+
-
+
-
+
-
+
diff --git a/docs/data/material/components/snackbars/ToolpadNotificationDemo.js b/docs/data/material/components/snackbars/ToolpadNotificationDemo.js
deleted file mode 100644
index 7958b213b1c5e5..00000000000000
--- a/docs/data/material/components/snackbars/ToolpadNotificationDemo.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react';
-import { useNotifications } from '@toolpad/core/useNotifications';
-import Button from '@mui/material/Button';
-
-export default function ToolpadNotificationDemo() {
- const notifications = useNotifications();
- return (
-
-
-
- );
-}
diff --git a/docs/data/material/components/snackbars/ToolpadNotificationDemo.tsx b/docs/data/material/components/snackbars/ToolpadNotificationDemo.tsx
deleted file mode 100644
index 7958b213b1c5e5..00000000000000
--- a/docs/data/material/components/snackbars/ToolpadNotificationDemo.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react';
-import { useNotifications } from '@toolpad/core/useNotifications';
-import Button from '@mui/material/Button';
-
-export default function ToolpadNotificationDemo() {
- const notifications = useNotifications();
- return (
-