Merge branch 'master' into test/remove-view-property-in-window-Event-…

…contructor

.eslintrc.js

@@ -226,7 +226,7 @@ module.exports = {
       rules: {
         'material-ui/no-hardcoded-labels': [
           'error',
-          { allow: ['MUI', 'Twitter', 'GitHub', 'StackOverflow'] },
+          { allow: ['MUI', 'Twitter', 'GitHub', 'Stack Overflow'] },
         ],
       },
     },

.github/workflows/support-stackoverflow.yml

@@ -1,5 +1,5 @@
 # Configuration for support-requests - https://github.com/dessant/support-requests
-name: 'Support StackOverflow'
+name: 'Support Stack Overflow'
 
 on:
   issues:
@@ -16,7 +16,7 @@ jobs:
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           # Label used to mark issues as support requests
-          support-label: 'support: StackOverflow'
+          support-label: 'support: Stack Overflow'
           # Comment to post on issues marked as support requests. Add a link
           # to a support page, or set to `false` to disable
           issue-comment: |
@@ -27,7 +27,7 @@ jobs:
 
             For support, please check out https://mui.com/getting-started/support/. Thanks!
 
-            If you have a question on StackOverflow, you are welcome to link to it here, it might help others.
+            If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
             If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.
           close-issue: true
           lock-issue: false

CHANGELOG.md

