Merge branch 'master' into joy/autocomplete

Signed-off-by: Siriwat K <[email protected]>

Author: siriwatknp

.circleci/config.yml

@@ -342,7 +342,7 @@ jobs:
   test_browser:
     <<: *defaults
     docker:
-      - image: mcr.microsoft.com/playwright:v1.26.0-focal
+      - image: mcr.microsoft.com/playwright:v1.26.1-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -372,7 +372,7 @@ jobs:
   test_e2e:
     <<: *defaults
     docker:
-      - image: mcr.microsoft.com/playwright:v1.26.0-focal
+      - image: mcr.microsoft.com/playwright:v1.26.1-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -391,7 +391,7 @@ jobs:
   test_e2e_website:
     <<: *defaults
     docker:
-      - image: mcr.microsoft.com/playwright:v1.26.0-focal
+      - image: mcr.microsoft.com/playwright:v1.26.1-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -406,7 +406,7 @@ jobs:
   test_profile:
     <<: *defaults
     docker:
-      - image: mcr.microsoft.com/playwright:v1.26.0-focal
+      - image: mcr.microsoft.com/playwright:v1.26.1-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -433,7 +433,7 @@ jobs:
   test_regressions:
     <<: *defaults
     docker:
-      - image: mcr.microsoft.com/playwright:v1.26.0-focal
+      - image: mcr.microsoft.com/playwright:v1.26.1-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -487,7 +487,7 @@ jobs:
     <<: *defaults
     working_directory: /tmp/material-ui/test/bundling/fixtures/next-webpack4/
     docker:
-      - image: mcr.microsoft.com/playwright:v1.26.0-focal
+      - image: mcr.microsoft.com/playwright:v1.26.1-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -511,7 +511,7 @@ jobs:
     <<: *defaults
     working_directory: /tmp/material-ui/test/bundling/fixtures/next-webpack5/
     docker:
-      - image: mcr.microsoft.com/playwright:v1.26.0-focal
+      - image: mcr.microsoft.com/playwright:v1.26.1-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -535,7 +535,7 @@ jobs:
     <<: *defaults
     working_directory: /tmp/material-ui/test/bundling/fixtures/create-react-app/
     docker:
-      - image: mcr.microsoft.com/playwright:v1.26.0-focal
+      - image: mcr.microsoft.com/playwright:v1.26.1-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -559,7 +559,7 @@ jobs:
     <<: *defaults
     working_directory: /tmp/material-ui/test/bundling/fixtures/snowpack/
     docker:
-      - image: mcr.microsoft.com/playwright:v1.26.0-focal
+      - image: mcr.microsoft.com/playwright:v1.26.1-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -583,7 +583,7 @@ jobs:
     <<: *defaults
     working_directory: /tmp/material-ui/test/bundling/fixtures/vite/
     docker:
-      - image: mcr.microsoft.com/playwright:v1.26.0-focal
+      - image: mcr.microsoft.com/playwright:v1.26.1-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -607,7 +607,7 @@ jobs:
     <<: *defaults
     working_directory: /tmp/material-ui/test/bundling/fixtures/esbuild/
     docker:
-      - image: mcr.microsoft.com/playwright:v1.26.0-focal
+      - image: mcr.microsoft.com/playwright:v1.26.1-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -635,7 +635,7 @@ jobs:
     <<: *defaults
     working_directory: /tmp/material-ui/test/bundling/fixtures/gatsby/
     docker:
-      - image: mcr.microsoft.com/playwright:v1.26.0-focal
+      - image: mcr.microsoft.com/playwright:v1.26.1-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -737,7 +737,7 @@ jobs:
   test_benchmark:
     <<: *defaults
     docker:
-      - image: mcr.microsoft.com/playwright:v1.26.0-focal
+      - image: mcr.microsoft.com/playwright:v1.26.1-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:

CHANGELOG.md

