Merge branch 'master' into add-container-styles

.eslintrc.js

@@ -120,6 +120,10 @@ module.exports = /** @type {Config} */ ({
         variables: true,
       },
     ],
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      { vars: 'all', args: 'after-used', ignoreRestSiblings: true, argsIgnorePattern: '^_' },
+    ],
     'no-use-before-define': 'off',
 
     // disabled type-aware linting due to performance considerations

CHANGELOG.md

@@ -1,5 +1,53 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.1.9
+
+<!-- generated comparing v6.1.8..master -->
+
+_Nov 27, 2024_
+
+A big thanks to the 8 contributors who made this release possible.
+
+### `@mui/[email protected]`
+
+- [Select] Omit `placeholder` from props (#44502) @Juneezee
+- [Grid2] Add container class to `Grid2Classes` (#44562) @sai6855
+
+### `@mui/[email protected]`
+
+- Add ThemeProvider `noSsr` to prevent double rendering (#44451) @siriwatknp
+
+### `@mui/[email protected]`
+
+- [codemod] Fix handling of computed `paragraph` props (#44195) @joshkel
+
+### `@mui/[email protected]`
+
+- Make @pigment-css/react as peer dependency (#44498) @brijeshb42
+
+### Docs
+
+- [material-ui] Add missing required dependencies in dashboard template README (#44476) @mesqueeb
+- [material-ui] Add missing Roboto import to Next.js integration docs (#44462) @StaceyD22
+- [material-ui][Dialog] Fix padding in SimpleDialog demo (#44467) @oliviertassinari
+- Fix template page issues (#44466) @oliviertassinari
+- [examples] Add dark mode example for Material UI + Pigment CSS (#44480) @mnajdova
+
+### Core
+
+- Remove TODO line in the changelog (#44484) @mnajdova
+- Polish image display (418e888) @oliviertassinari
+- [core-infra] Add no-relative-packages (#44489) @oliviertassinari
+- [docs-infra] Support CSS variables API info (#44559) @mnajdova
+- [docs-infra] Fix display when ad-block triggers (#44567) @oliviertassinari
+- [docs-infra] Improve locator finding using visible option (#44541) @siriwatknp
+- [docs-infra] Correctly flatten the pages tree (#44514) @oliviertassinari
+- [docs-infra] Fix Sponsor design regression (#44515) @oliviertassinari
+- [test] Remove React.ReactElement<any> from describeConformance.tsx (#44318) @sai6855
+- [test] Do not enforce the presence of `ownerState.className` in `describeConformance` (#44479) @flaviendelangle
+
+All contributors of this release in alphabetical order: @brijeshb42, @flaviendelangle, @joshkel, @Juneezee, @mesqueeb, @mnajdova, @oliviertassinari, @sai6855, @siriwatknp, @StaceyD22
+
 ## v6.1.8
 
 <!-- generated comparing v6.1.7..master -->

docs/data/material/getting-started/templates/shared-theme/AppTheme.js

@@ -9,7 +9,8 @@ import { navigationCustomizations } from './customizations/navigation';
 import { surfacesCustomizations } from './customizations/surfaces';
 import { colorSchemes, typography, shadows, shape } from './themePrimitives';
 
-function AppTheme({ children, disableCustomTheme, themeComponents }) {
+function AppTheme(props) {
+  const { children, disableCustomTheme, themeComponents } = props;
   const theme = React.useMemo(() => {
     return disableCustomTheme
       ? {}

docs/data/material/getting-started/templates/shared-theme/AppTheme.tsx

@@ -17,11 +17,8 @@ interface AppThemeProps {
   themeComponents?: ThemeOptions['components'];
 }
 
-export default function AppTheme({
-  children,
-  disableCustomTheme,
-  themeComponents,
-}: AppThemeProps) {
+export default function AppTheme(props: AppThemeProps) {
+  const { children, disableCustomTheme, themeComponents } = props;
   const theme = React.useMemo(() => {
     return disableCustomTheme
       ? {}

docs/notifications.json

@@ -13,5 +13,10 @@
     "id": 83,
     "title": "Material UI v6 is out now",
     "text": "This major release includes CSS variables support, experimental opt-in CSS extraction, and many more improvements. Check out the <a style=\"color: inherit;\" data-ga-event-category=\"Announcement\" data-ga-event-action=\"notification\" data-ga-event-label=\"material-ui-v6\" href=\"https://mui.com/blog/material-ui-v6-is-out/\">announcement blog post</a>."
+  },
+  {
+    "id": 84,
+    "title": "Black Friday is here!",
+    "text": "Don&#39;t miss out on the best deals of the year—Mega Bundles with up to 90% off. Available for a limited time. <a style=\"color: inherit;\" data-ga-event-category=\"Announcement\" data-ga-event-action=\"notification\" data-ga-event-label=\"black-friday\" href=\"https://mui.com/store/bundles/\">Check the offers</a>!"
   }
 ]

docs/pages/joy-ui/api/stack.json

@@ -6,14 +6,16 @@
       "type": {
         "name": "union",
         "description": "'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'<br>&#124;&nbsp;Array&lt;'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'&gt;<br>&#124;&nbsp;object"
-      }
+      },
+      "default": "'column'"
     },
     "divider": { "type": { "name": "node" } },
     "spacing": {
       "type": {
         "name": "union",
         "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object<br>&#124;&nbsp;string"
-      }
+      },
+      "default": "0"
     },
     "sx": {
       "type": {
@@ -22,7 +24,7 @@
       },
       "additionalInfo": { "sx": true }
     },
-    "useFlexGap": { "type": { "name": "bool" } }
+    "useFlexGap": { "type": { "name": "bool" }, "default": "false" }
   },
   "name": "Stack",
   "imports": ["import Stack from '@mui/joy/Stack';", "import { Stack } from '@mui/joy';"],

docs/pages/material-ui/api/container.json

@@ -2,13 +2,14 @@
   "props": {
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "component": { "type": { "name": "elementType" } },
-    "disableGutters": { "type": { "name": "bool" } },
-    "fixed": { "type": { "name": "bool" } },
+    "disableGutters": { "type": { "name": "bool" }, "default": "false" },
+    "fixed": { "type": { "name": "bool" }, "default": "false" },
     "maxWidth": {
       "type": {
         "name": "union",
         "description": "'xs'<br>&#124;&nbsp;'sm'<br>&#124;&nbsp;'md'<br>&#124;&nbsp;'lg'<br>&#124;&nbsp;'xl'<br>&#124;&nbsp;false<br>&#124;&nbsp;string"
-      }
+      },
+      "default": "'lg'"
     },
     "sx": {
       "type": {

docs/pages/material-ui/api/grid-2.json

@@ -5,20 +5,22 @@
       "type": {
         "name": "union",
         "description": "Array&lt;number&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object"
-      }
+      },
+      "default": "12"
     },
     "columnSpacing": {
       "type": {
         "name": "union",
         "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object<br>&#124;&nbsp;string"
       }
     },
-    "container": { "type": { "name": "bool" } },
+    "container": { "type": { "name": "bool" }, "default": "false" },
     "direction": {
       "type": {
         "name": "union",
         "description": "'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'<br>&#124;&nbsp;Array&lt;'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'&gt;<br>&#124;&nbsp;object"
-      }
+      },
+      "default": "'row'"
     },
     "offset": {
       "type": {
@@ -42,13 +44,15 @@
       "type": {
         "name": "union",
         "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object<br>&#124;&nbsp;string"
-      }
+      },
+      "default": "0"
     },
     "wrap": {
       "type": {
         "name": "enum",
         "description": "'nowrap'<br>&#124;&nbsp;'wrap-reverse'<br>&#124;&nbsp;'wrap'"
-      }
+      },
+      "default": "'wrap'"
     }
   },
   "name": "Grid2",

docs/pages/material-ui/api/stack.json

@@ -6,14 +6,16 @@
       "type": {
         "name": "union",
         "description": "'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'<br>&#124;&nbsp;Array&lt;'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'&gt;<br>&#124;&nbsp;object"
-      }
+      },
+      "default": "'column'"
     },
     "divider": { "type": { "name": "node" } },
     "spacing": {
       "type": {
         "name": "union",
         "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object<br>&#124;&nbsp;string"
-      }
+      },
+      "default": "0"
     },
     "sx": {
       "type": {
@@ -22,7 +24,7 @@
       },
       "additionalInfo": { "sx": true }
     },
-    "useFlexGap": { "type": { "name": "bool" } }
+    "useFlexGap": { "type": { "name": "bool" }, "default": "false" }
   },
   "name": "Stack",
   "imports": ["import Stack from '@mui/material/Stack';", "import { Stack } from '@mui/material';"],

docs/pages/system/api/container.json

@@ -2,13 +2,14 @@
   "props": {
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "component": { "type": { "name": "elementType" } },
-    "disableGutters": { "type": { "name": "bool" } },
-    "fixed": { "type": { "name": "bool" } },
+    "disableGutters": { "type": { "name": "bool" }, "default": "false" },
+    "fixed": { "type": { "name": "bool" }, "default": "false" },
     "maxWidth": {
       "type": {
         "name": "union",
         "description": "'xs'<br>&#124;&nbsp;'sm'<br>&#124;&nbsp;'md'<br>&#124;&nbsp;'lg'<br>&#124;&nbsp;'xl'<br>&#124;&nbsp;false<br>&#124;&nbsp;string"
-      }
+      },
+      "default": "'lg'"
     },
     "sx": {
       "type": {

docs/pages/system/api/grid.json

@@ -5,20 +5,22 @@
       "type": {
         "name": "union",
         "description": "Array&lt;number&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object"
-      }
+      },
+      "default": "12"
     },
     "columnSpacing": {
       "type": {
         "name": "union",
         "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object<br>&#124;&nbsp;string"
       }
     },
-    "container": { "type": { "name": "bool" } },
+    "container": { "type": { "name": "bool" }, "default": "false" },
     "direction": {
       "type": {
         "name": "union",
         "description": "'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'<br>&#124;&nbsp;Array&lt;'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'&gt;<br>&#124;&nbsp;object"
-      }
+      },
+      "default": "'row'"
     },
     "offset": {
       "type": {
@@ -42,13 +44,15 @@
       "type": {
         "name": "union",
         "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object<br>&#124;&nbsp;string"
-      }
+      },
+      "default": "0"
     },
     "wrap": {
       "type": {
         "name": "enum",
         "description": "'nowrap'<br>&#124;&nbsp;'wrap-reverse'<br>&#124;&nbsp;'wrap'"
-      }
+      },
+      "default": "'wrap'"
     }
   },
   "name": "Grid",

docs/pages/system/api/stack.json

@@ -6,14 +6,16 @@
       "type": {
         "name": "union",
         "description": "'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'<br>&#124;&nbsp;Array&lt;'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'&gt;<br>&#124;&nbsp;object"
-      }
+      },
+      "default": "'column'"
     },
     "divider": { "type": { "name": "node" } },
     "spacing": {
       "type": {
         "name": "union",
         "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object<br>&#124;&nbsp;string"
-      }
+      },
+      "default": "0"
     },
     "sx": {
       "type": {
@@ -22,7 +24,7 @@
       },
       "additionalInfo": { "sx": true }
     },
-    "useFlexGap": { "type": { "name": "bool" } }
+    "useFlexGap": { "type": { "name": "bool" }, "default": "false" }
   },
   "name": "Stack",
   "imports": ["import Stack from '@mui/system/Stack';", "import { Stack } from '@mui/system';"],

docs/src/components/banner/AppFrameBanner.tsx

@@ -14,7 +14,11 @@ export default function AppFrameBanner() {
   // eslint-disable-next-line react-hooks/rules-of-hooks -- FEATURE_TOGGLE never changes
   const pageContext = React.useContext(PageContext);
   const productName = convertProductIdToName(pageContext) || 'MUI';
-  const message = `Influence ${productName}'s 2024 roadmap! Participate in the latest Developer Survey`;
+  const surveyMessage = `Influence ${productName}'s 2024 roadmap! Participate in the latest Developer Survey`;
+  const blackFridayMessage = `Black Friday is here! Don't miss out on the best offers of the year.`;
+
+  const showSurveyMessage = false;
+  const message = showSurveyMessage ? surveyMessage : blackFridayMessage;
 
   if (process.env.NODE_ENV !== 'production') {
     if (message.length > 100) {
@@ -26,7 +30,11 @@ export default function AppFrameBanner() {
 
   return (
     <Link
-      href="https://tally.so/r/3Ex4PN?source=docs-banner"
+      href={
+        showSurveyMessage
+          ? 'https://tally.so/r/3Ex4PN?source=website'
+          : 'https://mui.com/store/bundles/?deal=black-friday&from=docs'
+      }
       target="_blank"
       variant="caption"
       sx={[

docs/src/featureToggle.js

@@ -2,6 +2,6 @@
 module.exports = {
   enable_website_banner: false,
   enable_toc_banner: true,
-  enable_docsnav_banner: false,
+  enable_docsnav_banner: true,
   enable_job_banner: false,
 };

docs/src/modules/components/JoyThemeBuilder.tsx

@@ -1268,7 +1268,15 @@ function getAvailableTokens(colorSchemes: any, colorMode: 'light' | 'dark') {
   return tokens;
 }
 
-function TemplatesDialog({ children, data }: { children: React.ReactElement<any>; data: any }) {
+function TemplatesDialog({
+  children,
+  data,
+}: {
+  children: React.ReactElement<{
+    onClick?: React.MouseEventHandler;
+  }>;
+  data: any;
+}) {
   const [open, setOpen] = React.useState(false);
   const { map: templateMap } = sourceJoyTemplates();
   const renderItem = (name: string, item: TemplateData) => {
@@ -1339,9 +1347,9 @@ function TemplatesDialog({ children, data }: { children: React.ReactElement<any>
   return (
     <React.Fragment>
       {React.cloneElement(children, {
-        onClick: () => {
+        onClick: (event: React.MouseEvent) => {
           setOpen(true);
-          children.props.onClick?.();
+          children.props.onClick?.(event);
         },
       })}
       <Modal open={open} onClose={() => setOpen(false)}>

examples/material-ui-nextjs-pages-router-ts/README.md

@@ -41,6 +41,11 @@ If you prefer, you can [use styled-components instead](https://mui.com/material-
 The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs-pages-router-ts) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/pages/api-reference/components/link) with Material UI.
 More information [in the documentation](https://mui.com/material-ui/integrations/routing/#next-js-pages-router).
 
+## Upgrading to Next.js 15
+
+This example uses Next.js 14.
+To upgrade to version 15, please follow the [official upgrade guide](https://nextjs.org/docs/app/building-your-application/upgrading/version-15) in the Next.js docs.
+
 ## What's next?
 
 <!-- #default-branch-switch -->