@etsoo/toolpad 1.0.7 → 1.0.8

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 (8) hide show
  1. package/build/AppProvider/AppProvider.d.ts +1 -1
  2. package/build/DashboardLayout/TitleBar.js +25 -9
  3. package/package.json +16 -14
  4. package/src/AppProvider/AppProvider.tsx +4 -1
  5. package/src/DashboardLayout/TitleBar.tsx +30 -9
  6. package/build/shared/branding.d.ts +0 -1
  7. package/build/shared/branding.js +0 -6
  8. package/src/shared/branding.ts +0 -7
package/build/AppProvider/AppProvider.d.ts CHANGED
@@ -16,7 +16,7 @@ export interface Router {
16
16
  navigate: Navigate;
17
17
  }
18
18
  export interface Branding {
19
- title?: string;
19
+ title?: string | React.ReactNode | [string, (handler: React.MouseEvent<HTMLSpanElement>) => void];
20
20
  logo?: React.ReactNode;
21
21
  }
22
22
  export interface NavigationPageItem {
package/build/DashboardLayout/TitleBar.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Stack, styled, Typography, useTheme } from "@mui/material";
3
3
  import { Link } from "../shared/Link";
4
- import { useApplicationTitle } from "../shared/branding";
5
4
  import React from "react";
6
5
  import { BrandingContext } from "../shared/context";
7
6
  const LogoContainer = styled("div")({
@@ -14,14 +13,31 @@ const LogoContainer = styled("div")({
14
13
  export function TitleBar() {
15
14
  // Theme
16
15
  const theme = useTheme();
17
- // Application title
18
- const applicationTitle = useApplicationTitle();
19
16
  // Branding
20
17
  const branding = React.useContext(BrandingContext);
21
- 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: {
22
- color: (theme.vars ?? theme).palette.primary.main,
23
- fontWeight: "700",
24
- ml: 0.5,
25
- whiteSpace: "nowrap"
26
- }, children: applicationTitle })] }) }));
18
+ // Application title
19
+ const title = branding?.title;
20
+ const titleUI = React.useMemo(() => {
21
+ if (title == null)
22
+ return;
23
+ if (typeof title === "string" || Array.isArray(title)) {
24
+ let titleString;
25
+ let clickHandler;
26
+ if (Array.isArray(title)) {
27
+ titleString = title[0];
28
+ clickHandler = title[1];
29
+ }
30
+ else {
31
+ titleString = title;
32
+ }
33
+ return (_jsx(Typography, { variant: "h6", sx: {
34
+ color: (theme.vars ?? theme).palette.primary.main,
35
+ fontWeight: "700",
36
+ ml: 0.5,
37
+ whiteSpace: "nowrap"
38
+ }, onClick: clickHandler == null ? undefined : (e) => clickHandler(e), children: titleString }));
39
+ }
40
+ return title;
41
+ }, [title]);
42
+ 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] }) }));
27
43
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/toolpad",
3
- "version": "1.0.7",
3
+ "version": "1.0.8",
4
4
  "author": "ETSOO",
5
5
  "description": "Dashboard framework extention based on Toolpad Core",
6
6
  "main": "build/index.js",
@@ -45,31 +45,33 @@
45
45
  "dependencies": {
46
46
  "@babel/runtime": "^7.26.0",
47
47
  "@emotion/css": "^11.13.5",
48
- "@emotion/react": "^11.13.5",
49
- "@emotion/styled": "^11.13.5",
50
- "@mui/lab": "6.0.0-beta.16",
51
- "@mui/utils": "6.1.8",
52
- "@vitejs/plugin-react": "4.3.3",
48
+ "@emotion/react": "^11.14.0",
49
+ "@emotion/styled": "^11.14.0",
50
+ "@mui/utils": "6.3.1",
53
51
  "invariant": "2.2.4",
54
52
  "path-to-regexp": "6.3.0",
55
53
  "prop-types": "15.8.1",
56
54
  "react": "^18.3.1"
57
55
  },
