Merge branch 'master' into fix-loadingButton-in-buttonGroup

.codesandbox/ci.json

@@ -16,6 +16,7 @@
     "packages/mui-styled-engine",
     "packages/mui-styled-engine-sc",
     "packages/mui-material-next",
+    "packages/mui-material-nextjs",
     "packages/mui-joy"
   ],
   "publishDirectory": {
@@ -32,6 +33,7 @@
     "@mui/utils": "packages/mui-utils/build",
     "@mui/base": "packages/mui-base/build",
     "@mui/material-next": "packages/mui-material-next/build",
+    "@mui/material-nextjs": "packages/mui-material-nextjs/build",
     "@mui/joy": "packages/mui-joy/build"
   },
   "sandboxes": [

CHANGELOG.md

@@ -11056,7 +11056,7 @@ A big thanks to the 13 contributors who made this release possible. Here are som
   <Typography variant="poster">poster</Typography>;
   ```
 
-  [A full demo](https://codesandbox.io/s/fontsizetheme-material-demo-forked-l9u05?file=/demo.tsx:725-773)
+  [A full demo](https://codesandbox.io/p/sandbox/fontsizetheme-material-demo-forked-l9u05?file=/demo.tsx:725-773)
 
 - 📚 Add a shortcut to open the Algolia search (#23959) @hmaddisb.
 - And many more 🐛 bug fixes and 📚 improvements.
@@ -12250,7 +12250,7 @@ Here are some highlights ✨:
 
   You can find a [new version](https://mui.com/components/slider-styled/) of the slider in the lab powered by [emotion](https://emotion.sh/).
 
-  In the event that you are already using styled-components in your application, you can swap emotion for styled-components 💅. Check [this CodeSandbox](https://codesandbox.io/s/sliderstyled-with-styled-components-forked-olc27?file=/package.json) for a demo. It relies on aliases to prevent any bundle size overhead.
+  In the event that you are already using styled-components in your application, you can swap emotion for styled-components 💅. Check [this CodeSandbox](https://codesandbox.io/p/sandbox/sliderstyled-with-styled-components-forked-olc27?file=/package.json) for a demo. It relies on aliases to prevent any bundle size overhead.
 
   The new styling solution saves 2kB gzipped in the bundle compared to JSS, and about 14 kB gzipped if you were already using emotion or styled-components.
 

CHANGELOG.old.md

@@ -5790,7 +5790,7 @@ This new package is a significant step forward. Some of the key features:
 - Replace the usage of the old React APIs with the new ones.
 - 15.0 kB gzipped.
 
-Here is an example: https://codesandbox.io/s/vjzn5z4k77.
+Here is an example: https://codesandbox.io/p/sandbox/vjzn5z4k77.
 
 ```jsx
 import Button from '@material-ui/core/Button';

apps/zero-runtime-vite-app/package.json

@@ -27,7 +27,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "jsdom": "^22.1.0",
     "local-library": "file:../local-library",
-    "vite": "4.4.11",
+    "vite": "4.4.12",
     "vitest": "^0.34.6",
     "typescript": "5.3.2"
   },

docs/babel.config.js

