diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.js b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.js index 3ed2c822614..36aa6e20c6f 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.js +++ b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.js @@ -7,7 +7,7 @@ import DashboardIcon from '@mui/icons-material/Dashboard'; import TimelineIcon from '@mui/icons-material/Timeline'; import { AppProvider } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; -import { useDemoRouter } from '@toolpad/core/internal'; +import { DemoProvider, useDemoRouter } from '@toolpad/core/internal'; const NAVIGATION = [ { @@ -71,18 +71,21 @@ function AppProviderBasic(props) { const demoWindow = window !== undefined ? window() : undefined; return ( - // preview-start - - - - - - // preview-end + // Remove this provider when copying and pasting into your project. + + {/* preview-start */} + + + + + + {/* preview-end */} + ); } diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx index 6d8fb9b3a5f..4a400a3b988 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx +++ b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx @@ -6,7 +6,7 @@ import DashboardIcon from '@mui/icons-material/Dashboard'; import TimelineIcon from '@mui/icons-material/Timeline'; import { AppProvider, type Navigation } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; -import { useDemoRouter } from '@toolpad/core/internal'; +import { DemoProvider, useDemoRouter } from '@toolpad/core/internal'; const NAVIGATION: Navigation = [ { @@ -74,17 +74,20 @@ export default function AppProviderBasic(props: DemoProps) { const demoWindow = window !== undefined ? window() : undefined; return ( - // preview-start - - - - - - // preview-end + // Remove this provider when copying and pasting into your project. + + {/* preview-start */} + + + + + + {/* preview-end */} + ); } diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js index c064cf711be..1cbb963cf33 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js +++ b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js @@ -7,7 +7,7 @@ import DashboardIcon from '@mui/icons-material/Dashboard'; import TimelineIcon from '@mui/icons-material/Timeline'; import { AppProvider } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; -import { useDemoRouter } from '@toolpad/core/internal'; +import { DemoProvider, useDemoRouter } from '@toolpad/core/internal'; const NAVIGATION = [ { @@ -88,18 +88,21 @@ function AppProviderTheme(props) { const demoWindow = window !== undefined ? window() : undefined; return ( - // preview-start - - - - - - // preview-end + // Remove this provider when copying and pasting into your project. + + {/* preview-start */} + + + + + + {/* preview-end */} + ); } diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx index d6a772be78c..5548ee39d9d 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx +++ b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx @@ -6,7 +6,7 @@ import DashboardIcon from '@mui/icons-material/Dashboard'; import TimelineIcon from '@mui/icons-material/Timeline'; import { AppProvider, type Navigation } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; -import { useDemoRouter } from '@toolpad/core/internal'; +import { DemoProvider, useDemoRouter } from '@toolpad/core/internal'; const NAVIGATION: Navigation = [ { @@ -91,17 +91,20 @@ export default function AppProviderTheme(props: DemoProps) { const demoWindow = window !== undefined ? window() : undefined; return ( - // preview-start - - - - - - // preview-end + // Remove this provider when copying and pasting into your project. + + {/* preview-start */} + + + + + + {/* preview-end */} + ); } diff --git a/docs/data/toolpad/core/components/crud/CrudAdvanced.js b/docs/data/toolpad/core/components/crud/CrudAdvanced.js index 7fd30bf777c..05cca6d443d 100644 --- a/docs/data/toolpad/core/components/crud/CrudAdvanced.js +++ b/docs/data/toolpad/core/components/crud/CrudAdvanced.js @@ -13,7 +13,7 @@ import { List, Show, } from '@toolpad/core/Crud'; -import { useDemoRouter } from '@toolpad/core/internal'; +import { DemoProvider, useDemoRouter } from '@toolpad/core/internal'; const NAVIGATION = [ { @@ -273,46 +273,49 @@ function CrudAdvanced(props) { const editNoteId = matchPath(editPath, router.pathname); return ( - - - - {/* preview-start */} - - {router.pathname === listPath ? ( - - ) : null} - {router.pathname === createPath ? ( - - ) : null} - {router.pathname !== createPath && showNoteId ? ( - - ) : null} - {editNoteId ? ( - - ) : null} - - {/* preview-end */} - - - + // Remove this provider when copying and pasting into your project. + + + + + {/* preview-start */} + + {router.pathname === listPath ? ( + + ) : null} + {router.pathname === createPath ? ( + + ) : null} + {router.pathname !== createPath && showNoteId ? ( + + ) : null} + {editNoteId ? ( + + ) : null} + + {/* preview-end */} + + + + ); } diff --git a/docs/data/toolpad/core/components/crud/CrudAdvanced.tsx b/docs/data/toolpad/core/components/crud/CrudAdvanced.tsx index cee3b21d0e2..1de9755f0d0 100644 --- a/docs/data/toolpad/core/components/crud/CrudAdvanced.tsx +++ b/docs/data/toolpad/core/components/crud/CrudAdvanced.tsx @@ -14,7 +14,7 @@ import { List, Show, } from '@toolpad/core/Crud'; -import { useDemoRouter } from '@toolpad/core/internal'; +import { DemoProvider, useDemoRouter } from '@toolpad/core/internal'; const NAVIGATION: Navigation = [ { @@ -294,48 +294,51 @@ export default function CrudAdvanced(props: DemoProps) { const editNoteId = matchPath(editPath, router.pathname); return ( - - - - {/* preview-start */} - - dataSource={notesDataSource} - dataSourceCache={notesCache} - > - {router.pathname === listPath ? ( - - initialPageSize={10} - onRowClick={handleRowClick} - onCreateClick={handleCreateClick} - onEditClick={handleEditClick} - /> - ) : null} - {router.pathname === createPath ? ( - - initialValues={{ title: 'New note' }} - onSubmitSuccess={handleCreate} - resetOnSubmit={false} - /> - ) : null} - {router.pathname !== createPath && showNoteId ? ( - - id={showNoteId} - onEditClick={handleEditClick} - onDelete={handleDelete} - /> - ) : null} - {editNoteId ? ( - id={editNoteId} onSubmitSuccess={handleEdit} /> - ) : null} - - {/* preview-end */} - - - + // Remove this provider when copying and pasting into your project. + + + + + {/* preview-start */} + + dataSource={notesDataSource} + dataSourceCache={notesCache} + > + {router.pathname === listPath ? ( + + initialPageSize={10} + onRowClick={handleRowClick} + onCreateClick={handleCreateClick} + onEditClick={handleEditClick} + /> + ) : null} + {router.pathname === createPath ? ( + + initialValues={{ title: 'New note' }} + onSubmitSuccess={handleCreate} + resetOnSubmit={false} + /> + ) : null} + {router.pathname !== createPath && showNoteId ? ( + + id={showNoteId} + onEditClick={handleEditClick} + onDelete={handleDelete} + /> + ) : null} + {editNoteId ? ( + id={editNoteId} onSubmitSuccess={handleEdit} /> + ) : null} + + {/* preview-end */} + + + + ); } diff --git a/docs/data/toolpad/core/components/crud/CrudBasic.js b/docs/data/toolpad/core/components/crud/CrudBasic.js index 00f12c47456..289a751a521 100644 --- a/docs/data/toolpad/core/components/crud/CrudBasic.js +++ b/docs/data/toolpad/core/components/crud/CrudBasic.js @@ -6,7 +6,7 @@ import { AppProvider } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; import { PageContainer } from '@toolpad/core/PageContainer'; import { Crud, DataSourceCache } from '@toolpad/core/Crud'; -import { useDemoRouter } from '@toolpad/core/internal'; +import { DemoProvider, useDemoRouter } from '@toolpad/core/internal'; const NAVIGATION = [ { @@ -228,26 +228,29 @@ function CrudBasic(props) { }, [router.pathname]); return ( - - - - {/* preview-start */} - - {/* preview-end */} - - - + // Remove this provider when copying and pasting into your project. + + + + + {/* preview-start */} + + {/* preview-end */} + + + + ); } diff --git a/docs/data/toolpad/core/components/crud/CrudBasic.tsx b/docs/data/toolpad/core/components/crud/CrudBasic.tsx index e58449d51f5..0f1c726c621 100644 --- a/docs/data/toolpad/core/components/crud/CrudBasic.tsx +++ b/docs/data/toolpad/core/components/crud/CrudBasic.tsx @@ -5,7 +5,7 @@ import { AppProvider, type Navigation } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; import { PageContainer } from '@toolpad/core/PageContainer'; import { Crud, DataModel, DataSource, DataSourceCache } from '@toolpad/core/Crud'; -import { useDemoRouter } from '@toolpad/core/internal'; +import { DemoProvider, useDemoRouter } from '@toolpad/core/internal'; const NAVIGATION: Navigation = [ { @@ -247,25 +247,28 @@ export default function CrudBasic(props: DemoProps) { }, [router.pathname]); return ( - - - - {/* preview-start */} - - dataSource={notesDataSource} - dataSourceCache={notesCache} - rootPath="/notes" - initialPageSize={10} - defaultValues={{ title: 'New note' }} - /> - {/* preview-end */} - - - + // Remove this provider when copying and pasting into your project. + + + + + {/* preview-start */} + + dataSource={notesDataSource} + dataSourceCache={notesCache} + rootPath="/notes" + initialPageSize={10} + defaultValues={{ title: 'New note' }} + /> + {/* preview-end */} + + + + ); } diff --git a/docs/data/toolpad/core/components/crud/CrudCreate.js b/docs/data/toolpad/core/components/crud/CrudCreate.js index 44754879de1..489584269f4 100644 --- a/docs/data/toolpad/core/components/crud/CrudCreate.js +++ b/docs/data/toolpad/core/components/crud/CrudCreate.js @@ -6,7 +6,7 @@ import { AppProvider } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; import { PageContainer } from '@toolpad/core/PageContainer'; import { Create, DataSourceCache } from '@toolpad/core/Crud'; -import { useDemoRouter } from '@toolpad/core/internal'; +import { DemoProvider, useDemoRouter } from '@toolpad/core/internal'; const NAVIGATION = [ { @@ -115,26 +115,29 @@ function CrudCreate(props) { }, []); return ( - - - - {/* preview-start */} - - {/* preview-end */} - - - + // Remove this provider when copying and pasting into your project. + + + + + {/* preview-start */} + + {/* preview-end */} + + + + ); } diff --git a/docs/data/toolpad/core/components/crud/CrudCreate.tsx b/docs/data/toolpad/core/components/crud/CrudCreate.tsx index 3e331d1133f..cfb197c6404 100644 --- a/docs/data/toolpad/core/components/crud/CrudCreate.tsx +++ b/docs/data/toolpad/core/components/crud/CrudCreate.tsx @@ -5,7 +5,7 @@ import { AppProvider, type Navigation } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; import { PageContainer } from '@toolpad/core/PageContainer'; import { DataModel, DataSource, Create, DataSourceCache } from '@toolpad/core/Crud'; -import { useDemoRouter } from '@toolpad/core/internal'; +import { DemoProvider, useDemoRouter } from '@toolpad/core/internal'; const NAVIGATION: Navigation = [ { @@ -130,25 +130,28 @@ export default function CrudCreate(props: DemoProps) { }, []); return ( - - - - {/* preview-start */} - - dataSource={peopleDataSource} - dataSourceCache={peopleCache} - initialValues={{ age: 18 }} - onSubmitSuccess={handleSubmitSuccess} - resetOnSubmit - /> - {/* preview-end */} - - - + // Remove this provider when copying and pasting into your project. + + + + + {/* preview-start */} + + dataSource={peopleDataSource} + dataSourceCache={peopleCache} + initialValues={{ age: 18 }} + onSubmitSuccess={handleSubmitSuccess} + resetOnSubmit + /> + {/* preview-end */} + + + + ); } diff --git a/docs/data/toolpad/core/components/crud/CrudEdit.js b/docs/data/toolpad/core/components/crud/CrudEdit.js index d386ba38f27..6f99b53fe9a 100644 --- a/docs/data/toolpad/core/components/crud/CrudEdit.js +++ b/docs/data/toolpad/core/components/crud/CrudEdit.js @@ -6,7 +6,7 @@ import { AppProvider } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; import { PageContainer } from '@toolpad/core/PageContainer'; import { DataSourceCache, Edit } from '@toolpad/core/Crud'; -import { useDemoRouter } from '@toolpad/core/internal'; +import { DemoProvider, useDemoRouter } from '@toolpad/core/internal'; const NAVIGATION = [ { @@ -136,25 +136,28 @@ function CrudEdit(props) { }, []); return ( - - - - {/* preview-start */} - - {/* preview-end */} - - - + // Remove this provider when copying and pasting into your project. + + + + + {/* preview-start */} + + {/* preview-end */} + + + + ); } diff --git a/docs/data/toolpad/core/components/crud/CrudEdit.tsx b/docs/data/toolpad/core/components/crud/CrudEdit.tsx index 29cbbf7faae..752a326513e 100644 --- a/docs/data/toolpad/core/components/crud/CrudEdit.tsx +++ b/docs/data/toolpad/core/components/crud/CrudEdit.tsx @@ -5,7 +5,7 @@ import { AppProvider, type Navigation } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; import { PageContainer } from '@toolpad/core/PageContainer'; import { DataModel, DataSource, DataSourceCache, Edit } from '@toolpad/core/Crud'; -import { useDemoRouter } from '@toolpad/core/internal'; +import { DemoProvider, useDemoRouter } from '@toolpad/core/internal'; const NAVIGATION: Navigation = [ { @@ -151,24 +151,27 @@ export default function CrudEdit(props: DemoProps) { }, []); return ( - - - - {/* preview-start */} - - id={1} - dataSource={peopleDataSource} - dataSourceCache={peopleCache} - onSubmitSuccess={handleSubmitSuccess} - /> - {/* preview-end */} - - - + // Remove this provider when copying and pasting into your project. + + + + + {/* preview-start */} + + id={1} + dataSource={peopleDataSource} + dataSourceCache={peopleCache} + onSubmitSuccess={handleSubmitSuccess} + /> + {/* preview-end */} + + + + ); } diff --git a/docs/data/toolpad/core/components/crud/CrudList.js b/docs/data/toolpad/core/components/crud/CrudList.js index 4b698e18e71..a0fea33c1e5 100644 --- a/docs/data/toolpad/core/components/crud/CrudList.js +++ b/docs/data/toolpad/core/components/crud/CrudList.js @@ -6,7 +6,7 @@ import { AppProvider } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; import { PageContainer } from '@toolpad/core/PageContainer'; import { DataSourceCache, List } from '@toolpad/core/Crud'; -import { useDemoRouter } from '@toolpad/core/internal'; +import { DemoProvider, useDemoRouter } from '@toolpad/core/internal'; const NAVIGATION = [ { @@ -166,28 +166,31 @@ function CrudList(props) { }, []); return ( - - - - {/* preview-start */} - - {/* preview-end */} - - - + // Remove this provider when copying and pasting into your project. + + + + + {/* preview-start */} + + {/* preview-end */} + + + + ); } diff --git a/docs/data/toolpad/core/components/crud/CrudList.tsx b/docs/data/toolpad/core/components/crud/CrudList.tsx index eb945970443..e751702611d 100644 --- a/docs/data/toolpad/core/components/crud/CrudList.tsx +++ b/docs/data/toolpad/core/components/crud/CrudList.tsx @@ -5,7 +5,7 @@ import { AppProvider, type Navigation } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; import { PageContainer } from '@toolpad/core/PageContainer'; import { DataModel, DataSource, DataSourceCache, List } from '@toolpad/core/Crud'; -import { useDemoRouter } from '@toolpad/core/internal'; +import { DemoProvider, useDemoRouter } from '@toolpad/core/internal'; const NAVIGATION: Navigation = [ { @@ -181,27 +181,30 @@ export default function CrudList(props: DemoProps) { }, []); return ( - - - - {/* preview-start */} - - dataSource={peopleDataSource} - dataSourceCache={peopleCache} - initialPageSize={4} - onRowClick={handleRowClick} - onCreateClick={handleCreateClick} - onEditClick={handleEditClick} - onDelete={handleDelete} - /> - {/* preview-end */} - - - + // Remove this provider when copying and pasting into your project. + + + + + {/* preview-start */} + + dataSource={peopleDataSource} + dataSourceCache={peopleCache} + initialPageSize={4} + onRowClick={handleRowClick} + onCreateClick={handleCreateClick} + onEditClick={handleEditClick} + onDelete={handleDelete} + /> + {/* preview-end */} + + + + ); } diff --git a/docs/data/toolpad/core/components/crud/CrudListDataGrid.js b/docs/data/toolpad/core/components/crud/CrudListDataGrid.js index ad8bdd1be44..1e1616ae8f5 100644 --- a/docs/data/toolpad/core/components/crud/CrudListDataGrid.js +++ b/docs/data/toolpad/core/components/crud/CrudListDataGrid.js @@ -7,7 +7,7 @@ import { AppProvider } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; import { PageContainer } from '@toolpad/core/PageContainer'; import { DataSourceCache, List } from '@toolpad/core/Crud'; -import { useDemoRouter } from '@toolpad/core/internal'; +import { DemoProvider, useDemoRouter } from '@toolpad/core/internal'; const NAVIGATION = [ { @@ -136,32 +136,37 @@ function CrudListDataGrid(props) { }, []); return ( - - - - {/* preview-start */} - - {/* preview-end */} - - - + // Remove this provider when copying and pasting into your project. + + + + + {/* preview-start */} + + {/* preview-end */} + + + + ); } diff --git a/docs/data/toolpad/core/components/crud/CrudListDataGrid.tsx b/docs/data/toolpad/core/components/crud/CrudListDataGrid.tsx index f3028b263dc..5e98a36981d 100644 --- a/docs/data/toolpad/core/components/crud/CrudListDataGrid.tsx +++ b/docs/data/toolpad/core/components/crud/CrudListDataGrid.tsx @@ -6,7 +6,7 @@ import { AppProvider, type Navigation } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; import { PageContainer } from '@toolpad/core/PageContainer'; import { DataModel, DataSource, DataSourceCache, List } from '@toolpad/core/Crud'; -import { useDemoRouter } from '@toolpad/core/internal'; +import { DemoProvider, useDemoRouter } from '@toolpad/core/internal'; const NAVIGATION: Navigation = [ { @@ -146,31 +146,36 @@ export default function CrudListDataGrid(props: DemoProps) { }, []); return ( - - - - {/* preview-start */} - - dataSource={peopleDataSource} - dataSourceCache={peopleCache} - initialPageSize={4} - onRowClick={handleRowClick} - onCreateClick={handleCreateClick} - onEditClick={handleEditClick} - onDelete={handleDelete} - slots={{ dataGrid: DataGridPro }} - slotProps={{ - dataGrid: { initialState: { pinnedColumns: { right: ['actions'] } } }, - }} - /> - {/* preview-end */} - - - + // Remove this provider when copying and pasting into your project. + + + + + {/* preview-start */} + + dataSource={peopleDataSource} + dataSourceCache={peopleCache} + initialPageSize={4} + onRowClick={handleRowClick} + onCreateClick={handleCreateClick} + onEditClick={handleEditClick} + onDelete={handleDelete} + slots={{ dataGrid: DataGridPro }} + slotProps={{ + dataGrid: { + initialState: { pinnedColumns: { right: ['actions'] } }, + }, + }} + /> + {/* preview-end */} + + + + ); } diff --git a/docs/data/toolpad/core/components/crud/CrudListDataGrid.tsx.preview b/docs/data/toolpad/core/components/crud/CrudListDataGrid.tsx.preview index 8b29f127784..1759560abc7 100644 --- a/docs/data/toolpad/core/components/crud/CrudListDataGrid.tsx.preview +++ b/docs/data/toolpad/core/components/crud/CrudListDataGrid.tsx.preview @@ -8,6 +8,8 @@ onDelete={handleDelete} slots={{ dataGrid: DataGridPro }} slotProps={{ - dataGrid: { initialState: { pinnedColumns: { right: ['actions'] } } }, + dataGrid: { + initialState: { pinnedColumns: { right: ['actions'] } }, + }, }} /> \ No newline at end of file diff --git a/docs/data/toolpad/core/components/crud/CrudNoCache.js b/docs/data/toolpad/core/components/crud/CrudNoCache.js index c227be51f98..a6b4b3764ff 100644 --- a/docs/data/toolpad/core/components/crud/CrudNoCache.js +++ b/docs/data/toolpad/core/components/crud/CrudNoCache.js @@ -6,7 +6,7 @@ import { AppProvider } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; import { PageContainer } from '@toolpad/core/PageContainer'; import { Crud } from '@toolpad/core/Crud'; -import { useDemoRouter } from '@toolpad/core/internal'; +import { DemoProvider, useDemoRouter } from '@toolpad/core/internal'; const NAVIGATION = [ { @@ -224,26 +224,29 @@ function CrudNoCache(props) { }, [router.pathname]); return ( - - - - {/* preview-start */} - - {/* preview-end */} - - - + // Remove this provider when copying and pasting into your project. + + + + + {/* preview-start */} + + {/* preview-end */} + + + + ); } diff --git a/docs/data/toolpad/core/components/crud/CrudNoCache.tsx b/docs/data/toolpad/core/components/crud/CrudNoCache.tsx index 68f60fca44d..f6737901ec3 100644 --- a/docs/data/toolpad/core/components/crud/CrudNoCache.tsx +++ b/docs/data/toolpad/core/components/crud/CrudNoCache.tsx @@ -5,7 +5,7 @@ import { AppProvider, type Navigation } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; import { PageContainer } from '@toolpad/core/PageContainer'; import { Crud, DataModel, DataSource } from '@toolpad/core/Crud'; -import { useDemoRouter } from '@toolpad/core/internal'; +import { DemoProvider, useDemoRouter } from '@toolpad/core/internal'; const NAVIGATION: Navigation = [ { @@ -237,25 +237,28 @@ export default function CrudNoCache(props: DemoProps) { }, [router.pathname]); return ( - - - - {/* preview-start */} - - dataSource={notesDataSource} - dataSourceCache={null} - rootPath="/notes" - initialPageSize={10} - defaultValues={{ title: 'New note' }} - /> - {/* preview-end */} - - - + // Remove this provider when copying and pasting into your project. + + + + + {/* preview-start */} + + dataSource={notesDataSource} + dataSourceCache={null} + rootPath="/notes" + initialPageSize={10} + defaultValues={{ title: 'New note' }} + /> + {/* preview-end */} + + + + ); } diff --git a/docs/data/toolpad/core/components/crud/CrudShow.js b/docs/data/toolpad/core/components/crud/CrudShow.js index 43ebcb39dbd..722ed76b57a 100644 --- a/docs/data/toolpad/core/components/crud/CrudShow.js +++ b/docs/data/toolpad/core/components/crud/CrudShow.js @@ -6,7 +6,7 @@ import { AppProvider } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; import { PageContainer } from '@toolpad/core/PageContainer'; import { DataSourceCache, Show } from '@toolpad/core/Crud'; -import { useDemoRouter } from '@toolpad/core/internal'; +import { DemoProvider, useDemoRouter } from '@toolpad/core/internal'; const NAVIGATION = [ { @@ -104,26 +104,29 @@ function CrudShow(props) { }, []); return ( - - - - {/* preview-start */} - - {/* preview-end */} - - - + // Remove this provider when copying and pasting into your project. + + + + + {/* preview-start */} + + {/* preview-end */} + + + + ); } diff --git a/docs/data/toolpad/core/components/crud/CrudShow.tsx b/docs/data/toolpad/core/components/crud/CrudShow.tsx index d0b2ac9e871..5942051f23f 100644 --- a/docs/data/toolpad/core/components/crud/CrudShow.tsx +++ b/docs/data/toolpad/core/components/crud/CrudShow.tsx @@ -5,7 +5,7 @@ import { AppProvider, type Navigation } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; import { PageContainer } from '@toolpad/core/PageContainer'; import { DataModel, DataSource, DataSourceCache, Show } from '@toolpad/core/Crud'; -import { useDemoRouter } from '@toolpad/core/internal'; +import { DemoProvider, useDemoRouter } from '@toolpad/core/internal'; const NAVIGATION: Navigation = [ { @@ -119,25 +119,28 @@ export default function CrudShow(props: DemoProps) { }, []); return ( - - - - {/* preview-start */} - - id={1} - dataSource={peopleDataSource} - dataSourceCache={peopleCache} - onEditClick={handleEditClick} - onDelete={handleDelete} - /> - {/* preview-end */} - - - + // Remove this provider when copying and pasting into your project. + + + + + {/* preview-start */} + + id={1} + dataSource={peopleDataSource} + dataSourceCache={peopleCache} + onEditClick={handleEditClick} + onDelete={handleDelete} + /> + {/* preview-end */} + + + + ); } diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccount.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccount.js index 27d0b93c54e..c9485144c72 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccount.js +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccount.js @@ -6,7 +6,7 @@ import { createTheme } from '@mui/material/styles'; import DashboardIcon from '@mui/icons-material/Dashboard'; import { AppProvider } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; -import { useDemoRouter } from '@toolpad/core/internal'; +import { DemoProvider, useDemoRouter } from '@toolpad/core/internal'; const NAVIGATION = [ { @@ -86,20 +86,23 @@ function DashboardLayoutAccount(props) { const demoWindow = window !== undefined ? window() : undefined; return ( - // preview-start - - - - - - // preview-end + // Remove this provider when copying and pasting into your project. + + {/* preview-start */} + + + + + + {/* preview-end */} + ); } diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccount.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccount.tsx index 6439a2498fd..234fde2e500 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccount.tsx +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccount.tsx @@ -9,7 +9,7 @@ import { type Navigation, } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; -import { useDemoRouter } from '@toolpad/core/internal'; +import { DemoProvider, useDemoRouter } from '@toolpad/core/internal'; const NAVIGATION: Navigation = [ { @@ -93,19 +93,22 @@ export default function DashboardLayoutAccount(props: DemoProps) { const demoWindow = window !== undefined ? window() : undefined; return ( - // preview-start - - - - - - // preview-end + // Remove this provider when copying and pasting into your project. + + {/* preview-start */} + + + + + + {/* preview-end */} + ); } diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.js index 1ee1fc58259..66e996bc4cc 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.js +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.js @@ -21,6 +21,8 @@ import { SignOutButton, } from '@toolpad/core/Account'; +import { DemoProvider } from '@toolpad/core/internal'; + const NAVIGATION = [ { kind: 'header', @@ -267,20 +269,25 @@ function DashboardLayoutAccountSidebar(props) { }, []); return ( - - null, sidebarFooter: SidebarFooterAccount }} + // Remove this provider when copying and pasting into your project. + + - - - + {/* preview-start */} + null, sidebarFooter: SidebarFooterAccount }} + > + + + {/* preview-end */} + + ); } diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.tsx index ba82b95c2c2..78ab570494d 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.tsx +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.tsx @@ -21,6 +21,7 @@ import { AccountPreviewProps, } from '@toolpad/core/Account'; import type { Navigation, Router, Session } from '@toolpad/core/AppProvider'; +import { DemoProvider } from '@toolpad/core/internal'; const NAVIGATION: Navigation = [ { @@ -254,19 +255,24 @@ export default function DashboardLayoutAccountSidebar(props: DemoProps) { }, []); return ( - - null, sidebarFooter: SidebarFooterAccount }} + // Remove this provider when copying and pasting into your project. + + - - - + {/* preview-start */} + null, sidebarFooter: SidebarFooterAccount }} + > + + + {/* preview-end */} + + ); } diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js index e403954223a..2cff4b90ccf 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js @@ -10,7 +10,7 @@ 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 { useDemoRouter } from '@toolpad/core/internal'; +import { DemoProvider, useDemoRouter } from '@toolpad/core/internal'; const NAVIGATION = [ { @@ -103,18 +103,21 @@ function DashboardLayoutBasic(props) { const demoWindow = window !== undefined ? window() : undefined; return ( - // preview-start - - - - - - // preview-end + // Remove this provider when copying and pasting into your project. + + {/* preview-start */} + + + + + + {/* preview-end */} + ); } diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx index b8ec5f9b01d..53c88fa4b8f 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx @@ -9,7 +9,7 @@ import DescriptionIcon from '@mui/icons-material/Description'; import LayersIcon from '@mui/icons-material/Layers'; import { AppProvider, type Navigation } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; -import { useDemoRouter } from '@toolpad/core/internal'; +import { DemoProvider, useDemoRouter } from '@toolpad/core/internal'; const NAVIGATION: Navigation = [ { @@ -106,17 +106,20 @@ export default function DashboardLayoutBasic(props: DemoProps) { const demoWindow = window !== undefined ? window() : undefined; return ( - // preview-start - - - - - - // preview-end + // Remove this provider when copying and pasting into your project. + + {/* preview-start */} + + + + + + {/* preview-end */} + ); } diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js index 82f06a76bb0..b641bafeac0 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js @@ -7,7 +7,7 @@ import DashboardIcon from '@mui/icons-material/Dashboard'; import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'; import { AppProvider } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; -import { useDemoRouter } from '@toolpad/core/internal'; +import { DemoProvider, useDemoRouter } from '@toolpad/core/internal'; const NAVIGATION = [ { @@ -67,23 +67,26 @@ function DashboardLayoutBranding(props) { const demoWindow = window !== undefined ? window() : undefined; return ( - // preview-start - , - title: 'MUI', - homeUrl: '/toolpad/core/introduction', - }} - router={router} - theme={demoTheme} - window={demoWindow} - > - - - - - // preview-end + // Remove this provider when copying and pasting into your project. + + {/* preview-start */} + , + title: 'MUI', + homeUrl: '/toolpad/core/introduction', + }} + router={router} + theme={demoTheme} + window={demoWindow} + > + + + + + {/* preview-end */} + ); } diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx index 804d9c7ece1..a5cee58912f 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx @@ -6,7 +6,7 @@ import DashboardIcon from '@mui/icons-material/Dashboard'; import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'; import { AppProvider, type Navigation } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; -import { useDemoRouter } from '@toolpad/core/internal'; +import { DemoProvider, useDemoRouter } from '@toolpad/core/internal'; const NAVIGATION: Navigation = [ { @@ -70,22 +70,25 @@ export default function DashboardLayoutBranding(props: DemoProps) { const demoWindow = window !== undefined ? window() : undefined; return ( - // preview-start - , - title: 'MUI', - homeUrl: '/toolpad/core/introduction', - }} - router={router} - theme={demoTheme} - window={demoWindow} - > - - - - - // preview-end + // Remove this provider when copying and pasting into your project. + + {/* preview-start */} + , + title: 'MUI', + homeUrl: '/toolpad/core/introduction', + }} + router={router} + theme={demoTheme} + window={demoWindow} + > + + + + + {/* preview-end */} + ); } diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.js index bc46d147d7d..149bf92fd22 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.js +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.js @@ -16,7 +16,7 @@ import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'; import SettingsIcon from '@mui/icons-material/Settings'; import { AppProvider } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; -import { useDemoRouter } from '@toolpad/core/internal'; +import { DemoProvider, useDemoRouter } from '@toolpad/core/internal'; const NAVIGATION = [ { @@ -140,20 +140,25 @@ function DashboardLayoutCustomThemeSwitcher(props) { const demoWindow = window !== undefined ? window() : undefined; return ( - - + - - - + {/* preview-start */} + + + + {/* preview-end */} + + ); } diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.tsx index 567db04cced..65e0136126e 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.tsx +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.tsx @@ -15,7 +15,7 @@ import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'; import SettingsIcon from '@mui/icons-material/Settings'; import { AppProvider, type Navigation } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; -import { useDemoRouter } from '@toolpad/core/internal'; +import { DemoProvider, useDemoRouter } from '@toolpad/core/internal'; const NAVIGATION: Navigation = [ { @@ -143,19 +143,24 @@ export default function DashboardLayoutCustomThemeSwitcher(props: DemoProps) { const demoWindow = window !== undefined ? window() : undefined; return ( - - + - - - + {/* preview-start */} + + + + {/* preview-end */} + + ); } diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutFullScreen.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutFullScreen.js index 2205c2f6f0b..f757179ede1 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutFullScreen.js +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutFullScreen.js @@ -4,7 +4,7 @@ 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 { useDemoRouter } from '@toolpad/core/internal'; +import { DemoProvider, useDemoRouter } from '@toolpad/core/internal'; const NAVIGATION = [ { @@ -39,22 +39,27 @@ function DashboardLayoutFullScreen(props) { const demoWindow = window !== undefined ? window() : undefined; return ( - - -