Merge branch 'master' into fix-key-warning-docs-base-ui-slider-slots

mui · Sep 14, 2023 · c2ed6a3 · c2ed6a3
2 parents f9a2566 + b59570b
commit c2ed6a3
Show file tree

Hide file tree

Showing 51 changed files with 69 additions and 70 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -689,9 +689,9 @@ jobs:
                 value: << pipeline.git.branch >>
           steps:
             - aws-cli/setup:
-                aws_access_key_id: $AWS_ACCESS_KEY_ID_ARTIFACTS
-                region: $AWS_REGION_ARTIFACTS
-                aws_secret_access_key: $AWS_SECRET_ACCESS_KEY_ARTIFACTS
+                aws_access_key_id: AWS_ACCESS_KEY_ID_ARTIFACTS
+                aws_secret_access_key: AWS_SECRET_ACCESS_KEY_ARTIFACTS
+                region: ${AWS_REGION_ARTIFACTS}
             # Upload distributables to S3
             - aws-s3/copy:
                 from: mui-material.tgz
@@ -718,9 +718,9 @@ jobs:
                 value: << pipeline.git.branch >>
           steps:
             - aws-cli/setup:
-                aws_access_key_id: $AWS_ACCESS_KEY_ID_ARTIFACTS
-                region: $AWS_REGION_ARTIFACTS
-                aws_secret_access_key: $AWS_SECRET_ACCESS_KEY_ARTIFACTS
+                aws_access_key_id: AWS_ACCESS_KEY_ID_ARTIFACTS
+                aws_secret_access_key: AWS_SECRET_ACCESS_KEY_ARTIFACTS
+                region: ${AWS_REGION_ARTIFACTS}
             # persist size snapshot on S3
             - aws-s3/copy:
                 arguments: --content-type application/json

