Merge branch 'master' into card-accordion-actions-child

mui · Dec 13, 2023 · b99853a · b99853a
2 parents 7e2bf9a + ba4b1ce
commit b99853a
Show file tree

Hide file tree

Showing 126 changed files with 1,101 additions and 608 deletions.
diff --git a/.codesandbox/ci.json b/.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": [

diff --git a/.github/ISSUE_TEMPLATE/1.bug.yml b/.github/ISSUE_TEMPLATE/1.bug.yml
@@ -1,6 +1,6 @@
 name: Bug report 🐛
 description: Create a bug report for MUI Core.
-labels: ['status: needs triage']
+labels: ['status: waiting for maintainer']
 body:
   - type: markdown
     attributes:

diff --git a/.github/ISSUE_TEMPLATE/2.feature.yml b/.github/ISSUE_TEMPLATE/2.feature.yml
@@ -1,6 +1,6 @@
 name: Feature request 💄
 description: Suggest a new idea for MUI Core.
-labels: ['status: needs triage']
+labels: ['status: waiting for maintainer']
 body:
   - type: markdown
     attributes:

diff --git a/.github/ISSUE_TEMPLATE/3.rfc.yml b/.github/ISSUE_TEMPLATE/3.rfc.yml
@@ -1,7 +1,7 @@
 name: RFC 💬
 description: Request for comments for your proposal.
 title: '[RFC] '
-labels: ['status: needs triage', 'RFC']
+labels: ['status: waiting for maintainer', 'RFC']
 body:
   - type: markdown
     attributes:

diff --git a/.github/ISSUE_TEMPLATE/4.docs-feedback.yml b/.github/ISSUE_TEMPLATE/4.docs-feedback.yml
@@ -1,6 +1,6 @@
 name: Docs feedback
 description: Improve documentation about MUI Core.
-labels: ['status: needs triage', 'support: docs-feedback']
+labels: ['status: waiting for maintainer', 'support: docs-feedback']
 title: '[docs] '
 body:
   - type: markdown

diff --git a/.github/ISSUE_TEMPLATE/5.priority-support.yml b/.github/ISSUE_TEMPLATE/5.priority-support.yml
@@ -1,7 +1,7 @@
 name: 'Priority Support: SLA ⏰'
 description: I'm an MUI X Premium user and we have purchased the Priority Support add-on. I can't find a solution to my problem with MUI Core (Material UI, Base UI, MUI System, and Joy UI).
 title: '[question] '
-labels: ['status: needs triage', 'support: unknown']
+labels: ['status: waiting for maintainer', 'support: unknown']
 body:
   - type: markdown
     attributes:

diff --git a/.github/workflows/ensure-triage-label.yml b/.github/workflows/ensure-triage-label.yml
@@ -30,6 +30,6 @@ jobs:
                 issue_number: context.issue.number,
                 owner: context.repo.owner,
                 repo: context.repo.repo,
-                labels: ['status: needs triage']
+                labels: ['status: waiting for maintainer']
               })
             }
diff --git a/.github/workflows/mark-duplicate.yml b/.github/workflows/mark-duplicate.yml
@@ -19,5 +19,5 @@ jobs:
           actions: 'mark-duplicate'
           token: ${{ secrets.GITHUB_TOKEN }}
           duplicate-labels: 'duplicate'
-          remove-labels: 'status: incomplete,status: needs triage'
+          remove-labels: 'status: incomplete,status: waiting for maintainer'
           close-issue: true
diff --git a/.github/workflows/no-response.yml b/.github/workflows/no-response.yml
@@ -1,8 +1,10 @@
 name: No response
 
-# Both `issue_comment` and `scheduled` event types are required for this Action
+# `issues`.`closed`, `issue_comment`.`created`, and `scheduled` event types are required for this Action
 # to work properly.
 on:
+  issues:
+    types: [closed]
   issue_comment:
     types: [created]
   schedule:
@@ -18,13 +20,15 @@ jobs:
       contents: read
       issues: write
     steps:
-      - uses: lee-dohm/no-response@9bb0a4b5e6a45046f00353d5de7d90fb8bd773bb # v0.5.0
+      - uses: MBilalShafi/no-response-add-label@629add01d7b6f8e120811f978c42703736098947
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           # Number of days of inactivity before an Issue is closed for lack of response
           daysUntilClose: 7
           # Label requiring a response