@@ -18,6 +18,7 @@ const alias = {
   '@mui/utils': '../packages/mui-utils/src',
   '@mui/base': '../packages/mui-base/src',
   '@mui/material-next': '../packages/mui-material-next/src',
+  '@mui/material-nextjs': '../packages/mui-material-nextjs/src',
   '@mui/joy': '../packages/mui-joy/src',
   docs: './',
   modules: '../modules',

docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md

@@ -518,4 +518,4 @@ These are the things we covered in this guide:
 We used the `component` prop to pass them into the parent component.\
 ✅ How to apply conditional styling based on the owner component's state using a callback as value for the `slotProps` prop.
 
-Get all the code used in this guide in the [Base UI with Tailwind CSS](https://codesandbox.io/s/working-with-tailwind-css-dhmf8w) example project.
+Get all the code used in this guide in the [Base UI with Tailwind CSS](https://codesandbox.io/p/sandbox/working-with-tailwind-css-dhmf8w) example project.

docs/data/material/components/popper/PositionedPopper.js

@@ -20,7 +20,14 @@ export default function PositionedPopper() {
 
   return (
     <Box sx={{ width: 500 }}>
-      <Popper open={open} anchorEl={anchorEl} placement={placement} transition>
+      <Popper
+        // Note: The following zIndex style is specifically for documentation purposes and may not be necessary in your application.
+        sx={{ zIndex: 1200 }}
+        open={open}
+        anchorEl={anchorEl}
+        placement={placement}
+        transition
+      >
         {({ TransitionProps }) => (
           <Fade {...TransitionProps} timeout={350}>
             <Paper>

docs/data/material/components/popper/PositionedPopper.tsx

@@ -22,7 +22,14 @@ export default function PositionedPopper() {
 
   return (
     <Box sx={{ width: 500 }}>
-      <Popper open={open} anchorEl={anchorEl} placement={placement} transition>
+      <Popper
+        // Note: The following zIndex style is specifically for documentation purposes and may not be necessary in your application.
+        sx={{ zIndex: 1200 }}
+        open={open}
+        anchorEl={anchorEl}
+        placement={placement}
+        transition
+      >
         {({ TransitionProps }) => (
           <Fade {...TransitionProps} timeout={350}>
             <Paper>

docs/data/material/getting-started/supported-components/supported-components.md

@@ -1,6 +1,6 @@
 # Supported components
 
-<p class="description">The following is a list of Material Design components & features. Those currently supported by Material UI are highlighted ✓.</p>
+<p class="description">The following is a list of Material Design components & features.</p>
 
 While we strive to follow the Material Design guidelines where practical (applying
 common sense where guidelines contradict - a more common occurrence than

docs/data/material/guides/interoperability/interoperability.md

@@ -20,7 +20,7 @@ Nothing fancy, just plain CSS.
 
 {{"demo": "StyledComponents.js", "hideToolbar": true}}
 
-[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/plain-css-fdue7)
+[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/plain-css-fdue7)
 
 **PlainCssSlider.css**
 
@@ -178,7 +178,7 @@ export default function PlainCssSliderDeep2() {
 Explicitly providing the class names to the component is too much effort?
 [You can target the class names generated by Material UI](/system/styles/advanced/).
 
-[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/global-classnames-dho8k)
+[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/global-classnames-dho8k)
 
 **GlobalCssSlider.css**
 
@@ -304,7 +304,7 @@ from `@mui/material/styles` and have direct access to the theme.
 
 {{"demo": "StyledComponents.js", "hideToolbar": true}}
 
-[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/styled-components-interoperability-w9z9d)
+[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/styled-components-interoperability-w9z9d)
 
 ```jsx
 import * as React from 'react';
@@ -429,7 +429,7 @@ bundling solution people are using.
 
 {{"demo": "StyledComponents.js", "hideToolbar": true}}
 
-[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/css-modules-nuyg8)
+[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/css-modules-nuyg8)
 
 **CssModulesSlider.module.css**
 
@@ -800,7 +800,7 @@ export default function SliderThumbOverrides() {
 ## ~~JSS~~ TSS
 
 [JSS](https://cssinjs.org/) itself is no longer supported in Material UI, however,
-if you like the hook-based API (`makeStyles` → `useStyles`) that [`react-jss`](https://codesandbox.io/s/j3l06yyqpw) was offering you can opt for [`tss-react`](https://github.com/garronej/tss-react).
+if you like the hook-based API (`makeStyles` → `useStyles`) that [`react-jss`](https://codesandbox.io/p/sandbox/j3l06yyqpw) was offering you can opt for [`tss-react`](https://github.com/garronej/tss-react).
 
 [TSS](https://docs.tss-react.dev) integrates well with Material UI and provide a better
 TypeScript support than JSS.