Merge branch 'master' into fix-inconsistent-types-of-mergeBreakpoints…

…InOrder
mui · Sep 5, 2023 · 2879e2f · 2879e2f
2 parents 70e6e31 + 696b710
commit 2879e2f
Show file tree

Hide file tree

Showing 291 changed files with 3,383 additions and 9,565 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -582,7 +582,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som
 - 💫 Material UI, Joy UI, and Base UI are compatible with [NextJS App Router](https://nextjs.org/docs/app) (#37656) @mj12albert
 - 📚 Added new guides for integrating with Next.js 13 App Router (#37656) @mj12albert
   - Ⓜ️ [Material UI guide](https://mui.com/material-ui/guides/next-js-app-router/)
-  - 🅙 [Joy UI guide](https://mui.com/joy-ui/guides/next-js-app-router/)
+  - 🅙 [Joy UI guide](https://mui.com/joy-ui/integrations/next-js-app-router/)
   - 🅱️ [Base UI guide](https://mui.com/base-ui/guides/next-js-app-router/)
 - 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements.
 
@@ -10720,7 +10720,7 @@ A big thanks to the 20 contributors who made this release possible. Here are som
 - [Avatar] Fix usage of srcset property (#23286) @matheuspiment
 - [ClickAwayListener] Fix mounting behavior in Portals in React 17 (#23315) @eps1lon
 - [core] Allow React 17 (#23311) @eps1lon
-- [Icon] Fix translation, e.g Google Translate (#23237) @cbeltrangomez84
+- [Icon] Fix translation, e.g. Google Translate (#23237) @cbeltrangomez84
 - [LinearProgress] Fix Safari's bug during composition of different paint (#23293) @montogeek
 - [Radio] Fix dot misalignment in Safari (#23239) @anasufana
 - [styled-engine] Fix tagged template syntax with multiple expressions (#23269) @eps1lon

diff --git a/CHANGELOG.old.md b/CHANGELOG.old.md
@@ -5540,7 +5540,7 @@ you to add them up quickly in your head without having to worry about decimals.
 
 - [docs] Fix search suggestions on dark mode (#13874) @rfbotto
 - [docs] Add accessibility section to selection-controls with demo (#13896) @wyseguyonline
-- [docs] Add support for multiple demo variants e.g JS or Hooks (#13873) @adeelibr
+- [docs] Add support for multiple demo variants e.g. JS or Hooks (#13873) @adeelibr
 - [docs] Remove the withRoot HOC (#13909) @oliviertassinari
 - [docs] Add material-ui-pickers in pickers page (#13697) @dmtrKovalenko
 - [docs] Continue #13806 and port back some fix from @system (#13917) @oliviertassinari

diff --git a/docs/.link-check-errors.txt b/docs/.link-check-errors.txt
@@ -1,5 +1,4 @@
 Broken links found by `yarn docs:link-check` that exist:
 
 - https://mui.com/blog/material-ui-v4-is-out/#premium-themes-store-✨
-- https://mui.com/joy-ui/integrations/material-ui/
 - https://mui.com/size-snapshot
diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js
@@ -155,7 +155,7 @@ const StyledAutocompleteRoot = styled('div')(
   padding-right: 5px;
   overflow: hidden;
   width: 320px;
-  
+
   &.focused {
     border-color: ${blue[400]};
     box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
@@ -264,7 +264,7 @@ const StyledPopupIndicator = styled(Button)(
     background-color: transparent;
     align-self: center;
     padding: 0 2px;
-    
+
     &:hover {
       background-color: ${theme.palette.mode === 'dark' ? grey[700] : blue[100]};
       cursor: pointer;
@@ -289,7 +289,7 @@ const StyledClearIndicator = styled(Button)(
     background-color: transparent;
     align-self: center;
     padding: 0 2px;
-    
+
     &:hover {
       background-color: ${theme.palette.mode === 'dark' ? grey[700] : blue[100]};
       cursor: pointer;

diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx
@@ -138,7 +138,7 @@ const StyledAutocompleteRoot = styled('div')(
   padding-right: 5px;
   overflow: hidden;
   width: 320px;
-  
+
   &.focused {
     border-color: ${blue[400]};
     box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
@@ -247,7 +247,7 @@ const StyledPopupIndicator = styled(Button)(
     background-color: transparent;
     align-self: center;
     padding: 0 2px;
-    
+
     &:hover {
       background-color: ${theme.palette.mode === 'dark' ? grey[700] : blue[100]};
       cursor: pointer;
@@ -272,7 +272,7 @@ const StyledClearIndicator = styled(Button)(
     background-color: transparent;
     align-self: center;
     padding: 0 2px;
-    
+
     &:hover {
       background-color: ${theme.palette.mode === 'dark' ? grey[700] : blue[100]};
       cursor: pointer;

diff --git a/docs/data/base/components/button/UnstyledButtonCustom.js b/docs/data/base/components/button/UnstyledButtonCustom.js
@@ -53,7 +53,7 @@ const CustomButtonRoot = styled(ButtonRoot)(
     transition: all 800ms ease;
     pointer-events: none;
   }
-  
+
   & .bg {
     stroke: var(--main-color);
     stroke-width: 1;
@@ -86,7 +86,7 @@ const CustomButtonRoot = styled(ButtonRoot)(
     outline-offset: 2px;
   }
 
-  &.${buttonClasses.active} { 
+  &.${buttonClasses.active} {
     & .bg {
       fill: var(--active-color);
       transition: fill 300ms ease-out;

diff --git a/docs/data/base/components/button/UnstyledButtonCustom.tsx b/docs/data/base/components/button/UnstyledButtonCustom.tsx
@@ -54,7 +54,7 @@ const CustomButtonRoot = styled(ButtonRoot)(
     transition: all 800ms ease;
     pointer-events: none;
   }
-  
+
   & .bg {
     stroke: var(--main-color);
     stroke-width: 1;
@@ -87,7 +87,7 @@ const CustomButtonRoot = styled(ButtonRoot)(
     outline-offset: 2px;
   }
 
-  &.${buttonClasses.active} { 
+  &.${buttonClasses.active} {
     & .bg {
       fill: var(--active-color);
       transition: fill 300ms ease-out;

diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/css/index.js b/docs/data/base/components/button/UnstyledButtonsSimple/css/index.js
@@ -54,12 +54,11 @@ function Styles() {
       .CustomButton:active:not(.${buttonClasses.disabled}) {
         background-color: ${cyan[700]};
       }
-      
+
       .${buttonClasses.disabled} {
         opacity: 0.5;
         cursor: not-allowed;
-
-
+      }
       `}
     </style>
   );

diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx b/docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx
@@ -54,12 +54,11 @@ function Styles() {
       .CustomButton:active:not(.${buttonClasses.disabled}) {
         background-color: ${cyan[700]};
       }
-      
+
       .${buttonClasses.disabled} {
         opacity: 0.5;
         cursor: not-allowed;
-
-
+      }
       `}
     </style>
   );

diff --git a/docs/data/base/components/form-control/BasicFormControl/system/index.js b/docs/data/base/components/form-control/BasicFormControl/system/index.js
@@ -16,7 +16,7 @@ export default function BasicFormControl() {
 
 const StyledInput = styled(Input)(
   ({ theme }) => `
-  
+
   .${inputClasses.input} {
     width: 320px;
     font-size: 0.875rem;

diff --git a/docs/data/base/components/form-control/BasicFormControl/system/index.tsx b/docs/data/base/components/form-control/BasicFormControl/system/index.tsx
@@ -16,7 +16,7 @@ export default function BasicFormControl() {
 
 const StyledInput = styled(Input)(
   ({ theme }) => `
-  
+
   .${inputClasses.input} {
     width: 320px;
     font-size: 0.875rem;

diff --git a/docs/data/base/components/form-control/FormControlFunctionChild.js b/docs/data/base/components/form-control/FormControlFunctionChild.js
@@ -18,7 +18,6 @@ export default function FormControlFunctionChild() {
 
 const StyledInput = styled(Input)(
   ({ theme }) => `
-  
   display: inline-block;
 
   .${inputClasses.input} {

diff --git a/docs/data/base/components/form-control/FormControlFunctionChild.tsx b/docs/data/base/components/form-control/FormControlFunctionChild.tsx
@@ -18,7 +18,6 @@ export default function FormControlFunctionChild() {
 
 const StyledInput = styled(Input)(
   ({ theme }) => `
-  
   display: inline-block;
 
   .${inputClasses.input} {

diff --git a/docs/data/base/components/input/UnstyledInputBasic/css/index.js b/docs/data/base/components/input/UnstyledInputBasic/css/index.js
@@ -65,16 +65,16 @@ function Styles() {
         background: ${isDarkMode ? grey[900] : '#fff'};
         border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
         box-shadow: 0px 2px 2px ${isDarkMode ? grey[900] : grey[50]};
-      
+
         &:hover {
           border-color: ${cyan[400]};
         }
-      
+
         &:focus {
           border-color: ${cyan[400]};
           box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};
         }
-      
+
         &:focus-visible {
           outline: 0;
         }

diff --git a/docs/data/base/components/input/UnstyledInputBasic/css/index.tsx b/docs/data/base/components/input/UnstyledInputBasic/css/index.tsx
@@ -65,16 +65,16 @@ function Styles() {
         background: ${isDarkMode ? grey[900] : '#fff'};
         border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
         box-shadow: 0px 2px 2px ${isDarkMode ? grey[900] : grey[50]};
-      
+
         &:hover {
           border-color: ${cyan[400]};
         }
-      
+
         &:focus {
           border-color: ${cyan[400]};
           box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};
         }
-      
+
         &:focus-visible {
           outline: 0;
         }

diff --git a/docs/data/base/components/input/UnstyledInputIntroduction/css/index.js b/docs/data/base/components/input/UnstyledInputIntroduction/css/index.js
@@ -65,11 +65,11 @@ function Styles() {
         background: ${isDarkMode ? grey[900] : '#fff'};
         border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
         box-shadow: 0px 2px 24px ${isDarkMode ? cyan[800] : cyan[100]};
-      
+
         &:hover {
           border-color: ${cyan[400]};
         }
-      
+
         &:focus {
           border-color: ${cyan[400]};
           box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]};

diff --git a/docs/data/base/components/input/UnstyledInputIntroduction/css/index.tsx b/docs/data/base/components/input/UnstyledInputIntroduction/css/index.tsx
@@ -65,11 +65,11 @@ function Styles() {
         background: ${isDarkMode ? grey[900] : '#fff'};
         border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
         box-shadow: 0px 2px 24px ${isDarkMode ? cyan[800] : cyan[100]};
-      
+
         &:hover {
           border-color: ${cyan[400]};
         }
-      
+
         &:focus {
           border-color: ${cyan[400]};
           box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]};