@etsoo/toolpad 1.0.26 → 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.
Files changed (7) hide show
  1. package/build/cjs/PageContainer/PageContainer.d.ts +3 -2
  2. package/build/cjs/PageContainer/PageContainer.js +24 -20
  3. package/build/mjs/PageContainer/PageContainer.d.ts +3 -2
  4. package/build/mjs/PageContainer/PageContainer.js +24 -20
  5. package/package.json +19 -19
  6. package/src/PageContainer/PageContainer.tsx +74 -62
  7. package/vite.config.mts +1 -0
package/build/cjs/PageContainer/PageContainer.d.ts CHANGED
@@ -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
- export type PageContainerProps = React.PropsWithChildren<StackProps & {
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
  *
package/build/cjs/PageContainer/PageContainer.js CHANGED
@@ -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
- * A container component to provide a title and breadcrumbs for your pages.
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)();
@@ -122,16 +111,31 @@ function PageContainer(props) {
122
111
  { title: state.page, path: "#" }
123
112
  ];
124
113
  }
125
- const ToolbarComponent = props?.slots?.toolbar ?? PageContainerToolbar_1.PageContainerToolbar;
114
+ const ToolbarComponent = slots?.toolbar ?? PageContainerToolbar_1.PageContainerToolbar;
126
115
  const toolbarSlotProps = (0, useSlotProps_1.default)({
127
116
  elementType: ToolbarComponent,
128
117
  ownerState: props,
129
- externalSlotProps: props?.slotProps?.toolbar,
118
+ externalSlotProps: slotProps?.toolbar,
130
119
  additionalProps: {}
131
120
  });
132
- return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { sx: { mx: 3, my: 2 }, spacing: 2, ...rest, children: [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
133
- ? resolvedBreadcrumbs.map((item, index) => {
134
- 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));
135
- })
136
- : 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 })] })] })), children] }));
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] }));
137
141
  }
package/build/mjs/PageContainer/PageContainer.d.ts CHANGED
@@ -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
- export type PageContainerProps = React.PropsWithChildren<StackProps & {
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
  *
package/build/mjs/PageContainer/PageContainer.js CHANGED
@@ -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
- * A container component to provide a title and breadcrumbs for your pages.
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();
@@ -81,17 +70,32 @@ function PageContainer(props) {
81
70
  { title: state.page, path: "#" }
82
71
  ];
83
72
  }
84
- const ToolbarComponent = props?.slots?.toolbar ?? PageContainerToolbar;
73
+ const ToolbarComponent = slots?.toolbar ?? PageContainerToolbar;
85
74
  const toolbarSlotProps = useSlotProps({
86
75
  elementType: ToolbarComponent,
87
76
  ownerState: props,
88
- externalSlotProps: props?.slotProps?.toolbar,
77
+ externalSlotProps: slotProps?.toolbar,
89
78
  additionalProps: {}
90
79
  });
91
- return (_jsxs(Stack, { sx: { mx: 3, my: 2 }, spacing: 2, ...rest, children: [state.noPageHeader !== true && (_jsxs(Stack, { children: [state.noBreadcrumbs !== true && (_jsx(Breadcrumbs, { "aria-label": "breadcrumb", children: resolvedBreadcrumbs
92
- ? resolvedBreadcrumbs.map((item, index) => {
93
- 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));
94
- })
95
- : null })), _jsxs(PageContentHeader, { children: [title ? _jsx(Typography, { variant: "h4", children: title }) : null, _jsx(ToolbarComponent, { ...toolbarSlotProps })] })] })), children] }));
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] }));
96
100
  }
97
101
  export { PageContainer };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/toolpad",
3
- "version": "1.0.26",
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.1",
51
- "@mui/material": "7.0.1",
52
- "@mui/utils": "7.0.1",
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.0",
59
- "@babel/core": "^7.26.10",
60
- "@babel/plugin-transform-runtime": "^7.26.10",
61
- "@babel/preset-env": "^7.26.9",
62
- "@babel/runtime-corejs3": "^7.27.0",
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.14.0",
67
- "@types/react": "19.1.0",
68
- "@types/react-dom": "19.1.1",
69
- "@vitejs/plugin-react": "4.3.4",
70
- "@vitest/browser": "3.1.1",
71
- "jsdom": "^26.0.0",
72
- "next": "^15.2.4",
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.51.1",
75
- "react-router-dom": "7.4.1",
76
- "vitest": "3.1.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": {
package/src/PageContainer/PageContainer.tsx CHANGED
@@ -98,36 +98,23 @@ export function PageDataContextProvider(
98
98
  return <PageDataContext.Provider value={{ state, dispatch }} {...rest} />;
99
99
  }
100
100
 
101
- export type PageContainerProps = React.PropsWithChildren<
102
- StackProps & {
103
- /**
104
- * The default title of the page.
105
- */
106
- defaultTitle?: string;
107
- /**
108
- * The components used for each slot inside.
109
- */
110
- slots?: PageContainerSlots;
111
- /**
112
- * The props used for each slot inside.
113
- */
114
- slotProps?: PageContainerSlotProps;
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
- * A container component to provide a title and breadcrumbs for your pages.
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);
@@ -153,47 +140,72 @@ function PageContainer(props: PageContainerProps) {
153
140
  ];
154
141
  }
155
142
 
156
- const ToolbarComponent = props?.slots?.toolbar ?? PageContainerToolbar;
143
+ const ToolbarComponent = slots?.toolbar ?? PageContainerToolbar;
157
144
  const toolbarSlotProps = useSlotProps({
158
145
  elementType: ToolbarComponent,
159
146
  ownerState: props,
160
- externalSlotProps: props?.slotProps?.toolbar,
147
+ externalSlotProps: slotProps?.toolbar,
161
148
  additionalProps: {}
162
149
  });
163
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
+
164
202
  return (
165
203
  <Stack sx={{ mx: 3, my: 2 }} spacing={2} {...rest}>
166
- {state.noPageHeader !== true && (
167
- <Stack>
168
- {state.noBreadcrumbs !== true && (
169
- <Breadcrumbs aria-label="breadcrumb">
170
- {resolvedBreadcrumbs
171
- ? resolvedBreadcrumbs.map((item, index) => {
172
- return index < resolvedBreadcrumbs.length - 1 ? (
173
- <Link
174
- key={item.path}
175
- component={ToolpadLink}
176
- underline="hover"
177
- color="inherit"
178
- href={item.path}
179
- >
180
- {getItemTitle(item)}
181
- </Link>
182
- ) : (
183
- <Typography key={item.path} color="text.primary">
184
- {getItemTitle(item)}
185
- </Typography>
186
- );
187
- })
188
- : null}
189
- </Breadcrumbs>
190
- )}
191
- <PageContentHeader>
192
- {title ? <Typography variant="h4">{title}</Typography> : null}
193
- <ToolbarComponent {...toolbarSlotProps} />
194
- </PageContentHeader>
195
- </Stack>
196
- )}
204
+ <PageContainerBar
205
+ defaultTitle={defaultTitle}
206
+ slots={slots}
207
+ slotProps={slotProps}
208
+ />
197
209
  {children}
198
210
  </Stack>
199
211
  );
package/vite.config.mts CHANGED
@@ -8,6 +8,7 @@ export default defineConfig({
8
8
  globals: true,
9
9
  environment: "jsdom",
10
10
  include: ["**/?(*.)test.ts?(x)"],
11
+ testTimeout: 10000,
11
12
  browser: {
12
13
  enabled: false, // enabled through CLI
13
14
  name: "chromium",