@mui/material 5.2.1 → 5.2.2

package/modern/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/modern/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/modern/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,
@@ -158,6 +158,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/modern/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/modern/styles/adaptV4Theme.js

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

package/modern/styles/responsiveFontSizes.js

@@ -12,7 +12,7 @@ export default function responsiveFontSizes(themeInput, options = {}) {
   const theme = _extends({}, themeInput);
 
   theme.typography = _extends({}, theme.typography);
-  const typography = theme.typography; // Convert between css lengths e.g. em->px or px->rem
+  const 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).
 
   const convert = convertLength(typography.htmlFontSize);

package/node/CssBaseline/CssBaseline.js

@@ -117,7 +117,7 @@ process.env.NODE_ENV !== "production" ? CssBaseline.propTypes
   children: _propTypes.default.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/node/ScopedCssBaseline/ScopedCssBaseline.js

@@ -113,7 +113,7 @@ process.env.NODE_ENV !== "production" ? ScopedCssBaseline.propTypes
   component: _propTypes.default.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/node/Snackbar/Snackbar.js

@@ -42,7 +42,7 @@ var _snackbarClasses = require("./snackbarClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 
 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"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -138,7 +138,9 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
     ContentProps,
     disableWindowBlurListener = false,
     message,
+    onBlur,
     onClose,
+    onFocus,
     onMouseEnter,
     onMouseLeave,
     open,
@@ -205,6 +207,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);
@@ -213,6 +223,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);
@@ -255,7 +273,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;
@@ -266,6 +310,8 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
   }, ClickAwayListenerProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SnackbarRoot, (0, _extends2.default)({
       className: (0, _clsx.default)(classes.root, className),
+      onBlur: handleBlur,
+      onFocus: handleFocus,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       ownerState: ownerState,
@@ -364,6 +410,11 @@ process.env.NODE_ENV !== "production" ? Snackbar.propTypes
    */
   message: _propTypes.default.node,
 
+  /**
+   * @ignore
+   */
+  onBlur: _propTypes.default.func,
+
   /**
    * Callback fired when the component requests to be closed.
    * Typically `onClose` is used to set state in the parent component,
@@ -371,11 +422,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.default.func,
 
+  /**
+   * @ignore
+   */
+  onFocus: _propTypes.default.func,
+
   /**
    * @ignore
    */

package/node/TextField/TextField.js

@@ -120,7 +120,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     FormHelperTextProps,
     fullWidth = false,
     helperText,
-    id,
+    id: idOverride,
     InputLabelProps,
     inputProps,
     InputProps,
@@ -188,6 +188,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     InputMore['aria-describedby'] = undefined;
   }
 
+  const id = (0, _utils.unstable_useId)(idOverride);
   const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
   const inputLabelId = label && id ? `${id}-label` : undefined;
   const InputComponent = variantComponent[variant];

package/node/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/node/styles/adaptV4Theme.js

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

package/node/styles/responsiveFontSizes.js

@@ -22,7 +22,7 @@ function responsiveFontSizes(themeInput, options = {}) {
   } = options;
   const theme = (0, _extends2.default)({}, themeInput);
   theme.typography = (0, _extends2.default)({}, theme.typography);
-  const typography = theme.typography; // Convert between css lengths e.g. em->px or px->rem
+  const 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).
 
   const convert = (0, _cssUtils.convertLength)(typography.htmlFontSize);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.2.1",
+  "version": "5.2.2",
   "private": false,
   "author": "MUI Team",
   "description": "Quickly build beautiful React apps. MUI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.",
@@ -46,10 +46,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@mui/base": "5.0.0-alpha.57",
-    "@mui/system": "^5.2.1",
+    "@mui/base": "5.0.0-alpha.58",
+    "@mui/system": "^5.2.2",
     "@mui/types": "^7.1.0",
-    "@mui/utils": "^5.2.1",
+    "@mui/utils": "^5.2.2",
     "@types/react-transition-group": "^4.4.4",
     "clsx": "^1.1.1",
     "csstype": "^3.0.10",

package/styles/adaptV4Theme.js

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

package/styles/index.d.ts

@@ -55,6 +55,8 @@ export {
   lighten,
   ColorFormat,
   ColorObject,
+  StyledEngineProvider,
+  SxProps,
   experimental_sx,
 } from '@mui/system';
 export { default as useTheme } from './useTheme';
@@ -70,7 +72,6 @@ export { ComponentsProps, ComponentsPropsList } from './props';
 export { ComponentsVariants } from './variants';
 export { ComponentsOverrides, ComponentNameToClassKey } from './overrides';
 export { Components } from './components';
-export { StyledEngineProvider } from '@mui/system';
 
 export type ClassNameMap<ClassKey extends string = string> = Record<ClassKey, string>;
 

package/styles/responsiveFontSizes.js

@@ -12,7 +12,7 @@ export default function responsiveFontSizes(themeInput, options = {}) {
   const theme = _extends({}, themeInput);
 
   theme.typography = _extends({}, theme.typography);
-  const typography = theme.typography; // Convert between css lengths e.g. em->px or px->rem
+  const 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).
 
   const convert = convertLength(typography.htmlFontSize);

