Merge branch 'master' of https://github.com/mui/material-ui into docs…

…/joy-default-dark

.github/workflows/check-if-pr-has-label.yml

@@ -4,6 +4,8 @@ on:
   pull_request:
     types: [opened, reopened, labeled, unlabeled]
 
+permissions: {}
+
 jobs:
   test-label-applied:
     # Tests that label is added on the PR

.github/workflows/ci.yml

@@ -8,6 +8,8 @@ on:
       - 'renovate/**'
   pull_request:
 
+permissions: {}
+
 jobs:
   # Tests dev-only scripts across all supported dev environments
   test-dev:

.github/workflows/codeql.yml

@@ -4,6 +4,8 @@ on:
   schedule:
     - cron: '0 2 * * *'
 
+permissions: {}
+
 jobs:
   analyze:
     name: Analyze

.github/workflows/maintenance.yml

@@ -1,5 +1,7 @@
 name: Maintenance
 
+permissions: {}
+
 on:
   # So that PRs touching the same files as the push are updated
   push:
@@ -27,7 +29,7 @@ jobs:
     steps:
       - run: echo "${{ github.actor }}"
       - name: check if prs are dirty
-        uses: eps1lon/actions-label-merge-conflict@releases/2.x
+        uses: eps1lon/actions-label-merge-conflict@fd1f295ee7443d13745804bc49fe158e240f6c6e # tag=v2.1.0
         with:
           dirtyLabel: 'PR: out-of-date'
           removeOnDirtyLabel: 'PR: ready to ship'

.github/workflows/mark-duplicate.yml

@@ -4,6 +4,8 @@ on:
   issue_comment:
     types: [created]
 
+permissions: {}
+
 jobs:
   mark-duplicate:
     runs-on: ubuntu-latest

.github/workflows/no-response.yml

@@ -9,6 +9,8 @@ on:
     # Schedule for five minutes after the hour, every hour
     - cron: '5 * * * *'
 
+permissions: {}
+
 jobs:
   noResponse:
     runs-on: ubuntu-latest

.github/workflows/scorecards.yml

@@ -5,6 +5,8 @@ on:
   schedule:
     - cron: '0 2 * * *'
 
+permissions: {}
+
 jobs:
   analysis:
     name: Scorecards analysis
@@ -25,7 +27,7 @@ jobs:
           persist-credentials: false
 
       - name: Run analysis
-        uses: ossf/scorecard-action@865b4092859256271290c77adbd10a43f4779972 # renovate: tag=v2.0.3
+        uses: ossf/scorecard-action@99c53751e09b9529366343771cc321ec74e9bd3d # renovate: tag=v2.0.6
         with:
           results_file: results.sarif
           results_format: sarif

.github/workflows/support-stackoverflow.yml

@@ -5,6 +5,8 @@ on:
   issues:
     types: [labeled, unlabeled, reopened]
 
+permissions: {}
+
 jobs:
   mark-support:
     runs-on: ubuntu-latest

README.md

