@etsoo/toolpad 1.0.7 → 1.0.9

package/build/AppProvider/AppProvider.d.ts

@@ -16,7 +16,7 @@ export interface Router {
     navigate: Navigate;
 }
 export interface Branding {
-    title?: string;
+    title?: string | React.ReactNode | [string, (handler: React.MouseEvent<HTMLSpanElement>) => void];
     logo?: React.ReactNode;
 }
 export interface NavigationPageItem {

package/build/AppProvider/AppProviderComponent.js

@@ -48,7 +48,7 @@ AppProvider.propTypes /* remove-proptypes */ = {
      */
     branding: PropTypes.shape({
         logo: PropTypes.node,
-        title: PropTypes.string
+        title: PropTypes.node
     }),
     /**
      * The content of the app provider.

package/build/DashboardLayout/TitleBar.d.ts

@@ -1 +1,2 @@
-export declare function TitleBar(): import("react/jsx-runtime").JSX.Element;
+import React from "react";
+export declare function TitleBar(): number | bigint | boolean | Iterable<React.ReactNode> | Promise<React.AwaitedReactNode> | import("react/jsx-runtime").JSX.Element | undefined;

package/build/DashboardLayout/TitleBar.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Stack, styled, Typography, useTheme } from "@mui/material";
 import { Link } from "../shared/Link";
-import { useApplicationTitle } from "../shared/branding";
 import React from "react";
 import { BrandingContext } from "../shared/context";
 const LogoContainer = styled("div")({
@@ -14,14 +13,36 @@ const LogoContainer = styled("div")({
 export function TitleBar() {
     // Theme
     const theme = useTheme();
-    // Application title
-    const applicationTitle = useApplicationTitle();
     // Branding
     const branding = React.useContext(BrandingContext);
-    return (_jsx(Link, { href: "/", style: { color: "inherit", textDecoration: "none" }, children: _jsxs(Stack, { direction: "row", alignItems: "center", children: [branding?.logo && _jsx(LogoContainer, { children: branding.logo }), _jsx(Typography, { variant: "h6", sx: {
+    // Application title
+    const title = branding?.title;
+    const [titleUI, hasLink] = React.useMemo(() => {
+        if (title == null)
+            return [undefined, true];
+        if (typeof title === "string" || Array.isArray(title)) {
+            let titleString;
+            let clickHandler;
+            if (Array.isArray(title)) {
+                titleString = title[0];
+                clickHandler = title[1];
+            }
+            else {
+                titleString = title;
+            }
+            return [
+                _jsx(Typography, { variant: "h6", sx: {
                         color: (theme.vars ?? theme).palette.primary.main,
                         fontWeight: "700",
                         ml: 0.5,
                         whiteSpace: "nowrap"
-                    }, children: applicationTitle })] }) }));
+                    }, onClick: clickHandler == null ? undefined : (e) => clickHandler(e), children: titleString }),
+                true
+            ];
+        }
+        return [title, false];
+    }, [title]);
+    if (!hasLink)
+        return titleUI;
+    return (_jsx(Link, { href: "/", style: { color: "inherit", textDecoration: "none" }, children: _jsxs(Stack, { direction: "row", alignItems: "center", children: [branding?.logo && _jsx(LogoContainer, { children: branding.logo }), titleUI] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/toolpad",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "author": "ETSOO",
   "description": "Dashboard framework extention based on Toolpad Core",
   "main": "build/index.js",
@@ -45,31 +45,33 @@
   "dependencies": {
     "@babel/runtime": "^7.26.0",
     "@emotion/css": "^11.13.5",
-    "@emotion/react": "^11.13.5",
-    "@emotion/styled": "^11.13.5",
-    "@mui/lab": "6.0.0-beta.16",
-    "@mui/utils": "6.1.8",
-    "@vitejs/plugin-react": "4.3.3",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/utils": "6.3.1",
     "invariant": "2.2.4",
     "path-to-regexp": "6.3.0",
     "prop-types": "15.8.1",
     "react": "^18.3.1"
   },
+  "overrides": {
+    "react": "$react"
+  },
   "devDependencies": {
-    "@mui/icons-material": "6.1.8",
-    "@mui/material": "6.1.8",
+    "@mui/icons-material": "6.3.1",
+    "@mui/material": "6.3.1",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/react": "^16.1.0",
     "@types/invariant": "2.2.37",
-    "@types/prop-types": "15.7.13",
+    "@types/prop-types": "15.7.14",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
-    "@vitest/browser": "2.1.5",
+    "@vitejs/plugin-react": "4.3.4",
+    "@vitest/browser": "2.1.8",
     "jsdom": "^25.0.1",
     "next": "^15.0.3",
     "next-router-mock": "^0.9.13",
-    "playwright": "^1.49.0",
-    "react-router-dom": "7.0.1",
-    "vitest": "2.1.5"
+    "playwright": "^1.49.1",
+    "react-router-dom": "7.1.1",
+    "vitest": "2.1.8"
   }
 }

package/src/AppProvider/AppProvider.tsx

@@ -21,7 +21,10 @@ export interface Router {
 }
 
 export interface Branding {
-  title?: string;
+  title?:
+    | string
+    | React.ReactNode
+    | [string, (handler: React.MouseEvent<HTMLSpanElement>) => void];
   logo?: React.ReactNode;
 }
 

package/src/AppProvider/AppProviderComponent.tsx

@@ -88,7 +88,7 @@ AppProvider.propTypes /* remove-proptypes */ = {
    */
   branding: PropTypes.shape({
     logo: PropTypes.node,
-    title: PropTypes.string
+    title: PropTypes.node
   }),
   /**
    * The content of the app provider.

package/src/DashboardLayout/TitleBar.tsx

@@ -1,6 +1,5 @@
 import { Stack, styled, Typography, useTheme } from "@mui/material";
 import { Link } from "../shared/Link";
-import { useApplicationTitle } from "../shared/branding";
 import React from "react";
 import { BrandingContext } from "../shared/context";
 
@@ -16,16 +15,26 @@ export function TitleBar() {
   // Theme
   const theme = useTheme();
 
-  // Application title
-  const applicationTitle = useApplicationTitle();
-
   // Branding
   const branding = React.useContext(BrandingContext);
 
-  return (
-    <Link href="/" style={{ color: "inherit", textDecoration: "none" }}>
-      <Stack direction="row" alignItems="center">
-        {branding?.logo && <LogoContainer>{branding.logo}</LogoContainer>}
+  // Application title
+  const title = branding?.title;
+  const [titleUI, hasLink] = React.useMemo(() => {
+    if (title == null) return [undefined, true];
+
+    if (typeof title === "string" || Array.isArray(title)) {
+      let titleString: string;
+      let clickHandler:
+        | ((handler: React.MouseEvent<HTMLSpanElement>) => void)
+        | undefined;
+      if (Array.isArray(title)) {
+        titleString = title[0];
+        clickHandler = title[1];
+      } else {
+        titleString = title;
+      }
+      return [
         <Typography
           variant="h6"
           sx={{
@@ -34,9 +43,24 @@ export function TitleBar() {
             ml: 0.5,
             whiteSpace: "nowrap"
           }}
+          onClick={clickHandler == null ? undefined : (e) => clickHandler(e)}
         >
-          {applicationTitle}
-        </Typography>
+          {titleString}
+        </Typography>,
+        true
+      ];
+    }
+
+    return [title, false];
+  }, [title]);
+
+  if (!hasLink) return titleUI;
+
+  return (
+    <Link href="/" style={{ color: "inherit", textDecoration: "none" }}>
+      <Stack direction="row" alignItems="center">
+        {branding?.logo && <LogoContainer>{branding.logo}</LogoContainer>}
+        {titleUI}
       </Stack>
     </Link>
   );

package/build/shared/branding.d.ts

@@ -1 +0,0 @@
-export declare function useApplicationTitle(): string;

package/build/shared/branding.js

@@ -1,6 +0,0 @@
-import * as React from "react";
-import { BrandingContext } from "./context";
-export function useApplicationTitle() {
-    const branding = React.useContext(BrandingContext);
-    return branding?.title ?? "Toolpad";
-}

package/src/shared/branding.ts

@@ -1,7 +0,0 @@
-import * as React from "react";
-import { BrandingContext } from "./context";
-
-export function useApplicationTitle() {
-  const branding = React.useContext(BrandingContext);
-  return branding?.title ?? "Toolpad";
-}