@etsoo/toolpad 1.0.30 → 1.0.31

package/build/cjs/PageContainer/PageContainer.d.ts

@@ -42,6 +42,10 @@ type PageContainerBarProps = {
      * The props used for each slot inside.
      */
     slotProps?: PageContainerSlotProps;
+    /**
+     * The component that renders the actions toolbar.
+     */
+    titleBar?: false | ((title: string) => React.ReactNode);
 };
 export type PageContainerProps = React.PropsWithChildren<StackProps & PageContainerBarProps>;
 /**

package/build/cjs/PageContainer/PageContainer.js

@@ -88,7 +88,7 @@ function PageDataContextProvider(props) {
     return (0, jsx_runtime_1.jsx)(exports.PageDataContext.Provider, { value: { state, dispatch }, ...rest });
 }
 function PageContainerBar(props) {
-    const { slots, slotProps } = props;
+    const { slots, slotProps, titleBar } = props;
     const { state } = React.useContext(exports.PageDataContext);
     const activePage = (0, useActivePage_1.useActivePage)();
     React.useEffect(() => {
@@ -110,8 +110,10 @@ function PageContainerBar(props) {
     const breadcrumbs = state.breadcrumbs ?? activePage?.breadcrumbs ?? [];
     const title = state.title ?? activePage?.title ?? "";
     const pageHeader = state.pageHeader ?? activePage?.pageHeader ?? null;
+    // No page header
     if (pageHeader === false)
         return undefined;
+    // Custom page header
     if (pageHeader != null)
         return pageHeader;
     if (state.page) {
@@ -119,7 +121,7 @@ function PageContainerBar(props) {
     }
     return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { children: [breadcrumbs && ((0, jsx_runtime_1.jsx)(Breadcrumbs_1.default, { "aria-label": "breadcrumb", children: breadcrumbs.map((item, index) => {
                     return index < breadcrumbs.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));
-                }) })), (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 })] })] }));
+                }) })), (0, jsx_runtime_1.jsxs)(PageContentHeader, { children: [typeof titleBar === "function" ? (titleBar(title)) : titleBar === false ? undefined : ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "h4", children: title })), (0, jsx_runtime_1.jsx)(ToolbarComponent, { ...toolbarSlotProps })] })] }));
 }
 /**
  * A container component to provide a title and breadcrumbs for your pages.
@@ -133,6 +135,6 @@ function PageContainerBar(props) {
  * - [PageContainer API](https://mui.com/toolpad/core/api/page-container)
  */
 function PageContainer(props) {
-    const { children, slots, slotProps, ...rest } = props;
-    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { sx: { mx: 3, my: 2 }, spacing: 2, ...rest, children: [(0, jsx_runtime_1.jsx)(PageContainerBar, { slots: slots, slotProps: slotProps }), children] }));
+    const { children, slots, slotProps, titleBar, ...rest } = props;
+    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { sx: { mx: 3, my: 2 }, spacing: 2, ...rest, children: [(0, jsx_runtime_1.jsx)(PageContainerBar, { slots: slots, slotProps: slotProps, titleBar: titleBar }), children] }));
 }

package/build/mjs/PageContainer/PageContainer.d.ts

