@mui/docs 6.0.0-beta.3 → 6.0.0-beta.4

package/Ad/ad.styles.js

@@ -0,0 +1,89 @@
+import { alpha } from '@mui/material/styles';
+export const adBodyImageStyles = theme => ({
+  root: {
+    display: 'block',
+    overflow: 'hidden',
+    border: '1px dashed',
+    borderColor: theme.palette.divider,
+    borderRadius: theme.shape.borderRadius,
+    padding: '8px 8px 8px calc(8px + 130px)',
+    [theme.breakpoints.up('sm')]: {
+      padding: '12px 12px 12px calc(12px + 130px)'
+    }
+  },
+  imgWrapper: {
+    float: 'left',
+    marginLeft: -130,
+    width: 130,
+    height: 100
+  },
+  img: {
+    verticalAlign: 'middle'
+  },
+  a: {
+    color: theme.palette.text.primary,
+    textDecoration: 'none'
+  },
+  description: {
+    ...theme.typography.body2,
+    [theme.breakpoints.up('sm')]: {
+      ...theme.typography.body1
+    },
+    display: 'block',
+    marginLeft: theme.spacing(1.5)
+  },
+  poweredby: {
+    ...theme.typography.caption,
+    marginLeft: theme.spacing(1.5),
+    color: theme.palette.text.secondary,
+    display: 'block',
+    marginTop: theme.spacing(0.5),
+    fontWeight: theme.typography.fontWeightRegular
+  }
+});
+export const adBodyInlineStyles = theme => {
+  const baseline = adBodyImageStyles(theme);
+  return {
+    ...baseline,
+    root: {
+      display: 'block',
+      paddingTop: 8
+    },
+    imgWrapper: {
+      display: 'none'
+    },
+    description: {
+      ...baseline.description,
+      marginLeft: 0,
+      '&::before': {
+        border: '1px solid #3e8e41',
+        color: '#3e8e41',
+        marginRight: 6,
+        padding: '1px 5px',
+        borderRadius: 3,
+        content: '"Ad"',
+        fontSize: theme.typography.pxToRem(14)
+      },
+      '&::after': {
+        // Link
+        marginLeft: 4,
+        content: '"Get started"',
+        // Style taken from the Link component & MarkdownElement.
+        color: theme.palette.primary[600],
+        textDecoration: 'underline',
+        textDecorationColor: alpha(theme.palette.primary.main, 0.4),
+        ...theme.applyStyles('dark', {
+          color: theme.palette.primary[300]
+        })
+      }
+    },
+    poweredby: {
+      ...baseline.poweredby,
+      marginTop: 2,
+      marginLeft: 0
+    },
+    link: {
+      display: 'none'
+    }
+  };
+};

package/Ad/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Ad';
+export * from './AdManager';
+export * from './AdProvider';
+export * from './AdGuest';
+export { AdCarbonInline } from './AdCarbon';

package/Ad/index.js

@@ -0,0 +1,7 @@
+/// <reference types="gtag.js" />
+
+export * from './Ad';
+export * from './AdManager';
+export * from './AdProvider';
+export * from './AdGuest';
+export { AdCarbonInline } from './AdCarbon';