@@ -1,5 +1,61 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.10.8
+
+<!-- generated comparing v5.10.7..master -->
+
+_Oct 3, 2022_
+
+A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 [SnackbarUnstyled](https://mui.com/base/react-snackbar/) component & headless hook are added to MUI Base (#33227) @ZeeshanTamboli
+- 📚 [CSS variables documentation](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/) for Material UI has been added by @siriwatknp (#33958)
+- And more 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 28 -->[Autocomplete] Skip filtering when list of options is loading (#33278) @ndebeiss
+- &#8203;<!-- 13 -->[Fab] Add `disabled` class to FAB button (#34245) @meenarama
+- &#8203;<!-- 09 -->[l10n] Add Arabic Saudi Arabia (ar-SA) locale (#33340) @rolule
+- &#8203;<!-- 08 -->[l10n] zhTW refinement (#33391) @Aporim2051
+- &#8203;<!-- 07 -->[Popover] Add `ownerState` on the paper slot (#34445) @kabernardes
+- &#8203;<!-- 05 -->[Slider] Fixed incorrect marks displayed due to duplicate keys in range (#33526) @kskd1804
+- &#8203;<!-- 03 -->[TextField] Fix typo in FormControlLabel declaration file (#34535) @hghmn
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 04 -->[SnackbarUnstyled] Create component and `useSnackbar` hook (#33227) @ZeeshanTamboli
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 12 -->[Joy] Fix `variantPlain` classname missing in few components (#34534) @hbjORbj
+- &#8203;<!-- 11 -->[Joy] Fix input decorator color and list padding (#34586) @siriwatknp
+- &#8203;<!-- 10 -->[Joy] Miscellaneous fixes (#34492) @siriwatknp
+
+### Docs
+
+- &#8203;<!-- 27 -->[blog] Fix 404 link in base introduction @oliviertassinari
+- &#8203;<!-- 21 -->[docs] Fix CI build (#34589) @mnajdova
+- &#8203;<!-- 20 -->[docs] Temporary remove date picker from home page (#34541) @siriwatknp
+- &#8203;<!-- 19 -->[docs] Revise and expand Joy UI "Tutorial" doc (#34569) @samuelsycamore
+- &#8203;<!-- 18 -->[docs] Fix SEO issues (#34537) @oliviertassinari
+- &#8203;<!-- 17 -->[docs] Add CSS variables documentation for Material UI (#33958) @siriwatknp
+- &#8203;<!-- 16 -->[docs] Capitalize Material Design on the Breakpoints page (#34481) @Dustin-Digitar
+- &#8203;<!-- 15 -->[docs] Able to load doc components inside markdown files (#34243) @flaviendelangle
+- &#8203;<!-- 14 -->[docs] Use mouse pointer on esc button in the search modal (#34485) @minkyngkm
+- &#8203;<!-- 02 -->[website] Fix typo in pricing FAQ @oliviertassinari
+- &#8203;<!-- 01 -->[website] Move the React Engineer role from open to next (#34494) @mnajdova
+
+### Core
+
+- &#8203;<!-- 26 -->[core] Update root package.json version (#34592) @mnajdova
+- &#8203;<!-- 25 -->[core] Remove useless comment in fixtures (#34581) @Garz4
+- &#8203;<!-- 24 -->[core] Fix link to CODE_OF_CONDUCT.md (#34543) @peippo
+- &#8203;<!-- 23 -->[core] Remove outdated docsearch.js dependency (#34421) @oliviertassinari
+- &#8203;<!-- 22 -->[core] Add `newFeature` to the typing of MuiPage (#34511) @flaviendelangle
+
+All contributors of this release in alphabetical order: @Aporim2051, @Dustin-Digitar, @flaviendelangle, @Garz4, @hbjORbj, @hghmn, @kabernardes, @kskd1804, @meenarama, @minkyngkm, @mnajdova, @ndebeiss, @oliviertassinari, @peippo, @rolule, @samuelsycamore, @siriwatknp, @ZeeshanTamboli
+
 ## 5.10.7
 
 <!-- generated comparing v5.10.6..master -->

CONTRIBUTING.md

@@ -5,7 +5,7 @@ If you're reading this, you're awesome! Thank you for helping us make this proje
 ## Code of Conduct
 
 MUI has adopted the [Contributor Covenant](https://www.contributor-covenant.org/) as its Code of Conduct, and we expect project participants to adhere to it.
-Please read [the full text](/CODE_OF_CONDUCT.md) so that you can understand what actions will and will not be tolerated.
+Please read [the full text](https://github.com/mui/.github/blob/master/CODE_OF_CONDUCT.md) so that you can understand what actions will and will not be tolerated.
 
 ## A large spectrum of contributions
 

benchmark/package.json

@@ -15,20 +15,20 @@
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@mdx-js/react": "^2.1.3",
-    "@mui/material": "^5.10.7",
-    "@mui/styles": "^5.10.7",
-    "@mui/system": "^5.10.7",
+    "@mui/material": "^5.10.8",
+    "@mui/styles": "^5.10.8",
+    "@mui/system": "^5.10.8",
     "@styled-system/css": "^5.1.5",
     "benchmark": "^2.1.4",
-    "playwright": "^1.26.0",
+    "playwright": "^1.26.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "react-jss": "^10.9.2",
     "react-redux": "^7.2.9",
     "redux": "^4.2.0",
     "serve-handler": "^6.1.3",
-    "styled-components": "^5.3.5",
+    "styled-components": "^5.3.6",
     "theme-ui": "^0.14.7",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0"

docs/data/base/components/snackbar/TransitionComponentSnackbar.js

@@ -0,0 +1,163 @@
+import * as React from 'react';
+import { Transition } from 'react-transition-group';
+import { styled } from '@mui/system';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+import CloseIcon from '@mui/icons-material/Close';
+import SnackbarUnstyled from '@mui/base/SnackbarUnstyled';
+
+const blue = {
+  50: '#F0F7FF',
+  100: '#DAECFF',
+  400: '#3399FF',
+  600: '#0072E5',
+  900: '#003A75',
+};
+
+const grey = {
+  200: '#E0E3E7',
+  800: '#2D3843',
+};
+
+const StyledSnackbar = styled(SnackbarUnstyled)`
+  position: fixed;
+  z-index: 5500;
+  display: flex;
+  bottom: 16px;
+  right: 16px;
+  max-width: 560px;
+  min-width: 300px;
+`;
+
+const SnackbarContent = styled('div')(
+  ({ theme }) => `
+  display: flex;
+  overflow: hidden;
+  background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[50]};
+  border-radius: 8px;
+  border: 1px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[400]};
+  box-shadow: ${
+    theme.palette.mode === 'dark'
+      ? `0 5px 13px -3px rgba(0,0,0,0.4)`
+      : `0 5px 13px -3px ${grey[200]}`
+  };
+  padding: 0.875rem;
+  color: ${theme.palette.mode === 'dark' ? '#fff' : blue[900]};
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 500;
+  text-align: start;
+  position: relative;
+
+  & .snackbar-message {
+    flex: 1 1 0%;
+    max-width: 100%;
+  }
+
+  & .snackbar-title {
+    line-height: 1.5rem;
+    margin-right: 0.5rem;
+  }
+
+  & .snackbar-description {
+    line-height: 1.5rem;
+    font-weight: 400;
+    color: ${theme.palette.mode === 'dark' ? blue[100] : grey[800]};
+  }
+
+  & .snackbar-close-icon {
+    cursor: pointer;
+    font-size: 10px;
+    position: absolute;
+    top: 0.725rem;
+    right: 0.725rem;
+    width: 1.25rem;
+    height: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  `,
+);
+
+const positioningStyles = {
+  entering: 'translateX(0)',
+  entered: 'translateX(0)',
+  exiting: 'translateX(500px)',
+  exited: 'translateX(500px)',
+  unmounted: 'translateX(500px)',
+};
+
+export default function TransitionComponentSnackbar() {
+  const [open, setOpen] = React.useState(false);
+  const [exited, setExited] = React.useState(true);
+  const nodeRef = React.useRef(null);
+
+  const handleClose = (_, reason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  const handleClick = () => {
+    setOpen(true);
+  };
+
+  const handleOnEnter = () => {
+    setExited(false);
+  };
+
+  const handleOnExited = () => {
+    setExited(true);
+  };
+
+  return (
+    <React.Fragment>
+      <button type="button" onClick={handleClick}>
+        Open snackbar
+      </button>
+      <StyledSnackbar
+        autoHideDuration={5000}
+        open={open}
+        onClose={handleClose}
+        exited={exited}
+      >
+        <Transition
+          timeout={{ enter: 400, exit: 400 }}
+          in={open}
+          appear
+          unmountOnExit
+          onEnter={handleOnEnter}
+          onExited={handleOnExited}
+          nodeRef={nodeRef}
+        >
+          {(status) => (
+            <SnackbarContent
+              style={{
+                transform: positioningStyles[status],
+                transition: 'transform 300ms ease',
+              }}
+              ref={nodeRef}
+            >
+              <CheckRoundedIcon
+                sx={{
+                  flexShrink: 0,
+                  marginRight: '0.75rem',
+                  width: '1.25rem',
+                  height: '1.5rem',
+                }}
+              />
+              <div className="snackbar-message">
+                <div className="snackbar-title">Notifications sent</div>
+                <div className="snackbar-description">
+                  All your notifications were sent to the desired address.
+                </div>
+              </div>
+              <CloseIcon onClick={handleClose} className="snackbar-close-icon" />
+            </SnackbarContent>
+          )}
+        </Transition>
+      </StyledSnackbar>
+    </React.Fragment>
+  );
+}