@mui/material 5.2.1 → 5.2.2

package/CHANGELOG.md

@@ -1,5 +1,69 @@
 ### [Versions](https://mui.com/versions/)
 
+## 5.2.2
+
+<!-- generated comparing v5.2.1..master -->
+
+_Nov 29, 2021_
+
+A big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- ♿️ Improved accessibility of `Snackbar` and `TextField` in `@mui/material` (#29782) (#29850) (#29852) @eps1lon.
+- 🎉 Added support for `sx` syntax inside `styled()` utility (#29833) @mnajdova.
+- 🎉 Added support for more options for `createCssVarsProvider` in `@mui/system` (#29845) (#29857) @hbjORbj.
+- And many more 🐛 bug fixes and 📚 improvements.
+
+### `@mui/material@5.2.2`
+
+- &#8203;<!-- 14 -->[MenuList] Add component prop (#29882) @Harshikerfuffle
+- &#8203;<!-- 13 -->[Snackbar] Interrupt auto-hide on keyboard interaction (#29852) @eps1lon
+- &#8203;<!-- 12 -->[Snackbar] Dismiss on Escape press (#29850) @eps1lon
+- &#8203;<!-- 06 -->[TextField] Associate accessible name and description by default (#29782) @eps1lon
+
+### `@mui/joy@5.0.0-alpha.4`
+
+- &#8203;<!-- 15 -->[Joy] Add `Button` - 1st iteration (#29464) @siriwatknp
+
+### `@mui/codemod@5.2.1`
+
+- &#8203;<!-- 28 -->[codemod] Fix alias import for box-sx-prop (#29902) @siriwatknp
+
+### `@mui/system@5.2.2`
+
+- &#8203;<!-- 11 -->[system] CSSVarsProvider cleans up `html[style]` when unmounting (#29946) @eps1lon
+- &#8203;<!-- 10 -->[system] Add support for `disableTransitionOnChange` in `createCssVarsProvider` (#29857) @hbjORbj
+- &#8203;<!-- 09 -->[system] Add support for `enableColorScheme` in `createCssVarsProvider` (#29845) @hbjORbj
+
+### `@mui/utils@5.2.2`
+
+- &#8203;<!-- 05 -->[useId] Trade random collisions for collisions on overflow (#29781) @eps1lon
+- &#8203;<!-- 04 -->[useIsFocusVisible] Convert to TypeScript (#29779) @eps1lon
+
+### Docs
+
+- &#8203;<!-- 24 -->[docs] Fix v5-beta confusing example description (#29932) @oliviertassinari
+- &#8203;<!-- 23 -->[docs] Apply the z-index on the right DOM element (#29934) @oliviertassinari
+- &#8203;<!-- 22 -->[docs] Improve git diff format (#29935) @oliviertassinari
+- &#8203;<!-- 21 -->[docs] Fix typo (#29866) @sinclairity
+- &#8203;<!-- 20 -->[docs] Fix key display (#29933) @oliviertassinari
+- &#8203;<!-- 19 -->[docs] Fix outdated link to next/link docs (#29937) @radlinskii
+- &#8203;<!-- 18 -->[docs] Add how to pass `sx` prop (#29905) @siriwatknp
+- &#8203;<!-- 17 -->[docs] Fix typo in notifications @mbrookes
+- &#8203;<!-- 16 -->[docs] Black Friday sale notification @mbrookes
+- &#8203;<!-- 03 -->[website] Fix canonical links (#29938) @oliviertassinari
+- &#8203;<!-- 02 -->[website] Fix SEO issues (#29939) @oliviertassinari
+- &#8203;<!-- 01 -->[website] Improvements to the /x product page (#28964) @danilo-leal
+
+### Core
+
+- &#8203;<!-- 27 -->[core] Remove dead code (#29940) @oliviertassinari
+- &#8203;<!-- 26 -->[core] Move benchmark CI job from AZP to CircleCI (#29894) @eps1lon
+- &#8203;<!-- 25 -->[core] Fix PR detection pattern in test_bundle_size_monitor (#29895) @eps1lon
+- &#8203;<!-- 08 -->[test] Fix browser tests (#29929) @eps1lon
+- &#8203;<!-- 07 -->[test] Reject shorthand properties in style matchers (#29893) @eps1lon
+
+All contributors of this release in alphabetical order: @danilo-leal, @eps1lon, @Harshikerfuffle, @hbjORbj, @mbrookes, @oliviertassinari, @radlinskii, @sinclairity, @siriwatknp
+
 ## 5.2.1
 
 <!-- generated comparing v5.2.0..master -->
@@ -2004,7 +2068,7 @@ _May 31, 2021_
 A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
 
 - 👩‍🎤 We have completed the migration to emotion of all the components (`@material-ui/core` and `@material-ui/lab`) @siriwatknp, @mnajdova.
-- 📦 Save [10 kB gzipped](https://bundlephobia.com/result?p=@material-ui/core@5.0.0-alpha.34) by removing the dependency on `@material-ui/styles` (JSS) from the core and the lab (#26377, #26382, #26376) @mnajdova.
+- 📦 Save [10 kB gzipped](https://bundlephobia.com/package/@material-ui/core@5.0.0-alpha.34) by removing the dependency on `@material-ui/styles` (JSS) from the core and the lab (#26377, #26382, #26376) @mnajdova.
 - ⚒️ Add many new [codemods](https://github.com/mui-org/material-ui/blob/HEAD/packages/mui-codemod/README.md) to automate the migration from v4 to v5 (#24867) @mbrookes.
 - And many more 🐛 bug fixes and 📚 improvements.
 

package/CssBaseline/CssBaseline.d.ts

@@ -7,7 +7,7 @@ export interface CssBaselineProps extends StyledComponentProps<never> {
    */
   children?: React.ReactNode;
   /**
-   * Enable `color-scheme` css property to use `theme.palette.mode`.
+   * Enable `color-scheme` CSS property to use `theme.palette.mode`.
    * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
    * For browser support, check out https://caniuse.com/?search=color-scheme
    * @default false

package/CssBaseline/CssBaseline.js

@@ -90,7 +90,7 @@ process.env.NODE_ENV !== "production" ? CssBaseline.propTypes
   children: PropTypes.node,
 
   /**
-   * Enable `color-scheme` css property to use `theme.palette.mode`.
+   * Enable `color-scheme` CSS property to use `theme.palette.mode`.
    * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
    * For browser support, check out https://caniuse.com/?search=color-scheme
    * @default false

package/List/List.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { Theme } from '..';
-import { OverridableComponent, OverrideProps } from '../OverridableComponent';
+import { OverridableComponent, OverridableTypeMap, OverrideProps } from '../OverridableComponent';
 import { ListClasses } from './listClasses';
 
 export interface ListTypeMap<P = {}, D extends React.ElementType = 'ul'> {
@@ -38,6 +38,16 @@ export interface ListTypeMap<P = {}, D extends React.ElementType = 'ul'> {
   defaultComponent: D;
 }
 
+/**
+ * utility to create component types that inherit props from List.
+ */
+export interface ExtendListTypeMap<M extends OverridableTypeMap> {
+  props: M['props'] & ListTypeMap['props'];
+  defaultComponent: M['defaultComponent'];
+}
+
+export type ExtendList<M extends OverridableTypeMap> = OverridableComponent<ExtendListTypeMap<M>>;
+
 /**
  *
  * Demos:
@@ -49,7 +59,7 @@ export interface ListTypeMap<P = {}, D extends React.ElementType = 'ul'> {
  *
  * - [List API](https://mui.com/api/list/)
  */
-declare const List: OverridableComponent<ListTypeMap>;
+declare const List: ExtendList<ListTypeMap>;
 
 export type ListProps<
   D extends React.ElementType = ListTypeMap['defaultComponent'],

package/MenuList/MenuList.d.ts

@@ -1,41 +1,45 @@
 import * as React from 'react';
-import { ListProps } from '../List';
+import { ExtendList, ExtendListTypeMap } from '../List';
+import { OverrideProps } from '../OverridableComponent';
 
-export interface MenuListProps extends ListProps {
-  /**
-   * If `true`, will focus the `[role="menu"]` container and move into tab order.
-   * @default false
-   */
-  autoFocus?: boolean;
-  /**
-   * If `true`, will focus the first menuitem if `variant="menu"` or selected item
-   * if `variant="selectedMenu"`.
-   * @default false
-   */
-  autoFocusItem?: boolean;
-  /**
-   * MenuList contents, normally `MenuItem`s.
-   */
-  children?: React.ReactNode;
-  /**
-   * If `true`, will allow focus on disabled items.
-   * @default false
-   */
-  disabledItemsFocusable?: boolean;
-  /**
-   * If `true`, the menu items will not wrap focus.
-   * @default false
-   */
-  disableListWrap?: boolean;
-  /**
-   * The variant to use. Use `menu` to prevent selected items from impacting the initial focus
-   * and the vertical alignment relative to the anchor element.
-   * @default 'selectedMenu'
-   */
-  variant?: 'menu' | 'selectedMenu';
-}
+export type MenuListTypeMap<P = {}, D extends React.ElementType = 'ul'> = ExtendListTypeMap<{
+  props: P & {
+    /**
+     * If `true`, will focus the `[role="menu"]` container and move into tab order.
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * If `true`, will focus the first menuitem if `variant="menu"` or selected item
+     * if `variant="selectedMenu"`.
+     * @default false
+     */
+    autoFocusItem?: boolean;
+    /**
+     * MenuList contents, normally `MenuItem`s.
+     */
+    children?: React.ReactNode;
+    /**
+     * If `true`, will allow focus on disabled items.
+     * @default false
+     */
+    disabledItemsFocusable?: boolean;
+    /**
+     * If `true`, the menu items will not wrap focus.
+     * @default false
+     */
+    disableListWrap?: boolean;
+    /**
+     * The variant to use. Use `menu` to prevent selected items from impacting the initial focus
+     * and the vertical alignment relative to the anchor element.
+     * @default 'selectedMenu'
+     */
+    variant?: 'menu' | 'selectedMenu';
+  };
+  defaultComponent: D;
+}>;
 
-export type MenuListClassKey = keyof NonNullable<MenuListProps['classes']>;
+export type MenuListClassKey = keyof NonNullable<MenuListTypeMap['props']['classes']>;
 
 /**
  * A permanently displayed menu following https://www.w3.org/TR/wai-aria-practices/#menubutton.
@@ -52,4 +56,11 @@ export type MenuListClassKey = keyof NonNullable<MenuListProps['classes']>;
  * - [MenuList API](https://mui.com/api/menu-list/)
  * - inherits [List API](https://mui.com/api/list/)
  */
-export default function MenuList(props: MenuListProps): JSX.Element;
+declare const MenuList: ExtendList<MenuListTypeMap>;
+
+export type MenuListProps<
+  D extends React.ElementType = MenuListTypeMap['defaultComponent'],
+  P = {},
+> = OverrideProps<MenuListTypeMap<P, D>, D>;
+
+export default MenuList;

package/README.md

@@ -75,6 +75,8 @@ via [OpenCollective](https://opencollective.com/material-ui)
   <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="textemall" href="https://www.text-em-all.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/callemall/a6946da/logo/192.png" alt="call-em-all" title="Mass Text Messaging & Automated Calling" height="96" width="96" loading="lazy"></a>
   <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="hoodiebees" href="https://hoodiebees.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://images.opencollective.com/hoodiebees1/617b451/logo/192.png" alt="hoodiebees" loading="lazy" /></a>
   <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="movavi" href="https://www.movavi.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://images.opencollective.com/movavi-software/a1d0167/logo/192.png" alt="Screen recorder for Mac" loading="lazy" /></a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="sunmatosoft" href="https://sumatosoft.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://images.opencollective.com/sumatosoft_company/0b78570/avatar/192.png" alt="We help companies to digitalize their businesses" loading="lazy" /></a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="topaussiecasinos.com" href="https://topaussiecasinos.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://images.opencollective.com/aussiecasinohex/923df37/logo/192.png" alt="Aussie Gambling Guide" loading="lazy" /></a>
 </p>
 
 Direct

package/ScopedCssBaseline/ScopedCssBaseline.d.ts

@@ -13,7 +13,7 @@ export interface ScopedCssBaselineTypeMap<P = {}, D extends React.ElementType =
      */
     classes?: Partial<ScopedCssBaselineClasses>;
     /**
-     * Enable `color-scheme` css property to use `theme.palette.mode`.
+     * Enable `color-scheme` CSS property to use `theme.palette.mode`.
      * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
      * For browser support, check out https://caniuse.com/?search=color-scheme
      */

package/ScopedCssBaseline/ScopedCssBaseline.js

@@ -92,7 +92,7 @@ process.env.NODE_ENV !== "production" ? ScopedCssBaseline.propTypes
   component: PropTypes.elementType,
 
   /**
-   * Enable `color-scheme` css property to use `theme.palette.mode`.
+   * Enable `color-scheme` CSS property to use `theme.palette.mode`.
    * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
    * For browser support, check out https://caniuse.com/?search=color-scheme
    */

package/Snackbar/Snackbar.d.ts

@@ -12,7 +12,7 @@ export interface SnackbarOrigin {
   horizontal: 'left' | 'center' | 'right';
 }
 
-export type SnackbarCloseReason = 'timeout' | 'clickaway';
+export type SnackbarCloseReason = 'timeout' | 'clickaway' | 'escapeKeyDown';
 
 export interface SnackbarProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
   /**
@@ -73,10 +73,10 @@ export interface SnackbarProps extends StandardProps<React.HTMLAttributes<HTMLDi
    * The `reason` parameter can optionally be used to control the response to `onClose`,
    * for example ignoring `clickaway`.
    *
-   * @param {React.SyntheticEvent<any>} event The event source of the callback.
-   * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`.
+   * @param {React.SyntheticEvent<any> | Event} event The event source of the callback.
+   * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`, or `"escapeKeyDown"`.
    */
-  onClose?: (event: React.SyntheticEvent<any>, reason: SnackbarCloseReason) => void;
+  onClose?: (event: React.SyntheticEvent<any> | Event, reason: SnackbarCloseReason) => void;
   /**
    * If `true`, the component is shown.
    */

package/Snackbar/Snackbar.js

@@ -1,7 +1,7 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["onEnter", "onExited"],
-      _excluded2 = ["action", "anchorOrigin", "autoHideDuration", "children", "className", "ClickAwayListenerProps", "ContentProps", "disableWindowBlurListener", "message", "onClose", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "TransitionComponent", "transitionDuration", "TransitionProps"];
+      _excluded2 = ["action", "anchorOrigin", "autoHideDuration", "children", "className", "ClickAwayListenerProps", "ContentProps", "disableWindowBlurListener", "message", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "TransitionComponent", "transitionDuration", "TransitionProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -110,7 +110,9 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
     ContentProps,
     disableWindowBlurListener = false,
     message,
+    onBlur,
     onClose,
+    onFocus,
     onMouseEnter,
     onMouseLeave,
     open,
@@ -180,6 +182,14 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
     }
   }, [autoHideDuration, resumeHideDuration, setAutoHideTimer]);
 
+  const handleFocus = event => {
+    if (onFocus) {
+      onFocus(event);
+    }
+
+    handlePause();
+  };
+
   const handleMouseEnter = event => {
     if (onMouseEnter) {
       onMouseEnter(event);
@@ -188,6 +198,14 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
     handlePause();
   };
 
+  const handleBlur = event => {
+    if (onBlur) {
+      onBlur(event);
+    }
+
+    handleResume();
+  };
+
   const handleMouseLeave = event => {
     if (onMouseLeave) {
       onMouseLeave(event);
@@ -230,7 +248,33 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
     }
 
     return undefined;
-  }, [disableWindowBlurListener, handleResume, open]); // So we only render active snackbars.
+  }, [disableWindowBlurListener, handleResume, open]);
+  React.useEffect(() => {
+    if (!open) {
+      return undefined;
+    }
+    /**
+     * @param {KeyboardEvent} nativeEvent
+     */
+
+
+    function handleKeyDown(nativeEvent) {
+      if (!nativeEvent.defaultPrevented) {
+        // IE11, Edge (prior to using Bink?) use 'Esc'
+        if (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc') {
+          // not calling `preventDefault` since we don't know if people may ignore this event e.g. a permanently open snackbar
+          if (onClose) {
+            onClose(nativeEvent, 'escapeKeyDown');
+          }
+        }
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [exited, open, onClose]); // So we only render active snackbars.
 
   if (!open && exited) {
     return null;
@@ -241,6 +285,8 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
   }, ClickAwayListenerProps, {
     children: /*#__PURE__*/_jsx(SnackbarRoot, _extends({
       className: clsx(classes.root, className),
+      onBlur: handleBlur,
+      onFocus: handleFocus,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       ownerState: ownerState,
@@ -339,6 +385,11 @@ process.env.NODE_ENV !== "production" ? Snackbar.propTypes
    */
   message: PropTypes.node,
 
+  /**
+   * @ignore
+   */
+  onBlur: PropTypes.func,
+
   /**
    * Callback fired when the component requests to be closed.
    * Typically `onClose` is used to set state in the parent component,
@@ -346,11 +397,16 @@ process.env.NODE_ENV !== "production" ? Snackbar.propTypes
    * The `reason` parameter can optionally be used to control the response to `onClose`,
    * for example ignoring `clickaway`.
    *
-   * @param {React.SyntheticEvent<any>} event The event source of the callback.
-   * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`.
+   * @param {React.SyntheticEvent<any> | Event} event The event source of the callback.
+   * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`, or `"escapeKeyDown"`.
    */
   onClose: PropTypes.func,
 
+  /**
+   * @ignore
+   */
+  onFocus: PropTypes.func,
+
   /**
    * @ignore
    */

package/TextField/TextField.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { refType } from '@mui/utils';
+import { refType, unstable_useId as useId } from '@mui/utils';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Input from '../Input';
@@ -90,7 +90,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     FormHelperTextProps,
     fullWidth = false,
     helperText,
-    id,
+    id: idOverride,
     InputLabelProps,
     inputProps,
     InputProps,
@@ -160,6 +160,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     InputMore['aria-describedby'] = undefined;
   }
 
+  const id = useId(idOverride);
   const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
   const inputLabelId = label && id ? `${id}-label` : undefined;
   const InputComponent = variantComponent[variant];

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.2.1
+/** @license MUI v5.2.2
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/CssBaseline/CssBaseline.js

@@ -100,7 +100,7 @@ process.env.NODE_ENV !== "production" ? CssBaseline.propTypes
   children: PropTypes.node,
 
   /**
-   * Enable `color-scheme` css property to use `theme.palette.mode`.
+   * Enable `color-scheme` CSS property to use `theme.palette.mode`.
    * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
    * For browser support, check out https://caniuse.com/?search=color-scheme
    * @default false

package/legacy/ScopedCssBaseline/ScopedCssBaseline.js

@@ -90,7 +90,7 @@ process.env.NODE_ENV !== "production" ? ScopedCssBaseline.propTypes
   component: PropTypes.elementType,
 
   /**
-   * Enable `color-scheme` css property to use `theme.palette.mode`.
+   * Enable `color-scheme` CSS property to use `theme.palette.mode`.
    * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
    * For browser support, check out https://caniuse.com/?search=color-scheme
    */

package/legacy/Snackbar/Snackbar.js

@@ -103,7 +103,9 @@ var Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
       _props$disableWindowB = props.disableWindowBlurListener,
       disableWindowBlurListener = _props$disableWindowB === void 0 ? false : _props$disableWindowB,
       message = props.message,
+      onBlur = props.onBlur,
       onClose = props.onClose,
+      onFocus = props.onFocus,
       onMouseEnter = props.onMouseEnter,
       onMouseLeave = props.onMouseLeave,
       open = props.open,
@@ -121,7 +123,7 @@ var Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
   var onEnter = _props$TransitionProp.onEnter,
       onExited = _props$TransitionProp.onExited,
       TransitionProps = _objectWithoutProperties(_props$TransitionProp, ["onEnter", "onExited"]),
-      other = _objectWithoutProperties(props, ["action", "anchorOrigin", "autoHideDuration", "children", "className", "ClickAwayListenerProps", "ContentProps", "disableWindowBlurListener", "message", "onClose", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "TransitionComponent", "transitionDuration", "TransitionProps"]);
+      other = _objectWithoutProperties(props, ["action", "anchorOrigin", "autoHideDuration", "children", "className", "ClickAwayListenerProps", "ContentProps", "disableWindowBlurListener", "message", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "TransitionComponent", "transitionDuration", "TransitionProps"]);
 
   var theme = useTheme();
   var isRtl = theme.direction === 'rtl';
@@ -179,6 +181,14 @@ var Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
     }
   }, [autoHideDuration, resumeHideDuration, setAutoHideTimer]);
 
+  var handleFocus = function handleFocus(event) {
+    if (onFocus) {
+      onFocus(event);
+    }
+
+    handlePause();
+  };
+
   var handleMouseEnter = function handleMouseEnter(event) {
     if (onMouseEnter) {
       onMouseEnter(event);
@@ -187,6 +197,14 @@ var Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
     handlePause();
   };
 
+  var handleBlur = function handleBlur(event) {
+    if (onBlur) {
+      onBlur(event);
+    }
+
+    handleResume();
+  };
+
   var handleMouseLeave = function handleMouseLeave(event) {
     if (onMouseLeave) {
       onMouseLeave(event);
@@ -229,7 +247,33 @@ var Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
     }
 
     return undefined;
-  }, [disableWindowBlurListener, handleResume, open]); // So we only render active snackbars.
+  }, [disableWindowBlurListener, handleResume, open]);
+  React.useEffect(function () {
+    if (!open) {
+      return undefined;
+    }
+    /**
+     * @param {KeyboardEvent} nativeEvent
+     */
+
+
+    function handleKeyDown(nativeEvent) {
+      if (!nativeEvent.defaultPrevented) {
+        // IE11, Edge (prior to using Bink?) use 'Esc'
+        if (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc') {
+          // not calling `preventDefault` since we don't know if people may ignore this event e.g. a permanently open snackbar
+          if (onClose) {
+            onClose(nativeEvent, 'escapeKeyDown');
+          }
+        }
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown);
+    return function () {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [exited, open, onClose]); // So we only render active snackbars.
 
   if (!open && exited) {
     return null;
@@ -240,6 +284,8 @@ var Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
   }, ClickAwayListenerProps, {
     children: /*#__PURE__*/_jsx(SnackbarRoot, _extends({
       className: clsx(classes.root, className),
+      onBlur: handleBlur,
+      onFocus: handleFocus,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       ownerState: ownerState,
@@ -340,6 +386,11 @@ process.env.NODE_ENV !== "production" ? Snackbar.propTypes
    */
   message: PropTypes.node,
 
+  /**
+   * @ignore
+   */
+  onBlur: PropTypes.func,
+
   /**
    * Callback fired when the component requests to be closed.
    * Typically `onClose` is used to set state in the parent component,
@@ -347,11 +398,16 @@ process.env.NODE_ENV !== "production" ? Snackbar.propTypes
    * The `reason` parameter can optionally be used to control the response to `onClose`,
    * for example ignoring `clickaway`.
    *
-   * @param {React.SyntheticEvent<any>} event The event source of the callback.
-   * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`.
+   * @param {React.SyntheticEvent<any> | Event} event The event source of the callback.
+   * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`, or `"escapeKeyDown"`.
    */
   onClose: PropTypes.func,
 
+  /**
+   * @ignore
+   */
+  onFocus: PropTypes.func,
+
   /**
    * @ignore
    */

package/legacy/TextField/TextField.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { refType } from '@mui/utils';
+import { refType, unstable_useId as useId } from '@mui/utils';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Input from '../Input';
@@ -93,7 +93,7 @@ var TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref) {
       _props$fullWidth = props.fullWidth,
       fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
       helperText = props.helperText,
-      id = props.id,
+      idOverride = props.id,
       InputLabelProps = props.InputLabelProps,
       inputProps = props.inputProps,
       InputProps = props.InputProps,
@@ -166,6 +166,7 @@ var TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref) {
     InputMore['aria-describedby'] = undefined;
   }
 
+  var id = useId(idOverride);
   var helperTextId = helperText && id ? "".concat(id, "-helper-text") : undefined;
   var inputLabelId = label && id ? "".concat(id, "-label") : undefined;
   var InputComponent = variantComponent[variant];

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.2.1
+/** @license MUI v5.2.2
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/styles/adaptV4Theme.js

@@ -35,7 +35,7 @@ export default function adaptV4Theme(inputTheme) {
     var componentValue = theme.components[component] || {};
     componentValue.defaultProps = props[component];
     theme.components[component] = componentValue;
-  }); // css overrides
+  }); // CSS overrides
 
   Object.keys(styleOverrides).forEach(function (component) {
     var componentValue = theme.components[component] || {};

package/legacy/styles/responsiveFontSizes.js

@@ -15,7 +15,7 @@ export default function responsiveFontSizes(themeInput) {
   var theme = _extends({}, themeInput);
 
   theme.typography = _extends({}, theme.typography);
-  var typography = theme.typography; // Convert between css lengths e.g. em->px or px->rem
+  var typography = theme.typography; // Convert between CSS lengths e.g. em->px or px->rem
   // Set the baseFontSize for your project. Defaults to 16px (also the browser default).
 
   var convert = convertLength(typography.htmlFontSize);

package/modern/CssBaseline/CssBaseline.js

@@ -88,7 +88,7 @@ process.env.NODE_ENV !== "production" ? CssBaseline.propTypes
   children: PropTypes.node,
 
   /**
-   * Enable `color-scheme` css property to use `theme.palette.mode`.
+   * Enable `color-scheme` CSS property to use `theme.palette.mode`.
    * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
    * For browser support, check out https://caniuse.com/?search=color-scheme
    * @default false