Merge commit '8a34771a34f6e029caa73cc055d14a125123dc3b' into vitest-t…

…est-only-changes

benchmark/package.json

@@ -32,7 +32,7 @@
     "react-is": "^18.3.1",
     "react-jss": "^10.10.0",
     "react-redux": "^9.1.2",
-    "redux": "^4.2.1",
+    "redux": "^5.0.1",
     "serve-handler": "^6.1.6",
     "styled-components": "^6.1.13",
     "styled-system": "^5.1.5",

docs/data/material/experimental-api/pigment-css/pigment-css.md

@@ -341,3 +341,35 @@ declare global {
   }
 }
 ```
+
+### Runtime theme
+
+:::info
+
+**Caveat**
+
+- Avoid using the runtime theme unless you have a compelling reason.
+- The runtime theme contains [**only serializable values**](https://developer.mozilla.org/en-US/docs/Glossary/Serializable_object) (some functions still exist in `breakpoints` and `transitions` for internal logic inside components but may be removed in the future).
+- The runtime theme will not change between modes (light and dark) because it is pre-compiled at build time. To render something based on the theme structure and its values, use `theme.vars.*` to refer to CSS variables instead.
+
+:::
+
+To access the runtime theme, use the `useTheme` hook:
+
+```js
+import { useTheme } from '@mui/material-pigment-css';
+
+function MyComponent() {
+  const theme = useTheme();
+
+  return (
+    <div>
+      {Object.entries(theme.vars.palette.primary).map(([key, value]) => (
+        <div key={key} style={{ width: 40, height: 40, background: value }}>
+          {key}: {value}
+        </div>
+      ))}
+    </div>
+  );
+}
+```

docs/data/material/getting-started/templates/dashboard/components/AppNavbar.js

@@ -68,7 +68,7 @@ export default function AppNavbar() {
               Dashboard
             </Typography>
           </Stack>
-          <ColorModeIconDropdown />
+          <ColorModeIconDropdown data-screenshot="" />
           <MenuButton aria-label="menu" onClick={toggleDrawer(true)}>
             <MenuRoundedIcon />
           </MenuButton>

docs/data/material/getting-started/templates/dashboard/components/AppNavbar.tsx

@@ -68,7 +68,7 @@ export default function AppNavbar() {
               Dashboard
             </Typography>
           </Stack>
-          <ColorModeIconDropdown />
+          <ColorModeIconDropdown data-screenshot="" />
           <MenuButton aria-label="menu" onClick={toggleDrawer(true)}>
             <MenuRoundedIcon />
           </MenuButton>

docs/pages/material-ui/getting-started/templates.js

@@ -3,5 +3,5 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import * as pageProps from 'docs/data/material/getting-started/templates/templates.md?muiMarkdown';
 
 export default function Page() {
-  return <MarkdownDocs {...pageProps} disableToc disableAd />;
+  return <MarkdownDocs {...pageProps} disableAd />;
 }

docs/src/components/home/MuiStatistics.tsx

@@ -5,9 +5,9 @@ import Typography from '@mui/material/Typography';
 
 const data = [
   { title: '5.8M', metadata: 'Weekly downloads on npm' },
-  { title: '90.5k', metadata: 'Stars on GitHub' },
-  { title: '2.9k', metadata: 'Open-source contributors' },
-  { title: '18.9k', metadata: 'Followers on X' },
+  { title: '93.9k', metadata: 'Stars on GitHub' },
+  { title: '3.0k', metadata: 'Open-source contributors' },
+  { title: '19.2k', metadata: 'Followers on X' },
 ];
 
 export default function MuiStatistics() {

docs/src/modules/components/MaterialFreeTemplatesCollection.js

@@ -4,13 +4,19 @@ import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
 import CardMedia from '@mui/material/CardMedia';
 import Button from '@mui/material/Button';
-import Grid from '@mui/material/Grid2';
+import IconButton from '@mui/material/IconButton';
 import Link from '@mui/material/Link';
+import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
+import SvgIcon from '@mui/material/SvgIcon';
 import Visibility from '@mui/icons-material/Visibility';
 import CodeRoundedIcon from '@mui/icons-material/CodeRounded';
 import OpenInNewRoundedIcon from '@mui/icons-material/OpenInNewRounded';
 import { useTranslate } from '@mui/docs/i18n';
+import { pascalCase } from 'docs/src/modules/utils/helpers';
+import sourceMaterialTemplates from 'docs/src/modules/material/sourceMaterialTemplates';
+import codeSandbox from 'docs/src/modules/sandbox/CodeSandbox';
+import stackBlitz from 'docs/src/modules/sandbox/StackBlitz';
 
 const sourcePrefix = `${process.env.SOURCE_CODE_REPO}/tree/v${process.env.LIB_VERSION}`;
 
@@ -70,124 +76,197 @@ function layouts(translatation) {
 
 export default function Templates() {
   const translatation = useTranslate();
-
+  const materialTemplates = sourceMaterialTemplates();
   return (
-    <Grid container spacing={2} sx={{ py: 2 }}>
-      {layouts(translatation).map((layout) => (
-        <Grid size={{ xs: 12, sm: 6 }} key={layout.title}>
-          <Card
-            variant="outlined"
-            sx={{
-              height: '100%',
-              display: 'flex',
-              flexDirection: 'column',
-              borderColor: 'divider',
-            }}
-          >
-            <Box
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 4, mb: 4 }}>
+      {layouts(translatation).map((layout) => {
+        const templateId = layout.source.split('/').pop();
+        const templateName = pascalCase(templateId);
+        const item = materialTemplates.map.get(templateId);
+        return (
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }} key={layout.title}>
+            <Typography component="h3" variant="h6" sx={{ fontWeight: 'semiBold' }}>
+              {layout.title}
+            </Typography>
+            <Typography variant="body2" sx={{ color: 'text.secondary', mb: 2 }}>
+              {layout.description}
+            </Typography>
+            <Card
+              variant="outlined"
               sx={{
-                position: 'relative',
-                '&:hover > .MuiCardMedia-root': {
-                  filter: 'blur(4px)',
-                },
-                '&:hover > .MuiButtonBase-root': {
-                  opacity: 1,
-                },
+                height: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+                borderColor: 'divider',
               }}
             >
-              <CardMedia
-                component="img"
-                // The image source is generated from `pnpm template:screenshot material-ui`, do not modify the image manually.
-                image={`/static/screenshots${layout.href.replace(/\/$/, '')}.jpg`}
-                title={layout.title}
-                sx={(theme) => ({
-                  aspectRatio: '16 / 9',
-                  objectPosition: 'top',
-                  transition: 'filter 0.3s',
-                  ...theme.applyStyles('dark', {
-                    content: 'var(--src)',
-                  }),
-                })}
-                style={{
-                  '--src': layout.hasDarkMode
-                    ? `url(/static/screenshots${layout.href.replace(/\/$/, '')}-dark.jpg)`
-                    : `url(/static/screenshots${layout.href.replace(/\/$/, '')}.jpg)`,
-                }}
-              />
-              <Button
-                variant="text"
-                endIcon={<OpenInNewRoundedIcon />}
-                component={Link}
-                href={layout.href}
-                data-ga-event-category="material-ui-template"
-                data-ga-event-label={layout.title}
-                data-ga-event-action="preview-img"
+              <Box
                 sx={{
-                  position: 'absolute',
-                  top: '50%',
-                  left: '50%',
-                  transform: 'translate(-50%, -50%)',
-                  opacity: 0,
-                  transition: 'opacity 0.5s ease',
-                  backgroundColor: 'background.paper',
-                  '&:hover': {
-                    backgroundColor: 'background.default',
+                  position: 'relative',
+                  '&:hover > .MuiCardMedia-root': {
+                    filter: 'blur(4px)',
+                  },
+                  '&:hover > .MuiButtonBase-root': {
+                    opacity: 1,
                   },
                 }}
               >
-                See live preview
-              </Button>
-            </Box>
-            <Box sx={{ p: 2, pt: 1.5, borderTop: '1px solid', borderColor: 'divider' }}>
-              <Typography
-                component="h3"
-                variant="body1"
-                gutterBottom
-                sx={{ fontWeight: 'semiBold' }}
-              >
-                {layout.title}
-              </Typography>
-              <Typography variant="body2" gutterBottom sx={{ color: 'text.secondary', mb: 2 }}>
-                {layout.description}
-              </Typography>
+                <CardMedia
+                  component="img"
+                  // The image source is generated from `pnpm template:screenshot material-ui`, do not modify the image manually.
+                  image={`/static/screenshots${layout.href.replace(/\/$/, '')}.jpg`}
+                  title={layout.title}
+                  sx={(theme) => ({
+                    aspectRatio: '16 / 9',
+                    objectPosition: 'top',
+                    transition: 'filter 0.3s',
+                    ...theme.applyStyles('dark', {
+                      content: 'var(--src)',
+                    }),
+                  })}
+                  style={{
+                    '--src': layout.hasDarkMode
+                      ? `url(/static/screenshots${layout.href.replace(/\/$/, '')}-dark.jpg)`
+                      : `url(/static/screenshots${layout.href.replace(/\/$/, '')}.jpg)`,
+                  }}
+                />
+                <Button
+                  variant="text"
+                  endIcon={<OpenInNewRoundedIcon />}
+                  component={Link}
+                  href={layout.href}
+                  data-ga-event-category="material-ui-template"
+                  data-ga-event-label={layout.title}
+                  data-ga-event-action="preview-img"
+                  sx={{
+                    position: 'absolute',
+                    top: '50%',
+                    left: '50%',
+                    transform: 'translate(-50%, -50%)',
+                    opacity: 0,
+                    transition: 'opacity 0.5s ease',
+                    backgroundColor: 'background.paper',
+                    '&:hover': {
+                      backgroundColor: 'background.default',
+                    },
+                  }}
+                >
+                  See live preview
+                </Button>
+              </Box>
               <Box
                 sx={{
                   display: 'flex',
-                  flexDirection: { xs: 'column', sm: 'row' },
-                  gap: 1,
-                  mt: 'auto',
+                  justifyContent: 'space-between',
+                  p: 2,
+                  borderTop: '1px solid',
+                  borderColor: 'divider',
                 }}
               >
+                <Box
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 1,
+                  }}
+                >
+                  <Tooltip title="Edit in StackBlitz">
+                    <IconButton
+                      color="primary"
+                      size="small"
+                      aria-label="StackBlitz playground"
+                      data-ga-event-category="material-ui-template"
+                      data-ga-event-label={templateId}
+                      data-ga-event-action="stackblitz"
+                      onClick={() =>
+                        stackBlitz
+                          .createMaterialTemplate({
+                            ...item,
+                            files: { ...item.files, ...materialTemplates.sharedTheme?.files },
+                            title: `${templateName} Template - Material UI`,
+                            githubLocation: `${process.env.SOURCE_CODE_REPO}/blob/v${
+                              process.env.LIB_VERSION
+                            }/docs/data/material/templates/${templateId}/${templateName}.${
+                              item.codeVariant === 'TS' ? 'tsx' : 'js'
+                            }`,
+                          })
+                          .replaceContent((content) => {
+                            if (typeof content === 'string') {
+                              return content
+                                .replace(/\.\.\/shared-theme\//g, './theme/')
+                                .replace('./App', `./${templateName}`);
+                            }
+                            return content;
+                          })
+                          .openStackBlitz(`/${templateName}`)
+                      }
+                    >
+                      <SvgIcon viewBox="0 0 19 28">
+                        <path d="M8.13378 16.1087H0L14.8696 0L10.8662 11.1522L19 11.1522L4.13043 27.2609L8.13378 16.1087Z" />
+                      </SvgIcon>
+                    </IconButton>
+                  </Tooltip>
+                  <Tooltip title="Edit in CodeSandbox">
+                    <IconButton
+                      color="primary"
+                      size="small"
+                      aria-label="CodeSandbox playground"
+                      data-ga-event-category="material-ui-template"
+                      data-ga-event-label={templateId}
+                      data-ga-event-action="codesandbox"
+                      onClick={() =>
+                        codeSandbox
+                          .createMaterialTemplate({
+                            ...item,
+                            files: { ...item.files, ...materialTemplates.sharedTheme?.files },
+                            title: `${templateName} Template - Material UI`,
+                            githubLocation: `${process.env.SOURCE_CODE_REPO}/blob/v${
+                              process.env.LIB_VERSION
+                            }/docs/data/material/templates/${templateId}/${templateName}.${
+                              item.codeVariant === 'TS' ? 'tsx' : 'js'
+                            }`,
+                          })
+                          .replaceContent((content) => {
+                            if (typeof content === 'string') {
+                              return content
+                                .replace(/\.\.\/shared-theme\//g, './theme/')
+                                .replace('./App', `./${templateName}`);
+                            }
+                            return content;
+                          })
+                          .openSandbox(`/${templateName}`)
+                      }
+                    >
+                      <SvgIcon viewBox="0 0 1080 1080">
+                        <path d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z" />
+                      </SvgIcon>
+                    </IconButton>
+                  </Tooltip>
+                  <Tooltip title="See source code">
+                    <IconButton component="a" href={layout.source} color="primary" size="small">
+                      <CodeRoundedIcon />
+                    </IconButton>
+                  </Tooltip>
+                </Box>
                 <Button
                   component="a"
                   href={layout.href}
                   size="small"
-                  fullWidth
                   variant="outlined"
-                  color="secondary"
+                  color="primary"
                   startIcon={<Visibility sx={{ mr: 0.5 }} />}
                   data-ga-event-category="material-ui-template"
                   data-ga-event-label={layout.title}
                   data-ga-event-action="preview-img"
+                  sx={{ alignSelf: 'self-start' }}
                 >
                   Live preview
                 </Button>
-                <Button
-                  component="a"
-                  href={layout.source}
-                  size="small"
-                  fullWidth
-                  variant="outlined"
-                  color="secondary"
-                  startIcon={<CodeRoundedIcon sx={{ mr: 0.5 }} />}
-                >
-                  Source code
-                </Button>
               </Box>
-            </Box>
-          </Card>
-        </Grid>
-      ))}
-    </Grid>
+            </Card>
+          </Box>
+        );
+      })}
+    </Box>
   );
 }