Merge branch 'master' of https://github.com/mui/material-ui into joy/…

…theme-builder
mui · Mar 22, 2023 · eb73839 · eb73839
2 parents 47c013f + 3b7e93f
commit eb73839
Show file tree

Hide file tree

Showing 41 changed files with 874 additions and 992 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,73 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.11.14
+
+<!-- generated comparing v5.11.13..master -->
+
+_Mar 21, 2023_
+
+A big thanks to the 15 contributors who made this release possible.
+This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.11.14`
+
+- [Breadcrumbs] Add ability to change icon used in `BreadcrumbCollapsed` through slots (#33812) @pratikkarad
+- [Stepper] Add aria-current to active StepButton (#36526) @michalak111
+- [TabScrollButton] Add ability to change left and right icons (#33863) @pratikkarad
+- [ListItemButton] Respect LinkComponent (#34159) @zaverden
+- [l10n] Add Central Kurdish (ku-CKB) locale (#36592) @HediMuhamad
+
+### `@mui/system@5.11.14`
+
+- [system] Fix sx prop regression for fontWeight values (#36543) @mnajdova
+
+### `@mui/base@5.0.0-alpha.121`
+
+- [docs][base] Improve the Slots Table in API docs (#36330) @hbjORbj
+
+### `@mui/joy@5.0.0-alpha.72`
+
+- [Joy] Ensure new CSS variable naming is everywhere (#36460) @hbjORbj
+- [Menu][joy] Classname listbox is missing (#36520) @hbjORbj
+- [Joy] Fix `--List-decorator*` vars (#36595) @siriwatknp
+
+### `@mui/lab@5.0.0-alpha.124`
+
+- [Masonry] Include Masonry in theme augmentation interface (#36533) @hbjORbj
+
+### Docs
+
+- [blog] Post blog about Chamonix retreat to the website (#36517) @mikailaread
+- [blog] Fix image layout shift (#36522) @oliviertassinari
+- [docs] Use `theme.applyDarkStyles` for the rest of the docs (#36161) @siriwatknp
+- [docs] Fix 301 and 404 links (#36555) @oliviertassinari
+- [docs] Keep slot code order in API docs (#36499) @oliviertassinari
+- [docs] Missing className on Migrating from JSS example (#36536) @gabrielnafuzi
+- [docs] Fix function name for Joy templates (#36512) @hbjORbj
+- [docs] Add multiline Chip example (#36437) @dav1app
+- [docs] Add a new gold sponsor (#36518) @hbjORbj
+- [docs][joy] Improve the Slots Table in API docs (#36328) @hbjORbj
+- [docs] Fix virtualElement demo for Popper (#36320) @sai6855
+- [docs] Fix typo in API docs (#36388) @RomanHotsiy
+- [docs] Ensure classname displayed under Slots section in API docs exists (#36539) @hbjORbj
+- [docs][joy] Build TS versions for Modal component demos (#36385) @varunmulay22
+- [docs][joy] Build TS versions for Menu component demos (#36383) @varunmulay22
+- [docs][joy] Build TS versions for Switch component demos (#36379) @varunmulay22
+- [docs] Remove `shouldSkipGeneratingVar` usage (#36581) @siriwatknp
+- [docs][material] Update Table's demo to show pointer cursor on clickable rows (#36546) @varunmulay22
+- [website] Designer role changes (#36528) @danilo-leal
+- [website] No association between showcase and MUI @oliviertassinari
+- [website] Open Head of Operations role (#36501) @oliviertassinari
+- [website] Limit sponsors description to two rows @oliviertassinari
+
+### Core
+
+- [core] Fix CI @oliviertassinari
+- [core] Fix blank line @oliviertassinari
+- [website] Simplify internal ops @oliviertassinari
+
+All contributors of this release in alphabetical order: @danilo-leal, @dav1app, @gabrielnafuzi, @hbjORbj, @HediMuhamad, @michalak111, @mikailaread, @mnajdova, @oliviertassinari, @pratikkarad, @RomanHotsiy, @sai6855, @siriwatknp, @varunmulay22, @zaverden
+
 ## 5.11.13
 
 <!-- generated comparing v5.11.12..master -->

diff --git a/benchmark/package.json b/benchmark/package.json
@@ -15,9 +15,9 @@
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@mdx-js/react": "^2.3.0",
-    "@mui/material": "^5.11.13",
+    "@mui/material": "^5.11.14",
     "@mui/styles": "^5.11.13",
-    "@mui/system": "^5.11.13",
+    "@mui/system": "^5.11.14",
     "@styled-system/css": "^5.1.5",
     "benchmark": "^2.1.4",
     "playwright": "^1.31.2",

diff --git a/docs/package.json b/docs/package.json
@@ -31,18 +31,18 @@
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@mui/base": "5.0.0-alpha.121",
+    "@mui/base": "5.0.0-alpha.122",
     "@mui/docs": "^5.11.13",
     "@mui/icons-material": "^5.11.11",
-    "@mui/joy": "5.0.0-alpha.71",
-    "@mui/lab": "5.0.0-alpha.123",
+    "@mui/joy": "5.0.0-alpha.72",
+    "@mui/lab": "5.0.0-alpha.124",
     "@mui/markdown": "^5.0.0",
-    "@mui/material": "^5.11.13",
-    "@mui/material-next": "6.0.0-alpha.78",
+    "@mui/material": "^5.11.14",
+    "@mui/material-next": "6.0.0-alpha.79",
     "@mui/styled-engine": "^5.11.11",
     "@mui/styled-engine-sc": "^5.11.11",
     "@mui/styles": "^5.11.13",
-    "@mui/system": "^5.11.13",
+    "@mui/system": "^5.11.14",
     "@mui/types": "^7.2.3",
     "@mui/x-data-grid": "6.0.0-alpha.14",
     "@mui/x-data-grid-generator": "6.0.0-alpha.14",

diff --git a/docs/src/components/banner/AppFrameBanner.tsx b/docs/src/components/banner/AppFrameBanner.tsx
@@ -9,36 +9,35 @@ export default function AppFrameBanner() {
       href="https://mui.com/blog/mui-x-v6/"
       target="_blank"
       variant="caption"
-      sx={[
-        (theme) => ({
-          display: { xs: 'none', lg: 'block' },
-          p: 1,
-          maxHeight: '34px',
-          backgroundColor: (theme.vars || theme).palette.primary[50],
-          border: '1px solid',
-          borderColor: (theme.vars || theme).palette.grey[200],
-          borderRadius: 1,
-          transitionProperty: 'all',
-          transitionTiming: 'cubic-bezier(0.4, 0, 0.2, 1)',
-          transitionDuration: '150ms',
-          color: (theme.vars || theme).palette.primary[600],
-          fontWeight: 'medium',
-          '&:hover, &:focus-visible': {
-            backgroundColor: alpha(theme.palette.primary[100], 0.4),
-            borderColor: (theme.vars || theme).palette.primary[200],
-          },
-        }),
-        (theme) =>
-          theme.applyDarkStyles({
-            backgroundColor: alpha(theme.palette.primary[900], 0.3),
-            borderColor: (theme.vars || theme).palette.primaryDark[700],
-            color: (theme.vars || theme).palette.primary[100],
-            '&:hover, &:focus-visible': {
-              backgroundColor: alpha(theme.palette.primary[900], 0.6),
-              borderColor: (theme.vars || theme).palette.primaryDark[500],
-            },
-          }),
-      ]}
+      sx={(theme) => ({
+        display: { xs: 'none', lg: 'block' },
+        p: 1,
+        maxHeight: '34px',
+        backgroundColor:
+          theme.palette.mode === 'dark'
+            ? alpha(theme.palette.primary[900], 0.3)
+            : theme.palette.primary[50],
+        border: '1px solid',
+        borderColor:
+          theme.palette.mode === 'dark' ? theme.palette.primaryDark[700] : theme.palette.grey[200],
+        borderRadius: 1,
+        transitionProperty: 'all',
+        transitionTiming: 'cubic-bezier(0.4, 0, 0.2, 1)',
+        transitionDuration: '150ms',
+        color:
+          theme.palette.mode === 'dark' ? theme.palette.primary[100] : theme.palette.primary[600],
+        fontWeight: 'medium',
+        '&:hover, &:focus-visible': {
+          backgroundColor:
+            theme.palette.mode === 'dark'
+              ? alpha(theme.palette.primary[900], 0.6)
+              : alpha(theme.palette.primary[100], 0.4),
+          borderColor:
+            theme.palette.mode === 'dark'
+              ? theme.palette.primaryDark[500]
+              : theme.palette.primary[200],
+        },
+      })}
     >
       🚀 MUI X v6 is out! Discover what&apos;s new and get started now!
       <br />

diff --git a/docs/src/components/banner/TableOfContentsBanner.tsx b/docs/src/components/banner/TableOfContentsBanner.tsx
@@ -10,32 +10,29 @@ export default function TableOfContentsBanner() {
     <Link
       href="https://war.ukraine.ua/support-ukraine/"
       target="_blank"
-      sx={[
-        (theme) => ({
-          mb: 2,
-          display: 'flex',
-          flexDirection: 'column',
-          overflow: 'auto',
-          backgroundColor: alpha(theme.palette.grey[50], 0.4),
-          border: '1px solid',
-          borderColor: (theme.vars || theme).palette.grey[200],
-          borderRadius: 1,
-          transitionProperty: 'all',
-          transitionTiming: 'cubic-bezier(0.4, 0, 0.2, 1)',
-          transitionDuration: '150ms',
-          '&:hover, &:focus-visible': {
-            borderColor: (theme.vars || theme).palette.primary[200],
-          },
-        }),
-        (theme) =>
-          theme.applyDarkStyles({
-            backgroundColor: alpha(theme.palette.primary[900], 0.2),
-            borderColor: (theme.vars || theme).palette.primaryDark[700],
-            '&:hover, &:focus-visible': {
-              borderColor: (theme.vars || theme).palette.primaryDark[500],
-            },
-          }),
-      ]}
+      sx={(theme) => ({
+        mb: 2,
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'auto',
+        backgroundColor:
+          theme.palette.mode === 'dark'
+            ? alpha(theme.palette.primary[900], 0.2)
+            : alpha(theme.palette.grey[50], 0.4),
+        border: '1px solid',
+        borderColor:
+          theme.palette.mode === 'dark' ? theme.palette.primaryDark[700] : theme.palette.grey[200],
+        borderRadius: 1,
+        transitionProperty: 'all',
+        transitionTiming: 'cubic-bezier(0.4, 0, 0.2, 1)',
+        transitionDuration: '150ms',
+        '&:hover, &:focus-visible': {
+          borderColor:
+            theme.palette.mode === 'dark'
+              ? theme.palette.primaryDark[500]
+              : theme.palette.primary[200],
+        },
+      })}
     >
       <Box sx={{ width: '100%' }}>
         <Box sx={{ height: '12px', backgroundColor: '#0057b7' }} />

diff --git a/docs/src/components/home/AdvancedShowcase.tsx b/docs/src/components/home/AdvancedShowcase.tsx
@@ -1687,28 +1687,23 @@ export default function DataTable() {
       preview={
         <Paper
           variant="outlined"
-          sx={(theme) => ({
+          sx={{
             overflow: 'hidden',
             width: '100%',
             boxShadow: '0px 4px 20px rgba(61, 71, 82, 0.25)',
-            bgcolor: '#fff',
-            ...theme.applyDarkStyles({
-              bgcolor: 'primaryDark.800',
-            }),
-          })}
+            bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.800' : '#fff'),
+          }}
         >
           <XGridGlobalStyles />
           <Box
-            sx={(theme) => ({
+            sx={{
               textAlign: 'center',
               py: 1,
               position: 'relative',
               borderBottom: '1px solid',
-              borderColor: 'grey.100',
-              ...theme.applyDarkStyles({
-                borderColor: 'primaryDark.600',
-              }),
-            })}
+              borderColor: (theme) =>
+                theme.palette.mode === 'dark' ? 'primaryDark.600' : 'grey.100',
+            }}
           >
             <Typography color="primary.main" fontWeight={700}>
               Trades, October 2020

diff --git a/docs/src/components/home/NewsletterToast.tsx b/docs/src/components/home/NewsletterToast.tsx
@@ -41,7 +41,7 @@ export default function NewsletterToast() {
         <Card
           variant="outlined"
           role="alert"
-          sx={(theme) => ({
+          sx={{
             p: 1,
             position: 'absolute',
             left: '50%',
@@ -50,11 +50,11 @@ export default function NewsletterToast() {
             transition: '0.5s',
             display: 'flex',
             alignItems: 'center',
-            boxShadow: '0px 4px 20px rgba(61, 71, 82, 0.25)',
-            ...theme.applyDarkStyles({
-              boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.6)',
-            }),
-          })}
+            boxShadow: (theme) =>
+              theme.palette.mode === 'dark'
+                ? '0px 4px 20px rgba(0, 0, 0, 0.6)'
+                : '0px 4px 20px rgba(61, 71, 82, 0.25)',
+          }}
         >
           <MarkEmailReadTwoTone color="success" sx={{ mx: 0.5 }} />
           <div>

diff --git a/docs/src/components/home/ShowcaseContainer.tsx b/docs/src/components/home/ShowcaseContainer.tsx
@@ -29,51 +29,40 @@ export default function ShowcaseContainer({
       >
         <Paper
           variant="outlined"
-          sx={[
-            {
-              display: 'flex',
-              position: 'relative',
-              minHeight: 220,
-              justifyContent: 'center',
-              alignItems: 'center',
-              p: 2,
-              bgcolor: 'grey.100',
-              borderColor: 'grey.300',
-              borderBottomLeftRadius: 0,
-              borderBottomRightRadius: 0,
-            },
-            (theme) =>
-              theme.applyDarkStyles({
-                bgcolor: 'primaryDark.700',
-                borderColor: 'primaryDark.600',
-              }),
-            ...(Array.isArray(previewSx) ? previewSx : [previewSx]),
-          ]}
+          sx={{
+            display: 'flex',
+            position: 'relative',
+            minHeight: 220,
+            justifyContent: 'center',
+            alignItems: 'center',
+            p: 2,
+            bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.700' : 'grey.100'),
+            borderColor: (theme) =>
+              theme.palette.mode === 'dark' ? 'primaryDark.600' : 'grey.300',
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0,
+            ...previewSx,
+          }}
         >
           {preview}
         </Paper>
         <Box
-          sx={[
-            {
-              flexGrow: 0,
-              display: 'flex',
-              flexDirection: 'column',
-              maxWidth: '100%',
-              position: 'relative',
-              minHeight: 200,
-              borderWidth: '0 1px 1px 1px',
-              borderStyle: 'solid',
-              borderColor: 'primaryDark.900',
-              bgcolor: 'primaryDark.800',
-              borderBottomLeftRadius: 10,
-              borderBottomRightRadius: 10,
-            },
-            (theme) =>
-              theme.applyDarkStyles({
-                borderColor: 'primaryDark.700',
-              }),
-            ...(Array.isArray(codeSx) ? codeSx : [codeSx]),
-          ]}
+          sx={{
+            flexGrow: 0,
+            display: 'flex',
+            flexDirection: 'column',
+            maxWidth: '100%',
+            position: 'relative',
+            minHeight: 200,
+            borderWidth: '0 1px 1px 1px',
+            borderStyle: 'solid',
+            borderColor: (theme) =>
+              theme.palette.mode === 'dark' ? 'primaryDark.700' : 'primaryDark.900',
+            bgcolor: 'primaryDark.800',
+            borderBottomLeftRadius: 10,
+            borderBottomRightRadius: 10,
+            ...codeSx,
+          }}
         >
           <NoSsr>{code}</NoSsr>
         </Box>