package/umd/material-ui.development.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.
@@ -2008,7 +2008,7 @@
 
   var pkg = {
   	name: "@emotion/react",
-  	version: "11.6.0",
+  	version: "11.7.0",
   	main: "dist/emotion-react.cjs.js",
   	module: "dist/emotion-react.esm.js",
   	browser: {
@@ -4998,15 +4998,18 @@
   const useEnhancedEffect = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
   var useEnhancedEffect$1 = useEnhancedEffect;
 
+  let globalId = 0;
   function useId(idOverride) {
     const [defaultId, setDefaultId] = React__namespace.useState(idOverride);
     const id = idOverride || defaultId;
     React__namespace.useEffect(() => {
       if (defaultId == null) {
         // Fallback to this default id when possible.
-        // Use the random value for client-side rendering only.
+        // Use the incrementing value for client-side rendering only.
         // We can't use it server-side.
-        setDefaultId(`mui-${Math.round(Math.random() * 1e9)}`);
+        // If you want to use random values please consider the Birthday Problem: https://en.wikipedia.org/wiki/Birthday_problem
+        globalId += 1;
+        setDefaultId(`mui-${globalId}`);
       }
     }, [defaultId]);
     return id;
@@ -5095,7 +5098,7 @@
   // based on https://github.com/WICG/focus-visible/blob/v4.1.5/src/focus-visible.js
   let hadKeyboardEvent = true;
   let hadFocusVisibleRecently = false;
-  let hadFocusVisibleRecentlyTimeout = null;
+  let hadFocusVisibleRecentlyTimeout;
   const inputTypesWhitelist = {
     text: true,
     search: true,
@@ -7317,7 +7320,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       const componentValue = theme.components[component] || {};
       componentValue.defaultProps = props[component];
       theme.components[component] = componentValue;
-    }); // css overrides
+    }); // CSS overrides
 
     Object.keys(styleOverrides).forEach(component => {
       const componentValue = theme.components[component] || {};
@@ -16430,7 +16433,7 @@ const theme2 = createTheme({ palette: {
     const theme = _extends({}, themeInput);
 
     theme.typography = _extends({}, theme.typography);
-    const typography = theme.typography; // Convert between css lengths e.g. em->px or px->rem
+    const 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).
 
     const convert = convertLength(typography.htmlFontSize);
@@ -27208,7 +27211,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     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
@@ -40753,7 +40756,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     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
      */
@@ -42733,7 +42736,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   var snackbarClasses$1 = snackbarClasses;
 
   const _excluded$z = ["onEnter", "onExited"],
-        _excluded2$2 = ["action", "anchorOrigin", "autoHideDuration", "children", "className", "ClickAwayListenerProps", "ContentProps", "disableWindowBlurListener", "message", "onClose", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "TransitionComponent", "transitionDuration", "TransitionProps"];
+        _excluded2$2 = ["action", "anchorOrigin", "autoHideDuration", "children", "className", "ClickAwayListenerProps", "ContentProps", "disableWindowBlurListener", "message", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "TransitionComponent", "transitionDuration", "TransitionProps"];
 
   const useUtilityClasses$s = ownerState => {
     const {
@@ -42827,7 +42830,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       ContentProps,
       disableWindowBlurListener = false,
       message,
+      onBlur,
       onClose,
+      onFocus,
       onMouseEnter,
       onMouseLeave,
       open,
@@ -42897,6 +42902,14 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       }
     }, [autoHideDuration, resumeHideDuration, setAutoHideTimer]);
 
+    const handleFocus = event => {
+      if (onFocus) {
+        onFocus(event);
+      }
+
+      handlePause();
+    };
+
     const handleMouseEnter = event => {
       if (onMouseEnter) {
         onMouseEnter(event);
@@ -42905,6 +42918,14 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       handlePause();
     };
 
+    const handleBlur = event => {
+      if (onBlur) {
+        onBlur(event);
+      }
+
+      handleResume();
+    };
+
     const handleMouseLeave = event => {
       if (onMouseLeave) {
         onMouseLeave(event);
@@ -42947,7 +42968,33 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       }
 
       return undefined;
-    }, [disableWindowBlurListener, handleResume, open]); // So we only render active snackbars.
+    }, [disableWindowBlurListener, handleResume, open]);
+    React__namespace.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;
@@ -42958,6 +43005,8 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     }, ClickAwayListenerProps, {
       children: /*#__PURE__*/jsxRuntime_1(SnackbarRoot, _extends({
         className: clsx(classes.root, className),
+        onBlur: handleBlur,
+        onFocus: handleFocus,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         ownerState: ownerState,
@@ -43056,6 +43105,11 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      */
     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,
@@ -43063,11 +43117,16 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      * 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
      */
@@ -50648,7 +50707,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       FormHelperTextProps,
       fullWidth = false,
       helperText,
-      id,
+      id: idOverride,
       InputLabelProps,
       inputProps,
       InputProps,
@@ -50718,6 +50777,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       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];