Merge remote-tracking branch 'upstream/master' into unstyled-slider-s…

…tyles

.github/workflows/ci.yml

@@ -25,7 +25,7 @@ jobs:
         os: [macos-latest, windows-latest, ubuntu-latest]
     steps:
       - run: echo "${{ github.actor }}"
-      - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
+      - uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
         with:
           # fetch all tags which are required for `yarn release:changelog`
           fetch-depth: 0

.github/workflows/codeql.yml

@@ -16,10 +16,10 @@ jobs:
       security-events: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
+        uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@32dc499307d133bb5085bae78498c0ac2cf762d5 # v2.2.5
+        uses: github/codeql-action/init@b2c19fb9a2a485599ccf4ed5d65527d94bc57226 # v2.3.0
         with:
           languages: typescript
           config-file: ./.github/codeql/codeql-config.yml
@@ -30,4 +30,4 @@ jobs:
           # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
           # queries: security-extended,security-and-quality
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@32dc499307d133bb5085bae78498c0ac2cf762d5 # v2.2.5
+        uses: github/codeql-action/analyze@b2c19fb9a2a485599ccf4ed5d65527d94bc57226 # v2.3.0

.github/workflows/scorecards.yml

@@ -22,12 +22,12 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
+        uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
         with:
           persist-credentials: false
 
       - name: Run analysis
-        uses: ossf/scorecard-action@e38b1902ae4f44df626f11ba0734b14fb91f8f86 # v2.1.2
+        uses: ossf/scorecard-action@80e868c13c90f172d68d1f4501dee99e2479f7af # v2.1.3
         with:
           results_file: results.sarif
           results_format: sarif
@@ -43,6 +43,6 @@ jobs:
 
       # Upload the results to GitHub's code scanning dashboard.
       - name: Upload to code-scanning
-        uses: github/codeql-action/upload-sarif@32dc499307d133bb5085bae78498c0ac2cf762d5 # v2.2.5
+        uses: github/codeql-action/upload-sarif@b2c19fb9a2a485599ccf4ed5d65527d94bc57226 # v2.3.0
         with:
           sarif_file: results.sarif

CHANGELOG.old.md

@@ -11757,7 +11757,7 @@ We are releasing sooner than we use to for this **special day** :christmas_tree:
 That wouldn't have been possible without this awesome community.
 **Thank you!**
 
