@etsoo/toolpad 1.0.22 → 1.0.24

package/build/cjs/AppProvider/AppThemeProvider.js

@@ -39,18 +39,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AppThemeProvider = AppThemeProvider;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
-const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 const InitColorSchemeScript_1 = __importDefault(require("@mui/material/InitColorSchemeScript"));
 const CssBaseline_1 = __importDefault(require("@mui/material/CssBaseline"));
 const invariant_1 = __importDefault(require("invariant"));
 const useLocalStorageState_1 = require("../useLocalStorageState");
 const context_1 = require("../shared/context");
+const useMediaQuery_1 = __importDefault(require("@mui/material/useMediaQuery"));
 const COLOR_SCHEME_ATTRIBUTE = "data-toolpad-color-scheme";
 const COLOR_SCHEME_STORAGE_KEY = "toolpad-color-scheme";
 const MODE_STORAGE_KEY = "toolpad-mode";
 function usePreferredMode(window) {
-    const prefersDarkMode = (0, material_1.useMediaQuery)("(prefers-color-scheme: dark)", window && {
+    const prefersDarkMode = (0, useMediaQuery_1.default)("(prefers-color-scheme: dark)", window && {
         matchMedia: window.matchMedia
     });
     return prefersDarkMode ? "dark" : "light";

package/build/cjs/DashboardLayout/DashboardLayout.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { type Theme, SxProps } from "@mui/material";
 import { type AccountProps } from "../Account";
+import { SxProps, Theme } from "@mui/material/styles";
 export interface SidebarFooterProps {
     mini: boolean;
 }

package/build/cjs/DashboardLayout/DashboardLayout.js

@@ -40,7 +40,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DashboardLayout = DashboardLayout;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
-const material_1 = require("@mui/material");
 const AppBar_1 = __importDefault(require("@mui/material/AppBar"));
 const Box_1 = __importDefault(require("@mui/material/Box"));
 const Drawer_1 = __importDefault(require("@mui/material/Drawer"));
@@ -59,6 +58,7 @@ const ThemeSwitcher_1 = require("./ThemeSwitcher");
 const utils_1 = require("./utils");
 const TitleBar_1 = require("./TitleBar");
 const LocaleContext_1 = require("../shared/locales/LocaleContext");
+const styles_1 = require("@mui/material/styles");
 /**
  *
  * Demos:
@@ -71,7 +71,7 @@ const LocaleContext_1 = require("../shared/locales/LocaleContext");
  */
 function DashboardLayout(props) {
     const { children, disableCollapsibleSidebar = false, defaultSidebarCollapsed = false, hideNavigation = false, showThemeSwitcher = false, sidebarExpandedWidth = 320, slots, slotProps, sx } = props;
-    const theme = (0, material_1.useTheme)();
+    const theme = (0, styles_1.useTheme)();
     const navigation = React.useContext(context_1.NavigationContext);
     const appWindow = React.useContext(context_1.WindowContext);
     const localeText = (0, LocaleContext_1.useLocaleText)();

package/build/cjs/DashboardLayout/DashboardSidebarSubNavigation.js

@@ -40,7 +40,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DashboardSidebarSubNavigation = DashboardSidebarSubNavigation;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
-const material_1 = require("@mui/material");
 const Avatar_1 = __importDefault(require("@mui/material/Avatar"));
 const Collapse_1 = __importDefault(require("@mui/material/Collapse"));
 const Divider_1 = __importDefault(require("@mui/material/Divider"));
@@ -57,7 +56,8 @@ const Link_1 = require("../shared/Link");
 const context_1 = require("../shared/context");
 const navigation_1 = require("../shared/navigation");
 const utils_1 = require("./utils");
-const NavigationListItemButton = (0, material_1.styled)(ListItemButton_1.default)(({ theme }) => ({
+const styles_1 = require("@mui/material/styles");
+const NavigationListItemButton = (0, styles_1.styled)(ListItemButton_1.default)(({ theme }) => ({
     borderRadius: 8,
     "&.Mui-selected": {
         "& .MuiListItemIcon-root": {

package/build/cjs/DashboardLayout/ThemeSwitcher.js

@@ -40,7 +40,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThemeSwitcher = ThemeSwitcher;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
-const material_1 = require("@mui/material");
 const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
 const Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
 const DarkMode_1 = __importDefault(require("@mui/icons-material/DarkMode"));
@@ -48,13 +47,14 @@ const LightMode_1 = __importDefault(require("@mui/icons-material/LightMode"));
 const context_1 = require("../shared/context");
 const useSsr_1 = __importDefault(require("../utils/hooks/useSsr"));
 const LocaleContext_1 = require("../shared/locales/LocaleContext");
+const styles_1 = require("@mui/material/styles");
 // TODO: When we use this component as the default for a slot, make it non-internal
 /**
  * @ignore - internal component.
  */
 function ThemeSwitcher() {
     const isSsr = (0, useSsr_1.default)();
-    const theme = (0, material_1.useTheme)();
+    const theme = (0, styles_1.useTheme)();
     const localeText = (0, LocaleContext_1.useLocaleText)();
     const { paletteMode, setPaletteMode, isDualTheme } = React.useContext(context_1.PaletteModeContext);
     const toggleMode = React.useCallback(() => {

package/build/cjs/DashboardLayout/TitleBar.js

@@ -5,11 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TitleBar = TitleBar;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const Link_1 = require("../shared/Link");
 const react_1 = __importDefault(require("react"));
 const context_1 = require("../shared/context");
-const LogoContainer = (0, material_1.styled)("div")({
+const styles_1 = require("@mui/material/styles");
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
+const LogoContainer = (0, styles_1.styled)("div")({
     position: "relative",
     height: 40,
     "& img": {
@@ -18,7 +20,7 @@ const LogoContainer = (0, material_1.styled)("div")({
 });
 function TitleBar() {
     // Theme
-    const theme = (0, material_1.useTheme)();
+    const theme = (0, styles_1.useTheme)();
     // Branding
     const branding = react_1.default.useContext(context_1.BrandingContext);
     // Application title
@@ -37,7 +39,7 @@ function TitleBar() {
                 titleString = title;
             }
             return [
-                (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", sx: {
+                (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "h6", sx: {
                         color: (theme.vars ?? theme).palette.primary.main,
                         fontWeight: "700",
                         ml: 0.5,
@@ -49,7 +51,7 @@ function TitleBar() {
         return [title, false];
     }, [title]);
     if (hasLink) {
-        return ((0, jsx_runtime_1.jsx)(Link_1.Link, { href: "/", style: { color: "inherit", textDecoration: "none" }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", children: [branding?.logo && (0, jsx_runtime_1.jsx)(LogoContainer, { children: branding.logo }), titleUI] }) }));
+        return ((0, jsx_runtime_1.jsx)(Link_1.Link, { href: "/", style: { color: "inherit", textDecoration: "none" }, children: (0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", alignItems: "center", children: [branding?.logo && (0, jsx_runtime_1.jsx)(LogoContainer, { children: branding.logo }), titleUI] }) }));
     }
     else {
         return titleUI;

package/build/cjs/DashboardLayout/utils.d.ts

@@ -1,4 +1,4 @@
-import type { Theme } from "@mui/material";
+import { Theme } from "@mui/material/styles";
 export declare function getDrawerSxTransitionMixin(isExpanded: boolean, property: string): {
     transition: (theme: Theme) => string;
 };

package/build/cjs/PageContainer/PageContainer.js

@@ -47,12 +47,12 @@ const Link_1 = __importDefault(require("@mui/material/Link"));
 const Stack_1 = __importDefault(require("@mui/material/Stack"));
 const Typography_1 = __importDefault(require("@mui/material/Typography"));
 const useSlotProps_1 = __importDefault(require("@mui/utils/useSlotProps"));
-const material_1 = require("@mui/material");
 const Link_2 = require("../shared/Link");
 const PageContainerToolbar_1 = require("./PageContainerToolbar");
 const navigation_1 = require("../shared/navigation");
 const useActivePage_1 = require("../useActivePage");
-const PageContentHeader = (0, material_1.styled)("div")(({ theme }) => ({
+const styles_1 = require("@mui/material/styles");
+const PageContentHeader = (0, styles_1.styled)("div")(({ theme }) => ({
     display: "flex",
     flexDirection: "row",
     justifyContent: "space-between",
@@ -64,7 +64,9 @@ function reducer(state, action) {
         // Reset the state
         if (state.breadcrumbs == null &&
             state.title == null &&
-            state.page == null) {
+            state.page == null &&
+            state.noBreadcrumbs == null &&
+            state.noPageHeader == null) {
             return state;
         }
         else {
@@ -75,12 +77,14 @@ function reducer(state, action) {
 }
 function PageDataContextProvider(props) {
     // Destruct
-    const { title, page, breadcrumbs, ...rest } = props;
+    const { title, page, breadcrumbs, noBreadcrumbs, noPageHeader, ...rest } = props;
     // useReducer hook to manage state with our reducer function and initial state
     const [state, dispatch] = React.useReducer(reducer, {
         title,
         page,
-        breadcrumbs
+        breadcrumbs,
+        noBreadcrumbs,
+        noPageHeader
     });
     // Provide the state and dispatch function to the context value
     return (0, jsx_runtime_1.jsx)(exports.PageDataContext.Provider, { value: { state, dispatch }, ...rest });

package/build/cjs/PageContainer/PageContainerToolbar.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageContainerToolbar = PageContainerToolbar;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const PageContainerToolbarRoot = (0, material_1.styled)("div")(({ theme }) => ({
+const styles_1 = require("@mui/material/styles");
+const PageContainerToolbarRoot = (0, styles_1.styled)("div")(({ theme }) => ({
     display: "flex",
     flexDirection: "row",
     gap: theme.spacing(1),

package/build/cjs/nextjs/AppProviderNextPages.js

@@ -48,7 +48,7 @@ function AppProviderNextPages(props) {
         const params = new URLSearchParams();
         Object.entries(query ?? {}).forEach(([key, value]) => {
             (0, collections_1.asArray)(value ?? []).forEach((v) => {
-                params.append(key, v);
+                params.append(key, v.toString());
             });
         });
         return params.toString();

package/build/cjs/shared/components.js

@@ -6,9 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ErrorOverlay = ErrorOverlay;
 exports.LoadingOverlay = LoadingOverlay;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const Error_1 = __importDefault(require("@mui/icons-material/Error"));
-const OverlayRoot = (0, material_1.styled)("div")(({ theme }) => ({
+const CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
+const styles_1 = require("@mui/material/styles");
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
+const OverlayRoot = (0, styles_1.styled)("div")(({ theme }) => ({
     position: "absolute",
     inset: "0 0 0 0",
     display: "flex",
@@ -18,13 +20,13 @@ const OverlayRoot = (0, material_1.styled)("div")(({ theme }) => ({
     padding: theme.spacing(2)
 }));
 function ErrorOverlay({ error }) {
-    return ((0, jsx_runtime_1.jsxs)(OverlayRoot, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "h6", sx: {
+    return ((0, jsx_runtime_1.jsxs)(OverlayRoot, { children: [(0, jsx_runtime_1.jsxs)(Typography_1.default, { variant: "h6", sx: {
                     display: "flex",
                     flexDirection: "row",
                     gap: 1,
                     alignItems: "center"
-                }, children: [(0, jsx_runtime_1.jsx)(Error_1.default, { color: "error" }), " Error"] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { textAlign: "center", children: error?.message ?? "Unknown error" })] }));
+                }, children: [(0, jsx_runtime_1.jsx)(Error_1.default, { color: "error" }), " Error"] }), (0, jsx_runtime_1.jsx)(Typography_1.default, { textAlign: "center", children: error?.message ?? "Unknown error" })] }));
 }
 function LoadingOverlay() {
-    return ((0, jsx_runtime_1.jsx)(OverlayRoot, { children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, {}) }));
+    return ((0, jsx_runtime_1.jsx)(OverlayRoot, { children: (0, jsx_runtime_1.jsx)(CircularProgress_1.default, {}) }));
 }

package/build/cjs/shared/context.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import type { PaletteMode } from "@mui/material";
 import type { Branding, Navigation, Router } from "../AppProvider";
+import { PaletteMode } from "@mui/material/styles";
 export declare const BrandingContext: React.Context<Branding | null>;
 export declare const NavigationContext: React.Context<Navigation>;
 export declare const PaletteModeContext: React.Context<{

package/build/mjs/AppProvider/AppThemeProvider.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { useMediaQuery } from "@mui/material";
 import { ThemeProvider, useColorScheme } from "@mui/material/styles";
 import InitColorSchemeScript from "@mui/material/InitColorSchemeScript";
 import CssBaseline from "@mui/material/CssBaseline";
 import invariant from "invariant";
 import { useLocalStorageState } from "../useLocalStorageState";
 import { PaletteModeContext } from "../shared/context";
+import useMediaQuery from "@mui/material/useMediaQuery";
 const COLOR_SCHEME_ATTRIBUTE = "data-toolpad-color-scheme";
 const COLOR_SCHEME_STORAGE_KEY = "toolpad-color-scheme";
 const MODE_STORAGE_KEY = "toolpad-mode";

package/build/mjs/DashboardLayout/DashboardLayout.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { type Theme, SxProps } from "@mui/material";
 import { type AccountProps } from "../Account";
+import { SxProps, Theme } from "@mui/material/styles";
 export interface SidebarFooterProps {
     mini: boolean;
 }

package/build/mjs/DashboardLayout/DashboardLayout.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { useTheme } from "@mui/material";
 import MuiAppBar from "@mui/material/AppBar";
 import Box from "@mui/material/Box";
 import Drawer from "@mui/material/Drawer";
@@ -20,6 +19,7 @@ import { ThemeSwitcher } from "./ThemeSwitcher";
 import { getDrawerSxTransitionMixin, getDrawerWidthTransitionMixin } from "./utils";
 import { TitleBar } from "./TitleBar";
 import { useLocaleText } from "../shared/locales/LocaleContext";
+import { useTheme } from "@mui/material/styles";
 /**
  *
  * Demos:

package/build/mjs/DashboardLayout/DashboardSidebarSubNavigation.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { styled } from "@mui/material";
 import Avatar from "@mui/material/Avatar";
 import Collapse from "@mui/material/Collapse";
 import Divider from "@mui/material/Divider";
@@ -18,6 +17,7 @@ import { Link } from "../shared/Link";
 import { RouterContext } from "../shared/context";
 import { getItemTitle, getPageItemFullPath, hasSelectedNavigationChildren, isPageItemSelected } from "../shared/navigation";
 import { getDrawerSxTransitionMixin } from "./utils";
+import { styled } from "@mui/material/styles";
 const NavigationListItemButton = styled(ListItemButton)(({ theme }) => ({
     borderRadius: 8,
     "&.Mui-selected": {

package/build/mjs/DashboardLayout/ThemeSwitcher.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { useTheme } from "@mui/material";
 import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
 import DarkModeIcon from "@mui/icons-material/DarkMode";
@@ -9,6 +8,7 @@ import LightModeIcon from "@mui/icons-material/LightMode";
 import { PaletteModeContext } from "../shared/context";
 import useSsr from "../utils/hooks/useSsr";
 import { useLocaleText } from "../shared/locales/LocaleContext";
+import { useTheme } from "@mui/material/styles";
 // TODO: When we use this component as the default for a slot, make it non-internal
 /**
  * @ignore - internal component.

package/build/mjs/DashboardLayout/TitleBar.js

@@ -1,8 +1,10 @@
 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 React from "react";
 import { BrandingContext } from "../shared/context";
+import { styled, useTheme } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
+import Stack from "@mui/material/Stack";
 const LogoContainer = styled("div")({
     position: "relative",
     height: 40,

package/build/mjs/DashboardLayout/utils.d.ts

@@ -1,4 +1,4 @@
-import type { Theme } from "@mui/material";
+import { Theme } from "@mui/material/styles";
 export declare function getDrawerSxTransitionMixin(isExpanded: boolean, property: string): {
     transition: (theme: Theme) => string;
 };

package/build/mjs/PageContainer/PageContainer.js

@@ -6,11 +6,11 @@ import Link from "@mui/material/Link";
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import useSlotProps from "@mui/utils/useSlotProps";
-import { styled } from "@mui/material";
 import { Link as ToolpadLink } from "../shared/Link";
 import { PageContainerToolbar } from "./PageContainerToolbar";
 import { getItemTitle } from "../shared/navigation";
 import { useActivePage } from "../useActivePage";
+import { styled } from "@mui/material/styles";
 const PageContentHeader = styled("div")(({ theme }) => ({
     display: "flex",
     flexDirection: "row",
@@ -23,7 +23,9 @@ function reducer(state, action) {
         // Reset the state
         if (state.breadcrumbs == null &&
             state.title == null &&
-            state.page == null) {
+            state.page == null &&
+            state.noBreadcrumbs == null &&
+            state.noPageHeader == null) {
             return state;
         }
         else {
@@ -34,12 +36,14 @@ function reducer(state, action) {
 }
 export function PageDataContextProvider(props) {
     // Destruct
-    const { title, page, breadcrumbs, ...rest } = props;
+    const { title, page, breadcrumbs, noBreadcrumbs, noPageHeader, ...rest } = props;
     // useReducer hook to manage state with our reducer function and initial state
     const [state, dispatch] = React.useReducer(reducer, {
         title,
         page,
-        breadcrumbs
+        breadcrumbs,
+        noBreadcrumbs,
+        noPageHeader
     });
     // Provide the state and dispatch function to the context value
     return _jsx(PageDataContext.Provider, { value: { state, dispatch }, ...rest });

package/build/mjs/PageContainer/PageContainerToolbar.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { styled } from "@mui/material";
+import { styled } from "@mui/material/styles";
 const PageContainerToolbarRoot = styled("div")(({ theme }) => ({
     display: "flex",
     flexDirection: "row",

package/build/mjs/nextjs/AppProviderNextPages.js

@@ -12,7 +12,7 @@ export function AppProviderNextPages(props) {
         const params = new URLSearchParams();
         Object.entries(query ?? {}).forEach(([key, value]) => {
             asArray(value ?? []).forEach((v) => {
-                params.append(key, v);
+                params.append(key, v.toString());
             });
         });
         return params.toString();

package/build/mjs/shared/components.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CircularProgress, Typography, styled } from "@mui/material";
 import ErrorIcon from "@mui/icons-material/Error";
+import CircularProgress from "@mui/material/CircularProgress";
+import { styled } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
 const OverlayRoot = styled("div")(({ theme }) => ({
     position: "absolute",
     inset: "0 0 0 0",

package/build/mjs/shared/context.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import type { PaletteMode } from "@mui/material";
 import type { Branding, Navigation, Router } from "../AppProvider";
+import { PaletteMode } from "@mui/material/styles";
 export declare const BrandingContext: React.Context<Branding | null>;
 export declare const NavigationContext: React.Context<Navigation>;
 export declare const PaletteModeContext: React.Context<{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/toolpad",
-  "version": "1.0.22",
+  "version": "1.0.24",
   "author": "ETSOO",
   "description": "Dashboard framework extention based on Toolpad Core",
   "main": "build/cjs/index.js",
@@ -47,31 +47,32 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@mui/icons-material": "6.4.8",
-    "@mui/material": "6.4.8",
-    "@mui/utils": "6.4.8",
+    "@mui/icons-material": "7.0.1",
+    "@mui/material": "7.0.1",
+    "@mui/utils": "7.0.1",
     "invariant": "2.2.4",
     "path-to-regexp": "6.3.0",
-    "react": "^19.0.0"
+    "react": "^19.1.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.26.4",
+    "@babel/cli": "^7.27.0",
     "@babel/core": "^7.26.10",
     "@babel/plugin-transform-runtime": "^7.26.10",
     "@babel/preset-env": "^7.26.9",
-    "@babel/runtime-corejs3": "^7.26.10",
+    "@babel/runtime-corejs3": "^7.27.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@types/invariant": "2.2.37",
+    "@types/node": "^22.13.14",
     "@types/react": "19.0.12",
     "@types/react-dom": "19.0.4",
     "@vitejs/plugin-react": "4.3.4",
     "@vitest/browser": "3.0.9",
     "jsdom": "^26.0.0",
-    "next": "^15.2.3",
+    "next": "^15.2.4",
     "next-router-mock": "^0.9.13",
     "playwright": "^1.51.1",
-    "react-router-dom": "7.4.0",
+    "react-router-dom": "7.4.1",
     "vitest": "3.0.9"
   },
   "peerDependenciesMeta": {

package/src/AppProvider/AppThemeProvider.tsx

@@ -1,12 +1,17 @@
 import * as React from "react";
-import { PaletteMode, Theme, useMediaQuery } from "@mui/material";
-import { ThemeProvider, useColorScheme } from "@mui/material/styles";
+import {
+  PaletteMode,
+  Theme,
+  ThemeProvider,
+  useColorScheme
+} from "@mui/material/styles";
 import InitColorSchemeScript from "@mui/material/InitColorSchemeScript";
 import CssBaseline from "@mui/material/CssBaseline";
 import invariant from "invariant";
 import { useLocalStorageState } from "../useLocalStorageState";
 import { PaletteModeContext } from "../shared/context";
 import type { AppTheme } from "./AppProvider";
+import useMediaQuery from "@mui/material/useMediaQuery";
 
 const COLOR_SCHEME_ATTRIBUTE = "data-toolpad-color-scheme";
 const COLOR_SCHEME_STORAGE_KEY = "toolpad-color-scheme";

package/src/DashboardLayout/DashboardLayout.tsx

@@ -1,6 +1,5 @@
 "use client";
 import * as React from "react";
-import { styled, useTheme, type Theme, SxProps } from "@mui/material";
 import MuiAppBar from "@mui/material/AppBar";
 import Box from "@mui/material/Box";
 import Drawer from "@mui/material/Drawer";
@@ -22,6 +21,7 @@ import {
 } from "./utils";
 import { TitleBar } from "./TitleBar";
 import { useLocaleText } from "../shared/locales/LocaleContext";
+import { SxProps, Theme, useTheme } from "@mui/material/styles";
 
 export interface SidebarFooterProps {
   mini: boolean;

package/src/DashboardLayout/DashboardSidebarSubNavigation.tsx

@@ -1,6 +1,5 @@
 "use client";
 import * as React from "react";
-import { styled } from "@mui/material";
 import Avatar from "@mui/material/Avatar";
 import Collapse from "@mui/material/Collapse";
 import Divider from "@mui/material/Divider";
@@ -24,6 +23,7 @@ import {
   isPageItemSelected
 } from "../shared/navigation";
 import { getDrawerSxTransitionMixin } from "./utils";
+import { styled } from "@mui/material/styles";
 
 const NavigationListItemButton = styled(ListItemButton)(({ theme }) => ({
   borderRadius: 8,

package/src/DashboardLayout/ThemeSwitcher.tsx

@@ -1,6 +1,5 @@
 "use client";
 import * as React from "react";
-import { useTheme } from "@mui/material";
 import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
 import DarkModeIcon from "@mui/icons-material/DarkMode";
@@ -8,6 +7,7 @@ import LightModeIcon from "@mui/icons-material/LightMode";
 import { PaletteModeContext } from "../shared/context";
 import useSsr from "../utils/hooks/useSsr";
 import { useLocaleText } from "../shared/locales/LocaleContext";
+import { useTheme } from "@mui/material/styles";
 
 // TODO: When we use this component as the default for a slot, make it non-internal
 /**

package/src/DashboardLayout/TitleBar.tsx

@@ -1,7 +1,9 @@
-import { Stack, styled, Typography, useTheme } from "@mui/material";
 import { Link } from "../shared/Link";
 import React from "react";
 import { BrandingContext } from "../shared/context";
+import { styled, useTheme } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
+import Stack from "@mui/material/Stack";
 
 const LogoContainer = styled("div")({
   position: "relative",

package/src/DashboardLayout/utils.ts

@@ -1,4 +1,4 @@
-import type { Theme } from "@mui/material";
+import { Theme } from "@mui/material/styles";
 
 export function getDrawerSxTransitionMixin(
   isExpanded: boolean,

package/src/PageContainer/PageContainer.tsx

@@ -5,7 +5,6 @@ import Link from "@mui/material/Link";
 import Stack, { StackProps } from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import useSlotProps from "@mui/utils/useSlotProps";
-import { styled } from "@mui/material";
 import { Link as ToolpadLink } from "../shared/Link";
 import {
   PageContainerToolbar,
@@ -13,6 +12,7 @@ import {
 } from "./PageContainerToolbar";
 import { getItemTitle } from "../shared/navigation";
 import { useActivePage } from "../useActivePage";
+import { styled } from "@mui/material/styles";
 
 const PageContentHeader = styled("div")(({ theme }) => ({
   display: "flex",
@@ -65,7 +65,9 @@ function reducer(state: PageData, action: PageDataAction) {
     if (
       state.breadcrumbs == null &&
       state.title == null &&
-      state.page == null
+      state.page == null &&
+      state.noBreadcrumbs == null &&
+      state.noPageHeader == null
     ) {
       return state;
     } else {
@@ -80,13 +82,16 @@ export function PageDataContextProvider(
   props: React.PropsWithChildren<PageData>
 ) {
   // Destruct
-  const { title, page, breadcrumbs, ...rest } = props;
+  const { title, page, breadcrumbs, noBreadcrumbs, noPageHeader, ...rest } =
+    props;
 
   // useReducer hook to manage state with our reducer function and initial state
   const [state, dispatch] = React.useReducer(reducer, {
     title,
     page,
-    breadcrumbs
+    breadcrumbs,
+    noBreadcrumbs,
+    noPageHeader
   });
 
   // Provide the state and dispatch function to the context value

package/src/PageContainer/PageContainerToolbar.tsx

@@ -1,6 +1,6 @@
 "use client";
+import { styled } from "@mui/material/styles";
 import * as React from "react";
-import { styled } from "@mui/material";
 
 const PageContainerToolbarRoot = styled("div")(({ theme }) => ({
   display: "flex",

package/src/nextjs/AppProviderNextPages.tsx

@@ -14,7 +14,7 @@ export function AppProviderNextPages(props: AppProviderProps) {
     const params = new URLSearchParams();
     Object.entries(query ?? {}).forEach(([key, value]) => {
       asArray(value ?? []).forEach((v) => {
-        params.append(key, v);
+        params.append(key, v.toString());
       });
     });
     return params.toString();

package/src/shared/components.tsx

@@ -1,6 +1,7 @@
-import * as React from "react";
-import { CircularProgress, Typography, styled } from "@mui/material";
 import ErrorIcon from "@mui/icons-material/Error";
+import CircularProgress from "@mui/material/CircularProgress";
+import { styled } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
 
 const OverlayRoot = styled("div")(({ theme }) => ({
   position: "absolute",

package/src/shared/context.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import type { PaletteMode } from "@mui/material";
 import type { Branding, Navigation, Router } from "../AppProvider";
+import { PaletteMode } from "@mui/material/styles";
 
 export const BrandingContext = React.createContext<Branding | null>(null);