@@ -1,5 +1,57 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.9.1
+
+<!-- generated comparing v5.9.0..master -->
+
+_Jul 18, 2022_
+
+A big thanks to the 17 contributors who made this release possible. This release is mainly about 🐛 bug fixes and 📚 documentation improvements
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 24 -->[Autocomplete] Fix disabling component crashing when focused (#31313) @mzedel
+- &#8203;<!-- 07 -->[Grid] Avoid scrollbar in demo (#33527) @oliviertassinari
+- &#8203;<!-- 05 -->[Slider] Fix transition of tooltips on vertical slider (#33009) @abhinav-22-tech
+- &#8203;<!-- 01 -->[TouchRipple] Fix crash on android where `event.touches` are an empty array (#32974) @lukeggchapman
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 04 -->[system] Add flag to switch negative margin approach in Grid (#33484) @siriwatknp
+- &#8203;<!-- 03 -->[system] Remove needless optional chaining check in `createEmptyBreakpointObject` method (#33482) @ZeeshanTamboli
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 23 -->[base] Export types used by components' props (#33522) @michaldudak
+- &#8203;<!-- 22 -->[base] Add missing type definitions in useControllableReducer (#33496) @michaldudak
+- &#8203;<!-- 06 -->[SelectUnstyled] Do not call onChange unnecessarily (#33408) @michaldudak
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 02 -->[TimelineDot] Add TimelineDotPropsColorOverrides interface to extend color options (#33466) @lolaignatova
+
+### Docs
+
+- &#8203;<!-- 19 -->[docs] Add note about CssBaseline in the dark mode page (#33108) @GabrielaLokelani
+- &#8203;<!-- 18 -->[docs] Fix typos in the Interoperability page (#33273) @HexM7
+- &#8203;<!-- 17 -->[docs] Improve the `useTheme` documentation (#33508) @rickstaa
+- &#8203;<!-- 16 -->[docs] Fix 301 redirections (#33521) @oliviertassinari
+- &#8203;<!-- 15 -->[docs] Link the same codesandbox as in the docs (#33472) @oliviertassinari
+- &#8203;<!-- 14 -->[docs] Fix copy search false positives (#33438) @oliviertassinari
+- &#8203;<!-- 13 -->[docs] Fix typo (#33520) @aravindpanicker
+- &#8203;<!-- 12 -->[docs] Update Tailwind docs to include step about updating popover containers (#33315) @ajhenry
+- &#8203;<!-- 11 -->[docs] Add yarn command for Roboto font in Material UI's typography.md (#33485) @anthonypz
+- &#8203;<!-- 10 -->[docs] Add new community content to the Material UI Learn page (#32927) @Nikhilthadani
+- &#8203;<!-- 09 -->[examples] Change createEmotionCache to use `insertionPoint` (#32104) @ANTARES-KOR
+- &#8203;<!-- 08 -->[examples] Fix error in Next.js example with @mui/styles (#33456) @paustria
+
+### Core
+
+- &#8203;<!-- 21 -->[core] Cleanup experiments (#33547) @siriwatknp
+- &#8203;<!-- 20 -->[core] Update CHANGELOG to include pickers breaking change (#33486) @siriwatknp
+
+All contributors of this release in alphabetical order: @abhinav-22-tech, @ajhenry, @ANTARES-KOR, @anthonypz, @aravindpanicker, @GabrielaLokelani, @HexM7, @lolaignatova, @lukeggchapman, @michaldudak, @mzedel, @Nikhilthadani, @oliviertassinari, @paustria, @rickstaa, @siriwatknp, @ZeeshanTamboli
+
 ## 5.9.0
 
 <!-- generated comparing v5.8.7..master -->
@@ -2012,7 +2064,7 @@ A big thanks to the 16 contributors who made this release possible. Here are som
 - &#8203;<!-- 19 -->[docs] Sync translations with Crowdin (#30067) @l10nbot
 - &#8203;<!-- 18 -->[docs] Fix link on "Custom variables" section in the Theming page #30100 @danilo-leal
 - &#8203;<!-- 17 -->[docs] Fix justifyContent option in the Grid interactive demo (#30117) @danilo-leal
-- &#8203;<!-- 16 -->[docs] Add tip to help access the docs of a previous version when finding answers in StackOverflow (#30101) @danilo-leal
+- &#8203;<!-- 16 -->[docs] Add tip to help access the docs of a previous version when finding answers in Stack Overflow (#30101) @danilo-leal
 - &#8203;<!-- 15 -->[docs] Fix import example inside Unstyled Backdrop section (#30098) @TheodosiouTh
 - &#8203;<!-- 01 -->[website] Column pinning and Tree data are out (#30136) @oliviertassinari
 - &#8203;<!-- 07 -->[survey] Remove survey promotion items (#30122) @danilo-leal
@@ -2093,7 +2145,7 @@ A big thanks to the 25 contributors who made this release possible. Here are som
 - &#8203;<!-- 21 -->[docs] Update nextjs-typescript-example (#29974) @huydhoang
 - &#8203;<!-- 20 -->[docs] Add missing global state classes to API docs generator (#29945) @michaldudak
 - &#8203;<!-- 19 -->[docs] Fix benchmarks folder link (#29981) @fourjr
-- &#8203;<!-- 18 -->[docs] Improve wording in StackOverflow section of support page (#29956) @ronwarner
+- &#8203;<!-- 18 -->[docs] Improve wording in Stack Overflow section of support page (#29956) @ronwarner
 - &#8203;<!-- 17 -->[docs] Remove Black Friday sale notification (#29936) @mbrookes
 - &#8203;<!-- 16 -->[examples] Fix typos in the Remix example (#30071) @MichaelDeBoey
 - &#8203;<!-- 15 -->[examples] Add Remix example (#29952) @mnajdova
@@ -2106,7 +2158,7 @@ A big thanks to the 25 contributors who made this release possible. Here are som
 ### Core
 
 - &#8203;<!-- 31 -->[core] Batch small changes (#30042) @oliviertassinari
-- &#8203;<!-- 28 -->[core] Transition to a new StackOverflow tag (#29967) @oliviertassinari
+- &#8203;<!-- 28 -->[core] Transition to a new Stack Overflow tag (#29967) @oliviertassinari
 
 All contributors of this release in alphabetical order: @chao813, @daniel-sachs, @danilo-leal, @Domino987, @eduardomcv, @flaviendelangle, @fourjr, @genzyy, @hbjORbj, @huydhoang, @jayeclark, @jonathanrtuck, @kkorach, @l10nbot, @mbrookes, @MichaelDeBoey, @michaldudak, @mnajdova, @oliviertassinari, @ronwarner, @Semigradsky, @siriwatknp, @tasugi, @ThewBear, @ZeeshanTamboli
 
@@ -5792,7 +5844,7 @@ A big thanks to the 30 contributors who made this release possible. Here are som
 #### Breaking changes
 
 - &#8203;<!-- 91 -->[types] Rename the exported `Omit` type in `@material-ui/types`. (#24795) @petyosi
-  The module is now called `DistributiveOmit`. The change removes the confusion with the built-in `Omit` helper introduced in TypeScript v3.5. The built-in `Omit`, while similar, is non-distributive. This leads to differences when applied to union types. [See this StackOverflow answer for further details](https://stackoverflow.com/a/57103940/1009797).
+  The module is now called `DistributiveOmit`. The change removes the confusion with the built-in `Omit` helper introduced in TypeScript v3.5. The built-in `Omit`, while similar, is non-distributive. This leads to differences when applied to union types. [See this Stack Overflow answer for further details](https://stackoverflow.com/a/57103940/1009797).
 
 ```diff
 -import { Omit } from '@material-ui/types';

benchmark/package.json

@@ -15,9 +15,9 @@
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
     "@mdx-js/react": "^2.1.2",
-    "@mui/material": "^5.9.0",
-    "@mui/styles": "^5.9.0",
-    "@mui/system": "^5.9.0",
+    "@mui/material": "^5.9.1",
+    "@mui/styles": "^5.9.1",
+    "@mui/system": "^5.9.1",
     "@styled-system/css": "^5.1.5",
     "benchmark": "^2.1.4",
     "playwright": "^1.17.1",

docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx

@@ -1,7 +1,11 @@
 import * as React from 'react';
-import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled';
+import ButtonUnstyled, {
+  buttonUnstyledClasses,
+  ButtonUnstyledTypeMap,
+} from '@mui/base/ButtonUnstyled';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
+import { OverridableComponent } from '@mui/types';
 
 const blue = {
   500: '#007FFF',
@@ -38,7 +42,7 @@ const CustomButton = styled(ButtonUnstyled)`
     opacity: 0.5;
     cursor: not-allowed;
   }
-`;
+` as OverridableComponent<ButtonUnstyledTypeMap>;
 
 export default function UnstyledButtonsDisabledFocusCustom() {
   return (

docs/data/base/components/button/UnstyledButtonsSpan.tsx

@@ -1,7 +1,11 @@
 import * as React from 'react';
-import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled';
+import ButtonUnstyled, {
+  buttonUnstyledClasses,
+  ButtonUnstyledTypeMap,
+} from '@mui/base/ButtonUnstyled';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
+import { OverridableComponent } from '@mui/types';
 
 const blue = {
   500: '#007FFF',
@@ -38,7 +42,7 @@ const CustomButton = styled(ButtonUnstyled)`
     opacity: 0.5;
     cursor: not-allowed;
   }
-`;
+` as OverridableComponent<ButtonUnstyledTypeMap>;
 
 export default function UnstyledButtonsSpan() {
   return (

docs/data/base/components/input/InputAdornments.js

@@ -150,7 +150,6 @@ export default function InputAdornments() {
               aria-label="toggle password visibility"
               onClick={handleClickShowPassword}
               onMouseDown={handleMouseDownPassword}
-              edge="end"
             >
               {values.showPassword ? <VisibilityOff /> : <Visibility />}
             </IconButton>

docs/data/base/components/input/InputAdornments.tsx

@@ -151,7 +151,6 @@ export default function InputAdornments() {
               aria-label="toggle password visibility"
               onClick={handleClickShowPassword}
               onMouseDown={handleMouseDownPassword}
-              edge="end"
             >
               {values.showPassword ? <VisibilityOff /> : <Visibility />}
             </IconButton>

docs/data/base/components/select/UnstyledSelectSimple.tsx

@@ -126,7 +126,7 @@ const StyledPopper = styled(PopperUnstyled)`
 
 const CustomSelect = React.forwardRef(function CustomSelect<TValue>(
   props: SelectUnstyledProps<TValue>,
-  ref: React.ForwardedRef<HTMLUListElement>,
+  ref: React.ForwardedRef<HTMLButtonElement>,
 ) {
   const components: SelectUnstyledProps<TValue>['components'] = {
     Root: StyledButton,
@@ -137,7 +137,7 @@ const CustomSelect = React.forwardRef(function CustomSelect<TValue>(
 
   return <SelectUnstyled {...props} ref={ref} components={components} />;
 }) as <TValue>(
-  props: SelectUnstyledProps<TValue> & React.RefAttributes<HTMLUListElement>,
+  props: SelectUnstyledProps<TValue> & React.RefAttributes<HTMLButtonElement>,
 ) => JSX.Element;
 
 export default function UnstyledSelectSimple() {

docs/data/material/components/alert/alert.md

@@ -69,7 +69,7 @@ You can prevent this by adding `bgcolor: 'background.paper'` to the[`sx` prop](/
 
 ## Toast
 
-You can use the Snackbar to [display a toast](/material-ui/react-snackbar/#customized-snackbars) with the Alert.
+You can use the Snackbar to [display a toast](/material-ui/react-snackbar/#customization) with the Alert.
 
 ## Color
 

docs/data/material/components/tooltips/tooltips.md

@@ -21,7 +21,7 @@ When activated, Tooltips display a text label identifying an element, such as a
 
 ## Positioned tooltips
 
-The `Tooltip` has 12 **placements** choice.
+The `Tooltip` has 12 **placement** choices.
 They don't have directional arrows; instead, they rely on motion emanating from the source to convey direction.
 
 {{"demo": "PositionedTooltips.js"}}

docs/data/material/customization/dark-mode/dark-mode.md

@@ -7,7 +7,7 @@
 You can make your application use the dark theme as the default—regardless of the user's preference—by adding `mode: 'dark'` to the `createTheme` helper:
 
 ```js
-import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { ThemeProvider, createTheme, CssBaseline } from '@mui/material/styles';
 
 const darkTheme = createTheme({
   palette: {
@@ -18,6 +18,7 @@ const darkTheme = createTheme({
 function App() {
   return (
     <ThemeProvider theme={darkTheme}>
+      <CssBaseline />
       <main>This app is using the dark mode</main>
     </ThemeProvider>
   );
@@ -30,6 +31,8 @@ Adding `mode: 'dark'` to the `createTheme` helper modifies several palette value
 
 {{"demo": "DarkTheme.js", "bg": "inline", "hideToolbar": true}}
 
+Adding `<CssBaseline />` inside of the `<ThemeProvider>` component will also enable dark mode for the app's background.
+
 :::info
 Note: setting the dark mode this way only works if you are using [the default palette](/material-ui/customization/default-theme/). If you have a custom palette, you need to make sure that you have the correct values based on the `mode`. The next section explain how to do this.
 :::

docs/data/material/customization/theming/theming.md

@@ -77,7 +77,16 @@ The community has built great tools to build a theme:
 
 ## Accessing the theme in a component
 
-You [can access](/system/styles/advanced/#accessing-the-theme-in-a-component) the theme variables inside your React components.
+You can access the theme variables inside your functional React components using the `useTheme` hook:
+
+```jsx
+import { useTheme } from '@mui/material/styles';
+
+function DeepChild() {
+  const theme = useTheme();
+  return <span>{`spacing ${theme.spacing}`}</span>;
+}
+```
 
 ## Nesting the theme
 

docs/data/material/getting-started/faq/faq.md

@@ -12,7 +12,7 @@ There are many ways to support MUI:
   Follow us on [Twitter](https://twitter.com/MUI_hq), like and retweet the important news. Or just talk about us with your friends.
 - **Give us feedback**. Tell us what we're doing well or where we can improve. Please upvote (👍) the issues that you are the most interested in seeing solved.
 - **Help new users**. You can answer questions on
-  [StackOverflow](https://stackoverflow.com/questions/tagged/mui).
+  [Stack Overflow](https://stackoverflow.com/questions/tagged/mui).
 - **Make changes happen**.
   - Edit the documentation. Every page has an "EDIT THIS PAGE" link in the top right.
   - Report bugs or missing features by [creating an issue](https://github.com/mui/material-ui/issues/new).

docs/data/material/getting-started/overview/overview.md

@@ -27,7 +27,7 @@ You can follow [this GitHub issue](https://github.com/mui/material-ui/issues/293
   The [design kits](https://mui.com/design-kits/) streamline your workflow and boost consistency between designers and developers.
 - **Trusted by thousands of organizations:** Material UI has the largest UI community in the React ecosystem.
   It's almost as old as React itself—its history stretches back to 2014—and we're in this for the long haul.
-  You can count on community's support for years to come (e.g. [StackOverflow](https://insights.stackoverflow.com/trends?tags=material-ui)).
+  You can count on community's support for years to come (e.g. [Stack Overflow](https://insights.stackoverflow.com/trends?tags=material-ui)).
 
 ## Material UI vs. MUI Base
 

docs/data/material/getting-started/support/support.md

@@ -6,17 +6,17 @@
 
 The community is your first stop for questions and advice about the framework. Welcome to the community!
 
-### StackOverflow
+### Stack Overflow
 
 For crowdsourced answers from expert MUI developers in our community.
-StackOverflow is also visited from time to time by the maintainers of MUI.
+Stack Overflow is also visited from time to time by the maintainers of MUI.
 
 [Post a question](https://stackoverflow.com/questions/tagged/mui)
 
 :::info
 💡 **Tip**:
 
-If you're using an older version and use external resources (such as StackOverflow) for help with it, you may find answers with links that direct you to content that no longer exists in the latest version of the documentation. To easily access any previous version of the docs, simply add `v[number]` at the beginning of the URL, like so: [v4.mui.com](https://v4.mui.com/).
+If you're using an older version and use external resources (such as Stack Overflow) for help with it, you may find answers with links that direct you to content that no longer exists in the latest version of the documentation. To easily access any previous version of the docs, simply add `v[number]` at the beginning of the URL, like so: [v4.mui.com](https://v4.mui.com/).
 
 :::
 
@@ -59,19 +59,24 @@ Receive the latest news on MUI.
 
 Find details on the [supported versions](/versions/#supported-versions).
 
-## Professional support (premium)
+## Paid support
 
 ### Pro/Premium plans
 
 MUI X comes in [three plans](https://mui.com/pricing/).
-The support available on the Community plan is mostly made possible thanks to people like you: the community. It's described in more detail in the above section. The maintainers of MUI focuses on solving the root issues, not direct support.
+The support available under the Community plan is made possible thanks to people like you: the community.
+This is described in more detail in the section above.
+MUI X maintainers focus on solving root issues rather than offering direct support to the community at large.
 
-The Pro plan allows developers to license extra features that are challenging to find in the OSS space.
-The maintainers of MUI provide support for these paid features.
-They aim for a similar quality of experience to the one provided by the community on the open-source modules
-however no SLAs are provided.
+The paid plans offer developers advanced components and extra features that are challenging to find in OSS.
+To provide a similar quality of experience to the one provided by the community for MIT licensed code,
+the developers of MUI X provide support for the advanced components only.
+Technical support for MUI Core components is **not** included.
 
-The Premium plan goes one step further by providing SLAs on the quality of the support.
+The Premium plan provides developers with the highest priority for support tickets.
+No SLAs are provided yet; it's coming.
+
+Please visit [the MUI X Support page](https://mui.com/x/introduction/support/#technical-support) for more detailed information on technical support.
 
 ### Tidelift subscription
 

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

@@ -885,7 +885,6 @@ it's a peer dependency of `@mui/material`.
 :::
 
 :::warning
-⚠️ For [Storybook](https://storybook.js.org): As of writing this lines storybook still uses by default emotion 10.  
-Material UI and TSS runs emotion 11 so there is [some changes](https://github.com/InseeFrLab/onyxia-ui/blob/324de62248074582b227e584c53fb2e123f5325f/.storybook/main.js#L31-L32)
-to be made to your `.storybook/main.js` to make it uses emotion 11.
+For [Storybook](https://storybook.js.org): At the time of this writing, Storybook still uses Emotion 10 by default.  
+Material UI and TSS use Emotion 11, so you must make [some changes](https://github.com/InseeFrLab/onyxia-ui/blob/324de62248074582b227e584c53fb2e123f5325f/.storybook/main.js#L31-L32) to `.storybook/main.js` in order to use Storybook with Material UI.
 :::

docs/data/material/migration/migration-v4/v5-component-changes.md

@@ -1962,7 +1962,7 @@ This change removes the confusion with the built-in `Omit` helper introduced in
 
 The built-in `Omit`, while similar, is non-distributive.
 This leads to differences when applied to union types.
-[See this StackOverflow answer for further details](https://stackoverflow.com/a/57103940/1009797).
+[See this Stack Overflow answer for further details](https://stackoverflow.com/a/57103940/1009797).
 
 ```diff
 -import { Omit } from '@mui/types';

docs/data/system/components/grid/grid.md

@@ -128,8 +128,8 @@ If you specify custom breakpoints to the theme, you can use those names as grid
 The custom breakpoints affect both the size and offset props:
 
 ```diff
-- <Grid xs={6} xsOffset={2} sm={4} smOffset={2} md={3} mdOffset={3}>
-+ <Grid mobile={6} mobileOffset={2} tablet={4} tabletOffset={2} laptop={3} laptopOffset={3}>
+-<Grid xs={6} xsOffset={2}>
++<Grid mobile={6} mobileOffset={2}>
 ```
 
 :::