diff --git a/docs/data/base/components/select/UnstyledSelectRichOptions.js b/docs/data/base/components/select/UnstyledSelectRichOptions.js
@@ -13,8 +13,8 @@ export default function UnstyledSelectRichOptions() {
           <img
             loading="lazy"
             width="20"
-            src={`https://flagcdn.com/w20/${c.code.toLowerCase()}.png`}
             srcSet={`https://flagcdn.com/w40/${c.code.toLowerCase()}.png 2x`}
+            src={`https://flagcdn.com/w20/${c.code.toLowerCase()}.png`}
             alt={`Flag of ${c.label}`}
           />
           {c.label} ({c.code}) +{c.phone}

diff --git a/docs/data/base/components/select/UnstyledSelectRichOptions.tsx b/docs/data/base/components/select/UnstyledSelectRichOptions.tsx
@@ -12,8 +12,8 @@ export default function UnstyledSelectRichOptions() {
           <img
             loading="lazy"
             width="20"
-            src={`https://flagcdn.com/w20/${c.code.toLowerCase()}.png`}
             srcSet={`https://flagcdn.com/w40/${c.code.toLowerCase()}.png 2x`}
+            src={`https://flagcdn.com/w20/${c.code.toLowerCase()}.png`}
             alt={`Flag of ${c.label}`}
           />
           {c.label} ({c.code}) +{c.phone}

diff --git a/docs/data/base/components/select/UnstyledSelectRichOptions.tsx.preview b/docs/data/base/components/select/UnstyledSelectRichOptions.tsx.preview
@@ -4,8 +4,8 @@
       <img
         loading="lazy"
         width="20"
-        src={`https://flagcdn.com/w20/${c.code.toLowerCase()}.png`}
         srcSet={`https://flagcdn.com/w40/${c.code.toLowerCase()}.png 2x`}
+        src={`https://flagcdn.com/w20/${c.code.toLowerCase()}.png`}
         alt={`Flag of ${c.label}`}
       />
       {c.label} ({c.code}) +{c.phone}

diff --git a/docs/data/joy/components/aspect-ratio/CarouselRatio.js b/docs/data/joy/components/aspect-ratio/CarouselRatio.js
@@ -42,8 +42,8 @@ export default function CarouselRatio() {
         <Card orientation="horizontal" size="sm" key={item.title} variant="outlined">
           <AspectRatio ratio="1" sx={{ minWidth: 60 }}>
             <img
-              src={`${item.src}?h=120&fit=crop&auto=format`}
               srcSet={`${item.src}?h=120&fit=crop&auto=format&dpr=2 2x`}
+              src={`${item.src}?h=120&fit=crop&auto=format`}
               alt={item.title}
             />
           </AspectRatio>

diff --git a/docs/data/joy/components/aspect-ratio/CarouselRatio.tsx b/docs/data/joy/components/aspect-ratio/CarouselRatio.tsx
@@ -42,8 +42,8 @@ export default function CarouselRatio() {
         <Card orientation="horizontal" size="sm" key={item.title} variant="outlined">
           <AspectRatio ratio="1" sx={{ minWidth: 60 }}>
             <img
-              src={`${item.src}?h=120&fit=crop&auto=format`}
               srcSet={`${item.src}?h=120&fit=crop&auto=format&dpr=2 2x`}
+              src={`${item.src}?h=120&fit=crop&auto=format`}
               alt={item.title}
             />
           </AspectRatio>

diff --git a/docs/data/joy/components/aspect-ratio/CarouselRatio.tsx.preview b/docs/data/joy/components/aspect-ratio/CarouselRatio.tsx.preview
@@ -2,8 +2,8 @@
   <Card orientation="horizontal" size="sm" key={item.title} variant="outlined">
     <AspectRatio ratio="1" sx={{ minWidth: 60 }}>
       <img
-        src={`${item.src}?h=120&fit=crop&auto=format`}
         srcSet={`${item.src}?h=120&fit=crop&auto=format&dpr=2 2x`}
+        src={`${item.src}?h=120&fit=crop&auto=format`}
         alt={item.title}
       />
     </AspectRatio>

diff --git a/docs/data/joy/components/aspect-ratio/ListStackRatio.js b/docs/data/joy/components/aspect-ratio/ListStackRatio.js
@@ -36,8 +36,8 @@ export default function ListStackRatio() {
               <ListItemButton sx={{ gap: 2 }}>
                 <AspectRatio sx={{ flexBasis: 120 }}>
                   <img
-                    src={`${item.src}?w=120&fit=crop&auto=format`}
                     srcSet={`${item.src}?w=120&fit=crop&auto=format&dpr=2 2x`}
+                    src={`${item.src}?w=120&fit=crop&auto=format`}
                     alt={item.title}
                   />
                 </AspectRatio>

diff --git a/docs/data/joy/components/aspect-ratio/ListStackRatio.tsx b/docs/data/joy/components/aspect-ratio/ListStackRatio.tsx
@@ -36,8 +36,8 @@ export default function ListStackRatio() {
               <ListItemButton sx={{ gap: 2 }}>
                 <AspectRatio sx={{ flexBasis: 120 }}>
                   <img
-                    src={`${item.src}?w=120&fit=crop&auto=format`}
                     srcSet={`${item.src}?w=120&fit=crop&auto=format&dpr=2 2x`}
+                    src={`${item.src}?w=120&fit=crop&auto=format`}
                     alt={item.title}
                   />
                 </AspectRatio>

diff --git a/docs/data/joy/components/autocomplete/CountrySelect.js b/docs/data/joy/components/autocomplete/CountrySelect.js
@@ -25,8 +25,8 @@ export default function CountrySelect() {
             <img
               loading="lazy"
               width="20"
-              src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
               srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
+              src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
               alt=""
             />
           </ListItemDecorator>

diff --git a/docs/data/joy/components/autocomplete/CountrySelect.tsx b/docs/data/joy/components/autocomplete/CountrySelect.tsx
@@ -25,8 +25,8 @@ export default function CountrySelect() {
             <img
               loading="lazy"
               width="20"
-              src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
               srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
+              src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
               alt=""
             />
           </ListItemDecorator>

diff --git a/docs/data/joy/getting-started/templates/email/components/Mails.tsx b/docs/data/joy/getting-started/templates/email/components/Mails.tsx
@@ -48,8 +48,8 @@ export default function EmailList() {
               <ListItemDecorator sx={{ alignSelf: 'flex-start' }}>
                 <Avatar
                   alt=""
-                  src={item.avatar}
                   srcSet={item.avatar2x}
+                  src={item.avatar}
                   sx={{ borderRadius: 'sm' }}
                 />
               </ListItemDecorator>

diff --git a/docs/data/joy/getting-started/templates/profile-dashboard/components/CountrySelector.tsx b/docs/data/joy/getting-started/templates/profile-dashboard/components/CountrySelector.tsx
@@ -27,8 +27,8 @@ export default function ContrySelector({ sx, ...props }: FormControlProps) {
                 <img
                   loading="lazy"
                   width="20"
-                  src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
                   srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
+                  src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
                   alt=""
                 />
               </AspectRatio>

diff --git a/docs/data/joy/getting-started/templates/rental-dashboard/components/CountrySelector.tsx b/docs/data/joy/getting-started/templates/rental-dashboard/components/CountrySelector.tsx
@@ -25,8 +25,8 @@ export default function ContrySelector({ sx, ...props }: FormControlProps) {
                 <img
                   loading="lazy"
                   width="20"
-                  src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
                   srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
+                  src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
                   alt=""
                 />
               </AspectRatio>

diff --git a/docs/data/material/components/autocomplete/CountrySelect.js b/docs/data/material/components/autocomplete/CountrySelect.js
@@ -16,8 +16,8 @@ export default function CountrySelect() {
           <img
             loading="lazy"
             width="20"
-            src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
             srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
+            src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
             alt=""
           />
           {option.label} ({option.code}) +{option.phone}

diff --git a/docs/data/material/components/autocomplete/CountrySelect.tsx b/docs/data/material/components/autocomplete/CountrySelect.tsx
@@ -16,8 +16,8 @@ export default function CountrySelect() {
           <img
             loading="lazy"
             width="20"
-            src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
             srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
+            src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
             alt=""
           />
           {option.label} ({option.code}) +{option.phone}

diff --git a/docs/data/material/components/image-list/MasonryImageList.js b/docs/data/material/components/image-list/MasonryImageList.js
@@ -10,8 +10,8 @@ export default function MasonryImageList() {
         {itemData.map((item) => (
           <ImageListItem key={item.img}>
             <img
-              src={`${item.img}?w=248&fit=crop&auto=format`}
               srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
+              src={`${item.img}?w=248&fit=crop&auto=format`}
               alt={item.title}
               loading="lazy"
             />

diff --git a/docs/data/material/components/image-list/MasonryImageList.tsx b/docs/data/material/components/image-list/MasonryImageList.tsx
@@ -10,8 +10,8 @@ export default function MasonryImageList() {
         {itemData.map((item) => (
           <ImageListItem key={item.img}>
             <img
-              src={`${item.img}?w=248&fit=crop&auto=format`}
               srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
+              src={`${item.img}?w=248&fit=crop&auto=format`}
               alt={item.title}
               loading="lazy"
             />

diff --git a/docs/data/material/components/image-list/MasonryImageList.tsx.preview b/docs/data/material/components/image-list/MasonryImageList.tsx.preview
@@ -2,8 +2,8 @@
   {itemData.map((item) => (
     <ImageListItem key={item.img}>
       <img
-        src={`${item.img}?w=248&fit=crop&auto=format`}
         srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
+        src={`${item.img}?w=248&fit=crop&auto=format`}
         alt={item.title}
         loading="lazy"
       />

diff --git a/docs/data/material/components/image-list/StandardImageList.js b/docs/data/material/components/image-list/StandardImageList.js
@@ -8,8 +8,8 @@ export default function StandardImageList() {
       {itemData.map((item) => (
         <ImageListItem key={item.img}>
           <img
-            src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
             srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
+            src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
             alt={item.title}
             loading="lazy"
           />

diff --git a/docs/data/material/components/image-list/StandardImageList.tsx b/docs/data/material/components/image-list/StandardImageList.tsx
@@ -8,8 +8,8 @@ export default function StandardImageList() {
       {itemData.map((item) => (
         <ImageListItem key={item.img}>
           <img
-            src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
             srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
+            src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
             alt={item.title}
             loading="lazy"
           />

diff --git a/docs/data/material/components/image-list/StandardImageList.tsx.preview b/docs/data/material/components/image-list/StandardImageList.tsx.preview
@@ -2,8 +2,8 @@
   {itemData.map((item) => (
     <ImageListItem key={item.img}>
       <img
-        src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
         srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
+        src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
         alt={item.title}
         loading="lazy"
       />

diff --git a/docs/data/material/components/image-list/TitlebarBelowImageList.js b/docs/data/material/components/image-list/TitlebarBelowImageList.js
@@ -9,8 +9,8 @@ export default function TitlebarBelowImageList() {
       {itemData.map((item) => (
         <ImageListItem key={item.img}>
           <img
-            src={`${item.img}?w=248&fit=crop&auto=format`}
             srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
+            src={`${item.img}?w=248&fit=crop&auto=format`}
             alt={item.title}
             loading="lazy"
           />

diff --git a/docs/data/material/components/image-list/TitlebarBelowImageList.tsx b/docs/data/material/components/image-list/TitlebarBelowImageList.tsx
@@ -9,8 +9,8 @@ export default function TitlebarBelowImageList() {
       {itemData.map((item) => (
         <ImageListItem key={item.img}>
           <img
-            src={`${item.img}?w=248&fit=crop&auto=format`}
             srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
+            src={`${item.img}?w=248&fit=crop&auto=format`}
             alt={item.title}
             loading="lazy"
           />

diff --git a/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.js b/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.js
@@ -11,8 +11,8 @@ export default function TitlebarBelowMasonryImageList() {
         {itemData.map((item) => (
           <ImageListItem key={item.img}>
             <img
-              src={`${item.img}?w=248&fit=crop&auto=format`}
               srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
+              src={`${item.img}?w=248&fit=crop&auto=format`}
               alt={item.title}
               loading="lazy"
             />

diff --git a/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.tsx b/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.tsx
@@ -11,8 +11,8 @@ export default function TitlebarBelowMasonryImageList() {
         {itemData.map((item) => (
           <ImageListItem key={item.img}>
             <img
-              src={`${item.img}?w=248&fit=crop&auto=format`}
               srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
+              src={`${item.img}?w=248&fit=crop&auto=format`}
               alt={item.title}
               loading="lazy"
             />

diff --git a/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.tsx.preview b/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.tsx.preview
@@ -2,8 +2,8 @@
   {itemData.map((item) => (
     <ImageListItem key={item.img}>
       <img
-        src={`${item.img}?w=248&fit=crop&auto=format`}
         srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
+        src={`${item.img}?w=248&fit=crop&auto=format`}
         alt={item.title}
         loading="lazy"
       />

diff --git a/docs/data/material/components/image-list/TitlebarImageList.js b/docs/data/material/components/image-list/TitlebarImageList.js
@@ -15,8 +15,8 @@ export default function TitlebarImageList() {
       {itemData.map((item) => (
         <ImageListItem key={item.img}>
           <img
-            src={`${item.img}?w=248&fit=crop&auto=format`}
             srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
+            src={`${item.img}?w=248&fit=crop&auto=format`}
             alt={item.title}
             loading="lazy"
           />

diff --git a/docs/data/material/components/image-list/TitlebarImageList.tsx b/docs/data/material/components/image-list/TitlebarImageList.tsx
@@ -15,8 +15,8 @@ export default function TitlebarImageList() {
       {itemData.map((item) => (
         <ImageListItem key={item.img}>
           <img
-            src={`${item.img}?w=248&fit=crop&auto=format`}
             srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
+            src={`${item.img}?w=248&fit=crop&auto=format`}
             alt={item.title}
             loading="lazy"
           />

diff --git a/docs/data/material/components/image-list/WovenImageList.js b/docs/data/material/components/image-list/WovenImageList.js
@@ -8,8 +8,8 @@ export default function WovenImageList() {
       {itemData.map((item) => (
         <ImageListItem key={item.img}>
           <img
-            src={`${item.img}?w=161&fit=crop&auto=format`}
             srcSet={`${item.img}?w=161&fit=crop&auto=format&dpr=2 2x`}
+            src={`${item.img}?w=161&fit=crop&auto=format`}
             alt={item.title}
             loading="lazy"
           />

diff --git a/docs/data/material/components/image-list/WovenImageList.tsx b/docs/data/material/components/image-list/WovenImageList.tsx
@@ -8,8 +8,8 @@ export default function WovenImageList() {
       {itemData.map((item) => (
         <ImageListItem key={item.img}>
           <img
-            src={`${item.img}?w=161&fit=crop&auto=format`}
             srcSet={`${item.img}?w=161&fit=crop&auto=format&dpr=2 2x`}
+            src={`${item.img}?w=161&fit=crop&auto=format`}
             alt={item.title}
             loading="lazy"
           />

diff --git a/docs/data/material/components/image-list/WovenImageList.tsx.preview b/docs/data/material/components/image-list/WovenImageList.tsx.preview
@@ -2,8 +2,8 @@
   {itemData.map((item) => (
     <ImageListItem key={item.img}>
       <img
-        src={`${item.img}?w=161&fit=crop&auto=format`}
         srcSet={`${item.img}?w=161&fit=crop&auto=format&dpr=2 2x`}
+        src={`${item.img}?w=161&fit=crop&auto=format`}
         alt={item.title}
         loading="lazy"
       />

diff --git a/docs/data/material/components/masonry/ImageMasonry.js b/docs/data/material/components/masonry/ImageMasonry.js
@@ -22,8 +22,8 @@ export default function ImageMasonry() {
           <div key={index}>
             <Label>{index + 1}</Label>
             <img
-              src={`${item.img}?w=162&auto=format`}
               srcSet={`${item.img}?w=162&auto=format&dpr=2 2x`}
+              src={`${item.img}?w=162&auto=format`}
               alt={item.title}
               loading="lazy"
               style={{

diff --git a/docs/data/material/components/masonry/ImageMasonry.tsx b/docs/data/material/components/masonry/ImageMasonry.tsx
@@ -22,8 +22,8 @@ export default function ImageMasonry() {
           <div key={index}>
             <Label>{index + 1}</Label>
             <img
-              src={`${item.img}?w=162&auto=format`}
               srcSet={`${item.img}?w=162&auto=format&dpr=2 2x`}
+              src={`${item.img}?w=162&auto=format`}
               alt={item.title}
               loading="lazy"
               style={{

diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx
@@ -126,8 +126,8 @@ function PostPreview(props: BlogPost) {
             <Avatar
               key={author}
               alt=""
-              src={`${AUTHORS[author].avatar}?s=${28}`}
               srcSet={`${AUTHORS[author].avatar}?s=${28 * 2} 2x`}
+              src={`${AUTHORS[author].avatar}?s=${28}`}
             />
           ))}
         </AvatarGroup>
@@ -264,13 +264,13 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
       <main id="main-content">
         <Box
           sx={(theme) => ({
-            background: `linear-gradient(180deg, #FFF 50%, 
+            background: `linear-gradient(180deg, #FFF 50%,
           ${(theme.vars || theme).palette.primary[50]} 100%)
         `,
             ...theme.applyDarkStyles({
               background: `linear-gradient(180deg, ${
                 (theme.vars || theme).palette.primaryDark[800]
-              } 50%, 
+              } 50%,
           ${alpha(theme.palette.primary[900], 0.2)} 100%)
           `,
             }),

diff --git a/docs/src/components/home/CompaniesGrid.tsx b/docs/src/components/home/CompaniesGrid.tsx
@@ -170,7 +170,7 @@ export default function CompaniesGrid({ data }: { data: Array<IconImageProps> })
             objectFit: 'contain',
           }}
         >
-          <IconImage alt={imgProps.alt || `${imgProps.name} logo`} {...imgProps} />
+          <IconImage alt={imgProps.alt || `${imgProps.name} logo`} loading="eager" {...imgProps} />
         </Grid>
       ))}
     </Grid>
-Original file line number
+Diff line change
@@ Expand Up @@
                 objectFit: 'contain',
               }}
             >
-              <IconImage alt={imgProps.alt || `${imgProps.name} logo`} {...imgProps} />
+              <IconImage alt={imgProps.alt || `${imgProps.name} logo`} loading="eager" {...imgProps} />
             </Grid>
           ))}
         </Grid>
@@ Expand Down @@