@etsoo/toolpad 1.0.25 → 1.0.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/PageContainer/PageContainer.d.ts +3 -2
- package/build/cjs/PageContainer/PageContainer.js +24 -22
- package/build/mjs/PageContainer/PageContainer.d.ts +3 -2
- package/build/mjs/PageContainer/PageContainer.js +24 -22
- package/package.json +19 -19
- package/src/PageContainer/PageContainer.tsx +75 -69
- package/vite.config.mts +1 -0
|
@@ -34,7 +34,7 @@ export declare const PageDataContext: React.Context<{
|
|
|
34
34
|
dispatch: React.Dispatch<PageDataAction>;
|
|
35
35
|
}>;
|
|
36
36
|
export declare function PageDataContextProvider(props: React.PropsWithChildren<PageData>): import("react/jsx-runtime").JSX.Element;
|
|
37
|
-
|
|
37
|
+
type PageContainerBarProps = {
|
|
38
38
|
/**
|
|
39
39
|
* The default title of the page.
|
|
40
40
|
*/
|
|
@@ -47,7 +47,8 @@ export type PageContainerProps = React.PropsWithChildren<StackProps & {
|
|
|
47
47
|
* The props used for each slot inside.
|
|
48
48
|
*/
|
|
49
49
|
slotProps?: PageContainerSlotProps;
|
|
50
|
-
}
|
|
50
|
+
};
|
|
51
|
+
export type PageContainerProps = React.PropsWithChildren<StackProps & PageContainerBarProps>;
|
|
51
52
|
/**
|
|
52
53
|
* A container component to provide a title and breadcrumbs for your pages.
|
|
53
54
|
*
|
|
@@ -89,19 +89,8 @@ function PageDataContextProvider(props) {
|
|
|
89
89
|
// Provide the state and dispatch function to the context value
|
|
90
90
|
return (0, jsx_runtime_1.jsx)(exports.PageDataContext.Provider, { value: { state, dispatch }, ...rest });
|
|
91
91
|
}
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
*
|
|
95
|
-
* Demos:
|
|
96
|
-
*
|
|
97
|
-
* - [Page Container](https://mui.com/toolpad/core/react-page-container/)
|
|
98
|
-
*
|
|
99
|
-
* API:
|
|
100
|
-
*
|
|
101
|
-
* - [PageContainer API](https://mui.com/toolpad/core/api/page-container)
|
|
102
|
-
*/
|
|
103
|
-
function PageContainer(props) {
|
|
104
|
-
const { children, defaultTitle, slots, slotProps, ...rest } = props;
|
|
92
|
+
function PageContainerBar(props) {
|
|
93
|
+
const { defaultTitle, slots, slotProps } = props;
|
|
105
94
|
const loaded = React.useRef(false);
|
|
106
95
|
const { state, dispatch } = React.useContext(exports.PageDataContext);
|
|
107
96
|
const activePage = (0, useActivePage_1.useActivePage)();
|
|
@@ -114,8 +103,6 @@ function PageContainer(props) {
|
|
|
114
103
|
loaded.current = true;
|
|
115
104
|
}
|
|
116
105
|
}, [activePage?.sourcePath]);
|
|
117
|
-
// Cache the children to avoid re-rendering when the page changes
|
|
118
|
-
const childrenResult = React.useMemo(() => children, [activePage?.sourcePath]);
|
|
119
106
|
let resolvedBreadcrumbs = state.breadcrumbs ?? activePage?.breadcrumbs ?? [];
|
|
120
107
|
const title = state.title ?? defaultTitle ?? activePage?.title ?? "";
|
|
121
108
|
if (state.page) {
|
|
@@ -124,16 +111,31 @@ function PageContainer(props) {
|
|
|
124
111
|
{ title: state.page, path: "#" }
|
|
125
112
|
];
|
|
126
113
|
}
|
|
127
|
-
const ToolbarComponent =
|
|
114
|
+
const ToolbarComponent = slots?.toolbar ?? PageContainerToolbar_1.PageContainerToolbar;
|
|
128
115
|
const toolbarSlotProps = (0, useSlotProps_1.default)({
|
|
129
116
|
elementType: ToolbarComponent,
|
|
130
117
|
ownerState: props,
|
|
131
|
-
externalSlotProps:
|
|
118
|
+
externalSlotProps: slotProps?.toolbar,
|
|
132
119
|
additionalProps: {}
|
|
133
120
|
});
|
|
134
|
-
return
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
121
|
+
return state.noPageHeader !== true ? ((0, jsx_runtime_1.jsxs)(Stack_1.default, { children: [state.noBreadcrumbs !== true && ((0, jsx_runtime_1.jsx)(Breadcrumbs_1.default, { "aria-label": "breadcrumb", children: resolvedBreadcrumbs
|
|
122
|
+
? resolvedBreadcrumbs.map((item, index) => {
|
|
123
|
+
return index < resolvedBreadcrumbs.length - 1 ? ((0, jsx_runtime_1.jsx)(Link_1.default, { component: Link_2.Link, underline: "hover", color: "inherit", href: item.path, children: (0, navigation_1.getItemTitle)(item) }, item.path)) : ((0, jsx_runtime_1.jsx)(Typography_1.default, { color: "text.primary", children: (0, navigation_1.getItemTitle)(item) }, item.path));
|
|
124
|
+
})
|
|
125
|
+
: null })), (0, jsx_runtime_1.jsxs)(PageContentHeader, { children: [title ? (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "h4", children: title }) : null, (0, jsx_runtime_1.jsx)(ToolbarComponent, { ...toolbarSlotProps })] })] })) : undefined;
|
|
126
|
+
}
|
|
127
|
+
/**
|
|
128
|
+
* A container component to provide a title and breadcrumbs for your pages.
|
|
129
|
+
*
|
|
130
|
+
* Demos:
|
|
131
|
+
*
|
|
132
|
+
* - [Page Container](https://mui.com/toolpad/core/react-page-container/)
|
|
133
|
+
*
|
|
134
|
+
* API:
|
|
135
|
+
*
|
|
136
|
+
* - [PageContainer API](https://mui.com/toolpad/core/api/page-container)
|
|
137
|
+
*/
|
|
138
|
+
function PageContainer(props) {
|
|
139
|
+
const { children, defaultTitle, slots, slotProps, ...rest } = props;
|
|
140
|
+
return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { sx: { mx: 3, my: 2 }, spacing: 2, ...rest, children: [(0, jsx_runtime_1.jsx)(PageContainerBar, { defaultTitle: defaultTitle, slots: slots, slotProps: slotProps }), children] }));
|
|
139
141
|
}
|
|
@@ -34,7 +34,7 @@ export declare const PageDataContext: React.Context<{
|
|
|
34
34
|
dispatch: React.Dispatch<PageDataAction>;
|
|
35
35
|
}>;
|
|
36
36
|
export declare function PageDataContextProvider(props: React.PropsWithChildren<PageData>): import("react/jsx-runtime").JSX.Element;
|
|
37
|
-
|
|
37
|
+
type PageContainerBarProps = {
|
|
38
38
|
/**
|
|
39
39
|
* The default title of the page.
|
|
40
40
|
*/
|
|
@@ -47,7 +47,8 @@ export type PageContainerProps = React.PropsWithChildren<StackProps & {
|
|
|
47
47
|
* The props used for each slot inside.
|
|
48
48
|
*/
|
|
49
49
|
slotProps?: PageContainerSlotProps;
|
|
50
|
-
}
|
|
50
|
+
};
|
|
51
|
+
export type PageContainerProps = React.PropsWithChildren<StackProps & PageContainerBarProps>;
|
|
51
52
|
/**
|
|
52
53
|
* A container component to provide a title and breadcrumbs for your pages.
|
|
53
54
|
*
|
|
@@ -48,19 +48,8 @@ export function PageDataContextProvider(props) {
|
|
|
48
48
|
// Provide the state and dispatch function to the context value
|
|
49
49
|
return _jsx(PageDataContext.Provider, { value: { state, dispatch }, ...rest });
|
|
50
50
|
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
*
|
|
54
|
-
* Demos:
|
|
55
|
-
*
|
|
56
|
-
* - [Page Container](https://mui.com/toolpad/core/react-page-container/)
|
|
57
|
-
*
|
|
58
|
-
* API:
|
|
59
|
-
*
|
|
60
|
-
* - [PageContainer API](https://mui.com/toolpad/core/api/page-container)
|
|
61
|
-
*/
|
|
62
|
-
function PageContainer(props) {
|
|
63
|
-
const { children, defaultTitle, slots, slotProps, ...rest } = props;
|
|
51
|
+
function PageContainerBar(props) {
|
|
52
|
+
const { defaultTitle, slots, slotProps } = props;
|
|
64
53
|
const loaded = React.useRef(false);
|
|
65
54
|
const { state, dispatch } = React.useContext(PageDataContext);
|
|
66
55
|
const activePage = useActivePage();
|
|
@@ -73,8 +62,6 @@ function PageContainer(props) {
|
|
|
73
62
|
loaded.current = true;
|
|
74
63
|
}
|
|
75
64
|
}, [activePage?.sourcePath]);
|
|
76
|
-
// Cache the children to avoid re-rendering when the page changes
|
|
77
|
-
const childrenResult = React.useMemo(() => children, [activePage?.sourcePath]);
|
|
78
65
|
let resolvedBreadcrumbs = state.breadcrumbs ?? activePage?.breadcrumbs ?? [];
|
|
79
66
|
const title = state.title ?? defaultTitle ?? activePage?.title ?? "";
|
|
80
67
|
if (state.page) {
|
|
@@ -83,17 +70,32 @@ function PageContainer(props) {
|
|
|
83
70
|
{ title: state.page, path: "#" }
|
|
84
71
|
];
|
|
85
72
|
}
|
|
86
|
-
const ToolbarComponent =
|
|
73
|
+
const ToolbarComponent = slots?.toolbar ?? PageContainerToolbar;
|
|
87
74
|
const toolbarSlotProps = useSlotProps({
|
|
88
75
|
elementType: ToolbarComponent,
|
|
89
76
|
ownerState: props,
|
|
90
|
-
externalSlotProps:
|
|
77
|
+
externalSlotProps: slotProps?.toolbar,
|
|
91
78
|
additionalProps: {}
|
|
92
79
|
});
|
|
93
|
-
return
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
80
|
+
return state.noPageHeader !== true ? (_jsxs(Stack, { children: [state.noBreadcrumbs !== true && (_jsx(Breadcrumbs, { "aria-label": "breadcrumb", children: resolvedBreadcrumbs
|
|
81
|
+
? resolvedBreadcrumbs.map((item, index) => {
|
|
82
|
+
return index < resolvedBreadcrumbs.length - 1 ? (_jsx(Link, { component: ToolpadLink, underline: "hover", color: "inherit", href: item.path, children: getItemTitle(item) }, item.path)) : (_jsx(Typography, { color: "text.primary", children: getItemTitle(item) }, item.path));
|
|
83
|
+
})
|
|
84
|
+
: null })), _jsxs(PageContentHeader, { children: [title ? _jsx(Typography, { variant: "h4", children: title }) : null, _jsx(ToolbarComponent, { ...toolbarSlotProps })] })] })) : undefined;
|
|
85
|
+
}
|
|
86
|
+
/**
|
|
87
|
+
* A container component to provide a title and breadcrumbs for your pages.
|
|
88
|
+
*
|
|
89
|
+
* Demos:
|
|
90
|
+
*
|
|
91
|
+
* - [Page Container](https://mui.com/toolpad/core/react-page-container/)
|
|
92
|
+
*
|
|
93
|
+
* API:
|
|
94
|
+
*
|
|
95
|
+
* - [PageContainer API](https://mui.com/toolpad/core/api/page-container)
|
|
96
|
+
*/
|
|
97
|
+
function PageContainer(props) {
|
|
98
|
+
const { children, defaultTitle, slots, slotProps, ...rest } = props;
|
|
99
|
+
return (_jsxs(Stack, { sx: { mx: 3, my: 2 }, spacing: 2, ...rest, children: [_jsx(PageContainerBar, { defaultTitle: defaultTitle, slots: slots, slotProps: slotProps }), children] }));
|
|
98
100
|
}
|
|
99
101
|
export { PageContainer };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@etsoo/toolpad",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.27",
|
|
4
4
|
"author": "ETSOO",
|
|
5
5
|
"description": "Dashboard framework extention based on Toolpad Core",
|
|
6
6
|
"main": "build/cjs/index.js",
|
|
@@ -47,33 +47,33 @@
|
|
|
47
47
|
"dependencies": {
|
|
48
48
|
"@emotion/react": "^11.14.0",
|
|
49
49
|
"@emotion/styled": "^11.14.0",
|
|
50
|
-
"@mui/icons-material": "7.0.
|
|
51
|
-
"@mui/material": "7.0.
|
|
52
|
-
"@mui/utils": "7.0.
|
|
50
|
+
"@mui/icons-material": "7.0.2",
|
|
51
|
+
"@mui/material": "7.0.2",
|
|
52
|
+
"@mui/utils": "7.0.2",
|
|
53
53
|
"invariant": "2.2.4",
|
|
54
54
|
"path-to-regexp": "6.3.0",
|
|
55
55
|
"react": "^19.1.0"
|
|
56
56
|
},
|
|
57
57
|
"devDependencies": {
|
|
58
|
-
"@babel/cli": "^7.27.
|
|
59
|
-
"@babel/core": "^7.
|
|
60
|
-
"@babel/plugin-transform-runtime": "^7.
|
|
61
|
-
"@babel/preset-env": "^7.
|
|
62
|
-
"@babel/runtime-corejs3": "^7.27.
|
|
58
|
+
"@babel/cli": "^7.27.1",
|
|
59
|
+
"@babel/core": "^7.27.1",
|
|
60
|
+
"@babel/plugin-transform-runtime": "^7.27.1",
|
|
61
|
+
"@babel/preset-env": "^7.27.1",
|
|
62
|
+
"@babel/runtime-corejs3": "^7.27.1",
|
|
63
63
|
"@testing-library/jest-dom": "^6.6.3",
|
|
64
64
|
"@testing-library/react": "^16.3.0",
|
|
65
65
|
"@types/invariant": "2.2.37",
|
|
66
|
-
"@types/node": "^22.
|
|
67
|
-
"@types/react": "19.1.
|
|
68
|
-
"@types/react-dom": "19.1.
|
|
69
|
-
"@vitejs/plugin-react": "4.
|
|
70
|
-
"@vitest/browser": "3.1.
|
|
71
|
-
"jsdom": "^26.
|
|
72
|
-
"next": "^15.
|
|
66
|
+
"@types/node": "^22.15.3",
|
|
67
|
+
"@types/react": "19.1.2",
|
|
68
|
+
"@types/react-dom": "19.1.3",
|
|
69
|
+
"@vitejs/plugin-react": "4.4.1",
|
|
70
|
+
"@vitest/browser": "3.1.2",
|
|
71
|
+
"jsdom": "^26.1.0",
|
|
72
|
+
"next": "^15.3.1",
|
|
73
73
|
"next-router-mock": "^0.9.13",
|
|
74
|
-
"playwright": "^1.
|
|
75
|
-
"react-router-dom": "7.
|
|
76
|
-
"vitest": "3.1.
|
|
74
|
+
"playwright": "^1.52.0",
|
|
75
|
+
"react-router-dom": "^7.5.3",
|
|
76
|
+
"vitest": "3.1.2"
|
|
77
77
|
},
|
|
78
78
|
"peerDependenciesMeta": {
|
|
79
79
|
"next": {
|
|
@@ -98,36 +98,23 @@ export function PageDataContextProvider(
|
|
|
98
98
|
return <PageDataContext.Provider value={{ state, dispatch }} {...rest} />;
|
|
99
99
|
}
|
|
100
100
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
}
|
|
116
|
-
>;
|
|
101
|
+
type PageContainerBarProps = {
|
|
102
|
+
/**
|
|
103
|
+
* The default title of the page.
|
|
104
|
+
*/
|
|
105
|
+
defaultTitle?: string;
|
|
106
|
+
/**
|
|
107
|
+
* The components used for each slot inside.
|
|
108
|
+
*/
|
|
109
|
+
slots?: PageContainerSlots;
|
|
110
|
+
/**
|
|
111
|
+
* The props used for each slot inside.
|
|
112
|
+
*/
|
|
113
|
+
slotProps?: PageContainerSlotProps;
|
|
114
|
+
};
|
|
117
115
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
*
|
|
121
|
-
* Demos:
|
|
122
|
-
*
|
|
123
|
-
* - [Page Container](https://mui.com/toolpad/core/react-page-container/)
|
|
124
|
-
*
|
|
125
|
-
* API:
|
|
126
|
-
*
|
|
127
|
-
* - [PageContainer API](https://mui.com/toolpad/core/api/page-container)
|
|
128
|
-
*/
|
|
129
|
-
function PageContainer(props: PageContainerProps) {
|
|
130
|
-
const { children, defaultTitle, slots, slotProps, ...rest } = props;
|
|
116
|
+
function PageContainerBar(props: PageContainerBarProps) {
|
|
117
|
+
const { defaultTitle, slots, slotProps } = props;
|
|
131
118
|
|
|
132
119
|
const loaded = React.useRef(false);
|
|
133
120
|
const { state, dispatch } = React.useContext(PageDataContext);
|
|
@@ -143,12 +130,6 @@ function PageContainer(props: PageContainerProps) {
|
|
|
143
130
|
}
|
|
144
131
|
}, [activePage?.sourcePath]);
|
|
145
132
|
|
|
146
|
-
// Cache the children to avoid re-rendering when the page changes
|
|
147
|
-
const childrenResult = React.useMemo(
|
|
148
|
-
() => children,
|
|
149
|
-
[activePage?.sourcePath]
|
|
150
|
-
);
|
|
151
|
-
|
|
152
133
|
let resolvedBreadcrumbs = state.breadcrumbs ?? activePage?.breadcrumbs ?? [];
|
|
153
134
|
const title = state.title ?? defaultTitle ?? activePage?.title ?? "";
|
|
154
135
|
|
|
@@ -159,48 +140,73 @@ function PageContainer(props: PageContainerProps) {
|
|
|
159
140
|
];
|
|
160
141
|
}
|
|
161
142
|
|
|
162
|
-
const ToolbarComponent =
|
|
143
|
+
const ToolbarComponent = slots?.toolbar ?? PageContainerToolbar;
|
|
163
144
|
const toolbarSlotProps = useSlotProps({
|
|
164
145
|
elementType: ToolbarComponent,
|
|
165
146
|
ownerState: props,
|
|
166
|
-
externalSlotProps:
|
|
147
|
+
externalSlotProps: slotProps?.toolbar,
|
|
167
148
|
additionalProps: {}
|
|
168
149
|
});
|
|
169
150
|
|
|
151
|
+
return state.noPageHeader !== true ? (
|
|
152
|
+
<Stack>
|
|
153
|
+
{state.noBreadcrumbs !== true && (
|
|
154
|
+
<Breadcrumbs aria-label="breadcrumb">
|
|
155
|
+
{resolvedBreadcrumbs
|
|
156
|
+
? resolvedBreadcrumbs.map((item, index) => {
|
|
157
|
+
return index < resolvedBreadcrumbs.length - 1 ? (
|
|
158
|
+
<Link
|
|
159
|
+
key={item.path}
|
|
160
|
+
component={ToolpadLink}
|
|
161
|
+
underline="hover"
|
|
162
|
+
color="inherit"
|
|
163
|
+
href={item.path}
|
|
164
|
+
>
|
|
165
|
+
{getItemTitle(item)}
|
|
166
|
+
</Link>
|
|
167
|
+
) : (
|
|
168
|
+
<Typography key={item.path} color="text.primary">
|
|
169
|
+
{getItemTitle(item)}
|
|
170
|
+
</Typography>
|
|
171
|
+
);
|
|
172
|
+
})
|
|
173
|
+
: null}
|
|
174
|
+
</Breadcrumbs>
|
|
175
|
+
)}
|
|
176
|
+
<PageContentHeader>
|
|
177
|
+
{title ? <Typography variant="h4">{title}</Typography> : null}
|
|
178
|
+
<ToolbarComponent {...toolbarSlotProps} />
|
|
179
|
+
</PageContentHeader>
|
|
180
|
+
</Stack>
|
|
181
|
+
) : undefined;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
export type PageContainerProps = React.PropsWithChildren<
|
|
185
|
+
StackProps & PageContainerBarProps
|
|
186
|
+
>;
|
|
187
|
+
|
|
188
|
+
/**
|
|
189
|
+
* A container component to provide a title and breadcrumbs for your pages.
|
|
190
|
+
*
|
|
191
|
+
* Demos:
|
|
192
|
+
*
|
|
193
|
+
* - [Page Container](https://mui.com/toolpad/core/react-page-container/)
|
|
194
|
+
*
|
|
195
|
+
* API:
|
|
196
|
+
*
|
|
197
|
+
* - [PageContainer API](https://mui.com/toolpad/core/api/page-container)
|
|
198
|
+
*/
|
|
199
|
+
function PageContainer(props: PageContainerProps) {
|
|
200
|
+
const { children, defaultTitle, slots, slotProps, ...rest } = props;
|
|
201
|
+
|
|
170
202
|
return (
|
|
171
203
|
<Stack sx={{ mx: 3, my: 2 }} spacing={2} {...rest}>
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
return index < resolvedBreadcrumbs.length - 1 ? (
|
|
179
|
-
<Link
|
|
180
|
-
key={item.path}
|
|
181
|
-
component={ToolpadLink}
|
|
182
|
-
underline="hover"
|
|
183
|
-
color="inherit"
|
|
184
|
-
href={item.path}
|
|
185
|
-
>
|
|
186
|
-
{getItemTitle(item)}
|
|
187
|
-
</Link>
|
|
188
|
-
) : (
|
|
189
|
-
<Typography key={item.path} color="text.primary">
|
|
190
|
-
{getItemTitle(item)}
|
|
191
|
-
</Typography>
|
|
192
|
-
);
|
|
193
|
-
})
|
|
194
|
-
: null}
|
|
195
|
-
</Breadcrumbs>
|
|
196
|
-
)}
|
|
197
|
-
<PageContentHeader>
|
|
198
|
-
{title ? <Typography variant="h4">{title}</Typography> : null}
|
|
199
|
-
<ToolbarComponent {...toolbarSlotProps} />
|
|
200
|
-
</PageContentHeader>
|
|
201
|
-
</Stack>
|
|
202
|
-
)}
|
|
203
|
-
{childrenResult}
|
|
204
|
+
<PageContainerBar
|
|
205
|
+
defaultTitle={defaultTitle}
|
|
206
|
+
slots={slots}
|
|
207
|
+
slotProps={slotProps}
|
|
208
|
+
/>
|
|
209
|
+
{children}
|
|
204
210
|
</Stack>
|
|
205
211
|
);
|
|
206
212
|
}
|