@etsoo/toolpad 1.0.31 → 1.0.32

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 (4) hide show
  1. package/build/cjs/PageContainer/PageContainer.js +12 -9
  2. package/build/mjs/PageContainer/PageContainer.js +12 -9
  3. package/package.json +1 -1
  4. package/src/PageContainer/PageContainer.tsx +13 -9
package/build/cjs/PageContainer/PageContainer.js CHANGED
@@ -90,14 +90,17 @@ function PageDataContextProvider(props) {
90
90
  function PageContainerBar(props) {
91
91
  const { slots, slotProps, titleBar } = props;
92
92
  const { state } = React.useContext(exports.PageDataContext);
93
+ const stateRef = React.useRef(state);
94
+ if (state !== stateRef.current)
95
+ stateRef.current = state;
93
96
  const activePage = (0, useActivePage_1.useActivePage)();
94
97
  React.useEffect(() => {
95
98
  return () => {
96
99
  // Reset the state when the component unmounts
97
- state.breadcrumbs = undefined;
98
- state.page = undefined;
99
- state.pageHeader = undefined;
100
- state.title = undefined;
100
+ stateRef.current.breadcrumbs = undefined;
101
+ stateRef.current.page = undefined;
102
+ stateRef.current.pageHeader = undefined;
103
+ stateRef.current.title = undefined;
101
104
  };
102
105
  }, [activePage?.sourcePath]);
103
106
  const ToolbarComponent = slots?.toolbar ?? PageContainerToolbar_1.PageContainerToolbar;
@@ -107,17 +110,17 @@ function PageContainerBar(props) {
107
110
  externalSlotProps: slotProps?.toolbar,
108
111
  additionalProps: {}
109
112
  });
110
- const breadcrumbs = state.breadcrumbs ?? activePage?.breadcrumbs ?? [];
111
- const title = state.title ?? activePage?.title ?? "";
112
- const pageHeader = state.pageHeader ?? activePage?.pageHeader ?? null;
113
+ const breadcrumbs = stateRef.current.breadcrumbs ?? activePage?.breadcrumbs ?? [];
114
+ const title = stateRef.current.title ?? activePage?.title ?? "";
115
+ const pageHeader = stateRef.current.pageHeader ?? activePage?.pageHeader ?? null;
113
116
  // No page header
114
117
  if (pageHeader === false)
115
118
  return undefined;
116
119
  // Custom page header
117
120
  if (pageHeader != null)
118
121
  return pageHeader;
119
- if (state.page) {
120
- breadcrumbs.push({ title: state.page, path: "#" });
122
+ if (stateRef.current.page) {
123
+ breadcrumbs.push({ title: stateRef.current.page, path: "#" });
121
124
  }
122
125
  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) => {
123
126
  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));