-          responseRequiredLabel: 'status: needs more information'
+          responseRequiredLabel: 'status: waiting for author'
+          # Label to add back when required label is removed
+          optionalFollowupLabel: 'status: waiting for maintainer'
           # Comment to post when closing an Issue for lack of response. Set to `false` to disable
           closeComment: >
             Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed.

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,63 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.15.0
+
+<!-- generated comparing v5.14.20..master -->
+
+_Dec 11, 2023_
+
+A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Added [a new package for a better Material UI integration with Next.js](https://mui.com/material-ui/guides/nextjs) (#39947) @siriwatknp
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 12 -->Revert "[Select][material-ui] Add name to hidden input element" (#40174) @mj12albert
+- &#8203;<!-- 02 -->[material-ui] Refactor ComponentsVariants type into a generic (#39623) @blakenetz
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 01 -->[material-ui] Add new Next.js integration package (#39947) @siriwatknp
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 11 -->[Badge][material-next] Apply new OwnerState type to Badge (#40119) @lhilgert9
+- &#8203;<!-- 06 -->[material-next][ButtonGroup] Change `ButtonGroup` files to ts (#39794) @lhilgert9
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 05 -->[icons] Add X logo (#38811) @abreel
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 10 -->[base-ui] useControllableReducer warns when controlled props become uncontrolled (and vice versa) (#39096) @mj12albert
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 04 -->[joy-ui][Radio][Input] Fix inheritance of disabled prop (#39934) @sai6855
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 03 -->[lab][LoadingButton] LoadingButton now inherits props from ButtonGroup (#39679) @lhilgert9
+
+### Docs
+
+- &#8203;<!-- 09 -->[docs] Fix reference to non-existent checkmark in supported-components.md (#40056) @mbrookes
+- &#8203;<!-- 09 -->[docs][base-ui] Add copy button & primary color picker to the component gallery page (#39884) @mnajdova
+- &#8203;<!-- 08 -->[docs-infra] Update CodeSandbox links (#39992) @anle9650
+- &#8203;<!-- 04 -->[material-ui][docs] Fix wrong root element for emotion styles in shadow DOM (#35326) @EloB
+- &#8203;<!-- 03 -->[material-ui][docs] Move the responsive font charts from recharts to MUI X (#40097) @alexfauquette
+- &#8203;<!-- 02 -->[joy-ui][templates] Remove outdated code (#40095) @zanivan
+- &#8203;<!-- 05 -->[material-ui][docs][Popper] Update Positioned Popper demo styles (#40170) @sai6855
+
+### Core
+
+- &#8203;<!-- 08 -->[blog] Add a Phuket retreat blog post (#40055) @mikailaread
+- &#8203;<!-- 07 -->[blog] Adjust the latest MUI X blog post (#40046) @danilo-leal
+- &#8203;<!-- 05 -->[core] Migrate from tslint to eslint (#40020) @ZeeshanTamboli
+
+All contributors of this release in alphabetical order: @abreel, @alexfauquette, @anle9650, @blakenetz, @danilo-leal, @EloB, @lhilgert9, @mbrookes, @mikailaread, @mj12albert, @mnajdova, @sai6855, @siriwatknp, @zanivan, @ZeeshanTamboli
+
 ## 5.14.20
 
 <!-- generated comparing v5.14.19..master -->
@@ -11056,7 +11114,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 +12308,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.
 

diff --git a/CHANGELOG.old.md b/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';

diff --git a/benchmark/package.json b/benchmark/package.json
@@ -15,9 +15,9 @@
     "@emotion/react": "^11.11.1",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.14.20",
-    "@mui/styles": "^5.14.20",
-    "@mui/system": "^5.14.20",
+    "@mui/material": "^5.14.21",
+    "@mui/styles": "^5.14.21",
+    "@mui/system": "^5.14.21",
     "@styled-system/css": "^5.1.5",
     "benchmark": "^2.1.4",
     "docs": "^5.0.0",

diff --git a/docs/babel.config.js b/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',

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
@@ -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.
diff --git a/docs/data/material/components/button-group/LoadingButtonGroup.js b/docs/data/material/components/button-group/LoadingButtonGroup.js
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import Button from '@mui/material/Button';
+import LoadingButton from '@mui/lab/LoadingButton';
+import SaveIcon from '@mui/icons-material/Save';
+
+export default function LoadingButtonGroup() {
+  return (
+    <ButtonGroup variant="outlined" aria-label="loading button group">
+      <Button>Submit</Button>
+      <LoadingButton>Fetch data</LoadingButton>
+      <LoadingButton loading loadingPosition="start" startIcon={<SaveIcon />}>
+        Save
+      </LoadingButton>
+    </ButtonGroup>
+  );
+}
diff --git a/docs/data/material/components/button-group/LoadingButtonGroup.tsx b/docs/data/material/components/button-group/LoadingButtonGroup.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import Button from '@mui/material/Button';
+import LoadingButton from '@mui/lab/LoadingButton';
+import SaveIcon from '@mui/icons-material/Save';
+
+export default function LoadingButtonGroup() {
+  return (
+    <ButtonGroup variant="outlined" aria-label="loading button group">
+      <Button>Submit</Button>
+      <LoadingButton>Fetch data</LoadingButton>
+      <LoadingButton loading loadingPosition="start" startIcon={<SaveIcon />}>
+        Save
+      </LoadingButton>
+    </ButtonGroup>
+  );
+}
diff --git a/docs/data/material/components/button-group/LoadingButtonGroup.tsx.preview b/docs/data/material/components/button-group/LoadingButtonGroup.tsx.preview
@@ -0,0 +1,7 @@
+<ButtonGroup variant="outlined" aria-label="loading button group">
+  <Button>Submit</Button>
+  <LoadingButton>Fetch data</LoadingButton>
+  <LoadingButton loading loadingPosition="start" startIcon={<SaveIcon />}>
+    Save
+  </LoadingButton>
+</ButtonGroup>
diff --git a/docs/data/material/components/button-group/button-group.md b/docs/data/material/components/button-group/button-group.md
@@ -1,7 +1,7 @@
 ---
 productId: material-ui
 title: React Button Group component
-components: Button, ButtonGroup
+components: Button, ButtonGroup, LoadingButton
 githubLabel: 'component: ButtonGroup'
 ---
 
@@ -47,3 +47,11 @@ The button group can be displayed vertically using the `orientation` prop.
 You can remove the elevation with the `disableElevation` prop.
 
 {{"demo": "DisableElevation.js"}}
+
+## Experimental APIs
+
+### Loading button
+
+You can use the [`<LoadingButton />`](/material-ui/react-button/#loading-button) from [`@mui/lab`](/material-ui/about-the-lab/) in the button group.
+
+{{"demo": "LoadingButtonGroup.js"}}
diff --git a/docs/data/material/components/popper/PositionedPopper.js b/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>

diff --git a/docs/data/material/components/popper/PositionedPopper.tsx b/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>

diff --git a/docs/data/material/getting-started/supported-components/supported-components.md b/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

diff --git a/docs/data/material/guides/interoperability/interoperability.md b/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.