@@ -140,6 +140,7 @@ via [OpenCollective](https://opencollective.com/mui) or via [Patreon](https://ww
   <a href="https://www.dialmycalls.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/dialmycalls/f5ae9ab/avatar/192.png" alt="dialmycalls.com" title="Send text messages, calls & emails to thousands with ease." loading="lazy" /></a>
   <a href="https://goread.io/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/goread_io/eb6337d/logo/192.png" alt="goread.io" title="Instagram followers, likes, power likes, views, comments, saves in minutes." loading="lazy" /></a>
   <a href="https://icons8.com?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/icons8/7fa1641/logo/192.png" alt="Icons8" title="We provide the neat icons, photos, illustrations, and music. Developers, use our API to insert all the content we have into your apps." loading="lazy"></a>
+  <a href="https://ipinfo.ai?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/ipinfoai/04f41d5/logo/192.png" alt="ipinfo.ai" title="We offer various IP data API services, including IP Geolocation Data, ASN Data, Company Data, IP Ranges Data, Abuse Contacts Data, Anonymous Browsing Detection, etc." loading="lazy"></a>
 </p>
 
 Gold Sponsors are those who have pledged \$500/month or more to MUI.

docs/data/joy/components/card/CardVariables.js

@@ -10,7 +10,7 @@ import Link from '@mui/joy/Link';
 import TextField from '@mui/joy/TextField';
 import Typography from '@mui/joy/Typography';
 import BrandingProvider from 'docs/src/BrandingProvider';
-import HighlighedCode from 'docs/src/modules/components/HighlightedCode';
+import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 
 function formatSx(sx) {
   const lines = Object.keys(sx);
@@ -177,7 +177,7 @@ export default function CardVariables() {
         </Box>
       </Sheet>
       <BrandingProvider mode="dark">
-        <HighlighedCode
+        <HighlightedCode
           code={`<Card${formatSx(sx)}>`}
           language="jsx"
           sx={{ display: { xs: 'none', md: 'initial' } }}

docs/data/material/components/pagination/CustomIcons.js

@@ -12,7 +12,7 @@ export default function CustomIcons() {
         count={10}
         renderItem={(item) => (
           <PaginationItem
-            components={{ previous: ArrowBackIcon, next: ArrowForwardIcon }}
+            slots={{ previous: ArrowBackIcon, next: ArrowForwardIcon }}
             {...item}
           />
         )}

docs/data/material/components/pagination/CustomIcons.tsx

@@ -12,7 +12,7 @@ export default function CustomIcons() {
         count={10}
         renderItem={(item) => (
           <PaginationItem
-            components={{ previous: ArrowBackIcon, next: ArrowForwardIcon }}
+            slots={{ previous: ArrowBackIcon, next: ArrowForwardIcon }}
             {...item}
           />
         )}

docs/data/material/components/pagination/CustomIcons.tsx.preview

@@ -2,7 +2,7 @@
   count={10}
   renderItem={(item) => (
     <PaginationItem
-      components={{ previous: ArrowBackIcon, next: ArrowForwardIcon }}
+      slots={{ previous: ArrowBackIcon, next: ArrowForwardIcon }}
       {...item}
     />
   )}

docs/data/material/discover-more/backers/backers.md

@@ -8,7 +8,7 @@ The core of MUI is a crowd-funded open-source project, licensed under the permis
 
 ### Diamond 💎
 
-<p style="display: flex; justify-content: center; align-items: center;">
+<p style="display: flex; justify-content: center; align-items: center; flex-wrap: wrap;">
   <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="octopus" href="https://octopus.com/?utm_source=MUI&utm_medium=referral&utm_content=backers" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="128" width="128" src="https://i.ibb.co/w0HF0Nz/Logo-Blue-140px-rgb.png" srcset="https://i.ibb.co/w0HF0Nz/Logo-Blue-140px-rgb.png 2x" alt="octopus" title="Repeatable, reliable deployments" loading="lazy" /></a>
   <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="doit-intl" href="https://www.doit-intl.com/flexsave/?utm_source=MUI&utm_medium=referral&utm_content=backers" rel="noopener sponsored" target="_blank" style="margin-right: 24px;"><img height="128" width="128" src="https://avatars.githubusercontent.com/u/8424863?s=128" srcset="https://avatars.githubusercontent.com/u/8424863?s=256 2x" alt="doit-intl" title="Management Platform for Google Cloud and AWS" loading="lazy" /></a>
   <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="zesty.io" href="https://www.zesty.io/integrations/mui-nextjs/?utm_source=mui&utm_medium=referral&utm_campaign=sponsor" rel="noopener sponsored" target="_blank"><img height="90" width="90" src="https://brand.zesty.io/zesty-io-logo.svg" alt="zesty.io" title="The only Next.js CMS you need" loading="lazy" /></a>
@@ -33,6 +33,7 @@ via [OpenCollective](https://opencollective.com/mui) or via [Patreon](https://ww
   <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="dialmycalls" href="https://www.dialmycalls.com/?utm_source=MUI&utm_medium=referral&utm_content=backers" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://images.opencollective.com/dialmycalls/f5ae9ab/avatar/96.png" srcset="https://images.opencollective.com/dialmycalls/f5ae9ab/avatar/192.png 2x" alt="dialmycalls.com" title="Send text messages, calls & emails to thousands with ease." loading="lazy" /></a>
   <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="goread.io" href="https://goread.io/?utm_source=MUI&utm_medium=referral&utm_content=backers" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://images.opencollective.com/goread_io/eb6337d/logo/96.png" srcset="https://images.opencollective.com/goread_io/eb6337d/logo/192.png 2x" alt="goread.io" title="Instagram followers, likes, power likes, views, comments, saves in minutes." loading="lazy" /></a>
   <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="icons8.com" href="https://icons8.com?utm_source=MUI&utm_medium=referral&utm_content=backers" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://images.opencollective.com/icons8/7fa1641/logo/96.png" srcset="https://images.opencollective.com/icons8/7fa1641/logo/192.png 2x" alt="Icons8" title="We provide the neat icons, photos, illustrations, and music. Developers, use our API to insert all the content we have into your apps." loading="lazy"></a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="ipinfo.ai" href="https://ipinfo.ai?utm_source=MUI&utm_medium=referral&utm_content=backers" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://images.opencollective.com/ipinfoai/04f41d5/logo/96.png" srcset="https://images.opencollective.com/ipinfoai/04f41d5/logo/192.png 2x" alt="ipinfo.ai" title="We offer various IP data API services, including IP Geolocation Data, ASN Data, Company Data, IP Ranges Data, Abuse Contacts Data, Anonymous Browsing Detection, etc." loading="lazy"></a>
 </p>
 
 Gold Sponsors are those who have pledged \$500/month or more to MUI.

docs/data/material/discover-more/related-projects/related-projects.md

@@ -26,7 +26,7 @@ Feel free to submit a pull request!
 ### Image
 
 - [mui-image](https://mui-image.surge.sh): The only Material UI image component to satisfy the Material Design guidelines for loading images.
-- [material-ui-image](https://mui.wertarbyte.com/#material-ui-image): Adds a "materializing" effect to images so they fade in like [Material's image loading pattern](https://material.io/archive/guidelines/patterns/loading-images.html#loading-images-usage) suggests.
+- [material-ui-image](https://mui.wertarbyte.com/#material-ui-image): Adds a "materializing" effect to images so they fade in like [Material's image loading pattern](https://m1.material.io/patterns/loading-images.html) suggests.
 
 ### Chips
 

docs/data/material/guides/api/api.md

@@ -91,16 +91,23 @@ Nested components inside a component have:
 
 ### Prop naming
 
-The name of a boolean prop should be chosen based on the **default value**. This choice allows:
+- **Boolean**
 
-- the shorthand notation. For example, the `disabled` attribute on an input element, if supplied, defaults to `true`:
+  - The default value of a boolean prop should be `false`. This allows for better shorthand notation. Consider an example of an input that is enabled by default. How should you name the prop that controls this state? It should be called `disabled`:
 
-  ```jsx
-  <Input enabled={false} /> ❌
-  <Input disabled /> ✅
-  ```
+    ```jsx
+    ❌ <Input enabled={false} />
+    ✅ <Input disabled />
+    ```
+
+  - If the name of the boolean is a single word, it should be an adjective or a noun rather than a verb. This is because props describe _states_ and not _actions_. For example an input prop can be controlled by a state, which wouldn't be described with a verb:
+
+    ```jsx
+    const [disabled, setDisabled] = React.useState(false);
 
-- developers to know what the default value is from the name of the boolean prop. It's always the opposite.
+    ❌ <Input disable={disabled} />
+    ✅ <Input disabled={disabled} />
+    ```
 
 ### Controlled components
 

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

@@ -134,7 +134,7 @@ export default function PlainCssSliderDeep1() {
 }
 ```
 
-The above demo relies on the [default `className` values](/system/styles/advanced/), but you can provide your own class name with the `componentsProps` API.
+The above demo relies on the [default `className` values](/system/styles/advanced/), but you can provide your own class name with the `slotProps` API.
 
 **PlainCssSliderDeep2.css**
 
@@ -166,7 +166,7 @@ export default function PlainCssSliderDeep2() {
       <Slider
         defaultValue={30}
         className="slider"
-        componentsProps={{ thumb: { className: 'thumb' } }}
+        slotProps={{ thumb: { className: 'thumb' } }}
       />
     </div>
   );
@@ -334,15 +334,15 @@ The following examples override the slider's `thumb` style in addition to the cu
 
 {{"demo": "StyledComponentsDeep.js", "defaultCodeOpen": true}}
 
-The above demo relies on the [default `className` values](/system/styles/advanced/), but you can provide your own class name with the `componentsProps` API.
+The above demo relies on the [default `className` values](/system/styles/advanced/), but you can provide your own class name with the `slotProps` API.
 
 ```jsx
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Slider from '@mui/material/Slider';
 
 const CustomizedSlider = styled((props) => (
-  <Slider componentsProps={{ thumb: { className: 'thumb' } }} {...props} />
+  <Slider slotProps={{ thumb: { className: 'thumb' } }} {...props} />
 ))`
   color: #20b2aa;
 
@@ -546,7 +546,7 @@ export default function CssModulesSliderDeep1() {
 }
 ```
 
-The above demo relies on the [default `className` values](/system/styles/advanced/), but you can provide your own class name with the `componentsProps` API.
+The above demo relies on the [default `className` values](/system/styles/advanced/), but you can provide your own class name with the `slotProps` API.
 
 **CssModulesSliderDeep2.module.css**
 
@@ -579,7 +579,7 @@ export default function CssModulesSliderDeep2() {
       <Slider
         defaultValue={30}
         className={styles.slider}
-        componentsProps={{ thumb: { className: styles.thumb } }}
+        slotProps={{ thumb: { className: styles.thumb } }}
       />
     </div>
   );
@@ -764,7 +764,7 @@ export default function SliderThumbOverrides() {
       <Slider
         defaultValue={30}
         className="text-teal-600"
-        componentsProps={{ thumb: { className: 'rounded-sm' } }}
+        slotProps={{ thumb: { className: 'rounded-sm' } }}
       />
     </div>
   );

docs/pages/blog/2020.md

@@ -104,7 +104,7 @@ It will be built on top of the unstyled components.
 
 While the completion of the unstyled components was originally part of the v5 milestone,
 we will likely finish this effort independently.
-Outside of the requirement to introduce breaking changes on the component customization API, e.g. from `PaperProps` to `componentsProps`, [RFC #20012](https://github.com/mui/material-ui/issues/21453), we can work on unstyled at the same time we make progress with the second theme. The two efforts should go hand in hand.
+Outside of the requirement to introduce breaking changes on the component customization API, e.g. from `PaperProps` to `slotProps`, [RFC #20012](https://github.com/mui/material-ui/issues/21453), we can work on unstyled at the same time we make progress with the second theme. The two efforts should go hand in hand.
 
 ### Scale
 

docs/pages/blog/lab-date-pickers-to-mui-x.md

@@ -62,7 +62,7 @@ All other date and time picker components are available in `mui/x-date-pickers`
 
 ## How do I purchase a commercial license?
 
-Visit [the MUI Store](https://mui.com/store/items/material-ui-pro/) to purchase a commercial license.
+Visit [the MUI Store](https://mui.com/store/items/mui-x-pro/) to purchase a commercial license.
 
 ## How do I migrate?
 

docs/pages/blog/making-customizable-components.md

@@ -263,8 +263,8 @@ const CustomFilterPanel = (props) => (
 ```
 
 But this strategy of adding props to customize components is a bit verbose.
-So we added a way to pass props to an existing component using `componentsProps`.
-You can pass props to every slot on `components` using `componentsProps`.
+So we added a way to pass props to an existing component using `slotProps`.
+You can pass props to every slot on `slots` using `slotProps`.
 
 Here's how to pass `columnsSort='asc'` to the filter panel slot:
 

docs/pages/index.tsx

@@ -22,7 +22,26 @@ export default function Home() {
       <Head
         title="MUI: The React component library you always wanted"
         description="MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design."
-      />
+      >
+        <script
+          type="application/ld+json"
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify({
+              '@context': 'https://schema.org',
+              '@type': 'Organization',
+              name: 'MUI',
+              url: 'https://mui.com/',
+              logo: 'https://mui.com/static/logo.png',
+              sameAs: [
+                'https://twitter.com/MUI_hq',
+                'https://github.com/mui/',
+                'https://opencollective.com/mui',
+              ],
+            }),
+          }}
+        />
+      </Head>
       <NoSsr>
         <NewsletterToast />
       </NoSsr>
@@ -40,26 +59,6 @@ export default function Home() {
         <Divider />
       </main>
       <AppFooter />
-      <script
-        type="application/ld+json"
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{
-          __html: `
-{
-  "@context": "https://schema.org",
-  "@type": "Organization",
-  "name": "MUI",
-  "url": "https://mui.com/",
-  "logo": "https://mui.com/static/logo.png",
-  "sameAs": [
-    "https://twitter.com/MUI_hq",
-    "https://github.com/mui/",
-    "https://opencollective.com/mui"
-  ]
-}
-          `,
-        }}
-      />
     </BrandingCssVarsProvider>
   );
 }

docs/pages/material-ui/api/alert.json

@@ -37,6 +37,17 @@
       },
       "default": "'success'"
     },
+    "slotProps": {
+      "type": { "name": "shape", "description": "{ closeButton?: object, closeIcon?: object }" },
+      "default": "{}"
+    },
+    "slots": {
+      "type": {
+        "name": "shape",
+        "description": "{ closeButton?: elementType, closeIcon?: elementType }"
+      },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",

docs/pages/material-ui/api/autocomplete.json

@@ -86,6 +86,13 @@
       },
       "default": "'medium'"
     },
+    "slotProps": {
+      "type": {
+        "name": "shape",
+        "description": "{ clearIndicator?: object, paper?: object, popper?: object, popupIndicator?: object }"
+      },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",

docs/pages/material-ui/api/avatar-group.json

@@ -8,6 +8,10 @@
       "default": "{}"
     },
     "max": { "type": { "name": "custom", "description": "number" }, "default": "5" },
+    "slotProps": {
+      "type": { "name": "shape", "description": "{ additionalAvatar?: object }" },
+      "default": "{}"
+    },
     "spacing": {
       "type": {
         "name": "union",