From 072423a634a63ebac9b0f650ef84d7a697ad7085 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Wed, 12 Jun 2024 18:12:43 +0100 Subject: [PATCH 01/42] Add theme switcher --- .../src/AppProvider/AppProvider.tsx | 30 +++-- .../src/AppProvider/AppThemeProvider.tsx | 86 ++++++++++++ .../src/DashboardLayout/DashboardLayout.tsx | 16 ++- .../toolpad-core/src/themes/baseThemeDark.ts | 127 ++++++++++++++++++ .../{baseTheme.ts => baseThemeLight.ts} | 2 +- packages/toolpad-core/src/themes/index.ts | 3 +- packages/toolpad-studio/src/ThemeContext.tsx | 2 +- .../ComponentCatalog/ComponentCatalog.tsx | 2 +- .../toolpad/AppEditor/PagesExplorer/index.tsx | 2 +- .../src/hooks}/useLocalStorageState.ts | 2 +- packages/toolpad-utils/src/types.ts | 2 + scripts/generateProptypes.ts | 1 + 12 files changed, 258 insertions(+), 17 deletions(-) create mode 100644 packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx create mode 100644 packages/toolpad-core/src/themes/baseThemeDark.ts rename packages/toolpad-core/src/themes/{baseTheme.ts => baseThemeLight.ts} (97%) rename packages/{toolpad-studio/src/utils => toolpad-utils/src/hooks}/useLocalStorageState.ts (95%) diff --git a/packages/toolpad-core/src/AppProvider/AppProvider.tsx b/packages/toolpad-core/src/AppProvider/AppProvider.tsx index 697bc81335e..eba7a0965e9 100644 --- a/packages/toolpad-core/src/AppProvider/AppProvider.tsx +++ b/packages/toolpad-core/src/AppProvider/AppProvider.tsx @@ -1,9 +1,10 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import { ThemeProvider, Theme } from '@mui/material/styles'; -import CssBaseline from '@mui/material/CssBaseline'; -import { baseTheme } from '../themes'; +import { Theme } from '@mui/material/styles'; +import type { AtLeastOne } from '@toolpad/utils/types'; +import { baseThemeLight, baseThemeDark } from '../themes'; +import { AppThemeProvider } from './AppThemeProvider'; export interface NavigateOptions { history?: 'auto' | 'push' | 'replace'; @@ -49,6 +50,7 @@ export type NavigationItem = NavigationPageItem | NavigationSubheaderItem | Navi export type Navigation = NavigationItem[]; // TODO: hide these contexts from public API + export const BrandingContext = React.createContext(null); export const NavigationContext = React.createContext([]); @@ -61,10 +63,13 @@ export interface AppProviderProps { */ children: React.ReactNode; /** - * [Theme](https://mui.com/material-ui/customization/theming/) used by the app. - * @default baseTheme + * [Themes](https://mui.com/material-ui/customization/theming/) to be used by the app in light/dark mode. + * @default { light: baseThemeLight, dark: baseThemeDark } */ - theme?: Theme; + themes?: AtLeastOne<{ + light: Theme; + dark: Theme; + }>; /** * Branding options for the app. * @default null @@ -95,16 +100,21 @@ export interface AppProviderProps { * - [AppProvider API](https://mui.com/toolpad/core/api/app-provider) */ function AppProvider(props: AppProviderProps) { - const { children, theme = baseTheme, branding = null, navigation = [], router = null } = props; + const { + children, + themes = { light: baseThemeLight, dark: baseThemeDark }, + branding = null, + navigation = [], + router = null, + } = props; return ( - - + {children} - + ); } diff --git a/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx b/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx new file mode 100644 index 00000000000..92c4026f6bd --- /dev/null +++ b/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx @@ -0,0 +1,86 @@ +import * as React from 'react'; +import { ThemeProvider, Theme } from '@mui/material/styles'; +import useMediaQuery from '@mui/material/useMediaQuery'; +import { PaletteMode } from '@mui/material'; +import CssBaseline from '@mui/material/CssBaseline'; +import useLocalStorageState from '@toolpad/utils/hooks/useLocalStorageState'; +import type { AppProviderProps } from './AppProvider'; + +export interface ColorMode { + mode: PaletteMode; + toggleMode: () => void; +} + +export const ColorModeContext = React.createContext(null); + +export type ThemeMode = PaletteMode | 'system'; + +function usePreferredMode() { + const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)'); + return prefersDarkMode ? 'dark' : 'light'; +} + +export function useThemeMode() { + const [themeMode, setThemeMode] = useLocalStorageState( + 'toolpad-palette-mode', + 'system', + ); + return { themeMode, setThemeMode }; +} + +export function usePaletteMode() { + const preferredMode = usePreferredMode(); + const { themeMode, setThemeMode } = useThemeMode(); + + return { + paletteMode: themeMode === 'system' ? preferredMode : themeMode, + setPaletteMode: setThemeMode as React.Dispatch>, + }; +} + +interface AppThemeProviderProps { + children: React.ReactNode; + themes: NonNullable; +} + +/** + * @ignore - internal component. + */ +function AppThemeProvider(props: AppThemeProviderProps) { + const { children, themes } = props; + + const { paletteMode, setPaletteMode } = usePaletteMode(); + + const theme = React.useMemo(() => { + const lightTheme = (themes as { light: Theme }).light; + const darkTheme = (themes as { dark: Theme }).dark; + + let activeTheme = lightTheme ?? darkTheme; + if (lightTheme && darkTheme) { + activeTheme = paletteMode === 'dark' ? darkTheme : lightTheme; + } + + return activeTheme; + }, [paletteMode, themes]); + + const colorMode = React.useMemo( + () => ({ + mode: paletteMode, + toggleMode: () => { + setPaletteMode((prevMode: PaletteMode) => (prevMode === 'dark' ? 'light' : 'dark')); + }, + }), + [paletteMode, setPaletteMode], + ); + + return ( + + + + {children} + + + ); +} + +export { AppThemeProvider }; diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx index d7b8a46f1e3..c1254b3044f 100644 --- a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx +++ b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx @@ -7,6 +7,7 @@ import Collapse from '@mui/material/Collapse'; import Container from '@mui/material/Container'; import Divider from '@mui/material/Divider'; import Drawer from '@mui/material/Drawer'; +import IconButton from '@mui/material/IconButton'; import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; import ListItemButton from '@mui/material/ListItemButton'; @@ -15,7 +16,10 @@ import ListItemText from '@mui/material/ListItemText'; import ListSubheader from '@mui/material/ListSubheader'; import Stack from '@mui/material/Stack'; import Toolbar from '@mui/material/Toolbar'; +import Tooltip from '@mui/material/Tooltip'; import Typography from '@mui/material/Typography'; +import DarkModeIcon from '@mui/icons-material/DarkMode'; +import LightModeIcon from '@mui/icons-material/LightMode'; import ExpandLessIcon from '@mui/icons-material/ExpandLess'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { @@ -25,6 +29,7 @@ import { NavigationPageItem, RouterContext, } from '../AppProvider/AppProvider'; +import { ColorModeContext } from '../AppProvider/AppThemeProvider'; import { ToolpadLogo } from './ToolpadLogo'; const DRAWER_WIDTH = 320; @@ -122,7 +127,7 @@ function DashboardSidebarSubNavigation({ return ( ); } @@ -204,6 +209,7 @@ function DashboardLayout(props: DashboardLayoutProps) { const branding = React.useContext(BrandingContext); const navigation = React.useContext(NavigationContext); + const colorMode = React.useContext(ColorModeContext); return ( @@ -226,6 +232,14 @@ function DashboardLayout(props: DashboardLayoutProps) { + + + {colorMode?.mode === 'dark' ? : } + + = A & Brand; export type Expand = T extends infer O ? { [K in keyof O]: O[K] } : never; export type ExpandNested = T extends infer O ? { [K in keyof O]: Expand } : never; +export type AtLeastOne = { [K in keyof T]: Pick }[keyof T]; + export {}; diff --git a/scripts/generateProptypes.ts b/scripts/generateProptypes.ts index b0e80ecefad..a2ea1206e91 100644 --- a/scripts/generateProptypes.ts +++ b/scripts/generateProptypes.ts @@ -48,6 +48,7 @@ async function generateProptypes( if ( name.toLowerCase().endsWith('classes') || name === 'theme' || + name === 'themes' || name === 'ownerState' || (name.endsWith('Props') && name !== 'componentsProps' && name !== 'slotProps') ) { From 7e2f32aba8f3a920ca5cc4cd725bb4431074f281 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Fri, 14 Jun 2024 19:35:44 +0100 Subject: [PATCH 02/42] Use CSS vars themes (in progress) --- .../src/AppProvider/AppProvider.tsx | 24 ++-- .../src/AppProvider/AppThemeProvider.tsx | 77 ++---------- .../src/DashboardLayout/DashboardLayout.tsx | 19 ++- .../toolpad-core/src/DashboardLayout/index.ts | 1 - .../themes/{baseThemeDark.ts => baseTheme.ts} | 75 +++++++----- .../toolpad-core/src/themes/baseThemeLight.ts | 112 ------------------ packages/toolpad-core/src/themes/index.ts | 3 +- 7 files changed, 77 insertions(+), 234 deletions(-) rename packages/toolpad-core/src/themes/{baseThemeDark.ts => baseTheme.ts} (55%) delete mode 100644 packages/toolpad-core/src/themes/baseThemeLight.ts diff --git a/packages/toolpad-core/src/AppProvider/AppProvider.tsx b/packages/toolpad-core/src/AppProvider/AppProvider.tsx index eba7a0965e9..b9f6575169c 100644 --- a/packages/toolpad-core/src/AppProvider/AppProvider.tsx +++ b/packages/toolpad-core/src/AppProvider/AppProvider.tsx @@ -1,9 +1,8 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import { Theme } from '@mui/material/styles'; -import type { AtLeastOne } from '@toolpad/utils/types'; -import { baseThemeLight, baseThemeDark } from '../themes'; +import { CssVarsTheme } from '@mui/material/styles'; +import { baseTheme } from '../themes'; import { AppThemeProvider } from './AppThemeProvider'; export interface NavigateOptions { @@ -63,13 +62,10 @@ export interface AppProviderProps { */ children: React.ReactNode; /** - * [Themes](https://mui.com/material-ui/customization/theming/) to be used by the app in light/dark mode. - * @default { light: baseThemeLight, dark: baseThemeDark } + * [Theme](https://mui.com/material-ui/customization/theming/) to be used by the app in light/dark mode. + * @default baseTheme */ - themes?: AtLeastOne<{ - light: Theme; - dark: Theme; - }>; + theme?: CssVarsTheme; /** * Branding options for the app. * @default null @@ -100,17 +96,11 @@ export interface AppProviderProps { * - [AppProvider API](https://mui.com/toolpad/core/api/app-provider) */ function AppProvider(props: AppProviderProps) { - const { - children, - themes = { light: baseThemeLight, dark: baseThemeDark }, - branding = null, - navigation = [], - router = null, - } = props; + const { children, theme = baseTheme, branding = null, navigation = [], router = null } = props; return ( - + {children} diff --git a/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx b/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx index 92c4026f6bd..2fd4fa72503 100644 --- a/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx +++ b/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx @@ -1,85 +1,30 @@ import * as React from 'react'; -import { ThemeProvider, Theme } from '@mui/material/styles'; -import useMediaQuery from '@mui/material/useMediaQuery'; -import { PaletteMode } from '@mui/material'; +import { + Experimental_CssVarsProvider as CssVarsProvider, + getInitColorSchemeScript, +} from '@mui/material/styles'; import CssBaseline from '@mui/material/CssBaseline'; -import useLocalStorageState from '@toolpad/utils/hooks/useLocalStorageState'; import type { AppProviderProps } from './AppProvider'; -export interface ColorMode { - mode: PaletteMode; - toggleMode: () => void; -} - -export const ColorModeContext = React.createContext(null); - -export type ThemeMode = PaletteMode | 'system'; - -function usePreferredMode() { - const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)'); - return prefersDarkMode ? 'dark' : 'light'; -} - -export function useThemeMode() { - const [themeMode, setThemeMode] = useLocalStorageState( - 'toolpad-palette-mode', - 'system', - ); - return { themeMode, setThemeMode }; -} - -export function usePaletteMode() { - const preferredMode = usePreferredMode(); - const { themeMode, setThemeMode } = useThemeMode(); - - return { - paletteMode: themeMode === 'system' ? preferredMode : themeMode, - setPaletteMode: setThemeMode as React.Dispatch>, - }; -} - interface AppThemeProviderProps { children: React.ReactNode; - themes: NonNullable; + theme: NonNullable; } /** * @ignore - internal component. */ function AppThemeProvider(props: AppThemeProviderProps) { - const { children, themes } = props; - - const { paletteMode, setPaletteMode } = usePaletteMode(); - - const theme = React.useMemo(() => { - const lightTheme = (themes as { light: Theme }).light; - const darkTheme = (themes as { dark: Theme }).dark; - - let activeTheme = lightTheme ?? darkTheme; - if (lightTheme && darkTheme) { - activeTheme = paletteMode === 'dark' ? darkTheme : lightTheme; - } - - return activeTheme; - }, [paletteMode, themes]); - - const colorMode = React.useMemo( - () => ({ - mode: paletteMode, - toggleMode: () => { - setPaletteMode((prevMode: PaletteMode) => (prevMode === 'dark' ? 'light' : 'dark')); - }, - }), - [paletteMode, setPaletteMode], - ); + const { children, theme } = props; return ( - - + + {getInitColorSchemeScript()} + {children} - - + + ); } diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx index c1254b3044f..e8a3b31cc27 100644 --- a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx +++ b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx @@ -1,6 +1,8 @@ +'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; import { styled } from '@mui/material'; +import { useColorScheme } from '@mui/material/styles'; import AppBar from '@mui/material/AppBar'; import Box from '@mui/material/Box'; import Collapse from '@mui/material/Collapse'; @@ -29,7 +31,6 @@ import { NavigationPageItem, RouterContext, } from '../AppProvider/AppProvider'; -import { ColorModeContext } from '../AppProvider/AppThemeProvider'; import { ToolpadLogo } from './ToolpadLogo'; const DRAWER_WIDTH = 320; @@ -209,7 +210,13 @@ function DashboardLayout(props: DashboardLayoutProps) { const branding = React.useContext(BrandingContext); const navigation = React.useContext(NavigationContext); - const colorMode = React.useContext(ColorModeContext); + + const { mode, setMode } = useColorScheme(); + + // @TODO: Show theme switcher only in client I think, follow docs example + const toggleMode = React.useCallback(() => { + setMode(mode === 'dark' ? 'light' : 'dark'); + }, [mode, setMode]); return ( @@ -232,12 +239,12 @@ function DashboardLayout(props: DashboardLayoutProps) { - + - {colorMode?.mode === 'dark' ? : } + {mode === 'dark' ? : } diff --git a/packages/toolpad-core/src/DashboardLayout/index.ts b/packages/toolpad-core/src/DashboardLayout/index.ts index a9cd934af1b..fc36c152c7f 100644 --- a/packages/toolpad-core/src/DashboardLayout/index.ts +++ b/packages/toolpad-core/src/DashboardLayout/index.ts @@ -1,2 +1 @@ -'use client'; export * from './DashboardLayout'; diff --git a/packages/toolpad-core/src/themes/baseThemeDark.ts b/packages/toolpad-core/src/themes/baseTheme.ts similarity index 55% rename from packages/toolpad-core/src/themes/baseThemeDark.ts rename to packages/toolpad-core/src/themes/baseTheme.ts index 92fd329e546..fb3950694fb 100644 --- a/packages/toolpad-core/src/themes/baseThemeDark.ts +++ b/packages/toolpad-core/src/themes/baseTheme.ts @@ -1,20 +1,27 @@ -import { createTheme } from '@mui/material/styles'; +import { experimental_extendTheme as extendTheme } from '@mui/material/styles'; -const defaultTheme = createTheme({ - palette: { - mode: 'dark', - }, -}); - -export const baseThemeDark = createTheme(defaultTheme, { - palette: { - background: { - default: defaultTheme.palette.grey['900'], +export const baseTheme = extendTheme({ + colorSchemes: { + light: { + palette: { + background: { + default: 'var(--mui-palette-grey-50)', + }, + }, }, - text: { - primary: defaultTheme.palette.grey['100'], + dark: { + palette: { + background: { + default: 'var(--mui-palette-grey-900)', + }, + text: { + primary: 'var(--mui-palette-grey-100)', + }, + }, }, }, + + // @TODO: This isn't doing anything, find alternative typography: { h6: { fontWeight: '700', @@ -23,14 +30,16 @@ export const baseThemeDark = createTheme(defaultTheme, { components: { MuiAppBar: { styleOverrides: { - root: { - backgroundColor: defaultTheme.palette.background.default, + root: ({ theme }) => ({ borderWidth: 0, borderBottomWidth: 1, borderStyle: 'solid', - borderColor: defaultTheme.palette.divider, + borderColor: theme.vars.palette.divider, boxShadow: 'none', - }, + [theme.getColorSchemeSelector('dark')]: { + backgroundColor: theme.vars.palette.background.paper, + }, + }), }, }, MuiToolbar: { @@ -49,21 +58,24 @@ export const baseThemeDark = createTheme(defaultTheme, { }, MuiIconButton: { styleOverrides: { - root: { - color: defaultTheme.palette.primary.dark, + root: ({ theme }) => ({ + color: theme.vars.palette.primary.dark, padding: 8, - }, + }), }, }, MuiListSubheader: { styleOverrides: { - root: { - color: defaultTheme.palette.grey['500'], + root: ({ theme }) => ({ + color: theme.vars.palette.grey['600'], fontSize: 12, fontWeight: '700', height: 40, paddingLeft: 32, - }, + [theme.getColorSchemeSelector('dark')]: { + color: theme.vars.palette.grey['500'], + }, + }), }, }, MuiListItem: { @@ -76,26 +88,29 @@ export const baseThemeDark = createTheme(defaultTheme, { }, MuiListItemButton: { styleOverrides: { - root: { + root: ({ theme }) => ({ borderRadius: 8, '&.Mui-selected': { '& .MuiListItemIcon-root': { - color: defaultTheme.palette.primary.dark, + color: theme.vars.palette.primary.dark, }, '& .MuiTypography-root': { - color: defaultTheme.palette.primary.dark, + color: theme.vars.palette.primary.dark, }, '& .MuiSvgIcon-root': { - color: defaultTheme.palette.primary.dark, + color: theme.vars.palette.primary.dark, }, '& .MuiTouchRipple-child': { - backgroundColor: defaultTheme.palette.primary.dark, + backgroundColor: theme.vars.palette.primary.dark, }, }, '& .MuiSvgIcon-root': { - color: defaultTheme.palette.grey['100'], + color: theme.vars.palette.action.active, + [theme.getColorSchemeSelector('dark')]: { + color: theme.vars.palette.grey['100'], + }, }, - }, + }), }, }, MuiListItemText: { diff --git a/packages/toolpad-core/src/themes/baseThemeLight.ts b/packages/toolpad-core/src/themes/baseThemeLight.ts deleted file mode 100644 index d821024d40d..00000000000 --- a/packages/toolpad-core/src/themes/baseThemeLight.ts +++ /dev/null @@ -1,112 +0,0 @@ -import { createTheme } from '@mui/material/styles'; - -const defaultTheme = createTheme(); - -export const baseThemeLight = createTheme(defaultTheme, { - palette: { - background: { - default: defaultTheme.palette.grey['50'], - }, - }, - typography: { - h6: { - fontWeight: '700', - }, - }, - components: { - MuiAppBar: { - styleOverrides: { - root: { - borderWidth: 0, - borderBottomWidth: 1, - borderStyle: 'solid', - borderColor: defaultTheme.palette.divider, - boxShadow: 'none', - }, - }, - }, - MuiList: { - styleOverrides: { - root: { - padding: 0, - }, - }, - }, - MuiIconButton: { - styleOverrides: { - root: { - color: defaultTheme.palette.primary.dark, - padding: 8, - }, - }, - }, - MuiListSubheader: { - styleOverrides: { - root: { - color: defaultTheme.palette.grey['600'], - fontSize: 12, - fontWeight: '700', - height: 40, - paddingLeft: 32, - }, - }, - }, - MuiListItem: { - styleOverrides: { - root: { - paddingTop: 0, - paddingBottom: 0, - }, - }, - }, - MuiListItemButton: { - styleOverrides: { - root: { - borderRadius: 8, - '&.Mui-selected': { - '& .MuiListItemIcon-root': { - color: defaultTheme.palette.primary.dark, - }, - '& .MuiTypography-root': { - color: defaultTheme.palette.primary.dark, - }, - '& .MuiSvgIcon-root': { - color: defaultTheme.palette.primary.dark, - }, - '& .MuiTouchRipple-child': { - backgroundColor: defaultTheme.palette.primary.dark, - }, - }, - '& .MuiSvgIcon-root': { - color: defaultTheme.palette.action.active, - }, - }, - }, - }, - MuiListItemText: { - styleOverrides: { - root: { - '& .MuiTypography-root': { - fontWeight: '500', - }, - }, - }, - }, - MuiListItemIcon: { - styleOverrides: { - root: { - minWidth: 34, - }, - }, - }, - MuiDivider: { - styleOverrides: { - root: { - borderBottomWidth: 2, - marginLeft: '16px', - marginRight: '16px', - }, - }, - }, - }, -}); diff --git a/packages/toolpad-core/src/themes/index.ts b/packages/toolpad-core/src/themes/index.ts index a6b45977c24..4ed30a92200 100644 --- a/packages/toolpad-core/src/themes/index.ts +++ b/packages/toolpad-core/src/themes/index.ts @@ -1,3 +1,2 @@ 'use client'; -export * from './baseThemeLight'; -export * from './baseThemeDark'; +export * from './baseTheme'; From b00118f5a1fdedceaa0520d119c5d4bd6bb61bab Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Tue, 25 Jun 2024 19:55:03 +0100 Subject: [PATCH 03/42] Fix remaining issues and warnings --- .../src/DashboardLayout/DashboardLayout.tsx | 24 ++++++++++++------- packages/toolpad-core/src/themes/baseTheme.ts | 10 ++++---- 2 files changed, 19 insertions(+), 15 deletions(-) diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx index e8a3b31cc27..ed68ad16bd9 100644 --- a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx +++ b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx @@ -213,7 +213,11 @@ function DashboardLayout(props: DashboardLayoutProps) { const { mode, setMode } = useColorScheme(); - // @TODO: Show theme switcher only in client I think, follow docs example + const [hasMounted, setHasMounted] = React.useState(false); + React.useEffect(() => { + setHasMounted(true); + }, []); + const toggleMode = React.useCallback(() => { setMode(mode === 'dark' ? 'light' : 'dark'); }, [mode, setMode]); @@ -239,14 +243,16 @@ function DashboardLayout(props: DashboardLayoutProps) { - - - {mode === 'dark' ? : } - - + {hasMounted ? ( + + + {mode === 'dark' ? : } + + + ) : null} Date: Wed, 26 Jun 2024 18:55:55 +0100 Subject: [PATCH 04/42] Hybrid theming solution but still has a mismatch in SSR --- .../src/AppProvider/AppProvider.tsx | 4 +- .../src/AppProvider/AppThemeProvider.tsx | 145 +++++++++++++++++- .../src/DashboardLayout/DashboardLayout.tsx | 17 +- .../nextjs-pages/src/pages/_document.tsx | 2 +- playground/nextjs/src/app/layout.tsx | 2 +- 5 files changed, 152 insertions(+), 18 deletions(-) diff --git a/packages/toolpad-core/src/AppProvider/AppProvider.tsx b/packages/toolpad-core/src/AppProvider/AppProvider.tsx index ee61e88c6b4..e8e9f1e687f 100644 --- a/packages/toolpad-core/src/AppProvider/AppProvider.tsx +++ b/packages/toolpad-core/src/AppProvider/AppProvider.tsx @@ -1,7 +1,7 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import { CssVarsTheme } from '@mui/material/styles'; +import { CssVarsTheme, Theme } from '@mui/material/styles'; import { baseTheme } from '../themes'; import { AppThemeProvider } from './AppThemeProvider'; import { NotificationsProvider } from '../useNotifications'; @@ -67,7 +67,7 @@ export interface AppProviderProps { * [Theme](https://mui.com/material-ui/customization/theming/) to be used by the app in light/dark mode. * @default baseTheme */ - theme?: CssVarsTheme; + theme?: Theme | { light: Theme; dark: Theme } | CssVarsTheme; /** * Branding options for the app. * @default null diff --git a/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx b/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx index 2fd4fa72503..d496dae0139 100644 --- a/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx +++ b/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx @@ -1,31 +1,166 @@ import * as React from 'react'; +import { PaletteMode, Theme, useMediaQuery } from '@mui/material'; import { Experimental_CssVarsProvider as CssVarsProvider, getInitColorSchemeScript, + ThemeProvider, + useColorScheme, + CssVarsTheme, } from '@mui/material/styles'; import CssBaseline from '@mui/material/CssBaseline'; +import useLocalStorageState from '@toolpad/utils/hooks/useLocalStorageState'; import type { AppProviderProps } from './AppProvider'; -interface AppThemeProviderProps { +export const PaletteModeContext = React.createContext<{ + paletteMode: PaletteMode; + setPaletteMode: (mode: PaletteMode) => void; + isDualTheme: boolean; +}>({ + paletteMode: 'light', + setPaletteMode: () => {}, + isDualTheme: false, +}); + +function usePreferredMode() { + const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)'); + return prefersDarkMode ? 'dark' : 'light'; +} + +type ThemeMode = PaletteMode | 'system'; + +function useThemeMode() { + const [themeMode, setThemeMode] = useLocalStorageState( + 'toolpad-palette-mode', + 'system', + ); + return { themeMode, setThemeMode }; +} + +function useStandardPaletteMode() { + const preferredMode = usePreferredMode(); + const { themeMode, setThemeMode } = useThemeMode(); + + return { + paletteMode: themeMode === 'system' ? preferredMode : themeMode, + setPaletteMode: setThemeMode, + }; +} + +interface StandardThemeProviderProps { children: React.ReactNode; - theme: NonNullable; + theme: NonNullable; } /** * @ignore - internal component. */ -function AppThemeProvider(props: AppThemeProviderProps) { +function StandardThemeProvider(props: StandardThemeProviderProps) { + const { children, theme } = props; + + const { paletteMode, setPaletteMode } = useStandardPaletteMode(); + + const isDualTheme = 'light' in theme || 'dark' in theme; + + const dualAwareTheme = React.useMemo( + () => + isDualTheme + ? theme[paletteMode === 'dark' ? 'dark' : 'light'] ?? + theme[paletteMode === 'dark' ? 'light' : 'dark'] + : theme, + [isDualTheme, paletteMode, theme], + ); + + const paletteModeContextValue = React.useMemo( + () => ({ paletteMode, setPaletteMode, isDualTheme }), + [isDualTheme, paletteMode, setPaletteMode], + ); + + return ( + + + {children} + + + ); +} + +interface CSSVarsThemeConsumerProps { + children: React.ReactNode; + isDualTheme: boolean; +} + +/** + * @ignore - internal component. + */ +function CSSVarsThemeConsumer(props: CSSVarsThemeConsumerProps) { + const { children, isDualTheme } = props; + + const preferredMode = usePreferredMode(); + const { mode, setMode } = useColorScheme(); + + const paletteModeContextValue = React.useMemo(() => { + return { + paletteMode: !mode || mode === 'system' ? preferredMode : mode, + setPaletteMode: setMode, + isDualTheme, + }; + }, [isDualTheme, mode, preferredMode, setMode]); + + return ( + + {children} + + ); +} + +interface CSSVarsThemeProviderProps { + children: React.ReactNode; + theme: NonNullable; +} + +/** + * @ignore - internal component. + */ +function CSSVarsThemeProvider(props: CSSVarsThemeProviderProps) { const { children, theme } = props; + const isDualTheme = 'light' in theme.colorSchemes && 'dark' in theme.colorSchemes; + return ( {getInitColorSchemeScript()} - - {children} + {children} ); } +interface AppThemeProviderProps { + children: React.ReactNode; + theme: NonNullable; +} + +/** + * @ignore - internal component. + */ +function AppThemeProvider(props: AppThemeProviderProps) { + const { children, theme } = props; + + const isCSSVarsTheme = 'colorSchemes' in theme; + + const themeChildren = ( + + + {children} + + ); + + return isCSSVarsTheme ? ( + {themeChildren} + ) : ( + {themeChildren} + ); +} + export { AppThemeProvider }; diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx index ed68ad16bd9..972e3d80e40 100644 --- a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx +++ b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { styled } from '@mui/material'; -import { useColorScheme } from '@mui/material/styles'; import AppBar from '@mui/material/AppBar'; import Box from '@mui/material/Box'; import Collapse from '@mui/material/Collapse'; @@ -31,6 +30,7 @@ import { NavigationPageItem, RouterContext, } from '../AppProvider/AppProvider'; +import { PaletteModeContext } from '../AppProvider/AppThemeProvider'; import { ToolpadLogo } from './ToolpadLogo'; const DRAWER_WIDTH = 320; @@ -210,8 +210,7 @@ function DashboardLayout(props: DashboardLayoutProps) { const branding = React.useContext(BrandingContext); const navigation = React.useContext(NavigationContext); - - const { mode, setMode } = useColorScheme(); + const { paletteMode, setPaletteMode, isDualTheme } = React.useContext(PaletteModeContext); const [hasMounted, setHasMounted] = React.useState(false); React.useEffect(() => { @@ -219,8 +218,8 @@ function DashboardLayout(props: DashboardLayoutProps) { }, []); const toggleMode = React.useCallback(() => { - setMode(mode === 'dark' ? 'light' : 'dark'); - }, [mode, setMode]); + setPaletteMode(paletteMode === 'dark' ? 'light' : 'dark'); + }, [paletteMode, setPaletteMode]); return ( @@ -243,13 +242,13 @@ function DashboardLayout(props: DashboardLayoutProps) { - {hasMounted ? ( - + {hasMounted && isDualTheme ? ( + - {mode === 'dark' ? : } + {paletteMode === 'dark' ? : } ) : null} diff --git a/playground/nextjs-pages/src/pages/_document.tsx b/playground/nextjs-pages/src/pages/_document.tsx index be16e742177..aa20c679a3f 100644 --- a/playground/nextjs-pages/src/pages/_document.tsx +++ b/playground/nextjs-pages/src/pages/_document.tsx @@ -8,7 +8,7 @@ import { export default function Document(props: DocumentProps & DocumentHeadTagsProps) { return ( - + diff --git a/playground/nextjs/src/app/layout.tsx b/playground/nextjs/src/app/layout.tsx index 91843f848d7..8b1a671cfc3 100644 --- a/playground/nextjs/src/app/layout.tsx +++ b/playground/nextjs/src/app/layout.tsx @@ -24,7 +24,7 @@ const NAVIGATION: Navigation = [ export default function RootLayout(props: { children: React.ReactNode }) { return ( - + {props.children} From a3d4e6f7bae84e0a56e8703f1fc93f82788802d6 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Thu, 27 Jun 2024 18:30:08 +0100 Subject: [PATCH 05/42] Was facing weird problems with circular dependencies, restructured to avoid these better --- .../src/AppProvider/AppProvider.tsx | 11 +- .../src/AppProvider/AppThemeProvider.tsx | 13 +- .../DashboardLayout/DashboardLayout.test.tsx | 3 +- .../src/DashboardLayout/DashboardLayout.tsx | 7 +- .../toolpad-core/src/DataGrid/DataGrid.tsx | 2 +- .../toolpad-core/src/LineChart/LineChart.tsx | 2 +- .../toolpad-core/src/nextjs/AppProvider.tsx | 2 +- .../src/nextjs/AppProviderNextApp.tsx | 3 +- .../src/nextjs/AppProviderNextPages.tsx | 3 +- .../src/shared/{index.tsx => components.tsx} | 0 packages/toolpad-core/src/shared/context.ts | 19 ++ packages/toolpad-utils/src/types.ts | 2 - pnpm-lock.yaml | 283 ++++++++---------- scripts/generateProptypes.ts | 1 - 14 files changed, 168 insertions(+), 183 deletions(-) rename packages/toolpad-core/src/shared/{index.tsx => components.tsx} (100%) create mode 100644 packages/toolpad-core/src/shared/context.ts diff --git a/packages/toolpad-core/src/AppProvider/AppProvider.tsx b/packages/toolpad-core/src/AppProvider/AppProvider.tsx index e8e9f1e687f..436ebd03e55 100644 --- a/packages/toolpad-core/src/AppProvider/AppProvider.tsx +++ b/packages/toolpad-core/src/AppProvider/AppProvider.tsx @@ -3,9 +3,10 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { CssVarsTheme, Theme } from '@mui/material/styles'; import { baseTheme } from '../themes'; -import { AppThemeProvider } from './AppThemeProvider'; import { NotificationsProvider } from '../useNotifications'; import { DialogsProvider } from '../useDialogs'; +import { BrandingContext, NavigationContext, RouterContext } from '../shared/context'; +import { AppThemeProvider } from './AppThemeProvider'; export interface NavigateOptions { history?: 'auto' | 'push' | 'replace'; @@ -50,14 +51,6 @@ export type NavigationItem = NavigationPageItem | NavigationSubheaderItem | Navi export type Navigation = NavigationItem[]; -// TODO: hide these contexts from public API - -export const BrandingContext = React.createContext(null); - -export const NavigationContext = React.createContext([]); - -export const RouterContext = React.createContext(null); - export interface AppProviderProps { /** * The content of the app provider. diff --git a/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx b/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx index d496dae0139..a65e1ac7620 100644 --- a/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx +++ b/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx @@ -9,18 +9,9 @@ import { } from '@mui/material/styles'; import CssBaseline from '@mui/material/CssBaseline'; import useLocalStorageState from '@toolpad/utils/hooks/useLocalStorageState'; +import { PaletteModeContext } from '../shared/context'; import type { AppProviderProps } from './AppProvider'; -export const PaletteModeContext = React.createContext<{ - paletteMode: PaletteMode; - setPaletteMode: (mode: PaletteMode) => void; - isDualTheme: boolean; -}>({ - paletteMode: 'light', - setPaletteMode: () => {}, - isDualTheme: false, -}); - function usePreferredMode() { const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)'); return prefersDarkMode ? 'dark' : 'light'; @@ -129,7 +120,7 @@ function CSSVarsThemeProvider(props: CSSVarsThemeProviderProps) { return ( {getInitColorSchemeScript()} - + {children} diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.test.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.test.tsx index e0c73bae3db..ee4db5c53e0 100644 --- a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.test.tsx +++ b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.test.tsx @@ -11,8 +11,9 @@ import BarChartIcon from '@mui/icons-material/BarChart'; import DescriptionIcon from '@mui/icons-material/Description'; import LayersIcon from '@mui/icons-material/Layers'; import userEvent from '@testing-library/user-event'; +import { BrandingContext, NavigationContext } from '../shared/context'; +import type { Navigation } from '../AppProvider'; import { DashboardLayout } from './DashboardLayout'; -import { BrandingContext, Navigation, NavigationContext } from '../AppProvider'; describe('DashboardLayout', () => { test('renders content correctly', async () => { diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx index 972e3d80e40..054fe0ae44f 100644 --- a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx +++ b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx @@ -25,12 +25,11 @@ import ExpandLessIcon from '@mui/icons-material/ExpandLess'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { BrandingContext, - Navigation, NavigationContext, - NavigationPageItem, + PaletteModeContext, RouterContext, -} from '../AppProvider/AppProvider'; -import { PaletteModeContext } from '../AppProvider/AppThemeProvider'; +} from '../shared/context'; +import type { Navigation, NavigationPageItem } from '../AppProvider'; import { ToolpadLogo } from './ToolpadLogo'; const DRAWER_WIDTH = 320; diff --git a/packages/toolpad-core/src/DataGrid/DataGrid.tsx b/packages/toolpad-core/src/DataGrid/DataGrid.tsx index e2062d9c333..7551cbc5ad1 100644 --- a/packages/toolpad-core/src/DataGrid/DataGrid.tsx +++ b/packages/toolpad-core/src/DataGrid/DataGrid.tsx @@ -36,7 +36,7 @@ import invariant from 'invariant'; import { useNonNullableContext } from '@toolpad/utils/react'; import { errorFrom } from '@toolpad/utils/errors'; import RowsLoadingOverlay from './LoadingOverlay'; -import { ErrorOverlay, LoadingOverlay } from '../shared'; +import { ErrorOverlay, LoadingOverlay } from '../shared/components'; import { ResolvedDataProvider, ResolvedField, diff --git a/packages/toolpad-core/src/LineChart/LineChart.tsx b/packages/toolpad-core/src/LineChart/LineChart.tsx index c885ac965d7..d54e95e1ff9 100644 --- a/packages/toolpad-core/src/LineChart/LineChart.tsx +++ b/packages/toolpad-core/src/LineChart/LineChart.tsx @@ -10,7 +10,7 @@ import { } from '@mui/x-charts'; import { styled, useTheme } from '@mui/material'; import { Datum, ResolvedDataProvider, useGetMany } from '../DataProvider'; -import { ErrorOverlay, LoadingOverlay } from '../shared'; +import { ErrorOverlay, LoadingOverlay } from '../shared/components'; const LineChartRoot = styled('div')({ position: 'relative', diff --git a/packages/toolpad-core/src/nextjs/AppProvider.tsx b/packages/toolpad-core/src/nextjs/AppProvider.tsx index 35c67bd821e..d589e0a1757 100644 --- a/packages/toolpad-core/src/nextjs/AppProvider.tsx +++ b/packages/toolpad-core/src/nextjs/AppProvider.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { useRouter } from './nextCompatRouter'; import { AppProviderNextApp } from './AppProviderNextApp'; import { AppProviderNextPages } from './AppProviderNextPages'; -import { AppProviderProps } from '../AppProvider'; +import type { AppProviderProps } from '../AppProvider'; /** * @ignore - internal component. diff --git a/packages/toolpad-core/src/nextjs/AppProviderNextApp.tsx b/packages/toolpad-core/src/nextjs/AppProviderNextApp.tsx index befd08532df..c3edacea951 100644 --- a/packages/toolpad-core/src/nextjs/AppProviderNextApp.tsx +++ b/packages/toolpad-core/src/nextjs/AppProviderNextApp.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { usePathname, useSearchParams, useRouter } from './nextNavigation'; -import { AppProvider, AppProviderProps, Navigate, Router } from '../AppProvider'; +import { AppProvider } from '../AppProvider'; +import type { AppProviderProps, Navigate, Router } from '../AppProvider'; /** * @ignore - internal component. diff --git a/packages/toolpad-core/src/nextjs/AppProviderNextPages.tsx b/packages/toolpad-core/src/nextjs/AppProviderNextPages.tsx index 0fcb3b5ed5f..bb9f9ea1406 100644 --- a/packages/toolpad-core/src/nextjs/AppProviderNextPages.tsx +++ b/packages/toolpad-core/src/nextjs/AppProviderNextPages.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import { asArray } from '@toolpad/utils/collections'; import { useRouter } from './nextRouter'; -import { AppProvider, AppProviderProps, Navigate, Router } from '../AppProvider'; +import { AppProvider } from '../AppProvider'; +import type { AppProviderProps, Navigate, Router } from '../AppProvider'; /** * @ignore - internal component. diff --git a/packages/toolpad-core/src/shared/index.tsx b/packages/toolpad-core/src/shared/components.tsx similarity index 100% rename from packages/toolpad-core/src/shared/index.tsx rename to packages/toolpad-core/src/shared/components.tsx diff --git a/packages/toolpad-core/src/shared/context.ts b/packages/toolpad-core/src/shared/context.ts new file mode 100644 index 00000000000..9a75b58dda3 --- /dev/null +++ b/packages/toolpad-core/src/shared/context.ts @@ -0,0 +1,19 @@ +import * as React from 'react'; +import type { PaletteMode } from '@mui/material'; +import type { Branding, Navigation, Router } from '../AppProvider'; + +export const BrandingContext = React.createContext(null); + +export const NavigationContext = React.createContext([]); + +export const PaletteModeContext = React.createContext<{ + paletteMode: PaletteMode; + setPaletteMode: (mode: PaletteMode) => void; + isDualTheme: boolean; +}>({ + paletteMode: 'light', + setPaletteMode: () => {}, + isDualTheme: false, +}); + +export const RouterContext = React.createContext(null); diff --git a/packages/toolpad-utils/src/types.ts b/packages/toolpad-utils/src/types.ts index da5d954e99a..36af6f0ef9f 100644 --- a/packages/toolpad-utils/src/types.ts +++ b/packages/toolpad-utils/src/types.ts @@ -95,6 +95,4 @@ export type Branded = A & Brand; export type Expand = T extends infer O ? { [K in keyof O]: O[K] } : never; export type ExpandNested = T extends infer O ? { [K in keyof O]: Expand } : never; -export type AtLeastOne = { [K in keyof T]: Pick }[keyof T]; - export {}; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d4673f3ca53..c68fefbbdcd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -16,7 +16,7 @@ importers: version: 4.17.5 '@vitest/browser': specifier: beta - version: 2.0.0-beta.11(playwright@1.44.1)(typescript@5.5.2)(vitest@2.0.0-beta.11) + version: 2.0.0-beta.12(playwright@1.44.1)(typescript@5.5.2)(vitest@2.0.0-beta.12) archiver: specifier: 7.0.1 version: 7.0.1 @@ -49,7 +49,7 @@ importers: version: 4.15.7 vitest: specifier: beta - version: 2.0.0-beta.11(@types/node@20.14.8)(@vitest/browser@2.0.0-beta.11)(jsdom@24.1.0)(terser@5.31.0) + version: 2.0.0-beta.12(@types/node@20.14.8)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.0) yargs: specifier: 17.7.2 version: 17.7.2 @@ -101,7 +101,7 @@ importers: version: https://codeload.github.com/mui/material-ui/tar.gz/fb476c6c18b850e8400d03afb7447802afbfd357(@opentelemetry/api@1.8.0)(encoding@0.1.13) '@mui/x-charts': specifier: 7.7.0 - version: 7.7.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-alpha.12(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 7.7.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@next/eslint-plugin-next': specifier: 14.2.4 version: 14.2.4 @@ -140,7 +140,7 @@ importers: version: 7.13.1(eslint@8.57.0)(typescript@5.5.2) '@vitest/coverage-v8': specifier: beta - version: 2.0.0-beta.11(vitest@2.0.0-beta.11(@types/node@20.14.8)(@vitest/browser@2.0.0-beta.11)(jsdom@24.1.0)(terser@5.31.0)) + version: 2.0.0-beta.12(vitest@2.0.0-beta.12(@types/node@20.14.8)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.0)) babel-plugin-react-remove-properties: specifier: 0.3.0 version: 0.3.0 @@ -188,7 +188,7 @@ importers: version: 7.34.3(eslint@8.57.0) eslint-plugin-react-compiler: specifier: latest - version: 0.0.0-experimental-51a85ea-20240601(eslint@8.57.0) + version: 0.0.0-experimental-0998c1e-20240625(eslint@8.57.0) eslint-plugin-react-hooks: specifier: 4.6.2 version: 4.6.2(eslint@8.57.0) @@ -251,10 +251,10 @@ importers: version: 2.0.3 vitest-dom: specifier: 0.1.1 - version: 0.1.1(vitest@2.0.0-beta.11(@types/node@20.14.8)(@vitest/browser@2.0.0-beta.11)(jsdom@24.1.0)(terser@5.31.0)) + version: 0.1.1(vitest@2.0.0-beta.12(@types/node@20.14.8)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.0)) vitest-fail-on-console: specifier: 0.7.0 - version: 0.7.0(vite@5.3.1(@types/node@20.14.8)(terser@5.31.0))(vitest@2.0.0-beta.11(@types/node@20.14.8)(@vitest/browser@2.0.0-beta.11)(jsdom@24.1.0)(terser@5.31.0)) + version: 0.7.0(vite@5.3.1(@types/node@20.14.8)(terser@5.31.0))(vitest@2.0.0-beta.12(@types/node@20.14.8)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.0)) docs: dependencies: @@ -287,34 +287,34 @@ importers: version: 5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/docs': specifier: 6.0.0-dev.240424162023-9968b4889d - version: 6.0.0-dev.240424162023-9968b4889d(@mui/base@5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/icons-material@6.0.0-alpha.12(@mui/material@6.0.0-alpha.12(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-alpha.12(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.0.0-alpha.12(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) + version: 6.0.0-dev.240424162023-9968b4889d(@mui/base@5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/icons-material@6.0.0-alpha.13(@mui/material@6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) '@mui/icons-material': specifier: next - version: 6.0.0-alpha.12(@mui/material@6.0.0-alpha.12(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + version: 6.0.0-alpha.13(@mui/material@6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/internal-markdown': specifier: ^1.0.1 version: 1.0.6 '@mui/joy': specifier: next - version: 5.0.0-beta.45(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 5.0.0-beta.46(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/lab': specifier: next - version: 6.0.0-alpha.12(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-alpha.12(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': specifier: next - version: 6.0.0-alpha.12(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material-nextjs': specifier: next - version: 6.0.0-alpha.11(@emotion/cache@11.11.0)(@emotion/server@11.11.0)(@mui/material@6.0.0-alpha.12(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) + version: 6.0.0-alpha.13(@emotion/cache@11.11.0)(@emotion/server@11.11.0)(@mui/material@6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) '@mui/styles': specifier: next - version: 6.0.0-alpha.12(@types/react@18.3.3)(react@18.3.1) + version: 6.0.0-alpha.13(@types/react@18.3.3)(react@18.3.1) '@mui/system': specifier: next - version: 6.0.0-alpha.12(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + version: 6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/utils': specifier: next - version: 6.0.0-alpha.12(@types/react@18.3.3)(react@18.3.1) + version: 6.0.0-alpha.13(@types/react@18.3.3)(react@18.3.1) '@mui/x-license': specifier: 7.7.0 version: 7.7.0(@types/react@18.3.3)(react@18.3.1) @@ -630,7 +630,7 @@ importers: version: 17.0.3 '@vitest/browser': specifier: beta - version: 2.0.0-beta.11(playwright@1.44.1)(typescript@5.5.2)(vitest@2.0.0-beta.11) + version: 2.0.0-beta.12(playwright@1.44.1)(typescript@5.5.2)(vitest@2.0.0-beta.12) next: specifier: ^14.2.4 version: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -645,7 +645,7 @@ importers: version: 18.0.0 vitest: specifier: beta - version: 2.0.0-beta.11(@types/node@20.14.8)(@vitest/browser@2.0.0-beta.11)(jsdom@24.1.0)(terser@5.31.0) + version: 2.0.0-beta.12(@types/node@20.14.8)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.0) packages/toolpad-studio: dependencies: @@ -2566,8 +2566,8 @@ packages: '@types/react': optional: true - '@mui/base@5.0.0-beta.50': - resolution: {integrity: sha512-BQ6XZqARmVXBB+ACuiCs7QbsshAxzBfhHoJc0CztbkxmAG+Y2KWSHcAA/TE5gSwcaCTPpMCGNTI7lWa09owkAQ==} + '@mui/base@5.0.0-beta.51': + resolution: {integrity: sha512-Ah81RG8l7hrUWAl+z33xvV5OFG3xHXpV6tEZkk7BUluFPnKUh0JZy8sZAjcur/LxLe33WjEhPIbk6la9fPO78w==} engines: {node: '>=12.0.0'} peerDependencies: '@types/react': ^17.0.0 || ^18.0.0 @@ -2609,11 +2609,11 @@ packages: '@types/react': optional: true - '@mui/icons-material@6.0.0-alpha.12': - resolution: {integrity: sha512-uVpzxW0nsWPFmq9fBvjma1Ee6h3OzllDsdUbnkFru89oGW506wGkS/qXNmMobAGaBWNJbHr8QZugS3ChU7HmfA==} + '@mui/icons-material@6.0.0-alpha.13': + resolution: {integrity: sha512-WuIlS9NcfnWX034Fru/nSABXXX3ccSn6e3A6jiu2eVtLaTHRWPaki/cuQu0cC1qyfo5FFeZRO6a4KMJ35+T0Iw==} engines: {node: '>=12.0.0'} peerDependencies: - '@mui/material': ^6.0.0-alpha.12 + '@mui/material': 6.0.0-alpha.13 '@types/react': ^17.0.0 || ^18.0.0 react: ^17.0.0 || ^18.0.0 peerDependenciesMeta: @@ -2629,8 +2629,8 @@ packages: '@mui/internal-scripts@1.0.11': resolution: {integrity: sha512-lvdnCVG57QjggVpcDc9lZ+JbIIV+zB7crUoJ43ahpFVKtos9yzZPLuk/8rLV0I/B3erVztGeUPocp4p19Mph0w==} - '@mui/joy@5.0.0-beta.45': - resolution: {integrity: sha512-cST5lrbjq1s8MGAdX48ysaPc3FiYyBRmGvjRaYNkjPN2IO/iw1r2onC9+J7TM140F5NGrmZ9XvWCafzzmdrtVQ==} + '@mui/joy@5.0.0-beta.46': + resolution: {integrity: sha512-EYC8en6akOR4TVkT8Kw9AeD2urQdcoeG2U4EzkddIQBpudo3hgJIF450nDq6Nkh9sL7/gUCkg10GYWYTqmr10g==} engines: {node: '>=12.0.0'} peerDependencies: '@emotion/react': ^11.5.0 @@ -2664,13 +2664,13 @@ packages: '@types/react': optional: true - '@mui/lab@6.0.0-alpha.12': - resolution: {integrity: sha512-3h+F/hBS6brFz+MEQvrZ1gvlKOMjYO7POflz/ycbJpPjYXNmzwH6s/sX8qGdr9wKULzawcZEs3LHFMn0rx+NPQ==} + '@mui/lab@6.0.0-alpha.13': + resolution: {integrity: sha512-2kgYxAKkRWShlGbw3nXE1znyqtCeiu9LuhLK9ay0WWG2IK5bErw43k8hru0End0vFovhuTo3Kz8oPM6i68GkVQ==} engines: {node: '>=12.0.0'} peerDependencies: '@emotion/react': ^11.5.0 '@emotion/styled': ^11.3.0 - '@mui/material': ^6.0.0-alpha.12 + '@mui/material': ^6.0.0-alpha.13 '@types/react': ^17.0.0 || ^18.0.0 react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 @@ -2700,13 +2700,13 @@ packages: '@types/react': optional: true - '@mui/material-nextjs@6.0.0-alpha.11': - resolution: {integrity: sha512-4bLqUA7Gxq8LYAtxBsxd56tFOTVVlhS9bgA67hmIoQmk/h/ST6jo58mGLitMIDMg1IwRjJuIK1uuHmRzIOBNMw==} + '@mui/material-nextjs@6.0.0-alpha.13': + resolution: {integrity: sha512-cc6sODC1PbvdvjynWn8qfaMmv/Tu5Jvmipjb8WG3UkXl9+yg9JuKeR8VdFXr18yvXKgAN2DTiWocy7bqVyoZEQ==} engines: {node: '>=12.0.0'} peerDependencies: '@emotion/cache': ^11.11.0 '@emotion/server': ^11.11.0 - '@mui/material': ^6.0.0-alpha.11 + '@mui/material': 6.0.0-alpha.13 '@types/react': ^17.0.0 || ^18.0.0 next: ^13.0.0 || ^14.0.0 react: ^17.0.0 || ^18.0.0 @@ -2735,12 +2735,13 @@ packages: '@types/react': optional: true - '@mui/material@6.0.0-alpha.12': - resolution: {integrity: sha512-5qF8BWXNMaJTVQmfTNrdDyiQswu6tTSOXS5vUbPkjY/TyktLrxcQBlFBJODkQCS9A6FwJNEwGhFXeGgmGPawAA==} + '@mui/material@6.0.0-alpha.13': + resolution: {integrity: sha512-d6EgcVbV4JF0fJyA/gkWPhD+lY+Q6ISqT8z9fbBOEhu4XcgOBp5P2XKvhaK8PtHLLGrXVEvCaBLR0sY5wzn3mA==} engines: {node: '>=12.0.0'} peerDependencies: '@emotion/react': ^11.5.0 '@emotion/styled': ^11.3.0 + '@pigment-css/react': ^0.0.16 '@types/react': ^17.0.0 || ^18.0.0 react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 @@ -2749,6 +2750,8 @@ packages: optional: true '@emotion/styled': optional: true + '@pigment-css/react': + optional: true '@types/react': optional: true @@ -2767,8 +2770,8 @@ packages: '@types/react': optional: true - '@mui/private-theming@6.0.0-dev.20240529-082515-213b5e33ab': - resolution: {integrity: sha512-5AL+3TUSWaW2E9g+wIaD8jXHxFzqDInhNa3kNWJk2ZEqN2yG5msJLFr2BMp5/ev/x6V3AzTIIktkAV6qnlhOig==} + '@mui/private-theming@6.0.0-alpha.13': + resolution: {integrity: sha512-eqbiI/AVuJBUZuqmxh9uOwg2eW3nr1zs9gIBy7436l+KmjbJ+YFCAea65XTPUz6C0hDBuC9McKkx6vwzWFNa6A==} engines: {node: '>=12.0.0'} peerDependencies: '@types/react': ^17.0.0 || ^18.0.0 @@ -2790,8 +2793,8 @@ packages: '@emotion/styled': optional: true - '@mui/styled-engine@6.0.0-dev.20240529-082515-213b5e33ab': - resolution: {integrity: sha512-+vpJBmaOPwp5fTjcin/MZ5umeqYAJD4RXxj0Ey+5KBp+j+7aXQBW5ZgehIZtM2eCg/VfUIfiVsB+i3SMFrfdFw==} + '@mui/styled-engine@6.0.0-alpha.13': + resolution: {integrity: sha512-Eq8jKL+zJG1+9MQReUWM+WkqUYwPFbrNktd1bQSj/teZ/Hd/t/bLYl/Rlb2a7wzPNl2NQdwnBLs87Nc7nN4LQA==} engines: {node: '>=12.0.0'} peerDependencies: '@emotion/react': ^11.4.1 @@ -2803,8 +2806,8 @@ packages: '@emotion/styled': optional: true - '@mui/styles@6.0.0-alpha.12': - resolution: {integrity: sha512-5pGl6XwLKPOYeW6vDqMW8ge5eTrdP2qxjeDq6a6dyXguN9SRFBC6syFviFI9fBqUUtmWZjP8EnYBz/5r/7F8vQ==} + '@mui/styles@6.0.0-alpha.13': + resolution: {integrity: sha512-AaJpzQsKbo7aJu6WDtwTpDp9klVf2Z3S9nr5q8y5QkH46niqsBgFBiRiruijSwe5E7Ks7CX8tzJKrXgleXSbnA==} engines: {node: '>=12.0.0'} peerDependencies: '@types/react': ^17.0.0 || ^18.0.0 @@ -2829,8 +2832,8 @@ packages: '@types/react': optional: true - '@mui/system@6.0.0-alpha.12': - resolution: {integrity: sha512-4WWgeBCLAJwQb0JyXlhthLnCJ3CCkC8qywvmcNtXnKnMdP6Budko6iJ8uguQgMcYCziz+EDCF97hiizmy4sMEQ==} + '@mui/system@6.0.0-alpha.13': + resolution: {integrity: sha512-nxNBR495fGdhayIp2Qw72GiDjRQ1TvmCFByifGpLE5BjGCZh+Cny5jWUD7jO6LfKv3niJprfBRd7iGTZhY4XcA==} engines: {node: '>=12.0.0'} peerDependencies: '@emotion/react': ^11.5.0 @@ -2863,18 +2866,8 @@ packages: '@types/react': optional: true - '@mui/utils@6.0.0-alpha.12': - resolution: {integrity: sha512-LdmfpAL5GvD0J6D/ydaj4BncQTixGNzCDCKz8AUjukTzCa6MjDhUaSq5z/VDFP587HXFp8B8PGvzN21zt5NrUw==} - engines: {node: '>=12.0.0'} - peerDependencies: - '@types/react': ^17.0.0 || ^18.0.0 - react: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - - '@mui/utils@6.0.0-dev.20240529-082515-213b5e33ab': - resolution: {integrity: sha512-jyNcB0drDhYcoq5MHNTiEc63GfVE1GZK+CVUd8tlLzk5q631RPYJ5jONSOszLiUOXBmI8Uu1SBJUwrG3j2YG2A==} + '@mui/utils@6.0.0-alpha.13': + resolution: {integrity: sha512-uWBKV01fvPOSRmVml/2I+nnPPUsKl6Y9Tv/Po1Y1BEBaS0lg/ld/N+bYf1B8J/kPPTe7YwXI9Kuj2nzQ68ACaw==} engines: {node: '>=12.0.0'} peerDependencies: '@types/react': ^17.0.0 || ^18.0.0 @@ -4178,12 +4171,12 @@ packages: peerDependencies: vite: ^4.2.0 || ^5.0.0 - '@vitest/browser@2.0.0-beta.11': - resolution: {integrity: sha512-GRsEo/NrMgw4cQZ7Q+S6NAfh3d7450sLbv6uqY2fKH7w3I/eLMETN3aT4pAQu18uXCql0gvvnsp6yDl8vqnSrQ==} + '@vitest/browser@2.0.0-beta.12': + resolution: {integrity: sha512-q8qYJhry+zrJ9I6RPFBlqpCH71PZv0YSTyAgsd90t2OBCafxA793xamuOmJFngHsviG2sY/5HkBW6cHFhxaVtg==} peerDependencies: playwright: '*' safaridriver: '*' - vitest: 2.0.0-beta.11 + vitest: 2.0.0-beta.12 webdriverio: '*' peerDependenciesMeta: playwright: @@ -4193,25 +4186,25 @@ packages: webdriverio: optional: true - '@vitest/coverage-v8@2.0.0-beta.11': - resolution: {integrity: sha512-Lzxyv/QRF/i0vzjy4ioqugtjbqWuHM13p9UDaAz+tvJ3IgdY589jpra5gFYif4aR7PRP+SYg8S3UfD+DDlSAYQ==} + '@vitest/coverage-v8@2.0.0-beta.12': + resolution: {integrity: sha512-yH+sU8xceBkoxiAvRT5JROByglgdYV7Q8i1gIQYd7VWce+9cX81u9BJUeXSjYIXgEg7orT0IB9I1zUBH0gEwsQ==} peerDependencies: - vitest: 2.0.0-beta.11 + vitest: 2.0.0-beta.12 - '@vitest/expect@2.0.0-beta.11': - resolution: {integrity: sha512-d+VCN21Ln7KkyvfU13K7A27tQk57WDtp05DPf05lozHT4KUv4y5AQYf3Pm8fV5v/8mM16EULm3jT2liEbhlIaA==} + '@vitest/expect@2.0.0-beta.12': + resolution: {integrity: sha512-4AoKb3aZRFzFWGVF6iFHuAjsFH0dydQKzEfT8TfCNzx7+iXtVnLJ5nQUC6D4qlvyEmJeGIbbXZcgiSxY4Ry7eA==} - '@vitest/runner@2.0.0-beta.11': - resolution: {integrity: sha512-g1Dp0PGJf3m6al5vQuOXtKpqqMJuS2KctgzkLJESAG3IOKC36FaJImqNjDclKPPSwrkUSjEyC5XLh7mFG1OqGA==} + '@vitest/runner@2.0.0-beta.12': + resolution: {integrity: sha512-nAerpQvAw1/6vO4vRjOy0A+7IwtktSME3thwUoqWZxMKBgmTzIO2/WevbtFsAwYPc3V8NEY/Erv4PjQt9JTlzQ==} - '@vitest/snapshot@2.0.0-beta.11': - resolution: {integrity: sha512-F3LRgdEy0o3mFea4E9KpPyrYVoHhaXjOyMHz9f4Ie2OFZ89BH+750lX1Hp/69MgLwfaIziQP1NHbxOuAmXYU6g==} + '@vitest/snapshot@2.0.0-beta.12': + resolution: {integrity: sha512-NBqn1rTNQ/e3Dsw8LnniHgeZslgIxg8UvSfje/QV3hJLSoLMLbKLopHmK9T2FQA0hcibAaq/TZVyVrBoX+6aig==} - '@vitest/spy@2.0.0-beta.11': - resolution: {integrity: sha512-2i5DKrHgFvMPb0+2jfOFwrrB5/64Hk2py2BCR/ixHgxgN6u0d75262PY/gD6sdwuSgDzApxgi4lfq8jnVX/h9g==} + '@vitest/spy@2.0.0-beta.12': + resolution: {integrity: sha512-o9Di4HtCMY/81YZr13ozhvkEdF2cI/4VmkOO0rC5s4v1kTcM4PpvkkSut/Cwj5LfeENRQI6JINvDaKNgBPSXhA==} - '@vitest/utils@2.0.0-beta.11': - resolution: {integrity: sha512-97nAwg5UaQdjA0lj0kFdtTd7HrsC8+eKKWsZEZlPdr/nx8MkJmpK2T/1K5hT3/opWBoXCvuYpin/UluyBkYIKg==} + '@vitest/utils@2.0.0-beta.12': + resolution: {integrity: sha512-qjVhzdcGnZeWMOoEDk/wgfuO4f/jcz7MIOpSAr2apxeJoWOZ+4GrV77/3EZ9qBodU4MbXBeHdR5KHdMPfl3kAQ==} '@webassemblyjs/ast@1.12.1': resolution: {integrity: sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==} @@ -5652,8 +5645,8 @@ packages: peerDependencies: eslint: '>=7.0.0' - eslint-plugin-react-compiler@0.0.0-experimental-51a85ea-20240601: - resolution: {integrity: sha512-ROiKTVu9pZsNHyJepZj/JULWnkw8+I8+9gOF/MkJ8Q22/9f9MkPQkD2f6FXzVH+iyWbp7DQ3RXKhB3hWhf8AIg==} + eslint-plugin-react-compiler@0.0.0-experimental-0998c1e-20240625: + resolution: {integrity: sha512-npq2RomExoQI3jETs4OrifaygyJYgOcX/q74Q9OC7GmffLh5zSJaQpzjs2fi61NMNkJyIvTBD0C6sKTGGcetOw==} engines: {node: ^14.17.0 || ^16.0.0 || >= 18.0.0} peerDependencies: eslint: '>=7' @@ -9652,8 +9645,8 @@ packages: victory-vendor@36.9.2: resolution: {integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==} - vite-node@2.0.0-beta.11: - resolution: {integrity: sha512-F1tso6UvGiyKNS3IuSB91ZND9VwgcIPfl2HAtQS1gEb+xfwkLsaBRIMgOoTbz8KHKcvZkQWvu0h+z/R01Zkrgw==} + vite-node@2.0.0-beta.12: + resolution: {integrity: sha512-aS07DFW00yJNteJ44bPOSz/Zs25ppIqMElzcydBQv7nKiImnb8N6Rrlg9GQYLJByHLbdJAdxXvDsdruwkPA+kw==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true @@ -9696,15 +9689,15 @@ packages: vite: '>=4.5.2' vitest: '>=0.26.2' - vitest@2.0.0-beta.11: - resolution: {integrity: sha512-L132Ip5fiOFELHLCPyIK/4O2TNQ//9/TB+X23/lzb8bry2pGHCGirKqxDpPV072xHXr7TciJ6PkGiO7eD+wv8Q==} + vitest@2.0.0-beta.12: + resolution: {integrity: sha512-nqputSJprBdVHgQDg7xUVQigEdC8JOva889jbP0LoHQNA8kN+YzAEdAnYqyUk7ZRMlbtCHO16Ys/cfTBIqDm9A==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true peerDependencies: '@edge-runtime/vm': '*' '@types/node': ^18.0.0 || >=20.0.0 - '@vitest/browser': 2.0.0-beta.11 - '@vitest/ui': 2.0.0-beta.11 + '@vitest/browser': 2.0.0-beta.12 + '@vitest/ui': 2.0.0-beta.12 happy-dom: '*' jsdom: '*' peerDependenciesMeta: @@ -11578,12 +11571,12 @@ snapshots: optionalDependencies: '@types/react': 18.3.3 - '@mui/base@5.0.0-beta.50(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mui/base@5.0.0-beta.51(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 '@floating-ui/react-dom': 2.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/types': 7.2.14(@types/react@18.3.3) - '@mui/utils': 6.0.0-alpha.12(@types/react@18.3.3)(react@18.3.1) + '@mui/utils': 6.0.0-alpha.13(@types/react@18.3.3)(react@18.3.1) '@popperjs/core': 2.11.8 clsx: 2.1.1 prop-types: 15.8.1 @@ -11596,14 +11589,14 @@ snapshots: '@mui/core-downloads-tracker@6.0.0-dev.240424162023-9968b4889d': {} - ? '@mui/docs@6.0.0-dev.240424162023-9968b4889d(@mui/base@5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/icons-material@6.0.0-alpha.12(@mui/material@6.0.0-alpha.12(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-alpha.12(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.0.0-alpha.12(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)' + ? '@mui/docs@6.0.0-dev.240424162023-9968b4889d(@mui/base@5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/icons-material@6.0.0-alpha.13(@mui/material@6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)' : dependencies: '@babel/runtime': 7.24.7 '@mui/base': 5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/icons-material': 6.0.0-alpha.12(@mui/material@6.0.0-alpha.12(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + '@mui/icons-material': 6.0.0-alpha.13(@mui/material@6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/internal-markdown': 1.0.6 - '@mui/material': 6.0.0-alpha.12(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/system': 6.0.0-alpha.12(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + '@mui/material': 6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/system': 6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) clipboard-copy: 4.0.1 clsx: 2.1.1 next: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -11621,10 +11614,10 @@ snapshots: optionalDependencies: '@types/react': 18.3.3 - '@mui/icons-material@6.0.0-alpha.12(@mui/material@6.0.0-alpha.12(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)': + '@mui/icons-material@6.0.0-alpha.13(@mui/material@6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 - '@mui/material': 6.0.0-alpha.12(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/material': 6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 optionalDependencies: '@types/react': 18.3.3 @@ -11656,14 +11649,14 @@ snapshots: transitivePeerDependencies: - supports-color - '@mui/joy@5.0.0-beta.45(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mui/joy@5.0.0-beta.46(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 - '@mui/base': 5.0.0-beta.50(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/base': 5.0.0-beta.51(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/core-downloads-tracker': 6.0.0-dev.240424162023-9968b4889d - '@mui/system': 6.0.0-alpha.12(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + '@mui/system': 6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/types': 7.2.14(@types/react@18.3.3) - '@mui/utils': 6.0.0-alpha.12(@types/react@18.3.3)(react@18.3.1) + '@mui/utils': 6.0.0-alpha.13(@types/react@18.3.3)(react@18.3.1) clsx: 2.1.1 prop-types: 15.8.1 react: 18.3.1 @@ -11690,14 +11683,14 @@ snapshots: '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@types/react': 18.3.3 - '@mui/lab@6.0.0-alpha.12(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-alpha.12(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mui/lab@6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 - '@mui/base': 5.0.0-beta.50(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/material': 6.0.0-alpha.12(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/system': 6.0.0-alpha.12(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + '@mui/base': 5.0.0-beta.51(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/material': 6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/system': 6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/types': 7.2.14(@types/react@18.3.3) - '@mui/utils': 6.0.0-alpha.12(@types/react@18.3.3)(react@18.3.1) + '@mui/utils': 6.0.0-alpha.13(@types/react@18.3.3)(react@18.3.1) clsx: 2.1.1 prop-types: 15.8.1 react: 18.3.1 @@ -11718,10 +11711,10 @@ snapshots: '@emotion/server': 11.11.0 '@types/react': 18.3.3 - '@mui/material-nextjs@6.0.0-alpha.11(@emotion/cache@11.11.0)(@emotion/server@11.11.0)(@mui/material@6.0.0-alpha.12(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': + '@mui/material-nextjs@6.0.0-alpha.13(@emotion/cache@11.11.0)(@emotion/server@11.11.0)(@mui/material@6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 - '@mui/material': 6.0.0-alpha.12(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/material': 6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) next: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 optionalDependencies: @@ -11750,14 +11743,14 @@ snapshots: '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@types/react': 18.3.3 - '@mui/material@6.0.0-alpha.12(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mui/material@6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 - '@mui/base': 5.0.0-beta.50(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/base': 5.0.0-beta.51(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/core-downloads-tracker': 6.0.0-dev.240424162023-9968b4889d - '@mui/system': 6.0.0-alpha.12(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + '@mui/system': 6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/types': 7.2.14(@types/react@18.3.3) - '@mui/utils': 6.0.0-alpha.12(@types/react@18.3.3)(react@18.3.1) + '@mui/utils': 6.0.0-alpha.13(@types/react@18.3.3)(react@18.3.1) '@types/react-transition-group': 4.4.10 clsx: 2.1.1 csstype: 3.1.3 @@ -11795,10 +11788,10 @@ snapshots: optionalDependencies: '@types/react': 18.3.3 - '@mui/private-theming@6.0.0-dev.20240529-082515-213b5e33ab(@types/react@18.3.3)(react@18.3.1)': + '@mui/private-theming@6.0.0-alpha.13(@types/react@18.3.3)(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 - '@mui/utils': 6.0.0-dev.20240529-082515-213b5e33ab(@types/react@18.3.3)(react@18.3.1) + '@mui/utils': 6.0.0-alpha.13(@types/react@18.3.3)(react@18.3.1) prop-types: 15.8.1 react: 18.3.1 optionalDependencies: @@ -11815,7 +11808,7 @@ snapshots: '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1) '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) - '@mui/styled-engine@6.0.0-dev.20240529-082515-213b5e33ab(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)': + '@mui/styled-engine@6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 '@emotion/cache': 11.11.0 @@ -11826,13 +11819,13 @@ snapshots: '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1) '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) - '@mui/styles@6.0.0-alpha.12(@types/react@18.3.3)(react@18.3.1)': + '@mui/styles@6.0.0-alpha.13(@types/react@18.3.3)(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 '@emotion/hash': 0.9.1 - '@mui/private-theming': 6.0.0-dev.20240529-082515-213b5e33ab(@types/react@18.3.3)(react@18.3.1) + '@mui/private-theming': 6.0.0-alpha.13(@types/react@18.3.3)(react@18.3.1) '@mui/types': 7.2.14(@types/react@18.3.3) - '@mui/utils': 6.0.0-alpha.12(@types/react@18.3.3)(react@18.3.1) + '@mui/utils': 6.0.0-alpha.13(@types/react@18.3.3)(react@18.3.1) clsx: 2.1.1 csstype: 3.1.3 hoist-non-react-statics: 3.3.2 @@ -11865,13 +11858,13 @@ snapshots: '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@types/react': 18.3.3 - '@mui/system@6.0.0-alpha.12(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)': + '@mui/system@6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 - '@mui/private-theming': 6.0.0-dev.20240529-082515-213b5e33ab(@types/react@18.3.3)(react@18.3.1) - '@mui/styled-engine': 6.0.0-dev.20240529-082515-213b5e33ab(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1) + '@mui/private-theming': 6.0.0-alpha.13(@types/react@18.3.3)(react@18.3.1) + '@mui/styled-engine': 6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1) '@mui/types': 7.2.14(@types/react@18.3.3) - '@mui/utils': 6.0.0-alpha.12(@types/react@18.3.3)(react@18.3.1) + '@mui/utils': 6.0.0-alpha.13(@types/react@18.3.3)(react@18.3.1) clsx: 2.1.1 csstype: 3.1.3 prop-types: 15.8.1 @@ -11895,17 +11888,7 @@ snapshots: optionalDependencies: '@types/react': 18.3.3 - '@mui/utils@6.0.0-alpha.12(@types/react@18.3.3)(react@18.3.1)': - dependencies: - '@babel/runtime': 7.24.7 - '@types/prop-types': 15.7.12 - prop-types: 15.8.1 - react: 18.3.1 - react-is: 18.3.1 - optionalDependencies: - '@types/react': 18.3.3 - - '@mui/utils@6.0.0-dev.20240529-082515-213b5e33ab(@types/react@18.3.3)(react@18.3.1)': + '@mui/utils@6.0.0-alpha.13(@types/react@18.3.3)(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 '@types/prop-types': 15.7.12 @@ -11939,11 +11922,11 @@ snapshots: transitivePeerDependencies: - '@types/react' - '@mui/x-charts@7.7.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-alpha.12(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mui/x-charts@7.7.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 '@mui/base': 5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/material': 6.0.0-alpha.12(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/material': 6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/system': 5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/utils': 5.15.20(@types/react@18.3.3)(react@18.3.1) '@react-spring/rafz': 9.7.3 @@ -13422,15 +13405,15 @@ snapshots: transitivePeerDependencies: - supports-color - '@vitest/browser@2.0.0-beta.11(playwright@1.44.1)(typescript@5.5.2)(vitest@2.0.0-beta.11)': + '@vitest/browser@2.0.0-beta.12(playwright@1.44.1)(typescript@5.5.2)(vitest@2.0.0-beta.12)': dependencies: '@testing-library/dom': 10.1.0 '@testing-library/user-event': 14.5.2(@testing-library/dom@10.1.0) - '@vitest/utils': 2.0.0-beta.11 + '@vitest/utils': 2.0.0-beta.12 magic-string: 0.30.10 msw: 2.3.1(typescript@5.5.2) sirv: 2.0.4 - vitest: 2.0.0-beta.11(@types/node@20.14.8)(@vitest/browser@2.0.0-beta.11)(jsdom@24.1.0)(terser@5.31.0) + vitest: 2.0.0-beta.12(@types/node@20.14.8)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.0) ws: 8.17.1 optionalDependencies: playwright: 1.44.1 @@ -13439,7 +13422,7 @@ snapshots: - typescript - utf-8-validate - '@vitest/coverage-v8@2.0.0-beta.11(vitest@2.0.0-beta.11(@types/node@20.14.8)(@vitest/browser@2.0.0-beta.11)(jsdom@24.1.0)(terser@5.31.0))': + '@vitest/coverage-v8@2.0.0-beta.12(vitest@2.0.0-beta.12(@types/node@20.14.8)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.0))': dependencies: '@ampproject/remapping': 2.3.0 '@bcoe/v8-coverage': 0.2.3 @@ -13454,33 +13437,33 @@ snapshots: std-env: 3.7.0 strip-literal: 2.1.0 test-exclude: 7.0.1 - vitest: 2.0.0-beta.11(@types/node@20.14.8)(@vitest/browser@2.0.0-beta.11)(jsdom@24.1.0)(terser@5.31.0) + vitest: 2.0.0-beta.12(@types/node@20.14.8)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.0) transitivePeerDependencies: - supports-color - '@vitest/expect@2.0.0-beta.11': + '@vitest/expect@2.0.0-beta.12': dependencies: - '@vitest/spy': 2.0.0-beta.11 - '@vitest/utils': 2.0.0-beta.11 + '@vitest/spy': 2.0.0-beta.12 + '@vitest/utils': 2.0.0-beta.12 chai: 5.1.1 - '@vitest/runner@2.0.0-beta.11': + '@vitest/runner@2.0.0-beta.12': dependencies: - '@vitest/utils': 2.0.0-beta.11 + '@vitest/utils': 2.0.0-beta.12 p-limit: 5.0.0 pathe: 1.1.2 - '@vitest/snapshot@2.0.0-beta.11': + '@vitest/snapshot@2.0.0-beta.12': dependencies: magic-string: 0.30.10 pathe: 1.1.2 pretty-format: 29.7.0 - '@vitest/spy@2.0.0-beta.11': + '@vitest/spy@2.0.0-beta.12': dependencies: tinyspy: 3.0.0 - '@vitest/utils@2.0.0-beta.11': + '@vitest/utils@2.0.0-beta.12': dependencies: diff-sequences: 29.6.3 estree-walker: 3.0.3 @@ -15247,7 +15230,7 @@ snapshots: globals: 13.24.0 rambda: 7.5.0 - eslint-plugin-react-compiler@0.0.0-experimental-51a85ea-20240601(eslint@8.57.0): + eslint-plugin-react-compiler@0.0.0-experimental-0998c1e-20240625(eslint@8.57.0): dependencies: '@babel/core': 7.24.7 '@babel/parser': 7.24.7 @@ -19877,7 +19860,7 @@ snapshots: d3-time: 3.1.0 d3-timer: 3.0.1 - vite-node@2.0.0-beta.11(@types/node@20.14.8)(terser@5.31.0): + vite-node@2.0.0-beta.12(@types/node@20.14.8)(terser@5.31.0): dependencies: cac: 6.7.14 debug: 4.3.5 @@ -19904,7 +19887,7 @@ snapshots: fsevents: 2.3.3 terser: 5.31.0 - vitest-dom@0.1.1(vitest@2.0.0-beta.11(@types/node@20.14.8)(@vitest/browser@2.0.0-beta.11)(jsdom@24.1.0)(terser@5.31.0)): + vitest-dom@0.1.1(vitest@2.0.0-beta.12(@types/node@20.14.8)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.0)): dependencies: aria-query: 5.3.0 chalk: 5.3.0 @@ -19912,22 +19895,22 @@ snapshots: dom-accessibility-api: 0.6.3 lodash-es: 4.17.21 redent: 4.0.0 - vitest: 2.0.0-beta.11(@types/node@20.14.8)(@vitest/browser@2.0.0-beta.11)(jsdom@24.1.0)(terser@5.31.0) + vitest: 2.0.0-beta.12(@types/node@20.14.8)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.0) - vitest-fail-on-console@0.7.0(vite@5.3.1(@types/node@20.14.8)(terser@5.31.0))(vitest@2.0.0-beta.11(@types/node@20.14.8)(@vitest/browser@2.0.0-beta.11)(jsdom@24.1.0)(terser@5.31.0)): + vitest-fail-on-console@0.7.0(vite@5.3.1(@types/node@20.14.8)(terser@5.31.0))(vitest@2.0.0-beta.12(@types/node@20.14.8)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.0)): dependencies: chalk: 5.3.0 vite: 5.3.1(@types/node@20.14.8)(terser@5.31.0) - vitest: 2.0.0-beta.11(@types/node@20.14.8)(@vitest/browser@2.0.0-beta.11)(jsdom@24.1.0)(terser@5.31.0) + vitest: 2.0.0-beta.12(@types/node@20.14.8)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.0) - vitest@2.0.0-beta.11(@types/node@20.14.8)(@vitest/browser@2.0.0-beta.11)(jsdom@24.1.0)(terser@5.31.0): + vitest@2.0.0-beta.12(@types/node@20.14.8)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.0): dependencies: '@ampproject/remapping': 2.3.0 - '@vitest/expect': 2.0.0-beta.11 - '@vitest/runner': 2.0.0-beta.11 - '@vitest/snapshot': 2.0.0-beta.11 - '@vitest/spy': 2.0.0-beta.11 - '@vitest/utils': 2.0.0-beta.11 + '@vitest/expect': 2.0.0-beta.12 + '@vitest/runner': 2.0.0-beta.12 + '@vitest/snapshot': 2.0.0-beta.12 + '@vitest/spy': 2.0.0-beta.12 + '@vitest/utils': 2.0.0-beta.12 chai: 5.1.1 debug: 4.3.5 execa: 8.0.1 @@ -19938,11 +19921,11 @@ snapshots: tinybench: 2.8.0 tinypool: 1.0.0 vite: 5.3.1(@types/node@20.14.8)(terser@5.31.0) - vite-node: 2.0.0-beta.11(@types/node@20.14.8)(terser@5.31.0) + vite-node: 2.0.0-beta.12(@types/node@20.14.8)(terser@5.31.0) why-is-node-running: 2.2.2 optionalDependencies: '@types/node': 20.14.8 - '@vitest/browser': 2.0.0-beta.11(playwright@1.44.1)(typescript@5.5.2)(vitest@2.0.0-beta.11) + '@vitest/browser': 2.0.0-beta.12(playwright@1.44.1)(typescript@5.5.2)(vitest@2.0.0-beta.12) jsdom: 24.1.0 transitivePeerDependencies: - less diff --git a/scripts/generateProptypes.ts b/scripts/generateProptypes.ts index a2ea1206e91..b0e80ecefad 100644 --- a/scripts/generateProptypes.ts +++ b/scripts/generateProptypes.ts @@ -48,7 +48,6 @@ async function generateProptypes( if ( name.toLowerCase().endsWith('classes') || name === 'theme' || - name === 'themes' || name === 'ownerState' || (name.endsWith('Props') && name !== 'componentsProps' && name !== 'slotProps') ) { From 16b3ac50f91f4bd10af48dbe3e162c45e80c329e Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Thu, 27 Jun 2024 19:22:59 +0100 Subject: [PATCH 06/42] Finally found fix for dark theme console errors --- .../src/AppProvider/AppThemeProvider.tsx | 14 +++++++------- .../src/DashboardLayout/DashboardLayout.tsx | 5 ++++- packages/toolpad-core/src/themes/baseTheme.ts | 5 ++++- 3 files changed, 15 insertions(+), 9 deletions(-) diff --git a/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx b/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx index a65e1ac7620..6ad02675f15 100644 --- a/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx +++ b/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx @@ -118,12 +118,9 @@ function CSSVarsThemeProvider(props: CSSVarsThemeProviderProps) { const isDualTheme = 'light' in theme.colorSchemes && 'dark' in theme.colorSchemes; return ( - - {getInitColorSchemeScript()} - - {children} - - + + {children} + ); } @@ -148,7 +145,10 @@ function AppThemeProvider(props: AppThemeProviderProps) { ); return isCSSVarsTheme ? ( - {themeChildren} + + {getInitColorSchemeScript()} + {themeChildren} + ) : ( {themeChildren} ); diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx index 054fe0ae44f..176fac6e54a 100644 --- a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx +++ b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx @@ -235,7 +235,10 @@ function DashboardLayout(props: DashboardLayoutProps) { {branding?.logo ?? } - theme.palette.primary.main }}> + (theme.vars ?? theme).palette.primary.main }} + > {branding?.title ?? 'Toolpad'} diff --git a/packages/toolpad-core/src/themes/baseTheme.ts b/packages/toolpad-core/src/themes/baseTheme.ts index 0a0b4456e49..4a948bf4c91 100644 --- a/packages/toolpad-core/src/themes/baseTheme.ts +++ b/packages/toolpad-core/src/themes/baseTheme.ts @@ -1,6 +1,7 @@ import { experimental_extendTheme as extendTheme } from '@mui/material/styles'; +import type {} from '@mui/material/themeCssVarsAugmentation'; -export const baseTheme = extendTheme({ +const baseTheme = extendTheme({ colorSchemes: { light: { palette: { @@ -138,3 +139,5 @@ export const baseTheme = extendTheme({ }, }, }); + +export { baseTheme }; From 45f85000bed78735a7320655b23b5b0689185460 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Thu, 27 Jun 2024 19:33:38 +0100 Subject: [PATCH 07/42] Adjustments --- packages/create-toolpad-app/src/generateProject.ts | 2 +- packages/toolpad-core/src/themes/baseTheme.ts | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/create-toolpad-app/src/generateProject.ts b/packages/create-toolpad-app/src/generateProject.ts index a06fe9ac40d..288b4dea5a3 100644 --- a/packages/create-toolpad-app/src/generateProject.ts +++ b/packages/create-toolpad-app/src/generateProject.ts @@ -29,7 +29,7 @@ export default function generateProject( export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) { return ( - + diff --git a/packages/toolpad-core/src/themes/baseTheme.ts b/packages/toolpad-core/src/themes/baseTheme.ts index 4a948bf4c91..fe1d42c4536 100644 --- a/packages/toolpad-core/src/themes/baseTheme.ts +++ b/packages/toolpad-core/src/themes/baseTheme.ts @@ -33,14 +33,12 @@ const baseTheme = extendTheme({ MuiAppBar: { styleOverrides: { root: ({ theme }) => ({ + backgroundColor: theme.vars.palette.background.paper, borderWidth: 0, borderBottomWidth: 1, borderStyle: 'solid', borderColor: theme.vars.palette.divider, boxShadow: 'none', - [theme.getColorSchemeSelector('dark')]: { - backgroundColor: theme.vars.palette.background.paper, - }, }), }, }, From 71d3f7f58d1a08a02e721a55c782c33542e1061a Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Fri, 28 Jun 2024 16:10:59 +0100 Subject: [PATCH 08/42] Improve AppProvider docs in general --- .../components/app-provider/app-provider.md | 56 ++++++++++++++++++- .../api-docs/app-provider/app-provider.json | 2 +- .../src/AppProvider/AppProvider.tsx | 2 +- 3 files changed, 56 insertions(+), 4 deletions(-) diff --git a/docs/data/toolpad/core/components/app-provider/app-provider.md b/docs/data/toolpad/core/components/app-provider/app-provider.md index a2747fdda35..1267198a830 100644 --- a/docs/data/toolpad/core/components/app-provider/app-provider.md +++ b/docs/data/toolpad/core/components/app-provider/app-provider.md @@ -8,18 +8,70 @@ components: AppProvider

The app provider component provides the necessary context for a Toolpad application, such as routing, navigation and theming.

+By wrapping an application at the root level with an `AppProvider` component, many of Toolpad's features can be automatically enabled to their fullest extent, abstracting away complexity and helping you focus on the details that matter. + +It is not mandatory that every application is wrapped in an `AppProvider`, but it is highly recommended for most apps that use Toolpad. + ## Basic -Wrap the whole application with the `AppProvider` component to enable many of Toolpad's features. +Wrap an application page with the `AppProvider` component to enable many of Toolpad's features. + +Ideally, the `AppProvider` should wrap every page in the application, therefore in most projects it should be imported and placed in the file that defines a **shared layout** for all pages. + +In the following example, placing a `DashboardLayout` component inside an `AppProvider` automatically enables many of the navigation and routing capabilities of the `DashboardLayout`. {{"demo": "AppProviderBasic.js", "height": 500, "iframe": true}} +## Theming + ## Next.js -The `AppProvider` for Next.js applications includes routing out-of-the-box. +The `AppProvider` for Next.js applications includes some Next.js integrations out-of-the-box. + +By using the specific `AppProvider` for Next.js you do not have to manually configure the integration between some Toolpad features and the corresponding Next.js features (such as routing), making the integration automatic and seamless. ```tsx import { AppProvider } from '@toolpad/core/nextjs/AppProvider'; // or import { AppProvider } from '@toolpad/core/nextjs'; ``` + +### Next.js App Router + +When using the Next.js App Router, the most typical file where to import and use `AppProvider` will be at the top level `app/layout.tsx` file that defines the layout for all the application pages. + +```tsx +// app/layout.tsx +import { AppProvider } from '@toolpad/core/nextjs/AppProvider'; + +export default function Layout(props) { + const { children } = props; + + return ( + + + {children} + + + ); +} +``` + +### Next.js Pages Router + +When using the Next.js Pages Router, the most typical file where to import and use `AppProvider` in order to wrap every page in the application will be the `pages/_app.tsx` file. + +```tsx +// pages/_app.tsx +import { AppProvider } from '@toolpad/core/nextjs/AppProvider'; + +export default function App(props) { + const { Component, pageProps } = props; + + return ( + + + + ); +} +``` diff --git a/docs/translations/api-docs/app-provider/app-provider.json b/docs/translations/api-docs/app-provider/app-provider.json index c9a8d257b26..b0380881876 100644 --- a/docs/translations/api-docs/app-provider/app-provider.json +++ b/docs/translations/api-docs/app-provider/app-provider.json @@ -6,7 +6,7 @@ "navigation": { "description": "Navigation definition for the app." }, "router": { "description": "Router implementation used inside Toolpad components." }, "theme": { - "description": "Theme used by the app." + "description": "Theme to be used by the app in light/dark mode." } }, "classDescriptions": {} diff --git a/packages/toolpad-core/src/AppProvider/AppProvider.tsx b/packages/toolpad-core/src/AppProvider/AppProvider.tsx index 436ebd03e55..0e82396f064 100644 --- a/packages/toolpad-core/src/AppProvider/AppProvider.tsx +++ b/packages/toolpad-core/src/AppProvider/AppProvider.tsx @@ -168,7 +168,7 @@ AppProvider.propTypes /* remove-proptypes */ = { searchParams: PropTypes.instanceOf(URLSearchParams), }), /** - * [Theme](https://mui.com/material-ui/customization/theming/) used by the app. + * [Theme](https://mui.com/material-ui/customization/theming/) to be used by the app in light/dark mode. * @default baseTheme */ theme: PropTypes.object, From 42d208a704cfb76f6f8ac3d7195e5bdc9618b430 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Mon, 1 Jul 2024 19:05:08 +0100 Subject: [PATCH 09/42] Improve docs more, document theming, still need to fix theme and theme switcher inside docs --- .../app-provider/AppProviderBasic.tsx | 4 +- .../app-provider/AppProviderTheme.js | 193 ++++++++++++ .../app-provider/AppProviderTheme.tsx | 194 ++++++++++++ .../components/app-provider/app-provider.md | 34 ++- .../dashboard-layout/DashboardLayoutBasic.js | 2 + .../dashboard-layout/DashboardLayoutBasic.tsx | 2 + .../DashboardLayoutBasic.tsx.preview | 26 +- .../DashboardLayoutBranding.js | 16 +- .../DashboardLayoutBranding.tsx | 18 +- .../DashboardLayoutBranding.tsx.preview | 33 +- .../DashboardLayoutNavigation.js | 287 ++++++++--------- .../DashboardLayoutNavigation.tsx | 288 +++++++++--------- .../DashboardLayoutNavigation.tsx.preview | 168 +++++++++- .../dashboard-layout/dashboard-layout.md | 23 +- .../api-docs/app-provider/app-provider.json | 2 +- .../src/AppProvider/AppProvider.tsx | 4 +- 16 files changed, 942 insertions(+), 352 deletions(-) create mode 100644 docs/data/toolpad/core/components/app-provider/AppProviderTheme.js create mode 100644 docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx index 81344a07f7e..24bcb89c01f 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx +++ b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx @@ -3,9 +3,9 @@ import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import DashboardIcon from '@mui/icons-material/Dashboard'; import TimelineIcon from '@mui/icons-material/Timeline'; -import { AppProvider, Router } from '@toolpad/core/AppProvider'; +import { AppProvider } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; -import type { Navigation } from '@toolpad/core'; +import type { Navigation, Router } from '@toolpad/core'; const NAVIGATION: Navigation = [ { diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js new file mode 100644 index 00000000000..6a201da89a3 --- /dev/null +++ b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js @@ -0,0 +1,193 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Typography from '@mui/material/Typography'; +import { experimental_extendTheme as extendTheme } from '@mui/material/styles'; +import DashboardIcon from '@mui/icons-material/Dashboard'; +import TimelineIcon from '@mui/icons-material/Timeline'; +import { AppProvider } from '@toolpad/core/AppProvider'; +import { DashboardLayout } from '@toolpad/core/DashboardLayout'; + +const NAVIGATION = [ + { + kind: 'header', + title: 'Main items', + }, + { + slug: '/page', + title: 'Page', + icon: , + }, + { + slug: '/page-2', + title: 'Page 2', + icon: , + }, +]; + +const theme = extendTheme({ + colorSchemes: { + light: { + palette: { + background: { + default: 'var(--mui-palette-grey-50)', + defaultChannel: 'var(--mui-palette-grey-50)', + }, + }, + }, + dark: { + palette: { + background: { + default: 'var(--mui-palette-grey-900)', + defaultChannel: 'var(--mui-palette-grey-900)', + }, + text: { + primary: 'var(--mui-palette-grey-200)', + primaryChannel: 'var(--mui-palette-grey-200)', + }, + }, + }, + }, + typography: { + h6: { + fontWeight: '700', + }, + }, + components: { + MuiAppBar: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundColor: theme.vars.palette.background.paper, + borderWidth: 0, + borderBottomWidth: 1, + borderStyle: 'solid', + borderColor: theme.vars.palette.divider, + boxShadow: 'none', + }), + }, + }, + MuiToolbar: { + styleOverrides: { + root: { + backgroundColor: 'inherit', + }, + }, + }, + MuiList: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, + MuiIconButton: { + styleOverrides: { + root: ({ theme }) => ({ + color: theme.vars.palette.primary.dark, + padding: 8, + }), + }, + }, + MuiListSubheader: { + styleOverrides: { + root: ({ theme }) => ({ + color: theme.vars.palette.grey['600'], + fontSize: 12, + fontWeight: '700', + height: 40, + paddingLeft: 32, + [theme.getColorSchemeSelector('dark')]: { + color: theme.vars.palette.grey['500'], + }, + }), + }, + }, + MuiListItem: { + styleOverrides: { + root: { + paddingTop: 0, + paddingBottom: 0, + }, + }, + }, + MuiListItemButton: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: 8, + '&.Mui-selected': { + '& .MuiListItemIcon-root': { + color: theme.vars.palette.primary.dark, + }, + '& .MuiTypography-root': { + color: theme.vars.palette.primary.dark, + }, + '& .MuiSvgIcon-root': { + color: theme.vars.palette.primary.dark, + }, + '& .MuiTouchRipple-child': { + backgroundColor: theme.vars.palette.primary.dark, + }, + }, + '& .MuiSvgIcon-root': { + color: theme.vars.palette.action.active, + }, + }), + }, + }, + MuiListItemText: { + styleOverrides: { + root: { + '& .MuiTypography-root': { + fontWeight: '500', + }, + }, + }, + }, + MuiListItemIcon: { + styleOverrides: { + root: { + minWidth: 34, + }, + }, + }, + MuiDivider: { + styleOverrides: { + root: { + borderBottomWidth: 2, + marginLeft: '16px', + marginRight: '16px', + }, + }, + }, + }, +}); + +export default function AppProviderTheme() { + const [pathname, setPathname] = React.useState('/page'); + + const router = React.useMemo(() => { + return { + pathname, + searchParams: new URLSearchParams(), + navigate: (path) => setPathname(String(path)), + }; + }, [pathname]); + + return ( + // preview-start + + + + Dashboard content for {pathname} + + + + // preview-end + ); +} diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx new file mode 100644 index 00000000000..b2a328cf6e8 --- /dev/null +++ b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx @@ -0,0 +1,194 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Typography from '@mui/material/Typography'; +import { experimental_extendTheme as extendTheme } from '@mui/material/styles'; +import DashboardIcon from '@mui/icons-material/Dashboard'; +import TimelineIcon from '@mui/icons-material/Timeline'; +import { AppProvider } from '@toolpad/core/AppProvider'; +import { DashboardLayout } from '@toolpad/core/DashboardLayout'; +import type { Navigation, Router } from '@toolpad/core'; + +const NAVIGATION: Navigation = [ + { + kind: 'header', + title: 'Main items', + }, + { + slug: '/page', + title: 'Page', + icon: , + }, + { + slug: '/page-2', + title: 'Page 2', + icon: , + }, +]; + +const theme = extendTheme({ + colorSchemes: { + light: { + palette: { + background: { + default: 'var(--mui-palette-grey-50)', + defaultChannel: 'var(--mui-palette-grey-50)', + }, + }, + }, + dark: { + palette: { + background: { + default: 'var(--mui-palette-grey-900)', + defaultChannel: 'var(--mui-palette-grey-900)', + }, + text: { + primary: 'var(--mui-palette-grey-200)', + primaryChannel: 'var(--mui-palette-grey-200)', + }, + }, + }, + }, + typography: { + h6: { + fontWeight: '700', + }, + }, + components: { + MuiAppBar: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundColor: theme.vars.palette.background.paper, + borderWidth: 0, + borderBottomWidth: 1, + borderStyle: 'solid', + borderColor: theme.vars.palette.divider, + boxShadow: 'none', + }), + }, + }, + MuiToolbar: { + styleOverrides: { + root: { + backgroundColor: 'inherit', + }, + }, + }, + MuiList: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, + MuiIconButton: { + styleOverrides: { + root: ({ theme }) => ({ + color: theme.vars.palette.primary.dark, + padding: 8, + }), + }, + }, + MuiListSubheader: { + styleOverrides: { + root: ({ theme }) => ({ + color: theme.vars.palette.grey['600'], + fontSize: 12, + fontWeight: '700', + height: 40, + paddingLeft: 32, + [theme.getColorSchemeSelector('dark')]: { + color: theme.vars.palette.grey['500'], + }, + }), + }, + }, + MuiListItem: { + styleOverrides: { + root: { + paddingTop: 0, + paddingBottom: 0, + }, + }, + }, + MuiListItemButton: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: 8, + '&.Mui-selected': { + '& .MuiListItemIcon-root': { + color: theme.vars.palette.primary.dark, + }, + '& .MuiTypography-root': { + color: theme.vars.palette.primary.dark, + }, + '& .MuiSvgIcon-root': { + color: theme.vars.palette.primary.dark, + }, + '& .MuiTouchRipple-child': { + backgroundColor: theme.vars.palette.primary.dark, + }, + }, + '& .MuiSvgIcon-root': { + color: theme.vars.palette.action.active, + }, + }), + }, + }, + MuiListItemText: { + styleOverrides: { + root: { + '& .MuiTypography-root': { + fontWeight: '500', + }, + }, + }, + }, + MuiListItemIcon: { + styleOverrides: { + root: { + minWidth: 34, + }, + }, + }, + MuiDivider: { + styleOverrides: { + root: { + borderBottomWidth: 2, + marginLeft: '16px', + marginRight: '16px', + }, + }, + }, + }, +}); + +export default function AppProviderTheme() { + const [pathname, setPathname] = React.useState('/page'); + + const router = React.useMemo(() => { + return { + pathname, + searchParams: new URLSearchParams(), + navigate: (path) => setPathname(String(path)), + }; + }, [pathname]); + + return ( + // preview-start + + + + Dashboard content for {pathname} + + + + // preview-end + ); +} diff --git a/docs/data/toolpad/core/components/app-provider/app-provider.md b/docs/data/toolpad/core/components/app-provider/app-provider.md index 1267198a830..557f2d0208a 100644 --- a/docs/data/toolpad/core/components/app-provider/app-provider.md +++ b/docs/data/toolpad/core/components/app-provider/app-provider.md @@ -6,24 +6,22 @@ components: AppProvider # App Provider -

The app provider component provides the necessary context for a Toolpad application, such as routing, navigation and theming.

+

The app provider component provides the necessary context to easily set up a Toolpad application.

-By wrapping an application at the root level with an `AppProvider` component, many of Toolpad's features can be automatically enabled to their fullest extent, abstracting away complexity and helping you focus on the details that matter. +By wrapping an application at the root level with an `AppProvider` component, many of Toolpad's features (such as routing, navigation and theming) can be automatically enabled to their fullest extent, abstracting away complexity and helping you focus on the details that matter. It is not mandatory that every application is wrapped in an `AppProvider`, but it is highly recommended for most apps that use Toolpad. ## Basic -Wrap an application page with the `AppProvider` component to enable many of Toolpad's features. +Wrap an application page with the `AppProvider` component. Ideally, the `AppProvider` should wrap every page in the application, therefore in most projects it should be imported and placed in the file that defines a **shared layout** for all pages. -In the following example, placing a `DashboardLayout` component inside an `AppProvider` automatically enables many of the navigation and routing capabilities of the `DashboardLayout`. +In the following example, an `AppProvider` component wrapping the page provides it with a default theme, and a `DashboardLayout` placed inside it gets its navigation and routing features automatically set based on the props passed to the `AppProvider`. {{"demo": "AppProviderBasic.js", "height": 500, "iframe": true}} -## Theming - ## Next.js The `AppProvider` for Next.js applications includes some Next.js integrations out-of-the-box. @@ -38,10 +36,11 @@ import { AppProvider } from '@toolpad/core/nextjs'; ### Next.js App Router -When using the Next.js App Router, the most typical file where to import and use `AppProvider` will be at the top level `app/layout.tsx` file that defines the layout for all the application pages. +When using the **Next.js App Router**, the most typical file where to import and use `AppProvider` will be at the top level `app/layout.tsx` file that defines the layout for all the application pages. ```tsx // app/layout.tsx + import { AppProvider } from '@toolpad/core/nextjs/AppProvider'; export default function Layout(props) { @@ -59,10 +58,11 @@ export default function Layout(props) { ### Next.js Pages Router -When using the Next.js Pages Router, the most typical file where to import and use `AppProvider` in order to wrap every page in the application will be the `pages/_app.tsx` file. +When using the **Next.js Pages Router**, the most typical file where to import and use `AppProvider` in order to wrap every page in the application will be the `pages/_app.tsx` file. ```tsx // pages/_app.tsx + import { AppProvider } from '@toolpad/core/nextjs/AppProvider'; export default function App(props) { @@ -75,3 +75,21 @@ export default function App(props) { ); } ``` + +## Theming + +An `AppProvider` can set a visual theme for all elements inside it to adopt via the `theme` prop. This prop can be set in a few distinct ways with different advantages and disadvantages: + +1. [CSS Variables Theme](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/): the default and recommended theming option for Toolpad applications, as despite being an experimental feature it is the only option that prevents issues such as [dark-mode SSR flickering](https://github.com/mui/material-ui/issues/27651), and it supports both light and dark mode with a single theme definition. The provided default theme in Toolpad, as well as any theme that can be imported from `@toolpad-core/themes` are already in this format. +2. [Standard Material UI Theme](https://mui.com/material-ui/customization/theming/): a single standard Material UI theme can be provided as the only theme to be used. +3. **Light and dark themes**: two separate Material UI themes can be provided for light and dark mode in an object with the format `{ light: Theme, dark: Theme }` + +{{"demo": "AppProviderTheme.js", "height": 500, "iframe": true}} + +### Predefined themes + +A set of predefined themes that work well with Toolpad applications can be imported: + +```tsx +import { baseTheme } from '@toolpad-core/themes'; +``` diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js index 25d3e62948b..77cd1d86fd6 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js @@ -67,6 +67,7 @@ export default function DashboardLayoutBasic() { }, [pathname]); return ( + // preview-start + // preview-end ); } diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx index 73d1000def8..bd6e753c034 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx @@ -68,6 +68,7 @@ export default function DashboardLayoutBasic() { }, [pathname]); return ( + // preview-start + // preview-end ); } diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx.preview index 519caf4aa97..00133b63b69 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx.preview +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx.preview @@ -1,12 +1,14 @@ - - - Dashboard content for {pathname} - - \ No newline at end of file + + + + Dashboard content for {pathname} + + + \ No newline at end of file diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js index 92a7020bb29..0e044a296de 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js @@ -19,11 +19,6 @@ const NAVIGATION = [ }, ]; -const BRANDING = { - logo: MUI logo, - title: 'MUI', -}; - export default function DashboardLayoutBranding() { const [pathname, setPathname] = React.useState('/page'); @@ -36,7 +31,15 @@ export default function DashboardLayoutBranding() { }, [pathname]); return ( - + // preview-start + , + title: 'MUI', + }} + router={router} + > + // preview-end ); } diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx index b2561a7d9e2..354b59979b0 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx @@ -5,7 +5,7 @@ import DashboardIcon from '@mui/icons-material/Dashboard'; import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'; import { AppProvider, Router } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; -import type { Navigation, Branding } from '@toolpad/core'; +import type { Navigation } from '@toolpad/core'; const NAVIGATION: Navigation = [ { @@ -20,11 +20,6 @@ const NAVIGATION: Navigation = [ }, ]; -const BRANDING: Branding = { - logo: MUI logo, - title: 'MUI', -}; - export default function DashboardLayoutBranding() { const [pathname, setPathname] = React.useState('/page'); @@ -37,7 +32,15 @@ export default function DashboardLayoutBranding() { }, [pathname]); return ( - + // preview-start + , + title: 'MUI', + }} + router={router} + > + // preview-end ); } diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx.preview index 519caf4aa97..a44e6f38bf0 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx.preview +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx.preview @@ -1,12 +1,21 @@ - - - Dashboard content for {pathname} - - \ No newline at end of file +, + title: 'MUI', + }} + router={router} +> + + + Dashboard content for {pathname} + + + \ No newline at end of file diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js index e46490549d5..fa7769213c5 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js @@ -6,147 +6,6 @@ import FolderIcon from '@mui/icons-material/Folder'; import { AppProvider } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; -const NAVIGATION = [ - { - slug: '/home', - title: 'Home', - icon: , - }, - { - slug: '/about', - title: 'About Us', - icon: , - }, - { - slug: '/movies', - title: 'Movies', - icon: , - children: [ - { - slug: '/fantasy', - title: 'Fantasy', - icon: , - children: [ - { - kind: 'header', - title: 'Epic Fantasy', - }, - { - slug: '/lord-of-the-rings', - title: 'Lord of the Rings', - icon: , - }, - { - slug: '/harry-potter', - title: 'Harry Potter', - icon: , - }, - { kind: 'divider' }, - { - kind: 'header', - title: 'Modern Fantasy', - }, - { - slug: '/chronicles-of-narnia', - title: 'Chronicles of Narnia', - icon: , - }, - ], - }, - { - slug: '/action', - title: 'Action', - icon: , - children: [ - { - slug: '/mad-max', - title: 'Mad Max', - icon: , - }, - { - slug: '/die-hard', - title: 'Die Hard', - icon: , - }, - ], - }, - { - slug: '/sci-fi', - title: 'Sci-Fi', - icon: , - children: [ - { - slug: '/star-wars', - title: 'Star Wars', - icon: , - }, - { - slug: '/matrix', - title: 'The Matrix', - icon: , - }, - ], - }, - ], - }, - { kind: 'divider' }, - { - kind: 'header', - title: 'Animals', - }, - { - slug: '/mammals', - title: 'Mammals', - icon: , - children: [ - { - slug: '/lion', - title: 'Lion', - icon: , - }, - { - slug: '/elephant', - title: 'Elephant', - icon: , - }, - ], - }, - { - slug: '/birds', - title: 'Birds', - icon: , - children: [ - { - slug: '/eagle', - title: 'Eagle', - icon: , - }, - { - slug: '/parrot', - title: 'Parrot', - icon: , - }, - ], - }, - { - slug: '/reptiles', - title: 'Reptiles', - icon: , - children: [ - { - slug: '/crocodile', - title: 'Crocodile', - icon: , - }, - { - slug: '/snake', - title: 'Snake', - icon: , - }, - ], - }, -]; - export default function DashboardLayoutNavigation() { const [pathname, setPathname] = React.useState('/page'); @@ -159,7 +18,150 @@ export default function DashboardLayoutNavigation() { }, [pathname]); return ( - + // preview-start + , + }, + { + slug: '/about', + title: 'About Us', + icon: , + }, + { + slug: '/movies', + title: 'Movies', + icon: , + children: [ + { + slug: '/fantasy', + title: 'Fantasy', + icon: , + children: [ + { + kind: 'header', + title: 'Epic Fantasy', + }, + { + slug: '/lord-of-the-rings', + title: 'Lord of the Rings', + icon: , + }, + { + slug: '/harry-potter', + title: 'Harry Potter', + icon: , + }, + { kind: 'divider' }, + { + kind: 'header', + title: 'Modern Fantasy', + }, + { + slug: '/chronicles-of-narnia', + title: 'Chronicles of Narnia', + icon: , + }, + ], + }, + { + slug: '/action', + title: 'Action', + icon: , + children: [ + { + slug: '/mad-max', + title: 'Mad Max', + icon: , + }, + { + slug: '/die-hard', + title: 'Die Hard', + icon: , + }, + ], + }, + { + slug: '/sci-fi', + title: 'Sci-Fi', + icon: , + children: [ + { + slug: '/star-wars', + title: 'Star Wars', + icon: , + }, + { + slug: '/matrix', + title: 'The Matrix', + icon: , + }, + ], + }, + ], + }, + { kind: 'divider' }, + { + kind: 'header', + title: 'Animals', + }, + { + slug: '/mammals', + title: 'Mammals', + icon: , + children: [ + { + slug: '/lion', + title: 'Lion', + icon: , + }, + { + slug: '/elephant', + title: 'Elephant', + icon: , + }, + ], + }, + { + slug: '/birds', + title: 'Birds', + icon: , + children: [ + { + slug: '/eagle', + title: 'Eagle', + icon: , + }, + { + slug: '/parrot', + title: 'Parrot', + icon: , + }, + ], + }, + { + slug: '/reptiles', + title: 'Reptiles', + icon: , + children: [ + { + slug: '/crocodile', + title: 'Crocodile', + icon: , + }, + { + slug: '/snake', + title: 'Snake', + icon: , + }, + ], + }, + ]} + router={router} + > + // preview-end ); } diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx index b1d7dee9e19..76cdfeeeed2 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx @@ -5,148 +5,6 @@ import DescriptionIcon from '@mui/icons-material/Description'; import FolderIcon from '@mui/icons-material/Folder'; import { AppProvider, Router } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; -import type { Navigation } from '@toolpad/core'; - -const NAVIGATION: Navigation = [ - { - slug: '/home', - title: 'Home', - icon: , - }, - { - slug: '/about', - title: 'About Us', - icon: , - }, - { - slug: '/movies', - title: 'Movies', - icon: , - children: [ - { - slug: '/fantasy', - title: 'Fantasy', - icon: , - children: [ - { - kind: 'header', - title: 'Epic Fantasy', - }, - { - slug: '/lord-of-the-rings', - title: 'Lord of the Rings', - icon: , - }, - { - slug: '/harry-potter', - title: 'Harry Potter', - icon: , - }, - { kind: 'divider' }, - { - kind: 'header', - title: 'Modern Fantasy', - }, - { - slug: '/chronicles-of-narnia', - title: 'Chronicles of Narnia', - icon: , - }, - ], - }, - { - slug: '/action', - title: 'Action', - icon: , - children: [ - { - slug: '/mad-max', - title: 'Mad Max', - icon: , - }, - { - slug: '/die-hard', - title: 'Die Hard', - icon: , - }, - ], - }, - { - slug: '/sci-fi', - title: 'Sci-Fi', - icon: , - children: [ - { - slug: '/star-wars', - title: 'Star Wars', - icon: , - }, - { - slug: '/matrix', - title: 'The Matrix', - icon: , - }, - ], - }, - ], - }, - { kind: 'divider' }, - { - kind: 'header', - title: 'Animals', - }, - { - slug: '/mammals', - title: 'Mammals', - icon: , - children: [ - { - slug: '/lion', - title: 'Lion', - icon: , - }, - { - slug: '/elephant', - title: 'Elephant', - icon: , - }, - ], - }, - { - slug: '/birds', - title: 'Birds', - icon: , - children: [ - { - slug: '/eagle', - title: 'Eagle', - icon: , - }, - { - slug: '/parrot', - title: 'Parrot', - icon: , - }, - ], - }, - { - slug: '/reptiles', - title: 'Reptiles', - icon: , - children: [ - { - slug: '/crocodile', - title: 'Crocodile', - icon: , - }, - { - slug: '/snake', - title: 'Snake', - icon: , - }, - ], - }, -]; export default function DashboardLayoutNavigation() { const [pathname, setPathname] = React.useState('/page'); @@ -160,7 +18,150 @@ export default function DashboardLayoutNavigation() { }, [pathname]); return ( - + // preview-start + , + }, + { + slug: '/about', + title: 'About Us', + icon: , + }, + { + slug: '/movies', + title: 'Movies', + icon: , + children: [ + { + slug: '/fantasy', + title: 'Fantasy', + icon: , + children: [ + { + kind: 'header', + title: 'Epic Fantasy', + }, + { + slug: '/lord-of-the-rings', + title: 'Lord of the Rings', + icon: , + }, + { + slug: '/harry-potter', + title: 'Harry Potter', + icon: , + }, + { kind: 'divider' }, + { + kind: 'header', + title: 'Modern Fantasy', + }, + { + slug: '/chronicles-of-narnia', + title: 'Chronicles of Narnia', + icon: , + }, + ], + }, + { + slug: '/action', + title: 'Action', + icon: , + children: [ + { + slug: '/mad-max', + title: 'Mad Max', + icon: , + }, + { + slug: '/die-hard', + title: 'Die Hard', + icon: , + }, + ], + }, + { + slug: '/sci-fi', + title: 'Sci-Fi', + icon: , + children: [ + { + slug: '/star-wars', + title: 'Star Wars', + icon: , + }, + { + slug: '/matrix', + title: 'The Matrix', + icon: , + }, + ], + }, + ], + }, + { kind: 'divider' }, + { + kind: 'header', + title: 'Animals', + }, + { + slug: '/mammals', + title: 'Mammals', + icon: , + children: [ + { + slug: '/lion', + title: 'Lion', + icon: , + }, + { + slug: '/elephant', + title: 'Elephant', + icon: , + }, + ], + }, + { + slug: '/birds', + title: 'Birds', + icon: , + children: [ + { + slug: '/eagle', + title: 'Eagle', + icon: , + }, + { + slug: '/parrot', + title: 'Parrot', + icon: , + }, + ], + }, + { + slug: '/reptiles', + title: 'Reptiles', + icon: , + children: [ + { + slug: '/crocodile', + title: 'Crocodile', + icon: , + }, + { + slug: '/snake', + title: 'Snake', + icon: , + }, + ], + }, + ]} + router={router} + > + // preview-end ); } diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx.preview index 519caf4aa97..e2131c5e6c3 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx.preview +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx.preview @@ -1,12 +1,156 @@ - - - Dashboard content for {pathname} - - \ No newline at end of file +, + }, + { + slug: '/about', + title: 'About Us', + icon: , + }, + { + slug: '/movies', + title: 'Movies', + icon: , + children: [ + { + slug: '/fantasy', + title: 'Fantasy', + icon: , + children: [ + { + kind: 'header', + title: 'Epic Fantasy', + }, + { + slug: '/lord-of-the-rings', + title: 'Lord of the Rings', + icon: , + }, + { + slug: '/harry-potter', + title: 'Harry Potter', + icon: , + }, + { kind: 'divider' }, + { + kind: 'header', + title: 'Modern Fantasy', + }, + { + slug: '/chronicles-of-narnia', + title: 'Chronicles of Narnia', + icon: , + }, + ], + }, + { + slug: '/action', + title: 'Action', + icon: , + children: [ + { + slug: '/mad-max', + title: 'Mad Max', + icon: , + }, + { + slug: '/die-hard', + title: 'Die Hard', + icon: , + }, + ], + }, + { + slug: '/sci-fi', + title: 'Sci-Fi', + icon: , + children: [ + { + slug: '/star-wars', + title: 'Star Wars', + icon: , + }, + { + slug: '/matrix', + title: 'The Matrix', + icon: , + }, + ], + }, + ], + }, + { kind: 'divider' }, + { + kind: 'header', + title: 'Animals', + }, + { + slug: '/mammals', + title: 'Mammals', + icon: , + children: [ + { + slug: '/lion', + title: 'Lion', + icon: , + }, + { + slug: '/elephant', + title: 'Elephant', + icon: , + }, + ], + }, + { + slug: '/birds', + title: 'Birds', + icon: , + children: [ + { + slug: '/eagle', + title: 'Eagle', + icon: , + }, + { + slug: '/parrot', + title: 'Parrot', + icon: , + }, + ], + }, + { + slug: '/reptiles', + title: 'Reptiles', + icon: , + children: [ + { + slug: '/crocodile', + title: 'Crocodile', + icon: , + }, + { + slug: '/snake', + title: 'Snake', + icon: , + }, + ], + }, + ]} + router={router} +> + + + Dashboard content for {pathname} + + + \ No newline at end of file diff --git a/docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md b/docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md index af87d97cac4..5fd0ccf7ec9 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md +++ b/docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md @@ -8,22 +8,35 @@ components: AppProvider, DashboardLayout

The dashboard layout component provides a customizable out-of-the-box layout for a typical dashboard page.

+The `DashboardLayout` component is a quick, easy way to provide a standard full-screen layout with a header and sidebar to any dashboard page, as well as ready-to-use and easy to customize navigation and branding. + +Many features of this component are configurable through the [AppProvider](https://mui.com/toolpad/core/react-app-provider/) component that should wrap it. + ## Demo -A `DashboardLayout` has a configurable header and sidebar with navigation. +A `DashboardLayout` brings in a header and sidebar with navigation, as well as a scrollable area for page content. -{{"demo": "DashboardLayoutBasic.js", "height": 500, "iframe": true}} +If application [themes](https://mui.com/toolpad/core/react-app-provider/#theming) are defined for both light and dark mode, a theme switcher in the header allows for easily switching between the two modes. -Some features of this layout depend on the [AppProvider](https://mui.com/toolpad/core/react-app-provider/) component that must be present at the base application level. +{{"demo": "DashboardLayoutBasic.js", "height": 500, "iframe": true}} ## Branding -The `branding` prop in the [AppProvider](https://mui.com/toolpad/core/react-app-provider/) allows for setting a `logo` or `title` in the page header. +Some elements of the `DashboardLayout` can be configured to match your personalized brand. + +This can be done via the `branding` prop in the [AppProvider](https://mui.com/toolpad/core/react-app-provider/), which allows for setting a custom `logo` image or `title` text in the page header. {{"demo": "DashboardLayoutBranding.js", "height": 500, "iframe": true}} ## Navigation -The `navigation` prop in the [AppProvider](https://mui.com/toolpad/core/react-app-provider/) allows for setting any type of navigation structure in the sidebar, such as links, headings, nested collapsible lists and dividers, in any order. +The `navigation` prop in the [AppProvider](https://mui.com/toolpad/core/react-app-provider/) allows for setting any type of navigation structure in the `DashboardLayout` sidebar by adding different navigation elements as building blocks in any order, such as: + +- links `{ slug: '/home', title: 'Home', icon: }`; +- headings `{ kind: 'header', title: 'Epic Fantasy' }`; +- dividers `{ kind: 'divider' }`; +- collapsible nested navigation `{ title: 'Fantasy', icon: , children: [ ... ] }`. + +The flexibility in composing and ordering these different elements allows for a great variety of navigation structures to fit your use case. {{"demo": "DashboardLayoutNavigation.js", "height": 640, "iframe": true}} diff --git a/docs/translations/api-docs/app-provider/app-provider.json b/docs/translations/api-docs/app-provider/app-provider.json index b0380881876..6941b6d2b95 100644 --- a/docs/translations/api-docs/app-provider/app-provider.json +++ b/docs/translations/api-docs/app-provider/app-provider.json @@ -6,7 +6,7 @@ "navigation": { "description": "Navigation definition for the app." }, "router": { "description": "Router implementation used inside Toolpad components." }, "theme": { - "description": "Theme to be used by the app in light/dark mode." + "description": "Theme to be used by the app in light/dark mode. A CSS Variables Theme is recommended." } }, "classDescriptions": {} diff --git a/packages/toolpad-core/src/AppProvider/AppProvider.tsx b/packages/toolpad-core/src/AppProvider/AppProvider.tsx index 0e82396f064..45fc65c18af 100644 --- a/packages/toolpad-core/src/AppProvider/AppProvider.tsx +++ b/packages/toolpad-core/src/AppProvider/AppProvider.tsx @@ -57,7 +57,7 @@ export interface AppProviderProps { */ children: React.ReactNode; /** - * [Theme](https://mui.com/material-ui/customization/theming/) to be used by the app in light/dark mode. + * [Theme](https://mui.com/toolpad/core/react-app-provider/#theming) to be used by the app in light/dark mode. A [CSS Variables Theme](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/) is recommended. * @default baseTheme */ theme?: Theme | { light: Theme; dark: Theme } | CssVarsTheme; @@ -168,7 +168,7 @@ AppProvider.propTypes /* remove-proptypes */ = { searchParams: PropTypes.instanceOf(URLSearchParams), }), /** - * [Theme](https://mui.com/material-ui/customization/theming/) to be used by the app in light/dark mode. + * [Theme](https://mui.com/toolpad/core/react-app-provider/#theming) to be used by the app in light/dark mode. A [CSS Variables Theme](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/) is recommended. * @default baseTheme */ theme: PropTypes.object, From 9ab2a87d2f9486ac3807ed46b78e79827c19ad8f Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Tue, 2 Jul 2024 00:06:17 +0100 Subject: [PATCH 10/42] Add missing changes outside docs --- .../data/toolpad/core/components/app-provider/app-provider.md | 4 ++-- .../core/components/dashboard-layout/dashboard-layout.md | 2 +- packages/toolpad-core/src/AppProvider/AppProvider.tsx | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/data/toolpad/core/components/app-provider/app-provider.md b/docs/data/toolpad/core/components/app-provider/app-provider.md index 557f2d0208a..b4569945dfd 100644 --- a/docs/data/toolpad/core/components/app-provider/app-provider.md +++ b/docs/data/toolpad/core/components/app-provider/app-provider.md @@ -80,8 +80,8 @@ export default function App(props) { An `AppProvider` can set a visual theme for all elements inside it to adopt via the `theme` prop. This prop can be set in a few distinct ways with different advantages and disadvantages: -1. [CSS Variables Theme](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/): the default and recommended theming option for Toolpad applications, as despite being an experimental feature it is the only option that prevents issues such as [dark-mode SSR flickering](https://github.com/mui/material-ui/issues/27651), and it supports both light and dark mode with a single theme definition. The provided default theme in Toolpad, as well as any theme that can be imported from `@toolpad-core/themes` are already in this format. -2. [Standard Material UI Theme](https://mui.com/material-ui/customization/theming/): a single standard Material UI theme can be provided as the only theme to be used. +1. [CSS variables theme](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/): the default and recommended theming option for Toolpad applications, as despite being an experimental feature it is the only option that prevents issues such as [dark-mode SSR flickering](https://github.com/mui/material-ui/issues/27651), and it supports both light and dark mode with a single theme definition. The provided default theme in Toolpad, as well as any theme that can be imported from `@toolpad-core/themes` are already in this format. +2. [Standard Material UI theme](https://mui.com/material-ui/customization/theming/): a single standard Material UI theme can be provided as the only theme to be used. 3. **Light and dark themes**: two separate Material UI themes can be provided for light and dark mode in an object with the format `{ light: Theme, dark: Theme }` {{"demo": "AppProviderTheme.js", "height": 500, "iframe": true}} diff --git a/docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md b/docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md index 5fd0ccf7ec9..1d46823ff17 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md +++ b/docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md @@ -16,7 +16,7 @@ Many features of this component are configurable through the [AppProvider](https A `DashboardLayout` brings in a header and sidebar with navigation, as well as a scrollable area for page content. -If application [themes](https://mui.com/toolpad/core/react-app-provider/#theming) are defined for both light and dark mode, a theme switcher in the header allows for easily switching between the two modes. +If application [themes](https://mui.com/toolpad/core/react-app-provider/#theming) are defined for both light and dark mode, a theme switcher in the header allows for easy switching between the two modes. {{"demo": "DashboardLayoutBasic.js", "height": 500, "iframe": true}} diff --git a/packages/toolpad-core/src/AppProvider/AppProvider.tsx b/packages/toolpad-core/src/AppProvider/AppProvider.tsx index 45fc65c18af..6b576098315 100644 --- a/packages/toolpad-core/src/AppProvider/AppProvider.tsx +++ b/packages/toolpad-core/src/AppProvider/AppProvider.tsx @@ -57,7 +57,7 @@ export interface AppProviderProps { */ children: React.ReactNode; /** - * [Theme](https://mui.com/toolpad/core/react-app-provider/#theming) to be used by the app in light/dark mode. A [CSS Variables Theme](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/) is recommended. + * [Theme](https://mui.com/toolpad/core/react-app-provider/#theming) to be used by the app in light/dark mode. A [CSS variables theme](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/) is recommended. * @default baseTheme */ theme?: Theme | { light: Theme; dark: Theme } | CssVarsTheme; @@ -168,7 +168,7 @@ AppProvider.propTypes /* remove-proptypes */ = { searchParams: PropTypes.instanceOf(URLSearchParams), }), /** - * [Theme](https://mui.com/toolpad/core/react-app-provider/#theming) to be used by the app in light/dark mode. A [CSS Variables Theme](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/) is recommended. + * [Theme](https://mui.com/toolpad/core/react-app-provider/#theming) to be used by the app in light/dark mode. A [CSS variables theme](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/) is recommended. * @default baseTheme */ theme: PropTypes.object, From 3002ae7bf6c7c3f7f1cc13e76af4a9b999831dd8 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Tue, 2 Jul 2024 18:59:50 +0100 Subject: [PATCH 11/42] =?UTF-8?q?=F0=9F=91=8D=F0=9F=91=8D=F0=9F=91=8D?= =?UTF-8?q?=F0=9F=91=8D=F0=9F=91=8D=F0=9F=91=8D=F0=9F=91=8D=F0=9F=91=8D?= =?UTF-8?q?=F0=9F=91=8D=F0=9F=91=8D=F0=9F=91=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../toolpad/core/components/app-provider/AppProviderTheme.js | 4 ++-- .../toolpad/core/components/app-provider/AppProviderTheme.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js index 6a201da89a3..f7dbb614fcd 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js +++ b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js @@ -24,7 +24,7 @@ const NAVIGATION = [ }, ]; -const theme = extendTheme({ +const customTheme = extendTheme({ colorSchemes: { light: { palette: { @@ -174,7 +174,7 @@ export default function AppProviderTheme() { return ( // preview-start - + + Date: Tue, 2 Jul 2024 20:08:09 +0100 Subject: [PATCH 12/42] Add theme example that doesn't crash --- .../app-provider/AppProviderTheme.js | 73 +++++++------------ .../app-provider/AppProviderTheme.tsx | 73 +++++++------------ .../components/app-provider/app-provider.md | 2 +- .../dashboard-layout/DashboardLayoutBasic.js | 14 +++- .../dashboard-layout/DashboardLayoutBasic.tsx | 14 +++- .../api-docs/app-provider/app-provider.json | 2 +- 6 files changed, 84 insertions(+), 94 deletions(-) diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js index f7dbb614fcd..21bf079bb76 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js +++ b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js @@ -1,7 +1,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; -import { experimental_extendTheme as extendTheme } from '@mui/material/styles'; +import { createTheme } from '@mui/material/styles'; import DashboardIcon from '@mui/icons-material/Dashboard'; import TimelineIcon from '@mui/icons-material/Timeline'; import { AppProvider } from '@toolpad/core/AppProvider'; @@ -24,27 +24,12 @@ const NAVIGATION = [ }, ]; -const customTheme = extendTheme({ - colorSchemes: { - light: { - palette: { - background: { - default: 'var(--mui-palette-grey-50)', - defaultChannel: 'var(--mui-palette-grey-50)', - }, - }, - }, - dark: { - palette: { - background: { - default: 'var(--mui-palette-grey-900)', - defaultChannel: 'var(--mui-palette-grey-900)', - }, - text: { - primary: 'var(--mui-palette-grey-200)', - primaryChannel: 'var(--mui-palette-grey-200)', - }, - }, +const defaultDarkTheme = createTheme({ palette: { mode: 'dark' } }); + +const customTheme = createTheme(defaultDarkTheme, { + palette: { + background: { + default: '#2A4364', }, }, typography: { @@ -55,20 +40,21 @@ const customTheme = extendTheme({ components: { MuiAppBar: { styleOverrides: { - root: ({ theme }) => ({ - backgroundColor: theme.vars.palette.background.paper, + root: { + backgroundColor: '#112E4D', + backgroundImage: 'none', borderWidth: 0, borderBottomWidth: 1, borderStyle: 'solid', - borderColor: theme.vars.palette.divider, + borderColor: defaultDarkTheme.palette.divider, boxShadow: 'none', - }), + }, }, }, - MuiToolbar: { + MuiDrawer: { styleOverrides: { - root: { - backgroundColor: 'inherit', + paper: { + backgroundColor: '#112E4D', }, }, }, @@ -81,24 +67,21 @@ const customTheme = extendTheme({ }, MuiIconButton: { styleOverrides: { - root: ({ theme }) => ({ - color: theme.vars.palette.primary.dark, + root: { + color: defaultDarkTheme.palette.primary.dark, padding: 8, - }), + }, }, }, MuiListSubheader: { styleOverrides: { - root: ({ theme }) => ({ - color: theme.vars.palette.grey['600'], + root: { + backgroundColor: '#112E4D', fontSize: 12, fontWeight: '700', height: 40, paddingLeft: 32, - [theme.getColorSchemeSelector('dark')]: { - color: theme.vars.palette.grey['500'], - }, - }), + }, }, }, MuiListItem: { @@ -111,26 +94,26 @@ const customTheme = extendTheme({ }, MuiListItemButton: { styleOverrides: { - root: ({ theme }) => ({ + root: { borderRadius: 8, '&.Mui-selected': { '& .MuiListItemIcon-root': { - color: theme.vars.palette.primary.dark, + color: defaultDarkTheme.palette.primary.dark, }, '& .MuiTypography-root': { - color: theme.vars.palette.primary.dark, + color: defaultDarkTheme.palette.primary.dark, }, '& .MuiSvgIcon-root': { - color: theme.vars.palette.primary.dark, + color: defaultDarkTheme.palette.primary.dark, }, '& .MuiTouchRipple-child': { - backgroundColor: theme.vars.palette.primary.dark, + backgroundColor: defaultDarkTheme.palette.primary.dark, }, }, '& .MuiSvgIcon-root': { - color: theme.vars.palette.action.active, + color: defaultDarkTheme.palette.action.active, }, - }), + }, }, }, MuiListItemText: { diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx index 352f066d4e4..08666428b04 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx +++ b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; -import { experimental_extendTheme as extendTheme } from '@mui/material/styles'; +import { createTheme, Theme } from '@mui/material/styles'; import DashboardIcon from '@mui/icons-material/Dashboard'; import TimelineIcon from '@mui/icons-material/Timeline'; import { AppProvider } from '@toolpad/core/AppProvider'; @@ -25,27 +25,12 @@ const NAVIGATION: Navigation = [ }, ]; -const customTheme = extendTheme({ - colorSchemes: { - light: { - palette: { - background: { - default: 'var(--mui-palette-grey-50)', - defaultChannel: 'var(--mui-palette-grey-50)', - }, - }, - }, - dark: { - palette: { - background: { - default: 'var(--mui-palette-grey-900)', - defaultChannel: 'var(--mui-palette-grey-900)', - }, - text: { - primary: 'var(--mui-palette-grey-200)', - primaryChannel: 'var(--mui-palette-grey-200)', - }, - }, +const defaultDarkTheme = createTheme({ palette: { mode: 'dark' } }); + +const customTheme: Theme = createTheme(defaultDarkTheme, { + palette: { + background: { + default: '#2A4364', }, }, typography: { @@ -56,20 +41,21 @@ const customTheme = extendTheme({ components: { MuiAppBar: { styleOverrides: { - root: ({ theme }) => ({ - backgroundColor: theme.vars.palette.background.paper, + root: { + backgroundColor: '#112E4D', + backgroundImage: 'none', borderWidth: 0, borderBottomWidth: 1, borderStyle: 'solid', - borderColor: theme.vars.palette.divider, + borderColor: defaultDarkTheme.palette.divider, boxShadow: 'none', - }), + }, }, }, - MuiToolbar: { + MuiDrawer: { styleOverrides: { - root: { - backgroundColor: 'inherit', + paper: { + backgroundColor: '#112E4D', }, }, }, @@ -82,24 +68,21 @@ const customTheme = extendTheme({ }, MuiIconButton: { styleOverrides: { - root: ({ theme }) => ({ - color: theme.vars.palette.primary.dark, + root: { + color: defaultDarkTheme.palette.primary.dark, padding: 8, - }), + }, }, }, MuiListSubheader: { styleOverrides: { - root: ({ theme }) => ({ - color: theme.vars.palette.grey['600'], + root: { + backgroundColor: '#112E4D', fontSize: 12, fontWeight: '700', height: 40, paddingLeft: 32, - [theme.getColorSchemeSelector('dark')]: { - color: theme.vars.palette.grey['500'], - }, - }), + }, }, }, MuiListItem: { @@ -112,26 +95,26 @@ const customTheme = extendTheme({ }, MuiListItemButton: { styleOverrides: { - root: ({ theme }) => ({ + root: { borderRadius: 8, '&.Mui-selected': { '& .MuiListItemIcon-root': { - color: theme.vars.palette.primary.dark, + color: defaultDarkTheme.palette.primary.dark, }, '& .MuiTypography-root': { - color: theme.vars.palette.primary.dark, + color: defaultDarkTheme.palette.primary.dark, }, '& .MuiSvgIcon-root': { - color: theme.vars.palette.primary.dark, + color: defaultDarkTheme.palette.primary.dark, }, '& .MuiTouchRipple-child': { - backgroundColor: theme.vars.palette.primary.dark, + backgroundColor: defaultDarkTheme.palette.primary.dark, }, }, '& .MuiSvgIcon-root': { - color: theme.vars.palette.action.active, + color: defaultDarkTheme.palette.action.active, }, - }), + }, }, }, MuiListItemText: { diff --git a/docs/data/toolpad/core/components/app-provider/app-provider.md b/docs/data/toolpad/core/components/app-provider/app-provider.md index b4569945dfd..3af80f61a4f 100644 --- a/docs/data/toolpad/core/components/app-provider/app-provider.md +++ b/docs/data/toolpad/core/components/app-provider/app-provider.md @@ -88,7 +88,7 @@ An `AppProvider` can set a visual theme for all elements inside it to adopt via ### Predefined themes -A set of predefined themes that work well with Toolpad applications can be imported: +A set of predefined themes that work well with Toolpad applications can be imported from `@toolpad-core/themes`. ```tsx import { baseTheme } from '@toolpad-core/themes'; diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js index 77cd1d86fd6..edfd9a3a71c 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js @@ -1,6 +1,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; +import { createTheme } from '@mui/material/styles'; import DashboardIcon from '@mui/icons-material/Dashboard'; import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'; import BarChartIcon from '@mui/icons-material/BarChart'; @@ -68,7 +69,18 @@ export default function DashboardLayoutBasic() { return ( // preview-start - + + Theme to be used by the app in light/dark mode. A CSS Variables Theme is recommended." + "description": "Theme to be used by the app in light/dark mode. A CSS variables theme is recommended." } }, "classDescriptions": {} From 02a044e37e9d71258456ccc3952691d3d0c69db6 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Tue, 2 Jul 2024 20:33:56 +0100 Subject: [PATCH 13/42] Fix theme switching in docs demos --- .../app-provider/AppProviderBasic.js | 7 +- .../app-provider/AppProviderBasic.tsx | 7 +- .../app-provider/AppProviderBasic.tsx.preview | 2 +- .../app-provider/AppProviderTheme.tsx.preview | 14 ++ .../components/app-provider/app-provider.md | 8 +- .../dashboard-layout/DashboardLayoutBasic.js | 11 +- .../dashboard-layout/DashboardLayoutBasic.tsx | 11 +- .../DashboardLayoutBasic.tsx.preview | 2 +- .../DashboardLayoutBranding.js | 2 + .../DashboardLayoutBranding.tsx | 2 + .../DashboardLayoutBranding.tsx.preview | 1 + .../DashboardLayoutNavigation.js | 2 + .../DashboardLayoutNavigation.tsx | 2 + .../DashboardLayoutNavigation.tsx.preview | 1 + docs/pages/toolpad/core/api/app-provider.json | 2 +- .../src/AppProvider/AppProvider.tsx | 14 +- .../{baseTheme.ts => baseCSSVarsTheme.ts} | 4 +- .../toolpad-core/src/themes/baseDarkTheme.ts | 129 ++++++++++++++++++ .../toolpad-core/src/themes/baseLightTheme.ts | 114 ++++++++++++++++ packages/toolpad-core/src/themes/index.ts | 4 +- 20 files changed, 305 insertions(+), 34 deletions(-) create mode 100644 docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx.preview rename packages/toolpad-core/src/themes/{baseTheme.ts => baseCSSVarsTheme.ts} (97%) create mode 100644 packages/toolpad-core/src/themes/baseDarkTheme.ts create mode 100644 packages/toolpad-core/src/themes/baseLightTheme.ts diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.js b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.js index bf62d0e84d2..941a6347e71 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.js +++ b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.js @@ -5,6 +5,7 @@ import DashboardIcon from '@mui/icons-material/Dashboard'; import TimelineIcon from '@mui/icons-material/Timeline'; import { AppProvider } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; +import { baseDarkTheme, baseLightTheme } from '@toolpad/core/themes'; const NAVIGATION = [ { @@ -37,7 +38,11 @@ export default function AppProviderBasic() { return ( // preview-start - + + + + + + Dashboard content for {pathname} + + + diff --git a/docs/data/toolpad/core/components/app-provider/app-provider.md b/docs/data/toolpad/core/components/app-provider/app-provider.md index 3af80f61a4f..68e4bfffd5c 100644 --- a/docs/data/toolpad/core/components/app-provider/app-provider.md +++ b/docs/data/toolpad/core/components/app-provider/app-provider.md @@ -18,7 +18,7 @@ Wrap an application page with the `AppProvider` component. Ideally, the `AppProvider` should wrap every page in the application, therefore in most projects it should be imported and placed in the file that defines a **shared layout** for all pages. -In the following example, an `AppProvider` component wrapping the page provides it with a default theme, and a `DashboardLayout` placed inside it gets its navigation and routing features automatically set based on the props passed to the `AppProvider`. +In the following (purely demonstrative) example, an `AppProvider` component wrapping the page provides it with a default theme, and a `DashboardLayout` placed inside it gets its navigation and routing features automatically set based on the props passed to the `AppProvider`. {{"demo": "AppProviderBasic.js", "height": 500, "iframe": true}} @@ -80,7 +80,7 @@ export default function App(props) { An `AppProvider` can set a visual theme for all elements inside it to adopt via the `theme` prop. This prop can be set in a few distinct ways with different advantages and disadvantages: -1. [CSS variables theme](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/): the default and recommended theming option for Toolpad applications, as despite being an experimental feature it is the only option that prevents issues such as [dark-mode SSR flickering](https://github.com/mui/material-ui/issues/27651), and it supports both light and dark mode with a single theme definition. The provided default theme in Toolpad, as well as any theme that can be imported from `@toolpad-core/themes` are already in this format. +1. [CSS variables theme](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/): the default and recommended theming option for Toolpad applications, as it is the only option that prevents issues such as [dark-mode SSR flickering](https://github.com/mui/material-ui/issues/27651) and supports both light and dark mode with a single theme definition. The provided default theme in Toolpad is already in this format. 2. [Standard Material UI theme](https://mui.com/material-ui/customization/theming/): a single standard Material UI theme can be provided as the only theme to be used. 3. **Light and dark themes**: two separate Material UI themes can be provided for light and dark mode in an object with the format `{ light: Theme, dark: Theme }` @@ -88,8 +88,8 @@ An `AppProvider` can set a visual theme for all elements inside it to adopt via ### Predefined themes -A set of predefined themes that work well with Toolpad applications can be imported from `@toolpad-core/themes`. +A set of predefined themes that work well with Toolpad applications can be imported from `@toolpad/core/themes`. ```tsx -import { baseTheme } from '@toolpad-core/themes'; +import { baseCSSVarsTheme } from '@toolpad/core/themes'; ``` diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js index edfd9a3a71c..fc8e0db30d6 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js @@ -1,7 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; -import { createTheme } from '@mui/material/styles'; import DashboardIcon from '@mui/icons-material/Dashboard'; import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'; import BarChartIcon from '@mui/icons-material/BarChart'; @@ -9,6 +8,7 @@ import DescriptionIcon from '@mui/icons-material/Description'; import LayersIcon from '@mui/icons-material/Layers'; import { AppProvider } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; +import { baseDarkTheme, baseLightTheme } from '@toolpad/core/themes'; const NAVIGATION = [ { @@ -72,14 +72,7 @@ export default function DashboardLayoutBasic() { + @@ -169,7 +175,7 @@ AppProvider.propTypes /* remove-proptypes */ = { }), /** * [Theme](https://mui.com/toolpad/core/react-app-provider/#theming) to be used by the app in light/dark mode. A [CSS variables theme](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/) is recommended. - * @default baseTheme + * @default baseCSSVarsTheme */ theme: PropTypes.object, } as any; diff --git a/packages/toolpad-core/src/themes/baseTheme.ts b/packages/toolpad-core/src/themes/baseCSSVarsTheme.ts similarity index 97% rename from packages/toolpad-core/src/themes/baseTheme.ts rename to packages/toolpad-core/src/themes/baseCSSVarsTheme.ts index fe1d42c4536..fe0f259ce9b 100644 --- a/packages/toolpad-core/src/themes/baseTheme.ts +++ b/packages/toolpad-core/src/themes/baseCSSVarsTheme.ts @@ -1,7 +1,7 @@ import { experimental_extendTheme as extendTheme } from '@mui/material/styles'; import type {} from '@mui/material/themeCssVarsAugmentation'; -const baseTheme = extendTheme({ +const baseCSSVarsTheme = extendTheme({ colorSchemes: { light: { palette: { @@ -138,4 +138,4 @@ const baseTheme = extendTheme({ }, }); -export { baseTheme }; +export { baseCSSVarsTheme }; diff --git a/packages/toolpad-core/src/themes/baseDarkTheme.ts b/packages/toolpad-core/src/themes/baseDarkTheme.ts new file mode 100644 index 00000000000..3566b71a04d --- /dev/null +++ b/packages/toolpad-core/src/themes/baseDarkTheme.ts @@ -0,0 +1,129 @@ +import { createTheme } from '@mui/material/styles'; + +const defaultDarkTheme = createTheme({ + palette: { + mode: 'dark', + }, +}); + +const baseDarkTheme = createTheme(defaultDarkTheme, { + palette: { + background: { + default: defaultDarkTheme.palette.grey['900'], + }, + text: { + primary: defaultDarkTheme.palette.grey['100'], + }, + }, + typography: { + h6: { + fontWeight: '700', + }, + }, + components: { + MuiAppBar: { + styleOverrides: { + root: { + backgroundColor: defaultDarkTheme.palette.background.default, + borderWidth: 0, + borderBottomWidth: 1, + borderStyle: 'solid', + borderColor: defaultDarkTheme.palette.divider, + boxShadow: 'none', + }, + }, + }, + MuiToolbar: { + styleOverrides: { + root: { + backgroundColor: 'inherit', + }, + }, + }, + MuiList: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, + MuiIconButton: { + styleOverrides: { + root: { + color: defaultDarkTheme.palette.primary.dark, + padding: 8, + }, + }, + }, + MuiListSubheader: { + styleOverrides: { + root: { + color: defaultDarkTheme.palette.grey['500'], + fontSize: 12, + fontWeight: '700', + height: 40, + paddingLeft: 32, + }, + }, + }, + MuiListItem: { + styleOverrides: { + root: { + paddingTop: 0, + paddingBottom: 0, + }, + }, + }, + MuiListItemButton: { + styleOverrides: { + root: { + borderRadius: 8, + '&.Mui-selected': { + '& .MuiListItemIcon-root': { + color: defaultDarkTheme.palette.primary.dark, + }, + '& .MuiTypography-root': { + color: defaultDarkTheme.palette.primary.dark, + }, + '& .MuiSvgIcon-root': { + color: defaultDarkTheme.palette.primary.dark, + }, + '& .MuiTouchRipple-child': { + backgroundColor: defaultDarkTheme.palette.primary.dark, + }, + }, + '& .MuiSvgIcon-root': { + color: defaultDarkTheme.palette.grey['100'], + }, + }, + }, + }, + MuiListItemText: { + styleOverrides: { + root: { + '& .MuiTypography-root': { + fontWeight: '500', + }, + }, + }, + }, + MuiListItemIcon: { + styleOverrides: { + root: { + minWidth: 34, + }, + }, + }, + MuiDivider: { + styleOverrides: { + root: { + borderBottomWidth: 2, + marginLeft: '16px', + marginRight: '16px', + }, + }, + }, + }, +}); + +export { baseDarkTheme }; diff --git a/packages/toolpad-core/src/themes/baseLightTheme.ts b/packages/toolpad-core/src/themes/baseLightTheme.ts new file mode 100644 index 00000000000..d10da0cd6b5 --- /dev/null +++ b/packages/toolpad-core/src/themes/baseLightTheme.ts @@ -0,0 +1,114 @@ +import { createTheme } from '@mui/material/styles'; + +const defaultLightTheme = createTheme(); + +const baseLightTheme = createTheme(defaultLightTheme, { + palette: { + background: { + default: defaultLightTheme.palette.grey['50'], + }, + }, + typography: { + h6: { + fontWeight: '700', + }, + }, + components: { + MuiAppBar: { + styleOverrides: { + root: { + borderWidth: 0, + borderBottomWidth: 1, + borderStyle: 'solid', + borderColor: defaultLightTheme.palette.divider, + boxShadow: 'none', + }, + }, + }, + MuiList: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, + MuiIconButton: { + styleOverrides: { + root: { + color: defaultLightTheme.palette.primary.dark, + padding: 8, + }, + }, + }, + MuiListSubheader: { + styleOverrides: { + root: { + color: defaultLightTheme.palette.grey['600'], + fontSize: 12, + fontWeight: '700', + height: 40, + paddingLeft: 32, + }, + }, + }, + MuiListItem: { + styleOverrides: { + root: { + paddingTop: 0, + paddingBottom: 0, + }, + }, + }, + MuiListItemButton: { + styleOverrides: { + root: { + borderRadius: 8, + '&.Mui-selected': { + '& .MuiListItemIcon-root': { + color: defaultLightTheme.palette.primary.dark, + }, + '& .MuiTypography-root': { + color: defaultLightTheme.palette.primary.dark, + }, + '& .MuiSvgIcon-root': { + color: defaultLightTheme.palette.primary.dark, + }, + '& .MuiTouchRipple-child': { + backgroundColor: defaultLightTheme.palette.primary.dark, + }, + }, + '& .MuiSvgIcon-root': { + color: defaultLightTheme.palette.action.active, + }, + }, + }, + }, + MuiListItemText: { + styleOverrides: { + root: { + '& .MuiTypography-root': { + fontWeight: '500', + }, + }, + }, + }, + MuiListItemIcon: { + styleOverrides: { + root: { + minWidth: 34, + }, + }, + }, + MuiDivider: { + styleOverrides: { + root: { + borderBottomWidth: 2, + marginLeft: '16px', + marginRight: '16px', + }, + }, + }, + }, +}); + +export { baseLightTheme }; diff --git a/packages/toolpad-core/src/themes/index.ts b/packages/toolpad-core/src/themes/index.ts index 4ed30a92200..6b7efe1ae0f 100644 --- a/packages/toolpad-core/src/themes/index.ts +++ b/packages/toolpad-core/src/themes/index.ts @@ -1,2 +1,4 @@ 'use client'; -export * from './baseTheme'; +export * from './baseCSSVarsTheme'; +export * from './baseLightTheme'; +export * from './baseDarkTheme'; From e77313d8128bbdb7115decb741976b448990cc4a Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Tue, 2 Jul 2024 20:40:33 +0100 Subject: [PATCH 14/42] Run docs formatter --- .../components/app-provider/AppProviderBasic.tsx.preview | 6 +++++- .../components/app-provider/AppProviderTheme.tsx.preview | 2 +- .../dashboard-layout/DashboardLayoutBasic.tsx.preview | 6 +++++- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx.preview b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx.preview index 86b1dc923ee..f6f259deb16 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx.preview +++ b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx.preview @@ -1,4 +1,8 @@ - + Dashboard content for {pathname} - + \ No newline at end of file diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx.preview index 86b1dc923ee..f6f259deb16 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx.preview +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx.preview @@ -1,4 +1,8 @@ - + Date: Tue, 2 Jul 2024 21:09:21 +0100 Subject: [PATCH 15/42] Add theme switcher unit test --- package.json | 1 + .../DashboardLayout/DashboardLayout.test.tsx | 26 ++++++ pnpm-lock.yaml | 83 ++++++++++++------- test/setupVitest.ts | 18 +++- 4 files changed, 97 insertions(+), 31 deletions(-) diff --git a/package.json b/package.json index f8e9632e3c8..ccfd96f8dee 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "@mui/x-charts": "7.8.0", "@next/eslint-plugin-next": "14.2.4", "@playwright/test": "1.45.0", + "@testing-library/jest-dom": "^6.4.6", "@testing-library/react": "16.0.0", "@testing-library/user-event": "14.5.2", "@types/archiver": "6.0.2", diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.test.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.test.tsx index ee4db5c53e0..e23fd333c0d 100644 --- a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.test.tsx +++ b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.test.tsx @@ -11,8 +11,11 @@ import BarChartIcon from '@mui/icons-material/BarChart'; import DescriptionIcon from '@mui/icons-material/Description'; import LayersIcon from '@mui/icons-material/Layers'; import userEvent from '@testing-library/user-event'; +import '@testing-library/jest-dom/vitest'; import { BrandingContext, NavigationContext } from '../shared/context'; import type { Navigation } from '../AppProvider'; +import { AppThemeProvider } from '../AppProvider/AppThemeProvider'; +import { baseDarkTheme, baseLightTheme } from '../themes'; import { DashboardLayout } from './DashboardLayout'; describe('DashboardLayout', () => { @@ -40,6 +43,29 @@ describe('DashboardLayout', () => { expect(within(header).getByAltText('Placeholder Logo')).toBeTruthy(); }); + test('can switch theme', async () => { + const user = userEvent.setup(); + render( + + Hello world + , + ); + + const header = screen.getByRole('banner'); + + const themeSwitcherButton = within(header).getByLabelText('Switch to dark mode'); + + expect(document.body).toHaveStyle(`background-color: rgb(250, 250, 250)`); + + await user.click(themeSwitcherButton); + + expect(document.body).toHaveStyle(`background-color: rgb(33, 33, 33)`); + + await user.click(themeSwitcherButton); + + expect(document.body).toHaveStyle(`background-color: rgb(250, 250, 250)`); + }); + test('navigation works correctly', async () => { const NAVIGATION: Navigation = [ { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5e86e151798..6c6babd0b75 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -108,6 +108,9 @@ importers: '@playwright/test': specifier: 1.45.0 version: 1.45.0 + '@testing-library/jest-dom': + specifier: ^6.4.6 + version: 6.4.6(vitest@2.0.0-beta.12(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.1)) '@testing-library/react': specifier: 16.0.0 version: 16.0.0(@testing-library/dom@10.2.0)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -569,7 +572,7 @@ importers: version: 8.56.10 '@typescript-eslint/parser': specifier: 7.14.1 - version: 7.14.1(eslint@8.57.0)(typescript@5.5.3) + version: 7.14.1(eslint@8.57.0)(typescript@5.5.2) packages/toolpad-core: dependencies: @@ -1268,6 +1271,9 @@ importers: packages: + '@adobe/css-tools@4.4.0': + resolution: {integrity: sha512-Ff9+ksdQQB3rMncgqDK78uLznstjyfIf2Arnh22pW8kBpLs6rpKDwgnZT46hin5Hl1WzazzK64DOrhSwYpS7bQ==} + '@algolia/autocomplete-core@1.9.3': resolution: {integrity: sha512-009HdfugtGCdC4JdXUbVJClA0q0zh24yyePn+KUGk3rP7j8FEe/m5Yo/z65gn6nP/cM39PxpzqKrL7A6fP6PPw==} @@ -3694,6 +3700,27 @@ packages: resolution: {integrity: sha512-CytIvb6tVOADRngTHGWNxH8LPgO/3hi/BdCEHOf7Qd2GvZVClhVP0Wo/QHzWhpki49Bk0b4VT6xpt3fx8HTSIw==} engines: {node: '>=18'} + '@testing-library/jest-dom@6.4.6': + resolution: {integrity: sha512-8qpnGVincVDLEcQXWaHOf6zmlbwTKc6Us6PPu4CRnPXCzo2OGBS5cwgMMOWdxDpEz1mkbvXHpEy99M5Yvt682w==} + engines: {node: '>=14', npm: '>=6', yarn: '>=1'} + peerDependencies: + '@jest/globals': '>= 28' + '@types/bun': latest + '@types/jest': '>= 28' + jest: '>= 28' + vitest: '>= 0.32' + peerDependenciesMeta: + '@jest/globals': + optional: true + '@types/bun': + optional: true + '@types/jest': + optional: true + jest: + optional: true + vitest: + optional: true + '@testing-library/react@16.0.0': resolution: {integrity: sha512-guuxUKRWQ+FgNX0h0NS0FIq3Q3uLtWVpBzcLOggmfMoUpgBnzBzvLLd4fbm6yS8ydJd94cIfY4yP9qUQjM2KwQ==} engines: {node: '>=18'} @@ -4742,6 +4769,10 @@ packages: resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==} engines: {node: '>=4'} + chalk@3.0.0: + resolution: {integrity: sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==} + engines: {node: '>=8'} + chalk@4.1.0: resolution: {integrity: sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==} engines: {node: '>=10'} @@ -9918,6 +9949,8 @@ packages: snapshots: + '@adobe/css-tools@4.4.0': {} + '@algolia/autocomplete-core@1.9.3(@algolia/client-search@4.24.0)(algoliasearch@4.24.0)(search-insights@2.14.0)': dependencies: '@algolia/autocomplete-plugin-algolia-insights': 1.9.3(@algolia/client-search@4.24.0)(algoliasearch@4.24.0)(search-insights@2.14.0) @@ -12831,6 +12864,19 @@ snapshots: lz-string: 1.5.0 pretty-format: 27.5.1 + '@testing-library/jest-dom@6.4.6(vitest@2.0.0-beta.12(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.1))': + dependencies: + '@adobe/css-tools': 4.4.0 + '@babel/runtime': 7.24.7 + aria-query: 5.3.0 + chalk: 3.0.0 + css.escape: 1.5.1 + dom-accessibility-api: 0.6.3 + lodash: 4.17.21 + redent: 3.0.0 + optionalDependencies: + vitest: 2.0.0-beta.12(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.1) + '@testing-library/react@16.0.0(@testing-library/dom@10.2.0)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 @@ -13265,19 +13311,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.5.3)': - dependencies: - '@typescript-eslint/scope-manager': 7.14.1 - '@typescript-eslint/types': 7.14.1 - '@typescript-eslint/typescript-estree': 7.14.1(typescript@5.5.3) - '@typescript-eslint/visitor-keys': 7.14.1 - debug: 4.3.5 - eslint: 8.57.0 - optionalDependencies: - typescript: 5.5.3 - transitivePeerDependencies: - - supports-color - '@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3)': dependencies: '@typescript-eslint/scope-manager': 7.2.0 @@ -13353,21 +13386,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@typescript-eslint/typescript-estree@7.14.1(typescript@5.5.3)': - dependencies: - '@typescript-eslint/types': 7.14.1 - '@typescript-eslint/visitor-keys': 7.14.1 - debug: 4.3.5 - globby: 11.1.0 - is-glob: 4.0.3 - minimatch: 9.0.5 - semver: 7.6.2 - ts-api-utils: 1.3.0(typescript@5.5.3) - optionalDependencies: - typescript: 5.5.3 - transitivePeerDependencies: - - supports-color - '@typescript-eslint/typescript-estree@7.2.0(typescript@5.5.3)': dependencies: '@typescript-eslint/types': 7.2.0 @@ -14221,6 +14239,11 @@ snapshots: escape-string-regexp: 1.0.5 supports-color: 5.5.0 + chalk@3.0.0: + dependencies: + ansi-styles: 4.3.0 + supports-color: 7.2.0 + chalk@4.1.0: dependencies: ansi-styles: 4.3.0 @@ -19847,7 +19870,7 @@ snapshots: why-is-node-running: 2.2.2 optionalDependencies: '@types/node': 20.14.9 - '@vitest/browser': 2.0.0-beta.12(playwright@1.45.0)(typescript@5.5.3)(vitest@2.0.0-beta.12) + '@vitest/browser': 2.0.0-beta.12(playwright@1.45.0)(typescript@5.5.2)(vitest@2.0.0-beta.12) jsdom: 24.1.0 transitivePeerDependencies: - less diff --git a/test/setupVitest.ts b/test/setupVitest.ts index 91112248b5a..85e097f119e 100644 --- a/test/setupVitest.ts +++ b/test/setupVitest.ts @@ -1,4 +1,4 @@ -import { afterEach } from 'vitest'; +import { afterEach, vi } from 'vitest'; import failOnConsole from 'vitest-fail-on-console'; import { cleanup } from '@testing-library/react'; @@ -13,3 +13,19 @@ failOnConsole({ }); afterEach(cleanup); + +// Mocks + +Object.defineProperty(window, 'matchMedia', { + writable: true, + value: vi.fn().mockImplementation((query) => ({ + matches: false, + media: query, + onchange: null, + addListener: vi.fn(), // deprecated + removeListener: vi.fn(), // deprecated + addEventListener: vi.fn(), + removeEventListener: vi.fn(), + dispatchEvent: vi.fn(), + })), +}); From 3445321c733fde8a1282fca555c97e828187d69c Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Tue, 2 Jul 2024 21:13:15 +0100 Subject: [PATCH 16/42] dedupe -.- --- pnpm-lock.yaml | 32 ++++++++++++++++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6c6babd0b75..558ad1b0c8c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -572,7 +572,7 @@ importers: version: 8.56.10 '@typescript-eslint/parser': specifier: 7.14.1 - version: 7.14.1(eslint@8.57.0)(typescript@5.5.2) + version: 7.14.1(eslint@8.57.0)(typescript@5.5.3) packages/toolpad-core: dependencies: @@ -13311,6 +13311,19 @@ snapshots: transitivePeerDependencies: - supports-color + '@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.5.3)': + dependencies: + '@typescript-eslint/scope-manager': 7.14.1 + '@typescript-eslint/types': 7.14.1 + '@typescript-eslint/typescript-estree': 7.14.1(typescript@5.5.3) + '@typescript-eslint/visitor-keys': 7.14.1 + debug: 4.3.5 + eslint: 8.57.0 + optionalDependencies: + typescript: 5.5.3 + transitivePeerDependencies: + - supports-color + '@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3)': dependencies: '@typescript-eslint/scope-manager': 7.2.0 @@ -13386,6 +13399,21 @@ snapshots: transitivePeerDependencies: - supports-color + '@typescript-eslint/typescript-estree@7.14.1(typescript@5.5.3)': + dependencies: + '@typescript-eslint/types': 7.14.1 + '@typescript-eslint/visitor-keys': 7.14.1 + debug: 4.3.5 + globby: 11.1.0 + is-glob: 4.0.3 + minimatch: 9.0.5 + semver: 7.6.2 + ts-api-utils: 1.3.0(typescript@5.5.3) + optionalDependencies: + typescript: 5.5.3 + transitivePeerDependencies: + - supports-color + '@typescript-eslint/typescript-estree@7.2.0(typescript@5.5.3)': dependencies: '@typescript-eslint/types': 7.2.0 @@ -19870,7 +19898,7 @@ snapshots: why-is-node-running: 2.2.2 optionalDependencies: '@types/node': 20.14.9 - '@vitest/browser': 2.0.0-beta.12(playwright@1.45.0)(typescript@5.5.2)(vitest@2.0.0-beta.12) + '@vitest/browser': 2.0.0-beta.12(playwright@1.45.0)(typescript@5.5.3)(vitest@2.0.0-beta.12) jsdom: 24.1.0 transitivePeerDependencies: - less From 47b4c12380664466a4dea97c4bf52b9721dded76 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Tue, 2 Jul 2024 21:42:34 +0100 Subject: [PATCH 17/42] Conditional mock --- test/setupVitest.ts | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/test/setupVitest.ts b/test/setupVitest.ts index 85e097f119e..7fd82bf684c 100644 --- a/test/setupVitest.ts +++ b/test/setupVitest.ts @@ -16,16 +16,18 @@ afterEach(cleanup); // Mocks -Object.defineProperty(window, 'matchMedia', { - writable: true, - value: vi.fn().mockImplementation((query) => ({ - matches: false, - media: query, - onchange: null, - addListener: vi.fn(), // deprecated - removeListener: vi.fn(), // deprecated - addEventListener: vi.fn(), - removeEventListener: vi.fn(), - dispatchEvent: vi.fn(), - })), -}); +if (typeof window !== 'undefined') { + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: vi.fn().mockImplementation((query) => ({ + matches: false, + media: query, + onchange: null, + addListener: vi.fn(), // deprecated + removeListener: vi.fn(), // deprecated + addEventListener: vi.fn(), + removeEventListener: vi.fn(), + dispatchEvent: vi.fn(), + })), + }); +} From a5b37f97783f978da72b41bbd23ea71b1248e619 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Wed, 3 Jul 2024 07:45:16 +0100 Subject: [PATCH 18/42] Make themes consistent --- packages/toolpad-core/src/themes/baseDarkTheme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/toolpad-core/src/themes/baseDarkTheme.ts b/packages/toolpad-core/src/themes/baseDarkTheme.ts index 3566b71a04d..5c64c16cd1c 100644 --- a/packages/toolpad-core/src/themes/baseDarkTheme.ts +++ b/packages/toolpad-core/src/themes/baseDarkTheme.ts @@ -93,7 +93,7 @@ const baseDarkTheme = createTheme(defaultDarkTheme, { }, }, '& .MuiSvgIcon-root': { - color: defaultDarkTheme.palette.grey['100'], + color: defaultDarkTheme.palette.action.active, }, }, }, From 4b368ef2eaa79883650183c304ab9ed05220d236 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Wed, 3 Jul 2024 08:33:07 +0100 Subject: [PATCH 19/42] Improve wording a bit and seeing if CI passes --- docs/translations/api-docs/app-provider/app-provider.json | 2 +- packages/toolpad-core/src/AppProvider/AppProvider.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/translations/api-docs/app-provider/app-provider.json b/docs/translations/api-docs/app-provider/app-provider.json index 7e56b8beeca..61db5792045 100644 --- a/docs/translations/api-docs/app-provider/app-provider.json +++ b/docs/translations/api-docs/app-provider/app-provider.json @@ -6,7 +6,7 @@ "navigation": { "description": "Navigation definition for the app." }, "router": { "description": "Router implementation used inside Toolpad components." }, "theme": { - "description": "Theme to be used by the app in light/dark mode. A CSS variables theme is recommended." + "description": "Theme or themes to be used by the app in light/dark mode. A CSS variables theme is recommended." } }, "classDescriptions": {} diff --git a/packages/toolpad-core/src/AppProvider/AppProvider.tsx b/packages/toolpad-core/src/AppProvider/AppProvider.tsx index 3b1a384fa4c..a7a951d45db 100644 --- a/packages/toolpad-core/src/AppProvider/AppProvider.tsx +++ b/packages/toolpad-core/src/AppProvider/AppProvider.tsx @@ -57,7 +57,7 @@ export interface AppProviderProps { */ children: React.ReactNode; /** - * [Theme](https://mui.com/toolpad/core/react-app-provider/#theming) to be used by the app in light/dark mode. A [CSS variables theme](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/) is recommended. + * [Theme or themes](https://mui.com/toolpad/core/react-app-provider/#theming) to be used by the app in light/dark mode. A [CSS variables theme](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/) is recommended. * @default baseCSSVarsTheme */ theme?: Theme | { light: Theme; dark: Theme } | CssVarsTheme; @@ -174,7 +174,7 @@ AppProvider.propTypes /* remove-proptypes */ = { searchParams: PropTypes.instanceOf(URLSearchParams), }), /** - * [Theme](https://mui.com/toolpad/core/react-app-provider/#theming) to be used by the app in light/dark mode. A [CSS variables theme](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/) is recommended. + * [Theme or themes](https://mui.com/toolpad/core/react-app-provider/#theming) to be used by the app in light/dark mode. A [CSS variables theme](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/) is recommended. * @default baseCSSVarsTheme */ theme: PropTypes.object, From be375fd1376af8edb1c02bfcc363bfd6564708f7 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Wed, 3 Jul 2024 08:56:07 +0100 Subject: [PATCH 20/42] Docs pages self-review --- .../toolpad/core/components/app-provider/app-provider.md | 2 +- .../dashboard-layout/DashboardLayoutNavigation.js | 6 +++--- .../dashboard-layout/DashboardLayoutNavigation.tsx | 6 +++--- .../dashboard-layout/DashboardLayoutNavigation.tsx.preview | 6 +++--- .../core/components/dashboard-layout/dashboard-layout.md | 2 +- 5 files changed, 11 insertions(+), 11 deletions(-) diff --git a/docs/data/toolpad/core/components/app-provider/app-provider.md b/docs/data/toolpad/core/components/app-provider/app-provider.md index 68e4bfffd5c..b62bdac506d 100644 --- a/docs/data/toolpad/core/components/app-provider/app-provider.md +++ b/docs/data/toolpad/core/components/app-provider/app-provider.md @@ -36,7 +36,7 @@ import { AppProvider } from '@toolpad/core/nextjs'; ### Next.js App Router -When using the **Next.js App Router**, the most typical file where to import and use `AppProvider` will be at the top level `app/layout.tsx` file that defines the layout for all the application pages. +When using the **Next.js App Router**, the most typical file where to import and use `AppProvider` will be at the top level `layout.tsx` file that defines the layout for all the application pages. ```tsx // app/layout.tsx diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js index a665089d927..a836bfb4260 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js @@ -112,7 +112,7 @@ export default function DashboardLayoutNavigation() { { slug: '/mammals', title: 'Mammals', - icon: , + icon: , children: [ { slug: '/lion', @@ -129,7 +129,7 @@ export default function DashboardLayoutNavigation() { { slug: '/birds', title: 'Birds', - icon: , + icon: , children: [ { slug: '/eagle', @@ -146,7 +146,7 @@ export default function DashboardLayoutNavigation() { { slug: '/reptiles', title: 'Reptiles', - icon: , + icon: , children: [ { slug: '/crocodile', diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx index 333cd007a53..00ca5ea89ac 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx @@ -112,7 +112,7 @@ export default function DashboardLayoutNavigation() { { slug: '/mammals', title: 'Mammals', - icon: , + icon: , children: [ { slug: '/lion', @@ -129,7 +129,7 @@ export default function DashboardLayoutNavigation() { { slug: '/birds', title: 'Birds', - icon: , + icon: , children: [ { slug: '/eagle', @@ -146,7 +146,7 @@ export default function DashboardLayoutNavigation() { { slug: '/reptiles', title: 'Reptiles', - icon: , + icon: , children: [ { slug: '/crocodile', diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx.preview index 92f06f315d3..2b8e796cc0c 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx.preview +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx.preview @@ -90,7 +90,7 @@ { slug: '/mammals', title: 'Mammals', - icon: , + icon: , children: [ { slug: '/lion', @@ -107,7 +107,7 @@ { slug: '/birds', title: 'Birds', - icon: , + icon: , children: [ { slug: '/eagle', @@ -124,7 +124,7 @@ { slug: '/reptiles', title: 'Reptiles', - icon: , + icon: , children: [ { slug: '/crocodile', diff --git a/docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md b/docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md index 1d46823ff17..57481961674 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md +++ b/docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md @@ -30,7 +30,7 @@ This can be done via the `branding` prop in the [AppProvider](https://mui.com/to ## Navigation -The `navigation` prop in the [AppProvider](https://mui.com/toolpad/core/react-app-provider/) allows for setting any type of navigation structure in the `DashboardLayout` sidebar by adding different navigation elements as building blocks in any order, such as: +The `navigation` prop in the [AppProvider](https://mui.com/toolpad/core/react-app-provider/) allows for setting any type of navigation structure in the `DashboardLayout` sidebar by including different navigation elements as building blocks in any order, such as: - links `{ slug: '/home', title: 'Home', icon: }`; - headings `{ kind: 'header', title: 'Epic Fantasy' }`; From d4c85ce7fc6f35ac9274f9bed4a1c0c711ca2007 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Mon, 8 Jul 2024 18:12:25 +0100 Subject: [PATCH 21/42] Address review feedback except slots which should probably be done separately --- .../app-provider/AppProviderBasic.js | 29 ++-- .../app-provider/AppProviderBasic.tsx | 29 ++-- .../app-provider/AppProviderTheme.js | 110 ++---------- .../app-provider/AppProviderTheme.tsx | 110 ++---------- .../components/app-provider/app-provider.md | 2 +- .../dashboard-layout/DashboardLayoutBasic.js | 26 +-- .../dashboard-layout/DashboardLayoutBasic.tsx | 26 +-- .../DashboardLayoutBranding.js | 26 +-- .../DashboardLayoutBranding.tsx | 26 +-- .../DashboardLayoutNavigation.js | 26 +-- .../DashboardLayoutNavigation.tsx | 26 +-- .../core/introduction/TutorialDefault.js | 26 +-- .../core/introduction/TutorialDefault.tsx | 26 +-- .../core/introduction/TutorialPages.js | 26 +-- .../core/introduction/TutorialPages.tsx | 26 +-- examples/core-tutorial/theme.ts | 96 ----------- .../create-toolpad-app/src/generateProject.ts | 96 ----------- .../src/DashboardLayout/DashboardLayout.tsx | 158 ++++++++++++++---- .../src/themes/baseCSSVarsTheme.ts | 107 ------------ .../toolpad-core/src/themes/baseDarkTheme.ts | 104 ------------ .../toolpad-core/src/themes/baseLightTheme.ts | 96 ----------- .../nextjs-pages/src/pages/_document.tsx | 2 +- test/setupVitest.ts | 2 +- 23 files changed, 348 insertions(+), 853 deletions(-) diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.js b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.js index 941a6347e71..493d73fc809 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.js +++ b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.js @@ -17,7 +17,6 @@ const NAVIGATION = [ title: 'Page', icon: , }, - // Add the following new item: { slug: '/page-2', title: 'Page 2', @@ -25,6 +24,21 @@ const NAVIGATION = [ }, ]; +function DemoPageContent({ pathname }) { + return ( + + Dashboard content for {pathname} + + ); +} + export default function AppProviderBasic() { const [pathname, setPathname] = React.useState('/page'); @@ -37,25 +51,14 @@ export default function AppProviderBasic() { }, [pathname]); return ( - // preview-start - - Dashboard content for {pathname} - + - // preview-end ); } diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx index 867e26f5f41..62227dadfe8 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx +++ b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx @@ -18,7 +18,6 @@ const NAVIGATION: Navigation = [ title: 'Page', icon: , }, - // Add the following new item: { slug: '/page-2', title: 'Page 2', @@ -26,6 +25,21 @@ const NAVIGATION: Navigation = [ }, ]; +function DemoPageContent({ pathname }: { pathname: string }) { + return ( + + Dashboard content for {pathname} + + ); +} + export default function AppProviderBasic() { const [pathname, setPathname] = React.useState('/page'); @@ -38,25 +52,14 @@ export default function AppProviderBasic() { }, [pathname]); return ( - // preview-start - - Dashboard content for {pathname} - + - // preview-end ); } diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js index 21bf079bb76..88ead7cf1fc 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js +++ b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js @@ -24,6 +24,21 @@ const NAVIGATION = [ }, ]; +function DemoPageContent({ pathname }) { + return ( + + Dashboard content for {pathname} + + ); +} + const defaultDarkTheme = createTheme({ palette: { mode: 'dark' } }); const customTheme = createTheme(defaultDarkTheme, { @@ -42,12 +57,6 @@ const customTheme = createTheme(defaultDarkTheme, { styleOverrides: { root: { backgroundColor: '#112E4D', - backgroundImage: 'none', - borderWidth: 0, - borderBottomWidth: 1, - borderStyle: 'solid', - borderColor: defaultDarkTheme.palette.divider, - boxShadow: 'none', }, }, }, @@ -58,86 +67,10 @@ const customTheme = createTheme(defaultDarkTheme, { }, }, }, - MuiList: { - styleOverrides: { - root: { - padding: 0, - }, - }, - }, - MuiIconButton: { - styleOverrides: { - root: { - color: defaultDarkTheme.palette.primary.dark, - padding: 8, - }, - }, - }, MuiListSubheader: { styleOverrides: { root: { backgroundColor: '#112E4D', - fontSize: 12, - fontWeight: '700', - height: 40, - paddingLeft: 32, - }, - }, - }, - MuiListItem: { - styleOverrides: { - root: { - paddingTop: 0, - paddingBottom: 0, - }, - }, - }, - MuiListItemButton: { - styleOverrides: { - root: { - borderRadius: 8, - '&.Mui-selected': { - '& .MuiListItemIcon-root': { - color: defaultDarkTheme.palette.primary.dark, - }, - '& .MuiTypography-root': { - color: defaultDarkTheme.palette.primary.dark, - }, - '& .MuiSvgIcon-root': { - color: defaultDarkTheme.palette.primary.dark, - }, - '& .MuiTouchRipple-child': { - backgroundColor: defaultDarkTheme.palette.primary.dark, - }, - }, - '& .MuiSvgIcon-root': { - color: defaultDarkTheme.palette.action.active, - }, - }, - }, - }, - MuiListItemText: { - styleOverrides: { - root: { - '& .MuiTypography-root': { - fontWeight: '500', - }, - }, - }, - }, - MuiListItemIcon: { - styleOverrides: { - root: { - minWidth: 34, - }, - }, - }, - MuiDivider: { - styleOverrides: { - root: { - borderBottomWidth: 2, - marginLeft: '16px', - marginRight: '16px', }, }, }, @@ -156,21 +89,10 @@ export default function AppProviderTheme() { }, [pathname]); return ( - // preview-start - - Dashboard content for {pathname} - + - // preview-end ); } diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx index 08666428b04..6bc46a95a5f 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx +++ b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx @@ -43,12 +43,6 @@ const customTheme: Theme = createTheme(defaultDarkTheme, { styleOverrides: { root: { backgroundColor: '#112E4D', - backgroundImage: 'none', - borderWidth: 0, - borderBottomWidth: 1, - borderStyle: 'solid', - borderColor: defaultDarkTheme.palette.divider, - boxShadow: 'none', }, }, }, @@ -59,92 +53,31 @@ const customTheme: Theme = createTheme(defaultDarkTheme, { }, }, }, - MuiList: { - styleOverrides: { - root: { - padding: 0, - }, - }, - }, - MuiIconButton: { - styleOverrides: { - root: { - color: defaultDarkTheme.palette.primary.dark, - padding: 8, - }, - }, - }, MuiListSubheader: { styleOverrides: { root: { backgroundColor: '#112E4D', - fontSize: 12, - fontWeight: '700', - height: 40, - paddingLeft: 32, - }, - }, - }, - MuiListItem: { - styleOverrides: { - root: { - paddingTop: 0, - paddingBottom: 0, - }, - }, - }, - MuiListItemButton: { - styleOverrides: { - root: { - borderRadius: 8, - '&.Mui-selected': { - '& .MuiListItemIcon-root': { - color: defaultDarkTheme.palette.primary.dark, - }, - '& .MuiTypography-root': { - color: defaultDarkTheme.palette.primary.dark, - }, - '& .MuiSvgIcon-root': { - color: defaultDarkTheme.palette.primary.dark, - }, - '& .MuiTouchRipple-child': { - backgroundColor: defaultDarkTheme.palette.primary.dark, - }, - }, - '& .MuiSvgIcon-root': { - color: defaultDarkTheme.palette.action.active, - }, - }, - }, - }, - MuiListItemText: { - styleOverrides: { - root: { - '& .MuiTypography-root': { - fontWeight: '500', - }, - }, - }, - }, - MuiListItemIcon: { - styleOverrides: { - root: { - minWidth: 34, - }, - }, - }, - MuiDivider: { - styleOverrides: { - root: { - borderBottomWidth: 2, - marginLeft: '16px', - marginRight: '16px', }, }, }, }, }); +function DemoPageContent({ pathname }: { pathname: string }) { + return ( + + Dashboard content for {pathname} + + ); +} + export default function AppProviderTheme() { const [pathname, setPathname] = React.useState('/page'); @@ -157,21 +90,10 @@ export default function AppProviderTheme() { }, [pathname]); return ( - // preview-start - - Dashboard content for {pathname} - + - // preview-end ); } diff --git a/docs/data/toolpad/core/components/app-provider/app-provider.md b/docs/data/toolpad/core/components/app-provider/app-provider.md index b62bdac506d..6d5e26e059a 100644 --- a/docs/data/toolpad/core/components/app-provider/app-provider.md +++ b/docs/data/toolpad/core/components/app-provider/app-provider.md @@ -18,7 +18,7 @@ Wrap an application page with the `AppProvider` component. Ideally, the `AppProvider` should wrap every page in the application, therefore in most projects it should be imported and placed in the file that defines a **shared layout** for all pages. -In the following (purely demonstrative) example, an `AppProvider` component wrapping the page provides it with a default theme, and a `DashboardLayout` placed inside it gets its navigation and routing features automatically set based on the props passed to the `AppProvider`. +In the following example, an `AppProvider` component wrapping the page provides it with a default theme, and a `DashboardLayout` placed inside it gets its navigation and routing features automatically set based on the props passed to the `AppProvider`. {{"demo": "AppProviderBasic.js", "height": 500, "iframe": true}} diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js index fc8e0db30d6..c93b690094e 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js @@ -56,6 +56,21 @@ const NAVIGATION = [ }, ]; +function DemoPageContent({ pathname }) { + return ( + + Dashboard content for {pathname} + + ); +} + export default function DashboardLayoutBasic() { const [pathname, setPathname] = React.useState('/page'); @@ -75,16 +90,7 @@ export default function DashboardLayoutBasic() { theme={{ light: baseLightTheme, dark: baseDarkTheme }} > - - Dashboard content for {pathname} - + // preview-end diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx index 6f547126c94..92db38a5b1c 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx @@ -57,6 +57,21 @@ const NAVIGATION: Navigation = [ }, ]; +function DemoPageContent({ pathname }: { pathname: string }) { + return ( + + Dashboard content for {pathname} + + ); +} + export default function DashboardLayoutBasic() { const [pathname, setPathname] = React.useState('/page'); @@ -76,16 +91,7 @@ export default function DashboardLayoutBasic() { theme={{ light: baseLightTheme, dark: baseDarkTheme }} > - - Dashboard content for {pathname} - + // preview-end diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js index 099cdca5039..083e091ac58 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js @@ -20,6 +20,21 @@ const NAVIGATION = [ }, ]; +function DemoPageContent({ pathname }: { pathname: string }) { + return ( + + Dashboard content for {pathname} + + ); +} + export default function DashboardLayoutBranding() { const [pathname, setPathname] = React.useState('/page'); @@ -43,16 +58,7 @@ export default function DashboardLayoutBranding() { theme={{ light: baseLightTheme, dark: baseDarkTheme }} > - - Dashboard content for {pathname} - + // preview-end diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx index 912d9dda8cc..3455a0404c1 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx @@ -21,6 +21,21 @@ const NAVIGATION: Navigation = [ }, ]; +function DemoPageContent({ pathname }: { pathname: string }) { + return ( + + Dashboard content for {pathname} + + ); +} + export default function DashboardLayoutBranding() { const [pathname, setPathname] = React.useState('/page'); @@ -44,16 +59,7 @@ export default function DashboardLayoutBranding() { theme={{ light: baseLightTheme, dark: baseDarkTheme }} > - - Dashboard content for {pathname} - + // preview-end diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js index a836bfb4260..b412c838526 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js @@ -7,6 +7,21 @@ import { AppProvider } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; import { baseDarkTheme, baseLightTheme } from '@toolpad/core/themes'; +function DemoPageContent({ pathname }) { + return ( + + Dashboard content for {pathname} + + ); +} + export default function DashboardLayoutNavigation() { const [pathname, setPathname] = React.useState('/page'); @@ -165,16 +180,7 @@ export default function DashboardLayoutNavigation() { theme={{ light: baseLightTheme, dark: baseDarkTheme }} > - - Dashboard content for {pathname} - + // preview-end diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx index 00ca5ea89ac..d0d90f8720c 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx @@ -7,6 +7,21 @@ import { AppProvider, Router } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; import { baseDarkTheme, baseLightTheme } from '@toolpad/core/themes'; +function DemoPageContent({ pathname }: { pathname: string }) { + return ( + + Dashboard content for {pathname} + + ); +} + export default function DashboardLayoutNavigation() { const [pathname, setPathname] = React.useState('/page'); @@ -165,16 +180,7 @@ export default function DashboardLayoutNavigation() { theme={{ light: baseLightTheme, dark: baseDarkTheme }} > - - Dashboard content for {pathname} - + // preview-end diff --git a/docs/data/toolpad/core/introduction/TutorialDefault.js b/docs/data/toolpad/core/introduction/TutorialDefault.js index 5a90f2cb218..34fe30285df 100644 --- a/docs/data/toolpad/core/introduction/TutorialDefault.js +++ b/docs/data/toolpad/core/introduction/TutorialDefault.js @@ -12,20 +12,26 @@ const NAVIGATION = [ }, ]; +function DemoPageContent() { + return ( + + Dashboard content + + ); +} + export default function TutorialDefault() { return ( - - Dashboard content - + ); diff --git a/docs/data/toolpad/core/introduction/TutorialDefault.tsx b/docs/data/toolpad/core/introduction/TutorialDefault.tsx index ae7e266274b..b1b95b8dce4 100644 --- a/docs/data/toolpad/core/introduction/TutorialDefault.tsx +++ b/docs/data/toolpad/core/introduction/TutorialDefault.tsx @@ -12,20 +12,26 @@ const NAVIGATION: Navigation = [ }, ]; +function DemoPageContent() { + return ( + + Dashboard content + + ); +} + export default function TutorialDefault() { return ( - - Dashboard content - + ); diff --git a/docs/data/toolpad/core/introduction/TutorialPages.js b/docs/data/toolpad/core/introduction/TutorialPages.js index 94f6e7330d7..308fd9e96f5 100644 --- a/docs/data/toolpad/core/introduction/TutorialPages.js +++ b/docs/data/toolpad/core/introduction/TutorialPages.js @@ -24,6 +24,21 @@ const NAVIGATION = [ }, ]; +function DemoPageContent({ pathname }) { + return ( + + Dashboard content for {pathname} + + ); +} + export default function TutorialPages() { const [pathname, setPathname] = React.useState('/page'); @@ -38,16 +53,7 @@ export default function TutorialPages() { return ( - - Dashboard content for {pathname} - + ); diff --git a/docs/data/toolpad/core/introduction/TutorialPages.tsx b/docs/data/toolpad/core/introduction/TutorialPages.tsx index 0c2edcec8ff..cb1700b83c1 100644 --- a/docs/data/toolpad/core/introduction/TutorialPages.tsx +++ b/docs/data/toolpad/core/introduction/TutorialPages.tsx @@ -24,6 +24,21 @@ const NAVIGATION: Navigation = [ }, ]; +function DemoPageContent({ pathname }: { pathname: string }) { + return ( + + Dashboard content for {pathname} + + ); +} + export default function TutorialPages() { const [pathname, setPathname] = React.useState('/page'); @@ -38,16 +53,7 @@ export default function TutorialPages() { return ( - - Dashboard content for {pathname} - + ); diff --git a/examples/core-tutorial/theme.ts b/examples/core-tutorial/theme.ts index 354fcbdd88f..facb392920a 100644 --- a/examples/core-tutorial/theme.ts +++ b/examples/core-tutorial/theme.ts @@ -14,102 +14,6 @@ const theme = createTheme(defaultTheme, { fontWeight: '700', }, }, - components: { - MuiAppBar: { - styleOverrides: { - root: { - borderWidth: 0, - borderBottomWidth: 1, - borderStyle: 'solid', - borderColor: defaultTheme.palette.divider, - boxShadow: 'none', - }, - }, - }, - MuiList: { - styleOverrides: { - root: { - padding: 0, - }, - }, - }, - MuiIconButton: { - styleOverrides: { - root: { - color: defaultTheme.palette.primary.dark, - padding: 8, - }, - }, - }, - MuiListSubheader: { - styleOverrides: { - root: { - color: defaultTheme.palette.grey['600'], - fontSize: 12, - fontWeight: '700', - height: 40, - paddingLeft: 32, - }, - }, - }, - MuiListItem: { - styleOverrides: { - root: { - paddingTop: 0, - paddingBottom: 0, - }, - }, - }, - MuiListItemButton: { - styleOverrides: { - root: { - borderRadius: 8, - '&.Mui-selected': { - '& .MuiListItemIcon-root': { - color: defaultTheme.palette.primary.dark, - }, - '& .MuiTypography-root': { - color: defaultTheme.palette.primary.dark, - }, - '& .MuiSvgIcon-root': { - color: defaultTheme.palette.primary.dark, - }, - '& .MuiTouchRipple-child': { - backgroundColor: defaultTheme.palette.primary.dark, - }, - }, - '& .MuiSvgIcon-root': { - color: defaultTheme.palette.action.active, - }, - }, - }, - }, - MuiListItemText: { - styleOverrides: { - root: { - '& .MuiTypography-root': { - fontWeight: '500', - }, - }, - }, - }, - MuiListItemIcon: { - styleOverrides: { - root: { - minWidth: 34, - }, - }, - }, - MuiDivider: { - styleOverrides: { - root: { - borderBottomWidth: 2, - marginLeft: '16px', - marginRight: '16px', - }, - }, - }, - }, }); export default theme; diff --git a/packages/create-toolpad-app/src/generateProject.ts b/packages/create-toolpad-app/src/generateProject.ts index 288b4dea5a3..0d7c4b4e2f5 100644 --- a/packages/create-toolpad-app/src/generateProject.ts +++ b/packages/create-toolpad-app/src/generateProject.ts @@ -118,102 +118,6 @@ export default function generateProject( fontWeight: '700', }, }, - components: { - MuiAppBar: { - styleOverrides: { - root: { - borderWidth: 0, - borderBottomWidth: 1, - borderStyle: 'solid', - borderColor: defaultTheme.palette.divider, - boxShadow: 'none', - }, - }, - }, - MuiList: { - styleOverrides: { - root: { - padding: 0, - }, - }, - }, - MuiIconButton: { - styleOverrides: { - root: { - color: defaultTheme.palette.primary.dark, - padding: 8, - }, - }, - }, - MuiListSubheader: { - styleOverrides: { - root: { - color: defaultTheme.palette.grey['600'], - fontSize: 12, - fontWeight: '700', - height: 40, - paddingLeft: 32, - }, - }, - }, - MuiListItem: { - styleOverrides: { - root: { - paddingTop: 0, - paddingBottom: 0, - }, - }, - }, - MuiListItemButton: { - styleOverrides: { - root: { - borderRadius: 8, - '&.Mui-selected': { - '& .MuiListItemIcon-root': { - color: defaultTheme.palette.primary.dark, - }, - '& .MuiTypography-root': { - color: defaultTheme.palette.primary.dark, - }, - '& .MuiSvgIcon-root': { - color: defaultTheme.palette.primary.dark, - }, - '& .MuiTouchRipple-child': { - backgroundColor: defaultTheme.palette.primary.dark, - }, - }, - '& .MuiSvgIcon-root': { - color: defaultTheme.palette.action.active, - }, - }, - }, - }, - MuiListItemText: { - styleOverrides: { - root: { - '& .MuiTypography-root': { - fontWeight: '500', - }, - }, - }, - }, - MuiListItemIcon: { - styleOverrides: { - root: { - minWidth: 34, - }, - }, - }, - MuiDivider: { - styleOverrides: { - root: { - borderBottomWidth: 2, - marginLeft: '16px', - marginRight: '16px', - }, - }, - }, - }, }); export default theme; diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx index 176fac6e54a..5d33edf7100 100644 --- a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx +++ b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { styled } from '@mui/material'; -import AppBar from '@mui/material/AppBar'; +import MuiAppBar from '@mui/material/AppBar'; import Box from '@mui/material/Box'; import Collapse from '@mui/material/Collapse'; import Container from '@mui/material/Container'; @@ -23,6 +23,7 @@ import DarkModeIcon from '@mui/icons-material/DarkMode'; import LightModeIcon from '@mui/icons-material/LightMode'; import ExpandLessIcon from '@mui/icons-material/ExpandLess'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import useSsr from '@toolpad/utils/hooks/useSsr'; import { BrandingContext, NavigationContext, @@ -34,6 +35,16 @@ import { ToolpadLogo } from './ToolpadLogo'; const DRAWER_WIDTH = 320; +const AppBar = styled(MuiAppBar)(({ theme }) => ({ + backgroundColor: (theme.vars ?? theme).palette.background.paper, + borderWidth: 0, + borderBottomWidth: 1, + borderStyle: 'solid', + borderColor: (theme.vars ?? theme).palette.divider, + boxShadow: 'none', + zIndex: theme.zIndex.drawer + 1, +})); + const LogoContainer = styled('div')({ position: 'relative', height: 40, @@ -42,6 +53,72 @@ const LogoContainer = styled('div')({ }, }); +const NavigationListItemButton = styled(ListItemButton)(({ theme }) => ({ + borderRadius: 8, + '&.Mui-selected': { + '& .MuiListItemIcon-root': { + color: (theme.vars ?? theme).palette.primary.dark, + }, + '& .MuiTypography-root': { + color: (theme.vars ?? theme).palette.primary.dark, + }, + '& .MuiSvgIcon-root': { + color: (theme.vars ?? theme).palette.primary.dark, + }, + '& .MuiTouchRipple-child': { + backgroundColor: (theme.vars ?? theme).palette.primary.dark, + }, + }, + '& .MuiSvgIcon-root': { + color: (theme.vars ?? theme).palette.action.active, + }, +})); + +function ThemeSwitcher() { + const isSsr = useSsr(); + + const { paletteMode, setPaletteMode, isDualTheme } = React.useContext(PaletteModeContext); + + const toggleMode = React.useCallback(() => { + setPaletteMode(paletteMode === 'dark' ? 'light' : 'dark'); + }, [paletteMode, setPaletteMode]); + + return isDualTheme ? ( + + ({ + color: (theme.vars ?? theme).palette.primary.dark, + padding: 1, + })} + > + + ({ + [theme.getColorSchemeSelector('dark')]: { + display: 'none', + }, + })} + /> + ({ + display: 'none', + [theme.getColorSchemeSelector('dark')]: { + display: 'inline', + }, + })} + /> + + + + ) : null; +} + interface DashboardSidebarSubNavigationProps { subNavigation: Navigation; basePath?: string; @@ -111,11 +188,24 @@ function DashboardSidebarSubNavigation({ }, [routerContext]); return ( - + {subNavigation.map((navigationItem, navigationItemIndex) => { if (navigationItem.kind === 'header') { return ( - + ({ + color: (theme.vars ?? theme).palette.grey['600'], + fontSize: 12, + fontWeight: '700', + height: 40, + pl: 4, + [theme.getColorSchemeSelector('dark')]: { + color: (theme.vars ?? theme).palette.grey['500'], + }, + })} + > {navigationItem.title} ); @@ -127,7 +217,13 @@ function DashboardSidebarSubNavigation({ return ( ); } @@ -145,15 +241,28 @@ function DashboardSidebarSubNavigation({ ); const listItem = ( - - + - {navigationItem.icon} - + + {navigationItem.icon} + + {navigationItem.children ? nestedNavigationCollapseIcon : null} - + ); @@ -209,27 +318,11 @@ function DashboardLayout(props: DashboardLayoutProps) { const branding = React.useContext(BrandingContext); const navigation = React.useContext(NavigationContext); - const { paletteMode, setPaletteMode, isDualTheme } = React.useContext(PaletteModeContext); - - const [hasMounted, setHasMounted] = React.useState(false); - React.useEffect(() => { - setHasMounted(true); - }, []); - - const toggleMode = React.useCallback(() => { - setPaletteMode(paletteMode === 'dark' ? 'light' : 'dark'); - }, [paletteMode, setPaletteMode]); return ( - theme.zIndex.drawer + 1, - }} - > - + + @@ -244,16 +337,7 @@ function DashboardLayout(props: DashboardLayoutProps) { - {hasMounted && isDualTheme ? ( - - - {paletteMode === 'dark' ? : } - - - ) : null} + ({ - backgroundColor: theme.vars.palette.background.paper, - borderWidth: 0, - borderBottomWidth: 1, - borderStyle: 'solid', - borderColor: theme.vars.palette.divider, - boxShadow: 'none', - }), - }, - }, - MuiToolbar: { - styleOverrides: { - root: { - backgroundColor: 'inherit', - }, - }, - }, - MuiList: { - styleOverrides: { - root: { - padding: 0, - }, - }, - }, - MuiIconButton: { - styleOverrides: { - root: ({ theme }) => ({ - color: theme.vars.palette.primary.dark, - padding: 8, - }), - }, - }, - MuiListSubheader: { - styleOverrides: { - root: ({ theme }) => ({ - color: theme.vars.palette.grey['600'], - fontSize: 12, - fontWeight: '700', - height: 40, - paddingLeft: 32, - [theme.getColorSchemeSelector('dark')]: { - color: theme.vars.palette.grey['500'], - }, - }), - }, - }, - MuiListItem: { - styleOverrides: { - root: { - paddingTop: 0, - paddingBottom: 0, - }, - }, - }, - MuiListItemButton: { - styleOverrides: { - root: ({ theme }) => ({ - borderRadius: 8, - '&.Mui-selected': { - '& .MuiListItemIcon-root': { - color: theme.vars.palette.primary.dark, - }, - '& .MuiTypography-root': { - color: theme.vars.palette.primary.dark, - }, - '& .MuiSvgIcon-root': { - color: theme.vars.palette.primary.dark, - }, - '& .MuiTouchRipple-child': { - backgroundColor: theme.vars.palette.primary.dark, - }, - }, - '& .MuiSvgIcon-root': { - color: theme.vars.palette.action.active, - }, - }), - }, - }, - MuiListItemText: { - styleOverrides: { - root: { - '& .MuiTypography-root': { - fontWeight: '500', - }, - }, - }, - }, - MuiListItemIcon: { - styleOverrides: { - root: { - minWidth: 34, - }, - }, - }, - MuiDivider: { - styleOverrides: { - root: { - borderBottomWidth: 2, - marginLeft: '16px', - marginRight: '16px', - }, - }, - }, - }, }); export { baseCSSVarsTheme }; diff --git a/packages/toolpad-core/src/themes/baseDarkTheme.ts b/packages/toolpad-core/src/themes/baseDarkTheme.ts index 5c64c16cd1c..e9cecf902f7 100644 --- a/packages/toolpad-core/src/themes/baseDarkTheme.ts +++ b/packages/toolpad-core/src/themes/baseDarkTheme.ts @@ -20,110 +20,6 @@ const baseDarkTheme = createTheme(defaultDarkTheme, { fontWeight: '700', }, }, - components: { - MuiAppBar: { - styleOverrides: { - root: { - backgroundColor: defaultDarkTheme.palette.background.default, - borderWidth: 0, - borderBottomWidth: 1, - borderStyle: 'solid', - borderColor: defaultDarkTheme.palette.divider, - boxShadow: 'none', - }, - }, - }, - MuiToolbar: { - styleOverrides: { - root: { - backgroundColor: 'inherit', - }, - }, - }, - MuiList: { - styleOverrides: { - root: { - padding: 0, - }, - }, - }, - MuiIconButton: { - styleOverrides: { - root: { - color: defaultDarkTheme.palette.primary.dark, - padding: 8, - }, - }, - }, - MuiListSubheader: { - styleOverrides: { - root: { - color: defaultDarkTheme.palette.grey['500'], - fontSize: 12, - fontWeight: '700', - height: 40, - paddingLeft: 32, - }, - }, - }, - MuiListItem: { - styleOverrides: { - root: { - paddingTop: 0, - paddingBottom: 0, - }, - }, - }, - MuiListItemButton: { - styleOverrides: { - root: { - borderRadius: 8, - '&.Mui-selected': { - '& .MuiListItemIcon-root': { - color: defaultDarkTheme.palette.primary.dark, - }, - '& .MuiTypography-root': { - color: defaultDarkTheme.palette.primary.dark, - }, - '& .MuiSvgIcon-root': { - color: defaultDarkTheme.palette.primary.dark, - }, - '& .MuiTouchRipple-child': { - backgroundColor: defaultDarkTheme.palette.primary.dark, - }, - }, - '& .MuiSvgIcon-root': { - color: defaultDarkTheme.palette.action.active, - }, - }, - }, - }, - MuiListItemText: { - styleOverrides: { - root: { - '& .MuiTypography-root': { - fontWeight: '500', - }, - }, - }, - }, - MuiListItemIcon: { - styleOverrides: { - root: { - minWidth: 34, - }, - }, - }, - MuiDivider: { - styleOverrides: { - root: { - borderBottomWidth: 2, - marginLeft: '16px', - marginRight: '16px', - }, - }, - }, - }, }); export { baseDarkTheme }; diff --git a/packages/toolpad-core/src/themes/baseLightTheme.ts b/packages/toolpad-core/src/themes/baseLightTheme.ts index d10da0cd6b5..25d0483921a 100644 --- a/packages/toolpad-core/src/themes/baseLightTheme.ts +++ b/packages/toolpad-core/src/themes/baseLightTheme.ts @@ -13,102 +13,6 @@ const baseLightTheme = createTheme(defaultLightTheme, { fontWeight: '700', }, }, - components: { - MuiAppBar: { - styleOverrides: { - root: { - borderWidth: 0, - borderBottomWidth: 1, - borderStyle: 'solid', - borderColor: defaultLightTheme.palette.divider, - boxShadow: 'none', - }, - }, - }, - MuiList: { - styleOverrides: { - root: { - padding: 0, - }, - }, - }, - MuiIconButton: { - styleOverrides: { - root: { - color: defaultLightTheme.palette.primary.dark, - padding: 8, - }, - }, - }, - MuiListSubheader: { - styleOverrides: { - root: { - color: defaultLightTheme.palette.grey['600'], - fontSize: 12, - fontWeight: '700', - height: 40, - paddingLeft: 32, - }, - }, - }, - MuiListItem: { - styleOverrides: { - root: { - paddingTop: 0, - paddingBottom: 0, - }, - }, - }, - MuiListItemButton: { - styleOverrides: { - root: { - borderRadius: 8, - '&.Mui-selected': { - '& .MuiListItemIcon-root': { - color: defaultLightTheme.palette.primary.dark, - }, - '& .MuiTypography-root': { - color: defaultLightTheme.palette.primary.dark, - }, - '& .MuiSvgIcon-root': { - color: defaultLightTheme.palette.primary.dark, - }, - '& .MuiTouchRipple-child': { - backgroundColor: defaultLightTheme.palette.primary.dark, - }, - }, - '& .MuiSvgIcon-root': { - color: defaultLightTheme.palette.action.active, - }, - }, - }, - }, - MuiListItemText: { - styleOverrides: { - root: { - '& .MuiTypography-root': { - fontWeight: '500', - }, - }, - }, - }, - MuiListItemIcon: { - styleOverrides: { - root: { - minWidth: 34, - }, - }, - }, - MuiDivider: { - styleOverrides: { - root: { - borderBottomWidth: 2, - marginLeft: '16px', - marginRight: '16px', - }, - }, - }, - }, }); export { baseLightTheme }; diff --git a/playground/nextjs-pages/src/pages/_document.tsx b/playground/nextjs-pages/src/pages/_document.tsx index aa20c679a3f..2797ed105d9 100644 --- a/playground/nextjs-pages/src/pages/_document.tsx +++ b/playground/nextjs-pages/src/pages/_document.tsx @@ -8,7 +8,7 @@ import { export default function Document(props: DocumentProps & DocumentHeadTagsProps) { return ( - + diff --git a/test/setupVitest.ts b/test/setupVitest.ts index 7fd82bf684c..b5cb10f1dbb 100644 --- a/test/setupVitest.ts +++ b/test/setupVitest.ts @@ -16,7 +16,7 @@ afterEach(cleanup); // Mocks -if (typeof window !== 'undefined') { +if (typeof window !== 'undefined' && !window.matchMedia) { Object.defineProperty(window, 'matchMedia', { writable: true, value: vi.fn().mockImplementation((query) => ({ From 08da901fd129d6ccda4dd25dada45b71df0642fe Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Mon, 8 Jul 2024 18:13:42 +0100 Subject: [PATCH 22/42] Run docs scripts --- .../app-provider/AppProviderBasic.js | 5 +++ .../app-provider/AppProviderBasic.tsx.preview | 21 ++--------- .../app-provider/AppProviderTheme.js | 35 +++++++++++-------- .../app-provider/AppProviderTheme.tsx.preview | 17 ++------- .../dashboard-layout/DashboardLayoutBasic.js | 5 +++ .../DashboardLayoutBasic.tsx.preview | 11 +----- .../DashboardLayoutBranding.js | 9 +++-- .../DashboardLayoutBranding.tsx.preview | 11 +----- .../DashboardLayoutNavigation.js | 5 +++ .../DashboardLayoutNavigation.tsx.preview | 11 +----- .../introduction/TutorialDefault.tsx.preview | 11 +----- .../core/introduction/TutorialPages.js | 5 +++ .../introduction/TutorialPages.tsx.preview | 11 +----- 13 files changed, 58 insertions(+), 99 deletions(-) diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.js b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.js index 493d73fc809..7222c5b387f 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.js +++ b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.js @@ -1,4 +1,5 @@ import * as React from 'react'; +import PropTypes from 'prop-types'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import DashboardIcon from '@mui/icons-material/Dashboard'; @@ -39,6 +40,10 @@ function DemoPageContent({ pathname }) { ); } +DemoPageContent.propTypes = { + pathname: PropTypes.string.isRequired, +}; + export default function AppProviderBasic() { const [pathname, setPathname] = React.useState('/page'); diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx.preview b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx.preview index f6f259deb16..96d68868d23 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx.preview +++ b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx.preview @@ -1,18 +1,3 @@ - - - - Dashboard content for {pathname} - - - \ No newline at end of file + + + \ No newline at end of file diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js index 88ead7cf1fc..505ee87edad 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js +++ b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js @@ -1,4 +1,5 @@ import * as React from 'react'; +import PropTypes from 'prop-types'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import { createTheme } from '@mui/material/styles'; @@ -24,21 +25,6 @@ const NAVIGATION = [ }, ]; -function DemoPageContent({ pathname }) { - return ( - - Dashboard content for {pathname} - - ); -} - const defaultDarkTheme = createTheme({ palette: { mode: 'dark' } }); const customTheme = createTheme(defaultDarkTheme, { @@ -77,6 +63,25 @@ const customTheme = createTheme(defaultDarkTheme, { }, }); +function DemoPageContent({ pathname }) { + return ( + + Dashboard content for {pathname} + + ); +} + +DemoPageContent.propTypes = { + pathname: PropTypes.string.isRequired, +}; + export default function AppProviderTheme() { const [pathname, setPathname] = React.useState('/page'); diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx.preview b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx.preview index 999c4846cc6..96d68868d23 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx.preview +++ b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx.preview @@ -1,14 +1,3 @@ - - - - Dashboard content for {pathname} - - - \ No newline at end of file + + + \ No newline at end of file diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js index c93b690094e..b999d3d12cd 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js @@ -1,4 +1,5 @@ import * as React from 'react'; +import PropTypes from 'prop-types'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import DashboardIcon from '@mui/icons-material/Dashboard'; @@ -71,6 +72,10 @@ function DemoPageContent({ pathname }) { ); } +DemoPageContent.propTypes = { + pathname: PropTypes.string.isRequired, +}; + export default function DashboardLayoutBasic() { const [pathname, setPathname] = React.useState('/page'); diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx.preview index f6f259deb16..3d32e4704ab 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx.preview +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx.preview @@ -4,15 +4,6 @@ theme={{ light: baseLightTheme, dark: baseDarkTheme }} > - - Dashboard content for {pathname} - + \ No newline at end of file diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js index 083e091ac58..787873c4ad0 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js @@ -1,4 +1,5 @@ import * as React from 'react'; +import PropTypes from 'prop-types'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import DashboardIcon from '@mui/icons-material/Dashboard'; @@ -20,7 +21,7 @@ const NAVIGATION = [ }, ]; -function DemoPageContent({ pathname }: { pathname: string }) { +function DemoPageContent({ pathname }) { return ( - + // preview-end diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx.preview index 830645d3943..c87302b5c85 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx.preview +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx.preview @@ -8,15 +8,6 @@ theme={{ light: baseLightTheme, dark: baseDarkTheme }} > - - Dashboard content for {pathname} - + \ No newline at end of file diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js index b412c838526..b7363d6a502 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js @@ -1,4 +1,5 @@ import * as React from 'react'; +import PropTypes from 'prop-types'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import DescriptionIcon from '@mui/icons-material/Description'; @@ -22,6 +23,10 @@ function DemoPageContent({ pathname }) { ); } +DemoPageContent.propTypes = { + pathname: PropTypes.string.isRequired, +}; + export default function DashboardLayoutNavigation() { const [pathname, setPathname] = React.useState('/page'); diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx.preview index 2b8e796cc0c..5bcf515a625 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx.preview +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx.preview @@ -143,15 +143,6 @@ theme={{ light: baseLightTheme, dark: baseDarkTheme }} > - - Dashboard content for {pathname} - + \ No newline at end of file diff --git a/docs/data/toolpad/core/introduction/TutorialDefault.tsx.preview b/docs/data/toolpad/core/introduction/TutorialDefault.tsx.preview index 73cc7e927f4..3e244843ec9 100644 --- a/docs/data/toolpad/core/introduction/TutorialDefault.tsx.preview +++ b/docs/data/toolpad/core/introduction/TutorialDefault.tsx.preview @@ -1,12 +1,3 @@ - - Dashboard content - + \ No newline at end of file diff --git a/docs/data/toolpad/core/introduction/TutorialPages.js b/docs/data/toolpad/core/introduction/TutorialPages.js index 308fd9e96f5..afec1efb0a2 100644 --- a/docs/data/toolpad/core/introduction/TutorialPages.js +++ b/docs/data/toolpad/core/introduction/TutorialPages.js @@ -1,4 +1,5 @@ import * as React from 'react'; +import PropTypes from 'prop-types'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import DashboardIcon from '@mui/icons-material/Dashboard'; @@ -39,6 +40,10 @@ function DemoPageContent({ pathname }) { ); } +DemoPageContent.propTypes = { + pathname: PropTypes.string.isRequired, +}; + export default function TutorialPages() { const [pathname, setPathname] = React.useState('/page'); diff --git a/docs/data/toolpad/core/introduction/TutorialPages.tsx.preview b/docs/data/toolpad/core/introduction/TutorialPages.tsx.preview index 519caf4aa97..96d68868d23 100644 --- a/docs/data/toolpad/core/introduction/TutorialPages.tsx.preview +++ b/docs/data/toolpad/core/introduction/TutorialPages.tsx.preview @@ -1,12 +1,3 @@ - - Dashboard content for {pathname} - + \ No newline at end of file From 5681e956d6e3bbc8ac969030d66089c230016a70 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Mon, 8 Jul 2024 18:42:46 +0100 Subject: [PATCH 23/42] Conflitinhos --- pnpm-lock.yaml | 519 +++++++++++++++++++++++++++++++++++-------------- 1 file changed, 373 insertions(+), 146 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 558ad1b0c8c..484ab277f11 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -16,7 +16,7 @@ importers: version: 4.17.6 '@vitest/browser': specifier: beta - version: 2.0.0-beta.12(playwright@1.45.0)(typescript@5.5.2)(vitest@2.0.0-beta.12) + version: 2.0.0-beta.13(playwright@1.45.1)(typescript@5.5.2)(vitest@2.0.0-beta.13) archiver: specifier: 7.0.1 version: 7.0.1 @@ -49,7 +49,7 @@ importers: version: 4.16.0 vitest: specifier: beta - version: 2.0.0-beta.12(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.1) + version: 2.0.0-beta.13(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.13)(jsdom@24.1.0)(terser@5.31.1) yargs: specifier: 17.7.2 version: 17.7.2 @@ -101,7 +101,7 @@ importers: version: https://codeload.github.com/mui/material-ui/tar.gz/c47e4d83785b3f4eda5c738442c18ad7befcacb9(@opentelemetry/api@1.9.0)(encoding@0.1.13) '@mui/x-charts': specifier: 7.8.0 - version: 7.8.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 7.8.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@next/eslint-plugin-next': specifier: 14.2.4 version: 14.2.4 @@ -110,7 +110,7 @@ importers: version: 1.45.0 '@testing-library/jest-dom': specifier: ^6.4.6 - version: 6.4.6(vitest@2.0.0-beta.12(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.1)) + version: 6.4.6(vitest@2.0.0-beta.13(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.13)(jsdom@24.1.0)(terser@5.31.1)) '@testing-library/react': specifier: 16.0.0 version: 16.0.0(@testing-library/dom@10.2.0)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -143,7 +143,7 @@ importers: version: 7.14.1(eslint@8.57.0)(typescript@5.5.2) '@vitest/coverage-v8': specifier: beta - version: 2.0.0-beta.12(vitest@2.0.0-beta.12(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.1)) + version: 2.0.0-beta.13(vitest@2.0.0-beta.13(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.13)(jsdom@24.1.0)(terser@5.31.1)) babel-plugin-react-remove-properties: specifier: 0.3.0 version: 0.3.0 @@ -254,10 +254,10 @@ importers: version: 2.0.3 vitest-dom: specifier: 0.1.1 - version: 0.1.1(vitest@2.0.0-beta.12(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.1)) + version: 0.1.1(vitest@2.0.0-beta.13(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.13)(jsdom@24.1.0)(terser@5.31.1)) vitest-fail-on-console: specifier: 0.7.0 - version: 0.7.0(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))(vitest@2.0.0-beta.12(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.1)) + version: 0.7.0(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))(vitest@2.0.0-beta.13(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.13)(jsdom@24.1.0)(terser@5.31.1)) docs: dependencies: @@ -290,10 +290,10 @@ importers: version: 5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/docs': specifier: 6.0.0-dev.240424162023-9968b4889d - version: 6.0.0-dev.240424162023-9968b4889d(fcahggoeybt7sjftqlg73aboty) + version: 6.0.0-dev.240424162023-9968b4889d(2gqnrhtignfrrzncodxyqropsm) '@mui/icons-material': specifier: next - version: 6.0.0-alpha.13(@mui/material@6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + version: 6.0.0-alpha.14(@mui/material@6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/internal-markdown': specifier: ^1.0.1 version: 1.0.6 @@ -302,22 +302,22 @@ importers: version: 5.0.0-beta.46(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/lab': specifier: next - version: 6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': specifier: next - version: 6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material-nextjs': specifier: next - version: 6.0.0-alpha.13(@emotion/cache@11.11.0)(@emotion/server@11.11.0)(@mui/material@6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) + version: 6.0.0-alpha.13(@emotion/cache@11.11.0)(@emotion/server@11.11.0)(@mui/material@6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) '@mui/styles': specifier: next - version: 6.0.0-alpha.13(@types/react@18.3.3)(react@18.3.1) + version: 6.0.0-alpha.14(@types/react@18.3.3)(react@18.3.1) '@mui/system': specifier: next - version: 6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + version: 6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/utils': specifier: next - version: 6.0.0-alpha.13(@types/react@18.3.3)(react@18.3.1) + version: 6.0.0-alpha.14(@types/react@18.3.3)(react@18.3.1) '@mui/x-license': specifier: 7.8.0 version: 7.8.0(@types/react@18.3.3)(react@18.3.1) @@ -404,7 +404,7 @@ importers: version: 7.4.7(react@18.3.1) next: specifier: ^14.2.4 - version: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) nprogress: specifier: 0.2.0 version: 0.2.0 @@ -633,22 +633,22 @@ importers: version: 17.0.3 '@vitest/browser': specifier: beta - version: 2.0.0-beta.12(playwright@1.45.0)(typescript@5.5.3)(vitest@2.0.0-beta.12) + version: 2.0.0-beta.13(playwright@1.45.1)(typescript@5.5.3)(vitest@2.0.0-beta.13) next: specifier: ^14.2.4 - version: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) next-router-mock: specifier: ^0.9.13 - version: 0.9.13(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) + version: 0.9.13(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) playwright: specifier: ^1.45.0 - version: 1.45.0 + version: 1.45.1 sinon: specifier: ^18.0.0 version: 18.0.0 vitest: specifier: beta - version: 2.0.0-beta.12(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.1) + version: 2.0.0-beta.13(@types/node@20.14.10)(@vitest/browser@2.0.0-beta.13)(jsdom@24.1.0)(terser@5.31.1) packages/toolpad-studio: dependencies: @@ -1174,7 +1174,7 @@ importers: version: 5.15.21(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material-nextjs': specifier: 5.15.11 - version: 5.15.11(@emotion/cache@11.11.0)(@emotion/server@11.11.0)(@mui/material@5.15.21(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) + version: 5.15.11(@emotion/cache@11.11.0)(@emotion/server@11.11.0)(@mui/material@5.15.21(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) '@toolpad/core': specifier: workspace:* version: link:../../packages/toolpad-core @@ -1189,7 +1189,7 @@ importers: version: 14.2.4(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.29.1)(webpack@5.92.1(esbuild@0.21.5)))(eslint@8.57.0)(typescript@5.5.3) next: specifier: 14.2.4 - version: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: specifier: 18.3.1 version: 18.3.1 @@ -1213,7 +1213,7 @@ importers: version: 5.15.21(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material-nextjs': specifier: 5.15.11 - version: 5.15.11(@emotion/cache@11.11.0)(@emotion/server@11.11.0)(@mui/material@5.15.21(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) + version: 5.15.11(@emotion/cache@11.11.0)(@emotion/server@11.11.0)(@mui/material@5.15.21(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) '@toolpad/core': specifier: workspace:* version: link:../../packages/toolpad-core @@ -1228,7 +1228,7 @@ importers: version: 14.2.4(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.29.1)(webpack@5.92.1(esbuild@0.21.5)))(eslint@8.57.0)(typescript@5.5.3) next: specifier: 14.2.4 - version: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: specifier: 18.3.1 version: 18.3.1 @@ -2586,8 +2586,19 @@ packages: '@types/react': optional: true - '@mui/core-downloads-tracker@5.15.21': - resolution: {integrity: sha512-dp9lXBaJZzJYeJfQY3Ow4Rb49QaCEdkl2KKYscdQHQm6bMJ+l4XPY3Cd9PCeeJTsHPIDJ60lzXbeRgs6sx/rpw==} + '@mui/base@5.0.0-beta.52': + resolution: {integrity: sha512-/oQdkb7EEaPr1qRTyUsqRWGJoJ6FqRB+7qyrlueWr5mCK02qOrgPHJd3WreT4TsF655ZVc840TUBpS+5M6FPyg==} + engines: {node: '>=12.0.0'} + peerDependencies: + '@types/react': ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + react-dom: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + + '@mui/core-downloads-tracker@5.16.0': + resolution: {integrity: sha512-8SLffXYPRVpcZx5QzxNE8fytTqzp+IuU3deZbQWg/vSaTlDpR5YVrQ4qQtXTi5cRdhOufV5INylmwlKK+//nPw==} '@mui/core-downloads-tracker@6.0.0-dev.240424162023-9968b4889d': resolution: {integrity: sha512-doh3M3U7HUGSBIWGe1yvesSbfDguMRjP0N09ogWSBM2hovXAlgULhMgcRTepAZLLwfRxFII0bCohq6B9NqoKuw==} @@ -2618,11 +2629,11 @@ packages: '@types/react': optional: true - '@mui/icons-material@6.0.0-alpha.13': - resolution: {integrity: sha512-WuIlS9NcfnWX034Fru/nSABXXX3ccSn6e3A6jiu2eVtLaTHRWPaki/cuQu0cC1qyfo5FFeZRO6a4KMJ35+T0Iw==} + '@mui/icons-material@6.0.0-alpha.14': + resolution: {integrity: sha512-5PPwxY8DNNnhDBTRxHVgxBi0YrYphhOzcmn04R0OGK5kSHHzAEslEAOLiUtEeJrjBRWyT87KnsZ3IvF/A5rNtw==} engines: {node: '>=12.0.0'} peerDependencies: - '@mui/material': 6.0.0-alpha.13 + '@mui/material': 6.0.0-alpha.14 '@types/react': ^17.0.0 || ^18.0.0 react: ^17.0.0 || ^18.0.0 peerDependenciesMeta: @@ -2673,13 +2684,13 @@ packages: '@types/react': optional: true - '@mui/lab@6.0.0-alpha.13': - resolution: {integrity: sha512-2kgYxAKkRWShlGbw3nXE1znyqtCeiu9LuhLK9ay0WWG2IK5bErw43k8hru0End0vFovhuTo3Kz8oPM6i68GkVQ==} + '@mui/lab@6.0.0-alpha.14': + resolution: {integrity: sha512-jIlDAbu5T+NiiPZAlhCrV2wkRKPBUY7TRC/BtMWFvdjjrBmlWldLE0BIFEjoXOZd8Ir/FRsM42WWt4kMz/CsKg==} engines: {node: '>=12.0.0'} peerDependencies: '@emotion/react': ^11.5.0 '@emotion/styled': ^11.3.0 - '@mui/material': ^6.0.0-alpha.13 + '@mui/material': ^6.0.0-alpha.14 '@types/react': ^17.0.0 || ^18.0.0 react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 @@ -2744,8 +2755,8 @@ packages: '@types/react': optional: true - '@mui/material@6.0.0-alpha.13': - resolution: {integrity: sha512-d6EgcVbV4JF0fJyA/gkWPhD+lY+Q6ISqT8z9fbBOEhu4XcgOBp5P2XKvhaK8PtHLLGrXVEvCaBLR0sY5wzn3mA==} + '@mui/material@6.0.0-alpha.14': + resolution: {integrity: sha512-LlM8pPWyOilUPARWRbQQzzjl+q/0IhO6rteRUrox0FWRaviDciBxUjhLaXV28Vx4/Xy4+bjj0B0H2Uk3pUz1sA==} engines: {node: '>=12.0.0'} peerDependencies: '@emotion/react': ^11.5.0 @@ -2769,8 +2780,8 @@ packages: version: 6.0.0-alpha.13 engines: {pnpm: 9.4.0} - '@mui/private-theming@5.15.20': - resolution: {integrity: sha512-BK8F94AIqSrnaPYXf2KAOjGZJgWfvqAVQ2gVR3EryvQFtuBnG6RwodxrCvd3B48VuMy6Wsk897+lQMUxJyk+6g==} + '@mui/private-theming@5.16.0': + resolution: {integrity: sha512-sYpubkO1MZOnxNyVOClrPNOTs0MfuRVVnAvCeMaOaXt6GimgQbnUcshYv2pSr6PFj+Mqzdff/FYOBceK8u5QgA==} engines: {node: '>=12.0.0'} peerDependencies: '@types/react': ^17.0.0 || ^18.0.0 @@ -2789,6 +2800,16 @@ packages: '@types/react': optional: true + '@mui/private-theming@6.0.0-alpha.14': + resolution: {integrity: sha512-CcuIV30FgZOcglQwml49nSANg/e5TIBAttSQDnFJN8AjKtBJ3IjQpS1nqQpaMOq4GZf7VUK5+BtgFPio/6w/Wg==} + engines: {node: '>=12.0.0'} + peerDependencies: + '@types/react': ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@mui/styled-engine@5.15.14': resolution: {integrity: sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw==} engines: {node: '>=12.0.0'} @@ -2815,8 +2836,21 @@ packages: '@emotion/styled': optional: true - '@mui/styles@6.0.0-alpha.13': - resolution: {integrity: sha512-AaJpzQsKbo7aJu6WDtwTpDp9klVf2Z3S9nr5q8y5QkH46niqsBgFBiRiruijSwe5E7Ks7CX8tzJKrXgleXSbnA==} + '@mui/styled-engine@6.0.0-alpha.14': + resolution: {integrity: sha512-0OS1CrHDbfZrhQuXCqNVm7b+ZF4FkBG/w6/emEf865ACHC5k4EqIk31nThuchBZLUtntwvGfD2b+JFDFW3XWlg==} + engines: {node: '>=12.0.0'} + peerDependencies: + '@emotion/react': ^11.4.1 + '@emotion/styled': ^11.3.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@emotion/react': + optional: true + '@emotion/styled': + optional: true + + '@mui/styles@6.0.0-alpha.14': + resolution: {integrity: sha512-wFgBAtekEp3iAi+tnPjpEgqzUkxoQtgYeo6/53qw7J499gIz1rHFup2sqCMZ8xNkZdSsf6a5AK0c2i8mHTgkEA==} engines: {node: '>=12.0.0'} peerDependencies: '@types/react': ^17.0.0 || ^18.0.0 @@ -2857,6 +2891,22 @@ packages: '@types/react': optional: true + '@mui/system@6.0.0-alpha.14': + resolution: {integrity: sha512-Ig4h+4PPnv12bTU3EnhYB6strzPGub+g+UgDFmzMQESMEfeU1uasNJuvY4FG4q6UgnQYgB8ZGWYms88c5lPeNg==} + engines: {node: '>=12.0.0'} + peerDependencies: + '@emotion/react': ^11.5.0 + '@emotion/styled': ^11.3.0 + '@types/react': ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@emotion/react': + optional: true + '@emotion/styled': + optional: true + '@types/react': + optional: true + '@mui/types@7.2.14': resolution: {integrity: sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==} peerDependencies: @@ -2875,6 +2925,16 @@ packages: '@types/react': optional: true + '@mui/utils@5.16.0': + resolution: {integrity: sha512-kLLi5J1xY+mwtUlMb8Ubdxf4qFAA1+U7WPBvjM/qQ4CIwLCohNb0sHo1oYPufjSIH/Z9+dhVxD7dJlfGjd1AVA==} + engines: {node: '>=12.0.0'} + peerDependencies: + '@types/react': ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@mui/utils@6.0.0-alpha.13': resolution: {integrity: sha512-uWBKV01fvPOSRmVml/2I+nnPPUsKl6Y9Tv/Po1Y1BEBaS0lg/ld/N+bYf1B8J/kPPTe7YwXI9Kuj2nzQ68ACaw==} engines: {node: '>=12.0.0'} @@ -2885,6 +2945,16 @@ packages: '@types/react': optional: true + '@mui/utils@6.0.0-alpha.14': + resolution: {integrity: sha512-9henSOHSAu+dYDiimxadABzJjiPx6EqzfTdYYldnH+FWWmVieguqrtOfkxo5dHqx9GY++rAOlliM4Xz3PoqVxA==} + engines: {node: '>=12.0.0'} + peerDependencies: + '@types/react': ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@mui/x-charts@7.8.0': resolution: {integrity: sha512-SosaVtx4Ig1nu/loH6Mq4peH5Pq5UvVEnsMfe4G2IEVrMxfwrktWJo+86t9LxiHTERt4wxPKnsqlhkgBIf9ePQ==} engines: {node: '>=14.0.0'} @@ -3430,6 +3500,11 @@ packages: engines: {node: '>=18'} hasBin: true + '@playwright/test@1.45.1': + resolution: {integrity: sha512-Wo1bWTzQvGA7LyKGIZc8nFSTFf2TkthGIFBR+QVNilvwouGzFd4PYukZe3rvf5PSqjHi1+1NyKSDZKcQWETzaA==} + engines: {node: '>=18'} + hasBin: true + '@pnpm/config.env-replace@1.1.0': resolution: {integrity: sha512-htyl8TWnKL7K/ESFa1oW2UB5lVDxuF5DpM7tBi6Hu2LNL3mWkIzNLG6N4zoCUP1lCKNxWy/3iu8mS8MvToGd6w==} engines: {node: '>=12.22.0'} @@ -3926,6 +4001,9 @@ packages: '@types/node@14.18.63': resolution: {integrity: sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ==} + '@types/node@20.14.10': + resolution: {integrity: sha512-MdiXf+nDuMvY0gJKxyfZ7/6UFsETO7mGKF54MVD/ekJS6HdFtpZFBgrh6Pseu64XTb2MLyFPlbW6hj8HYRQNOQ==} + '@types/node@20.14.9': resolution: {integrity: sha512-06OCtnTXtWOZBJlRApleWndH4JsRVs1pDCc8dLSQp+7PpUpX3ePdHyeNSFTeSe7FtKyQkrlPvHwJOW3SLd8Oyg==} @@ -4195,12 +4273,12 @@ packages: peerDependencies: vite: ^4.2.0 || ^5.0.0 - '@vitest/browser@2.0.0-beta.12': - resolution: {integrity: sha512-q8qYJhry+zrJ9I6RPFBlqpCH71PZv0YSTyAgsd90t2OBCafxA793xamuOmJFngHsviG2sY/5HkBW6cHFhxaVtg==} + '@vitest/browser@2.0.0-beta.13': + resolution: {integrity: sha512-Eotvac8cP3MNprvWy3eiWOfriqO9MGkNN6IHU9q061cF2E3ZWvUhdRiJolm2rSmoIYQe0JBXuq0oANbg8ZCZqg==} peerDependencies: playwright: '*' safaridriver: '*' - vitest: 2.0.0-beta.12 + vitest: 2.0.0-beta.13 webdriverio: '*' peerDependenciesMeta: playwright: @@ -4210,25 +4288,25 @@ packages: webdriverio: optional: true - '@vitest/coverage-v8@2.0.0-beta.12': - resolution: {integrity: sha512-yH+sU8xceBkoxiAvRT5JROByglgdYV7Q8i1gIQYd7VWce+9cX81u9BJUeXSjYIXgEg7orT0IB9I1zUBH0gEwsQ==} + '@vitest/coverage-v8@2.0.0-beta.13': + resolution: {integrity: sha512-wCs9avykLEj+qrFyCHIvQvFfhn3DXOyCvST5FiXP6nrDPXD6UZN9QhZz3VILfFbbAU9SeXzj1uQMcHX3IcWgLQ==} peerDependencies: - vitest: 2.0.0-beta.12 + vitest: 2.0.0-beta.13 - '@vitest/expect@2.0.0-beta.12': - resolution: {integrity: sha512-4AoKb3aZRFzFWGVF6iFHuAjsFH0dydQKzEfT8TfCNzx7+iXtVnLJ5nQUC6D4qlvyEmJeGIbbXZcgiSxY4Ry7eA==} + '@vitest/expect@2.0.0-beta.13': + resolution: {integrity: sha512-VvdoRimo52gLziVilXzuNxe3VBYIhy+n2wjXrT2IAa1y9P1FxbDHHJzrSVw5c9bLwhxJvIyQIKWE9kFQoO5MZg==} - '@vitest/runner@2.0.0-beta.12': - resolution: {integrity: sha512-nAerpQvAw1/6vO4vRjOy0A+7IwtktSME3thwUoqWZxMKBgmTzIO2/WevbtFsAwYPc3V8NEY/Erv4PjQt9JTlzQ==} + '@vitest/runner@2.0.0-beta.13': + resolution: {integrity: sha512-50J8rYy3u3sjxNc+IfCu9xnCn8Z3vpmUeKO0d1zf0SNrvm+1QurFg0AxVbsaqc0jIdjR9bVZwwtrOF8rM2pqsg==} - '@vitest/snapshot@2.0.0-beta.12': - resolution: {integrity: sha512-NBqn1rTNQ/e3Dsw8LnniHgeZslgIxg8UvSfje/QV3hJLSoLMLbKLopHmK9T2FQA0hcibAaq/TZVyVrBoX+6aig==} + '@vitest/snapshot@2.0.0-beta.13': + resolution: {integrity: sha512-avQ7e6LoRKjmA0Fv4Iw9fxvFf6I+XtoCObTl0EdCMdrzGUMSPjFx1fYz5NaCd7iuGW3fQrBpmm/TV/Sd9i8gtw==} - '@vitest/spy@2.0.0-beta.12': - resolution: {integrity: sha512-o9Di4HtCMY/81YZr13ozhvkEdF2cI/4VmkOO0rC5s4v1kTcM4PpvkkSut/Cwj5LfeENRQI6JINvDaKNgBPSXhA==} + '@vitest/spy@2.0.0-beta.13': + resolution: {integrity: sha512-gQTFVKTspb7zJ10R2EDEdD7f85cu199BdTThTwzlu3rtcj9ifJ/s5gkwFMeXgO8xRwTtW89Hjl9Zb92SqE2wfg==} - '@vitest/utils@2.0.0-beta.12': - resolution: {integrity: sha512-qjVhzdcGnZeWMOoEDk/wgfuO4f/jcz7MIOpSAr2apxeJoWOZ+4GrV77/3EZ9qBodU4MbXBeHdR5KHdMPfl3kAQ==} + '@vitest/utils@2.0.0-beta.13': + resolution: {integrity: sha512-af+EpEofA39r5pbYxfVQxDv5dLwQxMiLXlwWMbDgjcw97BHNKarh2XEQ2D7AFWViYwC4HvIDc7kP2C/OC0xJHA==} '@webassemblyjs/ast@1.12.1': resolution: {integrity: sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==} @@ -6733,8 +6811,8 @@ packages: resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==} engines: {node: '>=10'} - istanbul-lib-source-maps@5.0.5: - resolution: {integrity: sha512-gKf4eJ8bHmSX/ljiOCpnd8vtmHTwG71uugm0kXYd5aqFCl6z8cj8k7QduXSwU6QOst6LCdSXTlaoc8W4554crQ==} + istanbul-lib-source-maps@5.0.6: + resolution: {integrity: sha512-yg2d+Em4KizZC5niWhQaIomgf5WlL4vOOjZ5xGCmF8SnPE/mDWWXgvRExdcpCgh9lLRRa1/fSYp2ymmbJ1pI+A==} engines: {node: '>=10'} istanbul-reports@3.1.7: @@ -7812,10 +7890,6 @@ packages: resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} - p-limit@5.0.0: - resolution: {integrity: sha512-/Eaoq+QyLSiXQ4lyYV23f14mZRQcXnxfHrN0vCai+ak9G0pp9iEQukIIZq5NccEvwRB8PUnZT0KsOoDCINS1qQ==} - engines: {node: '>=18'} - p-locate@2.0.0: resolution: {integrity: sha512-nQja7m7gSKuewoVRen45CtVfODR3crN3goVQ0DDZ9N3yHxgpkuBhZqsaiotSQRrADUrne346peY7kT3TSACykg==} engines: {node: '>=4'} @@ -8106,11 +8180,21 @@ packages: engines: {node: '>=18'} hasBin: true + playwright-core@1.45.1: + resolution: {integrity: sha512-LF4CUUtrUu2TCpDw4mcrAIuYrEjVDfT1cHbJMfwnE2+1b8PZcFzPNgvZCvq2JfQ4aTjRCCHw5EJ2tmr2NSzdPg==} + engines: {node: '>=18'} + hasBin: true + playwright@1.45.0: resolution: {integrity: sha512-4z3ac3plDfYzGB6r0Q3LF8POPR20Z8D0aXcxbJvmfMgSSq1hkcgvFRXJk9rUq5H/MJ0Ktal869hhOdI/zUTeLA==} engines: {node: '>=18'} hasBin: true + playwright@1.45.1: + resolution: {integrity: sha512-Hjrgae4kpSQBr98nhCj3IScxVeVUixqj+5oyif8TdIn2opTCPEzqAqNMeK42i3cWDCVu9MI+ZsGWw+gVR4ISBg==} + engines: {node: '>=18'} + hasBin: true + please-upgrade-node@3.2.0: resolution: {integrity: sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==} @@ -9613,8 +9697,8 @@ packages: victory-vendor@36.9.2: resolution: {integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==} - vite-node@2.0.0-beta.12: - resolution: {integrity: sha512-aS07DFW00yJNteJ44bPOSz/Zs25ppIqMElzcydBQv7nKiImnb8N6Rrlg9GQYLJByHLbdJAdxXvDsdruwkPA+kw==} + vite-node@2.0.0-beta.13: + resolution: {integrity: sha512-yopsxgK3fz/+MLoYE3wTcDeZ0ZBl2hK8hAIVsnjNbnQX0yx6mKaTQ04mYCpez/ss491MsYy4PHRCVV68IaC77g==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true @@ -9657,15 +9741,15 @@ packages: vite: '>=4.5.2' vitest: '>=0.26.2' - vitest@2.0.0-beta.12: - resolution: {integrity: sha512-nqputSJprBdVHgQDg7xUVQigEdC8JOva889jbP0LoHQNA8kN+YzAEdAnYqyUk7ZRMlbtCHO16Ys/cfTBIqDm9A==} + vitest@2.0.0-beta.13: + resolution: {integrity: sha512-WlyAzTY5KDNIfl2ij51nn040Hj0B0m1VDhCQV+7dgOzxdxAyHK0+vEqCfhPVx6k9y0FBq+0QT4k5L3tvaeEY5Q==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true peerDependencies: '@edge-runtime/vm': '*' '@types/node': ^18.0.0 || >=20.0.0 - '@vitest/browser': 2.0.0-beta.12 - '@vitest/ui': 2.0.0-beta.12 + '@vitest/browser': 2.0.0-beta.13 + '@vitest/ui': 2.0.0-beta.13 happy-dom: '*' jsdom: '*' peerDependenciesMeta: @@ -9914,8 +9998,8 @@ packages: resolution: {integrity: sha512-b4JR1PFR10y1mKjhHY9LaGo6tmrgjit7hxVIeAmyMw3jegXR4dhYqLaQF5zMXZxY7tLpMyJeLjr1C4rLmkVe8g==} engines: {node: '>=12.20'} - yoctocolors-cjs@2.1.1: - resolution: {integrity: sha512-c6T13b6qYcJZvck7QbEFXrFX/Mu2KOjvAGiKHmYMUg96jxNpfP6i+psGW72BOPxOIDUJrORG+Kyu7quMX9CQBQ==} + yoctocolors-cjs@2.1.2: + resolution: {integrity: sha512-cYVsTjKl8b+FrnidjibDWskAv7UKOfcwaVZdp/it9n1s9fU3IkgDbhdIRKCW4JDsAlECJY0ytoVPT3sK6kideA==} engines: {node: '>=18'} yoctocolors@2.1.0: @@ -11402,7 +11486,7 @@ snapshots: signal-exit: 4.1.0 strip-ansi: 6.0.1 wrap-ansi: 6.2.0 - yoctocolors-cjs: 2.1.1 + yoctocolors-cjs: 2.1.2 '@inquirer/figures@1.0.3': {} @@ -11575,21 +11659,35 @@ snapshots: optionalDependencies: '@types/react': 18.3.3 - '@mui/core-downloads-tracker@5.15.21': {} + '@mui/base@5.0.0-beta.52(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.24.7 + '@floating-ui/react-dom': 2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/types': 7.2.14(@types/react@18.3.3) + '@mui/utils': 6.0.0-alpha.14(@types/react@18.3.3)(react@18.3.1) + '@popperjs/core': 2.11.8 + clsx: 2.1.1 + prop-types: 15.8.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.3 + + '@mui/core-downloads-tracker@5.16.0': {} '@mui/core-downloads-tracker@6.0.0-dev.240424162023-9968b4889d': {} - '@mui/docs@6.0.0-dev.240424162023-9968b4889d(fcahggoeybt7sjftqlg73aboty)': + '@mui/docs@6.0.0-dev.240424162023-9968b4889d(2gqnrhtignfrrzncodxyqropsm)': dependencies: '@babel/runtime': 7.24.7 '@mui/base': 5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/icons-material': 6.0.0-alpha.13(@mui/material@6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + '@mui/icons-material': 6.0.0-alpha.14(@mui/material@6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/internal-markdown': 1.0.6 - '@mui/material': 6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/system': 6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + '@mui/material': 6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/system': 6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) clipboard-copy: 4.0.1 clsx: 2.1.1 - next: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + next: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) nprogress: 0.2.0 prop-types: 15.8.1 react: 18.3.1 @@ -11604,10 +11702,10 @@ snapshots: optionalDependencies: '@types/react': 18.3.3 - '@mui/icons-material@6.0.0-alpha.13(@mui/material@6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)': + '@mui/icons-material@6.0.0-alpha.14(@mui/material@6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 - '@mui/material': 6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/material': 6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 optionalDependencies: '@types/react': 18.3.3 @@ -11673,14 +11771,14 @@ snapshots: '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@types/react': 18.3.3 - '@mui/lab@6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mui/lab@6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 - '@mui/base': 5.0.0-beta.51(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/material': 6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/system': 6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + '@mui/base': 5.0.0-beta.52(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/material': 6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/system': 6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/types': 7.2.14(@types/react@18.3.3) - '@mui/utils': 6.0.0-alpha.13(@types/react@18.3.3)(react@18.3.1) + '@mui/utils': 6.0.0-alpha.14(@types/react@18.3.3)(react@18.3.1) clsx: 2.1.1 prop-types: 15.8.1 react: 18.3.1 @@ -11690,22 +11788,22 @@ snapshots: '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@types/react': 18.3.3 - '@mui/material-nextjs@5.15.11(@emotion/cache@11.11.0)(@emotion/server@11.11.0)(@mui/material@5.15.21(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': + '@mui/material-nextjs@5.15.11(@emotion/cache@11.11.0)(@emotion/server@11.11.0)(@mui/material@5.15.21(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 '@mui/material': 5.15.21(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - next: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + next: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 optionalDependencies: '@emotion/cache': 11.11.0 '@emotion/server': 11.11.0 '@types/react': 18.3.3 - '@mui/material-nextjs@6.0.0-alpha.13(@emotion/cache@11.11.0)(@emotion/server@11.11.0)(@mui/material@6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': + '@mui/material-nextjs@6.0.0-alpha.13(@emotion/cache@11.11.0)(@emotion/server@11.11.0)(@mui/material@6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 - '@mui/material': 6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - next: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/material': 6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + next: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 optionalDependencies: '@emotion/cache': 11.11.0 @@ -11716,7 +11814,7 @@ snapshots: dependencies: '@babel/runtime': 7.24.7 '@mui/base': 5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/core-downloads-tracker': 5.15.21 + '@mui/core-downloads-tracker': 5.16.0 '@mui/system': 5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/types': 7.2.14(@types/react@18.3.3) '@mui/utils': 5.15.20(@types/react@18.3.3)(react@18.3.1) @@ -11733,14 +11831,14 @@ snapshots: '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@types/react': 18.3.3 - '@mui/material@6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mui/material@6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 - '@mui/base': 5.0.0-beta.51(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/base': 5.0.0-beta.52(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/core-downloads-tracker': 6.0.0-dev.240424162023-9968b4889d - '@mui/system': 6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + '@mui/system': 6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/types': 7.2.14(@types/react@18.3.3) - '@mui/utils': 6.0.0-alpha.13(@types/react@18.3.3)(react@18.3.1) + '@mui/utils': 6.0.0-alpha.14(@types/react@18.3.3)(react@18.3.1) '@types/react-transition-group': 4.4.10 clsx: 2.1.1 csstype: 3.1.3 @@ -11769,10 +11867,10 @@ snapshots: - supports-color - utf-8-validate - '@mui/private-theming@5.15.20(@types/react@18.3.3)(react@18.3.1)': + '@mui/private-theming@5.16.0(@types/react@18.3.3)(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 - '@mui/utils': 5.15.20(@types/react@18.3.3)(react@18.3.1) + '@mui/utils': 5.16.0(@types/react@18.3.3)(react@18.3.1) prop-types: 15.8.1 react: 18.3.1 optionalDependencies: @@ -11787,6 +11885,15 @@ snapshots: optionalDependencies: '@types/react': 18.3.3 + '@mui/private-theming@6.0.0-alpha.14(@types/react@18.3.3)(react@18.3.1)': + dependencies: + '@babel/runtime': 7.24.7 + '@mui/utils': 6.0.0-alpha.14(@types/react@18.3.3)(react@18.3.1) + prop-types: 15.8.1 + react: 18.3.1 + optionalDependencies: + '@types/react': 18.3.3 + '@mui/styled-engine@5.15.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 @@ -11809,13 +11916,24 @@ snapshots: '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1) '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) - '@mui/styles@6.0.0-alpha.13(@types/react@18.3.3)(react@18.3.1)': + '@mui/styled-engine@6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.24.7 + '@emotion/cache': 11.11.0 + csstype: 3.1.3 + prop-types: 15.8.1 + react: 18.3.1 + optionalDependencies: + '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1) + '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + + '@mui/styles@6.0.0-alpha.14(@types/react@18.3.3)(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 '@emotion/hash': 0.9.1 - '@mui/private-theming': 6.0.0-alpha.13(@types/react@18.3.3)(react@18.3.1) + '@mui/private-theming': 6.0.0-alpha.14(@types/react@18.3.3)(react@18.3.1) '@mui/types': 7.2.14(@types/react@18.3.3) - '@mui/utils': 6.0.0-alpha.13(@types/react@18.3.3)(react@18.3.1) + '@mui/utils': 6.0.0-alpha.14(@types/react@18.3.3)(react@18.3.1) clsx: 2.1.1 csstype: 3.1.3 hoist-non-react-statics: 3.3.2 @@ -11835,7 +11953,7 @@ snapshots: '@mui/system@5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 - '@mui/private-theming': 5.15.20(@types/react@18.3.3)(react@18.3.1) + '@mui/private-theming': 5.16.0(@types/react@18.3.3)(react@18.3.1) '@mui/styled-engine': 5.15.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1) '@mui/types': 7.2.14(@types/react@18.3.3) '@mui/utils': 5.15.20(@types/react@18.3.3)(react@18.3.1) @@ -11864,6 +11982,22 @@ snapshots: '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@types/react': 18.3.3 + '@mui/system@6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)': + dependencies: + '@babel/runtime': 7.24.7 + '@mui/private-theming': 6.0.0-alpha.14(@types/react@18.3.3)(react@18.3.1) + '@mui/styled-engine': 6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1) + '@mui/types': 7.2.14(@types/react@18.3.3) + '@mui/utils': 6.0.0-alpha.14(@types/react@18.3.3)(react@18.3.1) + clsx: 2.1.1 + csstype: 3.1.3 + prop-types: 15.8.1 + react: 18.3.1 + optionalDependencies: + '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1) + '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + '@types/react': 18.3.3 + '@mui/types@7.2.14(@types/react@18.3.3)': optionalDependencies: '@types/react': 18.3.3 @@ -11878,6 +12012,16 @@ snapshots: optionalDependencies: '@types/react': 18.3.3 + '@mui/utils@5.16.0(@types/react@18.3.3)(react@18.3.1)': + dependencies: + '@babel/runtime': 7.24.7 + '@types/prop-types': 15.7.12 + prop-types: 15.8.1 + react: 18.3.1 + react-is: 18.3.1 + optionalDependencies: + '@types/react': 18.3.3 + '@mui/utils@6.0.0-alpha.13(@types/react@18.3.3)(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 @@ -11888,6 +12032,16 @@ snapshots: optionalDependencies: '@types/react': 18.3.3 + '@mui/utils@6.0.0-alpha.14(@types/react@18.3.3)(react@18.3.1)': + dependencies: + '@babel/runtime': 7.24.7 + '@types/prop-types': 15.7.12 + prop-types: 15.8.1 + react: 18.3.1 + react-is: 18.3.1 + optionalDependencies: + '@types/react': 18.3.3 + '@mui/x-charts@7.8.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.15.21(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 @@ -11912,11 +12066,11 @@ snapshots: transitivePeerDependencies: - '@types/react' - '@mui/x-charts@7.8.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mui/x-charts@7.8.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 '@mui/base': 5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/material': 6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/material': 6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/system': 5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/utils': 5.15.20(@types/react@18.3.3)(react@18.3.1) '@react-spring/rafz': 9.7.3 @@ -12575,6 +12729,11 @@ snapshots: dependencies: playwright: 1.45.0 + '@playwright/test@1.45.1': + dependencies: + playwright: 1.45.1 + optional: true + '@pnpm/config.env-replace@1.1.0': {} '@pnpm/network.ca-file@1.0.2': @@ -12864,7 +13023,7 @@ snapshots: lz-string: 1.5.0 pretty-format: 27.5.1 - '@testing-library/jest-dom@6.4.6(vitest@2.0.0-beta.12(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.1))': + '@testing-library/jest-dom@6.4.6(vitest@2.0.0-beta.13(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.13)(jsdom@24.1.0)(terser@5.31.1))': dependencies: '@adobe/css-tools': 4.4.0 '@babel/runtime': 7.24.7 @@ -12875,7 +13034,7 @@ snapshots: lodash: 4.17.21 redent: 3.0.0 optionalDependencies: - vitest: 2.0.0-beta.12(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.1) + vitest: 2.0.0-beta.13(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.13)(jsdom@24.1.0)(terser@5.31.1) '@testing-library/react@16.0.0(@testing-library/dom@10.2.0)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: @@ -13104,6 +13263,11 @@ snapshots: '@types/node@14.18.63': {} + '@types/node@20.14.10': + dependencies: + undici-types: 5.26.5 + optional: true + '@types/node@20.14.9': dependencies: undici-types: 5.26.5 @@ -13483,48 +13647,48 @@ snapshots: transitivePeerDependencies: - supports-color - '@vitest/browser@2.0.0-beta.12(playwright@1.45.0)(typescript@5.5.2)(vitest@2.0.0-beta.12)': + '@vitest/browser@2.0.0-beta.13(playwright@1.45.1)(typescript@5.5.2)(vitest@2.0.0-beta.13)': dependencies: '@testing-library/dom': 10.2.0 '@testing-library/user-event': 14.5.2(@testing-library/dom@10.2.0) - '@vitest/utils': 2.0.0-beta.12 + '@vitest/utils': 2.0.0-beta.13 magic-string: 0.30.10 msw: 2.3.1(typescript@5.5.2) sirv: 2.0.4 - vitest: 2.0.0-beta.12(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.1) + vitest: 2.0.0-beta.13(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.13)(jsdom@24.1.0)(terser@5.31.1) ws: 8.17.1 optionalDependencies: - playwright: 1.45.0 + playwright: 1.45.1 transitivePeerDependencies: - bufferutil - typescript - utf-8-validate - '@vitest/browser@2.0.0-beta.12(playwright@1.45.0)(typescript@5.5.3)(vitest@2.0.0-beta.12)': + '@vitest/browser@2.0.0-beta.13(playwright@1.45.1)(typescript@5.5.3)(vitest@2.0.0-beta.13)': dependencies: '@testing-library/dom': 10.2.0 '@testing-library/user-event': 14.5.2(@testing-library/dom@10.2.0) - '@vitest/utils': 2.0.0-beta.12 + '@vitest/utils': 2.0.0-beta.13 magic-string: 0.30.10 msw: 2.3.1(typescript@5.5.3) sirv: 2.0.4 - vitest: 2.0.0-beta.12(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.1) + vitest: 2.0.0-beta.13(@types/node@20.14.10)(@vitest/browser@2.0.0-beta.13)(jsdom@24.1.0)(terser@5.31.1) ws: 8.17.1 optionalDependencies: - playwright: 1.45.0 + playwright: 1.45.1 transitivePeerDependencies: - bufferutil - typescript - utf-8-validate - '@vitest/coverage-v8@2.0.0-beta.12(vitest@2.0.0-beta.12(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.1))': + '@vitest/coverage-v8@2.0.0-beta.13(vitest@2.0.0-beta.13(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.13)(jsdom@24.1.0)(terser@5.31.1))': dependencies: '@ampproject/remapping': 2.3.0 '@bcoe/v8-coverage': 0.2.3 debug: 4.3.5 istanbul-lib-coverage: 3.2.2 istanbul-lib-report: 3.0.1 - istanbul-lib-source-maps: 5.0.5 + istanbul-lib-source-maps: 5.0.6 istanbul-reports: 3.1.7 magic-string: 0.30.10 magicast: 0.3.4 @@ -13532,33 +13696,32 @@ snapshots: std-env: 3.7.0 strip-literal: 2.1.0 test-exclude: 7.0.1 - vitest: 2.0.0-beta.12(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.1) + vitest: 2.0.0-beta.13(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.13)(jsdom@24.1.0)(terser@5.31.1) transitivePeerDependencies: - supports-color - '@vitest/expect@2.0.0-beta.12': + '@vitest/expect@2.0.0-beta.13': dependencies: - '@vitest/spy': 2.0.0-beta.12 - '@vitest/utils': 2.0.0-beta.12 + '@vitest/spy': 2.0.0-beta.13 + '@vitest/utils': 2.0.0-beta.13 chai: 5.1.1 - '@vitest/runner@2.0.0-beta.12': + '@vitest/runner@2.0.0-beta.13': dependencies: - '@vitest/utils': 2.0.0-beta.12 - p-limit: 5.0.0 + '@vitest/utils': 2.0.0-beta.13 pathe: 1.1.2 - '@vitest/snapshot@2.0.0-beta.12': + '@vitest/snapshot@2.0.0-beta.13': dependencies: magic-string: 0.30.10 pathe: 1.1.2 pretty-format: 29.7.0 - '@vitest/spy@2.0.0-beta.12': + '@vitest/spy@2.0.0-beta.13': dependencies: tinyspy: 3.0.0 - '@vitest/utils@2.0.0-beta.12': + '@vitest/utils@2.0.0-beta.13': dependencies: diff-sequences: 29.6.3 estree-walker: 3.0.3 @@ -16563,7 +16726,7 @@ snapshots: make-dir: 4.0.0 supports-color: 7.2.0 - istanbul-lib-source-maps@5.0.5: + istanbul-lib-source-maps@5.0.6: dependencies: '@jridgewell/trace-mapping': 0.3.25 debug: 4.3.5 @@ -17498,12 +17661,12 @@ snapshots: nested-error-stacks@2.1.1: {} - next-router-mock@0.9.13(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1): + next-router-mock@0.9.13(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1): dependencies: - next: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + next: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 - next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: '@next/env': 14.2.4 '@swc/helpers': 0.5.5 @@ -17525,7 +17688,7 @@ snapshots: '@next/swc-win32-ia32-msvc': 14.2.4 '@next/swc-win32-x64-msvc': 14.2.4 '@opentelemetry/api': 1.9.0 - '@playwright/test': 1.45.0 + '@playwright/test': 1.45.1 transitivePeerDependencies: - '@babel/core' - babel-plugin-macros @@ -17896,10 +18059,6 @@ snapshots: dependencies: yocto-queue: 1.1.1 - p-limit@5.0.0: - dependencies: - yocto-queue: 1.1.1 - p-locate@2.0.0: dependencies: p-limit: 1.3.0 @@ -18171,12 +18330,20 @@ snapshots: playwright-core@1.45.0: {} + playwright-core@1.45.1: {} + playwright@1.45.0: dependencies: playwright-core: 1.45.0 optionalDependencies: fsevents: 2.3.2 + playwright@1.45.1: + dependencies: + playwright-core: 1.45.1 + optionalDependencies: + fsevents: 2.3.2 + please-upgrade-node@3.2.0: dependencies: semver-compare: 1.0.0 @@ -19833,7 +20000,24 @@ snapshots: d3-time: 3.1.0 d3-timer: 3.0.1 - vite-node@2.0.0-beta.12(@types/node@20.14.9)(terser@5.31.1): + vite-node@2.0.0-beta.13(@types/node@20.14.10)(terser@5.31.1): + dependencies: + cac: 6.7.14 + debug: 4.3.5 + pathe: 1.1.2 + picocolors: 1.0.1 + vite: 5.3.2(@types/node@20.14.10)(terser@5.31.1) + transitivePeerDependencies: + - '@types/node' + - less + - lightningcss + - sass + - stylus + - sugarss + - supports-color + - terser + + vite-node@2.0.0-beta.13(@types/node@20.14.9)(terser@5.31.1): dependencies: cac: 6.7.14 debug: 4.3.5 @@ -19850,6 +20034,16 @@ snapshots: - supports-color - terser + vite@5.3.2(@types/node@20.14.10)(terser@5.31.1): + dependencies: + esbuild: 0.21.5 + postcss: 8.4.39 + rollup: 4.18.0 + optionalDependencies: + '@types/node': 20.14.10 + fsevents: 2.3.3 + terser: 5.31.1 + vite@5.3.2(@types/node@20.14.9)(terser@5.31.1): dependencies: esbuild: 0.21.5 @@ -19860,7 +20054,7 @@ snapshots: fsevents: 2.3.3 terser: 5.31.1 - vitest-dom@0.1.1(vitest@2.0.0-beta.12(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.1)): + vitest-dom@0.1.1(vitest@2.0.0-beta.13(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.13)(jsdom@24.1.0)(terser@5.31.1)): dependencies: aria-query: 5.3.0 chalk: 5.3.0 @@ -19868,22 +20062,55 @@ snapshots: dom-accessibility-api: 0.6.3 lodash-es: 4.17.21 redent: 4.0.0 - vitest: 2.0.0-beta.12(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.1) + vitest: 2.0.0-beta.13(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.13)(jsdom@24.1.0)(terser@5.31.1) - vitest-fail-on-console@0.7.0(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))(vitest@2.0.0-beta.12(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.1)): + vitest-fail-on-console@0.7.0(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))(vitest@2.0.0-beta.13(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.13)(jsdom@24.1.0)(terser@5.31.1)): dependencies: chalk: 5.3.0 vite: 5.3.2(@types/node@20.14.9)(terser@5.31.1) - vitest: 2.0.0-beta.12(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.1) + vitest: 2.0.0-beta.13(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.13)(jsdom@24.1.0)(terser@5.31.1) + + vitest@2.0.0-beta.13(@types/node@20.14.10)(@vitest/browser@2.0.0-beta.13)(jsdom@24.1.0)(terser@5.31.1): + dependencies: + '@ampproject/remapping': 2.3.0 + '@vitest/expect': 2.0.0-beta.13 + '@vitest/runner': 2.0.0-beta.13 + '@vitest/snapshot': 2.0.0-beta.13 + '@vitest/spy': 2.0.0-beta.13 + '@vitest/utils': 2.0.0-beta.13 + chai: 5.1.1 + debug: 4.3.5 + execa: 8.0.1 + magic-string: 0.30.10 + pathe: 1.1.2 + picocolors: 1.0.1 + std-env: 3.7.0 + tinybench: 2.8.0 + tinypool: 1.0.0 + vite: 5.3.2(@types/node@20.14.10)(terser@5.31.1) + vite-node: 2.0.0-beta.13(@types/node@20.14.10)(terser@5.31.1) + why-is-node-running: 2.2.2 + optionalDependencies: + '@types/node': 20.14.10 + '@vitest/browser': 2.0.0-beta.13(playwright@1.45.1)(typescript@5.5.3)(vitest@2.0.0-beta.13) + jsdom: 24.1.0 + transitivePeerDependencies: + - less + - lightningcss + - sass + - stylus + - sugarss + - supports-color + - terser - vitest@2.0.0-beta.12(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.12)(jsdom@24.1.0)(terser@5.31.1): + vitest@2.0.0-beta.13(@types/node@20.14.9)(@vitest/browser@2.0.0-beta.13)(jsdom@24.1.0)(terser@5.31.1): dependencies: '@ampproject/remapping': 2.3.0 - '@vitest/expect': 2.0.0-beta.12 - '@vitest/runner': 2.0.0-beta.12 - '@vitest/snapshot': 2.0.0-beta.12 - '@vitest/spy': 2.0.0-beta.12 - '@vitest/utils': 2.0.0-beta.12 + '@vitest/expect': 2.0.0-beta.13 + '@vitest/runner': 2.0.0-beta.13 + '@vitest/snapshot': 2.0.0-beta.13 + '@vitest/spy': 2.0.0-beta.13 + '@vitest/utils': 2.0.0-beta.13 chai: 5.1.1 debug: 4.3.5 execa: 8.0.1 @@ -19894,11 +20121,11 @@ snapshots: tinybench: 2.8.0 tinypool: 1.0.0 vite: 5.3.2(@types/node@20.14.9)(terser@5.31.1) - vite-node: 2.0.0-beta.12(@types/node@20.14.9)(terser@5.31.1) + vite-node: 2.0.0-beta.13(@types/node@20.14.9)(terser@5.31.1) why-is-node-running: 2.2.2 optionalDependencies: '@types/node': 20.14.9 - '@vitest/browser': 2.0.0-beta.12(playwright@1.45.0)(typescript@5.5.3)(vitest@2.0.0-beta.12) + '@vitest/browser': 2.0.0-beta.13(playwright@1.45.1)(typescript@5.5.2)(vitest@2.0.0-beta.13) jsdom: 24.1.0 transitivePeerDependencies: - less @@ -20176,7 +20403,7 @@ snapshots: yocto-queue@1.1.1: {} - yoctocolors-cjs@2.1.1: {} + yoctocolors-cjs@2.1.2: {} yoctocolors@2.1.0: {} From 0a7f4ca041d60bb93a35bbfa52aad2e23300a84e Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Tue, 9 Jul 2024 19:12:08 +0100 Subject: [PATCH 24/42] Fix and improve a bunch of theming issues --- .../app-provider/AppProviderBasic.js | 3 + .../app-provider/AppProviderBasic.tsx | 3 + .../app-provider/AppProviderBasic.tsx.preview | 12 +++- .../app-provider/AppProviderTheme.js | 37 ++---------- .../app-provider/AppProviderTheme.tsx | 39 +++--------- .../app-provider/AppProviderTheme.tsx.preview | 8 ++- .../dashboard-layout/DashboardLayoutBasic.js | 1 + .../dashboard-layout/DashboardLayoutBasic.tsx | 1 + .../DashboardLayoutBranding.js | 1 + .../DashboardLayoutBranding.tsx | 1 + .../DashboardLayoutNavigation.js | 1 + .../DashboardLayoutNavigation.tsx | 1 + .../core/introduction/TutorialDefault.js | 1 + .../core/introduction/TutorialDefault.tsx | 1 + .../core/introduction/TutorialPages.js | 1 + .../core/introduction/TutorialPages.tsx | 1 + examples/core-tutorial/theme.ts | 5 -- .../create-toolpad-app/src/generateProject.ts | 5 -- .../src/DashboardLayout/DashboardLayout.tsx | 60 +++++++++++-------- .../src/themes/baseCSSVarsTheme.ts | 5 -- .../toolpad-core/src/themes/baseDarkTheme.ts | 5 -- .../toolpad-core/src/themes/baseLightTheme.ts | 5 -- playground/nextjs-pages/src/pages/index.tsx | 1 + .../nextjs-pages/src/pages/orders/index.tsx | 1 + .../src/app/(dashboard)/orders/page.tsx | 1 + .../nextjs/src/app/(dashboard)/page.tsx | 1 + 26 files changed, 81 insertions(+), 120 deletions(-) diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.js b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.js index 7222c5b387f..b6a828f1765 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.js +++ b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.js @@ -33,6 +33,7 @@ function DemoPageContent({ pathname }) { display: 'flex', flexDirection: 'column', alignItems: 'center', + textAlign: 'center', }} > Dashboard content for {pathname} @@ -56,6 +57,7 @@ export default function AppProviderBasic() { }, [pathname]); return ( + // preview-start + // preview-end ); } diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx index 62227dadfe8..a58efdaafd9 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx +++ b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx @@ -33,6 +33,7 @@ function DemoPageContent({ pathname }: { pathname: string }) { display: 'flex', flexDirection: 'column', alignItems: 'center', + textAlign: 'center', }} > Dashboard content for {pathname} @@ -52,6 +53,7 @@ export default function AppProviderBasic() { }, [pathname]); return ( + // preview-start + // preview-end ); } diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx.preview b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx.preview index 96d68868d23..3d32e4704ab 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx.preview +++ b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx.preview @@ -1,3 +1,9 @@ - - - \ No newline at end of file + + + + + \ No newline at end of file diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js index 505ee87edad..87ac21e6669 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js +++ b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js @@ -25,40 +25,12 @@ const NAVIGATION = [ }, ]; -const defaultDarkTheme = createTheme({ palette: { mode: 'dark' } }); - -const customTheme = createTheme(defaultDarkTheme, { +const customTheme = createTheme({ palette: { + mode: 'dark', background: { default: '#2A4364', - }, - }, - typography: { - h6: { - fontWeight: '700', - }, - }, - components: { - MuiAppBar: { - styleOverrides: { - root: { - backgroundColor: '#112E4D', - }, - }, - }, - MuiDrawer: { - styleOverrides: { - paper: { - backgroundColor: '#112E4D', - }, - }, - }, - MuiListSubheader: { - styleOverrides: { - root: { - backgroundColor: '#112E4D', - }, - }, + paper: '#112E4D', }, }, }); @@ -71,6 +43,7 @@ function DemoPageContent({ pathname }) { display: 'flex', flexDirection: 'column', alignItems: 'center', + textAlign: 'center', }} > Dashboard content for {pathname} @@ -94,10 +67,12 @@ export default function AppProviderTheme() { }, [pathname]); return ( + // preview-start + // preview-end ); } diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx index 6bc46a95a5f..9b40e329719 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx +++ b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; -import { createTheme, Theme } from '@mui/material/styles'; +import { createTheme } from '@mui/material/styles'; import DashboardIcon from '@mui/icons-material/Dashboard'; import TimelineIcon from '@mui/icons-material/Timeline'; import { AppProvider } from '@toolpad/core/AppProvider'; @@ -25,40 +25,12 @@ const NAVIGATION: Navigation = [ }, ]; -const defaultDarkTheme = createTheme({ palette: { mode: 'dark' } }); - -const customTheme: Theme = createTheme(defaultDarkTheme, { +const customTheme = createTheme({ palette: { + mode: 'dark', background: { default: '#2A4364', - }, - }, - typography: { - h6: { - fontWeight: '700', - }, - }, - components: { - MuiAppBar: { - styleOverrides: { - root: { - backgroundColor: '#112E4D', - }, - }, - }, - MuiDrawer: { - styleOverrides: { - paper: { - backgroundColor: '#112E4D', - }, - }, - }, - MuiListSubheader: { - styleOverrides: { - root: { - backgroundColor: '#112E4D', - }, - }, + paper: '#112E4D', }, }, }); @@ -71,6 +43,7 @@ function DemoPageContent({ pathname }: { pathname: string }) { display: 'flex', flexDirection: 'column', alignItems: 'center', + textAlign: 'center', }} > Dashboard content for {pathname} @@ -90,10 +63,12 @@ export default function AppProviderTheme() { }, [pathname]); return ( + // preview-start + // preview-end ); } diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx.preview b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx.preview index 96d68868d23..8145b476403 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx.preview +++ b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx.preview @@ -1,3 +1,5 @@ - - - \ No newline at end of file + + + + + \ No newline at end of file diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js index b999d3d12cd..ef7f1821011 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js @@ -65,6 +65,7 @@ function DemoPageContent({ pathname }) { display: 'flex', flexDirection: 'column', alignItems: 'center', + textAlign: 'center', }} > Dashboard content for {pathname} diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx index 92db38a5b1c..4ef457fd998 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx @@ -65,6 +65,7 @@ function DemoPageContent({ pathname }: { pathname: string }) { display: 'flex', flexDirection: 'column', alignItems: 'center', + textAlign: 'center', }} > Dashboard content for {pathname} diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js index 787873c4ad0..c236a2f041d 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js @@ -29,6 +29,7 @@ function DemoPageContent({ pathname }) { display: 'flex', flexDirection: 'column', alignItems: 'center', + textAlign: 'center', }} > Dashboard content for {pathname} diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx index 3455a0404c1..047217283d4 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx @@ -29,6 +29,7 @@ function DemoPageContent({ pathname }: { pathname: string }) { display: 'flex', flexDirection: 'column', alignItems: 'center', + textAlign: 'center', }} > Dashboard content for {pathname} diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js index b7363d6a502..2cefbc07484 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js @@ -16,6 +16,7 @@ function DemoPageContent({ pathname }) { display: 'flex', flexDirection: 'column', alignItems: 'center', + textAlign: 'center', }} > Dashboard content for {pathname} diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx index d0d90f8720c..d40a2be7530 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx @@ -15,6 +15,7 @@ function DemoPageContent({ pathname }: { pathname: string }) { display: 'flex', flexDirection: 'column', alignItems: 'center', + textAlign: 'center', }} > Dashboard content for {pathname} diff --git a/docs/data/toolpad/core/introduction/TutorialDefault.js b/docs/data/toolpad/core/introduction/TutorialDefault.js index 34fe30285df..2a039d1c831 100644 --- a/docs/data/toolpad/core/introduction/TutorialDefault.js +++ b/docs/data/toolpad/core/introduction/TutorialDefault.js @@ -20,6 +20,7 @@ function DemoPageContent() { display: 'flex', flexDirection: 'column', alignItems: 'center', + textAlign: 'center', }} > Dashboard content diff --git a/docs/data/toolpad/core/introduction/TutorialDefault.tsx b/docs/data/toolpad/core/introduction/TutorialDefault.tsx index b1b95b8dce4..5a381f2d588 100644 --- a/docs/data/toolpad/core/introduction/TutorialDefault.tsx +++ b/docs/data/toolpad/core/introduction/TutorialDefault.tsx @@ -20,6 +20,7 @@ function DemoPageContent() { display: 'flex', flexDirection: 'column', alignItems: 'center', + textAlign: 'center', }} > Dashboard content diff --git a/docs/data/toolpad/core/introduction/TutorialPages.js b/docs/data/toolpad/core/introduction/TutorialPages.js index afec1efb0a2..64a9b31809e 100644 --- a/docs/data/toolpad/core/introduction/TutorialPages.js +++ b/docs/data/toolpad/core/introduction/TutorialPages.js @@ -33,6 +33,7 @@ function DemoPageContent({ pathname }) { display: 'flex', flexDirection: 'column', alignItems: 'center', + textAlign: 'center', }} > Dashboard content for {pathname} diff --git a/docs/data/toolpad/core/introduction/TutorialPages.tsx b/docs/data/toolpad/core/introduction/TutorialPages.tsx index cb1700b83c1..4853fce9ffe 100644 --- a/docs/data/toolpad/core/introduction/TutorialPages.tsx +++ b/docs/data/toolpad/core/introduction/TutorialPages.tsx @@ -32,6 +32,7 @@ function DemoPageContent({ pathname }: { pathname: string }) { display: 'flex', flexDirection: 'column', alignItems: 'center', + textAlign: 'center', }} > Dashboard content for {pathname} diff --git a/examples/core-tutorial/theme.ts b/examples/core-tutorial/theme.ts index facb392920a..ae15fd47b2d 100644 --- a/examples/core-tutorial/theme.ts +++ b/examples/core-tutorial/theme.ts @@ -9,11 +9,6 @@ const theme = createTheme(defaultTheme, { default: defaultTheme.palette.grey['50'], }, }, - typography: { - h6: { - fontWeight: '700', - }, - }, }); export default theme; diff --git a/packages/create-toolpad-app/src/generateProject.ts b/packages/create-toolpad-app/src/generateProject.ts index 0d7c4b4e2f5..626b9adcdca 100644 --- a/packages/create-toolpad-app/src/generateProject.ts +++ b/packages/create-toolpad-app/src/generateProject.ts @@ -113,11 +113,6 @@ export default function generateProject( default: defaultTheme.palette.grey['50'], }, }, - typography: { - h6: { - fontWeight: '700', - }, - }, }); export default theme; diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx index 5d33edf7100..6cf245c6f4e 100644 --- a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx +++ b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx @@ -1,7 +1,7 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import { styled } from '@mui/material'; +import { styled, useTheme } from '@mui/material'; import MuiAppBar from '@mui/material/AppBar'; import Box from '@mui/material/Box'; import Collapse from '@mui/material/Collapse'; @@ -76,6 +76,7 @@ const NavigationListItemButton = styled(ListItemButton)(({ theme }) => ({ function ThemeSwitcher() { const isSsr = useSsr(); + const theme = useTheme(); const { paletteMode, setPaletteMode, isDualTheme } = React.useContext(PaletteModeContext); @@ -92,28 +93,36 @@ function ThemeSwitcher() { : `Switch to ${paletteMode === 'dark' ? 'light' : 'dark'} mode` } onClick={toggleMode} - sx={(theme) => ({ + sx={{ color: (theme.vars ?? theme).palette.primary.dark, padding: 1, - })} + }} > - - ({ - [theme.getColorSchemeSelector('dark')]: { + {theme.getColorSchemeSelector ? ( + + + - ({ - display: 'none', - [theme.getColorSchemeSelector('dark')]: { - display: 'inline', - }, - })} - /> - + [theme.getColorSchemeSelector('dark')]: { + display: 'inline', + }, + }} + /> + + ) : null} + {!theme.getColorSchemeSelector ? ( + + {isSsr ? : null} + {!isSsr && paletteMode === 'dark' ? : } + + ) : null} ) : null; @@ -195,16 +204,12 @@ function DashboardSidebarSubNavigation({ ({ - color: (theme.vars ?? theme).palette.grey['600'], + sx={{ fontSize: 12, fontWeight: '700', height: 40, pl: 4, - [theme.getColorSchemeSelector('dark')]: { - color: (theme.vars ?? theme).palette.grey['500'], - }, - })} + }} > {navigationItem.title} @@ -330,7 +335,10 @@ function DashboardLayout(props: DashboardLayoutProps) { (theme.vars ?? theme).palette.primary.main }} + sx={{ + color: (theme) => (theme.vars ?? theme).palette.primary.main, + fontWeight: '700', + }} > {branding?.title ?? 'Toolpad'} diff --git a/packages/toolpad-core/src/themes/baseCSSVarsTheme.ts b/packages/toolpad-core/src/themes/baseCSSVarsTheme.ts index b8404a67b52..e5f0365d2d1 100644 --- a/packages/toolpad-core/src/themes/baseCSSVarsTheme.ts +++ b/packages/toolpad-core/src/themes/baseCSSVarsTheme.ts @@ -24,11 +24,6 @@ const baseCSSVarsTheme = extendTheme({ }, }, }, - typography: { - h6: { - fontWeight: '700', - }, - }, }); export { baseCSSVarsTheme }; diff --git a/packages/toolpad-core/src/themes/baseDarkTheme.ts b/packages/toolpad-core/src/themes/baseDarkTheme.ts index e9cecf902f7..834491933b9 100644 --- a/packages/toolpad-core/src/themes/baseDarkTheme.ts +++ b/packages/toolpad-core/src/themes/baseDarkTheme.ts @@ -15,11 +15,6 @@ const baseDarkTheme = createTheme(defaultDarkTheme, { primary: defaultDarkTheme.palette.grey['100'], }, }, - typography: { - h6: { - fontWeight: '700', - }, - }, }); export { baseDarkTheme }; diff --git a/packages/toolpad-core/src/themes/baseLightTheme.ts b/packages/toolpad-core/src/themes/baseLightTheme.ts index 25d0483921a..912f99d3657 100644 --- a/packages/toolpad-core/src/themes/baseLightTheme.ts +++ b/packages/toolpad-core/src/themes/baseLightTheme.ts @@ -8,11 +8,6 @@ const baseLightTheme = createTheme(defaultLightTheme, { default: defaultLightTheme.palette.grey['50'], }, }, - typography: { - h6: { - fontWeight: '700', - }, - }, }); export { baseLightTheme }; diff --git a/playground/nextjs-pages/src/pages/index.tsx b/playground/nextjs-pages/src/pages/index.tsx index 761eebce518..ff57b97d844 100644 --- a/playground/nextjs-pages/src/pages/index.tsx +++ b/playground/nextjs-pages/src/pages/index.tsx @@ -11,6 +11,7 @@ export default function HomePage() { flexDirection: 'column', justifyContent: 'center', alignItems: 'center', + textAlign: 'center', }} > diff --git a/playground/nextjs-pages/src/pages/orders/index.tsx b/playground/nextjs-pages/src/pages/orders/index.tsx index 9cb3b092c9b..c63eb5844df 100644 --- a/playground/nextjs-pages/src/pages/orders/index.tsx +++ b/playground/nextjs-pages/src/pages/orders/index.tsx @@ -11,6 +11,7 @@ export default function OrdersPage() { flexDirection: 'column', justifyContent: 'center', alignItems: 'center', + textAlign: 'center', }} > diff --git a/playground/nextjs/src/app/(dashboard)/orders/page.tsx b/playground/nextjs/src/app/(dashboard)/orders/page.tsx index 9cb3b092c9b..c63eb5844df 100644 --- a/playground/nextjs/src/app/(dashboard)/orders/page.tsx +++ b/playground/nextjs/src/app/(dashboard)/orders/page.tsx @@ -11,6 +11,7 @@ export default function OrdersPage() { flexDirection: 'column', justifyContent: 'center', alignItems: 'center', + textAlign: 'center', }} > diff --git a/playground/nextjs/src/app/(dashboard)/page.tsx b/playground/nextjs/src/app/(dashboard)/page.tsx index 761eebce518..ff57b97d844 100644 --- a/playground/nextjs/src/app/(dashboard)/page.tsx +++ b/playground/nextjs/src/app/(dashboard)/page.tsx @@ -11,6 +11,7 @@ export default function HomePage() { flexDirection: 'column', justifyContent: 'center', alignItems: 'center', + textAlign: 'center', }} > From ad9bddb719a81cd113b73e82d304ae5ead1a0e8c Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Tue, 9 Jul 2024 19:16:10 +0100 Subject: [PATCH 25/42] Update some examples/tutorials --- examples/core-tutorial/theme.ts | 30 ++++++++++++++----- .../create-toolpad-app/src/generateProject.ts | 30 ++++++++++++++----- 2 files changed, 46 insertions(+), 14 deletions(-) diff --git a/examples/core-tutorial/theme.ts b/examples/core-tutorial/theme.ts index ae15fd47b2d..69cde85bfa5 100644 --- a/examples/core-tutorial/theme.ts +++ b/examples/core-tutorial/theme.ts @@ -1,12 +1,28 @@ 'use client'; -import { createTheme } from '@mui/material/styles'; +import { experimental_extendTheme as extendTheme } from '@mui/material/styles'; +import type {} from '@mui/material/themeCssVarsAugmentation'; -const defaultTheme = createTheme(); - -const theme = createTheme(defaultTheme, { - palette: { - background: { - default: defaultTheme.palette.grey['50'], +const theme = extendTheme({ + colorSchemes: { + light: { + palette: { + background: { + default: 'var(--mui-palette-grey-50)', + defaultChannel: 'var(--mui-palette-grey-50)', + }, + }, + }, + dark: { + palette: { + background: { + default: 'var(--mui-palette-grey-900)', + defaultChannel: 'var(--mui-palette-grey-900)', + }, + text: { + primary: 'var(--mui-palette-grey-200)', + primaryChannel: 'var(--mui-palette-grey-200)', + }, + }, }, }, }); diff --git a/packages/create-toolpad-app/src/generateProject.ts b/packages/create-toolpad-app/src/generateProject.ts index 626b9adcdca..34f3d6e75a9 100644 --- a/packages/create-toolpad-app/src/generateProject.ts +++ b/packages/create-toolpad-app/src/generateProject.ts @@ -103,14 +103,30 @@ export default function generateProject( const themeContent = ` "use client"; - import { createTheme } from "@mui/material/styles"; + import { experimental_extendTheme as extendTheme } from '@mui/material/styles'; + import type {} from '@mui/material/themeCssVarsAugmentation'; - const defaultTheme = createTheme(); - - const theme = createTheme(defaultTheme, { - palette: { - background: { - default: defaultTheme.palette.grey['50'], + const theme = extendTheme({ + colorSchemes: { + light: { + palette: { + background: { + default: 'var(--mui-palette-grey-50)', + defaultChannel: 'var(--mui-palette-grey-50)', + }, + }, + }, + dark: { + palette: { + background: { + default: 'var(--mui-palette-grey-900)', + defaultChannel: 'var(--mui-palette-grey-900)', + }, + text: { + primary: 'var(--mui-palette-grey-200)', + primaryChannel: 'var(--mui-palette-grey-200)', + }, + }, }, }, }); From ee74f01d502286fd8064662fefb179b3d8bca81f Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Thu, 11 Jul 2024 19:35:23 +0100 Subject: [PATCH 26/42] Small improvements --- .../src/DashboardLayout/DashboardLayout.tsx | 82 ++++++++++--------- playground/nextjs/src/app/layout.tsx | 8 +- 2 files changed, 51 insertions(+), 39 deletions(-) diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx index 6cf245c6f4e..81ce58b74f9 100644 --- a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx +++ b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx @@ -85,45 +85,51 @@ function ThemeSwitcher() { }, [paletteMode, setPaletteMode]); return isDualTheme ? ( - - - {theme.getColorSchemeSelector ? ( - - +
+ + {theme.getColorSchemeSelector ? ( + + + - - - ) : null} - {!theme.getColorSchemeSelector ? ( - - {isSsr ? : null} - {!isSsr && paletteMode === 'dark' ? : } - - ) : null} - + [theme.getColorSchemeSelector('dark')]: { + display: 'inline', + }, + }} + /> + + ) : null} + {!theme.getColorSchemeSelector ? ( + + {isSsr ? : null} + {!isSsr ? ( + + {paletteMode === 'dark' ? : } + + ) : null} + + ) : null} + +
) : null; } diff --git a/playground/nextjs/src/app/layout.tsx b/playground/nextjs/src/app/layout.tsx index 8b1a671cfc3..431ddfefa1b 100644 --- a/playground/nextjs/src/app/layout.tsx +++ b/playground/nextjs/src/app/layout.tsx @@ -4,6 +4,7 @@ import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter'; import DashboardIcon from '@mui/icons-material/Dashboard'; import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'; import type { Navigation } from '@toolpad/core'; +import { baseDarkTheme, baseLightTheme } from '@toolpad/core/themes'; const NAVIGATION: Navigation = [ { @@ -27,7 +28,12 @@ export default function RootLayout(props: { children: React.ReactNode }) { - {props.children} + + {props.children} + From 65716add35259e4cd675252af31f6397b6e43f69 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Thu, 11 Jul 2024 19:36:20 +0100 Subject: [PATCH 27/42] Oops --- playground/nextjs/src/app/layout.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/playground/nextjs/src/app/layout.tsx b/playground/nextjs/src/app/layout.tsx index 431ddfefa1b..8b1a671cfc3 100644 --- a/playground/nextjs/src/app/layout.tsx +++ b/playground/nextjs/src/app/layout.tsx @@ -4,7 +4,6 @@ import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter'; import DashboardIcon from '@mui/icons-material/Dashboard'; import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'; import type { Navigation } from '@toolpad/core'; -import { baseDarkTheme, baseLightTheme } from '@toolpad/core/themes'; const NAVIGATION: Navigation = [ { @@ -28,12 +27,7 @@ export default function RootLayout(props: { children: React.ReactNode }) { - - {props.children} - + {props.children} From bc791cf5e86f312ed29858f557ca9a41101c4371 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Thu, 11 Jul 2024 19:39:18 +0100 Subject: [PATCH 28/42] I thinkt this is the same --- .../toolpad-core/src/DashboardLayout/DashboardLayout.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx index 81ce58b74f9..8d54ded2ae3 100644 --- a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx +++ b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx @@ -120,12 +120,7 @@ function ThemeSwitcher() { ) : null} {!theme.getColorSchemeSelector ? ( - {isSsr ? : null} - {!isSsr ? ( - - {paletteMode === 'dark' ? : } - - ) : null} + {isSsr || paletteMode !== 'dark' ? : } ) : null} From f512ebb9aae483ac5c91c0c7d844f5163c9b561b Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Fri, 12 Jul 2024 13:59:28 +0100 Subject: [PATCH 29/42] Dedupes --- pnpm-lock.yaml | 135 +++++++++++++++++++++++++------------------------ 1 file changed, 69 insertions(+), 66 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e9c02d8c49a..4d3996281f0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -101,7 +101,7 @@ importers: version: https://codeload.github.com/mui/material-ui/tar.gz/987bb036905fdd4474ae5aaee7b2b5a3dc6b9315(@opentelemetry/api@1.9.0)(encoding@0.1.13) '@mui/x-charts': specifier: 7.9.0 - version: 7.9.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 7.9.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@next/eslint-plugin-next': specifier: 14.2.4 version: 14.2.4 @@ -290,10 +290,10 @@ importers: version: 5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/docs': specifier: 6.0.0-dev.240424162023-9968b4889d - version: 6.0.0-dev.240424162023-9968b4889d(2gqnrhtignfrrzncodxyqropsm) + version: 6.0.0-dev.240424162023-9968b4889d(vkeimf6pnn6fit3u6ic45qxiyi) '@mui/icons-material': specifier: next - version: 6.0.0-alpha.14(@mui/material@6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + version: 6.0.0-beta.0(@mui/material@6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/internal-markdown': specifier: ^1.0.1 version: 1.0.7 @@ -302,25 +302,25 @@ importers: version: 5.0.0-beta.46(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/lab': specifier: next - version: 6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': specifier: next - version: 6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material-nextjs': specifier: next - version: 6.0.0-alpha.13(@emotion/cache@11.11.0)(@emotion/server@11.11.0)(@mui/material@6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) + version: 6.0.0-alpha.13(@emotion/cache@11.11.0)(@emotion/server@11.11.0)(@mui/material@6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) '@mui/styles': specifier: next - version: 6.0.0-alpha.14(@types/react@18.3.3)(react@18.3.1) + version: 6.0.0-beta.0(@types/react@18.3.3)(react@18.3.1) '@mui/system': specifier: next - version: 6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + version: 6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/utils': specifier: next - version: 6.0.0-alpha.14(@types/react@18.3.3)(react@18.3.1) + version: 6.0.0-beta.0(@types/react@18.3.3)(react@18.3.1) '@mui/x-date-pickers': specifier: 7.9.0 - version: 7.9.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(date-fns-jalali@2.29.3-0)(date-fns@2.30.0)(dayjs@1.11.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 7.9.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(date-fns-jalali@2.29.3-0)(date-fns@2.30.0)(dayjs@1.11.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/x-license': specifier: 7.9.0 version: 7.9.0(@types/react@18.3.3)(react@18.3.1) @@ -2601,8 +2601,8 @@ packages: '@types/react': optional: true - '@mui/base@5.0.0-beta.52': - resolution: {integrity: sha512-/oQdkb7EEaPr1qRTyUsqRWGJoJ6FqRB+7qyrlueWr5mCK02qOrgPHJd3WreT4TsF655ZVc840TUBpS+5M6FPyg==} + '@mui/base@5.0.0-beta.53': + resolution: {integrity: sha512-WeLTX9zMQPxZ7w9oitDjxOZeQYDVx8JC/I81NUTdboyI7zp+K0ktpJ79gciruKf5Z9qD01+DfwzEisY05mk3QQ==} engines: {node: '>=12.0.0'} peerDependencies: '@types/react': ^17.0.0 || ^18.0.0 @@ -2644,11 +2644,11 @@ packages: '@types/react': optional: true - '@mui/icons-material@6.0.0-alpha.14': - resolution: {integrity: sha512-5PPwxY8DNNnhDBTRxHVgxBi0YrYphhOzcmn04R0OGK5kSHHzAEslEAOLiUtEeJrjBRWyT87KnsZ3IvF/A5rNtw==} + '@mui/icons-material@6.0.0-beta.0': + resolution: {integrity: sha512-eKwh48zOVnfuT5dIifDkPrwiaotHTd/vIvFAxIA7rzQSTRlJLIByUCu5PYdmMS0pbtko7kIER8DLe5nqAXnZHw==} engines: {node: '>=12.0.0'} peerDependencies: - '@mui/material': 6.0.0-alpha.14 + '@mui/material': 6.0.0-beta.0 '@types/react': ^17.0.0 || ^18.0.0 react: ^17.0.0 || ^18.0.0 peerDependenciesMeta: @@ -2699,13 +2699,14 @@ packages: '@types/react': optional: true - '@mui/lab@6.0.0-alpha.14': - resolution: {integrity: sha512-jIlDAbu5T+NiiPZAlhCrV2wkRKPBUY7TRC/BtMWFvdjjrBmlWldLE0BIFEjoXOZd8Ir/FRsM42WWt4kMz/CsKg==} + '@mui/lab@6.0.0-beta.0': + resolution: {integrity: sha512-WI3EEMFYfFyHox1QdkzOBACKu4DfUNX40klpeHlkbfaJjytdlmc4ZDoJI/aKUjDu/UsG6RulexiMnmomPNunCw==} engines: {node: '>=12.0.0'} peerDependencies: '@emotion/react': ^11.5.0 '@emotion/styled': ^11.3.0 - '@mui/material': ^6.0.0-alpha.14 + '@mui/material': ^6.0.0-beta.0 + '@mui/material-pigment-css': ^6.0.0-alpha.13 '@types/react': ^17.0.0 || ^18.0.0 react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 @@ -2714,6 +2715,8 @@ packages: optional: true '@emotion/styled': optional: true + '@mui/material-pigment-css': + optional: true '@types/react': optional: true @@ -2770,13 +2773,13 @@ packages: '@types/react': optional: true - '@mui/material@6.0.0-alpha.14': - resolution: {integrity: sha512-LlM8pPWyOilUPARWRbQQzzjl+q/0IhO6rteRUrox0FWRaviDciBxUjhLaXV28Vx4/Xy4+bjj0B0H2Uk3pUz1sA==} + '@mui/material@6.0.0-beta.0': + resolution: {integrity: sha512-nWsg+GPaYRFCJ4fcMT1jSklwZRYE9nceM8zsrT/i8M+pMhQNVoPh8cFlUXIiwdEhs1pfQVVtSyqMBHwHZ3Pjgg==} engines: {node: '>=12.0.0'} peerDependencies: '@emotion/react': ^11.5.0 '@emotion/styled': ^11.3.0 - '@pigment-css/react': ^0.0.16 + '@mui/material-pigment-css': ^6.0.0-alpha.13 '@types/react': ^17.0.0 || ^18.0.0 react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 @@ -2785,7 +2788,7 @@ packages: optional: true '@emotion/styled': optional: true - '@pigment-css/react': + '@mui/material-pigment-css': optional: true '@types/react': optional: true @@ -2815,8 +2818,8 @@ packages: '@types/react': optional: true - '@mui/private-theming@6.0.0-alpha.14': - resolution: {integrity: sha512-CcuIV30FgZOcglQwml49nSANg/e5TIBAttSQDnFJN8AjKtBJ3IjQpS1nqQpaMOq4GZf7VUK5+BtgFPio/6w/Wg==} + '@mui/private-theming@6.0.0-beta.0': + resolution: {integrity: sha512-zBWo9vzsR+GMU6+rMJRJglUV4doghMk9sprfFcsKXlAEKil4EIPSoLJIQAjH4nYlPqqenkiR1YISUUltIsdfdw==} engines: {node: '>=12.0.0'} peerDependencies: '@types/react': ^17.0.0 || ^18.0.0 @@ -2851,8 +2854,8 @@ packages: '@emotion/styled': optional: true - '@mui/styled-engine@6.0.0-alpha.14': - resolution: {integrity: sha512-0OS1CrHDbfZrhQuXCqNVm7b+ZF4FkBG/w6/emEf865ACHC5k4EqIk31nThuchBZLUtntwvGfD2b+JFDFW3XWlg==} + '@mui/styled-engine@6.0.0-beta.0': + resolution: {integrity: sha512-IehSACg1jxxbrunNbWCMr5Av+dWTrogT4afao5+idhZ6lydbxyIeeta8Gq6ZaF4jLqfwLKRKCy8XMRJ7XifD2A==} engines: {node: '>=12.0.0'} peerDependencies: '@emotion/react': ^11.4.1 @@ -2864,8 +2867,8 @@ packages: '@emotion/styled': optional: true - '@mui/styles@6.0.0-alpha.14': - resolution: {integrity: sha512-wFgBAtekEp3iAi+tnPjpEgqzUkxoQtgYeo6/53qw7J499gIz1rHFup2sqCMZ8xNkZdSsf6a5AK0c2i8mHTgkEA==} + '@mui/styles@6.0.0-beta.0': + resolution: {integrity: sha512-hiWgf0aTwp0FSS2jcbVoPQHk6WeweioCLh9qWGBf53tuCPcOt8r7d6l+OGnQdWcs7kEAGdfuKAD6a5MFdMFDiA==} engines: {node: '>=12.0.0'} peerDependencies: '@types/react': ^17.0.0 || ^18.0.0 @@ -2906,8 +2909,8 @@ packages: '@types/react': optional: true - '@mui/system@6.0.0-alpha.14': - resolution: {integrity: sha512-Ig4h+4PPnv12bTU3EnhYB6strzPGub+g+UgDFmzMQESMEfeU1uasNJuvY4FG4q6UgnQYgB8ZGWYms88c5lPeNg==} + '@mui/system@6.0.0-beta.0': + resolution: {integrity: sha512-QoQ6Mz/iJ9/CVLqmKZYPOk2DzGu1Qm5lk3vp/2CbVM84BdeQkEv+l/GLpF7Ck+G+9ku7YTWeQpi/B7OoMkqHVQ==} engines: {node: '>=12.0.0'} peerDependencies: '@emotion/react': ^11.5.0 @@ -2950,8 +2953,8 @@ packages: '@types/react': optional: true - '@mui/utils@6.0.0-alpha.14': - resolution: {integrity: sha512-9henSOHSAu+dYDiimxadABzJjiPx6EqzfTdYYldnH+FWWmVieguqrtOfkxo5dHqx9GY++rAOlliM4Xz3PoqVxA==} + '@mui/utils@6.0.0-beta.0': + resolution: {integrity: sha512-Slu5BBN7laJI5hZSQsksNz5DGJrftaDxuJx902Utu+W6Y8mv4dawc1lpYH13PXJHdO3Jw0JjQZwmYYTqMEqN5Q==} engines: {node: '>=12.0.0'} peerDependencies: '@types/react': ^17.0.0 || ^18.0.0 @@ -11687,12 +11690,12 @@ snapshots: optionalDependencies: '@types/react': 18.3.3 - '@mui/base@5.0.0-beta.52(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mui/base@5.0.0-beta.53(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 '@floating-ui/react-dom': 2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/types': 7.2.14(@types/react@18.3.3) - '@mui/utils': 6.0.0-alpha.14(@types/react@18.3.3)(react@18.3.1) + '@mui/utils': 6.0.0-beta.0(@types/react@18.3.3)(react@18.3.1) '@popperjs/core': 2.11.8 clsx: 2.1.1 prop-types: 15.8.1 @@ -11705,14 +11708,14 @@ snapshots: '@mui/core-downloads-tracker@6.0.0-dev.240424162023-9968b4889d': {} - '@mui/docs@6.0.0-dev.240424162023-9968b4889d(2gqnrhtignfrrzncodxyqropsm)': + '@mui/docs@6.0.0-dev.240424162023-9968b4889d(vkeimf6pnn6fit3u6ic45qxiyi)': dependencies: '@babel/runtime': 7.24.7 '@mui/base': 5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/icons-material': 6.0.0-alpha.14(@mui/material@6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + '@mui/icons-material': 6.0.0-beta.0(@mui/material@6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/internal-markdown': 1.0.7 - '@mui/material': 6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/system': 6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + '@mui/material': 6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/system': 6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) clipboard-copy: 4.0.1 clsx: 2.1.1 next: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -11730,10 +11733,10 @@ snapshots: optionalDependencies: '@types/react': 18.3.3 - '@mui/icons-material@6.0.0-alpha.14(@mui/material@6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)': + '@mui/icons-material@6.0.0-beta.0(@mui/material@6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 - '@mui/material': 6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/material': 6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 optionalDependencies: '@types/react': 18.3.3 @@ -11799,14 +11802,14 @@ snapshots: '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@types/react': 18.3.3 - '@mui/lab@6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mui/lab@6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 - '@mui/base': 5.0.0-beta.52(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/material': 6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/system': 6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + '@mui/base': 5.0.0-beta.53(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/material': 6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/system': 6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/types': 7.2.14(@types/react@18.3.3) - '@mui/utils': 6.0.0-alpha.14(@types/react@18.3.3)(react@18.3.1) + '@mui/utils': 6.0.0-beta.0(@types/react@18.3.3)(react@18.3.1) clsx: 2.1.1 prop-types: 15.8.1 react: 18.3.1 @@ -11827,10 +11830,10 @@ snapshots: '@emotion/server': 11.11.0 '@types/react': 18.3.3 - '@mui/material-nextjs@6.0.0-alpha.13(@emotion/cache@11.11.0)(@emotion/server@11.11.0)(@mui/material@6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': + '@mui/material-nextjs@6.0.0-alpha.13(@emotion/cache@11.11.0)(@emotion/server@11.11.0)(@mui/material@6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 - '@mui/material': 6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/material': 6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) next: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 optionalDependencies: @@ -11859,14 +11862,14 @@ snapshots: '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@types/react': 18.3.3 - '@mui/material@6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mui/material@6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 - '@mui/base': 5.0.0-beta.52(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/base': 5.0.0-beta.53(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/core-downloads-tracker': 6.0.0-dev.240424162023-9968b4889d - '@mui/system': 6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + '@mui/system': 6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/types': 7.2.14(@types/react@18.3.3) - '@mui/utils': 6.0.0-alpha.14(@types/react@18.3.3)(react@18.3.1) + '@mui/utils': 6.0.0-beta.0(@types/react@18.3.3)(react@18.3.1) '@types/react-transition-group': 4.4.10 clsx: 2.1.1 csstype: 3.1.3 @@ -11913,10 +11916,10 @@ snapshots: optionalDependencies: '@types/react': 18.3.3 - '@mui/private-theming@6.0.0-alpha.14(@types/react@18.3.3)(react@18.3.1)': + '@mui/private-theming@6.0.0-beta.0(@types/react@18.3.3)(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 - '@mui/utils': 6.0.0-alpha.14(@types/react@18.3.3)(react@18.3.1) + '@mui/utils': 6.0.0-beta.0(@types/react@18.3.3)(react@18.3.1) prop-types: 15.8.1 react: 18.3.1 optionalDependencies: @@ -11944,7 +11947,7 @@ snapshots: '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1) '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) - '@mui/styled-engine@6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)': + '@mui/styled-engine@6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 '@emotion/cache': 11.11.0 @@ -11955,13 +11958,13 @@ snapshots: '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1) '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) - '@mui/styles@6.0.0-alpha.14(@types/react@18.3.3)(react@18.3.1)': + '@mui/styles@6.0.0-beta.0(@types/react@18.3.3)(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 '@emotion/hash': 0.9.1 - '@mui/private-theming': 6.0.0-alpha.14(@types/react@18.3.3)(react@18.3.1) + '@mui/private-theming': 6.0.0-beta.0(@types/react@18.3.3)(react@18.3.1) '@mui/types': 7.2.14(@types/react@18.3.3) - '@mui/utils': 6.0.0-alpha.14(@types/react@18.3.3)(react@18.3.1) + '@mui/utils': 6.0.0-beta.0(@types/react@18.3.3)(react@18.3.1) clsx: 2.1.1 csstype: 3.1.3 hoist-non-react-statics: 3.3.2 @@ -12010,13 +12013,13 @@ snapshots: '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@types/react': 18.3.3 - '@mui/system@6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)': + '@mui/system@6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 - '@mui/private-theming': 6.0.0-alpha.14(@types/react@18.3.3)(react@18.3.1) - '@mui/styled-engine': 6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1) + '@mui/private-theming': 6.0.0-beta.0(@types/react@18.3.3)(react@18.3.1) + '@mui/styled-engine': 6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1) '@mui/types': 7.2.14(@types/react@18.3.3) - '@mui/utils': 6.0.0-alpha.14(@types/react@18.3.3)(react@18.3.1) + '@mui/utils': 6.0.0-beta.0(@types/react@18.3.3)(react@18.3.1) clsx: 2.1.1 csstype: 3.1.3 prop-types: 15.8.1 @@ -12050,7 +12053,7 @@ snapshots: optionalDependencies: '@types/react': 18.3.3 - '@mui/utils@6.0.0-alpha.14(@types/react@18.3.3)(react@18.3.1)': + '@mui/utils@6.0.0-beta.0(@types/react@18.3.3)(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 '@types/prop-types': 15.7.12 @@ -12084,11 +12087,11 @@ snapshots: transitivePeerDependencies: - '@types/react' - '@mui/x-charts@7.9.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mui/x-charts@7.9.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 '@mui/base': 5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/material': 6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/material': 6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/system': 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/utils': 5.16.0(@types/react@18.3.3)(react@18.3.1) '@react-spring/rafz': 9.7.3 @@ -12210,11 +12213,11 @@ snapshots: transitivePeerDependencies: - '@types/react' - '@mui/x-date-pickers@7.9.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(date-fns-jalali@2.29.3-0)(date-fns@2.30.0)(dayjs@1.11.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mui/x-date-pickers@7.9.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(date-fns-jalali@2.29.3-0)(date-fns@2.30.0)(dayjs@1.11.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 '@mui/base': 5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/material': 6.0.0-alpha.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/material': 6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/system': 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/utils': 5.16.0(@types/react@18.3.3)(react@18.3.1) '@types/react-transition-group': 4.4.10 From b56f2407b8af5444b5c408389a39a1beaa06172c Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Fri, 12 Jul 2024 17:27:15 +0100 Subject: [PATCH 30/42] Better ordering in theme example --- .../app-provider/AppProviderTheme.js | 20 +++++++++---------- .../app-provider/AppProviderTheme.tsx | 20 +++++++++---------- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js index 87ac21e6669..7993e7c2fc7 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js +++ b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js @@ -25,16 +25,6 @@ const NAVIGATION = [ }, ]; -const customTheme = createTheme({ - palette: { - mode: 'dark', - background: { - default: '#2A4364', - paper: '#112E4D', - }, - }, -}); - function DemoPageContent({ pathname }) { return ( Date: Thu, 18 Jul 2024 22:37:06 +0100 Subject: [PATCH 31/42] Suggestions so far --- .../app-provider/AppProviderBasic.js | 24 ++++++++++----- .../app-provider/AppProviderBasic.tsx | 22 +++++++++----- .../app-provider/AppProviderBasic.tsx.preview | 6 +--- .../app-provider/AppProviderTheme.js | 26 +++++++++++++++-- .../app-provider/AppProviderTheme.tsx | 23 +++++++++++++-- .../app-provider/AppProviderTheme.tsx.preview | 7 ++++- .../components/app-provider/app-provider.md | 8 ----- .../dashboard-layout/DashboardLayoutBasic.js | 24 ++++++++++----- .../dashboard-layout/DashboardLayoutBasic.tsx | 22 +++++++++----- .../DashboardLayoutBasic.tsx.preview | 6 +--- .../DashboardLayoutBranding.js | 20 +++++++++++-- .../DashboardLayoutBranding.tsx | 18 ++++++++++-- .../DashboardLayoutBranding.tsx.preview | 2 +- .../DashboardLayoutNavigation.js | 20 +++++++++++-- .../DashboardLayoutNavigation.tsx | 18 ++++++++++-- .../DashboardLayoutNavigation.tsx.preview | 2 +- docs/pages/toolpad/core/api/app-provider.json | 5 ++-- .../api-docs/app-provider/app-provider.json | 3 ++ .../src/AppProvider/AppProvider.tsx | 29 +++++++++++++------ .../src/AppProvider/AppThemeProvider.tsx | 17 ++++++++--- .../DashboardLayout/DashboardLayout.test.tsx | 3 +- .../src/DashboardLayout/DashboardLayout.tsx | 9 ++---- .../src/themes/baseCSSVarsTheme.ts | 29 ------------------- .../toolpad-core/src/themes/baseDarkTheme.ts | 20 ------------- .../toolpad-core/src/themes/baseLightTheme.ts | 13 --------- packages/toolpad-core/src/themes/index.ts | 4 --- 26 files changed, 226 insertions(+), 154 deletions(-) delete mode 100644 packages/toolpad-core/src/themes/baseCSSVarsTheme.ts delete mode 100644 packages/toolpad-core/src/themes/baseDarkTheme.ts delete mode 100644 packages/toolpad-core/src/themes/baseLightTheme.ts delete mode 100644 packages/toolpad-core/src/themes/index.ts diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.js b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.js index b6a828f1765..7facac0f5e0 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.js +++ b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.js @@ -6,7 +6,6 @@ import DashboardIcon from '@mui/icons-material/Dashboard'; import TimelineIcon from '@mui/icons-material/Timeline'; import { AppProvider } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; -import { baseDarkTheme, baseLightTheme } from '@toolpad/core/themes'; const NAVIGATION = [ { @@ -45,7 +44,9 @@ DemoPageContent.propTypes = { pathname: PropTypes.string.isRequired, }; -export default function AppProviderBasic() { +function AppProviderBasic(props) { + const { window } = props; + const [pathname, setPathname] = React.useState('/page'); const router = React.useMemo(() => { @@ -56,13 +57,12 @@ export default function AppProviderBasic() { }; }, [pathname]); + // Remove this const when copying and pasting into your project. + const demoWindow = window !== undefined ? window() : undefined; + return ( // preview-start - + @@ -70,3 +70,13 @@ export default function AppProviderBasic() { // preview-end ); } + +AppProviderBasic.propTypes = { + /** + * Injected by the documentation to work in an iframe. + * Remove this when copying and pasting into your project. + */ + window: PropTypes.func, +}; + +export default AppProviderBasic; diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx index a58efdaafd9..07db300713b 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx +++ b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx @@ -5,7 +5,6 @@ import DashboardIcon from '@mui/icons-material/Dashboard'; import TimelineIcon from '@mui/icons-material/Timeline'; import { AppProvider } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; -import { baseDarkTheme, baseLightTheme } from '@toolpad/core/themes'; import type { Navigation, Router } from '@toolpad/core'; const NAVIGATION: Navigation = [ @@ -41,7 +40,17 @@ function DemoPageContent({ pathname }: { pathname: string }) { ); } -export default function AppProviderBasic() { +interface DemoProps { + /** + * Injected by the documentation to work in an iframe. + * Remove this when copying and pasting into your project. + */ + window?: () => Window; +} + +export default function AppProviderBasic(props: DemoProps) { + const { window } = props; + const [pathname, setPathname] = React.useState('/page'); const router = React.useMemo(() => { @@ -52,13 +61,12 @@ export default function AppProviderBasic() { }; }, [pathname]); + // Remove this const when copying and pasting into your project. + const demoWindow = window !== undefined ? window() : undefined; + return ( // preview-start - + diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx.preview b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx.preview index 3d32e4704ab..512dc89fa09 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx.preview +++ b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx.preview @@ -1,8 +1,4 @@ - + diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js index 7993e7c2fc7..d87d5d4c948 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js +++ b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js @@ -41,6 +41,8 @@ function DemoPageContent({ pathname }) { ); } +// @TODO: Use CSS vars theme once Toolpad Core uses Material UI v6 + DemoPageContent.propTypes = { pathname: PropTypes.string.isRequired, }; @@ -55,7 +57,9 @@ const customTheme = createTheme({ }, }); -export default function AppProviderTheme() { +function AppProviderTheme(props) { + const { window } = props; + const [pathname, setPathname] = React.useState('/page'); const router = React.useMemo(() => { @@ -66,9 +70,17 @@ export default function AppProviderTheme() { }; }, [pathname]); + // Remove this const when copying and pasting into your project. + const demoWindow = window !== undefined ? window() : undefined; + return ( // preview-start - + @@ -76,3 +88,13 @@ export default function AppProviderTheme() { // preview-end ); } + +AppProviderTheme.propTypes = { + /** + * Injected by the documentation to work in an iframe. + * Remove this when copying and pasting into your project. + */ + window: PropTypes.func, +}; + +export default AppProviderTheme; diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx index d7caf851808..632c78a88e5 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx +++ b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx @@ -41,6 +41,7 @@ function DemoPageContent({ pathname }: { pathname: string }) { ); } +// @TODO: Use CSS vars theme once Toolpad Core uses Material UI v6 const customTheme = createTheme({ palette: { mode: 'dark', @@ -51,7 +52,17 @@ const customTheme = createTheme({ }, }); -export default function AppProviderTheme() { +interface DemoProps { + /** + * Injected by the documentation to work in an iframe. + * Remove this when copying and pasting into your project. + */ + window?: () => Window; +} + +export default function AppProviderTheme(props: DemoProps) { + const { window } = props; + const [pathname, setPathname] = React.useState('/page'); const router = React.useMemo(() => { @@ -62,9 +73,17 @@ export default function AppProviderTheme() { }; }, [pathname]); + // Remove this const when copying and pasting into your project. + const demoWindow = window !== undefined ? window() : undefined; + return ( // preview-start - + diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx.preview b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx.preview index 8145b476403..2112ddfced7 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx.preview +++ b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx.preview @@ -1,4 +1,9 @@ - + diff --git a/docs/data/toolpad/core/components/app-provider/app-provider.md b/docs/data/toolpad/core/components/app-provider/app-provider.md index 6d5e26e059a..e6b1afa8ba6 100644 --- a/docs/data/toolpad/core/components/app-provider/app-provider.md +++ b/docs/data/toolpad/core/components/app-provider/app-provider.md @@ -85,11 +85,3 @@ An `AppProvider` can set a visual theme for all elements inside it to adopt via 3. **Light and dark themes**: two separate Material UI themes can be provided for light and dark mode in an object with the format `{ light: Theme, dark: Theme }` {{"demo": "AppProviderTheme.js", "height": 500, "iframe": true}} - -### Predefined themes - -A set of predefined themes that work well with Toolpad applications can be imported from `@toolpad/core/themes`. - -```tsx -import { baseCSSVarsTheme } from '@toolpad/core/themes'; -``` diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js index ef7f1821011..6881d21974e 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js @@ -9,7 +9,6 @@ import DescriptionIcon from '@mui/icons-material/Description'; import LayersIcon from '@mui/icons-material/Layers'; import { AppProvider } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; -import { baseDarkTheme, baseLightTheme } from '@toolpad/core/themes'; const NAVIGATION = [ { @@ -77,7 +76,9 @@ DemoPageContent.propTypes = { pathname: PropTypes.string.isRequired, }; -export default function DashboardLayoutBasic() { +function DashboardLayoutBasic(props) { + const { window } = props; + const [pathname, setPathname] = React.useState('/page'); const router = React.useMemo(() => { @@ -88,13 +89,12 @@ export default function DashboardLayoutBasic() { }; }, [pathname]); + // Remove this const when copying and pasting into your project. + const demoWindow = window !== undefined ? window() : undefined; + return ( // preview-start - + @@ -102,3 +102,13 @@ export default function DashboardLayoutBasic() { // preview-end ); } + +DashboardLayoutBasic.propTypes = { + /** + * Injected by the documentation to work in an iframe. + * Remove this when copying and pasting into your project. + */ + window: PropTypes.func, +}; + +export default DashboardLayoutBasic; diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx index 4ef457fd998..587d3da4410 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx @@ -8,7 +8,6 @@ import DescriptionIcon from '@mui/icons-material/Description'; import LayersIcon from '@mui/icons-material/Layers'; import { AppProvider, Router } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; -import { baseDarkTheme, baseLightTheme } from '@toolpad/core/themes'; import type { Navigation } from '@toolpad/core'; const NAVIGATION: Navigation = [ @@ -73,7 +72,17 @@ function DemoPageContent({ pathname }: { pathname: string }) { ); } -export default function DashboardLayoutBasic() { +interface DemoProps { + /** + * Injected by the documentation to work in an iframe. + * Remove this when copying and pasting into your project. + */ + window?: () => Window; +} + +export default function DashboardLayoutBasic(props: DemoProps) { + const { window } = props; + const [pathname, setPathname] = React.useState('/page'); const router = React.useMemo(() => { @@ -84,13 +93,12 @@ export default function DashboardLayoutBasic() { }; }, [pathname]); + // Remove this const when copying and pasting into your project. + const demoWindow = window !== undefined ? window() : undefined; + return ( // preview-start - + diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx.preview index 3d32e4704ab..512dc89fa09 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx.preview +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx.preview @@ -1,8 +1,4 @@ - + diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js index c236a2f041d..522fb7c5630 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js @@ -6,7 +6,6 @@ import DashboardIcon from '@mui/icons-material/Dashboard'; import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'; import { AppProvider } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; -import { baseDarkTheme, baseLightTheme } from '@toolpad/core/themes'; const NAVIGATION = [ { @@ -41,7 +40,9 @@ DemoPageContent.propTypes = { pathname: PropTypes.string.isRequired, }; -export default function DashboardLayoutBranding() { +function DashboardLayoutBranding(props) { + const { window } = props; + const [pathname, setPathname] = React.useState('/page'); const router = React.useMemo(() => { @@ -52,6 +53,9 @@ export default function DashboardLayoutBranding() { }; }, [pathname]); + // Remove this const when copying and pasting into your project. + const demoWindow = window !== undefined ? window() : undefined; + return ( // preview-start @@ -70,3 +74,13 @@ export default function DashboardLayoutBranding() { // preview-end ); } + +DashboardLayoutBranding.propTypes = { + /** + * Injected by the documentation to work in an iframe. + * Remove this when copying and pasting into your project. + */ + window: PropTypes.func, +}; + +export default DashboardLayoutBranding; diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx index 047217283d4..0aa5b5bb398 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx @@ -5,7 +5,6 @@ import DashboardIcon from '@mui/icons-material/Dashboard'; import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'; import { AppProvider, Router } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; -import { baseDarkTheme, baseLightTheme } from '@toolpad/core/themes'; import type { Navigation } from '@toolpad/core'; const NAVIGATION: Navigation = [ @@ -37,7 +36,17 @@ function DemoPageContent({ pathname }: { pathname: string }) { ); } -export default function DashboardLayoutBranding() { +interface DemoProps { + /** + * Injected by the documentation to work in an iframe. + * Remove this when copying and pasting into your project. + */ + window?: () => Window; +} + +export default function DashboardLayoutBranding(props: DemoProps) { + const { window } = props; + const [pathname, setPathname] = React.useState('/page'); const router = React.useMemo(() => { @@ -48,6 +57,9 @@ export default function DashboardLayoutBranding() { }; }, [pathname]); + // Remove this const when copying and pasting into your project. + const demoWindow = window !== undefined ? window() : undefined; + return ( // preview-start diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx.preview index c87302b5c85..f33054ed6a1 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx.preview +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx.preview @@ -5,7 +5,7 @@ title: 'MUI', }} router={router} - theme={{ light: baseLightTheme, dark: baseDarkTheme }} + window={demoWindow} > diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js index 2cefbc07484..acf465c3987 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js @@ -6,7 +6,6 @@ import DescriptionIcon from '@mui/icons-material/Description'; import FolderIcon from '@mui/icons-material/Folder'; import { AppProvider } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; -import { baseDarkTheme, baseLightTheme } from '@toolpad/core/themes'; function DemoPageContent({ pathname }) { return ( @@ -28,7 +27,9 @@ DemoPageContent.propTypes = { pathname: PropTypes.string.isRequired, }; -export default function DashboardLayoutNavigation() { +function DashboardLayoutNavigation(props) { + const { window } = props; + const [pathname, setPathname] = React.useState('/page'); const router = React.useMemo(() => { @@ -39,6 +40,9 @@ export default function DashboardLayoutNavigation() { }; }, [pathname]); + // Remove this const when copying and pasting into your project. + const demoWindow = window !== undefined ? window() : undefined; + return ( // preview-start @@ -192,3 +196,13 @@ export default function DashboardLayoutNavigation() { // preview-end ); } + +DashboardLayoutNavigation.propTypes = { + /** + * Injected by the documentation to work in an iframe. + * Remove this when copying and pasting into your project. + */ + window: PropTypes.func, +}; + +export default DashboardLayoutNavigation; diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx index d40a2be7530..829c9d59613 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx @@ -5,7 +5,6 @@ import DescriptionIcon from '@mui/icons-material/Description'; import FolderIcon from '@mui/icons-material/Folder'; import { AppProvider, Router } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; -import { baseDarkTheme, baseLightTheme } from '@toolpad/core/themes'; function DemoPageContent({ pathname }: { pathname: string }) { return ( @@ -23,7 +22,17 @@ function DemoPageContent({ pathname }: { pathname: string }) { ); } -export default function DashboardLayoutNavigation() { +interface DemoProps { + /** + * Injected by the documentation to work in an iframe. + * Remove this when copying and pasting into your project. + */ + window?: () => Window; +} + +export default function DashboardLayoutNavigation(props: DemoProps) { + const { window } = props; + const [pathname, setPathname] = React.useState('/page'); const router = React.useMemo(() => { @@ -34,6 +43,9 @@ export default function DashboardLayoutNavigation() { }; }, [pathname]); + // Remove this const when copying and pasting into your project. + const demoWindow = window !== undefined ? window() : undefined; + return ( // preview-start diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx.preview index 5bcf515a625..b45308001d4 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx.preview +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx.preview @@ -140,7 +140,7 @@ }, ]} router={router} - theme={{ light: baseLightTheme, dark: baseDarkTheme }} + window={demoWindow} > diff --git a/docs/pages/toolpad/core/api/app-provider.json b/docs/pages/toolpad/core/api/app-provider.json index 4dcb949d4ef..9ccfcd43894 100644 --- a/docs/pages/toolpad/core/api/app-provider.json +++ b/docs/pages/toolpad/core/api/app-provider.json @@ -8,7 +8,7 @@ "navigation": { "type": { "name": "arrayOf", - "description": "Array<{ children?: Array<object
| { kind: 'header', title: string }
| { kind: 'divider' }>, icon?: node, kind?: 'page', slug?: string, title: string }
| { kind: 'header', title: string }
| { kind: 'divider' }>" + "description": "Array<{ children?: Array<object
| { kind: 'header', title: string }
| { kind: 'divider' }>, icon?: node, kind?: 'page', slug?: string, title?: string }
| { kind: 'header', title: string }
| { kind: 'divider' }>" }, "default": "[]" }, @@ -19,7 +19,8 @@ }, "default": "null" }, - "theme": { "type": { "name": "object" }, "default": "baseCSSVarsTheme" } + "theme": { "type": { "name": "object" }, "default": "extendTheme()" }, + "window": { "type": { "name": "object" }, "default": "window" } }, "name": "AppProvider", "imports": [ diff --git a/docs/translations/api-docs/app-provider/app-provider.json b/docs/translations/api-docs/app-provider/app-provider.json index 61db5792045..b34f90d9ef4 100644 --- a/docs/translations/api-docs/app-provider/app-provider.json +++ b/docs/translations/api-docs/app-provider/app-provider.json @@ -7,6 +7,9 @@ "router": { "description": "Router implementation used inside Toolpad components." }, "theme": { "description": "Theme or themes to be used by the app in light/dark mode. A CSS variables theme is recommended." + }, + "window": { + "description": "The window where the application is rendered. This is needed when rendering the app inside an iframe, for example." } }, "classDescriptions": {} diff --git a/packages/toolpad-core/src/AppProvider/AppProvider.tsx b/packages/toolpad-core/src/AppProvider/AppProvider.tsx index a7a951d45db..7158196d14a 100644 --- a/packages/toolpad-core/src/AppProvider/AppProvider.tsx +++ b/packages/toolpad-core/src/AppProvider/AppProvider.tsx @@ -1,8 +1,7 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import { CssVarsTheme, Theme } from '@mui/material/styles'; -import { baseCSSVarsTheme } from '../themes'; +import { experimental_extendTheme as extendTheme, CssVarsTheme, Theme } from '@mui/material/styles'; import { NotificationsProvider } from '../useNotifications'; import { DialogsProvider } from '../useDialogs'; import { BrandingContext, NavigationContext, RouterContext } from '../shared/context'; @@ -32,7 +31,7 @@ export interface Branding { export interface NavigationPageItem { kind?: 'page'; - title: string; + title?: string; slug?: string; icon?: React.ReactNode; children?: Navigation; @@ -58,7 +57,7 @@ export interface AppProviderProps { children: React.ReactNode; /** * [Theme or themes](https://mui.com/toolpad/core/react-app-provider/#theming) to be used by the app in light/dark mode. A [CSS variables theme](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/) is recommended. - * @default baseCSSVarsTheme + * @default extendTheme() */ theme?: Theme | { light: Theme; dark: Theme } | CssVarsTheme; /** @@ -71,12 +70,17 @@ export interface AppProviderProps { * @default [] */ navigation?: Navigation; - /** * Router implementation used inside Toolpad components. * @default null */ router?: Router; + /** + * The window where the application is rendered. + * This is needed when rendering the app inside an iframe, for example. + * @default window + */ + window?: Window; } /** @@ -93,15 +97,16 @@ export interface AppProviderProps { function AppProvider(props: AppProviderProps) { const { children, - theme = baseCSSVarsTheme, + theme = extendTheme(), branding = null, navigation = [], router = null, + window, } = props; return ( - + @@ -153,7 +158,7 @@ AppProvider.propTypes /* remove-proptypes */ = { icon: PropTypes.node, kind: PropTypes.oneOf(['page']), slug: PropTypes.string, - title: PropTypes.string.isRequired, + title: PropTypes.string, }), PropTypes.shape({ kind: PropTypes.oneOf(['header']).isRequired, @@ -175,9 +180,15 @@ AppProvider.propTypes /* remove-proptypes */ = { }), /** * [Theme or themes](https://mui.com/toolpad/core/react-app-provider/#theming) to be used by the app in light/dark mode. A [CSS variables theme](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/) is recommended. - * @default baseCSSVarsTheme + * @default extendTheme() */ theme: PropTypes.object, + /** + * The window where the application is rendered. + * This is needed when rendering the app inside an iframe, for example. + * @default window + */ + window: PropTypes.object, } as any; export { AppProvider }; diff --git a/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx b/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx index 6ad02675f15..f4760d0977e 100644 --- a/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx +++ b/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx @@ -107,18 +107,24 @@ function CSSVarsThemeConsumer(props: CSSVarsThemeConsumerProps) { interface CSSVarsThemeProviderProps { children: React.ReactNode; theme: NonNullable; + window?: AppProviderProps['window']; } /** * @ignore - internal component. */ function CSSVarsThemeProvider(props: CSSVarsThemeProviderProps) { - const { children, theme } = props; + const { children, theme, window } = props; const isDualTheme = 'light' in theme.colorSchemes && 'dark' in theme.colorSchemes; return ( - + {children} ); @@ -127,13 +133,14 @@ function CSSVarsThemeProvider(props: CSSVarsThemeProviderProps) { interface AppThemeProviderProps { children: React.ReactNode; theme: NonNullable; + window?: AppProviderProps['window']; } /** * @ignore - internal component. */ function AppThemeProvider(props: AppThemeProviderProps) { - const { children, theme } = props; + const { children, theme, window } = props; const isCSSVarsTheme = 'colorSchemes' in theme; @@ -147,7 +154,9 @@ function AppThemeProvider(props: AppThemeProviderProps) { return isCSSVarsTheme ? ( {getInitColorSchemeScript()} - {themeChildren} + + {themeChildren} + ) : ( {themeChildren} diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.test.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.test.tsx index e23fd333c0d..fb8d98693da 100644 --- a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.test.tsx +++ b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.test.tsx @@ -15,7 +15,6 @@ import '@testing-library/jest-dom/vitest'; import { BrandingContext, NavigationContext } from '../shared/context'; import type { Navigation } from '../AppProvider'; import { AppThemeProvider } from '../AppProvider/AppThemeProvider'; -import { baseDarkTheme, baseLightTheme } from '../themes'; import { DashboardLayout } from './DashboardLayout'; describe('DashboardLayout', () => { @@ -46,7 +45,7 @@ describe('DashboardLayout', () => { test('can switch theme', async () => { const user = userEvent.setup(); render( - + Hello world , ); diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx index 8d54ded2ae3..caf46d44af1 100644 --- a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx +++ b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx @@ -164,10 +164,7 @@ function DashboardSidebarSubNavigation({ ); }), ) - .map( - ({ navigationItem, originalIndex }) => - `${(navigationItem as NavigationPageItem).title}-${depth}-${originalIndex}`, - ), + .map(({ originalIndex }) => `${depth}-${originalIndex}`), [basePath, depth, pathname, subNavigation], ); @@ -236,7 +233,7 @@ function DashboardSidebarSubNavigation({ const navigationItemFullPath = `${basePath}${navigationItem.slug ?? ''}`; - const navigationItemId = `${navigationItem.title}-${depth}-${navigationItemIndex}`; + const navigationItemId = `${depth}-${navigationItemIndex}`; const isNestedNavigationExpanded = expandedSidebarItemIds.includes(navigationItemId); @@ -260,7 +257,7 @@ function DashboardSidebarSubNavigation({ {navigationItem.icon} Date: Thu, 18 Jul 2024 22:41:56 +0100 Subject: [PATCH 32/42] Adjust demos more --- .../app-provider/AppProviderTheme.js | 23 +++++++++---------- .../app-provider/AppProviderTheme.tsx | 22 +++++++++--------- .../core/introduction/TutorialDefault.js | 20 ++++++++++++++-- .../core/introduction/TutorialDefault.tsx | 17 ++++++++++++-- .../core/introduction/TutorialPages.js | 19 +++++++++++++-- .../core/introduction/TutorialPages.tsx | 17 ++++++++++++-- 6 files changed, 87 insertions(+), 31 deletions(-) diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js index d87d5d4c948..25d61a5872c 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js +++ b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js @@ -25,6 +25,17 @@ const NAVIGATION = [ }, ]; +// TODO: Use CSS vars theme once Toolpad Core uses Material UI v6 +const customTheme = createTheme({ + palette: { + mode: 'dark', + background: { + default: '#2A4364', + paper: '#112E4D', + }, + }, +}); + function DemoPageContent({ pathname }) { return ( + ); } + +TutorialDefault.propTypes = { + /** + * Injected by the documentation to work in an iframe. + * Remove this when copying and pasting into your project. + */ + window: PropTypes.func, +}; + +export default TutorialDefault; diff --git a/docs/data/toolpad/core/introduction/TutorialDefault.tsx b/docs/data/toolpad/core/introduction/TutorialDefault.tsx index 5a381f2d588..e9eb39d63f1 100644 --- a/docs/data/toolpad/core/introduction/TutorialDefault.tsx +++ b/docs/data/toolpad/core/introduction/TutorialDefault.tsx @@ -28,9 +28,22 @@ function DemoPageContent() { ); } -export default function TutorialDefault() { +interface DemoProps { + /** + * Injected by the documentation to work in an iframe. + * Remove this when copying and pasting into your project. + */ + window?: () => Window; +} + +export default function TutorialDefault(props: DemoProps) { + const { window } = props; + + // Remove this const when copying and pasting into your project. + const demoWindow = window !== undefined ? window() : undefined; + return ( - + diff --git a/docs/data/toolpad/core/introduction/TutorialPages.js b/docs/data/toolpad/core/introduction/TutorialPages.js index 64a9b31809e..163b82a75f6 100644 --- a/docs/data/toolpad/core/introduction/TutorialPages.js +++ b/docs/data/toolpad/core/introduction/TutorialPages.js @@ -45,7 +45,12 @@ DemoPageContent.propTypes = { pathname: PropTypes.string.isRequired, }; -export default function TutorialPages() { +function TutorialPages(props) { + const { window } = props; + + // Remove this const when copying and pasting into your project. + const demoWindow = window !== undefined ? window() : undefined; + const [pathname, setPathname] = React.useState('/page'); const router = React.useMemo(() => { @@ -57,10 +62,20 @@ export default function TutorialPages() { }, [pathname]); return ( - + ); } + +TutorialPages.propTypes = { + /** + * Injected by the documentation to work in an iframe. + * Remove this when copying and pasting into your project. + */ + window: PropTypes.func, +}; + +export default TutorialPages; diff --git a/docs/data/toolpad/core/introduction/TutorialPages.tsx b/docs/data/toolpad/core/introduction/TutorialPages.tsx index 4853fce9ffe..dff3830a32c 100644 --- a/docs/data/toolpad/core/introduction/TutorialPages.tsx +++ b/docs/data/toolpad/core/introduction/TutorialPages.tsx @@ -40,7 +40,20 @@ function DemoPageContent({ pathname }: { pathname: string }) { ); } -export default function TutorialPages() { +interface DemoProps { + /** + * Injected by the documentation to work in an iframe. + * Remove this when copying and pasting into your project. + */ + window?: () => Window; +} + +export default function TutorialPages(props: DemoProps) { + const { window } = props; + + // Remove this const when copying and pasting into your project. + const demoWindow = window !== undefined ? window() : undefined; + const [pathname, setPathname] = React.useState('/page'); const router = React.useMemo(() => { @@ -52,7 +65,7 @@ export default function TutorialPages() { }, [pathname]); return ( - + From d9b5e173f7fdd6463cf0daf23ba220bced67e8cf Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Thu, 18 Jul 2024 23:35:10 +0100 Subject: [PATCH 33/42] Fix tests in browser mode --- .../DashboardLayout/DashboardLayout.test.tsx | 22 +- .../src/DashboardLayout/DashboardLayout.tsx | 1 + pnpm-lock.yaml | 269 +++++++++--------- 3 files changed, 146 insertions(+), 146 deletions(-) diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.test.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.test.tsx index fb8d98693da..f6c407f5766 100644 --- a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.test.tsx +++ b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.test.tsx @@ -12,9 +12,7 @@ import DescriptionIcon from '@mui/icons-material/Description'; import LayersIcon from '@mui/icons-material/Layers'; import userEvent from '@testing-library/user-event'; import '@testing-library/jest-dom/vitest'; -import { BrandingContext, NavigationContext } from '../shared/context'; -import type { Navigation } from '../AppProvider'; -import { AppThemeProvider } from '../AppProvider/AppThemeProvider'; +import { AppProvider, Navigation } from '../AppProvider'; import { DashboardLayout } from './DashboardLayout'; describe('DashboardLayout', () => { @@ -31,9 +29,9 @@ describe('DashboardLayout', () => { }; render( - + Hello world - , + , ); const header = screen.getByRole('banner'); @@ -45,24 +43,24 @@ describe('DashboardLayout', () => { test('can switch theme', async () => { const user = userEvent.setup(); render( - + Hello world - , + , ); const header = screen.getByRole('banner'); const themeSwitcherButton = within(header).getByLabelText('Switch to dark mode'); - expect(document.body).toHaveStyle(`background-color: rgb(250, 250, 250)`); + expect(document.body).toHaveStyle(`background-color: rgb(255, 255, 255)`); await user.click(themeSwitcherButton); - expect(document.body).toHaveStyle(`background-color: rgb(33, 33, 33)`); + expect(document.body).toHaveStyle(`background-color: rgb(18, 18, 18)`); await user.click(themeSwitcherButton); - expect(document.body).toHaveStyle(`background-color: rgb(250, 250, 250)`); + expect(document.body).toHaveStyle(`background-color: rgb(255, 255, 255)`); }); test('navigation works correctly', async () => { @@ -110,9 +108,9 @@ describe('DashboardLayout', () => { const user = userEvent.setup(); render( - + Hello world - , + , ); const navigation = screen.getByRole('navigation'); diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx index caf46d44af1..24fb23ba988 100644 --- a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx +++ b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx @@ -19,6 +19,7 @@ import Stack from '@mui/material/Stack'; import Toolbar from '@mui/material/Toolbar'; import Tooltip from '@mui/material/Tooltip'; import Typography from '@mui/material/Typography'; +import type {} from '@mui/material/themeCssVarsAugmentation'; import DarkModeIcon from '@mui/icons-material/DarkMode'; import LightModeIcon from '@mui/icons-material/LightMode'; import ExpandLessIcon from '@mui/icons-material/ExpandLess'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4d3996281f0..3e81a2c6601 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -101,7 +101,7 @@ importers: version: https://codeload.github.com/mui/material-ui/tar.gz/987bb036905fdd4474ae5aaee7b2b5a3dc6b9315(@opentelemetry/api@1.9.0)(encoding@0.1.13) '@mui/x-charts': specifier: 7.9.0 - version: 7.9.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 7.9.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@next/eslint-plugin-next': specifier: 14.2.4 version: 14.2.4 @@ -290,10 +290,10 @@ importers: version: 5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/docs': specifier: 6.0.0-dev.240424162023-9968b4889d - version: 6.0.0-dev.240424162023-9968b4889d(vkeimf6pnn6fit3u6ic45qxiyi) + version: 6.0.0-dev.240424162023-9968b4889d(pl7whyh3mbceuupe6uvfazuglq) '@mui/icons-material': specifier: next - version: 6.0.0-beta.0(@mui/material@6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + version: 6.0.0-beta.2(@mui/material@6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/internal-markdown': specifier: ^1.0.1 version: 1.0.7 @@ -302,25 +302,25 @@ importers: version: 5.0.0-beta.46(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/lab': specifier: next - version: 6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': specifier: next - version: 6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material-nextjs': specifier: next - version: 6.0.0-alpha.13(@emotion/cache@11.11.0)(@emotion/server@11.11.0)(@mui/material@6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) + version: 6.0.0-alpha.14(@emotion/cache@11.11.0)(@emotion/server@11.11.0)(@mui/material@6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) '@mui/styles': specifier: next - version: 6.0.0-beta.0(@types/react@18.3.3)(react@18.3.1) + version: 6.0.0-beta.2(@types/react@18.3.3)(react@18.3.1) '@mui/system': specifier: next - version: 6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + version: 6.0.0-beta.1(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/utils': specifier: next - version: 6.0.0-beta.0(@types/react@18.3.3)(react@18.3.1) + version: 6.0.0-beta.1(@types/react@18.3.3)(react@18.3.1) '@mui/x-date-pickers': specifier: 7.9.0 - version: 7.9.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(date-fns-jalali@2.29.3-0)(date-fns@2.30.0)(dayjs@1.11.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 7.9.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(date-fns-jalali@2.29.3-0)(date-fns@2.30.0)(dayjs@1.11.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/x-license': specifier: 7.9.0 version: 7.9.0(@types/react@18.3.3)(react@18.3.1) @@ -2055,8 +2055,8 @@ packages: resolution: {integrity: sha512-+Lf6xofiPZLtFwNkpjGHPgJck4b22Yo8h9+WHf3bEbS4ikOyOMNtJk6HSTolEQ2irH1XSoeguaCkrkcgyThrMA==} engines: {node: '>=6.9.0'} - '@babel/runtime@7.24.7': - resolution: {integrity: sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==} + '@babel/runtime@7.24.8': + resolution: {integrity: sha512-5F7SDGs1T72ZczbRwbGO9lQi0NLjQxzl6i4lJxLxfW9U5UluCSyEJeniWvnhl3/euNiqQVbo8zruhsDfid0esA==} engines: {node: '>=6.9.0'} '@babel/template@7.24.7': @@ -2601,8 +2601,8 @@ packages: '@types/react': optional: true - '@mui/base@5.0.0-beta.53': - resolution: {integrity: sha512-WeLTX9zMQPxZ7w9oitDjxOZeQYDVx8JC/I81NUTdboyI7zp+K0ktpJ79gciruKf5Z9qD01+DfwzEisY05mk3QQ==} + '@mui/base@5.0.0-beta.54': + resolution: {integrity: sha512-Yy5Ej0jvZgSxqlyMOw9sO2TBBYAH/fXv7zFC3VNcPlzkceZ4xhQCvVQYpkdrjSuACD/UvRN468zSY679+x9Fpw==} engines: {node: '>=12.0.0'} peerDependencies: '@types/react': ^17.0.0 || ^18.0.0 @@ -2644,11 +2644,11 @@ packages: '@types/react': optional: true - '@mui/icons-material@6.0.0-beta.0': - resolution: {integrity: sha512-eKwh48zOVnfuT5dIifDkPrwiaotHTd/vIvFAxIA7rzQSTRlJLIByUCu5PYdmMS0pbtko7kIER8DLe5nqAXnZHw==} + '@mui/icons-material@6.0.0-beta.2': + resolution: {integrity: sha512-TPY6Tnpc9Va71pRSwPvkuLZUW7n5J7ue5IH6A9juxBLcTN5Vo1AKPmx2cf7BMDGVJPkjtIzLqwmIHvGQQuvNQw==} engines: {node: '>=12.0.0'} peerDependencies: - '@mui/material': 6.0.0-beta.0 + '@mui/material': 6.0.0-beta.2 '@types/react': ^17.0.0 || ^18.0.0 react: ^17.0.0 || ^18.0.0 peerDependenciesMeta: @@ -2699,14 +2699,14 @@ packages: '@types/react': optional: true - '@mui/lab@6.0.0-beta.0': - resolution: {integrity: sha512-WI3EEMFYfFyHox1QdkzOBACKu4DfUNX40klpeHlkbfaJjytdlmc4ZDoJI/aKUjDu/UsG6RulexiMnmomPNunCw==} + '@mui/lab@6.0.0-beta.2': + resolution: {integrity: sha512-A6vdvnoN5u3VEIFz6KV0fcw/ulpSdgMxYuqXZNaEYWESn/uXQJA0/zY/W2FcsJfKhcgNEFW3uHi3tg3WccDwPg==} engines: {node: '>=12.0.0'} peerDependencies: '@emotion/react': ^11.5.0 '@emotion/styled': ^11.3.0 - '@mui/material': ^6.0.0-beta.0 - '@mui/material-pigment-css': ^6.0.0-alpha.13 + '@mui/material': ^6.0.0-beta.2 + '@mui/material-pigment-css': ^6.0.0-beta.1 '@types/react': ^17.0.0 || ^18.0.0 react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 @@ -2738,13 +2738,13 @@ packages: '@types/react': optional: true - '@mui/material-nextjs@6.0.0-alpha.13': - resolution: {integrity: sha512-cc6sODC1PbvdvjynWn8qfaMmv/Tu5Jvmipjb8WG3UkXl9+yg9JuKeR8VdFXr18yvXKgAN2DTiWocy7bqVyoZEQ==} + '@mui/material-nextjs@6.0.0-alpha.14': + resolution: {integrity: sha512-Ie8YwRmGGwsL9mEzYR3U7BAqYjaC52BVhtOYoVIISj8RhfGI44O3qUyUzKHi3GHhyXjGM7Ozi735qm0oVfyvNQ==} engines: {node: '>=12.0.0'} peerDependencies: '@emotion/cache': ^11.11.0 '@emotion/server': ^11.11.0 - '@mui/material': 6.0.0-alpha.13 + '@mui/material': 6.0.0-beta.1 '@types/react': ^17.0.0 || ^18.0.0 next: ^13.0.0 || ^14.0.0 react: ^17.0.0 || ^18.0.0 @@ -2773,13 +2773,13 @@ packages: '@types/react': optional: true - '@mui/material@6.0.0-beta.0': - resolution: {integrity: sha512-nWsg+GPaYRFCJ4fcMT1jSklwZRYE9nceM8zsrT/i8M+pMhQNVoPh8cFlUXIiwdEhs1pfQVVtSyqMBHwHZ3Pjgg==} + '@mui/material@6.0.0-beta.2': + resolution: {integrity: sha512-2LJ+o8VY1sV7ntld1xv9jjp+kRkogPfNw+7h/OuZs546N4L7ewwVVl6RwZiXc2d9adulTCevvDOKXOZp+XexGg==} engines: {node: '>=12.0.0'} peerDependencies: '@emotion/react': ^11.5.0 '@emotion/styled': ^11.3.0 - '@mui/material-pigment-css': ^6.0.0-alpha.13 + '@mui/material-pigment-css': ^6.0.0-beta.1 '@types/react': ^17.0.0 || ^18.0.0 react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 @@ -2818,8 +2818,8 @@ packages: '@types/react': optional: true - '@mui/private-theming@6.0.0-beta.0': - resolution: {integrity: sha512-zBWo9vzsR+GMU6+rMJRJglUV4doghMk9sprfFcsKXlAEKil4EIPSoLJIQAjH4nYlPqqenkiR1YISUUltIsdfdw==} + '@mui/private-theming@6.0.0-beta.1': + resolution: {integrity: sha512-IY4JMVmNuxeXm7yvKsMt+F+cejM0FjD1VTykjTQaYQA//JXpyphQK+oj8ML/n2NJUDkoE4O+aqW0nm/sBjyEQw==} engines: {node: '>=12.0.0'} peerDependencies: '@types/react': ^17.0.0 || ^18.0.0 @@ -2854,8 +2854,8 @@ packages: '@emotion/styled': optional: true - '@mui/styled-engine@6.0.0-beta.0': - resolution: {integrity: sha512-IehSACg1jxxbrunNbWCMr5Av+dWTrogT4afao5+idhZ6lydbxyIeeta8Gq6ZaF4jLqfwLKRKCy8XMRJ7XifD2A==} + '@mui/styled-engine@6.0.0-beta.1': + resolution: {integrity: sha512-Q2Hrt0BRJ6kSq0BYjIZHwHoEwmIZAyxBf15k6Vt0kkrqMGPKqDZxpg/miO0Mh/gkfXL/C0NfUO9XYti5DOVEsA==} engines: {node: '>=12.0.0'} peerDependencies: '@emotion/react': ^11.4.1 @@ -2867,8 +2867,8 @@ packages: '@emotion/styled': optional: true - '@mui/styles@6.0.0-beta.0': - resolution: {integrity: sha512-hiWgf0aTwp0FSS2jcbVoPQHk6WeweioCLh9qWGBf53tuCPcOt8r7d6l+OGnQdWcs7kEAGdfuKAD6a5MFdMFDiA==} + '@mui/styles@6.0.0-beta.2': + resolution: {integrity: sha512-1QxqwaPVTvkUqZ5jW9COZNdyJlWtfLcCpNGKANIRsZvLoTVHrc0QwZO6aAgJl94oSHF89jv8NZx3wTqb8wQYvA==} engines: {node: '>=12.0.0'} peerDependencies: '@types/react': ^17.0.0 || ^18.0.0 @@ -2909,8 +2909,8 @@ packages: '@types/react': optional: true - '@mui/system@6.0.0-beta.0': - resolution: {integrity: sha512-QoQ6Mz/iJ9/CVLqmKZYPOk2DzGu1Qm5lk3vp/2CbVM84BdeQkEv+l/GLpF7Ck+G+9ku7YTWeQpi/B7OoMkqHVQ==} + '@mui/system@6.0.0-beta.1': + resolution: {integrity: sha512-gqp++9yZ91gXt9b8BrI8LelrnLnIcYWR0pxVSR+3OXwepOC17gONO3w5KOCpJcR8f0irmIccNg3a5LeaLWt1KA==} engines: {node: '>=12.0.0'} peerDependencies: '@emotion/react': ^11.5.0 @@ -2953,8 +2953,8 @@ packages: '@types/react': optional: true - '@mui/utils@6.0.0-beta.0': - resolution: {integrity: sha512-Slu5BBN7laJI5hZSQsksNz5DGJrftaDxuJx902Utu+W6Y8mv4dawc1lpYH13PXJHdO3Jw0JjQZwmYYTqMEqN5Q==} + '@mui/utils@6.0.0-beta.1': + resolution: {integrity: sha512-NpvigKbCf90GaDb57Pmiuc0SmctyKpvABxFJa0d6Clri3tW5KYoZaVUZrWtqvuLkQEl9LvrLC/rhwX8NkbCzkg==} engines: {node: '>=12.0.0'} peerDependencies: '@types/react': ^17.0.0 || ^18.0.0 @@ -11085,7 +11085,7 @@ snapshots: core-js: 2.6.12 regenerator-runtime: 0.14.1 - '@babel/runtime@7.24.7': + '@babel/runtime@7.24.8': dependencies: regenerator-runtime: 0.14.1 @@ -11160,7 +11160,7 @@ snapshots: '@emotion/babel-plugin@11.11.0': dependencies: '@babel/helper-module-imports': 7.24.7 - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@emotion/hash': 0.9.1 '@emotion/memoize': 0.8.1 '@emotion/serialize': 1.1.4 @@ -11191,7 +11191,7 @@ snapshots: '@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@emotion/babel-plugin': 11.11.0 '@emotion/cache': 11.11.0 '@emotion/serialize': 1.1.4 @@ -11224,7 +11224,7 @@ snapshots: '@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@emotion/babel-plugin': 11.11.0 '@emotion/is-prop-valid': 1.2.2 '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1) @@ -11664,7 +11664,7 @@ snapshots: '@mui/base@5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@floating-ui/react-dom': 2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/types': 7.2.14(@types/react@18.3.3) '@mui/utils': 5.16.0(@types/react@18.3.3)(react@18.3.1) @@ -11678,7 +11678,7 @@ snapshots: '@mui/base@5.0.0-beta.51(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@floating-ui/react-dom': 2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/types': 7.2.14(@types/react@18.3.3) '@mui/utils': 6.0.0-alpha.13(@types/react@18.3.3)(react@18.3.1) @@ -11690,12 +11690,12 @@ snapshots: optionalDependencies: '@types/react': 18.3.3 - '@mui/base@5.0.0-beta.53(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mui/base@5.0.0-beta.54(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@floating-ui/react-dom': 2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/types': 7.2.14(@types/react@18.3.3) - '@mui/utils': 6.0.0-beta.0(@types/react@18.3.3)(react@18.3.1) + '@mui/utils': 6.0.0-beta.1(@types/react@18.3.3)(react@18.3.1) '@popperjs/core': 2.11.8 clsx: 2.1.1 prop-types: 15.8.1 @@ -11708,14 +11708,14 @@ snapshots: '@mui/core-downloads-tracker@6.0.0-dev.240424162023-9968b4889d': {} - '@mui/docs@6.0.0-dev.240424162023-9968b4889d(vkeimf6pnn6fit3u6ic45qxiyi)': + '@mui/docs@6.0.0-dev.240424162023-9968b4889d(pl7whyh3mbceuupe6uvfazuglq)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@mui/base': 5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/icons-material': 6.0.0-beta.0(@mui/material@6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + '@mui/icons-material': 6.0.0-beta.2(@mui/material@6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/internal-markdown': 1.0.7 - '@mui/material': 6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/system': 6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + '@mui/material': 6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/system': 6.0.0-beta.1(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) clipboard-copy: 4.0.1 clsx: 2.1.1 next: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -11727,16 +11727,16 @@ snapshots: '@mui/icons-material@5.16.0(@mui/material@5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@mui/material': 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 optionalDependencies: '@types/react': 18.3.3 - '@mui/icons-material@6.0.0-beta.0(@mui/material@6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)': + '@mui/icons-material@6.0.0-beta.2(@mui/material@6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 - '@mui/material': 6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@babel/runtime': 7.24.8 + '@mui/material': 6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 optionalDependencies: '@types/react': 18.3.3 @@ -11748,7 +11748,7 @@ snapshots: '@mui/internal-markdown@1.0.7': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 lodash: 4.17.21 marked: 13.0.1 prismjs: 1.29.0 @@ -11770,7 +11770,7 @@ snapshots: '@mui/joy@5.0.0-beta.46(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@mui/base': 5.0.0-beta.51(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/core-downloads-tracker': 6.0.0-dev.240424162023-9968b4889d '@mui/system': 6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) @@ -11787,7 +11787,7 @@ snapshots: '@mui/lab@5.0.0-alpha.171(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@mui/base': 5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/system': 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) @@ -11802,14 +11802,14 @@ snapshots: '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@types/react': 18.3.3 - '@mui/lab@6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mui/lab@6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 - '@mui/base': 5.0.0-beta.53(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/material': 6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/system': 6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + '@babel/runtime': 7.24.8 + '@mui/base': 5.0.0-beta.54(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/material': 6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/system': 6.0.0-beta.1(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/types': 7.2.14(@types/react@18.3.3) - '@mui/utils': 6.0.0-beta.0(@types/react@18.3.3)(react@18.3.1) + '@mui/utils': 6.0.0-beta.1(@types/react@18.3.3)(react@18.3.1) clsx: 2.1.1 prop-types: 15.8.1 react: 18.3.1 @@ -11821,7 +11821,7 @@ snapshots: '@mui/material-nextjs@5.15.11(@emotion/cache@11.11.0)(@emotion/server@11.11.0)(@mui/material@5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@mui/material': 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) next: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 @@ -11830,10 +11830,10 @@ snapshots: '@emotion/server': 11.11.0 '@types/react': 18.3.3 - '@mui/material-nextjs@6.0.0-alpha.13(@emotion/cache@11.11.0)(@emotion/server@11.11.0)(@mui/material@6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': + '@mui/material-nextjs@6.0.0-alpha.14(@emotion/cache@11.11.0)(@emotion/server@11.11.0)(@mui/material@6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 - '@mui/material': 6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@babel/runtime': 7.24.8 + '@mui/material': 6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) next: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 optionalDependencies: @@ -11843,7 +11843,7 @@ snapshots: '@mui/material@5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@mui/base': 5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/core-downloads-tracker': 5.16.0 '@mui/system': 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) @@ -11862,14 +11862,14 @@ snapshots: '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@types/react': 18.3.3 - '@mui/material@6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mui/material@6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 - '@mui/base': 5.0.0-beta.53(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@babel/runtime': 7.24.8 '@mui/core-downloads-tracker': 6.0.0-dev.240424162023-9968b4889d - '@mui/system': 6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + '@mui/system': 6.0.0-beta.1(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/types': 7.2.14(@types/react@18.3.3) - '@mui/utils': 6.0.0-beta.0(@types/react@18.3.3)(react@18.3.1) + '@mui/utils': 6.0.0-beta.1(@types/react@18.3.3)(react@18.3.1) + '@popperjs/core': 2.11.8 '@types/react-transition-group': 4.4.10 clsx: 2.1.1 csstype: 3.1.3 @@ -11900,7 +11900,7 @@ snapshots: '@mui/private-theming@5.16.0(@types/react@18.3.3)(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@mui/utils': 5.16.0(@types/react@18.3.3)(react@18.3.1) prop-types: 15.8.1 react: 18.3.1 @@ -11909,17 +11909,17 @@ snapshots: '@mui/private-theming@6.0.0-alpha.13(@types/react@18.3.3)(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@mui/utils': 6.0.0-alpha.13(@types/react@18.3.3)(react@18.3.1) prop-types: 15.8.1 react: 18.3.1 optionalDependencies: '@types/react': 18.3.3 - '@mui/private-theming@6.0.0-beta.0(@types/react@18.3.3)(react@18.3.1)': + '@mui/private-theming@6.0.0-beta.1(@types/react@18.3.3)(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 - '@mui/utils': 6.0.0-beta.0(@types/react@18.3.3)(react@18.3.1) + '@babel/runtime': 7.24.8 + '@mui/utils': 6.0.0-beta.1(@types/react@18.3.3)(react@18.3.1) prop-types: 15.8.1 react: 18.3.1 optionalDependencies: @@ -11927,7 +11927,7 @@ snapshots: '@mui/styled-engine@5.15.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@emotion/cache': 11.11.0 csstype: 3.1.3 prop-types: 15.8.1 @@ -11938,7 +11938,7 @@ snapshots: '@mui/styled-engine@6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@emotion/cache': 11.11.0 csstype: 3.1.3 prop-types: 15.8.1 @@ -11947,9 +11947,9 @@ snapshots: '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1) '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) - '@mui/styled-engine@6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)': + '@mui/styled-engine@6.0.0-beta.1(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@emotion/cache': 11.11.0 csstype: 3.1.3 prop-types: 15.8.1 @@ -11958,13 +11958,13 @@ snapshots: '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1) '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) - '@mui/styles@6.0.0-beta.0(@types/react@18.3.3)(react@18.3.1)': + '@mui/styles@6.0.0-beta.2(@types/react@18.3.3)(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@emotion/hash': 0.9.1 - '@mui/private-theming': 6.0.0-beta.0(@types/react@18.3.3)(react@18.3.1) + '@mui/private-theming': 6.0.0-beta.1(@types/react@18.3.3)(react@18.3.1) '@mui/types': 7.2.14(@types/react@18.3.3) - '@mui/utils': 6.0.0-beta.0(@types/react@18.3.3)(react@18.3.1) + '@mui/utils': 6.0.0-beta.1(@types/react@18.3.3)(react@18.3.1) clsx: 2.1.1 csstype: 3.1.3 hoist-non-react-statics: 3.3.2 @@ -11983,7 +11983,7 @@ snapshots: '@mui/system@5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@mui/private-theming': 5.16.0(@types/react@18.3.3)(react@18.3.1) '@mui/styled-engine': 5.15.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1) '@mui/types': 7.2.14(@types/react@18.3.3) @@ -11999,7 +11999,7 @@ snapshots: '@mui/system@6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@mui/private-theming': 6.0.0-alpha.13(@types/react@18.3.3)(react@18.3.1) '@mui/styled-engine': 6.0.0-alpha.13(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1) '@mui/types': 7.2.14(@types/react@18.3.3) @@ -12013,13 +12013,13 @@ snapshots: '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@types/react': 18.3.3 - '@mui/system@6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)': + '@mui/system@6.0.0-beta.1(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 - '@mui/private-theming': 6.0.0-beta.0(@types/react@18.3.3)(react@18.3.1) - '@mui/styled-engine': 6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1) + '@babel/runtime': 7.24.8 + '@mui/private-theming': 6.0.0-beta.1(@types/react@18.3.3)(react@18.3.1) + '@mui/styled-engine': 6.0.0-beta.1(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1) '@mui/types': 7.2.14(@types/react@18.3.3) - '@mui/utils': 6.0.0-beta.0(@types/react@18.3.3)(react@18.3.1) + '@mui/utils': 6.0.0-beta.1(@types/react@18.3.3)(react@18.3.1) clsx: 2.1.1 csstype: 3.1.3 prop-types: 15.8.1 @@ -12035,7 +12035,7 @@ snapshots: '@mui/utils@5.16.0(@types/react@18.3.3)(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@types/prop-types': 15.7.12 prop-types: 15.8.1 react: 18.3.1 @@ -12045,7 +12045,7 @@ snapshots: '@mui/utils@6.0.0-alpha.13(@types/react@18.3.3)(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@types/prop-types': 15.7.12 prop-types: 15.8.1 react: 18.3.1 @@ -12053,10 +12053,11 @@ snapshots: optionalDependencies: '@types/react': 18.3.3 - '@mui/utils@6.0.0-beta.0(@types/react@18.3.3)(react@18.3.1)': + '@mui/utils@6.0.0-beta.1(@types/react@18.3.3)(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@types/prop-types': 15.7.12 + clsx: 2.1.1 prop-types: 15.8.1 react: 18.3.1 react-is: 18.3.1 @@ -12065,7 +12066,7 @@ snapshots: '@mui/x-charts@7.9.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@mui/base': 5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/system': 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) @@ -12087,11 +12088,11 @@ snapshots: transitivePeerDependencies: - '@types/react' - '@mui/x-charts@7.9.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mui/x-charts@7.9.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@mui/base': 5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/material': 6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/material': 6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/system': 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/utils': 5.16.0(@types/react@18.3.3)(react@18.3.1) '@react-spring/rafz': 9.7.3 @@ -12113,7 +12114,7 @@ snapshots: '@mui/x-data-grid-premium@7.9.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@mui/material': 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/system': 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/utils': 5.16.0(@types/react@18.3.3)(react@18.3.1) @@ -12135,7 +12136,7 @@ snapshots: '@mui/x-data-grid-pro@7.9.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@mui/material': 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/system': 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/utils': 5.16.0(@types/react@18.3.3)(react@18.3.1) @@ -12155,7 +12156,7 @@ snapshots: '@mui/x-data-grid@7.9.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@mui/material': 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/system': 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/utils': 5.16.0(@types/react@18.3.3)(react@18.3.1) @@ -12172,7 +12173,7 @@ snapshots: '@mui/x-date-pickers-pro@7.9.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(date-fns@2.30.0)(dayjs@1.11.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@mui/base': 5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/system': 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) @@ -12194,7 +12195,7 @@ snapshots: '@mui/x-date-pickers@7.9.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(date-fns@2.30.0)(dayjs@1.11.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@mui/base': 5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/system': 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) @@ -12213,11 +12214,11 @@ snapshots: transitivePeerDependencies: - '@types/react' - '@mui/x-date-pickers@7.9.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(date-fns-jalali@2.29.3-0)(date-fns@2.30.0)(dayjs@1.11.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mui/x-date-pickers@7.9.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(date-fns-jalali@2.29.3-0)(date-fns@2.30.0)(dayjs@1.11.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@mui/base': 5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/material': 6.0.0-beta.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/material': 6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/system': 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/utils': 5.16.0(@types/react@18.3.3)(react@18.3.1) '@types/react-transition-group': 4.4.10 @@ -12237,7 +12238,7 @@ snapshots: '@mui/x-internals@7.9.0(@types/react@18.3.3)(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@mui/utils': 5.16.0(@types/react@18.3.3)(react@18.3.1) react: 18.3.1 transitivePeerDependencies: @@ -12245,7 +12246,7 @@ snapshots: '@mui/x-license@7.9.0(@types/react@18.3.3)(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@mui/utils': 5.16.0(@types/react@18.3.3)(react@18.3.1) react: 18.3.1 transitivePeerDependencies: @@ -12253,7 +12254,7 @@ snapshots: '@mui/x-tree-view@7.9.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1) '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/base': 5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -13064,7 +13065,7 @@ snapshots: '@testing-library/dom@10.2.0': dependencies: '@babel/code-frame': 7.24.7 - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@types/aria-query': 5.0.4 aria-query: 5.3.0 chalk: 4.1.2 @@ -13075,7 +13076,7 @@ snapshots: '@testing-library/jest-dom@6.4.6(vitest@2.0.0-beta.13(@types/node@20.14.10)(@vitest/browser@2.0.0-beta.13)(jsdom@24.1.0)(terser@5.31.1))': dependencies: '@adobe/css-tools': 4.4.0 - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 aria-query: 5.3.0 chalk: 3.0.0 css.escape: 1.5.1 @@ -13087,7 +13088,7 @@ snapshots: '@testing-library/react@16.0.0(@testing-library/dom@10.2.0)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@testing-library/dom': 10.2.0 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) @@ -14184,7 +14185,7 @@ snapshots: babel-plugin-macros@3.1.0: dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 cosmiconfig: 7.1.0 resolve: 1.22.8 @@ -14231,7 +14232,7 @@ snapshots: babel-plugin-preval@5.1.0: dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@types/babel__core': 7.20.5 babel-plugin-macros: 3.1.0 require-from-string: 2.0.2 @@ -14842,7 +14843,7 @@ snapshots: css-vendor@2.0.8: dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 is-in-browser: 1.1.3 css.escape@1.5.1: {} @@ -14930,7 +14931,7 @@ snapshots: date-fns@2.30.0: dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 dateformat@3.0.3: {} @@ -15066,7 +15067,7 @@ snapshots: dom-helpers@5.2.1: dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 csstype: 3.1.3 dot-prop@5.3.0: @@ -16930,40 +16931,40 @@ snapshots: jss-plugin-camel-case@10.10.0: dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 hyphenate-style-name: 1.1.0 jss: 10.10.0 jss-plugin-default-unit@10.10.0: dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 jss: 10.10.0 jss-plugin-global@10.10.0: dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 jss: 10.10.0 jss-plugin-nested@10.10.0: dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 jss: 10.10.0 tiny-warning: 1.0.3 jss-plugin-props-sort@10.10.0: dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 jss: 10.10.0 jss-plugin-rule-value-function@10.10.0: dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 jss: 10.10.0 tiny-warning: 1.0.3 jss-plugin-vendor-prefixer@10.10.0: dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 css-vendor: 2.0.8 jss: 10.10.0 @@ -16974,7 +16975,7 @@ snapshots: jss@10.10.0: dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 csstype: 3.1.3 is-in-browser: 1.1.3 tiny-warning: 1.0.3 @@ -18612,7 +18613,7 @@ snapshots: dependencies: '@babel/core': 7.24.7 '@babel/generator': 7.24.7 - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 ast-types: 0.14.2 commander: 2.20.3 doctrine: 3.0.0 @@ -18646,7 +18647,7 @@ snapshots: react-error-boundary@4.0.13(react@18.3.1): dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 react: 18.3.1 react-error-overlay@6.0.11: {} @@ -18709,7 +18710,7 @@ snapshots: react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 dom-helpers: 5.2.1 loose-envify: 1.4.0 prop-types: 15.8.1 @@ -18853,7 +18854,7 @@ snapshots: regenerator-transform@0.15.2: dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 regexp.prototype.flags@1.5.2: dependencies: @@ -19004,7 +19005,7 @@ snapshots: rtl-css-js@1.16.1: dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 run-async@2.4.1: {} From ab10cf4216956e6e04d41b168bbd7e9429629904 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Fri, 19 Jul 2024 00:02:37 +0100 Subject: [PATCH 34/42] Fix headless test with CSS variables --- .../src/DashboardLayout/DashboardLayout.test.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.test.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.test.tsx index f6c407f5766..e807b2474e4 100644 --- a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.test.tsx +++ b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.test.tsx @@ -48,19 +48,24 @@ describe('DashboardLayout', () => { , ); + const getBackgroundColorCSSVariable = () => + getComputedStyle(document.documentElement).getPropertyValue( + '--mui-palette-common-background', + ); + const header = screen.getByRole('banner'); const themeSwitcherButton = within(header).getByLabelText('Switch to dark mode'); - expect(document.body).toHaveStyle(`background-color: rgb(255, 255, 255)`); + expect(getBackgroundColorCSSVariable()).toBe('#fff'); await user.click(themeSwitcherButton); - expect(document.body).toHaveStyle(`background-color: rgb(18, 18, 18)`); + expect(getBackgroundColorCSSVariable()).toBe('#000'); await user.click(themeSwitcherButton); - expect(document.body).toHaveStyle(`background-color: rgb(255, 255, 255)`); + expect(getBackgroundColorCSSVariable()).toBe('#fff'); }); test('navigation works correctly', async () => { From 6fe1368fb950de36a752f0fe59baa26b7281d45f Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Fri, 19 Jul 2024 12:13:14 +0100 Subject: [PATCH 35/42] Update Toolpad Core to V6, update accordingly --- .../app-provider/AppProviderTheme.js | 18 +++---- .../app-provider/AppProviderTheme.tsx | 18 +++---- examples/core-tutorial/package.json | 4 +- examples/core-tutorial/theme.ts | 3 +- .../create-toolpad-app/src/generateProject.ts | 7 ++- packages/toolpad-core/package.json | 8 ++-- .../src/AppProvider/AppProvider.tsx | 2 +- .../src/DashboardLayout/DashboardLayout.tsx | 1 - pnpm-lock.yaml | 48 ++++++++++++++++--- 9 files changed, 72 insertions(+), 37 deletions(-) diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js index 25d61a5872c..4ba151ba7cb 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js +++ b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js @@ -2,7 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; -import { createTheme } from '@mui/material/styles'; +import { extendTheme } from '@mui/material/styles'; import DashboardIcon from '@mui/icons-material/Dashboard'; import TimelineIcon from '@mui/icons-material/Timeline'; import { AppProvider } from '@toolpad/core/AppProvider'; @@ -25,13 +25,15 @@ const NAVIGATION = [ }, ]; -// TODO: Use CSS vars theme once Toolpad Core uses Material UI v6 -const customTheme = createTheme({ - palette: { - mode: 'dark', - background: { - default: '#2A4364', - paper: '#112E4D', +const customTheme = extendTheme({ + colorSchemes: { + dark: { + palette: { + background: { + default: '#2A4364', + paper: '#112E4D', + }, + }, }, }, }); diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx index aa2dd22dcdc..a4750994528 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx +++ b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; -import { createTheme } from '@mui/material/styles'; +import { extendTheme } from '@mui/material/styles'; import DashboardIcon from '@mui/icons-material/Dashboard'; import TimelineIcon from '@mui/icons-material/Timeline'; import { AppProvider } from '@toolpad/core/AppProvider'; @@ -25,13 +25,15 @@ const NAVIGATION: Navigation = [ }, ]; -// TODO: Use CSS vars theme once Toolpad Core uses Material UI v6 -const customTheme = createTheme({ - palette: { - mode: 'dark', - background: { - default: '#2A4364', - paper: '#112E4D', +const customTheme = extendTheme({ + colorSchemes: { + dark: { + palette: { + background: { + default: '#2A4364', + paper: '#112E4D', + }, + }, }, }, }); diff --git a/examples/core-tutorial/package.json b/examples/core-tutorial/package.json index 4bc46204142..41f9fca3715 100644 --- a/examples/core-tutorial/package.json +++ b/examples/core-tutorial/package.json @@ -12,8 +12,8 @@ "react-dom": "^18.3.1", "next": "^14.2.4", "@toolpad/core": "latest", - "@mui/material": "^5.15.21", - "@mui/icons-material": "^5.15.21", + "@mui/material": "^6.0.0-beta.2", + "@mui/icons-material": "^6.0.0-beta.2", "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", "@emotion/cache": "^11.11.0" diff --git a/examples/core-tutorial/theme.ts b/examples/core-tutorial/theme.ts index 69cde85bfa5..af2e0532d3a 100644 --- a/examples/core-tutorial/theme.ts +++ b/examples/core-tutorial/theme.ts @@ -1,6 +1,5 @@ 'use client'; -import { experimental_extendTheme as extendTheme } from '@mui/material/styles'; -import type {} from '@mui/material/themeCssVarsAugmentation'; +import { extendTheme } from '@mui/material/styles'; const theme = extendTheme({ colorSchemes: { diff --git a/packages/create-toolpad-app/src/generateProject.ts b/packages/create-toolpad-app/src/generateProject.ts index 34f3d6e75a9..567cd4affb3 100644 --- a/packages/create-toolpad-app/src/generateProject.ts +++ b/packages/create-toolpad-app/src/generateProject.ts @@ -103,8 +103,7 @@ export default function generateProject( const themeContent = ` "use client"; - import { experimental_extendTheme as extendTheme } from '@mui/material/styles'; - import type {} from '@mui/material/themeCssVarsAugmentation'; + import { extendTheme } from '@mui/material/styles'; const theme = extendTheme({ colorSchemes: { @@ -194,9 +193,9 @@ export default function generateProject( 'react-dom': '^18', next: '^14', '@toolpad/core': 'latest', - '@mui/material': '^5', + '@mui/material': '^6', '@mui/material-nextjs': '^5', - '@mui/icons-material': '^5', + '@mui/icons-material': '^6', '@emotion/react': '^11', '@emotion/styled': '^11', '@emotion/cache': '^11', diff --git a/packages/toolpad-core/package.json b/packages/toolpad-core/package.json index 9545bacf290..ce50d0a9b1a 100644 --- a/packages/toolpad-core/package.json +++ b/packages/toolpad-core/package.json @@ -63,8 +63,8 @@ "prop-types": "15.8.1" }, "devDependencies": { - "@mui/icons-material": "5.16.0", - "@mui/material": "5.16.0", + "@mui/icons-material": "v6.0.0-beta.2", + "@mui/material": "v6.0.0-beta.2", "@types/invariant": "2.2.37", "@types/prop-types": "15.7.12", "@types/react": "18.3.3", @@ -78,8 +78,8 @@ "vitest": "beta" }, "peerDependencies": { - "@mui/icons-material": "^5", - "@mui/material": "^5", + "@mui/icons-material": "^6", + "@mui/material": "^6", "next": "^14", "react": "^18" }, diff --git a/packages/toolpad-core/src/AppProvider/AppProvider.tsx b/packages/toolpad-core/src/AppProvider/AppProvider.tsx index 7158196d14a..4492e72850f 100644 --- a/packages/toolpad-core/src/AppProvider/AppProvider.tsx +++ b/packages/toolpad-core/src/AppProvider/AppProvider.tsx @@ -1,7 +1,7 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import { experimental_extendTheme as extendTheme, CssVarsTheme, Theme } from '@mui/material/styles'; +import { extendTheme, CssVarsTheme, Theme } from '@mui/material/styles'; import { NotificationsProvider } from '../useNotifications'; import { DialogsProvider } from '../useDialogs'; import { BrandingContext, NavigationContext, RouterContext } from '../shared/context'; diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx index 24fb23ba988..caf46d44af1 100644 --- a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx +++ b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx @@ -19,7 +19,6 @@ import Stack from '@mui/material/Stack'; import Toolbar from '@mui/material/Toolbar'; import Tooltip from '@mui/material/Tooltip'; import Typography from '@mui/material/Typography'; -import type {} from '@mui/material/themeCssVarsAugmentation'; import DarkModeIcon from '@mui/icons-material/DarkMode'; import LightModeIcon from '@mui/icons-material/LightMode'; import ExpandLessIcon from '@mui/icons-material/ExpandLess'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3e81a2c6601..ee8b4f903c3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -590,16 +590,16 @@ importers: version: 5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/lab': specifier: 5.0.0-alpha.171 - version: 5.0.0-alpha.171(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 5.0.0-alpha.171(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/utils': specifier: 5.16.0 version: 5.16.0(@types/react@18.3.3)(react@18.3.1) '@mui/x-charts': specifier: 7.9.0 - version: 7.9.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 7.9.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/x-data-grid': specifier: 7.9.0 - version: 7.9.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 7.9.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@tanstack/react-query': specifier: 5.49.0 version: 5.49.0(react@18.3.1) @@ -620,11 +620,11 @@ importers: version: 18.3.1 devDependencies: '@mui/icons-material': - specifier: 5.16.0 - version: 5.16.0(@mui/material@5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + specifier: v6.0.0-beta.2 + version: 6.0.0-beta.2(@mui/material@6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@mui/material': - specifier: 5.16.0 - version: 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: v6.0.0-beta.2 + version: 6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@types/invariant': specifier: 2.2.37 version: 2.2.37 @@ -11802,6 +11802,23 @@ snapshots: '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@types/react': 18.3.3 + '@mui/lab@5.0.0-alpha.171(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.24.8 + '@mui/base': 5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/material': 6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/system': 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + '@mui/types': 7.2.14(@types/react@18.3.3) + '@mui/utils': 5.16.0(@types/react@18.3.3)(react@18.3.1) + clsx: 2.1.1 + prop-types: 15.8.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1) + '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + '@types/react': 18.3.3 + '@mui/lab@6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.8 @@ -12171,6 +12188,23 @@ snapshots: - '@emotion/styled' - '@types/react' + '@mui/x-data-grid@7.9.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.24.8 + '@mui/material': 6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/system': 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + '@mui/utils': 5.16.0(@types/react@18.3.3)(react@18.3.1) + '@mui/x-internals': 7.9.0(@types/react@18.3.3)(react@18.3.1) + clsx: 2.1.1 + prop-types: 15.8.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + reselect: 4.1.8 + transitivePeerDependencies: + - '@emotion/react' + - '@emotion/styled' + - '@types/react' + '@mui/x-date-pickers-pro@7.9.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(date-fns@2.30.0)(dayjs@1.11.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.8 From f4aa0a33ad653e5a3ad07881b015a52c08f0ec0d Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Fri, 19 Jul 2024 12:15:32 +0100 Subject: [PATCH 36/42] Fix example --- .../core/components/app-provider/AppProviderTheme.js | 8 ++++++++ .../core/components/app-provider/AppProviderTheme.tsx | 8 ++++++++ 2 files changed, 16 insertions(+) diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js index 4ba151ba7cb..6eea396cf0d 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js +++ b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js @@ -27,6 +27,14 @@ const NAVIGATION = [ const customTheme = extendTheme({ colorSchemes: { + light: { + palette: { + background: { + default: '#E2FAFF', + paper: '#D9FAFF', + }, + }, + }, dark: { palette: { background: { diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx index a4750994528..ec6ac7500c6 100644 --- a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx +++ b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx @@ -27,6 +27,14 @@ const NAVIGATION: Navigation = [ const customTheme = extendTheme({ colorSchemes: { + light: { + palette: { + background: { + default: '#E2FAFF', + paper: '#D9FAFF', + }, + }, + }, dark: { palette: { background: { From 41a64df4523a554ffe72eb94481f18cc5e5a2364 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Fri, 19 Jul 2024 12:20:45 +0100 Subject: [PATCH 37/42] Re-add types --- examples/core-tutorial/theme.ts | 1 + packages/create-toolpad-app/src/generateProject.ts | 1 + packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx | 1 + 3 files changed, 3 insertions(+) diff --git a/examples/core-tutorial/theme.ts b/examples/core-tutorial/theme.ts index af2e0532d3a..f00bd8d5007 100644 --- a/examples/core-tutorial/theme.ts +++ b/examples/core-tutorial/theme.ts @@ -1,5 +1,6 @@ 'use client'; import { extendTheme } from '@mui/material/styles'; +import type {} from '@mui/material/themeCssVarsAugmentation'; const theme = extendTheme({ colorSchemes: { diff --git a/packages/create-toolpad-app/src/generateProject.ts b/packages/create-toolpad-app/src/generateProject.ts index 567cd4affb3..ab77f3b9a65 100644 --- a/packages/create-toolpad-app/src/generateProject.ts +++ b/packages/create-toolpad-app/src/generateProject.ts @@ -104,6 +104,7 @@ export default function generateProject( const themeContent = ` "use client"; import { extendTheme } from '@mui/material/styles'; + import type {} from '@mui/material/themeCssVarsAugmentation'; const theme = extendTheme({ colorSchemes: { diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx index caf46d44af1..24fb23ba988 100644 --- a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx +++ b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx @@ -19,6 +19,7 @@ import Stack from '@mui/material/Stack'; import Toolbar from '@mui/material/Toolbar'; import Tooltip from '@mui/material/Tooltip'; import Typography from '@mui/material/Typography'; +import type {} from '@mui/material/themeCssVarsAugmentation'; import DarkModeIcon from '@mui/icons-material/DarkMode'; import LightModeIcon from '@mui/icons-material/LightMode'; import ExpandLessIcon from '@mui/icons-material/ExpandLess'; From 297e858dc23ba6724ae3c7fd660becc51a63ac7f Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Fri, 19 Jul 2024 12:41:28 +0100 Subject: [PATCH 38/42] More updates to v6 except AppBar console error --- .../toolpad-core/src/AppProvider/AppThemeProvider.tsx | 11 +++-------- .../src/DashboardLayout/DashboardLayout.tsx | 5 ++++- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx b/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx index f4760d0977e..f8a255578ae 100644 --- a/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx +++ b/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx @@ -1,12 +1,7 @@ import * as React from 'react'; import { PaletteMode, Theme, useMediaQuery } from '@mui/material'; -import { - Experimental_CssVarsProvider as CssVarsProvider, - getInitColorSchemeScript, - ThemeProvider, - useColorScheme, - CssVarsTheme, -} from '@mui/material/styles'; +import { CssVarsProvider, ThemeProvider, useColorScheme, CssVarsTheme } from '@mui/material/styles'; +import InitColorSchemeScript from '@mui/material/InitColorSchemeScript'; import CssBaseline from '@mui/material/CssBaseline'; import useLocalStorageState from '@toolpad/utils/hooks/useLocalStorageState'; import { PaletteModeContext } from '../shared/context'; @@ -153,7 +148,7 @@ function AppThemeProvider(props: AppThemeProviderProps) { return isCSSVarsTheme ? ( - {getInitColorSchemeScript()} + {themeChildren} diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx index 24fb23ba988..18e58e76c35 100644 --- a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx +++ b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx @@ -86,7 +86,10 @@ function ThemeSwitcher() { }, [paletteMode, setPaletteMode]); return isDualTheme ? ( - +
Date: Fri, 19 Jul 2024 12:52:32 +0100 Subject: [PATCH 39/42] Remove DataGrid and LineChart --- .../toolpad-core/src/DataGrid/DataGrid.tsx | 864 ------------------ .../toolpad-core/src/LineChart/LineChart.tsx | 170 ---- 2 files changed, 1034 deletions(-) delete mode 100644 packages/toolpad-core/src/DataGrid/DataGrid.tsx delete mode 100644 packages/toolpad-core/src/LineChart/LineChart.tsx diff --git a/packages/toolpad-core/src/DataGrid/DataGrid.tsx b/packages/toolpad-core/src/DataGrid/DataGrid.tsx deleted file mode 100644 index 7551cbc5ad1..00000000000 --- a/packages/toolpad-core/src/DataGrid/DataGrid.tsx +++ /dev/null @@ -1,864 +0,0 @@ -'use client'; - -import { - DataGrid as XDataGrid, - DataGridProps as XDataGridProps, - GridColDef, - GridSlotsComponent, - GridRowId, - GridRowModes, - GridRowModesModel, - GridToolbarColumnsButton, - GridToolbarContainer, - GridToolbarDensitySelector, - GridToolbarExport, - GridToolbarFilterButton, - GridValueGetter, - useGridApiRef, - GridActionsCellItemProps, - GridActionsCellItem, - GridEventListener, - GridPaginationModel, - gridClasses, - GridRowIdGetter, - GridFilterModel, - GridApi, -} from '@mui/x-data-grid'; -import PropTypes from 'prop-types'; -import * as React from 'react'; -import { Button, CircularProgress, styled, useControlled } from '@mui/material'; -import DeleteIcon from '@mui/icons-material/Delete'; -import AddIcon from '@mui/icons-material/Add'; -import EditIcon from '@mui/icons-material/Edit'; -import SaveIcon from '@mui/icons-material/Save'; -import CloseIcon from '@mui/icons-material/Close'; -import invariant from 'invariant'; -import { useNonNullableContext } from '@toolpad/utils/react'; -import { errorFrom } from '@toolpad/utils/errors'; -import RowsLoadingOverlay from './LoadingOverlay'; -import { ErrorOverlay, LoadingOverlay } from '../shared/components'; -import { - ResolvedDataProvider, - ResolvedField, - Datum, - useGetMany, - GetManyParams, - FieldOf, - ResolvedFields, - ValidId, - DEFAULT_ID_FIELD, -} from '../DataProvider'; -import InferencingAlert from './InferencingAlert'; -import { - NotificationSnackbar, - DataGridNotification, - SetDataGridNotificationContext, -} from './NotificationSnackbar'; -import { type Filter } from '../DataProvider/filter'; - -const RootContainer = styled('div')({ - display: 'flex', - flexDirection: 'column', -}); - -const GridContainer = styled('div')({ - flex: 1, - position: 'relative', - minHeight: 0, -}); - -const subscribe = () => () => {}; -const getSnapshot = () => false; -const getServerSnapshot = () => true; - -function useSsr() { - return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); -} - -interface ToolbarCreateButtonContextValue { - slotsProp?: Partial; - onClick: () => void; - visible: boolean; - disabled: boolean; -} - -const ToolbarCreateButtonContext = React.createContext( - null, -); - -const RefetchContext = React.createContext<(() => void) | null>(null); - -const ACTIONS_COLUMN_FIELD = '::toolpad-internal-field::actions::'; - -const DRAFT_ROW_ID = '::toolpad-internal-row::draft::'; - -const DRAFT_ROW_MARKER = Symbol('draft-row'); - -function createDraftRow(): {} { - const row = { [DRAFT_ROW_MARKER]: true }; - return row; -} - -type MaybeDraftRow = R & { [DRAFT_ROW_MARKER]?: true }; - -function isDraftRow(row: MaybeDraftRow): boolean { - return !!row[DRAFT_ROW_MARKER]; -} - -function cleanDraftRow(row: MaybeDraftRow): R { - const cleanedRow = { ...row }; - delete cleanedRow[DRAFT_ROW_MARKER]; - return cleanedRow; -} - -const PlaceholderBorder = styled('div')(({ theme }) => ({ - position: 'absolute', - inset: '0 0 0 0', - borderColor: theme.palette.divider, - borderWidth: 1, - borderStyle: 'solid', - borderRadius: theme.shape.borderRadius, -})); - -type ProcessRowUpdate = XDataGridProps['processRowUpdate']; - -export interface DataGridProps extends Partial> { - /** - * The height of the datagrid in pixels. If left `undefined`, it adopts the height of its parent. - */ - height?: number; - /** - * The data provider to resolve the displayed data. This object must be referentially stable. - */ - dataProvider?: ResolvedDataProvider; -} - -const dateValueGetter = (value: any) => { - if (value === null || value === undefined) { - return undefined; - } - - return new Date(value); -}; - -function wrapWithDateValueGetter( - valueGetter?: GridValueGetter, -): GridValueGetter { - if (!valueGetter) { - return dateValueGetter; - } - - return (oldValue, ...args) => { - const newValue = valueGetter(oldValue, ...args); - return dateValueGetter(newValue); - }; -} - -interface DeleteActionProps { - id: GridRowId; - dataProvider: ResolvedDataProvider; -} - -function DeleteAction({ id, dataProvider }: DeleteActionProps) { - const refetch = useNonNullableContext(RefetchContext); - const [pending, setPending] = React.useState(false); - - const setNotification = useNonNullableContext(SetDataGridNotificationContext); - - const handleDeleteClick = React.useCallback(async () => { - try { - setPending(true); - invariant(dataProvider.deleteOne, 'deleteOne not implemented'); - await dataProvider.deleteOne(id); - setNotification({ - key: `delete-success-${id}`, - message: 'Row deleted', - severity: 'success', - }); - } catch (error) { - setNotification({ - key: `delete-failed-${id}`, - message: 'Failed to delete row', - severity: 'error', - }); - } finally { - setPending(false); - await refetch(); - } - }, [dataProvider, id, refetch, setNotification]); - - return ( - : } - label={`Delete "${id}"`} - onClick={handleDeleteClick} - /> - ); -} - -function inferFields(rows: any[]): ResolvedFields { - const result: any = {}; - - const types = new Map>(); - - const rowsToConsider = 10; - const rowSlice = rows.slice(0, rowsToConsider); - - for (const row of rowSlice) { - for (const key of Object.keys(row)) { - const value = row[key]; - const type = typeof value; - const existingType = types.get(key); - if (existingType) { - existingType.add(type); - } else { - types.set(key, new Set([type])); - } - } - } - - for (const [field, value] of Array.from(types.entries())) { - if (value.size === 1) { - const type = value.size === 1 ? Array.from(value)[0] : 'string'; - result[field] = { type }; - } - } - - return result; -} - -interface GridState { - editedRowId: GridRowId | null; - isProcessingRowUpdate: boolean; - rowModesModel: GridRowModesModel; -} - -type GridAction = - | { kind: 'START_ROW_EDIT'; rowId: GridRowId; fieldToFocus: string | undefined } - | { kind: 'CANCEL_ROW_EDIT' } - | { kind: 'START_ROW_UPDATE' } - | { kind: 'END_ROW_UPDATE' }; - -function gridEditingReducer(state: GridState, action: GridAction): GridState { - switch (action.kind) { - case 'START_ROW_EDIT': - if (state.editedRowId !== null) { - return state; - } - return { - ...state, - editedRowId: action.rowId, - rowModesModel: { - [action.rowId]: { - mode: GridRowModes.Edit, - fieldToFocus: action.fieldToFocus, - }, - }, - }; - case 'CANCEL_ROW_EDIT': - return { - ...state, - editedRowId: null, - rowModesModel: state.editedRowId - ? { - [state.editedRowId]: { - mode: GridRowModes.View, - ignoreModifications: true, - }, - } - : {}, - }; - case 'START_ROW_UPDATE': - return { - ...state, - isProcessingRowUpdate: true, - rowModesModel: {}, - }; - case 'END_ROW_UPDATE': - return { ...state, editedRowId: null, isProcessingRowUpdate: false }; - default: - throw new Error(`Unhandled action: ${JSON.stringify(action)}`); - } -} -/** - * - * Demos: - * - * - [Data Grid](https://mui.com/) - * - * API: - * - * - [DataGrid API](https://mui.com/toolpad/core/api/data-grid) - */ -export function getColumnsFromDataProviderFields( - fields?: ResolvedFields, - baseColumns?: readonly GridColDef[], -): readonly GridColDef[] { - const fieldMap = new Map>(Object.entries(fields ?? {})); - - baseColumns = baseColumns ?? Object.keys(fields ?? {}).map((field) => ({ field })); - - const resolvedColumns = baseColumns.map(function mapper>( - baseColDef: GridColDef, - ): GridColDef { - const dataProviderField: ResolvedField | undefined = fieldMap.get(baseColDef.field); - const colDef: GridColDef = { - type: dataProviderField?.type, - headerName: dataProviderField?.label, - ...baseColDef, - }; - - const valueFormatter = dataProviderField?.valueFormatter; - if (valueFormatter && !colDef.valueFormatter) { - colDef.valueFormatter = (value) => valueFormatter(value, colDef.field as K); - } - - let valueGetter: GridValueGetter | undefined = colDef.valueGetter; - - if (colDef.type === 'date' || colDef.type === 'dateTime') { - valueGetter = wrapWithDateValueGetter(valueGetter); - } - - return { - ...colDef, - valueGetter, - }; - }); - - return resolvedColumns; -} - -function updateColumnsWithDataProviderEditing( - apiRef: React.MutableRefObject, - dataProvider: ResolvedDataProvider, - baseColumns: readonly GridColDef[], - state: GridState, - dispatch: React.Dispatch, -): readonly GridColDef[] { - const idField = dataProvider.idField ?? DEFAULT_ID_FIELD; - const canEdit = !!dataProvider.updateOne; - const canDelete = !!dataProvider.deleteOne; - const canCreate = !!dataProvider.createOne; - const hasEditableRows = canCreate || canEdit; - const hasActionsColumn: boolean = canCreate || canEdit || canDelete; - - const resolvedColumns = baseColumns.map(function mapper>( - baseColDef: GridColDef, - ): GridColDef { - const colDef = { ...baseColDef }; - - if (hasEditableRows && colDef.field !== idField) { - colDef.editable = true; - } - - return colDef; - }); - - if (hasActionsColumn) { - resolvedColumns.push({ - field: ACTIONS_COLUMN_FIELD, - headerName: 'Actions', - type: 'actions', - align: 'center', - resizable: false, - pinnable: false, - width: 100, - getActions: (params) => { - const actions: React.ReactElement[] = []; - const rowId = params.row[idField] as GridRowId; - - const isEditing = state.editedRowId !== null || state.isProcessingRowUpdate; - const isEditedRow = isDraftRow(params.row) || rowId === state.editedRowId; - - if (isEditedRow) { - actions.push( - : } - label="Save" - disabled={state.isProcessingRowUpdate} - onClick={() => { - dispatch({ kind: 'START_ROW_UPDATE' }); - }} - />, - } - label="Cancel" - disabled={state.isProcessingRowUpdate} - onClick={() => { - dispatch({ kind: 'CANCEL_ROW_EDIT' }); - }} - />, - ); - } else { - if (canEdit) { - actions.push( - } - label="Edit" - disabled={isEditing} - onClick={() => { - dispatch({ - kind: 'START_ROW_EDIT', - rowId, - fieldToFocus: getEditedRowFieldToFocus(apiRef, idField), - }); - }} - />, - ); - } - if (canDelete) { - actions.push(); - } - } - return actions; - }, - }); - } - - return resolvedColumns; -} - -function ToolbarGridCreateButton() { - const { visible, slotsProp, onClick, disabled } = useNonNullableContext( - ToolbarCreateButtonContext, - ); - const ButtonComponent = slotsProp?.baseButton ?? Button; - return visible ? ( - } onClick={onClick} disabled={disabled}> - Add record - - ) : null; -} - -function ToolbarGridToolbar() { - return ( - - - - - - - - ); -} - -function diffRows>(original: R, changed: R): Partial { - const keys = new Set([...Object.keys(original), ...Object.keys(changed)]); - const diff: Partial = {}; - Array.from(keys).forEach((key: keyof R) => { - const originalValue = original[key]; - const changedValue = changed[key]; - if (Object.is(originalValue, changedValue)) { - return; - } - if ( - originalValue instanceof Date && - changedValue instanceof Date && - originalValue.getTime() === changedValue.getTime() - ) { - return; - } - (diff as any)[key] = changedValue; - }); - return diff; -} - -function fromGridFilterModel(filterModel: GridFilterModel): Filter { - const filter: Filter = {}; - for (const [field, filterItem] of Object.entries(filterModel.items)) { - for (const [operator, value] of Object.entries(filterItem)) { - filter[field as FieldOf] ??= {}; - (filter[field as FieldOf] as any)[operator] = value; - } - } - return filter; -} - -function getEditedRowFieldToFocus( - apiRef: React.MutableRefObject, - idField: ValidId, -): string | undefined { - const firstNonIdColumn = apiRef.current.getVisibleColumns().find((col) => col.field !== idField); - return firstNonIdColumn?.field; -} - -/** - * - * Demos: - * - * - [Data Grid](https://mui.com/) - * - * API: - * - * - [DataGrid API](https://mui.com/toolpad/core/api/data-grid) - * - inherits [X DataGrid API](https://mui.com/x/api/data-grid/data-grid/) - */ -function DataGrid(props: DataGridProps) { - const { dataProvider, ...restProps1 } = props; - - // TODO: figure out how to stop generating prop types for X Grid properties - // and document with inheritance - const restProps2 = restProps1; - - const { - columns: columnsProp, - processRowUpdate: processRowUpdateProp, - slots: slotsProp, - apiRef: apiRefProp, - initialState: initialStateProp, - autosizeOptions: autosizeOptionsProp, - getRowId: getRowIdProp, - rowModesModel: rowModesModelProp, - filterMode: filterModeProp, - filterModel: filterModelProp, - onFilterModelChange: onFilterModelChangeProp, - paginationMode: paginationModeProp, - paginationModel: paginationModelProp, - onPaginationModelChange: onPaginationModelChangeProp, - ...restProps - } = restProps2; - - const idField = dataProvider?.idField ?? DEFAULT_ID_FIELD; - - const [notification, setNotification] = React.useState(null); - - const gridApiRefOwn = useGridApiRef(); - const apiRef = apiRefProp ?? gridApiRefOwn; - - const [gridPaginationModel, setGridPaginationModel] = useControlled({ - controlled: paginationModelProp, - default: { page: 0, pageSize: 100 }, - name: 'DataGrid', - state: 'paginationModel', - }); - - const onGridPaginationModelChange = React.useCallback< - NonNullable - >( - (paginationModel, details) => { - setGridPaginationModel(paginationModel); - onPaginationModelChangeProp?.(paginationModel, details); - }, - [onPaginationModelChangeProp, setGridPaginationModel], - ); - - const [gridFilterModel, setGridFilterModel] = useControlled({ - controlled: filterModelProp, - default: { items: [] }, - name: 'DataGrid', - state: 'filterModel', - }); - - const onGridFilterModelChange = React.useCallback< - NonNullable - >( - (filterModel, details) => { - setGridFilterModel(filterModel); - onFilterModelChangeProp?.(filterModel, details); - }, - [onFilterModelChangeProp, setGridFilterModel], - ); - - const [editingState, dispatchEditingAction] = React.useReducer(gridEditingReducer, { - editedRowId: null, - isProcessingRowUpdate: false, - rowModesModel: {}, - }); - - const handleCreateRowRequest = React.useCallback(() => { - dispatchEditingAction({ - kind: 'START_ROW_EDIT', - rowId: DRAFT_ROW_ID, - fieldToFocus: getEditedRowFieldToFocus(apiRef, idField), - }); - }, [apiRef, idField]); - - const useGetManyParams = React.useMemo>( - () => ({ - pagination: - paginationModeProp === 'server' - ? { - start: gridPaginationModel.page * gridPaginationModel.pageSize, - pageSize: gridPaginationModel.pageSize, - } - : null, - filter: filterModeProp === 'server' ? fromGridFilterModel(gridFilterModel) : {}, - }), - [ - filterModeProp, - gridFilterModel, - gridPaginationModel.page, - gridPaginationModel.pageSize, - paginationModeProp, - ], - ); - - const { data, loading, error, refetch } = useGetMany(dataProvider ?? null, useGetManyParams); - - const rows = React.useMemo(() => { - const renderedRows = data?.rows ?? []; - if (editingState.editedRowId === DRAFT_ROW_ID) { - return [createDraftRow(), ...renderedRows]; - } - return renderedRows; - }, [data?.rows, editingState.editedRowId]); - - const processRowUpdate = React.useMemo(() => { - if (processRowUpdateProp) { - return processRowUpdateProp; - } - const updateOne = dataProvider?.updateOne; - const createOne = dataProvider?.createOne; - if (!(updateOne || createOne)) { - return undefined; - } - return async (updatedRow: R, originalRow: R): Promise => { - try { - let result: R; - if (isDraftRow(updatedRow)) { - invariant(createOne, 'createOne not implemented'); - - const rowInit = cleanDraftRow(updatedRow); - - try { - result = await createOne(rowInit); - } catch (creationError) { - let message = 'Failed to create row'; - if (process.env.NODE_ENV !== 'production') { - message = `${message}: ${errorFrom(creationError).message}`; - } - setNotification({ key: `create-failed`, message, severity: 'error' }); - return { ...originalRow, _action: 'delete' }; - } - - const createdId = result[idField] as GridRowId; - setNotification({ - key: `create-success-${createdId}`, - message: 'Row created', - severity: 'success', - showId: createdId, - }); - } else { - invariant(updateOne, 'updateOne not implemented'); - - const changedValues = diffRows(originalRow, updatedRow); - if (Object.keys(changedValues).length <= 0) { - return originalRow; - } - - const updatedId = updatedRow[idField] as ValidId; - try { - result = await updateOne(updatedId, changedValues); - } catch (updateError) { - let message = 'Failed to update row'; - if (process.env.NODE_ENV !== 'production') { - message = `${message}: ${errorFrom(updateError).message}`; - } - setNotification({ - key: `update-failed-${updatedId}`, - message, - severity: 'error', - }); - return originalRow; - } - - setNotification({ - key: `update-success-${updatedId}`, - message: 'Row updated', - severity: 'success', - showId: result[idField] as GridRowId, - }); - } - - return result; - } finally { - dispatchEditingAction({ kind: 'END_ROW_UPDATE' }); - refetch(); - } - }; - }, [dataProvider, idField, processRowUpdateProp, refetch]); - - const slots = React.useMemo>( - () => ({ - loadingOverlay: RowsLoadingOverlay, - toolbar: ToolbarGridToolbar, - ...slotsProp, - }), - [slotsProp], - ); - const hasCreateButton = !!dataProvider?.createOne; - - const createButtonContext = React.useMemo(() => { - return { - slotsProp, - onClick: () => { - handleCreateRowRequest(); - }, - visible: hasCreateButton, - disabled: !!editingState.editedRowId || loading, - }; - }, [editingState.editedRowId, handleCreateRowRequest, hasCreateButton, loading, slotsProp]); - - const getRowId = React.useCallback>( - (row: R) => { - if (isDraftRow(row)) { - return DRAFT_ROW_ID; - } - if (getRowIdProp) { - return getRowIdProp(row); - } - return row[idField] as GridRowId; - }, - [getRowIdProp, idField], - ); - - const handleRowEditStart = React.useCallback>( - (params) => { - const rowId = params.row[idField] as GridRowId; - const canEdit = !!dataProvider?.updateOne; - if (params.reason === 'cellDoubleClick' && canEdit) { - dispatchEditingAction({ - kind: 'START_ROW_EDIT', - rowId, - fieldToFocus: getEditedRowFieldToFocus(apiRef, idField), - }); - } - }, - [apiRef, dataProvider?.updateOne, idField], - ); - - // Calculate separately to avoid re-calculating columns on every render - const inferredFields = React.useMemo | null>(() => { - if (!dataProvider) { - // There are no rows coming from the data provider - return null; - } - if (dataProvider.fields) { - // The data provider already provides fields - return null; - } - if (!data?.rows) { - return null; - } - return inferFields(data.rows); - }, [dataProvider, data?.rows]); - - const columns = React.useMemo(() => { - if (!dataProvider) { - return columnsProp ?? []; - } - - let gridColumns = getColumnsFromDataProviderFields( - inferredFields ?? dataProvider.fields, - columnsProp, - ); - - gridColumns = updateColumnsWithDataProviderEditing( - apiRef, - dataProvider, - gridColumns, - editingState, - dispatchEditingAction, - ); - - return gridColumns; - }, [apiRef, columnsProp, dataProvider, editingState, inferredFields]); - - const isSsr = useSsr(); - - return ( - - - - - {inferredFields ? : null} - - - {isSsr ? ( - // At last show something during SSR https://github.com/mui/mui-x/issues/7599 - - - - ) : null} - - {error ? ( - - - - ) : null} - - - - - - - - ); -} - -DataGrid.propTypes /* remove-proptypes */ = { - // ┌────────────────────────────── Warning ──────────────────────────────┐ - // │ These PropTypes are generated from the TypeScript type definitions. │ - // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │ - // └─────────────────────────────────────────────────────────────────────┘ - /** - * The data provider to resolve the displayed data. This object must be referentially stable. - */ - dataProvider: PropTypes.shape({ - createOne: PropTypes.func, - deleteOne: PropTypes.func, - fields: PropTypes.object, - getMany: PropTypes.func.isRequired, - getOne: PropTypes.func, - idField: PropTypes.object, - updateOne: PropTypes.func, - }), - /** - * The height of the datagrid in pixels. If left `undefined`, it adopts the height of its parent. - */ - height: PropTypes.number, -} as any; - -export { DataGrid }; diff --git a/packages/toolpad-core/src/LineChart/LineChart.tsx b/packages/toolpad-core/src/LineChart/LineChart.tsx deleted file mode 100644 index d54e95e1ff9..00000000000 --- a/packages/toolpad-core/src/LineChart/LineChart.tsx +++ /dev/null @@ -1,170 +0,0 @@ -'use client'; - -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { - LineChart as XLineChart, - LineChartProps as XLineChartProps, - blueberryTwilightPalette, - LineSeriesType, -} from '@mui/x-charts'; -import { styled, useTheme } from '@mui/material'; -import { Datum, ResolvedDataProvider, useGetMany } from '../DataProvider'; -import { ErrorOverlay, LoadingOverlay } from '../shared/components'; - -const LineChartRoot = styled('div')({ - position: 'relative', -}); - -export type LineChartSeries = XLineChartProps['series']; - -export interface LineChartProps extends Partial { - /** - * The data provider to resolve the displayed data. This object must be referentially stable. - */ - dataProvider?: ResolvedDataProvider; -} - -type ChartsXAxis = NonNullable[number]; - -/** - * - * Demos: - * - * - [Line Chart](https://mui.com/toolpad/core/react-line-chart/) - * - * API: - * - * - [LineChart API](https://mui.com/toolpad/core/api/line-chart) - * - inherits [X LineChart API](https://mui.com/x/api/charts/line-chart/) - */ -const LineChart = React.forwardRef(function LineChart( - props: LineChartProps, - ref: React.Ref, -) { - const { dataProvider, ...restProps1 } = props; - // TODO: figure out how to stop generating prop types for X Grid properties - // and document with inheritance - const restProps2 = restProps1; - const { xAxis, series, ...rest } = restProps2; - const theme = useTheme(); - const { data, loading, error } = useGetMany(dataProvider ?? null); - const resolvedXAxis = React.useMemo(() => { - if (!xAxis || xAxis.length <= 0) { - return [{ dataKey: 'id' }]; - } - return xAxis.map((axis) => { - let defaults: Partial = {}; - if (axis.dataKey) { - const field = dataProvider?.fields?.[axis.dataKey]; - if (field) { - defaults = { - label: field.label, - }; - if (field.type === 'date') { - defaults.scaleType = 'time'; - } - } - } - return { ...defaults, ...axis }; - }); - }, [dataProvider?.fields, xAxis]); - - const resolvedSeries = React.useMemo(() => { - const idField = dataProvider?.idField ?? 'id'; - const resolvedSeriesProp: LineChartSeries = - series || - Object.keys(dataProvider?.fields ?? {}) - .filter( - (dataKey) => dataKey !== idField && dataProvider?.fields?.[dataKey]?.type === 'number', - ) - .map((dataKey) => ({ dataKey })); - - const colorSchemeIndices = new Map( - Object.keys(dataProvider?.fields ?? {}).map((name, i) => [name, i]), - ); - - const colors = blueberryTwilightPalette(theme.palette.mode); - - return resolvedSeriesProp.map((s) => { - let defaults: Partial = {}; - if (s.dataKey) { - const name = s.dataKey; - const field = dataProvider?.fields?.[name]; - if (field) { - const colorSchemeIndex = colorSchemeIndices.get(name) ?? 0; - defaults = { - label: field.label, - color: colors[colorSchemeIndex % colors.length], - }; - const valueFormatter = field.valueFormatter; - if (valueFormatter) { - defaults.valueFormatter = (value: any) => valueFormatter(value, name); - } - } - } - return { ...defaults, ...s }; - }); - }, [dataProvider?.idField, dataProvider?.fields, series, theme.palette.mode]); - - const dataSet = React.useMemo(() => { - const resolvedRows = data?.rows ?? []; - return resolvedRows.map((row) => { - const result: NonNullable[number] = {}; - for (const [name, field] of Object.entries(dataProvider?.fields ?? {})) { - let value = row[name]; - if (field.type === 'date' && (typeof value === 'string' || typeof value === 'number')) { - value = new Date(value); - } - - if (typeof value === 'string' || typeof value === 'number' || value instanceof Date) { - result[name] = value; - } - } - return result; - }); - }, [data?.rows, dataProvider?.fields]); - - return ( - -
- -
- {loading ? : null} - {error ? : null} - - ); -}); - -LineChart.propTypes /* remove-proptypes */ = { - // ┌────────────────────────────── Warning ──────────────────────────────┐ - // │ These PropTypes are generated from the TypeScript type definitions. │ - // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │ - // └─────────────────────────────────────────────────────────────────────┘ - /** - * @ignore - */ - children: PropTypes.node, - /** - * The data provider to resolve the displayed data. This object must be referentially stable. - */ - dataProvider: PropTypes.shape({ - createOne: PropTypes.func, - deleteOne: PropTypes.func, - fields: PropTypes.object, - getMany: PropTypes.func.isRequired, - getOne: PropTypes.func, - idField: PropTypes.object, - updateOne: PropTypes.func, - }), -} as any; - -export { LineChart }; From 8b1930698c124ef6de4712f93b1e217f3e858269 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Fri, 19 Jul 2024 13:06:53 +0100 Subject: [PATCH 40/42] Restore unneeded useLocalStorageState from toolpad/utils --- packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx | 2 +- packages/toolpad-studio/src/ThemeContext.tsx | 2 +- .../AppEditor/PageEditor/ComponentCatalog/ComponentCatalog.tsx | 2 +- .../src/toolpad/AppEditor/PagesExplorer/index.tsx | 2 +- .../hooks => toolpad-studio/src/utils}/useLocalStorageState.ts | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) rename packages/{toolpad-utils/src/hooks => toolpad-studio/src/utils}/useLocalStorageState.ts (95%) diff --git a/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx b/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx index f8a255578ae..02d24b6e399 100644 --- a/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx +++ b/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx @@ -3,7 +3,7 @@ import { PaletteMode, Theme, useMediaQuery } from '@mui/material'; import { CssVarsProvider, ThemeProvider, useColorScheme, CssVarsTheme } from '@mui/material/styles'; import InitColorSchemeScript from '@mui/material/InitColorSchemeScript'; import CssBaseline from '@mui/material/CssBaseline'; -import useLocalStorageState from '@toolpad/utils/hooks/useLocalStorageState'; +import { useLocalStorageState } from '../useLocalStorageState'; import { PaletteModeContext } from '../shared/context'; import type { AppProviderProps } from './AppProvider'; diff --git a/packages/toolpad-studio/src/ThemeContext.tsx b/packages/toolpad-studio/src/ThemeContext.tsx index 028f8ed1639..7c876f427db 100644 --- a/packages/toolpad-studio/src/ThemeContext.tsx +++ b/packages/toolpad-studio/src/ThemeContext.tsx @@ -3,7 +3,7 @@ import { PaletteMode, ScopedCssBaseline } from '@mui/material'; import { ThemeProvider as MuiThemeProvider, createTheme } from '@mui/material/styles'; import { deepmerge } from '@mui/utils'; import useMediaQuery from '@mui/material/useMediaQuery'; -import useLocalStorageState from '@toolpad/utils/hooks/useLocalStorageState'; +import useLocalStorageState from './utils/useLocalStorageState'; import { getDesignTokens, getMetaThemeColor, getThemedComponents } from './theme'; interface ThemeProviderProps { diff --git a/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalog.tsx b/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalog.tsx index 137d949bb41..1805935d779 100644 --- a/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalog.tsx +++ b/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalog.tsx @@ -17,7 +17,7 @@ import InputAdornment from '@mui/material/InputAdornment'; import AccountCircle from '@mui/icons-material/Search'; import { uncapitalize } from '@toolpad/utils/strings'; import * as appDom from '@toolpad/studio-runtime/appDom'; -import useLocalStorageState from '@toolpad/utils/hooks/useLocalStorageState'; +import useLocalStorageState from '../../../../utils/useLocalStorageState'; import ComponentCatalogItem from './ComponentCatalogItem'; import CreateCodeComponentNodeDialog from '../../PagesExplorer/CreateCodeComponentNodeDialog'; import { useAppState } from '../../../AppState'; diff --git a/packages/toolpad-studio/src/toolpad/AppEditor/PagesExplorer/index.tsx b/packages/toolpad-studio/src/toolpad/AppEditor/PagesExplorer/index.tsx index d6e92101846..67c98de8534 100644 --- a/packages/toolpad-studio/src/toolpad/AppEditor/PagesExplorer/index.tsx +++ b/packages/toolpad-studio/src/toolpad/AppEditor/PagesExplorer/index.tsx @@ -8,7 +8,7 @@ import invariant from 'invariant'; import { alphabeticComparator, createPropComparator } from '@toolpad/utils/comparators'; import useBoolean from '@toolpad/utils/hooks/useBoolean'; import * as appDom from '@toolpad/studio-runtime/appDom'; -import useLocalStorageState from '@toolpad/utils/hooks/useLocalStorageState'; +import useLocalStorageState from '../../../utils/useLocalStorageState'; import { useAppStateApi, useAppState } from '../../AppState'; import NodeMenu from '../NodeMenu'; import { DomView } from '../../../utils/domView'; diff --git a/packages/toolpad-utils/src/hooks/useLocalStorageState.ts b/packages/toolpad-studio/src/utils/useLocalStorageState.ts similarity index 95% rename from packages/toolpad-utils/src/hooks/useLocalStorageState.ts rename to packages/toolpad-studio/src/utils/useLocalStorageState.ts index 356cb990cfc..c2cf6364e16 100644 --- a/packages/toolpad-utils/src/hooks/useLocalStorageState.ts +++ b/packages/toolpad-studio/src/utils/useLocalStorageState.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import useStorageState from './useStorageState'; +import useStorageState from '@toolpad/utils/hooks/useStorageState'; /** * Sync state to local storage so that it persists through a page refresh. Usage is From 32909822bbe4da4a68403eec0de4c38e78d7ac7f Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Fri, 19 Jul 2024 13:09:03 +0100 Subject: [PATCH 41/42] Don't change these files --- packages/toolpad-studio/src/ThemeContext.tsx | 2 +- .../AppEditor/PageEditor/ComponentCatalog/ComponentCatalog.tsx | 2 +- .../src/toolpad/AppEditor/PagesExplorer/index.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/toolpad-studio/src/ThemeContext.tsx b/packages/toolpad-studio/src/ThemeContext.tsx index 7c876f427db..10fd011abef 100644 --- a/packages/toolpad-studio/src/ThemeContext.tsx +++ b/packages/toolpad-studio/src/ThemeContext.tsx @@ -3,8 +3,8 @@ import { PaletteMode, ScopedCssBaseline } from '@mui/material'; import { ThemeProvider as MuiThemeProvider, createTheme } from '@mui/material/styles'; import { deepmerge } from '@mui/utils'; import useMediaQuery from '@mui/material/useMediaQuery'; -import useLocalStorageState from './utils/useLocalStorageState'; import { getDesignTokens, getMetaThemeColor, getThemedComponents } from './theme'; +import useLocalStorageState from './utils/useLocalStorageState'; interface ThemeProviderProps { children?: React.ReactNode; diff --git a/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalog.tsx b/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalog.tsx index 1805935d779..e180dca5409 100644 --- a/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalog.tsx +++ b/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalog.tsx @@ -17,12 +17,12 @@ import InputAdornment from '@mui/material/InputAdornment'; import AccountCircle from '@mui/icons-material/Search'; import { uncapitalize } from '@toolpad/utils/strings'; import * as appDom from '@toolpad/studio-runtime/appDom'; -import useLocalStorageState from '../../../../utils/useLocalStorageState'; import ComponentCatalogItem from './ComponentCatalogItem'; import CreateCodeComponentNodeDialog from '../../PagesExplorer/CreateCodeComponentNodeDialog'; import { useAppState } from '../../../AppState'; import { usePageEditorApi } from '../PageEditorProvider'; import { useToolpadComponents } from '../../toolpadComponents'; +import useLocalStorageState from '../../../../utils/useLocalStorageState'; import HelpTooltipIcon from '../../../../components/HelpTooltipIcon'; interface FutureComponentSpec { diff --git a/packages/toolpad-studio/src/toolpad/AppEditor/PagesExplorer/index.tsx b/packages/toolpad-studio/src/toolpad/AppEditor/PagesExplorer/index.tsx index 67c98de8534..6d591e0cce1 100644 --- a/packages/toolpad-studio/src/toolpad/AppEditor/PagesExplorer/index.tsx +++ b/packages/toolpad-studio/src/toolpad/AppEditor/PagesExplorer/index.tsx @@ -8,8 +8,8 @@ import invariant from 'invariant'; import { alphabeticComparator, createPropComparator } from '@toolpad/utils/comparators'; import useBoolean from '@toolpad/utils/hooks/useBoolean'; import * as appDom from '@toolpad/studio-runtime/appDom'; -import useLocalStorageState from '../../../utils/useLocalStorageState'; import { useAppStateApi, useAppState } from '../../AppState'; +import useLocalStorageState from '../../../utils/useLocalStorageState'; import NodeMenu from '../NodeMenu'; import { DomView } from '../../../utils/domView'; import { useProjectApi } from '../../../projectApi'; From 36fe9ae6df6b0369ec70f8b56fe4bedf1249a615 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Fri, 19 Jul 2024 13:16:23 +0100 Subject: [PATCH 42/42] Fix types --- packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx b/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx index 02d24b6e399..841ca8a428d 100644 --- a/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx +++ b/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx @@ -27,7 +27,7 @@ function useStandardPaletteMode() { const { themeMode, setThemeMode } = useThemeMode(); return { - paletteMode: themeMode === 'system' ? preferredMode : themeMode, + paletteMode: !themeMode || themeMode === 'system' ? preferredMode : themeMode, setPaletteMode: setThemeMode, }; }