Merge branch 'master' into fix-TabScrollButton-extended-type

mui · Aug 31, 2023 · fa84948 · fa84948
2 parents 463765d + 563b883
commit fa84948
Show file tree

Hide file tree

Showing 118 changed files with 3,721 additions and 3,533 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,35 +10,36 @@ A big thanks to the 11 contributors who made this release possible. This release
 
 ### `@mui/[email protected]`
 
-- &#8203;<!-- 17 -->[Autocomplete] Fix listbox opened unexpectedly when component is `disabled` (#38611) @mj12albert
-- &#8203;<!-- 03 -->[Select][material-ui] Fix select menu moving on scroll when disableScrollLock is true (#37773) @VishruthR
+- [Autocomplete] Fix listbox opened unexpectedly when component is `disabled` (#38611) @mj12albert
+- [Select][material-ui] Fix select menu moving on scroll when disableScrollLock is true (#37773) @VishruthR
 
 ### `@mui/[email protected]`
 
-- &#8203;<!-- 16 -->[useButton][base-ui] Accept arbitrary props in getRootProps and forward them (#38475) @DiegoAndai
+- [useButton][base-ui] Accept arbitrary props in getRootProps and forward them (#38475) @DiegoAndai
 
 ### `@mui/[email protected]`
 
-- &#8203;<!-- 02 -->[system][zero][tag] Add support for sx prop (#38535) @brijeshb42
+- [system][zero][tag] Add support for sx prop (#38535) @brijeshb42
 
 ### Docs
 
-- &#8203;<!-- 10 -->[docs] Number Input docs fixes (#38521) @mj12albert
-- &#8203;<!-- 09 -->[docs] Show all the code in the usage section (#38691) @oliviertassinari
-- &#8203;<!-- 06 -->[docs][joy-ui] Change the customization and how-to guides docs tree (#38396) @danilo-leal
-- &#8203;<!-- 05 -->[docs][lab][LoadingButton] Improve `loading` prop documentation (#38625) @sai6855
-- &#8203;<!-- 04 -->[docs][material-ui] Format `key` prop JSDoc description in `Snackbar` component code correctly (#38603) @jaydenseric
+- [docs] Number Input docs fixes (#38521) @mj12albert
+- [docs] Show all the code in the usage section (#38691) @oliviertassinari
+- [docs][joy-ui] Change the customization and how-to guides docs tree (#38396) @danilo-leal
+- [docs][lab][LoadingButton] Improve `loading` prop documentation (#38625) @sai6855
+- [docs][material-ui] Format `key` prop JSDoc description in `Snackbar` component code correctly (#38603) @jaydenseric
 
 ### Core
 
-- &#8203;<!-- 15 -->[core] Add use-client to custom icons (#38132) @mj12albert
-- &#8203;<!-- 14 -->[core] Remove unnecessary `@types/jsdom` (#38657) @renovate[bot]
-- &#8203;<!-- 13 -->[core] Improve sponsors GA labels (#38649) @oliviertassinari
-- &#8203;<!-- 12 -->[core] Fix ESM issues with regression tests (#37963) @Janpot
-- &#8203;<!-- 11 -->[core] Potential fix for intermittent ci crashes in e2e test (#38614) @Janpot
-- &#8203;<!-- 08 -->[docs-infra] Adjust the Material You playground demo design (#38636) @danilo-leal
-- &#8203;<!-- 07 -->[docs-infra] Hide the SkipLink button if user prefers reduced motion (#38632) @DerTimonius
-- &#8203;<!-- 01 -->[website] Add tiny fixes the homepage Sponsors section (#38635) @danilo-leal
+- [core] Add use-client to custom icons (#38132) @mj12albert
+- [core] Remove unnecessary `@types/jsdom` (#38657) @renovate[bot]
+- [core] Improve sponsors GA labels (#38649) @oliviertassinari
+- [core] Fix ESM issues with regression tests (#37963) @Janpot
+- [core] Potential fix for intermittent ci crashes in e2e test (#38614) @Janpot
+- [docs-infra] Mark unstable components with a chip in the nav drawer (#38573) @michaldudak
+- [docs-infra] Adjust the Material You playground demo design (#38636) @danilo-leal
+- [docs-infra] Hide the SkipLink button if user prefers reduced motion (#38632) @DerTimonius
+- [website] Add tiny fixes the homepage Sponsors section (#38635) @danilo-leal
 
 All contributors of this release in alphabetical order: @brijeshb42, @danilo-leal, @DerTimonius, @DiegoAndai, @Janpot, @jaydenseric, @mj12albert, @oliviertassinari, @renovate[bot], @sai6855, @VishruthR
 

diff --git a/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md b/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md
@@ -58,7 +58,7 @@ const Player = React.forwardRef(function Player(
       <div className="bg-white border-slate-100 dark:bg-slate-800 dark:border-slate-500 border-b rounded-t-xl p-4 pb-6 sm:p-10 sm:pb-8 lg:p-6 xl:p-10 xl:pb-8 space-y-6 sm:space-y-8 lg:space-y-6 xl:space-y-8">
         <div className="flex items-center space-x-4">
           <img
-            src="https://tailwindcss.com/_next/static/media/full-stack-radio.485d0b2c6e3aa1cacc6b50e462cd3675.png"
+            src="https://mui.com/static/base-ui/with-tailwind-css/full-stack-radio.png"
             alt=""
             width="88"
             height="88"

diff --git a/docs/data/joy/components/alert/AlertUsage.js b/docs/data/joy/components/alert/AlertUsage.js
@@ -10,7 +10,7 @@ export default function AlertUsage() {
         {
           propName: 'variant',
           knob: 'radio',
-          defaultValue: 'outlined',
+          defaultValue: 'soft',
           options: ['plain', 'outlined', 'soft', 'solid'],
         },
         {

diff --git a/docs/data/joy/components/card/BasicCard.js b/docs/data/joy/components/card/BasicCard.js
@@ -9,7 +9,7 @@ import BookmarkAdd from '@mui/icons-material/BookmarkAddOutlined';
 
 export default function BasicCard() {
   return (
-    <Card variant="outlined" sx={{ width: 320 }}>
+    <Card sx={{ width: 320 }}>
       <div>
         <Typography level="title-lg">Yosemite National Park</Typography>
         <Typography level="body-sm">April 24 to May 02, 2021</Typography>

diff --git a/docs/data/joy/components/card/BasicCard.tsx b/docs/data/joy/components/card/BasicCard.tsx
@@ -9,7 +9,7 @@ import BookmarkAdd from '@mui/icons-material/BookmarkAddOutlined';
 
 export default function BasicCard() {
   return (
-    <Card variant="outlined" sx={{ width: 320 }}>
+    <Card sx={{ width: 320 }}>
       <div>
         <Typography level="title-lg">Yosemite National Park</Typography>
         <Typography level="body-sm">April 24 to May 02, 2021</Typography>

diff --git a/docs/data/joy/components/card/CardUsage.js b/docs/data/joy/components/card/CardUsage.js
@@ -14,7 +14,7 @@ export default function CardUsage() {
         {
           propName: 'variant',
           knob: 'radio',
-          defaultValue: 'plain',
+          defaultValue: 'outlined',
           options: ['plain', 'outlined', 'soft', 'solid'],
         },
         {

diff --git a/docs/data/joy/components/card/CardVariants.js b/docs/data/joy/components/card/CardVariants.js
@@ -15,16 +15,16 @@ export default function CardVariants() {
         gap: 2,
       }}
     >
-      <Card>
+      <Card variant="plain">
         <CardContent>
-          <Typography level="title-md">Plain card (default)</Typography>
+          <Typography level="title-md">Plain card</Typography>
           <Typography>Description of the card.</Typography>
         </CardContent>
       </Card>
 
       <Card variant="outlined">
         <CardContent>
-          <Typography level="title-md">Outlined card</Typography>
+          <Typography level="title-md">Outlined card (default)</Typography>
           <Typography>Description of the card.</Typography>
         </CardContent>
       </Card>

diff --git a/docs/data/joy/components/card/CardVariants.tsx b/docs/data/joy/components/card/CardVariants.tsx
@@ -15,16 +15,16 @@ export default function CardVariants() {
         gap: 2,
       }}
     >
-      <Card>
+      <Card variant="plain">
         <CardContent>
-          <Typography level="title-md">Plain card (default)</Typography>
+          <Typography level="title-md">Plain card</Typography>
           <Typography>Description of the card.</Typography>
         </CardContent>
       </Card>
 
       <Card variant="outlined">
         <CardContent>
-          <Typography level="title-md">Outlined card</Typography>
+          <Typography level="title-md">Outlined card (default)</Typography>
           <Typography>Description of the card.</Typography>
         </CardContent>
       </Card>

diff --git a/docs/data/joy/components/card/DribbbleShot.js b/docs/data/joy/components/card/DribbbleShot.js
@@ -15,11 +15,11 @@ import CreateNewFolder from '@mui/icons-material/CreateNewFolder';
 export default function DribbbleShot() {
   return (
     <Card
+      variant="plain"
       sx={{
         width: 300,
         bgcolor: 'initial',
-        boxShadow: 'none',
-        '--Card-padding': '0px',
+        p: 0,
       }}
     >
       <Box sx={{ position: 'relative' }}>

diff --git a/docs/data/joy/components/card/DribbbleShot.tsx b/docs/data/joy/components/card/DribbbleShot.tsx
@@ -15,11 +15,11 @@ import CreateNewFolder from '@mui/icons-material/CreateNewFolder';
 export default function DribbbleShot() {
   return (
     <Card
+      variant="plain"
       sx={{
         width: 300,
         bgcolor: 'initial',
-        boxShadow: 'none',
-        '--Card-padding': '0px',
+        p: 0,
       }}
     >
       <Box sx={{ position: 'relative' }}>

diff --git a/docs/data/joy/components/card/card.md b/docs/data/joy/components/card/card.md
@@ -36,7 +36,7 @@ The demo below shows a typical Card that groups together Typography, Aspect Rati
 
 ### Variants
 
-The Card component supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `plain` (default), `outlined`, `soft`, and `solid`.
+The Card component supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `plain`, `outlined` (default), `soft`, and `solid`.
 
 {{"demo": "CardVariants.js"}}
 

diff --git a/docs/data/material/components/transitions/SimpleSlide.js b/docs/data/material/components/transitions/SimpleSlide.js
@@ -30,7 +30,7 @@ export default function SimpleSlide() {
 
   return (
     <Box sx={{ height: 180 }}>
-      <Box sx={{ width: `calc(100px + 16px)` }}>
+      <Box sx={{ width: `calc(100px + 16px)`, position: 'relative', zIndex: 1 }}>
         <FormControlLabel
           control={<Switch checked={checked} onChange={handleChange} />}
           label="Show"

diff --git a/docs/data/material/components/transitions/SimpleSlide.tsx b/docs/data/material/components/transitions/SimpleSlide.tsx
@@ -31,7 +31,7 @@ export default function SimpleSlide() {
 
   return (
     <Box sx={{ height: 180 }}>
-      <Box sx={{ width: `calc(100px + 16px)` }}>
+      <Box sx={{ width: `calc(100px + 16px)`, position: 'relative', zIndex: 1 }}>
         <FormControlLabel
           control={<Switch checked={checked} onChange={handleChange} />}
           label="Show"

diff --git a/docs/data/material/components/transitions/SimpleSlide.tsx.preview b/docs/data/material/components/transitions/SimpleSlide.tsx.preview
@@ -1,4 +1,4 @@
-<Box sx={{ width: `calc(100px + 16px)` }}>
+<Box sx={{ width: `calc(100px + 16px)`, position: 'relative', zIndex: 1 }}>
   <FormControlLabel
     control={<Switch checked={checked} onChange={handleChange} />}
     label="Show"

diff --git a/docs/data/material/guides/server-rendering/server-rendering.md b/docs/data/material/guides/server-rendering/server-rendering.md
@@ -220,12 +220,5 @@ ReactDOM.hydrate(<Main />, document.querySelector('#root'));
 
 ## Reference implementations
 
-We host different reference implementations which you can find in the [GitHub repository](https://github.com/mui/material-ui) under the [`/examples`](https://github.com/mui/material-ui/tree/HEAD/examples) folder:
-
-- [The reference implementation of this tutorial](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-express-ssr)
-- [Gatsby](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-gatsby)
-- [Next.js](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs) ([TypeScript version](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs-ts))
-
-## Troubleshooting
-
-Check out the FAQ answer: [My App doesn't render correctly on the server](/material-ui/getting-started/faq/#my-app-doesnt-render-correctly-on-the-server).
+Here is [the reference implementation of this tutorial](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-express-ssr).
+You can more SSR implementations in the GitHub repository under the `/examples` folder, see [the other examples](/material-ui/getting-started/example-projects/).
diff --git a/docs/data/material/guides/understand-mui-packages/understand-mui-packages.md b/docs/data/material/guides/understand-mui-packages/understand-mui-packages.md
@@ -22,7 +22,6 @@ The following is an up-to-date list of `@mui` public packages.
 - `@mui/system`
 - `@mui/styled-engine`
 - `@mui/styled-engine-sc`
-- `@mui/styles`
 
 ### Understanding MUI's products
 

diff --git a/docs/pages/joy-ui/api/alert.json b/docs/pages/joy-ui/api/alert.json
@@ -48,7 +48,7 @@
         "name": "union",
         "description": "'outlined'<br>&#124;&nbsp;'plain'<br>&#124;&nbsp;'soft'<br>&#124;&nbsp;'solid'<br>&#124;&nbsp;string"
       },
-      "default": "'outlined'",
+      "default": "'soft'",
       "additionalInfo": { "joy-variant": true }
     }
   },

diff --git a/docs/pages/joy-ui/api/card.json b/docs/pages/joy-ui/api/card.json
@@ -44,7 +44,7 @@
         "name": "union",
         "description": "'outlined'<br>&#124;&nbsp;'plain'<br>&#124;&nbsp;'soft'<br>&#124;&nbsp;'solid'<br>&#124;&nbsp;string"
       },
-      "default": "'plain'",
+      "default": "'outlined'",
       "additionalInfo": { "joy-variant": true }
     }
   },

diff --git a/docs/pages/material-ui/api/radio.json b/docs/pages/material-ui/api/radio.json
@@ -44,7 +44,7 @@
   "name": "Radio",
   "imports": ["import Radio from '@mui/material/Radio';", "import { Radio } from '@mui/material';"],
   "styles": {
-    "classes": ["root", "checked", "disabled", "colorPrimary", "colorSecondary"],
+    "classes": ["root", "checked", "disabled", "colorPrimary", "colorSecondary", "sizeSmall"],
     "globalClasses": { "checked": "Mui-checked", "disabled": "Mui-disabled" },
     "name": "MuiRadio"
   },

diff --git a/docs/public/static/base-ui/with-tailwind-css/full-stack-radio.png b/docs/public/static/base-ui/with-tailwind-css/full-stack-radio.png
diff --git a/docs/src/modules/components/HighlightedCodeWithTabs.tsx b/docs/src/modules/components/HighlightedCodeWithTabs.tsx
@@ -44,7 +44,7 @@ const StyledTab = styled(Tab)<{ ownerState: { mounted: boolean } }>(({ theme, ow
     cursor: 'pointer',
     borderRadius: '8px',
     position: 'relative',
-    '&:not(:first-child)': {
+    '&:not(:first-of-type)': {
       marginLeft: 0.5,
     },
     ...(ownerState.mounted && {

diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
@@ -281,12 +281,19 @@ const Root = styled('div')(
         theme.shape?.borderRadius ?? lightTheme.shape.borderRadius
       }px)`,
       '& .MuiCallout-content': {
+        minWidth: 0, // Allows content to shrink. Useful when callout contains code block
         display: 'flex',
         flexDirection: 'column',
         gap: 6,
         '&>p, ul': {
           marginBottom: 0,
         },
+        '& .MuiCode-root': {
+          '&>pre': {
+            margin: 0,
+            marginTop: 4,
+          },
+        },
         '&>ul': {
           paddingLeft: 22,
         },
@@ -448,9 +455,8 @@ const Root = styled('div')(
       fontWeight: 500,
       borderRadius: 6,
       border: 'none',
-      backgroundColor: 'transparent',
+      backgroundColor: '#0F1924', // using the code block one-off background color (defined in line 23)
       color: '#FFF',
-      opacity: 0.6,
       transition: theme.transitions.create(['background', 'borderColor', 'display'], {
         duration: theme.transitions.duration.shortest,
       }),
@@ -463,12 +469,15 @@ const Root = styled('div')(
         flexShrink: 0,
         fontSize: '18px',
         margin: 'auto',
+        opacity: 0.6,
       },
       '& .MuiCode-copied-icon': {
         display: 'none',
       },
       '&:hover, &:focus': {
-        opacity: 1,
+        '& svg': {
+          opacity: 1,
+        },
         backgroundColor: lightTheme.palette.primaryDark[500],
         '& .MuiCode-copyKeypress': {
           display: 'block',

diff --git a/docs/translations/api-docs/radio/radio.json b/docs/translations/api-docs/radio/radio.json
@@ -54,6 +54,11 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>color=\"secondary\"</code>"
+    },
+    "sizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"small\"</code>"
     }
   }
 }
diff --git a/package.json b/package.json
@@ -113,7 +113,6 @@
     "@types/react-test-renderer": "^18.0.0",
     "@types/sinon": "^10.0.16",
     "@types/stylis": "^4.2.0",
-    "@types/webpack": "^5.28.1",
     "@types/yargs": "^17.0.24",
     "@typescript-eslint/eslint-plugin": "^6.4.1",
     "@typescript-eslint/parser": "^6.4.1",

diff --git a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx
@@ -186,7 +186,18 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(
   };
 
   React.useEffect(() => {
-    const handleResize = debounce(() => {
+    const handleResize = () => {
+      renders.current = 0;
+
+      // If the TextareaAutosize component is replaced by Suspense with a fallback, the last
+      // ResizeObserver's handler that runs because of the change in the layout is trying to
+      // access a dom node that is no longer there (as the fallback component is being shown instead).
+      // See https://github.com/mui/material-ui/issues/32640
+      if (inputRef.current) {
+        syncHeightWithFlushSync();
+      }
+    };
+    const handleResizeWindow = debounce(() => {
       renders.current = 0;
 
       // If the TextareaAutosize component is replaced by Suspense with a fallback, the last
@@ -202,16 +213,16 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(
     const input = inputRef.current!;
     const containerWindow = ownerWindow(input);
 
-    containerWindow.addEventListener('resize', handleResize);
+    containerWindow.addEventListener('resize', handleResizeWindow);
 
     if (typeof ResizeObserver !== 'undefined') {
       resizeObserver = new ResizeObserver(handleResize);
       resizeObserver.observe(input);
     }
 
     return () => {
-      handleResize.clear();
-      containerWindow.removeEventListener('resize', handleResize);
+      handleResizeWindow.clear();
+      containerWindow.removeEventListener('resize', handleResizeWindow);
       if (resizeObserver) {
         resizeObserver.disconnect();
       }