56
+ "overrides": {
57
+ "react": "$react"
58
+ },
58
59
  "devDependencies": {
59
- "@mui/icons-material": "6.1.8",
60
- "@mui/material": "6.1.8",
60
+ "@mui/icons-material": "6.3.1",
61
+ "@mui/material": "6.3.1",
61
62
  "@testing-library/jest-dom": "^6.6.3",
62
- "@testing-library/react": "^16.0.1",
63
+ "@testing-library/react": "^16.1.0",
63
64
  "@types/invariant": "2.2.37",
64
- "@types/prop-types": "15.7.13",
65
+ "@types/prop-types": "15.7.14",
65
66
  "@types/react": "18.3.12",
66
67
  "@types/react-dom": "18.3.1",
67
- "@vitest/browser": "2.1.5",
68
+ "@vitejs/plugin-react": "4.3.4",
69
+ "@vitest/browser": "2.1.8",
68
70
  "jsdom": "^25.0.1",
69
71
  "next": "^15.0.3",
70
72
  "next-router-mock": "^0.9.13",
71
- "playwright": "^1.49.0",
72
- "react-router-dom": "7.0.1",
73
- "vitest": "2.1.5"
73
+ "playwright": "^1.49.1",
74
+ "react-router-dom": "7.1.1",
75
+ "vitest": "2.1.8"
74
76
  }
75
77
  }
package/src/AppProvider/AppProvider.tsx CHANGED
@@ -21,7 +21,10 @@ export interface Router {
21
21
  }
22
22
 
23
23
  export interface Branding {
24
- title?: string;
24
+ title?:
25
+ | string
26
+ | React.ReactNode
27
+ | [string, (handler: React.MouseEvent<HTMLSpanElement>) => void];
25
28
  logo?: React.ReactNode;
26
29
  }
27
30
 
package/src/DashboardLayout/TitleBar.tsx CHANGED
@@ -1,6 +1,5 @@
1
1
  import { Stack, styled, Typography, useTheme } from "@mui/material";
2
2
  import { Link } from "../shared/Link";
3
- import { useApplicationTitle } from "../shared/branding";
4
3
  import React from "react";
5
4
  import { BrandingContext } from "../shared/context";
6
5
 
@@ -16,16 +15,26 @@ export function TitleBar() {
16
15
  // Theme
17
16
  const theme = useTheme();
18
17
 
19
- // Application title
20
- const applicationTitle = useApplicationTitle();
21
-
22
18
  // Branding
23
19
  const branding = React.useContext(BrandingContext);
24
20
 
25
- return (
26
- <Link href="/" style={{ color: "inherit", textDecoration: "none" }}>
27
- <Stack direction="row" alignItems="center">
28
- {branding?.logo && <LogoContainer>{branding.logo}</LogoContainer>}
21
+ // Application title
22
+ const title = branding?.title;
23
+ const titleUI = React.useMemo(() => {
24
+ if (title == null) return;
25
+
26
+ if (typeof title === "string" || Array.isArray(title)) {
27
+ let titleString: string;
28
+ let clickHandler:
29
+ | ((handler: React.MouseEvent<HTMLSpanElement>) => void)
30
+ | undefined;
31
+ if (Array.isArray(title)) {
32
+ titleString = title[0];
33
+ clickHandler = title[1];
34
+ } else {
35
+ titleString = title;
36
+ }
37
+ return (
29
38
  <Typography
30
39
  variant="h6"
31
40
  sx={{
@@ -34,9 +43,21 @@ export function TitleBar() {
34
43
  ml: 0.5,
35
44
  whiteSpace: "nowrap"
36
45
  }}
46
+ onClick={clickHandler == null ? undefined : (e) => clickHandler(e)}
37
47
  >
38
- {applicationTitle}
48
+ {titleString}
39
49
  </Typography>
50
+ );
51
+ }
52
+
53
+ return title;
54
+ }, [title]);
55
+
56
+ return (
57
+ <Link href="/" style={{ color: "inherit", textDecoration: "none" }}>
58
+ <Stack direction="row" alignItems="center">
59
+ {branding?.logo && <LogoContainer>{branding.logo}</LogoContainer>}
60
+ {titleUI}
40
61
  </Stack>
41
62
  </Link>
42
63
  );
package/build/shared/branding.d.ts DELETED
@@ -1 +0,0 @@
1
- export declare function useApplicationTitle(): string;
package/build/shared/branding.js DELETED
@@ -1,6 +0,0 @@
1
- import * as React from "react";
2
- import { BrandingContext } from "./context";
3
- export function useApplicationTitle() {
4
- const branding = React.useContext(BrandingContext);
5
- return branding?.title ?? "Toolpad";
6
- }
package/src/shared/branding.ts DELETED
@@ -1,7 +0,0 @@
1
- import * as React from "react";
2
- import { BrandingContext } from "./context";
3
-
4
- export function useApplicationTitle() {
5
- const branding = React.useContext(BrandingContext);
6
- return branding?.title ?? "Toolpad";
7
- }