package/build/mjs/PageContainer/PageContainer.js CHANGED
@@ -49,14 +49,17 @@ export function PageDataContextProvider(props) {
49
49
  function PageContainerBar(props) {
50
50
  const { slots, slotProps, titleBar } = props;
51
51
  const { state } = React.useContext(PageDataContext);
52
+ const stateRef = React.useRef(state);
53
+ if (state !== stateRef.current)
54
+ stateRef.current = state;
52
55
  const activePage = useActivePage();
53
56
  React.useEffect(() => {
54
57
  return () => {
55
58
  // Reset the state when the component unmounts
56
- state.breadcrumbs = undefined;
57
- state.page = undefined;
58
- state.pageHeader = undefined;
59
- state.title = undefined;
59
+ stateRef.current.breadcrumbs = undefined;
60
+ stateRef.current.page = undefined;
61
+ stateRef.current.pageHeader = undefined;
62
+ stateRef.current.title = undefined;
60
63
  };
61
64
  }, [activePage?.sourcePath]);
62
65
  const ToolbarComponent = slots?.toolbar ?? PageContainerToolbar;
@@ -66,17 +69,17 @@ function PageContainerBar(props) {
66
69
  externalSlotProps: slotProps?.toolbar,
67
70
  additionalProps: {}
68
71
  });
69
- const breadcrumbs = state.breadcrumbs ?? activePage?.breadcrumbs ?? [];
70
- const title = state.title ?? activePage?.title ?? "";
71
- const pageHeader = state.pageHeader ?? activePage?.pageHeader ?? null;
72
+ const breadcrumbs = stateRef.current.breadcrumbs ?? activePage?.breadcrumbs ?? [];
73
+ const title = stateRef.current.title ?? activePage?.title ?? "";
74
+ const pageHeader = stateRef.current.pageHeader ?? activePage?.pageHeader ?? null;
72
75
  // No page header
73
76
  if (pageHeader === false)
74
77
  return undefined;
75
78
  // Custom page header
76
79
  if (pageHeader != null)
77
80
  return pageHeader;
78
- if (state.page) {
79
- breadcrumbs.push({ title: state.page, path: "#" });
81
+ if (stateRef.current.page) {
82
+ breadcrumbs.push({ title: stateRef.current.page, path: "#" });
80
83
  }
81
84
  return (_jsxs(Stack, { children: [breadcrumbs && (_jsx(Breadcrumbs, { "aria-label": "breadcrumb", children: breadcrumbs.map((item, index) => {
82
85
  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));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/toolpad",
3
- "version": "1.0.31",
3
+ "version": "1.0.32",
4
4
  "author": "ETSOO",
5
5
  "description": "Dashboard framework extention based on Toolpad Core",
6
6
  "main": "build/cjs/index.js",
package/src/PageContainer/PageContainer.tsx CHANGED
@@ -115,16 +115,18 @@ function PageContainerBar(props: PageContainerBarProps) {
115
115
  const { slots, slotProps, titleBar } = props;
116
116
 
117
117
  const { state } = React.useContext(PageDataContext);
118
+ const stateRef = React.useRef(state);
119
+ if (state !== stateRef.current) stateRef.current = state;
118
120
 
119
121
  const activePage = useActivePage();
120
122
 
121
123
  React.useEffect(() => {
122
124
  return () => {
123
125
  // Reset the state when the component unmounts
124
- state.breadcrumbs = undefined;
125
- state.page = undefined;
126
- state.pageHeader = undefined;
127
- state.title = undefined;
126
+ stateRef.current.breadcrumbs = undefined;
127
+ stateRef.current.page = undefined;
128
+ stateRef.current.pageHeader = undefined;
129
+ stateRef.current.title = undefined;
128
130
  };
129
131
  }, [activePage?.sourcePath]);
130
132
 
@@ -136,9 +138,11 @@ function PageContainerBar(props: PageContainerBarProps) {
136
138
  additionalProps: {}
137
139
  });
138
140
 
139
- const breadcrumbs = state.breadcrumbs ?? activePage?.breadcrumbs ?? [];
140
- const title = state.title ?? activePage?.title ?? "";
141
- const pageHeader = state.pageHeader ?? activePage?.pageHeader ?? null;
141
+ const breadcrumbs =
142
+ stateRef.current.breadcrumbs ?? activePage?.breadcrumbs ?? [];
143
+ const title = stateRef.current.title ?? activePage?.title ?? "";
144
+ const pageHeader =
145
+ stateRef.current.pageHeader ?? activePage?.pageHeader ?? null;
142
146
 
143
147
  // No page header
144
148
  if (pageHeader === false) return undefined;
@@ -146,8 +150,8 @@ function PageContainerBar(props: PageContainerBarProps) {
146
150
  // Custom page header
147
151
  if (pageHeader != null) return pageHeader;
148
152
 
149
- if (state.page) {
150
- breadcrumbs.push({ title: state.page, path: "#" });
153
+ if (stateRef.current.page) {
154
+ breadcrumbs.push({ title: stateRef.current.page, path: "#" });
151
155
  }
152
156
 
153
157
  return (