@etsoo/toolpad 1.0.24 → 1.0.25

package/build/cjs/PageContainer/PageContainer.js

@@ -114,6 +114,8 @@ function PageContainer(props) {
             loaded.current = true;
         }
     }, [activePage?.sourcePath]);
+    // Cache the children to avoid re-rendering when the page changes
+    const childrenResult = React.useMemo(() => children, [activePage?.sourcePath]);
     let resolvedBreadcrumbs = state.breadcrumbs ?? activePage?.breadcrumbs ?? [];
     const title = state.title ?? defaultTitle ?? activePage?.title ?? "";
     if (state.page) {
@@ -133,5 +135,5 @@ function PageContainer(props) {
                             ? resolvedBreadcrumbs.map((item, index) => {
                                 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));
                             })
-                            : 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] }));
+                            : 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 })] })] })), childrenResult] }));
 }

package/build/mjs/PageContainer/PageContainer.js

@@ -73,6 +73,8 @@ function PageContainer(props) {
             loaded.current = true;
         }
     }, [activePage?.sourcePath]);
+    // Cache the children to avoid re-rendering when the page changes
+    const childrenResult = React.useMemo(() => children, [activePage?.sourcePath]);
     let resolvedBreadcrumbs = state.breadcrumbs ?? activePage?.breadcrumbs ?? [];
     const title = state.title ?? defaultTitle ?? activePage?.title ?? "";
     if (state.page) {
@@ -92,6 +94,6 @@ function PageContainer(props) {
                             ? resolvedBreadcrumbs.map((item, index) => {
                                 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));
                             })
-                            : null })), _jsxs(PageContentHeader, { children: [title ? _jsx(Typography, { variant: "h4", children: title }) : null, _jsx(ToolbarComponent, { ...toolbarSlotProps })] })] })), children] }));
+                            : null })), _jsxs(PageContentHeader, { children: [title ? _jsx(Typography, { variant: "h4", children: title }) : null, _jsx(ToolbarComponent, { ...toolbarSlotProps })] })] })), childrenResult] }));
 }
 export { PageContainer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/toolpad",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "author": "ETSOO",
   "description": "Dashboard framework extention based on Toolpad Core",
   "main": "build/cjs/index.js",
@@ -61,19 +61,19 @@
     "@babel/preset-env": "^7.26.9",
     "@babel/runtime-corejs3": "^7.27.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
+    "@testing-library/react": "^16.3.0",
     "@types/invariant": "2.2.37",
-    "@types/node": "^22.13.14",
-    "@types/react": "19.0.12",
-    "@types/react-dom": "19.0.4",
+    "@types/node": "^22.14.0",
+    "@types/react": "19.1.0",
+    "@types/react-dom": "19.1.1",
     "@vitejs/plugin-react": "4.3.4",
-    "@vitest/browser": "3.0.9",
+    "@vitest/browser": "3.1.1",
     "jsdom": "^26.0.0",
     "next": "^15.2.4",
     "next-router-mock": "^0.9.13",
     "playwright": "^1.51.1",
     "react-router-dom": "7.4.1",
-    "vitest": "3.0.9"
+    "vitest": "3.1.1"
   },
   "peerDependenciesMeta": {
     "next": {

package/src/PageContainer/PageContainer.tsx

@@ -143,6 +143,12 @@ function PageContainer(props: PageContainerProps) {
     }
   }, [activePage?.sourcePath]);
 
+  // Cache the children to avoid re-rendering when the page changes
+  const childrenResult = React.useMemo(
+    () => children,
+    [activePage?.sourcePath]
+  );
+
   let resolvedBreadcrumbs = state.breadcrumbs ?? activePage?.breadcrumbs ?? [];
   const title = state.title ?? defaultTitle ?? activePage?.title ?? "";
 
@@ -194,7 +200,7 @@ function PageContainer(props: PageContainerProps) {
           </PageContentHeader>
         </Stack>
       )}
-      {children}
+      {childrenResult}
     </Stack>
   );
 }