-But this's just the beginning, some [exciting stuff](https://github.com/mui/material-ui/blob/next/ROADMAP.md) is coming in 2017 :sparkles:.
+But this's just the beginning, some [exciting stuff](https://github.com/mui/material-ui/blob/v0.16.6/ROADMAP.md) is coming in 2017 :sparkles:.
 You can preview a **very early** version of the `next` branch following [this link](https://material-ui-next.com).
 
 ### Component Fixes / Enhancements

README.md

@@ -11,7 +11,7 @@
 
 - [_Joy UI_](https://mui.com/joy-ui/getting-started/overview/) is a beautifully designed library of React UI components.
 
-- [_MUI Base_](https://mui.com/base/getting-started/overview/) is our library of "unstyled" components and low-level hooks. With Base, you gain complete control over your app's CSS and accessibility features.
+- [_Base UI_](https://mui.com/base/getting-started/overview/) is our library of "unstyled" components and low-level hooks. With Base, you gain complete control over your app's CSS and accessibility features.
 
 - [_MUI System_](https://mui.com/system/getting-started/overview/) is a collection of CSS utilities to help you rapidly lay out custom designs.
 
@@ -63,9 +63,9 @@ yarn add @mui/material @emotion/react @emotion/styled
 **Note:** `@next` only points to pre-releases.
 Use `@latest` for the latest stable release.
 
-### MUI Base
+### Base UI
 
-MUI Base is available as an [npm package](https://www.npmjs.com/package/@mui/base).
+Base UI is available as an [npm package](https://www.npmjs.com/package/@mui/base).
 
 **npm:**
 
@@ -79,7 +79,7 @@ npm install @mui/base
 yarn add @mui/base
 ```
 
-**Note**: MUI Base is still in alpha.
+**Note**: Base UI is still in alpha.
 We are adding new components regularly and you're welcome to contribute!
 
 ### MUI System
@@ -180,7 +180,7 @@ Our documentation features [a collection of example projects using Material UI](
 
 - [Material UI](https://mui.com/material-ui/getting-started/overview/)
 - [Joy UI](https://mui.com/joy-ui/getting-started/overview/)
-- [MUI Base](https://mui.com/base/getting-started/overview/)
+- [Base UI](https://mui.com/base/getting-started/overview/)
 - [MUI System](https://mui.com/system/getting-started/overview/)
 
 ## Premium themes

benchmark/browser/README.md

@@ -12,7 +12,7 @@ You should use these numbers exclusively for comparing performance between diffe
 
 ## Output
 
-For compareable results ask a maintainer to approve the CircleCI job `benchmark`.
+For comparable results ask a maintainer to approve the CircleCI job `benchmark`.
 
 ```sh
 noop (baseline):

benchmark/package.json

@@ -11,13 +11,13 @@
     "server:system": "cd ../ && cross-env NODE_ENV=production BABEL_ENV=benchmark babel-node benchmark/server/scenarios/system.js --inspect=0.0.0.0:9229 --extensions \".tsx,.ts,.js\""
   },
   "dependencies": {
-    "@chakra-ui/system": "^2.5.3",
+    "@chakra-ui/system": "^2.5.5",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@mdx-js/react": "^2.3.0",
-    "@mui/material": "^5.11.15",
-    "@mui/styles": "^5.11.13",
-    "@mui/system": "^5.11.15",
+    "@mui/material": "^5.12.2",
+    "@mui/styles": "^5.12.0",
+    "@mui/system": "^5.12.1",
     "@styled-system/css": "^5.1.5",
     "benchmark": "^2.1.4",
     "playwright": "^1.31.2",
@@ -28,8 +28,8 @@
     "react-redux": "^8.0.5",
     "redux": "^4.2.1",
     "serve-handler": "^6.1.5",
-    "styled-components": "^5.3.9",
-    "theme-ui": "^0.15.5",
+    "styled-components": "^5.3.10",
+    "theme-ui": "^0.15.7",
     "webpack": "^5.75.0",
     "webpack-cli": "^4.10.0"
   }

docs/.link-check-errors.txt

@@ -1,4 +1,6 @@
 Broken links found by `yarn docs:link-check` that exist:
 
+- https://mui.com/base/react-portal/components-api/#portal
 - https://mui.com/blog/material-ui-v4-is-out/#premium-themes-store-✨
+- https://mui.com/material-ui/guides/minimizing-bundle-size/#legacy-bundle
 - https://mui.com/size-snapshot

docs/data/base/components/badge/AccessibleBadges.js

@@ -1,8 +1,27 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
-import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
+import Badge, { badgeClasses } from '@mui/base/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
+function notificationsLabel(count) {
+  if (count === 0) {
+    return 'no notifications';
+  }
+  if (count > 99) {
+    return 'more than 99 notifications';
+  }
+  return `${count} notifications`;
+}
+
+export default function AccessibleBadges() {
+  return (
+    <div aria-label={notificationsLabel(100)}>
+      <StyledBadge badgeContent={100}>
+        <MailIcon />
+      </StyledBadge>
+    </div>
+  );
+}
 const blue = {
   500: '#007FFF',
 };
@@ -12,7 +31,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(BadgeUnstyled)(
+const StyledBadge = styled(Badge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;
@@ -24,7 +43,7 @@ const StyledBadge = styled(BadgeUnstyled)(
   display: inline-block;
   line-height: 1;
 
-  & .${badgeUnstyledClasses.badge} {
+  & .${badgeClasses.badge} {
     z-index: auto;
     position: absolute;
     top: 0;
@@ -46,23 +65,3 @@ const StyledBadge = styled(BadgeUnstyled)(
   }
   `,
 );
-
-function notificationsLabel(count) {
-  if (count === 0) {
-    return 'no notifications';
-  }
-  if (count > 99) {
-    return 'more than 99 notifications';
-  }
-  return `${count} notifications`;
-}
-
-export default function AccessibleBadges() {
-  return (
-    <div aria-label={notificationsLabel(100)}>
-      <StyledBadge badgeContent={100}>
-        <MailIcon />
-      </StyledBadge>
-    </div>
-  );
-}

docs/data/base/components/badge/AccessibleBadges.tsx

@@ -1,8 +1,27 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
-import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
+import Badge, { badgeClasses } from '@mui/base/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
+function notificationsLabel(count: number) {
+  if (count === 0) {
+    return 'no notifications';
+  }
+  if (count > 99) {
+    return 'more than 99 notifications';
+  }
+  return `${count} notifications`;
+}
+
+export default function AccessibleBadges() {
+  return (
+    <div aria-label={notificationsLabel(100)}>
+      <StyledBadge badgeContent={100}>
+        <MailIcon />
+      </StyledBadge>
+    </div>
+  );
+}
 const blue = {
   500: '#007FFF',
 };
@@ -12,7 +31,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(BadgeUnstyled)(
+const StyledBadge = styled(Badge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;
@@ -24,7 +43,7 @@ const StyledBadge = styled(BadgeUnstyled)(
   display: inline-block;
   line-height: 1;
 
-  & .${badgeUnstyledClasses.badge} {
+  & .${badgeClasses.badge} {
     z-index: auto;
     position: absolute;
     top: 0;
@@ -46,23 +65,3 @@ const StyledBadge = styled(BadgeUnstyled)(
   }
   `,
 );
-
-function notificationsLabel(count: number) {
-  if (count === 0) {
-    return 'no notifications';
-  }
-  if (count > 99) {
-    return 'more than 99 notifications';
-  }
-  return `${count} notifications`;
-}
-
-export default function AccessibleBadges() {
-  return (
-    <div aria-label={notificationsLabel(100)}>
-      <StyledBadge badgeContent={100}>
-        <MailIcon />
-      </StyledBadge>
-    </div>
-  );
-}

docs/data/base/components/badge/BadgeMax.js

@@ -1,9 +1,24 @@
 import * as React from 'react';
 import Stack from '@mui/material/Stack';
 import { styled } from '@mui/system';
-import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
+import Badge, { badgeClasses } from '@mui/base/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
+export default function BadgeMax() {
+  return (
+    <Stack spacing={4} direction="row">
+      <StyledBadge badgeContent={99}>
+        <MailIcon />
+      </StyledBadge>
+      <StyledBadge badgeContent={100}>
+        <MailIcon />
+      </StyledBadge>
+      <StyledBadge badgeContent={1000} max={999}>
+        <MailIcon />
+      </StyledBadge>
+    </Stack>
+  );
+}
 const blue = {
   500: '#007FFF',
 };
@@ -13,7 +28,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(BadgeUnstyled)(
+const StyledBadge = styled(Badge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;
@@ -25,7 +40,7 @@ const StyledBadge = styled(BadgeUnstyled)(
   display: inline-block;
   line-height: 1;
 
-  & .${badgeUnstyledClasses.badge} {
+  & .${badgeClasses.badge} {
     z-index: auto;
     position: absolute;
     top: 0;
@@ -47,19 +62,3 @@ const StyledBadge = styled(BadgeUnstyled)(
   }
   `,
 );
-
-export default function BadgeMax() {
-  return (
-    <Stack spacing={4} direction="row">
-      <StyledBadge badgeContent={99}>
-        <MailIcon />
-      </StyledBadge>
-      <StyledBadge badgeContent={100}>
-        <MailIcon />
-      </StyledBadge>
-      <StyledBadge badgeContent={1000} max={999}>
-        <MailIcon />
-      </StyledBadge>
-    </Stack>
-  );
-}