@@ -42,6 +42,10 @@ type PageContainerBarProps = {
      * The props used for each slot inside.
      */
     slotProps?: PageContainerSlotProps;
+    /**
+     * The component that renders the actions toolbar.
+     */
+    titleBar?: false | ((title: string) => React.ReactNode);
 };
 export type PageContainerProps = React.PropsWithChildren<StackProps & PageContainerBarProps>;
 /**

package/build/mjs/PageContainer/PageContainer.js

@@ -47,7 +47,7 @@ export function PageDataContextProvider(props) {
     return _jsx(PageDataContext.Provider, { value: { state, dispatch }, ...rest });
 }
 function PageContainerBar(props) {
-    const { slots, slotProps } = props;
+    const { slots, slotProps, titleBar } = props;
     const { state } = React.useContext(PageDataContext);
     const activePage = useActivePage();
     React.useEffect(() => {
@@ -69,8 +69,10 @@ function PageContainerBar(props) {
     const breadcrumbs = state.breadcrumbs ?? activePage?.breadcrumbs ?? [];
     const title = state.title ?? activePage?.title ?? "";
     const pageHeader = state.pageHeader ?? activePage?.pageHeader ?? null;
+    // No page header
     if (pageHeader === false)
         return undefined;
+    // Custom page header
     if (pageHeader != null)
         return pageHeader;
     if (state.page) {
@@ -78,7 +80,7 @@ function PageContainerBar(props) {
     }
     return (_jsxs(Stack, { children: [breadcrumbs && (_jsx(Breadcrumbs, { "aria-label": "breadcrumb", children: breadcrumbs.map((item, index) => {
                     return index < breadcrumbs.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));
-                }) })), _jsxs(PageContentHeader, { children: [title ? _jsx(Typography, { variant: "h4", children: title }) : null, _jsx(ToolbarComponent, { ...toolbarSlotProps })] })] }));
+                }) })), _jsxs(PageContentHeader, { children: [typeof titleBar === "function" ? (titleBar(title)) : titleBar === false ? undefined : (_jsx(Typography, { variant: "h4", children: title })), _jsx(ToolbarComponent, { ...toolbarSlotProps })] })] }));
 }
 /**
  * A container component to provide a title and breadcrumbs for your pages.
@@ -92,7 +94,7 @@ function PageContainerBar(props) {
  * - [PageContainer API](https://mui.com/toolpad/core/api/page-container)
  */
 function PageContainer(props) {
-    const { children, slots, slotProps, ...rest } = props;
-    return (_jsxs(Stack, { sx: { mx: 3, my: 2 }, spacing: 2, ...rest, children: [_jsx(PageContainerBar, { slots: slots, slotProps: slotProps }), children] }));
+    const { children, slots, slotProps, titleBar, ...rest } = props;
+    return (_jsxs(Stack, { sx: { mx: 3, my: 2 }, spacing: 2, ...rest, children: [_jsx(PageContainerBar, { slots: slots, slotProps: slotProps, titleBar: titleBar }), children] }));
 }
 export { PageContainer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/toolpad",
-  "version": "1.0.30",
+  "version": "1.0.31",
   "author": "ETSOO",
   "description": "Dashboard framework extention based on Toolpad Core",
   "main": "build/cjs/index.js",

package/src/PageContainer/PageContainer.tsx

@@ -99,14 +99,20 @@ type PageContainerBarProps = {
    * The components used for each slot inside.
    */
   slots?: PageContainerSlots;
+
   /**
    * The props used for each slot inside.
    */
   slotProps?: PageContainerSlotProps;
+
+  /**
+   * The component that renders the actions toolbar.
+   */
+  titleBar?: false | ((title: string) => React.ReactNode);
 };
 
 function PageContainerBar(props: PageContainerBarProps) {
-  const { slots, slotProps } = props;
+  const { slots, slotProps, titleBar } = props;
 
   const { state } = React.useContext(PageDataContext);
 
@@ -134,7 +140,10 @@ function PageContainerBar(props: PageContainerBarProps) {
   const title = state.title ?? activePage?.title ?? "";
   const pageHeader = state.pageHeader ?? activePage?.pageHeader ?? null;
 
+  // No page header
   if (pageHeader === false) return undefined;
+
+  // Custom page header
   if (pageHeader != null) return pageHeader;
 
   if (state.page) {
@@ -165,7 +174,11 @@ function PageContainerBar(props: PageContainerBarProps) {
         </Breadcrumbs>
       )}
       <PageContentHeader>
-        {title ? <Typography variant="h4">{title}</Typography> : null}
+        {typeof titleBar === "function" ? (
+          titleBar(title)
+        ) : titleBar === false ? undefined : (
+          <Typography variant="h4">{title}</Typography>
+        )}
         <ToolbarComponent {...toolbarSlotProps} />
       </PageContentHeader>
     </Stack>
@@ -188,11 +201,15 @@ export type PageContainerProps = React.PropsWithChildren<
  * - [PageContainer API](https://mui.com/toolpad/core/api/page-container)
  */
 function PageContainer(props: PageContainerProps) {
-  const { children, slots, slotProps, ...rest } = props;
+  const { children, slots, slotProps, titleBar, ...rest } = props;
 
   return (
     <Stack sx={{ mx: 3, my: 2 }} spacing={2} {...rest}>
-      <PageContainerBar slots={slots} slotProps={slotProps} />
+      <PageContainerBar
+        slots={slots}
+        slotProps={slotProps}
+        titleBar={titleBar}
+      />
       {children}
     </Stack>
   );