package/Ad/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Ad/index.js",
+  "types": "./index.d.ts"
+}

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.0.0-beta.4
+
+<!-- generated comparing v6.0.0-beta.3..next -->
+
+_Jul 30, 2024_
+
+A big thanks to the 12 contributors who made this release possible.
+
+### `@mui/material@6.0.0-beta.4`
+
+- [Accordion] Render a heading wrapping `AccordionSummary` button per W3C Accordion Pattern standards (#42914) @ZeeshanTamboli
+- [Divider] Enable borderStyle enhancement in divider with children (#42715) @anuujj
+- [ImageListItemBar] Deprecate composed classes (#42905) @sai6855
+- Attach selector for default color scheme (#43035) @siriwatknp
+- Stabilize Grid v2 and deprecate Grid v1 (#43054) @DiegoAndai
+
+### `@mui/system@6.0.0-beta.4`
+
+- Make `createBreakpoints` independent for stringify theme (#43048) @siriwatknp
+
+### `@mui/utils@6.0.0-beta.4`
+
+- Fix issues reported by the React Compiler (#43051) @markliu2013
+
+### Docs
+
+- [material-ui] Replace deprecated `<ListItem button/>` with `ListItemButton` component in routing libraries list example (#43110) @aliharis99
+- [material-ui][Card] Update CardMedia description (#43067) @shahzaibdev1
+- [material-ui] Polish out data table demo (#43072) @zanivan
+- [material-ui][Snackbar] Improve reason type in demos (#43077) @sai6855
+- [pigment-css] Fix syntax in migrating-to-pigment-css guide (#43107) @KevinVandy
+- Fix page description line break @oliviertassinari
+
+### Core
+
+- Fix event naming convention @oliviertassinari
+- [docs-infra] Move ads to the `@mui/docs` package (#42944) @alexfauquette
+- [website] Fine-tune button styles on the branding theme (#43082) @zanivan
+
+All contributors of this release in alphabetical order: @alexfauquette, @aliharis99, @anuujj, @DiegoAndai, @KevinVandy, @markliu2013, @oliviertassinari, @sai6855, @shahzaibdev1, @siriwatknp, @zanivan, @ZeeshanTamboli
+
 ## 6.0.0-beta.3
 
 <!-- generated comparing v6.0.0-beta.2..next -->

package/DocsProvider/DocsProvider.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Translations } from '../i18n';
+import { AdConfig } from '../Ad';
 export interface DocsConfig {
     LANGUAGES: string[];
     LANGUAGES_SSR: string[];
@@ -8,9 +9,10 @@ export interface DocsConfig {
 }
 export interface DocsProviderProps {
     config: DocsConfig;
+    adConfig?: Partial<AdConfig>;
     defaultUserLanguage: string;
     children?: React.ReactNode;
     translations?: Translations;
 }
-export declare function DocsProvider({ config, defaultUserLanguage, translations, children, }: DocsProviderProps): React.JSX.Element;
+export declare function DocsProvider({ config, adConfig, defaultUserLanguage, translations, children, }: DocsProviderProps): React.JSX.Element;
 export declare function useDocsConfig(): DocsConfig;

package/DocsProvider/DocsProvider.js

@@ -1,19 +1,24 @@
 import * as React from 'react';
 import { UserLanguageProvider } from '../i18n';
+import { AdProvider } from '../Ad';
 import { jsx as _jsx } from "react/jsx-runtime";
 const DocsConfigContext = /*#__PURE__*/React.createContext(null);
 export function DocsProvider({
   config,
+  adConfig,
   defaultUserLanguage,
   translations,
   children
 }) {
   return /*#__PURE__*/_jsx(DocsConfigContext.Provider, {
     value: config,
-    children: /*#__PURE__*/_jsx(UserLanguageProvider, {
-      defaultUserLanguage: defaultUserLanguage,
-      translations: translations,
-      children: children
+    children: /*#__PURE__*/_jsx(AdProvider, {
+      config: adConfig,
+      children: /*#__PURE__*/_jsx(UserLanguageProvider, {
+        defaultUserLanguage: defaultUserLanguage,
+        translations: translations,
+        children: children
+      })
     })
   });
 }

package/branding/brandingTheme.js

@@ -438,9 +438,9 @@ export function getThemedComponents() {
             transition: 'all 120ms ease-in',
             ...(ownerState.size === 'large' && {
               ...theme.typography.body1,
-              lineHeight: 21 / 16,
-              padding: theme.spacing('8px', '10px', '10px', '12px'),
+              lineHeight: 1.5,
               fontWeight: theme.typography.fontWeightMedium,
+              padding: theme.spacing('8px', '12px', '8px', '14px'),
               borderRadius: 10,
               '& > span': {
                 transition: '0.2s',
@@ -452,9 +452,10 @@ export function getThemedComponents() {
             }),
             ...(ownerState.size === 'medium' && {
               fontSize: defaultTheme.typography.pxToRem(15),
-              padding: theme.spacing('8px', '12px', '8px', '14px'),
               fontWeight: theme.typography.fontWeightMedium,
-              borderRadius: 8,
+              lineHeight: 1.25,
+              padding: theme.spacing('8px', '10px', '10px', '12px'),
+              borderRadius: 10,
               '& > span': {
                 transition: '0.2s',
                 marginLeft: 4
@@ -464,11 +465,11 @@ export function getThemedComponents() {
               }
             }),
             ...(ownerState.size === 'small' && {
-              padding: '6px 8px',
+              padding: '6px 10px',
               fontFamily: theme.typography.fontFamily,
               fontSize: defaultTheme.typography.pxToRem(13),
               fontWeight: theme.typography.fontWeightMedium,
-              borderRadius: 8,
+              borderRadius: 10,
               '& .MuiButton-startIcon': {
                 transition: '0.15s',
                 marginRight: 4,
@@ -491,18 +492,24 @@ export function getThemedComponents() {
               color: (theme.vars || theme).palette.text.primary,
               backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
               borderColor: (theme.vars || theme).palette.primaryDark[100],
-              boxShadow: `#FFF 0 1px 0 inset, ${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+              boxShadow: `#FFF 0 1px 0 1px inset, ${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 1px inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
               '&:hover': {
                 backgroundColor: (theme.vars || theme).palette.grey[50]
               },
+              '&:active': {
+                backgroundColor: (theme.vars || theme).palette.grey[100]
+              },
               ...theme.applyDarkStyles({
                 color: (theme.vars || theme).palette.primaryDark[100],
                 borderColor: alpha(theme.palette.primaryDark[600], 0.5),
                 backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
-                boxShadow: `${alpha(theme.palette.primaryDark[600], 0.3)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
+                boxShadow: `${alpha(theme.palette.primaryDark[700], 0.3)} 0 1px 0 1px inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 1px inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
                 '&:hover': {
                   backgroundColor: (theme.vars || theme).palette.primaryDark[700],
                   borderColor: (theme.vars || theme).palette.primaryDark[600]
+                },
+                '&:active': {
+                  backgroundColor: (theme.vars || theme).palette.primaryDark[800]
                 }
               })
             }),
@@ -510,19 +517,25 @@ export function getThemedComponents() {
               color: (theme.vars || theme).palette.primary[600],
               backgroundColor: alpha(theme.palette.primary[50], 0.2),
               borderColor: (theme.vars || theme).palette.primary[100],
-              boxShadow: `${alpha(theme.palette.primary[50], 0.8)} 0 2px 0 inset, ${alpha(theme.palette.primary[100], 0.4)} 0 -2px 0 inset, ${alpha(theme.palette.primary[100], 0.5)} 0 1px 2px 0`,
+              boxShadow: `${alpha(theme.palette.primary[100], 0.4)} 0 -1px 0 1px inset, ${alpha(theme.palette.primary[100], 0.5)} 0 1px 2px 0`,
               '&:hover': {
                 backgroundColor: (theme.vars || theme).palette.primary[50],
                 borderColor: (theme.vars || theme).palette.primary[200]
               },
+              '&:active': {
+                backgroundColor: alpha(theme.palette.primary[100], 0.7)
+              },
               ...theme.applyDarkStyles({
                 color: (theme.vars || theme).palette.primary[200],
                 borderColor: alpha(theme.palette.primary[900], 0.7),
                 backgroundColor: alpha(theme.palette.primary[900], 0.2),
-                boxShadow: `${alpha(theme.palette.primary[900], 0.2)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
+                boxShadow: `${alpha(theme.palette.primary[900], 0.2)} 0 1px 0 1px inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 1px inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
                 '&:hover': {
-                  backgroundColor: (theme.vars || theme).palette.primary[900],
-                  borderColor: (theme.vars || theme).palette.primary[700]
+                  backgroundColor: alpha(theme.palette.primary[900], 0.5),
+                  borderColor: (theme.vars || theme).palette.primary[900]
+                },
+                '&:active': {
+                  backgroundColor: alpha(theme.palette.primary[900], 0.3)
                 }
               })
             }),
@@ -530,13 +543,36 @@ export function getThemedComponents() {
               color: '#fff',
               textShadow: `0 1px 1px ${alpha(theme.palette.common.black, 0.6)}`,
               backgroundColor: (theme.vars || theme).palette.primary[500],
-              backgroundImage: `linear-gradient(180deg, ${alpha(theme.palette.primary[500], 0.6)} 0%, ${theme.palette.primary[600]} 100%)`,
-              boxShadow: `${theme.palette.primary[400]} 0 2px 0 inset, ${theme.palette.primary[700]} 0 -2px 0 inset, ${alpha(theme.palette.common.black, 0.1)} 0 2px 4px 0`,
+              backgroundImage: 'transparent',
+              border: '1px solid ',
+              borderColor: (theme.vars || theme).palette.primary[600],
+              boxShadow: `${alpha(theme.palette.primary[400], 0.5)} 0 1px 0 inset, ${alpha(theme.palette.primary[800], 0.4)} 0 -1px 0 1px inset, ${alpha(theme.palette.common.black, 0.1)} 0 2px 4px 0`,
               '&:hover': {
-                backgroundColor: (theme.vars || theme).palette.primary[700]
+                backgroundColor: (theme.vars || theme).palette.primary[700],
+                borderColor: (theme.vars || theme).palette.primary[800]
               },
               '&:active': {
-                backgroundColor: (theme.vars || theme).palette.primaryDark[700]
+                backgroundColor: (theme.vars || theme).palette.primary[800],
+                borderColor: (theme.vars || theme).palette.primary[600],
+                boxShadow: `${alpha(theme.palette.primary[900], 0.7)} 0 1px 0 1px inset`
+              }
+            }),
+            ...(ownerState.variant === 'contained' && ownerState.color === 'secondary' && {
+              color: '#fff',
+              textShadow: `0 1px 1px ${alpha(theme.palette.common.black, 0.6)}`,
+              backgroundColor: (theme.vars || theme).palette.primaryDark[500],
+              backgroundImage: 'transparent',
+              border: '1px solid ',
+              borderColor: (theme.vars || theme).palette.primaryDark[600],
+              boxShadow: `${alpha(theme.palette.primaryDark[400], 0.5)} 0 1px 0 1px inset, ${alpha(theme.palette.primaryDark[800], 0.7)} 0 -1px 0 1px inset, ${alpha(theme.palette.common.black, 0.1)} 0 2px 4px 0`,
+              '&:hover': {
+                backgroundColor: (theme.vars || theme).palette.primaryDark[600],
+                borderColor: (theme.vars || theme).palette.primaryDark[700]
+              },
+              '&:active': {
+                backgroundColor: (theme.vars || theme).palette.primaryDark[700],
+                borderColor: (theme.vars || theme).palette.primaryDark[600],
+                boxShadow: `${alpha(theme.palette.primaryDark[900], 0.7)} 0 1px 0 1px inset`
               }
             }),
             ...(ownerState.variant === 'text' && ownerState.color === 'secondary' && {
@@ -558,8 +594,20 @@ export function getThemedComponents() {
             }),
             ...(ownerState.variant === 'text' && ownerState.color === 'primary' && {
               color: (theme.vars || theme).palette.primary[600],
+              '&:hover': {
+                backgroundColor: alpha(theme.palette.primary[100], 0.3)
+              },
+              '&:active': {
+                backgroundColor: alpha(theme.palette.primary[100], 0.5)
+              },
               ...theme.applyDarkStyles({
-                color: (theme.vars || theme).palette.primary[300]
+                color: (theme.vars || theme).palette.primary[300],
+                '&:hover': {
+                  backgroundColor: alpha(theme.palette.primary[900], 0.3)
+                },
+                '&:active': {
+                  backgroundColor: alpha(theme.palette.primary[900], 0.1)
+                }
               })
             })
           })
@@ -713,6 +761,12 @@ export function getThemedComponents() {
                 background: alpha(theme.palette.primaryDark[700], 0.8)
               })
             },
+            '&:active': {
+              background: (theme.vars || theme).palette.grey[100],
+              ...theme.applyDarkStyles({
+                background: theme.palette.primaryDark[800]
+              })
+            },
             ...(ownerState.size === 'small' && {
               height: 32,
               width: 32,
@@ -735,7 +789,11 @@ export function getThemedComponents() {
             boxShadow: `#FFF 0 1px 0 inset, ${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
             '&:hover': {
               borderColor: (theme.vars || theme).palette.grey[300],
-              background: (theme.vars || theme).palette.grey[50]
+              background: (theme.vars || theme).palette.grey[50],
+              boxShadow: `${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`
+            },
+            '&:active': {
+              background: (theme.vars || theme).palette.grey[100]
             }
           }, theme.applyDarkStyles({
             color: (theme.vars || theme).palette.primary[300],
@@ -744,7 +802,11 @@ export function getThemedComponents() {
             boxShadow: `${alpha(theme.palette.primaryDark[600], 0.3)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
             '&:hover': {
               borderColor: (theme.vars || theme).palette.primaryDark[600],
-              background: alpha(theme.palette.primaryDark[700], 0.8)
+              background: alpha(theme.palette.primaryDark[700], 0.8),
+              boxShadow: `${(theme.vars || theme).palette.common.black} 0 1px 2px 0`
+            },
+            '&:active': {
+              background: theme.palette.primaryDark[800]
             }
           })]
         }, {
@@ -761,7 +823,11 @@ export function getThemedComponents() {
             '&:hover': {
               color: (theme.vars || theme).palette.text.primary,
               borderColor: (theme.vars || theme).palette.grey[300],
-              background: (theme.vars || theme).palette.grey[50]
+              background: (theme.vars || theme).palette.grey[50],
+              boxShadow: `${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`
+            },
+            '&:active': {
+              background: (theme.vars || theme).palette.grey[100]
             }
           }, theme.applyDarkStyles({
             borderColor: alpha(theme.palette.primaryDark[600], 0.5),
@@ -769,7 +835,11 @@ export function getThemedComponents() {
             boxShadow: `${alpha(theme.palette.primaryDark[600], 0.3)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
             '&:hover': {
               borderColor: (theme.vars || theme).palette.primaryDark[600],
-              background: alpha(theme.palette.primaryDark[700], 0.8)
+              background: alpha(theme.palette.primaryDark[700], 0.8),
+              boxShadow: `${(theme.vars || theme).palette.common.black} 0 1px 2px 0`
+            },
+            '&:active': {
+              background: theme.palette.primaryDark[800]
             }
           })]
         }]
@@ -1332,6 +1402,24 @@ export function getThemedComponents() {
             // scrollbarGutter: 'stable',
           }
         }
+      },
+      MuiCard: {
+        styleOverrides: {
+          root: ({
+            theme,
+            ownerState
+          }) => ({
+            ...(ownerState.variant === 'elevation' && {
+              border: '1px solid',
+              borderColor: (theme.vars || theme).palette.grey[100],
+              boxShadow: `${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[300], 0.5)} 0 1px 8px 0`,
+              ...theme.applyDarkStyles({
+                borderColor: (theme.vars || theme).palette.primaryDark[700],
+                boxShadow: `${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 8px 0`
+              })
+            })
+          })
+        }
       }
     }
   };